v-nuxt-ui 0.1.0

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

@@ -0,0 +1,44 @@
+<script setup>
+import { ref, computed } from "vue";
+import ButtonDropdown from "#v/components/button/Dropdown.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  unselectedFields: { type: Array, required: true },
+  bizColumns: { type: Array, required: true },
+  size: { type: null, required: false }
+});
+const emit = defineEmits(["new"]);
+const popoverOpen = ref(false);
+const unselectedOptions = computed(() => {
+  const options = [
+    {
+      id: "unselected-fields",
+      label: "\u65B0\u589E\u67E5\u8BE2\u5B57\u6BB5",
+      items: props.unselectedFields.map((field) => {
+        const option = props.options.find((option2) => option2.field === field);
+        const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
+        return {
+          label: column?.header || option?.label || field,
+          onSelect: () => {
+            emit("new", field);
+            popoverOpen.value = false;
+          }
+        };
+      })
+    }
+  ];
+  return options;
+});
+</script>
+
+<template>
+  <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
+  <ButtonDropdown :groups="unselectedOptions">
+    <UButton
+      :size="size"
+      color="neutral"
+      variant="soft"
+      icon="i-lucide-list-filter-plus"
+    />
+  </ButtonDropdown>
+</template>

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

@@ -0,0 +1,14 @@
+import type { WhereQueryOption, VColumn, Size } from '#v/types';
+type __VLS_Props = {
+    options: WhereQueryOption<any>[];
+    unselectedFields: string[];
+    bizColumns: VColumn<any>[];
+    size?: Size;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    new: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNew?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/query/where/index.d.vue.ts

@@ -0,0 +1,21 @@
+import type { WhereQueryProps } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<WhereQueryProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focusField: (field: string) => boolean;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, useTemplateRef, nextTick } from "vue";
+import { useTableOpr } from "#v/composables/table/useTableOpr";
+import { useToast } from "@nuxt/ui/composables";
+import TableQueryWhereSimple from "#v/components/table/query/where/simple/index.vue";
+import TableQueryWhereNewer from "#v/components/table/query/where/Newer.vue";
+const props = defineProps({
+  whereOptions: { type: Array, required: true },
+  defaultWhereQuery: { type: Object, required: false },
+  whereQuery: { type: null, required: true },
+  onUpdateWhereQuery: { type: Function, required: true },
+  whereQueryOpen: { type: Boolean, required: false },
+  onUpdateWhereQueryOpen: { type: Function, required: false },
+  isWhereQueryValueEmpty: { type: Boolean, required: false },
+  fetching: { type: Boolean, required: false },
+  triggerFetching: { type: Function, required: true },
+  bizColumns: { type: Array, required: false },
+  hideQueryButton: { type: Boolean, required: false }
+});
+const selectedWhereFields = computed(() => {
+  return props.whereQuery?.items?.map((query) => query.field) ?? [];
+});
+const unselectedWhereFields = computed(() => {
+  return props.whereOptions.map((option) => option.field).filter((field) => !selectedWhereFields.value.includes(field));
+});
+const simpleWhereQueryRef = useTemplateRef("simpleWhereQuery");
+const onNewField = (field) => {
+  const option = props.whereOptions.find((option2) => option2.field === field);
+  if (!option || !option.type) {
+    useToast().add({
+      title: "\u65E0\u6CD5\u6DFB\u52A0\u67E5\u8BE2\u6761\u4EF6",
+      description: `\u65E0\u6CD5\u627E\u5230\u5B57\u6BB5 ${field} \u7684\u9009\u9879\uFF0C\u6216\u8BE5\u9009\u9879\u7F3A\u5C11\u7C7B\u578B\u4FE1\u606F`,
+      color: "warning"
+    });
+    return;
+  }
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: [...props.whereQuery?.items ?? [], {
+      field,
+      opr: option.defaultOpr ?? useTableOpr().getDefaultOprByType(option.type),
+      value: null,
+      custom: option.custom
+    }]
+  });
+  nextTick(() => {
+    simpleWhereQueryRef.value?.focusItem(field);
+  });
+};
+const isWhereQueryEmpty = computed(() => {
+  return !props.whereQuery || Object.keys(props.whereQuery ?? {}).length === 0 || // 仅检查有对应option的item的值是否为空
+  (props.whereQuery?.items?.filter((query) => props.whereOptions.find((option) => option.field === query.field)).length ?? 0) === 0 && (props.whereQuery?.groups?.length ?? 0) === 0;
+});
+const focusField = (field) => {
+  return simpleWhereQueryRef.value?.focusItem(field) ?? false;
+};
+defineExpose({ focusField });
+</script>
+
+<template>
+  <div class="flex items-start gap-2 pl-4 pr-2.5 py-2.5">
+    <!-- conditions -->
+    <div class="flex flex-wrap gap-2.5">
+      <TableQueryWhereSimple
+        v-if="!isWhereQueryEmpty"
+        v-bind="props"
+        ref="simpleWhereQuery"
+        :items="whereQuery?.items"
+        @update-items="(newItems) => onUpdateWhereQuery({
+  ...whereQuery,
+  items: newItems
+})"
+      />
+      <TableQueryWhereNewer
+        :options="whereOptions"
+        :unselected-fields="unselectedWhereFields"
+        :biz-columns="bizColumns ?? []"
+        size="sm"
+        @new="onNewField"
+      />
+      <UButton
+        v-if="!hideQueryButton"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        :loading="fetching"
+        icon="i-lucide-search"
+        @click="async () => {
+  await triggerFetching(true);
+}"
+      />
+    </div>
+
+    <!-- buttons -->
+    <div class="flex gap-2.5 items-center ml-auto shrink-0">
+      <USeparator orientation="vertical" class="h-6" />
+      <UButton
+        color="neutral"
+        variant="outline"
+        size="sm"
+        :disabled="fetching"
+        @click="() => onUpdateWhereQuery(defaultWhereQuery)"
+      >
+        重置
+      </UButton>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/table/query/where/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { WhereQueryProps } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<WhereQueryProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focusField: (field: string) => boolean;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/query/where/simple/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { WhereSimpleQueryProps } from '#v/types';
+type __VLS_Props = WhereSimpleQueryProps<any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focusItem: (field: string) => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/query/where/simple/index.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from "vue";
+import TableQueryWhereSimpleItem from "#v/components/table/query/where/simple/item/index.vue";
+const props = defineProps({
+  items: { type: Array, required: false },
+  onUpdateItems: { type: Function, required: true },
+  whereOptions: { type: Array, required: true },
+  fetching: { type: Boolean, required: false },
+  triggerFetching: { type: Function, required: true },
+  bizColumns: { type: Array, required: false }
+});
+const onRemoveFilter = (field) => {
+  props.onUpdateItems(props.items?.filter((query) => query.field !== field) ?? []);
+};
+const itemRefMap = ref(/* @__PURE__ */ new Map());
+defineExpose({
+  focusItem: (field) => {
+    const item = itemRefMap.value.get(field);
+    if (item) {
+      item.focus();
+      return true;
+    }
+    return false;
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2.5">
+    <!-- key如果是field，那么field修改后，不能聚焦后面的组件，所以这里的key用idx代替 -->
+    <TableQueryWhereSimpleItem
+      v-for="(item, idx) in items"
+      :ref="(el) => itemRefMap.set(item.field, el)"
+      :key="idx"
+      :where-query-item="item"
+      :options="whereOptions"
+      :fetching="fetching"
+      :trigger-fetching="() => triggerFetching(true)"
+      @remove="onRemoveFilter"
+      @update:where-query-item="(newWhereQueryItem) => {
+  const updatedItems = [...props.items ?? []];
+  updatedItems[idx] = newWhereQueryItem;
+  props.onUpdateItems(updatedItems);
+}"
+    />
+  </div>
+</template>

package/dist/runtime/components/table/query/where/simple/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { WhereSimpleQueryProps } from '#v/types';
+type __VLS_Props = WhereSimpleQueryProps<any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focusItem: (field: string) => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/query/where/simple/item/ColumnPicker.d.vue.ts

@@ -0,0 +1,27 @@
+import type { WhereQueryItem, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        options: WhereQueryOption<T>[];
+        disabled?: boolean;
+        focus?: () => void;
+    } & {
+        whereQueryItem: WhereQueryItem<T>;
+    }) & {
+        "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/query/where/simple/item/ColumnPicker.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, nextTick } from "vue";
+import { useTableOpr } from "#v/composables/table/useTableOpr";
+import ButtonDropdown from "#v/components/button/Dropdown.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  disabled: { type: Boolean, required: false },
+  focus: { type: Function, required: false }
+});
+const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
+const items = computed(() => {
+  return [
+    {
+      id: "query-fields",
+      label: "\u67E5\u8BE2\u5B57\u6BB5",
+      items: props.options.map((option) => ({
+        label: option.label,
+        value: option.field,
+        onSelect: () => {
+          modelValue.value = option.field;
+          nextTick(() => {
+            props.focus?.();
+          });
+        }
+      }))
+    }
+  ];
+});
+const modelValue = computed({
+  get() {
+    return whereQueryItem.value.field;
+  },
+  set(newField) {
+    const newFieldOption = props.options.find((opt) => opt.field === newField);
+    if (!newFieldOption || !newFieldOption.type) {
+      console.error("Cannot find field option for field:", newField);
+      return;
+    }
+    whereQueryItem.value = {
+      field: newField,
+      opr: useTableOpr().getDefaultOprByType(newFieldOption.type),
+      value: null
+    };
+  }
+});
+const currentLabel = computed(() => {
+  const option = props.options.find((opt) => opt.field === modelValue.value);
+  return option?.label || "";
+});
+</script>
+
+<template>
+  <ButtonDropdown
+    v-model="modelValue"
+    :groups="items"
+  >
+    <UButton
+      :size="'sm'"
+      :color="'neutral'"
+      :variant="'outline'"
+      :label="currentLabel"
+      :disabled="disabled"
+    />
+  </ButtonDropdown>
+</template>

