nuxt-glorious 1.9.0-dev → 2.0.0-develop-0

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.
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "nuxt-glorious",
3
3
  "configKey": "glorious",
4
- "version": "1.9.0-dev"
4
+ "version": "2.0.0-develop-0"
5
5
  }
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" setup>
2
- import { watch } from '#imports'
2
+ import { watch, onMounted } from '#imports'
3
3
  import { createBlurDom, removeBlurDom, getAttribute } from '../helper'
4
4
  import _props from '../props/Modal'
5
5
 
@@ -26,6 +26,14 @@ watch(
26
26
  }
27
27
  }
28
28
  )
29
+
30
+ onMounted(() => {
31
+ document.onkeydown = (e) => {
32
+ if (e.code === 'Escape') {
33
+ modelValue.value = false
34
+ }
35
+ }
36
+ })
29
37
  </script>
30
38
 
31
39
  <template>
@@ -20,7 +20,7 @@ const inputFunction = (event: Event) => {
20
20
  ]"
21
21
  >
22
22
  <input
23
- :name="getAttribute(props.checked, 'radio', 'checked')"
23
+ :name="getAttribute(props.name, 'radio', 'name')"
24
24
  type="radio"
25
25
  :disabled="props.disabled"
26
26
  :value="props.value"
@@ -2,92 +2,92 @@
2
2
  @use 'mixin.scss' as mixin;
3
3
 
4
4
  @each $color in var.$colors {
5
- .#{'glorious-input-' + $color} {
6
- @apply #{"ring-" + $color + "-500"};
7
- @apply rounded-md ring-1;
8
- @include mixin.load-size();
9
- &:focus-visible {
10
- @apply outline-none ring-2;
5
+ .#{'glorious-input-' + $color} {
6
+ @apply #{"ring-" + $color + "-500"};
7
+ @apply rounded-md ring-1 bg-white;
8
+ @include mixin.load-size();
9
+ &:focus-visible {
10
+ @apply outline-none ring-2;
11
+ }
12
+ &:disabled {
13
+ @apply #{"bg-" + $color + "-100"};
14
+ @apply cursor-not-allowed;
15
+ }
11
16
  }
12
- &:disabled {
13
- @apply #{"bg-" + $color + "-100"};
14
- @apply cursor-not-allowed;
15
- }
16
- }
17
17
  }
18
18
 
19
19
  .glorious-input {
20
- &.validation-error {
21
- > div > input {
22
- @apply ring-red-500 bg-red-50;
20
+ &.validation-error {
21
+ > div > input {
22
+ @apply ring-red-500 bg-red-50;
23
+ }
23
24
  }
24
- }
25
- @apply relative w-full;
26
- > input {
27
- @apply w-full;
28
- }
29
- > input::placeholder {
30
- @apply text-sm;
31
- }
32
- &.icon-xl {
25
+ @apply relative w-full;
33
26
  > input {
34
- @apply rtl:pr-9 ltr:pl-9;
27
+ @apply w-full;
35
28
  }
36
- }
37
- &.icon-lg {
38
- > input {
39
- @apply rtl:pr-9 ltr:pl-8;
29
+ > input::placeholder {
30
+ @apply text-sm;
40
31
  }
41
- }
42
- &.icon-md {
43
- > input {
44
- @apply rtl:pr-9 ltr:pl-8;
32
+ &.icon-xl {
33
+ > input {
34
+ @apply rtl:pr-9 ltr:pl-9;
35
+ }
45
36
  }
46
- }
47
- &.icon-sm {
48
- > input {
49
- @apply rtl:pr-8 ltr:pl-8;
37
+ &.icon-lg {
38
+ > input {
39
+ @apply rtl:pr-9 ltr:pl-8;
40
+ }
50
41
  }
51
- }
52
- &.icon-xsm {
53
- > input {
54
- @apply rtl:pr-8 ltr:pl-7;
42
+ &.icon-md {
43
+ > input {
44
+ @apply rtl:pr-9 ltr:pl-8;
45
+ }
46
+ }
47
+ &.icon-sm {
48
+ > input {
49
+ @apply rtl:pr-8 ltr:pl-8;
50
+ }
51
+ }
52
+ &.icon-xsm {
53
+ > input {
54
+ @apply rtl:pr-8 ltr:pl-7;
55
+ }
55
56
  }
56
- }
57
57
  }
58
58
  .glorious-input-icon {
59
- @apply absolute h-max top-0 bottom-0 my-auto rtl:right-1 ltr:left-1;
59
+ @apply absolute h-max top-0 bottom-0 my-auto rtl:right-1 ltr:left-1;
60
60
  }
61
61
 
62
62
  /* ----------------------------------------------- TAG */
63
63
  .glorious-input-tag {
64
- @apply mt-3 gap-2 flex flex-wrap;
65
- > div {
66
- @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
67
- }
64
+ @apply mt-3 gap-2 flex flex-wrap;
65
+ > div {
66
+ @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
67
+ }
68
68
  }
69
69
 
70
70
  .glorious-input {
71
- // -------------------------------------------------- OPTION
72
- >div{
73
- >input.size-md{
74
- // @apply top-[20px]
71
+ // -------------------------------------------------- OPTION
72
+ > div {
73
+ > input.size-md {
74
+ // @apply top-[20px]
75
+ }
75
76
  }
76
- }
77
77
 
78
- &-options {
79
- @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
78
+ &-options {
79
+ @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
80
80
 
81
- > div>div {
82
- @apply p-2 hover:bg-gray-100 cursor-pointer rounded;
83
- }
81
+ > div > div {
82
+ @apply p-2 hover:bg-gray-100 cursor-pointer rounded;
83
+ }
84
84
 
85
- // &.size-md {
86
- // @apply top-11;
87
- // }
88
- }
85
+ // &.size-md {
86
+ // @apply top-11;
87
+ // }
88
+ }
89
89
 
90
- div > input::placeholder {
91
- @apply text-gray-500;
92
- }
90
+ div > input::placeholder {
91
+ @apply text-gray-500;
92
+ }
93
93
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.9.0-dev",
2
+ "version": "2.0.0-develop-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",