@krometra/ui-kit 0.0.0-stage → 0.4.0

package/src/components/KMenuItem.vue

@@ -0,0 +1,56 @@
+<script setup>
+/**
+ * KMenuItem — пункт меню внутри KDropdown. Рендерится как <router-link>,
+ * если передан `to`, иначе как кнопка. Атрибут data-k-menu-item нужен
+ * дропдауну, чтобы закрыться после выбора.
+ */
+import KIcon from './KIcon.vue'
+
+defineProps({
+  icon: { type: String, default: '' },
+  to: { type: [String, Object], default: null },
+  danger: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+})
+</script>
+
+<template>
+  <component
+    :is="to ? 'router-link' : 'button'"
+    :to="to"
+    :type="to ? null : 'button'"
+    class="k-menu-item"
+    :class="{ 'k-menu-item--danger': danger }"
+    :disabled="to ? null : disabled"
+    role="menuitem"
+    data-k-menu-item
+  >
+    <KIcon v-if="icon" :name="icon" :size="15" />
+    <span class="k-menu-item__label"><slot /></span>
+  </component>
+</template>
+
+<style scoped>
+.k-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  background: none;
+  border: none;
+  border-radius: var(--k-radius-sm);
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--k-text);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.k-menu-item:hover { background: var(--k-surface-muted); text-decoration: none; }
+.k-menu-item:focus-visible { outline: 2px solid var(--k-primary); outline-offset: -2px; }
+.k-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
+.k-menu-item--danger { color: var(--k-danger-strong); }
+.k-menu-item--danger:hover { background: var(--k-danger-soft); }
+.k-menu-item__label { flex: 1; min-width: 0; }
+</style>

package/src/components/KModal.vue

@@ -0,0 +1,136 @@
+<script setup>
+/**
+ * KModal — модальное окно на @zag-js/dialog: фокус-трап, блокировка скролла,
+ * закрытие по Esc и возврат фокуса. Открытие управляется v-model.
+ *
+ * Клик по фону по умолчанию не закрывает окно: случайный клик мимо формы не
+ * должен терять введённое. Включается пропом `close-on-outside`.
+ *
+ *   <KModal v-model="open" title="Новый документ" size="md">
+ *     <form @submit.prevent="save">…</form>
+ *     <template #footer><KButton variant="primary" @click="save">Сохранить</KButton></template>
+ *   </KModal>
+ */
+import * as dialog from '@zag-js/dialog'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  size: { type: String, default: 'md' }, // sm | md | lg
+  closable: { type: Boolean, default: true },
+  closeOnOutside: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const service = useMachine(dialog.machine, {
+  id: useId(),
+  get open() {
+    return props.modelValue
+  },
+  get closeOnInteractOutside() {
+    return props.closeOnOutside && props.closable
+  },
+  get closeOnEscape() {
+    return props.closable
+  },
+  onOpenChange({ open }) {
+    emit('update:modelValue', open)
+    if (!open) emit('close')
+  },
+})
+
+const api = computed(() => dialog.connect(service, normalizeProps))
+</script>
+
+<template>
+  <Teleport to="body">
+    <template v-if="api.open">
+      <div class="k-modal__backdrop" v-bind="api.getBackdropProps()" />
+      <div class="k-modal__positioner" v-bind="api.getPositionerProps()">
+        <div class="k-modal__panel" :class="`k-modal__panel--${size}`" v-bind="api.getContentProps()">
+          <header v-if="title || $slots.header" class="k-modal__header">
+            <div class="k-modal__heading">
+              <slot name="header">
+                <h2 class="k-modal__title" v-bind="api.getTitleProps()">{{ title }}</h2>
+                <p v-if="subtitle" class="k-modal__subtitle" v-bind="api.getDescriptionProps()">{{ subtitle }}</p>
+              </slot>
+            </div>
+            <button v-if="closable" class="k-modal__close" aria-label="Закрыть" v-bind="api.getCloseTriggerProps()">
+              <KIcon name="close" :size="18" />
+            </button>
+          </header>
+          <div class="k-modal__body"><slot /></div>
+          <footer v-if="$slots.footer" class="k-modal__footer"><slot name="footer" /></footer>
+        </div>
+      </div>
+    </template>
+  </Teleport>
+</template>
+
+<style scoped>
+.k-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--k-overlay);
+  backdrop-filter: blur(2px);
+}
+.k-modal__positioner {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+.k-modal__panel {
+  width: min(92vw, var(--k-modal-w, 34rem));
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--k-surface);
+  border-radius: var(--k-radius-lg);
+  box-shadow: var(--k-shadow-lg);
+  overflow: hidden;
+  outline: none;
+}
+.k-modal__panel--sm { --k-modal-w: 24rem; }
+.k-modal__panel--md { --k-modal-w: 34rem; }
+.k-modal__panel--lg { --k-modal-w: 52rem; }
+.k-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.125rem 1.25rem;
+  border-bottom: 1px solid var(--k-border);
+}
+.k-modal__title { font-size: 1.0625rem; font-weight: 600; }
+.k-modal__subtitle { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-modal__close {
+  background: none;
+  border: none;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  padding: 0.15rem;
+  border-radius: var(--k-radius-sm);
+  flex: none;
+}
+.k-modal__close:hover { background: var(--k-surface-muted); color: var(--k-text); }
+.k-modal__body { padding: 1.25rem; overflow-y: auto; }
+.k-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.875rem 1.25rem;
+  border-top: 1px solid var(--k-border);
+  background: var(--k-surface-muted);
+}
+</style>

