@elmethis/qwik 0.0.37 → 0.0.38

package/lib/index.qwik.cjs

@@ -651,7 +651,7 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_19g82_1";
+const icon$3 = "_icon_1tbvt_1";
 const styles$x = {
   icon: icon$3
 };
@@ -871,17 +871,17 @@ const ElmParallax = qwik.component$(({ images }) => {
     ]
   });
 });
-const tab = "_tab_1vih2_18";
-const active$2 = "_active_1vih2_40";
+const tab = "_tab_hloyu_18";
+const active$2 = "_active_hloyu_40";
 const styles$u = {
-  "elm-tabs": "_elm-tabs_1vih2_1",
-  "tab-container": "_tab-container_1vih2_18",
+  "elm-tabs": "_elm-tabs_hloyu_1",
+  "tab-container": "_tab-container_hloyu_18",
   tab,
   active: active$2,
-  "tab-content-container": "_tab-content-container_1vih2_51",
-  "tab-content": "_tab-content_1vih2_51"
+  "tab-content-container": "_tab-content-container_hloyu_51",
+  "tab-content": "_tab-content_hloyu_51"
 };
-const ElmTabs = qwik.component$(({ renderTabFunctions$, renderTabContentFunctions$ }) => {
+const ElmTabs = qwik.component$(({ tabLabels, tabContents }) => {
   const selectedTabIndex = qwik.useSignal(0);
   const selectTab = qwik.$((index) => {
     selectedTabIndex.value = index;
@@ -891,7 +891,7 @@ const ElmTabs = qwik.component$(({ renderTabFunctions$, renderTabContentFunction
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: styles$u["tab-container"],
-        children: renderTabFunctions$.map((renderTabFunction$, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+        children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: [
             styles$u["tab"],
             {
@@ -899,15 +899,20 @@ const ElmTabs = qwik.component$(({ renderTabFunctions$, renderTabContentFunction
             }
           ],
           onClick$: () => selectTab(index),
-          children: renderTabFunction$()
+          children: tabLabel
         }, index))
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: styles$u["tab-content-container"],
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: styles$u["tab-content"],
-          children: renderTabContentFunctions$[selectedTabIndex.value]()
-        }, selectedTabIndex.value)
+        children: tabContents.map((content2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: [
+            styles$u["tab-content"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          children: content2
+        }, index))
       })
     ]
   });
@@ -3063,6 +3068,24 @@ const ElmJarkup = qwik.component$((props) => {
             expression: component.props.expression,
             block: true
           }, key);
+        case "Tabs": {
+          const labels = [];
+          const contents = [];
+          for (const tab2 of component.slots.default) {
+            labels.push(tab2.slots.labels);
+            contents.push(tab2.slots.contents);
+          }
+          const renderedLabels = labels.map((label2, index2) => /* @__PURE__ */ jsxRuntime.jsx("span", {
+            children: render(label2)
+          }, index2));
+          const renderedContents = contents.map((content2, index2) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+            children: render(content2)
+          }, index2));
+          return /* @__PURE__ */ jsxRuntime.jsx(ElmTabs, {
+            tabLabels: renderedLabels,
+            tabContents: renderedContents
+          });
+        }
         case "Table":
           return /* @__PURE__ */ jsxRuntime.jsxs(ElmTable, {
             caption: component.props?.caption,

package/lib/index.qwik.mjs

@@ -649,7 +649,7 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_19g82_1";
+const icon$3 = "_icon_1tbvt_1";
 const styles$x = {
   icon: icon$3
 };
@@ -869,17 +869,17 @@ const ElmParallax = component$(({ images }) => {
     ]
   });
 });
-const tab = "_tab_1vih2_18";
-const active$2 = "_active_1vih2_40";
+const tab = "_tab_hloyu_18";
+const active$2 = "_active_hloyu_40";
 const styles$u = {
-  "elm-tabs": "_elm-tabs_1vih2_1",
-  "tab-container": "_tab-container_1vih2_18",
+  "elm-tabs": "_elm-tabs_hloyu_1",
+  "tab-container": "_tab-container_hloyu_18",
   tab,
   active: active$2,
-  "tab-content-container": "_tab-content-container_1vih2_51",
-  "tab-content": "_tab-content_1vih2_51"
+  "tab-content-container": "_tab-content-container_hloyu_51",
+  "tab-content": "_tab-content_hloyu_51"
 };
-const ElmTabs = component$(({ renderTabFunctions$, renderTabContentFunctions$ }) => {
+const ElmTabs = component$(({ tabLabels, tabContents }) => {
   const selectedTabIndex = useSignal(0);
   const selectTab = $((index) => {
     selectedTabIndex.value = index;
@@ -889,7 +889,7 @@ const ElmTabs = component$(({ renderTabFunctions$, renderTabContentFunctions$ })
     children: [
       /* @__PURE__ */ jsx("div", {
         class: styles$u["tab-container"],
-        children: renderTabFunctions$.map((renderTabFunction$, index) => /* @__PURE__ */ jsx("div", {
+        children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsx("div", {
           class: [
             styles$u["tab"],
             {
@@ -897,15 +897,20 @@ const ElmTabs = component$(({ renderTabFunctions$, renderTabContentFunctions$ })
             }
           ],
           onClick$: () => selectTab(index),
-          children: renderTabFunction$()
+          children: tabLabel
         }, index))
       }),
       /* @__PURE__ */ jsx("div", {
         class: styles$u["tab-content-container"],
-        children: /* @__PURE__ */ jsx("div", {
-          class: styles$u["tab-content"],
-          children: renderTabContentFunctions$[selectedTabIndex.value]()
-        }, selectedTabIndex.value)
+        children: tabContents.map((content2, index) => /* @__PURE__ */ jsx("div", {
+          class: [
+            styles$u["tab-content"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          children: content2
+        }, index))
       })
     ]
   });
@@ -3061,6 +3066,24 @@ const ElmJarkup = component$((props) => {
             expression: component.props.expression,
             block: true
           }, key);
+        case "Tabs": {
+          const labels = [];
+          const contents = [];
+          for (const tab2 of component.slots.default) {
+            labels.push(tab2.slots.labels);
+            contents.push(tab2.slots.contents);
+          }
+          const renderedLabels = labels.map((label2, index2) => /* @__PURE__ */ jsx("span", {
+            children: render(label2)
+          }, index2));
+          const renderedContents = contents.map((content2, index2) => /* @__PURE__ */ jsx("div", {
+            children: render(content2)
+          }, index2));
+          return /* @__PURE__ */ jsx(ElmTabs, {
+            tabLabels: renderedLabels,
+            tabContents: renderedContents
+          });
+        }
         case "Table":
           return /* @__PURE__ */ jsxs(ElmTable, {
             caption: component.props?.caption,

package/lib/style.css

@@ -184,21 +184,22 @@
 [data-theme=dark] ._text_zryur_1::selection {
   color: #3e434b;
   background-color: var(--color, #cccfd5);
-}._icon_19g82_1 {
+}._icon_1tbvt_1 {
   margin: 0;
   padding: 0;
   display: inline-block;
-  vertical-align: middle;
-  height: 1em;
+  vertical-align: top;
+  width: 0.95lh;
+  height: 0.95lh;
 }
-._icon_19g82_1::selection {
+._icon_1tbvt_1::selection {
   filter: brightness(1000%);
   background-color: var(--color, rgba(0, 0, 0, 0.25));
 }
-[data-theme=dark] ._icon_19g82_1 {
+[data-theme=dark] ._icon_1tbvt_1 {
   color: var(--color, rgba(255, 255, 255, 0.7));
 }
-[data-theme=dark] ._icon_19g82_1::selection {
+[data-theme=dark] ._icon_1tbvt_1::selection {
   color: rgba(0, 0, 0, 0.7);
   background-color: var(--color, rgba(255, 255, 255, 0.25));
 }._code_1sw1e_1 {
@@ -240,7 +241,7 @@
 }
 [data-theme=dark] ._parallax_1kb0k_1 {
   opacity: 0.1;
-}._elm-tabs_1vih2_1 {
+}._elm-tabs_hloyu_1 {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -257,13 +258,13 @@
   }
 }
 
-._tab-container_1vih2_18 {
+._tab-container_hloyu_18 {
   display: flex;
   flex-direction: row;
   border-bottom: solid 1px oklch(from gray l c h / 0.3);
 }
 
-._tab_1vih2_18 {
+._tab_hloyu_18 {
   box-sizing: border-box;
   min-width: 6rem;
   padding: 1rem;
@@ -279,7 +280,7 @@
     background-color 200ms,
     border-color 200ms;
 
-  &._active_1vih2_40 {
+  &._active_hloyu_40 {
     background-color: oklch(from #7cbac5 l c h / 0.025);
     border-bottom-color: #7cbac5;
     cursor: default;
@@ -290,18 +291,23 @@
   }
 }
 
-._tab-content-container_1vih2_51 {
+._tab-content-container_hloyu_51 {
   box-sizing: border-box;
   width: 100%;
   padding: 1em;
 }
 
-._tab-content_1vih2_51 {
+._tab-content_hloyu_51 {
   width: 100%;
   margin: 0;
   transition:
     transform 200ms,
     opacity 200ms;
+  display: none;
+
+  &._active_hloyu_40 {
+    display: block;
+  }
 
   @starting-style {
     transform: translateY(-8px);

package/lib-types/components/containments/elm-tabs.d.ts

@@ -1,6 +1,6 @@
-import { JSXOutput, QRL } from "@builder.io/qwik";
+import type { JSXOutput } from "@builder.io/qwik";
 export interface ElmTabsProps {
-    renderTabFunctions$: QRL<() => JSXOutput>[];
-    renderTabContentFunctions$: QRL<() => JSXOutput>[];
+    tabLabels: JSXOutput[];
+    tabContents: JSXOutput[];
 }
 export declare const ElmTabs: import("@builder.io/qwik").Component<ElmTabsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,7 @@
     "eslint": "10.1.0",
     "eslint-plugin-qwik": "1.19.2",
     "globals": "17.4.0",
-    "jarkup-ts": "^0.9.0",
+    "jarkup-ts": "^0.11.0",
     "np": "^11.0.2",
     "prettier": "3.8.1",
     "sass": "^1.98.0",