webcake-ui-kit 1.1.29 → 1.1.31

package/src/components/date-picker/PanelHeader.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="ui-cal-header">
+    <div class="ui-cal-header__nav ui-cal-header__nav--prev">
+      <WkButton v-if="showYearJump" variant="ghost" size="xs" aria-label="Previous year" @click="$emit('prev-year')">
+        <template #icon><WkiChevronsLeft :size="16" /></template>
+      </WkButton>
+      <WkButton variant="ghost" size="xs" :disabled="!canPrev" aria-label="Previous month" @click="$emit('prev')">
+        <template #icon><WkiChevronLeft :size="16" /></template>
+      </WkButton>
+    </div>
+
+    <div class="ui-cal-header__labels">
+      <div v-for="(panel, i) in panels" :key="i" class="ui-cal-header__group">
+        <!-- Month: WkSelect when opted-in, otherwise the clickable text label. -->
+        <span v-if="showSelectMonth" class="ui-cal-header__select ui-cal-header__select--month">
+          <WkSelect
+            size="xs"
+            :value="String(panel.month)"
+            :options="monthOptions"
+            @change="m => $emit('set-month', { index: i, month: Number(m) })"
+          />
+        </span>
+        <button
+          v-else
+          type="button"
+          :class="[
+            'ui-cal-header__label',
+            showSelectYear && !showSelectMonth && 'ui-cal-header__label_month_not_select'
+          ]"
+          @click="$emit('label-click', { index: i, part: 'month' })"
+        >
+          {{ monthName(panel.month) }}
+        </button>
+
+        <!-- Year: WkSelect when opted-in, otherwise the clickable text label. -->
+        <span v-if="showSelectYear" class="ui-cal-header__select ui-cal-header__select--year">
+          <WkSelect
+            size="xs"
+            :value="String(panel.year)"
+            :options="yearOptions"
+            @change="y => $emit('set-year', { index: i, year: Number(y) })"
+          />
+        </span>
+        <button
+          v-else
+          type="button"
+          :class="[
+            'ui-cal-header__label',
+            !showSelectYear && showSelectMonth && 'ui-cal-header__label_year_not_select'
+          ]"
+          @click="$emit('label-click', { index: i, part: 'year' })"
+        >
+          {{ panel.year }}
+        </button>
+      </div>
+    </div>
+
+    <div class="ui-cal-header__nav ui-cal-header__nav--next">
+      <WkButton variant="ghost" size="xs" :disabled="!canNext" aria-label="Next month" @click="$emit('next')">
+        <template #icon><WkiChevronRight :size="16" /></template>
+      </WkButton>
+      <WkButton v-if="showYearJump" variant="ghost" size="xs" aria-label="Next year" @click="$emit('next-year')">
+        <template #icon><WkiChevronsRight :size="16" /></template>
+      </WkButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import WkButton from '../button/Button.vue'
+import WkSelect from '../select/Select.vue'
+import { WkiChevronLeft, WkiChevronRight, WkiChevronsLeft, WkiChevronsRight } from '../../icons'
+
+export default {
+  name: 'PanelHeader',
+  components: { WkButton, WkSelect, WkiChevronLeft, WkiChevronRight, WkiChevronsLeft, WkiChevronsRight },
+  props: {
+    // One entry per visible month: { month: 0-11, year: Number }.
+    panels: { type: Array, default: () => [] },
+    // Localized month names as select options: [{ label, value: '0'..'11' }].
+    monthOptions: { type: Array, default: () => [] },
+    // Selectable years: [{ label, value: 'YYYY' }].
+    yearOptions: { type: Array, default: () => [] },
+    // Swap the month / year label for a WkSelect dropdown.
+    showSelectMonth: { type: Boolean, default: false },
+    showSelectYear: { type: Boolean, default: false },
+    canPrev: { type: Boolean, default: true },
+    canNext: { type: Boolean, default: true },
+    // Double-chevron year jump (used by month/year drill views in Phase 2).
+    showYearJump: { type: Boolean, default: false }
+  },
+  emits: ['prev', 'next', 'prev-year', 'next-year', 'set-month', 'set-year', 'label-click'],
+  methods: {
+    monthName(month) {
+      const opt = this.monthOptions[month]
+      return opt ? opt.label : month + 1
+    }
+  }
+}
+</script>
+
+<style src="./panel-header.css" scoped></style>

