plugin-ui-for-kzt 0.0.25 → 0.0.28

package/example/App.vue

@@ -2,210 +2,18 @@
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
     <section>
-      <BaseTable
-        :data="[]"
-        :columns="columns3"
-        :actions="actions"
-        show-row-selection
-        show-actions
-        @update:selected="onUpdateSelected"
-      />
-    </section>
-    <section>
-      <BaseTable
-        :data="rows"
-        :columns="columns2"
-        :actions="actions"
-        :pagination="{ totalPages: 5 }"
-        show-row-selection
-        show-actions
-        @update:selected="onUpdateSelected"
-      />
-    </section>
-    <section>
-      <BaseTable
-        :columns="columns"
-        :data="people"
-        :pagination="{ perPage: 5, size: 'small' }"
-        show-row-selection
-        checkbox-title="Выбрать"
-        show-actions
-        :actions="rowActions"
-        @update:selected="onRowsSelected"
-        @sort-change="onSort"
-        @page-change="onPage"
-      >
-        <template #header>
-          <tr>
-            <th>
-              <BaseCheckbox 
-                v-model="selectAll" 
-                id="selectAll"
-              />
-            </th>
-            <th v-for="col in columns" :key="col.key">
-              <div>
-                <component v-if="col.icons?.[0]" :is="col.icons[0]" />
-                <span>{{ col.label }}</span>
-                <BaseIcon
-                  :name="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'"
-                  size="extra-small"
-                />
-              </div>
-            </th>
-
-            <th>Действия</th>
-          </tr>
-        </template>
-        <template #cell-country="{ row, value }">
-          <span>{{ value }}</span>
-          <BaseIcon v-if="row.country === 'Россия'" name="RU" size="extra-small" />
-        </template>
-
-        <template #row-menu="{ row }: Row">
-          <BaseDropdown         
-            v-model="row.dropdownVisible"
-            parent-width
-            transition-name="top"
-            auto-close
-          >
-            <template #top>
-              <BaseButton 
-                color="quaternary" 
-                size="extra-small"
-              >
-                <BaseIcon 
-                  name="ellipsis"
-                  size="small"
-                />
-              </BaseButton>
-            </template>
-            <template #dropdown>
-              <div style="display: flex; flex-direction: column; gap: 8px; padding: 8px; text-align: left;">
-                <div @click="edit(row)">Редактировать</div>
-                <div @click="remove(row)">Удалить</div>
-              </div>
-            </template>
-          </BaseDropdown>
-        </template>
-
-        <template #empty>
-          <div>Нет записей</div>
-        </template>
-
-      </BaseTable>
+      <BaseDefaultPages 
+          title="TUIELT"
+          description="DEGASG"
+          buttonText="Butootn"
+          type="tech-work"
+     />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import type { Column, Action, Row } from '../src/types/table'
+import { ref, watch, computed } from 'vue'
 
-interface Person {
-  id: string
-  name: string
-  country: string
-  dropdownVisible: boolean
-}
-
-/* ---------- Данные ---------- */
-const people = ref<Person[]>([
-  { id: '1', name: 'Иван', country: 'Россия', dropdownVisible: false },
-  { id: '2', name: 'Иван 2', country: 'США', dropdownVisible: false },
-  { id: '3', name: 'Maria', country: 'Бразилия', dropdownVisible: false },
-])
-
-const sortOrder = ref('asc')
-
-/* ---------- Колонки ---------- */
-const columns: Column[] = [
-  { key: 'name', label: 'Имя', sortable: true, dropdownVisible: false },
-  {
-    key: 'country',
-    label: 'Страна',
-    sortable: true,
-    dropdownVisible: false,
-  }
-]
-
-/* ---------- Действия в колонке "actions" ---------- */
-const rowActions: Action[] = [
-  {
-    key: 'delete',
-    icon: 'trash',
-    handler: (row: Row) => console.log('Удаляем', row)
-  },
-  {
-    key: 'help',
-    icon: 'help',
-    handler: (row: Row) => console.log('Редактируем', row)
-  }
-]
-
-interface UserRow {
-  id: string
-  name: string
-  age: number
-  disabled?: boolean
-}
-
-/* Данные */
-const rows: UserRow[] = [
-  { id: '1', name: 'Иван',  age: 30, disabled: true },
-  { id: '2', name: 'Мария', age: 25 },
-  { id: '3', name: 'Мария 2', age: 21 },
-  { id: '4', name: 'Иван 1',  age: 30 },
-  { id: '5', name: 'Мария 3', age: 25 },
-  { id: '6', name: 'Мария 4', age: 21 },
-  { id: '7', name: 'Иван 2',  age: 30 },
-  { id: '8', name: 'Мария 5', age: 25 },
-  { id: '9', name: 'Мария 6', age: 21 },
-]
-
-/* Колонки. icons может быть пустым массивом – теперь тип валиден */
-const columns2 = [
-  { key: 'name', label: 'Имя', icons: [] },
-  { key: 'age', label: 'Возраст', sortable: true, icons: [] },
-]
-const columns3 = [
-  { key: 'name', label: 'Имя', icons: [] },
-  { key: 'age', label: 'Возраст', sortable: true, icons: [] },
-]
-
-/* Действия */
-const actions = [
-  {
-    key: 'edit-table',
-    icon: 'edit-table',
-    handler: (row: UserRow) => console.log('Edit', row),
-  },
-]
-
-function onUpdateSelected(selected: UserRow[]) {
-  console.log('Выбрано строк:', selected)
-}
-
-/* ---------- События ---------- */
-function onRowsSelected(selected: Person[]) {
-  console.log('Выбрано строк:', selected)
-}
-function onSort(payload: { key: keyof Person; order: 'asc' | 'desc' }) {
-  console.log('Сортировка', payload)
-}
-function onPage(page: number) {
-  console.log('Переходим на страницу', page)
-}
-
-/* ---------- Управление чек‑боксом "select all" (если понадобится) ---------- */
-const selectAll = ref(false);
-
-const edit = (row: Row) => {
-  console.log('click edit', row)
-}
-
-const remove = (row: Row) => {
-  console.log('click remove', row)
-}
 </script>
 
 <style lang="scss" scoped>
