plugin-ui-for-kzt 0.0.11 → 0.0.12

package/dist/index.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! #__NO_SIDE_EFFECTS__ */

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js  --mode production",
     "dev": "webpack serve --config webpack.config.js --mode development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/src/components/BaseCalendar/BaseCalendar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="base-calendar" :class="classList">
-      <vue-date-picker
+  <div class="base-calendar" :class="classList">
+    <vue-date-picker
         v-model="computedModelValue"
         :range="range"
         locale="ru"
@@ -14,15 +14,12 @@
         :day-names="dayNames"
         :action-row="{ showPreview: false, showSelect: false, showCancel: false }"
         :day-class="getDayClass"
-      >
-        <template #dp-input="{ value, isMenuOpen }">
-          <slot
-            :value="value"
-            :is-menu-open="isMenuOpen"
-          />
-        </template>
-      </vue-date-picker>
-    </div>
+    >
+      <template #dp-input="{ value, isMenuOpen }: DpInputSlotProps">
+        <slot :value="value" :is-menu-open="isMenuOpen" />
+      </template>
+    </vue-date-picker>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -32,6 +29,10 @@ import '@vuepic/vue-datepicker/dist/main.css';
 import type { DateRange, TCoreCalendarProps } from '../../types/calendar';
 import { useKitSize } from '../../composables/kit/size'
 