package/dist/runtime/components/table/query/where/simple/item/ColumnPicker.vue.d.ts

@@ -0,0 +1,27 @@
+import type { WhereQueryItem, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        options: WhereQueryOption<T>[];
+        disabled?: boolean;
+        focus?: () => void;
+    } & {
+        whereQueryItem: WhereQueryItem<T>;
+    }) & {
+        "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/query/where/simple/item/OprPicker.d.vue.ts

@@ -0,0 +1,27 @@
+import type { WhereQueryItem, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        options: WhereQueryOption<T>[];
+        disabled?: boolean;
+        focus?: () => void;
+    } & {
+        whereQueryItem: WhereQueryItem<T>;
+    }) & {
+        "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/query/where/simple/item/OprPicker.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, nextTick } from "vue";
+import { useTableOpr } from "#v/composables/table/useTableOpr";
+import ButtonDropdown from "#v/components/button/Dropdown.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  disabled: { type: Boolean, required: false },
+  focus: { type: Function, required: false }
+});
+const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
+const option = computed(
+  () => props.options.find((opt) => opt.field === whereQueryItem.value.field)
+);
+const items = computed(() => {
+  if (!option.value || !option.value.type) {
+    console.error("Cannot find field option or missing type for field:", whereQueryItem.value.field);
+    return [];
+  }
+  return [
+    {
+      id: "operators",
+      label: "\u64CD\u4F5C\u7B26",
+      items: useTableOpr().getOprNameOptionsByType(option.value.type).map((option2) => ({
+        label: option2.label,
+        value: option2.value,
+        onSelect: () => {
+          modelValue.value = option2.value;
+          nextTick(() => {
+            props.focus?.();
+          });
+        }
+      }))
+    }
+  ];
+});
+const modelValue = computed({
+  get() {
+    return whereQueryItem.value.opr;
+  },
+  set(newOpr) {
+    whereQueryItem.value = {
+      ...whereQueryItem.value,
+      opr: newOpr,
+      value: null
+    };
+  }
+});
+const currentLabel = computed(() => {
+  if (!option.value?.type) return "";
+  return useTableOpr().getOprNameByTypeAndOpr(option.value.type, modelValue.value);
+});
+</script>
+
+<template>
+  <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
+  <ButtonDropdown
+    v-model="modelValue"
+    :groups="items"
+  >
+    <UButton
+      :size="'sm'"
+      :color="'neutral'"
+      :variant="'outline'"
+      :label="currentLabel"
+      :disabled="disabled"
+    />
+  </ButtonDropdown>
+</template>

