@canlooks/can-ui 0.0.25 → 0.0.27

package/dist/cjs/components/button/button.style.b.js

@@ -1,285 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.classes = void 0;
-exports.useStyle = useStyle;
-const tslib_1 = require("tslib");
-const react_1 = require("@emotion/react");
-const utils_1 = require("../../utils");
-const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('button', [
-    'prefix',
-    'suffix',
-    'content'
-]);
-function useStyle({ color }) {
-    const colorValue = (0, utils_1.useColor)(color);
-    return (0, utils_1.useCss)(({ borderRadius, easing, text, gray }) => {
-        const c = (0, color_1.default)(colorValue);
-        const lighter = c.lighten(.1).hex();
-        const lightest = c.lighten(.2).hex();
-        const outlineColor = c.alpha(.4).string();
-        const darkerC = c.darken(.1);
-        const darker = darkerC.hex();
-        return (0, react_1.css) `
-            line-height: inherit;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            vertical-align: top;
-            font-size: 1em;
-            user-select: none;
-            appearance: none;
-            -webkit-tap-highlight-color: transparent;
-            position: relative;
-            border: none;
-            background-color: transparent;
-            color: ${colorValue};
-            border-radius: ${borderRadius}px;
-            outline-offset: 1px;
-            outline: 0 solid ${outlineColor};
-            transition-property: outline-width, filter, border-color, background-color, color;
-            transition-duration: .2s;
-            transition-timing-function: ${easing.easeOut};
-
-            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                cursor: pointer;
-            }
-
-            &:focus-visible {
-                transition-timing-function: ${easing.swing}, ${easing.easeOut};
-                outline-width: 3px;
-            }
-
-            &:active {
-                transition: all 0s;
-            }
-
-            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
-                padding: 6px 16px;
-
-                &[data-size=small] {
-                    padding: 2px 8px;
-                }
-
-                &[data-size=large] {
-                    padding: 10px 20px;
-                }
-            }
-
-            &[data-variant=outlined], &[data-variant=dashed] {
-                padding: 5px 15px;
-                
-                &[data-size=small] {
-                    padding: 1px 7px;
-                }
-                
-                &[data-size=large] {
-                    padding: 9px 19px;
-                }
-            }
-
-            &[data-orientation=vertical] {
-                flex-direction: column;
-                padding-top: 9px;
-                padding-bottom: 9px;
-            }
-            
-            &[data-variant=filled] {
-                color: #ffffff;
-                background-image: linear-gradient(0deg, ${lighter}, ${darker});
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        filter: brightness(1.2);
-                    }
-
-                    &:active {
-                        background-image: linear-gradient(0deg, ${darker}, ${lighter});
-                        filter: brightness(1);
-                    }
-                }
-            }
-
-            &[data-variant=outlined], &[data-variant=dashed] {
-                border: 1px solid ${colorValue};
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        border-color: ${lightest};
-                        color: ${lightest};
-                    }
-
-                    &:active {
-                        border-color: ${darker};
-                        color: ${darker};
-                    }
-                }
-            }
-
-            &[data-variant=dashed] {
-                border-style: dashed;
-            }
-
-            &[data-variant=ghost] {
-                background-color: ${c.alpha(.05).rgb().string()};
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        background-color: ${c.alpha(.1).rgb().string()};
-                    }
-
-                    &:active {
-                        background-color: ${c.alpha(.15).rgb().string()};
-                    }
-                }
-            }
-
-            &[data-variant=text] {
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        background-color: ${c.alpha(.05).rgb().string()};
-                    }
-
-                    &:active {
-                        background-color: ${darkerC.alpha(.1).rgb().string()};
-                    }
-                }
-            }
-
-            &[data-variant=plain] {
-                padding: 0;
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        color: ${lightest};
-                    }
-
-                    &:active {
-                        color: ${darker};
-                    }
-                }
-            }
-
-            &[data-loading=true] {
-                transition: all 0s;
-
-                &[data-variant=filled] {
-                    background-image: none;
-                    background-color: ${lightest};
-                }
-
-                &[data-variant=outlined], &[data-variant=dashed] {
-                    color: ${lightest};
-                    border-color: ${lightest};
-                }
-
-                &[data-variant=text], &[data-variant=plain] {
-                    color: ${lightest};
-                }
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                color: ${text.disabled};
-                border-color: ${text.disabled};
-
-                &:not([data-variant=text]):not([data-variant=plain]) {
-                    background-image: none;
-                    background-color: ${gray(.1)};
-                 }
-            }
-
-            &[data-shape=rounded] {
-                border-radius: 1000em;
-            }
-
-            &[data-shape=circular] {
-                border-radius: 50%;
-                padding: 0;
-                width: 32px;
-                height: 32px;
-
-                &[data-size=small] {
-                    width: 24px;
-                    height: 24px;
-                }
-
-                &[data-size=large] {
-                    width: 40px;
-                    height: 40px;
-                }
-            }
-
-            &[data-compact=row] {
-                &[data-variant=filled]:not(:disabled) {
-                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
-                    
-                    &:before, &:after {
-                        content: '';
-                        width: 1px;
-                        height: 100%;
-                        position: absolute;
-                        top: 0;
-                        display: none;
-                    }
-
-                    &:before {
-                        background-color: ${lighter};
-                        left: 0;
-                    }
-
-                    &:after {
-                        background-color: ${colorValue};
-                        right: 0;
-                    }
-                }
-
-                &:not([data-last=true]) {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    
-                    &:after {
-                        display: block;
-                    }
-                }
-        
-                &:not([data-first=true]) {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-
-                    &:before {
-                        display: block;
-                    }
-
-                    &[data-variant=outlined] {
-                        border-left-color: transparent;
-                    }
-                }
-            }
-    
-            &[data-compact=column] {
-                &[data-variant=filled] {
-                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
-                    border-top-color: ${lighter};
-                }
-
-                &:not([data-last=true]) {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0;
-                    border-bottom-width: 1px;
-                }
-        
-                &:not([data-first=true]) {
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
-                    border-top-width: 1px;
-                    
-                    &[data-variant=outlined] {
-                        margin-top: -1px;
-                    }
-                }
-            }
-        `;
-    }, [colorValue]);
-}

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

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-type AnchorContextBaseProps = {
-    scrollIntoViewOptions?: ScrollIntoViewOptions;
-};
-export interface AnchorContextProps extends AnchorContextBaseProps {
-    thresholds?: [number, number];
-    container?: Element | (() => Element);
-    children?: ReactNode;
-}
-export interface AnchorContextType extends AnchorContextBaseProps {
-    targets: Map<string, Element | null>;
-    activeId: string | null;
-}
-export declare const InnerAnchorContext: import("react").Context<AnchorContextType>;
-export declare function useAnchorContext(): AnchorContextType;
-export declare function AnchorContext({ thresholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
-/**
- * 在链接按钮组件内使用
- * @param id
- */
-export declare function useAnchorLinkProps(id: string): {
-    active: boolean;
-    onClick: () => void;
-};
-/**
- * 在需要滚动到的目标元素上使用
- * @param id
- */
-export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T | null>;
-export {};

package/dist/esm/components/anchor/anchor.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useSync } from '../../utils';
-export const InnerAnchorContext = createContext({
-    targets: new Map(),
-    activeId: null
-});
-export function useAnchorContext() {
-    return useContext(InnerAnchorContext);
-}
-export function AnchorContext({ thresholds, container, children, ...props }) {
-    const targets = useRef(new Map());
-    const [activeId, setActiveId] = useState(null);
-    const syncThresholds = useSync(thresholds);
-    useEffect(() => {
-        const containerEl = typeof container === 'function' ? container() : container;
-        const scroll = () => {
-            let enter = syncThresholds.current?.[0];
-            if (typeof enter === 'undefined') {
-                const containerHeight = containerEl?.offsetHeight ?? window.innerHeight;
-                enter = containerHeight / 2;
-            }
-            const leave = syncThresholds.current?.[1] || 0;
-            let found = false;
-            for (const [id, el] of targets.current) {
-                if (el) {
-                    const { y, height } = el.getBoundingClientRect();
-                    if (y <= enter && y + height >= leave) {
-                        setActiveId(id);
-                        found = true;
-                        break;
-                    }
-                }
-            }
-            !found && setActiveId(null);
-        };
-        scroll();
-        if (containerEl) {
-            containerEl.addEventListener('scroll', scroll);
-        }
-        else {
-            addEventListener('scroll', scroll);
-            document.body.addEventListener('scroll', scroll);
-        }
-        return () => {
-            if (containerEl) {
-                containerEl.removeEventListener('scroll', scroll);
-            }
-            else {
-                removeEventListener('scroll', scroll);
-                document.body.removeEventListener('scroll', scroll);
-            }
-        };
-    }, []);
-    return (_jsx(InnerAnchorContext, { value: useMemo(() => ({
-            ...props,
-            targets: targets.current,
-            activeId
-        }), [activeId]), children: children }));
-}
-/**
- * 在链接按钮组件内使用
- * @param id
- */
-export function useAnchorLinkProps(id) {
-    const { activeId, targets, scrollIntoViewOptions } = useAnchorContext();
-    const onClick = useCallback(() => {
-        targets.get(id)?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            ...scrollIntoViewOptions
-        });
-    }, [id]);
-    return {
-        active: activeId === id,
-        onClick
-    };
-}
-/**
- * 在需要滚动到的目标元素上使用
- * @param id
- */
-export function useAnchorTargetRef(id) {
-    const { targets } = useAnchorContext();
-    const ref = useRef(null);
-    useEffect(() => {
-        targets.set(id, ref.current);
-        return () => {
-            targets.delete(id);
-        };
-    });
-    return ref;
-}

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

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

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

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

