@iris-ui-kit/vue 0.2.1 → 0.2.3

package/dist/index.cjs

@@ -9289,6 +9289,7 @@ var IrisTable = vue.defineComponent({
     "update:sort": (_value) => true,
     "update:columnWidths": (_value) => true,
     rowClick: (_row, _index) => true,
+    rowDblclick: (_row, _index) => true,
     cellEdit: (_payload) => true,
     expandedRowsChange: (_keys) => true
   },
@@ -9695,6 +9696,8 @@ var IrisTable = vue.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(
               vue.h(
                 "div",
@@ -9725,7 +9728,7 @@ var IrisTable = vue.defineComponent({
                     textOverflow: "ellipsis"
                   }
                 },
-                [col.title, sortable ? sortIndicator(col) : null]
+                [title, sortable ? sortIndicator(col) : null]
               )
             );
           }
@@ -9795,6 +9798,8 @@ var IrisTable = vue.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 ? vue.h("span", {
           ref: (el) => {
@@ -9862,7 +9867,7 @@ var IrisTable = vue.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]
           )
         );
       }
@@ -10138,6 +10143,7 @@ var IrisTable = vue.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,
@@ -10456,10 +10462,82 @@ var IrisTabs = vue.defineComponent({
     return () => slots.default?.();
   }
 });
+
+// src/primitives/tabs/styles.ts
+var STYLE_ID2 = "iris-tabs-styles";
+var CSS6 = `
+: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 installed6 = false;
+function installTabsStyles() {
+  if (installed6) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID2)) {
+    installed6 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = CSS6;
+  document.head.appendChild(style);
+  installed6 = true;
+}
+
+// src/primitives/tabs/TabsList.ts
 var IrisTabsList = vue.defineComponent({
   name: "IrisTabsList",
   inheritAttrs: false,
   setup(_, { slots, attrs }) {
+    installTabsStyles();
     const ctx = vue.inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsList must be inside an IrisTabs");
@@ -10475,14 +10553,8 @@ var IrisTabsList = vue.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?.()
     );
@@ -10497,6 +10569,7 @@ var IrisTabsTrigger = vue.defineComponent({
     asChild: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installTabsStyles();
     const ctx = vue.inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsTrigger must be inside an IrisTabs");
@@ -10545,7 +10618,9 @@ var IrisTabsTrigger = vue.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?.());
@@ -10556,37 +10631,17 @@ var IrisTabsTrigger = vue.defineComponent({
           return null;
         }
         const merged = mergeSlotProps(
-          { ...triggerProps, ...attrs },
+          { ...attrs, ...triggerProps },
           root.props ?? {}
         );
         return vue.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 vue.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?.()
       );