@flux-ui/components 3.0.0 → 3.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0",
+    "version": "3.1.2",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -55,10 +55,10 @@
         "**/dist/index.css"
     ],
     "dependencies": {
-        "@basmilius/common": "^3.40.0",
-        "@basmilius/utils": "^3.40.0",
-        "@flux-ui/internals": "3.0.0",
-        "@flux-ui/types": "3.0.0",
+        "@basmilius/common": "^3.41.0",
+        "@basmilius/utils": "^3.41.0",
+        "@flux-ui/internals": "3.1.2",
+        "@flux-ui/types": "3.1.2",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -66,18 +66,18 @@
     },
     "peerDependencies": {
         "luxon": "^3.7.2",
-        "vue": "^3.6.0-beta.13"
+        "vue": "^3.6.0-beta.15"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.40.0",
+        "@basmilius/vite-preset": "^3.41.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.9.1",
+        "@types/node": "^25.9.3",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
         "vite": "^8.0.16",
-        "vue-tsc": "^3.3.3"
+        "vue-tsc": "^3.3.5"
     }
 }

package/src/component/FluxBreadcrumb.vue

@@ -0,0 +1,24 @@
+<template>
+    <nav
+        :class="$style.breadcrumb"
+        :aria-label="ariaLabel">
+        <ol :class="$style.breadcrumbList">
+            <slot/>
+        </ol>
+    </nav>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Breadcrumb.module.scss';
+
+    const {ariaLabel = 'Breadcrumb'} = defineProps<{
+        readonly ariaLabel?: string;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxBreadcrumbItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <li :class="$style.breadcrumbItem">
+        <FluxPressable
+            :class="clsx(
+                $style.breadcrumbLink,
+                isCurrent && $style.isCurrent
+            )"
+            :component-type="componentType"
+            :href="href"
+            :to="to"
+            :aria-current="isCurrent ? 'page' : undefined"
+            @click="emit('click', $event)">
+            <FluxIcon
+                v-if="icon"
+                :class="$style.breadcrumbIcon"
+                :name="icon"
+                :size="16"/>
+
+            <span
+                v-if="label || $slots.default"
+                :class="$style.breadcrumbLabel">
+                <slot>{{ label }}</slot>
+            </span>
+        </FluxPressable>
+
+        <FluxIcon
+            aria-hidden="true"
+            :class="$style.breadcrumbSeparator"
+            name="slash-forward"
+            :size="12"/>
+    </li>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, type VNode } from 'vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxPressable from './FluxPressable.vue';
+    import $style from '~flux/components/css/component/Breadcrumb.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {href, to} = defineProps<{
+        readonly href?: string;
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const componentType = computed<FluxPressableType>(() => {
+        if (to) {
+            return 'route';
+        }
+
+        if (href) {
+            return 'link';
+        }
+
+        return 'none';
+    });
+
+    const isCurrent = computed(() => componentType.value === 'none');
+</script>

package/src/component/FluxDataTable.vue

@@ -25,7 +25,7 @@
                     v-if="selectionMode"
                     is-shrinking
                     :class="$style.tableCellSelection">
-                    <FluxCheckbox
+                    <FluxFormCheckbox
                         v-if="selectionMode === 'multiple'"
                         :model-value="selectAllState"
                         @update:model-value="onSelectAll"/>
@@ -72,7 +72,7 @@
             <FluxTableCell
                 v-if="selectionMode"
                 :class="$style.tableCellSelection">
-                <FluxCheckbox
+                <FluxFormCheckbox
                     :model-value="isItemSelected(item)"
                     @update:model-value="onSelectRow(item)"/>
             </FluxTableCell>
@@ -93,7 +93,7 @@
     generic="T extends Record<string, any>">
     import { computed, unref, useTemplateRef, type VNode, watch } from 'vue';
     import { useDisabledInjection } from '~flux/components/composable';
-    import FluxCheckbox from './FluxCheckbox.vue';
+    import FluxFormCheckbox from './FluxFormCheckbox.vue';
     import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
     import FluxTableCell from './FluxTableCell.vue';

package/src/component/FluxFormCheckbox.vue

