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,55 +1,55 @@
1
- <template>
2
- <div class="flex w-64 m-auto items-center h-32 justify-center">
3
- <div class="py-1 relative min-w-full">
4
- <div class="h-2 bg-gray-200 rounded-full">
5
- <div
6
- class="absolute h-2 rounded-full bg-teal-600 w-0"
7
- style="width: 58.5714%;"
8
- ></div>
9
- <div
10
- class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
11
- unselectable="on"
12
- onselectstart="return false;"
13
- style="left: 58.5714%;"
14
- >
15
- <div class="relative -mt-2 w-1">
16
- <div
17
- class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
18
- style="margin-left: -20.5px;"
19
- >
20
- <div class="relative shadow-md">
21
- <div
22
- class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
23
- >
24
- 92
25
- </div>
26
- <svg
27
- class="absolute text-black w-full h-2 left-0 top-100"
28
- x="0px"
29
- y="0px"
30
- viewBox="0 0 255 255"
31
- xml:space="preserve"
32
- >
33
- <polygon
34
- class="fill-current"
35
- points="0,0 127.5,127.5 255,0"
36
- ></polygon>
37
- </svg>
38
- </div>
39
- </div>
40
- </div>
41
- </div>
42
- <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
43
- <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
44
- 150
45
- </div>
46
- </div>
47
- </div>
48
- </div>
49
- </template>
50
- <script>
51
- export default {
52
- name: "CRangeSlider",
53
- props: {},
54
- };
55
- </script>
1
+ <template>
2
+ <div class="flex w-64 m-auto items-center h-32 justify-center">
3
+ <div class="py-1 relative min-w-full">
4
+ <div class="h-2 bg-gray-200 rounded-full">
5
+ <div
6
+ class="absolute h-2 rounded-full bg-teal-600 w-0"
7
+ style="width: 58.5714%;"
8
+ ></div>
9
+ <div
10
+ class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
11
+ unselectable="on"
12
+ onselectstart="return false;"
13
+ style="left: 58.5714%;"
14
+ >
15
+ <div class="relative -mt-2 w-1">
16
+ <div
17
+ class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
18
+ style="margin-left: -20.5px;"
19
+ >
20
+ <div class="relative shadow-md">
21
+ <div
22
+ class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
23
+ >
24
+ 92
25
+ </div>
26
+ <svg
27
+ class="absolute text-black w-full h-2 left-0 top-100"
28
+ x="0px"
29
+ y="0px"
30
+ viewBox="0 0 255 255"
31
+ xml:space="preserve"
32
+ >
33
+ <polygon
34
+ class="fill-current"
35
+ points="0,0 127.5,127.5 255,0"
36
+ ></polygon>
37
+ </svg>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
43
+ <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
44
+ 150
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </template>
50
+ <script>
51
+ export default {
52
+ name: "CRangeSlider",
53
+ props: {},
54
+ };
55
+ </script>
@@ -1,3 +1,3 @@
1
- import CRangeSlider from './CRangeSlider.vue'
2
-
1
+ import CRangeSlider from './CRangeSlider.vue'
2
+
3
3
  export default CRangeSlider
