plugin-ui-for-kzt 0.0.21 → 0.0.23

package/dist/index.js.LICENSE.txt

@@ -1 +1,16 @@
 /*! #__NO_SIDE_EFFECTS__ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */

package/example/App.vue

@@ -1,43 +1,49 @@
 <template>
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
-    <section>
-      <base-segmented-buttons
-        v-model="currentSlide"
-        :options="options"
-        size="extra-small"
-      />
-      <br/>
-      <base-segmented-buttons
-        v-model="currentSlide"
-        :options="options"
-        size="small"
-      />
-      <br/>
-      <base-segmented-buttons
-        v-model="currentSlide"
-        :options="options"
-        size="medium"
-      />
-      <br/>
-      <base-segmented-buttons
-        v-model="currentSlide"
-        :options="options"
-        size="large"
-      />
+    <section style="display: flex; flex-direction: column; gap: 10px;">
+    <base-upload :enableCrop="true" :crop-texts="{ cancel: 'Cancel', confirm: 'Apply' }" :accepted-formats="accept" :on-update:files="onFilesUpdate" />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, markRaw } from 'vue';
+import TestImage from './TestImage.vue';
 
-const options = [
-  { value: '0', label: 'Компоненты', disabled: true },
-  { value: '1', label: 'Композиции' },
-  { value: '2', label: 'Стили' },
-];
+const accept = ['.png', '.jpg', '.jpeg', '.pdf', '.doc', '.docx'];
 
-const currentSlide = ref('0');
+const uploadedFiles = ref<{ name: string; size: number; file: File }[]>([]);
+
+const onFilesUpdate = (files: typeof uploadedFiles.value) => {
+  uploadedFiles.value = files;
+};
+
+const activeTab = ref(2);
+const options = ref([
+  {
+    title: 'title 1',
+    id: 1,
+    icon: markRaw(TestImage),
+    disabled: true,
+  },
+  {
+    title: 'title 2',
+    id: 2,
+    icon: markRaw(TestImage),
+  },
+  {
+    title: 'title 4',
+    id: 4,
+  },
+  {
+    title: 'title 5',
+    id: 5,
+  },
+  {
+    title: 'title 6',
+    id: 6,
+  },
+])
 </script>
 
 <style lang="scss" scoped>

package/example/TestImage.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.7999 2.20999C15.3899 1.79999 14.6799 2.07999 14.6799 2.64999V6.13999C14.6799 7.59999 15.9199 8.80999 17.4299 8.80999C18.3799 8.81999 19.6999 8.81999 20.8299 8.81999C21.3999 8.81999 21.6999 8.14999 21.2999 7.74999C19.8599 6.29999 17.2799 3.68999 15.7999 2.20999Z" fill="currentColor"/>
+        <path d="M20.5 10.19H17.61C15.24 10.19 13.31 8.26 13.31 5.89V3C13.31 2.45 12.86 2 12.31 2H8.07C4.99 2 2.5 4 2.5 7.57V16.43C2.5 20 4.99 22 8.07 22H15.93C19.01 22 21.5 20 21.5 16.43V11.19C21.5 10.64 21.05 10.19 20.5 10.19ZM11.5 17.75H7.5C7.09 17.75 6.75 17.41 6.75 17C6.75 16.59 7.09 16.25 7.5 16.25H11.5C11.91 16.25 12.25 16.59 12.25 17C12.25 17.41 11.91 17.75 11.5 17.75ZM13.5 13.75H7.5C7.09 13.75 6.75 13.41 6.75 13C6.75 12.59 7.09 12.25 7.5 12.25H13.5C13.91 12.25 14.25 12.59 14.25 13C14.25 13.41 13.91 13.75 13.5 13.75Z" fill="currentColor"/>
+    </svg>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
     "maska": "^3.1.1",
     "pinia": "^2.3.1",
     "vue": "^3.0.0",
+    "vue-advanced-cropper": "^2.8.9",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   }
 }

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -4,29 +4,25 @@
         :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 class="base-checkbox__input-wrapper">
+                <input
+                    v-model="model"
+                    v-bind="inputAttrs"
+                    type="checkbox"
+                    class="base-checkbox__input"
                 />
+                <div class="base-checkbox__icon-wrapper">
+                    <base-icon
+                        class="base-checkbox__icon"
+                        name="checkbox"
+                        size="custom"
+                    />
+                </div>
             </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>
+                <span v-if="label" class="base-checkbox__label">{{ label }}</span>
+                <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
+            </div>
         </div>
     </div>
 </template>
