@hostlink/nuxt-light 1.6.4 → 1.6.5
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
|
@@ -10,6 +10,10 @@ export interface LCardProps extends QCardProps {
|
|
|
10
10
|
* Permission to access this card, if not granted, the card will not be shown, if the user is admin, a lock icon will be shown to allow the user to grant the permission
|
|
11
11
|
*/
|
|
12
12
|
permission?: string
|
|
13
|
+
fullscreenable?: boolean
|
|
14
|
+
closeable?: boolean
|
|
15
|
+
minimizable?: boolean
|
|
16
|
+
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
const light = useLight();
|
|
@@ -45,6 +49,9 @@ const fullScreenIcon = computed(() => fullScreen.value ? "sym_o_fullscreen_exit"
|
|
|
45
49
|
const showBody = computed(() => !minimize.value || fullScreen.value);
|
|
46
50
|
|
|
47
51
|
const showBar = computed(() => {
|
|
52
|
+
if (props.closeable) return true;
|
|
53
|
+
if (props.fullscreenable) return true;
|
|
54
|
+
if (props.minimizable) return true;
|
|
48
55
|
if (props.title !== undefined) return true;
|
|
49
56
|
if (showSecurity.value) return true;
|
|
50
57
|
return false;
|
|
@@ -127,8 +134,9 @@ const onUpdatePermission = async (role: any) => {
|
|
|
127
134
|
</q-menu>
|
|
128
135
|
</q-btn>
|
|
129
136
|
|
|
130
|
-
<q-btn dense flat @click="
|
|
131
|
-
<q-btn dense flat
|
|
137
|
+
<q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen && minimizable" />
|
|
138
|
+
<q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" v-if="fullscreenable" />
|
|
139
|
+
<q-btn dense flat icon="sym_o_close" v-close-popup v-if="closeable" />
|
|
132
140
|
</q-bar>
|
|
133
141
|
<template v-if="showBody">
|
|
134
142
|
<slot></slot>
|
|
@@ -60,14 +60,9 @@ const columns = [
|
|
|
60
60
|
<template>
|
|
61
61
|
<l-page>
|
|
62
62
|
|
|
63
|
-
<q-dialog v-model="dialog" persistent
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
<q-space></q-space>
|
|
67
|
-
<q-btn dense flat icon="close" v-close-popup>
|
|
68
|
-
<q-tooltip>Close</q-tooltip>
|
|
69
|
-
</q-btn>
|
|
70
|
-
</q-bar>
|
|
63
|
+
<q-dialog v-model="dialog" persistent>
|
|
64
|
+
<l-card style="width: 500px; max-width: 90vw;" :bordered="false" closeable>
|
|
65
|
+
|
|
71
66
|
|
|
72
67
|
<FormKit type="l-form" :value="value" @submit="onSubmit" #default="{ value }">
|
|
73
68
|
<FormKit type="l-input" label="Name" name="name" validation="required"></FormKit>
|
|
@@ -102,7 +97,7 @@ const columns = [
|
|
|
102
97
|
</FormKit>
|
|
103
98
|
|
|
104
99
|
</FormKit>
|
|
105
|
-
</
|
|
100
|
+
</l-card>
|
|
106
101
|
|
|
107
102
|
</q-dialog>
|
|
108
103
|
<template #header>
|
|
@@ -117,7 +112,9 @@ const columns = [
|
|
|
117
112
|
</template>
|
|
118
113
|
|
|
119
114
|
<template #body-cell-data="props">
|
|
120
|
-
<q-td
|
|
115
|
+
<q-td>
|
|
116
|
+
<pre>{{ props.row.data }}</pre>
|
|
117
|
+
</q-td>
|
|
121
118
|
</template>
|
|
122
119
|
|
|
123
120
|
</l-table>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { q, m } from '
|
|
2
|
+
import { q, m } from '#imports'
|
|
3
3
|
import { reactive } from 'vue'
|
|
4
4
|
let my = await q("my", ["styles"]);
|
|
5
5
|
|
|
@@ -8,6 +8,9 @@ const styles = reactive({
|
|
|
8
8
|
tableDense: my.styles.tableDense === undefined ? true : my.styles.tableDense,
|
|
9
9
|
tableFlat: my.styles.tableFlat === undefined ? true : my.styles.tableFlat,
|
|
10
10
|
tableBorder: my.styles.tableBorder === undefined ? true : my.styles.tableBorder,
|
|
11
|
+
tableSeparator: my.styles.tableSeparator === undefined ? 'cell' : my.styles.tableSeparator,
|
|
12
|
+
|
|
13
|
+
|
|
11
14
|
|
|
12
15
|
cardFlat: my.styles.cardFlat === undefined ? true : my.styles.cardFlat,
|
|
13
16
|
cardBordered: my.styles.cardBordered === undefined ? true : my.styles.cardBordered,
|
|
@@ -42,6 +45,7 @@ const setDefault = async () => {
|
|
|
42
45
|
styles.tableDense = true;
|
|
43
46
|
styles.tableFlat = true;
|
|
44
47
|
styles.tableBorder = true;
|
|
48
|
+
styles.tableSeparator = 'cell';
|
|
45
49
|
|
|
46
50
|
styles.cardFlat = true;
|
|
47
51
|
styles.cardBordered = true;
|
|
@@ -65,84 +69,100 @@ const setDefault = async () => {
|
|
|
65
69
|
}
|
|
66
70
|
</script>
|
|
67
71
|
<template>
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
72
|
+
<div class="q-pa-md">
|
|
73
|
+
<l-row>
|
|
74
|
+
<l-col md="6">
|
|
75
|
+
<l-form @save="onSave" :bordered="false" class="q-ma-none">
|
|
76
|
+
<l-card title="Table" minimizable>
|
|
77
|
+
<q-card-section>
|
|
78
|
+
<q-toggle v-model="styles.tableDense" label="Dense" :color="$light.color" />
|
|
79
|
+
<q-toggle v-model="styles.tableFlat" label="Flat" :color="$light.color" />
|
|
80
|
+
<q-toggle v-model="styles.tableBorder" label="Bordered" :color="$light.color" />
|
|
81
|
+
|
|
82
|
+
<q-field :label="`Separator`" stack-label :color="$light.color">
|
|
83
|
+
<q-option-group v-model="styles.tableSeparator" inline :options="[
|
|
84
|
+
{ label: 'Horizontal', value: 'horizontal' },
|
|
85
|
+
{ label: 'Vertical', value: 'vertical' },
|
|
86
|
+
{ label: 'Cell', value: 'cell' },
|
|
87
|
+
{ label: 'None', value: 'none' },
|
|
88
|
+
]" :color="$light.color" />
|
|
89
|
+
</q-field>
|
|
90
|
+
</q-card-section>
|
|
91
|
+
</l-card>
|
|
92
|
+
|
|
93
|
+
<l-card title="Card" minimizable>
|
|
94
|
+
<q-card-section>
|
|
95
|
+
<q-toggle v-model="styles.cardFlat" label="Flat" :color="$light.color" />
|
|
96
|
+
<q-toggle v-model="styles.cardBordered" label="Bordered" :color="$light.color" />
|
|
97
|
+
<q-toggle v-model="styles.cardSquare" label="Square" :color="$light.color" />
|
|
98
|
+
</q-card-section>
|
|
99
|
+
</l-card>
|
|
100
|
+
|
|
101
|
+
<l-card title="Button" minimizable>
|
|
102
|
+
<q-card-section>
|
|
103
|
+
<q-toggle v-model="styles.buttonOutline" label="Outline" :color="$light.color" />
|
|
104
|
+
<q-toggle v-model="styles.buttonRounded" label="Rounded" :color="$light.color" />
|
|
105
|
+
<q-toggle v-model="styles.buttonUnelevated" label="Unelevated" :color="$light.color" />
|
|
106
|
+
<q-toggle v-model="styles.buttonDense" label="Dense" :color="$light.color" />
|
|
107
|
+
</q-card-section>
|
|
108
|
+
</l-card>
|
|
109
|
+
|
|
110
|
+
<l-card title="Input" minimizable>
|
|
111
|
+
<q-card-section>
|
|
112
|
+
<q-toggle v-model="styles.inputFilled" label="Filled" :color="$light.color" />
|
|
113
|
+
<q-toggle v-model="styles.inputOutlined" label="Outlined" :color="$light.color" />
|
|
114
|
+
<q-toggle v-model="styles.inputStandout" label="Standout" :color="$light.color" />
|
|
115
|
+
<q-toggle v-model="styles.inputRounded" label="Rounded" :color="$light.color" />
|
|
116
|
+
<q-toggle v-model="styles.inputDense" label="Dense" :color="$light.color" />
|
|
117
|
+
<q-toggle v-model="styles.inputSquare" label="Square" :color="$light.color" />
|
|
118
|
+
<q-toggle v-model="styles.inputStackLabel" label="Stack label" :color="$light.color" />
|
|
119
|
+
</q-card-section>
|
|
120
|
+
</l-card>
|
|
121
|
+
|
|
122
|
+
<l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
</l-form>
|
|
127
|
+
</l-col>
|
|
128
|
+
|
|
129
|
+
<l-col md="6">
|
|
130
|
+
<q-card :bordered="styles.cardBordered" :flat="styles.cardFlat" :square="styles.cardSquare">
|
|
131
|
+
<q-card-section>
|
|
132
|
+
<div>
|
|
133
|
+
UI preview
|
|
134
|
+
<div class="q-gutter-md q-mt-sm">
|
|
135
|
+
|
|
136
|
+
<q-btn :color="$light.color" icon="sym_o_person" label="Button"
|
|
137
|
+
:outline="styles.buttonOutline" :rounded="styles.buttonRounded"
|
|
138
|
+
:unelevated="styles.buttonUnelevated" :dense="styles.buttonDense"></q-btn>
|
|
139
|
+
|
|
140
|
+
<q-input label="Input" :filled="styles.inputFilled" :outlined="styles.inputOutlined"
|
|
141
|
+
:standout="styles.inputStandout" :rounded="styles.inputRounded"
|
|
142
|
+
:dense="styles.inputDense" :square="styles.inputSquare"
|
|
143
|
+
:stack-label="styles.inputStackLabel">
|
|
144
|
+
></q-input>
|
|
145
|
+
|
|
146
|
+
<q-table :rows="[
|
|
147
|
+
{ name: 'A', phone: '123' },
|
|
148
|
+
{ name: 'B', phone: '456' },
|
|
149
|
+
{ name: 'C', phone: '789' },
|
|
150
|
+
]" :flat="styles.tableFlat" :bordered="styles.tableBorder" :dense="styles.tableDense"
|
|
151
|
+
:separator="styles.tableSeparator"></q-table>
|
|
152
|
+
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
</div>
|
|
160
|
+
</q-card-section>
|
|
161
|
+
|
|
162
|
+
</q-card>
|
|
163
|
+
|
|
164
|
+
</l-col>
|
|
165
|
+
|
|
166
|
+
</l-row>
|
|
167
|
+
</div>
|
|
148
168
|
</template>
|