@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system217.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system217.js","names":[],"sources":["../src/components/BTree/BTree.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, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withKeys as _withKeys, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"aria-multiselectable\"]\nconst _hoisted_2 = [\"data-node-key\", \"aria-expanded\", \"aria-selected\", \"aria-checked\", \"aria-disabled\", \"aria-level\", \"tabindex\", \"draggable\", \"onClick\", \"onDblclick\", \"onContextmenu\", \"onDragstart\", \"onDragenter\", \"onDragover\", \"onDragleave\", \"onDragend\", \"onDrop\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-tree__drag-handle\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = [\"onClick\"]\nconst _hoisted_5 = {\n  key: 1,\n  class: \"b-tree__switcher-icon b-tree__switcher-icon--spin\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = {\n  key: 2,\n  class: \"b-tree__switcher b-tree__switcher--leaf\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_7 = [\"aria-label\", \"aria-checked\", \"aria-disabled\", \"onClick\", \"onKeydown\"]\nconst _hoisted_8 = {\n  key: 4,\n  class: \"b-tree__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = { key: 0 }\n\nimport { computed, nextTick, ref, watch } from 'vue';\nimport type {\n  BTreeCheckedKeys,\n  BTreeCheckInfo,\n  BTreeDragInfo,\n  BTreeDropInfo,\n  BTreeExpandInfo,\n  BTreeFieldNames,\n  BTreeFlatNode,\n  BTreeNodeData,\n  BTreeNodeKey,\n  BTreeScrollToOptions,\n  BTreeSelectInfo,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTree',\n  props: {\n    treeData: { default: () => ([]) },\n    fieldNames: { default: () => ({}) },\n    checkable: { type: Boolean, default: false },\n    checkStrictly: { type: Boolean, default: false },\n    checkedKeys: { default: () => (undefined) },\n    defaultCheckedKeys: { default: () => ([]) },\n    selectedKeys: { default: () => (undefined) },\n    defaultSelectedKeys: { default: () => ([]) },\n    expandedKeys: { default: () => (undefined) },\n    defaultExpandedKeys: { default: () => ([]) },\n    defaultExpandAll: { type: Boolean, default: false },\n    defaultExpandParent: { type: Boolean, default: true },\n    autoExpandParent: { type: Boolean, default: false },\n    multiple: { type: Boolean, default: false },\n    selectable: { type: Boolean, default: true },\n    disabled: { type: Boolean, default: false },\n    showIcon: { type: Boolean, default: false },\n    showLine: { type: Boolean, default: false },\n    blockNode: { type: Boolean, default: false },\n    draggable: { type: Boolean, default: false },\n    loadData: { type: Function, default: undefined },\n    loadedKeys: { default: () => (undefined) },\n    filterTreeNode: { type: Function, default: undefined },\n    height: { default: () => (undefined) },\n    virtual: { type: Boolean, default: false },\n    directory: { type: Boolean, default: false },\n    expandAction: { type: [String, Boolean], default: 'click' }\n  },\n  emits: [\"check\", \"expand\", \"select\", \"load\", \"rightClick\", \"dragStart\", \"dragEnter\", \"dragOver\", \"dragLeave\", \"dragEnd\", \"drop\", \"dblclick\", \"update:checkedKeys\", \"update:selectedKeys\", \"update:expandedKeys\", \"update:loadedKeys\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = __emit;\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\n\n\n// ─── Resolved field names ─────────────────────────────────────────────────────\n\nconst fKey = computed(() => __props.fieldNames.key ?? 'key');\nconst fTitle = computed(() => __props.fieldNames.title ?? 'title');\nconst fChildren = computed(() => __props.fieldNames.children ?? 'children');\n\nfunction nodeKey(n: BTreeNodeData): BTreeNodeKey {\n  return n[fKey.value] as BTreeNodeKey;\n}\nfunction nodeTitle(n: BTreeNodeData): string {\n  return (n[fTitle.value] as string) ?? '';\n}\nfunction nodeChildren(n: BTreeNodeData): BTreeNodeData[] | undefined {\n  return n[fChildren.value] as BTreeNodeData[] | undefined;\n}\n\n// ─── Internal state ───────────────────────────────────────────────────────────\n\nconst internalExpanded = ref<Set<BTreeNodeKey>>(new Set());\nconst internalSelected = ref<Set<BTreeNodeKey>>(new Set());\nconst internalChecked = ref<Set<BTreeNodeKey>>(new Set());\nconst internalHalfChecked = ref<Set<BTreeNodeKey>>(new Set());\nconst internalLoaded = ref<Set<BTreeNodeKey>>(new Set());\nconst loadingKeys = ref<Set<BTreeNodeKey>>(new Set());\nconst dragNodeKey = ref<BTreeNodeKey | null>(null);\n\n// Controlled getters\nconst isControlledExpanded = computed(() => __props.expandedKeys !== undefined);\nconst isControlledSelected = computed(() => __props.selectedKeys !== undefined);\nconst isControlledChecked = computed(() => __props.checkedKeys !== undefined);\nconst isControlledLoaded = computed(() => __props.loadedKeys !== undefined);\n\nconst activeExpanded = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledExpanded.value) return new Set(__props.expandedKeys);\n  return internalExpanded.value;\n});\n\nconst activeSelected = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledSelected.value) return new Set(__props.selectedKeys);\n  return internalSelected.value;\n});\n\nconst activeChecked = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledChecked.value) {\n    const raw = __props.checkedKeys as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    if (Array.isArray(raw)) return new Set(raw);\n    return new Set(raw.checked);\n  }\n  return internalChecked.value;\n});\n\nconst activeHalfChecked = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledChecked.value) {\n    const raw = __props.checkedKeys as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    if (!Array.isArray(raw) && 'halfChecked' in raw) return new Set(raw.halfChecked);\n  }\n  return internalHalfChecked.value;\n});\n\nconst activeLoaded = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledLoaded.value) return new Set(__props.loadedKeys);\n  return internalLoaded.value;\n});\n\n// ─── Flatten tree ─────────────────────────────────────────────────────────────\n\nfunction flattenTree(nodes: BTreeNodeData[], depth = 0, parentVisible = true): BTreeFlatNode[] {\n  const result: BTreeFlatNode[] = [];\n  for (const node of nodes) {\n    const key = nodeKey(node);\n    const isExpanded = activeExpanded.value.has(key);\n    const visible = parentVisible;\n    result.push({ key, data: node, depth, visible });\n    const children = nodeChildren(node);\n    if (children?.length) {\n      result.push(...flattenTree(children, depth + 1, visible && isExpanded));\n    }\n  }\n  return result;\n}\n\nconst flatNodes = computed(() => flattenTree(__props.treeData));\nconst visibleNodes = computed(() => flatNodes.value.filter((n) => n.visible));\n\n// ─── Mount: apply defaults ────────────────────────────────────────────────────\n\nfunction collectAllKeys(nodes: BTreeNodeData[]): BTreeNodeKey[] {\n  const keys: BTreeNodeKey[] = [];\n  for (const n of nodes) {\n    keys.push(nodeKey(n));\n    const children = nodeChildren(n);\n    if (children?.length) keys.push(...collectAllKeys(children));\n  }\n  return keys;\n}\n\nfunction collectParentKeys(nodes: BTreeNodeData[], targetKeys: Set<BTreeNodeKey>): BTreeNodeKey[] {\n  const parents: BTreeNodeKey[] = [];\n  function walk(nodes: BTreeNodeData[]) {\n    for (const n of nodes) {\n      const children = nodeChildren(n);\n      if (children?.length) {\n        const hasDescendant = children.some(\n          (c) => targetKeys.has(nodeKey(c)) || walk([c]) !== undefined,\n        );\n        if (hasDescendant) parents.push(nodeKey(n));\n        walk(children);\n      }\n    }\n  }\n  walk(nodes);\n  return parents;\n}\n\n// Initialise uncontrolled state once\nif (!isControlledExpanded.value) {\n  if (__props.defaultExpandAll) {\n    internalExpanded.value = new Set(\n      collectAllKeys(__props.treeData).filter((k) => {\n        const flat = flatNodes.value.find((n) => n.key === k);\n        return flat ? !!nodeChildren(flat.data)?.length : false;\n      }),\n    );\n  } else if (__props.defaultExpandedKeys.length) {\n    const init = new Set<BTreeNodeKey>(__props.defaultExpandedKeys);\n    if (__props.defaultExpandParent) {\n      collectParentKeys(__props.treeData, init).forEach((k) => init.add(k));\n    }\n    internalExpanded.value = init;\n  }\n}\nif (!isControlledSelected.value && __props.defaultSelectedKeys.length) {\n  internalSelected.value = new Set(__props.defaultSelectedKeys);\n}\nif (!isControlledChecked.value && __props.defaultCheckedKeys.length) {\n  internalChecked.value = new Set(__props.defaultCheckedKeys);\n  if (!__props.checkStrictly) propagateChecks(internalChecked.value);\n}\n\n// Auto-expand parents when controlled expandedKeys change\nwatch(\n  () => __props.expandedKeys,\n  (keys) => {\n    if (!__props.autoExpandParent || !keys) return;\n    const set = new Set(keys);\n    collectParentKeys(__props.treeData, set).forEach((k) => set.add(k));\n    emit('update:expandedKeys', [...set]);\n  },\n);\n\n// ─── Checkbox propagation ─────────────────────────────────────────────────────\n\nfunction propagateChecks(checked: Set<BTreeNodeKey>) {\n  // Bottom-up: compute half-checked from actual checked leaves\n  const half = new Set<BTreeNodeKey>();\n  function walk(nodes: BTreeNodeData[]): { all: boolean; some: boolean } {\n    let allChecked = true;\n    let someChecked = false;\n    for (const n of nodes) {\n      const key = nodeKey(n);\n      const children = nodeChildren(n);\n      if (children?.length) {\n        const sub = walk(children);\n        if (sub.all) {\n          checked.add(key);\n          someChecked = true;\n        } else if (sub.some) {\n          checked.delete(key);\n          half.add(key);\n          allChecked = false;\n          someChecked = true;\n        } else {\n          if (!checked.has(key)) allChecked = false;\n          else someChecked = true;\n        }\n      } else {\n        if (!checked.has(key)) allChecked = false;\n        else someChecked = true;\n      }\n    }\n    return { all: allChecked, some: someChecked };\n  }\n  walk(__props.treeData);\n  internalHalfChecked.value = half;\n}\n\n// ─── Node helpers ─────────────────────────────────────────────────────────────\n\nfunction hasChildren(node: BTreeNodeData): boolean {\n  const ch = nodeChildren(node);\n  return !!ch?.length || (!!__props.loadData && !node.isLeaf);\n}\n\nfunction isExpanded(key: BTreeNodeKey): boolean {\n  return activeExpanded.value.has(key);\n}\nfunction isSelected(key: BTreeNodeKey): boolean {\n  return activeSelected.value.has(key);\n}\nfunction isChecked(key: BTreeNodeKey): boolean {\n  return activeChecked.value.has(key);\n}\nfunction isHalfChecked(key: BTreeNodeKey): boolean {\n  return activeHalfChecked.value.has(key);\n}\nfunction isLoading(key: BTreeNodeKey): boolean {\n  return loadingKeys.value.has(key);\n}\nfunction isLoaded(key: BTreeNodeKey): boolean {\n  return activeLoaded.value.has(key);\n}\nfunction isFiltered(node: BTreeNodeData): boolean {\n  return __props.filterTreeNode ? __props.filterTreeNode(node) : false;\n}\n\n// ─── Expand / collapse ────────────────────────────────────────────────────────\n\nasync function toggleExpand(node: BTreeNodeData, event?: MouseEvent | KeyboardEvent) {\n  const key = nodeKey(node);\n  if (node.disabled || __props.disabled) return;\n\n  const expanding = !isExpanded(key);\n\n  // Async load\n  if (expanding && __props.loadData && !isLoaded(key) && !isLoading(key)) {\n    loadingKeys.value.add(key);\n    try {\n      await __props.loadData(node);\n      if (!isControlledLoaded.value) internalLoaded.value.add(key);\n      emit('update:loadedKeys', [...activeLoaded.value, key]);\n    } finally {\n      loadingKeys.value.delete(key);\n    }\n  }\n\n  let nextSet: Set<BTreeNodeKey>;\n  if (isControlledExpanded.value) {\n    nextSet = new Set(__props.expandedKeys);\n  } else {\n    nextSet = new Set(internalExpanded.value);\n  }\n\n  if (expanding) nextSet.add(key);\n  else nextSet.delete(key);\n\n  if (!isControlledExpanded.value) internalExpanded.value = nextSet;\n  emit('update:expandedKeys', [...nextSet]);\n\n  const info: BTreeExpandInfo = { expanded: expanding, node, event };\n  emit('expand', [...nextSet], info);\n}\n\n// ─── Select ───────────────────────────────────────────────────────────────────\n\nfunction handleSelect(node: BTreeNodeData, event: MouseEvent | KeyboardEvent) {\n  if (!__props.selectable || node.selectable === false || node.disabled || __props.disabled) return;\n  const key = nodeKey(node);\n\n  let nextSet: Set<BTreeNodeKey>;\n  if (isControlledSelected.value) {\n    nextSet = new Set(__props.selectedKeys);\n  } else {\n    nextSet = new Set(internalSelected.value);\n  }\n\n  if (nextSet.has(key)) {\n    nextSet.delete(key);\n  } else {\n    if (!__props.multiple) nextSet.clear();\n    nextSet.add(key);\n  }\n\n  if (!isControlledSelected.value) internalSelected.value = nextSet;\n  emit('update:selectedKeys', [...nextSet]);\n\n  const info: BTreeSelectInfo = {\n    event,\n    selected: nextSet.has(key),\n    node,\n    selectedNodes: flatNodes.value.filter((n) => nextSet.has(n.key)).map((n) => n.data),\n    nativeEvent: event,\n  };\n  emit('select', [...nextSet], info);\n}\n\n// ─── Check ────────────────────────────────────────────────────────────────────\n\nfunction handleCheck(node: BTreeNodeData, event: MouseEvent | KeyboardEvent) {\n  if (!__props.checkable || node.disableCheckbox || node.disabled || __props.disabled) return;\n  const key = nodeKey(node);\n\n  let nextChecked: Set<BTreeNodeKey>;\n  if (isControlledChecked.value) {\n    const raw = __props.checkedKeys as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    nextChecked = new Set(Array.isArray(raw) ? raw : raw.checked);\n  } else {\n    nextChecked = new Set(internalChecked.value);\n  }\n\n  if (nextChecked.has(key)) {\n    nextChecked.delete(key);\n    // Uncheck all descendants\n    if (!__props.checkStrictly) {\n      function uncheckDesc(nodes: BTreeNodeData[]) {\n        for (const n of nodes) {\n          nextChecked.delete(nodeKey(n));\n          const ch = nodeChildren(n);\n          if (ch?.length) uncheckDesc(ch);\n        }\n      }\n      const children = nodeChildren(node);\n      if (children?.length) uncheckDesc(children);\n    }\n  } else {\n    nextChecked.add(key);\n    // Check all descendants\n    if (!__props.checkStrictly) {\n      function checkDesc(nodes: BTreeNodeData[]) {\n        for (const n of nodes) {\n          if (!n.disableCheckbox && !n.disabled) nextChecked.add(nodeKey(n));\n          const ch = nodeChildren(n);\n          if (ch?.length) checkDesc(ch);\n        }\n      }\n      const children = nodeChildren(node);\n      if (children?.length) checkDesc(children);\n    }\n  }\n\n  if (!__props.checkStrictly && !isControlledChecked.value) {\n    propagateChecks(nextChecked);\n  }\n\n  const checkedNodes = flatNodes.value.filter((n) => nextChecked.has(n.key)).map((n) => n.data);\n\n  const info: BTreeCheckInfo = {\n    event,\n    node,\n    checked: nextChecked.has(key),\n    checkedNodes,\n    checkedNodesPositions: checkedNodes.map((n) => ({ node: n, pos: '0' })),\n    halfCheckedKeys: [...activeHalfChecked.value],\n    nativeEvent: event,\n  };\n\n  if (!isControlledChecked.value) internalChecked.value = nextChecked;\n\n  const emitValue: BTreeNodeKey[] | BTreeCheckedKeys = __props.checkStrictly\n    ? { checked: [...nextChecked], halfChecked: [...activeHalfChecked.value] }\n    : [...nextChecked];\n\n  emit('update:checkedKeys', emitValue);\n  emit('check', emitValue, info);\n}\n\n// ─── Drag & Drop ──────────────────────────────────────────────────────────────\n\nfunction handleDragStart(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  dragNodeKey.value = nodeKey(node);\n  event.dataTransfer?.setData('text/plain', String(nodeKey(node)));\n  emit('dragStart', { event, node });\n}\n\nfunction handleDragEnter(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  event.preventDefault();\n  emit('dragEnter', { event, node, expandedKeys: [...activeExpanded.value] });\n}\n\nfunction handleDragOver(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  event.preventDefault();\n  emit('dragOver', { event, node });\n}\n\nfunction handleDragLeave(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  emit('dragLeave', { event, node });\n}\n\nfunction handleDragEnd(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  dragNodeKey.value = null;\n  emit('dragEnd', { event, node });\n}\n\nfunction handleDrop(event: DragEvent, node: BTreeNodeData) {\n  if (!__props.draggable) return;\n  event.preventDefault();\n  const dragFlat = flatNodes.value.find((n) => n.key === dragNodeKey.value);\n  if (!dragFlat) return;\n\n  emit('drop', {\n    event,\n    node,\n    dragNode: dragFlat.data,\n    dragNodesKeys: [dragFlat.key],\n    dropPosition: 0,\n    dropToGap: false,\n  });\n  dragNodeKey.value = null;\n}\n\n// ─── Keyboard navigation ──────────────────────────────────────────────────────\n\nconst treeRef = ref<HTMLElement | null>(null);\n\nconst focusedNodeKey = ref<BTreeNodeKey | null>(visibleNodes.value[0]?.key ?? null);\n\nfunction handleTreeKeydown(event: KeyboardEvent) {\n  const visible = visibleNodes.value;\n  if (!visible.length) return;\n\n  const currentIdx = visible.findIndex((n) => n.key === focusedNodeKey.value);\n  const current = visible[currentIdx];\n\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault();\n      const next = visible[currentIdx + 1];\n      if (next) {\n        focusedNodeKey.value = next.key;\n        nextTick(() => focusNode(next.key));\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      event.preventDefault();\n      const prev = visible[currentIdx - 1];\n      if (prev) {\n        focusedNodeKey.value = prev.key;\n        nextTick(() => focusNode(prev.key));\n      }\n      break;\n    }\n    case 'ArrowRight': {\n      event.preventDefault();\n      if (!current) break;\n      if (hasChildren(current.data) && !isExpanded(current.key)) {\n        toggleExpand(current.data, event);\n      } else if (isExpanded(current.key)) {\n        const firstChild = visible[currentIdx + 1];\n        if (firstChild?.depth > current.depth) {\n          focusedNodeKey.value = firstChild.key;\n          nextTick(() => focusNode(firstChild.key));\n        }\n      }\n      break;\n    }\n    case 'ArrowLeft': {\n      event.preventDefault();\n      if (!current) break;\n      if (isExpanded(current.key)) {\n        toggleExpand(current.data, event);\n      } else if (current.depth > 0) {\n        // Move to parent\n        for (let i = currentIdx - 1; i >= 0; i--) {\n          if (visible[i].depth < current.depth) {\n            focusedNodeKey.value = visible[i].key;\n            nextTick(() => focusNode(visible[i].key));\n            break;\n          }\n        }\n      }\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (!current) break;\n      if (__props.checkable) {\n        handleCheck(current.data, event);\n      } else if (__props.selectable) {\n        handleSelect(current.data, event);\n      }\n      break;\n    }\n    case 'Home': {\n      event.preventDefault();\n      if (visible[0]) {\n        focusedNodeKey.value = visible[0].key;\n        nextTick(() => focusNode(visible[0].key));\n      }\n      break;\n    }\n    case 'End': {\n      event.preventDefault();\n      const last = visible[visible.length - 1];\n      if (last) {\n        focusedNodeKey.value = last.key;\n        nextTick(() => focusNode(last.key));\n      }\n      break;\n    }\n  }\n}\n\nfunction focusNode(key: BTreeNodeKey) {\n  const el = treeRef.value?.querySelector<HTMLElement>(\n    `[data-node-key=\"${String(key).replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n  );\n  el?.focus();\n}\n\n// ─── Directory-mode: click/dblclick expand ────────────────────────────────────\n\nfunction handleNodeClick(node: BTreeNodeData, event: MouseEvent) {\n  if (__props.directory && __props.expandAction === 'click' && hasChildren(node)) {\n    toggleExpand(node, event);\n  }\n  handleSelect(node, event);\n}\n\nfunction handleNodeDblClick(node: BTreeNodeData, event: MouseEvent) {\n  if (__props.directory && __props.expandAction === 'doubleClick' && hasChildren(node)) {\n    toggleExpand(node, event);\n  }\n  emit('dblclick', event, node);\n}\n\n// ─── Scroll to ────────────────────────────────────────────────────────────────\n\nfunction scrollTo(opts: BTreeScrollToOptions) {\n  nextTick(() => {\n    const el = treeRef.value?.querySelector<HTMLElement>(\n      `[data-node-key=\"${String(opts.key).replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n    );\n    const alignMap = { top: 'start', bottom: 'end', auto: 'nearest' } as const;\n    el?.scrollIntoView?.({ block: alignMap[opts.align ?? 'auto'] });\n  });\n}\n\n__expose({ scrollTo });\n\n// ─── Right click ─────────────────────────────────────────────────────────────\n\nfunction handleRightClick(event: MouseEvent, node: BTreeNodeData) {\n  event.preventDefault();\n  emit('rightClick', { event, node });\n}\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    ref_key: \"treeRef\",\n    ref: treeRef,\n    class: _normalizeClass([\"b-tree\", {\n      'b-tree--checkable': __props.checkable,\n      'b-tree--show-line': __props.showLine,\n      'b-tree--block-node': __props.blockNode,\n      'b-tree--directory': __props.directory,\n      'b-tree--disabled': __props.disabled,\n    }]),\n    role: \"tree\",\n    \"aria-multiselectable\": __props.multiple || undefined,\n    style: _normalizeStyle(__props.height ? { height: `${__props.height}px`, overflowY: 'auto' } : undefined),\n    onKeydown: handleTreeKeydown\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(visibleNodes.value, (flatNode) => {\n      return (_openBlock(), _createElementBlock(\"div\", {\n        key: flatNode.key,\n        \"data-node-key\": String(flatNode.key),\n        class: _normalizeClass([\"b-tree__node\", {\n          'b-tree__node--selected': isSelected(flatNode.key),\n          'b-tree__node--checked': isChecked(flatNode.key),\n          'b-tree__node--half-checked': isHalfChecked(flatNode.key),\n          'b-tree__node--expanded': isExpanded(flatNode.key),\n          'b-tree__node--disabled': flatNode.data.disabled || __props.disabled,\n          'b-tree__node--leaf': !hasChildren(flatNode.data),\n          'b-tree__node--loading': isLoading(flatNode.key),\n          'b-tree__node--dragging': __props.draggable && dragNodeKey.value === flatNode.key,\n          'b-tree__node--filtered': isFiltered(flatNode.data),\n          'b-tree__node--block': __props.blockNode,\n        }]),\n        role: \"treeitem\",\n        \"aria-expanded\": hasChildren(flatNode.data) ? isExpanded(flatNode.key) : undefined,\n        \"aria-selected\": __props.selectable ? isSelected(flatNode.key) : undefined,\n        \"aria-checked\": __props.checkable ? isChecked(flatNode.key) : undefined,\n        \"aria-disabled\": flatNode.data.disabled || __props.disabled || undefined,\n        \"aria-level\": flatNode.depth + 1,\n        tabindex: flatNode.key === focusedNodeKey.value ? 0 : -1,\n        style: _normalizeStyle({ '--b-tree-node-indent': `${flatNode.depth * 24}px` }),\n        draggable: __props.draggable ? 'true' : undefined,\n        onClick: _withModifiers(($event: any) => (handleNodeClick(flatNode.data, $event)), [\"stop\"]),\n        onDblclick: _withModifiers(($event: any) => (handleNodeDblClick(flatNode.data, $event)), [\"stop\"]),\n        onContextmenu: _withModifiers(($event: any) => (handleRightClick($event, flatNode.data)), [\"stop\"]),\n        onDragstart: ($event: any) => (handleDragStart($event, flatNode.data)),\n        onDragenter: ($event: any) => (handleDragEnter($event, flatNode.data)),\n        onDragover: ($event: any) => (handleDragOver($event, flatNode.data)),\n        onDragleave: ($event: any) => (handleDragLeave($event, flatNode.data)),\n        onDragend: ($event: any) => (handleDragEnd($event, flatNode.data)),\n        onDrop: ($event: any) => (handleDrop($event, flatNode.data))\n      }, [\n        (__props.draggable)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [...(_cache[0] || (_cache[0] = [\n              _createStaticVNode(\"<svg viewBox=\\\"0 0 16 16\\\" fill=\\\"currentColor\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" data-v-08bb45f2><circle cx=\\\"5\\\" cy=\\\"3.5\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle><circle cx=\\\"5\\\" cy=\\\"8\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle><circle cx=\\\"5\\\" cy=\\\"12.5\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle><circle cx=\\\"11\\\" cy=\\\"3.5\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle><circle cx=\\\"11\\\" cy=\\\"8\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle><circle cx=\\\"11\\\" cy=\\\"12.5\\\" r=\\\"1.25\\\" data-v-08bb45f2></circle></svg>\", 1)\n            ]))]))\n          : _createCommentVNode(\"\", true),\n        _cache[4] || (_cache[4] = _createElementVNode(\"span\", {\n          class: \"b-tree__indent\",\n          \"aria-hidden\": \"true\"\n        }, null, -1)),\n        (hasChildren(flatNode.data))\n          ? (_openBlock(), _createElementBlock(\"span\", {\n              key: 1,\n              class: _normalizeClass([\"b-tree__switcher\", {\n            'b-tree__switcher--expanded': isExpanded(flatNode.key),\n            'b-tree__switcher--loading': isLoading(flatNode.key),\n          }]),\n              \"aria-hidden\": \"true\",\n              onClick: _withModifiers(($event: any) => (toggleExpand(flatNode.data, $event)), [\"stop\"])\n            }, [\n              (!isLoading(flatNode.key))\n                ? _renderSlot(_ctx.$slots, \"switcherIcon\", {\n                    key: 0,\n                    node: flatNode.data,\n                    expanded: isExpanded(flatNode.key)\n                  }, () => [\n                    _cache[1] || (_cache[1] = _createElementVNode(\"svg\", {\n                      class: \"b-tree__switcher-icon\",\n                      viewBox: \"0 0 24 24\",\n                      fill: \"none\",\n                      xmlns: \"http://www.w3.org/2000/svg\",\n                      \"aria-hidden\": \"true\"\n                    }, [\n                      _createElementVNode(\"path\", {\n                        d: \"M9 18L15 12L9 6\",\n                        stroke: \"currentColor\",\n                        \"stroke-width\": \"2\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\"\n                      })\n                    ], -1))\n                  ], true)\n                : _createCommentVNode(\"\", true),\n              (isLoading(flatNode.key))\n                ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_5, [...(_cache[2] || (_cache[2] = [\n                    _createElementVNode(\"circle\", {\n                      cx: \"12\",\n                      cy: \"12\",\n                      r: \"9\",\n                      stroke: \"currentColor\",\n                      \"stroke-width\": \"2\",\n                      \"stroke-dasharray\": \"42\",\n                      \"stroke-dashoffset\": \"14\",\n                      \"stroke-linecap\": \"round\"\n                    }, null, -1)\n                  ]))]))\n                : _createCommentVNode(\"\", true)\n            ], 10, _hoisted_4))\n          : (__props.showLine)\n            ? (_openBlock(), _createElementBlock(\"span\", _hoisted_6))\n            : _createCommentVNode(\"\", true),\n        (__props.checkable && flatNode.data.checkable !== false)\n          ? (_openBlock(), _createElementBlock(\"span\", {\n              key: 3,\n              class: _normalizeClass([\"b-tree__checkbox\", {\n            'b-tree__checkbox--checked': isChecked(flatNode.key),\n            'b-tree__checkbox--indeterminate': isHalfChecked(flatNode.key),\n            'b-tree__checkbox--disabled':\n              flatNode.data.disableCheckbox || flatNode.data.disabled || __props.disabled,\n          }]),\n              role: \"checkbox\",\n              \"aria-label\": nodeTitle(flatNode.data),\n              \"aria-checked\": isHalfChecked(flatNode.key) ? 'mixed' : isChecked(flatNode.key),\n              \"aria-disabled\": \n            flatNode.data.disableCheckbox || flatNode.data.disabled || __props.disabled || undefined\n          ,\n              tabindex: \"-1\",\n              onClick: _withModifiers(($event: any) => (handleCheck(flatNode.data, $event)), [\"stop\"]),\n              onKeydown: [\n                _withKeys(_withModifiers(($event: any) => (handleCheck(flatNode.data, $event)), [\"prevent\"]), [\"enter\"]),\n                _withKeys(_withModifiers(($event: any) => (handleCheck(flatNode.data, $event)), [\"prevent\"]), [\"space\"])\n              ]\n            }, [...(_cache[3] || (_cache[3] = [\n              _createElementVNode(\"span\", {\n                class: \"b-tree__checkbox-inner\",\n                \"aria-hidden\": \"true\"\n              }, null, -1)\n            ]))], 42, _hoisted_7))\n          : _createCommentVNode(\"\", true),\n        (__props.showIcon || flatNode.data.icon || _ctx.$slots.icon)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_8, [\n              _renderSlot(_ctx.$slots, \"icon\", {\n                node: flatNode.data\n              }, () => [\n                (flatNode.data.icon)\n                  ? (_openBlock(), _createElementBlock(\"span\", _hoisted_9, _toDisplayString(flatNode.data.icon), 1))\n                  : _createCommentVNode(\"\", true)\n              ], true)\n            ]))\n          : _createCommentVNode(\"\", true),\n        _createElementVNode(\"span\", {\n          class: _normalizeClass([\"b-tree__title\", { 'b-tree__title--filtered': isFiltered(flatNode.data) }])\n        }, [\n          _renderSlot(_ctx.$slots, \"title\", {\n            node: flatNode.data\n          }, () => [\n            _createTextVNode(_toDisplayString(nodeTitle(flatNode.data)), 1)\n          ], true)\n        ], 2)\n      ], 46, _hoisted_2))\n    }), 128))\n  ], 46, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAOR,IAA0B,EAAI,GAAM,EACpC,IAAQ,EAA6B,KAAK,EAC1C,IAAS,EAAqB,EAAE,CAAC,EACjC,IAAc,EAA4B,KAAK,EAC/C,IAAkB,EAA6B,KAAK,EACpD,IAAkB,EACtB,EAAM,MAAM,KAAK,OAAU;GAAE,GAAG;GAAM,QAAQ;GAAO,OAAO;GAAG,EAAE,CAClE,EACK,IAAiB,IAAI,qBAAqB;AAK9C,OAJI,EAAgB,MAAM,UAAU,KAIhC,CAAC,EAAM,MAAO;GAElB,IAAM,IAAa,EAAM,MAAM,aACzB,IAAmB,EAAY,OAAO,eAAe;AAE3D,QAAK,IAAI,IAAI,GAAG,IAAI,EAAgB,MAAM,UAEtC,EAAgB,MAAM,QAAQ,GAAK,MAAW,EAAK,SAA4B,IAAnB,IAAM,EAAK,OAAc,EAAE,GACrF,IACF,GAJ8C,IAM9C,GAAgB,MAAM,GAAG,SAAS;AAMtC,QAAK,IAAI,IAAI,EAAgB,MAAM,SAAS,GAAG,KAAK,GAAG,IACrD,KAAI,EAAgB,MAAM,GAAG,OAC3B,KACE,EAAgB,MAAM,QAAQ,GAAK,MAAW,EAAK,SAA4B,IAAnB,IAAM,EAAK,OAAc,EAAE,GACrF,EAAgB,MAAM,GAAG,QACzB,KACF,EAEA,GAAgB,MAAM,GAAG,SAAS;OAElC;IAIN,EACI,IAAc,QAAe,EAAgB,MAAM,MAAM,MAAM,EAAE,OAAO,CAAC,EACzE,EAAE,oBAAiB,GAAgB,EACnC,IAAiB,QAAe,qBAAqB,EAAa,QAAQ,EAI1E,UAAqC;AACzC,KAAwB,QAAQ,CAAC,EAAwB;KAErD,UAAsC;AAC1C,YAAS,iBAAiB,SAAS,EAAoB;KAEnD,UAAwC;AAC5C,YAAS,oBAAoB,SAAS,EAAoB;KAEtD,KAAuB,MAAiB;AAG5C,GAFa,CAAC,EAAY,OAAO,EAAgB,MAAM,CAAC,OAAO,QAAQ,CACzC,MAAM,MAAM,EAAM,cAAc,CAAC,SAAS,EAAE,CAAC,KAEzE,EAAwB,QAAQ;KAG9B,KAAqB,MAAyB;AAClD,GAAI,EAAM,QAAQ,UAChB,GAA8B,GACrB,EAAM,QAAQ,aACvB,EAAwB,QAAQ;;SAMpC,QAAgB;AAId,GAHA,GAA+B,EAC/B,EAAe,QAAQ,EAAM,MAAO,EAEpC,QAAe;AACb,MAAgB,MAAM,SAAS,GAAM,MAAU;AAC7C,KAAI,EAAO,MAAM,OACf,EAAK,QAAQ,EAAO,MAAM,GAAO;MAEnC;KACF;IACF,EACF,QAAkB;AAKhB,GAJA,GAAiC,EAC7B,EAAM,SACR,EAAe,UAAU,EAAM,MAAM,EAEvC,EAAe,YAAY;IAC3B,kBAKA,EAmEM,OAnEN,GAmEM,CAlEJ,EAiEK,MAAA;YAjEG;GAAJ,KAAI;GAAQ,MAAK;GAAO,OAAM;cAChC,EA+DW,GAAA,MAAA,EA/DuB,EAAA,QAAhB,GAAM,gCAAyC,EAAK,QAAA,EAAA,CACpE,EAyBK,MAAA;;YAxBC;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,8DAA4D,EAAA,UAC9C,IAAK,GAAA,CAAA,CAAA;MAEzB,EASO,EAAA,QAAA,QAT2B,KAAK,EAA1B,SAAI,QASV,CARL,EAOI,KAAA;GAND,MAAM,EAAK;GACX,OAAO,EAAK;GACb,OAAM;GACL,gBAAc,MAAU,EAAA,MAAgB,SAAM,IAAA,SAAgB,KAAA;OAE5D,EAAK,KAAI,EAAA,GAAA,EAAA,CAAA,CAAA,EAKR,IAAQ,EAAA,MAAgB,SAAM,KAAA,GAAA,EADtC,EAQO,QARP,GAQO,CAHL,EAEO,EAAA,QAAA,aAFgC,KAAK,EAA/B,SAAI,QAEV,CAAA,EAAA,EADF,EAAA,UAAS,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAMR,MAAK,KAAU,EAAA,SAAA,GAAA,EAAzB,EAiCK,MAjCL,GAiCK,CAhCH,EA+BO,QAAA;;YA/BG;GAAJ,KAAI;GAAc,OAAM;MAC5B,EAUS,UAAA;GATP,MAAK;GACL,OAAK,EAAA,CAAC,yIAAuI,EAAA,iBAClH,EAAA,OAAuB,CAAA,CAAA;GACjD,iBAAe,EAAA;GAChB,cAAW;GACV,SAAK,EAAO,GAA4B,CAAA,OAAA,CAAA;GACxC,WAAS;KACX,SAED,IAAA,EAAA,EAAA,EACA,EAkBK,MAAA;GAhBF,IAAI,EAAA;;YACD;GAAJ,KAAI;GACJ,OAAM;cAEN,EAWK,GAAA,MAAA,EAVkB,EAAA,MAAgB,QAAQ,MAAM,EAAE,OAAM,GAApD,YADT,EAWK,MAAA,EATF,KAAK,EAAW,MAAA,EAAA,CAEjB,EAMI,KAAA;GALD,MAAM,EAAW;GACjB,OAAO,EAAW;GACnB,OAAM;OAEH,EAAW,KAAI,EAAA,GAAA,EAAA,CAAA,CAAA,wBAdd,EAAA,MAAuB,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/design-system220.js

