@redseed/redseed-ui-vue3 2.2.1 → 2.3.0
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/index.js
CHANGED
|
@@ -19,4 +19,5 @@ export * from './src/components/Pagination'
|
|
|
19
19
|
export * from './src/components/Progress'
|
|
20
20
|
export * from './src/components/Social'
|
|
21
21
|
export * from './src/components/Sorting'
|
|
22
|
+
export * from './src/components/Toggle'
|
|
22
23
|
export * from './src/components/TwoColumnLayout'
|
package/package.json
CHANGED
|
@@ -64,7 +64,7 @@ const proxyChecked = computed({
|
|
|
64
64
|
@apply ml-2;
|
|
65
65
|
}
|
|
66
66
|
&__check {
|
|
67
|
-
@apply w-6 h-6 shrink-0 relative bg-white;
|
|
67
|
+
@apply w-6 h-6 shrink-0 relative bg-white rounded-md;
|
|
68
68
|
|
|
69
69
|
input[type="checkbox"] {
|
|
70
70
|
@apply appearance-none absolute inset-0 rounded-md transition shadow-sm;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, watch } from 'vue'
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
disabled: {
|
|
6
|
+
type: Boolean,
|
|
7
|
+
default: false,
|
|
8
|
+
}
|
|
9
|
+
})
|
|
10
|
+
|
|
11
|
+
const model = defineModel();
|
|
12
|
+
|
|
13
|
+
const emit = defineEmits(['update'])
|
|
14
|
+
|
|
15
|
+
watch(model, (val) => {
|
|
16
|
+
emit('update', val)
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
const wrapperClasses = computed(() => [
|
|
20
|
+
'rsui-toggle',
|
|
21
|
+
{
|
|
22
|
+
'rsui-toggle--disabled': props.disabled,
|
|
23
|
+
}
|
|
24
|
+
])
|
|
25
|
+
|
|
26
|
+
</script>
|
|
27
|
+
<template>
|
|
28
|
+
<div :class="wrapperClasses">
|
|
29
|
+
<div class="rsui-toggle__control">
|
|
30
|
+
<label v-if="$slots['label']"
|
|
31
|
+
:for="$attrs.id"
|
|
32
|
+
>
|
|
33
|
+
<slot name="label"></slot>
|
|
34
|
+
</label>
|
|
35
|
+
<input
|
|
36
|
+
:disabled="disabled"
|
|
37
|
+
v-model="model"
|
|
38
|
+
type="checkbox"
|
|
39
|
+
>
|
|
40
|
+
</div>
|
|
41
|
+
<div v-if="$slots['help']"
|
|
42
|
+
class="rsui-toggle__help"
|
|
43
|
+
>
|
|
44
|
+
<slot name="help"></slot>
|
|
45
|
+
</div>
|
|
46
|
+
<div v-if="$slots['error']" class="formfield-input__error">
|
|
47
|
+
<slot name="error"></slot>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</template>
|
|
51
|
+
<style lang="scss" scoped>
|
|
52
|
+
.rsui-toggle {
|
|
53
|
+
@apply flex flex-col space-y-2 border-0 bg-transparent p-0;
|
|
54
|
+
&--disabled {
|
|
55
|
+
label {
|
|
56
|
+
@apply text-rsui-light;
|
|
57
|
+
}
|
|
58
|
+
input {
|
|
59
|
+
@apply cursor-not-allowed;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&__control {
|
|
63
|
+
@apply justify-between flex items-center space-x-8;
|
|
64
|
+
}
|
|
65
|
+
label {
|
|
66
|
+
@apply whitespace-nowrap select-none cursor-pointer;
|
|
67
|
+
}
|
|
68
|
+
input {
|
|
69
|
+
@apply appearance-none relative w-[2.6rem] h-6 px-1 bg-secondary border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 flex items-center;
|
|
70
|
+
@apply focus:ring-0 focus:ring-transparent focus:checked:border-primary;
|
|
71
|
+
@apply checked:bg-none checked:bg-primary checked:text-primary checked:border-primary checked:before:bg-primary-content checked:before:translate-x-full;
|
|
72
|
+
@apply disabled:opacity-50 disabled:pointer-events-none;
|
|
73
|
+
@apply before:inline-block before:size-4 before:bg-white before:translate-x-0 before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
|
|
74
|
+
}
|
|
75
|
+
&__help {
|
|
76
|
+
@apply w-full text-xs;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&__error {
|
|
80
|
+
@apply text-sm text-danger;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</style>
|