@krometra/ui-kit 0.4.0 → 0.5.0

package/package.json

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

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

@@ -11,6 +11,11 @@
  *   tone    — 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
  *   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">
@@ -33,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'])
@@ -102,13 +108,16 @@ const rows = computed(() => {
 const gridStyle = computed(() => ({
   '--k-gantt-day-w': `${props.dayWidth}px`,
   '--k-gantt-label-w': props.labelWidth,
-  gridTemplateColumns: `var(--k-gantt-label-w) repeat(${days.value.length}, var(--k-gantt-day-w))`,
+  gridTemplateColumns: `var(--k-gantt-label-w) repeat(${days.value.length}, minmax(var(--k-gantt-day-w), 1fr))`,
 }))
 
-const barStyle = (bar) => ({
-  left: `calc(var(--k-gantt-day-w) * ${bar.first} + 3px)`,
-  width: `calc(var(--k-gantt-day-w) * ${bar.last - bar.first + 1} - 6px)`,
-})
+const barStyle = (bar) => {
+  const n = days.value.length
+  return {
+    left: `calc(${(bar.first / n) * 100}% + 3px)`,
+    width: `calc(${((bar.last - bar.first + 1) / n) * 100}% - 6px)`,
+  }
+}
 
 const dayLines = computed(() => {
   const marks = []
@@ -157,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"
@@ -218,7 +236,7 @@ function open(item) {
   overflow: hidden;
 }
 .k-gantt__scroll { overflow: auto; max-height: inherit; }
-.k-gantt__grid { display: grid; grid-auto-rows: minmax(2.25rem, auto); position: relative; width: max-content; min-width: 100%; }
+.k-gantt__grid { display: grid; grid-auto-rows: minmax(2.25rem, auto); position: relative; min-width: max-content; }
 
 .k-gantt__corner,
 .k-gantt__day {
@@ -284,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;
@@ -320,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

@@ -25,6 +25,7 @@ import KCheckbox from './components/KCheckbox.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'
@@ -54,7 +55,7 @@ import KTooltip from './components/KTooltip.vue'
 
 export {
   KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
-  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  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,
@@ -70,7 +71,7 @@ export * from './format.js'
 
 const components = {
   KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
-  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  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,