classcard-ui 0.2.1473 → 0.2.1475

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 (209) hide show
  1. package/README.md +24 -24
  2. package/dist/classcard-ui.common.js +413 -135
  3. package/dist/classcard-ui.common.js.map +1 -1
  4. package/dist/classcard-ui.css +2 -2
  5. package/dist/classcard-ui.umd.js +413 -135
  6. package/dist/classcard-ui.umd.js.map +1 -1
  7. package/dist/classcard-ui.umd.min.js +3 -3
  8. package/dist/classcard-ui.umd.min.js.map +1 -1
  9. package/package.json +83 -83
  10. package/src/App.vue +16 -16
  11. package/src/colorConfig.js +52 -52
  12. package/src/components/CAlertModal/CAlertModal.vue +179 -179
  13. package/src/components/CAlertModal/index.js +3 -3
  14. package/src/components/CAlerts/CAlerts.vue +114 -114
  15. package/src/components/CAlerts/index.js +2 -2
  16. package/src/components/CAnchorTabs/CAnchorTabs.vue +100 -100
  17. package/src/components/CAnchorTabs/index.js +2 -2
  18. package/src/components/CAnchorTag/CAnchorTag.vue +84 -84
  19. package/src/components/CAnchorTag/index.js +2 -2
  20. package/src/components/CAvatar/CAvatar.vue +230 -230
  21. package/src/components/CAvatar/index.js +2 -2
  22. package/src/components/CAvatarGroup/CAvatarGroup.vue +213 -213
  23. package/src/components/CAvatarGroup/index.js +2 -2
  24. package/src/components/CBasicTable/CBasicTable.vue +184 -184
  25. package/src/components/CBasicTable/index.js +2 -2
  26. package/src/components/CBreadcrumbs/CBreadcrumbs.vue +38 -38
  27. package/src/components/CBreadcrumbs/index.js +2 -2
  28. package/src/components/CButton/CButton.vue +239 -239
  29. package/src/components/CButton/index.js +2 -2
  30. package/src/components/CButtonGroup/CButtonGroup.vue +155 -155
  31. package/src/components/CButtonGroup/index.js +2 -2
  32. package/src/components/CButtonIcon/CButtonIcon.vue +166 -166
  33. package/src/components/CButtonIcon/index.js +2 -2
  34. package/src/components/CButtonLink/CButtonLink.vue +43 -43
  35. package/src/components/CButtonLink/index.js +2 -2
  36. package/src/components/CButtonSelect/CButtonSelect.vue +186 -186
  37. package/src/components/CButtonSelect/index.js +2 -2
  38. package/src/components/CButtonSelectBorder/CButtonSelectBorder.vue +265 -265
  39. package/src/components/CButtonSelectBorder/index.js +3 -3
  40. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +152 -152
  41. package/src/components/CButtonWithDropdown/index.js +2 -2
  42. package/src/components/CCalendar/CCalendar.vue +443 -443
  43. package/src/components/CCalendar/index.js +3 -3
  44. package/src/components/CCard/CCard.vue +53 -53
  45. package/src/components/CCard/index.js +2 -2
  46. package/src/components/CCheckbox/CCheckbox.vue +200 -200
  47. package/src/components/CCheckbox/index.js +2 -2
  48. package/src/components/CCircularButton/CCircularButton.vue +57 -57
  49. package/src/components/CCircularButton/index.js +2 -2
  50. package/src/components/CCollapsibleSection/CCollapsibleSection.vue +121 -121
  51. package/src/components/CCollapsibleSection/index.js +2 -2
  52. package/src/components/CColorDots/CColorDots.vue +52 -52
  53. package/src/components/CColorDots/index.js +3 -3
  54. package/src/components/CConfirmActionModal/CConfirmActionModal.vue +221 -221
  55. package/src/components/CConfirmActionModal/index.js +3 -3
  56. package/src/components/CDatepicker/CDatepicker.vue +235 -235
  57. package/src/components/CDatepicker/index.js +2 -2
  58. package/src/components/CDualSelect/CDualSelect.vue +193 -193
  59. package/src/components/CDualSelect/index.js +2 -2
  60. package/src/components/CEditor/CEditor.vue +114 -114
  61. package/src/components/CEditor/index.js +2 -2
  62. package/src/components/CFormSectionHeading/CFormSectionHeading.vue +76 -76
  63. package/src/components/CFormSectionHeading/index.js +2 -2
  64. package/src/components/CGroupedFilterDropdown/CGroupedFilterDropdown.vue +263 -263
  65. package/src/components/CGroupedFilterDropdown/index.js +2 -2
  66. package/src/components/CGroupedSelect/CGroupedSelect.vue +366 -366
  67. package/src/components/CGroupedSelect/index.js +3 -3
  68. package/src/components/CIcon/CIcon.vue +112 -112
  69. package/src/components/CIcon/index.js +2 -2
  70. package/src/components/CIconDropdown/CIconDropdown.vue +206 -206
  71. package/src/components/CIconDropdown/index.js +2 -2
  72. package/src/components/CIconSelect/CIconSelect.vue +182 -182
  73. package/src/components/CIconSelect/index.js +3 -3
  74. package/src/components/CInput/CInput.vue +173 -173
  75. package/src/components/CInput/index.js +2 -2
  76. package/src/components/CInputAddon/CInputAddon.vue +297 -297
  77. package/src/components/CInputAddon/index.js +2 -2
  78. package/src/components/CInputEmail/CInputEmail.vue +107 -107
  79. package/src/components/CInputEmail/index.js +2 -2
  80. package/src/components/CInsetTabs/CInsetTabs.vue +134 -134
  81. package/src/components/CInsetTabs/index.js +3 -3
  82. package/src/components/CModalHeading/CModalHeading.vue +22 -22
  83. package/src/components/CModalHeading/index.js +2 -2
  84. package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue +88 -88
  85. package/src/components/CModuleHelpLinks/index.js +3 -3
  86. package/src/components/CMultiselect/CMultiselect.vue +1170 -937
  87. package/src/components/CMultiselect/index.js +2 -2
  88. package/src/components/CMultiselectr/CMultiselectr.vue +44 -44
  89. package/src/components/CMultiselectr/index.js +2 -2
  90. package/src/components/CPageHeading/CPageHeading.vue +83 -83
  91. package/src/components/CPageHeading/index.js +2 -2
  92. package/src/components/CPagination/CPagination.vue +239 -239
  93. package/src/components/CPagination/index.js +2 -2
  94. package/src/components/CPhoneNumber/CPhoneNumber.vue +213 -213
  95. package/src/components/CPhoneNumber/index.js +2 -2
  96. package/src/components/CProgress/CProgress.vue +91 -91
  97. package/src/components/CProgress/index.js +2 -2
  98. package/src/components/CRadio/CRadio.vue +197 -197
  99. package/src/components/CRadio/index.js +2 -2
  100. package/src/components/CRadioGroup/CRadioGroup.vue +96 -96
  101. package/src/components/CRadioGroup/index.js +2 -2
  102. package/src/components/CRangeSlider/CRangeSlider.vue +55 -55
  103. package/src/components/CRangeSlider/index.js +2 -2
  104. package/src/components/CReorderableStackedList/CReorderableStackedList.vue +94 -94
  105. package/src/components/CReorderableStackedList/index.js +2 -2
  106. package/src/components/CSelect/CSelect.vue +1210 -1165
  107. package/src/components/CSelect/index.js +2 -2
  108. package/src/components/CSmallTimeline/CSmallTimeline.vue +40 -40
  109. package/src/components/CSmallTimeline/index.js +2 -2
  110. package/src/components/CStackedList/CStackedList.vue +162 -162
  111. package/src/components/CStackedList/index.js +2 -2
  112. package/src/components/CStats/CStats.vue +157 -157
  113. package/src/components/CStats/index.js +2 -2
  114. package/src/components/CSwitch/CSwitch.vue +200 -200
  115. package/src/components/CSwitch/index.js +2 -2
  116. package/src/components/CTabLazy/CTabLazy.vue +83 -83
  117. package/src/components/CTabLazy/index.js +2 -2
  118. package/src/components/CTable/CTable.vue +1114 -1114
  119. package/src/components/CTable/index.js +2 -2
  120. package/src/components/CTabs/CTabs.vue +250 -250
  121. package/src/components/CTabs/index.js +2 -2
  122. package/src/components/CTag/CTag.vue +109 -109
  123. package/src/components/CTag/index.js +2 -2
  124. package/src/components/CTextarea/CTextarea.vue +118 -118
  125. package/src/components/CTextarea/index.js +2 -2
  126. package/src/components/CTimeline/CTimeline.vue +237 -237
  127. package/src/components/CTimeline/index.js +2 -2
  128. package/src/components/CToolTip/CToolTip.vue +108 -108
  129. package/src/components/CToolTip/index.js +3 -3
  130. package/src/components/CUpload/CUpload.vue +331 -331
  131. package/src/components/CUpload/index.js +2 -2
  132. package/src/components/NumberAnimator.vue +112 -112
  133. package/src/components/index.js +57 -57
  134. package/src/helper.js +8 -8
  135. package/src/icons.js +830 -830
  136. package/src/main.js +22 -22
  137. package/src/stories/CAlertModal.stories.js +30 -30
  138. package/src/stories/CAlerts.stories.js +39 -39
  139. package/src/stories/CAnchorTabs.stories.js +29 -29
  140. package/src/stories/CAnchorTag.stories.js +38 -38
  141. package/src/stories/CAvatar.stories.js +38 -38
  142. package/src/stories/CAvatarGroup.stories.js +136 -136
  143. package/src/stories/CBasicTable.stories.js +316 -316
  144. package/src/stories/CBreadcrumbs.stories.js +24 -24
  145. package/src/stories/CButton.stories.js +49 -49
  146. package/src/stories/CButtonGroup.stories.js +43 -43
  147. package/src/stories/CButtonIcon.stories.js +27 -27
  148. package/src/stories/CButtonLink.stories.js +24 -24
  149. package/src/stories/CButtonSelect.stories.js +44 -44
  150. package/src/stories/CButtonSelectBorder.stories.js +56 -56
  151. package/src/stories/CButtonWithDropdown.stories.js +41 -41
  152. package/src/stories/CCalendar.stories.js +16 -16
  153. package/src/stories/CCard.stories.js +30 -30
  154. package/src/stories/CCheckbox.stories.js +38 -38
  155. package/src/stories/CCircularButton.stories.js +29 -29
  156. package/src/stories/CCollapsibleSection.stories.js +29 -29
  157. package/src/stories/CColorDots.stories.js +37 -37
  158. package/src/stories/CConfirmActionModal.stories.js +60 -60
  159. package/src/stories/CDatepicker.stories.js +31 -31
  160. package/src/stories/CDualSelect.stories.js +29 -29
  161. package/src/stories/CEditor.stories.js +30 -30
  162. package/src/stories/CFormSectionHeading.stories.js +37 -37
  163. package/src/stories/CGroupedFilterDropdown.stories.js +176 -176
  164. package/src/stories/CGroupedSelect.stories.js +103 -103
  165. package/src/stories/CIcon.stories.js +31 -31
  166. package/src/stories/CIconDropdown.stories.js +52 -52
  167. package/src/stories/CIconSelect.stories.js +45 -45
  168. package/src/stories/CInput.stories.js +36 -36
  169. package/src/stories/CInputAddon.stories.js +37 -37
  170. package/src/stories/CInputEmail.stories.js +27 -27
  171. package/src/stories/CInsetTabs.stories.js +48 -48
  172. package/src/stories/CModalHeading.stories.js +25 -25
  173. package/src/stories/CModuleHelpLinks.stories.js +25 -25
  174. package/src/stories/CMultiselect.stories.js +136 -136
  175. package/src/stories/CMultiselectr.stories.js +23 -23
  176. package/src/stories/CPageHeading.stories.js +32 -32
  177. package/src/stories/CPagination.stories.js +30 -30
  178. package/src/stories/CPhoneNumber.stories.js +37 -37
  179. package/src/stories/CProgress.stories.js +23 -23
  180. package/src/stories/CRadio.stories.js +44 -44
  181. package/src/stories/CRadioGroup.stories.js +51 -51
  182. package/src/stories/CRangeSlider.stories.js +23 -23
  183. package/src/stories/CReorderableStackedList.stories.js +23 -23
  184. package/src/stories/CSelect.stories.js +157 -157
  185. package/src/stories/CSmallTimeline.stories.js +26 -26
  186. package/src/stories/CStackedList.stories.js +37 -37
  187. package/src/stories/CStats.stories.js +53 -53
  188. package/src/stories/CSwitch.stories.js +28 -28
  189. package/src/stories/CTabLazy.stories.js +42 -42
  190. package/src/stories/CTable.stories.js +203 -203
  191. package/src/stories/CTabs.stories.js +36 -36
  192. package/src/stories/CTag.stories.js +37 -37
  193. package/src/stories/CTextarea.stories.js +32 -32
  194. package/src/stories/CTimeline.stories.js +26 -26
  195. package/src/stories/CToolTip.stories.js +27 -27
  196. package/src/stories/CUpload.stories.js +36 -36
  197. package/src/stories/Introduction.stories.mdx +207 -207
  198. package/src/stories/Page.vue +88 -88
  199. package/src/stories/assets/code-brackets.svg +0 -0
  200. package/src/stories/assets/colors.svg +0 -0
  201. package/src/stories/assets/comments.svg +0 -0
  202. package/src/stories/assets/direction.svg +0 -0
  203. package/src/stories/assets/flow.svg +0 -0
  204. package/src/stories/assets/plugin.svg +0 -0
  205. package/src/stories/assets/repo.svg +0 -0
  206. package/src/stories/assets/stackalt.svg +0 -0
  207. package/src/stories/header.css +26 -26
  208. package/src/stories/page.css +69 -69
  209. package/src/stories/utils.css +32 -32
