@flux-ui/components 3.0.0-next.61 → 3.0.0-next.64

package/dist/util/defineFilter.d.ts

@@ -0,0 +1,3 @@
+import { 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>;

package/dist/util/filter.d.ts

@@ -0,0 +1,7 @@
+import { FluxFilterDefinition, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterSpec, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { FluxTranslate } from '../data';
+export declare function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader;
+export declare function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem;
+export declare function isResettable(definition: FluxFilterDefinition | undefined, value: FluxFilterValue | undefined): boolean;
+export declare function pickFilterCommon<T extends FluxFilterSpec>(props: T): FluxFilterSpec;
+export declare function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null;

package/dist/util/index.d.ts

@@ -1,2 +1,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';

package/dist/vite/defineFilterMacro.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+declare function defineFilterMacro(): Plugin;
+export default defineFilterMacro;

package/dist/vite/index.d.ts

@@ -0,0 +1 @@
+export { default as defineFilterMacro } from './defineFilterMacro';

package/dist/vite.js

@@ -0,0 +1,217 @@
+//#region src/vite/defineFilterMacro.ts
+var SCRIPT_SETUP_REGEX = /<script\b([^>]*)\bsetup\b([^>]*)>([\s\S]*?)<\/script>/gi;
+function defineFilterMacro() {
+	return {
+		name: "@flux-ui/components/define-filter-macro",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.endsWith(".vue")) return;
+			if (!code.includes("defineFilter")) return;
+			let transformed = false;
+			const newCode = code.replace(SCRIPT_SETUP_REGEX, (match, before, after, content) => {
+				if (!content.includes("defineFilter")) return match;
+				if (content.includes("__filterDefinitionFactory")) return match;
+				if (containsTopLevelCall(content, "defineOptions")) return match;
+				const wrapped = wrapDefineFilter(content);
+				if (wrapped === content) return match;
+				transformed = true;
+				return `<script${before}setup${after}>${wrapped}<\/script>`;
+			});
+			if (!transformed) return;
+			return {
+				code: newCode,
+				map: null
+			};
+		}
+	};
+}
+function wrapDefineFilter(content) {
+	const range = findTopLevelCall(content, "defineFilter");
+	if (!range) return content;
+	const replacement = `defineOptions({\n    __filterDefinitionFactory: ${content.slice(range.callStart, range.callEnd)}\n})`;
+	return content.slice(0, range.callStart) + replacement + content.slice(range.callEnd);
+}
+function containsTopLevelCall(content, name) {
+	return findTopLevelCall(content, name) !== null;
+}
+function findTopLevelCall(content, name) {
+	let parenDepth = 0;
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	let inString = null;
+	let inComment = null;
+	let i = 0;
+	while (i < content.length) {
+		const c = content[i];
+		const n = content[i + 1];
+		if (inComment === "single") {
+			if (c === "\n") inComment = null;
+			i++;
+			continue;
+		}
+		if (inComment === "multi") {
+			if (c === "*" && n === "/") {
+				inComment = null;
+				i += 2;
+				continue;
+			}
+			i++;
+			continue;
+		}
+		if (inString) {
+			if (c === "\\") {
+				i += 2;
+				continue;
+			}
+			if (c === inString) inString = null;
+			i++;
+			continue;
+		}
+		if (c === "/" && n === "/") {
+			inComment = "single";
+			i += 2;
+			continue;
+		}
+		if (c === "/" && n === "*") {
+			inComment = "multi";
+			i += 2;
+			continue;
+		}
+		if (c === "\"" || c === "'" || c === "`") {
+			inString = c;
+			i++;
+			continue;
+		}
+		if (c === "(") {
+			parenDepth++;
+			i++;
+			continue;
+		}
+		if (c === ")") {
+			parenDepth--;
+			i++;
+			continue;
+		}
+		if (c === "{") {
+			braceDepth++;
+			i++;
+			continue;
+		}
+		if (c === "}") {
+			braceDepth--;
+			i++;
+			continue;
+		}
+		if (c === "[") {
+			bracketDepth++;
+			i++;
+			continue;
+		}
+		if (c === "]") {
+			bracketDepth--;
+			i++;
+			continue;
+		}
+		if (!(parenDepth === 0 && braceDepth === 0 && bracketDepth === 0) || !content.startsWith(name, i)) {
+			i++;
+			continue;
+		}
+		const prevChar = i > 0 ? content[i - 1] : "";
+		if (/[A-Za-z0-9_$]/.test(prevChar)) {
+			i++;
+			continue;
+		}
+		const afterName = i + name.length;
+		const nextChar = content[afterName];
+		if (nextChar && /[A-Za-z0-9_$]/.test(nextChar)) {
+			i++;
+			continue;
+		}
+		const callOpen = skipGenericAndWhitespace(content, afterName);
+		if (callOpen === -1 || content[callOpen] !== "(") {
+			i++;
+			continue;
+		}
+		const callClose = matchClosingParen(content, callOpen);
+		if (callClose === -1) return null;
+		return {
+			callStart: i,
+			callEnd: callClose + 1
+		};
+	}
+	return null;
+}
+function skipGenericAndWhitespace(content, start) {
+	let i = start;
+	while (i < content.length && /\s/.test(content[i])) i++;
+	if (content[i] !== "<") return i;
+	let depth = 1;
+	i++;
+	while (i < content.length && depth > 0) {
+		const c = content[i];
+		if (c === "<") depth++;
+		else if (c === ">") depth--;
+		i++;
+	}
+	while (i < content.length && /\s/.test(content[i])) i++;
+	return i;
+}
+function matchClosingParen(content, openIndex) {
+	let depth = 1;
+	let inString = null;
+	let inComment = null;
+	let i = openIndex + 1;
+	while (i < content.length) {
+		const c = content[i];
+		const n = content[i + 1];
+		if (inComment === "single") {
+			if (c === "\n") inComment = null;
+			i++;
+			continue;
+		}
+		if (inComment === "multi") {
+			if (c === "*" && n === "/") {
+				inComment = null;
+				i += 2;
+				continue;
+			}
+			i++;
+			continue;
+		}
+		if (inString) {
+			if (c === "\\") {
+				i += 2;
+				continue;
+			}
+			if (c === inString) inString = null;
+			i++;
+			continue;
+		}
+		if (c === "/" && n === "/") {
+			inComment = "single";
+			i += 2;
+			continue;
+		}
+		if (c === "/" && n === "*") {
+			inComment = "multi";
+			i += 2;
+			continue;
+		}
+		if (c === "\"" || c === "'" || c === "`") {
+			inString = c;
+			i++;
+			continue;
+		}
+		if (c === "(") depth++;
+		else if (c === ")") {
+			depth--;
+			if (depth === 0) return i;
+		}
+		i++;
+	}
+	return -1;
+}
+//#endregion
+export { defineFilterMacro };
+
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.js","names":[],"sources":["../src/vite/defineFilterMacro.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nconst SCRIPT_SETUP_REGEX = /<script\\b([^>]*)\\bsetup\\b([^>]*)>([\\s\\S]*?)<\\/script>/gi;\n\nfunction defineFilterMacro(): Plugin {\n    return {\n        name: '@flux-ui/components/define-filter-macro',\n        enforce: 'pre',\n\n        transform(code, id) {\n            if (!id.endsWith('.vue')) {\n                return;\n            }\n\n            if (!code.includes('defineFilter')) {\n                return;\n            }\n\n            let transformed = false;\n\n            const newCode = code.replace(SCRIPT_SETUP_REGEX, (match, before, after, content) => {\n                if (!content.includes('defineFilter')) {\n                    return match;\n                }\n\n                if (content.includes('__filterDefinitionFactory')) {\n                    return match;\n                }\n\n                if (containsTopLevelCall(content, 'defineOptions')) {\n                    return match;\n                }\n\n                const wrapped = wrapDefineFilter(content);\n\n                if (wrapped === content) {\n                    return match;\n                }\n\n                transformed = true;\n                return `<script${before}setup${after}>${wrapped}</script>`;\n            });\n\n            if (!transformed) {\n                return;\n            }\n\n            return {\n                code: newCode,\n                map: null\n            };\n        }\n    };\n}\n\nexport default defineFilterMacro;\n\nfunction wrapDefineFilter(content: string): string {\n    const range = findTopLevelCall(content, 'defineFilter');\n\n    if (!range) {\n        return content;\n    }\n\n    const callExpression = content.slice(range.callStart, range.callEnd);\n    const replacement = `defineOptions({\\n    __filterDefinitionFactory: ${callExpression}\\n})`;\n\n    return content.slice(0, range.callStart) + replacement + content.slice(range.callEnd);\n}\n\nfunction containsTopLevelCall(content: string, name: string): boolean {\n    return findTopLevelCall(content, name) !== null;\n}\n\ntype CallRange = {\n    readonly callStart: number;\n    readonly callEnd: number;\n};\n\nfunction findTopLevelCall(content: string, name: string): CallRange | null {\n    let parenDepth = 0;\n    let braceDepth = 0;\n    let bracketDepth = 0;\n    let inString: string | null = null;\n    let inComment: 'single' | 'multi' | null = null;\n\n    let i = 0;\n\n    while (i < content.length) {\n        const c = content[i];\n        const n = content[i + 1];\n\n        if (inComment === 'single') {\n            if (c === '\\n') {\n                inComment = null;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (inComment === 'multi') {\n            if (c === '*' && n === '/') {\n                inComment = null;\n                i += 2;\n                continue;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (inString) {\n            if (c === '\\\\') {\n                i += 2;\n                continue;\n            }\n\n            if (c === inString) {\n                inString = null;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (c === '/' && n === '/') {\n            inComment = 'single';\n            i += 2;\n            continue;\n        }\n\n        if (c === '/' && n === '*') {\n            inComment = 'multi';\n            i += 2;\n            continue;\n        }\n\n        if (c === '\"' || c === '\\'' || c === '`') {\n            inString = c;\n            i++;\n            continue;\n        }\n\n        if (c === '(') {\n            parenDepth++;\n            i++;\n            continue;\n        }\n\n        if (c === ')') {\n            parenDepth--;\n            i++;\n            continue;\n        }\n\n        if (c === '{') {\n            braceDepth++;\n            i++;\n            continue;\n        }\n\n        if (c === '}') {\n            braceDepth--;\n            i++;\n            continue;\n        }\n\n        if (c === '[') {\n            bracketDepth++;\n            i++;\n            continue;\n        }\n\n        if (c === ']') {\n            bracketDepth--;\n            i++;\n            continue;\n        }\n\n        const isTopLevel = parenDepth === 0 && braceDepth === 0 && bracketDepth === 0;\n\n        if (!isTopLevel || !content.startsWith(name, i)) {\n            i++;\n            continue;\n        }\n\n        const prevChar = i > 0 ? content[i - 1] : '';\n\n        if (/[A-Za-z0-9_$]/.test(prevChar)) {\n            i++;\n            continue;\n        }\n\n        const afterName = i + name.length;\n        const nextChar = content[afterName];\n\n        if (nextChar && /[A-Za-z0-9_$]/.test(nextChar)) {\n            i++;\n            continue;\n        }\n\n        const callOpen = skipGenericAndWhitespace(content, afterName);\n\n        if (callOpen === -1 || content[callOpen] !== '(') {\n            i++;\n            continue;\n        }\n\n        const callClose = matchClosingParen(content, callOpen);\n\n        if (callClose === -1) {\n            return null;\n        }\n\n        return {\n            callStart: i,\n            callEnd: callClose + 1\n        };\n    }\n\n    return null;\n}\n\nfunction skipGenericAndWhitespace(content: string, start: number): number {\n    let i = start;\n\n    while (i < content.length && /\\s/.test(content[i])) {\n        i++;\n    }\n\n    if (content[i] !== '<') {\n        return i;\n    }\n\n    let depth = 1;\n    i++;\n\n    while (i < content.length && depth > 0) {\n        const c = content[i];\n\n        if (c === '<') {\n            depth++;\n        } else if (c === '>') {\n            depth--;\n        }\n\n        i++;\n    }\n\n    while (i < content.length && /\\s/.test(content[i])) {\n        i++;\n    }\n\n    return i;\n}\n\nfunction matchClosingParen(content: string, openIndex: number): number {\n    let depth = 1;\n    let inString: string | null = null;\n    let inComment: 'single' | 'multi' | null = null;\n\n    let i = openIndex + 1;\n\n    while (i < content.length) {\n        const c = content[i];\n        const n = content[i + 1];\n\n        if (inComment === 'single') {\n            if (c === '\\n') {\n                inComment = null;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (inComment === 'multi') {\n            if (c === '*' && n === '/') {\n                inComment = null;\n                i += 2;\n                continue;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (inString) {\n            if (c === '\\\\') {\n                i += 2;\n                continue;\n            }\n\n            if (c === inString) {\n                inString = null;\n            }\n\n            i++;\n            continue;\n        }\n\n        if (c === '/' && n === '/') {\n            inComment = 'single';\n            i += 2;\n            continue;\n        }\n\n        if (c === '/' && n === '*') {\n            inComment = 'multi';\n            i += 2;\n            continue;\n        }\n\n        if (c === '\"' || c === '\\'' || c === '`') {\n            inString = c;\n            i++;\n            continue;\n        }\n\n        if (c === '(') {\n            depth++;\n        } else if (c === ')') {\n            depth--;\n\n            if (depth === 0) {\n                return i;\n            }\n        }\n\n        i++;\n    }\n\n    return -1;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.61",
+    "version": "3.0.0-next.64",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -33,6 +33,10 @@
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
         },
+        "./vite": {
+            "types": "./dist/vite/index.d.ts",
+            "default": "./dist/vite.js"
+        },
         "./style.css": "./dist/index.css"
     },
     "publishConfig": {
@@ -47,10 +51,10 @@
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "dependencies": {
-        "@basmilius/common": "^3.24.0",
-        "@basmilius/utils": "^3.24.0",
-        "@flux-ui/internals": "3.0.0-next.61",
-        "@flux-ui/types": "3.0.0-next.61",
+        "@basmilius/common": "^3.25.0",
+        "@basmilius/utils": "^3.25.0",
+        "@flux-ui/internals": "3.0.0-next.64",
+        "@flux-ui/types": "3.0.0-next.64",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -61,7 +65,7 @@
         "vue": "^3.6.0-beta.10"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.24.0",
+        "@basmilius/vite-preset": "^3.25.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
         "@types/node": "^25.6.0",
@@ -70,6 +74,6 @@
         "sass-embedded": "^1.99.0",
         "typescript": "^6.0.3",
         "vite": "^8.0.10",
-        "vue-tsc": "^3.2.7"
+        "vue-tsc": "^3.2.8"
     }
 }

package/src/component/FluxActionBar.vue

@@ -1,7 +1,6 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.actionBar"
-        direction="horizontal"
         :gap="9">
         <slot name="primary"/>
         <slot name="actionsStart"/>
@@ -42,7 +41,7 @@
         </FluxFlyout>
 
         <slot name="actionsEnd"/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -52,10 +51,10 @@
     import { useTranslate } from '~flux/components/composable/private';
     import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxDestructiveButton from './FluxDestructiveButton.vue';
+    import FluxFlex from './FluxFlex.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
     import FluxTooltip from './FluxTooltip.vue';
     import $style from '~flux/components/css/component/Action.module.scss';
 

package/src/component/FluxActionStack.vue

@@ -1,11 +1,11 @@
 <template>
-    <FluxStack
+    <FluxFlex
         ref="element"
         direction="horizontal"
         :gap="1"
         tag="nav">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -13,7 +13,7 @@
     setup>
     import { useFocusZone } from '@flux-ui/internals';
     import { useTemplateRef, type VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxAspectRatio.vue

@@ -1,9 +1,10 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.aspectRatio"
         :style="{aspectRatio}">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
@@ -13,7 +14,8 @@
     import $style from '~flux/components/css/component/Layout.module.scss';
 
     defineProps<{
-        aspectRatio: number;
+        readonly aspectRatio: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{

package/src/component/FluxBadgeStack.vue

@@ -1,17 +1,17 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="horizontal"
         :gap="6"
-        is-wrapping>
+        wrap="wrap">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxButtonStack.vue

@@ -1,10 +1,11 @@
 <template>
-    <FluxStack
+    <FluxFlex
+        :class="isFill ? $style.flexFill : undefined"
         :direction="direction"
         :gap="gap"
-        :is-fill="isFill">
+        wrap="wrap">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -12,7 +13,8 @@
     setup>
     import type { FluxDirection } from '@flux-ui/types';
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
+    import $style from '~flux/components/css/component/Flex.module.scss';
 
     const {
         direction = 'horizontal',