@daikin-oss/design-system-web-components 0.4.0 → 0.6.0

package/dist/cjs-dev/components/tab/daikin-tab.cjs

@@ -18,46 +18,50 @@ const cvaTab = classVarianceAuthority.cva(
   [
     "flex",
     "w-full",
-    "h-full",
+    "min-w-14",
+    "h-10",
     "items-center",
     "justify-center",
     "px-4",
     "pt-2",
     "pb-3",
-    "text-base",
-    "font-bold",
     "text-center",
     "font-daikinSerif",
-    "relative",
     "tracking-wide",
     "whitespace-nowrap",
-    "contain-paint",
+    "relative",
     "focus-visible:outline-none",
-    "focus-visible:before:w-full",
-    "focus-visible:before:h-[calc(100%_-_4px)]",
-    "focus-visible:before:border",
-    "focus-visible:before:border-daikinBlue-700",
     "focus-visible:before:absolute",
-    "focus-visible:before:top-0",
-    "disabled:text-daikinNeutral-200"
+    "focus-visible:before:-inset-[3px]",
+    "focus-visible:before:z-[1]",
+    "focus-visible:before:border",
+    "focus-visible:before:border-2",
+    "focus-visible:before:border-system-state-focus",
+    "disabled:text-system-state-disabled",
+    "after:absolute",
+    "after:inset-0",
+    "after:top-auto"
   ],
   {
     variants: {
       active: {
         false: [
-          "hover:text-daikinNeutral-500",
-          "active:text-daikinNeutral-700"
+          "enabled:text-system-state-neutral-active",
+          "enabled:hover:text-system-state-neutral-hover",
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:text-system-state-neutral-press",
+          "enabled:active:bg-system-background-surface-press",
+          "after:h-[1px]",
+          "after:bg-system-element-divider-secondary"
         ],
         true: [
-          "text-daikinBlue-500",
-          "hover:text-daikinBlue-300",
-          "active:text-daikinBlue-600",
-          "after:w-full",
+          "font-bold",
+          "enabled:text-system-state-primary-active",
+          "enabled:hover:bg-system-state-primary-surface-hover",
+          "enabled:active:bg-system-state-primary-surface-press",
           "after:h-1",
-          "after:absolute",
-          "after:bottom-0",
-          "enabled:after:bg-daikinBlue-500",
-          "disabled:after:bg-daikinNeutral-200"
+          "enabled:after:bg-system-state-primary-active",
+          "disabled:after:bg-system-state-disabled"
         ]
       }
     }
@@ -101,7 +105,8 @@ exports.DaikinTab.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: inline-block;
+      display: block;
+      width: 100%;
     }
   `;
 __decorateClass([

package/dist/cjs-dev/components/tab/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-tab.cjs";

package/dist/{cjs/components/tab-panels/daikin-tab-panels.d.ts → cjs-dev/components/tab-panels/daikin-tab-panels.d.cts}

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
+import { ARIARole } from "../../lit-analyzer-types.cjs";
 /**
- * The panel switcher component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
- * When a user selects a tab, the panel switcher component ensures the corresponding content panel is shown while hiding the others.
+ * The tab panels component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
+ * When a user selects a tab, the tab panels component ensures the corresponding content panel is shown while hiding the others.
  *
  * Hierarchy:
  * - `daikin-tabs` > `daikin-tab-panels` ("panels" slot)
@@ -12,7 +12,7 @@ import { ARIARole } from '../../lit-analyzer-types';
  * @example
  *
  * ```js
- * import "@daikin-oss/design-system-web-components/components/panel-switcher/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tab-panels/index.js";
  * ```
  *
  * ```html

package/dist/cjs-dev/components/tab-panels/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-tab-panels.cjs";

package/dist/cjs-dev/components/table/daikin-table.cjs

@@ -0,0 +1,260 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const repeat_js = require("lit/directives/repeat.js");
+const tailwind = require("../../tailwind.css.cjs");
+require("../checkbox/daikin-checkbox.cjs");
+require("../table-cell/daikin-table-cell.cjs");
+require("../table-header-cell/daikin-table-header-cell.cjs");
+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 defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
+const cvaRow = classVarianceAuthority.cva(
+  [
+    "border-b",
+    "border-b-system-element-divider-secondary",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-system-state-focus"
+  ],
+  {
+    variants: {
+      selected: {
+        false: ["hover:bg-system-background-surface-hover"],
+        true: [
+          "bg-system-background-surface-selected",
+          "hover:bg-system-background-surface-selectedHover"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinTable = class DaikinTable extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.headers = [];
+    this.rows = [];
+    this.selectable = false;
+    this.sortable = false;
+    this.selection = [];
+    this.order = null;
+    this.sort = null;
+    this.sortFunction = null;
+    this._bulkRowsCheckState = "unchecked";
+    this._currentView = [];
+  }
+  _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();
+    }
+  }
+  _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;
+    }
+    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"));
+  }
+  _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";
+  }
+  render() {
+    const createHeaderRow = () => repeat_js.repeat(
+      this.headers,
+      ({ key }) => key,
+      ({ key, label, alignment, sortable }) => lit.html`<th
+            class="h-full p-0"
+            aria-sort=${ifDefined_js.ifDefined(
+        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
+      )}
+          >
+            <slot
+              name=${`header:${key}`}
+              @change-sort=${(event) => this._handleClickSort(event, key)}
+            >
+              <daikin-table-header-cell
+                alignment=${alignment ?? "left"}
+                ?sortable=${this.sortable && sortable}
+              >
+                ${label}
+              </daikin-table-header-cell>
+            </slot>
+          </th>`
+    );
+    const createRow = (item) => repeat_js.repeat(
+      this.headers,
+      ({ key }) => `${item.id}:${key}`,
+      ({ key, alignment }) => lit.html`<td class="h-full p-0">
+            <slot name=${`cell:${item.id}:${key}`}>
+              <daikin-table-cell alignment=${alignment ?? "left"}>
+                ${item[key]}
+              </daikin-table-cell>
+            </slot>
+          </td>`
+    );
+    return lit.html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
+      <table class="w-full table-fixed">
+        <thead>
+          <tr class="border-b border-b-system-element-divider-primary">
+            ${this.selectable ? lit.html`<td class="w-12 p-0">
+                  <span
+                    class="flex items-center justify-center size-full min-h-12"
+                  >
+                    <daikin-checkbox
+                      name="allItem"
+                      .checkState=${this._bulkRowsCheckState}
+                      label="Select all"
+                      label-position="hidden"
+                      @change=${this._handleHeaderCheckboxChange}
+                    ></daikin-checkbox>
+                  </span>
+                </td>` : lit.nothing}
+            ${createHeaderRow()}
+          </tr>
+        </thead>
+        <tbody>
+          ${repeat_js.repeat(
+      this._currentView,
+      ({ id }) => id,
+      (row) => lit.html`<tr
+                class=${cvaRow({
+        selected: this.selectable && !!this.selection.find((id) => id === row.id)
+      })}
+              >
+                ${this.selectable ? lit.html`<td class="w-12 p-0">
+                      <span
+                        class="flex justify-center items-center size-full min-h-12"
+                      >
+                        <daikin-checkbox
+                          name=${row.id}
+                          .checkState=${this.selection.includes(row.id) ? "checked" : "unchecked"}
+                          label="Select row"
+                          label-position="hidden"
+                          @change=${this._handleBodyCheckboxChange}
+                        ></daikin-checkbox>
+                      </span>
+                    </td>` : lit.nothing}
+                ${createRow(row)}
+              </tr>`
+    )}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  willUpdate(changedProperties) {
+    const viewChanged = 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")) {
+      {
+        if (this.headers.length !== [...new Set(this.headers.map(({ key }) => key))].length) {
+          console.warn("The `key` values in `headers` are duplicated");
+        }
+      }
+    }
+    if (changedProperties.has("rows")) {
+      {
+        if (this.rows.length !== [...new Set(this.rows.map(({ id }) => id))].length) {
+          console.warn("The `id` values in `rows` are duplicated");
+        }
+      }
+    }
+  }
+};
+exports.DaikinTable.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinTable.prototype, "headers", 2);
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinTable.prototype, "rows", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTable.prototype, "selectable", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTable.prototype, "sortable", 2);
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinTable.prototype, "selection", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTable.prototype, "order", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTable.prototype, "sort", 2);
+__decorateClass([
+  decorators_js.property({ attribute: false })
+], exports.DaikinTable.prototype, "sortFunction", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTable.prototype, "_bulkRowsCheckState", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTable.prototype, "_currentView", 2);
+exports.DaikinTable = __decorateClass([
+  decorators_js.customElement("daikin-table")
+], exports.DaikinTable);

