plugin-ui-for-kzt 0.0.31 → 0.0.32

package/example/App.vue

@@ -3,14 +3,73 @@
     <h1>Plugin UI KZT - Компоненты</h1>
 
     <section>
-      <h2>BaseUpload с drag & drop</h2>
-      <BaseDefaultPages  title="title" description="description" buttonText="buttonText" type="tech-work" imagePath="./tech-work.png" />
-      <BaseDefaultPages title="title" description="description" buttonText="buttonText" type="404" imagePath="./404.png" /> 
+    <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 BaseDefaultPages from '../src/components/BaseDefaultPages/BaseDefaultPages.vue' 
+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.31",
+  "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/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);

package/src/components/BaseSelect/BaseSelect.vue

@@ -8,7 +8,6 @@
         :disabled="actualDisabled"
       >
         <template #top>
-          <!-- Старый header для дефолтного поведения -->
           <div
             v-if="!searchable"
             :data-error="Boolean(error)"
@@ -19,7 +18,16 @@
               name="header"
               :value="actualOption ? [actualOption] : undefined"
             >
-              <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
+              <div 
+                v-if="actualOption?.icon && $slots.iconItem" 
+                class="base-select__header_prefix_icon"
+              >
+                <slot name="iconItem" :item="actualOption" />
+              </div>
+              <div 
+                v-else-if="$slots.headerIcon" 
+                class="base-select__header_prefix_icon"
+              >
                 <slot name="headerIcon" />
               </div>
 
@@ -100,7 +108,7 @@
                   <div class="base-select__item-wrapper">
                     <base-opened-list-item
                       v-bind="listItemAttrs(item)"
-                      :key="item.id"
+                      :key="String(item.id ?? '')"
                       :size="size"
                     >
                       <template #icon>
@@ -168,10 +176,17 @@ const displayValue = computed(() => {
 });
 
 watch(() => props.modelValue, (val) => {
-  actualValue.value = val ?? '';
+  if (val && typeof val === 'object' && 'id' in val) {
+    actualValue.value = (val as ICoreSelectOption).id as TSelectValue;
+  } else {
+    actualValue.value = val ?? '';
+  }
 }, { immediate: true });
 
 function handleInput(value: TSelectValue) {
+  if (props.readonly || props.disabled) {
+    return;
+  }
   actualValue.value = value;
   emit('update:modelValue', value);
   emit('change', value);
@@ -180,6 +195,9 @@ function handleInput(value: TSelectValue) {
 }
 
 function handleInputChange(event: Event) {
+  if (props.readonly || props.disabled) {
+    return;
+  }
   const target = event.target as HTMLInputElement;
   const inputValue = target.value;
   searchQuery.value = inputValue;
@@ -203,6 +221,9 @@ function handleInputChange(event: Event) {
 }
 
 function handleIconClick(event: Event) {
+  if (props.readonly || props.disabled) {
+    return;
+  }
   event.stopPropagation();
   if (actualOption.value) {
     handleInput('');
@@ -245,7 +266,7 @@ const { sizeClassList } = useKitSize(props);
 const { stateClassList } = useKitState(props);
 const { styleClassList } = useKitStyle(props);
 
-const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
+const listItemAttrs = computed(() => (item: ICoreSelectOption) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
   title: item.name || '',
@@ -267,7 +288,7 @@ const classList = computed(() => [
 
 defineSlots<{
   default(props: ISelectSlotProps): any;
-  iconItem(props: { item: ICoreSelectBaseProps }): any;
+  iconItem(props: { item: ICoreSelectOption }): any;
   header(props: { value: ICoreSelectProps['options'] }): any;
   headerIcon(): any;
   empty(): any;
@@ -485,10 +506,16 @@ defineSlots<{
     #{$select} {
       &__header {
         pointer-events: none;
+        cursor: default;
       }
 
       &__input {
         pointer-events: none;
+        cursor: default;
+      }
+
+      &__arrow-wrapper {
+        display: none;
       }
     }
   }

package/src/components/BaseSwiper/BaseSwiper.vue

@@ -100,15 +100,20 @@ const nextSlide = () => {
     }
 };
 
+const nextSlideCyclic = () => {
+    if (currentSlide.value >= props.images.length - 1) {
+        currentSlide.value = 0;
+    } else {
+        currentSlide.value += 1;
+    }
+};
+
 let autoplayIntervalId: ReturnType<typeof setInterval> | null = null;
 
 const startAutoplay = () => {
     if (props.autoplay && !autoplayIntervalId) {
         autoplayIntervalId = setInterval(() => {
-        nextSlide();
-        if (currentSlide.value >= props.images.length - 1) {
-            currentSlide.value = 0; // Возвращаемся к первому слайду
-        }
+            nextSlideCyclic();
         }, props.autoplayInterval);
     }
 };

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -8,6 +8,7 @@
           v-bind="stateAttrs"
           :placeholder="placeholder || ''"
           :maxlength="maxLength"
+          :readonly="readonly"
           class="base-textarea__field"
           @input="handleInput"
         />

package/src/types/calendar.d.ts

@@ -9,11 +9,14 @@ export interface IBaseCalendarProps {
   modelValue?: DateRange
   range?: boolean | RangeConfig | undefined
   minDate?: Date | null
+  maxDate?: Date | null
   readonly?: boolean
   error?: string | boolean
   inline?: boolean;
 }
 
-export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize;
+export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize & ICoreState;
 
-export type TCoreInputCalendarProps = InputProps & ICoreSize & ICoreState & IBaseCalendarProps;
+export type TCoreInputCalendarProps = Omit<InputProps, 'modelValue'> & ICoreSize & ICoreState & IBaseCalendarProps & {
+  modelValue?: string | DateRange;
+};

package/src/types/input.d.ts

@@ -26,7 +26,7 @@ export type ICoreTextareaProps = ICoreState & TTextareaProps & ICoreSize;
 export type TSelectValue = Nullable<string | number | boolean>;
 
 type TOptionPhoneCountry = 'KZ' | 'RU' | 'KG' | 'UZ';
-type TOptionCurrency = 'KZT' | 'RUB' | 'KGS' | 'UZS';
+type TOptionCurrency = 'KZT' | 'RUB' | 'KGS' | 'UZS' | string;
 export interface IOptionsSelect<T extends string> {
   id: string;
   name: string;
@@ -67,7 +67,7 @@ export interface ICoreSelectBaseProps {
 }
 
 export interface ISelectSlotProps {
-  item: ICoreSelectBaseProps;
+  item: ICoreSelectOption;
   index: number;
   active: boolean;
 }

package/webpack.config.js

@@ -61,6 +61,10 @@ module.exports = (env, argv) => {
                 extract: true,
                 spriteFilename: "sprite.svg",
                 publicPath: isProduction ? "./" : "/",
+                symbolId: (filePath) => {
+                  const fileName = path.basename(filePath, ".svg");
+                  return fileName;
+                },
               },
             },
             {