@redvars/peacock 3.3.0 → 3.3.1

package/src/peacock-loader.ts

@@ -22,7 +22,7 @@ import { Checkbox } from './checkbox/checkbox.js';
 
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
-import { MenuList } from './menu/menu-list/menu-list.js';
+import { SubMenu } from './menu/sub-menu/sub-menu.js';
 
 import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
@@ -48,10 +48,12 @@ import { Tabs } from './tabs/tabs.js';
 import { Tab } from './tabs/tab.js';
 import { TabPanel } from './tabs/tab-panel.js';
 import { Slider } from './slider/slider.js';
-
+import { Table } from './table/table.js';
+import { Pagination } from './pagination/pagination.js';
+import { TreeView } from './tree-view/tree-view.js';
 
 const distDirectory = `${import.meta.url}/..`;
-await loadCSS(`${distDirectory  }/assets/styles.css`);
+await loadCSS(`${distDirectory}/assets/styles.css`);
 
 /*
 import tooltipStyles from './popover/tooltip.css-component.scss';
@@ -122,7 +124,7 @@ const loaderConfig: LoaderConfig = {
       CustomElementClass: TabGroup,
     },
     'wc-tab': {
-      CustomElementClass: Tab
+      CustomElementClass: Tab,
     },
     'wc-tab-panel': {
       CustomElementClass: TabPanel,
@@ -194,30 +196,42 @@ const loaderConfig: LoaderConfig = {
     'wc-empty-state': {
       CustomElementClass: EmptyState,
     },
-    'wc-base-menu': {
+    'wc-menu': {
       CustomElementClass: Menu,
     },
     'wc-menu-item': {
       CustomElementClass: MenuItem,
     },
-    'wc-menu-list': {
-      CustomElementClass: MenuList,
+    'wc-sub-menu': {
+      CustomElementClass: SubMenu,
     },
     'wc-container': {
-      CustomElementClass: Container
+      CustomElementClass: Container,
     },
     'wc-image': {
-      CustomElementClass: Image
+      CustomElementClass: Image,
     },
     'wc-slider': {
-      CustomElementClass: Slider
+      CustomElementClass: Slider,
+    },
+    'wc-table': {
+      CustomElementClass: Table,
+    },
+    'wc-pagination': {
+      CustomElementClass: Pagination,
+    },
+    'wc-tree-view': {
+      CustomElementClass: TreeView,
+    },
+    'wc-tree-node': {
+      CustomElementClass: TreeView.Node,
     },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },
     'wc-chart-pie': {
       importPath: `${distDirectory}/chart-pie.js`,
-    }
+    },
   },
 };
 

package/src/popover/PopoverController.ts

@@ -22,19 +22,25 @@ export class PopoverController implements ReactiveController {
   }
 
   // Set up the floating logic
-  async updatePosition(reference: HTMLElement | null, floating: HTMLElement) {
+  async updatePosition(
+    reference: HTMLElement | null,
+    floating: HTMLElement,
+    options?: {
+      placement?: Placement;
+      offset?: number;
+    },
+  ) {
     if (!reference) return;
 
     this.cleanup?.();
 
+    const placement = options?.placement ?? this.options.placement;
+    const spacing = options?.offset ?? this.options.offset;
+
     this.cleanup = autoUpdate(reference, floating, async () => {
       const { x, y } = await computePosition(reference, floating, {
-        placement: this.options.placement,
-        middleware: [
-          offset(this.options.offset),
-          flip(),
-          shift({ padding: 4 }),
-        ],
+        placement,
+        middleware: [offset(spacing), flip(), shift({ padding: 4 })],
       });
 
       Object.assign(floating.style, {

package/src/table/index.ts

@@ -0,0 +1 @@
+export { Table } from './table.js';

package/src/table/table.scss

@@ -0,0 +1,174 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  min-height: 20em;
+  --table-border-color: var(--color-outline-variant);
+  --table-border: 1px solid var(--table-border-color);
+  --table-col-content-padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+}
+
+.table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+
+  @include mixin.get-typography-not-important('body-medium');
+
+  .table-scroll-container {
+    position: relative;
+    overflow: auto;
+    height: 100%;
+  }
+
+  .empty-table {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .empty-state {
+      width: 10rem;
+    }
+  }
+
+  wc-pagination {
+    border-top: 1px solid var(--table-border-color);
+  }
+
+  &.horizontal-scrolled {
+    .fixed-columns::after {
+      box-shadow: 10px 0 20px -20px var(--color-outline) inset;
+      content: ' ';
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: -20px;
+      width: 20px;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+
+  .columns-container {
+    display: flex;
+  }
+
+  .col {
+    margin: 0;
+    color: var(--color-on-surface);
+    flex-shrink: 0;
+
+    .col-content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .col-text {
+        padding: var(--table-col-content-padding);
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .col-template {
+        width: 100%;
+      }
+
+      .col-action {
+        --button-border-radius: 0;
+
+        &.has-focus {
+          z-index: 12;
+        }
+      }
+
+      .checkbox {
+        padding: 0 var(--spacing-100, 0.5rem);
+      }
+    }
+
+    &.center .col-content {
+      justify-content: center;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+
+  .fixed-columns {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .scrollable-columns {
+    flex: 0 0 auto;
+  }
+}
+
+.header {
+  z-index: 2;
+  position: sticky;
+  top: 0;
+
+  @include mixin.get-typography-not-important('label-medium');
+
+  .col {
+    background: var(--color-surface-variant, #f4f4f4);
+
+    &.sort {
+      background: var(--color-secondary-container, #e8eaf6);
+    }
+  }
+}
+
+.body {
+  .row {
+    .col {
+      cursor: pointer;
+      background: var(--color-surface, #fff);
+      border-bottom: 1px solid var(--color-surface-variant, #f4f4f4);
+
+      &.col-checkbox .col-content {
+        border: 0;
+      }
+
+      .col-content {
+        border: 2px solid transparent;
+        border-bottom: 1px solid transparent;
+
+        .col-text {
+          text-wrap: wrap;
+        }
+      }
+
+      &:focus {
+        outline: none;
+        border-bottom-color: var(--color-primary);
+        z-index: 1;
+
+        .col-content {
+          border-color: var(--color-primary);
+        }
+      }
+    }
+
+    &:hover {
+      .col {
+        background-color: var(--color-surface-container-low, #f8f8f8);
+      }
+    }
+  }
+}