yuyeon 0.0.9 → 0.0.10

package/lib/components/table/YDataTableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableCell.mjs","names":["defineComponent","computed","useRender","toStyleSizeValue","YDataTableCell","name","props","type","String","default","fixed","fixedOffset","Number","width","setup","_ref","slots","attrs","offsetStyle","ret","undefined","ElTag","_createVNode","_mergeProps","value"],"sources":["../../../src/components/table/YDataTableCell.tsx"],"sourcesContent":["import { PropType, defineComponent, computed, CSSProperties } from \"vue\";\n\nimport { useRender } from '../../composables/component';\nimport { toStyleSizeValue } from \"../../util/ui\";\n\nexport const YDataTableCell = defineComponent({\n  name: 'YDataTableCell',\n  props: {\n    type: {\n      type: String as PropType<'head' | 'data'>,\n      default: 'data',\n    },\n    fixed: {\n      type: String as PropType<'lead' | 'trail'>,\n    },\n    fixedOffset: {\n      type: Number as PropType<number>,\n    },\n    width: {\n      type: [Number, String] as PropType<string | number>\n    }\n  },\n  setup(props, { slots, attrs }) {\n    const offsetStyle = computed(() => {\n      const ret: CSSProperties = {};\n      if (props.fixed && props.fixedOffset !== undefined) {\n        if (props.fixed === 'lead') {\n          ret['left'] = toStyleSizeValue(props.fixedOffset);\n        } else if (props.fixed === 'trail') {\n          ret['right'] = toStyleSizeValue(props.fixedOffset);\n        }\n      }\n      return ret\n    })\n\n    useRender(() => {\n      const ElTag = props.type === 'head' ? 'th' : 'td';\n      return (\n        <ElTag\n          class={[\n            'y-data-table__cell',\n            'y-data-table-cell',\n            {\n              'y-data-table-cell--fixed': props.fixed,\n              [`y-data-table-cell--fixed-${props.fixed}`]: props.fixed,\n            },\n          ]}\n          style={{\n            width: toStyleSizeValue(props.width),\n            ...offsetStyle.value\n          }}\n          {...attrs}\n        >\n          {slots.default?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n\nexport type YDataTableCell = InstanceType<typeof YDataTableCell>;\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,QAAQ,QAAuB,KAAK;AAAC,SAEhEC,SAAS;AAAA,SACTC,gBAAgB;AAEzB,OAAO,MAAMC,cAAc,GAAGJ,eAAe,CAAC;EAC5CK,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAmC;MACzCC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLH,IAAI,EAAEC;IACR,CAAC;IACDG,WAAW,EAAE;MACXJ,IAAI,EAAEK;IACR,CAAC;IACDC,KAAK,EAAE;MACLN,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB;EACF,CAAC;EACDM,KAAKA,CAACR,KAAK,EAAAS,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAMG,WAAW,GAAGjB,QAAQ,CAAC,MAAM;MACjC,MAAMkB,GAAkB,GAAG,CAAC,CAAC;MAC7B,IAAIb,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACK,WAAW,KAAKS,SAAS,EAAE;QAClD,IAAId,KAAK,CAACI,KAAK,KAAK,MAAM,EAAE;UAC1BS,GAAG,CAAC,MAAM,CAAC,GAAGhB,gBAAgB,CAACG,KAAK,CAACK,WAAW,CAAC;QACnD,CAAC,MAAM,IAAIL,KAAK,CAACI,KAAK,KAAK,OAAO,EAAE;UAClCS,GAAG,CAAC,OAAO,CAAC,GAAGhB,gBAAgB,CAACG,KAAK,CAACK,WAAW,CAAC;QACpD;MACF;MACA,OAAOQ,GAAG;IACZ,CAAC,CAAC;IAEFjB,SAAS,CAAC,MAAM;MACd,MAAMmB,KAAK,GAAGf,KAAK,CAACC,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,IAAI;MACjD,OAAAe,YAAA,CAAAD,KAAA,EAAAE,WAAA;QAAA,SAEW,CACL,oBAAoB,EACpB,mBAAmB,EACnB;UACE,0BAA0B,EAAEjB,KAAK,CAACI,KAAK;UACvC,CAAE,4BAA2BJ,KAAK,CAACI,KAAM,EAAC,GAAGJ,KAAK,CAACI;QACrD,CAAC,CACF;QAAA,SACM;UACLG,KAAK,EAAEV,gBAAgB,CAACG,KAAK,CAACO,KAAK,CAAC;UACpC,GAAGK,WAAW,CAACM;QACjB;MAAC,GACGP,KAAK;QAAAR,OAAA,EAAAA,CAAA,MAERO,KAAK,CAACP,OAAO,GAAG,CAAC;MAAA;IAGxB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableCell.mjs","names":["computed","defineComponent","useRender","toStyleSizeValue","YDataTableCell","name","functional","props","type","String","default","fixed","fixedOffset","Number","width","height","align","emits","setup","_ref","slots","emit","attrs","offsetStyle","ret","undefined","ElTag","_createVNode","_mergeProps","value","e"],"sources":["../../../src/components/table/YDataTableCell.tsx"],"sourcesContent":["import { CSSProperties, PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { toStyleSizeValue } from '../../util/ui';\n\nexport const YDataTableCell = defineComponent({\n  name: 'YDataTableCell',\n  functional: true,\n  props: {\n    type: {\n      type: String as PropType<'head' | 'data'>,\n      default: 'data',\n    },\n    fixed: {\n      type: String as PropType<'lead' | 'trail'>,\n    },\n    fixedOffset: {\n      type: Number as PropType<number>,\n    },\n    width: {\n      type: [Number, String] as PropType<string | number>,\n    },\n    height: {\n      type: [Number, String] as PropType<string | number>,\n    },\n    align: {\n      type: String as PropType<'start' | 'center' | 'end'>,\n      default: 'start',\n    },\n  },\n  emits: ['click'],\n  setup(props, { slots, emit, attrs }) {\n    const offsetStyle = computed(() => {\n      const ret: CSSProperties = {};\n      if (props.fixed && props.fixedOffset !== undefined) {\n        if (props.fixed === 'lead') {\n          ret['left'] = toStyleSizeValue(props.fixedOffset);\n        } else if (props.fixed === 'trail') {\n          ret['right'] = toStyleSizeValue(props.fixedOffset);\n        }\n      }\n      return ret;\n    });\n\n    useRender(() => {\n      const ElTag = props.type === 'head' ? 'th' : 'td';\n      return (\n        <ElTag\n          class={[\n            `y-data-table__${ElTag}`,\n            'y-data-table-cell',\n            {\n              'y-data-table-cell--fixed': props.fixed,\n              [`y-data-table-cell--fixed-${props.fixed}`]: props.fixed,\n              [`y-data-table-cell--align-${props.align}`]: props.align,\n            },\n          ]}\n          style={{\n            width: toStyleSizeValue(props.width),\n            height: toStyleSizeValue(props.height),\n            ...offsetStyle.value,\n          }}\n          {...attrs}\n          onClick={(e) => emit('click', e)}\n        >\n          {slots.default?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n\nexport type YDataTableCell = InstanceType<typeof YDataTableCell>;\n"],"mappings":";AAAA,SAAkCA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEhEC,SAAS;AAAA,SACTC,gBAAgB;AAEzB,OAAO,MAAMC,cAAc,GAAGH,eAAe,CAAC;EAC5CI,IAAI,EAAE,gBAAgB;EACtBC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAmC;MACzCC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLH,IAAI,EAAEC;IACR,CAAC;IACDG,WAAW,EAAE;MACXJ,IAAI,EAAEK;IACR,CAAC;IACDC,KAAK,EAAE;MACLN,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDM,MAAM,EAAE;MACNP,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDO,KAAK,EAAE;MACLR,IAAI,EAAEC,MAA8C;MACpDC,OAAO,EAAE;IACX;EACF,CAAC;EACDO,KAAK,EAAE,CAAC,OAAO,CAAC;EAChBC,KAAKA,CAACX,KAAK,EAAAY,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IACjC,MAAMI,WAAW,GAAGvB,QAAQ,CAAC,MAAM;MACjC,MAAMwB,GAAkB,GAAG,CAAC,CAAC;MAC7B,IAAIjB,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACK,WAAW,KAAKa,SAAS,EAAE;QAClD,IAAIlB,KAAK,CAACI,KAAK,KAAK,MAAM,EAAE;UAC1Ba,GAAG,CAAC,MAAM,CAAC,GAAGrB,gBAAgB,CAACI,KAAK,CAACK,WAAW,CAAC;QACnD,CAAC,MAAM,IAAIL,KAAK,CAACI,KAAK,KAAK,OAAO,EAAE;UAClCa,GAAG,CAAC,OAAO,CAAC,GAAGrB,gBAAgB,CAACI,KAAK,CAACK,WAAW,CAAC;QACpD;MACF;MACA,OAAOY,GAAG;IACZ,CAAC,CAAC;IAEFtB,SAAS,CAAC,MAAM;MACd,MAAMwB,KAAK,GAAGnB,KAAK,CAACC,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,IAAI;MACjD,OAAAmB,YAAA,CAAAD,KAAA,EAAAE,WAAA;QAAA,SAEW,CACJ,iBAAgBF,KAAM,EAAC,EACxB,mBAAmB,EACnB;UACE,0BAA0B,EAAEnB,KAAK,CAACI,KAAK;UACvC,CAAE,4BAA2BJ,KAAK,CAACI,KAAM,EAAC,GAAGJ,KAAK,CAACI,KAAK;UACxD,CAAE,4BAA2BJ,KAAK,CAACS,KAAM,EAAC,GAAGT,KAAK,CAACS;QACrD,CAAC,CACF;QAAA,SACM;UACLF,KAAK,EAAEX,gBAAgB,CAACI,KAAK,CAACO,KAAK,CAAC;UACpCC,MAAM,EAAEZ,gBAAgB,CAACI,KAAK,CAACQ,MAAM,CAAC;UACtC,GAAGQ,WAAW,CAACM;QACjB;MAAC,GACGP,KAAK;QAAA,WACCQ,CAAC,IAAKT,IAAI,CAAC,OAAO,EAAES,CAAC;MAAC;QAAApB,OAAA,EAAAA,CAAA,MAE/BU,KAAK,CAACV,OAAO,GAAG,CAAC;MAAA;IAGxB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableControl.mjs","names":["defineComponent","useRender","YButton","YFieldInput","YIconExpand","YDataTableControl","name","components","setup","props","_ref","slots","_createVNode","default","_Fragment","_createTextVNode","width","height"],"sources":["../../../src/components/table/YDataTableControl.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { YButton } from '../button';\r\nimport { YFieldInput } from '../field-input';\r\nimport { YIconExpand } from '../icons';\r\nimport './YDataTableControl.scss';\r\n\r\nexport const YDataTableControl = defineComponent({\r\n  name: 'YDataTableControl',\r\n  components: {\r\n    YButton,\r\n    YIconExpand,\r\n    YFieldInput,\r\n  },\r\n  setup(props, { slots }) {\r\n    useRender(() => {\r\n      return (\r\n        <footer class={['y-data-table-control']}>\r\n          {slots.default ? (\r\n            slots.default()\r\n          ) : (\r\n            <>\r\n              <YButton outlined>\r\n                20\r\n                <YIconExpand\r\n                  style={{ width: '16px', height: '16px' }}\r\n                ></YIconExpand>\r\n              </YButton>\r\n              페이지\r\n              <div>\r\n                <YFieldInput outlined></YFieldInput>\r\n              </div>\r\n            </>\r\n          )}\r\n        </footer>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableControl = InstanceType<typeof YDataTableControl>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,WAAW;AAAA,SACXC,WAAW;AACpB;AAEA,OAAO,MAAMC,iBAAiB,GAAGL,eAAe,CAAC;EAC/CM,IAAI,EAAE,mBAAmB;EACzBC,UAAU,EAAE;IACVL,OAAO;IACPE,WAAW;IACXD;EACF,CAAC;EACDK,KAAKA,CAACC,KAAK,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBT,SAAS,CAAC,MAAM;MACd,OAAAW,YAAA;QAAA,SACiB,CAAC,sBAAsB;MAAC,IACpCD,KAAK,CAACE,OAAO,GACZF,KAAK,CAACE,OAAO,CAAC,CAAC,GAAAD,YAAA,CAAAE,SAAA,SAAAF,YAAA,CAAAV,OAAA;QAAA;MAAA;QAAAW,OAAA,EAAAA,CAAA,MAAAE,gBAAA,QAAAH,YAAA,CAAAR,WAAA;UAAA,SAMF;YAAEY,KAAK,EAAE,MAAM;YAAEC,MAAM,EAAE;UAAO;QAAC;MAAA,IAAAF,gBAAA,wBAAAH,YAAA,eAAAA,YAAA,CAAAT,WAAA;QAAA;MAAA,YAQ/C;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableControl.mjs","names":["defineComponent","useRender","YButton","YFieldInput","YIconExpand","YDataTableControl","name","components","setup","props","_ref","slots","_createVNode","default","_Fragment","_createTextVNode","width","height"],"sources":["../../../src/components/table/YDataTableControl.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { YButton } from '../button';\nimport { YFieldInput } from '../field-input';\n\nimport { YIconExpand } from '../icons';\nimport './YDataTableControl.scss';\n\nexport const YDataTableControl = defineComponent({\n  name: 'YDataTableControl',\n  components: {\n    YButton,\n    YIconExpand,\n    YFieldInput,\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      return (\n        <footer class={['y-data-table-control']}>\n          {slots.default ? (\n            slots.default()\n          ) : (\n            <>\n              <YButton outlined>\n                20\n                <YIconExpand\n                  style={{ width: '16px', height: '16px' }}\n                ></YIconExpand>\n              </YButton>\n              페이지\n              <div>\n                <YFieldInput outlined></YFieldInput>\n              </div>\n            </>\n          )}\n        </footer>\n      );\n    });\n  },\n});\n\nexport type YDataTableControl = InstanceType<typeof YDataTableControl>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,WAAW;AAAA,SAEXC,WAAW;AACpB;AAEA,OAAO,MAAMC,iBAAiB,GAAGL,eAAe,CAAC;EAC/CM,IAAI,EAAE,mBAAmB;EACzBC,UAAU,EAAE;IACVL,OAAO;IACPE,WAAW;IACXD;EACF,CAAC;EACDK,KAAKA,CAACC,KAAK,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBT,SAAS,CAAC,MAAM;MACd,OAAAW,YAAA;QAAA,SACiB,CAAC,sBAAsB;MAAC,IACpCD,KAAK,CAACE,OAAO,GACZF,KAAK,CAACE,OAAO,CAAC,CAAC,GAAAD,YAAA,CAAAE,SAAA,SAAAF,YAAA,CAAAV,OAAA;QAAA;MAAA;QAAAW,OAAA,EAAAA,CAAA,MAAAE,gBAAA,QAAAH,YAAA,CAAAR,WAAA;UAAA,SAMF;YAAEY,KAAK,EAAE,MAAM;YAAEC,MAAM,EAAE;UAAO;QAAC;MAAA,IAAAF,gBAAA,wBAAAH,YAAA,eAAAA,YAAA,CAAAT,WAAA;QAAA;MAAA,YAQ/C;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableHead.mjs

@@ -1,19 +1,158 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { toStyleSizeValue } from "../../util/ui.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { YIconSort } from "../icons/YIconSort.mjs";
+import { YDataTableCell } from "./YDataTableCell.mjs";
+import { useHeader } from "./composibles/header.mjs";
+import { useSelection } from "./composibles/selection.mjs";
+import { useSorting } from "./composibles/sorting.mjs";
+import { YIconCheckbox } from "../icons/index.mjs";
+export const pressYDataTableHeadProps = propsFactory({
+  multiSort: Boolean,
+  sortAscIcon: {
+    type: String,
+    default: '@sortAsc'
+  },
+  sortDescIcon: {
+    type: String,
+    default: '@sortDesc'
+  },
+  dualSortIcon: Boolean,
+  sticky: Boolean
+}, 'YDataTableHead');
 export const YDataTableHead = defineComponent({
   name: 'YDataTableHead',
+  components: {
+    YDataTableCell
+  },
   props: {
-    headers: {
-      type: [Array]
-    }
+    ...pressYDataTableHeadProps()
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
+    const {
+      toggleSort,
+      sortBy,
+      isSorted
+    } = useSorting();
+    const {
+      someSelected,
+      allSelected,
+      selectAll,
+      showSelectAll,
+      selectables
+    } = useSelection();
+    const {
+      columns,
+      headers
+    } = useHeader();
+    const getFixedStyles = (column, y) => {
+      if (!props.sticky && !column.fixed) return undefined;
+      return {
+        position: 'sticky',
+        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,
+        left: column.fixed ? toStyleSizeValue(column.fixedOffset) : undefined,
+        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined
+      };
+    };
+    function onClick(e) {
+      //
+    }
+    function getSortDirection(column) {
+      const found = sortBy.value.find(by => by.key === column.key);
+      if (!found) {
+        return undefined;
+      }
+      if (found.order === 'asc') {
+        return 'asc';
+      }
+      if (found.order === 'desc') {
+        return 'desc';
+      }
+    }
+    const YDataTableTh = _ref2 => {
+      let {
+        column,
+        x,
+        y
+      } = _ref2;
+      return _createVNode(YDataTableCell, _mergeProps({
+        "type": "head",
+        "align": column.align,
+        "fixed": column.fixed ? column.lastFixed ? 'trail' : 'lead' : undefined,
+        "class": ['y-data-table-header', {
+          'y-data-table-header--sortable': column.sortable,
+          'y-data-table-header--sorted': isSorted(column),
+          'y-data-table-header--select': column.key === 'data-table-select'
+        }],
+        "style": {
+          width: toStyleSizeValue(column.width),
+          minWidth: toStyleSizeValue(column.width),
+          ...getFixedStyles(column, y)
+        }
+      }, {
+        rowspan: column.rowspan,
+        colspan: column.colspan
+      }, {
+        "onClick": onClick
+      }), {
+        default: () => {
+          const headerSlotName = `header.${column.key}`;
+          const headerSlotProps = {
+            column,
+            selectAll,
+            isSorted,
+            toggleSort,
+            sortBy: sortBy.value,
+            someSelected: someSelected.value,
+            allSelected: allSelected.value,
+            selectables: selectables.value,
+            getSortDirection
+          };
+          if (slots[headerSlotName]) {
+            return slots[headerSlotName]?.(headerSlotProps);
+          }
+          if (column.key === 'data-table-select') {
+            return slots['header.data-table-select']?.(headerSlotProps) ?? (showSelectAll && _createVNode(YIconCheckbox, _mergeProps({
+              "checked": allSelected.value,
+              "indeterminate": !allSelected.value && someSelected.value,
+              "disabled": selectables.value.length < 1
+            }, {
+              onClick: e => {
+                e.stopPropagation();
+                selectAll(!allSelected.value);
+              }
+            }), null));
+          }
+          return _createVNode("div", {
+            "class": "y-data-table-header__content"
+          }, [_createVNode("span", {
+            "class": "y-data-table-header__text"
+          }, [column.text]), _createVNode("span", {
+            "class": ['y-data-table-header__sorting-icon', {
+              'y-data-table-header__sorting-icon--disabled': !column.sortable
+            }],
+            "onClick": column.sortable ? e => {
+              e.stopPropagation();
+              toggleSort(column);
+            } : undefined
+          }, [_createVNode(YIconSort, {
+            "disabled": !column.sortable,
+            "direction": getSortDirection(column)
+          }, null)])]);
+        }
+      });
+    };
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.head ? slots.head?.(props) : _createVNode("tr", null, null)]);
+      return _createVNode(_Fragment, null, [slots.head ? slots.head?.(props) : headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(YDataTableTh, {
+        "column": column,
+        "x": x,
+        "y": y
+      }, null))]))]);
     });
   }
 });

