nuxt-glorious 1.2.3-9 → 1.2.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/module.d.mts +38 -1
- package/dist/module.d.ts +38 -1
- package/dist/module.json +1 -1
- package/dist/module.mjs +37 -33
- package/dist/runtime/assets/style/components/alert.css +20 -5
- package/dist/runtime/assets/style/components/avatar.css +21 -18
- package/dist/runtime/assets/style/components/button.css +198 -0
- package/dist/runtime/assets/style/components/checkbox.css +24 -24
- package/dist/runtime/assets/style/components/drawer.css +14 -18
- package/dist/runtime/assets/style/components/file.css +102 -33
- package/dist/runtime/assets/style/components/input.css +103 -23
- package/dist/runtime/assets/style/components/loading.css +43 -0
- package/dist/runtime/assets/style/components/radio.css +27 -27
- package/dist/runtime/assets/style/components/select.css +24 -19
- package/dist/runtime/assets/style/components/textarea.css +35 -35
- package/dist/runtime/assets/style/mixin.css +0 -0
- package/dist/runtime/components/G/Alert.vue +8 -28
- package/dist/runtime/components/G/Avatar.vue +5 -73
- package/dist/runtime/components/G/Breadcrumb.vue +7 -25
- package/dist/runtime/components/G/Button.vue +10 -152
- package/dist/runtime/components/G/Checkbox.vue +8 -124
- package/dist/runtime/components/G/CountDown.vue +33 -44
- package/dist/runtime/components/G/Drawer.vue +12 -101
- package/dist/runtime/components/G/Dropdown.vue +16 -11
- package/dist/runtime/components/G/ErrorText.vue +6 -11
- package/dist/runtime/components/G/File.vue +25 -117
- package/dist/runtime/components/G/Icon.vue +125 -0
- package/dist/runtime/components/G/Input.vue +28 -229
- package/dist/runtime/components/G/Loading.vue +4 -21
- package/dist/runtime/components/G/Modal.vue +13 -145
- package/dist/runtime/components/G/Paginate.vue +8 -44
- package/dist/runtime/components/G/Radio.vue +12 -163
- package/dist/runtime/components/G/Rating.vue +3 -30
- package/dist/runtime/components/G/Select.vue +7 -110
- package/dist/runtime/components/G/Switch.vue +5 -82
- package/dist/runtime/components/G/Tab.vue +6 -30
- package/dist/runtime/components/G/Table.vue +11 -131
- package/dist/runtime/components/G/textarea.vue +14 -119
- package/dist/runtime/components/G/timeline.vue +3 -59
- package/dist/runtime/components/helper.d.ts +2 -0
- package/dist/runtime/components/helper.mjs +25 -0
- package/dist/runtime/components/props/Alert.d.ts +8 -0
- package/dist/runtime/components/props/Alert.mjs +4 -0
- package/dist/runtime/components/props/Avatar.d.ts +12 -0
- package/dist/runtime/components/props/Avatar.mjs +9 -0
- package/dist/runtime/components/props/Breadcrumb.d.ts +26 -0
- package/dist/runtime/components/props/Breadcrumb.mjs +11 -0
- package/dist/runtime/components/props/Button.d.ts +47 -0
- package/dist/runtime/components/props/Button.mjs +14 -0
- package/dist/runtime/components/props/CheckBox.d.ts +23 -0
- package/dist/runtime/components/props/CheckBox.mjs +7 -0
- package/dist/runtime/components/props/CountDown.d.ts +7 -0
- package/dist/runtime/components/props/CountDown.mjs +6 -0
- package/dist/runtime/components/props/Drawer.d.ts +8 -0
- package/dist/runtime/components/props/Drawer.mjs +7 -0
- package/dist/runtime/components/props/ErrorText.d.ts +8 -0
- package/dist/runtime/components/props/ErrorText.mjs +4 -0
- package/dist/runtime/components/props/File.d.ts +28 -0
- package/dist/runtime/components/props/File.mjs +9 -0
- package/dist/runtime/components/props/Icon.d.ts +23 -0
- package/dist/runtime/components/props/Icon.mjs +7 -0
- package/dist/runtime/components/props/Input.d.ts +91 -0
- package/dist/runtime/components/props/Input.mjs +50 -0
- package/dist/runtime/components/props/Loading.d.ts +18 -0
- package/dist/runtime/components/props/Loading.mjs +6 -0
- package/dist/runtime/components/props/Modal.d.ts +48 -0
- package/dist/runtime/components/props/Modal.mjs +38 -0
- package/dist/runtime/components/props/Paginate.d.ts +18 -0
- package/dist/runtime/components/props/Paginate.mjs +17 -0
- package/dist/runtime/components/props/Radio.d.ts +33 -0
- package/dist/runtime/components/props/Radio.mjs +9 -0
- package/dist/runtime/components/props/Select.d.ts +61 -0
- package/dist/runtime/components/props/Select.mjs +23 -0
- package/dist/runtime/components/props/Switch.d.ts +13 -0
- package/dist/runtime/components/props/Switch.mjs +5 -0
- package/dist/runtime/components/props/Tab.d.ts +21 -0
- package/dist/runtime/components/props/Tab.mjs +7 -0
- package/dist/runtime/components/props/Table.d.ts +49 -0
- package/dist/runtime/components/props/Table.mjs +19 -0
- package/dist/runtime/components/props/Textarea.d.ts +38 -0
- package/dist/runtime/components/props/Textarea.mjs +14 -0
- package/dist/runtime/components/props/Timeline.d.ts +11 -0
- package/dist/runtime/components/props/Timeline.mjs +7 -0
- package/dist/runtime/components/props/common/index.d.ts +161 -0
- package/dist/runtime/components/props/common/index.mjs +147 -0
- package/dist/runtime/composables/useGloriousCore.d.ts +1 -1
- package/dist/runtime/composables/useGloriousCore.mjs +1 -1
- package/dist/runtime/composables/useGloriousFetch.mjs +0 -1
- package/dist/runtime/middlewares/AuthStrategy.mjs +1 -5
- package/dist/runtime/stores/GloriousStore.d.ts +0 -2
- package/dist/runtime/stores/GloriousStore.mjs +0 -20
- package/dist/types.d.mts +2 -10
- package/dist/types.d.ts +2 -10
- package/package.json +1 -1
- package/dist/runtime/assets/style/components/buttons.css +0 -107
- package/dist/runtime/components/G/BottomNavigation.vue +0 -3
- package/dist/runtime/components/G/Icon/index.vue +0 -143
@@ -0,0 +1,147 @@
|
|
1
|
+
export const color = (def = "green") => ({
|
2
|
+
color: {
|
3
|
+
required: false,
|
4
|
+
default: def,
|
5
|
+
type: String
|
6
|
+
}
|
7
|
+
});
|
8
|
+
export const size = (def = "md") => ({
|
9
|
+
size: {
|
10
|
+
required: false,
|
11
|
+
default: def,
|
12
|
+
type: String
|
13
|
+
}
|
14
|
+
});
|
15
|
+
export const rounded = {
|
16
|
+
size: {
|
17
|
+
required: false,
|
18
|
+
default: "md",
|
19
|
+
type: String
|
20
|
+
}
|
21
|
+
};
|
22
|
+
export const disabled = {
|
23
|
+
disabled: {
|
24
|
+
required: false,
|
25
|
+
default: false,
|
26
|
+
type: Boolean
|
27
|
+
}
|
28
|
+
};
|
29
|
+
export const loading = {
|
30
|
+
loading: {
|
31
|
+
required: false,
|
32
|
+
default: false,
|
33
|
+
type: Boolean
|
34
|
+
},
|
35
|
+
loadingOption: {
|
36
|
+
required: false,
|
37
|
+
default: {
|
38
|
+
color: "green"
|
39
|
+
},
|
40
|
+
type: {
|
41
|
+
color: String
|
42
|
+
}
|
43
|
+
}
|
44
|
+
};
|
45
|
+
export const to = {
|
46
|
+
to: {
|
47
|
+
required: false,
|
48
|
+
default: "",
|
49
|
+
type: String
|
50
|
+
}
|
51
|
+
};
|
52
|
+
export const ariaLabel = {
|
53
|
+
ariaLabel: {
|
54
|
+
required: false,
|
55
|
+
default: "",
|
56
|
+
type: String
|
57
|
+
}
|
58
|
+
};
|
59
|
+
export const checked = {
|
60
|
+
checked: {
|
61
|
+
required: false,
|
62
|
+
default: false,
|
63
|
+
type: Boolean
|
64
|
+
}
|
65
|
+
};
|
66
|
+
export const error = {
|
67
|
+
error: {
|
68
|
+
required: false,
|
69
|
+
default: "|",
|
70
|
+
type: String
|
71
|
+
}
|
72
|
+
};
|
73
|
+
export const placeholder = (def = "") => ({
|
74
|
+
placeholder: {
|
75
|
+
required: false,
|
76
|
+
default: def,
|
77
|
+
type: String
|
78
|
+
}
|
79
|
+
});
|
80
|
+
export const title = (def = "") => ({
|
81
|
+
title: {
|
82
|
+
required: false,
|
83
|
+
default: def,
|
84
|
+
type: String
|
85
|
+
}
|
86
|
+
});
|
87
|
+
export const text = (def = "") => ({
|
88
|
+
text: {
|
89
|
+
required: false,
|
90
|
+
default: def,
|
91
|
+
type: String
|
92
|
+
}
|
93
|
+
});
|
94
|
+
export const name = {
|
95
|
+
name: {
|
96
|
+
required: true,
|
97
|
+
type: String,
|
98
|
+
default: ""
|
99
|
+
}
|
100
|
+
};
|
101
|
+
export const hashColor = {
|
102
|
+
color: {
|
103
|
+
required: false,
|
104
|
+
type: String,
|
105
|
+
default: "#000"
|
106
|
+
}
|
107
|
+
};
|
108
|
+
export const intSize = (def = 20) => ({
|
109
|
+
size: {
|
110
|
+
required: false,
|
111
|
+
type: Number,
|
112
|
+
default: def
|
113
|
+
}
|
114
|
+
});
|
115
|
+
export const stroke = (def = null) => ({
|
116
|
+
stroke: {
|
117
|
+
required: false,
|
118
|
+
type: [Number, null],
|
119
|
+
default: def
|
120
|
+
}
|
121
|
+
});
|
122
|
+
export const icon = {
|
123
|
+
icon: {
|
124
|
+
required: false,
|
125
|
+
default: "",
|
126
|
+
type: String
|
127
|
+
}
|
128
|
+
};
|
129
|
+
export const options = {
|
130
|
+
options: {
|
131
|
+
required: false,
|
132
|
+
default: [],
|
133
|
+
type: Array
|
134
|
+
},
|
135
|
+
loadingOptions: {
|
136
|
+
required: false,
|
137
|
+
default: false,
|
138
|
+
type: Boolean
|
139
|
+
}
|
140
|
+
};
|
141
|
+
export const value = () => ({
|
142
|
+
value: {
|
143
|
+
required: false,
|
144
|
+
default: "",
|
145
|
+
type: String
|
146
|
+
}
|
147
|
+
});
|
@@ -85,7 +85,6 @@ function computeAuth() {
|
|
85
85
|
function computeFormData(options) {
|
86
86
|
const form = new FormData();
|
87
87
|
Object.entries(options.body).forEach((item) => {
|
88
|
-
console.log(item[1]);
|
89
88
|
if (item[1] === null) return;
|
90
89
|
if (typeof item[1] === "object" && typeof item[1].lastModifiedDate === "undefined" && typeof item[1].type === "undefined" && typeof item[1].size === "undefined")
|
91
90
|
Object.entries(item[1]).forEach((nestedItem, index) => {
|
@@ -1,8 +1,4 @@
|
|
1
|
-
import {
|
2
|
-
defineNuxtRouteMiddleware,
|
3
|
-
useCookie,
|
4
|
-
useNuxtApp
|
5
|
-
} from "#imports";
|
1
|
+
import { defineNuxtRouteMiddleware, useCookie, useNuxtApp } from "#imports";
|
6
2
|
import { GloriousStore } from "../stores/GloriousStore.mjs";
|
7
3
|
export default defineNuxtRouteMiddleware(() => {
|
8
4
|
const nuxtApp = useNuxtApp();
|
@@ -2,8 +2,6 @@ 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;
|
6
|
-
drawerCreate(key: string | Array<string>): void;
|
7
5
|
authLogout(): void;
|
8
6
|
authSetToken(token: string, to?: string | null): void;
|
9
7
|
authParseToken(token: any): any;
|
@@ -35,26 +35,6 @@ export const GloriousStore = defineStore("GloriousStore", {
|
|
35
35
|
};
|
36
36
|
});
|
37
37
|
},
|
38
|
-
modalCreate(key) {
|
39
|
-
this.modals = {};
|
40
|
-
const defaultValue = {
|
41
|
-
show: false,
|
42
|
-
keepData: {}
|
43
|
-
};
|
44
|
-
if (typeof key === "string") this.modals[key] = defaultValue;
|
45
|
-
else
|
46
|
-
key.map((item) => {
|
47
|
-
this.modals[item] = defaultValue;
|
48
|
-
});
|
49
|
-
},
|
50
|
-
drawerCreate(key) {
|
51
|
-
this.drawers = {};
|
52
|
-
if (typeof key === "string") this.drawers[key] = false;
|
53
|
-
else
|
54
|
-
key.map((item) => {
|
55
|
-
this.drawers[item] = false;
|
56
|
-
});
|
57
|
-
},
|
58
38
|
authLogout() {
|
59
39
|
const moduleConfig = useRuntimeConfig();
|
60
40
|
const token = useCookie(moduleConfig.public.glorious.auth.cookie.name);
|
package/dist/types.d.mts
CHANGED
@@ -1,16 +1,8 @@
|
|
1
1
|
|
2
|
-
import type {
|
2
|
+
import type { } from './module.js'
|
3
3
|
|
4
4
|
|
5
|
-
declare module '@nuxt/schema' {
|
6
|
-
interface NuxtConfig { ['glorious']?: Partial<ModuleOptions> }
|
7
|
-
interface NuxtOptions { ['glorious']?: ModuleOptions }
|
8
|
-
}
|
9
5
|
|
10
|
-
declare module 'nuxt/schema' {
|
11
|
-
interface NuxtConfig { ['glorious']?: Partial<ModuleOptions> }
|
12
|
-
interface NuxtOptions { ['glorious']?: ModuleOptions }
|
13
|
-
}
|
14
6
|
|
15
7
|
|
16
|
-
export type {
|
8
|
+
export type { default } from './module.js'
|
package/dist/types.d.ts
CHANGED
@@ -1,16 +1,8 @@
|
|
1
1
|
|
2
|
-
import type {
|
2
|
+
import type { } from './module'
|
3
3
|
|
4
4
|
|
5
|
-
declare module '@nuxt/schema' {
|
6
|
-
interface NuxtConfig { ['glorious']?: Partial<ModuleOptions> }
|
7
|
-
interface NuxtOptions { ['glorious']?: ModuleOptions }
|
8
|
-
}
|
9
5
|
|
10
|
-
declare module 'nuxt/schema' {
|
11
|
-
interface NuxtConfig { ['glorious']?: Partial<ModuleOptions> }
|
12
|
-
interface NuxtOptions { ['glorious']?: ModuleOptions }
|
13
|
-
}
|
14
6
|
|
15
7
|
|
16
|
-
export type {
|
8
|
+
export type { default } from './module'
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "1.2.
|
2
|
+
"version": "1.2.4",
|
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,107 +0,0 @@
|
|
1
|
-
button:focus-visible {
|
2
|
-
@apply outline-none;
|
3
|
-
}
|
4
|
-
|
5
|
-
.xl.glorious-button-orange, .xl.glorious-button-blue, .xl.glorious-button-gray, .xl.glorious-button-red, .xl.glorious-button-primary {
|
6
|
-
@apply py-2.5;
|
7
|
-
}
|
8
|
-
.xl.glorious-button-orange > div.loading > div > div, .xl.glorious-button-blue > div.loading > div > div, .xl.glorious-button-gray > div.loading > div > div, .xl.glorious-button-red > div.loading > div > div, .xl.glorious-button-primary > div.loading > div > div {
|
9
|
-
@apply w-[24px] !important;
|
10
|
-
}
|
11
|
-
.lg.glorious-button-orange, .lg.glorious-button-blue, .lg.glorious-button-gray, .lg.glorious-button-red, .lg.glorious-button-primary {
|
12
|
-
@apply py-2;
|
13
|
-
}
|
14
|
-
.lg.glorious-button-orange > div.loading > div > div, .lg.glorious-button-blue > div.loading > div > div, .lg.glorious-button-gray > div.loading > div > div, .lg.glorious-button-red > div.loading > div > div, .lg.glorious-button-primary > div.loading > div > div {
|
15
|
-
@apply w-[24px] !important;
|
16
|
-
}
|
17
|
-
.md.glorious-button-orange, .md.glorious-button-blue, .md.glorious-button-gray, .md.glorious-button-red, .md.glorious-button-primary {
|
18
|
-
@apply py-1.5;
|
19
|
-
}
|
20
|
-
.md.glorious-button-orange > div.loading > div > div, .md.glorious-button-blue > div.loading > div > div, .md.glorious-button-gray > div.loading > div > div, .md.glorious-button-red > div.loading > div > div, .md.glorious-button-primary > div.loading > div > div {
|
21
|
-
@apply w-[24px] !important;
|
22
|
-
}
|
23
|
-
.sm.glorious-button-orange, .sm.glorious-button-blue, .sm.glorious-button-gray, .sm.glorious-button-red, .sm.glorious-button-primary {
|
24
|
-
@apply py-1;
|
25
|
-
}
|
26
|
-
.sm.glorious-button-orange > div.loading > div > div, .sm.glorious-button-blue > div.loading > div > div, .sm.glorious-button-gray > div.loading > div > div, .sm.glorious-button-red > div.loading > div > div, .sm.glorious-button-primary > div.loading > div > div {
|
27
|
-
@apply w-[24px] !important;
|
28
|
-
}
|
29
|
-
.xsm.glorious-button-orange, .xsm.glorious-button-blue, .xsm.glorious-button-gray, .xsm.glorious-button-red, .xsm.glorious-button-primary {
|
30
|
-
@apply py-0.5;
|
31
|
-
}
|
32
|
-
.xsm.glorious-button-orange > div.loading > div > div, .xsm.glorious-button-blue > div.loading > div > div, .xsm.glorious-button-gray > div.loading > div > div, .xsm.glorious-button-red > div.loading > div > div, .xsm.glorious-button-primary > div.loading > div > div {
|
33
|
-
@apply w-[24px] !important;
|
34
|
-
}
|
35
|
-
|
36
|
-
.outline.glorious-button-orange, .outline.glorious-button-blue, .outline.glorious-button-gray, .outline.glorious-button-red, .outline.glorious-button-primary {
|
37
|
-
@apply bg-transparent border outline-none;
|
38
|
-
}
|
39
|
-
|
40
|
-
.glorious-button-orange > div.loading, .glorious-button-blue > div.loading, .glorious-button-gray > div.loading, .glorious-button-red > div.loading, .glorious-button-primary > div.loading {
|
41
|
-
@apply flex justify-center items-center;
|
42
|
-
}
|
43
|
-
|
44
|
-
.glorious-button-primary {
|
45
|
-
@apply bg-green-700 hover:bg-green-600 rounded-md text-white border-green-500 px-3;
|
46
|
-
}
|
47
|
-
.glorious-button-primary.outline {
|
48
|
-
@apply text-gray-500 hover:bg-green-100;
|
49
|
-
}
|
50
|
-
.glorious-button-primary:disabled {
|
51
|
-
@apply cursor-not-allowed;
|
52
|
-
}
|
53
|
-
.glorious-button-primary:disabled:not(:disabled) {
|
54
|
-
@apply bg-green-300;
|
55
|
-
}
|
56
|
-
|
57
|
-
.glorious-button-red {
|
58
|
-
@apply bg-red-500 hover:bg-red-600 rounded-md text-white border-red-500 px-3;
|
59
|
-
}
|
60
|
-
.glorious-button-red.outline {
|
61
|
-
@apply text-gray-500 hover:bg-red-100;
|
62
|
-
}
|
63
|
-
.glorious-button-red:disabled {
|
64
|
-
@apply cursor-not-allowed;
|
65
|
-
}
|
66
|
-
.glorious-button-red:disabled:not(:disabled) {
|
67
|
-
@apply bg-red-300;
|
68
|
-
}
|
69
|
-
|
70
|
-
.glorious-button-gray {
|
71
|
-
@apply bg-gray-500 hover:bg-gray-600 rounded-md text-white border-gray-500 px-3;
|
72
|
-
}
|
73
|
-
.glorious-button-gray.outline {
|
74
|
-
@apply text-gray-500 hover:bg-gray-100;
|
75
|
-
}
|
76
|
-
.glorious-button-gray:disabled {
|
77
|
-
@apply cursor-not-allowed;
|
78
|
-
}
|
79
|
-
.glorious-button-gray:disabled:not(:disabled) {
|
80
|
-
@apply bg-gray-300;
|
81
|
-
}
|
82
|
-
|
83
|
-
.glorious-button-blue {
|
84
|
-
@apply bg-blue-500 hover:bg-blue-600 rounded-md text-white border-blue-500 px-3;
|
85
|
-
}
|
86
|
-
.glorious-button-blue.outline {
|
87
|
-
@apply text-gray-500 hover:bg-blue-100;
|
88
|
-
}
|
89
|
-
.glorious-button-blue:disabled {
|
90
|
-
@apply cursor-not-allowed;
|
91
|
-
}
|
92
|
-
.glorious-button-blue:disabled:not(:disabled) {
|
93
|
-
@apply bg-blue-300;
|
94
|
-
}
|
95
|
-
|
96
|
-
.glorious-button-orange {
|
97
|
-
@apply bg-orange-500 hover:bg-orange-600 rounded-md text-white border-orange-500 px-3;
|
98
|
-
}
|
99
|
-
.glorious-button-orange.outline {
|
100
|
-
@apply text-gray-500 hover:bg-orange-100;
|
101
|
-
}
|
102
|
-
.glorious-button-orange:disabled {
|
103
|
-
@apply cursor-not-allowed;
|
104
|
-
}
|
105
|
-
.glorious-button-orange:disabled:not(:disabled) {
|
106
|
-
@apply bg-orange-300;
|
107
|
-
}
|
@@ -1,143 +0,0 @@
|
|
1
|
-
<script lang="ts" setup>
|
2
|
-
import { ref, watch } from "#imports";
|
3
|
-
|
4
|
-
const props = defineProps({
|
5
|
-
name: {
|
6
|
-
required: true,
|
7
|
-
type: String,
|
8
|
-
default: "",
|
9
|
-
},
|
10
|
-
color: {
|
11
|
-
required: false,
|
12
|
-
type: String,
|
13
|
-
default: "#000",
|
14
|
-
},
|
15
|
-
size: {
|
16
|
-
required: false,
|
17
|
-
type: Number,
|
18
|
-
default: 20,
|
19
|
-
},
|
20
|
-
stroke: {
|
21
|
-
required: false,
|
22
|
-
type: [Number, null],
|
23
|
-
default: null,
|
24
|
-
},
|
25
|
-
});
|
26
|
-
|
27
|
-
const icon = ref("");
|
28
|
-
|
29
|
-
const methods = {
|
30
|
-
computeProps: (icon: any) => {
|
31
|
-
//color
|
32
|
-
icon = icon.replaceAll("\n", " ");
|
33
|
-
//stroke
|
34
|
-
icon = icon
|
35
|
-
.split(" ")
|
36
|
-
.map((item: any) =>
|
37
|
-
item.includes('stroke="') && typeof props.color !== "undefined"
|
38
|
-
? 'stroke="' + props.color + '"'
|
39
|
-
: item
|
40
|
-
)
|
41
|
-
.join(" ");
|
42
|
-
|
43
|
-
//fill
|
44
|
-
if (typeof props.color !== "undefined") {
|
45
|
-
icon = icon
|
46
|
-
.split(" ")
|
47
|
-
.map((item: any) => {
|
48
|
-
if (!item.includes('fill="none"')) {
|
49
|
-
if (item.includes('fill="') && !item.includes('"/>'))
|
50
|
-
return `fill="${props.color}"`;
|
51
|
-
else if (item.includes('fill="') && item.includes('"/>'))
|
52
|
-
return `fill="${props.color}"/>`;
|
53
|
-
else return item;
|
54
|
-
} else return item;
|
55
|
-
})
|
56
|
-
.join(" ");
|
57
|
-
}
|
58
|
-
|
59
|
-
//size
|
60
|
-
icon = icon.replaceAll("\n", " ");
|
61
|
-
|
62
|
-
//width
|
63
|
-
icon = icon
|
64
|
-
.split(" ")
|
65
|
-
.map((item: any) =>
|
66
|
-
item.includes('width="') &&
|
67
|
-
!item.includes("stroke-width") &&
|
68
|
-
typeof props.size !== "undefined"
|
69
|
-
? 'width="' + props.size + '"'
|
70
|
-
: item
|
71
|
-
)
|
72
|
-
.join(" ");
|
73
|
-
|
74
|
-
icon = icon
|
75
|
-
.split(" ")
|
76
|
-
.map((item: any) =>
|
77
|
-
item.includes('height="') && typeof props.size !== "undefined"
|
78
|
-
? 'height="' + props.size + '"'
|
79
|
-
: item
|
80
|
-
)
|
81
|
-
.join(" ");
|
82
|
-
|
83
|
-
//stroke
|
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
|
-
}
|
95
|
-
|
96
|
-
return icon;
|
97
|
-
},
|
98
|
-
};
|
99
|
-
|
100
|
-
async function getIcon() {
|
101
|
-
try {
|
102
|
-
const iconsImport = import.meta.glob("assets/icons/**/**.svg", {
|
103
|
-
query: "?raw",
|
104
|
-
eager: false,
|
105
|
-
});
|
106
|
-
let rawIcon = "";
|
107
|
-
if (typeof iconsImport[`/assets/icons/${props.name}.svg`] !== "undefined") {
|
108
|
-
const icon: any = await iconsImport[`/assets/icons/${props.name}.svg`]();
|
109
|
-
rawIcon = icon.default;
|
110
|
-
} else {
|
111
|
-
const staticAssets = import.meta.glob("../../../assets/icons/**/**.svg", {
|
112
|
-
query: "?raw",
|
113
|
-
eager: false,
|
114
|
-
});
|
115
|
-
|
116
|
-
const icon: any = await staticAssets[
|
117
|
-
`../../../assets/icons/${props.name}.svg`
|
118
|
-
]();
|
119
|
-
rawIcon = icon.default;
|
120
|
-
}
|
121
|
-
|
122
|
-
icon.value = methods.computeProps(rawIcon);
|
123
|
-
} catch (e) {
|
124
|
-
console.error(
|
125
|
-
`glorious error -> Icon '${props.name}' doesn't exist in 'assets/icons'`
|
126
|
-
);
|
127
|
-
}
|
128
|
-
}
|
129
|
-
|
130
|
-
await getIcon();
|
131
|
-
|
132
|
-
watch(
|
133
|
-
() => props,
|
134
|
-
() => getIcon(),
|
135
|
-
{
|
136
|
-
deep: true,
|
137
|
-
}
|
138
|
-
);
|
139
|
-
</script>
|
140
|
-
<template>
|
141
|
-
<!-- eslint-disable vue/no-v-html -->
|
142
|
-
<div class="w-max h-max" v-html="icon" />
|
143
|
-
</template>
|