cnhis-design-vue 3.1.7 → 3.1.8-beta.1

package/es/packages/drag-layout/index2.mjs

@@ -1,11 +1,13 @@
-import { KEY_COMPONENT_NAME } from 'cnhis-design-vue/es/src/global/variable';
-import { safeComponentRegister, getComponentName } from 'cnhis-design-vue/es/src/utils';
+import { COMPONENT_NAMESPACE } from 'cnhis-design-vue/es/src/global/variable';
+import { safeComponentRegister } from 'cnhis-design-vue/es/src/utils';
+import { expandXEUtils } from 'cnhis-design-vue/es/src/utils/utilExpand';
 import './src/DragLayout2.mjs';
 import script from './src/DragLayout.vue_vue_type_script_setup_true_lang.mjs';
 
 const DragLayout = script;
 DragLayout.install = function(app) {
-  safeComponentRegister(app, DragLayout, KEY_COMPONENT_NAME + getComponentName(DragLayout));
+  safeComponentRegister(app, DragLayout, COMPONENT_NAMESPACE + "DragLayout");
+  expandXEUtils();
 };
 
 export { DragLayout as default };

package/es/packages/drag-layout/src/DragFormLeftItem.vue.d.ts

@@ -52,7 +52,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly type: import("vue").PropType<boolean | undefined>;
             readonly default: undefined;
         };
-        readonly panel: BooleanConstructor;
         readonly ranges: import("vue").PropType<Record<string, [number, number]>>;
         readonly firstDayOfWeek: import("vue").PropType<import("naive-ui/es/date-picker/src/interface").FirstDayOfWeek>;
         readonly inputReadonly: BooleanConstructor;