package/lib/components/table/YDataTableHead.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableHead.mjs","names":["defineComponent","useRender","YDataTableHead","name","props","headers","type","Array","setup","_ref","slots","_createVNode","_Fragment","head"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\n\nexport const YDataTableHead = defineComponent({\n  name: 'YDataTableHead',\n  props: {\n    headers: {\n      type: [Array],\n    },\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      return <>{slots.head ? slots.head?.(props) : <tr></tr>}</>;\n    });\n  },\n});\n\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAE,CAACC,KAAK;IACd;EACF,CAAC;EACDC,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBR,SAAS,CAAC,MAAM;MACd,OAAAU,YAAA,CAAAC,SAAA,SAAUF,KAAK,CAACG,IAAI,GAAGH,KAAK,CAACG,IAAI,GAAGT,KAAK,CAAC,GAAAO,YAAA,kBAAY;IACxD,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableHead.mjs","names":["defineComponent","useRender","toStyleSizeValue","propsFactory","YIconSort","YDataTableCell","useHeader","useSelection","useSorting","YIconCheckbox","pressYDataTableHeadProps","multiSort","Boolean","sortAscIcon","type","String","default","sortDescIcon","dualSortIcon","sticky","YDataTableHead","name","components","props","setup","_ref","slots","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","selectables","columns","headers","getFixedStyles","column","y","fixed","undefined","position","zIndex","left","fixedOffset","top","onClick","e","getSortDirection","found","value","find","by","key","order","YDataTableTh","_ref2","x","_createVNode","_mergeProps","align","lastFixed","sortable","width","minWidth","rowspan","colspan","headerSlotName","headerSlotProps","length","stopPropagation","text","_Fragment","head","map","row"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { CSSProperties, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\nimport { YIconSort } from '../icons/YIconSort';\nimport { YDataTableCell } from './YDataTableCell';\nimport { useHeader } from './composibles/header';\nimport { useSelection } from './composibles/selection';\nimport { useSorting } from './composibles/sorting';\n\nimport { YIconCheckbox } from '../icons';\nimport { InternalDataTableHeader } from './types';\n\nexport const pressYDataTableHeadProps = propsFactory(\n  {\n    multiSort: Boolean,\n    sortAscIcon: {\n      type: String,\n      default: '@sortAsc',\n    },\n    sortDescIcon: {\n      type: String,\n      default: '@sortDesc',\n    },\n    dualSortIcon: Boolean,\n    sticky: Boolean,\n  },\n  'YDataTableHead',\n);\n\nexport const YDataTableHead = defineComponent({\n  name: 'YDataTableHead',\n  components: {\n    YDataTableCell,\n  },\n  props: {\n    ...pressYDataTableHeadProps(),\n  },\n  setup(props, { slots }) {\n    const { toggleSort, sortBy, isSorted } = useSorting();\n    const { someSelected, allSelected, selectAll, showSelectAll, selectables } =\n      useSelection();\n    const { columns, headers } = useHeader();\n\n    const getFixedStyles = (\n      column: InternalDataTableHeader,\n      y: number,\n    ): CSSProperties | undefined => {\n      if (!props.sticky && !column.fixed) return undefined;\n\n      return {\n        position: 'sticky',\n        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,\n        left: column.fixed ? toStyleSizeValue(column.fixedOffset) : undefined,\n        top: props.sticky\n          ? `calc(var(--v-table-header-height) * ${y})`\n          : undefined,\n      };\n    };\n\n    function onClick(e: Event) {\n      //\n    }\n\n    function getSortDirection(column: InternalDataTableHeader) {\n      const found = sortBy.value.find((by) => by.key === column.key);\n      if (!found) {\n        return undefined;\n      }\n      if (found.order === 'asc') {\n        return 'asc';\n      }\n      if (found.order === 'desc') {\n        return 'desc';\n      }\n    }\n\n    const YDataTableTh = ({\n      column,\n      x,\n      y,\n    }: {\n      column: InternalDataTableHeader;\n      x: number;\n      y: number;\n    }) => {\n      return (\n        <YDataTableCell\n          type=\"head\"\n          align={column.align}\n          fixed={\n            column.fixed ? (column.lastFixed ? 'trail' : 'lead') : undefined\n          }\n          class={[\n            'y-data-table-header',\n            {\n              'y-data-table-header--sortable': column.sortable,\n              'y-data-table-header--sorted': isSorted(column),\n              'y-data-table-header--select': column.key === 'data-table-select',\n            },\n          ]}\n          style={{\n            width: toStyleSizeValue(column.width),\n            minWidth: toStyleSizeValue(column.width),\n            ...getFixedStyles(column, y),\n          }}\n          {...{ rowspan: column.rowspan, colspan: column.colspan }}\n          onClick={onClick}\n        >\n          {{\n            default: () => {\n              const headerSlotName = `header.${column.key}` as const;\n              const headerSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                selectables: selectables.value,\n                getSortDirection,\n              };\n\n              if (slots[headerSlotName]) {\n                return slots[headerSlotName]?.(headerSlotProps);\n              }\n\n              if (column.key === 'data-table-select') {\n                return (\n                  slots['header.data-table-select']?.(headerSlotProps) ??\n                  (showSelectAll && (\n                    <YIconCheckbox\n                      checked={allSelected.value}\n                      indeterminate={!allSelected.value && someSelected.value}\n                      disabled={selectables.value.length < 1}\n                      {...{\n                        onClick: (e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectAll(!allSelected.value);\n                        },\n                      }}\n                    ></YIconCheckbox>\n                  ))\n                );\n              }\n\n              return (\n                <div class=\"y-data-table-header__content\">\n                  <span class=\"y-data-table-header__text\">{column.text}</span>\n                  <span\n                    class={[\n                      'y-data-table-header__sorting-icon',\n                      {\n                        'y-data-table-header__sorting-icon--disabled':\n                          !column.sortable,\n                      },\n                    ]}\n                    onClick={\n                      column.sortable\n                        ? (e) => {\n                            e.stopPropagation();\n                            toggleSort(column);\n                          }\n                        : undefined\n                    }\n                  >\n                    <YIconSort\n                      disabled={!column.sortable}\n                      direction={getSortDirection(column)}\n                    ></YIconSort>\n                  </span>\n                </div>\n              );\n            },\n          }}\n        </YDataTableCell>\n      );\n    };\n\n    useRender(() => {\n      return (\n        <>\n          {slots.head\n            ? slots.head?.(props)\n            : headers.value.map((row, y) => (\n                <tr>\n                  {row.map((column, x) => (\n                    <YDataTableTh column={column} x={x} y={y} />\n                  ))}\n                </tr>\n              ))}\n        </>\n      );\n    });\n  },\n});\n\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\n"],"mappings":"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"}

package/lib/components/table/YDataTableRow.mjs

@@ -1,11 +1,74 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { getPropertyFromItem } from "../../util/common.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { YDataTableCell } from "./YDataTableCell.mjs";
+import { useHeader } from "./composibles/header.mjs";
+import { useSelection } from "./composibles/selection.mjs";
+import { YIconCheckbox } from "../icons/index.mjs";
+export const pressYDataTableRowProps = propsFactory({
+  index: Number,
+  item: Object,
+  onClick: Function
+}, 'YDataTableRow');
 export const YDataTableRow = defineComponent({
   name: 'YDataTableRow',
-  setup() {
+  props: {
+    ...pressYDataTableRowProps()
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      isSelected,
+      toggleSelect
+    } = useSelection();
+    const {
+      columns
+    } = useHeader();
     useRender(() => {
-      return _createVNode("tr", null, null);
+      return _createVNode("tr", {
+        "class": ['y-data-table__row'],
+        "onClick": e => emit('click:row', e)
+      }, [props.item && columns.value.map((column, colIndex) => _createVNode(YDataTableCell, {
+        "align": column.align,
+        "fixed": column.fixed ? column.lastFixed ? 'trail' : 'lead' : undefined,
+        "fixedOffset": column.fixedOffset,
+        "width": column.width,
+        "class": ['y-data-table-data', {
+          'y-data-table-data--select': column.key === 'data-table-select'
+        }]
+      }, {
+        default: () => {
+          const item = props.item;
+          const slotName = `item.${column.key}`;
+          const slotProps = {
+            index: props.index,
+            item: props.item,
+            columns: columns.value,
+            isSelected,
+            toggleSelect
+          };
+          if (slots[slotName]) {
+            return slots[slotName]?.(slotProps);
+          }
+          if (column.key === 'data-table-select') {
+            return slots['item.data-table-select']?.(slotProps) ?? _createVNode(YIconCheckbox, _mergeProps({
+              "checked": isSelected([item]),
+              "disabled": !item.selectable
+            }, {
+              onClick: e => {
+                e.stopPropagation();
+                toggleSelect(item);
+              }
+            }), null);
+          }
+          return getPropertyFromItem(item.columns, column.key);
+        }
+      }))]);
     });
   }
 });

package/lib/components/table/YDataTableRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableRow.mjs","names":["defineComponent","useRender","YDataTableRow","name","setup","_createVNode"],"sources":["../../../src/components/table/YDataTableRow.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nexport const YDataTableRow = defineComponent({\r\n  name: 'YDataTableRow',\r\n  setup() {\r\n    useRender(() => {\r\n      return <tr></tr>;\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableRow = InstanceType<typeof YDataTableRow>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC;EAC3CG,IAAI,EAAE,eAAe;EACrBC,KAAKA,CAAA,EAAG;IACNH,SAAS,CAAC,MAAM;MACd,OAAAI,YAAA;IACF,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableRow.mjs","names":["defineComponent","useRender","getPropertyFromItem","propsFactory","YDataTableCell","useHeader","useSelection","YIconCheckbox","pressYDataTableRowProps","index","Number","item","Object","onClick","Function","YDataTableRow","name","props","setup","_ref","emit","slots","isSelected","toggleSelect","columns","_createVNode","e","value","map","column","colIndex","align","fixed","lastFixed","undefined","fixedOffset","width","key","default","slotName","slotProps","_mergeProps","selectable","stopPropagation"],"sources":["../../../src/components/table/YDataTableRow.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { getPropertyFromItem } from '../../util/common';\r\nimport { propsFactory } from '../../util/vue-component';\r\nimport { YDataTableCell } from './YDataTableCell';\r\nimport { useHeader } from './composibles/header';\r\nimport { useSelection } from './composibles/selection';\r\n\r\nimport { YIconCheckbox } from '../icons';\r\nimport { DataTableItem } from './types';\r\n\r\nexport const pressYDataTableRowProps = propsFactory(\r\n  {\r\n    index: Number as PropType<number>,\r\n    item: Object as PropType<DataTableItem>,\r\n    onClick: Function as PropType<(e: MouseEvent) => void>,\r\n  },\r\n  'YDataTableRow',\r\n);\r\n\r\nexport const YDataTableRow = defineComponent({\r\n  name: 'YDataTableRow',\r\n  props: {\r\n    ...pressYDataTableRowProps(),\r\n  },\r\n  setup(props, { emit, slots }) {\r\n    const { isSelected, toggleSelect } = useSelection();\r\n    const { columns } = useHeader();\r\n\r\n    useRender(() => {\r\n      return (\r\n        <tr class={['y-data-table__row']} onClick={(e) => emit('click:row', e)}>\r\n          {props.item &&\r\n            columns.value.map((column, colIndex) => (\r\n              <YDataTableCell\r\n                align={column.align}\r\n                fixed={\r\n                  column.fixed\r\n                    ? column.lastFixed\r\n                      ? 'trail'\r\n                      : 'lead'\r\n                    : undefined\r\n                }\r\n                fixedOffset={column.fixedOffset}\r\n                width={column.width}\r\n                class={[\r\n                  'y-data-table-data',\r\n                  {\r\n                    'y-data-table-data--select': column.key === 'data-table-select',\r\n                  },\r\n                ]}\r\n              >\r\n                {{\r\n                  default: () => {\r\n                    const item = props.item!;\r\n                    const slotName = `item.${column.key}`;\r\n                    const slotProps = {\r\n                      index: props.index,\r\n                      item: props.item,\r\n                      columns: columns.value,\r\n                      isSelected,\r\n                      toggleSelect,\r\n                    };\r\n\r\n                    if (slots[slotName]) {\r\n                      return slots[slotName]?.(slotProps);\r\n                    }\r\n\r\n                    if (column.key === 'data-table-select') {\r\n                      return (\r\n                        slots['item.data-table-select']?.(slotProps) ?? (\r\n                          <YIconCheckbox\r\n                            checked={isSelected([item])}\r\n                            disabled={!item.selectable}\r\n                            {...{\r\n                              onClick: (e: MouseEvent) => {\r\n                                e.stopPropagation();\r\n                                toggleSelect(item);\r\n                              },\r\n                            }}\r\n                          ></YIconCheckbox>\r\n                        )\r\n                      );\r\n                    }\r\n\r\n                    return getPropertyFromItem(item.columns, column.key);\r\n                  },\r\n                }}\r\n              </YDataTableCell>\r\n            ))}\r\n        </tr>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableRow = InstanceType<typeof YDataTableRow>;\r\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAAC,SAEvCC,SAAS;AAAA,SACTC,mBAAmB;AAAA,SACnBC,YAAY;AAAA,SACZC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,YAAY;AAAA,SAEZC,aAAa;AAGtB,OAAO,MAAMC,uBAAuB,GAAGL,YAAY,CACjD;EACEM,KAAK,EAAEC,MAA0B;EACjCC,IAAI,EAAEC,MAAiC;EACvCC,OAAO,EAAEC;AACX,CAAC,EACD,eACF,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGf,eAAe,CAAC;EAC3CgB,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE;IACL,GAAGT,uBAAuB,CAAC;EAC7B,CAAC;EACDU,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEG,UAAU;MAAEC;IAAa,CAAC,GAAGjB,YAAY,CAAC,CAAC;IACnD,MAAM;MAAEkB;IAAQ,CAAC,GAAGnB,SAAS,CAAC,CAAC;IAE/BJ,SAAS,CAAC,MAAM;MACd,OAAAwB,YAAA;QAAA,SACa,CAAC,mBAAmB,CAAC;QAAA,WAAYC,CAAC,IAAKN,IAAI,CAAC,WAAW,EAAEM,CAAC;MAAC,IACnET,KAAK,CAACN,IAAI,IACTa,OAAO,CAACG,KAAK,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEC,QAAQ,KAAAL,YAAA,CAAArB,cAAA;QAAA,SAExByB,MAAM,CAACE,KAAK;QAAA,SAEjBF,MAAM,CAACG,KAAK,GACRH,MAAM,CAACI,SAAS,GACd,OAAO,GACP,MAAM,GACRC,SAAS;QAAA,eAEFL,MAAM,CAACM,WAAW;QAAA,SACxBN,MAAM,CAACO,KAAK;QAAA,SACZ,CACL,mBAAmB,EACnB;UACE,2BAA2B,EAAEP,MAAM,CAACQ,GAAG,KAAK;QAC9C,CAAC;MACF;QAGCC,OAAO,EAAEA,CAAA,KAAM;UACb,MAAM3B,IAAI,GAAGM,KAAK,CAACN,IAAK;UACxB,MAAM4B,QAAQ,GAAI,QAAOV,MAAM,CAACQ,GAAI,EAAC;UACrC,MAAMG,SAAS,GAAG;YAChB/B,KAAK,EAAEQ,KAAK,CAACR,KAAK;YAClBE,IAAI,EAAEM,KAAK,CAACN,IAAI;YAChBa,OAAO,EAAEA,OAAO,CAACG,KAAK;YACtBL,UAAU;YACVC;UACF,CAAC;UAED,IAAIF,KAAK,CAACkB,QAAQ,CAAC,EAAE;YACnB,OAAOlB,KAAK,CAACkB,QAAQ,CAAC,GAAGC,SAAS,CAAC;UACrC;UAEA,IAAIX,MAAM,CAACQ,GAAG,KAAK,mBAAmB,EAAE;YACtC,OACEhB,KAAK,CAAC,wBAAwB,CAAC,GAAGmB,SAAS,CAAC,IAAAf,YAAA,CAAAlB,aAAA,EAAAkC,WAAA;cAAA,WAE/BnB,UAAU,CAAC,CAACX,IAAI,CAAC,CAAC;cAAA,YACjB,CAACA,IAAI,CAAC+B;YAAU;cAExB7B,OAAO,EAAGa,CAAa,IAAK;gBAC1BA,CAAC,CAACiB,eAAe,CAAC,CAAC;gBACnBpB,YAAY,CAACZ,IAAI,CAAC;cACpB;YAAC,SAGN;UAEL;UAEA,OAAOT,mBAAmB,CAACS,IAAI,CAACa,OAAO,EAAEK,MAAM,CAACQ,GAAG,CAAC;QACtD;MAAC,EAGN,CAAC;IAGV,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableServer.mjs

@@ -1,22 +1,25 @@
-import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
-import { computed, defineComponent } from 'vue';
+import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { toRef } from '@vue/runtime-core';
+import { computed, defineComponent, provide } from 'vue';
 import { useRender } from "../../composables/component.mjs";
-import { propsFactory } from "../../util/vue-component.mjs";
+import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
 import { pressDataTableProps } from "./YDataTable.mjs";
 import { YDataTableBody } from "./YDataTableBody.mjs";
 import { YDataTableControl } from "./YDataTableControl.mjs";
 import { YDataTableHead } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
 import { YTable } from "./YTable.mjs";
-import { pressDataTablePaginationProps } from "./pagination.mjs";
+import { createHeader } from "./composibles/header.mjs";
+import { createPagination, pressDataTablePaginationProps, providePagination } from "./composibles/pagination.mjs";
+import { provideSelection } from "./composibles/selection.mjs";
+import { createSorting, provideSorting } from "./composibles/sorting.mjs";
+import { useItems } from "./composibles/items.mjs";
+import { useOptions } from "./composibles/options.mjs";
 export const pressDataTableServerProps = propsFactory({
   total: {
     type: [Number, String],
     required: true
   },
-  headers: {
-    type: [Array]
-  },
   ...pressDataTablePaginationProps(),
   ...pressDataTableProps()
 }, 'YDataTableServer');
@@ -32,24 +35,108 @@ export const YDataTableServer = defineComponent({
   props: {
     ...pressDataTableServerProps()
   },
+  emits: {
+    'update:modelValue': value => true,
+    'update:page': page => true,
+    'update:pageSize': pageSize => true,
+    'update:sortBy': sortBy => true,
+    'update:options': options => true,
+    'click:row': (e, value) => true
+  },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
+    const {
+      page,
+      pageSize
+    } = createPagination(props);
+    const {
+      sortBy,
+      multiSort
+    } = createSorting(props);
+    const total = computed(() => parseInt(props.total));
+    const {
+      columns,
+      headers
+    } = createHeader(props, {
+      enableSelect: toRef(props, 'enableSelect')
+    });
+    const {
+      items
+    } = useItems(props, columns);
+    const {
+      toggleSort
+    } = provideSorting({
+      sortBy,
+      multiSort,
+      page
+    });
+    const {
+      pageLength,
+      setPageSize
+    } = providePagination({
+      page,
+      pageSize,
+      total
+    });
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      someSelected,
+      allSelected
+    } = provideSelection(props, {
+      allItems: items,
+      pageItems: items
+    });
+    useOptions({
+      page,
+      pageSize,
+      search: toRef(props, 'search'),
+      sortBy
+    }, emit);
+    provide('y-data-table', {
+      toggleSort,
+      sortBy
+    });
     const slotProps = computed(() => {
-      return {};
+      return {
+        // pagination
+        page: page.value,
+        pageSize: pageSize.value,
+        pageLength: pageLength.value,
+        setPageSize,
+        // sorting
+        sortBy: sortBy.value,
+        toggleSort,
+        // selection
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        isSelected,
+        select,
+        selectAll,
+        toggleSelect,
+        //
+        items: items.value,
+        columns: columns.value,
+        headers: headers.value
+      };
     });
     useRender(() => {
-      return _createVNode(YTable, {
+      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);
+      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);
+      const yTableProps = chooseProps(props, YTable.props);
+      return _createVNode(YTable, _mergeProps({
         "class": ['y-data-table']
-      }, {
+      }, yTableProps), {
         top: () => slots.top?.(slotProps.value),
         leading: () => slots.leading ? slots.leading(slotProps.value) : _createVNode(_Fragment, null, [_createVNode(YDataTableLayer, null, slots)]),
-        default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, {
-          "headers": props.headers
-        }, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, {
-          "headers": props.headers
-        }, slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+        default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, yDataTableHeadProps, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, _mergeProps(yDataTableBodyProps, {
+          "items": items.value
+        }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
         trailing: () => slots.trailing?.(slotProps.value),
         bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(YDataTableControl, null, {
           prepend: slots['control.prepend']

package/lib/components/table/YDataTableServer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableServer.mjs","names":["computed","defineComponent","useRender","propsFactory","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","pressDataTablePaginationProps","pressDataTableServerProps","total","type","Number","String","required","headers","Array","YDataTableServer","name","components","props","setup","_ref","slots","slotProps","_createVNode","top","value","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { pressDataTableProps } from './YDataTable';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { pressDataTablePaginationProps } from './pagination';\n\nexport const pressDataTableServerProps = propsFactory(\n  {\n    total: {\n      type: [Number, String] as PropType<number | string>,\n      required: true,\n    },\n    headers: {\n      type: [Array],\n    },\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  'YDataTableServer',\n);\n\nexport const YDataTableServer = defineComponent({\n  name: 'YDataTableServer',\n  components: {\n    YTable,\n    YDataTableLayer,\n    YDataTableHead,\n    YDataTableBody,\n    YDataTableControl,\n  },\n  props: {\n    ...pressDataTableServerProps(),\n  },\n  setup(props, { slots }) {\n    const slotProps = computed(() => {\n      return {};\n    });\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead v-slots={slots} headers={props.headers}></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody v-slots={slots} headers={props.headers}></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n  },\n});\n\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,YAAY;AAAA,SACZC,mBAAmB;AAAA,SACnBC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,eAAe;AAAA,SACfC,MAAM;AAAA,SACNC,6BAA6B;AAEtC,OAAO,MAAMC,yBAAyB,GAAGR,YAAY,CACnD;EACES,KAAK,EAAE;IACLC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;IACnDC,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPJ,IAAI,EAAE,CAACK,KAAK;EACd,CAAC;EACD,GAAGR,6BAA6B,CAAC,CAAC;EAClC,GAAGN,mBAAmB,CAAC;AACzB,CAAC,EACD,kBACF,CAAC;AAED,OAAO,MAAMe,gBAAgB,GAAGlB,eAAe,CAAC;EAC9CmB,IAAI,EAAE,kBAAkB;EACxBC,UAAU,EAAE;IACVZ,MAAM;IACND,eAAe;IACfD,cAAc;IACdF,cAAc;IACdC;EACF,CAAC;EACDgB,KAAK,EAAE;IACL,GAAGX,yBAAyB,CAAC;EAC/B,CAAC;EACDY,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,SAAS,GAAG1B,QAAQ,CAAC,MAAM;MAC/B,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACFE,SAAS,CAAC,MAAM;MACd,OAAAyB,YAAA,CAAAlB,MAAA;QAAA,SACiB,CAAC,cAAc;MAAC;QAE3BmB,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACG,GAAG,GAAGF,SAAS,CAACG,KAAK,CAAC;QACvCC,OAAO,EAAEA,CAAA,KACPL,KAAK,CAACK,OAAO,GACXL,KAAK,CAACK,OAAO,CAACJ,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,CAAAnB,eAAA,QAGFiB,KAAK,GAElC;QACHO,OAAO,EAAEA,CAAA,KACPP,KAAK,CAACO,OAAO,GACXP,KAAK,CAACO,OAAO,CAACN,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,iBAAAA,YAAA,CAAApB,cAAA;UAAA,WAIee,KAAK,CAACL;QAAO,GAA7BQ,KAAK,KAE/BA,KAAK,CAACQ,KAAK,GAAGP,SAAS,CAACG,KAAK,CAAC,EAAAF,YAAA,iBAAAA,YAAA,CAAAtB,cAAA;UAAA,WAEYiB,KAAK,CAACL;QAAO,GAA7BQ,KAAK,KAE/BA,KAAK,CAACS,KAAK,GAAGR,SAAS,CAACG,KAAK,CAAC,EAC9BJ,KAAK,CAACU,KAAK,GAAGT,SAAS,CAACG,KAAK,CAAC,EAElC;QACHO,QAAQ,EAAEA,CAAA,KAAMX,KAAK,CAACW,QAAQ,GAAGV,SAAS,CAACG,KAAK,CAAC;QACjDQ,MAAM,EAAEA,CAAA,KACNZ,KAAK,CAACY,MAAM,GACVZ,KAAK,CAACY,MAAM,CAACX,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAArB,iBAAA,QAGlB;UACPgC,OAAO,EAAEb,KAAK,CAAC,iBAAiB;QAClC,CAAC;MAEJ;IAIX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableServer.mjs","names":["toRef","computed","defineComponent","provide","useRender","chooseProps","propsFactory","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","createHeader","createPagination","pressDataTablePaginationProps","providePagination","provideSelection","createSorting","provideSorting","useItems","useOptions","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","search","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { toRef } from '@vue/runtime-core';\nimport { PropType, computed, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { pressDataTableProps } from './YDataTable';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { createHeader } from './composibles/header';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n} from './composibles/pagination';\nimport { provideSelection } from './composibles/selection';\nimport { createSorting, provideSorting } from './composibles/sorting';\n\nimport { useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableServerProps = propsFactory(\n  {\n    total: {\n      type: [Number, String] as PropType<number | string>,\n      required: true,\n    },\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  'YDataTableServer',\n);\n\nexport const YDataTableServer = defineComponent({\n  name: 'YDataTableServer',\n  components: {\n    YTable,\n    YDataTableLayer,\n    YDataTableHead,\n    YDataTableBody,\n    YDataTableControl,\n  },\n  props: {\n    ...pressDataTableServerProps(),\n  },\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (page: number) => true,\n    'update:pageSize': (pageSize: number) => true,\n    'update:sortBy': (sortBy: any) => true,\n    'update:options': (options: any) => true,\n    'click:row': (e: Event, value: { row: any }) => true,\n  },\n  setup(props, { slots, emit }) {\n    const { page, pageSize } = createPagination(props);\n    const { sortBy, multiSort } = createSorting(props);\n    const total = computed(() => parseInt(props.total as string));\n    const { columns, headers } = createHeader(props, {\n      enableSelect: toRef(props, 'enableSelect'),\n    });\n    const { items } = useItems(props, columns);\n\n    const { toggleSort } = provideSorting({ sortBy, multiSort, page });\n    const { pageLength, setPageSize } = providePagination({\n      page,\n      pageSize,\n      total,\n    });\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      someSelected,\n      allSelected,\n    } = provideSelection(props, { allItems: items, pageItems: items });\n\n    useOptions(\n      {\n        page,\n        pageSize,\n        search: toRef(props, 'search'),\n        sortBy,\n      },\n      emit,\n    );\n\n    provide('y-data-table', {\n      toggleSort,\n      sortBy,\n    });\n\n    const slotProps = computed<YDataTableSlotProps>(() => {\n      return {\n        // pagination\n        page: page.value,\n        pageSize: pageSize.value,\n        pageLength: pageLength.value,\n        setPageSize,\n        // sorting\n        sortBy: sortBy.value,\n        toggleSort,\n        // selection\n        someSelected: someSelected.value,\n        allSelected: allSelected.value,\n        isSelected,\n        select,\n        selectAll,\n        toggleSelect,\n        //\n        items: items.value,\n        columns: columns.value,\n        headers: headers.value,\n      };\n    });\n\n    useRender(() => {\n      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n      const yTableProps = chooseProps(props, YTable.props);\n      return (\n        <YTable class={['y-data-table']} {...yTableProps}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      v-slots={slots}\n                      {...yDataTableBodyProps}\n                      items={items.value}\n                    ></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n  },\n});\n\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\n"],"mappings":"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"}

package/lib/components/table/YTable.mjs

@@ -4,22 +4,26 @@ import { useRender } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resize-observer.mjs";
 import { toStyleSizeValue } from "../../util/ui.mjs";
 import "./YTable.scss";
+import { propsFactory } from "../../util/vue-component.mjs";
+export const pressYTableProps = propsFactory({
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  fixedHead: {
+    type: Boolean
+  },
+  height: {
+    type: [Number, String]
+  },
+  flexHeight: {
+    type: Boolean
+  }
+}, 'YTable');
 export const YTable = defineComponent({
   name: 'YTable',
   props: {
-    tag: {
-      type: String,
-      default: 'div'
-    },
-    fixedHead: {
-      type: Boolean
-    },
-    height: {
-      type: [Number, String]
-    },
-    flexHeight: {
-      type: Boolean
-    }
+    ...pressYTableProps()
   },
   setup(props, _ref) {
     let {

package/lib/components/table/YTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTable.mjs","names":["defineComponent","useRender","useResizeObserver","toStyleSizeValue","YTable","name","props","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","setup","_ref","slots","resizeObservedRef","contentRect","ElTag","containerHeight","value","_createVNode","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { toStyleSizeValue } from '../../util/ui';\r\nimport './YTable.scss';\r\n\r\nexport const YTable = defineComponent({\r\n  name: 'YTable',\r\n  props: {\r\n    tag: {\r\n      type: String as PropType<string>,\r\n      default: 'div',\r\n    },\r\n    fixedHead: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    height: {\r\n      type: [Number, String] as PropType<number | string>,\r\n    },\r\n    flexHeight: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    const { resizeObservedRef, contentRect } = useResizeObserver();\r\n    useRender(() => {\r\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\r\n      const containerHeight = props.flexHeight\r\n        ? (contentRect.value?.height ?? props.height)\r\n        : props.height;\r\n      return (\r\n        <ElTag\r\n          class={[\r\n            'y-table',\r\n            {\r\n              'y-table--fixed-head': props.fixedHead,\r\n              'y-table--fixed-height': props.flexHeight || props.height,\r\n              'y-table--flex-height': props.flexHeight,\r\n            },\r\n          ]}\r\n        >\r\n          {slots.top?.()}\r\n          {slots.default ? (\r\n            <div\r\n              class={['y-table__container']}\r\n              ref={resizeObservedRef}\r\n              style={{\r\n                height: toStyleSizeValue(containerHeight),\r\n              }}\r\n            >\r\n              {slots.leading?.()}\r\n              <table>{slots.default()}</table>\r\n              {slots.trailing?.()}\r\n            </div>\r\n          ) : (\r\n            slots.container?.(resizeObservedRef, contentRect)\r\n          )}\r\n          {slots.bottom?.()}\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAA6BA,eAAe,QAAQ,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AACzB;AAEA,OAAO,MAAMC,MAAM,GAAGJ,eAAe,CAAC;EACpCK,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHC,IAAI,EAAEC,MAA0B;MAChCC,OAAO,EAAE;IACX,CAAC;IACDC,SAAS,EAAE;MACTH,IAAI,EAAEI;IACR,CAAC;IACDC,MAAM,EAAE;MACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;IACvB,CAAC;IACDM,UAAU,EAAE;MACVP,IAAI,EAAEI;IACR;EACF,CAAC;EACDI,KAAKA,CAACV,KAAK,EAAAW,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGlB,iBAAiB,CAAC,CAAC;IAC9DD,SAAS,CAAC,MAAM;MACd,MAAMoB,KAAK,GAAIf,KAAK,CAACC,GAAG,IAAoC,KAAK;MACjE,MAAMe,eAAe,GAAGhB,KAAK,CAACS,UAAU,GACnCK,WAAW,CAACG,KAAK,EAAEV,MAAM,IAAIP,KAAK,CAACO,MAAM,GAC1CP,KAAK,CAACO,MAAM;MAChB,OAAAW,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEf,KAAK,CAACK,SAAS;UACtC,uBAAuB,EAAEL,KAAK,CAACS,UAAU,IAAIT,KAAK,CAACO,MAAM;UACzD,sBAAsB,EAAEP,KAAK,CAACS;QAChC,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAEAQ,KAAK,CAACO,GAAG,GAAG,CAAC,EACbP,KAAK,CAACR,OAAO,GAAAc,YAAA;UAAA,SAEH,CAAC,oBAAoB,CAAC;UAAA,OACxBL,iBAAiB;UAAA,SACf;YACLN,MAAM,EAAEV,gBAAgB,CAACmB,eAAe;UAC1C;QAAC,IAEAJ,KAAK,CAACQ,OAAO,GAAG,CAAC,EAAAF,YAAA,iBACVN,KAAK,CAACR,OAAO,CAAC,CAAC,IACtBQ,KAAK,CAACS,QAAQ,GAAG,CAAC,KAGrBT,KAAK,CAACU,SAAS,GAAGT,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACW,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTable.mjs","names":["defineComponent","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","ElTag","containerHeight","value","_createVNode","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { toStyleSizeValue } from '../../util/ui';\r\nimport './YTable.scss';\r\nimport { propsFactory } from \"../../util/vue-component\";\r\n\r\nexport const pressYTableProps = propsFactory({\r\n  tag: {\r\n    type: String as PropType<string>,\r\n    default: 'div',\r\n  },\r\n  fixedHead: {\r\n    type: Boolean as PropType<boolean>,\r\n  },\r\n  height: {\r\n    type: [Number, String] as PropType<number | string>,\r\n  },\r\n  flexHeight: {\r\n    type: Boolean as PropType<boolean>,\r\n  },\r\n}, 'YTable')\r\n\r\nexport const YTable = defineComponent({\r\n  name: 'YTable',\r\n  props: {\r\n    ...pressYTableProps(),\r\n  },\r\n  setup(props, { slots }) {\r\n    const { resizeObservedRef, contentRect } = useResizeObserver();\r\n    useRender(() => {\r\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\r\n      const containerHeight = props.flexHeight\r\n        ? (contentRect.value?.height ?? props.height)\r\n        : props.height;\r\n      return (\r\n        <ElTag\r\n          class={[\r\n            'y-table',\r\n            {\r\n              'y-table--fixed-head': props.fixedHead,\r\n              'y-table--fixed-height': props.flexHeight || props.height,\r\n              'y-table--flex-height': props.flexHeight,\r\n            },\r\n          ]}\r\n        >\r\n          {slots.top?.()}\r\n          {slots.default ? (\r\n            <div\r\n              class={['y-table__container']}\r\n              ref={resizeObservedRef}\r\n              style={{\r\n                height: toStyleSizeValue(containerHeight),\r\n              }}\r\n            >\r\n              {slots.leading?.()}\r\n              <table>{slots.default()}</table>\r\n              {slots.trailing?.()}\r\n            </div>\r\n          ) : (\r\n            slots.container?.(resizeObservedRef, contentRect)\r\n          )}\r\n          {slots.bottom?.()}\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAA6BA,eAAe,QAAQ,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AACzB;AAAuB,SACdC,YAAY;AAErB,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAAC;EAC3CE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR;AACF,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,MAAMI,MAAM,GAAGf,eAAe,CAAC;EACpCgB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGZ,gBAAgB,CAAC;EACtB,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;IAC9DD,SAAS,CAAC,MAAM;MACd,MAAMsB,KAAK,GAAIN,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMkB,eAAe,GAAGP,KAAK,CAACH,UAAU,GACnCQ,WAAW,CAACG,KAAK,EAAEb,MAAM,IAAIK,KAAK,CAACL,MAAM,GAC1CK,KAAK,CAACL,MAAM;MAChB,OAAAc,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEN,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACO,GAAG,GAAG,CAAC,EACbP,KAAK,CAACX,OAAO,GAAAiB,YAAA;UAAA,SAEH,CAAC,oBAAoB,CAAC;UAAA,OACxBL,iBAAiB;UAAA,SACf;YACLT,MAAM,EAAET,gBAAgB,CAACqB,eAAe;UAC1C;QAAC,IAEAJ,KAAK,CAACQ,OAAO,GAAG,CAAC,EAAAF,YAAA,iBACVN,KAAK,CAACX,OAAO,CAAC,CAAC,IACtBW,KAAK,CAACS,QAAQ,GAAG,CAAC,KAGrBT,KAAK,CAACU,SAAS,GAAGT,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACW,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}