package/src/components/date-picker/TimePanel.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="ui-time-panel">
+    <div v-for="col in columns" :key="col.key" class="ui-time-panel__col" role="listbox" :aria-label="col.key">
+      <button
+        v-for="opt in col.options"
+        :key="opt"
+        type="button"
+        class="ui-time-panel__opt"
+        :class="{ 'is-active': opt === col.value, 'is-disabled': col.disabled.indexOf(opt) !== -1 }"
+        :disabled="col.disabled.indexOf(opt) !== -1"
+        :aria-selected="opt === col.value ? 'true' : 'false'"
+        @click="onPick(col.key, opt)"
+      >
+        {{ pad(opt) }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TimePanel',
+  props: {
+    // { hour, minute, second } — 24-hour numeric parts.
+    value: {
+      type: Object,
+      default: () => ({ hour: 0, minute: 0, second: 0 })
+    },
+    showSeconds: { type: Boolean, default: false },
+    hourStep: { type: Number, default: 1 },
+    minuteStep: { type: Number, default: 1 },
+    secondStep: { type: Number, default: 1 },
+    // () => { disabledHours?, disabledMinutes?(h), disabledSeconds?(h,m) }
+    disabledTime: { type: Function, default: null }
+  },
+  emits: ['change'],
+  computed: {
+    rules() {
+      return (typeof this.disabledTime === 'function' && this.disabledTime()) || {}
+    },
+    columns() {
+      const v = this.value || {}
+      const h = v.hour || 0
+      const m = v.minute || 0
+      const cols = [
+        {
+          key: 'hour',
+          value: h,
+          options: this.range(24, this.hourStep),
+          disabled: this.callRule(this.rules.disabledHours)
+        },
+        {
+          key: 'minute',
+          value: m,
+          options: this.range(60, this.minuteStep),
+          disabled: this.callRule(this.rules.disabledMinutes, h)
+        }
+      ]
+      if (this.showSeconds) {
+        cols.push({
+          key: 'second',
+          value: v.second || 0,
+          options: this.range(60, this.secondStep),
+          disabled: this.callRule(this.rules.disabledSeconds, h, m)
+        })
+      }
+      return cols
+    }
+  },
+  methods: {
+    range(count, step) {
+      const out = []
+      const s = step > 0 ? step : 1
+      for (let i = 0; i < count; i += s) out.push(i)
+      return out
+    },
+    callRule(fn, a, b) {
+      if (typeof fn !== 'function') return []
+      const r = fn(a, b)
+      return Array.isArray(r) ? r : []
+    },
+    pad(n) {
+      return n < 10 ? '0' + n : '' + n
+    },
+    onPick(key, opt) {
+      const next = {
+        hour: this.value.hour || 0,
+        minute: this.value.minute || 0,
+        second: this.value.second || 0
+      }
+      next[key] = opt
+      this.$emit('change', next)
+    }
+  }
+}
+</script>
+
+<style src="./time-panel.css" scoped></style>

package/src/components/date-picker/calendar-panel.css

@@ -0,0 +1,36 @@
+.ui-cal-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background: var(--card);
+  font-family: var(--font-family-body);
+  border-radius: var(--rounded-xl);
+}
+
+.ui-cal-panel__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.ui-cal-panel__body {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+/* Months sit side by side; each grid is 7×36px wide. */
+.ui-cal-panel__months {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.ui-cal-panel__month {
+  flex-shrink: 0;
+}
+
+/* Time column divided from the calendar. */
+.ui-cal-panel__time {
+  padding-left: var(--spacing-xs);
+  border-left: 1px solid var(--border-primary);
+}

package/src/components/date-picker/calendar-view.css

@@ -0,0 +1,134 @@
+.ui-cal-view {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  font-family: var(--font-family-body);
+}
+
+/* Weekday header row — 7 fixed 36px tracks, muted labels. */
+.ui-cal-view__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+}
+
+.ui-cal-view__weekday {
+  height: 32px;
+  width: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-fg);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+}
+
+/*
+ * Day grid — 7 columns, cells butt together horizontally (column-gap 0) so the
+ * range band reads as one continuous strip; a small row-gap keeps weeks legible.
+ */
+.ui-cal-view__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  row-gap: 1px;
+  column-gap: 0;
+}
+
+.ui-cal-cell {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+}
+
+/*
+ * Range band layer (::before) sits behind the number. Full-width for interior
+ * days so neighbours connect; half-width toward the range on the endpoints.
+ */
+.ui-cal-cell::before {
+  content: '';
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  background: transparent;
+  z-index: 0;
+}
+
+.ui-cal-cell.is-in-range::before {
+  background: var(--accent-1);
+}
+
+.ui-cal-cell.is-range-left::before {
+  left: 50%;
+  right: 0;
+  background: var(--brand-100);
+}
+
+.ui-cal-cell.is-range-right::before {
+  left: 0;
+  right: 50%;
+  background: var(--brand-100);
+}
+
+/* The visible day chip — rounded, holds hover / selected fills and the number. */
+.ui-cal-cell__inner {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--rounded-lg);
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+
+.ui-cal-cell:hover:not(.is-disabled):not(.is-selected) .ui-cal-cell__inner {
+  background: var(--accent-1);
+}
+
+.ui-cal-cell.is-outside {
+  color: var(--muted-fg);
+}
+
+.ui-cal-cell.is-today .ui-cal-cell__inner {
+  box-shadow: inset 0 0 0 1px var(--border-brand);
+}
+
+.ui-cal-cell.is-selected .ui-cal-cell__inner {
+  background: var(--primary-brand-bg);
+  color: var(--inverse-fg);
+}
+
+/* Selected endpoint wins over the today ring. */
+.ui-cal-cell.is-selected.is-today .ui-cal-cell__inner {
+  box-shadow: none;
+}
+
+.ui-cal-cell.is-disabled {
+  color: var(--muted-fg);
+  cursor: not-allowed;
+}
+
+.ui-cal-cell.is-disabled .ui-cal-cell__inner {
+  background: transparent;
+}
+
+.ui-cal-cell.is-focus:focus-visible {
+  outline: none;
+}
+
+.ui-cal-cell.is-focus:focus-visible .ui-cal-cell__inner {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}

