yuyeon 0.0.22 → 0.0.24

package/lib/components/button/YButton.mjs

@@ -3,8 +3,8 @@ import { PlateWave } from "../../directives/plate-wave/index.mjs";
 import { isColorValue } from "../../util/color/index.mjs";
 import { getSlot, propsFactory } from "../../util/vue-component.mjs";
 import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
-/**
- * Style
+/**
+ * Style
  */
 import "./YButton.scss";
 const NAME = 'y-button';
@@ -92,8 +92,8 @@ export const YButton = defineComponent({
       } = this;
       let textColor;
       if (color && !isColorValue(color)) {
-        color = `rgba(var(--y-theme-${color}), 1)`;
-        textColor = `rgba(var(--y-theme-on-${this.color}), 1)`;
+        color = `var(--y-theme-${color})`;
+        textColor = `var(--y-theme-on-${this.color})`;
       }
       return {
         [`--y-button__color`]: color,

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

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

package/lib/components/card/YCard.scss

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

package/lib/components/checkbox/YInputCheckbox.scss

@@ -1,86 +1,86 @@
-@use '../../styles/palette';
-
-$checkbox__color: palette.$primary;
-$checkbox__border-color: #a4a4a4;
-
-.y-input--checkbox {
-  --y-checkbox__color: var(--y-theme-primary);
-
-  position: relative;
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  flex: 0 0 auto;
-  box-sizing: border-box;
-
-  input[role='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .y-icon-checkbox__checkmark-path {
-    fill: none;
-    stroke: #ffffff;
-    stroke-width: 2px;
-    stroke-dashoffset: 29.7833385;
-    stroke-dasharray: 29.7833385;
-    transition: stroke-dashoffset 120ms cubic-bezier(0.4, 0, 0.6, 1);
-  }
-
-  .y-icon-checkbox__border-path {
-    fill: rgba(var(--y-checkbox__color), 0);
-    stroke: rgba($checkbox__border-color, 0.8);
-    stroke-width: 2;
-    transition: fill 200ms 180ms ease-in;
-  }
-
-  input:checked ~ .y-icon-checkbox,
-  &.y-input--active .y-icon-checkbox {
-    .y-icon-checkbox__checkmark-path {
-      stroke-dashoffset: 0;
-      transition: stroke-dashoffset 120ms 140ms cubic-bezier(0.4, 0, 0.6, 1);
-    }
-
-    .y-icon-checkbox__border-path {
-      fill: rgb(var(--y-checkbox__color));
-      stroke: rgba(var(--y-checkbox__color), 0.8);
-      transition: fill 200ms ease-in;
-    }
-  }
-
-  input:focus ~ .y-icon-checkbox {
-    .y-icon-checkbox__border-path {
-      outline: rgba(var(--y-checkbox__color), 0.5) solid 4px;
-      outline-offset: -6px;
-    }
-  }
-
-  &:hover {
-    .y-icon-checkbox__border-path {
-      stroke: rgba(var(--y-checkbox__color), 0.5);
-    }
-  }
-
-  &.y-input--active:hover {
-    .y-icon-checkbox__border-path {
-      fill: lighten($checkbox__color, 10);
-    }
-  }
-
-  &.y-input--indeterminate .y-icon-checkbox {
-    .y-icon-checkbox__checkmark-path {
-      stroke-dashoffset: 0;
-      d: path('M5.73,11.91 11.1,11.91 17.79,11.91');
-      transition: stroke-dashoffset 400ms ease;
-    }
-
-    .y-icon-checkbox__border-path {
-      fill: rgba($checkbox__border-color, 0.8);
-      stroke: rgba($checkbox__border-color, 0.8);
-    }
-  }
-}
+@use '../../styles/palette';
+
+$checkbox__color: palette.$primary;
+$checkbox__border-color: #a4a4a4;
+
+.y-input--checkbox {
+  --y-checkbox__color: var(--y-theme-primary-rgb);
+
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+
+  input[role='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .y-icon-checkbox__checkmark-path {
+    fill: none;
+    stroke: #ffffff;
+    stroke-width: 2px;
+    stroke-dashoffset: 29.7833385;
+    stroke-dasharray: 29.7833385;
+    transition: stroke-dashoffset 120ms cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  .y-icon-checkbox__border-path {
+    fill: rgba(var(--y-checkbox__color), 0);
+    stroke: rgba($checkbox__border-color, 0.8);
+    stroke-width: 2;
+    transition: fill 200ms 180ms ease-in;
+  }
+
+  input:checked ~ .y-icon-checkbox,
+  &.y-input--active .y-icon-checkbox {
+    .y-icon-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+      transition: stroke-dashoffset 120ms 140ms cubic-bezier(0.4, 0, 0.6, 1);
+    }
+
+    .y-icon-checkbox__border-path {
+      fill: rgb(var(--y-checkbox__color));
+      stroke: rgba(var(--y-checkbox__color), 0.8);
+      transition: fill 200ms ease-in;
+    }
+  }
+
+  input:focus ~ .y-icon-checkbox {
+    .y-icon-checkbox__border-path {
+      outline: rgba(var(--y-checkbox__color), 0.5) solid 4px;
+      outline-offset: -6px;
+    }
+  }
+
+  &:hover {
+    .y-icon-checkbox__border-path {
+      stroke: rgba(var(--y-checkbox__color), 0.5);
+    }
+  }
+
+  &.y-input--active:hover {
+    .y-icon-checkbox__border-path {
+      fill: lighten($checkbox__color, 10);
+    }
+  }
+
+  &.y-input--indeterminate .y-icon-checkbox {
+    .y-icon-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+      d: path('M5.73,11.91 11.1,11.91 17.79,11.91');
+      transition: stroke-dashoffset 400ms ease;
+    }
+
+    .y-icon-checkbox__border-path {
+      fill: rgba($checkbox__border-color, 0.8);
+      stroke: rgba($checkbox__border-color, 0.8);
+    }
+  }
+}

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

@@ -173,7 +173,7 @@ export const YFieldInput = defineComponent({
         class: `${NAME}__field`,
         'data-id': defaultProps.attrId,
         ref: 'field'
-      }, [YInput.methods.createLabel.call(yInputRef), slots.default?.(), h('input', {
+      }, [props.floating ? yInputRef.value && YInput.methods.createLabel.call(yInputRef.value) : undefined, slots.default?.(), h('input', {
         '.value': displayValue.value,
         '.id': defaultProps.attrId,
         '^type': inputType.value,
@@ -214,6 +214,7 @@ export const YFieldInput = defineComponent({
         }
         return trailingChildren;
       },
+      label: slots['label']?.(),
       'helper-text': slots['helper-text'] ? () => {
         return slots['helper-text']?.();
       } : undefined

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

@@ -1 +1 @@
-{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","h","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","setup","_ref","attrs","expose","emit","slots","yInputRef","inputRef","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","value","focus","onFocus","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","class","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","style","textAlign","trailing","trailingChildren"],"sources":["../../../src/components/field-input/YFieldInput.ts"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\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  setup(props, { attrs, expose, emit, slots }) {\n    const yInputRef = ref<YInput>();\n    const inputRef = 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      inputRef.value?.focus();\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: InputEvent) {\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      inputRef.value?.focus();\n    }\n\n    function select() {\n      inputRef.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      inputRef,\n    });\n\n    function onUpdateModel(value: any) {\n      emit('update:modelValue', value);\n    }\n\n    useRender(() =>\n      h(\n        YInput,\n        {\n          class: classes.value,\n          ref: yInputRef,\n          ...chooseProps(props, YInput.props),\n          modelValue: inValue.value,\n          'onUpdate:modelValue': onUpdateModel,\n          onClick,\n          focused: focused.value,\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            h(\n              'div',\n              {\n                class: `${NAME}__field`,\n                'data-id': defaultProps.attrId,\n                ref: 'field',\n              },\n              [\n                YInput.methods!.createLabel.call(yInputRef),\n                slots.default?.(),\n                h('input', {\n                  '.value': displayValue.value,\n                  '.id': defaultProps.attrId,\n                  '^type': inputType.value,\n                  readonly:\n                    props.readonly || props.loading || defaultProps.formLoading,\n                  '.placeholder': props.placeholder,\n                  '.disabled': props.disabled,\n                  '^tabindex': props.tabindex || '0',\n                  autocomplete: attrs.autocomplete,\n                  maxlength: attrs.maxlength,\n                  onInput,\n                  onFocus,\n                  onBlur,\n                  onChange,\n                  onKeydown,\n                  onKeyup,\n                  style: {\n                    textAlign: props.inputAlign,\n                  },\n                  ref: inputRef,\n                }),\n              ],\n            ),\n          trailing: () => {\n            const trailingChildren = [];\n            if (props.enableClear && inValue.value) {\n              trailingChildren.push(\n                h(\n                  'div',\n                  { class: 'y-input__trailing y-input__trailing--clear' },\n                  [\n                    h(\n                      'button',\n                      {\n                        class: `${NAME}__clear`,\n                        onClick: onClickClear,\n                        onKeydown: onKeydownClear,\n                        '^tabindex': '2',\n                      },\n                      [h(YIconClear)],\n                    ),\n                  ],\n                ),\n              );\n            }\n            const slot = slots.trailing;\n            if (slot) {\n              trailingChildren.push(\n                h('div', { class: 'y-input__trailing' }, slot()),\n              );\n            }\n            return trailingChildren;\n          },\n          'helper-text': slots['helper-text'] ? () => {\n            return slots['helper-text']?.();\n          } : undefined,\n        },\n      ),\n    );\n\n    return {\n      focused,\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","h","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","setup","_ref","attrs","expose","emit","slots","yInputRef","inputRef","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","value","focus","onFocus","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","class","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","floating","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","style","textAlign","trailing","trailingChildren","label"],"sources":["../../../src/components/field-input/YFieldInput.ts"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  h,\r\n  nextTick,\r\n  ref,\r\n  toRef,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useFocus } from '../../composables/focus';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YIconClear } from '../icons/YIconClear';\r\nimport { YInput, pressYInputPropsOptions } from '../input';\r\n\r\nimport './YFieldInput.scss';\r\n\r\nconst NAME = 'y-field-input';\r\n\r\nexport const pressYFieldInputPropsOptions = propsFactory(\r\n  {\r\n    enableClear: Boolean as PropType<boolean>,\r\n    inputAlign: String as PropType<string>,\r\n    displayText: [String, Function] as PropType<\r\n      string | ((value: any) => string)\r\n    >,\r\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\r\n    tabindex: {\r\n      type: String as PropType<string>,\r\n      default: '0',\r\n    },\r\n    type: {\r\n      type: String as PropType<string>,\r\n      default: 'text',\r\n    },\r\n    ...pressYInputPropsOptions({\r\n      variation: 'filled',\r\n    }),\r\n  },\r\n  'YFieldInput',\r\n);\r\n\r\nexport const YFieldInput = defineComponent({\r\n  name: 'YFieldInput',\r\n  props: {\r\n    ...pressYFieldInputPropsOptions(),\r\n  },\r\n  emits: [\r\n    'update:modelValue',\r\n    'update:focused',\r\n    'input',\r\n    'change',\r\n    'click',\r\n    'mousedown',\r\n    'mouseup',\r\n    'keydown',\r\n    'keyup',\r\n    'focus',\r\n    'blur',\r\n    'mousedown:display',\r\n  ],\r\n  setup(props, { attrs, expose, emit, slots }) {\r\n    const yInputRef = ref<YInput>();\r\n    const inputRef = ref<HTMLInputElement>();\r\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\r\n    const inValue = ref<any>('');\r\n    const displayValue = ref('');\r\n    const inputType = toRef(props, 'type');\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        [NAME]: true,\r\n      };\r\n    });\r\n\r\n    const invokeValidators = () => {\r\n      //\r\n    };\r\n\r\n    function onClick(event: MouseEvent) {\r\n      inputRef.value?.focus();\r\n      emit('click', event);\r\n    }\r\n\r\n    function onFocus(event: FocusEvent) {\r\n      whenFocus();\r\n      displayValue.value = inValue.value as string;\r\n      emit('focus', event);\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      whenBlur();\r\n      invokeValidators();\r\n      emit('blur', event);\r\n      changeDisplay();\r\n    }\r\n\r\n    function onInput(event: InputEvent) {\r\n      emit('input', event);\r\n      const target = event.target as HTMLInputElement | null;\r\n      inValue.value = target?.value;\r\n      displayValue.value = target?.value as string;\r\n      if (props.whenInputValid) {\r\n        invokeValidators();\r\n      }\r\n    }\r\n\r\n    function onChange(event: Event) {\r\n      emit('change', inValue.value);\r\n    }\r\n\r\n    function onKeydown(event: KeyboardEvent) {\r\n      emit('keydown', event);\r\n    }\r\n\r\n    function onKeyup(event: KeyboardEvent) {\r\n      emit('keyup', event);\r\n    }\r\n\r\n    function onClickClear(event: MouseEvent) {\r\n      clear();\r\n    }\r\n\r\n    function onKeydownClear(event: KeyboardEvent) {\r\n      if (event.code === 'Space' || event.code === 'Enter') {\r\n        clear();\r\n      }\r\n    }\r\n\r\n    function focus() {\r\n      inputRef.value?.focus();\r\n    }\r\n\r\n    function select() {\r\n      inputRef.value?.select();\r\n    }\r\n\r\n    function clear() {\r\n      inValue.value = '';\r\n      displayValue.value = '';\r\n      emit('update:modelValue', inValue.value);\r\n    }\r\n\r\n    function changeDisplay() {\r\n      const vm = getCurrentInstance();\r\n      const { displayText } = props;\r\n      if (displayText !== undefined) {\r\n        let text = inValue.value;\r\n        if (typeof displayText === 'string') {\r\n          text = displayText;\r\n        }\r\n        if (displayText && typeof displayText === 'function') {\r\n          text = (displayText as any).call(vm, text);\r\n        }\r\n        nextTick(() => {\r\n          displayValue.value = text as string;\r\n        });\r\n      }\r\n    }\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (neo: any) => {\r\n        inValue.value = neo;\r\n        displayValue.value = neo;\r\n      },\r\n      {\r\n        immediate: true,\r\n      },\r\n    );\r\n\r\n    watch(inValue, (neo: string) => {\r\n      if (!focused.value) {\r\n        changeDisplay();\r\n      } else {\r\n        displayValue.value = neo;\r\n      }\r\n    });\r\n\r\n    expose({\r\n      focus,\r\n      select,\r\n      clear,\r\n      inputRef,\r\n    });\r\n\r\n    function onUpdateModel(value: any) {\r\n      emit('update:modelValue', value);\r\n    }\r\n\r\n    useRender(() =>\r\n      h(\r\n        YInput,\r\n        {\r\n          class: classes.value,\r\n          ref: yInputRef,\r\n          ...chooseProps(props, YInput.props),\r\n          modelValue: inValue.value,\r\n          'onUpdate:modelValue': onUpdateModel,\r\n          onClick,\r\n          focused: focused.value,\r\n          'onMousedown:display': ($event) => emit('mousedown:display', $event),\r\n        },\r\n        {\r\n          leading: slots.leading\r\n            ? (...args: any[]) => {\r\n                const leadingChildren = [];\r\n                const slot = slots.leading?.(...args);\r\n                if (slot) {\r\n                  leadingChildren.push(slot);\r\n                } else {\r\n                  return undefined;\r\n                }\r\n                return leadingChildren;\r\n              }\r\n            : undefined,\r\n          default: (defaultProps: any) =>\r\n            h(\r\n              'div',\r\n              {\r\n                class: `${NAME}__field`,\r\n                'data-id': defaultProps.attrId,\r\n                ref: 'field',\r\n              },\r\n              [\r\n                props.floating\r\n                  ? yInputRef.value &&\r\n                    YInput.methods!.createLabel.call(yInputRef.value)\r\n                  : undefined,\r\n                slots.default?.(),\r\n                h('input', {\r\n                  '.value': displayValue.value,\r\n                  '.id': defaultProps.attrId,\r\n                  '^type': inputType.value,\r\n                  readonly:\r\n                    props.readonly || props.loading || defaultProps.formLoading,\r\n                  '.placeholder': props.placeholder,\r\n                  '.disabled': props.disabled,\r\n                  '^tabindex': props.tabindex || '0',\r\n                  autocomplete: attrs.autocomplete,\r\n                  maxlength: attrs.maxlength,\r\n                  onInput,\r\n                  onFocus,\r\n                  onBlur,\r\n                  onChange,\r\n                  onKeydown,\r\n                  onKeyup,\r\n                  style: {\r\n                    textAlign: props.inputAlign,\r\n                  },\r\n                  ref: inputRef,\r\n                }),\r\n              ],\r\n            ),\r\n          trailing: () => {\r\n            const trailingChildren = [];\r\n            if (props.enableClear && inValue.value) {\r\n              trailingChildren.push(\r\n                h(\r\n                  'div',\r\n                  { class: 'y-input__trailing y-input__trailing--clear' },\r\n                  [\r\n                    h(\r\n                      'button',\r\n                      {\r\n                        class: `${NAME}__clear`,\r\n                        onClick: onClickClear,\r\n                        onKeydown: onKeydownClear,\r\n                        '^tabindex': '2',\r\n                      },\r\n                      [h(YIconClear)],\r\n                    ),\r\n                  ],\r\n                ),\r\n              );\r\n            }\r\n            const slot = slots.trailing;\r\n            if (slot) {\r\n              trailingChildren.push(\r\n                h('div', { class: 'y-input__trailing' }, slot()),\r\n              );\r\n            }\r\n            return trailingChildren;\r\n          },\r\n          label: slots['label']?.(),\r\n          'helper-text': slots['helper-text']\r\n            ? () => {\r\n                return slots['helper-text']?.();\r\n              }\r\n            : undefined,\r\n        },\r\n      ),\r\n    );\r\n\r\n    return {\r\n      focused,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\r\n"],"mappings":"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"}

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

@@ -3,6 +3,8 @@
 @use '../../styles/variables';
 
 .y-field-input {
+  --y-field-input-horizon-padding: 10px;
+
   .y-input {
     &__display {
       padding: 0 2px;
@@ -11,6 +13,14 @@
     &__plate {
       pointer-events: none;
     }
+
+    &__floating-label {
+      padding-left: var(--y-field-input-horizon-padding, 10px);
+
+      &--floated {
+        padding-left: unset;
+      }
+    }
   }
 
   &__field {
@@ -23,7 +33,7 @@
     > input {
       position: relative;
       outline: none;
-      padding: 8px 10px;
+      padding: 8px var(--y-field-input-horizon-padding, 10px);
       width: 100%;
       height: 100%;
       line-height: 1.2;

package/lib/components/icons/YIconCheckbox.scss

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

package/lib/components/input/YInput.mjs

@@ -1,8 +1,8 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h } from 'vue';
+import { pressFocusPropsOptions, useFocus } from "../../composables/focus.mjs";
+import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
 import { getSlot, propsFactory } from "../../util/vue-component.mjs";
 import "./YInput.scss";
-import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
-import { pressFocusPropsOptions, useFocus } from "../../composables/focus.mjs";
 const NAME = 'y-input';
 let uidCounter = 0;
 export const pressYInputPropsOptions = propsFactory({
@@ -23,11 +23,16 @@ export const pressYInputPropsOptions = propsFactory({
     type: Boolean,
     default: true
   },
+  floating: {
+    type: Boolean,
+    default: false
+  },
   floated: {
     type: Boolean,
     default: () => false
   },
   placeholder: String,
+  required: Boolean,
   loading: Boolean,
   // variations
   variation: String,
@@ -141,7 +146,9 @@ export const YInput = defineComponent({
       const slot = getSlot(this, 'label');
       if (!slot) {
         if (this.label) {
-          return [this.label];
+          return [this.label, this.required ? h('span', {
+            class: 'y-input__required-mark'
+          }, '*') : undefined];
         }
         if (this.placeholder && !this.inValue) {
           return [this.placeholder];
@@ -157,7 +164,8 @@ export const YInput = defineComponent({
       return h('label', {
         class: {
           [`${NAME}__label`]: true,
-          'y-input__label--floated': this.isFloatedLabel
+          'y-input__floating-label': this.floating,
+          'y-input__floating-label--floated': this.floating && this.isFloatedLabel
         },
         '.for': this.attrId
       }, this.createLabelSlot());
@@ -166,7 +174,7 @@ export const YInput = defineComponent({
       const {
         modelValue
       } = this;
-      return [this.createLabel(), modelValue?.toString()];
+      return [this.floating ? this.createLabel() : undefined, modelValue?.toString()];
     },
     createDefault() {
       const {
@@ -240,7 +248,7 @@ export const YInput = defineComponent({
       }, children);
     },
     createStackChildren() {
-      return [this.createDisplay(), this.createHelperText()];
+      return [!this.floating ? this.createLabel() : undefined, this.createDisplay(), this.createHelperText()];
     },
     createStack() {
       return h('div', {