@class-kit/vue 0.1.0

package/dist/components/video-detail-transition.cjs

@@ -0,0 +1,637 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@class-kit/core');
+
+const formSymbol = /*#__PURE__*/ Symbol("ClassComponentsForm");
+const formInteractivitySymbol = /*#__PURE__*/ Symbol("ClassComponentsFormInteractivity");
+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 vue.h("svg", {
+        "aria-hidden": "true",
+        class: className,
+        fill: "none",
+        focusable: "false",
+        viewBox: "0 0 24 24",
+    }, classIconPaths[name].map((d) => vue.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";
+}
+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 ClassVideoPlayer = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassVideoPlayer",
+    inheritAttrs: false,
+    props: {
+        sources: {
+            type: [Array, String, Object],
+            required: true,
+        },
+        autoplay: { type: Boolean, default: false },
+        controls: { type: Boolean, default: true },
+        loop: { type: Boolean, default: false },
+        muted: { type: Boolean, default: false },
+        poster: String,
+        preload: {
+            type: String,
+            default: "metadata",
+        },
+        className: { type: String, default: "cc-video-player" },
+        videoClass: { type: String, default: "cc-video-player__video" },
+    },
+    setup(props, { attrs }) {
+        const videoRef = vue.ref(null);
+        const currentTime = vue.ref(0);
+        const duration = vue.ref(0);
+        const playing = vue.ref(false);
+        const toggle = () => {
+            const video = videoRef.value;
+            if (!video)
+                return;
+            if (video.paused)
+                void video.play();
+            else
+                video.pause();
+        };
+        return () => {
+            const state = new core.VideoPlayerController({
+                autoplay: props.autoplay,
+                controls: props.controls,
+                loop: props.loop,
+                muted: props.muted,
+                poster: props.poster,
+                preload: props.preload,
+                sources: props.sources,
+            }).getState();
+            return vue.h("div", { class: props.className }, [
+                vue.h("video", {
+                    ...attrs,
+                    autoplay: state.autoplay,
+                    class: props.videoClass,
+                    controls: false,
+                    loop: state.loop,
+                    muted: state.muted,
+                    ref: videoRef,
+                    onDurationchange: (event) => {
+                        duration.value =
+                            event.currentTarget.duration || 0;
+                    },
+                    onPause: () => {
+                        playing.value = false;
+                    },
+                    onPlay: () => {
+                        playing.value = true;
+                    },
+                    onTimeupdate: (event) => {
+                        currentTime.value = event.currentTarget.currentTime;
+                    },
+                    playsinline: true,
+                    poster: state.poster,
+                    preload: state.preload,
+                }, state.sources.map((source) => vue.h("source", {
+                    key: source.src,
+                    src: source.src,
+                    type: source.type,
+                }))),
+                state.controls
+                    ? vue.h("div", { class: "cc-video-player__controls" }, [
+                        vue.h("button", {
+                            "aria-label": playing.value ? "Pause video" : "Play video",
+                            class: "cc-video-player__play",
+                            "data-playing": playing.value,
+                            type: "button",
+                            onClick: toggle,
+                        }, [
+                            vue.h("span", {
+                                "aria-hidden": "true",
+                                class: "cc-video-player__play-icon",
+                            }),
+                        ]),
+                        vue.h(ClassProgressBar, {
+                            className: "cc-progress cc-video-player__progress",
+                            max: duration.value || 0,
+                            min: 0,
+                            step: 0.1,
+                            value: currentTime.value,
+                            onChange: (next) => {
+                                if (!videoRef.value || !Number.isFinite(next))
+                                    return;
+                                videoRef.value.currentTime = next;
+                                currentTime.value = next;
+                            },
+                        }),
+                        vue.h("span", { class: "cc-video-player__time" }, `${Math.floor(currentTime.value)} / ${Math.floor(duration.value || 0)}s`),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+function resolveVideoDetailContainer(container) {
+    return typeof container === "function" ? container() : (container ?? null);
+}
+function videoDetailContainerRect(container) {
+    const element = resolveVideoDetailContainer(container);
+    if (!element)
+        return undefined;
+    const rect = element.getBoundingClientRect();
+    return {
+        borderRadius: typeof window === "undefined"
+            ? undefined
+            : window.getComputedStyle(element).borderRadius,
+        height: Math.max(1, rect.height),
+        left: rect.left,
+        top: rect.top,
+        width: Math.max(1, rect.width),
+    };
+}
+function videoDetailTargetRect(sourceRect, container) {
+    const containerRect = videoDetailContainerRect(container);
+    if (containerRect) {
+        return {
+            height: containerRect.height,
+            left: 0,
+            top: 0,
+            width: containerRect.width,
+        };
+    }
+    const width = typeof window === "undefined" ? 390 : window.innerWidth;
+    const viewportHeight = typeof window === "undefined"
+        ? Math.round((width * 16) / 9)
+        : window.innerHeight;
+    const areaTop = 0;
+    const areaHeight = viewportHeight;
+    const ratio = sourceRect ? sourceRect.height / sourceRect.width : 9 / 16;
+    const height = Math.max(1, Math.min(areaHeight, Math.round(width * ratio)));
+    return {
+        height,
+        left: 0,
+        top: areaTop + Math.round((areaHeight - height) / 2),
+        width,
+    };
+}
+function videoDetailOverlayStyle(backdropColor, container) {
+    const rect = videoDetailContainerRect(container);
+    return {
+        "--cc-video-detail-backdrop-color": backdropColor,
+        ...(rect
+            ? {
+                borderRadius: rect.borderRadius ?? 0,
+                height: `${rect.height}px`,
+                left: "0px",
+                overflow: "hidden",
+                position: "absolute",
+                top: "0px",
+                width: `${rect.width}px`,
+            }
+            : {}),
+    };
+}
+function videoDetailStyle(state, full, container) {
+    const target = videoDetailTargetRect(state.sourceRect, container);
+    const containerRect = videoDetailContainerRect(container);
+    const sourceRect = state.sourceRect && containerRect
+        ? {
+            ...state.sourceRect,
+            left: state.sourceRect.left - containerRect.left,
+            top: state.sourceRect.top - containerRect.top,
+        }
+        : state.sourceRect;
+    const rect = full ? target : (sourceRect ?? target);
+    return {
+        "--cc-video-detail-duration": `${state.animationDuration}ms`,
+        "--cc-video-detail-backdrop-color": state.backdropColor,
+        height: `${rect.height}px`,
+        left: `${rect.left}px`,
+        top: `${rect.top}px`,
+        width: `${rect.width}px`,
+    };
+}
+const ClassVideoDetailTransition = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassVideoDetailTransition",
+    inheritAttrs: false,
+    props: {
+        animationDuration: { type: Number, default: 420 },
+        backdropColor: { type: String, default: "rgba(0, 0, 0, 0.96)" },
+        className: { type: String, default: "cc-video-detail-transition" },
+        closeIcon: {
+            type: null,
+            default: () => classIcon("x"),
+        },
+        columns: { type: Number, default: 2 },
+        container: {
+            type: [Function, Object],
+            default: undefined,
+        },
+        detailClass: {
+            type: String,
+            default: "cc-video-detail-transition__detail",
+        },
+        gridClass: { type: String, default: "cc-video-detail-transition__grid" },
+        itemClass: { type: String, default: "cc-video-detail-transition__item" },
+        items: { type: Array, required: true },
+    },
+    emits: ["close", "open"],
+    setup(props, { attrs, emit }) {
+        const controller = new core.VideoDetailTransitionController({
+            animationDuration: props.animationDuration,
+            backdropColor: props.backdropColor,
+            items: props.items,
+        });
+        const state = vue.ref(controller.getState());
+        const full = vue.ref(false);
+        const timers = [];
+        const clearTimers = () => {
+            timers.splice(0).forEach((timer) => window.clearTimeout(timer));
+        };
+        const schedule = (callback, delay) => {
+            timers.push(window.setTimeout(callback, delay));
+        };
+        vue.watch(() => [props.animationDuration, props.backdropColor, props.items], () => {
+            state.value = controller.updateOptions({
+                animationDuration: props.animationDuration,
+                backdropColor: props.backdropColor,
+                items: props.items,
+            });
+        }, { deep: true });
+        vue.onBeforeUnmount(clearTimers);
+        const open = (item, element) => {
+            const rect = element.getBoundingClientRect();
+            clearTimers();
+            full.value = false;
+            state.value = controller.open(item.id, {
+                height: rect.height,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+            });
+            emit("open", item);
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    full.value = true;
+                });
+            });
+            schedule(() => {
+                state.value = controller.entered();
+            }, props.animationDuration);
+        };
+        const close = () => {
+            if (!state.value.activeItem)
+                return;
+            clearTimers();
+            state.value = controller.close();
+            full.value = false;
+            schedule(() => {
+                state.value = controller.closeNow();
+                emit("close");
+            }, props.animationDuration);
+        };
+        return () => vue.h("div", {
+            ...attrs,
+            class: props.className,
+            style: [
+                attrs.style,
+                { "--cc-video-detail-columns": props.columns },
+            ],
+        }, [
+            vue.h("div", { class: props.gridClass }, state.value.items.map((item) => vue.h("button", {
+                class: props.itemClass,
+                key: item.id,
+                type: "button",
+                onClick: (event) => open(item, event.currentTarget),
+            }, [
+                vue.h("img", { alt: "", src: item.poster }),
+                vue.h("span", { class: "cc-video-detail-transition__meta" }, [
+                    vue.h("strong", null, item.title),
+                    item.duration ? vue.h("small", null, item.duration) : null,
+                ]),
+            ]))),
+            state.value.activeItem
+                ? vue.h("div", {
+                    class: "cc-video-detail-transition__overlay",
+                    "data-open": full.value || state.value.phase === "open",
+                    style: videoDetailOverlayStyle(state.value.backdropColor, props.container),
+                }, [
+                    vue.h("button", {
+                        "aria-label": "关闭视频详情",
+                        class: "cc-video-detail-transition__backdrop",
+                        type: "button",
+                        onClick: close,
+                    }),
+                    vue.h("article", {
+                        class: props.detailClass,
+                        "data-full": full.value || state.value.phase === "open",
+                        "data-phase": state.value.phase,
+                        style: videoDetailStyle(state.value, full.value || state.value.phase === "open", props.container),
+                    }, [
+                        vue.h(ClassVideoPlayer, {
+                            autoplay: true,
+                            controls: true,
+                            muted: true,
+                            poster: state.value.activeItem.poster,
+                            sources: state.value.activeItem.sources,
+                            className: "cc-video-detail-transition__player",
+                            videoClass: "cc-video-detail-transition__video",
+                        }),
+                        vue.h("div", { class: "cc-video-detail-transition__content" }, [
+                            vue.h("button", {
+                                "aria-label": "关闭视频详情",
+                                type: "button",
+                                onClick: close,
+                            }, props.closeIcon),
+                            vue.h("strong", null, state.value.activeItem.title),
+                            state.value.activeItem.description
+                                ? vue.h("p", null, state.value.activeItem.description)
+                                : null,
+                        ]),
+                    ]),
+                ])
+                : null,
+        ]);
+    },
+});
+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.ClassVideoDetailTransition = ClassVideoDetailTransition;
+//# sourceMappingURL=video-detail-transition.cjs.map