package/src/components/date-picker/calendar.js

@@ -0,0 +1,116 @@
+// Pure calendar math for the date-picker — no Vue, no component state.
+//
+// Everything here operates on plain values (ISO 'YYYY-MM-DD' strings, Day.js
+// instances, plain option objects) so it can be unit-tested in isolation and
+// reused by the week/month/quarter/year panels in Phase 2. The picker stores
+// its selection as ISO strings internally (stable identity, no deep-reactive
+// Day.js objects in `data`) and only converts to Date/formatted output at the
+// component boundary.
+import dayjs from './dayjs.js'
+
+export const ISO = 'YYYY-MM-DD'
+
+// Normalize any accepted value (Date | ISO/formatted string | Day.js | number)
+// into a Day.js instance, or null when empty/invalid. `format` is consulted for
+// string parsing so a custom `format` prop round-trips.
+export function toDayjs(value, format) {
+  if (value == null || value === '') return null
+  if (dayjs.isDayjs(value)) return value.isValid() ? value : null
+  if (value instanceof Date) {
+    const d = dayjs(value)
+    return d.isValid() ? d : null
+  }
+  if (typeof value === 'number') {
+    const d = dayjs(value)
+    return d.isValid() ? d : null
+  }
+  // string: try the explicit format first, then ISO, then loose parse.
+  if (typeof value === 'string') {
+    if (format) {
+      const byFmt = dayjs(value, format)
+      if (byFmt.isValid()) return byFmt
+    }
+    const byIso = dayjs(value, ISO)
+    if (byIso.isValid()) return byIso
+    const loose = dayjs(value)
+    return loose.isValid() ? loose : null
+  }
+  return null
+}
+
+// Day.js → canonical ISO date key (drops time; the day grid keys on this).
+export function toISO(value, format) {
+  const d = toDayjs(value, format)
+  return d ? d.format(ISO) : null
+}
+
+// Is `d` (Day.js) outside the allowed window / vetoed by disabledDate(Date)?
+export function isDateDisabled(d, opts) {
+  if (!d) return true
+  const o = opts || {}
+  if (o.minDate && d.isBefore(o.minDate, 'day')) return true
+  if (o.maxDate && d.isAfter(o.maxDate, 'day')) return true
+  if (typeof o.disabledDate === 'function' && o.disabledDate(d.toDate())) return true
+  return false
+}
+
+// Locale-aware weekday header labels, rotated to `weekStart` (0 = Sunday).
+// Uses Day.js localeData min-weekday names ('Su','Mo',...).
+export function weekdayLabels(weekStart, locale) {
+  const base = (locale ? dayjs().locale(locale) : dayjs()).localeData().weekdaysMin()
+  const out = []
+  for (let i = 0; i < 7; i++) out.push(base[(i + weekStart) % 7])
+  return out
+}
+
+// Build the 6×7 (42-cell) day grid for the month containing `viewDate`.
+// `weekStart` rotates the leading offset. Cells outside the view month are
+// flagged `outside` (rendered muted) but remain selectable unless disabled.
+export function buildDayMatrix(viewDate, weekStart, opts) {
+  const ws = weekStart || 0
+  const first = viewDate.startOf('month')
+  const offset = (first.day() - ws + 7) % 7
+  const start = first.subtract(offset, 'day')
+  const today = dayjs()
+  const month = viewDate.month()
+  const cells = []
+  for (let i = 0; i < 35; i++) {
+    const d = start.add(i, 'day')
+    const dow = d.day()
+    cells.push({
+      iso: d.format(ISO),
+      day: d.date(),
+      outside: d.month() !== month,
+      today: d.isSame(today, 'day'),
+      weekend: dow === 0 || dow === 6,
+      disabled: isDateDisabled(d, opts)
+    })
+  }
+  return cells
+}
+
+// Order two ISO keys ascending, tolerating either being null.
+export function orderISO(a, b) {
+  if (a == null) return { start: b, end: b }
+  if (b == null) return { start: a, end: a }
+  return a <= b ? { start: a, end: b } : { start: b, end: a }
+}
+
+// Position of a cell within an active range [start,end] (both ISO), used to pick
+// the connected-band radius: 'single' | 'left' | 'middle' | 'right' | null.
+export function rangePosition(iso, start, end) {
+  if (!start && !end) return null
+  const s = start
+  const e = end || start
+  if (s === e) return iso === s ? 'single' : null
+  if (iso === s) return 'left'
+  if (iso === e) return 'right'
+  if (iso > s && iso < e) return 'middle'
+  return null
+}
+
+// True when `iso` sits strictly inside (start,end) — the range fill band.
+export function isWithinRange(iso, start, end) {
+  if (!start || !end || start === end) return false
+  return iso > start && iso < end
+}

