yuyeon 0.0.42-rc29 → 0.0.42-rc30

package/lib/components/date-picker/YMonthPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YMonthPicker.mjs","names":["defineComponent","useRender","propsFactory","pressYMonthPickerPropsOptions","YMonthPicker","name","props","setup","_createVNode"],"sources":["../../../src/components/date-picker/YMonthPicker.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\n\nexport const pressYMonthPickerPropsOptions = propsFactory({}, 'YMonthPicker');\n\nexport const YMonthPicker = defineComponent({\n  name: 'YMonthPicker',\n  props: pressYMonthPickerPropsOptions(),\n  setup(props) {\n    useRender(() => {\n      return <div></div>;\n    });\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,YAAY;AAErB,OAAO,MAAMC,6BAA6B,GAAGD,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC;AAE7E,OAAO,MAAME,YAAY,GAAGJ,eAAe,CAAC;EAC1CK,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAEH,6BAA6B,CAAC,CAAC;EACtCI,KAAKA,CAACD,KAAK,EAAE;IACXL,SAAS,CAAC,MAAM;MACd,OAAAO,YAAA;IACF,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YMonthPicker.mjs","names":["computed","defineComponent","useModelDuplex","useRender","useDate","getRangeArr","propsFactory","YButton","pressYMonthPickerPropsOptions","modelValue","Number","color","String","height","YMonthPicker","name","props","setup","dateUtil","model","months","date","startOfYear","map","i","text","format","getNextMonth","value","onClick","index","_createVNode","month","item","active","join","default"],"sources":["../../../src/components/date-picker/YMonthPicker.tsx"],"sourcesContent":["import { computed, defineComponent } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useDate } from '../../composables/date';\nimport { getRangeArr } from '../../util';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\n\nimport './YMonthPicker.scss';\n\nexport const pressYMonthPickerPropsOptions = propsFactory(\n  {\n    modelValue: Number,\n    color: String,\n    height: [String, Number],\n  },\n  'YMonthPicker',\n);\n\nexport const YMonthPicker = defineComponent({\n  name: 'YMonthPicker',\n  props: pressYMonthPickerPropsOptions(),\n  setup(props) {\n    const dateUtil = useDate();\n    const model = useModelDuplex(props, 'modelValue');\n\n    const months = computed(() => {\n      let date = dateUtil.startOfYear(dateUtil.date());\n\n      return getRangeArr(12).map((i) => {\n        const text = dateUtil.format(date, 'monthShort');\n        date = dateUtil.getNextMonth(date);\n\n        return {\n          text,\n          value: i,\n        };\n      });\n    });\n\n    function onClick(index: number) {\n      model.value = index;\n    }\n\n    useRender(() => {\n      return (\n        <div class={['y-month-picker']}>\n          {months.value.map((month, index) => {\n            const item = {\n              active: index === model.value\n            }\n            return (\n              <div class={['y-month-picker__cell', 'y-month-picker__month']}>\n                <YButton\n                  variation={['rounded', 'text'].join(',')}\n                  active={item.active}\n                  color={props.color}\n                  onClick={() => onClick(index)}\n                >\n                  {month.text}\n                </YButton>\n              </div>\n            );\n          })}\n        </div>\n      );\n    });\n\n    return {};\n  },\n});\n\nexport type YMonthPicker = InstanceType<typeof YMonthPicker>;\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEvCC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,WAAW;AAAA,SACXC,YAAY;AAAA,SACZC,OAAO;AAEhB;AAEA,OAAO,MAAMC,6BAA6B,GAAGF,YAAY,CACvD;EACEG,UAAU,EAAEC,MAAM;EAClBC,KAAK,EAAEC,MAAM;EACbC,MAAM,EAAE,CAACD,MAAM,EAAEF,MAAM;AACzB,CAAC,EACD,cACF,CAAC;AAED,OAAO,MAAMI,YAAY,GAAGb,eAAe,CAAC;EAC1Cc,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAER,6BAA6B,CAAC,CAAC;EACtCS,KAAKA,CAACD,KAAK,EAAE;IACX,MAAME,QAAQ,GAAGd,OAAO,CAAC,CAAC;IAC1B,MAAMe,KAAK,GAAGjB,cAAc,CAACc,KAAK,EAAE,YAAY,CAAC;IAEjD,MAAMI,MAAM,GAAGpB,QAAQ,CAAC,MAAM;MAC5B,IAAIqB,IAAI,GAAGH,QAAQ,CAACI,WAAW,CAACJ,QAAQ,CAACG,IAAI,CAAC,CAAC,CAAC;MAEhD,OAAOhB,WAAW,CAAC,EAAE,CAAC,CAACkB,GAAG,CAAEC,CAAC,IAAK;QAChC,MAAMC,IAAI,GAAGP,QAAQ,CAACQ,MAAM,CAACL,IAAI,EAAE,YAAY,CAAC;QAChDA,IAAI,GAAGH,QAAQ,CAACS,YAAY,CAACN,IAAI,CAAC;QAElC,OAAO;UACLI,IAAI;UACJG,KAAK,EAAEJ;QACT,CAAC;MACH,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASK,OAAOA,CAACC,KAAa,EAAE;MAC9BX,KAAK,CAACS,KAAK,GAAGE,KAAK;IACrB;IAEA3B,SAAS,CAAC,MAAM;MACd,OAAA4B,YAAA;QAAA,SACc,CAAC,gBAAgB;MAAC,IAC3BX,MAAM,CAACQ,KAAK,CAACL,GAAG,CAAC,CAACS,KAAK,EAAEF,KAAK,KAAK;QAClC,MAAMG,IAAI,GAAG;UACXC,MAAM,EAAEJ,KAAK,KAAKX,KAAK,CAACS;QAC1B,CAAC;QACD,OAAAG,YAAA;UAAA,SACc,CAAC,sBAAsB,EAAE,uBAAuB;QAAC,IAAAA,YAAA,CAAAxB,OAAA;UAAA,aAE9C,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC4B,IAAI,CAAC,GAAG,CAAC;UAAA,UAChCF,IAAI,CAACC,MAAM;UAAA,SACZlB,KAAK,CAACL,KAAK;UAAA,WACTkB,CAAA,KAAMA,OAAO,CAACC,KAAK;QAAC;UAAAM,OAAA,EAAAA,CAAA,MAE5BJ,KAAK,CAACP,IAAI;QAAA;MAInB,CAAC,CAAC;IAGR,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/date-picker/YMonthPicker.scss

@@ -0,0 +1,25 @@
+.y-month-picker {
+  --y-month-picker-cols: 3;
+
+  display: grid;
+  grid-template-columns: repeat(var(--y-month-picker-cols, 3), 1fr);
+  min-height: 280px;
+
+  &__cell {
+    display: flex;
+    justify-content: center;
+
+    > .y-button {
+      width: 70px;
+      height: 70px;
+
+      &--active.y-button--text {
+        color: var(--y-button__color);
+        --y-button__color: var(--y-theme-primary);
+        &:before {
+          opacity: 0.3;
+        }
+      }
+    }
+  }
+}

package/lib/components/date-picker/YYearPicker.mjs

@@ -0,0 +1,82 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, ref } from 'vue';
+import { useModelDuplex } from "../../composables/communication.mjs";
+import { useRender } from "../../composables/component.mjs";
+import { useDate } from "../../composables/date/index.mjs";
+import { getRangeArr } from "../../util/index.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { YButton } from "../button/index.mjs";
+import "./YYearPicker.scss";
+export const pressYYearPickerPropsOptions = propsFactory({
+  modelValue: Number,
+  color: String,
+  height: [String, Number],
+  min: null,
+  max: null
+}, 'YYearPicker');
+const interval = 20;
+export const YYearPicker = defineComponent({
+  name: 'YYearPicker',
+  props: pressYYearPickerPropsOptions(),
+  setup(props, _ref) {
+    let {
+      emit,
+      expose
+    } = _ref;
+    const dateUtil = useDate();
+    const model = useModelDuplex(props, 'modelValue');
+    const tempYear = model.value;
+    const startYear = ref(tempYear - tempYear % interval - (tempYear < 0 ? interval : 0));
+    const years = computed(() => {
+      let date = dateUtil.startOfYear(dateUtil.date());
+      return getRangeArr(interval + 1, startYear.value).map(value => {
+        date = dateUtil.setYear(date, value);
+        return {
+          text: dateUtil.format(date, 'year'),
+          value,
+          active: model.value === value
+        };
+      });
+    });
+    function onClick(value) {
+      model.value = value;
+    }
+    function changePage() {
+      let dir = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      let change = startYear.value + interval * dir;
+      if (change < 0) {
+        change = 0;
+      }
+      startYear.value = change;
+    }
+    expose({
+      changePage
+    });
+    useRender(() => {
+      return _createVNode("div", {
+        "class": ['y-year-picker']
+      }, [years.value.map(year => {
+        const scopedProps = {
+          item: year,
+          props: {
+            onClick: () => {
+              onClick(year.value);
+            }
+          }
+        };
+        return _createVNode("div", {
+          "class": ['y-year-picker__cell']
+        }, [_createVNode(YButton, {
+          "variation": ['rounded', 'text'].join(','),
+          "active": year.active,
+          "color": props.color,
+          "onClick": () => onClick(year.value)
+        }, {
+          default: () => [year.text]
+        })]);
+      })]);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=YYearPicker.mjs.map

package/lib/components/date-picker/YYearPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YYearPicker.mjs","names":["computed","defineComponent","ref","useModelDuplex","useRender","useDate","getRangeArr","propsFactory","YButton","pressYYearPickerPropsOptions","modelValue","Number","color","String","height","min","max","interval","YYearPicker","name","props","setup","_ref","emit","expose","dateUtil","model","tempYear","value","startYear","years","date","startOfYear","map","setYear","text","format","active","onClick","changePage","dir","arguments","length","undefined","change","_createVNode","year","scopedProps","item","join","default"],"sources":["../../../src/components/date-picker/YYearPicker.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useDate } from '../../composables/date';\nimport { getRangeArr } from '../../util';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\n\nimport './YYearPicker.scss';\n\nexport const pressYYearPickerPropsOptions = propsFactory(\n  {\n    modelValue: Number,\n    color: String,\n    height: [String, Number],\n    min: null as any as PropType<unknown>,\n    max: null as any as PropType<unknown>,\n  },\n  'YYearPicker',\n);\n\nconst interval = 20;\n\nexport const YYearPicker = defineComponent({\n  name: 'YYearPicker',\n  props: pressYYearPickerPropsOptions(),\n  setup(props, { emit, expose }) {\n    const dateUtil = useDate();\n    const model = useModelDuplex(props, 'modelValue');\n    const tempYear = model.value;\n    const startYear = ref(\n      tempYear - (tempYear % interval) - (tempYear < 0 ? interval : 0),\n    );\n    const years = computed(() => {\n      let date = dateUtil.startOfYear(dateUtil.date());\n\n      return getRangeArr(interval + 1, startYear.value).map((value) => {\n        date = dateUtil.setYear(date, value);\n        return {\n          text: dateUtil.format(date, 'year'),\n          value,\n          active: model.value === value,\n        };\n      });\n    });\n\n    function onClick(value: number) {\n      model.value =  value;\n    }\n\n    function changePage(dir = 1) {\n      let change = startYear.value + interval * dir;\n      if (change < 0) {\n        change = 0;\n      }\n      startYear.value = change;\n    }\n\n    expose({\n      changePage,\n    });\n\n    useRender(() => {\n      return (\n        <div class={['y-year-picker']}>\n          {years.value.map((year) => {\n            const scopedProps = {\n              item: year,\n              props: {\n                onClick: () => {\n                  onClick(year.value)\n                }\n              }\n            }\n            return (\n              <div class={['y-year-picker__cell']}>\n                <YButton\n                  variation={['rounded', 'text'].join(',')}\n                  active={year.active}\n                  color={props.color}\n                  onClick={() => onClick(year.value)}\n                >\n                  {year.text}\n                </YButton>\n              </div>\n            );\n          })}\n        </div>\n      );\n    });\n\n    return {};\n  },\n});\n\nexport type YYearPicker = InstanceType<typeof YYearPicker>;\n"],"mappings":"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"}

package/lib/components/date-picker/YYearPicker.scss

@@ -0,0 +1,23 @@
+.y-year-picker {
+  --y-year-picker-cols: 3;
+
+  display: grid;
+  grid-template-columns: repeat(var(--y-year-picker-cols, 3), 1fr);
+  min-height: 280px;
+
+  &__cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > .y-button {
+      &--active.y-button--text {
+        color: var(--y-button__color);
+        --y-button__color: var(--y-theme-primary);
+        &:before {
+          opacity: 0.3;
+        }
+      }
+    }
+  }
+}

package/lib/components/date-picker/index.mjs

@@ -1,2 +1,4 @@
 export * from "./YDateCalendar.mjs";
+export * from "./YMonthPicker.mjs";
+export * from "./YDatePicker.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/date-picker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/date-picker/index.ts"],"sourcesContent":["export * from './YDateCalendar';\r\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/date-picker/index.ts"],"sourcesContent":["export * from './YDateCalendar';\r\nexport * from './YMonthPicker';\r\nexport * from './YDatePicker';\r\n"],"mappings":""}

package/lib/components/icons/index.mjs

@@ -15,6 +15,18 @@ export const builtSet = {
   clear: YIconClear,
   checkbox: YIconCheckbox,
   pageControl: YIconPageControl,
+  next: {
+    component: YIconPageControl,
+    props: {
+      type: 'next'
+    }
+  },
+  prev: {
+    component: YIconPageControl,
+    props: {
+      type: 'prev'
+    }
+  },
   sort: YIconSort
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["YIconCheckbox","YIconClear","YIconExpand","YIconPageControl","YIconSort","YIconDropdown","builtSet","expand","dropdown","clear","checkbox","pageControl","sort"],"sources":["../../../src/components/icons/index.ts"],"sourcesContent":["import { YIconCheckbox } from './YIconCheckbox';\nimport { YIconClear } from './YIconClear';\nimport { YIconExpand } from './YIconExpand';\nimport { YIconPageControl } from './YIconPageControl';\nimport { YIconSort } from './YIconSort';\nimport {YIconDropdown} from \"./YIconDropdown\";\n\nexport * from './YIconExpand';\nexport * from './YIconClear';\nexport * from './YIconCheckbox';\nexport * from './YIconPageControl';\nexport * from './YIconSort';\n\nexport const builtSet = {\n  expand: YIconExpand,\n  dropdown: YIconDropdown,\n  clear: YIconClear,\n  checkbox: YIconCheckbox,\n  pageControl: YIconPageControl,\n  sort: YIconSort,\n};\n"],"mappings":"SAASA,aAAa;AAAA,SACbC,UAAU;AAAA,SACVC,WAAW;AAAA,SACXC,gBAAgB;AAAA,SAChBC,SAAS;AAAA,SACVC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,OAAO,MAAMC,QAAQ,GAAG;EACtBC,MAAM,EAAEL,WAAW;EACnBM,QAAQ,EAAEH,aAAa;EACvBI,KAAK,EAAER,UAAU;EACjBS,QAAQ,EAAEV,aAAa;EACvBW,WAAW,EAAER,gBAAgB;EAC7BS,IAAI,EAAER;AACR,CAAC"}
+{"version":3,"file":"index.mjs","names":["YIconCheckbox","YIconClear","YIconExpand","YIconPageControl","YIconSort","YIconDropdown","builtSet","expand","dropdown","clear","checkbox","pageControl","next","component","props","type","prev","sort"],"sources":["../../../src/components/icons/index.ts"],"sourcesContent":["import { YIconCheckbox } from './YIconCheckbox';\nimport { YIconClear } from './YIconClear';\nimport { YIconExpand } from './YIconExpand';\nimport { YIconPageControl } from './YIconPageControl';\nimport { YIconSort } from './YIconSort';\nimport {YIconDropdown} from \"./YIconDropdown\";\n\nexport * from './YIconExpand';\nexport * from './YIconClear';\nexport * from './YIconCheckbox';\nexport * from './YIconPageControl';\nexport * from './YIconSort';\n\nexport const builtSet = {\n  expand: YIconExpand,\n  dropdown: YIconDropdown,\n  clear: YIconClear,\n  checkbox: YIconCheckbox,\n  pageControl: YIconPageControl,\n  next: {\n    component: YIconPageControl,\n    props: {\n      type: 'next'\n    }\n  },\n  prev: {\n    component: YIconPageControl,\n    props: {\n      type: 'prev'\n    }\n  },\n  sort: YIconSort,\n};\n"],"mappings":"SAASA,aAAa;AAAA,SACbC,UAAU;AAAA,SACVC,WAAW;AAAA,SACXC,gBAAgB;AAAA,SAChBC,SAAS;AAAA,SACVC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,OAAO,MAAMC,QAAQ,GAAG;EACtBC,MAAM,EAAEL,WAAW;EACnBM,QAAQ,EAAEH,aAAa;EACvBI,KAAK,EAAER,UAAU;EACjBS,QAAQ,EAAEV,aAAa;EACvBW,WAAW,EAAER,gBAAgB;EAC7BS,IAAI,EAAE;IACJC,SAAS,EAAEV,gBAAgB;IAC3BW,KAAK,EAAE;MACLC,IAAI,EAAE;IACR;EACF,CAAC;EACDC,IAAI,EAAE;IACJH,SAAS,EAAEV,gBAAgB;IAC3BW,KAAK,EAAE;MACLC,IAAI,EAAE;IACR;EACF,CAAC;EACDE,IAAI,EAAEb;AACR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.42-rc29",
+  "version": "0.0.42-rc30",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/button/YButton.d.ts

@@ -183,9 +183,10 @@ export declare const YButton: import("vue").DefineComponent<{
 }, {
     link: import("../../composables/vue-router").UseLink;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => true;
     'choice:selected': (choice: {
         value: boolean;
-    }) => boolean;
+    }) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: null;
     disabled: BooleanConstructor;
@@ -228,6 +229,7 @@ export declare const YButton: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
     "onChoice:selected"?: ((choice: {
         value: boolean;
     }) => any) | undefined;

package/types/components/checkbox/YCheckbox.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly: PropType<boolean>;
 }, {
     checked: import("vue").Ref<boolean>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "click" | "blur" | "update:modelValue" | "change")[], "focus" | "click" | "blur" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "blur" | "update:modelValue" | "change")[], "click" | "focus" | "blur" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: PropType<boolean | any[]>;
     value: PropType<any>;
     label: PropType<string>;
