nuxt-glorious 1.2.3-0 → 1.2.3-2
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.
Potentially problematic release.
This version of nuxt-glorious might be problematic. Click here for more details.
- package/dist/module.json +2 -2
- package/dist/module.mjs +1 -1
- package/dist/runtime/assets/style/components/input.css +1 -1
- package/dist/runtime/assets/style/components/switch.css +52 -0
- package/dist/runtime/components/G/Input.vue +4 -3
- package/dist/runtime/components/G/Switch.vue +88 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
.glorious-input-options {
|
|
94
|
-
@apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto;
|
|
94
|
+
@apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
|
|
95
95
|
}
|
|
96
96
|
.glorious-input-options > div {
|
|
97
97
|
@apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/* From Uiverse.io by namecho */
|
|
2
|
+
.switch {
|
|
3
|
+
direction: ltr;
|
|
4
|
+
--button-width: 3.5em;
|
|
5
|
+
--button-height: 2em;
|
|
6
|
+
--toggle-diameter: 1.5em;
|
|
7
|
+
--button-toggle-offset: calc(
|
|
8
|
+
(var(--button-height) - var(--toggle-diameter)) / 2
|
|
9
|
+
);
|
|
10
|
+
--toggle-shadow-offset: 10px;
|
|
11
|
+
--toggle-wider: 3em;
|
|
12
|
+
--color-grey: #cccccc;
|
|
13
|
+
--color-green: #4296f4;
|
|
14
|
+
}
|
|
15
|
+
.switch-slider {
|
|
16
|
+
display: inline-block;
|
|
17
|
+
width: var(--button-width);
|
|
18
|
+
height: var(--button-height);
|
|
19
|
+
background-color: var(--color-grey);
|
|
20
|
+
border-radius: calc(var(--button-height) / 2);
|
|
21
|
+
position: relative;
|
|
22
|
+
transition: 0.3s all ease-in-out;
|
|
23
|
+
}
|
|
24
|
+
.switch-slider::after {
|
|
25
|
+
content: "";
|
|
26
|
+
display: inline-block;
|
|
27
|
+
width: var(--toggle-diameter);
|
|
28
|
+
height: var(--toggle-diameter);
|
|
29
|
+
background-color: #fff;
|
|
30
|
+
border-radius: calc(var(--toggle-diameter) / 2);
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: var(--button-toggle-offset);
|
|
33
|
+
transform: translateX(var(--button-toggle-offset));
|
|
34
|
+
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
35
|
+
transition: 0.3s all ease-in-out;
|
|
36
|
+
}
|
|
37
|
+
.switch input[type=checkbox]:checked + .switch-slider {
|
|
38
|
+
background-color: var(--color-green);
|
|
39
|
+
}
|
|
40
|
+
.switch input[type=checkbox]:checked + .switch-slider::after {
|
|
41
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
|
42
|
+
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
43
|
+
}
|
|
44
|
+
.switch input[type=checkbox] {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
.switch input[type=checkbox]:active + .switch-slider::after {
|
|
48
|
+
width: var(--toggle-wider);
|
|
49
|
+
}
|
|
50
|
+
.switch input[type=checkbox]:checked:active + .switch-slider::after {
|
|
51
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
|
52
|
+
}
|
|
@@ -208,7 +208,8 @@ const typeInput = ref(props.type)
|
|
|
208
208
|
|
|
209
209
|
const inputClicked = (event: any) => {
|
|
210
210
|
if (props.mode === 'tag' && props.options) {
|
|
211
|
-
|
|
211
|
+
const gio = document.querySelectorAll('.glorious-input-options')
|
|
212
|
+
gio.forEach((element: any) => element.classList.add('hidden'))
|
|
212
213
|
|
|
213
214
|
const optionsElement = event.currentTarget.parentElement.children[1]
|
|
214
215
|
if (optionsElement.classList.contains('hidden'))
|
|
@@ -258,7 +259,7 @@ const inputClicked = (event: any) => {
|
|
|
258
259
|
|
|
259
260
|
<div
|
|
260
261
|
v-if="props.options.length > 0"
|
|
261
|
-
class="glorious-input-options"
|
|
262
|
+
class="glorious-input-options hidden"
|
|
262
263
|
:class="[`size-${props.size}`]"
|
|
263
264
|
>
|
|
264
265
|
<div v-if="props.loadingOptions" class="flex justify-center">
|
|
@@ -391,7 +392,7 @@ const inputClicked = (event: any) => {
|
|
|
391
392
|
}
|
|
392
393
|
|
|
393
394
|
.glorious-input-options {
|
|
394
|
-
@apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto;
|
|
395
|
+
@apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
|
|
395
396
|
}
|
|
396
397
|
.glorious-input-options > div {
|
|
397
398
|
@apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
const props = defineProps({
|
|
3
|
+
modelValue: {
|
|
4
|
+
required: false,
|
|
5
|
+
default: true,
|
|
6
|
+
type: Boolean,
|
|
7
|
+
},
|
|
8
|
+
checked: {
|
|
9
|
+
required: false,
|
|
10
|
+
default: false,
|
|
11
|
+
type: Boolean,
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const emits = defineEmits(['update:modelValue'])
|
|
16
|
+
const input = (e: Event) => {
|
|
17
|
+
const target = e.target as HTMLInputElement
|
|
18
|
+
emits('update:modelValue', target.checked)
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<div>
|
|
24
|
+
<label class="switch">
|
|
25
|
+
<input
|
|
26
|
+
type="checkbox"
|
|
27
|
+
@input="input"
|
|
28
|
+
:checked="props.checked"
|
|
29
|
+
/>
|
|
30
|
+
<span class="switch-slider"></span>
|
|
31
|
+
</label>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
/* From Uiverse.io by namecho */
|
|
37
|
+
.switch {
|
|
38
|
+
direction: ltr;
|
|
39
|
+
--button-width: 3.5em;
|
|
40
|
+
--button-height: 2em;
|
|
41
|
+
--toggle-diameter: 1.5em;
|
|
42
|
+
--button-toggle-offset: calc(
|
|
43
|
+
(var(--button-height) - var(--toggle-diameter)) / 2
|
|
44
|
+
);
|
|
45
|
+
--toggle-shadow-offset: 10px;
|
|
46
|
+
--toggle-wider: 3em;
|
|
47
|
+
--color-grey: #cccccc;
|
|
48
|
+
--color-green: #4296f4;
|
|
49
|
+
}
|
|
50
|
+
.switch-slider {
|
|
51
|
+
display: inline-block;
|
|
52
|
+
width: var(--button-width);
|
|
53
|
+
height: var(--button-height);
|
|
54
|
+
background-color: var(--color-grey);
|
|
55
|
+
border-radius: calc(var(--button-height) / 2);
|
|
56
|
+
position: relative;
|
|
57
|
+
transition: 0.3s all ease-in-out;
|
|
58
|
+
}
|
|
59
|
+
.switch-slider::after {
|
|
60
|
+
content: "";
|
|
61
|
+
display: inline-block;
|
|
62
|
+
width: var(--toggle-diameter);
|
|
63
|
+
height: var(--toggle-diameter);
|
|
64
|
+
background-color: #fff;
|
|
65
|
+
border-radius: calc(var(--toggle-diameter) / 2);
|
|
66
|
+
position: absolute;
|
|
67
|
+
top: var(--button-toggle-offset);
|
|
68
|
+
transform: translateX(var(--button-toggle-offset));
|
|
69
|
+
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
70
|
+
transition: 0.3s all ease-in-out;
|
|
71
|
+
}
|
|
72
|
+
.switch input[type=checkbox]:checked + .switch-slider {
|
|
73
|
+
background-color: var(--color-green);
|
|
74
|
+
}
|
|
75
|
+
.switch input[type=checkbox]:checked + .switch-slider::after {
|
|
76
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
|
77
|
+
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
78
|
+
}
|
|
79
|
+
.switch input[type=checkbox] {
|
|
80
|
+
display: none;
|
|
81
|
+
}
|
|
82
|
+
.switch input[type=checkbox]:active + .switch-slider::after {
|
|
83
|
+
width: var(--toggle-wider);
|
|
84
|
+
}
|
|
85
|
+
.switch input[type=checkbox]:checked:active + .switch-slider::after {
|
|
86
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
|
87
|
+
}
|
|
88
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.2.3-
|
|
2
|
+
"version": "1.2.3-2",
|
|
3
3
|
"name": "nuxt-glorious",
|
|
4
4
|
"description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
|
|
5
5
|
"repository": "sajadhzj/nuxt-glorious",
|