@flux-ui/components 3.0.0-next.0

package/src/component/index.ts

@@ -0,0 +1,142 @@
+export { default as FluxAction } from './FluxAction.vue';
+export { default as FluxActionBar } from './FluxActionBar.vue';
+export { default as FluxActionPane } from './FluxActionPane.vue';
+export { default as FluxActions } from './FluxActions.vue';
+export { default as FluxAnimatedColors } from './FluxAnimatedColors.vue';
+export { default as FluxAspectRatio } from './FluxAspectRatio.vue';
+export { default as FluxAutoGrid } from './FluxAutoGrid.vue';
+export { default as FluxAvatar } from './FluxAvatar.vue';
+export { default as FluxBadge } from './FluxBadge.vue';
+export { default as FluxBadgeStack } from './FluxBadgeStack.vue';
+export { default as FluxBorderShine } from './FluxBorderShine.vue';
+export { default as FluxBoxedIcon } from './FluxBoxedIcon.vue';
+export { default as FluxButton } from './FluxButton.vue';
+export { default as FluxButtonGroup } from './FluxButtonGroup.vue';
+export { default as FluxButtonStack } from './FluxButtonStack.vue';
+export { default as FluxCalendar } from './FluxCalendar.vue';
+export { default as FluxCalendarEvent } from './FluxCalendarEvent.vue';
+export { default as FluxCheckbox } from './FluxCheckbox.vue';
+export { default as FluxChip } from './FluxChip.vue';
+export { default as FluxClickablePane } from './FluxClickablePane.vue';
+export { default as FluxComment } from './FluxComment.vue';
+export { default as FluxColorPicker } from './FluxColorPicker.vue';
+export { default as FluxColorSelect } from './FluxColorSelect.vue';
+export { default as FluxContainer } from './FluxContainer.vue';
+export { default as FluxDataTable } from './FluxDataTable.vue';
+export { default as FluxDatePicker } from './FluxDatePicker.vue';
+export { default as FluxDestructiveButton } from './FluxDestructiveButton.vue';
+export { default as FluxDisabled } from './FluxDisabled.vue';
+export { default as FluxDivider } from './FluxDivider.vue';
+export { default as FluxDotPattern } from './FluxDotPattern.vue';
+export { default as FluxDropZone } from './FluxDropZone.vue';
+export { default as FluxDynamicView } from './FluxDynamicView.vue';
+export { default as FluxExpandable } from './FluxExpandable.vue';
+export { default as FluxExpandableGroup } from './FluxExpandableGroup.vue';
+export { default as FluxFader } from './FluxFader.vue';
+export { default as FluxFaderItem } from './FluxFaderItem.vue';
+export { default as FluxFilter } from './FluxFilter.vue';
+export { default as FluxFilterDate } from './FluxFilterDate.vue';
+export { default as FluxFilterDateRange } from './FluxFilterDateRange.vue';
+export { default as FluxFilterOption } from './FluxFilterOption.vue';
+export { default as FluxFilterOptionAsync } from './FluxFilterOptionAsync.vue';
+export { default as FluxFilterOptions } from './FluxFilterOptions.vue';
+export { default as FluxFilterOptionsAsync } from './FluxFilterOptionsAsync.vue';
+export { default as FluxFilterRange } from './FluxFilterRange.vue';
+export { default as FluxFlickeringGrid } from './FluxFlickeringGrid.vue';
+export { default as FluxFlyout } from './FluxFlyout.vue';
+export { default as FluxFocalPointEditor } from './FluxFocalPointEditor.vue';
+export { default as FluxFocalPointImage } from './FluxFocalPointImage.vue';
+export { default as FluxForm } from './FluxForm.vue';
+export { default as FluxFormColumn } from './FluxFormColumn.vue';
+export { default as FluxFormDateInput } from './FluxFormDateInput.vue';
+export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue';
+export { default as FluxFormDateTimeInput } from './FluxFormDateTimeInput.vue';
+export { default as FluxFormField } from './FluxFormField.vue';
+export { default as FluxFormFieldAddition } from './FluxFormFieldAddition.vue';
+export { default as FluxFormInput } from './FluxFormInput.vue';
+export { default as FluxFormInputAddition } from './FluxFormInputAddition.vue';
+export { default as FluxFormInputGroup } from './FluxFormInputGroup.vue';
+export { default as FluxFormPinInput } from './FluxFormPinInput.vue';
+export { default as FluxFormRangeSlider } from './FluxFormRangeSlider.vue';
+export { default as FluxFormRow } from './FluxFormRow.vue';
+export { default as FluxFormSection } from './FluxFormSection.vue';
+export { default as FluxFormSelect } from './FluxFormSelect.vue';
+export { default as FluxFormSelectAsync } from './FluxFormSelectAsync.vue';
+export { default as FluxFormSlider } from './FluxFormSlider.vue';
+export { default as FluxFormTextArea } from './FluxFormTextArea.vue';
+export { default as FluxFormTimeZonePicker } from './FluxFormTimeZonePicker.vue';
+export { default as FluxGallery } from './FluxGallery.vue';
+export { default as FluxGalleryItem } from './FluxGalleryItem.vue';
+export { default as FluxGrid } from './FluxGrid.vue';
+export { default as FluxGridColumn } from './FluxGridColumn.vue';
+export { default as FluxGridPattern } from './FluxGridPattern.vue';
+export { default as FluxIcon } from './FluxIcon.vue';
+export { default as FluxInfo } from './FluxInfo.vue';
+export { default as FluxInfoStack } from './FluxInfoStack.vue';
+export { default as FluxLegend } from './FluxLegend.vue';
+export { default as FluxLink } from './FluxLink.vue';
+export { default as FluxMenu } from './FluxMenu.vue';
+export { default as FluxMenuGroup } from './FluxMenuGroup.vue';
+export { default as FluxMenuItem } from './FluxMenuItem.vue';
+export { default as FluxMenuOptions } from './FluxMenuOptions.vue';
+export { default as FluxMenuSubHeader } from './FluxMenuSubHeader.vue';
+export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
+export { default as FluxNotice } from './FluxNotice.vue';
+export { default as FluxNoticeStack } from './FluxNoticeStack.vue';
+export { default as FluxOverlay } from './FluxOverlay.vue';
+export { default as FluxPagination } from './FluxPagination.vue';
+export { default as FluxPaginationBar } from './FluxPaginationBar.vue';
+export { default as FluxPane } from './FluxPane.vue';
+export { default as FluxPaneBody } from './FluxPaneBody.vue';
+export { default as FluxPaneDeck } from './FluxPaneDeck.vue';
+export { default as FluxPaneFooter } from './FluxPaneFooter.vue';
+export { default as FluxPaneGroup } from './FluxPaneGroup.vue';
+export { default as FluxPaneHeader } from './FluxPaneHeader.vue';
+export { default as FluxPaneIllustration } from './FluxPaneIllustration.vue';
+export { default as FluxPaneMedia } from './FluxPaneMedia.vue';
+export { default as FluxPercentageBar } from './FluxPercentageBar.vue';
+export { default as FluxPersona } from './FluxPersona.vue';
+export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
+export { default as FluxPressable } from './FluxPressable.vue';
+export { default as FluxPrimaryButton } from './FluxPrimaryButton.vue';
+export { default as FluxProgressBar } from './FluxProgressBar.vue';
+export { default as FluxPublishButton } from './FluxPublishButton.vue';
+export { default as FluxQuantitySelector } from './FluxQuantitySelector.vue';
+export { default as FluxRemove } from './FluxRemove.vue';
+export { default as FluxRoot } from './FluxRoot.vue';
+export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
+export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
+export { default as FluxSegmentedView } from './FluxSegmentedView.vue';
+export { default as FluxSeparator } from './FluxSeparator.vue';
+export { default as FluxSlideOver } from './FluxSlideOver.vue';
+export { default as FluxSnackbar } from './FluxSnackbar.vue';
+export { default as FluxSnackbarProvider } from './FluxSnackbarProvider.vue';
+export { default as FluxSpacer } from './FluxSpacer.vue';
+export { default as FluxSpacing } from './FluxSpacing.vue';
+export { default as FluxSpinner } from './FluxSpinner.vue';
+export { default as FluxSplitButton } from './FluxSplitButton.vue';
+export { default as FluxStack } from './FluxStack.vue';
+export { default as FluxStatistic } from './FluxStatistic.vue';
+export { default as FluxStepper } from './FluxStepper.vue';
+export { default as FluxStepperStep } from './FluxStepperStep.vue';
+export { default as FluxStepperSteps } from './FluxStepperSteps.vue';
+export { default as FluxTab } from './FluxTab.vue';
+export { default as FluxTabBar } from './FluxTabBar.vue';
+export { default as FluxTabBarItem } from './FluxTabBarItem.vue';
+export { default as FluxTabs } from './FluxTabs.vue';
+export { default as FluxTable } from './FluxTable.vue';
+export { default as FluxTableActions } from './FluxTableActions.vue';
+export { default as FluxTableCell } from './FluxTableCell.vue';
+export { default as FluxTableHeader } from './FluxTableHeader.vue';
+export { default as FluxTableRow } from './FluxTableRow.vue';
+export { default as FluxTag } from './FluxTag.vue';
+export { default as FluxTagStack } from './FluxTagStack.vue';
+export { default as FluxTicks } from './FluxTicks.vue';
+export { default as FluxTimeline } from './FluxTimeline.vue';
+export { default as FluxTimelineItem } from './FluxTimelineItem.vue';
+export { default as FluxToggle } from './FluxToggle.vue';
+export { default as FluxToolbar } from './FluxToolbar.vue';
+export { default as FluxToolbarGroup } from './FluxToolbarGroup.vue';
+export { default as FluxTooltip } from './FluxTooltip.vue';
+export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue';
+export { default as FluxWindow } from './FluxWindow.vue';

