@gcsa/console-vue 0.1.0

package/src/composables/usePreserveScrollOnFocus.ts

@@ -0,0 +1,153 @@
+import { onUnmounted, watch, type Ref } from 'vue';
+
+const POPUP_INTERACTION_SELECTOR =
+  '.gcsa-select-content, .gcsa-select-positioner, .gcsa-autocomplete__panel';
+
+export const GCSA_PRESERVE_SCROLL_EVENT = 'gcsa-preserve-scroll';
+
+function collectScrollTops(start: HTMLElement | null): Map<Element, number> {
+  const saved = new Map<Element, number>();
+  let el = start;
+  while (el) {
+    const { overflowY } = getComputedStyle(el);
+    if (
+      (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay')
+      && el.scrollHeight > el.clientHeight
+    ) {
+      saved.set(el, el.scrollTop);
+    }
+    el = el.parentElement;
+  }
+  return saved;
+}
+
+function restoreScrollTops(saved: Map<Element, number>) {
+  saved.forEach((top, el) => {
+    if (el instanceof HTMLElement) el.scrollTop = top;
+  });
+}
+
+const patchedElements = new WeakSet<HTMLElement>();
+
+function patchFocusPreventScroll(element: HTMLElement) {
+  if (patchedElements.has(element)) return;
+  if (!('focus' in element) || typeof element.focus !== 'function') return;
+  patchedElements.add(element);
+  const nativeFocus = element.focus.bind(element);
+  element.focus = (options?: FocusOptions) => nativeFocus({ ...options, preventScroll: true });
+}
+
+function scheduleScrollRestore(saved: Map<Element, number>) {
+  restoreScrollTops(saved);
+  requestAnimationFrame(() => {
+    restoreScrollTops(saved);
+    requestAnimationFrame(() => restoreScrollTops(saved));
+  });
+  window.setTimeout(() => restoreScrollTops(saved), 0);
+}
+
+function setupPreserveScrollOnFocus(root: HTMLElement) {
+  let savedScroll = collectScrollTops(root);
+  let lockedScroll: Map<Element, number> | null = null;
+  let lockUntil = 0;
+
+  const lockScroll = () => {
+    lockedScroll = collectScrollTops(root);
+    savedScroll = lockedScroll;
+    lockUntil = performance.now() + 480;
+  };
+
+  const saveScroll = () => {
+    if (lockedScroll && performance.now() < lockUntil) return;
+    savedScroll = collectScrollTops(root);
+  };
+
+  const restoreScroll = () => {
+    scheduleScrollRestore(lockedScroll ?? savedScroll);
+  };
+
+  const enforceLockedScroll = () => {
+    if (!lockedScroll || performance.now() >= lockUntil) return;
+    const lockedTop = lockedScroll.get(root);
+    if (lockedTop == null) return;
+    if (Math.abs(root.scrollTop - lockedTop) > 1) {
+      root.scrollTop = lockedTop;
+    }
+  };
+
+  const patchFocusables = () => {
+    root.querySelectorAll('input, textarea, select, button').forEach(el => {
+      if (el instanceof HTMLElement) patchFocusPreventScroll(el);
+    });
+  };
+
+  const onScroll = () => {
+    if (lockedScroll && performance.now() < lockUntil) {
+      enforceLockedScroll();
+      return;
+    }
+    saveScroll();
+  };
+  const onPressStart = () => lockScroll();
+  const onFocusIn = (event: FocusEvent) => {
+    if (!(event.target instanceof Node) || !root.contains(event.target)) return;
+    restoreScroll();
+  };
+  const onDocPointerDown = (event: PointerEvent) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (root.contains(target)) {
+      lockScroll();
+      return;
+    }
+    if (target instanceof Element && target.closest(POPUP_INTERACTION_SELECTOR)) {
+      lockScroll();
+    }
+  };
+  const onPreserveEvent = () => restoreScroll();
+
+  patchFocusables();
+  const observer = new MutationObserver(() => patchFocusables());
+
+  root.addEventListener('scroll', onScroll, { passive: true });
+  root.addEventListener('pointerdown', onPressStart, true);
+  root.addEventListener('mousedown', onPressStart, true);
+  root.addEventListener('focusin', onFocusIn);
+  root.addEventListener(GCSA_PRESERVE_SCROLL_EVENT, onPreserveEvent);
+  document.addEventListener('pointerdown', onDocPointerDown, true);
+  observer.observe(root, { childList: true, subtree: true });
+
+  return () => {
+    root.removeEventListener('scroll', onScroll);
+    root.removeEventListener('pointerdown', onPressStart, true);
+    root.removeEventListener('mousedown', onPressStart, true);
+    root.removeEventListener('focusin', onFocusIn);
+    root.removeEventListener(GCSA_PRESERVE_SCROLL_EVENT, onPreserveEvent);
+    document.removeEventListener('pointerdown', onDocPointerDown, true);
+    observer.disconnect();
+  };
+}
+
+/** Drawer/Modal 内容区：pointer / focus 后恢复滚动。`active` 须与 Drawer open 同步。 */
+export function usePreserveScrollOnFocus(
+  rootRef: Ref<HTMLElement | null | undefined>,
+  active: Ref<boolean> | boolean = true,
+) {
+  let cleanup: (() => void) | undefined;
+
+  const stop = watch(
+    [() => rootRef.value, () => (typeof active === 'boolean' ? active : active.value)],
+    ([root, isActive]) => {
+      cleanup?.();
+      cleanup = undefined;
+      if (!isActive || !root) return;
+      cleanup = setupPreserveScrollOnFocus(root);
+    },
+    { flush: 'post', immediate: true },
+  );
+
+  onUnmounted(() => {
+    stop();
+    cleanup?.();
+  });
+}

