@canlooks/can-ui 0.0.1

package/dist/esm/components/upload/upload.style.js

@@ -0,0 +1,165 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('upload', [
+    'input',
+    'files',
+    'file',
+    'icon',
+    'info',
+    'name',
+    'progress',
+    'control',
+    'images',
+    'imageWrap',
+    'image',
+    'sortable'
+]);
+export const style = defineCss(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
+    const maskBg = Color(background.card).alpha(.9).string();
+    return css `
+        position: relative;
+
+        .${classes.input} {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &[data-file-type=file] {
+            .${classes.files} {
+                display: flex;
+                flex-direction: column;
+                margin-top: ${spacing[2]}px;
+
+                .${classes.file} {
+                    display: flex;
+                    align-items: center;
+                    gap: ${spacing[3]}px;
+                    padding-right: ${spacing[2]}px;
+                    border-radius: ${borderRadius}px;
+
+                    .${classes.icon} {
+                        color: ${text.secondary};
+                    }
+
+                    .${classes.info} {
+                        min-width: 0;
+                        flex: 1;
+                        position: relative;
+                        padding: ${spacing[2]}px 0;
+
+                        .${classes.name} {
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                        }
+
+                        .${classes.progress} {
+                            position: absolute;
+                            inset: auto 0 0;
+                        }
+                    }
+
+                    .${classes.control} {
+                        display: none;
+                        gap: ${spacing[4]}px;
+                    }
+
+                    &:hover {
+                        background-color: ${gray(mode === 'light' ? .03 : .18)};
+
+                        &:not([data-status=uploading]) {
+                            .${classes.control} {
+                                display: flex;
+                            }
+                        }
+                    }
+
+                    &[data-status=error] {
+                        .${classes.name} {
+                            color: ${colors.error};
+                        }
+
+                        .${classes.control} {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+        }
+
+        &[data-file-type=image] {
+            .${classes.images} {
+                display: flex;
+                gap: ${spacing[3]}px;
+                flex-wrap: wrap;
+            }
+
+            .${classes.imageWrap} {
+                width: 96px;
+                height: 96px;
+                border: 1px dashed ${divider};
+                padding: 4px;
+
+                &[data-clickable=true] {
+                    cursor: pointer;
+                    transition: border-color .2s ${easing.easeOut}, color .2s ${easing.easeOut};
+
+                    &:hover {
+                        border-color: ${colors.primary};
+                        color: ${colors.primary};
+                    }
+                }
+
+                .${classes.image} {
+                    width: 100%;
+                    height: 100%;
+                    background-color: ${gray(.05)};
+                    border-radius: inherit;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .${classes.progress} {
+                        background-color: ${maskBg};
+                        position: absolute;
+                        inset: 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+
+            &[data-variant=circular] {
+                .${classes.imageWrap} {
+                    border-radius: 50%;
+                }
+            }
+
+            &[data-variant=square] {
+                .${classes.imageWrap} {
+                    border-radius: ${borderRadius}px;
+                }
+            }
+        }
+
+        .${classes.sortable}[data-dragging=true] {
+            position: relative;
+            z-index: 1;
+        }
+
+        &[data-sortable=true] {
+            .${classes.file}, .${classes.imageWrap} {
+                cursor: grab;
+            }
+        }
+
+        &:not([data-sortable=true]) {
+            .${classes.file}, .${classes.imageWrap} {
+                cursor: default;
+            }
+        }
+    `;
+});

package/dist/esm/components/waterfall/index.d.ts

@@ -0,0 +1 @@
+export * from './waterfall';

package/dist/esm/components/waterfall/index.js

@@ -0,0 +1 @@
+export * from './waterfall';

package/dist/esm/components/waterfall/waterfall.d.ts