@@ -1,3 +1,3 @@
1
- import CSelect from './CSelect.vue'
2
-
1
+ import CSelect from './CSelect.vue'
2
+
3
3
  export default CSelect
@@ -1,40 +1,40 @@
1
- <template>
2
- <div>
3
- <div class="flow-root">
4
- <ul>
5
- <li v-for="timeline in timelineItems" v-bind:key="timeline.label">
6
- <div class="relative pb-1">
7
- <span
8
- class="absolute left-1 top-0.5 -ml-px h-full w-0.5 bg-indigo-600"
9
- aria-hidden="true"
10
- ></span>
11
- <div class="relative ml-3">
12
- <div class="min-w-0 mb-1.5">
13
- <div>
14
- <p class="text-sm text-gray-400">
15
- {{ timeline.label }}
16
- </p>
17
- </div>
18
- <div><span class="text-sm text-gray-400">12/25</span></div>
19
- </div>
20
- </div>
21
- </div>
22
- </li>
23
- </ul>
24
- </div>
25
- </div>
26
- </template>
27
-
28
- <script>
29
- export default {
30
- name: "CSmallTimeline",
31
- props: {
32
- timelineItems: {
33
- type: Array,
34
- required: true,
35
- },
36
- },
37
- };
38
- </script>
39
-
40
- <style></style>
1
+ <template>
2
+ <div>
3
+ <div class="flow-root">
4
+ <ul>
5
+ <li v-for="timeline in timelineItems" v-bind:key="timeline.label">
6
+ <div class="relative pb-1">
7
+ <span
8
+ class="absolute left-1 top-0.5 -ml-px h-full w-0.5 bg-indigo-600"
9
+ aria-hidden="true"
10
+ ></span>
11
+ <div class="relative ml-3">
12
+ <div class="min-w-0 mb-1.5">
13
+ <div>
14
+ <p class="text-sm text-gray-400">
15
+ {{ timeline.label }}
16
+ </p>
17
+ </div>
18
+ <div><span class="text-sm text-gray-400">12/25</span></div>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </li>
23
+ </ul>
24
+ </div>
25
+ </div>
26
+ </template>
27
+
28
+ <script>
29
+ export default {
30
+ name: "CSmallTimeline",
31
+ props: {
32
+ timelineItems: {
33
+ type: Array,
34
+ required: true,
35
+ },
36
+ },
37
+ };
38
+ </script>
39
+
40
+ <style></style>
@@ -1,3 +1,3 @@
1
- import CSmallTimeline from './CSmallTimeline.vue'
2
-
1
+ import CSmallTimeline from './CSmallTimeline.vue'
2
+
3
3
  export default CSmallTimeline
@@ -1,162 +1,162 @@
1
- <template>
2
- <div>
3
- <ul>
4
- <li
5
- v-for="items in listItems"
6
- v-bind:key="items.size"
7
- class="py-4"
8
- :class="{
9
- 'cursor-pointer': items.collapse,
10
- 'border-b border-gray-200': divider === true,
11
- }"
12
- >
13
- <div class="flex items-center justify-between">
14
- <div
15
- class="flex w-full items-center"
16
- v-on="items.collapse ? { click: () => collapseList() } : null"
17
- >
18
- <c-icon
19
- v-if="items.collapse"
20
- :name="showSection ? 'chevron-down' : 'chevron-right'"
21
- type="solid"
22
- class="mr-3 h-5 w-5 shrink-0 text-gray-900"
23
- ></c-icon>
24
-
25
- <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
26
- <c-avatar
27
- v-if="items.image"
28
- :size="items.size"
29
- :rounded="items.rounded"
30
- :image="items.image"
31
- class="shrink-0"
32
- ></c-avatar>
33
- <c-icon
34
- v-else
35
- :name="icon.name"
36
- :type="icon.type"
37
- :class="icon.class"
38
- ></c-icon>
39
- </div>
40
- <div v-else-if="isCustomIcon" class="h-full">
41
- <slot name="customIcon"></slot>
42
- </div>
43
- <c-avatar
44
- v-else
45
- :size="items.size"
46
- :rounded="items.rounded"
47
- :image="items.image"
48
- class="shrink-0"
49
- ></c-avatar>
50
- <div class="ml-3 w-full">
51
- <div class="flex items-center">
52
- <p class="text-sm font-medium text-gray-900">
53
- {{ items.heading }}
54
- </p>
55
- <div class="flex items-center" v-if="sideIcon">
56
- <c-icon
57
- :name="sideIcon.name"
58
- :type="sideIcon.type"
59
- :class="sideIcon.class"
60
- :viewBox="sideIcon.viewBox"
61
- ></c-icon>
62
- <p class="text-sm text-gray-900">{{ sideIcon.text }}</p>
63
- </div>
64
- <div
65
- v-if="items.tagLabels && items.tagLabels.length > 0"
66
- class="flex items-center"
67
- >
68
- <c-tag
69
- v-for="(tagLabel, i) in items.tagLabels"
70
- :key="i"
71
- :label="tagLabel.tagLabel"
72
- :color="tagLabel.tagColor"
73
- class="relative bottom-0.5 ml-2.5"
74
- ></c-tag>
75
- </div>
76
- <c-tag
77
- v-else-if="items.tag"
78
- :label="items.tagLabel"
79
- :color="items.tagColor"
80
- class="relative bottom-0.5 ml-2.5"
81
- ></c-tag>
82
- </div>
83
- <p v-if="items.description" class="mt-1 text-sm text-gray-500">
84
- {{ items.description }}
85
- </p>
86
- </div>
87
- </div>
88
- <button
89
- v-if="items.listIcon"
90
- type="button"
91
- :id="listId ? listId : ''"
92
- class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
93
- @click="deleteItem"
94
- >
95
- <c-icon
96
- name="trash"
97
- type="solid"
98
- class="h-5 w-5 hover:text-red-800"
99
- ></c-icon>
100
- </button>
101
- </div>
102
- <div v-if="showSection" class="mt-3 ml-[88px]">
103
- <slot></slot>
104
- <!-- <div class="mt-2 h-40 w-full bg-gray-100">something</div> -->
105
- </div>
106
- </li>
107
- </ul>
108
- </div>
109
- </template>
110
- <script>
111
- import CAvatar from "../CAvatar/CAvatar.vue";
112
- import CTag from "../CTag/CTag.vue";
113
- import CIcon from "../CIcon/CIcon.vue";
114
- export default {
115
- name: "CStackedList",
116
- components: { CAvatar, CTag, CIcon },
117
- props: {
118
- listItems: {
119
- type: Array,
120
- required: true,
121
- },
122
- divider: {
123
- type: Boolean,
124
- default: true,
125
- },
126
- isIcon: {
127
- type: Boolean,
128
- default: false,
129
- },
130
- isCustomIcon: {
131
- type: Boolean,
132
- default: false,
133
- },
134
- listId: {
135
- type: String,
136
- },
137
- icon: {
138
- type: Object,
139
- },
140
- sideIcon: {
141
- type: Object,
142
- },
143
- },
144
- data() {
145
- return {
146
- showSection: false,
147
- };
148
- },
149
- methods: {
150
- collapseList() {
151
- this.showSection = !this.showSection;
152
- },
153
- deleteItem(item) {
154
- if (this.listId) {
155
- this.$emit("delete-item", this.listId, item);
156
- } else {
157
- this.$emit("delete-item", item);
158
- }
159
- },
160
- },
161
- };
162
- </script>
1
+ <template>
2
+ <div>
3
+ <ul>
4
+ <li
5
+ v-for="items in listItems"
6
+ v-bind:key="items.size"
7
+ class="py-4"
8
+ :class="{
9
+ 'cursor-pointer': items.collapse,
10
+ 'border-b border-gray-200': divider === true,
11
+ }"
12
+ >
13
+ <div class="flex items-center justify-between">
14
+ <div
15
+ class="flex w-full items-center"
16
+ v-on="items.collapse ? { click: () => collapseList() } : null"
17
+ >
18
+ <c-icon
19
+ v-if="items.collapse"
20
+ :name="showSection ? 'chevron-down' : 'chevron-right'"
21
+ type="solid"
22
+ class="mr-3 h-5 w-5 shrink-0 text-gray-900"
23
+ ></c-icon>
24
+
25
+ <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
26
+ <c-avatar
27
+ v-if="items.image"
28
+ :size="items.size"
29
+ :rounded="items.rounded"
30
+ :image="items.image"
31
+ class="shrink-0"
32
+ ></c-avatar>
33
+ <c-icon
34
+ v-else
35
+ :name="icon.name"
36
+ :type="icon.type"
37
+ :class="icon.class"
38
+ ></c-icon>
39
+ </div>
40
+ <div v-else-if="isCustomIcon" class="h-full">
41
+ <slot name="customIcon"></slot>
42
+ </div>
43
+ <c-avatar
44
+ v-else
45
+ :size="items.size"
46
+ :rounded="items.rounded"
47
+ :image="items.image"
48
+ class="shrink-0"
49
+ ></c-avatar>
50
+ <div class="ml-3 w-full">
51
+ <div class="flex items-center">
52
+ <p class="text-sm font-medium text-gray-900">
53
+ {{ items.heading }}
54
+ </p>
55
+ <div class="flex items-center" v-if="sideIcon">
56
+ <c-icon
57
+ :name="sideIcon.name"
58
+ :type="sideIcon.type"
59
+ :class="sideIcon.class"
60
+ :viewBox="sideIcon.viewBox"
61
+ ></c-icon>
62
+ <p class="text-sm text-gray-900">{{ sideIcon.text }}</p>
63
+ </div>
64
+ <div
65
+ v-if="items.tagLabels && items.tagLabels.length > 0"
66
+ class="flex items-center"
67
+ >
68
+ <c-tag
69
+ v-for="(tagLabel, i) in items.tagLabels"
70
+ :key="i"
71
+ :label="tagLabel.tagLabel"
72
+ :color="tagLabel.tagColor"
73
+ class="relative bottom-0.5 ml-2.5"
74
+ ></c-tag>
75
+ </div>
76
+ <c-tag
77
+ v-else-if="items.tag"
78
+ :label="items.tagLabel"
79
+ :color="items.tagColor"
80
+ class="relative bottom-0.5 ml-2.5"
81
+ ></c-tag>
82
+ </div>
83
+ <p v-if="items.description" class="mt-1 text-sm text-gray-500">
84
+ {{ items.description }}
85
+ </p>
86
+ </div>
87
+ </div>
88
+ <button
89
+ v-if="items.listIcon"
90
+ type="button"
91
+ :id="listId ? listId : ''"
92
+ class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
93
+ @click="deleteItem"
94
+ >
95
+ <c-icon
96
+ name="trash"
97
+ type="solid"
98
+ class="h-5 w-5 hover:text-red-800"
99
+ ></c-icon>
100
+ </button>
101
+ </div>
102
+ <div v-if="showSection" class="mt-3 ml-[88px]">
103
+ <slot></slot>
104
+ <!-- <div class="mt-2 h-40 w-full bg-gray-100">something</div> -->
105
+ </div>
106
+ </li>
107
+ </ul>
108
+ </div>
109
+ </template>
110
+ <script>
111
+ import CAvatar from "../CAvatar/CAvatar.vue";
112
+ import CTag from "../CTag/CTag.vue";
113
+ import CIcon from "../CIcon/CIcon.vue";
114
+ export default {
115
+ name: "CStackedList",
116
+ components: { CAvatar, CTag, CIcon },
117
+ props: {
118
+ listItems: {
119
+ type: Array,
120
+ required: true,
121
+ },
122
+ divider: {
123
+ type: Boolean,
124
+ default: true,
125
+ },
126
+ isIcon: {
127
+ type: Boolean,
128
+ default: false,
129
+ },
130
+ isCustomIcon: {
131
+ type: Boolean,
132
+ default: false,
133
+ },
134
+ listId: {
135
+ type: String,
136
+ },
137
+ icon: {
138
+ type: Object,
139
+ },
140
+ sideIcon: {
141
+ type: Object,
142
+ },
143
+ },
144
+ data() {
145
+ return {
146
+ showSection: false,
147
+ };
148
+ },
149
+ methods: {
150
+ collapseList() {
151
+ this.showSection = !this.showSection;
152
+ },
153
+ deleteItem(item) {
154
+ if (this.listId) {
155
+ this.$emit("delete-item", this.listId, item);
156
+ } else {
157
+ this.$emit("delete-item", item);
158
+ }
159
+ },
160
+ },
161
+ };
162
+ </script>
@@ -1,3 +1,3 @@
1
- import CStackedList from './CStackedList.vue'
2
-
1
+ import CStackedList from './CStackedList.vue'
2
+
3
3
  export default CStackedList