package/src/icons/iconNames.ts

@@ -0,0 +1,27 @@
+/** 导航侧栏图标 — 与 @gcsa/console-core GcsaNavItem.iconKey 对齐 */
+export const GCSA_NAV_ICON_NAMES = [
+  'dashboard',
+  'alert',
+  'assets',
+  'settings',
+  'users',
+  'chat'
+] as const;
+
+/** 组件内部 UI 图标（文件名 kebab-case → 注册为 camelCase key） */
+export const GCSA_UI_ICON_NAMES = [
+  'chevronDown',
+  'chevronUp',
+  'chevronLeft',
+  'chevronRight',
+  'check',
+  'close',
+  'menu',
+  'plus',
+  'resultEmpty'
+] as const;
+
+export const GCSA_ICON_NAMES = [...GCSA_NAV_ICON_NAMES, ...GCSA_UI_ICON_NAMES] as const;
+
+export type GcsaNavIconName = (typeof GCSA_NAV_ICON_NAMES)[number];
+export type GcsaIconName = (typeof GCSA_ICON_NAMES)[number];

package/src/icons/index.ts

@@ -0,0 +1,8 @@
+export {
+  GCSA_ICON_NAMES,
+  GCSA_NAV_ICON_NAMES,
+  GCSA_UI_ICON_NAMES,
+  type GcsaIconName,
+  type GcsaNavIconName
+} from './iconNames';
+export { GcsaIcons, getGcsaIconSvg } from './registry';

package/src/icons/registry.ts

@@ -0,0 +1,43 @@
+import {
+  GCSA_ICON_NAMES,
+  type GcsaIconName
+} from './iconNames';
+// 显式导入：避免 dev 下 glob 缓存未收录新 SVG 时模块加载即抛错白屏
+import chevronLeftSvg from './svg/chevron-left.svg?raw';
+import menuSvg from './svg/menu.svg?raw';
+
+const svgModules = import.meta.glob('./svg/*.svg', {
+  query: '?raw',
+  import: 'default',
+  eager: true
+}) as Record<string, string>;
+
+function fileStem(path: string): string {
+  const file = path.slice(path.lastIndexOf('/') + 1);
+  return file.replace(/\.svg$/, '');
+}
+
+/** kebab-case 文件名 → camelCase 注册 key（chevron-down → chevronDown） */
+function toIconKey(stem: string): string {
+  return stem.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase());
+}
+
+const registry = {
+  ...Object.fromEntries(
+    Object.entries(svgModules).map(([path, svg]) => [toIconKey(fileStem(path)), svg])
+  ),
+  menu: menuSvg,
+  chevronLeft: chevronLeftSvg
+} as Record<GcsaIconName, string>;
+
+for (const name of GCSA_ICON_NAMES) {
+  if (!registry[name]) {
+    throw new Error(`[gcsa-icons] missing svg file for icon "${name}"`);
+  }
+}
+
+export const GcsaIcons = registry;
+
+export function getGcsaIconSvg(name: GcsaIconName): string {
+  return GcsaIcons[name];
+}

