@drax/settings-vue 0.36.0 → 0.37.1
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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.37.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "./src/index.ts",
|
|
9
9
|
"module": "./src/index.ts",
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
"format": "prettier --write src/"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@drax/common-front": "^0.
|
|
28
|
-
"@drax/identity-vue": "^0.
|
|
29
|
-
"@drax/settings-front": "^0.
|
|
30
|
-
"@drax/settings-share": "^0.
|
|
27
|
+
"@drax/common-front": "^0.37.0",
|
|
28
|
+
"@drax/identity-vue": "^0.37.1",
|
|
29
|
+
"@drax/settings-front": "^0.37.0",
|
|
30
|
+
"@drax/settings-share": "^0.37.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"pinia": "^2.2.2",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"vue-tsc": "^2.1.10",
|
|
65
65
|
"vuetify": "^3.7.1"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "e4be12cd506bf5255e0f8b26b89cdd2a660a523d"
|
|
68
68
|
}
|
|
@@ -65,8 +65,10 @@ const validateNumberList = computed(() => {
|
|
|
65
65
|
:prefix="setting.prefix"
|
|
66
66
|
:suffix="setting.suffix"
|
|
67
67
|
:readonly="!editing"
|
|
68
|
-
|
|
68
|
+
|
|
69
69
|
:variant="variant"
|
|
70
|
+
:hint="setting.description"
|
|
71
|
+
:persistent-hint="!!setting.description"
|
|
70
72
|
>
|
|
71
73
|
</v-text-field>
|
|
72
74
|
|
|
@@ -82,8 +84,10 @@ const validateNumberList = computed(() => {
|
|
|
82
84
|
:prefix="setting.prefix"
|
|
83
85
|
:suffix="setting.suffix"
|
|
84
86
|
:readonly="!editing"
|
|
85
|
-
|
|
87
|
+
|
|
86
88
|
:variant="variant"
|
|
89
|
+
:hint="setting.description"
|
|
90
|
+
:persistent-hint="!!setting.description"
|
|
87
91
|
>
|
|
88
92
|
</v-textarea>
|
|
89
93
|
|
|
@@ -102,8 +106,10 @@ const validateNumberList = computed(() => {
|
|
|
102
106
|
:prefix="setting.prefix"
|
|
103
107
|
:suffix="setting.suffix"
|
|
104
108
|
:readonly="!editing"
|
|
105
|
-
|
|
109
|
+
|
|
106
110
|
:variant="variant"
|
|
111
|
+
:hint="setting.description"
|
|
112
|
+
:persistent-hint="!!setting.description"
|
|
107
113
|
>
|
|
108
114
|
</v-text-field>
|
|
109
115
|
|
|
@@ -119,8 +125,10 @@ const validateNumberList = computed(() => {
|
|
|
119
125
|
:prefix="setting.prefix"
|
|
120
126
|
:suffix="setting.suffix"
|
|
121
127
|
:readonly="!editing"
|
|
122
|
-
|
|
128
|
+
|
|
123
129
|
:variant="variant"
|
|
130
|
+
:hint="setting.description"
|
|
131
|
+
:persistent-hint="!!setting.description"
|
|
124
132
|
>
|
|
125
133
|
</v-text-field>
|
|
126
134
|
|
|
@@ -133,8 +141,10 @@ const validateNumberList = computed(() => {
|
|
|
133
141
|
:placeholder="setting.label"
|
|
134
142
|
color="secondary"
|
|
135
143
|
:readonly="!editing"
|
|
136
|
-
|
|
144
|
+
|
|
137
145
|
:variant="variant"
|
|
146
|
+
:hint="setting.description"
|
|
147
|
+
:persistent-hint="!!setting.description"
|
|
138
148
|
>
|
|
139
149
|
</v-checkbox>
|
|
140
150
|
|
|
@@ -150,8 +160,10 @@ const validateNumberList = computed(() => {
|
|
|
150
160
|
:prefix="setting.prefix"
|
|
151
161
|
:suffix="setting.suffix"
|
|
152
162
|
:readonly="!editing"
|
|
153
|
-
|
|
163
|
+
|
|
154
164
|
:variant="variant"
|
|
165
|
+
:hint="setting.description"
|
|
166
|
+
:persistent-hint="!!setting.description"
|
|
155
167
|
>
|
|
156
168
|
</v-select>
|
|
157
169
|
|
|
@@ -166,8 +178,10 @@ const validateNumberList = computed(() => {
|
|
|
166
178
|
:placeholder="setting.label"
|
|
167
179
|
color="secondary"
|
|
168
180
|
:readonly="!editing"
|
|
169
|
-
|
|
181
|
+
|
|
170
182
|
:variant="variant"
|
|
183
|
+
:hint="setting.description"
|
|
184
|
+
:persistent-hint="!!setting.description"
|
|
171
185
|
>
|
|
172
186
|
</v-combobox>
|
|
173
187
|
|
|
@@ -182,8 +196,10 @@ const validateNumberList = computed(() => {
|
|
|
182
196
|
color="secondary"
|
|
183
197
|
:rules="validateNumberList"
|
|
184
198
|
:readonly="!editing"
|
|
185
|
-
|
|
199
|
+
|
|
186
200
|
:variant="variant"
|
|
201
|
+
:hint="setting.description"
|
|
202
|
+
:persistent-hint="!!setting.description"
|
|
187
203
|
>
|
|
188
204
|
</v-combobox>
|
|
189
205
|
|
|
@@ -200,8 +216,10 @@ const validateNumberList = computed(() => {
|
|
|
200
216
|
:prefix="setting.prefix"
|
|
201
217
|
:suffix="setting.suffix"
|
|
202
218
|
:readonly="!editing"
|
|
203
|
-
|
|
219
|
+
|
|
204
220
|
:variant="variant"
|
|
221
|
+
:hint="setting.description"
|
|
222
|
+
:persistent-hint="!!setting.description"
|
|
205
223
|
>
|
|
206
224
|
</v-select>
|
|
207
225
|
|
|
@@ -14,6 +14,7 @@ onMounted(async () => {
|
|
|
14
14
|
|
|
15
15
|
const settingEditing = ref()
|
|
16
16
|
const editing = ref(false)
|
|
17
|
+
const visibleSecrets = ref<Record<string, boolean>>({})
|
|
17
18
|
|
|
18
19
|
function edit(setting: ISetting) {
|
|
19
20
|
settingEditing.value = {...setting}
|
|
@@ -25,11 +26,23 @@ function clearEdit() {
|
|
|
25
26
|
settingEditing.value = null
|
|
26
27
|
}
|
|
27
28
|
|
|
29
|
+
function toggleSecretVisibility(key: string) {
|
|
30
|
+
visibleSecrets.value[key] = !visibleSecrets.value[key]
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function isSecretVisible(key: string): boolean {
|
|
34
|
+
return visibleSecrets.value[key] || false
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function getObfuscatedValue(value: string): string {
|
|
38
|
+
return '•'.repeat(Math.min(value?.length || 8, 12))
|
|
39
|
+
}
|
|
40
|
+
|
|
28
41
|
</script>
|
|
29
42
|
|
|
30
43
|
<template>
|
|
31
44
|
<div>
|
|
32
|
-
<h1 class="mb-6 text-h2">
|
|
45
|
+
<h1 class="mb-6 text-h2">{{t('setting.menu')}}</h1>
|
|
33
46
|
|
|
34
47
|
<setting-editor
|
|
35
48
|
v-if="editing"
|
|
@@ -49,11 +62,12 @@ function clearEdit() {
|
|
|
49
62
|
<v-data-table
|
|
50
63
|
hide-default-footer
|
|
51
64
|
:headers="[
|
|
52
|
-
{ title: t('
|
|
53
|
-
{ title: t('
|
|
54
|
-
{ title: t('
|
|
55
|
-
{ title: t('
|
|
56
|
-
{ title: t('
|
|
65
|
+
{ title: t('setting.field.key'), key: 'key', width: '130px', minWidth: '130px' },
|
|
66
|
+
{ title: t('setting.field.label'), key: 'label', width: '130px', minWidth: '130px' },
|
|
67
|
+
{ title: t('setting.field.value'), key: 'value' },
|
|
68
|
+
{ title: t('setting.field.type'), key: 'type', width: '120px', minWidth: '120px' },
|
|
69
|
+
{ title: t('setting.field.scope'), key:'scope', width: '170px', minWidth: '170px' },
|
|
70
|
+
{ title: t('action.edit'), key: 'actions', width: '70px' },
|
|
57
71
|
|
|
58
72
|
]"
|
|
59
73
|
:items="category"
|
|
@@ -61,6 +75,7 @@ function clearEdit() {
|
|
|
61
75
|
>
|
|
62
76
|
|
|
63
77
|
<template v-slot:item.value="{ item }">
|
|
78
|
+
<v-card variant="tonal" density="compact" class="my-1"><v-card-text>
|
|
64
79
|
{{ item.prefix }}
|
|
65
80
|
<template v-if="item.type === 'boolean'">
|
|
66
81
|
<v-chip :color="item.value ? 'green' : 'red' " tile>
|
|
@@ -70,10 +85,24 @@ function clearEdit() {
|
|
|
70
85
|
<template v-else-if="['stringList','numberList','enumList'].includes(item.type)">
|
|
71
86
|
<v-chip v-for="(v,i) in item.value" :key="i">{{v}}</v-chip>
|
|
72
87
|
</template>
|
|
88
|
+
<template v-else-if="['password','secret'].includes(item.type)">
|
|
89
|
+
<span class="d-inline-flex align-center">
|
|
90
|
+
<span class="mr-2">
|
|
91
|
+
{{ isSecretVisible(item.key) ? item.value : getObfuscatedValue(item.value) }}
|
|
92
|
+
</span>
|
|
93
|
+
<v-btn
|
|
94
|
+
:icon="isSecretVisible(item.key) ? 'mdi-eye-off' : 'mdi-eye'"
|
|
95
|
+
size="x-small"
|
|
96
|
+
variant="text"
|
|
97
|
+
@click="toggleSecretVisibility(item.key)"
|
|
98
|
+
></v-btn>
|
|
99
|
+
</span>
|
|
100
|
+
</template>
|
|
73
101
|
<template v-else>
|
|
74
102
|
{{item.value}}
|
|
75
103
|
</template>
|
|
76
104
|
{{ item.suffix }}
|
|
105
|
+
</v-card-text></v-card>
|
|
77
106
|
</template>
|
|
78
107
|
|
|
79
108
|
<template v-slot:item.scope="{ item }">
|