nuxt-glorious 1.0.0-1 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "glorious",
3
3
  "configKey": "glorious",
4
- "version": "1.0.0-1"
4
+ "version": "1.1.0"
5
5
  }
package/dist/module.mjs CHANGED
@@ -56,9 +56,11 @@ const module = defineNuxtModule({
56
56
  }
57
57
  });
58
58
  await installModule("@pinia/nuxt", {
59
+ exposeConfig: true,
59
60
  autoImports: ["defineStore", ["defineStore", "definePiniaStore"]]
60
61
  });
61
62
  addImportsDir(resolver.resolve("runtime/composables"));
63
+ addImportsDir(resolver.resolve("runtime/utils"));
62
64
  addImportsDir(resolver.resolve("runtime/stores"));
63
65
  addImportsDir(resolver.resolve("runtime/middlewares"));
64
66
  addComponentsDir({
@@ -71,10 +73,6 @@ const module = defineNuxtModule({
71
73
  dir: resolver.resolve("./runtime/assets")
72
74
  });
73
75
  });
74
- addPlugin({
75
- src: resolver.resolve("./runtime/plugins/shortcut-key"),
76
- mode: "client"
77
- });
78
76
  addPlugin(resolver.resolve("./runtime/plugins/Modal"));
79
77
  addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
80
78
  addPlugin(resolver.resolve("./runtime/plugins/Drawer"));
@@ -0,0 +1,10 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_138_29818)">
3
+ <path d="M1.18091 12C2.12091 6.88 6.60791 3 11.9999 3C17.3919 3 21.8779 6.88 22.8189 12C21.8789 17.12 17.3919 21 11.9999 21C6.60791 21 2.12191 17.12 1.18091 12ZM11.9999 17C13.326 17 14.5978 16.4732 15.5354 15.5355C16.4731 14.5979 16.9999 13.3261 16.9999 12C16.9999 10.6739 16.4731 9.40215 15.5354 8.46447C14.5978 7.52678 13.326 7 11.9999 7C10.6738 7 9.40206 7.52678 8.46437 8.46447C7.52669 9.40215 6.99991 10.6739 6.99991 12C6.99991 13.3261 7.52669 14.5979 8.46437 15.5355C9.40206 16.4732 10.6738 17 11.9999 17ZM11.9999 15C11.2043 15 10.4412 14.6839 9.87859 14.1213C9.31598 13.5587 8.99991 12.7956 8.99991 12C8.99991 11.2044 9.31598 10.4413 9.87859 9.87868C10.4412 9.31607 11.2043 9 11.9999 9C12.7956 9 13.5586 9.31607 14.1212 9.87868C14.6838 10.4413 14.9999 11.2044 14.9999 12C14.9999 12.7956 14.6838 13.5587 14.1212 14.1213C13.5586 14.6839 12.7956 15 11.9999 15Z" fill="black"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_138_29818">
7
+ <rect width="24" height="24" fill="white"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
@@ -0,0 +1,10 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_138_29807)">
3
+ <path d="M4.51991 5.93407L1.39291 2.80807L2.80791 1.39307L22.6069 21.1931L21.1919 22.6071L17.8819 19.2971C16.1231 20.4126 14.0826 21.0034 11.9999 21.0001C6.60791 21.0001 2.12191 17.1201 1.18091 12.0001C1.61094 9.67078 2.78254 7.54296 4.52091 5.93407H4.51991ZM14.7569 16.1721L13.2929 14.7081C12.733 14.976 12.1037 15.0636 11.4918 14.9589C10.88 14.8541 10.3157 14.5621 9.87678 14.1232C9.43785 13.6843 9.14588 13.12 9.04112 12.5081C8.93637 11.8963 9.02399 11.267 9.29191 10.7071L7.82791 9.24307C7.19162 10.2046 6.90718 11.3564 7.02274 12.5036C7.1383 13.6507 7.64676 14.7227 8.46203 15.5379C9.27729 16.3532 10.3493 16.8617 11.4964 16.9772C12.6436 17.0928 13.7954 16.8084 14.7569 16.1721ZM7.97391 3.76007C9.22091 3.27007 10.5799 3.00007 11.9999 3.00007C17.3919 3.00007 21.8779 6.88007 22.8189 12.0001C22.5125 13.6658 21.8238 15.2376 20.8069 16.5921L16.9469 12.7321C17.0616 11.9597 16.9937 11.1712 16.7488 10.4297C16.5039 9.68827 16.0888 9.01448 15.5366 8.46233C14.9845 7.91019 14.3107 7.49504 13.5693 7.25014C12.8278 7.00524 12.0393 6.93741 11.2669 7.05207L7.97391 3.76107V3.76007Z" fill="black"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_138_29807">
7
+ <rect width="24" height="24" fill="white"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
@@ -44,7 +44,10 @@
44
44
  @apply text-gray-500 hover:bg-green-100;
