@gcsa/console-vue 0.1.0

package/src/components/GcsaForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <form class="gcsa-form" @submit.prevent="submit">
+    <slot :form="form" />
+    <div v-if="showActions" class="gcsa-form__actions">
+      <GcsaButton native-type="submit" :loading="form.state.isSubmitting" :disabled="form.state.isSubmitting">
+        {{ resolvedSubmitLabel }}
+      </GcsaButton>
+      <GcsaButton
+        variant="secondary"
+        native-type="button"
+        :disabled="form.state.isSubmitting"
+        @click="form.reset()"
+      >
+        {{ resolvedResetLabel }}
+      </GcsaButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+import { useForm } from '@tanstack/vue-form';
+import type { GcsaFormProps } from '../types/componentProps';
+import GcsaButton from './GcsaButton.vue';
+import { GCSA_FORM_SCHEMA_KEY } from '../composables/useGcsaFormSchema';
+import { useGcsaLocale, useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { zodFormValidator } from '../utils/zodValidators';
+
+defineOptions({ name: 'GcsaForm' });
+
+const props = withDefaults(
+  defineProps<GcsaFormProps>(),
+  {
+    showActions: true
+  }
+);
+
+const messages = useGcsaLocaleMessages();
+const locale = useGcsaLocale();
+const resolvedSubmitLabel = computed(() => props.submitLabel ?? messages.value.formSubmit);
+const resolvedResetLabel = computed(() => props.resetLabel ?? messages.value.formReset);
+
+if (props.schema) {
+  provide(GCSA_FORM_SCHEMA_KEY, props.schema);
+}
+
+const form = useForm({
+  defaultValues: props.defaultValues,
+  validators: props.schema
+    ? {
+        onSubmit: zodFormValidator(props.schema, locale.value)
+      }
+    : undefined,
+  onSubmit: async ({ value }) => {
+    if (props.schema) {
+      const parsed = props.schema.safeParse(value);
+      if (!parsed.success) return;
+      await props.onSubmit?.(parsed.data as Record<string, unknown>);
+      return;
+    }
+    await props.onSubmit?.(value as Record<string, unknown>);
+  }
+});
+
+function submit() {
+  form.handleSubmit();
+}
+
+defineExpose({ form });
+</script>

package/src/components/GcsaFormField.vue

@@ -0,0 +1,53 @@
+<template>
+  <component :is="form.Field" :name="name" :validators="validators">
+    <template #default="{ field }">
+      <GcsaField
+        :label="label"
+        :hint="hint"
+        :error="gcsaFieldError(field)"
+        :invalid="gcsaFieldInvalid(field)"
+        :required="required"
+      >
+        <slot :field="field" :bindings="bindings(field)" />
+      </GcsaField>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import type { FieldApi } from '@tanstack/vue-form';
+import type { GcsaFormFieldProps } from '../types/componentProps';
+import GcsaField from './GcsaField.vue';
+import { GCSA_FORM_SCHEMA_KEY } from '../composables/useGcsaFormSchema';
+import {
+  gcsaBooleanFieldBindings,
+  gcsaFieldError,
+  gcsaFieldInvalid,
+  gcsaTextFieldBindings
+} from '../composables/useGcsaFormField';
+import { zodFieldValidators } from '../utils/zodValidators';
+import { useGcsaLocale } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'GcsaFormField' });
+
+const props = withDefaults(
+  defineProps<GcsaFormFieldProps>(),
+  {
+    fieldType: 'text',
+    required: false
+  }
+);
+
+const schema = inject(GCSA_FORM_SCHEMA_KEY, null);
+const locale = useGcsaLocale();
+
+const validators = computed(() => {
+  if (!schema) return undefined;
+  return zodFieldValidators(schema, props.name, locale.value);
+});
+
+function bindings(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>) {
+  return props.fieldType === 'boolean' ? gcsaBooleanFieldBindings(field) : gcsaTextFieldBindings(field);
+}
+</script>

package/src/components/GcsaIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <span
+    class="gcsa-icon gcsa-nav-icon"
+    :class="sizeClass"
+    aria-hidden="true"
+    v-html="svg"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getGcsaIconSvg } from '../icons';
+import type { GcsaIconProps } from '../types/componentProps';
+
+const props = withDefaults(
+  defineProps<GcsaIconProps>(),
+  {
+    size: 'md'
+  }
+);
+
+const svg = computed(() => getGcsaIconSvg(props.name));
+const sizeClass = computed(() => (props.size === 'sm' ? 'gcsa-icon--sm' : undefined));
+</script>

