@class-kit/vue 0.1.0

package/dist/components/lazy-image.cjs

@@ -0,0 +1,203 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@class-kit/core');
+
+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 toCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+const ClassLazyImage = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassLazyImage",
+    inheritAttrs: false,
+    props: {
+        src: { type: String, required: true },
+        alt: { type: String, default: "" },
+        eager: { type: Boolean, default: false },
+        fallbackSrc: String,
+        placeholderSrc: String,
+        rootMargin: { type: String, default: "200px" },
+        threshold: { type: Number, default: 0 },
+        width: [Number, String],
+        height: [Number, String],
+        aspectRatio: [Number, String],
+        objectFit: { type: String, default: "cover" },
+        loadingVariant: {
+            type: String,
+            default: "skeleton",
+        },
+        className: { type: String, default: "cc-lazy-image" },
+        imageClass: { type: String, default: "cc-lazy-image__img" },
+        placeholderClass: { type: String, default: "cc-lazy-image__placeholder" },
+        skeletonClass: { type: String, default: "cc-lazy-image__skeleton" },
+        errorClass: { type: String, default: "cc-lazy-image__error" },
+    },
+    emits: ["load", "error"],
+    setup(props, { attrs, emit, slots }) {
+        const rootRef = vue.ref(null);
+        const controller = new core.LazyImageController({
+            eager: props.eager,
+            fallbackSrc: props.fallbackSrc,
+            placeholderSrc: props.placeholderSrc,
+            rootMargin: props.rootMargin,
+            src: props.src,
+            threshold: props.threshold,
+        });
+        const state = vue.shallowRef(controller.getState());
+        let observer;
+        const disconnect = () => {
+            observer?.disconnect();
+            observer = undefined;
+        };
+        const startLoading = () => {
+            state.value = controller.startLoading();
+        };
+        const setupObserver = () => {
+            disconnect();
+            if (state.value.status !== "idle")
+                return;
+            if (props.eager || typeof IntersectionObserver === "undefined") {
+                startLoading();
+                return;
+            }
+            if (!rootRef.value)
+                return;
+            observer = new IntersectionObserver((entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    startLoading();
+                    disconnect();
+                }
+            }, {
+                rootMargin: state.value.rootMargin,
+                threshold: state.value.threshold,
+            });
+            observer.observe(rootRef.value);
+        };
+        vue.watch(() => [
+            props.src,
+            props.eager,
+            props.fallbackSrc,
+            props.placeholderSrc,
+            props.rootMargin,
+            props.threshold,
+        ], () => {
+            state.value = controller.updateOptions({
+                eager: props.eager,
+                fallbackSrc: props.fallbackSrc,
+                placeholderSrc: props.placeholderSrc,
+                rootMargin: props.rootMargin,
+                src: props.src,
+                threshold: props.threshold,
+            });
+            setupObserver();
+        });
+        vue.onMounted(setupObserver);
+        vue.onBeforeUnmount(disconnect);
+        return () => {
+            const current = state.value;
+            const slotState = { status: current.status };
+            return vue.h("div", {
+                ...attrs,
+                class: props.className,
+                "data-loading-variant": props.loadingVariant,
+                "data-sized": Boolean(props.height || props.aspectRatio),
+                "data-status": current.status,
+                ref: rootRef,
+                style: {
+                    aspectRatio: props.aspectRatio,
+                    height: toCssSize(props.height),
+                    width: toCssSize(props.width),
+                },
+            }, [
+                current.currentSrc
+                    ? vue.h("img", {
+                        alt: props.alt,
+                        class: props.imageClass,
+                        decoding: "async",
+                        loading: props.eager ? "eager" : "lazy",
+                        src: current.currentSrc,
+                        style: { objectFit: props.objectFit },
+                        onError: (event) => {
+                            emit("error", event);
+                            state.value = controller.markError();
+                        },
+                        onLoad: (event) => {
+                            emit("load", event);
+                            state.value = controller.markLoaded();
+                        },
+                    })
+                    : null,
+                (current.status === "idle" || current.status === "loading") &&
+                    (props.loadingVariant !== "none" || Boolean(slots.placeholder))
+                    ? vue.h("span", { class: props.placeholderClass }, [
+                        slots.placeholder?.(slotState) ??
+                            (props.loadingVariant === "image" && current.placeholderSrc
+                                ? vue.h("img", {
+                                    alt: "",
+                                    "aria-hidden": "true",
+                                    src: current.placeholderSrc,
+                                })
+                                : props.loadingVariant === "skeleton"
+                                    ? vue.h("span", {
+                                        "aria-hidden": "true",
+                                        class: props.skeletonClass,
+                                    })
+                                    : null),
+                    ])
+                    : null,
+                current.status === "error"
+                    ? vue.h("span", { class: props.errorClass }, slots.error?.(slotState) ?? "Image unavailable")
+                    : null,
+            ]);
+        };
+    },
+});
+
+exports.ClassLazyImage = ClassLazyImage;
+//# sourceMappingURL=lazy-image.cjs.map

package/dist/components/lazy-image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-image.cjs","sources":["../../src/index.ts"],"names":["defineComponent","ref","configureClassComponents","watch","h","LazyImageController","shallowRef","onMounted","onBeforeUnmount"],"mappings":"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"}

package/dist/components/lazy-image.d.ts

