@class-kit/vue 0.1.0

package/dist/components/popup.js

@@ -0,0 +1,389 @@
+import { defineComponent, ref, watch, h, onBeforeUnmount, Teleport } from 'vue';
+import { PopupController, configureClassComponents } from '@class-kit/core';
+
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function classIcon(name, className = "cc-icon") {
+    return h("svg", {
+        "aria-hidden": "true",
+        class: className,
+        fill: "none",
+        focusable: "false",
+        viewBox: "0 0 24 24",
+    }, classIconPaths[name].map((d) => h("path", {
+        d,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": 2,
+        stroke: "currentColor",
+    })));
+}
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+defineComponent({
+    name: "ClassConfigProvider",
+    props: {
+        class: {
+            type: String,
+            default: "",
+        },
+        locale: {
+            type: Object,
+            default: undefined,
+        },
+        style: {
+            type: [String, Object, Array],
+            default: undefined,
+        },
+        theme: {
+            type: [String, Object],
+            default: "minimal",
+        },
+    },
+    setup(props, { slots }) {
+        const version = ref(0);
+        const applyConfig = () => {
+            configureClassComponents({
+                locale: props.locale,
+                theme: props.theme,
+            });
+            version.value += 1;
+        };
+        watch(() => [props.locale, props.theme], applyConfig, {
+            deep: true,
+            immediate: true,
+        });
+        return () => h("div", {
+            class: ["cc-config-provider", props.class].filter(Boolean),
+            "data-cc-theme": resolveClassKitThemeName(props.theme),
+            style: props.style,
+        }, [
+            h("div", { key: version.value, class: "cc-config-provider__content" }, slots.default?.()),
+        ]);
+    },
+});
+function resolveAnimation(animation, fallbackName) {
+    if (animation === false) {
+        return {
+            duration: 0,
+            easing: "ease",
+            enabled: false,
+            name: "none",
+        };
+    }
+    return {
+        duration: animation?.duration ?? 180,
+        easing: animation?.easing ?? "cubic-bezier(0.22, 0.8, 0.28, 1)",
+        enabled: animation?.enabled ?? true,
+        name: animation?.name ?? fallbackName,
+    };
+}
+function animationStyle(animation) {
+    return {
+        "--cc-animation-duration": `${animation.enabled ? animation.duration : 0}ms`,
+        "--cc-animation-easing": animation.easing,
+    };
+}
+const focusableSelector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+].join(",");
+function getFocusableElements(container) {
+    if (!container)
+        return [];
+    return Array.from(container.querySelectorAll(focusableSelector)).filter((element) => !element.hasAttribute("disabled") &&
+        element.getAttribute("aria-hidden") !== "true");
+}
+function focusInitialElement(container) {
+    const target = getFocusableElements(container)[0] ?? container;
+    target?.focus({ preventScroll: true });
+}
+function trapFocus(event, container) {
+    if (event.key !== "Tab" || !container)
+        return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0) {
+        event.preventDefault();
+        container.focus({ preventScroll: true });
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus({ preventScroll: true });
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus({ preventScroll: true });
+    }
+}
+function setupLayerA11y(container, options) {
+    if (typeof document === "undefined")
+        return () => { };
+    const previousActiveElement = document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const previousOverflow = document.body.style.overflow;
+    if (options.lockScroll)
+        document.body.style.overflow = "hidden";
+    const frame = requestAnimationFrame(() => focusInitialElement(container()));
+    const handleKeydown = (event) => {
+        if (options.closeOnEsc && event.key === "Escape") {
+            event.preventDefault();
+            options.onClose();
+            return;
+        }
+        if (options.trapFocus)
+            trapFocus(event, container());
+    };
+    document.addEventListener("keydown", handleKeydown, true);
+    return () => {
+        cancelAnimationFrame(frame);
+        document.removeEventListener("keydown", handleKeydown, true);
+        if (options.lockScroll)
+            document.body.style.overflow = previousOverflow;
+        if (options.restoreFocus)
+            previousActiveElement?.focus({ preventScroll: true });
+    };
+}
+const ClassPopup = /*#__PURE__*/ defineComponent({
+    name: "ClassPopup",
+    inheritAttrs: false,
+    props: {
+        open: Boolean,
+        controller: Object,
+        placement: {
+            type: String,
+            default: "bottom",
+        },
+        title: String,
+        animation: {
+            type: [Object, Boolean],
+            default: undefined,
+        },
+        allowPageScroll: {
+            type: Boolean,
+            default: false,
+        },
+        closeOnEsc: {
+            type: Boolean,
+            default: true,
+        },
+        closeOnOverlayClick: {
+            type: Boolean,
+            default: true,
+        },
+        closeIcon: {
+            type: null,
+            default: () => classIcon("x"),
+        },
+        container: {
+            type: Object,
+            default: undefined,
+        },
+        lockScroll: {
+            type: Boolean,
+            default: true,
+        },
+        className: {
+            type: String,
+            default: "cc-popup",
+        },
+        overlayClass: {
+            type: String,
+            default: "cc-popup__overlay",
+        },
+        panelClass: {
+            type: String,
+            default: "cc-popup__panel",
+        },
+        pushDistance: {
+            type: [Number, String],
+            default: undefined,
+        },
+        pushTarget: {
+            type: Object,
+            default: undefined,
+        },
+        restoreFocus: {
+            type: Boolean,
+            default: true,
+        },
+        trapFocus: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    emits: ["update:open"],
+    setup(props, { attrs, emit, slots }) {
+        const controller = props.controller ?? new PopupController(props.open, props.placement);
+        const state = ref(controller.getState());
+        const rendered = ref(state.value.open);
+        const panelRef = ref(null);
+        const animationState = ref(state.value.open ? "enter" : "exit");
+        let timer;
+        let frame = 0;
+        let cleanupA11y;
+        let pushSnapshot = null;
+        const syncPushTarget = () => {
+            const target = props.pushTarget;
+            if (!target)
+                return;
+            if (!pushSnapshot || pushSnapshot.target !== target) {
+                pushSnapshot = {
+                    target,
+                    transform: target.style.transform,
+                    transition: target.style.transition,
+                };
+            }
+            const original = pushSnapshot;
+            const motion = resolveAnimation(props.animation, "slide");
+            const measuredDistance = state.value.placement === "left" || state.value.placement === "right"
+                ? (panelRef.value?.offsetWidth ?? 0)
+                : (panelRef.value?.offsetHeight ?? 0);
+            const distance = typeof props.pushDistance === "number"
+                ? `${props.pushDistance}px`
+                : (props.pushDistance ?? `${measuredDistance}px`);
+            const signedDistance = state.value.placement === "left" || state.value.placement === "top"
+                ? distance
+                : `calc(-1 * ${distance})`;
+            target.style.transition =
+                original.transition ||
+                    `transform ${motion.duration}ms ${motion.easing}`;
+            target.style.transform = state.value.open
+                ? state.value.placement === "left" || state.value.placement === "right"
+                    ? `translate3d(${signedDistance}, 0, 0)`
+                    : `translate3d(0, ${signedDistance}, 0)`
+                : original.transform;
+        };
+        const syncRenderedState = (nextOpen) => {
+            const motion = resolveAnimation(props.animation, "slide");
+            if (timer)
+                clearTimeout(timer);
+            if (frame)
+                cancelAnimationFrame(frame);
+            if (nextOpen) {
+                rendered.value = true;
+                animationState.value = "exit";
+                frame = requestAnimationFrame(() => {
+                    animationState.value = "enter";
+                });
+                return;
+            }
+            animationState.value = "exit";
+            if (!motion.enabled || motion.duration <= 0) {
+                rendered.value = false;
+                return;
+            }
+            timer = setTimeout(() => {
+                rendered.value = false;
+            }, motion.duration);
+        };
+        const unsubscribe = controller.subscribe((nextState) => {
+            state.value = nextState;
+            syncRenderedState(nextState.open);
+            if (cleanupA11y) {
+                cleanupA11y();
+                cleanupA11y = undefined;
+            }
+            if (nextState.open) {
+                cleanupA11y = setupLayerA11y(() => panelRef.value, {
+                    closeOnEsc: props.closeOnEsc,
+                    lockScroll: props.lockScroll && !props.allowPageScroll,
+                    onClose: () => controller.close(),
+                    restoreFocus: props.restoreFocus,
+                    trapFocus: props.trapFocus,
+                });
+            }
+            requestAnimationFrame(syncPushTarget);
+            emit("update:open", nextState.open);
+        });
+        watch(() => props.open, (nextOpen) => controller.setOpen(nextOpen));
+        watch(() => props.placement, (nextPlacement) => controller.setPlacement(nextPlacement));
+        onBeforeUnmount(() => {
+            if (timer)
+                clearTimeout(timer);
+            if (frame)
+                cancelAnimationFrame(frame);
+            if (pushSnapshot) {
+                pushSnapshot.target.style.transform = pushSnapshot.transform;
+                pushSnapshot.target.style.transition = pushSnapshot.transition;
+                pushSnapshot = null;
+            }
+            cleanupA11y?.();
+            unsubscribe();
+        });
+        return () => {
+            const motion = resolveAnimation(props.animation, "slide");
+            const { style: attrStyle, ...restAttrs } = attrs;
+            const popupNode = h("div", {
+                ...restAttrs,
+                class: props.className,
+                "data-animation": motion.name,
+                "data-contained": props.container ? "true" : "false",
+                "data-placement": state.value.placement,
+                "data-state": animationState.value,
+                role: "presentation",
+                style: [attrStyle, animationStyle(motion)],
+            }, [
+                h("button", {
+                    "aria-label": "Close popup",
+                    class: props.overlayClass,
+                    type: "button",
+                    onClick: props.closeOnOverlayClick
+                        ? () => controller.close()
+                        : undefined,
+                }),
+                h("section", {
+                    "aria-modal": "true",
+                    class: props.panelClass,
+                    ref: panelRef,
+                    role: "dialog",
+                    tabindex: -1,
+                }, [
+                    props.title
+                        ? h("header", { class: "cc-popup__header" }, [
+                            h("span", null, props.title),
+                            h("button", {
+                                "aria-label": "Close popup",
+                                class: "cc-popup__close",
+                                type: "button",
+                                onClick: () => controller.close(),
+                            }, props.closeIcon),
+                        ])
+                        : null,
+                    h("div", { class: "cc-popup__body" }, slots.default?.()),
+                ]),
+            ]);
+            return rendered.value
+                ? props.container
+                    ? h(Teleport, { to: props.container }, popupNode)
+                    : popupNode
+                : null;
+        };
+    },
+});
+
+export { ClassPopup };
+//# sourceMappingURL=popup.js.map

package/dist/components/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/components/progress-bar.cjs

@@ -0,0 +1,276 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@class-kit/core');
+
+const formSymbol = /*#__PURE__*/ Symbol("ClassComponentsForm");
+const formInteractivitySymbol = /*#__PURE__*/ Symbol("ClassComponentsFormInteractivity");
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+vue.defineComponent({
+    name: "ClassConfigProvider",
+    props: {
+        class: {
+            type: String,
+            default: "",
+        },
+        locale: {
+            type: Object,
+            default: undefined,
+        },
+        style: {
+            type: [String, Object, Array],
+            default: undefined,
+        },
+        theme: {
+            type: [String, Object],
+            default: "minimal",
+        },
+    },
+    setup(props, { slots }) {
+        const version = vue.ref(0);
+        const applyConfig = () => {
+            core.configureClassComponents({
+                locale: props.locale,
+                theme: props.theme,
+            });
+            version.value += 1;
+        };
+        vue.watch(() => [props.locale, props.theme], applyConfig, {
+            deep: true,
+            immediate: true,
+        });
+        return () => vue.h("div", {
+            class: ["cc-config-provider", props.class].filter(Boolean),
+            "data-cc-theme": resolveClassKitThemeName(props.theme),
+            style: props.style,
+        }, [
+            vue.h("div", { key: version.value, class: "cc-config-provider__content" }, slots.default?.()),
+        ]);
+    },
+});
+function optionalBooleanProp() {
+    return { type: Boolean, default: undefined };
+}
+function useFormInteractivity() {
+    return vue.inject(formInteractivitySymbol, {
+        disabled: vue.ref(false),
+        readOnly: vue.ref(false),
+    });
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled.value;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly.value),
+    };
+}
+const ClassProgressBar = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassProgressBar",
+    inheritAttrs: false,
+    props: {
+        defaultValue: Number,
+        disabled: optionalBooleanProp(),
+        errorClass: String,
+        fieldClass: { type: String, default: "cc-field cc-progress-field" },
+        followPointer: { type: Boolean, default: true },
+        initialValue: Number,
+        interactive: { type: Boolean, default: true },
+        label: [String, Object],
+        labelClass: { type: String, default: "cc-field__label" },
+        max: { type: Number, default: 100 },
+        min: { type: Number, default: 0 },
+        name: String,
+        readOnly: optionalBooleanProp(),
+        readonly: optionalBooleanProp(),
+        rules: Array,
+        step: { type: Number, default: 1 },
+        validateOn: Array,
+        value: Number,
+        className: { type: String, default: "cc-progress" },
+    },
+    emits: ["change", "changeEnd", "update:value"],
+    setup(props, { attrs, emit }) {
+        const form = vue.inject(formSymbol, null);
+        const formInteractivity = useFormInteractivity();
+        const formState = vue.shallowRef(form?.getState() ?? null);
+        const trackRef = vue.ref(null);
+        const thumbRef = vue.ref(null);
+        const dragging = vue.ref(false);
+        const safeMin = vue.computed(() => Number.isFinite(props.min) ? props.min : 0);
+        const safeMax = vue.computed(() => Number.isFinite(props.max)
+            ? Math.max(safeMin.value, props.max)
+            : Math.max(safeMin.value, 100));
+        const safeStep = vue.computed(() => Number.isFinite(props.step) && props.step > 0 ? props.step : 1);
+        const formField = vue.computed(() => props.name ? formState.value?.fields[props.name] : undefined);
+        const formFieldValue = vue.computed(() => Number(formField.value?.value));
+        const usesFormField = vue.computed(() => Boolean(form && props.name));
+        const safeValue = vue.computed(() => usesFormField.value && Number.isFinite(formFieldValue.value)
+            ? formFieldValue.value
+            : Number.isFinite(props.value)
+                ? props.value
+                : undefined);
+        const safeDefaultValue = vue.computed(() => Number.isFinite(props.defaultValue) ? props.defaultValue : undefined);
+        const fieldInitialValue = vue.computed(() => Number.isFinite(props.initialValue)
+            ? props.initialValue
+            : safeDefaultValue.value);
+        const interactivity = vue.computed(() => resolveFieldInteractivity(formInteractivity, props.disabled, props.readOnly ?? props.readonly));
+        const locked = vue.computed(() => interactivity.value.disabled || interactivity.value.readOnly);
+        const controller = new core.ProgressController({
+            disabled: locked.value,
+            max: safeMax.value,
+            min: safeMin.value,
+            step: safeStep.value,
+            value: safeValue.value ?? fieldInitialValue.value ?? safeMin.value,
+        });
+        const state = vue.ref(controller.getState());
+        let unsubscribeField;
+        let unsubscribeForm;
+        vue.onMounted(() => {
+            if (!form || !props.name)
+                return;
+            unsubscribeForm = form.subscribe((nextState) => {
+                formState.value = nextState;
+            });
+            unsubscribeField = form.registerField(props.name, {
+                initialValue: fieldInitialValue.value ?? safeMin.value,
+                rules: props.rules,
+                validateOn: props.validateOn,
+            });
+        });
+        vue.onBeforeUnmount(() => {
+            unsubscribeField?.();
+            unsubscribeForm?.();
+        });
+        vue.watch(() => [
+            locked.value,
+            props.max,
+            props.min,
+            props.step,
+            props.value,
+            formFieldValue.value,
+        ], () => {
+            state.value = controller.updateOptions({
+                disabled: locked.value,
+                max: safeMax.value,
+                min: safeMin.value,
+                step: safeStep.value,
+                value: safeValue.value ?? state.value.value,
+            });
+        });
+        const commitValue = (nextValue, end = false) => {
+            state.value = controller.setValue(nextValue);
+            if (form && props.name)
+                void form.setValue(props.name, state.value.value);
+            emit("update:value", state.value.value);
+            emit("change", state.value.value);
+            if (end)
+                emit("changeEnd", state.value.value);
+        };
+        const updateFromClientX = (clientX, end = false) => {
+            const rect = trackRef.value?.getBoundingClientRect();
+            if (!rect)
+                return;
+            state.value = controller.valueFromClientX(clientX, rect, thumbRef.value?.offsetWidth ?? 0);
+            if (form && props.name)
+                void form.setValue(props.name, state.value.value);
+            emit("update:value", state.value.value);
+            emit("change", state.value.value);
+            if (end)
+                emit("changeEnd", state.value.value);
+        };
+        return () => {
+            const errors = formField.value?.errors ?? [];
+            const errorId = props.name ? `${props.name}-error` : undefined;
+            const progress = vue.h("div", {
+                ...attrs,
+                "aria-describedby": errors.length > 0 ? errorId : undefined,
+                "aria-disabled": interactivity.value.disabled,
+                "aria-readonly": interactivity.value.readOnly || undefined,
+                "aria-valuemax": state.value.max,
+                "aria-valuemin": state.value.min,
+                "aria-valuenow": state.value.value,
+                class: props.className,
+                "data-disabled": interactivity.value.disabled,
+                "data-dragging": dragging.value,
+                "data-interactive": props.interactive && !locked.value,
+                "data-readonly": interactivity.value.readOnly,
+                ref: trackRef,
+                role: "slider",
+                tabindex: locked.value || !props.interactive ? -1 : 0,
+                onKeydown: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+                        commitValue(state.value.value - state.value.step);
+                    if (event.key === "ArrowRight" || event.key === "ArrowUp")
+                        commitValue(state.value.value + state.value.step);
+                    if (event.key === "Home")
+                        commitValue(state.value.min);
+                    if (event.key === "End")
+                        commitValue(state.value.max);
+                },
+                onPointerdown: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    event.preventDefault();
+                    dragging.value = true;
+                    updateFromClientX(event.clientX);
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                },
+                onPointermove: (event) => {
+                    if (!props.interactive ||
+                        !props.followPointer ||
+                        locked.value ||
+                        event.buttons !== 1)
+                        return;
+                    updateFromClientX(event.clientX);
+                },
+                onPointerup: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    dragging.value = false;
+                    event.currentTarget.releasePointerCapture?.(event.pointerId);
+                    updateFromClientX(event.clientX, true);
+                },
+                onPointercancel: () => {
+                    dragging.value = false;
+                },
+            }, [
+                vue.h("span", { class: "cc-progress__track" }),
+                vue.h("span", {
+                    class: "cc-progress__fill",
+                    style: { width: `${state.value.percent}%` },
+                }),
+                vue.h("span", {
+                    class: "cc-progress__thumb",
+                    ref: thumbRef,
+                    style: {
+                        left: `calc(${state.value.percent / 100} * (100% - var(--cc-progress-thumb-size)))`,
+                    },
+                }),
+            ]);
+            if (!props.name && !props.label)
+                return progress;
+            return vue.h("div", {
+                class: props.fieldClass,
+                "data-disabled": interactivity.value.disabled,
+                "data-readonly": interactivity.value.readOnly,
+            }, [
+                props.label
+                    ? vue.h("span", { class: props.labelClass }, props.label)
+                    : null,
+                progress,
+                errorId && errors.length > 0
+                    ? vue.h("div", { class: props.errorClass ?? "cc-field__error", id: errorId }, errors.join("，"))
+                    : null,
+            ]);
+        };
+    },
+});
+
+exports.ClassProgressBar = ClassProgressBar;
+//# sourceMappingURL=progress-bar.cjs.map