naive-ui 2.38.2 → 2.40.0

package/es/_internal/scrollbar/src/Scrollbar.mjs

@@ -1,10 +1,10 @@
-import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergeProps, Transition, watchEffect, Fragment } from 'vue';
-import { on, off } from 'evtd';
+import { Fragment, Transition, computed, defineComponent, h, mergeProps, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { off, on } from 'evtd';
 import { VResizeObserver } from 'vueuc';
 import { useIsIos } from 'vooks';
 import { depx, getPreciseEventTarget } from 'seemly';
-import { useConfig, useTheme, useThemeClass, useRtl } from "../../../_mixins/index.mjs";
-import { rtlInset, useReactivated, Wrapper } from "../../../_utils/index.mjs";
+import { useConfig, useRtl, useTheme, useThemeClass } from "../../../_mixins/index.mjs";
+import { Wrapper, rtlInset, useReactivated } from "../../../_utils/index.mjs";
 import { scrollbarLight } from "../styles/index.mjs";
 import style from "./styles/index.cssr.mjs";
 const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), {
@@ -36,7 +36,15 @@ const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), {
   onWheel: Function,
   onResize: Function,
   internalOnUpdateScrollLeft: Function,
-  internalHoistYRail: Boolean
+  internalHoistYRail: Boolean,
+  yPlacement: {
+    type: String,
+    default: 'right'
+  },
+  xPlacement: {
+    type: String,
+    default: 'bottom'
+  }
 });
 const Scrollbar = defineComponent({
   name: 'Scrollbar',
@@ -206,29 +214,6 @@ const Scrollbar = defineComponent({
       if (content) return content();
       return contentRef.value;
     });
-    const activateState = useReactivated(() => {
-      // Only restore for builtin container & content
-      if (!props.container) {
-        // remount
-        scrollTo({
-          top: containerScrollTopRef.value,
-          left: containerScrollLeftRef.value
-        });
-      }
-    });
-    // methods
-    const handleContentResize = () => {
-      if (activateState.isDeactivated) return;
-      sync();
-    };
-    const handleContainerResize = e => {
-      if (activateState.isDeactivated) return;
-      const {
-        onResize
-      } = props;
-      if (onResize) onResize(e);
-      sync();
-    };
     const scrollTo = (options, y) => {
       if (!props.scrollable) return;
       if (typeof options === 'number') {
@@ -258,6 +243,29 @@ const Scrollbar = defineComponent({
         scrollToPosition(0, 0, 0, false, behavior);
       }
     };
+    const activateState = useReactivated(() => {
+      // Only restore for builtin container & content
+      if (!props.container) {
+        // remount
+        scrollTo({
+          top: containerScrollTopRef.value,
+          left: containerScrollLeftRef.value
+        });
+      }
+    });
+    // methods
+    const handleContentResize = () => {
+      if (activateState.isDeactivated) return;
+      sync();
+    };
+    const handleContainerResize = e => {
+      if (activateState.isDeactivated) return;
+      const {
+        onResize
+      } = props;
+      if (onResize) onResize(e);
+      sync();
+    };
     const scrollBy = (options, y) => {
       if (!props.scrollable) return;
       const {
@@ -598,8 +606,10 @@ const Scrollbar = defineComponent({
           height,
           width,
           borderRadius,
-          railInsetHorizontal,
-          railInsetVertical,
+          railInsetHorizontalTop,
+          railInsetHorizontalBottom,
+          railInsetVerticalRight,
+          railInsetVerticalLeft,
           railColor
         }
       } = themeRef.value;
@@ -610,8 +620,10 @@ const Scrollbar = defineComponent({
         '--n-scrollbar-border-radius': borderRadius,
         '--n-scrollbar-width': width,
         '--n-scrollbar-height': height,
-        '--n-scrollbar-rail-inset-horizontal': railInsetHorizontal,
-        '--n-scrollbar-rail-inset-vertical': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? rtlInset(railInsetVertical) : railInsetVertical,
+        '--n-scrollbar-rail-inset-horizontal-top': railInsetHorizontalTop,
+        '--n-scrollbar-rail-inset-horizontal-bottom': railInsetHorizontalBottom,
+        '--n-scrollbar-rail-inset-vertical-right': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? rtlInset(railInsetVerticalRight) : railInsetVerticalRight,
+        '--n-scrollbar-rail-inset-vertical-left': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? rtlInset(railInsetVerticalLeft) : railInsetVerticalLeft,
         '--n-scrollbar-rail-color': railColor
       };
     });
@@ -659,20 +671,21 @@ const Scrollbar = defineComponent({
       mergedClsPrefix,
       triggerDisplayManually,
       rtlEnabled,
-      internalHoistYRail
+      internalHoistYRail,
+      yPlacement,
+      xPlacement,
+      xScrollable
     } = this;
     if (!this.scrollable) return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
     const triggerIsNone = this.trigger === 'none';
     const createYRail = (className, style) => {
       return h("div", {
         ref: "yRailRef",
-        class: [`${mergedClsPrefix}-scrollbar-rail`, `${mergedClsPrefix}-scrollbar-rail--vertical`, className],
+        class: [`${mergedClsPrefix}-scrollbar-rail`, `${mergedClsPrefix}-scrollbar-rail--vertical`, `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`, className],
         "data-scrollbar-rail": true,
         style: [style || '', this.verticalRailStyle],
         "aria-hidden": true
-      }, h(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      triggerIsNone ? Wrapper : Transition, triggerIsNone ? null : {
+      }, h(triggerIsNone ? Wrapper : Transition, triggerIsNone ? null : {
         name: 'fade-in-transition'
       }, {
         default: () => this.needYBar && this.isShowYBar && !this.isIos ? h("div", {
@@ -713,15 +726,13 @@ const Scrollbar = defineComponent({
           }, this.contentStyle],
           class: [`${mergedClsPrefix}-scrollbar-content`, this.contentClass]
         }, $slots)
-      })), internalHoistYRail ? null : createYRail(undefined, undefined), this.xScrollable && h("div", {
+      })), internalHoistYRail ? null : createYRail(undefined, undefined), xScrollable && h("div", {
         ref: "xRailRef",
-        class: [`${mergedClsPrefix}-scrollbar-rail`, `${mergedClsPrefix}-scrollbar-rail--horizontal`],
+        class: [`${mergedClsPrefix}-scrollbar-rail`, `${mergedClsPrefix}-scrollbar-rail--horizontal`, `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`],
         style: this.horizontalRailStyle,
         "data-scrollbar-rail": true,
         "aria-hidden": true
-      }, h(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      triggerIsNone ? Wrapper : Transition, triggerIsNone ? null : {
+      }, h(triggerIsNone ? Wrapper : Transition, triggerIsNone ? null : {
         name: 'fade-in-transition'
       }, {
         default: () => this.needXBar && this.isShowXBar && !this.isIos ? h("div", {

package/es/_internal/scrollbar/src/styles/index.cssr.mjs

@@ -1,4 +1,4 @@
-import { cB, c, cM, cE } from "../../../../_utils/cssr/index.mjs";
+import { c, cB, cE, cM } from "../../../../_utils/cssr/index.mjs";
 import { fadeInTransition } from "../../../../_styles/transitions/fade-in.cssr.mjs";
 // vars:
 // --n-scrollbar-bezier
@@ -39,20 +39,26 @@ cB('scrollbar-content', `
  background: var(--n-scrollbar-rail-color);
  -webkit-user-select: none;
  `, [cM('horizontal', `
- inset: var(--n-scrollbar-rail-inset-horizontal);
  height: var(--n-scrollbar-height);
  `, [c('>', [cE('scrollbar', `
  height: var(--n-scrollbar-height);
  border-radius: var(--n-scrollbar-border-radius);
  right: 0;
- `)])]), cM('vertical', `
- inset: var(--n-scrollbar-rail-inset-vertical);
+ `)])]), cM('horizontal--top', `
+ inset: var(--n-scrollbar-rail-inset-horizontal-top); 
+ `), cM('horizontal--bottom', `
+ inset: var(--n-scrollbar-rail-inset-horizontal-bottom); 
+ `), cM('vertical', `
  width: var(--n-scrollbar-width);
  `, [c('>', [cE('scrollbar', `
  width: var(--n-scrollbar-width);
  border-radius: var(--n-scrollbar-border-radius);
  bottom: 0;
- `)])]), cM('disabled', [c('>', [cE('scrollbar', 'pointer-events: none;')])]), c('>', [cE('scrollbar', `
+ `)])]), cM('vertical--left', `
+ inset: var(--n-scrollbar-rail-inset-vertical-left); 
+ `), cM('vertical--right', `
+ inset: var(--n-scrollbar-rail-inset-vertical-right); 
+ `), cM('disabled', [c('>', [cE('scrollbar', 'pointer-events: none;')])]), c('>', [cE('scrollbar', `
  z-index: 1;
  position: absolute;
  cursor: pointer;

package/es/_internal/scrollbar/src/styles/rtl.cssr.mjs

@@ -1,4 +1,4 @@
-import { cB, c, cM, cE } from "../../../../_utils/cssr/index.mjs";
+import { c, cB, cE, cM } from "../../../../_utils/cssr/index.mjs";
 export default cB('scrollbar', [cM('rtl', `
  direction: rtl;
  `, [c('>', [cB('scrollbar-rail', [cM('horizontal', [c('>', [cE('scrollbar', `

package/es/_internal/scrollbar/styles/common.d.ts

@@ -1,5 +1,7 @@
 export declare const commonVars: {
-    railInsetHorizontal: string;
-    railInsetVertical: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
     railColor: string;
 };

package/es/_internal/scrollbar/styles/common.mjs

@@ -1,5 +1,7 @@
 export const commonVars = {
-  railInsetHorizontal: 'auto 2px 4px 2px',
-  railInsetVertical: '2px 4px 2px auto',
+  railInsetHorizontalBottom: 'auto 2px 4px 2px',
+  railInsetHorizontalTop: '4px 2px auto 2px',
+  railInsetVerticalRight: '2px 4px 2px auto',
+  railInsetVerticalLeft: '2px auto 2px 4px',
   railColor: 'transparent'
 };

package/es/_internal/scrollbar/styles/light.d.ts

@@ -1,13 +1,15 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 import type { Theme } from '../../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+export declare function self(vars: ThemeCommonVars): {
     height: string;
     width: string;
     borderRadius: string;
     color: string;
     colorHover: string;
-    railInsetHorizontal: string;
-    railInsetVertical: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
     railColor: string;
 };
 export type ScrollbarThemeVars = ReturnType<typeof self>;

package/es/_internal/scrollbar/styles/light.mjs

@@ -1,6 +1,6 @@
 import { commonLight } from "../../../_styles/common/index.mjs";
 import { commonVars } from "./common.mjs";
-export const self = vars => {
+export function self(vars) {
   const {
     scrollbarColor,
     scrollbarColorHover,
@@ -15,7 +15,7 @@ export const self = vars => {
     color: scrollbarColor,
     colorHover: scrollbarColorHover
   });
-};
+}
 const scrollbarLight = {
   name: 'Scrollbar',
   common: commonLight,

package/es/_internal/select-menu/src/SelectGroupHeader.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<SelectGroupOption, SelectGroupOption, SelectGroupOption>>;
+        type: PropType<TreeNode<SelectGroupOption>>;
         required: true;
     };
 }, {
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<SelectGroupOption, SelectGroupOption, SelectGroupOption>>;
+        type: PropType<TreeNode<SelectGroupOption>>;
         required: true;
     };
 }>>, {}, {}>;

package/es/_internal/select-menu/src/SelectGroupHeader.mjs

@@ -1,4 +1,4 @@
-import { h, defineComponent, inject } from 'vue';
+import { defineComponent, h, inject } from 'vue';
 import { render } from "../../../_utils/index.mjs";
 import { internalSelectionMenuInjectionKey } from "./interface.mjs";
 export default defineComponent({
@@ -19,7 +19,6 @@ export default defineComponent({
       renderOptionRef,
       labelFieldRef,
       nodePropsRef
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(internalSelectionMenuInjectionKey);
     return {
       labelField: labelFieldRef,