@@ -1,10 +1,9 @@
-//#region src/components/BUpload/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Text = "text", e.Picture = "picture", e.PictureCard = "picture-card", e.PictureCircle = "picture-circle", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Uploading = "uploading", e.Done = "done", e.Error = "error", e.Removed = "removed", e;
-}({});
+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 { t as BUploadFileStatus, e as BUploadListType };
+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/BUpload/types.ts"],"sourcesContent":["export enum BUploadListType {\n  Text = 'text',\n  Picture = 'picture',\n  PictureCard = 'picture-card',\n  PictureCircle = 'picture-circle',\n}\n\nexport enum BUploadFileStatus {\n  Uploading = 'uploading',\n  Done = 'done',\n  Error = 'error',\n  Removed = 'removed',\n}\n\nexport interface BUploadFile {\n  uid: string;\n  name: string;\n  status?: BUploadFileStatus;\n  percent?: number;\n  url?: string;\n  thumbUrl?: string;\n  response?: unknown;\n  error?: unknown;\n  originFileObj?: File;\n  size?: number;\n  type?: string;\n}\n\nexport interface BUploadChangeInfo {\n  file: BUploadFile;\n  fileList: BUploadFile[];\n  event?: ProgressEvent;\n}\n\nexport interface BUploadRequestOption {\n  action: string;\n  file: File;\n  filename: string;\n  headers?: Record<string, string>;\n  data?: Record<string, unknown>;\n  withCredentials?: boolean;\n  method?: string;\n  onProgress?: (event: { percent: number }) => void;\n  onSuccess?: (response: unknown) => void;\n  onError?: (error: Error) => void;\n}\n\nexport interface BUploadShowUploadList {\n  showPreviewIcon?: boolean;\n  showRemoveIcon?: boolean;\n  showDownloadIcon?: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,cAAA,gBACA,EAAA,gBAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,YAAA,aACA,EAAA,OAAA,QACA,EAAA,QAAA,SACA,EAAA,UAAA;KACD"}
+{"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":""}