naive-ui 2.31.0 → 2.32.0

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

@@ -0,0 +1,215 @@
+import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
+import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
+const animation = c([c('@keyframes legacy-transfer-slide-in-from-left', `
+ 0% {
+ transform: translateX(-150%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+ `), c('@keyframes legacy-transfer-slide-out-to-right', `
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(150%);
+ }
+ `), c('@keyframes legacy-transfer-slide-in-from-right', `
+ 0% {
+ transform: translateX(150%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+ `), c('@keyframes legacy-transfer-slide-out-to-left', `
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-150%);
+ }
+ `), c('@keyframes legacy-transfer-height-collapse', `
+ 0% {
+ max-height: var(--n-item-height);
+ }
+ 100% {
+ max-height: 0;
+ }
+ `), c('@keyframes legacy-transfer-height-expand', `
+ 0% {
+ max-height: 0;
+ }
+ 100% {
+ max-height: var(--n-item-height);
+ }
+ `)]);
+export default c([cB('legacy-transfer', `
+ display: flex;
+ width: var(--n-width);
+ font-size: var(--n-font-size);
+ height: 240px;
+ display: flex;
+ flex-wrap: nowrap;
+ `, [cB('legacy-transfer-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
+ `), cM('disabled', [cB('legacy-transfer-icon', {
+  color: 'var(--n-icon-color-disabled)'
+})]), cB('legacy-transfer-list', `
+ height: inherit;
+ display: flex;
+ flex-direction: column;
+ background-clip: padding-box;
+ width: calc(50% - 36px);
+ position: relative;
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-list-color);
+ `, [cE('border', `
+ 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('legacy-transfer-list-header', `
+ height: calc(var(--n-item-height) + 4px);
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ background-clip: padding-box;
+ border-radius: inherit;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ background-color: var(--n-header-color);
+ transition:
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ `, [cE('checkbox', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0 9px 0 14px;
+ `), cE('header', `
+ flex: 1;
+ line-height: 1;
+ font-weight: var(--n-header-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-header-text-color);
+ `, [cM('disabled', {
+  color: 'var(--n-header-text-color-disabled)'
+})]), cE('extra', `
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-extra-font-size);
+ justify-self: flex-end;
+ margin-right: 14px;
+ white-space: nowrap;
+ color: var(--n-header-extra-text-color);
+ `)]), cB('legacy-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('legacy-transfer-filter', `
+ padding: 0 8px 8px 8px;
+ box-sizing: border-box;
+ background-color: var(--n-header-color);
+ transition:
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-filter-divider-color);
+ `), cB('legacy-transfer-list-flex-container', `
+ flex: 1;
+ position: relative;
+ `, [cB('scrollbar', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: unset;
+ `, [cB('scrollbar-content', {
+  width: '100%'
+})]), cB('empty', `
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ `, [fadeInTransition()]), cB('legacy-transfer-list-content', `
+ padding: 0;
+ margin: 0;
+ position: relative;
+ `, [cM('transition-disabled', [cB('legacy-transfer-list-item', {
+  animation: 'none !important'
+})]), cB('legacy-transfer-list-item', `
+ height: var(--n-item-height);
+ max-height: var(--n-item-height);
+ transition:
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ position: relative;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ color: var(--n-item-text-color);
+ `, [cNotM('disabled', [c('&:hover', {
+  backgroundColor: 'var(--n-item-color-pending)'
+})]), cE('extra', `
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-right: 4px;
+ `), cE('checkbox', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0 9px 0 14px;
+ `), cM('disabled', `
+ cursor: not-allowed
+ background-color: #0000;
+ color: var(--n-item-text-color-disabled);
+ `), cM('source', {
+  animationFillMode: 'forwards'
+}, [c('&.item-enter-active', `
+ transform: translateX(150%);
+ animation-duration: .25s, .25s;
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
+ animation-delay: 0s, .25s;
+ animation-name: legacy-transfer-height-expand, legacy-transfer-slide-in-from-right;
+ `), c('&.item-leave-active', `
+ transform: translateX(-150%);
+ animation-duration: .25s, .25s;
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
+ animation-delay: .25s, 0s;
+ animation-name: legacy-transfer-height-collapse, legacy-transfer-slide-out-to-right;
+ `)]), cM('target', {
+  animationFillMode: 'forwards'
+}, [c('&.item-enter-active', `
+ transform: translateX(-150%);
+ animation-duration: .25s, .25s;
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
+ animation-delay: 0s, .25s;
+ animation-name: legacy-transfer-height-expand, legacy-transfer-slide-in-from-left;
+ `), c('&.item-leave-active', `
+ transform: translateX(150%);
+ animation-duration: .25s, .25s;
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
+ animation-delay: .25s, 0s;
+ animation-name: legacy-transfer-height-collapse, legacy-transfer-slide-out-to-left;
+ `)])])])])])]), cB('legacy-transfer-gap', {
+  width: '72px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+}), cB('button', [c('&:first-child', {
+  marginBottom: '12px'
+})])]), animation]);

package/es/legacy-transfer/src/use-transfer-data.d.ts

@@ -0,0 +1,41 @@
+import { Ref } from 'vue';
+import type { Option, OptionValue, Filter, CheckedStatus } from './interface';
+interface UseTransferDataProps {
+    defaultValue: OptionValue[] | null;
+    value?: OptionValue[] | null;
+    options: Option[];
+    filterable: boolean;
+    filter: Filter;
+}
+export declare function useTransferData(props: UseTransferDataProps, mergedDisabledRef: Ref<boolean>): {
+    uncontrolledValue: Ref<OptionValue[] | null>;
+    mergedValue: import("vue").ComputedRef<OptionValue[] | null>;
+    avlSrcValueSet: import("vue").ComputedRef<Set<OptionValue>>;
+    avlTgtValueSet: import("vue").ComputedRef<Set<any>>;
+    tgtOpts: import("vue").ComputedRef<any[]>;
+    srcOpts: import("vue").ComputedRef<Option[]>;
+    filteredSrcOpts: import("vue").ComputedRef<Option[]>;
+    filteredTgtOpts: import("vue").ComputedRef<any[]>;
+    srcCheckedValues: Ref<OptionValue[]>;
+    tgtCheckedValues: Ref<OptionValue[]>;
+    srcCheckedStatus: import("vue").ComputedRef<CheckedStatus>;
+    tgtCheckedStatus: import("vue").ComputedRef<{
+        checked: boolean;
+        indeterminate: boolean;
+        disabled: boolean;
+    } | {
+        checked: boolean;
+        indeterminate: boolean;
+        disabled?: undefined;
+    }>;
+    srcPattern: Ref<string>;
+    tgtPattern: Ref<string>;
+    isInputing: Ref<boolean>;
+    fromButtonDisabled: import("vue").ComputedRef<boolean>;
+    toButtonDisabled: import("vue").ComputedRef<boolean>;
+    handleInputFocus: () => void;
+    handleInputBlur: () => void;
+    handleTgtFilterUpdateValue: (value: string | null) => void;
+    handleSrcFilterUpdateValue: (value: string | null) => void;
+};
+export {};

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

@@ -0,0 +1,145 @@
+import { ref, computed, toRef } from 'vue';
+import { useMemo, useMergedState } from 'vooks';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useTransferData(props, mergedDisabledRef) {
+    const uncontrolledValueRef = ref(props.defaultValue);
+    const controlledValueRef = toRef(props, 'value');
+    const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+    const optMapRef = computed(() => {
+        const map = new Map();
+        (props.options || []).forEach((opt) => map.set(opt.value, opt));
+        return map;
+    });
+    const tgtValueSetRef = computed(() => new Set(mergedValueRef.value || []));
+    const srcOptsRef = computed(() => props.options.filter((option) => !tgtValueSetRef.value.has(option.value)));
+    const tgtOptsRef = computed(() => {
+        const optMap = optMapRef.value;
+        return (mergedValueRef.value || []).map((v) => optMap.get(v));
+    });
+    const srcPatternRef = ref('');
+    const tgtPatternRef = ref('');
+    const filteredSrcOptsRef = computed(() => {
+        if (!props.filterable)
+            return srcOptsRef.value;
+        const { filter } = props;
+        return srcOptsRef.value.filter((opt) => filter(srcPatternRef.value, opt, 'source'));
+    });
+    const filteredTgtOptsRef = computed(() => {
+        if (!props.filterable)
+            return tgtOptsRef.value;
+        const { filter } = props;
+        return tgtOptsRef.value.filter((opt) => filter(tgtPatternRef.value, opt, 'target'));
+    });
+    const avlSrcValueSetRef = computed(() => new Set(filteredSrcOptsRef.value
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value)));
+    const avlTgtValueSetRef = computed(() => new Set(filteredTgtOptsRef.value
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value)));
+    const srcCheckedValuesRef = ref([]);
+    const tgtCheckedValuesRef = ref([]);
+    const srcCheckedStatusRef = computed(() => {
+        const srcCheckedLength = srcCheckedValuesRef.value.filter((v) => avlSrcValueSetRef.value.has(v)).length;
+        const avlValueCount = avlSrcValueSetRef.value.size;
+        if (avlValueCount === 0) {
+            return {
+                checked: false,
+                indeterminate: false,
+                disabled: true
+            };
+        }
+        else if (srcCheckedLength === 0) {
+            return {
+                checked: false,
+                indeterminate: false
+            };
+        }
+        else if (srcCheckedLength === avlValueCount) {
+            return {
+                checked: true,
+                indeterminate: false
+            };
+        }
+        else {
+            return {
+                checked: false,
+                indeterminate: true
+            };
+        }
+    });
+    const tgtCheckedStatusRef = computed(() => {
+        const tgtCheckedLength = tgtCheckedValuesRef.value.filter((v) => avlTgtValueSetRef.value.has(v)).length;
+        const avlValueCount = avlTgtValueSetRef.value.size;
+        if (avlValueCount === 0) {
+            return {
+                checked: false,
+                indeterminate: false,
+                disabled: true
+            };
+        }
+        else if (tgtCheckedLength === 0) {
+            return {
+                checked: false,
+                indeterminate: false
+            };
+        }
+        else if (tgtCheckedLength === avlValueCount) {
+            return {
+                checked: true,
+                indeterminate: false
+            };
+        }
+        else {
+            return {
+                checked: false,
+                indeterminate: true
+            };
+        }
+    });
+    const fromButtonDisabledRef = useMemo(() => {
+        if (mergedDisabledRef.value)
+            return true;
+        return tgtCheckedValuesRef.value.length === 0;
+    });
+    const toButtonDisabledRef = useMemo(() => {
+        if (mergedDisabledRef.value)
+            return true;
+        return srcCheckedValuesRef.value.length === 0;
+    });
+    const isInputingRef = ref(false);
+    function handleInputFocus() {
+        isInputingRef.value = true;
+    }
+    function handleInputBlur() {
+        isInputingRef.value = false;
+    }
+    function handleSrcFilterUpdateValue(value) {
+        srcPatternRef.value = value !== null && value !== void 0 ? value : '';
+    }
+    function handleTgtFilterUpdateValue(value) {
+        tgtPatternRef.value = value !== null && value !== void 0 ? value : '';
+    }
+    return {
+        uncontrolledValue: uncontrolledValueRef,
+        mergedValue: mergedValueRef,
+        avlSrcValueSet: avlSrcValueSetRef,
+        avlTgtValueSet: avlTgtValueSetRef,
+        tgtOpts: tgtOptsRef,
+        srcOpts: srcOptsRef,
+        filteredSrcOpts: filteredSrcOptsRef,
+        filteredTgtOpts: filteredTgtOptsRef,
+        srcCheckedValues: srcCheckedValuesRef,
+        tgtCheckedValues: tgtCheckedValuesRef,
+        srcCheckedStatus: srcCheckedStatusRef,
+        tgtCheckedStatus: tgtCheckedStatusRef,
+        srcPattern: srcPatternRef,
+        tgtPattern: tgtPatternRef,
+        isInputing: isInputingRef,
+        fromButtonDisabled: fromButtonDisabledRef,
+        toButtonDisabled: toButtonDisabledRef,
+        handleInputFocus,
+        handleInputBlur,
+        handleTgtFilterUpdateValue,
+        handleSrcFilterUpdateValue
+    };
+}

package/es/legacy-transfer/styles/_common.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    extraFontSize: string;
+    width: string;
+};
+export default _default;

package/es/legacy-transfer/styles/_common.js

@@ -0,0 +1,4 @@
+export default {
+    extraFontSize: '12px',
+    width: '440px'
+};

package/es/legacy-transfer/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { TransferTheme } from './light';
+declare const transferDark: TransferTheme;
+export default transferDark;

package/es/legacy-transfer/styles/dark.js

@@ -0,0 +1,27 @@
+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 { iconColorDisabled, iconColor, fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, heightSmall, borderRadius, inputColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, hoverColor } = vars;
+        return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightSmall, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
+            fontSizeMedium,
+            fontSizeLarge,
+            borderRadius, borderColor: '#0000', listColor: inputColor, headerColor: tableHeaderColor, titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor2, filterDividerColor: '#0000', itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, iconColor,
+            iconColorDisabled });
+    }
+};
+export default transferDark;

package/es/legacy-transfer/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as legacyTransferDark } from './dark';
+export { default as legacyTransferLight } from './light';
+export type { TransferTheme as LegacyTransferTheme, TransferThemeVars as LegacyTransferThemeVars } from './light';

package/es/legacy-transfer/styles/index.js

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