plugin-ui-for-kzt 0.0.30 → 0.0.32

package/example/App.vue

@@ -3,281 +3,73 @@
     <h1>Plugin UI KZT - Компоненты</h1>
 
     <section>
-      <h2>BaseUpload с drag & drop</h2>
-      <div style="display: flex; gap: 20px;">
-        <div style="width: 400px;">
-          <h3>Множественная загрузка (multiple: true)</h3>
-          <BaseUpload
-            :accepted-formats="['.pdf', '.docx', '.jpeg', '.jpg', '.png', '.svg']"
-            :multiple="true"
-          >
-            <template #title>
-              Перетащите файлы сюда или кликните для выбора
-            </template>
-            <template #description>
-              Поддерживаемые форматы: PDF, DOCX, JPEG, JPG, PNG, SVG до 25 MB
-            </template>
-          </BaseUpload>
-        </div>
-        
-        <div style="width: 400px;">
-          <h3>Одиночная загрузка (multiple: false)</h3>
-          <BaseUpload
-            :accepted-formats="['.pdf', '.docx', '.jpeg', '.jpg', '.png', '.svg']"
-            :multiple="false"
-          >
-            <template #title>
-              Перетащите файл сюда или кликните для выбора
-            </template>
-            <template #description>
-              Только один файл: PDF, DOCX, JPEG, JPG, PNG, SVG до 25 MB
-            </template>
-          </BaseUpload>
-        </div>
-      </div>
-    </section>
-
-    <section>
-      <h2>Сравнение режимов</h2>
-      <div style="display: flex; gap: 20px;">
-        <div style="width: 300px;">
-          <h3>Дефолтный режим</h3>
-          <BaseSelect
-            id="select4"
-            :options="options"
-            :placeholder="'Выберите опцию'"
-            :label="'Опция'"
-            :searchable="false"
-          />
-        </div>
-        <div style="width: 300px;">
-          <h3>Поисковый режим (новое поведение)</h3>
-          <BaseSelect
-            id="select5"
-            :options="searchableOptions"
-            :placeholder="'Выберите страну'"
-            :label="'Страна'"
-            :searchable="true"
-            :error="errorMessage"
-            @error="handleSelectError"
-          >
-            <template #empty>
-              <div>
-                Нет стран
-              </div>
-            </template>
-          </BaseSelect>
-          <p style="font-size: 12px; color: #666; margin-top: 8px;">
-            • Клик по стрелке открывает dropdown<br/>
-            • При точном совпадении элемент выбирается автоматически<br/>
-            • При выборе элемента иконка меняется на крестик<br/>
-            • Клик по крестику очищает выбор<br/>
-            • Клик по инпуту не очищает выбор<br/>
-            • При отсутствии совпадений эмитится ошибка
-          </p>
-          <div v-if="errorMessage" style="color: red; font-size: 12px; margin-top: 4px;">
-            Элемент не найден
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section>
-      <h2>Тест тултипов (несколько экземпляров)</h2>
-      <div style="display: flex; gap: 20px; align-items: center;">
-        <BaseTooltip
-          id="tooltip1"
-          title="Первый тултип"
-          content="Это первый тултип на странице"
-          trigger="click"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 1 (click)
-            </button>
-          </template>
-        </BaseTooltip>
-
-        <BaseTooltip
-          id="tooltip2"
-          title="Второй тултип"
-          content="Это второй тултип на странице"
-          trigger="click"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 2 (click)
-            </button>
-          </template>
-        </BaseTooltip>
-
-        <BaseTooltip
-          id="tooltip3"
-          title="Третий тултип"
-          content="Это третий тултип на странице"
-          trigger="hover"
-        >
-          <template #trigger>
-            <button style="padding: 8px 16px; border: 1px solid #ccc; background: white; cursor: pointer;">
-              Тултип 3 (hover)
-            </button>
-          </template>
-        </BaseTooltip>
-      </div>
-    </section>
-
-    <section>
-      <h2>BaseTable - Обычная таблица</h2>
-      <BaseTable
-        :columns="tableColumns"
-        :data="tableData"
-        :show-row-selection="true"
-        :show-actions="true"
-        :actions="tableActions"
-      />
-    </section>
-
-    <section>
-      <h2>BaseTable - С пагинацией</h2>
-      <BaseTable
-        :columns="tableColumns"
-        :data="tableData"
-        :pagination="{ perPage: 5, currentPage: 1 }"
-        :show-row-selection="true"
-        :show-actions="true"
-        :actions="tableActions"
-        @page-change="handlePageChange"
-      />
-    </section>
-
-    <section>
-      <h2>BaseTable - С виртуальным скроллом (высота: 400px)</h2>
-      <p style="font-size: 14px; color: #666; margin-bottom: 12px;">
-        • Колонки ID, Имя, Email, Статус теперь имеют заданные ширины: 80px, 200px, 1fr, 120px<br/>
-        • Ширины колонок в thead и виртуальном скролле полностью синхронизированы<br/>
-        • Можно использовать px, fr, auto или числовые значения для ширины<br/>
-        • Автоматическая компенсация ширины скроллбара - колонки не разъезжаются<br/>
-        • Настраиваемое выравнивание: ID - center, Имя - left, Email - left, Статус - right
-      </p>
-      <BaseTable
-        :columns="tableColumns"
-        :data="largeTableData"
-        :virtual-scroll="true"
-        :virtual-scroll-threshold="50"
-        :virtual-scroll-height="400"
-        :show-row-selection="true"
-
-
-        @scroll="handleScroll"
-        @scroll-end="handleScrollEnd"
+    <BaseInputCalendar
+      id="input-calendar"
+      v-model="demoValues.calendar"
+      placeholder="Доступно"
+      :min-date="new Date('2025-11-23')"
+      :max-date="new Date()"
+    />
+
+      <BaseTextarea
+        id="textarea"
+        v-model="demoValues.textarea"
+        placeholder="Введите текст..."
+        label="Текстовое поле"
+        readonly
       />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import BaseSelect from '../src/components/BaseSelect/BaseSelect.vue'
