@xleddyl/443-components-vue 0.10.2 → 0.11.0

package/dist/components/forms/Combobox.vue

@@ -20,7 +20,7 @@
          :class="[
   `k-field-${size}`,
   {
-    'is-invalid': control.invalid.value,
+    'is-invalid': invalid,
     'is-disabled': control.disabled.value,
     'is-readonly': readonly
   }
@@ -48,8 +48,14 @@
             v-bind="$attrs"
             :disabled="control.disabled.value || void 0"
             :aria-required="control.required.value ? 'true' : void 0"
-            :aria-invalid="control.invalid.value ? 'true' : void 0"
-            :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+            :aria-invalid="invalid ? 'true' : void 0"
+            :aria-describedby="
+  joinIds(
+    $attrs['aria-describedby'],
+    control.describedBy.value,
+    localError ? errorId : void 0
+  )
+"
             class="k-combobox-input"
             type="text"
             role="combobox"
@@ -167,6 +173,7 @@
             <slot name="empty" :query="query">{{ emptyLabel }}</slot>
          </div>
       </div>
+      <FieldMessage v-if="localError" :id="errorId" :message="createError" />
       <LiveRegion :message="live.message.value" />
       <template v-if="formName">
          <input
@@ -203,6 +210,7 @@ import { normalizeSearch } from "../../internal/core/text";
 import { translateOr } from "../../locale";
 import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
+import FieldMessage from "../core/FieldMessage.vue";
 import Spinner from "../core/Spinner.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -213,6 +221,8 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   hideTags: { type: Boolean, required: false },
   creatable: { type: [Boolean, Function], required: false },
+  createValidate: { type: Function, required: false },
+  createTransform: { type: Function, required: false },
   debounce: { type: Number, required: false, default: 250 },
   minQueryLength: { type: Number, required: false, default: 0 },
   maxSelected: { type: Number, required: false },
@@ -260,6 +270,8 @@ const rootRef = useTemplateRef("rootRef");
 const controlRef = useTemplateRef("controlRef");
 const panelRef = useTemplateRef("panelRef");
 const inputRef = useTemplateRef("inputRef");
+const errorId = `${baseId}-create-error`;
+const createError = ref();
 const editing = ref(false);
 const activeIndex = ref(-1);
 const results = shallowRef([]);
@@ -294,6 +306,13 @@ const layer = useFloatingLayer({
   onOpen: () => emit("open"),
   onClose: () => emit("close")
 });
+const invalid = computed(() => control.invalid.value || Boolean(createError.value));
+const localError = computed(() => Boolean(createError.value) && !control.field);
+function setCreateError(message) {
+  if (createError.value === message) return;
+  createError.value = message;
+  control.setControlError(message);
+}
 const interactive = computed(() => !control.disabled.value && !props.readonly);
 const busy = computed(() => props.loading || search.searching.value);
 const formName = computed(() => props.name ?? control.field?.name.value);
