yuyeon 0.0.47-rc.8 → 0.0.47

package/lib/components/button/YButton.mjs

@@ -9,8 +9,8 @@ import { isColorValue } from "../../util/color/index.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";
 import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
 import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
-/**
- * Style
+/**
+ * Style
  */
 import "./YButton.scss";
 const NAME = 'y-button';
@@ -143,6 +143,7 @@ export const YButton = defineComponent({
     useRender(() => {
       const Tag = link.isLink.value ? 'a' : 'button';
       return _withDirectives(_createVNode(Tag, {
+        "type": Tag === 'a' ? undefined : 'button',
         "class": [`${NAME}`, choice?.selectedClass.value, {
           ...classes.value
         }],

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

@@ -1 +1 @@
-{"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport { computed, defineComponent, mergeProps } from 'vue';\r\n\r\nimport {\r\n  pressChoiceItemPropsOptions,\r\n  useChoiceItem,\r\n} from '../../composables/choice';\r\nimport { useChoiceByLink } from '../../composables/choice-link';\r\nimport { useRender } from '../../composables/component';\r\nimport {\r\n  pressVueRouterPropsOptions,\r\n  useLink,\r\n} from '../../composables/vue-router';\r\nimport { PlateWave } from '../../directives/plate-wave';\r\nimport { isColorValue } from '../../util/color';\r\nimport { EventProp, propsFactory } from '../../util/vue-component';\r\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\r\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\r\n\r\n/**\r\n * Style\r\n */\r\nimport './YButton.scss';\r\n\r\nconst NAME = 'y-button';\r\n\r\nexport const pressYButtonProps = propsFactory(\r\n  {\r\n    loading: Boolean,\r\n    active: { type: Boolean, default: undefined },\r\n    injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\r\n    //\r\n    variation: {\r\n      type: String as PropType<string>,\r\n    },\r\n    small: Boolean,\r\n    icon: Boolean,\r\n    outlined: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    rounded: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    filled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    //\r\n    color: {\r\n      type: String,\r\n    },\r\n    noWave: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    ...pressVueRouterPropsOptions(),\r\n    ...pressChoiceItemPropsOptions(),\r\n  },\r\n  'YButton',\r\n);\r\n\r\nexport const YButton = defineComponent({\r\n  name: 'YButton',\r\n  directives: {\r\n    PlateWave,\r\n  },\r\n  props: pressYButtonProps(),\r\n  emits: {\r\n    click: (event: MouseEvent) => true,\r\n    'choice:selected': (choice: { value: boolean }) => true,\r\n  },\r\n  setup(props, { attrs, slots, emit }) {\r\n    const choice = useChoiceItem(props, props.injectSymbol, false);\r\n    const link = useLink(props, attrs);\r\n    useChoiceByLink(link, choice?.select);\r\n\r\n    const isActive = computed(() => {\r\n      if (props.active !== undefined) {\r\n        return props.active;\r\n      }\r\n      if (link.isLink.value) {\r\n        return link.isActive?.value;\r\n      }\r\n      return choice?.isSelected.value;\r\n    });\r\n\r\n    const variations = computed(() => {\r\n      const { variation } = props;\r\n      if (typeof variation === 'string') {\r\n        return variation.split(',').map((value) => {\r\n          return value.trim();\r\n        });\r\n      }\r\n      return [];\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      const { outlined, rounded, filled, small, icon } = props;\r\n      return {\r\n        [`${NAME}--outlined`]:\r\n          variations.value.includes('outlined') || outlined,\r\n        [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\r\n        [`${NAME}--filled`]: variations.value.includes('filled') || filled,\r\n        [`${NAME}--text`]: variations.value.includes('text'),\r\n        [`${NAME}--small`]: variations.value.includes('small') || small,\r\n        [`${NAME}--icon`]: variations.value.includes('icon') || icon,\r\n        [`${NAME}--color`]: props.color,\r\n        [`${NAME}--loading`]: props.loading,\r\n        [`${NAME}--disabled`]: props.disabled,\r\n        [`${NAME}--active`]: isActive.value,\r\n      };\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let { color } = props;\r\n      let textColor: string | undefined;\r\n      if (color && !isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n        textColor = `var(--y-theme-on-${props.color})`;\r\n      }\r\n      return {\r\n        [`--y-button__color`]: color,\r\n        [`--y-button__text-color`]: textColor,\r\n      };\r\n    });\r\n\r\n    const isDisabled = computed(() => {\r\n      return choice?.disabled.value || props.disabled;\r\n    });\r\n\r\n    /// Events\r\n    function onClick(e: MouseEvent) {\r\n      if (\r\n        isDisabled.value ||\r\n        props.loading ||\r\n        (link.isLink.value &&\r\n          (e.metaKey ||\r\n            e.altKey ||\r\n            e.ctrlKey ||\r\n            e.shiftKey ||\r\n            e.button !== 0 ||\r\n            attrs.target === '_blank'))\r\n      ) {\r\n        return;\r\n      }\r\n      emit('click', e);\r\n      link.navigate?.(e);\r\n      choice?.toggle();\r\n    }\r\n\r\n    useRender(() => {\r\n      const Tag = link.isLink.value ? 'a' : 'button';\r\n      return (\r\n        <Tag\r\n          class={[\r\n            `${NAME}`,\r\n            choice?.selectedClass.value,\r\n            {\r\n              ...classes.value,\r\n            },\r\n          ]}\r\n          href={props.disabled ? undefined : link.href.value}\r\n          style={styles.value}\r\n          onClick={onClick}\r\n          disabled={props.disabled ? true : undefined}\r\n          v-plate-wave={!props.noWave && !props.loading}\r\n        >\r\n          <span class={['y-button__content']}>\r\n            {props.loading && (\r\n              <YSpinnerRing\r\n                {...mergeProps({ width: '24', height: '24' })}\r\n              ></YSpinnerRing>\r\n            )}\r\n            {slots.default?.()}\r\n          </span>\r\n          {slots.append?.()}\r\n        </Tag>\r\n      );\r\n    });\r\n\r\n    return {\r\n      link,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YButton = InstanceType<typeof YButton>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps } from 'vue';\n\nimport {\n  pressChoiceItemPropsOptions,\n  useChoiceItem,\n} from '../../composables/choice';\nimport { useChoiceByLink } from '../../composables/choice-link';\nimport { useRender } from '../../composables/component';\nimport {\n  pressVueRouterPropsOptions,\n  useLink,\n} from '../../composables/vue-router';\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    active: { type: Boolean, default: undefined },\n    injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\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    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n    ...pressVueRouterPropsOptions(),\n    ...pressChoiceItemPropsOptions(),\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: pressYButtonProps(),\n  emits: {\n    click: (event: MouseEvent) => true,\n    'choice:selected': (choice: { value: boolean }) => true,\n  },\n  setup(props, { attrs, slots, emit }) {\n    const choice = useChoiceItem(props, props.injectSymbol, false);\n    const link = useLink(props, attrs);\n    useChoiceByLink(link, choice?.select);\n\n    const isActive = computed(() => {\n      if (props.active !== undefined) {\n        return props.active;\n      }\n      if (link.isLink.value) {\n        return link.isActive?.value;\n      }\n      return choice?.isSelected.value;\n    });\n\n    const variations = computed(() => {\n      const { variation } = props;\n      if (typeof variation === 'string') {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    });\n\n    const classes = computed(() => {\n      const { outlined, rounded, filled, small, icon } = props;\n      return {\n        [`${NAME}--outlined`]:\n          variations.value.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n        [`${NAME}--text`]: variations.value.includes('text'),\n        [`${NAME}--small`]: variations.value.includes('small') || small,\n        [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n        [`${NAME}--color`]: props.color,\n        [`${NAME}--loading`]: props.loading,\n        [`${NAME}--disabled`]: props.disabled,\n        [`${NAME}--active`]: isActive.value,\n      };\n    });\n\n    const styles = computed(() => {\n      let { color } = props;\n      let textColor: string | undefined;\n      if (color && !isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n        textColor = `var(--y-theme-on-${props.color})`;\n      }\n      return {\n        [`--y-button__color`]: color,\n        [`--y-button__text-color`]: textColor,\n      };\n    });\n\n    const isDisabled = computed(() => {\n      return choice?.disabled.value || props.disabled;\n    });\n\n    /// Events\n    function onClick(e: MouseEvent) {\n      if (\n        isDisabled.value ||\n        props.loading ||\n        (link.isLink.value &&\n          (e.metaKey ||\n            e.altKey ||\n            e.ctrlKey ||\n            e.shiftKey ||\n            e.button !== 0 ||\n            attrs.target === '_blank'))\n      ) {\n        return;\n      }\n      emit('click', e);\n      link.navigate?.(e);\n      choice?.toggle();\n    }\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : 'button';\n      return (\n        <Tag\n          type={Tag === 'a' ? undefined : 'button'}\n          class={[\n            `${NAME}`,\n            choice?.selectedClass.value,\n            {\n              ...classes.value,\n            },\n          ]}\n          href={props.disabled ? undefined : link.href.value}\n          style={styles.value}\n          onClick={onClick}\n          disabled={props.disabled ? true : undefined}\n          v-plate-wave={!props.noWave && !props.loading}\n        >\n          <span class={['y-button__content']}>\n            {props.loading && (\n              <YSpinnerRing\n                {...mergeProps({ width: '24', height: '24' })}\n              ></YSpinnerRing>\n            )}\n            {slots.default?.()}\n          </span>\n          {slots.append?.()}\n        </Tag>\n      );\n    });\n\n    return {\n      link,\n    };\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}

package/lib/components/dialog/YDialog.mjs

@@ -18,6 +18,7 @@ export const pressYDialogPropsOptions = propsFactory({
     type: [Array, String, Object]
   },
   maximized: Boolean,
+  focusTrap: [Boolean, String, Object, Array],
   offset: {
     type: String
   },
@@ -60,8 +61,32 @@ export const YDialog = defineComponent({
       children
     } = useActiveStack(layer$, active, shallowRef(true));
     function onFocusin(e) {
+      if (props.focusTrap === false) {
+        return;
+      }
       const prevTarget = e.relatedTarget;
       const target = e.target;
+      const excludeTarget = props.focusTrap;
+      if (typeof excludeTarget === 'string' && document.querySelector(excludeTarget) == target) {
+        return;
+      }
+      if (typeof excludeTarget === 'object') {
+        if (Array.isArray(excludeTarget)) {
+          const excluded = excludeTarget.some(exclude => {
+            if (typeof exclude === 'string') {
+              return document.querySelector(exclude) == target;
+            }
+            if (typeof exclude === 'object') {
+              return exclude == target;
+            }
+          });
+          if (excluded) {
+            return;
+          }
+        } else if (excludeTarget == target) {
+          return;
+        }
+      }
       function testChildrenContains(layers) {
         return layers.some(layer => {
           return !layer.content$?.contains(target);

package/lib/components/dialog/YDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","getCurrentInstance","onBeforeUnmount","ref","shallowRef","watch","useModelDuplex","useRender","chooseProps","omit","toStyleSizeValue","bindClasses","propsFactory","YCard","YLayer","pressYLayerProps","useActiveStack","pressYDialogPropsOptions","persistent","type","Boolean","default","dialogClasses","Array","String","Object","maximized","offset","scrim","YDialog","name","components","props","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","styles","contentStyles","paddingTop","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","testChildrenContains","layers","some","layer","content$","contains","value","document","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","isSameNode","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","filtered","ctx","modal","classList","scrollTop","documentElement","scrollLeft","add","style","top","left","isMe","remove","onUpdate","v","onClick","currentActive","disabled","baseEl","neo","old","immediate","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit } from '../../util';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const pressYDialogPropsOptions = propsFactory(\n  {\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    maximized: Boolean as PropType<boolean>,\n    offset: {\n      type: String as PropType<string>,\n    },\n    ...omit(\n      pressYLayerProps({\n        scrim: true,\n      }),\n      ['offset', 'classes'],\n    ),\n  },\n  'YDialog',\n);\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: pressYDialogPropsOptions(),\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...(props.contentStyles ?? {}),\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer$.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {\n          return;\n        }\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (\n          (filtered && !filtered.length) ||\n          !root$.classList.contains('y-dialog--virtual-scroll')\n        ) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n          if (props.maximized) {\n            document.documentElement.classList.add('y-dialog--prevent-scroll');\n          }\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          root$.classList.remove('y-dialog--virtual-scroll');\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          document.documentElement.scrollTop = tempScrollTop.value;\n          document.documentElement.scrollLeft = tempScrollLeft.value;\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n        preventInteractionBackground(neo);\n      },\n      { immediate: true },\n    );\n\n    onBeforeUnmount(() => {\n      preventInteractionBackground(false);\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            modal\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['contentStyles'])}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","getCurrentInstance","onBeforeUnmount","ref","shallowRef","watch","useModelDuplex","useRender","chooseProps","omit","toStyleSizeValue","bindClasses","propsFactory","YCard","YLayer","pressYLayerProps","useActiveStack","pressYDialogPropsOptions","persistent","type","Boolean","default","dialogClasses","Array","String","Object","maximized","focusTrap","offset","scrim","YDialog","name","components","props","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","styles","contentStyles","paddingTop","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","excludeTarget","document","querySelector","isArray","excluded","some","exclude","testChildrenContains","layers","layer","content$","contains","value","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","isSameNode","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","filtered","ctx","modal","classList","scrollTop","documentElement","scrollLeft","add","style","top","left","isMe","remove","onUpdate","v","onClick","currentActive","disabled","baseEl","neo","old","immediate","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit } from '../../util';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const pressYDialogPropsOptions = propsFactory(\n  {\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    maximized: Boolean as PropType<boolean>,\n    focusTrap: [Boolean, String, Object, Array] as PropType<\n      false | string | string[] | HTMLElement\n    >,\n    offset: {\n      type: String as PropType<string>,\n    },\n    ...omit(\n      pressYLayerProps({\n        scrim: true,\n      }),\n      ['offset', 'classes'],\n    ),\n  },\n  'YDialog',\n);\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: pressYDialogPropsOptions(),\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...(props.contentStyles ?? {}),\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n\n    function onFocusin(e: FocusEvent) {\n      if (props.focusTrap === false) {\n        return;\n      }\n\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      const excludeTarget = props.focusTrap;\n\n      if (\n        typeof excludeTarget === 'string' &&\n        document.querySelector(excludeTarget) == target\n      ) {\n        return;\n      }\n\n      if (typeof excludeTarget === 'object') {\n        if (Array.isArray(excludeTarget)) {\n          const excluded = excludeTarget.some((exclude) => {\n            if (typeof exclude === 'string') {\n              return document.querySelector(exclude) == target;\n            }\n            if (typeof exclude === 'object') {\n              return exclude == target;\n            }\n          });\n          if (excluded) {\n            return;\n          }\n        } else if (excludeTarget == target) {\n          return;\n        }\n      }\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer$.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {\n          return;\n        }\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (\n          (filtered && !filtered.length) ||\n          !root$.classList.contains('y-dialog--virtual-scroll')\n        ) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n          if (props.maximized) {\n            document.documentElement.classList.add('y-dialog--prevent-scroll');\n          }\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          root$.classList.remove('y-dialog--virtual-scroll');\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          document.documentElement.scrollTop = tempScrollTop.value;\n          document.documentElement.scrollLeft = tempScrollLeft.value;\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n        preventInteractionBackground(neo);\n      },\n      { immediate: true },\n    );\n\n    onBeforeUnmount(() => {\n      preventInteractionBackground(false);\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            modal\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['contentStyles'])}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/dropdown/YDropdown.mjs

@@ -34,6 +34,7 @@ export const YDropdown = defineComponent({
   props: {
     ...pressYDropdownPropsOptions()
   },
+  slots: Object,
   emits: ['update:modelValue', 'click'],
   setup(props, _ref) {
     let {
@@ -80,7 +81,10 @@ export const YDropdown = defineComponent({
               return _createVNode(YListItem, {
                 "onClick": e => onClickItem(item)
               }, {
-                default: () => [text]
+                default: () => [slots.item ? slots.item({
+                  text,
+                  item
+                }) : text]
               });
             })]
           }) : _createVNode("div", {

package/lib/components/dropdown/YDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDropdown.mjs","names":["defineComponent","mergeProps","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","chooseProps","propsFactory","YButton","YCard","YIcon","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","dropdownIcon","type","Array","Object","default","YDropdown","name","inheritAttrs","components","props","emits","setup","_ref","slots","attrs","emit","opened","onClickItem","item","value","menuProps","dropdownIconProps","_createVNode","_Fragment","_mergeProps","$event","base","_len","arguments","length","args","_key","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent, mergeProps } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIcon, YIconIconProp } from '../icon';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n  {\n    modelValue: Boolean as PropType<boolean>,\n    variation: String as PropType<string>,\n    color: String as PropType<string>,\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n    dropdownIcon: {\n      type: [String, Array, Object] as PropType<YIconIconProp>,\n      default: '$dropdown',\n    },\n    ...pressItemsPropsOptions(),\n  },\n  'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n  inheritAttrs: false,\n  components: {\n    YMenu,\n  },\n  props: {\n    ...pressYDropdownPropsOptions(),\n  },\n  emits: ['update:modelValue', 'click'],\n  setup(props, { slots, attrs, emit }) {\n    const opened = useModelDuplex(props);\n\n    function onClickItem(item: any) {\n      opened.value = false;\n      emit('click', item);\n    }\n\n    useRender(() => {\n      const menuProps = chooseProps(props, YMenu.props);\n      const dropdownIconProps = chooseProps(\n        typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {},\n        YIcon.props,\n      );\n      return (\n        <>\n          <YMenu\n            {...menuProps}\n            v-model={opened.value}\n            content-classes={['y-dropdown__content']}\n          >\n            {{\n              base: (...args: any[]) =>\n                slots.base ? (\n                  slots.base?.(...args)\n                ) : (\n                  <YButton\n                    variation={props.variation}\n                    color={props.color}\n                    class={[\n                      'y-dropdown',\n                      { 'y-dropdown--opened': opened.value },\n                    ]}\n                    {...attrs}\n                  >\n                    {\n                      <span class=\"y-dropdown__default\">\n                        {slots.default?.()}\n                      </span>\n                    }\n                    {slots['dropdown-icon'] ? (\n                      slots['dropdown-icon']()\n                    ) : (\n                      <YIcon\n                        {...mergeProps(dropdownIconProps)}\n                        icon={props.dropdownIcon}\n                        class={['y-dropdown__icon']}\n                      ></YIcon>\n                    )}\n                  </YButton>\n                ),\n              default: () =>\n                slots.menu ? (\n                  slots.menu()\n                ) : (\n                  <YCard>\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\n                      <YList>\n                        {props.items.map((item) => {\n                          const text = getObjectValueByPath(\n                            item,\n                            props.itemText,\n                          );\n                          return (\n                            <YListItem onClick={(e) => onClickItem(item)}>\n                              {text}\n                            </YListItem>\n                          );\n                        })}\n                      </YList>\n                    ) : (\n                      <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\n                    )}\n                  </YCard>\n                ),\n            }}\n          </YMenu>\n        </>\n      );\n    });\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDropdown.mjs","names":["defineComponent","mergeProps","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","chooseProps","propsFactory","YButton","YCard","YIcon","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","dropdownIcon","type","Array","Object","default","YDropdown","name","inheritAttrs","components","props","slots","emits","setup","_ref","attrs","emit","opened","onClickItem","item","value","menuProps","dropdownIconProps","_createVNode","_Fragment","_mergeProps","$event","base","_len","arguments","length","args","_key","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent, mergeProps, SlotsType } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIcon, YIconIconProp } from '../icon';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n  {\n    modelValue: Boolean as PropType<boolean>,\n    variation: String as PropType<string>,\n    color: String as PropType<string>,\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n    dropdownIcon: {\n      type: [String, Array, Object] as PropType<YIconIconProp>,\n      default: '$dropdown',\n    },\n    ...pressItemsPropsOptions(),\n  },\n  'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n  inheritAttrs: false,\n  components: {\n    YMenu,\n  },\n  props: {\n    ...pressYDropdownPropsOptions(),\n  },\n  slots: Object as SlotsType<{\n    base: any,\n    default: any,\n    'dropdown-icon': any,\n    menu: any,\n    item: { text: string, item: any },\n  }>,\n  emits: ['update:modelValue', 'click'],\n  setup(props, { slots, attrs, emit }) {\n    const opened = useModelDuplex(props);\n\n    function onClickItem(item: any) {\n      opened.value = false;\n      emit('click', item);\n    }\n\n    useRender(() => {\n      const menuProps = chooseProps(props, YMenu.props);\n      const dropdownIconProps = chooseProps(\n        typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {},\n        YIcon.props,\n      );\n      return (\n        <>\n          <YMenu\n            {...menuProps}\n            v-model={opened.value}\n            content-classes={['y-dropdown__content']}\n          >\n            {{\n              base: (...args: any[]) =>\n                slots.base ? (\n                  slots.base?.(...args)\n                ) : (\n                  <YButton\n                    variation={props.variation}\n                    color={props.color}\n                    class={[\n                      'y-dropdown',\n                      { 'y-dropdown--opened': opened.value },\n                    ]}\n                    {...attrs}\n                  >\n                    {\n                      <span class=\"y-dropdown__default\">\n                        {slots.default?.()}\n                      </span>\n                    }\n                    {slots['dropdown-icon'] ? (\n                      slots['dropdown-icon']()\n                    ) : (\n                      <YIcon\n                        {...mergeProps(dropdownIconProps)}\n                        icon={props.dropdownIcon}\n                        class={['y-dropdown__icon']}\n                      ></YIcon>\n                    )}\n                  </YButton>\n                ),\n              default: () =>\n                slots.menu ? (\n                  slots.menu()\n                ) : (\n                  <YCard>\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\n                      <YList>\n                        {props.items.map((item) => {\n                          const text = getObjectValueByPath(\n                            item,\n                            props.itemText,\n                          );\n                          return (\n                            <YListItem onClick={(e) => onClickItem(item)}>\n                              {slots.item ? slots.item({ text, item }) : text}\n                            </YListItem>\n                          );\n                        })}\n                      </YList>\n                    ) : (\n                      <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\n                    )}\n                  </YCard>\n                ),\n            }}\n          </YMenu>\n        </>\n      );\n    });\n  },\n});\n"],"mappings":"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"}

package/lib/components/field-input/YFieldInput.mjs

@@ -53,9 +53,6 @@ export const YFieldInput = defineComponent({
         [NAME]: true
       };
     });
-    const invokeValidators = () => {
-      //
-    };
     function onClick(event) {
       emit('click', event);
     }
@@ -66,7 +63,6 @@ export const YFieldInput = defineComponent({
     }
     function onBlur(event) {
       whenBlur();
-      invokeValidators();
       emit('blur', event);
       changeDisplay();
     }
@@ -75,9 +71,6 @@ export const YFieldInput = defineComponent({
       const target = event.target;
       inValue.value = target?.value;
       displayValue.value = target?.value;
-      if (props.whenInputValid) {
-        invokeValidators();
-      }
     }
     function onChange(event) {
       emit('change', inValue.value);
@@ -140,10 +133,13 @@ export const YFieldInput = defineComponent({
     }, {
       immediate: true
     });
-    expose({
+    const extended = {
       focus,
       select,
-      clear,
+      clear
+    };
+    expose({
+      ...extended,
       input$,
       validate: () => yInput$.value?.invokeValidators()
     });
@@ -155,8 +151,9 @@ export const YFieldInput = defineComponent({
       "ref": yInput$
     }, chooseProps(props, YInput.props), {
       "modelValue": inValue.value,
-      "onUpdate:modelValue": onUpdateModel,
       "focused": focused.value,
+      "extended": extended,
+      "onUpdate:modelValue": onUpdateModel,
       "onClick": onClick,
       "onMousedown:display": $event => emit('mousedown:display', $event)
     }), {
@@ -180,7 +177,7 @@ export const YFieldInput = defineComponent({
         "name": props.name,
         "id": defaultProps.attrId,
         "type": inputType.value,
-        "readonly": props.readonly || props.loading || defaultProps.formLoading,
+        "readonly": props.readonly || props.loading || defaultProps.loading,
         "placeholder": props.placeholder,
         "disabled": props.disabled,
         "tabindex": props.tabindex || '0',

package/lib/components/field-input/YFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","slots","Object","setup","_ref","attrs","expose","emit","yInput$","input$","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","validate","onUpdateModel","_createVNode","_mergeProps","$event","leading","args","leadingChildren","slot","push","defaultProps","attrId","floating","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label","_ref2","error","errorResult"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType, SlotsType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  ref,\n  toRef,\n  watch,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { pressFocusPropsOptions, useFocus } from '../../composables/focus';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YIconClear } from '../icons/YIconClear';\nimport { YInput, pressYInputPropsOptions } from '../input';\n\nimport './YFieldInput.scss';\n\nconst NAME = 'y-field-input';\n\nexport const pressYFieldInputPropsOptions = propsFactory(\n  {\n    enableClear: Boolean as PropType<boolean>,\n    inputAlign: String as PropType<string>,\n    displayText: [String, Function] as PropType<\n      string | ((value: any) => string)\n    >,\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\n    tabindex: {\n      type: String as PropType<string>,\n      default: '0',\n    },\n    type: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    ...pressYInputPropsOptions({\n      variation: 'filled',\n    }),\n  },\n  'YFieldInput',\n);\n\nexport const YFieldInput = defineComponent({\n  name: 'YFieldInput',\n  props: {\n    ...pressYFieldInputPropsOptions(),\n  },\n  emits: [\n    'update:modelValue',\n    'update:focused',\n    'input',\n    'change',\n    'click',\n    'mousedown',\n    'mouseup',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n    'mousedown:display',\n  ],\n  slots: Object as SlotsType<{\n    prepend: any;\n    append: any;\n    label: any;\n    default: { value: any; formLoading: boolean; attrId: string };\n    leading: { error: boolean };\n    trailing: any;\n    'helper-text': { error: boolean; errorResult: string | undefined };\n  }>,\n  setup(props, { attrs, expose, emit, slots }) {\n    const yInput$ = ref<YInput>();\n    const input$ = ref<HTMLInputElement>();\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\n    const inValue = ref<any>('');\n    const displayValue = ref('');\n    const inputType = toRef(props, 'type');\n\n    const classes = computed(() => {\n      return {\n        [NAME]: true,\n      };\n    });\n\n    const invokeValidators = () => {\n      //\n    };\n\n    function onClick(event: MouseEvent) {\n      emit('click', event);\n    }\n\n    function onFocus(event: FocusEvent) {\n      whenFocus();\n      displayValue.value = inValue.value as string;\n      emit('focus', event);\n    }\n\n    function onBlur(event: FocusEvent) {\n      whenBlur();\n      invokeValidators();\n      emit('blur', event);\n      changeDisplay();\n    }\n\n    function onInput(event: Event) {\n      emit('input', event);\n      const target = event.target as HTMLInputElement | null;\n      inValue.value = target?.value;\n      displayValue.value = target?.value as string;\n      if (props.whenInputValid) {\n        invokeValidators();\n      }\n    }\n\n    function onChange(event: Event) {\n      emit('change', inValue.value);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      emit('keydown', event);\n    }\n\n    function onKeyup(event: KeyboardEvent) {\n      emit('keyup', event);\n    }\n\n    function onClickClear(event: MouseEvent) {\n      clear();\n    }\n\n    function onKeydownClear(event: KeyboardEvent) {\n      if (event.code === 'Space' || event.code === 'Enter') {\n        clear();\n      }\n    }\n\n    function focus() {\n      input$.value?.focus();\n    }\n\n    function select() {\n      input$.value?.select();\n    }\n\n    function clear() {\n      inValue.value = '';\n      displayValue.value = '';\n      emit('update:modelValue', inValue.value);\n    }\n\n    function changeDisplay() {\n      const vm = getCurrentInstance();\n      const { displayText } = props;\n      if (displayText !== undefined) {\n        let text = inValue.value;\n        if (typeof displayText === 'string') {\n          text = displayText;\n        }\n        if (displayText && typeof displayText === 'function') {\n          text = (displayText as any).call(vm, text);\n        }\n        nextTick(() => {\n          displayValue.value = text as string;\n        });\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      (neo: any) => {\n        inValue.value = neo;\n        displayValue.value = neo;\n      },\n      {\n        immediate: true,\n      },\n    );\n\n    watch(\n      inValue,\n      (neo: string) => {\n        if (!focused.value) {\n          changeDisplay();\n        } else {\n          displayValue.value = neo;\n        }\n      },\n      { immediate: true },\n    );\n\n    expose({\n      focus,\n      select,\n      clear,\n      input$,\n      validate: () => yInput$.value?.invokeValidators(),\n    });\n\n    function onUpdateModel(value: any) {\n      emit('update:modelValue', value);\n    }\n\n    useRender(() => (\n      <YInput\n        class={classes.value}\n        ref={yInput$}\n        {...chooseProps(props, YInput.props)}\n        modelValue={inValue.value}\n        onUpdate:modelValue={onUpdateModel}\n        focused={focused.value}\n        onClick={onClick}\n        onMousedown:display={($event) => emit('mousedown:display', $event)}\n      >\n        {{\n          leading: slots.leading\n            ? (args: any) => {\n                const leadingChildren = [];\n                const slot = slots.leading?.(args);\n                if (slot) {\n                  leadingChildren.push(slot);\n                } else {\n                  return undefined;\n                }\n                return leadingChildren;\n              }\n            : undefined,\n          default: (defaultProps: any) => (\n            <div\n              class={[`${NAME}__field`]}\n              data-id={defaultProps.attrId}\n              ref={'field'}\n            >\n              {props.floating ? yInput$.value?.createLabel?.() : undefined}\n              {slots.default?.(defaultProps)}\n              {\n                <input\n                  ref={input$}\n                  value={displayValue.value}\n                  name={props.name}\n                  id={defaultProps.attrId}\n                  type={inputType.value}\n                  readonly={\n                    props.readonly || props.loading || defaultProps.formLoading\n                  }\n                  placeholder={props.placeholder}\n                  disabled={props.disabled}\n                  tabindex={props.tabindex || '0'}\n                  autocomplete={attrs.autocomplete as string}\n                  maxlength={attrs.maxlength as number | string}\n                  min={attrs.min as number | string}\n                  max={attrs.max as number | string}\n                  style={[attrs?.style, { textAlign: props.inputAlign } as any]}\n                  onInput={onInput}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                  onChange={onChange}\n                  onKeydown={onKeydown}\n                  onKeyup={onKeyup}\n                />\n              }\n            </div>\n          ),\n          trailing:\n            slots.trailing || (props.enableClear && inValue.value)\n              ? () => (\n                  <>\n                    {props.enableClear && inValue.value && (\n                      <div\n                        class={[\n                          'y-input__trailing',\n                          'y-input__trailing--clear',\n                        ]}\n                      >\n                        <button\n                          class={[`${NAME}__clear`]}\n                          onClick={onClickClear}\n                          onKeydown={onKeydownClear}\n                          tabindex={2}\n                        >\n                          <YIconClear></YIconClear>\n                        </button>\n                      </div>\n                    )}\n                    {slots.trailing && (\n                      <div class={['y-input__trailing']}>\n                        {slots.trailing()}\n                      </div>\n                    )}\n                  </>\n                )\n              : undefined,\n          label: slots.label ? () => slots.label?.() : undefined,\n          'helper-text': slots['helper-text']\n            ? ({ error, errorResult }: any) =>\n                slots['helper-text']?.({ error, errorResult })\n            : undefined,\n        }}\n      </YInput>\n    ));\n\n    return {\n      focused,\n      inValue,\n    };\n  },\n});\n\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\n"],"mappings":"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"}
+{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","slots","Object","setup","_ref","attrs","expose","emit","yInput$","input$","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","extended","validate","invokeValidators","onUpdateModel","_createVNode","_mergeProps","$event","leading","args","leadingChildren","slot","push","defaultProps","attrId","floating","createLabel","readonly","loading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label","_ref2","error","errorResult"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType, SlotsType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  ref,\n  toRef,\n  watch,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { pressFocusPropsOptions, useFocus } from '../../composables/focus';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YIconClear } from '../icons/YIconClear';\nimport {\n  YInput,\n  YInputDefaultSlotProps,\n  pressYInputPropsOptions,\n} from '../input';\n\nimport './YFieldInput.scss';\n\nconst NAME = 'y-field-input';\n\nexport const pressYFieldInputPropsOptions = propsFactory(\n  {\n    enableClear: Boolean as PropType<boolean>,\n    inputAlign: String as PropType<string>,\n    displayText: [String, Function] as PropType<\n      string | ((value: any) => string)\n    >,\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\n    tabindex: {\n      type: String as PropType<string>,\n      default: '0',\n    },\n    type: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    ...pressYInputPropsOptions({\n      variation: 'filled',\n    }),\n  },\n  'YFieldInput',\n);\n\nexport const YFieldInput = defineComponent({\n  name: 'YFieldInput',\n  props: {\n    ...pressYFieldInputPropsOptions(),\n  },\n  emits: [\n    'update:modelValue',\n    'update:focused',\n    'input',\n    'change',\n    'click',\n    'mousedown',\n    'mouseup',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n    'mousedown:display',\n  ],\n  slots: Object as SlotsType<{\n    prepend: any;\n    append: any;\n    label: any;\n    default: YInputDefaultSlotProps;\n    leading: { error: boolean };\n    trailing: any;\n    'helper-text': { error: boolean; errorResult: string | undefined };\n  }>,\n  setup(props, { attrs, expose, emit, slots }) {\n    const yInput$ = ref<YInput>();\n    const input$ = ref<HTMLInputElement>();\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\n    const inValue = ref<any>('');\n    const displayValue = ref('');\n    const inputType = toRef(props, 'type');\n\n    const classes = computed(() => {\n      return {\n        [NAME]: true,\n      };\n    });\n\n    function onClick(event: MouseEvent) {\n      emit('click', event);\n    }\n\n    function onFocus(event: FocusEvent) {\n      whenFocus();\n      displayValue.value = inValue.value as string;\n      emit('focus', event);\n    }\n\n    function onBlur(event: FocusEvent) {\n      whenBlur();\n      emit('blur', event);\n      changeDisplay();\n    }\n\n    function onInput(event: Event) {\n      emit('input', event);\n      const target = event.target as HTMLInputElement | null;\n      inValue.value = target?.value;\n      displayValue.value = target?.value as string;\n    }\n\n    function onChange(event: Event) {\n      emit('change', inValue.value);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      emit('keydown', event);\n    }\n\n    function onKeyup(event: KeyboardEvent) {\n      emit('keyup', event);\n    }\n\n    function onClickClear(event: MouseEvent) {\n      clear();\n    }\n\n    function onKeydownClear(event: KeyboardEvent) {\n      if (event.code === 'Space' || event.code === 'Enter') {\n        clear();\n      }\n    }\n\n    function focus() {\n      input$.value?.focus();\n    }\n\n    function select() {\n      input$.value?.select();\n    }\n\n    function clear() {\n      inValue.value = '';\n      displayValue.value = '';\n      emit('update:modelValue', inValue.value);\n    }\n\n    function changeDisplay() {\n      const vm = getCurrentInstance();\n      const { displayText } = props;\n      if (displayText !== undefined) {\n        let text = inValue.value;\n        if (typeof displayText === 'string') {\n          text = displayText;\n        }\n        if (displayText && typeof displayText === 'function') {\n          text = (displayText as any).call(vm, text);\n        }\n        nextTick(() => {\n          displayValue.value = text as string;\n        });\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      (neo: any) => {\n        inValue.value = neo;\n        displayValue.value = neo;\n      },\n      {\n        immediate: true,\n      },\n    );\n\n    watch(\n      inValue,\n      (neo: string) => {\n        if (!focused.value) {\n          changeDisplay();\n        } else {\n          displayValue.value = neo;\n        }\n      },\n      { immediate: true },\n    );\n\n    const extended = {\n      focus,\n      select,\n      clear,\n    };\n\n    expose({\n      ...extended,\n      input$,\n      validate: () => yInput$.value?.invokeValidators(),\n    });\n\n    function onUpdateModel(value: any) {\n      emit('update:modelValue', value);\n    }\n\n    useRender(() => (\n      <YInput\n        class={classes.value}\n        ref={yInput$}\n        {...chooseProps(props, YInput.props)}\n        modelValue={inValue.value}\n        focused={focused.value}\n        extended={extended}\n        onUpdate:modelValue={onUpdateModel}\n        onClick={onClick}\n        onMousedown:display={($event) => emit('mousedown:display', $event)}\n      >\n        {{\n          leading: slots.leading\n            ? (args: any) => {\n                const leadingChildren = [];\n                const slot = slots.leading?.(args);\n                if (slot) {\n                  leadingChildren.push(slot);\n                } else {\n                  return undefined;\n                }\n                return leadingChildren;\n              }\n            : undefined,\n          default: (defaultProps: YInputDefaultSlotProps) => (\n            <div\n              class={[`${NAME}__field`]}\n              data-id={defaultProps.attrId}\n              ref={'field'}\n            >\n              {props.floating ? yInput$.value?.createLabel?.() : undefined}\n              {slots.default?.(defaultProps)}\n              {\n                <input\n                  ref={input$}\n                  value={displayValue.value}\n                  name={props.name}\n                  id={defaultProps.attrId}\n                  type={inputType.value}\n                  readonly={\n                    props.readonly || props.loading || defaultProps.loading\n                  }\n                  placeholder={props.placeholder}\n                  disabled={props.disabled}\n                  tabindex={props.tabindex || '0'}\n                  autocomplete={attrs.autocomplete as string}\n                  maxlength={attrs.maxlength as number | string}\n                  min={attrs.min as number | string}\n                  max={attrs.max as number | string}\n                  style={[attrs?.style, { textAlign: props.inputAlign } as any]}\n                  onInput={onInput}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                  onChange={onChange}\n                  onKeydown={onKeydown}\n                  onKeyup={onKeyup}\n                />\n              }\n            </div>\n          ),\n          trailing:\n            slots.trailing || (props.enableClear && inValue.value)\n              ? () => (\n                  <>\n                    {props.enableClear && inValue.value && (\n                      <div\n                        class={[\n                          'y-input__trailing',\n                          'y-input__trailing--clear',\n                        ]}\n                      >\n                        <button\n                          class={[`${NAME}__clear`]}\n                          onClick={onClickClear}\n                          onKeydown={onKeydownClear}\n                          tabindex={2}\n                        >\n                          <YIconClear></YIconClear>\n                        </button>\n                      </div>\n                    )}\n                    {slots.trailing && (\n                      <div class={['y-input__trailing']}>\n                        {slots.trailing()}\n                      </div>\n                    )}\n                  </>\n                )\n              : undefined,\n          label: slots.label ? () => slots.label?.() : undefined,\n          'helper-text': slots['helper-text']\n            ? ({ error, errorResult }: any) =>\n                slots['helper-text']?.({ error, errorResult })\n            : undefined,\n        }}\n      </YInput>\n    ));\n\n    return {\n      focused,\n      inValue,\n    };\n  },\n});\n\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\n"],"mappings":";AACA,SACEA,QAAQ,EACRC,eAAe,EACfC,kBAAkB,EAClBC,QAAQ,EACRC,GAAG,EACHC,KAAK,EACLC,KAAK,QACA,KAAK;AAAC,SAEJC,SAAS;AAAA,SACeC,QAAQ;AAAA,SAChCC,WAAW,EAAEC,YAAY;AAAA,SACzBC,UAAU;AAAA,SAEjBC,MAAM,EAENC,uBAAuB;AAGzB;AAEA,MAAMC,IAAI,GAAG,eAAe;AAE5B,OAAO,MAAMC,4BAA4B,GAAGL,YAAY,CACtD;EACEM,WAAW,EAAEC,OAA4B;EACzCC,UAAU,EAAEC,MAA0B;EACtCC,WAAW,EAAE,CAACD,MAAM,EAAEE,QAAQ,CAE7B;EACDC,cAAc,EAAE,CAACL,OAAO,EAAEM,MAAM,CAA+B;EAC/DC,QAAQ,EAAE;IACRC,IAAI,EAAEN,MAA0B;IAChCO,OAAO,EAAE;EACX,CAAC;EACDD,IAAI,EAAE;IACJA,IAAI,EAAEN,MAA0B;IAChCO,OAAO,EAAE;EACX,CAAC;EACD,GAAGb,uBAAuB,CAAC;IACzBc,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,aACF,CAAC;AAED,OAAO,MAAMC,WAAW,GAAG3B,eAAe,CAAC;EACzC4B,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE;IACL,GAAGf,4BAA4B,CAAC;EAClC,CAAC;EACDgB,KAAK,EAAE,CACL,mBAAmB,EACnB,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,EACT,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACN,mBAAmB,CACpB;EACDC,KAAK,EAAEC,MAQL;EACFC,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAkC;IAAA,IAAhC;MAAEC,KAAK;MAAEC,MAAM;MAAEC,IAAI;MAAEN;IAAM,CAAC,GAAAG,IAAA;IACzC,MAAMI,OAAO,GAAGnC,GAAG,CAAS,CAAC;IAC7B,MAAMoC,MAAM,GAAGpC,GAAG,CAAmB,CAAC;IACtC,MAAM;MAAEqC,OAAO;MAAEC,SAAS;MAAEC;IAAS,CAAC,GAAGnC,QAAQ,CAACsB,KAAK,EAAE,eAAe,CAAC;IACzE,MAAMc,OAAO,GAAGxC,GAAG,CAAM,EAAE,CAAC;IAC5B,MAAMyC,YAAY,GAAGzC,GAAG,CAAC,EAAE,CAAC;IAC5B,MAAM0C,SAAS,GAAGzC,KAAK,CAACyB,KAAK,EAAE,MAAM,CAAC;IAEtC,MAAMiB,OAAO,GAAG/C,QAAQ,CAAC,MAAM;MAC7B,OAAO;QACL,CAACc,IAAI,GAAG;MACV,CAAC;IACH,CAAC,CAAC;IAEF,SAASkC,OAAOA,CAACC,KAAiB,EAAE;MAClCX,IAAI,CAAC,OAAO,EAAEW,KAAK,CAAC;IACtB;IAEA,SAASC,OAAOA,CAACD,KAAiB,EAAE;MAClCP,SAAS,CAAC,CAAC;MACXG,YAAY,CAACM,KAAK,GAAGP,OAAO,CAACO,KAAe;MAC5Cb,IAAI,CAAC,OAAO,EAAEW,KAAK,CAAC;IACtB;IAEA,SAASG,MAAMA,CAACH,KAAiB,EAAE;MACjCN,QAAQ,CAAC,CAAC;MACVL,IAAI,CAAC,MAAM,EAAEW,KAAK,CAAC;MACnBI,aAAa,CAAC,CAAC;IACjB;IAEA,SAASC,OAAOA,CAACL,KAAY,EAAE;MAC7BX,IAAI,CAAC,OAAO,EAAEW,KAAK,CAAC;MACpB,MAAMM,MAAM,GAAGN,KAAK,CAACM,MAAiC;MACtDX,OAAO,CAACO,KAAK,GAAGI,MAAM,EAAEJ,KAAK;MAC7BN,YAAY,CAACM,KAAK,GAAGI,MAAM,EAAEJ,KAAe;IAC9C;IAEA,SAASK,QAAQA,CAACP,KAAY,EAAE;MAC9BX,IAAI,CAAC,QAAQ,EAAEM,OAAO,CAACO,KAAK,CAAC;IAC/B;IAEA,SAASM,SAASA,CAACR,KAAoB,EAAE;MACvCX,IAAI,CAAC,SAAS,EAAEW,KAAK,CAAC;IACxB;IAEA,SAASS,OAAOA,CAACT,KAAoB,EAAE;MACrCX,IAAI,CAAC,OAAO,EAAEW,KAAK,CAAC;IACtB;IAEA,SAASU,YAAYA,CAACV,KAAiB,EAAE;MACvCW,KAAK,CAAC,CAAC;IACT;IAEA,SAASC,cAAcA,CAACZ,KAAoB,EAAE;MAC5C,IAAIA,KAAK,CAACa,IAAI,KAAK,OAAO,IAAIb,KAAK,CAACa,IAAI,KAAK,OAAO,EAAE;QACpDF,KAAK,CAAC,CAAC;MACT;IACF;IAEA,SAASG,KAAKA,CAAA,EAAG;MACfvB,MAAM,CAACW,KAAK,EAAEY,KAAK,CAAC,CAAC;IACvB;IAEA,SAASC,MAAMA,CAAA,EAAG;MAChBxB,MAAM,CAACW,KAAK,EAAEa,MAAM,CAAC,CAAC;IACxB;IAEA,SAASJ,KAAKA,CAAA,EAAG;MACfhB,OAAO,CAACO,KAAK,GAAG,EAAE;MAClBN,YAAY,CAACM,KAAK,GAAG,EAAE;MACvBb,IAAI,CAAC,mBAAmB,EAAEM,OAAO,CAACO,KAAK,CAAC;IAC1C;IAEA,SAASE,aAAaA,CAAA,EAAG;MACvB,MAAMY,EAAE,GAAG/D,kBAAkB,CAAC,CAAC;MAC/B,MAAM;QAAEkB;MAAY,CAAC,GAAGU,KAAK;MAC7B,IAAIV,WAAW,KAAK8C,SAAS,EAAE;QAC7B,IAAIC,IAAI,GAAGvB,OAAO,CAACO,KAAK;QACxB,IAAI,OAAO/B,WAAW,KAAK,QAAQ,EAAE;UACnC+C,IAAI,GAAG/C,WAAW;QACpB;QACA,IAAIA,WAAW,IAAI,OAAOA,WAAW,KAAK,UAAU,EAAE;UACpD+C,IAAI,GAAI/C,WAAW,CAASgD,IAAI,CAACH,EAAE,EAAEE,IAAI,CAAC;QAC5C;QACAhE,QAAQ,CAAC,MAAM;UACb0C,YAAY,CAACM,KAAK,GAAGgB,IAAc;QACrC,CAAC,CAAC;MACJ;IACF;IAEA7D,KAAK,CACH,MAAMwB,KAAK,CAACuC,UAAU,EACrBC,GAAQ,IAAK;MACZ1B,OAAO,CAACO,KAAK,GAAGmB,GAAG;MACnBzB,YAAY,CAACM,KAAK,GAAGmB,GAAG;IAC1B,CAAC,EACD;MACEC,SAAS,EAAE;IACb,CACF,CAAC;IAEDjE,KAAK,CACHsC,OAAO,EACN0B,GAAW,IAAK;MACf,IAAI,CAAC7B,OAAO,CAACU,KAAK,EAAE;QAClBE,aAAa,CAAC,CAAC;MACjB,CAAC,MAAM;QACLR,YAAY,CAACM,KAAK,GAAGmB,GAAG;MAC1B;IACF,CAAC,EACD;MAAEC,SAAS,EAAE;IAAK,CACpB,CAAC;IAED,MAAMC,QAAQ,GAAG;MACfT,KAAK;MACLC,MAAM;MACNJ;IACF,CAAC;IAEDvB,MAAM,CAAC;MACL,GAAGmC,QAAQ;MACXhC,MAAM;MACNiC,QAAQ,EAAEA,CAAA,KAAMlC,OAAO,CAACY,KAAK,EAAEuB,gBAAgB,CAAC;IAClD,CAAC,CAAC;IAEF,SAASC,aAAaA,CAACxB,KAAU,EAAE;MACjCb,IAAI,CAAC,mBAAmB,EAAEa,KAAK,CAAC;IAClC;IAEA5C,SAAS,CAAC,MAAAqE,YAAA,CAAAhE,MAAA,EAAAiE,WAAA;MAAA,SAEC9B,OAAO,CAACI,KAAK;MAAA,OACfZ;IAAO,GACR9B,WAAW,CAACqB,KAAK,EAAElB,MAAM,CAACkB,KAAK,CAAC;MAAA,cACxBc,OAAO,CAACO,KAAK;MAAA,WAChBV,OAAO,CAACU,KAAK;MAAA,YACZqB,QAAQ;MAAA,uBACGG,aAAa;MAAA,WACzB3B,OAAO;MAAA,uBACM8B,MAAM,IAAKxC,IAAI,CAAC,mBAAmB,EAAEwC,MAAM;IAAC;MAGhEC,OAAO,EAAE/C,KAAK,CAAC+C,OAAO,GACjBC,IAAS,IAAK;QACb,MAAMC,eAAe,GAAG,EAAE;QAC1B,MAAMC,IAAI,GAAGlD,KAAK,CAAC+C,OAAO,GAAGC,IAAI,CAAC;QAClC,IAAIE,IAAI,EAAE;UACRD,eAAe,CAACE,IAAI,CAACD,IAAI,CAAC;QAC5B,CAAC,MAAM;UACL,OAAOhB,SAAS;QAClB;QACA,OAAOe,eAAe;MACxB,CAAC,GACDf,SAAS;MACbxC,OAAO,EAAG0D,YAAoC,IAAAR,YAAA;QAAA,SAEnC,CAAE,GAAE9D,IAAK,SAAQ,CAAC;QAAA,WAChBsE,YAAY,CAACC,MAAM;QAAA,OACvB;MAAO,IAEXvD,KAAK,CAACwD,QAAQ,GAAG/C,OAAO,CAACY,KAAK,EAAEoC,WAAW,GAAG,CAAC,GAAGrB,SAAS,EAC3DlC,KAAK,CAACN,OAAO,GAAG0D,YAAY,CAAC,EAAAR,YAAA;QAAA,OAGrBpC,MAAM;QAAA,SACJK,YAAY,CAACM,KAAK;QAAA,QACnBrB,KAAK,CAACD,IAAI;QAAA,MACZuD,YAAY,CAACC,MAAM;QAAA,QACjBvC,SAAS,CAACK,KAAK;QAAA,YAEnBrB,KAAK,CAAC0D,QAAQ,IAAI1D,KAAK,CAAC2D,OAAO,IAAIL,YAAY,CAACK,OAAO;QAAA,eAE5C3D,KAAK,CAAC4D,WAAW;QAAA,YACpB5D,KAAK,CAAC6D,QAAQ;QAAA,YACd7D,KAAK,CAACN,QAAQ,IAAI,GAAG;QAAA,gBACjBY,KAAK,CAACwD,YAAY;QAAA,aACrBxD,KAAK,CAACyD,SAAS;QAAA,OACrBzD,KAAK,CAAC0D,GAAG;QAAA,OACT1D,KAAK,CAAC2D,GAAG;QAAA,SACP,CAAC3D,KAAK,EAAE4D,KAAK,EAAE;UAAEC,SAAS,EAAEnE,KAAK,CAACZ;QAAW,CAAC,CAAQ;QAAA,WACpDoC,OAAO;QAAA,WACPJ,OAAO;QAAA,UACRE,MAAM;QAAA,YACJI,QAAQ;QAAA,aACPC,SAAS;QAAA,WACXC;MAAO,UAIvB;MACDwC,QAAQ,EACNlE,KAAK,CAACkE,QAAQ,IAAKpE,KAAK,CAACd,WAAW,IAAI4B,OAAO,CAACO,KAAM,GAClD,MAAAyB,YAAA,CAAAuB,SAAA,SAEKrE,KAAK,CAACd,WAAW,IAAI4B,OAAO,CAACO,KAAK,IAAAyB,YAAA;QAAA,SAExB,CACL,mBAAmB,EACnB,0BAA0B;MAC3B,IAAAA,YAAA;QAAA,SAGQ,CAAE,GAAE9D,IAAK,SAAQ,CAAC;QAAA,WAChB6C,YAAY;QAAA,aACVE,cAAc;QAAA,YACf;MAAC,IAAAe,YAAA,CAAAjE,UAAA,iBAKhB,EACAqB,KAAK,CAACkE,QAAQ,IAAAtB,YAAA;QAAA,SACD,CAAC,mBAAmB;MAAC,IAC9B5C,KAAK,CAACkE,QAAQ,CAAC,CAAC,EAEpB,EAEJ,GACDhC,SAAS;MACfkC,KAAK,EAAEpE,KAAK,CAACoE,KAAK,GAAG,MAAMpE,KAAK,CAACoE,KAAK,GAAG,CAAC,GAAGlC,SAAS;MACtD,aAAa,EAAElC,KAAK,CAAC,aAAa,CAAC,GAC/BqE,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAiB,CAAC,GAAAF,KAAA;QAAA,OAC1BrE,KAAK,CAAC,aAAa,CAAC,GAAG;UAAEsE,KAAK;UAAEC;QAAY,CAAC,CAAC;MAAA,IAChDrC;IAAS,EAGlB,CAAC;IAEF,OAAO;MACLzB,OAAO;MACPG;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/form/YForm.mjs

@@ -1,79 +1,64 @@
-//
-import { defineComponent, h, withKeys } from 'vue';
-import RebindAttrs from "../../mixins/rebind-attrs.mjs";
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, ref, withKeys } from 'vue';
+import { useRender } from "../../composables/index.mjs";
+import { createForm, pressFormPropsOptions } from "../../composables/form.mjs";
 const NAME = 'y-form';
-const rootTags = ['form', 'div', 'section', 'article'];
 export const YForm = defineComponent({
   name: 'YForm',
-  inheritAttrs: false,
-  mixins: [RebindAttrs],
-  provide() {
-    return {
-      form$: this
-    };
-  },
   props: {
-    tag: {
-      type: String,
-      default: 'form',
-      validator(value) {
-        return rootTags.includes(value);
-      }
-    },
-    loading: Boolean
+    ...pressFormPropsOptions()
   },
-  data() {
-    return {
-      inputs: {},
-      formData: {}
-    };
+  emits: {
+    'update:modelValue': val => true,
+    submit: e => true,
+    'keydown.enter': e => true
   },
-  methods: {
-    register(component) {
-      const {
-        iid,
-        name
-      } = component;
-      // TODO: vue3 에서 $on 제거됨에 따라 트리거 따로 만들어야 함
-      this.inputs[iid] = component;
-    },
-    unregister(component) {
-      delete this.inputs[component.iid];
-    },
-    validate() {
-      let flag = true;
-      Object.values(this.inputs).forEach(input => {
-        const valid = input?.invokeValidators.call(input);
-        flag = flag && valid;
-      });
-      return flag;
+  setup(props, _ref) {
+    let {
+      emit,
+      slots,
+      expose
+    } = _ref;
+    const form = createForm(props);
+    const form$ = ref();
+    // TODO: naming formData from form composition
+    const formData = ref();
+    function onSubmit(_e) {
+      const e = _e;
+      const validation = form.validate();
+      e.then = validation.then.bind(validation);
+      e.catch = validation.catch.bind(validation);
+      e.finally = validation.finally.bind(validation);
+      emit('submit', e);
+      if (!e.defaultPrevented) {
+        validation.then(_ref2 => {
+          let {
+            valid
+          } = _ref2;
+          if (valid) {
+            form$.value?.submit();
+          }
+        });
+      }
+      e.preventDefault();
     }
-  },
-  computed: {
-    attrs() {
-      return {
-        ...this.attrs_$
-      };
+    function onKeydown(e) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      emit('keydown.enter', e);
     }
-  },
-  render() {
-    const {
-      tag
-    } = this;
-    // this.attrs_$
-    return h(tag, {
-      class: NAME,
-      '.novalidate': true,
-      onSubmit: e => {
-        e.preventDefault();
-        this.$emit('submit', e, this.formData);
-      },
-      onKeydown: withKeys(e => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        this.$emit('keydown.enter', e);
-      }, ['enter'])
-    }, this.$slots.default?.());
+    expose({
+      ...form
+    });
+    useRender(() => {
+      return _createVNode("form", {
+        "ref": form$,
+        "class": [NAME],
+        "novalidate": true,
+        "onSubmit": onSubmit,
+        "onKeydown": withKeys(onKeydown, ['enter'])
+      }, [slots.default?.()]);
+    });
   }
 });
 //# sourceMappingURL=YForm.mjs.map

package/lib/components/form/YForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YForm.mjs","names":["defineComponent","h","withKeys","RebindAttrs","NAME","rootTags","YForm","name","inheritAttrs","mixins","provide","form$","props","tag","type","String","default","validator","value","includes","loading","Boolean","data","inputs","formData","methods","register","component","iid","unregister","validate","flag","Object","values","forEach","input","valid","invokeValidators","call","computed","attrs","attrs_$","render","class","onSubmit","e","preventDefault","$emit","onKeydown","stopImmediatePropagation","$slots"],"sources":["../../../src/components/form/YForm.ts"],"sourcesContent":["\n//\nimport {\n  ComponentPublicInstance,\n  PropType,\n  VNode,\n  defineComponent,\n  h,\n  withKeys,\n} from 'vue';\n\nimport RebindAttrs from '../../mixins/rebind-attrs';\n\nconst NAME = 'y-form';\nconst rootTags = ['form', 'div', 'section', 'article'];\n\nexport const YForm = defineComponent({\n  name: 'YForm',\n  inheritAttrs: false,\n  mixins: [RebindAttrs],\n  provide() {\n    return {\n      form$: this,\n    };\n  },\n  props: {\n    tag: {\n      type: String as PropType<string>,\n      default: 'form',\n      validator(value: string) {\n        return rootTags.includes(value);\n      },\n    },\n    loading: Boolean,\n  },\n  data() {\n    return {\n      inputs: {} as Record<string, ComponentPublicInstance>,\n      formData: {} as any,\n    };\n  },\n  methods: {\n    register(component: any) {\n      const { iid, name } = component;\n      // TODO: vue3 에서 $on 제거됨에 따라 트리거 따로 만들어야 함\n      this.inputs[iid] = component;\n    },\n    unregister(component: any) {\n      delete this.inputs[component.iid];\n    },\n    validate(): boolean {\n      let flag = true;\n      Object.values(this.inputs).forEach((input: any) => {\n        const valid = input?.invokeValidators.call(input);\n        flag = flag && valid;\n      });\n      return flag;\n    },\n  },\n  computed: {\n    attrs() {\n      return {\n        ...this.attrs_$,\n      };\n    },\n  },\n  render(): VNode {\n    const { tag }: any = this;\n    // this.attrs_$\n    return h(\n      tag,\n      {\n        class: NAME,\n        '.novalidate': true,\n        onSubmit: (e: Event) => {\n          e.preventDefault();\n          this.$emit('submit', e, this.formData);\n        },\n        onKeydown: withKeys(\n          (e: Event) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n            this.$emit('keydown.enter', e);\n          },\n          ['enter'],\n        ),\n      },\n      this.$slots.default?.(),\n    );\n  },\n});\n\nexport type YForm = InstanceType<typeof YForm>;\n"],"mappings":"AACA;AACA,SAIEA,eAAe,EACfC,CAAC,EACDC,QAAQ,QACH,KAAK;AAAC,OAENC,WAAW;AAElB,MAAMC,IAAI,GAAG,QAAQ;AACrB,MAAMC,QAAQ,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,CAAC;AAEtD,OAAO,MAAMC,KAAK,GAAGN,eAAe,CAAC;EACnCO,IAAI,EAAE,OAAO;EACbC,YAAY,EAAE,KAAK;EACnBC,MAAM,EAAE,CAACN,WAAW,CAAC;EACrBO,OAAOA,CAAA,EAAG;IACR,OAAO;MACLC,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHC,IAAI,EAAEC,MAA0B;MAChCC,OAAO,EAAE,MAAM;MACfC,SAASA,CAACC,KAAa,EAAE;QACvB,OAAOb,QAAQ,CAACc,QAAQ,CAACD,KAAK,CAAC;MACjC;IACF,CAAC;IACDE,OAAO,EAAEC;EACX,CAAC;EACDC,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,MAAM,EAAE,CAAC,CAA4C;MACrDC,QAAQ,EAAE,CAAC;IACb,CAAC;EACH,CAAC;EACDC,OAAO,EAAE;IACPC,QAAQA,CAACC,SAAc,EAAE;MACvB,MAAM;QAAEC,GAAG;QAAErB;MAAK,CAAC,GAAGoB,SAAS;MAC/B;MACA,IAAI,CAACJ,MAAM,CAACK,GAAG,CAAC,GAAGD,SAAS;IAC9B,CAAC;IACDE,UAAUA,CAACF,SAAc,EAAE;MACzB,OAAO,IAAI,CAACJ,MAAM,CAACI,SAAS,CAACC,GAAG,CAAC;IACnC,CAAC;IACDE,QAAQA,CAAA,EAAY;MAClB,IAAIC,IAAI,GAAG,IAAI;MACfC,MAAM,CAACC,MAAM,CAAC,IAAI,CAACV,MAAM,CAAC,CAACW,OAAO,CAAEC,KAAU,IAAK;QACjD,MAAMC,KAAK,GAAGD,KAAK,EAAEE,gBAAgB,CAACC,IAAI,CAACH,KAAK,CAAC;QACjDJ,IAAI,GAAGA,IAAI,IAAIK,KAAK;MACtB,CAAC,CAAC;MACF,OAAOL,IAAI;IACb;EACF,CAAC;EACDQ,QAAQ,EAAE;IACRC,KAAKA,CAAA,EAAG;MACN,OAAO;QACL,GAAG,IAAI,CAACC;MACV,CAAC;IACH;EACF,CAAC;EACDC,MAAMA,CAAA,EAAU;IACd,MAAM;MAAE7B;IAAS,CAAC,GAAG,IAAI;IACzB;IACA,OAAOZ,CAAC,CACNY,GAAG,EACH;MACE8B,KAAK,EAAEvC,IAAI;MACX,aAAa,EAAE,IAAI;MACnBwC,QAAQ,EAAGC,CAAQ,IAAK;QACtBA,CAAC,CAACC,cAAc,CAAC,CAAC;QAClB,IAAI,CAACC,KAAK,CAAC,QAAQ,EAAEF,CAAC,EAAE,IAAI,CAACrB,QAAQ,CAAC;MACxC,CAAC;MACDwB,SAAS,EAAE9C,QAAQ,CAChB2C,CAAQ,IAAK;QACZA,CAAC,CAACC,cAAc,CAAC,CAAC;QAClBD,CAAC,CAACI,wBAAwB,CAAC,CAAC;QAC5B,IAAI,CAACF,KAAK,CAAC,eAAe,EAAEF,CAAC,CAAC;MAChC,CAAC,EACD,CAAC,OAAO,CACV;IACF,CAAC,EACD,IAAI,CAACK,MAAM,CAAClC,OAAO,GAAG,CACxB,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YForm.mjs","names":["defineComponent","ref","withKeys","useRender","createForm","pressFormPropsOptions","NAME","YForm","name","props","emits","val","submit","e","setup","_ref","emit","slots","expose","form","form$","formData","onSubmit","_e","validation","validate","then","bind","catch","finally","defaultPrevented","_ref2","valid","value","preventDefault","onKeydown","stopImmediatePropagation","_createVNode","default"],"sources":["../../../src/components/form/YForm.tsx"],"sourcesContent":["import { defineComponent, ref, withKeys } from 'vue';\n\nimport { useRender } from '../../composables';\nimport {\n  SubmitEventPromise,\n  createForm,\n  pressFormPropsOptions,\n} from '../../composables/form';\n\nconst NAME = 'y-form';\n\nexport const YForm = defineComponent({\n  name: 'YForm',\n  props: {\n    ...pressFormPropsOptions(),\n  },\n  emits: {\n    'update:modelValue': (val: boolean | null) => true,\n    submit: (e: SubmitEventPromise) => true,\n    'keydown.enter': (e: Event) => true,\n  },\n  setup(props, { emit, slots, expose }) {\n    const form = createForm(props);\n    const form$ = ref<HTMLFormElement>();\n    // TODO: naming formData from form composition\n    const formData = ref();\n\n    function onSubmit(_e: Event) {\n      const e = _e as SubmitEventPromise;\n\n      const validation = form.validate();\n      e.then = validation.then.bind(validation);\n      e.catch = validation.catch.bind(validation);\n      e.finally = validation.finally.bind(validation);\n\n      emit('submit', e);\n\n      if (!e.defaultPrevented) {\n        validation.then(({ valid }) => {\n          if (valid) {\n            form$.value?.submit();\n          }\n        });\n      }\n      e.preventDefault();\n    }\n\n    function onKeydown(e: Event) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      emit('keydown.enter', e);\n    }\n\n    expose({\n      ...form,\n    });\n\n    useRender(() => {\n      return (\n        <form\n          ref={form$}\n          class={[NAME]}\n          novalidate\n          onSubmit={onSubmit}\n          onKeydown={withKeys(onKeydown, ['enter'])}\n        >\n          {slots.default?.()}\n        </form>\n      );\n    });\n  },\n});\n\nexport type YForm = InstanceType<typeof YForm>;\n"],"mappings":";AAAA,SAASA,eAAe,EAAEC,GAAG,EAAEC,QAAQ,QAAQ,KAAK;AAAC,SAE5CC,SAAS;AAAA,SAGhBC,UAAU,EACVC,qBAAqB;AAGvB,MAAMC,IAAI,GAAG,QAAQ;AAErB,OAAO,MAAMC,KAAK,GAAGP,eAAe,CAAC;EACnCQ,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACL,GAAGJ,qBAAqB,CAAC;EAC3B,CAAC;EACDK,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAmB,IAAK,IAAI;IAClDC,MAAM,EAAGC,CAAqB,IAAK,IAAI;IACvC,eAAe,EAAGA,CAAQ,IAAK;EACjC,CAAC;EACDC,KAAKA,CAACL,KAAK,EAAAM,IAAA,EAA2B;IAAA,IAAzB;MAAEC,IAAI;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAAH,IAAA;IAClC,MAAMI,IAAI,GAAGf,UAAU,CAACK,KAAK,CAAC;IAC9B,MAAMW,KAAK,GAAGnB,GAAG,CAAkB,CAAC;IACpC;IACA,MAAMoB,QAAQ,GAAGpB,GAAG,CAAC,CAAC;IAEtB,SAASqB,QAAQA,CAACC,EAAS,EAAE;MAC3B,MAAMV,CAAC,GAAGU,EAAwB;MAElC,MAAMC,UAAU,GAAGL,IAAI,CAACM,QAAQ,CAAC,CAAC;MAClCZ,CAAC,CAACa,IAAI,GAAGF,UAAU,CAACE,IAAI,CAACC,IAAI,CAACH,UAAU,CAAC;MACzCX,CAAC,CAACe,KAAK,GAAGJ,UAAU,CAACI,KAAK,CAACD,IAAI,CAACH,UAAU,CAAC;MAC3CX,CAAC,CAACgB,OAAO,GAAGL,UAAU,CAACK,OAAO,CAACF,IAAI,CAACH,UAAU,CAAC;MAE/CR,IAAI,CAAC,QAAQ,EAAEH,CAAC,CAAC;MAEjB,IAAI,CAACA,CAAC,CAACiB,gBAAgB,EAAE;QACvBN,UAAU,CAACE,IAAI,CAACK,KAAA,IAAe;UAAA,IAAd;YAAEC;UAAM,CAAC,GAAAD,KAAA;UACxB,IAAIC,KAAK,EAAE;YACTZ,KAAK,CAACa,KAAK,EAAErB,MAAM,CAAC,CAAC;UACvB;QACF,CAAC,CAAC;MACJ;MACAC,CAAC,CAACqB,cAAc,CAAC,CAAC;IACpB;IAEA,SAASC,SAASA,CAACtB,CAAQ,EAAE;MAC3BA,CAAC,CAACqB,cAAc,CAAC,CAAC;MAClBrB,CAAC,CAACuB,wBAAwB,CAAC,CAAC;MAC5BpB,IAAI,CAAC,eAAe,EAAEH,CAAC,CAAC;IAC1B;IAEAK,MAAM,CAAC;MACL,GAAGC;IACL,CAAC,CAAC;IAEFhB,SAAS,CAAC,MAAM;MACd,OAAAkC,YAAA;QAAA,OAESjB,KAAK;QAAA,SACH,CAACd,IAAI,CAAC;QAAA;QAAA,YAEHgB,QAAQ;QAAA,aACPpB,QAAQ,CAACiC,SAAS,EAAE,CAAC,OAAO,CAAC;MAAC,IAExClB,KAAK,CAACqB,OAAO,GAAG,CAAC;IAGxB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}