chore: update uikit -> ui-kit

packages/business/layouts/src/authentication/toolbar.vue

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

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

@@ -0,0 +1,62 @@
+<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>

packages/business/layouts/src/authentication/widgets/index.ts

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

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { AuthPageLayoutType } from '@vben-core/preferences';
+import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
+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('layout.align-left'),
+  },
+  {
+    icon: MdiDockBottom,
+    key: 'panel-center',
+    text: $t('layout.center'),
+  },
+  {
+    icon: MdiDockRight,
+    key: 'panel-right',
+    text: $t('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>

packages/business/layouts/src/basic/header/header.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { GlobalSearch, LanguageToggle, ThemeToggle } from '@vben/universal-ui';
+import { GlobalSearch, LanguageToggle, ThemeToggle } from '@vben/widgets';
 import { usePreferences } from '@vben-core/preferences';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
 import { useAccessStore } from '@vben-core/stores';

packages/business/layouts/src/basic/layout.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 
 import { $t } from '@vben/locales';
-import { PreferencesWidget } from '@vben/universal-ui';
+import { PreferencesWidget } from '@vben/widgets';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import {
   preferences,