@flux-ui/components 3.0.0-next.72 → 3.0.0-next.74

package/dist/util/index.d.ts

@@ -2,3 +2,4 @@ export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
 export { default as defineFilter, type FluxFilterDefinitionFactory } from './defineFilter';
 export { generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, isResettable, pickFilterCommon } from './filter';
+export { default as sanitizeUrl } from './sanitizeUrl';

package/dist/util/sanitizeUrl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sanitizes a URL intended for an `href` attribute. Returns `undefined` when the
+ * URL uses a dangerous scheme (`javascript:`, `vbscript:`, `data:`) so the attribute
+ * is omitted instead of becoming a script-execution or data-injection vector.
+ * Safe and relative URLs are returned unchanged.
+ */
+export default function (href?: string): string | undefined;

package/package.json

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

package/src/component/FluxBoxedIcon.vue

@@ -7,7 +7,7 @@
             color === 'danger' && $style.iconBoxedDanger,
             color === 'info' && $style.iconBoxedInfo,
             color === 'success' && $style.iconBoxedSuccess,
-            color === 'warning' && $style.iconBoxedWarning,
+            color === 'warning' && $style.iconBoxedWarning
         )"
         :style="{
             fontSize: size && `${size}px`

package/src/component/FluxCalendar.vue

@@ -265,13 +265,13 @@
     });
 
     const timeGridDayCount = computed<1 | 2 | 7>(() => {
-        const v = unref(resolvedView);
+        const resolved = unref(resolvedView);
 
-        if (v === 'week') {
+        if (resolved === 'week') {
             return 7;
         }
 
-        if (v === 'two-days') {
+        if (resolved === 'two-days') {
             return 2;
         }
 
@@ -521,13 +521,13 @@
             return;
         }
 
-        const v = unref(resolvedView);
-        const delta = (v === 'month' ? MONTH_KEY_DELTAS : TIME_GRID_KEY_DELTAS)[direction];
+        const resolved = unref(resolvedView);
+        const delta = (resolved === 'month' ? MONTH_KEY_DELTAS : TIME_GRID_KEY_DELTAS)[direction];
         const newDate = currentDate.plus(delta);
 
         emit('reschedule', {id, fromDate: currentDate, toDate: newDate});
 
-        if (v === 'month') {
+        if (resolved === 'month') {
             monthFocusedDate.value = newDate.startOf('day');
 
             if (newDate.month !== unref(monthViewDate).month) {

package/src/component/FluxColorPicker.vue

@@ -36,8 +36,8 @@
             <div
                 :class="$style.colorPickerPreview"
                 :style="{
-                '--color': rgb
-            }"
+                    '--color': rgb
+                }"
                 aria-hidden="true"/>
 
             <FluxFormField
@@ -134,10 +134,10 @@
     import { blue500 } from '@flux-ui/internals';
     import { computed, type ComputedRef, ref, unref, watch } from 'vue';
     import { useTranslate } from '~flux/components/composable/private';
-    import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormSlider from './FluxFormSlider.vue';
+    import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string | [number, number, number]>({
@@ -180,9 +180,9 @@
 
     const saturationValue = computed({
         get: (): [number, number] => [unref(saturation), unref(value)],
-        set: ([s, v]: [number, number]) => {
-            saturation.value = s;
-            value.value = v;
+        set: ([nextSaturation, nextValue]: [number, number]) => {
+            saturation.value = nextSaturation;
+            value.value = nextValue;
         }
     });
 

package/src/component/FluxDropZone.vue

@@ -213,4 +213,3 @@
         pathLength.value = roundStep(width * 2 + height * 2, 6);
     }, {immediate: true});
 </script>
-

package/src/component/FluxDynamicView.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 

package/src/component/FluxExpandableGroup.vue

@@ -18,7 +18,6 @@
         readonly isControlled?: boolean;
     }>();
 
-
     defineSlots<{
         default(): VNode[];
     }>();

package/src/component/FluxFilterBase.vue

@@ -41,7 +41,7 @@
     const flattenedFilters = computed(() => flattenVNodeTree(slots.filters?.() ?? []));
 
     const buttons = computed(() => {
-        const buttons: Record<string, FluxFilterDefinition> = {};
+        const result: Record<string, FluxFilterDefinition> = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
@@ -51,14 +51,14 @@
                 continue;
             }
 
-            buttons[definition.name] = definition;
+            result[definition.name] = definition;
         }
 
-        return buttons;
+        return result;
     });
 
     const filters = computed<Record<string, VNode>>(() => {
-        const filters: { [key: string]: VNode; } = {};
+        const result: { [key: string]: VNode; } = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
@@ -68,33 +68,33 @@
                 continue;
             }
 
-            filters[definition.name] = item;
+            result[definition.name] = item;
         }
 
-        return filters;
+        return result;
     });
 
     const menuItems = computed<(FluxFilterDefinition | VNode)[][]>(() => {
-        const menuItems: (FluxFilterDefinition | VNode)[][] = [[]];
+        const result: (FluxFilterDefinition | VNode)[][] = [[]];
         const items = unref(flattenedFilters);
 
         for (const item of items) {
             if (getComponentName(item) === 'FluxSeparator') {
-                menuItems.push([]);
+                result.push([]);
                 continue;
             }
 
             const definition = resolveDefinition(item);
 
             if (definition) {
-                menuItems[menuItems.length - 1].push(definition);
+                result[result.length - 1].push(definition);
                 continue;
             }
 
-            menuItems[menuItems.length - 1].push(item);
+            result[result.length - 1].push(item);
         }
 
-        return menuItems;
+        return result;
     });
 
     watchEffect(() => {

package/src/component/FluxFormField.vue

@@ -3,7 +3,9 @@
         <label
             :for="id"
             :class="$style.formFieldHeader">
-            <span :class="$style.formFieldLabel">
+            <span
+                v-if="label"
+                :class="$style.formFieldLabel">
                 {{ label }}
             </span>
 
@@ -61,7 +63,7 @@
         readonly error?: string;
         readonly hint?: string;
         readonly isOptional?: boolean;
-        readonly label: string;
+        readonly label?: string;
         readonly maxLength?: number;
     }>();
 

package/src/component/FluxFormFieldAddition.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';

package/src/component/FluxInfo.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
     import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';

package/src/component/FluxInfoStack.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { VNode } from 'vue';
     import FluxFlex from './FluxFlex.vue';
 

package/src/component/FluxKanbanColumn.vue

@@ -65,9 +65,7 @@
         <footer
             v-if="hasFooter"
             :class="$style.kanbanColumnFooter">
-            <slot
-                v-if="hasFooter"
-                name="footer"/>
+            <slot name="footer"/>
         </footer>
     </div>
 </template>
@@ -80,9 +78,9 @@
     import { Comment, computed, onBeforeUnmount, onMounted, provide, Text, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
     import { useDisabled, useKanbanInjection } from '~flux/components/composable';
     import { FluxDisabledInjectionKey } from '~flux/components/data';
-    import $style from '~flux/components/css/component/Kanban.module.scss';
     import FluxBadge from './FluxBadge.vue';
     import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
 
     const {
         columnId,
@@ -90,7 +88,7 @@
         label
     } = defineProps<{
         readonly columnId: string | number;
-        readonly count: string | number;
+        readonly count?: string | number;
         readonly disabled?: boolean;
         readonly icon?: FluxIconName;
         readonly label: string;

package/src/component/FluxLayerPane.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         :class="clsx(
-        color === 'gray' && $style.layerPaneGray,
+            color === 'gray' && $style.layerPaneGray,
             color === 'primary' && $style.layerPanePrimary,
             color === 'danger' && $style.layerPaneDanger,
             color === 'info' && $style.layerPaneInfo,

package/src/component/FluxPagination.vue

@@ -35,7 +35,7 @@
 
         <template v-else>
             <FluxPaginationButton
-                :class="$style.paginationCurrentZZ"
+                is-current
                 @click="prompt"
                 #before>
                 <strong>{{ page }}</strong>
@@ -140,12 +140,12 @@
             fieldLabel: translate('flux.paginationNavigatePage')
         });
 
-        const page = Number(pageStr);
+        const target = Number(pageStr);
 
-        if (isNaN(page) || page > unref(pages) || page <= 0) {
+        if (isNaN(target) || target > unref(pages) || target <= 0) {
             return;
         }
 
-        navigate(page);
+        navigate(target);
     }
 </script>

package/src/component/FluxPressable.vue

@@ -3,7 +3,7 @@
         v-if="componentType === 'route'"
         v-bind="$attrs"
         v-on="hoverListeners"
-        :rel="rel"
+        :rel="resolvedRel"
         :target="target"
         :to="to as any"
         @click="onClick($event)">
@@ -14,8 +14,8 @@
         v-else-if="componentType === 'link'"
         v-bind="$attrs"
         v-on="hoverListeners"
-        :href="href"
-        :rel="rel"
+        :href="sanitizeUrl(href)"
+        :rel="resolvedRel"
         :target="target"
         @click="onClick($event)">
         <slot/>
@@ -42,7 +42,8 @@
     lang="ts"
     setup>
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
-    import type { VNode } from 'vue';
+    import { computed, type VNode } from 'vue';
+    import { sanitizeUrl } from '~flux/components/util';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -50,7 +51,7 @@
         mouseleave: [MouseEvent];
     }>();
 