package/src/component/primitive/Anchor.vue

@@ -0,0 +1,17 @@
+<template>
+    <component :is="tagName">
+        <slot/>
+    </component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    defineProps<{
+        readonly tagName: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/primitive/AnchorPopup.vue

@@ -0,0 +1,194 @@
+<template>
+    <div
+        ref="popup"
+        :style="{
+                '--x': `${state.x}px`,
+                '--y': `${state.y}px`,
+                '--width': state.width ? `${state.width}px` : undefined
+            }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isHtmlElement } from '@basmilius/utils';
+    import { useMutationObserver } from '@flux-ui/internals';
+    import type { FluxDirection } from '@flux-ui/types';
+    import { ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
+
+    const {
+        anchor,
+        direction = 'vertical',
+        margin = 12,
+        position,
+        useAnchorWidth
+    } = defineProps<{
+        readonly anchor?: ComponentPublicInstance | HTMLElement | null;
+        readonly direction?: FluxDirection;
+        readonly margin?: number;
+        readonly position?:
+            | 'top' | 'top-left' | 'top-right'
+            | 'left' | 'left-top' | 'left-bottom'
+            | 'right' | 'right-top' | 'right-bottom'
+            | 'bottom' | 'bottom-left' | 'bottom-right';
+        readonly useAnchorWidth?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const anchorRef = ref<HTMLElement>();
+    const popupRef = useTemplateRef('popup');
+
+    const state = reactive({
+        x: 0,
+        y: 0,
+        width: null as number | null
+    });
+
+    onMounted(() => {
+        window.addEventListener('resize', onResize, {passive: true});
+        window.addEventListener('scroll', onScroll, {capture: true, passive: true});
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', onResize);
+        window.removeEventListener('scroll', onScroll);
+    });
+
+    useMutationObserver(popupRef, () => {
+        reposition();
+    }, {childList: true, subtree: true});
+
+    function reposition(): void {
+        const anchor = unref(anchorRef);
+        const popup = unref(popupRef);
+
+        if (!anchor || !popup) {
+            return;
+        }
+
+        const {x, y, height, width} = anchor.getBoundingClientRect();
+        const {height: popupHeight, width: popupWidth} = popup.getBoundingClientRect();
+
+        let px: number,
+            py: number;
+
+        switch (position) {
+            case 'top':
+                px = x + width / 2 - popupWidth / 2;
+                py = y - popupHeight - margin;
+                break;
+
+            case 'top-left':
+                px = x;
+                py = y - popupHeight - margin;
+                break;
+
+            case 'top-right':
+                px = x - popupWidth + width;
+                py = y - popupHeight - margin;
+                break;
+
+            case 'left':
+                px = x - popupWidth - margin;
+                py = y + height / 2 - popupHeight / 2;
+                break;
+
+            case 'left-top':
+                px = x - popupWidth - margin;
+                py = y;
+                break;
+
+            case 'left-bottom':
+                px = x - popupWidth - margin;
+                py = y + height - popupHeight;
+                break;
+
+            case 'right':
+                px = x + width + margin;
+                py = y + height / 2 - popupHeight / 2;
+                break;
+
+            case 'right-top':
+                px = x + width + margin;
+                py = y;
+                break;
+
+            case 'right-bottom':
+                px = x + width + margin;
+                py = y + height - popupHeight;
+                break;
+
+            case 'bottom':
+                px = x + width / 2 - popupWidth / 2;
+                py = y + height + margin;
+                break;
+
+            case 'bottom-left':
+                px = x;
+                py = y + height + margin;
+                break;
+
+            case 'bottom-right':
+                px = x - popupWidth + width;
+                py = y + height + margin;
+                break;
+
+            default:
+                if (direction === 'horizontal') {
+                    px = x + width + margin;
+                    py = y + height / 2 - popupHeight / 2;
+
+                    if (px + popupWidth > innerWidth) {
+                        px = x - popupWidth - margin;
+                    }
+                } else {
+                    px = x + width / 2 - popupWidth / 2;
+                    py = y + height + margin;
+
+                    if (py + popupHeight > innerHeight) {
+                        py = y - popupHeight - margin;
+                    }
+                }
+                break;
+        }
+
+        state.x = px;
+        state.y = py;
+    }
+
+    function resize(): void {
+        const anchor = unref(anchorRef);
+
+        if (!anchor) {
+            return;
+        }
+
+        const {width} = anchor.getBoundingClientRect();
+        state.width = useAnchorWidth ? width : null;
+    }
+
+    function onResize(): void {
+        resize();
+        reposition();
+    }
+
+    function onScroll(): void {
+        reposition();
+    }
+
+    watchEffect(() => {
+        if (!anchor || (!isHtmlElement(anchor) && !anchor.$el)) {
+            return;
+        }
+
+        anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
+
+        requestAnimationFrame(resize);
+        requestAnimationFrame(reposition);
+    });
+</script>

package/src/component/primitive/CoordinatePicker.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        ref="root"
+        :class="$style.coordinatePicker"
+        role="slider"
+        :aria-disabled="disabled ? true : undefined"
+        @pointerdown="onPointerDown">
+        <CoordinatePickerThumb
+            :disabled="disabled"
+            :is-dragging="isDragging"
+            :position="thumbPosition"
+            @decrement="onDecrement"
+            @increment="onIncrement"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { roundStep } from '@basmilius/utils';
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { computed, onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import CoordinatePickerThumb from './CoordinatePickerThumb.vue';
+    import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
+
+    const emit = defineEmits<{
+        dragging: [boolean];
+    }>();
+
+    const modelValue = defineModel<[number, number]>({
+        default: [0, 0]
+    });
+
+    const {
+        disabled: componentDisabled,
+        max: maxProp = 100,
+        min: minProp = 0,
+        step: stepProp = 1
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly max?: number | [number, number];
+        readonly min?: number | [number, number];
+        readonly step?: number | [number, number];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const rootRef = useTemplateRef('root');
+
+    const isDragging = ref(false);
+
+    const max = computed(() => Array.isArray(maxProp) ? maxProp : [maxProp, maxProp]);
+    const min = computed(() => Array.isArray(minProp) ? minProp : [minProp, minProp]);
+    const step = computed(() => Array.isArray(stepProp) ? stepProp : [stepProp, stepProp]);
+
+    const thumbPosition = computed<[number, number]>(() => [
+        (unref(modelValue)[0] - unref(min)[0]) / (unref(max)[0] - unref(min)[0]),
+        (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])
+    ]);
+
+    onMounted(() => {
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
+
+    function onDecrement(x: boolean, y: boolean): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        let [valueX, valueY] = unref(modelValue);
+        const [maxX, maxY] = unref(max);
+        const [minX, minY] = unref(min);
+        const [stepX, stepY] = unref(step);
+
+        if (x) {
+            valueX = +roundStep(Math.max(minX, Math.min(maxX, valueX - stepX)), stepX).toPrecision(4);
+        }
+
+        if (y) {
+            valueY = +roundStep(Math.max(minY, Math.min(maxY, valueY - stepY)), stepY).toPrecision(4);
+        }
+
+        modelValue.value = [valueX, valueY];
+    }
+
+    function onIncrement(x: boolean, y: boolean): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        let [valueX, valueY] = unref(modelValue);
+        const [maxX, maxY] = unref(max);
+        const [minX, minY] = unref(min);
+        const [stepX, stepY] = unref(step);
+
+        if (x) {
+            valueX = +roundStep(Math.max(minX, Math.min(maxX, valueX + stepX)), stepX).toPrecision(4);
+        }
+
+        if (y) {
+            valueY = +roundStep(Math.max(minY, Math.min(maxY, valueY + stepY)), stepY).toPrecision(4);
+        }
+
+        modelValue.value = [valueX, valueY];
+    }
+
+    function onPointerDown(evt: PointerEvent): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        isDragging.value = true;
+        requestAnimationFrame(() => onPointerMove(evt));
+    }
+
+    function onPointerMove(evt: PointerEvent): void {
+        const root = unrefTemplateElement(rootRef);
+
+        if (!unref(isDragging) || !root) {
+            return;
+        }
+
+        const [maxX, maxY] = unref(max);
+        const [minX, minY] = unref(min);
+        const [stepX, stepY] = unref(step);
+
+        let {top, left, width, height} = root.getBoundingClientRect();
+        top += 6;
+        left += 6;
+        width -= 12;
+        height -= 12;
+
+        const x = Math.max(0, Math.min(1, (evt.clientX - left) / width));
+        const y = Math.max(0, Math.min(1, (evt.clientY - top) / height));
+
+        modelValue.value = [
+            +roundStep(x * (maxX - minX) + minX, stepX).toPrecision(4),
+            +roundStep(y * (maxY - minY) + minY, stepY).toPrecision(4)
+        ];
+
+        evt.preventDefault();
+    }
+
+    function onPointerUp(): void {
+        isDragging.value = false;
+    }
+
+    watch(isDragging, isDragging => emit('dragging', isDragging));
+</script>

package/src/component/primitive/CoordinatePickerThumb.vue

@@ -0,0 +1,71 @@
+<template>
+    <button
+        :class="clsx(
+            $style.coordinatePickerThumb,
+            disabled && $style.isDisabled,
+            isDragging && $style.isDragging
+        )"
+        :style="{
+            top: `${position[1] * 100}%`,
+            left: `${position[0] * 100}%`
+        }"
+        :aria-disabled="disabled ? true : undefined"
+        :tabindex="disabled ? -1 : 0"
+        type="button"
+        @keydown="onKeyDown"
+        @pointerdown="$emit('grab', $event)"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { toRef, unref } from 'vue';
+    import { useDisabled } from '$flux/composable';
+    import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
+
+    const emit = defineEmits<{
+        decrement: [boolean, boolean];
+        grab: [PointerEvent];
+        increment: [boolean, boolean];
+    }>();
+
+    const {
+        disabled: componentDisabled
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly isDragging?: boolean;
+        readonly position: [number, number];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (unref(disabled)) {
+            return;
+        }
+
+        switch (evt.key) {
+            case 'ArrowUp':
+                emit('decrement', false, true);
+                break;
+
+            case 'ArrowDown':
+                emit('increment', false, true);
+                break;
+
+            case 'ArrowLeft':
+                emit('decrement', true, false);
+                break;
+
+            case 'ArrowRight':
+                emit('increment', true, false);
+                break;
+
+            default:
+                return;
+        }
+
+        evt.preventDefault();
+    }
+</script>

package/src/component/primitive/FilterItem.vue

@@ -0,0 +1,44 @@
+<template>
+    <FluxMenuItem
+        :command="valueLabel"
+        command-icon="angle-right"
+        :command-loading="isLoading"
+        :icon-leading="item.icon"
+        :label="item.label"
+        type="button"
+        @click="onClick"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { useLoaded } from '$flux/composable/private';
+    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        item,
+        value
+    } = defineProps<{
+        readonly item: FluxFilterItem;
+        readonly value: FluxFilterValue;
+    }>();
+
+    const {isLoading, loaded} = useLoaded();
+    const getValueLabel = computed(() => loaded(item.getValueLabel));
+
+    const valueLabel = ref<string>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+
+    watch(() => item, async () => {
+        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    }, {deep: true, immediate: true});
+</script>