@imengyu/vue3-context-menu 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/ContextMenuItem.vue.d.ts +1 -0
  2. package/lib/ContextMenuUtils.d.ts +1 -0
  3. package/lib/ContextSubMenu.vue.d.ts +24 -3
  4. package/lib/ContextSubMenuWrapper.vue.d.ts +4 -4
  5. package/lib/vue3-context-menu.css +1 -1
  6. package/lib/vue3-context-menu.es.js +785 -776
  7. package/lib/vue3-context-menu.es.js.map +1 -1
  8. package/lib/vue3-context-menu.umd.js +1 -1
  9. package/lib/vue3-context-menu.umd.js.map +1 -1
  10. package/package.json +2 -2
package/lib/ContextMenuItem.vue.d.ts CHANGED
@@ -295,6 +295,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
295
295
  rightArrow?(_: {}): any;
296
296
  submenu?(_: {
297
297
  context: MenuItemContext;
298
+ show: boolean;
298
299
  }): any;
299
300
  }>;
300
301
  export default _default;
package/lib/ContextMenuUtils.d.ts CHANGED
@@ -47,6 +47,7 @@ export declare function genContainer(options: MenuOptions): {
47
47
  container: HTMLElement;
48
48
  isNew: boolean;
49
49
  };
50
+ export declare function hashCode(str: string): number;
50
51
  /**
51
52
  * Number to px string
52
53
  * @param value
package/lib/ContextSubMenu.vue.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { type PropType } from 'vue';
1
+ import { type PropType, type Ref } from 'vue';
2
2
  import type { MenuItem, MenuPopDirection, MenuItemContext } from './ContextMenuDefine';
3
3
  /**
4
4
  * Submenu container
5
5
  */
6
6
  export interface SubMenuContext {
7
+ name: Ref<string>;
8
+ el: Ref<HTMLElement | undefined>;
7
9
  isTopLevel: () => boolean;
8
10
  closeSelfAndActiveParent: () => boolean;
9
11
  openCurrentItemSubMenu: () => boolean;
@@ -48,6 +50,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
48
50
  type: PropType<MenuItem[]>;
49
51
  default: null;
50
52
  };
53
+ /**
54
+ * Show
55
+ */
56
+ show: {
57
+ type: BooleanConstructor;
58
+ default: boolean;
59
+ };
51
60
  /**
52
61
  * Max height for this submenu
53
62
  */
@@ -106,7 +115,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
106
115
  y: number;
107
116
  };
108
117
  setPosition: (x: number, y: number) => void;
109
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
118
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
119
+ closeAnimFinished: (...args: any[]) => void;
120
+ }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
110
121
  /**
111
122
  * Items from options
112
123
  */
@@ -114,6 +125,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
114
125
  type: PropType<MenuItem[]>;
115
126
  default: null;
116
127
  };
128
+ /**
129
+ * Show
130
+ */
131
+ show: {
132
+ type: BooleanConstructor;
133
+ default: boolean;
134
+ };
117
135
  /**
118
136
  * Max height for this submenu
119
137
  */
@@ -154,13 +172,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
154
172
  type: PropType<MenuItemContext>;
155
173
  default: null;
156
174
  };
