@iris-ui-kit/vue 0.2.1 → 0.2.3

package/dist/index.d.cts

@@ -4248,7 +4248,8 @@ type IrisTableColumnWidths = Record<string, number>;
  * are wired explicitly for screen readers.
  *
  * **Features**:
- *   - Column-driven rendering with optional `#cell.<key>` slots
+ *   - Column-driven rendering with optional `#header.<key>` and `#cell.<key>` slots
+ *   - Row activation via `rowClick` and `rowDblclick` events
  *   - Sorting (controlled or uncontrolled, cycles `none → asc → desc → none`)
  *   - Row selection (single / multi) with master checkbox + indeterminate
  *   - **Column resize** (`resizable-columns`) — draggable handle on each
@@ -4397,6 +4398,7 @@ declare const IrisTable: vue.DefineComponent<vue.ExtractPropTypes<{
     'update:sort': (_value: IrisTableSortState | null) => true;
     'update:columnWidths': (_value: IrisTableColumnWidths) => true;
     rowClick: (_row: Record<string, unknown>, _index: number) => true;
+    rowDblclick: (_row: Record<string, unknown>, _index: number) => true;
     cellEdit: (_payload: IrisTableCellEditEvent<Record<string, unknown>>) => true;
     expandedRowsChange: (_keys: Array<string | number>) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -4530,6 +4532,7 @@ declare const IrisTable: vue.DefineComponent<vue.ExtractPropTypes<{
     onCellEdit?: ((_payload: IrisTableCellEditEvent<Record<string, unknown>>) => any) | undefined;
     "onUpdate:columnWidths"?: ((_value: IrisTableColumnWidths) => any) | undefined;
     onRowClick?: ((_row: Record<string, unknown>, _index: number) => any) | undefined;
+    onRowDblclick?: ((_row: Record<string, unknown>, _index: number) => any) | undefined;
 }>, {
     sort: IrisTableSortState | null;
     error: boolean;

package/dist/index.d.ts

@@ -4248,7 +4248,8 @@ type IrisTableColumnWidths = Record<string, number>;
  * are wired explicitly for screen readers.
  *
  * **Features**:
- *   - Column-driven rendering with optional `#cell.<key>` slots
+ *   - Column-driven rendering with optional `#header.<key>` and `#cell.<key>` slots
+ *   - Row activation via `rowClick` and `rowDblclick` events
  *   - Sorting (controlled or uncontrolled, cycles `none → asc → desc → none`)
  *   - Row selection (single / multi) with master checkbox + indeterminate
  *   - **Column resize** (`resizable-columns`) — draggable handle on each
@@ -4397,6 +4398,7 @@ declare const IrisTable: vue.DefineComponent<vue.ExtractPropTypes<{
     'update:sort': (_value: IrisTableSortState | null) => true;
     'update:columnWidths': (_value: IrisTableColumnWidths) => true;
     rowClick: (_row: Record<string, unknown>, _index: number) => true;
+    rowDblclick: (_row: Record<string, unknown>, _index: number) => true;
     cellEdit: (_payload: IrisTableCellEditEvent<Record<string, unknown>>) => true;
     expandedRowsChange: (_keys: Array<string | number>) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -4530,6 +4532,7 @@ declare const IrisTable: vue.DefineComponent<vue.ExtractPropTypes<{
     onCellEdit?: ((_payload: IrisTableCellEditEvent<Record<string, unknown>>) => any) | undefined;
     "onUpdate:columnWidths"?: ((_value: IrisTableColumnWidths) => any) | undefined;
     onRowClick?: ((_row: Record<string, unknown>, _index: number) => any) | undefined;
+    onRowDblclick?: ((_row: Record<string, unknown>, _index: number) => any) | undefined;
 }>, {
     sort: IrisTableSortState | null;
     error: boolean;

package/dist/index.js

@@ -5423,6 +5423,7 @@ var IrisTable = defineComponent({
     "update:sort": (_value) => true,
     "update:columnWidths": (_value) => true,
     rowClick: (_row, _index) => true,
+    rowDblclick: (_row, _index) => true,
     cellEdit: (_payload) => true,
     expandedRowsChange: (_keys) => true
   },
@@ -5829,6 +5830,8 @@ var IrisTable = defineComponent({
             const isLeaf = !col.children || col.children.length === 0;
             const sortable = isLeaf && col.sortable;
             const align = col.align ?? "left";
+            const headerSlot = slots[`header.${col.key}`];
+            const title = headerSlot?.({ column: col }) ?? col.title;
             cells.push(
               h(
                 "div",
@@ -5859,7 +5862,7 @@ var IrisTable = defineComponent({
                     textOverflow: "ellipsis"
                   }
                 },
-                [col.title, sortable ? sortIndicator(col) : null]
+                [title, sortable ? sortIndicator(col) : null]
               )
             );
           }
@@ -5929,6 +5932,8 @@ var IrisTable = defineComponent({
         const col = props.columns[ci];
         if (visibleColSet.value && !visibleColSet.value.has(ci)) continue;
         const align = col.align ?? "left";
+        const headerSlot = slots[`header.${col.key}`];
+        const title = headerSlot?.({ column: col }) ?? col.title;
         wireResize(col);
         const handle = props.resizableColumns ? h("span", {
           ref: (el) => {
@@ -5996,7 +6001,7 @@ var IrisTable = defineComponent({
               },
               "aria-sort": internalSort.value?.key === col.key ? internalSort.value.direction === "asc" ? "ascending" : "descending" : col.sortable ? "none" : void 0
             },
-            [col.title, sortIndicator(col), handle]
+            [title, sortIndicator(col), handle]
           )
         );
       }
@@ -6272,6 +6277,7 @@ var IrisTable = defineComponent({
             "data-iris-table-row": "",
             "data-state": selected ? "selected" : void 0,
             onClick: () => emit("rowClick", row, index),
+            onDblclick: () => emit("rowDblclick", row, index),
             style: {
               display: "grid",
               gridTemplateColumns: gridTemplate.value,
@@ -6590,10 +6596,82 @@ var IrisTabs = defineComponent({
     return () => slots.default?.();
   }
 });
+
+// src/primitives/tabs/styles.ts
+var STYLE_ID = "iris-tabs-styles";
+var CSS4 = `
+:where(.iris-tabs-list) {
+  display: flex;
+  gap: 2px;
+}
+:where(.iris-tabs-list[data-orientation="horizontal"]) {
+  flex-direction: row;
+  border-bottom: 1px solid var(--iris-border);
+}
+:where(.iris-tabs-list[data-orientation="vertical"]) {
+  flex-direction: column;
+  border-inline-end: 1px solid var(--iris-border);
+}
+:where(.iris-tabs-trigger) {
+  padding: 8px var(--iris-padding-md);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  opacity: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--iris-muted);
+  transition: color 120ms ease, border-color 120ms ease;
+}
+:where(.iris-tabs-trigger[data-orientation="horizontal"]) {
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+}
+:where(.iris-tabs-trigger[data-orientation="vertical"]) {
+  margin-inline-end: -1px;
+  border-inline-end: 2px solid transparent;
+}
+:where(.iris-tabs-trigger[data-state="active"]) {
+  color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-state="active"][data-orientation="horizontal"]) {
+  border-bottom-color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-state="active"][data-orientation="vertical"]) {
+  border-inline-end-color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-disabled]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:where(.iris-tabs-trigger:focus-visible) {
+  outline: 2px solid var(--iris-focus-ring, var(--iris-primary));
+  outline-offset: 2px;
+}
+`.trim();
+var installed4 = false;
+function installTabsStyles() {
+  if (installed4) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    installed4 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS4;
+  document.head.appendChild(style);
+  installed4 = true;
+}
+
+// src/primitives/tabs/TabsList.ts
 var IrisTabsList = defineComponent({
   name: "IrisTabsList",
   inheritAttrs: false,
   setup(_, { slots, attrs }) {
+    installTabsStyles();
     const ctx = inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsList must be inside an IrisTabs");
@@ -6609,14 +6687,8 @@ var IrisTabsList = defineComponent({
         "aria-orientation": ctx.orientation.value,
         "data-iris-tabs-list": "",
         "data-orientation": ctx.orientation.value,
-        style: {
-          display: "flex",
-          flexDirection: ctx.orientation.value === "horizontal" ? "row" : "column",
-          gap: "2px",
-          borderBottom: ctx.orientation.value === "horizontal" ? "1px solid var(--iris-border)" : "none",
-          borderInlineEnd: ctx.orientation.value === "vertical" ? "1px solid var(--iris-border)" : "none",
-          ...attrs.style ?? {}
-        }
+        class: ["iris-tabs-list", attrs.class],
+        style: attrs.style
       },
       slots.default?.()
     );
@@ -6631,6 +6703,7 @@ var IrisTabsTrigger = defineComponent({
     asChild: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installTabsStyles();
     const ctx = inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsTrigger must be inside an IrisTabs");
@@ -6679,7 +6752,9 @@ var IrisTabsTrigger = defineComponent({
         "data-disabled": isDisabled.value ? "" : void 0,
         disabled: isDisabled.value ? true : void 0,
         onClick,
-        onKeydown: onKeyDown
+        onKeydown: onKeyDown,
+        class: ["iris-tabs-trigger", attrs.class],
+        style: attrs.style
       };
       if (props.asChild) {
         const root = findFirstElement(slots.default?.());
@@ -6690,37 +6765,17 @@ var IrisTabsTrigger = defineComponent({
           return null;
         }
         const merged = mergeSlotProps(
-          { ...triggerProps, ...attrs },
+          { ...attrs, ...triggerProps },
           root.props ?? {}
         );
         return h(root.type, merged, root.children);
       }
-      const colors = isActive.value ? { background: "transparent", color: "var(--iris-primary)" } : { background: "transparent", color: "var(--iris-muted)" };
-      const borderActive = ctx.orientation.value === "horizontal" ? { borderBottom: `2px solid ${isActive.value ? "var(--iris-primary)" : "transparent"}` } : {
-        borderInlineEnd: `2px solid ${isActive.value ? "var(--iris-primary)" : "transparent"}`
-      };
       return h(
         "button",
         {
           type: "button",
           ...attrs,
-          ...triggerProps,
-          style: {
-            padding: "8px var(--iris-padding-md)",
-            fontSize: "14px",
-            fontWeight: "500",
-            fontFamily: "inherit",
-            cursor: isDisabled.value ? "not-allowed" : "pointer",
-            opacity: isDisabled.value ? "0.5" : "1",
-            border: "none",
-            outline: "none",
-            marginBottom: ctx.orientation.value === "horizontal" ? "-1px" : void 0,
-            marginInlineEnd: ctx.orientation.value === "vertical" ? "-1px" : void 0,
-            transition: "color 120ms ease, border-color 120ms ease",
-            ...colors,
-            ...borderActive,
-            ...attrs.style ?? {}
-          }
+          ...triggerProps
         },
         slots.default?.()
       );