@dataloop-ai/components 0.13.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 (294) hide show
  1. package/.eslintrc.js +154 -0
  2. package/.prettierrc.json +7 -0
  3. package/Dockerfile +12 -0
  4. package/LICENSE +201 -0
  5. package/README.md +43 -0
  6. package/favicon.ico +0 -0
  7. package/index.html +13 -0
  8. package/index.ts +1 -0
  9. package/jest.config.js +16 -0
  10. package/jest.setup.js +59 -0
  11. package/models.ts +1 -0
  12. package/package.json +109 -0
  13. package/src/App.vue +201 -0
  14. package/src/assets/globals.scss +253 -0
  15. package/src/assets/globalsKeys.ts +28 -0
  16. package/src/components/DlAccordion/AccordionHeader.vue +148 -0
  17. package/src/components/DlAccordion/DlAccordion.vue +108 -0
  18. package/src/components/DlAccordion/index.ts +2 -0
  19. package/src/components/DlAlert.vue +227 -0
  20. package/src/components/DlAvatar.vue +99 -0
  21. package/src/components/DlBadge.vue +127 -0
  22. package/src/components/DlButton/DlButton.vue +370 -0
  23. package/src/components/DlButton/index.ts +4 -0
  24. package/src/components/DlButton/utils.ts +169 -0
  25. package/src/components/DlButtonGroup.vue +122 -0
  26. package/src/components/DlCheckbox.vue +298 -0
  27. package/src/components/DlChip/DlChip.vue +244 -0
  28. package/src/components/DlChip/index.ts +4 -0
  29. package/src/components/DlChip/utils.ts +100 -0
  30. package/src/components/DlColorPicker/DlAlpha.vue +142 -0
  31. package/src/components/DlColorPicker/DlBox.vue +75 -0
  32. package/src/components/DlColorPicker/DlColorPicker.vue +306 -0
  33. package/src/components/DlColorPicker/DlColors.vue +139 -0
  34. package/src/components/DlColorPicker/DlHue.vue +135 -0
  35. package/src/components/DlColorPicker/DlPreview.vue +61 -0
  36. package/src/components/DlColorPicker/DlSaturation.vue +152 -0
  37. package/src/components/DlColorPicker/constants.ts +16 -0
  38. package/src/components/DlColorPicker/index.ts +20 -0
  39. package/src/components/DlColorPicker/types.ts +11 -0
  40. package/src/components/DlColorPicker/utils.ts +128 -0
  41. package/src/components/DlCounters.vue +173 -0
  42. package/src/components/DlDatePicker/DlCalendar.vue +332 -0
  43. package/src/components/DlDatePicker/DlDatePicker.vue +315 -0
  44. package/src/components/DlDatePicker/DlMonthCalendar.vue +282 -0
  45. package/src/components/DlDatePicker/classes/Calendar.ts +110 -0
  46. package/src/components/DlDatePicker/classes/CalendarDate.ts +12 -0
  47. package/src/components/DlDatePicker/classes/CustomDate.ts +218 -0
  48. package/src/components/DlDatePicker/index.ts +3 -0
  49. package/src/components/DlDatePicker/isInRange.ts +44 -0
  50. package/src/components/DlDatePicker/types.ts +4 -0
  51. package/src/components/DlDatePicker/utils.ts +39 -0
  52. package/src/components/DlDateTimeRange/DlCardSidebar.vue +109 -0
  53. package/src/components/DlDateTimeRange/DlDateInput.vue +105 -0
  54. package/src/components/DlDateTimeRange/DlDateTimeRange.vue +468 -0
  55. package/src/components/DlDateTimeRange/index.ts +3 -0
  56. package/src/components/DlDateTimeRange/types.ts +42 -0
  57. package/src/components/DlDialogBox/DlDialogBox.vue +196 -0
  58. package/src/components/DlDialogBox/DlDialogBoxFooter.vue +22 -0
  59. package/src/components/DlDialogBox/DlDialogBoxHeader.vue +75 -0
  60. package/src/components/DlDialogBox/index.ts +5 -0
  61. package/src/components/DlDropdownButton.vue +463 -0
  62. package/src/components/DlIcon.vue +147 -0
  63. package/src/components/DlInfoErrorMessage.vue +91 -0
  64. package/src/components/DlItem/DlItem.vue +35 -0
  65. package/src/components/DlItem/index.ts +2 -0
  66. package/src/components/DlItemSection.vue +88 -0
  67. package/src/components/DlLink/DlLink.vue +76 -0
  68. package/src/components/DlLink/index.ts +4 -0
  69. package/src/components/DlLink/utils.ts +4 -0
  70. package/src/components/DlList.vue +61 -0
  71. package/src/components/DlListItem/DlListItem.vue +205 -0
  72. package/src/components/DlListItem/index.ts +3 -0
  73. package/src/components/DlListItem/utils.ts +14 -0
  74. package/src/components/DlMenu/DlMenu.vue +438 -0
  75. package/src/components/DlMenu/index.ts +3 -0
  76. package/src/components/DlMenu/utils.ts +138 -0
  77. package/src/components/DlOptionGroup/DlOptionGroup.vue +201 -0
  78. package/src/components/DlOptionGroup/MenuItemWrapper.vue +48 -0
  79. package/src/components/DlOptionGroup/OptionGroup.types.ts +36 -0
  80. package/src/components/DlOptionGroup/SimpleWrapper.vue +28 -0
  81. package/src/components/DlOptionGroup/index.ts +4 -0
  82. package/src/components/DlOptionGroup/utils.ts +40 -0
  83. package/src/components/DlPagination/DlPagination.vue +184 -0
  84. package/src/components/DlPagination/PageNavigation.vue +350 -0
  85. package/src/components/DlPagination/PaginationLegend.vue +41 -0
  86. package/src/components/DlPagination/QuickNavigation.vue +146 -0
  87. package/src/components/DlPagination/RowsSelector.vue +74 -0
  88. package/src/components/DlPagination/index.ts +3 -0
  89. package/src/components/DlPanelContainer/DlPanel.vue +213 -0
  90. package/src/components/DlPanelContainer/DlPanelContainer.vue +527 -0
  91. package/src/components/DlPanelContainer/index.ts +4 -0
  92. package/src/components/DlPopup/DlPopup.vue +478 -0
  93. package/src/components/DlPopup/DraggableUpper.vue +64 -0
  94. package/src/components/DlPopup/PopupHeader.vue +129 -0
  95. package/src/components/DlPopup/index.ts +1 -0
  96. package/src/components/DlProgressBar.vue +159 -0
  97. package/src/components/DlProgressChart.vue +299 -0
  98. package/src/components/DlRadio.vue +218 -0
  99. package/src/components/DlRange/DlRange.vue +439 -0
  100. package/src/components/DlRange/utils.ts +209 -0
  101. package/src/components/DlSearch.vue +155 -0
  102. package/src/components/DlSelect/DlSelect.vue +992 -0
  103. package/src/components/DlSelect/SelectOption.vue +261 -0
  104. package/src/components/DlSelect/index.ts +4 -0
  105. package/src/components/DlSelect/utils.ts +43 -0
  106. package/src/components/DlSkeleton.vue +72 -0
  107. package/src/components/DlSlider/DlSlider.vue +243 -0
  108. package/src/components/DlSlider/components/DlSliderBase.vue +380 -0
  109. package/src/components/DlSlider/components/DlSliderInput.vue +123 -0
  110. package/src/components/DlSlider/components/index.ts +4 -0
  111. package/src/components/DlSlider/index.ts +3 -0
  112. package/src/components/DlSlider/sliderStyles.scss +109 -0
  113. package/src/components/DlSlider/useSlider.ts +277 -0
  114. package/src/components/DlSlider/utils.ts +7 -0
  115. package/src/components/DlSmartSearch/DlJsonEditor.vue +309 -0
  116. package/src/components/DlSmartSearch/DlSmartSearch.vue +333 -0
  117. package/src/components/DlSmartSearch/DlSmartSearchInput.vue +741 -0
  118. package/src/components/DlSmartSearch/DlSuggestionsDropdown.vue +73 -0
  119. package/src/components/DlSmartSearch/highlightSyntax.ts +169 -0
  120. package/src/components/DlSmartSearch/index.ts +4 -0
  121. package/src/components/DlSmartSearch/types.ts +36 -0
  122. package/src/components/DlSmartSearch/utils.ts +45 -0
  123. package/src/components/DlStepper/DlStepper.vue +196 -0
  124. package/src/components/DlStepper/DlStepperContainer.vue +55 -0
  125. package/src/components/DlStepper/DlStepperContent.vue +101 -0
  126. package/src/components/DlStepper/DlStepperFooter.vue +133 -0
  127. package/src/components/DlStepper/DlStepperHeader.vue +49 -0
  128. package/src/components/DlStepper/DlStepperSidebar.vue +167 -0
  129. package/src/components/DlStepper/Step.ts +101 -0
  130. package/src/components/DlStepper/Stepper.ts +107 -0
  131. package/src/components/DlStepper/index.ts +7 -0
  132. package/src/components/DlStepper/interfaces.ts +11 -0
  133. package/src/components/DlSwitch.vue +280 -0
  134. package/src/components/DlTabPanels/DlTabPanel.vue +22 -0
  135. package/src/components/DlTabPanels/DlTabPanels.vue +41 -0
  136. package/src/components/DlTabPanels/index.ts +4 -0
  137. package/src/components/DlTabPanels/utils.ts +19 -0
  138. package/src/components/DlTable/DlTable.vue +1264 -0
  139. package/src/components/DlTable/DlTd.vue +109 -0
  140. package/src/components/DlTable/DlTh.vue +126 -0
  141. package/src/components/DlTable/DlTr.vue +44 -0
  142. package/src/components/DlTable/ResizableManager.ts +233 -0
  143. package/src/components/DlTable/dl-table-styles.scss +466 -0
  144. package/src/components/DlTable/hooks/tableActions.ts +64 -0
  145. package/src/components/DlTable/hooks/tableColumnSelection.ts +112 -0
  146. package/src/components/DlTable/hooks/tableFilter.ts +42 -0
  147. package/src/components/DlTable/hooks/tablePagination.ts +197 -0
  148. package/src/components/DlTable/hooks/tableRowExpand.ts +55 -0
  149. package/src/components/DlTable/hooks/tableRowSelection.ts +106 -0
  150. package/src/components/DlTable/hooks/tableSort.ts +125 -0
  151. package/src/components/DlTable/index.ts +6 -0
  152. package/src/components/DlTable/types.ts +96 -0
  153. package/src/components/DlTabs/DlTab.vue +146 -0
  154. package/src/components/DlTabs/DlTabs.vue +192 -0
  155. package/src/components/DlTabs/TabsWrapper.vue +104 -0
  156. package/src/components/DlTabs/index.ts +4 -0
  157. package/src/components/DlTabs/types.ts +8 -0
  158. package/src/components/DlTextArea.vue +151 -0
  159. package/src/components/DlTextHolder.vue +65 -0
  160. package/src/components/DlTextInput.vue +753 -0
  161. package/src/components/DlThemeProvider.vue +41 -0
  162. package/src/components/DlTimePicker/DlTimeCounter.vue +81 -0
  163. package/src/components/DlTimePicker/DlTimePicker.vue +151 -0
  164. package/src/components/DlTimePicker/DlTimePickerInput.vue +311 -0
  165. package/src/components/DlTimePicker/index.ts +3 -0
  166. package/src/components/DlTimePicker/types.ts +4 -0
  167. package/src/components/DlTooltip.vue +456 -0
  168. package/src/components/DlTrend.vue +97 -0
  169. package/src/components/DlTypography.vue +87 -0
  170. package/src/components/DlVirtualScroll/DlVirtualScroll.vue +290 -0
  171. package/src/components/DlVirtualScroll/index.ts +3 -0
  172. package/src/components/DlVirtualScroll/useVirtualScroll.ts +833 -0
  173. package/src/components/DlWidget/DlWidget.vue +50 -0
  174. package/src/components/DlWidget/DlWidgetGrid.vue +360 -0
  175. package/src/components/DlWidget/index.ts +4 -0
  176. package/src/components/DlWidget/types.ts +6 -0
  177. package/src/components/DlWidget/utils.ts +30 -0
  178. package/src/components/index.ts +118 -0
  179. package/src/demo/DlAccordionDemo.vue +60 -0
  180. package/src/demo/DlAlertDemo.vue +54 -0
  181. package/src/demo/DlAvatarDemo.vue +43 -0
  182. package/src/demo/DlBadgeDemo.vue +65 -0
  183. package/src/demo/DlButtonDemo.vue +266 -0
  184. package/src/demo/DlCheckboxDemo.vue +50 -0
  185. package/src/demo/DlChipDemo.vue +181 -0
  186. package/src/demo/DlColorPickerDemo.vue +43 -0
  187. package/src/demo/DlCounterDemo.vue +53 -0
  188. package/src/demo/DlDateTimeRangeDemo.vue +217 -0
  189. package/src/demo/DlDialogBoxDemo.vue +175 -0
  190. package/src/demo/DlDropdownButtonDemo.vue +260 -0
  191. package/src/demo/DlIconDemo.vue +47 -0
  192. package/src/demo/DlLinkDemo.vue +23 -0
  193. package/src/demo/DlListDemo.vue +177 -0
  194. package/src/demo/DlMenuDemo.vue +524 -0
  195. package/src/demo/DlOptionGroupDemo.vue +79 -0
  196. package/src/demo/DlPaginationDemo.vue +44 -0
  197. package/src/demo/DlPanelContainerDemo.vue +221 -0
  198. package/src/demo/DlPopupDemo.vue +58 -0
  199. package/src/demo/DlProgressBarDemo.vue +22 -0
  200. package/src/demo/DlProgressChartDemo.vue +71 -0
  201. package/src/demo/DlRadioDemo.vue +35 -0
  202. package/src/demo/DlRangeDemo.vue +44 -0
  203. package/src/demo/DlSearchDemo.vue +27 -0
  204. package/src/demo/DlSelectDemo.vue +355 -0
  205. package/src/demo/DlSkeletonDemo.vue +20 -0
  206. package/src/demo/DlSliderDemo.vue +47 -0
  207. package/src/demo/DlStepperDemo/CenteredStepperInDialogBox.vue +260 -0
  208. package/src/demo/DlStepperDemo/SimpleStepper.vue +202 -0
  209. package/src/demo/DlStepperDemo/StepperInDialogBox.vue +261 -0
  210. package/src/demo/DlStepperDemo/index.ts +5 -0
  211. package/src/demo/DlStepperDemo/steps/AssignmentsStep.vue +97 -0
  212. package/src/demo/DlStepperDemo/steps/DataStep.vue +158 -0
  213. package/src/demo/DlStepperDemo/steps/GeneralStep.vue +106 -0
  214. package/src/demo/DlStepperDemo/steps/InstructionStep.vue +176 -0
  215. package/src/demo/DlStepperDemo/steps/QualityStep.vue +65 -0
  216. package/src/demo/DlSwitchDemo.vue +49 -0
  217. package/src/demo/DlTableDemo.vue +475 -0
  218. package/src/demo/DlTabsDemo.vue +67 -0
  219. package/src/demo/DlTdDemo.vue +19 -0
  220. package/src/demo/DlTextAreaDemo.vue +37 -0
  221. package/src/demo/DlTextHolderDemo.vue +42 -0
  222. package/src/demo/DlTextInputDemo.vue +89 -0
  223. package/src/demo/DlThDemo.vue +32 -0
  224. package/src/demo/DlTooltipDemo.vue +60 -0
  225. package/src/demo/DlTrDemo.vue +18 -0
  226. package/src/demo/DlTrendDemo.vue +25 -0
  227. package/src/demo/DlTypographyDemo.vue +93 -0
  228. package/src/demo/DlWidgetDemo.vue +157 -0
  229. package/src/demo/SmartSearchDemo/DlSmartSearchDemo.vue +202 -0
  230. package/src/demo/SmartSearchDemo/schema.ts +44 -0
  231. package/src/demo/index.ts +141 -0
  232. package/src/directives/TouchPan.ts +525 -0
  233. package/src/env.d.ts +8 -0
  234. package/src/hooks/use-anchor.ts +223 -0
  235. package/src/hooks/use-model-toggle.ts +181 -0
  236. package/src/hooks/use-portal.ts +104 -0
  237. package/src/hooks/use-scroll-target.ts +53 -0
  238. package/src/hooks/use-size-observer.ts +24 -0
  239. package/src/hooks/use-suggestions.ts +355 -0
  240. package/src/hooks/use-tick.ts +32 -0
  241. package/src/hooks/use-timeout.ts +20 -0
  242. package/src/hooks/use-transition.ts +32 -0
  243. package/src/hooks/use-window-size.ts +25 -0
  244. package/src/hooks/useForm.ts +12 -0
  245. package/src/index.ts +7 -0
  246. package/src/main.ts +4 -0
  247. package/src/models.ts +4 -0
  248. package/src/types.ts +6 -0
  249. package/src/utils/calcs.ts +18 -0
  250. package/src/utils/click-outside.ts +108 -0
  251. package/src/utils/component-name-parser.ts +1 -0
  252. package/src/utils/css-color-names.ts +150 -0
  253. package/src/utils/dom.ts +55 -0
  254. package/src/utils/draggable-table.ts +416 -0
  255. package/src/utils/escape-key.ts +54 -0
  256. package/src/utils/events.ts +67 -0
  257. package/src/utils/focus-manager.ts +33 -0
  258. package/src/utils/focusout.ts +29 -0
  259. package/src/utils/format.ts +3 -0
  260. package/src/utils/getColor.ts +17 -0
  261. package/src/utils/getLighterGradient.ts +36 -0
  262. package/src/utils/getRootStyles.ts +52 -0
  263. package/src/utils/global-config.ts +6 -0
  264. package/src/utils/global-nodes.ts +42 -0
  265. package/src/utils/includes.ts +3 -0
  266. package/src/utils/index.ts +29 -0
  267. package/src/utils/inject-object-prop.ts +21 -0
  268. package/src/utils/input-sizes.ts +7 -0
  269. package/src/utils/is-ellipsis-active.ts +3 -0
  270. package/src/utils/is-in-viewport.ts +13 -0
  271. package/src/utils/is.ts +15 -0
  272. package/src/utils/key-composition.ts +17 -0
  273. package/src/utils/keyCodes.ts +12 -0
  274. package/src/utils/logger/ConsoleLogger.ts +65 -0
  275. package/src/utils/logger/ILogger.ts +8 -0
  276. package/src/utils/logger/index.ts +8 -0
  277. package/src/utils/nav-keys-constants.ts +1 -0
  278. package/src/utils/portal.ts +55 -0
  279. package/src/utils/position-engine.ts +381 -0
  280. package/src/utils/render.ts +36 -0
  281. package/src/utils/ripple.ts +7 -0
  282. package/src/utils/scroll.ts +73 -0
  283. package/src/utils/selection.ts +15 -0
  284. package/src/utils/sort.ts +7 -0
  285. package/src/utils/splitByQuotes.ts +32 -0
  286. package/src/utils/string.ts +6 -0
  287. package/src/utils/teleport.ts +14 -0
  288. package/src/utils/theme.ts +2 -0
  289. package/src/utils/vm.ts +16 -0
  290. package/storybook.js +8 -0
  291. package/tsconfig.json +44 -0
  292. package/tsconfig.node.json +8 -0
  293. package/types.ts +1 -0
  294. package/vite.config.ts +13 -0
