yuyeon 0.0.4 → 0.0.7

package/lib/components/pagination/YPagination.mjs

@@ -1,9 +1,14 @@
 import { createVNode as _createVNode } from "vue";
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, shallowRef } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
+import { useRefs } from "../../composables/ref.mjs";
 import { useResizeObserver } from "../../composables/resize-observer.mjs";
+import { getRangeArr } from "../../util/common.mjs";
+import { toStyleSizeValue } from "../../util/ui.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";
+import { YButton } from "../button/index.mjs";
+import { YIconPageControl } from "../icons/YIconPageControl.mjs";
 import "./YPagination.scss";
 export const pressYPaginationProps = propsFactory({
   start: {
@@ -21,41 +26,238 @@ export const pressYPaginationProps = propsFactory({
     validator: val => val % 1 === 0
   },
   totalVisible: [Number, String],
-  showEndButton: Boolean
+  showEndButton: Boolean,
+  gap: {
+    type: [String, Number],
+    default: 4
+  },
+  color: String,
+  activeColor: String,
+  firstIcon: String,
+  lastIcon: String,
+  prevIcon: String,
+  nextIcon: String
 }, 'y-pagination');
 export const YPagination = defineComponent({
   name: 'YPagination',
+  components: {
+    YButton
+  },
   props: {
     ...pressYPaginationProps()
   },
   emits: {
     'update:modelValue': value => true,
-    first: value => true,
-    last: value => true,
-    prev: value => true,
-    next: value => true
+    change: (value, control) => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const page = useModelDuplex(props);
     const length = computed(() => parseInt(props.length, 10));
     const start = computed(() => parseInt(props.start, 10));
+    const itemCount = shallowRef(-1);
     const {
       resizeObservedRef
     } = useResizeObserver(entries => {
       if (1 > entries.length) return;
+      const {
+        target,
+        contentRect
+      } = entries[0];
+      const firstItem = target.querySelector('.y-pagination__list > *');
+      if (firstItem) {
+        const listWidth = contentRect.width;
+        const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
+        itemCount.value = calcItemCount(listWidth, itemWidth);
+      }
+    });
+    function calcItemCount(listWidth, itemWidth) {
+      const fixedCount = props.showEndButton ? 5 : 3;
+      const fixedWidth = itemWidth * fixedCount;
+      const gap = +(props.gap ?? 4);
+      return Math.max(0, Math.floor(+((listWidth - fixedWidth - gap) / (itemWidth + gap)).toFixed(2)));
+    }
+    const totalVisible = computed(() => {
+      if (props.totalVisible) return parseInt(props.totalVisible, 10);else if (itemCount.value >= 0) return itemCount.value;
+      return calcItemCount(innerWidth, 58);
+    });
+    const controls = computed(() => {
+      const prevDisabled = !!props.disabled || page.value <= start.value;
+      const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
+      return {
+        first: {
+          disabled: prevDisabled,
+          onClick: e => {
+            e.preventDefault();
+            page.value = 1;
+            emit('change', 1, 'first');
+          }
+        },
+        prev: {
+          disabled: prevDisabled,
+          onClick: e => {
+            e.preventDefault();
+            const to = Math.max(1, page.value - 1);
+            page.value = to;
+            emit('change', to, 'prev');
+          }
+        },
+        next: {
+          disabled: nextDisabled,
+          onClick: e => {
+            e.preventDefault();
+            const to = Math.min(+length.value, page.value + 1);
+            page.value = to;
+            emit('change', to, 'next');
+          }
+        },
+        last: {
+          disabled: nextDisabled,
+          onClick: e => {
+            e.preventDefault();
+            const to = +length.value;
+            page.value = +length.value;
+            emit('change', to, 'last');
+          }
+        }
+      };
+    });
+    const range = computed(() => {
+      if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
+      if (totalVisible.value <= 1) return [page.value];
+      if (length.value <= totalVisible.value) {
+        return getRangeArr(length.value, start.value);
+      }
+      const even = totalVisible.value % 2 === 0;
+      const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
+      const left = even ? middle : middle + 1;
+      const right = length.value - middle;
+      if (left - page.value >= 0) {
+        return [...getRangeArr(Math.max(1, totalVisible.value - 1), start.value), 'ellipsis', length.value];
+      } else if (page.value - right >= (even ? 1 : 0)) {
+        const rangeLength = totalVisible.value - 1;
+        const rangeStart = length.value - rangeLength + start.value;
+        return [start.value, 'ellipsis', ...getRangeArr(rangeLength, rangeStart)];
+      } else {
+        const rangeLength = Math.max(1, totalVisible.value - 3);
+        const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
+        return [start.value, 'ellipsis', ...getRangeArr(rangeLength, rangeStart), 'ellipsis', length.value];
+      }
+    });
+    const {
+      refs,
+      updateRef
+    } = useRefs();
+    function changePage(event) {
+      let to = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      event.preventDefault();
+      page.value = to;
+      emit('change', to);
+    }
+    const items = computed(() => {
+      return range.value.map((item, index) => {
+        const ref = e => updateRef(e, index);
+        if (item === 'ellipsis') {
+          return {
+            active: false,
+            key: `ellipsis-${index}`,
+            page: item,
+            props: {
+              ref,
+              ellipsis: true,
+              disabled: true // TODO: skipper
+            }
+          };
+        } else {
+          const active = item === page.value;
+          return {
+            active,
+            key: `item-${item}`,
+            page: item,
+            props: {
+              ref,
+              ellipsis: false,
+              disabled: !!props.disabled || +props.length < 2,
+              color: active ? props.activeColor : props.color,
+              onClick: e => changePage(e, item)
+            }
+          };
+        }
+      });
+    });
+    const styles = computed(() => {
+      let gap = undefined;
+      if (props.gap) {
+        const value = +props.gap;
+        if (!isNaN(value)) {
+          gap = toStyleSizeValue(value);
+        } else if (typeof props.gap === 'string') {
+          gap = props.gap;
+        }
+      }
+      return {
+        '--y-pagination__gap': gap
+      };
     });
     useRender(() => {
       return _createVNode("div", {
         "class": ['y-pagination'],
         "role": 'navigation',
+        "style": styles.value,
         "ref": resizeObservedRef
       }, [_createVNode("ul", {
         "class": ['y-pagination__list']
-      }, [_createVNode("li", null, null)])]);
+      }, [props.showEndButton && _createVNode("li", {
+        "key": "first",
+        "class": "y-pagination__first"
+      }, [slots.first ? slots.first(controls.value.first) : _createVNode(YButton, controls.value.first, {
+        default: () => [_createVNode(YIconPageControl, {
+          "type": 'first',
+          "first": props.firstIcon
+        }, null)]
+      })]), _createVNode("li", {
+        "key": "prev",
+        "class": "y-pagination__prev"
+      }, [slots.prev ? slots.prev(controls.value.prev) : _createVNode(YButton, controls.value.prev, {
+        default: () => [_createVNode(YIconPageControl, {
+          "type": 'prev',
+          "prev": props.prevIcon
+        }, null)]
+      })]), items.value.map((item, index) => {
+        return _createVNode("li", {
+          "key": item.key,
+          "class": ['y-pagination__item', {
+            'y-pagination__item--active': item.active
+          }]
+        }, [_createVNode(YButton, item.props, {
+          default: () => [item.props.ellipsis ? '...' : item.page]
+        })]);
+      }), _createVNode("li", {
+        "key": "next",
+        "class": "y-pagination__next"
+      }, [slots.next ? slots.next(controls.value.next) : _createVNode(YButton, controls.value.next, {
+        default: () => [_createVNode(YIconPageControl, {
+          "type": 'next',
+          "next": props.nextIcon
+        }, null)]
+      })]), props.showEndButton && _createVNode("li", {
+        "key": "last",
+        "class": "y-pagination__last"
+      }, [slots.last ? slots.last(controls.value.last) : _createVNode(YButton, controls.value.last, {
+        default: () => [_createVNode(YIconPageControl, {
+          "type": 'last',
+          "last": props.lastIcon
+        }, null)]
+      })])])]);
     });
+    return {
+      itemCount,
+      page,
+      refs
+    };
   }
 });
 //# sourceMappingURL=YPagination.mjs.map

