plugin-ui-for-kzt 0.0.25 → 0.0.27

package/example/App.vue

@@ -2,210 +2,17 @@
   <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>
+      <base-calendar v-model="testDate" inline />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import type { Column, Action, Row } from '../src/types/table'
-
-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)
-  }
-]
+import { ref, watch } from 'vue'
 
-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)
-}
+const testDate = ref(new Date())
+watch(()=> testDate.value,
+  ()=> console.log('test Date', testDate.value)
+)
 </script>
 
 <style lang="scss" scoped>

package/package.json

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

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/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/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;