naive-ui 2.35.0 → 2.37.0

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

@@ -1,151 +0,0 @@
-import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
-// --n-close-size
-// --n-close-icon-size
-// --n-close-color-hover
-// --n-close-color-pressed
-// --n-close-icon-color
-// --n-close-icon-color-hover
-// --n-close-icon-color-pressed
-export default cB('transfer', `
- width: 100%;
- font-size: var(--n-font-size);
- height: 300px;
- display: flex;
- flex-wrap: nowrap;
- word-break: break-word;
-`, [cM('disabled', [cB('transfer-list', [cB('transfer-list-header', [cE('title', `
- color: var(--n-header-text-color-disabled);
- `), cE('extra', `
- color: var(--n-header-extra-text-color-disabled);
- `)])])]), cB('transfer-list', `
- flex: 1;
- min-width: 0;
- height: inherit;
- display: flex;
- flex-direction: column;
- background-clip: padding-box;
- position: relative;
- transition: background-color .3s var(--n-bezier);
- background-color: var(--n-list-color);
- `, [cM('source', `
- border-top-left-radius: var(--n-border-radius);
- border-bottom-left-radius: var(--n-border-radius);
- `, [cE('border', 'border-right: 1px solid var(--n-divider-color);')]), cM('target', `
- border-top-right-radius: var(--n-border-radius);
- border-bottom-right-radius: var(--n-border-radius);
- `, [cE('border', 'border-left: none;')]), cE('border', `
- padding: 0 12px;
- border: 1px solid var(--n-border-color);
- transition: border-color .3s var(--n-bezier);
- pointer-events: none;
- border-radius: inherit;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- `), cB('transfer-list-header', `
- min-height: var(--n-header-height);
- box-sizing: border-box;
- display: flex;
- padding: 12px 12px 10px 12px;
- align-items: center;
- background-clip: padding-box;
- border-radius: inherit;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- line-height: 1.5;
- transition:
- border-color .3s var(--n-bezier),
- background-color .3s var(--n-bezier);
- `, [c('> *:not(:first-child)', `
- margin-left: 8px;
- `), cE('title', `
- flex: 1;
- min-width: 0;
- line-height: 1.5;
- font-size: var(--n-header-font-size);
- font-weight: var(--n-header-font-weight);
- transition: color .3s var(--n-bezier);
- color: var(--n-header-text-color);
- `), cE('button', `
- position: relative;
- `), cE('extra', `
- transition: color .3s var(--n-bezier);
- font-size: var(--n-extra-font-size);
- margin-right: 0;
- white-space: nowrap;
- color: var(--n-header-extra-text-color);
- `)]), cB('transfer-list-body', `
- flex-basis: 0;
- flex-grow: 1;
- box-sizing: border-box;
- position: relative;
- display: flex;
- flex-direction: column;
- border-radius: inherit;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- `, [cB('transfer-filter', `
- padding: 4px 12px 8px 12px;
- box-sizing: border-box;
- transition:
- border-color .3s var(--n-bezier),
- background-color .3s var(--n-bezier);
- `), cB('transfer-list-flex-container', `
- flex: 1;
- position: relative;
- `, [cB('scrollbar', `
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- height: unset;
- `), cB('empty', `
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateY(-50%) translateX(-50%);
- `), cB('transfer-list-content', `
- padding: 0;
- margin: 0;
- position: relative;
- `, [cB('transfer-list-item', `
- padding: 0 12px;
- min-height: var(--n-item-height);
- display: flex;
- align-items: center;
- color: var(--n-item-text-color);
- position: relative;
- transition: color .3s var(--n-bezier);
- `, [cE('background', `
- position: absolute;
- left: 4px;
- right: 4px;
- top: 0;
- bottom: 0;
- border-radius: var(--n-border-radius);
- transition: background-color .3s var(--n-bezier);
- `), cE('checkbox', `
- position: relative;
- margin-right: 8px;
- `), cE('close', `
- opacity: 0;
- pointer-events: none;
- position: relative;
- transition:
- opacity .3s var(--n-bezier),
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- `), cE('label', `
- position: relative;
- min-width: 0;
- flex-grow: 1;
- `), cM('source', 'cursor: pointer;'), cM('disabled', `
- cursor: not-allowed;
- color: var(--n-item-text-color-disabled);
- `), cNotM('disabled', [c('&:hover', [cE('background', 'background-color: var(--n-item-color-pending);'), cE('close', `
- opacity: 1;
- pointer-events: all;
- `)])])])])])])])]);

package/es/transfer/src/use-transfer-data.js