@@ -245,4 +53,11 @@ const remove = (row: Row) => {
     overflow-x: auto;
   }
 }
+
+.table-data__cell-actions {
+  display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            justify-content: flex-end;
+}
 </style>

package/package.json

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

package/src/components/BaseButton/BaseButton.vue

@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<ICoreButtonProps>(), {
   tag: 'button',
   color: 'primary',
   size: 'medium',
+  onlyIcon: false,
 });
 
 const { componentTag, interactiveClassList } = useKitInteractive(props);
@@ -64,6 +65,7 @@ const classList = computed(() => [
   colorClassList.value,
   stateClassList.value,
   styleClassList.value,
+  { 'base-button--only-icon': props.onlyIcon }
 ]);
 </script>
 
@@ -72,6 +74,8 @@ const classList = computed(() => [
  @import '@/styles/root';
 
 .base-button {
+    $button: &;
+
     @include reset-button;
     @include is-disabled-state;
 
@@ -83,7 +87,12 @@ const classList = computed(() => [
     appearance: none;
     cursor: pointer;
     user-select: none;
-    transition: all var(--transition);
+    transition: 
+        background-color var(--transition),
+        color var(--transition),
+        border-color var(--transition),
+        box-shadow var(--transition),
+        opacity var(--transition);
 
 
     &.--is-loading {
@@ -105,6 +114,11 @@ const classList = computed(() => [
         font: var(--typography-text-s-medium);
         border-radius: var(--corner-radius-xs);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 32px;
+        }
+
        .loader__circle-icon {
             width: 20px;
             height: 20px;
@@ -118,6 +132,11 @@ const classList = computed(() => [
         font: var(--typography-text-m-medium);
         border-radius: var(--corner-radius-s);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 40px;
+        }
+
         .loader__circle-icon {
             width: 20px;
             height: 20px;
@@ -131,6 +150,11 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 48px;
+        }
+
         .loader__circle-icon {
             width: 24px;
             height: 24px;
@@ -144,6 +168,11 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 56px;
+        }
+
         .loader__circle-icon {
             width: 32px;
             height: 32px;

package/src/components/BaseCalendar/BaseCalendar.vue

@@ -5,6 +5,7 @@
         :range="range"
         locale="ru"
         auto-apply
+        :inline="inline"
         :text-input="textInputOptions"
         :hide-navigation="['time']"
         :min-date="minDate || undefined"
@@ -37,6 +38,7 @@ const props = withDefaults(defineProps<TCoreCalendarProps>(), {
   range: false,
   minDate: null,
   size: 'medium',
+  inline: false,
 });
 
 const emit: (event: 'update:modelValue', value: DateRange) => void = defineEmits();

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -33,10 +33,18 @@
 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(()=> require(`@/assets/${props.type}.png`))
+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/BaseSelect/BaseSelect.vue

@@ -98,6 +98,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
 import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';

package/src/images.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpeg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.gif' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.webp' {
+    const value: string;
+    export default value;
+  }

package/src/types/button.d.ts

@@ -1,6 +1,6 @@
 import type { ICoreColor, ICoreInteractive, ICoreSize, ICoreState, ICoreStyle } from './utils';
 
-export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle;
+export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle & { onlyIcon?: boolean };
 
 interface IOptionButtonSegment {
     label: string;

package/src/types/calendar.d.ts

@@ -11,6 +11,7 @@ export interface IBaseCalendarProps {
   minDate?: Date | null
   readonly?: boolean
   error?: string | boolean
+  inline?: boolean;
 }
 
 export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize;