@gcsa/console-vue 0.1.2 → 0.1.4

package/dist/types/componentProps.d.ts

@@ -160,6 +160,8 @@ export type GcsaPopoverProps = {
     portalled?: boolean;
     gutter?: number;
     open?: boolean;
+    /** 启用 size middleware，写入 --reference-width（Cascader 等需对齐触发器最小宽度） */
+    fitViewport?: boolean;
     size?: GcsaPopoverSize;
     width?: string | number;
     minWidth?: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcsa/console-vue",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "GCSA console UI — Vue 3 components (Ark UI + TanStack + GCSA styles)",
   "type": "module",
   "license": "UNLICENSED",
@@ -46,8 +46,8 @@
     "@tanstack/vue-form": "^1.12.2",
     "@tanstack/vue-table": "^8.21.3",
     "zod": "^3.24.4",
-    "@gcsa/console-core": "0.1.2",
-    "@gcsa/console-styles": "0.1.2"
+    "@gcsa/console-core": "0.1.4",
+    "@gcsa/console-styles": "0.1.4"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/components/GcsaCascader.vue

@@ -1,5 +1,5 @@
 <template>
-  <GcsaPopover :arrow="false" :portalled="portalled" :gutter="6" class="gcsa-cascader-popover">
+  <GcsaPopover :arrow="false" :portalled="portalled" :gutter="6" :fit-viewport="true" class="gcsa-cascader-popover">
     <template #trigger>
       <button type="button" class="gcsa-cascader__trigger gcsa-focus-ring" :disabled="disabled" :data-invalid="invalid || undefined">
         <span class="gcsa-cascader__value" :data-placeholder="!displayLabel || undefined">{{ displayLabel || resolvedPlaceholder }}</span>

package/src/components/GcsaPopover.vue

@@ -1,8 +1,8 @@
 <template>
   <Popover.Root
-    :open="resolvedOpen"
+    :open="open"
     :positioning="positioningOptions"
-    @open-change="(details) => handleOpenChange(details.open)"
+    @update:open="handleOpenChange"
   >
     <Popover.Trigger v-if="hasTriggerSlot" as-child>
       <slot name="trigger" />
@@ -48,12 +48,14 @@ const props = withDefaults(
     arrow: true,
     portalled: true,
     gutter: 8,
-    size: 'default'
+    size: 'default',
+    fitViewport: false
   }
 );
 
 const emit = defineEmits<{
   'open-change': [open: boolean];
+  'update:open': [open: boolean];
 }>();
 
 const messages = useGcsaLocaleMessages();
@@ -63,16 +65,12 @@ const slots = useSlots();
 const hasTriggerSlot = computed(() => Boolean(slots.trigger));
 const hasFooterSlot = computed(() => Boolean(slots.footer));
 
-const isControlled = computed(() => props.open !== undefined);
-const internalOpen = ref(false);
-const resolvedOpen = computed(() => (isControlled.value ? props.open : internalOpen.value));
+const open = ref(props.open ?? false);
 
 watch(
   () => props.open,
   (next) => {
-    if (next !== undefined) {
-      internalOpen.value = next;
-    }
+    if (next !== undefined) open.value = next;
   }
 );
 
@@ -107,14 +105,14 @@ const contentClassNames = computed(() =>
 const positioningOptions = computed(() =>
   createGcsaPopupPositioning({
     placement: props.placement,
-    gutter: props.gutter
+    gutter: props.gutter,
+    fitViewport: props.fitViewport
   })
 );
 
 function handleOpenChange(nextOpen: boolean) {
-  if (!isControlled.value) {
-    internalOpen.value = nextOpen;
-  }
+  open.value = nextOpen;
+  emit('update:open', nextOpen);
   emit('open-change', nextOpen);
   onPopupOpenChange(nextOpen);
 }

package/src/components/GcsaPortal.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, type ComputedRef } from 'vue';
+import { computed, inject, onMounted, onUnmounted, ref, type ComputedRef } from 'vue';
 import type { GcsaConsoleTheme } from '@gcsa/console-core';
 import type { GcsaPortalProps } from '../types/componentProps';
 import { GCSA_THEME_KEY } from '../composables/useGcsaTheme';
@@ -22,8 +22,15 @@ const props = withDefaults(
   }
 );
 
+function readDocumentTheme(): GcsaConsoleTheme {
+  if (typeof document === 'undefined') return 'dark';
+  const value = document.documentElement.getAttribute('data-gcsa-theme');
+  return value === 'light' || value === 'dark' ? value : 'dark';
+}
+
 const injectedTheme = inject<ComputedRef<GcsaConsoleTheme> | null>(GCSA_THEME_KEY, null);
-const theme = computed(() => injectedTheme?.value ?? 'dark');
+const documentTheme = ref<GcsaConsoleTheme>(readDocumentTheme());
+const theme = computed(() => injectedTheme?.value ?? documentTheme.value);
 
 /**
  * 延迟到客户端挂载后再创建 Teleport，避免 Suspense / 异步父组件初次渲染时
@@ -31,8 +38,25 @@ const theme = computed(() => injectedTheme?.value ?? 'dark');
  * 浮层统一挂 body，层级由 useGcsaZIndex 栈管理（勿挂到 modal 内 fixed 容器，会破坏定位）。
  */
 const mounted = ref(false);
+let themeObserver: MutationObserver | null = null;
+
 onMounted(() => {
   mounted.value = true;
+  documentTheme.value = readDocumentTheme();
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => {
+      documentTheme.value = readDocumentTheme();
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-gcsa-theme']
+    });
+  }
+});
+
+onUnmounted(() => {
+  themeObserver?.disconnect();
+  themeObserver = null;
 });
 
 const resolvedTarget = computed(() => props.to ?? 'body');

package/src/components/GcsaTransfer.vue

@@ -1,19 +1,96 @@
 <template>
   <div class="gcsa-transfer" :class="{ 'gcsa-transfer--disabled': disabled }">
     <section class="gcsa-transfer__panel" :aria-label="resolvedSourceTitle">
-      <header class="gcsa-transfer__header"><span>{{ resolvedSourceTitle }}</span><span>{{ availableItems.length }}</span></header>
-      <div class="gcsa-transfer__search"><GcsaInput v-model="sourceQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" /></div>
+      <header class="gcsa-transfer__header">
+        <span>{{ resolvedSourceTitle }}</span>
+        <span>{{ availableItems.length }}</span>
+      </header>
+      <div class="gcsa-transfer__search">
+        <GcsaInput v-model="sourceQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" />
+      </div>
       <div class="gcsa-transfer__list" role="listbox" aria-multiselectable="true">
-        <button v-for="item in availableItems" :key="item.value" type="button" class="gcsa-transfer__item gcsa-focus-ring" :class="{ 'gcsa-transfer__item--selected': sourceSelected.includes(item.value) }" :disabled="disabled || item.disabled" role="option" :aria-selected="sourceSelected.includes(item.value)" @click="toggleSelected(item.value, 'source')"><span class="gcsa-transfer__check" aria-hidden="true">{{ sourceSelected.includes(item.value) ? '✓' : '' }}</span><span>{{ item.label }}</span></button>
+        <div
+          v-for="item in availableItems"
+          :key="item.value"
+          class="gcsa-transfer__item gcsa-focus-ring"
+          :class="{ 'gcsa-transfer__item--selected': sourceSelected.includes(item.value) }"
+          role="option"
+          :tabindex="disabled || item.disabled ? -1 : 0"
+          :aria-selected="sourceSelected.includes(item.value)"
+          :aria-disabled="disabled || item.disabled || undefined"
+          @click="onItemActivate(item, 'source')"
+          @keydown.enter.prevent="onItemActivate(item, 'source')"
+          @keydown.space.prevent="onItemActivate(item, 'source')"
+        >
+          <span class="gcsa-transfer__check-wrap" @click.stop>
+            <GcsaCheckbox
+              :model-value="sourceSelected.includes(item.value)"
+              :disabled="disabled || item.disabled"
+              :aria-label="item.label"
+              tabindex="-1"
+              @update:model-value="checked => setSelected(item.value, 'source', checked)"
+            />
+          </span>
+          <span class="gcsa-transfer__label">{{ item.label }}</span>
+        </div>
         <span v-if="!availableItems.length" class="gcsa-transfer__empty">{{ messages.noOptions }}</span>
       </div>
     </section>
-    <div class="gcsa-transfer__actions"><button type="button" class="gcsa-transfer__action gcsa-focus-ring" :disabled="disabled || !sourceSelected.length" :aria-label="messages.transferMoveRight" @click="moveRight">›</button><button type="button" class="gcsa-transfer__action gcsa-focus-ring" :disabled="disabled || !targetSelected.length" :aria-label="messages.transferMoveLeft" @click="moveLeft">‹</button></div>
+
+    <div class="gcsa-transfer__actions">
+      <button
+        type="button"
+        class="gcsa-transfer__action gcsa-focus-ring"
+        :disabled="disabled || !sourceSelected.length"
+        :aria-label="messages.transferMoveRight"
+        @click="moveRight"
+      >
+        ›
+      </button>
+      <button
+        type="button"
+        class="gcsa-transfer__action gcsa-focus-ring"
+        :disabled="disabled || !targetSelected.length"
+        :aria-label="messages.transferMoveLeft"
+        @click="moveLeft"
+      >
+        ‹
+      </button>
+    </div>
+
     <section class="gcsa-transfer__panel" :aria-label="resolvedTargetTitle">
-      <header class="gcsa-transfer__header"><span>{{ resolvedTargetTitle }}</span><span>{{ targetItems.length }}</span></header>
-      <div class="gcsa-transfer__search"><GcsaInput v-model="targetQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" /></div>
+      <header class="gcsa-transfer__header">
+        <span>{{ resolvedTargetTitle }}</span>
+        <span>{{ targetItems.length }}</span>
+      </header>
+      <div class="gcsa-transfer__search">
+        <GcsaInput v-model="targetQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" />
+      </div>
       <div class="gcsa-transfer__list" role="listbox" aria-multiselectable="true">
-        <button v-for="item in filteredTargetItems" :key="item.value" type="button" class="gcsa-transfer__item gcsa-focus-ring" :class="{ 'gcsa-transfer__item--selected': targetSelected.includes(item.value) }" :disabled="disabled || item.disabled" role="option" :aria-selected="targetSelected.includes(item.value)" @click="toggleSelected(item.value, 'target')"><span class="gcsa-transfer__check" aria-hidden="true">{{ targetSelected.includes(item.value) ? '✓' : '' }}</span><span>{{ item.label }}</span></button>
+        <div
+          v-for="item in filteredTargetItems"
+          :key="item.value"
+          class="gcsa-transfer__item gcsa-focus-ring"
+          :class="{ 'gcsa-transfer__item--selected': targetSelected.includes(item.value) }"
+          role="option"
+          :tabindex="disabled || item.disabled ? -1 : 0"
+          :aria-selected="targetSelected.includes(item.value)"
+          :aria-disabled="disabled || item.disabled || undefined"
+          @click="onItemActivate(item, 'target')"
+          @keydown.enter.prevent="onItemActivate(item, 'target')"
+          @keydown.space.prevent="onItemActivate(item, 'target')"
+        >
+          <span class="gcsa-transfer__check-wrap" @click.stop>
+            <GcsaCheckbox
+              :model-value="targetSelected.includes(item.value)"
+              :disabled="disabled || item.disabled"
+              :aria-label="item.label"
+              tabindex="-1"
+              @update:model-value="checked => setSelected(item.value, 'target', checked)"
+            />
+          </span>
+          <span class="gcsa-transfer__label">{{ item.label }}</span>
+        </div>
         <span v-if="!filteredTargetItems.length" class="gcsa-transfer__empty">{{ messages.noOptions }}</span>
       </div>
     </section>
@@ -22,8 +99,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import type { GcsaTransferOption } from '@gcsa/console-core';
 import type { GcsaTransferProps } from '../types/componentProps';
 import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import GcsaCheckbox from './GcsaCheckbox.vue';
 import GcsaInput from './GcsaInput.vue';
 
 defineOptions({ name: 'GcsaTransfer' });
@@ -40,11 +119,44 @@ const sourceSelected = ref<string[]>([]);
 const targetSelected = ref<string[]>([]);
 const sourceQuery = ref('');
 const targetQuery = ref('');
+
 const targetItems = computed(() => props.options.filter(item => props.modelValue.includes(item.value)));
-const availableItems = computed(() => props.options.filter(item => !props.modelValue.includes(item.value) && item.label.toLowerCase().includes(sourceQuery.value.trim().toLowerCase())));
-const filteredTargetItems = computed(() => targetItems.value.filter(item => item.label.toLowerCase().includes(targetQuery.value.trim().toLowerCase())));
-function toggleSelected(value: string, side: 'source' | 'target') { const selected = side === 'source' ? sourceSelected : targetSelected; const next = selected.value.includes(value) ? selected.value.filter(item => item !== value) : [...selected.value, value]; selected.value = next; }
-function update(next: string[]) { emit('update:modelValue', next); emit('change', next); sourceSelected.value = []; targetSelected.value = []; }
-function moveRight() { update([...props.modelValue, ...sourceSelected.value.filter(value => !props.modelValue.includes(value))]); }
-function moveLeft() { update(props.modelValue.filter(value => !targetSelected.value.includes(value))); }
+const availableItems = computed(() =>
+  props.options.filter(
+    item => !props.modelValue.includes(item.value) && item.label.toLowerCase().includes(sourceQuery.value.trim().toLowerCase())
+  )
+);
+const filteredTargetItems = computed(() =>
+  targetItems.value.filter(item => item.label.toLowerCase().includes(targetQuery.value.trim().toLowerCase()))
+);
+
+function setSelected(value: string, side: 'source' | 'target', checked: boolean) {
+  const selected = side === 'source' ? sourceSelected : targetSelected;
+  if (checked) {
+    if (!selected.value.includes(value)) selected.value = [...selected.value, value];
+  } else {
+    selected.value = selected.value.filter(item => item !== value);
+  }
+}
+
+function onItemActivate(item: GcsaTransferOption, side: 'source' | 'target') {
+  if (props.disabled || item.disabled) return;
+  const selected = side === 'source' ? sourceSelected : targetSelected;
+  setSelected(item.value, side, !selected.value.includes(item.value));
+}
+
+function update(next: string[]) {
+  emit('update:modelValue', next);
+  emit('change', next);
+  sourceSelected.value = [];
+  targetSelected.value = [];
+}
+
+function moveRight() {
+  update([...props.modelValue, ...sourceSelected.value.filter(value => !props.modelValue.includes(value))]);
+}
+
+function moveLeft() {
+  update(props.modelValue.filter(value => !targetSelected.value.includes(value)));
+}
 </script>

package/src/components/GcsaUpload.vue

@@ -23,7 +23,7 @@
       @drop.prevent="onDrop"
     >
       <span class="gcsa-upload__icon" aria-hidden="true">
-        <GcsaIcon name="plus" />
+        <GcsaIcon name="upload" />
       </span>
       <span class="gcsa-upload__title">{{ resolvedButtonLabel }}</span>
       <p v-if="resolvedHint" class="gcsa-upload__hint">{{ resolvedHint }}</p>

package/src/icons/iconNames.ts

@@ -18,6 +18,7 @@ export const GCSA_UI_ICON_NAMES = [
   'close',
   'menu',
   'plus',
+  'upload',
   'resultEmpty'
 ] as const;
 

package/src/icons/registry.ts

