by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(@vben/layouts): remove @vben/widgets and migrate to @vben/layouts/src/widgets

Browse Source
This commit is contained in:
vince
2024-07-09 22:49:36 +08:00
parent d26a4ee022
commit 2731a1ec96
81 changed files with 62 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/business/layouts/src/authentication/toolbar.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { LanguageToggle, ThemeToggle } from '@vben/widgets';
import {
AuthenticationColorToggle,
AuthenticationLayoutToggle,
} from './widgets';
LanguageToggle,
ThemeToggle,
} from '../widgets';
defineOptions({
name: 'AuthenticationToolbar',

62
packages/business/layouts/src/authentication/widgets/color-toggle.vue
View File

@@ -1,62 +0,0 @@
<script setup lang="ts">
import type { BuiltinThemeType } from '@vben/types';
import { IcRoundColorLens } from '@vben-core/iconify';
import {
COLOR_PRESETS,
preferences,
updatePreferences,
} from '@vben-core/preferences';
import { VbenIconButton } from '@vben-core/shadcn-ui';
defineOptions({
name: 'AuthenticationColorToggle',
});
function handleUpdate(value: BuiltinThemeType) {
updatePreferences({
theme: {
builtinType: value,
},
});
}
</script>
<template>
<div class="group relative flex items-center overflow-hidden">
<div
class="ease-ou flex w-0 overflow-hidden transition-all duration-500 group-hover:w-60"
>
<template v-for="preset in COLOR_PRESETS" :key="preset.color">
<VbenIconButton
class="flex-center flex-shrink-0"
@click="handleUpdate(preset.type)"
>
<div
:style="{ backgroundColor: preset.color }"
class="flex-center relative size-5 rounded-full hover:scale-110"
>
<svg
v-if="preferences.theme.builtinType === preset.type"
class="h-3.5 w-3.5 text-white"
height="1em"
viewBox="0 0 15 15"
width="1em"
>
<path
clip-rule="evenodd"
d="M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007l3.849-5.886a.625.625 0 0 1 .865-.181"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</VbenIconButton>
</template>
</div>
<VbenIconButton>
<IcRoundColorLens class="text-primary size-5" />
</VbenIconButton>
</div>
</template>

2
packages/business/layouts/src/authentication/widgets/index.ts
View File

@@ -1,2 +0,0 @@
export { default as AuthenticationColorToggle } from './color-toggle.vue';
export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';

61
packages/business/layouts/src/authentication/widgets/layout-toggle.vue
View File

@@ -1,61 +0,0 @@
<script setup lang="ts">
import type { AuthPageLayoutType } from '@vben-core/preferences';
import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
import { computed } from 'vue';
import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
import { $t } from '@vben-core/locales';
import {
preferences,
updatePreferences,
usePreferences,
} from '@vben-core/preferences';
import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
defineOptions({
name: 'AuthenticationLayoutToggle',
});
const menus = computed((): VbenDropdownMenuItem[] => [
{
icon: MdiDockLeft,
key: 'panel-left',
text: $t('authentication.layout.align-left'),
},
{
icon: MdiDockBottom,
key: 'panel-center',
text: $t('authentication.layout.center'),
},
{
icon: MdiDockRight,
key: 'panel-right',
text: $t('authentication.layout.align-right'),
},
]);
const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
function handleUpdate(value: string) {
updatePreferences({
app: {
authPageLayout: value as AuthPageLayoutType,
},
});
}
</script>
<template>
<VbenDropdownRadioMenu
:menus="menus"
:model-value="preferences.app.authPageLayout"
@update:model-value="handleUpdate"
>
<VbenIconButton>
<MdiDockRight v-if="authPanelRight" class="size-5" />
<MdiDockLeft v-if="authPanelLeft" class="size-5" />
<MdiDockBottom v-if="authPanelCenter" class="size-5" />
</VbenIconButton>
</VbenDropdownRadioMenu>
</template>