@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system217.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system217.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"id\", \"aria-expanded\", \"aria-controls\", \"aria-describedby\", \"aria-label\", \"placeholder\", \"disabled\", \"readonly\", \"value\"]\nconst _hoisted_2 = { class: \"b-time-picker__suffix\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-time-picker__icon\",\n  \"aria-hidden\": \"true\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\"\n}\nconst _hoisted_4 = [\"id\"]\nconst _hoisted_5 = [\"id\"]\nconst _hoisted_6 = {\n  class: \"b-time-picker__columns\",\n  role: \"group\",\n  \"aria-label\": \"Time selection columns\"\n}\nconst _hoisted_7 = [\"aria-activedescendant\"]\nconst _hoisted_8 = [\"id\", \"aria-selected\", \"aria-disabled\", \"onClick\"]\nconst _hoisted_9 = [\"aria-activedescendant\"]\nconst _hoisted_10 = [\"id\", \"aria-selected\", \"aria-disabled\", \"onClick\"]\nconst _hoisted_11 = [\"aria-activedescendant\"]\nconst _hoisted_12 = [\"id\", \"aria-selected\", \"aria-disabled\", \"onClick\"]\nconst _hoisted_13 = [\"aria-selected\"]\nconst _hoisted_14 = [\"aria-selected\"]\nconst _hoisted_15 = {\n  key: 0,\n  class: \"b-time-picker__footer\"\n}\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTimePicker',\n  props: /*@__PURE__*/_mergeModels({\n    size: { default: () => (BTimePickerSize.Medium) },\n    variant: { default: () => (BTimePickerVariant.Outlined) },\n    placeholder: { default: 'Select time' },\n    disabled: { type: Boolean, default: false },\n    inputReadOnly: { type: Boolean, default: false },\n    allowClear: { type: Boolean, default: true },\n    showNow: { type: Boolean, default: true },\n    use12Hours: { type: Boolean, default: false },\n    hourStep: { default: 1 },\n    minuteStep: { default: 1 },\n    secondStep: { default: 1 },\n    format: {},\n    placement: { default: () => (BTimePickerPlacement.BottomLeft) },\n    status: {},\n    hideDisabledOptions: { type: Boolean, default: false },\n    needConfirm: { type: Boolean, default: true },\n    changeOnScroll: { type: Boolean, default: false },\n    showHour: { type: Boolean, default: true },\n    showMinute: { type: Boolean, default: true },\n    showSecond: { type: Boolean, default: true },\n    defaultOpen: { type: Boolean, default: false },\n    defaultValue: {},\n    open: { type: Boolean },\n    disabledTime: { type: Function }\n  }, {\n    \"modelValue\": { default: undefined },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"openChange\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst model = _useModel<Date | null>(__props, \"modelValue\");\n\nconst emit = __emit;\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\n__expose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(__props.defaultOpen);\nconst isPanelOpen = ref(__props.open !== undefined ? !!__props.open : __props.defaultOpen);\nconst internalValue = ref<Date | null>(__props.defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (__props.format) return __props.format;\n  const parts: string[] = [];\n  if (__props.showHour) parts.push(__props.use12Hours ? 'hh' : 'HH');\n  if (__props.showMinute) parts.push('mm');\n  if (__props.showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return __props.use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (__props.use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (__props.use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!__props.disabledTime) return [];\n  const dt = __props.disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!__props.disabledTime) return [];\n  const dt = __props.disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!__props.disabledTime) return [];\n  const dt = __props.disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (__props.use12Hours) {\n    for (let i = 1; i <= 12; i += __props.hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += __props.hourStep) list.push(i);\n  }\n  if (__props.hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(__props.use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += __props.minuteStep) list.push(i);\n  if (__props.hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += __props.secondStep) list.push(i);\n  if (__props.hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (__props.disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (__props.use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = __props.use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!__props.needConfirm && !__props.changeOnScroll) applyPendingIfComplete();\n  else if (__props.changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!__props.needConfirm && !__props.changeOnScroll) applyPendingIfComplete();\n  else if (__props.changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!__props.needConfirm && !__props.changeOnScroll) applyPendingIfComplete();\n  else if (__props.changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!__props.needConfirm && !__props.changeOnScroll) applyPendingIfComplete();\n  else if (__props.changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (__props.showSecond && pendingSecond.value === null) return;\n    if (__props.use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = __props.use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (__props.use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!__props.needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (__props.showHour) columns.push('hour');\n    if (__props.showMinute) columns.push('minute');\n    if (__props.showSecond) columns.push('second');\n    if (__props.use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && __props.showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && __props.use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => __props.open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${__props.size}`,\n  `b-time-picker--${__props.variant}`,\n  {\n    'b-time-picker--disabled': __props.disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${__props.status}`]: !!__props.status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = __props.use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass(rootClasses.value)\n  }, [\n    _createElementVNode(\"div\", {\n      class: \"b-time-picker__input-wrap\",\n      style: _normalizeStyle({ anchorName: anchorName.value }),\n      onClick: togglePanel\n    }, [\n      _createElementVNode(\"input\", {\n        id: `b-time-picker-input-${_unref(componentUID)}`,\n        ref_key: \"inputEl\",\n        ref: inputEl,\n        class: \"b-time-picker__input\",\n        type: \"text\",\n        role: \"combobox\",\n        \"aria-expanded\": isPanelOpen.value,\n        \"aria-haspopup\": \"dialog\",\n        \"aria-controls\": isPanelOpen.value ? `b-time-picker-panel-${_unref(componentUID)}` : undefined,\n        \"aria-describedby\": __props.status ? `b-time-picker-status-${_unref(componentUID)}` : undefined,\n        \"aria-label\": __props.placeholder,\n        placeholder: __props.placeholder,\n        disabled: __props.disabled,\n        readonly: __props.inputReadOnly,\n        value: inputText.value,\n        autocomplete: \"off\",\n        onInput: handleInputChange,\n        onBlur: handleInputBlur,\n        onKeydown: handleInputKeydown\n      }, null, 40, _hoisted_1),\n      _createElementVNode(\"span\", _hoisted_2, [\n        (!__props.allowClear || !selectedTime.value)\n          ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_3, [...(_cache[2] || (_cache[2] = [\n              _createElementVNode(\"circle\", {\n                cx: \"12\",\n                cy: \"12\",\n                r: \"10\"\n              }, null, -1),\n              _createElementVNode(\"polyline\", { points: \"12 6 12 12 16 14\" }, null, -1)\n            ]))]))\n          : (_openBlock(), _createElementBlock(\"button\", {\n              key: 1,\n              class: \"b-time-picker__clear\",\n              type: \"button\",\n              \"aria-label\": \"Clear time\",\n              tabindex: \"-1\",\n              onClick: handleClear\n            }, [...(_cache[3] || (_cache[3] = [\n              _createElementVNode(\"svg\", {\n                \"aria-hidden\": \"true\",\n                viewBox: \"0 0 24 24\",\n                fill: \"none\",\n                stroke: \"currentColor\",\n                \"stroke-width\": \"2\"\n              }, [\n                _createElementVNode(\"circle\", {\n                  cx: \"12\",\n                  cy: \"12\",\n                  r: \"10\"\n                }),\n                _createElementVNode(\"line\", {\n                  x1: \"15\",\n                  y1: \"9\",\n                  x2: \"9\",\n                  y2: \"15\"\n                }),\n                _createElementVNode(\"line\", {\n                  x1: \"9\",\n                  y1: \"9\",\n                  x2: \"15\",\n                  y2: \"15\"\n                })\n              ], -1)\n            ]))]))\n      ]),\n      (__props.status)\n        ? (_openBlock(), _createElementBlock(\"span\", {\n            key: 0,\n            id: `b-time-picker-status-${_unref(componentUID)}`,\n            class: \"b-time-picker__status-text\",\n            \"aria-live\": \"polite\"\n          }, _toDisplayString(__props.status), 9, _hoisted_4))\n        : _createCommentVNode(\"\", true)\n    ], 4),\n    _createElementVNode(\"div\", {\n      id: `b-time-picker-panel-${_unref(componentUID)}`,\n      ref_key: \"panelEl\",\n      ref: panelEl,\n      class: \"b-time-picker__panel\",\n      popover: \"\",\n      role: \"dialog\",\n      \"aria-label\": 'Time picker',\n      \"aria-modal\": true,\n      style: _normalizeStyle({ positionAnchor: anchorName.value }),\n      onToggle: handlePopoverToggle,\n      onKeydown: handlePanelKeydown\n    }, [\n      _createElementVNode(\"div\", _hoisted_6, [\n        (__props.showHour)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              ref_key: \"hourColEl\",\n              ref: hourColEl,\n              class: \"b-time-picker__column\",\n              role: \"listbox\",\n              \"aria-label\": 'Hours',\n              \"aria-activedescendant\": pendingHour.value !== null ? `b-time-picker-hour-${pendingHour.value}-${_unref(componentUID)}` : undefined\n            }, [\n              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(hours.value, (h) => {\n                return (_openBlock(), _createElementBlock(\"div\", {\n                  id: `b-time-picker-hour-${h}-${_unref(componentUID)}`,\n                  key: h,\n                  class: _normalizeClass([\"b-time-picker__cell\", {\n              'b-time-picker__cell--selected': pendingHour.value === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn.value === 'hour' && pendingHour.value === h,\n            }]),\n                  role: \"option\",\n                  \"aria-selected\": pendingHour.value === h,\n                  \"aria-disabled\": isHourDisabled(h),\n                  onClick: ($event: any) => (selectHour(h))\n                }, _toDisplayString(pad(h)), 11, _hoisted_8))\n              }), 128))\n            ], 8, _hoisted_7))\n          : _createCommentVNode(\"\", true),\n        (__props.showMinute)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 1,\n              ref_key: \"minuteColEl\",\n              ref: minuteColEl,\n              class: \"b-time-picker__column\",\n              role: \"listbox\",\n              \"aria-label\": 'Minutes',\n              \"aria-activedescendant\": pendingMinute.value !== null ? `b-time-picker-minute-${pendingMinute.value}-${_unref(componentUID)}` : undefined\n            }, [\n              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(minutes.value, (m) => {\n                return (_openBlock(), _createElementBlock(\"div\", {\n                  id: `b-time-picker-minute-${m}-${_unref(componentUID)}`,\n                  key: m,\n                  class: _normalizeClass([\"b-time-picker__cell\", {\n              'b-time-picker__cell--selected': pendingMinute.value === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn.value === 'minute' && pendingMinute.value === m,\n            }]),\n                  role: \"option\",\n                  \"aria-selected\": pendingMinute.value === m,\n                  \"aria-disabled\": isMinuteDisabled(m),\n                  onClick: ($event: any) => (selectMinute(m))\n                }, _toDisplayString(pad(m)), 11, _hoisted_10))\n              }), 128))\n            ], 8, _hoisted_9))\n          : _createCommentVNode(\"\", true),\n        (__props.showSecond)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 2,\n              ref_key: \"secondColEl\",\n              ref: secondColEl,\n              class: \"b-time-picker__column\",\n              role: \"listbox\",\n              \"aria-label\": 'Seconds',\n              \"aria-activedescendant\": pendingSecond.value !== null ? `b-time-picker-second-${pendingSecond.value}-${_unref(componentUID)}` : undefined\n            }, [\n              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(seconds.value, (s) => {\n                return (_openBlock(), _createElementBlock(\"div\", {\n                  id: `b-time-picker-second-${s}-${_unref(componentUID)}`,\n                  key: s,\n                  class: _normalizeClass([\"b-time-picker__cell\", {\n              'b-time-picker__cell--selected': pendingSecond.value === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn.value === 'second' && pendingSecond.value === s,\n            }]),\n                  role: \"option\",\n                  \"aria-selected\": pendingSecond.value === s,\n                  \"aria-disabled\": isSecondDisabled(s),\n                  onClick: ($event: any) => (selectSecond(s))\n                }, _toDisplayString(pad(s)), 11, _hoisted_12))\n              }), 128))\n            ], 8, _hoisted_11))\n          : _createCommentVNode(\"\", true),\n        (__props.use12Hours)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 3,\n              ref_key: \"ampmColEl\",\n              ref: ampmColEl,\n              class: \"b-time-picker__column b-time-picker__column--ampm\",\n              role: \"listbox\",\n              \"aria-label\": \"AM/PM\"\n            }, [\n              _createElementVNode(\"div\", {\n                class: _normalizeClass([\"b-time-picker__cell\", {\n              'b-time-picker__cell--selected': pendingAmpm.value === 'AM',\n              'b-time-picker__cell--focused': focusedColumn.value === 'ampm' && pendingAmpm.value === 'AM',\n            }]),\n                role: \"option\",\n                \"aria-selected\": pendingAmpm.value === 'AM',\n                onClick: _cache[0] || (_cache[0] = ($event: any) => (selectAmpm('AM')))\n              }, \" AM \", 10, _hoisted_13),\n              _createElementVNode(\"div\", {\n                class: _normalizeClass([\"b-time-picker__cell\", {\n              'b-time-picker__cell--selected': pendingAmpm.value === 'PM',\n              'b-time-picker__cell--focused': focusedColumn.value === 'ampm' && pendingAmpm.value === 'PM',\n            }]),\n                role: \"option\",\n                \"aria-selected\": pendingAmpm.value === 'PM',\n                onClick: _cache[1] || (_cache[1] = ($event: any) => (selectAmpm('PM')))\n              }, \" PM \", 10, _hoisted_14)\n            ], 512))\n          : _createCommentVNode(\"\", true)\n      ]),\n      (__props.needConfirm || __props.showNow)\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_15, [\n            (__props.showNow)\n              ? (_openBlock(), _createElementBlock(\"button\", {\n                  key: 0,\n                  class: \"b-time-picker__now-btn\",\n                  type: \"button\",\n                  onClick: handleNow\n                }, \" Now \"))\n              : _createCommentVNode(\"\", true),\n            (__props.needConfirm)\n              ? (_openBlock(), _createElementBlock(\"button\", {\n                  key: 1,\n                  class: \"b-time-picker__ok-btn\",\n                  type: \"button\",\n                  onClick: handleOk\n                }, \" OK \"))\n              : _createCommentVNode(\"\", true)\n          ]))\n        : _createCommentVNode(\"\", true)\n    ], 44, _hoisted_5)\n  ], 2))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,KAAa;CAAC;CAAM;CAAiB;CAAiB;CAAoB;CAAc;CAAe;CAAY;CAAY;CAAQ,EACvI,KAAa,EAAE,OAAO,yBAAyB,EAC/C,KAAa;CACjB,KAAK;CACL,OAAO;CACP,eAAe;CACf,SAAS;CACT,MAAM;CACN,QAAQ;CACR,gBAAgB;CACjB,EACK,KAAa,CAAC,KAAK,EACnB,KAAa,CAAC,KAAK,EACnB,KAAa;CACjB,OAAO;CACP,MAAM;CACN,cAAc;CACf,EACK,KAAa,CAAC,wBAAwB,EACtC,KAAa;CAAC;CAAM;CAAiB;CAAiB;CAAU,EAChE,KAAa,CAAC,wBAAwB,EACtC,KAAc;CAAC;CAAM;CAAiB;CAAiB;CAAU,EACjE,KAAc,CAAC,wBAAwB,EACvC,KAAc;CAAC;CAAM;CAAiB;CAAiB;CAAU,EACjE,KAAc,CAAC,gBAAgB,EAC/B,KAAc,CAAC,gBAAgB,EAC/B,KAAc;CAClB,KAAK;CACL,OAAO;CACR,EAcD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAoB,kBAAa;EAC/B,MAAM,EAAE,eAAgB,EAAgB,QAAS;EACjD,SAAS,EAAE,eAAgB,EAAmB,UAAW;EACzD,aAAa,EAAE,SAAS,eAAe;EACvC,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,eAAe;GAAE,MAAM;GAAS,SAAS;GAAO;EAChD,YAAY;GAAE,MAAM;GAAS,SAAS;GAAM;EAC5C,SAAS;GAAE,MAAM;GAAS,SAAS;GAAM;EACzC,YAAY;GAAE,MAAM;GAAS,SAAS;GAAO;EAC7C,UAAU,EAAE,SAAS,GAAG;EACxB,YAAY,EAAE,SAAS,GAAG;EAC1B,YAAY,EAAE,SAAS,GAAG;EAC1B,QAAQ,EAAE;EACV,WAAW,EAAE,eAAgB,EAAqB,YAAa;EAC/D,QAAQ,EAAE;EACV,qBAAqB;GAAE,MAAM;GAAS,SAAS;GAAO;EACtD,aAAa;GAAE,MAAM;GAAS,SAAS;GAAM;EAC7C,gBAAgB;GAAE,MAAM;GAAS,SAAS;GAAO;EACjD,UAAU;GAAE,MAAM;GAAS,SAAS;GAAM;EAC1C,YAAY;GAAE,MAAM;GAAS,SAAS;GAAM;EAC5C,YAAY;GAAE,MAAM;GAAS,SAAS;GAAM;EAC5C,aAAa;GAAE,MAAM;GAAS,SAAS;GAAO;EAC9C,cAAc,EAAE;EAChB,MAAM,EAAE,MAAM,SAAS;EACvB,cAAc,EAAE,MAAM,UAAU;EACjC,EAAE;EACD,YAAc,EAAE,SAAS,KAAA,GAAW;EACpC,gBAAkB,EAAE;EACrB,CAAC;CACF,OAAoB,kBAAa,CAAC,UAAU,aAAa,EAAE,CAAC,oBAAoB,CAAC;CACjF,MAAM,GAAc,EAAE,QAAQ,GAAU,MAAM,KAAU;EAI1D,IAAM,IAAQ,GAAuB,GAAS,aAAa,EAErD,IAAO,GAEP,IAAU,EAA6B,KAAK,EAC5C,IAAU,EAAwB,KAAK,EACvC,IAAY,EAAwB,KAAK,EACzC,IAAc,EAAwB,KAAK,EAC3C,IAAc,EAAwB,KAAK,EAC3C,IAAY,EAAwB,KAAK;AAE/C,IAAS;GACP,aAAa,EAAQ,OAAO,OAAO;GACnC,YAAY,EAAQ,OAAO,MAAM;GAClC,CAAC;EAEF,IAAM,EAAE,oBAAiB,GAAgB,EACnC,IAAa,QAAe,mBAAmB,EAAa,QAAQ,EAKpE,IAAS,EAAI,EAAQ,YAAY,EACjC,IAAc,EAAI,EAAQ,SAAS,KAAA,IAA6B,EAAQ,cAAzB,CAAC,CAAC,EAAQ,KAA2B,EACpF,KAAgB,EAAiB,EAAQ,gBAAgB,KAAK,EAC9D,IAAc,EAAmB,KAAK,EACtC,IAAgB,EAAmB,KAAK,EACxC,IAAgB,EAAmB,KAAK,EACxC,IAAc,EAAwB,KAAK,EAC3C,IAAY,EAAI,GAAG,EACnB,IAAgB,EAA2C,OAAO,EAElE,IAAe,EAAS;GAC5B,WAAW,EAAM,SAAS,GAAc;GACxC,MAAM,MAAQ;AAEZ,IADA,GAAc,QAAQ,GACtB,EAAM,QAAQ;;GAEjB,CAAC,EAKI,KAAe,QAAe;AAClC,OAAI,EAAQ,OAAQ,QAAO,EAAQ;GACnC,IAAM,IAAkB,EAAE;AAG1B,GAFI,EAAQ,YAAU,EAAM,KAAK,EAAQ,aAAa,OAAO,KAAK,EAC9D,EAAQ,cAAY,EAAM,KAAK,KAAK,EACpC,EAAQ,cAAY,EAAM,KAAK,KAAK;GACxC,IAAM,IAAO,EAAM,KAAK,IAAI;AAC5B,UAAO,EAAQ,aAAa,GAAG,EAAK,MAAM;IAC1C;EAEF,SAAS,EAAI,GAAmB;AAC9B,UAAO,OAAO,EAAE,CAAC,SAAS,GAAG,IAAI;;EAGnC,SAAS,EAAW,GAAwB;AAC1C,OAAI,CAAC,EAAG,QAAO;GACf,IAAM,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,YAAY,EAClB,IAAO,KAAK,KAAK,OAAO,MAE1B,IAAS,GAAa;AAC1B,OAAI,EAAQ,YAAY;IACtB,IAAM,IAAM,IAAI,MAAM;AAItB,IAHA,IAAS,EAAO,QAAQ,MAAM,EAAI,EAAI,CAAC,EACvC,IAAS,EAAO,QAAQ,KAAK,OAAO,EAAI,CAAC,EACzC,IAAS,EAAO,QAAQ,KAAK,EAAK,EAClC,IAAS,EAAO,QAAQ,KAAK,EAAK,aAAa,CAAC;SAGhD,CADA,IAAS,EAAO,QAAQ,MAAM,EAAI,EAAE,CAAC,EACrC,IAAS,EAAO,QAAQ,KAAK,OAAO,EAAE,CAAC;AAIzC,UAFA,IAAS,EAAO,QAAQ,MAAM,EAAI,EAAE,CAAC,EACrC,IAAS,EAAO,QAAQ,MAAM,EAAI,EAAE,CAAC,EAC9B;;EAGT,SAAS,EAAgB,GAA0B;AACjD,OAAI,CAAC,EAAI,MAAM,CAAE,QAAO;GAExB,IAAM,IAAQ,EAAI,MADE,kDACgB;AACpC,OAAI,CAAC,EAAO,QAAO;GAEnB,IAAI,IAAI,SAAS,EAAM,IAAI,GAAG,EACxB,IAAI,SAAS,EAAM,IAAI,GAAG,EAC1B,IAAI,EAAM,KAAK,SAAS,EAAM,IAAI,GAAG,GAAG,GACxC,IAAS,EAAM,IAAI,aAAa;AAOtC,OALI,EAAQ,cAAc,MACpB,MAAW,QAAQ,IAAI,OAAI,KAAK,KAChC,MAAW,QAAQ,MAAM,OAAI,IAAI,KAGnC,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,GAAI,QAAO;GAElE,IAAM,oBAAI,IAAI,MAAM;AAEpB,UADA,EAAE,SAAS,GAAG,GAAG,GAAG,EAAE,EACf;;EAMT,IAAM,IAAgB,QACf,EAAQ,eACF,EAAQ,cAAc,CACvB,iBAAiB,IAAI,EAAE,GAFC,EAAE,CAGpC,EAEI,IAAkB,QAAyB;AAC/C,OAAI,CAAC,EAAQ,aAAc,QAAO,EAAE;GACpC,IAAM,IAAK,EAAQ,cAAc,EAC3B,IAAI,EAAY,SAAS,EAAa,OAAO,UAAU,IAAI;AACjE,UAAO,EAAG,kBAAkB,EAAE,IAAI,EAAE;IACpC,EAEI,IAAkB,QAAyB;AAC/C,OAAI,CAAC,EAAQ,aAAc,QAAO,EAAE;GACpC,IAAM,IAAK,EAAQ,cAAc,EAC3B,IAAI,EAAY,SAAS,EAAa,OAAO,UAAU,IAAI,GAC3D,IAAI,EAAc,SAAS,EAAa,OAAO,YAAY,IAAI;AACrE,UAAO,EAAG,kBAAkB,GAAG,EAAE,IAAI,EAAE;IACvC,EAKI,IAAQ,QAAe;GAC3B,IAAM,IAAiB,EAAE;AACzB,OAAI,EAAQ,WACV,MAAK,IAAI,IAAI,GAAG,KAAK,IAAI,KAAK,EAAQ,SAAU,GAAK,KAAK,EAAE;OAE5D,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,EAAQ,SAAU,GAAK,KAAK,EAAE;AAK7D,UAHI,EAAQ,sBACH,EAAK,QAAQ,MAAM,CAAC,EAAc,MAAM,SAAS,EAAQ,aAAa,EAAS,GAAG,EAAY,SAAS,KAAK,GAAG,EAAE,CAAC,GAEpH;IACP,EAEI,IAAU,QAAe;GAC7B,IAAM,IAAiB,EAAE;AACzB,QAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,EAAQ,WAAY,GAAK,KAAK,EAAE;AAI7D,UAHI,EAAQ,sBACH,EAAK,QAAQ,MAAM,CAAC,EAAgB,MAAM,SAAS,EAAE,CAAC,GAExD;IACP,EAEI,IAAU,QAAe;GAC7B,IAAM,IAAiB,EAAE;AACzB,QAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,EAAQ,WAAY,GAAK,KAAK,EAAE;AAI7D,UAHI,EAAQ,sBACH,EAAK,QAAQ,MAAM,CAAC,EAAgB,MAAM,SAAS,EAAE,CAAC,GAExD;IACP;EAEF,SAAS,EAAS,GAAa,GAA6B;AAE1D,UADI,MAAW,OAAa,MAAQ,KAAK,IAAI,IACtC,MAAQ,KAAK,KAAK,IAAM;;EAGjC,SAAS,EAAS,GAAoD;GACpE,IAAM,IAAsB,KAAO,KAAK,OAAO;AAE/C,UAAO;IAAE,MADI,IAAM,MAAM;IACV;IAAQ;;EAMzB,SAAS,IAAY;AACf,KAAQ,aACZ,EAAO,QAAQ,IACf,EAAY,QAAQ,IACpB,EAAK,cAAc,GAAK,EACxB,EAAQ,OAAO,eAAe,EAC9B,IAAsB,EACtB,QAAe,IAAkB,CAAC;;EAGpC,SAAS,IAAa;AAKpB,GAJA,EAAO,QAAQ,IACf,EAAY,QAAQ,IACpB,EAAK,cAAc,GAAM,EACzB,EAAQ,OAAO,eAAe,EAC9B,EAAQ,OAAO,OAAO;;EAGxB,SAAS,KAAc;AACrB,GAAI,EAAY,QAAO,GAAY,GAC9B,GAAW;;EAGlB,SAAS,GAAoB,GAAU;GAErC,IAAM,IADc,EACQ,aAAa;AAGzC,GAFA,EAAO,QAAQ,GACf,EAAY,QAAQ,GACf,KAAS,EAAK,cAAc,GAAM;;EAMzC,SAAS,KAAuB;GAC9B,IAAM,IAAI,EAAa;AACvB,OAAI,GAAG;AACL,QAAI,EAAQ,YAAY;KACtB,IAAM,EAAE,SAAM,cAAW,EAAS,EAAE,UAAU,CAAC;AAE/C,KADA,EAAY,QAAQ,GACpB,EAAY,QAAQ;UAEpB,GAAY,QAAQ,EAAE,UAAU;AAGlC,IADA,EAAc,QAAQ,EAAE,YAAY,EACpC,EAAc,QAAQ,EAAE,YAAY;SAKpC,CAHA,EAAY,QAAQ,MACpB,EAAc,QAAQ,MACtB,EAAc,QAAQ,MACtB,EAAY,QAAQ;;EAOxB,SAAS,EAAW,GAAW;GAC7B,IAAM,IAAM,EAAQ,aAAa,EAAS,GAAG,EAAY,SAAS,KAAK,GAAG;AACtE,KAAc,MAAM,SAAS,EAAI,KACrC,EAAY,QAAQ,GAChB,CAAC,EAAQ,eAAe,CAAC,EAAQ,iBAAgB,GAAwB,GACpE,EAAQ,kBAAgB,GAAc;;EAGjD,SAAS,EAAa,GAAW;AAC3B,KAAgB,MAAM,SAAS,EAAE,KACrC,EAAc,QAAQ,GAClB,CAAC,EAAQ,eAAe,CAAC,EAAQ,iBAAgB,GAAwB,GACpE,EAAQ,kBAAgB,GAAc;;EAGjD,SAAS,GAAa,GAAW;AAC3B,KAAgB,MAAM,SAAS,EAAE,KACrC,EAAc,QAAQ,GAClB,CAAC,EAAQ,eAAe,CAAC,EAAQ,iBAAgB,GAAwB,GACpE,EAAQ,kBAAgB,GAAc;;EAGjD,SAAS,EAAW,GAAkB;AAEpC,GADA,EAAY,QAAQ,GAChB,CAAC,EAAQ,eAAe,CAAC,EAAQ,iBAAgB,GAAwB,GACpE,EAAQ,kBAAgB,GAAc;;EAGjD,SAAS,IAAyB;AAChC,OAAI,EAAY,UAAU,QAAQ,EAAc,UAAU,MAAM;AAE9D,QADI,EAAQ,cAAc,EAAc,UAAU,QAC9C,EAAQ,cAAc,EAAY,UAAU,KAAM;AAEtD,IADA,GAAc,EACd,GAAY;;;EAIhB,SAAS,IAAe;GACtB,IAAM,IAAI,EAAY,SAAS,GACzB,IAAI,EAAc,SAAS,GAC3B,IAAI,EAAc,SAAS,GAC3B,IAAM,EAAQ,aAAa,EAAS,GAAG,EAAY,SAAS,KAAK,GAAG,GAEpE,oBAAI,IAAI,MAAM;AAIpB,GAHA,EAAE,SAAS,GAAK,GAAG,GAAG,EAAE,EACxB,EAAa,QAAQ,GACrB,EAAU,QAAQ,EAAW,EAAE,EAC/B,EAAK,UAAU,GAAG,EAAW,EAAE,CAAC;;EAGlC,SAAS,KAAW;AAElB,GADA,GAAc,EACd,GAAY;;EAGd,SAAS,KAAY;GACnB,IAAM,oBAAM,IAAI,MAAM;AACtB,OAAI,EAAQ,YAAY;IACtB,IAAM,EAAE,SAAM,cAAW,EAAS,EAAI,UAAU,CAAC;AAEjD,IADA,EAAY,QAAQ,GACpB,EAAY,QAAQ;SAEpB,GAAY,QAAQ,EAAI,UAAU;AAKpC,GAHA,EAAc,QAAQ,EAAI,YAAY,EACtC,EAAc,QAAQ,EAAI,YAAY,EACtC,QAAe,IAAkB,CAAC,EAC7B,EAAQ,gBACX,GAAc,EACd,GAAY;;EAIhB,SAAS,GAAY,GAAU;AAQ7B,GAPA,EAAE,iBAAiB,EACnB,EAAa,QAAQ,MACrB,EAAU,QAAQ,IAClB,EAAY,QAAQ,MACpB,EAAc,QAAQ,MACtB,EAAc,QAAQ,MACtB,EAAY,QAAQ,MACpB,EAAK,UAAU,MAAM,GAAG;;EAM1B,SAAS,GAAkB,GAAU;AAEnC,KAAU,QADG,EAAE,OAA4B;;EAI7C,SAAS,KAAkB;AACzB,OAAI,CAAC,EAAY,OAAO;IACtB,IAAM,IAAS,EAAgB,EAAU,MAAM;AAC/C,IAAI,KACF,EAAa,QAAQ,GACrB,EAAU,QAAQ,EAAW,EAAO,EACpC,EAAK,UAAU,GAAQ,EAAW,EAAO,CAAC,IACjC,EAAU,UAAU,MAC7B,EAAa,QAAQ,MACrB,EAAK,UAAU,MAAM,GAAG,IAExB,EAAU,QAAQ,EAAW,EAAa,MAAM;;;EAKtD,SAAS,GAAmB,GAAkB;AAC5C,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ;QAC7B,CAAC,EAAY,MAEf,CADA,EAAE,gBAAgB,EAClB,GAAW;aACF,EAAE,QAAQ,SAAS;AAC5B,OAAE,gBAAgB;KAClB,IAAM,IAAS,EAAgB,EAAU,MAAM;AAM/C,KALI,MACF,EAAa,QAAQ,GACrB,EAAU,QAAQ,EAAW,EAAO,EACpC,EAAK,UAAU,GAAQ,EAAW,EAAO,CAAC,GAE5C,GAAY;;UAEL,EAAE,QAAQ,YACf,EAAY,UACd,EAAE,gBAAgB,EAClB,GAAY;;EAQlB,SAAS,GAAmB,GAAkB;AAC5C,OAAI,EAAE,QAAQ,UAAU;AAEtB,IADA,EAAE,gBAAgB,EAClB,GAAY;AACZ;;AAGF,OAAI,EAAE,QAAQ,OAAO;IACnB,IAAM,IAAqD,EAAE;AAI7D,IAHI,EAAQ,YAAU,EAAQ,KAAK,OAAO,EACtC,EAAQ,cAAY,EAAQ,KAAK,SAAS,EAC1C,EAAQ,cAAY,EAAQ,KAAK,SAAS,EAC1C,EAAQ,cAAY,EAAQ,KAAK,OAAO;IAE5C,IAAM,IAAM,EAAQ,QAAQ,EAAc,MAAM;AAChD,IAAI,EAAE,WACA,IAAM,MACR,EAAE,gBAAgB,EAClB,EAAc,QAAQ,EAAQ,IAAM,MAGlC,IAAM,EAAQ,SAAS,MACzB,EAAE,gBAAgB,EAClB,EAAc,QAAQ,EAAQ,IAAM;AAGxC;;AAGF,OAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAGhD,IAFA,EAAE,gBAAgB,EAElB,GADc,EAAE,QAAQ,YAAY,KAAK,EACf;AAC1B;;AAGF,GAAI,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,IAAU;;EAId,SAAS,GAAoB,GAAe;AAC1C,OAAI,EAAc,UAAU,QAAQ;IAClC,IAAM,IAAO,EAAM,OACb,IAAU,EAAY,SAAS,EAAK,IACpC,IAAM,EAAK,QAAQ,EAAQ,EAC3B,IAAO,EAAK,KAAK,IAAI,GAAG,KAAK,IAAI,EAAK,SAAS,GAAG,IAAM,EAAM,CAAC;AAErE,IADA,EAAW,EAAK,EAChB,EAAe,EAAU,OAAO,EAAK,QAAQ,EAAK,CAAC;cAC1C,EAAc,UAAU,UAAU;IAC3C,IAAM,IAAO,EAAQ,OACf,IAAU,EAAc,SAAS,EAAK,IACtC,IAAM,EAAK,QAAQ,EAAQ,EAC3B,IAAO,EAAK,KAAK,IAAI,GAAG,KAAK,IAAI,EAAK,SAAS,GAAG,IAAM,EAAM,CAAC;AAErE,IADA,EAAa,EAAK,EAClB,EAAe,EAAY,OAAO,EAAK,QAAQ,EAAK,CAAC;cAC5C,EAAc,UAAU,UAAU;IAC3C,IAAM,IAAO,EAAQ,OACf,IAAU,EAAc,SAAS,EAAK,IACtC,IAAM,EAAK,QAAQ,EAAQ,EAC3B,IAAO,EAAK,KAAK,IAAI,GAAG,KAAK,IAAI,EAAK,SAAS,GAAG,IAAM,EAAM,CAAC;AAErE,IADA,GAAa,EAAK,EAClB,EAAe,EAAY,OAAO,EAAK,QAAQ,EAAK,CAAC;UAC5C,EAAc,UAAU,UAEjC,EADY,EAAY,UAAU,OAAO,OAAO,KACjC;;EAOnB,SAAS,EAAe,GAAyB,GAAa;AACxD,IAAC,KAAO,CAAC,EAAI,YAEjB,EAAI,SAAS;IAAE,KAAK,IADD;IACmB,UAAU;IAAU,CAAC;;EAG7D,SAAS,KAAmB;AAC1B,OAAI,EAAY,UAAU,MAAM;IAC9B,IAAM,IAAM,EAAM,MAAM,QAAQ,EAAY,MAAM;AAClD,IAAI,KAAO,KAAG,EAAe,EAAU,OAAO,EAAI;;AAEpD,OAAI,EAAc,UAAU,MAAM;IAChC,IAAM,IAAM,EAAQ,MAAM,QAAQ,EAAc,MAAM;AACtD,IAAI,KAAO,KAAG,EAAe,EAAY,OAAO,EAAI;;AAEtD,OAAI,EAAc,UAAU,QAAQ,EAAQ,YAAY;IACtD,IAAM,IAAM,EAAQ,MAAM,QAAQ,EAAc,MAAM;AACtD,IAAI,KAAO,KAAG,EAAe,EAAY,OAAO,EAAI;;AAEtD,OAAI,EAAY,SAAS,EAAQ,YAAY;IAC3C,IAAM,IAAM,EAAY,UAAU,OAAO,IAAI;AAC7C,MAAe,EAAU,OAAO,EAAI;;;EAOxC,SAAS,GAAmB,GAAe;AACzC,OAAI,CAAC,EAAY,MAAO;GACxB,IAAM,IAAS,EAAE;AACb,KAAQ,OAAO,SAAS,EAAO,IAC/B,EAAQ,OAAO,eAAe,SAAS,EAAO,IAClD,GAAY;;AA4Bd,EAzBA,SAAgB;AACd,YAAS,iBAAiB,aAAa,GAAmB;IAC1D,EACF,SAAsB;AACpB,YAAS,oBAAoB,aAAa,GAAmB;IAC7D,EAKF,SACQ,EAAQ,OACb,MAAQ;AACP,GAAI,MAAQ,KAAA,MACN,IAAK,GAAW,GACf,GAAY;IAGtB,EAED,GAAM,IAAe,MAAQ;AAC3B,KAAU,QAAQ,EAAW,EAAI;IACjC,EAGF,EAAU,QAAQ,EAAW,EAAa,MAAM;EAKhD,IAAM,KAAc,QAAe;GACjC;GACA,kBAAkB,EAAQ;GAC1B,kBAAkB,EAAQ;GAC1B;IACE,2BAA2B,EAAQ;IACnC,uBAAuB,EAAY;KAClC,kBAAkB,EAAQ,WAAW,CAAC,CAAC,EAAQ;IACjD;GACF,CAAC,EAEI,MAAkB,MAAc;GACpC,IAAM,IAAM,EAAQ,aAAa,EAAS,GAAG,EAAY,SAAS,KAAK,GAAG;AAC1E,UAAO,EAAc,MAAM,SAAS,EAAI;KAEpC,MAAoB,MAAc,EAAgB,MAAM,SAAS,EAAE,EACnE,MAAoB,MAAc,EAAgB,MAAM,SAAS,EAAE;AAEzE,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO,EAC/C,OAAO,EAAgB,GAAY,MAAM,EAC1C,EAAE,CACD,EAAoB,OAAO;GACzB,OAAO;GACP,OAAO,GAAgB,EAAE,YAAY,EAAW,OAAO,CAAC;GACxD,SAAS;GACV,EAAE;GACD,EAAoB,SAAS;IAC3B,IAAI,uBAAuB,EAAO,EAAa;IAC/C,SAAS;IACT,KAAK;IACL,OAAO;IACP,MAAM;IACN,MAAM;IACN,iBAAiB,EAAY;IAC7B,iBAAiB;IACjB,iBAAiB,EAAY,QAAQ,uBAAuB,EAAO,EAAa,KAAK,KAAA;IACrF,oBAAoB,EAAQ,SAAS,wBAAwB,EAAO,EAAa,KAAK,KAAA;IACtF,cAAc,EAAQ;IACtB,aAAa,EAAQ;IACrB,UAAU,EAAQ;IAClB,UAAU,EAAQ;IAClB,OAAO,EAAU;IACjB,cAAc;IACd,SAAS;IACT,QAAQ;IACR,WAAW;IACZ,EAAE,MAAM,IAAI,GAAW;GACxB,EAAoB,QAAQ,IAAY,CACrC,CAAC,EAAQ,cAAc,CAAC,EAAa,SACjC,GAAY,EAAE,EAAoB,OAAO,IAAY,CAAC,GAAI,AAAc,EAAO,OAAK,CACnF,EAAoB,UAAU;IAC5B,IAAI;IACJ,IAAI;IACJ,GAAG;IACJ,EAAE,MAAM,GAAG,EACZ,EAAoB,YAAY,EAAE,QAAQ,oBAAoB,EAAE,MAAM,GAAG,CAC1E,CAAG,CAAC,KACJ,GAAY,EAAE,EAAoB,UAAU;IAC3C,KAAK;IACL,OAAO;IACP,MAAM;IACN,cAAc;IACd,UAAU;IACV,SAAS;IACV,EAAE,CAAC,GAAI,AAAc,EAAO,OAAK,CAChC,EAAoB,OAAO;IACzB,eAAe;IACf,SAAS;IACT,MAAM;IACN,QAAQ;IACR,gBAAgB;IACjB,EAAE;IACD,EAAoB,UAAU;KAC5B,IAAI;KACJ,IAAI;KACJ,GAAG;KACJ,CAAC;IACF,EAAoB,QAAQ;KAC1B,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAAC;IACF,EAAoB,QAAQ;KAC1B,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAAC;IACH,EAAE,GAAG,CACP,CAAG,CAAC,EACV,CAAC;GACD,EAAQ,UACJ,GAAY,EAAE,EAAoB,QAAQ;IACzC,KAAK;IACL,IAAI,wBAAwB,EAAO,EAAa;IAChD,OAAO;IACP,aAAa;IACd,EAAE,EAAiB,EAAQ,OAAO,EAAE,GAAG,GAAW,IACnD,EAAoB,IAAI,GAAK;GAClC,EAAE,EAAE,EACL,EAAoB,OAAO;GACzB,IAAI,uBAAuB,EAAO,EAAa;GAC/C,SAAS;GACT,KAAK;GACL,OAAO;GACP,SAAS;GACT,MAAM;GACN,cAAc;GACd,cAAc;GACd,OAAO,GAAgB,EAAE,gBAAgB,EAAW,OAAO,CAAC;GAC5D,UAAU;GACV,WAAW;GACZ,EAAE,CACD,EAAoB,OAAO,IAAY;GACpC,EAAQ,YACJ,GAAY,EAAE,EAAoB,OAAO;IACxC,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,MAAM;IACN,cAAc;IACd,yBAAyB,EAAY,UAAU,OAA2E,KAAA,IAApE,sBAAsB,EAAY,MAAM,GAAG,EAAO,EAAa;IACtH,EAAE,EACA,EAAW,GAAK,EAAE,EAAoB,GAAW,MAAM,EAAY,EAAM,QAAQ,OACxE,GAAY,EAAE,EAAoB,OAAO;IAC/C,IAAI,sBAAsB,EAAE,GAAG,EAAO,EAAa;IACnD,KAAK;IACL,OAAO,EAAgB,CAAC,uBAAuB;KACnD,iCAAiC,EAAY,UAAU;KACvD,iCAAiC,GAAe,EAAE;KAClD,gCAAgC,EAAc,UAAU,UAAU,EAAY,UAAU;KACzF,CAAC,CAAC;IACG,MAAM;IACN,iBAAiB,EAAY,UAAU;IACvC,iBAAiB,GAAe,EAAE;IAClC,UAAU,MAAiB,EAAW,EAAE;IACzC,EAAE,EAAiB,EAAI,EAAE,CAAC,EAAE,IAAI,GAAW,EAC5C,EAAE,IAAI,EACT,EAAE,GAAG,GAAW,IACjB,EAAoB,IAAI,GAAK;GAChC,EAAQ,cACJ,GAAY,EAAE,EAAoB,OAAO;IACxC,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,MAAM;IACN,cAAc;IACd,yBAAyB,EAAc,UAAU,OAA+E,KAAA,IAAxE,wBAAwB,EAAc,MAAM,GAAG,EAAO,EAAa;IAC5H,EAAE,EACA,EAAW,GAAK,EAAE,EAAoB,GAAW,MAAM,EAAY,EAAQ,QAAQ,OAC1E,GAAY,EAAE,EAAoB,OAAO;IAC/C,IAAI,wBAAwB,EAAE,GAAG,EAAO,EAAa;IACrD,KAAK;IACL,OAAO,EAAgB,CAAC,uBAAuB;KACnD,iCAAiC,EAAc,UAAU;KACzD,iCAAiC,GAAiB,EAAE;KACpD,gCAAgC,EAAc,UAAU,YAAY,EAAc,UAAU;KAC7F,CAAC,CAAC;IACG,MAAM;IACN,iBAAiB,EAAc,UAAU;IACzC,iBAAiB,GAAiB,EAAE;IACpC,UAAU,MAAiB,EAAa,EAAE;IAC3C,EAAE,EAAiB,EAAI,EAAE,CAAC,EAAE,IAAI,GAAY,EAC7C,EAAE,IAAI,EACT,EAAE,GAAG,GAAW,IACjB,EAAoB,IAAI,GAAK;GAChC,EAAQ,cACJ,GAAY,EAAE,EAAoB,OAAO;IACxC,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,MAAM;IACN,cAAc;IACd,yBAAyB,EAAc,UAAU,OAA+E,KAAA,IAAxE,wBAAwB,EAAc,MAAM,GAAG,EAAO,EAAa;IAC5H,EAAE,EACA,EAAW,GAAK,EAAE,EAAoB,GAAW,MAAM,EAAY,EAAQ,QAAQ,OAC1E,GAAY,EAAE,EAAoB,OAAO;IAC/C,IAAI,wBAAwB,EAAE,GAAG,EAAO,EAAa;IACrD,KAAK;IACL,OAAO,EAAgB,CAAC,uBAAuB;KACnD,iCAAiC,EAAc,UAAU;KACzD,iCAAiC,GAAiB,EAAE;KACpD,gCAAgC,EAAc,UAAU,YAAY,EAAc,UAAU;KAC7F,CAAC,CAAC;IACG,MAAM;IACN,iBAAiB,EAAc,UAAU;IACzC,iBAAiB,GAAiB,EAAE;IACpC,UAAU,MAAiB,GAAa,EAAE;IAC3C,EAAE,EAAiB,EAAI,EAAE,CAAC,EAAE,IAAI,GAAY,EAC7C,EAAE,IAAI,EACT,EAAE,GAAG,GAAY,IAClB,EAAoB,IAAI,GAAK;GAChC,EAAQ,cACJ,GAAY,EAAE,EAAoB,OAAO;IACxC,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,MAAM;IACN,cAAc;IACf,EAAE,CACD,EAAoB,OAAO;IACzB,OAAO,EAAgB,CAAC,uBAAuB;KACjD,iCAAiC,EAAY,UAAU;KACvD,gCAAgC,EAAc,UAAU,UAAU,EAAY,UAAU;KACzF,CAAC,CAAC;IACC,MAAM;IACN,iBAAiB,EAAY,UAAU;IACvC,SAAS,AAAc,EAAO,QAAM,MAAiB,EAAW,KAAK;IACtE,EAAE,QAAQ,IAAI,GAAY,EAC3B,EAAoB,OAAO;IACzB,OAAO,EAAgB,CAAC,uBAAuB;KACjD,iCAAiC,EAAY,UAAU;KACvD,gCAAgC,EAAc,UAAU,UAAU,EAAY,UAAU;KACzF,CAAC,CAAC;IACC,MAAM;IACN,iBAAiB,EAAY,UAAU;IACvC,SAAS,AAAc,EAAO,QAAM,MAAiB,EAAW,KAAK;IACtE,EAAE,QAAQ,IAAI,GAAY,CAC5B,EAAE,IAAI,IACP,EAAoB,IAAI,GAAK;GAClC,CAAC,EACD,EAAQ,eAAe,EAAQ,WAC3B,GAAY,EAAE,EAAoB,OAAO,IAAa,CACpD,EAAQ,WACJ,GAAY,EAAE,EAAoB,UAAU;GAC3C,KAAK;GACL,OAAO;GACP,MAAM;GACN,SAAS;GACV,EAAE,QAAQ,IACX,EAAoB,IAAI,GAAK,EAChC,EAAQ,eACJ,GAAY,EAAE,EAAoB,UAAU;GAC3C,KAAK;GACL,OAAO;GACP,MAAM;GACN,SAAS;GACV,EAAE,OAAO,IACV,EAAoB,IAAI,GAAK,CAClC,CAAC,IACF,EAAoB,IAAI,GAAK,CAClC,EAAE,IAAI,GAAW,CACnB,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system217.js","names":[],"sources":["../src/components/BStatistic/BStatisticTimer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\n\nimport BStatistic from './BStatistic.vue';\nimport type { BStatisticTimerType } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  type = 'countdown',\n  value,\n  format = 'HH:mm:ss',\n  title,\n  prefix,\n  suffix,\n  valueStyle,\n} = defineProps<{\n  /**\n   * Timer mode.\n   * - `'countdown'` - counts down to `value` (a future timestamp in ms).\n   * - `'countup'`   - counts up from `value` (a past timestamp in ms).\n   * @default 'countdown'\n   */\n  type?: BStatisticTimerType;\n  /** Target/start timestamp in ms (e.g. `Date.now() + 60_000`). */\n  value: number;\n  /**\n   * Format string. Tokens:\n   * - `D`   days\n   * - `H` / `HH` hours\n   * - `m` / `mm` minutes\n   * - `s` / `ss` seconds\n   * - `S` / `SSS` milliseconds\n   * @default 'HH:mm:ss'\n   */\n  format?: string;\n  /** Title text (mirrors `BStatistic#title`). */\n  title?: string;\n  /** Prefix text (mirrors `BStatistic#prefix`). */\n  prefix?: string;\n  /** Suffix text (mirrors `BStatistic#suffix`). */\n  suffix?: string;\n  /** Inline style on the value element. */\n  valueStyle?: string | Record<string, string | number>;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Emitted once a countdown reaches zero. */\n  finish: [];\n  /** Emitted on every tick with the current ms remaining/elapsed. */\n  change: [ms: number];\n}>();\n\ndefineSlots<{\n  title?(): unknown;\n  prefix?(): unknown;\n  suffix?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Tick\n// ─────────────────────────────────────────────\nconst TICK_MS = 1000 / 30; // ~33ms, smooth enough for sub-second formats\nconst now = ref<number>(0);\nlet timer: ReturnType<typeof setInterval> | null = null;\nlet finished = false;\n\nfunction compute(t: number): number {\n  return type === 'countdown' ? Math.max(0, value - t) : Math.max(0, t - value);\n}\n\nfunction tick() {\n  const t = Date.now();\n  now.value = t;\n  const ms = compute(t);\n  emit('change', ms);\n  if (type === 'countdown' && ms <= 0 && !finished) {\n    finished = true;\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    emit('finish');\n  }\n}\n\nonMounted(() => {\n  // SSR-safe: timers only run in the browser\n  finished = false;\n  now.value = Date.now();\n  // Emit initial change so consumers see the starting value\n  emit('change', compute(now.value));\n  timer = setInterval(tick, TICK_MS);\n});\n\nonBeforeUnmount(() => {\n  if (timer) {\n    clearInterval(timer);\n    timer = null;\n  }\n});\n\n// ─────────────────────────────────────────────\n// Formatting\n// ─────────────────────────────────────────────\nconst ms = computed<number>(() => (now.value ? compute(now.value) : compute(Date.now())));\n\nfunction formatDuration(t: number, fmt: string): string {\n  const days = Math.floor(t / 86_400_000);\n  let rem = t - days * 86_400_000;\n  const hours = Math.floor(rem / 3_600_000);\n  rem -= hours * 3_600_000;\n  const minutes = Math.floor(rem / 60_000);\n  rem -= minutes * 60_000;\n  const seconds = Math.floor(rem / 1000);\n  const milliseconds = rem - seconds * 1000;\n\n  // Bracketed text is treated as a literal (dayjs-compatible).\n  return fmt.replace(/\\[([^\\]]*)\\]|SSS|HH|mm|ss|D|H|m|s|S/g, (match, literal) => {\n    if (literal !== undefined) return literal;\n    switch (match) {\n      case 'SSS':\n        return String(milliseconds).padStart(3, '0');\n      case 'HH':\n        return String(hours).padStart(2, '0');\n      case 'mm':\n        return String(minutes).padStart(2, '0');\n      case 'ss':\n        return String(seconds).padStart(2, '0');\n      case 'D':\n        return String(days);\n      case 'H':\n        return String(hours);\n      case 'm':\n        return String(minutes);\n      case 's':\n        return String(seconds);\n      case 'S':\n        return String(milliseconds);\n      default:\n        return match;\n    }\n  });\n}\n\nconst formatted = computed<string>(() => formatDuration(ms.value, format));\n</script>\n\n<template>\n  <BStatistic\n    class=\"b-statistic-timer\"\n    :title=\"title\"\n    :value=\"formatted\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n  >\n    <template v-if=\"$slots.title\" #title><slot name=\"title\" /></template>\n    <template v-if=\"$slots.prefix\" #prefix><slot name=\"prefix\" /></template>\n    <template v-if=\"$slots.suffix\" #suffix><slot name=\"suffix\" /></template>\n  </BStatistic>\n</template>\n"],"mappings":""}