@@ -39,42 +35,42 @@ import { useAttrs, computed } from 'vue';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<IBaseRadioProps>(), {
-  size: 'medium',
+    size: 'medium',
 });
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
+    (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),
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
 });
 
 const attrs = useAttrs();
 
 const inputAttrs = computed(() => {
-  return {
-    ...attrs,
-    ...stateAttrs.value,
-    id: props.id,
-  };
+    return {
+        ...attrs,
+        ...stateAttrs.value,
+        id: props.id,
+    };
 });
 
 function handleToggle() {
-  model.value = !model.value;
+    model.value = !model.value;
 }
 
 const classList = computed(() => [
-  sizeClassList.value,
-  stateClassList.value,
-  {
-    '--is-active': model.value,
-    '--is-readonly': props.readonly,
-  },
+    sizeClassList.value,
+    stateClassList.value,
+    {
+        '--is-active': model.value,
+        '--is-readonly': props.readonly,
+    },
 ]);
 </script>
 
@@ -85,8 +81,6 @@ const classList = computed(() => [
 .base-checkbox {
     $item: &;
 
-    --icon-size: 18px;
-
     &__wrapper {
         display: flex;
         column-gap: 10px;
@@ -99,31 +93,36 @@ const classList = computed(() => [
         pointer-events: none;
     }
 
-    &.--medium-size {
+    &.--small-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-m);
+                column-gap: var(--spacing-s);
             }
 
             &__label {
-                font: var(--typography-text-m-medium);
+                font: var(--typography-text-s-medium);
             }
 
             &__sublabel {
-                font: var(--typography-text-s-regular);
+                font: var(--typography-text-xs-regular);
             }
 
             &__icon-wrapper {
-                width: 32px;
-                height: 32px;
+                width: 20px;
+                height: 20px;
+            }
+
+            &__icon {
+                width: 15px;
+                height: 15px;
             }
         }
     }
 
-    &.--small-size {
+    &.--medium-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-s);
+                column-gap: var(--spacing-m);
             }
 
             &__label {
@@ -138,6 +137,37 @@ const classList = computed(() => [
                 width: 24px;
                 height: 24px;
             }
+
+            &__icon {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-l);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__icon-wrapper {
+                width: 32px;
+                height: 32px;
+            }
+
+            &__icon {
+                width: 22.4px;
+                height: 22.4px;
+            }
         }
     }
 

package/src/components/BaseField/BaseField.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="base-field" :class="classList">
+        <label class="base-field__label" :for="id">
+            <span v-if="label" class="base-field__label-text">{{ label }}</span>
+            <div class="base-field__wrapper" :class="{ 'base-field__wrapper--focusable': focusable}" :tabindex="tabIndex">
+                <slot :data="componentAttrs" />
+            </div>
+            <transition name="error">
+                <div 
+                    v-if="(error && typeof error === 'string') || hint" 
+                    class="base-field__hint"
+                    aria-live="polite"
+                >
+                    {{ error || hint }}
+                </div>
+            </transition>
+        </label>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { useKitSize } from '../../composables/kit/size';
+import { useKitState } from '../../composables/kit/state';
+
+import type { TFieldProps } from '../../types/field';
+
+interface IDefaultSlotProps {
+    id: string;
+    error?: string;
+    size?: string;
+    focusable?: boolean;
+}
+
+const props = withDefaults(defineProps<TFieldProps>(), {
+    size: 'medium',
+    id: '',
+    label: '',
+    hint: '',
+    error: '',
+    focusable: true,
+    tabIndex: 0,
+});
+
+defineEmits<{
+    (event: 'update:modelValue', value: string): void;
+    (event: 'error', value: string): void;
+}>();
+
+const attrs = useAttrs();
+const { stateAttrs } = useKitState(props);
+const { sizeClassList } = useKitSize(props);
+
+const componentAttrs = computed<IDefaultSlotProps>(() => ({
+    ...(attrs || {}),
+    ...(stateAttrs.value || {}),
+    id: props.id,
+    error: props.error,
+    size: props.size,
+}));
+
+const classList = computed(() => [
+    ...sizeClassList.value,
+    { '--is-error': props.error && typeof props.error === 'string' },
+]);
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-field {
+    width: 100%;
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: relative;
+        transition: all var(--transition);
+
+        &--focusable {
+            @include focused {
+                border: 1px solid var(--primary-blue-500);
+                outline: 4px solid var(--effects-primary-focus);
+            }
+        }
+    }
+
+    &__label {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        width: 100%;
+    }
+
+    &__label-text {
+        color: var(--primary-text-primary);
+    }
+
+    &__hint {
+        color: var(--primary-text-secondary);
+        overflow: hidden;
+        max-height: 100px;
+        transition: all 0.3s ease;
+    }
+
+    &.--is-error {
+        .base-field__wrapper {
+            &--focusable {
+                @include focused {
+                    border: none;
+                    outline: 4px solid var(--effects-error-focus);
+                }
+            }
+        }
+
+        .base-field__hint {
+            color: var(--error-red);
+        }
+    }
+
+    &.--small-size {
+        .base-field__wrapper {
+            border-radius: 10px;
+        }
+
+        .base-field__label-text {
+            font: var(--typography-text-s-medium);
+        }
+
+        .base-field__hint {
+            font: var(--typography-text-s-regular);
+        }
+    }
+
+    &.--medium-size {
+        .base-field__wrapper {
+            border-radius: 12px;
+        }
+
+        .base-field__label-text {
+            font: var(--typography-text-s-medium);
+        }
+
+        .base-field__hint {
+            font: var(--typography-text-s-regular);
+        }
+    }
+
+    &.--large-size {
+        .base-field__wrapper {
+            border-radius: 12px;
+        }
+
+        .base-field__label-text {
+            font: var(--typography-text-m-medium);
+        }
+
+        .base-field__hint {
+            font: var(--typography-text-m-regular);
+        }
+    }
+}
+
+.error-enter-active,
+.error-leave-active {
+    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
+}
+
+.error-enter-from,
+.error-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+    max-height: 0;
+}
+
+.error-enter-to,
+.error-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 100px;
+}
+</style>