@@ -1,121 +0,0 @@
-import { ref, computed, toRef } from 'vue';
-import { useMergedState } from 'vooks';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useTransferData(props) {
-    const uncontrolledValueRef = ref(props.defaultValue);
-    const mergedValueRef = useMergedState(toRef(props, 'value'), uncontrolledValueRef);
-    const optionsMapRef = computed(() => {
-        const map = new Map();
-        (props.options || []).forEach((opt) => map.set(opt.value, opt));
-        return map;
-    });
-    const targetValueSetRef = computed(() => new Set(mergedValueRef.value || []));
-    const targetOptionsRef = computed(() => {
-        const optionMap = optionsMapRef.value;
-        const targetOptions = [];
-        (mergedValueRef.value || []).forEach((v) => {
-            const option = optionMap.get(v);
-            if (option) {
-                targetOptions.push(option);
-            }
-        });
-        return targetOptions;
-    });
-    const srcPatternRef = ref('');
-    const tgtPatternRef = ref('');
-    const mergedSrcFilterableRef = computed(() => {
-        return props.sourceFilterable || !!props.filterable;
-    });
-    const filteredSrcOptionsRef = computed(() => {
-        const { showSelected, options, filter } = props;
-        if (!mergedSrcFilterableRef.value) {
-            if (showSelected) {
-                return options;
-            }
-            else {
-                return options.filter((option) => !targetValueSetRef.value.has(option.value));
-            }
-        }
-        return options.filter((option) => {
-            return (filter(srcPatternRef.value, option, 'source') &&
-                (showSelected || !targetValueSetRef.value.has(option.value)));
-        });
-    });
-    const filteredTgtOptionsRef = computed(() => {
-        if (!props.targetFilterable)
-            return targetOptionsRef.value;
-        const { filter } = props;
-        return targetOptionsRef.value.filter((opt) => filter(tgtPatternRef.value, opt, 'target'));
-    });
-    const mergedValueSetRef = computed(() => {
-        const { value } = mergedValueRef;
-        if (value === null)
-            return new Set();
-        return new Set(value);
-    });
-    const valueSetForCheckAllRef = computed(() => {
-        const values = new Set(mergedValueSetRef.value);
-        filteredSrcOptionsRef.value.forEach((option) => {
-            if (!option.disabled && !values.has(option.value)) {
-                values.add(option.value);
-            }
-        });
-        return values;
-    });
-    const valueSetForUncheckAllRef = computed(() => {
-        const values = new Set(mergedValueSetRef.value);
-        filteredSrcOptionsRef.value.forEach((option) => {
-            if (!option.disabled && values.has(option.value)) {
-                values.delete(option.value);
-            }
-        });
-        return values;
-    });
-    const valueSetForClearRef = computed(() => {
-        const values = new Set(mergedValueSetRef.value);
-        filteredTgtOptionsRef.value.forEach((option) => {
-            if (!option.disabled) {
-                values.delete(option.value);
-            }
-        });
-        return values;
-    });
-    const canNotSelectAnythingRef = computed(() => {
-        return filteredSrcOptionsRef.value.every((option) => option.disabled);
-    });
-    const allCheckedRef = computed(() => {
-        if (!filteredSrcOptionsRef.value.length) {
-            return false;
-        }
-        const mergedValueSet = mergedValueSetRef.value;
-        return filteredSrcOptionsRef.value.every((option) => option.disabled || mergedValueSet.has(option.value));
-    });
-    const canBeClearedRef = computed(() => {
-        return filteredTgtOptionsRef.value.some((option) => !option.disabled);
-    });
-    function handleSrcFilterUpdateValue(value) {
-        srcPatternRef.value = value !== null && value !== void 0 ? value : '';
-    }
-    function handleTgtFilterUpdateValue(value) {
-        tgtPatternRef.value = value !== null && value !== void 0 ? value : '';
-    }
-    return {
-        uncontrolledValueRef,
-        mergedValueRef,
-        targetValueSetRef,
-        valueSetForCheckAllRef,
-        valueSetForUncheckAllRef,
-        valueSetForClearRef,
-        filteredTgtOptionsRef,
-        filteredSrcOptionsRef,
-        targetOptionsRef,
-        canNotSelectAnythingRef,
-        canBeClearedRef,
-        allCheckedRef,
-        srcPatternRef,
-        tgtPatternRef,
-        mergedSrcFilterableRef,
-        handleSrcFilterUpdateValue,
-        handleTgtFilterUpdateValue
-    };
-}

package/es/transfer/styles/_common.js

