This commit is contained in:
146
dist/sigpro-ui.css
vendored
146
dist/sigpro-ui.css
vendored
@@ -3228,6 +3228,62 @@
|
||||
.my-16 {
|
||||
margin-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.breadcrumbs {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-block: calc(0.25rem * 2);
|
||||
> menu, > ul, > ol {
|
||||
display: flex;
|
||||
min-height: min-content;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: calc(0.25rem * 2);
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
@media (forced-colors: active) {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
& + *:before {
|
||||
content: "";
|
||||
margin-inline-start: calc(0.25rem * 2);
|
||||
margin-inline-end: calc(0.25rem * 3);
|
||||
display: block;
|
||||
height: calc(0.25rem * 1.5);
|
||||
width: calc(0.25rem * 1.5);
|
||||
opacity: 40%;
|
||||
rotate: 45deg;
|
||||
border-top: 1px solid;
|
||||
border-right: 1px solid;
|
||||
background-color: #0000;
|
||||
}
|
||||
[dir="rtl"] & + *:before {
|
||||
rotate: -135deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-flex;
|
||||
@@ -3977,6 +4033,17 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.avatar-group {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.avatar {
|
||||
overflow: hidden;
|
||||
border-radius: calc(infinity * 1px);
|
||||
border: 4px solid var(--color-base-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-block;
|
||||
@@ -4283,6 +4350,13 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.-space-x-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * -6) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * -6) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -5190,72 +5264,6 @@
|
||||
color: oklch(28% 0.01 260);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.tab-content-inner {
|
||||
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.input-container .input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.input-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
background: oklch(var(--b1));
|
||||
border: 1px solid oklch(var(--bc) / 0.2);
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
margin-top: 0.25rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.input-content .menu {
|
||||
width: 100%;
|
||||
}
|
||||
@keyframes tabFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.15s ease-out forwards;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
||||
color-scheme: light;
|
||||
@@ -5638,6 +5646,11 @@
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-space-x-reverse {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -5834,6 +5847,7 @@
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--tw-space-y-reverse: 0;
|
||||
--tw-space-x-reverse: 0;
|
||||
--tw-border-style: solid;
|
||||
--tw-gradient-position: initial;
|
||||
--tw-gradient-from: #0000;
|
||||
|
||||
901
dist/sigpro-ui.esm.js
vendored
901
dist/sigpro-ui.esm.js
vendored
File diff suppressed because it is too large
Load Diff
4
dist/sigpro-ui.esm.min.js
vendored
4
dist/sigpro-ui.esm.min.js
vendored
File diff suppressed because one or more lines are too long
1729
dist/sigpro-ui.js
vendored
1729
dist/sigpro-ui.js
vendored
File diff suppressed because it is too large
Load Diff
2
dist/sigpro-ui.min.css
vendored
2
dist/sigpro-ui.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/sigpro-ui.min.js
vendored
4
dist/sigpro-ui.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -133,7 +133,7 @@ const rangeValue = $(50);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-2' }, [
|
||||
Range({ min: 0, max: 100, value: rangeValue, oninput: (e) => rangeValue(+e.target.value) }),
|
||||
Range({ min: 0, max: 100, value: rangeValue }),
|
||||
span({}, () => `Value: ${rangeValue()}`)
|
||||
]),
|
||||
'#demo-range'
|
||||
|
||||
2
docs/sigpro-ui.min.css
vendored
2
docs/sigpro-ui.min.css
vendored
File diff suppressed because one or more lines are too long
4
docs/sigpro-ui.min.js
vendored
4
docs/sigpro-ui.min.js
vendored
File diff suppressed because one or more lines are too long
12
index.js
12
index.js
@@ -10,3 +10,15 @@ export const Components = {
|
||||
export const Utils = {
|
||||
Locale, tt
|
||||
};
|
||||
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
|
||||
Object.defineProperty(window, name, {
|
||||
value,
|
||||
writable: false,
|
||||
configurable: true,
|
||||
enumerable: true
|
||||
});
|
||||
});
|
||||
}
|
||||
17
package.json
17
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sigpro-ui",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.2",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"main": "./dist/sigpro-ui.js",
|
||||
@@ -40,15 +40,14 @@
|
||||
"del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
|
||||
"clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
|
||||
"build:css": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
|
||||
"build:cssmin": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.min.css",
|
||||
"build:js": "bun run build:js:iife && bun run build:js:iife:min && bun run build:js:esm && bun run build:js:esm:min",
|
||||
"build:js:iife": "bun build ./sigpro-ui-full.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
|
||||
"build:js:iife:min": "bun build ./sigpro-ui-full.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
|
||||
"build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm --external=sigpro",
|
||||
"build:js:esm:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --external=sigpro --minify",
|
||||
"build:cssmin": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
|
||||
"build:js": "bun run build:js:iife && bun run build:js:esm",
|
||||
"build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
|
||||
"build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
|
||||
"build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm",
|
||||
"build:js:esm:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
|
||||
"copy:docs": "cp dist/sigpro-ui.min.css dist/sigpro-ui.min.js docs/",
|
||||
"build": "bun run clean && bun run build:css && bun run build:cssmin && bun run build:js",
|
||||
"postbuild": "bun run copy:docs",
|
||||
"build": "bun run clean && bun run build:css && bun run build:cssmin && bun run build:js:iife && bun run build:js:iife:min && bun run build:js:esm && bun run build:js:esm:min && bun run copy:docs",
|
||||
"prepublishOnly": "bun run build",
|
||||
"docs": "bun x serve docs"
|
||||
},
|
||||
|
||||
214
sigpro-css.css
214
sigpro-css.css
@@ -94,97 +94,25 @@
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.tab-content-inner {
|
||||
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
/* 1. El contenedor manda */
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 2. El label de DaisyUI debe ocupar todo el ancho */
|
||||
.input-container .input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 3. El panel flotante */
|
||||
.input-content {
|
||||
position: absolute;
|
||||
top: 100%; /* Justo debajo */
|
||||
left: 0;
|
||||
right: 0; /* Esto lo obliga a estirarse de izquierda a derecha */
|
||||
z-index: 50;
|
||||
background: oklch(var(--b1)); /* Fondo del tema */
|
||||
border: 1px solid oklch(var(--bc) / 0.2);
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
margin-top: 0.25rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden; /* Para que el 'menu' no se salga de los bordes redondeados */
|
||||
}
|
||||
|
||||
/* 4. La lista interna */
|
||||
.input-content .menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes tabFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.15s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* sigpro-ui daisyUI classes - extracted from components */
|
||||
|
||||
/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
|
||||
|
||||
/* Icons */
|
||||
/* .icon-[lucide--calendar] .icon-[lucide--chevrons-left] .icon-[lucide--chevron-left] .icon-[lucide--chevron-right] .icon-[lucide--chevrons-right] .icon-[lucide--info] .icon-[lucide--check-circle] .icon-[lucide--alert-triangle] .icon-[lucide--alert-circle] .icon-[lucide--heart] */
|
||||
/* .icon-[lucide--upload], .icon-[lucide--x], .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye] */
|
||||
|
||||
/* Accordion */
|
||||
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
||||
|
||||
/* Alert */
|
||||
/* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
|
||||
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
||||
|
||||
/* Avatar */
|
||||
/* .avatar .avatar-group .avatar-online .avatar-offline .avatar-placeholder */
|
||||
|
||||
/* Breadcrumbs */
|
||||
/* .breadcrumbs */
|
||||
|
||||
/* Autocomplete */
|
||||
/* .menu, .menu-dropdown, .menu-dropdown-show, */
|
||||
@@ -203,9 +131,6 @@
|
||||
|
||||
/* Colorpicker */
|
||||
|
||||
/* Datepicker */
|
||||
/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
|
||||
|
||||
/* Drawer */
|
||||
/* .drawer, .drawer-end .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
|
||||
|
||||
@@ -218,15 +143,11 @@
|
||||
/* Fieldset */
|
||||
/* .fieldset, .fieldset-legend, */
|
||||
|
||||
/* Fileinput */
|
||||
/* .icon-[lucide--upload], .icon-[lucide--x], */
|
||||
|
||||
/* Indicator */
|
||||
/* .indicator, .indicator-item, */
|
||||
|
||||
/* Input */
|
||||
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
||||
/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */
|
||||
|
||||
/* List */
|
||||
/* .list, .list-row, .list-bullet, .list-image, .list-none, */
|
||||
@@ -269,127 +190,12 @@
|
||||
|
||||
/* Tabs */
|
||||
/* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
|
||||
/* .icon-[lucide--x], */
|
||||
|
||||
/* Timeline */
|
||||
/* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
|
||||
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
||||
|
||||
/* Toast */
|
||||
/* .icon-[lucide--x], */
|
||||
|
||||
/* Tooltip */
|
||||
/* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */
|
||||
|
||||
/* ===== Tailwind ===== */
|
||||
|
||||
/* Background */
|
||||
/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */
|
||||
|
||||
/* Border */
|
||||
/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */
|
||||
|
||||
/* Bottom */
|
||||
/* .bottom-6, */
|
||||
|
||||
/* Cursor */
|
||||
/* .cursor-pointer, */
|
||||
|
||||
/* Duration */
|
||||
/* .duration-200, .duration-300, */
|
||||
|
||||
/* Flex */
|
||||
/* .flex, .flex-1, .flex-col, .flex-col-reverse, */
|
||||
|
||||
/* Font */
|
||||
/* .font-black, .font-bold, .font-medium, */
|
||||
|
||||
/* Grid */
|
||||
/* .grid, .grid-cols-7, .grid-cols-8, */
|
||||
|
||||
/* Height */
|
||||
/* .h-12, .min-h-full, */
|
||||
|
||||
/* Inset */
|
||||
/* .inset-0, */
|
||||
|
||||
/* Items */
|
||||
/* .items-center, .items-end, */
|
||||
|
||||
/* Justify */
|
||||
/* .justify-between, .justify-start, */
|
||||
|
||||
/* Left */
|
||||
/* .left-0, */
|
||||
|
||||
/* Loading */
|
||||
/* .loading, .loading-spinner, */
|
||||
|
||||
/* Max Height */
|
||||
/* .max-h-60, */
|
||||
|
||||
/* Opacity */
|
||||
/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */
|
||||
|
||||
/* Overflow */
|
||||
/* .overflow-x-auto, .overflow-y-auto, */
|
||||
|
||||
/* Padding */
|
||||
/* .p-2, .p-3, .p-4, .p-6, */
|
||||
|
||||
/* Pointer events */
|
||||
/* .pointer-events-auto, .pointer-events-none, */
|
||||
|
||||
/* Position */
|
||||
/* .absolute, .fixed, .relative, */
|
||||
|
||||
/* Right */
|
||||
/* .right-0, */
|
||||
|
||||
/* Rounded */
|
||||
/* .rounded-box, .rounded-lg, */
|
||||
|
||||
/* Shadow */
|
||||
/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */
|
||||
|
||||
/* Shrink */
|
||||
/* .shrink-0, */
|
||||
|
||||
/* Space */
|
||||
/* .space-y-1, */
|
||||
|
||||
/* Spacing */
|
||||
/* .gap-1, .gap-2, .gap-3, */
|
||||
|
||||
/* Text */
|
||||
/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */
|
||||
|
||||
/* Text custom */
|
||||
/* .text-[10px], */
|
||||
|
||||
/* Top */
|
||||
/* .top-0, */
|
||||
|
||||
/* Transform */
|
||||
/* .translate-x-10, */
|
||||
|
||||
/* Transition */
|
||||
/* .transition-all, */
|
||||
|
||||
/* Truncate */
|
||||
/* .truncate, */
|
||||
|
||||
/* Width */
|
||||
/* .w-full, .w-52, .w-64, .w-80, */
|
||||
|
||||
/* Z-index */
|
||||
/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */
|
||||
|
||||
/* Tailwind variants */
|
||||
/* .hover:bg-base-200, */
|
||||
|
||||
/* Misc */
|
||||
/* .active, .hr, .label, .label-text, */
|
||||
|
||||
/* Icons */
|
||||
/* .icon-[lucide--heart] */
|
||||
|
||||
@@ -92,7 +92,7 @@ export const Editor = (p) => {
|
||||
|
||||
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
|
||||
h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
|
||||
// GRUPO 1: ESTILOS
|
||||
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
|
||||
@@ -106,14 +106,12 @@ export const Editor = (p) => {
|
||||
onclick: () => exec("justifyLeft")
|
||||
}, h("span", { class: "icon-[lucide--align-left]" })),
|
||||
|
||||
// --- Botón Alineación Centro ---
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs",
|
||||
onclick: () => exec("justifyCenter")
|
||||
}, h("span", { class: "icon-[lucide--align-center]" })),
|
||||
|
||||
// --- Botón Alineación Derecha ---
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs",
|
||||
@@ -122,7 +120,6 @@ export const Editor = (p) => {
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
// GRUPO 2: LISTAS Y PÁRRAFO
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
|
||||
@@ -131,11 +128,9 @@ export const Editor = (p) => {
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
// GRUPO 3: INSERTAR
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
|
||||
|
||||
// EMOJIS
|
||||
h("div", { class: "relative" }, [
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
|
||||
h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
|
||||
@@ -143,7 +138,6 @@ export const Editor = (p) => {
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
// GRUPO 4: UTILIDADES
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
|
||||
]),
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
import { $, $$, watch, h, each, when, mount, batch } from 'sigpro';
|
||||
import 'sigpro/xss.js';
|
||||
import 'sigpro/tags.js';
|
||||
import * as All from './sigpro-ui.js';
|
||||
import * as Editor from './sigpro-editor.js';
|
||||
import { Locale, tt } from './sigpro-locale.js';
|
||||
|
||||
const Components = { ...All, ...Editor };
|
||||
const Utils = { Locale, tt };
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
const fns = { $, $$, watch, h, each, when, mount, batch };
|
||||
Object.entries(fns).forEach(([name, fn]) => {
|
||||
Object.defineProperty(window, name, {
|
||||
value: fn,
|
||||
writable: true,
|
||||
configurable: true,
|
||||
enumerable: true
|
||||
});
|
||||
});
|
||||
|
||||
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
|
||||
Object.defineProperty(window, name, {
|
||||
value,
|
||||
writable: false,
|
||||
configurable: true,
|
||||
enumerable: true
|
||||
});
|
||||
});
|
||||
|
||||
console.log("SigProUI DX installed");
|
||||
}
|
||||
|
||||
export { Components, Utils };
|
||||
export * from './sigpro-ui.js';
|
||||
export * from './sigpro-editor.js';
|
||||
@@ -13,6 +13,8 @@ export const Accordion = (p) => {
|
||||
});
|
||||
}
|
||||
export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
|
||||
export const Avatar = (p, c) => h("div", { ...p, class: cls("avatar", p.class) }, c);
|
||||
export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
|
||||
export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
|
||||
const query = $(get(value) || '')
|
||||
const filtered = $(() => filterBy(items, query()))
|
||||
@@ -58,6 +60,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
|
||||
])
|
||||
}
|
||||
export const Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c);
|
||||
export const Breadcrumbs = (p, c) => h("div", { ...p, class: cls("breadcrumbs", p.class) }, c);
|
||||
export const Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c);
|
||||
export const Calendar = (p) => {
|
||||
const internalDate = $(new Date())
|
||||
|
||||
Reference in New Issue
Block a user