Correct components errors
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
This commit is contained in:
243
dist/sigpro-ui.css
vendored
243
dist/sigpro-ui.css
vendored
@@ -19,8 +19,6 @@
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
@@ -1410,6 +1408,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.toast {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: fixed;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: calc(0.25rem * 4);
|
||||
top: auto;
|
||||
bottom: calc(0.25rem * 4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(0.25rem * 2);
|
||||
background-color: transparent;
|
||||
translate: var(--toast-x, 0) var(--toast-y, 0);
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
& > * {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: toast 0.25s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
border: var(--border) solid currentColor;
|
||||
@@ -3171,9 +3190,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-4 {
|
||||
margin: calc(var(--spacing) * 4);
|
||||
}
|
||||
.filter {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
@@ -3323,6 +3339,34 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.steps-horizontal {
|
||||
@layer daisyui.l1.l2 {
|
||||
grid-auto-columns: 1fr;
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
.step {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: 40px 1fr;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
min-width: 4rem;
|
||||
&:before {
|
||||
height: calc(0.25rem * 2);
|
||||
width: 100%;
|
||||
translate: 0;
|
||||
margin-inline-start: -100%;
|
||||
}
|
||||
[dir="rtl"] &:before {
|
||||
translate: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-action {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
margin-top: calc(0.25rem * 6);
|
||||
@@ -3448,6 +3492,19 @@
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12H9m12 6H7M21 6H3'/%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--bell\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--bold\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
@@ -3591,6 +3648,19 @@
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--home\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--indent-decrease\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
@@ -3617,6 +3687,19 @@
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12H11m10 6H11M21 6H11M3 8l4 4l-4 4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--info\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--italic\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
@@ -3682,6 +3765,19 @@
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--menu\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--moon\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
@@ -3747,6 +3843,19 @@
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--settings\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.icon-\[lucide--smile\] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
@@ -4091,6 +4200,13 @@
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
.btn-square {
|
||||
@layer daisyui.l1.l2 {
|
||||
padding-inline: calc(0.25rem * 0);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
.size-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
height: calc(var(--spacing) * 5);
|
||||
@@ -4114,6 +4230,9 @@
|
||||
.h-20 {
|
||||
height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.h-32 {
|
||||
height: calc(var(--spacing) * 32);
|
||||
}
|
||||
.h-48 {
|
||||
height: calc(var(--spacing) * 48);
|
||||
}
|
||||
@@ -4138,9 +4257,17 @@
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
.loading-lg {
|
||||
@layer daisyui.l1.l2 {
|
||||
width: calc(var(--size-selector, 0.25rem) * 7);
|
||||
}
|
||||
}
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-3\/4 {
|
||||
width: calc(3 / 4 * 100%);
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -4150,8 +4277,11 @@
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-32 {
|
||||
width: calc(var(--spacing) * 32);
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
.w-40 {
|
||||
width: calc(var(--spacing) * 40);
|
||||
@@ -4279,6 +4409,13 @@
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-vertical {
|
||||
@layer daisyui.l1.l2 {
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -4297,15 +4434,15 @@
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.place-items-center {
|
||||
place-items: center;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
@@ -4435,6 +4572,14 @@
|
||||
--tw-border-style: none;
|
||||
border-style: none;
|
||||
}
|
||||
.badge-ghost {
|
||||
@layer daisyui.l1.l2 {
|
||||
border-color: var(--color-base-200);
|
||||
background-color: var(--color-base-200);
|
||||
color: var(--color-base-content);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.badge-outline {
|
||||
@layer daisyui.l1.l2 {
|
||||
color: var(--badge-color);
|
||||
@@ -4467,29 +4612,6 @@
|
||||
.border-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.table-zebra {
|
||||
@layer daisyui.l1.l2 {
|
||||
tbody {
|
||||
tr {
|
||||
&:where(:nth-child(even)) {
|
||||
background-color: var(--color-base-200);
|
||||
:where(.table-pin-cols tr th) {
|
||||
background-color: var(--color-base-200);
|
||||
}
|
||||
}
|
||||
&.row-hover {
|
||||
&, &:where(:nth-child(even)) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-base-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-base-100 {
|
||||
background-color: var(--color-base-100);
|
||||
}
|
||||
@@ -4593,14 +4715,9 @@
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
.mask-heart {
|
||||
.mask-star-2 {
|
||||
@layer daisyui.l1.l2 {
|
||||
mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
.mask-star {
|
||||
@layer daisyui.l1.l2 {
|
||||
mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
|
||||
mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
.bg-clip-text {
|
||||
@@ -4693,10 +4810,6 @@
|
||||
font-size: var(--text-7xl);
|
||||
line-height: var(--tw-leading, var(--text-7xl--line-height));
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
@@ -4793,6 +4906,14 @@
|
||||
--alert-color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
.tooltip-primary {
|
||||
@layer daisyui.l1.l2 {
|
||||
--tt-bg: var(--color-primary);
|
||||
> .tooltip-content, &[data-tip]:before {
|
||||
color: var(--color-primary-content);
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
@@ -4817,9 +4938,6 @@
|
||||
.text-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.text-primary-content {
|
||||
color: var(--color-primary-content);
|
||||
}
|
||||
.text-secondary {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
@@ -4878,6 +4996,10 @@
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -5002,10 +5124,16 @@
|
||||
--size: calc(var(--size-field, 0.25rem) * 6);
|
||||
}
|
||||
}
|
||||
.badge-primary {
|
||||
.badge-error {
|
||||
@layer daisyui.l1.l2 {
|
||||
--badge-color: var(--color-primary);
|
||||
--badge-fg: var(--color-primary-content);
|
||||
--badge-color: var(--color-error);
|
||||
--badge-fg: var(--color-error-content);
|
||||
}
|
||||
}
|
||||
.badge-success {
|
||||
@layer daisyui.l1.l2 {
|
||||
--badge-color: var(--color-success);
|
||||
--badge-fg: var(--color-success-content);
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
@@ -5028,6 +5156,11 @@
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.range-sm {
|
||||
@layer daisyui.l1.l2 {
|
||||
--range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
|
||||
}
|
||||
}
|
||||
.range-xs {
|
||||
@layer daisyui.l1.l2 {
|
||||
--range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
|
||||
@@ -5036,6 +5169,13 @@
|
||||
.ring-inset {
|
||||
--tw-ring-inset: inset;
|
||||
}
|
||||
.toggle-primary {
|
||||
@layer daisyui.l1.l2 {
|
||||
&:checked, &[aria-checked="true"] {
|
||||
--input-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-hover\:translate-x-1 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
@@ -5264,6 +5404,9 @@
|
||||
color: oklch(28% 0.01 260);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.markdown-section progress.progress {
|
||||
all: revert-layer;
|
||||
}
|
||||
@layer base {
|
||||
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
||||
color-scheme: light;
|
||||
|
||||
333
dist/sigpro-ui.esm.js
vendored
333
dist/sigpro-ui.esm.js
vendored
@@ -94,10 +94,10 @@ __export(exports_sigpro_ui, {
|
||||
// node_modules/sigpro/dist/sigpro.esm.min.js
|
||||
var w = (e) => typeof e === "function";
|
||||
var B = (e) => e && typeof e === "object";
|
||||
var b = Array.isArray;
|
||||
var g = Array.isArray;
|
||||
var E = typeof document < "u" ? document : null;
|
||||
var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e));
|
||||
var u = null;
|
||||
var d = null;
|
||||
var _ = null;
|
||||
var N = false;
|
||||
var R = 0;
|
||||
@@ -108,17 +108,17 @@ var k = new WeakMap;
|
||||
var W = "http://www.w3.org/2000/svg";
|
||||
var M = "http://www.w3.org/1999/xlink";
|
||||
var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(","));
|
||||
var S = (e) => {
|
||||
var b = (e) => {
|
||||
if (!e || e._disposed)
|
||||
return;
|
||||
e._disposed = true;
|
||||
let o = [e];
|
||||
while (o.length) {
|
||||
let n = o.pop();
|
||||
let s = [e];
|
||||
while (s.length) {
|
||||
let n = s.pop();
|
||||
if (n._cleanups)
|
||||
n._cleanups.forEach((r) => r()), n._cleanups.clear();
|
||||
if (n._children)
|
||||
n._children.forEach((r) => o.push(r)), n._children.clear();
|
||||
n._children.forEach((r) => s.push(r)), n._children.clear();
|
||||
if (n._deps)
|
||||
n._deps.forEach((r) => r.delete(n)), n._deps.clear();
|
||||
}
|
||||
@@ -128,15 +128,15 @@ var v = (e) => {
|
||||
(_._cleanups ||= new Set).add(e);
|
||||
};
|
||||
var K = (e) => {
|
||||
let o = u;
|
||||
u = null;
|
||||
let s = d;
|
||||
d = null;
|
||||
try {
|
||||
return e();
|
||||
} finally {
|
||||
u = o;
|
||||
d = s;
|
||||
}
|
||||
};
|
||||
var x = (e, o = false) => {
|
||||
var x = (e, s = false) => {
|
||||
let n = () => {
|
||||
if (n._disposed)
|
||||
return;
|
||||
@@ -144,17 +144,17 @@ var x = (e, o = false) => {
|
||||
n._deps.forEach((i) => i.delete(n));
|
||||
if (n._cleanups)
|
||||
n._cleanups.forEach((i) => i()), n._cleanups.clear();
|
||||
let r = u, s = _;
|
||||
u = _ = n;
|
||||
let r = d, o = _;
|
||||
d = _ = n;
|
||||
try {
|
||||
return n._result = e();
|
||||
} catch (i) {
|
||||
console.error("[SigPro]", i);
|
||||
} finally {
|
||||
u = r, _ = s;
|
||||
d = r, _ = o;
|
||||
}
|
||||
};
|
||||
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = o, n._depth = u ? u._depth + 1 : 0, n._mounts = [], n._parent = _, _)
|
||||
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = _, _)
|
||||
(_._children ||= new Set).add(n);
|
||||
return n;
|
||||
};
|
||||
@@ -162,11 +162,11 @@ var $ = () => {
|
||||
if (N)
|
||||
return;
|
||||
N = true;
|
||||
let e = Array.from(O).sort((o, n) => o._depth - n._depth);
|
||||
let e = Array.from(O).sort((s, n) => s._depth - n._depth);
|
||||
O.clear();
|
||||
for (let o of e)
|
||||
if (!o._disposed)
|
||||
o();
|
||||
for (let s of e)
|
||||
if (!s._disposed)
|
||||
s();
|
||||
N = false;
|
||||
};
|
||||
var z = (e) => {
|
||||
@@ -178,13 +178,13 @@ var z = (e) => {
|
||||
$();
|
||||
}
|
||||
};
|
||||
var m = (e, o = false) => {
|
||||
if (!o && u && !u._disposed)
|
||||
e.add(u), (u._deps ||= new Set).add(e);
|
||||
else if (o && e.size > 0) {
|
||||
var m = (e, s = false) => {
|
||||
if (!s && d && !d._disposed)
|
||||
e.add(d), (d._deps ||= new Set).add(e);
|
||||
else if (s && e.size > 0) {
|
||||
let n = false;
|
||||
for (let r of e) {
|
||||
if (r === u || r._disposed)
|
||||
if (r === d || r._disposed)
|
||||
continue;
|
||||
if (r._isComputed) {
|
||||
if (r._dirty = true, r._subs)
|
||||
@@ -196,36 +196,36 @@ var m = (e, o = false) => {
|
||||
queueMicrotask($);
|
||||
}
|
||||
};
|
||||
var P = (e, o = null) => {
|
||||
var P = (e, s = null) => {
|
||||
let n = new Set;
|
||||
if (w(e)) {
|
||||
let r, s = () => {
|
||||
if (s._dirty) {
|
||||
let i = u;
|
||||
u = s;
|
||||
let r, o = () => {
|
||||
if (o._dirty) {
|
||||
let i = d;
|
||||
d = o;
|
||||
try {
|
||||
let t = e();
|
||||
if (!Object.is(r, t))
|
||||
r = t, m(n, true);
|
||||
} finally {
|
||||
u = i;
|
||||
d = i;
|
||||
}
|
||||
s._dirty = false;
|
||||
o._dirty = false;
|
||||
}
|
||||
return m(n), r;
|
||||
};
|
||||
return s._isComputed = true, s._subs = n, s._dirty = true, s._deps = null, s._disposed = false, s;
|
||||
return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o;
|
||||
}
|
||||
if (o)
|
||||
if (s)
|
||||
try {
|
||||
e = JSON.parse(localStorage.getItem(o)) ?? e;
|
||||
e = JSON.parse(localStorage.getItem(s)) ?? e;
|
||||
} catch (r) {}
|
||||
return (...r) => {
|
||||
if (r.length) {
|
||||
let s = w(r[0]) ? r[0](e) : r[0];
|
||||
if (!Object.is(e, s)) {
|
||||
if (e = s, o)
|
||||
localStorage.setItem(o, JSON.stringify(e));
|
||||
let o = w(r[0]) ? r[0](e) : r[0];
|
||||
if (!Object.is(e, o)) {
|
||||
if (e = o, s)
|
||||
localStorage.setItem(s, JSON.stringify(e));
|
||||
m(n, true);
|
||||
}
|
||||
}
|
||||
@@ -235,25 +235,25 @@ var P = (e, o = null) => {
|
||||
var D = (e) => {
|
||||
if (!B(e))
|
||||
return e;
|
||||
let o = I.get(e);
|
||||
if (o)
|
||||
return o;
|
||||
let s = I.get(e);
|
||||
if (s)
|
||||
return s;
|
||||
let n = new Map, r = (i) => {
|
||||
let t = n.get(i);
|
||||
if (!t)
|
||||
n.set(i, t = new Set);
|
||||
return t;
|
||||
}, s = new Proxy(e, { get(i, t, c) {
|
||||
}, o = new Proxy(e, { get(i, t, c) {
|
||||
if (typeof t !== "symbol")
|
||||
m(r(t));
|
||||
return D(Reflect.get(i, t, c));
|
||||
}, set(i, t, c, l) {
|
||||
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), d = Reflect.set(i, t, c, l);
|
||||
if (d && !Object.is(f, c)) {
|
||||
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l);
|
||||
if (u && !Object.is(f, c)) {
|
||||
if (m(r(t), true), !a)
|
||||
m(r(j), true);
|
||||
}
|
||||
return d;
|
||||
return u;
|
||||
}, deleteProperty(i, t) {
|
||||
let c = Reflect.deleteProperty(i, t);
|
||||
if (c)
|
||||
@@ -262,111 +262,115 @@ var D = (e) => {
|
||||
}, ownKeys(i) {
|
||||
return m(r(j)), Reflect.ownKeys(i);
|
||||
} });
|
||||
return I.set(e, s), s;
|
||||
return I.set(e, o), o;
|
||||
};
|
||||
var T = (e, o) => {
|
||||
if (o === undefined) {
|
||||
var T = (e, s) => {
|
||||
if (s === undefined) {
|
||||
let r = x(e);
|
||||
return r(), () => S(r);
|
||||
return r(), () => b(r);
|
||||
}
|
||||
let n = x(() => {
|
||||
let r = Array.isArray(e) ? e.map((s) => s()) : e();
|
||||
K(() => o(r));
|
||||
let r = Array.isArray(e) ? e.map((o) => o()) : e();
|
||||
K(() => s(r));
|
||||
});
|
||||
return n(), () => S(n);
|
||||
return n(), () => b(n);
|
||||
};
|
||||
var U = (e) => {
|
||||
if (!e)
|
||||
return;
|
||||
if (e._cleanups)
|
||||
e._cleanups.forEach((o) => o()), e._cleanups.clear();
|
||||
e._cleanups.forEach((s) => s()), e._cleanups.clear();
|
||||
if (e._ownerEffect)
|
||||
S(e._ownerEffect);
|
||||
b(e._ownerEffect);
|
||||
if (e.childNodes)
|
||||
e.childNodes.forEach((o) => U(o));
|
||||
e.childNodes.forEach((s) => U(s));
|
||||
};
|
||||
var J = /^\s*(javascript|data|vbscript):/i;
|
||||
var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]);
|
||||
var X = (e) => Q.has(e) || e.startsWith("on");
|
||||
var L = (e, o) => {
|
||||
if (o == null || o === false)
|
||||
var L = (e, s) => {
|
||||
if (s == null || s === false)
|
||||
return null;
|
||||
if (X(e)) {
|
||||
let n = String(o);
|
||||
let n = String(s);
|
||||
if (J.test(n))
|
||||
return console.warn(`[SigPro] Bloqueado protocolo peligroso en ${e}`), "#";
|
||||
}
|
||||
return o;
|
||||
return s;
|
||||
};
|
||||
var A = (e, o = {}, n = []) => {
|
||||
if (o instanceof Node || b(o) || !B(o))
|
||||
n = o, o = {};
|
||||
var A = (e, s = {}, n = []) => {
|
||||
if (s instanceof Node || g(s) || !B(s))
|
||||
n = s, s = {};
|
||||
if (w(e)) {
|
||||
let t = x(() => {
|
||||
let f = e(o, { children: n, emit: (d, ...h) => o[`on${d[0].toUpperCase()}${d.slice(1)}`]?.(...h) });
|
||||
let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) });
|
||||
return t._result = f, f;
|
||||
});
|
||||
t();
|
||||
let c = t._result;
|
||||
if (c == null)
|
||||
return null;
|
||||
let l = c instanceof Node || b(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
|
||||
let l = c instanceof Node || g(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
|
||||
if (B(f) && !f._isRuntime)
|
||||
f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t;
|
||||
};
|
||||
return b(l) ? l.forEach(a) : a(l), l;
|
||||
return g(l) ? l.forEach(a) : a(l), l;
|
||||
}
|
||||
let r = q.has(e), s = r ? E.createElementNS(W, e) : E.createElement(e);
|
||||
s._cleanups = new Set;
|
||||
for (let t of Object.keys(o)) {
|
||||
let c = o[t];
|
||||
let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e);
|
||||
o._cleanups = new Set;
|
||||
for (let t of Object.keys(s)) {
|
||||
let c = s[t];
|
||||
if (t === "ref") {
|
||||
w(c) ? c(s) : c.current = s;
|
||||
w(c) ? c(o) : c.current = o;
|
||||
continue;
|
||||
}
|
||||
if (r && t.startsWith("xlink:")) {
|
||||
let l = L(t.slice(6), c);
|
||||
l == null ? s.removeAttributeNS(M, t.slice(6)) : s.setAttributeNS(M, t.slice(6), l);
|
||||
l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l);
|
||||
continue;
|
||||
}
|
||||
if (t.startsWith("on")) {
|
||||
let l = t.slice(2).toLowerCase();
|
||||
s.addEventListener(l, c);
|
||||
let a = () => s.removeEventListener(l, c);
|
||||
s._cleanups.add(a), v(a);
|
||||
o.addEventListener(l, c);
|
||||
let a = () => o.removeEventListener(l, c);
|
||||
o._cleanups.add(a), v(a);
|
||||
} else if (w(c)) {
|
||||
let l = x(() => {
|
||||
let a = L(t, c());
|
||||
if (t === "class")
|
||||
s.className = a || "";
|
||||
o.className = a || "";
|
||||
else if (a == null)
|
||||
s.removeAttribute(t);
|
||||
else if (t in s && !r)
|
||||
s[t] = a;
|
||||
o.removeAttribute(t);
|
||||
else if (t === "style" && typeof a === "string")
|
||||
o.setAttribute("style", a);
|
||||
else if (t in o && !r)
|
||||
o[t] = a;
|
||||
else
|
||||
s.setAttribute(t, a === true ? "" : a);
|
||||
o.setAttribute(t, a === true ? "" : a);
|
||||
});
|
||||
if (l(), s._cleanups.add(() => S(l)), v(() => S(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(s.tagName) && (t === "value" || t === "checked")) {
|
||||
if (l(), o._cleanups.add(() => b(l)), v(() => b(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) {
|
||||
let a = t === "checked" ? "change" : "input";
|
||||
s.addEventListener(a, (f) => c(f.target[t]));
|
||||
o.addEventListener(a, (f) => c(f.target[t]));
|
||||
}
|
||||
} else {
|
||||
let l = L(t, c);
|
||||
if (l != null)
|
||||
if (t in s && !r)
|
||||
s[t] = l;
|
||||
if (t === "style" && typeof l === "string")
|
||||
o.setAttribute("style", l);
|
||||
else if (t in o && !r)
|
||||
o[t] = l;
|
||||
else
|
||||
s.setAttribute(t, l === true ? "" : l);
|
||||
o.setAttribute(t, l === true ? "" : l);
|
||||
}
|
||||
}
|
||||
let i = (t) => {
|
||||
if (b(t))
|
||||
if (g(t))
|
||||
return t.forEach(i);
|
||||
if (w(t)) {
|
||||
let c = E.createTextNode("");
|
||||
s.appendChild(c);
|
||||
o.appendChild(c);
|
||||
let l = [], a = x(() => {
|
||||
let f = t(), d = (b(f) ? f : [f]).map(V);
|
||||
let f = t(), u = (g(f) ? f : [f]).map(V);
|
||||
l.forEach((p) => {
|
||||
if (p._isRuntime)
|
||||
p.destroy();
|
||||
@@ -376,88 +380,88 @@ var A = (e, o = {}, n = []) => {
|
||||
p.remove();
|
||||
});
|
||||
let h = c;
|
||||
for (let p = d.length - 1;p >= 0; p--) {
|
||||
let y = d[p];
|
||||
for (let p = u.length - 1;p >= 0; p--) {
|
||||
let y = u[p];
|
||||
if (y.parentNode !== h.parentNode)
|
||||
h.parentNode?.insertBefore(y, h);
|
||||
if (y._mounts)
|
||||
y._mounts.forEach((G) => G());
|
||||
h = y;
|
||||
}
|
||||
l = d;
|
||||
l = u;
|
||||
});
|
||||
a(), s._cleanups.add(() => S(a)), v(() => S(a));
|
||||
a(), o._cleanups.add(() => b(a)), v(() => b(a));
|
||||
} else {
|
||||
let c = V(t);
|
||||
if (s.appendChild(c), c._mounts)
|
||||
if (o.appendChild(c), c._mounts)
|
||||
c._mounts.forEach((l) => l());
|
||||
}
|
||||
};
|
||||
return i(n), s;
|
||||
return i(n), o;
|
||||
};
|
||||
var C = (e) => {
|
||||
let o = new Set, n = _, r = u, s = E.createElement("div");
|
||||
s.style.display = "contents", s.setAttribute("role", "presentation"), _ = { _cleanups: o }, u = null;
|
||||
let s = new Set, n = _, r = d, o = E.createElement("div");
|
||||
o.style.display = "contents", o.setAttribute("role", "presentation"), _ = { _cleanups: s }, d = null;
|
||||
let i = (t) => {
|
||||
if (!t)
|
||||
return;
|
||||
if (t._isRuntime)
|
||||
o.add(t.destroy), s.appendChild(t.container);
|
||||
else if (b(t))
|
||||
s.add(t.destroy), o.appendChild(t.container);
|
||||
else if (g(t))
|
||||
t.forEach(i);
|
||||
else
|
||||
s.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
|
||||
o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
|
||||
};
|
||||
try {
|
||||
i(e({ onCleanup: (t) => o.add(t) }));
|
||||
i(e({ onCleanup: (t) => s.add(t) }));
|
||||
} finally {
|
||||
_ = n, u = r;
|
||||
_ = n, d = r;
|
||||
}
|
||||
return { _isRuntime: true, container: s, destroy: () => {
|
||||
o.forEach((t) => t()), U(s), s.remove();
|
||||
return { _isRuntime: true, container: o, destroy: () => {
|
||||
s.forEach((t) => t()), U(o), o.remove();
|
||||
} };
|
||||
};
|
||||
var F = (e, o, n = null) => {
|
||||
let r = E.createTextNode(""), s = A("div", { style: "display:contents" }, [r]), i = null;
|
||||
var F = (e, s, n = null) => {
|
||||
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null;
|
||||
return T(() => !!(w(e) ? e() : e), (t) => {
|
||||
if (i)
|
||||
i.destroy(), i = null;
|
||||
let c = t ? o : n;
|
||||
let c = t ? s : n;
|
||||
if (c)
|
||||
i = C(() => w(c) ? c() : c), s.insertBefore(i.container, r);
|
||||
}), v(() => i?.destroy()), s;
|
||||
i = C(() => w(c) ? c() : c), o.insertBefore(i.container, r);
|
||||
}), v(() => i?.destroy()), o;
|
||||
};
|
||||
var H = (e, o, n) => {
|
||||
let r = E.createTextNode(""), s = A("div", { style: "display:contents" }, [r]), i = new Map;
|
||||
var H = (e, s, n) => {
|
||||
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map;
|
||||
return T(() => (w(e) ? e() : e) || [], (t) => {
|
||||
let c = new Map, l = [], a = t || [];
|
||||
for (let d = 0;d < a.length; d++) {
|
||||
let h = a[d], p = n ? h?.[n] ?? d : h?.id ?? d, y = i.get(p);
|
||||
for (let u = 0;u < a.length; u++) {
|
||||
let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p);
|
||||
if (!y)
|
||||
y = C(() => o(h, d));
|
||||
y = C(() => s(h, u));
|
||||
else
|
||||
i.delete(p);
|
||||
c.set(p, y), l.push(y);
|
||||
}
|
||||
i.forEach((d) => d.destroy());
|
||||
i.forEach((u) => u.destroy());
|
||||
let f = r;
|
||||
for (let d = l.length - 1;d >= 0; d--) {
|
||||
let p = l[d].container;
|
||||
for (let u = l.length - 1;u >= 0; u--) {
|
||||
let p = l[u].container;
|
||||
if (p.nextSibling !== f)
|
||||
s.insertBefore(p, f);
|
||||
o.insertBefore(p, f);
|
||||
f = p;
|
||||
}
|
||||
i = c;
|
||||
}), s;
|
||||
}), o;
|
||||
};
|
||||
var g = (e) => {
|
||||
let o = () => window.location.hash.slice(1) || "/", n = P(o()), r = () => n(o());
|
||||
var S = (e) => {
|
||||
let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s());
|
||||
window.addEventListener("hashchange", r), v(() => window.removeEventListener("hashchange", r));
|
||||
let s = A("div", { class: "router-hook" }), i = null;
|
||||
let o = A("div", { class: "router-hook" }), i = null;
|
||||
return T([n], () => {
|
||||
let t = n(), c = e.find((l) => {
|
||||
let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean);
|
||||
return a.length === f.length && a.every((d, h) => d[0] === ":" || d === f[h]);
|
||||
return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]);
|
||||
}) || e.find((l) => l.path === "*");
|
||||
if (c) {
|
||||
i?.destroy();
|
||||
@@ -465,16 +469,16 @@ var g = (e) => {
|
||||
c.path.split("/").filter(Boolean).forEach((a, f) => {
|
||||
if (a[0] === ":")
|
||||
l[a.slice(1)] = t.split("/").filter(Boolean)[f];
|
||||
}), g.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), s.replaceChildren(i.container);
|
||||
}), S.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container);
|
||||
}
|
||||
}), s;
|
||||
}), o;
|
||||
};
|
||||
g.params = P({});
|
||||
g.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
|
||||
g.back = () => window.history.back();
|
||||
g.path = () => window.location.hash.replace(/^#/, "") || "/";
|
||||
var Y = (e, o) => {
|
||||
let n = typeof o === "string" ? E.querySelector(o) : o;
|
||||
S.params = P({});
|
||||
S.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
|
||||
S.back = () => window.history.back();
|
||||
S.path = () => window.location.hash.replace(/^#/, "") || "/";
|
||||
var Y = (e, s) => {
|
||||
let n = typeof s === "string" ? E.querySelector(s) : s;
|
||||
if (!n)
|
||||
return;
|
||||
if (k.has(n))
|
||||
@@ -483,8 +487,8 @@ var Y = (e, o) => {
|
||||
return n.replaceChildren(r.container), k.set(n, r), r;
|
||||
};
|
||||
if (typeof window < "u")
|
||||
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: g, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
|
||||
window[e] = (o, n) => A(e, o, n);
|
||||
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: S, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
|
||||
window[e] = (s, n) => A(e, s, n);
|
||||
});
|
||||
|
||||
// sigpro-helpers.js
|
||||
@@ -494,7 +498,7 @@ var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
|
||||
var isFn = (f) => typeof f === "function";
|
||||
var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
|
||||
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
|
||||
var close = () => document.activeElement?.blur();
|
||||
var hide = () => document.activeElement?.blur();
|
||||
|
||||
// sigpro-ui.js
|
||||
var Accordion = (p) => {
|
||||
@@ -508,7 +512,7 @@ var Accordion = (p) => {
|
||||
});
|
||||
};
|
||||
var Alert = (p, c) => A("div", { ...p, class: cls("alert", p.class) }, c);
|
||||
var Avatar = (p, c) => A("div", { ...p, class: cls("avatar", p.class) }, c);
|
||||
var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c));
|
||||
var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
|
||||
var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
|
||||
const query = P(get(value) || "");
|
||||
@@ -520,7 +524,7 @@ var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) =
|
||||
if (isFn(value))
|
||||
value(actual);
|
||||
onselect?.(item);
|
||||
close();
|
||||
hide();
|
||||
};
|
||||
return Dropdown({ class: "w-full" }, [
|
||||
A("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
|
||||
@@ -555,7 +559,7 @@ var Calendar = (p) => {
|
||||
const endHour = P(0);
|
||||
const now = new Date;
|
||||
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||||
const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`;
|
||||
const rangeMode = () => get(p.range) === true;
|
||||
const current = () => get(p.value);
|
||||
const selectDate = (date) => {
|
||||
@@ -578,12 +582,12 @@ var Calendar = (p) => {
|
||||
}
|
||||
};
|
||||
const move = (m2) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear(), d.getMonth() + m2, 1));
|
||||
const d2 = internalDate();
|
||||
internalDate(new Date(d2.getFullYear(), d2.getMonth() + m2, 1));
|
||||
};
|
||||
const moveYear = (y) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||
const d2 = internalDate();
|
||||
internalDate(new Date(d2.getFullYear() + y, d2.getMonth(), 1));
|
||||
};
|
||||
const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [
|
||||
A("div", { class: "flex gap-2 items-center" }, [
|
||||
@@ -606,9 +610,9 @@ var Calendar = (p) => {
|
||||
])
|
||||
]),
|
||||
A("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d) => A("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d2) => A("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d2)),
|
||||
() => {
|
||||
const d = internalDate(), y = d.getFullYear(), m2 = d.getMonth();
|
||||
const d2 = internalDate(), y = d2.getFullYear(), m2 = d2.getMonth();
|
||||
const firstDay = new Date(y, m2, 1).getDay();
|
||||
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||||
const dim = new Date(y, m2 + 1, 0).getDate();
|
||||
@@ -665,9 +669,12 @@ var Colorpicker = (p) => {
|
||||
A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
|
||||
p.label && A("span", {}, p.label)
|
||||
]),
|
||||
DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p.value, onchange: (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
} }))
|
||||
DropdownContent({ class: "p-0" }, ColorPalette({
|
||||
value: p.value,
|
||||
onchange: (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
}
|
||||
}))
|
||||
]);
|
||||
};
|
||||
var ColorPalette = (p) => {
|
||||
@@ -738,8 +745,13 @@ var ColorPalette = (p) => {
|
||||
"#d946ef",
|
||||
"#fae8ff"
|
||||
];
|
||||
const pick = (c) => isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
return A("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => A("button", {
|
||||
const pick = (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
hide();
|
||||
};
|
||||
return A("div", {
|
||||
class: cls("p-3 bg-base-100 rounded-box shadow w-64", p.class)
|
||||
}, A("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => A("button", {
|
||||
type: "button",
|
||||
style: `background-color: ${c}`,
|
||||
class: () => {
|
||||
@@ -748,9 +760,8 @@ var ColorPalette = (p) => {
|
||||
},
|
||||
onclick: () => {
|
||||
pick(c);
|
||||
close();
|
||||
}
|
||||
})));
|
||||
}))));
|
||||
};
|
||||
var Datepicker = (p) => {
|
||||
const displayValue = P("");
|
||||
@@ -778,7 +789,7 @@ var Datepicker = (p) => {
|
||||
else
|
||||
p.onChange?.(val);
|
||||
if (!rangeMode() || val?.end != null)
|
||||
close();
|
||||
hide();
|
||||
};
|
||||
return Dropdown({ class: cls("w-full", p.class) }, [
|
||||
A("label", {
|
||||
@@ -804,7 +815,7 @@ var Datepicker = (p) => {
|
||||
}
|
||||
}, A("span", { class: "icon-[lucide--x] opacity-50" })) : null
|
||||
]),
|
||||
DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
|
||||
DropdownContent({ class: "p-0" }, Calendar({
|
||||
value: p.value,
|
||||
range: rangeMode(),
|
||||
hour: p.hour,
|
||||
@@ -866,7 +877,7 @@ var Fileinput = (p) => {
|
||||
}, [
|
||||
A("div", { class: "flex items-center gap-3 w-full" }, [
|
||||
A("span", { class: "icon-[lucide--upload]" }),
|
||||
A("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
|
||||
A("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Drag and drop..."),
|
||||
A("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${p.max || 2}MB`)
|
||||
]),
|
||||
A("input", {
|
||||
@@ -946,21 +957,21 @@ var Modal = (p) => {
|
||||
const isOpen = get(p.open);
|
||||
if (!dialogRef)
|
||||
return;
|
||||
isOpen ? dialogRef.showModal() : dialogRef.close();
|
||||
isOpen ? dialogRef.showModal() : dialogRef.hide();
|
||||
});
|
||||
const close2 = () => isFn(p.open) && p.open(false);
|
||||
const close = () => isFn(p.open) && p.open(false);
|
||||
return A("dialog", {
|
||||
...p,
|
||||
ref: (el) => dialogRef = el,
|
||||
class: cls("modal", p.class),
|
||||
onclose: close2,
|
||||
oncancel: close2
|
||||
onclose: close,
|
||||
oncancel: close
|
||||
}, [
|
||||
A("div", { class: "modal-box" }, [
|
||||
p.title && A("h3", { class: "text-lg font-bold" }, p.title),
|
||||
p.children,
|
||||
A("div", { class: "modal-action" }, [
|
||||
p.actions || Button({ class: "btn", onclick: close2 }, "Cerrar")
|
||||
p.actions || Button({ class: "btn", onclick: close }, "Cerrar")
|
||||
])
|
||||
]),
|
||||
A("form", { method: "dialog", class: "modal-backdrop" }, [
|
||||
@@ -970,7 +981,7 @@ var Modal = (p) => {
|
||||
};
|
||||
var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c);
|
||||
var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) });
|
||||
var Radial = (p, c) => A("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ""}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`);
|
||||
var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
|
||||
var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) });
|
||||
var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) });
|
||||
var Rating = (p, c) => A("div", { ...p, class: "rating" }, c);
|
||||
@@ -1073,7 +1084,7 @@ var Tabs = (p, c) => {
|
||||
});
|
||||
};
|
||||
var Textarea = (p) => A("textarea", { ...p, class: cls("textarea", p.class) });
|
||||
var Textrotate = (p, c) => A("span", { ...p, class: cls("text-rotate", p.class) }, c);
|
||||
var Textrotate = (p, c) => A("span", { ...p, class: cls("text-rotate", p.class) }, A("span", {}, c));
|
||||
var Timeline = (p, c) => A("ul", { ...p, class: cls("timeline", p.class) }, c);
|
||||
var Toast = (message, type = "alert-success", duration = 3500) => {
|
||||
let container = document.getElementById("sigpro-toast-container");
|
||||
@@ -1371,7 +1382,7 @@ var Editor = (p) => {
|
||||
})
|
||||
]),
|
||||
A("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
||||
A("span", () => `${count()} caracteres`)
|
||||
A("span", () => `${count()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -1406,7 +1417,9 @@ var Components = {
|
||||
};
|
||||
var Utils = {
|
||||
Locale,
|
||||
tt
|
||||
tt,
|
||||
hide,
|
||||
get
|
||||
};
|
||||
if (typeof window !== "undefined") {
|
||||
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
|
||||
|
||||
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
333
dist/sigpro-ui.js
vendored
333
dist/sigpro-ui.js
vendored
@@ -125,10 +125,10 @@
|
||||
// node_modules/sigpro/dist/sigpro.esm.min.js
|
||||
var w = (e) => typeof e === "function";
|
||||
var B = (e) => e && typeof e === "object";
|
||||
var b = Array.isArray;
|
||||
var g = Array.isArray;
|
||||
var E = typeof document < "u" ? document : null;
|
||||
var V = (e) => e?._isRuntime ? e.container : e instanceof Node ? e : E.createTextNode(e == null ? "" : String(e));
|
||||
var u = null;
|
||||
var d = null;
|
||||
var _ = null;
|
||||
var N = false;
|
||||
var R = 0;
|
||||
@@ -139,17 +139,17 @@
|
||||
var W = "http://www.w3.org/2000/svg";
|
||||
var M = "http://www.w3.org/1999/xlink";
|
||||
var q = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(","));
|
||||
var S = (e) => {
|
||||
var b = (e) => {
|
||||
if (!e || e._disposed)
|
||||
return;
|
||||
e._disposed = true;
|
||||
let o = [e];
|
||||
while (o.length) {
|
||||
let n = o.pop();
|
||||
let s = [e];
|
||||
while (s.length) {
|
||||
let n = s.pop();
|
||||
if (n._cleanups)
|
||||
n._cleanups.forEach((r) => r()), n._cleanups.clear();
|
||||
if (n._children)
|
||||
n._children.forEach((r) => o.push(r)), n._children.clear();
|
||||
n._children.forEach((r) => s.push(r)), n._children.clear();
|
||||
if (n._deps)
|
||||
n._deps.forEach((r) => r.delete(n)), n._deps.clear();
|
||||
}
|
||||
@@ -159,15 +159,15 @@
|
||||
(_._cleanups ||= new Set).add(e);
|
||||
};
|
||||
var K = (e) => {
|
||||
let o = u;
|
||||
u = null;
|
||||
let s = d;
|
||||
d = null;
|
||||
try {
|
||||
return e();
|
||||
} finally {
|
||||
u = o;
|
||||
d = s;
|
||||
}
|
||||
};
|
||||
var x = (e, o = false) => {
|
||||
var x = (e, s = false) => {
|
||||
let n = () => {
|
||||
if (n._disposed)
|
||||
return;
|
||||
@@ -175,17 +175,17 @@
|
||||
n._deps.forEach((i) => i.delete(n));
|
||||
if (n._cleanups)
|
||||
n._cleanups.forEach((i) => i()), n._cleanups.clear();
|
||||
let r = u, s = _;
|
||||
u = _ = n;
|
||||
let r = d, o = _;
|
||||
d = _ = n;
|
||||
try {
|
||||
return n._result = e();
|
||||
} catch (i) {
|
||||
console.error("[SigPro]", i);
|
||||
} finally {
|
||||
u = r, _ = s;
|
||||
d = r, _ = o;
|
||||
}
|
||||
};
|
||||
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = o, n._depth = u ? u._depth + 1 : 0, n._mounts = [], n._parent = _, _)
|
||||
if (n._deps = n._cleanups = n._children = null, n._disposed = false, n._isComputed = s, n._depth = d ? d._depth + 1 : 0, n._mounts = [], n._parent = _, _)
|
||||
(_._children ||= new Set).add(n);
|
||||
return n;
|
||||
};
|
||||
@@ -193,11 +193,11 @@
|
||||
if (N)
|
||||
return;
|
||||
N = true;
|
||||
let e = Array.from(O).sort((o, n) => o._depth - n._depth);
|
||||
let e = Array.from(O).sort((s, n) => s._depth - n._depth);
|
||||
O.clear();
|
||||
for (let o of e)
|
||||
if (!o._disposed)
|
||||
o();
|
||||
for (let s of e)
|
||||
if (!s._disposed)
|
||||
s();
|
||||
N = false;
|
||||
};
|
||||
var z = (e) => {
|
||||
@@ -209,13 +209,13 @@
|
||||
$();
|
||||
}
|
||||
};
|
||||
var m = (e, o = false) => {
|
||||
if (!o && u && !u._disposed)
|
||||
e.add(u), (u._deps ||= new Set).add(e);
|
||||
else if (o && e.size > 0) {
|
||||
var m = (e, s = false) => {
|
||||
if (!s && d && !d._disposed)
|
||||
e.add(d), (d._deps ||= new Set).add(e);
|
||||
else if (s && e.size > 0) {
|
||||
let n = false;
|
||||
for (let r of e) {
|
||||
if (r === u || r._disposed)
|
||||
if (r === d || r._disposed)
|
||||
continue;
|
||||
if (r._isComputed) {
|
||||
if (r._dirty = true, r._subs)
|
||||
@@ -227,36 +227,36 @@
|
||||
queueMicrotask($);
|
||||
}
|
||||
};
|
||||
var P = (e, o = null) => {
|
||||
var P = (e, s = null) => {
|
||||
let n = new Set;
|
||||
if (w(e)) {
|
||||
let r, s = () => {
|
||||
if (s._dirty) {
|
||||
let i = u;
|
||||
u = s;
|
||||
let r, o = () => {
|
||||
if (o._dirty) {
|
||||
let i = d;
|
||||
d = o;
|
||||
try {
|
||||
let t = e();
|
||||
if (!Object.is(r, t))
|
||||
r = t, m(n, true);
|
||||
} finally {
|
||||
u = i;
|
||||
d = i;
|
||||
}
|
||||
s._dirty = false;
|
||||
o._dirty = false;
|
||||
}
|
||||
return m(n), r;
|
||||
};
|
||||
return s._isComputed = true, s._subs = n, s._dirty = true, s._deps = null, s._disposed = false, s;
|
||||
return o._isComputed = true, o._subs = n, o._dirty = true, o._deps = null, o._disposed = false, o;
|
||||
}
|
||||
if (o)
|
||||
if (s)
|
||||
try {
|
||||
e = JSON.parse(localStorage.getItem(o)) ?? e;
|
||||
e = JSON.parse(localStorage.getItem(s)) ?? e;
|
||||
} catch (r) {}
|
||||
return (...r) => {
|
||||
if (r.length) {
|
||||
let s = w(r[0]) ? r[0](e) : r[0];
|
||||
if (!Object.is(e, s)) {
|
||||
if (e = s, o)
|
||||
localStorage.setItem(o, JSON.stringify(e));
|
||||
let o = w(r[0]) ? r[0](e) : r[0];
|
||||
if (!Object.is(e, o)) {
|
||||
if (e = o, s)
|
||||
localStorage.setItem(s, JSON.stringify(e));
|
||||
m(n, true);
|
||||
}
|
||||
}
|
||||
@@ -266,25 +266,25 @@
|
||||
var D = (e) => {
|
||||
if (!B(e))
|
||||
return e;
|
||||
let o = I.get(e);
|
||||
if (o)
|
||||
return o;
|
||||
let s = I.get(e);
|
||||
if (s)
|
||||
return s;
|
||||
let n = new Map, r = (i) => {
|
||||
let t = n.get(i);
|
||||
if (!t)
|
||||
n.set(i, t = new Set);
|
||||
return t;
|
||||
}, s = new Proxy(e, { get(i, t, c) {
|
||||
}, o = new Proxy(e, { get(i, t, c) {
|
||||
if (typeof t !== "symbol")
|
||||
m(r(t));
|
||||
return D(Reflect.get(i, t, c));
|
||||
}, set(i, t, c, l) {
|
||||
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), d = Reflect.set(i, t, c, l);
|
||||
if (d && !Object.is(f, c)) {
|
||||
let a = Reflect.has(i, t), f = Reflect.get(i, t, l), u = Reflect.set(i, t, c, l);
|
||||
if (u && !Object.is(f, c)) {
|
||||
if (m(r(t), true), !a)
|
||||
m(r(j), true);
|
||||
}
|
||||
return d;
|
||||
return u;
|
||||
}, deleteProperty(i, t) {
|
||||
let c = Reflect.deleteProperty(i, t);
|
||||
if (c)
|
||||
@@ -293,111 +293,115 @@
|
||||
}, ownKeys(i) {
|
||||
return m(r(j)), Reflect.ownKeys(i);
|
||||
} });
|
||||
return I.set(e, s), s;
|
||||
return I.set(e, o), o;
|
||||
};
|
||||
var T = (e, o) => {
|
||||
if (o === undefined) {
|
||||
var T = (e, s) => {
|
||||
if (s === undefined) {
|
||||
let r = x(e);
|
||||
return r(), () => S(r);
|
||||
return r(), () => b(r);
|
||||
}
|
||||
let n = x(() => {
|
||||
let r = Array.isArray(e) ? e.map((s) => s()) : e();
|
||||
K(() => o(r));
|
||||
let r = Array.isArray(e) ? e.map((o) => o()) : e();
|
||||
K(() => s(r));
|
||||
});
|
||||
return n(), () => S(n);
|
||||
return n(), () => b(n);
|
||||
};
|
||||
var U = (e) => {
|
||||
if (!e)
|
||||
return;
|
||||
if (e._cleanups)
|
||||
e._cleanups.forEach((o) => o()), e._cleanups.clear();
|
||||
e._cleanups.forEach((s) => s()), e._cleanups.clear();
|
||||
if (e._ownerEffect)
|
||||
S(e._ownerEffect);
|
||||
b(e._ownerEffect);
|
||||
if (e.childNodes)
|
||||
e.childNodes.forEach((o) => U(o));
|
||||
e.childNodes.forEach((s) => U(s));
|
||||
};
|
||||
var J = /^\s*(javascript|data|vbscript):/i;
|
||||
var Q = new Set(["src", "href", "formaction", "action", "background", "code", "archive"]);
|
||||
var X = (e) => Q.has(e) || e.startsWith("on");
|
||||
var L = (e, o) => {
|
||||
if (o == null || o === false)
|
||||
var L = (e, s) => {
|
||||
if (s == null || s === false)
|
||||
return null;
|
||||
if (X(e)) {
|
||||
let n = String(o);
|
||||
let n = String(s);
|
||||
if (J.test(n))
|
||||
return console.warn(`[SigPro] Bloqueado protocolo peligroso en ${e}`), "#";
|
||||
}
|
||||
return o;
|
||||
return s;
|
||||
};
|
||||
var A = (e, o = {}, n = []) => {
|
||||
if (o instanceof Node || b(o) || !B(o))
|
||||
n = o, o = {};
|
||||
var A = (e, s = {}, n = []) => {
|
||||
if (s instanceof Node || g(s) || !B(s))
|
||||
n = s, s = {};
|
||||
if (w(e)) {
|
||||
let t = x(() => {
|
||||
let f = e(o, { children: n, emit: (d, ...h) => o[`on${d[0].toUpperCase()}${d.slice(1)}`]?.(...h) });
|
||||
let f = e(s, { children: n, emit: (u, ...h) => s[`on${u[0].toUpperCase()}${u.slice(1)}`]?.(...h) });
|
||||
return t._result = f, f;
|
||||
});
|
||||
t();
|
||||
let c = t._result;
|
||||
if (c == null)
|
||||
return null;
|
||||
let l = c instanceof Node || b(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
|
||||
let l = c instanceof Node || g(c) && c.every((f) => f instanceof Node) ? c : E.createTextNode(String(c)), a = (f) => {
|
||||
if (B(f) && !f._isRuntime)
|
||||
f._mounts = t._mounts || [], f._cleanups = t._cleanups || new Set, f._ownerEffect = t;
|
||||
};
|
||||
return b(l) ? l.forEach(a) : a(l), l;
|
||||
return g(l) ? l.forEach(a) : a(l), l;
|
||||
}
|
||||
let r = q.has(e), s = r ? E.createElementNS(W, e) : E.createElement(e);
|
||||
s._cleanups = new Set;
|
||||
for (let t of Object.keys(o)) {
|
||||
let c = o[t];
|
||||
let r = q.has(e), o = r ? E.createElementNS(W, e) : E.createElement(e);
|
||||
o._cleanups = new Set;
|
||||
for (let t of Object.keys(s)) {
|
||||
let c = s[t];
|
||||
if (t === "ref") {
|
||||
w(c) ? c(s) : c.current = s;
|
||||
w(c) ? c(o) : c.current = o;
|
||||
continue;
|
||||
}
|
||||
if (r && t.startsWith("xlink:")) {
|
||||
let l = L(t.slice(6), c);
|
||||
l == null ? s.removeAttributeNS(M, t.slice(6)) : s.setAttributeNS(M, t.slice(6), l);
|
||||
l == null ? o.removeAttributeNS(M, t.slice(6)) : o.setAttributeNS(M, t.slice(6), l);
|
||||
continue;
|
||||
}
|
||||
if (t.startsWith("on")) {
|
||||
let l = t.slice(2).toLowerCase();
|
||||
s.addEventListener(l, c);
|
||||
let a = () => s.removeEventListener(l, c);
|
||||
s._cleanups.add(a), v(a);
|
||||
o.addEventListener(l, c);
|
||||
let a = () => o.removeEventListener(l, c);
|
||||
o._cleanups.add(a), v(a);
|
||||
} else if (w(c)) {
|
||||
let l = x(() => {
|
||||
let a = L(t, c());
|
||||
if (t === "class")
|
||||
s.className = a || "";
|
||||
o.className = a || "";
|
||||
else if (a == null)
|
||||
s.removeAttribute(t);
|
||||
else if (t in s && !r)
|
||||
s[t] = a;
|
||||
o.removeAttribute(t);
|
||||
else if (t === "style" && typeof a === "string")
|
||||
o.setAttribute("style", a);
|
||||
else if (t in o && !r)
|
||||
o[t] = a;
|
||||
else
|
||||
s.setAttribute(t, a === true ? "" : a);
|
||||
o.setAttribute(t, a === true ? "" : a);
|
||||
});
|
||||
if (l(), s._cleanups.add(() => S(l)), v(() => S(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(s.tagName) && (t === "value" || t === "checked")) {
|
||||
if (l(), o._cleanups.add(() => b(l)), v(() => b(l)), /^(INPUT|TEXTAREA|SELECT)$/.test(o.tagName) && (t === "value" || t === "checked")) {
|
||||
let a = t === "checked" ? "change" : "input";
|
||||
s.addEventListener(a, (f) => c(f.target[t]));
|
||||
o.addEventListener(a, (f) => c(f.target[t]));
|
||||
}
|
||||
} else {
|
||||
let l = L(t, c);
|
||||
if (l != null)
|
||||
if (t in s && !r)
|
||||
s[t] = l;
|
||||
if (t === "style" && typeof l === "string")
|
||||
o.setAttribute("style", l);
|
||||
else if (t in o && !r)
|
||||
o[t] = l;
|
||||
else
|
||||
s.setAttribute(t, l === true ? "" : l);
|
||||
o.setAttribute(t, l === true ? "" : l);
|
||||
}
|
||||
}
|
||||
let i = (t) => {
|
||||
if (b(t))
|
||||
if (g(t))
|
||||
return t.forEach(i);
|
||||
if (w(t)) {
|
||||
let c = E.createTextNode("");
|
||||
s.appendChild(c);
|
||||
o.appendChild(c);
|
||||
let l = [], a = x(() => {
|
||||
let f = t(), d = (b(f) ? f : [f]).map(V);
|
||||
let f = t(), u = (g(f) ? f : [f]).map(V);
|
||||
l.forEach((p) => {
|
||||
if (p._isRuntime)
|
||||
p.destroy();
|
||||
@@ -407,88 +411,88 @@
|
||||
p.remove();
|
||||
});
|
||||
let h = c;
|
||||
for (let p = d.length - 1;p >= 0; p--) {
|
||||
let y = d[p];
|
||||
for (let p = u.length - 1;p >= 0; p--) {
|
||||
let y = u[p];
|
||||
if (y.parentNode !== h.parentNode)
|
||||
h.parentNode?.insertBefore(y, h);
|
||||
if (y._mounts)
|
||||
y._mounts.forEach((G) => G());
|
||||
h = y;
|
||||
}
|
||||
l = d;
|
||||
l = u;
|
||||
});
|
||||
a(), s._cleanups.add(() => S(a)), v(() => S(a));
|
||||
a(), o._cleanups.add(() => b(a)), v(() => b(a));
|
||||
} else {
|
||||
let c = V(t);
|
||||
if (s.appendChild(c), c._mounts)
|
||||
if (o.appendChild(c), c._mounts)
|
||||
c._mounts.forEach((l) => l());
|
||||
}
|
||||
};
|
||||
return i(n), s;
|
||||
return i(n), o;
|
||||
};
|
||||
var C = (e) => {
|
||||
let o = new Set, n = _, r = u, s = E.createElement("div");
|
||||
s.style.display = "contents", s.setAttribute("role", "presentation"), _ = { _cleanups: o }, u = null;
|
||||
let s = new Set, n = _, r = d, o = E.createElement("div");
|
||||
o.style.display = "contents", o.setAttribute("role", "presentation"), _ = { _cleanups: s }, d = null;
|
||||
let i = (t) => {
|
||||
if (!t)
|
||||
return;
|
||||
if (t._isRuntime)
|
||||
o.add(t.destroy), s.appendChild(t.container);
|
||||
else if (b(t))
|
||||
s.add(t.destroy), o.appendChild(t.container);
|
||||
else if (g(t))
|
||||
t.forEach(i);
|
||||
else
|
||||
s.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
|
||||
o.appendChild(t instanceof Node ? t : E.createTextNode(String(t == null ? "" : t)));
|
||||
};
|
||||
try {
|
||||
i(e({ onCleanup: (t) => o.add(t) }));
|
||||
i(e({ onCleanup: (t) => s.add(t) }));
|
||||
} finally {
|
||||
_ = n, u = r;
|
||||
_ = n, d = r;
|
||||
}
|
||||
return { _isRuntime: true, container: s, destroy: () => {
|
||||
o.forEach((t) => t()), U(s), s.remove();
|
||||
return { _isRuntime: true, container: o, destroy: () => {
|
||||
s.forEach((t) => t()), U(o), o.remove();
|
||||
} };
|
||||
};
|
||||
var F = (e, o, n = null) => {
|
||||
let r = E.createTextNode(""), s = A("div", { style: "display:contents" }, [r]), i = null;
|
||||
var F = (e, s, n = null) => {
|
||||
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = null;
|
||||
return T(() => !!(w(e) ? e() : e), (t) => {
|
||||
if (i)
|
||||
i.destroy(), i = null;
|
||||
let c = t ? o : n;
|
||||
let c = t ? s : n;
|
||||
if (c)
|
||||
i = C(() => w(c) ? c() : c), s.insertBefore(i.container, r);
|
||||
}), v(() => i?.destroy()), s;
|
||||
i = C(() => w(c) ? c() : c), o.insertBefore(i.container, r);
|
||||
}), v(() => i?.destroy()), o;
|
||||
};
|
||||
var H = (e, o, n) => {
|
||||
let r = E.createTextNode(""), s = A("div", { style: "display:contents" }, [r]), i = new Map;
|
||||
var H = (e, s, n) => {
|
||||
let r = E.createTextNode(""), o = A("div", { style: "display:contents" }, [r]), i = new Map;
|
||||
return T(() => (w(e) ? e() : e) || [], (t) => {
|
||||
let c = new Map, l = [], a = t || [];
|
||||
for (let d = 0;d < a.length; d++) {
|
||||
let h = a[d], p = n ? h?.[n] ?? d : h?.id ?? d, y = i.get(p);
|
||||
for (let u = 0;u < a.length; u++) {
|
||||
let h = a[u], p = n ? h?.[n] ?? u : h?.id ?? u, y = i.get(p);
|
||||
if (!y)
|
||||
y = C(() => o(h, d));
|
||||
y = C(() => s(h, u));
|
||||
else
|
||||
i.delete(p);
|
||||
c.set(p, y), l.push(y);
|
||||
}
|
||||
i.forEach((d) => d.destroy());
|
||||
i.forEach((u) => u.destroy());
|
||||
let f = r;
|
||||
for (let d = l.length - 1;d >= 0; d--) {
|
||||
let p = l[d].container;
|
||||
for (let u = l.length - 1;u >= 0; u--) {
|
||||
let p = l[u].container;
|
||||
if (p.nextSibling !== f)
|
||||
s.insertBefore(p, f);
|
||||
o.insertBefore(p, f);
|
||||
f = p;
|
||||
}
|
||||
i = c;
|
||||
}), s;
|
||||
}), o;
|
||||
};
|
||||
var g = (e) => {
|
||||
let o = () => window.location.hash.slice(1) || "/", n = P(o()), r = () => n(o());
|
||||
var S = (e) => {
|
||||
let s = () => window.location.hash.slice(1) || "/", n = P(s()), r = () => n(s());
|
||||
window.addEventListener("hashchange", r), v(() => window.removeEventListener("hashchange", r));
|
||||
let s = A("div", { class: "router-hook" }), i = null;
|
||||
let o = A("div", { class: "router-hook" }), i = null;
|
||||
return T([n], () => {
|
||||
let t = n(), c = e.find((l) => {
|
||||
let a = l.path.split("/").filter(Boolean), f = t.split("/").filter(Boolean);
|
||||
return a.length === f.length && a.every((d, h) => d[0] === ":" || d === f[h]);
|
||||
return a.length === f.length && a.every((u, h) => u[0] === ":" || u === f[h]);
|
||||
}) || e.find((l) => l.path === "*");
|
||||
if (c) {
|
||||
i?.destroy();
|
||||
@@ -496,16 +500,16 @@
|
||||
c.path.split("/").filter(Boolean).forEach((a, f) => {
|
||||
if (a[0] === ":")
|
||||
l[a.slice(1)] = t.split("/").filter(Boolean)[f];
|
||||
}), g.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), s.replaceChildren(i.container);
|
||||
}), S.params(l), i = C(() => w(c.component) ? c.component(l) : c.component), o.replaceChildren(i.container);
|
||||
}
|
||||
}), s;
|
||||
}), o;
|
||||
};
|
||||
g.params = P({});
|
||||
g.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
|
||||
g.back = () => window.history.back();
|
||||
g.path = () => window.location.hash.replace(/^#/, "") || "/";
|
||||
var Y = (e, o) => {
|
||||
let n = typeof o === "string" ? E.querySelector(o) : o;
|
||||
S.params = P({});
|
||||
S.to = (e) => window.location.hash = e.replace(/^#?\/?/, "#/");
|
||||
S.back = () => window.history.back();
|
||||
S.path = () => window.location.hash.replace(/^#/, "") || "/";
|
||||
var Y = (e, s) => {
|
||||
let n = typeof s === "string" ? E.querySelector(s) : s;
|
||||
if (!n)
|
||||
return;
|
||||
if (k.has(n))
|
||||
@@ -514,8 +518,8 @@
|
||||
return n.replaceChildren(r.container), k.set(n, r), r;
|
||||
};
|
||||
if (typeof window < "u")
|
||||
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: g, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
|
||||
window[e] = (o, n) => A(e, o, n);
|
||||
Object.assign(window, { $: P, $$: D, watch: T, h: A, when: F, each: H, router: S, mount: Y, batch: z }), "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e) => {
|
||||
window[e] = (s, n) => A(e, s, n);
|
||||
});
|
||||
|
||||
// sigpro-helpers.js
|
||||
@@ -525,7 +529,7 @@
|
||||
var isFn = (f) => typeof f === "function";
|
||||
var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
|
||||
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
|
||||
var close = () => document.activeElement?.blur();
|
||||
var hide = () => document.activeElement?.blur();
|
||||
|
||||
// sigpro-ui.js
|
||||
var Accordion = (p) => {
|
||||
@@ -539,7 +543,7 @@
|
||||
});
|
||||
};
|
||||
var Alert = (p, c) => A("div", { ...p, class: cls("alert", p.class) }, c);
|
||||
var Avatar = (p, c) => A("div", { ...p, class: cls("avatar", p.class) }, c);
|
||||
var Avatar = (p, c) => A("div", { class: "avatar" }, A("div", { class: p.class }, c));
|
||||
var AvatarGroup = (p, c) => A("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
|
||||
var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
|
||||
const query = P(get(value) || "");
|
||||
@@ -551,7 +555,7 @@
|
||||
if (isFn(value))
|
||||
value(actual);
|
||||
onselect?.(item);
|
||||
close();
|
||||
hide();
|
||||
};
|
||||
return Dropdown({ class: "w-full" }, [
|
||||
A("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
|
||||
@@ -586,7 +590,7 @@
|
||||
const endHour = P(0);
|
||||
const now = new Date;
|
||||
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||||
const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
const fmt = (d2) => `${d2.getFullYear()}-${String(d2.getMonth() + 1).padStart(2, "0")}-${String(d2.getDate()).padStart(2, "0")}`;
|
||||
const rangeMode = () => get(p.range) === true;
|
||||
const current = () => get(p.value);
|
||||
const selectDate = (date) => {
|
||||
@@ -609,12 +613,12 @@
|
||||
}
|
||||
};
|
||||
const move = (m2) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear(), d.getMonth() + m2, 1));
|
||||
const d2 = internalDate();
|
||||
internalDate(new Date(d2.getFullYear(), d2.getMonth() + m2, 1));
|
||||
};
|
||||
const moveYear = (y) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||
const d2 = internalDate();
|
||||
internalDate(new Date(d2.getFullYear() + y, d2.getMonth(), 1));
|
||||
};
|
||||
const HourSlider = ({ value: hVal, onChange: onH }) => A("div", { class: "flex-1" }, [
|
||||
A("div", { class: "flex gap-2 items-center" }, [
|
||||
@@ -637,9 +641,9 @@
|
||||
])
|
||||
]),
|
||||
A("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d) => A("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d2) => A("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d2)),
|
||||
() => {
|
||||
const d = internalDate(), y = d.getFullYear(), m2 = d.getMonth();
|
||||
const d2 = internalDate(), y = d2.getFullYear(), m2 = d2.getMonth();
|
||||
const firstDay = new Date(y, m2, 1).getDay();
|
||||
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||||
const dim = new Date(y, m2 + 1, 0).getDate();
|
||||
@@ -696,9 +700,12 @@
|
||||
A("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
|
||||
p.label && A("span", {}, p.label)
|
||||
]),
|
||||
DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p.value, onchange: (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
} }))
|
||||
DropdownContent({ class: "p-0" }, ColorPalette({
|
||||
value: p.value,
|
||||
onchange: (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
}
|
||||
}))
|
||||
]);
|
||||
};
|
||||
var ColorPalette = (p) => {
|
||||
@@ -769,8 +776,13 @@
|
||||
"#d946ef",
|
||||
"#fae8ff"
|
||||
];
|
||||
const pick = (c) => isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
return A("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => A("button", {
|
||||
const pick = (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
||||
hide();
|
||||
};
|
||||
return A("div", {
|
||||
class: cls("p-3 bg-base-100 rounded-box shadow w-64", p.class)
|
||||
}, A("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => A("button", {
|
||||
type: "button",
|
||||
style: `background-color: ${c}`,
|
||||
class: () => {
|
||||
@@ -779,9 +791,8 @@
|
||||
},
|
||||
onclick: () => {
|
||||
pick(c);
|
||||
close();
|
||||
}
|
||||
})));
|
||||
}))));
|
||||
};
|
||||
var Datepicker = (p) => {
|
||||
const displayValue = P("");
|
||||
@@ -809,7 +820,7 @@
|
||||
else
|
||||
p.onChange?.(val);
|
||||
if (!rangeMode() || val?.end != null)
|
||||
close();
|
||||
hide();
|
||||
};
|
||||
return Dropdown({ class: cls("w-full", p.class) }, [
|
||||
A("label", {
|
||||
@@ -835,7 +846,7 @@
|
||||
}
|
||||
}, A("span", { class: "icon-[lucide--x] opacity-50" })) : null
|
||||
]),
|
||||
DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
|
||||
DropdownContent({ class: "p-0" }, Calendar({
|
||||
value: p.value,
|
||||
range: rangeMode(),
|
||||
hour: p.hour,
|
||||
@@ -897,7 +908,7 @@
|
||||
}, [
|
||||
A("div", { class: "flex items-center gap-3 w-full" }, [
|
||||
A("span", { class: "icon-[lucide--upload]" }),
|
||||
A("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
|
||||
A("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Drag and drop..."),
|
||||
A("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${p.max || 2}MB`)
|
||||
]),
|
||||
A("input", {
|
||||
@@ -977,21 +988,21 @@
|
||||
const isOpen = get(p.open);
|
||||
if (!dialogRef)
|
||||
return;
|
||||
isOpen ? dialogRef.showModal() : dialogRef.close();
|
||||
isOpen ? dialogRef.showModal() : dialogRef.hide();
|
||||
});
|
||||
const close2 = () => isFn(p.open) && p.open(false);
|
||||
const close = () => isFn(p.open) && p.open(false);
|
||||
return A("dialog", {
|
||||
...p,
|
||||
ref: (el) => dialogRef = el,
|
||||
class: cls("modal", p.class),
|
||||
onclose: close2,
|
||||
oncancel: close2
|
||||
onclose: close,
|
||||
oncancel: close
|
||||
}, [
|
||||
A("div", { class: "modal-box" }, [
|
||||
p.title && A("h3", { class: "text-lg font-bold" }, p.title),
|
||||
p.children,
|
||||
A("div", { class: "modal-action" }, [
|
||||
p.actions || Button({ class: "btn", onclick: close2 }, "Cerrar")
|
||||
p.actions || Button({ class: "btn", onclick: close }, "Cerrar")
|
||||
])
|
||||
]),
|
||||
A("form", { method: "dialog", class: "modal-backdrop" }, [
|
||||
@@ -1001,7 +1012,7 @@
|
||||
};
|
||||
var Navbar = (p, c) => A("div", { ...p, class: cls("navbar", p.class) }, c);
|
||||
var Progress = (p) => A("progress", { ...p, class: cls("progress", p.class) });
|
||||
var Radial = (p, c) => A("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ""}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`);
|
||||
var Radial = (p, c) => A("div", { class: cls("radial-progress", p.class), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
|
||||
var Radio = (p) => A("input", { ...p, type: "radio", class: cls("radio", p.class) });
|
||||
var Range = (p) => A("input", { ...p, type: "range", class: cls("range", p.class) });
|
||||
var Rating = (p, c) => A("div", { ...p, class: "rating" }, c);
|
||||
@@ -1104,7 +1115,7 @@
|
||||
});
|
||||
};
|
||||
var Textarea = (p) => A("textarea", { ...p, class: cls("textarea", p.class) });
|
||||
var Textrotate = (p, c) => A("span", { ...p, class: cls("text-rotate", p.class) }, c);
|
||||
var Textrotate = (p, c) => A("span", { ...p, class: cls("text-rotate", p.class) }, A("span", {}, c));
|
||||
var Timeline = (p, c) => A("ul", { ...p, class: cls("timeline", p.class) }, c);
|
||||
var Toast = (message, type = "alert-success", duration = 3500) => {
|
||||
let container = document.getElementById("sigpro-toast-container");
|
||||
@@ -1402,7 +1413,7 @@
|
||||
})
|
||||
]),
|
||||
A("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
||||
A("span", () => `${count()} caracteres`)
|
||||
A("span", () => `${count()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -1437,7 +1448,9 @@
|
||||
};
|
||||
var Utils = {
|
||||
Locale,
|
||||
tt
|
||||
tt,
|
||||
hide,
|
||||
get
|
||||
};
|
||||
if (typeof window !== "undefined") {
|
||||
Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
|
||||
|
||||
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
@@ -5,8 +5,4 @@
|
||||
* **Introduction**
|
||||
* [Installation](install.md)
|
||||
* [Quick Reference](quick.md)
|
||||
* [Forms & Inputs](demo_forms.md)
|
||||
* [Data & Dysplay](demo_display.md)
|
||||
* [Feedback & Overlays](demo_overlay.md)
|
||||
* [Navigation & Layout](demo_layout.md)
|
||||
* [WYSIWYG Editor](demo_editor.md)
|
||||
* [Examples](demo.md)
|
||||
1226
docs/demo.md
Normal file
1226
docs/demo.md
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,155 +0,0 @@
|
||||
# Display
|
||||
|
||||
## Card
|
||||
<div id="demo-card"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Card({ class: 'bg-base-100 w-96 shadow-xl' }, [
|
||||
figure(img({ src: 'https://picsum.photos/400/200', alt: 'Imagen' })),
|
||||
CardBody({}, [
|
||||
CardTitle({}, '¡Nuevo producto!'),
|
||||
p('Esta tarjeta muestra la composición flexible. Puedes añadir imágenes, texto, badges y más.'),
|
||||
div({ class: 'flex gap-2 mt-2' }, [
|
||||
Badge({ class: 'badge-primary' }, 'Nuevo'),
|
||||
Badge({ class: 'badge-outline' }, 'En stock')
|
||||
])
|
||||
]),
|
||||
CardActions({ class: 'justify-end m-4 gap-4' }, [
|
||||
Button({ class: 'btn-ghost btn-sm' }, 'Cancelar'),
|
||||
Button({ class: 'btn-primary btn-sm' }, 'Comprar')
|
||||
])
|
||||
]),
|
||||
'#demo-card'
|
||||
);
|
||||
```
|
||||
## Badge
|
||||
<div id="demo-badge"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Badge({ class: 'badge-primary' }, 'New'),
|
||||
'#demo-badge'
|
||||
);
|
||||
```
|
||||
|
||||
## Indicator
|
||||
<div id="demo-indicator"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Indicator({ value: '5' },
|
||||
Button({ class: 'btn btn-sm' }, 'Notifications')
|
||||
),
|
||||
'#demo-indicator'
|
||||
);
|
||||
```
|
||||
## List
|
||||
<div id="demo-list"></div>
|
||||
|
||||
```js
|
||||
const items = $(['Dashboard', 'Settings', 'Help'])
|
||||
|
||||
mount(
|
||||
List({ class: 'bg-base-200 rounded-box p-2' },
|
||||
ListRows({
|
||||
items,
|
||||
render: (item) => span({ class: 'font-bold' }, item)
|
||||
})
|
||||
),
|
||||
'#demo-list'
|
||||
)
|
||||
```
|
||||
## Stack
|
||||
<div id="demo-stack"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Stack({ class: 'w-32 h-20' }, [
|
||||
div({ class: 'bg-primary text-primary-content p-2' }, 'Top'),
|
||||
div({ class: 'bg-secondary text-secondary-content p-2' }, 'Bottom')
|
||||
]),
|
||||
'#demo-stack'
|
||||
);
|
||||
```
|
||||
|
||||
## Stat
|
||||
<div id="demo-stat"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Stats({},
|
||||
Stat({
|
||||
title: 'Total Downloads',
|
||||
value: '12.5K',
|
||||
desc: '21% more than last month'
|
||||
})
|
||||
),
|
||||
'#demo-stat'
|
||||
)
|
||||
```
|
||||
|
||||
## Table
|
||||
<div id="demo-table"></div>
|
||||
|
||||
```js
|
||||
const users = [
|
||||
{ id: 1, name: 'Alice', role: 'Admin' },
|
||||
{ id: 2, name: 'Bob', role: 'Editor' },
|
||||
{ id: 3, name: 'Charlie', role: 'Viewer' }
|
||||
];
|
||||
|
||||
mount([
|
||||
Table({ class: 'table-zebra' },
|
||||
TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
|
||||
),
|
||||
Table({ class: 'table-zebra' }, [
|
||||
h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
|
||||
h('tbody', {},
|
||||
users.map( user => h('tr', {}, [
|
||||
h('td', {}, user.name),
|
||||
h('td', {}, Button({ class: 'btn-xs' }, 'Editar'))
|
||||
]))
|
||||
)
|
||||
])
|
||||
],
|
||||
'#demo-table'
|
||||
)
|
||||
```
|
||||
## Textrotate
|
||||
<div id="demo-textrotate"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Textrotate({ class: 'text-2xl font-bold' },
|
||||
span({class:"bg-base-200"},[
|
||||
span({}, 'Reactivo'),
|
||||
span({}, 'Simple'),
|
||||
span({}, 'Rápido'),
|
||||
span({}, 'SigPro')
|
||||
])),
|
||||
'#demo-textrotate'
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
## Timeline
|
||||
<div id="demo-timeline"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Timeline({ vertical: true }, [
|
||||
li({}, [
|
||||
div({ class: 'timeline-start' }, '2024'),
|
||||
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--check]' })),
|
||||
div({ class: 'timeline-end timeline-box' }, 'Project started')
|
||||
]),
|
||||
li({}, [
|
||||
div({ class: 'timeline-start' }, '2025'),
|
||||
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--clock]' })),
|
||||
div({ class: 'timeline-end timeline-box' }, 'First prototype')
|
||||
])
|
||||
]),
|
||||
'#demo-timeline'
|
||||
);
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
# Editor
|
||||
<div id="demo-editor"></div>
|
||||
|
||||
<div id="demo-editor-output" class="mt-4 p-4 border border-base-300 rounded-box bg-base-200"></div>
|
||||
|
||||
```js
|
||||
const content = $('<p><strong>Hello</strong> world!</p>');
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
Editor({
|
||||
value: content,
|
||||
placeholder: 'Escribe tu historia…',
|
||||
class: 'max-w-2xl'
|
||||
})
|
||||
]),
|
||||
'#demo-editor'
|
||||
);
|
||||
```
|
||||
@@ -1,187 +0,0 @@
|
||||
# Forms
|
||||
|
||||
## Autocomplete
|
||||
<div id="demo-autocomplete"></div>
|
||||
|
||||
```js
|
||||
const selected = $('');
|
||||
const items = ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato'];
|
||||
|
||||
mount(
|
||||
Autocomplete({
|
||||
items,
|
||||
value: selected,
|
||||
placeholder: 'Search...',
|
||||
onselect: (val) => console.log('Selected:', val)
|
||||
}),
|
||||
'#demo-autocomplete'
|
||||
);
|
||||
```
|
||||
|
||||
## Button
|
||||
<div id="demo-button"></div>
|
||||
|
||||
```js
|
||||
const count = $(0);
|
||||
|
||||
mount(
|
||||
Button({
|
||||
class: 'btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, () => `Clicked ${count()} times`),
|
||||
'#demo-button'
|
||||
);
|
||||
```
|
||||
|
||||
## Checkbox
|
||||
<div id="demo-checkbox"></div>
|
||||
|
||||
```js
|
||||
const checked = $(false);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex items-center gap-2' }, [
|
||||
Checkbox({
|
||||
checked,
|
||||
onchange: (e) => checked(e.target.checked),
|
||||
}),
|
||||
span({}, 'Accept terms')
|
||||
]),
|
||||
'#demo-checkbox'
|
||||
);
|
||||
```
|
||||
|
||||
## Colorpicker
|
||||
<div id="demo-colorpicker"></div>
|
||||
|
||||
```js
|
||||
const color = $('');
|
||||
|
||||
mount(
|
||||
Colorpicker({
|
||||
value: color,
|
||||
label: 'Pick a color',
|
||||
onchange: (c) => console.log('Color:', c)
|
||||
}),
|
||||
'#demo-colorpicker'
|
||||
);
|
||||
```
|
||||
|
||||
## Datepicker
|
||||
<div id="demo-datepicker"></div>
|
||||
|
||||
```js
|
||||
const date = $('');
|
||||
|
||||
mount(
|
||||
Datepicker({
|
||||
value: date,
|
||||
range: true,
|
||||
hour: true,
|
||||
placeholder: 'Select date',
|
||||
onChange: (val) => console.log('Date:', val)
|
||||
}),
|
||||
'#demo-datepicker'
|
||||
);
|
||||
```
|
||||
|
||||
## Input
|
||||
<div id="demo-input"></div>
|
||||
|
||||
```js
|
||||
const text = $('');
|
||||
const pass = $('');
|
||||
|
||||
mount([
|
||||
Input({
|
||||
label: 'Username',
|
||||
float: true,
|
||||
value: text,
|
||||
left: Icon('icon-[lucide--user]')
|
||||
}),
|
||||
Input({
|
||||
type: 'password',
|
||||
label: 'Password',
|
||||
float: true,
|
||||
value: pass,
|
||||
left: Icon('icon-[lucide--lock]')
|
||||
})],
|
||||
'#demo-input'
|
||||
);
|
||||
```
|
||||
|
||||
## Radio
|
||||
<div id="demo-radio"></div>
|
||||
|
||||
```js
|
||||
const option = $('');
|
||||
|
||||
mount(
|
||||
div({ class: 'flex gap-2' }, [
|
||||
Radio({ name: 'option', value: 'a', checked: () => option() === 'a', onchange: () => option('a') }),
|
||||
Radio({ name: 'option', value: 'b', checked: () => option() === 'b', onchange: () => option('b') }),
|
||||
]),
|
||||
'#demo-radio'
|
||||
);
|
||||
```
|
||||
|
||||
## Range
|
||||
<div id="demo-range"></div>
|
||||
|
||||
```js
|
||||
const rangeValue = $(50);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-2' }, [
|
||||
Range({ min: 0, max: 100, value: rangeValue }),
|
||||
span({}, () => `Value: ${rangeValue()}`)
|
||||
]),
|
||||
'#demo-range'
|
||||
);
|
||||
```
|
||||
|
||||
## Rating
|
||||
<div id="demo-rating"></div>
|
||||
|
||||
```js
|
||||
const stars = $(0)
|
||||
|
||||
mount(
|
||||
Rating({}, [
|
||||
RatingItems({ count: 5, value: stars, name: 'rat1', class:"mask-star" }),
|
||||
]),
|
||||
'#demo-rating'
|
||||
)
|
||||
```
|
||||
|
||||
## Select
|
||||
<div id="demo-select"></div>
|
||||
|
||||
```js
|
||||
const choice = $('');
|
||||
|
||||
mount(
|
||||
Select({
|
||||
items: ['Option 1', 'Option 2', 'Option 3'],
|
||||
placeholder: 'Choose...',
|
||||
value: choice,
|
||||
}),
|
||||
'#demo-select'
|
||||
);
|
||||
```
|
||||
|
||||
## Swap
|
||||
<div id="demo-swap"></div>
|
||||
|
||||
```js
|
||||
const isActive = $(false)
|
||||
|
||||
mount(
|
||||
Swap({ class: 'text-base' }, [
|
||||
SwapToggle({ value: isActive, class: 'swap-rotate' }),
|
||||
SwapOn({}, span({ class: 'icon-[lucide--moon]' })),
|
||||
SwapOff({}, span({ class: 'icon-[lucide--sun]' }))
|
||||
]),
|
||||
'#demo-swap'
|
||||
)
|
||||
```
|
||||
@@ -1,181 +0,0 @@
|
||||
# Layout
|
||||
|
||||
## Accordion
|
||||
<div id="demo-accordion"></div>
|
||||
|
||||
```js
|
||||
const accItems = $([
|
||||
{ title: 'What is SigPro?', content: 'A lightweight UI library built on DaisyUI and a fine‑grained reactivity system.' },
|
||||
{ title: 'Why use it?', content: 'No build step, minimal boilerplate, and all components are just JavaScript functions.' },
|
||||
{ title: 'Browser support?', content: 'All modern browsers that support ES2020+' }
|
||||
]);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-8' }, [
|
||||
Accordion({items: accItems, class: "collapse-arrow bg-base-100 border border-base-300"})
|
||||
]),
|
||||
'#demo-accordion'
|
||||
);
|
||||
```
|
||||
|
||||
## Drawer
|
||||
<div id="demo-drawer"></div>
|
||||
|
||||
```js
|
||||
const leftOpen = $(false)
|
||||
const rightOpen = $(false)
|
||||
|
||||
mount(
|
||||
Drawer({ open: leftOpen }, [
|
||||
DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
|
||||
DrawerContent({}, [
|
||||
Drawer({ open: rightOpen, class: 'drawer-end' }, [
|
||||
DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
|
||||
DrawerContent({}, [
|
||||
div({ class: 'p-4' }, [
|
||||
h3({ class: 'text-lg font-bold' }, 'Panel central'),
|
||||
label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
|
||||
label({ for: 'right-drawer', class: 'btn ml-2' }, 'Abrir derecho'),
|
||||
p({}, 'Contenido principal aquí...')
|
||||
])
|
||||
]),
|
||||
DrawerSide({}, [
|
||||
DrawerOverlay({ for: 'right-drawer' }),
|
||||
div({ class: 'min-h-full bg-base-200 w-60 p-4' },
|
||||
h4({ class: 'font-semibold' }, 'Menú derecho')
|
||||
)
|
||||
])
|
||||
])
|
||||
]),
|
||||
DrawerSide({}, [
|
||||
DrawerOverlay({ for: 'left-drawer' }),
|
||||
div({ class: 'min-h-full bg-base-200 w-60 p-4' },
|
||||
h4({ class: 'font-semibold' }, 'Menú izquierdo')
|
||||
)
|
||||
])
|
||||
]),
|
||||
'#demo-drawer'
|
||||
)
|
||||
```
|
||||
|
||||
## Dropdown
|
||||
<div id="demo-dropdown"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Dropdown({}, [
|
||||
DropdownButton({}, 'Options'),
|
||||
DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
|
||||
Menu({
|
||||
items: [
|
||||
{ label: 'Edit', onclick: () => close() },
|
||||
{ label: 'Delete', onclick: () => close() },
|
||||
{ label: 'Archive' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]),
|
||||
Dropdown({}, [
|
||||
DropdownButton({}, 'More'),
|
||||
DropdownContent({ class: 'menu bg-base-100 rounded-box w-40 p-2 shadow' },
|
||||
ul({}, [
|
||||
li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Profile')),
|
||||
li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Logout'))
|
||||
])
|
||||
)
|
||||
])
|
||||
]),
|
||||
'#demo-dropdown'
|
||||
);
|
||||
```
|
||||
|
||||
## Fab
|
||||
<div id="demo-fab"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Fab({ class: 'btn-lg btn-circle btn-secondary', icon:"R" }, [
|
||||
Button({},"C"),
|
||||
Button({},"B"),
|
||||
Button({},"A"),
|
||||
])
|
||||
]),
|
||||
'#demo-fab'
|
||||
);
|
||||
```
|
||||
|
||||
## Fieldset
|
||||
<div id="demo-fieldset"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4 bg' }, [
|
||||
Fieldset({ label: 'Personal Info', class:"bg-base-200 border-base-300 rounded-box w-xs border gap-3 p-4" }, [
|
||||
Input({ label: 'Name', float: true, value: $('') }),
|
||||
Select({ label: 'Country', float: true, items: ['Spain', 'France', 'Italy'], value: $('') })
|
||||
]),
|
||||
Fieldset({ class: 'bg-base-200 p-4 rounded-box' , label: "Any content"}, [
|
||||
div({}, 'Any content')
|
||||
])
|
||||
]),
|
||||
'#demo-fieldset'
|
||||
);
|
||||
```
|
||||
|
||||
## Menu
|
||||
<div id="demo-menu"></div>
|
||||
|
||||
```js
|
||||
const menuItems = $([
|
||||
{ label: 'Home' },
|
||||
{ label: 'Products', children: [
|
||||
{ label: 'Laptops' },
|
||||
{ label: 'Phones' }
|
||||
]},
|
||||
{ label: 'About', onclick: () => console.log('About clicked') }
|
||||
]);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Menu({ items: menuItems, class: 'bg-base-200 rounded-box w-56' }),
|
||||
]),
|
||||
'#demo-menu'
|
||||
);
|
||||
```
|
||||
|
||||
## Navbar
|
||||
<div id="demo-navbar"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Navbar({ class: 'bg-base-200 rounded-box' }, [
|
||||
div({ class: 'flex-1' },
|
||||
a({ class: 'btn btn-ghost text-xl' }, 'SigPro')
|
||||
),
|
||||
div({ class: 'flex-none gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost' }, 'Login'),
|
||||
Button({ class: 'btn btn-primary' }, 'Sign up')
|
||||
])
|
||||
]),
|
||||
'#demo-navbar'
|
||||
);
|
||||
```
|
||||
|
||||
## Tabs
|
||||
<div id="demo-tabs"></div>
|
||||
|
||||
```js
|
||||
const activeTab = $(0);
|
||||
const tabsData = $([
|
||||
{ label: 'Tab A', content: 'Content of tab A' },
|
||||
{ label: 'Tab B', content: 'Content of tab B', closable: true },
|
||||
{ label: 'Tab C', content: 'Content of tab C' }
|
||||
])
|
||||
|
||||
mount(
|
||||
Tabs({ class: 'tabs-box', items: tabsData, activeIndex: activeTab }),
|
||||
'#demo-tabs'
|
||||
)
|
||||
```
|
||||
@@ -1,120 +0,0 @@
|
||||
# Overlays
|
||||
|
||||
## Alert
|
||||
<div id="demo-alert"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Alert({ class: 'alert-success' }, [
|
||||
span({}, 'Operation completed successfully!'),
|
||||
Button({ class: 'btn-sm' }, 'Undo')
|
||||
]),
|
||||
'#demo-alert'
|
||||
);
|
||||
```
|
||||
## Chat
|
||||
<div id="demo-chat"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
// Mensaje izquierdo (Obi-Wan)
|
||||
Chat({ class: 'chat-start' }, [
|
||||
ChatImage({}, img({
|
||||
src: 'https://img.daisyui.com/images/profile/demo/kenobee@192.webp',
|
||||
alt: 'Obi-Wan Kenobi'
|
||||
})),
|
||||
ChatHeader({}, [
|
||||
'Obi-Wan Kenobi',
|
||||
time({ class: 'text-xs opacity-50' }, '12:45')
|
||||
]),
|
||||
ChatBubble({}, 'You were the Chosen One!'),
|
||||
ChatFooter({ class: 'opacity-50' }, 'Delivered')
|
||||
]),
|
||||
// Mensaje derecho (Anakin)
|
||||
Chat({ class: 'chat-end' }, [
|
||||
ChatImage({}, img({
|
||||
src: 'https://img.daisyui.com/images/profile/demo/anakeen@192.webp',
|
||||
alt: 'Anakin'
|
||||
})),
|
||||
ChatHeader({}, [
|
||||
'Anakin',
|
||||
time({ class: 'text-xs opacity-50' }, '12:46')
|
||||
]),
|
||||
ChatBubble({}, 'I hate you!'),
|
||||
ChatFooter({ class: 'opacity-50' }, 'Seen at 12:46')
|
||||
])
|
||||
]),
|
||||
'#demo-chat'
|
||||
);
|
||||
```
|
||||
|
||||
## Modal
|
||||
<div id="demo-modal"></div>
|
||||
|
||||
```js
|
||||
const modalOpen = $(false);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col items-start gap-2' }, [
|
||||
Button({
|
||||
class: 'btn',
|
||||
onclick: () => modalOpen(true)
|
||||
}, 'Abrir modal'),
|
||||
Modal({
|
||||
open: modalOpen,
|
||||
title: 'Congratulations!',
|
||||
backdrop: true,
|
||||
actions: [
|
||||
form({ method: 'dialog' },
|
||||
Button({ class: 'btn', onclick: () => modalOpen(false) }, 'Close')
|
||||
)
|
||||
]
|
||||
}, [
|
||||
p({}, 'You have successfully created a reactive DaisyUI modal with SigPro.')
|
||||
])
|
||||
]),
|
||||
'#demo-modal'
|
||||
);
|
||||
```
|
||||
|
||||
## Toast
|
||||
<div id="demo-toast"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Button({ class: 'btn', onclick: () => Toast('File saved!') }, 'Simple'),
|
||||
Button({ class: 'btn', onclick: () => Toast('Error', 'alert-error', 5000) }, 'Error (5s)'),
|
||||
Button({ class: 'btn', onclick: () => Toast(
|
||||
div({ class: 'flex items-center gap-2' }, [
|
||||
span({ class: 'icon-[lucide--check] text-lg' }),
|
||||
span({}, 'Report generated successfully')
|
||||
]),
|
||||
'alert-success'
|
||||
) }, 'With icon'),
|
||||
Button({ class: 'btn', onclick: () => Toast(
|
||||
h('div', { class: 'flex flex-col' }, [
|
||||
h('strong', {}, '¡ATTENTION!'),
|
||||
h('span', {}, 'Error saving!'),
|
||||
h('button', { class: 'btn btn-xs mt-1', onclick: () => console.log('retry') }, 'Retry')
|
||||
]),
|
||||
'alert-warning',
|
||||
7000
|
||||
) }, 'Complex')
|
||||
]),
|
||||
'#demo-toast'
|
||||
);
|
||||
```
|
||||
|
||||
## Tooltip
|
||||
<div id="demo-tooltip"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Tooltip({ tip: 'Click to save', class: 'tooltip-right' },
|
||||
Button({ class: 'btn' }, 'Save')
|
||||
),
|
||||
'#demo-tooltip'
|
||||
);
|
||||
```
|
||||
768
docs/quick.md
768
docs/quick.md
File diff suppressed because it is too large
Load Diff
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
3
index.js
3
index.js
@@ -1,6 +1,7 @@
|
||||
import * as All from './sigpro-ui.js';
|
||||
import * as Editor from './sigpro-editor.js';
|
||||
import { Locale, tt } from './sigpro-locale.js';
|
||||
import { hide, get } from './sigpro-helpers.js';
|
||||
|
||||
export const Components = {
|
||||
...All,
|
||||
@@ -8,7 +9,7 @@ export const Components = {
|
||||
};
|
||||
|
||||
export const Utils = {
|
||||
Locale, tt
|
||||
Locale, tt, hide, get
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sigpro-ui",
|
||||
"version": "1.2.2",
|
||||
"version": "1.2.4",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"main": "./dist/sigpro-ui.js",
|
||||
|
||||
@@ -95,6 +95,16 @@
|
||||
}
|
||||
|
||||
|
||||
/* SOLO PARA LA DEMO */
|
||||
/* Forzar DaisyUI .progress sobre Docsify */
|
||||
/* progress.progress {
|
||||
appearance: auto !important;
|
||||
-webkit-appearance: auto !important;
|
||||
-moz-appearance: auto !important;
|
||||
} */
|
||||
.markdown-section progress.progress {
|
||||
all: revert-layer;
|
||||
}
|
||||
|
||||
/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
|
||||
|
||||
@@ -149,6 +159,9 @@
|
||||
/* 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, */
|
||||
|
||||
/* Kbd */
|
||||
/* .kbd .kbd-xs .kbd-sm .kbd-md .kbd-lg .kbd-xl */
|
||||
|
||||
/* List */
|
||||
/* .list, .list-row, .list-bullet, .list-image, .list-none, */
|
||||
|
||||
@@ -164,6 +177,12 @@
|
||||
/* Navbar */
|
||||
/* .navbar, .navbar-start, .navbar-center, .navbar-end, */
|
||||
|
||||
/* Progress */
|
||||
/* .progress .progress-neutral .progress-primary .progress-secondary .progress-accent .progress-info .progress-success .progress-warning .progress-error */
|
||||
|
||||
/* Radial */
|
||||
/* .radial-progress */
|
||||
|
||||
/* Radio */
|
||||
/* .radio, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error, .radio-xs, .radio-sm, .radio-md, .radio-lg, */
|
||||
|
||||
|
||||
@@ -195,7 +195,7 @@ export const Editor = (p) => {
|
||||
})
|
||||
]),
|
||||
h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
||||
h("span", () => `${count()} caracteres`)
|
||||
h("span", () => `${count()}`)
|
||||
])
|
||||
])
|
||||
}
|
||||
@@ -5,4 +5,4 @@ export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
|
||||
export const isFn = f => typeof f === "function";
|
||||
export const filterBy = (items, query, field = 'label', q = String(query).toLowerCase()) => !query ? get(items) : get(items).filter(item => String(item && typeof item === 'object' ? item[field] : item).toLowerCase().includes(q));
|
||||
export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
|
||||
export const close = () => document.activeElement?.blur()
|
||||
export const hide = () => document.activeElement?.blur()
|
||||
41
sigpro-ui.js
41
sigpro-ui.js
@@ -1,6 +1,6 @@
|
||||
// All base components
|
||||
import { h, each, watch, when, mount, $ } from "sigpro";
|
||||
import { get, getBy, cls, isFn, filterBy, rand, close } from "./sigpro-helpers.js"
|
||||
import { get, getBy, cls, isFn, filterBy, rand, hide } from "./sigpro-helpers.js"
|
||||
|
||||
export const Accordion = (p) => {
|
||||
const name = p.name || rand('acc')
|
||||
@@ -13,7 +13,7 @@ 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 Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: 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) || '')
|
||||
@@ -25,7 +25,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
|
||||
query(display)
|
||||
if (isFn(value)) value(actual)
|
||||
onselect?.(item)
|
||||
close()
|
||||
hide()
|
||||
}
|
||||
|
||||
return Dropdown({ class: 'w-full' }, [
|
||||
@@ -171,8 +171,10 @@ export const Colorpicker = (p) => {
|
||||
h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
|
||||
p.label && h('span', {}, p.label)
|
||||
]),
|
||||
DropdownContent({ class: 'p-3 bg-base-100 rounded-box shadow-xl w-64' },
|
||||
ColorPalette({ value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c); } })
|
||||
DropdownContent({ class: 'p-0' },
|
||||
ColorPalette({
|
||||
value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c) }
|
||||
})
|
||||
)
|
||||
])
|
||||
}
|
||||
@@ -188,8 +190,14 @@ export const ColorPalette = (p) => {
|
||||
'#1e1b4b', '#312e81', '#4338ca', '#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#e0e7ff',
|
||||
'#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
|
||||
]
|
||||
const pick = (c) => isFn(p.value) ? p.value(c) : p.onchange?.(c)
|
||||
return h('div', { class: 'grid grid-cols-8 gap-1' },
|
||||
const pick = (c) => {
|
||||
isFn(p.value) ? p.value(c) : p.onchange?.(c)
|
||||
hide()
|
||||
}
|
||||
|
||||
return h('div', {
|
||||
class: cls('p-3 bg-base-100 rounded-box shadow w-64', p.class)
|
||||
}, h('div', { class: 'grid grid-cols-8 gap-1' },
|
||||
palette.map(c => h('button', {
|
||||
type: 'button',
|
||||
style: `background-color: ${c}`,
|
||||
@@ -197,10 +205,9 @@ export const ColorPalette = (p) => {
|
||||
const act = current().toLowerCase() === c.toLowerCase()
|
||||
return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? 'ring-2 ring-offset-1 ring-primary z-10 scale-110' : ''}`
|
||||
},
|
||||
onclick: () => { pick(c); close() }
|
||||
})
|
||||
)
|
||||
)
|
||||
onclick: () => { pick(c) }
|
||||
}))
|
||||
))
|
||||
}
|
||||
export const Datepicker = (p) => {
|
||||
const displayValue = $("")
|
||||
@@ -226,7 +233,7 @@ export const Datepicker = (p) => {
|
||||
const handleChange = (val) => {
|
||||
if (isFn(p.value)) p.value(val)
|
||||
else p.onChange?.(val)
|
||||
if (!rangeMode() || val?.end != null) close()
|
||||
if (!rangeMode() || val?.end != null) hide()
|
||||
}
|
||||
|
||||
return Dropdown({ class: cls('w-full', p.class) }, [
|
||||
@@ -251,7 +258,7 @@ export const Datepicker = (p) => {
|
||||
}
|
||||
}, h('span', { class: 'icon-[lucide--x] opacity-50' })) : null
|
||||
]),
|
||||
DropdownContent({ class: 'p-0 bg-base-100 rounded-box shadow-xl' },
|
||||
DropdownContent({ class: 'p-0' },
|
||||
Calendar({
|
||||
value: p.value,
|
||||
range: rangeMode(),
|
||||
@@ -305,7 +312,7 @@ export const Fileinput = (p) => {
|
||||
}, [
|
||||
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-sm opacity-70 truncate grow text-left' }, 'Drag and drop...'),
|
||||
h('span', { class: 'text-[10px] opacity-40 shrink-0' }, `Máx ${p.max || 2}MB`)
|
||||
]),
|
||||
h('input', {
|
||||
@@ -393,7 +400,7 @@ export const Modal = (p) => {
|
||||
watch(() => {
|
||||
const isOpen = get(p.open);
|
||||
if (!dialogRef) return;
|
||||
isOpen ? dialogRef.showModal() : dialogRef.close();
|
||||
isOpen ? dialogRef.showModal() : dialogRef.hide();
|
||||
});
|
||||
|
||||
const close = () => isFn(p.open) && p.open(false);
|
||||
@@ -419,7 +426,7 @@ export const Modal = (p) => {
|
||||
};
|
||||
export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
|
||||
export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
|
||||
export const Radial = (p, c) => h("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ''}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`)
|
||||
export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c)
|
||||
export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
|
||||
export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
|
||||
export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
|
||||
@@ -516,7 +523,7 @@ export const Tabs = (p, c) => {
|
||||
})
|
||||
}
|
||||
export const Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
|
||||
export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, c)
|
||||
export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, h('span', {}, c))
|
||||
export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
|
||||
export const Toast = (message, type = "alert-success", duration = 3500) => {
|
||||
let container = document.getElementById("sigpro-toast-container");
|
||||
|
||||
Reference in New Issue
Block a user