yuyeon 0.0.8 → 0.0.10

package/lib/components/button/YButton.scss

@@ -36,10 +36,9 @@ $button-disabled-background: #d3d3d3 !default;
     opacity: 0.06;
   }
 
-  &:not(&--disabled):not(&--outlined):not(&--loading):not(&--filled):not(
-      &--text
-    ):not(&--icon) {
+  & {
     box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.14);
+
     &:active {
       box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.24);
     }
@@ -50,11 +49,16 @@ $button-disabled-background: #d3d3d3 !default;
     color: #ffffff;
   }
 
-  &:not(&--outlined):disabled,
-  &--disabled:not(&--outlined) {
+  &--text {
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &--disabled {
     background-color: $button-disabled-background;
     opacity: 0.4;
     cursor: default;
+    box-shadow: none;
   }
 
   &--rounded {
@@ -62,10 +66,11 @@ $button-disabled-background: #d3d3d3 !default;
   }
 
   &--outlined {
-    color: rgba(var(--y-button__color), 1);
+    //color: rgba(var(--y-button__color), 1);
     border-width: 1px;
     border-style: solid;
     border-color: currentColor;
+    box-shadow: none;
   }
 
   &--color:not(&--filled) {
@@ -74,6 +79,8 @@ $button-disabled-background: #d3d3d3 !default;
 
   &--loading {
     cursor: wait;
+    box-shadow: none;
+
     .y-spinner-ring {
       margin-right: 0.4em;
     }

package/lib/components/icons/YIconCheckbox.mjs

@@ -5,13 +5,15 @@ export const YIconCheckbox = defineComponent({
   name: 'YIconCheckbox',
   props: {
     checked: Boolean,
-    immediate: Boolean
+    indeterminate: Boolean,
+    disabled: Boolean
   },
   render() {
     return _createVNode("svg", {
       "class": ['y-icon-checkbox', {
         'y-icon-checkbox--checked': this.checked,
-        'y-icon-checkbox--immediate': this.immediate
+        'y-icon-checkbox--indeterminate': this.indeterminate,
+        'y-icon-checkbox--disabled': this.disabled
       }],
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "24",
@@ -23,7 +25,7 @@ export const YIconCheckbox = defineComponent({
     }, null), _createVNode("path", {
       "class": "y-icon-checkbox__checkmark-path",
       "fill": "none",
-      "d": "M5.73,11.91 11.1,16.28 17.79,7.59"
+      "d": this.indeterminate ? 'M5.73,11.91 11.1,11.91 17.79,11.91' : 'M5.73,11.91 11.1,16.28 17.79,7.59'
     }, null)]);
   }
 });

package/lib/components/icons/YIconCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YIconCheckbox.mjs","names":["defineComponent","YIconCheckbox","name","props","checked","Boolean","immediate","render","_createVNode"],"sources":["../../../src/components/icons/YIconCheckbox.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport './YIconCheckbox.scss';\n\nexport const YIconCheckbox = defineComponent({\n  name: 'YIconCheckbox',\n  props: {\n    checked: Boolean,\n    immediate: Boolean,\n  },\n  render() {\n    return (\n      <svg\n        class={[\n          'y-icon-checkbox',\n          {\n            'y-icon-checkbox--checked': this.checked,\n            'y-icon-checkbox--immediate': this.immediate,\n          },\n        ]}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          class=\"y-icon-checkbox__border-path\"\n          d=\"M 15.525 21.825 H 8.325 C 4.851 21.825 2.025 18.999 2.025 15.525 V 8.325 C 2.025 4.851 4.851 2.025 8.325 2.025 H 15.525 C 18.999 2.025 21.825 4.851 21.825 8.325 V 15.525 C 21.825 18.999 18.999 21.825 15.525 21.825 Z\"\n        />\n        <path\n          class=\"y-icon-checkbox__checkmark-path\"\n          fill=\"none\"\n          d=\"M5.73,11.91 11.1,16.28 17.79,7.59\"\n        ></path>\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAErC;AAEA,OAAO,MAAMC,aAAa,GAAGD,eAAe,CAAC;EAC3CE,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE;IACLC,OAAO,EAAEC,OAAO;IAChBC,SAAS,EAAED;EACb,CAAC;EACDE,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,SAEW,CACL,iBAAiB,EACjB;QACE,0BAA0B,EAAE,IAAI,CAACJ,OAAO;QACxC,4BAA4B,EAAE,IAAI,CAACE;MACrC,CAAC,CACF;MAAA,SACK,4BAA4B;MAAA,SAC5B,IAAI;MAAA,UACH,IAAI;MAAA,WACH;IAAW,IAAAE,YAAA;MAAA,SAGX,8BAA8B;MAAA,KAClC;IAAyN,UAAAA,YAAA;MAAA,SAGrN,iCAAiC;MAAA,QAClC,MAAM;MAAA,KACT;IAAmC;EAI7C;AACF,CAAC,CAAC"}
+{"version":3,"file":"YIconCheckbox.mjs","names":["defineComponent","YIconCheckbox","name","props","checked","Boolean","indeterminate","disabled","render","_createVNode"],"sources":["../../../src/components/icons/YIconCheckbox.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport './YIconCheckbox.scss';\n\nexport const YIconCheckbox = defineComponent({\n  name: 'YIconCheckbox',\n  props: {\n    checked: Boolean,\n    indeterminate: Boolean,\n    disabled: Boolean,\n  },\n  render() {\n    return (\n      <svg\n        class={[\n          'y-icon-checkbox',\n          {\n            'y-icon-checkbox--checked': this.checked,\n            'y-icon-checkbox--indeterminate': this.indeterminate,\n            'y-icon-checkbox--disabled': this.disabled,\n          },\n        ]}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          class=\"y-icon-checkbox__border-path\"\n          d=\"M 15.525 21.825 H 8.325 C 4.851 21.825 2.025 18.999 2.025 15.525 V 8.325 C 2.025 4.851 4.851 2.025 8.325 2.025 H 15.525 C 18.999 2.025 21.825 4.851 21.825 8.325 V 15.525 C 21.825 18.999 18.999 21.825 15.525 21.825 Z\"\n        />\n        <path\n          class=\"y-icon-checkbox__checkmark-path\"\n          fill=\"none\"\n          d={\n            this.indeterminate\n              ? 'M5.73,11.91 11.1,11.91 17.79,11.91'\n              : 'M5.73,11.91 11.1,16.28 17.79,7.59'\n          }\n        ></path>\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAErC;AAEA,OAAO,MAAMC,aAAa,GAAGD,eAAe,CAAC;EAC3CE,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE;IACLC,OAAO,EAAEC,OAAO;IAChBC,aAAa,EAAED,OAAO;IACtBE,QAAQ,EAAEF;EACZ,CAAC;EACDG,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,SAEW,CACL,iBAAiB,EACjB;QACE,0BAA0B,EAAE,IAAI,CAACL,OAAO;QACxC,gCAAgC,EAAE,IAAI,CAACE,aAAa;QACpD,2BAA2B,EAAE,IAAI,CAACC;MACpC,CAAC,CACF;MAAA,SACK,4BAA4B;MAAA,SAC5B,IAAI;MAAA,UACH,IAAI;MAAA,WACH;IAAW,IAAAE,YAAA;MAAA,SAGX,8BAA8B;MAAA,KAClC;IAAyN,UAAAA,YAAA;MAAA,SAGrN,iCAAiC;MAAA,QAClC,MAAM;MAAA,KAET,IAAI,CAACH,aAAa,GACd,oCAAoC,GACpC;IAAmC;EAKjD;AACF,CAAC,CAAC"}

package/lib/components/icons/YIconCheckbox.scss

@@ -21,6 +21,7 @@
 
   &--checked & {
     &__checkmark-path {
+      d: path('M5.73,11.91 11.1,16.28 17.79,7.59');
       stroke-dashoffset: 0;
       transition: stroke-dashoffset 120ms 140ms cubic-bezier(0.4, 0, 0.6, 1);
     }
@@ -31,4 +32,29 @@
       transition: fill 200ms ease-in;
     }
   }
+
+  &--indeterminate & {
+    &__checkmark-path {
+      d: path('M5.73,11.91 11.1,11.91 17.79,11.91');
+      stroke: #ffffff;
+      stroke-width: 2;
+      stroke-dashoffset: 0;
+      transition: 0.2s cubic-bezier(0.56, 0.14, 0.49, 0.88);
+    }
+
+    &__border-path {
+      fill: rgb(var(--y-icon-checkbox__color));
+      stroke: rgba(var(--y-icon-checkbox__color), 0.8);
+      transition: fill 200ms ease-in;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    filter: grayscale(0.4);
+  }
+
+  &--disabled &__checkmark-path {
+    fill: rgba(var(--y-icon-checkbox__color), 0.1);
+  }
 }

package/lib/components/icons/YIconPageControl.mjs

@@ -12,11 +12,7 @@ export const YIconPageControl = defineComponent({
     type: {
       type: String,
       default: 'next'
-    },
-    next: String,
-    prev: String,
-    last: String,
-    first: String
+    }
   },
   render() {
     return _createVNode("svg", {

package/lib/components/icons/YIconPageControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YIconPageControl.mjs","names":["defineComponent","PageControlPaths","next","prev","last","first","YIconPageControl","name","props","type","String","default","render","_createVNode","$props"],"sources":["../../../src/components/icons/YIconPageControl.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nexport const PageControlPaths = {\n  next: 'm12.18 23.585 7.6399-7.5489-7.4693-7.622',\n  prev: 'm19.82 23.585-7.6399-7.5489 7.4693-7.622',\n  last: 'm10.488 23.812 7.4981-7.7457-7.3307-7.8207m0 0zm10.856-0.075007v15.659',\n  first: 'm21.512 23.812-7.4981-7.7457 7.3307-7.8207m0 0zm-10.856-0.075007v15.659',\n};\n\nexport const YIconPageControl = defineComponent({\n  name: 'YIconPageControl',\n  props: {\n    type: {\n      type: String as PropType<'next' | 'prev' | 'first' | 'last'>,\n      default: 'next',\n    },\n    next: String,\n    prev: String,\n    last: String,\n    first: String,\n  },\n  render() {\n    return (\n      <svg version=\"1.1\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d={\n            this.$props.type in PageControlPaths\n              ? PageControlPaths[this.$props.type]\n              : PageControlPaths.next\n          }\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"3\"\n        />\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAE/C,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,IAAI,EAAE,0CAA0C;EAChDC,IAAI,EAAE,0CAA0C;EAChDC,IAAI,EAAE,wEAAwE;EAC9EC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGN,eAAe,CAAC;EAC9CO,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAsD;MAC5DC,OAAO,EAAE;IACX,CAAC;IACDT,IAAI,EAAEQ,MAAM;IACZP,IAAI,EAAEO,MAAM;IACZN,IAAI,EAAEM,MAAM;IACZL,KAAK,EAAEK;EACT,CAAC;EACDE,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,WACe,KAAK;MAAA,WAAS,WAAW;MAAA,SAAO;IAA4B,IAAAA,YAAA;MAAA,KAGnE,IAAI,CAACC,MAAM,CAACL,IAAI,IAAIR,gBAAgB,GAChCA,gBAAgB,CAAC,IAAI,CAACa,MAAM,CAACL,IAAI,CAAC,GAClCR,gBAAgB,CAACC,IAAI;MAAA,QAEtB,MAAM;MAAA,UACJ,cAAc;MAAA,kBACN,OAAO;MAAA,mBACN,OAAO;MAAA,gBACV;IAAG;EAIxB;AACF,CAAC,CAAC"}
+{"version":3,"file":"YIconPageControl.mjs","names":["defineComponent","PageControlPaths","next","prev","last","first","YIconPageControl","name","props","type","String","default","render","_createVNode","$props"],"sources":["../../../src/components/icons/YIconPageControl.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nexport const PageControlPaths = {\n  next: 'm12.18 23.585 7.6399-7.5489-7.4693-7.622',\n  prev: 'm19.82 23.585-7.6399-7.5489 7.4693-7.622',\n  last: 'm10.488 23.812 7.4981-7.7457-7.3307-7.8207m0 0zm10.856-0.075007v15.659',\n  first: 'm21.512 23.812-7.4981-7.7457 7.3307-7.8207m0 0zm-10.856-0.075007v15.659',\n};\n\nexport const YIconPageControl = defineComponent({\n  name: 'YIconPageControl',\n  props: {\n    type: {\n      type: String as PropType<'next' | 'prev' | 'first' | 'last'>,\n      default: 'next',\n    },\n  },\n  render() {\n    return (\n      <svg version=\"1.1\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d={\n            this.$props.type in PageControlPaths\n              ? PageControlPaths[this.$props.type]\n              : PageControlPaths.next\n          }\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"3\"\n        />\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAE/C,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,IAAI,EAAE,0CAA0C;EAChDC,IAAI,EAAE,0CAA0C;EAChDC,IAAI,EAAE,wEAAwE;EAC9EC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGN,eAAe,CAAC;EAC9CO,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAsD;MAC5DC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,WACe,KAAK;MAAA,WAAS,WAAW;MAAA,SAAO;IAA4B,IAAAA,YAAA;MAAA,KAGnE,IAAI,CAACC,MAAM,CAACL,IAAI,IAAIR,gBAAgB,GAChCA,gBAAgB,CAAC,IAAI,CAACa,MAAM,CAACL,IAAI,CAAC,GAClCR,gBAAgB,CAACC,IAAI;MAAA,QAEtB,MAAM;MAAA,UACJ,cAAc;MAAA,kBACN,OAAO;MAAA,mBACN,OAAO;MAAA,gBACV;IAAG;EAIxB;AACF,CAAC,CAAC"}

package/lib/components/icons/YIconSort.mjs

@@ -0,0 +1,45 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from 'vue';
+import "./YIconSort.scss";
+export const YIconSort = defineComponent({
+  name: 'YIconSort',
+  props: {
+    direction: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  render() {
+    return _createVNode("svg", {
+      "version": "1.1",
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 32 32",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": ['y-icon-sort', {
+        'y-icon-sort--disabled': this.disabled,
+        'y-icon-sort--asc': this.direction === 'asc',
+        'y-icon-sort--desc': this.direction === 'desc'
+      }]
+    }, [_createVNode("path", {
+      "d": "m8.4146 12.52 7.5489-7.6399 7.622 7.4693",
+      "fill": "none",
+      "stroke": "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "3",
+      "class": "y-icon-sort__asc"
+    }, null), _createVNode("path", {
+      "d": "m8.4146 19.48 7.5489 7.6399 7.622-7.4693",
+      "fill": "none",
+      "stroke": "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "3",
+      "class": "y-icon-sort__desc"
+    }, null)]);
+  }
+});
+//# sourceMappingURL=YIconSort.mjs.map

package/lib/components/icons/YIconSort.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YIconSort.mjs","names":["defineComponent","YIconSort","name","props","direction","type","String","disabled","Boolean","render","_createVNode"],"sources":["../../../src/components/icons/YIconSort.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nimport './YIconSort.scss';\n\nexport const YIconSort = defineComponent({\n  name: 'YIconSort',\n  props: {\n    direction: {\n      type: String as PropType<'asc' | 'desc'>,\n    },\n    disabled: {\n      type: Boolean,\n    },\n  },\n  render() {\n    return (\n      <svg\n        version=\"1.1\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 32 32\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class={[\n          'y-icon-sort',\n          {\n            'y-icon-sort--disabled': this.disabled,\n            'y-icon-sort--asc': this.direction === 'asc',\n            'y-icon-sort--desc': this.direction === 'desc',\n          },\n        ]}\n      >\n        <path\n          d=\"m8.4146 12.52 7.5489-7.6399 7.622 7.4693\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"3\"\n          class=\"y-icon-sort__asc\"\n        />\n        <path\n          d=\"m8.4146 19.48 7.5489 7.6399 7.622-7.4693\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"3\"\n          class=\"y-icon-sort__desc\"\n        />\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAE/C;AAEA,OAAO,MAAMC,SAAS,GAAGD,eAAe,CAAC;EACvCE,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE;IACLC,SAAS,EAAE;MACTC,IAAI,EAAEC;IACR,CAAC;IACDC,QAAQ,EAAE;MACRF,IAAI,EAAEG;IACR;EACF,CAAC;EACDC,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,WAEY,KAAK;MAAA,SACP,IAAI;MAAA,UACH,IAAI;MAAA,WACH,WAAW;MAAA,SACb,4BAA4B;MAAA,SAC3B,CACL,aAAa,EACb;QACE,uBAAuB,EAAE,IAAI,CAACH,QAAQ;QACtC,kBAAkB,EAAE,IAAI,CAACH,SAAS,KAAK,KAAK;QAC5C,mBAAmB,EAAE,IAAI,CAACA,SAAS,KAAK;MAC1C,CAAC;IACF,IAAAM,YAAA;MAAA,KAGG,0CAA0C;MAAA,QACvC,MAAM;MAAA,UACJ,cAAc;MAAA,kBACN,OAAO;MAAA,mBACN,OAAO;MAAA,gBACV,GAAG;MAAA,SACV;IAAkB,UAAAA,YAAA;MAAA,KAGtB,0CAA0C;MAAA,QACvC,MAAM;MAAA,UACJ,cAAc;MAAA,kBACN,OAAO;MAAA,mBACN,OAAO;MAAA,gBACV,GAAG;MAAA,SACV;IAAmB;EAIjC;AACF,CAAC,CAAC"}

package/lib/components/icons/YIconSort.scss

@@ -0,0 +1,23 @@
+.y-icon-sort {
+  &__asc, &__desc {
+    opacity: 0.24;
+  }
+
+  &--asc & {
+    &__desc {
+      opacity: 0.1;
+    }
+    &__asc {
+      opacity: 0.8;
+    }
+  }
+
+  &--desc & {
+    &__asc {
+      opacity: 0.1;
+    }
+    &__desc {
+      opacity: 0.8;
+    }
+  }
+}

package/lib/components/pagination/YPagination.mjs

@@ -33,10 +33,11 @@ export const pressYPaginationProps = propsFactory({
   },
   color: String,
   activeColor: String,
-  firstIcon: String,
-  lastIcon: String,
-  prevIcon: String,
-  nextIcon: String
+  buttonVariations: [String]
+  // firstIcon: [String],
+  // lastIcon: [String],
+  // prevIcon: [String],
+  // nextIcon: [String],
 }, 'y-pagination');
 export const YPagination = defineComponent({
   name: 'YPagination',
@@ -90,6 +91,7 @@ export const YPagination = defineComponent({
       return {
         first: {
           disabled: prevDisabled,
+          variation: props.buttonVariations,
           onClick: e => {
             e.preventDefault();
             page.value = 1;
@@ -98,6 +100,7 @@ export const YPagination = defineComponent({
         },
         prev: {
           disabled: prevDisabled,
+          variation: props.buttonVariations,
           onClick: e => {
             e.preventDefault();
             const to = Math.max(1, page.value - 1);
@@ -107,6 +110,7 @@ export const YPagination = defineComponent({
         },
         next: {
           disabled: nextDisabled,
+          variation: props.buttonVariations,
           onClick: e => {
             e.preventDefault();
             const to = Math.min(+length.value, page.value + 1);
@@ -116,6 +120,7 @@ export const YPagination = defineComponent({
         },
         last: {
           disabled: nextDisabled,
+          variation: props.buttonVariations,
           onClick: e => {
             e.preventDefault();
             const to = +length.value;
@@ -182,6 +187,7 @@ export const YPagination = defineComponent({
               ellipsis: false,
               disabled: !!props.disabled || +props.length < 2,
               color: active ? props.activeColor : props.color,
+              variation: props.buttonVariations,
               onClick: e => changePage(e, item)
             }
           };
@@ -214,17 +220,15 @@ export const YPagination = defineComponent({
         "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
+        default: () => [slots['first-icon'] ? slots['first-icon']() : _createVNode(YIconPageControl, {
+          "type": 'first'
         }, 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
+        default: () => [slots['prev-icon'] ? slots['prev-icon']() : _createVNode(YIconPageControl, {
+          "type": 'prev'
         }, null)]
       })]), items.value.map((item, index) => {
         return _createVNode("li", {
@@ -233,23 +237,21 @@ export const YPagination = defineComponent({
             'y-pagination__item--active': item.active
           }]
         }, [_createVNode(YButton, item.props, {
-          default: () => [item.props.ellipsis ? '...' : item.page]
+          default: () => [item.props.ellipsis ? slots.ellipsis ? slots.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
+        default: () => [slots['next-icon'] ? slots['next-icon']() : _createVNode(YIconPageControl, {
+          "type": 'next'
         }, 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
+        default: () => [slots['last-icon'] ? slots['last-icon']() : _createVNode(YIconPageControl, {
+          "type": 'last'
         }, null)]
       })])])]);
     });

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

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

package/lib/components/pagination/YPagination.scss

@@ -9,7 +9,7 @@
     list-style: none;
 
     .y-button {
-      min-width: 2.2em;
+      min-width: 2.429em;
       min-height: 0;
       padding: 4px;
 

package/lib/components/table/YDataTable.mjs

@@ -1,21 +1,31 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
 import { YDataTableBody } from "./YDataTableBody.mjs";
 import { YDataTableControl } from "./YDataTableControl.mjs";
-import { YDataTableHead } from "./YDataTableHead.mjs";
+import { pressYDataTableHeadProps, YDataTableHead } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
-import { YTable } from "./YTable.mjs";
-import { propsFactory } from "../../util/vue-component.mjs";
-import { createPagination, pressDataTablePaginationProps } from "./pagination.mjs";
+import { pressYTableProps, YTable } from "./YTable.mjs";
+import { pressDataTableHeader } from "./composibles/header.mjs";
+import { createPagination, pressDataTablePaginationProps } from "./composibles/pagination.mjs";
+import { pressDataTableSortProps } from "./composibles/sorting.mjs";
+import { pressDataTableSelectionProps } from "./composibles/selection.mjs";
+import { pressDataTableItemsProps } from "./composibles/items.mjs";
 export const pressDataTableProps = propsFactory({
   width: [String, Number],
   search: String,
-  ...pressDataTablePaginationProps()
-}, 'YDataTable');
+  ...pressDataTableHeader(),
+  ...pressDataTableItemsProps(),
+  ...pressDataTableSortProps(),
+  ...pressDataTableSelectionProps(),
+  ...pressYDataTableHeadProps(),
+  ...pressYTableProps()
+}, 'DataTable');
 export const YDataTable = defineComponent({
   name: 'YDataTable',
   props: {
+    ...pressDataTablePaginationProps(),
     ...pressDataTableProps()
   },
   emits: {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","useRender","propsFactory","YDataTableBody","YDataTableControl","pressYDataTableHeadProps","YDataTableHead","YDataTableLayer","pressYTableProps","YTable","pressDataTableHeader","createPagination","pressDataTablePaginationProps","pressDataTableSortProps","pressDataTableSelectionProps","pressDataTableItemsProps","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 { PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { pressYDataTableHeadProps, YDataTableHead } from \"./YDataTableHead\";\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { pressYTableProps, YTable } from \"./YTable\";\nimport { pressDataTableHeader } from './composibles/header';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n} from './composibles/pagination';\nimport { pressDataTableSortProps } from './composibles/sorting';\nimport { pressDataTableSelectionProps } from \"./composibles/selection\";\nimport { pressDataTableItemsProps } from \"./composibles/items\";\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': (value: number) => true,\n    'update:pageSize': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n  },\n  setup(props, { slots }) {\n    const { page, pageSize } = createPagination(props as any);\n\n    const slotProps = computed(() => {\n      return {\n        page: page.value,\n        pageSize: pageSize.value,\n      };\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":"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"}

package/lib/components/table/YDataTableBody.mjs

@@ -1,20 +1,83 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { YDataTableRow } from "./YDataTableRow.mjs";
+import { useHeader } from "./composibles/header.mjs";
+import { useSelection } from "./composibles/selection.mjs";
+const pressYDataTableBodyProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  loading: [Boolean, String],
+  loadingText: String,
+  hideNoData: Boolean,
+  noDataText: {
+    type: String,
+    default: ''
+  },
+  rowHeight: Number,
+  'onClick:row': Function
+}, 'YDataTableBody');
 export const YDataTableBody = defineComponent({
   name: 'YDataTableBody',
   props: {
-    headers: {
-      type: [Array]
-    }
+    ...pressYDataTableBodyProps()
   },
+  emits: ['click:row'],
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
+    const {
+      columns
+    } = useHeader();
+    const {
+      isSelected,
+      toggleSelect
+    } = useSelection();
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.body ? slots.body?.(props) : _createVNode("tr", null, null)]);
+      if (props.loading && slots.loading) {
+        return _createVNode("tr", null, [_createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots.loading()])]);
+      }
+      if (!props.loading && props.items.length < 1 && !props.hideNoData) {
+        return _createVNode("tr", {
+          "key": "no-data"
+        }, [_createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots['no-data']?.() ?? props.noDataText])]);
+      }
+      return _createVNode(_Fragment, null, [slots.body ? slots.body?.(props) : props.items.map((item, index) => {
+        const stateProps = {
+          index,
+          item,
+          columns: columns.value,
+          isSelected,
+          toggleSelect
+        };
+        const slotProps = {
+          ...stateProps,
+          props: {
+            key: `item__${item.value}`,
+            onClick: props['onClick:row'] ? event => {
+              props['onClick:row']?.(event, {
+                item
+              });
+            } : undefined,
+            index,
+            item
+          }
+        };
+        return _createVNode(_Fragment, null, [slots.item ? slots.item(slotProps) : _createVNode(YDataTableRow, slotProps.props, slots)]);
+      })]);
     });
+
+    // end
+    return {};
   }
 });
 //# sourceMappingURL=YDataTableBody.mjs.map