-import BaseTooltip from '../src/components/BaseTooltip/BaseTooltip.vue'
-import BaseUpload from '../src/components/BaseUpload/BaseUpload.vue'
-import BaseTable from '../src/components/BaseTable/BaseTable.vue'
-
-const options = ref([
-  { id: 1, name: ' Option 1 Option 1 Option 1Option 1 Option 1Option 1' },
-  { id: 2, name: 'Option 2 Option 2 Option 2Option 2 Option 2Option 2' },
-  { id: 3, name: 'Option 3 Option 3 Option 3Option 3 Option 3Option 3' },
-])
-
-const searchableOptions = ref([
-  { id: 'kz', name: 'Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан Казахстан' },
-  { id: 'ru', name: 'Россия' },
-  { id: 'kg', name: 'Кыргызстан' },
-  { id: 'uz', name: 'Узбекистан' },
-  { id: 'tj', name: 'Таджикистан' },
-  { id: 'tm', name: 'Туркменистан' },
-  { id: 'af', name: 'Афганистан' },
-  { id: 'mn', name: 'Монголия' },
-  { id: 'cn', name: 'Китай' },
-  { id: 'ir', name: 'Иран' },
-  { id: 'tr', name: 'Турция' },
-  { id: 'ge', name: 'Грузия' },
-  { id: 'am', name: 'Армения' },
-  { id: 'az', name: 'Азербайджан' },
-  { id: 'by', name: 'Беларусь' },
-  { id: 'ua', name: 'Украина' },
-  { id: 'md', name: 'Молдова' },
-  { id: 'lt', name: 'Литва' },
-  { id: 'lv', name: 'Латвия' },
-  { id: 'ee', name: 'Эстония' },
-])
-
-const errorMessage = ref(false)
-
-function handleSelectError() {
-  errorMessage.value = true
-}
-
-// Данные для таблицы
-const tableColumns = ref([
-  { key: 'id', label: 'ID', sortable: true, width: '80px', align: 'center' as const },
-  { key: 'name', label: 'Имя', sortable: true, width: '200px', align: 'left' as const },
-  { key: 'email', label: 'Email', sortable: true, width: '1fr', align: 'left' as const },
-  { key: 'status', label: 'Статус', sortable: true, width: '120px', align: 'right' as const }
-])
-
-const tableData = ref([
-  { id: 1, name: 'Иван Иванов', email: 'ivan@example.com', status: 'Активен' },
-  { id: 2, name: 'Петр Петров', email: 'petr@example.com', status: 'Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен Неактивен' },
-  { id: 3, name: 'Мария Сидорова', email: 'maria@example.com', status: 'Активен' },
-  { id: 4, name: 'Анна Козлова', email: 'anna@example.com', status: 'Активен' },
-  { id: 5, name: 'Сергей Волков', email: 'sergey@example.com', status: 'Неактивен' },
-  { id: 6, name: 'Елена Морозова', email: 'elena@example.com', status: 'Активен' },
-  { id: 7, name: 'Дмитрий Лебедев', email: 'dmitry@example.com', status: 'Активен' },
-  { id: 8, name: 'Ольга Новикова', email: 'olga@example.com', status: 'Неактивен' }
-])
-
-// Большой набор данных для виртуального скролла
-const largeTableData = computed(() => {
-  const data: any[] = []
-  for (let i = 1; i <= 100; i++) {
-    data.push({
-      id: i,
-      name: `Пользователь ${i}`,
-      email: `user${i}@example.com`,
-      status: i % 3 === 0 ? 'Неактивен Неактивен Неактивен Неактивен' : 'Активен'
-    })
-  }
-  console.log("🚀 ~ data:", data)
-  return data
-})
-
-const tableActions = ref([
-  {
-    key: 'edit',
-    icon: 'edit-table',
-    handler: (row: any) => {
-      console.log('Редактировать:', row)
-    }
-  },
-  {
-    key: 'delete',
-    icon: 'trash-table',
-    handler: (row: any) => {
-      console.log('Удалить:', row)
-    }
-  }
-])
-
-const handlePageChange = (page: number) => {
-  console.log('Смена страницы:', page)
-}
-
-const handleScroll = (payload: any) => {
-  console.log('Скролл:', payload)
-}
-
-const handleScrollEnd = () => {
-  console.log('Достигнут конец списка - можно подгрузить еще данные')
-}
+import { ref } from 'vue';
+import { useModal } from '../src/composables/useModal';
+import BaseTextarea from '../src/components/BaseTextarea/BaseTextarea.vue';
+import BaseSwiper from '../src/components/BaseSwiper/BaseSwiper.vue';
+import BaseInputCalendar from '../src/components/BaseInputCalendar/BaseInputCalendar.vue';
+import BaseInputCurrency from '../src/components/BaseInputCurrency/BaseInputCurrency.vue';
+import BaseButton from '../src/components/BaseButton/BaseButton.vue';
+import MyCustomModal from './MyCustomModal.vue';
+
+const { open } = useModal();
+
+const openModal = () => {
+  open('modal-example', {
+    closable: true,
+  }, MyCustomModal);
+};
+const currencyOptions = [
+  { id: '1', name: 'USD', value: 'USD' as const, mask: '# #### ### 0.##', symbol: '$' },
+  { id: '2', name: 'RUB', value: 'RUB' as const, mask: '# ##0.##', symbol: '₽' },
+  { id: '3', name: 'KGS', value: 'KGS' as const, mask: '# ##0.##', symbol: '⃀' },
+  { id: '4', name: 'UZS', value: 'UZS' as const, mask: '# ##0.##', symbol: 'сў' },
+];
+
+const iconOptions = [
+  { id: 1, name: 'Пользователь', icon: 'email-sms' },
+  { id: 2, name: 'Настройки', icon: 'document-text' },
+  { id: 3, name: 'Файлы', icon: 'gallery' },
+  { id: 4, name: 'Сообщения', icon: 'email-sms' },
+];
+
+const demoValues = ref({
+  icons: iconOptions[0].id,
+  textarea: 'Тестовый текст',
+  calendar: new Date(),
+  calendarDisabled: new Date(),
+  calendarReadonly: new Date(),
+  currency: '0.00',
+  currency2: '0.00',
+  phone: '0777777777',
+});
+
+
+
+const images = ref<string[]>([
+  'https://picsum.photos/seed/1/800/400',
+  'https://picsum.photos/seed/2/800/400',
+  'https://picsum.photos/seed/3/800/400',
+]);
 </script>
 
 <style lang="scss" scoped>

