@class-kit/vue 0.1.0

package/dist/components/field.js

@@ -0,0 +1,263 @@
+import { defineComponent, ref, watch, h, inject, shallowRef, onMounted, onBeforeUnmount } from 'vue';
+import { getClassComponentsLocale, configureClassComponents } from '@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 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 optionalBooleanProp() {
+    return { type: Boolean, default: undefined };
+}
+function useFormInteractivity() {
+    return inject(formInteractivitySymbol, {
+        disabled: ref(false),
+        readOnly: ref(false),
+    });
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled.value;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly.value),
+    };
+}
+function createEmptyFormState() {
+    return {
+        dirty: false,
+        errors: {},
+        fields: {},
+        submitCount: 0,
+        submitted: false,
+        submitting: false,
+        touched: false,
+        valid: true,
+        validating: false,
+        values: {},
+    };
+}
+function useOptionalField(name, options = {}) {
+    const form = inject(formSymbol, null);
+    const state = shallowRef(form?.getState() ?? createEmptyFormState());
+    const value = ref((name ? form?.getValue(name) : undefined) ?? options.initialValue ?? "");
+    let unsubscribeForm;
+    let unsubscribeField;
+    onMounted(() => {
+        if (!form || !name)
+            return;
+        unsubscribeForm = form.subscribe((nextState) => {
+            state.value = nextState;
+        });
+        unsubscribeField = form.registerField(name, options);
+        value.value = (form.getValue(name) ?? "");
+    });
+    onBeforeUnmount(() => {
+        unsubscribeField?.();
+        unsubscribeForm?.();
+    });
+    watch(() => (name ? state.value.fields[name]?.value : undefined), (nextValue) => {
+        if (!form || !name)
+            return;
+        value.value = (nextValue ?? "");
+    });
+    return {
+        value,
+        state,
+        setValue: async (nextValue) => {
+            if (form && name)
+                await form.setValue(name, nextValue);
+            else
+                value.value = nextValue;
+        },
+        blur: async () => {
+            if (form && name)
+                await form.blur(name);
+        },
+    };
+}
+function renderError(errors, errorId) {
+    return errors.length > 0
+        ? h("span", { class: "cc-field__error", id: errorId, role: "alert" }, errors[0])
+        : null;
+}
+const ClassInput = /*#__PURE__*/ defineComponent({
+    name: "ClassInput",
+    inheritAttrs: false,
+    props: {
+        name: String,
+        label: String,
+        type: {
+            type: String,
+            default: "text",
+        },
+        placeholder: String,
+        clearable: {
+            type: Boolean,
+            default: true,
+        },
+        clearIcon: {
+            type: null,
+            default: () => classIcon("x"),
+        },
+        clearLabel: {
+            type: String,
+            default: () => getClassComponentsLocale().inputClearLabel,
+        },
+        disabled: optionalBooleanProp(),
+        readOnly: optionalBooleanProp(),
+        readonly: optionalBooleanProp(),
+        fieldClass: {
+            type: String,
+            default: "cc-field",
+        },
+        labelClass: {
+            type: String,
+            default: "cc-field__label",
+        },
+        controlClass: {
+            type: String,
+            default: "cc-field__control",
+        },
+        rules: Array,
+    },
+    setup(props, { attrs }) {
+        const formInteractivity = useFormInteractivity();
+        const field = useOptionalField(props.name, {
+            rules: props.rules,
+        });
+        return () => {
+            const fieldState = props.name
+                ? field.state.value.fields[props.name]
+                : undefined;
+            const errors = fieldState?.errors ?? [];
+            const invalid = errors.length > 0;
+            const errorId = `${props.name}-error`;
+            const interactivity = resolveFieldInteractivity(formInteractivity, props.disabled, props.readOnly ?? props.readonly);
+            const canClear = props.clearable &&
+                field.value.value !== "" &&
+                !interactivity.disabled &&
+                !interactivity.readOnly;
+            return h("div", {
+                class: props.fieldClass,
+                "data-disabled": interactivity.disabled,
+                "data-readonly": interactivity.readOnly,
+            }, [
+                props.label
+                    ? h("span", { class: props.labelClass, id: `${props.name}-label` }, props.label)
+                    : null,
+                h("span", { class: "cc-field__control-wrap" }, [
+                    h("input", {
+                        ...attrs,
+                        "aria-describedby": invalid ? errorId : undefined,
+                        "aria-invalid": invalid,
+                        class: [
+                            props.controlClass,
+                            canClear ? "cc-field__control--clearable" : "",
+                        ],
+                        "data-readonly": interactivity.readOnly,
+                        disabled: interactivity.disabled,
+                        name: props.name,
+                        placeholder: props.placeholder,
+                        readonly: interactivity.readOnly,
+                        type: props.type,
+                        value: field.value.value,
+                        onBlur: () => void field.blur(),
+                        onInput: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            const target = event.target;
+                            void field.setValue(target.value);
+                        },
+                    }),
+                    canClear
+                        ? h("button", {
+                            "aria-label": props.clearLabel,
+                            class: "cc-field__clear",
+                            type: "button",
+                            onClick: () => void field.setValue(""),
+                        }, props.clearIcon)
+                        : null,
+                ]),
+                renderError(errors, errorId),
+            ]);
+        };
+    },
+});
+const ClassField = ClassInput;
+
+export { ClassField };
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

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

