plugin-ui-for-kzt 0.0.9 → 0.0.10

package/src/assets/icons/uz.svg

@@ -0,0 +1,26 @@
+<svg viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_333_23284)">
+<path d="M6.10352e-05 3C6.10352e-05 1.34315 1.30251 0 2.90915 0H29.091C30.6976 0 32.0001 1.34315 32.0001 3V21C32.0001 22.6569 30.6976 24 29.091 24H2.90915C1.3025 24 6.10352e-05 22.6569 6.10352e-05 21V3Z" fill="#D80027"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.05176e-05 18H32V24H-3.05176e-05V18Z" fill="#00B731"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.10352e-05 0H32.0001V6.66667H6.10352e-05V0Z" fill="#338AF3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.05176e-05 8.16699H32V16.5003H-3.05176e-05V8.16699Z" fill="white"/>
+<path d="M3.55107 3.39667C3.55107 2.40876 4.24537 1.58348 5.17255 1.38101C5.03007 1.34986 4.8822 1.33301 4.73033 1.33301C3.59059 1.33301 2.66663 2.25693 2.66663 3.39671C2.66663 4.53649 3.59051 5.46041 4.73033 5.46041C4.8822 5.46041 5.03003 5.44351 5.17255 5.41241C4.24542 5.20986 3.55107 4.38457 3.55107 3.39667Z" fill="white"/>
+<path d="M6.39325 4.33496L6.53293 4.76491H6.985L6.61929 5.03066L6.75896 5.46061L6.39325 5.19489L6.02746 5.46061L6.16717 5.03066L5.80142 4.76491H6.25349L6.39325 4.33496Z" fill="white"/>
+<path d="M7.83516 4.33496L7.97487 4.76491H8.42694L8.06119 5.03066L8.20091 5.46061L7.83516 5.19489L7.4694 5.46061L7.60912 5.03066L7.24341 4.76491H7.69544L7.83516 4.33496Z" fill="white"/>
+<path d="M9.27744 4.33496L9.41711 4.76491H9.86923L9.50347 5.03066L9.64315 5.46061L9.27744 5.19489L8.91164 5.46061L9.0514 5.03066L8.68561 4.76491H9.13772L9.27744 4.33496Z" fill="white"/>
+<path d="M10.7195 4.33496L10.8592 4.76491H11.3113L10.9456 5.03066L11.0853 5.46061L10.7195 5.19489L10.3537 5.46061L10.4935 5.03066L10.1277 4.76491H10.5798L10.7195 4.33496Z" fill="white"/>
+<path d="M12.1649 4.33496L12.3046 4.76491H12.7567L12.391 5.03066L12.5307 5.46061L12.1649 5.19489L11.7992 5.46061L11.9389 5.03066L11.5732 4.76491H12.0252L12.1649 4.33496Z" fill="white"/>
+<path d="M7.83516 2.83398L7.97487 3.26389H8.42694L8.06119 3.52969L8.20091 3.95959L7.83516 3.69388L7.4694 3.95959L7.60912 3.52969L7.24341 3.26389H7.69544L7.83516 2.83398Z" fill="white"/>
+<path d="M9.27744 2.83398L9.41711 3.26389H9.86923L9.50347 3.52969L9.64315 3.95959L9.27744 3.69388L8.91164 3.95959L9.0514 3.52969L8.68561 3.26389H9.13772L9.27744 2.83398Z" fill="white"/>
+<path d="M10.7195 2.83398L10.8592 3.26389H11.3113L10.9456 3.52969L11.0853 3.95959L10.7195 3.69388L10.3537 3.95959L10.4935 3.52969L10.1277 3.26389H10.5798L10.7195 2.83398Z" fill="white"/>
+<path d="M12.1649 2.83398L12.3046 3.26389H12.7567L12.391 3.52969L12.5307 3.95959L12.1649 3.69388L11.7992 3.95959L11.9389 3.52969L11.5732 3.26389H12.0252L12.1649 2.83398Z" fill="white"/>
+<path d="M9.27744 1.33301L9.41711 1.763H9.86923L9.50347 2.02871L9.64315 2.4587L9.27744 2.19298L8.91164 2.4587L9.0514 2.02871L8.68561 1.763H9.13772L9.27744 1.33301Z" fill="white"/>
+<path d="M10.7195 1.33301L10.8592 1.763H11.3113L10.9456 2.02871L11.0853 2.4587L10.7195 2.19298L10.3537 2.4587L10.4935 2.02871L10.1277 1.763H10.5798L10.7195 1.33301Z" fill="white"/>
+<path d="M12.1649 1.33301L12.3046 1.763H12.7567L12.391 2.02871L12.5307 2.4587L12.1649 2.19298L11.7992 2.4587L11.9389 2.02871L11.5732 1.763H12.0252L12.1649 1.33301Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_333_23284">
+<rect width="32" height="24" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/BaseBreadCrumbs/BaseBreadCrumbs.vue