package/src/icons/svg/alert.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 17.1429 17.1429" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M8.57108 2.06954C8.8166 2.06954 9.05831 2.13268 9.27225 2.25313C9.48607 2.37358 9.66548 2.54721 9.79276 2.75704L15.8426 12.8566C15.9673 13.0727 16.0333 13.3181 16.034 13.5676C16.0346 13.8169 15.9699 14.0619 15.8465 14.2785C15.7229 14.4952 15.5449 14.6764 15.3299 14.8029C15.1149 14.9294 14.8703 14.9975 14.6209 15.0002H2.52127C2.27191 14.9975 2.02724 14.9294 1.81229 14.8029C1.5973 14.6764 1.41921 14.4952 1.29569 14.2785C1.17227 14.0619 1.10753 13.8169 1.10819 13.5676C1.10888 13.3181 1.17486 13.0727 1.29959 12.8566L7.3494 2.75704C7.47668 2.54721 7.65608 2.37358 7.86991 2.25313C8.08385 2.13268 8.32555 2.06954 8.57108 2.06954ZM7.75076 11.094V12.5227H9.17948V11.094H7.75076ZM7.75076 6.09395V9.66524H9.17948V6.09395H7.75076Z" fill="currentColor" />
+  <path d="M8.57129 12.1428H8.57772" stroke="currentColor" stroke-width="1.42857" />
+</svg>

package/src/icons/svg/assets.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M5 6.42853L13.1357 3.31417C13.1812 3.30135 13.2289 3.29788 13.2757 3.30397C13.3226 3.31007 13.3678 3.3256 13.4085 3.34963C13.4492 3.37366 13.4847 3.40569 13.5127 3.44379C13.5407 3.4819 13.5607 3.52527 13.5714 3.57131L14.6429 6.07139" stroke="currentColor" stroke-width="1.42857" stroke-linecap="square" stroke-linejoin="round" />
+  <path d="M15.3102 5.71431C15.6065 5.71443 15.8907 5.83136 16.1003 6.03951C16.3099 6.24788 16.4274 6.53096 16.4274 6.82564V8.57174H12.1423C11.7481 8.57198 11.4286 8.89148 11.4284 9.2856V12.143C11.4285 12.4881 11.6733 12.7766 11.9987 12.8432L12.1423 12.8579H16.4274V14.603C16.4274 14.8977 16.3099 15.1807 16.1003 15.3891C15.8907 15.5973 15.6065 15.7142 15.3102 15.7143H4.68913C4.39265 15.7143 4.10777 15.5974 3.89811 15.3891C3.68844 15.1807 3.57096 14.8977 3.57096 14.603V6.82564C3.57096 6.53096 3.68844 6.24788 3.89811 6.03951C4.10776 5.83124 4.39269 5.71431 4.68913 5.71431H15.3102ZM16.4274 11.4292H12.8571V10.0004H16.4274V11.4292Z" fill="currentColor" />
+</svg>

package/src/icons/svg/chat.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+</svg>

package/src/icons/svg/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M20 6 9 17l-5-5" />
+</svg>

package/src/icons/svg/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="m6 9 6 6 6-6" />
+</svg>

package/src/icons/svg/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="m15 18-6-6 6-6" />
+</svg>

package/src/icons/svg/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="m9 18 6-6-6-6" />
+</svg>

package/src/icons/svg/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="m18 15-6-6-6 6" />
+</svg>

package/src/icons/svg/close.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>

