@redvars/peacock 3.2.10 → 3.3.1

package/src/pagination/pagination.ts

@@ -0,0 +1,135 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './pagination.scss';
+
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+
+/**
+ * @label Pagination
+ * @tag wc-pagination
+ * @rawTag pagination
+ * @summary A pagination control with page size selector, item count display, and previous/next navigation.
+ * @overview
+ * <p>The pagination component provides controls for navigating through paged data sets.</p>
+ *
+ * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.
+ *
+ * @example
+ * ```html
+ * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * ```
+ * @tags navigation, data
+ */
+export class Pagination extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The current page number (1-based). Defaults to `1`.
+   */
+  @property({ type: Number })
+  page: number = 1;
+
+  /**
+   * The number of rows per page. Defaults to `10`.
+   */
+  @property({ type: Number, attribute: 'page-size' })
+  pageSize: number = 10;
+
+  /**
+   * Total number of items.
+   */
+  @property({ type: Number, attribute: 'total-items' })
+  totalItems: number = 0;
+
+  /**
+   * Supported page size options.
+   */
+  @property({ type: Array, attribute: 'page-sizes' })
+  pageSizes: number[] = DEFAULT_PAGE_SIZES;
+
+  private dispatchPageEvent() {
+    this.dispatchEvent(
+      new CustomEvent('page', {
+        detail: { page: this.page, pageSize: this.pageSize },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    const startItem = this.pageSize * (this.page - 1);
+    const endItem = Math.min(this.pageSize * this.page, this.totalItems);
+    const isFirstPage = this.page === 1;
+    const isLastPage = this.pageSize * this.page >= this.totalItems;
+
+    return html`
+      <div class="pagination">
+        <div class="page-sizes-select">
+          <label class="page-size-label">
+            Items per page:
+            <select
+              class="page-size-select"
+              .value=${String(this.pageSize)}
+              @change=${(e: Event) => {
+                this.pageSize = parseInt(
+                  (e.target as HTMLSelectElement).value,
+                  10,
+                );
+                this.page = 1;
+                this.dispatchPageEvent();
+              }}
+            >
+              ${this.pageSizes.map(
+                size => html`
+                  <option value=${size} ?selected=${this.pageSize === size}>
+                    ${size}
+                  </option>
+                `,
+              )}
+            </select>
+          </label>
+        </div>
+        <div class="pagination-item-count">
+          <span class="pagination-text">
+            ${startItem} - ${endItem} of ${this.totalItems} items
+          </span>
+        </div>
+        <div class="pagination-right">
+          <div class="table-footer-right-content">
+            <div class="table-footer-right-content-pagination">
+              <wc-button
+                class="arrows"
+                color="secondary"
+                variant="text"
+                ?disabled=${isFirstPage}
+                @click=${() => {
+                  if (!isFirstPage) {
+                    this.page -= 1;
+                    this.dispatchPageEvent();
+                  }
+                }}
+              >
+                <wc-icon slot="icon" name="arrow--left"></wc-icon>
+              </wc-button>
+              <wc-button
+                color="secondary"
+                variant="text"
+                class="arrows"
+                ?disabled=${isLastPage}
+                @click=${() => {
+                  if (!isLastPage) {
+                    this.page += 1;
+                    this.dispatchPageEvent();
+                  }
+                }}
+              >
+                <wc-icon slot="icon" name="arrow--right"></wc-icon>
+              </wc-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/peacock-loader.ts

@@ -22,16 +22,16 @@ 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/accordion.js';
+import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
 import { Tag } from './chip/tag/tag.js';
 import { Chip } from './chip/chip/chip.js';
 import { LinearProgress } from './progress/linear-progress/linear-progress.js';
 import { CircularProgress } from './progress/circular-progress/circular-progress.js';
 
-import { Tooltip } from './popover/tooltip/tooltip.js';
+import { Tooltip } from './tooltip/tooltip.js';
 import { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 
 import { Skeleton } from './skeleton/skeleton.js';
@@ -43,10 +43,17 @@ import { Image } from './image/image.js';
 
 import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
 import { loadCSS } from './CssLoader.js';
-
+import { TabGroup } from './tabs/tab-group.js';
+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';
@@ -70,127 +77,161 @@ document.adoptedStyleSheets = styleSheets;
 
 const loaderConfig: LoaderConfig = {
   components: {
-    'base-icon': {
+    'wc-icon': {
       CustomElementClass: Icon,
       // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
     },
-    'focus-ring': {
+    'wc-focus-ring': {
       CustomElementClass: FocusRing,
     },
-    'base-avatar': {
+    'wc-avatar': {
       CustomElementClass: Avatar,
     },
-    'base-badge': {
+    'wc-badge': {
       CustomElementClass: Badge,
     },
-    'base-button': {
+    'wc-button': {
       CustomElementClass: Button,
     },
-    'icon-button': {
+    'wc-icon-button': {
       CustomElementClass: IconButton,
     },
-    'button-group': {
+    'wc-button-group': {
       CustomElementClass: ButtonGroup,
     },
-    'base-divider': {
+    'wc-divider': {
       CustomElementClass: Divider,
     },
-    'base-elevation': {
+    'wc-elevation': {
       CustomElementClass: Elevation,
     },
-    'base-clock': {
+    'wc-clock': {
       importPath: `${distDirectory}/clock.js`,
     },
-    'base-ripple': {
+    'wc-ripple': {
       CustomElementClass: Ripple,
     },
-    'base-accordion': {
+    'wc-accordion': {
       CustomElementClass: Accordion,
     },
-    'accordion-item': {
+    'wc-accordion-item': {
       CustomElementClass: Accordion.Item,
     },
-    'base-link': {
+    'wc-tabs': {
+      CustomElementClass: Tabs,
+    },
+    'wc-tab-group': {
+      CustomElementClass: TabGroup,
+    },
+    'wc-tab': {
+      CustomElementClass: Tab,
+    },
+    'wc-tab-panel': {
+      CustomElementClass: TabPanel,
+    },
+    'wc-link': {
       CustomElementClass: Link,
     },
-    'base-chip': {
+    'wc-chip': {
       CustomElementClass: Chip,
     },
-    'base-tag': {
+    'wc-tag': {
       CustomElementClass: Tag,
     },
-    'linear-progress': {
+    'wc-linear-progress': {
       CustomElementClass: LinearProgress,
     },
-    'circular-progress': {
+    'wc-circular-progress': {
       CustomElementClass: CircularProgress,
     },
-    'base-skeleton': {
+    'wc-skeleton': {
       CustomElementClass: Skeleton,
     },
-    'input-field': {
-      CustomElementClass: Input,
-    },
-    'base-field': {
+
+    'wc-field': {
       CustomElementClass: Field,
     },
-    'number-field': {
+    'wc-input': {
+      CustomElementClass: Input,
+    },
+    'wc-number-field': {
       CustomElementClass: NumberField,
     },
-    'textarea-field': {
+    'wc-textarea': {
       CustomElementClass: Textarea,
     },
-    'date-picker': {
+    'wc-date-picker': {
       CustomElementClass: DatePicker,
     },
-    'time-picker': {
+    'wc-time-picker': {
       CustomElementClass: TimePicker,
     },
-    'base-tooltip': {
+    'wc-tooltip': {
       CustomElementClass: Tooltip,
     },
-    'number-counter': {
+    'wc-number-counter': {
       importPath: `${distDirectory}/number-counter.js`,
     },
-    'code-editor': {
+    'wc-code-editor': {
       importPath: `${distDirectory}/code-editor.js`,
     },
-    'code-highlighter': {
+    'wc-code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
     },
-    'base-breadcrumb': {
+    'wc-breadcrumb': {
       CustomElementClass: Breadcrumb,
     },
-    'breadcrumb-item': {
+    'wc-breadcrumb-item': {
       CustomElementClass: BreadcrumbItem,
     },
-    'base-switch': {
+    'wc-switch': {
       CustomElementClass: Switch,
     },
-    'base-checkbox': {
+    'wc-checkbox': {
       CustomElementClass: Checkbox,
     },
-    'base-spinner': {
+    'wc-spinner': {
       CustomElementClass: Spinner,
     },
-    'empty-state': {
+    'wc-empty-state': {
       CustomElementClass: EmptyState,
     },
-    'base-menu': {
+    'wc-menu': {
       CustomElementClass: Menu,
     },
-    'menu-item': {
+    'wc-menu-item': {
       CustomElementClass: MenuItem,
     },
-    'menu-list': {
-      CustomElementClass: MenuList,
+    'wc-sub-menu': {
+      CustomElementClass: SubMenu,
+    },
+    'wc-container': {
+      CustomElementClass: Container,
+    },
+    'wc-image': {
+      CustomElementClass: Image,
+    },
+    'wc-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`,
     },
-    'base-container': {
-      CustomElementClass: Container
+    'wc-chart-pie': {
+      importPath: `${distDirectory}/chart-pie.js`,
     },
-    'base-image': {
-      CustomElementClass: Image
-    }
   },
 };
 

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/popover/index.ts

@@ -1 +1 @@
-export { Tooltip } from './tooltip/tooltip.js';
+export { Tooltip } from '../tooltip/tooltip.js';

package/src/progress/circular-progress/circular-progress.scss

@@ -79,7 +79,7 @@
       flex: 1;
     }
     .progress-helper {
-      text-align: right;
+      text-align: start;
     }
   }
 }

package/src/progress/circular-progress/circular-progress.ts

@@ -6,14 +6,14 @@ import { BaseProgress } from '../base-progress.js';
 
 /**
  * @label Circular Progress
- * @tag circular-progress
+ * @tag wc-circular-progress
  * @rawTag circular-progress
- *
  * @summary A circular progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <circular-progress value="30"></circular-progress>
+ * <wc-circular-progress value="30"></wc-circular-progress>
  * ```
  */
 export class CircularProgress extends BaseProgress {

package/src/progress/linear-progress/linear-progress.ts

@@ -6,14 +6,14 @@ import { BaseProgress } from '../base-progress.js';
 
 /**
  * @label Linear Progress
- * @tag linear-progress
+ * @tag wc-linear-progress
  * @rawTag linear-progress
- *
  * @summary A linear progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <linear-progress value="30" style="width:10rem"></linear-progress>
+ * <wc-linear-progress value="30" style="width:10rem"></wc-linear-progress>
  * ```
  */
 export class LinearProgress extends BaseProgress {