@krometra/ui-kit 0.0.0-stage → 0.3.0

package/src/components/KShell.vue

@@ -0,0 +1,176 @@
+<script setup>
+/**
+ * KShell — каркас приложения: светлый боковой навигатор + верхняя шапка.
+ *
+ * Сайдбар намеренно светлый: в интерфейсах с плотными таблицами тёмная колонка
+ * перетягивает внимание с данных. Цвета берутся из темы, поэтому под конкретный
+ * проект каркас перекрашивается без правок разметки.
+ *
+ *   nav: [{ section?, items: [{ label, to, icon?, badge? }] }]
+ *
+ * Слоты: #logo, #header-actions, #user, по умолчанию — контент страницы.
+ */
+import { ref } from 'vue'
+import KIcon from './KIcon.vue'
+
+defineProps({
+  nav: { type: Array, default: () => [] },
+  title: { type: String, default: '' },
+})
+
+const open = ref(false)
+</script>
+
+<template>
+  <div class="k-shell" :class="{ 'k-shell--nav-open': open }">
+    <aside class="k-shell__sidebar">
+      <div class="k-shell__logo">
+        <slot name="logo">{{ title }}</slot>
+      </div>
+      <nav class="k-shell__nav">
+        <template v-for="(group, gi) in nav" :key="gi">
+          <p v-if="group.section" class="k-shell__section">{{ group.section }}</p>
+          <router-link
+            v-for="item in group.items"
+            :key="item.to"
+            :to="item.to"
+            class="k-shell__link"
+            @click="open = false"
+          >
+            <KIcon v-if="item.icon" :name="item.icon" :size="17" class="k-shell__link-icon" />
+            <span class="k-shell__link-label">{{ item.label }}</span>
+            <span v-if="item.badge" class="k-shell__badge">{{ item.badge }}</span>
+          </router-link>
+        </template>
+      </nav>
+      <div v-if="$slots.sidebarFooter" class="k-shell__sidebar-footer">
+        <slot name="sidebarFooter" />
+      </div>
+    </aside>
+
+    <div class="k-shell__main">
+      <header class="k-shell__header">
+        <button class="k-shell__burger" aria-label="Меню" @click="open = !open">
+          <KIcon :name="open ? 'close' : 'menu'" :size="20" />
+        </button>
+        <div class="k-shell__header-left"><slot name="header-left" /></div>
+        <div class="k-shell__header-actions">
+          <slot name="header-actions" />
+          <slot name="user" />
+        </div>
+      </header>
+      <main class="k-shell__content"><slot /></main>
+    </div>
+
+    <div class="k-shell__overlay" @click="open = false" />
+  </div>
+</template>
+
+<style scoped>
+.k-shell { display: flex; min-height: 100vh; background: var(--k-bg); }
+.k-shell__sidebar {
+  width: 15rem;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  background: var(--k-surface);
+  border-right: 1px solid var(--k-border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+.k-shell__logo {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  height: 3.75rem;
+  padding: 0 1.125rem;
+  border-bottom: 1px solid var(--k-border);
+  font-size: 1.0625rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.k-shell__nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.625rem; }
+.k-shell__section {
+  padding: 0.9rem 0.55rem 0.35rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--k-text-faint);
+}
+.k-shell__link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.55rem;
+  border-radius: var(--k-radius-sm);
+  color: var(--k-text-muted);
+  font-size: 0.9375rem;
+  text-decoration: none;
+  transition: background 0.12s, color 0.12s;
+}
+.k-shell__link:hover { background: var(--k-surface-muted); color: var(--k-text); text-decoration: none; }
+.k-shell__link.router-link-active {
+  background: var(--k-primary-soft);
+  color: var(--k-primary);
+  font-weight: 550;
+}
+.k-shell__link-icon { color: currentColor; }
+.k-shell__link-label { flex: 1; min-width: 0; }
+.k-shell__badge {
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+  background: var(--k-danger);
+  color: var(--k-on-danger);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+.k-shell__sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--k-border); }
+
+.k-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.k-shell__header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: 3.75rem;
+  padding: 0 1.25rem;
+  background: color-mix(in srgb, var(--k-surface) 85%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--k-border);
+}
+.k-shell__header-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; }
+.k-shell__header-actions { display: flex; align-items: center; gap: 0.5rem; }
+.k-shell__burger {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  padding: 0.25rem;
+}
+.k-shell__content { flex: 1; min-width: 0; }
+.k-shell__overlay { display: none; }
+
+@media (max-width: 900px) {
+  .k-shell__sidebar {
+    position: fixed;
+    z-index: 70;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: var(--k-shadow-lg);
+  }
+  .k-shell--nav-open .k-shell__sidebar { transform: none; }
+  .k-shell--nav-open .k-shell__overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    background: var(--k-overlay);
+  }
+  .k-shell__burger { display: inline-flex; }
+}
+</style>

