preferences.vue
1.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script lang="ts" setup>
import { computed } from 'vue';
import { Settings } from '@vben/icons';
import { $t, loadLocaleMessages } from '@vben/locales';
import { preferences, updatePreferences } from '@vben/preferences';
import { capitalizeFirstLetter } from '@vben/utils';
import { useVbenDrawer } from '@vben-core/popup-ui';
import { VbenButton } from '@vben-core/shadcn-ui';
import PreferencesDrawer from './preferences-drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
connectedComponent: PreferencesDrawer,
});
/**
* preferences 转成 vue props
* preferences.widget.fullscreen=>widgetFullscreen
*/
const attrs = computed(() => {
const result: Record<string, any> = {};
for (const [key, value] of Object.entries(preferences)) {
for (const [subKey, subValue] of Object.entries(value)) {
result[`${key}${capitalizeFirstLetter(subKey)}`] = subValue;
}
}
return result;
});
/**
* preferences 转成 vue listener
* preferences.widget.fullscreen=>@update:widgetFullscreen
*/
const listen = computed(() => {
const result: Record<string, any> = {};
for (const [key, value] of Object.entries(preferences)) {
if (typeof value === 'object') {
for (const subKey of Object.keys(value)) {
result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (
val: any,
) => {
updatePreferences({ [key]: { [subKey]: val } });
if (key === 'app' && subKey === 'locale') {
loadLocaleMessages(val);
}
};
}
} else {
result[key] = value;
}
}
return result;
});
</script>
<template>
<div>
<Drawer v-bind="{ ...$attrs, ...attrs }" v-on="listen" />
<div @click="() => drawerApi.open()">
<slot>
<VbenButton
:title="$t('preferences.title')"
class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
>
<Settings class="size-5" />
</VbenButton>
</slot>
</div>
</div>
</template>