@gcsa/console-vue 0.1.0

package/src/components/GcsaPopconfirm.vue

@@ -0,0 +1,93 @@
+<template>
+  <Popover.Root :open="open" :positioning="positioningOptions" @update:open="handleOpenChange">
+    <Popover.Trigger v-if="hasTriggerSlot" as-child>
+      <slot name="trigger" />
+    </Popover.Trigger>
+    <Popover.Trigger v-else>
+      <GcsaButton variant="danger">{{ resolvedTriggerLabel }}</GcsaButton>
+    </Popover.Trigger>
+    <GcsaPortal :portalled="portalled">
+      <Popover.Positioner :style="positionerStyle">
+        <Popover.Content class="gcsa-popconfirm gcsa-ui-surface" :style="contentStyle">
+          <div v-if="resolvedTitle" class="gcsa-popconfirm__title">{{ resolvedTitle }}</div>
+          <div v-if="description" class="gcsa-popconfirm__desc">{{ description }}</div>
+          <div class="gcsa-popconfirm__actions">
+            <GcsaButton variant="ghost" @click="cancel">{{ resolvedCancelText }}</GcsaButton>
+            <GcsaButton variant="danger" @click="confirm">{{ resolvedOkText }}</GcsaButton>
+          </div>
+          <Popover.Arrow v-if="arrow" class="gcsa-popconfirm__arrow">
+            <Popover.ArrowTip class="gcsa-popconfirm__arrow-tip" />
+          </Popover.Arrow>
+        </Popover.Content>
+      </Popover.Positioner>
+    </GcsaPortal>
+  </Popover.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue';
+import { Popover } from '@ark-ui/vue/popover';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import type { GcsaPopconfirmProps } from '../types/componentProps';
+import GcsaButton from './GcsaButton.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+
+defineOptions({ name: 'GcsaPopconfirm' });
+
+const props = withDefaults(
+  defineProps<GcsaPopconfirmProps>(),
+  {
+    placement: 'top',
+    arrow: true,
+    portalled: true,
+    gutter: 8
+  }
+);
+
+const messages = useGcsaLocaleMessages();
+const resolvedTitle = computed(() => props.title ?? messages.value.confirmAction);
+const resolvedOkText = computed(() => props.okText ?? messages.value.confirm);
+const resolvedCancelText = computed(() => props.cancelText ?? messages.value.cancel);
+const resolvedTriggerLabel = computed(() => props.triggerLabel ?? messages.value.delete);
+const hasTriggerSlot = computed(() => Boolean(useSlots().trigger));
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const open = ref(false);
+const { zIndex: popupZIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();
+
+const positionerStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const contentStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const positioningOptions = computed(() =>
+  createGcsaPopupPositioning({
+    placement: props.placement,
+    gutter: props.gutter
+  })
+);
+
+function handleOpenChange(value: boolean) {
+  onPopupOpenChange(value);
+  open.value = value;
+}
+
+function confirm() {
+  open.value = false;
+  emit('confirm');
+}
+
+function cancel() {
+  open.value = false;
+  emit('cancel');
+}
+</script>

package/src/components/GcsaPopover.vue

@@ -0,0 +1,121 @@
+<template>
+  <Popover.Root
+    :open="resolvedOpen"
+    :positioning="positioningOptions"
+    @open-change="(details) => handleOpenChange(details.open)"
+  >
+    <Popover.Trigger v-if="hasTriggerSlot" as-child>
+      <slot name="trigger" />
+    </Popover.Trigger>
+    <Popover.Trigger v-else>
+      <GcsaButton variant="secondary">{{ resolvedTriggerLabel }}</GcsaButton>
+    </Popover.Trigger>
+    <GcsaPortal :portalled="portalled">
+      <Popover.Positioner :style="positionerStyle">
+        <Popover.Content :class="contentClassNames" :style="contentStyle">
+          <Popover.Title v-if="title" class="gcsa-popover__title">{{ title }}</Popover.Title>
+          <div class="gcsa-popover__body">
+            <slot />
+          </div>
+          <div v-if="hasFooterSlot" class="gcsa-popover__footer">
+            <slot name="footer" />
+          </div>
+          <Popover.Arrow v-if="arrow" class="gcsa-popover__arrow">
+            <Popover.ArrowTip class="gcsa-popover__arrow-tip" />
+          </Popover.Arrow>
+        </Popover.Content>
+      </Popover.Positioner>
+    </GcsaPortal>
+  </Popover.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from 'vue';
+import { Popover } from '@ark-ui/vue/popover';
+import { createGcsaPopupPositioning, toCssLength } from '@gcsa/console-core';
+import type { GcsaPopoverProps } from '../types/componentProps';
+import GcsaButton from './GcsaButton.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+
+defineOptions({ name: 'GcsaPopover' });
+
+const props = withDefaults(
+  defineProps<GcsaPopoverProps>(),
+  {
+    placement: 'bottom',
+    arrow: true,
+    portalled: true,
+    gutter: 8,
+    size: 'default'
+  }
+);
+
+const emit = defineEmits<{
+  'open-change': [open: boolean];
+}>();
+
+const messages = useGcsaLocaleMessages();
+const { zIndex: popupZIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();
+const resolvedTriggerLabel = computed(() => props.triggerLabel ?? messages.value.open);
+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));
+
+watch(
+  () => props.open,
+  (next) => {
+    if (next !== undefined) {
+      internalOpen.value = next;
+    }
+  }
+);
+
+const positionerStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const contentStyle = computed(() => {
+  const style: Record<string, string | number> = {};
+  if (popupZIndex.value != null) style.zIndex = popupZIndex.value;
+  const resolvedWidth = toCssLength(props.width);
+  const resolvedMinWidth = toCssLength(props.minWidth);
+  const resolvedMaxWidth = toCssLength(props.maxWidth);
+  if (resolvedWidth) style.width = resolvedWidth;
+  if (resolvedMinWidth) style.minWidth = resolvedMinWidth;
+  if (resolvedMaxWidth) style.maxWidth = resolvedMaxWidth;
+  return Object.keys(style).length ? style : undefined;
+});
+
+const contentClassNames = computed(() =>
+  [
+    'gcsa-popover',
+    'gcsa-ui-surface',
+    props.size === 'lg' ? 'gcsa-popover--lg' : undefined,
+    hasFooterSlot.value ? 'gcsa-popover--with-footer' : undefined,
+    props.contentClassName
+  ]
+    .filter(Boolean)
+    .join(' ')
+);
+
+const positioningOptions = computed(() =>
+  createGcsaPopupPositioning({
+    placement: props.placement,
+    gutter: props.gutter
+  })
+);
+
+function handleOpenChange(nextOpen: boolean) {
+  if (!isControlled.value) {
+    internalOpen.value = nextOpen;
+  }
+  emit('open-change', nextOpen);
+  onPopupOpenChange(nextOpen);
+}
+</script>

