classcard-ui 0.2.1509 → 0.2.1510

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 (217) hide show
  1. package/README.md +24 -24
  2. package/dist/classcard-ui.common.js +90 -89
  3. package/dist/classcard-ui.common.js.map +1 -1
  4. package/dist/classcard-ui.css +1 -1
  5. package/dist/classcard-ui.umd.js +90 -89
  6. package/dist/classcard-ui.umd.js.map +1 -1
  7. package/dist/classcard-ui.umd.min.js +1 -1
  8. package/dist/classcard-ui.umd.min.js.map +1 -1
  9. package/package.json +84 -84
  10. package/src/.DS_Store +0 -0
  11. package/src/App.vue +16 -16
  12. package/src/colorConfig.js +52 -52
  13. package/src/components/CAlertModal/CAlertModal.vue +181 -181
  14. package/src/components/CAlertModal/index.js +3 -3
  15. package/src/components/CAlerts/CAlerts.vue +114 -114
  16. package/src/components/CAlerts/index.js +2 -2
  17. package/src/components/CAnchorTabs/CAnchorTabs.vue +100 -100
  18. package/src/components/CAnchorTabs/index.js +2 -2
  19. package/src/components/CAnchorTag/CAnchorTag.vue +84 -84
  20. package/src/components/CAnchorTag/index.js +2 -2
  21. package/src/components/CAvatar/CAvatar.vue +231 -231
  22. package/src/components/CAvatar/index.js +2 -2
  23. package/src/components/CAvatarGroup/CAvatarGroup.vue +213 -213
  24. package/src/components/CAvatarGroup/index.js +2 -2
  25. package/src/components/CBasicTable/CBasicTable.vue +184 -184
  26. package/src/components/CBasicTable/index.js +2 -2
  27. package/src/components/CBreadcrumbs/CBreadcrumbs.vue +38 -38
  28. package/src/components/CBreadcrumbs/index.js +2 -2
  29. package/src/components/CButton/CButton.vue +239 -239
  30. package/src/components/CButton/index.js +2 -2
  31. package/src/components/CButtonGroup/CButtonGroup.vue +155 -155
  32. package/src/components/CButtonGroup/index.js +2 -2
  33. package/src/components/CButtonIcon/CButtonIcon.vue +166 -166
  34. package/src/components/CButtonIcon/index.js +2 -2
  35. package/src/components/CButtonLink/CButtonLink.vue +43 -43
  36. package/src/components/CButtonLink/index.js +2 -2
  37. package/src/components/CButtonSelect/CButtonSelect.vue +186 -186
  38. package/src/components/CButtonSelect/index.js +2 -2
  39. package/src/components/CButtonSelectBorder/CButtonSelectBorder.vue +265 -265
  40. package/src/components/CButtonSelectBorder/index.js +3 -3
  41. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +208 -208
  42. package/src/components/CButtonWithDropdown/index.js +2 -2
  43. package/src/components/CCalendar/CCalendar.vue +443 -443
  44. package/src/components/CCalendar/index.js +3 -3
  45. package/src/components/CCard/CCard.vue +53 -53
  46. package/src/components/CCard/index.js +2 -2
  47. package/src/components/CCheckbox/CCheckbox.vue +200 -200
  48. package/src/components/CCheckbox/index.js +2 -2
  49. package/src/components/CCircularButton/CCircularButton.vue +57 -57
  50. package/src/components/CCircularButton/index.js +2 -2
  51. package/src/components/CCollapsibleSection/CCollapsibleSection.vue +121 -121
  52. package/src/components/CCollapsibleSection/index.js +2 -2
  53. package/src/components/CColorDots/CColorDots.vue +52 -52
  54. package/src/components/CColorDots/index.js +3 -3
  55. package/src/components/CConfirmActionModal/CConfirmActionModal.vue +290 -290
  56. package/src/components/CConfirmActionModal/index.js +3 -3
  57. package/src/components/CDatepicker/CDatepicker.vue +235 -235
  58. package/src/components/CDatepicker/index.js +2 -2
  59. package/src/components/CDualSelect/CDualSelect.vue +193 -193
  60. package/src/components/CDualSelect/index.js +2 -2
  61. package/src/components/CEditor/CEditor.vue +137 -137
  62. package/src/components/CEditor/index.js +6 -6
  63. package/src/components/CEditor/quill-font-setup.js +133 -133
  64. package/src/components/CFormSectionHeading/CFormSectionHeading.vue +76 -76
  65. package/src/components/CFormSectionHeading/index.js +2 -2
  66. package/src/components/CGroupedFilterDropdown/CGroupedFilterDropdown.vue +331 -331
  67. package/src/components/CGroupedFilterDropdown/index.js +2 -2
  68. package/src/components/CGroupedSelect/CGroupedSelect.vue +393 -393
  69. package/src/components/CGroupedSelect/index.js +3 -3
  70. package/src/components/CIcon/CIcon.vue +112 -112
  71. package/src/components/CIcon/index.js +2 -2
  72. package/src/components/CIconDropdown/CIconDropdown.vue +206 -206
  73. package/src/components/CIconDropdown/index.js +2 -2
  74. package/src/components/CIconSelect/CIconSelect.vue +182 -182
  75. package/src/components/CIconSelect/index.js +3 -3
  76. package/src/components/CInput/CInput.vue +227 -227
  77. package/src/components/CInput/index.js +2 -2
  78. package/src/components/CInputAddon/CInputAddon.vue +297 -297
  79. package/src/components/CInputAddon/index.js +2 -2
  80. package/src/components/CInputEmail/CInputEmail.vue +107 -107
  81. package/src/components/CInputEmail/index.js +2 -2
  82. package/src/components/CInsetTabs/CInsetTabs.vue +222 -222
  83. package/src/components/CInsetTabs/index.js +3 -3
  84. package/src/components/CLinearProgressBar/CLinearProgressBar.vue +35 -35
  85. package/src/components/CLinearProgressBar/index.js +2 -2
  86. package/src/components/CModalHeading/CModalHeading.vue +22 -22
  87. package/src/components/CModalHeading/index.js +2 -2
  88. package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue +88 -88
  89. package/src/components/CModuleHelpLinks/index.js +3 -3
  90. package/src/components/CMultiselect/CMultiselect.vue +1314 -1314
  91. package/src/components/CMultiselect/index.js +2 -2
  92. package/src/components/CMultiselectr/CMultiselectr.vue +44 -44
  93. package/src/components/CMultiselectr/index.js +2 -2
  94. package/src/components/CPageHeading/CPageHeading.vue +83 -83
  95. package/src/components/CPageHeading/index.js +2 -2
  96. package/src/components/CPagination/CPagination.vue +239 -239
  97. package/src/components/CPagination/index.js +2 -2
  98. package/src/components/CPhoneNumber/CPhoneNumber.vue +213 -213
  99. package/src/components/CPhoneNumber/index.js +2 -2
  100. package/src/components/CProgress/CProgress.vue +95 -95
  101. package/src/components/CProgress/index.js +2 -2
  102. package/src/components/CRadio/CRadio.vue +198 -198
  103. package/src/components/CRadio/index.js +2 -2
  104. package/src/components/CRadioGroup/CRadioGroup.vue +96 -96
  105. package/src/components/CRadioGroup/index.js +2 -2
  106. package/src/components/CRangeSlider/CRangeSlider.vue +55 -55
  107. package/src/components/CRangeSlider/index.js +2 -2
  108. package/src/components/CReorderableStackedList/CReorderableStackedList.vue +94 -94
  109. package/src/components/CReorderableStackedList/index.js +2 -2
  110. package/src/components/CSelect/CSelect.vue +1225 -1225
  111. package/src/components/CSelect/index.js +2 -2
  112. package/src/components/CSmallTimeline/CSmallTimeline.vue +40 -40
  113. package/src/components/CSmallTimeline/index.js +2 -2
  114. package/src/components/CStackedList/CStackedList.vue +162 -162
  115. package/src/components/CStackedList/index.js +2 -2
  116. package/src/components/CStats/CStats.vue +157 -157
  117. package/src/components/CStats/index.js +2 -2
  118. package/src/components/CSwitch/CSwitch.vue +200 -200
  119. package/src/components/CSwitch/index.js +2 -2
  120. package/src/components/CTabLazy/CTabLazy.vue +83 -83
  121. package/src/components/CTabLazy/index.js +2 -2
  122. package/src/components/CTable/CTable.vue +1114 -1114
  123. package/src/components/CTable/index.js +2 -2
  124. package/src/components/CTabs/CTabs.vue +250 -250
  125. package/src/components/CTabs/index.js +2 -2
  126. package/src/components/CTag/CTag.vue +109 -109
  127. package/src/components/CTag/index.js +2 -2
  128. package/src/components/CTextarea/CTextarea.vue +118 -118
  129. package/src/components/CTextarea/index.js +2 -2
  130. package/src/components/CTimeline/CTimeline.vue +237 -237
  131. package/src/components/CTimeline/index.js +2 -2
  132. package/src/components/CTokenEditor/CTokenEditor.vue +804 -804
  133. package/src/components/CTokenEditor/index.js +3 -3
  134. package/src/components/CToolTip/CToolTip.vue +108 -108
  135. package/src/components/CToolTip/index.js +3 -3
  136. package/src/components/CUpload/CUpload.vue +332 -332
  137. package/src/components/CUpload/index.js +2 -2
  138. package/src/components/NumberAnimator.vue +112 -112
  139. package/src/components/index.js +60 -60
  140. package/src/helper.js +8 -8
  141. package/src/icons.js +870 -859
  142. package/src/main.js +22 -22
  143. package/src/stories/CAlertModal.stories.js +30 -30
  144. package/src/stories/CAlerts.stories.js +39 -39
  145. package/src/stories/CAnchorTabs.stories.js +29 -29
  146. package/src/stories/CAnchorTag.stories.js +38 -38
  147. package/src/stories/CAvatar.stories.js +38 -38
  148. package/src/stories/CAvatarGroup.stories.js +136 -136
  149. package/src/stories/CBasicTable.stories.js +316 -316
  150. package/src/stories/CBreadcrumbs.stories.js +24 -24
  151. package/src/stories/CButton.stories.js +49 -49
  152. package/src/stories/CButtonGroup.stories.js +43 -43
  153. package/src/stories/CButtonIcon.stories.js +27 -27
  154. package/src/stories/CButtonLink.stories.js +24 -24
  155. package/src/stories/CButtonSelect.stories.js +44 -44
  156. package/src/stories/CButtonSelectBorder.stories.js +56 -56
  157. package/src/stories/CButtonWithDropdown.stories.js +41 -41
  158. package/src/stories/CCalendar.stories.js +16 -16
  159. package/src/stories/CCard.stories.js +30 -30
  160. package/src/stories/CCheckbox.stories.js +38 -38
  161. package/src/stories/CCircularButton.stories.js +29 -29
  162. package/src/stories/CCollapsibleSection.stories.js +29 -29
  163. package/src/stories/CColorDots.stories.js +37 -37
  164. package/src/stories/CConfirmActionModal.stories.js +67 -67
  165. package/src/stories/CDatepicker.stories.js +31 -31
  166. package/src/stories/CDualSelect.stories.js +29 -29
  167. package/src/stories/CEditor.stories.js +36 -36
  168. package/src/stories/CFormSectionHeading.stories.js +37 -37
  169. package/src/stories/CGroupedFilterDropdown.stories.js +131 -131
  170. package/src/stories/CGroupedSelect.stories.js +103 -103
  171. package/src/stories/CIcon.stories.js +31 -31
  172. package/src/stories/CIconDropdown.stories.js +52 -52
  173. package/src/stories/CIconSelect.stories.js +45 -45
  174. package/src/stories/CInput.stories.js +50 -50
  175. package/src/stories/CInputAddon.stories.js +37 -37
  176. package/src/stories/CInputEmail.stories.js +27 -27
  177. package/src/stories/CInsetTabs.stories.js +50 -50
  178. package/src/stories/CLinearProgressBar.stories.js +22 -22
  179. package/src/stories/CModalHeading.stories.js +25 -25
  180. package/src/stories/CModuleHelpLinks.stories.js +25 -25
  181. package/src/stories/CMultiselect.stories.js +146 -146
  182. package/src/stories/CMultiselectr.stories.js +23 -23
  183. package/src/stories/CPageHeading.stories.js +32 -32
  184. package/src/stories/CPagination.stories.js +30 -30
  185. package/src/stories/CPhoneNumber.stories.js +37 -37
  186. package/src/stories/CProgress.stories.js +23 -23
  187. package/src/stories/CRadio.stories.js +44 -44
  188. package/src/stories/CRadioGroup.stories.js +51 -51
  189. package/src/stories/CRangeSlider.stories.js +23 -23
  190. package/src/stories/CReorderableStackedList.stories.js +23 -23
  191. package/src/stories/CSelect.stories.js +157 -157
  192. package/src/stories/CSmallTimeline.stories.js +26 -26
  193. package/src/stories/CStackedList.stories.js +37 -37
  194. package/src/stories/CStats.stories.js +53 -53
  195. package/src/stories/CSwitch.stories.js +28 -28
  196. package/src/stories/CTabLazy.stories.js +42 -42
  197. package/src/stories/CTable.stories.js +203 -203
  198. package/src/stories/CTabs.stories.js +36 -36
  199. package/src/stories/CTag.stories.js +37 -37
  200. package/src/stories/CTextarea.stories.js +32 -32
  201. package/src/stories/CTimeline.stories.js +26 -26
  202. package/src/stories/CTokenEditor.stories.js +136 -136
  203. package/src/stories/CToolTip.stories.js +27 -27
  204. package/src/stories/CUpload.stories.js +36 -36
  205. package/src/stories/Introduction.stories.mdx +207 -207
  206. package/src/stories/Page.vue +88 -88
  207. package/src/stories/assets/code-brackets.svg +0 -0
  208. package/src/stories/assets/colors.svg +0 -0
  209. package/src/stories/assets/comments.svg +0 -0
  210. package/src/stories/assets/direction.svg +0 -0
  211. package/src/stories/assets/flow.svg +0 -0
  212. package/src/stories/assets/plugin.svg +0 -0
  213. package/src/stories/assets/repo.svg +0 -0
  214. package/src/stories/assets/stackalt.svg +0 -0
  215. package/src/stories/header.css +26 -26
  216. package/src/stories/page.css +69 -69
  217. package/src/stories/utils.css +32 -32