package/example/MyCustomModal.vue

@@ -25,6 +25,7 @@ import type { ICoreModalProps } from '../src/types/modal';
 const props = defineProps<{
   modalProps: ICoreModalProps;
 }>();
+console.log("🚀 ~ props:", props)
 
 const emit = defineEmits(['close']);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/assets/icons/calendar.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 <path d="M8 2V5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M16 2V5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M3.5 9.08984H20.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,4 +9,4 @@
 <path d="M11.9955 16.7002H12.0045" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.29431 13.7002H8.30329" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.29431 16.7002H8.30329" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</svg>

package/src/components/BaseCalendar/BaseCalendar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="base-calendar" :class="classList">
-    <vue-date-picker
+      <vue-date-picker
+        :disabled="disabled || readonly"
         v-model="computedModelValue"
         :range="range"
         locale="ru"
@@ -8,7 +9,8 @@
         :inline="inline"
         :text-input="textInputOptions"
         :hide-navigation="['time']"
-        :min-date="minDate || undefined"
+        :min-date="minDateComputed"
+        :max-date="maxDateComputed"
         :enable-time-picker="false"
         :format="format"
         month-name-format="long"
@@ -29,6 +31,7 @@ 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'
+import { useKitState } from '../../composables/kit/state'
 
 interface DpInputSlotProps {
   value: string
@@ -37,8 +40,10 @@ interface DpInputSlotProps {
 const props = withDefaults(defineProps<TCoreCalendarProps>(), {
   range: false,
   minDate: null,
+  maxDate: null,
   size: 'medium',
   inline: false,
+  disabled: false,
 });
 
 const emit: (event: 'update:modelValue', value: DateRange) => void = defineEmits();
@@ -46,8 +51,8 @@ const emit: (event: 'update:modelValue', value: DateRange) => void = defineEmits
 const computedModelValue = computed<DateRange>({
   get: () => props.modelValue ?? null,
   set: (value: DateRange) => {
+    if (props.disabled || props.readonly) return;
     emit('update:modelValue', value);
-    console.log(value);
   },
 });
 
@@ -58,14 +63,19 @@ const textInputOptions: { format: string } = {
 const dayNames: string[] = ['П', 'В', 'С', 'Ч', 'П', 'С', 'В'];
 
 const { sizeClassList } = useKitSize(props);
+const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
   sizeClassList.value,
+  stateClassList.value,
   {
     '--is-readonly': props.readonly,
   },
 ]);
 
+const minDateComputed = computed(() => props.minDate || undefined);
+const maxDateComputed = computed(() => props.maxDate || undefined);
+
 function format(date: Date | string | (Date | string)[] | null): string {
   if (!date) return '';
 
@@ -230,5 +240,20 @@ function getDayClass(date: Date): string {
             color: var(--error-red);
         }
     }
+
+    &.--is-disabled,
+    &.--is-readonly {
+        pointer-events: none;
+        opacity: 0.6;
+
+        :deep(.dp__input) {
+            pointer-events: none;
+            cursor: not-allowed;
+        }
+
+        :deep(.dp--menu-wrapper) {
+            pointer-events: none;
+        }
+    }
 }
 </style>

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -33,18 +33,9 @@
 import { computed } from 'vue';
 import BaseButton from '../BaseButton/BaseButton.vue';
 import type { IDefaultPagesProps } from '../../types/default-pages';
