table/utils/ui/table-properties

module

Constants

`defaultColors : Array<ColorOption>`

module:table/utils/ui/table-properties~defaultColors

A default color palette used by various user interfaces related to tables, for instance, by TableCellPropertiesUI or TablePropertiesUI.

The color palette follows the table color configuration format and contains the following color definitions:

const defaultColors = [
  {
    color: 'hsl(0, 0%, 0%)',
    label: 'Black'
  },
  {
    color: 'hsl(0, 0%, 30%)',
    label: 'Dim grey'
  },
  {
    color: 'hsl(0, 0%, 60%)',
    label: 'Grey'
  },
  {
    color: 'hsl(0, 0%, 90%)',
    label: 'Light grey'
  },
  {
    color: 'hsl(0, 0%, 100%)',
    label: 'White',
    hasBorder: true
  },
  {
    color: 'hsl(0, 75%, 60%)',
    label: 'Red'
  },
  {
    color: 'hsl(30, 75%, 60%)',
    label: 'Orange'
  },
  {
    color: 'hsl(60, 75%, 60%)',
    label: 'Yellow'
  },
  {
    color: 'hsl(90, 75%, 60%)',
    label: 'Light green'
  },
  {
    color: 'hsl(120, 75%, 60%)',
    label: 'Green'
  },
  {
    color: 'hsl(150, 75%, 60%)',
    label: 'Aquamarine'
  },
  {
    color: 'hsl(180, 75%, 60%)',
    label: 'Turquoise'
  },
  {
    color: 'hsl(210, 75%, 60%)',
    label: 'Light blue'
  },
  {
    color: 'hsl(240, 75%, 60%)',
    label: 'Blue'
  },
  {
    color: 'hsl(270, 75%, 60%)',
    label: 'Purple'
  }
];

See source

Functions

colorFieldValidator( value ) → boolean
internal

Returns true when the passed value is an empty string or a valid CSS color expression. Otherwise, false is returned.
See isColorStyleValue.
See source (with github icon)
Parameters
value : string
Returns
boolean
fillToolbar( options = { [options.defaultValue], options.icons, options.labels, [options.nameToValue], options.propertyName, options.toolbar, options.view } ) → void
internal
module:table/utils/ui/table-properties~fillToolbar
A helper that fills a toolbar with buttons that:
- have some labels,
- have some icons,
- set a certain UI view property value upon execution.
See source (with github icon)
Type parameters
TView : extends View<HTMLElement>
TPropertyName
Parameters
options : object
Configuration options

Properties

[ options.defaultValue ] : string
Default value for the property.
options.icons : Record<string, string>
Object with button icons.
options.labels : Record<number, string>
Object with button labels.
[ options.nameToValue ] : ( name: string ) => string
A function that maps a button name to a value. By default names are the same as values.
options.propertyName : TPropertyName
The name of the observable property in the view.
options.toolbar : ToolbarView
The toolbar to fill with buttons.
options.view : TView
The view that has the observable property.
Returns
void
getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>
internal

Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
See source (with github icon)
Parameters
view : TablePropertiesView | TableCellPropertiesView
defaultStyle : string
The default border.
Returns
Collection<ListDropdownItemDefinition>
getBorderStyleLabels( t ) → Record<string, string>
internal

Returns an object containing pairs of CSS border style values and their localized UI labels. Used by TableCellPropertiesView and TablePropertiesView.
See source (with github icon)
Parameters
t : LocaleTranslate
The "t" function provided by the editor that is used to localize strings.
Returns
Record<string, string>
getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, [options.defaultColorValue] } ) → ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView
internal
module:table/utils/ui/table-properties~getLabeledColorInputCreator
Returns a creator for a color input with a label.
For given options, it returns a function that creates an instance of a color input logically related to a labeled view in the DOM.
The helper does the following:
- It sets the color input id and ariaDescribedById attributes.
- It binds the color input isReadOnly to the labeled view.
- It binds the color input hasError to the labeled view.
- It enables a logic that cleans up the error when the user starts typing in the color input.
Usage:
```
const colorInputCreator = getLabeledColorInputCreator( {
  colorConfig: [ ... ],
  columns: 3,
} );

const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
console.log( labeledInputView.view ); // A color input instance.
```
Copy code
See source (with github icon)
Parameters
options : object
Color input options.

