@krometra/ui-kit 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krometra/ui-kit",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "UI-kit на Vue 3 со сменными темами, светлой и тёмной схемой; интерактивные компоненты на zag.js",
   "license": "MIT",
   "type": "module",

package/src/components/KChip.vue

@@ -0,0 +1,102 @@
+<script setup>
+/**
+ * KChip — кнопка-признак в виде таблетки: выбор вариантов, фильтры, теги.
+ *
+ *   v-model:pressed — нажата ли; без него чип — обычная кнопка (событие click)
+ *   tone     — цвет нажатого: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+ *   soft     — подкрашен тоном и без нажатия (кнопка меню, акцент)
+ *   dashed   — пунктирная рамка (вторичный вариант)
+ *   expanded — true/false рисует стрелку и ставит aria-expanded (чип открывает панель)
+ *   marked   — точка перед подписью: внутри что-то выбрано
+ *   size     — 'md' (по умолчанию) | 'sm'
+ *   icon     — семантическое имя KIcon перед подписью
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  pressed: { type: Boolean, default: undefined },
+  tone: { type: String, default: 'primary' },
+  soft: { type: Boolean, default: false },
+  dashed: { type: Boolean, default: false },
+  expanded: { type: Boolean, default: undefined },
+  marked: { type: Boolean, default: false },
+  size: { type: String, default: 'md' },
+  icon: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:pressed', 'click'])
+
+const toggle = computed(() => props.pressed !== undefined)
+const menu = computed(() => props.expanded !== undefined)
+
+function click(event) {
+  if (toggle.value) emit('update:pressed', !props.pressed)
+  emit('click', event)
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="k-chip"
+    :class="[
+      `k-chip--${tone}`,
+      `k-chip--${size}`,
+      { 'k-chip--on': pressed, 'k-chip--soft': soft, 'k-chip--dashed': dashed },
+    ]"
+    :aria-pressed="toggle ? String(!!pressed) : undefined"
+    :aria-expanded="menu ? String(!!expanded) : undefined"
+    :disabled="disabled"
+    @click="click"
+  >
+    <span v-if="marked" class="k-chip__mark" />
+    <KIcon v-if="icon" :name="icon" :size="size === 'sm' ? 13 : 15" />
+    <span class="k-chip__label"><slot /></span>
+    <KIcon v-if="menu" :name="expanded ? 'chevron-up' : 'chevron-down'" :size="size === 'sm' ? 13 : 14" />
+  </button>
+</template>
+
+<style scoped>
+.k-chip {
+  --tone: var(--k-primary);
+  --tone-soft: var(--k-primary-soft);
+  --tone-strong: var(--k-primary);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--k-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--k-text);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
+}
+.k-chip--sm { padding: 0.15rem 0.6rem; font-size: 0.8125rem; }
+.k-chip__label { min-width: 0; overflow-wrap: anywhere; }
+.k-chip__mark { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
+.k-chip:hover:not(:disabled) { border-color: var(--k-border-strong); }
+.k-chip:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
+.k-chip:disabled { opacity: 0.5; cursor: not-allowed; }
+.k-chip--dashed { border-style: dashed; }
+.k-chip--on,
+.k-chip--soft { background: var(--tone-soft); border-color: var(--tone); color: var(--tone-strong); font-weight: 500; }
+.k-chip--on:hover:not(:disabled),
+.k-chip--soft:hover:not(:disabled) { border-color: var(--tone-strong); }
+
+.k-chip--neutral { --tone: var(--k-border-strong); --tone-soft: var(--k-surface-muted); --tone-strong: var(--k-text); }
+.k-chip--success { --tone: var(--k-success); --tone-soft: var(--k-success-soft); --tone-strong: var(--k-success-strong); }
+.k-chip--warning { --tone: var(--k-warning); --tone-soft: var(--k-warning-soft); --tone-strong: var(--k-warning-strong); }
+.k-chip--danger { --tone: var(--k-danger); --tone-soft: var(--k-danger-soft); --tone-strong: var(--k-danger-strong); }
+.k-chip--info { --tone: var(--k-info); --tone-soft: var(--k-info-soft); --tone-strong: var(--k-info-strong); }
+
+@media (prefers-reduced-motion: reduce) {
+  .k-chip { transition: none; }
+}
+</style>

package/src/components/KCombobox.vue

@@ -85,8 +85,8 @@ const service = useMachine(combobox.machine, {
     const match = itemFor(props.modelValue)
     return match ? [keyOf(match)] : []
   },
-  onOpenChange() {
-    filtered.value = items.value
+  onOpenChange({ open }) {
+    if (!open) filtered.value = items.value
   },
   onInputValueChange({ inputValue }) {
     applyFilter(inputValue)

package/src/components/KDrawer.vue

@@ -0,0 +1,176 @@
+<script setup>
+/**
+ * KDrawer — боковая панель на @zag-js/dialog: карточка записи, подробности,
+ * фильтры. Выезжает справа или слева, закрывается по Esc и крестику.
+ * Открытие управляется v-model.
+ *
+ *   side  — 'right' (по умолчанию) | 'left'
+ *   size  — 'sm' | 'md' | 'lg'
+ *   modal — с затемнением, фокус-трапом и блокировкой скролла (по умолчанию).
+ *           `:modal="false"` оставляет страницу живой: можно кликать по списку
+ *           и менять содержимое панели, не закрывая её.
+ *
+ *   <KDrawer v-model="open" :title="issue.key" :subtitle="issue.summary" :modal="false">
+ *     …
+ *     <template #actions><KButton variant="ghost" icon="external" /></template>
+ *     <template #footer><KButton variant="primary">Сохранить</KButton></template>
+ *   </KDrawer>
+ */
+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: '' },
+  side: { type: String, default: 'right' },
+  size: { type: String, default: 'md' },
+  modal: { type: Boolean, default: true },
+  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 modal() {
+    return props.modal
+  },
+  get trapFocus() {
+    return props.modal
+  },
+  get preventScroll() {
+    return props.modal
+  },
+  get closeOnInteractOutside() {
+    return props.modal && 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">
+    <Transition name="k-drawer" :duration="220">
+      <div v-if="api.open" class="k-drawer" :class="[`k-drawer--${side}`, { 'k-drawer--modal': modal }]">
+        <div v-if="modal" class="k-drawer__backdrop" v-bind="api.getBackdropProps()" />
+        <div class="k-drawer__positioner" v-bind="api.getPositionerProps()">
+          <aside class="k-drawer__panel" :class="`k-drawer__panel--${size}`" v-bind="api.getContentProps()">
+            <header class="k-drawer__header">
+              <div class="k-drawer__heading">
+                <slot name="header">
+                  <h2 class="k-drawer__title" v-bind="api.getTitleProps()">{{ title }}</h2>
+                  <p v-if="subtitle" class="k-drawer__subtitle" v-bind="api.getDescriptionProps()">{{ subtitle }}</p>
+                </slot>
+              </div>
+              <div class="k-drawer__tools">
+                <slot name="actions" />
+                <button v-if="closable" class="k-drawer__close" aria-label="Закрыть" v-bind="api.getCloseTriggerProps()">
+                  <KIcon name="close" :size="18" />
+                </button>
+              </div>
+            </header>
+            <div class="k-drawer__body"><slot /></div>
+            <footer v-if="$slots.footer" class="k-drawer__footer"><slot name="footer" /></footer>
+          </aside>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.k-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--k-overlay);
+  backdrop-filter: blur(2px);
+}
+.k-drawer__positioner {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  pointer-events: none;
+}
+.k-drawer--right .k-drawer__positioner { right: 0; }
+.k-drawer--left .k-drawer__positioner { left: 0; }
+.k-drawer__panel {
+  pointer-events: auto;
+  width: min(100vw, var(--k-drawer-w, 32rem));
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--k-surface);
+  box-shadow: var(--k-shadow-lg);
+  outline: none;
+}
+.k-drawer--right .k-drawer__panel { border-left: 1px solid var(--k-border); }
+.k-drawer--left .k-drawer__panel { border-right: 1px solid var(--k-border); }
+.k-drawer__panel--sm { --k-drawer-w: 24rem; }
+.k-drawer__panel--md { --k-drawer-w: 32rem; }
+.k-drawer__panel--lg { --k-drawer-w: 44rem; }
+.k-drawer__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-drawer__heading { min-width: 0; }
+.k-drawer__title { font-size: 1.0625rem; font-weight: 600; }
+.k-drawer__subtitle { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-drawer__tools { display: flex; align-items: center; gap: 0.25rem; flex: none; }
+.k-drawer__close {
+  background: none;
+  border: none;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  padding: 0.15rem;
+  border-radius: var(--k-radius-sm);
+}
+.k-drawer__close:hover { background: var(--k-surface-muted); color: var(--k-text); }
+.k-drawer__close:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 1px; }
+.k-drawer__body { flex: 1; padding: 1.25rem; overflow-y: auto; }
+.k-drawer__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);
+}
+
+.k-drawer-enter-active .k-drawer__panel,
+.k-drawer-leave-active .k-drawer__panel { transition: transform 0.22s ease; }
+.k-drawer-enter-active .k-drawer__backdrop,
+.k-drawer-leave-active .k-drawer__backdrop { transition: opacity 0.22s ease; }
+.k-drawer-enter-from.k-drawer--right .k-drawer__panel,
+.k-drawer-leave-to.k-drawer--right .k-drawer__panel { transform: translateX(100%); }
+.k-drawer-enter-from.k-drawer--left .k-drawer__panel,
+.k-drawer-leave-to.k-drawer--left .k-drawer__panel { transform: translateX(-100%); }
+.k-drawer-enter-from .k-drawer__backdrop,
+.k-drawer-leave-to .k-drawer__backdrop { opacity: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .k-drawer-enter-active .k-drawer__panel,
+  .k-drawer-leave-active .k-drawer__panel { transition: none; }
+}
+</style>

