plugin-ui-for-kzt 0.0.9 → 0.0.11

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -0,0 +1,153 @@
+<template>
+    <div :class="classList">
+        <div class="base-site-input__wrapper">
+        <div class="base-site-input__url">
+            https://
+        </div>
+            <base-input 
+                v-bind="{...$props, ...$attrs}"
+                v-model="modelValue"
+                id="url"
+                type="url"
+                :error="urlError || props.error"
+                @update:modelValue="onUpdateModelValue"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import BaseInput from '../BaseInput/BaseInput.vue';
+import { useKitSize } from '../../composables/kit/size'
+import type { ICorePropsBaseSiteInput } from '../../types/input'
+
+const props = withDefaults(defineProps<ICorePropsBaseSiteInput>(),{
+    size: 'medium',
+    modelValue: '',
+    error: '',
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void;
+}>();
+
+const urlError = ref('');
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+    sizeClassList.value,
+    'base-site-input',
+]);
+
+const normalizedValue = computed(() => {
+    const trimmed = props.modelValue.replace(/^https?:\/\//, '');
+    return trimmed;
+});
+
+const modelValue = computed({
+  get: () => normalizedValue.value,
+  set: value => onUpdateModelValue(value),
+});
+
+function onUpdateModelValue(value: string) {
+    const normalized = value.startsWith('https://') ? value : `https://${value}`;
+    emit('update:modelValue', normalized);
+}
+
+watch(modelValue, (value) => {
+  const urlPattern = /^(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?(?:\?[^\s]*)?(?:#[^\s]*)?$/;
+  const trimmed = value.replace(/^https?:\/\//, '');
+
+  if (!urlPattern.test(trimmed)) {
+    urlError.value = props.validationText || 'Некорректный URL';
+  } else {
+    urlError.value = '';
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-site-input {
+    $input: &;
+
+    width: fit-content;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+
+        :deep(.base-input__field) {
+            border-top-left-radius: unset !important;
+            border-bottom-left-radius: unset !important;
+        }
+    }
+
+    &__url {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid var(--primary-black-300);
+        border-bottom: 1px solid var(--primary-black-300);
+        border-left: 1px solid var(--primary-black-300);
+        color: var(--primary-text-tertiary);
+    }
+
+    &.--small-size {
+        #{$input} {
+            &__url {
+                height: 22px;
+                font: var(--typography-text-m-regular);
+                border-top-left-radius: var(--corner-radius-s);
+                border-bottom-left-radius: var(--corner-radius-s);
+                padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
+            }
+        }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-75px);
+        }
+    }
+
+    &.--medium-size {
+        #{$input} {
+            &__url {
+                height: 18px;
+                font: var(--typography-text-m-regular);
+                border-top-left-radius: var(--corner-radius-m);
+                border-bottom-left-radius: var(--corner-radius-m);
+                padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
+            }
+        }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-75px);
+        }
+    }
+
+    &.--large-size {
+        #{$input} {
+            &__url {
+                height: 21px;
+                font: var(--typography-text-l-regular);
+                border-top-left-radius: var(--corner-radius-m);
+                border-bottom-left-radius: var(--corner-radius-m);
+                padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
+            }
+        }
+
+        :deep(.base-input__label-text), 
+        :deep(.base-input__hint) {
+            transform: translateX(-83px);
+        }
+    }
+}
+</style>

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="base-textarea" :class="classList">
+    <label class="base-textarea__label" :for="id">
+      <span v-if="label" class="base-textarea__label-text">{{ label }}</span>
+
+      <div class="base-textarea__wrapper">
+        <textarea
+          :id="id"
+          :value="modelValue"
+          v-bind="stateAttrs"
+          :placeholder="placeholder || ''"
+          :maxlength="maxLength"
+          class="base-textarea__field"
+          @input="handleInput"
+        />
+        <span v-if="maxLength" class="base-textarea__counter">
+          {{ modelValue.length }}/{{ maxLength }}
+        </span>
+      </div>
+
+      <div v-if="(error && typeof error === 'string') || hint" class="base-textarea__hint">
+        {{ error || hint }}
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ICoreTextareaProps } from '../../types/input';
+import { useKitState } from '../../composables/kit/state';
+import { useKitSize } from '../../composables/kit/size';
+
+const props = withDefaults(defineProps<ICoreTextareaProps & { maxLength?: number }>(), {
+  modelValue: '',
+  placeholder: '' as string,
+  error: '',
+  hint: '',
+  size: 'medium',
+});
+
+const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
+
+const { stateClassList, stateAttrs } = useKitState(props);
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+  stateClassList.value,
+  sizeClassList.value,
+  {
+    '--is-readonly': props.readonly,
+  },
+]);
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  if (target) {
+    emit('update:modelValue', target.value.slice(0, props.maxLength));
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-textarea {
+  width: max-content;
+  $textarea: &;
+
+  textarea {
+    resize: none;
+  }
+
+  &__hint {
+    align-self: flex-start;
+    font: var(--typography-text-s-regular);
+  }
+
+  &__wrapper {
+    display: flex;
+    position: relative;
+  }
+
+  &__field {
+    min-width: 320px;
+    max-width: calc(-16px + 50vw);
+    color: var(--primary-text-primary);
+    background: var(--bg-light);
+    border: 1px solid var(--primary-black-300);
+
+    &::placeholder {
+      color: var(--primary-text-tertiary);
+    }
+
+    @include scrollbar;
+
+    @include pressed {
+      color: var(--primary-blue);
+    }
+
+    @include focused {
+      border: 1px solid var(--primary-blue-500);
+      outline: 4px solid var(--effects-primary-focus);
+    }
+
+    @include is-disabled-state {
+      & {
+        color: var(--primary-text-tertiary);
+        background: var(--primary-black-100);
+      }
+
+      #{$textarea}__hint {
+        color: var(--primary-text-secondary);
+      }
+    }
+  }
+
+  &__counter {
+    position: absolute;
+    font: var(--typography-text-s-regular);
+    color: var(--primary-text-quaternary);
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+  }
+
+  &__label-text {
+    align-self: flex-start;
+    font: var(--typography-text-s-medium);
+    color: var(--primary-text-primary);
+  }
+
+  &.--is-error {
+    #{$textarea}__hint {
+      color: var(--error-red);
+    }
+
+    #{$textarea}__field {
+      border-color: var(--error-red-light-01);
+
+      @include focused {
+        outline: 4px solid var(--effects-error-focus);
+      }
+    }
+  }
+
+  &.--small-size {
+    #{$textarea} {
+      &__wrapper {
+        height: 40px;
+      }
+
+      &__field {
+        padding: var(--spacing-s)  calc(var(--spacing-2l) + 35px) var(--spacing-s) var(--spacing-2l);
+        font: var(--typography-text-m-regular);
+        border-radius: var(--corner-radius-s);
+      }
+
+      &__counter {
+        font-size: var(--typography-text-s-regular);
+        right: var(--spacing-s);
+        bottom: var(--spacing-2l);
+      }
+    }
+  }
+
+  &.--medium-size {
+    #{$textarea} {
+      &__wrapper {
+        height: 48px;
+      }
+
+      &__field {
+        padding: var(--spacing-m)  calc(var(--spacing-2l) + 35px) var(--spacing-m) var(--spacing-2l);
+        font: var(--typography-text-m-regular);
+        border-radius: var(--corner-radius-m);
+      }
+
+      &__counter {
+        font-size: var(--typography-text-s-regular);
+        right: var(--spacing-m);
+        bottom: var(--spacing-2l);
+      }
+    }
+  }
+
+  &.--large-size {
+    #{$textarea} {
+      &__wrapper {
+        height: 56px;
+      }
+
+      &__field {
+        padding: var(--spacing-2l) calc(var(--spacing-l) + 35px) var(--spacing-2l) var(--spacing-l);
+        font: var(--typography-text-l-regular);
+        border-radius: var(--corner-radius-m);
+      }
+
+      &__counter {
+        font-size: var(--typography-text-m-regular);
+        right: var(--spacing-2l);
+        bottom: var(--spacing-l);
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseTextarea/README.md

@@ -0,0 +1,75 @@
+## 📝 BaseTextarea
+
+Компонент многострочного текстового поля (`textarea`) с поддержкой ошибок, подсказок и состояния `readonly`. Подходит для пользовательских форм и длинного ввода.
+
+---
+
+### ✅ Пример использования
+
+```vue
+<base-textarea
+  v-model="description"
+  label="Описание"
+  placeholder="Введите текст..."
+  hint="Можно использовать до 300 символов"
+  :error="hasError && 'Поле обязательно'"
+/>
+```
+
+---
+
+### ⚙️ Пропсы
+
+- `modelValue: string`  
+  Значение поля. Управляется через `v-model`.
+
+- `id: string`  
+  Уникальный идентификатор для `textarea` и `label`.
+
+- `label?: string`  
+  Заголовок поля. Показывается над `textarea`.
+
+- `placeholder?: string`  
+  Текст-подсказка внутри поля.
+
+- `readonly?: boolean`  
+  Делает поле только для чтения.
+
+- `hint?: string`  
+  Вспомогательный текст под полем (например, с рекомендацией или лимитом).
+
+- `error?: string | boolean`  
+  Отображает сообщение об ошибке и подсвечивает поле. Если строка — используется как текст ошибки.
+
+- `disabled?: boolean`  
+  Деактивирует поле.
+
+- `required?: boolean`  
+  Добавляет `required`-поведение и соответствующие атрибуты.
+
+- `loading?: boolean`  
+  Добавляет визуальное состояние загрузки (влияет на стили).
+
+- `active?: boolean` / `inactive?: boolean` / `selected?: boolean`  
+  Управляют вспомогательными состояниями для кастомного внешнего вида.
+
+---
+
+### 📤 События
+
+- `update:modelValue`  
+  Эмитится при вводе текста. Возвращает текущее значение `string`.
+
+---
+
+### 🎨 Поведение и классы
+
+Компонент использует `useKitState` для управления классами и атрибутами:
+
+- `--is-disabled`, `--is-error`, `--is-loading` и другие — добавляются на корневой элемент.
+- `--is-readonly` — активируется при `readonly: true`.
+- Если `error` — добавляется стиль ошибки (граница и цвет текста).
+- Если `hint` или строковое `error` — отображается блок подсказки под `textarea`.
+- Поддерживаются размеры: `--small-size`, `--medium-size`, `--large-size`.
+- Поддерживаются maxLength: для ограничения вводимых символов.
+

package/src/components/BaseToggle/BaseToggle.vue

@@ -0,0 +1,271 @@
+<template>
+    <div class="base-toggle" :class="[classList]">
+        <div class="base-toggle__wrapper">
+
+            <div class="base-toggle__toggle">
+                <input
+                    v-model="model"
+                    v-bind="inputAttrs"
+                    type="checkbox"
+                    class="base-toggle__input"
+                />
+            </div>
+
+            <div
+                class="base-toggle__label-wrapper"
+                @click="handleToggle"
+            >
+                    <span v-if="label" class="base-toggle__label">{{ label }}</span>
+
+                    <span v-if="subLabel" class="base-toggle__sublabel">{{ subLabel }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import type { ICoreToggleProps } from '../../types/toggle';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state'
+
+const props = withDefaults(defineProps<ICoreToggleProps>(), {
+  size: 'medium',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const { sizeClassList } = useKitSize(props);
+const { stateClassList, stateAttrs } = useKitState(props);
+
+const classList = computed(() => [
+  sizeClassList.value,
+  stateClassList.value,
+
+  {
+    '--is-active-value': model.value,
+    '--is-readonly': props.readonly,
+    '--is-left-label-position': props.labelPosition === 'left',
+  },
+]);
+
+const attrs = useAttrs();
+
+const inputAttrs = computed(() => {
+  return {
+    ...attrs,
+    ...stateAttrs.value,
+    id: props.id,
+  };
+});
+
+function handleToggle() {
+  model.value = !model.value;
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-toggle {
+    $toggle: &;
+
+    @include is-disabled-state;
+
+    &__wrapper {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__label-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    &__toggle {
+        position: relative;
+        cursor: pointer;
+        transition: all 0.25s ease-out;
+
+        &::before {
+            position: absolute;
+            content: '';
+            border-radius: 50%;
+            box-shadow: 1px 1px 4px var(--effects-toggles-shadows);
+            transition: all 0.25s ease-out;
+        }
+    }
+
+    &__input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0 !important;
+    }
+
+    &.--is-readonly {
+        pointer-events: none;
+    }
+
+    &.--is-left-label-position {
+        #{$toggle} {
+            &__label-wrapper {
+                order: -1;
+            }
+        }
+    }
+
+    &.--medium-size {
+        #{$toggle} {
+            &__wrapper {
+                column-gap: var(--spacing-s);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__toggle {
+                width: 56px;
+                height: 32px;
+                border-radius: var(--corner-radius-l);
+
+                &::before {
+                    inset: 2px;
+                    width: 28px;
+                    height: 28px;
+                }
+            }
+        }
+
+        &.--is-active-value {
+            #{$toggle} {
+                &__toggle {
+                    &::before {
+                        left: calc(100% - 30px);
+                    }
+                }
+            }
+        }
+    }
+
+    &.--small-size {
+        #{$toggle} {
+            &__wrapper {
+                column-gap: var(--spacing-l);
+            }
+
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-xs-regular);
+            }
+
+            &__toggle {
+                width: 40px;
+                height: 24px;
+                border-radius: var(--corner-radius-m);
+
+                &::before {
+                    inset: 2px;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+
+        &.--is-active-value {
+            #{$toggle} {
+                &__toggle {
+                    &::before {
+                        left: calc(100% - 22px);
+                    }
+                }
+            }
+        }
+    }
+
+        #{$toggle} {
+            &__wrapper {
+                @include hover {
+                    #{$toggle} {
+                        &__toggle {
+                            background: var(--primary-black-400);
+                        }
+                    }
+                }
+            }
+
+            &__label {
+                color: var(--primary-text-primary);
+            }
+
+            &__sublabel {
+                color: var(--primary-text-tertiary);
+            }
+
+            &__toggle {
+                background: var(--primary-black-300);
+
+                @include focused {
+                        outline: 4px solid var(--effects-primary-focus);
+                }
+
+                &::before {
+                    background: var(--primary-black-white);
+                }
+            }
+        }
+
+        &.--is-active-value {
+            #{$toggle} {
+                &__toggle {
+                    background: var(--primary-blue);
+                }
+
+                &__wrapper {
+                    @include hover {
+                        #{$toggle} {
+                            &__toggle {
+                                background: var(--primary-blue-deep);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        @include is-disabled-state {
+            #{$toggle} {
+                &__toggle {
+                    background: var(--primary-black-100);
+
+                    &::before {
+                        background: var(--primary-black-50);
+                    }
+                }
+            }
+        }
+}
+</style>