Properties

options.colorConfig : Array<NormalizedColorOption>
The configuration of the color palette displayed in the input's dropdown.
options.colorPickerConfig : false | ColorPickerConfig
The configuration of the color picker. You could disable it or define your output format.
options.columns : number
The configuration of the number of columns the color palette consists of in the input's dropdown.
[ options.defaultColorValue ] : string
If specified, the color input view will replace the "Remove color" button with the "Restore default" button. Instead of clearing the input field, the default color value will be set.
Returns
( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView
getLocalizedColorErrorText( t ) → string
internal

Returns a localized error string that can be displayed next to color (background, border) fields that have an invalid value.
See source (with github icon)
Parameters
t : LocaleTranslate
The "t" function provided by the editor that is used to localize strings.
Returns
string
getLocalizedLengthErrorText( t ) → string
internal

Returns a localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.
See source (with github icon)
Parameters
t : LocaleTranslate
The "t" function provided by the editor that is used to localize strings.
Returns
string
lengthFieldValidator( value ) → boolean
internal

Returns true when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, false is returned.
See isLengthStyleValue. See isPercentageStyleValue.
See source (with github icon)
Parameters
value : string
Returns
boolean
lineWidthFieldValidator( value ) → boolean
internal

Returns true when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, false is returned.
See isLengthStyleValue.
See source (with github icon)
Parameters
value : string
Returns
boolean

table/utils/ui/table-properties

Constants

`defaultColors : Array<ColorOption>`

Functions

`colorFieldValidator( value ) → boolean`
internal

Parameters

Returns

`fillToolbar( options = { [options.defaultValue], options.icons, options.labels, [options.nameToValue], options.propertyName, options.toolbar, options.view } ) → void`
internal

Type parameters

Parameters

Returns

`getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>`
internal

Parameters

Returns

`getBorderStyleLabels( t ) → Record<string, string>`
internal

Parameters

Returns

`getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, [options.defaultColorValue] } ) → ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView`
internal

Parameters

Returns

`getLocalizedColorErrorText( t ) → string`
internal

Parameters

Returns

`getLocalizedLengthErrorText( t ) → string`
internal

Parameters

Returns

`lengthFieldValidator( value ) → boolean`
internal

Parameters

Returns

`lineWidthFieldValidator( value ) → boolean`
internal

Parameters

Returns

table/utils/ui/table-properties

Constants

defaultColors : Array<ColorOption>

Functions

colorFieldValidator( value ) → booleaninternal

Parameters

Returns

fillToolbar( options = { [options.defaultValue], options.icons, options.labels, [options.nameToValue], options.propertyName, options.toolbar, options.view } ) → voidinternal

Type parameters

Parameters

Returns

getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>internal

Parameters

Returns

getBorderStyleLabels( t ) → Record<string, string>internal

Parameters

Returns

getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, [options.defaultColorValue] } ) → ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputViewinternal

Parameters

Returns

getLocalizedColorErrorText( t ) → stringinternal

Parameters

Returns

getLocalizedLengthErrorText( t ) → stringinternal

Parameters

Returns

lengthFieldValidator( value ) → booleaninternal

Parameters

Returns

lineWidthFieldValidator( value ) → booleaninternal

Parameters

Returns

`defaultColors : Array<ColorOption>`

`colorFieldValidator( value ) → boolean`
internal

`fillToolbar( options = { [options.defaultValue], options.icons, options.labels, [options.nameToValue], options.propertyName, options.toolbar, options.view } ) → void`
internal

`getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>`
internal

`getBorderStyleLabels( t ) → Record<string, string>`
internal

`getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, [options.defaultColorValue] } ) → ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView`
internal

`getLocalizedColorErrorText( t ) → string`
internal

`getLocalizedLengthErrorText( t ) → string`
internal

`lengthFieldValidator( value ) → boolean`
internal

`lineWidthFieldValidator( value ) → boolean`
internal