nuxt-glorious 1.2.3-1 → 1.2.3-3
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/icons/glorious-star-fill.svg +3 -0
- package/dist/runtime/assets/icons/glorious-star-half.svg +3 -0
- package/dist/runtime/assets/icons/glorious-star-line.svg +3 -0
- package/dist/runtime/assets/style/components/rating.css +26 -0
- package/dist/runtime/assets/style/components/switch.css +61 -0
- package/dist/runtime/components/G/Rating.vue +57 -0
- package/dist/runtime/components/G/Switch.vue +105 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.99999 12.656L12.817 14.376L12.051 11.166L14.558 9.019L11.268 8.755L9.99999 5.708V12.656ZM9.99999 15L4.12199 18.59L5.71999 11.89L0.48999 7.41L7.35499 6.86L9.99999 0.5L12.645 6.86L19.511 7.41L14.28 11.89L15.878 18.59L9.99999 15Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.9999 18.26L4.94691 22.208L6.52191 14.28L0.586914 8.792L8.61391 7.84L11.9999 0.5L15.3859 7.84L23.4129 8.792L17.4779 14.28L19.0529 22.208L11.9999 18.26ZM11.9999 15.968L16.2469 18.345L15.2979 13.572L18.8709 10.267L14.0379 9.694L11.9999 5.275L9.96191 9.695L5.12891 10.267L8.70191 13.572L7.75291 18.345L11.9999 15.968Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
.rating {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.rating input {
|
|
7
|
+
display: none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.rating label {
|
|
11
|
+
float: right;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
transition: color 0.3s;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.rating label:before {
|
|
17
|
+
content: "★";
|
|
18
|
+
font-size: 30px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.rating input:checked ~ label,
|
|
22
|
+
.rating label:hover,
|
|
23
|
+
.rating label:hover ~ label {
|
|
24
|
+
color: #ffd700;
|
|
25
|
+
transition: color 0.3s;
|
|
26
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.switch {
|
|
2
|
+
direction: ltr;
|
|
3
|
+
--button-width: 3em;
|
|
4
|
+
--button-height: 1.5em;
|
|
5
|
+
--toggle-diameter: 1em;
|
|
6
|
+
--button-toggle-offset: calc(
|
|
7
|
+
(var(--button-height) - var(--toggle-diameter)) / 2
|
|
8
|
+
);
|
|
9
|
+
--toggle-shadow-offset: 10px;
|
|
10
|
+
--toggle-wider: 3em;
|
|
11
|
+
}
|
|
12
|
+
.switch-slider {
|
|
13
|
+
@apply bg-gray-300;
|
|
14
|
+
display: inline-block;
|
|
15
|
+
width: var(--button-width);
|
|
16
|
+
height: var(--button-height);
|
|
17
|
+
border-radius: calc(var(--button-height) / 2);
|
|
18
|
+
position: relative;
|
|
19
|
+
transition: 0.3s all ease-in-out;
|
|
20
|
+
}
|
|
21
|
+
.switch-slider::after {
|
|
22
|
+
content: "";
|
|
23
|
+
display: inline-block;
|
|
24
|
+
width: var(--toggle-diameter);
|
|
25
|
+
height: var(--toggle-diameter);
|
|
26
|
+
background-color: #fff;
|
|
27
|
+
border-radius: calc(var(--toggle-diameter) / 2);
|
|
28
|
+
position: absolute;
|
|
29
|
+
top: var(--button-toggle-offset);
|
|
30
|
+
transform: translateX(var(--button-toggle-offset));
|
|
31
|
+
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
32
|
+
transition: 0.3s all ease-in-out;
|
|
33
|
+
}
|
|
34
|
+
.switch.color-orange input[type=checkbox]:checked + .switch-slider {
|
|
35
|
+
background-color: theme("colors.orange.500");
|
|
36
|
+
}
|
|
37
|
+
.switch.color-blue input[type=checkbox]:checked + .switch-slider {
|
|
38
|
+
background-color: theme("colors.blue.500");
|
|
39
|
+
}
|
|
40
|
+
.switch.color-gray input[type=checkbox]:checked + .switch-slider {
|
|
41
|
+
background-color: theme("colors.gray.500");
|
|
42
|
+
}
|
|
43
|
+
.switch.color-red input[type=checkbox]:checked + .switch-slider {
|
|
44
|
+
background-color: theme("colors.red.500");
|
|
45
|
+
}
|
|
46
|
+
.switch.color-green input[type=checkbox]:checked + .switch-slider {
|
|
47
|
+
background-color: theme("colors.green.500");
|
|
48
|
+
}
|
|
49
|
+
.switch input[type=checkbox]:checked + .switch-slider::after {
|
|
50
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
|
51
|
+
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
52
|
+
}
|
|
53
|
+
.switch input[type=checkbox] {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
.switch input[type=checkbox]:active + .switch-slider::after {
|
|
57
|
+
width: var(--toggle-wider);
|
|
58
|
+
}
|
|
59
|
+
.switch input[type=checkbox]:checked:active + .switch-slider::after {
|
|
60
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
|
61
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
const emits = defineEmits(['update:modelValue'])
|
|
3
|
+
const computeModelValue = (event: Event) => {
|
|
4
|
+
const target = event.target as HTMLInputElement
|
|
5
|
+
emits('update:modelValue', target.value)
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const id = useId()
|
|
9
|
+
const value = [5, 4, 3, 2, 1]
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<div class="rating">
|
|
14
|
+
<template
|
|
15
|
+
v-for="(item, index) in 5"
|
|
16
|
+
:key="index"
|
|
17
|
+
>
|
|
18
|
+
<input
|
|
19
|
+
type="radio"
|
|
20
|
+
:id="`star${item}-${id}`"
|
|
21
|
+
:name="`star-name${id}`"
|
|
22
|
+
:value="value[index]"
|
|
23
|
+
@input="computeModelValue"
|
|
24
|
+
/>
|
|
25
|
+
<label :for="`star${item}-${id}`"></label>
|
|
26
|
+
</template>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<style scoped>
|
|
31
|
+
@charset "UTF-8";
|
|
32
|
+
.rating {
|
|
33
|
+
display: inline-block;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.rating input {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.rating label {
|
|
41
|
+
float: right;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
transition: color 0.3s;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.rating label:before {
|
|
47
|
+
content: "★";
|
|
48
|
+
font-size: 30px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.rating input:checked ~ label,
|
|
52
|
+
.rating label:hover,
|
|
53
|
+
.rating label:hover ~ label {
|
|
54
|
+
color: #ffd700;
|
|
55
|
+
transition: color 0.3s;
|
|
56
|
+
}
|
|
57
|
+
</style>
|
|
@@ -0,0 +1,105 @@
|
|
|
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
|
+
color: {
|
|
14
|
+
required: false,
|
|
15
|
+
default: 'green',
|
|
16
|
+
type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
|
|
17
|
+
},
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
const emits = defineEmits(['update:modelValue'])
|
|
21
|
+
const input = (e: Event) => {
|
|
22
|
+
const target = e.target as HTMLInputElement
|
|
23
|
+
emits('update:modelValue', target.checked)
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<div>
|
|
29
|
+
<label
|
|
30
|
+
class="switch"
|
|
31
|
+
:class="[`color-${props.color}`]"
|
|
32
|
+
>
|
|
33
|
+
<input
|
|
34
|
+
type="checkbox"
|
|
35
|
+
@input="input"
|
|
36
|
+
:checked="props.checked"
|
|
37
|
+
/>
|
|
38
|
+
<span class="switch-slider"></span>
|
|
39
|
+
</label>
|
|
40
|
+
</div>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<style>
|
|
44
|
+
.switch {
|
|
45
|
+
direction: ltr;
|
|
46
|
+
--button-width: 3em;
|
|
47
|
+
--button-height: 1.5em;
|
|
48
|
+
--toggle-diameter: 1em;
|
|
49
|
+
--button-toggle-offset: calc(
|
|
50
|
+
(var(--button-height) - var(--toggle-diameter)) / 2
|
|
51
|
+
);
|
|
52
|
+
--toggle-shadow-offset: 10px;
|
|
53
|
+
--toggle-wider: 3em;
|
|
54
|
+
}
|
|
55
|
+
.switch-slider {
|
|
56
|
+
@apply bg-gray-300;
|
|
57
|
+
display: inline-block;
|
|
58
|
+
width: var(--button-width);
|
|
59
|
+
height: var(--button-height);
|
|
60
|
+
border-radius: calc(var(--button-height) / 2);
|
|
61
|
+
position: relative;
|
|
62
|
+
transition: 0.3s all ease-in-out;
|
|
63
|
+
}
|
|
64
|
+
.switch-slider::after {
|
|
65
|
+
content: "";
|
|
66
|
+
display: inline-block;
|
|
67
|
+
width: var(--toggle-diameter);
|
|
68
|
+
height: var(--toggle-diameter);
|
|
69
|
+
background-color: #fff;
|
|
70
|
+
border-radius: calc(var(--toggle-diameter) / 2);
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: var(--button-toggle-offset);
|
|
73
|
+
transform: translateX(var(--button-toggle-offset));
|
|
74
|
+
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
75
|
+
transition: 0.3s all ease-in-out;
|
|
76
|
+
}
|
|
77
|
+
.switch.color-orange input[type=checkbox]:checked + .switch-slider {
|
|
78
|
+
background-color: theme("colors.orange.500");
|
|
79
|
+
}
|
|
80
|
+
.switch.color-blue input[type=checkbox]:checked + .switch-slider {
|
|
81
|
+
background-color: theme("colors.blue.500");
|
|
82
|
+
}
|
|
83
|
+
.switch.color-gray input[type=checkbox]:checked + .switch-slider {
|
|
84
|
+
background-color: theme("colors.gray.500");
|
|
85
|
+
}
|
|
86
|
+
.switch.color-red input[type=checkbox]:checked + .switch-slider {
|
|
87
|
+
background-color: theme("colors.red.500");
|
|
88
|
+
}
|
|
89
|
+
.switch.color-green input[type=checkbox]:checked + .switch-slider {
|
|
90
|
+
background-color: theme("colors.green.500");
|
|
91
|
+
}
|
|
92
|
+
.switch input[type=checkbox]:checked + .switch-slider::after {
|
|
93
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
|
94
|
+
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
|
95
|
+
}
|
|
96
|
+
.switch input[type=checkbox] {
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
.switch input[type=checkbox]:active + .switch-slider::after {
|
|
100
|
+
width: var(--toggle-wider);
|
|
101
|
+
}
|
|
102
|
+
.switch input[type=checkbox]:checked:active + .switch-slider::after {
|
|
103
|
+
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
|
104
|
+
}
|
|
105
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.2.3-
|
|
2
|
+
"version": "1.2.3-3",
|
|
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",
|