package/src/icons/svg/dashboard.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M9.99984 2.85712C13.9448 2.85712 17.1427 6.05498 17.1427 9.99998C17.1427 13.945 13.9448 17.1428 9.99984 17.1428C6.05484 17.1428 2.85699 13.945 2.85699 9.99998C2.85699 6.05498 6.05484 2.85712 9.99984 2.85712ZM9.99984 4.99998C9.02451 4.9999 8.07045 5.28508 7.25516 5.8204C6.43986 6.35571 5.79893 7.11779 5.4113 8.01278C5.02367 8.90778 4.90625 9.8966 5.07352 10.8575C5.24079 11.8184 5.68544 12.7093 6.3527 13.4207L6.46413 13.535L7.47413 12.525C6.91785 11.9691 6.5606 11.2452 6.45781 10.4655C6.35502 9.68585 6.51243 8.89406 6.90563 8.213C7.29883 7.53195 7.90582 6.99971 8.63242 6.69889C9.35902 6.39806 10.1646 6.34547 10.9241 6.54927L12.0413 5.43498C11.3991 5.14749 10.7034 4.99923 9.99984 4.99998ZM14.5656 7.95927L13.4506 9.07498C13.6122 9.68067 13.6118 10.3182 13.4495 10.9237C13.2871 11.5292 12.9685 12.0814 12.5256 12.525L13.5356 13.5357C14.0005 13.0719 14.3693 12.5207 14.6206 11.914C14.8719 11.3072 15.0008 10.6567 14.9998 9.99998C15.0007 9.29671 14.8527 8.60123 14.5656 7.95927ZM13.0298 5.95927L10.3691 8.61998C10.1575 8.5638 9.93584 8.55693 9.72116 8.5999C9.50647 8.64288 9.30452 8.73455 9.13084 8.86786C8.95716 9.00117 8.8164 9.17256 8.71939 9.36884C8.62237 9.56512 8.5717 9.78104 8.57127 9.99998C8.57126 10.2033 8.61466 10.4043 8.69857 10.5895C8.78247 10.7747 8.90495 10.9399 9.05781 11.074C9.21067 11.2081 9.3904 11.308 9.58497 11.367C9.77954 11.4261 9.98448 11.4429 10.1861 11.4164C10.3877 11.3899 10.5813 11.3207 10.754 11.2133C10.9267 11.106 11.0745 10.963 11.1875 10.794C11.3005 10.6249 11.3761 10.4337 11.4093 10.2331C11.4424 10.0325 11.4324 9.82712 11.3798 9.63069L14.0406 6.96927L13.0306 5.95927H13.0298Z" fill="currentColor" />
+</svg>

package/src/icons/svg/menu.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M2.66667 4H13.3333M2.66667 8H13.3333M2.66667 12H13.3333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" />
+</svg>

package/src/icons/svg/plus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0 11.5C0 10.6716 0.671573 10 1.5 10H21.5C22.3284 10 23 10.6716 23 11.5C23 12.3284 22.3284 13 21.5 13H1.5C0.671573 13 0 12.3284 0 11.5Z" fill="currentColor"/><path d="M11.5 0C12.3284 0 13 0.671574 13 1.5V21.5C13 22.3284 12.3284 23 11.5 23C10.6716 23 10 22.3284 10 21.5V1.5C10 0.671573 10.6716 0 11.5 0Z" fill="currentColor"/></svg>

package/src/icons/svg/result-empty.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 29 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path opacity="0.3" d="M2 0C0.895432 0 0 0.895431 0 2V34C0 35.1046 0.895431 36 2 36H27C28.1046 36 29 35.1046 29 34V11H17.9511V0H2Z" fill="currentColor"/><path d="M14.1667 23.5V21.8333H15C16.4167 21.8333 17.5 20.75 17.5 19.3333V18.5C17.5 17.0833 16.4167 16 15 16C13.5833 16 12.5 17.0833 12.5 18.5V19.3333H10.8333V18.5C10.8333 16.1667 12.6667 14.3333 15 14.3333C17.3333 14.3333 19.1667 16.1667 19.1667 18.5V19.3333C19.1667 21.3333 17.75 23 15.8333 23.4167V25.1667H14.1667V23.5ZM14.1667 26H15.8333V27.6667H14.1667V26Z" fill="currentColor"/><path opacity="0.3" d="M20.0234 0V9H29L20.0234 0Z" fill="currentColor"/></svg>