@@ -1930,8 +1929,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1942,8 +1941,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1959,8 +1958,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1971,8 +1970,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1983,8 +1982,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1995,8 +1994,8 @@ declare const _default: import("vue").DefineComponent<{
                 contentRef: HTMLElement | null;
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
-                scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-                scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+                scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -2039,9 +2038,8 @@ declare const _default: import("vue").DefineComponent<{
         isValueInvalid: import("vue").ComputedRef<boolean>;
         isStartValueInvalid: import("vue").ComputedRef<boolean>;
         isEndValueInvalid: import("vue").ComputedRef<boolean>;
-        handleInputKeydown: (e: KeyboardEvent) => void;
         handleClickOutside: (e: MouseEvent) => void;
-        handleKeydown: (e: KeyboardEvent) => void;
+        handleKeyDown: (e: KeyboardEvent) => void;
         handleClear: () => void;
         handlePanelClear: () => void;
         handleTriggerClick: (e: MouseEvent) => void;
@@ -2096,11 +2094,10 @@ declare const _default: import("vue").DefineComponent<{
                 opacity5: string;
                 dividerColor: string;
                 borderColor: string;
-                closeIconColor: string;
-                closeIconColorHover: string;
-                closeIconColorPressed: string;
+                closeColor: string;
                 closeColorHover: string;
                 closeColorPressed: string;
+                closeColorDisabled: string;
                 clearColor: string;
                 clearColorHover: string;
                 clearColorPressed: string;
@@ -3168,7 +3165,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly type: import("vue").PropType<boolean | undefined>;
             readonly default: undefined;
         };
-        readonly panel: BooleanConstructor;
         readonly ranges: import("vue").PropType<Record<string, [number, number]>>;
         readonly firstDayOfWeek: import("vue").PropType<import("naive-ui/es/date-picker/src/interface").FirstDayOfWeek>;
         readonly inputReadonly: BooleanConstructor;
@@ -5032,18 +5028,17 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>>>;
     }>>, {
-        readonly type: import("naive-ui/es/date-picker/src/config").DatePickerType;
-        readonly show: boolean | undefined;
-        readonly disabled: boolean | undefined;
-        readonly to: string | boolean | HTMLElement;
-        readonly bordered: boolean | undefined;
-        readonly placement: import("naive-ui").PopoverPlacement;
-        readonly clearable: boolean;
-        readonly inputReadonly: boolean;
-        readonly panel: boolean;
-        readonly updateValueOnClose: boolean;
-        readonly closeOnSelect: boolean;
-        readonly bindCalendarMonths: boolean;
+        type: import("naive-ui/es/date-picker/src/config").DatePickerType;
+        show: boolean | undefined;
+        disabled: boolean | undefined;
+        to: string | boolean | HTMLElement;
+        bordered: boolean | undefined;
+        placement: import("naive-ui").PopoverPlacement;
+        clearable: boolean;
+        inputReadonly: boolean;
+        updateValueOnClose: boolean;
+        closeOnSelect: boolean;
+        bindCalendarMonths: boolean;
     }>;
     NSelect: import("vue").DefineComponent<{
         readonly to: {
@@ -5079,7 +5074,10 @@ declare const _default: import("vue").DefineComponent<{
         };
         readonly remote: BooleanConstructor;
         readonly loading: BooleanConstructor;
-        readonly filter: import("vue").PropType<(pattern: string, option: import("naive-ui").SelectOption) => boolean>;
+        readonly filter: {
+            readonly type: import("vue").PropType<(pattern: string, option: import("naive-ui").SelectOption) => boolean>;
+            readonly default: typeof import("naive-ui/es/select/src/utils").defaultFilter;
+        };
         readonly placement: {
             readonly type: import("vue").PropType<import("naive-ui").PopoverPlacement>;
             readonly default: "bottom-start";
@@ -5089,10 +5087,19 @@ declare const _default: import("vue").DefineComponent<{
             readonly default: "trigger";
         };
         readonly tag: BooleanConstructor;
-        readonly onCreate: import("vue").PropType<(label: string) => import("naive-ui").SelectOption>;
+        readonly onCreate: {
+            readonly type: import("vue").PropType<(label: string) => import("naive-ui").SelectOption>;
+            readonly default: (label: string) => {
+                label: string;
+                value: string;
+            };
+        };
         readonly fallbackOption: {
-            readonly type: import("vue").PropType<false | import("naive-ui/es/select/src/interface").SelectFallbackOption | undefined>;
-            readonly default: undefined;
+            readonly type: import("vue").PropType<false | import("naive-ui/es/select/src/interface").SelectFallbackOption>;
+            readonly default: () => (value: string | number) => {
+                label: string;
+                value: string | number;
+            };
         };
         readonly show: {
             readonly type: import("vue").PropType<boolean | undefined>;
@@ -5111,18 +5118,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly type: BooleanConstructor;
             readonly default: true;
         };
-        readonly labelField: {
-            readonly type: StringConstructor;
-            readonly default: "label";
-        };
-        readonly valueField: {
-            readonly type: StringConstructor;
-            readonly default: "value";
-        };
-        readonly childrenField: {
-            readonly type: StringConstructor;
-            readonly default: "children";
-        };
         readonly renderLabel: import("vue").PropType<import("naive-ui/es/_internal/select-menu/src/interface").RenderLabel>;
         readonly renderOption: import("vue").PropType<import("naive-ui/es/_internal/select-menu/src/interface").RenderOption>;
         readonly renderTag: import("vue").PropType<import("naive-ui").SelectRenderTag>;
@@ -5145,10 +5140,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly default: true;
         };
         readonly status: import("vue").PropType<import("naive-ui/es/form/src/interface").FormValidationStatus>;
-        readonly internalShowCheckmark: {
-            readonly type: BooleanConstructor;
-            readonly default: true;
-        };
         readonly onChange: import("vue").PropType<import("naive-ui/es/_utils").MaybeArray<import("naive-ui/es/select/src/interface").OnUpdateValue>>;
         readonly items: import("vue").PropType<import("naive-ui/es/select/src/interface").SelectMixedOption[]>;
         readonly theme: import("vue").PropType<import("naive-ui/es/_mixins").Theme<"Select", {
@@ -5244,7 +5235,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -5370,7 +5360,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -5496,7 +5485,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -5626,11 +5614,10 @@ declare const _default: import("vue").DefineComponent<{
                 opacity5: string;
                 dividerColor: string;
                 borderColor: string;
-                closeIconColor: string;
-                closeIconColorHover: string;
-                closeIconColorPressed: string;
+                closeColor: string;
                 closeColorHover: string;
                 closeColorPressed: string;
+                closeColorDisabled: string;
                 clearColor: string;
                 clearColorHover: string;
                 clearColorPressed: string;
@@ -5785,7 +5772,6 @@ declare const _default: import("vue").DefineComponent<{
                     optionCheckColor: string;
                     optionColorPending: string;
                     optionColorActive: string;
-                    optionColorActivePending: string;
                     actionTextColor: string;
                     loadingColor: string;
                     height: string;
@@ -5901,7 +5887,10 @@ declare const _default: import("vue").DefineComponent<{
         };
         readonly remote: BooleanConstructor;
         readonly loading: BooleanConstructor;
-        readonly filter: import("vue").PropType<(pattern: string, option: import("naive-ui").SelectOption) => boolean>;
+        readonly filter: {
+            readonly type: import("vue").PropType<(pattern: string, option: import("naive-ui").SelectOption) => boolean>;
+            readonly default: typeof import("naive-ui/es/select/src/utils").defaultFilter;
+        };
         readonly placement: {
             readonly type: import("vue").PropType<import("naive-ui").PopoverPlacement>;
             readonly default: "bottom-start";
@@ -5911,10 +5900,19 @@ declare const _default: import("vue").DefineComponent<{
             readonly default: "trigger";
         };
         readonly tag: BooleanConstructor;
-        readonly onCreate: import("vue").PropType<(label: string) => import("naive-ui").SelectOption>;
+        readonly onCreate: {
+            readonly type: import("vue").PropType<(label: string) => import("naive-ui").SelectOption>;
+            readonly default: (label: string) => {
+                label: string;
+                value: string;
+            };
+        };
         readonly fallbackOption: {
-            readonly type: import("vue").PropType<false | import("naive-ui/es/select/src/interface").SelectFallbackOption | undefined>;
-            readonly default: undefined;
+            readonly type: import("vue").PropType<false | import("naive-ui/es/select/src/interface").SelectFallbackOption>;
+            readonly default: () => (value: string | number) => {
+                label: string;
+                value: string | number;
+            };
         };
         readonly show: {
             readonly type: import("vue").PropType<boolean | undefined>;
@@ -5933,18 +5931,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly type: BooleanConstructor;
             readonly default: true;
         };
-        readonly labelField: {
-            readonly type: StringConstructor;
-            readonly default: "label";
-        };
-        readonly valueField: {
-            readonly type: StringConstructor;
-            readonly default: "value";
-        };
-        readonly childrenField: {
-            readonly type: StringConstructor;
-            readonly default: "children";
-        };
         readonly renderLabel: import("vue").PropType<import("naive-ui/es/_internal/select-menu/src/interface").RenderLabel>;
         readonly renderOption: import("vue").PropType<import("naive-ui/es/_internal/select-menu/src/interface").RenderOption>;
         readonly renderTag: import("vue").PropType<import("naive-ui").SelectRenderTag>;
@@ -5967,10 +5953,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly default: true;
         };
         readonly status: import("vue").PropType<import("naive-ui/es/form/src/interface").FormValidationStatus>;
-        readonly internalShowCheckmark: {
-            readonly type: BooleanConstructor;
-            readonly default: true;
-        };
         readonly onChange: import("vue").PropType<import("naive-ui/es/_utils").MaybeArray<import("naive-ui/es/select/src/interface").OnUpdateValue>>;
         readonly items: import("vue").PropType<import("naive-ui/es/select/src/interface").SelectMixedOption[]>;
         readonly theme: import("vue").PropType<import("naive-ui/es/_mixins").Theme<"Select", {
@@ -6066,7 +6048,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -6192,7 +6173,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -6318,7 +6298,6 @@ declare const _default: import("vue").DefineComponent<{
                 optionCheckColor: string;
                 optionColorPending: string;
                 optionColorActive: string;
-                optionColorActivePending: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -6352,31 +6331,29 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>>>;
     }>>, {
-        readonly tag: boolean;
-        readonly show: boolean | undefined;
-        readonly multiple: boolean;
-        readonly disabled: boolean | undefined;
-        readonly to: string | boolean | HTMLElement;
-        readonly options: import("naive-ui/es/select/src/interface").SelectMixedOption[];
-        readonly loading: boolean;
-        readonly bordered: boolean | undefined;
-        readonly placement: import("naive-ui").PopoverPlacement;
-        readonly labelField: string;
-        readonly virtualScroll: boolean;
-        readonly valueField: string;
-        readonly resetMenuOnOptionsChange: boolean;
-        readonly showArrow: boolean;
-        readonly displayDirective: "show" | "if";
-        readonly filterable: boolean;
-        readonly clearable: boolean;
-        readonly internalShowCheckmark: boolean;
-        readonly clearFilterAfterSelect: boolean;
-        readonly defaultValue: import("naive-ui/es/select/src/interface").Value | null;
-        readonly remote: boolean;
-        readonly widthMode: string;
-        readonly fallbackOption: false | import("naive-ui/es/select/src/interface").SelectFallbackOption | undefined;
-        readonly consistentMenuWidth: boolean;
-        readonly childrenField: string;
+        tag: boolean;
+        filter: (pattern: string, option: import("naive-ui").SelectOption) => boolean;
+        show: boolean | undefined;
+        multiple: boolean;
+        disabled: boolean | undefined;
+        to: string | boolean | HTMLElement;
+        options: import("naive-ui/es/select/src/interface").SelectMixedOption[];
+        loading: boolean;
+        bordered: boolean | undefined;
+        placement: import("naive-ui").PopoverPlacement;
+        virtualScroll: boolean;
+        resetMenuOnOptionsChange: boolean;
+        showArrow: boolean;
+        displayDirective: "show" | "if";
+        filterable: boolean;
+        clearable: boolean;
+        clearFilterAfterSelect: boolean;
+        defaultValue: import("naive-ui/es/select/src/interface").Value | null;
+        remote: boolean;
+        widthMode: string;
+        onCreate: (label: string) => import("naive-ui").SelectOption;
+        fallbackOption: false | import("naive-ui/es/select/src/interface").SelectFallbackOption;
+        consistentMenuWidth: boolean;
     }>;
     NRadio: import("vue").DefineComponent<{
         name: StringConstructor;
@@ -6844,11 +6821,10 @@ declare const _default: import("vue").DefineComponent<{
                 opacity5: string;
                 dividerColor: string;
                 borderColor: string;
-                closeIconColor: string;
-                closeIconColorHover: string;
-                closeIconColorPressed: string;
+                closeColor: string;
                 closeColorHover: string;
                 closeColorPressed: string;
+                closeColorDisabled: string;
                 clearColor: string;
                 clearColorHover: string;
                 clearColorPressed: string;
@@ -7098,8 +7074,8 @@ declare const _default: import("vue").DefineComponent<{
     }>>, {
         disabled: boolean | undefined;
         checked: string | number | boolean | undefined;
-        indeterminate: boolean;
         focusable: boolean;
+        indeterminate: boolean;
         defaultChecked: string | number | boolean;
         checkedValue: string | number | boolean;
         uncheckedValue: string | number | boolean;
@@ -7163,7 +7139,6 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: undefined;
         };
-        allowInput: import("vue").PropType<(value: string) => boolean>;
         onMousedown: import("vue").PropType<(e: MouseEvent) => void>;
         onKeydown: import("vue").PropType<(e: KeyboardEvent) => void>;
         onKeyup: import("vue").PropType<(e: KeyboardEvent) => void>;
@@ -7384,8 +7359,8 @@ declare const _default: import("vue").DefineComponent<{
             contentRef: HTMLElement | null;
             containerScrollTop: number;
             syncUnifiedContainer: () => void;
-            scrollTo: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollTo;
-            scrollBy: import("naive-ui/es/_internal/scrollbar/src/Scrollbar").ScrollBy;
+            scrollTo: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollTo;
+            scrollBy: import("naive-ui/es/_internal/scrollbar/src/ScrollBar").ScrollBy;
             sync: () => void;
             handleMouseEnterWrapper: () => void;
             handleMouseLeaveWrapper: () => void;
@@ -7419,7 +7394,7 @@ declare const _default: import("vue").DefineComponent<{
         handleCompositionEnd: (e: CompositionEvent) => void;
         handleInput: (e: Event | CompositionEvent | InputEvent, index?: 0 | 1 | undefined, event?: string | undefined) => void;
         handleInputBlur: (e: FocusEvent) => void;
-        handleInputFocus: (e: FocusEvent, index: number) => void;
+        handleInputFocus: (e: FocusEvent) => void;
         handleWrapperBlur: (e: FocusEvent) => void;
         handleWrapperFocus: (e: FocusEvent) => void;
         handleMouseEnter: () => void;
@@ -7430,7 +7405,7 @@ declare const _default: import("vue").DefineComponent<{
         handleClear: (e: MouseEvent) => void;
         handlePasswordToggleClick: () => void;
         handlePasswordToggleMousedown: (e: MouseEvent) => void;
-        handleWrapperKeydown: (e: KeyboardEvent) => void;
+        handleWrapperKeyDown: (e: KeyboardEvent) => void;
         handleTextAreaMirrorResize: () => void;
         getTextareaScrollContainer: () => HTMLTextAreaElement | null;
         mergedTheme: import("vue").ComputedRef<{
@@ -7474,11 +7449,10 @@ declare const _default: import("vue").DefineComponent<{
                 opacity5: string;
                 dividerColor: string;
                 borderColor: string;
-                closeIconColor: string;
-                closeIconColorHover: string;
-                closeIconColorPressed: string;
+                closeColor: string;
                 closeColorHover: string;
                 closeColorPressed: string;
+                closeColorDisabled: string;
                 clearColor: string;
                 clearColorHover: string;
                 clearColorPressed: string;
@@ -7719,7 +7693,6 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: undefined;
         };
-        allowInput: import("vue").PropType<(value: string) => boolean>;
         onMousedown: import("vue").PropType<(e: MouseEvent) => void>;
         onKeydown: import("vue").PropType<(e: KeyboardEvent) => void>;
         onKeyup: import("vue").PropType<(e: KeyboardEvent) => void>;

package/es/packages/drag-layout/src/DragFormLeftItem.vue_vue_type_script_setup_true_lang.mjs

@@ -22,7 +22,6 @@ const _hoisted_11 = {
   class: "style-box"
 };
 var script = /* @__PURE__ */ defineComponent({
-  name: "DragFormLeftItem",
   props: {
     element: { type: null, required: true }
   },