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

package/src/composables/use-layout-viewport-height.ts

@@ -0,0 +1,71 @@
+import { onMounted, onUnmounted } from 'vue';
+
+import { CSS_VARIABLE_LAYOUT_VIEWPORT_HEIGHT } from '@melt-js/libs-vben/shared/constants';
+
+import { useCssVar, useEventListener } from '@vueuse/core';
+
+function supportsDynamicViewportHeight() {
+  return (
+    globalThis.CSS !== undefined &&
+    typeof globalThis.CSS.supports === 'function' &&
+    globalThis.CSS.supports('height', '1dvh')
+  );
+}
+
+function readViewportHeight() {
+  return Math.round(window.visualViewport?.height ?? window.innerHeight);
+}
+
+/**
+ * 仅在不支持 dvh 时，把 --vben-viewport-height 写成像素值。
+ * 支持 dvh 时保持 CSS 的 100vh → 100dvh 级联，避免 useCssVar 把单位冻成 px。
+ */
+export function useLayoutViewportHeight() {
+  if (typeof window === 'undefined' || supportsDynamicViewportHeight()) {
+    return;
+  }
+
+  const viewportHeight = useCssVar(
+    CSS_VARIABLE_LAYOUT_VIEWPORT_HEIGHT,
+    document.documentElement,
+    { observe: false },
+  );
+
+  let frameId = 0;
+
+  function applyViewportHeight() {
+    viewportHeight.value = `${readViewportHeight()}px`;
+  }
+
+  function scheduleApplyViewportHeight() {
+    if (frameId) {
+      return;
+    }
+
+    frameId = window.requestAnimationFrame(() => {
+      frameId = 0;
+      applyViewportHeight();
+    });
+  }
+
+  applyViewportHeight();
+  onMounted(applyViewportHeight);
+  useEventListener(window, 'resize', scheduleApplyViewportHeight);
+
+  if (window.visualViewport) {
+    useEventListener(
+      window.visualViewport,
+      'resize',
+      scheduleApplyViewportHeight,
+    );
+  }
+
+  onUnmounted(() => {
+    if (!frameId) {
+      return;
+    }
+
+    window.cancelAnimationFrame(frameId);
+    frameId = 0;
+  });
+}

package/src/composables/use-namespace.ts

@@ -0,0 +1,106 @@
+import { DEFAULT_NAMESPACE } from '@melt-js/libs-vben/shared/constants';
+
+/**
+ * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
+ */
+
+const statePrefix = 'is-';
+
+const _bem = (
+  namespace: string,
+  block: string,
+  blockSuffix: string,
+  element: string,
+  modifier: string,
+) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+
+const is: {
+  (name: string): string;
+  // oxlint-disable-next-line typescript/unified-signatures
+  (name: string, state: boolean | undefined): string;
+} = (name: string, ...args: [] | [boolean | undefined]) => {
+  const state = args.length > 0 ? args[0] : true;
+  return name && state ? `${statePrefix}${name}` : '';
+};
+
+const useNamespace = (block: string) => {
+  const namespace = DEFAULT_NAMESPACE;
+  const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', '');
+  const e = (element?: string) =>
+    element ? _bem(namespace, block, '', element, '') : '';
+  const m = (modifier?: string) =>
+    modifier ? _bem(namespace, block, '', '', modifier) : '';
+  const be = (blockSuffix?: string, element?: string) =>
+    blockSuffix && element
+      ? _bem(namespace, block, blockSuffix, element, '')
+      : '';
+  const em = (element?: string, modifier?: string) =>
+    element && modifier ? _bem(namespace, block, '', element, modifier) : '';
+  const bm = (blockSuffix?: string, modifier?: string) =>
+    blockSuffix && modifier
+      ? _bem(namespace, block, blockSuffix, '', modifier)
+      : '';
+  const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace, block, blockSuffix, element, modifier)
+      : '';
+
+  // for css var
+  // --el-xxx: value;
+  const cssVar = (object: Record<string, string>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+  // with block
+  const cssVarBlock = (object: Record<string, string>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace}-${block}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+
+  const cssVarName = (name: string) => `--${namespace}-${name}`;
+  const cssVarBlockName = (name: string) => `--${namespace}-${block}-${name}`;
+
+  return {
+    b,
+    be,
+    bem,
+    bm,
+    // css
+    cssVar,
+    cssVarBlock,
+    cssVarBlockName,
+    cssVarName,
+    e,
+    em,
+    is,
+    m,
+    namespace,
+  };
+};
+
+type UseNamespaceReturn = ReturnType<typeof useNamespace>;
+
+export type { UseNamespaceReturn };
+export { useNamespace };

package/src/composables/use-priority-value.ts

