@gcsa/console-vue 0.1.0

package/src/components/GcsaMenuNodes.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Collapsible } from '@ark-ui/vue/collapsible';
+import { Menu } from '@ark-ui/vue/menu';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import type { GcsaMenuItem } from '@gcsa/console-core';
+import type { GcsaMenuNodesProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaTooltip from './GcsaTooltip.vue';
+
+defineOptions({ name: 'GcsaMenuNodes' });
+
+const props = defineProps<GcsaMenuNodesProps>();
+
+const emit = defineEmits<{
+  select: [key: string];
+  toggle: [key: string, open: boolean];
+}>();
+
+const openKeySet = computed(() => new Set(props.openKeys));
+const showTooltips = computed(() => Boolean(props.collapsed) && props.depth === 0);
+const submenuPositioning = createGcsaPopupPositioning({ placement: 'right-start', gutter: 8 });
+
+function isBranch(item: GcsaMenuItem) {
+  return Boolean(item.children?.length) && item.type !== 'group' && item.type !== 'divider';
+}
+
+function itemClass(item: GcsaMenuItem) {
+  return {
+    'gcsa-menu__item': true,
+    'gcsa-menu__item--selected': item.key === props.selectedKey,
+    'gcsa-menu__item--disabled': item.disabled,
+    'gcsa-menu__item--submenu': isBranch(item)
+  };
+}
+
+function onLeafSelect(item: GcsaMenuItem) {
+  if (item.disabled || item.type === 'group' || item.type === 'divider' || item.href) return;
+  emit('select', item.key);
+}
+
+function flattenDropdownItems(items: GcsaMenuItem[]) {
+  return items
+    .filter(item => item.type !== 'group' && item.type !== 'divider')
+    .map(item => ({
+      key: item.key,
+      label: item.label,
+      disabled: item.disabled
+    }));
+}
+
+function branchContainsSelection(item: GcsaMenuItem, selectedKey: string) {
+  if (item.key === selectedKey) return true;
+  return item.children?.some(child => child.key === selectedKey) ?? false;
+}
+</script>
+
+<template>
+  <ul class="gcsa-menu__list" :class="{ 'gcsa-menu__list--nested': depth > 0 }" role="none">
+    <li
+      v-for="item in items"
+      :key="item.key"
+      class="gcsa-menu__node"
+      :class="{
+        'gcsa-menu__node--group': item.type === 'group',
+        'gcsa-menu__node--divider': item.type === 'divider'
+      }"
+      role="none"
+    >
+      <div v-if="item.type === 'divider'" class="gcsa-menu__divider" role="separator" />
+
+      <div v-else-if="item.type === 'group'" class="gcsa-menu__group-label">
+        {{ item.label }}
+      </div>
+
+      <template v-else-if="isBranch(item)">
+        <Menu.Root
+          v-if="collapsed && mode !== 'horizontal'"
+          :positioning="submenuPositioning"
+          @select="details => emit('select', details.value)"
+        >
+          <GcsaTooltip :content="item.label" placement="right" :gutter="10">
+            <template #trigger>
+              <Menu.Trigger as-child>
+                <button
+                  type="button"
+                  class="gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring"
+                  :class="{
+                    'gcsa-menu__item--selected': branchContainsSelection(item, selectedKey),
+                    'gcsa-menu__item--disabled': item.disabled
+                  }"
+                  :disabled="item.disabled"
+                >
+                  <span v-if="item.iconKey" class="gcsa-menu__icon" aria-hidden="true">
+                    <GcsaIcon :name="item.iconKey" />
+                  </span>
+                  <span class="gcsa-menu__label">{{ item.label }}</span>
+                </button>
+              </Menu.Trigger>
+            </template>
+          </GcsaTooltip>
+          <Menu.Positioner>
+            <Menu.Content class="gcsa-dropdown gcsa-ui-surface">
+              <Menu.Item
+                v-for="child in flattenDropdownItems(item.children!)"
+                :key="child.key"
+                :value="child.key"
+                :disabled="child.disabled"
+                class="gcsa-dropdown__item"
+              >
+                <Menu.ItemText>{{ child.label }}</Menu.ItemText>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+
+        <Collapsible.Root
+          v-else-if="mode !== 'horizontal'"
+          :open="openKeySet.has(item.key)"
+          class="gcsa-menu__submenu"
+          @update:open="open => emit('toggle', item.key, open)"
+        >
+          <Collapsible.Trigger
+            class="gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring"
+            :class="itemClass(item)"
+            :disabled="item.disabled"
+            :data-selected="item.key === selectedKey ? '' : undefined"
+          >
+            <span v-if="item.iconKey" class="gcsa-menu__icon" aria-hidden="true">
+              <GcsaIcon :name="item.iconKey" />
+            </span>
+            <span class="gcsa-menu__label">{{ item.label }}</span>
+            <span class="gcsa-menu__arrow" aria-hidden="true">
+              <GcsaIcon name="chevronLeft" size="sm" />
+            </span>
+          </Collapsible.Trigger>
+          <Collapsible.Content class="gcsa-menu__submenu-panel">
+            <GcsaMenuNodes
+              :items="item.children!"
+              :mode="mode"
+              :selected-key="selectedKey"
+              :open-keys="openKeys"
+              :collapsed="collapsed"
+              :depth="depth + 1"
+              @select="key => emit('select', key)"
+              @toggle="(key, open) => emit('toggle', key, open)"
+            />
+          </Collapsible.Content>
+        </Collapsible.Root>
+
+        <div v-else class="gcsa-menu__branch">
+          <Menu.Root @select="details => emit('select', details.value)">
+            <Menu.Trigger as-child>
+              <button
+                type="button"
+                class="gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring"
+                :class="{
+                  'gcsa-menu__item--selected': branchContainsSelection(item, selectedKey),
+                  'gcsa-menu__item--disabled': item.disabled
+                }"
+                :disabled="item.disabled"
+              >
+                <span class="gcsa-menu__label">{{ item.label }}</span>
+                <span class="gcsa-menu__arrow" aria-hidden="true">
+                  <GcsaIcon name="chevronDown" size="sm" />
+                </span>
+              </button>
+            </Menu.Trigger>
+            <Menu.Positioner>
+              <Menu.Content class="gcsa-dropdown gcsa-ui-surface">
+                <Menu.Item
+                  v-for="child in flattenDropdownItems(item.children!)"
+                  :key="child.key"
+                  :value="child.key"
+                  :disabled="child.disabled"
+                  class="gcsa-dropdown__item"
+                >
+                  <Menu.ItemText>{{ child.label }}</Menu.ItemText>
+                </Menu.Item>
+              </Menu.Content>
+            </Menu.Positioner>
+          </Menu.Root>
+        </div>
+      </template>
+
+      <GcsaTooltip
+        v-else
+        :content="item.label"
+        placement="right"
+        :disabled="!showTooltips"
+        :gutter="10"
+      >
+        <template #trigger>
+          <a
+            v-if="item.href"
+            :href="item.href"
+            class="gcsa-menu__item gcsa-focus-ring"
+            :class="itemClass(item)"
+            role="menuitem"
+            :aria-current="item.key === selectedKey ? 'page' : undefined"
+          >
+            <span v-if="item.iconKey" class="gcsa-menu__icon" aria-hidden="true">
+              <GcsaIcon :name="item.iconKey" />
+            </span>
+            <span class="gcsa-menu__label">{{ item.label }}</span>
+          </a>
+          <button
+            v-else
+            type="button"
+            class="gcsa-menu__item gcsa-focus-ring"
+            :class="itemClass(item)"
+            role="menuitem"
+            :disabled="item.disabled"
+            :aria-current="item.key === selectedKey ? 'page' : undefined"
+            @click="onLeafSelect(item)"
+          >
+            <span v-if="item.iconKey" class="gcsa-menu__icon" aria-hidden="true">
+              <GcsaIcon :name="item.iconKey" />
+            </span>
+            <span class="gcsa-menu__label">{{ item.label }}</span>
+          </button>
+        </template>
+      </GcsaTooltip>
+    </li>
+  </ul>
+</template>