package/src/components/GcsaImagePreview.vue

@@ -0,0 +1,28 @@
+<template>
+  <Dialog.Root :open="modelValue" lazy-mount unmount-on-exit @update:open="value => emit('update:modelValue', value)">
+    <Dialog.Backdrop class="gcsa-image-preview__backdrop" />
+    <Dialog.Positioner class="gcsa-image-preview__positioner">
+      <Dialog.Content class="gcsa-image-preview__content" :aria-label="messages.imagePreview">
+        <Dialog.CloseTrigger class="gcsa-image-preview__close" :aria-label="messages.imagePreviewClose">
+          <GcsaIcon name="close" size="sm" />
+        </Dialog.CloseTrigger>
+        <img class="gcsa-image-preview__image" :src="src" :alt="resolvedAlt" draggable="false" @error="emit('error')" />
+      </Dialog.Content>
+    </Dialog.Positioner>
+  </Dialog.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Dialog } from '@ark-ui/vue/dialog';
+import type { GcsaImagePreviewProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import GcsaIcon from './GcsaIcon.vue';
+
+defineOptions({ name: 'GcsaImagePreview' });
+
+const props = defineProps<GcsaImagePreviewProps>();
+const messages = useGcsaLocaleMessages();
+const resolvedAlt = computed(() => props.alt ?? messages.value.imagePreview);
+const emit = defineEmits<{ 'update:modelValue': [value: boolean]; error: [] }>();
+</script>

package/src/components/GcsaInput.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="gcsa-text-control gcsa-text-control--input"
+    :class="[
+      sizeClass,
+      { 'gcsa-text-control--count': showCounter }
+    ]"
+  >
+    <input
+      class="gcsa-input"
+      :value="modelValue"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly || undefined"
+      :maxlength="maxLength"
+      :data-invalid="invalid || undefined"
+      :aria-describedby="showCounter ? countId : undefined"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <span
+      v-if="showCounter"
+      :id="countId"
+      class="gcsa-text-control__count"
+      :class="{ 'gcsa-text-control__count--near': isNearLimit }"
+      aria-live="polite"
+    >
+      {{ countText }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import type { GcsaInputProps } from '../types/componentProps';
+import { useGcsaTextCount } from '../composables/useGcsaTextCount';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaInput' });
+
+const props = withDefaults(defineProps<GcsaInputProps>(), {
+  modelValue: '',
+  type: 'text',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  maxLength: undefined,
+  showCount: undefined,
+  countFormatter: undefined
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  blur: [event: FocusEvent];
+}>();
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const sizeClass = computed(() => gcsaControlSizeClass('gcsa-text-control', resolvedSize.value));
+const countId = useId();
+
+const { showCounter, countText, isNearLimit } = useGcsaTextCount({
+  modelValue: () => props.modelValue,
+  maxLength: () => props.maxLength,
+  showCount: () => props.showCount,
+  formatter: props.countFormatter
+});
+
+function onInput(event: Event) {
+  if (props.readonly) return;
+  emit('update:modelValue', (event.target as HTMLInputElement).value);
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event);
+  props.onBlur?.();
+}
+</script>

package/src/components/GcsaInputGroup.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="gcsa-input-group"
+    :class="[
+      `gcsa-input-group--${resolvedSize}`,
+      {
+        'gcsa-input-group--disabled': disabled,
+        'gcsa-input-group--invalid': invalid
+      }
+    ]"
+    :data-invalid="invalid || undefined"
+  >
+    <div class="gcsa-input-group__control">
+      <slot />
+    </div>
+    <div v-if="$slots.addon" class="gcsa-input-group__addon">
+      <slot name="addon" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaInputGroupProps } from '../types/componentProps';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaInputGroup' });
+
+const props = withDefaults(
+  defineProps<GcsaInputGroupProps>(),
+  {
+    disabled: false,
+    invalid: false
+  }
+);
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+</script>

package/src/components/GcsaInputNumber.vue