45
45
  }
46
46
  .glorious-button-primary:disabled {
47
- @apply bg-green-300 cursor-not-allowed;
47
+ @apply cursor-not-allowed;
48
+ }
49
+ .glorious-button-primary:disabled:not(:disabled) {
50
+ @apply bg-green-300;
48
51
  }
49
52
 
50
53
  .glorious-button-red {
@@ -54,7 +57,10 @@
54
57
  @apply text-gray-500 hover:bg-red-100;
55
58
  }
56
59
  .glorious-button-red:disabled {
57
- @apply bg-red-300 cursor-not-allowed;
60
+ @apply cursor-not-allowed;
61
+ }
62
+ .glorious-button-red:disabled:not(:disabled) {
63
+ @apply bg-red-300;
58
64
  }
59
65
 
60
66
  .glorious-button-gray {
@@ -64,7 +70,10 @@
64
70
  @apply text-gray-500 hover:bg-gray-100;
65
71
  }
66
72
  .glorious-button-gray:disabled {
67
- @apply bg-gray-300 cursor-not-allowed;
73
+ @apply cursor-not-allowed;
74
+ }
75
+ .glorious-button-gray:disabled:not(:disabled) {
76
+ @apply bg-gray-300;
68
77
  }
69
78
 
70
79
  .glorious-button-blue {
@@ -74,7 +83,10 @@
74
83
  @apply text-gray-500 hover:bg-blue-100;
75
84
  }
76
85
  .glorious-button-blue:disabled {
77
- @apply bg-blue-300 cursor-not-allowed;
86
+ @apply cursor-not-allowed;
87
+ }
88
+ .glorious-button-blue:disabled:not(:disabled) {
89
+ @apply bg-blue-300;
78
90
  }
79
91
 
80
92
  .glorious-button-orange {
@@ -84,5 +96,8 @@
84
96
  @apply text-gray-500 hover:bg-orange-100;
85
97
  }
86
98
  .glorious-button-orange:disabled {
87
- @apply bg-orange-300 cursor-not-allowed;
99
+ @apply cursor-not-allowed;
100
+ }
101
+ .glorious-button-orange:disabled:not(:disabled) {
102
+ @apply bg-orange-300;
88
103
  }
@@ -19,35 +19,35 @@
19
19
  }
20
20
 
21
21
  .glorious-input-primary {
22
- @apply rounded-md ring-1 ring-green-500 px-3;
22
+ @apply rounded-md ring-1 ring-green-500;
23
23
  }
24
24
  .glorious-input-primary:disabled {
25
25
  @apply bg-green-300 cursor-not-allowed;
26
26
  }
27
27
 
28
28
  .glorious-input-red {
29
- @apply rounded-md ring-1 ring-red-500 px-3;
29
+ @apply rounded-md ring-1 ring-red-500;
30
30
  }
31
31
  .glorious-input-red:disabled {
32
32
  @apply cursor-not-allowed;
33
33
  }
34
34
 
35
35
  .glorious-input-gray {
36
- @apply rounded-md ring-1 ring-gray-500 px-3;
36
+ @apply rounded-md ring-1 ring-gray-500;
37
37
  }
38
38
  .glorious-input-gray:disabled {
39
39
  @apply cursor-not-allowed;
40
40
  }
41
41
 
42
42
  .glorious-input-blue {
43
- @apply rounded-md ring-1 ring-blue-500 px-3;
43
+ @apply rounded-md ring-1 ring-blue-500;
44
44
  }
