classcard-ui 0.2.768 → 0.2.770
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.
- package/dist/classcard-ui.common.js +86 -55
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +86 -55
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +1 -1
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CSwitch/CSwitch.vue +42 -14
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
label == '' ? 'items-center' : 'items-start',
|
|
8
8
|
disabled ? 'cursor-default' : 'cursor-pointer',
|
|
9
9
|
]"
|
|
10
|
-
class="flex
|
|
10
|
+
class="flex"
|
|
11
11
|
>
|
|
12
12
|
<span
|
|
13
13
|
class="flex flex-grow flex-col"
|
|
@@ -15,12 +15,16 @@
|
|
|
15
15
|
v-if="direction == 'left'"
|
|
16
16
|
@click="switchValue"
|
|
17
17
|
>
|
|
18
|
-
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
19
|
-
|
|
18
|
+
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
19
|
+
label
|
|
20
|
+
}}</span>
|
|
21
|
+
<span v-if="description" class="text-sm text-gray-500">{{
|
|
22
|
+
description
|
|
23
|
+
}}</span>
|
|
20
24
|
</span>
|
|
21
25
|
<button
|
|
22
26
|
type="button"
|
|
23
|
-
class="group
|
|
27
|
+
class="group disabled-pointer-events-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-default disabled:opacity-50"
|
|
24
28
|
aria-pressed="false"
|
|
25
29
|
@click="switchValue"
|
|
26
30
|
:disabled="disabled"
|
|
@@ -41,9 +45,18 @@
|
|
|
41
45
|
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
46
|
></span>
|
|
43
47
|
</button>
|
|
44
|
-
<span
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
<span
|
|
49
|
+
class="flex flex-col"
|
|
50
|
+
id="toggleLabel"
|
|
51
|
+
v-if="direction == 'right'"
|
|
52
|
+
@click="switchValue"
|
|
53
|
+
>
|
|
54
|
+
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
55
|
+
label
|
|
56
|
+
}}</span>
|
|
57
|
+
<span v-if="description" class="text-sm text-gray-500">{{
|
|
58
|
+
description
|
|
59
|
+
}}</span>
|
|
47
60
|
</span>
|
|
48
61
|
</div>
|
|
49
62
|
<!-- large toggle -->
|
|
@@ -58,8 +71,12 @@
|
|
|
58
71
|
v-if="direction == 'left'"
|
|
59
72
|
@click="switchValue"
|
|
60
73
|
>
|
|
61
|
-
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
62
|
-
|
|
74
|
+
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
75
|
+
label
|
|
76
|
+
}}</span>
|
|
77
|
+
<span v-if="description" class="text-sm text-gray-500">{{
|
|
78
|
+
description
|
|
79
|
+
}}</span>
|
|
63
80
|
</span>
|
|
64
81
|
<button
|
|
65
82
|
type="button"
|
|
@@ -71,19 +88,30 @@
|
|
|
71
88
|
'cursor-pointer': !disabled,
|
|
72
89
|
}"
|
|
73
90
|
@click.stop="switchValue"
|
|
74
|
-
class="
|
|
91
|
+
class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
75
92
|
:disabled="disabled"
|
|
76
93
|
>
|
|
77
94
|
<span class="sr-only">Use setting</span>
|
|
78
95
|
<span
|
|
79
96
|
aria-hidden="true"
|
|
80
|
-
:class="{
|
|
97
|
+
:class="{
|
|
98
|
+
'translate-x-5': isToggle == 1,
|
|
99
|
+
'translate-x-0': isToggle == 0,
|
|
100
|
+
}"
|
|
81
101
|
class="inline-block h-5 w-5 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
|
|
82
102
|
></span>
|
|
83
103
|
</button>
|
|
84
|
-
<span
|
|
85
|
-
|
|
86
|
-
|
|
104
|
+
<span
|
|
105
|
+
class="ml-2 flex flex-col disabled:opacity-50"
|
|
106
|
+
id="toggleLabel"
|
|
107
|
+
v-if="direction == 'right'"
|
|
108
|
+
>
|
|
109
|
+
<span v-if="label" :class="classes" class="text-gray-900">{{
|
|
110
|
+
label
|
|
111
|
+
}}</span>
|
|
112
|
+
<span v-if="description" class="text-sm text-gray-500">{{
|
|
113
|
+
description
|
|
114
|
+
}}</span>
|
|
87
115
|
</span>
|
|
88
116
|
</div>
|
|
89
117
|
</div>
|