@@ -1,35 +1,35 @@
1
- <template>
2
- <div class="flex items-center gap-3">
3
- <div
4
- :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
5
- role="progressbar"
6
- :aria-valuemin="0"
7
- :aria-valuemax="max"
8
- :aria-valuenow="percentage"
9
- :aria-label="ariaLabel"
10
- >
11
- <div
12
- class="h-full origin-left rounded-full transition-transform duration-300"
13
- :class="fillColorClass"
14
- :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
15
- />
16
- </div>
17
-
18
- <span class="text-sm text-gray-500">
19
- {{ percentage + "%" }}
20
- </span>
21
- </div>
22
- </template>
23
-
24
- <script>
25
- export default {
26
- name: "CLinearProgressBar",
27
- props: {
28
- max: { type: Number, default: 100 },
29
- ariaLabel: { type: String, default: "Progress" },
30
- fillColorClass: { type: String, default: "bg-gray-900" },
31
- customClasses: { type: String, default: "" },
32
- percentage: { type: Number, default: 0 },
33
- },
34
- };
35
- </script>
1
+ <template>
2
+ <div class="flex items-center gap-3">
3
+ <div
4
+ :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
5
+ role="progressbar"
6
+ :aria-valuemin="0"
7
+ :aria-valuemax="max"
8
+ :aria-valuenow="percentage"
9
+ :aria-label="ariaLabel"
10
+ >
11
+ <div
12
+ class="h-full origin-left rounded-full transition-transform duration-300"
13
+ :class="fillColorClass"
14
+ :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
15
+ />
16
+ </div>
17
+
18
+ <span class="text-sm text-gray-500">
19
+ {{ percentage + "%" }}
20
+ </span>
21
+ </div>
22
+ </template>
23
+
24
+ <script>
25
+ export default {
26
+ name: "CLinearProgressBar",
27
+ props: {
28
+ max: { type: Number, default: 100 },
29
+ ariaLabel: { type: String, default: "Progress" },
30
+ fillColorClass: { type: String, default: "bg-gray-900" },
31
+ customClasses: { type: String, default: "" },
32
+ percentage: { type: Number, default: 0 },
33
+ },
34
+ };
35
+ </script>
@@ -1,3 +1,3 @@
1
- import CLinearProgressBar from './CLinearProgressBar.vue'
2
-
1
+ import CLinearProgressBar from './CLinearProgressBar.vue'
2
+
3
3
  export default CLinearProgressBar
