v-nuxt-ui 0.1.0

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

@@ -0,0 +1,46 @@
+<script setup>
+import { ref, watch } from "vue";
+import AsyncSelect from "./AsyncSelect.vue";
+const props = defineProps({
+  listApi: { type: Function, required: true },
+  extraQuery: { type: Object, required: false },
+  initModelValues: { type: null, required: false },
+  onUpdateInitModelValues: { type: Function, required: false },
+  searchFields: { type: Array, required: true },
+  extraSearchFieldFn: { type: Function, required: false },
+  labelField: { type: String, required: false },
+  valueField: { type: String, required: false, default: "id" },
+  labelRenderFn: { type: Function, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
+  disableOprSelector: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const initModelValue = ref(modelValue.value);
+const modelValueWithValueField = ref(modelValue.value?.map((item) => item[props.valueField]));
+watch(
+  [initModelValue, modelValueWithValueField],
+  () => {
+    const newModelValue = [];
+    modelValueWithValueField.value?.forEach((value) => {
+      const item = initModelValue.value?.find((item2) => item2[props.valueField] === value);
+      if (item) {
+        newModelValue.push(item);
+      }
+    });
+    modelValue.value = newModelValue;
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <AsyncSelect
+    v-bind="props"
+    v-model="modelValueWithValueField"
+    :init-model-values="initModelValue"
+    @update-init-model-values="(newInitModelValues) => initModelValue = newInitModelValues"
+  />
+</template>

package/dist/runtime/components/form/field/AsyncObjectSelect.vue.d.ts

@@ -0,0 +1,23 @@
+import type { VFormFieldAsyncSelectProps } 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<(VFormFieldAsyncSelectProps<T> & {
+        modelValue: T[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T[] | undefined) => 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/form/field/AsyncSelect.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VFormFieldAsyncSelectProps } 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<(VFormFieldAsyncSelectProps<T> & {
+        icon?: string;
+        disabled?: boolean;
+    } & {
+        modelValue: string[] | number[] | number | string | null | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | number[] | string[] | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | number[] | string[] | null | undefined) => 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/form/field/AsyncSelect.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useFetching } from "#v/composables/useBoolean";
+import { isEmptyString } from "#v/utils";
+import { useDebounceFn } from "@vueuse/core";
+import defu from "defu";
+import { useApp } from "#v/composables/useApp";
+const props = defineProps({
+  listApi: { type: Function, required: true },
+  extraQuery: { type: Object, required: false, default: () => ({
+    pagination: { pageNum: 1, pageSize: 10 },
+    orderQuery: [
+      { field: "createdAt", order: "desc" }
+    ]
+  }) },
+  initModelValues: { type: null, required: false },
+  onUpdateInitModelValues: { type: Function, required: false },
+  searchFields: { type: Array, required: true },
+  extraSearchFieldFn: { type: Function, required: false },
+  labelField: { type: String, required: false, default: "name" },
+  valueField: { type: String, required: false, default: "id" },
+  labelRenderFn: { type: Function, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
+  disableOprSelector: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const open = ref(false);
+const searchTerm = ref("");
+const searchedData = ref([]);
+const currentSelectedData = computed(() => [props.initModelValues ?? []].flat());
+const allData = computed(() => {
+  const newSearchedData = [];
+  if (props.enableEmptyOption) {
+    newSearchedData.push({
+      [props.valueField]: 0,
+      [props.labelField]: "\u65E0"
+    });
+  }
+  newSearchedData.push(...currentSelectedData.value);
+  searchedData.value.forEach((searchedItem) => {
+    const idx = newSearchedData.findIndex((item) => item[props.valueField] === searchedItem[props.valueField]);
+    if (idx === -1) {
+      newSearchedData.push(searchedItem);
+    }
+  });
+  return newSearchedData;
+});
+const items = computed(
+  () => fetching.value ? currentSelectedData.value.map((p) => ({
+    label: String(props.labelRenderFn ? props.labelRenderFn(p) : p[props.labelField] ?? ""),
+    value: p[props.valueField]
+  })).filter((p) => p.label && !isEmptyString(String(p.value))) : allData.value.map((p) => ({
+    label: String(props.labelRenderFn ? props.labelRenderFn(p) : p[props.labelField] ?? ""),
+    value: p[props.valueField]
+  })).filter((p) => p.label && !isEmptyString(String(p.value)))
+);
+const onSelect = (newVal) => {
+  modelValue.value = newVal;
+  if (Array.isArray(newVal)) {
+    const newInitModelValues = [];
+    newVal.forEach((val) => {
+      const foundItem = allData.value.find((p) => p[props.valueField] === val);
+      if (foundItem) {
+        newInitModelValues.push(foundItem);
+      }
+    });
+    props.onUpdateInitModelValues?.(newInitModelValues);
+  } else {
+    const newInitModelValues = allData.value.find((p) => p[props.valueField] === newVal);
+    props.onUpdateInitModelValues?.(newInitModelValues);
+  }
+};
+const { fetching, startFetching, endFetching } = useFetching();
+const onFetchItems = async () => {
+  try {
+    startFetching();
+    const query = {
+      pagination: { pageNum: 1, pageSize: 10 },
+      whereQuery: { items: [] }
+    };
+    if (!isEmptyString(searchTerm.value)) {
+      props.searchFields.forEach((field) => {
+        query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm.value, andOr: "or" });
+      });
+    }
+    if (props.extraSearchFieldFn !== void 0) {
+      query.whereQuery?.items?.push(props.extraSearchFieldFn(searchTerm.value));
+    }
+    const result = await props.listApi(defu(query, props.extraQuery));
+    if (result.data) {
+      searchedData.value = result.data.value.data?.list ?? [];
+    }
+  } finally {
+    endFetching();
+  }
+};
+const onDebounceFetchItems = useDebounceFn(onFetchItems, 512);
+</script>
+
+<template>
+  <USelectMenu
+    :open="open"
+    :model-value="modelValue"
+    :search-term="searchTerm"
+    :items="items"
+    value-key="value"
+    ignore-filter
+    :multiple="multiple"
+    :icon="icon ? icon : multiple ? 'i-lucide-list-todo' : 'i-lucide-list'"
+    :loading="fetching"
+    :placeholder="placeholder"
+    class="w-full"
+    :search-input="{
+  icon: 'i-lucide-search',
+  loading: fetching
+}"
+    :disabled="disabled"
+    :reset-search-term-on-select="false"
+    :ui="{ content: !useApp().isMobile.value && 'min-w-fit' }"
+    @update:open="(newOpen) => {
+  open = newOpen;
+  if (newOpen) {
+    onFetchItems();
+  } else {
+    searchTerm = '';
+  }
+}"
+    @update:search-term="(newValue) => {
+  if (!open) return;
+  searchTerm = newValue;
+  onDebounceFetchItems();
+}"
+    @update:model-value="onSelect"
+  />
+</template>

package/dist/runtime/components/form/field/AsyncSelect.vue.d.ts

@@ -0,0 +1,26 @@
+import type { VFormFieldAsyncSelectProps } 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<(VFormFieldAsyncSelectProps<T> & {
+        icon?: string;
+        disabled?: boolean;
+    } & {
+        modelValue: string[] | number[] | number | string | null | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | number[] | string[] | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | number[] | string[] | null | undefined) => 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/form/field/AsyncTreeSelect.d.vue.ts

@@ -0,0 +1,27 @@
+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<({
+        fetchAll?: boolean;
+    } & import("#v/types").VFormFieldAsyncSelectProps<T> & {
+        icon?: string;
+        disabled?: boolean;
+    } & {
+        modelValue: number | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: number | undefined) => 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/form/field/AsyncTreeSelect.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useFetching } from "#v/composables/useBoolean";
+import { flattenTree, treeifyOptions, isEmptyString } from "#v/utils";
+import defu from "defu";
+const props = defineProps({
+  fetchAll: { type: Boolean, required: false },
+  listApi: { type: Function, required: true },
+  extraQuery: { type: Object, required: false, default: () => ({
+    orderQuery: [
+      { field: "createdAt", order: "desc" }
+    ]
+  }) },
+  initModelValues: { type: null, required: false },
+  onUpdateInitModelValues: { type: Function, required: false },
+  searchFields: { type: Array, required: true },
+  extraSearchFieldFn: { type: Function, required: false },
+  labelField: { type: String, required: false, default: "name" },
+  valueField: { type: String, required: false, default: "id" },
+  labelRenderFn: { type: Function, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
+  disableOprSelector: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const treeModelValue = computed(() => allData.value.filter((item) => item[props.valueField] === modelValue.value));
+const open = ref(false);
+const searchTerm = ref("");
+const searchedData = ref([]);
+const allData = computed(() => {
+  const newSearchedData = [...searchedData.value];
+  const flattenInitModelValues = [props.initModelValues ?? []].flat();
+  flattenInitModelValues.forEach((initModelValue) => {
+    const idx = newSearchedData.findIndex((item) => item[props.valueField] === initModelValue[props.valueField]);
+    if (idx === -1) {
+      newSearchedData.unshift(initModelValue);
+    }
+  });
+  return newSearchedData;
+});
+const onSelect = (newVal) => {
+  modelValue.value = newVal;
+  const newInitModelValues = allData.value.find((p) => p[props.valueField] === newVal);
+  props.onUpdateInitModelValues?.(newInitModelValues);
+  open.value = false;
+};
+const items = computed(() => {
+  const options = treeifyOptions(
+    allData.value,
+    onSelect,
+    props.labelField,
+    props.valueField,
+    "parentId"
+  );
+  options.unshift({
+    label: "\u65E0",
+    value: 0,
+    onSelect: () => onSelect(0)
+  });
+  return options;
+});
+const expandedItemValues = computed(() => flattenTree(items.value).filter((item) => item !== void 0).map((item) => item.value ?? ""));
+const { fetching, startFetching, endFetching } = useFetching();
+const onFetchItems = async () => {
+  try {
+    startFetching();
+    const query = {
+      pagination: { pageNum: 1, pageSize: props.fetchAll ? 0 : 10 },
+      whereQuery: { items: [] }
+    };
+    if (!isEmptyString(searchTerm.value)) {
+      props.searchFields.forEach((field) => {
+        query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm.value });
+      });
+    }
+    const result = await props.listApi(defu(query, props.extraQuery));
+    if (result.data) {
+      searchedData.value = result.data.value.data?.list ?? [];
+    }
+  } finally {
+    endFetching();
+  }
+};
+</script>
+
+<template>
+  <UPopover
+    :open="open"
+    :ui="{
+  content: 'min-w-(--reka-popover-trigger-width)'
+}"
+    @update:open="(newOpen) => {
+  open = newOpen;
+  if (newOpen) {
+    onFetchItems();
+  }
+}"
+  >
+    <UButton
+      :label="modelValue === 0 ? '\u65E0' : allData.find((item) => item[valueField] === modelValue)?.[labelField] ?? ' '"
+      color="neutral"
+      variant="outline"
+      block
+      icon="i-lucide-folder-tree"
+      :loading="fetching"
+      trailing-icon="i-lucide-chevron-down"
+      :disabled="disabled"
+      :ui="{
+  leadingIcon: 'text-dimmed',
+  trailingIcon: 'text-dimmed'
+}"
+    />
+
+    <template #content>
+      <UTree
+        :model-value="treeModelValue"
+        :items="items"
+        :disabled="fetching"
+        :expanded="expandedItemValues"
+        :get-key="(i) => i.value"
+        multiple
+        class="p-1 max-h-80 overflow-auto"
+      />
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/form/field/AsyncTreeSelect.vue.d.ts

@@ -0,0 +1,27 @@
+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<({
+        fetchAll?: boolean;
+    } & import("#v/types").VFormFieldAsyncSelectProps<T> & {
+        icon?: string;
+        disabled?: boolean;
+    } & {
+        modelValue: number | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: number | undefined) => 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/form/field/ButtonSwitch.d.vue.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    yesLabel?: string;
+    noLabel?: string;
+};
+type __VLS_ModelProps = {
+    'modelValue': boolean | undefined | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | null | undefined) => any) | undefined;
+}>, {
+    yesLabel: string;
+    noLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  disabled: { type: Boolean, required: false },
+  yesLabel: { type: String, required: false, default: "\u662F" },
+  noLabel: { type: String, required: false, default: "\u5426" }
+});
+const value = defineModel("modelValue", { type: [Boolean, null], skipCheck: true, ...{ required: true } });
+</script>
+
+<template>
+  <UFieldGroup class="w-full">
+    <UButton
+      :label="yesLabel"
+      :disabled="disabled"
+      :color="value === true ? 'primary' : 'neutral'"
+      :variant="value === true ? 'subtle' : 'outline'"
+      block
+      @click="value = true"
+    />
+    <UButton
+      :label="noLabel"
+      :disabled="disabled"
+      :color="value === false ? 'primary' : 'neutral'"
+      :variant="value === false ? 'subtle' : 'outline'"
+      block
+      @click="value = false"
+    />
+  </UFieldGroup>
+</template>