package/src/components/GcsaModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <Dialog.Root :open="open" lazy-mount unmount-on-exit @update:open="onOpenChange">
+    <Teleport to="body">
+      <div class="gcsa-portal-scope gcsa-modal-portal" :data-gcsa-theme="theme">
+        <Dialog.Backdrop class="gcsa-modal__backdrop" :style="backdropStyle" />
+        <Dialog.Positioner class="gcsa-modal__positioner" :style="positionerStyle">
+        <Dialog.Content
+          class="gcsa-modal__panel gcsa-ui-surface"
+          :class="panelClass"
+          :style="panelStyle"
+          v-bind="panelAttrs"
+        >
+        <Dialog.CloseTrigger
+          v-if="closable"
+          class="gcsa-modal__close"
+          :aria-label="messages.close"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <path
+              d="M2 2l10 10M12 2L2 12"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+            />
+          </svg>
+        </Dialog.CloseTrigger>
+        <header v-if="title || $slots.title" class="gcsa-modal__header">
+          <Dialog.Title as-child>
+            <div class="gcsa-modal__title">
+              <slot name="title">{{ title }}</slot>
+            </div>
+          </Dialog.Title>
+        </header>
+        <div class="gcsa-modal__body" :class="{ 'gcsa-modal__body--titled': title || $slots.title }">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="gcsa-modal__footer">
+          <slot name="footer" />
+        </div>
+      </Dialog.Content>
+      </Dialog.Positioner>
+      </div>
+    </Teleport>
+  </Dialog.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, useAttrs, watch, type ComputedRef } from 'vue';
+import { Dialog } from '@ark-ui/vue/dialog';
+import type { GcsaConsoleTheme } from '@gcsa/console-core';
+import type { GcsaModalProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaZIndex } from '../composables/useGcsaZIndex';
+import { GCSA_THEME_KEY } from '../composables/useGcsaTheme';
+
+defineOptions({ name: 'GcsaModal', inheritAttrs: false });
+
+const attrs = useAttrs();
+const panelAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs;
+  return rest;
+});
+const panelClass = computed(() => attrs.class);
+const panelStyle = computed(() => attrs.style);
+
+const messages = useGcsaLocaleMessages();
+const injectedTheme = inject<ComputedRef<GcsaConsoleTheme> | null>(GCSA_THEME_KEY, null);
+const theme = computed(() => injectedTheme?.value ?? 'dark');
+const { nextZIndex } = useGcsaZIndex();
+const backdropZ = ref<number>();
+const positionerZ = ref<number>();
+
+const props = withDefaults(
+  defineProps<GcsaModalProps>(),
+  {
+    closable: true
+  }
+);
+
+const emit = defineEmits<{
+  'update:open': [value: boolean];
+}>();
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      backdropZ.value = nextZIndex();
+      positionerZ.value = nextZIndex();
+    }
+  },
+  { immediate: true }
+);
+
+const backdropStyle = computed(() =>
+  backdropZ.value == null ? undefined : { zIndex: backdropZ.value }
+);
+
+const positionerStyle = computed(() =>
+  positionerZ.value == null ? undefined : { zIndex: positionerZ.value }
+);
+
+function onOpenChange(open: boolean) {
+  emit('update:open', open);
+}
+</script>