package/src/components/KStat.vue

@@ -0,0 +1,74 @@
+<script setup>
+/**
+ * KStat — плитка ключевой метрики для дашборда.
+ *
+ * `trend` — изменение в процентах: положительное красится в зелёный со стрелкой
+ * вверх, отрицательное в красный. Для метрик, где снижение это хорошо (расходы,
+ * время отклика, число ошибок), передайте `invert`.
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  value: { type: [String, Number], default: '' },
+  hint: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  tone: { type: String, default: 'neutral' }, // neutral | primary | success | warning | danger
+  trend: { type: Number, default: null },
+  invert: { type: Boolean, default: false },
+})
+
+const good = computed(() => (props.invert ? props.trend < 0 : props.trend > 0))
+</script>
+
+<template>
+  <div class="k-stat">
+    <div class="k-stat__head">
+      <span class="k-stat__label">{{ label }}</span>
+      <span v-if="icon" class="k-stat__icon" :class="`k-stat__icon--${tone}`">
+        <KIcon :name="icon" :size="16" />
+      </span>
+    </div>
+    <div class="k-stat__value"><slot>{{ value }}</slot></div>
+    <div v-if="hint || trend != null" class="k-stat__foot">
+      <span v-if="trend != null" class="k-stat__trend" :class="good ? 'k-stat__trend--good' : 'k-stat__trend--bad'">
+        <KIcon :name="trend > 0 ? 'up' : 'down'" :size="13" />
+        {{ Math.abs(trend).toLocaleString('ru-RU') }}%
+      </span>
+      <span v-if="hint" class="k-stat__hint">{{ hint }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-stat {
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-sm);
+  padding: 1rem 1.125rem;
+}
+.k-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+.k-stat__label { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-stat__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--k-radius-sm);
+  background: var(--k-surface-muted);
+  color: var(--k-text-muted);
+}
+.k-stat__icon--primary { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-stat__icon--success { background: var(--k-success-soft); color: var(--k-success); }
+.k-stat__icon--warning { background: var(--k-warning-soft); color: var(--k-warning); }
+.k-stat__icon--danger { background: var(--k-danger-soft); color: var(--k-danger); }
+.k-stat__value { margin-top: 0.35rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
+.k-stat__foot { margin-top: 0.35rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
+.k-stat__trend { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 600; }
+.k-stat__trend--good { color: var(--k-success); }
+.k-stat__trend--bad { color: var(--k-danger); }
+.k-stat__hint { color: var(--k-text-muted); }
+</style>

package/src/components/KSteps.vue

@@ -0,0 +1,119 @@
+<script setup>
+/**
+ * KSteps — индикатор шагов мастера на @zag-js/steps.
+ *
+ *   items:   [{ label, hint? }] или строки
+ *   current: индекс текущего шага (с нуля), контролируемый
+ *   clickable: разрешить переход по клику на пройденные шаги (событие `select`)
+ */
+import * as steps from '@zag-js/steps'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  current: { type: Number, default: 0 },
+  clickable: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['select'])
+
+const service = useMachine(steps.machine, {
+  id: useId(),
+  linear: false,
+  get step() {
+    return props.current
+  },
+  get count() {
+    return props.items.length
+  },
+  onStepChange({ step }) {
+    if (step !== props.current) emit('select', step)
+  },
+})
+
+const api = computed(() => steps.connect(service, normalizeProps))
+
+const labelOf = (item) => (typeof item === 'string' ? item : item.label)
+const hintOf = (item) => (typeof item === 'string' ? '' : item.hint)
+</script>
+
+<template>
+  <div class="k-steps" v-bind="api.getRootProps()">
+    <ol class="k-steps__list" v-bind="api.getListProps()">
+      <li v-for="(item, i) in items" :key="i" class="k-steps__item" v-bind="api.getItemProps({ index: i })">
+        <component
+          :is="clickable ? 'button' : 'div'"
+          class="k-steps__trigger"
+          :class="{ 'k-steps__trigger--clickable': clickable && i <= current }"
+          v-bind="clickable ? api.getTriggerProps({ index: i }) : {}"
+          :disabled="clickable && i > current ? true : null"
+        >
+          <span class="k-steps__marker" v-bind="api.getIndicatorProps({ index: i })">
+            <KIcon v-if="i < current" name="check" :size="14" />
+            <template v-else>{{ i + 1 }}</template>
+          </span>
+          <span class="k-steps__body">
+            <span class="k-steps__label">{{ labelOf(item) }}</span>
+            <span v-if="hintOf(item)" class="k-steps__hint">{{ hintOf(item) }}</span>
+          </span>
+        </component>
+        <span v-if="i < items.length - 1" class="k-steps__sep" v-bind="api.getSeparatorProps({ index: i })" />
+      </li>
+    </ol>
+  </div>
+</template>
+
+<style scoped>
+.k-steps { overflow-x: auto; }
+.k-steps__list {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.k-steps__item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
+.k-steps__trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: var(--k-radius-sm);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
+.k-steps__trigger--clickable { cursor: pointer; }
+.k-steps__trigger--clickable:hover { background: var(--k-surface-muted); }
+.k-steps__trigger:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
+.k-steps__trigger:disabled { cursor: default; }
+.k-steps__sep { width: 1.5rem; height: 1px; background: var(--k-border-strong); flex: none; }
+.k-steps__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 50%;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--k-text-muted);
+  flex: none;
+}
+.k-steps__body { display: flex; flex-direction: column; }
+.k-steps__label { font-size: 0.875rem; color: var(--k-text-muted); }
+.k-steps__hint { font-size: 0.6875rem; color: var(--k-text-faint); }
+.k-steps__marker[data-complete] { background: var(--k-success-soft); border-color: currentColor; color: var(--k-success); }
+.k-steps__trigger[data-complete] .k-steps__label { color: var(--k-text); }
+.k-steps__marker[data-current] { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-on-primary); }
+.k-steps__trigger[data-current] .k-steps__label { color: var(--k-text); font-weight: 600; }
+.k-steps__item[data-complete] .k-steps__label { color: var(--k-text); }
+.k-steps__item[data-current] .k-steps__label { color: var(--k-text); font-weight: 600; }
+</style>

