natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

changed to new functions
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-22 12:06:34 +02:00
parent 5a5f593025
commit 59e6d972a8
125 changed files with 1934 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js
import { $, Tag, If, For } from "sigpro";
import { $, h, when, each } from "sigpro";
export const Fileinput = (props) => {
const selectedFiles = $([]);
@@ -24,19 +24,19 @@ export const Fileinput = (props) => {
props.onselect?.(updated);
};
return Tag("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
Tag("label", {
return h("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
h("label", {
class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}`,
ondragover: (e) => { e.preventDefault(); isDragging(true); },
ondragleave: () => isDragging(false),
ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); }
}, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [
Tag("span", { class: "icon-[lucide--upload]" }),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`)
h("div", { class: "flex items-center gap-3 w-full" }, [
h("span", { class: "icon-[lucide--upload]" }),
h("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
h("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`)
]),
Tag("input", {
h("input", {
type: "file",
multiple: true,
accept: props.accept || "*",
@@ -44,21 +44,21 @@ export const Fileinput = (props) => {
onchange: (e) => handleFiles(e.target.files)
})
]),
() => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
If(() => selectedFiles().length > 0, () =>
Tag("ul", { class: "mt-2 space-y-1" }, [
For(selectedFiles, (file, idx) =>
Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
Tag("div", { class: "flex items-center gap-2 truncate" }, [
Tag("span", { class: "opacity-50" }, "📄"),
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
() => error() && h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
when(() => selectedFiles().length > 0, () =>
h("ul", { class: "mt-2 space-y-1" }, [
each(selectedFiles, (file, idx) =>
h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
h("div", { class: "flex items-center gap-2 truncate" }, [
h("span", { class: "opacity-50" }, "📄"),
h("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
h("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
]),
Tag("button", {
h("button", {
type: "button",
class: "btn btn-ghost btn-xs btn-circle",
onclick: (e) => { e.preventDefault(); removeFile(idx); }
}, Tag("span", { class: "icon-[lucide--x]" }))
}, h("span", { class: "icon-[lucide--x]" }))
]),
(file) => file.name + file.lastModified
)