package/src/components/GcsaMultiSelect.vue

@@ -0,0 +1,197 @@
+<template>
+  <Select.Root
+    :collection="collection"
+    :model-value="selectedValues"
+    multiple
+    :close-on-select="false"
+    :positioning="positioningOptions"
+    lazy-mount
+    unmount-on-exit
+    @update:model-value="onChange"
+    @open-change="(details) => onOpenChange(details.open)"
+  >
+    <Select.Control class="gcsa-select-control gcsa-multi-select">
+      <Select.Trigger
+        class="gcsa-select-trigger gcsa-multi-select__trigger gcsa-focus-ring"
+        :class="triggerSizeClass"
+        :data-invalid="invalid || undefined"
+      >
+        <span class="gcsa-multi-select__value">
+          <span v-if="selectedOptions.length === 0" class="gcsa-multi-select__placeholder">
+            {{ placeholder }}
+          </span>
+          <template v-else>
+            <GcsaTag
+              v-for="option in visibleTags"
+              :key="option.value"
+              tone="primary"
+              class="gcsa-multi-select__tag"
+            >
+              <span class="gcsa-multi-select__tag-label">{{ option.label }}</span>
+              <button
+                type="button"
+                class="gcsa-multi-select__tag-remove"
+                aria-label="remove"
+                @pointerdown.stop.prevent
+                @click.stop.prevent="removeTag(option.value)"
+              >
+                <GcsaIcon name="close" size="sm" />
+              </button>
+            </GcsaTag>
+            <GcsaTag
+              v-if="hiddenCount > 0"
+              tone="primary"
+              class="gcsa-multi-select__tag gcsa-multi-select__tag--rest"
+            >
+              +{{ hiddenCount }}
+            </GcsaTag>
+          </template>
+        </span>
+        <Select.Indicator class="gcsa-select-indicator" aria-hidden="true">
+          <GcsaIcon name="chevronDown" class="gcsa-select-indicator__icon" />
+        </Select.Indicator>
+      </Select.Trigger>
+    </Select.Control>
+    <GcsaPortal :portalled="portalled">
+      <Select.Positioner :style="positionerStyle">
+        <Select.Content class="gcsa-select-content gcsa-ui-surface" :style="contentStyle">
+          <div v-if="isEmpty" class="gcsa-select-empty" role="status">
+            <span class="gcsa-select-empty__text">{{ emptyText }}</span>
+          </div>
+          <template v-else>
+            <Select.List class="gcsa-select-list">
+              <Select.ItemGroup
+                v-for="[groupLabel, groupItems] in collection.group()"
+                :key="groupLabel || 'default'"
+                class="gcsa-select-group"
+              >
+                <Select.ItemGroupLabel v-if="groupLabel" class="gcsa-select-group__label">
+                  {{ groupLabel }}
+                </Select.ItemGroupLabel>
+                <Select.Item
+                  v-for="opt in groupItems"
+                  :key="opt.value"
+                  :item="opt"
+                  class="gcsa-select-item"
+                >
+                  <Select.ItemText class="gcsa-select-item__text">{{ opt.label }}</Select.ItemText>
+                  <Select.ItemIndicator class="gcsa-select-item__check">
+                    <GcsaIcon name="check" size="sm" class="gcsa-select-item__check-icon" />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              </Select.ItemGroup>
+            </Select.List>
+            <div v-if="showListHint" class="gcsa-select-hint">
+              {{ listHintText }}
+            </div>
+          </template>
+        </Select.Content>
+      </Select.Positioner>
+    </GcsaPortal>
+    <Select.HiddenSelect />
+  </Select.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { createListCollection } from '@ark-ui/vue/collection';
+import { Select } from '@ark-ui/vue/select';
+import type { GcsaSelectOption, GcsaSelectSize } from '@gcsa/console-core';
+import type { GcsaMultiSelectProps } from '../types/componentProps';
+import { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaTag from './GcsaTag.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaMultiSelect' });
+
+const props = withDefaults(
+  defineProps<GcsaMultiSelectProps>(),
+  {
+    options: () => [],
+    listMaxHeight: 280,
+    listHintThreshold: 16,
+    maxTagCount: 2,
+    portalled: true,
+    sameWidth: true,
+    placement: 'bottom-start'
+  }
+);
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const triggerSizeClass = computed(() => gcsaControlSizeClass('gcsa-select-trigger', resolvedSize.value));
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
+
+const messages = useGcsaLocaleMessages();
+const { zIndex: popupZIndex, onOpenChange } = useGcsaPopupZIndex();
+
+const selectedValues = computed(() => props.modelValue ?? []);
+const hasGroups = computed(() => props.options.some(item => item.group));
+
+const collection = computed(() =>
+  createListCollection({
+    items: props.options,
+    itemToValue: item => item.value,
+    itemToString: item => item.label,
+    isItemDisabled: item => item.disabled ?? false,
+    ...(hasGroups.value
+      ? {
+          groupBy: (item: GcsaSelectOption) => item.group ?? '',
+          groupSort: props.groupOrder ?? ('asc' as const)
+        }
+      : {})
+  })
+);
+
+const selectedOptions = computed(() =>
+  selectedValues.value.map(
+    item => props.options.find(opt => opt.value === item) || { label: item, value: item }
+  )
+);
+
+const visibleTags = computed(() => selectedOptions.value.slice(0, props.maxTagCount));
+const hiddenCount = computed(() =>
+  Math.max(0, selectedOptions.value.length - visibleTags.value.length)
+);
+
+const positioningOptions = computed(() =>
+  createGcsaPopupPositioning({
+    placement: props.placement,
+    sameWidth: props.sameWidth,
+    gutter: 4
+  })
+);
+
+const showListHint = computed(() => props.options.length >= props.listHintThreshold);
+const listHintText = computed(() =>
+  formatGcsaLocaleMessage(messages.value.selectListHint, { count: props.options.length })
+);
+const isEmpty = computed(() => props.options.length === 0);
+const emptyText = computed(() => messages.value.emptyDefault);
+
+const contentStyle = computed(() => ({
+  '--gcsa-select-list-max-height': `${props.listMaxHeight}px`,
+  ...(popupZIndex.value == null ? {} : { zIndex: popupZIndex.value })
+}));
+
+const positionerStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+function onChange(value: string[]) {
+  emit('update:modelValue', value ?? []);
+}
+
+function removeTag(optionValue: string) {
+  emit(
+    'update:modelValue',
+    selectedValues.value.filter(item => item !== optionValue)
+  );
+}
+</script>