package/src/components/GcsaPortal.vue

@@ -0,0 +1,41 @@
+<template>
+  <Teleport v-if="shouldPortal" :to="resolvedTarget">
+    <div class="gcsa-portal-scope" :data-gcsa-theme="theme">
+      <slot />
+    </div>
+  </Teleport>
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, 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';
+
+defineOptions({ name: 'GcsaPortal' });
+
+const props = withDefaults(
+  defineProps<GcsaPortalProps>(),
+  {
+    portalled: true
+  }
+);
+
+const injectedTheme = inject<ComputedRef<GcsaConsoleTheme> | null>(GCSA_THEME_KEY, null);
+const theme = computed(() => injectedTheme?.value ?? 'dark');
+
+/**
+ * 延迟到客户端挂载后再创建 Teleport，避免 Suspense / 异步父组件初次渲染时
+ * Vue 对 Teleport 做 deferred mount 却找不到 parentNode 的竞态。
+ * 浮层统一挂 body，层级由 useGcsaZIndex 栈管理（勿挂到 modal 内 fixed 容器，会破坏定位）。
+ */
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+
+const resolvedTarget = computed(() => props.to ?? 'body');
+
+const shouldPortal = computed(() => props.portalled && mounted.value);
+</script>

package/src/components/GcsaProgress.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="gcsa-progress" role="progressbar" :aria-valuenow="percent" aria-valuemin="0" aria-valuemax="100">
+    <div class="gcsa-progress__bar" :style="{ width: `${percent}%` }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaProgressProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaProgress' });
+
+withDefaults(
+  defineProps<GcsaProgressProps>(),
+  { percent: 0 }
+);
+</script>