45
45
  .glorious-input-blue:disabled {
46
46
  @apply cursor-not-allowed;
47
47
  }
48
48
 
49
49
  .glorious-input-orange {
50
- @apply rounded-md ring-1 ring-orange-500 px-3;
50
+ @apply rounded-md ring-1 ring-orange-500;
51
51
  }
52
52
  .glorious-input-orange:disabled {
53
53
  @apply cursor-not-allowed;
@@ -118,7 +118,10 @@ const props = defineProps({
118
118
  @apply text-gray-500 hover:bg-green-100;
119
119
  }
120
120
  .glorious-button-primary:disabled {
121
- @apply bg-green-300 cursor-not-allowed;
121
+ @apply cursor-not-allowed;
122
+ }
123
+ .glorious-button-primary:disabled:not(:disabled) {
124
+ @apply bg-green-300;
122
125
  }
123
126
 
124
127
  .glorious-button-red {
@@ -128,7 +131,10 @@ const props = defineProps({
128
131
  @apply text-gray-500 hover:bg-red-100;
129
132
  }
130
133
  .glorious-button-red:disabled {
131
- @apply bg-red-300 cursor-not-allowed;
134
+ @apply cursor-not-allowed;
135
+ }
136
+ .glorious-button-red:disabled:not(:disabled) {
137
+ @apply bg-red-300;
132
138
  }
133
139
 
134
140
  .glorious-button-gray {
@@ -138,7 +144,10 @@ const props = defineProps({
138
144
  @apply text-gray-500 hover:bg-gray-100;
139
145
  }
140
146
  .glorious-button-gray:disabled {
141
- @apply bg-gray-300 cursor-not-allowed;
147
+ @apply cursor-not-allowed;
148
+ }
149
+ .glorious-button-gray:disabled:not(:disabled) {
150
+ @apply bg-gray-300;
142
151
  }
143
152
 
144
153
  .glorious-button-blue {
@@ -148,7 +157,10 @@ const props = defineProps({
148
157
  @apply text-gray-500 hover:bg-blue-100;
149
158
  }
150
159
  .glorious-button-blue:disabled {
151
- @apply bg-blue-300 cursor-not-allowed;
160
+ @apply cursor-not-allowed;
161
+ }
162
+ .glorious-button-blue:disabled:not(:disabled) {
163
+ @apply bg-blue-300;
152
164
  }
153
165
 
154
166
  .glorious-button-orange {
@@ -158,6 +170,9 @@ const props = defineProps({
158
170
  @apply text-gray-500 hover:bg-orange-100;
159
171
  }
160
172
  .glorious-button-orange:disabled {
161
- @apply bg-orange-300 cursor-not-allowed;
173
+ @apply cursor-not-allowed;
174
+ }
175
+ .glorious-button-orange:disabled:not(:disabled) {
176
+ @apply bg-orange-300;
162
177
  }
163
178
  </style>
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" setup>
2
- import { onMounted, ref } from "#imports";
2
+ import { onMounted, ref, useId, useSlots } from "#imports";
3
3
 
4
4
  const isEnd = ref<Boolean>(false);
5
5
  const props = defineProps({
@@ -13,7 +13,8 @@ const props = defineProps({
13
13
  default: "flex text-gray-500 font-medium",
14
14
  },
15
15
  });
16
-
16
+ const slot = useSlots();
17
+ const id = useId();
17
18
  onMounted(() => {
18
19
  const currentSecond = props.second;
19
20
  let second = props.second;
@@ -41,7 +42,7 @@ onMounted(() => {
41
42
  }
42
43
  }
43
44
 
44
- document.getElementById("countDown").innerText = timeString;
45
+ document.getElementById("countDown" + id).innerText = timeString;
45
46
 
46
47
  if (second === 0) {
47
48
  isEnd.value = true;
@@ -55,10 +56,16 @@ onMounted(() => {
55
56
  </script>
56
57
  <template>
57
58
  <div>
59
+ <span
60
+ v-if="isEnd && typeof slot.end === 'undefined'"
61
+ :class="props.className"
62
+ >
63
+ 00:00
64
+ </span>
58
65
  <slot v-if="isEnd" name="end" />
59
66
  <div v-else :class="props.className">
60
67
  <slot name="one"></slot>
61
- <div id="countDown" />
68
+ <div :id="`countDown` + id" />
62
69
  <slot name="two"></slot>
63
70
  </div>
64
71
  </div>
@@ -7,12 +7,19 @@ const props = defineProps({
7
7
  default: "drawer",
8
8
  type: String,
9
9
  },
10
+ dir: {
11
+ require: false,
12
+ default: null,
13
+ type: String as () => "rtl" | "ltr",
14
+ },
10
15
  });
11
16
  </script>
12
17
  <template>
13
18
  <div
14
19
  :id="props.id"
15
- :class="[useGloriousAppSetting.getSetting().dir]"
20
+ :class="[
21
+ props.dir === null ? useGloriousAppSetting.getSetting().dir : props.dir,
22
+ ]"
16
23
  class="drawer close hidden"
17
24
  >
18
25
  <div class="w-full">
@@ -0,0 +1,20 @@
1
+ <script lang="ts" setup>
2
+ import { GloriousStore } from "#imports";
3
+ const props = defineProps({
4
+ error: {
5
+ required: false,
6
+ default: "|",
7
+ type: String,
8
+ },
9
+ });
10
+ const gs = GloriousStore();
11
+ const error: any = props.error.split("|");
12
+ </script>
13
+ <template>
14
+ <span
15
+ v-if="gs.forms[error[0]]?.errors[error[1]]"
16
+ class="text-red-500 text-[14px]"
17
+ >
18
+ {{ gs.forms[error[0]].errors[error[1]][0] }}
19
+ </span>
20
+ </template>
@@ -1,5 +1,4 @@
1
1
  <script lang="ts" setup>
2
- import { GloriousStore } from "#imports";
3
2
  const props = defineProps({
4
3
  modelValue: {
5
4
  required: true,
@@ -20,6 +19,11 @@ const props = defineProps({
20
19
  default: "file",
21
20
  type: String,
22
21
  },
22
+ text: {
23
+ required: false,
24
+ default: "No file has been selected",
25
+ type: String,
26
+ },
23
27
  size: {
24
28
  required: false,
25
29
  default: "md",
@@ -31,8 +35,6 @@ const props = defineProps({
31
35
  type: String,
32
36
  },
33
37
  });
34
- const gs: any = GloriousStore();
35
- const error: any = props.error.split("|");
36
38
  const emits = defineEmits(["update:modelValue"]);
37
39
 
38
40
  const changeInput = (event: any) => {
@@ -43,8 +45,7 @@ const changeInput = (event: any) => {
43
45
  };
44
46
  const deleteFile = (event: any) => {
45
47
  event.currentTarget.style.display = "none";
46
- event.currentTarget.previousElementSibling.innerText =
47
- "فایلی انتخاب نشده است";
48
+ event.currentTarget.previousElementSibling.innerText = props.text;
48
49
  emits("update:modelValue", null);
49
50
  };
50
51
  </script>
@@ -59,19 +60,14 @@ const deleteFile = (event: any) => {
59
60
  <span>{{ props.placeholder }}</span>
60
61
  </div>
61
62
  <input type="file" class="hidden" @change="changeInput($event)" />
62
- <span class="text-[12px]">فایلی انتخاب نشده است</span>
63
+ <span class="text-[12px]">{{ props.text }}</span>
63
64
  <GIcon
64
65
  name="glorious-x"
65
66
  color="#ff0000"
66
67
  @click.prevent="deleteFile($event)"
67
68
  />
68
69
  </label>
69
- <span
70
- v-if="gs.forms[error[0]]?.errors[error[1]]"
71
- class="text-red-500 text-[14px]"
72
- >
73
- {{ gs.forms[error[0]].errors[error[1]][0] }}
74
- </span>
70
+ <GErrorText :error="props.error" />
75
71
  </div>
76
72
  </template>
77
73
 
@@ -1,6 +1,7 @@
1
1
  <script setup lang="ts">
2
- import { computed, ref, watch, GloriousStore } from "#imports";
2
+ import { computed, ref, watch } from "#imports";
3
3
  import { useGloriousCore } from "../../composables/useGloriousCore";
4
+ import tailwindColor from "../../utils/tailwindColor";
4
5
  const props = defineProps({
5
6
  modelValue: {
6
7
  required: false,
@@ -45,17 +46,31 @@ const props = defineProps({
45
46
  type: {
46
47
  required: false,
47
48
  default: "text",
48
- type: String,
49
+ type: String as () =>
50
+ | "button"
51
+ | "checkbox"
52
+ | "color"
53
+ | "date"
54
+ | "email"
55
+ | "file"
56
+ | "hidden"
57
+ | "password"
58
+ | "radio"
59
+ | "range"
60
+ | "tel"
61
+ | "text"
62
+ | "url"
63
+ | "number",
49
64
  },
50
65
  autocomplete: {
51
66
  required: false,
52
67
  default: "off",
53
- type: String,
68
+ type: String as () => "off" | "on" | "new-password",
54
69
  },
55
70
  mode: {
56
71
  required: false,
57
72
  default: "normal",
58
- type: String,
73
+ type: String as () => "normal" | "tag",
59
74
  },
60
75
  display: {
61
76
  required: false,
@@ -90,9 +105,6 @@ watch(
90
105
  }
91
106
  );
92
107
 
93
- const gs: any = GloriousStore();
94
- const error: any = props.error.split("|");
95
-
96
108
  const computeIconSize = computed(() => {
97
109
  let iconSize = 0;
98
110
 
@@ -151,6 +163,8 @@ watch(
151
163
  () => props.modelValue,
152
164
  () => initValue()
153
165
  );
166
+
167
+ const typeInput = ref(props.type);
154
168
  </script>
155
169
 
156
170
  <template>
@@ -160,15 +174,38 @@ watch(
160
174
  class="glorious-input"
161
175
  :class="[props.icon !== '' ? `icon-${props.size}` : '']"
162
176
  >
163
- <input
164
- v-model="inputValue"
165
- :autocomplete="props.autocomplete"
166
- :class="[props.size, `glorious-input-${props.color}`]"
167
- :placeholder="props.placeholder"
168
- :disabled="props.disabled"
169
- :type="props.type"
170
- @keyup.enter="addTag($event)"
171
- />
177
+ <div class="relative">
178
+ <input
179
+ v-model="inputValue"
180
+ :autocomplete="props.autocomplete"
181
+ class="w-full"
182
+ :class="[
183
+ props.size,
184
+ `glorious-input-${props.color}`,
185
+ props.type === 'password' ? 'pl-[30px] pr-3' : 'px-3',
186
+ ]"
187
+ :placeholder="props.placeholder"
188
+ :disabled="props.disabled"
189
+ :type="typeInput"
190
+ @keyup.enter="addTag($event)"
191
+ />
192
+ <GIcon
193
+ v-if="props.type === 'password' && typeInput === 'password'"
194
+ class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
195
+ :size="23"
196
+ name="glorious-eye-fill"
197
+ :color="tailwindColor('gray', 500)"
198
+ @click="typeInput = 'text'"
199
+ ></GIcon>
200
+ <GIcon
201
+ v-if="props.type === 'password' && typeInput === 'text'"
202
+ class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
203
+ :size="23"
204
+ name="glorious-eye-off-fill"
205
+ :color="tailwindColor('gray', 500)"
206
+ @click="typeInput = 'password'"
207
+ ></GIcon>
208
+ </div>
172
209
  <div v-if="tags.length !== 0" class="glorious-input-tag">
173
210
  <div v-for="(item, index) in tags" :key="index">
174
211
  {{ item }}
@@ -188,13 +225,7 @@ watch(
188
225
  :color="$tailwindColor('gray', '500')"
189
226
  />
190
227
  </div>
191
-
192
- <span
193
- v-if="gs.forms[error[0]]?.errors[error[1]]"
194
- class="text-red-500 text-[14px]"
195
- >
196
- {{ gs.forms[error[0]].errors[error[1]][0] }}
197
- </span>
228
+ <GErrorText :error="props.error" />
198
229
  </div>
199
230
  </template>
200
231
 
@@ -220,35 +251,35 @@ watch(
220
251
  }
221
252
 
222
253
  .glorious-input-primary {
223
- @apply rounded-md ring-1 ring-green-500 px-3;
254
+ @apply rounded-md ring-1 ring-green-500;
224
255
  }
225
256
  .glorious-input-primary:disabled {
226
257
  @apply bg-green-300 cursor-not-allowed;
227
258
  }
228
259
 
229
260
  .glorious-input-red {
230
- @apply rounded-md ring-1 ring-red-500 px-3;
261
+ @apply rounded-md ring-1 ring-red-500;
231
262
  }
232
263
  .glorious-input-red:disabled {
233
264
  @apply cursor-not-allowed;
234
265
  }
235
266
 
236
267
  .glorious-input-gray {
237
- @apply rounded-md ring-1 ring-gray-500 px-3;
268
+ @apply rounded-md ring-1 ring-gray-500;
238
269
  }
239
270
  .glorious-input-gray:disabled {
240
271
  @apply cursor-not-allowed;
241
272
  }
242
273
 
243
274
  .glorious-input-blue {
244
- @apply rounded-md ring-1 ring-blue-500 px-3;
275
+ @apply rounded-md ring-1 ring-blue-500;
245
276
  }
246
277
  .glorious-input-blue:disabled {
247
278
  @apply cursor-not-allowed;
248
279
  }
249
280
 
250
281
  .glorious-input-orange {
251
- @apply rounded-md ring-1 ring-orange-500 px-3;
282
+ @apply rounded-md ring-1 ring-orange-500;
252
283
  }
253
284
  .glorious-input-orange:disabled {
254
285
  @apply cursor-not-allowed;
@@ -35,7 +35,7 @@ const computeListPage = () => {
35
35
  let firstPage = props.currentPage - props.numberSugestPage;
36
36
  const endPage = props.currentPage + (props.numberSugestPage + 1);
37
37
 
38
- while (firstPage < endPage) {
38
+ while (firstPage <= endPage) {
39
39
  if (firstPage > 0 && firstPage <= props.lastPage)
40
40
  listPage.value.push(firstPage);
41
41
  firstPage++;
@@ -72,7 +72,7 @@ const arrowNext = () => {
72
72
  <div
73
73
  v-for="(item, index) in listPage"
74
74
  :key="index"
75
- class="w-6 h-6 rounded-lg flex items-center justify-center paginate"
75
+ class="w-6 h-6 rounded-lg flex items-center justify-center paginate font-bold"
76
76
  :class="[props.currentPage === item ? 'active' : 'cursor-pointer']"
77
77
  @click="emit(item)"
78
78
  >
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" setup>
2
- import { GloriousStore, ref, watch } from "#imports";
2
+ import { ref, watch } from "#imports";
3
3
  const props = defineProps({
4
4
  modelValue: {
5
5
  required: false,
@@ -36,6 +36,11 @@ const props = defineProps({
36
36
  default: false,
37
37
  type: Boolean,
38
38
  },
39
+ placeholder: {
40
+ require: false,
41
+ default: "",
42
+ type: String,
43
+ },
39
44
  });
40
45
  const selectValue = ref(null);
41
46
  const emits = defineEmits(["update:modelValue"]);
@@ -46,9 +51,6 @@ watch(
46
51
  }
47
52
  );
48
53
 
49
- const gs: any = GloriousStore();
50
- const error: any = props.error.split("|");
51
-
52
54
  // -------------------------------------- init value
53
55
  selectValue.value = props.modelValue;
54
56
  watch(
@@ -62,26 +64,30 @@ watch(
62
64
  <template>
63
65
  <div class="flex flex-col">
64
66
  <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
65
- <select
66
- v-model="selectValue"
67
- aria-label="glorious select"
68
- :disabled="props.disabled"
69
- :class="[`glorious-select-${props.color}`, props.size]"
70
- >
71
- <option
72
- v-for="(item, index) in props.options"
73
- :key="index"
74
- :value="item.value"
67
+ <div class="grow flex relative">
68
+ <select
69
+ v-model="selectValue"
70
+ aria-label="glorious select"
71
+ :disabled="props.disabled"
72
+ class="grow"
73
+ :class="[`glorious-select-${props.color}`, props.size]"
74
+ >
75
+ <option
76
+ v-for="(item, index) in props.options"
77
+ :key="index"
78
+ :value="item.value"
79
+ >
80
+ {{ item.text }}
81
+ </option>
82
+ </select>
83
+ <span
84
+ v-if="selectValue === null"
85
+ class="absolute top-0 bottom-0 my-auto pr-2 h-max"
75
86
  >
76
- {{ item.text }}
77
- </option>
78
- </select>
79
- <span
80
- v-if="gs.forms[error[0]]?.errors[error[1]]"
81
- class="text-red-500 text-[14px]"
82
- >
83
- {{ gs.forms[error[0]].errors[error[1]][0] }}
84
- </span>
87
+ {{ props.placeholder }}
88
+ </span>
89
+ </div>
90
+ <GErrorText :error="props.error" />
85
91
  </div>
86
92
  </template>
87
93
 
@@ -1,5 +1,5 @@
1
1
  <script setup lang="ts">
2
- import { GloriousStore, ref, watch } from "#imports";
2
+ import { ref, watch } from "#imports";
3
3
  const props = defineProps({
4
4
  modelValue: {
5
5
  required: false,
@@ -50,9 +50,10 @@ watch(
50
50
  () => inputValue.value,
51
51
  () => emits("update:modelValue", inputValue.value)
52
52
  );
53
-
54
- const gs: any = GloriousStore();
55
- const error: any = props.error.split("|");
53
+ watch(
54
+ () => props.modelValue,
55
+ () => (inputValue.value = props.modelValue)
56
+ );
56
57
  </script>
57
58
 
58
59
  <template>
@@ -67,12 +68,7 @@ const error: any = props.error.split("|");
67
68
  :disabled="props.disabled"
68
69
  />
69
70
  </div>
70
- <span
71
- v-if="gs.forms[error[0]]?.errors[error[1]]"
72
- class="text-red-500 text-[14px]"
73
- >
74
- {{ gs.forms[error[0]].errors[error[1]][0] }}
75
- </span>
71
+ <GErrorText :error="props.error" />
76
72
  </div>
77
73
  </template>
78
74
 
@@ -0,0 +1 @@
1
+ export default function tailwindColor(name: string, range: number): any;
@@ -0,0 +1,5 @@
1
+ import colors from "tailwindcss/colors.js";
2
+ export default function tailwindColor(name, range) {
3
+ const tailwindColor2 = colors;
4
+ return tailwindColor2[name][range];
5
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-1",
2
+ "version": "1.1.0",
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",
@@ -1,6 +0,0 @@
1
- declare const _default: import("nuxt/app").Plugin<{
2
- tailwindColor: (color: string, value: string) => string;
3
- }> & import("nuxt/app").ObjectPlugin<{
4
- tailwindColor: (color: string, value: string) => string;
5
- }>;
6
- export default _default;
@@ -1,10 +0,0 @@
1
- import { defineNuxtPlugin } from "nuxt/app";
2
- import colors from "tailwindcss/colors.js";
3
- export default defineNuxtPlugin(() => {
4
- const tailwindColor = colors;
5
- return {
6
- provide: {
7
- tailwindColor: (color, value) => tailwindColor[color][value]
8
- }
9
- };
10
- });
@@ -1,2 +0,0 @@
1
- declare const _default: any;
2
- export default _default;
@@ -1,11 +0,0 @@
1
- import { defineNuxtPlugin } from "#app";
2
- import { useGloriousAppSetting } from "../composables/useGloriousAppSetting.mjs";
3
- export default defineNuxtPlugin(() => {
4
- window.addEventListener("keydown", (ev) => {
5
- const html = document.getElementsByTagName("html")[0];
6
- if (ev.key === "*")
7
- useGloriousAppSetting.setDarkMode();
8
- if (ev.key === "-")
9
- useGloriousAppSetting.setDir(html.dir === "rtl" ? "ltr" : "rtl");
10
- });
11
- });