package/dist/runtime/components/table/query/where/simple/item/OprPicker.vue.d.ts

@@ -0,0 +1,27 @@
+import type { WhereQueryItem, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        options: WhereQueryOption<T>[];
+        disabled?: boolean;
+        focus?: () => void;
+    } & {
+        whereQueryItem: WhereQueryItem<T>;
+    }) & {
+        "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/query/where/simple/item/index.d.vue.ts

@@ -0,0 +1,20 @@
+import type { WhereQueryOption, WhereQueryItem } from '#v/types';
+type __VLS_Props = {
+    options: WhereQueryOption<any>[];
+    fetching?: boolean;
+    triggerFetching?: () => Promise<void>;
+    onRemove: (field: string) => void;
+};
+type __VLS_ModelProps = {
+    'whereQueryItem': WhereQueryItem<any>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:whereQueryItem": (value: WhereQueryItem<any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/query/where/simple/item/index.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, watch, useTemplateRef } from "vue";
+import TableQueryWhereSimpleItemColumnPicker from "#v/components/table/query/where/simple/item/ColumnPicker.vue";
+import TableQueryWhereSimpleItemOprPicker from "#v/components/table/query/where/simple/item/OprPicker.vue";
+import TableQueryWhereSimpleItemOpr from "#v/components/table/query/where/simple/item/opr/index.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  fetching: { type: Boolean, required: false },
+  triggerFetching: { type: Function, required: false },
+  onRemove: { type: Function, required: true }
+});
+const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
+const option = computed(() => props.options.find((option2) => option2.field === whereQueryItem.value.field));
+watch(
+  () => whereQueryItem.value.custom,
+  () => {
+    whereQueryItem.value = { ...whereQueryItem.value, custom: option.value?.custom };
+  },
+  { immediate: true }
+);
+const oprRef = useTemplateRef("opr");
+defineExpose({
+  focus: () => oprRef.value?.focus()
+});
+</script>
+
+<template>
+  <UFieldGroup size="sm">
+    <TableQueryWhereSimpleItemColumnPicker
+      v-model:where-query-item="whereQueryItem"
+      :options="options"
+      :fetching="fetching"
+      :focus="() => oprRef?.focus()"
+    />
+    <TableQueryWhereSimpleItemOprPicker
+      v-model:where-query-item="whereQueryItem"
+      :options="options"
+      :fetching="fetching"
+      :focus="() => oprRef?.focus()"
+      :disabled="option?.disableOprSelector"
+    />
+    <TableQueryWhereSimpleItemOpr
+      ref="opr"
+      v-model:where-query-item="whereQueryItem"
+      :options="options"
+      :fetching="fetching"
+      :trigger-fetching="triggerFetching"
+    />
+    <UButton
+      color="neutral"
+      variant="outline"
+      icon="i-lucide-x"
+      @click="onRemove(whereQueryItem.field)"
+    />
+  </UFieldGroup>
+</template>

package/dist/runtime/components/table/query/where/simple/item/index.vue.d.ts

@@ -0,0 +1,20 @@
+import type { WhereQueryOption, WhereQueryItem } from '#v/types';
+type __VLS_Props = {
+    options: WhereQueryOption<any>[];
+    fetching?: boolean;
+    triggerFetching?: () => Promise<void>;
+    onRemove: (field: string) => void;
+};
+type __VLS_ModelProps = {
+    'whereQueryItem': WhereQueryItem<any>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:whereQueryItem": (value: WhereQueryItem<any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.d.vue.ts

@@ -0,0 +1,29 @@
+import type { VFormFieldAsyncSelectProps, WhereQueryItem } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        label: string;
+        disabled?: boolean;
+        triggerFetching?: () => Promise<void>;
+    } & VFormFieldAsyncSelectProps<T> & {
+        whereQueryItem: WhereQueryItem<T>;
+    }) & {
+        "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};