yuyeon 0.2.3-rc.9 → 0.3.0-rc.1

package/lib/components/input/YInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YInput.mjs","names":["computed","ref","shallowRef","watch","useRender","pressFocusPropsOptions","useFocus","pressThemePropsOptions","useLocalTheme","pressValidationPropsOptions","useValidation","defineComponent","getUid","propsFactory","toStyleSizeValue","NAME","pressYInputPropsOptions","name","String","width","type","Number","height","displayTag","default","label","modelValue","Array","Object","autoSelect","Boolean","floating","floated","placeholder","required","loading","variation","outlined","filled","ceramic","extended","YInput","props","emits","slots","setup","_ref","attrs","expose","emit","UID","themeClasses","focused","isFocused","focusedClasses","whenFocus","whenBlur","isDisabled","isReadonly","isLoading","invokeValidators","isError","isSuccess","errors","errorResult","stack$","display$","inValue","lazyValue","hasMouseDown","variations","split","map","value","trim","isFloatedLabel","classes","includes","displayStyles","neo","readonly","onClick","event","onMousedown","e","onMouseup","onKeydown","onFocus","onBlur","onClickLeading","onChange","createLabel","show","undefined","_createVNode","_Fragment","_createTextVNode","validate","prepend","leading","error","attrId","toString","trailing","helperText","append"],"sources":["../../../src/components/input/YInput.tsx"],"sourcesContent":["import {\r\n  type PropType,\r\n  type SlotsType,\r\n  type VNode,\r\n  computed,\r\n  ref,\r\n  shallowRef,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { pressFocusPropsOptions, useFocus } from '@/composables/focus';\r\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\r\nimport {\r\n  pressValidationPropsOptions,\r\n  useValidation,\r\n} from '@/composables/validation';\r\nimport { defineComponent, getUid, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YInput.scss';\r\n\r\nconst NAME = 'y-input';\r\n\r\nexport const pressYInputPropsOptions = propsFactory(\r\n  {\r\n    name: String,\r\n    width: {\r\n      type: [String, Number] as PropType<string | number>,\r\n    },\r\n    height: [Number, String],\r\n    displayTag: {\r\n      type: String as PropType<string>,\r\n      default: 'div',\r\n    },\r\n    label: String as PropType<string>,\r\n    modelValue: { type: [String, Number, Array, Object] as PropType<any> },\r\n    autoSelect: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: true,\r\n    },\r\n    floating: { type: Boolean as PropType<boolean>, default: false },\r\n    floated: { type: Boolean as PropType<boolean>, default: () => false },\r\n    placeholder: String as PropType<string>,\r\n    required: Boolean as PropType<boolean>,\r\n    loading: Boolean as PropType<boolean>,\r\n    // variations\r\n    variation: String as PropType<string>,\r\n    outlined: Boolean as PropType<boolean>,\r\n    filled: Boolean as PropType<boolean>,\r\n    ceramic: Boolean as PropType<boolean>,\r\n    // validate\r\n    ...pressValidationPropsOptions(),\r\n    ...pressFocusPropsOptions(),\r\n    extended: Object as PropType<any>,\r\n  },\r\n  'YInput',\r\n);\r\n\r\nexport interface YInputDefaultSlotProps {\r\n  value: any;\r\n  loading: boolean;\r\n  attrId: string;\r\n}\r\n\r\nexport const YInput = defineComponent({\r\n  name: 'YInput',\r\n  props: {\r\n    ...pressThemePropsOptions(),\r\n    ...pressYInputPropsOptions(),\r\n  },\r\n  emits: [\r\n    'error',\r\n    'click',\r\n    'mousedown',\r\n    'mouseup',\r\n    'focus',\r\n    'blur',\r\n    'mousedown:display',\r\n    'mouseup:display',\r\n    'keydown:display',\r\n    'click:leading',\r\n    'update:modelValue',\r\n    'update:focused',\r\n  ],\r\n  slots: Object as SlotsType<{\r\n    prepend: any;\r\n    append: any;\r\n    label: any;\r\n    default: YInputDefaultSlotProps;\r\n    leading: { error: boolean };\r\n    trailing: any;\r\n    'leading-out': any;\r\n    'trailing-out': any;\r\n    'helper-text': {\r\n      error: boolean;\r\n      errorResult: string | undefined;\r\n      errors: any[];\r\n    };\r\n  }>,\r\n  setup(props, { slots, attrs, expose, emit }) {\r\n    const UID = getUid();\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const {\r\n      focused: isFocused,\r\n      focusedClasses,\r\n      whenFocus,\r\n      whenBlur,\r\n    } = useFocus(props, 'y-input');\r\n\r\n    const {\r\n      isDisabled,\r\n      isReadonly,\r\n      isLoading,\r\n      invokeValidators,\r\n      isError,\r\n      isSuccess,\r\n      errors,\r\n      errorResult,\r\n    } = useValidation(props, NAME, UID);\r\n\r\n    const stack$ = ref();\r\n    const display$ = ref();\r\n\r\n    const inValue = ref();\r\n    const lazyValue = ref();\r\n    const hasMouseDown = shallowRef(false);\r\n\r\n    const variations = computed(() => {\r\n      if (props.variation) {\r\n        return props.variation.split(',').map((value) => {\r\n          return value.trim();\r\n        });\r\n      }\r\n      return [];\r\n    });\r\n\r\n    const isFloatedLabel = computed(() => {\r\n      return (\r\n        props.floated ||\r\n        !!props.placeholder ||\r\n        (!props.placeholder && isFocused.value) ||\r\n        !!inValue.value\r\n      );\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        // Style\r\n        [themeClasses.value as string]: true,\r\n        'y-input--ceramic': !!props.ceramic,\r\n        'y-input--outlined':\r\n          !props.ceramic &&\r\n          (variations.value.includes('outlined') || !!props.outlined),\r\n        'y-input--filled':\r\n          variations.value.includes('filled') || !!props.filled,\r\n        // Value\r\n        'y-input--loading': isLoading.value,\r\n        'y-input--has-value': !!inValue.value,\r\n        'y-input--focused': isFocused.value,\r\n        'y-input--readonly': isReadonly.value,\r\n        'y-input--disabled': isDisabled.value,\r\n        'y-input--error': isError.value,\r\n        'y-input--success': isSuccess.value,\r\n      };\r\n    });\r\n\r\n    const displayStyles = computed<Record<string, any>>(() => {\r\n      return {\r\n        width: toStyleSizeValue(props.width),\r\n        height: toStyleSizeValue(props.height),\r\n      };\r\n    });\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (neo) => {\r\n        inValue.value = neo;\r\n      },\r\n    );\r\n\r\n    watch(\r\n      () => props.readonly,\r\n      (neo) => {\r\n        if (!neo) {\r\n          inValue.value = props.modelValue;\r\n        }\r\n      },\r\n    );\r\n\r\n    watch(inValue, (neo) => {\r\n      if (!isReadonly.value && !isLoading.value) {\r\n        emit('update:modelValue', neo);\r\n      }\r\n    });\r\n\r\n    watch(isError, (neo) => {\r\n      emit('error', neo, errors.value);\r\n    });\r\n\r\n    watch(\r\n      () => props.focused,\r\n      (neo) => {\r\n        if (!neo) {\r\n          invokeValidators();\r\n        }\r\n      },\r\n    );\r\n\r\n    function onClick(event: MouseEvent) {\r\n      emit('click', event);\r\n    }\r\n\r\n    function onMousedown(e: Event) {\r\n      hasMouseDown.value = true;\r\n      emit('mousedown:display', e);\r\n    }\r\n\r\n    function onMouseup(e: Event) {\r\n      hasMouseDown.value = false;\r\n      emit('mouseup:display', e);\r\n    }\r\n\r\n    function onKeydown(e: Event) {\r\n      emit('keydown:display', e);\r\n    }\r\n\r\n    function onFocus(event: FocusEvent) {\r\n      whenFocus();\r\n      emit('focus', event);\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      whenBlur();\r\n      invokeValidators();\r\n      emit('blur', event);\r\n    }\r\n\r\n    function onClickLeading(event: MouseEvent) {\r\n      emit('click:leading', event);\r\n    }\r\n\r\n    function onChange(event?: Event) {\r\n      invokeValidators();\r\n    }\r\n\r\n    function createLabel(): VNode | undefined {\r\n      const show = !!props.label || !!slots.label;\r\n      if (!show) {\r\n        return undefined;\r\n      }\r\n      return (\r\n        <label\r\n          class={[\r\n            {\r\n              [`${NAME}__label`]: true,\r\n              'y-input__floating-label': props.floating,\r\n              'y-input__floating-label--floated':\r\n                props.floating && isFloatedLabel.value,\r\n            },\r\n          ]}\r\n          for={`y-input--${UID}`}\r\n        >\r\n          {slots.label ? (\r\n            slots.label()\r\n          ) : props.label ? (\r\n            <>\r\n              {props.label}\r\n              {props.required && (\r\n                <span class={'y-input__required-mark'}>*</span>\r\n              )}\r\n            </>\r\n          ) : (\r\n            props.placeholder && !inValue.value && props.placeholder\r\n          )}\r\n        </label>\r\n      );\r\n    }\r\n\r\n    expose({\r\n      ...(props.extended ?? {}),\r\n      createLabel,\r\n      invokeValidators,\r\n      validate: invokeValidators,\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div class={[`${NAME}`, { ...classes.value }]}>\r\n          {slots.prepend && (\r\n            <div class={`${NAME}__prepend`}>{slots.prepend()}</div>\r\n          )}\r\n          <div ref={stack$} class={[`${NAME}__stack`]}>\r\n            {!props.floating && createLabel()}\r\n            {slots['leading-out'] && slots['leading-out']()}\r\n            <div\r\n              ref={display$}\r\n              class={`${NAME}__display`}\r\n              style={[{ ...displayStyles.value }]}\r\n              onClick={onClick}\r\n              onMousedown={onMousedown}\r\n              onMouseup={onMouseup}\r\n              onKeydown={onKeydown}\r\n            >\r\n              <div class={`${NAME}__plate`}></div>\r\n              {slots.leading && (\r\n                <div class={'y-input__leading'} onClick={onClickLeading}>\r\n                  {slots.leading({ error: isError.value })}\r\n                </div>\r\n              )}\r\n              {slots.default ? (\r\n                slots.default({\r\n                  value: props.modelValue,\r\n                  loading: isLoading.value,\r\n                  attrId: `y-input--${UID}`,\r\n                })\r\n              ) : (\r\n                <div\r\n                  class={`${NAME}__value`}\r\n                  data-id={`y-input--${UID}`}\r\n                  tabindex={0}\r\n                  onFocus={onFocus}\r\n                  onBlur={onBlur}\r\n                >\r\n                  {props.floating && createLabel()}\r\n                  {props.modelValue?.toString()}\r\n                </div>\r\n              )}\r\n              {slots.trailing?.()}\r\n            </div>\r\n            {slots['trailing-out'] && slots['trailing-out']()}\r\n            <div class={`${NAME}__helper-text`}>\r\n              {slots['helper-text'] ? (\r\n                <span>\r\n                  {slots['helper-text']({\r\n                    error: isError.value,\r\n                    errors: errors.value,\r\n                    errorResult: errorResult.value,\r\n                  })}\r\n                </span>\r\n              ) : (\r\n                props.helperText ?? errorResult.value\r\n              )}\r\n            </div>\r\n          </div>\r\n          {slots.append && (\r\n            <div class={`${NAME}__append`}>{slots.append()}</div>\r\n          )}\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      ...(props.extended ?? {}),\r\n      themeClasses,\r\n      isFocused,\r\n      focusedClasses,\r\n      whenFocus,\r\n      whenBlur,\r\n      createLabel,\r\n      invokeValidators,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YInput = InstanceType<typeof YInput>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YInput.mjs","names":["computed","ref","shallowRef","watch","useRender","pressFocusPropsOptions","useFocus","pressThemePropsOptions","useLocalTheme","pressValidationPropsOptions","useValidation","defineComponent","getUid","propsFactory","toStyleSizeValue","NAME","pressYInputPropsOptions","name","String","width","type","Number","height","displayTag","default","label","modelValue","Array","Object","autoSelect","Boolean","floating","floated","placeholder","required","loading","variation","outlined","filled","ceramic","extended","YInput","props","emits","slots","setup","_ref","attrs","expose","emit","UID","themeClasses","focused","isFocused","focusedClasses","whenFocus","whenBlur","isDisabled","isReadonly","isLoading","invokeValidators","resetError","isError","isSuccess","errors","errorResult","stack$","display$","inValue","lazyValue","hasMouseDown","variations","split","map","value","trim","isFloatedLabel","classes","includes","displayStyles","neo","readonly","onClick","event","onMousedown","e","onMouseup","onKeydown","onFocus","onBlur","onClickLeading","onChange","createLabel","show","undefined","_createVNode","_Fragment","_createTextVNode","validate","prepend","leading","error","attrId","toString","trailing","helperText","append"],"sources":["../../../src/components/input/YInput.tsx"],"sourcesContent":["import {\r\n  type PropType,\r\n  type SlotsType,\r\n  type VNode,\r\n  computed,\r\n  ref,\r\n  shallowRef,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { pressFocusPropsOptions, useFocus } from '@/composables/focus';\r\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\r\nimport {\r\n  pressValidationPropsOptions,\r\n  useValidation,\r\n} from '@/composables/validation';\r\nimport { defineComponent, getUid, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YInput.scss';\r\n\r\nconst NAME = 'y-input';\r\n\r\nexport const pressYInputPropsOptions = propsFactory(\r\n  {\r\n    name: String,\r\n    width: {\r\n      type: [String, Number] as PropType<string | number>,\r\n    },\r\n    height: [Number, String],\r\n    displayTag: {\r\n      type: String as PropType<string>,\r\n      default: 'div',\r\n    },\r\n    label: String as PropType<string>,\r\n    modelValue: { type: [String, Number, Array, Object] as PropType<any> },\r\n    autoSelect: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: true,\r\n    },\r\n    floating: { type: Boolean as PropType<boolean>, default: false },\r\n    floated: { type: Boolean as PropType<boolean>, default: () => false },\r\n    placeholder: String as PropType<string>,\r\n    required: Boolean as PropType<boolean>,\r\n    loading: Boolean as PropType<boolean>,\r\n    // variations\r\n    variation: String as PropType<string>,\r\n    outlined: Boolean as PropType<boolean>,\r\n    filled: Boolean as PropType<boolean>,\r\n    ceramic: Boolean as PropType<boolean>,\r\n    // validate\r\n    ...pressValidationPropsOptions(),\r\n    ...pressFocusPropsOptions(),\r\n    extended: Object as PropType<any>,\r\n  },\r\n  'YInput',\r\n);\r\n\r\nexport interface YInputDefaultSlotProps {\r\n  value: any;\r\n  loading: boolean;\r\n  attrId: string;\r\n}\r\n\r\nexport const YInput = defineComponent({\r\n  name: 'YInput',\r\n  props: {\r\n    ...pressThemePropsOptions(),\r\n    ...pressYInputPropsOptions(),\r\n  },\r\n  emits: [\r\n    'error',\r\n    'click',\r\n    'mousedown',\r\n    'mouseup',\r\n    'focus',\r\n    'blur',\r\n    'mousedown:display',\r\n    'mouseup:display',\r\n    'keydown:display',\r\n    'click:leading',\r\n    'update:modelValue',\r\n    'update:focused',\r\n  ],\r\n  slots: Object as SlotsType<{\r\n    prepend: any;\r\n    append: any;\r\n    label: any;\r\n    default: YInputDefaultSlotProps;\r\n    leading: { error: boolean };\r\n    trailing: any;\r\n    'leading-out': any;\r\n    'trailing-out': any;\r\n    'helper-text': {\r\n      error: boolean;\r\n      errorResult: string | undefined;\r\n      errors: any[];\r\n    };\r\n  }>,\r\n  setup(props, { slots, attrs, expose, emit }) {\r\n    const UID = getUid();\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const {\r\n      focused: isFocused,\r\n      focusedClasses,\r\n      whenFocus,\r\n      whenBlur,\r\n    } = useFocus(props, 'y-input');\r\n\r\n    const {\r\n      isDisabled,\r\n      isReadonly,\r\n      isLoading,\r\n      invokeValidators,\r\n      resetError,\r\n      isError,\r\n      isSuccess,\r\n      errors,\r\n      errorResult,\r\n    } = useValidation(props, NAME, UID);\r\n\r\n    const stack$ = ref();\r\n    const display$ = ref();\r\n\r\n    const inValue = ref();\r\n    const lazyValue = ref();\r\n    const hasMouseDown = shallowRef(false);\r\n\r\n    const variations = computed(() => {\r\n      if (props.variation) {\r\n        return props.variation.split(',').map((value) => {\r\n          return value.trim();\r\n        });\r\n      }\r\n      return [];\r\n    });\r\n\r\n    const isFloatedLabel = computed(() => {\r\n      return (\r\n        props.floated ||\r\n        !!props.placeholder ||\r\n        (!props.placeholder && isFocused.value) ||\r\n        !!inValue.value\r\n      );\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        // Style\r\n        [themeClasses.value as string]: true,\r\n        'y-input--ceramic': !!props.ceramic,\r\n        'y-input--outlined':\r\n          !props.ceramic &&\r\n          (variations.value.includes('outlined') || !!props.outlined),\r\n        'y-input--filled':\r\n          variations.value.includes('filled') || !!props.filled,\r\n        // Value\r\n        'y-input--loading': isLoading.value,\r\n        'y-input--has-value': !!inValue.value,\r\n        'y-input--focused': isFocused.value,\r\n        'y-input--readonly': isReadonly.value,\r\n        'y-input--disabled': isDisabled.value,\r\n        'y-input--error': isError.value,\r\n        'y-input--success': isSuccess.value,\r\n      };\r\n    });\r\n\r\n    const displayStyles = computed<Record<string, any>>(() => {\r\n      return {\r\n        width: toStyleSizeValue(props.width),\r\n        height: toStyleSizeValue(props.height),\r\n      };\r\n    });\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (neo) => {\r\n        inValue.value = neo;\r\n      },\r\n    );\r\n\r\n    watch(\r\n      () => props.readonly,\r\n      (neo) => {\r\n        if (!neo) {\r\n          inValue.value = props.modelValue;\r\n        }\r\n      },\r\n    );\r\n\r\n    watch(inValue, (neo) => {\r\n      if (!isReadonly.value && !isLoading.value) {\r\n        emit('update:modelValue', neo);\r\n      }\r\n    });\r\n\r\n    watch(isError, (neo) => {\r\n      emit('error', neo, errors.value);\r\n    });\r\n\r\n    watch(\r\n      () => props.focused,\r\n      (neo) => {\r\n        if (!neo) {\r\n          invokeValidators();\r\n        }\r\n      },\r\n    );\r\n\r\n    function onClick(event: MouseEvent) {\r\n      emit('click', event);\r\n    }\r\n\r\n    function onMousedown(e: Event) {\r\n      hasMouseDown.value = true;\r\n      emit('mousedown:display', e);\r\n    }\r\n\r\n    function onMouseup(e: Event) {\r\n      hasMouseDown.value = false;\r\n      emit('mouseup:display', e);\r\n    }\r\n\r\n    function onKeydown(e: Event) {\r\n      emit('keydown:display', e);\r\n    }\r\n\r\n    function onFocus(event: FocusEvent) {\r\n      whenFocus();\r\n      emit('focus', event);\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      whenBlur();\r\n      invokeValidators();\r\n      emit('blur', event);\r\n    }\r\n\r\n    function onClickLeading(event: MouseEvent) {\r\n      emit('click:leading', event);\r\n    }\r\n\r\n    function onChange(event?: Event) {\r\n      invokeValidators();\r\n    }\r\n\r\n    function createLabel(): VNode | undefined {\r\n      const show = !!props.label || !!slots.label;\r\n      if (!show) {\r\n        return undefined;\r\n      }\r\n      return (\r\n        <label\r\n          class={[\r\n            {\r\n              [`${NAME}__label`]: true,\r\n              'y-input__floating-label': props.floating,\r\n              'y-input__floating-label--floated':\r\n                props.floating && isFloatedLabel.value,\r\n            },\r\n          ]}\r\n          for={`y-input--${UID}`}\r\n        >\r\n          {slots.label ? (\r\n            slots.label()\r\n          ) : props.label ? (\r\n            <>\r\n              {props.label}\r\n              {props.required && (\r\n                <span class={'y-input__required-mark'}>*</span>\r\n              )}\r\n            </>\r\n          ) : (\r\n            props.placeholder && !inValue.value && props.placeholder\r\n          )}\r\n        </label>\r\n      );\r\n    }\r\n\r\n    expose({\r\n      ...(props.extended ?? {}),\r\n      createLabel,\r\n      invokeValidators,\r\n      validate: invokeValidators,\r\n      resetError,\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div class={[`${NAME}`, { ...classes.value }]}>\r\n          {slots.prepend && (\r\n            <div class={`${NAME}__prepend`}>{slots.prepend()}</div>\r\n          )}\r\n          <div ref={stack$} class={[`${NAME}__stack`]}>\r\n            {!props.floating && createLabel()}\r\n            {slots['leading-out'] && slots['leading-out']()}\r\n            <div\r\n              ref={display$}\r\n              class={`${NAME}__display`}\r\n              style={[{ ...displayStyles.value }]}\r\n              data-base-parent={true}\r\n              onClick={onClick}\r\n              onMousedown={onMousedown}\r\n              onMouseup={onMouseup}\r\n              onKeydown={onKeydown}\r\n            >\r\n              <div class={`${NAME}__plate`}></div>\r\n              {slots.leading && (\r\n                <div class={'y-input__leading'} onClick={onClickLeading}>\r\n                  {slots.leading({ error: isError.value })}\r\n                </div>\r\n              )}\r\n              {slots.default ? (\r\n                slots.default({\r\n                  value: props.modelValue,\r\n                  loading: isLoading.value,\r\n                  attrId: `y-input--${UID}`,\r\n                })\r\n              ) : (\r\n                <div\r\n                  class={`${NAME}__value`}\r\n                  data-id={`y-input--${UID}`}\r\n                  tabindex={0}\r\n                  onFocus={onFocus}\r\n                  onBlur={onBlur}\r\n                >\r\n                  {props.floating && createLabel()}\r\n                  {props.modelValue?.toString()}\r\n                </div>\r\n              )}\r\n              {slots.trailing?.()}\r\n            </div>\r\n            {slots['trailing-out'] && slots['trailing-out']()}\r\n            <div class={`${NAME}__helper-text`}>\r\n              {slots['helper-text'] ? (\r\n                <span>\r\n                  {slots['helper-text']({\r\n                    error: isError.value,\r\n                    errors: errors.value,\r\n                    errorResult: errorResult.value,\r\n                  })}\r\n                </span>\r\n              ) : (\r\n                props.helperText ?? errorResult.value\r\n              )}\r\n            </div>\r\n          </div>\r\n          {slots.append && (\r\n            <div class={`${NAME}__append`}>{slots.append()}</div>\r\n          )}\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      ...(props.extended ?? {}),\r\n      themeClasses,\r\n      isFocused,\r\n      focusedClasses,\r\n      whenFocus,\r\n      whenBlur,\r\n      createLabel,\r\n      invokeValidators,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YInput = InstanceType<typeof YInput>;\r\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","getCurrentInstance","mergeProps","reactive","ref","shallowRef","toRef","useModelDuplex","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","ComplementClick","bindClasses","defineComponent","propsFactory","pressBasePropsOptions","useBase","pressContentPropsOptions","useContent","pressScrollStrategyProps","useScrollStrategies","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","zIndex","contained","layerGroup","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","root$","model","active","get","set","v","base","base$","baseEl","baseSlot","baseFromSlotEl","contentEvents","themeClasses","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","lazyValue","onAfterUpdate","finish","hovered","focused","rendered","coordinateStyles","updateCoordinate","contentEl","root","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","toString","computedClass","boundClasses","computedContentClasses","isMe","vnode","slotBase","class","baseProps","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  ComponentInternalInstance,\n  PropType,\n  SlotsType,\n} from 'vue';\nimport {\n  Teleport,\n  Transition,\n  computed,\n  getCurrentInstance,\n  mergeProps,\n  reactive,\n  ref,\n  shallowRef,\n  toRef,\n} from 'vue';\n\nimport { useModelDuplex } from '@/composables/communication';\nimport { useRender } from '@/composables/component';\nimport { pressCoordinateProps, useCoordinate } 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  pressPolyTransitionPropsOptions,\n  usePolyTransition,\n} from '@/composables/transition';\nimport {\n  ComplementClick,\n  ComplementClickBindingOptions,\n} from '@/directives/complement-click';\nimport { bindClasses, defineComponent, propsFactory } from '@/util/component';\n\nimport { pressBasePropsOptions, useBase } from './base';\nimport { pressContentPropsOptions, useContent } from './content';\nimport {\n  pressScrollStrategyProps,\n  useScrollStrategies,\n} from './scroll-strategies';\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    scrimOpacity: {\n      type: Number as PropType<number>,\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    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    zIndex: {\n      type: [Number, String] as PropType<number | string>,\n      default: 2000,\n    },\n    contained: Boolean,\n    layerGroup: [String, Object] as PropType<string | Element>,\n    ...pressThemePropsOptions(),\n    ...pressPolyTransitionPropsOptions(),\n    ...pressBasePropsOptions(),\n    ...pressContentPropsOptions(),\n    ...pressCoordinateProps(),\n    ...pressScrollStrategyProps(),\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    modal: Boolean as PropType<boolean>,\n    ...pressYLayerProps(),\n  },\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'click:complement': (mouseEvent: MouseEvent) => true,\n    afterLeave: () => true,\n  },\n  slots: Object as SlotsType<{\n    base: any;\n    default: any;\n  }>,\n  setup(props, { emit, expose, attrs, slots }) {\n    const vm = getCurrentInstance();\n    const scrim$ = ref<HTMLElement>();\n    const content$ = ref<HTMLElement>();\n    const root$ = ref<HTMLElement>();\n    const model = useModelDuplex(props);\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    // Frags\n    const { base, base$, baseEl, baseSlot, baseFromSlotEl } = useBase(props);\n    const { contentEvents } = useContent(props, active);\n    const { themeClasses } = useLocalTheme(props);\n    const { layerGroup, layerGroupState, getActiveLayers } = useLayerGroup(props);\n    const { polyTransitionBindProps } = usePolyTransition(props);\n    const { dimensionStyles } = useDimension(props);\n\n    const { lazyValue, onAfterUpdate } = useLazy(toRef(props, 'eager'), active);\n    // States\n    const finish = shallowRef(false);\n    const hovered = ref(false);\n    const focused = ref(false);\n    const disabled = toRef(props, 'disabled');\n\n\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n\n    const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\n      contentEl: content$,\n      base,\n      active,\n    });\n    useScrollStrategies(props, {\n      root: root$,\n      contentEl: content$,\n      active,\n      baseEl: base,\n      updateCoordinate,\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        finish.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    function onMouseenter(event: Event) {\n      hovered.value = true;\n    }\n\n    function onMouseleave(event: Event) {\n      hovered.value = false;\n    }\n\n    const computedStyle = computed(() => {\n      return {\n        zIndex: (props.zIndex ?? '2000').toString(),\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    expose({\n      scrim$,\n      base$,\n      content$: computed(() => content$.value),\n      baseEl,\n      active,\n      onAfterUpdate,\n      updateCoordinate,\n      hovered,\n      finish,\n      modal: computed(() => props.modal),\n      getActiveLayers,\n      isMe: (vnode: ComponentInternalInstance) => {\n        return vnode === vm;\n      },\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          ...(props.baseProps ?? {}),\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                  {\n                    'y-layer': true,\n                    'y-layer--finish': finish.value,\n                    'y-layer--contained': props.contained,\n                    ...computedClass.value,\n                  },\n                  themeClasses.value,\n                ]}\n                onMouseenter={onMouseenter}\n                onMouseleave={onMouseleave}\n                style={computedStyle.value}\n                ref={root$}\n                {...attrs}\n              >\n                <Transition name=\"fade\" appear>\n                  {active.value && props.scrim && (\n                    <div\n                      class=\"y-layer__scrim\"\n                      style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\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                    {...contentEvents.value}\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      finish,\n      rendered,\n      lazyValue,\n      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      base$,\n      baseEl,\n      baseFromSlotEl,\n      polyTransitionBindProps,\n      coordinateStyles,\n      layerGroupState,\n      getActiveLayers,\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","getCurrentInstance","mergeProps","reactive","ref","shallowRef","toRef","useModelDuplex","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","ComplementClick","bindClasses","defineComponent","propsFactory","pressBasePropsOptions","useBase","pressContentPropsOptions","useContent","pressScrollStrategyProps","useScrollStrategies","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","zIndex","contained","layerGroup","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","root$","model","active","get","set","v","base","base$","baseEl","baseSlot","baseFromSlotEl","contentEvents","themeClasses","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","lazyValue","onAfterUpdate","finish","hovered","focused","rendered","coordinateStyles","updateCoordinate","contentEl","root","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","toString","computedClass","boundClasses","computedContentClasses","isMe","vnode","slotBase","class","baseProps","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type {\r\n  CSSProperties,\r\n  ComponentInternalInstance,\r\n  PropType,\r\n  SlotsType,\r\n} from 'vue';\r\nimport {\r\n  Teleport,\r\n  Transition,\r\n  computed,\r\n  getCurrentInstance,\r\n  mergeProps,\r\n  reactive,\r\n  ref,\r\n  shallowRef,\r\n  toRef,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { useRender } from '@/composables/component';\r\nimport { pressCoordinateProps, useCoordinate } 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  pressPolyTransitionPropsOptions,\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, defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { pressBasePropsOptions, useBase } from './base';\r\nimport { pressContentPropsOptions, useContent } from './content';\r\nimport {\r\n  pressScrollStrategyProps,\r\n  useScrollStrategies,\r\n} from './scroll-strategies';\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    scrimOpacity: {\r\n      type: Number as PropType<number>,\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    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    zIndex: {\r\n      type: [Number, String] as PropType<number | string>,\r\n      default: 2000,\r\n    },\r\n    contained: Boolean,\r\n    layerGroup: [String, Object] as PropType<string | Element>,\r\n    ...pressThemePropsOptions(),\r\n    ...pressPolyTransitionPropsOptions(),\r\n    ...pressBasePropsOptions(),\r\n    ...pressContentPropsOptions(),\r\n    ...pressCoordinateProps(),\r\n    ...pressScrollStrategyProps(),\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    modal: Boolean as PropType<boolean>,\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  slots: Object as SlotsType<{\r\n    base: any;\r\n    default: any;\r\n  }>,\r\n  setup(props, { emit, expose, attrs, slots }) {\r\n    const vm = getCurrentInstance();\r\n    const scrim$ = ref<HTMLElement>();\r\n    const content$ = ref<HTMLElement>();\r\n    const root$ = ref<HTMLElement>();\r\n    const model = useModelDuplex(props);\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    // Frags\r\n    const { base, base$, baseEl, baseSlot, baseFromSlotEl } = useBase(props);\r\n    const { contentEvents } = useContent(props, active);\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const { layerGroup, layerGroupState, getActiveLayers } = useLayerGroup(props);\r\n    const { polyTransitionBindProps } = usePolyTransition(props);\r\n    const { dimensionStyles } = useDimension(props);\r\n\r\n    const { lazyValue, onAfterUpdate } = useLazy(toRef(props, 'eager'), active);\r\n    // States\r\n    const finish = shallowRef(false);\r\n    const hovered = ref(false);\r\n    const focused = ref(false);\r\n    const disabled = toRef(props, 'disabled');\r\n\r\n\r\n    const rendered = computed<boolean>(\r\n      () => !disabled.value && (lazyValue.value || active.value),\r\n    );\r\n\r\n    const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\r\n      contentEl: content$,\r\n      base,\r\n      active,\r\n    });\r\n    useScrollStrategies(props, {\r\n      root: root$,\r\n      contentEl: content$,\r\n      active,\r\n      baseEl: base,\r\n      updateCoordinate,\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        finish.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    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    const computedStyle = computed(() => {\r\n      return {\r\n        zIndex: (props.zIndex ?? '2000').toString(),\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    expose({\r\n      scrim$,\r\n      base$,\r\n      content$: computed(() => content$.value),\r\n      baseEl,\r\n      active,\r\n      onAfterUpdate,\r\n      updateCoordinate,\r\n      hovered,\r\n      finish,\r\n      modal: computed(() => props.modal),\r\n      getActiveLayers,\r\n      isMe: (vnode: ComponentInternalInstance) => {\r\n        return vnode === vm;\r\n      },\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          ...(props.baseProps ?? {}),\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                  {\r\n                    'y-layer': true,\r\n                    'y-layer--finish': finish.value,\r\n                    'y-layer--contained': props.contained,\r\n                    ...computedClass.value,\r\n                  },\r\n                  themeClasses.value,\r\n                ]}\r\n                onMouseenter={onMouseenter}\r\n                onMouseleave={onMouseleave}\r\n                style={computedStyle.value}\r\n                ref={root$}\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                      style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\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                    {...contentEvents.value}\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      finish,\r\n      rendered,\r\n      lazyValue,\r\n      onAfterUpdate: onAfterUpdate as () => void,\r\n      scrim$,\r\n      content$,\r\n      base$,\r\n      baseEl,\r\n      baseFromSlotEl,\r\n      polyTransitionBindProps,\r\n      coordinateStyles,\r\n      layerGroupState,\r\n      getActiveLayers,\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/progress-bar/YProgressBar.mjs

@@ -8,7 +8,7 @@ import "./YProgressBar.scss";
 export const YProgressBar = defineComponent({
   name: 'YProgressBar',
   props: {
-    value: {
+    modelValue: {
       type: Number
     },
     rounded: {

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

@@ -1 +1 @@
-{"version":3,"file":"YProgressBar.mjs","names":["computed","useRender","useProgress","isColorValue","defineComponent","YProgressBar","name","props","value","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","_ref","slots","numValue","delta","classes","noTransition","leadColor","styles","minWidth","width","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { type PropType, computed, shallowRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables';\r\nimport { useProgress } from '@/composables/progress';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YProgressBar.scss';\r\n\r\nexport const YProgressBar = defineComponent({\r\n  name: 'YProgressBar',\r\n  props: {\r\n    value: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    height: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    outlined: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    innerText: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    textColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    outlineColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    indeterminate: Boolean,\r\n    reverse: Boolean,\r\n  },\r\n  setup(props, { slots }) {\r\n    const { numValue, delta } = useProgress(props);\r\n\r\n    const classes = computed(() => {\r\n      let noTransition = false;\r\n      if (props.noRewindTransition && delta.value < 0) {\r\n        noTransition = true;\r\n      }\r\n\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--outlined': props.outlined,\r\n        'y-progress--indeterminate': props.indeterminate,\r\n        'y-progress-bar--rounded': props.rounded,\r\n        'y-progress-bar--reverse': props.reverse,\r\n      };\r\n    });\r\n\r\n    const leadColor = computed(() => {\r\n      let color = props.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let minWidth;\r\n      if (props.innerText && numValue.value < 5 && numValue.value > 0) {\r\n        minWidth = '2rem';\r\n      }\r\n      return {\r\n        width: `${numValue.value}%`,\r\n        minWidth,\r\n      };\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        class={{ 'y-progress y-progress-bar': true, ...classes.value }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue.value}\r\n        style={{\r\n          '--y-progress-bar__height':\r\n            props.height !== undefined ? `${props.height}px` : undefined,\r\n          '--y-progress-bar__outline-color':\r\n            props.outlineColor !== undefined ? props.outlineColor : undefined,\r\n          '--y-progress-bar__color': leadColor.value,\r\n          '--y-progress-bar__value': numValue.value,\r\n        }}\r\n      >\r\n        <div class=\"y-progress__track\"></div>\r\n        <div class=\"y-progress__tube\">\r\n          <div class=\"y-progress__lead\" style={styles.value}>\r\n            {slots['lead-inner']\r\n              ? slots['lead-inner']()\r\n              : props.innerText && (\r\n                  <div\r\n                    class={{\r\n                      'y-progress__lead-inner': true,\r\n                      'y-progress__lead-inner--fixed': numValue.value < 3,\r\n                    }}\r\n                    style={{ color: props.textColor }}\r\n                  >\r\n                    <span>{numValue} %</span>\r\n                  </div>\r\n                )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    ));\r\n\r\n    return {\r\n      numValue,\r\n      delta,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YProgressBar = InstanceType<typeof YProgressBar>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YProgressBar.mjs","names":["computed","useRender","useProgress","isColorValue","defineComponent","YProgressBar","name","props","modelValue","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","_ref","slots","numValue","delta","classes","noTransition","value","leadColor","styles","minWidth","width","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { type PropType, computed, shallowRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables';\r\nimport { useProgress } from '@/composables/progress';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YProgressBar.scss';\r\n\r\nexport const YProgressBar = defineComponent({\r\n  name: 'YProgressBar',\r\n  props: {\r\n    modelValue: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    height: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    outlined: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    innerText: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    textColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    outlineColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    indeterminate: Boolean,\r\n    reverse: Boolean,\r\n  },\r\n  setup(props, { slots }) {\r\n    const { numValue, delta } = useProgress(props);\r\n\r\n    const classes = computed(() => {\r\n      let noTransition = false;\r\n      if (props.noRewindTransition && delta.value < 0) {\r\n        noTransition = true;\r\n      }\r\n\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--outlined': props.outlined,\r\n        'y-progress--indeterminate': props.indeterminate,\r\n        'y-progress-bar--rounded': props.rounded,\r\n        'y-progress-bar--reverse': props.reverse,\r\n      };\r\n    });\r\n\r\n    const leadColor = computed(() => {\r\n      let color = props.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let minWidth;\r\n      if (props.innerText && numValue.value < 5 && numValue.value > 0) {\r\n        minWidth = '2rem';\r\n      }\r\n      return {\r\n        width: `${numValue.value}%`,\r\n        minWidth,\r\n      };\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        class={{ 'y-progress y-progress-bar': true, ...classes.value }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue.value}\r\n        style={{\r\n          '--y-progress-bar__height':\r\n            props.height !== undefined ? `${props.height}px` : undefined,\r\n          '--y-progress-bar__outline-color':\r\n            props.outlineColor !== undefined ? props.outlineColor : undefined,\r\n          '--y-progress-bar__color': leadColor.value,\r\n          '--y-progress-bar__value': numValue.value,\r\n        }}\r\n      >\r\n        <div class=\"y-progress__track\"></div>\r\n        <div class=\"y-progress__tube\">\r\n          <div class=\"y-progress__lead\" style={styles.value}>\r\n            {slots['lead-inner']\r\n              ? slots['lead-inner']()\r\n              : props.innerText && (\r\n                  <div\r\n                    class={{\r\n                      'y-progress__lead-inner': true,\r\n                      'y-progress__lead-inner--fixed': numValue.value < 3,\r\n                    }}\r\n                    style={{ color: props.textColor }}\r\n                  >\r\n                    <span>{numValue} %</span>\r\n                  </div>\r\n                )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    ));\r\n\r\n    return {\r\n      numValue,\r\n      delta,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YProgressBar = InstanceType<typeof YProgressBar>;\r\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAoB,KAAK;AAAC,SAEjDC,SAAS;AAAA,SACTC,WAAW;AAAA,SACXC,YAAY;AAAA,SACZC,eAAe;AAExB;AAEA,OAAO,MAAMC,YAAY,GAAGD,eAAe,CAAC;EAC1CE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE;IACLC,UAAU,EAAE;MACVC,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,EAAAkB,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,QAAQ;MAAEC;IAAM,CAAC,GAAG1B,WAAW,CAACK,KAAK,CAAC;IAE9C,MAAMsB,OAAO,GAAG7B,QAAQ,CAAC,MAAM;MAC7B,IAAI8B,YAAY,GAAG,KAAK;MACxB,IAAIvB,KAAK,CAACO,kBAAkB,IAAIc,KAAK,CAACG,KAAK,GAAG,CAAC,EAAE;QAC/CD,YAAY,GAAG,IAAI;MACrB;MAEA,OAAO;QACL,sBAAsB,EAAEA,YAAY;QACpC,sBAAsB,EAAEvB,KAAK,CAACQ,QAAQ;QACtC,2BAA2B,EAAER,KAAK,CAACe,aAAa;QAChD,yBAAyB,EAAEf,KAAK,CAACI,OAAO;QACxC,yBAAyB,EAAEJ,KAAK,CAACgB;MACnC,CAAC;IACH,CAAC,CAAC;IAEF,MAAMS,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,IAAIiB,KAAK,GAAGV,KAAK,CAACU,KAAK,IAAI,EAAE;MAC7B,IAAI,CAACd,YAAY,CAACc,KAAK,CAAC,EAAE;QACxBA,KAAK,GAAI,iBAAgBA,KAAM,GAAE;MACnC;MACA,OAAOA,KAAK;IACd,CAAC,CAAC;IAEF,MAAMgB,MAAM,GAAGjC,QAAQ,CAAC,MAAM;MAC5B,IAAIkC,QAAQ;MACZ,IAAI3B,KAAK,CAACS,SAAS,IAAIW,QAAQ,CAACI,KAAK,GAAG,CAAC,IAAIJ,QAAQ,CAACI,KAAK,GAAG,CAAC,EAAE;QAC/DG,QAAQ,GAAG,MAAM;MACnB;MACA,OAAO;QACLC,KAAK,EAAG,GAAER,QAAQ,CAACI,KAAM,GAAE;QAC3BG;MACF,CAAC;IACH,CAAC,CAAC;IAEFjC,SAAS,CAAC,MAAAmC,YAAA;MAAA,SAEC;QAAE,2BAA2B,EAAE,IAAI;QAAE,GAAGP,OAAO,CAACE;MAAM,CAAC;MAAA;MAAA;MAAA;MAAA,iBAI/CJ,QAAQ,CAACI,KAAK;MAAA,SACtB;QACL,0BAA0B,EACxBxB,KAAK,CAACM,MAAM,KAAKwB,SAAS,GAAI,GAAE9B,KAAK,CAACM,MAAO,IAAG,GAAGwB,SAAS;QAC9D,iCAAiC,EAC/B9B,KAAK,CAACc,YAAY,KAAKgB,SAAS,GAAG9B,KAAK,CAACc,YAAY,GAAGgB,SAAS;QACnE,yBAAyB,EAAEL,SAAS,CAACD,KAAK;QAC1C,yBAAyB,EAAEJ,QAAQ,CAACI;MACtC;IAAC,IAAAK,YAAA;MAAA;IAAA,UAAAA,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA;MAAA,SAIsCH,MAAM,CAACF;IAAK,IAC9CL,KAAK,CAAC,YAAY,CAAC,GAChBA,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GACrBnB,KAAK,CAACS,SAAS,IAAAoB,YAAA;MAAA,SAEJ;QACL,wBAAwB,EAAE,IAAI;QAC9B,+BAA+B,EAAET,QAAQ,CAACI,KAAK,GAAG;MACpD,CAAC;MAAA,SACM;QAAEd,KAAK,EAAEV,KAAK,CAACa;MAAU;IAAC,IAAAgB,YAAA,gBAE1BT,QAAQ,EAAAW,gBAAA,UAElB,MAIZ,CAAC;IAEF,OAAO;MACLX,QAAQ;MACRC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/progress-ring/YProgressRing.mjs

@@ -0,0 +1,128 @@
+import { createVNode as _createVNode } from "vue";
+import { computed } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { useProgress } from "../../composables/progress.mjs";
+import { clamp } from "../../util/index.mjs";
+import { isColorValue } from "../../util/color/index.mjs";
+import { defineComponent } from "../../util/component/index.mjs";
+import { toStyleSizeValue } from "../../util/ui.mjs";
+import "./YProgressRing.scss";
+export const YProgressRing = defineComponent({
+  name: 'YProgressRing',
+  props: {
+    modelValue: {
+      type: Number
+    },
+    rounded: {
+      type: Boolean
+    },
+    size: {
+      type: Number,
+      default: 32
+    },
+    noRewindTransition: {
+      type: Boolean
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    indeterminate: Boolean,
+    // TODO: Like SpinnerRing
+    reverse: Boolean,
+    /**
+     * Percent value 0~100
+     */
+    width: {
+      type: Number,
+      default: 20
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const circumference = 2 * Math.PI * 24;
+    const {
+      numValue,
+      delta
+    } = useProgress(props);
+    const leadColor = computed(() => {
+      let color = props.color ?? '';
+      if (!isColorValue(color)) {
+        color = `var(--y-theme-${color})`;
+      }
+      return color;
+    });
+    const holePath = computed(() => {
+      const widthPercent = clamp(props.width, 1, 100);
+      if (widthPercent === 100) {
+        return '';
+      }
+      const boxSize = 48;
+      const precision = 64;
+      const radius = (100 - widthPercent) / 100 * (boxSize / 2);
+      const vertices = [...Array(precision)].map((_, i) => {
+        const a = -i / (precision - 1) * Math.PI * 2;
+        const x = Math.cos(a) * radius + boxSize / 2;
+        const y = Math.sin(a) * radius + boxSize / 2;
+        return `${x}px ${y}px`;
+      });
+      return `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${vertices.join(',')})`;
+    });
+    const dashOffset = computed(() => {
+      return circumference - circumference * numValue.value / 100;
+    });
+    const classes = computed(() => {
+      let noTransition = false;
+      if (props.noRewindTransition && delta.value < 0) {
+        noTransition = true;
+      }
+      return {
+        'y-progress--no-trans': noTransition,
+        'y-progress--indeterminate': props.indeterminate,
+        'y-progress-ring--hole': !!holePath.value
+      };
+    });
+    useRender(() => _createVNode("div", {
+      "class": {
+        'y-progress y-progress-ring': true,
+        ...classes.value
+      },
+      "role": "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": numValue.value,
+      "style": {
+        '--y-progress-ring__size': toStyleSizeValue(props.size),
+        '--y-progress-ring__color': leadColor.value,
+        '--y-progress-ring__value': numValue.value,
+        '--y-progress-ring__hole-path': holePath.value
+      }
+    }, [_createVNode("svg", {
+      "class": "y-progress-ring__tube",
+      "width": "48",
+      "height": "48",
+      "viewBox": "0 0 48 48",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [_createVNode("circle", {
+      "class": "y-progress-ring__track",
+      "cx": "24",
+      "cy": "24",
+      "r": "24"
+    }, null), _createVNode("circle", {
+      "class": "y-progress-ring__lead",
+      "cx": "24",
+      "cy": "24",
+      "r": "12",
+      "stroke-width": "24",
+      "stroke-dasharray": circumference / 2,
+      "stroke-dashoffset": dashOffset.value / 2
+    }, null)])]));
+    return {
+      numValue,
+      delta
+    };
+  }
+});
+//# sourceMappingURL=YProgressRing.mjs.map

package/lib/components/progress-ring/YProgressRing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YProgressRing.mjs","names":["computed","useRender","useProgress","clamp","isColorValue","defineComponent","toStyleSizeValue","YProgressRing","name","props","modelValue","type","Number","rounded","Boolean","size","default","noRewindTransition","color","String","indeterminate","reverse","width","setup","_ref","slots","circumference","Math","PI","numValue","delta","leadColor","holePath","widthPercent","boxSize","precision","radius","vertices","Array","map","_","i","a","x","cos","y","sin","join","dashOffset","value","classes","noTransition","_createVNode"],"sources":["../../../src/components/progress-ring/YProgressRing.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { useProgress } from '@/composables/progress';\r\nimport { clamp } from '@/util';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YProgressRing.scss';\r\n\r\nexport const YProgressRing = defineComponent({\r\n  name: 'YProgressRing',\r\n  props: {\r\n    modelValue: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    size: {\r\n      type: Number as PropType<number>,\r\n      default: 32,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    indeterminate: Boolean, // TODO: Like SpinnerRing\r\n    reverse: Boolean,\r\n    /**\r\n     * Percent value 0~100\r\n     */\r\n    width: {\r\n      type: Number,\r\n      default: 20,\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    const circumference = 2 * Math.PI * 24;\r\n\r\n    const { numValue, delta } = useProgress(props);\r\n\r\n    const leadColor = computed(() => {\r\n      let color = props.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    });\r\n\r\n    const holePath = computed(() => {\r\n      const widthPercent = clamp(props.width, 1, 100);\r\n      if (widthPercent === 100) {\r\n        return '';\r\n      }\r\n      const boxSize = 48;\r\n      const precision = 64;\r\n      const radius = ((100 - widthPercent) / 100) * (boxSize / 2);\r\n      const vertices = [...Array(precision)].map((_, i) => {\r\n        const a = (-i / (precision - 1)) * Math.PI * 2;\r\n        const x = Math.cos(a) * radius + boxSize / 2;\r\n        const y = Math.sin(a) * radius + boxSize / 2;\r\n        return `${x}px ${y}px`;\r\n      });\r\n      return `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${vertices.join(',')})`;\r\n    });\r\n\r\n    const dashOffset = computed(() => {\r\n      return circumference - (circumference * numValue.value) / 100;\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      let noTransition = false;\r\n      if (props.noRewindTransition && delta.value < 0) {\r\n        noTransition = true;\r\n      }\r\n\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--indeterminate': props.indeterminate,\r\n        'y-progress-ring--hole': !!holePath.value,\r\n      };\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        class={{ 'y-progress y-progress-ring': true, ...classes.value }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue.value}\r\n        style={{\r\n          '--y-progress-ring__size': toStyleSizeValue(props.size),\r\n          '--y-progress-ring__color': leadColor.value,\r\n          '--y-progress-ring__value': numValue.value,\r\n          '--y-progress-ring__hole-path': holePath.value,\r\n        }}\r\n      >\r\n        <svg\r\n          class=\"y-progress-ring__tube\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 48 48\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <circle class=\"y-progress-ring__track\" cx=\"24\" cy=\"24\" r=\"24\" />\r\n          <circle\r\n            class=\"y-progress-ring__lead\"\r\n            cx=\"24\"\r\n            cy=\"24\"\r\n            r=\"12\"\r\n            stroke-width=\"24\"\r\n            stroke-dasharray={circumference / 2}\r\n            stroke-dashoffset={dashOffset.value / 2}\r\n          />\r\n        </svg>\r\n      </div>\r\n    ));\r\n\r\n    return {\r\n      numValue,\r\n      delta,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YProgressRing = InstanceType<typeof YProgressRing>;\r\n"],"mappings":"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"}

package/lib/components/progress-ring/YProgressRing.scss

@@ -0,0 +1,38 @@
+.y-progress-ring {
+  --y-progress-ring__size: 32px;
+  --y-progress-ring__color: var(--y-theme-primary);
+  --y-progress-ring__track-color: rgba(
+    var(--y-theme-surface-variant-rgb),
+    0.74
+  );
+
+  width: var(--y-progress-ring__size, 32px);
+  height: var(--y-progress-ring__size, 32px);
+
+  &__tube {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  &__lead {
+    fill: none;
+    stroke: var(--y-progress-ring__color, var(--y-theme-primary));
+    transform-origin: left;
+    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+  }
+
+  &__track {
+    fill: var(--y-progress-ring__track-color);
+    stroke: none;
+  }
+
+  &--hole &__lead,
+  &--hole &__track {
+    clip-path: var(--y-progress-ring__hole-path);
+  }
+
+  &--no-trans &__lead {
+    transition: none;
+  }
+}

package/lib/components/progress-ring/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YProgressRing.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/progress-ring/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/progress-ring/index.ts"],"sourcesContent":["export * from './YProgressRing';\r\n"],"mappings":""}