yuyeon 0.0.42-rc15 → 0.0.42-rc16

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

@@ -171,7 +171,7 @@ export const YFieldInput = defineComponent({
         "class": [`${NAME}__field`],
         "data-id": defaultProps.attrId,
         "ref": 'field'
-      }, [props.floating ? yInput$.value && YInput.methods.createLabel.call(yInput$.value) : undefined, slots.default?.(defaultProps), _createVNode("input", {
+      }, [props.floating ? yInput$.value?.createLabel?.() : undefined, slots.default?.(defaultProps), _createVNode("input", {
         "ref": input$,
         "value": displayValue.value,
         "name": props.name,

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","onUpdateModel","_createVNode","_mergeProps","$event","leading","args","leadingChildren","slot","push","defaultProps","attrId","floating","methods","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 { 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(inValue, (neo: string) => {\n      if (!focused.value) {\n        changeDisplay();\n      } else {\n        displayValue.value = neo;\n      }\n    });\n\n    expose({\n      focus,\n      select,\n      clear,\n      input$,\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\n                ? yInput$.value &&\n                  YInput.methods!.createLabel.call(yInput$.value)\n                : 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) => 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","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","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(inValue, (neo: string) => {\n      if (!focused.value) {\n        changeDisplay();\n      } else {\n        displayValue.value = neo;\n      }\n    });\n\n    expose({\n      focus,\n      select,\n      clear,\n      input$,\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\n                ? yInput$.value?.createLabel?.()\n                : 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) => 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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"}

package/lib/components/input/YInput.mjs

@@ -1,7 +1,11 @@
-import { defineComponent, h } from 'vue';
+import { createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, ref, shallowRef, watch } from 'vue';
+import { useRender } from "../../composables/component.mjs";
 import { pressFocusPropsOptions, useFocus } from "../../composables/focus.mjs";
 import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
-import { getSlot, propsFactory } from "../../util/vue-component.mjs";
+import { pressValidationPropsOptions, useValidation } from "../../composables/validation.mjs";
+import { getUid, toStyleSizeValue } from "../../util/index.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
 import "./YInput.scss";
 const NAME = 'y-input';
 let uidCounter = 0;
@@ -40,15 +44,7 @@ export const pressYInputPropsOptions = propsFactory({
   filled: Boolean,
   ceramic: Boolean,
   // validate
-  readonly: Boolean,
-  disabled: Boolean,
-  status: {
-    type: String,
-    validator(value) {
-      return ['success', 'warning', 'error'].includes(value);
-    }
-  },
-  validators: Array,
+  ...pressValidationPropsOptions(),
   ...pressFocusPropsOptions()
 }, 'YInput');
 export const YInput = defineComponent({
@@ -59,329 +55,192 @@ export const YInput = defineComponent({
   },
   emits: ['error', 'click', 'mousedown', 'mouseup', 'focus', 'blur', 'mousedown:display', 'mouseup:display', 'click:leading', 'update:modelValue', 'update:focused'],
   slots: Object,
-  data() {
-    const iid = uidCounter.toString();
-    uidCounter += 1;
-    return {
-      iid,
-      lazyValue: undefined,
-      inValue: '',
-      hasMouseDown: false,
-      errorResult: undefined,
-      inError: false
-    };
-  },
-  computed: {
-    classes() {
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      expose,
+      emit
+    } = _ref;
+    const UID = getUid();
+    const {
+      themeClasses
+    } = useLocalTheme(props);
+    const {
+      focused: isFocused,
+      focusedClasses,
+      whenFocus,
+      whenBlur
+    } = useFocus(props, 'y-input');
+    const {
+      invokeValidators,
+      isError,
+      isSuccess,
+      errorResult
+    } = useValidation(props, NAME, UID);
+    const stack$ = ref();
+    const display$ = ref();
+    const inValue = ref();
+    const lazyValue = ref();
+    const hasMouseDown = shallowRef(false);
+    const variations = computed(() => {
+      if (props.variation) {
+        return props.variation.split(',').map(value => {
+          return value.trim();
+        });
+      }
+      return [];
+    });
+    const isFloatedLabel = computed(() => {
+      return props.floated || !!props.placeholder || !props.placeholder && isFocused.value || !!inValue.value;
+    });
+    const classes = computed(() => {
       return {
-        'y-input--ceramic': !!this.ceramic,
-        'y-input--outlined': !this.ceramic && (this.variations.includes('outlined') || !!this.outlined),
-        'y-input--filled': this.variations.includes('filled') || !!this.filled,
-        'y-input--focused': this.isFocused,
-        'y-input--readonly': !!this.readonly,
-        'y-input--has-value': !!this.inValue,
-        'y-input--disabled': !!this.disabled,
-        'y-input--error': this.isError,
-        'y-input--success': this.isSuccess,
-        [this.themeClasses]: true
+        'y-input--ceramic': !!props.ceramic,
+        'y-input--outlined': !props.ceramic && (variations.value.includes('outlined') || !!props.outlined),
+        'y-input--filled': variations.value.includes('filled') || !!props.filled,
+        'y-input--focused': isFocused.value,
+        'y-input--readonly': !!props.readonly,
+        'y-input--has-value': !!inValue.value,
+        'y-input--disabled': !!props.disabled,
+        'y-input--error': isError.value,
+        'y-input--success': isSuccess.value,
+        [themeClasses.value]: true
       };
-    },
-    displayStyles() {
-      let {
-        width
-      } = this;
-      if (!Number.isNaN(Number(width))) {
-        width = `${width}px`;
-      }
+    });
+    const displayStyles = computed(() => {
       return {
-        width,
-        height: this.getDisplayHeight()
+        width: toStyleSizeValue(props.width),
+        height: toStyleSizeValue(props.height)
       };
-    },
-    attrId() {
-      return this.$attrs.id ?? `y-input--${this.iid}`;
-    },
-    isFloatedLabel() {
-      return this.floated || !!this.placeholder || !this.placeholder && this.isFocused || !!this.inValue;
-    },
-    formLoading() {
+    });
+    const formLoading = computed(() => {
       // TODO: composable `form` binding
       // const form$ = (this as any)?.form$ as any;
       // if (form$) {
       //   return form$.loading;
       // }
       return false;
-    },
-    isError() {
-      return this.status === 'error' || this.inError;
-    },
-    isSuccess() {
-      return !this.isError && this.status === 'success';
-    },
-    variations() {
-      const {
-        variation
-      } = this;
-      if (variation) {
-        return variation.split(',').map(value => {
-          return value.trim();
-        });
+    });
+    watch(() => props.modelValue, neo => {
+      inValue.value = neo;
+    });
+    watch(() => props.readonly, neo => {
+      if (!neo) {
+        inValue.value = props.modelValue;
       }
-      return [];
-    }
-  },
-  methods: {
-    createPrepend() {
-      const slot = getSlot(this, 'prepend');
-      return slot ? h('div', {
-        class: `${NAME}__prepend`
-      }, slot) : undefined;
-    },
-    createAppend() {
-      const slot = getSlot(this, 'append');
-      return slot ? h('div', {
-        class: `${NAME}__append`
-      }, slot) : undefined;
-    },
-    createLabelSlot() {
-      const slot = getSlot(this, 'label');
-      if (!slot) {
-        if (this.label) {
-          return [this.label, this.required ? h('span', {
-            class: 'y-input__required-mark'
-          }, '*') : undefined];
-        }
-        if (this.placeholder && !this.inValue) {
-          return [this.placeholder];
-        }
+    });
+    watch(inValue, neo => {
+      if (!props.readonly) {
+        emit('update:modelValue', neo);
       }
-      return slot ? [slot] : [];
-    },
-    createLabel() {
-      const show = !!this.label || !!getSlot(this, 'label');
+    });
+    watch(isError, neo => {
+      emit('error', neo);
+    });
+    watch(() => props.focused, neo => {
+      if (!neo) {
+        invokeValidators();
+      }
+    });
+    function onClick(event) {
+      emit('click', event);
+    }
+    function onMousedown(e) {
+      hasMouseDown.value = true;
+      emit('mousedown:display', e);
+    }
+    function onMouseup(e) {
+      hasMouseDown.value = false;
+      emit('mouseup:display', e);
+    }
+    function onFocus(event) {
+      whenFocus();
+      emit('focus', event);
+    }
+    function onBlur(event) {
+      whenBlur();
+      invokeValidators();
+      emit('blur', event);
+    }
+    function onClickLeading(event) {
+      emit('click:leading', event);
+    }
+    function onChange(event) {
+      invokeValidators();
+    }
+    function createLabel() {
+      const show = !!props.label || !!slots.label;
       if (!show) {
         return undefined;
       }
-      return h('label', {
-        class: {
+      return _createVNode("label", {
+        "class": [{
           [`${NAME}__label`]: true,
-          'y-input__floating-label': this.floating,
-          'y-input__floating-label--floated': this.floating && this.isFloatedLabel
-        },
-        '.for': this.attrId
-      }, this.createLabelSlot());
-    },
-    createDefaultChildren() {
-      const {
-        modelValue
-      } = this;
-      return [this.floating ? this.createLabel() : undefined, modelValue?.toString()];
-    },
-    createDefault() {
-      const {
-        modelValue,
-        formLoading,
-        attrId
-      } = this;
-      const slotContent = getSlot(this, 'default', {
-        value: modelValue,
-        formLoading,
-        attrId
-      });
-      return slotContent ?? h('div', {
-        [`.${NAME}__value`]: true,
-        '.data-id': this.attrId,
-        '.tabindex': 0,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur
-      }, this.createDefaultChildren());
-    },
-    createLeading() {
-      const slot = getSlot(this, 'leading', {
-        error: this.isError
-      });
-      return slot ? h('div', {
-        class: 'y-input__leading',
-        onClick: this.onClickLeading
-      }, slot) : undefined;
-    },
-    createTrailing() {
-      return getSlot(this, 'trailing');
-    },
-    getDisplayHeight() {
-      const {
-        height
-      } = this;
-      if (!isNaN(Number(height))) {
-        return `${height}px`;
-      }
-      return height;
-    },
-    createDisplay() {
-      return h('div', {
-        class: {
-          [`${NAME}__display`]: true
-        },
-        onClick: this.onClick,
-        onMousedown: this.onMousedown,
-        onMouseup: this.onMouseup,
-        ref: 'display',
-        style: {
-          ...this.displayStyles
-        }
-      }, [h('div', {
-        class: `${NAME}__plate`
-      }), this.createLeading(), this.createDefault(), this.createTrailing()]);
-    },
-    createHelperText() {
-      const helperTextSlot = getSlot(this, 'helper-text', {
-        error: this.status === 'error' || this.inError,
-        errorResult: this.errorResult
-      });
-      const children = [];
-      if (helperTextSlot) {
-        children.push(h('span', {}, helperTextSlot));
-      } else {
-        children.push(this.errorResult);
-      }
-      return h('div', {
-        class: `${NAME}__helper-text`
-      }, children);
-    },
-    createStackChildren() {
-      return [!this.floating ? this.createLabel() : undefined, this.createDisplay(), this.createHelperText()];
-    },
-    createStack() {
-      return h('div', {
-        class: `${NAME}__stack`,
-        ref: 'stack'
-      }, this.createStackChildren());
-    },
-    createContent() {
-      return [this.createPrepend(), this.createStack(), this.createAppend()];
-    },
-    //
-    onClick(event) {
-      this.$emit('click', event);
-    },
-    onMousedown(e) {
-      this.hasMouseDown = true;
-      this.$emit('mousedown:display', e);
-    },
-    onMouseup(e) {
-      this.hasMouseDown = false;
-      this.$emit('mouseup:display', e);
-    },
-    onFocus(event) {
-      this.whenFocus();
-      this.$emit('focus', event);
-    },
-    onBlur(event) {
-      this.whenBlur();
-      this.invokeValidators();
-      this.$emit('blur', event);
-    },
-    onClickLeading(event) {
-      this.$emit('click:leading', event);
-    },
-    onChange(event) {
-      this.invokeValidators();
-    },
-    //
-    invokeValidators() {
-      const {
-        validators,
-        inValue,
-        $attrs
-      } = this;
-      const {
-        required
-      } = $attrs;
-      this.resetError();
-      let flag = true;
-      if (Array.isArray(validators)) {
-        validators.some(validator => {
-          const result = validator(inValue);
-          if (typeof result === 'string') {
-            this.inError = true;
-            this.errorResult = result;
-            flag = false;
-            return true;
-          }
-          if (result === false) {
-            this.inError = true;
-            this.errorResult = '';
-            flag = false;
-            return true;
-          }
-          return false;
-        });
-      }
-      if (flag && required && !inValue) {
-        this.inError = true;
-        return false;
-      }
-      return flag;
-    },
-    resetError() {
-      this.inError = false;
-      this.errorResult = undefined;
-    },
-    getClasses() {
-      return this.classes;
+          'y-input__floating-label': props.floating,
+          'y-input__floating-label--floated': props.floating && isFloatedLabel.value
+        }],
+        "for": `y-input--${UID}`
+      }, [slots.label ? slots.label() : props.label ? _createVNode(_Fragment, null, [props.label, props.required && _createVNode("span", {
+        "class": 'y-input__required-mark'
+      }, [_createTextVNode("*")])]) : props.placeholder && !inValue.value && props.placeholder]);
     }
-  },
-  watch: {
-    modelValue(neo) {
-      this.inValue = neo;
-    },
-    readonly(neo) {
-      if (!neo) {
-        this.inValue = this.modelValue;
-      }
-    },
-    inValue(neo) {
-      if (!this.readonly) {
-        this.$emit('update:modelValue', neo);
-      }
-    },
-    isError(neo) {
-      this.$emit('error', neo);
-    },
-    focused(neo) {
-      if (!neo) {
-        this.invokeValidators();
-      }
-    }
-  },
-  created() {
-    this.inValue = this.modelValue;
-  },
-  setup(props) {
-    const {
-      themeClasses
-    } = useLocalTheme(props);
-    const {
-      focused: isFocused,
-      focusedClasses,
-      whenFocus,
-      whenBlur
-    } = useFocus(props, 'y-input');
+    expose({
+      createLabel
+    });
+    useRender(() => {
+      return _createVNode("div", {
+        "class": [`${NAME}`, {
+          ...classes.value
+        }]
+      }, [slots.prepend ? () => _createVNode("div", {
+        "class": `${NAME}__prepend`
+      }, [_createTextVNode("slots.prepend()")]) : undefined, _createVNode("div", {
+        "ref": stack$,
+        "class": [`${NAME}__stack`]
+      }, [!props.floating && createLabel(), _createVNode("div", {
+        "ref": display$,
+        "class": `${NAME}__display`,
+        "style": [{
+          ...displayStyles.value
+        }],
+        "onClick": onClick,
+        "onMousedown": onMousedown,
+        "onMouseup": onMouseup
+      }, [_createVNode("div", {
+        "class": `${NAME}__plate`
+      }, null), slots.leading && _createVNode("div", {
+        "class": 'y-input__leading',
+        "onClick": onClickLeading
+      }, [slots.leading({
+        error: isError.value
+      })]), slots.default ? slots.default({
+        value: props.modelValue,
+        formLoading: formLoading.value,
+        attrId: `y-input--${UID}`
+      }) : _createVNode("div", {
+        "class": `${NAME}__value`,
+        "data-id": `y-input--${UID}`,
+        "tabindex": 0,
+        "onFocus": onFocus,
+        "onBlur": onBlur
+      }, [props.floating && createLabel(), props.modelValue?.toString()]), slots.trailing?.()]), _createVNode("div", {
+        "class": `${NAME}__helper-text`
+      }, [slots['helper-text'] ? _createVNode("span", null, [slots['helper-text']({
+        error: isError.value,
+        errorResult: errorResult.value
+      })]) : errorResult.value])]), slots.append ? () => _createVNode("div", {
+        "class": `${NAME}__append`
+      }, [_createTextVNode("slots.append()")]) : undefined]);
+    });
     return {
       themeClasses,
       isFocused,
       focusedClasses,
       whenFocus,
-      whenBlur
+      whenBlur,
+      createLabel
     };
-  },
-  render() {
-    return h('div', {
-      class: {
-        ...this.getClasses(),
-        [`${NAME}`]: true
-      }
-    }, this.createContent());
   }
 });
 //# sourceMappingURL=YInput.mjs.map