naive-ui 2.35.0 → 2.37.0

package/es/drawer/src/styles/index.cssr.js

@@ -1,163 +0,0 @@
-import { c, cB, cE, cM } from '../../../_utils/cssr';
-import { slideInFromRightTransition } from '../../../_styles/transitions/slide-in-from-right';
-import { slideInFromLeftTransition } from '../../../_styles/transitions/slide-in-from-left';
-import { slideInFromTopTransition } from '../../../_styles/transitions/slide-in-from-top';
-import { slideInFromBottomTransition } from '../../../_styles/transitions/slide-in-from-bottom';
-import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
-// vars:
-// --n-line-height
-// --n-color
-// --n-text-color
-// --n-box-shadow
-// --n-bezier
-// --n-bezier-out
-// --n-bezier-in
-// --n-body-padding
-// --n-header-padding
-// --n-footer-padding
-// --n-title-font-size
-// --n-title-text-color
-// --n-title-font-weight
-// --n-header-border-bottom
-// --n-footer-border-top
-// --n-close-border-radius
-// --n-close-color-hover
-// --n-close-color-pressed
-// --n-close-icon-color
-// --n-close-icon-color-hover
-// --n-close-icon-color-pressed
-// --n-close-size
-// --n-close-icon-size
-export default c([cB('drawer', `
- word-break: break-word;
- line-height: var(--n-line-height);
- position: absolute;
- pointer-events: all;
- box-shadow: var(--n-box-shadow);
- transition:
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- background-color: var(--n-color);
- color: var(--n-text-color);
- box-sizing: border-box;
- `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('unselectable', `
- user-select: none; 
- -webkit-user-select: none;
- `), cM('native-scrollbar', [cB('drawer-content-wrapper', `
- overflow: auto;
- height: 100%;
- `)]), cE('resize-trigger', `
- position: absolute;
- background-color: #0000;
- transition: background-color .3s var(--n-bezier);
- `, [cM('hover', `
- background-color: var(--n-resize-trigger-color-hover);
- `)]), cB('drawer-content-wrapper', `
- box-sizing: border-box;
- `), cB('drawer-content', `
- height: 100%;
- display: flex;
- flex-direction: column;
- `, [cM('native-scrollbar', [cB('drawer-body-content-wrapper', `
- height: 100%;
- overflow: auto;
- `)]), cB('drawer-body', `
- flex: 1 0 0;
- overflow: hidden;
- `), cB('drawer-body-content-wrapper', `
- box-sizing: border-box;
- padding: var(--n-body-padding);
- `), cB('drawer-header', `
- font-weight: var(--n-title-font-weight);
- line-height: 1;
- font-size: var(--n-title-font-size);
- color: var(--n-title-text-color);
- padding: var(--n-header-padding);
- transition: border .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-divider-color);
- border-bottom: var(--n-header-border-bottom);
- display: flex;
- justify-content: space-between;
- align-items: center;
- `, [cE('close', `
- margin-left: 6px;
- transition:
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- `)]), cB('drawer-footer', `
- display: flex;
- justify-content: flex-end;
- border-top: var(--n-footer-border-top);
- transition: border .3s var(--n-bezier);
- padding: var(--n-footer-padding);
- `)]), cM('right-placement', `
- top: 0;
- bottom: 0;
- right: 0;
- `, [cE('resize-trigger', `
- width: 3px;
- height: 100%;
- top: 0;
- left: 0;
- transform: translateX(-1.5px);
- cursor: ew-resize;
- `)]), cM('left-placement', `
- top: 0;
- bottom: 0;
- left: 0;
- `, [cE('resize-trigger', `
- width: 3px;
- height: 100%;
- top: 0;
- right: 0;
- transform: translateX(1.5px);
- cursor: ew-resize;
- `)]), cM('top-placement', `
- top: 0;
- left: 0;
- right: 0;
- `, [cE('resize-trigger', `
- width: 100%;
- height: 3px;
- bottom: 0;
- left: 0;
- transform: translateY(1.5px);
- cursor: ns-resize;
- `)]), cM('bottom-placement', `
- left: 0;
- bottom: 0;
- right: 0;
- `, [cE('resize-trigger', `
- width: 100%;
- height: 3px;
- top: 0;
- left: 0;
- transform: translateY(-1.5px);
- cursor: ns-resize;
- `)])]), c('body', [c('>', [cB('drawer-container', {
-  position: 'fixed'
-})])]), cB('drawer-container', `
- position: relative;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- pointer-events: none;
- `, [c('> *', {
-  pointerEvents: 'all'
-})]), cB('drawer-mask', `
- background-color: rgba(0, 0, 0, .3);
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `, [cM('invisible', `
- background-color: rgba(0, 0, 0, 0)
- `), fadeInTransition({
-  enterDuration: '0.2s',
-  leaveDuration: '0.2s',
-  enterCubicBezier: 'var(--n-bezier-in)',
-  leaveCubicBezier: 'var(--n-bezier-out)'
-})])]);

