yuyeon 0.3.2-rc.8 → 0.3.2-rc.9

package/lib/components/table/YDataTableServer.js

@@ -11,12 +11,13 @@ import { YDataTableControl } from "./YDataTableControl.js";
 import { YDataTableHead } from "./YDataTableHead.js";
 import { YDataTableLayer } from "./YDataTableLayer.js";
 import { YTable } from "./YTable.js";
-import { createHeader } from "./composibles/header.js";
-import { useItems } from "./composibles/items.js";
-import { useOptions } from "./composibles/options.js";
-import { createPagination, pressDataTablePaginationProps, providePagination } from "./composibles/pagination.js";
-import { provideSelection } from "./composibles/selection.js";
-import { createSorting, provideSorting } from "./composibles/sorting.js";
+import { createHeader } from "./composables/header.js";
+import { useItems } from "./composables/items.js";
+import { useOptions } from "./composables/options.js";
+import { createPagination, pressDataTablePaginationProps, providePagination } from "./composables/pagination.js";
+import { provideSelection } from "./composables/selection.js";
+import { createSorting, provideSorting } from "./composables/sorting.js";
+import { YDataTableInjectionKey } from "./composables/provides.js";
 export const pressDataTableServerProps = propsFactory({
   total: {
     type: [Number, String],
@@ -103,20 +104,12 @@ export const YDataTableServer = defineComponent({
     } = useResizeObserver(entries => {
       debounceMeasureHead(entries);
     });
-    function measureHead(entries) {
-      headRect.value = entries?.[0].contentRect;
-    }
     useOptions({
       page,
       pageSize,
       search: toRef(props, 'search'),
       sortBy
     }, emit);
-    provide('y-data-table', {
-      toggleSort,
-      sortBy,
-      headRect
-    });
     const slotProps = computed(() => {
       return {
         // pagination
@@ -143,6 +136,14 @@ export const YDataTableServer = defineComponent({
         TableBodyRef
       };
     });
+    function measureHead(entries) {
+      headRect.value = entries?.[0].contentRect;
+    }
+    provide(YDataTableInjectionKey, {
+      toggleSort,
+      sortBy,
+      headRect
+    });
     useRender(() => {
       const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);
       const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableServer.js","names":["computed","provide","ref","toRef","useRender","useResizeObserver","chooseProps","defineComponent","propsFactory","debounce","toStyleSizeValue","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","createHeader","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","provideSelection","createSorting","provideSorting","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","TableBodyRef","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","setPage","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","headRect","debounceMeasureHead","measureHead","resizeObservedRef","headObserveRef","entries","contentRect","search","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","loading","length","hideNoData","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import {\n  type PropType,\n  computed,\n  provide,\n  ref,\n  toRef,\n  useTemplateRef,\n} from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\nimport { debounce } from '@/util/debounce';\nimport { toStyleSizeValue } from '@/util/ui';\n\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 { useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n} from './composibles/pagination';\nimport { provideSelection } from './composibles/selection';\nimport { createSorting, provideSorting } from './composibles/sorting';\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 TableBodyRef = ref();\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, setPage } = 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    const headRect = ref<DOMRectReadOnly>();\n    const debounceMeasureHead = debounce(measureHead, 100);\n    const { resizeObservedRef: headObserveRef } = useResizeObserver(\n      (entries) => {\n        debounceMeasureHead(entries);\n      },\n    );\n\n    function measureHead(entries: ResizeObserverEntry[]) {\n      headRect.value = entries?.[0].contentRect;\n    }\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      headRect,\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        setPage,\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        TableBodyRef,\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\n          class={[\n            'y-data-table',\n            {\n              'y-data-table--no-data':\n                !props.loading && props.items.length < 1 && !props.hideNoData,\n            },\n          ]}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slotProps={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      ref={TableBodyRef}\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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"}
+{"version":3,"file":"YDataTableServer.js","names":["computed","provide","ref","toRef","useRender","useResizeObserver","chooseProps","defineComponent","propsFactory","debounce","toStyleSizeValue","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","createHeader","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","provideSelection","createSorting","provideSorting","YDataTableInjectionKey","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","TableBodyRef","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","setPage","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","headRect","debounceMeasureHead","measureHead","resizeObservedRef","headObserveRef","entries","search","slotProps","contentRect","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","loading","length","hideNoData","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import {\n  type PropType,\n  computed,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\nimport { debounce } from '@/util/debounce';\nimport { toStyleSizeValue } from '@/util/ui';\n\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 './composables/header';\nimport { useItems } from './composables/items';\nimport { useOptions } from './composables/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n} from './composables/pagination';\nimport { provideSelection } from './composables/selection';\nimport { createSorting, provideSorting } from './composables/sorting';\nimport { YDataTableSlotProps } from './types';\nimport { YDataTableInjectionKey } from '@/components/table/composables/provides';\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 TableBodyRef = ref();\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, setPage } = 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    const headRect = ref<DOMRectReadOnly>();\n    const debounceMeasureHead = debounce(measureHead, 100);\n    const { resizeObservedRef: headObserveRef } = useResizeObserver(\n      (entries) => {\n        debounceMeasureHead(entries);\n      },\n    );\n\n    useOptions(\n      {\n        page,\n        pageSize,\n        search: toRef(props, 'search'),\n        sortBy,\n      },\n      emit,\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        setPage,\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        TableBodyRef,\n      };\n    });\n\n    function measureHead(entries: ResizeObserverEntry[]) {\n      headRect.value = entries?.[0].contentRect;\n    }\n\n    provide(YDataTableInjectionKey, {\n      toggleSort,\n      sortBy,\n      headRect,\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\n          class={[\n            'y-data-table',\n            {\n              'y-data-table--no-data':\n                !props.loading && props.items.length < 1 && !props.hideNoData,\n            },\n          ]}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slotProps={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      ref={TableBodyRef}\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.js

@@ -1,10 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 import { provide } from 'vue';
-import { useRectMeasure } from "./composibles/measure.js";
 import { useRender } from "../../composables/component.js";
 import { defineComponent, propsFactory } from "../../util/component/index.js";
 import { toStyleSizeValue } from "../../util/ui.js";
+import { useRectMeasure } from "./composables/measure.js";
 import "./YTable.scss";
+import { YTableInjectionKey } from "./composables/provides.js";
 export const pressYTableProps = propsFactory({
   tag: {
     type: String,
@@ -36,10 +37,14 @@ export const YTable = defineComponent({
       containerRef,
       tableRef,
       containerRect,
+      wrapperRef,
       wrapperRect
     } = useRectMeasure();
-    provide('YTable', {
-      containerRect
+    provide(YTableInjectionKey, {
+      containerRect,
+      tableRef,
+      wrapperRef,
+      wrapperRect
     });
     function onScroll(e) {
       emit('scroll', e);

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

@@ -1 +1 @@
-{"version":3,"file":"YTable.js","names":["provide","useRectMeasure","useRender","defineComponent","propsFactory","toStyleSizeValue","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","onScroll","Function","YTable","name","props","emits","setup","_ref","slots","emit","containerRef","tableRef","containerRect","wrapperRect","e","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { type PropType, provide } from 'vue';\r\n\r\nimport { useRectMeasure } from '@/components/table/composibles/measure';\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YTable.scss';\r\n\r\nexport const pressYTableProps = propsFactory(\r\n  {\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    onScroll: Function as PropType<(e: Event) => void>,\r\n  },\r\n  'YTable',\r\n);\r\n\r\nexport const YTable = defineComponent({\r\n  name: 'YTable',\r\n  props: {\r\n    ...pressYTableProps(),\r\n  },\r\n  emits: ['scroll'],\r\n  setup(props, { slots, emit }) {\r\n    const { containerRef,  tableRef, containerRect, wrapperRect } =\r\n      useRectMeasure();\r\n\r\n    provide('YTable', { containerRect });\r\n\r\n    function onScroll(e: Event) {\r\n      emit('scroll', e);\r\n    }\r\n\r\n    useRender(() => {\r\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\r\n      const containerHeight = props.flexHeight\r\n        ? containerRect.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          style={{\r\n            '--y-table-container-width': toStyleSizeValue(\r\n              containerRect.value?.width,\r\n            ),\r\n            '--y-table-wrapper-width': toStyleSizeValue(\r\n              wrapperRect.value?.width,\r\n            ),\r\n          }}\r\n        >\r\n          {slots.top?.()}\r\n          {slots.default ? (\r\n            <div ref={containerRef} class={['y-table__container']}>\r\n              {slots.leading?.()}\r\n              <div\r\n                class={['y-table__wrapper']}\r\n                style={{\r\n                  height: toStyleSizeValue(containerHeight),\r\n                }}\r\n                onScroll={onScroll}\r\n              >\r\n                <table ref={tableRef}>{slots.default()}</table>\r\n              </div>\r\n              {slots.trailing?.()}\r\n            </div>\r\n          ) : (\r\n            slots.container?.(containerRef, containerRect)\r\n          )}\r\n          {slots.bottom?.()}\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YTable = InstanceType<typeof YTable>;\r\n"],"mappings":";AAAA,SAAwBA,OAAO,QAAQ,KAAK;AAAC,SAEpCC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,eAAe,EAAEC,YAAY;AAAA,SAC7BC,gBAAgB;AAEzB;AAEA,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAC1C;EACEG,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,CAAC;EACDI,QAAQ,EAAEC;AACZ,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMC,MAAM,GAAGf,eAAe,CAAC;EACpCgB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGd,gBAAgB,CAAC;EACtB,CAAC;EACDe,KAAK,EAAE,CAAC,QAAQ,CAAC;EACjBC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEG,YAAY;MAAGC,QAAQ;MAAEC,aAAa;MAAEC;IAAY,CAAC,GAC3D5B,cAAc,CAAC,CAAC;IAElBD,OAAO,CAAC,QAAQ,EAAE;MAAE4B;IAAc,CAAC,CAAC;IAEpC,SAASZ,QAAQA,CAACc,CAAQ,EAAE;MAC1BL,IAAI,CAAC,QAAQ,EAAEK,CAAC,CAAC;IACnB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAM6B,KAAK,GAAIX,KAAK,CAACb,GAAG,IAAoC,KAAK;MACjE,MAAMyB,eAAe,GAAGZ,KAAK,CAACL,UAAU,GACpCa,aAAa,CAACK,KAAK,EAAEpB,MAAM,IAAIO,KAAK,CAACP,MAAM,GAC3CO,KAAK,CAACP,MAAM;MAChB,OAAAqB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEX,KAAK,CAACT,SAAS;UACtC,uBAAuB,EAAES,KAAK,CAACL,UAAU,IAAIK,KAAK,CAACP,MAAM;UACzD,sBAAsB,EAAEO,KAAK,CAACL;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEV,gBAAgB,CAC3CuB,aAAa,CAACK,KAAK,EAAEE,KACvB,CAAC;UACD,yBAAyB,EAAE9B,gBAAgB,CACzCwB,WAAW,CAACI,KAAK,EAAEE,KACrB;QACF;MAAC;QAAAzB,OAAA,EAAAA,CAAA,MAEAc,KAAK,CAACY,GAAG,GAAG,CAAC,EACbZ,KAAK,CAACd,OAAO,GAAAwB,YAAA;UAAA,OACFR,YAAY;UAAA,SAAS,CAAC,oBAAoB;QAAC,IAClDF,KAAK,CAACa,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLrB,MAAM,EAAER,gBAAgB,CAAC2B,eAAe;UAC1C,CAAC;UAAA,YACShB;QAAQ,IAAAkB,YAAA;UAAA,OAENP;QAAQ,IAAGH,KAAK,CAACd,OAAO,CAAC,CAAC,MAEvCc,KAAK,CAACc,QAAQ,GAAG,CAAC,KAGrBd,KAAK,CAACe,SAAS,GAAGb,YAAY,EAAEE,aAAa,CAC9C,EACAJ,KAAK,CAACgB,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTable.js","names":["provide","useRender","defineComponent","propsFactory","toStyleSizeValue","useRectMeasure","YTableInjectionKey","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","onScroll","Function","YTable","name","props","emits","setup","_ref","slots","emit","containerRef","tableRef","containerRect","wrapperRef","wrapperRect","e","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { type PropType, provide } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent, propsFactory } from '@/util/component';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport { useRectMeasure } from './composables/measure';\n\nimport './YTable.scss';\nimport { YTableInjectionKey } from '@/components/table/composables/provides';\n\nexport const pressYTableProps = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    fixedHead: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n    },\n    flexHeight: {\n      type: Boolean as PropType<boolean>,\n    },\n    onScroll: Function as PropType<(e: Event) => void>,\n  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  emits: ['scroll'],\n  setup(props, { slots, emit }) {\n    const { containerRef, tableRef, containerRect, wrapperRef, wrapperRect } =\n      useRectMeasure();\n\n    provide(YTableInjectionKey, { containerRect, tableRef, wrapperRef, wrapperRect });\n\n    function onScroll(e: Event) {\n      emit('scroll', e);\n    }\n\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? containerRect.value?.height ?? props.height\n        : props.height;\n      return (\n        <ElTag\n          class={[\n            'y-table',\n            {\n              'y-table--fixed-head': props.fixedHead,\n              'y-table--fixed-height': props.flexHeight || props.height,\n              'y-table--flex-height': props.flexHeight,\n            },\n          ]}\n          style={{\n            '--y-table-container-width': toStyleSizeValue(\n              containerRect.value?.width,\n            ),\n            '--y-table-wrapper-width': toStyleSizeValue(\n              wrapperRect.value?.width,\n            ),\n          }}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div ref={containerRef} class={['y-table__container']}>\n              {slots.leading?.()}\n              <div\n                class={['y-table__wrapper']}\n                style={{\n                  height: toStyleSizeValue(containerHeight),\n                }}\n                onScroll={onScroll}\n              >\n                <table ref={tableRef}>{slots.default()}</table>\n              </div>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(containerRef, containerRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n\nexport type YTable = InstanceType<typeof YTable>;\n"],"mappings":";AAAA,SAAwBA,OAAO,QAAQ,KAAK;AAAC,SAEpCC,SAAS;AAAA,SACTC,eAAe,EAAEC,YAAY;AAAA,SAC7BC,gBAAgB;AAAA,SAEhBC,cAAc;AAEvB;AAAuB,SACdC,kBAAkB;AAE3B,OAAO,MAAMC,gBAAgB,GAAGJ,YAAY,CAC1C;EACEK,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,CAAC;EACDI,QAAQ,EAAEC;AACZ,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMC,MAAM,GAAGjB,eAAe,CAAC;EACpCkB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGd,gBAAgB,CAAC;EACtB,CAAC;EACDe,KAAK,EAAE,CAAC,QAAQ,CAAC;EACjBC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEG,YAAY;MAAEC,QAAQ;MAAEC,aAAa;MAAEC,UAAU;MAAEC;IAAY,CAAC,GACtE1B,cAAc,CAAC,CAAC;IAElBL,OAAO,CAACM,kBAAkB,EAAE;MAAEuB,aAAa;MAAED,QAAQ;MAAEE,UAAU;MAAEC;IAAY,CAAC,CAAC;IAEjF,SAASd,QAAQA,CAACe,CAAQ,EAAE;MAC1BN,IAAI,CAAC,QAAQ,EAAEM,CAAC,CAAC;IACnB;IAEA/B,SAAS,CAAC,MAAM;MACd,MAAMgC,KAAK,GAAIZ,KAAK,CAACb,GAAG,IAAoC,KAAK;MACjE,MAAM0B,eAAe,GAAGb,KAAK,CAACL,UAAU,GACpCa,aAAa,CAACM,KAAK,EAAErB,MAAM,IAAIO,KAAK,CAACP,MAAM,GAC3CO,KAAK,CAACP,MAAM;MAChB,OAAAsB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEZ,KAAK,CAACT,SAAS;UACtC,uBAAuB,EAAES,KAAK,CAACL,UAAU,IAAIK,KAAK,CAACP,MAAM;UACzD,sBAAsB,EAAEO,KAAK,CAACL;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEZ,gBAAgB,CAC3CyB,aAAa,CAACM,KAAK,EAAEE,KACvB,CAAC;UACD,yBAAyB,EAAEjC,gBAAgB,CACzC2B,WAAW,CAACI,KAAK,EAAEE,KACrB;QACF;MAAC;QAAA1B,OAAA,EAAAA,CAAA,MAEAc,KAAK,CAACa,GAAG,GAAG,CAAC,EACbb,KAAK,CAACd,OAAO,GAAAyB,YAAA;UAAA,OACFT,YAAY;UAAA,SAAS,CAAC,oBAAoB;QAAC,IAClDF,KAAK,CAACc,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLtB,MAAM,EAAEV,gBAAgB,CAAC8B,eAAe;UAC1C,CAAC;UAAA,YACSjB;QAAQ,IAAAmB,YAAA;UAAA,OAENR;QAAQ,IAAGH,KAAK,CAACd,OAAO,CAAC,CAAC,MAEvCc,KAAK,CAACe,QAAQ,GAAG,CAAC,KAGrBf,KAAK,CAACgB,SAAS,GAAGd,YAAY,EAAEE,aAAa,CAC9C,EACAJ,KAAK,CAACiB,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/composables/header.js

@@ -0,0 +1,127 @@
+import { inject, provide, ref, watchEffect } from 'vue';
+import { getRangeArr } from "../../../util/common.js";
+import { propsFactory } from "../../../util/component/index.js";
+export const pressDataTableHeader = propsFactory({
+  headers: {
+    type: Array,
+    default: () => []
+  }
+}, 'YDataTable--header');
+export const Y_DATA_TABLE_HEADER_KEY = Symbol.for('yuyeon.data-table.header');
+export function createHeader(props, options) {
+  const headers = ref([]);
+  const columns = ref([]);
+  watchEffect(() => {
+    const rows = props.headers?.length ? [props.headers] : [];
+    const flat = rows.flatMap((row, index) => row.map(column => ({
+      column,
+      rowIndex: index
+    })));
+    const rowCount = rows.length;
+    const defaultHeader = {
+      text: '',
+      sortable: false
+    };
+    const defaultActionHeader = {
+      ...defaultHeader,
+      width: 48
+    };
+    if (options?.enableSelect?.value) {
+      const foundIndex = flat.findIndex(_ref => {
+        let {
+          column
+        } = _ref;
+        return column.key === 'data-table-select';
+      });
+      if (foundIndex < 0) {
+        const fixed = flat.some(_ref2 => {
+          let {
+            column
+          } = _ref2;
+          return column?.fixed === true || column?.fixed === 'left';
+        });
+        flat.unshift({
+          column: {
+            ...defaultActionHeader,
+            key: 'data-table-select',
+            rowspan: rowCount,
+            fixed
+          },
+          rowIndex: 0
+        });
+      } else {
+        flat.splice(foundIndex, 1, {
+          column: {
+            ...defaultActionHeader,
+            ...flat[foundIndex].column
+          },
+          rowIndex: flat[foundIndex].rowIndex
+        });
+      }
+    }
+    const fixedRows = getRangeArr(rowCount).map(() => []);
+    const fixedOffsets = getRangeArr(rowCount).fill(0);
+    flat.forEach(_ref3 => {
+      let {
+        column,
+        rowIndex
+      } = _ref3;
+      const {
+        key
+      } = column;
+      for (let i = rowIndex; i <= rowIndex + (column.rowspan ?? 1) - 1; i += 1) {
+        fixedRows[i].push({
+          ...column,
+          key,
+          fixedOffset: fixedOffsets[i],
+          sortable: column.sortable ?? !!key
+        });
+        fixedOffsets[i] += Number(column.width ?? 0);
+      }
+    });
+    fixedRows.forEach(row => {
+      for (let i = row.length - 1; i >= 0; i--) {
+        if (row[i].fixed === true || row[i].fixed === 'left') {
+          row[i].lastFixed = true;
+          break;
+        }
+      }
+      // fixed right
+      const rightFixed = row.filter(col => col.fixed === 'right');
+      let rightOffsets = 0;
+      for (let i = rightFixed.length - 1; i >= 0; i--) {
+        rightFixed[i].rightOffset = rightOffsets;
+        rightOffsets += Number(rightFixed[i].width ?? 0);
+        if (i === 0) {
+          rightFixed[i].lastFixed = true;
+        }
+      }
+    });
+    const seen = new Set();
+    headers.value = fixedRows.map(row => {
+      const filtered = [];
+      for (const column of row) {
+        if (!seen.has(column.key)) {
+          seen.add(column.key);
+          filtered.push(column);
+        }
+      }
+      return filtered;
+    });
+    columns.value = fixedRows[fixedRows.length - 1] || [];
+  });
+  const data = {
+    headers,
+    columns
+  };
+  provide(Y_DATA_TABLE_HEADER_KEY, data);
+  return data;
+}
+export function useHeader() {
+  const data = inject(Y_DATA_TABLE_HEADER_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_HEADER_KEY.description}`);
+  }
+  return data;
+}
+//# sourceMappingURL=header.js.map

package/lib/components/table/composables/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":["inject","provide","ref","watchEffect","getRangeArr","propsFactory","pressDataTableHeader","headers","type","Array","default","Y_DATA_TABLE_HEADER_KEY","Symbol","for","createHeader","props","options","columns","rows","length","flat","flatMap","row","index","map","column","rowIndex","rowCount","defaultHeader","text","sortable","defaultActionHeader","width","enableSelect","value","foundIndex","findIndex","_ref","key","fixed","some","_ref2","unshift","rowspan","splice","fixedRows","fixedOffsets","fill","forEach","_ref3","i","push","fixedOffset","Number","lastFixed","rightFixed","filter","col","rightOffsets","rightOffset","seen","Set","filtered","has","add","data","useHeader","Error","description"],"sources":["../../../../src/components/table/composables/header.ts"],"sourcesContent":["import {\r\n  type DeepReadonly,\r\n  type InjectionKey,\r\n  type PropType,\r\n  type Ref,\r\n  inject,\r\n  provide,\r\n  ref,\r\n  watchEffect,\r\n} from 'vue';\r\n\r\nimport { getRangeArr } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { type DataTableHeader, type InternalDataTableHeader } from '../types';\r\n\r\nexport const pressDataTableHeader = propsFactory(\r\n  {\r\n    headers: {\r\n      type: Array as PropType<DeepReadonly<DataTableHeader[]>>,\r\n      default: () => [],\r\n    },\r\n  },\r\n  'YDataTable--header',\r\n);\r\n\r\nexport const Y_DATA_TABLE_HEADER_KEY: InjectionKey<{\r\n  headers: Ref<InternalDataTableHeader[][]>;\r\n  columns: Ref<InternalDataTableHeader[]>;\r\n}> = Symbol.for('yuyeon.data-table.header');\r\n\r\ntype HeaderProps = {\r\n  headers: DeepReadonly<DataTableHeader[]> | undefined;\r\n};\r\n\r\nexport function createHeader(\r\n  props: HeaderProps,\r\n  options?: {\r\n    enableSelect?: Ref<boolean>;\r\n  },\r\n) {\r\n  const headers = ref<InternalDataTableHeader[][]>([]);\r\n  const columns = ref<InternalDataTableHeader[]>([]);\r\n\r\n  watchEffect(() => {\r\n    const rows = props.headers?.length\r\n      ? [props.headers as DataTableHeader[]]\r\n      : [];\r\n    const flat = rows.flatMap((row, index) =>\r\n      row.map((column) => ({ column, rowIndex: index })),\r\n    );\r\n    const rowCount = rows.length;\r\n    const defaultHeader = { text: '', sortable: false };\r\n    const defaultActionHeader = { ...defaultHeader, width: 48 };\r\n\r\n    if (options?.enableSelect?.value) {\r\n      const foundIndex = flat.findIndex(\r\n        ({ column }) => column.key === 'data-table-select',\r\n      );\r\n      if (foundIndex < 0) {\r\n        const fixed = flat.some(\r\n          ({ column }) => column?.fixed === true || column?.fixed === 'left',\r\n        );\r\n        flat.unshift({\r\n          column: {\r\n            ...defaultActionHeader,\r\n            key: 'data-table-select',\r\n            rowspan: rowCount,\r\n            fixed,\r\n          },\r\n          rowIndex: 0,\r\n        });\r\n      } else {\r\n        flat.splice(foundIndex, 1, {\r\n          column: {\r\n            ...defaultActionHeader,\r\n            ...flat[foundIndex].column,\r\n          },\r\n          rowIndex: flat[foundIndex].rowIndex,\r\n        });\r\n      }\r\n    }\r\n\r\n    const fixedRows: InternalDataTableHeader[][] = getRangeArr(rowCount).map(\r\n      () => [],\r\n    );\r\n    const fixedOffsets = getRangeArr(rowCount).fill(0);\r\n\r\n    flat.forEach(({ column, rowIndex }) => {\r\n      const { key } = column;\r\n      for (\r\n        let i = rowIndex;\r\n        i <= rowIndex + (column.rowspan ?? 1) - 1;\r\n        i += 1\r\n      ) {\r\n        fixedRows[i].push({\r\n          ...column,\r\n          key,\r\n          fixedOffset: fixedOffsets[i],\r\n          sortable: column.sortable ?? !!key,\r\n        });\r\n        fixedOffsets[i] += Number(column.width ?? 0);\r\n      }\r\n    });\r\n\r\n    fixedRows.forEach((row) => {\r\n      for (let i = row.length - 1; i >= 0; i--) {\r\n        if (row[i].fixed === true || row[i].fixed === 'left') {\r\n          row[i].lastFixed = true;\r\n          break;\r\n        }\r\n      }\r\n      // fixed right\r\n      const rightFixed = row.filter((col) => col.fixed === 'right');\r\n      let rightOffsets = 0;\r\n      for (let i = rightFixed.length - 1; i >= 0; i--) {\r\n        rightFixed[i].rightOffset = rightOffsets;\r\n        rightOffsets += Number(rightFixed[i].width ?? 0);\r\n        if (i === 0) {\r\n          rightFixed[i].lastFixed = true;\r\n        }\r\n      }\r\n    });\r\n\r\n    const seen = new Set();\r\n    headers.value = fixedRows.map((row) => {\r\n      const filtered = [];\r\n      for (const column of row) {\r\n        if (!seen.has(column.key)) {\r\n          seen.add(column.key);\r\n          filtered.push(column);\r\n        }\r\n      }\r\n      return filtered;\r\n    });\r\n    columns.value = (fixedRows[fixedRows.length - 1]) || [];\r\n  });\r\n\r\n  const data = { headers, columns };\r\n\r\n  provide(Y_DATA_TABLE_HEADER_KEY, data);\r\n\r\n  return data;\r\n}\r\n\r\nexport function useHeader() {\r\n  const data = inject(Y_DATA_TABLE_HEADER_KEY);\r\n  if (!data) {\r\n    throw new Error(`Not provided: ${Y_DATA_TABLE_HEADER_KEY.description}`);\r\n  }\r\n  return data;\r\n}\r\n"],"mappings":"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"}

package/lib/components/table/composables/items.js

@@ -0,0 +1,52 @@
+import { computed } from 'vue';
+import { getPropertyFromItem } from "../../../util/common.js";
+import { propsFactory } from "../../../util/component/index.js";
+export const pressDataTableItemsProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: [String, Array, Function],
+    default: 'id'
+  },
+  itemSelectable: {
+    type: [String, Array, Function],
+    default: null
+  },
+  returnItem: Boolean
+}, 'YDataTable--items');
+export function updateItem(props, item, index, columns) {
+  const key = getPropertyFromItem(item, props.itemKey);
+  const value = props.returnItem ? item : key;
+  let selectable;
+  if (typeof props.itemSelectable === 'function') {
+    selectable = !!props.itemSelectable(item);
+  } else {
+    selectable = getPropertyFromItem(item, props.itemSelectable, true);
+  }
+  const itemColumns = columns.reduce((acc, column) => {
+    acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);
+    return acc;
+  }, {});
+  return {
+    index,
+    key,
+    value,
+    selectable,
+    columns: itemColumns,
+    raw: item
+  };
+}
+export function updateItems(props, items, columns) {
+  return items.map((item, index) => updateItem(props, item, index, columns));
+}
+export function useItems(props, columns) {
+  const items = computed(() => {
+    return updateItems(props, props.items, columns.value);
+  });
+  return {
+    items
+  };
+}
+//# sourceMappingURL=items.js.map

package/lib/components/table/composables/items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.js","names":["computed","getPropertyFromItem","propsFactory","pressDataTableItemsProps","items","type","Array","default","itemKey","String","Function","itemSelectable","returnItem","Boolean","updateItem","props","item","index","columns","key","value","selectable","itemColumns","reduce","acc","column","raw","updateItems","map","useItems"],"sources":["../../../../src/components/table/composables/items.ts"],"sourcesContent":["import { type PropType, type Ref, computed } from 'vue';\r\n\r\nimport { getPropertyFromItem } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { DataTableItem, InternalDataTableHeader } from '../types';\r\n\r\nexport type DataTableItemsProps = {\r\n  items: any[];\r\n  itemKey: any;\r\n  itemSelectable: any;\r\n  returnItem: boolean;\r\n};\r\n\r\nexport const pressDataTableItemsProps = propsFactory(\r\n  {\r\n    items: {\r\n      type: Array as PropType<DataTableItemsProps['items']>,\r\n      default: () => [],\r\n    },\r\n    itemKey: {\r\n      type: [String, Array, Function] as PropType<any>,\r\n      default: 'id',\r\n    },\r\n    itemSelectable: {\r\n      type: [String, Array, Function] as PropType<any>,\r\n      default: null,\r\n    },\r\n    returnItem: Boolean,\r\n  },\r\n  'YDataTable--items',\r\n);\r\n\r\nexport function updateItem(\r\n  props: Omit<DataTableItemsProps, 'items'>,\r\n  item: any,\r\n  index: number,\r\n  columns: InternalDataTableHeader[],\r\n): DataTableItem {\r\n  const key = getPropertyFromItem(item, props.itemKey);\r\n  const value = props.returnItem ? item : key;\r\n  let selectable;\r\n  if (typeof props.itemSelectable === 'function') {\r\n    selectable = !!props.itemSelectable(item);\r\n  } else {\r\n    selectable = getPropertyFromItem(item, props.itemSelectable, true);\r\n  }\r\n\r\n  const itemColumns = columns.reduce(\r\n    (acc, column) => {\r\n      acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);\r\n      return acc;\r\n    },\r\n    {} as Record<string, unknown>,\r\n  );\r\n\r\n  return {\r\n    index,\r\n    key,\r\n    value,\r\n    selectable,\r\n    columns: itemColumns,\r\n    raw: item,\r\n  };\r\n}\r\n\r\nexport function updateItems(\r\n  props: Omit<DataTableItemsProps, 'items'>,\r\n  items: DataTableItemsProps['items'],\r\n  columns: InternalDataTableHeader[],\r\n): DataTableItem[] {\r\n  return items.map((item, index) => updateItem(props, item, index, columns));\r\n}\r\n\r\nexport function useItems(\r\n  props: DataTableItemsProps,\r\n  columns: Ref<InternalDataTableHeader[]>,\r\n) {\r\n  const items = computed(() => {\r\n    return updateItems(props, props.items, columns.value);\r\n  });\r\n  return { items };\r\n}\r\n"],"mappings":"AAAA,SAAkCA,QAAQ,QAAQ,KAAK;AAAC,SAE/CC,mBAAmB;AAAA,SACnBC,YAAY;AAWrB,OAAO,MAAMC,wBAAwB,GAAGD,YAAY,CAClD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAA+C;IACrDC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdN,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDK,UAAU,EAAEC;AACd,CAAC,EACD,mBACF,CAAC;AAED,OAAO,SAASC,UAAUA,CACxBC,KAAyC,EACzCC,IAAS,EACTC,KAAa,EACbC,OAAkC,EACnB;EACf,MAAMC,GAAG,GAAGlB,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACP,OAAO,CAAC;EACpD,MAAMY,KAAK,GAAGL,KAAK,CAACH,UAAU,GAAGI,IAAI,GAAGG,GAAG;EAC3C,IAAIE,UAAU;EACd,IAAI,OAAON,KAAK,CAACJ,cAAc,KAAK,UAAU,EAAE;IAC9CU,UAAU,GAAG,CAAC,CAACN,KAAK,CAACJ,cAAc,CAACK,IAAI,CAAC;EAC3C,CAAC,MAAM;IACLK,UAAU,GAAGpB,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACJ,cAAc,EAAE,IAAI,CAAC;EACpE;EAEA,MAAMW,WAAW,GAAGJ,OAAO,CAACK,MAAM,CAChC,CAACC,GAAG,EAAEC,MAAM,KAAK;IACfD,GAAG,CAACC,MAAM,CAACN,GAAG,CAAC,GAAGlB,mBAAmB,CAACe,IAAI,EAAES,MAAM,CAACL,KAAK,IAAIK,MAAM,CAACN,GAAG,CAAC;IACvE,OAAOK,GAAG;EACZ,CAAC,EACD,CAAC,CACH,CAAC;EAED,OAAO;IACLP,KAAK;IACLE,GAAG;IACHC,KAAK;IACLC,UAAU;IACVH,OAAO,EAAEI,WAAW;IACpBI,GAAG,EAAEV;EACP,CAAC;AACH;AAEA,OAAO,SAASW,WAAWA,CACzBZ,KAAyC,EACzCX,KAAmC,EACnCc,OAAkC,EACjB;EACjB,OAAOd,KAAK,CAACwB,GAAG,CAAC,CAACZ,IAAI,EAAEC,KAAK,KAAKH,UAAU,CAACC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;AAC5E;AAEA,OAAO,SAASW,QAAQA,CACtBd,KAA0B,EAC1BG,OAAuC,EACvC;EACA,MAAMd,KAAK,GAAGJ,QAAQ,CAAC,MAAM;IAC3B,OAAO2B,WAAW,CAACZ,KAAK,EAAEA,KAAK,CAACX,KAAK,EAAEc,OAAO,CAACE,KAAK,CAAC;EACvD,CAAC,CAAC;EACF,OAAO;IAAEhB;EAAM,CAAC;AAClB"}

package/lib/components/table/composables/measure.js

@@ -0,0 +1,55 @@
+import { ref, shallowRef, watch } from 'vue';
+import { useResizeObserver } from "../../../composables/resize-observer.js";
+import { debounce } from "../../../util/debounce.js";
+export function useRectMeasure() {
+  const tableRef = ref();
+  const wrapperRef = ref();
+  const containerRect = shallowRef();
+  const wrapperRect = shallowRef();
+  const tableRect = shallowRef();
+  const debounceMeasure = debounce(measure, 100);
+  const {
+    resizeObservedRef: containerRef
+  } = useResizeObserver(entries => {
+    debounceMeasure(entries);
+  });
+  function measure(entries) {
+    containerRect.value = entries?.[0]?.contentRect;
+    if (wrapperRef.value) {
+      const rect = wrapperRef.value.getBoundingClientRect();
+      if (rect) {
+        const obj = {};
+        for (const key in rect) {
+          if (typeof rect[key] !== "function") {
+            obj[key] = rect[key];
+          }
+        }
+        wrapperRect.value = {
+          ...obj,
+          clientWidth: wrapperRef.value?.clientWidth ?? 0
+        };
+      }
+    }
+    if (tableRef.value) {
+      const rect = tableRef.value?.getBoundingClientRect();
+      if (rect) {
+        tableRect.value = rect;
+      }
+    }
+  }
+  watch(tableRef, neo => {
+    if (neo) {
+      const el = containerRef.value;
+      wrapperRef.value = el.querySelector('.y-table__wrapper') || undefined;
+    }
+  });
+  return {
+    containerRef,
+    wrapperRef,
+    tableRef,
+    containerRect,
+    wrapperRect,
+    tableRect
+  };
+}
+//# sourceMappingURL=measure.js.map

package/lib/components/table/composables/measure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure.js","names":["ref","shallowRef","watch","useResizeObserver","debounce","useRectMeasure","tableRef","wrapperRef","containerRect","wrapperRect","tableRect","debounceMeasure","measure","resizeObservedRef","containerRef","entries","value","contentRect","rect","getBoundingClientRect","obj","key","clientWidth","neo","el","querySelector","undefined"],"sources":["../../../../src/components/table/composables/measure.ts"],"sourcesContent":["import { ref, shallowRef, watch } from 'vue';\n\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { debounce } from '@/util/debounce';\n\nexport function useRectMeasure() {\n  const tableRef = ref<HTMLTableElement>();\n  const wrapperRef = ref<HTMLElement>();\n\n  const containerRect = shallowRef<DOMRectReadOnly>();\n  const wrapperRect = shallowRef<DOMRectReadOnly>();\n  const tableRect = shallowRef<DOMRectReadOnly>();\n\n  const debounceMeasure = debounce(measure, 100);\n\n  const { resizeObservedRef: containerRef } = useResizeObserver((entries) => {\n    debounceMeasure(entries);\n  });\n\n  function measure(entries: any) {\n    containerRect.value = entries?.[0]?.contentRect;\n\n    if (wrapperRef.value) {\n      const rect = wrapperRef.value.getBoundingClientRect();\n\n      if (rect) {\n        const obj: any = {};\n        for (const key in rect) {\n          if (typeof rect[key as keyof DOMRect] !== \"function\") {\n            obj[key] = rect[key as keyof DOMRect];\n          }\n        }\n        wrapperRect.value = {\n          ...obj,\n          clientWidth: wrapperRef.value?.clientWidth ?? 0,\n        };\n      }\n\n    }\n\n    if (tableRef.value) {\n      const rect = tableRef.value?.getBoundingClientRect();\n      if (rect) {\n        tableRect.value = rect;\n      }\n    }\n  }\n\n  watch(tableRef, (neo) => {\n    if (neo) {\n      const el = containerRef.value!;\n      wrapperRef.value = el.querySelector('.y-table__wrapper') as HTMLElement || undefined;\n    }\n  })\n\n  return {\n    containerRef,\n    wrapperRef,\n    tableRef,\n    containerRect,\n    wrapperRect,\n    tableRect,\n  };\n}\n"],"mappings":"AAAA,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEpCC,iBAAiB;AAAA,SACjBC,QAAQ;AAEjB,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAMC,QAAQ,GAAGN,GAAG,CAAmB,CAAC;EACxC,MAAMO,UAAU,GAAGP,GAAG,CAAc,CAAC;EAErC,MAAMQ,aAAa,GAAGP,UAAU,CAAkB,CAAC;EACnD,MAAMQ,WAAW,GAAGR,UAAU,CAAkB,CAAC;EACjD,MAAMS,SAAS,GAAGT,UAAU,CAAkB,CAAC;EAE/C,MAAMU,eAAe,GAAGP,QAAQ,CAACQ,OAAO,EAAE,GAAG,CAAC;EAE9C,MAAM;IAAEC,iBAAiB,EAAEC;EAAa,CAAC,GAAGX,iBAAiB,CAAEY,OAAO,IAAK;IACzEJ,eAAe,CAACI,OAAO,CAAC;EAC1B,CAAC,CAAC;EAEF,SAASH,OAAOA,CAACG,OAAY,EAAE;IAC7BP,aAAa,CAACQ,KAAK,GAAGD,OAAO,GAAG,CAAC,CAAC,EAAEE,WAAW;IAE/C,IAAIV,UAAU,CAACS,KAAK,EAAE;MACpB,MAAME,IAAI,GAAGX,UAAU,CAACS,KAAK,CAACG,qBAAqB,CAAC,CAAC;MAErD,IAAID,IAAI,EAAE;QACR,MAAME,GAAQ,GAAG,CAAC,CAAC;QACnB,KAAK,MAAMC,GAAG,IAAIH,IAAI,EAAE;UACtB,IAAI,OAAOA,IAAI,CAACG,GAAG,CAAkB,KAAK,UAAU,EAAE;YACpDD,GAAG,CAACC,GAAG,CAAC,GAAGH,IAAI,CAACG,GAAG,CAAkB;UACvC;QACF;QACAZ,WAAW,CAACO,KAAK,GAAG;UAClB,GAAGI,GAAG;UACNE,WAAW,EAAEf,UAAU,CAACS,KAAK,EAAEM,WAAW,IAAI;QAChD,CAAC;MACH;IAEF;IAEA,IAAIhB,QAAQ,CAACU,KAAK,EAAE;MAClB,MAAME,IAAI,GAAGZ,QAAQ,CAACU,KAAK,EAAEG,qBAAqB,CAAC,CAAC;MACpD,IAAID,IAAI,EAAE;QACRR,SAAS,CAACM,KAAK,GAAGE,IAAI;MACxB;IACF;EACF;EAEAhB,KAAK,CAACI,QAAQ,EAAGiB,GAAG,IAAK;IACvB,IAAIA,GAAG,EAAE;MACP,MAAMC,EAAE,GAAGV,YAAY,CAACE,KAAM;MAC9BT,UAAU,CAACS,KAAK,GAAGQ,EAAE,CAACC,aAAa,CAAC,mBAAmB,CAAC,IAAmBC,SAAS;IACtF;EACF,CAAC,CAAC;EAEF,OAAO;IACLZ,YAAY;IACZP,UAAU;IACVD,QAAQ;IACRE,aAAa;IACbC,WAAW;IACXC;EACF,CAAC;AACH"}

package/lib/components/table/composables/options.js

@@ -0,0 +1,33 @@
+import { computed, watch } from 'vue';
+import { deepEqual } from "../../../util/common.js";
+export function useOptions(_ref, emit) {
+  let {
+    page,
+    pageSize,
+    sortBy,
+    search
+  } = _ref;
+  const options = computed(() => {
+    return {
+      page: page.value,
+      pageSize: pageSize.value,
+      sortBy: sortBy.value,
+      search: search.value
+    };
+  });
+  watch(() => search?.value, () => {
+    page.value = 1;
+  });
+  let optionsCache = null;
+  watch(options, () => {
+    if (deepEqual(optionsCache, options.value)) {
+      return;
+    }
+    emit('update:options', options.value);
+    optionsCache = options.value;
+  }, {
+    deep: true,
+    immediate: true
+  });
+}
+//# sourceMappingURL=options.js.map

package/lib/components/table/composables/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":["computed","watch","deepEqual","useOptions","_ref","emit","page","pageSize","sortBy","search","options","value","optionsCache","deep","immediate"],"sources":["../../../../src/components/table/composables/options.ts"],"sourcesContent":["import { type Ref, computed, watch } from 'vue';\r\n\r\nimport { deepEqual } from '@/util/common';\r\n\r\nimport { SortOption } from '../types';\r\n\r\ntype DataTableOptionsState = {\r\n  page: Ref<number>;\r\n  pageSize: Ref<number>;\r\n  sortBy: Ref<readonly SortOption[]>;\r\n  search: Ref<string | undefined>;\r\n};\r\n\r\nexport function useOptions(\r\n  { page, pageSize, sortBy, search }: DataTableOptionsState,\r\n  emit: Function,\r\n) {\r\n  const options = computed(() => {\r\n    return {\r\n      page: page.value,\r\n      pageSize: pageSize.value,\r\n      sortBy: sortBy.value,\r\n      search: search.value,\r\n    };\r\n  });\r\n\r\n  watch(\r\n    () => search?.value,\r\n    () => {\r\n      page.value = 1;\r\n    },\r\n  );\r\n\r\n  let optionsCache = null as unknown;\r\n\r\n  watch(\r\n    options,\r\n    () => {\r\n      if (deepEqual(optionsCache, options.value)) {\r\n        return;\r\n      }\r\n      emit('update:options', options.value);\r\n      optionsCache = options.value;\r\n    },\r\n    { deep: true, immediate: true },\r\n  );\r\n}\r\n"],"mappings":"AAAA,SAAmBA,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEvCC,SAAS;AAWlB,OAAO,SAASC,UAAUA,CAAAC,IAAA,EAExBC,IAAc,EACd;EAAA,IAFA;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAA8B,CAAC,GAAAL,IAAA;EAGzD,MAAMM,OAAO,GAAGV,QAAQ,CAAC,MAAM;IAC7B,OAAO;MACLM,IAAI,EAAEA,IAAI,CAACK,KAAK;MAChBJ,QAAQ,EAAEA,QAAQ,CAACI,KAAK;MACxBH,MAAM,EAAEA,MAAM,CAACG,KAAK;MACpBF,MAAM,EAAEA,MAAM,CAACE;IACjB,CAAC;EACH,CAAC,CAAC;EAEFV,KAAK,CACH,MAAMQ,MAAM,EAAEE,KAAK,EACnB,MAAM;IACJL,IAAI,CAACK,KAAK,GAAG,CAAC;EAChB,CACF,CAAC;EAED,IAAIC,YAAY,GAAG,IAAe;EAElCX,KAAK,CACHS,OAAO,EACP,MAAM;IACJ,IAAIR,SAAS,CAACU,YAAY,EAAEF,OAAO,CAACC,KAAK,CAAC,EAAE;MAC1C;IACF;IACAN,IAAI,CAAC,gBAAgB,EAAEK,OAAO,CAACC,KAAK,CAAC;IACrCC,YAAY,GAAGF,OAAO,CAACC,KAAK;EAC9B,CAAC,EACD;IAAEE,IAAI,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAChC,CAAC;AACH"}

package/lib/components/table/composables/pagination.js

@@ -0,0 +1,99 @@
+import { computed, inject, provide, watch } from 'vue';
+import { useModelDuplex } from "../../../composables/communication.js";
+import { clamp } from "../../../util/common.js";
+import { propsFactory } from "../../../util/component/index.js";
+export const Y_DATA_TABLE_PAGINATION_KEY = Symbol.for('yuyeon.data-table.pagination');
+export const pressDataTablePaginationProps = propsFactory({
+  page: {
+    type: [Number, String],
+    default: 1
+  },
+  pageSize: {
+    type: [Number, String],
+    default: 10
+  }
+}, 'YDataTable--pagination');
+export function createPagination(props) {
+  const page = useModelDuplex(props, 'page', undefined, value => +(value ?? 1));
+  const pageSize = useModelDuplex(props, 'pageSize', undefined, value => +(value ?? 10));
+  return {
+    page,
+    pageSize
+  };
+}
+export function providePagination(options) {
+  const {
+    page,
+    pageSize,
+    total
+  } = options;
+  const startIndex = computed(() => {
+    if (pageSize.value === -1) return 0;
+    return pageSize.value * (page.value - 1);
+  });
+  const endIndex = computed(() => {
+    if (pageSize.value === -1) return total.value;
+    return Math.min(total.value, startIndex.value + pageSize.value);
+  });
+  const pageLength = computed(() => {
+    if (pageSize.value === -1 || total.value === 0) return 1;
+    return Math.ceil(total.value / pageSize.value);
+  });
+  watch([page, pageLength], () => {
+    if (page.value > pageLength.value) {
+      page.value = pageLength.value;
+    }
+  });
+  function setPageSize(value, noReset) {
+    pageSize.value = value;
+    if (!noReset) {
+      page.value = 1;
+    }
+  }
+  function nextPage() {
+    page.value = clamp(page.value + 1, 1, pageLength.value);
+  }
+  function prevPage() {
+    page.value = clamp(page.value - 1, 1, pageLength.value);
+  }
+  function setPage(value) {
+    page.value = clamp(value, 1, pageLength.value);
+  }
+  const data = {
+    page,
+    pageSize,
+    startIndex,
+    endIndex,
+    pageLength,
+    total,
+    nextPage,
+    prevPage,
+    setPage,
+    setPageSize
+  };
+  provide(Y_DATA_TABLE_PAGINATION_KEY, data);
+  return data;
+}
+export function usePagination() {
+  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);
+  }
+  return data;
+}
+export function usePaginatedItems(options) {
+  const {
+    items,
+    startIndex,
+    endIndex,
+    pageSize
+  } = options;
+  const paginatedItems = computed(() => {
+    if (pageSize.value <= 0) return items.value;
+    return items.value.slice(startIndex.value, endIndex.value);
+  });
+  return {
+    paginatedItems
+  };
+}
+//# sourceMappingURL=pagination.js.map

package/lib/components/table/composables/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":["computed","inject","provide","watch","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","noReset","nextPage","prevPage","setPage","data","usePagination","Error","description","usePaginatedItems","items","paginatedItems","slice"],"sources":["../../../../src/components/table/composables/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\r\nimport { computed, inject, provide, watch } from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { clamp } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { DataTableProvidePaginationData } from '../types';\r\n\r\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\r\n  page: Ref<number>;\r\n  pageSize: Ref<number>;\r\n  startIndex: Ref<number>;\r\n  endIndex: Ref<number>;\r\n  pageLength: Ref<number>;\r\n  total: Ref<number>;\r\n  prevPage: () => void;\r\n  nextPage: () => void;\r\n  setPage: (page: number) => void;\r\n  setPageSize: (size: number) => void;\r\n}> = Symbol.for('yuyeon.data-table.pagination');\r\n\r\nexport const pressDataTablePaginationProps = propsFactory(\r\n  {\r\n    page: {\r\n      type: [Number, String] as PropType<number | string>,\r\n      default: 1,\r\n    },\r\n    pageSize: {\r\n      type: [Number, String] as PropType<number | string>,\r\n      default: 10,\r\n    },\r\n  },\r\n  'YDataTable--pagination',\r\n);\r\n\r\ntype PaginationProps = {\r\n  page: number | string;\r\n  'onUpdate:page': ((v: any) => void) | undefined;\r\n  pageSize: number | string;\r\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\r\n  total?: number | string;\r\n};\r\n\r\nexport function createPagination(props: PaginationProps) {\r\n  const page = useModelDuplex(\r\n    props,\r\n    'page',\r\n    undefined,\r\n    (value) => +(value ?? 1),\r\n  );\r\n  const pageSize = useModelDuplex(\r\n    props,\r\n    'pageSize',\r\n    undefined,\r\n    (value) => +(value ?? 10),\r\n  );\r\n  return { page, pageSize };\r\n}\r\n\r\nexport function providePagination(options: {\r\n  page: Ref<number>;\r\n  pageSize: Ref<number>;\r\n  total: Ref<number>;\r\n}) {\r\n  const { page, pageSize, total } = options;\r\n  const startIndex = computed(() => {\r\n    if (pageSize.value === -1) return 0;\r\n\r\n    return pageSize.value * (page.value - 1);\r\n  });\r\n\r\n  const endIndex = computed(() => {\r\n    if (pageSize.value === -1) return total.value;\r\n\r\n    return Math.min(total.value, startIndex.value + pageSize.value);\r\n  });\r\n\r\n  const pageLength = computed(() => {\r\n    if (pageSize.value === -1 || total.value === 0) return 1;\r\n\r\n    return Math.ceil(total.value / pageSize.value);\r\n  });\r\n\r\n  watch([page, pageLength], () => {\r\n    if (page.value > pageLength.value) {\r\n      page.value = pageLength.value;\r\n    }\r\n  });\r\n\r\n  function setPageSize(value: number, noReset?: boolean) {\r\n    pageSize.value = value;\r\n    if (!noReset) {\r\n      page.value = 1;\r\n    }\r\n  }\r\n\r\n  function nextPage() {\r\n    page.value = clamp(page.value + 1, 1, pageLength.value);\r\n  }\r\n\r\n  function prevPage() {\r\n    page.value = clamp(page.value - 1, 1, pageLength.value);\r\n  }\r\n\r\n  function setPage(value: number) {\r\n    page.value = clamp(value, 1, pageLength.value);\r\n  }\r\n\r\n  const data: DataTableProvidePaginationData = {\r\n    page,\r\n    pageSize,\r\n    startIndex,\r\n    endIndex,\r\n    pageLength,\r\n    total,\r\n    nextPage,\r\n    prevPage,\r\n    setPage,\r\n    setPageSize,\r\n  };\r\n\r\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\r\n\r\n  return data;\r\n}\r\n\r\nexport function usePagination() {\r\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\r\n  if (!data) {\r\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\r\n  }\r\n  return data;\r\n}\r\n\r\nexport function usePaginatedItems<T>(options: {\r\n  items: Ref<readonly T[]>;\r\n  startIndex: Ref<number>;\r\n  endIndex: Ref<number>;\r\n  pageSize: Ref<number>;\r\n}) {\r\n  const { items, startIndex, endIndex, pageSize } = options;\r\n  const paginatedItems = computed(() => {\r\n    if (pageSize.value <= 0) return items.value;\r\n\r\n    return items.value.slice(startIndex.value, endIndex.value);\r\n  });\r\n\r\n  return { paginatedItems };\r\n}\r\n"],"mappings":"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"}

package/lib/components/table/composables/provides.js

@@ -0,0 +1,3 @@
+export const YTableInjectionKey = Symbol.for('y-table');
+export const YDataTableInjectionKey = Symbol.for('y-data-table');
+//# sourceMappingURL=provides.js.map

package/lib/components/table/composables/provides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provides.js","names":["YTableInjectionKey","Symbol","for","YDataTableInjectionKey"],"sources":["../../../../src/components/table/composables/provides.ts"],"sourcesContent":["import { type InjectionKey, Ref, ShallowRef } from 'vue';\nimport type { InternalDataTableHeader } from '@/components/table/types';\nimport { createSorting } from '@/components/table/composables/sorting';\n\nexport const YTableInjectionKey: InjectionKey<{\n  tableRef: Ref<HTMLTableElement | undefined>\n  containerRect: ShallowRef<DOMRectReadOnly | undefined>\n  wrapperRef: Ref<HTMLElement | undefined>\n  wrapperRect: ShallowRef<DOMRectReadOnly | undefined>\n}> = Symbol.for('y-table');\n\nexport const YDataTableInjectionKey: InjectionKey<{\n  toggleSort: (column: InternalDataTableHeader) => void;\n  sortBy: ReturnType<typeof createSorting>['sortBy']\n  headRect: Ref<DOMRectReadOnly | undefined>\n}> =\n  Symbol.for('y-data-table');\n"],"mappings":"AAIA,OAAO,MAAMA,kBAKX,GAAGC,MAAM,CAACC,GAAG,CAAC,SAAS,CAAC;AAE1B,OAAO,MAAMC,sBAIX,GACAF,MAAM,CAACC,GAAG,CAAC,cAAc,CAAC"}