@@ -0,0 +1,10 @@
+import { ResponsiveProp } from '../../../types';
+import { TransportStyleProps } from '../transportStyle';
+export interface WaterfallProps extends TransportStyleProps {
+    /** 布局列数，@default {xs: 4} */
+    columnCount?: ResponsiveProp;
+    gap?: ResponsiveProp;
+    columnGap?: ResponsiveProp;
+    rowGap?: ResponsiveProp;
+}
+export declare const Waterfall: import("react").ForwardRefExoticComponent<Omit<WaterfallProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/waterfall/waterfall.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
+import { classes, useStyle } from './waterfall.style';
+import { classnames, responsiveValue, useResponsiveValue } from '../../utils';
+export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
+    columnCount = responsiveValue(columnCount);
+    gap = responsiveValue(gap);
+    columnGap = responsiveValue(columnGap) ?? gap;
+    rowGap = responsiveValue(rowGap) ?? gap;
+    const columnCountNum = useResponsiveValue(columnCount);
+    const items = useRef([]);
+    items.current = [];
+    const [orders, setOrders] = useState();
+    const [containerHeight, setContainerHeight] = useState();
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            const heights = Array(columnCountNum).fill(0);
+            const newOrders = [];
+            items.current.forEach(item => {
+                const order = heights.indexOf(Math.min(...heights));
+                newOrders.push(order);
+                heights[order] += item.offsetHeight;
+            });
+            setOrders(newOrders);
+            setContainerHeight(Math.max(...heights));
+        });
+        items.current.forEach(item => {
+            resizeObserver.observe(item);
+        });
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [props.children, columnCountNum]);
+    return (_jsx("div", { ...props, ref: ref, css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, style: { order: orders?.[i] }, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
+});

package/dist/esm/components/waterfall/waterfall.style.d.ts

@@ -0,0 +1,11 @@
+import { ResponsiveValue } from '../../../types';
+export declare const classes: {
+    item: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ columnCount, columnGap, rowGap }: {
+    columnCount: ResponsiveValue;
+    columnGap: ResponsiveValue;
+    rowGap: ResponsiveValue;
+}): import("@emotion/react").SerializedStyles;

package/dist/esm/components/waterfall/waterfall.style.js

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import { defineClasses, responsiveVariables } from '../../utils';
+export const classes = defineClasses('waterfall', [
+    'item'
+]);
+export function useStyle({ columnCount, columnGap, rowGap }) {
+    return css `
+        ${responsiveVariables(k => `
+            ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
+            ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
+            ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};
+        `)}
+
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        column-gap: var(--waterfall-column-gap);
+
+        .${classes.item} {
+            width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
+            padding-bottom: var(--waterfall-row-gap);
+
+            > img {
+                width: 100%;
+                display: flex;
+            }
+        }
+    `;
+}

package/dist/esm/extensions/curd/curd.d.ts