package/lib/components/pagination/YPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","useModelDuplex","useRender","useResizeObserver","propsFactory","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","YPagination","name","emits","value","first","last","prev","next","setup","_ref","slots","page","parseInt","resizeObservedRef","entries","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import { computed, defineComponent } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YPagination.scss';\n\nexport const pressYPaginationProps = propsFactory(\n  {\n    start: {\n      type: [Number, String],\n      default: 1,\n    },\n    modelValue: {\n      type: Number,\n      default: (props: any) => props.start as number,\n    },\n    disabled: Boolean,\n    length: {\n      type: [Number, String],\n      default: 1,\n      validator: (val: number) => val % 1 === 0,\n    },\n    totalVisible: [Number, String],\n    showEndButton: Boolean,\n  },\n  'y-pagination',\n);\n\nexport const YPagination = defineComponent({\n  name: 'YPagination',\n  props: {\n    ...pressYPaginationProps(),\n  },\n  emits: {\n    'update:modelValue': (value: number) => true,\n    first: (value: number) => true,\n    last: (value: number) => true,\n    prev: (value: number) => true,\n    next: (value: number) => true,\n  },\n  setup(props, { slots }) {\n    const page = useModelDuplex(props);\n\n    const length = computed(() => parseInt(props.length as string, 10));\n    const start = computed(() => parseInt(props.start as string, 10));\n\n    const { resizeObservedRef } = useResizeObserver((entries) => {\n      if (1 > entries.length) return;\n    });\n    useRender(() => {\n      return (\n        <div\n          class={['y-pagination']}\n          role={'navigation'}\n          ref={resizeObservedRef}\n        >\n          <ul class={['y-pagination__list']}>\n            <li></li>\n          </ul>\n        </div>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEvCC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,YAAY;AAErB;AAEA,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAC/C;EACEE,KAAK,EAAE;IACLC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EACDC,UAAU,EAAE;IACVJ,IAAI,EAAEC,MAAM;IACZE,OAAO,EAAGE,KAAU,IAAKA,KAAK,CAACN;EACjC,CAAC;EACDO,QAAQ,EAAEC,OAAO;EACjBC,MAAM,EAAE;IACNR,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE,CAAC;IACVM,SAAS,EAAGC,GAAW,IAAKA,GAAG,GAAG,CAAC,KAAK;EAC1C,CAAC;EACDC,YAAY,EAAE,CAACV,MAAM,EAAEC,MAAM,CAAC;EAC9BU,aAAa,EAAEL;AACjB,CAAC,EACD,cACF,CAAC;AAED,OAAO,MAAMM,WAAW,GAAGpB,eAAe,CAAC;EACzCqB,IAAI,EAAE,aAAa;EACnBT,KAAK,EAAE;IACL,GAAGP,qBAAqB,CAAC;EAC3B,CAAC;EACDiB,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAa,IAAK,IAAI;IAC5CC,KAAK,EAAGD,KAAa,IAAK,IAAI;IAC9BE,IAAI,EAAGF,KAAa,IAAK,IAAI;IAC7BG,IAAI,EAAGH,KAAa,IAAK,IAAI;IAC7BI,IAAI,EAAGJ,KAAa,IAAK;EAC3B,CAAC;EACDK,KAAKA,CAAChB,KAAK,EAAAiB,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,IAAI,GAAG9B,cAAc,CAACW,KAAK,CAAC;IAElC,MAAMG,MAAM,GAAGhB,QAAQ,CAAC,MAAMiC,QAAQ,CAACpB,KAAK,CAACG,MAAM,EAAY,EAAE,CAAC,CAAC;IACnE,MAAMT,KAAK,GAAGP,QAAQ,CAAC,MAAMiC,QAAQ,CAACpB,KAAK,CAACN,KAAK,EAAY,EAAE,CAAC,CAAC;IAEjE,MAAM;MAAE2B;IAAkB,CAAC,GAAG9B,iBAAiB,CAAE+B,OAAO,IAAK;MAC3D,IAAI,CAAC,GAAGA,OAAO,CAACnB,MAAM,EAAE;IAC1B,CAAC,CAAC;IACFb,SAAS,CAAC,MAAM;MACd,OAAAiC,YAAA;QAAA,SAEW,CAAC,cAAc,CAAC;QAAA,QACjB,YAAY;QAAA,OACbF;MAAiB,IAAAE,YAAA;QAAA,SAEX,CAAC,oBAAoB;MAAC,IAAAA,YAAA;IAKvC,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","firstIcon","lastIcon","prevIcon","nextIcon","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\r\n  ComponentPublicInstance,\r\n  computed,\r\n  defineComponent,\r\n  shallowRef,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { useRefs } from '../../composables/ref';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { getRangeArr } from '../../util/common';\r\nimport { toStyleSizeValue } from '../../util/ui';\r\nimport { propsFactory } from '../../util/vue-component';\r\nimport { YButton } from '../button';\r\nimport { YIconPageControl } from '../icons/YIconPageControl';\r\n\r\nimport './YPagination.scss';\r\n\r\nexport const pressYPaginationProps = propsFactory(\r\n  {\r\n    start: {\r\n      type: [Number, String],\r\n      default: 1,\r\n    },\r\n    modelValue: {\r\n      type: Number,\r\n      default: (props: any) => props.start as number,\r\n    },\r\n    disabled: Boolean,\r\n    length: {\r\n      type: [Number, String],\r\n      default: 1,\r\n      validator: (val: number) => val % 1 === 0,\r\n    },\r\n    totalVisible: [Number, String],\r\n    showEndButton: Boolean,\r\n    gap: {\r\n      type: [String, Number],\r\n      default: 4,\r\n    },\r\n    color: String,\r\n    activeColor: String,\r\n    firstIcon: String,\r\n    lastIcon: String,\r\n    prevIcon: String,\r\n    nextIcon: String,\r\n  },\r\n  'y-pagination',\r\n);\r\n\r\nexport const YPagination = defineComponent({\r\n  name: 'YPagination',\r\n  components: {\r\n    YButton,\r\n  },\r\n  props: {\r\n    ...pressYPaginationProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: number) => true,\r\n    change: (value: number, control?: string) => true,\r\n  },\r\n  setup(props, { slots, emit }) {\r\n    const page = useModelDuplex(props);\r\n\r\n    const length = computed(() => parseInt(props.length as string, 10));\r\n    const start = computed(() => parseInt(props.start as string, 10));\r\n\r\n    const itemCount = shallowRef(-1);\r\n\r\n    const { resizeObservedRef } = useResizeObserver((entries) => {\r\n      if (1 > entries.length) return;\r\n      const { target, contentRect } = entries[0];\r\n\r\n      const firstItem = target.querySelector(\r\n        '.y-pagination__list > *',\r\n      ) as HTMLElement;\r\n      if (firstItem) {\r\n        const listWidth = contentRect.width;\r\n        const itemWidth =\r\n          firstItem.offsetWidth +\r\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\r\n        itemCount.value = calcItemCount(listWidth, itemWidth);\r\n      }\r\n    });\r\n\r\n    function calcItemCount(listWidth: number, itemWidth: number) {\r\n      const fixedCount = props.showEndButton ? 5 : 3;\r\n      const fixedWidth = itemWidth * fixedCount;\r\n      const gap = +(props.gap ?? 4);\r\n      return Math.max(\r\n        0,\r\n        Math.floor(\r\n          +((listWidth - fixedWidth - gap) / (itemWidth + gap)).toFixed(2),\r\n        ),\r\n      );\r\n    }\r\n\r\n    const totalVisible = computed(() => {\r\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\r\n      else if (itemCount.value >= 0) return itemCount.value;\r\n      return calcItemCount(innerWidth, 58);\r\n    });\r\n\r\n    const controls = computed(() => {\r\n      const prevDisabled = !!props.disabled || page.value <= start.value;\r\n      const nextDisabled =\r\n        !!props.disabled || page.value >= start.value + length.value - 1;\r\n      return {\r\n        first: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            page.value = 1;\r\n            emit('change', 1, 'first');\r\n          },\r\n        },\r\n        prev: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.max(1, page.value - 1);\r\n            page.value = to;\r\n            emit('change', to, 'prev');\r\n          },\r\n        },\r\n        next: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.min(+length.value, page.value + 1);\r\n            page.value = to;\r\n            emit('change', to, 'next');\r\n          },\r\n        },\r\n        last: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = +length.value;\r\n            page.value = +length.value;\r\n            emit('change', to, 'last');\r\n          },\r\n        },\r\n      };\r\n    });\r\n\r\n    const range = computed(() => {\r\n      if (\r\n        length.value <= 0 ||\r\n        isNaN(length.value) ||\r\n        length.value > Number.MAX_SAFE_INTEGER\r\n      )\r\n        return [];\r\n      if (totalVisible.value <= 1) return [page.value];\r\n      if (length.value <= totalVisible.value) {\r\n        return getRangeArr(length.value, start.value);\r\n      }\r\n      const even = totalVisible.value % 2 === 0;\r\n      const middle = even\r\n        ? totalVisible.value / 2\r\n        : Math.floor(totalVisible.value / 2);\r\n      const left = even ? middle : middle + 1;\r\n      const right = length.value - middle;\r\n\r\n      if (left - page.value >= 0) {\r\n        return [\r\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      } else if (page.value - right >= (even ? 1 : 0)) {\r\n        const rangeLength = totalVisible.value - 1;\r\n        const rangeStart = length.value - rangeLength + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n        ];\r\n      } else {\r\n        const rangeLength = Math.max(1, totalVisible.value - 3);\r\n        const rangeStart =\r\n          rangeLength === 1\r\n            ? page.value\r\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      }\r\n    });\r\n\r\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\r\n\r\n    function changePage(event: Event, to = 1) {\r\n      event.preventDefault();\r\n      page.value = to;\r\n      emit('change', to);\r\n    }\r\n\r\n    const items = computed(() => {\r\n      return range.value.map((item, index) => {\r\n        const ref = (e: any) => updateRef(e, index);\r\n\r\n        if (item === 'ellipsis') {\r\n          return {\r\n            active: false,\r\n            key: `ellipsis-${index}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: true,\r\n              disabled: true, // TODO: skipper\r\n            },\r\n          };\r\n        } else {\r\n          const active = item === page.value;\r\n          return {\r\n            active,\r\n            key: `item-${item}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: false,\r\n              disabled: !!props.disabled || +props.length < 2,\r\n              color: active ? props.activeColor : props.color,\r\n              onClick: (e: MouseEvent) => changePage(e, item),\r\n            },\r\n          };\r\n        }\r\n      });\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let gap = undefined;\r\n      if (props.gap) {\r\n        const value = +props.gap;\r\n        if (!isNaN(value)) {\r\n          gap = toStyleSizeValue(value);\r\n        } else if (typeof props.gap === 'string') {\r\n          gap = props.gap;\r\n        }\r\n      }\r\n      return {\r\n        '--y-pagination__gap': gap,\r\n      };\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div\r\n          class={['y-pagination']}\r\n          role={'navigation'}\r\n          style={styles.value}\r\n          ref={resizeObservedRef}\r\n        >\r\n          <ul class={['y-pagination__list']}>\r\n            {props.showEndButton && (\r\n              <li key=\"first\" class=\"y-pagination__first\">\r\n                {slots.first ? (\r\n                  slots.first(controls.value.first)\r\n                ) : (\r\n                  <YButton {...controls.value.first}>\r\n                    <YIconPageControl type={'first'} first={props.firstIcon}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n            <li key=\"prev\" class=\"y-pagination__prev\">\r\n              {slots.prev ? (\r\n                slots.prev(controls.value.prev)\r\n              ) : (\r\n                <YButton {...controls.value.prev}>\r\n                  <YIconPageControl type={'prev'} prev={props.prevIcon}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {items.value.map((item, index) => {\r\n              return (\r\n                <li\r\n                  key={item.key}\r\n                  class={[\r\n                    'y-pagination__item',\r\n                    { 'y-pagination__item--active': item.active },\r\n                  ]}\r\n                >\r\n                  <YButton {...item.props}>\r\n                    {item.props.ellipsis ? '...' : item.page}\r\n                  </YButton>\r\n                </li>\r\n              );\r\n            })}\r\n            <li key=\"next\" class=\"y-pagination__next\">\r\n              {slots.next ? (\r\n                slots.next(controls.value.next)\r\n              ) : (\r\n                <YButton {...controls.value.next}>\r\n                  <YIconPageControl type={'next'} next={props.nextIcon}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {props.showEndButton && (\r\n              <li key=\"last\" class=\"y-pagination__last\">\r\n                {slots.last ? (\r\n                  slots.last(controls.value.last)\r\n                ) : (\r\n                  <YButton {...controls.value.last}>\r\n                    <YIconPageControl type={'last'} last={props.lastIcon}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n          </ul>\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      itemCount,\r\n      page,\r\n      refs,\r\n    };\r\n  },\r\n});\r\n"],"mappings":"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"}