package/src/components/BaseField/README.md

@@ -0,0 +1,85 @@
+BaseField Component
+BaseField — это универсальный компонент-обертка для полей ввода, который предоставляет стилизованную обертку, метку (label), подсказку (hint) и обработку ошибок. Компонент предназначен для использования в связке с другими компонентами ввода, такими как BaseInput, через механизм слотов Vue.
+
+
+Использование
+Компонент BaseField используется как обертка для других компонентов ввода, таких как BaseInput. Он предоставляет метку, подсказку и стили для обработки ошибок.
+Пример использования
+<template>
+  <BaseField
+    id="test-input"
+    label="Test Input"
+    hint="Enter your text"
+    :error="errorValue"
+    size="medium"
+  >
+    <BaseInput
+      v-model="inputValue"
+      type="text"
+      placeholder="Type here"
+      id="test-input"
+    />
+  </BaseField>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseField from './BaseField.vue';
+import BaseInput from './BaseInput.vue';
+
+const inputValue = ref('');
+const errorValue = ref('Input must be at least 3 characters long');
+</script>
+
+
+События
+
+update:modelValue
+value: string
+Эмитируется при обновлении значения поля ввода.
+
+error
+value: string
+Эмитируется при возникновении ошибки в поле ввода.
+
+
+Слоты
+
+default
+Основной слот для размещения компонента ввода (например, BaseInput).
+
+Слот передает объект с пропсами, включая componentAttrs, который содержит объединенные атрибуты из useAttrs и stateAttrs.
+
+
+Стили
+Компонент использует SCSS для стилизации. Основные классы:
+
+.base-field: Основной контейнер компонента.
+.base-field__label: Контейнер для метки и поля ввода.
+.base-field__label-text: Текст метки.
+.base-field__wrapper: Обертка для содержимого слота.
+.base-field__hint: Текст подсказки или ошибки.
+.--is-error: Модификатор для отображения состояния ошибки.
+.--small-size, .--medium-size, .--large-size: Модификаторы для разных размеров.
+
+
+Типизация
+Компонент использует TypeScript и ожидает тип TFieldProps из файла types/field. Пример структуры:
+export interface TFieldProps {
+  id?: string;
+  label?: string;
+  hint?: string;
+  error?: string | boolean;
+  size?: string;
+  focusable?: boolean;
+  tabIndex?: number;
+}
+
+Примечания
+
+Если focusable равно false, атрибут tabindex не применяется, и обертка не будет фокусируемой.
+
+Ограничения
+
+Компонент предполагает наличие вложенного компонента ввода в слоте (например, BaseInput). Без содержимого слота функциональность ограничена.
+Стили и размеры зависят от внешних переменных и composable-функций, которые должны быть настроены в проекте.