@@ -0,0 +1,123 @@
+<template>
+    <label
+        :class="clsx(
+            $style.formCheckbox,
+            disabled && $style.isDisabled,
+            isReadonlyResolved && $style.isReadonly,
+            errorResolved && $style.isInvalid
+        )"
+        :for="id">
+        <input
+            ref="input"
+            type="checkbox"
+            :class="$style.formCheckboxNative"
+            :id="id"
+            :checked="isChecked"
+            :disabled="disabled"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-readonly="isReadonlyResolved ? true : undefined"
+            :aria-invalid="errorResolved ? true : undefined"
+            @change="onChange"
+            @click="onClick"/>
+
+        <button
+            aria-hidden="true"
+            :class="$style.formCheckboxElement"
+            tabindex="-1">
+            <FluxIcon
+                v-if="isIndeterminate"
+                name="minus"
+                :size="12"/>
+
+            <FluxIcon
+                v-else
+                name="check"
+                :size="12"/>
+        </button>
+
+        <span
+            v-if="label || subLabel"
+            :class="$style.formCheckboxText">
+            <span
+                v-if="label"
+                :class="$style.formCheckboxLabel">
+                {{ label }}
+            </span>
+
+            <span
+                v-if="subLabel"
+                :class="$style.formCheckboxSubLabel">
+                {{ subLabel }}
+            </span>
+        </span>
+    </label>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref, useTemplateRef, watchEffect } from 'vue';
+    import { useDisabled, useFormCheckboxGroupInjection, useFormFieldInjection } from '~flux/components/composable';
+    import type { FluxFormCheckboxGroupValue } from '~flux/components/data';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<boolean | null>({
+        default: false
+    });
+
+    const {
+        disabled: componentDisabled,
+        error,
+        isReadonly,
+        value
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
+        readonly label?: string;
+        readonly subLabel?: string;
+        readonly value?: FluxFormCheckboxGroupValue;
+    }>();
+
+    const group = useFormCheckboxGroupInjection();
+    const inputRef = useTemplateRef('input');
+    const {id} = useFormFieldInjection();
+
+    const isGrouped = computed(() => group !== null && value !== undefined);
+
+    const disabled = useDisabled(toRef(() => componentDisabled || (group?.disabled.value ?? false)));
+    const isReadonlyResolved = computed(() => isReadonly || (group?.isReadonly.value ?? false));
+    const errorResolved = computed(() => unref(isGrouped) ? group?.error.value : error);
+
+    const isChecked = computed(() => unref(isGrouped) ? group!.has(value!) : unref(modelValue) === true);
+    const isIndeterminate = computed(() => !unref(isGrouped) && unref(modelValue) === null);
+
+    function onChange(): void {
+        if (unref(isReadonlyResolved) || unref(disabled)) {
+            return;
+        }
+
+        if (unref(isGrouped)) {
+            group!.toggle(value!);
+            return;
+        }
+
+        modelValue.value = unref(isIndeterminate) ? true : !unref(modelValue);
+    }
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(isReadonlyResolved)) {
+            evt.preventDefault();
+        }
+    }
+
+    watchEffect(() => {
+        const input = unref(inputRef);
+
+        if (!input) {
+            return;
+        }
+
+        input.indeterminate = unref(isIndeterminate);
+    });
+</script>

package/src/component/FluxFormCheckboxGroup.vue

