@krometra/ui-kit 0.0.0-stage → 0.4.0

package/src/components/KCombobox.vue

@@ -0,0 +1,232 @@
+<script setup>
+/**
+ * KCombobox — поле с поиском по списку на @zag-js/combobox.
+ *
+ * Для длинных справочников (контрагенты, пользователи), где нативный select
+ * неудобен. Фильтрует по подписи локально; для серверного поиска слушайте
+ * событие `search` и подменяйте `options`.
+ *
+ *   <KCombobox v-model="form.counterpartyId" :options="counterparties"
+ *               :get-value="c => c.id" :get-label="c => c.name" label="Контрагент" />
+ */
+import * as combobox from '@zag-js/combobox'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, ref, useAttrs, useId, watch } from 'vue'
+import KIcon from './KIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+
+const props = defineProps({
+  modelValue: { type: [String, Number, null], default: null },
+  options: { type: Array, default: () => [] },
+  getValue: { type: Function, default: (o) => o.value ?? o.id },
+  getLabel: { type: Function, default: (o) => o.label ?? o.name ?? '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: 'Начните вводить…' },
+  hint: { type: String, default: '' },
+  error: { type: String, default: '' },
+  emptyText: { type: String, default: 'Ничего не найдено' },
+  name: { type: String, default: '' },
+  required: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'search'])
+
+const items = computed(() =>
+  props.options.map((o) => (typeof o === 'object' && o !== null ? o : { value: o, label: String(o) })),
+)
+const keyOf = (item) => String(props.getValue(item))
+const labelOf = (item) => String(props.getLabel(item))
+
+const filtered = ref([])
+watch(items, (next) => { filtered.value = next }, { immediate: true })
+
+function applyFilter(text) {
+  const q = (text || '').toLowerCase().trim()
+  filtered.value = q ? items.value.filter((i) => labelOf(i).toLowerCase().includes(q)) : items.value
+}
+
+const collection = computed(() =>
+  combobox.collection({ items: filtered.value, itemToValue: keyOf, itemToString: labelOf }),
+)
+
+function itemFor(raw) {
+  if (raw == null || raw === '') return undefined
+  return items.value.find((i) => keyOf(i) === String(raw))
+}
+
+const service = useMachine(combobox.machine, {
+  id: useId(),
+  positioning: { sameWidth: true },
+  get collection() {
+    return collection.value
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get invalid() {
+    return !!props.error
+  },
+  get required() {
+    return props.required
+  },
+  get name() {
+    return props.name || undefined
+  },
+  get placeholder() {
+    return props.placeholder
+  },
+  get value() {
+    const match = itemFor(props.modelValue)
+    return match ? [keyOf(match)] : []
+  },
+  onOpenChange() {
+    filtered.value = items.value
+  },
+  onInputValueChange({ inputValue }) {
+    applyFilter(inputValue)
+    emit('search', inputValue)
+  },
+  onValueChange({ value }) {
+    const item = itemFor(value[0])
+    emit('update:modelValue', item !== undefined ? props.getValue(item) : null)
+  },
+})
+
+const api = computed(() => combobox.connect(service, normalizeProps))
+</script>
+
+<template>
+  <div class="k-combobox" v-bind="{ ...rootAttrs, ...api.getRootProps() }">
+    <label v-if="label" class="k-combobox__label" v-bind="api.getLabelProps()">
+      {{ label }}<span v-if="required" class="k-combobox__req">*</span>
+    </label>
+    <div
+      class="k-combobox__box"
+      :class="{ 'k-combobox__box--error': error, 'k-combobox__box--disabled': disabled }"
+      v-bind="api.getControlProps()"
+    >
+      <input class="k-combobox__input" v-bind="api.getInputProps()" />
+      <button
+        v-if="clearable && api.hasSelectedItems"
+        class="k-combobox__clear"
+        aria-label="Очистить"
+        v-bind="api.getClearTriggerProps()"
+      >
+        <KIcon name="close" :size="14" />
+      </button>
+      <button class="k-combobox__trigger" aria-label="Показать список" v-bind="api.getTriggerProps()">
+        <KIcon name="chevron-down" :size="16" />
+      </button>
+    </div>
+    <span v-if="error" class="k-combobox__error">{{ error }}</span>
+    <span v-else-if="hint" class="k-combobox__hint">{{ hint }}</span>
+
+    <Teleport to="body">
+      <div v-bind="api.getPositionerProps()">
+        <ul class="k-combobox__content" v-bind="api.getContentProps()">
+          <li
+            v-for="item in filtered"
+            :key="keyOf(item)"
+            class="k-combobox__item"
+            v-bind="api.getItemProps({ item })"
+          >
+            <span class="k-combobox__item-text" v-bind="api.getItemTextProps({ item })">{{ labelOf(item) }}</span>
+            <span class="k-combobox__item-check" v-bind="api.getItemIndicatorProps({ item })">
+              <KIcon name="check" :size="15" />
+            </span>
+          </li>
+          <li v-if="!filtered.length" class="k-combobox__empty">{{ emptyText }}</li>
+        </ul>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.k-combobox { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; min-width: 0; }
+.k-combobox__label { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-combobox__req { color: var(--k-danger); margin-left: 2px; }
+.k-combobox__box {
+  display: flex;
+  align-items: center;
+  height: var(--k-control-h);
+  padding-right: 0.25rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  border-radius: var(--k-radius-sm);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.k-combobox__box:focus-within { border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
+.k-combobox__box--error { border-color: var(--k-danger); }
+.k-combobox__box--error:focus-within { box-shadow: 0 0 0 3px var(--k-danger-soft); }
+.k-combobox__box--disabled { background: var(--k-surface-muted); }
+.k-combobox__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 0.625rem;
+  border: none;
+  background: none;
+  outline: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  color: inherit;
+}
+.k-combobox__input::placeholder { color: var(--k-text-faint); }
+.k-combobox__input:disabled { cursor: not-allowed; color: var(--k-text-muted); }
+.k-combobox__clear,
+.k-combobox__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  border: none;
+  border-radius: var(--k-radius-sm);
+  background: none;
+  color: var(--k-text-faint);
+  cursor: pointer;
+}
+.k-combobox__clear:hover,
+.k-combobox__trigger:hover:not(:disabled) { color: var(--k-text); background: var(--k-surface-muted); }
+.k-combobox__trigger:disabled { cursor: not-allowed; }
+.k-combobox__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+.k-combobox__error { font-size: 0.75rem; color: var(--k-danger); }
+
+.k-combobox__content {
+  z-index: 1100;
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem;
+  max-height: 260px;
+  overflow-y: auto;
+  min-width: var(--reference-width);
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-md);
+  outline: none;
+}
+.k-combobox__content[hidden] { display: none; }
+.k-combobox__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: var(--k-radius-sm);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.k-combobox__item[data-highlighted] { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-combobox__item[data-state="checked"] { font-weight: 600; }
+.k-combobox__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k-combobox__item-check { display: inline-flex; flex: none; }
+.k-combobox__item-check[hidden] { display: none; }
+.k-combobox__empty { padding: 0.5rem 0.6rem; font-size: 0.875rem; color: var(--k-text-muted); }
+</style>

package/src/components/KCountdown.vue

@@ -0,0 +1,74 @@
+<script setup>
+/**
+ * KCountdown — обратный отсчёт до момента времени: дедлайн, окончание сессии,
+ * старт события.
+ *
+ * Тикает раз в секунду от переданного времени окончания. За `warnAt` секунд до
+ * нуля подсвечивается жёлтым, за `dangerAt` — красным, чтобы приближение
+ * дедлайна было заметно без чтения цифр.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  to: { type: [String, Number, Date], required: true },
+  warnAt: { type: Number, default: 300 },
+  dangerAt: { type: Number, default: 60 },
+  showIcon: { type: Boolean, default: true },
+  size: { type: String, default: 'md' }, // sm | md | lg
+  endedText: { type: String, default: 'Завершено' },
+})
+
+const now = ref(Date.now())
+let timer = null
+
+onMounted(() => { timer = setInterval(() => { now.value = Date.now() }, 1000) })
+onBeforeUnmount(() => clearInterval(timer))
+
+const left = computed(() => Math.max(0, Math.floor((new Date(props.to).getTime() - now.value) / 1000)))
+const ended = computed(() => left.value <= 0)
+
+const tone = computed(() => {
+  if (ended.value) return 'ended'
+  if (left.value <= props.dangerAt) return 'danger'
+  if (left.value <= props.warnAt) return 'warning'
+  return 'normal'
+})
+
+const text = computed(() => {
+  if (ended.value) return props.endedText
+  const s = left.value
+  const d = Math.floor(s / 86400)
+  const h = Math.floor((s % 86400) / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  const pad = (n) => String(n).padStart(2, '0')
+  if (d > 0) return `${d} д ${pad(h)}:${pad(m)}:${pad(sec)}`
+  return `${pad(h)}:${pad(m)}:${pad(sec)}`
+})
+</script>
+
+<template>
+  <span class="k-countdown" :class="[`k-countdown--${tone}`, `k-countdown--${size}`]">
+    <KIcon v-if="showIcon" name="clock" :size="size === 'lg' ? 18 : 14" />
+    {{ text }}
+  </span>
+</template>
+
+<style scoped>
+.k-countdown {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.k-countdown--sm { font-size: 0.8125rem; }
+.k-countdown--md { font-size: 0.9375rem; }
+.k-countdown--lg { font-size: 1.5rem; letter-spacing: -0.01em; }
+.k-countdown--normal { color: var(--k-text); }
+.k-countdown--warning { color: var(--k-warning-strong); }
+.k-countdown--danger { color: var(--k-danger); }
+.k-countdown--ended { color: var(--k-text-faint); font-weight: 500; }
+</style>

package/src/components/KDescriptions.vue

@@ -0,0 +1,40 @@
+<script setup>
+/**
+ * KDescriptions — список «поле → значение» для карточек сущностей.
+ * Значение можно переопределить слотом `#value-<key>`.
+ *
+ *   items: [{ key, label, value? }]
+ */
+defineProps({
+  items: { type: Array, default: () => [] },
+  columns: { type: Number, default: 2 },
+})
+</script>
+
+<template>
+  <dl class="k-desc" :style="{ '--k-desc-cols': columns }">
+    <div v-for="item in items" :key="item.key" class="k-desc__row" :class="{ 'k-desc__row--wide': item.wide }">
+      <dt class="k-desc__label">{{ item.label }}</dt>
+      <dd class="k-desc__value">
+        <slot :name="`value-${item.key}`" :item="item">{{ item.value ?? '—' }}</slot>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped>
+.k-desc {
+  display: grid;
+  grid-template-columns: repeat(var(--k-desc-cols, 2), minmax(0, 1fr));
+  gap: 0.875rem 1.5rem;
+  margin: 0;
+}
+.k-desc__row { min-width: 0; }
+.k-desc__row--wide { grid-column: 1 / -1; }
+.k-desc__label { font-size: 0.75rem; color: var(--k-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
+.k-desc__value { margin: 0.2rem 0 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
+
+@media (max-width: 720px) {
+  .k-desc { grid-template-columns: 1fr; }
+}
+</style>

package/src/components/KDropdown.vue

@@ -0,0 +1,111 @@
+<script setup>
+/**
+ * KDropdown — кнопка, раскрывающая плавающую панель, на @zag-js/popover.
+ *
+ * Позиционирование, закрытие по клику вне и Esc, возврат фокуса — от машины.
+ * Панель рендерится в <body>, поэтому не обрезается таблицами и модалками.
+ *
+ * Триггер — либо собственная кнопка кита (пропы label/icon/variant/size), либо
+ * слот #trigger, который обязан привязать `props` к своему элементу:
+ *
+ *   <KDropdown label="Экспорт" v-slot="{ close }">
+ *     <KMenuItem icon="download">PDF</KMenuItem>
+ *   </KDropdown>
+ *
+ *   <KDropdown #trigger="{ props }">
+ *     <KButton v-bind="props" variant="ghost" icon="more" />
+ *   </KDropdown>
+ *
+ * Клик по KMenuItem закрывает панель (`close-on-select`); для панелей с
+ * формой внутри используйте `close` из слота.
+ */
+import * as popover from '@zag-js/popover'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KButton from './KButton.vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: undefined },
+  label: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  iconEnd: { type: String, default: undefined },
+  variant: { type: String, default: 'secondary' },
+  size: { type: String, default: 'md' },
+  align: { type: String, default: 'end' }, // start | end
+  placement: { type: String, default: '' },
+  width: { type: String, default: '13rem' },
+  closeOnSelect: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const triggerIcon = computed(() => (props.label ? props.icon : props.icon || 'more'))
+const triggerIconEnd = computed(() => (props.label ? props.iconEnd ?? 'chevron-down' : ''))
+
+const service = useMachine(popover.machine, {
+  id: useId(),
+  get positioning() {
+    return { placement: props.placement || (props.align === 'start' ? 'bottom-start' : 'bottom-end') }
+  },
+  get open() {
+    return props.modelValue
+  },
+  onOpenChange(details) {
+    emit('update:modelValue', details.open)
+  },
+})
+
+const api = computed(() => popover.connect(service, normalizeProps))
+
+function close() {
+  api.value.setOpen(false)
+}
+
+function onContentClick(event) {
+  if (props.closeOnSelect && event.target.closest('[data-k-menu-item]')) close()
+}
+</script>
+
+<template>
+  <span class="k-dropdown">
+    <slot name="trigger" :props="api.getTriggerProps()" :open="api.open">
+      <KButton
+        v-bind="api.getTriggerProps()"
+        :variant="variant"
+        :size="size"
+        :icon="triggerIcon"
+        :icon-end="triggerIconEnd"
+        :disabled="disabled"
+      >
+        <template v-if="label" #default>{{ label }}</template>
+      </KButton>
+    </slot>
+    <Teleport to="body">
+      <div v-bind="api.getPositionerProps()">
+        <div
+          class="k-dropdown__menu"
+          :style="{ minWidth: width }"
+          v-bind="api.getContentProps()"
+          @click="onContentClick"
+        >
+          <slot :close="close" />
+        </div>
+      </div>
+    </Teleport>
+  </span>
+</template>
+
+<style scoped>
+.k-dropdown { display: inline-flex; }
+.k-dropdown__menu {
+  z-index: 1100;
+  padding: 0.3rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-md);
+  outline: none;
+}
+.k-dropdown__menu[hidden] { display: none; }
+</style>

package/src/components/KEmpty.vue

@@ -0,0 +1,39 @@
+<script setup>
+/**
+ * KEmpty — пустое состояние списка: иконка, заголовок, пояснение и действие.
+ */
+import KIcon from './KIcon.vue'
+
+defineProps({
+  icon: { type: String, default: 'search' },
+  title: { type: String, default: 'Ничего не найдено' },
+  description: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="k-empty">
+    <span class="k-empty__icon"><KIcon :name="icon" :size="24" /></span>
+    <p class="k-empty__title">{{ title }}</p>
+    <p v-if="description" class="k-empty__desc">{{ description }}</p>
+    <div v-if="$slots.default" class="k-empty__actions"><slot /></div>
+  </div>
+</template>
+
+<style scoped>
+.k-empty { padding: 2.5rem 1.5rem; text-align: center; }
+.k-empty__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: var(--k-surface-muted);
+  color: var(--k-text-faint);
+  margin-bottom: 0.75rem;
+}
+.k-empty__title { font-weight: 600; }
+.k-empty__desc { margin-top: 0.25rem; font-size: 0.875rem; color: var(--k-text-muted); }
+.k-empty__actions { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }
+</style>

package/src/components/KFileUpload.vue

@@ -0,0 +1,121 @@
+<script setup>
+/**
+ * KFileUpload — зона загрузки файлов на @zag-js/file-upload: drag-and-drop,
+ * выбор по клику, проверка типа и размера, список выбранного с удалением.
+ *
+ * В v-model живут объекты File; отправка — забота приложения, кит не
+ * навязывает транспорт. Отклонённые файлы приходят событием `reject`.
+ *
+ *   <KFileUpload v-model="files" accept=".pdf,application/pdf" :max-file-size="50 * 1024 * 1024" />
+ */
+import * as fileUpload from '@zag-js/file-upload'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  label: { type: String, default: 'Перетащите файлы или нажмите для выбора' },
+  hint: { type: String, default: '' },
+  accept: { type: String, default: '' },
+  multiple: { type: Boolean, default: true },
+  maxFileSize: { type: Number, default: Infinity },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'reject'])
+
+const service = useMachine(fileUpload.machine, {
+  id: useId(),
+  locale: 'ru-RU',
+  get accept() {
+    return props.accept ? props.accept.split(',').map((s) => s.trim()).filter(Boolean) : undefined
+  },
+  get maxFiles() {
+    return props.multiple ? Infinity : 1
+  },
+  get maxFileSize() {
+    return props.maxFileSize
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get acceptedFiles() {
+    return props.modelValue
+  },
+  onFileChange({ acceptedFiles, rejectedFiles }) {
+    emit('update:modelValue', acceptedFiles)
+    if (rejectedFiles.length) emit('reject', rejectedFiles)
+  },
+})
+
+const api = computed(() => fileUpload.connect(service, normalizeProps))
+</script>
+
+<template>
+  <div class="k-upload" v-bind="api.getRootProps()">
+    <div class="k-upload__zone" v-bind="api.getDropzoneProps()">
+      <KIcon name="upload" :size="20" class="k-upload__icon" />
+      <span class="k-upload__label">{{ label }}</span>
+      <span v-if="hint" class="k-upload__hint">{{ hint }}</span>
+    </div>
+    <input v-bind="api.getHiddenInputProps()" />
+
+    <ul v-if="api.acceptedFiles.length" class="k-upload__list" v-bind="api.getItemGroupProps()">
+      <li
+        v-for="file in api.acceptedFiles"
+        :key="`${file.name}-${file.size}-${file.lastModified}`"
+        class="k-upload__file"
+        v-bind="api.getItemProps({ file })"
+      >
+        <KIcon name="document" :size="16" class="k-upload__file-icon" />
+        <span class="k-upload__file-name" v-bind="api.getItemNameProps({ file })">{{ file.name }}</span>
+        <span class="k-upload__file-size" v-bind="api.getItemSizeTextProps({ file })">{{ api.getFileSize(file) }}</span>
+        <button class="k-upload__remove" aria-label="Удалить" v-bind="api.getItemDeleteTriggerProps({ file })">
+          <KIcon name="close" :size="14" />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.k-upload__zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 1.25rem;
+  background: var(--k-surface-muted);
+  border: 1px dashed var(--k-border-strong);
+  border-radius: var(--k-radius);
+  color: var(--k-text-muted);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+.k-upload__zone:hover:not([data-disabled]),
+.k-upload__zone[data-dragging],
+.k-upload__zone:focus-visible { border-color: var(--k-primary); background: var(--k-primary-soft); }
+.k-upload__zone[data-disabled] { opacity: 0.6; cursor: not-allowed; }
+.k-upload__icon { color: var(--k-text-faint); }
+.k-upload__label { font-size: 0.875rem; color: var(--k-text); }
+.k-upload__hint { font-size: 0.75rem; }
+.k-upload__list { margin: 0.625rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
+.k-upload__file {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius-sm);
+  font-size: 0.875rem;
+}
+.k-upload__file-icon { color: var(--k-text-faint); }
+.k-upload__file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k-upload__file-size { font-size: 0.75rem; color: var(--k-text-muted); }
+.k-upload__remove { background: none; border: none; color: var(--k-text-faint); cursor: pointer; padding: 0.1rem; }
+.k-upload__remove:hover { color: var(--k-danger); }
+</style>