@@ -0,0 +1,96 @@
+import type { ComputedRef, Ref } from 'vue';
+
+import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
+
+import {
+  getFirstNonNullOrUndefined,
+  kebabToCamelCase,
+} from '@melt-js/libs-vben/shared/utils';
+
+/**
+ * 依次从插槽、attrs、props、state 中获取值
+ * @param key
+ * @param props
+ * @param state
+ */
+export function usePriorityValue<
+  T extends Record<string, any>,
+  S extends Record<string, any>,
+  K extends keyof T = keyof T,
+>(key: K, props: T, state: Readonly<Ref<NoInfer<S>>> | undefined) {
+  const instance = getCurrentInstance();
+  const slots = useSlots();
+  const attrs = useAttrs() as T;
+
+  const value = computed((): T[K] => {
+    // props不管有没有传，都会有默认值，会影响这里的顺序，
+    // 通过判断原始props是否有值来判断是否传入
+    const rawProps = (instance?.vnode?.props || {}) as T;
+
+    const standardRawProps = {} as T;
+
+    for (const [key, value] of Object.entries(rawProps)) {
+      standardRawProps[kebabToCamelCase(key) as K] = value;
+    }
+    const propsKey =
+      standardRawProps?.[key] === undefined ? undefined : props[key];
+
+    // slot可以关闭
+    return getFirstNonNullOrUndefined(
+      slots[key as string],
+      attrs[key],
+      propsKey,
+      state?.value?.[key as keyof S],
+    ) as T[K];
+  });
+
+  return value;
+}
+
+/**
+ * 批量获取state中的值（每个值都是ref）
+ * @param props
+ * @param state
+ */
+export function usePriorityValues<
+  T extends Record<string, any>,
+  // S 是已发布的公共 API 契约：调用方以 usePriorityValues<Props, StateRef>(…)
+  // 显式传参指定 state 的 Ref 类型；默认值依赖 T 推断（NoInfer<T>），
+  // 规则只看签名内出现次数、不评估跨包调用方，不能据此删除。
+  // oxlint-disable-next-line typescript/no-unnecessary-type-parameters
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const result: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    result[key] = usePriorityValue(key, props, state);
+  });
+
+  return result;
+}
+
+/**
+ * 批量获取state中的值（集中在一个computed，用于透传）
+ * @param props
+ * @param state
+ */
+export function useForwardPriorityValues<
+  T extends Record<string, any>,
+  // 同 usePriorityValues：两个类型实参的调用形态是已发布契约，保留 S。
+  // oxlint-disable-next-line typescript/no-unnecessary-type-parameters
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const computedResult: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    computedResult[key] = usePriorityValue(key, props, state);
+  });
+
+  return computed(() => {
+    const unwrapResult: Record<string, any> = {};
+    Object.keys(props).forEach((key) => {
+      unwrapResult[key] = unref(computedResult[key]);
+    });
+    return unwrapResult as { [K in keyof T]: T[K] };
+  });
+}

package/src/composables/use-scroll-lock.ts

