@universal-ember/table 3.0.0 → 3.0.1

package/dist/plugins/column-resizing/handle.js

@@ -0,0 +1,241 @@
+import { _ as _defineProperty } from '../../_rollupPluginBabelHelpers-BpiaYhlf.js';
+import { registerDestructor } from '@ember/destroyable';
+import { buildWaiter } from '@ember/test-waiters';
+import Modifier from 'ember-modifier';
+import { meta } from '../-private/base.js';
+import { ColumnResizing } from './plugin.js';
+
+const waiter = buildWaiter('ColumnResizing#ResizeHandle');
+
+/**
+ * - why are mouse events used instead of drag events?
+ * - why not use the "draggable" attribute?
+ *
+ * It seems drag events are more for files and/or moving images around on a page
+ * dragging an image, for example, has a ghost of that image until it is dropped.
+ * The same thing happens with text.
+ * This prevents us from having total control of the styling of how dragging works.
+ *
+ *
+ *
+ */
+
+class ResizeHandle extends Modifier {
+  constructor(...args) {
+    super(...args);
+    // Pointer
+    _defineProperty(this, "pointerStartX", 0);
+    _defineProperty(this, "pointerStartY", 0);
+    _defineProperty(this, "pointerX", 0);
+    _defineProperty(this, "pointerY", 0);
+    // Keyboard
+    _defineProperty(this, "keyDistance", 0);
+    // waiter
+    _defineProperty(this, "token", void 0);
+    _defineProperty(this, "isSetup", false);
+    _defineProperty(this, "setup", () => {
+      this.dragHandle.addEventListener('touchstart', this.dragStartHandler);
+      this.dragHandle.addEventListener('mousedown', this.dragStartHandler);
+      this.dragHandle.addEventListener('keydown', this.keyHandler);
+      registerDestructor(this, () => {
+        this.meta.isResizing = false;
+        if (this.token) {
+          waiter.endAsync(this.token);
+          this.token = undefined;
+        }
+        this.dragHandle.removeEventListener('touchstart', this.dragStartHandler);
+        this.dragHandle.removeEventListener('mousedown', this.dragStartHandler);
+        window.removeEventListener('touchmove', this.dragMove);
+        window.removeEventListener('touchend', this.dragEndHandler);
+        window.removeEventListener('mousemove', this.dragMove);
+        window.removeEventListener('mouseup', this.dragEndHandler);
+        this.dragHandle.removeEventListener('keydown', this.keyHandler);
+      });
+    });
+    _defineProperty(this, "setPosition", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+      if ('TouchEvent' in window && event instanceof TouchEvent) {
+        const firstTouch = event.touches[0];
+        if (!firstTouch) return;
+        this.pointerX = firstTouch.clientX;
+        this.pointerY = firstTouch.clientY;
+      } else {
+        this.pointerX = event.clientX;
+        this.pointerY = event.clientY;
+      }
+    });
+    _defineProperty(this, "setStartPosition", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+      if ('TouchEvent' in window && event instanceof TouchEvent) {
+        const firstTouch = event.touches[0];
+        if (!firstTouch) return;
+        this.pointerStartX = firstTouch.clientX;
+        this.pointerStartY = firstTouch.clientY;
+      } else {
+        this.pointerStartX = event.clientX;
+        this.pointerStartY = event.clientY;
+      }
+    });
+    /**
+     * queueUpdate takes an optional function argument that is called
+     * in the requestAnimationFrame callback _after_ the resize function.
+     *
+     * We can use this to ensure that preferences are only ever saved after
+     * we have completed column resizing.
+     *
+     * Because the requestAnimationFrame 'hides' these function calls from the
+     * the ember test waiter, we also ensure that we track them by also cancelling
+     * the waiter in the requestAnimationFrame callback.
+     */
+    _defineProperty(this, "queueUpdate", callback => {
+      if (this.dragFrame) {
+        cancelAnimationFrame(this.dragFrame);
+      }
+      this.dragFrame = requestAnimationFrame(() => {
+        this.meta.resize(this.pointerX - this.pointerStartX);
+        this.pointerStartX = this.pointerX;
+        if (callback) {
+          callback();
+        }
+        if (this.token) {
+          waiter.endAsync(this.token);
+          this.token = undefined;
+        }
+      });
+    });
+    _defineProperty(this, "dragEndHandler", () => {
+      this.meta.isResizing = false;
+      this.queueUpdate(this.meta.save);
+
+      /**
+       * No need to listen if we aren't dragging
+       */
+      window.removeEventListener('touchmove', this.dragMove);
+      window.removeEventListener('touchend', this.dragEndHandler);
+      window.removeEventListener('mousemove', this.dragMove);
+      window.removeEventListener('mouseup', this.dragEndHandler);
+    });
+    _defineProperty(this, "dragMove", event => {
+      if (!this.meta.isResizing) return;
+      this.setPosition(event);
+      this.queueUpdate();
+    });
+    _defineProperty(this, "dragStartHandler", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+      this.meta.isResizing = true;
+      if (event.target !== this.dragHandle) return;
+      if (this.token) {
+        waiter.endAsync(this.token);
+      }
+      this.token = waiter.beginAsync();
+      this.setPosition(event);
+      this.setStartPosition(event);
+      window.addEventListener('touchend', this.dragEndHandler);
+      window.addEventListener('touchmove', this.dragMove);
+      window.addEventListener('mousemove', this.dragMove);
+      window.addEventListener('mouseup', this.dragEndHandler);
+    });
+    _defineProperty(this, "keyHandler", event => {
+      const deltaT = new Date().getTime() - this.lastKey;
+      const isRapid = deltaT < 50;
+      if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
+        this.keyDistance += isRapid ? 8 : 1;
+        this.lastKey = new Date().getTime();
+      }
+      if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
+        this.keyDistance -= isRapid ? 8 : 1;
+        this.lastKey = new Date().getTime();
+      }
+      cancelAnimationFrame(this.keyFrame);
+      this.keyFrame = requestAnimationFrame(() => {
+        this.meta.resize(this.keyDistance);
+        this.keyDistance = 0;
+      });
+    });
+  }
+  modify(element, [column]) {
+    this.column = column;
+    this.meta = meta.forColumn(column, ColumnResizing);
+    this.dragHandle = element;
+    if (!this.isSetup) {
+      this.isSetup = true;
+      this.setup();
+    }
+  }
+}
+
+/**
+ * Modifier to attach to the column resize handles.
+ * This provides both keyboard and mouse support for resizing columns.
+ * (provided the resize handle element is focusable -- so consider using
+ * a button for the resize element)
+ *
+ * @example
+ * ```js
+ * import Component from '@glimmer/component';
+ * import { meta } from '@universal-ember/table/plugins';
+ * import { resizeHandle, ColumnResizing } from '@universal-ember/table/plugins/column-resizing';
+ *
+ * export default class TableHead extends Component {
+ *   /* ✂️  *\/
+ *
+ *   <template>
+ *     <thead>
+ *       <tr>
+ *         {{#each this.columns as |column|}}
+ *           <th>
+ *             <span>{{column.name}}</span>
+ *             <button {{resizeHandle column}}></button>
+ *           </th>
+ *         {{/each}}
+ *       </tr>
+ *     </thead>
+ *   </template>
+ * }
+ * ```
+ *
+ * Width and isResizing state is maintained on the "meta"
+ * class so that the users may choose per-column stylings for
+ * isResizing and dragging behaviors.
+ *
+ * For example, while dragging, the user may add a class based on the
+ * isDragging property.
+ *
+ * @example
+ * ```js
+ * import Component from '@glimmer/component';
+ * import { meta } from '@universal-ember/table/plugins';
+ * import { resizeHandle, ColumnResizing } from '@universal-ember/table/plugins/column-resizing';
+ *
+ * export default class TableHead extends Component {
+ *   /* ✂️  *\/
+ *
+ *   isDragging = (column) => {
+ *     return meta.forColumn(column, ColumnResizing).isDragging;
+ *   }
+ *
+ *   <template>
+ *     <thead>
+ *       <tr>
+ *         {{#each this.columns as |column|}}
+ *           <th class="header {{if (this.isDragging column) 'blue'}}">
+ *             <span>{{column.name}}</span>
+ *             <button {{resizeHandle column}}></button>
+ *           </th>
+ *         {{/each}}
+ *       </tr>
+ *     </thead>
+ *   </template>
+ * }
+ * ```
+ *
+ *
+ * @note
+ * The logic here is copied from the drag slider in
+ * https://limber.glimdown.com/
+ * See: "resize-handle" on Limber's GitHub
+ */
+const resizeHandle = ResizeHandle;
+
+export { resizeHandle };
+//# sourceMappingURL=handle.js.map