package/src/icons/svg/settings.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M9.63281 2.71987C9.8588 2.5845 10.1412 2.5845 10.3672 2.71987L15.9033 6.04214C16.1184 6.17124 16.25 6.40361 16.25 6.65444V13.3449C16.25 13.5958 16.1185 13.8291 15.9033 13.9582L10.3672 17.2794C10.1411 17.4149 9.85887 17.4149 9.63281 17.2794L4.09668 13.9582C3.88154 13.8291 3.75 13.5958 3.75 13.3449V6.65444C3.75 6.40361 3.88163 6.17124 4.09668 6.04214L9.63281 2.71987ZM10 7.50015C8.61929 7.50015 7.5 8.61943 7.5 10.0001C7.5001 11.3808 8.61935 12.5001 10 12.5001C11.3807 12.5001 12.4999 11.3808 12.5 10.0001C12.5 8.61943 11.3807 7.50015 10 7.50015Z" fill="currentColor" />
+</svg>

package/src/icons/svg/users.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <circle cx="9" cy="7" r="4" />
+  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+</svg>

package/src/index.ts

@@ -0,0 +1,193 @@
+export { default as GcsaConfigProvider } from './components/GcsaConfigProvider.vue';
+export { default as ConsoleShell } from './components/ConsoleShell.vue';
+export { default as ConsoleSidebar } from './components/ConsoleSidebar.vue';
+export { default as ConsoleHeader } from './components/ConsoleHeader.vue';
+export { default as ConsolePage } from './components/ConsolePage.vue';
+export { default as GcsaBrandMark } from './components/GcsaBrandMark.vue';
+
+export { default as GcsaButton } from './components/GcsaButton.vue';
+export { default as GcsaBadge } from './components/GcsaBadge.vue';
+export { default as GcsaCard } from './components/GcsaCard.vue';
+export { default as GcsaField } from './components/GcsaField.vue';
+export { default as GcsaInput } from './components/GcsaInput.vue';
+export { default as GcsaInputGroup } from './components/GcsaInputGroup.vue';
+export { default as GcsaTextarea } from './components/GcsaTextarea.vue';
+export { default as GcsaSelect } from './components/GcsaSelect.vue';
+export { default as GcsaMultiSelect } from './components/GcsaMultiSelect.vue';
+export { default as GcsaAutoComplete } from './components/GcsaAutoComplete.vue';
+export { default as GcsaCheckbox } from './components/GcsaCheckbox.vue';
+export { default as GcsaRadioGroup } from './components/GcsaRadioGroup.vue';
+export { default as GcsaSwitch } from './components/GcsaSwitch.vue';
+export { default as GcsaInputNumber } from './components/GcsaInputNumber.vue';
+export { default as GcsaDatePicker } from './components/GcsaDatePicker.vue';
+export { default as GcsaCalendar } from './components/GcsaCalendar.vue';
+export { default as GcsaDateRangePicker } from './components/GcsaDateRangePicker.vue';
+export { default as GcsaDateTimePicker } from './components/GcsaDateTimePicker.vue';
+export { default as GcsaTimePicker } from './components/GcsaTimePicker.vue';
+export { default as GcsaUpload } from './components/GcsaUpload.vue';
+export { default as GcsaCollapse } from './components/GcsaCollapse.vue';
+export { default as GcsaTree } from './components/GcsaTree.vue';
+export { default as GcsaCascader } from './components/GcsaCascader.vue';
+export { default as GcsaTransfer } from './components/GcsaTransfer.vue';
+export { default as GcsaImagePreview } from './components/GcsaImagePreview.vue';
+export { default as GcsaSteps } from './components/GcsaSteps.vue';
+export { default as GcsaTimeline } from './components/GcsaTimeline.vue';
+export type { GcsaCollapseItem, GcsaTreeNode } from './types';
+
+export { default as GcsaDataTable } from './components/GcsaDataTable.vue';
+export type { GcsaDataTableApi } from './components/gcsaDataTableTypes';
+export { default as GcsaForm } from './components/GcsaForm.vue';
+export { default as GcsaFormField } from './components/GcsaFormField.vue';
+export { default as GcsaPagination } from './components/GcsaPagination.vue';
+
+export { default as GcsaAlert } from './components/GcsaAlert.vue';
+export { default as GcsaSpin } from './components/GcsaSpin.vue';
+export { default as GcsaLoadingMask } from './components/GcsaLoadingMask.vue';
+export {
+  GcsaLoading,
+  GcsaLoadingPlugin,
+  LoadingService,
+  vGcsaLoading
+} from './loading';
+export type { GcsaLoadingInstance, GcsaLoadingOptions } from './loading';
+export { default as GcsaSkeleton } from './components/GcsaSkeleton.vue';
+export { default as GcsaModal } from './components/GcsaModal.vue';
+export { default as GcsaDrawer } from './components/GcsaDrawer.vue';
+export { default as GcsaProgress } from './components/GcsaProgress.vue';
+export { default as GcsaResult } from './components/GcsaResult.vue';
+
+export { default as GcsaTabs } from './components/GcsaTabs.vue';
+export { default as GcsaBreadcrumb } from './components/GcsaBreadcrumb.vue';
+export { default as GcsaTag } from './components/GcsaTag.vue';
+export { default as GcsaStatistic } from './components/GcsaStatistic.vue';
+export { default as GcsaDescriptions } from './components/GcsaDescriptions.vue';
+export { default as GcsaAvatar } from './components/GcsaAvatar.vue';
+export { default as GcsaEmpty } from './components/GcsaEmpty.vue';
+export { default as GcsaChatPanel } from './components/GcsaChatPanel.vue';
+export { default as GcsaMarkdownRenderer } from './components/GcsaMarkdownRenderer.vue';
+
+export { default as GcsaDivider } from './components/GcsaDivider.vue';
+export { default as GcsaSpace } from './components/GcsaSpace.vue';
+export { default as GcsaTypography } from './components/GcsaTypography.vue';
+export { default as GcsaRow } from './components/GcsaRow.vue';
+export { default as GcsaIcon } from './components/GcsaIcon.vue';
+export { default as GcsaTooltip } from './components/GcsaTooltip.vue';
+export { default as GcsaPopover } from './components/GcsaPopover.vue';
+export { default as GcsaDropdown } from './components/GcsaDropdown.vue';
+export { default as GcsaMenu } from './components/GcsaMenu.vue';
+export { default as GcsaPopconfirm } from './components/GcsaPopconfirm.vue';
+
+export { useGcsaMessage } from './composables/useGcsaMessage';
+export { useGcsaTheme } from './composables/useGcsaTheme';
+export { useGcsaComponentSize, useGcsaComponentSizeConfig, useGcsaButtonSize } from './composables/useGcsaComponentSize';
+export { useGcsaLocale, useGcsaLocaleMessages } from './composables/useGcsaLocale';
+export { useGcsaZIndex } from './composables/useGcsaZIndex';
+export { GCSA_RESTORE_DOCUMENT_THEME_KEY } from './composables/useDocumentThemeSync';
+export {
+  gcsaBooleanFieldBindings,
+  gcsaFieldError,
+  gcsaFieldInvalid,
+  gcsaNumberFieldBindings,
+  gcsaRadioFieldBindings,
+  gcsaTextFieldBindings
+} from './composables/useGcsaFormField';
+export type { GcsaAnyFieldApi } from './composables/useGcsaFormField';
+export type { GcsaFormApi, GcsaFormValues } from './composables/gcsaFormTypes';
+export type {
+  GcsaAutoCompleteOption,
+  GcsaDropdownItem,
+  GcsaMenuItem,
+  GcsaMenuMode,
+  GcsaPopconfirmPlacement,
+  GcsaPopoverPlacement,
+  GcsaPopoverSize,
+  GcsaToastItem,
+  GcsaTooltipPlacement
+} from './types';
+export type { GcsaIconName, GcsaNavIconName } from './icons';
+export { GCSA_ICON_NAMES, GCSA_NAV_ICON_NAMES, GCSA_UI_ICON_NAMES } from './icons';
+export type { GcsaTextCountFormatter } from './composables/useGcsaTextCount';
+export type {
+  ConsoleHeaderProps,
+  ConsolePageProps,
+  ConsoleShellProps,
+  ConsoleSidebarProps,
+  GcsaAlertProps,
+  GcsaAutoCompleteProps,
+  GcsaAvatarProps,
+  GcsaBadgeProps,
+  GcsaBreadcrumbItem,
+  GcsaBreadcrumbProps,
+  GcsaBrandMarkProps,
+  GcsaButtonProps,
+  GcsaCalendarProps,
+  GcsaCardProps,
+  GcsaCascaderProps,
+  GcsaChatPanelProps,
+  GcsaCheckboxProps,
+  GcsaCollapseProps,
+  GcsaConfigProviderProps,
+  GcsaDataTableProps,
+  GcsaDateRangeMonthPanelProps,
+  GcsaDatePickerProps,
+  GcsaDateRangePickerProps,
+  GcsaDateTimePickerProps,
+  GcsaDescriptionsItem,
+  GcsaDescriptionsProps,
+  GcsaDividerProps,
+  GcsaDrawerProps,
+  GcsaDrawerSize,
+  GcsaDropdownPlacement,
+  GcsaDropdownProps,
+  GcsaEmptyProps,
+  GcsaFieldProps,
+  GcsaFormFieldProps,
+  GcsaFormProps,
+  GcsaIconProps,
+  GcsaImagePreviewProps,
+  GcsaInputGroupProps,
+  GcsaInputNumberProps,
+  GcsaInputProps,
+  GcsaLoadingMaskProps,
+  GcsaMarkdownRendererProps,
+  GcsaMenuNodesProps,
+  GcsaMenuProps,
+  GcsaModalProps,
+  GcsaMultiSelectPlacement,
+  GcsaMultiSelectProps,
+  GcsaPaginationProps,
+  GcsaPopconfirmProps,
+  GcsaPopoverProps,
+  GcsaPortalProps,
+  GcsaProgressProps,
+  GcsaRadioGroupProps,
+  GcsaResultProps,
+  GcsaRowProps,
+  GcsaSelectPlacement,
+  GcsaSelectProps,
+  GcsaSkeletonProps,
+  GcsaSpaceProps,
+  GcsaSpinProps,
+  GcsaStatisticProps,
+  GcsaStepsProps,
+  GcsaSwitchProps,
+  GcsaTabItem,
+  GcsaTabsProps,
+  GcsaTagProps,
+  GcsaTextareaProps,
+  GcsaTimelineProps,
+  GcsaTimePickerProps,
+  GcsaToastStackProps,
+  GcsaTooltipProps,
+  GcsaTransferProps,
+  GcsaTreeProps,
+  GcsaTypographyProps,
+  GcsaUploadProps
+} from './types';
+export type { GcsaTableCellSlotProps, GcsaTableHeaderSlotProps } from './utils/gcsaTableColumns';
+export { gcsaTableColumnsToDefs, resolveGcsaTableColumns } from './utils/gcsaTableColumns';
+
+export { gcsaLoginSchema, gcsaNotifySchema } from '@gcsa/console-core';
+export type * from '@gcsa/console-core';
+
+export { GcsaConsoleResolver } from './resolver';

