@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/popup-ui/modal/modal.vue

@@ -0,0 +1,395 @@
+<script lang="ts" setup>
+import type { ExtendedModalApi, ModalProps } from './modal';
+
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';
+
+import { usePriorityValues, useSimpleLocale } from '@melt-js/libs-vben/composables';
+import { Expand, Shrink } from '@melt-js/libs-vben/core-icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  VbenButton,
+  VbenHelpTooltip,
+  VbenIconButton,
+  VbenLoading,
+  VisuallyHidden,
+} from '@melt-js/comps-vben/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@melt-js/libs-vben/shared/constants';
+import { globalShareState } from '@melt-js/libs-vben/shared/global-state';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useModalDraggable } from './use-modal-draggable';
+
+interface Props extends ModalProps {
+  modalApi?: ExtendedModalApi;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appendToMain: false,
+  destroyOnClose: false,
+  modalApi: undefined,
+});
+
+const components = globalShareState.getComponents();
+
+const contentRef = ref();
+const wrapperRef = ref<HTMLElement>();
+const dialogRef = ref();
+const headerRef = ref();
+const footerRef = ref();
+
+const { $t } = useSimpleLocale();
+const state = props.modalApi?.useStore?.();
+
+const id = useId();
+// 遮罩层通过该 id 标记，仅当点击发生在当前 Modal 的遮罩上时才允许关闭
+provide('DISMISSABLE_MODAL_ID', id);
+
+const {
+  appendToMain,
+  bordered,
+  cancelText,
+  centered,
+  class: modalClass,
+  closable,
+  closeOnClickModal,
+  closeOnPressEscape,
+  confirmDisabled,
+  confirmLoading,
+  confirmText,
+  contentClass,
+  description,
+  destroyOnClose,
+  draggable,
+  overflow,
+  footer: showFooter,
+  footerClass,
+  fullscreen,
+  fullscreenButton,
+  header,
+  headerClass,
+  loading: showLoading,
+  modal,
+  openAutoFocus,
+  overlayBlur,
+  showCancelButton,
+  showConfirmButton,
+  submitting,
+  title,
+  titleTooltip,
+  animationType,
+  zIndex,
+} = usePriorityValues(props, state);
+
+const shouldFullscreen = computed(() => fullscreen.value);
+
+const shouldDraggable = computed(
+  () => draggable.value && !shouldFullscreen.value && header.value,
+);
+
+const shouldCentered = computed(
+  () => centered.value && !shouldFullscreen.value,
+);
+
+const getAppendTo = computed(() => {
+  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+});
+
+const { dragging, transform } = useModalDraggable(
+  dialogRef,
+  headerRef,
+  shouldDraggable,
+  getAppendTo,
+  shouldCentered,
+  overflow,
+);
+
+const firstOpened = ref(false);
+const isClosed = ref(true);
+const isDeactivated = ref(false);
+const isVisible = computed(() => state?.value?.isOpen && !isDeactivated.value);
+let pendingOpened = false;
+
+watch(
+  () => state?.value?.isOpen,
+  async (v) => {
+    pendingOpened = !!v;
+    if (v) {
+      isClosed.value = false;
+      if (!firstOpened.value) firstOpened.value = true;
+      await nextTick();
+      if (!contentRef.value) return;
+      const innerContentRef = contentRef.value.getContentRef();
+      dialogRef.value = innerContentRef.$el;
+      // reopen modal reassign value
+      const { offsetX, offsetY } = transform;
+      dialogRef.value.style.transform = shouldCentered.value
+        ? `translate(${offsetX}px, calc(-50% + ${offsetY}px))`
+        : `translate(${offsetX}px, ${offsetY}px)`;
+    }
+  },
+  { immediate: true },
+);
+
+// watch(
+//   () => [showLoading.value, submitting.value],
+//   ([l, s]) => {
+//     if ((s || l) && wrapperRef.value) {
+//       wrapperRef.value.scrollTo({
+//         // behavior: 'smooth',
+//         top: 0,
+//       });
+//     }
+//   },
+// );
+
+/**
+ * 缓存页面失活时暂停展示，保留内容区域弹窗的打开状态。
+ */
+onActivated(() => {
+  isDeactivated.value = false;
+});
+
+onDeactivated(() => {
+  isDeactivated.value = true;
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.modalApi?.close();
+  }
+});
+
+function handleFullscreen() {
+  props.modalApi?.setState((prev) => {
+    // if (prev.fullscreen) {
+    //   resetPosition();
+    // }
+    return { ...prev, fullscreen: !fullscreen.value };
+  });
+}
+function interactOutside(e: Event) {
+  if (!closeOnClickModal.value || submitting.value) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+function escapeKeyDown(e: KeyboardEvent) {
+  if (!closeOnPressEscape.value || submitting.value) {
+    e.preventDefault();
+  }
+}
+
+function handleOpenAutoFocus(e: Event) {
+  if (!openAutoFocus.value) {
+    e?.preventDefault();
+  }
+}
+
+// pointer-down-outside
+function pointerDownOutside(e: Event) {
+  const target = e.target as HTMLElement;
+  const isDismissableModal = target?.dataset.dismissableModal;
+  if (
+    !closeOnClickModal.value ||
+    isDismissableModal !== id ||
+    submitting.value
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+function handleFocusOutside(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+function handleCloseAutoFocus(_e: Event) {
+  // allow reka-ui to return focus to the trigger element on close
+}
+
+const getForceMount = computed(() => {
+  // 失活时由 unmountOnHide 保留实例，让隐藏弹窗退出交互层栈。
+  return !isDeactivated.value && !unref(destroyOnClose) && unref(firstOpened);
+});
+
+const handleOpened = () => {
+  requestAnimationFrame(() => {
+    // Restoring a cached modal must not repeat its logical opening callback.
+    if (pendingOpened && !isDeactivated.value) {
+      pendingOpened = false;
+      props.modalApi?.onOpened();
+    }
+  });
+};
+
+function handleClosed() {
+  isClosed.value = true;
+  props.modalApi?.onClosed();
+}
+</script>
+<template>
+  <Dialog
+    :modal="false"
+    :open="isVisible"
+    :unmount-on-hide="!isDeactivated || !firstOpened"
+    @update:open="() => (!submitting ? modalApi?.close() : undefined)"
+  >
+    <DialogContent
+      ref="contentRef"
+      :append-to="getAppendTo"
+      :class="
+        cn(
+          'inset-x-0 top-[10vh] mx-auto flex w-130 flex-col p-0',
+          shouldFullscreen ? 'rounded-none' : 'rounded-(--radius)',
+          {
+            'border border-border': bordered,
+            'shadow-3xl': !bordered,
+            'max-h-[min(80%,calc(100dvh-20px))] max-w-[calc(100vw-20px)]':
+              !shouldFullscreen,
+            'top-0 left-0 size-full! max-h-full! max-w-full! transform-[translate(0,0)]!':
+              shouldFullscreen,
+            'top-1/2': centered && !shouldFullscreen,
+            'duration-300': !dragging,
+            hidden: isClosed || isDeactivated,
+          },
+          modalClass,
+        )
+      "
+      :force-mount="getForceMount"
+      :inactive="isDeactivated"
+      :modal="modal"
+      :open="state?.isOpen"
+      :show-close-button="closable"
+      :animation-type="animationType"
+      :z-index="zIndex"
+      :overlay-blur="overlayBlur"
+      close-class="top-3"
+      @close-auto-focus="handleCloseAutoFocus"
+      @closed="handleClosed"
+      :close-disabled="submitting"
+      @escape-key-down="escapeKeyDown"
+      @focus-outside="handleFocusOutside"
+      @interact-outside="interactOutside"
+      @open-auto-focus="handleOpenAutoFocus"
+      @opened="handleOpened"
+      @pointer-down-outside="pointerDownOutside"
+    >
+      <DialogHeader
+        ref="headerRef"
+        :class="
+          cn(
+            'px-5 py-4',
+            {
+              'border-b': bordered,
+              hidden: !header,
+              'cursor-move select-none': shouldDraggable,
+            },
+            headerClass,
+          )
+        "
+      >
+        <DialogTitle v-if="title" class="text-left">
+          <slot name="title">
+            {{ title }}
+
+            <slot v-if="titleTooltip" name="titleTooltip">
+              <VbenHelpTooltip trigger-class="pb-1">
+                {{ titleTooltip }}
+              </VbenHelpTooltip>
+            </slot>
+          </slot>
+        </DialogTitle>
+        <DialogDescription v-if="description">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </DialogDescription>
+        <VisuallyHidden v-if="!title || !description">
+          <DialogTitle v-if="!title" />
+          <DialogDescription v-if="!description" />
+        </VisuallyHidden>
+      </DialogHeader>
+      <div
+        ref="wrapperRef"
+        :class="
+          cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
+            'pointer-events-none': showLoading || submitting,
+          })
+        "
+      >
+        <slot></slot>
+      </div>
+      <VbenLoading v-if="showLoading || submitting" spinning />
+      <div
+        v-if="fullscreenButton || $slots.extra"
+        class="absolute top-3 right-10 flex items-center gap-1"
+      >
+        <slot name="extra"></slot>
+        <VbenIconButton
+          v-if="fullscreenButton"
+          class="flex-center size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-hidden disabled:pointer-events-none"
+          @click="handleFullscreen"
+        >
+          <Shrink v-if="fullscreen" class="size-3.5" />
+          <Expand v-else class="size-3.5" />
+        </VbenIconButton>
+      </div>
+
+      <DialogFooter
+        ref="footerRef"
+        v-if="showFooter"
+        :class="
+          cn(
+            'flex-row items-center justify-end p-2',
+            {
+              'border-t': bordered,
+            },
+            footerClass,
+          )
+        "
+      >
+        <slot name="prepend-footer"></slot>
+        <slot name="footer">
+          <component
+            :is="components.DefaultButton || VbenButton"
+            v-if="showCancelButton"
+            variant="outline"
+            :disabled="submitting"
+            @click="() => modalApi?.onCancel()"
+          >
+            <slot name="cancelText">
+              {{ cancelText || $t('cancel') }}
+            </slot>
+          </component>
+          <slot name="center-footer"></slot>
+          <component
+            :is="components.PrimaryButton || VbenButton"
+            v-if="showConfirmButton"
+            :disabled="confirmDisabled"
+            :loading="confirmLoading || submitting"
+            @click="() => modalApi?.onConfirm()"
+          >
+            <slot name="confirmText">
+              {{ confirmText || $t('confirm') }}
+            </slot>
+          </component>
+        </slot>
+        <slot name="append-footer"></slot>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/popup-ui/modal/use-modal-draggable.ts

@@ -0,0 +1,141 @@
+/**
+ * @copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-draggable/index.ts
+ * 调整部分细节
+ */
+
+import type { ComputedRef, Ref } from 'vue';
+
+import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
+
+import { unrefElement } from '@vueuse/core';
+
+export function useModalDraggable(
+  targetRef: Ref<HTMLElement | undefined>,
+  dragRef: Ref<HTMLElement | undefined>,
+  draggable: ComputedRef<boolean>,
+  containerSelector?: ComputedRef<string | undefined>,
+  centered?: ComputedRef<boolean>,
+  overflow?: ComputedRef<boolean>,
+) {
+  const transform = reactive({
+    offsetX: 0,
+    offsetY: 0,
+  });
+
+  const dragging = ref(false);
+
+  const onMousedown = (e: MouseEvent) => {
+    const downX = e.clientX;
+    const downY = e.clientY;
+
+    if (!targetRef.value) {
+      return;
+    }
+
+    const targetRect = targetRef.value.getBoundingClientRect();
+    const { offsetX, offsetY } = transform;
+    const targetLeft = targetRect.left;
+    const targetTop = targetRect.top;
+    const targetWidth = targetRect.width;
+    const targetHeight = targetRect.height;
+
+    let containerRect: DOMRect | null = null;
+
+    if (containerSelector?.value) {
+      const container = document.querySelector(containerSelector.value);
+      if (container) {
+        containerRect = container.getBoundingClientRect();
+      }
+    }
+
+    let maxLeft, maxTop, minLeft, minTop;
+    if (containerRect) {
+      minLeft = containerRect.left - targetLeft + offsetX;
+      maxLeft = containerRect.right - targetLeft - targetWidth + offsetX;
+      minTop = containerRect.top - targetTop + offsetY;
+      maxTop = containerRect.bottom - targetTop - targetHeight + offsetY;
+    } else {
+      const docElement = document.documentElement;
+      const clientWidth = docElement.clientWidth;
+      const clientHeight = docElement.clientHeight;
+      minLeft = -targetLeft + offsetX;
+      minTop = -targetTop + offsetY;
+      maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+      maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    }
+
+    const onMousemove = (e: MouseEvent) => {
+      let moveX = offsetX + e.clientX - downX;
+      let moveY = offsetY + e.clientY - downY;
+
+      if (!overflow?.value) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+        moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      }
+
+      transform.offsetX = moveX;
+      transform.offsetY = moveY;
+
+      if (targetRef.value) {
+        const isCentered = centered?.value;
+        targetRef.value.style.transform = isCentered
+          ? `translate(${moveX}px, calc(-50% + ${moveY}px))`
+          : `translate(${moveX}px, ${moveY}px)`;
+        dragging.value = true;
+      }
+    };
+
+    const onMouseup = () => {
+      dragging.value = false;
+      document.removeEventListener('mousemove', onMousemove);
+      document.removeEventListener('mouseup', onMouseup);
+    };
+
+    document.addEventListener('mousemove', onMousemove);
+    document.addEventListener('mouseup', onMouseup);
+  };
+
+  const onDraggable = () => {
+    const dragDom = unrefElement(dragRef);
+    if (dragDom && targetRef.value) {
+      dragDom.addEventListener('mousedown', onMousedown);
+    }
+  };
+
+  const offDraggable = () => {
+    const dragDom = unrefElement(dragRef);
+    if (dragDom && targetRef.value) {
+      dragDom.removeEventListener('mousedown', onMousedown);
+    }
+  };
+
+  const resetPosition = () => {
+    transform.offsetX = 0;
+    transform.offsetY = 0;
+
+    const target = unrefElement(targetRef);
+    if (target) {
+      target.style.transform = '';
+    }
+  };
+
+  onMounted(() => {
+    watchEffect(() => {
+      if (draggable.value) {
+        onDraggable();
+      } else {
+        offDraggable();
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    offDraggable();
+  });
+
+  return {
+    dragging,
+    resetPosition,
+    transform,
+  };
+}