classcard-ui 0.2.666 → 0.2.671

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 (174) hide show
  1. package/dist/classcard-ui.common.js +69 -81
  2. package/dist/classcard-ui.common.js.map +1 -1
  3. package/dist/classcard-ui.umd.js +69 -81
  4. package/dist/classcard-ui.umd.js.map +1 -1
  5. package/dist/classcard-ui.umd.min.js +1 -1
  6. package/dist/classcard-ui.umd.min.js.map +1 -1
  7. package/package.json +6 -7
  8. package/src/App.vue +0 -16
  9. package/src/components/CAlerts/CAlerts.vue +0 -70
  10. package/src/components/CAlerts/index.js +0 -3
  11. package/src/components/CAnchorTabs/CAnchorTabs.vue +0 -96
  12. package/src/components/CAnchorTabs/index.js +0 -3
  13. package/src/components/CAnchorTag/CAnchorTag.vue +0 -62
  14. package/src/components/CAnchorTag/index.js +0 -3
  15. package/src/components/CAvatar/CAvatar.vue +0 -112
  16. package/src/components/CAvatar/index.js +0 -3
  17. package/src/components/CAvatarGroup/CAvatarGroup.vue +0 -145
  18. package/src/components/CAvatarGroup/index.js +0 -3
  19. package/src/components/CBasicTable/CBasicTable.vue +0 -184
  20. package/src/components/CBasicTable/index.js +0 -3
  21. package/src/components/CBreadcrumbs/CBreadcrumbs.vue +0 -38
  22. package/src/components/CBreadcrumbs/index.js +0 -3
  23. package/src/components/CButton/CButton.vue +0 -147
  24. package/src/components/CButton/index.js +0 -3
  25. package/src/components/CButtonGroup/CButtonGroup.vue +0 -116
  26. package/src/components/CButtonGroup/index.js +0 -3
  27. package/src/components/CButtonIcon/CButtonIcon.vue +0 -91
  28. package/src/components/CButtonIcon/index.js +0 -3
  29. package/src/components/CButtonLink/CButtonLink.vue +0 -39
  30. package/src/components/CButtonLink/index.js +0 -3
  31. package/src/components/CButtonSelect/CButtonSelect.vue +0 -103
  32. package/src/components/CButtonSelect/index.js +0 -3
  33. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +0 -168
  34. package/src/components/CButtonWithDropdown/index.js +0 -3
  35. package/src/components/CCalendar/CCalendar.vue +0 -401
  36. package/src/components/CCalendar/index.js +0 -3
  37. package/src/components/CCard/CCard.vue +0 -49
  38. package/src/components/CCard/index.js +0 -3
  39. package/src/components/CCheckbox/CCheckbox.vue +0 -70
  40. package/src/components/CCheckbox/index.js +0 -3
  41. package/src/components/CCollapsibleSection/CCollapsibleSection.vue +0 -99
  42. package/src/components/CCollapsibleSection/index.js +0 -3
  43. package/src/components/CColorDots/CColorDots.vue +0 -35
  44. package/src/components/CColorDots/index.js +0 -3
  45. package/src/components/CConfirmActionModal/CConfirmActionModal.vue +0 -120
  46. package/src/components/CConfirmActionModal/index.js +0 -3
  47. package/src/components/CDatepicker/CDatepicker.vue +0 -139
  48. package/src/components/CDatepicker/index.js +0 -3
  49. package/src/components/CDualSelect/CDualSelect.vue +0 -193
  50. package/src/components/CDualSelect/index.js +0 -3
  51. package/src/components/CEditor/CEditor.vue +0 -96
  52. package/src/components/CEditor/index.js +0 -3
  53. package/src/components/CFormSectionHeading/CFormSectionHeading.vue +0 -53
  54. package/src/components/CFormSectionHeading/index.js +0 -3
  55. package/src/components/CGroupedSelect/CGroupedSelect.vue +0 -217
  56. package/src/components/CGroupedSelect/index.js +0 -3
  57. package/src/components/CIcon/CIcon.vue +0 -77
  58. package/src/components/CIcon/index.js +0 -3
  59. package/src/components/CIconDropdown/CIconDropdown.vue +0 -111
  60. package/src/components/CIconDropdown/index.js +0 -3
  61. package/src/components/CInput/CInput.vue +0 -120
  62. package/src/components/CInput/index.js +0 -3
  63. package/src/components/CInputAddon/CInputAddon.vue +0 -202
  64. package/src/components/CInputAddon/index.js +0 -3
  65. package/src/components/CInputEmail/CInputEmail.vue +0 -93
  66. package/src/components/CInputEmail/index.js +0 -3
  67. package/src/components/CModalHeading/CModalHeading.vue +0 -22
  68. package/src/components/CModalHeading/index.js +0 -3
  69. package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue +0 -39
  70. package/src/components/CModuleHelpLinks/index.js +0 -3
  71. package/src/components/CMultiselect/CMultiselect.vue +0 -333
  72. package/src/components/CMultiselect/index.js +0 -3
  73. package/src/components/CMultiselectr/CMultiselectr.vue +0 -44
  74. package/src/components/CMultiselectr/index.js +0 -3
  75. package/src/components/CPageHeading/CPageHeading.vue +0 -56
  76. package/src/components/CPageHeading/index.js +0 -3
  77. package/src/components/CPagination/CPagination.vue +0 -202
  78. package/src/components/CPagination/index.js +0 -3
  79. package/src/components/CPhoneNumber/CPhoneNumber.vue +0 -81
  80. package/src/components/CPhoneNumber/index.js +0 -3
  81. package/src/components/CRadio/CRadio.vue +0 -106
  82. package/src/components/CRadio/index.js +0 -3
  83. package/src/components/CRangeSlider/CRangeSlider.vue +0 -55
  84. package/src/components/CRangeSlider/index.js +0 -3
  85. package/src/components/CReorderableStackedList/CReorderableStackedList.vue +0 -94
  86. package/src/components/CReorderableStackedList/index.js +0 -3
  87. package/src/components/CSelect/CSelect.vue +0 -343
  88. package/src/components/CSelect/index.js +0 -3
  89. package/src/components/CSmallTimeline/CSmallTimeline.vue +0 -40
  90. package/src/components/CSmallTimeline/index.js +0 -3
  91. package/src/components/CStackedList/CStackedList.vue +0 -132
  92. package/src/components/CStackedList/index.js +0 -3
  93. package/src/components/CStats/CStats.vue +0 -111
  94. package/src/components/CStats/index.js +0 -3
  95. package/src/components/CSwitch/CSwitch.vue +0 -140
  96. package/src/components/CSwitch/index.js +0 -3
  97. package/src/components/CTable/CTable.vue +0 -536
  98. package/src/components/CTable/index.js +0 -3
  99. package/src/components/CTabs/CTabs.vue +0 -111
  100. package/src/components/CTabs/index.js +0 -3
  101. package/src/components/CTag/CTag.vue +0 -36
  102. package/src/components/CTag/index.js +0 -3
  103. package/src/components/CTextarea/CTextarea.vue +0 -95
  104. package/src/components/CTextarea/index.js +0 -3
  105. package/src/components/CTimeline/CTimeline.vue +0 -237
  106. package/src/components/CTimeline/index.js +0 -3
  107. package/src/components/CUpload/CUpload.vue +0 -231
  108. package/src/components/CUpload/index.js +0 -3
  109. package/src/components/index.js +0 -48
  110. package/src/icons.js +0 -275
  111. package/src/main.js +0 -22
  112. package/src/stories/CAlerts.stories.js +0 -37
  113. package/src/stories/CAnchorTabs.stories.js +0 -29
  114. package/src/stories/CAnchorTag.stories.js +0 -36
  115. package/src/stories/CAvatar.stories.js +0 -38
  116. package/src/stories/CAvatarGroup.stories.js +0 -100
  117. package/src/stories/CBasicTable.stories.js +0 -316
  118. package/src/stories/CBreadcrumbs.stories.js +0 -24
  119. package/src/stories/CButton.stories.js +0 -46
  120. package/src/stories/CButtonGroup.stories.js +0 -33
  121. package/src/stories/CButtonIcon.stories.js +0 -27
  122. package/src/stories/CButtonLink.stories.js +0 -24
  123. package/src/stories/CButtonSelect.stories.js +0 -32
  124. package/src/stories/CButtonWithDropdown.stories.js +0 -41
  125. package/src/stories/CCalendar.stories.js +0 -16
  126. package/src/stories/CCard.stories.js +0 -30
  127. package/src/stories/CCheckbox.stories.js +0 -29
  128. package/src/stories/CCollapsibleSection.stories.js +0 -28
  129. package/src/stories/CColorDots.stories.js +0 -28
  130. package/src/stories/CConfirmActionModal.stories.js +0 -59
  131. package/src/stories/CDatepicker.stories.js +0 -30
  132. package/src/stories/CDualSelect.stories.js +0 -29
  133. package/src/stories/CEditor.stories.js +0 -30
  134. package/src/stories/CFormSectionHeading.stories.js +0 -34
  135. package/src/stories/CGroupedSelect.stories.js +0 -69
  136. package/src/stories/CIcon.stories.js +0 -26
  137. package/src/stories/CIconDropdown.stories.js +0 -40
  138. package/src/stories/CInput.stories.js +0 -36
  139. package/src/stories/CInputAddon.stories.js +0 -37
  140. package/src/stories/CInputEmail.stories.js +0 -27
  141. package/src/stories/CModalHeading.stories.js +0 -25
  142. package/src/stories/CModuleHelpLinks.stories.js +0 -25
  143. package/src/stories/CMultiselect.stories.js +0 -97
  144. package/src/stories/CMultiselectr.stories.js +0 -23
  145. package/src/stories/CPageHeading.stories.js +0 -32
  146. package/src/stories/CPagination.stories.js +0 -30
  147. package/src/stories/CPhoneNumber.stories.js +0 -29
  148. package/src/stories/CRadio.stories.js +0 -36
  149. package/src/stories/CRangeSlider.stories.js +0 -23
  150. package/src/stories/CReorderableStackedList.stories.js +0 -23
  151. package/src/stories/CSelect.stories.js +0 -50
  152. package/src/stories/CSmallTimeline.stories.js +0 -26
  153. package/src/stories/CStackedList.stories.js +0 -37
  154. package/src/stories/CStats.stories.js +0 -33
  155. package/src/stories/CSwitch.stories.js +0 -28
  156. package/src/stories/CTable.stories.js +0 -77
  157. package/src/stories/CTabs.stories.js +0 -33
  158. package/src/stories/CTag.stories.js +0 -23
  159. package/src/stories/CTextarea.stories.js +0 -32
  160. package/src/stories/CTimeline.stories.js +0 -26
  161. package/src/stories/CUpload.stories.js +0 -36
  162. package/src/stories/Introduction.stories.mdx +0 -207
  163. package/src/stories/Page.vue +0 -88
  164. package/src/stories/assets/code-brackets.svg +0 -1
  165. package/src/stories/assets/colors.svg +0 -1
  166. package/src/stories/assets/comments.svg +0 -1
  167. package/src/stories/assets/direction.svg +0 -1
  168. package/src/stories/assets/flow.svg +0 -1
  169. package/src/stories/assets/plugin.svg +0 -1
  170. package/src/stories/assets/repo.svg +0 -1
  171. package/src/stories/assets/stackalt.svg +0 -1
  172. package/src/stories/header.css +0 -26
  173. package/src/stories/page.css +0 -69
  174. package/src/stories/utils.css +0 -18
