naive-ui 2.22.0 → 2.24.0

package/es/popover/src/PopoverBody.js

@@ -1,5 +1,5 @@
 import { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide, renderSlot, Fragment } from 'vue';
-import { VFollower } from 'vueuc';
+import { VFollower, VFocusTrap } from 'vueuc';
 import { clickoutside, mousemoveoutside } from 'vdirs';
 import { useTheme, useConfig } from '../../_mixins';
 import { formatLength, useAdjustedTo } from '../../_utils';
@@ -8,7 +8,7 @@ import style from './styles/index.cssr';
 import { popoverBodyInjectionKey } from './interface';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
-export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], 
+export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], internalTrapFocus: Boolean, 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -61,21 +61,21 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { space, spaceArrow, padding, fontSize, textColor, dividerColor, color, boxShadow, borderRadius, arrowHeight, arrowOffset, arrowOffsetVertical } } = themeRef.value;
             return {
-                '--box-shadow': boxShadow,
-                '--bezier': cubicBezierEaseInOut,
-                '--bezier-ease-in': cubicBezierEaseIn,
-                '--bezier-ease-out': cubicBezierEaseOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--color': color,
-                '--divider-color': dividerColor,
-                '--border-radius': borderRadius,
-                '--arrow-height': arrowHeight,
-                '--arrow-offset': arrowOffset,
-                '--arrow-offset-vertical': arrowOffsetVertical,
-                '--padding': padding,
-                '--space': space,
-                '--space-arrow': spaceArrow
+                '--n-box-shadow': boxShadow,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-bezier-ease-in': cubicBezierEaseIn,
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-divider-color': dividerColor,
+                '--n-border-radius': borderRadius,
+                '--n-arrow-height': arrowHeight,
+                '--n-arrow-offset': arrowOffset,
+                '--n-arrow-offset-vertical': arrowOffsetVertical,
+                '--n-padding': padding,
+                '--n-space': space,
+                '--n-space-arrow': spaceArrow
             };
         });
         NPopover.setBodyInstance({
@@ -98,7 +98,6 @@ export default defineComponent({
         });
         function syncPosition() {
             var _a;
-            // eslint-disable-next-line no-unused-expressions
             (_a = followerRef.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
         }
         function handleMouseEnter(e) {
@@ -136,6 +135,18 @@ export default defineComponent({
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
             if (!renderBody) {
                 const { value: extraClass } = NPopover.extraClassRef;
+                const { internalTrapFocus } = props;
+                const renderContentInnerNode = () => [
+                    slots.header ? (h(Fragment, null,
+                        h("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
+                        h("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : (renderSlot(slots, 'default')),
+                    props.showArrow
+                        ? renderArrow({
+                            arrowStyle: props.arrowStyle,
+                            clsPrefix: mergedClsPrefix
+                        })
+                        : null
+                ];
                 contentNode = h('div', mergeProps({
                     class: [
                         `${mergedClsPrefix}-popover`,
@@ -149,19 +160,10 @@ export default defineComponent({
                     ],
                     ref: bodyRef,
                     style: styleRef.value,
+                    onKeydown: NPopover.handleKeydown,
                     onMouseenter: handleMouseEnter,
                     onMouseleave: handleMouseLeave
-                }, attrs), [
-                    slots.header ? (h(Fragment, null,
-                        h("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
-                        h("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : (renderSlot(slots, 'default')),
-                    props.showArrow
-                        ? renderArrow({
-                            arrowStyle: props.arrowStyle,
-                            clsPrefix: mergedClsPrefix
-                        })
-                        : null
-                ]);
+                }, attrs), internalTrapFocus ? (h(VFocusTrap, { active: props.show, focusFirstDescendant: true }, { default: renderContentInnerNode })) : (renderContentInnerNode()));
             }
             else {
                 contentNode = renderBody(
@@ -188,39 +190,19 @@ export default defineComponent({
         };
     },
     render() {
-        return h(VFollower, {
-            zIndex: this.zIndex,
-            show: this.show,
-            enabled: this.followerEnabled,
-            to: this.adjustedTo,
-            x: this.x,
-            y: this.y,
-            flip: this.flip,
-            placement: this.placement,
-            containerClass: this.namespace,
-            ref: 'followerRef',
-            overlap: this.overlap,
-            width: this.width === 'trigger' ? 'target' : undefined,
-            teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey
-        }, {
+        return (h(VFollower, { zIndex: this.zIndex, show: this.show, enabled: this.followerEnabled, to: this.adjustedTo, x: this.x, y: this.y, flip: this.flip, placement: this.placement, containerClass: this.namespace, ref: "followerRef", overlap: this.overlap, width: this.width === 'trigger' ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
             default: () => {
-                return this.animated
-                    ? h(Transition, {
-                        name: 'popover-transition',
-                        appear: this.isMounted,
-                        // Don't use watch to enable follower, since the transition may
-                        // make position sync timing very subtle and buggy.
-                        onEnter: () => {
-                            this.followerEnabled = true;
-                        },
-                        onAfterLeave: () => {
-                            this.followerEnabled = false;
-                        }
-                    }, {
-                        default: this.renderContentNode
-                    })
-                    : this.renderContentNode();
+                return this.animated ? (h(Transition, { name: "popover-transition", appear: this.isMounted, 
+                    // Don't use watch to enable follower, since the transition may
+                    // make position sync timing very subtle and buggy.
+                    onEnter: () => {
+                        this.followerEnabled = true;
+                    }, onAfterLeave: () => {
+                        this.followerEnabled = false;
+                    } }, {
+                    default: this.renderContentNode
+                })) : (this.renderContentNode());
             }
-        });
+        }));
     }
 });

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

@@ -5,31 +5,31 @@ const oppositePlacement = {
   left: 'right',
   right: 'left'
 }; // vars:
-// --bezier
-// --bezier-ease-in
-// --bezier-ease-out
-// --font-size
-// --text-color
-// --color
-// --border-radius
-// --arrow-height
-// --arrow-offset
-// --arrow-offset-vertical
-// --padding
-// --space
-// --space-arrow
-// --divider-color
+// --n-bezier
+// --n-bezier-ease-in
+// --n-bezier-ease-out
+// --n-font-size
+// --n-text-color
+// --n-color
+// --n-border-radius
+// --n-arrow-height
+// --n-arrow-offset
+// --n-arrow-offset-vertical
+// --n-padding
+// --n-space
+// --n-space-arrow
+// --n-divider-color
 
 export default c([cB('popover', `
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  transform-origin: inherit;
  position: relative;
- font-size: var(--font-size);
- color: var(--text-color);
- box-shadow: var(--box-shadow);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ box-shadow: var(--n-box-shadow);
  `, [// body transition
 c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  opacity: 0;
@@ -39,84 +39,85 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  opacity: 1;
  `), c('&.popover-transition-enter-active', `
  transition:
- opacity .15s var(--bezier-ease-out),
- transform .15s var(--bezier-ease-out);
+ opacity .15s var(--n-bezier-ease-out),
+ transform .15s var(--n-bezier-ease-out);
  `), c('&.popover-transition-leave-active', `
  transition:
- opacity .15s var(--bezier-ease-in),
- transform .15s var(--bezier-ease-in);
+ opacity .15s var(--n-bezier-ease-in),
+ transform .15s var(--n-bezier-ease-in);
  `), cNotM('raw', `
- background-color: var(--color);
- border-radius: var(--border-radius);
- `, [cNotM('show-header', 'padding: var(--padding);')]), cE('header', `
- padding: var(--padding);
- border-bottom: 1px solid var(--divider-color);
- transition: border-color .3s var(--bezier);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ `, [cNotM('show-header', 'padding: var(--n-padding);')]), cE('header', `
+ padding: var(--n-padding);
+ border-bottom: 1px solid var(--n-divider-color);
+ transition: border-color .3s var(--n-bezier);
  `), cE('content', `
- padding: var(--padding);
+ padding: var(--n-padding);
  `), cB('popover-arrow-wrapper', `
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  `, [cB('popover-arrow', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
  display: block;
- width: calc(var(--arrow-height) * 1.414);
- height: calc(var(--arrow-height) * 1.414);
+ width: calc(var(--n-arrow-height) * 1.414);
+ height: calc(var(--n-arrow-height) * 1.414);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
  transform: rotate(45deg);
- background-color: var(--color);
+ background-color: var(--n-color);
  pointer-events: all;
  `)])]), placementStyle('top-start', `
- top: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ left: calc(var(--n-arrow-offset) - var(--v-offset-left));
  `), placementStyle('top', `
- top: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ top: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
- top: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ right: calc(var(--n-arrow-offset) + var(--v-offset-left));
  `), placementStyle('bottom-start', `
- bottom: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ left: calc(var(--n-arrow-offset) - var(--v-offset-left));
  `), placementStyle('bottom', `
- bottom: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
- bottom: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ right: calc(var(--n-arrow-offset) + var(--v-offset-left));
  `), placementStyle('left-start', `
- left: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
  `), placementStyle('left', `
- left: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ left: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
- left: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
+ 
  `), placementStyle('right-start', `
- right: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
  `), placementStyle('right', `
- right: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ right: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
- right: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
  `)]);
 
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];
-  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--space-arrow);' : 'width: var(--space-arrow);';
+  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--n-space-arrow);' : 'width: var(--n-space-arrow);';
   return c(`[v-placement="${placement}"] >`, [cB('popover', `
- margin-${oppositePlacement[position]}: var(--space);
+ margin-${oppositePlacement[position]}: var(--n-space);
  `, [cM('show-arrow', `
- margin-${oppositePlacement[position]}: var(--space-arrow);
+ margin-${oppositePlacement[position]}: var(--n-space-arrow);
  `), cM('overlap', `
  margin: 0;
  `), cCB('popover-arrow-wrapper', `

package/es/popselect/src/Popselect.d.ts

@@ -32,51 +32,53 @@ declare const popselectProps: {
         type: PropType<PopoverTrigger>;
         default: string;
     };
-    showArrow: BooleanConstructor;
     show: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    delay: {
-        type: NumberConstructor;
-        default: number;
+    flip: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    x: NumberConstructor;
+    y: NumberConstructor;
+    maxWidth: NumberConstructor;
+    minWidth: NumberConstructor;
+    zIndex: NumberConstructor;
+    disabled: BooleanConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
     };
+    to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
     raw: BooleanConstructor;
-    x: NumberConstructor;
-    y: NumberConstructor;
-    disabled: BooleanConstructor;
-    getDisabled: PropType<() => boolean>;
+    overlap: BooleanConstructor;
+    arrowStyle: PropType<string | import("vue").CSSProperties>;
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
     displayDirective: {
         type: PropType<"show" | "if">;
         default: string;
     };
-    arrowStyle: PropType<string | import("vue").CSSProperties>;
-    flip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overlap: BooleanConstructor;
+    onClickoutside: PropType<(e: MouseEvent) => void>;
+    defaultShow: BooleanConstructor;
+    getDisabled: PropType<() => boolean>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
-    zIndex: NumberConstructor;
-    to: {
-        type: PropType<string | boolean | HTMLElement>;
-        default: undefined;
-    };
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -84,12 +86,6 @@ declare const popselectProps: {
     };
     onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-    arrow: {
-        type: PropType<boolean | undefined>;
-        default: undefined;
-    };
-    minWidth: NumberConstructor;
-    maxWidth: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Popselect", unknown, {
         Popover: import("../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -327,51 +323,53 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopoverTrigger>;
         default: string;
     };
-    showArrow: BooleanConstructor;
     show: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    delay: {
-        type: NumberConstructor;
-        default: number;
+    flip: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    x: NumberConstructor;
+    y: NumberConstructor;
+    maxWidth: NumberConstructor;
+    minWidth: NumberConstructor;
+    zIndex: NumberConstructor;
+    disabled: BooleanConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
     };
+    to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
     raw: BooleanConstructor;
-    x: NumberConstructor;
-    y: NumberConstructor;
-    disabled: BooleanConstructor;
-    getDisabled: PropType<() => boolean>;
+    overlap: BooleanConstructor;
+    arrowStyle: PropType<string | import("vue").CSSProperties>;
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
     displayDirective: {
         type: PropType<"show" | "if">;
         default: string;
     };
-    arrowStyle: PropType<string | import("vue").CSSProperties>;
-    flip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
         default: boolean;
     };
-    overlap: BooleanConstructor;
+    onClickoutside: PropType<(e: MouseEvent) => void>;
+    defaultShow: BooleanConstructor;
+    getDisabled: PropType<() => boolean>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
-    zIndex: NumberConstructor;
-    to: {
-        type: PropType<string | boolean | HTMLElement>;
-        default: undefined;
-    };
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -379,12 +377,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-    arrow: {
-        type: PropType<boolean | undefined>;
-        default: undefined;
-    };
-    minWidth: NumberConstructor;
-    maxWidth: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Popselect", unknown, {
         Popover: import("../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -812,34 +804,33 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: unknown;
     placement?: unknown;
     trigger?: unknown;
-    showArrow?: unknown;
     show?: unknown;
-    defaultShow?: unknown;
-    delay?: unknown;
-    duration?: unknown;
-    raw?: unknown;
+    flip?: unknown;
     x?: unknown;
     y?: unknown;
+    maxWidth?: unknown;
+    minWidth?: unknown;
+    zIndex?: unknown;
     disabled?: unknown;
-    getDisabled?: unknown;
-    displayDirective?: unknown;
+    duration?: unknown;
+    to?: unknown;
+    raw?: unknown;
+    overlap?: unknown;
     arrowStyle?: unknown;
-    flip?: unknown;
+    delay?: unknown;
+    displayDirective?: unknown;
+    internalTrapFocus?: unknown;
     animated?: unknown;
-    overlap?: unknown;
-    internalExtraClass?: unknown;
     onClickoutside?: unknown;
+    defaultShow?: unknown;
+    getDisabled?: unknown;
+    internalExtraClass?: unknown;
     'onUpdate:show'?: unknown;
     onUpdateShow?: unknown;
-    zIndex?: unknown;
-    to?: unknown;
     internalSyncTargetWithParent?: unknown;
     internalInheritedEventHandlers?: unknown;
     onShow?: unknown;
     onHide?: unknown;
-    arrow?: unknown;
-    minWidth?: unknown;
-    maxWidth?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -855,9 +846,9 @@ declare const _default: import("vue").DefineComponent<{
     overlap: boolean;
     scrollable: boolean;
     trigger: PopoverTrigger;
-    showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -1089,7 +1080,6 @@ declare const _default: import("vue").DefineComponent<{
     onUpdateShow?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     onShow?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     onHide?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
-    arrow?: boolean | undefined;
     "onUpdate:value"?: import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined;
     onUpdateValue?: import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined;
 }>, {
@@ -1106,15 +1096,14 @@ declare const _default: import("vue").DefineComponent<{
     overlap: boolean;
     scrollable: boolean;
     trigger: PopoverTrigger;
-    showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    arrow: boolean | undefined;
     options: import("../../select/src/interface").SelectMixedOption[];
     cancelable: boolean;
 }>;

package/es/popselect/src/Popselect.js

@@ -6,10 +6,10 @@ import { omit, keep, createRefSetter } from '../../_utils';
 import { useTheme } from '../../_mixins';
 import { popselectLight } from '../styles';
 import { popselectInjectionKey } from './interface';
-const popselectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), popoverBaseProps), { placement: Object.assign(Object.assign({}, popoverBaseProps.placement), { default: 'bottom' }), trigger: {
+const popselectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), omit(popoverBaseProps, ['showArrow', 'arrow'])), { placement: Object.assign(Object.assign({}, popoverBaseProps.placement), { default: 'bottom' }), trigger: {
         type: String,
         default: 'hover'
-    }, showArrow: Boolean }), panelProps);
+    } }), panelProps);
 export default defineComponent({
     name: 'Popselect',
     props: popselectProps,

package/es/progress/src/Circle.d.ts

@@ -20,6 +20,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    offsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
     showIndicator: {
         type: BooleanConstructor;
         reqiuired: boolean;
@@ -38,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     railColor?: unknown;
     railStyle?: unknown;
     percentage?: unknown;
+    offsetDegree?: unknown;
     showIndicator?: unknown;
     indicatorTextColor?: unknown;
     unit?: unknown;
@@ -48,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     percentage: number;
     status: Status;
     showIndicator: boolean;
+    offsetDegree: number;
     viewBoxWidth: number;
 } & {
     railColor?: string | undefined;
@@ -58,5 +64,6 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     percentage: number;
     showIndicator: boolean;
+    offsetDegree: number;
 }>;
 export default _default;

package/es/progress/src/Circle.js

@@ -29,6 +29,10 @@ export default defineComponent({
             type: Number,
             default: 0
         },
+        offsetDegree: {
+            type: Number,
+            default: 0
+        },
         showIndicator: {
             type: Boolean,
             reqiuired: true
@@ -44,6 +48,9 @@ export default defineComponent({
         const strokeDasharrayRef = computed(() => {
             return `${Math.PI * props.percentage}, ${props.viewBoxWidth * 8}`;
         });
+        const strokeDashoffsetRef = computed(() => {
+            return `-${(Math.PI / 3.6) * props.offsetDegree}`;
+        });
         return () => {
             const { fillColor, railColor, railStyle, strokeWidth, status, percentage, showIndicator, indicatorTextColor, unit, clsPrefix } = props;
             return (h("div", { class: `${clsPrefix}-progress-content`, role: "none" },
@@ -65,7 +72,7 @@ export default defineComponent({
                                             `${clsPrefix}-progress-graph-circle-fill--empty`
                                     ], d: "m 55 5 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100", "stroke-width": strokeWidth * 1.1, "stroke-linecap": "round", fill: "none", style: {
                                         strokeDasharray: strokeDasharrayRef.value,
-                                        strokeDashoffset: 0,
+                                        strokeDashoffset: strokeDashoffsetRef.value,
                                         stroke: fillColor
                                     } }))))),
                 showIndicator ? (h("div", null, slots.default ? (h("div", { class: `${clsPrefix}-progress-custom-content`, role: "none" }, slots.default())) : status !== 'default' ? (h("div", { class: `${clsPrefix}-progress-icon`, "aria-hidden": true },