nuxt-glorious 1.1.7 → 1.1.9

Sign up to get free protection for your applications and to get access to all the features.
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.7"
4
+ "version": "1.1.9"
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] : "";
@@ -21,10 +21,7 @@ export default function(url, options = defaultOptions) {
21
21
  const gKey = computeGKey(options.gKey, url);
22
22
  options.params = computeParams(options.params);
23
23
  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;
24
+ if (options.bodyType === "formData") options.body = computeFormData(options);
28
25
  const opt = {
29
26
  ...options,
30
27
  onRequest() {
@@ -55,8 +52,7 @@ export default function(url, options = defaultOptions) {
55
52
  } catch (e) {
56
53
  }
57
54
  }
58
- if (res.status === 401 && process.client)
59
- gs.authLogout();
55
+ if (res.status === 401 && process.client) gs.authLogout();
60
56
  }
61
57
  }
62
58
  };
@@ -65,14 +61,12 @@ export default function(url, options = defaultOptions) {
65
61
  return $fetch(url, opt);
66
62
  } else if (opt.method === "GET" && typeof opt.body === "undefined" && !opt.is$)
67
63
  return useFetch(url, opt);
68
- else
69
- return $fetch(url, opt);
64
+ else return $fetch(url, opt);
70
65
  }
71
66
  function computeParams(params) {
72
67
  const computeParams2 = {};
73
68
  Object.entries(params).map((item) => {
74
- if (item[1] !== null && item[1] !== "")
75
- computeParams2[item[0]] = item[1];
69
+ if (item[1] !== null && item[1] !== "") computeParams2[item[0]] = item[1];
76
70
  });
77
71
  return computeParams2;
78
72
  }
@@ -91,8 +85,7 @@ function computeFormData(options) {
91
85
  const form = new FormData();
92
86
  Object.entries(options.body).forEach((item) => {
93
87
  console.log(item[1]);
94
- if (item[1] === null)
95
- return;
88
+ if (item[1] === null) return;
96
89
  if (typeof item[1] === "object" && typeof item[1].lastModifiedDate === "undefined" && (typeof item[1].type === "undefined" && typeof item[1].size === "undefined"))
97
90
  Object.entries(item[1]).forEach((nestedItem, index) => {
98
91
  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,6 +1,5 @@
1
1
  {
2
- "version": "1.1.7",
3
- "type": "module",
2
+ "version": "1.1.9",
4
3
  "name": "nuxt-glorious",
5
4
  "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
6
5
  "repository": "sajadhzj/nuxt-glorious",
@@ -45,7 +44,7 @@
45
44
  "@types/node": "^20.11.29",
46
45
  "changelogen": "^0.5.5",
47
46
  "eslint": "^8.57.0",
48
- "nuxt": "^3.11.1",
47
+ "nuxt": "^3.13.2",
49
48
  "vitest": "^1.4.0"
50
49
  },
51
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
- }