classcard-ui 0.2.1069 → 0.2.1071

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 (190) hide show
  1. package/README.md +24 -24
  2. package/dist/classcard-ui.common.js +62 -59
  3. package/dist/classcard-ui.common.js.map +1 -1
  4. package/dist/classcard-ui.umd.js +62 -59
  5. package/dist/classcard-ui.umd.js.map +1 -1
  6. package/dist/classcard-ui.umd.min.js +1 -1
  7. package/dist/classcard-ui.umd.min.js.map +1 -1
  8. package/package.json +82 -82
  9. package/src/App.vue +16 -16
  10. package/src/components/CAlerts/CAlerts.vue +70 -70
  11. package/src/components/CAlerts/index.js +2 -2
  12. package/src/components/CAnchorTabs/CAnchorTabs.vue +96 -96
  13. package/src/components/CAnchorTabs/index.js +2 -2
  14. package/src/components/CAnchorTag/CAnchorTag.vue +62 -62
  15. package/src/components/CAnchorTag/index.js +2 -2
  16. package/src/components/CAvatar/CAvatar.vue +212 -212
  17. package/src/components/CAvatar/index.js +2 -2
  18. package/src/components/CAvatarGroup/CAvatarGroup.vue +145 -145
  19. package/src/components/CAvatarGroup/index.js +2 -2
  20. package/src/components/CBasicTable/CBasicTable.vue +184 -184
  21. package/src/components/CBasicTable/index.js +2 -2
  22. package/src/components/CBreadcrumbs/CBreadcrumbs.vue +38 -38
  23. package/src/components/CBreadcrumbs/index.js +2 -2
  24. package/src/components/CButton/CButton.vue +152 -152
  25. package/src/components/CButton/index.js +2 -2
  26. package/src/components/CButtonGroup/CButtonGroup.vue +118 -118
  27. package/src/components/CButtonGroup/index.js +2 -2
  28. package/src/components/CButtonIcon/CButtonIcon.vue +117 -117
  29. package/src/components/CButtonIcon/index.js +2 -2
  30. package/src/components/CButtonLink/CButtonLink.vue +39 -39
  31. package/src/components/CButtonLink/index.js +2 -2
  32. package/src/components/CButtonSelect/CButtonSelect.vue +134 -134
  33. package/src/components/CButtonSelect/index.js +2 -2
  34. package/src/components/CButtonSelectBorder/CButtonSelectBorder.vue +135 -135
  35. package/src/components/CButtonSelectBorder/index.js +3 -3
  36. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +135 -135
  37. package/src/components/CButtonWithDropdown/index.js +2 -2
  38. package/src/components/CCalendar/CCalendar.vue +410 -410
  39. package/src/components/CCalendar/index.js +3 -3
  40. package/src/components/CCard/CCard.vue +49 -49
  41. package/src/components/CCard/index.js +2 -2
  42. package/src/components/CCheckbox/CCheckbox.vue +123 -123
  43. package/src/components/CCheckbox/index.js +2 -2
  44. package/src/components/CCircularButton/CCircularButton.vue +53 -53
  45. package/src/components/CCircularButton/index.js +2 -2
  46. package/src/components/CCollapsibleSection/CCollapsibleSection.vue +101 -101
  47. package/src/components/CCollapsibleSection/index.js +2 -2
  48. package/src/components/CColorDots/CColorDots.vue +51 -51
  49. package/src/components/CColorDots/index.js +3 -3
  50. package/src/components/CConfirmActionModal/CConfirmActionModal.vue +180 -180
  51. package/src/components/CConfirmActionModal/index.js +3 -3
  52. package/src/components/CDatepicker/CDatepicker.vue +201 -201
  53. package/src/components/CDatepicker/index.js +2 -2
  54. package/src/components/CDualSelect/CDualSelect.vue +193 -193
  55. package/src/components/CDualSelect/index.js +2 -2
  56. package/src/components/CEditor/CEditor.vue +98 -98
  57. package/src/components/CEditor/index.js +2 -2
  58. package/src/components/CFormSectionHeading/CFormSectionHeading.vue +53 -53
  59. package/src/components/CFormSectionHeading/index.js +2 -2
  60. package/src/components/CGroupedSelect/CGroupedSelect.vue +245 -245
  61. package/src/components/CGroupedSelect/index.js +3 -3
  62. package/src/components/CIcon/CIcon.vue +91 -91
  63. package/src/components/CIcon/index.js +2 -2
  64. package/src/components/CIconDropdown/CIconDropdown.vue +146 -146
  65. package/src/components/CIconDropdown/index.js +2 -2
  66. package/src/components/CInput/CInput.vue +134 -134
  67. package/src/components/CInput/index.js +2 -2
  68. package/src/components/CInputAddon/CInputAddon.vue +228 -228
  69. package/src/components/CInputAddon/index.js +2 -2
  70. package/src/components/CInputEmail/CInputEmail.vue +93 -93
  71. package/src/components/CInputEmail/index.js +2 -2
  72. package/src/components/CInsetTabs/CInsetTabs.vue +88 -88
  73. package/src/components/CInsetTabs/index.js +3 -3
  74. package/src/components/CModalHeading/CModalHeading.vue +22 -22
  75. package/src/components/CModalHeading/index.js +2 -2
  76. package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue +70 -70
  77. package/src/components/CModuleHelpLinks/index.js +3 -3
  78. package/src/components/CMultiselect/CMultiselect.vue +615 -615
  79. package/src/components/CMultiselect/index.js +2 -2
  80. package/src/components/CMultiselectr/CMultiselectr.vue +44 -44
  81. package/src/components/CMultiselectr/index.js +2 -2
  82. package/src/components/CPageHeading/CPageHeading.vue +56 -56
  83. package/src/components/CPageHeading/index.js +2 -2
  84. package/src/components/CPagination/CPagination.vue +233 -233
  85. package/src/components/CPagination/index.js +2 -2
  86. package/src/components/CPhoneNumber/CPhoneNumber.vue +114 -114
  87. package/src/components/CPhoneNumber/index.js +2 -2
  88. package/src/components/CProgress/CProgress.vue +57 -57
  89. package/src/components/CProgress/index.js +2 -2
  90. package/src/components/CRadio/CRadio.vue +126 -126
  91. package/src/components/CRadio/index.js +2 -2
  92. package/src/components/CRangeSlider/CRangeSlider.vue +55 -55
  93. package/src/components/CRangeSlider/index.js +2 -2
  94. package/src/components/CReorderableStackedList/CReorderableStackedList.vue +94 -94
  95. package/src/components/CReorderableStackedList/index.js +2 -2
  96. package/src/components/CSelect/CSelect.vue +539 -539
  97. package/src/components/CSelect/index.js +2 -2
  98. package/src/components/CSmallTimeline/CSmallTimeline.vue +40 -40
  99. package/src/components/CSmallTimeline/index.js +2 -2
  100. package/src/components/CStackedList/CStackedList.vue +150 -150
  101. package/src/components/CStackedList/index.js +2 -2
  102. package/src/components/CStats/CStats.vue +116 -116
  103. package/src/components/CStats/index.js +2 -2
  104. package/src/components/CSwitch/CSwitch.vue +176 -176
  105. package/src/components/CSwitch/index.js +2 -2
  106. package/src/components/CTabLazy/CTabLazy.vue +63 -63
  107. package/src/components/CTabLazy/index.js +2 -2
  108. package/src/components/CTable/CTable.vue +671 -671
  109. package/src/components/CTable/index.js +2 -2
  110. package/src/components/CTabs/CTabs.vue +169 -169
  111. package/src/components/CTabs/index.js +2 -2
  112. package/src/components/CTag/CTag.vue +59 -59
  113. package/src/components/CTag/index.js +2 -2
  114. package/src/components/CTextarea/CTextarea.vue +107 -107
  115. package/src/components/CTextarea/index.js +2 -2
  116. package/src/components/CTimeline/CTimeline.vue +237 -237
  117. package/src/components/CTimeline/index.js +2 -2
  118. package/src/components/CUpload/CUpload.vue +267 -267
  119. package/src/components/CUpload/index.js +2 -2
  120. package/src/components/index.js +53 -53
  121. package/src/icons.js +459 -453
  122. package/src/main.js +22 -22
  123. package/src/stories/CAlerts.stories.js +37 -37
  124. package/src/stories/CAnchorTabs.stories.js +29 -29
  125. package/src/stories/CAnchorTag.stories.js +36 -36
  126. package/src/stories/CAvatar.stories.js +38 -38
  127. package/src/stories/CAvatarGroup.stories.js +100 -100
  128. package/src/stories/CBasicTable.stories.js +316 -316
  129. package/src/stories/CBreadcrumbs.stories.js +24 -24
  130. package/src/stories/CButton.stories.js +47 -47
  131. package/src/stories/CButtonGroup.stories.js +33 -33
  132. package/src/stories/CButtonIcon.stories.js +27 -27
  133. package/src/stories/CButtonLink.stories.js +24 -24
  134. package/src/stories/CButtonSelect.stories.js +41 -41
  135. package/src/stories/CButtonSelectBorder.stories.js +48 -48
  136. package/src/stories/CButtonWithDropdown.stories.js +41 -41
  137. package/src/stories/CCalendar.stories.js +16 -16
  138. package/src/stories/CCard.stories.js +30 -30
  139. package/src/stories/CCheckbox.stories.js +29 -29
  140. package/src/stories/CCircularButton.stories.js +29 -29
  141. package/src/stories/CCollapsibleSection.stories.js +28 -28
  142. package/src/stories/CColorDots.stories.js +28 -28
  143. package/src/stories/CConfirmActionModal.stories.js +59 -59
  144. package/src/stories/CDatepicker.stories.js +30 -30
  145. package/src/stories/CDualSelect.stories.js +29 -29
  146. package/src/stories/CEditor.stories.js +30 -30
  147. package/src/stories/CFormSectionHeading.stories.js +34 -34
  148. package/src/stories/CGroupedSelect.stories.js +71 -71
  149. package/src/stories/CIcon.stories.js +28 -28
  150. package/src/stories/CIconDropdown.stories.js +45 -45
  151. package/src/stories/CInput.stories.js +36 -36
  152. package/src/stories/CInputAddon.stories.js +37 -37
  153. package/src/stories/CInputEmail.stories.js +27 -27
  154. package/src/stories/CInsetTabs.stories.js +38 -38
  155. package/src/stories/CModalHeading.stories.js +25 -25
  156. package/src/stories/CModuleHelpLinks.stories.js +25 -25
  157. package/src/stories/CMultiselect.stories.js +167 -167
  158. package/src/stories/CMultiselectr.stories.js +23 -23
  159. package/src/stories/CPageHeading.stories.js +32 -32
  160. package/src/stories/CPagination.stories.js +30 -30
  161. package/src/stories/CPhoneNumber.stories.js +29 -29
  162. package/src/stories/CProgress.stories.js +23 -23
  163. package/src/stories/CRadio.stories.js +36 -36
  164. package/src/stories/CRangeSlider.stories.js +23 -23
  165. package/src/stories/CReorderableStackedList.stories.js +23 -23
  166. package/src/stories/CSelect.stories.js +109 -109
  167. package/src/stories/CSmallTimeline.stories.js +26 -26
  168. package/src/stories/CStackedList.stories.js +37 -37
  169. package/src/stories/CStats.stories.js +33 -33
  170. package/src/stories/CSwitch.stories.js +28 -28
  171. package/src/stories/CTabLazy.stories.js +26 -26
  172. package/src/stories/CTable.stories.js +169 -169
  173. package/src/stories/CTabs.stories.js +36 -36
  174. package/src/stories/CTag.stories.js +34 -34
  175. package/src/stories/CTextarea.stories.js +32 -32
  176. package/src/stories/CTimeline.stories.js +26 -26
  177. package/src/stories/CUpload.stories.js +36 -36
  178. package/src/stories/Introduction.stories.mdx +207 -207
  179. package/src/stories/Page.vue +88 -88
  180. package/src/stories/assets/code-brackets.svg +0 -0
  181. package/src/stories/assets/colors.svg +0 -0
  182. package/src/stories/assets/comments.svg +0 -0
  183. package/src/stories/assets/direction.svg +0 -0
  184. package/src/stories/assets/flow.svg +0 -0
  185. package/src/stories/assets/plugin.svg +0 -0
  186. package/src/stories/assets/repo.svg +0 -0
  187. package/src/stories/assets/stackalt.svg +0 -0
  188. package/src/stories/header.css +26 -26
  189. package/src/stories/page.css +69 -69
  190. package/src/stories/utils.css +17 -17