package/es/drawer/src/styles/rtl.cssr.js

@@ -1,8 +0,0 @@
-import { cB, cE, cM } from '../../../_utils/cssr';
-export default cB('drawer', [cM('rtl', `
- direction: rtl;
- text-align: right;
- `, [cB('drawer-content', [cB('drawer-header', [cE('close', `
- margin-left: 0;
- margin-right: 6px;
- `)])])])]);

package/es/drawer/styles/dark.js

@@ -1,12 +0,0 @@
-import { commonDark } from '../../_styles/common';
-import { scrollbarDark } from '../../_internal/scrollbar/styles';
-import { self } from './light';
-const drawerDark = {
-    name: 'Drawer',
-    common: commonDark,
-    peers: {
-        Scrollbar: scrollbarDark
-    },
-    self
-};
-export default drawerDark;

package/es/drawer/styles/index.js

@@ -1,3 +0,0 @@
-export { default as drawerDark } from './dark';
-export { default as drawerLight } from './light';
-export { default as drawerRtl } from './rtl';

package/es/drawer/styles/light.js

@@ -1,38 +0,0 @@
-import { commonLight } from '../../_styles/common';
-import { scrollbarLight } from '../../_internal/scrollbar/styles';
-import { createTheme } from '../../_mixins';
-export const self = (vars) => {
-    const { modalColor, textColor1, textColor2, boxShadow3, lineHeight, fontWeightStrong, dividerColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, borderRadius, primaryColorHover } = vars;
-    return {
-        bodyPadding: '16px 24px',
-        headerPadding: '16px 24px',
-        footerPadding: '16px 24px',
-        color: modalColor,
-        textColor: textColor2,
-        titleTextColor: textColor1,
-        titleFontSize: '18px',
-        titleFontWeight: fontWeightStrong,
-        boxShadow: boxShadow3,
-        lineHeight,
-        headerBorderBottom: `1px solid ${dividerColor}`,
-        footerBorderTop: `1px solid ${dividerColor}`,
-        closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed,
-        closeSize: '22px',
-        closeIconSize: '18px',
-        closeColorHover,
-        closeColorPressed,
-        closeBorderRadius: borderRadius,
-        resizableTriggerColorHover: primaryColorHover
-    };
-};
-const drawerLight = createTheme({
-    name: 'Drawer',
-    common: commonLight,
-    peers: {
-        Scrollbar: scrollbarLight
-    },
-    self
-});
-export default drawerLight;

package/es/drawer/styles/rtl.js

@@ -1,8 +0,0 @@
-import rtlStyle from '../src/styles/rtl.cssr';
-import { scrollbarRtl } from '../../_internal/scrollbar/styles/rtl';
-export const drawerRtl = {
-    name: 'Drawer',
-    style: rtlStyle,
-    peers: [scrollbarRtl]
-};
-export default drawerRtl;

package/es/dropdown/index.js

@@ -1 +0,0 @@
-export { default as NDropdown, dropdownProps } from './src/Dropdown';

package/es/dropdown/src/Dropdown.js