-    defineProps<{
+    const {rel, target} = defineProps<{
         readonly componentType?: FluxPressableType;
         readonly href?: string;
         readonly rel?: string;
@@ -62,6 +63,14 @@
         default(): VNode[];
     }>();
 
+    const resolvedRel = computed(() => {
+        if (rel) {
+            return rel;
+        }
+
+        return target === '_blank' ? 'noopener noreferrer' : undefined;
+    });
+
     const hoverListeners = {
         onMouseenter: (evt: MouseEvent) => emit('mouseenter', evt),
         onMouseleave: (evt: MouseEvent) => emit('mouseleave', evt)

package/src/component/FluxSegmentedControl.vue

@@ -13,98 +13,90 @@
                 width: `${activeItemWidth}px`
             }"/>
 
-        <template v-for="(item, index) of items">
-            <div
-                v-if="index > 0"
-                :class="clsx(
-                    $style.segmentedControlSeparator,
-                    (index === modelValue || index === modelValue + 1) && $style.isActive
-                )"
-                role="separator"/>
-
-            <button
-                ref="items"
-                :class="clsx(
-                    $style.segmentedControlItem,
-                    index === modelValue && $style.isActive
-                )"
-                role="radio"
-                :aria-checked="index === modelValue"
-                :aria-label="item.label"
-                :tabindex="index === modelValue ? 0 : -1"
-                type="button"
-                @click="activate(index)">
-                <FluxIcon
-                    v-if="item.icon"
-                    :name="item.icon"
-                    :size="15"/>
-
-                <span v-if="item.label">{{ item.label }}</span>
-            </button>
-        </template>
+        <slot/>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { useResizeObserver } from '@basmilius/common';
-    import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
-    import { clsx } from 'clsx';
-    import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
-    import FluxIcon from './FluxIcon.vue';
+    import { useMutationObserver, useResizeObserver } from '@basmilius/common';
+    import type { FluxSize } from '@flux-ui/types';
+    import { onMounted, provide, ref, toRef, useTemplateRef, watch, type VNode } from 'vue';
+    import { FluxSegmentedControlInjectionKey, type FluxSegmentedControlValue } from '~flux/components/data';
     import $style from '~flux/components/css/component/SegmentedControl.module.scss';
 
