merge newui branch

2026-09-15 11:00:55 +02:00 · 2026-04-18 16:50:39 +03:00
parent 58f605e90c
commit 4c44044c0c
804 changed files with 58660 additions and 56663 deletions
@@ -0,0 +1,96 @@
+window.app = window.app || {};
+window.app.components = window.app.components || {};
+
+/**
+ * Code highlighted tabs component.
+ *
+ * @example
+ * ```js
+ * app.components.codeBlockTabs({
+ *     tabs: [
+ *         {
+ *             title: "Tab 1",
+ *             language: "js",
+ *             value: "console.log(123)","
+ *             // other codeBlock props...
+ *         },
+ *         ...
+ *     ],
+ *     historyKey: "myTabs"
+ * })
+ * ```
+ *
+ * @param  {Object} [propsArg]
+ * @return {Element}
+ */
+window.app.components.codeBlockTabs = function(propsArg = {}) {
+    const props = store({
+        rid: undefined,
+        id: undefined,
+        hidden: undefined,
+        inert: undefined,
+        className: "",
+        activeTabIndex: 0,
+        historyKey: "",
+        tabs: [], // {title, ...codeBlockProps}
+        get activeTab() {
+            return props.tabs[props.activeTabIndex] || props.tabs[0];
+        },
+    });
+
+    const watchers = app.utils.extendStore(props, propsArg);
+
+    watchers.push(
+        watch(() => props.activeTabIndex, (newIndex, oldIndex) => {
+            if (oldIndex != undefined && props.historyKey) {
+                localStorage.setItem(props.historyKey, newIndex);
+            }
+        }),
+    );
+
+    return t.div(
+        {
+            rid: props.rid,
+            id: () => props.id,
+            hidden: () => props.hidden || !props.tabs.length,
+            inert: () => props.inert,
+            className: () => `code-block-tabs ${props.className}`,
+            onmount: () => {
+                if (props.historyKey) {
+                    props.activeTabIndex = localStorage.getItem(props.historyKey) << 0;
+                }
+            },
+            onunmount: () => {
+                watchers.forEach((w) => w?.unwatch());
+            },
+        },
+        t.header(
+            { className: "tabs-header" },
+            () => {
+                return props.tabs.map((tab, i) => {
+                    return t.button(
+                        {
+                            type: "button",
+                            className: () => `tab-item ${props.activeTabIndex == i ? "active" : ""}`,
+                            onclick: () => props.activeTabIndex = i,
+                        },
+                        (el) => {
+                            if (typeof tab.title == "function") {
+                                return tab.title(el);
+                            }
+                            return tab.title;
+                        },
+                    );
+                });
+            },
+        ),
+        t.div(
+            { className: "code-block-tabs-content" },
+            () => {
+                if (props.activeTab) {
+                    return app.components.codeBlock(props.activeTab);
+                }
+            },
+        ),
+    );
+};