ele-admin-plus 1.0.2 → 1.1.0

package/lib/ele-file-list/index.d.ts

@@ -1,6 +1,5 @@
-import type { CSSProperties } from 'vue';
 import type { FileItem, SortValue, ItemContextMenuOption, FileListLocale } from './types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     data: {
         type: import("vue").PropType<FileItem[]>;
         required: boolean;
@@ -25,10 +24,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     columns: import("vue").PropType<import("./types").ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: import("vue").PropType<import("./types").ContextMenus>;
+    contextMenuProps: import("vue").PropType<import("./types").EleDropdownProps>;
     locale: import("vue").PropType<FileListLocale>;
 }, {
     lang: import("vue").ComputedRef<FileListLocale>;
-    selectorStyle: CSSProperties;
+    selectorStyle: import("vue").Ref<{
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+        display: string;
+    }>;
     isCheckAll: import("vue").ComputedRef<boolean>;
     isIndeterminate: import("vue").ComputedRef<boolean>;
     onCheckAllChange: () => void;
@@ -68,13 +75,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     columns: import("vue").PropType<import("./types").ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: import("vue").PropType<import("./types").ContextMenus>;
+    contextMenuProps: import("vue").PropType<import("./types").EleDropdownProps>;
     locale: import("vue").PropType<FileListLocale>;
 }>> & {
+    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
     onItemClick?: ((_item: FileItem) => any) | undefined;
     onSortChange?: ((_sorter: SortValue) => any) | undefined;
     "onUpdate:selections"?: ((_selection?: FileItem[] | undefined) => any) | undefined;
     "onUpdate:current"?: ((_current?: FileItem | null | undefined) => any) | undefined;
-    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
 }, {
     grid: boolean;
     sortable: boolean;
@@ -82,4 +91,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     smallIcons: import("./types").IconItem[];
     boxChoose: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-file-list/index.js

@@ -14,7 +14,7 @@ const _sfc_main = vue.defineComponent({
   setup(props2, { emit }) {
     const { authenticated } = receiver.useLicense();
     const { lang } = receiver.useLocale("fileList", props2);
-    const selectorStyle = vue.reactive({
+    const selectorStyle = vue.ref({
       top: "0px",
       left: "0px",
       width: "0px",
@@ -130,14 +130,13 @@ const _sfc_main = vue.defineComponent({
           Math.abs(moveY - downY),
           target.clientHeight - top
         );
-        const temp = {
+        selectorStyle.value = {
           left: left + "px",
           top: top + "px",
           width: width + "px",
           height: height + "px",
           display: "block"
         };
-        Object.assign(selectorStyle, temp);
         if (width < 6 || height < 6) {
           items.forEach((item) => {
             item.classList.remove("is-active");
@@ -159,7 +158,7 @@ const _sfc_main = vue.defineComponent({
         });
       }, 60);
       const mouseupFn = (e) => {
-        selectorStyle.display = "none";
+        selectorStyle.value = { ...selectorStyle.value, display: "none" };
         const moveX = Math.max(e.clientX, position.left);
         const moveY = Math.max(e.clientY, position.top);
         const left = Math.min(moveX, downX) - position.left;
@@ -231,6 +230,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       isIndeterminate: _ctx.isIndeterminate,
       checkAllText: _ctx.lang.selectAll,
       selectedText: _ctx.lang.selectTips,
+      contextMenus: _ctx.contextMenus,
+      contextMenuProps: _ctx.contextMenuProps,
       onCheckAllChange: _ctx.onCheckAllChange,
       onItemClick: _ctx.onItemClick,
       onItemCheckChange: _ctx.onItemCheckChange,
@@ -244,7 +245,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
       key: 1,
       data: _ctx.data,
       icons: _ctx.icons,
@@ -260,6 +261,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       sort: _ctx.sort,
       order: _ctx.order,
       columns: _ctx.columns,
+      contextMenus: _ctx.contextMenus,
+      contextMenuProps: _ctx.contextMenuProps,
       onCheckAllChange: _ctx.onCheckAllChange,
       onItemClick: _ctx.onItemClick,
       onItemCheckChange: _ctx.onItemCheckChange,
@@ -274,7 +277,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
     vue.createElementVNode("div", {
       class: "ele-file-list-selector",
       style: vue.normalizeStyle(_ctx.selectorStyle)

package/lib/ele-file-list/props.d.ts

@@ -1,5 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, FileListLocale } from './types';
+import type FileGridItem from "./components/file-grid-item";
+import type FileTableItem from "./file-table-item";
+import type { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, ContextMenus, EleDropdownProps, FileListLocale } from './types';
 /**
  * 属性
  */
@@ -28,6 +30,8 @@ export declare const fileListProps: {
     };
     columns: PropType<ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: PropType<ContextMenus>;
+    contextMenuProps: PropType<EleDropdownProps>;
     locale: PropType<FileListLocale>;
 };
 export type FileListProps = ExtractPropTypes<typeof fileListProps>;
@@ -41,3 +45,11 @@ export declare const fileListEmits: {
     'update:current': (_current?: FileItem | null) => boolean;
     itemContextMenu: (_option: ItemContextMenuOption) => boolean;
 };
+/**
+ * 网格 item 实例
+ */
+export type GridItemInstance = InstanceType<typeof FileGridItem>;
+/**
+ * 表格 item 实例
+ */
+export type TableItemInstance = InstanceType<typeof FileTableItem>;

package/lib/ele-file-list/props.js

@@ -42,6 +42,10 @@ const fileListProps = {
   columns: Array,
   // 多选时是否支持鼠标框选
   boxChoose: Boolean,
+  // 右键菜单
+  contextMenus: [Array, Function],
+  // 右键菜单属性
+  contextMenuProps: Object,
   // 国际化
   locale: Object
 };

package/lib/ele-file-list/style/css-var.scss

@@ -1,7 +1,7 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
-@mixin set-file-list-var($var) {
+@mixin set-file-var($var) {
   .ele-file-list-group {
-    @include set-ele-var('file-list', $var);
+    @include set-ele-var('file', $var);
   }
 }

package/lib/ele-file-list/style/index.js

@@ -1,4 +1,3 @@
 "use strict";
-require("element-plus/es/components/dropdown/style/index");
-require("element-plus/es/components/dropdown-menu/style/index");
+require("../../ele-dropdown/style/index");
 require("./index.scss");

package/lib/ele-file-list/style/index.scss

@@ -1,7 +1,8 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
-@include set-file-list-var($ele);
+@include set-file-var($ele);
 
 .ele-file-list-group {
   position: relative;
@@ -16,7 +17,7 @@
     border: 1px solid elVar('border-color');
     background: elVar('bg-color');
     box-sizing: border-box;
-    transition: all 0.3s;
+    transition: all $ele-transition;
     position: relative;
     cursor: pointer;
 
@@ -84,9 +85,9 @@
     display: none;
     position: absolute;
     box-sizing: border-box;
-    border: eleVar('file-list', 'selector-border');
-    background: eleVar('file-list', 'selector-bg');
-    z-index: eleVar('file-list', 'selector-index');
+    border: eleVar('file', 'selector-border');
+    background: eleVar('file', 'selector-bg');
+    z-index: eleVar('file', 'selector-index');
     pointer-events: none;
   }
 
@@ -108,10 +109,10 @@
 
   // header
   .ele-file-list-header {
-    padding: 0 16px;
+    padding: 0 eleVar('file', 'header-padding');
     box-sizing: border-box;
-    border-bottom: 1px solid elVar('border-color', 'lighter');
-    line-height: 36px;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    line-height: eleVar('file', 'header-height');
     display: flex;
 
     // 全选框
@@ -128,61 +129,61 @@
 
   // body
   .ele-file-list-body {
-    padding-top: eleVar('file-list', 'item-space');
-    padding-left: eleVar('file-list', 'item-space');
+    padding-top: eleVar('file', 'item-space');
+    padding-left: eleVar('file', 'item-space');
   }
 
   /*  item */
   .ele-file-list-item {
-    width: eleVar('file-list', 'item-width');
-    margin-right: eleVar('file-list', 'item-space');
-    margin-bottom: eleVar('file-list', 'item-space');
+    width: eleVar('file', 'item-width');
+    margin-right: eleVar('file', 'item-space');
+    margin-bottom: eleVar('file', 'item-space');
     display: inline-block;
     box-sizing: border-box;
-    border: eleVar('file-list', 'item-border');
-    border-radius: eleVar('file-list', 'item-radius');
-    transition: all 0.3s;
+    border: eleVar('file', 'item-border');
+    border-radius: eleVar('file', 'item-radius');
+    transition: all $ele-transition;
     text-align: center;
     position: relative;
     cursor: pointer;
 
     .ele-file-list-item-body {
-      padding: 6px 4px;
+      padding: eleVar('file', 'item-padding');
       box-sizing: border-box;
     }
 
     // 图标
     .ele-file-list-item-icon {
-      height: 84px;
+      height: eleVar('file', 'icon-height');
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
 
       & > img {
-        width: 56px;
-        height: 56px;
-        border-radius: 2px;
+        width: eleVar('file', 'icon-size');
+        height: eleVar('file', 'icon-size');
         display: inline-block;
         pointer-events: none;
       }
 
       & > .ele-file-list-item-image {
-        width: 84px;
-        height: 84px;
+        width: eleVar('file', 'image-size');
+        height: eleVar('file', 'image-size');
+        border-radius: eleVar('file', 'image-radius');
         object-fit: cover;
       }
     }
 
     // 标题
     .ele-file-list-item-title {
-      margin-top: 4px;
+      margin-top: eleVar('file', 'title-margin');
       overflow: hidden;
       white-space: nowrap;
       word-break: break-all;
       text-overflow: ellipsis;
       box-sizing: border-box;
-      transition: color 0.3s;
+      transition: color $ele-transition;
 
       &:hover {
         color: elVar('color-primary');
@@ -193,7 +194,7 @@
     .ele-file-list-item-checkbox {
       border-radius: 50%;
       background: elVar('bg-color');
-      transition: all 0.3s;
+      transition: all $ele-transition;
       position: absolute;
       top: 6px;
       right: 6px;
@@ -211,7 +212,7 @@
     &:hover,
     &.is-active,
     &.is-checked {
-      background: eleVar('file-list', 'item-active-bg');
+      background: eleVar('file', 'item-active-bg');
 
       .ele-file-list-item-checkbox {
         opacity: 1;
@@ -219,7 +220,7 @@
     }
 
     &.is-checked {
-      border-color: eleVar('file-list', 'item-active-border-color');
+      border-color: eleVar('file', 'item-active-border-color');
 
       .ele-file-list-item-checkbox .ele-file-list-checkbox {
         opacity: 1;
@@ -243,7 +244,7 @@
     width: 0;
     height: 0;
     display: block;
-    border: 4px solid eleVar('file-list', 'table-sort-color');
+    border: 4px solid eleVar('file', 'sort-color');
     border-left-color: transparent;
     border-right-color: transparent;
   }
@@ -258,11 +259,11 @@
   }
 
   &.is-asc::before {
-    border-bottom-color: eleVar('file-list', 'table-sort-active-color');
+    border-bottom-color: eleVar('file', 'sort-active-color');
   }
 
   &.is-desc::after {
-    border-top-color: eleVar('file-list', 'table-sort-active-color');
+    border-top-color: eleVar('file', 'sort-active-color');
   }
 }
 
@@ -272,9 +273,9 @@
 
   /* item */
   .ele-file-list-item {
-    line-height: 44px;
-    border-top: 1px solid elVar('border-color', 'lighter');
-    transition: all 0.3s;
+    line-height: eleVar('file', 'td-height');
+    border-top: 1px solid elVar('border-color', 'light');
+    transition: all $ele-transition;
     position: relative;
 
     .ele-file-list-item-body {
@@ -288,13 +289,13 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid elVar('border-color', 'lighter');
+      border-bottom: 1px solid elVar('border-color', 'light');
     }
 
     // 复选框
     .ele-file-list-item-checkbox {
       width: 36px;
-      padding-left: 16px;
+      padding-left: eleVar('file', 'header-padding');
       box-sizing: border-box;
       line-height: 0;
       flex-shrink: 0;
@@ -304,7 +305,7 @@
     .ele-file-list-item-name {
       display: flex;
       align-items: center;
-      padding: 0 10px;
+      padding: eleVar('file', 'td-padding');
       box-sizing: border-box;
       position: relative;
       overflow: hidden;
@@ -319,8 +320,8 @@
       overflow: hidden;
 
       & > img {
-        width: 24px;
-        height: 24px;
+        width: eleVar('file', 'td-icon-szie');
+        height: eleVar('file', 'td-icon-szie');
         flex-shrink: 0;
         cursor: pointer;
 
@@ -328,11 +329,16 @@
           color: elVar('color-primary');
         }
       }
+
+      & > .ele-file-list-item-image {
+        border-radius: eleVar('file', 'td-image-radius');
+        object-fit: cover;
+      }
     }
 
     .ele-file-list-item-title {
-      padding-left: 10px;
-      transition: color 0.3s;
+      padding-left: eleVar('file', 'td-icon-margin');
+      transition: color $ele-transition;
       box-sizing: border-box;
       text-overflow: ellipsis;
       word-break: break-all;
@@ -354,7 +360,7 @@
 
       .ele-file-list-item-tool {
         font-size: 17px;
-        margin-left: 16px;
+        margin-left: eleVar('file', 'td-icon-margin');
         color: elVar('color-primary');
         cursor: pointer;
       }
@@ -366,14 +372,16 @@
 
     // 自定义列
     .ele-file-list-item-cell {
-      padding: 0 10px;
+      padding: eleVar('file', 'td-item-padding');
       box-sizing: border-box;
     }
   }
 
   // header
   .ele-file-list-header .ele-file-list-item {
-    line-height: 36px;
+    line-height: eleVar('file', 'header-height');
+    border-top: none;
+    margin-top: 0;
 
     .ele-file-list-item-name > div {
       overflow: hidden;
@@ -384,7 +392,7 @@
 
     .ele-file-list-item-name,
     .ele-file-list-item-cell {
-      transition: color 0.3s;
+      transition: color $ele-transition;
       cursor: pointer;
 
       &:hover {
@@ -398,11 +406,11 @@
     &:hover,
     &.is-active,
     &.is-checked {
-      background: eleVar('file-list', 'item-active-bg');
-      border-color: eleVar('file-list', 'item-active-border-color');
+      background: eleVar('file', 'item-active-bg');
+      border-color: eleVar('file', 'item-active-border-color');
 
       & + .ele-file-list-item {
-        border-top-color: eleVar('file-list', 'item-active-border-color');
+        border-top-color: eleVar('file', 'item-active-border-color');
       }
     }
   }
@@ -410,5 +418,5 @@
 
 /* 右键菜单 */
 .ele-file-list-item-context {
-  min-width: 100px;
+  min-width: 108px;
 }

package/lib/ele-file-list/types/index.d.ts

@@ -1,4 +1,7 @@
-import type { CSSProperties } from 'vue';
+import type { StyleValue, ComponentProps } from '../../ele-app/types';
+import type { DropdownProps } from '../../ele-dropdown/props';
+import type { DropdownItem } from '../../ele-dropdown/types';
+import type EleDropdown from "../../ele-dropdown/index";
 /**
  * 图标数据
  */
@@ -55,9 +58,9 @@ export interface ColumnItem {
     /** 表头插槽 */
     headerSlot?: string;
     /** 自定义样式 */
-    style?: CSSProperties;
+    style?: StyleValue;
     /** 自定义表头样式 */
-    headerStyle?: CSSProperties;
+    headerStyle?: StyleValue;
     /** 是否可以排序 */
     sortable?: boolean;
 }
@@ -74,6 +77,26 @@ export interface ItemContextMenuOption {
  * 选择框类型
  */
 export type SelectionType = 'checkbox' | 'radio';
+/**
+ * 获取右键菜单方法
+ */
+export type ContextMenusFunc = (item: FileItem) => DropdownItem[];
+/**
+ * 右键菜单属性
+ */
+export type ContextMenus = DropdownItem[] | ContextMenusFunc;
+/**
+ * 下拉菜单属性
+ */
+export type EleDropdownProps = ComponentProps<DropdownProps>;
+/**
+ * 下拉菜单实例
+ */
+export type DropdownInstance = InstanceType<typeof EleDropdown> | null;
+/**
+ * 选择框样式
+ */
+export type SelectorStyle = Exclude<StyleValue, string>;
 /**
  * 国际化
  */

package/lib/ele-file-list-tool/index.d.ts

@@ -1,8 +1,8 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{}, {
     onClick: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
     onClick?: (() => any) | undefined;
 }, {}, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-icon-select/components/icon-grid.d.ts

@@ -1,17 +1,18 @@
-import type { PropType, CSSProperties } from 'vue';
-import type { EmptyProps, ElTooltipProps } from 'element-plus';
-declare const _sfc_main: import("vue").DefineComponent<{
+import type { PropType } from 'vue';
+import type { StyleValue, ElEmptyProps } from '../../ele-app/types';
+import type { EleTooltipProps } from '../../ele-avatar-group/types';
+declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
     data: {
         type: PropType<string[]>;
         required: true;
     };
-    emptyProps: PropType<Partial<EmptyProps>>;
+    emptyProps: PropType<ElEmptyProps>;
     tooltip: BooleanConstructor;
-    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    tooltipProps: PropType<EleTooltipProps>;
     popperVisible: BooleanConstructor;
-    gridStyle: PropType<CSSProperties>;
-    itemStyle: PropType<CSSProperties>;
+    gridStyle: PropType<StyleValue>;
+    itemStyle: PropType<StyleValue>;
 }, {
     tooltipContent: import("vue").Ref<string>;
     virtualRef: import("vue").Ref<any>;
@@ -25,16 +26,16 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: PropType<string[]>;
         required: true;
     };
-    emptyProps: PropType<Partial<EmptyProps>>;
+    emptyProps: PropType<ElEmptyProps>;
     tooltip: BooleanConstructor;
-    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    tooltipProps: PropType<EleTooltipProps>;
     popperVisible: BooleanConstructor;
-    gridStyle: PropType<CSSProperties>;
-    itemStyle: PropType<CSSProperties>;
+    gridStyle: PropType<StyleValue>;
+    itemStyle: PropType<StyleValue>;
 }>> & {
     onSelect?: ((_icon: string) => any) | undefined;
 }, {
     tooltip: boolean;
     popperVisible: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-icon-select/components/icon-grid.js

@@ -1,9 +1,10 @@
 "use strict";
 const vue = require("vue");
 const elementPlus = require("element-plus");
+const EleTooltip = require("../../ele-tooltip/index");
 const _sfc_main = vue.defineComponent({
   name: "IconGrid",
-  components: { ElEmpty: elementPlus.ElEmpty, ElTooltip: elementPlus.ElTooltip },
+  components: { ElEmpty: elementPlus.ElEmpty, EleTooltip },
   props: {
     // 选中的图标
     icon: String,
@@ -55,7 +56,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-icon-select-body ele-scrollbar-hover ele-scrollbar-mini" };
+const _hoisted_1 = { class: "ele-icon-select-body" };
 const _hoisted_2 = ["title", "onClick", "onMouseover"];
 const _hoisted_3 = {
   key: 0,
@@ -63,7 +64,7 @@ const _hoisted_3 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElEmpty = vue.resolveComponent("ElEmpty");
-  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.createElementVNode("div", {
       class: "ele-icon-select-grid",
@@ -83,9 +84,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }), 128))
     ], 4),
     !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-      vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
+      vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 60 }, _ctx.emptyProps), null, 16)
     ])) : vue.createCommentVNode("", true),
-    vue.createVNode(_component_ElTooltip, vue.mergeProps({ placement: "top" }, _ctx.tooltipProps, {
+    vue.createVNode(_component_EleTooltip, vue.mergeProps({
+      placement: "top",
+      offset: 6
+    }, _ctx.tooltipProps || {}, {
       content: _ctx.tooltipContent,
       virtualRef: _ctx.virtualRef,
       virtualTriggering: true