-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathwebswift.js
More file actions
55 lines (55 loc) · 24.3 KB
/
webswift.js
File metadata and controls
55 lines (55 loc) · 24.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var WebSwift=function(n){"use strict"
const t=":host{\n -moz-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: normal;\n}",e=(n,e)=>{try{!function(n){const e=new CSSStyleSheet
e.replaceSync(t),n.adoptedStyleSheets.push(e)}(n)
const i=new CSSStyleSheet
i.replaceSync(e??""),n.adoptedStyleSheets.push(i)}catch{const i=document.createElement("style")
i.textContent=t+"\n"+e,n.insertBefore(i,n.firstChild)}},i=(n,t)=>{Object.keys(t).forEach((e=>{n.getAttribute(e)||n.setAttribute(e,String(t[e]))}))},o=n=>{class t extends HTMLElement{static observedAttributes=Object.keys(n.props||{})
static defineElement(){customElements.define(n.name,this)}#n={}
#t=(()=>{const t={}
for(const e in n.props)t[e]=typeof n.props[e]
return t})()
constructor(){super()
const t=this.attachShadow({mode:"open"})
t.innerHTML=n.template??"",e(t,n.style)
const{props:i}=n||{props:{}}
this.#n={...i}
for(const t in i)Object.defineProperty(this,t,{get:()=>this.#n?.[t],set:e=>{const i=this.getAttribute(t)
let o
switch(this.#t[t]){case"number":o=Number(e)
break
case"boolean":o="true"==e
break
default:o=String(e)}if(this.#n[t]!=e&&(this.#n[t]=o,n?.dispatch?.propChanged?.call?.(this,t,e)),i==e)return
const s=t.toLowerCase()
n.syncProps?.includes(t)&&this.setAttribute(s,e)}})
const o=n?.setup?.call(this,t)||{}
for(const n in o)Object.defineProperty(this,n,{get:()=>o[n]})}connectedCallback(){n.dispatch?.connected?.call(this)}disconnectedCallback(){n.dispatch?.disconnected?.call(this)}attributeChangedCallback(n,t,e){this[n]=e??""}}return t}
class s extends(o({name:"swift-button",template:"<p><slot></slot></p><div gradient></div><div fill></div>",style:':host {\n width: auto;\n height: auto;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: auto;\n padding: 3px 7px;\n overflow: hidden;\n position: relative;\n cursor: default;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: 0.5px solid rgba(0, 0, 0, 0.02);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.05);\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n filter: brightness(1);\n}\n:host [gradient] {\n width: 100%;\n height: 100%;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n}\n:host [fill] {\n width: 100%;\n height: 100%;\n background: #fff;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n}\n:host p {\n color: black;\n font-size: 13px;\n margin: 0;\n}\n:host([primary]) {\n box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.24);\n border: none;\n}\n:host([primary]) p {\n color: white;\n}\n:host([primary]) [gradient] {\n display: block;\n background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));\n opacity: 0.17;\n}\n:host([primary]) [fill] {\n background: #007aff;\n}\n:host([disabled=true]) {\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.05);\n pointer-events: none;\n}\n:host([disabled=true]) [gradient] {\n display: none;\n}\n:host([disabled=true]) [fill] {\n background: #fff;\n}\n:host([disabled=true]) p {\n color: rgba(0, 0, 0, 0.25);\n}',props:{disabled:"false",command:""},syncProps:["disabled","command"],setup(n){return setTimeout((()=>{const n=new Function(this.command)
let t
this.addEventListener("mousedown",(()=>{t=!0,this.style.filter="brightness(0.9)"})),window.addEventListener("mouseup",(()=>{t&&(t=!1,this.style.filter="brightness(1)",n())}))})),i(this,{disabled:"false"}),{}}})){}s.defineElement()
const a={iconpath:""}
class r extends(o({name:"swift-messagebox",template:'<img icon />\n <slot name="title"></slot>\n <slot name="text"></slot>\n <slot name="button"></slot>',style:'@keyframes Pop {\n 0% {\n opacity: 0;\n box-shadow: none;\n transform: scale(0.1);\n }\n 50% {\n transform: scale(0.5);\n opacity: 0.2;\n }\n 80% {\n transform: scale(1.1);\n opacity: 0.3;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n:host {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 228px;\n height: auto;\n box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.1), 0 0 2px rgba(0, 0, 0, 0.05), 0 38px 90px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.6);\n border-radius: 10px;\n background: rgba(246, 246, 246, 0.6);\n -webkit-backdrop-filter: blur(30px);\n backdrop-filter: blur(30px);\n padding: 20px 16px;\n padding-bottom: 16px;\n animation: Pop 0.3s linear forwards;\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n position: absolute;\n left: calc(50% - 114px);\n}\n:host img[icon] {\n width: 64px;\n height: 64px;\n margin-bottom: 20px;\n}\n::slotted([slot=title]) {\n font-size: 13px;\n margin: 0;\n margin-bottom: 10px;\n font-family: "SFPro-Semibold", "PingFangSC-Semibold";\n}\n::slotted([slot=text]) {\n font-size: 11px;\n margin: 0;\n margin-bottom: 16px;\n text-align: center;\n}\n::slotted([slot=button]) {\n height: 23px;\n align-self: normal;\n}',props:a,syncProps:["iconpath"],setup(n){return setTimeout((()=>{n.querySelector("img").src=this.iconpath,this.style.top=`calc(50% - ${this.offsetHeight/2})`})),{}}})){}r.defineElement()
const l={state:"on",disabled:"false"}
class p extends(o({name:"swift-checkbox",template:'<div type>\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8.97949 8.61816">\n <g>\n <rect height="8.61816" opacity="0" width="8.97949" x="0" y="0"/>\n <path d="M3.18359 8.61816C3.39355 8.61816 3.55957 8.52539 3.67676 8.34473L8.29102 1.0791C8.37891 0.9375 8.41309 0.830078 8.41309 0.717773C8.41309 0.449219 8.2373 0.273438 7.96875 0.273438C7.77344 0.273438 7.66602 0.336914 7.54883 0.522461L3.16406 7.50977L0.888672 4.53125C0.766602 4.36035 0.644531 4.29199 0.46875 4.29199C0.19043 4.29199 0 4.48242 0 4.75098C0 4.86328 0.0488281 4.99023 0.141602 5.10742L2.67578 8.33496C2.82227 8.52539 2.97363 8.61816 3.18359 8.61816Z" \n fill="black" \n stroke="black" \n stroke-opacity="0.85" \n stroke-width="0.6" \n stroke-linecap="round" \n stroke-linejoin="round"/>\n </g>\n</svg>\n</div>\n<p><slot></slot></p>',style:':host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: auto;\n font-family: "SFPro-Regular";\n font-size: 13px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n:host div[type] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 3.5px;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0)), #007aff;\n /* background: #007aff; */\n margin-right: 7px;\n box-shadow: 0 0.5px 3px rgba(0, 122, 255, 0.12), 0 1px 2px rgba(0, 122, 255, 0.12), 0 0.5px 1px rgba(0, 122, 255, 0.24);\n}\n:host p,\n:host svg {\n margin: 0;\n}\n:host div[type] svg {\n width: 8px;\n height: 8px;\n filter: invert(1);\n}\n:host([state=off]) div[type] {\n background: #fff;\n border: inset 0.5px rgba(0, 0, 0, 0.15);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.1);\n}\n:host(:active) {\n filter: brightness(0.9);\n}',props:l,syncProps:["state","disabled"],setup(n){return this.addEventListener("click",(()=>this.state="on"==this.state?"off":"on")),{}},dispatch:{connected(){i(this,l)}}})){}p.defineElement()
class d extends(o({name:"swift-window",template:'<div titlebar>\n <div wintools>\n <div oval close id=close>\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.1197 19.7779">\n <g>\n <rect height="19.7779" opacity="0" width="20.1197" x="0" y="0"/>\n <path d="M0.27467 19.5032C0.65553 19.8645 1.261 19.8645 1.63209 19.5032L9.87428 11.2512L18.1262 19.5032C18.4876 19.8645 19.1126 19.8743 19.4739 19.5032C19.845 19.1223 19.845 18.5169 19.4739 18.1555L11.2317 9.90358L19.4739 1.65162C19.845 1.2903 19.8547 0.675061 19.4739 0.303967C19.1028-0.0573608 18.4876-0.0573608 18.1262 0.303967L9.87428 8.55592L1.63209 0.303967C1.261-0.0573608 0.645764-0.0671265 0.27467 0.303967C-0.0866577 0.684827-0.0866577 1.2903 0.27467 1.65162L8.52662 9.90358L0.27467 18.1555C-0.0866577 18.5169-0.0964233 19.1321 0.27467 19.5032Z" fill="black"/>\n </g>\n </svg>\n </div>\n <div oval minimize>\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.918 1.94336">\n <g>\n <rect height="1.94336" opacity="0" width="20.918" x="0" y="0"/>\n <path d="M0.957031 1.94336L19.5996 1.94336C20.1172 1.94336 20.5566 1.50391 20.5566 0.986328C20.5566 0.458984 20.1172 0.0292969 19.5996 0.0292969L0.957031 0.0292969C0.439453 0.0292969 0 0.458984 0 0.986328C0 1.50391 0.439453 1.94336 0.957031 1.94336Z" fill="black"/>\n </g>\n </svg>\n </div>\n <div oval zoom>\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24.2383 23.8965">\n <g>\n <rect height="23.8965" opacity="0" width="24.2383" x="0" y="0"/>\n <path d="M0.986328 10.0293C1.55273 10.0293 1.95312 9.60938 1.95312 9.0332L1.95312 7.31445L1.72852 3.00781L5.36133 6.76758L9.36523 10.8105C9.55078 10.9961 9.78516 11.0938 10.0488 11.0938C10.6543 11.0938 11.0938 10.6934 11.0938 10.0879C11.0938 9.81445 10.9961 9.56055 10.8008 9.36523L6.77734 5.33203L3.00781 1.71875L7.32422 1.94336L9.04297 1.94336C9.60938 1.94336 10.0488 1.55273 10.0488 0.976562C10.0488 0.400391 9.61914 0 9.04297 0L1.71875 0C0.634766 0 0 0.634766 0 1.71875L0 9.0332C0 9.58984 0.410156 10.0293 0.986328 10.0293ZM14.834 23.8867L22.1484 23.8867C23.2422 23.8867 23.877 23.252 23.877 22.168L23.877 14.8535C23.877 14.2969 23.4668 13.8574 22.8906 13.8574C22.3242 13.8574 21.9238 14.2773 21.9238 14.8535L21.9238 16.5723L22.1484 20.8789L18.5059 17.1191L14.5117 13.0762C14.3262 12.8906 14.082 12.793 13.8281 12.793C13.2227 12.793 12.7832 13.1934 12.7832 13.7988C12.7832 14.0723 12.8809 14.3262 13.0762 14.5215L17.0996 18.5547L20.8691 22.168L16.543 21.9434L14.834 21.9434C14.2676 21.9434 13.8281 22.334 13.8281 22.9102C13.8281 23.4863 14.2578 23.8867 14.834 23.8867Z" fill="black"/>\n </g>\n </svg>\n </div>\n </div>\n <p title></p>\n</div>\n<div content><slot></slot></div>',style:':host {\n width: 400px;\n height: 300px;\n background: #fff;\n box-shadow: 0 36px 100px 0 rgba(0, 0, 0, 0.35), 0 0 3px 0 rgba(0, 0, 0, 0.23), inset 0 0 3px 0 rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n overflow: hidden;\n display: block;\n min-width: 86px;\n min-height: 38px;\n resize: both;\n font-size: 13px;\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n}\n:host::-webkit-resizer {\n display: none;\n}\n:host div[titlebar] {\n width: 100%;\n height: 28px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(245, 245, 245);\n box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n}\n:host div[titlebar] div[wintools] {\n width: auto;\n height: 12px;\n display: inline-flex;\n position: absolute;\n top: 8px;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 8px;\n}\n:host div[titlebar] div[wintools]:hover div[oval] svg {\n display: initial;\n}\n:host div[titlebar] div[wintools] div[oval] {\n width: 12px;\n height: 12px;\n border-radius: 6px;\n margin-right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n:host div[titlebar] div[wintools] div[oval] svg {\n width: 100%;\n height: 100%;\n scale: 0.5;\n display: none;\n}\n:host div[titlebar] div[wintools] div[close] {\n background: #ff5f57;\n border: 0.5px solid rgba(0, 0, 0, 0.2);\n}\n:host div[titlebar] div[wintools] div[minimize] {\n background: #febc2e;\n border: 0.5px solid rgba(0, 0, 0, 0.2);\n}\n:host div[titlebar] div[wintools] div[zoom] {\n background: #28c840;\n border: 0.5px solid rgba(0, 0, 0, 0.2);\n}\n:host div[titlebar] p[title] {\n font-size: 13px;\n font-family: "SFPro-Semibold", "PingFangSC-Semibold";\n max-width: 40%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n:host div[content] {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}',props:{title:"",width:0,height:0},syncProps:["title","width","height"],setup(n){setTimeout((()=>{let t=this.title
n.querySelector("p[title]").innerHTML=t
let e=this.width,i=this.height
this.style.width=e+(String(e).endsWith("%")?"":"px"),this.style.height=i+"px"}))
let t
return n.querySelectorAll("div[oval]").forEach((n=>{n.addEventListener("mousedown",(()=>{n.style.filter="brightness(0.9)",t=!0})),window.addEventListener("mouseup",(()=>{t&&(t=!1,n.style.filter="brightness(1)","close"==n.id&&this.parentNode?.removeChild(this))}))})),{}}})){}d.defineElement()
const h={state:"on",disabled:"false"}
class g extends(o({name:"swift-switch",template:"<div oval></div><div fill></div>",style:":host {\n width: 26px;\n height: 15px;\n position: relative;\n display: block;\n filter: brightness(1);\n}\n:host div[oval] {\n background: #fff;\n width: 12px;\n height: 12px;\n border-radius: 6.5px;\n position: absolute;\n transition: all .25s ease;\n box-sizing: border-box;\n}\n:host div[fill] {\n width: 100% ;\n height: 100%;\n border-radius: 11px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n transition: all .25s ease;\n}\n:host([state=on]) div[oval] {\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);\n left: calc(100% - 1.5px - 12px);\n right: 1.5px;\n top: 1.5px;\n}\n:host([state=on]) div[fill] {\n background: #2c7af1;\n box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px 0 rgba(0, 0, 0, 0.05);\n}\n:host([state=off]) div[oval] {\n right: calc(100% - 1.5px - 12px);\n left: 1.5px;\n top: 1.5px;\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n:host([state=off]) div[fill] {\n background: rgba(0, 0, 0, 0.1);\n box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 0 1px 0 rgba(0, 0, 0, 0.12);\n}\n:host([disabled=true]) {\n pointer-events: none;\n}\n:host([disabled=true]) div[oval] {\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(0, 0, 0, 0.05);\n pointer-events: none;\n}\n:host([disabled=true]) div[fill] {\n background: rgba(0, 0, 0, 0.1);\n box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 0 1px 0 rgba(0, 0, 0, 0.12);\n pointer-events: none;\n}\n:host(:active) {\n filter: brightness(0.9);\n}",props:h,syncProps:["state","disabled"],setup(n){return this.addEventListener("click",(()=>this.state="on"==this.state?"off":"on")),{}},dispatch:{connected(){i(this,h)}}})){}g.defineElement()
class c extends(o({name:"swift-progress",template:"<div fill></div><div back></div>",style:":host {\n width: 100px;\n height: 6px;\n border-radius: 3px;\n overflow: hidden;\n display: inline-block;\n position: relative;\n}\n:host div[fill] {\n width: 0%;\n height: 100%;\n background: #007aff;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n:host div[back] {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.05);\n position: absolute;\n top: 0;\n left: 0;\n}\n:host([small]) {\n height: 3px;\n}",props:{small:"",progress:""},syncProps:["small","progress"],setup(n){return setTimeout((()=>{n.querySelector("div[fill]").style.width=`${this.progress}%`})),{}},dispatch:{propChanged(n,t){if("progress"==n){const n=this.shadowRoot?.querySelector("div[fill]")
n.style.width=`${t}%`}}}})){}c.defineElement()
class x extends(o({name:"swift-input",template:'<svg icon version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 122.021 123.193">\n <g>\n <rect height="123.193" opacity="0" width="122.021" x="0" y="0"/>\n <path d="M0 49.4141C0 76.6113 22.168 98.7793 49.4141 98.7793C60.4004 98.7793 70.5078 95.166 78.7109 89.0625L110.889 121.289C112.109 122.559 113.818 123.193 115.576 123.193C119.434 123.193 122.021 120.264 122.021 116.602C122.021 114.795 121.387 113.232 120.215 112.012L88.1836 79.834C94.8242 71.4844 98.8281 60.8887 98.8281 49.4141C98.8281 22.168 76.6602 0 49.4141 0C22.168 0 0 22.168 0 49.4141ZM9.13086 49.4141C9.13086 27.1973 27.1973 9.13086 49.4141 9.13086C71.6309 9.13086 89.6484 27.1973 89.6484 49.4141C89.6484 71.582 71.6309 89.6484 49.4141 89.6484C27.1973 89.6484 9.13086 71.582 9.13086 49.4141Z" fill="black" fill-opacity="0.85"/>\n </g>\n</svg>\n<input placeholder="Placeholder" />\n<svg clear version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25.8008 25.459">\n <g>\n <rect height="25.459" opacity="0" width="25.8008" x="0" y="0"/>\n <path d="M25.4395 12.7246C25.4395 19.7266 19.7266 25.4395 12.7148 25.4395C5.71289 25.4395 0 19.7266 0 12.7246C0 5.71289 5.71289 0 12.7148 0C19.7266 0 25.4395 5.71289 25.4395 12.7246ZM16.3477 7.87109L12.7148 11.4844L9.10156 7.88086C8.92578 7.70508 8.73047 7.61719 8.47656 7.61719C7.97852 7.61719 7.57812 7.99805 7.57812 8.49609C7.57812 8.74023 7.67578 8.95508 7.85156 9.13086L11.4551 12.7344L7.85156 16.3379C7.67578 16.5137 7.57812 16.7383 7.57812 16.9727C7.57812 17.4805 7.97852 17.8809 8.47656 17.8809C8.73047 17.8809 8.95508 17.7832 9.13086 17.6074L12.7148 14.0039L16.3086 17.6074C16.4844 17.7832 16.709 17.8809 16.9629 17.8809C17.4609 17.8809 17.8613 17.4805 17.8613 16.9727C17.8613 16.7285 17.7832 16.5039 17.5977 16.3281L13.9941 12.7344L17.6074 9.12109C17.8027 8.92578 17.8711 8.73047 17.8711 8.47656C17.8711 7.98828 17.4707 7.59766 16.9824 7.59766C16.7383 7.59766 16.543 7.67578 16.3477 7.87109Z" fill="black" fill-opacity="0.85"/>\n </g>\n</svg>\n<div fill></div>',style:':host {\n width: 206px;\n height: 22px;\n position: relative;\n display: inline-flex;\n align-items: center;\n filter: brightness(1);\n}\n:host svg[icon] {\n display: none;\n width: 14px;\n height: 14px;\n}\n:host input {\n width: calc(100% - 14px);\n height: 100%;\n background: transparent;\n border: none;\n outline: none;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n padding: 0 7px;\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n}\n:host input:focus ~ div[fill] {\n outline: 3px solid rgba(0, 122, 255, 0.5);\n}\n:host input:focus ~ svg[clear] {\n opacity: 0.25;\n pointer-events: initial;\n}\n:host input::-moz-placeholder {\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n font-size: 13px;\n color: rgba(0, 0, 0, 0.25);\n line-height: 16px;\n}\n:host input::placeholder {\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n font-size: 13px;\n color: rgba(0, 0, 0, 0.25);\n line-height: 16px;\n}\n:host div[fill] {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n outline: 9px solid transparent;\n transition: outline 0.22s ease;\n pointer-events: none;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 0, 0, 0.05);\n}\n:host svg[clear] {\n opacity: 0;\n position: absolute;\n right: 3px;\n top: 3px;\n width: 16px;\n height: 16px;\n transition: opacity 0.25s ease;\n}\n:host([type=search]) svg[icon] {\n display: block;\n margin-left: 7px;\n}\n:host([type=search]) input {\n width: calc(100% - 35px);\n padding-left: 28px;\n}\n:host([type=search]) div[fill] {\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n}\n:host([disabled=true]) { pointer-events: none }\n:host([disabled=true]) div[fill] {\n background: rgba(255, 255, 255, 0.5) !important;\n}\n:host([disabled=true][type=search]) svg[icon] {\n opacity: 0.5;\n}\n:host svg[clear]:active{\nfilter: brightness(0.9);\n}',props:{type:"",disabled:"false",placeholder:"",value:""},syncProps:["type","disabled","placeholder","value"],setup(n){const t=n.querySelector("svg[clear]"),e=n.querySelector("input"),i=this.getAttribute("placeholder")||"",o=this.getAttribute("value")||""
e.placeholder=i,e.value=o
const s=()=>{this.value="",e.value=""}
return e.addEventListener("input",(()=>this.value=e.value)),t.addEventListener("mousedown",(()=>{e.focus()})),t.addEventListener("click",(()=>{e.focus(),s()})),{clear:s}}})){}x.defineElement()
class b extends(o({name:"swift-notification",template:'<img /><div>\n <slot name="title"></slot>\n <slot name="text"></slot>\n</div>\n<slot name="time"></slot>',style:'@keyframes in {\n 0% {\n transform: translateX(400px);\n opacity: 0;\n }\n 75% {\n transform: translateX(0);\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes out {\n 0% {\n opacity: 1;\n }\n 75% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(400px);\n opacity: 0;\n }\n}\n:host {\n width: 346px;\n height: 76px;\n background: rgba(246, 246, 246, 0.6);\n border-radius: 16px;\n box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.25), 0 0 3px 0 rgba(0, 0, 0, 0.55);\n display: flex;\n align-items: center;\n position: absolute;\n top: 10px;\n right: 10px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: default;\n -webkit-backdrop-filter: blur(30px);\n backdrop-filter: blur(30px);\n animation: in 0.4s ease;\n}\n:host(.close) {\n animation: out 0.4s ease;\n}\n:host img {\n width: 40px;\n height: 40px;\n margin-left: 10px;\n margin-right: 8px;\n}\n::slotted([slot=title]) {\n font-family: "SFPro-Semibold", "PingFangSC-Semibold";\n font-size: 13px;\n color: rgba(0, 0, 0, 0.85);\n line-height: 16px;\n margin: 0;\n margin-top: 13px;\n}\n::slotted([slot=text]) {\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n font-size: 13px;\n margin-top: 1.5px;\n color: rgba(0, 0, 0, 0.85);\n line-height: 16px;\n width: 255px;\n margin: 0;\n margin-bottom: 13px;\n}\n::slotted([slot=time]) {\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n font-size: 11px;\n color: #000;\n opacity: 0.5;\n line-height: 14px;\n align-self: flex-start;\n margin: 0;\n position: absolute;\n top: 12px;\n right: 14px;\n}',props:{command:"",iconpath:""},syncProps:["command","iconpath"],setup(n){n.querySelector("img")
const t=new Function(this.command)
let e
return this.addEventListener("mousedown",(()=>{e=!0,this.style.filter="brightness(0.9)"})),window.addEventListener("mouseup",(()=>{e&&(e=!1,this.style.filter="brightness(1)",t())})),{}},dispatch:{connected(){const n=this.shadowRoot?.querySelector("img")
n&&(n.src=this.iconpath)}}})){}b.defineElement()
class f extends(o({name:"swift-tooltip",template:"<p><slot></slot></p>",style:':host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: auto;\n padding: 3px 6px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.12);\n background: rgba(246, 246, 246, 0.72);\n\n p {\n margin: 0;\n font-family: "SFPro-Medium", "PingFangSC-Medium";\n font-size: 11px;\n }\n}',props:{},syncProps:[]})){}f.defineElement()
class u extends(o({name:"swift-menu",template:"<slot></slot>",style:':host {\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n width: auto;\n height: auto;\n border: outset 0.5px rgba(0, 0, 0, 0.06);\n box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.18);\n border-radius: 8px;\n overflow: hidden;\n background: rgba(246, 246, 246, 0.6);\n backdrop-filter: blur(30px) saturate(200%);\n padding: 5px 5px;\n}\n:host ::slotted(p) {\n margin: 0;\n font-family: "SFPro-Regular", "PingFangSC-Regular";\n font-weight: 510;\n font-size: 13px;\n line-height: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n padding: 3px 10px;\n}\n:host ::slotted(p:hover) {\n background: #0a82ff;\n color: #fff;\n border-radius: 5px;\n}',props:{width:"auto"},syncProps:["width"],setup:n=>({}),dispatch:{connected(){let n=this.width
this.style.width="auto"==n?n:n+"px"}}})){}return u.defineElement(),n.Button=s,n.Checkbox=p,n.Menu=u,n.MessageBox=r,n.Switch=g,n.Tooltip=f,n.Window=d,n}({})