@scalar/components 0.2.4 → 0.2.6
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/index.cjs +17 -14
- package/dist/index.js +74 -71
- package/dist/index.umd.cjs +14 -11
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
"use strict";var V=Object.create;var
|
|
1
|
+
"use strict";var V=Object.create;var _=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var T=(r,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of $(o))!N.call(r,l)&&l!==t&&_(r,l,{get:()=>o[l],enumerable:!(n=A(o,l))||n.enumerable});return r};var D=(r,o,t)=>(t=r!=null?V(j(r)):{},T(o||!r||!r.__esModule?_(t,"default",{value:r,enumerable:!0}):t,r));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),E=require("cva"),Z=require("tailwind-merge"),m=require("@headlessui/vue"),F=require("@vueuse/core"),I=require("nanoid"),g="scalar-component",P=Z.extendTailwindMerge({extend:{classGroups:{[g]:[g]}}}),{cva:c,cx:s,compose:Ne}=E.defineConfig({hooks:{onComplete:r=>`${P(r,g)}`}}),H=e.createStaticVNode('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-0f0b7a55></path>',5),O={key:0,class:"circular-loader"};function W(){return e.reactive({isValid:!1,isInvalid:!1,isLoading:!1,startLoading(){this.isLoading=!0},stopLoading(){this.isLoading=!1},validate(r=800){this.isValid=!0;const o=r-300;return new Promise(t=>setTimeout(()=>this.clear().then(()=>t(!0)),o))},invalidate(r=1100){this.isInvalid=!0;const o=r-300;return new Promise(t=>setTimeout(()=>this.clear().then(()=>t(!0)),o))},clear(r=300){return this.isValid=!1,this.isInvalid=!1,this.isLoading=!1,new Promise(o=>{setTimeout(()=>{o(!0)},r)})}})}const q=e.defineComponent({__name:"ScalarLoading",props:{loadingState:{},size:{default:"24px"}},setup(r){return e.useCssVars(o=>({"50aa2fee":o.size})),(o,t)=>o.loadingState?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(s)("loader-wrapper"))},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["svg-loader",{"icon-is-valid":o.loadingState.isValid,"icon-is-invalid":o.loadingState.isInvalid}]),viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[H,o.loadingState.isLoading?(e.openBlock(),e.createElementBlock("g",O,[e.createElementVNode("circle",{class:e.normalizeClass(["loader-path",{"loader-path-off":o.loadingState.isValid||o.loadingState.isInvalid}]),cx:"50",cy:"50",fill:"none",r:"20","stroke-width":"2"},null,2)])):e.createCommentVNode("",!0)],2))],2)):e.createCommentVNode("",!0)}}),f=(r,o)=>{const t=r.__vccOpts||r;for(const[n,l]of o)t[n]=l;return t},w=f(q,[["__scopeId","data-v-0f0b7a55"]]),C={solid:["scalar-button-solid","bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1"],outlined:["scalar-button-outlined","active:bg-btn-1 border border-solid border-border bg-transparent text-fore-1 hocus:bg-back-2"],ghost:["scalar-button-ghost","bg-transparent text-fore-3 active:text-fore-2 hocus:text-fore-2"],danger:["scalar-button-danger","bg-error text-white active:brightness-90 hocus:brightness-90"]},R=c({base:"scalar-button row cursor-pointer items-center justify-center rounded font-medium",variants:{disabled:{true:"bg-background-2 text-color-3 cursor-not-allowed shadow-none"},fullWidth:{true:"w-full"},size:{md:"h-10 px-6 text-sm"},variant:C},compoundVariants:[{disabled:!0,variant:"ghost",class:"bg-transparent text-ghost"}]}),K=["ariaDisabled"],U={key:0,class:"mr-2 h-4 w-4"},G={key:1,class:"ml-2"},B=e.defineComponent({inheritAttrs:!1,__name:"ScalarButton",props:{disabled:{type:Boolean},fullWidth:{type:Boolean,default:!1},loading:{},size:{default:"md"},variant:{default:"solid"}},setup(r){const o=e.computed(()=>{const{class:t,...n}=e.useAttrs();return{className:t||"",rest:n}});return(t,n)=>(e.openBlock(),e.createElementBlock("button",e.mergeProps(o.value.rest,{ariaDisabled:t.disabled||void 0,class:e.unref(s)(e.unref(R)({fullWidth:t.fullWidth,disabled:t.disabled,size:t.size,variant:t.variant}),{"pl-9 pr-3":t.loading},`${o.value.className}`),type:"button"}),[t.$slots.icon?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(t.$slots,"icon")])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),t.loading?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(w),{loadingState:t.loading,size:"20px"},null,8,["loadingState"])])):e.createCommentVNode("",!0)],16,K))}}),J=r=>Object.fromEntries(Array.from(r).map(o=>[o.name,o.value])),Q=r=>({raw:o})=>{const n=new r().parseFromString(o,"image/svg+xml");if(n.getElementsByTagName("parsererror").length)return;const l=n.documentElement,d=J(l.attributes),{width:u,height:h,...v}=d;return e.h("svg",{...v,innerHTML:l.innerHTML})},X=e.defineAsyncComponent(async()=>{const r=typeof DOMParser>"u"?(await import("@xmldom/xmldom")).DOMParser:DOMParser,o=Q(r);return o.props={raw:{type:String,required:!0}},o}),Y=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
|
2
2
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.429"
|
|
3
3
|
d="M24 1.714v44.572M1.714 24h44.572" />
|
|
4
4
|
</svg>`,ee=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 23.5" fill="currentColor">
|
|
5
5
|
<path d="M11.2 23.5 0 12.3l2.15-2.15 9.05 9.05L30.4 0l2.15 2.15z" />
|
|
6
|
-
</svg>`,te=`<svg
|
|
7
|
-
|
|
8
|
-
</svg
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</svg>`,
|
|
6
|
+
</svg>`,te=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
7
|
+
<path d="M4.5 8.25L12 15.75L19.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
|
9
|
+
`,oe=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11
|
+
</svg>
|
|
12
|
+
`,re=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
|
+
<path d="M8.25 19.5L15.75 12L8.25 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
|
+
</svg>`,ae=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<path d="M19.5 15.75L12 8.25L4.5 15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
</svg>
|
|
17
|
+
`,ne=`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
|
15
18
|
<path d="M6,5h4c1.7,0,2-1.3,2-3c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2C4,3.7,4.3,5,6,5z M6,2V1
|
|
16
19
|
c0-0.6,0.5-1,1-1h2c0.5,0,1,0.4,1,1v1.3C10,2.9,9.6,3,9,3H7C6.4,3,6,2.6,6,2z" />
|
|
17
20
|
</svg>`,le=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
d="M24 12a1 1 0 0 0 -1 -1h-3.91a0.51 0.51 0 0 1 -0.49 -0.4 6.83 6.83 0 0 0 -0.94 -2.28 0.5 0.5 0 0 1 0.06 -0.63l2.77 -2.76a1 1 0 1 0 -1.42 -1.42l-2.76 2.77a0.5 0.5 0 0 1 -0.63 0.06 6.83 6.83 0 0 0 -2.28 -0.94 0.5 0.5 0 0 1 -0.4 -0.49V1a1 1 0 0 0 -2 0v3.91a0.51 0.51 0 0 1 -0.4 0.49 6.83 6.83 0 0 0 -2.28 0.94 0.5 0.5 0 0 1 -0.63 -0.06L4.93 3.51a1 1 0 0 0 -1.42 1.42l2.77 2.76a0.5 0.5 0 0 1 0.06 0.63 6.83 6.83 0 0 0 -0.94 2.28 0.5 0.5 0 0 1 -0.49 0.4H1a1 1 0 0 0 0 2h3.91a0.51 0.51 0 0 1 0.49 0.4 6.83 6.83 0 0 0 0.94 2.28 0.5 0.5 0 0 1 -0.06 0.63l-2.77 2.76a1 1 0 1 0 1.42 1.42l2.76 -2.77a0.5 0.5 0 0 1 0.63 -0.06 6.83 6.83 0 0 0 2.28 0.94 0.5 0.5 0 0 1 0.4 0.49V23a1 1 0 0 0 2 0v-3.91a0.51 0.51 0 0 1 0.4 -0.49 6.83 6.83 0 0 0 2.28 -0.94 0.5 0.5 0 0 1 0.63 0.06l2.76 2.77a1 1 0 1 0 1.42 -1.42l-2.77 -2.76a0.5 0.5 0 0 1 -0.06 -0.63 6.83 6.83 0 0 0 0.94 -2.28 0.5 0.5 0 0 1 0.49 -0.4H23a1 1 0 0 0 1 -1Zm-8.74 2.5A5.76 5.76 0 0 1 9.5 8.74a5.66 5.66 0 0 1 0.16 -1.31 0.49 0.49 0 0 1 0.34 -0.36 5.36 5.36 0 0 1 1.8 -0.31 5.47 5.47 0 0 1 5.46 5.46 5.36 5.36 0 0 1 -0.31 1.8 0.49 0.49 0 0 1 -0.35 0.32 5.53 5.53 0 0 1 -1.34 0.16Z"
|
|
42
45
|
fill="currentColor"
|
|
43
46
|
stroke-width="1"></path>
|
|
44
|
-
</svg>`,
|
|
47
|
+
</svg>`,he=`<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
45
48
|
<path d="M3.500 5.000 A1.500 1.500 0 1 0 6.500 5.000 A1.500 1.500 0 1 0 3.500 5.000 Z" fill="currentColor"
|
|
46
49
|
stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
|
|
47
50
|
<path d="M5,2.25a.625.625,0,0,1-.625-.625v-1a.625.625,0,0,1,1.25,0v1A.625.625,0,0,1,5,2.25Z" fill="currentColor"
|
|
@@ -62,7 +65,7 @@
|
|
|
62
65
|
<path
|
|
63
66
|
d="M3.055,3.055a.623.623,0,0,1-.883,0l-.708-.707a.625.625,0,0,1,.884-.884l.707.708A.623.623,0,0,1,3.055,3.055Z"
|
|
64
67
|
fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
|
|
65
|
-
</svg>`,
|
|
68
|
+
</svg>`,ve=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593 593">
|
|
66
69
|
<path fill="currentColor" fill-rule="evenodd"
|
|
67
70
|
d="M347 0c6 0 12 5 12 12v134l94-95c5-5 13-5 17 0l72 72c4 4 5 12 0 16v1l-95 94h134c7 0 12 5 12 12v101c0 7-5 12-12 12H447l95 94c4 5 5 13 0 17l-72 72c-4 4-12 5-16 0h-1l-94-95v134c0 7-5 12-12 12H246c-7 0-12-5-12-12v-70c0-22 9-43 24-59l130-130c14-14 14-37 0-51L259 142a84 84 0 0 1-25-59V12c0-7 5-12 12-12h101ZM138 52h1l219 219c14 14 14 37 0 51L139 542c-4 5-12 5-17 0l-71-70c-4-5-5-12 0-17l95-96H12c-7 0-12-5-12-12V246c0-7 5-12 12-12h134l-95-94c-4-5-4-12 0-17l71-71c4-5 12-5 16 0Z" />
|
|
68
71
|
</svg>`,me=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 662 662">
|
|
@@ -83,7 +86,7 @@
|
|
|
83
86
|
<path fill="currentColor" fill-rule="evenodd"
|
|
84
87
|
d="M11.8214 0.0977942C12.1097 -0.00745677 12.4219 -0.0286524 12.7219 0.0367783C13.0248 0.102864 13.3024 0.254542 13.5216 0.47378C13.7408 0.693018 13.8925 0.970598 13.9586 1.27352C14.024 1.57344 14.0028 1.88572 13.8976 2.17395L10.3236 12.8859L10.3234 12.8866C10.2363 13.1501 10.083 13.3868 9.8781 13.574C9.6738 13.7606 9.42509 13.8918 9.15572 13.9549C8.8863 14.0206 8.60441 14.0151 8.33774 13.9389C8.07131 13.8628 7.82926 13.7187 7.63529 13.5209L5.71795 11.6124L3.70389 12.6538C3.54684 12.7351 3.35857 12.7273 3.20874 12.6334C3.05892 12.5395 2.96981 12.3735 2.9744 12.1967L3.05697 9.013L10.1019 3.8956C10.3812 3.69273 10.4432 3.30188 10.2403 3.02261C10.0374 2.74333 9.64659 2.68139 9.36731 2.88425L2.20283 8.08846L0.473125 6.35875L0.473067 6.3587L0.472941 6.35857C0.285618 6.17138 0.147716 5.9406 0.0716193 5.68694C-0.00393616 5.43509 -0.0162115 5.16853 0.0358379 4.91085C0.0879545 4.62934 0.213796 4.36664 0.400577 4.14957C0.588637 3.93101 0.83165 3.76664 1.1045 3.67345L1.10787 3.6723L1.10787 3.67231L11.8214 0.0977942Z"
|
|
85
88
|
clip-rule="evenodd"></path>
|
|
86
|
-
</svg>`,
|
|
89
|
+
</svg>`,ke=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
|
|
87
90
|
<path fill-rule="evenodd"
|
|
88
91
|
d="M12.6 11.2h.1l3 3a1 1 0 1 1-1.4 1.5l-3-3a1 1 0 0 1-.1-.1 7 7 0 1 1 1.4-1.4zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" />
|
|
89
|
-
</svg>`,x=Object.assign({"./Add.svg":Y,"./CheckMark.svg":ee,"./ChevronDown.svg":te,"./ChevronLeft.svg":oe,"./ChevronRight.svg":re,"./ChevronUp.svg":ae,"./Clipboard.svg":ne,"./Close.svg":le,"./DarkMode.svg":se,"./Ellipses.svg":ie,"./ExternalLink.svg":de,"./GitHub.svg":ce,"./LightDarkModeToggle.svg":ue,"./LightMode.svg":
|
|
92
|
+
</svg>`,x=Object.assign({"./Add.svg":Y,"./CheckMark.svg":ee,"./ChevronDown.svg":te,"./ChevronLeft.svg":oe,"./ChevronRight.svg":re,"./ChevronUp.svg":ae,"./Clipboard.svg":ne,"./Close.svg":le,"./DarkMode.svg":se,"./Ellipses.svg":ie,"./ExternalLink.svg":de,"./GitHub.svg":ce,"./LightDarkModeToggle.svg":ue,"./LightMode.svg":he,"./Logo.svg":ve,"./LogoAPI.svg":me,"./LogoClient.svg":pe,"./LogoMarket.svg":ge,"./LogoSwagger.svg":fe,"./Menu.svg":we,"./PaperAirplane.svg":be,"./Search.svg":ke}),_e=r=>{const o=`./${r}.svg`;return x[o]===void 0?(console.warn(`Could not find icon: ${r}`),""):x[o]},b=e.defineComponent({__name:"ScalarIcon",props:{icon:{},size:{}},setup(r){const o=r,t=c({variants:{size:{xs:"h-3 w-3",sm:"h-3.5 w-3.5",md:"h-4 w-4",lg:"h-5 w-5",xl:"h-6 w-6",full:"h-full w-full"}},defaultVariants:{size:"full"}}),n=e.computed(()=>_e(o.icon));return(l,d)=>n.value?(e.openBlock(),e.createBlock(e.unref(X),{key:0,class:e.normalizeClass(e.unref(s)("scalar-icon",e.unref(t)({size:l.size}))),raw:n.value},null,8,["class","raw"])):e.createCommentVNode("",!0)}}),xe=["ariaDisabled"],Ce={class:"sr-only"},y=e.defineComponent({__name:"ScalarIconButton",props:{label:{},icon:{},disabled:{type:Boolean},variant:{default:"ghost"},size:{default:"md"}},setup(r){const o=c({base:"scalar-icon-button grid aspect-square cursor-pointer rounded",variants:{size:{xs:"h-3.5 w-3.5 p-0.5",sm:"h-5 w-5 p-1",md:"h-10 w-10 p-3",full:"h-full w-full"},disabled:{true:"cursor-not-allowed shadow-none"},variant:C}});return(t,n)=>(e.openBlock(),e.createElementBlock("button",{ariaDisabled:t.disabled||void 0,class:e.normalizeClass(e.unref(s)(e.unref(o)({size:t.size,variant:t.variant,disabled:t.disabled}))),type:"button"},[e.createVNode(e.unref(b),{icon:t.icon},null,8,["icon"]),e.createElementVNode("span",Ce,e.toDisplayString(t.label),1)],10,xe))}}),Be=()=>e.reactive({open:!1,show(){this.open=!0},hide(){this.open=!1}}),ye=e.defineComponent({__name:"ScalarModal",props:{state:{},title:{},bodyClass:{},maxWidth:{},size:{default:"md"},variant:{}},setup(r){const o=c({base:["scalar-modal","col leading-snug relative mx-auto mb-0 mt-20 w-full rounded-lg bg-back-2 text-left text-fore-1 opacity-0"].join(" "),variants:{size:{xs:"max-w-screen-xs",sm:"max-w-screen-sm",md:"max-w-screen-md",lg:"max-w-screen-lg"},variant:{history:"scalar-modal-history bg-back-1",search:"scalar-modal-search"}}});return(t,n)=>(e.openBlock(),e.createBlock(e.unref(m.Dialog),{open:t.state.open,onClose:n[0]||(n[0]=l=>t.state.hide())},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(s)("scalar-modal-layout fixed left-0 top-0","z-[1001] h-[100dvh] w-[100dvw]","bg-backdrop p-5 opacity-0"))},[e.createVNode(e.unref(m.DialogPanel),{class:e.normalizeClass(e.unref(o)({size:t.size,variant:t.variant})),style:e.normalizeStyle({maxWidth:t.maxWidth})},{default:e.withCtx(()=>[t.title?(e.openBlock(),e.createBlock(e.unref(m.DialogTitle),{key:0,class:e.normalizeClass(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-fore-1",{"pb-0 pt-6":t.variant==="history"}])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1},8,["class"])):e.createCommentVNode("",!0),e.createVNode(e.unref(m.DialogDescription),{class:e.normalizeClass(["scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 px-6 pb-4 pt-6",e.unref(s)(t.bodyClass,t.variant==="history"&&"pt-3",t.variant==="search"&&"col max-h-[440px] overflow-hidden p-0")])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:3},8,["class"])]),_:3},8,["class","style"])],2)]),_:3},8,["open"]))}}),M=f(ye,[["__scopeId","data-v-4f0b1a0d"]]),Me={class:"scalar-input-container relative"},ze=["for"],Le={class:"icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3"},Se=e.defineComponent({__name:"ScalarTextField",props:{modelValue:{},placeholder:{},label:{},labelShadowColor:{default:"var(--theme-background-2, var(--default-theme-background-2))"},error:{type:Boolean},isMultiline:{type:Boolean},helperText:{},emitOnBlur:{type:Boolean,default:!0},handleFieldSubmit:{},handleFieldChange:{},disableTrim:{type:Boolean,default:!1}},emits:["submit","update:modelValue"],setup(r,{emit:o}){const t=r,n=c({base:"scalar-input-wrapper relative flex items-center rounded border border-solid border-border",variants:{focus:{true:"scalar-input-wrapper-focus border-fore-3 has-actv-btn:border has-actv-btn:border-border"},error:{true:"scalar-input-wrapper-error border-error"}}}),l=e.useAttrs(),d=l.id||`id-${I.nanoid()}`,u=e.ref(),h=e.ref(!1);let v;if(t.isMultiline){const{triggerResize:a}=F.useTextareaAutosize({element:u,input:t.modelValue});v=a}function L(a){const i=a.target.value;t.isMultiline&&v(),t.handleFieldChange?t.handleFieldChange(i):o("update:modelValue",i)}function k(a){const i=a.target,p=t.disableTrim||t.isMultiline?i.value:i.value.trim();t.handleFieldSubmit?t.handleFieldSubmit(p):o("submit",p)}function S(a){h.value=!1,t.emitOnBlur&&t.modelValue&&k(a)}return e.onMounted(()=>{var a;Object.prototype.hasOwnProperty.call(l,"autofocus")&&((a=u.value)==null||a.focus())}),(a,i)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(n)({error:a.error,focus:h.value}))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.isMultiline?"textarea":"input"),e.mergeProps({id:e.unref(d)},a.$attrs,{ref_key:"input",ref:u,class:["scalar-input",e.unref(s)({"min-h-[77px]":a.isMultiline},"z-10 w-full resize-none appearance-none border-0 bg-transparent p-3 text-sm text-fore-1","outline-none transition-opacity")],placeholder:a.placeholder,value:a.modelValue,onBlur:S,onFocus:i[0]||(i[0]=p=>h.value=!0),onInput:L,onKeyup:e.withKeys(k,["enter"])}),null,16,["id","class","placeholder","value","onKeyup"])),a.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(e.unref(s)("scalar-input-label pointer-events-none absolute left-0 top-0 mx-2 my-3 px-1 text-xs","shadow-current z-10 origin-top-left rounded text-fore-3 transition-transform")),for:e.unref(d),style:e.normalizeStyle({"box-shadow":`0 0 4px 4px ${a.labelShadowColor}`,"background-color":a.labelShadowColor})},e.toDisplayString(a.label),15,ze)):e.createCommentVNode("",!0),e.createElementVNode("div",Le,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(s)("helper-text before:rounded-full mt-1.5 flex items-center text-xs text-error before:font-black","before:mr-1.5 before:block before:h-4 before:w-4 before:text-center before:text-xxs before:leading-4","before:bg-error before:text-white before:content-['!'] empty:hidden"))},e.toDisplayString(a.helperText),3)]))}}),z=f(Se,[["__scopeId","data-v-acbd8aa4"]]),Ve={boxShadow:{DEFAULT:"var(--theme-shadow-1, var(--default-theme-shadow-1))",md:"var(--theme-shadow-2, var(--default-theme-shadow-2))",sm:"rgba(0, 0, 0, 0.09) 0px 1px 4px",none:"0 0 #0000"},colors:{"fore-1":"var(--theme-color-1, var(--default-theme-color-1))","fore-2":"var(--theme-color-2, var(--default-theme-color-2))","fore-3":"var(--theme-color-3, var(--default-theme-color-3))",accent:"var(--theme-color-accent, var(--default-theme-color-accent))","back-1":"var(--theme-background-1, var(--default-theme-background-1))","back-2":"var(--theme-background-2, var(--default-theme-background-2))","back-3":"var(--theme-background-3, var(--default-theme-background-3))","back-accent":"var(--theme-background-accent, var(--default-theme-background-accent))",backdrop:"rgba(0, 0, 0, 0.44)",border:"var(--theme-border-color, var(--default-theme-border-color))","back-btn-1":"var(--theme-button-1, var(--default-theme-button-1))","fore-btn-1":"var(--theme-button-1-color, var(--default-theme-button-1-color))","hover-btn-1":"var(--theme-button-1-hover, var(--default-theme-button-1-hover))",white:"#FFF",green:"var(--theme-color-green, var(--default-theme-color-green))",red:"var(--theme-color-red, var(--default-theme-color-red))",yellow:"var(--theme-color-yellow, var(--default-theme-color-yellow))",blue:"var(--theme-color-blue, var(--default-theme-color-blue))",orange:"var(--theme-color-orange, var(--default-theme-color-orange))",purple:"var(--theme-color-purple, var(--default-theme-color-purple))",error:"var(--theme-error-color, var(--default-theme-color-red))",ghost:"var(--theme-color-ghost, var(--default-theme-color-ghost))",transparent:"transparent"}},Ae={borderRadius:{DEFAULT:"var(--theme-radius, var(--default-theme-radius))",md:"var(--theme-radius, var(--default-theme-radius))",lg:"var(--theme-radius-lg, var(--default-theme-radius-lg))",xl:"var(--theme-radius-xl, var(--default-theme-radius-xl))"},fontSize:{xxs:"var(--theme-micro, var(--default-theme-micro, var(--theme-font-size-5, var(--default-theme-font-size-5))))",xs:"var(--theme-mini, var(--default-theme-mini, var(--theme-font-size-4, var(--default-theme-font-size-4))))",sm:"var(--theme-small, var(--default-theme-small, var(--theme-font-size-3, var(--default-theme-font-size-3))))",base:"var(--theme-paragraph, var(--default-theme-paragraph, var(--theme-font-size-2, var(--default-theme-font-size-2))))",lg:"var(--theme-font-size-1, var(--default-theme-font-size-1))"},fontWeight:{medium:"var(--theme-font-medium, var(--default-theme-font-medium))",bold:"var(--theme-font-bold, var(--default-theme-font-bold))"},maxWidth:{"screen-xs":"480px","screen-sm":"540px","screen-md":"640px","screen-lg":"800px"}},$e={install:r=>{r.component("ScalarButton",B),r.component("ScalarIcon",b),r.component("ScalarIconButton",y),r.component("ScalarLoading",w),r.component("ScalarModal",M),r.component("ScalarTextField",z)}};exports.ScalarButton=B;exports.ScalarIcon=b;exports.ScalarIconButton=y;exports.ScalarLoading=w;exports.ScalarModal=M;exports.ScalarTextField=z;exports.default=$e;exports.extend=Ae;exports.theme=Ve;exports.useLoadingState=W;exports.useModal=Be;
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { defineComponent as g, useCssVars as O, openBlock as l, createElementBlock as d, normalizeClass as s, unref as a, createElementVNode as
|
|
1
|
+
import { defineComponent as g, useCssVars as O, openBlock as l, createElementBlock as d, normalizeClass as s, unref as a, createElementVNode as v, createCommentVNode as h, createStaticVNode as E, reactive as V, computed as $, useAttrs as j, mergeProps as T, renderSlot as k, createVNode as x, defineAsyncComponent as N, h as W, createBlock as C, toDisplayString as y, withCtx as _, normalizeStyle as Z, createTextVNode as R, ref as B, onMounted as K, resolveDynamicComponent as U, withKeys as q } from "vue";
|
|
2
2
|
import { defineConfig as G } from "cva";
|
|
3
3
|
import { extendTailwindMerge as J } from "tailwind-merge";
|
|
4
4
|
import { Dialog as Q, DialogPanel as X, DialogTitle as Y, DialogDescription as ee } from "@headlessui/vue";
|
|
5
5
|
import { useTextareaAutosize as te } from "@vueuse/core";
|
|
6
6
|
import { nanoid as oe } from "nanoid";
|
|
7
|
-
const
|
|
7
|
+
const M = "scalar-component", re = J({
|
|
8
8
|
extend: {
|
|
9
9
|
classGroups: {
|
|
10
10
|
// Add the scalar class prefix as a custom class to be deduped by tailwind-merge
|
|
11
|
-
[
|
|
11
|
+
[M]: [M]
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
}), { cva:
|
|
14
|
+
}), { cva: m, cx: c, compose: et } = G({
|
|
15
15
|
hooks: {
|
|
16
|
-
onComplete: (o) => `${re(o,
|
|
16
|
+
onComplete: (o) => `${re(o, M)}`
|
|
17
17
|
}
|
|
18
18
|
}), ae = /* @__PURE__ */ E('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-0f0b7a55></path>', 5), ne = {
|
|
19
19
|
key: 0,
|
|
@@ -77,7 +77,7 @@ const le = /* @__PURE__ */ g({
|
|
|
77
77
|
}, [
|
|
78
78
|
ae,
|
|
79
79
|
t.loadingState.isLoading ? (l(), d("g", ne, [
|
|
80
|
-
|
|
80
|
+
v("circle", {
|
|
81
81
|
class: s(["loader-path", {
|
|
82
82
|
"loader-path-off": t.loadingState.isValid || t.loadingState.isInvalid
|
|
83
83
|
}]),
|
|
@@ -87,16 +87,16 @@ const le = /* @__PURE__ */ g({
|
|
|
87
87
|
r: "20",
|
|
88
88
|
"stroke-width": "2"
|
|
89
89
|
}, null, 2)
|
|
90
|
-
])) :
|
|
90
|
+
])) : h("", !0)
|
|
91
91
|
], 2))
|
|
92
|
-
], 2)) :
|
|
92
|
+
], 2)) : h("", !0);
|
|
93
93
|
}
|
|
94
|
-
}),
|
|
94
|
+
}), z = (o, t) => {
|
|
95
95
|
const e = o.__vccOpts || o;
|
|
96
96
|
for (const [n, i] of t)
|
|
97
97
|
e[n] = i;
|
|
98
98
|
return e;
|
|
99
|
-
},
|
|
99
|
+
}, D = /* @__PURE__ */ z(le, [["__scopeId", "data-v-0f0b7a55"]]), F = {
|
|
100
100
|
solid: [
|
|
101
101
|
"scalar-button-solid",
|
|
102
102
|
"bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1"
|
|
@@ -113,7 +113,7 @@ const le = /* @__PURE__ */ g({
|
|
|
113
113
|
"scalar-button-danger",
|
|
114
114
|
"bg-error text-white active:brightness-90 hocus:brightness-90"
|
|
115
115
|
]
|
|
116
|
-
}, se =
|
|
116
|
+
}, se = m({
|
|
117
117
|
base: "scalar-button row cursor-pointer items-center justify-center rounded font-medium",
|
|
118
118
|
variants: {
|
|
119
119
|
disabled: {
|
|
@@ -148,10 +148,10 @@ const le = /* @__PURE__ */ g({
|
|
|
148
148
|
},
|
|
149
149
|
setup(o) {
|
|
150
150
|
const t = $(() => {
|
|
151
|
-
const { class: e, ...n } =
|
|
151
|
+
const { class: e, ...n } = j();
|
|
152
152
|
return { className: e || "", rest: n };
|
|
153
153
|
});
|
|
154
|
-
return (e, n) => (l(), d("button",
|
|
154
|
+
return (e, n) => (l(), d("button", T(t.value.rest, {
|
|
155
155
|
ariaDisabled: e.disabled || void 0,
|
|
156
156
|
class: a(c)(
|
|
157
157
|
a(se)({ fullWidth: e.fullWidth, disabled: e.disabled, size: e.size, variant: e.variant }),
|
|
@@ -161,48 +161,51 @@ const le = /* @__PURE__ */ g({
|
|
|
161
161
|
type: "button"
|
|
162
162
|
}), [
|
|
163
163
|
e.$slots.icon ? (l(), d("div", de, [
|
|
164
|
-
|
|
165
|
-
])) :
|
|
166
|
-
|
|
164
|
+
k(e.$slots, "icon")
|
|
165
|
+
])) : h("", !0),
|
|
166
|
+
k(e.$slots, "default"),
|
|
167
167
|
e.loading ? (l(), d("div", ce, [
|
|
168
|
-
|
|
168
|
+
x(a(D), {
|
|
169
169
|
loadingState: e.loading,
|
|
170
170
|
size: "20px"
|
|
171
171
|
}, null, 8, ["loadingState"])
|
|
172
|
-
])) :
|
|
172
|
+
])) : h("", !0)
|
|
173
173
|
], 16, ie));
|
|
174
174
|
}
|
|
175
|
-
}),
|
|
175
|
+
}), he = (o) => Object.fromEntries(Array.from(o).map((t) => [t.name, t.value])), ve = (o) => ({ raw: t }) => {
|
|
176
176
|
const n = new o().parseFromString(t, "image/svg+xml");
|
|
177
177
|
if (n.getElementsByTagName("parsererror").length)
|
|
178
178
|
return;
|
|
179
|
-
const i = n.documentElement,
|
|
179
|
+
const i = n.documentElement, p = he(i.attributes), { width: f, height: w, ...b } = p;
|
|
180
180
|
return W("svg", { ...b, innerHTML: i.innerHTML });
|
|
181
181
|
}, ge = N(async () => {
|
|
182
|
-
const o = typeof DOMParser > "u" ? (await import("@xmldom/xmldom")).DOMParser : DOMParser, t =
|
|
182
|
+
const o = typeof DOMParser > "u" ? (await import("@xmldom/xmldom")).DOMParser : DOMParser, t = ve(o);
|
|
183
183
|
return t.props = {
|
|
184
184
|
raw: {
|
|
185
185
|
type: String,
|
|
186
186
|
required: !0
|
|
187
187
|
}
|
|
188
188
|
}, t;
|
|
189
|
-
}),
|
|
189
|
+
}), pe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
|
190
190
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.429"
|
|
191
191
|
d="M24 1.714v44.572M1.714 24h44.572" />
|
|
192
|
-
</svg>`,
|
|
192
|
+
</svg>`, me = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 23.5" fill="currentColor">
|
|
193
193
|
<path d="M11.2 23.5 0 12.3l2.15-2.15 9.05 9.05L30.4 0l2.15 2.15z" />
|
|
194
|
-
</svg>`, fe = `<svg
|
|
195
|
-
|
|
196
|
-
</svg
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
</svg>`,
|
|
194
|
+
</svg>`, fe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
195
|
+
<path d="M4.5 8.25L12 15.75L19.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
196
|
+
</svg>
|
|
197
|
+
`, we = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
198
|
+
<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
199
|
+
</svg>
|
|
200
|
+
`, be = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
201
|
+
<path d="M8.25 19.5L15.75 12L8.25 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
202
|
+
</svg>`, _e = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
203
|
+
<path d="M19.5 15.75L12 8.25L4.5 15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
204
|
+
</svg>
|
|
205
|
+
`, ke = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
|
203
206
|
<path d="M6,5h4c1.7,0,2-1.3,2-3c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2C4,3.7,4.3,5,6,5z M6,2V1
|
|
204
207
|
c0-0.6,0.5-1,1-1h2c0.5,0,1,0.4,1,1v1.3C10,2.9,9.6,3,9,3H7C6.4,3,6,2.6,6,2z" />
|
|
205
|
-
</svg>`,
|
|
208
|
+
</svg>`, xe = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
206
209
|
<path stroke="currentColor" d="m12.5 1.5-11 11m0-11 11 11" />
|
|
207
210
|
</svg>`, Ce = `<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
208
211
|
<path
|
|
@@ -211,16 +214,16 @@ const le = /* @__PURE__ */ g({
|
|
|
211
214
|
</svg>`, ye = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
212
215
|
<path
|
|
213
216
|
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
|
214
|
-
</svg>`,
|
|
217
|
+
</svg>`, Le = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
|
|
215
218
|
<g fill="none" fill-rule="evenodd" transform="translate(.67 .67)">
|
|
216
219
|
<rect transform="rotate(180 4 4)" />
|
|
217
220
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"
|
|
218
221
|
d="M2.85 1.73h3.4v3.4m0-3.4L1.74 6.24" />
|
|
219
222
|
</g>
|
|
220
|
-
</svg>`,
|
|
223
|
+
</svg>`, Me = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024">
|
|
221
224
|
<path
|
|
222
225
|
d="M512 0a512 512 0 0 0-162 998c26 4 35-11 35-25l-1-95c-128 23-161-32-172-60-6-15-31-61-52-73-18-10-44-33-1-33 40-1 69 37 78 52 46 78 120 56 149 43 5-33 18-56 33-69-114-13-234-56-234-253 0-56 20-101 53-137-5-13-23-65 5-136 0 0 43-13 141 53a487 487 0 0 1 256 0c98-66 141-53 141-53 28 71 10 123 5 136 33 36 53 81 53 137 0 197-120 240-234 253 18 16 35 47 35 95l-1 140c0 14 9 30 35 25A512 512 0 0 0 512 0z" />
|
|
223
|
-
</svg>`,
|
|
226
|
+
</svg>`, ze = `<svg
|
|
224
227
|
height="24"
|
|
225
228
|
viewBox="0 0 24 24"
|
|
226
229
|
width="24"
|
|
@@ -262,19 +265,19 @@ const le = /* @__PURE__ */ g({
|
|
|
262
265
|
</svg>`, $e = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 642 642" fill="currentColor">
|
|
263
266
|
<path
|
|
264
267
|
d="M321 0a321 321 0 1 1 0 642 321 321 0 0 1 0-642Zm51.3 63L321 189.5 269.7 63l1 136.5-95.8-97.2L228 228l-125.7-53.1 97.2 95.8-136.5-1L189.5 321 63 372.3l136.5-1-97.2 95.8 125.7-53-53.1 125.6 95.8-97.2-1 136.5L321 452.5 372.3 579l-1-136.5 95.8 97.2-53-125.7 125.6 53.1-97.2-95.8 136.5 1L452.5 321 579 269.7l-136.5 1 97.2-95.8L414 228l53.1-125.7-95.8 97.2 1-136.5Z" />
|
|
265
|
-
</svg>`,
|
|
268
|
+
</svg>`, je = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620" fill="currentColor">
|
|
266
269
|
<path
|
|
267
270
|
d="M529.2 90.8A310 310 0 1 0 90.8 529.2 310 310 0 0 0 529.2 90.8M122.4 498.2c-54.9-55-15.4-183.5 88.2-287 103.6-103.7 232.1-143.2 287-88.3 54.9 54.8 15.4 183.4-88.3 287-103.5 103.6-232 143.1-286.9 88.3m261.8-262.7A104.7 104.7 0 1 1 236 383.7a104.7 104.7 0 0 1 148.2-148.2" />
|
|
268
|
-
</svg>`,
|
|
271
|
+
</svg>`, Te = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 14 14">
|
|
269
272
|
<path fill="none" stroke="currentColor" d="M14 3.4H0m14 7.2H0" />
|
|
270
|
-
</svg>`,
|
|
273
|
+
</svg>`, Ze = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
271
274
|
<path fill="currentColor" fill-rule="evenodd"
|
|
272
275
|
d="M11.8214 0.0977942C12.1097 -0.00745677 12.4219 -0.0286524 12.7219 0.0367783C13.0248 0.102864 13.3024 0.254542 13.5216 0.47378C13.7408 0.693018 13.8925 0.970598 13.9586 1.27352C14.024 1.57344 14.0028 1.88572 13.8976 2.17395L10.3236 12.8859L10.3234 12.8866C10.2363 13.1501 10.083 13.3868 9.8781 13.574C9.6738 13.7606 9.42509 13.8918 9.15572 13.9549C8.8863 14.0206 8.60441 14.0151 8.33774 13.9389C8.07131 13.8628 7.82926 13.7187 7.63529 13.5209L5.71795 11.6124L3.70389 12.6538C3.54684 12.7351 3.35857 12.7273 3.20874 12.6334C3.05892 12.5395 2.96981 12.3735 2.9744 12.1967L3.05697 9.013L10.1019 3.8956C10.3812 3.69273 10.4432 3.30188 10.2403 3.02261C10.0374 2.74333 9.64659 2.68139 9.36731 2.88425L2.20283 8.08846L0.473125 6.35875L0.473067 6.3587L0.472941 6.35857C0.285618 6.17138 0.147716 5.9406 0.0716193 5.68694C-0.00393616 5.43509 -0.0162115 5.16853 0.0358379 4.91085C0.0879545 4.62934 0.213796 4.36664 0.400577 4.14957C0.588637 3.93101 0.83165 3.76664 1.1045 3.67345L1.10787 3.6723L1.10787 3.67231L11.8214 0.0977942Z"
|
|
273
276
|
clip-rule="evenodd"></path>
|
|
274
|
-
</svg>`,
|
|
277
|
+
</svg>`, De = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
|
|
275
278
|
<path fill-rule="evenodd"
|
|
276
279
|
d="M12.6 11.2h.1l3 3a1 1 0 1 1-1.4 1.5l-3-3a1 1 0 0 1-.1-.1 7 7 0 1 1 1.4-1.4zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" />
|
|
277
|
-
</svg>`, A = /* @__PURE__ */ Object.assign({ "./Add.svg":
|
|
280
|
+
</svg>`, A = /* @__PURE__ */ Object.assign({ "./Add.svg": pe, "./CheckMark.svg": me, "./ChevronDown.svg": fe, "./ChevronLeft.svg": we, "./ChevronRight.svg": be, "./ChevronUp.svg": _e, "./Clipboard.svg": ke, "./Close.svg": xe, "./DarkMode.svg": Ce, "./Ellipses.svg": ye, "./ExternalLink.svg": Le, "./GitHub.svg": Me, "./LightDarkModeToggle.svg": ze, "./LightMode.svg": Se, "./Logo.svg": Be, "./LogoAPI.svg": Ae, "./LogoClient.svg": Ve, "./LogoMarket.svg": $e, "./LogoSwagger.svg": je, "./Menu.svg": Te, "./PaperAirplane.svg": Ze, "./Search.svg": De }), Fe = (o) => {
|
|
278
281
|
const t = `./${o}.svg`;
|
|
279
282
|
return A[t] === void 0 ? (console.warn(`Could not find icon: ${o}`), "") : A[t];
|
|
280
283
|
}, I = /* @__PURE__ */ g({
|
|
@@ -284,7 +287,7 @@ const le = /* @__PURE__ */ g({
|
|
|
284
287
|
size: {}
|
|
285
288
|
},
|
|
286
289
|
setup(o) {
|
|
287
|
-
const t = o, e =
|
|
290
|
+
const t = o, e = m({
|
|
288
291
|
variants: {
|
|
289
292
|
size: {
|
|
290
293
|
xs: "h-3 w-3",
|
|
@@ -299,11 +302,11 @@ const le = /* @__PURE__ */ g({
|
|
|
299
302
|
size: "full"
|
|
300
303
|
}
|
|
301
304
|
}), n = $(() => Fe(t.icon));
|
|
302
|
-
return (i,
|
|
305
|
+
return (i, p) => n.value ? (l(), C(a(ge), {
|
|
303
306
|
key: 0,
|
|
304
307
|
class: s(a(c)("scalar-icon", a(e)({ size: i.size }))),
|
|
305
308
|
raw: n.value
|
|
306
|
-
}, null, 8, ["class", "raw"])) :
|
|
309
|
+
}, null, 8, ["class", "raw"])) : h("", !0);
|
|
307
310
|
}
|
|
308
311
|
}), Ie = ["ariaDisabled"], Pe = { class: "sr-only" }, He = /* @__PURE__ */ g({
|
|
309
312
|
__name: "ScalarIconButton",
|
|
@@ -315,7 +318,7 @@ const le = /* @__PURE__ */ g({
|
|
|
315
318
|
size: { default: "md" }
|
|
316
319
|
},
|
|
317
320
|
setup(o) {
|
|
318
|
-
const t =
|
|
321
|
+
const t = m({
|
|
319
322
|
base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
|
|
320
323
|
variants: {
|
|
321
324
|
size: {
|
|
@@ -335,8 +338,8 @@ const le = /* @__PURE__ */ g({
|
|
|
335
338
|
class: s(a(c)(a(t)({ size: e.size, variant: e.variant, disabled: e.disabled }))),
|
|
336
339
|
type: "button"
|
|
337
340
|
}, [
|
|
338
|
-
|
|
339
|
-
|
|
341
|
+
x(a(I), { icon: e.icon }, null, 8, ["icon"]),
|
|
342
|
+
v("span", Pe, y(e.label), 1)
|
|
340
343
|
], 10, Ie));
|
|
341
344
|
}
|
|
342
345
|
}), ot = () => V({
|
|
@@ -358,7 +361,7 @@ const le = /* @__PURE__ */ g({
|
|
|
358
361
|
variant: {}
|
|
359
362
|
},
|
|
360
363
|
setup(o) {
|
|
361
|
-
const t =
|
|
364
|
+
const t = m({
|
|
362
365
|
base: [
|
|
363
366
|
"scalar-modal",
|
|
364
367
|
"col leading-snug relative mx-auto mb-0 mt-20 w-full rounded-lg bg-back-2 text-left text-fore-1 opacity-0"
|
|
@@ -381,7 +384,7 @@ const le = /* @__PURE__ */ g({
|
|
|
381
384
|
onClose: n[0] || (n[0] = (i) => e.state.hide())
|
|
382
385
|
}, {
|
|
383
386
|
default: _(() => [
|
|
384
|
-
|
|
387
|
+
v("div", {
|
|
385
388
|
class: s(
|
|
386
389
|
a(c)(
|
|
387
390
|
"scalar-modal-layout fixed left-0 top-0",
|
|
@@ -390,9 +393,9 @@ const le = /* @__PURE__ */ g({
|
|
|
390
393
|
)
|
|
391
394
|
)
|
|
392
395
|
}, [
|
|
393
|
-
|
|
396
|
+
x(a(X), {
|
|
394
397
|
class: s(a(t)({ size: e.size, variant: e.variant })),
|
|
395
|
-
style:
|
|
398
|
+
style: Z({ maxWidth: e.maxWidth })
|
|
396
399
|
}, {
|
|
397
400
|
default: _(() => [
|
|
398
401
|
e.title ? (l(), C(a(Y), {
|
|
@@ -403,8 +406,8 @@ const le = /* @__PURE__ */ g({
|
|
|
403
406
|
R(y(e.title), 1)
|
|
404
407
|
]),
|
|
405
408
|
_: 1
|
|
406
|
-
}, 8, ["class"])) :
|
|
407
|
-
|
|
409
|
+
}, 8, ["class"])) : h("", !0),
|
|
410
|
+
x(a(ee), {
|
|
408
411
|
class: s([
|
|
409
412
|
"scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 px-6 pb-4 pt-6",
|
|
410
413
|
a(c)(
|
|
@@ -415,7 +418,7 @@ const le = /* @__PURE__ */ g({
|
|
|
415
418
|
])
|
|
416
419
|
}, {
|
|
417
420
|
default: _(() => [
|
|
418
|
-
|
|
421
|
+
k(e.$slots, "default", {}, void 0, !0)
|
|
419
422
|
]),
|
|
420
423
|
_: 3
|
|
421
424
|
}, 8, ["class"])
|
|
@@ -427,7 +430,7 @@ const le = /* @__PURE__ */ g({
|
|
|
427
430
|
_: 3
|
|
428
431
|
}, 8, ["open"]));
|
|
429
432
|
}
|
|
430
|
-
}), Ee = /* @__PURE__ */
|
|
433
|
+
}), Ee = /* @__PURE__ */ z(Oe, [["__scopeId", "data-v-4f0b1a0d"]]), Ne = { class: "scalar-input-container relative" }, We = ["for"], Re = { class: "icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3" }, Ke = /* @__PURE__ */ g({
|
|
431
434
|
__name: "ScalarTextField",
|
|
432
435
|
props: {
|
|
433
436
|
modelValue: {},
|
|
@@ -444,7 +447,7 @@ const le = /* @__PURE__ */ g({
|
|
|
444
447
|
},
|
|
445
448
|
emits: ["submit", "update:modelValue"],
|
|
446
449
|
setup(o, { emit: t }) {
|
|
447
|
-
const e = o, n =
|
|
450
|
+
const e = o, n = m({
|
|
448
451
|
base: "scalar-input-wrapper relative flex items-center rounded border border-solid border-border",
|
|
449
452
|
variants: {
|
|
450
453
|
focus: {
|
|
@@ -452,7 +455,7 @@ const le = /* @__PURE__ */ g({
|
|
|
452
455
|
},
|
|
453
456
|
error: { true: "scalar-input-wrapper-error border-error" }
|
|
454
457
|
}
|
|
455
|
-
}), i =
|
|
458
|
+
}), i = j(), p = i.id || `id-${oe()}`, f = B(), w = B(!1);
|
|
456
459
|
let b;
|
|
457
460
|
if (e.isMultiline) {
|
|
458
461
|
const { triggerResize: r } = te({
|
|
@@ -466,8 +469,8 @@ const le = /* @__PURE__ */ g({
|
|
|
466
469
|
e.isMultiline && b(), e.handleFieldChange ? e.handleFieldChange(u) : t("update:modelValue", u);
|
|
467
470
|
}
|
|
468
471
|
function S(r) {
|
|
469
|
-
const u = r.target,
|
|
470
|
-
e.handleFieldSubmit ? e.handleFieldSubmit(
|
|
472
|
+
const u = r.target, L = e.disableTrim || e.isMultiline ? u.value : u.value.trim();
|
|
473
|
+
e.handleFieldSubmit ? e.handleFieldSubmit(L) : t("submit", L);
|
|
471
474
|
}
|
|
472
475
|
function H(r) {
|
|
473
476
|
w.value = !1, e.emitOnBlur && e.modelValue && S(r);
|
|
@@ -476,10 +479,10 @@ const le = /* @__PURE__ */ g({
|
|
|
476
479
|
var r;
|
|
477
480
|
Object.prototype.hasOwnProperty.call(i, "autofocus") && ((r = f.value) == null || r.focus());
|
|
478
481
|
}), (r, u) => (l(), d("div", Ne, [
|
|
479
|
-
|
|
482
|
+
v("div", {
|
|
480
483
|
class: s(a(n)({ error: r.error, focus: w.value }))
|
|
481
484
|
}, [
|
|
482
|
-
(l(), C(U(r.isMultiline ? "textarea" : "input"),
|
|
485
|
+
(l(), C(U(r.isMultiline ? "textarea" : "input"), T({ id: a(p) }, r.$attrs, {
|
|
483
486
|
ref_key: "input",
|
|
484
487
|
ref: f,
|
|
485
488
|
class: [
|
|
@@ -493,7 +496,7 @@ const le = /* @__PURE__ */ g({
|
|
|
493
496
|
placeholder: r.placeholder,
|
|
494
497
|
value: r.modelValue,
|
|
495
498
|
onBlur: H,
|
|
496
|
-
onFocus: u[0] || (u[0] = (
|
|
499
|
+
onFocus: u[0] || (u[0] = (L) => w.value = !0),
|
|
497
500
|
onInput: P,
|
|
498
501
|
onKeyup: q(S, ["enter"])
|
|
499
502
|
}), null, 16, ["id", "class", "placeholder", "value", "onKeyup"])),
|
|
@@ -505,17 +508,17 @@ const le = /* @__PURE__ */ g({
|
|
|
505
508
|
"shadow-current z-10 origin-top-left rounded text-fore-3 transition-transform"
|
|
506
509
|
)
|
|
507
510
|
),
|
|
508
|
-
for: a(
|
|
509
|
-
style:
|
|
511
|
+
for: a(p),
|
|
512
|
+
style: Z({
|
|
510
513
|
"box-shadow": `0 0 4px 4px ${r.labelShadowColor}`,
|
|
511
514
|
"background-color": r.labelShadowColor
|
|
512
515
|
})
|
|
513
|
-
}, y(r.label), 15, We)) :
|
|
514
|
-
|
|
515
|
-
|
|
516
|
+
}, y(r.label), 15, We)) : h("", !0),
|
|
517
|
+
v("div", Re, [
|
|
518
|
+
k(r.$slots, "default", {}, void 0, !0)
|
|
516
519
|
])
|
|
517
520
|
], 2),
|
|
518
|
-
|
|
521
|
+
v("span", {
|
|
519
522
|
class: s(
|
|
520
523
|
a(c)(
|
|
521
524
|
"helper-text before:rounded-full mt-1.5 flex items-center text-xs text-error before:font-black",
|
|
@@ -526,7 +529,7 @@ const le = /* @__PURE__ */ g({
|
|
|
526
529
|
}, y(r.helperText), 3)
|
|
527
530
|
]));
|
|
528
531
|
}
|
|
529
|
-
}), Ue = /* @__PURE__ */
|
|
532
|
+
}), Ue = /* @__PURE__ */ z(Ke, [["__scopeId", "data-v-acbd8aa4"]]), rt = {
|
|
530
533
|
boxShadow: {
|
|
531
534
|
DEFAULT: "var(--theme-shadow-1, var(--default-theme-shadow-1))",
|
|
532
535
|
md: "var(--theme-shadow-2, var(--default-theme-shadow-2))",
|
|
@@ -584,14 +587,14 @@ const le = /* @__PURE__ */ g({
|
|
|
584
587
|
}
|
|
585
588
|
}, nt = {
|
|
586
589
|
install: (o) => {
|
|
587
|
-
o.component("ScalarButton", ue), o.component("ScalarIcon", I), o.component("ScalarIconButton", He), o.component("ScalarLoading",
|
|
590
|
+
o.component("ScalarButton", ue), o.component("ScalarIcon", I), o.component("ScalarIconButton", He), o.component("ScalarLoading", D), o.component("ScalarModal", Ee), o.component("ScalarTextField", Ue);
|
|
588
591
|
}
|
|
589
592
|
};
|
|
590
593
|
export {
|
|
591
594
|
ue as ScalarButton,
|
|
592
595
|
I as ScalarIcon,
|
|
593
596
|
He as ScalarIconButton,
|
|
594
|
-
|
|
597
|
+
D as ScalarLoading,
|
|
595
598
|
Ee as ScalarModal,
|
|
596
599
|
Ue as ScalarTextField,
|
|
597
600
|
nt as default,
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("cva"),require("tailwind-merge"),require("@headlessui/vue"),require("@vueuse/core"),require("nanoid")):typeof define=="function"&&define.amd?define(["exports","vue","cva","tailwind-merge","@headlessui/vue","@vueuse/core","nanoid"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["@scalar/components"]={},n.Vue,n.cva$1,n.tailwindMerge,n.vue$1,n.core,n.nanoid))})(this,function(n,e,S,
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("cva"),require("tailwind-merge"),require("@headlessui/vue"),require("@vueuse/core"),require("nanoid")):typeof define=="function"&&define.amd?define(["exports","vue","cva","tailwind-merge","@headlessui/vue","@vueuse/core","nanoid"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["@scalar/components"]={},n.Vue,n.cva$1,n.tailwindMerge,n.vue$1,n.core,n.nanoid))})(this,function(n,e,L,S,m,V,A){"use strict";const f="scalar-component",T=S.extendTailwindMerge({extend:{classGroups:{[f]:[f]}}}),{cva:c,cx:i,compose:oe}=L.defineConfig({hooks:{onComplete:r=>`${T(r,f)}`}}),$=e.createStaticVNode('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-0f0b7a55></path>',5),j={key:0,class:"circular-loader"};function N(){return e.reactive({isValid:!1,isInvalid:!1,isLoading:!1,startLoading(){this.isLoading=!0},stopLoading(){this.isLoading=!1},validate(r=800){this.isValid=!0;const o=r-300;return new Promise(t=>setTimeout(()=>this.clear().then(()=>t(!0)),o))},invalidate(r=1100){this.isInvalid=!0;const o=r-300;return new Promise(t=>setTimeout(()=>this.clear().then(()=>t(!0)),o))},clear(r=300){return this.isValid=!1,this.isInvalid=!1,this.isLoading=!1,new Promise(o=>{setTimeout(()=>{o(!0)},r)})}})}const D=e.defineComponent({__name:"ScalarLoading",props:{loadingState:{},size:{default:"24px"}},setup(r){return e.useCssVars(o=>({"50aa2fee":o.size})),(o,t)=>o.loadingState?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(i)("loader-wrapper"))},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["svg-loader",{"icon-is-valid":o.loadingState.isValid,"icon-is-invalid":o.loadingState.isInvalid}]),viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[$,o.loadingState.isLoading?(e.openBlock(),e.createElementBlock("g",j,[e.createElementVNode("circle",{class:e.normalizeClass(["loader-path",{"loader-path-off":o.loadingState.isValid||o.loadingState.isInvalid}]),cx:"50",cy:"50",fill:"none",r:"20","stroke-width":"2"},null,2)])):e.createCommentVNode("",!0)],2))],2)):e.createCommentVNode("",!0)}}),v=(r,o)=>{const t=r.__vccOpts||r;for(const[l,s]of o)t[l]=s;return t},_=v(D,[["__scopeId","data-v-0f0b7a55"]]),k={solid:["scalar-button-solid","bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1"],outlined:["scalar-button-outlined","active:bg-btn-1 border border-solid border-border bg-transparent text-fore-1 hocus:bg-back-2"],ghost:["scalar-button-ghost","bg-transparent text-fore-3 active:text-fore-2 hocus:text-fore-2"],danger:["scalar-button-danger","bg-error text-white active:brightness-90 hocus:brightness-90"]},E=c({base:"scalar-button row cursor-pointer items-center justify-center rounded font-medium",variants:{disabled:{true:"bg-background-2 text-color-3 cursor-not-allowed shadow-none"},fullWidth:{true:"w-full"},size:{md:"h-10 px-6 text-sm"},variant:k},compoundVariants:[{disabled:!0,variant:"ghost",class:"bg-transparent text-ghost"}]}),Z=["ariaDisabled"],F={key:0,class:"mr-2 h-4 w-4"},I={key:1,class:"ml-2"},x=e.defineComponent({inheritAttrs:!1,__name:"ScalarButton",props:{disabled:{type:Boolean},fullWidth:{type:Boolean,default:!1},loading:{},size:{default:"md"},variant:{default:"solid"}},setup(r){const o=e.computed(()=>{const{class:t,...l}=e.useAttrs();return{className:t||"",rest:l}});return(t,l)=>(e.openBlock(),e.createElementBlock("button",e.mergeProps(o.value.rest,{ariaDisabled:t.disabled||void 0,class:e.unref(i)(e.unref(E)({fullWidth:t.fullWidth,disabled:t.disabled,size:t.size,variant:t.variant}),{"pl-9 pr-3":t.loading},`${o.value.className}`),type:"button"}),[t.$slots.icon?(e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(t.$slots,"icon")])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),t.loading?(e.openBlock(),e.createElementBlock("div",I,[e.createVNode(e.unref(_),{loadingState:t.loading,size:"20px"},null,8,["loadingState"])])):e.createCommentVNode("",!0)],16,Z))}}),P=r=>Object.fromEntries(Array.from(r).map(o=>[o.name,o.value])),H=r=>({raw:o})=>{const l=new r().parseFromString(o,"image/svg+xml");if(l.getElementsByTagName("parsererror").length)return;const s=l.documentElement,h=P(s.attributes),{width:g,height:u,...p}=h;return e.h("svg",{...p,innerHTML:s.innerHTML})},O=e.defineAsyncComponent(async()=>{const r=typeof DOMParser>"u"?(await import("@xmldom/xmldom")).DOMParser:DOMParser,o=H(r);return o.props={raw:{type:String,required:!0}},o}),C=Object.assign({"./Add.svg":`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
|
2
2
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.429"
|
|
3
3
|
d="M24 1.714v44.572M1.714 24h44.572" />
|
|
4
4
|
</svg>`,"./CheckMark.svg":`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 23.5" fill="currentColor">
|
|
5
5
|
<path d="M11.2 23.5 0 12.3l2.15-2.15 9.05 9.05L30.4 0l2.15 2.15z" />
|
|
6
|
-
</svg>`,"./ChevronDown.svg":`<svg
|
|
7
|
-
|
|
8
|
-
</svg
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</svg>`,"./
|
|
6
|
+
</svg>`,"./ChevronDown.svg":`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
7
|
+
<path d="M4.5 8.25L12 15.75L19.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
|
9
|
+
`,"./ChevronLeft.svg":`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11
|
+
</svg>
|
|
12
|
+
`,"./ChevronRight.svg":`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
|
+
<path d="M8.25 19.5L15.75 12L8.25 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
|
+
</svg>`,"./ChevronUp.svg":`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<path d="M19.5 15.75L12 8.25L4.5 15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
</svg>
|
|
17
|
+
`,"./Clipboard.svg":`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
|
15
18
|
<path d="M6,5h4c1.7,0,2-1.3,2-3c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2C4,3.7,4.3,5,6,5z M6,2V1
|
|
16
19
|
c0-0.6,0.5-1,1-1h2c0.5,0,1,0.4,1,1v1.3C10,2.9,9.6,3,9,3H7C6.4,3,6,2.6,6,2z" />
|
|
17
20
|
</svg>`,"./Close.svg":`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
@@ -86,4 +89,4 @@
|
|
|
86
89
|
</svg>`,"./Search.svg":`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
|
|
87
90
|
<path fill-rule="evenodd"
|
|
88
91
|
d="M12.6 11.2h.1l3 3a1 1 0 1 1-1.4 1.5l-3-3a1 1 0 0 1-.1-.1 7 7 0 1 1 1.4-1.4zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" />
|
|
89
|
-
</svg>`}),W=r=>{const o=`./${r}.svg`;return C[o]===void 0?(console.warn(`Could not find icon: ${r}`),""):C[o]},
|
|
92
|
+
</svg>`}),W=r=>{const o=`./${r}.svg`;return C[o]===void 0?(console.warn(`Could not find icon: ${r}`),""):C[o]},w=e.defineComponent({__name:"ScalarIcon",props:{icon:{},size:{}},setup(r){const o=r,t=c({variants:{size:{xs:"h-3 w-3",sm:"h-3.5 w-3.5",md:"h-4 w-4",lg:"h-5 w-5",xl:"h-6 w-6",full:"h-full w-full"}},defaultVariants:{size:"full"}}),l=e.computed(()=>W(o.icon));return(s,h)=>l.value?(e.openBlock(),e.createBlock(e.unref(O),{key:0,class:e.normalizeClass(e.unref(i)("scalar-icon",e.unref(t)({size:s.size}))),raw:l.value},null,8,["class","raw"])):e.createCommentVNode("",!0)}}),q=["ariaDisabled"],R={class:"sr-only"},y=e.defineComponent({__name:"ScalarIconButton",props:{label:{},icon:{},disabled:{type:Boolean},variant:{default:"ghost"},size:{default:"md"}},setup(r){const o=c({base:"scalar-icon-button grid aspect-square cursor-pointer rounded",variants:{size:{xs:"h-3.5 w-3.5 p-0.5",sm:"h-5 w-5 p-1",md:"h-10 w-10 p-3",full:"h-full w-full"},disabled:{true:"cursor-not-allowed shadow-none"},variant:k}});return(t,l)=>(e.openBlock(),e.createElementBlock("button",{ariaDisabled:t.disabled||void 0,class:e.normalizeClass(e.unref(i)(e.unref(o)({size:t.size,variant:t.variant,disabled:t.disabled}))),type:"button"},[e.createVNode(e.unref(w),{icon:t.icon},null,8,["icon"]),e.createElementVNode("span",R,e.toDisplayString(t.label),1)],10,q))}}),K=()=>e.reactive({open:!1,show(){this.open=!0},hide(){this.open=!1}}),B=v(e.defineComponent({__name:"ScalarModal",props:{state:{},title:{},bodyClass:{},maxWidth:{},size:{default:"md"},variant:{}},setup(r){const o=c({base:["scalar-modal","col leading-snug relative mx-auto mb-0 mt-20 w-full rounded-lg bg-back-2 text-left text-fore-1 opacity-0"].join(" "),variants:{size:{xs:"max-w-screen-xs",sm:"max-w-screen-sm",md:"max-w-screen-md",lg:"max-w-screen-lg"},variant:{history:"scalar-modal-history bg-back-1",search:"scalar-modal-search"}}});return(t,l)=>(e.openBlock(),e.createBlock(e.unref(m.Dialog),{open:t.state.open,onClose:l[0]||(l[0]=s=>t.state.hide())},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i)("scalar-modal-layout fixed left-0 top-0","z-[1001] h-[100dvh] w-[100dvw]","bg-backdrop p-5 opacity-0"))},[e.createVNode(e.unref(m.DialogPanel),{class:e.normalizeClass(e.unref(o)({size:t.size,variant:t.variant})),style:e.normalizeStyle({maxWidth:t.maxWidth})},{default:e.withCtx(()=>[t.title?(e.openBlock(),e.createBlock(e.unref(m.DialogTitle),{key:0,class:e.normalizeClass(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-fore-1",{"pb-0 pt-6":t.variant==="history"}])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1},8,["class"])):e.createCommentVNode("",!0),e.createVNode(e.unref(m.DialogDescription),{class:e.normalizeClass(["scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 px-6 pb-4 pt-6",e.unref(i)(t.bodyClass,t.variant==="history"&&"pt-3",t.variant==="search"&&"col max-h-[440px] overflow-hidden p-0")])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:3},8,["class"])]),_:3},8,["class","style"])],2)]),_:3},8,["open"]))}}),[["__scopeId","data-v-4f0b1a0d"]]),U={class:"scalar-input-container relative"},G=["for"],J={class:"icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3"},M=v(e.defineComponent({__name:"ScalarTextField",props:{modelValue:{},placeholder:{},label:{},labelShadowColor:{default:"var(--theme-background-2, var(--default-theme-background-2))"},error:{type:Boolean},isMultiline:{type:Boolean},helperText:{},emitOnBlur:{type:Boolean,default:!0},handleFieldSubmit:{},handleFieldChange:{},disableTrim:{type:Boolean,default:!1}},emits:["submit","update:modelValue"],setup(r,{emit:o}){const t=r,l=c({base:"scalar-input-wrapper relative flex items-center rounded border border-solid border-border",variants:{focus:{true:"scalar-input-wrapper-focus border-fore-3 has-actv-btn:border has-actv-btn:border-border"},error:{true:"scalar-input-wrapper-error border-error"}}}),s=e.useAttrs(),h=s.id||`id-${A.nanoid()}`,g=e.ref(),u=e.ref(!1);let p;if(t.isMultiline){const{triggerResize:a}=V.useTextareaAutosize({element:g,input:t.modelValue});p=a}function ee(a){const d=a.target.value;t.isMultiline&&p(),t.handleFieldChange?t.handleFieldChange(d):o("update:modelValue",d)}function z(a){const d=a.target,b=t.disableTrim||t.isMultiline?d.value:d.value.trim();t.handleFieldSubmit?t.handleFieldSubmit(b):o("submit",b)}function te(a){u.value=!1,t.emitOnBlur&&t.modelValue&&z(a)}return e.onMounted(()=>{var a;Object.prototype.hasOwnProperty.call(s,"autofocus")&&((a=g.value)==null||a.focus())}),(a,d)=>(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l)({error:a.error,focus:u.value}))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.isMultiline?"textarea":"input"),e.mergeProps({id:e.unref(h)},a.$attrs,{ref_key:"input",ref:g,class:["scalar-input",e.unref(i)({"min-h-[77px]":a.isMultiline},"z-10 w-full resize-none appearance-none border-0 bg-transparent p-3 text-sm text-fore-1","outline-none transition-opacity")],placeholder:a.placeholder,value:a.modelValue,onBlur:te,onFocus:d[0]||(d[0]=b=>u.value=!0),onInput:ee,onKeyup:e.withKeys(z,["enter"])}),null,16,["id","class","placeholder","value","onKeyup"])),a.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(e.unref(i)("scalar-input-label pointer-events-none absolute left-0 top-0 mx-2 my-3 px-1 text-xs","shadow-current z-10 origin-top-left rounded text-fore-3 transition-transform")),for:e.unref(h),style:e.normalizeStyle({"box-shadow":`0 0 4px 4px ${a.labelShadowColor}`,"background-color":a.labelShadowColor})},e.toDisplayString(a.label),15,G)):e.createCommentVNode("",!0),e.createElementVNode("div",J,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i)("helper-text before:rounded-full mt-1.5 flex items-center text-xs text-error before:font-black","before:mr-1.5 before:block before:h-4 before:w-4 before:text-center before:text-xxs before:leading-4","before:bg-error before:text-white before:content-['!'] empty:hidden"))},e.toDisplayString(a.helperText),3)]))}}),[["__scopeId","data-v-acbd8aa4"]]),Q={boxShadow:{DEFAULT:"var(--theme-shadow-1, var(--default-theme-shadow-1))",md:"var(--theme-shadow-2, var(--default-theme-shadow-2))",sm:"rgba(0, 0, 0, 0.09) 0px 1px 4px",none:"0 0 #0000"},colors:{"fore-1":"var(--theme-color-1, var(--default-theme-color-1))","fore-2":"var(--theme-color-2, var(--default-theme-color-2))","fore-3":"var(--theme-color-3, var(--default-theme-color-3))",accent:"var(--theme-color-accent, var(--default-theme-color-accent))","back-1":"var(--theme-background-1, var(--default-theme-background-1))","back-2":"var(--theme-background-2, var(--default-theme-background-2))","back-3":"var(--theme-background-3, var(--default-theme-background-3))","back-accent":"var(--theme-background-accent, var(--default-theme-background-accent))",backdrop:"rgba(0, 0, 0, 0.44)",border:"var(--theme-border-color, var(--default-theme-border-color))","back-btn-1":"var(--theme-button-1, var(--default-theme-button-1))","fore-btn-1":"var(--theme-button-1-color, var(--default-theme-button-1-color))","hover-btn-1":"var(--theme-button-1-hover, var(--default-theme-button-1-hover))",white:"#FFF",green:"var(--theme-color-green, var(--default-theme-color-green))",red:"var(--theme-color-red, var(--default-theme-color-red))",yellow:"var(--theme-color-yellow, var(--default-theme-color-yellow))",blue:"var(--theme-color-blue, var(--default-theme-color-blue))",orange:"var(--theme-color-orange, var(--default-theme-color-orange))",purple:"var(--theme-color-purple, var(--default-theme-color-purple))",error:"var(--theme-error-color, var(--default-theme-color-red))",ghost:"var(--theme-color-ghost, var(--default-theme-color-ghost))",transparent:"transparent"}},X={borderRadius:{DEFAULT:"var(--theme-radius, var(--default-theme-radius))",md:"var(--theme-radius, var(--default-theme-radius))",lg:"var(--theme-radius-lg, var(--default-theme-radius-lg))",xl:"var(--theme-radius-xl, var(--default-theme-radius-xl))"},fontSize:{xxs:"var(--theme-micro, var(--default-theme-micro, var(--theme-font-size-5, var(--default-theme-font-size-5))))",xs:"var(--theme-mini, var(--default-theme-mini, var(--theme-font-size-4, var(--default-theme-font-size-4))))",sm:"var(--theme-small, var(--default-theme-small, var(--theme-font-size-3, var(--default-theme-font-size-3))))",base:"var(--theme-paragraph, var(--default-theme-paragraph, var(--theme-font-size-2, var(--default-theme-font-size-2))))",lg:"var(--theme-font-size-1, var(--default-theme-font-size-1))"},fontWeight:{medium:"var(--theme-font-medium, var(--default-theme-font-medium))",bold:"var(--theme-font-bold, var(--default-theme-font-bold))"},maxWidth:{"screen-xs":"480px","screen-sm":"540px","screen-md":"640px","screen-lg":"800px"}},Y={install:r=>{r.component("ScalarButton",x),r.component("ScalarIcon",w),r.component("ScalarIconButton",y),r.component("ScalarLoading",_),r.component("ScalarModal",B),r.component("ScalarTextField",M)}};n.ScalarButton=x,n.ScalarIcon=w,n.ScalarIconButton=y,n.ScalarLoading=_,n.ScalarModal=B,n.ScalarTextField=M,n.default=Y,n.extend=X,n.theme=Q,n.useLoadingState=N,n.useModal=K,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"author": "Scalar (https://github.com/scalar)",
|
|
6
6
|
"homepage": "https://github.com/scalar/scalar",
|
|
7
7
|
"bugs": "https://github.com/scalar/scalar/issues/new/choose",
|
|
8
|
-
"version": "0.2.
|
|
8
|
+
"version": "0.2.6",
|
|
9
9
|
"engines": {
|
|
10
10
|
"node": ">=18"
|
|
11
11
|
},
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"vite-plugin-dts": "^3.6.3",
|
|
70
70
|
"vitest": "^1.2.2",
|
|
71
71
|
"vue-tsc": "^1.8.19",
|
|
72
|
-
"@scalar/themes": "0.5.
|
|
72
|
+
"@scalar/themes": "0.5.9"
|
|
73
73
|
},
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build": "run-p types:check \"build-only {@}\" --",
|