plugin-ui-for-kzt 0.0.9 → 0.0.10

package/src/components/BaseLoader/BaseLoader.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="loader">
+        <div class="loader__circle">
+            <base-icon
+                class="loader__circle-icon"
+                name="loader"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+</script>
+
+<style lang="scss">
+.loader {
+    position: relative;
+    display: block;
+}
+
+.loader__circle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: transparent;
+    border-radius: 50%;
+}
+
+.loader__circle-icon {
+    animation: loader-circle 1s linear infinite;
+}
+
+@keyframes loader-circle {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

package/src/components/BaseLoader/README.md

@@ -0,0 +1,29 @@
+### BaseLoader
+
+Компонент загрузчика, отображающий анимированное вращающееся колесо. Он может использоваться для индикации загрузки данных или процесса в приложении.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseLoader />
+```
+
+---
+
+#### Стилизация
+
+- Компонент представляет собой контейнер с кругом, внутри которого вращается иконка.
+- Иконка вращается бесконечно благодаря анимации CSS `@keyframes loader-circle`, которая изменяет ее угол от 0 до 360 градусов за 1 секунду.
+- Контейнер имеет размер 100% по ширине и фиксированную высоту, иконка центрирована внутри контейнера.
+
+---
+
+#### Анимация
+
+- Анимация выполняется бесконечно и вращает иконку, создавая эффект загрузки.
+
+---
+
+Этот компонент можно использовать в интерфейсе для индикации того, что приложение или часть страницы находится в процессе загрузки.

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -0,0 +1,216 @@
+<template>
+    <component
+        :is="actualComponent"
+        v-bind="componentAttrs"
+        class="base-opened-list-item"
+        :class="classList"
+    >
+        <div class="base-opened-list-item__wrapper">
+            <div
+                v-if="$slots.icon || icon"
+                class="base-opened-list-item__icon"
+            >
+                <slot
+                    name="icon"
+                    :icon="icon"
+                >
+                </slot>
+            </div>
+
+            <span class="base-opened-list-item__text">
+                <slot />
+            </span>
+
+            <div
+                v-if="active"
+                class="base-opened-list-item__postfix-icon"
+            >
+
+            <base-icon
+                name="checkbox-circle"
+                :size="size"
+            />
+            </div>
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state'
+import BaseCheckbox from '../BaseCheckbox/BaseCheckbox.vue';
+import type { IBaseOpenedListItemProps } from '../../types/dropdown';
+
+const props = withDefaults(defineProps<IBaseOpenedListItemProps>(), {
+  tag: 'button',
+  active: false,
+  size: 'medium',
+});
+
+const { stateClassList, stateAttrs } = useKitState(props);
+const attrs = useAttrs();
+
+const componentAttrs = computed(() => ({
+  ...attrs,
+  ...stateAttrs.value,
+}));
+
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+  ...sizeClassList.value,
+  ...stateClassList.value,
+  {
+    '--is-active': props.active,
+    '--is-disabled': props.disabled,
+  },
+]);
+
+const actualComponent = computed(() => {
+  return {
+    checkbox: BaseCheckbox,
+    button: 'button',
+  }[props.tag as 'button'];
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-opened-list-item {
+    $item: &;
+
+    display: block;
+    padding: 0;
+    user-select: none;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    display: flex;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        text-align: left;
+        transition: all var(--ui-transition);
+
+        @include hover {
+            background: var(--primary-black-100);
+        }
+
+        @include pressed {
+            background: var(--primary-blue-100);
+        }
+    }
+
+    &__icon,
+    &__postfix-icon {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        transition: inherit;
+    }
+
+    &__text {
+        flex: 1;
+        font: var(--ui-typography-body-regular);
+        color: var(--primary-text-primary);
+        transition: inherit;
+    }
+
+    &.--is-active,
+    &.router-link-active,
+    &.router-link-exact-active {
+        #{$item} {
+            &__wrapper {
+                background: var(--primary-black-50);
+            }
+        }
+    }
+
+    &.--is-disabled {
+        #{$item} {
+            &__text {
+                color: var(--primary-text-quaternary);
+            }
+
+            @include is-disabled-state;
+        }
+    }
+
+    &.--is-active.--is-disabled {
+        #{$item} {
+            &__wrapper {
+                background: var(--primary-black-100);
+            }
+        }
+    }
+
+    &.--small-size {
+        #{$item} {
+            &__wrapper {
+                gap: var(--spacing-s);
+                height: 14px;
+                padding: var(--spacing-s) var(--spacing-2l);
+            }
+
+            &__text {
+                font: var(--typography-text-m-regular);
+            }
+
+            &__icon,
+            &__postfix-icon {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+
+    &.--medium-size {
+        #{$item} {
+            &__wrapper {
+                gap: var(--spacing-m);
+                height: 24px;
+                padding: var(--spacing-m) var(--spacing-2l);
+            }
+
+            &__text {
+                font: var(--typography-text-m-regular);
+            }
+
+            &__icon,
+            &__postfix-icon {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$item} {
+            &__wrapper {
+                gap: var(--spacing-l);
+                height: 24px;
+                padding: var(--spacing-2l) var(--spacing-l);
+            }
+
+            &__text {
+                font: var(--typography-text-l-regular);
+            }
+
+            &__icon,
+            &__postfix-icon {
+                width: 32px;
+                height: 32px;
+            }
+        }
+    }
+}
+</style>

package/src/components/BaseOpenedListItem/README.md

@@ -0,0 +1,67 @@
+### BaseOpenedListItem
+
+Компонент, который представляет элемент списка с возможностью отображения иконок и постфиксных элементов (например, флажков или других иконок). Используется в списках, где требуется интерактивность, активное и неактивное состояние, а также стилизация элементов.
+
+---
+
+#### Props
+
+- `tag?: 'button'`  
+  Указывает, какой элемент будет использоваться для рендеринга: `'button'` или кастомный компонент (например, `BaseCheckbox`).
+
+- `icon?: string`  
+  Иконка, которая будет отображаться слева от текста. Если не задано, используется слот для иконки.
+
+- `postfixIcon?: string`  
+  Иконка или элемент, который отображается справа от текста. По умолчанию используется компонент `BaseIcon` с именем "checkbox-circle", если `active` установлено в `true`.
+
+- `active?: boolean`  
+  Указывает, активен ли элемент. Если `true`, отображается постфикс-иконка.
+
+- `disabled?: boolean`  
+  Блокирует элемент, делая его неактивным и меняя его внешний вид (в том числе стилизуется как неактивный).
+
+- `size?: 'small' | 'medium' | 'large'`  
+  Устанавливает размер элемента. Доступные значения: `'small'`, `'medium'`, `'large'`.
+
+---
+
+#### Поведение
+
+- Если значение `active` установлено в `true`, справа от текста появляется иконка.
+- Клик по элементу вызывает его активацию (если элемент не заблокирован).
+- Для каждого из доступных размеров (`small`, `medium`, `large`) компонент меняет внутреннюю стилизацию: размер иконок и отступы.
+- Компонент поддерживает ховер, нажатие и состояние активации для разных состояний (`--is-active`, `--is-disabled`).
+- Используется в списках, где важна интерактивность и стиль.
+
+---
+
+#### Стилизация
+
+Компонент имеет адаптивный дизайн с тремя размерами (`small`, `medium`, `large`), изменяющими размеры текста, отступы и иконки. В зависимости от состояния элемент может менять цвет фона и текста:
+
+- `--is-active` — при активном состоянии элемента.
+- `--is-disabled` — при отключении элемента.
+- Состояния ховера и нажатия применяются через `@include hover` и `@include pressed` в SCSS.
+
+---
+
+#### Пример использования
+
+```vue
+<BaseOpenedListItem
+  :active="isActive"
+  size="medium"
+>
+  Основной текст элемента
+</BaseOpenedListItem>
+```
+
+```ts
+const selected = ref(false);
+const isActive = ref(true);
+```
+
+---
+
+Этот компонент можно использовать для создания динамичных списков с элементами, где каждый элемент может иметь активное состояние, иконки и стилизованное оформление в зависимости от состояния.

package/src/components/BaseRadio/BaseRadio.vue

@@ -0,0 +1,283 @@
+<template>
+    <div
+        class="base-radio"
+        :class="classList"
+    >
+        <div class="base-radio__wrapper" @click="handleToggle">
+  
+          <div class="base-radio__input-wrapper">
+            <input
+              v-model="model"
+              v-bind="inputAttrs"
+              type="radio"
+              class="base-radio__input"
+            />
+          </div>
+  
+            <div class="base-radio__icon" />
+  
+            <div class="base-radio__label-wrapper">
+                      <span v-if="label" class="base-radio__label">{{ label }}</span>
+  
+                      <span v-if="subLabel" class="base-radio__sublabel">{{ subLabel }}</span>
+              </div>
+        </div>
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import type { IBaseRadioProps } from '../../types/checkbox-radio';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state'
+
+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-radio {
+      $item: &;
+  
+      &__wrapper {
+          display: flex;
+          column-gap: 10px;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+      }
+  
+      &__icon {
+          position: relative;
+          display: flex;
+          flex-shrink: 0;
+          background: var(--primary-black-white);
+          border-radius: 50%;
+          transition:
+          border-color 0.3s ease,
+          background-color 0.3s ease;
+  
+          &::before,
+          &::after {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 100%;
+              height: 100%;
+              content: '';
+              border-radius: 50%;
+              transform: translate3d(-50%, -50%, 0);
+          }
+  
+          &::before {
+              background: var(--primary-blue-50);
+              opacity: 0;
+              transition: opacity 0.3s ease;
+          }
+  
+          &::after {
+              background: var(--primary-blue);
+              opacity: 0;
+              transition:
+              opacity 0.3s ease,
+              transform 0.3s ease;
+              transform: translate3d(-50%, -50%, 0) scale(0.4);
+          }
+      }
+  
+      &.--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 {
+                  width: 32px;
+                  height: 32px;
+                  border: 2px solid var(--primary-black-400);
+  
+                  &::before {
+                      width: calc(100% - 4px);
+                      height: calc(100% - 4px);
+                  }
+              }
+          }
+  
+          &.--is-active {
+              #{$item} {
+                  &__icon {
+                      &::after {
+                          width: 13px;
+                          height: 13px;
+                      }
+                  }
+              }
+          }
+      }
+  
+      &.--small-size {
+          #{$item} {
+              &__wrapper {
+                  column-gap: var(--spacing-s);
+              }
+  
+              &__label {
+                  font: var(--typography-text-s-medium);
+              }
+  
+              &__sublabel {
+                  font: var(--typography-text-xs-regular);
+              }
+  
+              &__icon {
+                  width: 24px;
+                  height: 24px;
+                  border: 1.5px solid var(--primary-black-400);
+  
+                  &::before {
+                      width: calc(100% - 2px);
+                      height: calc(100% - 2px);
+                  }
+              }
+          }
+  
+          &.--is-active {
+              #{$item} {
+                  &__icon {
+                      &::after {
+                          width: 9px;
+                          height: 9px;
+                      }
+                  }
+              }
+          }
+      }
+  
+      &__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 {
+              background-color: var(--primary-blue-100);
+                border-color: var(--primary-blue-deep);
+            }
+          }
+      }
+  
+      &.--is-active {
+          #{$item} {
+              &__icon {
+                  border: 2px solid var(--primary-blue);
+  
+                  &::before {
+                      opacity: 1;
+                  }
+  
+                  &::after {
+                      opacity: 1;
+                      transform: translate3d(-50%, -50%, 0) scale(1);
+                  }
+              }
+          }
+      }
+  
+      @include is-disabled-state {
+          #{$item} {
+              &__icon {
+                  background: var(--primary-black-50);
+                  border: 1px solid var(--primary-black-300);
+  
+                  &::after {
+                      background: var(--primary-black-300);
+                  }
+              }
+          }
+      }
+  }
+  </style>
+