yuyeon 0.3.0 → 0.3.1-rc.0

package/lib/components/badge/YBadge.mjs

@@ -3,6 +3,7 @@ import { vShow, withDirectives } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 import { useI18n } from "../../composables/i18n/index.mjs";
 import { IconValue } from "../../composables/icon.mjs";
+import { styleColorPropsOptions, useStyleColor } from "../../composables/style-color.mjs";
 import { PolyTransition } from "../../composables/transition.mjs";
 import { defineComponent, propsFactory } from "../../util/component/index.mjs";
 import { YIcon } from "../icon/YIcon.mjs";
@@ -17,7 +18,6 @@ export const pressYBadgePropsOptions = propsFactory({
   floating: Boolean,
   inline: Boolean,
   icon: IconValue,
-  color: String,
   hide: Boolean,
   label: {
     type: String,
@@ -28,7 +28,8 @@ export const pressYBadgePropsOptions = propsFactory({
   transition: {
     type: String,
     default: 'fade'
-  }
+  },
+  ...styleColorPropsOptions
 }, 'YBadge');
 export const YBadge = defineComponent({
   name: 'YBadge',
@@ -41,6 +42,9 @@ export const YBadge = defineComponent({
     const {
       t
     } = useI18n();
+    const {
+      colorVars
+    } = useStyleColor(props, 'badge');
     useRender(() => {
       const ElTag = props.tag;
       const value = Number(props.content);
@@ -51,7 +55,8 @@ export const YBadge = defineComponent({
           'y-badge--dot': props.dot,
           'y-badge--floating': props.floating,
           'y-badge--inline': props.inline
-        }]
+        }],
+        "style": colorVars.value
       }, {
         default: () => [_createVNode("div", {
           "class": "y-badge__base"

package/lib/components/badge/YBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","color","hide","label","content","Number","max","transition","YBadge","name","props","slots","Object","setup","_ref","t","ElTag","value","isNaN","_createVNode","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import { type PropType, type SlotsType, vShow, withDirectives } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { useI18n } from '@/composables/i18n';\r\nimport { IconValue } from '@/composables/icon';\r\nimport { PolyTransition } from '@/composables/transition';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YIcon } from '../icon/YIcon';\r\n\r\nimport './YBadge.scss';\r\n\r\nexport const pressYBadgePropsOptions = propsFactory(\r\n  {\r\n    tag: {\r\n      type: String as PropType<string>,\r\n      default: 'div',\r\n    },\r\n    dot: Boolean,\r\n    bordered: Boolean,\r\n    floating: Boolean,\r\n    inline: Boolean,\r\n    icon: IconValue,\r\n    color: String,\r\n    hide: Boolean,\r\n    label: {\r\n      type: String,\r\n      default: '$yuyeon.badge',\r\n    },\r\n    content: [Number, String],\r\n    max: Number,\r\n    transition: {\r\n      type: String,\r\n      default: 'fade',\r\n    },\r\n  },\r\n  'YBadge',\r\n);\r\n\r\nexport const YBadge = defineComponent({\r\n  name: 'YBadge',\r\n  props: pressYBadgePropsOptions(),\r\n  slots: Object as SlotsType<{\r\n    default: any;\r\n    badge: any;\r\n  }>,\r\n  setup(props, { slots }) {\r\n    const { t } = useI18n();\r\n\r\n    useRender(() => {\r\n      const ElTag = props.tag as keyof HTMLElementTagNameMap;\r\n      const value = Number(props.content);\r\n      const content =\r\n        !props.max || isNaN(value)\r\n          ? props.content\r\n          : value <= +props.max\r\n            ? value\r\n            : `${props.max}+`;\r\n      return (\r\n        <ElTag\r\n          class={[\r\n            'y-badge',\r\n            {\r\n              'y-badge--bordered': props.bordered,\r\n              'y-badge--dot': props.dot,\r\n              'y-badge--floating': props.floating,\r\n              'y-badge--inline': props.inline,\r\n            },\r\n          ]}\r\n        >\r\n          <div class=\"y-badge__base\">\r\n            {slots.default?.()}\r\n            <PolyTransition\r\n              is={props.transition}\r\n              transitionProps={{ name: props.transition }}\r\n            >\r\n              {withDirectives(\r\n                <span\r\n                  class={['y-badge__badge']}\r\n                  aria-atomic=\"true\"\r\n                  aria-label={t(props.label, value)}\r\n                  aria-live=\"polite\"\r\n                  role=\"status\"\r\n                >\r\n                  {props.dot ? undefined : slots.badge ? (\r\n                    slots.badge?.()\r\n                  ) : props.icon ? (\r\n                    <YIcon icon={props.icon} />\r\n                  ) : (\r\n                    content\r\n                  )}\r\n                </span>,\r\n                [[vShow, !props.hide]],\r\n              )}\r\n            </PolyTransition>\r\n          </div>\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YBadge = InstanceType<typeof YBadge>;\r\n"],"mappings":";AAAA,SAAwCA,KAAK,EAAEC,cAAc,QAAQ,KAAK;AAAC,SAElEC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,SAAS;AAAA,SACTC,cAAc;AAAA,SACdC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,KAAK;AAEd;AAEA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CACjD;EACEG,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,GAAG,EAAEC,OAAO;EACZC,QAAQ,EAAED,OAAO;EACjBE,QAAQ,EAAEF,OAAO;EACjBG,MAAM,EAAEH,OAAO;EACfI,IAAI,EAAEf,SAAS;EACfgB,KAAK,EAAER,MAAM;EACbS,IAAI,EAAEN,OAAO;EACbO,KAAK,EAAE;IACLX,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDU,OAAO,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;EACzBa,GAAG,EAAED,MAAM;EACXE,UAAU,EAAE;IACVf,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMc,MAAM,GAAGrB,eAAe,CAAC;EACpCsB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEpB,uBAAuB,CAAC,CAAC;EAChCqB,KAAK,EAAEC,MAGL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEH;IAAM,CAAC,GAAAG,IAAA;IACpB,MAAM;MAAEC;IAAE,CAAC,GAAG/B,OAAO,CAAC,CAAC;IAEvBD,SAAS,CAAC,MAAM;MACd,MAAMiC,KAAK,GAAGN,KAAK,CAACnB,GAAkC;MACtD,MAAM0B,KAAK,GAAGZ,MAAM,CAACK,KAAK,CAACN,OAAO,CAAC;MACnC,MAAMA,OAAO,GACX,CAACM,KAAK,CAACJ,GAAG,IAAIY,KAAK,CAACD,KAAK,CAAC,GACtBP,KAAK,CAACN,OAAO,GACba,KAAK,IAAI,CAACP,KAAK,CAACJ,GAAG,GACjBW,KAAK,GACJ,GAAEP,KAAK,CAACJ,GAAI,GAAE;MACvB,OAAAa,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,mBAAmB,EAAEN,KAAK,CAACb,QAAQ;UACnC,cAAc,EAAEa,KAAK,CAACf,GAAG;UACzB,mBAAmB,EAAEe,KAAK,CAACZ,QAAQ;UACnC,iBAAiB,EAAEY,KAAK,CAACX;QAC3B,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAAAyB,YAAA;UAAA;QAAA,IAGER,KAAK,CAACjB,OAAO,GAAG,CAAC,EAAAyB,YAAA,CAAAjC,cAAA;UAAA,MAEZwB,KAAK,CAACH,UAAU;UAAA,mBACH;YAAEE,IAAI,EAAEC,KAAK,CAACH;UAAW;QAAC;UAAAb,OAAA,EAAAA,CAAA,MAE1CZ,cAAc,CAAAqC,YAAA;YAAA,SAEJ,CAAC,gBAAgB,CAAC;YAAA;YAAA,cAEbJ,CAAC,CAACL,KAAK,CAACP,KAAK,EAAEc,KAAK,CAAC;YAAA;YAAA;UAAA,IAIhCP,KAAK,CAACf,GAAG,GAAGyB,SAAS,GAAGT,KAAK,CAACU,KAAK,GAClCV,KAAK,CAACU,KAAK,GAAG,CAAC,GACbX,KAAK,CAACV,IAAI,GAAAmB,YAAA,CAAA9B,KAAA;YAAA,QACCqB,KAAK,CAACV;UAAI,WAEvBI,OACD,IAEH,CAAC,CAACvB,KAAK,EAAE,CAAC6B,KAAK,CAACR,IAAI,CAAC,CACvB,CAAC;QAAA;MAAA;IAKX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","styleColorPropsOptions","useStyleColor","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","hide","label","content","Number","max","transition","YBadge","name","props","slots","Object","setup","_ref","t","colorVars","ElTag","value","isNaN","_createVNode","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import {\n  type PropType,\n  type SlotsType,\n  computed,\n  vShow,\n  withDirectives,\n} from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useI18n } from '@/composables/i18n';\nimport { IconValue } from '@/composables/icon';\nimport {\n  styleColorPropsOptions,\n  useStyleColor,\n} from '@/composables/style-color';\nimport { PolyTransition } from '@/composables/transition';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YIcon } from '../icon/YIcon';\n\nimport './YBadge.scss';\n\nexport const pressYBadgePropsOptions = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    dot: Boolean,\n    bordered: Boolean,\n    floating: Boolean,\n    inline: Boolean,\n    icon: IconValue,\n    hide: Boolean,\n    label: {\n      type: String,\n      default: '$yuyeon.badge',\n    },\n    content: [Number, String],\n    max: Number,\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n    ...styleColorPropsOptions,\n  },\n  'YBadge',\n);\n\nexport const YBadge = defineComponent({\n  name: 'YBadge',\n  props: pressYBadgePropsOptions(),\n  slots: Object as SlotsType<{\n    default: any;\n    badge: any;\n  }>,\n  setup(props, { slots }) {\n    const { t } = useI18n();\n\n    const { colorVars } = useStyleColor(props, 'badge');\n\n    useRender(() => {\n      const ElTag = props.tag as keyof HTMLElementTagNameMap;\n      const value = Number(props.content);\n      const content =\n        !props.max || isNaN(value)\n          ? props.content\n          : value <= +props.max\n            ? value\n            : `${props.max}+`;\n      return (\n        <ElTag\n          class={[\n            'y-badge',\n            {\n              'y-badge--bordered': props.bordered,\n              'y-badge--dot': props.dot,\n              'y-badge--floating': props.floating,\n              'y-badge--inline': props.inline,\n            },\n          ]}\n          style={colorVars.value}\n        >\n          <div class=\"y-badge__base\">\n            {slots.default?.()}\n            <PolyTransition\n              is={props.transition}\n              transitionProps={{ name: props.transition }}\n            >\n              {withDirectives(\n                <span\n                  class={['y-badge__badge']}\n                  aria-atomic=\"true\"\n                  aria-label={t(props.label, value)}\n                  aria-live=\"polite\"\n                  role=\"status\"\n                >\n                  {props.dot ? undefined : slots.badge ? (\n                    slots.badge?.()\n                  ) : props.icon ? (\n                    <YIcon icon={props.icon} />\n                  ) : (\n                    content\n                  )}\n                </span>,\n                [[vShow, !props.hide]],\n              )}\n            </PolyTransition>\n          </div>\n        </ElTag>\n      );\n    });\n  },\n});\n\nexport type YBadge = InstanceType<typeof YBadge>;\n"],"mappings":"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"}

package/lib/components/badge/YBadge.scss

@@ -7,8 +7,12 @@
   --y-badge__border-width: 2px;
   --y-badge__border-transform: scale(1.0413);
   --y-badge__inline-margin: 0 4px;
-  --y-badge__color: var(--y-theme-surface-variant);
-  --y-badge__text-color: var(--y-theme-on-surface-variant);
+  --y-badge__background-opacity: 1;
+  --y-badge__background: rgba(
+    var(--y-theme-surface-variant-rgb),
+    var(--y-badge__background-opacity, 1)
+  );
+  --y-badge__color: var(--y-theme-on-surface-variant);
 
   display: inline-block;
 
@@ -29,7 +33,8 @@
     text-indent: 0;
     white-space: nowrap;
     padding: var(--y-badge__padding);
-    background: var(--y-badge__color);
+    color: var(--y-badge__color);
+    background: var(--y-badge__background);
     bottom: calc(100% - var(--y-badge__height) / 2);
     left: calc(100% - var(--y-badge__min-width));
   }

package/lib/components/chip/YChip.mjs

@@ -1,16 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 import { computed } from 'vue';
 import { useRender } from "../../composables/index.mjs";
-import { isColorValue, rgbFromHex } from "../../util/color/index.mjs";
+import { styleColorPropsOptions, useStyleColor } from "../../composables/style-color.mjs";
 import { defineComponent, hasEventProp, propsFactory } from "../../util/component/index.mjs";
 import "./YChip.scss";
 export const pressYChipPropsOptions = propsFactory({
-  color: String,
-  background: String,
-  backgroundOpacity: {
-    type: Number,
-    default: 0.14
-  },
+  ...styleColorPropsOptions,
   small: Boolean
 }, 'YChip');
 export const YChip = defineComponent({
@@ -26,48 +21,15 @@ export const YChip = defineComponent({
     const clickable = computed(() => {
       return hasEventProp(props, 'click');
     });
-    const styles = computed(() => {
-      let {
-        color,
-        background
-      } = props;
-      if (!background) background = color;
-      if (color && !isColorValue(color)) {
-        color = `var(--y-theme-${color})`;
-      }
-      if (background) {
-        if (isColorValue(background)) {
-          background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;
-        } else if (!background.startsWith('var(')) {
-          background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;
-        }
-      }
-      return {
-        '--y-chip__color': color,
-        '--y-chip__background': background
-      };
-    });
-    function colorRgb(color) {
-      if (color?.startsWith('#')) {
-        return rgbFromHex(color)?.join(',') || '';
-      }
-      const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
-      if (RGBA_REGEX.test(color)) {
-        const value = RGBA_REGEX.exec(color)?.[2] || '';
-        if (value) {
-          const valueArray = value.trim().split(',');
-          valueArray.splice(3, 1);
-          return valueArray.join(',');
-        }
-      }
-      return '';
-    }
+    const {
+      colorVars
+    } = useStyleColor(props, 'chip');
     useRender(() => _createVNode("span", {
       "class": ['y-chip', {
         'y-chip--small': props.small,
         'y-chip--clickable': clickable.value
       }],
-      "style": styles.value
+      "style": colorVars.value
     }, [_createVNode("span", {
       "class": "y-chip__content"
     }, [slots.default?.()])]));

package/lib/components/chip/YChip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YChip.mjs","names":["computed","useRender","isColorValue","rgbFromHex","defineComponent","hasEventProp","propsFactory","pressYChipPropsOptions","color","String","background","backgroundOpacity","type","Number","default","small","Boolean","YChip","name","props","setup","_ref","slots","emit","clickable","styles","colorRgb","startsWith","join","RGBA_REGEX","test","value","exec","valueArray","trim","split","splice","_createVNode"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { computed } from 'vue';\r\n\r\nimport { useRender } from '@/composables';\r\nimport { isColorValue, rgbFromHex } from '@/util/color';\r\nimport { defineComponent, hasEventProp, propsFactory } from '@/util/component';\r\n\r\nimport './YChip.scss';\r\n\r\nexport const pressYChipPropsOptions = propsFactory(\r\n  {\r\n    color: String,\r\n    background: String,\r\n    backgroundOpacity: {\r\n      type: Number,\r\n      default: 0.14,\r\n    },\r\n    small: Boolean,\r\n  },\r\n  'YChip',\r\n);\r\n\r\nexport const YChip = defineComponent({\r\n  name: 'YChip',\r\n  props: {\r\n    ...pressYChipPropsOptions(),\r\n  },\r\n  setup(props, { slots, emit }) {\r\n    const clickable = computed(() => {\r\n      return hasEventProp(props, 'click');\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let { color, background } = props;\r\n      if (!background) background = color;\r\n\r\n      if (color && !isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n\r\n      if (background) {\r\n        if (isColorValue(background)) {\r\n          background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;\r\n        } else if (!background.startsWith('var(')) {\r\n          background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`\r\n        }\r\n      }\r\n\r\n      return {\r\n        '--y-chip__color': color,\r\n        '--y-chip__background': background,\r\n      };\r\n    });\r\n\r\n    function colorRgb(color: string): string {\r\n      if (color?.startsWith('#')) {\r\n        return rgbFromHex(color)?.join(',') || '';\r\n      }\r\n      const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\r\n      if (RGBA_REGEX.test(color)) {\r\n        const value = RGBA_REGEX.exec(color)?.[2] || '';\r\n        if (value) {\r\n          const valueArray = value.trim().split(',');\r\n          valueArray.splice(3, 1);\r\n          return valueArray.join(',');\r\n        }\r\n      }\r\n      return '';\r\n    }\r\n\r\n    useRender(() => (\r\n      <span\r\n        class={[\r\n          'y-chip',\r\n          {\r\n            'y-chip--small': props.small,\r\n            'y-chip--clickable': clickable.value,\r\n          },\r\n        ]}\r\n        style={styles.value}\r\n      >\r\n        <span class=\"y-chip__content\">{slots.default?.()}</span>\r\n      </span>\r\n    ));\r\n\r\n    return {};\r\n  },\r\n});\r\n\r\nexport type YChip = InstanceType<typeof YChip>;\r\n"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,KAAK;AAAC,SAEtBC,SAAS;AAAA,SACTC,YAAY,EAAEC,UAAU;AAAA,SACxBC,eAAe,EAAEC,YAAY,EAAEC,YAAY;AAEpD;AAEA,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACEE,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAED,MAAM;EAClBE,iBAAiB,EAAE;IACjBC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEC;AACT,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGb,eAAe,CAAC;EACnCc,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACL,GAAGZ,sBAAsB,CAAC;EAC5B,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAMG,SAAS,GAAGxB,QAAQ,CAAC,MAAM;MAC/B,OAAOK,YAAY,CAACc,KAAK,EAAE,OAAO,CAAC;IACrC,CAAC,CAAC;IAEF,MAAMM,MAAM,GAAGzB,QAAQ,CAAC,MAAM;MAC5B,IAAI;QAAEQ,KAAK;QAAEE;MAAW,CAAC,GAAGS,KAAK;MACjC,IAAI,CAACT,UAAU,EAAEA,UAAU,GAAGF,KAAK;MAEnC,IAAIA,KAAK,IAAI,CAACN,YAAY,CAACM,KAAK,CAAC,EAAE;QACjCA,KAAK,GAAI,iBAAgBA,KAAM,GAAE;MACnC;MAEA,IAAIE,UAAU,EAAE;QACd,IAAIR,YAAY,CAACQ,UAAU,CAAC,EAAE;UAC5BA,UAAU,GAAI,QAAOgB,QAAQ,CAAChB,UAAU,CAAE,KAAIS,KAAK,CAACR,iBAAkB,GAAE;QAC1E,CAAC,MAAM,IAAI,CAACD,UAAU,CAACiB,UAAU,CAAC,MAAM,CAAC,EAAE;UACzCjB,UAAU,GAAI,QAAQ,iBAAgBA,UAAW,OAAO,KAAIS,KAAK,CAACR,iBAAkB,GAAE;QACxF;MACF;MAEA,OAAO;QACL,iBAAiB,EAAEH,KAAK;QACxB,sBAAsB,EAAEE;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,SAASgB,QAAQA,CAAClB,KAAa,EAAU;MACvC,IAAIA,KAAK,EAAEmB,UAAU,CAAC,GAAG,CAAC,EAAE;QAC1B,OAAOxB,UAAU,CAACK,KAAK,CAAC,EAAEoB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MAC3C;MACA,MAAMC,UAAU,GAAG,qBAAqB;MACxC,IAAIA,UAAU,CAACC,IAAI,CAACtB,KAAK,CAAC,EAAE;QAC1B,MAAMuB,KAAK,GAAGF,UAAU,CAACG,IAAI,CAACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;QAC/C,IAAIuB,KAAK,EAAE;UACT,MAAME,UAAU,GAAGF,KAAK,CAACG,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;UACvB,OAAOH,UAAU,CAACL,IAAI,CAAC,GAAG,CAAC;QAC7B;MACF;MACA,OAAO,EAAE;IACX;IAEA3B,SAAS,CAAC,MAAAoC,YAAA;MAAA,SAEC,CACL,QAAQ,EACR;QACE,eAAe,EAAElB,KAAK,CAACJ,KAAK;QAC5B,mBAAmB,EAAES,SAAS,CAACO;MACjC,CAAC,CACF;MAAA,SACMN,MAAM,CAACM;IAAK,IAAAM,YAAA;MAAA;IAAA,IAEYf,KAAK,CAACR,OAAO,GAAG,CAAC,IAEnD,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"YChip.mjs","names":["computed","useRender","styleColorPropsOptions","useStyleColor","defineComponent","hasEventProp","propsFactory","pressYChipPropsOptions","small","Boolean","YChip","name","props","setup","_ref","slots","emit","clickable","colorVars","_createVNode","value","default"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { computed } from 'vue';\n\nimport { useRender } from '@/composables';\nimport {\n  styleColorPropsOptions,\n  useStyleColor,\n} from '@/composables/style-color';\nimport { defineComponent, hasEventProp, propsFactory } from '@/util/component';\n\nimport './YChip.scss';\n\nexport const pressYChipPropsOptions = propsFactory(\n  {\n    ...styleColorPropsOptions,\n    small: Boolean,\n  },\n  'YChip',\n);\n\nexport const YChip = defineComponent({\n  name: 'YChip',\n  props: {\n    ...pressYChipPropsOptions(),\n  },\n  setup(props, { slots, emit }) {\n    const clickable = computed(() => {\n      return hasEventProp(props, 'click');\n    });\n    const { colorVars } = useStyleColor(props, 'chip');\n\n    useRender(() => (\n      <span\n        class={[\n          'y-chip',\n          {\n            'y-chip--small': props.small,\n            'y-chip--clickable': clickable.value,\n          },\n        ]}\n        style={colorVars.value}\n      >\n        <span class=\"y-chip__content\">{slots.default?.()}</span>\n      </span>\n    ));\n\n    return {};\n  },\n});\n\nexport type YChip = InstanceType<typeof YChip>;\n"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,KAAK;AAAC,SAEtBC,SAAS;AAAA,SAEhBC,sBAAsB,EACtBC,aAAa;AAAA,SAENC,eAAe,EAAEC,YAAY,EAAEC,YAAY;AAEpD;AAEA,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACE,GAAGJ,sBAAsB;EACzBM,KAAK,EAAEC;AACT,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGN,eAAe,CAAC;EACnCO,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACL,GAAGL,sBAAsB,CAAC;EAC5B,CAAC;EACDM,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAMG,SAAS,GAAGjB,QAAQ,CAAC,MAAM;MAC/B,OAAOK,YAAY,CAACO,KAAK,EAAE,OAAO,CAAC;IACrC,CAAC,CAAC;IACF,MAAM;MAAEM;IAAU,CAAC,GAAGf,aAAa,CAACS,KAAK,EAAE,MAAM,CAAC;IAElDX,SAAS,CAAC,MAAAkB,YAAA;MAAA,SAEC,CACL,QAAQ,EACR;QACE,eAAe,EAAEP,KAAK,CAACJ,KAAK;QAC5B,mBAAmB,EAAES,SAAS,CAACG;MACjC,CAAC,CACF;MAAA,SACMF,SAAS,CAACE;IAAK,IAAAD,YAAA;MAAA;IAAA,IAESJ,KAAK,CAACM,OAAO,GAAG,CAAC,IAEnD,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/composables/style-color.mjs

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { colorRgb, isColorValue } from "../util/index.mjs";
+export const styleColorPropsOptions = {
+  color: String,
+  background: String,
+  backgroundOpacity: {
+    type: Number,
+    default: 1
+  }
+};
+export function useStyleColor(props, name) {
+  const colorVars = computed(() => {
+    let {
+      color,
+      background
+    } = props;
+    if (!background) background = color;
+    if (color && !isColorValue(color)) {
+      color = `var(--y-theme-${color})`;
+    }
+    if (background) {
+      if (isColorValue(background)) {
+        background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;
+      } else if (!background.startsWith('var(')) {
+        background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;
+      }
+    }
+    return {
+      [`--y-${name}__color`]: color,
+      [`--y-${name}__background`]: background
+    };
+  });
+  return {
+    colorVars
+  };
+}
+//# sourceMappingURL=style-color.mjs.map

package/lib/composables/style-color.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-color.mjs","names":["computed","colorRgb","isColorValue","styleColorPropsOptions","color","String","background","backgroundOpacity","type","Number","default","useStyleColor","props","name","colorVars","startsWith"],"sources":["../../src/composables/style-color.ts"],"sourcesContent":["import { ExtractPropTypes, computed } from 'vue';\n\nimport { colorRgb, isColorValue } from '@/util';\n\nexport const styleColorPropsOptions = {\n  color: String,\n  background: String,\n  backgroundOpacity: {\n    type: Number,\n    default: 1,\n  },\n};\n\nexport function useStyleColor(\n  props: ExtractPropTypes<typeof styleColorPropsOptions>,\n  name: string,\n) {\n  const colorVars = computed(() => {\n    let { color, background } = props;\n    if (!background) background = color;\n\n    if (color && !isColorValue(color)) {\n      color = `var(--y-theme-${color})`;\n    }\n\n    if (background) {\n      if (isColorValue(background)) {\n        background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;\n      } else if (!background.startsWith('var(')) {\n        background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;\n      }\n    }\n\n    return {\n      [`--y-${name}__color`]: color,\n      [`--y-${name}__background`]: background,\n    };\n  });\n\n  return {\n    colorVars,\n  };\n}\n"],"mappings":"AAAA,SAA2BA,QAAQ,QAAQ,KAAK;AAAC,SAExCC,QAAQ,EAAEC,YAAY;AAE/B,OAAO,MAAMC,sBAAsB,GAAG;EACpCC,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAED,MAAM;EAClBE,iBAAiB,EAAE;IACjBC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,SAASC,aAAaA,CAC3BC,KAAsD,EACtDC,IAAY,EACZ;EACA,MAAMC,SAAS,GAAGd,QAAQ,CAAC,MAAM;IAC/B,IAAI;MAAEI,KAAK;MAAEE;IAAW,CAAC,GAAGM,KAAK;IACjC,IAAI,CAACN,UAAU,EAAEA,UAAU,GAAGF,KAAK;IAEnC,IAAIA,KAAK,IAAI,CAACF,YAAY,CAACE,KAAK,CAAC,EAAE;MACjCA,KAAK,GAAI,iBAAgBA,KAAM,GAAE;IACnC;IAEA,IAAIE,UAAU,EAAE;MACd,IAAIJ,YAAY,CAACI,UAAU,CAAC,EAAE;QAC5BA,UAAU,GAAI,QAAOL,QAAQ,CAACK,UAAU,CAAE,KAAIM,KAAK,CAACL,iBAAkB,GAAE;MAC1E,CAAC,MAAM,IAAI,CAACD,UAAU,CAACS,UAAU,CAAC,MAAM,CAAC,EAAE;QACzCT,UAAU,GAAI,QAAQ,iBAAgBA,UAAW,OAAO,KAAIM,KAAK,CAACL,iBAAkB,GAAE;MACxF;IACF;IAEA,OAAO;MACL,CAAE,OAAMM,IAAK,SAAQ,GAAGT,KAAK;MAC7B,CAAE,OAAMS,IAAK,cAAa,GAAGP;IAC/B,CAAC;EACH,CAAC,CAAC;EAEF,OAAO;IACLQ;EACF,CAAC;AACH"}

package/lib/util/color/index.mjs

@@ -12,9 +12,25 @@
 *   https://github.com/vuetifyjs/vuetify
 * */
 import { HEX_COLOR_REGEX, RGBA_REGEX } from "./const.mjs";
+import { rgbFromHex } from "./../index.mjs";
 export function isColorValue(value) {
   return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);
 }
+export function colorRgb(color) {
+  if (color?.startsWith('#')) {
+    return rgbFromHex(color)?.join(',') || '';
+  }
+  const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
+  if (RGBA_REGEX.test(color)) {
+    const value = RGBA_REGEX.exec(color)?.[2] || '';
+    if (value) {
+      const valueArray = value.trim().split(',');
+      valueArray.splice(3, 1);
+      return valueArray.join(',');
+    }
+  }
+  return '';
+}
 export function isTextColorIsLight(r, g, b) {
   const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
   return luminance < 0.5;

package/lib/util/color/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["HEX_COLOR_REGEX","RGBA_REGEX","isColorValue","value","test","isTextColorIsLight","r","g","b","luminance"],"sources":["../../../src/util/color/index.ts"],"sourcesContent":["/*\r\n* yuyeon\r\n* Apache-2.0 license (Copyright 2023 yeonyew)\r\n*\r\n* Used Libs\r\n* - material-color-utilities\r\n*   Apache-2.0 license (Copyright 2021 Google LLC)\r\n*   https://github.com/material-foundation/material-color-utilities\r\n*\r\n* - Vuetify\r\n*   MIT license (Copyright (c) 2016-2023 John Jeremy Leider)\r\n*   https://github.com/vuetifyjs/vuetify\r\n* */\r\n\r\nimport { HEX_COLOR_REGEX, RGBA_REGEX } from \"./const\";\r\n\r\nexport function isColorValue(value: string): boolean {\r\n  return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);\r\n}\r\n\r\nexport function isTextColorIsLight(r: number, g: number, b: number): boolean {\r\n  const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n  return luminance < 0.5;\r\n}\r\n\r\nexport * from './const';\r\nexport * from \"./conversion\";\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,SAcSA,eAAe,EAAEC,UAAU;AAEpC,OAAO,SAASC,YAAYA,CAACC,KAAa,EAAW;EACnD,OAAOF,UAAU,CAACG,IAAI,CAACD,KAAK,CAAC,IAAIH,eAAe,CAACI,IAAI,CAACD,KAAK,CAAC;AAC9D;AAEA,OAAO,SAASE,kBAAkBA,CAACC,CAAS,EAAEC,CAAS,EAAEC,CAAS,EAAW;EAC3E,MAAMC,SAAS,GAAG,CAAC,GAAG,CAAC,KAAK,GAAGH,CAAC,GAAG,KAAK,GAAGC,CAAC,GAAG,KAAK,GAAGC,CAAC,IAAI,GAAG;EAC/D,OAAOC,SAAS,GAAG,GAAG;AACxB;AAAC;AAAA"}
+{"version":3,"file":"index.mjs","names":["HEX_COLOR_REGEX","RGBA_REGEX","rgbFromHex","isColorValue","value","test","colorRgb","color","startsWith","join","exec","valueArray","trim","split","splice","isTextColorIsLight","r","g","b","luminance"],"sources":["../../../src/util/color/index.ts"],"sourcesContent":["/*\r\n* yuyeon\r\n* Apache-2.0 license (Copyright 2023 yeonyew)\r\n*\r\n* Used Libs\r\n* - material-color-utilities\r\n*   Apache-2.0 license (Copyright 2021 Google LLC)\r\n*   https://github.com/material-foundation/material-color-utilities\r\n*\r\n* - Vuetify\r\n*   MIT license (Copyright (c) 2016-2023 John Jeremy Leider)\r\n*   https://github.com/vuetifyjs/vuetify\r\n* */\r\n\r\nimport { HEX_COLOR_REGEX, RGBA_REGEX } from \"./const\";\r\nimport { rgbFromHex } from '@/util';\r\n\r\nexport function isColorValue(value: string): boolean {\r\n  return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);\r\n}\r\n\r\nexport function colorRgb(color: string): string {\r\n  if (color?.startsWith('#')) {\r\n    return rgbFromHex(color)?.join(',') || '';\r\n  }\r\n  const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\r\n  if (RGBA_REGEX.test(color)) {\r\n    const value = RGBA_REGEX.exec(color)?.[2] || '';\r\n    if (value) {\r\n      const valueArray = value.trim().split(',');\r\n      valueArray.splice(3, 1);\r\n      return valueArray.join(',');\r\n    }\r\n  }\r\n  return '';\r\n}\r\n\r\nexport function isTextColorIsLight(r: number, g: number, b: number): boolean {\r\n  const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n  return luminance < 0.5;\r\n}\r\n\r\nexport * from './const';\r\nexport * from \"./conversion\";\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,SAcSA,eAAe,EAAEC,UAAU;AAAA,SAC3BC,UAAU;AAEnB,OAAO,SAASC,YAAYA,CAACC,KAAa,EAAW;EACnD,OAAOH,UAAU,CAACI,IAAI,CAACD,KAAK,CAAC,IAAIJ,eAAe,CAACK,IAAI,CAACD,KAAK,CAAC;AAC9D;AAEA,OAAO,SAASE,QAAQA,CAACC,KAAa,EAAU;EAC9C,IAAIA,KAAK,EAAEC,UAAU,CAAC,GAAG,CAAC,EAAE;IAC1B,OAAON,UAAU,CAACK,KAAK,CAAC,EAAEE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;EAC3C;EACA,MAAMR,UAAU,GAAG,qBAAqB;EACxC,IAAIA,UAAU,CAACI,IAAI,CAACE,KAAK,CAAC,EAAE;IAC1B,MAAMH,KAAK,GAAGH,UAAU,CAACS,IAAI,CAACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC/C,IAAIH,KAAK,EAAE;MACT,MAAMO,UAAU,GAAGP,KAAK,CAACQ,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;MACvB,OAAOH,UAAU,CAACF,IAAI,CAAC,GAAG,CAAC;IAC7B;EACF;EACA,OAAO,EAAE;AACX;AAEA,OAAO,SAASM,kBAAkBA,CAACC,CAAS,EAAEC,CAAS,EAAEC,CAAS,EAAW;EAC3E,MAAMC,SAAS,GAAG,CAAC,GAAG,CAAC,KAAK,GAAGH,CAAC,GAAG,KAAK,GAAGC,CAAC,GAAG,KAAK,GAAGC,CAAC,IAAI,GAAG;EAC/D,OAAOC,SAAS,GAAG,GAAG;AACxB;AAAC;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.3.0",
+  "version": "0.3.1-rc.0",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/badge/YBadge.d.ts

@@ -2,19 +2,39 @@ import { PropType } from 'vue';
 import { IconValue } from '../../composables/icon';
 
 export declare const pressYBadgePropsOptions: <Defaults extends {
+    color?: unknown;
+    background?: unknown;
+    backgroundOpacity?: unknown;
     tag?: unknown;
     dot?: unknown;
     bordered?: unknown;
     floating?: unknown;
     inline?: unknown;
     icon?: unknown;
-    color?: unknown;
     hide?: unknown;
     label?: unknown;
     content?: unknown;
     max?: unknown;
     transition?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
+    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"];
+    };
+    background: unknown extends Defaults["background"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["background"] ? string : string | Defaults["background"]>;
+        default: unknown extends Defaults["background"] ? string : string | Defaults["background"];
+    };
+    backgroundOpacity: unknown extends Defaults["backgroundOpacity"] ? {
+        type: NumberConstructor;
+        default: number;
+    } : Omit<{
+        type: NumberConstructor;
+        default: number;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
+        default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
+    };
     tag: unknown extends Defaults["tag"] ? {
         type: PropType<string>;
         default: string;
@@ -45,10 +65,6 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
         type: PropType<unknown extends Defaults["icon"] ? IconValue : NonNullable<IconValue> | Defaults["icon"]>;
         default: unknown extends Defaults["icon"] ? IconValue : NonNullable<IconValue> | Defaults["icon"];
     };
-    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"];
-    };
     hide: unknown extends Defaults["hide"] ? BooleanConstructor : {
         type: PropType<unknown extends Defaults["hide"] ? boolean : boolean | Defaults["hide"]>;
         default: unknown extends Defaults["hide"] ? boolean : boolean | Defaults["hide"];
@@ -83,6 +99,12 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
     };
 };
 export declare const YBadge: import('vue').DefineComponent<{
+    color: StringConstructor;
+    background: StringConstructor;
+    backgroundOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
     tag: {
         type: PropType<string>;
         default: string;
@@ -92,7 +114,6 @@ export declare const YBadge: import('vue').DefineComponent<{
     floating: BooleanConstructor;
     inline: BooleanConstructor;
     icon: PropType<IconValue>;
-    color: StringConstructor;
     hide: BooleanConstructor;
     label: {
         type: StringConstructor;

package/types/components/chip/YChip.d.ts

@@ -1,10 +1,14 @@
 
 export declare const pressYChipPropsOptions: <Defaults extends {
+    small?: unknown;
     color?: unknown;
     background?: unknown;
     backgroundOpacity?: unknown;
-    small?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
+    small: unknown extends Defaults["small"] ? BooleanConstructor : {
+        type: import('vue').PropType<unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"]>;
+        default: unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"];
+    };
     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"];
@@ -23,18 +27,14 @@ export declare const pressYChipPropsOptions: <Defaults extends {
         type: import('vue').PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
         default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
     };
-    small: unknown extends Defaults["small"] ? BooleanConstructor : {
-        type: import('vue').PropType<unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"]>;
-        default: unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"];
-    };
 };
 export declare const YChip: import('vue').DefineComponent<{
+    small: BooleanConstructor;
     color: StringConstructor;
     background: StringConstructor;
     backgroundOpacity: {
         type: NumberConstructor;
         default: number;
     };
-    small: BooleanConstructor;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string>;
 export type YChip = InstanceType<typeof YChip>;

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

@@ -4,11 +4,11 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
     disabled?: unknown;
     multiple?: unknown;
     max?: unknown;
-    color?: unknown;
+    year?: unknown;
     month?: unknown;
+    color?: unknown;
     range?: unknown;
     min?: unknown;
-    year?: unknown;
     allowedDates?: unknown;
     hideWeekdays?: unknown;
     showAdjacentMonthDates?: unknown;
@@ -30,14 +30,18 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
         type: import('vue').PropType<unknown extends Defaults["max"] ? unknown : {} | Defaults["max"]>;
         default: unknown extends Defaults["max"] ? unknown : {} | Defaults["max"];
     };
-    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"];
+    year: unknown extends Defaults["year"] ? (NumberConstructor | StringConstructor)[] : {
+        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"] ? (NumberConstructor | StringConstructor)[] : {
         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"];
     };
+    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"];
+    };
     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"];
@@ -46,10 +50,6 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
         type: import('vue').PropType<unknown extends Defaults["min"] ? unknown : {} | Defaults["min"]>;
         default: unknown extends Defaults["min"] ? unknown : {} | Defaults["min"];
     };
-    year: unknown extends Defaults["year"] ? (NumberConstructor | StringConstructor)[] : {
-        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"];
-    };
     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"];
@@ -78,11 +78,11 @@ export declare const YDatePicker: import('vue').DefineComponent<{
     disabled: BooleanConstructor;
     multiple: BooleanConstructor;
     max: import('vue').PropType<unknown>;
-    color: StringConstructor;
+    year: (NumberConstructor | StringConstructor)[];
     month: (NumberConstructor | StringConstructor)[];
+    color: StringConstructor;
     range: BooleanConstructor;
     min: import('vue').PropType<unknown>;
-    year: (NumberConstructor | StringConstructor)[];
     allowedDates: (ArrayConstructor | FunctionConstructor)[];
     hideWeekdays: BooleanConstructor;
     showAdjacentMonthDates: {

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

@@ -48,14 +48,14 @@ export declare const pressYDatePickerControlPropsOptions: <Defaults extends {
         default: unknown extends Defaults["dropdownIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["dropdownIcon"];
     };
     mode: unknown extends Defaults["mode"] ? {
-        type: PropType<"date" | "month" | "year">;
+        type: PropType<"year" | "month" | "date">;
         default: string;
     } : Omit<{
-        type: PropType<"date" | "month" | "year">;
+        type: PropType<"year" | "month" | "date">;
         default: string;
     }, "type" | "default"> & {
-        type: PropType<unknown extends Defaults["mode"] ? "date" | "month" | "year" : Defaults["mode"] | NonNullable<"date" | "month" | "year">>;
-        default: unknown extends Defaults["mode"] ? "date" | "month" | "year" : Defaults["mode"] | NonNullable<"date" | "month" | "year">;
+        type: PropType<unknown extends Defaults["mode"] ? "year" | "month" | "date" : Defaults["mode"] | NonNullable<"year" | "month" | "date">>;
+        default: unknown extends Defaults["mode"] ? "year" | "month" | "date" : Defaults["mode"] | NonNullable<"year" | "month" | "date">;
     };
     yearText: unknown extends Defaults["yearText"] ? StringConstructor : {
         type: PropType<unknown extends Defaults["yearText"] ? string : string | Defaults["yearText"]>;
@@ -83,7 +83,7 @@ export declare const YDatePickerControl: import('vue').DefineComponent<{
         type: (ObjectConstructor | StringConstructor)[];
     };
     mode: {
-        type: PropType<"date" | "month" | "year">;
+        type: PropType<"year" | "month" | "date">;
         default: string;
     };
     yearText: StringConstructor;

package/types/components/dialog/YDialog.d.ts

@@ -6,12 +6,12 @@ export declare const pressYDialogPropsOptions: <Defaults extends {
     modelValue?: unknown;
     width?: unknown;
     height?: unknown;
+    align?: unknown;
     theme?: unknown;
     closeDelay?: unknown;
     openDelay?: unknown;
     transition?: unknown;
     minWidth?: unknown;
-    align?: unknown;
     minHeight?: unknown;
     maxWidth?: unknown;
     maxHeight?: unknown;
@@ -68,6 +68,16 @@ export declare const pressYDialogPropsOptions: <Defaults extends {
         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"];
     };
+    align: unknown extends Defaults["align"] ? {
+        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
+        default: string;
+    } : Omit<{
+        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["align"] ? "top" | "bottom" | "start" | "end" | "center" : NonNullable<"top" | "bottom" | "start" | "end" | "center"> | Defaults["align"]>;
+        default: unknown extends Defaults["align"] ? "top" | "bottom" | "start" | "end" | "center" : NonNullable<"top" | "bottom" | "start" | "end" | "center"> | Defaults["align"];
+    };
     theme: unknown extends Defaults["theme"] ? PropType<string> : {
         type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
         default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
@@ -118,16 +128,6 @@ export declare const pressYDialogPropsOptions: <Defaults extends {
         type: PropType<unknown extends Defaults["minWidth"] ? string | number : NonNullable<string | number> | Defaults["minWidth"]>;
         default: unknown extends Defaults["minWidth"] ? string | number : NonNullable<string | number> | Defaults["minWidth"];
     };
-    align: unknown extends Defaults["align"] ? {
-        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
-        default: string;
-    } : Omit<{
-        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
-        default: string;
-    }, "type" | "default"> & {
-        type: PropType<unknown extends Defaults["align"] ? "top" | "bottom" | "start" | "end" | "center" : NonNullable<"top" | "bottom" | "start" | "end" | "center"> | Defaults["align"]>;
-        default: unknown extends Defaults["align"] ? "top" | "bottom" | "start" | "end" | "center" : NonNullable<"top" | "bottom" | "start" | "end" | "center"> | Defaults["align"];
-    };
     minHeight: unknown extends Defaults["minHeight"] ? PropType<string | number> : {
         type: PropType<unknown extends Defaults["minHeight"] ? string | number : NonNullable<string | number> | Defaults["minHeight"]>;
         default: unknown extends Defaults["minHeight"] ? string | number : NonNullable<string | number> | Defaults["minHeight"];
@@ -350,6 +350,10 @@ export declare const YDialog: import('vue').DefineComponent<{
     };
     width: PropType<string | number>;
     height: PropType<string | number>;
+    align: {
+        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
+        default: string;
+    };
     theme: PropType<string>;
     closeDelay: {
         type: PropType<number>;
@@ -366,10 +370,6 @@ export declare const YDialog: import('vue').DefineComponent<{
         default: string;
     };
     minWidth: PropType<string | number>;
-    align: {
-        type: PropType<"top" | "bottom" | "start" | "end" | "center">;
-        default: string;
-    };
     minHeight: PropType<string | number>;
     maxWidth: PropType<string | number>;
     maxHeight: PropType<string | number>;

package/types/composables/style-color.d.ts

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from 'vue';
+
+export declare const styleColorPropsOptions: {
+    color: StringConstructor;
+    background: StringConstructor;
+    backgroundOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export declare function useStyleColor(props: ExtractPropTypes<typeof styleColorPropsOptions>, name: string): {
+    colorVars: import('vue').ComputedRef<{
+        [x: string]: string | undefined;
+    }>;
+};

package/types/util/color/index.d.ts

@@ -1,4 +1,5 @@
 export declare function isColorValue(value: string): boolean;
+export declare function colorRgb(color: string): string;
 export declare function isTextColorIsLight(r: number, g: number, b: number): boolean;
 export * from './const';
 export * from './conversion';