@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es/components/table/daikin-table.js

@@ -1,190 +1,183 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import "../checkbox/daikin-checkbox.js";
 import "../table-cell/daikin-table-cell.js";
 import "../table-header-cell/daikin-table-header-cell.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const getColumnPartName = (key) => `column-${key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-const getRowPartName = (id) => `row-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
-const cvaTableHeaderCell = cva(["h-full", "p-0"], {
-  variants: {
-    hoverEnabled: {
-      false: [],
-      true: ["hover:bg-ddt-color-common-surface-hover"]
-    },
-    sortable: {
-      false: [],
-      true: [
-        "active:bg-ddt-color-common-surface-press",
-        "focus-within:outline-solid",
-        "focus-within:outline-2",
-        "focus-within:-outline-offset-2",
-        "focus-within:outline-ddt-color-common-border-focus"
-      ]
-    }
-  }
-});
-const cvaRow = cva(
-  [
-    "border-b",
-    "border-b-(--ddc-table-border-color)",
-    "focus-visible:outline-solid",
-    "focus-visible:outline-2",
-    "focus-visible:-outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus"
-  ],
-  {
-    variants: {
-      selected: {
-        false: [
-          "bg-ddt-color-common-surface-default",
-          "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-hover",
-          "data-hover:bg-ddt-color-common-surface-hover"
-        ],
-        true: [
-          "bg-ddt-color-common-surface-selected-default",
-          "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-selected-hover",
-          "data-hover:bg-ddt-color-common-surface-selected-hover"
-        ]
-      }
-    }
-  }
-);
-let DaikinTable = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.headers = [];
-    this.rows = [];
-    this.selectable = false;
-    this.sortable = false;
-    this.border = "underline";
-    this.stickyHeader = false;
-    this.selection = [];
-    this.sort = null;
-    this.order = null;
-    this.sortFunction = null;
-    this._bulkRowsCheckState = "unchecked";
-    this._currentView = [];
-    this._currentTouchHoverRowId = null;
-    this._tableRef = createRef();
-  }
-  _updateCurrentView() {
-    var _a;
-    const sort = this.sort;
-    if (!sort || this.sortFunction === false) {
-      this._currentView = Array.from(this.rows);
-      return;
-    }
-    const sortFunction = (typeof this.sortFunction === "object" ? (_a = this.sortFunction) == null ? void 0 : _a[sort] : this.sortFunction) ?? defaultSort;
-    this._currentView = this.rows.toSorted((a, b) => sortFunction(a, b, sort));
-    if (this.order === "desc") {
-      this._currentView.reverse();
+import { css, html, nothing, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/table/daikin-table.ts
+var getColumnPartName = (key) => `column-${key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+var getRowPartName = (id) => `row-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+var defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
+var cvaTableHeaderCell = cva(["h-full", "p-0"], { variants: {
+	hoverEnabled: {
+		false: [],
+		true: ["hover:bg-ddt-color-common-surface-hover"]
+	},
+	sortable: {
+		false: [],
+		true: [
+			"active:bg-ddt-color-common-surface-press",
+			"focus-within:outline-solid",
+			"focus-within:outline-2",
+			"focus-within:-outline-offset-2",
+			"focus-within:outline-ddt-color-common-border-focus"
+		]
+	}
+} });
+var cvaRow = cva([
+	"border-b",
+	"border-b-(--ddc-table-border-color)",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-2",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-ddt-color-common-border-focus"
+], { variants: { selected: {
+	false: [
+		"bg-ddt-color-common-surface-default",
+		"hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-hover",
+		"data-hover:bg-ddt-color-common-surface-hover"
+	],
+	true: [
+		"bg-ddt-color-common-surface-selected-default",
+		"hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-selected-hover",
+		"data-hover:bg-ddt-color-common-surface-selected-hover"
+	]
+} } });
+var DaikinTable = class DaikinTable extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headers = [];
+		this.rows = [];
+		this.selectable = false;
+		this.sortable = false;
+		this.border = "underline";
+		this.stickyHeader = false;
+		this.selection = [];
+		this.sort = null;
+		this.order = null;
+		this.sortFunction = null;
+		this._bulkRowsCheckState = "unchecked";
+		this._currentView = [];
+		this._currentTouchHoverRowId = null;
+		this._tableRef = createRef();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: visible;
+      --ddc-table-border-color: var(--dds-color-divider);
     }
-  }
-  _emitChangeCheckEvent() {
-    this.dispatchEvent(new Event("change-check"));
-  }
-  _handleHeaderCheckboxChange() {
-    switch (this._bulkRowsCheckState) {
-      case "checked":
-        this.selection = [];
-        break;
-      default:
-        this.selection = this._currentView.map(({ id }) => id);
-        break;
+
+    :host([border="none"]) {
+      --ddc-table-border-color: transparent;
     }
-    this._emitChangeCheckEvent();
-  }
-  _handleBodyCheckboxChange(event) {
-    const { name: id } = event.target;
-    if (this.selection.includes(id)) {
-      this.selection = this.selection.filter((selectedId) => selectedId !== id);
-    } else {
-      this.selection = [...this.selection, id];
+
+    thead tr > th,
+    thead tr > td {
+      box-shadow: inset 0 -1px 0 var(--ddc-table-border-color);
     }
-    this._emitChangeCheckEvent();
-  }
-  _handleClickSort(event, key) {
-    event.stopPropagation();
-    if (this.sort === key) {
-      this.order = this.order === "asc" ? "desc" : "asc";
-    } else {
-      this.sort = key;
-      this.order = "asc";
+
+    :host([sticky-header]) {
+      overflow: visible;
     }
-    this.dispatchEvent(new Event("change-sort"));
-  }
-  _handleTouchMove(event) {
-    var _a;
-    const touch = event.touches[0];
-    const row = touch && ((_a = (this.shadowRoot ?? document).elementsFromPoint(touch.clientX, touch.clientY).find(
-      (element) => {
-        var _a2;
-        return ((_a2 = this._tableRef.value) == null ? void 0 : _a2.contains(element)) && element.closest("tr");
-      }
-    )) == null ? void 0 : _a.closest("tr"));
-    this._currentTouchHoverRowId = (row == null ? void 0 : row.dataset.id) ?? null;
-  }
-  _handleTouchStart(event) {
-    this._handleTouchMove(event);
-  }
-  _handleTouchEnd() {
-    this._currentTouchHoverRowId = null;
-  }
-  _updateHeaderCheckboxState() {
-    const rowIdSet = new Set(this.rows.map(({ id }) => id));
-    this.selection = this.selection.filter((id) => rowIdSet.has(id));
-    const selectionCount = this.selection.length;
-    this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
-  }
-  _reflectSlotProperties() {
-    var _a;
-    for (const { key } of this.headers) {
-      const headerCell = (_a = (this.shadowRoot ?? this).querySelector(
-        `slot[name="header:${CSS.escape(String(key))}"]`
-      )) == null ? void 0 : _a.assignedElements()[0];
-      if ((headerCell == null ? void 0 : headerCell.tagName) !== "DAIKIN-TABLE-HEADER-CELL") {
-        continue;
-      }
-      headerCell.order = this.sort === key ? this.order : null;
+
+    :host([sticky-header]) thead tr > th,
+    :host([sticky-header]) thead tr > td {
+      position: sticky;
+      top: var(--table-sticky-header-top, 0px);
+      z-index: 1;
+      background-color: var(--dds-color-common-surface-default);
     }
-  }
-  _handleSlotChange() {
-    this._reflectSlotProperties();
-  }
-  render() {
-    const createHeaderRow = () => repeat(
-      this.headers,
-      ({ key }) => key,
-      ({ key, label, alignment, sortable }) => {
-        const isSortableHeader = this.sortable && sortable;
-        const isHeaderHoverEnabled = isSortableHeader;
-        const currentSort = isSortableHeader && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
-        return html`<th
+  `;
+	}
+	_updateCurrentView() {
+		const sort = this.sort;
+		if (!sort || this.sortFunction === false) {
+			this._currentView = Array.from(this.rows);
+			return;
+		}
+		const sortFunction = (typeof this.sortFunction === "object" ? this.sortFunction?.[sort] : this.sortFunction) ?? defaultSort;
+		this._currentView = this.rows.toSorted((a, b) => sortFunction(a, b, sort));
+		if (this.order === "desc") this._currentView.reverse();
+	}
+	_emitChangeCheckEvent() {
+		this.dispatchEvent(new Event("change-check"));
+	}
+	_handleHeaderCheckboxChange() {
+		switch (this._bulkRowsCheckState) {
+			case "checked":
+				this.selection = [];
+				break;
+			default: this.selection = this._currentView.map(({ id }) => id);
+		}
+		this._emitChangeCheckEvent();
+	}
+	_handleBodyCheckboxChange(event) {
+		const { name: id } = event.target;
+		if (this.selection.includes(id)) this.selection = this.selection.filter((selectedId) => selectedId !== id);
+		else this.selection = [...this.selection, id];
+		this._emitChangeCheckEvent();
+	}
+	_handleClickSort(event, key) {
+		event.stopPropagation();
+		if (this.sort === key) this.order = this.order === "asc" ? "desc" : "asc";
+		else {
+			this.sort = key;
+			this.order = "asc";
+		}
+		this.dispatchEvent(new Event("change-sort"));
+	}
+	_handleTouchMove(event) {
+		const touch = event.touches[0];
+		const row = touch && (this.shadowRoot ?? document).elementsFromPoint(touch.clientX, touch.clientY).find((element) => this._tableRef.value?.contains(element) && element.closest("tr"))?.closest("tr");
+		this._currentTouchHoverRowId = row?.dataset.id ?? null;
+	}
+	_handleTouchStart(event) {
+		this._handleTouchMove(event);
+	}
+	_handleTouchEnd() {
+		this._currentTouchHoverRowId = null;
+	}
+	_updateHeaderCheckboxState() {
+		const rowIdSet = new Set(this.rows.map(({ id }) => id));
+		this.selection = this.selection.filter((id) => rowIdSet.has(id));
+		const selectionCount = this.selection.length;
+		this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
+	}
+	_reflectSlotProperties() {
+		for (const { key } of this.headers) {
+			const headerCell = (this.shadowRoot ?? this).querySelector(`slot[name="header:${CSS.escape(key)}"]`)?.assignedElements()[0];
+			if (headerCell?.tagName !== "DAIKIN-TABLE-HEADER-CELL") continue;
+			headerCell.order = this.sort === key ? this.order : null;
+		}
+	}
+	_handleSlotChange() {
+		this._reflectSlotProperties();
+	}
+	render() {
+		const createHeaderRow = () => repeat(this.headers, ({ key }) => key, ({ key, label, alignment, sortable }) => {
+			const isSortableHeader = this.sortable && sortable;
+			const isHeaderHoverEnabled = isSortableHeader;
+			const currentSort = isSortableHeader && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+			return html`<th
             class=${cvaTableHeaderCell({
-          hoverEnabled: isHeaderHoverEnabled,
-          sortable: isSortableHeader
-        })}
+				hoverEnabled: isHeaderHoverEnabled,
+				sortable: isSortableHeader
+			})}
             part=${`header cell ${getColumnPartName(String(key))}`}
             aria-sort=${ifDefined(currentSort)}
           >
@@ -204,40 +197,32 @@ let DaikinTable = class extends DDSElement {
               </daikin-table-header-cell>
             </slot>
           </th>`;
-      }
-    );
-    const createRow = (item, isOddRow, isSelectedRow) => repeat(
-      this.headers,
-      ({ key }) => `${item.id}:${key}`,
-      ({ key, alignment }) => html`<td
+		});
+		const createRow = (item, isOddRow, isSelectedRow) => repeat(this.headers, ({ key }) => `${item.id}:${key}`, ({ key, alignment }) => html`<td
             class="h-full p-0"
             part=${[
-        "body",
-        "cell",
-        getRowPartName(String(item.id)),
-        getColumnPartName(String(key)),
-        isSelectedRow ? "selected" : null,
-        isOddRow ? "odd" : null
-      ].filter((partName) => !!partName).join(" ")}
+			"body",
+			"cell",
+			getRowPartName(String(item.id)),
+			getColumnPartName(String(key)),
+			isSelectedRow ? "selected" : null,
+			isOddRow ? "odd" : null
+		].filter((partName) => !!partName).join(" ")}
           >
             <slot name=${`cell:${item.id}:${key}`}>
               <daikin-table-cell alignment=${alignment ?? "left"}>
                 ${item[key]}
               </daikin-table-cell>
             </slot>
-          </td>`
-    );
-    return html`<div class="flex flex-col gap-6 w-full">
+          </td>`);
+		return html`<div class="flex flex-col gap-6 w-full">
       <table
         ${ref(this._tableRef)}
         class="w-full group"
         ?data-hover=${this._currentTouchHoverRowId != null}
       >
         <thead>
-          <tr
-            class="border-b border-b-(--ddc-table-border-color)"
-            part="header row"
-          >
+          <tr part="header row">
             ${this.selectable ? html`<td class="w-12 p-0">
                   <span
                     class="flex items-center justify-center size-full min-h-(--dds-input-height)"
@@ -266,35 +251,30 @@ let DaikinTable = class extends DDSElement {
                   </div>
                 </td>
               </tr>` : nothing}
-          ${repeat(
-      this._currentView,
-      ({ id }) => id,
-      (row, index) => {
-        const isOddRow = index % 2 === 0;
-        const isSelectedRow = this.selectable && this.selection.includes(row.id);
-        return html`<tr
-                class=${cvaRow({
-          selected: isSelectedRow
-        })}
+          ${repeat(this._currentView, ({ id }) => id, (row, index) => {
+			const isOddRow = index % 2 === 0;
+			const isSelectedRow = this.selectable && this.selection.includes(row.id);
+			return html`<tr
+                class=${cvaRow({ selected: isSelectedRow })}
                 part=${[
-          "body",
-          "row",
-          getRowPartName(String(row.id)),
-          isSelectedRow ? "selected" : null
-        ].filter((partName) => !!partName).join(" ")}
+				"body",
+				"row",
+				getRowPartName(String(row.id)),
+				isSelectedRow ? "selected" : null
+			].filter((partName) => !!partName).join(" ")}
                 data-id=${row.id}
                 ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
                 ${this.selectable ? html`<td
                       class="w-12 p-0"
                       part=${[
-          "body",
-          "cell",
-          "checkbox-cell",
-          getRowPartName(String(row.id)),
-          isSelectedRow ? "selected" : null,
-          isOddRow ? "odd" : null
-        ].filter((partName) => !!partName).join(" ")}
+				"body",
+				"cell",
+				"checkbox-cell",
+				getRowPartName(String(row.id)),
+				isSelectedRow ? "selected" : null,
+				isOddRow ? "odd" : null
+			].filter((partName) => !!partName).join(" ")}
                     >
                       <span
                         class="flex justify-center items-center size-full min-h-(--dds-input-height)"
@@ -310,103 +290,64 @@ let DaikinTable = class extends DDSElement {
                     </td>` : nothing}
                 ${createRow(row, isOddRow, isSelectedRow)}
               </tr>`;
-      }
-    )}
+		})}
         </tbody>
       </table>
     </div>`;
-  }
-  willUpdate(changedProperties) {
-    const viewChanged = changedProperties.has("headers") || changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
-    const selectionChanged = changedProperties.has("selection");
-    if (viewChanged) {
-      this._updateCurrentView();
-    }
-    if (viewChanged || selectionChanged) {
-      this._updateHeaderCheckboxState();
-    }
-  }
-  updated(changedProperties) {
-    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
-    if (sortChanged) {
-      this._reflectSlotProperties();
-    }
-  }
-};
-DaikinTable.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: 100%;
-      overflow-x: auto;
-      overflow-y: visible;
-      --ddc-table-border-color: var(--dds-color-divider);
-    }
-
-    :host([border="none"]) {
-      --ddc-table-border-color: transparent;
-    }
-
-    :host([sticky-header]) {
-      overflow: visible;
-    }
-
-    :host([sticky-header]) thead tr > th,
-    :host([sticky-header]) thead tr > td {
-      position: sticky;
-      top: var(--table-sticky-header-top, 0px);
-      z-index: 1;
-      background-color: var(--dds-color-common-surface-default);
-    }
-  `;
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinTable.prototype, "headers", 2);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinTable.prototype, "rows", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTable.prototype, "selectable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTable.prototype, "sortable", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "underline",
-    isAllowedValue: oneOf(["none", "underline"])
-  })
-], DaikinTable.prototype, "border", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "sticky-header" })
-], DaikinTable.prototype, "stickyHeader", 2);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinTable.prototype, "selection", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinTable.prototype, "sort", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinTable.prototype, "order", 2);
-__decorateClass([
-  property({ attribute: false })
-], DaikinTable.prototype, "sortFunction", 2);
-__decorateClass([
-  state()
-], DaikinTable.prototype, "_bulkRowsCheckState", 2);
-__decorateClass([
-  state()
-], DaikinTable.prototype, "_currentView", 2);
-__decorateClass([
-  state()
-], DaikinTable.prototype, "_currentTouchHoverRowId", 2);
-DaikinTable = __decorateClass([
-  ddsElement("daikin-table")
-], DaikinTable);
-export {
-  DaikinTable
+	}
+	willUpdate(changedProperties) {
+		const viewChanged = changedProperties.has("headers") || changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+		const selectionChanged = changedProperties.has("selection");
+		if (viewChanged) this._updateCurrentView();
+		if (viewChanged || selectionChanged) this._updateHeaderCheckboxState();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order")) this._reflectSlotProperties();
+	}
 };
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinTable.prototype, "headers", void 0);
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinTable.prototype, "rows", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTable.prototype, "selectable", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTable.prototype, "sortable", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "underline",
+	isAllowedValue: oneOf(["none", "underline"])
+})], DaikinTable.prototype, "border", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true,
+	attribute: "sticky-header"
+})], DaikinTable.prototype, "stickyHeader", void 0);
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinTable.prototype, "selection", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true
+})], DaikinTable.prototype, "sort", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true
+})], DaikinTable.prototype, "order", void 0);
+__decorate([property$1({ attribute: false })], DaikinTable.prototype, "sortFunction", void 0);
+__decorate([state()], DaikinTable.prototype, "_bulkRowsCheckState", void 0);
+__decorate([state()], DaikinTable.prototype, "_currentView", void 0);
+__decorate([state()], DaikinTable.prototype, "_currentTouchHoverRowId", void 0);
+DaikinTable = __decorate([ddsElement("daikin-table")], DaikinTable);
+//#endregion
+export { DaikinTable };

package/dist/es/components/table/index.js

@@ -1,4 +1,2 @@
 import { DaikinTable } from "./daikin-table.js";
-export {
-  DaikinTable
-};
+export { DaikinTable };