-import techWorkImage from '../../assets/tech-work.png';
-import error404Image from '../../assets/404.png';
 
 const props = defineProps<IDefaultPagesProps>(); 
 
-const imagePath = computed(() => {
-  const images:Record<string, any> = {
-    'tech-work': techWorkImage,
-    '404': error404Image
-  };
-  return images[props.type] || '';
-});
 const imageContainer = computed<string[]>(()=> [
     `base-default-pages__image-container--${props.type}`
 ])

package/src/components/BaseIcon/BaseIcon.vue

@@ -1,6 +1,6 @@
 <template>
     <svg class="base-icon" :class="sizeClassList"  aria-hidden="true">
-      <use :xlink:href="`#${name}`" />
+      <use :href="`#${name}`" />
     </svg>
 </template>
   

package/src/components/BaseInputCalendar/BaseInputCalendar.vue

@@ -6,16 +6,20 @@
           :range="range"
           :size="size"
           :min-date="minDate"
+          :max-date="maxDate"
           :id="id"
+          :disabled="disabled"
+          :readonly="readonly"
         >
           <base-input
             v-bind="{ ...$props }"
             :model-value="formattedValue"
+            :disabled="disabled"
             @update:model-value="handleInputUpdate"
           >
-            <template #['left-icon']>
+            <template #left-icon>
               <base-icon
-                name="calendar"
+                name="calendar-icon"
                 :size="size"
                 class="base-input-calendar__icon"
               />
