yuyeon 0.0.21 → 0.0.23

package/lib/components/button/YButton.mjs

@@ -92,8 +92,8 @@ export const YButton = defineComponent({
       } = this;
       let textColor;
       if (color && !isColorValue(color)) {
-        color = `rgba(var(--y-theme-${color}), 1)`;
-        textColor = `rgba(var(--y-theme-on-${this.color}), 1)`;
+        color = `var(--y-theme-${color})`;
+        textColor = `var(--y-theme-on-${this.color})`;
       }
       return {
         [`--y-button__color`]: color,

package/lib/components/button/YButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YButton.mjs","names":["defineComponent","h","withDirectives","PlateWave","isColorValue","getSlot","propsFactory","YSpinnerRing","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","textColor","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { PropType, VNodeArrayChildren } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { getSlot, propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    disabled: {\n      type: Boolean,\n    },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    text: {\n      type: Boolean,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: {\n    ...pressYButtonProps(),\n  },\n  computed: {\n    variations(): any[] {\n      const { variation } = this;\n      if (variation) {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    },\n    //\n    classes() {\n      const { variations, outlined, rounded, filled, text, small, icon } = this;\n      return {\n        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.includes('filled') || filled,\n        [`${NAME}--text`]: variations.includes('text') || text,\n        [`${NAME}--small`]: variations.includes('small') || small,\n        [`${NAME}--icon`]: variations.includes('icon') || icon,\n        [`${NAME}--color`]: this.color,\n        [`${NAME}--loading`]: this.loading,\n        [`${NAME}--disabled`]: this.disabled,\n      };\n    },\n    styles(): Record<string, any> {\n      let { color } = this;\n      let textColor: string | undefined;\n      if (color && !isColorValue(color)) {\n        color = `rgba(var(--y-theme-${color}), 1)`;\n        textColor = `rgba(var(--y-theme-on-${this.color}), 1)`;\n      }\n      return {\n        [`--y-button__color`]: color,\n        [`--y-button__text-color`]: textColor,\n      };\n    },\n  },\n  methods: {\n    createContent() {\n      const defaultSlot = getSlot(this, 'default');\n      const children: VNodeArrayChildren = [];\n      if (this.loading) {\n        children.push(h(YSpinnerRing, { width: '24', height: '24' }));\n      }\n      children.push(defaultSlot);\n      return h('span', { class: 'y-button__content' }, children);\n    },\n    getClasses() {\n      return this.classes;\n    },\n    /// Events\n    onClick(e: MouseEvent) {\n      e.preventDefault();\n      if (this.loading) {\n        return;\n      }\n    },\n  },\n  render() {\n    const { onClick, styles, noWave, loading } = this;\n    return withDirectives(\n      h(\n        'button',\n        {\n          class: {\n            ...this.getClasses(),\n            [`${NAME}`]: true,\n          },\n          style: styles,\n          onClick,\n          '^disabled': this.disabled ? true : undefined,\n        },\n        this.createContent(),\n      ),\n      [[PlateWave, !noWave && !loading]],\n    );\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
+{"version":3,"file":"YButton.mjs","names":["defineComponent","h","withDirectives","PlateWave","isColorValue","getSlot","propsFactory","YSpinnerRing","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","textColor","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { PropType, VNodeArrayChildren } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { getSlot, propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    disabled: {\n      type: Boolean,\n    },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    text: {\n      type: Boolean,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: {\n    ...pressYButtonProps(),\n  },\n  computed: {\n    variations(): any[] {\n      const { variation } = this;\n      if (variation) {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    },\n    //\n    classes() {\n      const { variations, outlined, rounded, filled, text, small, icon } = this;\n      return {\n        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.includes('filled') || filled,\n        [`${NAME}--text`]: variations.includes('text') || text,\n        [`${NAME}--small`]: variations.includes('small') || small,\n        [`${NAME}--icon`]: variations.includes('icon') || icon,\n        [`${NAME}--color`]: this.color,\n        [`${NAME}--loading`]: this.loading,\n        [`${NAME}--disabled`]: this.disabled,\n      };\n    },\n    styles(): Record<string, any> {\n      let { color } = this;\n      let textColor: string | undefined;\n      if (color && !isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n        textColor = `var(--y-theme-on-${this.color})`;\n      }\n      return {\n        [`--y-button__color`]: color,\n        [`--y-button__text-color`]: textColor,\n      };\n    },\n  },\n  methods: {\n    createContent() {\n      const defaultSlot = getSlot(this, 'default');\n      const children: VNodeArrayChildren = [];\n      if (this.loading) {\n        children.push(h(YSpinnerRing, { width: '24', height: '24' }));\n      }\n      children.push(defaultSlot);\n      return h('span', { class: 'y-button__content' }, children);\n    },\n    getClasses() {\n      return this.classes;\n    },\n    /// Events\n    onClick(e: MouseEvent) {\n      e.preventDefault();\n      if (this.loading) {\n        return;\n      }\n    },\n  },\n  render() {\n    const { onClick, styles, noWave, loading } = this;\n    return withDirectives(\n      h(\n        'button',\n        {\n          class: {\n            ...this.getClasses(),\n            [`${NAME}`]: true,\n          },\n          style: styles,\n          onClick,\n          '^disabled': this.disabled ? true : undefined,\n        },\n        this.createContent(),\n      ),\n      [[PlateWave, !noWave && !loading]],\n    );\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}

package/lib/components/card/YCard.scss

@@ -6,10 +6,10 @@ $card__padding: 24px;
 
 .y-card {
   --y-card__border-radius: #{$card__border-radius};
-  --y-card__default-background: 255, 255, 255;
+  --y-card__default-background: #ffffff;
   --y-card__background: var(--y-theme-surface, var(--y-card__default-background));
 
-  background-color: rgba(var(--y-card__background), 1);
+  background-color: var(--y-card__background);
   border-radius: var(--y-card__border-radius, $card__border-radius);
 
   &__header {

package/lib/components/checkbox/YInputCheckbox.scss

@@ -4,7 +4,7 @@ $checkbox__color: palette.$primary;
 $checkbox__border-color: #a4a4a4;
 
 .y-input--checkbox {
-  --y-checkbox__color: var(--y-theme-primary);
+  --y-checkbox__color: var(--y-theme-primary-rgb);
 
   position: relative;
   width: 24px;

package/lib/components/icons/YIconCheckbox.scss

@@ -1,5 +1,5 @@
 .y-icon-checkbox {
-  --y-icon-checkbox__color: var(--y-theme-primary);
+  --y-icon-checkbox__color: var(--y-theme-primary-rgb);
   --y-icon-checkbox__border-color: 180, 180, 180;
   position: relative;
 

package/lib/components/input/YInput.scss

@@ -148,7 +148,7 @@ $input-border-radius: variables.$border-radius-root !default;
       }
       //
       &__plate {
-        background: rgba(var(--y-theme-on-surface, var(--y-input-default-filled)), var(--y-input-filled-opacity));
+        background: rgba(var(--y-theme-on-surface-rgb, var(--y-input-default-filled)), var(--y-input-filled-opacity));
       }
 
       &__display:hover {
@@ -163,7 +163,7 @@ $input-border-radius: variables.$border-radius-root !default;
 
     .y-input {
       &__plate {
-        border: 1px solid rgba(var(--y-theme-outline), var(--y-input-outlined-opacity));
+        border: 1px solid rgba(var(--y-theme-outline-rgb), var(--y-input-outlined-opacity));
         box-sizing: border-box;
         inset: 0;
 
@@ -209,7 +209,7 @@ $input-border-radius: variables.$border-radius-root !default;
 
     .y-input__plate {
       outline: 1px solid rgba(var(--y-theme-primary, #4f97dc), 0.1);
-      border-color: rgba(var(--y-input-focused-color), 1);
+      border-color: var(--y-input-focused-color);
     }
 
     .y-input__leading {
@@ -224,22 +224,22 @@ $input-border-radius: variables.$border-radius-root !default;
   &--error {
     &.y-input--outlined {
       .y-input__plate {
-        border-color: palette.$alert-negative !important;
+        border-color: var(--y-palette-negative) !important;
       }
     }
     .y-input__helper-text {
-      color: palette.$alert-negative;
+      color: var(--y-palette-negative);
     }
   }
 
   &--success {
     &.y-input--outlined {
       .y-input__plate {
-        border-color: palette.$alert-positive !important;
+        border-color: var(--y-palette-positive) !important;
       }
     }
     .y-input__helper-text {
-      color: palette.$alert-positive;
+      color: var(--y-palette-positive);
     }
   }
 }

package/lib/components/layer/YLayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","mergeProps","reactive","ref","shallowRef","toRef","watchEffect","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressYLayerProps","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","modal","contentStyles","default","disabled","openOnHover","openDelay","Number","closeDelay","YLayer","name","inheritAttrs","components","directives","props","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinate","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\nimport {\n  Teleport,\n  Transition,\n  computed,\n  defineComponent,\n  mergeProps,\n  reactive,\n  ref,\n  shallowRef,\n  toRef,\n  watchEffect,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport {\n  pressCoordinateProps,\n  useCoordinate,\n} from '../../composables/coordinate';\nimport {\n  pressDimensionPropsOptions,\n  useDimension,\n} from '../../composables/dimension';\nimport { useLayerGroup } from '../../composables/layer-group';\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\nimport { useLazy } from '../../composables/timing';\nimport {\n  PolyTransition,\n  polyTransitionPropOptions,\n  usePolyTransition,\n} from '../../composables/transition';\nimport {\n  ComplementClick,\n  ComplementClickBindingOptions,\n} from '../../directives/complement-click';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\n\nimport './YLayer.scss';\n\nexport const pressYLayerProps = propsFactory(\n  {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    scrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    eager: {\n      type: Boolean as PropType<boolean>,\n    },\n    classes: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    contentClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    closeClickScrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    modal: Boolean as PropType<boolean>,\n    contentStyles: {\n      type: Object as PropType<CSSProperties>,\n      default: () => {},\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    openOnHover: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    openDelay: {\n      type: Number as PropType<number>,\n      default: 200,\n    },\n    closeDelay: {\n      type: Number as PropType<number>,\n      default: 200,\n    },\n    ...pressThemePropsOptions(),\n    ...polyTransitionPropOptions,\n    ...pressCoordinateProps(),\n    ...pressDimensionPropsOptions(),\n  },\n  'YLayer',\n);\n\nexport const YLayer = defineComponent({\n  name: 'YLayer',\n  inheritAttrs: false,\n  components: {\n    PolyTransition,\n  },\n  directives: {\n    ComplementClick,\n  },\n  props: {\n    ...pressYLayerProps(),\n  },\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'click:complement': (mouseEvent: MouseEvent) => true,\n    afterLeave: () => true,\n  },\n  setup(props, { emit, expose, attrs, slots }) {\n    const base$ = ref();\n    const scrim$ = ref<HTMLElement>();\n    const content$ = ref<HTMLElement>();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n\n    const { themeClasses } = useLocalTheme(props);\n    const { layerGroup } = useLayerGroup();\n    const { polyTransitionBindProps } = usePolyTransition(props);\n    const { dimensionStyles } = useDimension(props);\n    const active = computed<boolean>({\n      get: (): boolean => {\n        return !!props.modelValue;\n      },\n      set: (v: boolean) => {\n        emit('update:modelValue', v);\n      },\n    });\n    const finish = shallowRef(false);\n\n    const disabled = toRef(props, 'disabled');\n    const { lazyValue, onAfterUpdate } = useLazy(\n      !!toRef(props, 'eager'),\n      active,\n    );\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n\n    const { coordinate, coordinateStyles, updateCoordinate } = useCoordinate(\n      props,\n      { contentEl: content$, baseEl, active },\n    );\n\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\n      emit('click:complement', mouseEvent);\n      if (!props.modal) {\n        if (\n          scrim$.value !== null &&\n          scrim$.value === mouseEvent.target &&\n          props.closeClickScrim\n        ) {\n          active.value = false;\n        }\n      } else {\n        // TODO: shrug ani\n      }\n    }\n\n    function closeConditional(): boolean {\n      return (\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n        active.value\n      ); // TODO: && groupTopLevel.value;\n    }\n\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\n      handler: onClickComplementLayer,\n      determine: closeConditional,\n      include: () => [baseEl.value],\n    });\n\n    function onAfterEnter() {\n      finish.value = true;\n    }\n\n    function onAfterLeave() {\n      onAfterUpdate();\n      finish.value = false;\n      emit('afterLeave');\n    }\n\n    function onClickScrim() {\n      if (props.closeClickScrim) {\n        active.value = false;\n      }\n    }\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        baseEl.value = baseFromSlotEl.value;\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    const computedStyle = computed(() => {\n      return {\n        zIndex: '2000',\n      };\n    });\n\n    const computedClass = computed<Record<string, boolean>>(() => {\n      const { classes } = props;\n      const boundClasses = bindClasses(classes);\n      return {\n        ...boundClasses,\n        'y-layer--active': !!active.value,\n      };\n    });\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n      };\n    });\n\n    const hovered = ref(false);\n\n    function onMouseenter(event: Event) {\n      hovered.value = true;\n    }\n\n    function onMouseleave(event: Event) {\n      hovered.value = false;\n    }\n\n    expose({\n      scrim$,\n      base$,\n      content$,\n      baseEl,\n      active,\n      onAfterUpdate,\n      updateCoordinate,\n      hovered,\n    });\n\n    useRender(() => {\n      const slotBase = slots.base?.({\n        active: active.value,\n        props: mergeProps({\n          ref: base$,\n          class: {\n            'y-layer-base': true,\n            'y-layer-base--active': active.value,\n          },\n        }),\n      });\n      baseSlot.value = slotBase;\n      return (\n        <>\n          {slotBase}\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n            {rendered.value && (\n              <div\n                class={{\n                  'y-layer': true,\n                  'y-layer--finish': finish.value,\n                  ...computedClass.value,\n                  [themeClasses.value ?? '']: true,\n                }}\n                onMouseenter={onMouseenter}\n                onMouseleave={onMouseleave}\n                style={computedStyle.value}\n                {...attrs}\n              >\n                <Transition name=\"fade\" appear>\n                  {active.value && props.scrim && (\n                    <div\n                      class=\"y-layer__scrim\"\n                      onClick={onClickScrim}\n                      ref=\"scrim$\"\n                    ></div>\n                  )}\n                </Transition>\n                <PolyTransition\n                  onAfterEnter={onAfterEnter}\n                  onAfterLeave={onAfterLeave}\n                  appear\n                  {...polyTransitionBindProps.value}\n                >\n                  <div\n                    v-show={active.value}\n                    v-complement-click={{ ...complementClickOption }}\n                    class={{\n                      'y-layer__content': true,\n                      ...computedContentClasses.value,\n                    }}\n                    style={[\n                      {\n                        ...dimensionStyles.value,\n                        ...coordinateStyles.value,\n                        ...props.contentStyles,\n                      },\n                    ]}\n                    ref={content$}\n                  >\n                    {slots.default?.({ active: active.value })}\n                  </div>\n                </PolyTransition>\n              </div>\n            )}\n          </Teleport>\n        </>\n      );\n    });\n\n    return {\n      complementClickOption,\n      layerGroup,\n      active,\n      rendered,\n      lazyValue,\n      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      baseEl,\n      polyTransitionBindProps,\n      coordinateStyles,\n    };\n  },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}
+{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","mergeProps","reactive","ref","shallowRef","toRef","watchEffect","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressYLayerProps","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","modal","contentStyles","default","disabled","openOnHover","openDelay","Number","closeDelay","YLayer","name","inheritAttrs","components","directives","props","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinate","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\r\nimport {\r\n  Teleport,\r\n  Transition,\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  reactive,\r\n  ref,\r\n  shallowRef,\r\n  toRef,\r\n  watchEffect,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport {\r\n  pressCoordinateProps,\r\n  useCoordinate,\r\n} from '../../composables/coordinate';\r\nimport {\r\n  pressDimensionPropsOptions,\r\n  useDimension,\r\n} from '../../composables/dimension';\r\nimport { useLayerGroup } from '../../composables/layer-group';\r\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\r\nimport { useLazy } from '../../composables/timing';\r\nimport {\r\n  PolyTransition,\r\n  polyTransitionPropOptions,\r\n  usePolyTransition,\r\n} from '../../composables/transition';\r\nimport {\r\n  ComplementClick,\r\n  ComplementClickBindingOptions,\r\n} from '../../directives/complement-click';\r\nimport { bindClasses, propsFactory } from '../../util/vue-component';\r\n\r\nimport './YLayer.scss';\r\n\r\nexport const pressYLayerProps = propsFactory(\r\n  {\r\n    modelValue: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    eager: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    classes: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    contentClasses: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    closeClickScrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    modal: Boolean as PropType<boolean>,\r\n    contentStyles: {\r\n      type: Object as PropType<CSSProperties>,\r\n      default: () => {},\r\n    },\r\n    disabled: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openOnHover: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    closeDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    ...pressThemePropsOptions(),\r\n    ...polyTransitionPropOptions,\r\n    ...pressCoordinateProps(),\r\n    ...pressDimensionPropsOptions(),\r\n  },\r\n  'YLayer',\r\n);\r\n\r\nexport const YLayer = defineComponent({\r\n  name: 'YLayer',\r\n  inheritAttrs: false,\r\n  components: {\r\n    PolyTransition,\r\n  },\r\n  directives: {\r\n    ComplementClick,\r\n  },\r\n  props: {\r\n    ...pressYLayerProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: boolean) => true,\r\n    'click:complement': (mouseEvent: MouseEvent) => true,\r\n    afterLeave: () => true,\r\n  },\r\n  setup(props, { emit, expose, attrs, slots }) {\r\n    const base$ = ref();\r\n    const scrim$ = ref<HTMLElement>();\r\n    const content$ = ref<HTMLElement>();\r\n    const baseSlot = ref();\r\n    const baseEl = ref<HTMLElement>();\r\n\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const { layerGroup } = useLayerGroup();\r\n    const { polyTransitionBindProps } = usePolyTransition(props);\r\n    const { dimensionStyles } = useDimension(props);\r\n    const active = computed<boolean>({\r\n      get: (): boolean => {\r\n        return !!props.modelValue;\r\n      },\r\n      set: (v: boolean) => {\r\n        emit('update:modelValue', v);\r\n      },\r\n    });\r\n    const finish = shallowRef(false);\r\n\r\n    const disabled = toRef(props, 'disabled');\r\n    const { lazyValue, onAfterUpdate } = useLazy(\r\n      !!toRef(props, 'eager'),\r\n      active,\r\n    );\r\n    const rendered = computed<boolean>(\r\n      () => !disabled.value && (lazyValue.value || active.value),\r\n    );\r\n\r\n    const { coordinate, coordinateStyles, updateCoordinate } = useCoordinate(\r\n      props,\r\n      { contentEl: content$, baseEl, active },\r\n    );\r\n\r\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\r\n      emit('click:complement', mouseEvent);\r\n      if (!props.modal) {\r\n        if (\r\n          scrim$.value !== null &&\r\n          scrim$.value === mouseEvent.target &&\r\n          props.closeClickScrim\r\n        ) {\r\n          active.value = false;\r\n        }\r\n      } else {\r\n        // TODO: shrug ani\r\n      }\r\n    }\r\n\r\n    function closeConditional(): boolean {\r\n      return (\r\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\r\n        active.value\r\n      ); // TODO: && groupTopLevel.value;\r\n    }\r\n\r\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\r\n      handler: onClickComplementLayer,\r\n      determine: closeConditional,\r\n      include: () => [baseEl.value],\r\n    });\r\n\r\n    function onAfterEnter() {\r\n      finish.value = true;\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      onAfterUpdate();\r\n      finish.value = false;\r\n      emit('afterLeave');\r\n    }\r\n\r\n    function onClickScrim() {\r\n      if (props.closeClickScrim) {\r\n        active.value = false;\r\n      }\r\n    }\r\n\r\n    const baseFromSlotEl = computed(() => {\r\n      return baseSlot.value?.[0]?.el;\r\n    });\r\n\r\n    watchEffect(() => {\r\n      if (!base$.value) {\r\n        baseEl.value = baseFromSlotEl.value;\r\n        return;\r\n      }\r\n      const base = base$.value;\r\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\r\n    });\r\n\r\n    const computedStyle = computed(() => {\r\n      return {\r\n        zIndex: '2000',\r\n      };\r\n    });\r\n\r\n    const computedClass = computed<Record<string, boolean>>(() => {\r\n      const { classes } = props;\r\n      const boundClasses = bindClasses(classes);\r\n      return {\r\n        ...boundClasses,\r\n        'y-layer--active': !!active.value,\r\n      };\r\n    });\r\n\r\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n      const boundClasses = bindClasses(props.contentClasses);\r\n      return {\r\n        ...boundClasses,\r\n      };\r\n    });\r\n\r\n    const hovered = ref(false);\r\n\r\n    function onMouseenter(event: Event) {\r\n      hovered.value = true;\r\n    }\r\n\r\n    function onMouseleave(event: Event) {\r\n      hovered.value = false;\r\n    }\r\n\r\n    expose({\r\n      scrim$,\r\n      base$,\r\n      content$,\r\n      baseEl,\r\n      active,\r\n      onAfterUpdate,\r\n      updateCoordinate,\r\n      hovered,\r\n    });\r\n\r\n    useRender(() => {\r\n      const slotBase = slots.base?.({\r\n        active: active.value,\r\n        props: mergeProps({\r\n          ref: base$,\r\n          class: {\r\n            'y-layer-base': true,\r\n            'y-layer-base--active': active.value,\r\n          },\r\n        }),\r\n      });\r\n      baseSlot.value = slotBase;\r\n      return (\r\n        <>\r\n          {slotBase}\r\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\r\n            {rendered.value && (\r\n              <div\r\n                class={{\r\n                  'y-layer': true,\r\n                  'y-layer--finish': finish.value,\r\n                  ...computedClass.value,\r\n                  [themeClasses.value ?? '']: true,\r\n                }}\r\n                onMouseenter={onMouseenter}\r\n                onMouseleave={onMouseleave}\r\n                style={computedStyle.value}\r\n                {...attrs}\r\n              >\r\n                <Transition name=\"fade\" appear>\r\n                  {active.value && props.scrim && (\r\n                    <div\r\n                      class=\"y-layer__scrim\"\r\n                      onClick={onClickScrim}\r\n                      ref=\"scrim$\"\r\n                    ></div>\r\n                  )}\r\n                </Transition>\r\n                <PolyTransition\r\n                  onAfterEnter={onAfterEnter}\r\n                  onAfterLeave={onAfterLeave}\r\n                  appear\r\n                  {...polyTransitionBindProps.value}\r\n                >\r\n                  <div\r\n                    v-show={active.value}\r\n                    v-complement-click={{ ...complementClickOption }}\r\n                    class={{\r\n                      'y-layer__content': true,\r\n                      ...computedContentClasses.value,\r\n                    }}\r\n                    style={[\r\n                      {\r\n                        ...dimensionStyles.value,\r\n                        ...coordinateStyles.value,\r\n                        ...props.contentStyles,\r\n                      },\r\n                    ]}\r\n                    ref={content$}\r\n                  >\r\n                    {slots.default?.({ active: active.value })}\r\n                  </div>\r\n                </PolyTransition>\r\n              </div>\r\n            )}\r\n          </Teleport>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      complementClickOption,\r\n      layerGroup,\r\n      active,\r\n      rendered,\r\n      lazyValue,\r\n      onAfterUpdate: onAfterUpdate as () => void,\r\n      scrim$,\r\n      content$,\r\n      baseEl,\r\n      polyTransitionBindProps,\r\n      coordinateStyles,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YLayer = InstanceType<typeof YLayer>;\r\n"],"mappings":"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"}

package/lib/components/layer/YLayer.scss

@@ -12,7 +12,7 @@
   display: flex;
   inset: 0;
   position: fixed;
-  color: rgba(var(--y-theme-on-background), 1);
+  color: var(--y-theme-on-background);
 
   &__scrim {
     pointer-events: auto;

package/lib/components/layer/active-delay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"active-delay.mjs","names":["useDelay","props","callback","state","clearDelay","propKey","window","clearTimeout","setDelay","timeout","resolve","setTimeout","active","generateDelay","delayTime","Promise","delay","parseInt","String","startOpenDelay","startCloseDelay"],"sources":["../../../src/components/layer/active-delay.ts"],"sourcesContent":["type DelayType = 'closeDelay' | 'openDelay';\n\nexport function useDelay(props: any, callback?: (active: boolean) => void) {\n  const state: Partial<Record<DelayType, number>> = {};\n\n  function clearDelay(propKey: DelayType) {\n    state[propKey] && window.clearTimeout(state[propKey]);\n    delete state[propKey];\n  }\n\n  function setDelay(propKey: DelayType, timeout: number, resolve: any) {\n    state[propKey] = window.setTimeout(() => {\n      const active = propKey === 'openDelay';\n      callback?.(active);\n      resolve(active);\n    }, timeout);\n  }\n\n  const generateDelay = (propKey: DelayType) => () => {\n    clearDelay('openDelay');\n    clearDelay('closeDelay');\n    const delayTime = props[propKey] ?? 0;\n    return new Promise<boolean>((resolve) => {\n      const delay = parseInt(String(delayTime), 10);\n      setDelay(propKey, delay, resolve);\n    });\n  };\n\n  return {\n    startOpenDelay: generateDelay('openDelay'),\n    startCloseDelay: generateDelay('closeDelay'),\n  };\n}\n"],"mappings":"AAEA,OAAO,SAASA,QAAQA,CAACC,KAAU,EAAEC,QAAoC,EAAE;EACzE,MAAMC,KAAyC,GAAG,CAAC,CAAC;EAEpD,SAASC,UAAUA,CAACC,OAAkB,EAAE;IACtCF,KAAK,CAACE,OAAO,CAAC,IAAIC,MAAM,CAACC,YAAY,CAACJ,KAAK,CAACE,OAAO,CAAC,CAAC;IACrD,OAAOF,KAAK,CAACE,OAAO,CAAC;EACvB;EAEA,SAASG,QAAQA,CAACH,OAAkB,EAAEI,OAAe,EAAEC,OAAY,EAAE;IACnEP,KAAK,CAACE,OAAO,CAAC,GAAGC,MAAM,CAACK,UAAU,CAAC,MAAM;MACvC,MAAMC,MAAM,GAAGP,OAAO,KAAK,WAAW;MACtCH,QAAQ,GAAGU,MAAM,CAAC;MAClBF,OAAO,CAACE,MAAM,CAAC;IACjB,CAAC,EAAEH,OAAO,CAAC;EACb;EAEA,MAAMI,aAAa,GAAIR,OAAkB,IAAK,MAAM;IAClDD,UAAU,CAAC,WAAW,CAAC;IACvBA,UAAU,CAAC,YAAY,CAAC;IACxB,MAAMU,SAAS,GAAGb,KAAK,CAACI,OAAO,CAAC,IAAI,CAAC;IACrC,OAAO,IAAIU,OAAO,CAAWL,OAAO,IAAK;MACvC,MAAMM,KAAK,GAAGC,QAAQ,CAACC,MAAM,CAACJ,SAAS,CAAC,EAAE,EAAE,CAAC;MAC7CN,QAAQ,CAACH,OAAO,EAAEW,KAAK,EAAEN,OAAO,CAAC;IACnC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLS,cAAc,EAAEN,aAAa,CAAC,WAAW,CAAC;IAC1CO,eAAe,EAAEP,aAAa,CAAC,YAAY;EAC7C,CAAC;AACH"}
+{"version":3,"file":"active-delay.mjs","names":["useDelay","props","callback","state","clearDelay","propKey","window","clearTimeout","setDelay","timeout","resolve","setTimeout","active","generateDelay","delayTime","Promise","delay","parseInt","String","startOpenDelay","startCloseDelay"],"sources":["../../../src/components/layer/active-delay.ts"],"sourcesContent":["type DelayType = 'closeDelay' | 'openDelay';\r\n\r\nexport function useDelay(props: any, callback?: (active: boolean) => void) {\r\n  const state: Partial<Record<DelayType, number>> = {};\r\n\r\n  function clearDelay(propKey: DelayType) {\r\n    state[propKey] && window.clearTimeout(state[propKey]);\r\n    delete state[propKey];\r\n  }\r\n\r\n  function setDelay(propKey: DelayType, timeout: number, resolve: any) {\r\n    state[propKey] = window.setTimeout(() => {\r\n      const active = propKey === 'openDelay';\r\n      callback?.(active);\r\n      resolve(active);\r\n    }, timeout);\r\n  }\r\n\r\n  const generateDelay = (propKey: DelayType) => () => {\r\n    clearDelay('openDelay');\r\n    clearDelay('closeDelay');\r\n    const delayTime = props[propKey] ?? 0;\r\n    return new Promise<boolean>((resolve) => {\r\n      const delay = parseInt(String(delayTime), 10);\r\n      setDelay(propKey, delay, resolve);\r\n    });\r\n  };\r\n\r\n  return {\r\n    startOpenDelay: generateDelay('openDelay'),\r\n    startCloseDelay: generateDelay('closeDelay'),\r\n  };\r\n}\r\n"],"mappings":"AAEA,OAAO,SAASA,QAAQA,CAACC,KAAU,EAAEC,QAAoC,EAAE;EACzE,MAAMC,KAAyC,GAAG,CAAC,CAAC;EAEpD,SAASC,UAAUA,CAACC,OAAkB,EAAE;IACtCF,KAAK,CAACE,OAAO,CAAC,IAAIC,MAAM,CAACC,YAAY,CAACJ,KAAK,CAACE,OAAO,CAAC,CAAC;IACrD,OAAOF,KAAK,CAACE,OAAO,CAAC;EACvB;EAEA,SAASG,QAAQA,CAACH,OAAkB,EAAEI,OAAe,EAAEC,OAAY,EAAE;IACnEP,KAAK,CAACE,OAAO,CAAC,GAAGC,MAAM,CAACK,UAAU,CAAC,MAAM;MACvC,MAAMC,MAAM,GAAGP,OAAO,KAAK,WAAW;MACtCH,QAAQ,GAAGU,MAAM,CAAC;MAClBF,OAAO,CAACE,MAAM,CAAC;IACjB,CAAC,EAAEH,OAAO,CAAC;EACb;EAEA,MAAMI,aAAa,GAAIR,OAAkB,IAAK,MAAM;IAClDD,UAAU,CAAC,WAAW,CAAC;IACvBA,UAAU,CAAC,YAAY,CAAC;IACxB,MAAMU,SAAS,GAAGb,KAAK,CAACI,OAAO,CAAC,IAAI,CAAC;IACrC,OAAO,IAAIU,OAAO,CAAWL,OAAO,IAAK;MACvC,MAAMM,KAAK,GAAGC,QAAQ,CAACC,MAAM,CAACJ,SAAS,CAAC,EAAE,EAAE,CAAC;MAC7CN,QAAQ,CAACH,OAAO,EAAEW,KAAK,EAAEN,OAAO,CAAC;IACnC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLS,cAAc,EAAEN,aAAa,CAAC,WAAW,CAAC;IAC1CO,eAAe,EAAEP,aAAa,CAAC,YAAY;EAC7C,CAAC;AACH"}

package/lib/components/layer/active-stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"active-stack.mjs","names":["getCurrentInstance","inject","provide","shallowRef","watch","watchPostEffect","YUYEON_ACTIVE_STACK_KEY","Symbol","for","useActiveStack","$el","active","sequential","parent","children","push","instance","value","pop","index","findIndex","child","splice","clear","bubble","length","neo"],"sources":["../../../src/components/layer/active-stack.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\nimport {\n  getCurrentInstance,\n  inject,\n  provide,\n  shallowRef,\n  watch,\n  watchPostEffect,\n} from 'vue';\n\nimport { YLayer } from './YLayer';\n\ninterface ActiveStackProvide {\n  push: (instance: any) => void;\n  pop: (instance?: any) => void;\n  clear: () => void;\n  $el: Ref<typeof YLayer | undefined>\n}\n\nexport const YUYEON_ACTIVE_STACK_KEY: InjectionKey<ActiveStackProvide> =\n  Symbol.for('yuyeon.active-stack');\n\nexport function useActiveStack(\n  $el: Ref<typeof YLayer | undefined>,\n  active: Ref<boolean>,\n  sequential?: Ref<boolean | undefined>,\n) {\n  const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);\n  const children = shallowRef<any[]>([]);\n\n  function push(instance: any) {\n    children.value.push(instance);\n  }\n\n  function pop(instance?: any) {\n    if (instance) {\n      const index = children.value.findIndex((child) => child === instance);\n      if (index > -1) {\n        children.value.splice(index, 1);\n        return;\n      }\n    }\n    children.value.pop();\n  }\n\n  function clear() {\n    active.value = false;\n    const bubble = () => {\n      if (children.value.length === 0) {\n        parent?.clear();\n      }\n    };\n    if (!sequential?.value) {\n      watchPostEffect(bubble);\n    }\n  }\n\n  watch(active, (neo) => {\n    if (neo) {\n      parent?.push(getCurrentInstance());\n    } else {\n      parent?.pop(getCurrentInstance());\n    }\n  });\n\n  provide(YUYEON_ACTIVE_STACK_KEY, {\n    push,\n    pop,\n    clear,\n    $el,\n  });\n\n  return {\n    push,\n    pop,\n    parent,\n    children,\n  };\n}\n"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,eAAe,QACV,KAAK;AAWZ,OAAO,MAAMC,uBAAyD,GACpEC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAEnC,OAAO,SAASC,cAAcA,CAC5BC,GAAmC,EACnCC,MAAoB,EACpBC,UAAqC,EACrC;EACA,MAAMC,MAAM,GAAGZ,MAAM,CAACK,uBAAuB,EAAE,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAGX,UAAU,CAAQ,EAAE,CAAC;EAEtC,SAASY,IAAIA,CAACC,QAAa,EAAE;IAC3BF,QAAQ,CAACG,KAAK,CAACF,IAAI,CAACC,QAAQ,CAAC;EAC/B;EAEA,SAASE,GAAGA,CAACF,QAAc,EAAE;IAC3B,IAAIA,QAAQ,EAAE;MACZ,MAAMG,KAAK,GAAGL,QAAQ,CAACG,KAAK,CAACG,SAAS,CAAEC,KAAK,IAAKA,KAAK,KAAKL,QAAQ,CAAC;MACrE,IAAIG,KAAK,GAAG,CAAC,CAAC,EAAE;QACdL,QAAQ,CAACG,KAAK,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;QAC/B;MACF;IACF;IACAL,QAAQ,CAACG,KAAK,CAACC,GAAG,CAAC,CAAC;EACtB;EAEA,SAASK,KAAKA,CAAA,EAAG;IACfZ,MAAM,CAACM,KAAK,GAAG,KAAK;IACpB,MAAMO,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIV,QAAQ,CAACG,KAAK,CAACQ,MAAM,KAAK,CAAC,EAAE;QAC/BZ,MAAM,EAAEU,KAAK,CAAC,CAAC;MACjB;IACF,CAAC;IACD,IAAI,CAACX,UAAU,EAAEK,KAAK,EAAE;MACtBZ,eAAe,CAACmB,MAAM,CAAC;IACzB;EACF;EAEApB,KAAK,CAACO,MAAM,EAAGe,GAAG,IAAK;IACrB,IAAIA,GAAG,EAAE;MACPb,MAAM,EAAEE,IAAI,CAACf,kBAAkB,CAAC,CAAC,CAAC;IACpC,CAAC,MAAM;MACLa,MAAM,EAAEK,GAAG,CAAClB,kBAAkB,CAAC,CAAC,CAAC;IACnC;EACF,CAAC,CAAC;EAEFE,OAAO,CAACI,uBAAuB,EAAE;IAC/BS,IAAI;IACJG,GAAG;IACHK,KAAK;IACLb;EACF,CAAC,CAAC;EAEF,OAAO;IACLK,IAAI;IACJG,GAAG;IACHL,MAAM;IACNC;EACF,CAAC;AACH"}
+{"version":3,"file":"active-stack.mjs","names":["getCurrentInstance","inject","provide","shallowRef","watch","watchPostEffect","YUYEON_ACTIVE_STACK_KEY","Symbol","for","useActiveStack","$el","active","sequential","parent","children","push","instance","value","pop","index","findIndex","child","splice","clear","bubble","length","neo"],"sources":["../../../src/components/layer/active-stack.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\r\nimport {\r\n  getCurrentInstance,\r\n  inject,\r\n  provide,\r\n  shallowRef,\r\n  watch,\r\n  watchPostEffect,\r\n} from 'vue';\r\n\r\nimport { YLayer } from './YLayer';\r\n\r\ninterface ActiveStackProvide {\r\n  push: (instance: any) => void;\r\n  pop: (instance?: any) => void;\r\n  clear: () => void;\r\n  $el: Ref<typeof YLayer | undefined>\r\n}\r\n\r\nexport const YUYEON_ACTIVE_STACK_KEY: InjectionKey<ActiveStackProvide> =\r\n  Symbol.for('yuyeon.active-stack');\r\n\r\nexport function useActiveStack(\r\n  $el: Ref<typeof YLayer | undefined>,\r\n  active: Ref<boolean>,\r\n  sequential?: Ref<boolean | undefined>,\r\n) {\r\n  const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);\r\n  const children = shallowRef<any[]>([]);\r\n\r\n  function push(instance: any) {\r\n    children.value.push(instance);\r\n  }\r\n\r\n  function pop(instance?: any) {\r\n    if (instance) {\r\n      const index = children.value.findIndex((child) => child === instance);\r\n      if (index > -1) {\r\n        children.value.splice(index, 1);\r\n        return;\r\n      }\r\n    }\r\n    children.value.pop();\r\n  }\r\n\r\n  function clear() {\r\n    active.value = false;\r\n    const bubble = () => {\r\n      if (children.value.length === 0) {\r\n        parent?.clear();\r\n      }\r\n    };\r\n    if (!sequential?.value) {\r\n      watchPostEffect(bubble);\r\n    }\r\n  }\r\n\r\n  watch(active, (neo) => {\r\n    if (neo) {\r\n      parent?.push(getCurrentInstance());\r\n    } else {\r\n      parent?.pop(getCurrentInstance());\r\n    }\r\n  });\r\n\r\n  provide(YUYEON_ACTIVE_STACK_KEY, {\r\n    push,\r\n    pop,\r\n    clear,\r\n    $el,\r\n  });\r\n\r\n  return {\r\n    push,\r\n    pop,\r\n    parent,\r\n    children,\r\n  };\r\n}\r\n"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,eAAe,QACV,KAAK;AAWZ,OAAO,MAAMC,uBAAyD,GACpEC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAEnC,OAAO,SAASC,cAAcA,CAC5BC,GAAmC,EACnCC,MAAoB,EACpBC,UAAqC,EACrC;EACA,MAAMC,MAAM,GAAGZ,MAAM,CAACK,uBAAuB,EAAE,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAGX,UAAU,CAAQ,EAAE,CAAC;EAEtC,SAASY,IAAIA,CAACC,QAAa,EAAE;IAC3BF,QAAQ,CAACG,KAAK,CAACF,IAAI,CAACC,QAAQ,CAAC;EAC/B;EAEA,SAASE,GAAGA,CAACF,QAAc,EAAE;IAC3B,IAAIA,QAAQ,EAAE;MACZ,MAAMG,KAAK,GAAGL,QAAQ,CAACG,KAAK,CAACG,SAAS,CAAEC,KAAK,IAAKA,KAAK,KAAKL,QAAQ,CAAC;MACrE,IAAIG,KAAK,GAAG,CAAC,CAAC,EAAE;QACdL,QAAQ,CAACG,KAAK,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;QAC/B;MACF;IACF;IACAL,QAAQ,CAACG,KAAK,CAACC,GAAG,CAAC,CAAC;EACtB;EAEA,SAASK,KAAKA,CAAA,EAAG;IACfZ,MAAM,CAACM,KAAK,GAAG,KAAK;IACpB,MAAMO,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIV,QAAQ,CAACG,KAAK,CAACQ,MAAM,KAAK,CAAC,EAAE;QAC/BZ,MAAM,EAAEU,KAAK,CAAC,CAAC;MACjB;IACF,CAAC;IACD,IAAI,CAACX,UAAU,EAAEK,KAAK,EAAE;MACtBZ,eAAe,CAACmB,MAAM,CAAC;IACzB;EACF;EAEApB,KAAK,CAACO,MAAM,EAAGe,GAAG,IAAK;IACrB,IAAIA,GAAG,EAAE;MACPb,MAAM,EAAEE,IAAI,CAACf,kBAAkB,CAAC,CAAC,CAAC;IACpC,CAAC,MAAM;MACLa,MAAM,EAAEK,GAAG,CAAClB,kBAAkB,CAAC,CAAC,CAAC;IACnC;EACF,CAAC,CAAC;EAEFE,OAAO,CAACI,uBAAuB,EAAE;IAC/BS,IAAI;IACJG,GAAG;IACHK,KAAK;IACLb;EACF,CAAC,CAAC;EAEF,OAAO;IACLK,IAAI;IACJG,GAAG;IACHL,MAAM;IACNC;EACF,CAAC;AACH"}

package/lib/components/menu/YMenu.mjs

@@ -34,8 +34,8 @@ export const YMenuPropOptions = {
   preventCloseBubble: Boolean
 };
 
-/**
- * #  Component
+/**
+ * #  Component
  */
 export const YMenu = defineComponent({
   name: NAME,

package/lib/components/menu/YMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","toRef","watch","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","chooseProps","YLayer","pressYLayerProps","useDelay","useActiveStack","hasElementMouseEvent","NAME","CLASS_NAME","YMenuPropOptions","menuClasses","type","Array","String","Object","openOnClickBase","Boolean","default","closeCondition","Function","undefined","preventClip","coordinateStrategy","preventCloseBubble","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","classes","boundClasses","model","active","get","value","set","v","disabled","hovered","children","parent","startOpenDelay","startCloseDelay","changeActive","openOnHover","length","onMouseenter","e","onMouseleave","onClick","stopPropagation","currentActive","onComplementClick","parentContent","$el","content$","clear","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","args","_key","base","_len2","_key2"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {computed, defineComponent, ref, toRef, watch} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses, chooseProps } from '../../util/vue-component';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useDelay } from '../layer/active-delay';\n\nimport './YMenu.scss';\nimport {useActiveStack} from \"../layer/active-stack\";\nimport {hasElementMouseEvent} from \"../../util/dom\";\n\nconst NAME = 'YMenu';\nconst CLASS_NAME = toKebabCase(NAME);\n\nexport const YMenuPropOptions = {\n  menuClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  openOnClickBase: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  closeCondition: {\n    type: [Boolean, Function],\n    default: undefined,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  ...pressYLayerProps({\n    coordinateStrategy: 'levitation',\n  }),\n  preventCloseBubble: Boolean as PropType<boolean>,\n};\n\n/**\n * #  Component\n */\nexport const YMenu = defineComponent({\n  name: NAME,\n  props: {\n    ...YMenuPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue', 'afterLeave'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.menuClasses);\n      return {\n        ...boundClasses,\n        'y-menu': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    const hovered = computed(() => !!el$.value?.hovered);\n    const { children, parent } = useActiveStack(el$, active, toRef(props, 'preventCloseBubble'));\n    const { startOpenDelay, startCloseDelay } = useDelay(\n      props,\n      (changeActive) => {\n        if (!changeActive && props.openOnHover && !hovered.value && children.value.length === 0) {\n          active.value = false;\n        } else if (changeActive) {\n          active.value = true;\n        }\n      },\n    );\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        startOpenDelay();\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        startCloseDelay();\n      }\n    }\n\n    watch(hovered, (value) => {\n      if (!value) {\n        startCloseDelay();\n      }\n    });\n\n    function onClick(e: MouseEvent) {\n      e.stopPropagation();\n      if (!props.openOnClickBase) {\n        return;\n      }\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    function onComplementClick(e: Event) {\n      if (props.closeCondition === false) {\n        return;\n      }\n      if (typeof props.closeCondition === 'function') {\n        if (props.closeCondition(e) === false) {\n          active.value = false;\n        }\n        return;\n      }\n      if (active.value) {\n        const parentContent = parent?.$el.value?.content$;\n        active.value = false;\n        if (!(parentContent && !hasElementMouseEvent(e, parentContent))) {\n          parent?.clear();\n        }\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(\n      () => el$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          bindHover(neo);\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          unbindHover(old);\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            ref={el$}\n            transition={props.transition}\n            onClick:complement={onComplementClick}\n            onAfterLeave={() => emit('afterLeave')}\n            {...{\n              ...chooseProps(props, YLayer.props),\n              classes: classes.value,\n              scrim: false,\n              contentClasses: {\n                'y-menu__content': true,\n                ...computedContentClasses.value,\n              },\n            }}\n            v-model={active.value}\n          >\n            {{\n              default: (...args: any) => {\n                return <>{slots.default?.(...args) ?? ''}</>;\n              },\n              base: (...args: any[]) => slots.base?.(...args),\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      el$,\n      classes,\n    };\n  },\n});\n\nexport type YMenu = InstanceType<typeof YMenu>;\n"],"mappings":"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"}
+{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","toRef","watch","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","chooseProps","YLayer","pressYLayerProps","useDelay","useActiveStack","hasElementMouseEvent","NAME","CLASS_NAME","YMenuPropOptions","menuClasses","type","Array","String","Object","openOnClickBase","Boolean","default","closeCondition","Function","undefined","preventClip","coordinateStrategy","preventCloseBubble","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","classes","boundClasses","model","active","get","value","set","v","disabled","hovered","children","parent","startOpenDelay","startCloseDelay","changeActive","openOnHover","length","onMouseenter","e","onMouseleave","onClick","stopPropagation","currentActive","onComplementClick","parentContent","$el","content$","clear","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","args","_key","base","_len2","_key2"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {computed, defineComponent, ref, toRef, watch} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport { polyTransitionPropOptions } from '../../composables/transition';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { bindClasses, chooseProps } from '../../util/vue-component';\r\nimport { YLayer, pressYLayerProps } from '../layer';\r\nimport { useDelay } from '../layer/active-delay';\r\n\r\nimport './YMenu.scss';\r\nimport {useActiveStack} from \"../layer/active-stack\";\r\nimport {hasElementMouseEvent} from \"../../util/dom\";\r\n\r\nconst NAME = 'YMenu';\r\nconst CLASS_NAME = toKebabCase(NAME);\r\n\r\nexport const YMenuPropOptions = {\r\n  menuClasses: {\r\n    type: [Array, String, Object] as PropType<\r\n      string[] | string | Record<string, any>\r\n    >,\r\n  },\r\n  openOnClickBase: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: true,\r\n  },\r\n  closeCondition: {\r\n    type: [Boolean, Function],\r\n    default: undefined,\r\n  },\r\n  preventClip: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: true,\r\n  },\r\n  ...pressYLayerProps({\r\n    coordinateStrategy: 'levitation',\r\n  }),\r\n  preventCloseBubble: Boolean as PropType<boolean>,\r\n};\r\n\r\n/**\r\n * #  Component\r\n */\r\nexport const YMenu = defineComponent({\r\n  name: NAME,\r\n  props: {\r\n    ...YMenuPropOptions,\r\n    transition: {\r\n      ...polyTransitionPropOptions.transition,\r\n      default: 'fade',\r\n    },\r\n  },\r\n  emits: ['update:modelValue', 'afterLeave'],\r\n  setup(props, { slots, emit, expose }) {\r\n    const el$ = ref<typeof YLayer>();\r\n\r\n    const classes = computed(() => {\r\n      const boundClasses = bindClasses(props.menuClasses);\r\n      return {\r\n        ...boundClasses,\r\n        'y-menu': true,\r\n      };\r\n    });\r\n\r\n    const model = useModelDuplex(props);\r\n\r\n    const active = computed({\r\n      get: (): boolean => {\r\n        return !!model.value;\r\n      },\r\n      set: (v: boolean) => {\r\n        if (!(v && props.disabled)) model.value = v;\r\n      },\r\n    });\r\n\r\n    const hovered = computed(() => !!el$.value?.hovered);\r\n    const { children, parent } = useActiveStack(el$, active, toRef(props, 'preventCloseBubble'));\r\n    const { startOpenDelay, startCloseDelay } = useDelay(\r\n      props,\r\n      (changeActive) => {\r\n        if (!changeActive && props.openOnHover && !hovered.value && children.value.length === 0) {\r\n          active.value = false;\r\n        } else if (changeActive) {\r\n          active.value = true;\r\n        }\r\n      },\r\n    );\r\n\r\n    function onMouseenter(e: MouseEvent) {\r\n      if (props.openOnHover) {\r\n        startOpenDelay();\r\n      }\r\n    }\r\n\r\n    function onMouseleave(e: MouseEvent) {\r\n      if (props.openOnHover) {\r\n        startCloseDelay();\r\n      }\r\n    }\r\n\r\n    watch(hovered, (value) => {\r\n      if (!value) {\r\n        startCloseDelay();\r\n      }\r\n    });\r\n\r\n    function onClick(e: MouseEvent) {\r\n      e.stopPropagation();\r\n      if (!props.openOnClickBase) {\r\n        return;\r\n      }\r\n      const currentActive = active.value;\r\n      if (!props.disabled) {\r\n        active.value = !currentActive;\r\n      }\r\n    }\r\n\r\n    function onComplementClick(e: Event) {\r\n      if (props.closeCondition === false) {\r\n        return;\r\n      }\r\n      if (typeof props.closeCondition === 'function') {\r\n        if (props.closeCondition(e) === false) {\r\n          active.value = false;\r\n        }\r\n        return;\r\n      }\r\n      if (active.value) {\r\n        const parentContent = parent?.$el.value?.content$;\r\n        active.value = false;\r\n        if (!(parentContent && !hasElementMouseEvent(e, parentContent))) {\r\n          parent?.clear();\r\n        }\r\n      }\r\n    }\r\n\r\n    function bindHover(el: HTMLElement) {\r\n      el.addEventListener('mouseenter', onMouseenter);\r\n      el.addEventListener('mouseleave', onMouseleave);\r\n    }\r\n\r\n    function unbindHover(el: HTMLElement) {\r\n      el.removeEventListener('mouseenter', onMouseenter);\r\n      el.removeEventListener('mouseleave', onMouseleave);\r\n    }\r\n\r\n    watch(\r\n      () => el$.value?.baseEl,\r\n      (neo, old) => {\r\n        if (neo) {\r\n          bindHover(neo);\r\n          neo.addEventListener('click', onClick);\r\n        } else if (old) {\r\n          unbindHover(old);\r\n          old.removeEventListener('click', onClick);\r\n        }\r\n      },\r\n    );\r\n\r\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n      const boundClasses = bindClasses(props.contentClasses);\r\n      return {\r\n        ...boundClasses,\r\n      };\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <>\r\n          <YLayer\r\n            ref={el$}\r\n            transition={props.transition}\r\n            onClick:complement={onComplementClick}\r\n            onAfterLeave={() => emit('afterLeave')}\r\n            {...{\r\n              ...chooseProps(props, YLayer.props),\r\n              classes: classes.value,\r\n              scrim: false,\r\n              contentClasses: {\r\n                'y-menu__content': true,\r\n                ...computedContentClasses.value,\r\n              },\r\n            }}\r\n            v-model={active.value}\r\n          >\r\n            {{\r\n              default: (...args: any) => {\r\n                return <>{slots.default?.(...args) ?? ''}</>;\r\n              },\r\n              base: (...args: any[]) => slots.base?.(...args),\r\n            }}\r\n          </YLayer>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      el$,\r\n      classes,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YMenu = InstanceType<typeof YMenu>;\r\n"],"mappings":"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"}

package/lib/components/menu/YMenu.scss

@@ -8,7 +8,7 @@
   &__content {
     box-shadow: var(--y-menu__elevation, #{$elevation-fallback});
     border-radius: var(--y-menu__border-radius);
-    background: rgba(var(--y-theme-surface), 1);
+    background: var(--y-theme-surface);
     display: flex;
     flex-direction: column;
 

package/lib/components/panel/YDividePanel.scss

@@ -30,14 +30,14 @@ $side-padding: 16px !default;
     }
 
     &:hover &-line {
-      background: rgba(var(--y-theme-primary), 1);
+      background: var(--y-theme-primary);
     }
   }
 
   &--resizing &__divider {
     background: rgba(var(--y-theme-primary), 0.12);
     &-line {
-      background: rgba(var(--y-theme-primary), 1);
+      background: var(--y-theme-primary);
     }
   }
 }

package/lib/components/progress-bar/YProgressBar.mjs

@@ -67,7 +67,7 @@ export const YProgressBar = defineComponent({
     leadColor() {
       let color = this.color ?? '';
       if (!isColorValue(color)) {
-        color = `rgba(var(--y-theme-${color}), 1)`;
+        color = `var(--y-theme-${color})`;
       }
       return color;
     },

package/lib/components/progress-bar/YProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YProgressBar.mjs","names":["defineComponent","useProgress","isColorValue","YProgressBar","name","props","value","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","numValue","data","delta","computed","classes","noTransition","leadColor","styles","minWidth","transform","render","slots","$slots","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { PropType, StyleValue, defineComponent } from 'vue';\n\nimport { useProgress } from '../../composables/progress';\nimport './YProgressBar.scss';\nimport { isColorValue } from \"../../util/color\";\n\nexport const YProgressBar = defineComponent({\n  name: 'YProgressBar',\n  props: {\n    value: {\n      type: Number as PropType<number>,\n    },\n    rounded: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: Number as PropType<number>,\n    },\n    noRewindTransition: {\n      type: Boolean as PropType<boolean>,\n    },\n    outlined: {\n      type: Boolean as PropType<boolean>,\n    },\n    innerText: {\n      type: Boolean as PropType<boolean>,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: 'primary',\n    },\n    textColor: {\n      type: String as PropType<string>,\n    },\n    outlineColor: {\n      type: String as PropType<string>,\n    },\n    indeterminate: Boolean,\n    reverse: Boolean,\n  },\n  setup(props) {\n    const { numValue } = useProgress(props);\n\n    return {\n      numValue,\n    };\n  },\n  data() {\n    return {\n      delta: 0,\n    };\n  },\n  computed: {\n    classes(): Record<string, boolean> {\n      let noTransition = false;\n      if (this.noRewindTransition && this.delta < 0) {\n        noTransition = true;\n      }\n      return {\n        'y-progress--no-trans': noTransition,\n        'y-progress--outlined': !!this.outlined,\n        'y-progress--indeterminate': !!this.indeterminate,\n        'y-progress-bar--rounded': !!this.rounded,\n        'y-progress-bar--reverse': !!this.reverse,\n      };\n    },\n    leadColor(): string {\n      let color = this.color ?? '';\n      if (!isColorValue(color)) {\n        color = `rgba(var(--y-theme-${color}), 1)`;\n      }\n      return color;\n    },\n    styles(): StyleValue {\n      let minWidth;\n      if (this.innerText && this.numValue < 5 && this.numValue > 0) {\n        minWidth = '2rem';\n      }\n      return {\n        transform: `scaleX(${this.numValue / 100})`,\n        minWidth,\n      };\n    },\n  },\n  render() {\n    const {\n      classes,\n      numValue,\n      height,\n      outlineColor,\n      textColor,\n      styles,\n      innerText,\n    } = this;\n    const slots = this.$slots;\n    return (\n      <div\n        class={{ 'y-progress y-progress-bar': true, ...classes }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={numValue}\n        style={{\n          '--y-progress-bar__height':\n            height !== undefined ? `${height}px` : undefined,\n          '--y-progress-bar__outline-color':\n            outlineColor !== undefined ? outlineColor : undefined,\n          '--y-progress-bar__color': this.leadColor,\n        }}\n      >\n        <div class=\"y-progress__track\"></div>\n        <div class=\"y-progress__tube\">\n          <div class=\"y-progress__lead\" style={styles}>\n            {slots['lead-inner']\n              ? slots['lead-inner']()\n              : innerText && (\n                  <div\n                    class={{\n                      'y-progress__lead-inner': true,\n                      'y-progress__lead-inner--fixed': numValue < 3,\n                    }}\n                    style={{ color: textColor }}\n                  >\n                    <span>{numValue} %</span>\n                  </div>\n                )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YProgressBar.mjs","names":["defineComponent","useProgress","isColorValue","YProgressBar","name","props","value","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","numValue","data","delta","computed","classes","noTransition","leadColor","styles","minWidth","transform","render","slots","$slots","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { PropType, StyleValue, defineComponent } from 'vue';\n\nimport { useProgress } from '../../composables/progress';\nimport './YProgressBar.scss';\nimport { isColorValue } from \"../../util/color\";\n\nexport const YProgressBar = defineComponent({\n  name: 'YProgressBar',\n  props: {\n    value: {\n      type: Number as PropType<number>,\n    },\n    rounded: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: Number as PropType<number>,\n    },\n    noRewindTransition: {\n      type: Boolean as PropType<boolean>,\n    },\n    outlined: {\n      type: Boolean as PropType<boolean>,\n    },\n    innerText: {\n      type: Boolean as PropType<boolean>,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: 'primary',\n    },\n    textColor: {\n      type: String as PropType<string>,\n    },\n    outlineColor: {\n      type: String as PropType<string>,\n    },\n    indeterminate: Boolean,\n    reverse: Boolean,\n  },\n  setup(props) {\n    const { numValue } = useProgress(props);\n\n    return {\n      numValue,\n    };\n  },\n  data() {\n    return {\n      delta: 0,\n    };\n  },\n  computed: {\n    classes(): Record<string, boolean> {\n      let noTransition = false;\n      if (this.noRewindTransition && this.delta < 0) {\n        noTransition = true;\n      }\n      return {\n        'y-progress--no-trans': noTransition,\n        'y-progress--outlined': !!this.outlined,\n        'y-progress--indeterminate': !!this.indeterminate,\n        'y-progress-bar--rounded': !!this.rounded,\n        'y-progress-bar--reverse': !!this.reverse,\n      };\n    },\n    leadColor(): string {\n      let color = this.color ?? '';\n      if (!isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n      }\n      return color;\n    },\n    styles(): StyleValue {\n      let minWidth;\n      if (this.innerText && this.numValue < 5 && this.numValue > 0) {\n        minWidth = '2rem';\n      }\n      return {\n        transform: `scaleX(${this.numValue / 100})`,\n        minWidth,\n      };\n    },\n  },\n  render() {\n    const {\n      classes,\n      numValue,\n      height,\n      outlineColor,\n      textColor,\n      styles,\n      innerText,\n    } = this;\n    const slots = this.$slots;\n    return (\n      <div\n        class={{ 'y-progress y-progress-bar': true, ...classes }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={numValue}\n        style={{\n          '--y-progress-bar__height':\n            height !== undefined ? `${height}px` : undefined,\n          '--y-progress-bar__outline-color':\n            outlineColor !== undefined ? outlineColor : undefined,\n          '--y-progress-bar__color': this.leadColor,\n        }}\n      >\n        <div class=\"y-progress__track\"></div>\n        <div class=\"y-progress__tube\">\n          <div class=\"y-progress__lead\" style={styles}>\n            {slots['lead-inner']\n              ? slots['lead-inner']()\n              : innerText && (\n                  <div\n                    class={{\n                      'y-progress__lead-inner': true,\n                      'y-progress__lead-inner--fixed': numValue < 3,\n                    }}\n                    style={{ color: textColor }}\n                  >\n                    <span>{numValue} %</span>\n                  </div>\n                )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n});\n"],"mappings":";AAAA,SAA+BA,eAAe,QAAQ,KAAK;AAAC,SAEnDC,WAAW;AACpB;AAA6B,SACpBC,YAAY;AAErB,OAAO,MAAMC,YAAY,GAAGH,eAAe,CAAC;EAC1CI,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IACR,CAAC;IACDC,OAAO,EAAE;MACPF,IAAI,EAAEG;IACR,CAAC;IACDC,MAAM,EAAE;MACNJ,IAAI,EAAEC;IACR,CAAC;IACDI,kBAAkB,EAAE;MAClBL,IAAI,EAAEG;IACR,CAAC;IACDG,QAAQ,EAAE;MACRN,IAAI,EAAEG;IACR,CAAC;IACDI,SAAS,EAAE;MACTP,IAAI,EAAEG;IACR,CAAC;IACDK,KAAK,EAAE;MACLR,IAAI,EAAES,MAA0B;MAChCC,OAAO,EAAE;IACX,CAAC;IACDC,SAAS,EAAE;MACTX,IAAI,EAAES;IACR,CAAC;IACDG,YAAY,EAAE;MACZZ,IAAI,EAAES;IACR,CAAC;IACDI,aAAa,EAAEV,OAAO;IACtBW,OAAO,EAAEX;EACX,CAAC;EACDY,KAAKA,CAACjB,KAAK,EAAE;IACX,MAAM;MAAEkB;IAAS,CAAC,GAAGtB,WAAW,CAACI,KAAK,CAAC;IAEvC,OAAO;MACLkB;IACF,CAAC;EACH,CAAC;EACDC,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAOA,CAAA,EAA4B;MACjC,IAAIC,YAAY,GAAG,KAAK;MACxB,IAAI,IAAI,CAAChB,kBAAkB,IAAI,IAAI,CAACa,KAAK,GAAG,CAAC,EAAE;QAC7CG,YAAY,GAAG,IAAI;MACrB;MACA,OAAO;QACL,sBAAsB,EAAEA,YAAY;QACpC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAACf,QAAQ;QACvC,2BAA2B,EAAE,CAAC,CAAC,IAAI,CAACO,aAAa;QACjD,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAACX,OAAO;QACzC,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAACY;MACpC,CAAC;IACH,CAAC;IACDQ,SAASA,CAAA,EAAW;MAClB,IAAId,KAAK,GAAG,IAAI,CAACA,KAAK,IAAI,EAAE;MAC5B,IAAI,CAACb,YAAY,CAACa,KAAK,CAAC,EAAE;QACxBA,KAAK,GAAI,iBAAgBA,KAAM,GAAE;MACnC;MACA,OAAOA,KAAK;IACd,CAAC;IACDe,MAAMA,CAAA,EAAe;MACnB,IAAIC,QAAQ;MACZ,IAAI,IAAI,CAACjB,SAAS,IAAI,IAAI,CAACS,QAAQ,GAAG,CAAC,IAAI,IAAI,CAACA,QAAQ,GAAG,CAAC,EAAE;QAC5DQ,QAAQ,GAAG,MAAM;MACnB;MACA,OAAO;QACLC,SAAS,EAAG,UAAS,IAAI,CAACT,QAAQ,GAAG,GAAI,GAAE;QAC3CQ;MACF,CAAC;IACH;EACF,CAAC;EACDE,MAAMA,CAAA,EAAG;IACP,MAAM;MACJN,OAAO;MACPJ,QAAQ;MACRZ,MAAM;MACNQ,YAAY;MACZD,SAAS;MACTY,MAAM;MACNhB;IACF,CAAC,GAAG,IAAI;IACR,MAAMoB,KAAK,GAAG,IAAI,CAACC,MAAM;IACzB,OAAAC,YAAA;MAAA,SAEW;QAAE,2BAA2B,EAAE,IAAI;QAAE,GAAGT;MAAQ,CAAC;MAAA,QACnD,aAAa;MAAA,iBACJ,GAAG;MAAA,iBACH,KAAK;MAAA,iBACJJ,QAAQ;MAAA,SAChB;QACL,0BAA0B,EACxBZ,MAAM,KAAK0B,SAAS,GAAI,GAAE1B,MAAO,IAAG,GAAG0B,SAAS;QAClD,iCAAiC,EAC/BlB,YAAY,KAAKkB,SAAS,GAAGlB,YAAY,GAAGkB,SAAS;QACvD,yBAAyB,EAAE,IAAI,CAACR;MAClC;IAAC,IAAAO,YAAA;MAAA,SAEU;IAAmB,UAAAA,YAAA;MAAA,SACnB;IAAkB,IAAAA,YAAA;MAAA,SAChB,kBAAkB;MAAA,SAAQN;IAAM,IACxCI,KAAK,CAAC,YAAY,CAAC,GAChBA,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GACrBpB,SAAS,IAAAsB,YAAA;MAAA,SAEE;QACL,wBAAwB,EAAE,IAAI;QAC9B,+BAA+B,EAAEb,QAAQ,GAAG;MAC9C,CAAC;MAAA,SACM;QAAER,KAAK,EAAEG;MAAU;IAAC,IAAAkB,YAAA,gBAEpBb,QAAQ,EAAAe,gBAAA,UAElB;EAKf;AACF,CAAC,CAAC"}

package/lib/components/switch/YSwitch.scss

@@ -2,7 +2,7 @@
 @use '../../styles/variables';
 
 .y-switch {
-  --y-switch__color: rgba(var(--y-theme-primary), 1);
+  --y-switch__color: var(--y-theme-primary);
   font-size: 1rem;
 
   &__slot {

package/lib/components/table/YTable.scss

@@ -29,7 +29,7 @@ $table-cell-padding: 0 16px !default;
 
   &--fixed-head.y-table > &__container > table > thead > tr > th {
     z-index: 1;
-    background: rgba(var(--y-theme-panel, 250, 250, 250), 1);
+    background: var(--y-theme-panel, 250, 250, 250);
   }
 
   &__container {

package/lib/components/tree-view/YTreeView.mjs

@@ -333,7 +333,7 @@ export const YTreeView = defineComponent({
     const styles = computed(() => {
       let color = props.activeColor;
       if (props.activeColor && !isColorValue(props.activeColor)) {
-        color = `rgba(var(--y-theme-${props.activeColor}), 1)`;
+        color = `var(--y-theme-${props.activeColor})`;
       }
       return {
         [`--y-tree-view__active-color`]: color