yuyeon 0.3.1-rc.2 → 0.3.1-rc.4

package/lib/abstract/items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"items.mjs","names":["propsFactory","pressItemsPropsOptions","items","type","Array","default","itemKey","String","itemText","itemChildren","Boolean"],"sources":["../../src/abstract/items.ts"],"sourcesContent":["import { PropType } from 'vue';\r\n\r\nimport { propsFactory } from '../util/component';\r\n\r\nexport const pressItemsPropsOptions = propsFactory(\r\n  {\r\n    items: {\r\n      type: Array as PropType<any[]>,\r\n      default: () => [],\r\n    },\r\n    itemKey: {\r\n      type: String as PropType<string>,\r\n      default: 'key',\r\n    },\r\n    itemText: {\r\n      type: String as PropType<string>,\r\n      default: 'text',\r\n    },\r\n    itemChildren: {\r\n      type: [Boolean, String] as PropType<boolean | string>,\r\n      default: 'children',\r\n    },\r\n  },\r\n  'abstract.items',\r\n);\r\n"],"mappings":"SAESA,YAAY;AAErB,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAAwB;IAC9BC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDG,QAAQ,EAAE;IACRL,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDI,YAAY,EAAE;IACZN,IAAI,EAAE,CAACO,OAAO,EAAEH,MAAM,CAA+B;IACrDF,OAAO,EAAE;EACX;AACF,CAAC,EACD,gBACF,CAAC"}
+{"version":3,"file":"items.mjs","names":["propsFactory","pressItemsPropsOptions","items","type","Array","default","itemKey","String","itemText","itemChildren","Boolean"],"sources":["../../src/abstract/items.ts"],"sourcesContent":["import { PropType } from 'vue';\n\nimport { propsFactory } from '../util/component';\n\nexport const pressItemsPropsOptions = propsFactory(\n  {\n    items: {\n      type: Array as PropType<any[]>,\n      default: () => [],\n    },\n    itemKey: {\n      type: String as PropType<string>,\n      default: 'key',\n    },\n    itemText: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    itemChildren: {\n      type: [Boolean, String] as PropType<boolean | string>,\n      default: 'children',\n    },\n  },\n  'abstract.items',\n);\n"],"mappings":"SAESA,YAAY;AAErB,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAAwB;IAC9BC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDG,QAAQ,EAAE;IACRL,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDI,YAAY,EAAE;IACZN,IAAI,EAAE,CAACO,OAAO,EAAEH,MAAM,CAA+B;IACrDF,OAAO,EAAE;EACX;AACF,CAAC,EACD,gBACF,CAAC"}

package/lib/components/alert/YAlert.mjs

@@ -15,8 +15,8 @@ const YAlertPropOptions = {
   outlineColor: String
 };
 
