@itguy614/clean-ui 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (241) hide show
  1. package/README.md +12 -0
  2. package/dist/clean-ui.css +1 -1
  3. package/dist/components/CuiAccordion.vue.js +2 -2
  4. package/dist/components/CuiAlert.vue.d.ts +3 -5
  5. package/dist/components/CuiAlert.vue.d.ts.map +1 -1
  6. package/dist/components/CuiAlert.vue.js +1 -1
  7. package/dist/components/CuiAlert.vue2.js +54 -50
  8. package/dist/components/CuiBadge.vue.js +3 -3
  9. package/dist/components/CuiBadge.vue2.js +23 -23
  10. package/dist/components/CuiBanner.vue.d.ts +15 -10
  11. package/dist/components/CuiBanner.vue.d.ts.map +1 -1
  12. package/dist/components/CuiBanner.vue.js +5 -80
  13. package/dist/components/CuiBanner.vue2.js +90 -2
  14. package/dist/components/CuiButton.vue.d.ts +9 -0
  15. package/dist/components/CuiButton.vue.d.ts.map +1 -1
  16. package/dist/components/CuiButton.vue.js +1 -1
  17. package/dist/components/CuiButton.vue2.js +77 -83
  18. package/dist/components/CuiButtonGroup.vue.d.ts +4 -2
  19. package/dist/components/CuiButtonGroup.vue.d.ts.map +1 -1
  20. package/dist/components/CuiButtonGroup.vue.js +1 -1
  21. package/dist/components/CuiButtonGroup.vue2.js +18 -9
  22. package/dist/components/CuiCard.vue.d.ts.map +1 -1
  23. package/dist/components/CuiCard.vue.js +5 -33
  24. package/dist/components/CuiCard.vue2.js +32 -2
  25. package/dist/components/CuiCardBody.vue.d.ts.map +1 -1
  26. package/dist/components/CuiCardBody.vue.js +5 -18
  27. package/dist/components/CuiCardBody.vue2.js +18 -2
  28. package/dist/components/CuiCardFooter.vue.d.ts.map +1 -1
  29. package/dist/components/CuiCardFooter.vue.js +5 -30
  30. package/dist/components/CuiCardFooter.vue2.js +25 -2
  31. package/dist/components/CuiCardHeader.vue.d.ts +5 -4
  32. package/dist/components/CuiCardHeader.vue.d.ts.map +1 -1
  33. package/dist/components/CuiCardHeader.vue.js +5 -49
  34. package/dist/components/CuiCardHeader.vue2.js +40 -2
  35. package/dist/components/CuiCardMedia.vue.d.ts.map +1 -1
  36. package/dist/components/CuiCardMedia.vue.js +3 -3
  37. package/dist/components/CuiCardMedia.vue2.js +6 -6
  38. package/dist/components/CuiCheckbox.vue.d.ts +2 -2
  39. package/dist/components/CuiCheckbox.vue.d.ts.map +1 -1
  40. package/dist/components/CuiCheckbox.vue.js +1 -1
  41. package/dist/components/CuiCheckbox.vue2.js +46 -34
  42. package/dist/components/CuiCheckboxGroup.vue.d.ts +2 -2
  43. package/dist/components/CuiCheckboxGroup.vue.d.ts.map +1 -1
  44. package/dist/components/CuiCheckboxGroup.vue.js +2 -2
  45. package/dist/components/CuiCheckboxGroup.vue2.js +45 -35
  46. package/dist/components/CuiCodeBlock.vue.d.ts.map +1 -1
  47. package/dist/components/CuiCodeBlock.vue.js +14 -11
  48. package/dist/components/CuiColorPicker.vue.d.ts +2 -2
  49. package/dist/components/CuiColorPicker.vue.d.ts.map +1 -1
  50. package/dist/components/CuiColorPicker.vue.js +117 -104
  51. package/dist/components/CuiCombobox.vue.d.ts +2 -2
  52. package/dist/components/CuiCombobox.vue.d.ts.map +1 -1
  53. package/dist/components/CuiCombobox.vue.js +5 -330
  54. package/dist/components/CuiCombobox.vue2.js +331 -2
  55. package/dist/components/CuiConfirmDialog.vue.d.ts +5 -4
  56. package/dist/components/CuiConfirmDialog.vue.d.ts.map +1 -1
  57. package/dist/components/CuiConfirmDialog.vue.js +84 -73
  58. package/dist/components/CuiContextMenu.vue.d.ts +40 -1
  59. package/dist/components/CuiContextMenu.vue.d.ts.map +1 -1
  60. package/dist/components/CuiContextMenu.vue.js +1 -1
  61. package/dist/components/CuiContextMenu.vue2.js +149 -91
  62. package/dist/components/CuiCopyButton.vue.d.ts.map +1 -1
  63. package/dist/components/CuiCopyButton.vue.js +5 -61
  64. package/dist/components/CuiCopyButton.vue2.js +68 -2
  65. package/dist/components/CuiDataGridCardView.vue.d.ts.map +1 -1
  66. package/dist/components/CuiDataGridCardView.vue.js +10 -9
  67. package/dist/components/CuiDataGridColumnManager.vue.d.ts.map +1 -1
  68. package/dist/components/CuiDataGridColumnManager.vue.js +12 -11
  69. package/dist/components/CuiDataGridPagination.vue.d.ts.map +1 -1
  70. package/dist/components/CuiDataGridPagination.vue.js +9 -8
  71. package/dist/components/CuiDataGridSearch.vue.d.ts.map +1 -1
  72. package/dist/components/CuiDataGridSearch.vue.js +12 -9
  73. package/dist/components/CuiDataGridTable.vue.d.ts.map +1 -1
  74. package/dist/components/CuiDataGridTable.vue.js +1 -0
  75. package/dist/components/CuiDataGridViewManager.vue.d.ts.map +1 -1
  76. package/dist/components/CuiDataGridViewManager.vue.js +17 -17
  77. package/dist/components/CuiDatePicker.vue.d.ts +2 -2
  78. package/dist/components/CuiDatePicker.vue.d.ts.map +1 -1
  79. package/dist/components/CuiDatePicker.vue.js +257 -173
  80. package/dist/components/CuiDateRangePicker.vue.d.ts +2 -2
  81. package/dist/components/CuiDateRangePicker.vue.d.ts.map +1 -1
  82. package/dist/components/CuiDateRangePicker.vue.js +262 -179
  83. package/dist/components/CuiDivider.vue.d.ts.map +1 -1
  84. package/dist/components/CuiDivider.vue.js +17 -13
  85. package/dist/components/CuiDropdownMenu.vue.js +2 -2
  86. package/dist/components/CuiDropdownRadioGroup.vue.d.ts +4 -1
  87. package/dist/components/CuiDropdownRadioGroup.vue.d.ts.map +1 -1
  88. package/dist/components/CuiDropdownRadioGroup.vue.js +27 -14
  89. package/dist/components/CuiDropdownSub.vue.js +2 -2
  90. package/dist/components/CuiEmptyState.vue.d.ts +5 -4
  91. package/dist/components/CuiEmptyState.vue.d.ts.map +1 -1
  92. package/dist/components/CuiEmptyState.vue.js +1 -1
  93. package/dist/components/CuiEmptyState.vue2.js +30 -24
  94. package/dist/components/CuiFieldset.vue.d.ts.map +1 -1
  95. package/dist/components/CuiFieldset.vue.js +1 -1
  96. package/dist/components/CuiFieldset.vue2.js +21 -21
  97. package/dist/components/CuiFileUpload.vue.d.ts +2 -2
  98. package/dist/components/CuiFileUpload.vue.d.ts.map +1 -1
  99. package/dist/components/CuiFileUpload.vue.js +70 -57
  100. package/dist/components/CuiFormField.vue.d.ts.map +1 -1
  101. package/dist/components/CuiFormField.vue.js +2 -2
  102. package/dist/components/CuiFormField.vue2.js +48 -42
  103. package/dist/components/CuiInput.vue.d.ts +2 -2
  104. package/dist/components/CuiInput.vue.d.ts.map +1 -1
  105. package/dist/components/CuiInput.vue.js +1 -1
  106. package/dist/components/CuiInput.vue2.js +97 -85
  107. package/dist/components/CuiInputStepper.vue.d.ts +2 -2
  108. package/dist/components/CuiInputStepper.vue.d.ts.map +1 -1
  109. package/dist/components/CuiInputStepper.vue.js +5 -187
  110. package/dist/components/CuiInputStepper.vue2.js +237 -2
  111. package/dist/components/CuiKbd.vue.d.ts.map +1 -1
  112. package/dist/components/CuiKbd.vue.js +6 -5
  113. package/dist/components/CuiMaskedInput.vue.d.ts +9 -3
  114. package/dist/components/CuiMaskedInput.vue.d.ts.map +1 -1
  115. package/dist/components/CuiMaskedInput.vue.js +132 -117
  116. package/dist/components/CuiModal.vue.d.ts +10 -2
  117. package/dist/components/CuiModal.vue.d.ts.map +1 -1
  118. package/dist/components/CuiModal.vue.js +2 -2
  119. package/dist/components/CuiModal.vue2.js +48 -44
  120. package/dist/components/CuiModalBody.vue.d.ts.map +1 -1
  121. package/dist/components/CuiModalBody.vue.js +16 -13
  122. package/dist/components/CuiModalFooter.vue.d.ts.map +1 -1
  123. package/dist/components/CuiModalFooter.vue.js +3 -2
  124. package/dist/components/CuiModalHeader.vue.d.ts +13 -4
  125. package/dist/components/CuiModalHeader.vue.d.ts.map +1 -1
  126. package/dist/components/CuiModalHeader.vue.js +54 -42
  127. package/dist/components/CuiPagination.vue.js +2 -2
  128. package/dist/components/CuiPopover.vue.d.ts.map +1 -1
  129. package/dist/components/CuiPopover.vue.js +70 -65
  130. package/dist/components/CuiRadio.vue.d.ts +2 -4
  131. package/dist/components/CuiRadio.vue.d.ts.map +1 -1
  132. package/dist/components/CuiRadio.vue.js +2 -2
  133. package/dist/components/CuiRadio.vue2.js +88 -74
  134. package/dist/components/CuiRadioGroup.vue.d.ts +2 -2
  135. package/dist/components/CuiRadioGroup.vue.d.ts.map +1 -1
  136. package/dist/components/CuiRadioGroup.vue.js +3 -3
  137. package/dist/components/CuiRadioGroup.vue2.js +47 -37
  138. package/dist/components/CuiRating.vue.d.ts.map +1 -1
  139. package/dist/components/CuiRating.vue.js +15 -14
  140. package/dist/components/CuiResizablePanels.vue.d.ts.map +1 -1
  141. package/dist/components/CuiResizablePanels.vue.js +10 -9
  142. package/dist/components/CuiSelect.vue.d.ts +2 -2
  143. package/dist/components/CuiSelect.vue.d.ts.map +1 -1
  144. package/dist/components/CuiSelect.vue.js +2 -2
  145. package/dist/components/CuiSelect.vue2.js +161 -151
  146. package/dist/components/CuiSkeleton.vue.js +2 -2
  147. package/dist/components/CuiSkeleton.vue2.js +10 -10
  148. package/dist/components/CuiSlideover.vue.d.ts +2 -2
  149. package/dist/components/CuiSlideover.vue.d.ts.map +1 -1
  150. package/dist/components/CuiSlideover.vue.js +34 -30
  151. package/dist/components/CuiSlider.vue.d.ts +2 -2
  152. package/dist/components/CuiSlider.vue.d.ts.map +1 -1
  153. package/dist/components/CuiSlider.vue.js +67 -54
  154. package/dist/components/CuiSpinner.vue.d.ts.map +1 -1
  155. package/dist/components/CuiSpinner.vue.js +5 -4
  156. package/dist/components/CuiTable.vue.d.ts.map +1 -1
  157. package/dist/components/CuiTable.vue.js +4 -1
  158. package/dist/components/CuiTableBody.vue.d.ts.map +1 -1
  159. package/dist/components/CuiTableBody.vue.js +6 -6
  160. package/dist/components/CuiTableCell.vue.d.ts.map +1 -1
  161. package/dist/components/CuiTableCell.vue.js +11 -10
  162. package/dist/components/CuiTableFoot.vue.d.ts.map +1 -1
  163. package/dist/components/CuiTableFoot.vue.js +7 -7
  164. package/dist/components/CuiTableHead.vue.d.ts.map +1 -1
  165. package/dist/components/CuiTableHead.vue.js +7 -7
  166. package/dist/components/CuiTabs.vue.d.ts.map +1 -1
  167. package/dist/components/CuiTabs.vue.js +1 -1
  168. package/dist/components/CuiTabs.vue2.js +1 -0
  169. package/dist/components/CuiTagInput.vue.d.ts +2 -2
  170. package/dist/components/CuiTagInput.vue.d.ts.map +1 -1
  171. package/dist/components/CuiTagInput.vue.js +5 -294
  172. package/dist/components/CuiTagInput.vue2.js +277 -2
  173. package/dist/components/CuiTextarea.vue.d.ts +2 -2
  174. package/dist/components/CuiTextarea.vue.d.ts.map +1 -1
  175. package/dist/components/CuiTextarea.vue.js +4 -4
  176. package/dist/components/CuiTextarea.vue2.js +73 -59
  177. package/dist/components/CuiTimePicker.vue.d.ts +2 -2
  178. package/dist/components/CuiTimePicker.vue.d.ts.map +1 -1
  179. package/dist/components/CuiTimePicker.vue.js +172 -97
  180. package/dist/components/CuiTimeline.vue.d.ts.map +1 -1
  181. package/dist/components/CuiTimeline.vue.js +6 -5
  182. package/dist/components/CuiTimelineItem.vue.d.ts.map +1 -1
  183. package/dist/components/CuiTimelineItem.vue.js +11 -10
  184. package/dist/components/CuiToast.vue.d.ts +8 -10
  185. package/dist/components/CuiToast.vue.d.ts.map +1 -1
  186. package/dist/components/CuiToast.vue.js +2 -2
  187. package/dist/components/CuiToast.vue2.js +69 -67
  188. package/dist/components/CuiToggle.vue.d.ts +2 -2
  189. package/dist/components/CuiToggle.vue.d.ts.map +1 -1
  190. package/dist/components/CuiToggle.vue.js +2 -2
  191. package/dist/components/CuiToggle.vue2.js +71 -59
  192. package/dist/components/CuiToggleGroup.vue.d.ts +2 -2
  193. package/dist/components/CuiToggleGroup.vue.d.ts.map +1 -1
  194. package/dist/components/CuiToggleGroup.vue.js +2 -2
  195. package/dist/components/CuiToggleGroup.vue2.js +45 -35
  196. package/dist/components/CuiTooltip.vue.d.ts.map +1 -1
  197. package/dist/components/CuiTooltip.vue.js +2 -2
  198. package/dist/components/CuiTooltip.vue2.js +47 -44
  199. package/dist/components/CuiTransferList.vue.d.ts.map +1 -1
  200. package/dist/components/CuiTransferList.vue.js +31 -30
  201. package/dist/components/CuiTreeNode.vue.d.ts +9 -2
  202. package/dist/components/CuiTreeNode.vue.d.ts.map +1 -1
  203. package/dist/components/CuiTreeNode.vue.js +5 -179
  204. package/dist/components/CuiTreeNode.vue2.js +198 -2
  205. package/dist/components/CuiTreeView.vue.d.ts +33 -5
  206. package/dist/components/CuiTreeView.vue.d.ts.map +1 -1
  207. package/dist/components/CuiTreeView.vue.js +187 -44
  208. package/dist/composables/useCalendarKeyboard.d.ts +48 -0
  209. package/dist/composables/useCalendarKeyboard.d.ts.map +1 -0
  210. package/dist/composables/useCalendarKeyboard.js +91 -0
  211. package/dist/composables/useFieldDescribedBy.d.ts +30 -0
  212. package/dist/composables/useFieldDescribedBy.d.ts.map +1 -0
  213. package/dist/composables/useFieldDescribedBy.js +11 -0
  214. package/dist/composables/useMessages.d.ts.map +1 -1
  215. package/dist/composables/useMessages.js +6 -6
  216. package/dist/composables/usePopover.d.ts.map +1 -1
  217. package/dist/composables/usePopover.js +10 -0
  218. package/dist/composables/useScrollShadows.d.ts +3 -0
  219. package/dist/composables/useScrollShadows.d.ts.map +1 -1
  220. package/dist/composables/useScrollShadows.js +15 -12
  221. package/dist/icons/builtin.d.ts.map +1 -1
  222. package/dist/icons/builtin.js +38 -37
  223. package/dist/index.d.ts +3 -2
  224. package/dist/index.d.ts.map +1 -1
  225. package/dist/index.js +185 -182
  226. package/dist/messages.d.ts +39 -4
  227. package/dist/messages.d.ts.map +1 -1
  228. package/dist/messages.js +8 -7
  229. package/dist/types/common.d.ts +90 -0
  230. package/dist/types/common.d.ts.map +1 -1
  231. package/dist/utils/colorIconMap.d.ts +47 -3
  232. package/dist/utils/colorIconMap.d.ts.map +1 -1
  233. package/dist/utils/colorIconMap.js +20 -5
  234. package/dist/utils/date.d.ts +13 -0
  235. package/dist/utils/date.d.ts.map +1 -1
  236. package/dist/utils/date.js +46 -40
  237. package/dist/utils/sizing.d.ts +26 -1
  238. package/dist/utils/sizing.d.ts.map +1 -1
  239. package/dist/utils/sizing.js +22 -21
  240. package/dist/version.js +1 -1
  241. package/package.json +1 -1