@@ -0,0 +1,57 @@
+<template>
+    <div
+        :class="clsx(
+            $style.formCheckboxGroup,
+            isInline && $style.isInline
+        )"
+        :role="field?.isGroup ? undefined : 'group'"
+        :aria-label="field?.isGroup ? undefined : ariaLabel">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { inject, provide, toRef, unref, type VNode } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { FluxFormCheckboxGroupInjectionKey, FluxFormFieldInjectionKey, type FluxFormCheckboxGroupValue } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<FluxFormCheckboxGroupValue[]>({
+        default: () => []
+    });
+
+    const {
+        disabled: componentDisabled,
+        error,
+        isReadonly
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
+        readonly ariaLabel?: string;
+        readonly isInline?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const field = inject(FluxFormFieldInjectionKey, null);
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    provide(FluxFormCheckboxGroupInjectionKey, {
+        modelValue,
+        disabled,
+        isReadonly: toRef(() => isReadonly ?? false),
+        error: toRef(() => error),
+        has: value => unref(modelValue).includes(value),
+        toggle(value) {
+            const current = unref(modelValue);
+
+            modelValue.value = current.includes(value)
+                ? current.filter(item => item !== value)
+                : [...current, value];
+        }
+    });
+</script>

package/src/component/FluxFormField.vue

@@ -1,10 +1,15 @@
 <template>
-    <div :class="$style.formField">
-        <label
-            :for="id"
+    <div
+        :class="$style.formField"
+        :role="isGroup ? 'group' : undefined"
+        :aria-labelledby="isGroup && label ? labelId : undefined">
+        <component
+            :is="isGroup ? 'div' : 'label'"
+            :for="isGroup ? undefined : id"
             :class="$style.formFieldHeader">
             <span
                 v-if="label"
+                :id="isGroup ? labelId : undefined"
                 :class="$style.formFieldLabel">
                 {{ label }}
             </span>
@@ -22,7 +27,7 @@
                     name="value"
                     v-bind="{currentLength, error, hint, id, isOptional, label, maxLength}"/>
             </span>
-        </label>
+        </component>
 
         <slot v-bind="{id}"/>
 
@@ -52,13 +57,16 @@
 <script
     lang="ts"
     setup>
-    import { provide, useId, type VNode } from 'vue';
+    import { computed, provide, useId, type VNode } from 'vue';
     import { useTranslate } from '~flux/components/composable/private';
     import { FluxFormFieldInjectionKey } from '~flux/components/data';
     import FluxFormFieldAddition from './FluxFormFieldAddition.vue';
     import $style from '~flux/components/css/component/Form.module.scss';
 
-    defineProps<{
+    const {
+        as = 'field'
+    } = defineProps<{
+        readonly as?: 'field' | 'group';
         readonly currentLength?: number;
         readonly error?: string;
         readonly hint?: string;
@@ -92,9 +100,17 @@
     }>();
 
     const id = useId();
+    const labelId = useId();
     const translate = useTranslate();
 
+    const isGroup = computed(() => as === 'group');
+
+    let controlCount = 0;
+
     provide(FluxFormFieldInjectionKey, {
-        id
+        id,
+        labelId,
+        isGroup: as === 'group',
+        registerControl: () => controlCount++ === 0 ? id : `${id}-${controlCount - 1}`
     });
 </script>

package/src/component/FluxFormNumberInput.vue

@@ -0,0 +1,180 @@
+<template>
+    <div
+        :class="clsx(
+            disabled ? $style.formInputDisabled : $style.formInputEnabled,
+            isCondensed && $style.isCondensed,
+            isSecondary && $style.isSecondary,
+            error && $style.isInvalid
+        )"
+        :aria-disabled="disabled ? true : undefined">
+        <input
+            ref="input"
+            :class="clsx($style.formInputNative, $style.formNumberInputNative)"
+            :id="id"
+            :name="name"
+            :autofocus="autoFocus"
+            inputmode="decimal"
+            type="number"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-invalid="error ? true : undefined"
+            :disabled="disabled"
+            :max="max"
+            :min="min"
+            :placeholder="placeholder"
+            :readonly="isReadonly"
+            :step="step"
+            :value="modelValue ?? ''"
+            @blur="onBlur"
+            @focus="onFocus"
+            @input="onInput"
+            @keydown="onKeyDown">
+
+        <span
+            aria-hidden="true"
+            :class="$style.formNumberInputButtons">
+            <button
+                type="button"
+                tabindex="-1"
+                :class="$style.formNumberInputButton"
+                :disabled="disabled || isReadonly || atMax"
+                @click="stepValue(1)">
+                <FluxIcon
+                    name="chevron-up"
+                    :size="12"/>
+            </button>
+
+            <button
+                type="button"
+                tabindex="-1"
+                :class="$style.formNumberInputButton"
+                :disabled="disabled || isReadonly || atMin"
+                @click="stepValue(-1)">
+                <FluxIcon
+                    name="chevron-down"
+                    :size="12"/>
+            </button>
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const emit = defineEmits<{
+        blur: [];
+        focus: [];
+    }>();
+
+    const modelValue = defineModel<number | null>({
+        default: null
+    });
+
+    const {
+        disabled: componentDisabled,
+        isReadonly,
+        max,
+        min,
+        step = 1
+    } = defineProps<FluxFormInputBaseProps & {
+        readonly max?: number;
+        readonly min?: number;
+        readonly step?: number;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const inputRef = useTemplateRef<HTMLInputElement>('input');
+    const {id} = useFormFieldInjection();
+
+    const atMax = computed(() => max !== undefined && modelValue.value !== null && modelValue.value >= max);
+    const atMin = computed(() => min !== undefined && modelValue.value !== null && modelValue.value <= min);
+
+    function blur(): void {
+        unrefTemplateElement(inputRef)?.blur();
+    }
+
+    function focus(): void {
+        unrefTemplateElement(inputRef)?.focus();
+    }
+
+    function clamp(value: number): number {
+        let result = value;
+
+        if (min !== undefined) {
+            result = Math.max(min, result);
+        }
+
+        if (max !== undefined) {
+            result = Math.min(max, result);
+        }
+
+        return result;
+    }
+
+    function round(value: number): number {
+        const decimals = (step.toString().split('.')[1] ?? '').length;
+
+        return decimals > 0 ? Number(value.toFixed(decimals)) : value;
+    }
+
+    function stepValue(direction: 1 | -1): void {
+        if (unref(disabled) || isReadonly) {
+            return;
+        }
+
+        const base = modelValue.value ?? min ?? 0;
+
+        modelValue.value = clamp(round(base + direction * step));
+    }
+
+    function onBlur(): void {
+        if (modelValue.value !== null) {
+            modelValue.value = clamp(modelValue.value);
+        }
+
+        emit('blur');
+    }
+
+    function onFocus(): void {
+        emit('focus');
+    }
+
+    function onInput(evt: Event): void {
+        const value = (evt.target as HTMLInputElement).value;
+
+        if (value === '') {
+            modelValue.value = null;
+            return;
+        }
+
+        const numeric = Number(value);
+
+        if (Number.isNaN(numeric)) {
+            return;
+        }
+
+        modelValue.value = numeric;
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'ArrowUp') {
+            stepValue(1);
+            evt.preventDefault();
+        } else if (evt.key === 'ArrowDown') {
+            stepValue(-1);
+            evt.preventDefault();
+        }
+    }
+
+    defineExpose({
+        blur,
+        focus
+    });
+</script>

package/src/component/FluxFormPinInput.vue

@@ -1,7 +1,7 @@
 <template>
     <fieldset
         :class="clsx(
-            disabled ? $style.pinInputDisabled : $style.pinInputEnabled,
+            disabled ? $style.formPinInputDisabled : $style.formPinInputEnabled,
             error && $style.isInvalid
         )"
         :id="id"