@@ -0,0 +1,165 @@
+<template>
+  <div
+    class="gcsa-input-number"
+    :class="[
+      sizeClass,
+      { 'gcsa-input-number--disabled': disabled },
+      `gcsa-input-number--controls-${controls}`
+    ]"
+  >
+    <template v-if="controls === 'both'">
+      <button
+        type="button"
+        class="gcsa-input-number__btn"
+        :disabled="disabled || isAtMin"
+        :aria-label="messages.inputNumberDecrease"
+        @click="stepDown"
+      >
+        −
+      </button>
+      <input
+        class="gcsa-input-number__input gcsa-input"
+        type="text"
+        inputmode="decimal"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :data-invalid="invalid || undefined"
+        @change="onInputChange"
+        @blur="onBlur"
+      />
+      <button
+        type="button"
+        class="gcsa-input-number__btn"
+        :disabled="disabled || isAtMax"
+        :aria-label="messages.inputNumberIncrease"
+        @click="stepUp"
+      >
+        +
+      </button>
+    </template>
+
+    <template v-else-if="controls === 'right'">
+      <input
+        class="gcsa-input-number__input gcsa-input"
+        type="text"
+        inputmode="decimal"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :data-invalid="invalid || undefined"
+        @change="onInputChange"
+        @blur="onBlur"
+      />
+      <div class="gcsa-input-number__controls">
+        <button
+          type="button"
+          class="gcsa-input-number__btn"
+          :disabled="disabled || isAtMin"
+          :aria-label="messages.inputNumberDecrease"
+          @click="stepDown"
+        >
+          −
+        </button>
+        <button
+          type="button"
+          class="gcsa-input-number__btn"
+          :disabled="disabled || isAtMax"
+          :aria-label="messages.inputNumberIncrease"
+          @click="stepUp"
+        >
+          +
+        </button>
+      </div>
+    </template>
+
+    <template v-else>
+      <input
+        class="gcsa-input-number__input gcsa-input gcsa-input-number__input--plain"
+        type="text"
+        inputmode="decimal"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :data-invalid="invalid || undefined"
+        @change="onInputChange"
+        @blur="onBlur"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import type { GcsaInputNumberProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaInputNumber' });
+
+const props = withDefaults(
+  defineProps<GcsaInputNumberProps>(),
+  {
+    step: 1,
+    precision: 0,
+    controls: 'both'
+  }
+);
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const sizeClass = computed(() => gcsaControlSizeClass('gcsa-input-number', resolvedSize.value));
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null];
+  blur: [event: FocusEvent];
+}>();
+
+const messages = useGcsaLocaleMessages();
+
+const displayValue = computed(() =>
+  props.modelValue == null || Number.isNaN(props.modelValue) ? '' : String(props.modelValue)
+);
+
+const isAtMin = computed(() => props.modelValue != null && props.min != null && props.modelValue <= props.min);
+const isAtMax = computed(() => props.modelValue != null && props.max != null && props.modelValue >= props.max);
+
+function clamp(value: number): number {
+  let next = value;
+  if (props.precision != null) {
+    const factor = 10 ** props.precision;
+    next = Math.round(next * factor) / factor;
+  }
+  if (props.min != null) next = Math.max(props.min, next);
+  if (props.max != null) next = Math.min(props.max, next);
+  return next;
+}
+
+function parseInput(raw: string): number | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const num = Number(trimmed);
+  if (Number.isNaN(num)) return props.modelValue ?? null;
+  return clamp(num);
+}
+
+function onInputChange(event: Event) {
+  const raw = (event.target as HTMLInputElement).value;
+  emit('update:modelValue', parseInput(raw));
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event);
+  props.onBlur?.();
+}
+
+function stepUp() {
+  const base = props.modelValue ?? props.min ?? 0;
+  emit('update:modelValue', clamp(base + props.step));
+}
+
+function stepDown() {
+  const base = props.modelValue ?? props.max ?? 0;
+  emit('update:modelValue', clamp(base - props.step));
+}
+</script>

