naive-ui 2.31.0 → 2.32.0

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

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr");
+
+const animation = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes legacy-transfer-slide-in-from-left', `
+ 0% {
+ transform: translateX(-150%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+ `), (0, cssr_1.c)('@keyframes legacy-transfer-slide-out-to-right', `
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(150%);
+ }
+ `), (0, cssr_1.c)('@keyframes legacy-transfer-slide-in-from-right', `
+ 0% {
+ transform: translateX(150%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+ `), (0, cssr_1.c)('@keyframes legacy-transfer-slide-out-to-left', `
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-150%);
+ }
+ `), (0, cssr_1.c)('@keyframes legacy-transfer-height-collapse', `
+ 0% {
+ max-height: var(--n-item-height);
+ }
+ 100% {
+ max-height: 0;
+ }
+ `), (0, cssr_1.c)('@keyframes legacy-transfer-height-expand', `
+ 0% {
+ max-height: 0;
+ }
+ 100% {
+ max-height: var(--n-item-height);
+ }
+ `)]);
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('legacy-transfer', `
+ display: flex;
+ width: var(--n-width);
+ font-size: var(--n-font-size);
+ height: 240px;
+ display: flex;
+ flex-wrap: nowrap;
+ `, [(0, cssr_1.cB)('legacy-transfer-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
+ `), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('legacy-transfer-icon', {
+  color: 'var(--n-icon-color-disabled)'
+})]), (0, cssr_1.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);
+ `, [(0, cssr_1.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;
+ `), (0, cssr_1.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);
+ `, [(0, cssr_1.cE)('checkbox', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0 9px 0 14px;
+ `), (0, cssr_1.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);
+ `, [(0, cssr_1.cM)('disabled', {
+  color: 'var(--n-header-text-color-disabled)'
+})]), (0, cssr_1.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);
+ `)]), (0, cssr_1.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;
+ `, [(0, cssr_1.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);
+ `), (0, cssr_1.cB)('legacy-transfer-list-flex-container', `
+ flex: 1;
+ position: relative;
+ `, [(0, cssr_1.cB)('scrollbar', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: unset;
+ `, [(0, cssr_1.cB)('scrollbar-content', {
+  width: '100%'
+})]), (0, cssr_1.cB)('empty', `
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ `, [(0, fade_in_cssr_1.fadeInTransition)()]), (0, cssr_1.cB)('legacy-transfer-list-content', `
+ padding: 0;
+ margin: 0;
+ position: relative;
+ `, [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('legacy-transfer-list-item', {
+  animation: 'none !important'
+})]), (0, cssr_1.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);
+ `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
+  backgroundColor: 'var(--n-item-color-pending)'
+})]), (0, cssr_1.cE)('extra', `
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-right: 4px;
+ `), (0, cssr_1.cE)('checkbox', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0 9px 0 14px;
+ `), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed
+ background-color: #0000;
+ color: var(--n-item-text-color-disabled);
+ `), (0, cssr_1.cM)('source', {
+  animationFillMode: 'forwards'
+}, [(0, cssr_1.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;
+ `), (0, cssr_1.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;
+ `)]), (0, cssr_1.cM)('target', {
+  animationFillMode: 'forwards'
+}, [(0, cssr_1.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;
+ `), (0, cssr_1.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;
+ `)])])])])])]), (0, cssr_1.cB)('legacy-transfer-gap', {
+  width: '72px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+}), (0, cssr_1.cB)('button', [(0, cssr_1.c)('&:first-child', {
+  marginBottom: '12px'
+})])]), animation]);

package/lib/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/lib/legacy-transfer/src/use-transfer-data.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransferData = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function useTransferData(props, mergedDisabledRef) {
+    const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+    const controlledValueRef = (0, vue_1.toRef)(props, 'value');
+    const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+    const optMapRef = (0, vue_1.computed)(() => {
+        const map = new Map();
+        (props.options || []).forEach((opt) => map.set(opt.value, opt));
+        return map;
+    });
+    const tgtValueSetRef = (0, vue_1.computed)(() => new Set(mergedValueRef.value || []));
+    const srcOptsRef = (0, vue_1.computed)(() => props.options.filter((option) => !tgtValueSetRef.value.has(option.value)));
+    const tgtOptsRef = (0, vue_1.computed)(() => {
+        const optMap = optMapRef.value;
+        return (mergedValueRef.value || []).map((v) => optMap.get(v));
+    });
+    const srcPatternRef = (0, vue_1.ref)('');
+    const tgtPatternRef = (0, vue_1.ref)('');
+    const filteredSrcOptsRef = (0, vue_1.computed)(() => {
+        if (!props.filterable)
+            return srcOptsRef.value;
+        const { filter } = props;
+        return srcOptsRef.value.filter((opt) => filter(srcPatternRef.value, opt, 'source'));
+    });
+    const filteredTgtOptsRef = (0, vue_1.computed)(() => {
+        if (!props.filterable)
+            return tgtOptsRef.value;
+        const { filter } = props;
+        return tgtOptsRef.value.filter((opt) => filter(tgtPatternRef.value, opt, 'target'));
+    });
+    const avlSrcValueSetRef = (0, vue_1.computed)(() => new Set(filteredSrcOptsRef.value
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value)));
+    const avlTgtValueSetRef = (0, vue_1.computed)(() => new Set(filteredTgtOptsRef.value
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value)));
+    const srcCheckedValuesRef = (0, vue_1.ref)([]);
+    const tgtCheckedValuesRef = (0, vue_1.ref)([]);
+    const srcCheckedStatusRef = (0, vue_1.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 = (0, vue_1.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 = (0, vooks_1.useMemo)(() => {
+        if (mergedDisabledRef.value)
+            return true;
+        return tgtCheckedValuesRef.value.length === 0;
+    });
+    const toButtonDisabledRef = (0, vooks_1.useMemo)(() => {
+        if (mergedDisabledRef.value)
+            return true;
+        return srcCheckedValuesRef.value.length === 0;
+    });
+    const isInputingRef = (0, vue_1.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
+    };
+}
+exports.useTransferData = useTransferData;

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    extraFontSize: '12px',
+    width: '440px'
+};

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

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

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _common_1 = __importDefault(require("./_common"));
+const styles_1 = require("../../checkbox/styles");
+const styles_2 = require("../../_internal/scrollbar/styles");
+const styles_3 = require("../../input/styles");
+const common_1 = require("../../_styles/common");
+const styles_4 = require("../../empty/styles");
+const styles_5 = require("../../button/styles");
+const transferDark = {
+    name: 'Transfer',
+    common: common_1.commonDark,
+    peers: {
+        Checkbox: styles_1.checkboxDark,
+        Scrollbar: styles_2.scrollbarDark,
+        Input: styles_3.inputDark,
+        Empty: styles_4.emptyDark,
+        Button: styles_5.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({}, _common_1.default), { 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 });
+    }
+};
+exports.default = transferDark;

package/lib/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/lib/legacy-transfer/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.legacyTransferLight = exports.legacyTransferDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "legacyTransferDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "legacyTransferLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });