@hostlink/nuxt-light 1.21.6 → 1.21.8
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 +1 -1
- package/dist/runtime/components/L/System/Setting/mail.vue +1 -7
- package/dist/runtime/components/{l-user-eventlog.vue → L/User/eventlog.vue} +2 -1
- package/dist/runtime/components/{l-user-overview.vue → L/User/overview.vue} +5 -1
- package/dist/runtime/components/l-app-main.vue +2 -1
- package/dist/runtime/components/l-btn.vue +7 -29
- package/dist/runtime/components/l-card.vue +3 -6
- package/dist/runtime/components/l-checkbox.vue +2 -18
- package/dist/runtime/components/l-date-picker.vue +5 -18
- package/dist/runtime/components/l-field.vue +1 -4
- package/dist/runtime/components/l-file-upload.vue +14 -35
- package/dist/runtime/components/l-file.vue +7 -9
- package/dist/runtime/components/l-icon-picker.vue +3253 -3272
- package/dist/runtime/components/l-input-xlsx.vue +16 -30
- package/dist/runtime/components/l-input.vue +6 -41
- package/dist/runtime/components/l-select.vue +3 -26
- package/dist/runtime/components/l-table.vue +13 -16
- package/dist/runtime/components/l-time-picker.vue +5 -32
- package/dist/runtime/formkit/DatePicker.vue +10 -1
- package/dist/runtime/formkit/File.vue +6 -12
- package/dist/runtime/formkit/Input.vue +11 -5
- package/dist/runtime/formkit/Select.vue +2 -10
- package/dist/runtime/light.d.ts +6 -10
- package/dist/runtime/light.js +61 -22
- package/dist/runtime/pages/System/menu/index.vue +61 -55
- package/dist/runtime/pages/User/setting/style.vue +88 -113
- package/package.json +1 -1
- package/dist/runtime/components/l-table-old.vue +0 -718
- package/dist/runtime/components/l-table2.vue +0 -754
- /package/dist/runtime/components/{l-user-userlog.vue → L/User/userlog.vue} +0 -0
|
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
|
|
|
6
6
|
|
|
7
7
|
const { t } = useI18n()
|
|
8
8
|
const quasar = useQuasar();
|
|
9
|
+
const $q = quasar
|
|
9
10
|
const { app: { customMenus } } = await q({
|
|
10
11
|
app: {
|
|
11
12
|
customMenus: true
|
|
@@ -49,7 +50,7 @@ const onReload = async () => {
|
|
|
49
50
|
|
|
50
51
|
const onAddChild = (node) => {
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
$q.dialog({
|
|
53
54
|
title: t('Add child menu'),
|
|
54
55
|
message: t('Enter menu label'),
|
|
55
56
|
prompt: {
|
|
@@ -65,6 +66,7 @@ const onAddChild = (node) => {
|
|
|
65
66
|
uuid: getUUID(),
|
|
66
67
|
parent: node.uuid,
|
|
67
68
|
children: [],
|
|
69
|
+
icon: 'sym_o_link',
|
|
68
70
|
});
|
|
69
71
|
tree1.value.setExpanded(selected.value, true)
|
|
70
72
|
|
|
@@ -238,59 +240,63 @@ const menusOnly = computed(() => {
|
|
|
238
240
|
<q-toolbar class="q-gutter-xs">
|
|
239
241
|
<l-btn @click="onSave" label="Save" icon="sym_o_save" />
|
|
240
242
|
<l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
243
|
+
|
|
244
|
+
<template v-if="selectedNode">
|
|
245
|
+
|
|
246
|
+
<template v-if="selectedNode.type == 'root'">
|
|
247
|
+
<l-btn @click="onAddChild(selectedNode)" label="Add" icon="sym_o_add" />
|
|
248
|
+
<l-btn @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
|
|
249
|
+
<l-btn @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
|
|
250
|
+
</template>
|
|
251
|
+
<template v-else>
|
|
252
|
+
<q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add">
|
|
253
|
+
<q-list>
|
|
254
|
+
<q-item clickable v-close-popup @click="onAddChild(selectedNode)">
|
|
255
|
+
<q-item-section>
|
|
256
|
+
<q-item-label>Child</q-item-label>
|
|
257
|
+
</q-item-section>
|
|
258
|
+
</q-item>
|
|
259
|
+
<q-item clickable v-close-popup @click="onAddHeader(selectedNode)">
|
|
260
|
+
<q-item-section>
|
|
261
|
+
<q-item-label>Header</q-item-label>
|
|
262
|
+
</q-item-section>
|
|
263
|
+
</q-item>
|
|
264
|
+
<q-item clickable v-close-popup @click="onAddSeparator(selectedNode)">
|
|
265
|
+
<q-item-section>
|
|
266
|
+
<q-item-label>Separator</q-item-label>
|
|
267
|
+
</q-item-section>
|
|
268
|
+
</q-item>
|
|
269
|
+
|
|
270
|
+
</q-list>
|
|
271
|
+
</q-btn-dropdown>
|
|
272
|
+
|
|
273
|
+
<l-btn @click="onRemove(selectedNode)" label="Remove" icon="sym_o_remove" />
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
<l-btn @click="onMove(selectedNode)" label="Move" icon="sym_o_move" />
|
|
277
|
+
|
|
278
|
+
<l-btn @click="onMoveUp(selectedNode)" label="Up" icon="sym_o_arrow_upward" />
|
|
279
|
+
|
|
280
|
+
<l-btn @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
<q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add menus' })" icon="sym_o_add">
|
|
284
|
+
<q-list>
|
|
285
|
+
<q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
|
|
286
|
+
<q-item-section>
|
|
287
|
+
<q-item-label>List</q-item-label>
|
|
288
|
+
</q-item-section>
|
|
289
|
+
</q-item>
|
|
290
|
+
|
|
291
|
+
<q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'add')">
|
|
292
|
+
<q-item-section>
|
|
293
|
+
<q-item-label>Add</q-item-label>
|
|
294
|
+
</q-item-section>
|
|
295
|
+
</q-item>
|
|
296
|
+
|
|
297
|
+
</q-list>
|
|
298
|
+
</q-btn-dropdown>
|
|
299
|
+
</template>
|
|
294
300
|
</template>
|
|
295
301
|
</q-toolbar>
|
|
296
302
|
<q-splitter v-model="splitterModel" style="height:680px">
|
|
@@ -338,7 +344,7 @@ const menusOnly = computed(() => {
|
|
|
338
344
|
|
|
339
345
|
<template v-if="selectedNode.type == 'separator'">
|
|
340
346
|
<div class="q-gutter-md">
|
|
341
|
-
<
|
|
347
|
+
<l-checkbox label="Spaced" v-model="selectedNode.spaced" />
|
|
342
348
|
|
|
343
349
|
</div>
|
|
344
350
|
</template>
|
|
@@ -1,82 +1,73 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { q, m } from '#imports'
|
|
3
|
-
import {
|
|
3
|
+
import { ref } from 'vue'
|
|
4
4
|
let { my } = await q({
|
|
5
5
|
my: {
|
|
6
6
|
styles: true
|
|
7
7
|
}
|
|
8
8
|
});
|
|
9
9
|
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
10
|
+
const defaultStyle = {
|
|
11
|
+
table: {
|
|
12
|
+
dense: true,
|
|
13
|
+
flat: true,
|
|
14
|
+
bordered: true,
|
|
15
|
+
separator: 'cell'
|
|
16
|
+
},
|
|
17
|
+
card: {
|
|
18
|
+
flat: true,
|
|
19
|
+
bordered: true,
|
|
20
|
+
square: false
|
|
21
|
+
},
|
|
22
|
+
button: {
|
|
23
|
+
outline: false,
|
|
24
|
+
rounded: false,
|
|
25
|
+
unelevated: false,
|
|
26
|
+
dense: false
|
|
27
|
+
},
|
|
28
|
+
input: {
|
|
29
|
+
filled: false,
|
|
30
|
+
outlined: true,
|
|
31
|
+
standout: false,
|
|
32
|
+
rounded: false,
|
|
33
|
+
dense: false,
|
|
34
|
+
square: false,
|
|
35
|
+
stackLabel: true
|
|
36
|
+
}
|
|
37
|
+
}
|
|
27
38
|
|
|
28
|
-
inputFilled: my.styles.inputFilled === undefined ? false : my.styles.inputFilled,
|
|
29
|
-
inputOutlined: my.styles.inputOutlined === undefined ? true : my.styles.inputOutlined,
|
|
30
|
-
inputStandout: my.styles.inputStandout === undefined ? false : my.styles.inputStandout,
|
|
31
|
-
inputRounded: my.styles.inputRounded === undefined ? false : my.styles.inputRounded,
|
|
32
|
-
inputDense: my.styles.inputDense === undefined ? true : my.styles.inputDense,
|
|
33
|
-
inputSquare: my.styles.inputSquare === undefined ? false : my.styles.inputSquare,
|
|
34
|
-
inputStackLabel: my.styles.inputStackLabel === undefined ? false : my.styles.inputStackLabel,
|
|
35
39
|
|
|
40
|
+
const styles = ref({
|
|
41
|
+
table: my.styles.table === undefined ? JSON.parse(JSON.stringify(defaultStyle.table)) : my.styles.table,
|
|
42
|
+
card: my.styles.card === undefined ? JSON.parse(JSON.stringify(defaultStyle.card)) : my.styles.card,
|
|
43
|
+
button: my.styles.button === undefined ? JSON.parse(JSON.stringify(defaultStyle.button)) : my.styles.button,
|
|
44
|
+
input: my.styles.input === undefined ? JSON.parse(JSON.stringify(defaultStyle.input)) : my.styles.input
|
|
36
45
|
})
|
|
37
46
|
|
|
38
47
|
const onSave = async () => {
|
|
39
48
|
await m("updateMyStyles", {
|
|
40
|
-
value: styles
|
|
49
|
+
value: styles.value
|
|
41
50
|
});
|
|
42
51
|
|
|
43
52
|
//reload
|
|
44
53
|
window.location.reload();
|
|
45
54
|
}
|
|
46
55
|
|
|
47
|
-
const setDefault =
|
|
48
|
-
|
|
49
|
-
styles
|
|
50
|
-
styles.
|
|
51
|
-
styles.tableBorder = true;
|
|
52
|
-
styles.tableSeparator = 'cell';
|
|
53
|
-
|
|
54
|
-
styles.cardFlat = true;
|
|
55
|
-
styles.cardBordered = true;
|
|
56
|
-
styles.cardSquare = false;
|
|
57
|
-
|
|
58
|
-
styles.buttonOutline = false;
|
|
59
|
-
styles.buttonRounded = false;
|
|
60
|
-
styles.buttonUnelevated = false;
|
|
61
|
-
styles.buttonDense = false;
|
|
62
|
-
|
|
63
|
-
styles.inputFilled = false;
|
|
64
|
-
styles.inputOutlined = true;
|
|
65
|
-
styles.inputStandout = false;
|
|
66
|
-
styles.inputRounded = false;
|
|
67
|
-
styles.inputDense = false;
|
|
68
|
-
styles.inputSquare = false;
|
|
69
|
-
styles.inputStackLabel = true;
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
const setDefault = () => {
|
|
57
|
+
console.log('setDefault')
|
|
58
|
+
//reset styles
|
|
59
|
+
styles.value = JSON.parse(JSON.stringify(defaultStyle));
|
|
72
60
|
|
|
73
61
|
}
|
|
74
62
|
|
|
63
|
+
|
|
75
64
|
const columns = [
|
|
76
65
|
{ name: 'action' },
|
|
77
66
|
{ name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
|
|
78
67
|
{ name: 'phone', label: 'Phone', align: 'left', field: 'phone', sortable: true },
|
|
79
68
|
]
|
|
69
|
+
|
|
70
|
+
const preview = ref({})
|
|
80
71
|
</script>
|
|
81
72
|
<template>
|
|
82
73
|
<div class="q-pa-md">
|
|
@@ -85,12 +76,12 @@ const columns = [
|
|
|
85
76
|
<l-form @save="onSave" :bordered="false" class="q-ma-none">
|
|
86
77
|
<l-card title="Table" minimizable>
|
|
87
78
|
<q-card-section>
|
|
88
|
-
<q-toggle v-model="styles.
|
|
89
|
-
<q-toggle v-model="styles.
|
|
90
|
-
<q-toggle v-model="styles.
|
|
79
|
+
<q-toggle v-model="styles.table.dense" label="Dense" :color="$light.color" />
|
|
80
|
+
<q-toggle v-model="styles.table.flat" label="Flat" :color="$light.color" />
|
|
81
|
+
<q-toggle v-model="styles.table.bordered" label="Bordered" :color="$light.color" />
|
|
91
82
|
|
|
92
83
|
<q-field :label="`Separator`" stack-label :color="$light.color">
|
|
93
|
-
<q-option-group v-model="styles.
|
|
84
|
+
<q-option-group v-model="styles.table.separator" inline :options="[
|
|
94
85
|
{ label: 'Horizontal', value: 'horizontal' },
|
|
95
86
|
{ label: 'Vertical', value: 'vertical' },
|
|
96
87
|
{ label: 'Cell', value: 'cell' },
|
|
@@ -102,30 +93,30 @@ const columns = [
|
|
|
102
93
|
|
|
103
94
|
<l-card title="Card" minimizable>
|
|
104
95
|
<q-card-section>
|
|
105
|
-
<q-toggle v-model="styles.
|
|
106
|
-
<q-toggle v-model="styles.
|
|
107
|
-
<q-toggle v-model="styles.
|
|
96
|
+
<q-toggle v-model="styles.card.flat" label="Flat" :color="$light.color" />
|
|
97
|
+
<q-toggle v-model="styles.card.bordered" label="Bordered" :color="$light.color" />
|
|
98
|
+
<q-toggle v-model="styles.card.square" label="Square" :color="$light.color" />
|
|
108
99
|
</q-card-section>
|
|
109
100
|
</l-card>
|
|
110
101
|
|
|
111
102
|
<l-card title="Button" minimizable>
|
|
112
103
|
<q-card-section>
|
|
113
|
-
<q-toggle v-model="styles.
|
|
114
|
-
<q-toggle v-model="styles.
|
|
115
|
-
<q-toggle v-model="styles.
|
|
116
|
-
<q-toggle v-model="styles.
|
|
104
|
+
<q-toggle v-model="styles.button.outline" label="Outline" :color="$light.color" />
|
|
105
|
+
<q-toggle v-model="styles.button.rounded" label="Rounded" :color="$light.color" />
|
|
106
|
+
<q-toggle v-model="styles.button.unelevated" label="Unelevated" :color="$light.color" />
|
|
107
|
+
<q-toggle v-model="styles.button.dense" label="Dense" :color="$light.color" />
|
|
117
108
|
</q-card-section>
|
|
118
109
|
</l-card>
|
|
119
110
|
|
|
120
111
|
<l-card title="Input" minimizable>
|
|
121
112
|
<q-card-section>
|
|
122
|
-
<q-toggle v-model="styles.
|
|
123
|
-
<q-toggle v-model="styles.
|
|
124
|
-
<q-toggle v-model="styles.
|
|
125
|
-
<q-toggle v-model="styles.
|
|
126
|
-
<q-toggle v-model="styles.
|
|
127
|
-
<q-toggle v-model="styles.
|
|
128
|
-
<q-toggle v-model="styles.
|
|
113
|
+
<q-toggle v-model="styles.input.filled" label="Filled" :color="$light.color" />
|
|
114
|
+
<q-toggle v-model="styles.input.outlined" label="Outlined" :color="$light.color" />
|
|
115
|
+
<q-toggle v-model="styles.input.standout" label="Standout" :color="$light.color" />
|
|
116
|
+
<q-toggle v-model="styles.input.rounded" label="Rounded" :color="$light.color" />
|
|
117
|
+
<q-toggle v-model="styles.input.dense" label="Dense" :color="$light.color" />
|
|
118
|
+
<q-toggle v-model="styles.input.square" label="Square" :color="$light.color" />
|
|
119
|
+
<q-toggle v-model="styles.input.stackLabel" label="Stack label" :color="$light.color" />
|
|
129
120
|
</q-card-section>
|
|
130
121
|
</l-card>
|
|
131
122
|
|
|
@@ -137,51 +128,35 @@ const columns = [
|
|
|
137
128
|
</l-col>
|
|
138
129
|
|
|
139
130
|
<l-col md="6">
|
|
140
|
-
<q-card
|
|
141
|
-
<q-
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
]" :flat="styles.tableFlat" :bordered="styles.tableBorder" :dense="styles.tableDense"
|
|
169
|
-
:separator="styles.tableSeparator">
|
|
170
|
-
|
|
171
|
-
<template #body-cell-action="props">
|
|
172
|
-
<q-td auto-width>
|
|
173
|
-
<q-btn flat round icon="sym_o_search" size="sm"></q-btn>
|
|
174
|
-
</q-td>
|
|
175
|
-
</template>
|
|
176
|
-
</q-table>
|
|
177
|
-
|
|
178
|
-
</div>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
131
|
+
<q-card v-bind="styles.card">
|
|
132
|
+
<q-toolbar>
|
|
133
|
+
<q-toolbar-title>UI preview</q-toolbar-title>
|
|
134
|
+
</q-toolbar>
|
|
135
|
+
<q-card-section class="q-gutter-md">
|
|
136
|
+
|
|
137
|
+
<q-btn :color="$light.color" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>
|
|
138
|
+
|
|
139
|
+
<q-input :color="$light.color" label="Input" v-bind="styles.input" />
|
|
140
|
+
|
|
141
|
+
<q-select :color="$light.color" label="Select" v-bind="styles.input" :options="[
|
|
142
|
+
{ label: 'A', value: 'a' },
|
|
143
|
+
{ label: 'B', value: 'b' },
|
|
144
|
+
{ label: 'C', value: 'c' }
|
|
145
|
+
]" v-model="preview.select" />
|
|
146
|
+
|
|
147
|
+
<q-table :columns="columns" :rows="[
|
|
148
|
+
{ name: 'A', phone: '123' },
|
|
149
|
+
{ name: 'B', phone: '456' },
|
|
150
|
+
{ name: 'C', phone: '789' },
|
|
151
|
+
]" v-bind="styles.table">
|
|
152
|
+
|
|
153
|
+
<template #body-cell-action="props">
|
|
154
|
+
<q-td auto-width>
|
|
155
|
+
<q-btn flat round icon="sym_o_search" size="sm"></q-btn>
|
|
156
|
+
</q-td>
|
|
157
|
+
</template>
|
|
158
|
+
</q-table>
|
|
183
159
|
|
|
184
|
-
</div>
|
|
185
160
|
</q-card-section>
|
|
186
161
|
|
|
187
162
|
</q-card>
|