package/dist/plugins/column-resizing/handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.js","sources":["../../../src/plugins/column-resizing/handle.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { buildWaiter } from '@ember/test-waiters';\n\nimport Modifier from 'ember-modifier';\n\nimport { meta } from '../-private/base.ts';\nimport { ColumnResizing } from './plugin.ts';\n\nimport type { ColumnMeta } from './plugin.ts';\nimport type { Column } from '../../-private/column.ts';\n\nconst waiter = buildWaiter('ColumnResizing#ResizeHandle');\n\n/**\n * - why are mouse events used instead of drag events?\n * - why not use the \"draggable\" attribute?\n *\n * It seems drag events are more for files and/or moving images around on a page\n * dragging an image, for example, has a ghost of that image until it is dropped.\n * The same thing happens with text.\n * This prevents us from having total control of the styling of how dragging works.\n *\n *\n *\n */\n\nclass ResizeHandle extends Modifier<{ Args: { Positional: [Column] } }> {\n  declare dragHandle: HTMLElement;\n  declare column: Column;\n  declare meta: ColumnMeta;\n\n  // Pointer\n  pointerStartX = 0;\n  pointerStartY = 0;\n  pointerX = 0;\n  pointerY = 0;\n  declare dragFrame: number;\n\n  // Keyboard\n  keyDistance = 0;\n  declare keyFrame: number; // ha\n  declare lastKey: number;\n\n  // waiter\n  token?: unknown;\n\n  isSetup = false;\n  modify(element: Element, [column]: [Column]) {\n    this.column = column;\n    this.meta = meta.forColumn(column, ColumnResizing);\n    this.dragHandle = element as HTMLElement;\n\n    if (!this.isSetup) {\n      this.isSetup = true;\n      this.setup();\n    }\n  }\n\n  setup = () => {\n    this.dragHandle.addEventListener('touchstart', this.dragStartHandler);\n    this.dragHandle.addEventListener('mousedown', this.dragStartHandler);\n    this.dragHandle.addEventListener('keydown', this.keyHandler);\n\n    registerDestructor(this, () => {\n      this.meta.isResizing = false;\n\n      if (this.token) {\n        waiter.endAsync(this.token);\n        this.token = undefined;\n      }\n\n      this.dragHandle.removeEventListener('touchstart', this.dragStartHandler);\n      this.dragHandle.removeEventListener('mousedown', this.dragStartHandler);\n      window.removeEventListener('touchmove', this.dragMove);\n      window.removeEventListener('touchend', this.dragEndHandler);\n      window.removeEventListener('mousemove', this.dragMove);\n      window.removeEventListener('mouseup', this.dragEndHandler);\n      this.dragHandle.removeEventListener('keydown', this.keyHandler);\n    });\n  };\n\n  setPosition = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    if ('TouchEvent' in window && event instanceof TouchEvent) {\n      const firstTouch = event.touches[0];\n\n      if (!firstTouch) return;\n\n      this.pointerX = firstTouch.clientX;\n      this.pointerY = firstTouch.clientY;\n    } else {\n      this.pointerX = event.clientX;\n      this.pointerY = event.clientY;\n    }\n  };\n\n  setStartPosition = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    if ('TouchEvent' in window && event instanceof TouchEvent) {\n      const firstTouch = event.touches[0];\n\n      if (!firstTouch) return;\n\n      this.pointerStartX = firstTouch.clientX;\n      this.pointerStartY = firstTouch.clientY;\n    } else {\n      this.pointerStartX = event.clientX;\n      this.pointerStartY = event.clientY;\n    }\n  };\n\n  /**\n   * queueUpdate takes an optional function argument that is called\n   * in the requestAnimationFrame callback _after_ the resize function.\n   *\n   * We can use this to ensure that preferences are only ever saved after\n   * we have completed column resizing.\n   *\n   * Because the requestAnimationFrame 'hides' these function calls from the\n   * the ember test waiter, we also ensure that we track them by also cancelling\n   * the waiter in the requestAnimationFrame callback.\n   */\n  queueUpdate = (callback?: () => void) => {\n    if (this.dragFrame) {\n      cancelAnimationFrame(this.dragFrame);\n    }\n\n    this.dragFrame = requestAnimationFrame(() => {\n      this.meta.resize(this.pointerX - this.pointerStartX);\n      this.pointerStartX = this.pointerX;\n\n      if (callback) {\n        callback();\n      }\n\n      if (this.token) {\n        waiter.endAsync(this.token);\n        this.token = undefined;\n      }\n    });\n  };\n\n  dragEndHandler = () => {\n    this.meta.isResizing = false;\n\n    this.queueUpdate(this.meta.save);\n\n    /**\n     * No need to listen if we aren't dragging\n     */\n    window.removeEventListener('touchmove', this.dragMove);\n    window.removeEventListener('touchend', this.dragEndHandler);\n    window.removeEventListener('mousemove', this.dragMove);\n    window.removeEventListener('mouseup', this.dragEndHandler);\n  };\n\n  dragMove = (event: Event) => {\n    if (!this.meta.isResizing) return;\n    this.setPosition(event);\n    this.queueUpdate();\n  };\n\n  dragStartHandler = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    this.meta.isResizing = true;\n    if (event.target !== this.dragHandle) return;\n\n    if (this.token) {\n      waiter.endAsync(this.token);\n    }\n\n    this.token = waiter.beginAsync();\n\n    this.setPosition(event);\n    this.setStartPosition(event);\n\n    window.addEventListener('touchend', this.dragEndHandler);\n    window.addEventListener('touchmove', this.dragMove);\n    window.addEventListener('mousemove', this.dragMove);\n    window.addEventListener('mouseup', this.dragEndHandler);\n  };\n\n  keyHandler = (event: KeyboardEvent) => {\n    const deltaT = new Date().getTime() - this.lastKey;\n    const isRapid = deltaT < 50;\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {\n      this.keyDistance += isRapid ? 8 : 1;\n      this.lastKey = new Date().getTime();\n    }\n\n    if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {\n      this.keyDistance -= isRapid ? 8 : 1;\n      this.lastKey = new Date().getTime();\n    }\n\n    cancelAnimationFrame(this.keyFrame);\n    this.keyFrame = requestAnimationFrame(() => {\n      this.meta.resize(this.keyDistance);\n\n      this.keyDistance = 0;\n    });\n  };\n}\n\n/**\n * Modifier to attach to the column resize handles.\n * This provides both keyboard and mouse support for resizing columns.\n * (provided the resize handle element is focusable -- so consider using\n * a button for the resize element)\n *\n * @example\n * ```js\n * import Component from '@glimmer/component';\n * import { meta } from '@universal-ember/table/plugins';\n * import { resizeHandle, ColumnResizing } from '@universal-ember/table/plugins/column-resizing';\n *\n * export default class TableHead extends Component {\n *   /* ✂️  *\\/\n *\n *   <template>\n *     <thead>\n *       <tr>\n *         {{#each this.columns as |column|}}\n *           <th>\n *             <span>{{column.name}}</span>\n *             <button {{resizeHandle column}}></button>\n *           </th>\n *         {{/each}}\n *       </tr>\n *     </thead>\n *   </template>\n * }\n * ```\n *\n * Width and isResizing state is maintained on the \"meta\"\n * class so that the users may choose per-column stylings for\n * isResizing and dragging behaviors.\n *\n * For example, while dragging, the user may add a class based on the\n * isDragging property.\n *\n * @example\n * ```js\n * import Component from '@glimmer/component';\n * import { meta } from '@universal-ember/table/plugins';\n * import { resizeHandle, ColumnResizing } from '@universal-ember/table/plugins/column-resizing';\n *\n * export default class TableHead extends Component {\n *   /* ✂️  *\\/\n *\n *   isDragging = (column) => {\n *     return meta.forColumn(column, ColumnResizing).isDragging;\n *   }\n *\n *   <template>\n *     <thead>\n *       <tr>\n *         {{#each this.columns as |column|}}\n *           <th class=\"header {{if (this.isDragging column) 'blue'}}\">\n *             <span>{{column.name}}</span>\n *             <button {{resizeHandle column}}></button>\n *           </th>\n *         {{/each}}\n *       </tr>\n *     </thead>\n *   </template>\n * }\n * ```\n *\n *\n * @note\n * The logic here is copied from the drag slider in\n * https://limber.glimdown.com/\n * See: \"resize-handle\" on Limber's GitHub\n */\nexport const resizeHandle = ResizeHandle;\n"],"names":["waiter","buildWaiter","ResizeHandle","Modifier","constructor","args","_defineProperty","dragHandle","addEventListener","dragStartHandler","keyHandler","registerDestructor","meta","isResizing","token","endAsync","undefined","removeEventListener","window","dragMove","dragEndHandler","event","PointerEvent","MouseEvent","TouchEvent","firstTouch","touches","pointerX","clientX","pointerY","clientY","pointerStartX","pointerStartY","callback","dragFrame","cancelAnimationFrame","requestAnimationFrame","resize","queueUpdate","save","setPosition","target","beginAsync","setStartPosition","deltaT","Date","getTime","lastKey","isRapid","code","keyDistance","keyFrame","modify","element","column","forColumn","ColumnResizing","isSetup","setup","resizeHandle"],"mappings":"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CAACD,OAAO,GAAG,IAAIF,IAAI,EAAE,CAACC,OAAO,EAAE;AACrC;AAEAX,MAAAA,oBAAoB,CAAC,IAAI,CAACgB,QAAQ,CAAC;AACnC,MAAA,IAAI,CAACA,QAAQ,GAAGf,qBAAqB,CAAC,MAAM;QAC1C,IAAI,CAACxB,IAAI,CAACyB,MAAM,CAAC,IAAI,CAACa,WAAW,CAAC;QAElC,IAAI,CAACA,WAAW,GAAG,CAAC;AACtB,OAAC,CAAC;KACH,CAAA;AAAA;AA9JDE,EAAAA,MAAMA,CAACC,OAAgB,EAAE,CAACC,MAAM,CAAW,EAAE;IAC3C,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAAC1C,IAAI,GAAGA,IAAI,CAAC2C,SAAS,CAACD,MAAM,EAAEE,cAAc,CAAC;IAClD,IAAI,CAACjD,UAAU,GAAG8C,OAAsB;AAExC,IAAA,IAAI,CAAC,IAAI,CAACI,OAAO,EAAE;MACjB,IAAI,CAACA,OAAO,GAAG,IAAI;MACnB,IAAI,CAACC,KAAK,EAAE;AACd;AACF;AAsJF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAGzD;;;;"}

package/dist/plugins/column-resizing/helpers.js

@@ -0,0 +1,71 @@
+import { htmlSafe } from '@ember/template';
+import { meta } from '../-private/base.js';
+import { ColumnResizing } from './plugin.js';
+
+/**
+ * The column actively being resized by the user.
+ *
+ * Note that during resizing, multiple columns are resized at once,
+ * dependending on the boundaries of the resize events.
+ *
+ * The other columns being resized as a consequence of "this" column will not
+ * be marked as isResizing, because this is a user-scoped question:
+ *   "Is the user directly resizing this column?"
+ */
+const isResizing = column => meta.forColumn(column, ColumnResizing).isResizing;
+
+/**
+ * Does the column have room to shrink?
+ */
+const canShrink = column => meta.forColumn(column, ColumnResizing).canShrink;
+
+/**
+ * Does the column have a resize handle?
+ * The return value of this function can be determined by
+ * - if resizing is enabled for the column
+ *   - if resizing is enabled for the whole table
+ *   - or if we're asking about the first column (resize handles may only be "between" columns)
+ */
+const hasResizeHandle = column => meta.forColumn(column, ColumnResizing).hasResizeHandle;
+
+/**
+ * In this plugin (by default), styles are only applied to the headers automatically.
+ * in <Table> UIs, the header cells control the widths of all cells in that column.
+ * There are other kinds of tabular-like markup that may want to grab the widths of columns,
+ * because The Platform does not manage that automatically (like if divs and roles were used manually)
+ *
+ * This utility is meant to be applied to the `style` attribute of a particular td-like element.
+ */
+const styleStringFor = column => {
+  const columnMeta = meta.forColumn(column, ColumnResizing);
+  let result = '';
+
+  /**
+   * Styles are applied regardless of the "table" being resizable or not
+   * because in non-<table> UIs, we need to ensure that all cells in a column
+   * have the same width
+   */
+  for (const [key, value] of Object.entries(columnMeta.style)) {
+    result += `${toStyle(key)}:${value};`;
+  }
+  result = ';' + result;
+  return htmlSafe(result);
+};
+
+/**
+ * the JS API for styles is camel case,
+ * but CSS is kebab-case. To save on complexity and
+ * amount of code, we have a super small conversion function
+ * for only the properties relevant to the sticky plugin.
+ */
+const toStyle = key => {
+  switch (key) {
+    case 'minWidth':
+      return 'min-width';
+    default:
+      return key;
+  }
+};
+
+export { canShrink, hasResizeHandle, isResizing, styleStringFor };
+//# sourceMappingURL=helpers.js.map

package/dist/plugins/column-resizing/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/plugins/column-resizing/helpers.ts"],"sourcesContent":["import { htmlSafe } from '@ember/template';\n\nimport { meta } from '../-private/base.ts';\nimport { ColumnResizing } from './plugin.ts';\n\nimport type { Column } from '../../index.ts';\n\n/**\n * The column actively being resized by the user.\n *\n * Note that during resizing, multiple columns are resized at once,\n * dependending on the boundaries of the resize events.\n *\n * The other columns being resized as a consequence of \"this\" column will not\n * be marked as isResizing, because this is a user-scoped question:\n *   \"Is the user directly resizing this column?\"\n */\nexport const isResizing = (column: Column) =>\n  meta.forColumn(column, ColumnResizing).isResizing;\n\n/**\n * Does the column have room to shrink?\n */\nexport const canShrink = (column: Column) =>\n  meta.forColumn(column, ColumnResizing).canShrink;\n\n/**\n * Does the column have a resize handle?\n * The return value of this function can be determined by\n * - if resizing is enabled for the column\n *   - if resizing is enabled for the whole table\n *   - or if we're asking about the first column (resize handles may only be \"between\" columns)\n */\nexport const hasResizeHandle = (column: Column) =>\n  meta.forColumn(column, ColumnResizing).hasResizeHandle;\n\n/**\n * In this plugin (by default), styles are only applied to the headers automatically.\n * in <Table> UIs, the header cells control the widths of all cells in that column.\n * There are other kinds of tabular-like markup that may want to grab the widths of columns,\n * because The Platform does not manage that automatically (like if divs and roles were used manually)\n *\n * This utility is meant to be applied to the `style` attribute of a particular td-like element.\n */\nexport const styleStringFor = <DataType = unknown>(\n  column: Column<DataType>,\n): ReturnType<typeof htmlSafe> => {\n  const columnMeta = meta.forColumn(column, ColumnResizing);\n\n  let result = '';\n\n  /**\n   * Styles are applied regardless of the \"table\" being resizable or not\n   * because in non-<table> UIs, we need to ensure that all cells in a column\n   * have the same width\n   */\n  for (const [key, value] of Object.entries(columnMeta.style)) {\n    result += `${toStyle(key)}:${value};`;\n  }\n\n  result = ';' + result;\n\n  return htmlSafe(result);\n};\n\n/**\n * the JS API for styles is camel case,\n * but CSS is kebab-case. To save on complexity and\n * amount of code, we have a super small conversion function\n * for only the properties relevant to the sticky plugin.\n */\nconst toStyle = (key: string): string => {\n  switch (key) {\n    case 'minWidth':\n      return 'min-width';\n    default:\n      return key;\n  }\n};\n"],"names":["isResizing","column","meta","forColumn","ColumnResizing","canShrink","hasResizeHandle","styleStringFor","columnMeta","result","key","value","Object","entries","style","toStyle","htmlSafe"],"mappings":";;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,UAAU,GAAIC,MAAc,IACvCC,IAAI,CAACC,SAAS,CAACF,MAAM,EAAEG,cAAc,CAAC,CAACJ;;AAEzC;AACA;AACA;AACaK,MAAAA,SAAS,GAAIJ,MAAc,IACtCC,IAAI,CAACC,SAAS,CAACF,MAAM,EAAEG,cAAc,CAAC,CAACC;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,eAAe,GAAIL,MAAc,IAC5CC,IAAI,CAACC,SAAS,CAACF,MAAM,EAAEG,cAAc,CAAC,CAACE;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,cAAc,GACzBN,MAAwB,IACQ;EAChC,MAAMO,UAAU,GAAGN,IAAI,CAACC,SAAS,CAACF,MAAM,EAAEG,cAAc,CAAC;EAEzD,IAAIK,MAAM,GAAG,EAAE;;AAEf;AACF;AACA;AACA;AACA;AACE,EAAA,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACL,UAAU,CAACM,KAAK,CAAC,EAAE;IAC3DL,MAAM,IAAI,GAAGM,OAAO,CAACL,GAAG,CAAC,CAAA,CAAA,EAAIC,KAAK,CAAG,CAAA,CAAA;AACvC;EAEAF,MAAM,GAAG,GAAG,GAAGA,MAAM;EAErB,OAAOO,QAAQ,CAACP,MAAM,CAAC;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,OAAO,GAAIL,GAAW,IAAa;AACvC,EAAA,QAAQA,GAAG;AACT,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA;AACE,MAAA,OAAOA,GAAG;AACd;AACF,CAAC;;;;"}

package/dist/plugins/column-resizing/index.js

@@ -0,0 +1,4 @@
+export { resizeHandle } from './handle.js';
+export { canShrink, hasResizeHandle, isResizing, styleStringFor } from './helpers.js';
+export { ColumnResizing, ColumnResizing as Plugin } from './plugin.js';
+//# sourceMappingURL=index.js.map

package/dist/plugins/column-resizing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}