@flux-ui/components 3.0.0-next.9 → 3.0.0

package/src/transition/FluxFadeTransition.vue

@@ -14,11 +14,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxOverlayTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxRouteTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxSlideOverTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxTooltipTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxVerticalWindowTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxWindowTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/util/createDialogRenderer.ts

@@ -1,7 +1,7 @@
-import { flattenVNodeTree } from '@flux-ui/internals';
-import { Component, getCurrentInstance, RenderFunction, Slots } from 'vue';
-import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
-import { registerDialog, useFluxStore } from '$flux/data';
+import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
+import { Comment, h, onUnmounted, ref, Teleport, watch, type Component, type RenderFunction, type SetupContext, type Slots, type VNode } from 'vue';
+import { registerDialog, type FluxDialogRegistration } from '~flux/components/data';
+import $style from '~flux/components/css/component/Overlay.module.scss';
 
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
@@ -9,54 +9,65 @@ type Props = {
     readonly viewKey?: string;
 };
 
+const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+let DIALOG_ID = 0;
+
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
-    const instance = getCurrentInstance();
-    let unregister: Function | null = null;
-    let zIndex = 0;
+    const dialogId = `flux-dialog:${DIALOG_ID++}`;
+    let registration: FluxDialogRegistration | null = null;
 
-    onMounted(() => {
-        window.addEventListener('keydown', onKeyDown);
-    });
+    const dialogRef = ref<HTMLElement>();
+
+    useFocusTrap(dialogRef);
 
     onUnmounted(() => {
-        window.removeEventListener('keydown', onKeyDown);
-        unregister?.();
+        registration?.unregister();
+        registration = null;
+    });
+
+    watch(dialogRef, (dialog, _, onCleanup) => {
+        if (!dialog) {
+            return;
+        }
+
+        dialog.addEventListener('keydown', onKeyDown, {passive: true});
+
+        onCleanup(() => {
+            dialog.removeEventListener('keydown', onKeyDown);
+        });
     });
 
     function onKeyDown(evt: KeyboardEvent): void {
-        if (evt.key !== 'Escape' || !unregister || !props.isCloseable) {
+        if (evt.key !== 'Escape' || !registration || !props.isCloseable) {
             return;
         }
 
-        evt.preventDefault();
-        evt.stopPropagation();
         emit('close');
     }
 
     return () => {
-        const {dialogCount} = useFluxStore();
-
         const children = flattenVNodeTree(slots.default?.() ?? []);
         const isVisible = children.length > 0 && children.some(child => child.type !== Comment);
-        const content: VNode[] = [];
+        let content: VNode | undefined;
 
         if (isVisible) {
-            if (!unregister) {
-                unregister = registerDialog();
-                zIndex = dialogCount + 1000;
-            }
+            registration ??= registerDialog();
 
-            content.push(h('div', {
-                key: props.viewKey,
-                class: className,
-                style: {zIndex}
-            }, children));
+            content = h('div', {
+                key: props.viewKey ?? dialogId,
+                ref: dialogRef,
+                class: [className, registration.isCurrent() && $style.isCurrent],
+                style: {
+                    zIndex: registration.getPosition() + 1000
+                },
+                tabindex: 0
+            }, children);
         } else {
-            unregister?.();
-            unregister = null;
+            registration?.unregister();
+            registration = null;
         }
 
-        return h(Teleport, {disabled: content.length === 0, to: instance?.appContext.app._container}, [
+        return h(Teleport, {defer: true, disabled: !content, to: TARGET_SELECTOR}, [
             h(transition, attrs, {
                 default: () => content
             })

package/src/util/createLabelForDateRange.ts

@@ -1,5 +1,5 @@
 import type { DateTime } from 'luxon';
-import { useTranslate } from '$flux/composable/private';
+import { useTranslate } from '~flux/components/composable/private';
 
 export default function (start: DateTime, end: DateTime, preventCustom: boolean = false): string {
     const translate = useTranslate();

package/src/util/defineFilter.ts

@@ -0,0 +1,10 @@
+import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
+
+export type FluxFilterDefinitionFactory<TProps = any, TValue extends FluxFilterValue = FluxFilterValue> =
+    (props: TProps) => FluxFilterDefinition<TValue>;
+
+export default function defineFilter<TProps, TValue extends FluxFilterValue = FluxFilterValue>(
+    factory: FluxFilterDefinitionFactory<TProps, TValue>
+): FluxFilterDefinitionFactory<TProps, TValue> {
+    return factory;
+}

package/src/util/filter.ts

@@ -0,0 +1,63 @@
+import type { FluxFilterDefinition, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterSpec, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { DateTime } from 'luxon';
+import type { FluxTranslate } from '~flux/components/data';
+
+export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
+    return 'title' in obj;
+}
+
+export function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem {
+    return 'label' in obj && 'value' in obj;
+}
+
+export function isResettable(definition: FluxFilterDefinition | undefined, value: FluxFilterValue | undefined): boolean {
+    if (!definition || definition.defaultValue === undefined) {
+        return false;
+    }
+
+    return !isFilterValueEqual(value, definition.defaultValue);
+}
+
+function isFilterValueEqual(a: FluxFilterValue | undefined, b: FluxFilterValue | undefined): boolean {
+    if (a === b) {
+        return true;
+    }
+
+    if (DateTime.isDateTime(a) && DateTime.isDateTime(b)) {
+        return a.equals(b);
+    }
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((value, index) => isFilterValueEqual(value, b[index]));
+    }
+
+    return false;
+}
+
+export function pickFilterCommon<T extends FluxFilterSpec>(props: T): FluxFilterSpec {
+    return {
+        name: props.name,
+        label: props.label,
+        icon: props.icon,
+        disabled: props.disabled,
+        defaultValue: props.defaultValue,
+        onChange: props.onChange,
+        onClear: props.onClear
+    };
+}
+
+export function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
+    const selected = options.filter(o => values.includes(o.value)).length;
+
+    if (selected <= 0) {
+        return null;
+    }
+
+    if (selected === 1) {
+        return options.find(o => values.includes(o.value))!.label;
+    }
+
+    return translate('flux.nSelected', {
+        n: selected
+    });
+}

package/src/util/index.ts

@@ -1,2 +1,5 @@
 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/src/util/sanitizeUrl.ts

@@ -0,0 +1,40 @@
+const DANGEROUS_PROTOCOL = /^(javascript|vbscript|data):/i;
+
+/**
+ * Removes control characters (and the Unicode line/paragraph separators) that
+ * browsers ignore inside URLs but which can be used to obfuscate the scheme,
+ * e.g. `java\tscript:alert(1)`.
+ */
+function stripControlChars(value: string): string {
+    let out = '';
+
+    for (let i = 0; i < value.length; i++) {
+        const code = value.charCodeAt(i);
+
+        if (code <= 0x20 || (code >= 0x7f && code <= 0x9f) || code === 0x2028 || code === 0x2029) {
+            continue;
+        }
+
+        out += value[i];
+    }
+
+    return out;
+}
+
+/**
+ * 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 {
+    if (!href) {
+        return href;
+    }
+
+    if (DANGEROUS_PROTOCOL.test(stripControlChars(href))) {
+        return undefined;
+    }
+
+    return href;
+}