nuxt-glorious 1.1.6 → 1.1.9-1

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.d.mts CHANGED
@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
2
2
 
3
3
  interface ModuleOptions {
4
4
  }
5
- declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
5
+ declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
6
6
 
7
7
  export { type ModuleOptions, _default as default };
package/dist/module.d.ts CHANGED
@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
2
2
 
3
3
  interface ModuleOptions {
4
4
  }
5
- declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
5
+ declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
6
6
 
7
7
  export { type ModuleOptions, _default as default };
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "glorious",
3
3
  "configKey": "glorious",
4
- "version": "1.1.6"
4
+ "version": "1.1.9-1"
5
5
  }
package/dist/module.mjs CHANGED
@@ -55,10 +55,7 @@ const module = defineNuxtModule({
55
55
  }
56
56
  }
57
57
  });
58
- await installModule("@pinia/nuxt", {
59
- exposeConfig: true,
60
- autoImports: ["defineStore", ["defineStore", "definePiniaStore"]]
61
- });
58
+ await installModule("@pinia/nuxt");
62
59
  addImportsDir(resolver.resolve("runtime/composables"));
63
60
  addImportsDir(resolver.resolve("runtime/utils"));
64
61
  addImportsDir(resolver.resolve("runtime/stores"));
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="12" cy="6" r="4" stroke="#282828" stroke-width="1.5"/>
3
+ <path d="M18 9C19.6569 9 21 7.88071 21 6.5C21 5.11929 19.6569 4 18 4" stroke="#282828" stroke-width="1.5" stroke-linecap="round"/>
4
+ <path d="M6 9C4.34315 9 3 7.88071 3 6.5C3 5.11929 4.34315 4 6 4" stroke="#282828" stroke-width="1.5" stroke-linecap="round"/>
5
+ <ellipse cx="12" cy="17" rx="6" ry="4" stroke="#282828" stroke-width="1.5"/>
6
+ <path d="M20 19C21.7542 18.6153 23 17.6411 23 16.5C23 15.3589 21.7542 14.3847 20 14" stroke="#282828" stroke-width="1.5" stroke-linecap="round"/>
7
+ <path d="M4 19C2.24575 18.6153 1 17.6411 1 16.5C1 15.3589 2.24575 14.3847 4 14" stroke="#282828" stroke-width="1.5" stroke-linecap="round"/>
8
+ </svg>
@@ -1,3 +1,7 @@
1
+ button:focus-visible {
2
+ outline: none;
3
+ }
4
+
1
5
  .xl.glorious-button-orange, .xl.glorious-button-blue, .xl.glorious-button-gray, .xl.glorious-button-red, .xl.glorious-button-primary {
2
6
  @apply py-2.5;
3
7
  }
@@ -44,7 +48,7 @@
44
48
  @apply text-gray-500 hover:bg-green-100;
45
49
  }
46
50
  .glorious-button-primary:disabled {
47
- @apply cursor-not-allowed;
51
+ @apply cursor-not-allowed opacity-50;
48
52
  }
49
53
  .glorious-button-primary:disabled:not(:disabled) {
50
54
  @apply bg-green-300;
@@ -57,7 +61,7 @@
57
61
  @apply text-gray-500 hover:bg-red-100;
58
62
  }
59
63
  .glorious-button-red:disabled {
60
- @apply cursor-not-allowed;
64
+ @apply cursor-not-allowed opacity-50;
61
65
  }
62
66
  .glorious-button-red:disabled:not(:disabled) {
63
67
  @apply bg-red-300;
@@ -70,7 +74,7 @@
70
74
  @apply text-gray-500 hover:bg-gray-100;
71
75
  }
72
76
  .glorious-button-gray:disabled {
73
- @apply cursor-not-allowed;
77
+ @apply cursor-not-allowed opacity-50;
74
78
  }
75
79
  .glorious-button-gray:disabled:not(:disabled) {
76
80
  @apply bg-gray-300;
@@ -83,7 +87,7 @@
83
87
  @apply text-gray-500 hover:bg-blue-100;
84
88
  }
