@krometra/ui-kit 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krometra/ui-kit",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "UI-kit на Vue 3 со сменными темами, светлой и тёмной схемой; интерактивные компоненты на zag.js",
   "license": "MIT",
   "type": "module",
@@ -35,6 +35,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
+    "@krometra/easy-data-scroll": "^0.2.0",
     "@zag-js/checkbox": "^1.43.3",
     "@zag-js/combobox": "^1.43.3",
     "@zag-js/dialog": "^1.43.3",

package/src/components/KPagination.vue

@@ -6,6 +6,8 @@
  * через update:page. Диапазон страниц сворачивается многоточиями, чтобы ширина
  * не зависела от объёма выборки.
  *
+ * translations: { rootLabel?, prevTriggerLabel?, nextTriggerLabel?, itemLabel?, rangeLabel? }
+ * itemLabel({ page, totalPages }), rangeLabel({ from, to, total }) — функции.
  *   <KPagination v-model:page="page" :page-size="20" :total="total" />
  */
 import * as pagination from '@zag-js/pagination'
@@ -19,17 +21,21 @@ const props = defineProps({
   total: { type: Number, default: 0 },
   siblings: { type: Number, default: 1 },
   showInfo: { type: Boolean, default: true },
+  translations: { type: Object, default: () => ({}) },
 })
 
 const emit = defineEmits(['update:page'])
 
 const service = useMachine(pagination.machine, {
   id: useId(),
-  translations: {
-    rootLabel: 'Постраничная навигация',
-    prevTriggerLabel: 'Назад',
-    nextTriggerLabel: 'Вперёд',
-    itemLabel: ({ page }) => `Страница ${page}`,
+  get translations() {
+    return {
+      rootLabel: 'Постраничная навигация',
+      prevTriggerLabel: 'Назад',
+      nextTriggerLabel: 'Вперёд',
+      itemLabel: ({ page }) => `Страница ${page}`,
+      ...props.translations,
+    }
   },
   get count() {
     return props.total
@@ -52,11 +58,14 @@ const api = computed(() => pagination.connect(service, normalizeProps))
 
 const rangeFrom = computed(() => (props.total ? api.value.pageRange.start + 1 : 0))
 const rangeTo = computed(() => api.value.pageRange.end)
+const rangeLabel = computed(() => props.translations.rangeLabel
+  ? props.translations.rangeLabel({ from: rangeFrom.value, to: rangeTo.value, total: props.total })
+  : `${rangeFrom.value}–${rangeTo.value} из ${props.total}`)
 </script>
 
 <template>
   <nav class="k-pagination" v-bind="api.getRootProps()">
-    <span v-if="showInfo" class="k-pagination__info">{{ rangeFrom }}–{{ rangeTo }} из {{ total }}</span>
+    <span v-if="showInfo" class="k-pagination__info">{{ rangeLabel }}</span>
     <div class="k-pagination__pages">
       <button class="k-pagination__nav" v-bind="api.getPrevTriggerProps()">
         <KIcon name="chevron-left" :size="16" />

package/src/components/KTable.vue

@@ -7,6 +7,7 @@
  * (серверная): передайте total + pageSize и v-model:page.
  *
  *   columns: [{ key, label, width?, align?, nowrap?, sortable?, actions? }]
+ *   loadingText — текст загрузки, paginationTranslations — переводы KPagination.
  *
  *   <KTable :columns="cols" :rows="rows" v-model:page="page"
  *            :page-size="20" :total="total" clickable @row-click="open">
@@ -23,6 +24,8 @@ const props = defineProps({
   rowKey: { type: [String, Function], default: 'id' },
   loading: { type: Boolean, default: false },
   emptyText: { type: String, default: 'Ничего не найдено' },
+  loadingText: { type: String, default: 'Загрузка…' },
+  paginationTranslations: { type: Object, default: () => ({}) },
   clickable: { type: Boolean, default: false },
   dense: { type: Boolean, default: false },
   sortKey: { type: String, default: '' },
@@ -79,7 +82,7 @@ const showPagination = computed(() => props.pageSize > 0 && props.total > props.
         <tbody>
           <tr v-if="loading">
             <td :colspan="columns.length" class="k-table__msg">
-              <KIcon name="spinner" :size="18" spin /> Загрузка…
+              <KIcon name="spinner" :size="18" spin /> {{ loadingText }}
             </td>
           </tr>
           <tr v-else-if="!rows.length">
@@ -116,6 +119,7 @@ const showPagination = computed(() => props.pageSize > 0 && props.total > props.
       :page="page"
       :page-size="pageSize"
       :total="total"
+      :translations="paginationTranslations"
       @update:page="emit('update:page', $event)"
     />
   </div>

package/src/components/KVirtualList.vue

@@ -0,0 +1,79 @@
+<script setup>
+/**
+ * KVirtualList — длинный список без прыжков на @krometra/easy-data-scroll: в DOM
+ * только строки у экрана, высота строк любая и заранее не нужна. Подгрузка,
+ * картинки, новые строки сверху и снизу не сдвигают то, что читают.
+ *
+ * Пропсы и события — те же, что у InfinityScroll из пакета. Режим выбирается
+ * загрузчиком:
+ *   бесконечный: load-before / load-after (крайний элемент) => массив или { items, done }
+ *   виртуальный: load-range(from, to) => массив или { items, total }, плюс total
+ *
+ *   <KVirtualList :get-key="m => m.id" :load-range="load" :total="total" origin="bottom" height="32rem">
+ *     <template #default="{ item }">…</template>
+ *   </KVirtualList>
+ *
+ * origin="bottom" — чат: начинается снизу и прилипает к низу. Методы (append,
+ * prepend, update, remove, reset, scrollToKey, scrollToIndex, scrollToTop,
+ * scrollToBottom) и сам экземпляр (list) — через ref.
+ */
+import { InfinityScroll } from '@krometra/easy-data-scroll/vue'
+import { computed, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: '' },
+  bordered: { type: Boolean, default: false },
+})
+
+const inner = useTemplateRef('inner')
+const style = computed(() => (props.height ? { height: props.height } : null))
+
+const call = (name) => (...args) => inner.value?.[name](...args)
+
+defineExpose({
+  get list() {
+    return inner.value?.list
+  },
+  append: call('append'),
+  prepend: call('prepend'),
+  update: call('update'),
+  remove: call('remove'),
+  reset: call('reset'),
+  scrollToKey: call('scrollToKey'),
+  scrollToIndex: call('scrollToIndex'),
+  indexOfKey: call('indexOfKey'),
+  scrollToTop: call('scrollToTop'),
+  scrollToBottom: call('scrollToBottom'),
+})
+</script>
+
+<template>
+  <InfinityScroll
+    ref="inner"
+    class="k-virtual-list"
+    :class="{ 'k-virtual-list--bordered': bordered }"
+    :style="style"
+  >
+    <template #default="{ item }">
+      <slot :item="item" />
+    </template>
+  </InfinityScroll>
+</template>
+
+<style scoped>
+.k-virtual-list {
+  --eds-loader-color: var(--k-primary);
+  --eds-loader-bg: var(--k-surface-muted);
+  --eds-gap-color: var(--k-border);
+  --eds-gap-inset: 1rem;
+  --eds-gap-pad: 0.375rem;
+  min-height: 0;
+  color: var(--k-text);
+}
+.k-virtual-list--bordered {
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  overflow: hidden;
+}
+</style>

package/src/index.js

@@ -53,13 +53,14 @@ import KTextarea from './components/KTextarea.vue'
 import KTimeline from './components/KTimeline.vue'
 import KToast from './components/KToast.vue'
 import KTooltip from './components/KTooltip.vue'
+import KVirtualList from './components/KVirtualList.vue'
 
 export {
   KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KChip, KCombobox, KCountdown,
   KDescriptions, KDrawer, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
   KInput, KMenuItem, KModal, KMoney, KPage, KPagination, KProgress,
   KRadioGroup, KSegmented, KSelect, KShell, KStat, KSteps, KSwitch, KTable,
-  KTabs, KTextarea, KTimeline, KToast, KTooltip,
+  KTabs, KTextarea, KTimeline, KToast, KTooltip, KVirtualList,
 }
 
 export { iconNames, iconRegistry, registerIcons } from './components/icon-registry.js'
@@ -75,7 +76,7 @@ const components = {
   KDescriptions, KDrawer, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
   KInput, KMenuItem, KModal, KMoney, KPage, KPagination, KProgress,
   KRadioGroup, KSegmented, KSelect, KShell, KStat, KSteps, KSwitch, KTable,
-  KTabs, KTextarea, KTimeline, KToast, KTooltip,
+  KTabs, KTextarea, KTimeline, KToast, KTooltip, KVirtualList,
 }
 
 export default {