plugin-ui-for-kzt 0.0.8 → 0.0.10

package/src/components/BaseButton/BaseButton.vue

@@ -0,0 +1,489 @@
+<template>
+    <Component
+        :is="componentTag"
+        v-bind="componentAttrs"
+        class="base-button"
+        :class="[classList]"
+    >
+        <template v-if="!loading">
+            <slot></slot>
+        </template>
+
+        <base-loader
+            v-else
+            class="base-button__loader"
+        />
+    </Component>
+</template>
+
+<script setup lang="ts">
+import BaseLoader from '../BaseLoader/BaseLoader.vue';
+import type { ICoreButtonProps } from '../../types/button';
+import { useKitInteractive } from '../../composables/kit/interactive';
+import { useAttrs, computed } from 'vue';
+import { useKitSize } from '../../composables/kit/size'
+import { useKitColor } from '../../composables/kit/color'
+import { useKitState } from '../../composables/kit/state'
+import { useKitStyle } from '../../composables/kit/style'
+
+const props = withDefaults(defineProps<ICoreButtonProps>(), {
+  tag: 'button',
+  color: 'primary',
+  size: 'medium',
+});
+
+const { componentTag, interactiveClassList } = useKitInteractive(props);
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+const { stateClassList, stateAttrs } = useKitState(props);
+const { styleClassList } = useKitStyle(props);
+const attrs = useAttrs();
+
+const externalLink = computed(() => {
+  if (attrs.to) {
+    return {
+      href: attrs.to,
+    };
+  }
+  return {};
+});
+
+const componentAttrs = computed(() => ({
+  ...attrs,
+  ...stateAttrs.value,
+  ...externalLink.value,
+
+  ...(props.tag === 'button' && {
+    type: attrs.type || 'button',
+  }),
+}));
+
+const classList = computed(() => [
+  interactiveClassList.value,
+  sizeClassList.value,
+  colorClassList.value,
+  stateClassList.value,
+  styleClassList.value,
+]);
+</script>
+
+<style lang="scss">
+ @import '@/styles/variables';
+ @import '@/styles/root';
+
+.base-button {
+    @include reset-button;
+    @include is-disabled-state;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    text-decoration: none;
+    appearance: none;
+    cursor: pointer;
+    user-select: none;
+    transition: all var(--ui-transition);
+
+    &.--is-loading {
+        @include loading-element;
+    }
+
+    &__loader {
+        margin: auto;
+    }
+
+    &.--is-underline {
+        text-decoration: underline;
+    }
+
+    &.--extra-small-size {
+        column-gap: var(--spacing-xs);
+        height: 32px;
+        padding: var(--spacing-2s) var(--spacing-m);
+        font: var(--typography-text-s-medium);
+        border-radius: var(--corner-radius-xs);
+
+       .loader__circle-icon {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    &.--small-size {
+        column-gap: var(--spacing-xs);
+        height: 40px;
+        padding: var(--spacing-2m) var(--spacing-l);
+        font: var(--typography-text-m-medium);
+        border-radius: var(--corner-radius-s);
+
+        .loader__circle-icon {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    &.--medium-size {
+        column-gap: var(--spacing-xs);
+        height: 48px;
+        padding: var(--spacing-m) var(--spacing-l);
+        font: var(--typography-text-l-medium);
+        border-radius: var(--corner-radius-m);
+
+        .loader__circle-icon {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    &.--large-size {
+        column-gap: var(--spacing-xs);
+        height: 56px;
+        padding: var(--spacing-m) var(--spacing-l);
+        font: var(--typography-text-l-medium);
+        border-radius: var(--corner-radius-m);
+
+        .loader__circle-icon {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    &.--is-interactive {
+        height: 22px;
+        padding: 0;
+    }
+
+    &.--primary-color {
+        color: var(--primary-black-white);
+        background: var(--primary-blue);
+
+        i,svg {
+            color: var(--primary-black-white) !important;
+        }
+
+        @include hover {
+            background: var(--primary-blue-800);
+        }
+
+        @include pressed {
+            background: var(--primary-blue-deep);
+        }
+
+        @include focused {
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-blue-100);
+            background: var(--primary-blue-300);
+
+            i,svg {
+                color: var(--primary-blue-100) !important;
+            }
+        }
+    }
+
+    &.--secondary-color {
+        color: var(--primary-black-800);
+        background: var(--primary-black-200);
+
+        i,svg {
+            color: var(--primary-black-800) !important;
+        }
+
+        @include hover {
+            color: var(--primary-black-900);
+            background: var(--primary-black-300);
+        }
+
+        @include pressed {
+            background: var(--primary-black-400);
+        }
+
+        @include focused {
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+            background: var(--primary-black-100);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--tertiary-gray-color {
+        color: var(--primary-black-600);
+        background: transparent;
+        border: 1px solid var(--primary-black-400);
+
+        i,svg {
+            color: var(--primary-black-600) !important;
+        }
+
+        @include hover {
+            color: var(--primary-black-700);
+            text-decoration: none;
+            border: 1px solid var(--primary-black-500);
+
+            i,svg {
+                color: var(--primary-black-700) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--primary-black-800);
+            border: 1px solid var(--primary-black-600);
+        }
+
+        @include focused {
+            border: 1px solid var(--primary-black-400);
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+            border: 1px solid var(--primary-black-300);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--tertiary-blue-color {
+        color: var(--primary-blue);
+        background: transparent;
+        border: 1px solid var(--primary-blue);
+
+        i,svg {
+            color: var(--primary-blue) !important;
+        }
+
+        @include hover {
+            color: var(--primary-blue-800);
+            text-decoration: none;
+            border: 1px solid var(--primary-blue-800);
+
+            i,svg {
+                color: var(--primary-blue-800) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--primary-blue-deep);
+            border: 1px solid var(--primary-blue-deep);
+        }
+
+        @include focused {
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+            border: 1px solid var(--primary-black-300);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--quaternary-gray-color {
+        color: var(--primary-black-600);
+        background: transparent;
+
+        i,svg {
+            color: var(--primary-black-600) !important;
+        }
+
+        @include hover {
+            color: var(--primary-black-700);
+            background: var(--primary-black-100);
+
+            i,svg {
+                color: var(--primary-black-700) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--primary-black-800);
+            background: var(--primary-black-200);
+        }
+
+        @include focused {
+            background: rgb(255 255 255 / 10%);
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--quaternary-blue-color {
+        color: var(--primary-blue);
+        background: transparent;
+
+        i,svg {
+            color: var(--primary-blue) !important;
+        }
+
+        @include hover {
+            color: var(--primary-blue-900);
+            text-decoration: none;
+            background: var(--primary-blue-100);
+
+            i,svg {
+                color: var(--primary-blue-900) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--primary-blue-deep);
+            background: var(--primary-blue-200);
+        }
+
+        @include focused {
+            background: rgb(255 255 255 / 10%);
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--link-blue-color {
+        color: var(--secondary-text-link-default-focus);
+        text-decoration: none;
+        background: transparent;
+        padding: var(--corner-radius-xxs);
+
+        i,svg {
+            color: var(--primary-blue) !important;
+        }
+
+        @include hover {
+            color: var(--secondary-text-link-hover);
+
+            i,svg {
+                color: var(--primary-blue-700) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--secondary-text-link-pressed);
+
+            i,svg {
+                color: var(--primary-blue-700) !important;
+            }
+        }
+
+        @include focused {
+            background: rgb(255 255 255 / 10%);
+            outline: 4px solid var(--effects-primary-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--secondary-text-link-disabled);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--link-critical-color {
+        color: var(--error-red);
+        text-decoration: none;
+        background: transparent;
+        padding: var(--corner-radius-xxs);
+
+        i,svg {
+            color: var(--error-red) !important;
+        }
+
+        @include hover {
+            color: var(--error-red-light-01);
+
+            i,svg {
+                color: var(--error-red-light-01) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--error-red-deep);
+
+            i,svg {
+                color: var(--error-red-deep) !important;
+            }
+        }
+
+        @include focused {
+            background: rgb(255 255 255 / 10%);
+            outline: 4px solid var(--effects-error-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--primary-black-400);
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+
+    &.--link-gray-color {
+        color: var(--secondary-text-gray-link-default-focus);
+        background: transparent;
+        text-decoration: underline;
+        padding: var(--corner-radius-xxs);
+
+        i,svg {
+            color: var(--primary-black) !important;
+        }
+
+        @include hover {
+            color: var(--secondary-text-gray-link-hover);
+
+            i,svg {
+                color: var(--primary-black-500) !important;
+            }
+        }
+
+        @include pressed {
+            color: var(--secondary-text-gray-link-pressed);
+
+            i,svg {
+                color: var(--primary-black-700) !important;
+            }
+        }
+
+        @include focused {
+            background: rgb(255 255 255 / 10%);
+            outline: 4px solid var(--effects-gray-focus);
+        }
+
+        @include is-disabled-state {
+            color: var(--secondary-text-gray-link-disabled);
+            border-bottom: none;
+
+            i,svg {
+                color: var(--primary-black-400) !important;
+            }
+        }
+    }
+}
+</style>

package/src/components/BaseButton/README.md

@@ -0,0 +1,53 @@
+Компонент `BaseButton.vue` представляет собой гибкую кнопку с возможностью настройки, включая цвет, размер и состояния взаимодействия. Вот разбор того, как работает этот компонент и как его можно использовать:
+
+### Шаблон:
+- Компонент динамически рендерит правильный HTML-элемент в зависимости от свойства `tag` (например, `button`, `a` и т. д.).
+- Если свойство `loading` установлено в `true`, отображается загрузчик (`base-loader`), в противном случае показывается основной контент кнопки (через `slot`).
+- Атрибуты компонента связываются через объект `componentAttrs`, включая такие атрибуты, как `href` для внешних ссылок.
+
+### Скрипт:
+- **Props**: Компонент принимает различные свойства, включая `tag`, `color`, `size`, `loading`, `disabled` и другие. Это позволяет полностью настроить внешний вид и поведение кнопки.
+- **Composables**: Используются несколько composables:
+  - `useKitInteractive`: Обрабатывает взаимодействие и генерирует список классов для интерактивности.
+  - `useKitSize`: Определяет класс для размера кнопки и применяет его.
+  - `useKitColor`: Определяет класс для цвета кнопки и применяет его.
+  - `useKitState`: Обрабатывает состояния кнопки, включая загрузку, отключение и т. д.
+  - `useKitStyle`: Отвечает за дополнительные стили.
+- **Вычисляемые свойства**:
+  - `componentTag`: Определяет, какой HTML-элемент рендерить (например, `button`, `a`).
+  - `classList`: Объединяет сгенерированные классы из composables.
+  - `externalLink`: Динамически добавляет атрибут `href`, если кнопка используется как ссылка (тег `a`).
+  - `componentAttrs`: Объединяет атрибуты (например, `href`, `type` и другие) и привязывает их к элементу.
+
+### Стили:
+- **Размеры кнопки**: Компонент поддерживает несколько размеров кнопок: `--extra-small-size`, `--small-size`, `--medium-size` и `--large-size`. Каждый размер имеет разные отступы, шрифт и размер загрузчика.
+- **Цветовые варианты**: Кнопка поддерживает различные варианты цветов (основной, вторичный, третичный, четвертичный и ссылки с несколькими цветами).
+- **Состояние загрузки**: Когда свойство `loading` установлено в `true`, отображается загрузчик.
+- **Состояния**: Кнопка включает состояния для наведения, нажатия, фокуса и отключения.
+
+### Как использовать:
+```vue
+<BaseButton 
+  tag="button" 
+  color="primary" 
+  size="medium" 
+  :loading="isLoading"
+  @click="handleClick"
+>
+  Отправить
+</BaseButton>
+
+<BaseButton 
+  tag="a" 
+  :to="'/somewhere'" 
+  color="link-blue" 
+  size="small"
+>
+  Перейти в Панель управления
+</BaseButton>
+```
+
+### Возможные улучшения:
+- **Пользовательский загрузчик**: Можно добавить возможность передачи пользовательского компонента загрузчика для большей гибкости.
+
+- **Типы TypeScript**: Типы, используемые в props, достаточно обширны, но стоит проверить, покрывают ли они все возможные случаи, особенно с логикой взаимодействия и внешними ссылками.