package/src/components/GcsaRadioGroup.vue

@@ -0,0 +1,45 @@
+<template>
+  <RadioGroup.Root
+    :model-value="modelValue"
+    :orientation="orientation"
+    class="gcsa-radio-group"
+    :class="`gcsa-radio-group--${orientation}`"
+    @update:model-value="onChange"
+  >
+      <RadioGroup.Item
+        v-for="opt in options"
+        :key="opt.value"
+        :value="opt.value"
+        :disabled="opt.disabled"
+        class="gcsa-radio gcsa-focus-ring"
+      >
+        <RadioGroup.ItemHiddenInput />
+        <RadioGroup.ItemControl class="gcsa-radio__control">
+          <span class="gcsa-radio__dot" aria-hidden="true" />
+        </RadioGroup.ItemControl>
+        <RadioGroup.ItemText class="gcsa-radio__label">{{ opt.label }}</RadioGroup.ItemText>
+      </RadioGroup.Item>
+  </RadioGroup.Root>
+</template>
+
+<script setup lang="ts">
+import { RadioGroup } from '@ark-ui/vue/radio-group';
+import type { GcsaRadioGroupProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaRadioGroup' });
+
+withDefaults(
+  defineProps<GcsaRadioGroupProps>(),
+  {
+    orientation: 'vertical'
+  }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+function onChange(value: string | null) {
+  emit('update:modelValue', value ?? '');
+}
+</script>

package/src/components/GcsaResult.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="gcsa-result gcsa-ui-surface">
+    <div class="gcsa-result__icon" aria-hidden="true">
+      <slot name="icon">
+        <GcsaIcon name="resultEmpty" />
+      </slot>
+    </div>
+    <div class="gcsa-result__title">{{ title }}</div>
+    <div v-if="subtitle" class="gcsa-result__subtitle">{{ subtitle }}</div>
+    <div v-if="$slots.extra" class="gcsa-result__extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaResultProps } from '../types/componentProps';
+import GcsaIcon from './GcsaIcon.vue';
+
+defineOptions({ name: 'GcsaResult' });
+
+defineProps<GcsaResultProps>();
+</script>

package/src/components/GcsaRow.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="gcsa-row" :class="`gcsa-row--${cols}`">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaRowProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaRow' });
+
+withDefaults(
+  defineProps<GcsaRowProps>(),
+  { cols: 2 }
+);
+</script>

package/src/components/GcsaSelect.vue

@@ -0,0 +1,154 @@
+<template>
+  <Select.Root
+    :collection="collection"
+    :model-value="selectedValue"
+    :positioning="positioningOptions"
+    lazy-mount
+    unmount-on-exit
+    @update:model-value="onChange"
+    @open-change="(details) => onOpenChange(details.open)"
+  >
+    <Select.Control class="gcsa-select-control">
+      <Select.Trigger
+        class="gcsa-select-trigger gcsa-focus-ring"
+        :class="triggerSizeClass"
+        :data-invalid="invalid || undefined"
+      >
+        <Select.ValueText class="gcsa-select-value" :placeholder="placeholder" />
+        <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 { GcsaSelectProps } from '../types/componentProps';
+import { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaSelect' });
+
+const props = withDefaults(
+  defineProps<GcsaSelectProps>(),
+  {
+    options: () => [],
+    listMaxHeight: 280,
+    listHintThreshold: 16,
+    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 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 selectedValue = computed(() => (props.modelValue == null ? [] : [props.modelValue]));
+
+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[0] ?? '');
+}
+</script>

package/src/components/GcsaSkeleton.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="gcsa-skeleton"
+    :style="{ width, height }"
+    aria-hidden="true"
+  />
+</template>
+
+<script setup lang="ts">
+import type { GcsaSkeletonProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaSkeleton' });
+
+withDefaults(
+  defineProps<GcsaSkeletonProps>(),
+  {
+    width: '100%',
+    height: '16px'
+  }
+);
+</script>

package/src/components/GcsaSpace.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="gcsa-space" :class="{ 'gcsa-space--vertical': vertical }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaSpaceProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaSpace' });
+
+defineProps<GcsaSpaceProps>();
+</script>

package/src/components/GcsaSpin.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="gcsa-spin"
+    :class="{ 'gcsa-spin--nested': hasDefaultSlot }"
+    :aria-busy="spinning"
+  >
+    <span v-if="spinning" class="gcsa-spin__dot" aria-hidden="true" />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import type { GcsaSpinProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaSpin' });
+
+withDefaults(
+  defineProps<GcsaSpinProps>(),
+  { spinning: true }
+);
+
+const slots = useSlots();
+const hasDefaultSlot = computed(() => Boolean(slots.default?.().length));
+</script>

package/src/components/GcsaStatistic.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="gcsa-statistic">
+    <div class="gcsa-statistic__label">{{ label }}</div>
+    <div class="gcsa-statistic__value">
+      <slot>{{ value }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaStatisticProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaStatistic' });
+
+defineProps<GcsaStatisticProps>();
+</script>

package/src/components/GcsaSteps.vue

@@ -0,0 +1,30 @@
+<template>
+  <ol class="gcsa-steps" :class="{ 'gcsa-steps--vertical': direction === 'vertical' }" :aria-label="messages.stepsLabel">
+    <li v-for="(item, index) in items" :key="item.key" class="gcsa-steps__item" :class="stepClass(item, index)">
+      <button v-if="clickable && !item.disabled" type="button" class="gcsa-steps__trigger gcsa-focus-ring" :aria-current="index === current ? 'step' : undefined" @click="change(index)">
+        <span class="gcsa-steps__indicator" aria-hidden="true">{{ indicator(item, index) }}</span>
+        <span class="gcsa-steps__copy"><strong>{{ item.title }}</strong><small v-if="item.description">{{ item.description }}</small></span>
+      </button>
+      <div v-else class="gcsa-steps__trigger" :aria-current="index === current ? 'step' : undefined">
+        <span class="gcsa-steps__indicator" aria-hidden="true">{{ indicator(item, index) }}</span>
+        <span class="gcsa-steps__copy"><strong>{{ item.title }}</strong><small v-if="item.description">{{ item.description }}</small></span>
+      </div>
+      <span v-if="index < items.length - 1" class="gcsa-steps__connector" aria-hidden="true" />
+    </li>
+  </ol>
+</template>
+
+<script setup lang="ts">
+import type { GcsaStepItem } from '@gcsa/console-core';
+import type { GcsaStepsProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'GcsaSteps' });
+const messages = useGcsaLocaleMessages();
+const props = withDefaults(defineProps<GcsaStepsProps>(), { current: 0, direction: 'horizontal', clickable: false });
+const emit = defineEmits<{ 'update:current': [value: number]; change: [value: number, item: GcsaStepItem] }>();
+function status(item: GcsaStepItem, index: number) { return item.status ?? (index < props.current ? 'finish' : index === props.current ? 'process' : 'wait'); }
+function stepClass(item: GcsaStepItem, index: number) { return [`gcsa-steps__item--${status(item, index)}`, { 'gcsa-steps__item--disabled': item.disabled }]; }
+function indicator(item: GcsaStepItem, index: number) { const value = status(item, index); return value === 'finish' ? '✓' : value === 'error' ? '!' : String(index + 1); }
+function change(index: number) { emit('update:current', index); emit('change', index, props.items[index]); }
+</script>

package/src/components/GcsaSwitch.vue

@@ -0,0 +1,38 @@
+<template>
+  <Switch.Root
+    :checked="modelValue"
+    :class="['gcsa-switch', 'gcsa-focus-ring', sizeClass]"
+    @checked-change="onChange"
+  >
+    <Switch.Control class="gcsa-switch__track">
+      <Switch.Thumb class="gcsa-switch__thumb" />
+    </Switch.Control>
+    <Switch.Label v-if="label || $slots.default" class="gcsa-switch__label">
+      <slot>{{ label }}</slot>
+    </Switch.Label>
+    <Switch.HiddenInput />
+  </Switch.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Switch } from '@ark-ui/vue/switch';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import type { GcsaSwitchProps } from '../types/componentProps';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaSwitch' });
+
+const props = defineProps<GcsaSwitchProps>();
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const sizeClass = computed(() => gcsaControlSizeClass('gcsa-switch', resolvedSize.value));
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+function onChange(details: { checked: boolean }) {
+  emit('update:modelValue', details.checked);
+}
+</script>