v-nuxt-ui 0.1.29 → 0.1.30

package/dist/module.json

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

package/dist/runtime/components/date-picker/index.vue

@@ -133,7 +133,7 @@ defineExpose({
   }
 }"
   >
-    <UFieldGroup>
+    <UFieldGroup v-if="peerButtons && peerButtons.length > 0">
       <UButton
         color="neutral"
         variant="outline"
@@ -148,6 +148,20 @@ defineExpose({
       </UButton>
       <UButton v-for="(btnProps, idx) in peerButtons" :key="idx" v-bind="btnProps" />
     </UFieldGroup>
+    <!-- TODO: vueuse -->
+    <UButton
+      v-else
+      color="neutral"
+      variant="outline"
+      :leading-icon="leadingIcon ?? 'i-lucide-calendar'"
+      trailing-icon="i-lucide-chevron-down"
+      :loading="loading"
+      :size="size"
+    >
+      <div class="flex items-center gap-1">
+        <span>{{ displayValue }}</span>
+      </div>
+    </UButton>
 
     <template #content>
       <div class="p-3 flex flex-col gap-2">

package/dist/runtime/components/form/field/TreeSelectTransfer.vue

@@ -68,8 +68,7 @@ function handleUpdateModelValue(selectedItems) {
             :model-value="indeterminate ? 'indeterminate' : selected"
             tabindex="-1"
             size="sm"
-            @change="handleSelect"
-            @click.stop
+            @click.stop="handleSelect"
           />
         </template>
       </UTree>

package/dist/runtime/components/sys/menu/Table.vue

@@ -53,11 +53,16 @@ const columns = [
         { label: "\u662F", value: true, color: "primary" },
         { label: "\u5426", value: false, color: "neutral" }
       ],
+      empty: {
+        label: "\u5426",
+        color: "neutral",
+        variant: "outline"
+      },
       initHide: false
     }
   },
   { accessorKey: "name", header: "\u83DC\u5355\u540D\u79F0", filterOption: { type: "input" }, sortOption: true },
-  { accessorKey: "staticRouteKeys", header: "\u9759\u6001\u8DEF\u7531\u952E\u503C", filterOption: { type: "input" }, sortOption: true },
+  { accessorKey: "staticRouteKeys", header: "\u9759\u6001\u8DEF\u7531\u952E\u503C", filterOption: { type: "input", defaultOpr: "text_arr_str_like" }, sortOption: true },
   {
     accessorKey: "disabled",
     header: "\u662F\u5426\u7981\u7528",

package/dist/runtime/components/sys/role/CreateModal.vue

@@ -39,9 +39,8 @@ const sourceTreeItems = computed(() => treeifyOptions(
 ));
 const targetTreeItems = computed({
   get() {
-    const sortedMenus = (newValues.value.menus || []).sort((a, b) => a.order?.localeCompare(b.order || "") || 0);
     return treeifyOptions(
-      sortedMenus,
+      (newValues.value.menus || []).sort((a, b) => a.order?.localeCompare(b.order || "") || 0),
       () => {
       },
       "name",
@@ -54,6 +53,28 @@ const targetTreeItems = computed({
     newValues.value.menus = menus.value.filter((menu) => newMenuIds.includes(menu.id));
   }
 });
+function updateTargetTreeItems(newVal) {
+  targetTreeItems.value = newVal;
+}
+const fields = computed(() => [
+  { name: "name", type: "input", label: "\u89D2\u8272\u540D\u79F0", colSpan: "12", zodType: z.string().min(2, "\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3") },
+  { name: "isAdmin", type: "button-switch", label: "\u662F\u5426\u662F\u7CFB\u7EDF\u89D2\u8272", colSpan: "12", zodType: z.boolean() },
+  {
+    name: "menus",
+    label: "\u83DC\u5355\u6743\u9650",
+    colSpan: "24",
+    zodType: z.array(z.object({ id: z.number() })),
+    type: "tree-select-transfer",
+    sourceTreeItems: sourceTreeItems.value,
+    targetTreeItems: targetTreeItems.value,
+    onUpdateTargetTreeItems: updateTargetTreeItems
+  },
+  { name: "disabled", type: "button-switch", label: "\u662F\u5426\u7981\u7528", colSpan: "12", zodType: z.boolean() },
+  { name: "remark", type: "input", label: "\u5907\u6CE8", colSpan: "24", zodType: z.string().optional().nullable() }
+]);
+function updateModelValue(newVal) {
+  newValues.value = { id: 0, ...newVal };
+}
 onMounted(async () => {
   await onFetchMenus();
 });
@@ -63,24 +84,9 @@ onMounted(async () => {
   <FormCreateModalTemplate
     title="角色信息"
     :on-close="(ok) => emit('close', ok)"
-    :fields="[
-  { name: 'name', type: 'input', label: '\u89D2\u8272\u540D\u79F0', colSpan: '12', zodType: z.string().min(2, '\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3') },
-  { name: 'isAdmin', type: 'button-switch', label: '\u662F\u5426\u662F\u7CFB\u7EDF\u89D2\u8272', colSpan: '12', zodType: z.boolean() },
-  {
-    name: 'menus',
-    label: '\u83DC\u5355\u6743\u9650',
-    colSpan: '24',
-    zodType: z.array(z.object({ id: z.number() })),
-    type: 'tree-select-transfer',
-    sourceTreeItems,
-    targetTreeItems,
-    onUpdateTargetTreeItems: (newVal) => targetTreeItems = newVal
-  },
-  { name: 'disabled', type: 'button-switch', label: '\u662F\u5426\u7981\u7528', colSpan: '12', zodType: z.boolean() },
-  { name: 'remark', type: 'input', label: '\u5907\u6CE8', colSpan: '24', zodType: z.string().optional().nullable() }
-]"
+    :fields="fields"
     :model-value="newValues"
-    @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
+    @update-model-value="updateModelValue"
     @submit="onSubmit"
   />
 </template>

package/dist/runtime/components/sys/role/Table.vue

@@ -2,7 +2,7 @@
 import { useOverlay } from "@nuxt/ui/composables";
 import { useRoleApi } from "#v/composables";
 import SysRolesCreateModal from "./CreateModal.vue";
-import { getOprColumns } from "#v/constants";
+import { booleanOptions, getOprColumns } from "#v/constants";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import TablePage from "#v/components/table/Page.vue";
 import { h } from "vue";
@@ -23,8 +23,8 @@ const columns = [
     header: "\u662F\u5426\u662F\u7CFB\u7EDF\u89D2\u8272",
     sortOption: true,
     filterOption: {
-      type: "input",
-      initHide: false
+      type: "select",
+      items: booleanOptions
     },
     cell: ({ row }) => h(
       UBadge,

package/dist/runtime/components/sys/user/CreateModal.vue

@@ -51,6 +51,9 @@ const roleTargetTreeItems = computed({
     newValues.value.roles = roles.value.filter((role) => newRoleIds.includes(role.id));
   }
 });
+function updateRoleTargetTreeItems(newVal) {
+  roleTargetTreeItems.value = newVal;
+}
 const menus = ref([]);
 const onFetchMenus = async () => {
   const { data } = await useMenuApi().list({
@@ -97,85 +100,98 @@ const menuTargetTreeItems = computed({
     newValues.value.menus = menus.value.filter((menu) => !menuIdsFromRoles.value.includes(menu.id)).filter((menu) => newMenuIds.includes(menu.id));
   }
 });
-onMounted(async () => {
-  await onFetchRoles();
-  await onFetchMenus();
-});
-</script>
-
-<template>
-  <FormCreateModalTemplate
-    title="用户信息"
-    :on-close="(ok) => emit('close', ok)"
-    :fields="[
-  { name: 'nickname', type: 'input', label: '\u540D\u79F0', colSpan: '12', zodType: z.string().min(2, '\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3') },
+function updateMenuTargetTreeItems(newVal) {
+  menuTargetTreeItems.value = newVal;
+}
+function updateDepartment(newInitModelValues) {
+  newValues.value.department = newInitModelValues;
+}
+function updateSupervisor(newInitModelValues) {
+  newValues.value.supervisor = newInitModelValues;
+}
+const fields = computed(() => [
+  { name: "nickname", type: "input", label: "\u540D\u79F0", colSpan: "12", zodType: z.string().min(2, "\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3") },
   {
-    name: 'gender',
-    icon: 'i-lucide-venus-and-mars',
-    type: 'select',
-    label: '\u6027\u522B',
+    name: "gender",
+    icon: "i-lucide-venus-and-mars",
+    type: "select",
+    label: "\u6027\u522B",
     items: genderOptions,
-    colSpan: '12',
+    colSpan: "12",
     zodType: z.enum(Gender)
   },
-  { name: 'username', type: 'input', label: '\u7528\u6237\u540D', colSpan: '12', zodType: z.string().nullable().optional() },
-  { name: 'loginType', type: 'multiple-select-string', items: loginTypeOptions, label: '\u767B\u5F55\u65B9\u5F0F', colSpan: '12', zodType: z.string() },
+  { name: "username", type: "input", label: "\u7528\u6237\u540D", colSpan: "12", zodType: z.string().nullable().optional() },
+  { name: "loginType", type: "multiple-select-string", items: loginTypeOptions, label: "\u767B\u5F55\u65B9\u5F0F", colSpan: "12", zodType: z.string() },
   {
-    name: 'departmentId',
-    label: '\u90E8\u95E8',
-    colSpan: '12',
-    type: 'async-tree-select',
-    labelField: 'name',
-    valueField: 'id',
-    searchFields: ['name'],
+    name: "departmentId",
+    label: "\u90E8\u95E8",
+    colSpan: "12",
+    type: "async-tree-select",
+    labelField: "name",
+    valueField: "id",
+    searchFields: ["name"],
     listApi: useDepartmentApi().list,
     fetchAll: true,
-    initModelValues: newValues.department,
-    onUpdateInitModelValues: (newInitModelValues) => newValues.department = newInitModelValues,
+    initModelValues: newValues.value.department,
+    onUpdateInitModelValues: updateDepartment,
     zodType: z.number().min(0)
   },
   {
-    name: 'supervisorId',
-    label: '\u76F4\u5C5E\u9886\u5BFC',
-    colSpan: '12',
-    type: 'async-select',
-    labelField: 'nickname',
-    valueField: 'id',
-    searchFields: ['nickname'],
+    name: "supervisorId",
+    label: "\u76F4\u5C5E\u9886\u5BFC",
+    colSpan: "12",
+    type: "async-select",
+    labelField: "nickname",
+    valueField: "id",
+    searchFields: ["nickname"],
     listApi: useUserApi().list,
-    initModelValues: newValues.supervisor,
-    onUpdateInitModelValues: (newInitModelValues) => newValues.supervisor = newInitModelValues,
+    initModelValues: newValues.value.supervisor,
+    onUpdateInitModelValues: updateSupervisor,
     enableEmptyOption: true,
     zodType: z.number().min(0).optional()
   },
-  { name: 'email', type: 'input', label: '\u90AE\u7BB1', colSpan: '24', zodType: z.string().optional().nullable() },
-  { name: 'entryDate', type: 'date-picker', label: '\u5165\u804C\u65F6\u95F4', colSpan: '12', zodType: z.string().optional().nullable() },
-  { name: 'resignDate', type: 'date-picker', label: '\u79BB\u804C\u65F6\u95F4', colSpan: '12', zodType: z.string().optional().nullable() },
-  { name: 'needFillWh', type: 'button-switch', label: '\u662F\u5426\u9700\u8981\u586B\u5199\u5DE5\u65F6', colSpan: '12', zodType: z.boolean() },
-  { name: 'isAdmin', type: 'button-switch', label: '\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458', colSpan: '12', zodType: z.boolean() },
+  { name: "email", type: "input", label: "\u90AE\u7BB1", colSpan: "24", zodType: z.string().optional().nullable() },
+  { name: "entryDate", type: "date-picker", label: "\u5165\u804C\u65F6\u95F4", colSpan: "12", zodType: z.string().optional().nullable() },
+  { name: "resignDate", type: "date-picker", label: "\u79BB\u804C\u65F6\u95F4", colSpan: "12", zodType: z.string().optional().nullable() },
+  { name: "needFillWh", type: "button-switch", label: "\u662F\u5426\u9700\u8981\u586B\u5199\u5DE5\u65F6", colSpan: "12", zodType: z.boolean() },
+  { name: "isAdmin", type: "button-switch", label: "\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458", colSpan: "12", zodType: z.boolean() },
   {
-    name: 'roles',
-    label: '\u89D2\u8272\u6743\u9650',
-    colSpan: '24',
+    name: "roles",
+    label: "\u89D2\u8272\u6743\u9650",
+    colSpan: "24",
     zodType: z.array(z.object({ id: z.number() })).optional(),
-    type: 'tree-select-transfer',
-    sourceTreeItems: roleSourceTreeItems,
-    targetTreeItems: roleTargetTreeItems,
-    onUpdateTargetTreeItems: (newVal) => roleTargetTreeItems = newVal
+    type: "tree-select-transfer",
+    sourceTreeItems: roleSourceTreeItems.value,
+    targetTreeItems: roleTargetTreeItems.value,
+    onUpdateTargetTreeItems: updateRoleTargetTreeItems
   },
   {
-    name: 'menus',
-    label: '\u83DC\u5355\u6743\u9650',
-    colSpan: '24',
+    name: "menus",
+    label: "\u83DC\u5355\u6743\u9650",
+    colSpan: "24",
     zodType: z.array(z.object({ id: z.number() })).optional(),
-    type: 'tree-select-transfer',
-    sourceTreeItems: menuSourceTreeItems,
-    targetTreeItems: menuTargetTreeItems,
-    onUpdateTargetTreeItems: (newVal) => menuTargetTreeItems = newVal
+    type: "tree-select-transfer",
+    sourceTreeItems: menuSourceTreeItems.value,
+    targetTreeItems: menuTargetTreeItems.value,
+    onUpdateTargetTreeItems: updateMenuTargetTreeItems
   }
-]"
+]);
+function updateModelValue(newVal) {
+  newValues.value = { id: 0, ...newVal };
+}
+onMounted(async () => {
+  await onFetchRoles();
+  await onFetchMenus();
+});
+</script>
+
+<template>
+  <FormCreateModalTemplate
+    title="用户信息"
+    :on-close="(ok) => emit('close', ok)"
+    :fields="fields"
     :model-value="newValues"
-    @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
+    @update-model-value="updateModelValue"
     @submit="onSubmit"
   />
 </template>

package/dist/runtime/composables/table/useTableView.js

@@ -2,12 +2,12 @@ import { ref, computed, watch, onMounted, onUnmounted, nextTick, useTemplateRef
 import { useTable } from "./useTable.js";
 const PINNED_SHADOW_CLASSES = {
   left: {
-    base: "[&_th[data-pinned=left]]:after:absolute [&_th[data-pinned=left]]:after:top-0 [&_th[data-pinned=left]]:after:right-0 [&_th[data-pinned=left]]:after:bottom-0 [&_th[data-pinned=left]]:after:w-[30px] [&_th[data-pinned=left]]:after:translate-x-full [&_th[data-pinned=left]]:after:transition-opacity [&_th[data-pinned=left]]:after:duration-300 [&_th[data-pinned=left]]:after:pointer-events-none [&_th[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=left]]:after:absolute [&_td[data-pinned=left]]:after:top-0 [&_td[data-pinned=left]]:after:right-0 [&_td[data-pinned=left]]:after:bottom-0 [&_td[data-pinned=left]]:after:w-[30px] [&_td[data-pinned=left]]:after:translate-x-full [&_td[data-pinned=left]]:after:transition-opacity [&_td[data-pinned=left]]:after:duration-200 [&_td[data-pinned=left]]:after:pointer-events-none [&_td[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    base: "[--pinned-shadow-color:rgba(0,0,0,0.15)] dark:[--pinned-shadow-color:rgba(0,0,0,0.45)] [&_th[data-pinned=left]]:after:absolute [&_th[data-pinned=left]]:after:top-0 [&_th[data-pinned=left]]:after:right-0 [&_th[data-pinned=left]]:after:bottom-0 [&_th[data-pinned=left]]:after:w-[30px] [&_th[data-pinned=left]]:after:translate-x-full [&_th[data-pinned=left]]:after:transition-opacity [&_th[data-pinned=left]]:after:duration-300 [&_th[data-pinned=left]]:after:pointer-events-none [&_th[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td[data-pinned=left]]:after:absolute [&_td[data-pinned=left]]:after:top-0 [&_td[data-pinned=left]]:after:right-0 [&_td[data-pinned=left]]:after:bottom-0 [&_td[data-pinned=left]]:after:w-[30px] [&_td[data-pinned=left]]:after:translate-x-full [&_td[data-pinned=left]]:after:transition-opacity [&_td[data-pinned=left]]:after:duration-200 [&_td[data-pinned=left]]:after:pointer-events-none [&_td[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_var(--pinned-shadow-color)]",
     show: "[&_th[data-pinned=left]]:after:opacity-100 [&_td[data-pinned=left]]:after:opacity-100",
     hide: "[&_th[data-pinned=left]]:after:opacity-0 [&_td[data-pinned=left]]:after:opacity-0"
   },
   right: {
-    base: "[&_th[data-pinned=right]]:before:absolute [&_th[data-pinned=right]]:before:top-0 [&_th[data-pinned=right]]:before:left-0 [&_th[data-pinned=right]]:before:bottom-0 [&_th[data-pinned=right]]:before:w-[30px] [&_th[data-pinned=right]]:before:-translate-x-full [&_th[data-pinned=right]]:before:transition-opacity [&_th[data-pinned=right]]:before:duration-300 [&_th[data-pinned=right]]:before:pointer-events-none [&_th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=right]]:before:absolute [&_td[data-pinned=right]]:before:top-0 [&_td[data-pinned=right]]:before:left-0 [&_td[data-pinned=right]]:before:bottom-0 [&_td[data-pinned=right]]:before:w-[30px] [&_td[data-pinned=right]]:before:-translate-x-full [&_td[data-pinned=right]]:before:transition-opacity [&_td[data-pinned=right]]:before:duration-200 [&_td[data-pinned=right]]:before:pointer-events-none [&_td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    base: "[&_th[data-pinned=right]]:before:absolute [&_th[data-pinned=right]]:before:top-0 [&_th[data-pinned=right]]:before:left-0 [&_th[data-pinned=right]]:before:bottom-0 [&_th[data-pinned=right]]:before:w-[30px] [&_th[data-pinned=right]]:before:-translate-x-full [&_th[data-pinned=right]]:before:transition-opacity [&_th[data-pinned=right]]:before:duration-300 [&_th[data-pinned=right]]:before:pointer-events-none [&_th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)] [&_td[data-pinned=right]]:before:absolute [&_td[data-pinned=right]]:before:top-0 [&_td[data-pinned=right]]:before:left-0 [&_td[data-pinned=right]]:before:bottom-0 [&_td[data-pinned=right]]:before:w-[30px] [&_td[data-pinned=right]]:before:-translate-x-full [&_td[data-pinned=right]]:before:transition-opacity [&_td[data-pinned=right]]:before:duration-200 [&_td[data-pinned=right]]:before:pointer-events-none [&_td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_var(--pinned-shadow-color)]",
     show: "[&_th[data-pinned=right]]:before:opacity-100 [&_td[data-pinned=right]]:before:opacity-100",
     hide: "[&_th[data-pinned=right]]:before:opacity-0 [&_td[data-pinned=right]]:before:opacity-0"
   }

package/dist/runtime/constants/time.js

@@ -1,10 +1,10 @@
 export const TIME_ZONE = "Asia/Shanghai";
 export const timeUnitOptions = [
-  { label: "Year", value: "year" },
-  { label: "Quarter", value: "quarter" },
-  { label: "Month", value: "month" },
-  { label: "Week", value: "week" },
-  { label: "Day", value: "day" }
+  { label: "\u5E74", value: "year" },
+  { label: "\u5B63", value: "quarter" },
+  { label: "\u6708", value: "month" },
+  { label: "\u5468", value: "week" },
+  { label: "\u65E5", value: "day" }
 ];
 export const weekEnLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 export const weekCnLabels = ["\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D", "\u5468\u65E5"];

package/package.json

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