@@ -1,94 +1,94 @@
1
- <template>
2
- <div>
3
- <ul>
4
- <li
5
- v-for="items in listItems"
6
- v-bind:key="items.size"
7
- class="flex items-center py-3"
8
- :class="{ 'cursor-pointer': items.collapse }"
9
- v-on="items.collapse ? { click: () => collapseList() } : null"
10
- >
11
- <c-icon
12
- v-if="items.collapse"
13
- :name="showSection ? 'chevron-down' : 'chevron-right'"
14
- type="solid"
15
- class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
16
- ></c-icon>
17
- <c-icon
18
- v-if="items.reorder"
19
- name="menu-solid"
20
- type="solid"
21
- :cursorType="cursorType"
22
- class="handle mr-3 h-5 w-5 flex-none text-gray-500"
23
- ></c-icon>
24
- <c-avatar
25
- :size="items.size"
26
- :rounded="items.rounded"
27
- :image="items.image"
28
- :imageClasses="items.imageClasses"
29
- class="flex-none"
30
- ></c-avatar>
31
- <div class="flex min-w-0 flex-1 items-center justify-between">
32
- <div class="ml-3 min-w-0 flex-1">
33
- <div>
34
- <div class="-m-1 flex flex-wrap items-center">
35
- <p class="m-1 text-sm font-medium text-gray-900">
36
- {{ items.heading }}
37
- </p>
38
- <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
39
- <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
40
- <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
41
- <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
42
- </div>
43
- <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
44
- <div v-if="showSection" class="mt-3">
45
- <slot></slot>
46
- </div>
47
- </div>
48
- </div>
49
- <div class="flex flex-none items-center">
50
- <slot name="icons"></slot>
51
- <button
52
- type="button"
53
- v-if="items.listIcon"
54
- @click="$emit('remove')"
55
- class="focus:outline-none"
56
- >
57
- <!-- slot for delete icons -->
58
- <slot name="removeIcons"></slot>
59
- </button>
60
- </div>
61
- </div>
62
- </li>
63
- </ul>
64
- </div>
65
- </template>
66
- <script>
67
- import CAvatar from "../CAvatar/CAvatar.vue";
68
- import CTag from "../CTag/CTag.vue";
69
- import CIcon from "../CIcon/CIcon.vue";
70
- export default {
71
- name: "CReorderableStackedList",
72
- components: { CAvatar, CTag, CIcon },
73
- props: {
74
- listItems: {
75
- type: Array,
76
- required: true,
77
- },
78
- cursorType: {
79
- type: String,
80
- default: "cursor-move",
81
- },
82
- },
83
- data() {
84
- return {
85
- showSection: false,
86
- };
87
- },
88
- methods: {
89
- collapseList() {
90
- this.showSection = !this.showSection;
91
- },
92
- },
93
- };
94
- </script>
1
+ <template>
2
+ <div>
3
+ <ul>
4
+ <li
5
+ v-for="items in listItems"
6
+ v-bind:key="items.size"
7
+ class="flex items-center py-3"
8
+ :class="{ 'cursor-pointer': items.collapse }"
9
+ v-on="items.collapse ? { click: () => collapseList() } : null"
10
+ >
11
+ <c-icon
12
+ v-if="items.collapse"
13
+ :name="showSection ? 'chevron-down' : 'chevron-right'"
14
+ type="solid"
15
+ class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
16
+ ></c-icon>
17
+ <c-icon
18
+ v-if="items.reorder"
19
+ name="menu-solid"
20
+ type="solid"
21
+ :cursorType="cursorType"
22
+ class="handle mr-3 h-5 w-5 flex-none text-gray-500"
23
+ ></c-icon>
24
+ <c-avatar
25
+ :size="items.size"
26
+ :rounded="items.rounded"
27
+ :image="items.image"
28
+ :imageClasses="items.imageClasses"
29
+ class="flex-none"
30
+ ></c-avatar>
31
+ <div class="flex min-w-0 flex-1 items-center justify-between">
32
+ <div class="ml-3 min-w-0 flex-1">
33
+ <div>
34
+ <div class="-m-1 flex flex-wrap items-center">
35
+ <p class="m-1 text-sm font-medium text-gray-900">
36
+ {{ items.heading }}
37
+ </p>
38
+ <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
39
+ <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
40
+ <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
41
+ <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
42
+ </div>
43
+ <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
44
+ <div v-if="showSection" class="mt-3">
45
+ <slot></slot>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="flex flex-none items-center">
50
+ <slot name="icons"></slot>
51
+ <button
52
+ type="button"
53
+ v-if="items.listIcon"
54
+ @click="$emit('remove')"
55
+ class="focus:outline-none"
56
+ >
57
+ <!-- slot for delete icons -->
58
+ <slot name="removeIcons"></slot>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </li>
63
+ </ul>
64
+ </div>
65
+ </template>
66
+ <script>
67
+ import CAvatar from "../CAvatar/CAvatar.vue";
68
+ import CTag from "../CTag/CTag.vue";
69
+ import CIcon from "../CIcon/CIcon.vue";
70
+ export default {
71
+ name: "CReorderableStackedList",
72
+ components: { CAvatar, CTag, CIcon },
73
+ props: {
74
+ listItems: {
75
+ type: Array,
76
+ required: true,
77
+ },
78
+ cursorType: {
79
+ type: String,
80
+ default: "cursor-move",
81
+ },
82
+ },
83
+ data() {
84
+ return {
85
+ showSection: false,
86
+ };
87
+ },
88
+ methods: {
89
+ collapseList() {
90
+ this.showSection = !this.showSection;
91
+ },
92
+ },
93
+ };
94
+ </script>
@@ -1,3 +1,3 @@
1
- import CReorderableStackedList from './CReorderableStackedList.vue'
2
-
1
+ import CReorderableStackedList from './CReorderableStackedList.vue'
2
+
3
3
  export default CReorderableStackedList