@@ -0,0 +1,3 @@
+export { ClassLazyImage } from "../index";
+export type { LazyImageLoadingVariant } from "../index";
+//# sourceMappingURL=lazy-image.d.ts.map

package/dist/components/lazy-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-image.d.ts","sourceRoot":"","sources":["../../src/components/lazy-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/lazy-image.js

@@ -0,0 +1,201 @@
+import { defineComponent, ref, watch, h, shallowRef, onMounted, onBeforeUnmount } from 'vue';
+import { LazyImageController, configureClassComponents } from '@class-kit/core';
+
+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 toCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+const ClassLazyImage = /*#__PURE__*/ defineComponent({
+    name: "ClassLazyImage",
+    inheritAttrs: false,
+    props: {
+        src: { type: String, required: true },
+        alt: { type: String, default: "" },
+        eager: { type: Boolean, default: false },
+        fallbackSrc: String,
+        placeholderSrc: String,
+        rootMargin: { type: String, default: "200px" },
+        threshold: { type: Number, default: 0 },
+        width: [Number, String],
+        height: [Number, String],
+        aspectRatio: [Number, String],
+        objectFit: { type: String, default: "cover" },
+        loadingVariant: {
+            type: String,
+            default: "skeleton",
+        },
+        className: { type: String, default: "cc-lazy-image" },
+        imageClass: { type: String, default: "cc-lazy-image__img" },
+        placeholderClass: { type: String, default: "cc-lazy-image__placeholder" },
+        skeletonClass: { type: String, default: "cc-lazy-image__skeleton" },
+        errorClass: { type: String, default: "cc-lazy-image__error" },
+    },
+    emits: ["load", "error"],
+    setup(props, { attrs, emit, slots }) {
+        const rootRef = ref(null);
+        const controller = new LazyImageController({
+            eager: props.eager,
+            fallbackSrc: props.fallbackSrc,
+            placeholderSrc: props.placeholderSrc,
+            rootMargin: props.rootMargin,
+            src: props.src,
+            threshold: props.threshold,
+        });
+        const state = shallowRef(controller.getState());
+        let observer;
+        const disconnect = () => {
+            observer?.disconnect();
+            observer = undefined;
+        };
+        const startLoading = () => {
+            state.value = controller.startLoading();
+        };
+        const setupObserver = () => {
+            disconnect();
+            if (state.value.status !== "idle")
+                return;
+            if (props.eager || typeof IntersectionObserver === "undefined") {
+                startLoading();
+                return;
+            }
+            if (!rootRef.value)
+                return;
+            observer = new IntersectionObserver((entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    startLoading();
+                    disconnect();
+                }
+            }, {
+                rootMargin: state.value.rootMargin,
+                threshold: state.value.threshold,
+            });
+            observer.observe(rootRef.value);
+        };
+        watch(() => [
+            props.src,
+            props.eager,
+            props.fallbackSrc,
+            props.placeholderSrc,
+            props.rootMargin,
+            props.threshold,
+        ], () => {
+            state.value = controller.updateOptions({
+                eager: props.eager,
+                fallbackSrc: props.fallbackSrc,
+                placeholderSrc: props.placeholderSrc,
+                rootMargin: props.rootMargin,
+                src: props.src,
+                threshold: props.threshold,
+            });
+            setupObserver();
+        });
+        onMounted(setupObserver);
+        onBeforeUnmount(disconnect);
+        return () => {
+            const current = state.value;
+            const slotState = { status: current.status };
+            return h("div", {
+                ...attrs,
+                class: props.className,
+                "data-loading-variant": props.loadingVariant,
+                "data-sized": Boolean(props.height || props.aspectRatio),
+                "data-status": current.status,
+                ref: rootRef,
+                style: {
+                    aspectRatio: props.aspectRatio,
+                    height: toCssSize(props.height),
+                    width: toCssSize(props.width),
+                },
+            }, [
+                current.currentSrc
+                    ? h("img", {
+                        alt: props.alt,
+                        class: props.imageClass,
+                        decoding: "async",
+                        loading: props.eager ? "eager" : "lazy",
+                        src: current.currentSrc,
+                        style: { objectFit: props.objectFit },
+                        onError: (event) => {
+                            emit("error", event);
+                            state.value = controller.markError();
+                        },
+                        onLoad: (event) => {
+                            emit("load", event);
+                            state.value = controller.markLoaded();
+                        },
+                    })
+                    : null,
+                (current.status === "idle" || current.status === "loading") &&
+                    (props.loadingVariant !== "none" || Boolean(slots.placeholder))
+                    ? h("span", { class: props.placeholderClass }, [
+                        slots.placeholder?.(slotState) ??
+                            (props.loadingVariant === "image" && current.placeholderSrc
+                                ? h("img", {
+                                    alt: "",
+                                    "aria-hidden": "true",
+                                    src: current.placeholderSrc,
+                                })
+                                : props.loadingVariant === "skeleton"
+                                    ? h("span", {
+                                        "aria-hidden": "true",
+                                        class: props.skeletonClass,
+                                    })
+                                    : null),
+                    ])
+                    : null,
+                current.status === "error"
+                    ? h("span", { class: props.errorClass }, slots.error?.(slotState) ?? "Image unavailable")
+                    : null,
+            ]);
+        };
+    },
+});
+
+export { ClassLazyImage };
+//# sourceMappingURL=lazy-image.js.map

package/dist/components/lazy-image.js.map

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