-    const modelValue = defineModel<number>({
-        default: 0
-    });
+    const modelValue = defineModel<FluxSegmentedControlValue>();
 
-    defineProps<{
+    const { size = 'medium' } = defineProps<{
         readonly ariaLabel?: string;
         readonly isFill?: boolean;
-        readonly items: FluxSegmentedControlItemObject[];
+        readonly size?: FluxSize;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
     }>();
 
     const controlRef = useTemplateRef<HTMLElement>('control');
-    const itemRefs = useTemplateRef<HTMLButtonElement[]>('items');
 
     const activeItemX = ref(0);
     const activeItemWidth = ref(0);
-    const isAlive = ref(true);
 
-    onBeforeUnmount(() => {
-        isAlive.value = false;
+    const items = new Map<HTMLElement, FluxSegmentedControlValue>();
+
+    provide(FluxSegmentedControlInjectionKey, {
+        modelValue,
+        size: toRef(() => size),
+        select,
+        registerItem(element, value) {
+            items.set(element, value);
+            updateHighlight();
+        },
+        unregisterItem(element) {
+            items.delete(element);
+            updateHighlight();
+        }
     });
 
-    watchEffect(() => updateHighlight(unref(modelValue)), {flush: 'post'});
+    onMounted(() => updateHighlight());
 
-    useResizeObserver(controlRef, () => updateHighlight(unref(modelValue)));
+    watch(modelValue, () => updateHighlight(), {flush: 'post'});
 
-    function activate(index: number): void {
-        modelValue.value = index;
+    useMutationObserver(controlRef, () => updateHighlight(), {childList: true, subtree: true});
+    useResizeObserver(controlRef, () => updateHighlight());
 
-        const itemRef = itemRefs.value?.[index];
-        itemRef?.focus();
+    function select(value: FluxSegmentedControlValue): void {
+        modelValue.value = value;
     }
 
     function onKeyDown(evt: KeyboardEvent): void {
-        const items = itemRefs.value;
+        const control = controlRef.value;
+
+        if (!control) {
+            return;
+        }
+
+        const radios = Array.from(control.querySelectorAll<HTMLButtonElement>('[role=radio]:not([disabled])'));
 
-        if (!items) {
+        if (radios.length === 0) {
             return;
         }
 
-        let newIndex: number | null = null;
+        const activeElement = control.querySelector<HTMLButtonElement>('[role=radio][aria-checked=true]');
+        const currentIndex = activeElement ? radios.indexOf(activeElement) : -1;
+
+        let newIndex: number;
 
         switch (evt.key) {
             case 'ArrowLeft':
             case 'ArrowUp':
-                newIndex = Math.max(0, unref(modelValue) - 1);
+                newIndex = Math.max(0, currentIndex - 1);
                 break;
 
             case 'ArrowRight':
             case 'ArrowDown':
-                newIndex = Math.min(items.length - 1, unref(modelValue) + 1);
+                newIndex = Math.min(radios.length - 1, currentIndex + 1);
                 break;
 
             case 'Home':
@@ -112,40 +104,45 @@
                 break;
 
             case 'End':
-                newIndex = items.length - 1;
+                newIndex = radios.length - 1;
                 break;
 
             default:
                 return;
         }
 
-        activate(newIndex);
+        const target = radios[newIndex];
+        const value = items.get(target);
+
+        if (value !== undefined) {
+            select(value);
+        }
+
+        target.focus();
         evt.preventDefault();
     }
 
-    function updateHighlight(index: number): void {
-        if (!isAlive.value) {
+    function updateHighlight(): void {
+        const control = controlRef.value;
+
+        if (!control) {
             return;
         }
 
-        const itemRef = itemRefs.value?.[index];
-        const control = controlRef.value;
+        const activeElement = control.querySelector<HTMLElement>('[role=radio][aria-checked=true]');
 
-        if (!itemRef || !control) {
+        if (!activeElement) {
+            activeItemWidth.value = 0;
             return;
         }
 
-        const width = itemRef.offsetWidth;
+        const width = activeElement.offsetWidth;
 
         if (width === 0) {
             return;
         }
 
-        const controlRect = control.getBoundingClientRect();
-        const itemRect = itemRef.getBoundingClientRect();
-        const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
-
-        activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
+        activeItemX.value = activeElement.offsetLeft;
         activeItemWidth.value = width;
     }
 </script>