@@ -1,88 +1,88 @@
1
- <template>
2
- <div>
3
- <nav
4
- class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
5
- aria-label="Tabs"
6
- >
7
- <!-- @keydown.arrow-left="
8
- $emit(
9
- 'update-tab',
10
- index === 0 ? tabOption.label : tabOptions[index - 1].label
11
- )
12
- "
13
- @keydown.arrow-right="
14
- $emit(
15
- 'update-tab',
16
- index === 0
17
- ? tabOptions.find((tab) => tab.label !== tabOption.label).label
18
- : tabOptions[index - 1].label
19
- )
20
- " -->
21
- <button
22
- v-for="(tabOption, index) in tabOptions"
23
- :key="index"
24
- x-ref="dates"
25
- class="focus:outline-none flex min-w-0 flex-grow rounded-md focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
26
- :tabindex="currentTab === tabOption.label ? '0' : '-1'"
27
- @click="handleButtonClick(tabOption)"
28
- >
29
- <span
30
- x-show="true"
31
- class="flex min-w-0 flex-grow items-center justify-center space-x-2 rounded-md p-1.5 text-sm font-medium lg:pl-2.5 lg:pr-3.5"
32
- :class="
33
- currentTab === tabOption.label
34
- ? 'ring-black bg-white shadow-sm ring-1 ring-opacity-5'
35
- : ''
36
- "
37
- >
38
- <c-icon
39
- :type="tabOption.icon.type"
40
- :class="
41
- currentTab === tabOption.label
42
- ? 'text-indigo-700'
43
- : 'text-gray-400'
44
- "
45
- class="h-5 w-5"
46
- :name="tabOption.icon.name"
47
- :viewBox="tabOption.icon.viewBox"
48
- ></c-icon>
49
- <span
50
- v-if="tabOption.showLabel"
51
- :class="`${
52
- currentTab === tabOption.label
53
- ? 'text-gray-900'
54
- : 'text-gray-600 group-hover:text-gray-900'
55
- } `"
56
- >{{ tabOption.label }}</span
57
- >
58
- </span>
59
- </button>
60
- </nav>
61
- </div>
62
- </template>
63
-
64
- <script>
65
- import CIcon from "../CIcon/CIcon.vue";
66
-
67
- export default {
68
- name: "CInsetTabs",
69
- components: {
70
- CIcon,
71
- },
72
- props: {
73
- currentTab: {
74
- type: String,
75
- },
76
- tabOptions: {
77
- type: Array,
78
- },
79
- },
80
- methods: {
81
- handleButtonClick(tabOption) {
82
- this.$emit("update-tab", tabOption.label);
83
- },
84
- },
85
- };
86
- </script>
87
-
88
- <style></style>
1
+ <template>
2
+ <div>
3
+ <nav
4
+ class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
5
+ aria-label="Tabs"
6
+ >
7
+ <!-- @keydown.arrow-left="
8
+ $emit(
9
+ 'update-tab',
10
+ index === 0 ? tabOption.label : tabOptions[index - 1].label
11
+ )
12
+ "
13
+ @keydown.arrow-right="
14
+ $emit(
15
+ 'update-tab',
16
+ index === 0
17
+ ? tabOptions.find((tab) => tab.label !== tabOption.label).label
18
+ : tabOptions[index - 1].label
19
+ )
20
+ " -->
21
+ <button
22
+ v-for="(tabOption, index) in tabOptions"
23
+ :key="index"
24
+ x-ref="dates"
25
+ class="focus:outline-none flex min-w-0 flex-grow rounded-md focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
26
+ :tabindex="currentTab === tabOption.label ? '0' : '-1'"
27
+ @click="handleButtonClick(tabOption)"
28
+ >
29
+ <span
30
+ x-show="true"
31
+ class="flex min-w-0 flex-grow items-center justify-center space-x-2 rounded-md p-1.5 text-sm font-medium lg:pl-2.5 lg:pr-3.5"
32
+ :class="
33
+ currentTab === tabOption.label
34
+ ? 'ring-black bg-white shadow-sm ring-1 ring-opacity-5'
35
+ : ''
36
+ "
37
+ >
38
+ <c-icon
39
+ :type="tabOption.icon.type"
40
+ :class="
41
+ currentTab === tabOption.label
42
+ ? 'text-indigo-700'
43
+ : 'text-gray-400'
44
+ "
45
+ class="h-5 w-5"
46
+ :name="tabOption.icon.name"
47
+ :viewBox="tabOption.icon.viewBox"
48
+ ></c-icon>
49
+ <span
50
+ v-if="tabOption.showLabel"
51
+ :class="`${
52
+ currentTab === tabOption.label
53
+ ? 'text-gray-900'
54
+ : 'text-gray-600 group-hover:text-gray-900'
55
+ } `"
56
+ >{{ tabOption.label }}</span
57
+ >
58
+ </span>
59
+ </button>
60
+ </nav>
61
+ </div>
62
+ </template>
63
+
64
+ <script>
65
+ import CIcon from "../CIcon/CIcon.vue";
66
+
67
+ export default {
68
+ name: "CInsetTabs",
69
+ components: {
70
+ CIcon,
71
+ },
72
+ props: {
73
+ currentTab: {
74
+ type: String,
75
+ },
76
+ tabOptions: {
77
+ type: Array,
78
+ },
79
+ },
80
+ methods: {
81
+ handleButtonClick(tabOption) {
82
+ this.$emit("update-tab", tabOption.label);
83
+ },
84
+ },
85
+ };
86
+ </script>
87
+
88
+ <style></style>
@@ -1,3 +1,3 @@
1
- import CInsetTabs from "./CInsetTabs.vue";
2
-
3
- export default CInsetTabs;
1
+ import CInsetTabs from "./CInsetTabs.vue";
2
+
3
+ export default CInsetTabs;
@@ -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,70 +1,70 @@
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
- class="mt-2 flex items-center text-sm text-indigo-600"
16
- v-if="helpArticle"
17
- >
18
- <c-icon class="mr-1.5 h-5 w-5" name="book-open" type="solid"></c-icon>
19
- <a
20
- :href="helpArticle"
21
- target="_blank"
22
- class="font-medium text-indigo-600 hover:underline"
23
- >
24
- {{ articleTitle }}
25
- </a>
26
- </div>
27
- <div
28
- class="mt-2 flex items-center text-sm text-indigo-600"
29
- v-if="helpVideo"
30
- >
31
- <c-icon
32
- class="mr-1.5 h-5 w-5"
33
- name="video-camera"
34
- type="solid"
35
- ></c-icon>
36
- <a
37
- :href="helpVideo"
38
- target="_blank"
39
- class="font-medium text-indigo-600 hover:underline"
40
- >
41
- {{ videoTitle }}
42
- </a>
43
- </div>
44
- </div>
45
- </div>
46
- </template>
47
-
48
- <script>
49
- import CIcon from "../CIcon/CIcon.vue";
50
- export default {
51
- name: "CModuleHelpLinks",
52
- components: { CIcon },
53
- props: {
54
- description: { type: String },
55
- helpVideo: {
56
- type: String,
57
- },
58
- helpArticle: { type: String },
59
- articleTitle: {
60
- type: String,
61
- default: "How to get started",
62
- },
63
- videoTitle: {
64
- type: String,
65
- default: "Watch a video",
66
- },
67
- },
68
- methods: {},
69
- };
70
- </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
+ class="mt-2 flex items-center text-sm text-indigo-600"
16
+ v-if="helpArticle"
17
+ >
18
+ <c-icon class="mr-1.5 h-5 w-5" name="book-open" type="solid"></c-icon>
19
+ <a
20
+ :href="helpArticle"
21
+ target="_blank"
22
+ class="font-medium text-indigo-600 hover:underline"
23
+ >
24
+ {{ articleTitle }}
25
+ </a>
26
+ </div>
27
+ <div
28
+ class="mt-2 flex items-center text-sm text-indigo-600"
29
+ v-if="helpVideo"
30
+ >
31
+ <c-icon
32
+ class="mr-1.5 h-5 w-5"
33
+ name="video-camera"
34
+ type="solid"
35
+ ></c-icon>
36
+ <a
37
+ :href="helpVideo"
38
+ target="_blank"
39
+ class="font-medium text-indigo-600 hover:underline"
40
+ >
41
+ {{ videoTitle }}
42
+ </a>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </template>
47
+
48
+ <script>
49
+ import CIcon from "../CIcon/CIcon.vue";
50
+ export default {
51
+ name: "CModuleHelpLinks",
52
+ components: { CIcon },
53
+ props: {
54
+ description: { type: String },
55
+ helpVideo: {
56
+ type: String,
57
+ },
58
+ helpArticle: { type: String },
59
+ articleTitle: {
60
+ type: String,
61
+ default: "How to get started",
62
+ },
63
+ videoTitle: {
64
+ type: String,
65
+ default: "Watch a video",
66
+ },
67
+ },
68
+ methods: {},
69
+ };
70
+ </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;