@operato/data-grist 10.8.1 → 10.10.0

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AA6LA;;;;;;;;GAQG;AACH,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAwmBD,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;IACf,qCAAiB,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field.js'\nimport { DataCardGutter } from './data-card/data-card-gutter.js'\nimport { RecordCard } from './data-card/record-card.js'\nimport { DataGridField } from './data-grid/data-grid-field.js'\nimport { DataListField } from './data-list/data-list-field.js'\nimport { DataListGutter } from './data-list/data-list-gutter.js'\nimport { RecordPartial } from './data-list/record-partial.js'\nimport { DataReportField } from './data-report/data-report-field.js'\nimport { OxGristEditor } from './editors/index.js'\nimport { QueryFilter, OxFiltersForm } from './filters/index.js'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer.js'\n\n/**\n * Configuration object for defining the structure and behavior of a Grist table.\n *\n * @typedef {Object} GristConfig\n * @property {ColumnConfig[]} columns - An array of column configurations.\n * @property {RowsConfig} rows - Configuration for rows and their behavior.\n * @property {ListConfig} list - Configuration for the list view.\n * @property {TreeConfig} tree - Configuration for tree-related settings.\n * @property {PaginationConfig} [pagination] - Configuration for pagination settings (optional).\n * @property {SortersConfig} [sorters] - Configuration for sorting settings (optional).\n * @property {FiltersConfig} [filters] - Configuration for filtering settings (optional).\n */\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  tree: TreeConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n  /**\n   * 아직 아무것도 없을 때 화면이 하는 말.\n   *\n   * 전에는 「NO RECORDS」가 컴포넌트에 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —\n   * **비어 있는 화면이야말로** 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는 자리이고,\n   * 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.\n   *\n   * 정하지 않으면 예전 문장이 그대로 나온다.\n   */\n  emptyNote?: { title?: string; description?: string; icon?: string }\n}\n\n/**\n * Configuration object for specifying sorting options.\n *\n * @typedef {Object} SorterConfig\n * @property {string} name - The name of the sorting option.\n * @property {boolean} [desc] - Optional. Indicates whether the sorting is in descending order (optional).\n */\nexport type SorterConfig = { name: string; desc?: boolean }\n\n/**\n * Configuration array for specifying multiple sorting options.\n *\n * @typedef {SorterConfig[]} SortersConfig\n */\nexport type SortersConfig = SorterConfig[]\n\n/**\n * Enumeration of filter operators used to define filter conditions.\n *\n * @typedef {'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' |\n * 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' |\n * 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike'} FilterOperator\n */\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type SelectOptionObject =\n  | {\n      name: string\n      display?: never\n      value: string\n    }\n  | {\n      display: string\n      name?: never\n      value: string\n    }\n\nexport type SelectOption = SelectOptionObject | string\n\nexport type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean\n\n/**\n * Configuration object for specifying filter conditions.\n *\n * @typedef {Object} FilterConfigObject\n * @property {string} type - The type of the filter condition.\n * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).\n * @property {Object} [options] - Additional options or parameters for the filter condition (optional).\n * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).\n * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).\n * @property {string} [label] - The label to display for the filter condition (optional).\n */\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n  boundTo?: string[]\n  hidden?: boolean\n  onchange?: FilterChangedCallback\n}\n\n/**\n * Configuration option for specifying filter conditions.\n *\n * The `FilterConfig` type can take one of the following forms:\n * - A `FilterConfigObject` representing a specific filter condition.\n * - A `FilterOperator` representing a predefined filter operator.\n * - A boolean value to enable or disable filtering for a specific column.\n *\n * @typedef {Object|FilterOperator|boolean} FilterConfig\n */\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\n/**\n * Represents a filter condition with the following properties:\n *\n * - `name`: The name of the column or field being filtered.\n * - `operator`: The filter operator used for comparison.\n * - `value`: The value or values to compare against.\n *\n * @typedef {Object} FilterValue\n * @property {string} name - The name of the column or field.\n * @property {FilterOperator} operator - The filter operator.\n * @property {string|number|boolean|string[]|number[]|undefined} value - The value(s) to compare.\n */\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n *\n * @typedef {Object} FiltersConfig\n * @property {boolean} [header] - Specifies whether to provide filtering functionality in the header.\n */\nexport type FiltersConfig = {\n  header?: boolean\n}\n\n/**\n * Configuration options for pagination.\n *\n * @typedef {Object} PaginationConfig\n * @property {number} [page] - The current page number.\n * @property {number} [limit] - The maximum number of records to display per page.\n * @property {number[]} [pages] - An array of available page numbers.\n * @property {boolean} [infinite] - Specifies whether to use infinite scrolling for pagination.\n */\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\n/**\n * Option to specify the inheritance behavior for including data from parent domains.\n *\n * - 'None': Do not include data from the parent domain.\n * - 'Include': Include data from the parent domain along with current domain data.\n * - 'Only': Include data only from the parent domain, excluding current domain data.\n *\n * @enum {string}\n */\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\n/**\n * Configuration options for fetching data from a data source.\n *\n * @typedef {Object} FetchOption\n * @property {number} [page] - The page number to retrieve.\n * @property {number} [limit] - The maximum number of records to retrieve per page.\n * @property {SortersConfig} [sorters] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {SortersConfig} [sortings] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {QueryFilter[]} [filters] - An array of filtering criteria.\n * @property {InheritedValueType} [inherited] - Specifies the inheritance behavior for including data from parent domains.\n * @property {object} [options] - Additional options for customizing data fetching behavior.\n */\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\n\n/**\n * Represents the result of a data fetching operation.\n *\n * @typedef {Object} FetchResult\n * @property {number} [page] - The page number of the fetched data.\n * @property {number} [limit] - The maximum number of records per page.\n * @property {number} total - The total number of records in the data source.\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\n\n/**\n * A function that handles data fetching operations.\n *\n * @param param - The fetch options specifying how data should be retrieved.\n * @returns A promise that resolves to a `FetchResult`.\n */\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\n/**\n * Represents a Grist event handler function.\n *\n * @typedef {Function} GristEventHandler\n * @param {ColumnConfig[]} columns - An array of column configurations.\n * @param {GristData} [data] - The Grist data associated with the event.\n * @param {ColumnConfig} [column] - The column configuration related to the event (if applicable).\n * @param {GristRecord} [record] - The Grist record related to the event (if applicable).\n * @param {number} [rowIndex] - The index of the row related to the event (if applicable).\n * @param {any} [target] - The target element or object related to the event (if applicable).\n * @param {Event} [e] - The event object (if applicable).\n * @returns {void}\n */\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any,\n  e?: Event\n) => void\n\n/**\n * Represents an accumulator function for data aggregation and accumulation.\n *\n * @typedef {string|'sum'|'avg'|'count'|'min'|'max'|Function} AccumulatorFunc\n * @param {GristData} data - The Grist data for aggregation.\n * @param {ColumnConfig} column - The column configuration for aggregation.\n * @returns {string|number} - The aggregated result.\n */\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\n/**\n * Type representing an accumulator function or configuration object.\n *\n * An accumulator is used for data aggregation and accumulation purposes. It can be either\n * a predefined accumulator function (e.g., 'sum', 'avg', 'count', etc.) or a configuration\n * object specifying the type of accumulator and labeling options.\n *\n * @typedef {AccumulatorFunc|{type: AccumulatorFunc, tag?: boolean}} AccumulatorObject\n * @property {AccumulatorFunc} [type] - The type of accumulator function or predefined function name.\n * @property {boolean} [tag] - An option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n *\n * @example\n * // Using a predefined accumulator function:\n * const accumulator: AccumulatorObject = 'sum'; // Represents a 'sum' accumulator.\n *\n * // Using an accumulator configuration object:\n * const accumulatorConfig: AccumulatorObject = {\n *   type: 'avg', // Specifies the type of accumulator ('avg' for average).\n *   tag: true,   // Option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n * };\n */\nexport type AccumulatorObject =\n  | AccumulatorFunc\n  | {\n      type: AccumulatorFunc\n      tag?: boolean\n    }\n\n/**\n * Type representing column configuration information.\n *\n * @typedef {object} ColumnConfig\n * @property {string} type - Represents the data type of the column (e.g., 'text', 'number', 'date', 'gutter', etc.).\n * @property {string} name - Represents the name of the column.\n * @property {('button'|'sequence'|'row-selector'|'dirty')} [gutterName] - If the column type is 'gutter', specifies the name of one of the registered gutters (only set when the type is 'gutter').\n * @property {boolean} [fixed] - In case of a grid type column, specifies whether the column's position should be fixed and unaffected by horizontal scrolling (optional).\n * @property {HeaderConfig} header - Object representing the header configuration of the column.\n * @property {RecordConfig} record - Object representing the record configuration of the column.\n * @property {GristEventHandlerSet} handlers - Object representing the Grist event handler settings.\n * @property {LabelConfig} label - Object representing the label configuration of the column. This property is used to represent the label of the column's information in list mode, card mode, and when displaying the column in a filter form (ox-filters-form).\n * @property {boolean} [hidden] - Indicates whether the column is hidden or not (optional).\n * @property {boolean} [sortable] - Indicates whether the column is sortable or not (optional). If this setting is true, the header provides the ability to toggle the sorting direction.\n * @property {boolean} [resizable] - Indicates whether the column is resizable or not (optional). This setting determines whether the column's width can be adjusted.\n * @property {(number|string|ColumnWidthCallback)} [width] - Represents the width of the column (e.g., 100, '50%', or a callback function to calculate width).\n * @property {boolean} [forList] - Indicates whether the column is intended for display in list mode (optional, applicable only to gutter type columns).\n * @property {boolean} [forCard] - Indicates whether the column is intended for display in card mode (optional, applicable only to gutter type columns).\n * @property {ValidationCallback} [validation] - Callback function for column validation (optional). This function validates whether the value of the column is valid when edited.\n * @property {AccumulatorObject} [accumulator] - Object used for accumulating values of the column (optional, applicable only in grid mode). It specifies a function to automatically aggregate the values of the column for all records. The aggregated result is displayed in a row below the last record (accumulation record).\n * @property {FilterConfig} [filter] - Object representing the filter configuration of the column.\n * @property {(ImexConfig|boolean)} [imex] - Object or boolean value representing the configuration for importing and exporting column data.\n * @property {boolean} [multiple] - Indicates whether the column allows multiple selections or not (optional).\n * @property {boolean} [rowCount] - Indicates whether the column shows the row count or not (optional).\n */\nexport type ColumnConfig = {\n  type: string\n  name: string\n  /**\n   * \"gutter\" 타입의 컬럼인 경우, 등록된 gutter들 중의 하나의 이름을 명시합니다(type이 gutter인 경우에만 설정합니다).\n   * (e.g., 'button', 'sequence', 'row-selector', 'dirty', etc)\n   *\n   * \"Gutter\"는 테이블 형태에서 각 행의 왼쪽 또는 오른쪽에 위치한 추가적인 열(column)을 가리킵니다.\n   * 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.\n   * Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다.\n   * 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다.\n   * 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.\n   */\n  gutterName?: 'button' | 'sequence' | 'row-selector' | 'dirty'\n  title?: string\n  fixed?: boolean\n  /** [begin] only for button gutter column */\n  icon?: string\n  iconOnly?: boolean\n  danger?: boolean\n  /** [end] only for button gutter column */\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  forCard?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorObject\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n  /** 특정 도구에 의해서 사용되는 옵션으로, 일반적인 용도로 사용되지 않음을 표현할 수 있다. */\n  unusable?: boolean\n  multiline?: boolean // 멀티라인 여부\n}\n\n/**\n * Callback function type for column validation.\n *\n * This function is used to validate whether the value of a column is valid when edited.\n *\n * @callback ValidationCallback\n * @param {any} after - The new value of the column after editing.\n * @param {any} before - The previous value of the column before editing.\n * @param {GristRecord} record - The record being edited.\n * @param {ColumnConfig} column - The configuration of the column being edited.\n * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.\n */\nexport type ValidationCallback = (\n  after: any,\n  before: any,\n  record: GristRecord,\n  column: ColumnConfig\n) => boolean | Promise<boolean>\n\n/**\n * Configuration options for column labels.\n *\n * The label for a column can be customized using various options.\n *\n * @typedef {string|boolean|Object} LabelConfig\n * @property {LabelRenderer} [renderer] - A custom renderer function for the column label.\n *\n * @example\n * // Using a string as a label:\n * const label: LabelConfig = \"Column Label\"; // Sets the label as \"Column Label\".\n *\n * // Using a boolean to determine label visibility:\n * const label: LabelConfig = true; // Shows the default label based on the header configuration.\n *\n * // Using a custom renderer function for the label:\n * const label: LabelConfig = {\n *   renderer: customLabelRenderer, // Specifies a custom renderer function.\n * };\n */\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\n/**\n * Custom label renderer function for generating column labels.\n *\n * @callback LabelRenderer\n * @param {ColumnConfig} column - The column configuration object for which the label is being generated.\n * @returns {void}\n */\nexport type LabelRenderer = (column: ColumnConfig) => void\n\n/**\n * Custom callback function for calculating column width.\n *\n * @callback ColumnWidthCallback\n * @param {ColumnConfig} column - The column configuration object for which the width is being calculated.\n * @returns {string} - The calculated width as a string (e.g., '100', '50%').\n */\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\n/**\n * Configuration for defining the header of a column.\n *\n * @typedef {Object} HeaderConfig\n * @property {HeaderRenderer} renderer - The function used to render the column header.\n * @property {string} [style] - Optional CSS style for the column header.\n * @property {string} [group] - Optional group identifier for the column header.\n * @property {string} [groupStyle] - Optional CSS style for the header group.\n */\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  style?: string\n  group?: string\n  groupStyle?: string\n}\n\n/**\n * Function type for rendering column headers.\n *\n * @callback HeaderRenderer\n * @param {ColumnConfig} column - The column configuration object.\n * @returns {*} - The rendered header content.\n */\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\n/**\n * Configuration for specifying default values for fields in a record.\n * Default values can be set using predefined value generator functions or custom user-defined functions.\n * This configuration allows you to define the default value generation method and any additional parameters.\n *\n * @typedef {Object|Function} DefaultValueFnConfig\n * @property {string} [name] - The name of the default value function to be used for the column.\n * @property {any[]} [params] - The parameters to be passed to the default value function.\n * @property {Function} [Function] - A custom user-defined function for generating default values.\n */\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\n/**\n * Configuration for defining fields within a record.\n * Each field can have various settings such as rendering, editing, alignment, etc.\n * The 'defaultValue' property is used to specify the default value generation method and parameters.\n *\n * @typedef {Object} RecordConfig\n * @property {FieldRenderer} renderer - The rendering function for the field.\n * @property {FieldEditor|undefined} [editor] - The editing function for the field (optional).\n * @property {boolean|Function} [editable] - Specifies if the field is editable. It can be a boolean or a function (optional).\n * @property {boolean} [mandatory] - Specifies if the field is mandatory (optional).\n * @property {GristClassifier} classifier - A classifier function for the field.\n * @property {'left'|'right'|'center'} [align] - The alignment of the field's content (optional).\n * @property {*} options - Additional options for the field.\n * @property {string|undefined} [rowOptionField] - The name of a field for row-level options associated with this field (optional).\n * @property {DefaultValueFnConfig|undefined} [defaultValue] - Configuration for specifying the default value for the field.\n *                                                             It can be a predefined value generator function or a custom user-defined function (optional).\n * @property {Object.<string, *>|undefined} [extended] - Additional extended properties that can be added as needed for specific field configurations (optional).\n * @property {boolean} [wide] - Specifies if the field should occupy a larger width within the viewer or editor.\n *                              When set to `true`, the field will attempt to span across multiple columns or occupy more space horizontally.\n */\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  disabled?: boolean | Function\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  wide?: boolean\n  [extended: string]: any\n}\n\n/**\n * A function type used for rendering the content of a field in various components.\n *\n * @callback FieldRenderer\n * @param {*} value - The value of the field to be rendered.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField|RecordCard|DataCardGutter|DataCardField|DataListGutter|DataListField|RecordPartial|DataReportField|Element} owner - The component or element that owns the field.\n * @returns {OxGristRenderer|TemplateResult|string|void} - The rendered content, which can be of different types depending on the implementation.\n */\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\n\n/**\n * A function type used for defining a custom editor for a field in a data grid.\n *\n * @callback FieldEditor\n * @param {*} value - The current value of the field.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField} field - The data grid field that owns the editor.\n * @returns {OxGristEditor} - The custom editor component.\n */\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\n/**\n * A function type used for rendering the filter select options in a filter form.\n *\n * @callback FilterSelectRenderer\n * @param {ColumnConfig} column - The configuration of the column for which the filter is being rendered.\n * @param {(string|number|boolean|string[]|number[]|any|undefined)} value - The current value of the filter.\n * @param {Element} owner - The DOM element that owns the filter select renderer.\n * @returns {(TemplateResult|string|void)} - The rendered filter select options as a Lit HTML template result, a string, or nothing.\n */\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\n/**\n * An object representing a set of event handler functions for various events in Grist.\n *\n * @typedef {Object} GristEventHandlerSet\n * @property {GristEventHandler} [click] - The click event handler function.\n * @property {GristEventHandler} [dblclick] - The double-click event handler function.\n * @property {GristEventHandler} [focus] - The focus event handler function.\n * @property {GristEventHandler} [contextmenu] - The context menu event handler function.\n */\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n  contextmenu?: GristEventHandler\n}\n\n/**\n * Configuration options for defining how records are displayed in list mode in a Grist.\n *\n * @typedef {Object} ListConfig\n * @property {string} [thumbnail] - The name of the field to use as a thumbnail image for records in list mode.\n * @property {string[]} fields - An array of field names to display in the list mode.\n * @property {string[]} details - An array of field names to display as additional details in the list mode.\n */\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\n/**\n * Configuration options for managing tree-like structures in a Grist table.\n *\n * @typedef {Object} TreeConfig\n * @property {string} [childrenProperty] - The property name that specifies the children of a record.\n * @property {boolean | Function} [expanded] - Specifies whether tree nodes are initially expanded or a function to determine the initial expansion state for a given record.\n */\nexport type TreeConfig = {\n  childrenProperty?: string\n  expanded?: boolean | ((x: GristRecord) => boolean)\n}\n\n/**\n * Configuration options for importing and exporting column data.\n *\n * @typedef {Object} ImexConfig\n * @property {string} header - The header text for the column in import/export settings.\n * @property {string} key - The key or identifier for the column in import/export settings.\n * @property {number} width - The width of the column in import/export settings.\n * @property {string} type - The data type of the column in import/export settings.\n */\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\n/**\n * Configuration options for defining rows within a Grist table or view.\n *\n * @typedef {Object} RowsConfig\n * @property {boolean} [accumulator] - Specifies whether an accumulator row should be displayed.\n * @property {boolean} appendable - Indicates whether new rows can be appended to the table.\n * @property {boolean} insertable - Indicates whether new rows can be inserted into the table.\n * @property {RowSelectableConfig} [selectable] - Configuration for row selection options.\n * @property {GroupConfig[]} groups - An array of group configuration options.\n * @property {string[]} totals - An array of field names for which totals should be calculated and displayed.\n * @property {GristClassifier} classifier - A function that classifies rows based on their attributes.\n * @property {GristEventHandlerSet} handlers - An object containing event handler functions for various row-level events.\n */\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  editable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\n/**\n * A function used to classify and style individual records in a Grist table.\n *\n * @typedef {Function} GristClassifier\n *\n * @param {GristRecord} record - The record to be classified.\n * @param {number} rowIndex - The index of the row in the table.\n *\n * @returns {Object|void} An object containing classification properties or `void`.\n * - `emphasized` (optional): A boolean, string, or array of strings indicating the emphasis style.\n * - Additional properties can be added as needed for custom styling.\n */\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\n/**\n * Configuration options for defining group headers in a Grist table.\n *\n * @typedef {Object} GroupConfig\n *\n * @property {string} align - The alignment of the group header ('left', 'center', or 'right').\n * @property {ColumnConfig} [titleColumn] - The column configuration used as the title of the group (optional).\n * @property {string} title - The title of the group.\n * @property {string} [value] - A value associated with the group (optional).\n * @property {string} [groupName] - The name of the group (optional).\n * @property {number} [row] - The row index where the group header should appear (optional).\n * @property {string|number} column - The column name or index where the group header should appear.\n * @property {number} rowspan - The number of rows the group header should span.\n * @property {number} [colspan] - The number of columns the group header should span (optional).\n */\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\n/**\n * Configuration options for specifying row selectability in a Grist table.\n *\n * @typedef {Object} RowSelectableConfig\n *\n * @property {boolean} [multiple] - Indicates whether multiple rows can be selected (optional).\n */\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\n/**\n * Represents a data record in Grist.\n *\n * @typedef {Object} GristRecord\n * @property {string} [id] - The unique identifier for the record.\n * @property {string} [name] - The name or label associated with the record.\n * @property {GristRecord[]} [children] - An array of child records, if applicable.\n * @property {number} [__seq__] - A numeric sequence identifier for the record.\n * @property {string} [__dirty__] - Indicates if the record is dirty (changed).\n * @property {boolean} [__selected__] - Indicates if the record is selected.\n * @property {object[]} [__changes__] - An array of changes made to the record.\n * @property {object} [__dirtyfields__] - An object representing dirty (changed) fields in the record.\n * @property {any} [__origin__] - The original data or source of the record.\n * @property {boolean} [__collapsed__] - Indicates if the record is collapsed (e.g., in a tree view).\n * @property {number} [__depth__] - The depth or level of the record in a hierarchical structure.\n * @property {'checked' | 'half-checked' | 'unchecked'} [__check_in_tree__] - Indicates the check state of the record in a tree view.\n * @property {GristRecord[]} [__children__] - An array of child records in a tree view.\n * @property {any} [key] - Additional custom properties specific to the record.\n */\nexport type GristRecord = {\n  id?: string\n  name?: string\n  children?: GristRecord[]\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  __collapsed__?: boolean\n  __depth__?: number\n  __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'\n  __children__?: GristRecord[]\n  [key: string]: any\n}\n\n/**\n * Represents a set of data retrieved from a Grist table.\n *\n * @typedef {Object} GristData\n *\n * @property {number} [page] - The page number of the retrieved data (optional).\n * @property {number} [total] - The total number of records in the data source (optional).\n * @property {number} [limit] - The maximum number of records per page (optional).\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\n/**\n * A function that determines whether a Grist record should be selected or not.\n *\n * @callback GristSelectFunction\n * @param {GristRecord} record - The Grist record to evaluate.\n * @returns {boolean} - `true` if the record should be selected, `false` otherwise.\n */\nexport type GristSelectFunction = (record: GristRecord) => boolean\n\n/**\n * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.\n *\n * @typedef {Object} PersonalGristPreference\n * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.\n *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.\n * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.\n *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.\n */\nexport type PersonalGristPreference = {\n  columns?: Partial<ColumnConfig>[]\n  filters?: FilterPreference[]\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  mode?: 'GRID' | 'LIST' | 'CARD'\n  [key: string]: any\n}\n\nexport type FilterPreference = {\n  name: string\n  hidden?: boolean\n  value?: any\n}\n\nexport enum ValidationReason {\n  MANDATORY = 'MANDATORY',\n  FORMAT = 'FORMAT',\n  RANGE = 'RANGE',\n  UNIQUE = 'UNIQUE'\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AA6LA;;;;;;;;GAQG;AACH,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAknBD,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;IACf,qCAAiB,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field.js'\nimport { DataCardGutter } from './data-card/data-card-gutter.js'\nimport { RecordCard } from './data-card/record-card.js'\nimport { DataGridField } from './data-grid/data-grid-field.js'\nimport { DataListField } from './data-list/data-list-field.js'\nimport { DataListGutter } from './data-list/data-list-gutter.js'\nimport { RecordPartial } from './data-list/record-partial.js'\nimport { DataReportField } from './data-report/data-report-field.js'\nimport { OxGristEditor } from './editors/index.js'\nimport { QueryFilter, OxFiltersForm } from './filters/index.js'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer.js'\n\n/**\n * Configuration object for defining the structure and behavior of a Grist table.\n *\n * @typedef {Object} GristConfig\n * @property {ColumnConfig[]} columns - An array of column configurations.\n * @property {RowsConfig} rows - Configuration for rows and their behavior.\n * @property {ListConfig} list - Configuration for the list view.\n * @property {TreeConfig} tree - Configuration for tree-related settings.\n * @property {PaginationConfig} [pagination] - Configuration for pagination settings (optional).\n * @property {SortersConfig} [sorters] - Configuration for sorting settings (optional).\n * @property {FiltersConfig} [filters] - Configuration for filtering settings (optional).\n */\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  tree: TreeConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n  /**\n   * 아직 아무것도 없을 때 화면이 하는 말.\n   *\n   * 전에는 「NO RECORDS」가 컴포넌트에 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —\n   * **비어 있는 화면이야말로** 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는 자리이고,\n   * 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.\n   *\n   * 정하지 않으면 예전 문장이 그대로 나온다.\n   */\n  emptyNote?: { title?: string; description?: string; icon?: string }\n}\n\n/**\n * Configuration object for specifying sorting options.\n *\n * @typedef {Object} SorterConfig\n * @property {string} name - The name of the sorting option.\n * @property {boolean} [desc] - Optional. Indicates whether the sorting is in descending order (optional).\n */\nexport type SorterConfig = { name: string; desc?: boolean }\n\n/**\n * Configuration array for specifying multiple sorting options.\n *\n * @typedef {SorterConfig[]} SortersConfig\n */\nexport type SortersConfig = SorterConfig[]\n\n/**\n * Enumeration of filter operators used to define filter conditions.\n *\n * @typedef {'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' |\n * 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' |\n * 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike'} FilterOperator\n */\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type SelectOptionObject =\n  | {\n      name: string\n      display?: never\n      value: string\n    }\n  | {\n      display: string\n      name?: never\n      value: string\n    }\n\nexport type SelectOption = SelectOptionObject | string\n\nexport type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean\n\n/**\n * Configuration object for specifying filter conditions.\n *\n * @typedef {Object} FilterConfigObject\n * @property {string} type - The type of the filter condition.\n * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).\n * @property {Object} [options] - Additional options or parameters for the filter condition (optional).\n * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).\n * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).\n * @property {string} [label] - The label to display for the filter condition (optional).\n */\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n  boundTo?: string[]\n  hidden?: boolean\n  onchange?: FilterChangedCallback\n}\n\n/**\n * Configuration option for specifying filter conditions.\n *\n * The `FilterConfig` type can take one of the following forms:\n * - A `FilterConfigObject` representing a specific filter condition.\n * - A `FilterOperator` representing a predefined filter operator.\n * - A boolean value to enable or disable filtering for a specific column.\n *\n * @typedef {Object|FilterOperator|boolean} FilterConfig\n */\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\n/**\n * Represents a filter condition with the following properties:\n *\n * - `name`: The name of the column or field being filtered.\n * - `operator`: The filter operator used for comparison.\n * - `value`: The value or values to compare against.\n *\n * @typedef {Object} FilterValue\n * @property {string} name - The name of the column or field.\n * @property {FilterOperator} operator - The filter operator.\n * @property {string|number|boolean|string[]|number[]|undefined} value - The value(s) to compare.\n */\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n *\n * @typedef {Object} FiltersConfig\n * @property {boolean} [header] - Specifies whether to provide filtering functionality in the header.\n */\nexport type FiltersConfig = {\n  header?: boolean\n}\n\n/**\n * Configuration options for pagination.\n *\n * @typedef {Object} PaginationConfig\n * @property {number} [page] - The current page number.\n * @property {number} [limit] - The maximum number of records to display per page.\n * @property {number[]} [pages] - An array of available page numbers.\n * @property {boolean} [infinite] - Specifies whether to use infinite scrolling for pagination.\n */\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\n/**\n * Option to specify the inheritance behavior for including data from parent domains.\n *\n * - 'None': Do not include data from the parent domain.\n * - 'Include': Include data from the parent domain along with current domain data.\n * - 'Only': Include data only from the parent domain, excluding current domain data.\n *\n * @enum {string}\n */\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\n/**\n * Configuration options for fetching data from a data source.\n *\n * @typedef {Object} FetchOption\n * @property {number} [page] - The page number to retrieve.\n * @property {number} [limit] - The maximum number of records to retrieve per page.\n * @property {SortersConfig} [sorters] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {SortersConfig} [sortings] - An array of sorting configurations for data. Only one of these options needs to be set.\n * @property {QueryFilter[]} [filters] - An array of filtering criteria.\n * @property {InheritedValueType} [inherited] - Specifies the inheritance behavior for including data from parent domains.\n * @property {object} [options] - Additional options for customizing data fetching behavior.\n */\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\n\n/**\n * Represents the result of a data fetching operation.\n *\n * @typedef {Object} FetchResult\n * @property {number} [page] - The page number of the fetched data.\n * @property {number} [limit] - The maximum number of records per page.\n * @property {number} total - The total number of records in the data source.\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\n\n/**\n * A function that handles data fetching operations.\n *\n * @param param - The fetch options specifying how data should be retrieved.\n * @returns A promise that resolves to a `FetchResult`.\n */\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\n/**\n * Represents a Grist event handler function.\n *\n * @typedef {Function} GristEventHandler\n * @param {ColumnConfig[]} columns - An array of column configurations.\n * @param {GristData} [data] - The Grist data associated with the event.\n * @param {ColumnConfig} [column] - The column configuration related to the event (if applicable).\n * @param {GristRecord} [record] - The Grist record related to the event (if applicable).\n * @param {number} [rowIndex] - The index of the row related to the event (if applicable).\n * @param {any} [target] - The target element or object related to the event (if applicable).\n * @param {Event} [e] - The event object (if applicable).\n * @returns {void}\n */\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any,\n  e?: Event\n) => void\n\n/**\n * Represents an accumulator function for data aggregation and accumulation.\n *\n * @typedef {string|'sum'|'avg'|'count'|'min'|'max'|Function} AccumulatorFunc\n * @param {GristData} data - The Grist data for aggregation.\n * @param {ColumnConfig} column - The column configuration for aggregation.\n * @returns {string|number} - The aggregated result.\n */\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\n/**\n * Type representing an accumulator function or configuration object.\n *\n * An accumulator is used for data aggregation and accumulation purposes. It can be either\n * a predefined accumulator function (e.g., 'sum', 'avg', 'count', etc.) or a configuration\n * object specifying the type of accumulator and labeling options.\n *\n * @typedef {AccumulatorFunc|{type: AccumulatorFunc, tag?: boolean}} AccumulatorObject\n * @property {AccumulatorFunc} [type] - The type of accumulator function or predefined function name.\n * @property {boolean} [tag] - An option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n *\n * @example\n * // Using a predefined accumulator function:\n * const accumulator: AccumulatorObject = 'sum'; // Represents a 'sum' accumulator.\n *\n * // Using an accumulator configuration object:\n * const accumulatorConfig: AccumulatorObject = {\n *   type: 'avg', // Specifies the type of accumulator ('avg' for average).\n *   tag: true,   // Option for adding a label to represent the result of an aggregation function. This label is added in front of the aggregated value.\n * };\n */\nexport type AccumulatorObject =\n  | AccumulatorFunc\n  | {\n      type: AccumulatorFunc\n      tag?: boolean\n    }\n\n/**\n * Type representing column configuration information.\n *\n * @typedef {object} ColumnConfig\n * @property {string} type - Represents the data type of the column (e.g., 'text', 'number', 'date', 'gutter', etc.).\n * @property {string} name - Represents the name of the column.\n * @property {('button'|'sequence'|'row-selector'|'dirty')} [gutterName] - If the column type is 'gutter', specifies the name of one of the registered gutters (only set when the type is 'gutter').\n * @property {boolean} [fixed] - In case of a grid type column, specifies whether the column's position should be fixed and unaffected by horizontal scrolling (optional).\n * @property {HeaderConfig} header - Object representing the header configuration of the column.\n * @property {RecordConfig} record - Object representing the record configuration of the column.\n * @property {GristEventHandlerSet} handlers - Object representing the Grist event handler settings.\n * @property {LabelConfig} label - Object representing the label configuration of the column. This property is used to represent the label of the column's information in list mode, card mode, and when displaying the column in a filter form (ox-filters-form).\n * @property {boolean} [hidden] - Indicates whether the column is hidden or not (optional).\n * @property {boolean} [sortable] - Indicates whether the column is sortable or not (optional). If this setting is true, the header provides the ability to toggle the sorting direction.\n * @property {boolean} [resizable] - Indicates whether the column is resizable or not (optional). This setting determines whether the column's width can be adjusted.\n * @property {(number|string|ColumnWidthCallback)} [width] - Represents the width of the column (e.g., 100, '50%', or a callback function to calculate width).\n * @property {boolean} [forList] - Indicates whether the column is intended for display in list mode (optional, applicable only to gutter type columns).\n * @property {boolean} [forCard] - Indicates whether the column is intended for display in card mode (optional, applicable only to gutter type columns).\n * @property {ValidationCallback} [validation] - Callback function for column validation (optional). This function validates whether the value of the column is valid when edited.\n * @property {AccumulatorObject} [accumulator] - Object used for accumulating values of the column (optional, applicable only in grid mode). It specifies a function to automatically aggregate the values of the column for all records. The aggregated result is displayed in a row below the last record (accumulation record).\n * @property {FilterConfig} [filter] - Object representing the filter configuration of the column.\n * @property {(ImexConfig|boolean)} [imex] - Object or boolean value representing the configuration for importing and exporting column data.\n * @property {boolean} [multiple] - Indicates whether the column allows multiple selections or not (optional).\n * @property {boolean} [rowCount] - Indicates whether the column shows the row count or not (optional).\n */\nexport type ColumnConfig = {\n  type: string\n  name: string\n  /**\n   * \"gutter\" 타입의 컬럼인 경우, 등록된 gutter들 중의 하나의 이름을 명시합니다(type이 gutter인 경우에만 설정합니다).\n   * (e.g., 'button', 'sequence', 'row-selector', 'dirty', etc)\n   *\n   * \"Gutter\" 는 테이블에서 각 행의 왼쪽이나 오른쪽에 놓이는 추가 열(column)을 뜻합니다.\n   * 이 열은 주로 각 행(row)을 식별하거나 특정 작업을 수행하기 위한 버튼 또는 링크와 같은 요소를 표시하는 데 사용됩니다.\n   * Gutter 열은 주로 데이터 행에 대한 조작 또는 행의 상태를 나타내는 데 사용됩니다.\n   * 예를 들어, 테이블에서 각 행이 특정 작업을 수행하는 버튼을 포함할 때, 이러한 버튼이 Gutter 열에 배치될 수 있습니다.\n   * 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.\n   */\n  gutterName?: 'button' | 'sequence' | 'row-selector' | 'dirty'\n  title?: string\n  fixed?: boolean\n  /** [begin] only for button gutter column */\n  icon?: string\n  iconOnly?: boolean\n  danger?: boolean\n  /** [end] only for button gutter column */\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  forCard?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorObject\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n  /** 특정 도구에 의해서 사용되는 옵션으로, 일반적인 용도로 사용되지 않음을 표현할 수 있다. */\n  unusable?: boolean\n  multiline?: boolean // 멀티라인 여부\n}\n\n/**\n * Callback function type for column validation.\n *\n * This function is used to validate whether the value of a column is valid when edited.\n *\n * @callback ValidationCallback\n * @param {any} after - The new value of the column after editing.\n * @param {any} before - The previous value of the column before editing.\n * @param {GristRecord} record - The record being edited.\n * @param {ColumnConfig} column - The configuration of the column being edited.\n * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.\n */\nexport type ValidationCallback = (\n  after: any,\n  before: any,\n  record: GristRecord,\n  column: ColumnConfig\n) => boolean | Promise<boolean>\n\n/**\n * Configuration options for column labels.\n *\n * The label for a column can be customized using various options.\n *\n * @typedef {string|boolean|Object} LabelConfig\n * @property {LabelRenderer} [renderer] - A custom renderer function for the column label.\n *\n * @example\n * // Using a string as a label:\n * const label: LabelConfig = \"Column Label\"; // Sets the label as \"Column Label\".\n *\n * // Using a boolean to determine label visibility:\n * const label: LabelConfig = true; // Shows the default label based on the header configuration.\n *\n * // Using a custom renderer function for the label:\n * const label: LabelConfig = {\n *   renderer: customLabelRenderer, // Specifies a custom renderer function.\n * };\n */\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n      /** HeaderConfig.text 와 같은 뜻 — 그린 결과가 아니라 이름 그 자체. */\n      text?: string\n    }\n\n/**\n * Custom label renderer function for generating column labels.\n *\n * @callback LabelRenderer\n * @param {ColumnConfig} column - The column configuration object for which the label is being generated.\n * @returns {void}\n */\nexport type LabelRenderer = (column: ColumnConfig) => void\n\n/**\n * Custom callback function for calculating column width.\n *\n * @callback ColumnWidthCallback\n * @param {ColumnConfig} column - The column configuration object for which the width is being calculated.\n * @returns {string} - The calculated width as a string (e.g., '100', '50%').\n */\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\n/**\n * Configuration for defining the header of a column.\n *\n * @typedef {Object} HeaderConfig\n * @property {HeaderRenderer} renderer - The function used to render the column header.\n * @property {string} [style] - Optional CSS style for the column header.\n * @property {string} [group] - Optional group identifier for the column header.\n * @property {string} [groupStyle] - Optional CSS style for the header group.\n */\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  /**\n   * column 의 이름을 **글자 그대로** 담는다.\n   *\n   * renderer 는 화면에 그릴 것을 돌려주는 함수라 lit template 일 수도 있고 아이콘일 수도 있다.\n   * 그린 결과에서 이름을 되꺼낼 방법이 없으므로, 설정에 문자열로 들어온 이름은 여기에 남긴다.\n   * 화면 밖에서 이름이 필요한 곳(스크린 리더가 읽을 이름 · filter 입력칸의 이름)이 이것을 쓴다.\n   */\n  text?: string\n  style?: string\n  group?: string\n  groupStyle?: string\n}\n\n/**\n * Function type for rendering column headers.\n *\n * @callback HeaderRenderer\n * @param {ColumnConfig} column - The column configuration object.\n * @returns {*} - The rendered header content.\n */\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\n/**\n * Configuration for specifying default values for fields in a record.\n * Default values can be set using predefined value generator functions or custom user-defined functions.\n * This configuration allows you to define the default value generation method and any additional parameters.\n *\n * @typedef {Object|Function} DefaultValueFnConfig\n * @property {string} [name] - The name of the default value function to be used for the column.\n * @property {any[]} [params] - The parameters to be passed to the default value function.\n * @property {Function} [Function] - A custom user-defined function for generating default values.\n */\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\n/**\n * Configuration for defining fields within a record.\n * Each field can have various settings such as rendering, editing, alignment, etc.\n * The 'defaultValue' property is used to specify the default value generation method and parameters.\n *\n * @typedef {Object} RecordConfig\n * @property {FieldRenderer} renderer - The rendering function for the field.\n * @property {FieldEditor|undefined} [editor] - The editing function for the field (optional).\n * @property {boolean|Function} [editable] - Specifies if the field is editable. It can be a boolean or a function (optional).\n * @property {boolean} [mandatory] - Specifies if the field is mandatory (optional).\n * @property {GristClassifier} classifier - A classifier function for the field.\n * @property {'left'|'right'|'center'} [align] - The alignment of the field's content (optional).\n * @property {*} options - Additional options for the field.\n * @property {string|undefined} [rowOptionField] - The name of a field for row-level options associated with this field (optional).\n * @property {DefaultValueFnConfig|undefined} [defaultValue] - Configuration for specifying the default value for the field.\n *                                                             It can be a predefined value generator function or a custom user-defined function (optional).\n * @property {Object.<string, *>|undefined} [extended] - Additional extended properties that can be added as needed for specific field configurations (optional).\n * @property {boolean} [wide] - Specifies if the field should occupy a larger width within the viewer or editor.\n *                              When set to `true`, the field will attempt to span across multiple columns or occupy more space horizontally.\n */\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  disabled?: boolean | Function\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  wide?: boolean\n  [extended: string]: any\n}\n\n/**\n * A function type used for rendering the content of a field in various components.\n *\n * @callback FieldRenderer\n * @param {*} value - The value of the field to be rendered.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField|RecordCard|DataCardGutter|DataCardField|DataListGutter|DataListField|RecordPartial|DataReportField|Element} owner - The component or element that owns the field.\n * @returns {OxGristRenderer|TemplateResult|string|void} - The rendered content, which can be of different types depending on the implementation.\n */\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\n\n/**\n * A function type used for defining a custom editor for a field in a data grid.\n *\n * @callback FieldEditor\n * @param {*} value - The current value of the field.\n * @param {ColumnConfig} column - The configuration of the column to which the field belongs.\n * @param {GristRecord} record - The record object containing the field's data.\n * @param {number} rowIndex - The index of the row to which the field belongs.\n * @param {DataGridField} field - The data grid field that owns the editor.\n * @returns {OxGristEditor} - The custom editor component.\n */\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\n/**\n * A function type used for rendering the filter select options in a filter form.\n *\n * @callback FilterSelectRenderer\n * @param {ColumnConfig} column - The configuration of the column for which the filter is being rendered.\n * @param {(string|number|boolean|string[]|number[]|any|undefined)} value - The current value of the filter.\n * @param {Element} owner - The DOM element that owns the filter select renderer.\n * @returns {(TemplateResult|string|void)} - The rendered filter select options as a Lit HTML template result, a string, or nothing.\n */\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\n/**\n * An object representing a set of event handler functions for various events in Grist.\n *\n * @typedef {Object} GristEventHandlerSet\n * @property {GristEventHandler} [click] - The click event handler function.\n * @property {GristEventHandler} [dblclick] - The double-click event handler function.\n * @property {GristEventHandler} [focus] - The focus event handler function.\n * @property {GristEventHandler} [contextmenu] - The context menu event handler function.\n */\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n  contextmenu?: GristEventHandler\n}\n\n/**\n * Configuration options for defining how records are displayed in list mode in a Grist.\n *\n * @typedef {Object} ListConfig\n * @property {string} [thumbnail] - The name of the field to use as a thumbnail image for records in list mode.\n * @property {string[]} fields - An array of field names to display in the list mode.\n * @property {string[]} details - An array of field names to display as additional details in the list mode.\n */\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\n/**\n * Configuration options for managing tree-like structures in a Grist table.\n *\n * @typedef {Object} TreeConfig\n * @property {string} [childrenProperty] - The property name that specifies the children of a record.\n * @property {boolean | Function} [expanded] - Specifies whether tree nodes are initially expanded or a function to determine the initial expansion state for a given record.\n */\nexport type TreeConfig = {\n  childrenProperty?: string\n  expanded?: boolean | ((x: GristRecord) => boolean)\n}\n\n/**\n * Configuration options for importing and exporting column data.\n *\n * @typedef {Object} ImexConfig\n * @property {string} header - The header text for the column in import/export settings.\n * @property {string} key - The key or identifier for the column in import/export settings.\n * @property {number} width - The width of the column in import/export settings.\n * @property {string} type - The data type of the column in import/export settings.\n */\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\n/**\n * Configuration options for defining rows within a Grist table or view.\n *\n * @typedef {Object} RowsConfig\n * @property {boolean} [accumulator] - Specifies whether an accumulator row should be displayed.\n * @property {boolean} appendable - Indicates whether new rows can be appended to the table.\n * @property {boolean} insertable - Indicates whether new rows can be inserted into the table.\n * @property {RowSelectableConfig} [selectable] - Configuration for row selection options.\n * @property {GroupConfig[]} groups - An array of group configuration options.\n * @property {string[]} totals - An array of field names for which totals should be calculated and displayed.\n * @property {GristClassifier} classifier - A function that classifies rows based on their attributes.\n * @property {GristEventHandlerSet} handlers - An object containing event handler functions for various row-level events.\n */\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  editable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\n/**\n * A function used to classify and style individual records in a Grist table.\n *\n * @typedef {Function} GristClassifier\n *\n * @param {GristRecord} record - The record to be classified.\n * @param {number} rowIndex - The index of the row in the table.\n *\n * @returns {Object|void} An object containing classification properties or `void`.\n * - `emphasized` (optional): A boolean, string, or array of strings indicating the emphasis style.\n * - Additional properties can be added as needed for custom styling.\n */\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\n/**\n * Configuration options for defining group headers in a Grist table.\n *\n * @typedef {Object} GroupConfig\n *\n * @property {string} align - The alignment of the group header ('left', 'center', or 'right').\n * @property {ColumnConfig} [titleColumn] - The column configuration used as the title of the group (optional).\n * @property {string} title - The title of the group.\n * @property {string} [value] - A value associated with the group (optional).\n * @property {string} [groupName] - The name of the group (optional).\n * @property {number} [row] - The row index where the group header should appear (optional).\n * @property {string|number} column - The column name or index where the group header should appear.\n * @property {number} rowspan - The number of rows the group header should span.\n * @property {number} [colspan] - The number of columns the group header should span (optional).\n */\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\n/**\n * Configuration options for specifying row selectability in a Grist table.\n *\n * @typedef {Object} RowSelectableConfig\n *\n * @property {boolean} [multiple] - Indicates whether multiple rows can be selected (optional).\n */\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\n/**\n * Represents a data record in Grist.\n *\n * @typedef {Object} GristRecord\n * @property {string} [id] - The unique identifier for the record.\n * @property {string} [name] - The name or label associated with the record.\n * @property {GristRecord[]} [children] - An array of child records, if applicable.\n * @property {number} [__seq__] - A numeric sequence identifier for the record.\n * @property {string} [__dirty__] - Indicates if the record is dirty (changed).\n * @property {boolean} [__selected__] - Indicates if the record is selected.\n * @property {object[]} [__changes__] - An array of changes made to the record.\n * @property {object} [__dirtyfields__] - An object representing dirty (changed) fields in the record.\n * @property {any} [__origin__] - The original data or source of the record.\n * @property {boolean} [__collapsed__] - Indicates if the record is collapsed (e.g., in a tree view).\n * @property {number} [__depth__] - The depth or level of the record in a hierarchical structure.\n * @property {'checked' | 'half-checked' | 'unchecked'} [__check_in_tree__] - Indicates the check state of the record in a tree view.\n * @property {GristRecord[]} [__children__] - An array of child records in a tree view.\n * @property {any} [key] - Additional custom properties specific to the record.\n */\nexport type GristRecord = {\n  id?: string\n  name?: string\n  children?: GristRecord[]\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  __collapsed__?: boolean\n  __depth__?: number\n  __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'\n  __children__?: GristRecord[]\n  [key: string]: any\n}\n\n/**\n * Represents a set of data retrieved from a Grist table.\n *\n * @typedef {Object} GristData\n *\n * @property {number} [page] - The page number of the retrieved data (optional).\n * @property {number} [total] - The total number of records in the data source (optional).\n * @property {number} [limit] - The maximum number of records per page (optional).\n * @property {GristRecord[]} records - An array of fetched data records.\n */\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\n/**\n * A function that determines whether a Grist record should be selected or not.\n *\n * @callback GristSelectFunction\n * @param {GristRecord} record - The Grist record to evaluate.\n * @returns {boolean} - `true` if the record should be selected, `false` otherwise.\n */\nexport type GristSelectFunction = (record: GristRecord) => boolean\n\n/**\n * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.\n *\n * @typedef {Object} PersonalGristPreference\n * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.\n *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.\n * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.\n *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.\n */\nexport type PersonalGristPreference = {\n  columns?: Partial<ColumnConfig>[]\n  filters?: FilterPreference[]\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  mode?: 'GRID' | 'LIST' | 'CARD'\n  [key: string]: any\n}\n\nexport type FilterPreference = {\n  name: string\n  hidden?: boolean\n  value?: any\n}\n\nexport enum ValidationReason {\n  MANDATORY = 'MANDATORY',\n  FORMAT = 'FORMAT',\n  RANGE = 'RANGE',\n  UNIQUE = 'UNIQUE'\n}\n"]}

package/dist/src/utils/column-text.d.ts

@@ -0,0 +1,18 @@
+import { ColumnConfig } from '../types.js';
+/**
+ * column 의 이름을 **글자로** 돌려준다.
+ *
+ * header renderer 는 화면에 그릴 것을 만드는 함수다 — 돌려주는 값이 lit template 이라 거기서 이름을
+ * 되꺼낼 수 없다. 그런데 화면 밖에서 이름이 필요한 자리가 있다.
+ *
+ *   스크린 리더    칸에 들어간 입력칸이 무엇을 입력하는 칸인지 말해야 한다
+ *   filter 입력칸  머리줄의 입력칸은 그 column 을 좁히는 것인데, 이름 없이 상자만 있었다
+ *   IME buffer     지금 어느 칸을 두드리고 있는지
+ *
+ * 이 함수가 이름의 **유일한 출처**다. 부르는 쪽이 각자 이름을 다시 적지 않는다 — 그러면 header 를
+ * 고쳤을 때 나머지가 옛 이름으로 남는다.
+ *
+ * 찾는 순서는 사람이 화면에서 읽는 순서와 같다: 머리줄 이름 → label → column 이름.
+ * 마지막의 column.name 은 개발자가 붙인 식별자라 뜻이 없을 수 있지만, 이름이 아예 없는 것보다는 낫다.
+ */
+export declare function columnText(column?: Partial<ColumnConfig> | null): string;

package/dist/src/utils/column-text.js

@@ -0,0 +1,37 @@
+/**
+ * column 의 이름을 **글자로** 돌려준다.
+ *
+ * header renderer 는 화면에 그릴 것을 만드는 함수다 — 돌려주는 값이 lit template 이라 거기서 이름을
+ * 되꺼낼 수 없다. 그런데 화면 밖에서 이름이 필요한 자리가 있다.
+ *
+ *   스크린 리더    칸에 들어간 입력칸이 무엇을 입력하는 칸인지 말해야 한다
+ *   filter 입력칸  머리줄의 입력칸은 그 column 을 좁히는 것인데, 이름 없이 상자만 있었다
+ *   IME buffer     지금 어느 칸을 두드리고 있는지
+ *
+ * 이 함수가 이름의 **유일한 출처**다. 부르는 쪽이 각자 이름을 다시 적지 않는다 — 그러면 header 를
+ * 고쳤을 때 나머지가 옛 이름으로 남는다.
+ *
+ * 찾는 순서는 사람이 화면에서 읽는 순서와 같다: 머리줄 이름 → label → column 이름.
+ * 마지막의 column.name 은 개발자가 붙인 식별자라 뜻이 없을 수 있지만, 이름이 아예 없는 것보다는 낫다.
+ */
+export function columnText(column) {
+    if (!column) {
+        return '';
+    }
+    const header = column.header;
+    if (typeof header == 'string') {
+        return header;
+    }
+    if (typeof (header === null || header === void 0 ? void 0 : header.text) == 'string') {
+        return header.text;
+    }
+    const label = column.label;
+    if (typeof label == 'string') {
+        return label;
+    }
+    if (typeof (label === null || label === void 0 ? void 0 : label.text) == 'string') {
+        return label.text;
+    }
+    return column.name || '';
+}
+//# sourceMappingURL=column-text.js.map

package/dist/src/utils/column-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-text.js","sourceRoot":"","sources":["../../../src/utils/column-text.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,UAAU,CAAC,MAAqC;IAC9D,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAa,CAAA;IAEnC,IAAI,OAAO,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC9B,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,IAAI,QAAQ,EAAE,CAAC;QACpC,OAAO,MAAM,CAAC,IAAI,CAAA;IACpB,CAAC;IAED,MAAM,KAAK,GAAG,MAAM,CAAC,KAAY,CAAA;IAEjC,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,IAAI,QAAQ,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,IAAI,CAAA;IACnB,CAAC;IAED,OAAO,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA;AAC1B,CAAC","sourcesContent":["import { ColumnConfig } from '../types.js'\n\n/**\n * column 의 이름을 **글자로** 돌려준다.\n *\n * header renderer 는 화면에 그릴 것을 만드는 함수다 — 돌려주는 값이 lit template 이라 거기서 이름을\n * 되꺼낼 수 없다. 그런데 화면 밖에서 이름이 필요한 자리가 있다.\n *\n *   스크린 리더    칸에 들어간 입력칸이 무엇을 입력하는 칸인지 말해야 한다\n *   filter 입력칸  머리줄의 입력칸은 그 column 을 좁히는 것인데, 이름 없이 상자만 있었다\n *   IME buffer     지금 어느 칸을 두드리고 있는지\n *\n * 이 함수가 이름의 **유일한 출처**다. 부르는 쪽이 각자 이름을 다시 적지 않는다 — 그러면 header 를\n * 고쳤을 때 나머지가 옛 이름으로 남는다.\n *\n * 찾는 순서는 사람이 화면에서 읽는 순서와 같다: 머리줄 이름 → label → column 이름.\n * 마지막의 column.name 은 개발자가 붙인 식별자라 뜻이 없을 수 있지만, 이름이 아예 없는 것보다는 낫다.\n */\nexport function columnText(column?: Partial<ColumnConfig> | null): string {\n  if (!column) {\n    return ''\n  }\n\n  const header = column.header as any\n\n  if (typeof header == 'string') {\n    return header\n  }\n\n  if (typeof header?.text == 'string') {\n    return header.text\n  }\n\n  const label = column.label as any\n\n  if (typeof label == 'string') {\n    return label\n  }\n\n  if (typeof label?.text == 'string') {\n    return label.text\n  }\n\n  return column.name || ''\n}\n"]}

package/dist/src/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './supports-passive.js';
+export * from './column-text.js';
 export * from './list-param.js';

package/dist/src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './supports-passive.js';
+export * from './column-text.js';
 export * from './list-param.js';
 //# sourceMappingURL=index.js.map

package/dist/src/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './supports-passive.js'\nexport * from './list-param.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './supports-passive.js'\nexport * from './column-text.js'\nexport * from './list-param.js'\n"]}

package/dist/test/accessible-name.test.d.ts

@@ -0,0 +1,2 @@
+import '../src/data-grid/data-grid.js';
+import '../src/data-grid/data-grid-body.js';

package/dist/test/accessible-name.test.js

@@ -0,0 +1,324 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/data-grid/data-grid.js';
+import '../src/data-grid/data-grid-body.js';
+import { buildColumn } from '../src/configure/column-builder.js';
+import { columnText } from '../src/utils/column-text.js';
+import { ZERO_CONFIG, ZERO_DATA } from '../src/configure/zero-config.js';
+/**
+ * 입력칸의 이름.
+ *
+ * ## 왜 시험이 필요한가
+ *
+ * 이 grid 안에는 이름 없는 입력칸이 여럿 있었다 — 줄을 고르는 체크박스, 머리줄의 filter 상자,
+ * 그리고 포커스를 담고 있는 IME buffer. 눈으로 보는 사람에게는 **자리**가 뜻을 말해 준다(맨 왼쪽
+ * 좁은 칸이면 줄 선택, 머리줄 이름 바로 아래면 그 column 의 filter). 그런데 자리는 그림일 뿐이고
+ * 관계가 아니라서, 화면을 못 보는 사람에게는 이름 없는 상자들만 남는다.
+ *
+ * ## 무엇을 지키려는가
+ *
+ * 이름의 출처가 하나여야 한다. `header` 를 고쳤을 때 읽히는 이름도 함께 바뀌어야 하고, 그러려면
+ * 부르는 쪽이 이름을 다시 적어 두면 안 된다. `columnText()` 가 그 유일한 출처다.
+ *
+ * `buildColumn` 이 문자열 header 를 `() => header` 함수로 바꿔 버리는 자리가 있었는데, 그 함수가
+ * 돌려주는 것은 lit template 이라 이름을 되꺼낼 수 없다 — 여기서 이름이 사라지고 있었다.
+ */
+describe('column 이름의 출처는 하나다', () => {
+    it('문자열로 준 header 는 함수로 바뀌어도 글자가 남는다', () => {
+        const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호' });
+        expect(columnText(column)).to.equal('파렛트 번호');
+    });
+    it('header.renderer 에 문자열을 준 경우도 같다', () => {
+        const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: '파렛트 번호' } });
+        expect(columnText(column)).to.equal('파렛트 번호');
+    });
+    it('label: true 는 header 의 이름을 물려받는다', () => {
+        const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호', label: true });
+        expect(columnText(column)).to.equal('파렛트 번호');
+    });
+    it('header 를 함수로 그리면 이름을 되꺼낼 수 없다 — 그때는 column 이름으로 물러난다', () => {
+        const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: () => html `<i>x</i>` } });
+        expect(columnText(column)).to.equal('palletId');
+    });
+    it('column 이 없으면 이름을 지어내지 않는다', () => {
+        expect(columnText(undefined)).to.equal('');
+        expect(columnText(null)).to.equal('');
+    });
+});
+describe('줄을 고르는 칸에는 이름이 있다', () => {
+    const columns = [
+        { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+        { type: 'string', name: 'palletId', header: '파렛트 번호' }
+    ].map(buildColumn);
+    it('행마다 놓인 체크박스가 몇 번째 줄인지 말한다', async () => {
+        const body = await fixture(html `
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001' }, { palletId: 'P-0002' }] }}
+      ></ox-grid-body>
+    `);
+        await body.updateComplete;
+        /* 체크박스는 각 칸(ox-grid-field)의 shadow root 안에 그려진다 — 한 겹 더 들어가야 보인다. */
+        const fields = Array.from(body.renderRoot.querySelectorAll('ox-grid-field'));
+        await Promise.all(fields.map(field => field.updateComplete));
+        const boxes = fields.flatMap(field => { var _a; return Array.from(((_a = field.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input[type=checkbox], input[type=radio]')) || []); });
+        expect(boxes.length, '줄을 고르는 칸을 찾지 못했다').to.be.greaterThan(0);
+        boxes.forEach(box => expect(box.getAttribute('aria-label'), '이름 없는 체크박스가 남아 있다').to.be.a('string').and.not.equal(''));
+    });
+});
+describe('포커스를 담고 있는 IME buffer 가 지금 선 칸을 말한다', () => {
+    const columns = [
+        { type: 'string', name: 'palletId', header: '파렛트 번호' },
+        { type: 'string', name: 'location', header: '보관 위치' }
+    ].map(buildColumn);
+    async function bodyFocusedAt(column) {
+        const body = await fixture(html `
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        .focused=${{ row: 0, column }}
+      ></ox-grid-body>
+    `);
+        await body.updateComplete;
+        return body.renderRoot.querySelector('#ime-buffer');
+    }
+    it('첫 칸에 서 있으면 첫 칸의 이름을 읽는다', async () => {
+        expect((await bodyFocusedAt(0)).getAttribute('aria-label')).to.contain('파렛트 번호');
+    });
+    it('옆 칸으로 옮기면 읽히는 이름도 바뀐다 — 안 바뀌면 어디에 선 것인지 알 수 없다', async () => {
+        expect((await bodyFocusedAt(1)).getAttribute('aria-label')).to.contain('보관 위치');
+    });
+    it('보조기술에서 지우지 않는다 — 포커스를 받는 자리다', async () => {
+        expect((await bodyFocusedAt(0)).getAttribute('aria-hidden')).to.be.null;
+    });
+});
+/**
+ * 표를 표라고 선언했나.
+ *
+ * ## 왜 시험이 필요한가
+ *
+ * 이 표는 CSS grid 로 그린다 — 칸이 평평하게 놓여 있고 **줄이라는 요소가 없다.** 보기에는 줄이
+ * 있지만 그것은 같은 높이에 놓였다는 그림일 뿐이다. 그래서 스크린 리더에게 이 화면은 「여기가
+ * 표다」도, 「지금 3행 3열이다」도, 「전체는 40행이다」도 아닌 **입력칸 더미**였다.
+ *
+ * 줄 감싸개를 넣으면서 두 가지가 동시에 깨질 수 있다.
+ *
+ * ```
+ * 뜻이 서나    role=grid / row / columnheader / gridcell 이 제대로 겹쳐 있나
+ * 모양이 사나  display: contents 가 정말로 상자를 안 만드나 — 만들면 표가 한 줄로 무너진다
+ * ```
+ *
+ * 두 번째가 특히 중요하다. `display: contents` 를 잘못 걸면 칸들이 grid 항목이 아니게 되어
+ * 열이 사라진다. 그래서 **자리를 실제로 확인한다** — 한 줄 안의 칸은 왼쪽으로 갈수록 x 가 커지고,
+ * 줄과 줄은 y 가 달라야 한다.
+ */
+describe('표를 표라고 선언한다', () => {
+    /* ox-grid 는 이미 다듬어진 column 을 받는다 — 다듬는 것은 ox-grist 의 일이다. */
+    const columns = [
+        { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+        { type: 'string', name: 'palletId', header: '파렛트 번호', sortable: true },
+        { type: 'string', name: 'location', header: '보관 위치', sortable: true }
+    ].map(buildColumn);
+    async function grid(overrides = {}) {
+        const el = await fixture(html `
+      <ox-grid
+        aria-label="입고 대기 목록"
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{
+            page: 1,
+            limit: 20,
+            total: 40,
+            records: [
+                { palletId: 'P-0001', location: 'A-01' },
+                { palletId: 'P-0002', location: 'A-02' }
+            ],
+            ...overrides
+        }}
+      ></ox-grid>
+    `);
+        await el.updateComplete;
+        const header = el.renderRoot.querySelector('ox-grid-header');
+        const body = el.renderRoot.querySelector('ox-grid-body');
+        await (header === null || header === void 0 ? void 0 : header.updateComplete);
+        await (body === null || body === void 0 ? void 0 : body.updateComplete);
+        return { el, header, body };
+    }
+    it('표 · 줄 · 칸이 겹쳐 있다', async () => {
+        const { el, header, body } = await grid();
+        const grid_ = el.renderRoot.querySelector('[role=grid]');
+        expect(grid_, 'role=grid 가 없다').to.exist;
+        expect(header.getAttribute('role')).to.equal('rowgroup');
+        expect(body.getAttribute('role')).to.equal('rowgroup');
+        expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(1);
+        expect(body.renderRoot.querySelectorAll('[role=row]').length).to.equal(2);
+        expect(header.renderRoot.querySelectorAll('[role=columnheader]').length).to.equal(3);
+    });
+    it('전체가 몇 줄 몇 열인지 말한다 — 지금 페이지가 아니라', async () => {
+        const { el } = await grid();
+        const grid_ = el.renderRoot.querySelector('[role=grid]');
+        /* 머리 한 줄 + 전체 40건. 화면에 두 줄만 그려도 40건짜리 표다. */
+        expect(grid_.getAttribute('aria-rowcount')).to.equal('41');
+        expect(grid_.getAttribute('aria-colcount')).to.equal('3');
+        expect(grid_.getAttribute('aria-label')).to.equal('입고 대기 목록');
+    });
+    it('2페이지의 첫 줄은 21번째 줄이다 — 페이지마다 1번으로 돌아가지 않는다', async () => {
+        const { body } = await grid({ page: 2 });
+        const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]'));
+        /* 머리 한 줄(1) + 앞 페이지 20건 = 22번째부터 */
+        expect(rows[0].getAttribute('aria-rowindex')).to.equal('22');
+        expect(rows[1].getAttribute('aria-rowindex')).to.equal('23');
+    });
+    it('칸이 몇 번째 열인지 말한다 — 남는 폭을 메우는 칸은 세지 않는다', async () => {
+        const { body } = await grid();
+        const row = body.renderRoot.querySelector('[role=row]');
+        const cells = Array.from(row.querySelectorAll('[role=gridcell]'));
+        expect(cells.map(cell => cell.getAttribute('aria-colindex'))).to.deep.equal(['1', '2', '3']);
+        expect(row.querySelectorAll('[role=presentation]').length, '메우는 칸이 표의 칸으로 세어졌다').to.equal(1);
+    });
+    it('정렬 상태를 글자로도 말한다 — 화살표는 눈으로만 읽힌다', async () => {
+        const el = await fixture(html `
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .sorters=${[{ name: 'palletId', desc: true }]}
+        .data=${{ records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `);
+        await el.updateComplete;
+        const header = el.renderRoot.querySelector('ox-grid-header');
+        await header.updateComplete;
+        const headers = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]'));
+        const sorts = headers.map(cell => cell.getAttribute('aria-sort'));
+        /* 거터는 정렬할 수 없다 — 있지도 않은 기능을 있다고 말하지 않는다. */
+        expect(sorts[0]).to.be.null;
+        expect(sorts[1], '내림차순으로 정렬된 열').to.equal('descending');
+        expect(sorts[2], '정렬할 수 있으나 지금은 아닌 열').to.equal('none');
+    });
+    it('줄 감싸개가 배치를 건드리지 않는다 — 상자를 만들면 표가 무너진다', async () => {
+        const { body } = await grid();
+        const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]'));
+        const first = Array.from(rows[0].children);
+        /* 감싸개 자신은 상자가 없다 */
+        expect(getComputedStyle(rows[0]).display).to.equal('contents');
+        /* 한 줄 안의 칸은 오른쪽으로 나아간다 — 한 자리에 겹쳐 있으면 열이 사라진 것이다 */
+        const lefts = first.map(cell => cell.offsetLeft);
+        expect(new Set(lefts).size, '칸들이 같은 x 에 겹쳐 있다').to.be.greaterThan(1);
+        lefts.slice(1).forEach((left, index) => expect(left).to.be.greaterThan(lefts[index]));
+        /* 줄과 줄은 아래로 내려간다 */
+        const firstTop = rows[0].children[0].offsetTop;
+        const secondTop = rows[1].children[0].offsetTop;
+        expect(secondTop, '두 줄이 같은 y 에 있다').to.be.greaterThan(firstTop);
+    });
+});
+/**
+ * 묶음 머리가 있는 표.
+ *
+ * 머리가 두 줄이 되고, 묶이지 않은 열은 두 줄에 걸친다(`.span-both`). 배치가 CSS grid 의
+ * `grid-row` / `grid-column` 으로 이루어지므로 **줄 감싸개가 가장 위험한 자리**다.
+ */
+describe('묶음 머리 — 머리가 두 줄이다', () => {
+    const columns = [
+        { type: 'string', name: 'palletId', header: '파렛트 번호' },
+        { type: 'string', name: 'width', header: { renderer: '폭', group: '치수' } },
+        { type: 'string', name: 'height', header: { renderer: '높이', group: '치수' } }
+    ].map(buildColumn);
+    async function grouped() {
+        const el = await fixture(html `
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', width: '1200', height: '900' }] }}
+      ></ox-grid>
+    `);
+        await el.updateComplete;
+        const header = el.renderRoot.querySelector('ox-grid-header');
+        const body = el.renderRoot.querySelector('ox-grid-body');
+        await header.updateComplete;
+        await body.updateComplete;
+        return { el, header, body };
+    }
+    it('머리가 두 줄로 세어진다 — 본문은 3번째 줄부터', async () => {
+        const { el, header, body } = await grouped();
+        expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(2);
+        /* 머리 두 줄 + 1건 */
+        expect(el.renderRoot.querySelector('[role=grid]').getAttribute('aria-rowcount')).to.equal('3');
+        const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]'));
+        expect(rows[0].getAttribute('aria-rowindex')).to.equal('3');
+    });
+    it('묶음 머리가 몇 열을 덮는지 말한다', async () => {
+        const { header } = await grouped();
+        const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]'));
+        const first = cells[0];
+        const group = cells.find(cell => cell.getAttribute('aria-colspan'));
+        /* 묶이지 않은 열은 두 줄에 걸친다 */
+        expect(first.getAttribute('aria-rowspan')).to.equal('2');
+        expect(first.getAttribute('aria-colindex')).to.equal('1');
+        /* 치수 묶음은 2 · 3열을 덮는다 */
+        expect(group, '묶음 머리를 찾지 못했다').to.exist;
+        expect(group.getAttribute('aria-colindex')).to.equal('2');
+        expect(group.getAttribute('aria-colspan')).to.equal('2');
+    });
+    it('두 줄짜리 머리의 배치가 그대로다 — 묶음이 아래 줄보다 위에 있다', async () => {
+        const { header } = await grouped();
+        const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]'));
+        const group = cells.find(cell => cell.getAttribute('aria-colspan'));
+        const leaf = cells.find(cell => !cell.getAttribute('aria-colspan') && cell !== cells[0]);
+        expect(leaf.offsetTop, '묶음 머리와 그 아래 열이 같은 높이에 있다').to.be.greaterThan(group.offsetTop);
+        expect(group.offsetWidth, '묶음 머리가 두 열을 덮지 않는다').to.be.greaterThan(leaf.offsetWidth);
+    });
+});
+/**
+ * 표 감싸개가 바깥 배치를 건드리지 않나.
+ *
+ * `role=grid` 안에는 줄만 들어갈 수 있어서, 설정 단추 자리와 페이지 넘김은 감싸개 **밖**으로
+ * 나왔다. 그러면서 두 가지가 이 구조에 매인다.
+ *
+ * ```
+ * 세로 배치   호스트는 flex column 이다. 감싸개가 상자를 만들면 머리와 몸이 그 안으로 들어가
+ *            flex 항목이 하나가 되고, 몸의 flex: 1 이 듣지 않아 높이가 무너진다
+ * 형제 선택자 「머리에 올렸을 때 설정 단추를 보인다」가 인접 형제 선택자다. 설정 단추가 감싸개
+ *            바로 뒤에 있어야 그 규칙이 성립한다
+ * ```
+ */
+describe('표 감싸개는 배치에 끼어들지 않는다', () => {
+    const columns = [
+        { type: 'string', name: 'palletId', header: '파렛트 번호' },
+        { type: 'string', name: 'location', header: '보관 위치' }
+    ].map(buildColumn);
+    it('설정 단추는 표 바로 뒤에 있다 — 표 안이 아니라', async () => {
+        const el = await fixture(html `
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `);
+        await el.updateComplete;
+        const grid = el.renderRoot.querySelector('[role=grid]');
+        const setting = el.renderRoot.querySelector('div[setting]');
+        expect(setting, '설정 단추 자리가 없다').to.exist;
+        expect(grid.contains(setting), '설정 단추가 표 안에 들어갔다 — 표 읽기가 깨진다').to.be.false;
+        expect(grid.nextElementSibling, '인접 형제 규칙이 성립하지 않는다').to.equal(setting);
+    });
+    it('머리와 몸이 그대로 호스트의 세로 배치를 쓴다', async () => {
+        const el = await fixture(html `
+      <div style="height: 300px; display: flex">
+        <ox-grid
+          style="flex: 1"
+          .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+          .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        ></ox-grid>
+      </div>
+    `);
+        const grid = el.querySelector('ox-grid');
+        await grid.updateComplete;
+        const wrapper = grid.renderRoot.querySelector('[role=grid]');
+        const header = grid.renderRoot.querySelector('ox-grid-header');
+        const body = grid.renderRoot.querySelector('ox-grid-body');
+        expect(getComputedStyle(wrapper).display).to.equal('contents');
+        /* 몸이 남는 높이를 다 쓴다 — 감싸개가 상자를 만들면 이 값이 머리 높이만큼으로 줄어든다 */
+        expect(body.offsetHeight, '몸이 남는 높이를 쓰지 못한다').to.be.greaterThan(100);
+        expect(body.offsetTop, '몸이 머리 아래에 있지 않다').to.be.greaterThan(0);
+        expect(header.offsetTop).to.equal(0);
+    });
+});
+//# sourceMappingURL=accessible-name.test.js.map