@@ -1,338 +0,0 @@
-import { defineComponent, h, computed, ref, toRef, watch, provide, mergeProps } from 'vue';
-import { createTreeMate } from 'treemate';
-import { useMergedState, useKeyboard, useMemo } from 'vooks';
-import { popoverBaseProps } from '../../popover/src/Popover';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { NPopover } from '../../popover';
-import { keep, call, createKey, createRefSetter } from '../../_utils';
-import { dropdownLight } from '../styles';
-import NDropdownMenu from './DropdownMenu';
-import style from './styles/index.cssr';
-import { dropdownInjectionKey } from './context';
-const dropdownBaseProps = {
-    animated: {
-        type: Boolean,
-        default: true
-    },
-    keyboard: {
-        type: Boolean,
-        default: true
-    },
-    size: {
-        type: String,
-        default: 'medium'
-    },
-    inverted: Boolean,
-    placement: {
-        type: String,
-        default: 'bottom'
-    },
-    onSelect: [Function, Array],
-    options: {
-        type: Array,
-        default: () => []
-    },
-    menuProps: Function,
-    showArrow: Boolean,
-    renderLabel: Function,
-    renderIcon: Function,
-    renderOption: Function,
-    nodeProps: Function,
-    labelField: {
-        type: String,
-        default: 'label'
-    },
-    keyField: {
-        type: String,
-        default: 'key'
-    },
-    childrenField: {
-        type: String,
-        default: 'children'
-    },
-    // for menu, not documented
-    value: [String, Number]
-};
-const popoverPropKeys = Object.keys(popoverBaseProps);
-export const dropdownProps = Object.assign(Object.assign(Object.assign({}, popoverBaseProps), dropdownBaseProps), useTheme.props);
-export default defineComponent({
-    name: 'Dropdown',
-    inheritAttrs: false,
-    props: dropdownProps,
-    setup(props) {
-        const uncontrolledShowRef = ref(false);
-        const mergedShowRef = useMergedState(toRef(props, 'show'), uncontrolledShowRef);
-        const treemateRef = computed(() => {
-            const { keyField, childrenField } = props;
-            return createTreeMate(props.options, {
-                getKey(node) {
-                    return node[keyField];
-                },
-                getDisabled(node) {
-                    return node.disabled === true;
-                },
-                getIgnored(node) {
-                    return node.type === 'divider' || node.type === 'render';
-                },
-                getChildren(node) {
-                    return node[childrenField];
-                }
-            });
-        });
-        const tmNodesRef = computed(() => {
-            return treemateRef.value.treeNodes;
-        });
-        const hoverKeyRef = ref(null);
-        const keyboardKeyRef = ref(null);
-        const lastToggledSubmenuKeyRef = ref(null);
-        const pendingKeyRef = computed(() => {
-            var _a, _b, _c;
-            return ((_c = (_b = (_a = hoverKeyRef.value) !== null && _a !== void 0 ? _a : keyboardKeyRef.value) !== null && _b !== void 0 ? _b : lastToggledSubmenuKeyRef.value) !== null && _c !== void 0 ? _c : null);
-        });
-        const pendingKeyPathRef = computed(() => treemateRef.value.getPath(pendingKeyRef.value).keyPath);
-        const activeKeyPathRef = computed(() => treemateRef.value.getPath(props.value).keyPath);
-        const keyboardEnabledRef = useMemo(() => {
-            return props.keyboard && mergedShowRef.value;
-        });
-        useKeyboard({
-            keydown: {
-                ArrowUp: {
-                    prevent: true,
-                    handler: handleKeydownUp
-                },
-                ArrowRight: {
-                    prevent: true,
-                    handler: handleKeydownRight
-                },
-                ArrowDown: {
-                    prevent: true,
-                    handler: handleKeydownDown
-                },
-                ArrowLeft: {
-                    prevent: true,
-                    handler: handleKeydownLeft
-                },
-                Enter: {
-                    prevent: true,
-                    handler: handleKeydownEnter
-                },
-                Escape: handleKeydownEsc
-            }
-        }, keyboardEnabledRef);
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme('Dropdown', '-dropdown', style, dropdownLight, props, mergedClsPrefixRef);
-        provide(dropdownInjectionKey, {
-            labelFieldRef: toRef(props, 'labelField'),
-            childrenFieldRef: toRef(props, 'childrenField'),
-            renderLabelRef: toRef(props, 'renderLabel'),
-            renderIconRef: toRef(props, 'renderIcon'),
-            hoverKeyRef,
-            keyboardKeyRef,
-            lastToggledSubmenuKeyRef,
-            pendingKeyPathRef,
-            activeKeyPathRef,
-            animatedRef: toRef(props, 'animated'),
-            mergedShowRef,
-            nodePropsRef: toRef(props, 'nodeProps'),
-            renderOptionRef: toRef(props, 'renderOption'),
-            menuPropsRef: toRef(props, 'menuProps'),
-            doSelect,
-            doUpdateShow
-        });
-        // watch
-        watch(mergedShowRef, (value) => {
-            if (!props.animated && !value) {
-                clearPendingState();
-            }
-        });
-        // methods
-        function doSelect(key, node) {
-            const { onSelect } = props;
-            if (onSelect)
-                call(onSelect, key, node);
-        }
-        function doUpdateShow(value) {
-            const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = props;
-            if (_onUpdateShow)
-                call(_onUpdateShow, value);
-            if (onUpdateShow)
-                call(onUpdateShow, value);
-            uncontrolledShowRef.value = value;
-        }
-        function clearPendingState() {
-            hoverKeyRef.value = null;
-            keyboardKeyRef.value = null;
-            lastToggledSubmenuKeyRef.value = null;
-        }
-        function handleKeydownEsc() {
-            doUpdateShow(false);
-        }
-        function handleKeydownLeft() {
-            handleKeydown('left');
-        }
-        function handleKeydownRight() {
-            handleKeydown('right');
-        }
-        function handleKeydownUp() {
-            handleKeydown('up');
-        }
-        function handleKeydownDown() {
-            handleKeydown('down');
-        }
-        function handleKeydownEnter() {
-            const pendingNode = getPendingNode();
-            if ((pendingNode === null || pendingNode === void 0 ? void 0 : pendingNode.isLeaf) && mergedShowRef.value) {
-                doSelect(pendingNode.key, pendingNode.rawNode);
-                doUpdateShow(false);
-            }
-        }
-        function getPendingNode() {
-            var _a;
-            const { value: treeMate } = treemateRef;
-            const { value: pendingKey } = pendingKeyRef;
-            if (!treeMate || pendingKey === null)
-                return null;
-            return (_a = treeMate.getNode(pendingKey)) !== null && _a !== void 0 ? _a : null;
-        }
-        function handleKeydown(direction) {
-            const { value: pendingKey } = pendingKeyRef;
-            const { value: { getFirstAvailableNode } } = treemateRef;
-            let nextKeyboardKey = null;
-            if (pendingKey === null) {
-                const firstNode = getFirstAvailableNode();
-                if (firstNode !== null) {
-                    nextKeyboardKey = firstNode.key;
-                }
-            }
-            else {
-                const currentNode = getPendingNode();
-                if (currentNode) {
-                    let nextNode;
-                    switch (direction) {
-                        case 'down':
-                            nextNode = currentNode.getNext();
-                            break;
-                        case 'up':
-                            nextNode = currentNode.getPrev();
-                            break;
-                        case 'right':
-                            nextNode = currentNode.getChild();
-                            break;
-                        case 'left':
-                            nextNode = currentNode.getParent();
-                            break;
-                    }
-                    if (nextNode)
-                        nextKeyboardKey = nextNode.key;
-                }
-            }
-            if (nextKeyboardKey !== null) {
-                hoverKeyRef.value = null;
-                keyboardKeyRef.value = nextKeyboardKey;
-            }
-        }
-        const cssVarsRef = computed(() => {
-            const { size, inverted } = props;
-            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-            const { padding, dividerColor, borderRadius, optionOpacityDisabled, [createKey('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [createKey('optionSuffixWidth', size)]: optionSuffixWidth, [createKey('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [createKey('optionPrefixWidth', size)]: optionPrefixWidth, [createKey('fontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionIconSize', size)]: optionIconSize } = self;
-            const vars = {
-                '--n-bezier': cubicBezierEaseInOut,
-                '--n-font-size': fontSize,
-                '--n-padding': padding,
-                '--n-border-radius': borderRadius,
-                '--n-option-height': optionHeight,
-                '--n-option-prefix-width': optionPrefixWidth,
-                '--n-option-icon-prefix-width': optionIconPrefixWidth,
-                '--n-option-suffix-width': optionSuffixWidth,
-                '--n-option-icon-suffix-width': optionIconSuffixWidth,
-                '--n-option-icon-size': optionIconSize,
-                '--n-divider-color': dividerColor,
-                '--n-option-opacity-disabled': optionOpacityDisabled
-            };
-            // writing like this is the fastest method
-            if (inverted) {
-                vars['--n-color'] = self.colorInverted;
-                vars['--n-option-color-hover'] = self.optionColorHoverInverted;
-                vars['--n-option-color-active'] = self.optionColorActiveInverted;
-                vars['--n-option-text-color'] = self.optionTextColorInverted;
-                vars['--n-option-text-color-hover'] = self.optionTextColorHoverInverted;
-                vars['--n-option-text-color-active'] =
-                    self.optionTextColorActiveInverted;
-                vars['--n-option-text-color-child-active'] =
-                    self.optionTextColorChildActiveInverted;
-                vars['--n-prefix-color'] = self.prefixColorInverted;
-                vars['--n-suffix-color'] = self.suffixColorInverted;
-                vars['--n-group-header-text-color'] = self.groupHeaderTextColorInverted;
-            }
-            else {
-                vars['--n-color'] = self.color;
-                vars['--n-option-color-hover'] = self.optionColorHover;
-                vars['--n-option-color-active'] = self.optionColorActive;
-                vars['--n-option-text-color'] = self.optionTextColor;
-                vars['--n-option-text-color-hover'] = self.optionTextColorHover;
-                vars['--n-option-text-color-active'] = self.optionTextColorActive;
-                vars['--n-option-text-color-child-active'] =
-                    self.optionTextColorChildActive;
-                vars['--n-prefix-color'] = self.prefixColor;
-                vars['--n-suffix-color'] = self.suffixColor;
-                vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
-            }
-            return vars;
-        });
-        const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('dropdown', computed(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), cssVarsRef, props)
-            : undefined;
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedTheme: themeRef,
-            // data
-            tmNodes: tmNodesRef,
-            // show
-            mergedShow: mergedShowRef,
-            // methods
-            handleAfterLeave: () => {
-                if (!props.animated)
-                    return;
-                clearPendingState();
-            },
-            doUpdateShow,
-            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
-        };
-    },
-    render() {
-        const renderPopoverBody = (className, ref, style, onMouseenter, onMouseleave) => {
-            var _a;
-            const { mergedClsPrefix, menuProps } = this;
-            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-            const menuNodeProps = (menuProps === null || menuProps === void 0 ? void 0 : menuProps(undefined, this.tmNodes.map((v) => v.rawNode))) || {};
-            const dropdownProps = {
-                ref: createRefSetter(ref),
-                class: [className, `${mergedClsPrefix}-dropdown`, this.themeClass],
-                clsPrefix: mergedClsPrefix,
-                tmNodes: this.tmNodes,
-                style: [style, this.cssVars],
-                showArrow: this.showArrow,
-                arrowStyle: this.arrowStyle,
-                scrollable: this.scrollable,
-                onMouseenter,
-                onMouseleave
-            };
-            return h(NDropdownMenu, mergeProps(this.$attrs, dropdownProps, menuNodeProps));
-        };
-        const { mergedTheme } = this;
-        const popoverProps = {
-            show: this.mergedShow,
-            theme: mergedTheme.peers.Popover,
-            themeOverrides: mergedTheme.peerOverrides.Popover,
-            internalOnAfterLeave: this.handleAfterLeave,
-            internalRenderBody: renderPopoverBody,
-            onUpdateShow: this.doUpdateShow,
-            'onUpdate:show': undefined
-        };
-        return (h(NPopover, Object.assign({}, keep(this.$props, popoverPropKeys), popoverProps), {
-            trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
-        }));
-    }
-});

package/es/dropdown/src/DropdownDivider.js

@@ -1,13 +0,0 @@
-import { h, defineComponent } from 'vue';
-export default defineComponent({
-    name: 'DropdownDivider',
-    props: {
-        clsPrefix: {
-            type: String,
-            required: true
-        }
-    },
-    render() {
-        return h("div", { class: `${this.clsPrefix}-dropdown-divider` });
-    }
-});

package/es/dropdown/src/DropdownGroup.js

@@ -1,46 +0,0 @@
-import { defineComponent, Fragment, h } from 'vue';
-import { warn } from '../../_utils';
-// eslint-disable-next-line import/no-cycle
-import NDropdownOption from './DropdownOption';
-import NDropdownDivider from './DropdownDivider';
-import NDropdownGroupHeader from './DropdownGroupHeader';
-import { isDividerNode } from './utils';
-export default defineComponent({
-    name: 'NDropdownGroup',
-    props: {
-        clsPrefix: {
-            type: String,
-            required: true
-        },
-        tmNode: {
-            type: Object,
-            required: true
-        },
-        parentKey: {
-            type: [String, Number],
-            default: null
-        }
-    },
-    render() {
-        const { tmNode, parentKey, clsPrefix } = this;
-        const { children } = tmNode;
-        return (h(Fragment, null,
-            h(NDropdownGroupHeader, { clsPrefix: clsPrefix, tmNode: tmNode, key: tmNode.key }), children === null || children === void 0 ? void 0 :
-            children.map((child) => {
-                const { rawNode } = child;
-                if (rawNode.show === false)
-                    return null;
-                if (isDividerNode(rawNode)) {
-                    return h(NDropdownDivider, {
-                        clsPrefix,
-                        key: child.key
-                    });
-                }
-                if (child.isGroup) {
-                    warn('dropdown', '`group` node is not allowed to be put in `group` node.');
-                    return null;
-                }
-                return (h(NDropdownOption, { clsPrefix: clsPrefix, tmNode: child, parentKey: parentKey, key: child.key }));
-            })));
-    }
-});