spicykatsu 0.0.53 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/SpicyAlert/SpicyAlert.css +1 -1
- package/dist/lib/SpicyAlert/SpicyAlert.js +37 -34
- package/dist/lib/SpicyDialog/SpicyDialog.css +1 -1
- package/dist/spicykatsu.umd.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/SpicyAlert.vue.d.ts +2 -0
- package/dist/types/components/SpicySheet.vue.d.ts +1 -1
- package/dist/types/components/SpicyTextArea.vue.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.spicyAlert{display:flex;align-items:center;
|
|
1
|
+
.spicyAlert{display:flex;align-items:center;gap:10px;padding:12px;border-radius:4px}.spicyAlert.info{background-color:#e0e0e0;color:#333}.spicyAlert.success{background-color:#a3ffb7;color:#155724}.spicyAlert.warning{background-color:#ffecaf;color:#856404}.spicyAlert.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{display:flex;flex-direction:column}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer;width:20px;height:20px}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { defineComponent as d, ref as p, watch as u, openBlock as t, createBlock as y, Transition as f, withCtx as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as d, ref as p, watch as u, openBlock as t, createBlock as y, Transition as f, withCtx as h, createElementBlock as s, normalizeClass as m, withKeys as k, toDisplayString as n, createCommentVNode as o, createElementVNode as a, renderSlot as v } from "vue";
|
|
2
|
+
const w = ["aria-label"], A = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "spicyAlertIcon"
|
|
5
|
-
},
|
|
5
|
+
}, _ = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "spicyAlertIcon",
|
|
8
8
|
viewBox: "0 0 24 24",
|
|
9
9
|
xmlns: "http://www.w3.org/2000/svg"
|
|
10
|
-
}, B = ["d"], C = {
|
|
11
|
-
key:
|
|
10
|
+
}, B = ["d"], C = { class: "spicyAlertContainer" }, b = {
|
|
11
|
+
key: 0,
|
|
12
12
|
class: "spicyAlertTitle"
|
|
13
|
-
}, b = {
|
|
14
|
-
key: 3,
|
|
15
|
-
class: "spicyAlertText"
|
|
16
13
|
}, g = {
|
|
14
|
+
key: 1,
|
|
15
|
+
class: "spicyAlertText"
|
|
16
|
+
}, I = {
|
|
17
17
|
key: 0,
|
|
18
18
|
viewBox: "0 0 24 24",
|
|
19
19
|
xmlns: "http://www.w3.org/2000/svg"
|
|
20
|
-
},
|
|
20
|
+
}, T = ["d"], O = { key: 1 }, V = /* @__PURE__ */ d({
|
|
21
21
|
__name: "SpicyAlert",
|
|
22
22
|
props: {
|
|
23
23
|
variant: { default: "info" },
|
|
@@ -28,54 +28,57 @@ const v = ["aria-label"], _ = {
|
|
|
28
28
|
iconOnly: { type: Boolean, default: !1 },
|
|
29
29
|
closable: { type: Boolean, default: !1 },
|
|
30
30
|
autoClose: { default: 0 },
|
|
31
|
-
closeIcon: {}
|
|
31
|
+
closeIcon: {},
|
|
32
|
+
isRound: { type: Boolean, default: !1 }
|
|
32
33
|
},
|
|
33
34
|
setup(r) {
|
|
34
|
-
const c = r,
|
|
35
|
-
|
|
35
|
+
const c = r, i = p(!0), l = () => {
|
|
36
|
+
i.value = !1;
|
|
36
37
|
};
|
|
37
38
|
return u(
|
|
38
39
|
() => c.autoClose,
|
|
39
40
|
(e) => {
|
|
40
41
|
e && e > 0 && setTimeout(() => {
|
|
41
|
-
|
|
42
|
+
l();
|
|
42
43
|
}, e);
|
|
43
44
|
}
|
|
44
|
-
), (e,
|
|
45
|
-
default:
|
|
46
|
-
|
|
45
|
+
), (e, R) => (t(), y(f, { name: "fade" }, {
|
|
46
|
+
default: h(() => [
|
|
47
|
+
i.value ? (t(), s("div", {
|
|
47
48
|
key: 0,
|
|
48
|
-
class:
|
|
49
|
+
class: m(["spicyAlert", [e.variant, { spicyAlertRound: e.isRound }]]),
|
|
49
50
|
"aria-atomic": "true",
|
|
50
51
|
"aria-label": e.text || "Alert",
|
|
51
52
|
role: "alert",
|
|
52
|
-
onKeydown: k(
|
|
53
|
+
onKeydown: k(l, ["enter"])
|
|
53
54
|
}, [
|
|
54
|
-
e.iconOnly && e.icon ? (t(),
|
|
55
|
-
e.mdi ? (t(),
|
|
56
|
-
|
|
55
|
+
e.iconOnly && e.icon ? (t(), s("span", A, n(e.icon), 1)) : o("", !0),
|
|
56
|
+
e.mdi ? (t(), s("svg", _, [
|
|
57
|
+
a("path", {
|
|
57
58
|
fill: "currentColor",
|
|
58
59
|
class: "spicyAlertMDI",
|
|
59
60
|
d: e.mdi
|
|
60
61
|
}, null, 8, B)
|
|
61
|
-
])) :
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
])) : o("", !0),
|
|
63
|
+
a("div", C, [
|
|
64
|
+
e.title ? (t(), s("span", b, n(e.title), 1)) : o("", !0),
|
|
65
|
+
!e.iconOnly && e.text ? (t(), s("span", g, n(e.text), 1)) : o("", !0)
|
|
66
|
+
]),
|
|
67
|
+
e.closable ? (t(), s("button", {
|
|
68
|
+
key: 2,
|
|
66
69
|
class: "spicyAlertCloseBtn",
|
|
67
|
-
onClick:
|
|
70
|
+
onClick: l,
|
|
68
71
|
"aria-label": "Close alert"
|
|
69
72
|
}, [
|
|
70
|
-
e.closeIcon ? (t(),
|
|
71
|
-
|
|
73
|
+
e.closeIcon ? (t(), s("svg", I, [
|
|
74
|
+
a("path", {
|
|
72
75
|
fill: "#000",
|
|
73
76
|
d: e.closeIcon
|
|
74
|
-
}, null, 8,
|
|
75
|
-
])) : (t(),
|
|
76
|
-
])) :
|
|
77
|
-
e.text ?
|
|
78
|
-
], 42,
|
|
77
|
+
}, null, 8, T)
|
|
78
|
+
])) : (t(), s("span", O, "X"))
|
|
79
|
+
])) : o("", !0),
|
|
80
|
+
e.text ? o("", !0) : v(e.$slots, "default", { key: 3 })
|
|
81
|
+
], 42, w)) : o("", !0)
|
|
79
82
|
]),
|
|
80
83
|
_: 3
|
|
81
84
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.spicyDialogOverlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:
|
|
1
|
+
.spicyDialogOverlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:2000}.spicyDialog{padding:16px;border-radius:8px;width:100%}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .3s ease}.dialog-fade-enter,.dialog-fade-leave-to{opacity:0}
|
package/dist/spicykatsu.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.SpicyKatsu={},f.Vue))})(this,function(f,e){"use strict";const U={class:"spicyAccordion"},x=["onClick","aria-expanded"],G={key:0,class:"accordionIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},J=["d"],Q={class:"spicyAccordionContent"},V=e.defineComponent({__name:"SpicyAccordion",props:{sections:{},singleOpen:{type:Boolean,default:!1},defaultOpen:{}},setup(r){const s=r,o=e.ref(s.defaultOpen||[]),n=l=>{if(s.singleOpen)o.value=o.value.includes(l)?[]:[l];else{const a=o.value.indexOf(l);a===-1?o.value.push(l):o.value.splice(a,1)}},t=l=>o.value.includes(l);return(l,a)=>(e.openBlock(),e.createElementBlock("div",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.sections,(d,m)=>(e.openBlock(),e.createElementBlock("div",{key:m,class:"spicyAccordionItem"},[e.createElementVNode("button",{class:e.normalizeClass(["spicyAccordionHeader",{open:t(m)}]),onClick:i=>n(m),"aria-expanded":t(m)},[e.createElementVNode("span",null,e.toDisplayString(d.title),1),d.icon?(e.openBlock(),e.createElementBlock("svg",G,[e.createElementVNode("path",{d:d.icon},null,8,J)])):e.createCommentVNode("",!0),a[0]||(a[0]=e.createElementVNode("span",{class:"accordionToggle"},[e.createElementVNode("svg",{class:"accordionArrow",viewBox:"0 0 24 24"},[e.createElementVNode("path",{d:"M7 10l5 5 5-5H7z"})])],-1))],10,x),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",Q,[e.renderSlot(l.$slots,`section-${m}`)],512),[[e.vShow,t(m)]])]),_:2},1024)]))),128))]))}}),Z=["aria-label"],v={key:0,class:"spicyAlertIcon"},ee={key:1,class:"spicyAlertIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},te=["d"],oe={key:2,class:"spicyAlertTitle"},le={key:3,class:"spicyAlertText"},ne={key:0,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},ae=["d"],se={key:1},_=e.defineComponent({__name:"SpicyAlert",props:{variant:{default:"info"},title:{},text:{},icon:{},mdi:{},iconOnly:{type:Boolean,default:!1},closable:{type:Boolean,default:!1},autoClose:{default:0},closeIcon:{}},setup(r){const s=r,o=e.ref(!0),n=()=>{o.value=!1};return e.watch(()=>s.autoClose,t=>{t&&t>0&&setTimeout(()=>{n()},t)}),(t,l)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyAlert",t.variant]),"aria-atomic":"true","aria-label":t.text||"Alert",role:"alert",onKeydown:e.withKeys(n,["enter"])},[t.iconOnly&&t.icon?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.mdi?(e.openBlock(),e.createElementBlock("svg",ee,[e.createElementVNode("path",{fill:"currentColor",class:"spicyAlertMDI",d:t.mdi},null,8,te)])):e.createCommentVNode("",!0),t.title?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.closable?(e.openBlock(),e.createElementBlock("button",{key:4,class:"spicyAlertCloseBtn",onClick:n,"aria-label":"Close alert"},[t.closeIcon?(e.openBlock(),e.createElementBlock("svg",ne,[e.createElementVNode("path",{fill:"#000",d:t.closeIcon},null,8,ae)])):(e.openBlock(),e.createElementBlock("span",se,"X"))])):e.createCommentVNode("",!0),t.text?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:5})],42,Z)):e.createCommentVNode("",!0)]),_:3}))}}),ie=["disabled","aria-label","aria-disabled","tabindex"],re={key:0,class:"spicyBtnIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},ce=["d"],de={key:1,class:"spicyBtnIcon"},pe={key:2,class:"spicyBtnText"},N=e.defineComponent({__name:"SpicyBtn",props:{variant:{default:"filled"},disabled:{type:Boolean,default:!1},text:{},icon:{},mdi:{},size:{},bgColor:{},textColor:{default:"#ddd"},hoverColor:{},borderColor:{},fontSize:{default:16},fontWeight:{default:500}},emits:["click"],setup(r,{emit:s}){const o=s,n=()=>{t.disabled||o("click")},t=r,l=e.computed(()=>({"--skFontSize":typeof t.fontSize=="number"?`${t.fontSize}px`:t.fontSize,"--skFontWeight":t.fontWeight,"--skBgColor":t.bgColor,"--skTextColor":t.textColor,"--skBorderColor":t.borderColor,"--hoverColor":t.hoverColor})),a=e.computed(()=>!t.text&&(t.icon||t.mdi)),d=e.computed(()=>({spicyBtn:!0,outlined:t.variant==="outlined",disabled:t.disabled,isRound:a.value,large:t.size==="large"}));return(m,i)=>{const p=e.resolveDirective("spicyRipple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(d.value),style:e.normalizeStyle(l.value),disabled:m.disabled,onClick:n,role:"button","aria-label":m.text,"aria-disabled":m.disabled,tabindex:m.disabled?-1:0},[m.mdi?(e.openBlock(),e.createElementBlock("svg",re,[e.createElementVNode("path",{fill:"currentColor",class:"spicyBtnMDI",d:m.mdi},null,8,ce)])):e.createCommentVNode("",!0),m.icon&&!m.mdi?(e.openBlock(),e.createElementBlock("span",de,e.toDisplayString(m.icon),1)):e.createCommentVNode("",!0),m.text?(e.openBlock(),e.createElementBlock("span",pe,e.toDisplayString(m.text),1)):e.createCommentVNode("",!0),e.renderSlot(m.$slots,"default")],14,ie)),[[p]])}}}),me=["aria-label"],ye={class:"spicyCarouselInfoText"},fe={class:"spicyCarouselTitle"},ue={key:0},he={key:0,class:"spicyCarouselNavControls"},ke={key:1,class:"spicyCarouselPagination"},ge=["onClick"],Be={class:"spicyCarouselPage"},T=e.defineComponent({__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{default:"var(--skPrimaryColor)"},loop:{type:Boolean,default:!0},initialSlide:{default:0},slides:{default:()=>[]},width:{default:"580px"},height:{default:"360px"},fullScreen:{type:Boolean,default:!1},enableImageClick:{type:Boolean,default:!1},paginationLimit:{default:10}},setup(r){let s,o,n=!1;const t=r,l=e.computed(()=>({"--width":t.width,"--height":t.height,"--activeColor":t.activeColor})),a=e.computed(()=>t.paginationLimit),d=e.computed(()=>{var g;return(g=t.slides[i.value])==null?void 0:g.title}),m=e.computed(()=>p.value.fullScreen===!1?!1:t.fullScreen),i=e.ref(t.initialSlide),p=e.computed(()=>t.slides[i.value]);let y;const k=()=>{i.value=(i.value-1+t.slides.length)%t.slides.length},u=()=>{i.value=(i.value+1)%t.slides.length},c=g=>{i.value=g},h=()=>{y&&clearInterval(y)},B=()=>{t.autoplay&&(y=window.setInterval(u,t.autoplaySpeed))},C=()=>{window.open(p.value.img)},w=()=>{t.enableImageClick&&C()},q=g=>{s=g.touches[0].clientX,o=g.touches[0].clientY,n=!1},E=g=>{if(!n){const S=g.touches[0].clientX-s,b=g.touches[0].clientY-o;Math.abs(S)>Math.abs(b)&&(S>40?(k(),n=!0):S<-40&&(u(),n=!0))}},gt=e.computed(()=>{const g=t.slides.length,S=Math.max(0,i.value-Math.floor(a.value/2)),b=Math.min(g,S+a.value);return[...Array(g).keys()].slice(S,b)});return e.onMounted(()=>{B()}),e.onUnmounted(()=>{h()}),(g,S)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyCarouselWrapper",style:e.normalizeStyle({...l.value})},[e.createElementVNode("div",{class:"spicyCarouselContainer",onMouseenter:h,onMouseleave:B,onTouchstart:q,onTouchmove:E},[e.createVNode(e.Transition,{name:"slide",mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyCarouselSlide",{pointCursor:t.enableImageClick}]),key:i.value,style:e.normalizeStyle({backgroundImage:`url(${p.value.img})`}),onClick:w},[g.slides[i.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyCarouselTextOverlay",{fullScreen:m.value}]),"aria-label":g.slides[i.value].text},[e.createElementVNode("span",ye,e.toDisplayString(g.slides[i.value].text),1)],10,me)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],6))]),_:3})],32),e.createElementVNode("div",fe,[d.value?(e.openBlock(),e.createElementBlock("h2",ue,e.toDisplayString(p.value.title),1)):e.createCommentVNode("",!0)]),g.showNavigation?(e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:k},S[0]||(S[0]=[e.createElementVNode("span",{class:"spicyCarouselPrevBtnIcon"},"<",-1)])),e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:u},S[1]||(S[1]=[e.createElementVNode("span",{class:"spicyCarouselNextBtnIcon"},">",-1)]))])):e.createCommentVNode("",!0),g.showPagination?(e.openBlock(),e.createElementBlock("div",ke,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(gt.value,b=>(e.openBlock(),e.createElementBlock("button",{key:b,onClick:St=>c(b),class:e.normalizeClass(["spicyCarouselPageBtn",{active:b===i.value}])},[e.createElementVNode("span",Be,e.toDisplayString(b+1),1)],10,ge))),128))])):e.createCommentVNode("",!0)],4))}}),D=e.defineComponent({__name:"SpicyDialog",props:{modelValue:Boolean,persistent:Boolean,maxWidth:{type:String,default:"500px"},color:{type:String,default:"rgba(0, 0, 0, 0.5)"}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=s,t=()=>{n("update:modelValue",!1)},l=()=>{o.persistent||t()},a=d=>{d.key==="Escape"&&!o.persistent&&t()};return e.watch(()=>o.modelValue,d=>{d?window.addEventListener("keydown",a):window.removeEventListener("keydown",a)}),(d,m)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"dialog-fade"},{default:e.withCtx(()=>[r.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyDialogOverlay",style:e.normalizeStyle({backgroundColor:r.color}),onClick:l},[e.createElementVNode("div",{class:"spicyDialog",style:e.normalizeStyle({maxWidth:r.maxWidth}),onClick:m[0]||(m[0]=e.withModifiers(()=>{},["stop"]))},[e.renderSlot(d.$slots,"default")],4)],4)):e.createCommentVNode("",!0)]),_:3})]))}}),Ce=["aria-orientation"],I=e.defineComponent({__name:"SpicyDivider",props:{variant:{default:"solid"},orientation:{default:"horizontal"},length:{default:"100%"},size:{default:"1px"},color:{default:"#5f5f5f"}},setup(r){const s=r,o=e.computed(()=>s.orientation==="vertical"?"vertical":"horizontal"),n=e.computed(()=>({[s.orientation==="vertical"?"height":"width"]:s.length,border:`${s.size} ${s.variant} ${s.color}`,borderLeft:s.orientation==="vertical"?`${s.size} ${s.variant} ${s.color}`:"none",borderBottom:s.orientation==="horizontal"?`${s.size} ${s.variant} ${s.color}`:"none"}));return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyDivider",o.value]),style:e.normalizeStyle(n.value),role:"separator","aria-orientation":t.orientation},[e.renderSlot(t.$slots,"default")],14,Ce))}}),Se=["aria-expanded"],be=["width","height"],Ee=["d"],we=["width","height"],z=e.defineComponent({__name:"SpicyDropdown",props:{label:{},align:{default:"left"},width:{default:"200px"},icon:{default:""},iconSize:{default:"24px"}},setup(r){const s=r,o=e.ref(!1),n=()=>{o.value=!o.value},t=e.computed(()=>s.icon||""),l=e.computed(()=>({width:s.width,[s.align==="right"?"right":"left"]:0,textAlign:s.align}));return(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyDropdown",{open:o.value}])},[e.createElementVNode("button",{onClick:n,class:"spicyDropdownButton","aria-haspopup":"true","aria-expanded":o.value,"aria-controls":"spicyDropdownMenu"},[t.value?(e.openBlock(),e.createElementBlock("svg",{key:0,width:a.iconSize,height:a.iconSize,viewBox:"0 0 24 24",class:"dropdownIcon"},[e.createElementVNode("path",{d:t.value},null,8,Ee)],8,be)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(a.label)+" ",1),t.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",{key:1,width:a.iconSize,height:a.iconSize,viewBox:"0 0 24 24",class:e.normalizeClass(["arrow",{open:o.value}])},d[1]||(d[1]=[e.createElementVNode("path",{d:"M7 10l5 5 5-5H7z"},null,-1)]),10,we))],8,Se),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyDropdownMenu",style:e.normalizeStyle(l.value),onClick:d[0]||(d[0]=e.withModifiers(m=>o.value=!1,["self"])),id:"spicyDropdownMenu"},[e.renderSlot(a.$slots,"default")],4)):e.createCommentVNode("",!0)]),_:3})],2))}}),$e=["aria-label"],Ve=["multiple","accept"],_e={key:1,class:"spicyFilePreview"},Ne=["onClick"],Te=["onClick"],De=["d"],Ie={key:3,class:"spicyFileInputError"},L=e.defineComponent({__name:"SpicyFileInput",props:{modelValue:{default:()=>[]},label:{default:""},error:{default:""},accept:{default:""},multiple:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},mdi:{default:""}},emits:["update:modelValue","change","error"],setup(r,{emit:s}){const o=s,n=r,t=e.ref(n.modelValue),l=e.ref(null),a=e.ref(!1),d=c=>{const h=c.target;h.files&&(t.value=Array.from(h.files),o("update:modelValue",t.value),o("change",t.value))},m=()=>{t.value=[],o("update:modelValue",t.value),l.value&&(l.value.value="")},i=c=>{t.value.splice(c,1),o("update:modelValue",t.value),t.value.length===0&&l.value&&(l.value.value="")},p=()=>{var c;(c=l.value)==null||c.click()},y=()=>{a.value=!0},k=()=>{a.value=!1},u=c=>{var B;const h=(B=c.dataTransfer)==null?void 0:B.files;if(h){const C=Array.from(h).filter(w=>n.accept?n.accept.split(",").map(E=>E.trim()).some(E=>E.startsWith(".")?w.name.endsWith(E):w.type===E):!0);!n.multiple&&C.length>0?t.value=[C[0]]:t.value=C,o("update:modelValue",t.value),o("change",t.value)}a.value=!1};return(c,h)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyFileInputWrapper",{hasError:c.error,isDragging:a.value}]),onClick:p,onDragover:e.withModifiers(y,["prevent"]),onDragleave:e.withModifiers(k,["prevent"]),onDrop:e.withModifiers(u,["prevent"])},[c.label&&!t.value.length?(e.openBlock(),e.createElementBlock("label",{key:0,class:"spicyFileInputLabel","aria-label":c.label},e.toDisplayString(c.label),9,$e)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:"file",multiple:c.multiple,accept:c.accept,class:"spicyFileInput",onChange:d,ref_key:"fileInput",ref:l},null,40,Ve),t.value.length?(e.openBlock(),e.createElementBlock("div",_e,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(B,C)=>(e.openBlock(),e.createElementBlock("div",{key:C,class:"spicyFilePreviewItem"},[e.createElementVNode("span",null,e.toDisplayString(B.name),1),c.clearable&&!c.mdi?(e.openBlock(),e.createElementBlock("button",{key:0,class:"removeButton",onClick:e.withModifiers(w=>i(C),["stop"]),"aria-label":"Remove"}," X ",8,Ne)):e.createCommentVNode("",!0),c.clearable&&c.mdi?(e.openBlock(),e.createElementBlock("svg",{key:1,class:"removeButtonMDI",onClick:e.withModifiers(w=>i(C),["stop"]),"aria-label":"Remove",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{fill:"red",d:c.mdi},null,8,De)],8,Te)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0),c.clearable&&t.value.length>1?(e.openBlock(),e.createElementBlock("button",{key:2,class:"clearAllButton",onClick:e.withModifiers(m,["stop"]),"aria-label":"Clear All"}," Clear All ")):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default"),c.error?(e.openBlock(),e.createElementBlock("span",Ie,e.toDisplayString(c.error),1)):e.createCommentVNode("",!0)],34))}}),ze={class:"spicyModalHeader"},Le={class:"spicyModalActions"},Me=["onClick"],M=e.defineComponent({__name:"SpicyModal",props:{width:{default:"400px"},height:{default:"auto"},borderRadius:{default:"6px"},bgColor:{default:""},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!0},actions:{default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{default:""},textColor:{default:""}},emits:["update:visible","close","action-clicked"],setup(r,{emit:s}){const o=r,n=s,t=e.computed(()=>({"--width":o.width,"--height":o.height,"--skBorderRadius":o.borderRadius,"--skBgColor":o.bgColor,"--skTextColor":o.textColor})),l=()=>{n("update:visible",!1),n("close")},a=p=>{typeof p.handler=="function"&&p.handler(),n("action-clicked",p)},d=p=>{const y=p.target;o.closeOnClick&&y.classList.contains("spicyModalOverlay")&&l()},m=()=>{document.body.style.overflow="hidden"},i=()=>{document.body.style.overflow=""};return e.onMounted(()=>{o.visible&&m()}),e.onBeforeUnmount(()=>{i()}),e.watch(()=>o.visible,p=>{p?m():i()}),(p,y)=>p.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:d,"aria-modal":"true",role:"dialog"},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...t.value}),onKeydown:e.withKeys(l,["esc"])},[e.createElementVNode("header",ze,[e.renderSlot(p.$slots,"spicyModalHeader",{title:p.modalTitle,ariaLabel:p.modalTitle},()=>[e.createTextVNode(e.toDisplayString(p.modalTitle),1)])]),e.renderSlot(p.$slots,"default"),e.createElementVNode("div",Le,[e.renderSlot(p.$slots,"spicyModalActions"),p.actions.length===0&&p.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:l},[e.renderSlot(p.$slots,"closeBtn",{},()=>[y[0]||(y[0]=e.createTextVNode("Close"))])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.actions,k=>(e.openBlock(),e.createElementBlock("button",{key:k.label,class:"spicyModalExtraBtn spicyModalActionBtn",onClick:u=>a(k)},e.toDisplayString(k.label),9,Me))),128))])],36)])):e.createCommentVNode("",!0)}}),Fe={key:0,class:"spicyProgress"},Ae={key:0,class:"spicyProgressLabel"},Pe={key:1,class:"spicyProgressCircular"},Oe=["width","height"],Re=["stroke-width","r","cx","cy"],We=["stroke","stroke-width","r","cx","cy"],Xe={key:0,class:"spicyCircularLabel"},F=e.defineComponent({__name:"SpicyProgress",props:{value:{},max:{default:100},color:{default:"#4caf50"},height:{default:"8px"},strokeWidth:{default:8},type:{default:"linear"},showLabel:{type:Boolean,default:!1},size:{default:100}},setup(r){const s=r,o=e.computed(()=>Math.round(s.value/s.max*100)),n=e.computed(()=>s.type==="linear"),t=e.computed(()=>({width:`${o.value}%`,backgroundColor:s.color,height:s.height})),l=e.computed(()=>s.size/2),a=e.computed(()=>(s.size-s.strokeWidth)/2),d=e.computed(()=>2*Math.PI*a.value),m=e.computed(()=>({strokeDasharray:`${d.value} ${d.value}`,strokeDashoffset:`${d.value-o.value/100*d.value}`,transition:"stroke-dashoffset 400ms ease"}));return(i,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.value?(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("div",{class:"spicyProgressBar",style:e.normalizeStyle(t.value)},null,4),i.showLabel?(e.openBlock(),e.createElementBlock("div",Ae,e.toDisplayString(o.value)+"%",1)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",Pe,[(e.openBlock(),e.createElementBlock("svg",{class:"spicyCircularSvg",width:i.size,height:i.size},[e.createElementVNode("circle",{class:"spicyCircularTrack","stroke-width":i.strokeWidth,r:a.value,cx:l.value,cy:l.value},null,8,Re),e.createElementVNode("circle",{class:"spicyCircularProgress",stroke:i.color,"stroke-width":i.strokeWidth,r:a.value,cx:l.value,cy:l.value,style:e.normalizeStyle(m.value)},null,12,We)],8,Oe)),i.showLabel?(e.openBlock(),e.createElementBlock("div",Xe,e.toDisplayString(o.value)+"%",1)):e.createCommentVNode("",!0)])),e.renderSlot(i.$slots,"default")],64))}}),A=e.defineComponent({__name:"SpicySheet",props:{isRound:{type:Boolean,default:!1},color:{default:"var(--skBgColor)"},flex:{type:Boolean,default:!0}},setup(r){const s=r,o=e.computed(()=>({backgroundColor:s.color}));return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicySheet",{isRound:n.isRound,flex:n.flex}]),style:e.normalizeStyle(o.value)},[e.renderSlot(n.$slots,"default")],6))}}),Ye={class:"spicySlider"},He=["aria-label"],Ke=["min","max","step","aria-valuenow","aria-valuemin","aria-valuemax"],P=e.defineComponent({__name:"SpicySlider",props:{min:{default:0},max:{default:100},step:{default:1},label:{default:""},modelValue:{default:0}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=s,t=e.computed({get:()=>Number(o.modelValue),set:l=>n("update:modelValue",l)});return(l,a)=>(e.openBlock(),e.createElementBlock("div",Ye,[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:"spicySliderLabel","aria-label":l.label},e.toDisplayString(l.label),9,He)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{name:"spicySliderInput",class:"spicySliderInput",type:"range",min:l.min,max:l.max,step:l.step,"onUpdate:modelValue":a[0]||(a[0]=d=>t.value=d),"aria-valuenow":t.value,"aria-valuemin":l.min,"aria-valuemax":l.max},null,8,Ke),[[e.vModelText,t.value]]),e.renderSlot(l.$slots,"default")]))}}),je={class:e.normalizeClass(["spicyTabs"])},qe={class:"spicyTabsHeader"},Ue=["onClick"],xe={key:0,class:"spicyTabsContent"},O=e.defineComponent({__name:"SpicyTabs",props:{visibleTabs:{default:8},useScrollButtons:{type:Boolean,default:!0},tabs:{}},setup(r){var u;const s=r,o=e.ref(((u=s.tabs[0])==null?void 0:u.name)||""),n=e.ref(null),t=e.ref(!1),l=e.ref(!1),a=()=>{if(n.value){const{scrollLeft:c,scrollWidth:h,clientWidth:B}=n.value;t.value=c>0,l.value=h>B+c}},d=c=>{o.value=c},m=e.computed(()=>{var c;return(c=s.tabs.find(h=>h.name===o.value))==null?void 0:c.name}),i=c=>{if(n.value){const h=c==="left"?-200:200;n.value.scrollBy({left:h,behavior:"smooth"})}},p=()=>{i("left"),a()},y=()=>{i("right"),a()},k=c=>{n.value&&(c.preventDefault(),n.value.scrollLeft+=c.deltaY,a())};return e.onMounted(()=>{a(),window.addEventListener("resize",a)}),e.onUnmounted(()=>{window.removeEventListener("resize",a)}),e.watch(()=>{var c;return(c=n.value)==null?void 0:c.scrollLeft},a),(c,h)=>(e.openBlock(),e.createElementBlock("div",je,[e.createElementVNode("div",qe,[t.value&&c.useScrollButtons?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyOverflowButton left",onClick:p}," ‹ ")):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"tabsWrapperRef",ref:n,class:"tabsWrapper",onWheel:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.tabs,B=>(e.openBlock(),e.createElementBlock("button",{key:B.name,class:e.normalizeClass(["spicyTabButton",{active:o.value===B.name}]),onClick:C=>d(B.name)},e.toDisplayString(B.label),11,Ue))),128))],544),l.value&&c.useScrollButtons?(e.openBlock(),e.createElementBlock("button",{key:1,class:"spicyOverflowButton right",onClick:y}," › ")):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",xe,[e.renderSlot(c.$slots,m.value)])):e.createCommentVNode("",!0)]),_:3})]))}}),Ge=["value","name"],R=e.defineComponent({__name:"SpicyTextArea",props:{border:{default:"1px solid var(--skBorderColor, #515353)"},isRound:{type:Boolean,default:!1},padding:{default:"8px"},color:{default:"#4e4e4e"},modelValue:{default:""},name:{default:""}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=e.computed(()=>({borderRadius:o.isRound?"16px":"2px",border:o.border,padding:o.padding,backgroundColor:o.color})),t=s,l=a=>{t("update:modelValue",a.target.value)};return(a,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("textarea",e.mergeProps({class:"SpicyTextArea",value:a.modelValue,onInput:l,name:a.name,style:n.value},a.$attrs),null,16,Ge),e.renderSlot(a.$slots,"default")],64))}}),Je=["aria-label"],Qe={class:"spicyInputContainer"},Ze={key:0,class:"spicyInputPrefix"},ve=["placeholder","autofocus","aria-label","aria-invalid","aria-describedby"],et=["id"],W=e.defineComponent({__name:"SpicyTextField",props:{modelValue:{default:""},placeholder:{default:""},label:{default:""},error:{default:""},variant:{default:"outlined"},prefix:{default:""},autofocus:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1}},emits:["update:modelValue","input","blur","focus"],setup(r,{emit:s}){const o=s,n=r,t=e.ref(n.modelValue),l=e.ref(!1),a=e.computed(()=>n.error?"spicyInputError":void 0);e.watch(()=>n.modelValue,y=>{t.value=y}),e.onMounted(()=>{if(n.autofocus){const y=document.querySelector('input[name="spicyInput"]');y==null||y.focus()}});const d=y=>{const k=y.target;t.value=k.value,o("update:modelValue",t.value),o("input",t.value)},m=()=>{l.value=!1,o("blur")},i=()=>{l.value=!0,o("focus")},p=()=>{t.value="",o("update:modelValue",t.value)};return(y,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[y.variant,{hasValue:t.value,hasFocus:l.value,hasError:y.error}]])},[e.createElementVNode("label",{class:"spicyInputLabel","aria-label":y.label},e.toDisplayString(y.label),9,Je),e.createElementVNode("div",Qe,[y.prefix?(e.openBlock(),e.createElementBlock("span",Ze,e.toDisplayString(y.prefix),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{type:"text",name:"spicyInput",class:e.normalizeClass(["spicyInput",y.variant]),"onUpdate:modelValue":k[0]||(k[0]=u=>t.value=u),placeholder:y.placeholder,autofocus:y.autofocus,onInput:d,onBlur:m,onFocus:i,"aria-label":y.label,"aria-invalid":!!y.error,"aria-describedby":a.value,ref:"input"},null,42,ve),[[e.vModelText,t.value]]),y.clearable&&t.value?(e.openBlock(),e.createElementBlock("button",{key:1,class:"clearButton",onClick:p},"X")):e.createCommentVNode("",!0)]),e.renderSlot(y.$slots,"default"),y.error?(e.openBlock(),e.createElementBlock("span",{key:0,id:a.value,class:"spicyInputError"},e.toDisplayString(y.error),9,et)):e.createCommentVNode("",!0)],2))}}),tt=["for"],ot=["id","tabindex","aria-label","aria-checked","aria-disabled","onKeydown"],X=e.defineComponent({__name:"SpicyToggle",props:{modelValue:{type:Boolean,default:!1},label:{default:""},variant:{default:"filled"},borderColor:{default:""},activeColor:{default:""},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(r,{emit:s}){const o=e.computed(()=>`${n.label||"toggle"}_spicyToggle`),n=r,t=e.computed(()=>({"--skBorderColor":n.borderColor,"--activeColor":n.activeColor})),l=s,a=()=>{n.disabled||l("update:modelValue",!n.modelValue)};return(d,m)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["spicyToggleLabel",{disabled:d.disabled}]),for:`${d.label||"toggle"}_spicyToggle`},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),e.createElementVNode("div",e.mergeProps({class:["spicyToggle",{outlined:d.variant==="outlined",isActive:d.modelValue}],id:o.value,tabindex:d.disabled?-1:0,role:"switch",style:{...t.value},"aria-label":d.label||"Toggle Switch","aria-checked":d.modelValue,"aria-disabled":d.disabled,onClick:a,onKeydown:[e.withKeys(e.withModifiers(a,["prevent"]),["space"]),e.withKeys(e.withModifiers(a,["prevent"]),["enter"])]},d.$attrs),m[0]||(m[0]=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)]),16,ot)],10,tt))}}),lt=["aria-hidden"],nt={key:0,class:"spicyTooltipIcon"},at=["aria-label"],st={key:2,class:"spicyTooltipIcon"},Y=e.defineComponent({__name:"SpicyTooltip",props:{text:{default:""},prependIcon:{default:""},appendIcon:{default:""},position:{default:"top"}},setup(r){const s=r,o=e.ref(!1),n=e.ref(null),t=e.reactive({position:"fixed",top:"0px",left:"0px",maxWidth:"175px"}),l=i=>{const p=i.right-window.innerWidth;p>0&&(t.left=`${parseInt(t.left)-p-5}px`),i.left<0&&(t.left="5px")},a={top:(i,p)=>{t.left=`${i.left+(i.width-p.width)/2}px`,t.top=`${i.top-p.height-5}px`},bottom:(i,p)=>{t.left=`${i.left+(i.width-p.width)/2}px`,t.top=`${i.bottom+5}px`},left:(i,p)=>{t.left=`${i.left-p.width-5}px`,t.top=`${i.top+(i.height-p.height)/2}px`},right:(i,p)=>{t.left=`${i.right+5}px`,t.top=`${i.top+(i.height-p.height)/2}px`}},d=()=>{o.value=!0,e.nextTick(()=>{if(n.value&&o.value){const i=n.value.getBoundingClientRect(),p=n.value.querySelector(".spicyTooltip");if(p){const y=p.getBoundingClientRect(),k=a[s.position];k(i,y),l(y)}}})},m=()=>{o.value=!1};return(i,p)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:d,onMouseleave:m,ref_key:"host",ref:n},[e.renderSlot(i.$slots,"default"),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(t),role:"tooltip","aria-hidden":!o.value},[i.prependIcon?(e.openBlock(),e.createElementBlock("span",nt,e.toDisplayString(i.prependIcon),1)):e.createCommentVNode("",!0),i.text?(e.openBlock(),e.createElementBlock("span",{key:1,class:"spicyTooltipText","aria-label":i.text},e.toDisplayString(i.text),9,at)):e.createCommentVNode("",!0),i.appendIcon?(e.openBlock(),e.createElementBlock("span",st,e.toDisplayString(i.appendIcon),1)):e.createCommentVNode("",!0)],12,lt)):e.createCommentVNode("",!0)],544))}}),it=["aria-expanded"],rt={key:0,class:"spicyToggleIcon"},ct=["width","height"],dt=["d"],pt={key:1,role:"group"},$=e.defineComponent({__name:"SpicyTreeNode",props:{node:{}},setup(r){const s=r,o=e.ref(!1),n=e.computed(()=>s.node.children&&s.node.children.length>0),t=()=>{n.value&&(o.value=!o.value)};return(l,a)=>{const d=e.resolveComponent("SpicyTreeNode",!0);return e.openBlock(),e.createElementBlock("li",{class:"spicyTreeNodeItem",role:"treeitem","aria-expanded":o.value},[e.createElementVNode("div",{onClick:t,style:{cursor:"pointer"}},[e.createElementVNode("span",null,e.toDisplayString(l.node.label),1),n.value?(e.openBlock(),e.createElementBlock("span",rt,e.toDisplayString(o.value?"-":"+"),1)):e.createCommentVNode("",!0)]),l.node.icon?(e.openBlock(),e.createElementBlock("svg",{key:0,width:l.node.iconSize,height:l.node.iconSize,class:"spicyTreeNodeIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:l.node.icon},null,8,dt)],8,ct)):e.createCommentVNode("",!0),o.value&&l.node.children?(e.openBlock(),e.createElementBlock("ul",pt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.node.children,m=>(e.openBlock(),e.createBlock(d,{key:m.id,node:m},null,8,["node"]))),128))])):e.createCommentVNode("",!0)],8,it)}}}),mt={class:"spicyTree"},yt={role:"tree"},H=e.defineComponent({__name:"SpicyTree",props:{nodes:{}},setup(r){return(s,o)=>(e.openBlock(),e.createElementBlock("div",mt,[e.createElementVNode("ul",yt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.nodes,n=>(e.openBlock(),e.createBlock($,{class:"spicyTreeNode",key:n.id,node:n},null,8,["node"]))),128))])]))}}),K={mounted(r,s){const{axis:o}=s.value||{};r.style.position="relative",r.style.cursor="move";let n,t;const l=(u,c)=>{const h=r.getBoundingClientRect();let B=u-n,C=c-t;o!=="y"&&(r.style.left=`${B-h.left+parseFloat(getComputedStyle(r).left||"0")}px`),o!=="x"&&(r.style.top=`${C-h.top+parseFloat(getComputedStyle(r).top||"0")}px`)},a=u=>{l(u.pageX,u.pageY)};let d=!1;const m=u=>{const c=u.touches[0];c&&(d=!0,l(c.pageX,c.pageY),u.preventDefault())},i=()=>{document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",i),d&&(d=!1)},p=u=>{const c=r.getBoundingClientRect();n=u.pageX-c.left,t=u.pageY-c.top,document.addEventListener("mousemove",a),document.addEventListener("mouseup",i)},y=u=>{if(u.touches.length!==1)return;const c=u.touches[0];if(!c)return;const h=r.getBoundingClientRect();n=c.pageX-h.left,t=c.pageY-h.top,d=!1,document.addEventListener("touchmove",m),document.addEventListener("touchend",i),u.preventDefault()};r.addEventListener("mousedown",p),r.addEventListener("touchstart",y);const k=r;k._cleanup=()=>{k.removeEventListener("mousedown",p),k.removeEventListener("touchstart",y),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",i)}},unmounted(r){const s=r;s._cleanup&&s._cleanup()}},j={beforeMount(r){r.style.position="relative",r.style.overflow="hidden";const s=(n,t)=>{const l=document.createElement("span"),a=Math.max(r.clientWidth,r.clientHeight),d=a/2;l.style.width=l.style.height=`${a}px`,l.style.left=`${n-r.getBoundingClientRect().left-d}px`,l.style.top=`${t-r.getBoundingClientRect().top-d}px`,l.classList.add("spicyRipple");const m=r.querySelector(".spicyRipple");m&&m.remove(),r.appendChild(l),l.addEventListener("animationend",()=>{l.remove()})},o=n=>{let t=0,l=0;if(n instanceof MouseEvent)t=n.clientX,l=n.clientY;else if(n instanceof TouchEvent){const a=n.touches[0];t=a.clientX,l=a.clientY}s(t,l)};r.addEventListener("click",n=>{requestAnimationFrame(()=>o(n))}),r.addEventListener("touchstart",n=>{requestAnimationFrame(()=>o(n))})}},ft={SpicyAccordion:V,SpicyAlert:_,SpicyBtn:N,SpicyCarousel:T,SpicyDialog:D,SpicyDivider:I,SpicyDropdown:z,SpicyFileInput:L,SpicyModal:M,SpicyProgress:F,SpicySheet:A,SpicySlider:P,SpicyTabs:O,SpicyTextArea:R,SpicyTextField:W,SpicyToggle:X,SpicyTooltip:Y,SpicyTree:H,SpicyTreeNode:$},ut={install(r,s={}){const{useComponents:o=!0,useStyles:n=!0,useDirectives:t=!0}=s;o&&Object.entries(ft).forEach(([l,a])=>{r.component(l,a)}),n&&Promise.resolve().then(()=>ht).then(l=>{const a=document.createElement("style");a.id="SpicyStyles",a.textContent=l.default,document.head.appendChild(a)}),t&&(r.directive("spicyDrag",K),r.directive("spicyRipple",j),Promise.resolve().then(()=>kt).then(l=>{const a=document.createElement("style");a.id="SpicyRippleStyles",a.textContent=l.default,document.head.appendChild(a)}))}},ht=Object.freeze(Object.defineProperty({__proto__:null,default:':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 1rem;--skFontWeight: 500;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skPrimaryColor)}.spicyLink:disabled{opacity:var(--disabledOpacity)}'},Symbol.toStringTag,{value:"Module"})),kt=Object.freeze(Object.defineProperty({__proto__:null,default:".spicyRipple{position:absolute;border-radius:50%;background:currentColor;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}"},Symbol.toStringTag,{value:"Module"}));f.SpicyAccordion=V,f.SpicyAlert=_,f.SpicyBtn=N,f.SpicyCarousel=T,f.SpicyDialog=D,f.SpicyDivider=I,f.SpicyDropdown=z,f.SpicyFileInput=L,f.SpicyKatsu=ut,f.SpicyModal=M,f.SpicyProgress=F,f.SpicySheet=A,f.SpicySlider=P,f.SpicyTabs=O,f.SpicyTextArea=R,f.SpicyTextField=W,f.SpicyToggle=X,f.SpicyTooltip=Y,f.SpicyTree=H,f.SpicyTreeNode=$,f.spicyDrag=K,f.spicyRipple=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.SpicyKatsu={},f.Vue))})(this,function(f,e){"use strict";const U={class:"spicyAccordion"},x=["onClick","aria-expanded"],G={key:0,class:"accordionIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},J=["d"],Q={class:"spicyAccordionContent"},V=e.defineComponent({__name:"SpicyAccordion",props:{sections:{},singleOpen:{type:Boolean,default:!1},defaultOpen:{}},setup(r){const s=r,o=e.ref(s.defaultOpen||[]),n=l=>{if(s.singleOpen)o.value=o.value.includes(l)?[]:[l];else{const a=o.value.indexOf(l);a===-1?o.value.push(l):o.value.splice(a,1)}},t=l=>o.value.includes(l);return(l,a)=>(e.openBlock(),e.createElementBlock("div",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.sections,(d,m)=>(e.openBlock(),e.createElementBlock("div",{key:m,class:"spicyAccordionItem"},[e.createElementVNode("button",{class:e.normalizeClass(["spicyAccordionHeader",{open:t(m)}]),onClick:i=>n(m),"aria-expanded":t(m)},[e.createElementVNode("span",null,e.toDisplayString(d.title),1),d.icon?(e.openBlock(),e.createElementBlock("svg",G,[e.createElementVNode("path",{d:d.icon},null,8,J)])):e.createCommentVNode("",!0),a[0]||(a[0]=e.createElementVNode("span",{class:"accordionToggle"},[e.createElementVNode("svg",{class:"accordionArrow",viewBox:"0 0 24 24"},[e.createElementVNode("path",{d:"M7 10l5 5 5-5H7z"})])],-1))],10,x),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",Q,[e.renderSlot(l.$slots,`section-${m}`)],512),[[e.vShow,t(m)]])]),_:2},1024)]))),128))]))}}),Z=["aria-label"],v={key:0,class:"spicyAlertIcon"},ee={key:1,class:"spicyAlertIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},te=["d"],oe={class:"spicyAlertContainer"},le={key:0,class:"spicyAlertTitle"},ne={key:1,class:"spicyAlertText"},ae={key:0,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},se=["d"],ie={key:1},_=e.defineComponent({__name:"SpicyAlert",props:{variant:{default:"info"},title:{},text:{},icon:{},mdi:{},iconOnly:{type:Boolean,default:!1},closable:{type:Boolean,default:!1},autoClose:{default:0},closeIcon:{},isRound:{type:Boolean,default:!1}},setup(r){const s=r,o=e.ref(!0),n=()=>{o.value=!1};return e.watch(()=>s.autoClose,t=>{t&&t>0&&setTimeout(()=>{n()},t)}),(t,l)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyAlert",[t.variant,{spicyAlertRound:t.isRound}]]),"aria-atomic":"true","aria-label":t.text||"Alert",role:"alert",onKeydown:e.withKeys(n,["enter"])},[t.iconOnly&&t.icon?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),t.mdi?(e.openBlock(),e.createElementBlock("svg",ee,[e.createElementVNode("path",{fill:"currentColor",class:"spicyAlertMDI",d:t.mdi},null,8,te)])):e.createCommentVNode("",!0),e.createElementVNode("div",oe,[t.title?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),t.closable?(e.openBlock(),e.createElementBlock("button",{key:2,class:"spicyAlertCloseBtn",onClick:n,"aria-label":"Close alert"},[t.closeIcon?(e.openBlock(),e.createElementBlock("svg",ae,[e.createElementVNode("path",{fill:"#000",d:t.closeIcon},null,8,se)])):(e.openBlock(),e.createElementBlock("span",ie,"X"))])):e.createCommentVNode("",!0),t.text?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:3})],42,Z)):e.createCommentVNode("",!0)]),_:3}))}}),re=["disabled","aria-label","aria-disabled","tabindex"],ce={key:0,class:"spicyBtnIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},de=["d"],pe={key:1,class:"spicyBtnIcon"},me={key:2,class:"spicyBtnText"},N=e.defineComponent({__name:"SpicyBtn",props:{variant:{default:"filled"},disabled:{type:Boolean,default:!1},text:{},icon:{},mdi:{},size:{},bgColor:{},textColor:{default:"#ddd"},hoverColor:{},borderColor:{},fontSize:{default:16},fontWeight:{default:500}},emits:["click"],setup(r,{emit:s}){const o=s,n=()=>{t.disabled||o("click")},t=r,l=e.computed(()=>({"--skFontSize":typeof t.fontSize=="number"?`${t.fontSize}px`:t.fontSize,"--skFontWeight":t.fontWeight,"--skBgColor":t.bgColor,"--skTextColor":t.textColor,"--skBorderColor":t.borderColor,"--hoverColor":t.hoverColor})),a=e.computed(()=>!t.text&&(t.icon||t.mdi)),d=e.computed(()=>({spicyBtn:!0,outlined:t.variant==="outlined",disabled:t.disabled,isRound:a.value,large:t.size==="large"}));return(m,i)=>{const p=e.resolveDirective("spicyRipple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(d.value),style:e.normalizeStyle(l.value),disabled:m.disabled,onClick:n,role:"button","aria-label":m.text,"aria-disabled":m.disabled,tabindex:m.disabled?-1:0},[m.mdi?(e.openBlock(),e.createElementBlock("svg",ce,[e.createElementVNode("path",{fill:"currentColor",class:"spicyBtnMDI",d:m.mdi},null,8,de)])):e.createCommentVNode("",!0),m.icon&&!m.mdi?(e.openBlock(),e.createElementBlock("span",pe,e.toDisplayString(m.icon),1)):e.createCommentVNode("",!0),m.text?(e.openBlock(),e.createElementBlock("span",me,e.toDisplayString(m.text),1)):e.createCommentVNode("",!0),e.renderSlot(m.$slots,"default")],14,re)),[[p]])}}}),ye=["aria-label"],fe={class:"spicyCarouselInfoText"},ue={class:"spicyCarouselTitle"},he={key:0},ke={key:0,class:"spicyCarouselNavControls"},ge={key:1,class:"spicyCarouselPagination"},Be=["onClick"],Ce={class:"spicyCarouselPage"},T=e.defineComponent({__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{default:"var(--skPrimaryColor)"},loop:{type:Boolean,default:!0},initialSlide:{default:0},slides:{default:()=>[]},width:{default:"580px"},height:{default:"360px"},fullScreen:{type:Boolean,default:!1},enableImageClick:{type:Boolean,default:!1},paginationLimit:{default:10}},setup(r){let s,o,n=!1;const t=r,l=e.computed(()=>({"--width":t.width,"--height":t.height,"--activeColor":t.activeColor})),a=e.computed(()=>t.paginationLimit),d=e.computed(()=>{var g;return(g=t.slides[i.value])==null?void 0:g.title}),m=e.computed(()=>p.value.fullScreen===!1?!1:t.fullScreen),i=e.ref(t.initialSlide),p=e.computed(()=>t.slides[i.value]);let y;const k=()=>{i.value=(i.value-1+t.slides.length)%t.slides.length},u=()=>{i.value=(i.value+1)%t.slides.length},c=g=>{i.value=g},h=()=>{y&&clearInterval(y)},B=()=>{t.autoplay&&(y=window.setInterval(u,t.autoplaySpeed))},C=()=>{window.open(p.value.img)},w=()=>{t.enableImageClick&&C()},q=g=>{s=g.touches[0].clientX,o=g.touches[0].clientY,n=!1},E=g=>{if(!n){const S=g.touches[0].clientX-s,b=g.touches[0].clientY-o;Math.abs(S)>Math.abs(b)&&(S>40?(k(),n=!0):S<-40&&(u(),n=!0))}},Bt=e.computed(()=>{const g=t.slides.length,S=Math.max(0,i.value-Math.floor(a.value/2)),b=Math.min(g,S+a.value);return[...Array(g).keys()].slice(S,b)});return e.onMounted(()=>{B()}),e.onUnmounted(()=>{h()}),(g,S)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyCarouselWrapper",style:e.normalizeStyle({...l.value})},[e.createElementVNode("div",{class:"spicyCarouselContainer",onMouseenter:h,onMouseleave:B,onTouchstart:q,onTouchmove:E},[e.createVNode(e.Transition,{name:"slide",mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyCarouselSlide",{pointCursor:t.enableImageClick}]),key:i.value,style:e.normalizeStyle({backgroundImage:`url(${p.value.img})`}),onClick:w},[g.slides[i.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyCarouselTextOverlay",{fullScreen:m.value}]),"aria-label":g.slides[i.value].text},[e.createElementVNode("span",fe,e.toDisplayString(g.slides[i.value].text),1)],10,ye)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],6))]),_:3})],32),e.createElementVNode("div",ue,[d.value?(e.openBlock(),e.createElementBlock("h2",he,e.toDisplayString(p.value.title),1)):e.createCommentVNode("",!0)]),g.showNavigation?(e.openBlock(),e.createElementBlock("div",ke,[e.createElementVNode("button",{class:"spicyCarouselPrevBtn",onClick:k},S[0]||(S[0]=[e.createElementVNode("span",{class:"spicyCarouselPrevBtnIcon"},"<",-1)])),e.createElementVNode("button",{class:"spicyCarouselNextBtn",onClick:u},S[1]||(S[1]=[e.createElementVNode("span",{class:"spicyCarouselNextBtnIcon"},">",-1)]))])):e.createCommentVNode("",!0),g.showPagination?(e.openBlock(),e.createElementBlock("div",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Bt.value,b=>(e.openBlock(),e.createElementBlock("button",{key:b,onClick:bt=>c(b),class:e.normalizeClass(["spicyCarouselPageBtn",{active:b===i.value}])},[e.createElementVNode("span",Ce,e.toDisplayString(b+1),1)],10,Be))),128))])):e.createCommentVNode("",!0)],4))}}),D=e.defineComponent({__name:"SpicyDialog",props:{modelValue:Boolean,persistent:Boolean,maxWidth:{type:String,default:"500px"},color:{type:String,default:"rgba(0, 0, 0, 0.5)"}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=s,t=()=>{n("update:modelValue",!1)},l=()=>{o.persistent||t()},a=d=>{d.key==="Escape"&&!o.persistent&&t()};return e.watch(()=>o.modelValue,d=>{d?window.addEventListener("keydown",a):window.removeEventListener("keydown",a)}),(d,m)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"dialog-fade"},{default:e.withCtx(()=>[r.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyDialogOverlay",style:e.normalizeStyle({backgroundColor:r.color}),onClick:l},[e.createElementVNode("div",{class:"spicyDialog",style:e.normalizeStyle({maxWidth:r.maxWidth}),onClick:m[0]||(m[0]=e.withModifiers(()=>{},["stop"]))},[e.renderSlot(d.$slots,"default")],4)],4)):e.createCommentVNode("",!0)]),_:3})]))}}),Se=["aria-orientation"],I=e.defineComponent({__name:"SpicyDivider",props:{variant:{default:"solid"},orientation:{default:"horizontal"},length:{default:"100%"},size:{default:"1px"},color:{default:"#5f5f5f"}},setup(r){const s=r,o=e.computed(()=>s.orientation==="vertical"?"vertical":"horizontal"),n=e.computed(()=>({[s.orientation==="vertical"?"height":"width"]:s.length,border:`${s.size} ${s.variant} ${s.color}`,borderLeft:s.orientation==="vertical"?`${s.size} ${s.variant} ${s.color}`:"none",borderBottom:s.orientation==="horizontal"?`${s.size} ${s.variant} ${s.color}`:"none"}));return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyDivider",o.value]),style:e.normalizeStyle(n.value),role:"separator","aria-orientation":t.orientation},[e.renderSlot(t.$slots,"default")],14,Se))}}),be=["aria-expanded"],Ee=["width","height"],we=["d"],$e=["width","height"],z=e.defineComponent({__name:"SpicyDropdown",props:{label:{},align:{default:"left"},width:{default:"200px"},icon:{default:""},iconSize:{default:"24px"}},setup(r){const s=r,o=e.ref(!1),n=()=>{o.value=!o.value},t=e.computed(()=>s.icon||""),l=e.computed(()=>({width:s.width,[s.align==="right"?"right":"left"]:0,textAlign:s.align}));return(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyDropdown",{open:o.value}])},[e.createElementVNode("button",{onClick:n,class:"spicyDropdownButton","aria-haspopup":"true","aria-expanded":o.value,"aria-controls":"spicyDropdownMenu"},[t.value?(e.openBlock(),e.createElementBlock("svg",{key:0,width:a.iconSize,height:a.iconSize,viewBox:"0 0 24 24",class:"dropdownIcon"},[e.createElementVNode("path",{d:t.value},null,8,we)],8,Ee)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(a.label)+" ",1),t.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",{key:1,width:a.iconSize,height:a.iconSize,viewBox:"0 0 24 24",class:e.normalizeClass(["arrow",{open:o.value}])},d[1]||(d[1]=[e.createElementVNode("path",{d:"M7 10l5 5 5-5H7z"},null,-1)]),10,$e))],8,be),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyDropdownMenu",style:e.normalizeStyle(l.value),onClick:d[0]||(d[0]=e.withModifiers(m=>o.value=!1,["self"])),id:"spicyDropdownMenu"},[e.renderSlot(a.$slots,"default")],4)):e.createCommentVNode("",!0)]),_:3})],2))}}),Ve=["aria-label"],_e=["multiple","accept"],Ne={key:1,class:"spicyFilePreview"},Te=["onClick"],De=["onClick"],Ie=["d"],ze={key:3,class:"spicyFileInputError"},L=e.defineComponent({__name:"SpicyFileInput",props:{modelValue:{default:()=>[]},label:{default:""},error:{default:""},accept:{default:""},multiple:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},mdi:{default:""}},emits:["update:modelValue","change","error"],setup(r,{emit:s}){const o=s,n=r,t=e.ref(n.modelValue),l=e.ref(null),a=e.ref(!1),d=c=>{const h=c.target;h.files&&(t.value=Array.from(h.files),o("update:modelValue",t.value),o("change",t.value))},m=()=>{t.value=[],o("update:modelValue",t.value),l.value&&(l.value.value="")},i=c=>{t.value.splice(c,1),o("update:modelValue",t.value),t.value.length===0&&l.value&&(l.value.value="")},p=()=>{var c;(c=l.value)==null||c.click()},y=()=>{a.value=!0},k=()=>{a.value=!1},u=c=>{var B;const h=(B=c.dataTransfer)==null?void 0:B.files;if(h){const C=Array.from(h).filter(w=>n.accept?n.accept.split(",").map(E=>E.trim()).some(E=>E.startsWith(".")?w.name.endsWith(E):w.type===E):!0);!n.multiple&&C.length>0?t.value=[C[0]]:t.value=C,o("update:modelValue",t.value),o("change",t.value)}a.value=!1};return(c,h)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyFileInputWrapper",{hasError:c.error,isDragging:a.value}]),onClick:p,onDragover:e.withModifiers(y,["prevent"]),onDragleave:e.withModifiers(k,["prevent"]),onDrop:e.withModifiers(u,["prevent"])},[c.label&&!t.value.length?(e.openBlock(),e.createElementBlock("label",{key:0,class:"spicyFileInputLabel","aria-label":c.label},e.toDisplayString(c.label),9,Ve)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:"file",multiple:c.multiple,accept:c.accept,class:"spicyFileInput",onChange:d,ref_key:"fileInput",ref:l},null,40,_e),t.value.length?(e.openBlock(),e.createElementBlock("div",Ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(B,C)=>(e.openBlock(),e.createElementBlock("div",{key:C,class:"spicyFilePreviewItem"},[e.createElementVNode("span",null,e.toDisplayString(B.name),1),c.clearable&&!c.mdi?(e.openBlock(),e.createElementBlock("button",{key:0,class:"removeButton",onClick:e.withModifiers(w=>i(C),["stop"]),"aria-label":"Remove"}," X ",8,Te)):e.createCommentVNode("",!0),c.clearable&&c.mdi?(e.openBlock(),e.createElementBlock("svg",{key:1,class:"removeButtonMDI",onClick:e.withModifiers(w=>i(C),["stop"]),"aria-label":"Remove",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{fill:"red",d:c.mdi},null,8,Ie)],8,De)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0),c.clearable&&t.value.length>1?(e.openBlock(),e.createElementBlock("button",{key:2,class:"clearAllButton",onClick:e.withModifiers(m,["stop"]),"aria-label":"Clear All"}," Clear All ")):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default"),c.error?(e.openBlock(),e.createElementBlock("span",ze,e.toDisplayString(c.error),1)):e.createCommentVNode("",!0)],34))}}),Le={class:"spicyModalHeader"},Me={class:"spicyModalActions"},Fe=["onClick"],M=e.defineComponent({__name:"SpicyModal",props:{width:{default:"400px"},height:{default:"auto"},borderRadius:{default:"6px"},bgColor:{default:""},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!0},actions:{default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{default:""},textColor:{default:""}},emits:["update:visible","close","action-clicked"],setup(r,{emit:s}){const o=r,n=s,t=e.computed(()=>({"--width":o.width,"--height":o.height,"--skBorderRadius":o.borderRadius,"--skBgColor":o.bgColor,"--skTextColor":o.textColor})),l=()=>{n("update:visible",!1),n("close")},a=p=>{typeof p.handler=="function"&&p.handler(),n("action-clicked",p)},d=p=>{const y=p.target;o.closeOnClick&&y.classList.contains("spicyModalOverlay")&&l()},m=()=>{document.body.style.overflow="hidden"},i=()=>{document.body.style.overflow=""};return e.onMounted(()=>{o.visible&&m()}),e.onBeforeUnmount(()=>{i()}),e.watch(()=>o.visible,p=>{p?m():i()}),(p,y)=>p.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:d,"aria-modal":"true",role:"dialog"},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...t.value}),onKeydown:e.withKeys(l,["esc"])},[e.createElementVNode("header",Le,[e.renderSlot(p.$slots,"spicyModalHeader",{title:p.modalTitle,ariaLabel:p.modalTitle},()=>[e.createTextVNode(e.toDisplayString(p.modalTitle),1)])]),e.renderSlot(p.$slots,"default"),e.createElementVNode("div",Me,[e.renderSlot(p.$slots,"spicyModalActions"),p.actions.length===0&&p.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyModalCloseBtn spicyModalActionBtn",onClick:l},[e.renderSlot(p.$slots,"closeBtn",{},()=>[y[0]||(y[0]=e.createTextVNode("Close"))])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.actions,k=>(e.openBlock(),e.createElementBlock("button",{key:k.label,class:"spicyModalExtraBtn spicyModalActionBtn",onClick:u=>a(k)},e.toDisplayString(k.label),9,Fe))),128))])],36)])):e.createCommentVNode("",!0)}}),Ae={key:0,class:"spicyProgress"},Pe={key:0,class:"spicyProgressLabel"},Re={key:1,class:"spicyProgressCircular"},Oe=["width","height"],We=["stroke-width","r","cx","cy"],Xe=["stroke","stroke-width","r","cx","cy"],Ye={key:0,class:"spicyCircularLabel"},F=e.defineComponent({__name:"SpicyProgress",props:{value:{},max:{default:100},color:{default:"#4caf50"},height:{default:"8px"},strokeWidth:{default:8},type:{default:"linear"},showLabel:{type:Boolean,default:!1},size:{default:100}},setup(r){const s=r,o=e.computed(()=>Math.round(s.value/s.max*100)),n=e.computed(()=>s.type==="linear"),t=e.computed(()=>({width:`${o.value}%`,backgroundColor:s.color,height:s.height})),l=e.computed(()=>s.size/2),a=e.computed(()=>(s.size-s.strokeWidth)/2),d=e.computed(()=>2*Math.PI*a.value),m=e.computed(()=>({strokeDasharray:`${d.value} ${d.value}`,strokeDashoffset:`${d.value-o.value/100*d.value}`,transition:"stroke-dashoffset 400ms ease"}));return(i,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.value?(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",{class:"spicyProgressBar",style:e.normalizeStyle(t.value)},null,4),i.showLabel?(e.openBlock(),e.createElementBlock("div",Pe,e.toDisplayString(o.value)+"%",1)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",Re,[(e.openBlock(),e.createElementBlock("svg",{class:"spicyCircularSvg",width:i.size,height:i.size},[e.createElementVNode("circle",{class:"spicyCircularTrack","stroke-width":i.strokeWidth,r:a.value,cx:l.value,cy:l.value},null,8,We),e.createElementVNode("circle",{class:"spicyCircularProgress",stroke:i.color,"stroke-width":i.strokeWidth,r:a.value,cx:l.value,cy:l.value,style:e.normalizeStyle(m.value)},null,12,Xe)],8,Oe)),i.showLabel?(e.openBlock(),e.createElementBlock("div",Ye,e.toDisplayString(o.value)+"%",1)):e.createCommentVNode("",!0)])),e.renderSlot(i.$slots,"default")],64))}}),A=e.defineComponent({__name:"SpicySheet",props:{isRound:{type:Boolean,default:!1},color:{default:"var(--skBgColor)"},flex:{type:Boolean,default:!0}},setup(r){const s=r,o=e.computed(()=>({backgroundColor:s.color}));return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicySheet",{isRound:n.isRound,flex:n.flex}]),style:e.normalizeStyle(o.value)},[e.renderSlot(n.$slots,"default")],6))}}),He={class:"spicySlider"},Ke=["aria-label"],je=["min","max","step","aria-valuenow","aria-valuemin","aria-valuemax"],P=e.defineComponent({__name:"SpicySlider",props:{min:{default:0},max:{default:100},step:{default:1},label:{default:""},modelValue:{default:0}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=s,t=e.computed({get:()=>Number(o.modelValue),set:l=>n("update:modelValue",l)});return(l,a)=>(e.openBlock(),e.createElementBlock("div",He,[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:"spicySliderLabel","aria-label":l.label},e.toDisplayString(l.label),9,Ke)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{name:"spicySliderInput",class:"spicySliderInput",type:"range",min:l.min,max:l.max,step:l.step,"onUpdate:modelValue":a[0]||(a[0]=d=>t.value=d),"aria-valuenow":t.value,"aria-valuemin":l.min,"aria-valuemax":l.max},null,8,je),[[e.vModelText,t.value]]),e.renderSlot(l.$slots,"default")]))}}),qe={class:e.normalizeClass(["spicyTabs"])},Ue={class:"spicyTabsHeader"},xe=["onClick"],Ge={key:0,class:"spicyTabsContent"},R=e.defineComponent({__name:"SpicyTabs",props:{visibleTabs:{default:8},useScrollButtons:{type:Boolean,default:!0},tabs:{}},setup(r){var u;const s=r,o=e.ref(((u=s.tabs[0])==null?void 0:u.name)||""),n=e.ref(null),t=e.ref(!1),l=e.ref(!1),a=()=>{if(n.value){const{scrollLeft:c,scrollWidth:h,clientWidth:B}=n.value;t.value=c>0,l.value=h>B+c}},d=c=>{o.value=c},m=e.computed(()=>{var c;return(c=s.tabs.find(h=>h.name===o.value))==null?void 0:c.name}),i=c=>{if(n.value){const h=c==="left"?-200:200;n.value.scrollBy({left:h,behavior:"smooth"})}},p=()=>{i("left"),a()},y=()=>{i("right"),a()},k=c=>{n.value&&(c.preventDefault(),n.value.scrollLeft+=c.deltaY,a())};return e.onMounted(()=>{a(),window.addEventListener("resize",a)}),e.onUnmounted(()=>{window.removeEventListener("resize",a)}),e.watch(()=>{var c;return(c=n.value)==null?void 0:c.scrollLeft},a),(c,h)=>(e.openBlock(),e.createElementBlock("div",qe,[e.createElementVNode("div",Ue,[t.value&&c.useScrollButtons?(e.openBlock(),e.createElementBlock("button",{key:0,class:"spicyOverflowButton left",onClick:p}," ‹ ")):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"tabsWrapperRef",ref:n,class:"tabsWrapper",onWheel:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.tabs,B=>(e.openBlock(),e.createElementBlock("button",{key:B.name,class:e.normalizeClass(["spicyTabButton",{active:o.value===B.name}]),onClick:C=>d(B.name)},e.toDisplayString(B.label),11,xe))),128))],544),l.value&&c.useScrollButtons?(e.openBlock(),e.createElementBlock("button",{key:1,class:"spicyOverflowButton right",onClick:y}," › ")):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",Ge,[e.renderSlot(c.$slots,m.value)])):e.createCommentVNode("",!0)]),_:3})]))}}),Je=["value","name"],O=e.defineComponent({__name:"SpicyTextArea",props:{border:{default:"1px solid var(--skBorderColor, #515353)"},isRound:{type:Boolean,default:!1},padding:{default:"8px"},color:{default:"#4e4e4e"},modelValue:{default:""},name:{default:""}},emits:["update:modelValue"],setup(r,{emit:s}){const o=r,n=e.computed(()=>({borderRadius:o.isRound?"16px":"2px",border:o.border,padding:o.padding,backgroundColor:o.color})),t=s,l=a=>{t("update:modelValue",a.target.value)};return(a,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("textarea",e.mergeProps({class:"SpicyTextArea",value:a.modelValue,onInput:l,name:a.name,style:n.value},a.$attrs),null,16,Je),e.renderSlot(a.$slots,"default")],64))}}),Qe=["aria-label"],Ze={class:"spicyInputContainer"},ve={key:0,class:"spicyInputPrefix"},et=["placeholder","autofocus","aria-label","aria-invalid","aria-describedby"],tt=["id"],W=e.defineComponent({__name:"SpicyTextField",props:{modelValue:{default:""},placeholder:{default:""},label:{default:""},error:{default:""},variant:{default:"outlined"},prefix:{default:""},autofocus:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1}},emits:["update:modelValue","input","blur","focus"],setup(r,{emit:s}){const o=s,n=r,t=e.ref(n.modelValue),l=e.ref(!1),a=e.computed(()=>n.error?"spicyInputError":void 0);e.watch(()=>n.modelValue,y=>{t.value=y}),e.onMounted(()=>{if(n.autofocus){const y=document.querySelector('input[name="spicyInput"]');y==null||y.focus()}});const d=y=>{const k=y.target;t.value=k.value,o("update:modelValue",t.value),o("input",t.value)},m=()=>{l.value=!1,o("blur")},i=()=>{l.value=!0,o("focus")},p=()=>{t.value="",o("update:modelValue",t.value)};return(y,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[y.variant,{hasValue:t.value,hasFocus:l.value,hasError:y.error}]])},[e.createElementVNode("label",{class:"spicyInputLabel","aria-label":y.label},e.toDisplayString(y.label),9,Qe),e.createElementVNode("div",Ze,[y.prefix?(e.openBlock(),e.createElementBlock("span",ve,e.toDisplayString(y.prefix),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{type:"text",name:"spicyInput",class:e.normalizeClass(["spicyInput",y.variant]),"onUpdate:modelValue":k[0]||(k[0]=u=>t.value=u),placeholder:y.placeholder,autofocus:y.autofocus,onInput:d,onBlur:m,onFocus:i,"aria-label":y.label,"aria-invalid":!!y.error,"aria-describedby":a.value,ref:"input"},null,42,et),[[e.vModelText,t.value]]),y.clearable&&t.value?(e.openBlock(),e.createElementBlock("button",{key:1,class:"clearButton",onClick:p},"X")):e.createCommentVNode("",!0)]),e.renderSlot(y.$slots,"default"),y.error?(e.openBlock(),e.createElementBlock("span",{key:0,id:a.value,class:"spicyInputError"},e.toDisplayString(y.error),9,tt)):e.createCommentVNode("",!0)],2))}}),ot=["for"],lt=["id","tabindex","aria-label","aria-checked","aria-disabled","onKeydown"],X=e.defineComponent({__name:"SpicyToggle",props:{modelValue:{type:Boolean,default:!1},label:{default:""},variant:{default:"filled"},borderColor:{default:""},activeColor:{default:""},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(r,{emit:s}){const o=e.computed(()=>`${n.label||"toggle"}_spicyToggle`),n=r,t=e.computed(()=>({"--skBorderColor":n.borderColor,"--activeColor":n.activeColor})),l=s,a=()=>{n.disabled||l("update:modelValue",!n.modelValue)};return(d,m)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["spicyToggleLabel",{disabled:d.disabled}]),for:`${d.label||"toggle"}_spicyToggle`},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),e.createElementVNode("div",e.mergeProps({class:["spicyToggle",{outlined:d.variant==="outlined",isActive:d.modelValue}],id:o.value,tabindex:d.disabled?-1:0,role:"switch",style:{...t.value},"aria-label":d.label||"Toggle Switch","aria-checked":d.modelValue,"aria-disabled":d.disabled,onClick:a,onKeydown:[e.withKeys(e.withModifiers(a,["prevent"]),["space"]),e.withKeys(e.withModifiers(a,["prevent"]),["enter"])]},d.$attrs),m[0]||(m[0]=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)]),16,lt)],10,ot))}}),nt=["aria-hidden"],at={key:0,class:"spicyTooltipIcon"},st=["aria-label"],it={key:2,class:"spicyTooltipIcon"},Y=e.defineComponent({__name:"SpicyTooltip",props:{text:{default:""},prependIcon:{default:""},appendIcon:{default:""},position:{default:"top"}},setup(r){const s=r,o=e.ref(!1),n=e.ref(null),t=e.reactive({position:"fixed",top:"0px",left:"0px",maxWidth:"175px"}),l=i=>{const p=i.right-window.innerWidth;p>0&&(t.left=`${parseInt(t.left)-p-5}px`),i.left<0&&(t.left="5px")},a={top:(i,p)=>{t.left=`${i.left+(i.width-p.width)/2}px`,t.top=`${i.top-p.height-5}px`},bottom:(i,p)=>{t.left=`${i.left+(i.width-p.width)/2}px`,t.top=`${i.bottom+5}px`},left:(i,p)=>{t.left=`${i.left-p.width-5}px`,t.top=`${i.top+(i.height-p.height)/2}px`},right:(i,p)=>{t.left=`${i.right+5}px`,t.top=`${i.top+(i.height-p.height)/2}px`}},d=()=>{o.value=!0,e.nextTick(()=>{if(n.value&&o.value){const i=n.value.getBoundingClientRect(),p=n.value.querySelector(".spicyTooltip");if(p){const y=p.getBoundingClientRect(),k=a[s.position];k(i,y),l(y)}}})},m=()=>{o.value=!1};return(i,p)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:d,onMouseleave:m,ref_key:"host",ref:n},[e.renderSlot(i.$slots,"default"),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(t),role:"tooltip","aria-hidden":!o.value},[i.prependIcon?(e.openBlock(),e.createElementBlock("span",at,e.toDisplayString(i.prependIcon),1)):e.createCommentVNode("",!0),i.text?(e.openBlock(),e.createElementBlock("span",{key:1,class:"spicyTooltipText","aria-label":i.text},e.toDisplayString(i.text),9,st)):e.createCommentVNode("",!0),i.appendIcon?(e.openBlock(),e.createElementBlock("span",it,e.toDisplayString(i.appendIcon),1)):e.createCommentVNode("",!0)],12,nt)):e.createCommentVNode("",!0)],544))}}),rt=["aria-expanded"],ct={key:0,class:"spicyToggleIcon"},dt=["width","height"],pt=["d"],mt={key:1,role:"group"},$=e.defineComponent({__name:"SpicyTreeNode",props:{node:{}},setup(r){const s=r,o=e.ref(!1),n=e.computed(()=>s.node.children&&s.node.children.length>0),t=()=>{n.value&&(o.value=!o.value)};return(l,a)=>{const d=e.resolveComponent("SpicyTreeNode",!0);return e.openBlock(),e.createElementBlock("li",{class:"spicyTreeNodeItem",role:"treeitem","aria-expanded":o.value},[e.createElementVNode("div",{onClick:t,style:{cursor:"pointer"}},[e.createElementVNode("span",null,e.toDisplayString(l.node.label),1),n.value?(e.openBlock(),e.createElementBlock("span",ct,e.toDisplayString(o.value?"-":"+"),1)):e.createCommentVNode("",!0)]),l.node.icon?(e.openBlock(),e.createElementBlock("svg",{key:0,width:l.node.iconSize,height:l.node.iconSize,class:"spicyTreeNodeIcon",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:l.node.icon},null,8,pt)],8,dt)):e.createCommentVNode("",!0),o.value&&l.node.children?(e.openBlock(),e.createElementBlock("ul",mt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.node.children,m=>(e.openBlock(),e.createBlock(d,{key:m.id,node:m},null,8,["node"]))),128))])):e.createCommentVNode("",!0)],8,rt)}}}),yt={class:"spicyTree"},ft={role:"tree"},H=e.defineComponent({__name:"SpicyTree",props:{nodes:{}},setup(r){return(s,o)=>(e.openBlock(),e.createElementBlock("div",yt,[e.createElementVNode("ul",ft,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.nodes,n=>(e.openBlock(),e.createBlock($,{class:"spicyTreeNode",key:n.id,node:n},null,8,["node"]))),128))])]))}}),K={mounted(r,s){const{axis:o}=s.value||{};r.style.position="relative",r.style.cursor="move";let n,t;const l=(u,c)=>{const h=r.getBoundingClientRect();let B=u-n,C=c-t;o!=="y"&&(r.style.left=`${B-h.left+parseFloat(getComputedStyle(r).left||"0")}px`),o!=="x"&&(r.style.top=`${C-h.top+parseFloat(getComputedStyle(r).top||"0")}px`)},a=u=>{l(u.pageX,u.pageY)};let d=!1;const m=u=>{const c=u.touches[0];c&&(d=!0,l(c.pageX,c.pageY),u.preventDefault())},i=()=>{document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",i),d&&(d=!1)},p=u=>{const c=r.getBoundingClientRect();n=u.pageX-c.left,t=u.pageY-c.top,document.addEventListener("mousemove",a),document.addEventListener("mouseup",i)},y=u=>{if(u.touches.length!==1)return;const c=u.touches[0];if(!c)return;const h=r.getBoundingClientRect();n=c.pageX-h.left,t=c.pageY-h.top,d=!1,document.addEventListener("touchmove",m),document.addEventListener("touchend",i),u.preventDefault()};r.addEventListener("mousedown",p),r.addEventListener("touchstart",y);const k=r;k._cleanup=()=>{k.removeEventListener("mousedown",p),k.removeEventListener("touchstart",y),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",i)}},unmounted(r){const s=r;s._cleanup&&s._cleanup()}},j={beforeMount(r){r.style.position="relative",r.style.overflow="hidden";const s=(n,t)=>{const l=document.createElement("span"),a=Math.max(r.clientWidth,r.clientHeight),d=a/2;l.style.width=l.style.height=`${a}px`,l.style.left=`${n-r.getBoundingClientRect().left-d}px`,l.style.top=`${t-r.getBoundingClientRect().top-d}px`,l.classList.add("spicyRipple");const m=r.querySelector(".spicyRipple");m&&m.remove(),r.appendChild(l),l.addEventListener("animationend",()=>{l.remove()})},o=n=>{let t=0,l=0;if(n instanceof MouseEvent)t=n.clientX,l=n.clientY;else if(n instanceof TouchEvent){const a=n.touches[0];t=a.clientX,l=a.clientY}s(t,l)};r.addEventListener("click",n=>{requestAnimationFrame(()=>o(n))}),r.addEventListener("touchstart",n=>{requestAnimationFrame(()=>o(n))})}},ut={SpicyAccordion:V,SpicyAlert:_,SpicyBtn:N,SpicyCarousel:T,SpicyDialog:D,SpicyDivider:I,SpicyDropdown:z,SpicyFileInput:L,SpicyModal:M,SpicyProgress:F,SpicySheet:A,SpicySlider:P,SpicyTabs:R,SpicyTextArea:O,SpicyTextField:W,SpicyToggle:X,SpicyTooltip:Y,SpicyTree:H,SpicyTreeNode:$},ht={install(r,s={}){const{useComponents:o=!0,useStyles:n=!0,useDirectives:t=!0}=s;o&&Object.entries(ut).forEach(([l,a])=>{r.component(l,a)}),n&&Promise.resolve().then(()=>kt).then(l=>{const a=document.createElement("style");a.id="SpicyStyles",a.textContent=l.default,document.head.appendChild(a)}),t&&(r.directive("spicyDrag",K),r.directive("spicyRipple",j),Promise.resolve().then(()=>gt).then(l=>{const a=document.createElement("style");a.id="SpicyRippleStyles",a.textContent=l.default,document.head.appendChild(a)}))}},kt=Object.freeze(Object.defineProperty({__proto__:null,default:':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 1rem;--skFontWeight: 500;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skPrimaryColor)}.spicyLink:disabled{opacity:var(--disabledOpacity)}'},Symbol.toStringTag,{value:"Module"})),gt=Object.freeze(Object.defineProperty({__proto__:null,default:".spicyRipple{position:absolute;border-radius:50%;background:currentColor;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}"},Symbol.toStringTag,{value:"Module"}));f.SpicyAccordion=V,f.SpicyAlert=_,f.SpicyBtn=N,f.SpicyCarousel=T,f.SpicyDialog=D,f.SpicyDivider=I,f.SpicyDropdown=z,f.SpicyFileInput=L,f.SpicyKatsu=ht,f.SpicyModal=M,f.SpicyProgress=F,f.SpicySheet=A,f.SpicySlider=P,f.SpicyTabs=R,f.SpicyTextArea=O,f.SpicyTextField=W,f.SpicyToggle=X,f.SpicyTooltip=Y,f.SpicyTree=H,f.SpicyTreeNode=$,f.spicyDrag=K,f.spicyRipple=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.spicyAccordion{border:1px solid #ddd;border-radius:4px;overflow:hidden}.spicyAccordionItem{border-bottom:1px solid #ddd}.spicyAccordionItem:last-child{border-bottom:none}.spicyAccordionHeader{background-color:#f5f5f5;border:none;padding:10px;text-align:left;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.spicyAccordionHeader.open{background-color:#e0e0e0}.spicyAccordionHeader.open .accordionArrow{transform:rotate(180deg)}.spicyAccordionContent{padding:10px;background-color:#fff}.accordionToggle{display:flex;align-items:center;transition:transform .2s ease}.accordionArrow{width:20px;height:20px;transition:transform .2s}.spicyAlert{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:4px}.spicyAlert.info{background-color:#e0e0e0;color:#333}.spicyAlert.success{background-color:#bcf7c9;color:#155724}.spicyAlert.warning{background-color:#fff3cd;color:#856404}.spicyAlert.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{width:24px;height:24px}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer}.spicyAlertCloseBtn svg{width:16px;height:16px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.spicyBtn{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 16px;gap:4px;border:none;border-radius:4px;cursor:pointer;color:var(--skTextColor, #ddd);background-color:var(--skBgColor, #28292a);font-size:var(--skFontSize, 16px);font-weight:var(--skFontWeight, 500);transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{padding:12px 24px;font-size:22px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:40px}.spicyBtn .spicyBtnIcon{width:30px}.spicyCarouselWrapper{position:relative;width:var(--width, 580px);height:var(--height, 360px);padding:30px;display:flex;align-items:center;justify-content:center}.spicyCarouselWrapper .spicyCarouselTitle{position:absolute;top:0;width:var(--width, 580px);background-color:#0009;height:30px;color:#ccc;font-size:18px;font-weight:700}.spicyCarouselWrapper .spicyCarouselContainer{position:relative;overflow:hidden;width:100%;height:100%;border-radius:var(--borderRadius);background-color:#0009}.spicyCarouselWrapper .spicyCarouselSlide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s ease}.spicyCarouselWrapper .spicyCarouselTextOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.spicyCarouselWrapper .spicyCarouselTextOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#0000004d}.spicyCarouselWrapper .spicyCarouselNavControls{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border:none;font-size:24px;color:#ccc;cursor:pointer;background:#0009;height:100%;width:30px;display:flex;align-items:center;justify-content:center;transition:transform .3s;pointer-events:auto;z-index:2}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn:hover,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn{border-radius:6px 0 0 6px}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border-radius:0 6px 6px 0}.spicyCarouselWrapper .spicyCarouselPagination{position:absolute;background:#0009;bottom:0;left:50%;height:30px;width:var(--width, 580px);transform:translate(-50%);display:flex;gap:8px;z-index:2;align-items:center;justify-content:center;pointer-events:auto}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn{border:none;color:#fff;cursor:pointer;background:#00b7ff80;height:26px;width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn.active{background:var(--activeColor, var(--skPrimaryColor))}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .pointCursor{cursor:pointer}.spicyCarouselWrapper .slide-enter-active,.spicyCarouselWrapper .slide-leave-active{transition:opacity .3s}.spicyCarouselWrapper .slide-enter,.spicyCarouselWrapper .slide-leave-to{opacity:0}.spicyDialogOverlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyDialog{padding:16px;border-radius:8px;width:100%}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .3s ease}.dialog-fade-enter,.dialog-fade-leave-to{opacity:0}.spicyDropdown{position:relative;display:inline-block}.spicyDropdownButton{background-color:var(--skBgColor);color:#fff;padding:10px 16px;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center}.spicyDropdownButton .arrow{margin-left:8px;transition:transform .3s ease}.spicyDropdownButton .arrow.open{transform:rotate(180deg)}.dropdownIcon{margin-right:8px}.spicyDropdownMenu{position:absolute;top:100%;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter,.fade-leave-to{opacity:0}.spicyFileInputWrapper{display:flex;flex-direction:column;position:relative;border:2px dashed var(--skBorderColor, #515353);padding:16px;border-radius:8px;width:250px;cursor:pointer}.spicyFileInputWrapper.isDragging{background-color:#0000000d;border-color:var(--skPrimaryColor)}.spicyFileInputLabel{font-size:16px;color:var(--textColor, var(--skTextColor));-webkit-user-select:none;user-select:none;cursor:pointer}.spicyFileInput{display:none}.spicyFilePreview{display:flex;flex-direction:column;gap:4px}.spicyFilePreviewItem{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid var(--skBorderColor, #515353);border-radius:4px;font-size:14px;position:relative;max-width:100%}.spicyFilePreviewItem span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:90%}.removeButton{background:none;border:none;cursor:pointer;color:red;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.removeButtonMDI{width:24px;height:24px}.clearAllButton{background:none;border:none;font-size:16px;margin-top:8px;cursor:pointer;color:var(--skPrimaryColor)}.spicyFileInputError{color:red;font-size:12px;margin-top:8px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.spicyModalActionBtn:hover{text-decoration:underline}.spicyProgress{width:100%;background-color:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.spicyProgressBar{transition:width .4s ease}.spicyProgressLabel{position:absolute;top:0;right:10px;font-size:12px;color:#fff}.spicyProgressCircular{position:relative;display:flex;justify-content:center;align-items:center}.spicyCircularSvg{transform:rotate(-90deg);background-color:#00000080;border-radius:50%}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s ease}.spicyCircularLabel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px}.spicySheet{padding:8px}.spicySheet.isRound{border-radius:8px}.spicySheet.flex{display:flex;flex-direction:column}.spicySlider{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.spicySliderLabel{margin-bottom:5px;font-size:16px}.spicySliderInput{width:100%}.spicyTabs{display:flex;flex-direction:column;position:relative;width:inherit;background-color:var(--skBgColor)}.spicyTabsHeader{display:flex;align-items:center;justify-content:space-between;position:relative;background-color:var(--skBgSecondaryColor)}.spicyOverflowButton{background:none;border:none;cursor:pointer;font-size:18px;padding:0 10px;color:var(--skTextColor);background-color:var(--skBgColor);transition:color .25s;top:0;height:100%;flex-shrink:0}.spicyOverflowButton.left{left:0}.spicyOverflowButton.right{right:0}.tabsWrapper{flex:1;display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.tabsWrapper::-webkit-scrollbar{display:none}.spicyTabButton{background:none;border:none;cursor:pointer;padding:10px;font-size:16px;color:var(--skTextColor);transition:color .25s;flex-shrink:0}.spicyTabButton.active{font-weight:700;color:var(--skPrimaryColor)}.spicyTabsContent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:4px}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.SpicyTextArea{width:100%;font-size:16px;resize:vertical;box-sizing:border-box;color:#eee}.SpicyTextArea::placeholder{color:#ebff7a}.SpicyTextArea:focus{outline:none;border-color:var(--skBorderColor, #515353)}.SpicyTextArea:disabled{opacity:.5}.SpicyTextArea:disabled::placeholder{color:#969696}.spicyInputWrapper{display:flex;flex-direction:column;position:relative;width:100%}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--skPrimaryColor)}.spicyInputLabel{position:absolute;top:10px;left:16px;color:var(--skTextColor);transition:top .25s,font-size .25s,color .25s}.spicyInputContainer{display:flex;align-items:center;position:relative;width:100%}.spicyInputPrefix{color:var(--skTextColor);pointer-events:none}.spicyInput{flex:1;padding:10px;border:none;border-bottom:1px solid var(--skBorderColor, #515353);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--skTextColor)}.clearButton{background:none;border:none;font-size:16px;cursor:pointer;color:red}.outlined .spicyInput{border:1px solid var(--skBorderColor, #515353);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--skBorderColor, #515353)}.text .spicyInput{border:none}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-18px;font-size:16px;color:var(--skPrimaryColor);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px}.spicyToggleLabel{display:inline-flex;align-items:center;flex-direction:column;font-size:14px;gap:4px}.spicyToggleLabel.disabled .spicyToggle{cursor:not-allowed;opacity:.6}.spicyToggle{width:50px;height:24px;background-color:var(--skBgSecondaryColor, #424344);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center;outline:none}.spicyToggle.isActive{background-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggle.isActive .spicyToggleKnob{transform:translate(30px)}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyToggle.outlined.isActive{background-color:var(--activeColor, var(--skPrimaryColor));border-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggle:focus{box-shadow:0 0 0 2px #0003}.spicyToggle.disabled{pointer-events:none}.spicyToggle:hover{background-color:var(--hoverColor, #555)}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyTooltip{z-index:9999;background-color:var(--skBgColor);color:var(--skTextColor);padding:8px;border-radius:4px;font-size:15px;border:1px solid var(--skBorderColor);display:flex;align-items:center;justify-content:center}.spicyTooltipIcon{font-size:18px}.spicyTreeNodeIcon{width:24px;height:24px;margin-right:8px}.spicyToggleIcon{font-size:14px;margin-left:10px}.spicyTreeNodeItem{list-style:none;margin-left:16px}.spicyTree ul{list-style-type:none;padding-left:20px;margin:0}.spicyTree li{margin:5px 0;position:relative}.spicyTreeNode{cursor:pointer;transition:background-color .3s}.spicyTreeNode:focus-within{outline:2px solid #007bff}
|
|
1
|
+
.spicyAccordion{border:1px solid #ddd;border-radius:4px;overflow:hidden}.spicyAccordionItem{border-bottom:1px solid #ddd}.spicyAccordionItem:last-child{border-bottom:none}.spicyAccordionHeader{background-color:#f5f5f5;border:none;padding:10px;text-align:left;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.spicyAccordionHeader.open{background-color:#e0e0e0}.spicyAccordionHeader.open .accordionArrow{transform:rotate(180deg)}.spicyAccordionContent{padding:10px;background-color:#fff}.accordionToggle{display:flex;align-items:center;transition:transform .2s ease}.accordionArrow{width:20px;height:20px;transition:transform .2s}.spicyAlert{display:flex;align-items:center;gap:10px;padding:12px;border-radius:4px}.spicyAlert.info{background-color:#e0e0e0;color:#333}.spicyAlert.success{background-color:#a3ffb7;color:#155724}.spicyAlert.warning{background-color:#ffecaf;color:#856404}.spicyAlert.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{width:24px;height:24px}.spicyAlertContainer{display:flex;flex-direction:column}.spicyAlertCloseBtn{margin-left:auto;background:none;border:none;cursor:pointer;width:20px;height:20px}.spicyAlertCloseBtn svg{width:20px;height:20px}.fade-enter-active,.fade-leave-active{transition:opacity .35s}.spicyBtn{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 16px;gap:4px;border:none;border-radius:4px;cursor:pointer;color:var(--skTextColor, #ddd);background-color:var(--skBgColor, #28292a);font-size:var(--skFontSize, 16px);font-weight:var(--skFontWeight, 500);transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.isRound{border-radius:50px;padding:12px}.spicyBtn.large{padding:12px 24px;font-size:22px}.spicyBtn.large.isRound{padding:16px}.spicyBtn.large .spicyBtnIcon{width:40px}.spicyBtn .spicyBtnIcon{width:30px}.spicyCarouselWrapper{position:relative;width:var(--width, 580px);height:var(--height, 360px);padding:30px;display:flex;align-items:center;justify-content:center}.spicyCarouselWrapper .spicyCarouselTitle{position:absolute;top:0;width:var(--width, 580px);background-color:#0009;height:30px;color:#ccc;font-size:18px;font-weight:700}.spicyCarouselWrapper .spicyCarouselContainer{position:relative;overflow:hidden;width:100%;height:100%;border-radius:var(--borderRadius);background-color:#0009}.spicyCarouselWrapper .spicyCarouselSlide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s ease}.spicyCarouselWrapper .spicyCarouselTextOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.spicyCarouselWrapper .spicyCarouselTextOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#0000004d}.spicyCarouselWrapper .spicyCarouselNavControls{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border:none;font-size:24px;color:#ccc;cursor:pointer;background:#0009;height:100%;width:30px;display:flex;align-items:center;justify-content:center;transition:transform .3s;pointer-events:auto;z-index:2}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn:hover,.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselPrevBtn{border-radius:6px 0 0 6px}.spicyCarouselWrapper .spicyCarouselNavControls .spicyCarouselNextBtn{border-radius:0 6px 6px 0}.spicyCarouselWrapper .spicyCarouselPagination{position:absolute;background:#0009;bottom:0;left:50%;height:30px;width:var(--width, 580px);transform:translate(-50%);display:flex;gap:8px;z-index:2;align-items:center;justify-content:center;pointer-events:auto}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn{border:none;color:#fff;cursor:pointer;background:#00b7ff80;height:26px;width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn.active{background:var(--activeColor, var(--skPrimaryColor))}.spicyCarouselWrapper .spicyCarouselPagination .spicyCarouselPageBtn:hover{background:var(--skPrimaryColor)}.spicyCarouselWrapper .pointCursor{cursor:pointer}.spicyCarouselWrapper .slide-enter-active,.spicyCarouselWrapper .slide-leave-active{transition:opacity .3s}.spicyCarouselWrapper .slide-enter,.spicyCarouselWrapper .slide-leave-to{opacity:0}.spicyDialogOverlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:2000}.spicyDialog{padding:16px;border-radius:8px;width:100%}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .3s ease}.dialog-fade-enter,.dialog-fade-leave-to{opacity:0}.spicyDropdown{position:relative;display:inline-block}.spicyDropdownButton{background-color:var(--skBgColor);color:#fff;padding:10px 16px;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center}.spicyDropdownButton .arrow{margin-left:8px;transition:transform .3s ease}.spicyDropdownButton .arrow.open{transform:rotate(180deg)}.dropdownIcon{margin-right:8px}.spicyDropdownMenu{position:absolute;top:100%;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter,.fade-leave-to{opacity:0}.spicyFileInputWrapper{display:flex;flex-direction:column;position:relative;border:2px dashed var(--skBorderColor, #515353);padding:16px;border-radius:8px;width:250px;cursor:pointer}.spicyFileInputWrapper.isDragging{background-color:#0000000d;border-color:var(--skPrimaryColor)}.spicyFileInputLabel{font-size:16px;color:var(--textColor, var(--skTextColor));-webkit-user-select:none;user-select:none;cursor:pointer}.spicyFileInput{display:none}.spicyFilePreview{display:flex;flex-direction:column;gap:4px}.spicyFilePreviewItem{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid var(--skBorderColor, #515353);border-radius:4px;font-size:14px;position:relative;max-width:100%}.spicyFilePreviewItem span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:90%}.removeButton{background:none;border:none;cursor:pointer;color:red;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.removeButtonMDI{width:24px;height:24px}.clearAllButton{background:none;border:none;font-size:16px;margin-top:8px;cursor:pointer;color:var(--skPrimaryColor)}.spicyFileInputError{color:red;font-size:12px;margin-top:8px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.spicyModalActionBtn:hover{text-decoration:underline}.spicyProgress{width:100%;background-color:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.spicyProgressBar{transition:width .4s ease}.spicyProgressLabel{position:absolute;top:0;right:10px;font-size:12px;color:#fff}.spicyProgressCircular{position:relative;display:flex;justify-content:center;align-items:center}.spicyCircularSvg{transform:rotate(-90deg);background-color:#00000080;border-radius:50%}.spicyCircularTrack{fill:none;stroke:#e0e0e0}.spicyCircularProgress{fill:none;transition:stroke-dashoffset .4s ease}.spicyCircularLabel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px}.spicySheet{padding:8px}.spicySheet.isRound{border-radius:8px}.spicySheet.flex{display:flex;flex-direction:column}.spicySlider{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.spicySliderLabel{margin-bottom:5px;font-size:16px}.spicySliderInput{width:100%}.spicyTabs{display:flex;flex-direction:column;position:relative;width:inherit;background-color:var(--skBgColor)}.spicyTabsHeader{display:flex;align-items:center;justify-content:space-between;position:relative;background-color:var(--skBgSecondaryColor)}.spicyOverflowButton{background:none;border:none;cursor:pointer;font-size:18px;padding:0 10px;color:var(--skTextColor);background-color:var(--skBgColor);transition:color .25s;top:0;height:100%;flex-shrink:0}.spicyOverflowButton.left{left:0}.spicyOverflowButton.right{right:0}.tabsWrapper{flex:1;display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.tabsWrapper::-webkit-scrollbar{display:none}.spicyTabButton{background:none;border:none;cursor:pointer;padding:10px;font-size:16px;color:var(--skTextColor);transition:color .25s;flex-shrink:0}.spicyTabButton.active{font-weight:700;color:var(--skPrimaryColor)}.spicyTabsContent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:4px}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.SpicyTextArea{width:100%;font-size:16px;resize:vertical;box-sizing:border-box;color:#eee}.SpicyTextArea::placeholder{color:#ebff7a}.SpicyTextArea:focus{outline:none;border-color:var(--skBorderColor, #515353)}.SpicyTextArea:disabled{opacity:.5}.SpicyTextArea:disabled::placeholder{color:#969696}.spicyInputWrapper{display:flex;flex-direction:column;position:relative;width:100%}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--skPrimaryColor)}.spicyInputLabel{position:absolute;top:10px;left:16px;color:var(--skTextColor);transition:top .25s,font-size .25s,color .25s}.spicyInputContainer{display:flex;align-items:center;position:relative;width:100%}.spicyInputPrefix{color:var(--skTextColor);pointer-events:none}.spicyInput{flex:1;padding:10px;border:none;border-bottom:1px solid var(--skBorderColor, #515353);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--skTextColor)}.clearButton{background:none;border:none;font-size:16px;cursor:pointer;color:red}.outlined .spicyInput{border:1px solid var(--skBorderColor, #515353);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--skBorderColor, #515353)}.text .spicyInput{border:none}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-18px;font-size:16px;color:var(--skPrimaryColor);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px}.spicyToggleLabel{display:inline-flex;align-items:center;flex-direction:column;font-size:14px;gap:4px}.spicyToggleLabel.disabled .spicyToggle{cursor:not-allowed;opacity:.6}.spicyToggle{width:50px;height:24px;background-color:var(--skBgSecondaryColor, #424344);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center;outline:none}.spicyToggle.isActive{background-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggle.isActive .spicyToggleKnob{transform:translate(30px)}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyToggle.outlined.isActive{background-color:var(--activeColor, var(--skPrimaryColor));border-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggle:focus{box-shadow:0 0 0 2px #0003}.spicyToggle.disabled{pointer-events:none}.spicyToggle:hover{background-color:var(--hoverColor, #555)}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyTooltip{z-index:9999;background-color:var(--skBgColor);color:var(--skTextColor);padding:8px;border-radius:4px;font-size:15px;border:1px solid var(--skBorderColor);display:flex;align-items:center;justify-content:center}.spicyTooltipIcon{font-size:18px}.spicyTreeNodeIcon{width:24px;height:24px;margin-right:8px}.spicyToggleIcon{font-size:14px;margin-left:10px}.spicyTreeNodeItem{list-style:none;margin-left:16px}.spicyTree ul{list-style-type:none;padding-left:20px;margin:0}.spicyTree li{margin:5px 0;position:relative}.spicyTreeNode{cursor:pointer;transition:background-color .3s}.spicyTreeNode:focus-within{outline:2px solid #007bff}
|
|
@@ -8,6 +8,7 @@ interface SpicyAlertProps {
|
|
|
8
8
|
closable?: boolean;
|
|
9
9
|
autoClose?: number;
|
|
10
10
|
closeIcon?: string;
|
|
11
|
+
isRound?: boolean;
|
|
11
12
|
}
|
|
12
13
|
declare function __VLS_template(): {
|
|
13
14
|
slots: {
|
|
@@ -22,6 +23,7 @@ declare const __VLS_component: import("vue").DefineComponent<SpicyAlertProps, {}
|
|
|
22
23
|
iconOnly: boolean;
|
|
23
24
|
closable: boolean;
|
|
24
25
|
autoClose: number;
|
|
26
|
+
isRound: boolean;
|
|
25
27
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
28
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
27
29
|
export default _default;
|
|
@@ -12,8 +12,8 @@ declare function __VLS_template(): {
|
|
|
12
12
|
};
|
|
13
13
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
14
14
|
declare const __VLS_component: import("vue").DefineComponent<SpicySheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpicySheetProps> & Readonly<{}>, {
|
|
15
|
-
color: string;
|
|
16
15
|
isRound: boolean;
|
|
16
|
+
color: string;
|
|
17
17
|
flex: boolean;
|
|
18
18
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
19
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
@@ -20,9 +20,9 @@ declare const __VLS_component: import("vue").DefineComponent<SpicyTextAreaProps,
|
|
|
20
20
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
21
21
|
}>, {
|
|
22
22
|
name: string;
|
|
23
|
+
isRound: boolean;
|
|
23
24
|
modelValue: string;
|
|
24
25
|
color: string;
|
|
25
|
-
isRound: boolean;
|
|
26
26
|
border: string;
|
|
27
27
|
padding: string;
|
|
28
28
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|