first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,155 @@
+<template>
+  <div class="text-field">
+    <label v-if="label" :for="inputId" class="text-field__label">
+      {{ label }}
+    </label>
+    <div
+      class="text-field__control"
+      :class="{
+        'text-field__control--error': error,
+        'text-field__control--disabled': disabled,
+      }"
+    >
+      <input
+        :id="inputId"
+        ref="inputEl"
+        :type="type"
+        :name="name"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="modelValue"
+        :inputmode="inputmode"
+        class="text-field__input"
+        @input="onInput"
+        @blur="onBlur"
+        @focus="onFocus"
+      />
+      <div v-if="$slots.appendIcon" class="text-field__icon">
+        <slot name="appendIcon" />
+      </div>
+    </div>
+    <div v-if="error" class="text-field__error" :class="{ 'animate-shake': vibration }">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { convertToEnNumber } from '@/utils/convert-check-digits'
+
+let uid = 0
+const nextUid = () => `text-field-${++uid}`
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  name: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  type: { type: String, default: 'text' },
+  disabled: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  vibration: { type: Boolean, default: false },
+  convertDigits: { type: Boolean, default: false },
+  inputmode: { type: String, default: undefined },
+})
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'input'])
+
+const inputEl = ref(null)
+const inputId = computed(() => props.name || nextUid())
+
+const onInput = (event) => {
+  const raw = event.target.value
+  const value = props.convertDigits ? convertToEnNumber(raw) : raw
+  if (props.convertDigits && value !== raw) {
+    event.target.value = value
+  }
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const onBlur = (event) => emit('blur', event)
+const onFocus = (event) => emit('focus', event)
+
+defineExpose({ focus: () => inputEl.value?.focus() })
+</script>
+
+<style lang="scss" scoped>
+.text-field {
+  position: relative;
+  width: 100%;
+  margin-bottom: 0.75rem;
+
+  &__label {
+    display: flex;
+    margin-bottom: 0.25rem;
+    font-family: var(--font-family-fa);
+    font-weight: 300;
+    line-height: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--color-prim-gray);
+    pointer-events: none;
+  }
+
+  &__control {
+    position: relative;
+  }
+
+  &__input {
+    width: 100%;
+    height: 2.35rem;
+    padding: 0 2rem;
+    background: transparent;
+    font-family: var(--font-family-number-fa);
+    font-weight: 300;
+    font-size: 0.9rem;
+    border: 1px solid var(--color-thd-gray);
+    border-radius: 1.5rem;
+    transition: all 0.3s;
+    outline: none;
+    color: inherit;
+
+    &::placeholder {
+      color: var(--color-prim-gray);
+    }
+
+    &:focus {
+      border-color: var(--color-thd-gray);
+      box-shadow: 0 0 0 1px var(--color-validate);
+    }
+  }
+
+  &__control--error &__input {
+    border-color: var(--color-error);
+
+    &:focus {
+      box-shadow: 0 0 0 1px var(--color-error);
+    }
+  }
+
+  &__control--disabled &__input {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &__icon {
+    position: absolute;
+    inset-inline-start: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+  }
+
+  &__error {
+    margin-top: 0.25rem;
+    text-align: right;
+    font-family: var(--font-family-fa);
+    letter-spacing: 0.025em;
+    font-size: 0.75rem;
+    color: var(--color-error);
+    transition: all 0.3s;
+  }
+}
+</style>