@@ -0,0 +1,151 @@
+import { computed, effectScope, nextTick, shallowRef } from 'vue';
+
+import {
+  getLayoutScrollElement,
+  getScrollbarWidth,
+  needsScrollbar,
+} from '@melt-js/libs-vben/shared/utils';
+
+import {
+  useScrollLock as _useScrollLock,
+  tryOnBeforeUnmount,
+  tryOnMounted,
+} from '@vueuse/core';
+
+export const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
+
+interface ScrollLockOptions {
+  immediate?: boolean;
+}
+
+let lockCount = 0;
+let releaseLock: (() => void) | undefined;
+const pendingTransitionRestores = new WeakMap<
+  HTMLElement,
+  { frame: number; restore: () => void }
+>();
+
+function getScrollLockTarget() {
+  return getLayoutScrollElement() ?? document.body;
+}
+
+function captureStyle(element: HTMLElement, property: string) {
+  const value = element.style.getPropertyValue(property);
+  const priority = element.style.getPropertyPriority(property);
+  return () => {
+    if (value) {
+      element.style.setProperty(property, value, priority);
+    } else {
+      element.style.removeProperty(property);
+    }
+  };
+}
+
+function disableTransition(node: HTMLElement) {
+  const pending = pendingTransitionRestores.get(node);
+  if (pending) {
+    cancelAnimationFrame(pending.frame);
+    pendingTransitionRestores.delete(node);
+  }
+  // Reuse the original style when a new lock starts before the restore frame.
+  const restore = pending?.restore ?? captureStyle(node, 'transition');
+  node.style.transition = 'none';
+
+  return () => {
+    const frame = requestAnimationFrame(() => {
+      pendingTransitionRestores.delete(node);
+      restore();
+    });
+    pendingTransitionRestores.set(node, { frame, restore });
+  };
+}
+
+function applyScrollbarStyles(target: HTMLElement): (() => void)[] {
+  if (!needsScrollbar(target)) {
+    return [];
+  }
+
+  if (target !== document.body) {
+    const restore = captureStyle(target, 'scrollbar-gutter');
+    target.style.setProperty('scrollbar-gutter', 'stable');
+    return [restore];
+  }
+
+  if (!needsScrollbar()) {
+    return [];
+  }
+
+  const width = `${getScrollbarWidth()}px`;
+  const restore = [captureStyle(target, 'padding-right')];
+  target.style.paddingRight = width;
+  document
+    .querySelectorAll<HTMLElement>(`.${SCROLL_FIXED_CLASS}`)
+    .forEach((node) => {
+      restore.push(
+        captureStyle(node, 'padding-right'),
+        disableTransition(node),
+      );
+      node.style.paddingRight = width;
+    });
+
+  return restore;
+}
+
+function acquireLock(target: HTMLElement) {
+  const restore = applyScrollbarStyles(target);
+
+  // Detach so one overlay's unmount cannot release the shared lock.
+  const scope = effectScope(true);
+  scope.run(() => {
+    const locked = _useScrollLock(target);
+    locked.value = true;
+  });
+  return () => {
+    scope.stop();
+    restore.forEach((reset) => reset());
+  };
+}
+
+export function useScrollLock(options: ScrollLockOptions = {}) {
+  const { immediate = true } = options;
+  const ownsLock = shallowRef(false);
+  let disposed = false;
+
+  const isLocked = computed({
+    get: () => ownsLock.value,
+    set(value: boolean) {
+      // Count each caller once; ignore repeated assignments and unused unlocks.
+      if (value === ownsLock.value) {
+        return;
+      }
+      if (value) {
+        releaseLock ??= acquireLock(getScrollLockTarget());
+        lockCount += 1;
+      } else if (--lockCount === 0) {
+        releaseLock?.();
+        releaseLock = undefined;
+      }
+      ownsLock.value = value;
+    },
+  });
+
+  tryOnMounted(async () => {
+    // Wait for mounted hooks and their DOM updates before measuring overflow.
+    await nextTick();
+    if (disposed) {
+      return;
+    }
+    const target = getScrollLockTarget();
+    // Join an existing lock even when overflow: hidden makes needsScrollbar false.
+    if (immediate && (lockCount > 0 || needsScrollbar(target))) {
+      isLocked.value = true;
+    }
+  });
+
+  tryOnBeforeUnmount(() => {
+    disposed = true;
+    isLocked.value = false;
+  });
+
+  return isLocked;
+}

package/src/composables/use-simple-locale/README.md

@@ -0,0 +1,3 @@
+# Simple i18n
+
+Simple i18 implementation

package/src/composables/use-simple-locale/index.ts

@@ -0,0 +1,27 @@
+import type { Locale } from './messages';
+
+import { computed, ref } from 'vue';
+
+import { createSharedComposable } from '@vueuse/core';
+
+import { getMessages } from './messages';
+
+export const useSimpleLocale = createSharedComposable(() => {
+  const currentLocale = ref<Locale>('zh-CN');
+
+  const setSimpleLocale = (locale: Locale) => {
+    currentLocale.value = locale;
+  };
+
+  const $t = computed(() => {
+    const localeMessages = getMessages(currentLocale.value);
+    return (key: string) => {
+      return localeMessages[key] || key;
+    };
+  });
+  return {
+    $t,
+    currentLocale,
+    setSimpleLocale,
+  };
+});

package/src/composables/use-simple-locale/messages.ts

@@ -0,0 +1,31 @@
+import type { SupportedLanguagesType } from '@melt-js/libs-vben/typings';
+
+export type Locale = SupportedLanguagesType;
+
+export const messages: Partial<Record<Locale, Record<string, string>>> = {
+  'en-US': {
+    cancel: 'Cancel',
+    collapse: 'Collapse',
+    confirm: 'Confirm',
+    expand: 'Expand',
+    prompt: 'Prompt',
+    reset: 'Reset',
+    submit: 'Submit',
+    toggleSidebar: 'Toggle sidebar',
+    confirmTitle: 'Please Confirm',
+  },
+  'zh-CN': {
+    cancel: '取消',
+    collapse: '收起',
+    confirm: '确认',
+    expand: '展开',
+    prompt: '提示',
+    reset: '重置',
+    submit: '提交',
+    toggleSidebar: '切换侧边栏',
+    confirmTitle: '请确认',
+  },
+};
+
+export const getMessages = (locale: Locale) =>
+  messages[locale] ?? messages['en-US'] ?? {};