package/src/components/KMoney.vue

@@ -0,0 +1,44 @@
+<script setup>
+/**
+ * KMoney — денежная сумма в русском формате.
+ *
+ * Вынесено в компонент, потому что суммы обычно встречаются на многих экранах
+ * и должны выглядеть одинаково: неразрывные разряды, символ валюты,
+ * опциональные копейки, табличные цифры для выравнивания в колонке.
+ */
+import { computed } from 'vue'
+
+const props = defineProps({
+  value: { type: [Number, String], default: 0 },
+  currency: { type: String, default: 'RUB' },
+  fraction: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  tone: { type: String, default: '' }, // '' | muted | success | danger
+  size: { type: String, default: 'md' }, // sm | md | lg
+})
+
+const formatted = computed(() => {
+  const n = Number(props.value)
+  if (!Number.isFinite(n)) return '—'
+  return new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: props.currency,
+    minimumFractionDigits: props.fraction ? 2 : 0,
+    maximumFractionDigits: props.fraction ? 2 : 0,
+    notation: props.compact ? 'compact' : 'standard',
+  }).format(n)
+})
+</script>
+
+<template>
+  <span class="k-money" :class="[tone && `k-money--${tone}`, `k-money--${size}`]">{{ formatted }}</span>
+</template>
+
+<style scoped>
+.k-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.k-money--sm { font-size: 0.8125rem; }
+.k-money--lg { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
+.k-money--muted { color: var(--k-text-muted); }
+.k-money--success { color: var(--k-success); }
+.k-money--danger { color: var(--k-danger); }
+</style>

package/src/components/KPage.vue

@@ -0,0 +1,93 @@
+<script setup>
+/**
+ * KPage — стандартная обвязка экрана: хлебные крошки, заголовок, действия
+ * справа и контент. Используйте как корень каждого маршрута, чтобы отступы и
+ * расположение кнопок не разъезжались между страницами.
+ */
+import KIcon from './KIcon.vue'
+
+defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  // [{ label, to? }] — последний элемент отрисуется как текущий, без ссылки
+  breadcrumbs: { type: Array, default: () => [] },
+  back: { type: [String, Object], default: null },
+  width: { type: String, default: 'wide' }, // wide | narrow | full
+})
+</script>
+
+<template>
+  <div class="k-page" :class="`k-page--${width}`">
+    <nav v-if="breadcrumbs.length" class="k-page__crumbs" aria-label="Хлебные крошки">
+      <template v-for="(crumb, i) in breadcrumbs" :key="i">
+        <component
+          :is="crumb.to && i < breadcrumbs.length - 1 ? 'router-link' : 'span'"
+          :to="crumb.to"
+          class="k-page__crumb"
+          :class="{ 'k-page__crumb--current': i === breadcrumbs.length - 1 }"
+        >{{ crumb.label }}</component>
+        <KIcon v-if="i < breadcrumbs.length - 1" name="chevron-right" :size="13" class="k-page__crumb-sep" />
+      </template>
+    </nav>
+
+    <header class="k-page__header">
+      <div class="k-page__heading">
+        <router-link v-if="back" :to="back" class="k-page__back" aria-label="Назад">
+          <KIcon name="back" :size="18" />
+        </router-link>
+        <div class="k-page__titles">
+          <div class="k-page__title-row">
+            <slot name="title"><h1>{{ title }}</h1></slot>
+            <slot name="title-extra" />
+          </div>
+          <p v-if="subtitle" class="k-page__subtitle">{{ subtitle }}</p>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="k-page__actions"><slot name="actions" /></div>
+    </header>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.k-page { padding: 1.75rem 2rem 3rem; margin: 0 auto; width: 100%; }
+.k-page--wide { max-width: 1360px; }
+.k-page--narrow { max-width: 880px; }
+.k-page__crumbs { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; font-size: 0.8125rem; }
+.k-page__crumb { color: var(--k-text-muted); text-decoration: none; }
+.k-page__crumb:hover { color: var(--k-primary); }
+.k-page__crumb--current { color: var(--k-text); }
+.k-page__crumb-sep { color: var(--k-text-faint); }
+.k-page__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.k-page__heading { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }
+.k-page__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin-top: 0.15rem;
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius-sm);
+  background: var(--k-surface);
+  color: var(--k-text-muted);
+  flex: none;
+}
+.k-page__back:hover { background: var(--k-surface-muted); color: var(--k-text); }
+.k-page__titles { min-width: 0; }
+.k-page__title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
+.k-page__subtitle { margin-top: 0.25rem; font-size: 0.875rem; color: var(--k-text-muted); }
+.k-page__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
+
+@media (max-width: 720px) {
+  .k-page { padding: 1.25rem 1rem 2.5rem; }
+  .k-page__header { flex-direction: column; align-items: stretch; }
+}
+</style>