@@ -30,6 +34,7 @@
 import { computed, ref, watch } from 'vue';
 import BaseInput from '../BaseInput/BaseInput.vue';
 import BaseCalendar from '../BaseCalendar/BaseCalendar.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import type { DateRange, TCoreInputCalendarProps } from '../../types/calendar';
 
 const props = withDefaults(defineProps<TCoreInputCalendarProps>(), {
@@ -39,6 +44,8 @@ const props = withDefaults(defineProps<TCoreInputCalendarProps>(), {
   placeholder: '',
   range: false,
   minDate: null,
+  maxDate: null,
+  disabled: false,
 });
 
 const emit = defineEmits<{
@@ -50,8 +57,18 @@ const inputValue = ref<string>('');
 
 watch(
   () => props.modelValue,
-  (newValue) => {
-    inputValue.value = typeof newValue === 'string' ? newValue : '';
+  (newValue: string | DateRange | undefined) => {
+    if (typeof newValue === 'string') {
+      inputValue.value = newValue;
+    } else if (newValue instanceof Date) {
+      const formatted = formatDateRange(newValue);
+      inputValue.value = formatted;
+    } else if (Array.isArray(newValue) && newValue.length === 2) {
+      const formatted = formatDateRange(newValue);
+      inputValue.value = formatted;
+    } else {
+      inputValue.value = '';
+    }
   },
   { immediate: true },
 );
@@ -144,9 +161,23 @@ function formatDateRange(value: DateRange | (string | Date)[]): string {
 
 const calendarModelValue = computed<DateRange>({
   get: () => {
-    return parseDateString(props.modelValue);
+    const value = props.modelValue;
+    if (typeof value === 'string') {
+      return parseDateString(value);
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+    if (Array.isArray(value) && value.length === 2) {
+      return value as [Date, Date];
+    }
+    return null;
   },
   set: (value: DateRange) => {
+    if (props.disabled || props.readonly) {
+      return;
+    }
     const formatted = formatDateRange(value);
     inputValue.value = formatted;
     emit('update:modelValue', formatted);
@@ -158,6 +189,10 @@ const formattedValue = computed<string>(() => {
 });
 
 function handleInputUpdate(value: string) {
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  
   let filteredValue = value.replace(/[^0-9.\s-]/g, '');
 
   if (props.range) {

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

@@ -39,33 +39,44 @@ import { useKitState } from '../../composables/kit/state';
 import { useKitSize } from '../../composables/kit/size';
 import type { ICoreInputProps, IOptionsCurrency } from '../../types/input';
 
-const props = withDefaults(defineProps<ICoreInputProps>(), {
+const props = withDefaults(defineProps<ICoreInputProps & {
+    options?: IOptionsCurrency[];
+}>(), {
     size: 'medium',
     type: 'text',
     modelValue: '',
     placeholder: '0.00',
     error: '',
+    options: undefined,
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
-const optionsCurrency = ref<IOptionsCurrency[]>([
+const defaultOptions: IOptionsCurrency[] = [
     { id: '1', name: 'KZT', value: 'KZT', mask: '# ##0.##', symbol: '₸' },
     { id: '2', name: 'RUB', value: 'RUB', mask: '# ##0.##', symbol: '₽' },
     { id: '3', name: 'KGS', value: 'KGS', mask: '# ##0.##', symbol: '⃀' },
     { id: '4', name: 'UZS', value: 'UZS', mask: '# ##0.##', symbol: 'сў' },
-]);
+];
+
+const optionsCurrency = computed<IOptionsCurrency[]>(() => {
+    return props.options || defaultOptions;
+});
 
-const selectedOption = ref<IOptionsCurrency>(optionsCurrency.value[0]);
+const selectedOption = computed<IOptionsCurrency>(() => {
+    const option = optionsCurrency.value.find(opt => opt.id === selectedOptionId.value);
+    return option || optionsCurrency.value[0];
+});
 
-const selectedOptionId = ref<IOptionsCurrency['id']>(selectedOption.value.id);
+const selectedOptionId = ref<IOptionsCurrency['id']>(optionsCurrency.value[0]?.id || '');
 
-watch(selectedOptionId, (newId: IOptionsCurrency['id']) => {
-    const newOption = optionsCurrency.value.find((option: IOptionsCurrency) => option.id === newId);
-    if (newOption) {
-        selectedOption.value = newOption;
+watch(optionsCurrency, (newOptions) => {
+    if (newOptions.length > 0) {
+        if (!newOptions.find(opt => opt.id === selectedOptionId.value)) {
+            selectedOptionId.value = newOptions[0].id;
+        }
     }
-});
+}, { immediate: true });
 
 const { stateClassList, stateAttrs } = useKitState(props);
 const { sizeClassList } = useKitSize(props);