@@ -16,7 +16,7 @@
             v-for="field of maxLength"
             :key="field"
             ref="fields"
-            :class="$style.pinInputField"
+            :class="$style.formPinInputField"
             maxlength="1"
             :aria-label="translate('flux.pinDigit', {index: field, total: maxLength})"
             :autocomplete="field === 1 ? autoComplete : undefined"

package/src/component/FluxFormRadio.vue

@@ -0,0 +1,76 @@
+<template>
+    <label
+        :class="clsx(
+            $style.formRadio,
+            disabled && $style.isDisabled,
+            isReadonly && $style.isReadonly,
+            error && $style.isInvalid
+        )">
+        <input
+            ref="input"
+            type="radio"
+            :class="$style.formRadioNative"
+            :name="group.name"
+            :checked="isChecked"
+            :disabled="disabled"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-readonly="isReadonly ? true : undefined"
+            :aria-invalid="error ? true : undefined"
+            @change="onChange"
+            @click="onClick">
+
+        <span
+            aria-hidden="true"
+            :class="$style.formRadioElement"/>
+
+        <span
+            v-if="label || $slots.default"
+            :class="$style.formRadioLabel">
+            <slot>{{ label }}</slot>
+        </span>
+    </label>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref } from 'vue';
+    import { useDisabled, useFormRadioGroupInjection } from '~flux/components/composable';
+    import type { FluxFormRadioGroupValue } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const {
+        disabled: componentDisabled,
+        value
+    } = defineProps<{
+        readonly value: FluxFormRadioGroupValue;
+        readonly disabled?: boolean;
+        readonly label?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const group = useFormRadioGroupInjection();
+    const disabled = useDisabled(toRef(() => componentDisabled || unref(group.disabled)));
+
+    const isChecked = computed(() => unref(group.modelValue) === value);
+    const isReadonly = computed(() => unref(group.isReadonly));
+    const error = computed(() => unref(group.error));
+
+    function onChange(): void {
+        if (unref(isReadonly) || unref(disabled)) {
+            return;
+        }
+
+        group.select(value);
+    }
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(isReadonly)) {
+            evt.preventDefault();
+        }
+    }
+</script>