@vaadin/context-menu 22.0.0-alpha7

package/theme/lumo/vaadin-context-menu-styles.js

@@ -0,0 +1,127 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+
+const contextMenuOverlay = css`
+  :host([phone]) {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: var(--vaadin-overlay-viewport-bottom) !important;
+    left: 0 !important;
+    align-items: stretch;
+    justify-content: flex-end;
+  }
+
+  /* TODO These style overrides should not be needed.
+   We should instead offer a way to have non-selectable items inside the context menu. */
+
+  :host {
+    --_lumo-list-box-item-selected-icon-display: none;
+    --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
+  }
+
+  [part='overlay'] {
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
+  moduleId: 'lumo-context-menu-overlay'
+});
+
+registerStyles(
+  'vaadin-context-menu-list-box',
+  css`
+    :host(.vaadin-menu-list-box) {
+      --_lumo-list-box-item-selected-icon-display: block;
+    }
+
+    /* Normal item */
+    [part='items'] ::slotted(.vaadin-menu-item) {
+      -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
+      cursor: default;
+    }
+
+    [part='items'] ::slotted(.vaadin-menu-item) {
+      outline: none;
+      border-radius: var(--lumo-border-radius-m);
+      padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    }
+
+    :host(.vaadin-menu-list-box) [part='items'] ::slotted(.vaadin-menu-item) {
+      padding-left: calc(var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    }
+
+    /* Hovered item */
+    /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+    [part='items'] ::slotted(.vaadin-menu-item:hover:not([disabled])),
+    [part='items'] ::slotted(.vaadin-menu-item[expanded]:not([disabled])) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    /* RTL styles */
+    :host([dir='rtl'])[part='items'] ::slotted(.vaadin-menu-item) {
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+      padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+    }
+
+    :host([dir='rtl'].vaadin-menu-list-box) [part='items'] ::slotted(.vaadin-menu-item) {
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-border-radius-m) / 4);
+    }
+
+    /* Focused item */
+    @media (pointer: coarse) {
+      [part='items'] ::slotted(.vaadin-menu-item:hover:not([expanded]):not([disabled])) {
+        background-color: transparent;
+      }
+    }
+  `,
+  { moduleId: 'lumo-context-menu-list-box' }
+);
+
+registerStyles(
+  'vaadin-context-menu-item',
+  css`
+    :host {
+      user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host(.vaadin-menu-item[menu-item-checked])::before {
+      opacity: 1;
+    }
+
+    :host(.vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      font-family: lumo-icons;
+      font-size: var(--lumo-icon-size-xs);
+      content: var(--lumo-icons-angle-right);
+      color: var(--lumo-tertiary-text-color);
+    }
+
+    :host(:not([dir='rtl']).vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      margin-right: calc(var(--lumo-space-m) * -1);
+      padding-left: var(--lumo-space-m);
+    }
+
+    :host([expanded]) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    /* RTL styles */
+    :host([dir='rtl'].vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      content: var(--lumo-icons-angle-left);
+      margin-left: calc(var(--lumo-space-m) * -1);
+      padding-right: var(--lumo-space-m);
+    }
+  `,
+  { moduleId: 'lumo-context-menu-item' }
+);

package/theme/lumo/vaadin-context-menu.js

@@ -0,0 +1,4 @@
+import './vaadin-context-menu-styles.js';
+import '@vaadin/item/theme/lumo/vaadin-item.js';
+import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
+import '../../src/vaadin-context-menu.js';

package/theme/material/vaadin-context-menu-styles.js

@@ -0,0 +1,82 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+
+const contextMenuOverlay = css`
+  [part='overlay'] {
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
+  moduleId: 'material-context-menu-overlay'
+});
+
+registerStyles(
+  'vaadin-context-menu-list-box',
+  css`
+    [part='items'] ::slotted(.vaadin-menu-item:not(hr)) {
+      min-height: 36px;
+      padding: 8px 32px 8px 10px;
+      font-size: var(--material-small-font-size);
+      line-height: 24px;
+    }
+
+    :host([dir='rtl']) [part='items'] ::slotted(.vaadin-menu-item:not(hr)) {
+      padding: 8px 10px 8px 32px;
+    }
+
+    [part='items'] ::slotted(.vaadin-menu-item:hover:not([disabled])) {
+      background-color: var(--material-secondary-background-color);
+    }
+
+    [part='items'] ::slotted(.vaadin-menu-item[focused]:not([disabled])) {
+      background-color: var(--material-divider-color);
+    }
+
+    @media (pointer: coarse) {
+      [part='items'] ::slotted(.vaadin-menu-item:hover:not([disabled])),
+      [part='items'] ::slotted(.vaadin-menu-item[focused]:not([disabled])) {
+        background-color: transparent;
+      }
+    }
+  `,
+  { moduleId: 'material-context-menu-list-box' }
+);
+
+registerStyles(
+  'vaadin-context-menu-item',
+  css`
+    :host(.vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      font-family: material-icons;
+      font-size: var(--material-icon-font-size);
+    }
+
+    :host(:not([dir='rtl']).vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      content: var(--material-icons-chevron-right);
+      padding-left: 9px;
+      margin-right: -9px;
+    }
+
+    :host([dir='rtl'].vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+      content: var(--material-icons-chevron-left);
+      padding-right: 9px;
+      margin-left: -9px;
+    }
+
+    :host(.vaadin-menu-item)::before {
+      display: block;
+    }
+
+    :host(.vaadin-menu-item[menu-item-checked])::before {
+      content: var(--material-icons-check);
+    }
+
+    :host([expanded]) {
+      background-color: var(--material-secondary-background-color);
+    }
+  `,
+  { moduleId: 'material-context-menu-item' }
+);

package/theme/material/vaadin-context-menu.js

@@ -0,0 +1,4 @@
+import './vaadin-context-menu-styles.js';
+import '@vaadin/item/theme/material/vaadin-item.js';
+import '@vaadin/list-box/theme/material/vaadin-list-box.js';
+import '../../src/vaadin-context-menu.js';

package/vaadin-context-menu.d.ts

@@ -0,0 +1,2 @@
+export * from './src/vaadin-context-menu.js';
+export * from './src/interfaces';

package/vaadin-context-menu.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-context-menu.js';
+export * from './src/vaadin-context-menu.js';