v-nuxt-ui 0.1.35 → 0.1.36

package/dist/module.json

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

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

@@ -86,8 +86,12 @@ defineExpose({
         :model-value="commandPaletteModelValue"
         :selection-behavior="multiple ? 'toggle' : 'replace'"
         :groups="groups"
+        size="sm"
         :multiple="multiple"
-        :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
+        :ui="{
+  input: '[&>input]:h-7',
+  itemLeadingIcon: 'size-3 self-center'
+}"
         placeholder="搜索"
         :search-term="searchTerm"
         @update:model-value="(newValue) => {

package/dist/runtime/components/date-picker/Input.d.vue.ts

@@ -2,6 +2,8 @@ import type { InputProps } from '@nuxt/ui';
 type __VLS_Props = {
     placeholder?: InputProps['placeholder'];
     size?: InputProps['size'];
+    icon?: InputProps['icon'];
+    inputClass?: string;
 };
 type __VLS_ModelProps = {
     'value': undefined | string;
@@ -10,9 +12,15 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (e: FocusEvent) => any;
+    focus: (e: FocusEvent) => any;
     "update:value": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:value"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    icon: InputProps["icon"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,12 +1,52 @@
 <script setup>
-import { useTemplateRef } from "vue";
+import { ref, watch, computed, useTemplateRef } from "vue";
 import { vMaska } from "maska/vue";
+import dayjs from "dayjs";
 defineProps({
   placeholder: { type: String, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  icon: { type: null, required: false, default: "i-lucide-calendar" },
+  inputClass: { type: String, required: false }
 });
 const value = defineModel("value", { type: null, ...{ required: true } });
+const emit = defineEmits(["focus", "blur"]);
 const input = useTemplateRef("input");
+const inputBuffer = ref(value.value ?? "");
+let isInternalUpdate = false;
+watch(value, (newVal) => {
+  if (isInternalUpdate) return;
+  inputBuffer.value = newVal ?? "";
+});
+const isValidDate = (str) => {
+  if (!str || str.length < 10) return false;
+  return dayjs(str, "YYYY-MM-DD", true).isValid();
+};
+const isInvalid = computed(() => {
+  const buf = inputBuffer.value;
+  if (!buf || buf.length === 0) return false;
+  return !isValidDate(buf);
+});
+const onInput = () => {
+  const buf = inputBuffer.value;
+  if (!buf || buf.length === 0) {
+    isInternalUpdate = true;
+    value.value = void 0;
+    isInternalUpdate = false;
+    return;
+  }
+  if (isValidDate(buf)) {
+    isInternalUpdate = true;
+    value.value = buf;
+    isInternalUpdate = false;
+  }
+};
+const handleClear = () => {
+  inputBuffer.value = "";
+  isInternalUpdate = true;
+  value.value = void 0;
+  isInternalUpdate = false;
+  input.value?.inputRef?.focus();
+};
 defineExpose({
   focus: () => input.value?.inputRef?.focus()
 });
@@ -15,24 +55,28 @@ defineExpose({
 <template>
   <UInput
     ref="input"
-    v-model="value"
-    v-maska="'####/##/##'"
+    v-model="inputBuffer"
+    v-maska="'####-##-##'"
     size="sm"
-    class="w-full"
-    icon="i-lucide-calendar"
+    class="font-semibold"
+    :class="inputClass"
+    :icon="icon"
     :placeholder="placeholder"
+    :color="isInvalid ? 'error' : 'neutral'"
+    :highlight="isInvalid"
+    @input="onInput"
+    @focus="(e) => emit('focus', e)"
+    @blur="(e) => emit('blur', e)"
   >
-    <template v-if="value?.length" #trailing>
+    <template v-if="inputBuffer?.length" #trailing>
       <UButton
         color="neutral"
         variant="link"
         size="sm"
         icon="i-lucide-circle-x"
         aria-label="Clear input"
-        @click="() => {
-  value = void 0;
-  input?.inputRef?.focus();
-}"
+        @mousedown.prevent
+        @click="handleClear"
       />
     </template>
   </UInput>

package/dist/runtime/components/date-picker/Input.vue.d.ts

@@ -2,6 +2,8 @@ import type { InputProps } from '@nuxt/ui';
 type __VLS_Props = {
     placeholder?: InputProps['placeholder'];
     size?: InputProps['size'];
+    icon?: InputProps['icon'];
+    inputClass?: string;
 };
 type __VLS_ModelProps = {
     'value': undefined | string;
@@ -10,9 +12,15 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (e: FocusEvent) => any;
+    focus: (e: FocusEvent) => any;
     "update:value": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:value"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    icon: InputProps["icon"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -169,19 +169,19 @@ defineExpose({
           <DatePickerInput
             ref="startDateStrValueInput"
             v-model:value="startDateStrValue"
-            placeholder="YYYY/MM/DD 开始日期"
+            placeholder="YYYY-MM-DD 开始日期"
           />
           <DatePickerInput
             ref="endDateStrValueInput"
             v-model:value="endDateStrValue"
-            placeholder="YYYY/MM/DD 结束日期"
+            placeholder="YYYY-MM-DD 结束日期"
           />
         </div>
         <DatePickerInput
           v-else
           ref="singleDateStrValueInput"
           v-model:value="singleDateStrValue"
-          placeholder="YYYY/MM/DD 日期"
+          placeholder="YYYY-MM-DD 日期"
         />
         <UCalendar
           :model-value="modelValue"

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

@@ -71,7 +71,7 @@ const dateStrInputFocus = () => {
           <DatePickerInput
             ref="dateStrValueInput"
             v-model:value="dateStrValue"
-            placeholder="YYYY/MM/DD 日期"
+            placeholder="YYYY-MM-DD 日期"
           />
           <UCalendar
             :model-value="dateValue"

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

@@ -5,7 +5,8 @@ import FormCreateModalTemplate from "#v/components/form/create-modal-template/in
 import ProSimpleTable from "#v/components/simple-table/index.vue";
 import TableColumnModal from "./TableColumnModal.vue";
 import { useFormSubmission, useFormValues, useTableApi, useTableColumnApi } from "#v/composables";
-import { computed, ref, toRef, onMounted } from "vue";
+import { computed, ref, toRef, onMounted, h } from "vue";
+import UButton from "@nuxt/ui/components/Button.vue";
 const props = defineProps({
   model: { type: Object, required: true }
 });
@@ -30,12 +31,12 @@ async function fetchColumns() {
   if (data.value.data) {
     columns.value = data.value.data.list.map((col) => ({
       id: col.id,
-      columnKey: col.columnKey,
-      label: col.label,
-      order: col.order,
-      width: col.width,
-      fixed: col.fixed,
-      visible: col.visible
+      columnKey: col.columnKey ?? "",
+      label: col.label ?? "",
+      order: col.order ?? 0,
+      width: col.width ?? 100,
+      fixed: col.fixed ?? "",
+      visible: col.visible ?? true
     }));
   }
   loading.value = false;
@@ -56,6 +57,7 @@ function addColumn() {
 }
 function removeColumn(index) {
   const col = columns.value[index];
+  if (!col) return;
   if (col.id !== 0) {
     deletedColumnIds.value.push(col.id);
   }
@@ -63,6 +65,7 @@ function removeColumn(index) {
 }
 async function editColumn(index) {
   const col = columns.value[index];
+  if (!col) return;
   const isNew = col.id === 0;
   if (isNew) {
     return;
@@ -100,43 +103,38 @@ const tableColumns = [
     size: 80,
     cell: ({ row }) => {
       const fixedMap = { "": "\u5426", left: "\u5DE6", right: "\u53F3" };
-      return fixedMap[row.fixed] ?? "\u5426";
+      return fixedMap[row.original.fixed] ?? "\u5426";
     }
   },
   {
     accessorKey: "visible",
     header: "\u663E\u793A",
     size: 60,
-    cell: ({ row }) => row.visible ? "\u662F" : "\u5426"
+    cell: ({ row }) => row.original.visible ? "\u662F" : "\u5426"
   },
   {
     accessorKey: "actions",
     header: "\u64CD\u4F5C",
     size: 100,
-    cell: ({ row, index }) => {
-      return {
-        type: "div",
-        class: "flex gap-1",
-        children: [
-          {
-            type: "button",
-            label: "\u7F16\u8F91",
-            icon: "i-lucide-edit",
-            variant: "ghost",
-            size: "xs",
-            onClick: () => editColumn(index)
-          },
-          {
-            type: "button",
-            label: "\u5220\u9664",
-            icon: "i-lucide-trash-2",
-            color: "error",
-            variant: "ghost",
-            size: "xs",
-            onClick: () => removeColumn(index)
-          }
-        ]
-      };
+    cell: ({ row }) => {
+      const index = columns.value.findIndex((c) => c === row.original);
+      return h("div", { class: "flex gap-1" }, [
+        h(UButton, {
+          label: "\u7F16\u8F91",
+          icon: "i-lucide-edit",
+          variant: "ghost",
+          size: "xs",
+          onClick: () => editColumn(index)
+        }),
+        h(UButton, {
+          label: "\u5220\u9664",
+          icon: "i-lucide-trash-2",
+          color: "error",
+          variant: "ghost",
+          size: "xs",
+          onClick: () => removeColumn(index)
+        })
+      ]);
     }
   }
 ];

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

@@ -47,20 +47,22 @@ async function fetchTableMeta(tables) {
   await Promise.all(
     tables.map(async (table) => {
       const [columnResult, permissionResult] = await Promise.all([
-        tableColumnApi.count({
+        tableColumnApi.list({
+          pagination: { pageNum: 1, pageSize: 1 },
           whereQuery: {
             items: [{ field: "tableId", value: table.id, opr: "eq" }]
           }
         }),
-        tablePermissionApi.count({
+        tablePermissionApi.list({
+          pagination: { pageNum: 1, pageSize: 1 },
           whereQuery: {
             items: [{ field: "tableId", value: table.id, opr: "eq" }]
           }
         })
       ]);
       newMeta[table.id] = {
-        columnCount: columnResult.data.value?.data ?? 0,
-        permissionCount: permissionResult.data.value?.data ?? 0
+        columnCount: columnResult.data.value?.data?.total ?? 0,
+        permissionCount: permissionResult.data.value?.data?.total ?? 0
       };
     })
   );

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

@@ -2,7 +2,7 @@
 import dayjs from "dayjs";
 import { useOverlay } from "@nuxt/ui/composables";
 import { isEmptyString } from "#v/utils";
-import { useDepartmentApi, useUserApi } from "#v/composables";
+import { useDepartmentApi, useRoleApi, useUserApi } from "#v/composables";
 import { booleanOptions, dateFormat, genderOptions, loginTypeOptions } from "#v/constants";
 import SysUsersCreateModal from "./CreateModal.vue";
 import UBadge from "@nuxt/ui/components/Badge.vue";
@@ -15,10 +15,6 @@ const columns = [
     accessorKey: "isResigned",
     header: "\u662F\u5426\u79BB\u804C",
     sortOption: true,
-    filterOption: {
-      type: "input",
-      initHide: false
-    },
     cell: ({ row }) => h(
       UBadge,
       {
@@ -56,16 +52,37 @@ const columns = [
     accessorKey: "supervisorId",
     header: "\u76F4\u5C5E\u4E0A\u7EA7",
     sortOption: true,
-    cell: ({ row }) => row.original.supervisor?.nickname
+    cell: ({ row }) => row.original.supervisor?.nickname,
+    filterOption: {
+      type: "async-select",
+      listApi: useUserApi().list,
+      searchFields: ["name"],
+      labelField: "name",
+      valueField: "id",
+      multiple: true,
+      defaultOpr: "in"
+    }
   },
   {
     accessorKey: "roles",
     header: "\u7CFB\u7EDF\u6743\u9650\u89D2\u8272",
-    cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", ")
+    cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", "),
+    filterOption: {
+      type: "async-select",
+      listApi: useRoleApi().list,
+      searchFields: ["name"],
+      labelField: "name",
+      valueField: "id",
+      multiple: true,
+      defaultOpr: "in"
+    }
   },
   {
     accessorKey: "username",
     header: "\u7528\u6237\u540D",
+    filterOption: {
+      type: "input"
+    },
     meta: {
       class: {
         td: "min-w-24"
@@ -75,23 +92,22 @@ const columns = [
   {
     accessorKey: "loginType",
     header: "\u767B\u5F55\u65B9\u5F0F",
+    filterOption: {
+      type: "select",
+      items: loginTypeOptions
+    },
     meta: {
       class: {
         td: "min-w-24"
       }
-    },
-    cell: ({ row }) => {
-      const loginTypes = row.original.loginType?.split(",");
-      return h(
-        "div",
-        { class: "flex flex-wrap items-center gap-1" },
-        [loginTypes?.map((loginType) => h(UBadge, { variant: "outline" }, () => loginTypeOptions.find((opt) => opt.value === loginType)?.label))]
-      );
     }
   },
   {
     accessorKey: "email",
-    header: "\u90AE\u7BB1"
+    header: "\u90AE\u7BB1",
+    filterOption: {
+      type: "input"
+    }
   },
   {
     accessorKey: "needFillWh",
@@ -128,17 +144,26 @@ const columns = [
     accessorKey: "entryDate",
     header: "\u5165\u804C\u65F6\u95F4",
     sortOption: true,
+    filterOption: {
+      type: "date-picker"
+    },
     cell: ({ row }) => dayjs(row.getValue("entryDate")).format(dateFormat)
   },
   {
     accessorKey: "resignDate",
     header: "\u79BB\u804C\u65F6\u95F4",
+    filterOption: {
+      type: "date-picker"
+    },
     sortOption: true,
     cell: ({ row }) => dayjs(row.getValue("resignDate")).format(dateFormat)
   },
   {
     accessorKey: "telNo",
     header: "\u7535\u8BDD",
+    filterOption: {
+      type: "input"
+    },
     meta: {
       class: {
         td: "min-w-24"
@@ -150,17 +175,9 @@ const columns = [
     header: "\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458",
     sortOption: true,
     filterOption: {
-      type: "input",
-      initHide: false
-    },
-    cell: ({ row }) => h(
-      UBadge,
-      {
-        label: row.original.isAdmin ? "\u662F" : "\u5426",
-        variant: "soft",
-        color: row.original.isAdmin ? "primary" : "neutral"
-      }
-    )
+      type: "select",
+      items: booleanOptions
+    }
   }
 ];
 </script>

package/dist/runtime/components/table/permission/TablePermissionConfig.d.vue.ts

@@ -4,10 +4,10 @@ type __VLS_Props = {
     tableId?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (args_0: boolean) => any;
+    close: (result: false | TablePermission) => any;
     save: (args_0: TablePermission) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((result: false | TablePermission) => any) | undefined;
     onSave?: ((args_0: TablePermission) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/table/permission/TablePermissionConfig.vue

@@ -92,7 +92,7 @@ function onTableChange(tableId) {
   const table = tables.value.find((t) => t.id === tableId);
   if (table) {
     selectedTable.value = table;
-    fetchMergedColumns(table.tblName);
+    fetchMergedColumns(table.tblName ?? "");
   }
 }
 async function handleSave() {
@@ -114,7 +114,7 @@ async function handleSave() {
       columnPermissions: columnPermissions.value
     };
     emit("save", result);
-    emit("close", true);
+    emit("close", result);
   } catch (e) {
     useToast().add({
       title: "\u4FDD\u5B58\u5931\u8D25",
@@ -135,7 +135,7 @@ onMounted(async () => {
     const table = tables.value.find((t) => t.id === props.tableId);
     if (table) {
       selectedTable.value = table;
-      await fetchMergedColumns(table.tblName);
+      await fetchMergedColumns(table.tblName ?? "");
     }
   }
   if (props.permission) {

package/dist/runtime/components/table/permission/TablePermissionConfig.vue.d.ts

@@ -4,10 +4,10 @@ type __VLS_Props = {
     tableId?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (args_0: boolean) => any;
+    close: (result: false | TablePermission) => any;
     save: (args_0: TablePermission) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((result: false | TablePermission) => any) | undefined;
     onSave?: ((args_0: TablePermission) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/table/permission/TablePermissionTab.vue

@@ -10,23 +10,26 @@ const toast = useToast();
 const tablePermissionConfigModal = overlay.create(TablePermissionConfig);
 function openAddModal() {
   tablePermissionConfigModal.open({}).result.then((result) => {
-    if (result?.save) {
-      const newPermissions = [...props.modelValue, result.save];
+    if (result && typeof result === "object") {
+      const saved = result;
+      const newPermissions = [...props.modelValue, saved];
       emit("update:modelValue", newPermissions);
     }
   });
 }
 function openEditModal(permission) {
   tablePermissionConfigModal.open({ permission }).result.then((result) => {
-    if (result?.save) {
+    if (result && typeof result === "object") {
+      const saved = result;
       const newPermissions = props.modelValue.map(
-        (p) => p.tableId === result.save.tableId ? result.save : p
+        (p) => p.tableId === saved.tableId ? saved : p
       );
       emit("update:modelValue", newPermissions);
     }
   });
 }
 function removePermission(tableId) {
+  if (tableId === void 0) return;
   toast.add({
     title: "\u786E\u8BA4\u5220\u9664",
     description: "\u786E\u5B9A\u8981\u5220\u9664\u8BE5 Table \u6743\u9650\u5417\uFF1F",

package/dist/runtime/components/table/query/where/Newer.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from "vue";
 import ButtonDropdown from "#v/components/button/Dropdown.vue";
+import { tableWhereQueryItemIconMap } from "#v/constants";
 const props = defineProps({
   options: { type: Array, required: true },
   unselectedFields: { type: Array, required: true },
@@ -19,6 +20,7 @@ const unselectedOptions = computed(() => {
         const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
         return {
           label: column?.header || option?.label || field,
+          icon: tableWhereQueryItemIconMap.get(option?.type ?? "unknown") || "field",
           onSelect: () => {
             emit("new", field);
             popoverOpen.value = false;