package/src/components/KSwitch.vue

@@ -0,0 +1,82 @@
+<script setup>
+/**
+ * KSwitch — переключатель булевой настройки на @zag-js/switch. Семантически
+ * это checkbox с role="switch"; скрытый input остаётся в форме и в фокусе.
+ */
+import * as zagSwitch from '@zag-js/switch'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  name: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const service = useMachine(zagSwitch.machine, {
+  id: useId(),
+  get checked() {
+    return props.modelValue
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get name() {
+    return props.name || undefined
+  },
+  onCheckedChange({ checked }) {
+    emit('update:modelValue', checked)
+  },
+})
+
+const api = computed(() => zagSwitch.connect(service, normalizeProps))
+</script>
+
+<template>
+  <label class="k-switch" v-bind="api.getRootProps()">
+    <input v-bind="api.getHiddenInputProps()" />
+    <span class="k-switch__track" v-bind="api.getControlProps()">
+      <span class="k-switch__thumb" v-bind="api.getThumbProps()" />
+    </span>
+    <span v-if="label || hint || $slots.default" class="k-switch__body">
+      <span class="k-switch__label" v-bind="api.getLabelProps()"><slot>{{ label }}</slot></span>
+      <span v-if="hint" class="k-switch__hint">{{ hint }}</span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.k-switch { display: inline-flex; align-items: flex-start; gap: 0.625rem; margin: 0; cursor: pointer; font-weight: 400; }
+.k-switch[data-disabled] { cursor: not-allowed; opacity: 0.6; }
+.k-switch__track {
+  position: relative;
+  width: 2.25rem;
+  height: 1.3rem;
+  margin-top: 0.1rem;
+  background: var(--k-border-strong);
+  border-radius: 999px;
+  flex: none;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+.k-switch__track[data-state="checked"] { background: var(--k-primary); }
+.k-switch__track[data-focus-visible] { box-shadow: 0 0 0 3px var(--k-primary-soft); }
+.k-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.05rem;
+  height: 1.05rem;
+  background: var(--k-surface);
+  border-radius: 50%;
+  box-shadow: var(--k-shadow-sm);
+  transition: transform 0.15s;
+}
+.k-switch__thumb[data-state="checked"] { transform: translateX(0.95rem); }
+.k-switch__body { display: flex; flex-direction: column; gap: 0.1rem; }
+.k-switch__label { font-size: 0.9375rem; }
+.k-switch__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+</style>

package/src/components/KTable.vue

@@ -0,0 +1,161 @@
+<script setup>
+/**
+ * KTable — таблица данных с сортировкой, пустым состоянием и пагинацией.
+ *
+ * Колонки описываются спецификацией, ячейки по умолчанию берут row[col.key];
+ * любую можно переопределить слотом `#cell-<key>`. Пагинация контролируемая
+ * (серверная): передайте total + pageSize и v-model:page.
+ *
+ *   columns: [{ key, label, width?, align?, nowrap?, sortable?, actions? }]
+ *
+ *   <KTable :columns="cols" :rows="rows" v-model:page="page"
+ *            :page-size="20" :total="total" clickable @row-click="open">
+ *     <template #cell-status="{ row }"><KBadge>{{ row.status }}</KBadge></template>
+ *   </KTable>
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+import KPagination from './KPagination.vue'
+
+const props = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, default: () => [] },
+  rowKey: { type: [String, Function], default: 'id' },
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: 'Ничего не найдено' },
+  clickable: { type: Boolean, default: false },
+  dense: { type: Boolean, default: false },
+  sortKey: { type: String, default: '' },
+  sortDir: { type: String, default: 'asc' }, // asc | desc
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 0 },
+  total: { type: Number, default: 0 },
+})
+
+const emit = defineEmits(['update:page', 'update:sortKey', 'update:sortDir', 'row-click'])
+
+function keyOf(row, i) {
+  return typeof props.rowKey === 'function' ? props.rowKey(row) : (row[props.rowKey] ?? i)
+}
+
+function toggleSort(col) {
+  if (!col.sortable) return
+  if (props.sortKey === col.key) {
+    emit('update:sortDir', props.sortDir === 'asc' ? 'desc' : 'asc')
+  } else {
+    emit('update:sortKey', col.key)
+    emit('update:sortDir', 'asc')
+  }
+}
+
+const showPagination = computed(() => props.pageSize > 0 && props.total > props.pageSize)
+</script>
+
+<template>
+  <div class="k-table" :class="{ 'k-table--dense': dense }">
+    <div class="k-table__scroll">
+      <table class="k-table__table">
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              :style="{ width: col.width, textAlign: col.align || 'left' }"
+              :class="{ 'k-table__th--sortable': col.sortable }"
+              @click="toggleSort(col)"
+            >
+              <span class="k-table__th-inner">
+                {{ col.label }}
+                <KIcon
+                  v-if="col.sortable"
+                  :name="sortKey === col.key && sortDir === 'desc' ? 'chevron-down' : 'chevron-up'"
+                  :size="13"
+                  :class="['k-table__sort', { 'k-table__sort--active': sortKey === col.key }]"
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="columns.length" class="k-table__msg">
+              <KIcon name="spinner" :size="18" spin /> Загрузка…
+            </td>
+          </tr>
+          <tr v-else-if="!rows.length">
+            <td :colspan="columns.length" class="k-table__msg">
+              <slot name="empty">{{ emptyText }}</slot>
+            </td>
+          </tr>
+          <tr
+            v-for="(row, i) in rows"
+            v-else
+            :key="keyOf(row, i)"
+            :class="{ 'k-table__row--clickable': clickable }"
+            @click="clickable && emit('row-click', row)"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              :style="{ textAlign: col.align || 'left', whiteSpace: col.nowrap ? 'nowrap' : null }"
+            >
+              <div v-if="col.actions" class="k-table__actions" @click.stop>
+                <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :index="i" />
+              </div>
+              <slot v-else :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :index="i">
+                {{ row[col.key] }}
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <KPagination
+      v-if="showPagination"
+      :page="page"
+      :page-size="pageSize"
+      :total="total"
+      @update:page="emit('update:page', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.k-table__scroll { overflow-x: auto; }
+.k-table__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
+.k-table__table th,
+.k-table__table td {
+  padding: 0.7rem 0.875rem;
+  text-align: left;
+  border-bottom: 1px solid var(--k-border);
+  vertical-align: middle;
+}
+.k-table--dense .k-table__table th,
+.k-table--dense .k-table__table td { padding: 0.45rem 0.75rem; font-size: 0.875rem; }
+.k-table__table th {
+  position: sticky;
+  top: 0;
+  background: var(--k-surface-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--k-text-muted);
+  white-space: nowrap;
+}
+.k-table__th-inner { display: inline-flex; align-items: center; gap: 0.25rem; }
+.k-table__th--sortable { cursor: pointer; user-select: none; }
+.k-table__th--sortable:hover { color: var(--k-text); }
+.k-table__sort { opacity: 0.35; }
+.k-table__sort--active { opacity: 1; color: var(--k-primary); }
+.k-table__table tbody tr:last-child td { border-bottom: none; }
+.k-table__actions { display: inline-flex; align-items: center; gap: var(--k-gap); }
+.k-table__row--clickable { cursor: pointer; }
+.k-table__row--clickable:hover { background: var(--k-primary-soft); }
+.k-table__msg {
+  text-align: center;
+  color: var(--k-text-muted);
+  padding: 2rem;
+}
+</style>