-/**
- * #  Component
+/**
+ * #  Component
  */
 export const YAlert = defineComponent({
   name: NAME,

package/lib/components/alert/YAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAlert.mjs","names":["computed","ref","useRender","defineComponent","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","slots","Object","setup","_ref","el$","variations","split","map","value","trim","filter","v","cssVariables","ret","includes","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toKebabCase } from '@/util/string';\r\n\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YAlert.scss';\r\n\r\nconst NAME = 'YAlert';\r\nconst KEBAB_NAME = toKebabCase(NAME);\r\n\r\nconst YAlertPropOptions = {\r\n  semantic: String as PropType<\r\n    'info' | 'warning' | 'success' | 'error' | string\r\n  >,\r\n  variation: String as PropType<'outlined' | 'filled' | string>,\r\n  color: String as PropType<string>,\r\n  textColor: String as PropType<string>,\r\n  outlineColor: String as PropType<string>,\r\n};\r\n\r\n/**\r\n * #  Component\r\n */\r\nexport const YAlert = defineComponent({\r\n  name: NAME,\r\n  props: {\r\n    ...YAlertPropOptions,\r\n  },\r\n  slots: Object as SlotsType<{\r\n    leading: any;\r\n    trailing: any;\r\n    title: any;\r\n    default: any;\r\n  }>,\r\n  setup(props, { slots }) {\r\n    const el$ = ref<HTMLElement>();\r\n\r\n    const variations = computed(() => {\r\n      const { variation } = props;\r\n      if (variation) {\r\n        return variation\r\n          .split(',')\r\n          .map((value) => {\r\n            return value.trim();\r\n          })\r\n          .filter((v) => !!v);\r\n      }\r\n      return [];\r\n    });\r\n\r\n    const cssVariables = computed(() => {\r\n      const ret: Record<string, string | number> = {};\r\n\r\n      if (props.color) {\r\n        ret['--y-alert-surface-color'] = props.color;\r\n        if (variations.value.includes('filled')) {\r\n          ret['--y-alert-surface-opacity'] = 1;\r\n        } else {\r\n          ret['--y-alert-text-color'] = props.color;\r\n        }\r\n        if (props.textColor) {\r\n          ret['--y-alert-text-color'] = props.textColor;\r\n        }\r\n        if (!props.outlineColor && !props.semantic) {\r\n          ret['--y-alert-outline-color'] = props.color;\r\n        }\r\n      }\r\n      if (props.outlineColor) {\r\n        ret['--y-alert-outline-color'] = props.outlineColor;\r\n      }\r\n      return ret;\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        ref={el$}\r\n        class={[\r\n          KEBAB_NAME,\r\n          {\r\n            [`y-alert--${props.semantic}`]: props.semantic,\r\n            'y-alert--filled': variations.value.includes('filled'),\r\n            'y-alert--outlined': variations.value.includes('outlined'),\r\n          },\r\n        ]}\r\n        style={cssVariables.value}\r\n        v-theme\r\n      >\r\n        <YPlate></YPlate>\r\n        {slots.leading && (\r\n          <div class={['y-alert__leading']}>{slots.leading()}</div>\r\n        )}\r\n        <div class={['y-alert__content']}>\r\n          {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\r\n          {slots.default?.()}\r\n        </div>\r\n        {slots.trailing && (\r\n          <div class={['y-alert__trailing']}>{slots.trailing()}</div>\r\n        )}\r\n      </div>\r\n    ));\r\n  },\r\n});\r\n\r\nexport type YAlert = InstanceType<typeof YAlert>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YAlert.mjs","names":["computed","ref","useRender","defineComponent","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","slots","Object","setup","_ref","el$","variations","split","map","value","trim","filter","v","cssVariables","ret","includes","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent } from '@/util/component';\nimport { toKebabCase } from '@/util/string';\n\nimport { YPlate } from '../plate';\n\nimport './YAlert.scss';\n\nconst NAME = 'YAlert';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YAlertPropOptions = {\n  semantic: String as PropType<\n    'info' | 'warning' | 'success' | 'error' | string\n  >,\n  variation: String as PropType<'outlined' | 'filled' | string>,\n  color: String as PropType<string>,\n  textColor: String as PropType<string>,\n  outlineColor: String as PropType<string>,\n};\n\n/**\n * #  Component\n */\nexport const YAlert = defineComponent({\n  name: NAME,\n  props: {\n    ...YAlertPropOptions,\n  },\n  slots: Object as SlotsType<{\n    leading: any;\n    trailing: any;\n    title: any;\n    default: any;\n  }>,\n  setup(props, { slots }) {\n    const el$ = ref<HTMLElement>();\n\n    const variations = computed(() => {\n      const { variation } = props;\n      if (variation) {\n        return variation\n          .split(',')\n          .map((value) => {\n            return value.trim();\n          })\n          .filter((v) => !!v);\n      }\n      return [];\n    });\n\n    const cssVariables = computed(() => {\n      const ret: Record<string, string | number> = {};\n\n      if (props.color) {\n        ret['--y-alert-surface-color'] = props.color;\n        if (variations.value.includes('filled')) {\n          ret['--y-alert-surface-opacity'] = 1;\n        } else {\n          ret['--y-alert-text-color'] = props.color;\n        }\n        if (props.textColor) {\n          ret['--y-alert-text-color'] = props.textColor;\n        }\n        if (!props.outlineColor && !props.semantic) {\n          ret['--y-alert-outline-color'] = props.color;\n        }\n      }\n      if (props.outlineColor) {\n        ret['--y-alert-outline-color'] = props.outlineColor;\n      }\n      return ret;\n    });\n\n    useRender(() => (\n      <div\n        ref={el$}\n        class={[\n          KEBAB_NAME,\n          {\n            [`y-alert--${props.semantic}`]: props.semantic,\n            'y-alert--filled': variations.value.includes('filled'),\n            'y-alert--outlined': variations.value.includes('outlined'),\n          },\n        ]}\n        style={cssVariables.value}\n        v-theme\n      >\n        <YPlate></YPlate>\n        {slots.leading && (\n          <div class={['y-alert__leading']}>{slots.leading()}</div>\n        )}\n        <div class={['y-alert__content']}>\n          {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\n          {slots.default?.()}\n        </div>\n        {slots.trailing && (\n          <div class={['y-alert__trailing']}>{slots.trailing()}</div>\n        )}\n      </div>\n    ));\n  },\n});\n\nexport type YAlert = InstanceType<typeof YAlert>;\n"],"mappings":"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"}

package/lib/components/alert/YAlert.scss

@@ -1,77 +1,77 @@
-.y-alert {
-  --y-alert-text-color: var(--y-theme-base-font);
-  --y-alert-surface-color: var(--y-theme-base-font);
-  --y-alert-surface-opacity: var(--y-theme-outline-opacity);
-  --y-alert-outline-color: var(--y-theme-outline);
-
-  display: flex;
-  position: relative;
-  padding: 16px 24px;
-  color: var(--y-alert-text-color);
-  align-self: flex-start;
-
-  &__title {
-    font-size: 1.1rem;
-    font-weight: 600;
-    line-height: 1.74;
-    padding-bottom: 0.12rem;
-    margin-top: -2px;
-  }
-
-  &__content {
-    flex: 1 1;
-    min-width: 0;
-    padding-top: 2px;
-    position: relative;
-  }
-
-  &__leading,
-  &__trailing {
-    flex: 0 0 auto;
-    position: relative;
-  }
-
-  &__leading {
-    padding-right: 12px;
-    margin-top: 0.2rem;
-  }
-
-  &__trailing {
-    padding-left: 12px;
-  }
-
-  .y-plate {
-    border-radius: inherit;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background: var(--y-alert-surface-color);
-      opacity: var(--y-alert-surface-opacity);
-    }
-  }
-
-  &--outlined {
-    .y-plate {
-      border: 1px solid var(--y-alert-outline-color);
-    }
-  }
-
-  $semantics: ('info', 'success', 'warning', 'error');
-
-  @mixin defineSemantic($name) {
-    &--#{$name} {
-      --y-alert-text-color: var(--y-theme-#{$name});
-      --y-alert-surface-color: var(--y-theme-#{$name});
-      --y-alert-outline-color: var(--y-theme-#{$name});
-    }
-  }
-
-  @each $name in $semantics {
-    @include defineSemantic($name);
-  }
-}
+.y-alert {
+  --y-alert-text-color: var(--y-theme-base-font);
+  --y-alert-surface-color: var(--y-theme-base-font);
+  --y-alert-surface-opacity: var(--y-theme-outline-opacity);
+  --y-alert-outline-color: var(--y-theme-outline);
+
+  display: flex;
+  position: relative;
+  padding: 16px 24px;
+  color: var(--y-alert-text-color);
+  align-self: flex-start;
+
+  &__title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.74;
+    padding-bottom: 0.12rem;
+    margin-top: -2px;
+  }
+
+  &__content {
+    flex: 1 1;
+    min-width: 0;
+    padding-top: 2px;
+    position: relative;
+  }
+
+  &__leading,
+  &__trailing {
+    flex: 0 0 auto;
+    position: relative;
+  }
+
+  &__leading {
+    padding-right: 12px;
+    margin-top: 0.2rem;
+  }
+
+  &__trailing {
+    padding-left: 12px;
+  }
+
+  .y-plate {
+    border-radius: inherit;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background: var(--y-alert-surface-color);
+      opacity: var(--y-alert-surface-opacity);
+    }
+  }
+
+  &--outlined {
+    .y-plate {
+      border: 1px solid var(--y-alert-outline-color);
+    }
+  }
+
+  $semantics: ('info', 'success', 'warning', 'error');
+
+  @mixin defineSemantic($name) {
+    &--#{$name} {
+      --y-alert-text-color: var(--y-theme-#{$name});
+      --y-alert-surface-color: var(--y-theme-#{$name});
+      --y-alert-outline-color: var(--y-theme-#{$name});
+    }
+  }
+
+  @each $name in $semantics {
+    @include defineSemantic($name);
+  }
+}

package/lib/components/app/YApp.mjs

@@ -2,8 +2,8 @@ import { h } from 'vue';
 import { defineComponent } from "../../util/component/index.mjs";
 import "./YApp.scss";
 
-/**
- * # App Component
+/**
+ * # App Component
  */
 export const YApp = defineComponent({
   name: 'YApp',

package/lib/components/app/YApp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YApp.mjs","names":["h","defineComponent","YApp","name","setup","_props","_ref","slots","class"],"sources":["../../../src/components/app/YApp.ts"],"sourcesContent":["import { h } from 'vue';\r\n\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YApp.scss';\r\n\r\n/**\r\n * # App Component\r\n */\r\nexport const YApp = defineComponent({\r\n  name: 'YApp',\r\n  setup(_props, { slots }) {\r\n    return () =>\r\n      h(\r\n        'div',\r\n        { class: 'y-app' },\r\n        h('div', { class: 'y-app__container' }, slots),\r\n      );\r\n  },\r\n});\r\n\r\nexport type YApp = InstanceType<typeof YApp>;\r\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAGD,eAAe,CAAC;EAClCE,IAAI,EAAE,MAAM;EACZC,KAAKA,CAACC,MAAM,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,OAAO,MACLN,CAAC,CACC,KAAK,EACL;MAAEQ,KAAK,EAAE;IAAQ,CAAC,EAClBR,CAAC,CAAC,KAAK,EAAE;MAAEQ,KAAK,EAAE;IAAmB,CAAC,EAAED,KAAK,CAC/C,CAAC;EACL;AACF,CAAC,CAAC"}
+{"version":3,"file":"YApp.mjs","names":["h","defineComponent","YApp","name","setup","_props","_ref","slots","class"],"sources":["../../../src/components/app/YApp.ts"],"sourcesContent":["import { h } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nimport './YApp.scss';\n\n/**\n * # App Component\n */\nexport const YApp = defineComponent({\n  name: 'YApp',\n  setup(_props, { slots }) {\n    return () =>\n      h(\n        'div',\n        { class: 'y-app' },\n        h('div', { class: 'y-app__container' }, slots),\n      );\n  },\n});\n\nexport type YApp = InstanceType<typeof YApp>;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAGD,eAAe,CAAC;EAClCE,IAAI,EAAE,MAAM;EACZC,KAAKA,CAACC,MAAM,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,OAAO,MACLN,CAAC,CACC,KAAK,EACL;MAAEQ,KAAK,EAAE;IAAQ,CAAC,EAClBR,CAAC,CAAC,KAAK,EAAE;MAAEQ,KAAK,EAAE;IAAmB,CAAC,EAAED,KAAK,CAC/C,CAAC;EACL;AACF,CAAC,CAAC"}

package/lib/components/bench/YBench.mjs

@@ -22,8 +22,8 @@ const YBenchPropOptions = {
   }
 };
 
-/**
- * # Base Component
+/**
+ * # Base Component
  */
 export const YBench = defineComponent({
   name: NAME,

package/lib/components/bench/YBench.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YBench.mjs","names":["ref","useRender","defineComponent","NAME","YBenchPropOptions","tag","type","String","default","position","floating","Boolean","width","Number","YBench","name","setup","looseProps","_ref","slots","props","defineProps","el$","_createVNode"],"sources":["../../../src/components/bench/YBench.tsx"],"sourcesContent":["import { type PropType, ref } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nconst NAME = 'YBench';\r\n\r\nconst YBenchPropOptions = {\r\n  tag: {\r\n    type: String as PropType<string>,\r\n    default: 'div',\r\n  },\r\n  position: {\r\n    type: String as PropType<'top' | 'left' | 'right' | 'bottom'>,\r\n    default: 'top',\r\n  },\r\n  floating: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: false,\r\n  },\r\n  width: {\r\n    type: [String, Number] as PropType<string | number>,\r\n    default: 48,\r\n  },\r\n};\r\n\r\n/**\r\n * # Base Component\r\n */\r\nexport const YBench = defineComponent({\r\n  name: NAME,\r\n  setup(looseProps, { slots }) {\r\n    const props = defineProps(YBenchPropOptions);\r\n    const el$ = ref<HTMLElement>();\r\n\r\n    useRender(() => <props.tag ref={el$}>{slots.default?.()}</props.tag>);\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAAwBA,GAAG,QAAQ,KAAK;AAAC,SAEhCC,SAAS;AAAA,SACTC,eAAe;AAExB,MAAMC,IAAI,GAAG,QAAQ;AAErB,MAAMC,iBAAiB,GAAG;EACxBC,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEC,MAAuD;IAC7DC,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEK,OAA4B;IAClCH,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLN,IAAI,EAAE,CAACC,MAAM,EAAEM,MAAM,CAA8B;IACnDL,OAAO,EAAE;EACX;AACF,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMM,MAAM,GAAGZ,eAAe,CAAC;EACpCa,IAAI,EAAEZ,IAAI;EACVa,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,KAAK,GAAGC,WAAW,CAACjB,iBAAiB,CAAC;IAC5C,MAAMkB,GAAG,GAAGtB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAsB,YAAA,CAAAH,KAAA,CAAAf,GAAA;MAAA,OAAsBiB;IAAG;MAAAd,OAAA,EAAAA,CAAA,MAAGW,KAAK,CAACX,OAAO,GAAG,CAAC;IAAA,EAAa,CAAC;EACvE;AACF,CAAC,CAAC"}
+{"version":3,"file":"YBench.mjs","names":["ref","useRender","defineComponent","NAME","YBenchPropOptions","tag","type","String","default","position","floating","Boolean","width","Number","YBench","name","setup","looseProps","_ref","slots","props","defineProps","el$","_createVNode"],"sources":["../../../src/components/bench/YBench.tsx"],"sourcesContent":["import { type PropType, ref } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent } from '@/util/component';\n\nconst NAME = 'YBench';\n\nconst YBenchPropOptions = {\n  tag: {\n    type: String as PropType<string>,\n    default: 'div',\n  },\n  position: {\n    type: String as PropType<'top' | 'left' | 'right' | 'bottom'>,\n    default: 'top',\n  },\n  floating: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  width: {\n    type: [String, Number] as PropType<string | number>,\n    default: 48,\n  },\n};\n\n/**\n * # Base Component\n */\nexport const YBench = defineComponent({\n  name: NAME,\n  setup(looseProps, { slots }) {\n    const props = defineProps(YBenchPropOptions);\n    const el$ = ref<HTMLElement>();\n\n    useRender(() => <props.tag ref={el$}>{slots.default?.()}</props.tag>);\n  },\n});\n"],"mappings":";AAAA,SAAwBA,GAAG,QAAQ,KAAK;AAAC,SAEhCC,SAAS;AAAA,SACTC,eAAe;AAExB,MAAMC,IAAI,GAAG,QAAQ;AAErB,MAAMC,iBAAiB,GAAG;EACxBC,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEC,MAAuD;IAC7DC,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEK,OAA4B;IAClCH,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLN,IAAI,EAAE,CAACC,MAAM,EAAEM,MAAM,CAA8B;IACnDL,OAAO,EAAE;EACX;AACF,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMM,MAAM,GAAGZ,eAAe,CAAC;EACpCa,IAAI,EAAEZ,IAAI;EACVa,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,KAAK,GAAGC,WAAW,CAACjB,iBAAiB,CAAC;IAC5C,MAAMkB,GAAG,GAAGtB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAsB,YAAA,CAAAH,KAAA,CAAAf,GAAA;MAAA,OAAsBiB;IAAG;MAAAd,OAAA,EAAAA,CAAA,MAAGW,KAAK,CAACX,OAAO,GAAG,CAAC;IAAA,EAAa,CAAC;EACvE;AACF,CAAC,CAAC"}

package/lib/components/button/YButton.scss

@@ -1,137 +1,137 @@
-@use '../../styles/variables';
-
-$button-border-radius: variables.$border-radius-root !default;
-$button-before-opacity: 0.06 !default;
-$button-disabled-background: #d3d3d3 !default;
-
-.y-button {
-  --y-button__color: var(--y-theme-primary);
-  --y-button__text-color: var(--y-theme-on-primary);
-  --y-button__disabled-background: #{$button-disabled-background};
-
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: $button-border-radius;
-  font-weight: 500;
-  transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
-  text-decoration: none;
-
-  &:before {
-    background-color: currentColor;
-    border-radius: inherit;
-    bottom: 0;
-    color: inherit;
-    content: '';
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-  }
-
-  &:hover:before {
-    opacity: 0.06;
-  }
-
-  & {
-    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);
-    }
-  }
-
-  &--filled {
-    background-color: var(--y-button__color);
-    color: var(--y-button__text-color);
-  }
-
-  &--text {
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &--disabled {
-    background-color: var(--y-button__disabled-background);
-    opacity: 0.4;
-    cursor: default;
-    box-shadow: none;
-  }
-
-  &--rounded {
-    border-radius: 10vh;
-  }
-
-  &--outlined {
-    //color: rgba(var(--y-button__color), 1);
-    border-width: 1px;
-    border-style: solid;
-    border-color: currentColor;
-    box-shadow: none;
-  }
-
-  &--color:not(&--filled) {
-    color: var(--y-button__color);
-  }
-
-  &--loading {
-    cursor: wait;
-    box-shadow: none;
-
-    .y-spinner-ring {
-      margin-right: 0.4em;
-      width: 1em;
-      height: 1em;
-    }
-  }
-
-  &:active:not(&--loading) {
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14);
-  }
-
-  &--small {
-    height: 24px;
-    font-size: 0.4rem;
-  }
-
-  &--small & {
-    &__content {
-      padding: 4px 6px;
-    }
-  }
-
-  &--icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-
-    @at-root &.y-button--small {
-      width: 32px;
-      height: 32px;
-
-      .y-button__content {
-        padding: 4px;
-      }
-    }
-
-    @at-root &.y-button--x-small {
-      width: 24px;
-      height: 24px;
-
-      .y-button__content {
-        padding: 4px;
-      }
-    }
-  }
-
-  &__content {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-  }
-}
+@use '../../styles/variables';
+
+$button-border-radius: variables.$border-radius-root !default;
+$button-before-opacity: 0.06 !default;
+$button-disabled-background: #d3d3d3 !default;
+
+.y-button {
+  --y-button__color: var(--y-theme-primary);
+  --y-button__text-color: var(--y-theme-on-primary);
+  --y-button__disabled-background: #{$button-disabled-background};
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: $button-border-radius;
+  font-weight: 500;
+  transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+  text-decoration: none;
+
+  &:before {
+    background-color: currentColor;
+    border-radius: inherit;
+    bottom: 0;
+    color: inherit;
+    content: '';
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  &:hover:before {
+    opacity: 0.06;
+  }
+
+  & {
+    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);
+    }
+  }
+
+  &--filled {
+    background-color: var(--y-button__color);
+    color: var(--y-button__text-color);
+  }
+
+  &--text {
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &--disabled {
+    background-color: var(--y-button__disabled-background);
+    opacity: 0.4;
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &--rounded {
+    border-radius: 10vh;
+  }
+
+  &--outlined {
+    //color: rgba(var(--y-button__color), 1);
+    border-width: 1px;
+    border-style: solid;
+    border-color: currentColor;
+    box-shadow: none;
+  }
+
+  &--color:not(&--filled) {
+    color: var(--y-button__color);
+  }
+
+  &--loading {
+    cursor: wait;
+    box-shadow: none;
+
+    .y-spinner-ring {
+      margin-right: 0.4em;
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  &:active:not(&--loading) {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14);
+  }
+
+  &--small {
+    height: 24px;
+    font-size: 0.4rem;
+  }
+
+  &--small & {
+    &__content {
+      padding: 4px 6px;
+    }
+  }
+
+  &--icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+
+    @at-root &.y-button--small {
+      width: 32px;
+      height: 32px;
+
+      .y-button__content {
+        padding: 4px;
+      }
+    }
+
+    @at-root &.y-button--x-small {
+      width: 24px;
+      height: 24px;
+
+      .y-button__content {
+        padding: 4px;
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+  }
+}

package/lib/components/card/YCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YCard.mjs","names":["h","useRender","pressThemePropsOptions","useLocalTheme","defineComponent","YCard","name","props","outline","type","Boolean","setup","_ref","slots","themeClasses","class","value","default"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import { type PropType, h } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YCard.scss';\r\n\r\nexport const YCard = defineComponent({\r\n  name: 'YCard',\r\n  props: {\r\n    outline: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    ...pressThemePropsOptions(),\r\n  },\r\n  setup(props, { slots }) {\r\n    const { themeClasses } = useLocalTheme(props);\r\n\r\n    useRender(() =>\r\n      h(\r\n        'div',\r\n        {\r\n          class: [\r\n            'y-card',\r\n            { 'y-card--outlined': props.outline },\r\n            themeClasses.value,\r\n          ],\r\n        },\r\n        slots.default?.(),\r\n      ),\r\n    );\r\n  },\r\n});\r\n\r\nexport type YCard = InstanceType<typeof YCard>;\r\n"],"mappings":"AAAA,SAAwBA,CAAC,QAAQ,KAAK;AAAC,SAE9BC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,eAAe;AAExB;AAEA,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;EACnCE,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR,CAAC;IACD,GAAGR,sBAAsB,CAAC;EAC5B,CAAC;EACDS,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE;IAAa,CAAC,GAAGX,aAAa,CAACI,KAAK,CAAC;IAE7CN,SAAS,CAAC,MACRD,CAAC,CACC,KAAK,EACL;MACEe,KAAK,EAAE,CACL,QAAQ,EACR;QAAE,kBAAkB,EAAER,KAAK,CAACC;MAAQ,CAAC,EACrCM,YAAY,CAACE,KAAK;IAEtB,CAAC,EACDH,KAAK,CAACI,OAAO,GAAG,CAClB,CACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YCard.mjs","names":["h","useRender","pressThemePropsOptions","useLocalTheme","defineComponent","YCard","name","props","outline","type","Boolean","setup","_ref","slots","themeClasses","class","value","default"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import { type PropType, h } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\nimport { defineComponent } from '@/util/component';\n\nimport './YCard.scss';\n\nexport const YCard = defineComponent({\n  name: 'YCard',\n  props: {\n    outline: {\n      type: Boolean as PropType<boolean>,\n    },\n    ...pressThemePropsOptions(),\n  },\n  setup(props, { slots }) {\n    const { themeClasses } = useLocalTheme(props);\n\n    useRender(() =>\n      h(\n        'div',\n        {\n          class: [\n            'y-card',\n            { 'y-card--outlined': props.outline },\n            themeClasses.value,\n          ],\n        },\n        slots.default?.(),\n      ),\n    );\n  },\n});\n\nexport type YCard = InstanceType<typeof YCard>;\n"],"mappings":"AAAA,SAAwBA,CAAC,QAAQ,KAAK;AAAC,SAE9BC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,eAAe;AAExB;AAEA,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;EACnCE,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR,CAAC;IACD,GAAGR,sBAAsB,CAAC;EAC5B,CAAC;EACDS,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE;IAAa,CAAC,GAAGX,aAAa,CAACI,KAAK,CAAC;IAE7CN,SAAS,CAAC,MACRD,CAAC,CACC,KAAK,EACL;MACEe,KAAK,EAAE,CACL,QAAQ,EACR;QAAE,kBAAkB,EAAER,KAAK,CAACC;MAAQ,CAAC,EACrCM,YAAY,CAACE,KAAK;IAEtB,CAAC,EACDH,KAAK,CAACI,OAAO,GAAG,CAClB,CACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/card/YCard.scss

@@ -1,45 +1,45 @@
-@use '../../styles/variables';
-
-$card__border-radius: variables.$border-radius-root !default;
-$card__padding: 24px;
-
-.y-card {
-  --y-card__border-radius: #{$card__border-radius};
-  --y-card__default-background: #ffffff;
-  --y-card__background: var(
-    --y-theme-surface,
-    var(--y-card__default-background)
-  );
-  --y-card__outline-color: var(--y-theme-outline);
-
-  background-color: var(--y-card__background);
-  border-radius: var(--y-card__border-radius, $card__border-radius);
-
-  &__header {
-    padding: $card__padding $card__padding 0;
-    display: flex;
-  }
-
-  &__body {
-    padding: 0 $card__padding;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__footer {
-    padding: 12px 24px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-title {
-    font-weight: bolder;
-    font-size: 1.12em;
-  }
-
-  &--outlined {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--y-card__outline-color);
-  }
-}
+@use '../../styles/variables';
+
+$card__border-radius: variables.$border-radius-root !default;
+$card__padding: 24px;
+
+.y-card {
+  --y-card__border-radius: #{$card__border-radius};
+  --y-card__default-background: #ffffff;
+  --y-card__background: var(
+    --y-theme-surface,
+    var(--y-card__default-background)
+  );
+  --y-card__outline-color: var(--y-theme-outline);
+
+  background-color: var(--y-card__background);
+  border-radius: var(--y-card__border-radius, $card__border-radius);
+
+  &__header {
+    padding: $card__padding $card__padding 0;
+    display: flex;
+  }
+
+  &__body {
+    padding: 0 $card__padding;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__footer {
+    padding: 12px 24px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-title {
+    font-weight: bolder;
+    font-size: 1.12em;
+  }
+
+  &--outlined {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--y-card__outline-color);
+  }
+}

package/lib/components/card/YCardBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YCardBody.mjs","names":["h","defineComponent","YCardBody","name","render","class","$slots","default"],"sources":["../../../src/components/card/YCardBody.ts"],"sourcesContent":["import { h } from 'vue';\r\n\r\nimport { defineComponent } from '@/util/component';\r\n\r\nexport const YCardBody = defineComponent({\r\n  name: 'YCardBody',\r\n  render() {\r\n    return h('div', { class: 'y-card__body' }, this.$slots.default?.());\r\n  },\r\n});\r\n\r\nexport type YCardBody = InstanceType<typeof YCardBody>;\r\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB,OAAO,MAAMC,SAAS,GAAGD,eAAe,CAAC;EACvCE,IAAI,EAAE,WAAW;EACjBC,MAAMA,CAAA,EAAG;IACP,OAAOJ,CAAC,CAAC,KAAK,EAAE;MAAEK,KAAK,EAAE;IAAe,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,OAAO,GAAG,CAAC,CAAC;EACrE;AACF,CAAC,CAAC"}
+{"version":3,"file":"YCardBody.mjs","names":["h","defineComponent","YCardBody","name","render","class","$slots","default"],"sources":["../../../src/components/card/YCardBody.ts"],"sourcesContent":["import { h } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nexport const YCardBody = defineComponent({\n  name: 'YCardBody',\n  render() {\n    return h('div', { class: 'y-card__body' }, this.$slots.default?.());\n  },\n});\n\nexport type YCardBody = InstanceType<typeof YCardBody>;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB,OAAO,MAAMC,SAAS,GAAGD,eAAe,CAAC;EACvCE,IAAI,EAAE,WAAW;EACjBC,MAAMA,CAAA,EAAG;IACP,OAAOJ,CAAC,CAAC,KAAK,EAAE;MAAEK,KAAK,EAAE;IAAe,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,OAAO,GAAG,CAAC,CAAC;EACrE;AACF,CAAC,CAAC"}

package/lib/components/card/YCardFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YCardFooter.mjs","names":["h","defineComponent","YCardFooter","name","render","class","$slots","default"],"sources":["../../../src/components/card/YCardFooter.ts"],"sourcesContent":["import { h } from 'vue';\r\n\r\nimport { defineComponent } from '@/util/component';\r\n\r\nexport const YCardFooter = defineComponent({\r\n  name: 'YCardFooter',\r\n  render() {\r\n    return h('div', { class: 'y-card__footer' }, this.$slots.default?.());\r\n  },\r\n});\r\n\r\nexport type YCardFooter = InstanceType<typeof YCardFooter>;\r\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;EACzCE,IAAI,EAAE,aAAa;EACnBC,MAAMA,CAAA,EAAG;IACP,OAAOJ,CAAC,CAAC,KAAK,EAAE;MAAEK,KAAK,EAAE;IAAiB,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,OAAO,GAAG,CAAC,CAAC;EACvE;AACF,CAAC,CAAC"}
+{"version":3,"file":"YCardFooter.mjs","names":["h","defineComponent","YCardFooter","name","render","class","$slots","default"],"sources":["../../../src/components/card/YCardFooter.ts"],"sourcesContent":["import { h } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nexport const YCardFooter = defineComponent({\n  name: 'YCardFooter',\n  render() {\n    return h('div', { class: 'y-card__footer' }, this.$slots.default?.());\n  },\n});\n\nexport type YCardFooter = InstanceType<typeof YCardFooter>;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;EACzCE,IAAI,EAAE,aAAa;EACnBC,MAAMA,CAAA,EAAG;IACP,OAAOJ,CAAC,CAAC,KAAK,EAAE;MAAEK,KAAK,EAAE;IAAiB,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,OAAO,GAAG,CAAC,CAAC;EACvE;AACF,CAAC,CAAC"}