@@ -1,181 +1,7 @@
1
- import { defineComponent as I, computed as y, ref as b, watch as E, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as o, normalizeStyle as l, createCommentVNode as c, createElementVNode as $, createBlock as k, renderSlot as w, createTextVNode as Y, toDisplayString as V, Fragment as F, renderList as P, withCtx as W, mergeProps as X } from "vue";
2
- import z from "./CuiIcon.vue.js";
3
- const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, S = "var(--cui-border-strong, var(--cui-border))", O = /* @__PURE__ */ I({
4
- __name: "CuiTreeNode",
5
- props: {
6
- node: {},
7
- depth: {},
8
- isLast: { type: Boolean },
9
- expanded: {},
10
- selectedSet: {},
11
- selectable: { type: Boolean },
12
- showLines: { type: Boolean },
13
- animated: { type: Boolean },
14
- cfg: {}
15
- },
16
- emits: ["toggle-expand", "select-node"],
17
- setup(e, { emit: C }) {
18
- const t = e, r = C, s = y(() => t.node.children && t.node.children.length > 0), u = y(() => t.expanded.has(t.node.id)), v = y(() => t.selectedSet.has(t.node.id)), f = b(null), i = b(void 0), h = b(u.value);
19
- E(u, (a) => {
20
- if (!t.animated) {
21
- h.value = a;
22
- return;
23
- }
24
- a ? (h.value = !0, i.value = "0px", H(() => {
25
- f.value && (i.value = f.value.scrollHeight + "px", setTimeout(() => {
26
- i.value = void 0;
27
- }, 250));
28
- })) : f.value && (i.value = f.value.scrollHeight + "px", requestAnimationFrame(() => {
29
- i.value = "0px", setTimeout(() => {
30
- h.value = !1, i.value = void 0;
31
- }, 250);
32
- }));
33
- });
34
- function L(a) {
35
- a.stopPropagation(), r("toggle-expand", t.node);
36
- }
37
- function T() {
38
- s.value && !t.selectable ? r("toggle-expand", t.node) : r("select-node", t.node);
39
- }
40
- const m = y(() => t.cfg.padX);
41
- return (a, d) => {
42
- const B = R("CuiTreeNode", !0);
43
- return n(), o("div", {
44
- role: "treeitem",
45
- "aria-expanded": s.value ? u.value : void 0,
46
- style: { position: "relative" }
47
- }, [
48
- e.showLines && e.depth > 0 && !e.isLast ? (n(), o("div", {
49
- key: 0,
50
- style: l({
51
- position: "absolute",
52
- left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
53
- top: "0",
54
- bottom: "0",
55
- width: "0",
56
- borderLeft: `1px solid ${S}`,
57
- zIndex: "0"
58
- })
59
- }, null, 4)) : c("", !0),
60
- e.showLines && e.depth > 0 && e.isLast ? (n(), o("div", {
61
- key: 1,
62
- style: l({
63
- position: "absolute",
64
- left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
65
- top: "0",
66
- height: `calc(${e.cfg.padY} + 0.625em)`,
67
- width: "0",
68
- borderLeft: `1px solid ${S}`,
69
- zIndex: "0"
70
- })
71
- }, null, 4)) : c("", !0),
72
- e.showLines && e.depth > 0 ? (n(), o("div", {
73
- key: 2,
74
- style: l({
75
- position: "absolute",
76
- left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
77
- top: `calc(${e.cfg.padY} + 0.625em)`,
78
- width: `calc(${e.cfg.indent} * 0.5)`,
79
- height: "0",
80
- borderTop: `1px solid ${S}`,
81
- zIndex: "0"
82
- })
83
- }, null, 4)) : c("", !0),
84
- $("div", {
85
- style: l({
86
- display: "flex",
87
- alignItems: "center",
88
- gap: "calc(0.25rem * var(--cui-density-scale, 1))",
89
- paddingTop: e.cfg.padY,
90
- paddingRight: e.cfg.padX,
91
- paddingBottom: e.cfg.padY,
92
- paddingLeft: `calc(${m.value} + ${e.depth} * ${e.cfg.indent})`,
93
- fontSize: e.cfg.fontSize,
94
- cursor: e.node.disabled ? "default" : "pointer",
95
- borderRadius: "0.25rem",
96
- background: v.value ? "var(--cui-primary-bg)" : "transparent",
97
- color: e.node.disabled ? "var(--cui-text-tertiary)" : v.value ? "var(--cui-primary)" : "var(--cui-text-body)",
98
- fontWeight: v.value ? "600" : "400",
99
- opacity: e.node.disabled ? "0.5" : "1",
100
- transition: "background 0.1s ease",
101
- position: "relative",
102
- zIndex: "1"
103
- }),
104
- onClick: T
105
- }, [
106
- $("div", {
107
- style: l({
108
- width: e.cfg.hitSize,
109
- height: e.cfg.hitSize,
110
- marginLeft: `calc((${e.cfg.iconSize} - ${e.cfg.hitSize}) / 2)`,
111
- display: "flex",
112
- alignItems: "center",
113
- justifyContent: "center",
114
- flexShrink: "0",
115
- transition: "transform 0.15s ease",
116
- transform: u.value ? "rotate(90deg)" : "rotate(0deg)"
117
- }),
118
- onClick: d[0] || (d[0] = (x) => s.value && L(x))
119
- }, [
120
- s.value ? (n(), k(z, {
121
- key: 0,
122
- name: "caret-right",
123
- size: e.cfg.iconSize,
124
- style: { color: "var(--cui-text-tertiary)" }
125
- }, null, 8, ["size"])) : c("", !0)
126
- ], 4),
127
- e.node.icon ? (n(), k(z, {
128
- key: 0,
129
- name: e.node.icon,
130
- size: e.cfg.iconSize,
131
- style: l({ flexShrink: "0", color: v.value ? "var(--cui-primary)" : "var(--cui-text-secondary)" })
132
- }, null, 8, ["name", "size", "style"])) : c("", !0),
133
- $("div", q, [
134
- w(a.$slots, "node", {
135
- node: e.node,
136
- selected: v.value,
137
- expanded: u.value,
138
- depth: e.depth
139
- }, () => [
140
- Y(V(e.node.label), 1)
141
- ])
142
- ])
143
- ], 4),
144
- s.value && h.value ? (n(), o("div", {
145
- key: 3,
146
- ref_key: "childrenRef",
147
- ref: f,
148
- style: l({
149
- position: "relative",
150
- overflow: e.animated ? "hidden" : void 0,
151
- maxHeight: i.value,
152
- transition: e.animated ? "max-height 0.25s ease" : void 0
153
- })
154
- }, [
155
- (n(!0), o(F, null, P(e.node.children, (x, N) => (n(), k(B, {
156
- key: String(x.id),
157
- node: x,
158
- depth: e.depth + 1,
159
- "is-last": N === e.node.children.length - 1,
160
- expanded: e.expanded,
161
- "selected-set": e.selectedSet,
162
- selectable: e.selectable,
163
- "show-lines": e.showLines,
164
- animated: e.animated,
165
- cfg: e.cfg,
166
- onToggleExpand: d[1] || (d[1] = (g) => r("toggle-expand", g)),
167
- onSelectNode: d[2] || (d[2] = (g) => r("select-node", g))
168
- }, {
169
- node: W((g) => [
170
- w(a.$slots, "node", X({ ref_for: !0 }, g))
171
- ]),
172
- _: 3
173
- }, 8, ["node", "depth", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))
174
- ], 4)) : c("", !0)
175
- ], 8, j);
176
- };
177
- }
178
- });
1
+ import o from "./CuiTreeNode.vue2.js";
2
+ /* empty css */
3
+ import e from "../_virtual/_plugin-vue_export-helper.js";
4
+ const m = /* @__PURE__ */ e(o, [["__scopeId", "data-v-fe205eb9"]]);
179
5
  export {
180
- O as default
6
+ m as default
181
7
  };
@@ -1,4 +1,200 @@
1
- import f from "./CuiTreeNode.vue.js";
1
+ import { defineComponent as E, computed as m, ref as b, watch as F, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as r, withModifiers as Y, normalizeStyle as c, createCommentVNode as u, createElementVNode as S, createBlock as z, renderSlot as k, createTextVNode as O, toDisplayString as V, Fragment as A, renderList as P, withCtx as W, mergeProps as X } from "vue";
2
+ import C from "./CuiIcon.vue.js";
3
+ const j = ["data-cui-tree-id", "tabindex", "aria-expanded", "aria-selected", "aria-disabled", "aria-level", "aria-setsize", "aria-posinset"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, $ = "var(--cui-border-strong, var(--cui-border))", G = /* @__PURE__ */ E({
4
+ __name: "CuiTreeNode",
5
+ props: {
6
+ node: {},
7
+ depth: {},
8
+ isLast: { type: Boolean },
9
+ expanded: {},
10
+ selectedSet: {},
11
+ selectable: { type: Boolean },
12
+ showLines: { type: Boolean },
13
+ animated: { type: Boolean },
14
+ cfg: {},
15
+ activeId: {},
16
+ sizeOfSet: {},
17
+ positionInSet: {}
18
+ },
19
+ emits: ["toggle-expand", "select-node", "node-focused"],
20
+ setup(e, { emit: L }) {
21
+ const t = e, d = L, v = m(() => t.node.children && t.node.children.length > 0), I = m(() => t.activeId === t.node.id), f = m(() => t.expanded.has(t.node.id)), s = m(() => t.selectedSet.has(t.node.id)), g = b(null), a = b(void 0), x = b(f.value);
22
+ F(f, (l) => {
23
+ if (!t.animated) {
24
+ x.value = l;
25
+ return;
26
+ }
27
+ l ? (x.value = !0, a.value = "0px", H(() => {
28
+ g.value && (a.value = g.value.scrollHeight + "px", setTimeout(() => {
29
+ a.value = void 0;
30
+ }, 250));
31
+ })) : g.value && (a.value = g.value.scrollHeight + "px", requestAnimationFrame(() => {
32
+ a.value = "0px", setTimeout(() => {
33
+ x.value = !1, a.value = void 0;
34
+ }, 250);
35
+ }));
36
+ });
37
+ function T(l) {
38
+ l.stopPropagation(), d("toggle-expand", t.node);
39
+ }
40
+ function N() {
41
+ d("node-focused", t.node.id), v.value && !t.selectable ? d("toggle-expand", t.node) : d("select-node", t.node);
42
+ }
43
+ const y = m(() => t.cfg.padX);
44
+ return (l, i) => {
45
+ const B = R("CuiTreeNode", !0);
46
+ return n(), r("div", {
47
+ class: "cui-tree-node",
48
+ role: "treeitem",
49
+ "data-cui-tree-id": String(e.node.id),
50
+ tabindex: e.node.disabled ? void 0 : I.value ? 0 : -1,
51
+ "aria-expanded": v.value ? f.value : void 0,
52
+ "aria-selected": e.selectable ? s.value : void 0,
53
+ "aria-disabled": e.node.disabled || void 0,
54
+ "aria-level": e.depth + 1,
55
+ "aria-setsize": e.sizeOfSet,
56
+ "aria-posinset": e.positionInSet,
57
+ style: { position: "relative", outline: "none" },
58
+ onFocusin: i[4] || (i[4] = Y((h) => d("node-focused", e.node.id), ["self"]))
59
+ }, [
60
+ e.showLines && e.depth > 0 && !e.isLast ? (n(), r("div", {
61
+ key: 0,
62
+ style: c({
63
+ position: "absolute",
64
+ left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
65
+ top: "0",
66
+ bottom: "0",
67
+ width: "0",
68
+ borderLeft: `1px solid ${$}`,
69
+ zIndex: "0"
70
+ })
71
+ }, null, 4)) : u("", !0),
72
+ e.showLines && e.depth > 0 && e.isLast ? (n(), r("div", {
73
+ key: 1,
74
+ style: c({
75
+ position: "absolute",
76
+ left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
77
+ top: "0",
78
+ height: `calc(${e.cfg.padY} + 0.625em)`,
79
+ width: "0",
80
+ borderLeft: `1px solid ${$}`,
81
+ zIndex: "0"
82
+ })
83
+ }, null, 4)) : u("", !0),
84
+ e.showLines && e.depth > 0 ? (n(), r("div", {
85
+ key: 2,
86
+ style: c({
87
+ position: "absolute",
88
+ left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${y.value} + 0.5rem)`,
89
+ top: `calc(${e.cfg.padY} + 0.625em)`,
90
+ width: `calc(${e.cfg.indent} * 0.5)`,
91
+ height: "0",
92
+ borderTop: `1px solid ${$}`,
93
+ zIndex: "0"
94
+ })
95
+ }, null, 4)) : u("", !0),
96
+ S("div", {
97
+ class: "cui-tree-node__row",
98
+ style: c({
99
+ display: "flex",
100
+ alignItems: "center",
101
+ gap: "calc(0.25rem * var(--cui-density-scale, 1))",
102
+ paddingTop: e.cfg.padY,
103
+ paddingRight: e.cfg.padX,
104
+ paddingBottom: e.cfg.padY,
105
+ paddingLeft: `calc(${y.value} + ${e.depth} * ${e.cfg.indent})`,
106
+ fontSize: e.cfg.fontSize,
107
+ cursor: e.node.disabled ? "default" : "pointer",
108
+ borderRadius: "0.25rem",
109
+ background: s.value ? "var(--cui-primary-bg)" : "transparent",
110
+ color: e.node.disabled ? "var(--cui-text-tertiary)" : s.value ? "var(--cui-primary)" : "var(--cui-text-body)",
111
+ fontWeight: s.value ? "600" : "400",
112
+ opacity: e.node.disabled ? "0.5" : "1",
113
+ transition: "background 0.1s ease",
114
+ position: "relative",
115
+ zIndex: "1"
116
+ }),
117
+ onClick: N
118
+ }, [
119
+ S("div", {
120
+ class: "cui-tree-node__chevron",
121
+ style: c({
122
+ width: e.cfg.hitSize,
123
+ height: e.cfg.hitSize,
124
+ marginLeft: `calc((${e.cfg.iconSize} - ${e.cfg.hitSize}) / 2)`,
125
+ display: "flex",
126
+ alignItems: "center",
127
+ justifyContent: "center",
128
+ flexShrink: "0",
129
+ transition: "transform 0.15s ease",
130
+ transform: f.value ? "rotate(90deg)" : "rotate(0deg)"
131
+ }),
132
+ onClick: i[0] || (i[0] = (h) => v.value && T(h))
133
+ }, [
134
+ v.value ? (n(), z(C, {
135
+ key: 0,
136
+ name: "caret-right",
137
+ size: e.cfg.iconSize,
138
+ style: { color: "var(--cui-text-tertiary)" }
139
+ }, null, 8, ["size"])) : u("", !0)
140
+ ], 4),
141
+ e.node.icon ? (n(), z(C, {
142
+ key: 0,
143
+ name: e.node.icon,
144
+ size: e.cfg.iconSize,
145
+ style: c({ flexShrink: "0", color: s.value ? "var(--cui-primary)" : "var(--cui-text-secondary)" })
146
+ }, null, 8, ["name", "size", "style"])) : u("", !0),
147
+ S("div", q, [
148
+ k(l.$slots, "node", {
149
+ node: e.node,
150
+ selected: s.value,
151
+ expanded: f.value,
152
+ depth: e.depth
153
+ }, () => [
154
+ O(V(e.node.label), 1)
155
+ ], !0)
156
+ ])
157
+ ], 4),
158
+ v.value && x.value ? (n(), r("div", {
159
+ key: 3,
160
+ ref_key: "childrenRef",
161
+ ref: g,
162
+ role: "group",
163
+ style: c({
164
+ position: "relative",
165
+ overflow: e.animated ? "hidden" : void 0,
166
+ maxHeight: a.value,
167
+ transition: e.animated ? "max-height 0.25s ease" : void 0
168
+ })
169
+ }, [
170
+ (n(!0), r(A, null, P(e.node.children, (h, w) => (n(), z(B, {
171
+ key: String(h.id),
172
+ node: h,
173
+ depth: e.depth + 1,
174
+ "is-last": w === e.node.children.length - 1,
175
+ expanded: e.expanded,
176
+ "selected-set": e.selectedSet,
177
+ selectable: e.selectable,
178
+ "show-lines": e.showLines,
179
+ animated: e.animated,
180
+ cfg: e.cfg,
181
+ "active-id": e.activeId,
182
+ "size-of-set": e.node.children.length,
183
+ "position-in-set": w + 1,
184
+ onToggleExpand: i[1] || (i[1] = (o) => d("toggle-expand", o)),
185
+ onSelectNode: i[2] || (i[2] = (o) => d("select-node", o)),
186
+ onNodeFocused: i[3] || (i[3] = (o) => d("node-focused", o))
187
+ }, {
188
+ node: W((o) => [
189
+ k(l.$slots, "node", X({ ref_for: !0 }, o), void 0, !0)
190
+ ]),
191
+ _: 3
192
+ }, 8, ["node", "depth", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg", "active-id", "size-of-set", "position-in-set"]))), 128))
193
+ ], 4)) : u("", !0)
194
+ ], 40, j);
195
+ };
196
+ }
197
+ });
2
198
  export {
3
- f as default
199
+ G as default
4
200
  };
@@ -20,9 +20,17 @@ export interface CuiTreeViewProps extends HideableProps {
20
20
  modelValue?: string | number | (string | number)[] | null;
21
21
  /** Allow multiple selection */
22
22
  multiple?: boolean;
23
- /** Initially expanded node ids */
23
+ /**
24
+ * Expanded node ids (`v-model:expanded`). Pass it and expansion is
25
+ * controlled — the tree renders exactly these ids and every change is emitted
26
+ * for you to apply, so expansion can be driven from app state, persisted, or
27
+ * restored. Omit it and the tree manages expansion itself, seeded from
28
+ * `defaultExpanded` / `expandAll`.
29
+ */
30
+ expanded?: (string | number)[];
31
+ /** Initially expanded node ids — read once, for uncontrolled use */
24
32
  defaultExpanded?: (string | number)[];
25
- /** Expand all nodes by default */
33
+ /** Expand all nodes by default — read once, for uncontrolled use */
26
34
  expandAll?: boolean;
27
35
  /** Show connecting lines */
28
36
  showLines?: boolean;
@@ -33,16 +41,36 @@ export interface CuiTreeViewProps extends HideableProps {
33
41
  /** Size */
34
42
  size?: "sm" | "md" | "lg";
35
43
  }
36
- declare var __VLS_9: any;
44
+ declare var __VLS_10: any;
37
45
  type __VLS_Slots = {} & {
38
- node?: (props: typeof __VLS_9) => any;
46
+ node?: (props: typeof __VLS_10) => any;
39
47
  };
40
- declare const __VLS_component: import("vue").DefineComponent<CuiTreeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
48
+ declare const __VLS_component: import("vue").DefineComponent<CuiTreeViewProps, {
49
+ el: Readonly<import("vue").ShallowRef<HTMLElement | null>>;
50
+ /** Expand one node by id. No-op if it is already expanded. */
51
+ expand: (id: string | number) => void;
52
+ /** Collapse one node by id. No-op if it is already collapsed. */
53
+ collapse: (id: string | number) => void;
54
+ /** Flip one node's expanded state. */
55
+ toggleExpand: (id: string | number) => void;
56
+ /** Expand every node that has children, at any depth. */
57
+ expandAll: () => void;
58
+ /** Collapse everything. */
59
+ collapseAll: () => void;
60
+ /** Expand a node and all of its ancestors, so a deep node is revealed. */
61
+ reveal: (id: string | number) => void;
62
+ /** Whether a node id is currently expanded. */
63
+ isExpanded: (id: string | number) => boolean;
64
+ /** The ids currently expanded, in insertion order. */
65
+ expandedIds: () => (string | number)[];
66
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
41
67
  "update:modelValue": (value: string | number | (string | number)[] | null) => any;
68
+ "update:expanded": (value: (string | number)[]) => any;
42
69
  "node-click": (node: TreeNode) => any;
43
70
  "node-expand": (node: TreeNode, expanded: boolean) => any;
44
71
  }, string, import("vue").PublicProps, Readonly<CuiTreeViewProps> & Readonly<{
45
72
  "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
73
+ "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
46
74
  "onNode-click"?: ((node: TreeNode) => any) | undefined;
47
75
  "onNode-expand"?: ((node: TreeNode, expanded: boolean) => any) | undefined;
48
76
  }>, {
@@ -1 +1 @@
1
- {"version":3,"file":"CuiTreeView.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeView.vue"],"names":[],"mappings":"AA6IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,gBAAgB;IAChB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAiJD,QAAA,IAAI,OAAO,KAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA2B5C,QAAA,MAAM,eAAe;;;;;;;;;;UA/KZ,IAAI,GAAG,IAAI,GAAG,IAAI;cAZd,OAAO;gBAQL,OAAO;eAFR,OAAO;cAIR,OAAO;eANN,OAAO;6EA+LnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"CuiTreeView.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTreeView.vue"],"names":[],"mappings":"AA+YA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,gBAAgB;IAChB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC/B,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAiZD,QAAA,IAAI,QAAQ,KAAW,CAAE;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgC7C,QAAA,MAAM,eAAe;;IAvJnB,8DAA8D;iBACjD,MAAM,GAAG,MAAM;IAC5B,iEAAiE;mBAClD,MAAM,GAAG,MAAM;IAC9B,sCAAsC;uBACnB,MAAM,GAAG,MAAM;IAClC,yDAAyD;;IAEzD,2BAA2B;;IAE3B,0EAA0E;iBAC7D,MAAM,GAAG,MAAM;IAa5B,+CAA+C;qBAC9B,MAAM,GAAG,MAAM;IAChC,sDAAsD;;;;;;;;;;;;;;UAvT/C,IAAI,GAAG,IAAI,GAAG,IAAI;cApBd,OAAO;gBAgBL,OAAO;eAFR,OAAO;cAIR,OAAO;eANN,OAAO;6EAqcnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}