一大波更新
parent
15e4a8062a
commit
85e68fc231
|
|
@ -0,0 +1,32 @@
|
|||
#!/usr/bin/env python3
|
||||
# @author yutent<yutent.io@gmail.com>
|
||||
# @date 2024/01/15 15:38:34
|
||||
|
||||
import subprocess, json
|
||||
|
||||
class Docker:
|
||||
|
||||
def containers(self, all = True):
|
||||
if all:
|
||||
cmd = 'docker container ls -a --format=json'
|
||||
else:
|
||||
cmd = 'docker container ls --format=json'
|
||||
|
||||
out = subprocess.run(cmd, shell=True, stdout=subprocess.PIPE)
|
||||
|
||||
out = out.stdout.decode().strip().split("\n")
|
||||
out = [json.loads(it) for it in out]
|
||||
|
||||
# print(out)
|
||||
|
||||
return [{
|
||||
"id": it['ID'],
|
||||
"name": it['Names'],
|
||||
"image": it['Image'],
|
||||
"state": it['State'],
|
||||
'status': it['Status'],
|
||||
'port': it['Ports'].split(', ')[0],
|
||||
'created': it['CreatedAt'],
|
||||
'last': it['RunningFor'],
|
||||
} for it in out]
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ gi.require_version('Gtk', '3.0')
|
|||
from gi.repository import Gtk
|
||||
|
||||
class Window(Gtk.Window):
|
||||
def __init__(self, title = 'Untitled window', width = 840, height = 520):
|
||||
def __init__(self, title = 'Untitled window', width = 960, height = 640):
|
||||
Gtk.Window.__init__(self, title = title)
|
||||
self.set_default_size(width, height)
|
||||
self.resize(width, height)
|
||||
|
|
|
|||
|
|
@ -6,14 +6,18 @@ gi.require_version('Gtk', '3.0')
|
|||
|
||||
from gi.repository import Gtk, Gdk, GLib, Gio, GObject, GdkPixbuf
|
||||
|
||||
from webengine.gtk3 import WebEngine, create_setting, create_hmr_server
|
||||
from webengine.gtk3 import WebEngine, create_setting, create_hmr_server, create_bridge
|
||||
|
||||
from _window import Window
|
||||
from _docker import Docker
|
||||
|
||||
|
||||
APP_ID = 'fun.wkit.dooke'
|
||||
__dir__ = os.path.dirname(os.path.realpath(__file__))
|
||||
|
||||
web_root = os.path.join(__dir__, './webapp')
|
||||
home_dir = os.getenv('HOME')
|
||||
client = Docker()
|
||||
|
||||
|
||||
class Application(Gtk.Application):
|
||||
|
|
@ -31,12 +35,32 @@ class Application(Gtk.Application):
|
|||
hmr = create_hmr_server()
|
||||
web.use(setting).use(hmr)
|
||||
|
||||
bridge = create_bridge()
|
||||
|
||||
web.use(bridge, self.bridge_handler)
|
||||
|
||||
web.connect('quit', self.quit_all)
|
||||
web.load()
|
||||
|
||||
self.window.add(web)
|
||||
|
||||
|
||||
def bridge_handler(self, ev, params):
|
||||
_error = None
|
||||
output = None
|
||||
print(ev, params)
|
||||
match ev:
|
||||
case 'docker':
|
||||
action = params['action']
|
||||
|
||||
match action:
|
||||
case 'all-containers':
|
||||
output = client.containers(all = True)
|
||||
# print(output)
|
||||
|
||||
|
||||
return (_error, output)
|
||||
|
||||
|
||||
def do_activate(self):
|
||||
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@ import 'es.shim'
|
|||
import { html, css, Component } from 'wkit'
|
||||
import { createApp } from 'wkitd'
|
||||
|
||||
import 'ui/icon/index.js'
|
||||
import 'ui/scroll/index.js'
|
||||
import 'ui/layer/index.js'
|
||||
import 'ui/space/index.js'
|
||||
import 'ui/base/icon.js'
|
||||
import 'ui/base/button.js'
|
||||
import 'ui/base/space.js'
|
||||
import 'ui/base/link.js'
|
||||
import 'ui/other/scroll.js'
|
||||
import 'ui/modal/layer.js'
|
||||
import 'ui/form/input.js'
|
||||
import 'ui/form/switch.js'
|
||||
import 'ui/form/button.js'
|
||||
import 'ui/form/link.js'
|
||||
import 'ui/modal/popconfirm.js'
|
||||
import 'ui/modal/tooltip.js'
|
||||
|
||||
import router from './router.js'
|
||||
import store from './store.js'
|
||||
|
|
@ -36,6 +38,8 @@ createApp({
|
|||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
line-height: 1.5;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
router-view {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ class Sidebar extends Component {
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
width: 144px;
|
||||
height: 100vh;
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ class Sidebar extends Component {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
gap: 12px;
|
||||
border-radius: 20px;
|
||||
|
|
@ -73,7 +73,7 @@ class Sidebar extends Component {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<menu class="navibar">
|
||||
<menu class="navibar noselect">
|
||||
${this.$store.menus.map(
|
||||
it => html`
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -31,9 +31,8 @@ a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;}
|
|||
|
||||
body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
|
||||
code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;}
|
||||
[anot],[\:repeat],[\:if] {visibility: hidden;}
|
||||
|
||||
.noselect {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;}
|
||||
.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
|
||||
.noselect img, .noselect a {-webkit-user-drag: none;}
|
||||
.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
|
||||
.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||
|
|
@ -79,4 +78,9 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|||
--color-dark-1: #64748B;
|
||||
--color-dark-2: #475569;
|
||||
--color-dark-3: #2c3441;
|
||||
|
||||
|
||||
--color-drag-background: #fdf6ec;
|
||||
--color-readonly-background: #f7f8fb;
|
||||
--color-disabled-background: #fef0f0;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,5 @@
|
|||
import{css as o,svg as t,html as r,Component as a,classMap as n}from"wkit";import l from"./svg-path.js";let e=l;window.EXT_SVG_DICT&&Object.assign(e,EXT_SVG_DICT);var p={extend(s={}){Object.assign(e,s)}};class c extends a{static props={name:{type:String,default:null,observer(i){i===""&&(this.name=null)}}};static styles=o`:host{display:inline-flex;width:var(--wc-icon-size, 32px);height:var(--wc-icon-size, 32px)}:host(:not([name])){display:none}.svg{display:block;width:100%;height:100%;color:inherit;fill:currentColor}.svg circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([name=loading]) svg{animation:load 1.5s linear infinite}:host([size=small]){width:24px;height:24px}@keyframes circle{0%{stroke-dasharray:0,3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}`;render(){return r`
|
||||
<svg class=${n({svg:!0})} viewBox="0 0 1024 1024">
|
||||
${this.name==="loading"?t`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`:t`<path d="${e[this.name]}" />`}
|
||||
</svg>
|
||||
`}}c.reg("icon");export{p as default};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import{css as r,html as s,Component as i,bind as n,nextTick as l}from"wkit";class c extends i{static props={to:"",autofocus:!1,disabled:!1,lazy:0};static styles=[r`:host{position:relative;display:inline-flex;border-radius:2px;font-size:inherit;cursor:pointer;transition:box-shadow .15s linear}:host .link{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--wc-link-padding, 0 2px);line-height:1;color:inherit;cursor:inherit;outline:none;text-decoration:none;transition:color .15s linear;-webkit-user-select:none;user-select:none}:host .link::-moz-focus-inner{border:none}:host::after{position:absolute;bottom:-2px;left:0;width:100%;height:1px;border-bottom:1px dashed var(--color-grey-1);content:"";opacity:0;transition:opacity .15s linear}`,r`:host([type=primary]){color:var(--color-teal-2)}:host([type=primary])::after{border-color:var(--color-teal-1)}:host([type=primary]:not([disabled]):hover){color:var(--color-teal-1)}:host([type=primary]:not([disabled]):active){color:var(--color-teal-3)}:host([type=primary]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]){color:var(--color-blue-2)}:host([type=info])::after{border-color:var(--color-blue-1)}:host([type=info]:not([disabled]):hover){color:var(--color-blue-1)}:host([type=info]:not([disabled]):active){color:var(--color-blue-3)}:host([type=info]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]){color:var(--color-green-2)}:host([type=success])::after{border-color:var(--color-green-1)}:host([type=success]:not([disabled]):hover){color:var(--color-green-1)}:host([type=success]:not([disabled]):active){color:var(--color-green-3)}:host([type=success]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]){color:var(--color-orange-2)}:host([type=warning])::after{border-color:var(--color-orange-1)}:host([type=warning]:not([disabled]):hover){color:var(--color-orange-1)}:host([type=warning]:not([disabled]):active){color:var(--color-orange-3)}:host([type=warning]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]){color:var(--color-red-2)}:host([type=danger])::after{border-color:var(--color-red-1)}:host([type=danger]:not([disabled]):hover){color:var(--color-red-1)}:host([type=danger]:not([disabled]):active){color:var(--color-red-3)}:host([type=danger]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-red-a)}`,r`:host(:not([disabled]):hover)::after,:host([underline])::after{opacity:1}:host([disabled]){cursor:not-allowed;opacity:.6}`];#o(o){o.preventDefault(),o.stopPropagation()}mounted(){this.stamp=0,this.autofocus&&l(o=>this.$refs.a.focus()),n(this.$refs.a,"click",o=>{let{disabled:a,lazy:t}=this,e=Date.now();if(a)return this.#o(o);if(t>0&&e-this.stamp<t)return this.#o(o);this.stamp=e},!0)}render(){return s`
|
||||
<a tabindex="0" ref="a" class="link" href=${this.to||"javascript:;"}>
|
||||
<slot></slot>
|
||||
</a>
|
||||
`}}c.reg("link");
|
||||
|
|
@ -0,0 +1 @@
|
|||
import{css as e,html as a,Component as t}from"wkit";class s extends t{static styles=e`:host{display:block}.container{--gaps: var(--wc-space-gap, 12px);display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:calc(var(--gaps)/2) 0;gap:var(--gaps)}:host([vertical]) .container{flex-direction:column}:host([justify]) .container{justify-content:space-between}`;render(){return a`<div class="container"><slot></slot></div>`}}s.reg("space");
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,16 +0,0 @@
|
|||
import { css, html, Component } from "wkit";
|
||||
class Card extends Component {
|
||||
static props = {
|
||||
header: ""
|
||||
};
|
||||
static styles = css`:host{display:flex;border-radius:3px}.card-box{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid var(--color-plain-2);border-radius:inherit;background:#fff;color:var(--color-dark-1);transition:box-shadow .2s ease-in-out;box-shadow:0 0 12px rgba(0,0,0,.12)}.card-box .header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:var(--card-padding, 8px 16px);border-bottom:1px solid var(--color-plain-2);font-size:16px;user-select:none}.card-box .content{flex:1;min-height:64px;padding:var(--card-padding, 8px 16px);font-size:14px;color:var(--color-dark-1)}:host([shadow=never]) .card-box,:host([shadow=hover]) .card-box{box-shadow:none}:host([shadow=hover]:hover) .card-box{box-shadow:0 0 12px rgba(0,0,0,.12)}`;
|
||||
render() {
|
||||
return html`
|
||||
<div class="card-box">
|
||||
<div class="header"><slot name="header">${this.header}</slot></div>
|
||||
<div class="content"><slot></slot></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Card.reg("card");
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
|||
import{css as t,html as a,Component as s}from"wkit";import"../base/icon.js";class i extends s{static props={value:{type:Array,default:[],observer(){this.#e()}},disabled:!1,readonly:!1};static styles=t`:host{display:inline-flex;flex-wrap:wrap;align-items:center}`;mounted(){this.$on("child-change",o=>{o.stopPropagation();let e=this.value.indexOf(o.value);e>-1?this.value.splice(e,1):this.value.push(o.value),this.$emit("input",{data:this.value}),this.$emit("change",{data:this.value})}),this.#e(!0)}#e(o){Array.from(this.children).forEach(e=>{e.tagName==="WC-CHECKBOX"?e.root&&(o&&(e.disabled=this.disabled,e.readOnly=this.readOnly),e.checked=this.value.includes(e.value)):e.remove()})}}class l extends s{static props={value:"str!",checked:!1,disabled:!1,readonly:!1};static styles=[t`:host{display:inline-flex;height:32px;cursor:pointer}:host label{display:flex;align-items:center;padding-right:16px;line-height:1;font-size:14px;white-space:nowrap;color:var(--color-dark-1);cursor:inherit;outline:none;-webkit-user-select:none;user-select:none}:host .dot{display:flex;justify-content:center;align-items:center;width:14px;height:14px;margin-right:4px;border:1px solid var(--color-dark-1);border-radius:4px;background:#fff;transition:box-shadow .15s linear}:host .dot wc-icon{display:block;visibility:hidden;width:10px;height:10px;transform:scale(0);transition:transform .15s linear}:host:host([checked]) .dot wc-icon{visibility:visible;transform:scale(1)}`,t`:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}`,t`:host([size=small]){height:24px}:host([size=small]) .dot{width:12px;height:12px}`,t`:host([type=primary]) label{color:var(--color-teal-2)}:host([type=primary]) .dot{border-color:var(--color-teal-2)}:host([type=primary]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) label{color:var(--color-blue-2)}:host([type=info]) .dot{border-color:var(--color-blue-2)}:host([type=info]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) label{color:var(--color-green-2)}:host([type=success]) .dot{border-color:var(--color-green-2)}:host([type=success]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) label{color:var(--color-orange-2)}:host([type=warning]) .dot{border-color:var(--color-orange-2)}:host([type=warning]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) label{color:var(--color-red-2)}:host([type=danger]) .dot{border-color:var(--color-red-2)}:host([type=danger]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}`,t`:host([readonly]),:host([disabled]){opacity:.6}:host([disabled]){cursor:not-allowed}`];#e(o){if(this.disabled||this.readOnly)return;o.stopPropagation(),this.checked=!this.checked;let e={value:this.value,checked:this.checked};this.inGroup?this.parentNode.$emit("child-change",e):(this.$emit("input",e),this.$emit("change",e))}#o(o){(o.type==="click"||o.keyCode===32)&&this.#e(o)}mounted(){this.parentNode?.tagName==="WC-CHECKBOX-GROUP"&&(this.inGroup=!0)}render(){return a`<label
|
||||
tabindex=${this.disabled||this.readOnly?"none":0}
|
||||
@click=${this.#o}
|
||||
@keydown=${this.#o}
|
||||
>
|
||||
<span class="dot"><wc-icon name="get"></wc-icon></span>
|
||||
<slot></slot>
|
||||
</label>`}}i.reg("checkbox-group"),l.reg("checkbox");
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import{nextTick as r,css as l,html as s,Component as a,classMap as h,outsideClick as c}from"wkit";import"../icon/index.js";const d={duration:100,custom:[{transform:"scaleY(0)",opacity:0},{transform:"scaleY(1)",opacity:1}]};class u extends a{static props={readOnly:!1,autofocus:!1,disabled:!1,clearable:!1,icon:"",placeholder:"",maxlength:{type:Number,default:null},minlength:{type:Number,default:null},value:"str!",lazy:"num!0"};#t=[];#e=-1;#i=!1;#s=0;static styles=[l`:host{position:relative;display:inline-flex;min-width:188px;height:32px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);border-radius:3px;cursor:text;transition:box-shadow .15s linear}.label{flex:1;display:flex;justify-content:center;align-items:center;height:100%;font-size:14px;border:1px solid var(--wc-input-border-color, var(--color-grey-2));border-radius:inherit;background:var(--bg-color, #fff);color:inherit;cursor:inherit}.label input{flex:1;min-width:36px;width:0;height:100%;padding:0 8px;line-height:1;border:0;border-radius:inherit;font:inherit;color:inherit;background:none;outline:none;box-shadow:none;cursor:inherit}.label input::placeholder{color:var(--color-grey-1)}.label .close{--wc-icon-size: 18px;margin:0 8px 0 4px;padding:4px;border-radius:50%;color:var(--color-grey-2);cursor:pointer;transition:background .15s linear}.label .close:hover{background:var(--color-plain-1)}.label .icon{--wc-icon-size: 16px;margin:0 8px 0 4px;color:var(--color-grey-2)}.suggestion{overflow:hidden;position:absolute;z-index:1;left:0;top:calc(100% + 4px);width:100%;padding:4px 0;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.15);transform-origin:top}.suggestion .list{width:100%;background:#fff}.suggestion.hide{display:none}.suggestion li{overflow:hidden;width:100%;height:30px;line-height:30px;padding:0 8px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.suggestion li:hover,.suggestion li[focus]{background:var(--color-plain-2)}:host([round]){border-radius:26px}:host([round]) .label input{padding:0 10px}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) .label{border-color:var(--color-grey-1);background:var(--color-plain-1);opacity:.6}:host([readonly]){cursor:default}`,l`:host([size=m]){min-width:128px;height:24px;font-size:12px}:host([size=m]) .label{height:24px;font-size:12px}:host([size=m]) .icon{--wc-icon-size: 12px}:host([size=m][circle]){width:24px;height:24px}:host([size=xl]){min-width:224px;height:36px;font-size:14px}:host([size=xl]) .label{height:36px;font-size:14px}:host([size=xl]) .icon{--wc-icon-size: 14px}:host([size=xl][circle]){width:36px;height:36px}:host([size=xxl]){min-width:288px;height:44px;font-size:14px}:host([size=xxl]) .label{height:44px;font-size:14px}:host([size=xxl]) .icon{--wc-icon-size: 14px}:host([size=xxl][circle]){width:44px;height:44px}`];renderClear(){return s`<wc-icon class="close" name="close" @click=${this.clear} />`}render(){let e=h({suggestion:!0,hide:!this.#t.length});return s`
|
||||
import{nextTick as r,css as l,html as s,Component as a,classMap as h,outsideClick as c}from"wkit";import"../base/icon.js";const u={duration:100,custom:[{transform:"scaleY(0)",opacity:0},{transform:"scaleY(1)",opacity:1}]};class d extends a{static props={readOnly:!1,autofocus:!1,disabled:!1,clearable:!1,icon:"",placeholder:"",maxlength:{type:Number,default:null},minlength:{type:Number,default:null},value:"str!",lazy:"num!0"};#t=[];#e=-1;#i=!1;#s=0;static styles=[l`:host{position:relative;display:inline-flex;min-width:188px;height:32px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);border-radius:3px;cursor:text;transition:box-shadow .15s linear}.label{flex:1;display:flex;justify-content:center;align-items:center;height:100%;font-size:14px;border:1px solid var(--wc-input-border-color, var(--color-grey-2));border-radius:inherit;background:var(--bg-color, #fff);color:inherit;cursor:inherit}.label input{flex:1;min-width:36px;width:0;height:100%;padding:0 8px;line-height:1;border:0;border-radius:inherit;font:inherit;color:inherit;background:none;outline:none;box-shadow:none;cursor:inherit}.label input::placeholder{color:var(--color-grey-1)}.label .close{--wc-icon-size: 18px;margin:0 8px 0 4px;padding:4px;border-radius:50%;color:var(--color-grey-2);cursor:pointer;transition:background .15s linear}.label .close:hover{background:var(--color-plain-1)}.label .icon{--wc-icon-size: 16px;margin:0 8px 0 4px;color:var(--color-grey-2)}.suggestion{overflow:hidden;position:absolute;z-index:1;left:0;top:calc(100% + 4px);width:100%;padding:4px 0;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.15);transform-origin:top}.suggestion .list{width:100%;background:#fff}.suggestion.hide{display:none}.suggestion li{overflow:hidden;width:100%;height:30px;line-height:30px;padding:0 8px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.suggestion li:hover,.suggestion li[focus]{background:var(--color-plain-2)}:host([round]){border-radius:26px}:host([round]) .label input{padding:0 10px}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) .label{border-color:var(--color-grey-1);background:var(--color-plain-1);opacity:.6}:host([readonly]){cursor:default}`,l`:host([size=small]){min-width:128px;height:24px;font-size:12px}:host([size=small]) .label{height:24px;font-size:12px}:host([size=small]) .icon{--wc-icon-size: 12px}`];renderClear(){return s`<wc-icon class="close" name="close" @click=${this.clear} />`}render(){let e=h({suggestion:!0,hide:!this.#t.length});return s`
|
||||
<div class="label">
|
||||
<slot name="prepend">
|
||||
<wc-icon class="icon" name=${this.icon}></wc-icon>
|
||||
|
|
@ -19,7 +19,7 @@ import{nextTick as r,css as l,html as s,Component as a,classMap as h,outsideClic
|
|||
/>
|
||||
${this.clearable&&this.value?this.renderClear():""}
|
||||
<slot name="append"></slot>
|
||||
<div class=${e} ref="suggestion" #animation=${d}>
|
||||
<div class=${e} ref="suggestion" #animation=${u}>
|
||||
<div ref="scroller" class="scroller">
|
||||
<ul class="list" @click=${this.handleClickItem} ref="list">
|
||||
${this.#t.map((t,i)=>s`<li
|
||||
|
|
@ -32,4 +32,4 @@ import{nextTick as r,css as l,html as s,Component as a,classMap as h,outsideClic
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}handleInput(e){let{lazy:t}=this;this.value=e.currentTarget.value,!(t&&Date.now()-this.#s<t)&&(this.#s=Date.now(),this.emitFetchSuggest())}handleClickItem(e){let t=e.target.getAttribute("index");this.#e=t,this.emitSelect()}clear(){this.$refs.input.value="",this.value="",this.$emit("change"),this.$emit("input")}handleChange(){this.$emit("change")}handleKeyDown(e){let{lazy:t,minlength:i,value:o}=this;if(e.keyCode===13)return e.preventDefault(),this.#e>-1&&this.#i?this.emitSelect():t&&Date.now()-this.#s<t||(this.#s=Date.now(),i&&o.length<i)?void 0:this.$emit("submit");if(e.keyCode===38||e.keyCode===40){e.preventDefault();let n=e.keyCode===38?-1:1;this.#e+=n,this.#e<0&&(this.#e=0),this.#e>this.#t.length-1&&(this.#e=this.#t.length-1),this.$requestUpdate()}}emitSelect(){let e=this.#t[this.#e];this.value=e.value,this.$refs.suggestion.$animate(!0),this.#i=!1,this.$requestUpdate(),this.$emit("change"),this.$emit("input"),this.$emit("select",{index:this.#e,value:e})}emitFetchSuggest(){this.$emit("fetch-suggest",{value:this.value,send:e=>{this.#t=e.slice(0,10),this.#e=-1,this.$requestUpdate()}})}handleFocus(){this.#i||(this.#i=!0,this.$refs.suggestion.$animate())}mounted(){this.autofocus&&r(e=>this.$refs.input.focus()),c(this,()=>{this.#i=!1,this.$refs.suggestion.$animate(!0)})}}u.reg("input");
|
||||
`}handleInput(e){let{lazy:t}=this;this.value=e.currentTarget.value,!(t&&Date.now()-this.#s<t)&&(this.#s=Date.now(),this.emitFetchSuggest())}handleClickItem(e){let t=e.target.getAttribute("index");this.#e=t,this.emitSelect()}clear(){this.$refs.input.value="",this.value="",this.$emit("change"),this.$emit("input")}handleChange(){this.$emit("change")}handleKeyDown(e){let{lazy:t,minlength:i,value:o}=this;if(e.keyCode===13)return e.preventDefault(),this.#e>-1&&this.#i?this.emitSelect():t&&Date.now()-this.#s<t||(this.#s=Date.now(),i&&o.length<i)?void 0:this.$emit("submit");if(e.keyCode===38||e.keyCode===40){e.preventDefault();let n=e.keyCode===38?-1:1;this.#e+=n,this.#e<0&&(this.#e=0),this.#e>this.#t.length-1&&(this.#e=this.#t.length-1),this.$requestUpdate()}}emitSelect(){let e=this.#t[this.#e];this.value=e.value,this.$refs.suggestion.$animate(!0),this.#i=!1,this.$requestUpdate(),this.$emit("change"),this.$emit("input"),this.$emit("select",{index:this.#e,value:e})}emitFetchSuggest(){this.$emit("fetch-suggest",{value:this.value,send:e=>{this.#t=e.slice(0,10),this.#e=-1,this.$requestUpdate()}})}handleFocus(){this.#i||(this.#i=!0,this.$refs.suggestion.$animate())}mounted(){this.autofocus&&r(e=>this.$refs.input.focus()),c(this,()=>{this.#i=!1,this.$refs.suggestion.$animate(!0)})}}d.reg("input");
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import{css as r,html as s,Component as l,bind as i,nextTick as n}from"wkit";class c extends l{static props={type:"primary",to:"",autofocus:!1,disabled:!1,lazy:0};static styles=[r`:host{position:relative;display:inline-flex;border-radius:2px;user-select:none;-moz-user-select:none;font-size:inherit;cursor:pointer;transition:box-shadow .15s linear}:host .link{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--padding, 0 2px);line-height:1;font-size:inherit;font-family:inherit;outline:none;color:inherit;cursor:inherit;text-decoration:none;transition:color .15s linear}:host .link::-moz-focus-inner{border:none}:host::after{position:absolute;bottom:-2px;left:0;width:100%;height:1px;border-bottom:1px dashed rgba(0,0,0,0);content:"";opacity:0;transition:opacity .15s linear}`,r`:host([type=primary]){color:var(--color-teal-2)}:host([type=primary])::after{border-color:var(--color-teal-1)}:host([type=primary]:not([disabled]):hover){color:var(--color-teal-1)}:host([type=primary]:not([disabled]):active){color:var(--color-teal-3)}:host([type=primary]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]){color:var(--color-blue-2)}:host([type=info])::after{border-color:var(--color-blue-1)}:host([type=info]:not([disabled]):hover){color:var(--color-blue-1)}:host([type=info]:not([disabled]):active){color:var(--color-blue-3)}:host([type=info]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]){color:var(--color-green-2)}:host([type=success])::after{border-color:var(--color-green-1)}:host([type=success]:not([disabled]):hover){color:var(--color-green-1)}:host([type=success]:not([disabled]):active){color:var(--color-green-3)}:host([type=success]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]){color:var(--color-orange-2)}:host([type=warning])::after{border-color:var(--color-orange-1)}:host([type=warning]:not([disabled]):hover){color:var(--color-orange-1)}:host([type=warning]:not([disabled]):active){color:var(--color-orange-3)}:host([type=warning]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]){color:var(--color-red-2)}:host([type=danger])::after{border-color:var(--color-red-1)}:host([type=danger]:not([disabled]):hover){color:var(--color-red-1)}:host([type=danger]:not([disabled]):active){color:var(--color-red-3)}:host([type=danger]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-red-a)}:host([type=secondary]){color:var(--color-dark-2)}:host([type=secondary])::after{border-color:var(--color-dark-1)}:host([type=secondary]:not([disabled]):hover){color:var(--color-dark-1)}:host([type=secondary]:not([disabled]):active){color:var(--color-dark-3)}:host([type=secondary]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-dark-a)}:host([type=help]){color:var(--color-grey-2)}:host([type=help])::after{border-color:var(--color-grey-1)}:host([type=help]:not([disabled]):hover){color:var(--color-grey-1)}:host([type=help]:not([disabled]):active){color:var(--color-grey-3)}:host([type=help]:not([disabled]):focus-within){box-shadow:0 0 0 2px var(--color-grey-a)}`,r`:host(:not([disabled]):hover)::after,:host([underline])::after{opacity:1}:host([disabled]){cursor:not-allowed;opacity:.6}`];mounted(){this.stamp=0,this.autofocus&&n(o=>this.$refs.a.focus()),this._clickFn=i(this.$refs.a,"click",o=>{let{disabled:a,lazy:e}=this,t=Date.now();if(a){o.preventDefault(),o.stopPropagation();return}if(e>0&&t-this.stamp<e){o.preventDefault(),o.stopPropagation();return}this.stamp=t},!0)}render(){return s`
|
||||
<a tabindex="0" ref="a" class="link" href=${this.to||"javascript:;"}>
|
||||
<slot />
|
||||
</a>
|
||||
`}}c.reg("link");
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import{css as t,html as s,Component as r}from"wkit";class i extends r{static props={value:{type:String,default:"",attribute:!1,observer(){this.#o()}},disabled:!1,readonly:!1};static styles=t`:host{display:inline-flex;flex-wrap:wrap;align-items:center}`;mounted(){this.$on("child-change",o=>{o.stopPropagation(),this.value=o.value,this.$emit("input",{data:o.value}),this.$emit("change",{data:o.value})}),this.#o(!0)}#o(o){Array.from(this.children).forEach(e=>{e.tagName==="WC-RADIO"?e.root&&(o&&(e.disabled=this.disabled,e.readOnly=this.readOnly),e.value===this.value?e.checked=!0:e.checked=!1):e.remove()})}}class l extends r{static props={value:"str!",checked:!1,disabled:!1,readOnly:!1};static styles=[t`:host{display:inline-flex;height:32px;cursor:pointer}:host label{display:flex;align-items:center;padding-right:16px;line-height:1;white-space:nowrap;align-items:center;font-size:14px;cursor:inherit;outline:none;color:var(--color-dark-1);-webkit-user-select:none;user-select:none}:host .dot{display:flex;justify-content:center;align-items:center;width:14px;height:14px;margin-right:4px;border:1px solid var(--color-grey-2);border-radius:50%;background:#fff;transition:box-shadow .15s linear}:host .dot::after{display:block;visibility:hidden;width:6px;height:6px;border-radius:50%;background:var(--color-dark-1);content:"";transform:scale(0);transition:transform .15s linear}:host:host([checked]) .dot::after{visibility:visible;transform:scale(1)}`,t`:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}`,t`:host([size=small]){height:24px}:host([size=small]) .dot{width:12px;height:12px}:host([size=small]) .dot::after{width:6px;height:6px}`,t`:host([type=primary]) label{color:var(--color-teal-2)}:host([type=primary]) .dot{border-color:var(--color-teal-2)}:host([type=primary]) .dot::after{background:var(--color-teal-2)}:host([type=primary]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) label{color:var(--color-blue-2)}:host([type=info]) .dot{border-color:var(--color-blue-2)}:host([type=info]) .dot::after{background:var(--color-blue-2)}:host([type=info]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) label{color:var(--color-green-2)}:host([type=success]) .dot{border-color:var(--color-green-2)}:host([type=success]) .dot::after{background:var(--color-green-2)}:host([type=success]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) label{color:var(--color-orange-2)}:host([type=warning]) .dot{border-color:var(--color-orange-2)}:host([type=warning]) .dot::after{background:var(--color-orange-2)}:host([type=warning]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) label{color:var(--color-red-2)}:host([type=danger]) .dot{border-color:var(--color-red-2)}:host([type=danger]) .dot::after{background:var(--color-red-2)}:host([type=danger]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}`,t`:host([readonly]),:host([disabled]){opacity:.6}:host([disabled]){cursor:not-allowed}`];#o(o){this.disabled||this.readOnly||this.checked||(o.stopPropagation(),this.checked=!0,this.inGroup?this.parentNode.$emit("child-change",{value:this.value}):(this.$emit("input"),this.$emit("change")))}#e(o){(o.type==="click"||o.keyCode===32)&&this.#o(o)}mounted(){this.parentNode?.tagName==="WC-RADIO-GROUP"&&(this.inGroup=!0)}render(){return s`<label
|
||||
tabindex=${this.disabled||this.readOnly?"none":0}
|
||||
@click=${this.#e}
|
||||
@keydown=${this.#e}
|
||||
>
|
||||
<span class="dot"></span>
|
||||
<slot></slot>
|
||||
</label>`}}i.reg("radio-group"),l.reg("radio");
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
import{css as e,html as i,Component as s,classMap as a}from"wkit";class n extends s{static props={value:{type:Boolean,default:!1},inactiveText:"",activeText:"",inlineText:!1,disabled:!1,readonly:!1};static styles=[e`:host{display:inline-flex;align-items:center;font-size:14px;cursor:pointer}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;padding:0 8px 0 2px;line-height:1;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;outline:none;color:var(--color-dark-1)}:host .dot{display:flex;align-items:center;justify-content:space-between;min-width:36px;height:18px;padding:0 4px;margin-right:5px;line-height:14px;border-radius:16px;background:var(--color-plain-3);transition:box-shadow .2s ease,background .2s ease}:host .dot::before{display:block;width:14px;height:14px;border-radius:50%;background:#fff;content:""}:host .dot::after{display:flex;padding:0 2px;font-size:12px;content:attr(st);color:#fff}:host .dot.open{flex-direction:row-reverse;background:var(--color-teal-1)}`,e`:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}`,e`:host([size=m]){height:24px;font-size:12px}:host([size=m]) .dot{min-width:30px;height:16px;line-height:12px}:host([size=m]) .dot::before{width:12px;height:12px}:host([size=xl]){height:36px;font-size:14px}:host([size=xl]) .dot{min-width:35px;height:18px;line-height:14px}:host([size=xl]) .dot::before{width:14px;height:14px}:host([size=xxl]){height:44px;font-size:14px}:host([size=xxl]) .dot{min-width:35px;height:18px;line-height:14px}:host([size=xxl]) .dot::before{width:14px;height:14px}`,e`:host([type=primary]) .dot.open{background:var(--color-teal-1)}:host([type=primary]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) .dot.open{background:var(--color-blue-1)}:host([type=info]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) .dot.open{background:var(--color-green-1)}:host([type=success]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) .dot.open{background:var(--color-orange-1)}:host([type=warning]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) .dot.open{background:var(--color-red-1)}:host([type=danger]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}`,e`:host([readonly]),:host([disabled]){cursor:not-allowed;opacity:.6}:host([readonly]){cursor:default}`];toggleCheck(t){if(this.disabled||this.readOnly)return;t.stopPropagation(),this.value=!this.value;let o={value:this.value};this.$emit("input"),this.$emit("change",o)}handleClick(t){(t.type==="click"||t.keyCode===32)&&(t.preventDefault(),this.toggleCheck(t))}mounted(){}render(){let t=a({dot:!0,open:this.value});return i` <label
|
||||
import{css as e,html as i,Component as o,classMap as a}from"wkit";class n extends o{static props={value:!1,inactiveText:"",activeText:"",inlineText:!1,disabled:!1,readOnly:!1};static styles=[e`:host{display:inline-flex;cursor:pointer}:host label{display:flex;align-items:center;height:32px;padding-right:8px;line-height:1;font-size:14px;white-space:nowrap;color:var(--color-dark-1);cursor:inherit;outline:none;-webkit-user-select:none;user-select:none}:host label.open .switch{flex-direction:row-reverse;background:var(--color-grey-3)}:host .switch{display:flex;align-items:center;min-width:32px;height:18px;padding:0 2px;margin-right:5px;border-radius:16px;font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;font-size:12px;background:var(--color-plain-3);transition:box-shadow .2s ease,background .2s ease}:host .dot{display:block;width:14px;height:14px;border-radius:50%;background:#fff;content:""}:host .text{padding:0 3px;background:none;color:#fff}:host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-plain-a)}`,e`:host([size=small]) label{height:24px;font-size:12px}:host([size=small]) .switch{min-width:28px;height:16px;padding:0 2px}:host([size=small]) .dot{width:12px;height:12px}`,e`:host([type=primay]) .open .switch{background:var(--color-teal-1)}:host([type=primay]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) .open .switch{background:var(--color-blue-1)}:host([type=info]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) .open .switch{background:var(--color-green-1)}:host([type=success]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) .open .switch{background:var(--color-orange-1)}:host([type=warning]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) .open .switch{background:var(--color-red-1)}:host([type=danger]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-red-a)}`,e`:host([readonly]),:host([disabled]){opacity:.6}:host([disabled]){cursor:not-allowed}`];get#t(){return this.value?this.activeText:this.inactiveText}#s(t){if(this.disabled||this.readOnly)return;t.stopPropagation(),this.value=!this.value;let s={value:this.value};this.$emit("input",s),this.$emit("change",s)}#e(t){(t.type==="click"||t.keyCode===32)&&(t.preventDefault(),this.#s(t))}render(){return i` <label
|
||||
class=${a({open:this.value})}
|
||||
tabindex=${this.disabled||this.readOnly?"none":0}
|
||||
@click=${this.handleClick}
|
||||
@keydown=${this.handleClick}
|
||||
@click=${this.#e}
|
||||
@keydown=${this.#e}
|
||||
>
|
||||
<span
|
||||
class=${t}
|
||||
st=${this.inlineText?this.value?this.activeText:this.inactiveText:""}
|
||||
></span>
|
||||
<slot
|
||||
>${this.inlineText?"":this.value?this.activeText:this.inactiveText}</slot
|
||||
>
|
||||
<span class="switch">
|
||||
<i class="dot"></i>
|
||||
<mark class="text">${this.inlineText?this.#t:""}</mark>
|
||||
</span>
|
||||
<slot>${this.inlineText?"":this.#t}</slot>
|
||||
</label>`}}n.reg("switch");
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import { css, svg, html, Component } from "wkit";
|
||||
import SVG_DICT from "./svg.js";
|
||||
let dict = SVG_DICT;
|
||||
if (window.EXT_SVG_DICT) {
|
||||
Object.assign(dict, EXT_SVG_DICT);
|
||||
}
|
||||
class Icon extends Component {
|
||||
static props = {
|
||||
name: {
|
||||
type: String,
|
||||
default: null,
|
||||
observer(val) {
|
||||
if (val === "") {
|
||||
this.name = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
static styles = css`:host{display:inline-flex;width:var(--wc-icon-size, 32px);height:var(--wc-icon-size, 32px)}:host(:not([name])){display:none}.icon{display:block;width:100%;height:100%;color:inherit;fill:currentColor}.icon.loading{animation:load 1.5s linear infinite}.icon circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([size=s]){width:20px;height:20px}:host([size=m]){width:24px;height:24px}:host([size=l]){width:32px;height:32px}:host([size=xl]){width:36px;height:36px}:host([size=xxl]){width:44px;height:44px}@keyframes circle{0%{stroke-dasharray:0,3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}`;
|
||||
render() {
|
||||
return html`
|
||||
<svg
|
||||
class="icon ${this.name === "loading" ? "loading" : ""}"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
${this.name === "loading" ? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />` : svg`<path d="${dict[this.name]}" />`}
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Icon.reg("icon");
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
|||
import{css as r,html as e,Component as a}from"wkit";import"../base/icon.js";const o={left:{custom:[{transform:" translateX(-100%)"},{transform:" translateX(0)"}]},right:{custom:[{transform:" translateX(100%)"},{transform:" translateX(0)"}]},top:{custom:[{transform:" translateY(-100%)"},{transform:" translateY(0)"}]},bottom:{custom:[{transform:" translateY(100%)"},{transform:" translateY(0)"}]}};class s extends a{static animation={};static props={title:"str!",from:"right",value:{type:Boolean,default:!1,observer(t){this.$animate(!t),this.$refs.drawer.$animate(!t)}},maskClose:!1};static styles=[r`:host{position:fixed;left:0;top:0;z-index:9;width:100%;height:100%;background:rgba(0,0,0,.3)}.drawer{display:flex;flex-direction:column;position:absolute;width:var(--wc-drawer-width, 50%);height:100%;font-size:14px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.2)}.header{display:flex;align-items:center;justify-content:space-between;padding:16px;font-size:16px;color:var(--color-dark-2);user-select:none}.header wc-icon{--wc-icon-size: 16px;margin-right:8px;color:var(--color-grey-3);cursor:pointer}.wrapper{flex:1;padding:16px}`,r`:host([from=left]) .drawer,:host([from=right]) .drawer{top:0;width:var(--wc-drawer-width, 50%);height:100%}:host([from=top]) .drawer,:host([from=bottom]) .drawer{left:0;width:100%;height:var(--wc-drawer-width, 50%)}:host([from=left]) .drawer{left:0}:host([from=right]) .drawer{right:0}:host([from=top]) .drawer{top:0}:host([from=bottom]) .drawer{bottom:0}`];#t(){this.value=!1,this.$emit("input",{value:!1}),this.$emit("close",{value:!1})}mounted(){this.$on("click",t=>{t.composedPath()[0]===t.currentTarget&&this.maskClose&&this.#t()})}render(){return e`
|
||||
<div class="drawer" ref="drawer" #animation=${o[this.from]}>
|
||||
<header class="header">
|
||||
<span class="title"><slot name="title">${this.title}</slot></span>
|
||||
<wc-icon name="close" @click=${this.#t}></wc-icon>
|
||||
</header>
|
||||
<main class="wrapper"><slot></slot></main>
|
||||
</div>
|
||||
`}}s.reg("drawer");
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
import{html as e,css as a,Component as o,styleMap as r}from"wkit";class n extends o{static props={progress:"num!0",duration:3e3,value:{type:Boolean,observer(t){this.duration>0?t&&requestAnimationFrame(this.#i.bind(this)):t?this.setAttribute("loading",""):this.removeAttribute("loading")}}};static styles=[a`:host{position:fixed;top:0;left:0;z-index:65535;display:flex;width:100vw;height:0}.thumb{width:0;height:var(--wc-loading-height, 2px);background:var(--wc-loading-background, var(--color-teal-1));box-shadow:0 0 5px var(--wc-loading-background, var(--color-teal-1));will-change:width;transition:width .1s linear}:host([loading]) .thumb{width:25% !important;animation:autoplay 1s infinite ease-in-out}@keyframes autoplay{from,to{transform:translateX(0)}50%{transform:translateX(calc(100vw - 100%))}}`];#t;#i(t){this.#t===void 0&&(this.#t=t);let i=t-this.#t,s=~~(i/(this.duration/100));if(s!==this.progress&&(this.progress=s),i>this.duration){this.progress=0,this.#t=void 0,this.value=!1,this.$emit("input"),this.$emit("change");return}requestAnimationFrame(this.#i.bind(this))}render(){let t=r({width:this.progress+"%"});return e` <span class="thumb" style=${t}></span> `}}n.reg("loading");
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import{css as p,html as c,Component as l,bind as a,unbind as d,styleMap as f,offset as h,outsideClick as m,clearOutsideClick as x}from"wkit";import"../base/button.js";const w="\u8BF7\u786E\u8BA4\u4F60\u7684\u64CD\u4F5C!";class u extends l{static props={title:"str!",confirmButtonType:"str!primary"};static styles=[p`:host{display:inline-flex}.container{position:relative}.tooltip{display:none;position:fixed;z-index:9;justify-content:center;align-items:center;max-width:260px;min-width:32px;padding:8px 12px 12px;border-radius:3px;font-size:var(--wc-popconfirm-font, 14px);background:var(--wc-popconfirm-background, #fff);color:var(--wc-popconfirm-color, var(--color-dark-1));box-shadow:0 0 3px var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.3));word-break:break-all;-webkit-user-select:none;user-select:none}.tooltip::after{position:absolute;display:block;width:8px;height:8px;border-radius:2px;background:var(--wc-popconfirm-background, #fff);content:"";transform:rotate(45deg);box-shadow:-1px -1px 0 var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=left-top]::after{right:16px;bottom:-4px;box-shadow:1px 1px 0 var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=left-bottom]::after{right:16px;top:-4px}.tooltip[placement=right-top]::after{left:16px;bottom:-4px;box-shadow:1px 1px 0 var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=right-bottom]::after{left:16px;top:-4px}`,p`.title{display:flex;align-items:center;gap:6px;padding:8px 0;--wc-icon-size: 16px}.title wc-icon{flex-shrink:0;color:var(--wc-popconfirm-icon-color, var(--color-red-1))}:host([hide-icon]) .title wc-icon{display:none}.actions{display:flex;justify-content:flex-end;gap:4px;margin-top:8px}.actions wc-button{min-width:40px;height:20px;font-size:12px}.actions wc-button:first-child{--wc-button-border-color: none}`];#t=!1;#i(s){let{left:t,top:i}=h(this),e="left",o={display:"block"},r=document.documentElement.scrollTop;if(!this.#t){if(t<260||t>260&&window.innerWidth-t>260)e="right",o.left=t+"px";else{let n=window.innerWidth-t+this.clientWidth;o.right=n+"px"}if(i<160)i+=8+this.clientHeight,e+="-bottom",o.top=i+"px";else{let n=window.innerHeight-i+8;e+="-top",o.bottom=n+"px",r>0&&(o.transform=`translateY(-${r}px)`)}this.#t=!0,this.$refs.tips.setAttribute("placement",e),this.$refs.tips.style.cssText=f(o),this.$refs.tips.$animate()}}#o(){this.#t&&(this.#t=!1,this.$refs.tips.$animate(!0))}#e(){this.$emit("confirm"),this.#o()}mounted(){this._outFn=m(this,s=>this.#o()),this._scrollFn=a(document,"scroll",s=>{if(this.#t){let t=document.documentElement.scrollTop;this.$refs.tips.style.transform=`translateY(-${t}px)`}})}unmounted(){d(document,"scroll",this._scrollFn),x(this._outFn)}render(){return c`
|
||||
<main class="container">
|
||||
<div class="wrapper" @click=${this.#i}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="tooltip" ref="tips" #animation=${{}}>
|
||||
<header class="title">
|
||||
<wc-icon name="info"></wc-icon>
|
||||
${this.title||w}
|
||||
</header>
|
||||
<footer class="actions">
|
||||
<wc-button @click=${this.#o}>取消</wc-button>
|
||||
<wc-button
|
||||
solid
|
||||
type=${this.confirmButtonType||"primary"}
|
||||
@click=${this.#e}
|
||||
>确定</wc-button
|
||||
>
|
||||
</footer>
|
||||
<i class="trigon"></i>
|
||||
</div>
|
||||
</main>
|
||||
`}}u.reg("popconfirm");
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import{css as a,html as n,Component as d,bind as r,styleMap as c,offset as f}from"wkit";class h extends d{static props={title:"str!"};static styles=[a`:host{display:inline-flex}.container{position:relative}.tooltip{display:none;position:fixed;z-index:9;justify-content:center;align-items:center;max-width:360px;min-width:32px;padding:6px 8px;border-radius:3px;font-size:var(--wc-tooltip-font, 14px);background:var(--wc-tooltip-background, #fff);color:var(--wc-tooltip-color, var(--color-dark-1));box-shadow:0 0 3px var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.3));word-break:break-all;-webkit-user-select:none;user-select:none}.tooltip::after{position:absolute;display:block;width:8px;height:8px;border-radius:2px;background:var(--wc-tooltip-background, #fff);content:"";transform:rotate(45deg);box-shadow:-1px -1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=left-top]::after{right:16px;bottom:-4px;box-shadow:1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=left-bottom]::after{right:16px;top:-4px}.tooltip[placement=right-top]::after{left:16px;bottom:-4px;box-shadow:1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1))}.tooltip[placement=right-bottom]::after{left:16px;top:-4px}`];mounted(){r(this.$refs.wrap,"mouseenter",p=>{let{left:t,top:e}=f(this),i="left",o={display:"block"},l=document.documentElement.scrollTop;if(this.title.trim()!==""){if(t<360||t>360&&window.innerWidth-t>360)i="right",o.left=t+"px";else{let s=window.innerWidth-t-this.clientWidth;o.right=s+"px"}if(e<96)e+=8+this.clientHeight,i+="-bottom",o.top=e+"px";else{let s=window.innerHeight-e+8+l;i+="-top",o.bottom=s+"px"}this.$refs.tips.setAttribute("placement",i),this.$refs.tips.style.cssText=c(o),this.$refs.tips.$animate()}}),r(this.$refs.wrap,"mouseleave",p=>{this.$refs.tips.$animate(!0)})}render(){return n`
|
||||
<main class="container">
|
||||
<div class="wrapper" ref="wrap"><slot></slot></div>
|
||||
<div class="tooltip" ref="tips" #animation=${{}}>
|
||||
<slot name="title">${this.title}</slot><i class="trigon"></i>
|
||||
</div>
|
||||
</main>
|
||||
`}}h.reg("tooltip");
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import{html as e,css as t,Component as i}from"wkit";class l extends i{static styles=[t`:host{display:block;width:100%}fieldset{width:100%;height:1px;margin:16px 0;border:0;border-top:1px dashed var(--color-grey-1);user-select:none}fieldset legend{display:inline-flex;align-items:center;padding:0 8px;font-size:12px;text-align:center;color:var(--color-grey-2)}:host([align=left]) fieldset{padding-left:16px}:host([align=left]) fieldset legend{text-align:left}:host([align=right]) fieldset{padding-right:16px}:host([align=right]) fieldset legend{text-align:right}:host(:empty) fieldset legend{padding:0}`];render(){return e`<fieldset>
|
||||
<legend><slot></slot></legend>
|
||||
</fieldset> `}}l.reg("divider");
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { css, html, Component } from "wkit";
|
||||
class Space extends Component {
|
||||
static styles = css`:host{display:block}.container{display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:6px 0;gap:12px}:host([vertical]) .container{flex-direction:column}:host([justify]) .container{justify-content:space-between}:host([gap=s]) .container{padding:2px 0;gap:4px}:host([gap=m]) .container{padding:4px 0;gap:8px}:host([gap=l]) .container{padding:6px 0;gap:12px}:host([gap=xl]) .container{padding:8px 0;gap:16px}:host([gap=xxl]) .container{padding:10px 0;gap:20px}:host([gap=xxxl]) .container{padding:12px 0;gap:24px}`;
|
||||
render() {
|
||||
return html`<div class="container"><slot /></div>`;
|
||||
}
|
||||
}
|
||||
Space.reg("space");
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import{css as e,html as t,Component as n}from"wkit";class o extends n{static props={value:0,max:0};static styles=[e`:host{display:inline-flex}.container{position:relative}.dot{position:absolute;z-index:9;left:calc(100% - 5px);top:-6px;display:inline-flex;justify-content:center;align-items:center;min-width:10px;min-height:10px;border-radius:10px;background:var(--color-red-1);-webkit-user-select:none;user-select:none}.num{padding:1px 3px;line-height:12px;font-size:12px;font-style:normal;text-align:center;white-space:nowrap;font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;color:#fff}.num:not(:empty){min-width:14px}:host([hidden-value]) .dot .num{display:none}`,e`:host([type=info]) .dot{background-color:var(--color-blue-1)}:host([type=success]) .dot{background-color:var(--color-green-1)}:host([type=warning]) .dot{background-color:var(--color-orange-1)}`];get#e(){return this.value>0?this.max>0&&this.value>this.max?this.max+"+":this.value:""}render(){return t`
|
||||
<main class="container">
|
||||
<slot></slot>
|
||||
<span class="dot"><i class="num">${this.#e}</i></span>
|
||||
</main>
|
||||
`}}o.reg("badge");
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
const i=/<\!DOCTYPE html>/,o=/<([\w\-]+)([\w\W]*?)>/g,u=/<\/([\w\-]+)>/g,k=/[@a-zA-Z\-.:#]+=(["'])[^"]+\1|[@a-zA-Z\-.:#]+=[a-zA-Z0-9]+|[@a-zA-Z\-.:#]+=\$\{.+\}|[@a-zA-Z\-.]+/g,f=/<!--([\w\W]*?)-->/g,d=/(<script[^>]*?>)([\w\W]*?)(<\/script>)/g,_=/import (['"])([^'"]*?)\1/g,h=/import ([\w\W]*?) from (['"])([^'"]*?)\2/g,y=/import\((['"])([^'"]*?)\1\)/g,b=/\b(var|const|let|function|for|switch|with|if|else|export|import|assert|as|from|async|await|break|continue|return|class|extends|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|static|get|set|public|private|protected|package|typeof|void)\b/g,w=/\s(=|-|\+|\/|\*|<|>|%)\s/g,W=/(\+\=|-=|\/=|\*=|--|\+\+|===|==|=>|\.\.\.|\.|\?\.|\?\?|&&|\|\|)/g,A=/\b(null|undefined|true|false|NaN|Infinity)\b/g,T=/\b(Object|String|Array|Boolean|Number|Function|Promise|Map|Set|WeakMap|WeakSet|URL)\b/g,g=/(['"`])(.*?)(?<!\\)\1/g,S=/\b(\d+)\b/g,E=/([\.\s])((?!if|for)[a-zA-Z$_#][\da-zA-Z_]*)\s?(\(.*?\)?)/g,P=/(?=\s)?([ ]*\/\/.*)|(^\/\/.*)/g,z=/\/\*([\w\W]*?)\*\//g,I=/([=\(][ ]*)\/(.+?)\/([gmi]*)/g,n={code:/`([^`]*?[^`\\\s])`/g,codeBlock:/^```(.*?)$/gm,strong:[/__([\s\S]*?[^\s\\])__(?!_)/g,/\*\*([\s\S]*?[^\s\\])\*\*(?!\*)/g],em:[/_([\s\S]*?[^\s\\_])_(?!_)/g,/\*([\s\S]*?[^\s\\*])\*(?!\*)/g],del:/~~([\s\S]*?[^\s\\~])~~/g,qlinkVar:/^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/gm,qlink:/\[([^\]]*?)\]\[(\d*?)\]/g,img:/\!\[([^\]]*?)\]\(([^)]*?)\)/g,a:/\[([^\]]*?)\]\(([^)]*?)(\s+"([\s\S]*?)")*?\)/g,head:/^(#{1,6} )(.*)$/gm,quote:/^(>{1,} )(.*)$/gm,task:/^([\-\+\*]) \[( |x)\] (.*)$/gm,list:/^([ \t]*?([\-\+\*]|\d+\.) )(.*)$/gm,br:/^([\-\*_=]{3})(.*?)$/gm};function p(r){return r.replace(_,(t,e,c)=>`import ${e}[link]${c}[/link]${e}`).replace(h,(t,e,c,a)=>(e=e.replace(/(\{|\}|,)/g,"[cm]$1[/cm]"),`import ${e} from ${c}[link]${a}[/link]${c}`)).replace(y,(t,e,c)=>`import(${e}[link]${c}[/link]${e})`).replace(I,(t,e,c,a)=>(c=c.replace(/&/g,"&").replace(/(\\.)/g,"[fn]$1[/fn]"),`${e}[type]/[/type][cm]${c}[/cm][type]/[/type]${a?`[num]${a}[/num]`:""}`)).replace(E,"$1[fn]$2[/fn]$3").replace(b,"[key]$1[/key]").replace(w," [key]$1[/key] ").replace(W,"[key]$1[/key]").replace(A,"[buildin]$1[/buildin]").replace(T,"[type]$1[/type]").replace(S,"[num]$1[/num]").replace(g,(t,e,c)=>c.startsWith("[link]")&&c.endsWith("[/link]")?(c=c.slice(6,-7).replace(/\[(\w+)\](.*?)\[\/\1\]/g,"$2"),`[cm]${e}[/cm][link]${c}[/link][cm]${e}[/cm]`):(c=c.replace(/\[(\w+)\](.*?)\[\/\1\]/g,"$2").replace(/<(\/?)xmp>/g,"<$1xmp>").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/(\\.)/g,"[fn]$1[/fn]"),`[cm]${e}[/cm][str]${c}[/str][cm]${e}[/cm]`)).replace(P,(t,e)=>e.includes("[/link]")||e.includes("[link]")?e:(e=e.replace(/\[(\w+)\](.*?)\[\/\1\]/g,"$2").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),`[cm]${e}[/cm]`)).replace(z,(t,e)=>(e=e.replace(/\[(\w+)\](.*?)\[\/\1\]/g,"$2").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),e=`/*${e}*/`.split(`
|
||||
`).map(c=>`[cm]${c}[/cm]`),e.join(`
|
||||
`)))}function s(r){return r.replace(/\[(\/?)tag\]/g,(t,e)=>e?"</c>":'<c class="t-tag">').replace(/\[(\/?)attr\]/g,(t,e)=>e?"</c>":'<c class="t-attr">').replace(/\[(\/?)str\]/g,(t,e)=>e?"</c>":'<c class="t-str">').replace(/\[(\/?)key\]/g,(t,e)=>e?"</c>":'<c class="t-keyword">').replace(/\[(\/?)num\]/g,(t,e)=>e?"</c>":'<c class="t-num">').replace(/\[(\/?)fn\]/g,(t,e)=>e?"</c>":'<c class="t-fn">').replace(/\[(\/?)cm\]/g,(t,e)=>e?"</c>":'<c class="t-comment">').replace(/\[(\/?)buildin\]/g,(t,e)=>e?"</c>":'<c class="t-buildin">').replace(/\[(\/?)type\]/g,(t,e)=>e?"</c>":'<c class="t-type">').replace(/\[(\/?)link\]/g,(t,e)=>e?"</c>":'<c class="t-link">')}function O(r){return r=r.replace(n.head,"[cm]$1[/cm][tag]<strong>$2</strong>[/tag]").replace(n.br,"[cm]$1[/cm][tag]$2[/tag]").replace(n.quote,"[cm]$1[/cm]<em>$2</em>").replace(n.task,"[cm]$1 [[/cm][attr]$2[/attr][cm]][/cm] <strong>$3</strong>").replace(n.list,"[cm]$1[/cm]<strong>$3</strong>").replace(n.code,"[cm]`[/cm][tag]$1[/tag][cm]`[/cm]").replace(n.codeBlock,"[cm]```[/cm][tag]$1[/tag]").replace(n.strong[0],"[cm]__[/cm]<strong>$1</strong>[cm]__[/cm]").replace(n.strong[1],"[cm]**[/cm]<strong>$1</strong>[cm]**[/cm]").replace(n.em[0],"[cm]_[/cm]<em>$1</em>[cm]_[/cm]").replace(n.em[1],"[cm]*[/cm]<em>$1</em>[cm]*[/cm]").replace(n.del,"[cm]~~[/cm]<del>$1</del>[cm]~~[/cm]").replace(n.qlinkVar,"[[attr]$1[/attr]]: [link]$2[/link] [tag]$3[/tag]").replace(n.qlink,"[[attr]$1[/attr]][[link]$2[/link]]").replace(n.img,"![[attr]$1[/attr]]([link]$2[/link])").replace(n.a,(t,e,c,a,l="")=>(l&&(l=` "[tag]${l}[/tag]"`),`[[attr]${e}[/attr]]([link]${c}[/link]${l})`)),s(r)}function $(r){return r=r.replace(i,"[tag]<!DOCTYPE [attr]html[/attr]>[/tag]").replace(d,(t,e,c,a)=>e+p(c)+a).replace(o,(t,e,c)=>(c&&(c=c.replace(k,function(a){if(~a.indexOf("=")){a=a.split("=");let l=a.shift(),m=a.join("=").replace(/(\n+)/g,`[/str]
|
||||
[str]`);return m.startsWith("${")&&m.endsWith("}")?`[attr]${l}[/attr]=${m}`:`[attr]${l}[/attr]=[str]${m}[/str]`}else return`[attr]${a}[/attr]`})),`[tag]<${e}[/tag]${c}[tag]>[/tag]`)).replace(u,(t,e)=>`[tag]</${e}>[/tag]`).replace(f,"[cm]<!--$1-->[/cm]"),s(r)}function R(r){return r=r.replace(g,'<cc class="t-str">$1$2$1</cc>').replace(/(\$[a-zA-Z\d_\-]+)/g,'<c class="t-var">$1</c>').replace(/(\-\-[a-z\d]+\-[a-z\d]+)/g,'<c class="t-const">$1</c>').replace(/:(hover|after|active|last\-child|first\-child|nth\-child)/g,'<c class="t-buildin">:$1</c>').replace(/^((?:[ ])*)([\.#])([\w\-]+)/gm,'$1<c class="t-comment">$2</c><c class="t-keyword">$3</c>').replace(/:(root|host)/g,'<c class="t-comment">:</c><c class="t-keyword">$1</c>').replace(/([a-zA-Z\-]+):(\s?[^\n]+)/g,(t,e,c)=>(c.trim()!=="("&&!c.endsWith("</cc>;")&&(c=c.replace(/([^,;]*)([,;]?$)/,'<c class="t-num">$1</c><c class="t-comment">$2</c>')),`<c class="t-comment"><b>${e}</b>:</c>${c}`)).replace(/([,\{\}])/g,'<c class="t-comment">$1</c>').replace(/\b(in|from|to|throught)\b/g,'<c class="t-keyword">$1</c>').replace(/(&|@use|@each|@for)/g,'<c class="t-keyword">$1</c>').replace(/<cc class="t-str">(.*?)<\/cc>/g,(t,e)=>(e=e.replace(/<\/?\w+[^>]*?>/g,""),`<c class="t-str">${e}</c>`)),r}function x(r){let t={},e=160,c=a=>{for(let l in t)a.includes(l)&&(a=a.replace(l,t[l]),delete t[l]);return a};return r=r.replace(/html`(.*)`/g,(a,l)=>{let m="\uE736\uEA8B"+(e++).toString(16);return t[m]=`html\`${$(l)}\``,m}),r=r.replace(/html`([\w\W]*?)`/g,(a,l)=>{let m="\uE736\uEA8B"+(e++).toString(16);return t[m]=c(`html\`${$(l)}\``),m}),c(s(p(r)))}export{R as colorCss,$ as colorHtml,x as colorJs,O as colorMd};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import{html as t,raw as n,css as r,Component as s,nextTick as d}from"wkit";import{colorHtml as p,colorJs as h,colorCss as g,colorMd as b}from"./colorful.js";import"../../base/icon.js";import"../../modal/layer.js";function i(o){return o.trim().replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&")}class m extends s{static props={code:{type:String,default:"",attribute:!1,observer(e){this.setCode(e)}},lang:""};static styles=[r`:host{display:flex;border-radius:3px}.container{display:flex;flex-direction:column;position:relative;width:100%;margin:10px 0;padding-bottom:6px;border-radius:3px;background:#f7f8fb;color:var(--color-dark-1);box-shadow:0 1px 5px rgba(0,0,0,.1)}.container .title{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;line-height:1;font-size:14px;user-select:none}.container .title section{display:flex;align-items:center}.container .title i{display:block;width:12px;height:12px;margin-right:6px;border-radius:50%;background:var(--color-red-1)}.container .title i:nth-child(2){background:var(--color-orange-1)}.container .title i:nth-child(3){background:var(--color-green-1)}.container .title .act{--wc-icon-size: 18px;margin:0 6px;color:var(--color-grey-2);cursor:pointer}.container .title .act:hover{color:var(--color-grey-3)}`,r`.code-block{display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;line-height:20px;font-size:14px;color:var(--color-dark-1);cursor:text;counter-reset:code}.code-block>code{display:block;position:relative;min-height:20px;padding:0 8px 0 45px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;white-space:pre-wrap;word-break:break-word}.code-block>code::before{position:absolute;left:0;width:40px;height:100%;padding-right:5px;text-align:right;color:var(--color-grey-1);content:counter(code);counter-increment:code}.code-block>code .t-tag,.code-block>code .t-keyword,.code-block>code .t-const{color:var(--color-red-2)}.code-block>code .t-attr,.code-block>code .t-fn,.code-block>code .t-var{color:var(--color-blue-2)}.code-block>code .t-str{color:var(--color-green-2)}.code-block>code .t-comment{color:var(--color-grey-2)}.code-block>code .t-type{font-weight:bold;color:var(--color-orange-1)}.code-block>code .t-num,.code-block>code .t-buildin{color:#a46ad3}.code-block>code .t-link{text-decoration:underline;color:var(--color-grey-2)}.code-block>code .t-buildin,.code-block>code .t-keyword,.code-block>code .t-type,.code-block>code .t-link,.code-block>code .t-comment{font-style:italic}`];#e=[];setCode(e,l){let a=this.lang,c=!1;switch(a){case"js":case"javascript":case"ts":case"typescript":e=h(e);break;case"html":case"xml":e=p(e);break;case"css":case"scss":case"less":c=!0,e=g(e);break;case"md":case"markdown":e=b(e);break}c===!1&&(e=e.replace(/<(\/?)(?!c)(\w+)([^>]*?)>/g,"<$1$2$3>").replace(/<!(doctype)([^>]*?)>/gi,"<$1$2>").replace(/<\?([^\?>]*?)\?>/g,"<?$1?>").replace(/<\!\-\-([^>]*?)\-\->/g,"<!--$1-->")),this.#e=e.split(`
|
||||
`)}copyCode(){if(navigator.clipboard)navigator.clipboard.writeText(this.code);else{let e=document.createElement("textarea");e.style.position="fixed",e.style.left="-2000px",e.value=this.code,this.root.appendChild(e),e.select(),document.execCommand("copy"),e.remove()}layer.toast("\u590D\u5236\u5230\u7C98\u8D34\u677F\u6210\u529F","success")}mounted(){var e=this.innerHTML||this.textContent;e=e.trim().replace(/^[\r\n]|\s{2,}$/g,""),e.startsWith("<xmp>")&&e.endsWith("</xmp>")?e=e.slice(6,-7):this.firstElementChild?.tagName==="TEXTAREA"?e=this.firstElementChild.value.trim():e.startsWith("<pre>")&&e.endsWith("</pre>")?e=i(e.slice(6,-7)):e=i(e),this.textContent="",e&&d(l=>{this.code=e})}render(){return t`
|
||||
<main class="container">
|
||||
<header class="title">
|
||||
<section><i></i><i></i><i></i></section>
|
||||
<section>${this.lang}</section>
|
||||
<wc-icon
|
||||
title="复制"
|
||||
class="act"
|
||||
name="doc"
|
||||
@click=${this.copyCode}
|
||||
></wc-icon>
|
||||
</header>
|
||||
<footer class="code-block">
|
||||
${this.#e.map(e=>t`<code>${n(e)}</code>`)}
|
||||
</footer>
|
||||
</main>
|
||||
`}}m.reg("code");
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import{css as o,html as r,Component as e}from"wkit";import"../base/icon.js";const a={type:"scale"};class c extends e{static props={closable:!1};static styles=[o`:host{display:inline-flex}.container{display:flex;align-items:center;width:auto;height:var(--wc-tag-height, 32px);padding:var(--wc-tag-padding, 0 10px);gap:3px;font-size:var(--wc-tag-font, 12px);border:1px solid var(--wc-tag-border-color, var(--color-grey-1));border-radius:3px;background:var(--wc-tag-background, var(--color-plain-1));white-space:nowrap;-webkit-user-select:none;user-select:none}.close{padding:3px;display:inline-flex;--wc-icon-size: 8px;line-height:1;border-radius:50%;cursor:pointer}.close:hover{background:var(--color-grey-2);color:#fff}`,o`:host([size=small]) .container{height:24px;padding:0 8px}`,o`:host([type=primary]) .container{border-color:var(--color-teal-a);background:#ecf5ff;color:var(--color-teal-3)}:host([type=primary]) .close:hover{color:#fff;background:var(--color-teal-1)}:host([type=info]) .container{border-color:var(--color-blue-a);background:#ecf5ff;color:var(--color-blue-3)}:host([type=info]) .close:hover{color:#fff;background:var(--color-blue-1)}:host([type=success]) .container{border-color:var(--color-green-a);background:#f0f9eb;color:var(--color-green-3)}:host([type=success]) .close:hover{color:#fff;background:var(--color-green-1)}:host([type=warning]) .container{border-color:var(--color-orange-a);background:#fdf6ec;color:var(--color-orange-3)}:host([type=warning]) .close:hover{color:#fff;background:var(--color-orange-1)}:host([type=danger]) .container{border-color:var(--color-red-a);background:#fef0f0;color:var(--color-red-3)}:host([type=danger]) .close:hover{color:#fff;background:var(--color-red-1)}`];#o(){this.$refs.tag.$animate(!0).then(n=>this.remove()),this.$emit("close")}render(){return r`
|
||||
<main class="container" ref="tag" #animation=${a}>
|
||||
<slot></slot>
|
||||
${this.closable?r`<span class="close" @click=${this.#o}
|
||||
><wc-icon name="close"></wc-icon
|
||||
></span>`:""}
|
||||
</main>
|
||||
`}}c.reg("tag");
|
||||
|
|
@ -0,0 +1 @@
|
|||
import{css as u,Component as c}from"wkit";const a=60*1e3,s=a*60,$=s*6,o=s*24,f=o*2,g=o*7,i=new Date().setHours(0,0,0,0),D=new Date(new Date().getFullYear(),0,1,0,0,0,0),h=new Date(new Date().getFullYear()-1,0,1,0,0,0,0);class m extends c{static props={stamp:"num!0"};get#t(){let n=new Date().setMilliseconds(0),t=this.stamp||n,e;if((t+"").length===10&&(t*=1e3),e=new Date(t),this.title=e.toLocaleString(),t>n-a)return"\u521A\u521A";if(t>n-s)return`${~~(t/a)}\u5206\u949F\u524D`;if(t>n-$)return`${~~(t/s)}\u5C0F\u65F6\u524D`;if(t>=i-f){let r=e.getHours(),l=r<6?"\u51CC\u6668":r<12?"\u4E0A\u5348":r>18?"\u665A\u4E0A":"\u4E0B\u5348";return t>=i?`${l}${r%12}\u70B9${e.getMinutes()}\u5206`:t>=i-o?`\u6628\u5929${l}${r%12}\u70B9`:`\u524D\u5929${l}`}return t>=i-g?`${~~((n-t)/o)}\u5929\u524D`:t>D?`${e.getMonth()+1}\u6708${e.getDate()}\u65E5`:t>h?`\u53BB\u5E74${e.getMonth()+1}\u6708${e.getDate()}\u65E5`:`${e.getFullYear()}\u5E74${e.getMonth()+1}\u6708`}static styles=[u`:host{display:inline-flex;font-size:12px;color:var(--color-dark-1);-webkit-user-select:none;user-select:none;cursor:default}`];render(){return this.#t}}m.reg("time");
|
||||
|
|
@ -8,8 +8,6 @@ import { nextTick } from 'wkit'
|
|||
|
||||
export function noop() {}
|
||||
|
||||
export function checkPermission() {}
|
||||
|
||||
export async function getHistory() {}
|
||||
|
||||
export function saveHosts(dict) {}
|
||||
export function getAllContainers() {
|
||||
return native.handler('docker', { action: 'all-containers' })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ import { html, css, Component, classMap, nextTick, outsideClick } from 'wkit'
|
|||
|
||||
// import '../components/records.js'
|
||||
|
||||
import { noop } from '../utils/index.js'
|
||||
import { noop, getAllContainers } from '../utils/index.js'
|
||||
|
||||
class Home extends Component {
|
||||
static props = {}
|
||||
static props = {
|
||||
containers: []
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
|
|
@ -52,33 +54,56 @@ class Home extends Component {
|
|||
.main .list {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
|
||||
css`
|
||||
.context-menu {
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
padding: 5px 0;
|
||||
background: #fff;
|
||||
}
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
gap: 12px;
|
||||
|
||||
.context-menu .item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
--wc-icon-size: 16px;
|
||||
|
||||
.context-menu .item :hover {
|
||||
background: #f2f5fc;
|
||||
.field {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
&.flex-2 {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-ell {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-teal-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
async mounted() {
|
||||
// outsideClick(this.$refs.context, _ => this.$refs.context.close())
|
||||
let list = await getAllContainers()
|
||||
|
||||
console.log(list)
|
||||
list.forEach(it => {
|
||||
it.port = it.port.replace('0.0.0.0:', '').replace(':::', '')
|
||||
})
|
||||
this.containers = list
|
||||
}
|
||||
|
||||
showMenu(ev) {
|
||||
|
|
@ -123,8 +148,38 @@ class Home extends Component {
|
|||
return html`
|
||||
<main class="main noselect">
|
||||
<header class="toolbar">
|
||||
<wc-input round></wc-input>
|
||||
<wc-input size="small" round placeholder="搜索容器"></wc-input>
|
||||
</header>
|
||||
|
||||
<ul class="list">
|
||||
${this.containers.map(
|
||||
it => html`
|
||||
<li class="item">
|
||||
<section class="field flex-2 name">
|
||||
<wc-tooltip title=${it.name}>
|
||||
<span class="text-ell">${it.name}</span>
|
||||
</wc-tooltip>
|
||||
|
||||
<span>${it.id}</span>
|
||||
</section>
|
||||
<section class="field flex-2">
|
||||
<wc-tooltip title=${it.image}>
|
||||
<span class="text-ell">${it.image}</span>
|
||||
</wc-tooltip>
|
||||
</section>
|
||||
<section class="field center">${it.state}</section>
|
||||
<section class="field">
|
||||
<wc-tooltip title=${it.port}>
|
||||
<span class="text-ell">${it.port}</span>
|
||||
</wc-tooltip>
|
||||
</section>
|
||||
<section class="field center">
|
||||
<wc-icon name="trash"></wc-icon>
|
||||
</section>
|
||||
</li>
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue