@retailcrm/embed-ui-v1-components 0.9.12 → 0.9.13

package/dist/remote.cjs

@@ -163,7 +163,7 @@ const _hoisted_5 = {
   class: "ui-v1-field__addon"
 };
 const _hoisted_6 = { class: "ui-v1-field__control" };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -415,6 +415,577 @@ const UiSwitch = remote.defineRemoteComponent(
   UiSwitchType,
   ["click", "focus", "blur"]
 );
+var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
+  ALIGN2["LEFT"] = "left";
+  ALIGN2["CENTER"] = "center";
+  ALIGN2["RIGHT"] = "right";
+  return ALIGN2;
+})(ALIGN || {});
+var VALIGN = /* @__PURE__ */ ((VALIGN2) => {
+  VALIGN2["TOP"] = "top";
+  VALIGN2["MIDDLE"] = "middle";
+  VALIGN2["BOTTOM"] = "bottom";
+  return VALIGN2;
+})(VALIGN || {});
+var DIRECTION = /* @__PURE__ */ ((DIRECTION2) => {
+  DIRECTION2["ASC"] = "asc";
+  DIRECTION2["DESC"] = "desc";
+  return DIRECTION2;
+})(DIRECTION || {});
+const byRowKey = (key) => {
+  return (row) => row[key];
+};
+const asRowClass = (value) => value;
+const asRowAttrs = (value) => value;
+const _sfc_main$5 = vue.defineComponent({
+  name: "UiTableColumn",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
+    minWidth: {
+      type: [String, Number],
+      default: void 0
+    },
+    maxWidth: {
+      type: [String, Number],
+      default: void 0
+    },
+    align: {
+      type: String,
+      default: ALIGN.LEFT,
+      validator: (align) => Object.values(ALIGN).includes(align)
+    },
+    valign: {
+      type: String,
+      default: VALIGN.MIDDLE,
+      validator: (valign) => Object.values(VALIGN).includes(valign)
+    },
+    trim: {
+      type: Boolean,
+      default: false
+    },
+    colspan: {
+      type: Function,
+      default: void 0
+    },
+    rowspan: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup() {
+    return () => null;
+  }
+});
+const UiTableRootType = "UiTableRoot";
+const UiTableRoot = remote.defineRemoteComponent(UiTableRootType);
+const UiTableSectionType = "UiTableSection";
+const UiTableSection = remote.defineRemoteComponent(UiTableSectionType);
+const UiTableRowType = "UiTableRow";
+const UiTableRow = remote.defineRemoteComponent(
+  UiTableRowType,
+  ["click"]
+);
+const UiTableColType = "UiTableCol";
+const UiTableCol = remote.defineRemoteComponent(UiTableColType);
+const UiTableFooterSectionType = "UiTableFooterSection";
+const UiTableFooterSection = remote.defineRemoteComponent(UiTableFooterSectionType);
+const UiTableFooterButtonType = "UiTableFooterButton";
+const UiTableFooterButton = remote.defineRemoteComponent(
+  UiTableFooterButtonType,
+  ["click"]
+);
+const UiTableHeadCellType = "UiTableHeadCell";
+const UiTableHeadCell = remote.defineRemoteComponent(UiTableHeadCellType);
+const UiTableBodyCellType = "UiTableBodyCell";
+const UiTableBodyCell = remote.defineRemoteComponent(UiTableBodyCellType);
+const UiTableSorterType = "UiTableSorter";
+const UiTableSorter = remote.defineRemoteComponent(
+  UiTableSorterType,
+  ["click"]
+);
+const isNamedComponent = (node, name) => {
+  if (typeof node.type !== "object" || node.type === null) {
+    return false;
+  }
+  return "name" in node.type && node.type.name === name;
+};
+const isTableColumnVNode = (node) => {
+  return node.type === _sfc_main$5 || isNamedComponent(node, "UiTableColumn");
+};
+const isWhitespaceText = (value) => value.trim().length === 0;
+const normalizeNodes = (children) => {
+  const normalized = [];
+  children.forEach((child) => {
+    if (Array.isArray(child)) {
+      normalized.push(...normalizeNodes(child));
+      return;
+    }
+    if (typeof child === "string") {
+      if (!isWhitespaceText(child)) {
+        normalized.push(child);
+      }
+      return;
+    }
+    if (typeof child === "number") {
+      normalized.push(child);
+      return;
+    }
+    if (!vue.isVNode(child)) {
+      return;
+    }
+    if (child.type === vue.Comment) {
+      return;
+    }
+    if (child.type === vue.Text) {
+      const text = typeof child.children === "string" ? child.children : "";
+      if (!isWhitespaceText(text)) {
+        normalized.push(text);
+      }
+      return;
+    }
+    if (child.type === vue.Fragment && Array.isArray(child.children)) {
+      normalized.push(...normalizeNodes(child.children));
+      return;
+    }
+    normalized.push(child);
+  });
+  return normalized;
+};
+const normalizeBoolean = (value) => value === "" || value === true;
+const normalizeString = (value) => typeof value === "string" ? value : "";
+const normalizeAlign = (value) => {
+  return Object.values(ALIGN).includes(value) ? value : ALIGN.LEFT;
+};
+const normalizeValign = (value) => {
+  return Object.values(VALIGN).includes(value) ? value : VALIGN.MIDDLE;
+};
+const normalizeSlotRecord = (node) => {
+  const children = node.children;
+  if (!children || Array.isArray(children) || typeof children === "string") {
+    return {};
+  }
+  const slots = children;
+  return {
+    defaultSlot: slots.default,
+    cellSlot: slots.cell,
+    labelSlot: slots.label
+  };
+};
+const resolveFunction = (value) => {
+  if (typeof value === "function") {
+    return value;
+  }
+  return () => void 0;
+};
+const collectTableColumns = (children) => {
+  return normalizeNodes(children).filter((node) => vue.isVNode(node)).filter(isTableColumnVNode).map((node, index) => {
+    const props = node.props ?? {};
+    const slots = normalizeSlotRecord(node);
+    return {
+      id: String(node.key ?? `ui-v1-table-column-${index}`),
+      label: normalizeString(props.label),
+      width: props.width,
+      minWidth: props.minWidth ?? props["min-width"],
+      maxWidth: props.maxWidth ?? props["max-width"],
+      align: normalizeAlign(props.align),
+      valign: normalizeValign(props.valign),
+      trim: normalizeBoolean(props.trim),
+      getColspan: resolveFunction(props.colspan),
+      getRowspan: resolveFunction(props.rowspan),
+      cellSlot: slots.cellSlot,
+      defaultSlot: slots.defaultSlot,
+      labelSlot: slots.labelSlot
+    };
+  });
+};
+const normalizeSpan = (value) => {
+  if (typeof value === "undefined") {
+    return void 0;
+  }
+  const normalized = Math.trunc(Number(value));
+  if (!Number.isFinite(normalized) || normalized < 1) {
+    return void 0;
+  }
+  return normalized;
+};
+const renderLabel = (column) => column.labelSlot?.({ column }) ?? [column.label];
+const renderCell = (column, props) => column.cellSlot?.(props) ?? column.defaultSlot?.(props) ?? [];
+const buildRenderedRows = (options) => {
+  const activeRowspans = Array.from({ length: options.columns.length }, () => 0);
+  return options.rows.map((row, index) => {
+    const key = options.resolveKey(row, index);
+    const expanded = options.expandedKeys.has(key);
+    const toggle = () => options.toggle(key);
+    const attrs = options.resolveRowAttrs(row, index);
+    const cells = [];
+    let pendingColspan = 0;
+    options.columns.forEach((column, columnIndex) => {
+      if (pendingColspan > 0) {
+        pendingColspan -= 1;
+        return;
+      }
+      if (activeRowspans[columnIndex] > 0) {
+        activeRowspans[columnIndex] -= 1;
+        return;
+      }
+      const slotProps = {
+        row,
+        index,
+        key,
+        expanded,
+        toggle,
+        column
+      };
+      const colspan = normalizeSpan(column.getColspan(row, index));
+      const rowspan = normalizeSpan(column.getRowspan(row, index));
+      const resolvedColspan = colspan && colspan > 1 ? colspan : void 0;
+      const resolvedRowspan = rowspan && rowspan > 1 ? rowspan : void 0;
+      if (resolvedColspan) {
+        pendingColspan = resolvedColspan - 1;
+      }
+      if (resolvedRowspan) {
+        for (let spanIndex = 0; spanIndex < (resolvedColspan ?? 1); spanIndex++) {
+          activeRowspans[columnIndex + spanIndex] = Math.max(
+            activeRowspans[columnIndex + spanIndex] ?? 0,
+            resolvedRowspan - 1
+          );
+        }
+      }
+      cells.push({
+        column,
+        colspan: resolvedColspan,
+        rowspan: resolvedRowspan,
+        slotProps
+      });
+    });
+    return {
+      row,
+      index,
+      key,
+      attrs,
+      expanded,
+      toggle,
+      cells,
+      className: [
+        options.resolveRowClass(row, index),
+        attrs.class,
+        options.extraClass
+      ]
+    };
+  });
+};
+const isCellVNode = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return false;
+  }
+  return node.type === UiTableBodyCell || node.type === UiTableHeadCell || isNamedComponent(node, "UiTableBodyCell") || isNamedComponent(node, "UiTableHeadCell") || node.type === "td" || node.type === "th";
+};
+const slotNeedsBodyCellWrapper = (children) => {
+  const nodes = normalizeNodes(children);
+  if (nodes.length === 0) {
+    return true;
+  }
+  return !nodes.every(isCellVNode);
+};
+const renderGroupHead = (slot, props) => {
+  return slot?.(props) ?? [String(props.group.key)];
+};
+const renderExpand = (slot, props) => slot?.(props) ?? [];
+const getRowClass = (rowClass, row, index) => {
+  if (typeof rowClass === "function") {
+    return rowClass(row, index);
+  }
+  return rowClass;
+};
+const getRowAttrs = (rowAttrs, row, index) => rowAttrs?.(row, index) ?? {};
+const resolveRowKey = (rowKey, row, index) => {
+  if (typeof rowKey === "function") {
+    return rowKey(row, index);
+  }
+  if (typeof rowKey !== "undefined" && typeof row === "object" && row !== null && rowKey in row) {
+    const value = row[rowKey];
+    if (typeof value === "string" || typeof value === "number") {
+      return value;
+    }
+  }
+  return index;
+};
+const withoutClass = (attrs) => {
+  const next = { ...attrs };
+  delete next.class;
+  return next;
+};
+const _sfc_main$4 = vue.defineComponent({
+  name: "UiTable",
+  inheritAttrs: false,
+  props: {
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: [String, Number, Function],
+      default: void 0
+    },
+    headless: {
+      type: Boolean,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    rowClass: {
+      type: [String, Array, Object, Function],
+      default: void 0
+    },
+    rowAttrs: {
+      type: Function,
+      default: void 0
+    },
+    groupBy: {
+      type: Function,
+      default: void 0
+    },
+    groupHeadClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    groupBodyClass: {
+      type: [String, Array, Object],
+      default: void 0
+    }
+  },
+  emits: {
+    "row:click": (payload, event) => {
+      return true;
+    }
+  },
+  setup(props, { attrs, emit, expose, slots }) {
+    const instance = vue.getCurrentInstance();
+    const expandedKeys = vue.ref([]);
+    const isInteractive = vue.computed(() => Boolean(
+      instance?.vnode.props?.onRowClick || instance?.vnode.props?.["onRow:click"]
+    ));
+    const toggleExpanded = (key) => {
+      expandedKeys.value = expandedKeys.value.includes(key) ? expandedKeys.value.filter((item) => item !== key) : [...expandedKeys.value, key];
+    };
+    const resetExpanded = () => {
+      expandedKeys.value = [];
+    };
+    const expand = (key) => {
+      if (!expandedKeys.value.includes(key)) {
+        expandedKeys.value = [...expandedKeys.value, key];
+      }
+    };
+    const collapse = (key) => {
+      expandedKeys.value = expandedKeys.value.filter((item) => item !== key);
+    };
+    expose({
+      resetExpanded,
+      expand,
+      collapse,
+      toggle: toggleExpanded
+    });
+    vue.watch([() => props.rows, () => props.rowKey], () => {
+      const availableKeys = new Set(
+        props.rows.map((row, index) => resolveRowKey(props.rowKey, row, index))
+      );
+      const next = expandedKeys.value.filter((key) => availableKeys.has(key));
+      if (next.length !== expandedKeys.value.length) {
+        expandedKeys.value = next;
+      }
+    }, { deep: false });
+    const resolveColumns = () => collectTableColumns(slots.default?.() ?? []);
+    const resolveGroups = () => {
+      return props.groupBy ? props.groupBy(props.rows) : [];
+    };
+    const resolveFooterData = (currentColumns, currentGroups) => ({
+      columnsCount: currentColumns.length,
+      rowsCount: props.rows.length,
+      groupsCount: currentGroups.length,
+      groups: currentGroups
+    });
+    const hasStructuredFooter = () => {
+      return [
+        "footer-summary",
+        "footer-page-size",
+        "footer-export",
+        "footer-pagination"
+      ].some((name) => Boolean(slots[name]));
+    };
+    const hasFooter = () => Boolean(slots.footer) || hasStructuredFooter();
+    const resolveColumnsCount = (currentColumns) => {
+      return Math.max(currentColumns.length, 1);
+    };
+    const buildPlainRows = (currentColumns) => buildRenderedRows({
+      columns: currentColumns,
+      rows: props.rows,
+      expandedKeys: new Set(expandedKeys.value),
+      resolveKey: (row, index) => resolveRowKey(props.rowKey, row, index),
+      resolveRowAttrs: (row, index) => getRowAttrs(props.rowAttrs, row, index),
+      resolveRowClass: (row, index) => getRowClass(props.rowClass, row, index),
+      toggle: toggleExpanded
+    });
+    const buildGroupedRows = (currentColumns, currentGroups) => currentGroups.map((group) => ({
+      group,
+      rows: buildRenderedRows({
+        columns: currentColumns,
+        rows: group.rows,
+        expandedKeys: new Set(expandedKeys.value),
+        extraClass: props.groupBodyClass,
+        resolveKey: (row, index) => resolveRowKey(props.rowKey, row, index),
+        resolveRowAttrs: (row, index) => getRowAttrs(props.rowAttrs, row, index),
+        resolveRowClass: (row, index) => getRowClass(props.rowClass, row, index),
+        toggle: toggleExpanded
+      })
+    }));
+    const emitRowClick = (payload, event) => {
+      emit("row:click", payload, event);
+    };
+    const renderBodyRow = (row, columnsCount, suffix = "row") => {
+      const rowKey = `${String(row.key)}:${suffix}`;
+      return [
+        vue.h(UiTableRow, {
+          key: rowKey,
+          interactive: isInteractive.value,
+          expanded: row.expanded,
+          ...withoutClass(row.attrs),
+          class: row.className,
+          onClick: (event) => emitRowClick({
+            row: row.row,
+            index: row.index,
+            key: row.key,
+            expanded: row.expanded,
+            toggle: row.toggle
+          }, event)
+        }, () => row.cells.map((cell, cellIndex) => vue.h(UiTableBodyCell, {
+          key: `${rowKey}:cell:${cell.column.id}:${cellIndex}`,
+          align: cell.column.align,
+          valign: cell.column.valign,
+          colspan: cell.colspan,
+          rowspan: cell.rowspan,
+          trim: cell.column.trim
+        }, () => renderCell(cell.column, cell.slotProps)))),
+        slots.expand && row.expanded ? vue.h(UiTableRow, {
+          key: `${rowKey}:expand`,
+          expanded: true
+        }, () => vue.h(UiTableBodyCell, {
+          colspan: columnsCount
+        }, () => renderExpand(slots.expand, {
+          row: row.row,
+          index: row.index,
+          key: row.key
+        }))) : null
+      ];
+    };
+    const renderGroupHeadRow = (group, index, columnsCount) => {
+      const content = renderGroupHead(slots["group-head"], {
+        group,
+        index
+      });
+      return vue.h(UiTableRow, {
+        key: `${String(group.key)}:group-head`,
+        class: props.groupHeadClass
+      }, () => {
+        if (slotNeedsBodyCellWrapper(content)) {
+          return vue.h(UiTableBodyCell, {
+            colspan: columnsCount,
+            theme: "group"
+          }, () => vue.h("div", { class: "ui-v1-table__group-head" }, content));
+        }
+        return content;
+      });
+    };
+    const renderEmptyRow = (columnsCount) => vue.h(UiTableRow, { key: "empty" }, () => vue.h(UiTableBodyCell, {
+      colspan: columnsCount
+    }, () => vue.h("div", { class: "ui-v1-table__empty" }, slots.empty?.() ?? [])));
+    const renderFooter = (footerData, columnsCount) => {
+      if (!hasFooter()) {
+        return null;
+      }
+      if (hasStructuredFooter()) {
+        const summary = slots["footer-summary"]?.(footerData);
+        const pageSize = slots["footer-page-size"]?.(footerData);
+        const exportControl = slots["footer-export"]?.(footerData);
+        const pagination = slots["footer-pagination"]?.(footerData);
+        return vue.h(UiTableSection, { kind: "foot", key: "footer" }, () => vue.h(UiTableRow, () => vue.h(UiTableBodyCell, {
+          colspan: columnsCount,
+          class: "ui-v1-table__footer-cell"
+        }, () => vue.h("div", { class: "ui-v1-table__footer" }, [
+          summary ? vue.h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          pageSize || exportControl || pagination ? vue.h("div", { class: "ui-v1-table__footer-controls" }, [
+            pageSize || exportControl ? vue.h("div", { class: "ui-v1-table__footer-main" }, [
+              pageSize,
+              exportControl
+            ]) : null,
+            pagination ? vue.h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+          ]) : null
+        ]))));
+      }
+      const content = slots.footer?.(footerData) ?? [];
+      return vue.h(UiTableSection, { kind: "foot", key: "footer" }, () => vue.h(UiTableRow, () => {
+        if (slotNeedsBodyCellWrapper(content)) {
+          return vue.h(UiTableBodyCell, {
+            colspan: columnsCount
+          }, () => content);
+        }
+        return content;
+      }));
+    };
+    return () => vue.h(UiTableRoot, {
+      ...attrs,
+      bordered: props.bordered,
+      fixed: props.fixed
+    }, () => [
+      (() => {
+        const currentColumns = resolveColumns();
+        const currentColumnsCount = resolveColumnsCount(currentColumns);
+        const currentGroups = resolveGroups();
+        const currentFooterData = resolveFooterData(currentColumns, currentGroups);
+        const currentPlainRows = buildPlainRows(currentColumns);
+        const currentGroupedRows = buildGroupedRows(currentColumns, currentGroups);
+        return [
+          currentColumns.length > 0 ? vue.h("colgroup", { key: "colgroup" }, currentColumns.map((column) => vue.h(UiTableCol, {
+            key: `col:${column.id}`,
+            width: column.width,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth
+          }))) : null,
+          !props.headless && currentColumns.length > 0 ? vue.h(UiTableSection, { key: "head", kind: "head" }, () => vue.h(UiTableRow, () => currentColumns.map((column) => vue.h(UiTableHeadCell, {
+            key: `head:${column.id}`,
+            align: column.align,
+            trim: column.trim
+          }, () => renderLabel(column))))) : null,
+          vue.h(UiTableSection, { key: "body", kind: "body" }, () => {
+            if (props.rows.length === 0) {
+              return renderEmptyRow(currentColumnsCount);
+            }
+            if (props.groupBy) {
+              return currentGroupedRows.flatMap(({ group, rows }, index) => [
+                renderGroupHeadRow(group, index, currentColumnsCount),
+                ...rows.flatMap((row) => renderBodyRow(row, currentColumnsCount, `${String(group.key)}:row`))
+              ]);
+            }
+            return currentPlainRows.flatMap((row) => renderBodyRow(row, currentColumnsCount));
+          }),
+          renderFooter(currentFooterData, currentColumnsCount)
+        ];
+      })()
+    ]);
+  }
+});
 const UiTagType = "UiTag";
 const UiTag = remote.defineRemoteComponent(
   UiTagType,
@@ -1538,6 +2109,15 @@ const createEndpointRoot = async (channel) => {
     "UiSwitch",
     "UiSelectPopper",
     "UiSelectTrigger",
+    "UiTableBodyCell",
+    "UiTableCol",
+    "UiTableFooterButton",
+    "UiTableFooterSection",
+    "UiTableHeadCell",
+    "UiTableRoot",
+    "UiTableRow",
+    "UiTableSection",
+    "UiTableSorter",
     "UiTag",
     "UiTextbox",
     "UiTimePicker",
@@ -1600,6 +2180,8 @@ function detectLocale() {
   }
   return "en-GB";
 }
+exports.ALIGN = ALIGN;
+exports.DIRECTION = DIRECTION;
 exports.ImageWorkersKey = ImageWorkersKey;
 exports.UiAddButton = UiAddButton;
 exports.UiAddButtonType = UiAddButtonType;
@@ -1629,7 +2211,7 @@ exports.UiDatePickerType = UiDatePickerType;
 exports.UiDateType = UiDateType;
 exports.UiError = UiError;
 exports.UiErrorType = UiErrorType;
-exports.UiField = _sfc_main$4;
+exports.UiField = _sfc_main$6;
 exports.UiInfobox = UiInfobox;
 exports.UiInfoboxType = UiInfoboxType;
 exports.UiLink = UiLink;
@@ -1665,6 +2247,13 @@ exports.UiSlider = UiSlider;
 exports.UiSliderType = UiSliderType;
 exports.UiSwitch = UiSwitch;
 exports.UiSwitchType = UiSwitchType;
+exports.UiTable = _sfc_main$4;
+exports.UiTableBodyCell = UiTableBodyCell;
+exports.UiTableColumn = _sfc_main$5;
+exports.UiTableFooterButton = UiTableFooterButton;
+exports.UiTableFooterSection = UiTableFooterSection;
+exports.UiTableHeadCell = UiTableHeadCell;
+exports.UiTableSorter = UiTableSorter;
 exports.UiTag = UiTag;
 exports.UiTagType = UiTagType;
 exports.UiTextbox = UiTextbox;
@@ -1681,6 +2270,10 @@ exports.UiTransition = UiTransition;
 exports.UiTransitionType = UiTransitionType;
 exports.UiYandexMap = UiYandexMap;
 exports.UiYandexMapType = UiYandexMapType;
+exports.VALIGN = VALIGN;
+exports.asRowAttrs = asRowAttrs;
+exports.asRowClass = asRowClass;
+exports.byRowKey = byRowKey;
 exports.createEndpointRoot = createEndpointRoot;
 exports.formatDate = formatDate;
 exports.formatDateTime = formatDateTime;