package/lib/components/pagination/YPagination.scss

@@ -1,5 +1,42 @@
 .y-pagination {
+
+  &__list {
+    display: flex;
+    gap: var(--y-pagination__gap);
+  }
+
   li {
     list-style: none;
+
+    .y-button {
+      min-width: 2.2em;
+      min-height: 0;
+      padding: 4px;
+
+      &__content {
+        padding: 2px;
+      }
+
+      svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    .y-button.y-button--disabled {
+      background: rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  &__item {
+    &--active {
+      .y-button:before {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &__first, &__last, &__prev, &__next {
+
   }
 }

package/lib/components/table/YDataTable.mjs

@@ -7,7 +7,7 @@ import { YDataTableHead } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
 import { YTable } from "./YTable.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";
-import { pressDataTablePaginationProps } from "./pagination.mjs";
+import { createPagination, pressDataTablePaginationProps } from "./pagination.mjs";
 export const pressDataTableProps = propsFactory({
   width: [String, Number],
   search: String,
@@ -18,12 +18,26 @@ export const YDataTable = defineComponent({
   props: {
     ...pressDataTableProps()
   },
+  emits: {
+    'update:modelValue': value => true,
+    'update:page': value => true,
+    'update:pageSize': value => true,
+    'update:sortBy': value => true,
+    'update:options': value => true
+  },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
+    const {
+      page,
+      pageSize
+    } = createPagination(props);
     const slotProps = computed(() => {
-      return {};
+      return {
+        page: page.value,
+        pageSize: pageSize.value
+      };
     });
     useRender(() => {
       return _createVNode(YTable, {

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","useRender","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","propsFactory","pressDataTablePaginationProps","pressDataTableProps","width","String","Number","search","YDataTable","name","props","setup","_ref","slots","slotProps","_createVNode","default","top","value","leading","_Fragment","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { computed, defineComponent, PropType } from \"vue\";\n\nimport { useRender } from '../../composables/component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { propsFactory } from \"../../util/vue-component\";\nimport { pressDataTablePaginationProps } from \"./pagination\";\n\nexport const pressDataTableProps = propsFactory({\n  width: [String, Number] as PropType<string | number>,\n  search: String as PropType<string>,\n  ...pressDataTablePaginationProps(),\n}, 'YDataTable')\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTableProps(),\n  },\n  setup(props, { slots }) {\n    const slotProps = computed(() => {\n      return {};\n    });\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']} v-slots={slots}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead v-slots={slots}></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody v-slots={slots}></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 YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAkB,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,eAAe;AAAA,SACfC,MAAM;AAAA,SACNC,YAAY;AAAA,SACZC,6BAA6B;AAEtC,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9CG,KAAK,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;EACpDC,MAAM,EAAEF,MAA0B;EAClC,GAAGH,6BAA6B,CAAC;AACnC,CAAC,EAAE,YAAY,CAAC;AAEhB,OAAO,MAAMM,UAAU,GAAGd,eAAe,CAAC;EACxCe,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE;IACL,GAAGP,mBAAmB,CAAC;EACzB,CAAC;EACDQ,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,SAAS,GAAGrB,QAAQ,CAAC,MAAM;MAC/B,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACFE,SAAS,CAAC,MAAM;MACd,OAAAoB,YAAA,CAAAf,MAAA;QAAA,SACiB,CAAC,cAAc;MAAC;QAAAgB,OAAA,EAAAA,CAAA,MAC5B;UACCC,GAAG,EAAEA,CAAA,KAAMJ,KAAK,CAACI,GAAG,GAAGH,SAAS,CAACI,KAAK,CAAC;UACvCC,OAAO,EAAEA,CAAA,KACPN,KAAK,CAACM,OAAO,GACXN,KAAK,CAACM,OAAO,CAACL,SAAS,CAACI,KAAK,CAAC,GAAAH,YAAA,CAAAK,SAAA,SAAAL,YAAA,CAAAhB,eAAA,QAGFc,KAAK,GAElC;UACHG,OAAO,EAAEA,CAAA,KACPH,KAAK,CAACG,OAAO,GACXH,KAAK,CAACG,OAAO,CAACF,SAAS,CAACI,KAAK,CAAC,GAAAH,YAAA,CAAAK,SAAA,SAAAL,YAAA,iBAAAA,YAAA,CAAAjB,cAAA,QAIDe,KAAK,KAE/BA,KAAK,CAACQ,KAAK,GAAGP,SAAS,CAACI,KAAK,CAAC,EAAAH,YAAA,iBAAAA,YAAA,CAAAnB,cAAA,QAEJiB,KAAK,KAE/BA,KAAK,CAACS,KAAK,GAAGR,SAAS,CAACI,KAAK,CAAC,EAC9BL,KAAK,CAACU,KAAK,GAAGT,SAAS,CAACI,KAAK,CAAC,EAElC;UACHM,QAAQ,EAAEA,CAAA,KAAMX,KAAK,CAACW,QAAQ,GAAGV,SAAS,CAACI,KAAK,CAAC;UACjDO,MAAM,EAAEA,CAAA,KACNZ,KAAK,CAACY,MAAM,GACVZ,KAAK,CAACY,MAAM,CAACX,SAAS,CAACI,KAAK,CAAC,GAAAH,YAAA,CAAAlB,iBAAA,QAGlB;YACP6B,OAAO,EAAEb,KAAK,CAAC,iBAAiB;UAClC,CAAC;QAGT,CAAC;QAAA,GAtCuCA;MAAK;IAyCnD,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","useRender","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","propsFactory","createPagination","pressDataTablePaginationProps","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","setup","_ref","slots","page","pageSize","slotProps","_createVNode","default","top","leading","_Fragment","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { computed, defineComponent, PropType } from \"vue\";\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { YDataTableBody } from './YDataTableBody';\r\nimport { YDataTableControl } from './YDataTableControl';\r\nimport { YDataTableHead } from './YDataTableHead';\r\nimport { YDataTableLayer } from './YDataTableLayer';\r\nimport { YTable } from './YTable';\r\nimport { propsFactory } from \"../../util/vue-component\";\r\nimport {createPagination, pressDataTablePaginationProps} from \"./pagination\";\r\n\r\nexport const pressDataTableProps = propsFactory({\r\n  width: [String, Number] as PropType<string | number>,\r\n  search: String as PropType<string>,\r\n  ...pressDataTablePaginationProps(),\r\n}, 'YDataTable')\r\n\r\nexport const YDataTable = defineComponent({\r\n  name: 'YDataTable',\r\n  props: {\r\n    ...pressDataTableProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any[]) => true,\r\n    'update:page': (value: number) => true,\r\n    'update:pageSize': (value: number) => true,\r\n    'update:sortBy': (value: any) => true,\r\n    'update:options': (value: any) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n\r\n    const { page, pageSize } = createPagination(props as any);\r\n\r\n    const slotProps = computed(() => {\r\n      return {\r\n        page: page.value,\r\n        pageSize: pageSize.value,\r\n\r\n      };\r\n    });\r\n    useRender(() => {\r\n      return (\r\n        <YTable class={['y-data-table']} v-slots={slots}>\r\n          {{\r\n            top: () => slots.top?.(slotProps.value),\r\n            leading: () =>\r\n              slots.leading ? (\r\n                slots.leading(slotProps.value)\r\n              ) : (\r\n                <>\r\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\r\n                </>\r\n              ),\r\n            default: () =>\r\n              slots.default ? (\r\n                slots.default(slotProps.value)\r\n              ) : (\r\n                <>\r\n                  <thead>\r\n                    <YDataTableHead v-slots={slots}></YDataTableHead>\r\n                  </thead>\r\n                  {slots.thead?.(slotProps.value)}\r\n                  <tbody>\r\n                    <YDataTableBody v-slots={slots}></YDataTableBody>\r\n                  </tbody>\r\n                  {slots.tbody?.(slotProps.value)}\r\n                  {slots.tfoot?.(slotProps.value)}\r\n                </>\r\n              ),\r\n            trailing: () => slots.trailing?.(slotProps.value),\r\n            bottom: () =>\r\n              slots.bottom ? (\r\n                slots.bottom(slotProps.value)\r\n              ) : (\r\n                <YDataTableControl\r\n                  v-slots={{\r\n                    prepend: slots['control.prepend'],\r\n                  }}\r\n                ></YDataTableControl>\r\n              ),\r\n          }}\r\n        </YTable>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTable = InstanceType<typeof YDataTable>;\r\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAkB,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,eAAe;AAAA,SACfC,MAAM;AAAA,SACNC,YAAY;AAAA,SACbC,gBAAgB,EAAEC,6BAA6B;AAEvD,OAAO,MAAMC,mBAAmB,GAAGH,YAAY,CAAC;EAC9CI,KAAK,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;EACpDC,MAAM,EAAEF,MAA0B;EAClC,GAAGH,6BAA6B,CAAC;AACnC,CAAC,EAAE,YAAY,CAAC;AAEhB,OAAO,MAAMM,UAAU,GAAGf,eAAe,CAAC;EACxCgB,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE;IACL,GAAGP,mBAAmB,CAAC;EACzB,CAAC;EACDQ,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAY,IAAK,IAAI;IAC3C,aAAa,EAAGA,KAAa,IAAK,IAAI;IACtC,iBAAiB,EAAGA,KAAa,IAAK,IAAI;IAC1C,eAAe,EAAGA,KAAU,IAAK,IAAI;IACrC,gBAAgB,EAAGA,KAAU,IAAK;EACpC,CAAC;EACDC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IAEpB,MAAM;MAAEE,IAAI;MAAEC;IAAS,CAAC,GAAGhB,gBAAgB,CAACS,KAAY,CAAC;IAEzD,MAAMQ,SAAS,GAAG1B,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLwB,IAAI,EAAEA,IAAI,CAACJ,KAAK;QAChBK,QAAQ,EAAEA,QAAQ,CAACL;MAErB,CAAC;IACH,CAAC,CAAC;IACFlB,SAAS,CAAC,MAAM;MACd,OAAAyB,YAAA,CAAApB,MAAA;QAAA,SACiB,CAAC,cAAc;MAAC;QAAAqB,OAAA,EAAAA,CAAA,MAC5B;UACCC,GAAG,EAAEA,CAAA,KAAMN,KAAK,CAACM,GAAG,GAAGH,SAAS,CAACN,KAAK,CAAC;UACvCU,OAAO,EAAEA,CAAA,KACPP,KAAK,CAACO,OAAO,GACXP,KAAK,CAACO,OAAO,CAACJ,SAAS,CAACN,KAAK,CAAC,GAAAO,YAAA,CAAAI,SAAA,SAAAJ,YAAA,CAAArB,eAAA,QAGFiB,KAAK,GAElC;UACHK,OAAO,EAAEA,CAAA,KACPL,KAAK,CAACK,OAAO,GACXL,KAAK,CAACK,OAAO,CAACF,SAAS,CAACN,KAAK,CAAC,GAAAO,YAAA,CAAAI,SAAA,SAAAJ,YAAA,iBAAAA,YAAA,CAAAtB,cAAA,QAIDkB,KAAK,KAE/BA,KAAK,CAACS,KAAK,GAAGN,SAAS,CAACN,KAAK,CAAC,EAAAO,YAAA,iBAAAA,YAAA,CAAAxB,cAAA,QAEJoB,KAAK,KAE/BA,KAAK,CAACU,KAAK,GAAGP,SAAS,CAACN,KAAK,CAAC,EAC9BG,KAAK,CAACW,KAAK,GAAGR,SAAS,CAACN,KAAK,CAAC,EAElC;UACHe,QAAQ,EAAEA,CAAA,KAAMZ,KAAK,CAACY,QAAQ,GAAGT,SAAS,CAACN,KAAK,CAAC;UACjDgB,MAAM,EAAEA,CAAA,KACNb,KAAK,CAACa,MAAM,GACVb,KAAK,CAACa,MAAM,CAACV,SAAS,CAACN,KAAK,CAAC,GAAAO,YAAA,CAAAvB,iBAAA,QAGlB;YACPiC,OAAO,EAAEd,KAAK,CAAC,iBAAiB;UAClC,CAAC;QAGT,CAAC;QAAA,GAtCuCA;MAAK;IAyCnD,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableBody.mjs

@@ -1,11 +1,19 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 export const YDataTableBody = defineComponent({
   name: 'YDataTableBody',
-  setup() {
+  props: {
+    headers: {
+      type: [Array]
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     useRender(() => {
-      return _createVNode("div", null, null);
+      return _createVNode(_Fragment, null, [slots.body ? slots.body?.(props) : _createVNode("tr", null, null)]);
     });
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableBody.mjs","names":["defineComponent","useRender","YDataTableBody","name","setup","_createVNode"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nexport const YDataTableBody = defineComponent({\r\n  name: 'YDataTableBody',\r\n  setup() {\r\n    useRender(() => {\r\n      return <div></div>;\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,KAAKA,CAAA,EAAG;IACNH,SAAS,CAAC,MAAM;MACd,OAAAI,YAAA;IACF,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableBody.mjs","names":["defineComponent","useRender","YDataTableBody","name","props","headers","type","Array","setup","_ref","slots","_createVNode","_Fragment","body"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nexport const YDataTableBody = defineComponent({\r\n  name: 'YDataTableBody',\r\n  props: {\r\n    headers: {\r\n      type: [Array],\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    useRender(() => {\r\n      return <>{slots.body ? slots.body?.(props) : <tr></tr>}</>;\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAE,CAACC,KAAK;IACd;EACF,CAAC;EACDC,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBR,SAAS,CAAC,MAAM;MACd,OAAAU,YAAA,CAAAC,SAAA,SAAUF,KAAK,CAACG,IAAI,GAAGH,KAAK,CAACG,IAAI,GAAGT,KAAK,CAAC,GAAAO,YAAA,kBAAY;IACxD,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableHead.mjs

@@ -1,11 +1,19 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 export const YDataTableHead = defineComponent({
   name: 'YDataTableHead',
-  setup() {
+  props: {
+    headers: {
+      type: [Array]
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     useRender(() => {
-      return _createVNode("tr", null, null);
+      return _createVNode(_Fragment, null, [slots.head ? slots.head?.(props) : _createVNode("tr", null, null)]);
     });
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableHead.mjs","names":["defineComponent","useRender","YDataTableHead","name","setup","_createVNode"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nexport const YDataTableHead = defineComponent({\r\n  name: 'YDataTableHead',\r\n  setup() {\r\n    useRender(() => {\r\n      return <tr></tr>;\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,KAAKA,CAAA,EAAG;IACNH,SAAS,CAAC,MAAM;MACd,OAAAI,YAAA;IACF,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableHead.mjs","names":["defineComponent","useRender","YDataTableHead","name","props","headers","type","Array","setup","_ref","slots","_createVNode","_Fragment","head"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\n\nexport const YDataTableHead = defineComponent({\n  name: 'YDataTableHead',\n  props: {\n    headers: {\n      type: [Array],\n    },\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      return <>{slots.head ? slots.head?.(props) : <tr></tr>}</>;\n    });\n  },\n});\n\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAE,CAACC,KAAK;IACd;EACF,CAAC;EACDC,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBR,SAAS,CAAC,MAAM;MACd,OAAAU,YAAA,CAAAC,SAAA,SAAUF,KAAK,CAACG,IAAI,GAAGH,KAAK,CAACG,IAAI,GAAGT,KAAK,CAAC,GAAAO,YAAA,kBAAY;IACxD,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableServer.mjs

@@ -14,6 +14,9 @@ export const pressDataTableServerProps = propsFactory({
     type: [Number, String],
     required: true
   },
+  headers: {
+    type: [Array]
+  },
   ...pressDataTablePaginationProps(),
   ...pressDataTableProps()
 }, 'YDataTableServer');
@@ -42,7 +45,11 @@ export const YDataTableServer = defineComponent({
       }, {
         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, null, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, null, slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+        default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, {
+          "headers": props.headers
+        }, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, {
+          "headers": props.headers
+        }, slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
         trailing: () => slots.trailing?.(slotProps.value),
         bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(YDataTableControl, null, {
           prepend: slots['control.prepend']

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableServer.mjs","names":["computed","defineComponent","useRender","propsFactory","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","pressDataTablePaginationProps","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","setup","_ref","slots","slotProps","_createVNode","top","value","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { pressDataTableProps } from './YDataTable';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { pressDataTablePaginationProps } from './pagination';\n\nexport const pressDataTableServerProps = propsFactory(\n  {\n    total: {\n      type: [Number, String] as PropType<number | string>,\n      required: true,\n    },\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  'YDataTableServer',\n);\n\nexport const YDataTableServer = defineComponent({\n  name: 'YDataTableServer',\n  components: {\n    YTable,\n    YDataTableLayer,\n    YDataTableHead,\n    YDataTableBody,\n    YDataTableControl,\n  },\n  props: {\n    ...pressDataTableServerProps(),\n  },\n  setup(props, { slots }) {\n    const slotProps = computed(() => {\n      return {};\n    });\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead v-slots={slots}></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody v-slots={slots}></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n  },\n});\n\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,YAAY;AAAA,SACZC,mBAAmB;AAAA,SACnBC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,eAAe;AAAA,SACfC,MAAM;AAAA,SACNC,6BAA6B;AAEtC,OAAO,MAAMC,yBAAyB,GAAGR,YAAY,CACnD;EACES,KAAK,EAAE;IACLC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;IACnDC,QAAQ,EAAE;EACZ,CAAC;EACD,GAAGN,6BAA6B,CAAC,CAAC;EAClC,GAAGN,mBAAmB,CAAC;AACzB,CAAC,EACD,kBACF,CAAC;AAED,OAAO,MAAMa,gBAAgB,GAAGhB,eAAe,CAAC;EAC9CiB,IAAI,EAAE,kBAAkB;EACxBC,UAAU,EAAE;IACVV,MAAM;IACND,eAAe;IACfD,cAAc;IACdF,cAAc;IACdC;EACF,CAAC;EACDc,KAAK,EAAE;IACL,GAAGT,yBAAyB,CAAC;EAC/B,CAAC;EACDU,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,SAAS,GAAGxB,QAAQ,CAAC,MAAM;MAC/B,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACFE,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA,CAAAhB,MAAA;QAAA,SACiB,CAAC,cAAc;MAAC;QAE3BiB,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACG,GAAG,GAAGF,SAAS,CAACG,KAAK,CAAC;QACvCC,OAAO,EAAEA,CAAA,KACPL,KAAK,CAACK,OAAO,GACXL,KAAK,CAACK,OAAO,CAACJ,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,CAAAjB,eAAA,QAGFe,KAAK,GAElC;QACHO,OAAO,EAAEA,CAAA,KACPP,KAAK,CAACO,OAAO,GACXP,KAAK,CAACO,OAAO,CAACN,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,iBAAAA,YAAA,CAAAlB,cAAA,QAIDgB,KAAK,KAE/BA,KAAK,CAACQ,KAAK,GAAGP,SAAS,CAACG,KAAK,CAAC,EAAAF,YAAA,iBAAAA,YAAA,CAAApB,cAAA,QAEJkB,KAAK,KAE/BA,KAAK,CAACS,KAAK,GAAGR,SAAS,CAACG,KAAK,CAAC,EAC9BJ,KAAK,CAACU,KAAK,GAAGT,SAAS,CAACG,KAAK,CAAC,EAElC;QACHO,QAAQ,EAAEA,CAAA,KAAMX,KAAK,CAACW,QAAQ,GAAGV,SAAS,CAACG,KAAK,CAAC;QACjDQ,MAAM,EAAEA,CAAA,KACNZ,KAAK,CAACY,MAAM,GACVZ,KAAK,CAACY,MAAM,CAACX,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAnB,iBAAA,QAGlB;UACP8B,OAAO,EAAEb,KAAK,CAAC,iBAAiB;QAClC,CAAC;MAEJ;IAIX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableServer.mjs","names":["computed","defineComponent","useRender","propsFactory","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","pressDataTablePaginationProps","pressDataTableServerProps","total","type","Number","String","required","headers","Array","YDataTableServer","name","components","props","setup","_ref","slots","slotProps","_createVNode","top","value","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { pressDataTableProps } from './YDataTable';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { pressDataTablePaginationProps } from './pagination';\n\nexport const pressDataTableServerProps = propsFactory(\n  {\n    total: {\n      type: [Number, String] as PropType<number | string>,\n      required: true,\n    },\n    headers: {\n      type: [Array],\n    },\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  'YDataTableServer',\n);\n\nexport const YDataTableServer = defineComponent({\n  name: 'YDataTableServer',\n  components: {\n    YTable,\n    YDataTableLayer,\n    YDataTableHead,\n    YDataTableBody,\n    YDataTableControl,\n  },\n  props: {\n    ...pressDataTableServerProps(),\n  },\n  setup(props, { slots }) {\n    const slotProps = computed(() => {\n      return {};\n    });\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead v-slots={slots} headers={props.headers}></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody v-slots={slots} headers={props.headers}></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n  },\n});\n\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,YAAY;AAAA,SACZC,mBAAmB;AAAA,SACnBC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,eAAe;AAAA,SACfC,MAAM;AAAA,SACNC,6BAA6B;AAEtC,OAAO,MAAMC,yBAAyB,GAAGR,YAAY,CACnD;EACES,KAAK,EAAE;IACLC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAA8B;IACnDC,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPJ,IAAI,EAAE,CAACK,KAAK;EACd,CAAC;EACD,GAAGR,6BAA6B,CAAC,CAAC;EAClC,GAAGN,mBAAmB,CAAC;AACzB,CAAC,EACD,kBACF,CAAC;AAED,OAAO,MAAMe,gBAAgB,GAAGlB,eAAe,CAAC;EAC9CmB,IAAI,EAAE,kBAAkB;EACxBC,UAAU,EAAE;IACVZ,MAAM;IACND,eAAe;IACfD,cAAc;IACdF,cAAc;IACdC;EACF,CAAC;EACDgB,KAAK,EAAE;IACL,GAAGX,yBAAyB,CAAC;EAC/B,CAAC;EACDY,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,SAAS,GAAG1B,QAAQ,CAAC,MAAM;MAC/B,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACFE,SAAS,CAAC,MAAM;MACd,OAAAyB,YAAA,CAAAlB,MAAA;QAAA,SACiB,CAAC,cAAc;MAAC;QAE3BmB,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACG,GAAG,GAAGF,SAAS,CAACG,KAAK,CAAC;QACvCC,OAAO,EAAEA,CAAA,KACPL,KAAK,CAACK,OAAO,GACXL,KAAK,CAACK,OAAO,CAACJ,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,CAAAnB,eAAA,QAGFiB,KAAK,GAElC;QACHO,OAAO,EAAEA,CAAA,KACPP,KAAK,CAACO,OAAO,GACXP,KAAK,CAACO,OAAO,CAACN,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAAI,SAAA,SAAAJ,YAAA,iBAAAA,YAAA,CAAApB,cAAA;UAAA,WAIee,KAAK,CAACL;QAAO,GAA7BQ,KAAK,KAE/BA,KAAK,CAACQ,KAAK,GAAGP,SAAS,CAACG,KAAK,CAAC,EAAAF,YAAA,iBAAAA,YAAA,CAAAtB,cAAA;UAAA,WAEYiB,KAAK,CAACL;QAAO,GAA7BQ,KAAK,KAE/BA,KAAK,CAACS,KAAK,GAAGR,SAAS,CAACG,KAAK,CAAC,EAC9BJ,KAAK,CAACU,KAAK,GAAGT,SAAS,CAACG,KAAK,CAAC,EAElC;QACHO,QAAQ,EAAEA,CAAA,KAAMX,KAAK,CAACW,QAAQ,GAAGV,SAAS,CAACG,KAAK,CAAC;QACjDQ,MAAM,EAAEA,CAAA,KACNZ,KAAK,CAACY,MAAM,GACVZ,KAAK,CAACY,MAAM,CAACX,SAAS,CAACG,KAAK,CAAC,GAAAF,YAAA,CAAArB,iBAAA,QAGlB;UACPgC,OAAO,EAAEb,KAAK,CAAC,iBAAiB;QAClC,CAAC;MAEJ;IAIX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/tooltip/YTooltip.mjs

@@ -194,16 +194,14 @@ export const YTooltip = defineComponent({
         }
       })]);
     });
-    if (import.meta.env.DEV) {
-      return {
-        base$,
-        el$,
-        baseEl,
-        coordinatesStyles,
-        baseSlot,
-        active
-      };
-    }
+    return {
+      base$,
+      el$,
+      baseEl,
+      coordinatesStyles,
+      baseSlot,
+      active
+    };
   }
 });
 //# sourceMappingURL=YTooltip.mjs.map