@movk/nuxt 1.2.0 → 1.3.0

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

@@ -1,42 +1,29 @@
-import type { DateFormatterOptions } from '../composables/useDateFormatter.js';
-import type { ButtonProps, CalendarProps, PopoverProps } from '@nuxt/ui';
-import type { OmitByKey } from '@movk/core';
-import { useDateFormatter } from '../composables/useDateFormatter.js';
-export type LabelFormat = 'iso' | 'formatted' | 'date' | 'timestamp' | 'unix';
-export interface DatePickerProps<R extends boolean, M extends boolean, P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ OmitByKey<CalendarProps<R, M>, 'modelValue'>, DateFormatterOptions {
-    /** 按钮组件属性 */
-    buttonProps?: ButtonProps;
-    /** 弹出层组件属性 */
-    popoverProps?: PopoverProps<P>;
-    /** 按钮上展示文本的格式 */
-    labelFormat?: LabelFormat | ((formatter: ReturnType<typeof useDateFormatter>, modelValue: CalendarProps<R, M>['modelValue']) => string);
-}
-declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover" = "click">(__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<(DatePickerProps<R, M, P> & {
-        modelValue?: CalendarProps<R, M>["modelValue"];
+import type { ComponentConfig } from '@nuxt/ui';
+import type { AppConfig } from 'nuxt/schema';
+import type { DateValue } from '@internationalized/date';
+import type { ValueFormat } from '../composables/useDateFormatter';
+import theme from '#build/movk-ui/date-picker';
+import popoverTheme from '#build/ui/popover';
+import type { DatePickerProps, DatePickerSlots, FormattedValue } from '../types/components/date-picker';
+declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover", V extends ValueFormat = "date-value">(__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<(DatePickerProps<R, M, P, V> & {
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "datePicker">["slots"];
+    } & {
+        modelValue?: FormattedValue<R, M, V>;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: FormattedValue<R, M, V> | undefined) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+        "onClose:prevent"?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {
-        default?: (props: any) => any;
-    } & {
-        leading?: (props: any) => any;
-    } & {
-        trailing?: (props: any) => any;
-    } & {
-        anchor?: (props: any) => any;
-    } & {
-        day?: (props: any) => any;
-    } & {
-        heading?: (props: any) => any;
-    } & {
-        'week-day'?: (props: any) => any;
-    };
-    emit: any;
+    slots: DatePickerSlots<P>;
+    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: FormattedValue<R, M, V>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: import("reka-ui").DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void) & ((evt: "close:prevent") => void)) & ((event: "update:modelValue", value: FormattedValue<R, M, V> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/DatePicker.vue

@@ -1,101 +1,209 @@
 <script setup>
-import { UPopover, UButton, UCalendar } from "#components";
-import { computed } from "vue";
+import { UPopover, UButton, UCalendar, UIcon } from "#components";
+import { computed, useAttrs } from "vue";
+import { useAppConfig } from "#imports";
 import { useDateFormatter } from "../composables/useDateFormatter";
-const LABEL_FORMATS = ["iso", "formatted", "date", "timestamp", "unix"];
-const {
-  buttonProps = { label: "\u9009\u62E9\u65E5\u671F" },
-  popoverProps,
-  formatOptions = { dateStyle: "medium" },
-  locale,
-  labelFormat = "formatted"
-} = defineProps({
+import { useExtendedTv } from "../utils/extend-theme";
+import { useFieldControl } from "../utils/form-control";
+import theme from "#build/movk-ui/date-picker";
+import popoverTheme from "#build/ui/popover";
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "\u9009\u62E9\u65E5\u671F" },
   buttonProps: { type: Object, required: false },
   popoverProps: { type: Object, required: false },
-  labelFormat: { type: [String, Function], required: false },
+  labelFormat: { type: [String, Function], required: false, default: "formatted" },
+  valueFormat: { type: null, required: false },
+  clearable: { type: Boolean, required: false },
+  presets: { type: [Array, String], required: false },
+  ui: { type: Object, required: false },
   locale: { type: String, required: false },
   formatOptions: { type: null, required: false },
   timeZone: { type: String, required: false }
 });
-const emit = defineEmits(["close:prevent", "update:open", "update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
+const emits = defineEmits(["close:prevent", "update:open", "update:placeholder", "update:validModelValue", "update:startValue", "update:modelValue"]);
+defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
 const modelValue = defineModel({ type: null });
-const formatter = useDateFormatter({ locale, formatOptions });
-const formatConverters = {
-  iso: (date) => formatter.toISO(date),
-  timestamp: (date) => String(formatter.toTimestamp(date)),
-  unix: (date) => String(formatter.toUnixTimestamp(date)),
-  date: (date) => formatter.toDate(date)?.toLocaleDateString() ?? "",
-  formatted: (date) => formatter.format(date)
-};
-const convertSingle = (date, format) => formatConverters[format](date);
-const convertArray = (dates, format) => dates.map((d) => convertSingle(d, format)).join(", ");
-const convertRange = (range, format) => {
-  if (!range.start || !range.end) return buttonProps.label || "";
-  return `${convertSingle(range.start, format)} - ${convertSingle(range.end, format)}`;
+const appConfig = useAppConfig();
+const {
+  id,
+  name,
+  size: effectiveSize,
+  color,
+  disabled: effectiveDisabled,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+  emitFormFocus,
+  emitFormInput
+} = useFieldControl(props);
+const formatter = useDateFormatter({
+  locale: props.locale,
+  formatOptions: props.formatOptions,
+  timeZone: props.timeZone
+});
+const asModel = (v) => v;
+const isOn = (v) => v === "" || v === true || v === "true";
+const valueFormat = computed(() => props.valueFormat ?? "date-value");
+const isRange = computed(() => isOn(attrs.range));
+const isMultiple = computed(() => isOn(attrs.multiple));
+const calendarValue = computed({
+  get: () => formatter.convertFromFormat(modelValue.value, valueFormat.value),
+  set: (next) => {
+    modelValue.value = formatter.convertToFormat(next, valueFormat.value);
+    emitFormInput();
+    emitFormChange();
+  }
+});
+const emptyLabel = computed(() => props.placeholder || props.buttonProps?.label || "");
+const fromNumber = (n) => n === null ? "" : String(n);
+const converters = {
+  iso: formatter.toISO,
+  formatted: formatter.format,
+  date: (d) => formatter.toDate(d)?.toLocaleDateString() ?? "",
+  timestamp: (d) => fromNumber(formatter.toTimestamp(d)),
+  unix: (d) => fromNumber(formatter.toUnixTimestamp(d))
 };
-const convertToLabel = (value) => {
-  if (!value) return buttonProps.label || "";
-  const format = LABEL_FORMATS.includes(labelFormat) ? labelFormat : "formatted";
+const formattedDate = computed(() => {
+  const value = calendarValue.value;
+  if (typeof props.labelFormat === "function") return props.labelFormat(formatter, value);
+  if (!value) return emptyLabel.value;
+  const convert = converters[props.labelFormat] ?? formatter.format;
   if (Array.isArray(value)) {
-    return value.length > 0 ? convertArray(value, format) : buttonProps.label || "";
+    return value.length === 0 ? emptyLabel.value : value.map(convert).join(", ");
   }
-  if (typeof value === "object" && "start" in value && "end" in value) {
-    return convertRange(value, format);
+  if (formatter.isDateRange(value)) {
+    if (!value.start || !value.end) return emptyLabel.value;
+    return `${convert(value.start)} - ${convert(value.end)}`;
   }
-  return convertSingle(value, format);
-};
-const formattedDate = computed(() => {
-  if (typeof labelFormat === "function") return labelFormat(formatter, modelValue.value);
-  return convertToLabel(modelValue.value);
+  return convert(value);
 });
+const hasValue = computed(() => {
+  const value = calendarValue.value;
+  if (value === void 0 || value === null) return false;
+  if (Array.isArray(value)) return value.length > 0;
+  if (formatter.isDateRange(value)) return !!value.start || !!value.end;
+  return true;
+});
+const triggerButtonAttrs = computed(() => ({
+  color: color.value === "error" ? "error" : "neutral",
+  variant: "subtle",
+  icon: "i-lucide-calendar",
+  size: effectiveSize.value,
+  label: formattedDate.value,
+  disabled: effectiveDisabled.value,
+  class: "w-full",
+  ...props.buttonProps
+}));
+function handleClear(event) {
+  event.stopPropagation();
+  if (isRange.value) calendarValue.value = asModel({ start: void 0, end: void 0 });
+  else if (isMultiple.value) calendarValue.value = asModel([]);
+  else calendarValue.value = asModel(void 0);
+}
+function buildDefaultPresets() {
+  const today = formatter.getToday();
+  const range = (start, end) => asModel({ start, end });
+  if (isRange.value) return [
+    { label: "\u4ECA\u5929", value: () => range(today, today) },
+    { label: "\u672C\u5468", value: (f) => range(f.getStartOfWeek(today), f.getEndOfWeek(today)) },
+    { label: "\u672C\u6708", value: (f) => range(f.getStartOfMonth(today), f.getEndOfMonth(today)) },
+    { label: "\u6700\u8FD1 7 \u5929", value: () => range(today.subtract({ days: 6 }), today) },
+    { label: "\u6700\u8FD1 30 \u5929", value: () => range(today.subtract({ days: 29 }), today) }
+  ];
+  if (isMultiple.value) return [];
+  return [
+    { label: "\u4ECA\u5929", value: () => asModel(today) },
+    { label: "\u6628\u5929", value: () => asModel(today.subtract({ days: 1 })) },
+    { label: "\u660E\u5929", value: () => asModel(today.add({ days: 1 })) }
+  ];
+}
+const resolvedPresets = computed(() => {
+  if (!props.presets) return [];
+  if (props.presets === "default") return buildDefaultPresets();
+  return props.presets;
+});
+function applyPreset(preset) {
+  const value = typeof preset.value === "function" ? preset.value(formatter) : preset.value;
+  calendarValue.value = value;
+}
+const { baseUi, extraUi } = useExtendedTv(
+  popoverTheme,
+  theme,
+  () => appConfig.movk?.datePicker,
+  () => ({
+    ui: props.ui,
+    variants: { withPresets: resolvedPresets.value.length > 0 }
+  })
+);
 </script>
 
 <template>
-  <UPopover v-bind="popoverProps" @close:prevent="emit('close:prevent')" @update:open="emit('update:open', $event)">
+  <UPopover
+    v-bind="popoverProps"
+    :ui="baseUi"
+    @close:prevent="emits('close:prevent')"
+    @update:open="emits('update:open', $event)"
+  >
     <template #default="defaultSlotProps">
       <slot v-bind="defaultSlotProps">
         <UButton
-          color="neutral"
-          variant="subtle"
-          icon="i-lucide-calendar"
-          class="w-full"
-          v-bind="buttonProps"
+          :id="id"
+          :name="name"
+          v-bind="{ ...triggerButtonAttrs, ...ariaAttrs }"
+          @blur="emitFormBlur"
+          @focus="emitFormFocus"
         >
-          {{ formattedDate }}
           <template v-if="$slots.leading" #leading="leading">
             <slot name="leading" v-bind="leading" />
           </template>
           <template v-if="$slots.trailing" #trailing="trailing">
             <slot name="trailing" v-bind="trailing" />
           </template>
+          <template v-else-if="clearable && hasValue" #trailing>
+            <UIcon name="i-lucide-x" :class="extraUi.clearIcon" @click="handleClear" />
+          </template>
         </UButton>
       </slot>
     </template>
 
-    <template v-if="$slots.anchor" #anchor="anchor">
-      <slot name="anchor" v-bind="anchor" />
-    </template>
-
     <template #content>
-      <UCalendar
-        v-model="modelValue"
-        class="p-2"
-        v-bind="$attrs"
-        @update:placeholder="(e) => emit('update:placeholder', e)"
-        @update:start-value="emit('update:startValue', $event)"
-        @update:valid-model-value="emit('update:validModelValue', $event)"
-      >
-        <template v-if="$slots.day" #day="day">
-          <slot name="day" v-bind="day" />
-        </template>
-        <template v-if="$slots.heading" #heading="heading">
-          <slot name="heading" v-bind="heading" />
-        </template>
-        <template v-if="$slots['week-day']" #week-day="weekDay">
-          <slot name="week-day" v-bind="weekDay" />
-        </template>
-      </UCalendar>
+      <div :class="extraUi.wrapper">
+        <div v-if="resolvedPresets.length" :class="extraUi.presets">
+          <UButton
+            v-for="preset in resolvedPresets"
+            :key="preset.label"
+            :label="preset.label"
+            size="sm"
+            color="neutral"
+            variant="ghost"
+            :class="extraUi.presetButton"
+            @click="applyPreset(preset)"
+          />
+        </div>
+        <UCalendar
+          v-model="calendarValue"
+          :class="extraUi.calendar"
+          v-bind="attrs"
+          :disabled="effectiveDisabled"
+          @update:placeholder="(e) => emits('update:placeholder', e)"
+          @update:start-value="emits('update:startValue', $event)"
+          @update:valid-model-value="emits('update:validModelValue', $event)"
+        >
+          <template v-if="$slots.day" #day="day">
+            <slot name="day" v-bind="day" />
+          </template>
+          <template v-if="$slots.heading" #heading="heading">
+            <slot name="heading" v-bind="heading" />
+          </template>
+          <template v-if="$slots['week-day']" #week-day="weekDay">
+            <slot name="week-day" v-bind="weekDay" />
+          </template>
+        </UCalendar>
+      </div>
     </template>
   </UPopover>
 </template>

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

@@ -1,42 +1,29 @@
-import type { DateFormatterOptions } from '../composables/useDateFormatter.js';
-import type { ButtonProps, CalendarProps, PopoverProps } from '@nuxt/ui';
-import type { OmitByKey } from '@movk/core';
-import { useDateFormatter } from '../composables/useDateFormatter.js';
-export type LabelFormat = 'iso' | 'formatted' | 'date' | 'timestamp' | 'unix';
-export interface DatePickerProps<R extends boolean, M extends boolean, P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ OmitByKey<CalendarProps<R, M>, 'modelValue'>, DateFormatterOptions {
-    /** 按钮组件属性 */
-    buttonProps?: ButtonProps;
-    /** 弹出层组件属性 */
-    popoverProps?: PopoverProps<P>;
-    /** 按钮上展示文本的格式 */
-    labelFormat?: LabelFormat | ((formatter: ReturnType<typeof useDateFormatter>, modelValue: CalendarProps<R, M>['modelValue']) => string);
-}
-declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover" = "click">(__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<(DatePickerProps<R, M, P> & {
-        modelValue?: CalendarProps<R, M>["modelValue"];
+import type { ComponentConfig } from '@nuxt/ui';
+import type { AppConfig } from 'nuxt/schema';
+import type { DateValue } from '@internationalized/date';
+import type { ValueFormat } from '../composables/useDateFormatter';
+import theme from '#build/movk-ui/date-picker';
+import popoverTheme from '#build/ui/popover';
+import type { DatePickerProps, DatePickerSlots, FormattedValue } from '../types/components/date-picker';
+declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover", V extends ValueFormat = "date-value">(__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<(DatePickerProps<R, M, P, V> & {
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "datePicker">["slots"];
+    } & {
+        modelValue?: FormattedValue<R, M, V>;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: FormattedValue<R, M, V> | undefined) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+        "onClose:prevent"?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {
-        default?: (props: any) => any;
-    } & {
-        leading?: (props: any) => any;
-    } & {
-        trailing?: (props: any) => any;
-    } & {
-        anchor?: (props: any) => any;
-    } & {
-        day?: (props: any) => any;
-    } & {
-        heading?: (props: any) => any;
-    } & {
-        'week-day'?: (props: any) => any;
-    };
-    emit: any;
+    slots: DatePickerSlots<P>;
+    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: FormattedValue<R, M, V>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: import("reka-ui").DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void) & ((evt: "close:prevent") => void)) & ((event: "update:modelValue", value: FormattedValue<R, M, V> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/MessageBox.d.vue.ts

@@ -0,0 +1,36 @@
+import type { ComponentConfig } from '@nuxt/ui';
+import theme from '#build/movk-ui/message-box';
+import modalTheme from '#build/ui/modal';
+import type { AppConfig } from 'nuxt/schema';
+import type { MessageBoxProps, MessageBoxSlots } from '../types/components/message-box';
+type __VLS_Props = MessageBoxProps & {
+    type?: ComponentConfig<typeof modalTheme & typeof theme, AppConfig, 'messageBox'>['variants']['type'];
+    ui?: ComponentConfig<typeof modalTheme & typeof theme, AppConfig, 'messageBox'>['slots'];
+};
+type __VLS_Slots = MessageBoxSlots;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (confirmed: boolean) => any;
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((confirmed: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    type: "primary" | "info" | "success" | "warning" | "error" | "neutral";
+    title: string;
+    mode: "alert" | "confirm";
+    alertConfirmLabel: string;
+    confirmLabel: string;
+    cancelLabel: string;
+}, {}, {}, {}, 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/MessageBox.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref, useAttrs } from "vue";
+import { UModal, UButton, UIcon } from "#components";
+import { useAppConfig } from "#imports";
+import { useExtendedTv } from "../utils/extend-theme";
+import theme from "#build/movk-ui/message-box";
+import modalTheme from "#build/ui/modal";
+const props = defineProps({
+  title: { type: String, required: false, default: "\u63D0\u793A" },
+  type: { type: String, required: false, default: "primary" },
+  icon: { type: null, required: false },
+  mode: { type: String, required: false, default: "alert" },
+  dismissible: { type: Boolean, required: false },
+  alertConfirmLabel: { type: String, required: false, default: "\u77E5\u9053\u4E86" },
+  confirmLabel: { type: String, required: false, default: "\u786E\u8BA4" },
+  cancelLabel: { type: String, required: false, default: "\u53D6\u6D88" },
+  confirmButton: { type: Object, required: false },
+  cancelButton: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const open = defineModel("open", { type: Boolean });
+const emits = defineEmits(["close"]);
+defineSlots();
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const iconMap = {
+  primary: "i-lucide-bell",
+  info: "i-lucide-info",
+  success: "i-lucide-circle-check",
+  warning: "i-lucide-triangle-alert",
+  error: "i-lucide-circle-x",
+  neutral: "i-lucide-circle-question-mark"
+};
+const resolvedIcon = computed(() => props.icon ?? iconMap[props.type]);
+const cancelButtonAttrs = computed(() => ({
+  color: "neutral",
+  variant: "outline",
+  label: props.cancelLabel,
+  ...props.cancelButton ?? {}
+}));
+const confirmButtonAttrs = computed(() => ({
+  color: props.type,
+  label: props.mode === "alert" ? props.alertConfirmLabel : props.confirmLabel,
+  ...props.confirmButton ?? {}
+}));
+const closingFromButton = ref(false);
+function handleClose(confirmed) {
+  closingFromButton.value = true;
+  emits("close", confirmed);
+  open.value = false;
+}
+function handleUpdateOpen(val) {
+  if (val) return;
+  if (closingFromButton.value) {
+    closingFromButton.value = false;
+    return;
+  }
+  emits("close", false);
+}
+const { baseUi, extraUi } = useExtendedTv(
+  modalTheme,
+  theme,
+  () => appConfig.movk?.messageBox,
+  () => ({ ui: props.ui, variants: { type: props.type } })
+);
+</script>
+
+<template>
+  <UModal v-model:open="open" :dismissible="props.dismissible" :ui="baseUi" v-bind="attrs" @update:open="handleUpdateOpen">
+    <template v-if="$slots.default" #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.content" #content="slotProps">
+      <slot name="content" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.header" #header="slotProps">
+      <slot name="header" v-bind="slotProps" />
+    </template>
+
+    <template #title="slotProps">
+      <slot name="title" v-bind="slotProps">
+        <UIcon :name="resolvedIcon" :class="extraUi.icon" />
+        <span>{{ props.title }}</span>
+      </slot>
+    </template>
+
+    <template v-if="$slots.description" #description="slotProps">
+      <slot name="description" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.body" #body="slotProps">
+      <slot name="body" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.actions" #actions="slotProps">
+      <slot name="actions" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.close" #close="slotProps">
+      <slot name="close" v-bind="slotProps" />
+    </template>
+
+    <template #footer="slotProps">
+      <slot name="footer" v-bind="slotProps">
+        <UButton v-if="props.mode === 'confirm'" v-bind="cancelButtonAttrs" @click="handleClose(false)" />
+        <UButton v-bind="confirmButtonAttrs" @click="handleClose(true)" />
+      </slot>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/MessageBox.vue.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentConfig } from '@nuxt/ui';
+import theme from '#build/movk-ui/message-box';
+import modalTheme from '#build/ui/modal';
+import type { AppConfig } from 'nuxt/schema';
+import type { MessageBoxProps, MessageBoxSlots } from '../types/components/message-box';
+type __VLS_Props = MessageBoxProps & {
+    type?: ComponentConfig<typeof modalTheme & typeof theme, AppConfig, 'messageBox'>['variants']['type'];
+    ui?: ComponentConfig<typeof modalTheme & typeof theme, AppConfig, 'messageBox'>['slots'];
+};
+type __VLS_Slots = MessageBoxSlots;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (confirmed: boolean) => any;
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((confirmed: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    type: "primary" | "info" | "success" | "warning" | "error" | "neutral";
+    title: string;
+    mode: "alert" | "confirm";
+    alertConfirmLabel: string;
+    confirmLabel: string;
+    cancelLabel: string;
+}, {}, {}, {}, 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/PillGroup.d.vue.ts

@@ -0,0 +1,33 @@
+import type { GetItemKeys, GetModelValue } from '@nuxt/ui';
+import type { PillGroupProps, PillGroupSlots, PillItem } from '../types/components/pill-group';
+declare const __VLS_export: <T extends PillItem, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__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<(PillGroupProps<T, VK, M> & {
+        orientation?: string | number | symbol;
+        ui?: {
+            [x: string]: import("tailwind-variants").ClassValue;
+        };
+    } & {
+        modelValue?: GetModelValue<T, VK, M>;
+    }) & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onSelect?: ((payload: import("../types").PillSelectPayload<T>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M, undefined> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PillGroupSlots<T, VK, M>;
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", value: GetModelValue<T, VK, M, undefined>) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "select", payload: import("../types").PillSelectPayload<T>) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M, undefined>) => void)) & ((event: "update:modelValue", value: GetModelValue<T, VK, M> | 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];
+}) & {};