@gcsa/console-vue 0.1.0

package/src/loading/service.ts

@@ -0,0 +1,216 @@
+import { createApp, nextTick, ref, type AppContext, type Ref } from 'vue';
+import GcsaLoadingMask from '../components/GcsaLoadingMask.vue';
+
+export type GcsaLoadingOptions = {
+  target?: HTMLElement | string;
+  body?: boolean;
+  fullscreen?: boolean;
+  lock?: boolean;
+  text?: string;
+  background?: string;
+  customClass?: string;
+  visible?: boolean;
+  closed?: () => void;
+};
+
+export type GcsaLoadingInstance = {
+  visible: Ref<boolean>;
+  text: Ref<string>;
+  $el: HTMLElement;
+  setText: (text: string) => void;
+  close: () => void;
+};
+
+let fullscreenInstance: GcsaLoadingInstance | undefined;
+
+function readOverlayLoadingZIndex(): number {
+  if (typeof document === 'undefined') return 3200;
+  const candidates = [
+    getComputedStyle(document.documentElement).getPropertyValue('--gcsa-z-loading').trim(),
+    getComputedStyle(document.documentElement).getPropertyValue('--z-overlay-loading').trim(),
+    getComputedStyle(document.documentElement).getPropertyValue('--gcsa-z-toast').trim()
+  ];
+  for (const value of candidates) {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed)) {
+      // Keep fullscreen loading above toast when falling back to toast token.
+      return value === candidates[2] ? parsed + 200 : parsed;
+    }
+  }
+  return 3200;
+}
+
+function resolveTarget(options: GcsaLoadingOptions) {
+  let target: HTMLElement;
+  if (typeof options.target === 'string') {
+    target = (document.querySelector(options.target) as HTMLElement) || document.body;
+  } else {
+    target = options.target || document.body;
+  }
+
+  const fullscreen = target === document.body && (options.fullscreen ?? true);
+  const parent = target === document.body || options.body ? document.body : target;
+
+  return { target, parent, fullscreen };
+}
+
+function addParentClass(parent: HTMLElement, lock: boolean, fullscreen: boolean) {
+  parent.classList.add('gcsa-loading-parent--relative');
+  // 区域 Loading 始终裁剪，避免旋转环/文案溢出圆角容器
+  if (lock || !fullscreen) {
+    parent.classList.add('gcsa-loading-parent--hidden');
+  }
+
+  const count = Number.parseInt(parent.getAttribute('data-gcsa-loading-number') || '0', 10) + 1;
+  parent.setAttribute('data-gcsa-loading-number', String(count));
+}
+
+function removeParentClass(parent: HTMLElement) {
+  const count = Number.parseInt(parent.getAttribute('data-gcsa-loading-number') || '1', 10) - 1;
+  if (count <= 0) {
+    parent.removeAttribute('data-gcsa-loading-number');
+    parent.classList.remove('gcsa-loading-parent--relative');
+    parent.classList.remove('gcsa-loading-parent--hidden');
+  } else {
+    parent.setAttribute('data-gcsa-loading-number', String(count));
+  }
+}
+
+async function positionMask(
+  hostEl: HTMLElement,
+  options: GcsaLoadingOptions & { fullscreen?: boolean },
+  parent: HTMLElement,
+  target: HTMLElement
+) {
+  if (options.fullscreen) {
+    hostEl.style.position = 'fixed';
+    hostEl.style.inset = '0';
+    hostEl.style.zIndex = String(readOverlayLoadingZIndex());
+    return;
+  }
+
+  if (parent === document.body && target !== document.body) {
+    await nextTick();
+    const rect = target.getBoundingClientRect();
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+    hostEl.style.position = 'absolute';
+    hostEl.style.top = `${rect.top + scrollTop}px`;
+    hostEl.style.left = `${rect.left + scrollLeft}px`;
+    hostEl.style.width = `${rect.width}px`;
+    hostEl.style.height = `${rect.height}px`;
+    hostEl.style.zIndex = String(readOverlayLoadingZIndex());
+    return;
+  }
+
+  hostEl.style.position = 'absolute';
+  hostEl.style.inset = '0';
+  hostEl.style.zIndex = String(readOverlayLoadingZIndex());
+}
+
+type ResolvedOptions = GcsaLoadingOptions & {
+  parent: HTMLElement;
+  target: HTMLElement;
+  fullscreen: boolean;
+};
+
+function createLoadingComponent(options: ResolvedOptions, appContext?: AppContext): GcsaLoadingInstance {
+  const visible = ref(false);
+  const text = ref(options.text || '');
+  const mountNode = document.createElement('div');
+
+  const app = createApp(GcsaLoadingMask, {
+    text,
+    visible,
+    background: options.background,
+    customClass: options.customClass,
+    fullscreen: options.fullscreen
+  });
+
+  if (appContext) {
+    Object.assign(app._context, appContext);
+  }
+
+  app.mount(mountNode);
+  mountNode.classList.add('gcsa-loading-host');
+
+  const instance: GcsaLoadingInstance = {
+    visible,
+    text,
+    get $el() {
+      return mountNode;
+    },
+    setText(value: string) {
+      text.value = value;
+    },
+    close() {
+      visible.value = false;
+      window.setTimeout(() => {
+        app.unmount();
+        mountNode.remove();
+        removeParentClass(options.parent);
+        options.closed?.();
+      }, 260);
+    }
+  };
+
+  return instance;
+}
+
+function LoadingService(options: GcsaLoadingOptions = {}, context?: AppContext): GcsaLoadingInstance | undefined {
+  if (typeof window === 'undefined') return undefined;
+
+  const { target, parent, fullscreen } = resolveTarget(options);
+  const resolved: ResolvedOptions = {
+    ...options,
+    target,
+    parent,
+    fullscreen,
+    lock: options.lock ?? false,
+    visible: options.visible ?? true
+  };
+
+  if (fullscreen && fullscreenInstance) {
+    return fullscreenInstance;
+  }
+
+  const instance = createLoadingComponent(resolved, context);
+  addParentClass(parent, resolved.lock ?? false, fullscreen);
+  if (resolved.fullscreen) {
+    instance.$el.classList.add('gcsa-loading-host--fullscreen');
+  }
+  parent.appendChild(instance.$el);
+  void positionMask(instance.$el, resolved, parent, target);
+
+  nextTick(() => {
+    instance.visible.value = true;
+  });
+
+  const originalClose = instance.close.bind(instance);
+  instance.close = () => {
+    originalClose();
+    if (fullscreen) {
+      fullscreenInstance = undefined;
+    }
+  };
+
+  if (fullscreen) {
+    fullscreenInstance = instance;
+  }
+
+  return instance;
+}
+
+LoadingService._context = null as AppContext | null;
+
+export const GcsaLoading = {
+  service: LoadingService,
+  get _context() {
+    return LoadingService._context;
+  },
+  set _context(value: AppContext | null) {
+    LoadingService._context = value;
+  }
+};
+
+export default LoadingService;

package/src/resolver.ts

@@ -0,0 +1,22 @@
+/**
+ * unplugin-vue-components 按需解析器
+ *
+ * @example
+ * import Components from 'unplugin-vue-components/vite';
+ * import { GcsaConsoleResolver } from '@gcsa/console-vue/resolver';
+ *
+ * Components({ resolvers: [GcsaConsoleResolver()] })
+ */
+export function GcsaConsoleResolver() {
+  return {
+    type: 'component' as const,
+    resolve(name: string) {
+      if (name.startsWith('Gcsa') || name.startsWith('Console')) {
+        return {
+          name: 'default',
+          from: `@gcsa/console-vue/components/${name}`
+        };
+      }
+    }
+  };
+}

package/src/tanstack-table.d.ts

@@ -0,0 +1,7 @@
+import '@tanstack/vue-table';
+
+declare module '@tanstack/vue-table' {
+  interface ColumnMeta<TData, TValue> {
+    width?: string;
+  }
+}