package/src/demo/DlMenuDemo.vue ADDED
@@ -0,0 +1,524 @@
1
+ <template>
2
+ <div>
3
+ <dl-button label="Basic Menu">
4
+ <dl-menu>
5
+ <dl-list
6
+ bordered
7
+ separator
8
+ >
9
+ <dl-list-item> Default list item </dl-list-item>
10
+ <dl-list-item disabled>
11
+ Disabled list item
12
+ </dl-list-item>
13
+ <dl-list-item clickable>
14
+ Clickable list item
15
+ </dl-list-item>
16
+ <dl-list-item
17
+ clickable
18
+ disabled
19
+ start-icon="icon-dl-search"
20
+ end-icon="icon-dl-id"
21
+ >
22
+ <dl-item-section no-wrap>
23
+ with left and right side icons
24
+ </dl-item-section>
25
+ </dl-list-item>
26
+ <dl-list-item
27
+ clickable
28
+ start-icon="icon-dl-search"
29
+ end-icon="icon-dl-id"
30
+ >
31
+ <dl-item-section side>
32
+ Left text
33
+ </dl-item-section>
34
+ <dl-item-section no-wrap>
35
+ main content
36
+ </dl-item-section>
37
+ <dl-item-section no-wrap>
38
+ another main content
39
+ </dl-item-section>
40
+ </dl-list-item>
41
+ <dl-list-item
42
+ clickable
43
+ start-icon="icon-dl-search"
44
+ end-icon="icon-dl-id"
45
+ start-icon-color="dl-color-positive"
46
+ end-icon-color="dl-color-secondary"
47
+ >
48
+ <dl-item-section no-wrap>
49
+ item with custom icon colors
50
+ </dl-item-section>
51
+ </dl-list-item>
52
+ <dl-list-item
53
+ clickable
54
+ bordered
55
+ >
56
+ <dl-item-section side>
57
+ <dl-icon icon="icon-dl-id" />
58
+ </dl-item-section>
59
+ <dl-item-section no-wrap>
60
+ with left/right side icons + Submenu
61
+ </dl-item-section>
62
+ <dl-item-section side>
63
+ <dl-icon icon="icon-dl-id" />
64
+ </dl-item-section>
65
+ <dl-menu
66
+ anchor="top end"
67
+ self="top start"
68
+ >
69
+ <dl-list
70
+ bordered
71
+ separator
72
+ >
73
+ <dl-list-item
74
+ v-for="n in 3"
75
+ :key="n"
76
+ dense
77
+ clickable
78
+ >
79
+ <dl-item-section>
80
+ Submenu Label
81
+ </dl-item-section>
82
+ <dl-item-section side>
83
+ <dl-icon icon="icon-dl-id" />
84
+ </dl-item-section>
85
+ <dl-menu
86
+ auto-close
87
+ anchor="top end"
88
+ self="top start"
89
+ >
90
+ <dl-list bordered>
91
+ <dl-list-item
92
+ v-for="i in 3"
93
+ :key="i"
94
+ dense
95
+ clickable
96
+ >
97
+ <dl-item-section>
98
+ 3rd auto-close menu
99
+ </dl-item-section>
100
+ </dl-list-item>
101
+ </dl-list>
102
+ </dl-menu>
103
+ </dl-list-item>
104
+ </dl-list>
105
+ </dl-menu>
106
+ </dl-list-item>
107
+ </dl-list>
108
+ </dl-menu>
109
+ </dl-button>
110
+
111
+ <dl-button label="Basic Menu With SubText">
112
+ This is a menu button
113
+ <dl-menu>
114
+ <dl-list
115
+ bordered
116
+ separator
117
+ >
118
+ <dl-list-item> Default list item </dl-list-item>
119
+ <dl-list-item disabled>
120
+ Disabled list item
121
+ </dl-list-item>
122
+ <dl-list-item clickable>
123
+ Clickable list item
124
+ </dl-list-item>
125
+ <dl-list-item
126
+ clickable
127
+ disabled
128
+ start-icon="icon-dl-search"
129
+ end-icon="icon-dl-id"
130
+ >
131
+ <dl-item-section no-wrap>
132
+ with left and right side icons
133
+ </dl-item-section>
134
+ </dl-list-item>
135
+ <dl-list-item
136
+ clickable
137
+ start-icon="icon-dl-search"
138
+ end-icon="icon-dl-id"
139
+ >
140
+ <dl-item-section side>
141
+ Left text
142
+ </dl-item-section>
143
+ <dl-item-section no-wrap>
144
+ main content
145
+ </dl-item-section>
146
+ <dl-item-section no-wrap>
147
+ another main content
148
+ </dl-item-section>
149
+ </dl-list-item>
150
+ <dl-list-item
151
+ clickable
152
+ start-icon="icon-dl-search"
153
+ end-icon="icon-dl-id"
154
+ start-icon-color="dl-color-positive"
155
+ end-icon-color="dl-color-secondary"
156
+ >
157
+ <dl-item-section no-wrap>
158
+ item with custom icon colors
159
+ </dl-item-section>
160
+ </dl-list-item>
161
+ <dl-list-item
162
+ clickable
163
+ bordered
164
+ >
165
+ <dl-item-section side>
166
+ <dl-icon icon="icon-dl-id" />
167
+ </dl-item-section>
168
+ <dl-item-section no-wrap>
169
+ with left/right side icons + Submenu
170
+ </dl-item-section>
171
+ <dl-item-section side>
172
+ <dl-icon icon="icon-dl-id" />
173
+ </dl-item-section>
174
+ <dl-menu
175
+ anchor="top end"
176
+ self="top start"
177
+ >
178
+ <dl-list
179
+ bordered
180
+ separator
181
+ >
182
+ <dl-list-item
183
+ v-for="n in 3"
184
+ :key="n"
185
+ dense
186
+ clickable
187
+ >
188
+ <dl-item-section>
189
+ Submenu Label
190
+ </dl-item-section>
191
+ <dl-item-section side>
192
+ <dl-icon icon="icon-dl-id" />
193
+ </dl-item-section>
194
+ <dl-menu
195
+ auto-close
196
+ anchor="top end"
197
+ self="top start"
198
+ >
199
+ <dl-list bordered>
200
+ <dl-list-item
201
+ v-for="i in 3"
202
+ :key="i"
203
+ dense
204
+ clickable
205
+ >
206
+ <dl-item-section>
207
+ 3rd auto-close menu
208
+ </dl-item-section>
209
+ </dl-list-item>
210
+ </dl-list>
211
+ </dl-menu>
212
+ </dl-list-item>
213
+ </dl-list>
214
+ </dl-menu>
215
+ </dl-list-item>
216
+ </dl-list>
217
+ </dl-menu>
218
+ </dl-button>
219
+
220
+ <div style="width: 300px; height: 50px; background-color: yellow">
221
+ <p style="color: blue">
222
+ Context-menu
223
+ </p>
224
+ <dl-menu
225
+ max-height="300px"
226
+ context-menu
227
+ >
228
+ <dl-list
229
+ bordered
230
+ separator
231
+ >
232
+ <dl-list-item> Default list item </dl-list-item>
233
+ <dl-list-item disabled>
234
+ Disabled list item
235
+ </dl-list-item>
236
+ <dl-list-item clickable>
237
+ Clickable list item
238
+ </dl-list-item>
239
+ <dl-list-item
240
+ clickable
241
+ disabled
242
+ start-icon="icon-dl-search"
243
+ end-icon="icon-dl-id"
244
+ >
245
+ <dl-item-section no-wrap>
246
+ with left and right side icons
247
+ </dl-item-section>
248
+ </dl-list-item>
249
+ <dl-list-item
250
+ clickable
251
+ start-icon="icon-dl-search"
252
+ end-icon="icon-dl-id"
253
+ >
254
+ <dl-item-section side>
255
+ Left text
256
+ </dl-item-section>
257
+ <dl-item-section no-wrap>
258
+ main content
259
+ </dl-item-section>
260
+ <dl-item-section no-wrap>
261
+ another main content
262
+ </dl-item-section>
263
+ </dl-list-item>
264
+ <dl-list-item
265
+ clickable
266
+ start-icon="icon-dl-search"
267
+ end-icon="icon-dl-id"
268
+ start-icon-color="dl-color-positive"
269
+ end-icon-color="dl-color-secondary"
270
+ >
271
+ <dl-item-section no-wrap>
272
+ item with custom icon colors
273
+ </dl-item-section>
274
+ </dl-list-item>
275
+ <dl-list-item
276
+ clickable
277
+ bordered
278
+ >
279
+ <dl-item-section side>
280
+ <dl-icon icon="icon-dl-id" />
281
+ </dl-item-section>
282
+ <dl-item-section no-wrap>
283
+ with left/right side icons + Submenu
284
+ </dl-item-section>
285
+ <dl-item-section side>
286
+ <dl-icon icon="icon-dl-id" />
287
+ </dl-item-section>
288
+ <dl-menu
289
+ anchor="top end"
290
+ self="top start"
291
+ >
292
+ <dl-list
293
+ bordered
294
+ separator
295
+ >
296
+ <dl-list-item
297
+ v-for="i in 3"
298
+ :key="i"
299
+ dense
300
+ clickable
301
+ >
302
+ <dl-item-section>
303
+ Submenu Label
304
+ </dl-item-section>
305
+ <dl-item-section side>
306
+ <dl-icon icon="icon-dl-id" />
307
+ </dl-item-section>
308
+ <dl-menu
309
+ auto-close
310
+ anchor="top end"
311
+ self="top start"
312
+ >
313
+ <dl-list bordered>
314
+ <dl-list-item
315
+ v-for="m in 3"
316
+ :key="m"
317
+ dense
318
+ clickable
319
+ >
320
+ <dl-item-section>
321
+ 3rd auto-close menu
322
+ </dl-item-section>
323
+ </dl-list-item>
324
+ </dl-list>
325
+ </dl-menu>
326
+ </dl-list-item>
327
+ </dl-list>
328
+ </dl-menu>
329
+ </dl-list-item>
330
+ </dl-list>
331
+ </dl-menu>
332
+ </div>
333
+
334
+ <div
335
+ style="
336
+ display: flex;
337
+ width: 100%;
338
+ align-items: center;
339
+ flex-direction: column;
340
+ "
341
+ >
342
+ V-model {{ showing }}
343
+ <div>
344
+ <dl-button
345
+ color="primary"
346
+ label="Show"
347
+ @click="showing = true"
348
+ />
349
+ <dl-button
350
+ color="primary"
351
+ label="Hide"
352
+ @click="showing = false"
353
+ />
354
+ </div>
355
+
356
+ <div
357
+ style="
358
+ width: 200px;
359
+ height: 70px;
360
+ background-color: purple;
361
+ color: white;
362
+ "
363
+ >
364
+ Click me
365
+
366
+ <dl-menu
367
+ v-model="showing"
368
+ :value="false"
369
+ >
370
+ <dl-list style="min-width: 100px">
371
+ <dl-list-item clickable>
372
+ <dl-item-section>New tab</dl-item-section>
373
+ </dl-list-item>
374
+ <dl-list-item clickable>
375
+ <dl-item-section>New incognito tab</dl-item-section>
376
+ </dl-list-item>
377
+ <dl-list-item clickable>
378
+ <dl-item-section>Recent tabs</dl-item-section>
379
+ </dl-list-item>
380
+ <dl-list-item clickable>
381
+ <dl-item-section>History</dl-item-section>
382
+ </dl-list-item>
383
+ </dl-list>
384
+ </dl-menu>
385
+ </div>
386
+ </div>
387
+
388
+ <div>
389
+ <h4>Sizing and styling</h4>
390
+ <div>
391
+ <dl-button label="Fit Menu">
392
+ <dl-menu fit>
393
+ <dl-list>
394
+ <dl-list-item clickable>
395
+ <dl-item-section>New tab</dl-item-section>
396
+ </dl-list-item>
397
+ <dl-list-item clickable>
398
+ <dl-item-section>
399
+ New incognito tab
400
+ </dl-item-section>
401
+ </dl-list-item>
402
+ <dl-list-item clickable>
403
+ <dl-item-section>Recent tabs</dl-item-section>
404
+ </dl-list-item>
405
+ <dl-list-item clickable>
406
+ <dl-item-section>History</dl-item-section>
407
+ </dl-list-item>
408
+ <dl-list-item clickable>
409
+ <dl-item-section>Downloads</dl-item-section>
410
+ </dl-list-item>
411
+ <dl-list-item clickable>
412
+ <dl-item-section> Settings </dl-item-section>
413
+ </dl-list-item>
414
+ <dl-list-item clickable>
415
+ <dl-item-section>
416
+ Help &amp; Feedback
417
+ </dl-item-section>
418
+ </dl-list-item>
419
+ </dl-list>
420
+ </dl-menu>
421
+ </dl-button>
422
+
423
+ <dl-button
424
+ color="brown"
425
+ label="Max Height Menu"
426
+ >
427
+ <dl-menu max-height="130px">
428
+ <dl-list style="min-width: 100px">
429
+ <dl-list-item clickable>
430
+ <dl-item-section>New tab</dl-item-section>
431
+ </dl-list-item>
432
+ <dl-list-item clickable>
433
+ <dl-item-section>
434
+ New incognito tab
435
+ </dl-item-section>
436
+ </dl-list-item>
437
+ <dl-list-item clickable>
438
+ <dl-item-section>Recent tabs</dl-item-section>
439
+ </dl-list-item>
440
+ <dl-list-item clickable>
441
+ <dl-item-section>History</dl-item-section>
442
+ </dl-list-item>
443
+ <dl-list-item clickable>
444
+ <dl-item-section>Downloads</dl-item-section>
445
+ </dl-list-item>
446
+ <dl-list-item clickable>
447
+ <dl-item-section>Settings</dl-item-section>
448
+ </dl-list-item>
449
+ <dl-list-item clickable>
450
+ <dl-item-section>
451
+ Help &amp; Feedback
452
+ </dl-item-section>
453
+ </dl-list-item>
454
+ </dl-list>
455
+ </dl-menu>
456
+ </dl-button>
457
+
458
+ <dl-button label="Max Width Menu">
459
+ <dl-menu max-width="80px">
460
+ <dl-list style="min-width: 100px">
461
+ <dl-list-item clickable>
462
+ <dl-item-section> New tab </dl-item-section>
463
+ </dl-list-item>
464
+ <dl-list-item clickable>
465
+ <dl-item-section>
466
+ New incognito tab
467
+ </dl-item-section>
468
+ </dl-list-item>
469
+ <dl-list-item clickable>
470
+ <dl-item-section> Recent tabs </dl-item-section>
471
+ </dl-list-item>
472
+ <dl-list-item clickable>
473
+ <dl-item-section> History </dl-item-section>
474
+ </dl-list-item>
475
+ <dl-list-item clickable>
476
+ <dl-item-section> Downloads </dl-item-section>
477
+ </dl-list-item>
478
+ <dl-list-item clickable>
479
+ <dl-item-section> Settings </dl-item-section>
480
+ </dl-list-item>
481
+ <dl-list-item clickable>
482
+ <dl-item-section>
483
+ Help & Feedback
484
+ </dl-item-section>
485
+ </dl-list-item>
486
+ </dl-list>
487
+ </dl-menu>
488
+ </dl-button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </template>
493
+
494
+ <script lang="ts">
495
+ import {
496
+ DlIcon,
497
+ DlButton,
498
+ DlListItem,
499
+ DlItemSection,
500
+ DlList,
501
+ DlMenu
502
+ } from '../components'
503
+ import { defineComponent, onMounted, ref } from 'vue-demi'
504
+
505
+ export default defineComponent({
506
+ name: 'DlMenuDemo',
507
+ components: {
508
+ DlIcon,
509
+ DlButton,
510
+ DlListItem,
511
+ DlItemSection,
512
+ DlList,
513
+ DlMenu
514
+ },
515
+ setup() {
516
+ const showing = ref(false)
517
+ onMounted(() => {
518
+ // @ts-ignore
519
+ window.menuDemo = { showing }
520
+ })
521
+ return { showing }
522
+ }
523
+ })
524
+ </script>
package/src/demo/DlOptionGroupDemo.vue ADDED
@@ -0,0 +1,79 @@
1
+ <template>
2
+ <div>
3
+ <dl-option-group
4
+ v-model="optionValue"
5
+ :options="options"
6
+ inline
7
+ />
8
+ <h1>The chosen option is {{ optionValue }}</h1>
9
+ <dl-option-group
10
+ v-model="switchValue"
11
+ :options="options"
12
+ type="switch"
13
+ />
14
+ <h1>The choosen option is {{ switchValue }}</h1>
15
+ <dl-option-group
16
+ v-model="switchValue"
17
+ left-label
18
+ max-width="150px"
19
+ :options="options"
20
+ type="switch"
21
+ />
22
+ <h1>The choosen option is {{ switchValue }}</h1>
23
+
24
+ <h1>The chosen options are {{ switchValue }}</h1>
25
+ <dl-option-group
26
+ v-model="switchValue"
27
+ type="checkbox"
28
+ :options="options"
29
+ />
30
+
31
+ <h1>in menu : The chosen options are {{ switchValue }}</h1>
32
+ <dl-button
33
+ label="Menu"
34
+ @click="$refs.menu.show()"
35
+ >
36
+ <dl-menu
37
+ ref="menu"
38
+ fit
39
+ >
40
+ <dl-option-group
41
+ v-model="switchValue"
42
+ type="checkbox"
43
+ :options="options"
44
+ />
45
+ </dl-menu>
46
+ </dl-button>
47
+ </div>
48
+ </template>
49
+
50
+ <script lang="ts">
51
+ import { defineComponent, ref } from 'vue-demi'
52
+ import { DlOptionGroup, DlMenu, DlButton } from '../components'
53
+ import { OptionGroupOptions } from '../components/DlOptionGroup'
54
+ export default defineComponent({
55
+ name: 'DlOptionGroupDemo',
56
+ components: {
57
+ DlOptionGroup,
58
+ DlMenu,
59
+ DlButton
60
+ },
61
+ setup() {
62
+ const optionValue = ref<number>(1)
63
+ const switchValue = ref<number[]>([1, 3])
64
+
65
+ const options = ref<OptionGroupOptions>([
66
+ { label: 'Option 1', value: 1, color: 'dl-color-positive' },
67
+ { label: 'Option 2', value: 2 },
68
+ { label: 'Option 3', value: 3, tooltip: 'Option tooltip' },
69
+ { label: 'Option 4', value: 4, disabled: true }
70
+ ])
71
+
72
+ return {
73
+ optionValue,
74
+ switchValue,
75
+ options
76
+ }
77
+ }
78
+ })
79
+ </script>
package/src/demo/DlPaginationDemo.vue ADDED
@@ -0,0 +1,44 @@
1
+ <template>
2
+ <div style="width: 700px">
3
+ <dl-pagination
4
+ v-model="page"
5
+ :max="max"
6
+ :boundary-numbers="boundaryNumbers"
7
+ :boundary-links="boundaryLinks"
8
+ :direction-links="directionLinks"
9
+ :max-pages="maxPages"
10
+ :disabled="disabled"
11
+ :with-legend="withLegend"
12
+ :total-items="total"
13
+ :items-name="itemsName"
14
+ :with-quick-navigation="withQuickNavigation"
15
+ :with-rows-per-page="withRowsPerPage"
16
+ />
17
+ </div>
18
+ </template>
19
+
20
+ <script lang="ts">
21
+ import { defineComponent } from 'vue-demi'
22
+ import { DlPagination } from '../components/DlPagination'
23
+
24
+ export default defineComponent({
25
+ name: 'DlPaginationDemo',
26
+ components: { DlPagination },
27
+ data() {
28
+ return {
29
+ page: 18,
30
+ max: 119,
31
+ maxPages: 6,
32
+ boundaryNumbers: true,
33
+ boundaryLinks: true,
34
+ directionLinks: true,
35
+ total: 200,
36
+ withQuickNavigation: true,
37
+ disabled: false,
38
+ itemsName: 'Rows',
39
+ withLegend: true,
40
+ withRowsPerPage: true
41
+ }
42
+ }
43
+ })
44
+ </script>