+interface DpInputSlotProps {
+  value: string
+  isMenuOpen: boolean
+}
 const props = withDefaults(defineProps<TCoreCalendarProps>(), {
   range: false,
   minDate: null,

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -9,7 +9,7 @@
                 :error="error"
                 class="base-input-phone__select"
                 >
-                    <template #iconItem="{ item }">
+                    <template #iconItem="{ item }: ICoreButtonProps">
                     <base-icon
                         :name="item.icon"
                         :size="size"
@@ -39,6 +39,11 @@ import { useKitState } from '../../composables/kit/state';
 import { useKitSize } from '../../composables/kit/size';
 import type { ICoreInputProps } from '../../types/input';
 
+interface ICoreButtonProps {
+  item:{
+    icon:string
+  }
+}
 const props = withDefaults(defineProps<ICoreInputProps>(), {
     size: 'medium',
     type: 'text',

package/src/components/BaseSelect/BaseSelect.vue

@@ -1,103 +1,101 @@
 <template>
-<div class="base-select" :class="[classList]">
-
-<div class="base-select__wrapper">
-    <label v-if="label" :for="id" class="base-select__label"> {{ label }}</label>
-
-        <base-dropdown
-            v-model="dropdownVisible"
-            transition-name="top"
-            auto-close
-            :disabled="actualDisabled"
-        >
-            <template #top>
-                <div
-                    :data-error="Boolean(error)"
-                    :data-disabled="disabled"
-                    class="base-select__header"
+  <div class="base-select" :class="[classList]">
+    <div class="base-select__wrapper">
+      <label v-if="label" :for="id" class="base-select__label">{{ label }}</label>
+
+      <base-dropdown
+        v-model="dropdownVisible"
+        transition-name="top"
+        auto-close
+        :disabled="actualDisabled"
+      >
+        <template #top>
+          <div
+            :data-error="Boolean(error)"
+            :data-disabled="disabled"
+            class="base-select__header"
+          >
+            <slot
+              name="header"
+              :value="actualOption"
+            >
+              <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
+                <slot name="headerIcon" />
+              </div>
+
+              <div
+                v-if="actualOption"
+                class="base-select__header_value"
+              >
+                {{ actualOption.name }}
+              </div>
+
+              <div
+                v-else
+                class="base-select__placeholder"
+              >
+                {{ placeholder }}
+              </div>
+            </slot>
+
+            <div
+              v-if="!readonly"
+              class="base-select__arrow-wrapper"
+            >
+              <div class="base-select__arrow">
+                <base-icon
+                  name="arrow-down"
+                  :size="size"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template #dropdown>
+          <div
+            v-if="(options ?? []).length"
+            class="base-select__dropdown"
+          >
+            <dynamic-scroller
+              :items="options as ICoreSelectBaseProps[]"
+              :min-item-size="36"
+              key-field="id"
+              class="base-select__list"
+            >
+            <template #default="{ item, index, active } : SlotProps">
+              <dynamic-scroller-item
+                  :item="item"
+                  :active="active"
+                  :size-dependencies="[item.name]"
+                  :data-index="index"
                 >
-                    <slot
-                        name="header"
-                        :value="actualOption"
+                  <div class="base-select__item-wrapper">
+                    <base-opened-list-item
+                      v-bind="listItemAttrs(item)"
+                      :key="item.id"
+                      :size="size"
                     >
-                    <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
-                        <slot name="headerIcon" />
-                    </div>
-
-                        <div
-                            v-if="actualOption"
-                            class="base-select__header_value"
-                        >
-                            {{ actualOption.name }}
+                      <template #icon>
+                        <div v-if="$slots.iconItem">
+                          <slot name="iconItem" :item="item" />
                         </div>
-
-                        <div
-                            v-else
-                            class="base-select__placeholder"
-                        >
-                            {{ placeholder }}
-                        </div>
-                    </slot>
-
-                    <div
-                        v-if="!readonly"
-                        class="base-select__arrow-wrapper"
-                    >
-
-                        <div class='base-select__arrow'>
-                        <base-icon
-                            name="arrow-down"
-                            :size="size"
-                        />
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #dropdown>
-                <div
-                    v-if="(options ?? []).length"
-                    class="base-select__dropdown"
-                >
-                        <dynamic-scroller
-                            :items="options"
-                            :min-item-size="36"
-                            key-field="id"
-                            class="base-select__list"
-                        >
-                            <template #default="{ item, index, active }">
-                                <dynamic-scroller-item
-                                    :item="item"
-                                    :active="active"
-                                    :size-dependencies="[item.name]"
-                                    :data-index="index"
-                                >
-                                    <div class="base-select__item-wrapper">
-                                        <base-opened-list-item
-                                        v-bind="listItemAttrs(item)"
-                                        :key="item.id"
-                                        :size="size"
-                                    >
-                                        <template #icon>
-                                            <div v-if="$slots.iconItem">
-                                                <slot name="iconItem" :item="item" />
-                                            </div>
-                                        </template>
-                                        {{ listItemAttrs(item).title }}
-                                    </base-opened-list-item>
-                                    </div>
-                                </dynamic-scroller-item>
-                            </template>
-                        </dynamic-scroller>
-                </div>
-            </template>
-        </base-dropdown>
-
-        <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
-            {{ error || hint }}
-        </div>
-</div>
-</div>
+                      </template>
+                      {{ listItemAttrs(item).title }}
+                    </base-opened-list-item>
+                  </div>
+                </dynamic-scroller-item>
+              </template>
+            </dynamic-scroller>
+          </div>
+        </template>
+      </base-dropdown>
+
+      <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
+        {{ error || hint }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -111,6 +109,13 @@ import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
 import { useKitStyle } from '../../composables/kit/style';
 
+// Определяем тип для slotProps
+interface SlotProps {
+  item: ICoreSelectBaseProps;
+  index: number;
+  active: boolean;
+}
+
 const props = withDefaults(defineProps<ICoreSelectProps & {
   modelValue?: TSelectValue
 }>(), {
@@ -137,6 +142,7 @@ function handleInput(value: TSelectValue) {
   emit('update:modelValue', value);
   emit('change', value);
 }
+
 const actualDisabled = computed(() => props.disabled || !props.options?.length);
 const dropdownVisible = ref(false);
 const { sizeClassList } = useKitSize(props);
@@ -146,7 +152,7 @@ const { styleClassList } = useKitStyle(props);
 const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
-  title: item.name,
+  title: item.name || item.label || '',
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
@@ -162,209 +168,213 @@ const classList = computed(() => [
     '--is-disabled': actualDisabled.value,
   },
 ]);
-</script>
 
+defineSlots<{
+  default(props: SlotProps): any;
+  iconItem(props: { item: ICoreSelectBaseProps }): any;
+}>();
+</script>
 
 <style lang="scss">
 @import '../../styles/variables';
 @import '../../styles/root';
 
 .base-select {
-    $select: &;
-
-    min-width: 320px;
-
-    .dropdown {
-        &.--is-opened {
-            #{$select} {
-                &__arrow {
-                    transform: translate3d(0, -50%, 0) rotate(180deg);
-                }
-
-                &__header {
-                    border: 1px solid var(--primary-black-300);
-                    outline: 4px solid var(--effects-primary-focus);
-                }
-            }
-
-            .dropdown__dropdown {
-                margin-top: 4px;
-                transition: all var(--transition);
-            }
+  $select: &;
+
+  min-width: 320px;
+
+  .dropdown {
+    &.--is-opened {
+      #{$select} {
+        &__arrow {
+          transform: translate3d(0, -50%, 0) rotate(180deg);
         }
-    }
 
-    &.--is-error {
-      #{$select}__hint {
-        color: var(--error-red);
+        &__header {
+          border: 1px solid var(--primary-black-300);
+          outline: 4px solid var(--effects-primary-focus);
+        }
       }
 
-      #{$select}__label {
-        border-color: var(--error-red-light-01);
+      .dropdown__dropdown {
+        margin-top: 4px;
+        transition: all var(--transition);
       }
+    }
+  }
 
-      #{$select}__arrow > * {
-        color: var(--error-red);
-      }
+  &.--is-error {
+    #{$select}__hint {
+      color: var(--error-red);
+    }
 
-      #{$select}__header {
-            border: 1px solid var(--error-red-light-01);
-        }
+    #{$select}__label {
+      border-color: var(--error-red-light-01);
     }
 
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-2s);
-        width: 100%;
-        height: 100%;
+    #{$select}__arrow > * {
+      color: var(--error-red);
     }
 
-    &__header {
-        position: relative;
-        display: flex;
-        column-gap: var(--spacing-s);
-        align-items: center;
-        user-select: none;
-        background: var(--bg-light);
-        border: 1px solid var(--primary-black-300);
-        border-radius: var(--corner-radius-m);
+    #{$select}__header {
+      border: 1px solid var(--error-red-light-01);
     }
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2s);
+    width: 100%;
+    height: 100%;
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    column-gap: var(--spacing-s);
+    align-items: center;
+    user-select: none;
+    background: var(--bg-light);
+    border: 1px solid var(--primary-black-300);
+    border-radius: var(--corner-radius-m);
+  }
+
+  &__placeholder {
+    @include text-clamp(1);
+
+    color: var(--primary-text-tertiary);
+  }
+
+  &__arrow-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    color: var(--ui-colors-input-icon-default);
+    transition: transform var(--transition);
+    transform: translate3d(0, -50%, 0);
+  }
+
+  &__dropdown {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__list {
+    width: 100%;
+  }
+
+  &__item {
+    width: 100%;
+  }
+
+  &.--small-size {
+    #{$select} {
+      &__label {
+        font: var(--typography-text-s-medium);
+      }
 
-    &__placeholder {
-        @include text-clamp(1);
+      &__hint {
+        font: var(--typography-text-s-regular);
+      }
 
-        color: var(--primary-text-tertiary);
-    }
+      &__header_value {
+        font: var(--typography-text-m-regular);
+      }
 
-    &__arrow-wrapper {
-        position: relative;
-        flex-shrink: 0;
-        margin-left: auto;
-    }
+      &__dropdown {
+        border-radius: var(--corner-radius-s);
+      }
 
-    &__arrow {
-        position: absolute;
-        top: 50%;
-        color: var(--ui-colors-input-icon-default);
-        transition: transform var(--transition);
-        transform: translate3d(0, -50%, 0);
-    }
+      &__header {
+        height: 22px;
+        padding: var(--spacing-s) var(--spacing-2l);
+        border-radius: var(--corner-radius-s);
+      }
 
-    &__dropdown {
-        width: 100%;
-        height: 100%;
+      &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+        width: 20px;
+        height: 20px;
+      }
     }
+  }
 