package/src/components/KPagination.vue

@@ -0,0 +1,113 @@
+<script setup>
+/**
+ * KPagination — постраничная навигация на @zag-js/pagination.
+ *
+ * Контролируемая: компонент не хранит состояние, а сообщает нужную страницу
+ * через update:page. Диапазон страниц сворачивается многоточиями, чтобы ширина
+ * не зависела от объёма выборки.
+ *
+ *   <KPagination v-model:page="page" :page-size="20" :total="total" />
+ */
+import * as pagination from '@zag-js/pagination'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 20 },
+  total: { type: Number, default: 0 },
+  siblings: { type: Number, default: 1 },
+  showInfo: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:page'])
+
+const service = useMachine(pagination.machine, {
+  id: useId(),
+  translations: {
+    rootLabel: 'Постраничная навигация',
+    prevTriggerLabel: 'Назад',
+    nextTriggerLabel: 'Вперёд',
+    itemLabel: ({ page }) => `Страница ${page}`,
+  },
+  get count() {
+    return props.total
+  },
+  get pageSize() {
+    return props.pageSize || 1
+  },
+  get siblingCount() {
+    return props.siblings
+  },
+  get page() {
+    return props.page
+  },
+  onPageChange({ page }) {
+    if (page !== props.page) emit('update:page', page)
+  },
+})
+
+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)
+</script>
+
+<template>
+  <nav class="k-pagination" v-bind="api.getRootProps()">
+    <span v-if="showInfo" class="k-pagination__info">{{ rangeFrom }}–{{ rangeTo }} из {{ total }}</span>
+    <div class="k-pagination__pages">
+      <button class="k-pagination__nav" v-bind="api.getPrevTriggerProps()">
+        <KIcon name="chevron-left" :size="16" />
+      </button>
+      <template v-for="(item, i) in api.pages" :key="item.type === 'page' ? item.value : `ellipsis-${i}`">
+        <span v-if="item.type === 'ellipsis'" class="k-pagination__gap" v-bind="api.getEllipsisProps({ index: i })">…</span>
+        <button v-else class="k-pagination__page" v-bind="api.getItemProps(item)">{{ item.value }}</button>
+      </template>
+      <button class="k-pagination__nav" v-bind="api.getNextTriggerProps()">
+        <KIcon name="chevron-right" :size="16" />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.k-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 0.875rem;
+  border-top: 1px solid var(--k-border);
+}
+.k-pagination__info { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-pagination__pages { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
+.k-pagination__page,
+.k-pagination__nav {
+  min-width: var(--k-control-h-sm);
+  height: var(--k-control-h-sm);
+  padding: 0 0.4rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-sm);
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--k-text-muted);
+  cursor: pointer;
+}
+.k-pagination__page:hover,
+.k-pagination__nav:hover:not(:disabled) { background: var(--k-surface-muted); color: var(--k-text); }
+.k-pagination__page[data-selected] {
+  background: var(--k-primary-soft);
+  border-color: currentColor;
+  color: var(--k-primary);
+  font-weight: 600;
+}
+.k-pagination__nav:disabled { opacity: 0.4; cursor: not-allowed; }
+.k-pagination__gap { padding: 0 0.25rem; color: var(--k-text-faint); }
+</style>

package/src/components/KProgress.vue

