plugin-ui-for-kzt 0.0.8 → 0.0.10

package/src/components/BaseCalendar/BaseCalendar.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="base-calendar" :class="classList">
+      <vue-date-picker
+        v-model="computedModelValue"
+        :range="range"
+        locale="ru"
+        auto-apply
+        :text-input="textInputOptions"
+        :hide-navigation="['time']"
+        :min-date="minDate || undefined"
+        :enable-time-picker="false"
+        :format="format"
+        month-name-format="long"
+        :day-names="dayNames"
+        :action-row="{ showPreview: false, showSelect: false, showCancel: false }"
+        :day-class="getDayClass"
+      >
+        <template #dp-input="{ value, isMenuOpen }">
+          <slot
+            :value="value"
+            :is-menu-open="isMenuOpen"
+          />
+        </template>
+      </vue-date-picker>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import type { DateRange, TCoreCalendarProps } from '../../types/calendar';
+import { useKitSize } from '../../composables/kit/size'
+
+const props = withDefaults(defineProps<TCoreCalendarProps>(), {
+  range: false,
+  minDate: null,
+  size: 'medium',
+});
+
+const emit: (event: 'update:modelValue', value: DateRange) => void = defineEmits();
+
+const computedModelValue = computed<DateRange>({
+  get: () => props.modelValue ?? null,
+  set: (value: DateRange) => {
+    emit('update:modelValue', value);
+    console.log(value);
+  },
+});
+
+const textInputOptions: { format: string } = {
+  format: 'dd.MM.yyyy',
+};
+
+const dayNames: string[] = ['П', 'В', 'С', 'Ч', 'П', 'С', 'В'];
+
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+  sizeClassList.value,
+  {
+    '--is-readonly': props.readonly,
+  },
+]);
+
+function format(date: Date | string | (Date | string)[] | null): string {
+  if (!date) return '';
+
+  const formatSingleDate = (d: Date | string): string => {
+    if (typeof d === 'string') {
+      d = new Date(d);
+    }
+    if (!(d instanceof Date) || isNaN(d.getTime())) {
+      return '';
+    }
+
+    const localDate = new Date(d.getTime() - d.getTimezoneOffset() * 60 * 1000);
+    const day = localDate.getDate().toString().padStart(2, '0');
+    const month = (localDate.getMonth() + 1).toString().padStart(2, '0');
+    const year = localDate.getFullYear();
+    return `${day}.${month}.${year}`;
+  };
+
+  if (Array.isArray(date)) {
+    return date.map(formatSingleDate).join(' - ');
+  }
+
+  return formatSingleDate(date);
+}
+
+
+function getDayClass(date: Date): string {
+  const day = date.getDay();
+  if (day === 0 || day === 6) {
+    return 'weekend';
+  }
+  return '';
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+  /* stylelint-disable selector-class-pattern */
+
+  .base-calendar {
+    --dp-border-radius: 16px;
+    --dp-cell-border-radius: 24px;
+
+    &.--small-size {
+        --dp-cell-padding: 7px;
+
+        :deep(.dp--menu-wrapper) {
+            width: 282px;
+        }
+
+        :deep(.dp__calendar_header) {
+            font: var(--typography-text-l-semibold);
+        }
+
+        :deep(.dp__month_year_select) {
+            font: var(--typography-text-l-semibold);
+        }
+
+        :deep(.dp__calendar_header_item) {
+            width: 38px;
+            height: 38px;
+            font: var(--typography-text-m-semibold);
+        }
+
+        :deep(.dp__calendar_item) {
+            font: var(--typography-text-m-regular);
+        }
+    }
+
+    &.--medium-size {
+        --dp-cell-padding: 10px;
+
+        :deep(.dp--menu-wrapper) {
+            width: 352px;
+        }
+
+        :deep(.dp__month_year_select) {
+            font: var(--typography-text-xl-semibold);
+        }
+
+        :deep(.dp__calendar_header) {
+            font: var(--typography-text-l-semibold);
+        }
+
+        :deep(.dp__calendar_item) {
+            font: var(--typography-text-l-regular);
+        }
+
+        :deep(.dp__calendar_header_item) {
+            width: 48px;
+            height: 48px;
+            font: var(--typography-text-l-semibold);
+        }
+    }
+
+    :deep(.dp__calendar_header_separator) {
+        background: var(--primary-black-200);
+    }
+
+    :deep(.dp--clear-btn) {
+        display: none;
+    }
+
+    :deep(.dp__input) {
+        border-radius: var(--corner-radius-m);
+    }
+
+    :deep(.dp__month_year_select) {
+        color: var(--primary-text-primary);
+    }
+
+    :deep(.dp__calendar_header,.dp__calendar_item) {
+        color: var(--primary-text-primary);
+    }
+
+    :deep(.dp__inner_nav) {
+        color: var(--primary-black-600);
+    }
+
+    :deep(.dp__calendar_item) {
+        color: var(--primary-text-primary);
+
+        .dp__cell_disabled{
+            color: var(--primary-black-400);
+        }
+
+        .weekend {
+            color: var(--error-red);
+        }
+
+        .dp__cell_disabled.weekend {
+            color: var(--error-red-light-02);
+        }
+
+        .weekend.dp__active_date {
+            color: var(--primary-text-primary);
+        }
+    }
+
+    :deep(.dp__today) {
+        background: var(--primary-black-200);
+        border: none;
+    }
+
+    :deep(.dp__active_date) {
+        background: var(--primary-blue);
+        border: none;
+    }
+
+    :deep(.dp__range_between) {
+        background: var(--primary-blue-200);
+        border: none;
+    }
+
+    :deep(.dp__calendar_header_item) {
+        color: var(--primary-text-tertiary);
+
+        &:nth-child(6),
+        &:nth-child(7) {
+            color: var(--error-red);
+        }
+    }
+}
+</style>

package/src/components/BaseCalendar/README.md

@@ -0,0 +1,126 @@
+### BaseCalendar
+
+Компонент для выбора даты с возможностью работы с диапазоном дат. Он использует `vue-datepicker` для отображения календаря и позволяет выбирать как одну дату, так и диапазон дат. Это идеальный компонент для ввода даты или диапазона дат с поддержкой различных форматов и адаптивных стилей.
+
+---
+
+#### Props
+
+- `modelValue?: DateRange`  
+  Начальное значение для календаря. Может быть датой, диапазоном дат или строкой в формате `dd.MM.yyyy`. Также поддерживает `null`.
+
+- `range?: boolean | RangeConfig | undefined`  
+  Если установлено в `true`, компонент будет работать в режиме выбора диапазона дат. Вы можете настроить дополнительные параметры для диапазона через `RangeConfig`.
+
+- `minDate?: Date | null`  
+  Минимальная допустимая дата для выбора. Устанавливается в виде объекта `Date`.
+
+- `readonly?: boolean`  
+  Если установлено в `true`, компонент будет только для чтения, и пользователь не сможет изменять дату.
+
+- `size?: 'small' | 'medium'`  
+  Определяет размер компонента. Это влияет на размер элементов календаря и поля ввода.
+
+---
+
+#### Важные особенности
+
+- **Диапазон дат:**  
+  Если `range` установлено в `true`, компонент позволяет выбрать диапазон дат, а не только одну дату.
+
+- **Формат даты:**  
+  Компонент использует формат `dd.MM.yyyy` для отображения даты в текстовом поле. Это может быть изменено через настройку `textInputOptions.format`.
+
+- **Локализация:**  
+  Календарь использует русскую локализацию для отображения дней недели и месяцев.
+
+- **Адаптивные стили:**  
+  Компонент имеет адаптивные стили для разных размеров (`small` и `medium`), которые настраиваются через CSS-переменные. Это влияет на отступы, шрифт и размеры элементов календаря.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseCalendar v-model="selectedDate" :range="true" :minDate="minDate" size="medium">
+  <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onKeypress, onPaste, isMenuOpen }">
+    <input 
+      v-bind="{
+        value,
+        onInput,
+        onEnter,
+        onTab,
+        onClear,
+        onBlur,
+        onKeypress,
+        onPaste,
+        isMenuOpen
+      }" 
+      class="date-input" 
+    />
+  </template>
+</BaseCalendar>
+```
+
+---
+
+#### Логика
+
+- **Двусторонняя привязка:**  
+  Состояние компонента управляется через `modelValue`. При изменении даты или диапазона дат компонент эмитирует событие `update:modelValue`.
+
+- **Форматирование:**  
+  Даты форматируются с помощью функции `format`, которая преобразует объект `Date` в строку в формате `dd.MM.yyyy`. Для диапазона дат строка будет содержать два значения, разделённые дефисом.
+
+- **Получение класса дня:**  
+  Функция `getDayClass` используется для стилизации выходных дней (суббот и воскресений). Для них применяется класс `weekend`.
+
+---
+
+#### Стилизация
+
+Компонент использует SCSS для кастомизации внешнего вида календаря. В частности, заданы стили для различных состояний элементов, таких как активные дни, сегодня, выбранный диапазон и выходные.
+
+```scss
+:deep(.dp__calendar_item) {
+  .dp__cell_disabled {
+    color: var(--primary-black-400);
+  }
+
+  .weekend {
+    color: var(--error-red);
+  }
+
+  .dp__cell_disabled.weekend {
+    color: var(--error-red-light-02);
+  }
+}
+```
+
+Этот код задаёт стиль для выходных, делая их красными и отличимыми от обычных дней.
+
+---
+
+#### Локализация и конфигурация
+
+- **Дни недели:**  
+  Дни недели отображаются как однобуквенные аббревиатуры: `'П', 'В', 'С', 'Ч', 'П', 'С', 'В'` для понедельника по воскресенье.
+
+- **Навигация и кнопки:**  
+  Календарь скрывает кнопки навигации, связанные с выбором времени, и позволяет использовать только выбор даты.
+
+---
+
+#### Расширение и кастомизация
+
+Вы можете кастомизировать внешний вид и функциональность компонента, например:
+
+- Изменить формат даты, передав его через `textInputOptions.format`.
+- Настроить диапазон дат с помощью `range` или `RangeConfig`.
+- Изменить стили календаря для разных размеров и состояний (например, для `readonly`).
+
+---
+
+### Заключение
+
+Этот компонент подходит для создания удобного и гибкого календаря с возможностью выбора как одной даты, так и диапазона дат. Он может быть использован в различных формах и интерфейсах, требующих ввода дат, с полным контролем над форматированием и локализацией.

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -0,0 +1,252 @@
+<template>
+    <div
+        class="base-checkbox"
+        :class="classList"
+    >
+        <div class="base-checkbox__wrapper" @click="handleToggle">
+
+          <div class="base-checkbox__input-wrapper">
+            <input
+              v-model="model"
+              v-bind="inputAttrs"
+              type="checkbox"
+              class="base-checkbox__input"
+            />
+          </div>
+
+            <div class="base-checkbox__icon-wrapper">
+                <base-icon
+                    class="base-checkbox__icon"
+                    name="checkbox"
+                    :size="size"
+                />
+            </div>
+
+            <div class="base-checkbox__label-wrapper">
+                      <span v-if="label" class="base-checkbox__label">{{ label }}</span>
+
+                      <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
+              </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { IBaseRadioProps } from '../../types/checkbox-radio';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state'
+import { useAttrs, computed } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const props = withDefaults(defineProps<IBaseRadioProps>(), {
+  size: 'medium',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const { sizeClassList } = useKitSize(props);
+const { stateClassList, stateAttrs } = useKitState(props);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const attrs = useAttrs();
+
+const inputAttrs = computed(() => {
+  return {
+    ...attrs,
+    ...stateAttrs.value,
+    id: props.id,
+  };
+});
+
+function handleToggle() {
+  model.value = !model.value;
+}
+
+const classList = computed(() => [
+  sizeClassList.value,
+  stateClassList.value,
+  {
+    '--is-active': model.value,
+    '--is-readonly': props.readonly,
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-checkbox {
+    $item: &;
+
+    --icon-size: 18px;
+
+    &__wrapper {
+        display: flex;
+        column-gap: 10px;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+
+    &.--is-readonly {
+        pointer-events: none;
+    }
+
+    &.--medium-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-m);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__icon-wrapper {
+                width: 32px;
+                height: 32px;
+            }
+        }
+    }
+
+    &.--small-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-s);
+            }
+
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-xs-regular);
+            }
+
+            &__icon-wrapper {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
+    &__icon-wrapper {
+        position: relative;
+        display: flex;
+        flex-shrink: 0;
+        color: var(--primary-blue);
+        background: var(--primary-black-white);
+        border: 1px solid var(--primary-black-400);
+        border-radius: var(--corner-radius-xxs);
+        transition:
+            border-color 0.3s ease,
+            background-color 0.3s ease;
+    }
+
+    &__icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        opacity: 0;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+        transform: translate(-50%, -50%) scale(0);
+    }
+
+    &__input-wrapper {
+        position: relative;
+        cursor: pointer;
+        transition: all 0.25s ease-out;
+
+        @include focused {
+            outline: 4px solid var(--effects-primary-focus);
+        }
+    }
+
+    &__input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0 !important;
+    }
+
+    &__label-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    &__label {
+        color: var(--primary-text-primary);
+        user-select: none;
+    }
+
+    &__sublabel {
+        color: var(--primary-text-tertiary);
+        user-select: none;
+    }
+
+    @include hover {
+        #{$item} {
+            &__icon-wrapper {
+                background: var(--primary-blue-100);
+                border-color: var(--primary-blue-deep);
+            }
+        }
+    }
+
+    &.--is-active {
+        #{$item} {
+            &__icon-wrapper {
+                background: var(--primary-blue-50);
+                border-color: var(--primary-blue);
+            }
+
+            &__icon {
+                opacity: 1;
+                transform: translate(-50%, -50%) scale(1);
+                animation: checkmark-appear 0.3s ease-out forwards;
+            }
+        }
+    }
+
+    @include is-disabled-state {
+        #{$item} {
+            &__icon-wrapper {
+                background: var(--primary-black-50);
+                border: 1px solid var(--primary-black-300);
+            }
+        }
+    }
+}
+
+@keyframes checkmark-appear {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.2);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+</style>