-    &__list {
-        width: 100%;
-    }
+  &.--medium-size {
+    #{$select} {
+      &__label {
+        font: var(--typography-text-s-medium);
+      }
 
-    &__item {
-        width: 100%;
-    }
+      &__hint {
+        font: var(--typography-text-s-regular);
+      }
 
-    &.--small-size {
-        #{$select} {
-            &__label {
-                font: var(--typography-text-s-medium);
-            }
-
-            &__hint {
-                font: var(--typography-text-s-regular);
-            }
-
-            &__header_value {
-                font: var(--typography-text-m-regular);
-            }
-
-           &__dropdown {
-                border-radius: var(--corner-radius-s);
-           }
-
-           &__header {
-                height: 22px;
-                padding: var(--spacing-s) var(--spacing-2l);
-                border-radius: var(--corner-radius-s);
-           }
-
-           &__arrow, &__header_prefix_icon, &__arrow-wrapper {
-                width: 20px;
-                height: 20px;
-           }
-        }
-    }
+      &__header_value {
+        font: var(--typography-text-m-regular);
+      }
 
-    &.--medium-size {
-        #{$select} {
-            &__label {
-                font: var(--typography-text-s-medium);
-            }
-
-            &__hint {
-                font: var(--typography-text-s-regular);
-            }
-
-            &__header_value {
-                font: var(--typography-text-m-regular);
-            }
-
-            &__header {
-                height: 22px;
-                padding: var(--spacing-m) var(--spacing-2l);
-            }
-
-            &__arrow, &__header_prefix_icon, &__arrow-wrapper {
-                width: 24px;
-                height: 24px;
-           }
-        }
+      &__header {
+        height: 22px;
+        padding: var(--spacing-m) var(--spacing-2l);
+      }
+
+      &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+        width: 24px;
+        height: 24px;
+      }
     }