package/src/components/KGantt.vue

@@ -12,6 +12,10 @@
  *   muted   — завершённая или неактуальная задача, полоса приглушена
  *   segments — несколько отрезков в одной строке (работа с перерывами)
  *   dayWidth — минимальная ширина дня в px; свободное место колонки дней делят поровну
+ *   selected — key выбранной задачи, её строка подсвечивается
+ *
+ * Клик по полосе или по названию задачи — событие item-click (у полосы с href
+ * открывается ссылка).
  *
  *   <KGantt :items="tasks" :groups="people" from="2026-10-19" to="2026-11-06"
  *           @item-click="open">
@@ -34,6 +38,7 @@ const props = defineProps({
   dayWidth: { type: Number, default: 56 },
   labelWidth: { type: String, default: '18rem' },
   emptyText: { type: String, default: 'Нет задач в этом периоде' },
+  selected: { type: [String, Number], default: null },
 })
 
 const emit = defineEmits(['item-click'])
@@ -161,13 +166,22 @@ function open(item) {
           </template>
 
           <template v-else>
-            <div class="k-gantt__label" :class="{ 'k-gantt__label--muted': row.item.muted }" :style="{ gridRow: r + 2 }">
+            <div
+              class="k-gantt__label k-gantt__label--item"
+              :class="{ 'k-gantt__label--muted': row.item.muted, 'k-gantt__label--selected': row.item.key === selected }"
+              :style="{ gridRow: r + 2 }"
+              role="button"
+              tabindex="0"
+              @click="open(row.item)"
+              @keydown.enter.prevent="open(row.item)"
+              @keydown.space.prevent="open(row.item)"
+            >
               <slot name="label" :item="row.item">
                 <span v-if="row.item.code" class="k-gantt__code">{{ row.item.code }}</span>
                 <span class="k-gantt__title">{{ row.item.label }}</span>
               </slot>
             </div>
-            <div class="k-gantt__track" :style="{ gridRow: r + 2 }">
+            <div class="k-gantt__track" :class="{ 'k-gantt__track--selected': row.item.key === selected }" :style="{ gridRow: r + 2 }">
               <div
                 v-for="(bar, b) in row.bars"
                 :key="b"
@@ -288,6 +302,11 @@ function open(item) {
   color: var(--k-text);
 }
 .k-gantt__label--muted { color: var(--k-text-faint); }
+.k-gantt__label--item { cursor: pointer; }
+.k-gantt__label--item:hover { background: var(--k-surface-muted); }
+.k-gantt__label--item:focus-visible { outline: 2px solid var(--k-primary); outline-offset: -2px; }
+.k-gantt__label--selected,
+.k-gantt__label--selected:hover { background: var(--k-primary-soft); box-shadow: inset 3px 0 0 var(--k-primary); }
 .k-gantt__label--group {
   padding-left: 0.5rem;
   border: none;
@@ -324,6 +343,7 @@ function open(item) {
   border-bottom: 1px solid var(--k-border);
 }
 .k-gantt__track--group { background: var(--k-surface-muted); }
+.k-gantt__track--selected { background: color-mix(in srgb, var(--k-primary-soft) 55%, transparent); }
 .k-gantt__summary {
   position: absolute;
   z-index: 1;

package/src/index.js

@@ -22,9 +22,11 @@ import KBadge from './components/KBadge.vue'
 import KButton from './components/KButton.vue'
 import KCard from './components/KCard.vue'
 import KCheckbox from './components/KCheckbox.vue'
+import KChip from './components/KChip.vue'
 import KCombobox from './components/KCombobox.vue'
 import KCountdown from './components/KCountdown.vue'
 import KDescriptions from './components/KDescriptions.vue'
+import KDrawer from './components/KDrawer.vue'
 import KDropdown from './components/KDropdown.vue'
 import KEmpty from './components/KEmpty.vue'
 import KFileUpload from './components/KFileUpload.vue'
@@ -53,8 +55,8 @@ import KToast from './components/KToast.vue'
 import KTooltip from './components/KTooltip.vue'
 
 export {
-  KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
-  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  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,
@@ -69,8 +71,8 @@ export { useToast, pushToast, dismissToast, toastStore } from './composables/use
 export * from './format.js'
 
 const components = {
-  KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
-  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  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,