package/src/composables/use-sortable.ts

@@ -0,0 +1,32 @@
+import type { SortableOptions } from 'sortablejs';
+import type Sortable from 'sortablejs';
+
+// 泛型参数是已发布的公共 API 契约（调用方以 useSortable<HTMLUListElement>(el)
+// 显式指定容器元素类型），规则只看签名内出现次数，不能据此删除。
+// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
+function useSortable<T extends HTMLElement>(
+  sortableContainer: T,
+  options: SortableOptions = {},
+) {
+  const initializeSortable = async () => {
+    const Sortable = await import(
+      // @ts-expect-error - This is a dynamic import
+      'sortablejs/modular/sortable.complete.esm.js'
+    );
+    const sortable = Sortable?.default?.create?.(sortableContainer, {
+      animation: 300,
+      delay: 400,
+      delayOnTouchOnly: true,
+      ...options,
+    });
+    return sortable as Sortable;
+  };
+
+  return {
+    initializeSortable,
+  };
+}
+
+export { useSortable };
+
+export type { Sortable };

package/src/constants/core.ts

@@ -0,0 +1,76 @@
+import type { SupportedLanguagesType } from '@melt-js/libs-vben/typings';
+
+/**
+ * @zh_CN 登录页面 url 地址
+ */
+export const LOGIN_PATH = '/auth/login';
+
+/**
+ * 语言选项；value 默认为 string 以支持运行时注册自定义语言（见 setSupportLanguages）
+ */
+export interface LanguageOption<TValue extends string = string> {
+  label: string;
+  value: TValue;
+}
+
+/**
+ * 支持的语言（默认值，可在运行时通过 setSupportLanguages 覆盖）。
+ * value 约束到 SupportedLanguagesType，应用通过模块增强扩展语言后，
+ * 默认列表同样接受新语言，拼写错误会在编译期报错
+ */
+export const SUPPORT_LANGUAGES: LanguageOption<SupportedLanguagesType>[] = [
+  {
+    label: '简体中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+  },
+];
+
+// --- 动态语言列表管理 ---
+type LanguageListListener = (languages: LanguageOption[]) => void;
+
+// 深拷贝语言列表，外部拿到的永远是独立快照，
+// 避免绕过 setSupportLanguages 直接修改注册表内部状态
+function cloneLanguages(languages: LanguageOption[]): LanguageOption[] {
+  return languages.map((language) => ({ ...language }));
+}
+
+let currentLanguages: LanguageOption[] = cloneLanguages(SUPPORT_LANGUAGES);
+const listeners: LanguageListListener[] = [];
+
+/**
+ * 获取当前动态语言列表
+ */
+export function getSupportLanguages(): LanguageOption[] {
+  return cloneLanguages(currentLanguages);
+}
+
+/**
+ * 更新语言列表并通知所有监听器
+ */
+export function setSupportLanguages(languages: LanguageOption[]) {
+  // 先固化本次快照，即使监听器回调中嵌套调用 setSupportLanguages，
+  // 后续监听器收到的仍是本次更新的列表
+  const nextLanguages = cloneLanguages(languages);
+  currentLanguages = nextLanguages;
+  // 迭代监听器快照，避免监听器在回调中取消订阅导致跳过后续监听器
+  for (const listener of [...listeners]) {
+    listener(cloneLanguages(nextLanguages));
+  }
+}
+
+/**
+ * 订阅语言列表变化，返回取消订阅函数
+ */
+export function onSupportLanguagesChange(listener: LanguageListListener) {
+  listeners.push(listener);
+  // 订阅时立即回调当前值，便于消费方初始化
+  listener(cloneLanguages(currentLanguages));
+  return () => {
+    const index = listeners.indexOf(listener);
+    if (index !== -1) listeners.splice(index, 1);
+  };
+}

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './core';
+export * from '@melt-js/libs-vben/shared/constants';

package/src/core-icons/create-icon.ts

@@ -0,0 +1,14 @@
+import { defineComponent, h } from 'vue';
+
+import { Icon } from '@iconify/vue';
+
+function createIconifyIcon(icon: string) {
+  return defineComponent({
+    name: `Icon-${icon}`,
+    setup(props, { attrs }) {
+      return () => h(Icon, { icon, ...props, ...attrs });
+    },
+  });
+}
+
+export { createIconifyIcon };

package/src/core-icons/index.ts

@@ -0,0 +1,11 @@
+export * from './create-icon';
+
+export * from './lucide';
+
+export type { IconifyIcon as IconifyIconStructure } from '@iconify/vue';
+export {
+  addCollection,
+  addIcon,
+  Icon as IconifyIcon,
+  listIcons,
+} from '@iconify/vue';