@hostlink/nuxt-light 0.0.76 → 0.0.77
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
|
@@ -34,6 +34,7 @@ if (my.granted_storage) {
|
|
|
34
34
|
|
|
35
35
|
light.setStyles(my.styles);
|
|
36
36
|
|
|
37
|
+
|
|
37
38
|
const menus = ref(app.menus)
|
|
38
39
|
|
|
39
40
|
const i18n = useI18n();
|
|
@@ -136,6 +137,9 @@ watch(() => style.color, async (value) => {
|
|
|
136
137
|
name: "color",
|
|
137
138
|
value: value
|
|
138
139
|
})
|
|
140
|
+
|
|
141
|
+
my.styles["color"] = value;
|
|
142
|
+
light.setStyles(my.styles);
|
|
139
143
|
})
|
|
140
144
|
|
|
141
145
|
watch(() => style.theme, async (value) => {
|
|
@@ -191,7 +195,7 @@ const storageUsagePercent = computed(() => {
|
|
|
191
195
|
|
|
192
196
|
<template>
|
|
193
197
|
<q-layout :view="layoutView">
|
|
194
|
-
<q-header bordered class="text-white" :class="style.color">
|
|
198
|
+
<q-header bordered class="text-white" :class="`bg-${style.color}`">
|
|
195
199
|
<q-toolbar>
|
|
196
200
|
<q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
|
|
197
201
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { useLight } from '../'
|
|
3
|
-
import { useAttrs } from 'vue'
|
|
3
|
+
import { useAttrs, ref } from 'vue'
|
|
4
4
|
|
|
5
5
|
defineProps({
|
|
6
6
|
loading: Boolean,
|
|
@@ -16,16 +16,25 @@ const attrs = {
|
|
|
16
16
|
bordered: light.getStyle("cardBordered", true),
|
|
17
17
|
square: light.getStyle("cardSquare", false),
|
|
18
18
|
}, ...useAttrs()
|
|
19
|
-
|
|
20
19
|
}
|
|
21
20
|
|
|
21
|
+
const color = light.getStyle("color", 'primary');
|
|
22
|
+
|
|
23
|
+
const cl = ["text-white", `bg-${color}`];
|
|
24
|
+
|
|
25
|
+
const minimize = ref(true);
|
|
22
26
|
</script>
|
|
23
27
|
<template>
|
|
24
28
|
<q-card v-bind="attrs">
|
|
25
|
-
<q-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
<q-bar :class="cl" v-if="title">
|
|
30
|
+
<div>{{ title }}</div>
|
|
31
|
+
<q-space />
|
|
32
|
+
<q-btn dense flat icon="sym_o_remove" @click="minimize = !minimize" />
|
|
33
|
+
</q-bar>
|
|
34
|
+
<template v-if="minimize">
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
29
38
|
|
|
30
39
|
<q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
|
|
31
40
|
</q-card>
|
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
const COLORS = [
|
|
3
|
-
'
|
|
4
|
-
'
|
|
5
|
-
'
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
'
|
|
9
|
-
'
|
|
3
|
+
'primary',
|
|
4
|
+
'secondary',
|
|
5
|
+
'positive',
|
|
6
|
+
'negative',
|
|
7
|
+
'info',
|
|
8
|
+
'warning',
|
|
9
|
+
'dark',
|
|
10
|
+
'red',
|
|
11
|
+
'pink',
|
|
12
|
+
'purple',
|
|
13
|
+
'deep-purple',
|
|
14
|
+
'indigo',
|
|
15
|
+
'blue',
|
|
16
|
+
'light-blue',
|
|
17
|
+
'cyan',
|
|
18
|
+
'teal',
|
|
19
|
+
'green',
|
|
20
|
+
'light-green',
|
|
21
|
+
'lime',
|
|
22
|
+
'yellow',
|
|
23
|
+
'amber',
|
|
24
|
+
'orange',
|
|
25
|
+
'deep-orange',
|
|
26
|
+
'brown',
|
|
27
|
+
'grey',
|
|
28
|
+
'blue-grey'
|
|
29
|
+
|
|
10
30
|
]
|
|
11
31
|
|
|
12
32
|
defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:headerColor', 'update:miniState'])
|
|
@@ -62,7 +82,7 @@ const props = defineProps({
|
|
|
62
82
|
<q-item-section>
|
|
63
83
|
<q-item-label>Header color</q-item-label>
|
|
64
84
|
<div class="row">
|
|
65
|
-
<div v-for="c in COLORS" :key="c" :class="c" style="width: 1.5rem; height: 1.5rem;"
|
|
85
|
+
<div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
|
|
66
86
|
class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:headerColor', c)" />
|
|
67
87
|
</div>
|
|
68
88
|
</q-item-section>
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
+
import { useLight } from '../'
|
|
2
3
|
import { useSlots, computed, ref } from 'vue';
|
|
3
4
|
|
|
5
|
+
const light = useLight();
|
|
4
6
|
const props = defineProps(["modelValue"])
|
|
5
7
|
const emit = defineEmits(["update:modelValue"])
|
|
6
8
|
const slots = useSlots();
|
|
@@ -30,11 +32,13 @@ const localValue = computed({
|
|
|
30
32
|
}
|
|
31
33
|
})
|
|
32
34
|
|
|
35
|
+
const color = light.getStyle("color", 'primary');
|
|
36
|
+
|
|
33
37
|
</script>
|
|
34
38
|
|
|
35
39
|
<template>
|
|
36
40
|
<l-card>
|
|
37
|
-
<q-tabs class="text-grey" active-color="
|
|
41
|
+
<q-tabs class="text-grey" :active-color="color" :indicator-color="color" align="justify" v-model="localValue">
|
|
38
42
|
<q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
|
|
39
43
|
</q-tabs>
|
|
40
44
|
<q-tab-panels v-model="localValue">
|