yuyeon 0.0.32 → 0.0.34

package/lib/components/table/YDataTable.mjs

@@ -100,8 +100,8 @@ export const YDataTable = defineComponent({
       pageItems: items
     });
     const {
-      resizeObservedRef,
-      contentRect
+      resizeObservedRef: headObserveRef,
+      contentRect: headRect
     } = useResizeObserver();
     useOptions({
       page,
@@ -112,7 +112,7 @@ export const YDataTable = defineComponent({
     provide('y-data-table', {
       toggleSort,
       sortBy,
-      headRect: contentRect
+      headRect
     });
     const slotProps = computed(() => {
       return {
@@ -146,7 +146,7 @@ export const YDataTable = defineComponent({
         "class": ['y-data-table']
       }, yTableProps, {
         "style": {
-          '--y-table-head-height': toStyleSizeValue(contentRect.value?.height)
+          '--y-table-head-height': toStyleSizeValue(headRect.value?.height)
         }
       }), {
         top: () => slots.top?.(slotProps.value),
@@ -154,7 +154,7 @@ export const YDataTable = defineComponent({
           "slot-props": slotProps.value
         }, slots)]),
         default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", {
-          "ref": resizeObservedRef
+          "ref": headObserveRef
         }, [_createVNode(YDataTableHead, yDataTableHeadProps, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, _mergeProps(yDataTableBodyProps, {
           "items": paginatedItems.value
         }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","YDataTableBody","YDataTableControl","YDataTableHead","pressYDataTableHeadProps","YDataTableLayer","YTable","pressYTableProps","createHeader","pressDataTableHeader","pressDataTableItemsProps","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","usePaginatedItems","pressDataTableSelectionProps","provideSelection","createSorting","pressDataTableSortProps","provideSorting","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","columns","headers","enableSelect","items","toggleSort","total","length","startIndex","endIndex","pageLength","setPageSize","setPage","paginatedItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","resizeObservedRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend","append"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, toRef } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead, pressYDataTableHeadProps } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable, pressYTableProps } from './YTable';\nimport { createHeader, pressDataTableHeader } from './composibles/header';\nimport { pressDataTableItemsProps, useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n  usePaginatedItems,\n} from './composibles/pagination';\nimport {\n  pressDataTableSelectionProps,\n  provideSelection,\n} from './composibles/selection';\nimport {\n  createSorting,\n  pressDataTableSortProps,\n  provideSorting,\n} from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableProps = propsFactory(\n  {\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\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 { 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 total = computed(() => items.value.length);\n    const { startIndex, endIndex, pageLength, setPageSize, setPage } =\n      providePagination({\n        page,\n        pageSize,\n        total,\n      });\n    const { paginatedItems } = usePaginatedItems({\n      items,\n      startIndex,\n      endIndex,\n      pageSize,\n    });\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      someSelected,\n      allSelected,\n    } = provideSelection(props, { allItems: items, pageItems: items });\n    const { resizeObservedRef, contentRect } = useResizeObserver();\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: contentRect,\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    });\n    const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n    const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n    const yTableProps = chooseProps(props, YTable.props);\n    useRender(() => {\n      return (\n        <YTable\n          class={['y-data-table']}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(\n              contentRect.value?.height,\n            ),\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                    slot-props={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={resizeObservedRef}>\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={paginatedItems.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                    append: slots['control.append'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n    return { paginatedItems };\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEjEC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,WAAW,EAAEC,YAAY;AAAA,SACzBC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc,EAAEC,wBAAwB;AAAA,SACxCC,eAAe;AAAA,SACfC,MAAM,EAAEC,gBAAgB;AAAA,SACxBC,YAAY,EAAEC,oBAAoB;AAAA,SAClCC,wBAAwB,EAAEC,QAAQ;AAAA,SAClCC,UAAU;AAAA,SAEjBC,gBAAgB,EAChBC,6BAA6B,EAC7BC,iBAAiB,EACjBC,iBAAiB;AAAA,SAGjBC,4BAA4B,EAC5BC,gBAAgB;AAAA,SAGhBC,aAAa,EACbC,uBAAuB,EACvBC,cAAc;AAIhB,OAAO,MAAMC,mBAAmB,GAAGtB,YAAY,CAC7C;EACEuB,KAAK,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;EACpDC,MAAM,EAAEF,MAA0B;EAClC,GAAGf,oBAAoB,CAAC,CAAC;EACzB,GAAGC,wBAAwB,CAAC,CAAC;EAC7B,GAAGU,uBAAuB,CAAC,CAAC;EAC5B,GAAGH,4BAA4B,CAAC,CAAC;EACjC,GAAGb,wBAAwB,CAAC,CAAC;EAC7B,GAAGG,gBAAgB,CAAC;AACtB,CAAC,EACD,WACF,CAAC;AAED,OAAO,MAAMoB,UAAU,GAAGlC,eAAe,CAAC;EACxCmC,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE;IACL,GAAGf,6BAA6B,CAAC,CAAC;IAClC,GAAGQ,mBAAmB,CAAC;EACzB,CAAC;EACDQ,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAY,IAAK,IAAI;IAC3C,aAAa,EAAGC,IAAY,IAAK,IAAI;IACrC,iBAAiB,EAAGC,QAAgB,IAAK,IAAI;IAC7C,eAAe,EAAGC,MAAW,IAAK,IAAI;IACtC,gBAAgB,EAAGC,OAAY,IAAK,IAAI;IACxC,WAAW,EAAEC,CAACC,CAAQ,EAAEN,KAAmB,KAAK;EAClD,CAAC;EACDO,KAAKA,CAACT,KAAK,EAAAU,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEP,IAAI;MAAEC;IAAS,CAAC,GAAGpB,gBAAgB,CAACgB,KAAK,CAAC;IAClD,MAAM;MAAEK,MAAM;MAAEQ;IAAU,CAAC,GAAGvB,aAAa,CAACU,KAAK,CAAC;IAClD,MAAM;MAAEc,OAAO;MAAEC;IAAQ,CAAC,GAAGpC,YAAY,CAACqB,KAAK,EAAE;MAC/CgB,YAAY,EAAElD,KAAK,CAACkC,KAAK,EAAE,cAAc;IAC3C,CAAC,CAAC;IACF,MAAM;MAAEiB;IAAM,CAAC,GAAGnC,QAAQ,CAACkB,KAAK,EAAEc,OAAO,CAAC;IAE1C,MAAM;MAAEI;IAAW,CAAC,GAAG1B,cAAc,CAAC;MAAEa,MAAM;MAAEQ,SAAS;MAAEV;IAAK,CAAC,CAAC;IAClE,MAAMgB,KAAK,GAAGxD,QAAQ,CAAC,MAAMsD,KAAK,CAACf,KAAK,CAACkB,MAAM,CAAC;IAChD,MAAM;MAAEC,UAAU;MAAEC,QAAQ;MAAEC,UAAU;MAAEC,WAAW;MAAEC;IAAQ,CAAC,GAC9DvC,iBAAiB,CAAC;MAChBiB,IAAI;MACJC,QAAQ;MACRe;IACF,CAAC,CAAC;IACJ,MAAM;MAAEO;IAAe,CAAC,GAAGvC,iBAAiB,CAAC;MAC3C8B,KAAK;MACLI,UAAU;MACVC,QAAQ;MACRlB;IACF,CAAC,CAAC;IACF,MAAM;MACJuB,UAAU;MACVC,MAAM;MACNC,SAAS;MACTC,YAAY;MACZC,YAAY;MACZC;IACF,CAAC,GAAG3C,gBAAgB,CAACW,KAAK,EAAE;MAAEiC,QAAQ,EAAEhB,KAAK;MAAEiB,SAAS,EAAEjB;IAAM,CAAC,CAAC;IAClE,MAAM;MAAEkB,iBAAiB;MAAEC;IAAY,CAAC,GAAGpE,iBAAiB,CAAC,CAAC;IAC9De,UAAU,CACR;MACEoB,IAAI;MACJC,QAAQ;MACRP,MAAM,EAAE/B,KAAK,CAACkC,KAAK,EAAE,QAAQ,CAAC;MAC9BK;IACF,CAAC,EACDO,IACF,CAAC;IAED/C,OAAO,CAAC,cAAc,EAAE;MACtBqD,UAAU;MACVb,MAAM;MACNgC,QAAQ,EAAED;IACZ,CAAC,CAAC;IAEF,MAAME,SAAS,GAAG3E,QAAQ,CAAsB,MAAM;MACpD,OAAO;QACL;QACAwC,IAAI,EAAEA,IAAI,CAACD,KAAK;QAChBE,QAAQ,EAAEA,QAAQ,CAACF,KAAK;QACxBqB,UAAU,EAAEA,UAAU,CAACrB,KAAK;QAC5BsB,WAAW;QACXC,OAAO;QACP;QACApB,MAAM,EAAEA,MAAM,CAACH,KAAK;QACpBgB,UAAU;QACV;QACAa,YAAY,EAAEA,YAAY,CAAC7B,KAAK;QAChC8B,WAAW,EAAEA,WAAW,CAAC9B,KAAK;QAC9ByB,UAAU;QACVC,MAAM;QACNC,SAAS;QACTC,YAAY;QACZ;QACAb,KAAK,EAAEA,KAAK,CAACf,KAAK;QAClBY,OAAO,EAAEA,OAAO,CAACZ,KAAK;QACtBa,OAAO,EAAEA,OAAO,CAACb;MACnB,CAAC;IACH,CAAC,CAAC;IACF,MAAMqC,mBAAmB,GAAGrE,WAAW,CAAC8B,KAAK,EAAE1B,cAAc,CAAC0B,KAAK,CAAC;IACpE,MAAMwC,mBAAmB,GAAGtE,WAAW,CAAC8B,KAAK,EAAE5B,cAAc,CAAC4B,KAAK,CAAC;IACpE,MAAMyC,WAAW,GAAGvE,WAAW,CAAC8B,KAAK,EAAEvB,MAAM,CAACuB,KAAK,CAAC;IACpDjC,SAAS,CAAC,MAAM;MACd,OAAA2E,YAAA,CAAAjE,MAAA,EAAAkE,WAAA;QAAA,SAEW,CAAC,cAAc;MAAC,GACnBF,WAAW;QAAA,SACR;UACL,uBAAuB,EAAExE,gBAAgB,CACvCmE,WAAW,CAAClC,KAAK,EAAE0C,MACrB;QACF;MAAC;QAGCC,GAAG,EAAEA,CAAA,KAAMlC,KAAK,CAACkC,GAAG,GAAGP,SAAS,CAACpC,KAAK,CAAC;QACvC4C,OAAO,EAAEA,CAAA,KACPnC,KAAK,CAACmC,OAAO,GACXnC,KAAK,CAACmC,OAAO,CAACR,SAAS,CAACpC,KAAK,CAAC,GAAAwC,YAAA,CAAAK,SAAA,SAAAL,YAAA,CAAAlE,eAAA;UAAA,cAKd8D,SAAS,CAACpC;QAAK,GADlBS,KAAK,GAInB;QACHqC,OAAO,EAAEA,CAAA,KACPrC,KAAK,CAACqC,OAAO,GACXrC,KAAK,CAACqC,OAAO,CAACV,SAAS,CAACpC,KAAK,CAAC,GAAAwC,YAAA,CAAAK,SAAA,SAAAL,YAAA;UAAA,OAGhBP;QAAiB,IAAAO,YAAA,CAAApE,cAAA,EAGrBiE,mBAAmB,EADd5B,KAAK,KAIjBA,KAAK,CAACsC,KAAK,GAAGX,SAAS,CAACpC,KAAK,CAAC,EAAAwC,YAAA,iBAAAA,YAAA,CAAAtE,cAAA,EAAAuE,WAAA,CAIvBH,mBAAmB;UAAA,SAChBd,cAAc,CAACxB;QAAK,IAFlBS,KAAK,KAKjBA,KAAK,CAACuC,KAAK,GAAGZ,SAAS,CAACpC,KAAK,CAAC,EAC9BS,KAAK,CAACwC,KAAK,GAAGb,SAAS,CAACpC,KAAK,CAAC,EAElC;QACHkD,QAAQ,EAAEA,CAAA,KAAMzC,KAAK,CAACyC,QAAQ,GAAGd,SAAS,CAACpC,KAAK,CAAC;QACjDmD,MAAM,EAAEA,CAAA,KACN1C,KAAK,CAAC0C,MAAM,GACV1C,KAAK,CAAC0C,MAAM,CAACf,SAAS,CAACpC,KAAK,CAAC,GAAAwC,YAAA,CAAArE,iBAAA,QAGlB;UACPiF,OAAO,EAAE3C,KAAK,CAAC,iBAAiB,CAAC;UACjC4C,MAAM,EAAE5C,KAAK,CAAC,gBAAgB;QAChC,CAAC;MAEJ;IAIX,CAAC,CAAC;IACF,OAAO;MAAEe;IAAe,CAAC;EAC3B;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","YDataTableBody","YDataTableControl","YDataTableHead","pressYDataTableHeadProps","YDataTableLayer","YTable","pressYTableProps","createHeader","pressDataTableHeader","pressDataTableItemsProps","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","usePaginatedItems","pressDataTableSelectionProps","provideSelection","createSorting","pressDataTableSortProps","provideSorting","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","columns","headers","enableSelect","items","toggleSort","total","length","startIndex","endIndex","pageLength","setPageSize","setPage","paginatedItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","resizeObservedRef","headObserveRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend","append"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import {\n  PropType,\n  computed,\n  defineComponent,\n  provide,\n  toRef,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead, pressYDataTableHeadProps } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable, pressYTableProps } from './YTable';\nimport { createHeader, pressDataTableHeader } from './composibles/header';\nimport { pressDataTableItemsProps, useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n  usePaginatedItems,\n} from './composibles/pagination';\nimport {\n  pressDataTableSelectionProps,\n  provideSelection,\n} from './composibles/selection';\nimport {\n  createSorting,\n  pressDataTableSortProps,\n  provideSorting,\n} from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableProps = propsFactory(\n  {\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\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 { 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 total = computed(() => items.value.length);\n    const { startIndex, endIndex, pageLength, setPageSize, setPage } =\n      providePagination({\n        page,\n        pageSize,\n        total,\n      });\n    const { paginatedItems } = usePaginatedItems({\n      items,\n      startIndex,\n      endIndex,\n      pageSize,\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 { resizeObservedRef: headObserveRef, contentRect: headRect } =\n      useResizeObserver();\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    });\n    const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n    const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n    const yTableProps = chooseProps(props, YTable.props);\n    useRender(() => {\n      return (\n        <YTable\n          class={['y-data-table']}\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                    slot-props={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                      v-slots={slots}\n                      {...yDataTableBodyProps}\n                      items={paginatedItems.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                    append: slots['control.append'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n    return { paginatedItems };\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":"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"}

package/lib/components/table/YDataTableServer.mjs

@@ -2,6 +2,8 @@ import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirectiv
 import { toRef } from '@vue/runtime-core';
 import { computed, defineComponent, provide } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { useResizeObserver } from "../../composables/resize-observer.mjs";
+import { toStyleSizeValue } from "../../util/index.mjs";
 import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
 import { pressDataTableProps } from "./YDataTable.mjs";
 import { YDataTableBody } from "./YDataTableBody.mjs";
@@ -10,11 +12,11 @@ import { YDataTableHead } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
 import { YTable } from "./YTable.mjs";
 import { createHeader } from "./composibles/header.mjs";
+import { useItems } from "./composibles/items.mjs";
+import { useOptions } from "./composibles/options.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],
@@ -93,6 +95,10 @@ export const YDataTableServer = defineComponent({
       allItems: items,
       pageItems: items
     });
+    const {
+      resizeObservedRef: headObserveRef,
+      contentRect: headRect
+    } = useResizeObserver();
     useOptions({
       page,
       pageSize,
@@ -101,7 +107,8 @@ export const YDataTableServer = defineComponent({
     }, emit);
     provide('y-data-table', {
       toggleSort,
-      sortBy
+      sortBy,
+      headRect
     });
     const slotProps = computed(() => {
       return {
@@ -133,10 +140,16 @@ export const YDataTableServer = defineComponent({
       const yTableProps = chooseProps(props, YTable.props);
       return _createVNode(YTable, _mergeProps({
         "class": ['y-data-table']
-      }, yTableProps), {
+      }, yTableProps, {
+        "style": {
+          '--y-table-head-height': toStyleSizeValue(headRect.value?.height)
+        }
+      }), {
         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, yDataTableHeadProps, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, _mergeProps(yDataTableBodyProps, {
+        default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", {
+          "ref": headObserveRef
+        }, [_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),

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

@@ -1 +1 @@
-{"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","setPage","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, 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    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        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    });\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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"}
+{"version":3,"file":"YDataTableServer.mjs","names":["toRef","computed","defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","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","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","setPage","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","resizeObservedRef","headObserveRef","contentRect","headRect","search","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","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 { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\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 { 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 { 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 { resizeObservedRef: headObserveRef, contentRect: headRect } =\n      useResizeObserver();\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    });\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={['y-data-table']}\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 v-slots={slots}></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                      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

@@ -33,6 +33,10 @@ export const YTable = defineComponent({
       resizeObservedRef,
       contentRect
     } = useResizeObserver();
+    const {
+      resizeObservedRef: tableRef,
+      contentRect: tableRect
+    } = useResizeObserver();
     provide('YTable', {
       containerRect: contentRect
     });
@@ -44,15 +48,23 @@ export const YTable = defineComponent({
           'y-table--fixed-head': props.fixedHead,
           'y-table--fixed-height': props.flexHeight || props.height,
           'y-table--flex-height': props.flexHeight
-        }]
+        }],
+        "style": {
+          '--y-table-container-width': toStyleSizeValue(contentRect.value?.width),
+          '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width)
+        }
       }, {
         default: () => [slots.top?.(), slots.default ? _createVNode("div", {
           "class": ['y-table__container'],
-          "ref": resizeObservedRef,
+          "ref": resizeObservedRef
+        }, [slots.leading?.(), _createVNode("div", {
+          "class": ['y-table__wrapper'],
           "style": {
             height: toStyleSizeValue(containerHeight)
           }
-        }, [slots.leading?.(), _createVNode("table", null, [slots.default()]), slots.trailing?.()]) : slots.container?.(resizeObservedRef, contentRect), slots.bottom?.()]
+        }, [_createVNode("table", {
+          "ref": tableRef
+        }, [slots.default()])]), slots.trailing?.()]) : slots.container?.(resizeObservedRef, contentRect), slots.bottom?.()]
       });
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","containerRect","ElTag","containerHeight","value","_createVNode","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\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  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.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        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div\n              class={['y-table__container']}\n              ref={resizeObservedRef}\n              style={{\n                height: toStyleSizeValue(containerHeight),\n              }}\n            >\n              {slots.leading?.()}\n              <table>{slots.default()}</table>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,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,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,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;IAC9DF,OAAO,CAAC,QAAQ,EAAE;MAAEuB,aAAa,EAAED;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAMuB,KAAK,GAAIP,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMmB,eAAe,GAAGR,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACI,KAAK,EAAEd,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAe,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEP,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,CAACQ,GAAG,GAAG,CAAC,EACbR,KAAK,CAACX,OAAO,GAAAkB,YAAA;UAAA,SAEH,CAAC,oBAAoB,CAAC;UAAA,OACxBN,iBAAiB;UAAA,SACf;YACLT,MAAM,EAAET,gBAAgB,CAACsB,eAAe;UAC1C;QAAC,IAEAL,KAAK,CAACS,OAAO,GAAG,CAAC,EAAAF,YAAA,iBACVP,KAAK,CAACX,OAAO,CAAC,CAAC,IACtBW,KAAK,CAACU,QAAQ,GAAG,CAAC,KAGrBV,KAAK,CAACW,SAAS,GAAGV,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACY,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","tableRef","tableRect","containerRect","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\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  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    const { resizeObservedRef: tableRef, contentRect: tableRect } =\n      useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.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              contentRect.value?.width,\n            ),\n            '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width),\n          }}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div class={['y-table__container']} ref={resizeObservedRef}>\n              {slots.leading?.()}\n              <div\n                class={['y-table__wrapper']}\n                style={{\n                  height: toStyleSizeValue(containerHeight),\n                }}\n              >\n                <table ref={tableRef}>{slots.default()}</table>\n              </div>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,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,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,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;IAC9D,MAAM;MAAEmB,iBAAiB,EAAEE,QAAQ;MAAED,WAAW,EAAEE;IAAU,CAAC,GAC3DtB,iBAAiB,CAAC,CAAC;IACrBF,OAAO,CAAC,QAAQ,EAAE;MAAEyB,aAAa,EAAEH;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAMyB,KAAK,GAAIT,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMqB,eAAe,GAAGV,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACM,KAAK,EAAEhB,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAiB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAET,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEX,gBAAgB,CAC3CmB,WAAW,CAACM,KAAK,EAAEE,KACrB,CAAC;UACD,yBAAyB,EAAE3B,gBAAgB,CAACqB,SAAS,CAACI,KAAK,EAAEE,KAAK;QACpE;MAAC;QAAArB,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACW,GAAG,GAAG,CAAC,EACbX,KAAK,CAACX,OAAO,GAAAoB,YAAA;UAAA,SACA,CAAC,oBAAoB,CAAC;UAAA,OAAOR;QAAiB,IACvDD,KAAK,CAACY,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLjB,MAAM,EAAET,gBAAgB,CAACwB,eAAe;UAC1C;QAAC,IAAAE,YAAA;UAAA,OAEWN;QAAQ,IAAGH,KAAK,CAACX,OAAO,CAAC,CAAC,MAEvCW,KAAK,CAACa,QAAQ,GAAG,CAAC,KAGrBb,KAAK,CAACc,SAAS,GAAGb,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACe,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YTable.scss

@@ -8,7 +8,7 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
   display: flex;
   flex-direction: column;
 
-  &--fixed-height > &__container {
+  &--fixed-height &__container > &__wrapper {
     overflow-y: auto;
   }
 
@@ -19,24 +19,25 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
 
   &--flex-height > &__container {
     flex: 1 1;
+    min-height: 0;
   }
 
-  &__container > table {
+  &__wrapper > table {
     width: 100%;
     border-spacing: 0;
   }
 
-  &--fixed-head > &__container > table > thead > tr > th {
+  &--fixed-head &__container > &__wrapper > table > thead > tr > th {
     position: sticky;
     top: 0;
   }
 
-  &--fixed-head.y-table > &__container > table > thead > tr > th {
+  &--fixed-head.y-table &__container &__wrapper > table > thead > tr > th {
     z-index: 1;
     background: $table-head-background;
   }
 
-  .y-table__container {
+  .y-table__wrapper {
     > table {
       font-size: 0.875rem;
 
@@ -81,7 +82,6 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
       justify-content: flex-end;
     }
   }
-
 }
 
 .y-data-table-header {
@@ -127,6 +127,7 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
   overflow-y: clip;
   overflow-x: visible;
   z-index: 50;
+  margin-right: calc(100% - var(--y-table-wrapper-width, 100%));
 
   &__head {
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "keywords": [
     "UI Library",
     "Vue"