package/dist/cjs-dev/components/table/daikin-table.d.cts

@@ -0,0 +1,130 @@
+import { LitElement, PropertyValues } from 'lit';
+export type HeaderType<T extends string = string> = {
+    key: T;
+    label: string;
+    alignment?: "left" | "right" | "center";
+    sortable: boolean;
+};
+/**
+ * The table component is a component that can display multiple data objects in a tabular format.
+ *
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component does not require its child elements to have cells. Instead, it can be made to function as a table by giving the properties `headers` and `rows` appropriate arrays.
+ *
+ * If the contents of the table are plain text only, give them to the `rows` property. However, if you want to give contents other than text, such as buttons or images, you will need to prepare a element with the corresponding `slot` attribute. The value of this attribute must be structured as follows: ``slot=${`cell:${headers[i].key}:${rows[i].id}`}``
+ *
+ * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ * - `daikin-table` > `daikin-table-header-cell`
+ *
+ * @fires change-check - When the checkbox is operated, it returns the array of `id`s that are currently checked.
+ * @fires change-sort - When the sort is changed, it returns the current sort key and the order (ascending or descending).
+ *
+ * @slot header:${headers[i].key} - A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.
+ * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table
+ *   .headers="[
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ]"
+ *   .rows="[
+ *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
+ *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
+ *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
+ *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
+ *   ]"
+ * >
+ *   <daikin-table-cell slot="cell:1:name">
+ *     Apple
+ *     <span slot="subtitle">This is a autumn fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:2:name">
+ *     Peach
+ *     <span slot="subtitle">This is a summer fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:3:name">
+ *     Orange
+ *     <span slot="subtitle">This is a winter fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:4:name">
+ *     Strawberry
+ *     <span slot="subtitle">This is a spring fruit.</span>
+ *   </daikin-table-cell>
+ * </daikin-table>
+ * ```
+ */
+export declare class DaikinTable<T extends {
+    id: string;
+} = any> extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Headers of the table.
+     * - key: The value of `key` corresponds to the key, excluding the id of rows. As a whole array, the value of `key` must be unique. Also, only use alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: This is the text that is displayed in the header cells.
+     * - alignment: The direction in which the characters are aligned can be omitted. If it is omitted, the characters will be aligned to the left.
+     * - sortable: If sortable (`sortable = true`), this specifies whether sorting is performed on this column.
+     */
+    headers: readonly HeaderType<Extract<keyof T, string>>[];
+    /**
+     * Rows of the table.
+     * An array that uses the element `key` in the column as the key and stores the corresponding value.
+     * As a whole array, the value of `id` should be unique.
+     */
+    rows: T[];
+    /**
+     * Whether or not to enable selection of rows.
+     * If `true`, a checkbox will be displayed to the left of each row.
+     */
+    selectable: boolean;
+    /**
+     * Whether or not to enable sorting of the rows.
+     * If `true`, a button for sorting will be displayed to the right of each header cell text.
+     */
+    sortable: boolean;
+    /**
+     * An array of `id`s for the `rows` that have been checked.
+     */
+    selection: string[];
+    /**
+     * Sort order of the table.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * The `key` of the currently sorted column.
+     */
+    sort: keyof T | null;
+    /**
+     * Specify this when you want to customize the sort function.
+     * The function must be ascending, and the return value must be `0`, `1` or `-1`.
+     */
+    sortFunction: {
+        [key in keyof T]?: (a: T, b: T, key: key) => number;
+    } | ((a: T, b: T, key: keyof T) => number) | false | null;
+    private _bulkRowsCheckState;
+    /**
+     * The rows displayed in the current table.
+     * Currently this is a sorted `rows`, but pagination may be considered in the future.
+     */
+    private _currentView;
+    private _updateCurrentView;
+    private _emitChangeCheckEvent;
+    private _handleHeaderCheckboxChange;
+    private _handleBodyCheckboxChange;
+    private _handleClickSort;
+    private _updateHeaderCheckboxState;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table": DaikinTable;
+    }
+}
+export default DaikinTable;