@@ -1,13 +0,0 @@
-export default {
-    extraFontSizeSmall: '12px',
-    extraFontSizeMedium: '12px',
-    extraFontSizeLarge: '14px',
-    titleFontSizeSmall: '14px',
-    titleFontSizeMedium: '16px',
-    titleFontSizeLarge: '16px',
-    closeSize: '20px',
-    closeIconSize: '16px',
-    headerHeightSmall: '44px',
-    headerHeightMedium: '44px',
-    headerHeightLarge: '50px'
-};

package/es/transfer/styles/dark.js

@@ -1,31 +0,0 @@
-import commonVariables from './_common';
-import { checkboxDark } from '../../checkbox/styles';
-import { scrollbarDark } from '../../_internal/scrollbar/styles';
-import { inputDark } from '../../input/styles';
-import { commonDark } from '../../_styles/common';
-import { emptyDark } from '../../empty/styles';
-import { buttonDark } from '../../button/styles';
-const transferDark = {
-    name: 'Transfer',
-    common: commonDark,
-    peers: {
-        Checkbox: checkboxDark,
-        Scrollbar: scrollbarDark,
-        Input: inputDark,
-        Empty: emptyDark,
-        Button: buttonDark
-    },
-    self(vars) {
-        const { fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, borderRadius, inputColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, textColor3, hoverColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, dividerColor } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightMedium, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
-            fontSizeMedium,
-            fontSizeLarge,
-            borderRadius,
-            dividerColor, borderColor: '#0000', listColor: inputColor, headerColor: tableHeaderColor, titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor3, extraTextColorDisabled: textColorDisabled, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, closeColorHover,
-            closeColorPressed,
-            closeIconColor,
-            closeIconColorHover,
-            closeIconColorPressed });
-    }
-};
-export default transferDark;

package/es/transfer/styles/index.js

@@ -1,2 +0,0 @@
-export { default as transferDark } from './dark';
-export { default as transferLight } from './light';

package/es/transfer/styles/light.js

@@ -1,33 +0,0 @@
-import commonVariables from './_common';
-import { composite } from 'seemly';
-import { checkboxLight } from '../../checkbox/styles';
-import { scrollbarLight } from '../../_internal/scrollbar/styles';
-import { inputLight } from '../../input/styles';
-import { commonLight } from '../../_styles/common';
-import { emptyLight } from '../../empty/styles';
-import { buttonLight } from '../../button/styles';
-import { createTheme } from '../../_mixins';
-const self = (vars) => {
-    const { fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, borderRadius, cardColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, textColor3, borderColor, hoverColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightMedium, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
-        fontSizeMedium,
-        fontSizeLarge,
-        borderRadius, dividerColor: borderColor, borderColor, listColor: cardColor, headerColor: composite(cardColor, tableHeaderColor), titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor3, extraTextColorDisabled: textColorDisabled, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, closeColorHover,
-        closeColorPressed,
-        closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed });
-};
-const transferLight = createTheme({
-    name: 'Transfer',
-    common: commonLight,
-    peers: {
-        Checkbox: checkboxLight,
-        Scrollbar: scrollbarLight,
-        Input: inputLight,
-        Empty: emptyLight,
-        Button: buttonLight
-    },
-    self
-});
-export default transferLight;

package/es/tree/index.js

@@ -1 +0,0 @@
-export { default as NTree, treeProps } from './src/Tree';

package/es/tree/src/MotionWrapper.js

@@ -1,37 +0,0 @@
-import { h, defineComponent } from 'vue';
-import { pxfy } from 'seemly';
-import FadeInExpandTransition from '../../_internal/fade-in-expand-transition';
-import TreeNode from './TreeNode';
-export default defineComponent({
-    name: 'TreeMotionWrapper',
-    props: {
-        clsPrefix: {
-            type: String,
-            required: true
-        },
-        height: Number,
-        nodes: {
-            type: Array,
-            required: true
-        },
-        mode: {
-            type: String,
-            required: true
-        },
-        onAfterEnter: {
-            type: Function,
-            required: true
-        }
-    },
-    render() {
-        const { clsPrefix } = this;
-        return (h(FadeInExpandTransition, { onAfterEnter: this.onAfterEnter, appear: true, reverse: this.mode === 'collapse' }, {
-            default: () => (h("div", { class: [
-                    `${clsPrefix}-tree-motion-wrapper`,
-                    `${clsPrefix}-tree-motion-wrapper--${this.mode}`
-                ], style: {
-                    height: pxfy(this.height)
-                } }, this.nodes.map((node) => (h(TreeNode, { clsPrefix: clsPrefix, tmNode: node })))))
-        }));
-    }
-});