package/src/components/GcsaPagination.vue

@@ -0,0 +1,147 @@
+<template>
+  <div
+    class="gcsa-pagination"
+    :class="alignClass"
+    role="navigation"
+    :aria-label="messages.paginationLabel"
+  >
+    <template v-for="(part, index) in layoutParts" :key="`${part}-${index}`">
+      <div v-if="part === 'total'" class="gcsa-pagination__total">
+        {{ totalText }}
+      </div>
+      <div v-else-if="part === 'sizes'" class="gcsa-pagination__size">
+        <span>{{ resolvedPageSizeLabel }}</span>
+        <GcsaSelect
+          class="gcsa-pagination__size-select"
+          :model-value="String(pageSize)"
+          :options="pageSizeSelectOptions"
+          :aria-label="resolvedPageSizeAria"
+          @update:model-value="setPageSize(Number($event))"
+        />
+      </div>
+      <button
+        v-else-if="part === 'prev'"
+        type="button"
+        class="gcsa-pagination__btn gcsa-pagination__btn--nav gcsa-focus-ring"
+        :disabled="page <= 1"
+        @click="setPage(page - 1)"
+      >
+        {{ messages.paginationPrev }}
+      </button>
+      <div v-else-if="part === 'pager'" class="gcsa-pagination__pager">
+        <template v-for="item in pages" :key="item">
+          <span v-if="typeof item !== 'number'" class="gcsa-pagination__ellipsis" aria-hidden="true">…</span>
+          <button
+            v-else
+            type="button"
+            class="gcsa-pagination__btn gcsa-focus-ring"
+            :class="{ 'gcsa-pagination__btn--active': item === page }"
+            @click="setPage(item)"
+          >
+            {{ item }}
+          </button>
+        </template>
+      </div>
+      <button
+        v-else-if="part === 'next'"
+        type="button"
+        class="gcsa-pagination__btn gcsa-pagination__btn--nav gcsa-focus-ring"
+        :disabled="page >= totalPages"
+        @click="setPage(page + 1)"
+      >
+        {{ messages.paginationNext }}
+      </button>
+      <div v-else-if="part === 'jumper'" class="gcsa-pagination__jumper">
+        <span>{{ resolvedJumperLabel }}</span>
+        <GcsaInputNumber
+          class="gcsa-pagination__jumper-input"
+          :model-value="page"
+          :min="1"
+          :max="totalPages"
+          :precision="0"
+          controls="none"
+          @update:model-value="onJumpPage"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  formatGcsaLocaleMessage,
+  getGcsaPaginationAlignClass,
+  getGcsaPaginationItems,
+  resolveGcsaPaginationLayout
+} from '@gcsa/console-core';
+import type { GcsaPaginationProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import GcsaSelect from './GcsaSelect.vue';
+import GcsaInputNumber from './GcsaInputNumber.vue';
+
+defineOptions({ name: 'GcsaPagination' });
+
+const messages = useGcsaLocaleMessages();
+
+const props = withDefaults(
+  defineProps<GcsaPaginationProps>(),
+  {
+    pageSize: 10,
+    pageSizeOptions: () => [10, 20, 50, 100],
+    showPageSize: false,
+    showJumper: false,
+    align: 'right'
+  }
+);
+
+const resolvedPageSizeLabel = computed(() => props.pageSizeLabel ?? messages.value.paginationPageSize);
+const resolvedJumperLabel = computed(() => props.jumperLabel ?? messages.value.paginationJumper);
+const resolvedPageSizeAria = computed(() => messages.value.paginationPageSizeAria);
+
+const emit = defineEmits<{
+  'update:page': [page: number];
+  'update:pageSize': [pageSize: number];
+}>();
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));
+
+const layoutParts = computed(() =>
+  resolveGcsaPaginationLayout({
+    layout: props.layout,
+    showPageSize: props.showPageSize,
+    showJumper: props.showJumper
+  })
+);
+
+const alignClass = computed(() => getGcsaPaginationAlignClass(props.align));
+
+const totalText = computed(() => formatGcsaLocaleMessage(messages.value.dataTableTotal, { count: props.total }));
+
+const pages = computed(() => {
+  return getGcsaPaginationItems(props.page, totalPages.value);
+});
+
+function onJumpPage(value: number | null) {
+  if (value == null || Number.isNaN(value)) return;
+  setPage(value);
+}
+
+const pageSizeSelectOptions = computed(() =>
+  props.pageSizeOptions.map(size => ({
+    value: String(size),
+    label: `${size} / 页`
+  }))
+);
+
+function setPage(next: number) {
+  const clamped = Math.min(Math.max(1, next), totalPages.value);
+  emit('update:page', clamped);
+}
+
+function setPageSize(next: number) {
+  if (!props.pageSizeOptions.includes(next) || next === props.pageSize) return;
+  emit('update:pageSize', next);
+  emit('update:page', 1);
+}
+</script>