@@ -1,22 +1,22 @@
1
- <template>
2
- <div>
3
- <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
4
- <h3 class="text-lg leading-6 font-medium text-gray-700">
5
- {{ title }}
6
- </h3>
7
- <p v-if="description" class="max-w-4xl text-sm text-gray-500">
8
- {{ description }}
9
- </p>
10
- </div>
11
- </div>
12
- </template>
13
- <script>
14
- export default {
15
- name: "CModalHeading",
16
- props: {
17
- title: { type: String, required: true },
18
- description: { type: String },
19
- divider: { type: Boolean },
20
- },
21
- };
22
- </script>
1
+ <template>
2
+ <div>
3
+ <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
4
+ <h3 class="text-lg leading-6 font-medium text-gray-700">
5
+ {{ title }}
6
+ </h3>
7
+ <p v-if="description" class="max-w-4xl text-sm text-gray-500">
8
+ {{ description }}
9
+ </p>
10
+ </div>
11
+ </div>
12
+ </template>
13
+ <script>
14
+ export default {
15
+ name: "CModalHeading",
16
+ props: {
17
+ title: { type: String, required: true },
18
+ description: { type: String },
19
+ divider: { type: Boolean },
20
+ },
21
+ };
22
+ </script>
@@ -1,3 +1,3 @@
1
- import CModalHeading from './CModalHeading.vue'
2
-
1
+ import CModalHeading from './CModalHeading.vue'
2
+
3
3
  export default CModalHeading