package/dist/cjs-dev/components/table/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTable = require("./daikin-table.cjs");
+Object.defineProperty(exports, "DaikinTable", {
+  enumerable: true,
+  get: () => daikinTable.DaikinTable
+});

package/dist/cjs-dev/components/table/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-table.cjs";

package/dist/cjs-dev/components/table-cell/daikin-table-cell.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaCell = classVarianceAuthority.cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "justify-center",
+    "size-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "text-system-element-text-primary"
+  ],
+  {
+    variants: {
+      alignment: {
+        left: ["items-start", "text-left"],
+        right: ["items-end", "text-end"],
+        center: ["items-center", "text-center"]
+      }
+    }
+  }
+);
+exports.DaikinTableCell = class DaikinTableCell extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+  }
+  render() {
+    return lit.html`<span class=${cvaCell({ alignment: this.alignment })}>
+      <slot></slot>
+      <slot
+        name="subtitle"
+        class="text-system-element-text-secondary text-xs"
+      ></slot>
+    </span>`;
+  }
+};
+exports.DaikinTableCell.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-height: 3rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTableCell.prototype, "alignment", 2);
+exports.DaikinTableCell = __decorateClass([
+  decorators_js.customElement("daikin-table-cell")
+], exports.DaikinTableCell);

package/dist/cjs-dev/components/table-cell/daikin-table-cell.d.cts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaCell: (props?: ({
+    alignment?: "right" | "left" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
+/**
+ * This is a component that functions as an element to be placed on the daikin-table. When you want to insert a subtitle into a cell, or when you want to use something other than plain text (e.g. a button), you need to use this component.
+ *
+ * This is a component used as a slot in the daikin-table, but in order to do so, you need to specify the appropriate slot attribute. For more information, please check the daikin-table component.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ *
+ * @slot - A slot for the table cell.
+ * @slot subtitle - This is a subtitle element that is inserted into a cell.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table-cell slot="cell:key:id">
+ *   Table cell label
+ *   <span slot="subtitle">Table cell subtitle</span>
+ * </daikin-table-cell>
+ * ```
+ */
+export declare class DaikinTableCell extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the direction of cell alignment.
+     * This is not normally something that users need to specify.
+     */
+    alignment: TableCellVariantProps["alignment"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table-cell": DaikinTableCell;
+    }
+}
+export default DaikinTableCell;

package/dist/cjs-dev/components/table-cell/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTableCell = require("./daikin-table-cell.cjs");
+Object.defineProperty(exports, "DaikinTableCell", {
+  enumerable: true,
+  get: () => daikinTableCell.DaikinTableCell
+});

package/dist/cjs-dev/components/table-cell/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-table-cell.cjs";