package/src/components/GcsaLoadingMask.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    v-show="isVisible"
+    class="gcsa-loading-mask"
+    :class="[customClass, { 'gcsa-loading-mask--fullscreen': fullscreen }]"
+    :style="maskStyle"
+    role="status"
+    aria-live="polite"
+    :aria-label="ariaLabel"
+  >
+    <div class="gcsa-loading-spinner">
+      <div class="gcsa-loading-spinner__stage">
+        <div class="gcsa-loading-spinner__ring" aria-hidden="true" />
+        <GcsaBrandMark class="gcsa-loading-spinner__logo" />
+      </div>
+      <p v-if="displayText" class="gcsa-loading-spinner__text">{{ displayText }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref, type CSSProperties, type Ref } from 'vue';
+import type { GcsaLoadingMaskProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import GcsaBrandMark from './GcsaBrandMark.vue';
+
+defineOptions({ name: 'GcsaLoadingMask' });
+
+const messages = useGcsaLocaleMessages();
+
+const props = defineProps<GcsaLoadingMaskProps>();
+
+const isVisible = computed(() => {
+  if (props.visible === undefined) return true;
+  return unref(props.visible);
+});
+
+const displayText = computed(() => {
+  if (!props.text) return '';
+  return unref(props.text);
+});
+
+const ariaLabel = computed(() => displayText.value || messages.value.loading);
+
+const maskStyle = computed((): CSSProperties | undefined => {
+  if (!props.background) return undefined;
+  return { backgroundColor: props.background };
+});
+</script>

package/src/components/GcsaMarkdownRenderer.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    ref="rootRef"
+    class="gcsa-markdown"
+    :class="{ 'gcsa-markdown--inline': inline }"
+    v-html="html"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { renderGcsaMarkdown } from '@gcsa/console-core';
+
+import type { GcsaMarkdownRendererProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaMarkdownRenderer' });
+
+const props = withDefaults(
+  defineProps<GcsaMarkdownRendererProps>(),
+  {
+    inline: false
+  }
+);
+
+const rootRef = ref<HTMLElement | null>(null);
+
+const html = computed(() => renderGcsaMarkdown(props.content));
+
+function wrapTablesInContainer(root: HTMLElement | null) {
+  if (!root) return;
+  root.querySelectorAll('table').forEach((table) => {
+    if (table.parentElement?.classList.contains('gcsa-markdown__table-wrap')) return;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'gcsa-markdown__table-wrap';
+    table.parentNode?.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+  });
+}
+
+watch(html, async () => {
+  await nextTick();
+  wrapTablesInContainer(rootRef.value);
+});
+
+onMounted(async () => {
+  await nextTick();
+  wrapTablesInContainer(rootRef.value);
+});
+</script>

package/src/components/GcsaMenu.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { GcsaMenuProps } from '../types/componentProps';
+import GcsaMenuNodes from './GcsaMenuNodes.vue';
+
+defineOptions({ name: 'GcsaMenu' });
+
+const props = withDefaults(
+  defineProps<GcsaMenuProps>(),
+  {
+    mode: 'vertical',
+    collapsed: false
+  }
+);
+
+const emit = defineEmits<{
+  'update:selectedKey': [key: string];
+  select: [key: string];
+  'update:openKeys': [keys: string[]];
+}>();
+
+const innerSelectedKey = ref(props.selectedKey ?? props.defaultSelectedKey ?? '');
+const innerOpenKeys = ref<string[]>(props.openKeys ?? props.defaultOpenKeys ?? []);
+
+watch(
+  () => props.selectedKey,
+  value => {
+    if (value !== undefined) innerSelectedKey.value = value;
+  }
+);
+
+watch(
+  () => props.openKeys,
+  value => {
+    if (value !== undefined) innerOpenKeys.value = value;
+  }
+);
+
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) {
+      innerOpenKeys.value = [];
+      emit('update:openKeys', []);
+    }
+  }
+);
+
+const modeClass = computed(() => `gcsa-menu--${props.mode}`);
+const collapsedClass = computed(() => (props.collapsed ? 'gcsa-menu--collapsed' : ''));
+const ariaOrientation = computed(() => (props.mode === 'horizontal' ? 'horizontal' : 'vertical'));
+
+function onSelect(key: string) {
+  innerSelectedKey.value = key;
+  emit('update:selectedKey', key);
+  emit('select', key);
+}
+
+function onToggle(key: string, open: boolean) {
+  const next = open
+    ? [...new Set([...innerOpenKeys.value, key])]
+    : innerOpenKeys.value.filter(item => item !== key);
+  innerOpenKeys.value = next;
+  emit('update:openKeys', next);
+}
+</script>
+
+<template>
+  <nav
+    class="gcsa-menu gcsa-ui-surface"
+    :class="[modeClass, collapsedClass]"
+    role="menu"
+    :aria-orientation="ariaOrientation"
+  >
+    <GcsaMenuNodes
+      :items="items"
+      :mode="mode"
+      :selected-key="innerSelectedKey"
+      :open-keys="innerOpenKeys"
+      :collapsed="collapsed"
+      :depth="0"
+      @select="onSelect"
+      @toggle="onToggle"
+    />
+  </nav>
+</template>