@v1nt1248/3nclient-lib 0.0.42 → 0.1.1

package/src/components/ui3n-input.vue

@@ -1,140 +1,152 @@
 <script lang="ts" setup>
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onMounted, ref, watch } from 'vue'
-  import Ui3nIcon from './ui3n-icon.vue'
-  import Ui3nButton from './ui3n-button.vue'
-
-  export interface Ui3nInputProps {
-    value: string;
-    label?: string;
-    placeholder?: string;
-    clearable?: boolean;
-    autofocus?: boolean;
-    rules?: Array<(v: string) => any>;
-    disabled?: boolean;
-    icon?: string;
-    iconColor?: string;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed, onMounted, ref, watch } from 'vue';
+import Ui3nIcon from './ui3n-icon.vue';
+import Ui3nButton from './ui3n-button.vue';
+
+export interface Ui3nInputProps {
+  modelValue: string;
+  label?: string;
+  type?: 'text' | 'password';
+  placeholder?: string;
+  clearable?: boolean;
+  autofocus?: boolean;
+  icon?: string;
+  iconColor?: string;
+  rules?: Array<(v: string) => any>;
+  displayStateMode?: 'error' | 'success';
+  displayStateWithIcon?: boolean;
+  displayStateMessage?: string;
+  disabled?: boolean;
+}
+
+export interface Ui3nInputEmits {
+  (ev: 'init', value: HTMLInputElement): void;
+  (ev: 'input', value: string): void;
+  (ev: 'focus', value: Event): void;
+  (ev: 'blur', value: Event): void;
+  (ev: 'clear'): void;
+  (ev: 'change', value: string): void;
+  (ev: 'update:modelValue', value: string): void;
+  (ev: 'update:valid', value: boolean): void;
+}
+
+const props = defineProps<Ui3nInputProps>();
+const emits = defineEmits<Ui3nInputEmits>();
+
+const inputElement = ref<HTMLInputElement | null>(null);
+const text = ref<string>('');
+const isFocused = ref(false);
+const errorMessage = ref('');
+
+const cssIconColor = computed(() => {
+  if (props.disabled) {
+    return 'var(--color-icon-control-primary-disabled)';
   }
 
-  export interface Ui3nInputEmits {
-    (ev: 'input', value: string): void;
-    (ev: 'focus', value: Event): void;
-    (ev: 'blur', value: Event): void;
-    (ev: 'clear', value: string): void;
-    (ev: 'change', value: string): void;
-    (ev: 'update:value', value: string): void;
-    (ev: 'update:valid', value: boolean): void;
+  return props.iconColor || 'var(--color-icon-control-primary-default)';
+});
+const isValid = computed(() => {
+  if (!text.value) {
+    return true;
   }
 
-  const props = defineProps<Ui3nInputProps>()
-  const emit = defineEmits<Ui3nInputEmits>()
+  return !errorMessage.value;
+});
 
-  const inputElement = ref<HTMLInputElement|null>(null)
-  const text = ref<string>('')
-  const isFocused = ref(false)
-  const errorMessage = ref('')
-
-  const isValid = computed(() => {
-    if (!text.value) {
-      return true
-    }
-
-    return !errorMessage.value
-  })
-
-  onMounted(() => {
-    if (props.autofocus && inputElement.value) {
-      inputElement.value.focus()
-    }
-  })
-
-  watch(
-    () => props.value,
-    val => text.value = val,
-    { immediate: true },
-  )
-
-  watch(
-    () => isValid.value,
-    val => emit('update:valid', val),
-    { immediate: true },
-  )
-
-  const onFocus = (event: Event) => {
-    isFocused.value = true
-    emit('focus', event)
-  }
-
-  const onBlur = (event: Event) => {
-    isFocused.value = false
-    emit('blur', event)
-  }
-
-  const onChange = (event: Event) => {
-    const value = (event.target as HTMLInputElement).value
-    validate(value)
-    emit('update:value', value)
-    emit('change', value)
-  }
-
-  const onInput = (ev: Event) => {
-    const value = (ev.target as HTMLInputElement).value
-    text.value = value
-    validate(value)
-    emit('update:value', value)
-    emit('input', value)
-  }
-
-  const clearValue = () => {
-    text.value = ''
-    validate('')
-    emit('update:value', '')
-    emit('input', '')
-    emit('change', '')
+onMounted(() => {
+  if (props.autofocus && inputElement.value) {
+    inputElement.value.focus();
   }
 
-  const validate = (text: string) => {
-    errorMessage.value = ''
-    if (props.rules && props.rules.length) {
-      for (const validateFunction of props.rules) {
-        if (typeof validateFunction === 'function') {
-          const res = validateFunction(text)
-          if (typeof res === 'string') {
-            errorMessage.value += res
-          }
+  emits('init', inputElement.value!);
+});
+
+watch(
+  () => props.modelValue,
+  val => text.value = val,
+  { immediate: true },
+);
+
+watch(
+  () => isValid.value,
+  val => emits('update:valid', val),
+  { immediate: true },
+);
+
+const onFocus = (event: Event) => {
+  isFocused.value = true;
+  emits('focus', event);
+};
+
+const onBlur = (event: Event) => {
+  isFocused.value = false;
+  emits('blur', event);
+};
+
+const onChange = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
+  emits('change', value);
+};
+
+const onInput = (ev: Event) => {
+  const value = (ev.target as HTMLInputElement).value;
+  text.value = value;
+  validate(value);
+  emits('update:modelValue', value);
+  emits('input', value);
+};
+
+const clearValue = () => {
+  text.value = '';
+  validate('');
+  emits('update:modelValue', '');
+  emits('input', '');
+  emits('change', '');
+  emits('clear');
+};
+
+const validate = (text: string) => {
+  errorMessage.value = '';
+  if (props.rules && props.rules.length) {
+    for (const validateFunction of props.rules) {
+      if (typeof validateFunction === 'function') {
+        const res = validateFunction(text);
+        if (typeof res === 'string') {
+          errorMessage.value += res;
         }
       }
     }
   }
+};
 </script>
 
 <template>
   <div
     ref="wrapperElement"
     :class="[
-      'ui3n-input',
-      {
-        'ui3n-input--with-label': props.label,
-        'ui3n-input--with-icon': props.icon,
-        'ui3n-input--clearable': props.clearable && !!text,
-        'ui3n-input--disabled': props.disabled,
-        'ui3n-input--error': !!errorMessage,
-      },
+      $style.input,
+      label && $style.withLabel,
+      icon && $style.withIcon,
+      clearable && text && $style.clearable,
+      disabled && $style.disabled,
+      (!!errorMessage || (displayStateMode === 'error')) && $style.error,
+      displayStateMode === 'success' && $style.success,
     ]"
   >
-    <label
-      v-if="props.label"
-      class="ui3n-input__label"
-    >
-      {{ props.label }}
+    <label v-if="label" :class="$style.label">
+      {{ label }}
     </label>
 
     <input
       ref="inputElement"
+      autocomplete="off"
+      :type="type || 'text'"
       :value="text"
-      :placeholder="props.placeholder"
-      :disabled="props.disabled"
-      class="ui3n-input__input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :class="$style.field"
       @input="onInput"
       @focusin="onFocus"
       @focusout="onBlur"
@@ -142,142 +154,198 @@
     >
 
     <ui3n-icon
-      v-if="props.icon"
-      :icon="props.icon"
+      v-if="icon"
+      :icon="icon"
       :width="16"
       :height="16"
-      :color="props.iconColor || 'var(--black-30, #b3b3b3)'"
-      class="ui3n-input__icon"
+      :class="[$style.icon, disabled && $style.iconDisabled]"
     />
 
     <ui3n-button
-      v-if="props.clearable && !!text"
-      round
+      v-if="clearable && !!text && !(displayStateMode === 'success' && displayStateWithIcon && !isFocused)"
+      type="icon"
+      size="small"
       color="transparent"
       icon="close"
       icon-size="16"
-      icon-color="var(----black-30, #b3b3b3)"
-      class="ui3n-input__clear-btn"
+      icon-color="var(--color-icon-control-accent-default)"
+      :class="$style.clearBtn"
       @click="clearValue"
     />
 
+    <ui3n-icon
+      v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
+      icon="check-circle-outline"
+      :width="16"
+      :height="16"
+      color="var(--success-content-default)"
+      :class="$style.successIcon"
+    />
+
     <div
-      v-if="errorMessage"
-      class="ui3n-input__error-text"
+      v-if="errorMessage || displayStateMessage"
+      :class="[
+        $style.fieldMessage,
+        errorMessage || (displayStateMode === 'error' && !!displayStateMessage) && $style.errorMessage,
+        displayStateMode === 'success' && displayStateMessage && $style.successMessage,
+      ]"
     >
-      {{ errorMessage }}
+      {{ errorMessage || displayStateMessage }}
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import "../assets/styles/mixins";
-
-  .ui3n-input {
-    --ui3n-input-height: calc(var(--base-size, 8px) * 4);
-    --ui3n-input-padding-left: var(--base-size, 8px);
-    --ui3n-input-padding-right: var(--base-size, 8px);
-
-    position: relative;
-    width: 100%;
-
-    &__label {
-      display: block;
-      width: 100%;
-      font-size: var(--font-12, 12px);
-      line-height: var(--font-16, 16px);
-      font-weight: 600;
-      color: var(--black-90, #212121);
-      margin-bottom: var(--half-size, 4px);
-    }
+<style lang="scss" module>
+@import "../assets/styles/mixins";
 
-    &__input {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      position: relative;
-      border: none;
-      outline: none;
-      height: var(--ui3n-input-height);
-      padding: 0 var(--ui3n-input-padding-right) 0 var(--ui3n-input-padding-left);
-      border-radius: var(--half-size, 4px);
-      background-color: var(--gray-50, #f2f2f2);
-      font-size: var(--font-13, 13px);
-      font-weight: 400;
-      line-height: 1;
-      color: var(--black-90, #212121);
+.input {
+  --ui3n-input-height: var(--spacing-l);
+  --ui3n-input-padding-left: var(--spacing-s);
+  --ui3n-input-padding-right: var(--spacing-s);
 
-      &::placeholder {
-        color: var(--black-30, #b3b3b3);
-        font-style: italic;
-        font-size: var(--font-13, 13px);
-        font-weight: 400;
-      }
+  position: relative;
+  width: 100%;
+  border-radius: var(--spacing-xs);
 
-      &:focus-within {
-        background-color: var(--blue-main-20, #d8edfd);
-      }
-    }
+  &:hover {
+    .field:not(:focus-within) {
+      background-color: var(--color-bg-control-secondary-hover);
 
-    &__icon {
-      position: absolute;
-      left: var(--half-size, 4px);
-      top: calc((var(--ui3n-input-height) - 16px) / 2);
+      &::placeholder {
+        color: var(--color-text-control-secondary-hover);
+      }
     }
+  }
 
-    &__clear-btn {
-      position: absolute;
-      right: 0;
-      top: calc((var(--ui3n-input-height) - 28px) / 2);
+  &:focus-within {
+    .field {
+      background-color: var(--color-bg-control-secondary-focused);
+      outline: 1px solid var(--color-border-control-accent-focused);
     }
 
-    &__error-text {
-      font-style: italic;
-      font-size: var(--font-10, 10px);
-      font-weight: 400;
-      line-height: 1.5;
-      color: var(--pear-100, #f75d53);
+    .icon {
+      color: v-bind(cssIconColor) !important;
     }
+  }
+}
+
+.label {
+  display: block;
+  width: 100%;
+  font-size: var(--font-12);
+  line-height: var(--font-16);
+  font-weight: 500;
+  color: var(--color-text-control-primary-default);
+  margin-bottom: var(--spacing-xs);
+}
+
+.field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  border: none;
+  outline: none;
+  height: var(--ui3n-input-height);
+  padding: 0 var(--ui3n-input-padding-right) 0 var(--ui3n-input-padding-left);
+  border-radius: var(--spacing-xs);
+  background-color: var(--color-bg-control-secondary-default);
+  font-size: var(--font-13);
+  line-height: var(--font-16);
+  font-weight: 400;
+  color: var(--color-text-control-primary-default);
+  transition: all 0.2s ease-in-out;
+
+  &::placeholder {
+    color: var(--color-text-control-secondary-default);
+    font-style: italic;
+    font-size: var(--font-13);
+    line-height: var(--font-16);
+    font-weight: 400;
+  }
 
-    &--clearable {
-      --ui3n-input-padding-right: calc(var(--base-size, 8px) * 3);
-    }
+  &[disabled] {
+    background-color: var(--color-bg-control-secondary-disabled);
+    color: var(--color-text-control-secondary-disabled);
+  }
+}
+
+.icon {
+  position: absolute;
+  left: var(--half-size, 4px);
+  top: calc((var(--ui3n-input-height) - 16px) / 2);
+  color: var(--color-icon-control-secondary-default) !important;
+}
+
+.iconDisabled {
+  color: v-bind(cssIconColor) !important;
+}
+
+.clearBtn {
+  position: absolute;
+  right: 0;
+  top: calc((var(--ui3n-input-height) - 24px) / 2);
+  z-index: 1;
+}
+
+.fieldMessage {
+  font-style: italic;
+  font-size: var(--font-10);
+  font-weight: 400;
+  line-height: 1.4;
+  margin-top: 2px;
+
+  &.errorMessage {
+    color: var(--error-content-default);
+  }
 
-    &--with-icon {
-      --ui3n-input-padding-left: calc(var(--base-size, 8px) * 3);
-    }
+  &.successMessage {
+    color: var(--success-content-default)
+  }
+}
 
-    &--error {
-      --ui3n-input-padding-left: calc(var(--base-size, 8px) - 1px);
-      --ui3n-input-padding-right: calc(var(--base-size, 8px) - 1px);
+.clearable {
+  --ui3n-input-padding-right: var(--spacing-ml);
+}
 
-      .ui3n-input__input {
-        border: 1px solid var(--pear-100, #f75d53)
-      }
+.withIcon {
+  --ui3n-input-padding-left: var(--spacing-ml);
+}
 
-      &.ui3n-input--clearable {
-        --ui3n-input-padding-right: calc(var(--base-size, 8px) * 2 - 1px);
-      }
-
-      &.ui3n-input--with-icon {
-        --ui3n-input-padding-left: calc(var(--base-size, 8px) * 2 - 1px);
-      }
-    }
+.error {
+  .label {
+    color: var(--error-content-default) !important;
+  }
 
-    &--disabled {
-      pointer-events: none;
-      user-select: none;
-      opacity: 0.5;
-    }
+  .field {
+    outline: 1px solid var(--error-content-default) !important;
+  }
+}
 
-    &--with-label {
-      .ui3n-input__icon {
-        top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
-      }
+.success {
+  .label {
+    color: var(--success-content-default) !important;
+  }
+}
+
+.successIcon {
+  position: absolute;
+  right: var(--spacing-s);
+  bottom: var(--spacing-s);
+}
+
+.disabled {
+  pointer-events: none;
+  user-select: none;
+}
+
+.withLabel {
+  .icon {
+    top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
+  }
 
-      .ui3n-input__clear-btn {
-        top: calc((var(--ui3n-input-height) - 28px) / 2 + 20px);
-      }
-    }
+  .clearBtn {
+    top: calc((var(--ui3n-input-height) - 24px) / 2 + 20px);
   }
+}
 </style>