@daikin-oss/design-system-web-components 1.2.0 → 1.3.0

package/dist/es-dev/components/table/daikin-table.d.ts

@@ -9,9 +9,11 @@ export type HeaderType<T extends string = string> = {
 /**
  * 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.
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.
  *
- * 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}`}``
+ * By specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``
+ *
+ * By specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``
  *
  * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
  *
@@ -34,19 +36,8 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```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>
+ *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
  *   <daikin-table-cell slot="cell:1:name">
  *     Apple
  *     <span slot="subtitle">This is a autumn fruit.</span>
@@ -64,6 +55,22 @@ export type HeaderType<T extends string = string> = {
  *     <span slot="subtitle">This is a spring fruit.</span>
  *   </daikin-table-cell>
  * </daikin-table>
+ *
+ * <script>
+ *   // Set up the table data
+ *   const tableElement = document.querySelector('daikin-table');
+ *   tableElement.headers = [
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ];
+ *   tableElement.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' },
+ *   ];
+ * </script>
  * ```
  */
 export declare class DaikinTable<T extends {
@@ -72,51 +79,75 @@ export declare class DaikinTable<T extends {
     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.
+     * An array of header configuration objects that define the table columns.
+     * Each object must have a unique `key` (used to match row data) and a `label` (displayed text).
+     *
+     * - key: The `key` value corresponds to the property name in the row data (excluding `id`). All `key` values must be unique within the headers array. Use only alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: The text displayed in the header cells.
+     * - alignment: The text alignment direction. Defaults to left alignment if omitted.
+     * - sortable: When `sortable = true`, enables sorting for this column.
+     *
+     * @example
+     * [
+     *   { key: 'name', label: 'Name', sortable: true },
+     *   { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+     * ]
      */
     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.
+     * An array of data objects where each object represents a table row.
+     * Each object must have a unique `id` property and properties that match the `key` values defined in `headers`.
+     *
+     * @example
+     * [
+     *   { id: '1', name: 'Apple', price: '$2' },
+     *   { id: '2', name: 'Orange', price: '$1' },
+     * ]
      */
     rows: T[];
     /**
-     * Whether or not to enable selection of rows.
-     * If `true`, a checkbox will be displayed to the left of each row.
+     * Whether to enable row selection.
+     * When `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.
+     * Whether to enable row sorting.
+     * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
     /**
-     * An array of `id`s for the `rows` that have been checked.
+     * An array of `id` values for the selected rows.
      */
     selection: string[];
-    /**
-     * Sort order of the table.
-     */
-    order: "asc" | "desc" | null;
     /**
      * The `key` of the currently sorted column.
+     * Used with the `order` property to determine which column is sorted and in which direction.
+     *
+     * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
      */
     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`.
+     * The sort order of the table.
+     * Used with the `sort` property.
+     *
+     * - "asc": ascending order
+     * - "desc": descending order
+     *
+     * For example, if `sort = "price"` and `order = "desc"`, the table will be sorted by the "price" column in descending order.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * Custom sort function for table columns.
+     * The function should return a comparison result for ascending order: `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.
+     * The rows currently displayed in the table.
+     * This is a sorted version of `rows`. Pagination may be added in the future.
      */
     private _currentView;
     private _currentTouchHoverRowId;
@@ -130,6 +161,8 @@ export declare class DaikinTable<T extends {
     private _handleTouchStart;
     private _handleTouchEnd;
     private _updateHeaderCheckboxState;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

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

@@ -55,8 +55,8 @@ let DaikinTable = class extends DDSElement {
     this.selectable = false;
     this.sortable = false;
     this.selection = [];
-    this.order = null;
     this.sort = null;
+    this.order = null;
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
@@ -132,28 +132,47 @@ let DaikinTable = class extends DDSElement {
     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;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
   render() {
     const createHeaderRow = () => repeat(
       this.headers,
       ({ key }) => key,
-      ({ key, label, alignment, sortable }) => html`<th
+      ({ key, label, alignment, sortable }) => {
+        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        return html`<th
             class="h-full p-0"
-            aria-sort=${ifDefined(
-        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
-      )}
+            aria-sort=${ifDefined(currentSort)}
           >
             <slot
               name=${`header:${key}`}
+              data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
+              @slotchange=${this._handleSlotChange}
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
                 ?sortable=${this.sortable && sortable}
+                order=${ifDefined(currentSort && this.order)}
               >
                 ${label}
               </daikin-table-header-cell>
             </slot>
-          </th>`
+          </th>`;
+      }
     );
     const createRow = (item) => repeat(
       this.headers,
@@ -226,7 +245,7 @@ let DaikinTable = class extends DDSElement {
     </div>`;
   }
   willUpdate(changedProperties) {
-    const viewChanged = changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+    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();
@@ -236,20 +255,22 @@ let DaikinTable = class extends DDSElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("headers")) {
-      {
+    {
+      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 (changedProperties.has("rows")) {
         if (this.rows.length !== [...new Set(this.rows.map(({ id }) => id))].length) {
           console.warn("The `id` values in `rows` are duplicated");
         }
       }
     }
+    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
+    if (sortChanged) {
+      this._reflectSlotProperties();
+    }
   }
 };
 DaikinTable.styles = css`
@@ -258,7 +279,7 @@ DaikinTable.styles = css`
     :host {
       display: block;
       width: 100%;
-      overflow: scroll;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -278,10 +299,10 @@ __decorateClass([
 ], DaikinTable.prototype, "selection", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTable.prototype, "order", 2);
+], DaikinTable.prototype, "sort", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTable.prototype, "sort", 2);
+], DaikinTable.prototype, "order", 2);
 __decorateClass([
   property({ attribute: false })
 ], DaikinTable.prototype, "sortFunction", 2);

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -3,6 +3,7 @@ import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaHeaderCell: (props?: ({
     alignment?: "center" | "right" | "left" | null | undefined;
     sortable?: boolean | null | undefined;
+    order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
 /**
@@ -44,6 +45,12 @@ export declare class DaikinTableHeaderCell extends DDSElement {
      * It also makes the component emit the `change-sort` event when clicked.
      */
     sortable: boolean;
+    /**
+     * The current sort order of the column.
+     * Can be "asc", "desc", or null if not sorted.
+     * Controlled by `daikin-table`.
+     */
+    order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -44,11 +44,31 @@ const cvaHeaderCell = cva(
           "focus-visible:-outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
-          "after:size-6",
-          "after:i-daikin-sort"
+          "after:size-6"
         ]
+      },
+      order: {
+        asc: [],
+        desc: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        sortable: true,
+        order: null,
+        class: ["after:i-daikin-sort"]
+      },
+      {
+        sortable: true,
+        order: "asc",
+        class: ["after:i-daikin-chevron-up"]
+      },
+      {
+        sortable: true,
+        order: "desc",
+        class: ["after:i-daikin-chevron-up", "after:rotate-180"]
+      }
+    ]
   }
 );
 let DaikinTableHeaderCell = class extends DDSElement {
@@ -56,14 +76,16 @@ let DaikinTableHeaderCell = class extends DDSElement {
     super(...arguments);
     this.alignment = "left";
     this.sortable = false;
+    this.order = null;
   }
   render() {
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
-      sortable: this.sortable
+      sortable: this.sortable,
+      order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = html`<slot name="left-icon" class="icon-size-6"></slot>
-      <slot></slot>`;
+    const content = html`<slot name="left-icon" class="icon-size-6"></slot
+      ><slot></slot>`;
     return this.sortable ? html`<button
           type="button"
           class=${headerCellCN}
@@ -88,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTableHeaderCell.prototype, "sortable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTableHeaderCell.prototype, "order", 2);
 DaikinTableHeaderCell = __decorateClass([
   ddsElement("daikin-table-header-cell")
 ], DaikinTableHeaderCell);

package/dist/es-dev/components/text-field/daikin-text-field.d.ts

@@ -15,10 +15,18 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @fires toggle - Emitted when the user toggles the password mask.
  *
  * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
- * Ignored if the type is "search" since the default icon is used.
+ * Available only if the type is one of:
+ * - `"text"`
+ * - `"number"`
+ * - `"password"`
+ * - `"email"`
+ * - `"tel"`
  *
  * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
- * Ignored if the type is "search" since the default icon is used.
+ * Available only if the type is one of:
+ * - `"text"`
+ * - `"email"`
+ * - `"tel"`
  *
  * @example
  *
@@ -35,8 +43,15 @@ export declare class DaikinTextField extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Type of field.
+     *
+     * - `"text"`: Basic text input with optional left and right icon slots.
+     * - `"number"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.
+     * - `"password"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.
+     * - `"email"`: Email input with optional left and right icon slots.
+     * - `"tel"`: Telephone input with optional left and right icon slots.
+     * - `"search"`: Search input with built-in search icon and clear button when value is present.
      */
-    type: "text" | "password" | "email" | "tel" | "search";
+    type: "text" | "number" | "password" | "email" | "tel" | "search";
     /**
      * Placeholder text.
      */
@@ -69,6 +84,18 @@ export declare class DaikinTextField extends DDSFormElement {
      * Maximum length of value.
      */
     maxlength: number | null;
+    /**
+     * Interval between values. This is valid when `type="number"`.
+     */
+    step: string | null;
+    /**
+     * The minimum value. This is valid when `type="number"`.
+     */
+    min: string | null;
+    /**
+     * The maximum value. This is valid when `type="number"`.
+     */
+    max: string | null;
     /**
      * The pattern of value.
      */
@@ -92,6 +119,8 @@ export declare class DaikinTextField extends DDSFormElement {
     private _handleSlotChange;
     private _handleInput;
     private _handleClearClick;
+    private _handleKeyDown;
+    private _updateNumberValue;
     private _createIcon;
     private _handleShowPasswordClick;
     render(): TemplateResult<1>;