一大波更新

usr/lib/dooke/_docker.py

@@ -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]
+

usr/lib/dooke/_window.py

@@ -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)

usr/lib/dooke/dooke.py

@@ -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):
 

usr/lib/dooke/webapp/app.js

@@ -8,14 +8,16 @@ import 'es.shim'
 import { html, css, Component } from 'wkit'
 import { createApp } from 'wkitd'
 
-import 'ui/icon/index.js'
+import 'ui/base/icon.js'
-import 'ui/scroll/index.js'
+import 'ui/base/button.js'
-import 'ui/layer/index.js'
+import 'ui/base/space.js'
-import 'ui/space/index.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/modal/popconfirm.js'
-import 'ui/form/link.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 {

usr/lib/dooke/webapp/components/sidebar.js

@@ -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

usr/lib/dooke/webapp/css/reset.css

@@ -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;
 }

usr/lib/dooke/webapp/lib/ui/base/icon.js

@@ -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};

usr/lib/dooke/webapp/lib/ui/base/link.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/base/space.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/card/index.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/form/checkbox.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/form/input.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/form/link.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/form/radio.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/form/switch.js

@@ -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}
+      @click=${this.#e}
-      @keydown=${this.handleClick}
+      @keydown=${this.#e}
     >
-      <span
+      <span class="switch">
-        class=${t}
+        <i class="dot"></i>
-        st=${this.inlineText?this.value?this.activeText:this.inactiveText:""}
+        <mark class="text">${this.inlineText?this.#t:""}</mark>
-      ></span>
+      </span>
-      <slot
+      <slot>${this.inlineText?"":this.#t}</slot>
-        >${this.inlineText?"":this.value?this.activeText:this.inactiveText}</slot
-      >
     </label>`}}n.reg("switch");

usr/lib/dooke/webapp/lib/ui/icon/index.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/modal/drawer.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/modal/loading.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/modal/popconfirm.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/modal/tooltip.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/other/divider.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/space/index.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/views/badge.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/views/code/colorful.js

@@ -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,"&amp;").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(/&lt;(\/?)xmp&gt;/g,"<$1xmp>").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),`[cm]${e}[/cm]`)).replace(z,(t,e)=>(e=e.replace(/\[(\w+)\](.*?)\[\/\1\]/g,"$2").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),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]&lt;!DOCTYPE [attr]html[/attr]&gt;[/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]&lt;${e}[/tag]${c}[tag]&gt;[/tag]`)).replace(u,(t,e)=>`[tag]&lt;/${e}&gt;[/tag]`).replace(f,"[cm]&lt;!--$1--&gt;[/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};

usr/lib/dooke/webapp/lib/ui/views/code/index.js

@@ -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(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/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,"&lt;$1$2$3>").replace(/<!(doctype)([^>]*?)>/gi,"&lt;$1$2>").replace(/<\?([^\?>]*?)\?>/g,"&lt;?$1?>").replace(/<\!\-\-([^>]*?)\-\->/g,"&lt;!--$1--&gt;")),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");

usr/lib/dooke/webapp/lib/ui/views/tag.js

@@ -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");

usr/lib/dooke/webapp/lib/ui/views/time.js

@@ -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");

usr/lib/dooke/webapp/utils/index.js

@@ -8,8 +8,6 @@ import { nextTick } from 'wkit'
 
 export function noop() {}
 
-export function checkPermission() {}
+export function getAllContainers() {
-
+  return native.handler('docker', { action: 'all-containers' })
-export async function getHistory() {}
+}
-
-export function saveHosts(dict) {}

usr/lib/dooke/webapp/views/home.js

@@ -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%;
       }
-    `,
+      .item {
-
-    css`
-      .context-menu {
         display: flex;
-        flex-direction: column;
+        align-items: center;
-        width: 100px;
+        width: 100%;
-        padding: 5px 0;
+        height: 48px;
-        background: #fff;
+        gap: 12px;
-      }
 
-      .context-menu .item {
+        --wc-icon-size: 16px;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 15px;
-        cursor: pointer;
-      }
 
-      .context-menu .item :hover {
+        .field {
-        background: #f2f5fc;
+          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>
     `
   }