@@ -1,88 +1,88 @@
1
- <template>
2
- <div>
3
- <div
4
- v-if="description"
5
- class="mt-2 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6"
6
- >
7
- <div class="flex items-center text-sm text-gray-500">
8
- {{ description }}
9
- </div>
10
- </div>
11
- <div
12
- class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6"
13
- >
14
- <div
15
- v-if="helpArticle"
16
- :class="['mt-2 flex items-center text-sm text-indigo-600', helpArticleClass]"
17
- >
18
- <c-icon
19
- v-if="helpArticleIcon"
20
- :class="helpArticleIcon.class"
21
- :name="helpArticleIcon.name"
22
- :type="helpArticleIcon.type"
23
- :viewBox="helpArticleIcon.viewBox"
24
- ></c-icon>
25
- <a
26
- :href="helpArticle"
27
- target="_blank"
28
- class="font-medium text-indigo-600 hover:underline"
29
- >
30
- {{ articleTitle }}
31
- </a>
32
- </div>
33
- <div
34
- class="mt-2 flex items-center text-sm text-indigo-600"
35
- v-if="helpVideo"
36
- >
37
- <c-icon
38
- class="mr-1.5 h-5 w-5"
39
- name="video-camera"
40
- type="solid"
41
- ></c-icon>
42
- <a
43
- :href="helpVideo"
44
- target="_blank"
45
- class="font-medium text-indigo-600 hover:underline"
46
- >
47
- {{ videoTitle }}
48
- </a>
49
- </div>
50
- </div>
51
- </div>
52
- </template>
53
-
54
- <script>
55
- import CIcon from "../CIcon/CIcon.vue";
56
- export default {
57
- name: "CModuleHelpLinks",
58
- components: { CIcon },
59
- props: {
60
- description: { type: String },
61
- helpVideo: {
62
- type: String,
63
- },
64
- helpArticle: { type: String },
65
- articleTitle: {
66
- type: String,
67
- default: "How to get started",
68
- },
69
- videoTitle: {
70
- type: String,
71
- default: "Watch a video",
72
- },
73
- helpArticleClass: {
74
- type: String,
75
- },
76
- helpArticleIcon: {
77
- type: Object,
78
- default: () => ({
79
- name: "book-open",
80
- type: "solid",
81
- class: "mr-1.5 h-5 w-5",
82
- viewBox: "0 0 20 20",
83
- }),
84
- },
85
- },
86
- methods: {},
87
- };
88
- </script>
1
+ <template>
2
+ <div>
3
+ <div
4
+ v-if="description"
5
+ class="mt-2 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6"
6
+ >
7
+ <div class="flex items-center text-sm text-gray-500">
8
+ {{ description }}
9
+ </div>
10
+ </div>
11
+ <div
12
+ class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6"
13
+ >
14
+ <div
15
+ v-if="helpArticle"
16
+ :class="['mt-2 flex items-center text-sm text-indigo-600', helpArticleClass]"
17
+ >
18
+ <c-icon
19
+ v-if="helpArticleIcon"
20
+ :class="helpArticleIcon.class"
21
+ :name="helpArticleIcon.name"
22
+ :type="helpArticleIcon.type"
23
+ :viewBox="helpArticleIcon.viewBox"
24
+ ></c-icon>
25
+ <a
26
+ :href="helpArticle"
27
+ target="_blank"
28
+ class="font-medium text-indigo-600 hover:underline"
29
+ >
30
+ {{ articleTitle }}
31
+ </a>
32
+ </div>
33
+ <div
34
+ class="mt-2 flex items-center text-sm text-indigo-600"
35
+ v-if="helpVideo"
36
+ >
37
+ <c-icon
38
+ class="mr-1.5 h-5 w-5"
39
+ name="video-camera"
40
+ type="solid"
41
+ ></c-icon>
42
+ <a
43
+ :href="helpVideo"
44
+ target="_blank"
45
+ class="font-medium text-indigo-600 hover:underline"
46
+ >
47
+ {{ videoTitle }}
48
+ </a>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </template>
53
+
54
+ <script>
55
+ import CIcon from "../CIcon/CIcon.vue";
56
+ export default {
57
+ name: "CModuleHelpLinks",
58
+ components: { CIcon },
59
+ props: {
60
+ description: { type: String },
61
+ helpVideo: {
62
+ type: String,
63
+ },
64
+ helpArticle: { type: String },
65
+ articleTitle: {
66
+ type: String,
67
+ default: "How to get started",
68
+ },
69
+ videoTitle: {
70
+ type: String,
71
+ default: "Watch a video",
72
+ },
73
+ helpArticleClass: {
74
+ type: String,
75
+ },
76
+ helpArticleIcon: {
77
+ type: Object,
78
+ default: () => ({
79
+ name: "book-open",
80
+ type: "solid",
81
+ class: "mr-1.5 h-5 w-5",
82
+ viewBox: "0 0 20 20",
83
+ }),
84
+ },
85
+ },
86
+ methods: {},
87
+ };
88
+ </script>
@@ -1,3 +1,3 @@
1
- import CModuleHelpLinks from "./CModuleHelpLinks.vue";
2
-
3
- export default CModuleHelpLinks;
1
+ import CModuleHelpLinks from "./CModuleHelpLinks.vue";
2
+
3
+ export default CModuleHelpLinks;