package/src/loading/directive.ts

@@ -0,0 +1,104 @@
+import { ref, type AppContext, type Directive, type DirectiveBinding } from 'vue';
+import LoadingService, { type GcsaLoadingInstance, type GcsaLoadingOptions } from './service';
+
+const isObject = (val: unknown): val is Record<string, unknown> => typeof val === 'object' && val !== null;
+const isString = (val: unknown): val is string => typeof val === 'string';
+
+const INSTANCE_KEY = Symbol('GcsaLoading');
+
+type StoredInstance = {
+  options: Record<string, { value: unknown }>;
+  instance: GcsaLoadingInstance;
+};
+
+type ElWithLoading = HTMLElement & { [INSTANCE_KEY]?: StoredInstance };
+
+const getAttributeName = (name: string) =>
+  `gcsa-loading-${name.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`;
+
+const resolveExpression = (key: unknown, vm?: Record<string, unknown>) => {
+  return ref(isString(key) && vm?.[key as string] ? vm[key as string] : key);
+};
+
+const createInstance = (el: HTMLElement, binding: DirectiveBinding) => {
+  const vm = binding.instance as unknown as Record<string, unknown> | undefined;
+  const getBindingProp = (key: string) =>
+    isObject(binding.value) ? (binding.value as Record<string, unknown>)[key] : undefined;
+
+  const getProp = (name: string) =>
+    resolveExpression(getBindingProp(name) || el.getAttribute(getAttributeName(name)), vm);
+
+  const fullscreen = getBindingProp('fullscreen') ?? binding.modifiers.fullscreen;
+
+  const options: GcsaLoadingOptions = {
+    text: getProp('text').value as string,
+    background: getProp('background').value as string,
+    customClass: getProp('customClass').value as string,
+    fullscreen: Boolean(fullscreen),
+    target: (getBindingProp('target') as HTMLElement | undefined) ?? (fullscreen ? undefined : el),
+    body: Boolean(getBindingProp('body') ?? binding.modifiers.body),
+    lock: Boolean(getBindingProp('lock') ?? binding.modifiers.lock)
+  };
+
+  const instance = LoadingService(options, vGcsaLoading._context || undefined)!;
+  (el as ElWithLoading)[INSTANCE_KEY] = {
+    options: {
+      text: getProp('text'),
+      background: getProp('background'),
+      customClass: getProp('customClass')
+    },
+    instance
+  };
+};
+
+const updateOptions = (stored: StoredInstance, newOptions: Record<string, unknown>) => {
+  if (newOptions.text !== undefined && newOptions.text !== null) {
+    stored.instance.setText(String(newOptions.text));
+  }
+  Object.keys(stored.options).forEach(key => {
+    if (key === 'text') return;
+    stored.options[key].value = newOptions[key];
+  });
+};
+
+export const vGcsaLoading: Directive<HTMLElement, boolean | Record<string, unknown>> & {
+  _context: AppContext | null;
+} = {
+  mounted(el, binding) {
+    if (binding.value) {
+      createInstance(el, binding);
+    }
+  },
+  updated(el, binding) {
+    const stored = (el as ElWithLoading)[INSTANCE_KEY];
+    if (!binding.value) {
+      stored?.instance.close();
+      (el as ElWithLoading)[INSTANCE_KEY] = undefined;
+      return;
+    }
+
+    if (!stored) {
+      createInstance(el, binding);
+      return;
+    }
+
+    updateOptions(
+      stored,
+      isObject(binding.value)
+        ? binding.value
+        : {
+            text: el.getAttribute(getAttributeName('text')),
+            background: el.getAttribute(getAttributeName('background')),
+            customClass: el.getAttribute(getAttributeName('customClass'))
+          }
+    );
+  },
+  unmounted(el) {
+    const stored = (el as ElWithLoading)[INSTANCE_KEY];
+    stored?.instance.close();
+    (el as ElWithLoading)[INSTANCE_KEY] = undefined;
+  },
+  _context: null
+};
+
+export default vGcsaLoading;

package/src/loading/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue';
+import LoadingService, { GcsaLoading } from './service';
+import { vGcsaLoading } from './directive';
+
+export type { GcsaLoadingInstance, GcsaLoadingOptions } from './service';
+export { LoadingService, GcsaLoading, vGcsaLoading };
+
+export const GcsaLoadingPlugin: Plugin = {
+  install(app: App) {
+    LoadingService._context = app._context;
+    GcsaLoading._context = app._context;
+    vGcsaLoading._context = app._context;
+    app.directive('loading', vGcsaLoading);
+    app.directive('gcsa-loading', vGcsaLoading);
+    app.config.globalProperties.$loading = LoadingService;
+  }
+};
+
+export default GcsaLoadingPlugin;