@@ -0,0 +1,142 @@
+<template>
+  <nav class="base-breadcrumbs" :class="classList">
+    <ul class="base-breadcrumbs__list">
+      <li
+          v-for="(crumb, index) in displayedCrumbs"
+          :key="index"
+          class="base-breadcrumbs__item"
+      >
+        <span v-if="crumb?.isEllipsis" class="base-breadcrumbs__ellipsis">
+          ...
+        </span>
+
+        <component
+            v-else-if="Number(index) < displayedCrumbs.length - 1 && crumb?.to"
+            :is="linkComponent"
+            :to="crumb.to"
+            :href="crumb.to"
+            class="base-breadcrumbs__link"
+        >
+          {{ crumb.label }}
+        </component>
+
+        <span v-else class="base-breadcrumbs__current">
+          {{ crumb?.label }}
+        </span>
+
+        <span
+            v-if="index < displayedCrumbs.length - 1"
+            class="base-breadcrumbs__separator"
+        >
+          /
+        </span>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { IBaseBreadCrumbProps } from '../../types/breadcrumbs';
+import { useKitSize } from '../../composables/kit/size';
+import { computed, getCurrentInstance } from 'vue';
+
+const props = withDefaults(defineProps<IBaseBreadCrumbProps>(), {
+  size: 'medium',
+});
+
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [sizeClassList.value]);
+
+const displayedCrumbs = computed<IBaseBreadCrumbProps['crumbs']>(() => {
+  const maxCrumbs = 5;
+  if (props.crumbs.length <= maxCrumbs) {
+    return props.crumbs;
+  }
+
+  return [
+    props.crumbs[0],
+    { label: '...', isEllipsis: true },
+    ...props.crumbs.slice(-4),
+  ];
+});
+
+const linkComponent = computed(() => {
+  const instance = getCurrentInstance();
+  const hasRouterLink = instance?.appContext.components['RouterLink'] || false;
+  return hasRouterLink ? 'router-link' : 'a';
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-breadcrumbs {
+  $breadcrumbs: &;
+
+  &__list {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+  }
+
+  &__link {
+    color: var(--secondary-text-link-default-focus);
+    text-decoration: none;
+    transition: color 0.3s ease;
+
+    @include hover {
+      color: var(--secondary-text-link-hover);
+    }
+
+    @include pressed {
+      color: var(--secondary-text-link-pressed);
+    }
+  }
+
+  &__current {
+    color: var(--primary-text-tertiary);
+  }
+
+  &__ellipsis {
+    color: var(--primary-text-tertiary);
+  }
+
+  &__separator {
+    margin: 0 var(--spacing-xs);
+    color: var(--primary-text-quaternary);
+  }
+
+  &.--small-size {
+    height: 18px;
+
+    #{$breadcrumbs} {
+      &__link,
+      &__current,
+      &__ellipsis {
+        font: var(--typography-text-xs-regular);
+      }
+    }
+  }
+
+  &.--medium-size {
+    height: 20px;
+
+    #{$breadcrumbs} {
+      &__link,
+      &__current,
+      &__ellipsis {
+        font: var(--typography-text-s-regular);
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseBreadCrumbs/README.md

@@ -0,0 +1,49 @@
+Компонент `BaseBreadcrumbs` отображает навигационные "хлебные крошки". Поддерживает интеграцию с `vue-router` для навигации, но может работать и без него, используя обычные ссылки `<a>`.
+
+### Шаблон:
+- **Основной элемент** — это контейнер `<nav>`, который содержит список `<ul>`. Каждый элемент в списке (`<li>`) представляет собой хлебную крошку.
+- Если элемент крошки является многоточием (`...`), то он отображается через `span` с классом `base-breadcrumbs__ellipsis`.
+- Если крошка имеет свойство `to` и не является последним элементом, она становится ссылкой (`router-link`) или если в проекте не установлен vue-router, то используется тэг `a`, которая ведет на указанный путь.
+- Если крошка — последняя, то она отображается как текст без ссылки.
+- После каждой крошки, кроме последней, добавляется разделитель ("/"), чтобы показать визуальное разделение между элементами.
+
+### Скрипт:
+- **Props**: Компонент принимает один проп — `crumbs`, который представляет собой массив объектов, содержащих информацию о каждой крошке (например, метка и путь).
+- **Composables**:
+  - `useKitSize`: Этот composable используется для вычисления нужных классов в зависимости от размера компонента (например, `small`, `medium`).
+- **Вычисляемые свойства**:
+  - `classList`: Содержит список классов для управления размерами, полученный из composable.
+  - `displayedCrumbs`: Это вычисляемое свойство ограничивает количество отображаемых крошек. Если крошек больше 5, то показывается первая крошка, многоточие и последние 4 крошки.
+
+### Стили:
+- **Основной контейнер** имеет список с классом `base-breadcrumbs__list`, который отображает крошки горизонтально с помощью `flex`.
+- Каждый элемент списка (`li`) отображается как флекс-контейнер, что позволяет правильно выравнивать содержимое.
+- Крошки, которые являются ссылками, имеют стили для обычного состояния, наведения и нажатия.
+- Для каждого размера (`small`, `medium`) предусмотрены свои стили, включая размеры шрифтов.
+
+### Использование:
+Чтобы использовать компонент, нужно передать в него массив крошек через проп `crumbs`. Каждая крошка может содержать следующие свойства:
+- `label`: текст, который будет отображаться на крошке.
+- `to`: путь для `router-link` или `a` (опционально).
+- `isEllipsis`: если нужно показать многоточие, передайте это свойство.
+
+Пример использования:
+
+```vue
+<BaseBreadcrumbs :crumbs="crumbs" size="medium" />
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const crumbs = ref([
+  { label: 'Home', to: '/' },
+  { label: 'Products', to: '/products' },
+  { label: 'Electronics', to: '/products/electronics' },
+  { label: 'Smartphones', to: '/products/electronics/smartphones' },
+  { label: 'iPhone 12', to: '/products/electronics/smartphones/iphone-12' },
+]);
+</script>
+```
+
+### Возможные улучшения:
+- **Параметр для ограничения количества крошек**: Сейчас ограничение на количество крошек жестко прописано в коде (5). Можно сделать это настройкой пропса, чтобы компонент был более гибким.

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>