@@ -1,3 +0,0 @@
1
- import CSelect from './CSelect.vue'
2
-
3
- export default CSelect
@@ -1,40 +0,0 @@
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 +0,0 @@
1
- import CSmallTimeline from './CSmallTimeline.vue'
2
-
3
- export default CSmallTimeline
@@ -1,132 +0,0 @@
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 justify-between py-4"
8
- :class="{
9
- 'cursor-pointer': items.collapse,
10
- 'border-b border-gray-200': divider === true,
11
- }"
12
- >
13
- <div
14
- class="flex w-full"
15
- v-on="items.collapse ? { click: () => collapseList() } : null"
16
- >
17
- <c-icon
18
- v-if="items.collapse"
19
- :name="showSection ? 'chevron-down' : 'chevron-right'"
20
- type="solid"
21
- class="mt-3 mr-3 h-5 w-5 shrink-0 text-gray-900"
22
- ></c-icon>
23
-
24
- <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
25
- <c-avatar
26
- v-if="items.image"
27
- :size="items.size"
28
- :rounded="items.rounded"
29
- :image="items.image"
30
- class="shrink-0"
31
- ></c-avatar>
32
- <c-icon
33
- v-else
34
- :name="icon.name"
35
- :type="icon.type"
36
- :class="icon.class"
37
- ></c-icon>
38
- </div>
39
- <c-avatar
40
- v-else
41
- :size="items.size"
42
- :rounded="items.rounded"
43
- :image="items.image"
44
- class="shrink-0"
45
- ></c-avatar>
46
- <div class="ml-3 w-full">
47
- <div class="flex pb-1">
48
- <p class="text-sm font-medium text-gray-900">
49
- {{ items.heading }}
50
- </p>
51
- <c-tag
52
- v-if="items.tag"
53
- :label="items.tagLabel"
54
- :color="items.tagColor"
55
- class="relative bottom-0.5 ml-2.5"
56
- ></c-tag>
57
- </div>
58
- <p class="text-sm text-gray-500">{{ items.description }}</p>
59
- <div v-if="showSection" class="mt-3">
60
- <slot></slot>
61
- </div>
62
- </div>
63
- </div>
64
- <!-- <c-icon
65
- v-if="items.listIcon"
66
- name="trash"
67
- class="h-5 w-5 text-gray-500 hover:text-red-500 cursor-pointer"
68
- type="solid"
69
- ></c-icon> -->
70
- <button
71
- v-if="items.listIcon"
72
- type="button"
73
- :id="listId ? listId : ''"
74
- 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"
75
- @click="deleteItem"
76
- >
77
- <c-icon
78
- name="trash"
79
- type="solid"
80
- class="h-5 w-5 hover:text-red-800"
81
- ></c-icon>
82
- </button>
83
- </li>
84
- </ul>
85
- </div>
86
- </template>
87
- <script>
88
- import CAvatar from "../CAvatar/CAvatar.vue";
89
- import CTag from "../CTag/CTag.vue";
90
- import CIcon from "../CIcon/CIcon.vue";
91
- export default {
92
- name: "CStackedList",
93
- components: { CAvatar, CTag, CIcon },
94
- props: {
95
- listItems: {
96
- type: Array,
97
- required: true,
98
- },
99
- divider: {
100
- type: Boolean,
101
- default: true,
102
- },
103
- isIcon: {
104
- type: Boolean,
105
- default: false,
106
- },
107
- listId: {
108
- type: String,
109
- },
110
- icon: {
111
- type: Object,
112
- },
113
- },
114
- data() {
115
- return {
116
- showSection: false,
117
- };
118
- },
119
- methods: {
120
- collapseList() {
121
- this.showSection = !this.showSection;
122
- },
123
- deleteItem(item) {
124
- if (this.listId) {
125
- this.$emit("delete-item", this.listId, item);
126
- } else {
127
- this.$emit("delete-item", item);
128
- }
129
- },
130
- },
131
- };
132
- </script>
@@ -1,3 +0,0 @@
1
- import CStackedList from './CStackedList.vue'
2
-
3
- export default CStackedList
@@ -1,111 +0,0 @@
1
- <template>
2
- <!-- <div>
3
- <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
4
- <div
5
- :class="index == statsCount.length - 1 ? '' : 'mr-2'"
6
- class="bg-white w-full overflow-hidden shadow rounded-lg"
7
- v-for="(count, index) in statsCount"
8
- v-bind:key="count.number"
9
- >
10
- <div class="px-4 pt-3 pb-1 flex">
11
- <c-icon
12
- v-if="count.icon"
13
- :name="count.icon.name"
14
- :type="count.icon.type"
15
- :class="count.icon.class"
16
- ></c-icon>
17
- <div :class="count.icon ? 'ml-3' : ''">
18
- <dt class="text-sm text-gray-500 flex">
19
- <span>{{ count.label }}</span>
20
- <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
21
- </dt>
22
- <dd class="text-2xl font-semibold text-gray-900">
23
- {{ count.totalCount }}
24
- </dd>
25
- </div>
26
- </div>
27
- <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
28
- <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
29
- <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
30
- </div>
31
- </div>
32
- </dl>
33
- </div> -->
34
- <!-- This example requires Tailwind CSS v2.0+ -->
35
- <div>
36
- <div class="flex items-center justify-between" v-if="title">
37
- <h3 class="text-lg font-medium leading-6 text-gray-900">
38
- {{ title.heading }}
39
- </h3>
40
- <c-tag
41
- v-if="title.label"
42
- class="hidden sm:block"
43
- :label="title.label"
44
- color="green"
45
- ></c-tag>
46
- </div>
47
- <dl
48
- :class="`mt-4 grid grid-cols-1 divide-y ${
49
- colorClasses ? colorClasses.divide : 'divide-gray-200'
50
- } overflow-hidden rounded-lg ${
51
- colorClasses ? colorClasses.background : 'bg-gray-100'
52
- } md:grid-cols-3 md:divide-y-0 md:divide-x`"
53
- >
54
- <div
55
- class="px-4 py-5 sm:p-6"
56
- v-for="count in statsCount"
57
- v-bind:key="count.number"
58
- >
59
- <div
60
- class="flex items-end justify-between md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
61
- >
62
- <div>
63
- <dt class="flex text-sm text-gray-500">
64
- <span>{{ count.label }}</span>
65
- <span class="ml-1 text-sm text-gray-900">{{ count.number }}</span>
66
- </dt>
67
- <div class="mt-1 flex items-baseline justify-start">
68
- <p :class="`text-2xl font-semibold ${fontColor}`">
69
- {{ count.totalCount }}
70
- </p>
71
- <label v-if="count.days" class="ml-2 text-xs text-gray-500">{{
72
- count.days
73
- }}</label>
74
- </div>
75
- </div>
76
- <c-tag
77
- v-if="count.tag"
78
- :label="count.tag.label"
79
- :color="count.tag.color"
80
- tagClasses="rounded-full text-xs"
81
- ></c-tag>
82
- </div>
83
- </div>
84
- </dl>
85
- </div>
86
- </template>
87
-
88
- <script>
89
- import CTag from "../CTag/CTag.vue";
90
- export default {
91
- name: "CStats",
92
- components: { CTag },
93
- props: {
94
- statsCount: {
95
- type: Array,
96
- },
97
- title: {
98
- type: Object,
99
- },
100
- fontColor: {
101
- type: String,
102
- default: "text-gray-900",
103
- },
104
- colorClasses: {
105
- type: Object,
106
- },
107
- },
108
- };
109
- </script>
110
-
111
- <style></style>
@@ -1,3 +0,0 @@
1
- import CStats from './CStats.vue'
2
-
3
- export default CStats
@@ -1,140 +0,0 @@
1
- <template>
2
- <div>
3
- <!-- small toggle -->
4
- <div
5
- v-if="size === 'small'"
6
- :class="[
7
- label == '' ? 'items-center' : 'items-start',
8
- disabled ? 'cursor-default' : 'cursor-pointer',
9
- ]"
10
- class="flex justify-between"
11
- >
12
- <span
13
- class="flex flex-grow flex-col"
14
- id="smallleft"
15
- v-if="direction == 'left'"
16
- @click="switchValue"
17
- >
18
- <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
19
- <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
20
- </span>
21
- <button
22
- type="button"
23
- class="group focus:outline-none disabled-pointer-events-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-default disabled:opacity-50"
24
- aria-pressed="false"
25
- @click="switchValue"
26
- :disabled="disabled"
27
- >
28
- <span class="sr-only">Use setting</span>
29
- <span
30
- aria-hidden="true"
31
- class="pointer-events-none absolute h-full w-full rounded-md bg-white"
32
- ></span>
33
- <span
34
- aria-hidden="true"
35
- :class="{ 'bg-indigo-600': isToggle, 'bg-gray-200': !isToggle }"
36
- class="pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
37
- ></span>
38
- <span
39
- aria-hidden="true"
40
- :class="{ 'translate-x-5': isToggle, 'translate-x-0': !isToggle }"
41
- class="pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white ring-0 transition-transform duration-200 ease-in-out"
42
- ></span>
43
- </button>
44
- <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" @click="switchValue">
45
- <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
46
- <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
47
- </span>
48
- </div>
49
- <!-- large toggle -->
50
- <div
51
- v-else
52
- :class="label == '' ? 'items-center' : 'items-start'"
53
- class="flex cursor-pointer justify-between"
54
- >
55
- <span
56
- class="flex flex-grow flex-col"
57
- id="toggleLabel"
58
- v-if="direction == 'left'"
59
- @click="switchValue"
60
- >
61
- <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
62
- <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
63
- </span>
64
- <button
65
- type="button"
66
- aria-pressed="false"
67
- :class="{
68
- 'bg-indigo-600': isToggle == 1,
69
- 'bg-gray-200': isToggle == 0,
70
- 'cursor-default': disabled,
71
- 'cursor-pointer': !disabled,
72
- }"
73
- @click.stop="switchValue"
74
- class="focus:outline-none relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
75
- :disabled="disabled"
76
- >
77
- <span class="sr-only">Use setting</span>
78
- <span
79
- aria-hidden="true"
80
- :class="{ 'translate-x-5': isToggle == 1, 'translate-x-0': isToggle == 0 }"
81
- class="inline-block h-5 w-5 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
82
- ></span>
83
- </button>
84
- <span class="flex flex-col disabled:opacity-50" id="toggleLabel" v-if="direction == 'right'">
85
- <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
86
- <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
87
- </span>
88
- </div>
89
- </div>
90
- </template>
91
-
92
- <script>
93
- export default {
94
- name: "CSwitch",
95
- components: {},
96
- props: {
97
- label: {
98
- type: String,
99
- },
100
- description: {
101
- type: String,
102
- },
103
- returnToggleValue: {
104
- type: Function,
105
- },
106
- classes: {
107
- type: String,
108
- },
109
- value: { type: Number },
110
- size: {
111
- type: String,
112
- },
113
- direction: {
114
- type: String,
115
- },
116
- disabled: {
117
- type: Boolean,
118
- default: false,
119
- },
120
- },
121
- data() {
122
- return {
123
- isToggle: this.value,
124
- };
125
- },
126
- methods: {
127
- switchValue() {
128
- this.isToggle = this.isToggle === 1 ? 0 : 1;
129
- this.$emit("returnToggleValue", this.isToggle);
130
- },
131
- },
132
- watch: {
133
- value() {
134
- this.isToggle = this.value;
135
- },
136
- },
137
- };
138
- </script>
139
-
140
- <style></style>
@@ -1,3 +0,0 @@
1
- import CSwitch from './CSwitch.vue'
2
-
3
- export default CSwitch