first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,189 @@
+<template>
+  <div class="textarea-field">
+    <label v-if="label" :for="inputId" class="textarea-field__label">
+      {{ label }}
+    </label>
+    <div
+      class="textarea-field__control"
+      :class="{
+        'textarea-field__control--error': error,
+        'textarea-field__control--disabled': disabled,
+        'textarea-field__control--has-icon': $slots.appendIcon,
+      }"
+    >
+      <textarea
+        :id="inputId"
+        ref="textareaEl"
+        :name="name"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :rows="row"
+        :value="modelValue"
+        :style="textareaStyle"
+        class="textarea-field__input"
+        :class="{ 'textarea-field__input--no-resize': !autoResize }"
+        @input="onInput"
+        @blur="onBlur"
+        @focus="onFocus"
+      />
+      <div v-if="$slots.appendIcon" class="textarea-field__icon">
+        <slot name="appendIcon" />
+      </div>
+    </div>
+    <div v-if="error" class="textarea-field__error" :class="{ 'animate-shake': vibration }">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+let uid = 0
+const nextUid = () => `textarea-field-${++uid}`
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  name: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  row: { type: Number, default: 3 },
+  disabled: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  vibration: { type: Boolean, default: false },
+  autoResize: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'input'])
+
+const textareaEl = ref(null)
+const inputId = computed(() => props.name || nextUid())
+const textareaHeight = ref('auto')
+
+const textareaStyle = computed(() => {
+  if (!props.autoResize) return {}
+  return {
+    height: textareaHeight.value,
+    minHeight: '40px',
+    resize: 'none',
+    overflowY: 'hidden',
+  }
+})
+
+const resize = () => {
+  const el = textareaEl.value
+  if (!el) return
+  el.style.height = 'auto'
+  const newHeight = Math.max(el.scrollHeight, 40)
+  el.style.height = `${newHeight}px`
+  textareaHeight.value = `${newHeight}px`
+}
+
+const onInput = (event) => {
+  emit('update:modelValue', event.target.value)
+  emit('input', event.target.value)
+  if (props.autoResize) nextTick(resize)
+}
+
+const onBlur = (event) => emit('blur', event)
+const onFocus = (event) => emit('focus', event)
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autoResize) nextTick(resize)
+  }
+)
+
+onMounted(() => {
+  if (props.autoResize) nextTick(resize)
+})
+</script>
+
+<style lang="scss" scoped>
+.textarea-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);
+    text-align: justify;
+    pointer-events: none;
+  }
+
+  &__control {
+    position: relative;
+  }
+
+  &__input {
+    width: 100%;
+    min-height: 37px;
+    padding: 0.5rem 1.25rem;
+    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;
+    display: block;
+
+    &::placeholder {
+      color: var(--color-prim-gray);
+    }
+
+    &:focus {
+      border-color: var(--color-thd-gray);
+      box-shadow: 0 0 0 1px var(--color-validate);
+    }
+
+    &--no-resize {
+      resize: none;
+    }
+  }
+
+  &__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;
+  }
+
+  &__control--has-icon &__input {
+    padding-inline-start: 3rem;
+  }
+
+  &__icon {
+    position: absolute;
+    inset-inline-start: 0.75rem;
+    top: 0.5rem;
+    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>