85
89
  .glorious-button-blue:disabled {
86
- @apply cursor-not-allowed;
90
+ @apply cursor-not-allowed opacity-50;
87
91
  }
88
92
  .glorious-button-blue:disabled:not(:disabled) {
89
93
  @apply bg-blue-300;
@@ -96,7 +100,7 @@
96
100
  @apply text-gray-500 hover:bg-orange-100;
97
101
  }
98
102
  .glorious-button-orange:disabled {
99
- @apply cursor-not-allowed;
103
+ @apply cursor-not-allowed opacity-50;
100
104
  }
101
105
  .glorious-button-orange:disabled:not(:disabled) {
102
106
  @apply bg-orange-300;
@@ -1,33 +1,41 @@
1
- .bg-blur-modal {
2
- @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
3
- }
4
-
5
- .glorious-modal {
1
+ .g-scafold-modal {
6
2
  @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
7
3
  }
8
- .glorious-modal.size-full {
4
+ .g-scafold-modal-header {
5
+ @apply flex justify-between items-center;
6
+ }
7
+ .g-scafold-modal-footer {
8
+ @apply flex justify-center gap-3;
9
+ }
10
+ .g-scafold-modal-footer > button {
11
+ @apply min-w-24;
12
+ }
13
+ .g-scafold-modal-bg-blur {
14
+ @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
15
+ }
16
+ .g-scafold-modal.size-full {
9
17
  @apply w-full h-full top-0 rounded-none;
10
18
  }
11
- .glorious-modal.size-xl {
19
+ .g-scafold-modal.size-xl {
12
20
  @apply md:w-[70%] w-full md:h-max max-h-[70%];
13
21
  }
14
- .glorious-modal.size-lg {
22
+ .g-scafold-modal.size-lg {
15
23
  @apply md:w-[60%] w-full md:h-max max-h-[70%];
16
24
  }
17
- .glorious-modal.size-md {
25
+ .g-scafold-modal.size-md {
18
26
  @apply md:w-[50%] w-full md:h-max max-h-[70%];
19
27
  }
20
- .glorious-modal.size-sm {
28
+ .g-scafold-modal.size-sm {
21
29
  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
22
30
  }
23
- .glorious-modal.close {
31
+ .g-scafold-modal.close {
24
32
  @apply hidden;
25
33
  }
26
- .glorious-modal.open {
34
+ .g-scafold-modal.open {
27
35
  animation: animation-mobile 0.3s normal forwards;
28
36
  }
29
37
  @screen md {
30
- .glorious-modal.open {
38
+ .g-scafold-modal.open {
31
39
  animation: animation-opacity 0.2s normal forwards;
32
40
  }
33
41
  }
@@ -40,7 +48,10 @@
40
48
  }
41
49
  }
42
50
  @keyframes animation-mobile {
51
+ from {
52
+ transform: translateY(100%);
53
+ }
43
54
  to {
44
- bottom: 0;
55
+ transform: translateY(0);
45
56
  }
46
57
  }
@@ -36,6 +36,13 @@ const props = defineProps({
36
36
  type: String,
37
37
  },
38
38
  });
39
+
40
+ const emits = defineEmits(["click"]);
41
+ const click = () => {
42
+ if (props.loading) return;
43
+
44
+ emits("click");
45
+ };
39
46
  </script>
40
47
 
41
48
  <template>
@@ -48,6 +55,7 @@ const props = defineProps({
48
55
  props.outline ? 'outline' : '',
49
56
  ]"
50
57
  :disabled="props.disabled"
58
+ @click="click"
51
59
  >
52
60
  <div v-if="props.loading" class="loading">
53
61
  <GLoading />
@@ -64,14 +72,15 @@ const props = defineProps({
64
72
  ]"
65
73
  :disabled="props.disabled"
66
74
  >
67
- <div v-if="props.loading" class="loading">
68
- <GLoading />
69
- </div>
70
- <slot v-else />
75
+ <slot />
71
76
  </NuxtLink>
72
77
  </template>
73
78
 
74
79
  <style>
80
+ button:focus-visible {
81
+ outline: none;
82
+ }
83
+
75
84
  .xl.glorious-button-orange, .xl.glorious-button-blue, .xl.glorious-button-gray, .xl.glorious-button-red, .xl.glorious-button-primary {
76
85
  @apply py-2.5;
77
86
  }
@@ -118,7 +127,7 @@ const props = defineProps({
118
127
  @apply text-gray-500 hover:bg-green-100;
119
128
  }
120
129
  .glorious-button-primary:disabled {
121
- @apply cursor-not-allowed;
130
+ @apply cursor-not-allowed opacity-50;
122
131
  }
123
132
  .glorious-button-primary:disabled:not(:disabled) {
124
133
  @apply bg-green-300;
@@ -131,7 +140,7 @@ const props = defineProps({
131
140
  @apply text-gray-500 hover:bg-red-100;
132
141
  }
133
142
  .glorious-button-red:disabled {
134
- @apply cursor-not-allowed;
143
+ @apply cursor-not-allowed opacity-50;
135
144
  }
136
145
  .glorious-button-red:disabled:not(:disabled) {
137
146
  @apply bg-red-300;
@@ -144,7 +153,7 @@ const props = defineProps({
144
153
  @apply text-gray-500 hover:bg-gray-100;
145
154
  }
146
155
  .glorious-button-gray:disabled {
147
- @apply cursor-not-allowed;
156
+ @apply cursor-not-allowed opacity-50;
148
157
  }
149
158
  .glorious-button-gray:disabled:not(:disabled) {
150
159
  @apply bg-gray-300;
@@ -157,7 +166,7 @@ const props = defineProps({
157
166
  @apply text-gray-500 hover:bg-blue-100;
158
167
  }
159
168
  .glorious-button-blue:disabled {
160
- @apply cursor-not-allowed;
169
+ @apply cursor-not-allowed opacity-50;
161
170
  }
162
171
  .glorious-button-blue:disabled:not(:disabled) {
163
172
  @apply bg-blue-300;
@@ -170,7 +179,7 @@ const props = defineProps({
170
179
  @apply text-gray-500 hover:bg-orange-100;
171
180
  }
172
181
  .glorious-button-orange:disabled {
173
- @apply cursor-not-allowed;
182
+ @apply cursor-not-allowed opacity-50;
174
183
  }
175
184
  .glorious-button-orange:disabled:not(:disabled) {
176
185
  @apply bg-orange-300;
@@ -2,7 +2,7 @@
2
2
  const props = defineProps({
3
3
  modelValue: {
4
4
  required: true,
5
- type: [String, Object],
5
+ type: [String, Object, null],
6
6
  },
7
7
  color: {
8
8
  required: false,
@@ -19,8 +19,8 @@ const props = defineProps({
19
19
  },
20
20
  stroke: {
21
21
  required: false,
22
- type: Number,
23
- default: 1,
22
+ type: [Number, null],
23
+ default: null,
24
24
  },
25
25
  });
26
26
 
@@ -81,16 +81,17 @@ const methods = {
81
81
  .join(" ");
82
82
 
83
83
  //stroke
84
- icon = icon.replaceAll("\n", " ");
85
-
86
- icon = icon
87
- .split(" ")
88
- .map((item: any) =>
89
- item.includes("stroke-width") && typeof props.stroke !== "undefined"
90
- ? 'stroke-width="' + props.stroke + '"'
91
- : item
92
- )
93
- .join(" ");
84
+ if (props.stroke !== null) {
85
+ icon = icon.replaceAll("\n", " ");
86
+ icon = icon
87
+ .split(" ")
88
+ .map((item: any) =>
89
+ item.includes("stroke-width") && typeof props.stroke !== "undefined"
90
+ ? 'stroke-width="' + props.stroke + '"'
91
+ : item
92
+ )
93
+ .join(" ");
94
+ }
94
95
 
95
96
  return icon;
96
97
  },
@@ -31,5 +31,5 @@ const props = defineProps({
31
31
  </template>
32
32
 
33
33
  <style>
34
- .loader{animation:l20-1 .8s linear infinite alternate,l20-2 1.6s linear infinite;aspect-ratio:1;border-radius:50%}@keyframes l20-1{0%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0)}12.5%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0)}25%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%)}62.5%{-webkit-clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%)}75%{-webkit-clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0deg)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0deg)}to{transform:scaleY(-1) rotate(-135deg)}}
34
+ .loader{animation:l20-1 .8s linear infinite alternate,l20-2 1.6s linear infinite;aspect-ratio:1;border-radius:50%}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0)}25%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0deg)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0deg)}to{transform:scaleY(-1) rotate(-135deg)}}
35
35
  </style>
@@ -1,11 +1,10 @@
1
1
  <script lang="ts" setup>
2
- import modal from "../../utils/modal";
3
-
2
+ import { onMounted, useId, watch } from "#imports";
4
3
  const props = defineProps({
5
- id: {
6
- required: false,
7
- default: "modal",
8
- type: String,
4
+ modelValue: {
5
+ required: true,
6
+ default: false,
7
+ type: Boolean,
9
8
  },
10
9
  size: {
11
10
  required: false,
@@ -17,64 +16,145 @@ const props = defineProps({
17
16
  default: "",
18
17
  type: String,
19
18
  },
19
+ okBtn: {
20
+ required: false,
21
+ default: "",
22
+ type: String,
23
+ },
24
+ okBtnLoading: {
25
+ required: false,
26
+ default: false,
27
+ type: Boolean,
28
+ },
29
+ closeBtn: {
30
+ required: false,
31
+ default: "",
32
+ type: String,
33
+ },
34
+ rtl: {
35
+ required: false,
36
+ default: "rtl",
37
+ type: String as () => "rtl" | "ltr",
38
+ },
39
+ blur: {
40
+ required: false,
41
+ default: true,
42
+ type: Boolean,
43
+ },
44
+ blurClose: {
45
+ required: false,
46
+ default: true,
47
+ type: Boolean,
48
+ },
20
49
  });
50
+
51
+ const emits = defineEmits(["ok", "close", "update:modelValue"]);
52
+
53
+ const addBlurBackground = (): void => {
54
+ const backgroundBlur = document.createElement("div");
55
+ backgroundBlur.classList.add("g-scafold-modal-bg-blur");
56
+ const nuxt: any = document.getElementById("__nuxt");
57
+ nuxt.appendChild(backgroundBlur);
58
+ backgroundBlur.addEventListener("click", () => {
59
+ if (props.blurClose) {
60
+ emits("update:modelValue", false);
61
+ backgroundBlur.remove();
62
+ }
63
+ });
64
+ };
65
+
66
+ watch(
67
+ () => props.modelValue,
68
+ () => {
69
+ if (props.modelValue && props.blur) {
70
+ addBlurBackground();
71
+ } else {
72
+ const blur: any = document.querySelector(".g-scafold-modal-bg-blur");
73
+ if (blur !== null) blur.remove();
74
+ }
75
+ }
76
+ );
21
77
  </script>
22
78
 
23
79
  <template>
24
80
  <div
25
- :id="props.id"
26
- :class="[`size-${props.size}`]"
27
- class="glorious-modal close"
81
+ class="g-scafold-modal"
82
+ :class="[props.modelValue ? 'open' : 'close', `size-${props.size}`]"
28
83
  >
29
- <!-- start title -->
30
- <div v-if="props?.title !== ''" class="flex justify-between items-center">
84
+ <!-- header -->
85
+ <div v-show="props?.title !== ''" class="g-scafold-modal-header">
31
86
  <span class="font-medium">{{ props.title }}</span>
32
87
  <GButton
33
88
  class="flex justify-center items-center w-6 h-6"
34
89
  size="sm"
35
- @click="modal(`${props.id}`)"
90
+ color="red"
91
+ @click="emits('update:modelValue', false)"
36
92
  >
37
93
  <GIcon name="glorious-x" color="#fff" :size="10" />
38
94
  </GButton>
39
95
  </div>
40
- <hr v-if="props.title !== ''" class="my-3" />
41
- <!-- end title -->
96
+ <hr v-show="props.title !== ''" class="my-3" />
97
+ <!-- end hader -->
98
+
99
+ <div class="g-scafold-modal-header">
100
+ <slot />
101
+ </div>
42
102
 
43
- <slot />
103
+ <!-- start footer -->
104
+ <div v-show="props.okBtn !== ''" class="g-scafold-modal-footer">
105
+ <GButton :loading="props.okBtnLoading" @click="emits('ok')">
106
+ {{ props.okBtn }}
107
+ </GButton>
108
+ <GButton
109
+ v-show="props.closeBtn !== ''"
110
+ @click="emits('update:modelValue', false)"
111
+ >
112
+ {{ props.closeBtn }}Z
113
+ </GButton>
114
+ </div>
115
+ <!-- end footer -->
44
116
  </div>
45
117
  </template>
46
118
 
47
119
  <style>
48
- .bg-blur-modal {
49
- @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
50
- }
51
-
52
- .glorious-modal {
120
+ .g-scafold-modal {
53
121
  @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
54
122
  }
55
- .glorious-modal.size-full {
123
+ .g-scafold-modal-header {
124
+ @apply flex justify-between items-center;
125
+ }
126
+ .g-scafold-modal-footer {
127
+ @apply flex justify-center gap-3;
128
+ }
129
+ .g-scafold-modal-footer > button {
130
+ @apply min-w-24;
131
+ }
132
+ .g-scafold-modal-bg-blur {
133
+ @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
134
+ }
135
+ .g-scafold-modal.size-full {
56
136
  @apply w-full h-full top-0 rounded-none;
57
137
  }
58
- .glorious-modal.size-xl {
138
+ .g-scafold-modal.size-xl {
59
139
  @apply md:w-[70%] w-full md:h-max max-h-[70%];
60
140
  }
61
- .glorious-modal.size-lg {
141
+ .g-scafold-modal.size-lg {
62
142
  @apply md:w-[60%] w-full md:h-max max-h-[70%];
63
143
  }
64
- .glorious-modal.size-md {
144
+ .g-scafold-modal.size-md {
65
145
  @apply md:w-[50%] w-full md:h-max max-h-[70%];
66
146
  }
67
- .glorious-modal.size-sm {
147
+ .g-scafold-modal.size-sm {
68
148
  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
69
149
  }
70
- .glorious-modal.close {
150
+ .g-scafold-modal.close {
71
151
  @apply hidden;
72
152
  }
73
- .glorious-modal.open {
153
+ .g-scafold-modal.open {
74
154
  animation: animation-mobile 0.3s normal forwards;
75
155
  }
76
156
  @screen md {
77
- .glorious-modal.open {
157
+ .g-scafold-modal.open {
78
158
  animation: animation-opacity 0.2s normal forwards;
79
159
  }
80
160
  }
@@ -87,8 +167,11 @@ const props = defineProps({
87
167
  }
88
168
  }
89
169
  @keyframes animation-mobile {
170
+ from {
171
+ transform: translateY(100%);
172
+ }
90
173
  to {
91
- bottom: 0;
174
+ transform: translateY(0);
92
175
  }
93
176
  }
94
177
  </style>
@@ -17,7 +17,7 @@ const props = defineProps({
17
17
  },
18
18
  bgColor: {
19
19
  required: false,
20
- default: "0000ff",
20
+ default: "#0000ff",
21
21
  type: String,
22
22
  },
23
23
  });
@@ -28,8 +28,8 @@ const methods = {
28
28
  Array.from(circularProgress).forEach((progressBar: any) => {
29
29
  const progressValue: any = progressBar.querySelector(".percentage");
30
30
  const innerCircle: any = progressBar.querySelector(".inner-circle");
31
- console.log(props.step);
32
31
  const eachStep = (1 / props.items.length) * 100;
32
+
33
33
  let startValue =
34
34
  Number(progressBar.getAttribute("data-percentage")) - eachStep < 0
35
35
  ? 0
@@ -40,7 +40,7 @@ const methods = {
40
40
  ? 0
41
41
  : Number(progressBar.getAttribute("data-percentage")) + eachStep,
42
42
  progressColor = progressBar.getAttribute("data-progress-color");
43
- console.log(startValue, endValue);
43
+
44
44
  const progress = setInterval(() => {
45
45
  progressValue.textContent = props.step + 1;
46
46
 
@@ -51,24 +51,21 @@ const methods = {
51
51
  progressBar.style.background = `conic-gradient(${progressColor} ${
52
52
  startValue * 3.6
53
53
  }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
54
- if (startValue === endValue) {
54
+
55
+ if (Math.floor(startValue) == Math.floor(endValue))
55
56
  clearInterval(progress);
56
- }
57
+
57
58
  startValue++;
58
59
  }, 10);
59
60
  });
60
61
  },
61
62
  };
62
63
 
63
- onMounted(() => {
64
- methods.computeWizardMobile();
65
- });
64
+ onMounted(() => methods.computeWizardMobile());
66
65
 
67
66
  watch(
68
67
  () => props.step,
69
- () => {
70
- methods.computeWizardMobile();
71
- }
68
+ () => methods.computeWizardMobile()
72
69
  );
73
70
  </script>
74
71
 
@@ -76,9 +73,12 @@ watch(
76
73
  <div class="glorious-wizard">
77
74
  <div class="glorious-wizard-desktop">
78
75
  <div v-for="(item, index) in props.items" :key="index">
79
- <div class="circle" :class="index < props.step ? 'checked' : ''">
76
+ <div
77
+ class="circle"
78
+ :class="parseInt(index) < props.step ? 'checked' : ''"
79
+ >
80
80
  <GIcon
81
- v-if="index < props.step"
81
+ v-if="parseInt(index) < props.step"
82
82
  name="glorious-check-fill"
83
83
  color="#ffffff"
84
84
  />
@@ -41,6 +41,11 @@ const props = defineProps({
41
41
  default: "off",
42
42
  type: String,
43
43
  },
44
+ rows: {
45
+ require: false,
46
+ default: 3,
47
+ type: Number,
48
+ },
44
49
  });
45
50
 
46
51
  const inputValue: any = ref(null);
@@ -66,6 +71,7 @@ watch(
66
71
  :class="[props.size, `glorious-textarea-${props.color}`]"
67
72
  :placeholder="props.placeholder"
68
73
  :disabled="props.disabled"
74
+ :rows="props.rows"
69
75
  />
70
76
  </div>
71
77
  <GErrorText :error="props.error" />
@@ -11,8 +11,7 @@ export const useGloriousAppSetting = {
11
11
  if (typeof appSetting.value === "undefined") {
12
12
  appSetting.value = defaultSetting;
13
13
  result = defaultSetting;
14
- } else
15
- result = defu(appSetting.value, defaultSetting);
14
+ } else result = defu(appSetting.value, defaultSetting);
16
15
  return result;
17
16
  },
18
17
  setSetting: (key, value) => {
@@ -2,8 +2,7 @@ export const useGloriousCore = {
2
2
  numbersWithSeperateSamePrice: (value) => {
3
3
  let nStr = value.match(/\d+/g)?.join("") + "";
4
4
  nStr = nStr.replace(/\,/g, "");
5
- if (nStr === "undefined")
6
- nStr = "";
5
+ if (nStr === "undefined") nStr = "";
7
6
  const x = nStr.split(".");
8
7
  let x1 = x[0];
9
8
  const x2 = x.length > 1 ? "." + x[1] : "";
@@ -11,7 +11,6 @@ const defaultOptions = {
11
11
  Accept: "application/json"
12
12
  },
13
13
  bodyType: "normal",
14
- body: {},
15
14
  credentials: "same-origin"
16
15
  };
17
16
  export default function(url, options = defaultOptions) {
@@ -21,10 +20,7 @@ export default function(url, options = defaultOptions) {
21
20
  const gKey = computeGKey(options.gKey, url);
22
21
  options.params = computeParams(options.params);
23
22
  options.headers = { ...options.headers, ...computeAuth() };
24
- if (options.bodyType === "formData")
25
- options.body = computeFormData(options);
26
- if (options.bodyType === "normal" && Object.entries(options.body).length === 0)
27
- delete options.body;
23
+ if (options.bodyType === "formData") options.body = computeFormData(options);
28
24
  const opt = {
29
25
  ...options,
30
26
  onRequest() {
@@ -55,8 +51,7 @@ export default function(url, options = defaultOptions) {
55
51
  } catch (e) {
56
52
  }
57
53
  }
58
- if (res.status === 401 && process.client)
59
- gs.authLogout();
54
+ if (res.status === 401 && process.client) gs.authLogout();
60
55
  }
61
56
  }
62
57
  };
@@ -65,14 +60,12 @@ export default function(url, options = defaultOptions) {
65
60
  return $fetch(url, opt);
66
61
  } else if (opt.method === "GET" && typeof opt.body === "undefined" && !opt.is$)
67
62
  return useFetch(url, opt);
68
- else
69
- return $fetch(url, opt);
63
+ else return $fetch(url, opt);
70
64
  }
71
65
  function computeParams(params) {
72
66
  const computeParams2 = {};
73
67
  Object.entries(params).map((item) => {
74
- if (item[1] !== null && item[1] !== "")
75
- computeParams2[item[0]] = item[1];
68
+ if (item[1] !== null && item[1] !== "") computeParams2[item[0]] = item[1];
76
69
  });
77
70
  return computeParams2;
78
71
  }
@@ -91,8 +84,7 @@ function computeFormData(options) {
91
84
  const form = new FormData();
92
85
  Object.entries(options.body).forEach((item) => {
93
86
  console.log(item[1]);
94
- if (item[1] === null)
95
- return;
87
+ if (item[1] === null) return;
96
88
  if (typeof item[1] === "object" && typeof item[1].lastModifiedDate === "undefined" && (typeof item[1].type === "undefined" && typeof item[1].size === "undefined"))
97
89
  Object.entries(item[1]).forEach((nestedItem, index) => {
98
90
  form.append(`${item[0]}[${index}]`, nestedItem[1]);
@@ -19,8 +19,7 @@ export default function(object = head) {
19
19
  ogDescription: () => `${description}`,
20
20
  ogType: () => type
21
21
  };
22
- if (image !== "")
23
- seoObject["image"] = image;
22
+ if (image !== "") seoObject["image"] = image;
24
23
  if (title === "") {
25
24
  seoObject["title"] = moduleConfig.public.glorious.seo.title;
26
25
  seoObject["ogTitle"] = moduleConfig.public.glorious.seo.title;
@@ -8,10 +8,8 @@ export default defineNuxtRouteMiddleware(() => {
8
8
  const nuxtApp = useNuxtApp();
9
9
  const moduleConfig = nuxtApp.$config.public.glorious;
10
10
  const gs = GloriousStore();
11
- if (moduleConfig.auth.strategy.provider === "")
12
- return;
11
+ if (moduleConfig.auth.strategy.provider === "") return;
13
12
  const cookieToken = useCookie(moduleConfig.auth.cookie.name);
14
- if (typeof cookieToken.value === "undefined")
15
- return;
13
+ if (typeof cookieToken.value === "undefined") return;
16
14
  nuxtApp.hook("app:beforeMount", () => gs.authGetUser(cookieToken.value));
17
15
  });
@@ -2,6 +2,7 @@ export declare const GloriousStore: import("pinia").StoreDefinition<"GloriousSto
2
2
  authIsLogin(): boolean;
3
3
  }, {
4
4
  formCreate(key: string | Array<string>): void;
5
+ modalCreate(key: string | Array<string>): void;
5
6
  authLogout(): void;
6
7
  authSetToken(token: string, to?: string | null): void;
7
8
  authParseToken(token: any): any;
@@ -8,7 +8,8 @@ export const GloriousStore = defineStore("GloriousStore", {
8
8
  },
9
9
  loading: {},
10
10
  keepData: {},
11
- forms: {}
11
+ forms: {},
12
+ modals: {}
12
13
  }),
13
14
  getters: {
14
15
  authIsLogin() {
@@ -33,6 +34,19 @@ export const GloriousStore = defineStore("GloriousStore", {
33
34
  };
34
35
  });
35
36
  },
37
+ modalCreate(key) {
38
+ this.modals = {};
39
+ const defaultValue = {
40
+ show: false,
41
+ keepData: {}
42
+ };
43
+ if (typeof key === "string")
44
+ this.modals[key] = defaultValue;
45
+ else
46
+ key.map((item) => {
47
+ this.modals[item] = defaultValue;
48
+ });
49
+ },
36
50
  authLogout() {
37
51
  const moduleConfig = useRuntimeConfig();
38
52
  const token = useCookie(moduleConfig.public.glorious.auth.cookie.name);
@@ -49,8 +63,7 @@ export const GloriousStore = defineStore("GloriousStore", {
49
63
  });
50
64
  cookie.value = token;
51
65
  this.authGetUser(token);
52
- if (to)
53
- navigateTo(to);
66
+ if (to) navigateTo(to);
54
67
  },
55
68
  authParseToken(token) {
56
69
  const base64Url = token.split(".")[1];
@@ -77,10 +90,8 @@ export const GloriousStore = defineStore("GloriousStore", {
77
90
  }
78
91
  ).then((data) => {
79
92
  const pick = moduleConfig.public.glorious.auth.strategy.endpoints.userInfo.pick;
80
- if (pick !== "")
81
- this.auth.user = data.data.value[pick];
82
- else
83
- this.auth.user = data.data.value;
93
+ if (pick !== "") this.auth.user = data.data.value[pick];
94
+ else this.auth.user = data.data.value;
84
95
  this.auth.loaded = true;
85
96
  });
86
97
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.1.6",
2
+ "version": "1.1.9-1",
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",
@@ -44,7 +44,7 @@
44
44
  "@types/node": "^20.11.29",
45
45
  "changelogen": "^0.5.5",
46
46
  "eslint": "^8.57.0",
47
- "nuxt": "^3.11.1",
47
+ "nuxt": "^3.13.2",
48
48
  "vitest": "^1.4.0"
49
49
  },
50
50
  "overrides": {
@@ -1 +0,0 @@
1
- export default function modal(key?: string, keepData?: {}): void;
@@ -1,26 +0,0 @@
1
- import { GloriousStore } from "#imports";
2
- export default function modal(key = "modal", keepData = {}) {
3
- const addBlurBackground = (key2) => {
4
- const backgroundBlur = document.createElement("div");
5
- backgroundBlur.classList.add("bg-blur-modal");
6
- const nuxt = document.getElementById("__nuxt");
7
- nuxt.appendChild(backgroundBlur);
8
- backgroundBlur.addEventListener("click", () => {
9
- const componentId = document.getElementById(key2);
10
- componentId.classList.replace("open", "close");
11
- backgroundBlur.remove();
12
- });
13
- };
14
- const modal2 = document.getElementById(key);
15
- const gloriousStore = GloriousStore();
16
- gloriousStore.keepData = keepData;
17
- if (modal2?.classList.contains("close")) {
18
- modal2?.classList.replace("close", "open");
19
- modal2.style.bottom = `-${modal2.offsetHeight}px`;
20
- addBlurBackground(key);
21
- } else {
22
- modal2?.classList.add("close");
23
- const bgBlur = document.querySelector(".bg-blur-modal");
24
- bgBlur?.remove();
25
- }
26
- }