bonkers-ui 1.0.5 → 1.0.6
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/package.json
CHANGED
|
@@ -13,11 +13,16 @@ export default {
|
|
|
13
13
|
disabled: {
|
|
14
14
|
control: { type: "boolean" },
|
|
15
15
|
description: "The Element disabled state",
|
|
16
|
+
},
|
|
17
|
+
invertOrder: {
|
|
18
|
+
control: { type: "boolean" },
|
|
19
|
+
description: "The Element order state",
|
|
16
20
|
}
|
|
17
21
|
},
|
|
18
22
|
args: {
|
|
19
23
|
slot: "default text",
|
|
20
24
|
disabled: false,
|
|
25
|
+
invertOrder: false,
|
|
21
26
|
},
|
|
22
27
|
};
|
|
23
28
|
|
|
@@ -31,9 +36,7 @@ const Template: Story<TComponentProps> = (args) => ({
|
|
|
31
36
|
return { args, modelValue };
|
|
32
37
|
},
|
|
33
38
|
template: `
|
|
34
|
-
<ui-toggle v-bind="args" v-model:model-value="modelValue"
|
|
35
|
-
{{ args.slot }}
|
|
36
|
-
</ui-toggle>
|
|
39
|
+
<ui-toggle v-bind="args" v-model:model-value="modelValue" header="Header" :title="args.slot" />
|
|
37
40
|
`,
|
|
38
41
|
});
|
|
39
42
|
|
|
@@ -1,42 +1,71 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
class="ui-toggle
|
|
2
|
+
<div
|
|
3
|
+
class="ui-toggle"
|
|
4
4
|
:class="className"
|
|
5
5
|
>
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
6
|
+
<ui-typography
|
|
7
|
+
:weight="ETextWeight.BOLD"
|
|
8
|
+
class-name="mb-sm"
|
|
9
|
+
>
|
|
10
|
+
{{ header }}
|
|
11
|
+
</ui-typography>
|
|
12
|
+
|
|
13
|
+
<label
|
|
14
|
+
class="rounded-full cursor-pointer flex gap-sm"
|
|
15
|
+
:class="[
|
|
16
|
+
disabled && 'pointer-events-none ui-toggle_disabled',
|
|
17
|
+
invertOrder && 'flex-row-reverse',
|
|
18
|
+
]"
|
|
19
|
+
>
|
|
20
|
+
<span class="ui-input__input-wrapper block relative h-md">
|
|
21
|
+
<input
|
|
22
|
+
type="checkbox"
|
|
23
|
+
class="appearance-none absolute w-0 h-0 border-0"
|
|
24
|
+
:checked="modelValue"
|
|
25
|
+
@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
|
|
23
26
|
>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
|
|
28
|
+
<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
|
|
29
|
+
|
|
30
|
+
<span class="ui-toggle__dot block bg-white absolute top-0 rounded-full">
|
|
31
|
+
<svg
|
|
32
|
+
class="ui-toggle__check-icon absolute"
|
|
33
|
+
:class="disabled ? 'text-primary-300' : 'text-primary'"
|
|
34
|
+
width="16"
|
|
35
|
+
height="12"
|
|
36
|
+
viewBox="0 0 16 12"
|
|
37
|
+
fill="none"
|
|
38
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
39
|
+
>
|
|
40
|
+
<path
|
|
41
|
+
d="M1 4.40106L6.60071 10.1135L15.1694 1.71245"
|
|
42
|
+
stroke="currentColor"
|
|
43
|
+
stroke-width="1.6"
|
|
44
|
+
stroke-linecap="round"
|
|
45
|
+
/>
|
|
46
|
+
</svg>
|
|
47
|
+
</span>
|
|
31
48
|
</span>
|
|
32
|
-
|
|
33
|
-
|
|
49
|
+
|
|
50
|
+
<ui-typography
|
|
51
|
+
:size="ETypographySizes.SM"
|
|
52
|
+
class-name="w-full"
|
|
53
|
+
line-height
|
|
54
|
+
>{{ title }}</ui-typography>
|
|
55
|
+
</label>
|
|
56
|
+
</div>
|
|
34
57
|
</template>
|
|
35
58
|
|
|
36
59
|
<script lang="ts" setup>
|
|
60
|
+
import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
|
|
61
|
+
|
|
37
62
|
defineProps<{
|
|
38
63
|
className?: string;
|
|
64
|
+
header?: string;
|
|
65
|
+
title?: string;
|
|
39
66
|
modelValue: boolean;
|
|
67
|
+
disabled?: boolean;
|
|
68
|
+
invertOrder?: boolean;
|
|
40
69
|
}>();
|
|
41
70
|
|
|
42
71
|
defineEmits<{
|
|
@@ -82,6 +111,10 @@
|
|
|
82
111
|
transition: background-color 0.2s ease-in-out;
|
|
83
112
|
}
|
|
84
113
|
|
|
114
|
+
.ui-toggle_disabled .ui-toggle__bg-block {
|
|
115
|
+
background-color: var(--color-secondary-alt-300);
|
|
116
|
+
}
|
|
117
|
+
|
|
85
118
|
.ui-toggle input:checked ~ .ui-toggle__bg-block {
|
|
86
119
|
background-color: var(--color-primary);
|
|
87
120
|
}
|
|
@@ -89,4 +122,8 @@
|
|
|
89
122
|
.ui-toggle input:checked ~ .ui-toggle__dot .ui-toggle__check-icon {
|
|
90
123
|
stroke-dashoffset: 0;
|
|
91
124
|
}
|
|
125
|
+
|
|
126
|
+
.ui-toggle_disabled input:checked ~ .ui-toggle__bg-block {
|
|
127
|
+
background-color: var(--color-primary-300);
|
|
128
|
+
}
|
|
92
129
|
</style>
|