@@ -5,6 +5,7 @@ import {
 // 显式导入：避免 dev 下 glob 缓存未收录新 SVG 时模块加载即抛错白屏
 import chevronLeftSvg from './svg/chevron-left.svg?raw';
 import menuSvg from './svg/menu.svg?raw';
+import uploadSvg from './svg/upload.svg?raw';
 
 const svgModules = import.meta.glob('./svg/*.svg', {
   query: '?raw',
@@ -27,7 +28,8 @@ const registry = {
     Object.entries(svgModules).map(([path, svg]) => [toIconKey(fileStem(path)), svg])
   ),
   menu: menuSvg,
-  chevronLeft: chevronLeftSvg
+  chevronLeft: chevronLeftSvg,
+  upload: uploadSvg
 } as Record<GcsaIconName, string>;
 
 for (const name of GCSA_ICON_NAMES) {

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

@@ -1 +1,11 @@
-<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>
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="33" cy="53" rx="33" ry="8" fill="#00BBCC" fill-opacity="0.1"/>
+<path d="M35 19.5L12 26V49L35 47.5V19.5Z" fill="#00BBCC" fill-opacity="0.3"/>
+<path d="M55 46.5V25L35 19.5V42L55 46.5Z" fill="#00BBCC" fill-opacity="0.4"/>
+<path d="M54.4179 7.58906L57 9.00955L54.4106 10.4173L52.9909 13L51.5821 10.4109L49 8.99045L51.5894 7.5827L53.0091 5L54.4179 7.58906Z" fill="#00BBCC" fill-opacity="0.4"/>
+<path d="M32 56.0806V32L55 25V48L32 56.0806Z" fill="#7CDBE4"/>
+<path d="M32 56.0806V32L12 26V49L32 56.0806Z" fill="#97E3EA"/>
+<path d="M25 7.5L35 19.5L12 26L2 14L25 7.5Z" fill="#CCF1F5"/>
+<circle cx="35" cy="17.5" r="9" fill="#00BBCC"/>
+<path d="M34.4 19.875V18.625H35C36.02 18.625 36.8 17.8125 36.8 16.75V16.125C36.8 15.0625 36.02 14.25 35 14.25C33.98 14.25 33.2 15.0625 33.2 16.125V16.75H32V16.125C32 14.375 33.32 13 35 13C36.68 13 38 14.375 38 16.125V16.75C38 18.25 36.98 19.5 35.6 19.8125V21.125H34.4V19.875ZM34.4 21.75H35.6V23H34.4V21.75Z" fill="white"/>
+</svg>

package/src/icons/svg/upload.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M32.5 20.2C31.4 15.7 27.5 12.5 22.8 12.5C18.6 12.5 15 15 13.5 18.6C10 19.1 7.5 22.1 7.5 25.7C7.5 29.6 10.7 32.8 14.6 32.8H32.2C35.6 32.8 38.5 30 38.5 26.5C38.5 23.3 35.9 20.7 32.5 20.2Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
+  <path d="M24 22.5V36" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+  <path d="M19.5 27L24 22.5L28.5 27" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/index.ts

@@ -78,7 +78,7 @@ 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 { useGcsaTheme, GCSA_THEME_KEY } from './composables/useGcsaTheme';
 export { useGcsaComponentSize, useGcsaComponentSizeConfig, useGcsaButtonSize } from './composables/useGcsaComponentSize';
 export { useGcsaLocale, useGcsaLocaleMessages } from './composables/useGcsaLocale';
 export { useGcsaZIndex } from './composables/useGcsaZIndex';

package/src/types/componentProps.ts

@@ -246,6 +246,8 @@ export type GcsaPopoverProps = {
   portalled?: boolean;
   gutter?: number;
   open?: boolean;
+  /** 启用 size middleware，写入 --reference-width（Cascader 等需对齐触发器最小宽度） */
+  fitViewport?: boolean;
   size?: GcsaPopoverSize;
   width?: string | number;
   minWidth?: string | number;