v-nuxt-ui 0.1.0

package/dist/runtime/components/badge/CodeTooltip.client.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useColorMode } from "@vueuse/core";
+import { codeToHtml } from "shiki";
+const props = defineProps({
+  data: { type: null, required: true },
+  lang: { type: String, required: false, default: "text" }
+});
+const colorMode = useColorMode();
+const codeText = computed(() => {
+  if (props.data == null) return "";
+  if (typeof props.data === "string") return props.data;
+  return JSON.stringify(props.data, null, 2);
+});
+const highlightedHtml = ref("");
+const updateHighlight = async () => {
+  const text = codeText.value;
+  if (!text) {
+    highlightedHtml.value = "";
+    return;
+  }
+  if (props.lang === "text") {
+    highlightedHtml.value = "";
+    return;
+  }
+  try {
+    highlightedHtml.value = await codeToHtml(text, {
+      lang: props.lang,
+      theme: colorMode.value === "dark" ? "github-dark" : "github-light"
+    });
+  } catch {
+    highlightedHtml.value = "";
+  }
+};
+watch([codeText, () => colorMode.value], updateHighlight, { immediate: true });
+</script>
+
+<template>
+  <UPopover :content="{ side: 'top' }" mode="hover" :open-delay="100">
+    <UBadge
+      icon="i-lucide-eye"
+      color="neutral"
+      variant="subtle"
+      label="查看"
+      class="cursor-pointer"
+    />
+    <template #content>
+      <div class="max-w-2xl max-h-96 overflow-auto p-3 text-xs">
+        <template v-if="highlightedHtml">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="overflow-auto" v-html="highlightedHtml" />
+        </template>
+        <pre v-else class="whitespace-pre-wrap">{{ codeText }}</pre>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/badge/CodeTooltip.client.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    data: string | Record<string, any> | undefined | null;
+    lang?: 'json' | 'sql' | 'text';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    lang: "json" | "sql" | "text";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+import type { CommandPaletteGroup, CommandPaletteProps } from '@nuxt/ui';
+type __VLS_Props = {
+    groups: CommandPaletteGroup[];
+    multiple?: CommandPaletteProps['multiple'];
+    enableFooterToolbar?: boolean;
+    onOpen?: () => Promise<void>;
+    onSearch?: (searchTerm: string) => Promise<void>;
+};
+type __VLS_ModelProps = {
+    'modelValue'?: string | number | undefined | null | (string | number)[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  groups: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  enableFooterToolbar: { type: Boolean, required: false },
+  onOpen: { type: Function, required: false },
+  onSearch: { type: Function, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: false } });
+const commandPaletteModelValue = computed({
+  get() {
+    if (props.multiple) {
+      const values = [];
+      for (const group of props.groups) {
+        for (const item of group.items) {
+          if (Array.isArray(modelValue.value) && modelValue.value.includes(item.value)) {
+            values.push(item);
+          }
+        }
+      }
+      return values;
+    }
+    for (const group of props.groups) {
+      for (const item of group.items) {
+        if (item.value === modelValue.value) {
+          const newItem = { ...item };
+          delete newItem.onSelect;
+          return newItem;
+        }
+      }
+    }
+    return {};
+  },
+  set(newValue) {
+    if (props.multiple) {
+      modelValue.value = newValue.map((item) => item.value);
+    } else {
+      modelValue.value = newValue.value;
+    }
+  }
+});
+const footerActions = [
+  {
+    label: "\u5168\u9009",
+    fn: () => modelValue.value = props.groups.flatMap((group) => group.items.map((item) => item.value))
+  },
+  {
+    label: "\u53CD\u9009",
+    fn: () => modelValue.value = props.groups.flatMap((group) => group.items.map((item) => item.value)).filter((value) => !(Array.isArray(modelValue.value) ? modelValue.value.includes(value) : modelValue.value === value))
+  },
+  {
+    label: "\u6E05\u7A7A",
+    fn: () => modelValue.value = []
+  }
+];
+const searchTerm = ref("");
+const popoverOpen = ref(false);
+watch(popoverOpen, async (newOpen) => {
+  if (newOpen) {
+    await props.onOpen?.();
+  } else {
+    searchTerm.value = "";
+  }
+});
+defineExpose({
+  focus: async () => {
+    popoverOpen.value = true;
+  }
+});
+</script>
+
+<template>
+  <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
+  <UPopover
+    v-model:open="popoverOpen"
+    :content="{
+  align: 'start',
+  onCloseAutoFocus: (e) => e.preventDefault()
+}"
+  >
+    <slot />
+
+    <template #content>
+      <UCommandPalette
+        :model-value="commandPaletteModelValue"
+        :selection-behavior="multiple ? 'toggle' : 'replace'"
+        :groups="groups"
+        :multiple="multiple"
+        :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
+        placeholder="搜索"
+        :search-term="searchTerm"
+        @update:model-value="(newValue) => {
+  commandPaletteModelValue = newValue;
+  if (!multiple) {
+    popoverOpen = false;
+  }
+}"
+        @update:search-term="async (newSearchTerm) => {
+  searchTerm = newSearchTerm;
+  await onSearch?.(newSearchTerm);
+}"
+      >
+        <template v-if="enableFooterToolbar && multiple" #footer>
+          <div class="flex">
+            <UFieldGroup class="flex items-center ml-auto">
+              <UButton
+                v-for="action in footerActions"
+                :key="action.label"
+                :label="action.label"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                class="text-muted font-normal"
+                @click="action.fn"
+              />
+            </UFieldGroup>
+          </div>
+        </template>
+      </UCommandPalette>
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,31 @@
+import type { CommandPaletteGroup, CommandPaletteProps } from '@nuxt/ui';
+type __VLS_Props = {
+    groups: CommandPaletteGroup[];
+    multiple?: CommandPaletteProps['multiple'];
+    enableFooterToolbar?: boolean;
+    onOpen?: () => Promise<void>;
+    onSearch?: (searchTerm: string) => Promise<void>;
+};
+type __VLS_ModelProps = {
+    'modelValue'?: string | number | undefined | null | (string | number)[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    chip?: string;
+    locale?: string;
+    selected?: boolean;
+};
+type __VLS_Slots = {
+    leading: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue";
+import { getEmojiFlag } from "#v/utils";
+import { useColorMode } from "@vueuse/core";
+const props = defineProps({
+  label: { type: String, required: true },
+  icon: { type: String, required: false },
+  chip: { type: String, required: false },
+  locale: { type: String, required: false },
+  selected: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+const colorMode = useColorMode();
+const chipColor = computed(() => {
+  if (!props.chip) return void 0;
+  if (props.chip === "black") return "black";
+  const shade = colorMode.value === "dark" ? "400" : "500";
+  return `var(--color-${props.chip}-${shade})`;
+});
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    color="neutral"
+    variant="outline"
+    :icon="icon"
+    :label="label"
+    class="capitalize ring-default text-[11px]"
+    :class="[selected ? 'bg-elevated' : 'hover:bg-elevated/50']"
+  >
+    <template v-if="chip || locale || !!slots.leading" #leading>
+      <slot v-if="chip" name="leading">
+        <span
+          class="inline-block size-2 rounded-full"
+          :style="{ backgroundColor: chipColor }"
+        />
+      </slot>
+      <slot v-else-if="locale" name="leading">
+        {{ getEmojiFlag(locale) }}
+      </slot>
+      <slot v-else name="leading" />
+    </template>
+  </UButton>
+</template>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    chip?: string;
+    locale?: string;
+    selected?: boolean;
+};
+type __VLS_Slots = {
+    leading: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+import type { InputProps } from '@nuxt/ui';
+type __VLS_Props = {
+    placeholder?: InputProps['placeholder'];
+    size?: InputProps['size'];
+};
+type __VLS_ModelProps = {
+    'value': undefined | string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:value"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+import { useTemplateRef } from "vue";
+import { vMaska } from "maska/vue";
+defineProps({
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false }
+});
+const value = defineModel("value", { type: null, ...{ required: true } });
+const input = useTemplateRef("input");
+defineExpose({
+  focus: () => input.value?.inputRef?.focus()
+});
+</script>
+
+<template>
+  <UInput
+    ref="input"
+    v-model="value"
+    v-maska="'####/##/##'"
+    size="sm"
+    class="w-full"
+    icon="i-lucide-calendar"
+    :placeholder="placeholder"
+  >
+    <template v-if="value?.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();
+}"
+      />
+    </template>
+  </UInput>
+</template>

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

@@ -0,0 +1,18 @@
+import type { InputProps } from '@nuxt/ui';
+type __VLS_Props = {
+    placeholder?: InputProps['placeholder'];
+    size?: InputProps['size'];
+};
+type __VLS_ModelProps = {
+    'value': undefined | string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:value"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,26 @@
+import type { ButtonProps } from '@nuxt/ui';
+import type { DateRange, DateValue } from 'reka-ui';
+import type { DateShortcut } from '#v/types';
+type __VLS_Props = {
+    size?: ButtonProps['size'];
+    loading?: ButtonProps['loading'];
+    range?: boolean;
+    placeholder?: string;
+    timeUnit?: Const.Time.TimeUnit;
+    leadingIcon?: ButtonProps['leadingIcon'];
+    shortcuts?: DateShortcut[];
+    peerButtons?: ButtonProps[];
+};
+type __VLS_ModelProps = {
+    'modelValue'?: DateValue | DateValue[] | DateRange | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    open: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | DateRange | DateValue[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | DateRange | DateValue[] | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,223 @@
+<script setup>
+import { computed, useTemplateRef, nextTick, ref } from "vue";
+import { now } from "@internationalized/date";
+import dayjs from "dayjs";
+import { useApp } from "#v/composables/useApp";
+import { useDate } from "#v/composables/useDate";
+import { dateFormat, TIME_ZONE } from "#v/constants";
+import { stringsJoin } from "#v/utils";
+import DatePickerInput from "./Input.vue";
+const props = defineProps({
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  range: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  timeUnit: { type: null, required: false },
+  leadingIcon: { type: null, required: false },
+  shortcuts: { type: Array, required: false },
+  peerButtons: { type: Array, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null });
+const app = useApp();
+const startDateStrValueInput = useTemplateRef("startDateStrValueInput");
+const startDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(modelValue.value?.start)?.format(dateFormat) ?? void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      modelValue.value = {
+        ...modelValue.value,
+        start: void 0
+      };
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, dateFormat, true);
+    if (formattedDayjs.isValid()) {
+      modelValue.value = {
+        ...modelValue.value,
+        start: useDate().dayjsToDateValue(formattedDayjs) ?? void 0
+      };
+    }
+  }
+});
+const endDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(modelValue.value?.end)?.format(dateFormat) ?? void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      modelValue.value = {
+        ...modelValue.value,
+        end: void 0
+      };
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, dateFormat, true);
+    if (formattedDayjs.isValid()) {
+      modelValue.value = {
+        ...modelValue.value,
+        end: useDate().dayjsToDateValue(formattedDayjs) ?? void 0
+      };
+    }
+  }
+});
+const singleDateStrValueInput = useTemplateRef("singleDateStrValueInput");
+const singleDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(modelValue.value)?.format(dateFormat) ?? void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      modelValue.value = void 0;
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, dateFormat, true);
+    if (formattedDayjs.isValid()) {
+      modelValue.value = useDate().dayjsToDateValue(formattedDayjs);
+    }
+  }
+});
+const isValueEmpty = computed(() => {
+  if (props.range) {
+    const range = modelValue.value;
+    return !range?.start && !range?.end;
+  } else {
+    return !modelValue.value;
+  }
+});
+const displayValue = computed(() => {
+  if (isValueEmpty.value) {
+    return props.placeholder ?? "\u8BF7\u9009\u62E9\u65E5\u671F";
+  }
+  if (props.range) {
+    const dateStrList = [];
+    if (props.timeUnit) {
+      dateStrList.push(useDate().formatTimeUnit(modelValue.value?.start, props.timeUnit));
+      dateStrList.push(useDate().formatTimeUnit(modelValue.value?.end, props.timeUnit));
+    } else {
+      dateStrList.push(useDate().dateValueToDayjs(modelValue.value?.start)?.format(dateFormat) ?? null);
+      dateStrList.push(useDate().dateValueToDayjs(modelValue.value?.end)?.format(dateFormat) ?? null);
+    }
+    return stringsJoin(dateStrList, " - ");
+  } else {
+    return useDate().dateValueToDayjs(modelValue.value)?.format(dateFormat) ?? "";
+  }
+});
+const dateStrInputFocus = () => {
+  nextTick(() => {
+    if (props.range) {
+      startDateStrValueInput.value?.focus();
+    } else {
+      singleDateStrValueInput.value?.focus();
+    }
+  });
+};
+const popoverOpen = ref(false);
+defineExpose({
+  open: () => {
+    popoverOpen.value = true;
+    dateStrInputFocus();
+  }
+});
+</script>
+
+<template>
+  <UPopover
+    :open="popoverOpen"
+    :content="{ align: 'start' }"
+    @update:open="(newOpen) => {
+  popoverOpen = newOpen;
+  if (newOpen) {
+    dateStrInputFocus();
+  }
+}"
+  >
+    <UFieldGroup>
+      <UButton
+        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>
+      <UButton v-for="(btnProps, idx) in peerButtons" :key="idx" v-bind="btnProps" />
+    </UFieldGroup>
+
+    <template #content>
+      <div class="p-3 flex flex-col gap-2">
+        <div v-if="range" class="flex flex-col sm:flex-row items-center gap-2">
+          <DatePickerInput
+            ref="startDateStrValueInput"
+            v-model:value="startDateStrValue"
+            placeholder="YYYY/MM/DD 开始日期"
+          />
+          <DatePickerInput
+            ref="endDateStrValueInput"
+            v-model:value="endDateStrValue"
+            placeholder="YYYY/MM/DD 结束日期"
+          />
+        </div>
+        <DatePickerInput
+          v-else
+          ref="singleDateStrValueInput"
+          v-model:value="singleDateStrValue"
+          placeholder="YYYY/MM/DD 日期"
+        />
+        <UCalendar
+          :model-value="modelValue"
+          :size="size"
+          :number-of-months="app.isMobile.value || !range ? 1 : 2"
+          :range="range"
+          @update:model-value="(newValue) => {
+  modelValue = newValue;
+  if (!range) {
+    popoverOpen = false;
+  }
+}"
+        />
+        <div class="flex flex-wrap items-center gap-1">
+          <UButton
+            label="清空"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            class="mr-auto"
+            @click="() => {
+  modelValue = range ? { start: void 0, end: void 0 } : null;
+}"
+          />
+          <UButton
+            v-for="shortcut in shortcuts"
+            :key="shortcut.label"
+            :label="shortcut.label"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            @click="() => {
+  modelValue = shortcut.dateFn?.();
+  popoverOpen = false;
+}"
+          />
+          <UButton
+            v-if="!range"
+            label="今天"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            class="ml-auto"
+            @click="() => {
+  modelValue = now(TIME_ZONE);
+  popoverOpen = false;
+}"
+          />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>