v-nuxt-ui 0.1.19 → 0.1.20

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.1.19",
+  "version": "0.1.20",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/button/Theme.vue

@@ -11,6 +11,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const colorMode = useColorMode();
+const emojiFlag = computed(() => props.locale ? getEmojiFlag(props.locale) : "");
 const chipColor = computed(() => {
   if (!props.chip) return void 0;
   if (props.chip === "black") return "black";
@@ -37,7 +38,7 @@ const chipColor = computed(() => {
         />
       </slot>
       <slot v-else-if="locale" name="leading">
-        {{ getEmojiFlag(locale) }}
+        {{ emojiFlag }}
       </slot>
       <slot v-else name="leading" />
     </template>

package/dist/runtime/components/layout/button/Collapse.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layout/button/Collapse.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useApp, useTheme } from "#v/composables";
+const app = useApp();
+const theme = useTheme();
+</script>
+
+<template>
+  <UButton
+    :icon="theme.sidebarSide.value === 'left' ? 'i-lucide-panel-left' : 'i-lucide-panel-right'"
+    color="neutral"
+    variant="ghost"
+    aria-label="Toggle sidebar"
+    @click="app.sidebarCollapsed.value = !app.sidebarCollapsed.value"
+  />
+</template>

package/dist/runtime/components/layout/button/Collapse.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layout/button/ModuleMenu.vue

@@ -42,7 +42,7 @@ const items = computed(() => {
 }"
       color="neutral"
       variant="ghost"
-      :square="collapsed"
+      square
       class="data-[state=open]:bg-elevated"
     />
   </UDropdownMenu>

package/dist/runtime/components/layout/button/ThemePicker.vue

@@ -2,6 +2,7 @@
 import { useTheme } from "#v/composables";
 import ButtonTheme from "#v/components/button/Theme.vue";
 const theme = useTheme();
+const neutralColorOptions = theme.neutralColors.map((c) => ({ color: c, chip: c === "neutral" ? "old-neutral" : c }));
 </script>
 
 <template>
@@ -53,12 +54,12 @@ const theme = useTheme();
 
         <div class="grid grid-cols-3 gap-2 -mx-2">
           <ButtonTheme
-            v-for="color in theme.neutralColors"
-            :key="color"
-            :label="color"
-            :chip="color === 'neutral' ? 'old-neutral' : color"
-            :selected="theme.neutral.value === color"
-            @click="theme.neutral.value = color"
+            v-for="item in neutralColorOptions"
+            :key="item.color"
+            :label="item.color"
+            :chip="item.chip"
+            :selected="theme.neutral.value === item.color"
+            @click="theme.neutral.value = item.color"
           />
         </div>
       </fieldset>
@@ -95,6 +96,22 @@ const theme = useTheme();
           />
         </div>
       </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          侧边栏样式
+        </legend>
+
+        <div class="grid grid-cols-3 gap-2 -mx-2">
+          <ButtonTheme
+            v-for="m in theme.sidebarVariantOptions.value"
+            :key="m.label"
+            v-bind="m"
+            :selected="theme.sidebarVariant.value === m.value"
+            @click="theme.sidebarVariant.value = m.value"
+          />
+        </div>
+      </fieldset>
     </template>
   </UPopover>
 </template>

package/dist/runtime/components/layout/button/UserMenu.vue

@@ -44,19 +44,18 @@ const items = computed(() => [
   <UDropdownMenu
     :items="items"
     :content="{ align: 'center', collisionPadding: 12 }"
-    :ui="{ content: collapsed || headerMode ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }"
   >
     <UButton
-      :label="collapsed || headerMode && app.isMobile.value ? void 0 : auth.loginUser.value?.nickname ?? 'Hello'"
+      :label="auth.loginUser.value?.nickname ?? 'Hello'"
       leading-icon="i-lucide-user-circle"
       :trailing-icon="collapsed || headerMode ? void 0 : 'i-lucide-chevrons-up-down'"
       color="neutral"
       variant="ghost"
-      block
-      :square="collapsed || headerMode"
-      class="data-[state=open]:bg-elevated"
+      square
+      class="data-[state=open]:bg-elevated w-full overflow-hidden"
       :ui="{
-  trailingIcon: 'text-dimmed'
+  trailingIcon: 'text-dimmed ms-auto'
 }"
     />
 

package/dist/runtime/components/layout/default.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_49: {};
+declare var __VLS_42: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_49) => any;
+    default?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/layout/default.vue

@@ -1,18 +1,16 @@
 <script setup>
-import { useApp, useSidebarMenus, useAuth } from "#v/composables";
+import { useSidebarMenus, useAuth, useTheme, useApp } from "#v/composables";
 import { useRoute } from "nuxt/app";
 import { stringsJoin } from "#v/utils";
-import UDashboardGroup from "@nuxt/ui/components/DashboardGroup.vue";
-import UDashboardSidebar from "@nuxt/ui/components/DashboardSidebar.vue";
 import UNavigationMenu from "@nuxt/ui/components/NavigationMenu.vue";
 import ScrollArea from "#v/components/ScrollArea.vue";
 import LayoutModuleMenu from "#v/components/layout/button/ModuleMenu.vue";
 import LayoutThemePicker from "#v/components/layout/button/ThemePicker.vue";
 import LayoutUserMenu from "#v/components/layout/button/UserMenu.vue";
 import Watermark from "#v/components/Watermark.vue";
-import { ref, watch } from "vue";
-const open = ref(false);
+import { watch } from "vue";
 const app = useApp();
+const theme = useTheme();
 const loginUser = useAuth().loginUser;
 const route = useRoute();
 const { sidebarMenus, expandSidebarMenu, breadcrumbs, getBreadcrumbs } = useSidebarMenus();
@@ -31,53 +29,62 @@ watch(
 </script>
 
 <template>
-  <UDashboardGroup unit="rem">
-    <UDashboardSidebar
-      id="sidebar"
-      v-model:open="open"
-      collapsible
-      resizable
-      :min-size="app.appConfig.value.siderMinWidth"
-      :max-size="app.appConfig.value.siderMaxWidth"
+  <div
+    class="flex flex-1 h-full"
+    :class="[
+  theme.sidebarVariant.value === 'inset' && 'bg-neutral-50 dark:bg-neutral-950',
+  theme.sidebarSide.value === 'right' && 'flex-row-reverse'
+]"
+  >
+    <!-- sidebar -->
+    <USidebar
+      v-model:open="app.sidebarCollapsed.value"
+      :variant="theme.sidebarVariant.value"
+      :collapsible="theme.sidebarCollapsible.value"
+      :side="theme.sidebarSide.value"
       :ui="{
-  root: 'bg-muted min-w-[65px]',
-  // 64 + 1: 1 is border-r
-  footer: 'lg:border-t lg:border-default sm:px-4',
   body: 'px-0 sm:px-0',
-  header: 'border-b border-default sm:px-4'
+  footer: 'h-(--ui-footer-height)'
 }"
     >
-      <template #header="{ collapsed }">
-        <LayoutModuleMenu :collapsed="collapsed" class="w-full" />
-        <LayoutThemePicker v-if="!collapsed" class="ml-auto" />
+      <template #header="{ state }">
+        <LayoutModuleMenu :collapsed="state === 'collapsed'" class="flex-1" />
+        <LayoutThemePicker v-if="state !== 'collapsed'" class="ml-auto" />
       </template>
-      <template #default="{ collapsed }">
+
+      <template #default="{ state }">
         <ScrollArea>
           <div class="px-4 flex flex-col gap-2">
             <UNavigationMenu
               :items="sidebarMenus"
-              :collapsed="collapsed"
+              :collapsed="state === 'collapsed'"
               trailing-icon="i-lucide-chevron-down"
               orientation="vertical"
               tooltip
               popover
+              :ui="{ link: 'px-1.5 overflow-hidden' }"
             />
           </div>
         </ScrollArea>
       </template>
 
-      <template #footer="{ collapsed }">
-        <LayoutUserMenu :collapsed="collapsed" />
+      <template #footer="{ state }">
+        <LayoutUserMenu :collapsed="state === 'collapsed'" />
       </template>
-    </UDashboardSidebar>
+    </USidebar>
 
-    <Watermark
-      :text="stringsJoin([
+    <!-- main content -->
+    <div
+      class="flex-1 flex flex-col w-full overflow-hidden lg:peer-data-[variant=floating]:my-4 peer-data-[variant=inset]:m-4 lg:peer-data-[variant=inset]:not-peer-data-[collapsible=offcanvas]:ms-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow-sm peer-data-[variant=inset]:ring peer-data-[variant=inset]:ring-default bg-default"
+    >
+      <Watermark
+        :text="stringsJoin([
   loginUser?.nickname ?? loginUser?.username,
   loginUser?.department?.company?.nickname ?? loginUser?.department?.name
 ], '@')"
-    >
-      <slot />
-    </Watermark>
-  </UDashboardGroup>
+      >
+        <slot />
+      </Watermark>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/layout/default.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_49: {};
+declare var __VLS_42: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_49) => any;
+    default?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/table/Page.vue

