@movk/nuxt 1.2.0 → 1.3.0

package/dist/runtime/components/PillGroup.vue

@@ -0,0 +1,291 @@
+<script setup>
+import { computed, ref } from "vue";
+import { FieldGroupReset } from "@nuxt/ui/composables/useFieldGroup";
+import { UButton } from "#components";
+import { useAppConfig } from "#imports";
+import { createEqualsBy, getPath } from "@movk/core";
+import theme from "#build/movk-ui/pill-group";
+import { useExtendedTv } from "../utils/extend-theme";
+import { useFieldControl } from "../utils/form-control";
+const props = defineProps({
+  items: { type: Array, required: false },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  by: { type: [String, Function], required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  activeVariant: { type: null, required: false, default: "solid" },
+  inactiveVariant: { type: null, required: false, default: "soft" },
+  disabled: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  deselectable: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const modelValue = defineModel({ type: null });
+const emits = defineEmits(["blur", "focus", "change", "update:modelValue", "select"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const {
+  id,
+  size: effectiveSize,
+  color: effectiveColor,
+  disabled: effectiveDisabled,
+  fieldGroupOrientation,
+  ariaAttrs,
+  emitFormChange,
+  emitFormFocus,
+  emitFormBlur,
+  emitFormInput
+} = useFieldControl(props);
+const focusWithin = ref(false);
+const { extendUi } = useExtendedTv(
+  { slots: {} },
+  theme,
+  () => appConfig.movk?.pillGroup,
+  () => ({
+    ui: {
+      ...props.ui,
+      root: [props.ui?.root, props.class]
+    },
+    variants: {
+      orientation: props.orientation,
+      fieldGroup: fieldGroupOrientation.value
+    }
+  })
+);
+function isSelectItem(item) {
+  return typeof item === "object" && item !== null;
+}
+function getItemValue(item) {
+  if (!isSelectItem(item)) return item;
+  if (!props.valueKey) return item;
+  return getPath(item, props.valueKey);
+}
+function getItemKey(item, idx) {
+  if (!isSelectItem(item)) return `v:${String(item)}`;
+  if (props.valueKey) {
+    const v = getPath(item, props.valueKey);
+    if (v != null && typeof v !== "object") return `v:${String(v)}`;
+  }
+  const valueField = getPath(item, "value");
+  if (valueField != null && typeof valueField !== "object") return `v:${String(valueField)}`;
+  const label = getPath(item, props.labelKey ?? "label");
+  if (label) return `l:${label}`;
+  return `i:${idx}`;
+}
+function getItemLabel(item) {
+  if (!isSelectItem(item)) return String(item);
+  const label = getPath(item, props.labelKey ?? "label");
+  if (label != null) return String(label);
+  const value = getPath(item, "value");
+  return value != null ? String(value) : "";
+}
+function getItemDescription(item) {
+  if (!isSelectItem(item)) return void 0;
+  const desc = getPath(item, props.descriptionKey ?? "description");
+  return desc == null ? void 0 : String(desc);
+}
+const itemEquals = computed(() => createEqualsBy({
+  by: props.by,
+  keys: [props.valueKey, "value", props.labelKey ?? "label"]
+}));
+const selectedArray = computed(() => {
+  if (!props.multiple) return [];
+  const v = modelValue.value;
+  return Array.isArray(v) ? v : [];
+});
+const selectedKeyMap = computed(() => {
+  if (!props.multiple || !props.by || typeof props.by !== "string") return null;
+  const m = /* @__PURE__ */ new Map();
+  for (const v of selectedArray.value) {
+    const key = isSelectItem(v) ? getPath(v, props.by) : v;
+    m.set(key, true);
+  }
+  return m;
+});
+function isSelected(item) {
+  const target = getItemValue(item);
+  if (props.multiple) {
+    if (selectedKeyMap.value) {
+      const key = isSelectItem(target) ? getPath(target, props.by) : target;
+      return selectedKeyMap.value.has(key);
+    }
+    return selectedArray.value.some((v) => itemEquals.value(v, target));
+  }
+  if (modelValue.value === void 0) return false;
+  return itemEquals.value(modelValue.value, target);
+}
+function isItemDisabled(item) {
+  return isSelectItem(item) && item.disabled === true;
+}
+const reachedMax = computed(
+  () => !!(props.multiple && props.max != null && selectedArray.value.length >= props.max)
+);
+function isItemLocked(item) {
+  return reachedMax.value && !isSelected(item);
+}
+function isClickBlocked(item) {
+  if (!props.multiple || props.min == null) return false;
+  return isSelected(item) && selectedArray.value.length <= props.min;
+}
+function emitSelect(item, index, selected) {
+  emits("select", {
+    item,
+    value: getItemValue(item),
+    selected,
+    index
+  });
+}
+function handleClick(e, item, index) {
+  if (effectiveDisabled.value || isItemDisabled(item)) return;
+  if (props.multiple && (isItemLocked(item) || isClickBlocked(item))) return;
+  if (isSelectItem(item) && typeof item.onSelect === "function") {
+    item.onSelect(e);
+  }
+  if (props.multiple) {
+    const arr = selectedArray.value;
+    const target = getItemValue(item);
+    const wasSelected = isSelected(item);
+    const next = wasSelected ? arr.filter((v) => !itemEquals.value(v, target)) : [...arr, target];
+    modelValue.value = next;
+    emits("change", next);
+    emitSelect(item, index, !wasSelected);
+  } else {
+    const next = getItemValue(item);
+    const wasSelected = isSelected(item);
+    const finalValue = props.deselectable && wasSelected ? void 0 : next;
+    if (itemEquals.value(modelValue.value, finalValue)) return;
+    modelValue.value = finalValue;
+    emits("change", finalValue);
+    emitSelect(item, index, !wasSelected);
+  }
+  emitFormChange();
+  emitFormInput();
+}
+function isDisabledItem(item) {
+  return effectiveDisabled.value || isItemDisabled(item) || isItemLocked(item);
+}
+function handleFocusIn() {
+  if (focusWithin.value) return;
+  focusWithin.value = true;
+  emitFormFocus();
+}
+function handleFocusOut(event) {
+  const nextTarget = event.relatedTarget;
+  if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;
+  focusWithin.value = false;
+  emitFormBlur();
+}
+function hasLeading(item) {
+  return isSelectItem(item) && (!!item.icon || !!item.avatar);
+}
+</script>
+
+<template>
+  <div :class="extendUi.root" data-slot="root">
+    <FieldGroupReset>
+      <slot name="leading" :model-value="modelValue" :items="items ?? []" />
+
+      <slot :model-value="modelValue" :items="items ?? []">
+        <div
+          :id="id"
+          :role="props.multiple ? 'group' : void 0"
+          :class="extendUi.list"
+          data-slot="list"
+          v-bind="ariaAttrs"
+          @focusin="handleFocusIn"
+          @focusout="handleFocusOut"
+        >
+          <template v-for="(item, idx) in items" :key="getItemKey(item, idx)">
+            <slot
+              name="item"
+              :item="item"
+              :index="idx"
+              :selected="isSelected(item)"
+            >
+              <UButton
+                :color="isSelectItem(item) && item.color ? item.color : effectiveColor"
+                :size="effectiveSize"
+                :disabled="isDisabledItem(item)"
+                :variant="isSelected(item) ? isSelectItem(item) && item.variant ? item.variant : props.activeVariant : props.inactiveVariant"
+                :class="[extendUi.item, isSelectItem(item) ? item.class : void 0]"
+                @click="handleClick($event, item, idx)"
+              >
+                <span
+                  v-if="!!slots['item-leading'] || hasLeading(item)"
+                  :class="extendUi.leading"
+                  data-slot="leading"
+                >
+                  <slot
+                    name="item-leading"
+                    :item="item"
+                    :index="idx"
+                    :selected="isSelected(item)"
+                  >
+                    <UIcon
+                      v-if="isSelectItem(item) && item.icon"
+                      :name="item.icon"
+                      :class="extendUi.leadingIcon"
+                    />
+                    <UAvatar
+                      v-else-if="isSelectItem(item) && item.avatar"
+                      v-bind="item.avatar"
+                    />
+                  </slot>
+                </span>
+
+                <span :class="extendUi.itemWrapper">
+                  <span :class="extendUi.itemLabel">
+                    <slot
+                      name="item-label"
+                      :item="item"
+                      :index="idx"
+                      :selected="isSelected(item)"
+                    >
+                      {{ getItemLabel(item) }}
+                    </slot>
+                  </span>
+                  <span
+                    v-if="getItemDescription(item) || !!slots['item-description']"
+                    :class="extendUi.itemDescription"
+                  >
+                    <slot
+                      name="item-description"
+                      :item="item"
+                      :index="idx"
+                      :selected="isSelected(item)"
+                    >
+                      {{ getItemDescription(item) }}
+                    </slot>
+                  </span>
+                </span>
+
+                <span
+                  v-if="!!slots['item-trailing']"
+                  :class="extendUi.trailing"
+                  data-slot="trailing"
+                >
+                  <slot
+                    name="item-trailing"
+                    :item="item"
+                    :index="idx"
+                    :selected="isSelected(item)"
+                  />
+                </span>
+              </UButton>
+            </slot>
+          </template>
+        </div>
+      </slot>
+
+      <slot name="trailing" :model-value="modelValue" :items="items ?? []" />
+    </FieldGroupReset>
+  </div>
+</template>

package/dist/runtime/components/PillGroup.vue.d.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];
+}) & {};

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

@@ -0,0 +1,30 @@
+import type { ComponentConfig } from '@nuxt/ui';
+import theme from '#build/movk-ui/popconfirm';
+import popoverTheme from '#build/ui/popover';
+import type { AppConfig } from 'nuxt/schema';
+import type { PopconfirmProps, PopconfirmSlots } from '../types/components/popconfirm';
+declare const __VLS_export: <M extends "click" | "hover">(__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<(PopconfirmProps<"click" | "hover"> & {
+        type?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "popconfirm">["variants"]["type"];
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "popconfirm">["slots"];
+    }) & {
+        onError?: ((error: unknown) => any) | undefined;
+        onCancel?: (() => any) | undefined;
+        onConfirm?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PopconfirmSlots<"click" | "hover">;
+    emit: ((evt: "error", error: unknown) => void) & ((evt: "cancel") => void) & ((evt: "confirm") => 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/Popconfirm.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { isObject } from "@movk/core";
+import { UPopover, UButton, UIcon } from "#components";
+import { computed, ref, useAttrs } from "vue";
+import { useAppConfig } from "#imports";
+import { useExtendedTv } from "../utils/extend-theme";
+import theme from "#build/movk-ui/popconfirm";
+import popoverTheme from "#build/ui/popover";
+const props = defineProps({
+  title: { type: String, required: false, default: "\u786E\u8BA4\u64CD\u4F5C" },
+  description: { type: String, required: false, default: "\u8BF7\u786E\u8BA4\u662F\u5426\u6267\u884C\u6B64\u64CD\u4F5C?" },
+  type: { type: String, required: false, default: "neutral" },
+  icon: { type: null, required: false, default: "i-lucide-circle-question-mark" },
+  arrow: { type: Boolean, required: false, default: true },
+  confirmButton: { type: null, required: false },
+  cancelButton: { type: [Object, Boolean], required: false, default: true },
+  dismissible: { type: Boolean, required: false },
+  onConfirm: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+const emits = defineEmits(["confirm", "cancel", "error"]);
+const slots = defineSlots();
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const openState = ref(false);
+const { baseUi, extraUi } = useExtendedTv(
+  popoverTheme,
+  theme,
+  () => appConfig.movk?.popconfirm,
+  () => ({ ui: props.ui, variants: { type: props.type } })
+);
+const confirmLoading = ref(false);
+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",
+  size: "xs",
+  label: "\u53D6\u6D88",
+  variant: "soft",
+  ...isObject(props.cancelButton) ? props.cancelButton : {}
+}));
+const confirmButtonAttrs = computed(() => ({
+  color: "primary",
+  size: "xs",
+  label: "\u786E\u8BA4",
+  ...props.confirmButton ?? {}
+}));
+function handleCancel(close) {
+  if (confirmLoading.value) return;
+  emits("cancel");
+  close();
+}
+async function handleConfirm(close) {
+  if (confirmLoading.value) return;
+  try {
+    const result = props.onConfirm?.();
+    if (result instanceof Promise) {
+      confirmLoading.value = true;
+      await result;
+    }
+    emits("confirm");
+    close();
+  } catch (err) {
+    emits("error", err);
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UPopover
+    v-bind="attrs"
+    v-model:open="openState"
+    :dismissible="props.dismissible"
+    :arrow="props.arrow"
+    :ui="baseUi"
+  >
+    <template #default="{ open }">
+      <slot :open="open" />
+    </template>
+
+    <template #content="{ close }">
+      <div
+        v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)"
+        data-slot="header"
+        :class="extraUi.header"
+      >
+        <slot name="header" :close="close">
+          <span
+            v-if="props.title || !!slots.title"
+            data-slot="title"
+            :class="extraUi.title"
+          >
+            <slot name="title" :close="close">
+              <UIcon :name="resolvedIcon" :class="extraUi.icon" />
+              {{ props.title }}
+            </slot>
+          </span>
+
+          <p
+            v-if="props.description || !!slots.description"
+            data-slot="description"
+            :class="extraUi.description"
+          >
+            <slot name="description" :close="close">
+              {{ props.description }}
+            </slot>
+          </p>
+        </slot>
+
+        <slot name="actions" :close="close" />
+      </div>
+
+      <div v-if="!!slots.body" data-slot="body" :class="extraUi.body">
+        <slot name="body" :close="close" />
+      </div>
+
+      <div data-slot="footer" :class="extraUi.footer">
+        <slot name="footer" :close="close">
+          <UButton
+            v-if="props.cancelButton !== false"
+            v-bind="cancelButtonAttrs"
+            @click="handleCancel(close)"
+          />
+          <UButton
+            v-bind="confirmButtonAttrs"
+            :loading="confirmLoading"
+            @click="handleConfirm(close)"
+          />
+        </slot>
+      </div>
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,30 @@
+import type { ComponentConfig } from '@nuxt/ui';
+import theme from '#build/movk-ui/popconfirm';
+import popoverTheme from '#build/ui/popover';
+import type { AppConfig } from 'nuxt/schema';
+import type { PopconfirmProps, PopconfirmSlots } from '../types/components/popconfirm';
+declare const __VLS_export: <M extends "click" | "hover">(__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<(PopconfirmProps<"click" | "hover"> & {
+        type?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "popconfirm">["variants"]["type"];
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "popconfirm">["slots"];
+    }) & {
+        onError?: ((error: unknown) => any) | undefined;
+        onCancel?: (() => any) | undefined;
+        onConfirm?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PopconfirmSlots<"click" | "hover">;
+    emit: ((evt: "error", error: unknown) => void) & ((evt: "cancel") => void) & ((evt: "confirm") => 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];
+}) & {};