@@ -0,0 +1,63 @@
+<script setup>
+/**
+ * KProgress — линейный индикатор на @zag-js/progress: заполненность, ход
+ * операции, доля от нормы. `value: null` — неопределённое состояние.
+ */
+import * as progress from '@zag-js/progress'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  label: { type: String, default: '' },
+  tone: { type: String, default: 'primary' }, // primary | success | warning | danger
+  showValue: { type: Boolean, default: false },
+})
+
+const service = useMachine(progress.machine, {
+  id: useId(),
+  min: 0,
+  locale: 'ru-RU',
+  get value() {
+    return props.value
+  },
+  get max() {
+    return props.max
+  },
+})
+
+const api = computed(() => progress.connect(service, normalizeProps))
+</script>
+
+<template>
+  <div class="k-progress" v-bind="api.getRootProps()">
+    <div v-if="label || showValue" class="k-progress__head">
+      <span class="k-progress__label" v-bind="api.getLabelProps()">{{ label }}</span>
+      <span v-if="showValue" class="k-progress__value" v-bind="api.getValueTextProps()">{{ api.percentAsString }}</span>
+    </div>
+    <div class="k-progress__track" v-bind="api.getTrackProps()">
+      <div class="k-progress__bar" :class="`k-progress__bar--${tone}`" v-bind="api.getRangeProps()" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-progress__head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; font-size: 0.8125rem; }
+.k-progress__label { color: var(--k-text-muted); }
+.k-progress__value { font-weight: 600; font-variant-numeric: tabular-nums; }
+.k-progress__track { height: 0.5rem; background: var(--k-surface-muted); border-radius: 999px; overflow: hidden; }
+.k-progress__bar { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
+.k-progress__bar[data-state="indeterminate"] {
+  width: 40%;
+  animation: k-progress-slide 1.2s ease-in-out infinite;
+}
+.k-progress__bar--primary { background: var(--k-primary); }
+.k-progress__bar--success { background: var(--k-success); }
+.k-progress__bar--warning { background: var(--k-warning); }
+.k-progress__bar--danger { background: var(--k-danger); }
+@keyframes k-progress-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+</style>

package/src/components/KRadioGroup.vue

@@ -0,0 +1,103 @@
+<script setup>
+/**
+ * KRadioGroup — группа радио-кнопок на @zag-js/radio-group: навигация
+ * стрелками и roving tabindex от машины. Опции — строки или
+ * { value, label, hint?, disabled? }. Направление — колонка или строка.
+ */
+import * as radio from '@zag-js/radio-group'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, null], default: null },
+  options: { type: Array, default: () => [] },
+  label: { type: String, default: '' },
+  name: { type: String, default: '' },
+  inline: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const items = computed(() =>
+  props.options.map((o) => (typeof o === 'object' && o !== null ? o : { value: o, label: String(o) })),
+)
+
+const service = useMachine(radio.machine, {
+  id: useId(),
+  get value() {
+    return props.modelValue == null ? null : String(props.modelValue)
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get name() {
+    return props.name || undefined
+  },
+  get orientation() {
+    return props.inline ? 'horizontal' : 'vertical'
+  },
+  onValueChange({ value }) {
+    const item = items.value.find((i) => String(i.value) === value)
+    emit('update:modelValue', item ? item.value : value)
+  },
+})
+
+const api = computed(() => radio.connect(service, normalizeProps))
+
+const itemProps = (item) => ({ value: String(item.value), disabled: item.disabled })
+</script>
+
+<template>
+  <div class="k-radio" v-bind="api.getRootProps()">
+    <span v-if="label" class="k-radio__legend" v-bind="api.getLabelProps()">{{ label }}</span>
+    <div class="k-radio__items" :class="{ 'k-radio__items--inline': inline }">
+      <label
+        v-for="item in items"
+        :key="item.value"
+        class="k-radio__item"
+        v-bind="api.getItemProps(itemProps(item))"
+      >
+        <input v-bind="api.getItemHiddenInputProps(itemProps(item))" />
+        <span class="k-radio__control" v-bind="api.getItemControlProps(itemProps(item))" />
+        <span class="k-radio__body">
+          <span class="k-radio__label" v-bind="api.getItemTextProps(itemProps(item))">{{ item.label }}</span>
+          <span v-if="item.hint" class="k-radio__hint">{{ item.hint }}</span>
+        </span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-radio { min-width: 0; }
+.k-radio__legend { display: block; padding-bottom: 0.375rem; font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-radio__items { display: flex; flex-direction: column; gap: 0.5rem; }
+.k-radio__items--inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
+.k-radio__item { display: inline-flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
+.k-radio__item[data-disabled] { cursor: not-allowed; opacity: 0.6; }
+.k-radio__control {
+  position: relative;
+  width: 1.05rem;
+  height: 1.05rem;
+  margin-top: 0.15rem;
+  flex: none;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  border-radius: 50%;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.k-radio__control[data-hover]:not([data-disabled]) { border-color: var(--k-primary); }
+.k-radio__control[data-focus-visible] { box-shadow: 0 0 0 3px var(--k-primary-soft); border-color: var(--k-primary); }
+.k-radio__control[data-state="checked"] { border-color: var(--k-primary); }
+.k-radio__control[data-state="checked"]::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: var(--k-primary);
+}
+.k-radio__body { display: flex; flex-direction: column; gap: 0.1rem; }
+.k-radio__label { font-size: 0.9375rem; }
+.k-radio__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+</style>