Updateing Docs
This commit is contained in:
542
dist/sigpro-ui.js
vendored
542
dist/sigpro-ui.js
vendored
@@ -33,7 +33,6 @@
|
||||
val: () => val,
|
||||
ui: () => ui,
|
||||
tt: () => tt,
|
||||
joinClass: () => joinClass,
|
||||
getIcon: () => getIcon,
|
||||
Tooltip: () => Tooltip,
|
||||
Toast: () => Toast,
|
||||
@@ -52,6 +51,7 @@
|
||||
Menu: () => Menu,
|
||||
Loading: () => Loading,
|
||||
List: () => List,
|
||||
Label: () => Label,
|
||||
Input: () => Input,
|
||||
Indicator: () => Indicator,
|
||||
Fileinput: () => Fileinput,
|
||||
@@ -472,6 +472,7 @@
|
||||
Menu: () => Menu,
|
||||
Loading: () => Loading,
|
||||
List: () => List,
|
||||
Label: () => Label,
|
||||
Input: () => Input,
|
||||
Indicator: () => Indicator,
|
||||
Fileinput: () => Fileinput,
|
||||
@@ -500,50 +501,43 @@
|
||||
__export(exports_utils, {
|
||||
val: () => val,
|
||||
ui: () => ui,
|
||||
joinClass: () => joinClass,
|
||||
getIcon: () => getIcon
|
||||
});
|
||||
var val = (t) => typeof t === "function" ? t() : t;
|
||||
var joinClass = (t, l) => typeof l === "function" ? () => `${t} ${l() || ""}`.trim() : `${t} ${l || ""}`.trim();
|
||||
var ui = (base, str) => {
|
||||
if (!str)
|
||||
return base;
|
||||
const parts = typeof str === "string" ? str.split(" ") : str;
|
||||
const classes = [base];
|
||||
parts.forEach((part) => {
|
||||
if (part)
|
||||
classes.push(`${base}-${part}`);
|
||||
});
|
||||
return classes.join(" ");
|
||||
};
|
||||
var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
|
||||
var getIcon = (icon) => {
|
||||
if (!icon)
|
||||
return null;
|
||||
let position = "left";
|
||||
let iconValue = icon;
|
||||
if (typeof icon === "function") {
|
||||
return $html("span", { class: "mr-1" }, icon());
|
||||
}
|
||||
if (typeof icon === "object") {
|
||||
return $html("span", { class: "mr-1" }, icon);
|
||||
}
|
||||
if (typeof icon === "string") {
|
||||
const parts = icon.trim().split(/\s+/);
|
||||
if (parts[parts.length - 1] === "right") {
|
||||
position = "right";
|
||||
iconValue = parts.slice(0, -1).join(" ");
|
||||
const hasRight = parts[parts.length - 1] === "right";
|
||||
const iconClass = hasRight ? parts.slice(0, -1).join(" ") : icon;
|
||||
const spacing = hasRight ? "ml-1" : "mr-1";
|
||||
if (iconClass && !iconClass.startsWith("icon-[") && !iconClass.includes("--")) {
|
||||
return $html("span", { class: spacing }, iconClass);
|
||||
}
|
||||
return $html("span", { class: `${iconClass} ${spacing}`.trim() });
|
||||
}
|
||||
const spacing = position === "left" ? "mr-1" : "ml-1";
|
||||
const element = typeof iconValue === "string" && iconValue.includes("--") ? $html("span", { class: `icon-[${iconValue}]` }) : typeof iconValue === "function" ? iconValue() : $html("span", {}, iconValue);
|
||||
return $html("span", { class: spacing }, element);
|
||||
return null;
|
||||
};
|
||||
|
||||
// src/components/Accordion.js
|
||||
var Accordion = (props, children) => {
|
||||
const { title, name, open, ...rest } = props;
|
||||
const { class: className, title, name, open, ...rest } = props;
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class)
|
||||
class: ui("collapse collapse-arrow bg-base-200 mb-2", className)
|
||||
}, [
|
||||
$html("input", {
|
||||
type: name ? "radio" : "checkbox",
|
||||
name,
|
||||
checked: open
|
||||
checked: val(open)
|
||||
}),
|
||||
$html("div", { class: "collapse-title text-xl font-medium" }, title),
|
||||
$html("div", { class: "collapse-content" }, children)
|
||||
@@ -555,63 +549,31 @@
|
||||
__export(exports_Alert, {
|
||||
Alert: () => Alert
|
||||
});
|
||||
|
||||
// src/core/icons.js
|
||||
var iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==";
|
||||
var iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC";
|
||||
var iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==";
|
||||
var iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC";
|
||||
var iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=";
|
||||
var iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==";
|
||||
var icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==";
|
||||
var iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC";
|
||||
var iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC";
|
||||
var iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==";
|
||||
var iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC";
|
||||
var iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=";
|
||||
var iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==";
|
||||
var iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==";
|
||||
var iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==";
|
||||
var iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=";
|
||||
var iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";
|
||||
|
||||
// src/components/Alert.js
|
||||
var Alert = (props, children) => {
|
||||
const { type = "info", soft = true, ...rest } = props;
|
||||
const icons = {
|
||||
info: iconInfo,
|
||||
success: iconSuccess,
|
||||
warning: iconWarning,
|
||||
error: iconError
|
||||
};
|
||||
const typeClass = () => {
|
||||
const t = val(type);
|
||||
const map = {
|
||||
info: "alert-info",
|
||||
success: "alert-success",
|
||||
warning: "alert-warning",
|
||||
error: "alert-error"
|
||||
};
|
||||
return map[t] || t;
|
||||
const { class: className, actions, type = "info", soft = true, ...rest } = props;
|
||||
const iconMap = {
|
||||
info: "icon-[lucide--info]",
|
||||
success: "icon-[lucide--check-circle]",
|
||||
warning: "icon-[lucide--alert-triangle]",
|
||||
error: "icon-[lucide--alert-circle]"
|
||||
};
|
||||
const typeClass = `alert-${type}`;
|
||||
const softClass = soft ? "alert-soft" : "";
|
||||
const allClasses = [typeClass, softClass, className].filter(Boolean).join(" ");
|
||||
const content = children || props.message;
|
||||
return $html("div", {
|
||||
...rest,
|
||||
role: "alert",
|
||||
class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`
|
||||
}, [
|
||||
$html("img", {
|
||||
src: icons[val(type)] || icons.info,
|
||||
class: "w-4 h-4 object-contain",
|
||||
alt: val(type)
|
||||
}),
|
||||
class: ui("alert", allClasses)
|
||||
}, () => [
|
||||
getIcon(iconMap[type]),
|
||||
$html("div", { class: "flex-1" }, [
|
||||
$html("span", {}, [typeof content === "function" ? content() : content])
|
||||
]),
|
||||
props.actions ? $html("div", { class: "flex-none" }, [
|
||||
typeof props.actions === "function" ? props.actions() : props.actions
|
||||
actions ? $html("div", { class: "flex-none" }, [
|
||||
typeof actions === "function" ? actions() : actions
|
||||
]) : null
|
||||
]);
|
||||
].filter(Boolean));
|
||||
};
|
||||
|
||||
// src/components/Autocomplete.js
|
||||
@@ -648,57 +610,75 @@
|
||||
Input: () => Input
|
||||
});
|
||||
var Input = (props) => {
|
||||
const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
|
||||
const {
|
||||
class: className,
|
||||
value,
|
||||
type = "text",
|
||||
icon,
|
||||
oninput,
|
||||
placeholder,
|
||||
disabled,
|
||||
size,
|
||||
...rest
|
||||
} = props;
|
||||
const isPassword = type === "password";
|
||||
const visible = $(false);
|
||||
const iconsByType = {
|
||||
text: iconAbc,
|
||||
password: iconLock,
|
||||
date: iconCalendar,
|
||||
number: icon123,
|
||||
email: iconMail
|
||||
const iconMap = {
|
||||
text: "icon-[lucide--text]",
|
||||
password: "icon-[lucide--lock]",
|
||||
date: "icon-[lucide--calendar]",
|
||||
number: "icon-[lucide--hash]",
|
||||
email: "icon-[lucide--mail]",
|
||||
search: "icon-[lucide--search]",
|
||||
tel: "icon-[lucide--phone]",
|
||||
url: "icon-[lucide--link]"
|
||||
};
|
||||
const inputEl = $html("input", {
|
||||
...rest,
|
||||
type: () => isPassword ? visible() ? "text" : "password" : type,
|
||||
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
|
||||
class: joinClass("grow order-2 focus:outline-none", props.class),
|
||||
value,
|
||||
oninput: (e) => props.oninput?.(e),
|
||||
disabled: () => val(props.disabled)
|
||||
});
|
||||
const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
|
||||
return $html("label", {
|
||||
class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : "")
|
||||
}, [
|
||||
leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
|
||||
label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
|
||||
inputEl,
|
||||
const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null;
|
||||
const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
|
||||
const paddingLeft = leftIcon ? "pl-10" : "";
|
||||
const paddingRight = isPassword ? "pr-10" : "";
|
||||
const buttonSize = () => {
|
||||
if (className?.includes("input-xs"))
|
||||
return "btn-xs";
|
||||
if (className?.includes("input-sm"))
|
||||
return "btn-sm";
|
||||
if (className?.includes("input-lg"))
|
||||
return "btn-lg";
|
||||
return "btn-md";
|
||||
};
|
||||
return $html("div", { class: "relative w-full" }, () => [
|
||||
$html("input", {
|
||||
...rest,
|
||||
type: () => isPassword ? visible() ? "text" : "password" : type,
|
||||
placeholder: placeholder || " ",
|
||||
class: ui("input w-full", `${paddingLeft} ${paddingRight} ${className || ""}`.trim()),
|
||||
value,
|
||||
oninput: (e) => oninput?.(e),
|
||||
disabled: () => val(disabled)
|
||||
}),
|
||||
leftIcon ? $html("div", {
|
||||
class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"
|
||||
}, leftIcon) : null,
|
||||
isPassword ? $html("button", {
|
||||
type: "button",
|
||||
class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
|
||||
class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()),
|
||||
onclick: (e) => {
|
||||
e.preventDefault();
|
||||
visible(!visible());
|
||||
}
|
||||
}, () => $html("img", {
|
||||
class: "w-5 h-5",
|
||||
src: visible() ? iconShow : iconHide
|
||||
})) : null,
|
||||
tip ? $html("div", { class: "tooltip tooltip-left order-4", "data-tip": tip }, $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?")) : null,
|
||||
() => val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null
|
||||
}, () => getPasswordIcon()) : null
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Autocomplete.js
|
||||
var Autocomplete = (props) => {
|
||||
const { options = [], value, onSelect, label, placeholder, ...rest } = props;
|
||||
const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props;
|
||||
const query = $(val(value) || "");
|
||||
const isOpen = $(false);
|
||||
const cursor = $(-1);
|
||||
const list = $(() => {
|
||||
const q = query().toLowerCase();
|
||||
const data = val(options) || [];
|
||||
const data = val(items) || [];
|
||||
return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
|
||||
});
|
||||
const pick = (opt) => {
|
||||
@@ -712,17 +692,17 @@
|
||||
cursor(-1);
|
||||
};
|
||||
const nav = (e) => {
|
||||
const items = list();
|
||||
const items2 = list();
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
isOpen(true);
|
||||
cursor(Math.min(cursor() + 1, items.length - 1));
|
||||
cursor(Math.min(cursor() + 1, items2.length - 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
cursor(Math.max(cursor() - 1, 0));
|
||||
} else if (e.key === "Enter" && cursor() >= 0) {
|
||||
e.preventDefault();
|
||||
pick(items[cursor()]);
|
||||
pick(items2[cursor()]);
|
||||
} else if (e.key === "Escape") {
|
||||
isOpen(false);
|
||||
}
|
||||
@@ -730,6 +710,7 @@
|
||||
return $html("div", { class: "relative w-full" }, [
|
||||
Input({
|
||||
label,
|
||||
class: className,
|
||||
placeholder: placeholder || tt("search")(),
|
||||
value: query,
|
||||
onfocus: () => isOpen(true),
|
||||
@@ -756,7 +737,7 @@
|
||||
onmouseenter: () => cursor(i)
|
||||
}, typeof opt === "string" ? opt : opt.label)
|
||||
]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i),
|
||||
() => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")
|
||||
() => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -766,7 +747,13 @@
|
||||
__export(exports_Badge, {
|
||||
Badge: () => Badge
|
||||
});
|
||||
var Badge = (props, children) => $html("span", { ...props, class: joinClass("badge", props.class) }, children);
|
||||
var Badge = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return $html("span", {
|
||||
...rest,
|
||||
class: ui("badge", className)
|
||||
}, children);
|
||||
};
|
||||
|
||||
// src/components/Button.js
|
||||
var exports_Button = {};
|
||||
@@ -774,23 +761,17 @@
|
||||
Button: () => Button
|
||||
});
|
||||
var Button = (props, children) => {
|
||||
const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
|
||||
const btn = $html("button", {
|
||||
const { class: className, loading, icon, ...rest } = props;
|
||||
const iconEl = getIcon(icon);
|
||||
return $html("button", {
|
||||
...rest,
|
||||
class: joinClass("btn", props.class)
|
||||
}, [
|
||||
() => val(loading) ? $html("span", { class: "loading loading-spinner" }) : null,
|
||||
icon ? $html("span", { class: "mr-1" }, icon) : null,
|
||||
class: ui("btn", className),
|
||||
disabled: () => val(loading) || val(props.disabled)
|
||||
}, () => [
|
||||
val(loading) && $html("span", { class: "loading loading-spinner" }),
|
||||
iconEl,
|
||||
children
|
||||
]);
|
||||
let out = btn;
|
||||
if (badge) {
|
||||
out = $html("div", { class: "indicator" }, [
|
||||
$html("span", { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, badge),
|
||||
out
|
||||
]);
|
||||
}
|
||||
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) : out;
|
||||
].filter(Boolean));
|
||||
};
|
||||
|
||||
// src/components/Checkbox.js
|
||||
@@ -799,11 +780,11 @@
|
||||
Checkbox: () => Checkbox
|
||||
});
|
||||
var Checkbox = (props) => {
|
||||
const { value, tooltip, toggle, label, ...rest } = props;
|
||||
const { class: className, value, tooltip, toggle, label, ...rest } = props;
|
||||
const checkEl = $html("input", {
|
||||
...rest,
|
||||
type: "checkbox",
|
||||
class: () => val(toggle) ? "toggle" : "checkbox",
|
||||
class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
|
||||
checked: value
|
||||
});
|
||||
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
@@ -819,7 +800,7 @@
|
||||
Colorpicker: () => Colorpicker
|
||||
});
|
||||
var Colorpicker = (props) => {
|
||||
const { value, label, ...rest } = props;
|
||||
const { class: className, value, label, ...rest } = props;
|
||||
const isOpen = $(false);
|
||||
const palette = [
|
||||
...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
|
||||
@@ -832,7 +813,7 @@
|
||||
...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"]
|
||||
];
|
||||
const getColor = () => val(value) || "#000000";
|
||||
return $html("div", { class: "relative w-fit" }, [
|
||||
return $html("div", { class: ui("relative w-fit", className) }, [
|
||||
$html("button", {
|
||||
type: "button",
|
||||
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
|
||||
@@ -880,7 +861,7 @@
|
||||
Datepicker: () => Datepicker
|
||||
});
|
||||
var Datepicker = (props) => {
|
||||
const { value, range, label, placeholder, hour = false, ...rest } = props;
|
||||
const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
|
||||
const isOpen = $(false);
|
||||
const internalDate = $(new Date);
|
||||
const hoverDate = $(null);
|
||||
@@ -972,13 +953,13 @@
|
||||
])
|
||||
]);
|
||||
};
|
||||
return $html("div", { class: "relative w-full" }, [
|
||||
return $html("div", { class: ui("relative w-full", className) }, [
|
||||
Input({
|
||||
label,
|
||||
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
|
||||
value: displayValue,
|
||||
readonly: true,
|
||||
icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
|
||||
icon: getIcon("icon-[lucide--calendar]"),
|
||||
onclick: (e) => {
|
||||
e.stopPropagation();
|
||||
isOpen(!isOpen());
|
||||
@@ -991,15 +972,15 @@
|
||||
}, [
|
||||
$html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
|
||||
$html("div", { class: "flex gap-0.5" }, [
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, $html("img", { src: iconLLeft, class: "opacity-40" })),
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, $html("img", { src: iconLeft, class: "opacity-40" }))
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
|
||||
]),
|
||||
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
|
||||
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
|
||||
]),
|
||||
$html("div", { class: "flex gap-0.5" }, [
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, $html("img", { src: iconRight, class: "opacity-40" })),
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, $html("img", { src: iconRRight, class: "opacity-40" }))
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
|
||||
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
|
||||
])
|
||||
]),
|
||||
$html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||
@@ -1089,19 +1070,41 @@
|
||||
__export(exports_Drawer, {
|
||||
Drawer: () => Drawer
|
||||
});
|
||||
var Drawer = (props) => $html("div", { class: joinClass("drawer", props.class) }, [
|
||||
$html("input", {
|
||||
id: props.id,
|
||||
type: "checkbox",
|
||||
class: "drawer-toggle",
|
||||
checked: props.open
|
||||
}),
|
||||
$html("div", { class: "drawer-content" }, props.content),
|
||||
$html("div", { class: "drawer-side" }, [
|
||||
$html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
|
||||
$html("div", { class: "min-h-full bg-base-200 w-80" }, props.side)
|
||||
])
|
||||
]);
|
||||
var Drawer = (props, children) => {
|
||||
const { class: className, id, open, side, content, ...rest } = props;
|
||||
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: ui("drawer", className)
|
||||
}, [
|
||||
$html("input", {
|
||||
id: drawerId,
|
||||
type: "checkbox",
|
||||
class: "drawer-toggle",
|
||||
checked: () => typeof open === "function" ? open() : open,
|
||||
onchange: (e) => {
|
||||
if (typeof open === "function")
|
||||
open(e.target.checked);
|
||||
}
|
||||
}),
|
||||
$html("div", { class: "drawer-content" }, [
|
||||
typeof content === "function" ? content() : content
|
||||
]),
|
||||
$html("div", { class: "drawer-side" }, [
|
||||
$html("label", {
|
||||
for: drawerId,
|
||||
class: "drawer-overlay",
|
||||
onclick: () => {
|
||||
if (typeof open === "function")
|
||||
open(false);
|
||||
}
|
||||
}),
|
||||
$html("div", { class: "min-h-full bg-base-200 w-80" }, [
|
||||
typeof side === "function" ? side() : side
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Dropdown.js
|
||||
var exports_Dropdown = {};
|
||||
@@ -1109,7 +1112,7 @@
|
||||
Dropdown: () => Dropdown
|
||||
});
|
||||
var Dropdown = (props, children) => {
|
||||
const { label, icon, items, ...rest } = props;
|
||||
const { class: className, label, icon, items, ...rest } = props;
|
||||
const renderContent = () => {
|
||||
if (items) {
|
||||
const source = typeof items === "function" ? items : () => items;
|
||||
@@ -1142,7 +1145,7 @@
|
||||
};
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || ""}`
|
||||
class: ui("dropdown", className)
|
||||
}, [
|
||||
$html("div", {
|
||||
tabindex: 0,
|
||||
@@ -1162,17 +1165,17 @@
|
||||
Fab: () => Fab
|
||||
});
|
||||
var Fab = (props) => {
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
|
||||
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`
|
||||
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className)
|
||||
}, [
|
||||
$html("div", {
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn btn-lg btn-circle btn-primary shadow-2xl"
|
||||
}, [
|
||||
icon ? typeof icon === "function" ? icon() : icon : null,
|
||||
icon ? getIcon(icon) : null,
|
||||
!icon && label ? label : null
|
||||
]),
|
||||
...val(actions).map((act) => $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||
@@ -1184,7 +1187,7 @@
|
||||
e.stopPropagation();
|
||||
act.onclick?.(e);
|
||||
}
|
||||
}, [act.icon ? typeof act.icon === "function" ? act.icon() : act.icon : act.text || ""])
|
||||
}, [act.icon ? getIcon(act.icon) : act.text || ""])
|
||||
]))
|
||||
]);
|
||||
};
|
||||
@@ -1194,16 +1197,19 @@
|
||||
__export(exports_Fieldset, {
|
||||
Fieldset: () => Fieldset
|
||||
});
|
||||
var Fieldset = (props, children) => $html("fieldset", {
|
||||
...props,
|
||||
class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class)
|
||||
}, [
|
||||
() => {
|
||||
const legendText = val(props.legend);
|
||||
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
|
||||
},
|
||||
children
|
||||
]);
|
||||
var Fieldset = (props, children) => {
|
||||
const { class: className, legend, ...rest } = props;
|
||||
return $html("fieldset", {
|
||||
...rest,
|
||||
class: ui("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", className)
|
||||
}, [
|
||||
() => {
|
||||
const legendText = val(legend);
|
||||
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
|
||||
},
|
||||
children
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Fileinput.js
|
||||
var exports_Fileinput = {};
|
||||
@@ -1211,7 +1217,7 @@
|
||||
Fileinput: () => Fileinput
|
||||
});
|
||||
var Fileinput = (props) => {
|
||||
const { tooltip, max = 2, accept = "*", onSelect } = props;
|
||||
const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
|
||||
const selectedFiles = $([]);
|
||||
const isDragging = $(false);
|
||||
const error = $(null);
|
||||
@@ -1232,7 +1238,7 @@
|
||||
selectedFiles(updated);
|
||||
onSelect?.(updated);
|
||||
};
|
||||
return $html("fieldset", { class: "fieldset w-full p-0" }, [
|
||||
return $html("fieldset", { ...rest, class: ui("fieldset w-full p-0", className) }, [
|
||||
$html("div", {
|
||||
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
|
||||
"data-tip": tooltip
|
||||
@@ -1256,7 +1262,7 @@
|
||||
}
|
||||
}, [
|
||||
$html("div", { class: "flex items-center gap-3 w-full" }, [
|
||||
$html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
|
||||
getIcon("icon-[lucide--upload]"),
|
||||
$html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
|
||||
$html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
|
||||
]),
|
||||
@@ -1285,7 +1291,7 @@
|
||||
e.stopPropagation();
|
||||
removeFile(index);
|
||||
}
|
||||
}, [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })])
|
||||
}, [getIcon("icon-[lucide--x]")])
|
||||
]), (file) => file.name + file.lastModified)
|
||||
]))
|
||||
]);
|
||||
@@ -1296,10 +1302,31 @@
|
||||
__export(exports_Indicator, {
|
||||
Indicator: () => Indicator
|
||||
});
|
||||
var Indicator = (props, children) => $html("div", { class: joinClass("indicator", props.class) }, [
|
||||
var Indicator = (props, children) => $html("div", { class: "indicator" }, () => [
|
||||
children,
|
||||
$html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge)
|
||||
]);
|
||||
props.value && $html("span", { class: ui("indicator-item badge", props.class) }, props.value)
|
||||
].filter(Boolean));
|
||||
|
||||
// src/components/Label.js
|
||||
var exports_Label = {};
|
||||
__export(exports_Label, {
|
||||
Label: () => Label
|
||||
});
|
||||
var Label = (props) => {
|
||||
const { children, value, floating = false, error, required, class: className, ...rest } = props;
|
||||
if (floating) {
|
||||
return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
|
||||
value ? $html("span", {}, value) : null,
|
||||
children,
|
||||
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
|
||||
]);
|
||||
}
|
||||
return $html("label", { class: ui("input w-full", className), ...rest }, () => [
|
||||
value ? $html("span", { class: "label" }, value) : null,
|
||||
children,
|
||||
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/List.js
|
||||
var exports_List = {};
|
||||
@@ -1307,18 +1334,11 @@
|
||||
List: () => List
|
||||
});
|
||||
var List = (props) => {
|
||||
const {
|
||||
items,
|
||||
header,
|
||||
render,
|
||||
keyFn = (item, index) => index,
|
||||
class: className,
|
||||
...rest
|
||||
} = props;
|
||||
const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props;
|
||||
const listItems = $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn);
|
||||
return $html("ul", {
|
||||
...rest,
|
||||
class: joinClass("list bg-base-100 rounded-box shadow-md", className)
|
||||
class: ui("list bg-base-100 rounded-box shadow-md", className)
|
||||
}, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
|
||||
};
|
||||
|
||||
@@ -1341,7 +1361,8 @@
|
||||
Menu: () => Menu
|
||||
});
|
||||
var Menu = (props) => {
|
||||
const renderItems = (items) => $for(() => items || [], (it) => $html("li", {}, [
|
||||
const { class: className, items, ...rest } = props;
|
||||
const renderItems = (items2) => $for(() => items2 || [], (it) => $html("li", {}, [
|
||||
it.children ? $html("details", { open: it.open }, [
|
||||
$html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
|
||||
$html("ul", {}, renderItems(it.children))
|
||||
@@ -1350,7 +1371,7 @@
|
||||
it.label
|
||||
])
|
||||
]), (it, i) => it.label || i);
|
||||
return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
|
||||
return $html("ul", { ...rest, class: ui("menu bg-base-200 rounded-box", className) }, renderItems(items));
|
||||
};
|
||||
|
||||
// src/components/Modal.js
|
||||
@@ -1359,13 +1380,13 @@
|
||||
Modal: () => Modal
|
||||
});
|
||||
var Modal = (props, children) => {
|
||||
const { title, buttons, open, ...rest } = props;
|
||||
const { class: className, title, buttons, open, ...rest } = props;
|
||||
const dialogRef = { current: null };
|
||||
$watch(() => {
|
||||
const dialog = dialogRef.current;
|
||||
if (!dialog)
|
||||
return;
|
||||
if (open()) {
|
||||
if (val(open)) {
|
||||
if (!dialog.open)
|
||||
dialog.showModal();
|
||||
} else {
|
||||
@@ -1376,13 +1397,14 @@
|
||||
const close = (e) => {
|
||||
if (e && e.preventDefault)
|
||||
e.preventDefault();
|
||||
open(false);
|
||||
if (typeof open === "function")
|
||||
open(false);
|
||||
};
|
||||
return $html("dialog", {
|
||||
...rest,
|
||||
ref: dialogRef,
|
||||
class: "modal",
|
||||
oncancel: () => open(false)
|
||||
class: ui("modal", className),
|
||||
oncancel: () => typeof open === "function" && open(false)
|
||||
}, [
|
||||
$html("div", { class: "modal-box" }, [
|
||||
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
|
||||
@@ -1409,7 +1431,10 @@
|
||||
__export(exports_Navbar, {
|
||||
Navbar: () => Navbar
|
||||
});
|
||||
var Navbar = (props, children) => $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children);
|
||||
var Navbar = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return $html("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children);
|
||||
};
|
||||
|
||||
// src/components/Radio.js
|
||||
var exports_Radio = {};
|
||||
@@ -1417,12 +1442,12 @@
|
||||
Radio: () => Radio
|
||||
});
|
||||
var Radio = (props) => {
|
||||
const { label, tooltip, value, inputValue, name, ...rest } = props;
|
||||
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
|
||||
const radioEl = $html("input", {
|
||||
...rest,
|
||||
type: "radio",
|
||||
name,
|
||||
class: joinClass("radio", props.class),
|
||||
class: ui("radio", className),
|
||||
checked: () => val(value) === inputValue,
|
||||
onclick: () => {
|
||||
if (typeof value === "function")
|
||||
@@ -1431,10 +1456,11 @@
|
||||
});
|
||||
if (!label && !tooltip)
|
||||
return radioEl;
|
||||
return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
radioEl,
|
||||
label ? $html("span", { class: "label-text" }, label) : null
|
||||
]);
|
||||
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||
};
|
||||
|
||||
// src/components/Range.js
|
||||
@@ -1443,11 +1469,11 @@
|
||||
Range: () => Range
|
||||
});
|
||||
var Range = (props) => {
|
||||
const { label, tooltip, value, ...rest } = props;
|
||||
const { class: className, label, tooltip, value, ...rest } = props;
|
||||
const rangeEl = $html("input", {
|
||||
...rest,
|
||||
type: "range",
|
||||
class: joinClass("range", props.class),
|
||||
class: ui("range", className),
|
||||
value,
|
||||
disabled: () => val(props.disabled)
|
||||
});
|
||||
@@ -1466,11 +1492,11 @@
|
||||
Rating: () => Rating
|
||||
});
|
||||
var Rating = (props) => {
|
||||
const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
|
||||
const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
|
||||
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`
|
||||
class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className)
|
||||
}, Array.from({ length: val(count) }, (_, i) => {
|
||||
const starValue = i + 1;
|
||||
return $html("input", {
|
||||
@@ -1497,12 +1523,12 @@
|
||||
Select: () => Select
|
||||
});
|
||||
var Select = (props) => {
|
||||
const { label, options, value, ...rest } = props;
|
||||
const { class: className, label, items, value, ...rest } = props;
|
||||
const selectEl = $html("select", {
|
||||
...rest,
|
||||
class: joinClass("select select-bordered w-full", props.class),
|
||||
class: ui("select select-bordered w-full", className),
|
||||
value
|
||||
}, $for(() => val(options) || [], (opt) => $html("option", {
|
||||
}, $for(() => val(items) || [], (opt) => $html("option", {
|
||||
value: opt.value,
|
||||
$selected: () => String(val(value)) === String(opt.value)
|
||||
}, opt.label), (opt) => opt.value));
|
||||
@@ -1519,33 +1545,42 @@
|
||||
__export(exports_Stack, {
|
||||
Stack: () => Stack
|
||||
});
|
||||
var Stack = (props, children) => $html("div", { ...props, class: joinClass("stack", props.class) }, children);
|
||||
var Stack = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return $html("div", { ...rest, class: ui("stack", className) }, children);
|
||||
};
|
||||
|
||||
// src/components/Stat.js
|
||||
var exports_Stat = {};
|
||||
__export(exports_Stat, {
|
||||
Stat: () => Stat
|
||||
});
|
||||
var Stat = (props) => $html("div", { ...props, class: joinClass("stat", props.class) }, [
|
||||
props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon),
|
||||
props.label && $html("div", { class: "stat-title" }, props.label),
|
||||
$html("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
|
||||
props.desc && $html("div", { class: "stat-desc" }, props.desc)
|
||||
]);
|
||||
var Stat = (props) => {
|
||||
const { class: className, icon, label, value, desc, ...rest } = props;
|
||||
return $html("div", { ...rest, class: ui("stat", className) }, [
|
||||
icon && $html("div", { class: "stat-figure text-secondary" }, icon),
|
||||
label && $html("div", { class: "stat-title" }, label),
|
||||
$html("div", { class: "stat-value" }, () => val(value) ?? value),
|
||||
desc && $html("div", { class: "stat-desc" }, desc)
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Swap.js
|
||||
var exports_Swap = {};
|
||||
__export(exports_Swap, {
|
||||
Swap: () => Swap
|
||||
});
|
||||
var Swap = (props) => $html("label", { class: joinClass("swap", props.class) }, [
|
||||
$html("input", {
|
||||
type: "checkbox",
|
||||
checked: props.value
|
||||
}),
|
||||
$html("div", { class: "swap-on" }, props.on),
|
||||
$html("div", { class: "swap-off" }, props.off)
|
||||
]);
|
||||
var Swap = (props) => {
|
||||
const { class: className, value, on, off, ...rest } = props;
|
||||
return $html("label", { ...rest, class: ui("swap", className) }, [
|
||||
$html("input", {
|
||||
type: "checkbox",
|
||||
checked: val(value)
|
||||
}),
|
||||
$html("div", { class: "swap-on" }, on),
|
||||
$html("div", { class: "swap-off" }, off)
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Table.js
|
||||
var exports_Table = {};
|
||||
@@ -1553,16 +1588,12 @@
|
||||
Table: () => Table
|
||||
});
|
||||
var Table = (props) => {
|
||||
const {
|
||||
items = [],
|
||||
columns = [],
|
||||
keyFn,
|
||||
zebra = false,
|
||||
pinRows = false,
|
||||
empty = tt("nodata")(),
|
||||
...rest
|
||||
} = props;
|
||||
const tableClass = () => joinClass("table", `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`);
|
||||
const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
|
||||
const tableClass = () => {
|
||||
const zebraClass = val(zebra) ? "table-zebra" : "";
|
||||
const pinRowsClass = val(pinRows) ? "table-pin-rows" : "";
|
||||
return ui("table", className, zebraClass, pinRowsClass);
|
||||
};
|
||||
return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
|
||||
$html("table", { ...rest, class: tableClass }, [
|
||||
$html("thead", {}, [
|
||||
@@ -1599,23 +1630,33 @@
|
||||
Tabs: () => Tabs
|
||||
});
|
||||
var Tabs = (props) => {
|
||||
const { items, ...rest } = props;
|
||||
const { class: className, items, activeIndex = $(0), ...rest } = props;
|
||||
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
||||
const internalActive = $(0);
|
||||
const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
|
||||
const handleTabClick = (idx, onClick) => (e) => {
|
||||
if (typeof currentActive === "function") {
|
||||
currentActive(idx);
|
||||
}
|
||||
onClick?.(e);
|
||||
};
|
||||
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
|
||||
$html("div", {
|
||||
role: "tablist",
|
||||
class: joinClass("tabs tabs-box", props.class)
|
||||
}, $for(itemsSignal, (it) => $html("a", {
|
||||
role: "tab",
|
||||
class: () => joinClass("tab", val(it.active) && "tab-active", val(it.disabled) && "tab-disabled", it.tip && "tooltip"),
|
||||
"data-tip": it.tip,
|
||||
onclick: (e) => !val(it.disabled) && it.onclick?.(e)
|
||||
}, it.label), (t) => t.label)),
|
||||
class: ui("tabs tabs-box", className)
|
||||
}, $for(itemsSignal, (it, idx) => {
|
||||
const isActive = val(it.active) ?? currentActive() === idx;
|
||||
return $html("a", {
|
||||
role: "tab",
|
||||
class: () => ui("tab", isActive ? "tab-active" : "", val(it.disabled) ? "tab-disabled" : ""),
|
||||
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined
|
||||
}, it.label);
|
||||
}, (t, idx) => t.label + idx)),
|
||||
() => {
|
||||
const active = itemsSignal().find((it) => val(it.active));
|
||||
if (!active)
|
||||
const activeItem = itemsSignal().find((it, idx) => val(it.active) ?? currentActive() === idx);
|
||||
if (!activeItem)
|
||||
return null;
|
||||
const content = val(active.content);
|
||||
const content = val(activeItem.content);
|
||||
return $html("div", { class: "p-4" }, [
|
||||
typeof content === "function" ? content() : content
|
||||
]);
|
||||
@@ -1629,16 +1670,16 @@
|
||||
Timeline: () => Timeline
|
||||
});
|
||||
var Timeline = (props) => {
|
||||
const { items = [], vertical = true, compact = false, ...rest } = props;
|
||||
const icons = {
|
||||
info: iconInfo,
|
||||
success: iconSuccess,
|
||||
warning: iconWarning,
|
||||
error: iconError
|
||||
const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
|
||||
const iconMap = {
|
||||
info: "icon-[lucide--info]",
|
||||
success: "icon-[lucide--check-circle]",
|
||||
warning: "icon-[lucide--alert-triangle]",
|
||||
error: "icon-[lucide--alert-circle]"
|
||||
};
|
||||
return $html("ul", {
|
||||
...rest,
|
||||
class: () => `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}`
|
||||
class: () => ui(`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className)
|
||||
}, [
|
||||
$for(items, (item, i) => {
|
||||
const isFirst = i === 0;
|
||||
@@ -1649,11 +1690,7 @@
|
||||
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
|
||||
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
|
||||
$html("div", { class: "timeline-middle" }, [
|
||||
$html("img", {
|
||||
src: icons[itemType] || item.icon || icons.success,
|
||||
class: "w-4 h-4 object-contain mx-1",
|
||||
alt: itemType
|
||||
})
|
||||
item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
|
||||
]),
|
||||
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
|
||||
!isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null
|
||||
@@ -1696,11 +1733,15 @@
|
||||
}
|
||||
};
|
||||
const ToastComponent = () => {
|
||||
const closeIcon = getIcon("icon-[lucide--x]");
|
||||
const el = $html("div", {
|
||||
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
|
||||
}, [
|
||||
$html("span", {}, [typeof message === "function" ? message() : message]),
|
||||
Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
|
||||
Button({
|
||||
class: "btn-xs btn-circle btn-ghost",
|
||||
onclick: close
|
||||
}, closeIcon)
|
||||
]);
|
||||
requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
|
||||
return el;
|
||||
@@ -1717,7 +1758,11 @@
|
||||
__export(exports_Tooltip, {
|
||||
Tooltip: () => Tooltip
|
||||
});
|
||||
var Tooltip = (props, children) => $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);
|
||||
var Tooltip = (props, children) => $html("div", {
|
||||
...props,
|
||||
class: () => ui("tooltip", props.ui, props.class),
|
||||
"data-tip": props.tip
|
||||
}, children);
|
||||
|
||||
// src/components/index.js
|
||||
var Components = {
|
||||
@@ -1736,6 +1781,7 @@
|
||||
...exports_Fileinput,
|
||||
...exports_Indicator,
|
||||
...exports_Input,
|
||||
...exports_Label,
|
||||
...exports_List,
|
||||
...exports_Loading,
|
||||
...exports_Menu,
|
||||
|
||||
Reference in New Issue
Block a user