@@ -336,7 +355,9 @@ const filteredOptions = computed(() => {
 });
 const createCandidate = computed(() => {
   if (!props.creatable || busy.value) return void 0;
-  const text = activeQuery.value;
+  const raw = activeQuery.value;
+  if (!raw) return void 0;
+  const text = (props.createTransform ? props.createTransform(raw) ?? "" : raw).trim();
   if (!text) return void 0;
   const needle = normalizeSearch(text);
   const exists = [...filteredOptions.value, ...known.values()].some(
@@ -423,6 +444,7 @@ function resetQuery() {
   editing.value = false;
   query.value = "";
 }
+watch(query, () => setCreateError(void 0));
 function onInput(event) {
   query.value = event.target.value;
   editing.value = true;
@@ -531,6 +553,13 @@ function onKeydown(event) {
 async function choose(item) {
   if (item.option.disabled) return;
   if (item.kind === "create") {
+    const verdict = props.createValidate?.(item.option.label);
+    if (typeof verdict === "string" && verdict) {
+      setCreateError(verdict);
+      if (!control.field) live.announce(verdict);
+      return;
+    }
+    setCreateError(void 0);
     let created;
     try {
       created = typeof props.creatable === "function" ? await props.creatable(item.option.label) : item.option;

package/dist/components/forms/Combobox.vue.d.ts

@@ -1,6 +1,6 @@
 import type { IconName } from '../../composables/useIcons';
 import type { FieldSize } from '../core/types';
-import type { ComboboxCreate, ComboboxOption, ComboboxSearch } from './types';
+import type { ComboboxCreate, ComboboxCreateTransform, ComboboxCreateValidate, ComboboxOption, ComboboxSearch } from './types';
 declare const __VLS_export: <T extends string | number, M extends T | T[] | null | undefined = T | T[] | null | undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options?: ComboboxOption<T>[];
@@ -10,6 +10,8 @@ declare const __VLS_export: <T extends string | number, M extends T | T[] | null
         multiple?: boolean;
         hideTags?: boolean;
         creatable?: boolean | ComboboxCreate<T>;
+        createValidate?: ComboboxCreateValidate;
+        createTransform?: ComboboxCreateTransform;
         debounce?: number;
         minQueryLength?: number;
         maxSelected?: number;

package/dist/components/forms/NumberInput.vue.d.ts

@@ -487,10 +487,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
 }>, {
     size: FieldSize;
+    stepper: boolean;
     invalid: boolean;
     step: number;
     align: "end" | "start";
-    stepper: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/forms/PinInput.vue.d.ts

@@ -243,8 +243,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     clear: () => void;
     el: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | null | undefined) => any;
     complete: (value: string) => any;
+    "update:modelValue": (value: string | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
     length?: number;
     mode?: PinInputMode;
@@ -484,8 +484,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
     length: number;
     size: FieldSize;

package/dist/components/forms/types.d.ts

@@ -31,6 +31,8 @@ export interface ComboboxOption<T = string | number> {
     keywords?: string[];
 }
 export type ComboboxSearch<T = string | number> = (query: string, signal: AbortSignal) => Promise<ComboboxOption<T>[]> | ComboboxOption<T>[];
+export type ComboboxCreateValidate = (input: string) => string | true | null | undefined | void;
+export type ComboboxCreateTransform = (input: string) => string | null | undefined;
 export type ComboboxCreate<T = string | number> = (query: string) => ComboboxOption<T> | Promise<ComboboxOption<T>>;
 export interface CalendarRange {
     start: string | null;

package/dist/components/layout/AppShell.vue

@@ -8,8 +8,9 @@
   'is-nav-open': open,
   'is-mobile': mobile,
   'is-named': viewTransition,
-  'is-fill': fill
+  'is-fill': contentMode === 'bleed'
 }"
+      :data-content="contentMode"
       @keydown.esc="onEscape"
    >
       <a
@@ -62,7 +63,16 @@
             <slot name="topbar" :open-nav="openNav" :mobile="mobile" :collapsed="collapsed" />
          </header>
          <main :id="mainId" class="k-shell-main" tabindex="-1">
-            <div class="k-shell-content" :class="{ 'is-fluid': fluid, 'is-fill': fill }">
+            <div
+               class="k-shell-content"
+               :class="[
+  `k-shell-content-${contentMode}`,
+  {
+    'is-fluid': fluid && contentMode === 'page',
+    'is-fill': contentMode === 'bleed'
+  }
+]"
+            >
                <slot />
             </div>
          </main>
@@ -98,11 +108,13 @@ const props = defineProps({
   skipLabel: { type: String, required: false },
   fluid: { type: Boolean, required: false },
   fill: { type: Boolean, required: false },
+  content: { type: String, required: false },
   topbar: { type: Boolean, required: false, default: void 0 },
   storageKey: { type: [String, Boolean], required: false },
   shortcut: { type: [String, Boolean], required: false, default: false },
   viewTransition: { type: Boolean, required: false }
 });
+const contentMode = computed(() => props.content ?? (props.fill ? "bleed" : "page"));
 const { t } = useLocale();
 const sidebarText = computed(() => props.sidebarLabel ?? t("shell.navigation"));
 const closeText = computed(() => props.closeLabel ?? t("shell.closeNavigation"));

package/dist/components/layout/AppShell.vue.d.ts

@@ -1,4 +1,4 @@
-import type { AppShellVariant } from './types';
+import type { AppShellVariant, ShellContent } from './types';
 declare function toggleCollapsed(): void;
 declare function openNav(): void;
 declare function closeNav(options?: {
@@ -33,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     skipLabel?: string;
     fluid?: boolean;
     fill?: boolean;
+    content?: ShellContent;
     topbar?: boolean;
     storageKey?: string | false;
     shortcut?: string | false;
@@ -247,6 +248,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     skipLabel?: string;
     fluid?: boolean;
     fill?: boolean;
+    content?: ShellContent;
     topbar?: boolean;
     storageKey?: string | false;
     shortcut?: string | false;

package/dist/components/layout/Stepper.vue

@@ -0,0 +1,148 @@
+<template>
+   <nav
+      class="k-stepper"
+      :class="[
+  `k-stepper-${orientation}`,
+  `k-stepper-${size}`,
+  { 'is-compact': compact === true, 'is-auto-compact': compact === 'auto' }
+]"
+      :aria-label="labelText"
+   >
+      <ol ref="list" class="k-stepper-list">
+         <li
+            v-for="(entry, index) in entries"
+            :key="entry.step.value"
+            class="k-stepper-item"
+            :class="{
+  'is-current': entry.current,
+  'is-complete': entry.status === 'complete',
+  'is-error': entry.status === 'error',
+  'is-upcoming': entry.status === 'upcoming',
+  'is-disabled': !entry.enabled
+}"
+            :data-state="entry.status"
+         >
+            <component
+               :is="entry.enabled ? 'button' : 'span'"
+               :type="entry.enabled ? 'button' : void 0"
+               class="k-stepper-step"
+               :data-index="index"
+               :aria-current="entry.current ? 'step' : void 0"
+               :aria-disabled="!entry.enabled && !entry.current && !readonly ? 'true' : void 0"
+               :tabindex="entry.enabled ? index === focusIndex ? 0 : -1 : void 0"
+               @click="entry.enabled && select(entry.step)"
+               @focus="focusIndex = index"
+               @keydown="onKeydown($event, index)"
+            >
+               <span class="k-stepper-indicator" aria-hidden="true">
+                  <Icon v-if="entry.status === 'error'" name="exclamation-circle" />
+                  <Icon v-else-if="entry.status === 'complete'" name="check" />
+                  <Icon v-else-if="entry.step.icon" :name="entry.step.icon" />
+                  <span v-else class="k-stepper-number">{{ index + 1 }}</span>
+               </span>
+               <span class="k-stepper-text">
+                  <span class="k-visually-hidden">{{ positionText(index) }}</span>
+                  <span class="k-stepper-label">{{ entry.step.label }}</span>
+                  <span v-if="entry.step.description" class="k-stepper-description">{{
+                     entry.step.description
+                  }}</span>
+                  <span v-if="entry.status === 'complete'" class="k-visually-hidden">{{
+                     completeText
+                  }}</span>
+                  <span v-else-if="entry.status === 'error'" class="k-visually-hidden">{{
+                     errorText
+                  }}</span>
+               </span>
+            </component>
+            <span
+               v-if="index < entries.length - 1"
+               class="k-stepper-connector"
+               aria-hidden="true"
+            />
+         </li>
+      </ol>
+      <p v-if="compact !== false && currentEntry" class="k-stepper-summary" aria-hidden="true">
+         <span class="k-stepper-summary-position">{{ positionText(currentIndex) }}</span>
+         <span class="k-stepper-summary-label">{{ currentEntry.step.label }}</span>
+      </p>
+   </nav>
+</template>
+
+<script setup>
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { useLocale } from "../../composables/useLocale";
+import { translateOr } from "../../locale";
+import { rovingIndex } from "../../internal/core/roving";
+import Icon from "../core/Icon.vue";
+const props = defineProps({
+  steps: { type: Array, required: true },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: String, required: false, default: "md" },
+  linear: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  compact: { type: [Boolean, String], required: false, default: "auto" },
+  positionLabel: { type: String, required: false },
+  completeLabel: { type: String, required: false },
+  errorLabel: { type: String, required: false }
+});
+const model = defineModel({ type: [String, Number] });
+const emit = defineEmits(["select"]);
+const { locale, t } = useLocale();
+const list = useTemplateRef("list");
+const labelText = computed(() => props.label ?? t("stepper.label"));
+const completeText = computed(() => props.completeLabel ?? t("stepper.complete"));
+const errorText = computed(() => props.errorLabel ?? t("stepper.error"));
+function positionText(index) {
+  return translateOr(locale.value, props.positionLabel, "stepper.position", {
+    step: index + 1,
+    count: props.steps.length
+  });
+}
+const currentIndex = computed(
+  () => Math.max(
+    0,
+    props.steps.findIndex((step) => step.value === model.value)
+  )
+);
+const entries = computed(
+  () => props.steps.map((step, index) => {
+    const current = index === currentIndex.value;
+    const status = step.state === "error" ? "error" : step.state === "complete" ? "complete" : current ? "current" : "upcoming";
+    const reachable = !props.linear || index <= currentIndex.value || step.state === "complete";
+    const enabled = !props.readonly && !step.disabled && reachable;
+    return { step, current, status, enabled };
+  })
+);
+const currentEntry = computed(() => entries.value[currentIndex.value]);
+const focusIndex = ref(currentIndex.value);
+watch(currentIndex, (index) => {
+  focusIndex.value = index;
+});
+watch(
+  entries,
+  (list2) => {
+    if (list2[focusIndex.value]?.enabled) return;
+    const fallback = list2.findIndex((entry) => entry.enabled);
+    if (fallback !== -1) focusIndex.value = fallback;
+  },
+  { immediate: true }
+);
+function select(step) {
+  emit("select", step);
+  model.value = step.value;
+}
+function onKeydown(event, index) {
+  const target = rovingIndex(
+    event.key,
+    index,
+    entries.value.length,
+    props.orientation === "vertical" ? "vertical" : "horizontal",
+    (candidate) => !entries.value[candidate]?.enabled
+  );
+  if (target === null) return;
+  event.preventDefault();
+  focusIndex.value = target;
+  list.value?.querySelector(`[data-index="${target}"]`)?.focus();
+}
+</script>