package/dist/components/file-preview.cjs

@@ -0,0 +1,392 @@
+'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?.()),
+        ]);
+    },
+});
+async function importOptionalLibrary(name) {
+    try {
+        return await new Function("name", "return import(name)")(name);
+    }
+    catch {
+        return null;
+    }
+}
+function getGlobalLibrary(name) {
+    const record = globalThis;
+    return record[name] ?? null;
+}
+async function renderExcelFileWithExternalLibrary(file) {
+    const xlsx = getGlobalLibrary("XLSX") ?? (await importOptionalLibrary("xlsx"));
+    if (!xlsx)
+        throw new Error("Excel local preview requires xlsx. Install it or load it from CDN.");
+    const workbook = xlsx.read(await file.arrayBuffer(), { type: "array" });
+    const sheetName = workbook.SheetNames?.[0];
+    const sheet = sheetName ? workbook.Sheets[sheetName] : undefined;
+    if (!sheet)
+        return '<div class="cc-file-preview__local-empty">Empty workbook</div>';
+    return xlsx.utils.sheet_to_html(sheet, { editable: false });
+}
+async function renderWordFileWithExternalLibrary(file) {
+    const mammoth = getGlobalLibrary("mammoth") ?? (await importOptionalLibrary("mammoth"));
+    if (!mammoth)
+        throw new Error("Word local preview requires mammoth. Install it or load it from CDN.");
+    const result = await mammoth.convertToHtml({
+        arrayBuffer: await file.arrayBuffer(),
+    });
+    return (result.value ||
+        '<div class="cc-file-preview__local-empty">Empty document</div>');
+}
+const ClassFilePreview = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassFilePreview",
+    inheritAttrs: false,
+    props: {
+        src: { type: String, default: "" },
+        currentPage: Number,
+        file: Object,
+        fileName: String,
+        height: { type: [Number, String], default: 520 },
+        localUnsupportedText: String,
+        pageCount: Number,
+        renderLocalExcel: Function,
+        renderLocalPpt: Function,
+        renderLocalWord: Function,
+        title: String,
+        type: String,
+        viewerBaseUrl: String,
+        className: { type: String, default: "cc-file-preview" },
+    },
+    emits: ["pageChange", "update:currentPage"],
+    setup(props, { attrs, emit }) {
+        const innerPage = vue.ref(props.currentPage ?? 1);
+        const objectUrl = vue.ref("");
+        const localContent = vue.ref("");
+        const localError = vue.ref("");
+        const previewLoading = vue.ref(true);
+        let previewLoadingTimer;
+        const showPreviewLoading = () => {
+            previewLoading.value = true;
+            if (previewLoadingTimer)
+                clearTimeout(previewLoadingTimer);
+            previewLoadingTimer = setTimeout(() => {
+                previewLoading.value = false;
+            }, 900);
+        };
+        const hidePreviewLoading = (delay = 140) => {
+            if (previewLoadingTimer)
+                clearTimeout(previewLoadingTimer);
+            previewLoadingTimer = setTimeout(() => {
+                previewLoading.value = false;
+            }, delay);
+        };
+        vue.watch(() => props.file, (file, _oldFile, onCleanup) => {
+            if (objectUrl.value) {
+                URL.revokeObjectURL(objectUrl.value);
+                objectUrl.value = "";
+            }
+            if (!file)
+                return;
+            const nextUrl = URL.createObjectURL(file);
+            objectUrl.value = nextUrl;
+            onCleanup(() => URL.revokeObjectURL(nextUrl));
+        }, { immediate: true });
+        vue.watch(() => props.currentPage, (value) => {
+            if (typeof value === "number")
+                innerPage.value = value;
+            showPreviewLoading();
+        });
+        vue.watch(() => [
+            props.src,
+            props.fileName,
+            props.pageCount,
+            props.type,
+            props.viewerBaseUrl,
+            props.file,
+        ], showPreviewLoading);
+        vue.watch(() => [
+            props.file,
+            props.type,
+            props.fileName,
+            props.renderLocalExcel,
+            props.renderLocalPpt,
+            props.renderLocalWord,
+        ], async () => {
+            const file = props.file;
+            if (!file) {
+                localContent.value = "";
+                localError.value = "";
+                return;
+            }
+            const state = new core.FilePreviewController({
+                currentPage: props.currentPage ?? innerPage.value,
+                fileName: props.fileName ?? file.name,
+                pageCount: props.pageCount,
+                src: objectUrl.value || props.src || "",
+                type: props.type,
+                viewerBaseUrl: props.viewerBaseUrl,
+            }).getState();
+            if (state.type !== "excel" &&
+                state.type !== "ppt" &&
+                state.type !== "word") {
+                localContent.value = "";
+                localError.value = "";
+                return;
+            }
+            showPreviewLoading();
+            localContent.value = "";
+            localError.value = "";
+            try {
+                const renderer = state.type === "excel"
+                    ? (props.renderLocalExcel ?? renderExcelFileWithExternalLibrary)
+                    : state.type === "word"
+                        ? (props.renderLocalWord ?? renderWordFileWithExternalLibrary)
+                        : props.renderLocalPpt;
+                if (!renderer)
+                    throw new Error("PPT/PPTX 本地预览需要传入 renderLocalPpt，或先转换成 PDF 文件后按 PDF 预览。");
+                localContent.value = await renderer(file, state);
+                hidePreviewLoading();
+            }
+            catch (error) {
+                localError.value =
+                    error instanceof Error ? error.message : String(error);
+                previewLoading.value = false;
+            }
+        }, { immediate: true });
+        vue.onMounted(showPreviewLoading);
+        vue.onBeforeUnmount(() => {
+            if (previewLoadingTimer)
+                clearTimeout(previewLoadingTimer);
+            if (objectUrl.value)
+                URL.revokeObjectURL(objectUrl.value);
+        });
+        return () => {
+            const activePage = props.currentPage ?? innerPage.value;
+            const controller = new core.FilePreviewController({
+                currentPage: activePage,
+                fileName: props.fileName ?? props.file?.name,
+                pageCount: props.pageCount,
+                src: objectUrl.value || props.src || "",
+                type: props.type,
+                viewerBaseUrl: props.viewerBaseUrl,
+            });
+            const state = controller.getState();
+            const isLocalOfficeFile = Boolean(props.file &&
+                (state.type === "excel" ||
+                    state.type === "ppt" ||
+                    state.type === "word"));
+            const commitPage = (page) => {
+                showPreviewLoading();
+                const next = controller.goTo(page);
+                if (props.currentPage === undefined)
+                    innerPage.value = next.currentPage;
+                emit("update:currentPage", next.currentPage);
+                emit("pageChange", next.currentPage);
+            };
+            const canPage = state.mode === "pdf" && Boolean(state.pageCount && state.pageCount > 1);
+            const canPrevious = canPage && state.currentPage > 1;
+            const canNext = canPage &&
+                state.pageCount !== undefined &&
+                state.currentPage < state.pageCount;
+            const inheritedStyle = attrs.style;
+            return vue.h("div", {
+                ...attrs,
+                class: props.className,
+                "data-mode": state.mode,
+                "data-type": state.type,
+                style: [
+                    inheritedStyle,
+                    {
+                        "--cc-file-preview-height": typeof props.height === "number"
+                            ? `${props.height}px`
+                            : props.height,
+                    },
+                ],
+            }, [
+                vue.h("div", { class: "cc-file-preview__toolbar" }, [
+                    vue.h("div", { class: "cc-file-preview__meta" }, [
+                        vue.h("span", { class: "cc-file-preview__badge" }, state.type.toUpperCase()),
+                        vue.h("strong", null, props.title ?? state.title),
+                        vue.h("small", null, state.mode === "office"
+                            ? "Office viewer"
+                            : state.mode === "pdf"
+                                ? "PDF preview"
+                                : "Unsupported file"),
+                    ]),
+                    vue.h("div", { class: "cc-file-preview__actions" }, [
+                        canPage
+                            ? vue.h("span", { class: "cc-file-preview__pager" }, [
+                                vue.h("button", {
+                                    disabled: !canPrevious,
+                                    type: "button",
+                                    onClick: () => commitPage(state.currentPage - 1),
+                                }, "上一页"),
+                                vue.h("span", null, `${state.currentPage} / ${state.pageCount}`),
+                                vue.h("button", {
+                                    disabled: !canNext,
+                                    type: "button",
+                                    onClick: () => commitPage(state.currentPage + 1),
+                                }, "下一页"),
+                            ])
+                            : null,
+                        state.src
+                            ? vue.h("a", { href: state.src, rel: "noreferrer", target: "_blank" }, "打开源文件")
+                            : null,
+                    ]),
+                ]),
+                vue.h("div", {
+                    class: "cc-file-preview__body",
+                    "data-loading": state.mode !== "unsupported" && previewLoading.value,
+                }, [
+                    state.mode === "unsupported" || !state.src
+                        ? vue.h("div", { class: "cc-file-preview__empty" }, [
+                            vue.h("strong", null, "暂不支持预览该文件"),
+                            vue.h("span", null, "请检查文件类型，或通过“打开源文件”在新窗口查看。"),
+                        ])
+                        : isLocalOfficeFile
+                            ? vue.h("div", { class: "cc-file-preview__local" }, [
+                                localError.value
+                                    ? vue.h("div", { class: "cc-file-preview__empty" }, [
+                                        vue.h("strong", null, "本地预览依赖未就绪"),
+                                        vue.h("span", null, props.localUnsupportedText ?? localError.value),
+                                    ])
+                                    : vue.h("div", {
+                                        class: "cc-file-preview__local-html",
+                                        innerHTML: localContent.value,
+                                    }),
+                                vue.h("div", {
+                                    "aria-hidden": "true",
+                                    class: "cc-file-preview__skeleton",
+                                }, [
+                                    vue.h(ClassLoading, {
+                                        className: "cc-loading cc-file-preview__loading",
+                                        text: core.getClassComponentsLocale().loadingText,
+                                    }),
+                                ]),
+                            ])
+                            : [
+                                vue.h("iframe", {
+                                    class: "cc-file-preview__frame",
+                                    key: state.previewUrl,
+                                    src: state.previewUrl,
+                                    title: props.title ?? state.title,
+                                    onLoad: () => hidePreviewLoading(),
+                                }),
+                                vue.h("div", {
+                                    "aria-hidden": "true",
+                                    class: "cc-file-preview__skeleton",
+                                }, [
+                                    vue.h(ClassLoading, {
+                                        className: "cc-loading cc-file-preview__loading",
+                                        text: core.getClassComponentsLocale().loadingText,
+                                    }),
+                                ]),
+                            ],
+                ]),
+                state.mode === "office"
+                    ? vue.h("p", { class: "cc-file-preview__hint" }, props.file
+                        ? "本地 Word/Excel 预览依赖用户项目安装或外链加载 mammoth/xlsx；PPT/PPTX 建议转换成 PDF 或传入自定义 renderLocalPpt。"
+                        : "Word、Excel、PPT 预览依赖在线 viewer，文件地址需要可被 viewer 服务访问；组件不内置第三方解析库。")
+                    : null,
+            ]);
+        };
+    },
+});
+function renderDefaultLoadingIndicator() {
+    return vue.h("svg", {
+        class: "cc-loading__bolt",
+        focusable: "false",
+        viewBox: "0 0 96 96",
+    }, [
+        vue.h("ellipse", {
+            class: "cc-loading__bolt-shadow",
+            cx: "51",
+            cy: "74",
+            rx: "28",
+            ry: "8",
+        }),
+        vue.h("path", {
+            class: "cc-loading__bolt-side",
+            d: "M54 8 26 48h20L34 82l39-46H51L65 8Z",
+        }),
+        vue.h("path", {
+            class: "cc-loading__bolt-face",
+            d: "M48 6 20 46h20L28 80l39-46H45L59 6Z",
+        }),
+        vue.h("path", {
+            class: "cc-loading__bolt-highlight",
+            d: "M48 14 31 39h17L39 62l18-24H43l10-24Z",
+        }),
+    ]);
+}
+const ClassLoading = /*#__PURE__*/ vue.defineComponent({
+    name: "ClassLoading",
+    props: {
+        className: String,
+        text: {
+            type: String,
+            default: () => core.getClassComponentsLocale().loadingText,
+        },
+    },
+    setup(props, { attrs, slots }) {
+        return () => vue.h("div", {
+            ...attrs,
+            "aria-live": "polite",
+            class: ["cc-loading", props.className],
+            role: "status",
+        }, [
+            vue.h("span", { "aria-hidden": "true", class: "cc-loading__indicator" }, slots.indicator?.() ?? renderDefaultLoadingIndicator()),
+            props.text
+                ? vue.h("span", { class: "cc-loading__text" }, props.text)
+                : null,
+        ]);
+    },
+});
+
+exports.ClassFilePreview = ClassFilePreview;
+//# sourceMappingURL=file-preview.cjs.map