package/dist/runtime/components/form/field/ButtonSwitch.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    yesLabel?: string;
+    noLabel?: string;
+};
+type __VLS_ModelProps = {
+    'modelValue': boolean | undefined | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | null | undefined) => any) | undefined;
+}>, {
+    yesLabel: string;
+    noLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,26 @@
+import type { ButtonProps } from '@nuxt/ui';
+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<({
+        disabled?: boolean;
+        peerButtons?: ButtonProps[];
+    } & {
+        modelValue: string | null | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | null | undefined) => 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/form/field/DatePicker.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed, useTemplateRef, nextTick } from "vue";
+import dayjs from "dayjs";
+import { useDate } from "#v/composables/useDate";
+import { dateFormat } from "#v/constants";
+import DatePickerInput from "#v/components/date-picker/Input.vue";
+defineProps({
+  disabled: { type: Boolean, required: false },
+  peerButtons: { type: Array, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const open = ref(false);
+const dateValue = computed({
+  get() {
+    return useDate().isoUtcStringToDateValue(modelValue.value);
+  },
+  set(newVal) {
+    modelValue.value = useDate().dateValueToDayjs(newVal)?.toISOString();
+  }
+});
+const dateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(dateValue.value)?.format(dateFormat) ?? void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      dateValue.value = void 0;
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, dateFormat, true);
+    if (formattedDayjs.isValid()) {
+      dateValue.value = useDate().dayjsToDateValue(formattedDayjs);
+    }
+  }
+});
+const dateStrValueInput = useTemplateRef("dateStrValueInput");
+const dateStrInputFocus = () => {
+  nextTick(() => {
+    dateStrValueInput.value?.focus();
+  });
+};
+</script>
+
+<template>
+  <UFieldGroup class="w-full">
+    <UPopover
+      :open="open"
+      :content="{ align: 'start' }"
+      @update:open="(newOpen) => {
+  open = newOpen;
+  if (newOpen) {
+    dateStrInputFocus();
+  }
+}"
+    >
+      <UButton
+        :label="dateStrValue ?? ''"
+        color="neutral"
+        variant="outline"
+        leading-icon="i-lucide-calendar"
+        trailing-icon="i-lucide-chevron-down"
+        :disabled="disabled"
+        block
+        :ui="{
+  leadingIcon: 'text-dimmed',
+  trailingIcon: 'text-dimmed'
+}"
+      />
+      <template #content>
+        <div class="p-3 flex flex-col gap-2">
+          <DatePickerInput
+            ref="dateStrValueInput"
+            v-model:value="dateStrValue"
+            placeholder="YYYY/MM/DD 日期"
+          />
+          <UCalendar
+            :model-value="dateValue"
+            size="sm"
+            @update:model-value="(newValue) => {
+  dateValue = newValue;
+  open = false;
+}"
+          />
+        </div>
+      </template>
+    </UPopover>
+    <UButton v-for="(btnProps, idx) in peerButtons" :key="idx" v-bind="btnProps" />
+  </UFieldGroup>
+</template>

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

@@ -0,0 +1,26 @@
+import type { ButtonProps } from '@nuxt/ui';
+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<({
+        disabled?: boolean;
+        peerButtons?: ButtonProps[];
+    } & {
+        modelValue: string | null | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | null | undefined) => 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];
+}) & {};