@@ -4,6 +4,7 @@ import TableHeader from "#v/components/table/header/index.vue";
 import TableQueryWhere from "#v/components/table/query/where/index.vue";
 import TablePagination from "#v/components/table/Pagination.vue";
 import ScrollArea from "#v/components/ScrollArea.vue";
+import LayoutButtonCollapse from "#v/components/layout/button/Collapse.vue";
 const props = defineProps({
   name: { type: String, required: true },
   cnName: { type: String, required: true },
@@ -74,57 +75,54 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
 </script>
 
 <template>
-  <UDashboardPanel :id="name" :ui="{ body: 'p-0!' }">
-    <template #header>
-      <UDashboardNavbar :title="cnName" class="px-2.5!">
-        <template #leading>
-          <UDashboardSidebarCollapse />
-        </template>
-
-        <template #right>
-          <TableHeader v-bind="tblHeaderProps" />
-        </template>
-      </UDashboardNavbar>
-    </template>
+  <div class="flex-1 flex flex-col overflow-hidden">
+    <!-- header -->
+    <div class="h-(--ui-header-height) flex items-center pl-2.5 pr-2.5 border-b border-default">
+      <div class="flex items-center gap-1">
+        <LayoutButtonCollapse />
+        <span class="font-bold">{{ cnName }}</span>
+      </div>
+      <TableHeader v-bind="tblHeaderProps" class="ml-auto" />
+    </div>
 
-    <template #body>
-      <div ref="table" class="flex flex-col h-full">
-        <UCollapsible :open="tblHeaderProps.whereQueryProps.whereQueryOpen">
-          <template #content>
-            <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="border-b border-default" />
-          </template>
-        </UCollapsible>
+    <!-- query where -->
+    <UCollapsible :open="tblHeaderProps.whereQueryProps.whereQueryOpen">
+      <template #content>
+        <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="bg-muted border-b border-default" />
+      </template>
+    </UCollapsible>
 
-        <!-- table -->
-        <UContextMenu :items="tblContextMenuItems">
-          <ScrollArea class="flex-1">
-            <UTable
-              v-bind="tblProps"
-              :row-selection="rowSelection"
-              :class="tblClasses"
-              :ui="tblUi"
-              @resize="updateTableWidth"
-              @update:row-selection="onUpdateRowSelection"
-            >
-              <template v-if="expandable" #expanded="{ row }">
-                <div
-                  class="px-1 py-3 sticky inset-4 overflow-hidden"
-                  :style="{
+    <!-- table -->
+    <div ref="table" class="flex-1 flex flex-col h-full overflow-hidden border-b border-default">
+      <!-- table -->
+      <UContextMenu :items="tblContextMenuItems">
+        <ScrollArea class="flex-1">
+          <UTable
+            v-bind="tblProps"
+            :row-selection="rowSelection"
+            :class="tblClasses"
+            :ui="tblUi"
+            @resize="updateTableWidth"
+            @update:row-selection="onUpdateRowSelection"
+          >
+            <template v-if="expandable" #expanded="{ row }">
+              <div
+                class="px-1 py-3 sticky inset-4"
+                :style="{
   width: `${tableWidth - 38}px`
 }"
-                >
-                  <KeepAlive>
-                    <component :is="expandVNode?.(row.original)" :key="row.original[rowKey]" role="expand-row" />
-                  </KeepAlive>
-                </div>
-              </template>
-            </UTable>
-          </ScrollArea>
-        </UContextMenu>
+              >
+                <KeepAlive>
+                  <component :is="expandVNode?.(row.original)" :key="row.original[rowKey]" role="expand-row" />
+                </KeepAlive>
+              </div>
+            </template>
+          </UTable>
+        </ScrollArea>
+      </UContextMenu>
+    </div>
 
-        <!-- pagination -->
-        <TablePagination v-bind="tblPaginationProps" />
-      </div>
-    </template>
-  </UDashboardPanel>
+    <!-- pagination -->
+    <TablePagination v-bind="tblPaginationProps" />
+  </div>
 </template>

package/dist/runtime/components/table/Pagination.vue

@@ -16,7 +16,7 @@ const isMobile = useApp().isMobile;
 </script>
 
 <template>
-  <div class="flex items-center justify-between gap-3 h-(--ui-footer-height) border-t border-default p-3">
+  <div class="flex items-center justify-between gap-3 h-(--ui-footer-height) p-3">
     <div v-if="!isMobile" class="text-sm text-muted truncate">
       {{ selectedIds?.length ?? 0 }} of
       {{ data.length }} 行已选择

package/dist/runtime/components/table/index.vue

@@ -85,7 +85,7 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
       </div>
       <UCollapsible :open="tblHeaderProps.whereQueryProps.whereQueryOpen">
         <template #content>
-          <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="border-b border-default" />
+          <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="border-b border-default bg-muted" />
         </template>
       </UCollapsible>
     </div>

package/dist/runtime/composables/useApp.d.ts

@@ -1,4 +1,5 @@
 import { type CustomAppConfig, type I18nLocale } from '#v/types';
+import type { SidebarProps } from '@nuxt/ui';
 export declare const defaultAppSettings: CustomAppConfig;
 export declare const useApp: () => {
     themeSettingsVisible: import("vue").Ref<boolean, boolean>;
@@ -10,6 +11,11 @@ export declare const useApp: () => {
     updateNeutralColor: (color: string) => void;
     updateRadius: (radius: number) => void;
     updateLocale: (locale: I18nLocale) => void;
+    updateSidebarSide: (side: SidebarProps["side"]) => void;
+    updateSidebarVariant: (variant: SidebarProps["variant"]) => void;
+    updateSidebarCollapsible: (collapsible: SidebarProps["collapsible"]) => void;
+    updateSidebarCollapsed: (collapsed: boolean) => void;
+    sidebarCollapsed: import("vue").WritableComputedRef<boolean, boolean>;
     keepalive: import("vue").WritableComputedRef<boolean, boolean>;
     setKeepalive: (value: boolean) => boolean;
     isMobile: import("vue").ComputedRef<boolean>;

package/dist/runtime/composables/useApp.js

@@ -5,6 +5,9 @@ import { cloneJson } from "#v/utils";
 export const defaultAppSettings = {
   headerHeight: 48,
   tabHeight: 40,
+  side: "left",
+  variant: "inset",
+  collapsible: "icon",
   siderMaxWidth: 20,
   siderMinWidth: 10,
   siderCollapsed: false,
@@ -26,7 +29,6 @@ const _useApp = () => {
   };
   const updateNeutralColor = (color) => {
     appConfig.value = { ...appConfig.value, neutral: color };
-    console.log("Updated neutral color to", appConfig.value);
   };
   const updateRadius = (radius) => {
     appConfig.value = { ...appConfig.value, radius };
@@ -34,6 +36,26 @@ const _useApp = () => {
   const updateLocale = (locale) => {
     appConfig.value = { ...appConfig.value, locale };
   };
+  const updateSidebarSide = (side) => {
+    appConfig.value = { ...appConfig.value, side };
+  };
+  const updateSidebarVariant = (variant) => {
+    appConfig.value = { ...appConfig.value, variant };
+  };
+  const updateSidebarCollapsible = (collapsible) => {
+    appConfig.value = { ...appConfig.value, collapsible };
+  };
+  const updateSidebarCollapsed = (collapsed) => {
+    appConfig.value = { ...appConfig.value, siderCollapsed: collapsed };
+  };
+  const sidebarCollapsed = computed({
+    get() {
+      return appConfig.value.siderCollapsed ?? false;
+    },
+    set(value) {
+      appConfig.value = { ...appConfig.value, siderCollapsed: value };
+    }
+  });
   const keepalive = computed({
     get() {
       return appConfig.value.keepalive ?? true;
@@ -69,6 +91,11 @@ const _useApp = () => {
     updateNeutralColor,
     updateRadius,
     updateLocale,
+    updateSidebarSide,
+    updateSidebarVariant,
+    updateSidebarCollapsible,
+    updateSidebarCollapsed,
+    sidebarCollapsed,
     keepalive,
     setKeepalive,
     isMobile,

package/dist/runtime/composables/useTheme.d.ts

@@ -1,4 +1,5 @@
 import type { I18nLocale } from '#v/types';
+import type { SidebarProps } from '@nuxt/ui';
 export declare const useTheme: () => {
     blackAsPrimary: import("vue").WritableComputedRef<any, any>;
     neutralColors: string[];
@@ -17,4 +18,11 @@ export declare const useTheme: () => {
     mode: import("vue").WritableComputedRef<"auto" | "light" | "dark", "auto" | "light" | "dark">;
     locale: import("vue").WritableComputedRef<I18nLocale, I18nLocale>;
     locales: import("@nuxt/ui").Locale<import("@nuxt/ui").Messages>[];
+    sidebarSide: import("vue").WritableComputedRef<string | number | symbol, string | number | symbol | undefined>;
+    sidebarVariant: import("vue").WritableComputedRef<string | number | symbol | undefined, string | number | symbol | undefined>;
+    sidebarVariantOptions: import("vue").ComputedRef<{
+        label: string;
+        value: SidebarProps["variant"];
+    }[]>;
+    sidebarCollapsible: import("vue").WritableComputedRef<string | number | symbol, string | number | symbol | undefined>;
 };

package/dist/runtime/composables/useTheme.js

@@ -90,6 +90,35 @@ const _useTheme = () => {
       app.updateLocale(value);
     }
   });
+  const sidebarSide = computed({
+    get() {
+      return app.appConfig.value.side ?? "left";
+    },
+    set(value) {
+      app.updateSidebarSide(value);
+    }
+  });
+  const sidebarVariant = computed({
+    get() {
+      return app.appConfig.value.variant ?? "sidebar";
+    },
+    set(value) {
+      app.updateSidebarVariant(value);
+    }
+  });
+  const sidebarVariantOptions = computed(() => [
+    { label: "\u5D4C\u5165\u5F0F", value: "inset" },
+    { label: "\u60AC\u6D6E\u5F0F", value: "floating" },
+    { label: "\u5206\u79BB\u5F0F", value: "separated" }
+  ]);
+  const sidebarCollapsible = computed({
+    get() {
+      return app.appConfig.value.collapsible ?? "responsive";
+    },
+    set(value) {
+      app.updateSidebarCollapsible(value);
+    }
+  });
   return {
     blackAsPrimary,
     neutralColors: twNeutralColorNames,
@@ -103,7 +132,11 @@ const _useTheme = () => {
     modes,
     mode,
     locale,
-    locales
+    locales,
+    sidebarSide,
+    sidebarVariant,
+    sidebarVariantOptions,
+    sidebarCollapsible
   };
 };
 export const useTheme = createSharedComposable(_useTheme);

package/dist/runtime/types/app.d.ts

@@ -1,3 +1,4 @@
+import type { SidebarProps } from '@nuxt/ui';
 import type { I18nLocale } from './locale.js';
 /** Header config */
 export interface HeaderConfig {
@@ -13,6 +14,9 @@ export interface TabConfig {
 }
 /** Sider config */
 interface SiderConfig {
+    side?: SidebarProps['side'];
+    variant?: SidebarProps['variant'];
+    collapsible?: SidebarProps['collapsible'];
     hideSider?: boolean;
     siderClass?: string;
     siderMobileClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",