@flux-ui/components 3.0.0-next.0

package/src/transition/FluxWindowTransition.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="isBack ? $style.windowTransitionBackEnterActive : $style.windowTransitionEnterActive"
+        :enter-from-class="isBack ? $style.windowTransitionBackEnterFrom : $style.windowTransitionEnterFrom"
+        :leave-active-class="isBack ? $style.windowTransitionBackLeaveActive : $style.windowTransitionLeaveActive"
+        :leave-to-class="isBack ? $style.windowTransitionBackLeaveTo : $style.windowTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly isBack?: boolean;
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/index.ts

@@ -0,0 +1,10 @@
+export { default as FluxAutoHeightTransition } from './FluxAutoHeightTransition.vue';
+export { default as FluxAutoWidthTransition } from './FluxAutoWidthTransition.vue';
+export { default as FluxBreakthroughTransition } from './FluxBreakthroughTransition.vue';
+export { default as FluxFadeTransition } from './FluxFadeTransition.vue';
+export { default as FluxOverlayTransition } from './FluxOverlayTransition.vue';
+export { default as FluxRouteTransition } from './FluxRouteTransition.vue';
+export { default as FluxSlideOverTransition } from './FluxSlideOverTransition.vue';
+export { default as FluxTooltipTransition } from './FluxTooltipTransition.vue';
+export { default as FluxVerticalWindowTransition } from './FluxVerticalWindowTransition.vue';
+export { default as FluxWindowTransition } from './FluxWindowTransition.vue';

package/src/util/createDialogRenderer.ts

@@ -0,0 +1,64 @@
+import { flattenVNodeTree } from '@flux-ui/internals';
+import type { Component, RenderFunction, Slots } from 'vue';
+import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
+import { registerDialog, useFluxStore } from '$flux/data';
+
+type Emit = SetupContext<['close']>['emit'];
+type Props = {
+    readonly isCloseable?: boolean;
+    readonly viewKey?: string;
+};
+
+export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component, to: string = 'body'): RenderFunction {
+    let unregister: Function | null = null;
+    let zIndex = 0;
+
+    onMounted(() => {
+        window.addEventListener('keydown', onKeyDown);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', onKeyDown);
+        unregister?.();
+    });
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key !== 'Escape' || !unregister || !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[] = [];
+
+        if (isVisible) {
+            if (!unregister) {
+                unregister = registerDialog();
+                zIndex = dialogCount + 1000;
+            }
+
+            content.push(h('div', {
+                key: props.viewKey,
+                class: className,
+                style: {zIndex}
+            }, children));
+        } else {
+            unregister?.();
+            unregister = null;
+        }
+
+        return h(Teleport, {disabled: content.length === 0, to}, [
+            h(transition, attrs, {
+                default: () => content
+            })
+        ]);
+    };
+}

package/src/util/createLabelForDateRange.ts

@@ -0,0 +1,61 @@
+import type { DateTime } from 'luxon';
+import { useTranslate } from '$flux/composable/private';
+
+export default function (start: DateTime, end: DateTime, preventCustom: boolean = false): string {
+    const translate = useTranslate();
+
+    if (start.day === end.day && start.month === end.month && start.year === end.year) {
+        return start.toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        });
+    }
+
+    if (start.month === end.month && start.year === end.year) {
+        const startStr = start.toLocaleString({
+            day: 'numeric'
+        });
+
+        const endStr = end.toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        });
+
+        return `${startStr} – ${endStr}`;
+    }
+
+    if (start.year === end.year) {
+        const startStr = start.toLocaleString({
+            day: 'numeric',
+            month: 'short'
+        });
+
+        const endStr = end.toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        });
+
+        return `${startStr} – ${endStr}`;
+    }
+
+    if (preventCustom) {
+        const startStr = start.toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        });
+
+        const endStr = end.toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        });
+
+        return `${startStr} – ${endStr}`;
+    }
+
+    return translate('flux.customPeriod');
+}

package/src/util/index.ts

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

package/src/vite.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.module.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "useDefineForClassFields": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "jsx": "preserve",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "lib": [
+            "esnext",
+            "dom"
+        ],
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "declarationMap": true,
+        "emitDeclarationOnly": true,
+        "outDir": "dist",
+        "baseUrl": ".",
+        "rootDir": "./src",
+        "paths": {
+            "$flux/*": ["src/*"]
+        }
+    },
+    "include": [
+        "./src/**/*.ts",
+        "./src/**/*.vue"
+    ],
+    "exclude": [
+        "dist",
+        "node_modules"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ],
+    "vueCompilerOptions": {
+        "target": 3.5,
+        "strictTemplates": false
+    }
+}