@wener/console
Version:
Base console UI toolkit
518 lines (517 loc) • 20.5 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
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 _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
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 ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
}
else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
import React from "react";
import { useImmer } from "use-immer";
import { daisy } from "../utils/daisy.js";
export var DaisyThemeDemo = function () {
var _useImmer = _sliced_to_array(useImmer({
size: undefined,
intent: undefined
}), 2), state = _useImmer[0], update = _useImmer[1];
var size = state.size, intent = state.intent;
var btnx = daisy("btn", {
size: size,
intent: intent
});
return /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col justify-center gap-2 py-4"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "dropdown"
}, /*#__PURE__*/ React.createElement("label", {
tabIndex: 0,
className: "btn btn-outline btn-sm m-1"
}, state.size || "Size"), /*#__PURE__*/ React.createElement("ul", {
tabIndex: 0,
className: "menu dropdown-content rounded-box bg-base-100 w-52 p-2 shadow"
}, /*#__PURE__*/ React.createElement("li", {
onClick: function () {
update(_object_spread_props(_object_spread({}, state), {
size: undefined
}));
}
}, /*#__PURE__*/ React.createElement("a", null, "Default")), sizes.map(function (v) {
return /*#__PURE__*/ React.createElement("li", {
key: v,
onClick: function () {
update(_object_spread_props(_object_spread({}, state), {
size: v
}));
}
}, /*#__PURE__*/ React.createElement("a", null, v));
}))), /*#__PURE__*/ React.createElement("div", {
className: "dropdown"
}, /*#__PURE__*/ React.createElement("label", {
tabIndex: 0,
className: "btn btn-outline btn-sm m-1 ".concat(daisy("btn", {
intent: intent
}))
}, state.intent || "Intent"), /*#__PURE__*/ React.createElement("ul", {
tabIndex: 0,
className: "menu dropdown-content rounded-box bg-base-100 w-52 p-2 shadow"
}, /*#__PURE__*/ React.createElement("li", {
onClick: function () {
update(_object_spread_props(_object_spread({}, state), {
intent: undefined
}));
}
}, /*#__PURE__*/ React.createElement("a", null, "Default")), intents.map(function (v) {
return /*#__PURE__*/ React.createElement("li", {
key: v,
onClick: function () {
update(_object_spread_props(_object_spread({}, state), {
intent: v
}));
}
}, /*#__PURE__*/ React.createElement("a", null, v));
})))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap [&>div]:px-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "button"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, intents.map(function (v) {
return /*#__PURE__*/ React.createElement("button", {
key: v,
className: "btn btn-".concat(v, " ").concat(daisy("btn", {
size: size
}))
}, v);
})), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, sizes.map(function (v) {
return /*#__PURE__*/ React.createElement("button", {
key: v,
className: "btn btn-".concat(v, " ").concat(daisy("btn", {
intent: intent
}))
}, v);
})), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-outline ".concat(btnx)
}, "outline"), /*#__PURE__*/ React.createElement("button", {
className: "btn glass ".concat(btnx)
}, "glass"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost ".concat(btnx)
}, "ghost"), /*#__PURE__*/ React.createElement("button", {
className: "btn loading ".concat(btnx)
}, "loading"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-link ".concat(btnx)
}, "link"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-active ".concat(btnx)
}, "active"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-disabled ".concat(btnx)
}, "disabled"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-circle ".concat(btnx)
}, "C"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-square ".concat(btnx)
}, "S"))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "badge"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "badge"
}, "neutral"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-primary"
}, "primary"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-secondary"
}, "secondary"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-accent"
}, "accent"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-ghost"
}, "ghost"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-info"
}, "info"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-success"
}, "success"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-warning"
}, "warning"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-error"
}, "error")), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "badge badge-lg"
}, "lg"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-md"
}, "md"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-sm"
}, "sm"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-xs"
}, "xs")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "badge badge-outline"
}, "outline"))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2 [&>div]:flex [&>div]:gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "checkbox"), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-primary checkbox"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-secondary checkbox"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-accent checkbox"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-xs"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-sm"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-md"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-lg"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox",
disabled: true
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox",
disabled: true,
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2 [&>div]:flex [&>div]:gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "radio"), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-primary radio"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-secondary radio"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-accent radio"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-xs"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-sm"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-md"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-lg"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
className: "radio",
disabled: true
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
className: "radio",
disabled: true,
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "link"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col items-start"
}, /*#__PURE__*/ React.createElement("a", {
className: "link"
}, "link"), /*#__PURE__*/ React.createElement("a", {
className: "link link-primary"
}, "link-primary"), /*#__PURE__*/ React.createElement("a", {
className: "link link-secondary"
}, "link-secondary"), /*#__PURE__*/ React.createElement("a", {
className: "link link-accent"
}, "link-accent"), /*#__PURE__*/ React.createElement("a", {
className: "link link-neutral"
}, "link-neutral"), /*#__PURE__*/ React.createElement("a", {
className: "link-hover link"
}, "link-hover"))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "tabs"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col items-center gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 1"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-border"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tab-bordered"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-lift"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tab-lifted"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs-box tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tabs-boxed"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-lift tabs-xs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tab-xs"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tiny"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tiny")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-lift tabs-sm"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tab-sm"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Small"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Small")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-lift tabs-md"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Normal"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Normal"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Normal")), /*#__PURE__*/ React.createElement("div", {
className: "tabs tabs-lift tabs-lg"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tab-lg"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Large"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Large")))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "progress"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2"
}, /*#__PURE__*/ React.createElement("progress", {
className: "progress w-56",
value: "0",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-primary w-56",
value: "10",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-secondary w-56",
value: "25",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-accent w-56",
value: "40",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-info w-56",
value: "55",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-success w-56",
value: "70",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-warning w-56",
value: "85",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-error w-56",
value: "100",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress w-56"
}))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "radial-progress"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 0
}
}, "0%"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 10
}
}, "10%"), /*#__PURE__*/ React.createElement("div", {
className: "text-primary radial-progress",
style: {
"--value": 30
}
}, "primary"), /*#__PURE__*/ React.createElement("div", {
className: "border-primary bg-primary radial-progress text-primary-content border-4",
style: {
"--value": 35
}
}, "35%"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress text-info",
style: {
"--value": 40,
"--size": "10rem",
"--thickness": "2px"
}
}, "10rem/2px"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 40,
"--size": "10rem",
"--thickness": "2rem"
}
}, "10rem/2rem")))));
};
var intents = [
"primary",
"secondary",
"accent",
"info",
"success",
"warning",
"error"
];
var sizes = [
"xs",
"sm",
"md",
"lg"
];