@krometra/ui-kit 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krometra/ui-kit",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "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/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 {

package/src/theme.js

@@ -27,7 +27,9 @@ export const schemes = ['light', 'dark', 'system']
  * чем держать десяток почти одинаковых палитр. Пресет может уточнить нейтрали
  * точечно через `neutralOverrides` — так живут проектные темы. Ещё пресет
  * может задать свои `radius`, `density`, `elevation` и `font`: они действуют,
- * пока ось не задана в теме явно.
+ * пока ось не задана в теме явно. `accentOverrides` и `semanticOverrides`
+ * по схемам (`light`, `dark`) задают акцент и цвета статусов точно, когда
+ * подобранная вручную палитра должна совпасть с макетом.
  */
 export const presets = {
   default: {
@@ -97,6 +99,51 @@ export const presets = {
     accentSoft: '#f4f4f5',
     neutral: 'plain',
   },
+  bordeaux: {
+    label: 'Bordeaux',
+    accent: '#8a3a48',
+    accentHover: '#73303c',
+    accentSoft: '#f3e6e8',
+    neutral: 'warm',
+    font: "'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif",
+    accentOverrides: {
+      dark: { accent: '#e3929e', accentHover: '#eaa9b3', accentSoft: '#33242a' },
+    },
+    semanticOverrides: {
+      light: {
+        success: { base: '#2c7656', hover: '#235f45', soft: '#e3f1ea', strong: '#2c7656' },
+        info: { base: '#3b6286', hover: '#2f4f6c', soft: '#e5edf5', strong: '#3b6286' },
+        danger: { base: '#b03a37', hover: '#922f2d', soft: '#fbe8e6', strong: '#b03a37' },
+      },
+      dark: {
+        success: { base: '#72c9a2', hover: '#8fd6b6', soft: '#1b3228', strong: '#72c9a2' },
+        info: { base: '#94b8db', hover: '#adc9e4', soft: '#1c2936', strong: '#94b8db' },
+        danger: { base: '#f08d83', hover: '#f4a69e', soft: '#3a2220', strong: '#f08d83' },
+      },
+    },
+    neutralOverrides: {
+      light: {
+        bg: '#f6f4f4',
+        surface: '#ffffff',
+        surfaceMuted: '#faf8f8',
+        border: '#e3dcdd',
+        borderStrong: '#cdc3c4',
+        text: '#1e2327',
+        textMuted: '#5f666c',
+        textFaint: '#959ca1',
+      },
+      dark: {
+        bg: '#15181b',
+        surface: '#1d2125',
+        surfaceMuted: '#24292e',
+        border: '#30353a',
+        borderStrong: '#454b52',
+        text: '#ebe7e7',
+        textMuted: '#a3a9ae',
+        textFaint: '#737a80',
+      },
+    },
+  },
   blocky: {
     label: 'Blocky',
     accent: '#4f8a25',
@@ -300,11 +347,12 @@ export function buildTheme(theme = {}) {
   const fontKey = spec.font ?? preset.font
   const font = fontStacks[fontKey] ?? fontKey ?? fontStacks.system
 
+  const own = spec.accent ? null : preset.accentOverrides?.[scheme]
   const baseAccent = spec.accent ?? preset.accent
-  const accent = dark ? tint(baseAccent, 0.12) : baseAccent
-  const accentHover = spec.accentHover
+  const accent = own?.accent ?? (dark ? tint(baseAccent, 0.12) : baseAccent)
+  const accentHover = spec.accentHover ?? own?.accentHover
     ?? (dark ? tint(accent, 0.14) : spec.accent ? shade(accent, -0.12) : preset.accentHover)
-  const accentSoft = spec.accentSoft
+  const accentSoft = spec.accentSoft ?? own?.accentSoft
     ?? (dark ? mix(accent, neutral.surface, 0.22) : spec.accent ? tint(accent, 0.92) : preset.accentSoft)
 
   const vars = {
@@ -342,7 +390,8 @@ export function buildTheme(theme = {}) {
     '--k-font': font,
   }
 
-  for (const [name, tone] of Object.entries(semantics[scheme])) {
+  const tones = { ...semantics[scheme], ...preset.semanticOverrides?.[scheme] }
+  for (const [name, tone] of Object.entries(tones)) {
     vars[`--k-${name}`] = tone.base
     vars[`--k-${name}-hover`] = tone.hover
     vars[`--k-${name}-soft`] = tone.soft ?? mix(tone.base, neutral.surface, 0.18)