+  }
 
-    &.--large-size {
-        #{$select} {
-            &__label {
-                font: var(--typography-text-m-medium);
-            }
-
-            &__hint {
-                font: var(--typography-text-m-regular);
-            }
-
-            &__header_value {
-                font: var(--typography-text-l-regular);
-            }
-
-            &__header {
-                height: 30px;
-                padding: var(--spacing-m) var(--spacing-l);
-            }
-
-            &__arrow, &__header_prefix_icon, &__arrow-wrapper {
-                width: 32px;
-                height: 32px;
-           }
-        }
+  &.--large-size {
+    #{$select} {
+      &__label {
+        font: var(--typography-text-m-medium);
+      }
+
+      &__hint {
+        font: var(--typography-text-m-regular);
+      }
+
+      &__header_value {
+        font: var(--typography-text-l-regular);
+      }
+
+      &__header {
+        height: 30px;
+        padding: var(--spacing-m) var(--spacing-l);
+      }
+
+      &__arrow, &__header_prefix_icon, &__arrow-wrapper {
+        width: 32px;
+        height: 32px;
+      }
     }
+  }
 
-    &.--is-disabled {
-        #{$select} {
-            &__placeholder {
-                color: var(--ui-colors-input-text-disabled);
-            }
+  &.--is-disabled {
+    #{$select} {
+      &__placeholder {
+        color: var(--ui-colors-input-text-disabled);
+      }
 
-            &__arrow {
-                color: var(--ui-colors-input-icon-disabled);
-            }
-        }
+      &__arrow {
+        color: var(--ui-colors-input-icon-disabled);
+      }
     }
+  }
 
-    &.--is-readonly {
-        #{$select} {
-            &__header {
-                pointer-events: none;
-            }
-        }
+  &.--is-readonly {
+    #{$select} {
+      &__header {
+        pointer-events: none;
+      }
     }
+  }
 }
-</style>
+</style>