@@ -0,0 +1,68 @@
+import { ComponentClass, ReactNode } from 'react';
+import { CurdBaseProps, CurdColumn } from '../../components/curd';
+import { DataGridProps, RowType } from '../../components/dataGrid';
+import { FormValue } from '../../components/form';
+import { Id } from '../../../types';
+/**
+ * -------------------------------------------------------------------
+ * 类修饰器
+ */
+export declare function CURD<R extends RowType, F extends FormValue = FormValue>(props?: CurdBaseProps<R, F>): <T extends ComponentClass>(target: T) => T;
+export declare namespace CURD {
+    var Column: typeof import("./curd").Column;
+    var Reqeust: typeof import("./curd").Reqeust;
+    var OnReload: typeof import("./curd").OnReload;
+    var OnFilter: typeof import("./curd").OnFilter;
+    var OnCreate: typeof import("./curd").OnCreate;
+    var OnUpdate: typeof import("./curd").OnUpdate;
+    var OnDelete: typeof import("./curd").OnDelete;
+    var PostData: typeof import("./curd").PostData;
+}
+export declare function DATA_GRID<R extends RowType, V extends Id = Id>(props?: DataGridProps<R, V>): <T extends ComponentClass>(target: T) => T;
+export declare namespace DATA_GRID {
+    var Column: typeof import("./curd").Column;
+    var Reqeust: typeof import("./curd").Reqeust;
+    var OnReload: typeof import("./curd").OnReload;
+    var OnFilter: typeof import("./curd").OnFilter;
+    var OnCreate: typeof import("./curd").OnCreate;
+    var OnUpdate: typeof import("./curd").OnUpdate;
+    var OnDelete: typeof import("./curd").OnDelete;
+    var PostData: typeof import("./curd").PostData;
+}
+type ColumnDecorator = (prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>) => void;
+export declare function Column(title: ReactNode): ColumnDecorator;
+export declare function Column(params?: CurdColumn): ColumnDecorator;
+export declare namespace Column {
+    var Hide: typeof import("./curd").Hide;
+    var Sort: typeof import("./curd").Sort;
+    var Filter: typeof import("./curd").Filter;
+    var Form: typeof import("./curd").Form;
+}
+export declare function Hide(): ColumnDecorator;
+export declare function Hide(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Sort<R extends RowType>(compareFn?: (a: R, b: R) => number): ColumnDecorator;
+export declare function Sort(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Filter(config?: CurdColumn['filter']): ColumnDecorator;
+export declare function Filter(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Form(config?: CurdColumn['form']): ColumnDecorator;
+export declare function Form(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+/**
+ * -------------------------------------------------------------------
+ * 方法修饰器
+ */
+type MethodDecorator = (prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>) => void;
+export declare function Reqeust(): MethodDecorator;
+export declare function Reqeust(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnReload(): MethodDecorator;
+export declare function OnReload(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnFilter(): MethodDecorator;
+export declare function OnFilter(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnCreate(): MethodDecorator;
+export declare function OnCreate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnUpdate(): MethodDecorator;
+export declare function OnUpdate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnDelete(): MethodDecorator;
+export declare function OnDelete(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function PostData(): MethodDecorator;
+export declare function PostData(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export {};

package/dist/esm/extensions/curd/curd.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Curd } from '../../components/curd';
+import { DataGrid } from '../../components/dataGrid';
+/**
+ * -------------------------------------------------------------------
+ * 类修饰器
+ */
+export function CURD(props) {
+    return commonClassDecorator(Curd, props);
+}
+export function DATA_GRID(props) {
+    return commonClassDecorator(DataGrid, props);
+}
+function commonClassDecorator(Component, props) {
+    return (target) => {
+        return class extends target {
+            _columns = [];
+            _methods;
+            constructor(props) {
+                super(props);
+                const property_columnConfig = prototype_property_columnConfig.get(target.prototype);
+                if (property_columnConfig) {
+                    for (const [, columnConfig] of property_columnConfig) {
+                        this._columns.push(columnConfig);
+                    }
+                }
+                this._methods = prototype_methods.get(target.prototype);
+                if (this._methods) {
+                    for (const key in this._methods) {
+                        this._methods[key] = this._methods[key].bind(this);
+                    }
+                }
+            }
+            render() {
+                return (_jsx(Component, { columns: this._columns, ...props, ...this._methods, ...this.props }));
+            }
+        };
+    };
+}
+/**
+ * -------------------------------------------------------------------
+ * 属性修饰器 - columns
+ */
+const prototype_property_columnConfig = new WeakMap();
+CURD.Column = DATA_GRID.Column = Column;
+export function Column(a) {
+    return (prototype, property, descriptor) => {
+        const params = a && typeof a === 'object' ? a : { title: a };
+        const columnConfig = Object.assign(setColumnConfig(prototype, property), params);
+        if (typeof descriptor?.value === 'function') {
+            columnConfig.render = descriptor.value;
+        }
+    };
+}
+/**
+ * 对应CurdColumn['hideInTable']属性
+ */
+Column.Hide = Hide;
+export function Hide(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('hideInTable')
+        : setColumnConfigValue('hideInTable')(a, b);
+}
+Column.Sort = Sort;
+export function Sort(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('sorter', a)
+        : setColumnConfigValue('sorter')(a, b);
+}
+Column.Filter = Filter;
+export function Filter(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('filter', a)
+        : setColumnConfigValue('filter')(a, b);
+}
+Column.Form = Form;
+export function Form(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('form', a)
+        : setColumnConfigValue('form')(a, b);
+}
+/**
+ * 通用设置prototype_property_columnConfig的方法
+ * @param prototype
+ * @param property
+ */
+function setColumnConfig(prototype, property) {
+    let property_columnConfig = prototype_property_columnConfig.get(prototype);
+    !property_columnConfig && prototype_property_columnConfig.set(prototype, property_columnConfig = new Map());
+    let columnConfig = property_columnConfig.get(property);
+    !columnConfig && property_columnConfig.set(property, columnConfig = { field: property });
+    return columnConfig;
+}
+/**
+ * 设置单个columnConfig的值
+ * @param key
+ * @param value
+ */
+function setColumnConfigValue(key, value = true) {
+    return (prototype, property) => {
+        const columnConfig = setColumnConfig(prototype, property);
+        columnConfig[key] = value;
+    };
+}
+const prototype_methods = new WeakMap();
+CURD.Reqeust = DATA_GRID.Reqeust = Reqeust;
+export function Reqeust(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('loadRows')
+        : setMethods('loadRows')(a, b, c);
+}
+CURD.OnReload = DATA_GRID.OnReload = OnReload;
+export function OnReload(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onReload')
+        : setMethods('onReload')(a, b, c);
+}
+CURD.OnFilter = DATA_GRID.OnFilter = OnFilter;
+export function OnFilter(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onFilter')
+        : setMethods('onFilter')(a, b, c);
+}
+CURD.OnCreate = DATA_GRID.OnCreate = OnCreate;
+export function OnCreate(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onCreate')
+        : setMethods('onCreate')(a, b, c);
+}
+CURD.OnUpdate = DATA_GRID.OnUpdate = OnUpdate;
+export function OnUpdate(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onUpdate')
+        : setMethods('onUpdate')(a, b, c);
+}
+CURD.OnDelete = DATA_GRID.OnDelete = OnDelete;
+export function OnDelete(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onDelete')
+        : setMethods('onDelete')(a, b, c);
+}
+CURD.PostData = DATA_GRID.PostData = PostData;
+export function PostData(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('postData')
+        : setMethods('postData')(a, b, c);
+}
+/**
+ * 通用设置prototype_methods的方法
+ * @param key
+ */
+function setMethods(key) {
+    return (prototype, property, descriptor) => {
+        let methods = prototype_methods.get(prototype);
+        !methods && prototype_methods.set(prototype, methods = {});
+        methods[key] = descriptor.value;
+    };
+}

package/dist/esm/extensions/curd/index.d.ts

@@ -0,0 +1 @@
+export * from './curd';

package/dist/esm/extensions/curd/index.js

@@ -0,0 +1 @@
+export * from './curd';

package/dist/esm/extensions/documentViewer/documentViewer.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { SvgViewer } from './svgViewer';
+import { PdfViewer } from './pdfViewer';
+export type DocumentViewerBaseProps = {
+    src?: string;
+    filename?: string;
+    onError?(e: any): void;
+    /** 是否将文件名设置成页面的标题，@default true */
+    setDocumentTitle?: boolean;
+};
+export interface DocumentViewerProps extends DocumentViewerBaseProps {
+    /** mimeType与后缀名至少提供一个 */
+    type?: string;
+    extension?: string;
+}
+export declare const DocumentViewer: {
+    (props: DocumentViewerProps): ReactElement;
+    Svg: typeof SvgViewer;
+    Pdf: typeof PdfViewer;
+};
+/**
+ * 将文件名同步至页面标题
+ */
+export declare function useDocumentTitle({ filename, setDocumentTitle }: Pick<DocumentViewerBaseProps, 'filename' | 'setDocumentTitle'>): void;
+/**
+ * 获取文件内容
+ * @param param0
+ */
+export declare function useBlob({ src, onError }: DocumentViewerBaseProps): {
+    blob: Blob | undefined;
+    loading: boolean;
+};

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useEffect, useMemo } from 'react';
+import { SvgViewer } from './svgViewer';
+import mime from 'mime';
+import { Placeholder } from '../../components/placeholder';
+import { Button } from '../../components/button';
+import { DownloadOutlined } from '@ant-design/icons';
+import { iframeStyle } from './documentViewer.style';
+import { useDerivedState, useLoading } from '../../utils';
+import { PdfViewer } from './pdfViewer';
+import { ImagePreview } from '../../components/image/imagePreview';
+export const DocumentViewer = memo(forwardRef(({ src, filename, onError, type, extension, setDocumentTitle = true }, ref) => {
+    const mimeType = useMemo(() => {
+        if (!src) {
+            return null;
+        }
+        if (type) {
+            return type;
+        }
+        if (extension) {
+            return mime.getType(extension);
+        }
+        if (filename) {
+            const [ext] = filename.match(/\.([^\\/\.])+$/) || [null];
+            return ext && mime.getType(ext);
+        }
+        return null;
+    }, [src, type, extension]);
+    const downloadHandler = () => {
+        if (src) {
+            const a = document.createElement('a');
+            a.href = src;
+            a.download = filename || 'download';
+            a.click();
+        }
+    };
+    const empty = (_jsx(Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: _jsx(Button, { variant: "outlined", prefix: _jsx(DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
+    if (!mimeType) {
+        return empty;
+    }
+    const childProps = { src, filename, onError, setDocumentTitle };
+    // pdf
+    if (mimeType === 'application/pdf') {
+        return _jsx(PdfViewer, { ...childProps });
+    }
+    // office文档
+    if (mimeType.includes('officedocument')
+        || {
+            'application/msword': true,
+            'application/vnd.ms-powerpoint': true,
+            'application/vnd.ms-excel': true
+        }[mimeType]) {
+        return _jsx("iframe", { css: iframeStyle, src: 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(src) });
+    }
+    // svg
+    if (mimeType === 'image/svg+xml') {
+        return _jsx(SvgViewer, { ...childProps });
+    }
+    // image
+    if (mimeType.includes('image/')) {
+        return _jsx(ImagePreview, { src: src, open: true, closable: false });
+    }
+    return empty;
+}));
+DocumentViewer.Svg = SvgViewer;
+DocumentViewer.Pdf = PdfViewer;
+/**
+ * 将文件名同步至页面标题
+ */
+export function useDocumentTitle({ filename, setDocumentTitle }) {
+    useEffect(() => {
+        if (filename && setDocumentTitle) {
+            document.title = filename;
+        }
+    }, [filename, setDocumentTitle]);
+}
+/**
+ * 获取文件内容
+ * @param param0
+ */
+export function useBlob({ src, onError }) {
+    // src改变会清空data
+    const [blob, setBlob] = useDerivedState(void 0, [src]);
+    const [loading, getBlob] = useLoading(async () => {
+        try {
+            const res = await fetch(src);
+            if (!res.ok) {
+                onError?.(res);
+                return;
+            }
+            setBlob(await res.blob());
+        }
+        catch (e) {
+            onError?.(e);
+        }
+    }, true);
+    useEffect(() => {
+        src && getBlob();
+    }, [src]);
+    return { blob: blob.current, loading: loading.current };
+}

package/dist/esm/extensions/documentViewer/documentViewer.style.d.ts

@@ -0,0 +1,15 @@
+export declare const classes: {
+    object: string;
+    svgViewer: string;
+    svgToolbar: string;
+    svgTitle: string;
+    svgIcon: string;
+    svgToolbarRight: string;
+    svgDivider: string;
+    svgContainer: string;
+    svgContent: string;
+} & {
+    root: string;
+};
+export declare const iframeStyle: import("@emotion/react").SerializedStyles;
+export declare const svgStyle: () => import("@emotion/react").SerializedStyles;