157
- }>>, {
175
+ }>> & {
176
+ onCloseAnimFinished?: ((...args: any[]) => any) | undefined;
177
+ }, {
158
178
  direction: MenuPopDirection;
159
179
  maxHeight: number;
160
180
  maxWidth: string | number;
161
181
  minWidth: string | number;
162
182
  items: MenuItem[];
163
183
  adjustPosition: boolean;
184
+ show: boolean;
164
185
  parentMenuItemContext: MenuItemContext;
165
186
  }, {}>, {
166
187
  default?(_: {}): any;
package/lib/ContextSubMenuWrapper.vue.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
17
17
  * Show menu?
18
18
  */
19
19
  show: {
20
- type: BooleanConstructor;
20
+ type: null;
21
21
  default: null;
22
22
  };
23
23
  /**
@@ -43,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
43
43
  height: number;
44
44
  };
45
45
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
46
- close: (...args: any[]) => void;
47
46
  closeAnimFinished: (...args: any[]) => void;
47
+ close: (...args: any[]) => void;
48
48
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
49
49
  /**
50
50
  * Menu options
@@ -57,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
57
57
  * Show menu?
58
58
  */
59
59
  show: {
60
- type: BooleanConstructor;
60
+ type: null;
61
61
  default: null;
62
62
  };
63
63
  /**
@@ -79,8 +79,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
79
79
  onCloseAnimFinished?: ((...args: any[]) => any) | undefined;
80
80
  }, {
81
81
  options: MenuOptions;
82
+ show: any;
82
83
  container: HTMLElement;
83
- show: boolean;
84
84
  isFullScreenContainer: boolean;
85
85
  }, {}>, {
86
86
  default?(_: {}): any;
package/lib/vue3-context-menu.css CHANGED
@@ -1 +1 @@
1
- :root{--vue-scroll-rect-scrollbar-thumb-color: rgba(122,122,122, .3);--vue-scroll-rect-scrollbar-thumb-color-light: rgba(122, 122, 122, .5);--vue-scroll-rect-scrollbar-thumb-color-pressed: rgba(112, 112, 112, .2);--vue-scroll-rect-scrollbar-thumb-radius: 5px;--vue-scroll-rect-scrollbar-thumb-margin: 0px;--vue-scroll-rect-scrollbar-size: 8px}.vue-scroll-rect{position:relative;width:100%;height:100%;margin:0;overflow:hidden}.vue-scroll-rect>.scroll-content{position:relative;max-width:100%;max-height:100%}.vue-scroll-rect>.scroll-content::-webkit-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content::-ms-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content.both{overflow:scroll}.vue-scroll-rect>.scroll-content.horizontal{overflow-x:scroll}.vue-scroll-rect>.scroll-content.vertical{overflow-y:scroll}.vue-scroll-rect:hover>.scrollbar{opacity:1;transition:opacity .1s}.vue-scroll-rect.always-show-scrollbar>.scrollbar,.vue-scroll-rect .dragging>.scrollbar{opacity:1}.vue-scroll-rect.background-clickable>.scrollbar{pointer-events:all}.vue-scroll-rect>.scrollbar{position:absolute;opacity:0;transition:opacity 1.5s;pointer-events:none}.vue-scroll-rect>.scrollbar:hover{opacity:1}.vue-scroll-rect>.scrollbar .thumb{position:absolute;background-color:var(--vue-scroll-rect-scrollbar-thumb-color);border-radius:var(--vue-scroll-rect-scrollbar-thumb-radius);pointer-events:all}.vue-scroll-rect>.scrollbar .thumb:hover{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-light)}.vue-scroll-rect>.scrollbar .thumb:active{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-pressed)}.vue-scroll-rect>.scrollbar.horizontal{left:0;bottom:0;right:0;height:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.horizontal .thumb{top:var(--vue-scroll-rect-scrollbar-thumb-margin);bottom:var(--vue-scroll-rect-scrollbar-thumb-margin)}.vue-scroll-rect>.scrollbar.vertical{top:0;bottom:0;right:0;width:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.vertical .thumb{left:var(--vue-scroll-rect-scrollbar-thumb-margin);right:var(--vue-scroll-rect-scrollbar-thumb-margin)}:root{--mx-menu-backgroud: #fff;--mx-menu-hover-backgroud: #f1f1f1;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #f1f1f1;--mx-menu-divider: #f0f0f0;--mx-menu-text: #2e2e2e;--mx-menu-hover-text: #2e2e2e;--mx-menu-active-text: #2e2e2e;--mx-menu-open-text: #2e2e2e;--mx-menu-open-hover-text: #2e2e2e;--mx-menu-disabled-text: #c9c8c8;--mx-menu-icon-size: 16px;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-scrollbar-thumb-color: rgba(0, 0, 0, .2);--mx-menu-scrollbar-thumb-color-light: rgba(0, 0, 0, .3);--mx-menu-scrollbar-thumb-color-pressed: rgba(0, 0, 0, .1);--mx-menu-shortcut-backgroud: #ebebeb;--mx-menu-shortcut-backgroud-hover:#ebebeb;--mx-menu-shortcut-backgroud-active:#ebebeb;--mx-menu-shortcut-backgroud-open:#ebebeb;--mx-menu-shortcut-backgroud-disabled:#fdfdfd;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #424242;--mx-menu-shortcut-text-active: #424242;--mx-menu-shortcut-text-open: #424242;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-placeholder-width: 24px}.mx-context-menu{pointer-events:all;display:inline-block;overflow:visible;position:absolute;background-color:var(--mx-menu-backgroud);border-radius:var(--mx-menu-backgroud-radius);padding:12px 0;box-shadow:0 10px 40px 10px var(--mx-menu-shadow-color);opacity:1;transition:opacity .2s ease-in-out;--vue-scroll-rect-scrollbar-thumb-color: var(--mx-menu-scrollbar-thumb-color);--vue-scroll-rect-scrollbar-thumb-color-light: var(--mx-menu-scrollbar-thumb-color-light);--vue-scroll-rect-scrollbar-thumb-color-pressed: var(--mx-menu-scrollbar-thumb-color-pressed)}.mx-context-menu-items{position:relative;overflow:visible}.mx-context-menu-scroll{overscroll-behavior:contain}.mx-context-menu-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;padding:6px 15px;-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;text-overflow:ellipsis;color:var(--mx-menu-text)}.mx-context-menu-item .mx-right-arrow,.mx-context-menu-item .mx-checked-mark{fill:var(--mx-menu-text)}.mx-context-menu-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-right-arrow,.mx-context-menu-item:hover .mx-checked-mark{fill:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-hover);color:var(--mx-menu-shortcut-text-hover)}.mx-context-menu-item:active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-right-arrow,.mx-context-menu-item:active .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-context-menu-item.open{background-color:var(--mx-menu-open-backgroud);color:var(--mx-menu-open-text)}.mx-context-menu-item.open:hover{background-color:var(--mx-menu-open-hover-backgroud);color:var(--mx-menu-open-hover-text)}.mx-context-menu-item.open .mx-right-arrow,.mx-context-menu-item.open .mx-checked-mark{fill:var(--mx-menu-open-text)}.mx-context-menu-item.open .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-open);color:var(--mx-menu-shortcut-text-open)}.mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud)}.mx-context-menu-item.disabled{color:var(--mx-menu-disabled-text);cursor:not-allowed}.mx-context-menu-item.disabled:hover,.mx-context-menu-item.disabled:active{background-color:transparent}.mx-context-menu-item.disabled .mx-right-arrow,.mx-context-menu-item.disabled .mx-checked-mark{fill:var(--mx-menu-disabled-text)}.mx-context-menu-item.disabled .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-disabled);color:var(--mx-menu-shortcut-text-second)}.mx-context-menu-item .mx-item-row{display:flex;flex-direction:row;align-items:center;max-width:100%}.mx-context-menu-item .mx-icon-placeholder{position:relative;display:flex;flex-direction:row;align-items:center;height:auto;overflow:hidden}.mx-context-menu-item .mx-icon-placeholder.preserve-width{width:var(--mx-menu-placeholder-width)}.mx-context-menu-item .icon{display:inline-block;font-size:var(--mx-menu-icon-size)}.mx-context-menu-item .icon.svg{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-context-menu-item .label{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:16px}.mx-context-menu-item-wrapper{position:relative}.mx-context-menu-item-sperator{display:block;padding:5px 0;background-color:var(--mx-menu-backgroud)}.mx-context-menu-item-sperator:after{display:block;content:"";background-color:var(--mx-menu-divider);height:1px}.mx-right-arrow{width:14px;height:14px}.mx-checked-mark{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-shortcut{position:relative;justify-self:flex-end;font-size:11.5px;padding:2px 4px;background-color:var(--mx-menu-shortcut-backgroud);color:var(--mx-menu-shortcut-text)}.mx-menu-bar.dark,.mx-context-menu.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #464646;--mx-menu-text: #ffffff;--mx-menu-hover-text: #ffffff;--mx-menu-active-text: #ffffff;--mx-menu-open-text: #ffffff;--mx-menu-open-hover-text: #ffffff;--mx-menu-disabled-text: #9c9c9c;--mx-menu-shadow-color: rgba(51, 51, 51, .2);--mx-menu-scrollbar-thumb-color: rgba(255, 255, 255, .3);--mx-menu-scrollbar-thumb-color-light: rgba(255, 255, 255, .5);--mx-menu-scrollbar-thumb-color-pressed: rgba(255, 255, 255, .2);--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d}.mx-menu-bar.flat,.mx-context-menu.flat{border-radius:0;padding:7px 0;box-shadow:0 1px 2px 1px var(--mx-menu-shadow-color)}.mx-menu-bar.flat .mx-context-menu-item,.mx-context-menu.flat .mx-context-menu-item{padding:3px 12px}.mx-menu-bar.win10,.mx-context-menu.win10{border-radius:0;padding:8px 0;border:1px solid var(--mx-menu-border-color);box-shadow:2px 2px 1px 0 var(--mx-menu-shadow-color)}.mx-menu-bar.win10,.mx-context-menu.win10{--mx-menu-backgroud: #eeeeee;--mx-menu-hover-backgroud: #d8d8d8;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #d8d8d8;--mx-menu-divider: #aaaaaa;--mx-menu-border-color: #b1b1b1;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover: transparent;--mx-menu-shortcut-backgroud-active: transparent;--mx-menu-shortcut-backgroud-open: transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #272727;--mx-menu-shortcut-text-hover: #272727;--mx-menu-shortcut-text-active: #272727;--mx-menu-shortcut-text-open: #272727;--mx-menu-shortcut-text-disabled: #6b6b6b}.mx-menu-bar.win10 .mx-context-menu-item,.mx-context-menu.win10 .mx-context-menu-item{padding:2px 4px;margin:0 4px}.mx-menu-bar.win10 .mx-context-menu-item-sperator,.mx-context-menu.win10 .mx-context-menu-item-sperator{margin:0 4px}.mx-menu-bar.win10.dark,.mx-context-menu.win10.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #808080;--mx-menu-border-color: #656565;--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d;padding:8px 0}.mx-menu-bar.win10.dark .mx-context-menu-item,.mx-context-menu.win10.dark .mx-context-menu-item{padding:6px 12px;margin:0}.mx-menu-bar.win10.dark .mx-context-menu-item-sperator,.mx-context-menu.win10.dark .mx-context-menu-item-sperator{margin:0 7px}.mx-menu-bar.mac,.mx-context-menu.mac{padding:8px 0;box-shadow:0 5px 7px 1px var(--mx-menu-shadow-color);border:1px solid var(--mx-menu-border-color)}.mx-menu-bar.mac,.mx-context-menu.mac{--mx-menu-backgroud: #ececec;--mx-menu-hover-backgroud: #0165e1;--mx-menu-active-backgroud: #0165e1;--mx-menu-open-backgroud: #858585;--mx-menu-open-hover-backgroud: #0165e1;--mx-menu-divider: #d2d2d2;--mx-menu-text: #232323;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #bbbbbb;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-border-color: #bbbbbb}.mx-menu-bar.mac.dark,.mx-context-menu.mac.dark{--mx-menu-backgroud: #333333;--mx-menu-hover-backgroud: #0153d2;--mx-menu-active-backgroud: #0153d2;--mx-menu-open-hover-backgroud: #0153d2;--mx-menu-open-backgroud: #414346;--mx-menu-divider: #575757;--mx-menu-text: #dcdcdc;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #6a6a6a;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #dadada;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #6a6a6a;--mx-menu-border-color: #222}.mx-menu-bar.mac .mx-context-menu-item,.mx-context-menu.mac .mx-context-menu-item{border-radius:5px;margin:0 6px;padding:3px 6px}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text);outline:none}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-shortcut,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-menu-bar.mac .mx-context-menu-item-sperator,.mx-context-menu.mac .mx-context-menu-item-sperator{margin:0 12px}.mx-context-menu .vue-scroll-rect>.scroll-content{overflow-y:scroll;height:100%;width:auto;position:relative!important}.mx-menu-ghost-host{position:absolute;left:0;bottom:0;right:0;top:0;overflow:hidden;pointer-events:none}.mx-menu-ghost-host.fullscreen{position:fixed}.mx-menu-bar{flex:1;display:flex;flex-direction:row;align-items:center;background-color:var(--mx-menu-backgroud);padding:5px 0}.mx-menu-bar.mini{flex-grow:0}.mx-menu-bar .mx-menu-bar-content{display:flex;flex-direction:row;align-items:center}.mx-menu-bar .mx-menu-bar-item{padding:2px 8px;border-radius:5px;-webkit-user-select:none;user-select:none;background-color:var(--mx-menu-backgroud);color:var(--mx-menu-text)}.mx-menu-bar .mx-menu-bar-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:hover .mx-menu-bar-icon-menu{fill:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:active,.mx-menu-bar .mx-menu-bar-item.active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-item:active .mx-menu-bar-icon-menu,.mx-menu-bar .mx-menu-bar-item.active .mx-menu-bar-icon-menu{fill:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-icon-menu{fill:var(--mx-menu-text);width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-menu-bar.flat .mx-menu-bar-item{border-radius:0}
1
+ :root{--vue-scroll-rect-scrollbar-thumb-color: rgba(122,122,122, .3);--vue-scroll-rect-scrollbar-thumb-color-light: rgba(122, 122, 122, .5);--vue-scroll-rect-scrollbar-thumb-color-pressed: rgba(112, 112, 112, .2);--vue-scroll-rect-scrollbar-thumb-radius: 5px;--vue-scroll-rect-scrollbar-thumb-margin: 0px;--vue-scroll-rect-scrollbar-size: 8px}.vue-scroll-rect{position:relative;width:100%;height:100%;margin:0;overflow:hidden}.vue-scroll-rect>.scroll-content{position:relative;max-width:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none}.vue-scroll-rect>.scroll-content::-webkit-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content::-ms-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content.both{overflow:scroll}.vue-scroll-rect>.scroll-content.horizontal{overflow-x:scroll}.vue-scroll-rect>.scroll-content.vertical{overflow-y:scroll}.vue-scroll-rect:hover>.scrollbar{opacity:1;transition:opacity .1s}.vue-scroll-rect.always-show-scrollbar>.scrollbar,.vue-scroll-rect .dragging>.scrollbar{opacity:1}.vue-scroll-rect.background-clickable>.scrollbar{pointer-events:all}.vue-scroll-rect>.scrollbar{position:absolute;opacity:0;transition:opacity 1.5s;pointer-events:none}.vue-scroll-rect>.scrollbar:hover{opacity:1}.vue-scroll-rect>.scrollbar .thumb{position:absolute;background-color:var(--vue-scroll-rect-scrollbar-thumb-color);border-radius:var(--vue-scroll-rect-scrollbar-thumb-radius);pointer-events:all}.vue-scroll-rect>.scrollbar .thumb:hover{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-light)}.vue-scroll-rect>.scrollbar .thumb:active{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-pressed)}.vue-scroll-rect>.scrollbar.horizontal{left:0;bottom:0;right:0;height:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.horizontal .thumb{top:var(--vue-scroll-rect-scrollbar-thumb-margin);bottom:var(--vue-scroll-rect-scrollbar-thumb-margin)}.vue-scroll-rect>.scrollbar.vertical{top:0;bottom:0;right:0;width:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.vertical .thumb{left:var(--vue-scroll-rect-scrollbar-thumb-margin);right:var(--vue-scroll-rect-scrollbar-thumb-margin)}:root{--mx-menu-backgroud: #fff;--mx-menu-hover-backgroud: #f1f1f1;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #f1f1f1;--mx-menu-divider: #f0f0f0;--mx-menu-text: #2e2e2e;--mx-menu-hover-text: #2e2e2e;--mx-menu-active-text: #2e2e2e;--mx-menu-open-text: #2e2e2e;--mx-menu-open-hover-text: #2e2e2e;--mx-menu-disabled-text: #c9c8c8;--mx-menu-icon-size: 16px;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-scrollbar-thumb-color: rgba(0, 0, 0, .2);--mx-menu-scrollbar-thumb-color-light: rgba(0, 0, 0, .3);--mx-menu-scrollbar-thumb-color-pressed: rgba(0, 0, 0, .1);--mx-menu-shortcut-backgroud: #ebebeb;--mx-menu-shortcut-backgroud-hover:#ebebeb;--mx-menu-shortcut-backgroud-active:#ebebeb;--mx-menu-shortcut-backgroud-open:#ebebeb;--mx-menu-shortcut-backgroud-disabled:#fdfdfd;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #424242;--mx-menu-shortcut-text-active: #424242;--mx-menu-shortcut-text-open: #424242;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-placeholder-width: 24px}.mx-context-menu{pointer-events:all;display:inline-block;overflow:visible;position:absolute;background-color:var(--mx-menu-backgroud);border-radius:var(--mx-menu-backgroud-radius);padding:12px 0;box-shadow:0 10px 40px 10px var(--mx-menu-shadow-color);opacity:1;transition:opacity .2s ease-in-out;--vue-scroll-rect-scrollbar-thumb-color: var(--mx-menu-scrollbar-thumb-color);--vue-scroll-rect-scrollbar-thumb-color-light: var(--mx-menu-scrollbar-thumb-color-light);--vue-scroll-rect-scrollbar-thumb-color-pressed: var(--mx-menu-scrollbar-thumb-color-pressed)}.mx-context-menu-items{position:relative;overflow:visible}.mx-context-menu-scroll{overscroll-behavior:contain}.mx-context-menu-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;padding:6px 15px;-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;text-overflow:ellipsis;color:var(--mx-menu-text)}.mx-context-menu-item .mx-right-arrow,.mx-context-menu-item .mx-checked-mark{fill:var(--mx-menu-text)}.mx-context-menu-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-right-arrow,.mx-context-menu-item:hover .mx-checked-mark{fill:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-hover);color:var(--mx-menu-shortcut-text-hover)}.mx-context-menu-item:active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-right-arrow,.mx-context-menu-item:active .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-context-menu-item.open{background-color:var(--mx-menu-open-backgroud);color:var(--mx-menu-open-text)}.mx-context-menu-item.open:hover{background-color:var(--mx-menu-open-hover-backgroud);color:var(--mx-menu-open-hover-text)}.mx-context-menu-item.open .mx-right-arrow,.mx-context-menu-item.open .mx-checked-mark{fill:var(--mx-menu-open-text)}.mx-context-menu-item.open .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-open);color:var(--mx-menu-shortcut-text-open)}.mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud)}.mx-context-menu-item.disabled{color:var(--mx-menu-disabled-text);cursor:not-allowed}.mx-context-menu-item.disabled:hover,.mx-context-menu-item.disabled:active{background-color:transparent}.mx-context-menu-item.disabled .mx-right-arrow,.mx-context-menu-item.disabled .mx-checked-mark{fill:var(--mx-menu-disabled-text)}.mx-context-menu-item.disabled .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-disabled);color:var(--mx-menu-shortcut-text-second)}.mx-context-menu-item .mx-item-row{display:flex;flex-direction:row;align-items:center;max-width:100%}.mx-context-menu-item .mx-icon-placeholder{position:relative;display:flex;flex-direction:row;align-items:center;height:auto;overflow:hidden}.mx-context-menu-item .mx-icon-placeholder.preserve-width{width:var(--mx-menu-placeholder-width)}.mx-context-menu-item .icon{display:inline-block;font-size:var(--mx-menu-icon-size)}.mx-context-menu-item .icon.svg{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-context-menu-item .label{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:16px}.mx-context-menu-item-wrapper{position:relative}.mx-context-menu-item-sperator{display:block;padding:5px 0;background-color:var(--mx-menu-backgroud)}.mx-context-menu-item-sperator:after{display:block;content:"";background-color:var(--mx-menu-divider);height:1px}.mx-right-arrow{width:14px;height:14px}.mx-checked-mark{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-shortcut{position:relative;justify-self:flex-end;font-size:11.5px;padding:2px 4px;background-color:var(--mx-menu-shortcut-backgroud);color:var(--mx-menu-shortcut-text)}.mx-menu-bar.dark,.mx-context-menu.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #464646;--mx-menu-text: #ffffff;--mx-menu-hover-text: #ffffff;--mx-menu-active-text: #ffffff;--mx-menu-open-text: #ffffff;--mx-menu-open-hover-text: #ffffff;--mx-menu-disabled-text: #9c9c9c;--mx-menu-shadow-color: rgba(51, 51, 51, .2);--mx-menu-scrollbar-thumb-color: rgba(255, 255, 255, .3);--mx-menu-scrollbar-thumb-color-light: rgba(255, 255, 255, .5);--mx-menu-scrollbar-thumb-color-pressed: rgba(255, 255, 255, .2);--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d}.mx-menu-bar.flat,.mx-context-menu.flat{border-radius:0;padding:7px 0;box-shadow:0 1px 2px 1px var(--mx-menu-shadow-color)}.mx-menu-bar.flat .mx-context-menu-item,.mx-context-menu.flat .mx-context-menu-item{padding:3px 12px}.mx-menu-bar.win10,.mx-context-menu.win10{border-radius:0;padding:8px 0;border:1px solid var(--mx-menu-border-color);box-shadow:2px 2px 1px 0 var(--mx-menu-shadow-color)}.mx-menu-bar.win10,.mx-context-menu.win10{--mx-menu-backgroud: #eeeeee;--mx-menu-hover-backgroud: #d8d8d8;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #d8d8d8;--mx-menu-divider: #aaaaaa;--mx-menu-border-color: #b1b1b1;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover: transparent;--mx-menu-shortcut-backgroud-active: transparent;--mx-menu-shortcut-backgroud-open: transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #272727;--mx-menu-shortcut-text-hover: #272727;--mx-menu-shortcut-text-active: #272727;--mx-menu-shortcut-text-open: #272727;--mx-menu-shortcut-text-disabled: #6b6b6b}.mx-menu-bar.win10 .mx-context-menu-item,.mx-context-menu.win10 .mx-context-menu-item{padding:2px 4px;margin:0 4px}.mx-menu-bar.win10 .mx-context-menu-item-sperator,.mx-context-menu.win10 .mx-context-menu-item-sperator{margin:0 4px}.mx-menu-bar.win10.dark,.mx-context-menu.win10.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #808080;--mx-menu-border-color: #656565;--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d;padding:8px 0}.mx-menu-bar.win10.dark .mx-context-menu-item,.mx-context-menu.win10.dark .mx-context-menu-item{padding:6px 12px;margin:0}.mx-menu-bar.win10.dark .mx-context-menu-item-sperator,.mx-context-menu.win10.dark .mx-context-menu-item-sperator{margin:0 7px}.mx-menu-bar.mac,.mx-context-menu.mac{padding:8px 0;box-shadow:0 5px 7px 1px var(--mx-menu-shadow-color);border:1px solid var(--mx-menu-border-color)}.mx-menu-bar.mac,.mx-context-menu.mac{--mx-menu-backgroud: #ececec;--mx-menu-hover-backgroud: #0165e1;--mx-menu-active-backgroud: #0165e1;--mx-menu-open-backgroud: #858585;--mx-menu-open-hover-backgroud: #0165e1;--mx-menu-divider: #d2d2d2;--mx-menu-text: #232323;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #bbbbbb;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-border-color: #bbbbbb}.mx-menu-bar.mac.dark,.mx-context-menu.mac.dark{--mx-menu-backgroud: #333333;--mx-menu-hover-backgroud: #0153d2;--mx-menu-active-backgroud: #0153d2;--mx-menu-open-hover-backgroud: #0153d2;--mx-menu-open-backgroud: #414346;--mx-menu-divider: #575757;--mx-menu-text: #dcdcdc;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #6a6a6a;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #dadada;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #6a6a6a;--mx-menu-border-color: #222}.mx-menu-bar.mac .mx-context-menu-item,.mx-context-menu.mac .mx-context-menu-item{border-radius:5px;margin:0 6px;padding:3px 6px}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text);outline:none}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-shortcut,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-menu-bar.mac .mx-context-menu-item-sperator,.mx-context-menu.mac .mx-context-menu-item-sperator{margin:0 12px}.mx-context-menu .vue-scroll-rect>.scroll-content{overflow-y:scroll;height:100%;width:auto;position:relative!important}.mx-menu-ghost-host{position:absolute;left:0;bottom:0;right:0;top:0;overflow:hidden;pointer-events:none}.mx-menu-ghost-host.fullscreen{position:fixed}.mx-menu-bar{flex:1;display:flex;flex-direction:row;align-items:center;background-color:var(--mx-menu-backgroud);padding:5px 0}.mx-menu-bar.mini{flex-grow:0}.mx-menu-bar .mx-menu-bar-content{display:flex;flex-direction:row;align-items:center}.mx-menu-bar .mx-menu-bar-item{padding:2px 8px;border-radius:5px;-webkit-user-select:none;user-select:none;background-color:var(--mx-menu-backgroud);color:var(--mx-menu-text)}.mx-menu-bar .mx-menu-bar-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:hover .mx-menu-bar-icon-menu{fill:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:active,.mx-menu-bar .mx-menu-bar-item.active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-item:active .mx-menu-bar-icon-menu,.mx-menu-bar .mx-menu-bar-item.active .mx-menu-bar-icon-menu{fill:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-icon-menu{fill:var(--mx-menu-text);width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-menu-bar.flat .mx-menu-bar-item{border-radius:0}