@@ -36,8 +36,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: PropType<boolean>;
     readonly: PropType<boolean>;
 }>> & {
-    onFocus?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;

package/types/components/checkbox/YInputCheckbox.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus(e: FocusEvent): void;
     onBlur(e: FocusEvent): void;
     onClick(event: MouseEvent): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "click" | "blur")[], "focus" | "click" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "blur")[], "click" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: PropType<string>;
     value: PropType<boolean>;
     icon: PropType<string>;
@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: PropType<boolean>;
     readonly: PropType<boolean>;
 }>> & {
-    onFocus?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;

package/types/components/date-picker/YDatePicker.d.ts

@@ -0,0 +1,117 @@
+export declare const pressYDatePickerPropsOptions: <Defaults extends {
+    modelValue?: unknown;
+    disabled?: unknown;
+    color?: unknown;
+    max?: unknown;
+    multiple?: unknown;
+    year?: unknown;
+    month?: unknown;
+    range?: unknown;
+    allowedDates?: unknown;
+    hideWeekdays?: unknown;
+    showAdjacentMonthDates?: unknown;
+    hideHeader?: unknown;
+    min?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    modelValue: unknown extends Defaults["modelValue"] ? null : {
+        type: import("vue").PropType<unknown extends Defaults["modelValue"] ? any : any>;
+        default: unknown extends Defaults["modelValue"] ? any : any;
+    };
+    disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
+        default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
+    };
+    color: unknown extends Defaults["color"] ? StringConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
+        default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
+    };
+    max: unknown extends Defaults["max"] ? import("vue").PropType<unknown> : {
+        type: import("vue").PropType<unknown extends Defaults["max"] ? unknown : {} | Defaults["max"]>;
+        default: unknown extends Defaults["max"] ? unknown : {} | Defaults["max"];
+    };
+    multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
+        default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
+    };
+    year: unknown extends Defaults["year"] ? (StringConstructor | NumberConstructor)[] : {
+        type: import("vue").PropType<unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"]>;
+        default: unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"];
+    };
+    month: unknown extends Defaults["month"] ? (StringConstructor | NumberConstructor)[] : {
+        type: import("vue").PropType<unknown extends Defaults["month"] ? string | number : NonNullable<string | number> | Defaults["month"]>;
+        default: unknown extends Defaults["month"] ? string | number : NonNullable<string | number> | Defaults["month"];
+    };
+    range: unknown extends Defaults["range"] ? BooleanConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["range"] ? boolean : boolean | Defaults["range"]>;
+        default: unknown extends Defaults["range"] ? boolean : boolean | Defaults["range"];
+    };
+    allowedDates: unknown extends Defaults["allowedDates"] ? (ArrayConstructor | FunctionConstructor)[] : {
+        type: import("vue").PropType<unknown extends Defaults["allowedDates"] ? Function | unknown[] : NonNullable<Function | unknown[]> | Defaults["allowedDates"]>;
+        default: unknown extends Defaults["allowedDates"] ? Function | unknown[] : NonNullable<Function | unknown[]> | Defaults["allowedDates"];
+    };
+    hideWeekdays: unknown extends Defaults["hideWeekdays"] ? BooleanConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["hideWeekdays"] ? boolean : boolean | Defaults["hideWeekdays"]>;
+        default: unknown extends Defaults["hideWeekdays"] ? boolean : boolean | Defaults["hideWeekdays"];
+    };
+    showAdjacentMonthDates: unknown extends Defaults["showAdjacentMonthDates"] ? {
+        type: BooleanConstructor;
+        default: boolean;
+    } : Omit<{
+        type: BooleanConstructor;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["showAdjacentMonthDates"] ? boolean : boolean | Defaults["showAdjacentMonthDates"]>;
+        default: unknown extends Defaults["showAdjacentMonthDates"] ? boolean : boolean | Defaults["showAdjacentMonthDates"];
+    };
+    hideHeader: unknown extends Defaults["hideHeader"] ? BooleanConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["hideHeader"] ? boolean : boolean | Defaults["hideHeader"]>;
+        default: unknown extends Defaults["hideHeader"] ? boolean : boolean | Defaults["hideHeader"];
+    };
+    min: unknown extends Defaults["min"] ? import("vue").PropType<unknown> : {
+        type: import("vue").PropType<unknown extends Defaults["min"] ? unknown : {} | Defaults["min"]>;
+        default: unknown extends Defaults["min"] ? unknown : {} | Defaults["min"];
+    };
+};
+export declare const YDatePicker: import("vue").DefineComponent<{
+    modelValue: null;
+    disabled: BooleanConstructor;
+    color: StringConstructor;
+    max: import("vue").PropType<unknown>;
+    multiple: BooleanConstructor;
+    year: (StringConstructor | NumberConstructor)[];
+    month: (StringConstructor | NumberConstructor)[];
+    range: BooleanConstructor;
+    allowedDates: (ArrayConstructor | FunctionConstructor)[];
+    hideWeekdays: BooleanConstructor;
+    showAdjacentMonthDates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideHeader: BooleanConstructor;
+    min: import("vue").PropType<unknown>;
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: null;
+    disabled: BooleanConstructor;
+    color: StringConstructor;
+    max: import("vue").PropType<unknown>;
+    multiple: BooleanConstructor;
+    year: (StringConstructor | NumberConstructor)[];
+    month: (StringConstructor | NumberConstructor)[];
+    range: BooleanConstructor;
+    allowedDates: (ArrayConstructor | FunctionConstructor)[];
+    hideWeekdays: BooleanConstructor;
+    showAdjacentMonthDates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideHeader: BooleanConstructor;
+    min: import("vue").PropType<unknown>;
+}>>, {
+    disabled: boolean;
+    multiple: boolean;
+    range: boolean;
+    hideWeekdays: boolean;
+    showAdjacentMonthDates: boolean;
+    hideHeader: boolean;
+}, {}>;
+export type YDatePicker = InstanceType<typeof YDatePicker>;

