@zeyos/zx 2.3.0 → 4.0.0

package/src/core/position.js

@@ -2,12 +2,15 @@
 import { clamp, uid } from './util.js';
 
 const PLACEMENTS = new Set([
-  'bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top'
+  'bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top',
+  'right-start', 'right-end', 'left-start', 'left-end', 'right', 'left'
 ]);
 
+/** @typedef {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} Placement */
+
 /**
  * @typedef {Object} PositionOptions
- * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'} [placement='bottom-start']
+ * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} [placement='bottom-start']
  * @property {number} [offset=4] Gap between anchor and floating element.
  * @property {boolean} [flip=true] Flip vertically when the preferred side overflows.
  * @property {boolean} [matchWidth=false] Set the floating element's minimum width to the anchor width.
@@ -50,13 +53,17 @@ export function position(anchor, floating, options = {}) {
     floating.style.inset = 'auto';
     floating.style.margin = '0';
     floating.style.setProperty('position-anchor', anchorName);
-    floating.style.setProperty('position-area', positionArea(placement));
-    floating.style.setProperty('inset-area', positionArea(placement));
+    const area = positionArea(placement, getComputedStyle(anchor).direction === 'rtl');
+    floating.style.setProperty('position-area', area);
+    floating.style.setProperty('inset-area', area);
     floating.style.setProperty(
       'position-try-fallbacks',
       flip ? 'flip-block, flip-inline, flip-block flip-inline' : 'none'
     );
-    floating.style.setProperty(placement.startsWith('top') ? 'margin-block-end' : 'margin-block-start', `${offset}px`);
+    const margin = placement.startsWith('top') ? 'margin-bottom'
+      : placement.startsWith('bottom') ? 'margin-top'
+        : placement.startsWith('left') ? 'margin-right' : 'margin-left';
+    floating.style.setProperty(margin, `${offset}px`);
     update = () => {
       if (matchWidth) floating.style.minWidth = `${anchor.getBoundingClientRect().width}px`;
     };
@@ -104,15 +111,21 @@ export function position(anchor, floating, options = {}) {
   };
 }
 
-/** @param {string} placement @returns {string} */
-function positionArea(placement) {
+/** @param {string} placement @param {boolean} rtl @returns {string} */
+function positionArea(placement, rtl) {
   return {
-    'bottom-start': 'block-end span-inline-end',
-    'bottom-end': 'block-end span-inline-start',
-    'top-start': 'block-start span-inline-end',
-    'top-end': 'block-start span-inline-start',
-    bottom: 'block-end',
-    top: 'block-start'
+    'bottom-start': rtl ? 'bottom span-left' : 'bottom span-right',
+    'bottom-end': rtl ? 'bottom span-right' : 'bottom span-left',
+    'top-start': rtl ? 'top span-left' : 'top span-right',
+    'top-end': rtl ? 'top span-right' : 'top span-left',
+    'right-start': 'right span-bottom',
+    'right-end': 'right span-top',
+    'left-start': 'left span-bottom',
+    'left-end': 'left span-top',
+    bottom: 'bottom',
+    top: 'top',
+    right: 'right',
+    left: 'left'
   }[placement];
 }
 
@@ -129,27 +142,60 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
   const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
   let actualPlacement = placement;
-  const prefersBottom = placement.startsWith('bottom');
+  const side = placementSide(placement);
   const bottomY = anchorRect.bottom + offset;
   const topY = anchorRect.top - offset - floatingRect.height;
+  const rightX = anchorRect.right + offset;
+  const leftX = anchorRect.left - offset - floatingRect.width;
 
   if (flip) {
-    if (prefersBottom && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
-      actualPlacement = /** @type {typeof placement} */ (placement.replace('bottom', 'top'));
-    } else if (!prefersBottom && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
-      actualPlacement = /** @type {typeof placement} */ (placement.replace('top', 'bottom'));
+    if (side === 'bottom' && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
+      actualPlacement = flipPlacement(placement, 'bottom', 'top');
+    } else if (side === 'top' && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
+      actualPlacement = flipPlacement(placement, 'top', 'bottom');
+    } else if (side === 'right' && rightX + floatingRect.width > viewportWidth && leftX >= 0) {
+      actualPlacement = flipPlacement(placement, 'right', 'left');
+    } else if (side === 'left' && leftX < 0 && rightX + floatingRect.width <= viewportWidth) {
+      actualPlacement = flipPlacement(placement, 'left', 'right');
     }
   }
 
+  const actualSide = placementSide(actualPlacement);
   let left;
-  if (actualPlacement.endsWith('-end')) left = anchorRect.right - floatingRect.width;
-  else if (actualPlacement.endsWith('-start')) left = anchorRect.left;
-  else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
-  const top = actualPlacement.startsWith('bottom') ? bottomY : topY;
+  let top;
+  if (actualSide === 'bottom' || actualSide === 'top') {
+    const rtl = getComputedStyle(anchor).direction === 'rtl';
+    if (actualPlacement.endsWith('-end')) {
+      left = rtl ? anchorRect.left : anchorRect.right - floatingRect.width;
+    } else if (actualPlacement.endsWith('-start')) {
+      left = rtl ? anchorRect.right - floatingRect.width : anchorRect.left;
+    } else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
+    top = actualSide === 'bottom' ? bottomY : topY;
+  } else {
+    left = actualSide === 'right' ? rightX : leftX;
+    if (actualPlacement.endsWith('-end')) top = anchorRect.bottom - floatingRect.height;
+    else if (actualPlacement.endsWith('-start')) top = anchorRect.top;
+    else top = anchorRect.top + (anchorRect.height - floatingRect.height) / 2;
+  }
   floating.style.left = `${Math.round(clamp(left, 0, Math.max(0, viewportWidth - floatingRect.width)))}px`;
   floating.style.top = `${Math.round(clamp(top, 0, Math.max(0, viewportHeight - floatingRect.height)))}px`;
 }
 
+/** @param {string} placement @returns {'top'|'bottom'|'left'|'right'} */
+function placementSide(placement) {
+  return /** @type {'top'|'bottom'|'left'|'right'} */ (placement.split('-')[0]);
+}
+
+/**
+ * @param {string} placement
+ * @param {'top'|'bottom'|'left'|'right'} from
+ * @param {'top'|'bottom'|'left'|'right'} to
+ * @returns {Placement}
+ */
+function flipPlacement(placement, from, to) {
+  return /** @type {Placement} */ (placement.replace(from, to));
+}
+
 /** @param {HTMLElement} element @returns {void} */
 function showPopover(element) {
   if (typeof element.showPopover !== 'function') return;

package/src/index.js

@@ -42,7 +42,12 @@ export function registerFieldAdapters() {
 registerFieldAdapters();
 
 export { Component } from './core/component.js';
-export { h, htmlEscape, resolveElement, highlightMatch } from './core/dom.js';
+export {
+  h, htmlEscape, resolveElement, highlightMatch,
+  __, compactElement, fragment, parseCompactTag, applyCompactProperties,
+  appendContent, appendCompact, appendCompactChild,
+  onCompactEvent, offCompactEvent, fireCompactEvent
+} from './core/dom.js';
 export { position } from './core/position.js';
 export { breakpoints, breakpointOf, matchBreakpoint, onBreakpoint } from './core/breakpoint.js';
 export { Http, zeyosService, parseResult } from './core/http.js';
@@ -83,20 +88,29 @@ export { CopyInput } from './components/copy/copy-input.js';
 export { Toolbar } from './components/toolbar/toolbar.js';
 export { Toggle } from './components/toggle/toggle.js';
 export { Groupbox } from './components/groupbox/groupbox.js';
+export { Card } from './components/card/card.js';
 export { Panel } from './components/panel/panel.js';
 export { MasterPanel } from './components/master-panel/master-panel.js';
 export {
   SplitView, clampSize, resolveSize, snapSize
 } from './components/split-view/split-view.js';
+export { Dock } from './components/dock/dock.js';
 export { Tabbox } from './components/tabbox/tabbox.js';
 export { NavigationBar } from './components/navigation-bar/navigation-bar.js';
 export { Stepper } from './components/stepper/stepper.js';
 export { Breadcrumb } from './components/breadcrumb/breadcrumb.js';
 export { Pagination, paginationRange } from './components/pagination/pagination.js';
 export { Search } from './components/search/search.js';
+export { Launcher, rankLauncherItems } from './components/launcher/launcher.js';
+export { Avatar, avatarInitials } from './components/avatar/avatar.js';
+export { AccountMenu } from './components/account-menu/account-menu.js';
+export { normalizeAppItems } from './internal/app-rail.js';
+export { AppSidebar } from './components/app-sidebar/app-sidebar.js';
 export { Message } from './components/message/message.js';
 export { Modal } from './components/modal/modal.js';
 export { Dialog } from './components/dialog/dialog.js';
+export { Sheet } from './components/sheet/sheet.js';
+export { SheetStack } from './components/sheet/sheet-stack.js';
 export { Dropdown } from './components/dropdown/dropdown.js';
 export { Tooltip, tooltip, describe } from './components/tooltip/tooltip.js';
 export { MenuButton } from './components/menu-button/menu-button.js';
@@ -107,7 +121,6 @@ export { TagPicker } from './components/tag-picker/tag-picker.js';
 export { NumberField, parseNumber, snapNumber } from './components/number-field/number-field.js';
 export { Rating } from './components/rating/rating.js';
 export { Slider, stepPrecision } from './components/slider/slider.js';
-export { Permission } from './components/permission/permission.js';
 export { DatePicker } from './components/date-picker/date-picker.js';
 export { MonthPicker } from './components/date-picker/month-picker.js';
 export { TimePicker } from './components/date-picker/time-picker.js';
@@ -120,12 +133,17 @@ export {
 } from './components/datebox/date-range-box.js';
 export { Timebox, splitTime, joinTime } from './components/timebox/timebox.js';
 export { Table } from './components/table/table.js';
+export { Grid, billingColumns, isBillingLine } from './components/grid/grid.js';
+export {
+  Chart, ChartJsAdapter, chartSummaryTable, cloneChartValue, isEmptyChartData
+} from './components/chart/chart.js';
 export { TreeView } from './components/tree/tree.js';
 export { Finder } from './components/finder/finder.js';
 export { DataFilter } from './components/data-filter/data-filter.js';
 export { Field } from './components/field/field.js';
 export { Fieldset } from './components/fieldset/fieldset.js';
 export { Form } from './components/form/form.js';
+export { Questionnaire } from './components/questionnaire/questionnaire.js';
 export { ValueList } from './components/value-list/value-list.js';
 export { MultiValueEditor } from './components/multi-value-editor/multi-value-editor.js';
 export { FieldUpload } from './components/field-upload/field-upload.js';