package/src/components/date-picker/date-picker.css

@@ -0,0 +1,95 @@
+.ui-date-picker {
+  display: inline-block;
+}
+
+.ui-date-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  min-width: 200px;
+  box-sizing: border-box;
+  height: 36px;
+  padding: 0 var(--spacing-sm);
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius);
+  color: var(--primary-fg);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  cursor: pointer;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.ui-date-picker__trigger--sm {
+  height: 28px;
+  padding: 0 var(--spacing-xs);
+}
+
+.ui-date-picker__trigger--lg {
+  height: 44px;
+  padding: 0 var(--spacing-md);
+}
+
+.ui-date-picker__trigger:hover:not(.is-disabled) {
+  border-color: var(--border-focus);
+}
+
+.ui-date-picker__trigger.is-focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-date-picker__trigger:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-date-picker__trigger.is-disabled {
+  background: var(--muted-bg);
+  color: var(--muted-fg);
+  cursor: not-allowed;
+}
+
+.ui-date-picker__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--muted-fg);
+  flex-shrink: 0;
+}
+
+.ui-date-picker__text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ui-date-picker__text.is-placeholder {
+  color: var(--muted-fg);
+}
+
+.ui-date-picker__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rounded-full);
+  background: transparent;
+  color: var(--muted-fg);
+  cursor: pointer;
+}
+
+.ui-date-picker__clear:hover {
+  background: var(--accent-1);
+  color: var(--primary-fg);
+}

package/src/components/date-picker/dayjs.js

@@ -0,0 +1,34 @@
+// Configured Day.js singleton for the date-picker.
+//
+// Day.js ships as a tiny core; every feature the picker needs (custom format
+// parsing, locale-aware week start, week/quarter numbers, inclusive comparisons)
+// lives in an opt-in plugin. We register them ONCE here and re-export the same
+// instance so every date-picker file shares one configured dayjs — importing
+// `dayjs` directly elsewhere would get the unconfigured core.
+//
+// `dayjs.extend` is idempotent (re-extending with the same plugin is a no-op),
+// so this module is safe to import from multiple files under both the Vite
+// (Vue 3) and webpack (Vue 2) bundlers.
+import dayjs from 'dayjs'
+
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localeData from 'dayjs/plugin/localeData'
+import weekday from 'dayjs/plugin/weekday'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import isoWeek from 'dayjs/plugin/isoWeek'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+
+dayjs.extend(customParseFormat)
+dayjs.extend(localeData)
+dayjs.extend(weekday)
+dayjs.extend(weekOfYear)
+dayjs.extend(isoWeek)
+dayjs.extend(advancedFormat)
+dayjs.extend(isSameOrBefore)
+dayjs.extend(isSameOrAfter)
+dayjs.extend(quarterOfYear)
+
+export default dayjs

package/src/components/date-picker/panel-footer.css

@@ -0,0 +1,42 @@
+.ui-cal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--border-primary);
+  font-family: var(--font-family-body);
+}
+
+.ui-cal-footer__left {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ui-cal-footer__right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.ui-cal-footer__link {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+  color: var(--primary-brand-fg);
+}
+
+.ui-cal-footer__link:hover:not(:disabled) {
+  color: var(--primary-brand-hover);
+  text-decoration: underline;
+}
+
+.ui-cal-footer__link:disabled {
+  color: var(--muted-fg);
+  cursor: not-allowed;
+}