package/types/components/date-picker/YDatePickerControl.d.ts

@@ -0,0 +1,128 @@
+import type { PropType } from 'vue';
+export declare const pressYDatePickerControlPropsOptions: <Defaults extends {
+    disabled?: unknown;
+    nextIcon?: unknown;
+    prevIcon?: unknown;
+    dropdownIcon?: unknown;
+    mode?: unknown;
+    yearText?: unknown;
+    monthText?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    disabled: unknown extends Defaults["disabled"] ? {
+        type: PropType<string | boolean | string[]>;
+        default: boolean;
+    } : Omit<{
+        type: PropType<string | boolean | string[]>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["disabled"] ? string | boolean | string[] : Defaults["disabled"] | NonNullable<string | boolean | string[]>>;
+        default: unknown extends Defaults["disabled"] ? string | boolean | string[] : Defaults["disabled"] | NonNullable<string | boolean | string[]>;
+    };
+    nextIcon: unknown extends Defaults["nextIcon"] ? {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    } : Omit<{
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["nextIcon"] ? string | Record<string, any> : Defaults["nextIcon"] | NonNullable<string | Record<string, any>>>;
+        default: unknown extends Defaults["nextIcon"] ? string | Record<string, any> : Defaults["nextIcon"] | NonNullable<string | Record<string, any>>;
+    };
+    prevIcon: unknown extends Defaults["prevIcon"] ? {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    } : Omit<{
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["prevIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["prevIcon"]>;
+        default: unknown extends Defaults["prevIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["prevIcon"];
+    };
+    dropdownIcon: unknown extends Defaults["dropdownIcon"] ? {
+        type: (StringConstructor | ObjectConstructor)[];
+    } : Omit<{
+        type: (StringConstructor | ObjectConstructor)[];
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["dropdownIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["dropdownIcon"]>;
+        default: unknown extends Defaults["dropdownIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["dropdownIcon"];
+    };
+    mode: unknown extends Defaults["mode"] ? {
+        type: PropType<"date" | "year" | "month">;
+        default: string;
+    } : Omit<{
+        type: PropType<"date" | "year" | "month">;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["mode"] ? "date" | "year" | "month" : Defaults["mode"] | NonNullable<"date" | "year" | "month">>;
+        default: unknown extends Defaults["mode"] ? "date" | "year" | "month" : Defaults["mode"] | NonNullable<"date" | "year" | "month">;
+    };
+    yearText: unknown extends Defaults["yearText"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["yearText"] ? string : string | Defaults["yearText"]>;
+        default: unknown extends Defaults["yearText"] ? string : string | Defaults["yearText"];
+    };
+    monthText: unknown extends Defaults["monthText"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["monthText"] ? string : string | Defaults["monthText"]>;
+        default: unknown extends Defaults["monthText"] ? string : string | Defaults["monthText"];
+    };
+};
+export declare const YDatePickerControl: import("vue").DefineComponent<{
+    disabled: {
+        type: PropType<string | boolean | string[]>;
+        default: boolean;
+    };
+    nextIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    prevIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    dropdownIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    mode: {
+        type: PropType<"date" | "year" | "month">;
+        default: string;
+    };
+    yearText: StringConstructor;
+    monthText: StringConstructor;
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'click:year': () => true;
+    'click:month': () => true;
+    'click:prev': () => true;
+    'click:next': () => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<string | boolean | string[]>;
+        default: boolean;
+    };
+    nextIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    prevIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    dropdownIcon: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    mode: {
+        type: PropType<"date" | "year" | "month">;
+        default: string;
+    };
+    yearText: StringConstructor;
+    monthText: StringConstructor;
+}>> & {
+    "onClick:year"?: (() => any) | undefined;
+    "onClick:month"?: (() => any) | undefined;
+    "onClick:prev"?: (() => any) | undefined;
+    "onClick:next"?: (() => any) | undefined;
+}, {
+    disabled: string | boolean | string[];
+    mode: "date" | "year" | "month";
+    nextIcon: string | Record<string, any>;
+    prevIcon: string | Record<string, any>;
+}, {}>;
+export type YDatePickerControl = InstanceType<typeof YDatePickerControl>;

package/types/components/date-picker/YMonthPicker.d.ts

@@ -0,0 +1,28 @@
+export declare const pressYMonthPickerPropsOptions: <Defaults extends {
+    modelValue?: unknown;
+    color?: unknown;
+    height?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    modelValue: unknown extends Defaults["modelValue"] ? NumberConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"]>;
+        default: unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"];
+    };
+    color: unknown extends Defaults["color"] ? StringConstructor : {
+        type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
+        default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
+    };
+    height: unknown extends Defaults["height"] ? (StringConstructor | NumberConstructor)[] : {
+        type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : NonNullable<string | number> | Defaults["height"]>;
+        default: unknown extends Defaults["height"] ? string | number : NonNullable<string | number> | Defaults["height"];
+    };
+};
+export declare const YMonthPicker: import("vue").DefineComponent<{
+    modelValue: NumberConstructor;
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: NumberConstructor;
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}>>, {}, {}>;
+export type YMonthPicker = InstanceType<typeof YMonthPicker>;

package/types/components/date-picker/YYearPicker.d.ts

@@ -0,0 +1,43 @@
+import { PropType } from 'vue';
+export declare const pressYYearPickerPropsOptions: <Defaults extends {
+    modelValue?: unknown;
+    color?: unknown;
+    height?: unknown;
+    min?: unknown;
+    max?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    modelValue: unknown extends Defaults["modelValue"] ? NumberConstructor : {
+        type: PropType<unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"]>;
+        default: unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"];
+    };
+    color: unknown extends Defaults["color"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
+        default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
+    };
+    height: unknown extends Defaults["height"] ? (StringConstructor | NumberConstructor)[] : {
+        type: PropType<unknown extends Defaults["height"] ? string | number : NonNullable<string | number> | Defaults["height"]>;
+        default: unknown extends Defaults["height"] ? string | number : NonNullable<string | number> | Defaults["height"];
+    };
+    min: unknown extends Defaults["min"] ? PropType<unknown> : {
+        type: PropType<unknown extends Defaults["min"] ? unknown : {} | Defaults["min"]>;
+        default: unknown extends Defaults["min"] ? unknown : {} | Defaults["min"];
+    };
+    max: unknown extends Defaults["max"] ? PropType<unknown> : {
+        type: PropType<unknown extends Defaults["max"] ? unknown : {} | Defaults["max"]>;
+        default: unknown extends Defaults["max"] ? unknown : {} | Defaults["max"];
+    };
+};
+export declare const YYearPicker: import("vue").DefineComponent<{
+    modelValue: NumberConstructor;
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    min: PropType<unknown>;
+    max: PropType<unknown>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: NumberConstructor;
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    min: PropType<unknown>;
+    max: PropType<unknown>;
+}>>, {}, {}>;
+export type YYearPicker = InstanceType<typeof YYearPicker>;

package/types/components/date-picker/index.d.ts

@@ -1 +1,3 @@
 export * from './YDateCalendar';
+export * from './YMonthPicker';
+export * from './YDatePicker';

package/types/components/field-input/YFieldInput.d.ts

@@ -299,7 +299,7 @@ export declare const YFieldInput: import("vue").DefineComponent<{
         readonly rxValue: any;
     };
     inValue: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "click" | "mousedown" | "mouseup" | "blur" | "mousedown:display" | "update:modelValue" | "update:focused" | "input" | "change" | "keydown" | "keyup")[], "focus" | "click" | "mousedown" | "mouseup" | "blur" | "mousedown:display" | "update:modelValue" | "update:focused" | "input" | "change" | "keydown" | "keyup", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "mousedown" | "mouseup" | "blur" | "mousedown:display" | "update:modelValue" | "update:focused" | "input" | "change" | "keydown" | "keyup")[], "click" | "focus" | "mousedown" | "mouseup" | "blur" | "mousedown:display" | "update:modelValue" | "update:focused" | "input" | "change" | "keydown" | "keyup", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     focused: BooleanConstructor;
     'onUpdate:focused': PropType<(v: boolean) => void>;
     readonly: PropType<boolean>;
@@ -366,9 +366,9 @@ export declare const YFieldInput: import("vue").DefineComponent<{
         default: string;
     };
 }>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:focused"?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
     onMousedown?: ((...args: any[]) => any) | undefined;
     onMouseup?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;