package/dist/esm/components/button/button.style.b.d.ts

@@ -1,11 +0,0 @@
-import { ColorPropsValue } from '../../types';
-export declare const classes: {
-    content: string;
-    prefix: string;
-    suffix: string;
-} & {
-    root: string;
-};
-export declare function useStyle({ color }: {
-    color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;

package/dist/esm/components/button/button.style.b.js

@@ -1,280 +0,0 @@
-import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-import Color from 'color';
-export const classes = defineClasses('button', [
-    'prefix',
-    'suffix',
-    'content'
-]);
-export function useStyle({ color }) {
-    const colorValue = useColor(color);
-    return useCss(({ borderRadius, easing, text, gray }) => {
-        const c = Color(colorValue);
-        const lighter = c.lighten(.1).hex();
-        const lightest = c.lighten(.2).hex();
-        const outlineColor = c.alpha(.4).string();
-        const darkerC = c.darken(.1);
-        const darker = darkerC.hex();
-        return css `
-            line-height: inherit;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            vertical-align: top;
-            font-size: 1em;
-            user-select: none;
-            appearance: none;
-            -webkit-tap-highlight-color: transparent;
-            position: relative;
-            border: none;
-            background-color: transparent;
-            color: ${colorValue};
-            border-radius: ${borderRadius}px;
-            outline-offset: 1px;
-            outline: 0 solid ${outlineColor};
-            transition-property: outline-width, filter, border-color, background-color, color;
-            transition-duration: .2s;
-            transition-timing-function: ${easing.easeOut};
-
-            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                cursor: pointer;
-            }
-
-            &:focus-visible {
-                transition-timing-function: ${easing.swing}, ${easing.easeOut};
-                outline-width: 3px;
-            }
-
-            &:active {
-                transition: all 0s;
-            }
-
-            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
-                padding: 6px 16px;
-
-                &[data-size=small] {
-                    padding: 2px 8px;
-                }
-
-                &[data-size=large] {
-                    padding: 10px 20px;
-                }
-            }
-
-            &[data-variant=outlined], &[data-variant=dashed] {
-                padding: 5px 15px;
-                
-                &[data-size=small] {
-                    padding: 1px 7px;
-                }
-                
-                &[data-size=large] {
-                    padding: 9px 19px;
-                }
-            }
-
-            &[data-orientation=vertical] {
-                flex-direction: column;
-                padding-top: 9px;
-                padding-bottom: 9px;
-            }
-            
-            &[data-variant=filled] {
-                color: #ffffff;
-                background-image: linear-gradient(0deg, ${lighter}, ${darker});
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        filter: brightness(1.2);
-                    }
-
-                    &:active {
-                        background-image: linear-gradient(0deg, ${darker}, ${lighter});
-                        filter: brightness(1);
-                    }
-                }
-            }
-
-            &[data-variant=outlined], &[data-variant=dashed] {
-                border: 1px solid ${colorValue};
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        border-color: ${lightest};
-                        color: ${lightest};
-                    }
-
-                    &:active {
-                        border-color: ${darker};
-                        color: ${darker};
-                    }
-                }
-            }
-
-            &[data-variant=dashed] {
-                border-style: dashed;
-            }
-
-            &[data-variant=ghost] {
-                background-color: ${c.alpha(.05).rgb().string()};
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        background-color: ${c.alpha(.1).rgb().string()};
-                    }
-
-                    &:active {
-                        background-color: ${c.alpha(.15).rgb().string()};
-                    }
-                }
-            }
-
-            &[data-variant=text] {
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        background-color: ${c.alpha(.05).rgb().string()};
-                    }
-
-                    &:active {
-                        background-color: ${darkerC.alpha(.1).rgb().string()};
-                    }
-                }
-            }
-
-            &[data-variant=plain] {
-                padding: 0;
-
-                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                    &:hover {
-                        color: ${lightest};
-                    }
-
-                    &:active {
-                        color: ${darker};
-                    }
-                }
-            }
-
-            &[data-loading=true] {
-                transition: all 0s;
-
-                &[data-variant=filled] {
-                    background-image: none;
-                    background-color: ${lightest};
-                }
-
-                &[data-variant=outlined], &[data-variant=dashed] {
-                    color: ${lightest};
-                    border-color: ${lightest};
-                }
-
-                &[data-variant=text], &[data-variant=plain] {
-                    color: ${lightest};
-                }
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                color: ${text.disabled};
-                border-color: ${text.disabled};
-
-                &:not([data-variant=text]):not([data-variant=plain]) {
-                    background-image: none;
-                    background-color: ${gray(.1)};
-                 }
-            }
-
-            &[data-shape=rounded] {
-                border-radius: 1000em;
-            }
-
-            &[data-shape=circular] {
-                border-radius: 50%;
-                padding: 0;
-                width: 32px;
-                height: 32px;
-
-                &[data-size=small] {
-                    width: 24px;
-                    height: 24px;
-                }
-
-                &[data-size=large] {
-                    width: 40px;
-                    height: 40px;
-                }
-            }
-
-            &[data-compact=row] {
-                &[data-variant=filled]:not(:disabled) {
-                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
-                    
-                    &:before, &:after {
-                        content: '';
-                        width: 1px;
-                        height: 100%;
-                        position: absolute;
-                        top: 0;
-                        display: none;
-                    }
-
-                    &:before {
-                        background-color: ${lighter};
-                        left: 0;
-                    }
-
-                    &:after {
-                        background-color: ${colorValue};
-                        right: 0;
-                    }
-                }
-
-                &:not([data-last=true]) {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    
-                    &:after {
-                        display: block;
-                    }
-                }
-        
-                &:not([data-first=true]) {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-
-                    &:before {
-                        display: block;
-                    }
-
-                    &[data-variant=outlined] {
-                        border-left-color: transparent;
-                    }
-                }
-            }
-    
-            &[data-compact=column] {
-                &[data-variant=filled] {
-                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
-                    border-top-color: ${lighter};
-                }
-
-                &:not([data-last=true]) {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0;
-                    border-bottom-width: 1px;
-                }
-        
-                &:not([data-first=true]) {
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
-                    border-top-width: 1px;
-                    
-                    &[data-variant=outlined] {
-                        margin-top: -1px;
-                    }
-                }
-            }
-        `;
-    }, [colorValue]);
-}