package/dist/design-system218.js

@@ -0,0 +1,111 @@
+import { BCommonSize as e, BIconSize as t, BStepsDirection as n, BStepsLabelPlacement as r, BStepsStatus as i, BStepsType as a } from "./design-system3.js";
+import o from "./design-system27.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, toRefs as b, unref as x, useModel as S } from "vue";
+//#region src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-status"], w = [
+	"role",
+	"tabindex",
+	"aria-disabled",
+	"aria-current",
+	"onClick",
+	"onKeydown"
+], T = { class: "b:flex b:items-center b:gap-x-2" }, E = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "b-steps__tail"
+}, D = /* @__PURE__ */ p({
+	__name: "BSteps",
+	props: /* @__PURE__ */ m({
+		items: { default: () => [] },
+		status: { default: i.Process },
+		direction: { default: n.Horizontal },
+		size: { default: e.Medium },
+		labelPlacement: { default: r.Horizontal },
+		type: { default: a.Default }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ m(["change"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let { items: D, status: O, direction: k, size: A, labelPlacement: j, type: M } = b(p), N = S(p, "modelValue"), P = m, F = c(() => A.value === e.Small ? e.Small : e.Medium), I = c(() => F.value === e.Small ? t.Small : t.Medium), L = c(() => ({
+			"--b-steps-icon-size": F.value === e.Small ? "1.5rem" : "2rem",
+			"--b-steps-gap": F.value === e.Small ? "0.5rem" : "0.75rem"
+		})), R = c(() => F.value === e.Small ? "b:text-sm" : "b:text-base"), z = c(() => F.value === e.Small ? "b:text-xs" : "b:text-sm"), B = c(() => M.value === a.Navigation), V = (e, t) => e.status ? e.status : t === N.value ? O.value || i.Process : t < N.value ? i.Finish : i.Wait, H = (e) => {
+			switch (e) {
+				case i.Finish:
+				case i.Process: return "var(--b-color-primary)";
+				case i.Error: return "var(--b-color-failure)";
+				case i.Wait:
+				default: return "var(--b-color-zinc-200)";
+			}
+		}, U = (e, t) => {
+			!B.value || e.disabled || (N.value = t, P("change", t));
+		}, W = (e, t, n) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), U(t, n));
+		}, G = (e) => ({
+			"b:border-secondary b:bg-white b:text-secondary": e === i.Wait,
+			"b:border-primary b:bg-primary b:text-white": e === i.Process,
+			"b:border-primary b:bg-white b:text-primary": e === i.Finish,
+			"b:border-failure b:bg-white b:text-failure": e === i.Error
+		}), K = (e) => ({
+			"b:text-black-base": e === i.Process || e === i.Finish,
+			"b:text-failure": e === i.Error,
+			"b:text-black/65": e === i.Wait
+		}), q = (e) => ({
+			"b:text-black/65": e !== i.Error,
+			"b:text-failure": e === i.Error
+		});
+		return (t, c) => (_(), d("ol", {
+			class: h(["b-steps", [{
+				"b-steps--horizontal": x(k) === x(n).Horizontal,
+				"b-steps--vertical": x(k) === x(n).Vertical,
+				"b-steps--label-vertical": x(k) === x(n).Horizontal && x(j) === x(r).Vertical,
+				"b-steps--navigation": x(M) === x(a).Navigation,
+				"b-steps--inline": x(M) === x(a).Inline
+			}]]),
+			style: g(L.value)
+		}, [(_(!0), d(s, null, v(x(D), (t, a) => (_(), d("li", {
+			key: `${t.title}-${a}`,
+			class: h(["b-steps__item", [{ "b:opacity-50": t.disabled }, { "b-steps__item--clickable": B.value && !t.disabled }]]),
+			"data-status": V(t, a),
+			style: g({ "--b-steps-tail-color": H(V(t, a)) })
+		}, [f("div", {
+			class: "b-steps__item-inner",
+			role: B.value && !t.disabled ? "button" : void 0,
+			tabindex: B.value && !t.disabled ? 0 : void 0,
+			"aria-disabled": t.disabled ? "true" : void 0,
+			"aria-current": a === N.value ? "step" : void 0,
+			onClick: (e) => U(t, a),
+			onKeydown: (e) => W(e, t, a)
+		}, [f("div", { class: h(["b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border", [G(V(t, a)), {
+			"b:h-6 b:w-6": F.value === x(e).Small,
+			"b:h-8 b:w-8": F.value === x(e).Medium
+		}]]) }, [t.icon ? (_(), l(o, {
+			key: 0,
+			icon: t.icon,
+			size: I.value
+		}, null, 8, ["icon", "size"])) : V(t, a) === x(i).Finish ? (_(), l(o, {
+			key: 1,
+			icon: "check",
+			size: I.value
+		}, null, 8, ["size"])) : V(t, a) === x(i).Error ? (_(), l(o, {
+			key: 2,
+			icon: "xmark",
+			size: I.value
+		}, null, 8, ["size"])) : (_(), d("span", {
+			key: 3,
+			class: h(R.value)
+		}, y(a + 1), 3))], 2), f("div", { class: h(["b-steps__content b:flex b:flex-col b:gap-y-1", [{ "b:items-center b:text-center": x(k) === x(n).Horizontal && x(j) === x(r).Vertical }]]) }, [f("div", T, [f("span", { class: h(["b:font-medium", [R.value, K(V(t, a))]]) }, y(t.title), 3), t.subTitle ? (_(), d("span", {
+			key: 0,
+			class: h(["b:text-xs b:text-black/65", K(V(t, a))])
+		}, y(t.subTitle), 3)) : u("", !0)]), t.description ? (_(), d("p", {
+			key: 0,
+			class: h(["b:leading-snug", [z.value, q(V(t, a))]])
+		}, y(t.description), 3)) : u("", !0)], 2)], 40, w), x(k) === x(n).Horizontal && a < x(D).length - 1 ? (_(), d("span", E)) : u("", !0)], 14, C))), 128))], 6));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=design-system218.js.map

package/dist/design-system218.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system218.js","names":[],"sources":["../src/components/BSteps/BSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\nconst props = withDefaults(defineProps<BStepsProps>(), {\n  items: () => [],\n  status: BStepsStatus.Process,\n  direction: BStepsDirection.Horizontal,\n  size: BCommonSize.Medium,\n  labelPlacement: BStepsLabelPlacement.Horizontal,\n  type: BStepsType.Default,\n});\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the current step changes via user interaction.\n   */\n  change: [value: number];\n}>();\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n</script>\n\n<template>\n  <ol\n    class=\"b-steps\"\n    :class=\"[\n      {\n        'b-steps--horizontal': direction === BStepsDirection.Horizontal,\n        'b-steps--vertical': direction === BStepsDirection.Vertical,\n        'b-steps--label-vertical':\n          direction === BStepsDirection.Horizontal &&\n          labelPlacement === BStepsLabelPlacement.Vertical,\n        'b-steps--navigation': type === BStepsType.Navigation,\n        'b-steps--inline': type === BStepsType.Inline,\n      },\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <li\n      v-for=\"(item, index) in items\"\n      :key=\"`${item.title}-${index}`\"\n      class=\"b-steps__item\"\n      :class=\"[\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable && !item.disabled },\n      ]\"\n      :data-status=\"getStepStatus(item, index)\"\n      :style=\"{ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) }\"\n    >\n      <div\n        class=\"b-steps__item-inner\"\n        :role=\"isClickable && !item.disabled ? 'button' : undefined\"\n        :tabindex=\"isClickable && !item.disabled ? 0 : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-current=\"index === model ? 'step' : undefined\"\n        @click=\"onStepClick(item, index)\"\n        @keydown=\"onStepKeydown($event, item, index)\"\n      >\n        <div\n          class=\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\"\n          :class=\"[\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize === BCommonSize.Small,\n              'b:h-8 b:w-8': normalizedSize === BCommonSize.Medium,\n            },\n          ]\"\n        >\n          <template v-if=\"item.icon\">\n            <BIcon :icon=\"item.icon\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Finish\">\n            <BIcon icon=\"check\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Error\">\n            <BIcon icon=\"xmark\" :size=\"iconSize\" />\n          </template>\n          <template v-else>\n            <span :class=\"titleSizeClass\">{{ index + 1 }}</span>\n          </template>\n        </div>\n\n        <div\n          class=\"b-steps__content b:flex b:flex-col b:gap-y-1\"\n          :class=\"[\n            {\n              'b:items-center b:text-center':\n                direction === BStepsDirection.Horizontal &&\n                labelPlacement === BStepsLabelPlacement.Vertical,\n            },\n          ]\"\n        >\n          <div class=\"b:flex b:items-center b:gap-x-2\">\n            <span\n              class=\"b:font-medium\"\n              :class=\"[titleSizeClass, titleClass(getStepStatus(item, index))]\"\n            >\n              {{ item.title }}\n            </span>\n            <span\n              v-if=\"item.subTitle\"\n              class=\"b:text-xs b:text-black/65\"\n              :class=\"titleClass(getStepStatus(item, index))\"\n            >\n              {{ item.subTitle }}\n            </span>\n          </div>\n          <p\n            v-if=\"item.description\"\n            class=\"b:leading-snug\"\n            :class=\"[descriptionSizeClass, descriptionClass(getStepStatus(item, index))]\"\n          >\n            {{ item.description }}\n          </p>\n        </div>\n      </div>\n      <span\n        v-if=\"direction === BStepsDirection.Horizontal && index < items.length - 1\"\n        aria-hidden=\"true\"\n        class=\"b-steps__tail\"\n      />\n    </li>\n  </ol>\n</template>\n\n<style scoped>\n.b-steps {\n  display: flex;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical {\n  flex-direction: column;\n}\n\n.b-steps__item {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-steps__item-inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.b-steps__icon {\n  flex-shrink: 0;\n}\n\n.b-steps__content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.b-steps--label-vertical .b-steps__item-inner {\n  flex-direction: column;\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__item-inner {\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__content {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--inline .b-steps__content p {\n  display: none;\n}\n\n.b-steps__item--clickable .b-steps__item-inner {\n  cursor: pointer;\n}\n\n.b-steps--horizontal .b-steps__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item {\n  padding-bottom: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--b-steps-icon-size) + var(--b-steps-gap));\n  left: calc(var(--b-steps-icon-size) / 2);\n  bottom: 0;\n  width: 1px;\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--vertical .b-steps__item:last-child::after {\n  display: none;\n}\n\n.b-steps__tail {\n  flex: 1 1 0;\n  min-width: 1.5rem;\n  height: 1px;\n  margin-top: calc(var(--b-steps-icon-size) / 2);\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--navigation .b-steps__item--clickable .b-steps__content {\n  transition: color 0.2s ease;\n}\n\n.b-steps--navigation .b-steps__item--clickable:hover .b-steps__content {\n  color: var(--b-color-primary);\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system22.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system22.js","names":[],"sources":["../src/components/BBreadcrumb/BBreadcrumb.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = {\n  class: \"b-breadcrumb\",\n  \"aria-label\": \"Breadcrumb\"\n}\nconst _hoisted_2 = [\"href\", \"title\", \"aria-current\"]\nconst _hoisted_3 = {\n  key: 0,\n  \"aria-hidden\": \"true\",\n  class: \"b-breadcrumb__separator b:pl-2\"\n}\nconst _hoisted_4 = {\n  key: 0,\n  class: \"b-breadcrumb__ellipsis b:pl-2\"\n}\nconst _hoisted_5 = [\"aria-expanded\"]\nconst _hoisted_6 = [\"id\"]\nconst _hoisted_7 = [\"href\", \"title\"]\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport type { BBreadcrumbItem } from '@/types';\nimport { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';\n\ninterface BBreadcrumbItemInternal extends BBreadcrumbItem {\n  hidden: boolean;\n  width: number;\n}\n\n//#region Props\nexport interface BBreadcrumbProps {\n  /**\n   * Array of breadcrumb items.\n   */\n  items?: BBreadcrumbItem[];\n  /**\n   * Separator string between items.\n   * @default '/'\n   */\n  separator?: string;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BBreadcrumb',\n  props: {\n    items: { default: () => [] },\n    separator: { default: '/' }\n  },\n  setup(__props: any) {\n\nconst props = __props;\n//#endregion\n\n//#region Data\nconst collapsedBreadcrumbMenu = ref(false);\nconst ulRef = ref<HTMLOListElement | null>(null);\nconst liRefs = ref<HTMLLIElement[]>([]);\nconst ellipsisRef = ref<HTMLSpanElement | null>(null);\nconst ellipsisMenuRef = ref<HTMLUListElement | null>(null);\nconst breadcrumbItems = ref<BBreadcrumbItemInternal[]>(\n  props.items.map((item) => ({ ...item, hidden: false, width: 0 })),\n);\nconst resizeObserver = new ResizeObserver(() => {\n  if (breadcrumbItems.value.length <= 1) {\n    return;\n  }\n\n  if (!ulRef.value) return;\n\n  const ulRefWidth = ulRef.value.clientWidth;\n  const ellipsisRefWidth = ellipsisRef.value?.clientWidth ?? 0;\n\n  for (let i = 1; i < breadcrumbItems.value.length; i++) {\n    if (\n      breadcrumbItems.value.reduce((acc, item) => (!item.hidden ? acc + item.width : acc), 0) +\n        ellipsisRefWidth >\n      ulRefWidth\n    ) {\n      breadcrumbItems.value[i].hidden = true;\n    } else {\n      break;\n    }\n  }\n\n  for (let i = breadcrumbItems.value.length - 1; i >= 1; i--) {\n    if (breadcrumbItems.value[i].hidden) {\n      if (\n        breadcrumbItems.value.reduce((acc, item) => (!item.hidden ? acc + item.width : acc), 0) +\n          breadcrumbItems.value[i].width +\n          ellipsisRefWidth <=\n        ulRefWidth\n      ) {\n        breadcrumbItems.value[i].hidden = false;\n      } else {\n        break;\n      }\n    }\n  }\n});\nconst isCollapsed = computed(() => breadcrumbItems.value.some((i) => i.hidden));\nconst { componentUID } = useComponentId();\nconst ellipsisMenuId = computed(() => `b-breadcrumb-menu-${componentUID.value}`);\n//#endregion\n\n//#region Methods\nconst toggleCollapedBreadcrumbMenu = () => {\n  collapsedBreadcrumbMenu.value = !collapsedBreadcrumbMenu.value;\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst removeClickOutsideEventListener = () => {\n  document.removeEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: Event) => {\n  const refs = [ellipsisRef.value, ellipsisMenuRef.value].filter(Boolean) as HTMLElement[];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    collapsedBreadcrumbMenu.value = false;\n  }\n};\nconst onEllipsisKeydown = (event: KeyboardEvent) => {\n  if (event.key === 'Enter') {\n    toggleCollapedBreadcrumbMenu();\n  } else if (event.key === 'Escape') {\n    collapsedBreadcrumbMenu.value = false;\n  }\n};\n//#endregion\n\n//#region Lifecycle hooks\nonMounted(() => {\n  initClickOutsideEventListener();\n  resizeObserver.observe(ulRef.value!);\n\n  nextTick(() => {\n    breadcrumbItems.value.forEach((item, index) => {\n      if (liRefs.value[index]) {\n        item.width = liRefs.value[index].clientWidth;\n      }\n    });\n  });\n});\nonUnmounted(() => {\n  removeClickOutsideEventListener();\n  if (ulRef.value) {\n    resizeObserver.unobserve(ulRef.value);\n  }\n  resizeObserver.disconnect();\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"nav\", _hoisted_1, [\n    _createElementVNode(\"ol\", {\n      ref_key: \"ulRef\",\n      ref: ulRef,\n      role: \"list\",\n      class: \"b-breadcrumb__list b:relative b:flex\"\n    }, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(breadcrumbItems.value, (item, index) => {\n        return (_openBlock(), _createElementBlock(_Fragment, {\n          key: `item-${item.text}`\n        }, [\n          _createElementVNode(\"li\", {\n            ref_for: true,\n            ref_key: \"liRefs\",\n            ref: liRefs,\n            class: _normalizeClass([\"b-breadcrumb__item b:whitespace-nowrap b:text-black/[0.85]\", { 'b:pl-2': index > 0 }])\n          }, [\n            _renderSlot(_ctx.$slots, `item-${index}`, { item: item }, () => [\n              _createElementVNode(\"a\", {\n                href: item.href,\n                title: item.text,\n                class: \"b-breadcrumb__link b:cursor-pointer b:transition-colors b:hover:text-primary\",\n                \"aria-current\": index === breadcrumbItems.value.length - 1 ? 'page' : undefined\n              }, _toDisplayString(item.text), 9, _hoisted_2)\n            ]),\n            (index < breadcrumbItems.value.length - 1)\n              ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [\n                  _renderSlot(_ctx.$slots, `separator-${index}`, { item: item }, () => [\n                    _createTextVNode(_toDisplayString(__props.separator), 1)\n                  ])\n                ]))\n              : _createCommentVNode(\"\", true)\n          ], 2),\n          (index === 0 && isCollapsed.value)\n            ? (_openBlock(), _createElementBlock(\"li\", _hoisted_4, [\n                _createElementVNode(\"span\", {\n                  ref_for: true,\n                  ref_key: \"ellipsisRef\",\n                  ref: ellipsisRef,\n                  class: \"b:inline-block\"\n                }, [\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    class: _normalizeClass([\"b-breadcrumb__ellipsis-btn b:cursor-pointer b:rounded-lg b:bg-slate-100 b:px-2 b:text-primary b:transition-colors b:hover:bg-slate-50\", { 'b:bg-slate-50': collapsedBreadcrumbMenu.value }]),\n                    \"aria-expanded\": collapsedBreadcrumbMenu.value,\n                    \"aria-label\": \"Show hidden breadcrumb items\",\n                    onClick: _withModifiers(toggleCollapedBreadcrumbMenu, [\"stop\"]),\n                    onKeydown: onEllipsisKeydown\n                  }, \" ... \", 42, _hoisted_5),\n                  _withDirectives(_createElementVNode(\"ol\", {\n                    id: ellipsisMenuId.value,\n                    ref_for: true,\n                    ref_key: \"ellipsisMenuRef\",\n                    ref: ellipsisMenuRef,\n                    class: \"b:absolute b:mt-1 b:space-y-2 b:rounded-lg b:bg-white b:p-4 b:shadow\"\n                  }, [\n                    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(breadcrumbItems.value.filter((i) => i.hidden), (hiddenItem) => {\n                      return (_openBlock(), _createElementBlock(\"li\", {\n                        key: hiddenItem.text\n                      }, [\n                        _createElementVNode(\"a\", {\n                          href: hiddenItem.href,\n                          title: hiddenItem.text,\n                          class: \"b-breadcrumb__link b:cursor-pointer b:transition-colors b:hover:text-primary\"\n                        }, _toDisplayString(hiddenItem.text), 9, _hoisted_7)\n                      ]))\n                    }), 128))\n                  ], 8, _hoisted_6), [\n                    [_vShow, collapsedBreadcrumbMenu.value]\n                  ])\n                ], 512)\n              ]))\n            : _createCommentVNode(\"\", true)\n        ], 64))\n      }), 128))\n    ], 512)\n  ]))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system22.js","names":[],"sources":["../src/components/BBreadcrumb/BBreadcrumb.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport type { BBreadcrumbItem } from '@/types';\nimport { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';\n\ninterface BBreadcrumbItemInternal extends BBreadcrumbItem {\n  hidden: boolean;\n  width: number;\n}\n\n//#region Props\nexport interface BBreadcrumbProps {\n  /**\n   * Array of breadcrumb items.\n   */\n  items?: BBreadcrumbItem[];\n  /**\n   * Separator string between items.\n   * @default '/'\n   */\n  separator?: string;\n}\n\nconst props = withDefaults(defineProps<BBreadcrumbProps>(), {\n  items: () => [],\n  separator: '/',\n});\n//#endregion\n\n//#region Data\nconst collapsedBreadcrumbMenu = ref(false);\nconst ulRef = ref<HTMLOListElement | null>(null);\nconst liRefs = ref<HTMLLIElement[]>([]);\nconst ellipsisRef = ref<HTMLSpanElement | null>(null);\nconst ellipsisMenuRef = ref<HTMLUListElement | null>(null);\nconst breadcrumbItems = ref<BBreadcrumbItemInternal[]>(\n  props.items.map((item) => ({ ...item, hidden: false, width: 0 })),\n);\nconst resizeObserver = new ResizeObserver(() => {\n  if (breadcrumbItems.value.length <= 1) {\n    return;\n  }\n\n  if (!ulRef.value) return;\n\n  const ulRefWidth = ulRef.value.clientWidth;\n  const ellipsisRefWidth = ellipsisRef.value?.clientWidth ?? 0;\n\n  for (let i = 1; i < breadcrumbItems.value.length; i++) {\n    if (\n      breadcrumbItems.value.reduce((acc, item) => (!item.hidden ? acc + item.width : acc), 0) +\n        ellipsisRefWidth >\n      ulRefWidth\n    ) {\n      breadcrumbItems.value[i].hidden = true;\n    } else {\n      break;\n    }\n  }\n\n  for (let i = breadcrumbItems.value.length - 1; i >= 1; i--) {\n    if (breadcrumbItems.value[i].hidden) {\n      if (\n        breadcrumbItems.value.reduce((acc, item) => (!item.hidden ? acc + item.width : acc), 0) +\n          breadcrumbItems.value[i].width +\n          ellipsisRefWidth <=\n        ulRefWidth\n      ) {\n        breadcrumbItems.value[i].hidden = false;\n      } else {\n        break;\n      }\n    }\n  }\n});\nconst isCollapsed = computed(() => breadcrumbItems.value.some((i) => i.hidden));\nconst { componentUID } = useComponentId();\nconst ellipsisMenuId = computed(() => `b-breadcrumb-menu-${componentUID.value}`);\n//#endregion\n\n//#region Methods\nconst toggleCollapedBreadcrumbMenu = () => {\n  collapsedBreadcrumbMenu.value = !collapsedBreadcrumbMenu.value;\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst removeClickOutsideEventListener = () => {\n  document.removeEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: Event) => {\n  const refs = [ellipsisRef.value, ellipsisMenuRef.value].filter(Boolean) as HTMLElement[];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    collapsedBreadcrumbMenu.value = false;\n  }\n};\nconst onEllipsisKeydown = (event: KeyboardEvent) => {\n  if (event.key === 'Enter') {\n    toggleCollapedBreadcrumbMenu();\n  } else if (event.key === 'Escape') {\n    collapsedBreadcrumbMenu.value = false;\n  }\n};\n//#endregion\n\n//#region Lifecycle hooks\nonMounted(() => {\n  initClickOutsideEventListener();\n  resizeObserver.observe(ulRef.value!);\n\n  nextTick(() => {\n    breadcrumbItems.value.forEach((item, index) => {\n      if (liRefs.value[index]) {\n        item.width = liRefs.value[index].clientWidth;\n      }\n    });\n  });\n});\nonUnmounted(() => {\n  removeClickOutsideEventListener();\n  if (ulRef.value) {\n    resizeObserver.unobserve(ulRef.value);\n  }\n  resizeObserver.disconnect();\n});\n//#endregion\n</script>\n\n<template>\n  <nav class=\"b-breadcrumb\" aria-label=\"Breadcrumb\">\n    <ol ref=\"ulRef\" role=\"list\" class=\"b-breadcrumb__list b:relative b:flex\">\n      <template v-for=\"(item, index) in breadcrumbItems\" :key=\"`item-${item.text}`\">\n        <li\n          ref=\"liRefs\"\n          class=\"b-breadcrumb__item b:whitespace-nowrap b:text-black/[0.85]\"\n          :class=\"{ 'b:pl-2': index > 0 }\"\n        >\n          <slot :item=\"item\" :name=\"`item-${index}`\">\n            <a\n              :href=\"item.href\"\n              :title=\"item.text\"\n              class=\"b-breadcrumb__link b:cursor-pointer b:transition-colors b:hover:text-primary\"\n              :aria-current=\"index === breadcrumbItems.length - 1 ? 'page' : undefined\"\n            >\n              {{ item.text }}\n            </a>\n          </slot>\n\n          <span\n            v-if=\"index < breadcrumbItems.length - 1\"\n            aria-hidden=\"true\"\n            class=\"b-breadcrumb__separator b:pl-2\"\n          >\n            <slot :item=\"item\" :name=\"`separator-${index}`\">\n              {{ separator }}\n            </slot>\n          </span>\n        </li>\n\n        <!-- Ellipsis control after the first item -->\n        <li v-if=\"index === 0 && isCollapsed\" class=\"b-breadcrumb__ellipsis b:pl-2\">\n          <span ref=\"ellipsisRef\" class=\"b:inline-block\">\n            <button\n              type=\"button\"\n              class=\"b-breadcrumb__ellipsis-btn b:cursor-pointer b:rounded-lg b:bg-slate-100 b:px-2 b:text-primary b:transition-colors b:hover:bg-slate-50\"\n              :class=\"{ 'b:bg-slate-50': collapsedBreadcrumbMenu }\"\n              :aria-expanded=\"collapsedBreadcrumbMenu\"\n              aria-label=\"Show hidden breadcrumb items\"\n              @click.stop=\"toggleCollapedBreadcrumbMenu\"\n              @keydown=\"onEllipsisKeydown\"\n            >\n              ...\n            </button>\n            <ol\n              v-show=\"collapsedBreadcrumbMenu\"\n              :id=\"ellipsisMenuId\"\n              ref=\"ellipsisMenuRef\"\n              class=\"b:absolute b:mt-1 b:space-y-2 b:rounded-lg b:bg-white b:p-4 b:shadow\"\n            >\n              <li\n                v-for=\"hiddenItem in breadcrumbItems.filter((i) => i.hidden)\"\n                :key=\"hiddenItem.text\"\n              >\n                <a\n                  :href=\"hiddenItem.href\"\n                  :title=\"hiddenItem.text\"\n                  class=\"b-breadcrumb__link b:cursor-pointer b:transition-colors b:hover:text-primary\"\n                >\n                  {{ hiddenItem.text }}\n                </a>\n              </li>\n            </ol>\n          </span>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/design-system220.js

@@ -1,6 +1,9 @@
-//#region src/components/BTabs/types.ts
-var e = Symbol("BTabsContext");
+import e from "./design-system14.js";
+import t from "./design-system218.js";
+/* empty css                 */
+//#region src/components/BSteps/BSteps.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-75d0dd09"]]);
 //#endregion
-export { e as BTabsContextKey };
+export { n as default };
 
 //# sourceMappingURL=design-system220.js.map

package/dist/design-system220.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system220.js","names":[],"sources":["../src/components/BTabs/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, VNode } from 'vue';\n\nexport type BTabsType = 'line' | 'card' | 'editable-card';\nexport type BTabsPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type BTabsSize = 'small' | 'middle' | 'large';\n\nexport interface BTabItem {\n  /** Unique identifier for the tab. */\n  key: string;\n  /** Tab header text or VNode. */\n  label?: string | VNode;\n  /** Whether the tab is disabled. @default false */\n  disabled?: boolean;\n  /** Whether the close button is shown (editable-card only). @default true */\n  closable?: boolean;\n  /** Whether to destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to force render content even when not active. @default false */\n  forceRender?: boolean;\n  /** Whether to keep this tab's component state alive when switching away. Overrides global keepAlive. */\n  keepAlive?: boolean;\n}\n\n// ─────────────────────────────────────────────\n// BTabPane registration (provide/inject)\n// ─────────────────────────────────────────────\n\nexport interface BTabPaneRegistration {\n  /** Unique key for this pane. */\n  key: string;\n  /** Tab label (text or VNode). */\n  label?: string | VNode;\n  /** Whether tab is disabled. */\n  disabled?: boolean;\n  /** Whether close button shows in editable-card mode. */\n  closable?: boolean;\n  /** Whether to destroy when hidden. */\n  destroyOnHidden?: boolean;\n  /** Whether to force render even when inactive. */\n  forceRender?: boolean;\n  /** Per-pane keepAlive override. */\n  keepAlive?: boolean;\n  /** Render function for the pane content (from BTabPane's default slot). */\n  renderContent: () => VNode[];\n  /** Optional render function for custom label (from BTabPane's tab slot). */\n  renderLabel?: () => VNode[];\n}\n\n// ─────────────────────────────────────────────\n// Context injected from BTabs to BTabPane children\n// ─────────────────────────────────────────────\n\nexport interface BTabsContext {\n  /** Currently active tab key. */\n  activeKey: ComputedRef<string>;\n  /** Tab type. */\n  type: ComputedRef<BTabsType>;\n  /** Tab size. */\n  size: ComputedRef<BTabsSize>;\n  /** Tab placement. */\n  placement: ComputedRef<BTabsPlacement>;\n  /** Global keepAlive setting. */\n  keepAlive: ComputedRef<boolean>;\n  /** Global destroyOnHidden setting. */\n  destroyOnHidden: ComputedRef<boolean>;\n  /** Register a pane. */\n  register: (pane: BTabPaneRegistration) => void;\n  /** Unregister a pane by key. */\n  unregister: (key: string) => void;\n  /** Update a registered pane's data (when props change reactively). */\n  update: (key: string, pane: BTabPaneRegistration) => void;\n}\n\nexport const BTabsContextKey: InjectionKey<BTabsContext> = Symbol('BTabsContext');\n"],"mappings":";AAyEA,IAAa,IAA8C,OAAO,eAAe"}
+{"version":3,"file":"design-system220.js","names":[],"sources":["../src/components/BSteps/BSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\nconst props = withDefaults(defineProps<BStepsProps>(), {\n  items: () => [],\n  status: BStepsStatus.Process,\n  direction: BStepsDirection.Horizontal,\n  size: BCommonSize.Medium,\n  labelPlacement: BStepsLabelPlacement.Horizontal,\n  type: BStepsType.Default,\n});\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the current step changes via user interaction.\n   */\n  change: [value: number];\n}>();\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n</script>\n\n<template>\n  <ol\n    class=\"b-steps\"\n    :class=\"[\n      {\n        'b-steps--horizontal': direction === BStepsDirection.Horizontal,\n        'b-steps--vertical': direction === BStepsDirection.Vertical,\n        'b-steps--label-vertical':\n          direction === BStepsDirection.Horizontal &&\n          labelPlacement === BStepsLabelPlacement.Vertical,\n        'b-steps--navigation': type === BStepsType.Navigation,\n        'b-steps--inline': type === BStepsType.Inline,\n      },\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <li\n      v-for=\"(item, index) in items\"\n      :key=\"`${item.title}-${index}`\"\n      class=\"b-steps__item\"\n      :class=\"[\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable && !item.disabled },\n      ]\"\n      :data-status=\"getStepStatus(item, index)\"\n      :style=\"{ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) }\"\n    >\n      <div\n        class=\"b-steps__item-inner\"\n        :role=\"isClickable && !item.disabled ? 'button' : undefined\"\n        :tabindex=\"isClickable && !item.disabled ? 0 : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-current=\"index === model ? 'step' : undefined\"\n        @click=\"onStepClick(item, index)\"\n        @keydown=\"onStepKeydown($event, item, index)\"\n      >\n        <div\n          class=\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\"\n          :class=\"[\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize === BCommonSize.Small,\n              'b:h-8 b:w-8': normalizedSize === BCommonSize.Medium,\n            },\n          ]\"\n        >\n          <template v-if=\"item.icon\">\n            <BIcon :icon=\"item.icon\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Finish\">\n            <BIcon icon=\"check\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Error\">\n            <BIcon icon=\"xmark\" :size=\"iconSize\" />\n          </template>\n          <template v-else>\n            <span :class=\"titleSizeClass\">{{ index + 1 }}</span>\n          </template>\n        </div>\n\n        <div\n          class=\"b-steps__content b:flex b:flex-col b:gap-y-1\"\n          :class=\"[\n            {\n              'b:items-center b:text-center':\n                direction === BStepsDirection.Horizontal &&\n                labelPlacement === BStepsLabelPlacement.Vertical,\n            },\n          ]\"\n        >\n          <div class=\"b:flex b:items-center b:gap-x-2\">\n            <span\n              class=\"b:font-medium\"\n              :class=\"[titleSizeClass, titleClass(getStepStatus(item, index))]\"\n            >\n              {{ item.title }}\n            </span>\n            <span\n              v-if=\"item.subTitle\"\n              class=\"b:text-xs b:text-black/65\"\n              :class=\"titleClass(getStepStatus(item, index))\"\n            >\n              {{ item.subTitle }}\n            </span>\n          </div>\n          <p\n            v-if=\"item.description\"\n            class=\"b:leading-snug\"\n            :class=\"[descriptionSizeClass, descriptionClass(getStepStatus(item, index))]\"\n          >\n            {{ item.description }}\n          </p>\n        </div>\n      </div>\n      <span\n        v-if=\"direction === BStepsDirection.Horizontal && index < items.length - 1\"\n        aria-hidden=\"true\"\n        class=\"b-steps__tail\"\n      />\n    </li>\n  </ol>\n</template>\n\n<style scoped>\n.b-steps {\n  display: flex;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical {\n  flex-direction: column;\n}\n\n.b-steps__item {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-steps__item-inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.b-steps__icon {\n  flex-shrink: 0;\n}\n\n.b-steps__content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.b-steps--label-vertical .b-steps__item-inner {\n  flex-direction: column;\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__item-inner {\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__content {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--inline .b-steps__content p {\n  display: none;\n}\n\n.b-steps__item--clickable .b-steps__item-inner {\n  cursor: pointer;\n}\n\n.b-steps--horizontal .b-steps__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item {\n  padding-bottom: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--b-steps-icon-size) + var(--b-steps-gap));\n  left: calc(var(--b-steps-icon-size) / 2);\n  bottom: 0;\n  width: 1px;\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--vertical .b-steps__item:last-child::after {\n  display: none;\n}\n\n.b-steps__tail {\n  flex: 1 1 0;\n  min-width: 1.5rem;\n  height: 1px;\n  margin-top: calc(var(--b-steps-icon-size) / 2);\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--navigation .b-steps__item--clickable .b-steps__content {\n  transition: color 0.2s ease;\n}\n\n.b-steps--navigation .b-steps__item--clickable:hover .b-steps__content {\n  color: var(--b-color-primary);\n}\n</style>\n"],"mappings":""}

package/dist/design-system221.js

@@ -1,49 +1,109 @@
-import { BTabsContextKey as e } from "./design-system220.js";
-import { createCommentVNode as t, defineComponent as n, inject as r, onBeforeUnmount as i, onMounted as a, useSlots as o, watch as s } from "vue";
-//#region src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts
-var c = /* @__PURE__ */ n({
-	__name: "BTabPane",
-	props: {
-		tabKey: {},
-		tab: {},
-		disabled: { type: Boolean },
-		closable: { type: Boolean },
-		destroyOnHidden: { type: Boolean },
-		forceRender: { type: Boolean },
-		keepAlive: { type: Boolean }
-	},
-	setup(n) {
-		let c = n, l = o(), u = r(e, null);
-		function d() {
-			return {
-				key: c.tabKey,
-				label: c.tab,
-				disabled: c.disabled,
-				closable: c.closable,
-				destroyOnHidden: c.destroyOnHidden,
-				forceRender: c.forceRender,
-				keepAlive: c.keepAlive,
-				renderContent: () => l.default?.() ?? [],
-				renderLabel: l.tab ? () => l.tab() : void 0
-			};
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, useModel as d, watch as f } from "vue";
+//#region src/components/BSwitch/BSwitch.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"aria-checked",
+	"aria-disabled",
+	"disabled",
+	"tabindex"
+], m = {
+	class: "b-switch__handle",
+	"aria-hidden": "true"
+}, h = {
+	key: 0,
+	class: "b-switch__loading-icon",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true"
+}, g = {
+	class: "b-switch__inner",
+	"aria-hidden": "true"
+}, _ = {
+	key: 0,
+	class: "b-switch__inner-checked"
+}, v = {
+	key: 1,
+	class: "b-switch__inner-unchecked"
+}, y = /* @__PURE__ */ i({
+	__name: "BSwitch",
+	props: /* @__PURE__ */ a({
+		defaultChecked: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ a(["change", "click"], ["update:modelValue"]),
+	setup(i, { expose: a, emit: y }) {
+		let b = d(i, "modelValue"), x = y, S = l(i.defaultChecked), C = e(() => b.value === void 0 ? S.value : b.value);
+		s(() => {
+			b.value === void 0 && (S.value = i.defaultChecked);
+		}), f(() => b.value, (e) => {
+			e !== void 0 && (S.value = e);
+		});
+		function w(e) {
+			if (i.disabled || i.loading) return;
+			let t = !C.value;
+			S.value = t, b.value = t, x("change", t, e), e instanceof MouseEvent && x("click", t, e);
 		}
-		return a(() => {
-			u?.register(d());
-		}), i(() => {
-			u?.unregister(c.tabKey);
-		}), s(() => [
-			c.tab,
-			c.disabled,
-			c.closable,
-			c.destroyOnHidden,
-			c.forceRender,
-			c.keepAlive
-		], () => {
-			u?.update(c.tabKey, d());
-		}), (e, n) => t("", !0);
+		function T(e) {
+			w(e);
+		}
+		function E(e) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), w(e));
+		}
+		let D = l(null);
+		function O() {
+			D.value?.focus();
+		}
+		function k() {
+			D.value?.blur();
+		}
+		return a({
+			focus: O,
+			blur: k
+		}), (e, a) => (c(), n("button", {
+			ref_key: "rootRef",
+			ref: D,
+			type: "button",
+			role: "switch",
+			class: o(["b-switch", [`b-switch--${i.size}`, {
+				"b-switch--checked": C.value,
+				"b-switch--disabled": i.disabled,
+				"b-switch--loading": i.loading
+			}]]),
+			"aria-checked": C.value,
+			"aria-disabled": i.disabled || i.loading || void 0,
+			disabled: i.disabled,
+			tabindex: i.disabled ? -1 : 0,
+			onClick: T,
+			onKeydown: E
+		}, [r("span", m, [i.loading ? (c(), n("svg", h, [...a[0] ||= [r("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-dasharray": "28",
+			"stroke-dashoffset": "8"
+		}, null, -1)]])) : t("", !0)]), r("span", g, [C.value ? (c(), n("span", _, [u(e.$slots, "checked", {}, void 0, !0)])) : (c(), n("span", v, [u(e.$slots, "unchecked", {}, void 0, !0)]))])], 42, p));
 	}
 });
 //#endregion
-export { c as default };
+export { y as default };
 
 //# sourceMappingURL=design-system221.js.map

package/dist/design-system221.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system221.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode } from \"vue\"\n\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTabPane',\n  props: {\n    tabKey: {},\n    tab: {},\n    disabled: { type: Boolean },\n    closable: { type: Boolean },\n    destroyOnHidden: { type: Boolean },\n    forceRender: { type: Boolean },\n    keepAlive: { type: Boolean }\n  },\n  setup(__props: any) {\n\nconst props = __props;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n\nreturn (_ctx: any,_cache: any) => {\n  return false\n    ? _renderSlot(_ctx.$slots, \"default\", { key: 0 })\n    : _createCommentVNode(\"\", true)\n}\n}\n\n})"],"mappings":";;;AAYA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ,EAAE;EACV,KAAK,EAAE;EACP,UAAU,EAAE,MAAM,SAAS;EAC3B,UAAU,EAAE,MAAM,SAAS;EAC3B,iBAAiB,EAAE,MAAM,SAAS;EAClC,aAAa,EAAE,MAAM,SAAS;EAC9B,WAAW,EAAE,MAAM,SAAS;EAC7B;CACD,MAAM,GAAc;EAEtB,IAAM,IAAQ,GAOR,IAAQ,GAAU,EAKlB,IAAc,EAAO,GAAiB,KAAK;EAKjD,SAAS,IAAoB;AAC3B,UAAO;IACL,KAAK,EAAM;IACX,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,UAAU,EAAM;IAChB,iBAAiB,EAAM;IACvB,aAAa,EAAM;IACnB,WAAW,EAAM;IACjB,qBAAsB,EAAM,WAAW,IAAI,EAAE;IAC7C,aAAa,EAAM,YAAY,EAAM,KAAM,GAAc,KAAA;IAC1D;;AAyBH,SAtBA,QAAgB;AACd,MAAa,SAAS,GAAmB,CAAC;IAC1C,EAEF,QAAsB;AACpB,MAAa,WAAW,EAAM,OAAO;IACrC,EAEF,QACQ;GACJ,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACP,QACK;AACJ,MAAa,OAAO,EAAM,QAAQ,GAAmB,CAAC;IAEzD,GAEO,GAAU,MAGZ,EAAoB,IAAI,GAAK;;CAIlC,CAAA"}
+{"version":3,"file":"design-system221.js","names":[],"sources":["../src/components/BSwitch/BSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\n//#region Props\nconst {\n  defaultChecked = false,\n  disabled = false,\n  loading = false,\n  size = 'default',\n} = defineProps<{\n  /** Initial checked state for uncontrolled usage. */\n  defaultChecked?: boolean;\n  /** Whether the switch is disabled. */\n  disabled?: boolean;\n  /** Whether to show a loading spinner on the handle. */\n  loading?: boolean;\n  /** Size of the switch. */\n  size?: 'default' | 'small';\n}>();\n\n/**\n * The checked state of the switch.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<boolean>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n  click: [checked: boolean, event: MouseEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst internalChecked = ref(defaultChecked);\n\nconst isChecked = computed(() =>\n  model.value !== undefined ? model.value : internalChecked.value,\n);\n\nonMounted(() => {\n  if (model.value === undefined) {\n    internalChecked.value = defaultChecked;\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalChecked.value = val;\n    }\n  },\n);\n//#endregion\n\n//#region Handlers\nfunction toggle(event: MouseEvent | KeyboardEvent) {\n  if (disabled || loading) return;\n\n  const newChecked = !isChecked.value;\n  internalChecked.value = newChecked;\n  model.value = newChecked;\n  emit('change', newChecked, event);\n\n  if (event instanceof MouseEvent) {\n    emit('click', newChecked, event);\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  toggle(event);\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle(event);\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLButtonElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n</script>\n\n<template>\n  <button\n    ref=\"rootRef\"\n    type=\"button\"\n    role=\"switch\"\n    class=\"b-switch\"\n    :class=\"[\n      `b-switch--${size}`,\n      {\n        'b-switch--checked': isChecked,\n        'b-switch--disabled': disabled,\n        'b-switch--loading': loading,\n      },\n    ]\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"disabled || loading || undefined\"\n    :disabled=\"disabled\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeyDown\"\n  >\n    <span class=\"b-switch__handle\" aria-hidden=\"true\">\n      <svg\n        v-if=\"loading\"\n        class=\"b-switch__loading-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"28\"\n          stroke-dashoffset=\"8\"\n        />\n      </svg>\n    </span>\n    <span class=\"b-switch__inner\" aria-hidden=\"true\">\n      <span v-if=\"isChecked\" class=\"b-switch__inner-checked\">\n        <slot name=\"checked\" />\n      </span>\n      <span v-else class=\"b-switch__inner-unchecked\">\n        <slot name=\"unchecked\" />\n      </span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n.b-switch {\n  --b-switch-handle-bg: #fff;\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);\n  --b-switch-handle-size: 18px;\n  --b-switch-track-height: 22px;\n  --b-switch-track-min-width: 44px;\n  --b-switch-track-padding: 2px;\n  --b-switch-inner-max-margin: 24px;\n  --b-switch-inner-min-margin: 9px;\n  --b-switch-track-bg: rgba(0, 0, 0, 0.25);\n  --b-switch-track-bg-checked: #1565d8;\n  --b-switch-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-switch-loading-color: #1565d8;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: var(--b-switch-track-min-width);\n  height: var(--b-switch-track-height);\n  padding: 0;\n  border: 0;\n  border-radius: calc(var(--b-switch-track-height) / 2);\n  background-color: var(--b-switch-track-bg);\n  cursor: pointer;\n  outline: none;\n  transition:\n    background-color 0.2s,\n    opacity 0.2s;\n  vertical-align: middle;\n  user-select: none;\n  line-height: 1;\n}\n\n.b-switch:focus-visible {\n  outline: 2px solid var(--b-switch-track-bg-checked);\n  outline-offset: 2px;\n}\n\n/* Checked state */\n.b-switch--checked {\n  background-color: var(--b-switch-track-bg-checked);\n}\n\n/* Disabled state */\n.b-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n/* Loading state */\n.b-switch--loading {\n  cursor: default;\n  opacity: 0.85;\n}\n\n/* Handle */\n.b-switch__handle {\n  position: absolute;\n  top: var(--b-switch-track-padding);\n  inset-inline-start: var(--b-switch-track-padding);\n  width: var(--b-switch-handle-size);\n  height: var(--b-switch-handle-size);\n  border-radius: 50%;\n  background-color: var(--b-switch-handle-bg);\n  box-shadow: var(--b-switch-handle-shadow);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: inset-inline-start 0.2s ease-in-out;\n}\n\n.b-switch--checked .b-switch__handle {\n  inset-inline-start: calc(\n    100% - var(--b-switch-handle-size) - var(--b-switch-track-padding)\n  );\n}\n\n/* Loading icon */\n.b-switch__loading-icon {\n  width: calc(var(--b-switch-handle-size) * 0.6);\n  height: calc(var(--b-switch-handle-size) * 0.6);\n  color: var(--b-switch-loading-color);\n  animation: b-switch-spin 1s linear infinite;\n}\n\n.b-switch--checked .b-switch__loading-icon {\n  color: var(--b-switch-track-bg-checked);\n}\n\n@keyframes b-switch-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Inner content */\n.b-switch__inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  font-size: 12px;\n  color: #fff;\n  overflow: hidden;\n  padding: 0;\n}\n\n.b-switch__inner-checked,\n.b-switch__inner-unchecked {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.b-switch__inner-checked {\n  margin-inline-start: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin) - var(--b-switch-inner-max-margin) +\n      var(--b-switch-inner-max-margin)\n  );\n}\n\n.b-switch__inner-unchecked {\n  margin-inline-start: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n}\n\n/* Small size */\n.b-switch--small {\n  --b-switch-handle-size: 12px;\n  --b-switch-track-height: 16px;\n  --b-switch-track-min-width: 28px;\n  --b-switch-inner-max-margin: 18px;\n  --b-switch-inner-min-margin: 6px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-switch {\n  --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n  --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-switch {\n    --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n    --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-switch__handle {\n    transition: none;\n  }\n\n  .b-switch {\n    transition: none;\n  }\n\n  .b-switch__loading-icon {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAM,IAAQ,EAAoB,GAAA,aAAwB,EAEpD,IAAO,GAOP,IAAkB,EAAI,EAAA,eAAe,EAErC,IAAY,QAChB,EAAM,UAAU,KAAA,IAA0B,EAAgB,QAA9B,EAAM,MACnC;AAQD,EANA,QAAgB;AACd,GAAI,EAAM,UAAU,KAAA,MAClB,EAAgB,QAAQ,EAAA;IAE1B,EAEF,QACQ,EAAM,QACX,MAAQ;AACP,GAAI,MAAQ,KAAA,MACV,EAAgB,QAAQ;IAG7B;EAID,SAAS,EAAO,GAAmC;AACjD,OAAI,EAAA,YAAY,EAAA,QAAS;GAEzB,IAAM,IAAa,CAAC,EAAU;AAK9B,GAJA,EAAgB,QAAQ,GACxB,EAAM,QAAQ,GACd,EAAK,UAAU,GAAY,EAAM,EAE7B,aAAiB,cACnB,EAAK,SAAS,GAAY,EAAM;;EAIpC,SAAS,EAAY,GAAmB;AACtC,KAAO,EAAM;;EAGf,SAAS,EAAc,GAAsB;AAC3C,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAO,EAAM;;EAMjB,IAAM,IAAU,EAA8B,KAAK;EAEnD,SAAS,IAAQ;AACf,KAAQ,OAAO,OAAO;;EAGxB,SAAS,IAAO;AACd,KAAQ,OAAO,MAAM;;SAGvB,EAAa;GAAE;GAAO;GAAM,CAAC,kBAK3B,EAgDS,UAAA;YA/CH;GAAJ,KAAI;GACJ,MAAK;GACL,MAAK;GACL,OAAK,EAAA,CAAC,YAAU,CAAA,aACa,EAAA,QAAA;yBAA6C,EAAA;0BAAyC,EAAA;yBAAuC,EAAA;;GAQzJ,gBAAc,EAAA;GACd,iBAAe,EAAA,YAAY,EAAA,WAAW,KAAA;GACtC,UAAU,EAAA;GACV,UAAU,EAAA,WAAQ,KAAA;GAClB,SAAO;GACP,WAAS;MAEV,EAmBO,QAnBP,GAmBO,CAjBG,EAAA,WAAA,GAAA,EADR,EAiBM,OAjBN,GAiBM,CAAA,GAAA,AAAA,EAAA,OAAA,CAVJ,EASE,UAAA;GARA,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,oBAAiB;GACjB,qBAAkB;kCAIxB,EAOO,QAPP,GAOO,CANO,EAAA,SAAA,GAAA,EAAZ,EAEO,QAFP,GAEO,CADL,EAAuB,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,KAAA,GAAA,EAEzB,EAEO,QAFP,GAEO,CADL,EAAyB,EAAA,QAAA,aAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,IAAA,EAAA"}