@wener/console
Version:
Base console UI toolkit
232 lines (231 loc) • 8.79 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null)
return {};
var target = {}, sourceKeys, key, i;
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
sourceKeys = Reflect.ownKeys(source);
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
return target;
}
target = _object_without_properties_loose(source, excluded);
if (Object.getOwnPropertySymbols) {
sourceKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null)
return {};
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
return target;
}
import React, { Fragment } from "react";
import { Tabs } from "@base-ui/react/tabs";
import { cn } from "@wener/console";
import { Daisy } from "@wener/console/daisy";
import { flexRender } from "@wener/reaction";
import { isNodeTypeOf } from "../utils/isNodeTypeOf.js";
export var DaisyTabsComposite = function (_0) {
var children = _0.children, _0_renderContent = _0.renderContent, renderContent = _0_renderContent === void 0 ? function (props) {
return props.children;
} : _0_renderContent, _0_renderList = _0.renderList, renderList = _0_renderList === void 0 ? function (props) {
return props.children;
} : _0_renderList, _0_tabs = _0.tabs, tabs = _0_tabs === void 0 ? [] : _0_tabs, list = _0.list, size = _0.size, variant = _0.variant, title = _0.title, action = _0.action, ref = _0.ref, props = _object_without_properties(_0, [
"children",
"renderContent",
"renderList",
"tabs",
"list",
"size",
"variant",
"title",
"action",
"ref"
]);
if (!list) {
list = /*#__PURE__*/ React.createElement(DaisyTabsList, {
size: size,
variant: variant,
title: title,
action: action
}, tabs.map(function (item, index) {
var label = item.label, href = item.href, icon = item.icon;
var _item_key;
var key = (_item_key = item.key) !== null && _item_key !== void 0 ? _item_key : String(index);
var Tag = item.href ? "a" : "button";
var trigger;
if (isNodeTypeOf(item.trigger, [
DaisyTabsTrigger,
Tabs.Tab
])) {
trigger = item.trigger;
}
else if (item.trigger) {
trigger = /*#__PURE__*/ React.createElement(DaisyTabsTrigger, {
key: key,
value: key
}, item.trigger);
}
else if (item.href) {
trigger = /*#__PURE__*/ React.createElement(DaisyTabsTrigger, {
key: key,
value: key
}, /*#__PURE__*/ React.createElement(Tag, {
href: href
}, flexRender(icon, {}), label));
}
else {
trigger = /*#__PURE__*/ React.createElement(DaisyTabsTrigger, {
key: key,
value: key
}, flexRender(icon, {}), label);
}
return trigger;
}));
}
var hasContent = tabs.some(function (v) {
return v.content;
});
var content = null;
if (hasContent) {
content = /*#__PURE__*/ React.createElement(Fragment, null, tabs.map(function (item, index) {
var _item_key;
var key = (_item_key = item.key) !== null && _item_key !== void 0 ? _item_key : String(index);
var c = isNodeTypeOf(item.content, [
DaisyTabsPanel,
Tabs.Panel
]) ? item.content : /*#__PURE__*/ React.createElement(DaisyTabsPanel, {
key: index,
value: key || String(index)
}, item.content);
return c;
}));
}
return /*#__PURE__*/ React.createElement(DaisyTabsRoot, props, renderList({
children: list
}), children, renderContent({
children: content
}));
};
export var DaisyTabsRoot = function (_0) {
var className = _0.className, props = _object_without_properties(_0, [
"className"
]);
return /*#__PURE__*/ React.createElement(Tabs.Root, _object_spread({
className: cn("flex flex-col", className)
}, props));
};
export var DaisyTabsPanel = function (_0) {
var className = _0.className, props = _object_without_properties(_0, [
"className"
]);
return /*#__PURE__*/ React.createElement(Tabs.Panel, _object_spread({
className: cn("data-[state=inactive]:hidden", className)
}, props));
};
export var DaisyTabsList = function (_0) {
var className = _0.className, variant = _0.variant, size = _0.size, action = _0.action, title = _0.title, children = _0.children, props = _object_without_properties(_0, [
"className",
"variant",
"size",
"action",
"title",
"children"
]);
var sz = Daisy.getSize(size);
return /*#__PURE__*/ React.createElement(Tabs.List, _object_spread({
className: cn("flex", "data-[variant=boxed]:self-center"),
"data-variant": variant
}, props), variant === "lifted" && /*#__PURE__*/ React.createElement("div", {
className: "border-color flex h-full items-center self-end px-2",
style: {
// border-b-[--tab-border] not works
borderBottomWidth: "var(--tab-border,1px)"
}
}, /*#__PURE__*/ React.createElement("h3", {
className: "text-lg font-medium"
}, title)), /*#__PURE__*/ React.createElement("div", {
className: cn("tabs", variant === "boxed" && "tabs-boxed", variant === "bordered" && "tabs-bordered", variant === "lifted" && "tabs-lifted self-start", sz === null || sz === void 0 ? void 0 : sz.tabs, className)
}, children), variant === "lifted" && /*#__PURE__*/ React.createElement("div", {
className: "border-color flex-1 border-b",
style: {
// border-b-[--tab-border] not works
borderBottomWidth: "var(--tab-border,1px)"
}
}), variant === "lifted" && action && /*#__PURE__*/ React.createElement("div", {
className: "border-color flex items-center self-stretch border-b pr-1",
style: {
borderBottomWidth: "var(--tab-border,1px)"
}
}, action));
};
export var DaisyTabsTrigger = function (_0) {
var className = _0.className, props = _object_without_properties(_0, [
"className"
]);
return /*#__PURE__*/ React.createElement(Tabs.Tab, _object_spread({
className: cn(//
"tab", "data-[disabled]:tab-disabled", "data-[selected]:tab-active", className)
}, props));
};
export var DaisyTabs = {
Composite: DaisyTabsComposite,
Root: DaisyTabsRoot,
List: DaisyTabsList,
Tab: DaisyTabsTrigger,
Trigger: DaisyTabsTrigger,
Panel: DaisyTabsPanel,
Content: DaisyTabsPanel
};