clickgo 3.16.20 → 3.16.22

package/dist/app/demo/form/control/select/select.xml

@@ -1,10 +1,10 @@
-<form title="Select" width="400" height="650" min-width="300" min-height="400" padding="10">
+<form title="Select" width="450" height="650" min-width="300" min-height="400" padding="10">
     <layout gutter="10" direction="v" style="flex: 1; width: 0;">
         <tab v-model="ntab" :tabs="['greatselect', 'select', 'levelselect']" style="flex: 1; height: 0;">
             <!-- greatselect -->
             <layout v-if="ntab === 'greatselect'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
                 <label>Now select value is {{select}}:</label>
-                <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :multi="multi" :plain="plain" :sizes="sizes" :virtual="virtual" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" style="line-height: 1.3;" @add="onGAdd" @remove="onGRemove" @change="onGChange" @changed="onGChanged">
+                <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :multi="multi" :plain="plain" :sizes="sizes" :virtual="virtual" :padding="padding[0]" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" style="line-height: 1.3;" @add="onGAdd" @remove="onGRemove" @change="onGChange" @changed="onGChanged">
                     <layout align-v="center" gutter="5" style="flex: 1;">
                         <img :src="slist[select[0]] ? slist[select[0]].src : ''" style="width: 32px; height: 32px;"></img>
                         <block>
@@ -29,7 +29,7 @@
                     </template>
                 </greatselect>
                 <label>Custom pop:</label>
-                <greatselect pop="custom" :area="area" :plain="plain" :disabled="disabled" :virtual="virtual" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
+                <greatselect pop="custom" :area="area" :plain="plain" :disabled="disabled" :virtual="virtual" :padding="padding[0]" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
                     <label>Pop is button.</label>
                     <template v-slot:pop>
                         <button>Nothing</button>
@@ -45,7 +45,7 @@
                 <layout gutter="10" direction="v" style="padding: 10px;">
                     <label>Now select value is {{select2}}</label>
                     <label>Label: {{label2}}</label>
-                    <select v-model="select2" @label="label2 = $event" :data="slist2" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" :disabledList="disabledList" :unavailableList="unavailableList" @load="onLoad" @remote="onRemote" @add="onAdd" @remove="onRemove" @added="onAdded" @removed="onRemoved" @change="onChange" @changed="onChanged" @tagclick="onTagclick" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <select v-model="select2" @label="label2 = $event" :data="slist2" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :virtual="virtual" :padding="padding[0]" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" :disabledList="disabledList" :unavailableList="unavailableList" @load="onLoad" @remote="onRemote" @add="onAdd" @remove="onRemove" @added="onAdded" @removed="onRemoved" @change="onChange" @changed="onChanged" @tagclick="onTagclick" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
                     <layout gutter="10">
                         <button @click="select2[0]='ha6'" style="flex: 1">Select disabled</button>
                         <button @click="disabledList = disabledList.length > 1 ? ['haha4'] : ['haha3', 'ha5']" style="flex: 1">{{disabledList.length ? disabledList : 'disabledList'}}</button>
@@ -53,17 +53,17 @@
                     <button @click="unavailableList = unavailableList.length > 1 ? ['haha4'] : ['haha3', 'ha5']">{{unavailableList.length ? unavailableList : 'unavailableList'}}</button>
                     <list :data="addRemoveList" style="height: 100px;"></list>
                     <label>Custom height:</label>
-                    <select :data="['1','2','3','4','5']" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" style="height: 60px;" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" v-slot:row="data">
+                    <select :data="['1','2','3','4','5']" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :virtual="virtual" :padding="padding[0]" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" style="height: 60px;" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" v-slot:row="data">
                         <layout gutter="5" align-v="center"><circle />{{data.row.label}}</layout>
                     </select>
                     <label>Always editable: {{aemodel}}</label>
                     <layout gutter="10" align-v="center">
-                        <select v-model="aemodel" :data="editableData[editableDataValue[0]]" :disabled="disabled" editable editablelabel :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" placeholder="Please enter" @load="onLoad" @remote="onRemote" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                        <select v-model="aemodel" :data="editableData[editableDataValue[0]]" :disabled="disabled" editable editablelabel :multi="multi" :plain="plain" :tree="tree" :async="async" :virtual="virtual" :padding="padding[0]" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" placeholder="Please enter" @load="onLoad" @remote="onRemote" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
                         <button @click="aemodel.length=0">clear</button>
                         <button @click="aemodel[0] = '4'">4</button>
                         <button @click="aemodel[0] = '22'">22</button>
                         <label>data</label>
-                        <select v-model="editableDataValue" :data="['0','1','2','3']" />
+                        <select v-model="editableDataValue" :data="['0','1','2','3']" :virtual="virtual" :padding="padding[0]" />
                     </layout>
                     <layout gutter="10">
                         <button @click="icon = !icon" style="flex: 1;">{{icon ? '' : '!'}}icon</button>
@@ -74,21 +74,27 @@
                         <button @click="search = !search" style="flex: 1;">{{search ? '' : '!'}}search</button>
                         <template v-if="search">
                             <button @click="remote = !remote" style="flex: 1;">{{remote ? '' : '!'}}remote</button>
-                            <select :data="[0, 100, 500, 1000, 2000]" v-model="remoteDelay" style="flex: 1;"></select>
+                            <select :data="[0, 100, 500, 1000, 2000]" v-model="remoteDelay" :virtual="virtual" :padding="padding[0]" style="flex: 1;"></select>
                         </template>
                     </layout>
                     <!-- async 延迟加载 data -->
                     <label>Async value: {{asyncModel}}</label>
                     <layout gutter="10">
-                        <select v-model="asyncModel" :data="asyncData" style="flex: 1;"></select>
+                        <select v-model="asyncModel" :data="asyncData" :virtual="virtual" :padding="padding[0]" style="flex: 1;"></select>
                         <button v-if="!asyncData.length" @click="asyncLoad">Load</button>
                     </layout>
                     <!-- no value -->
                     <label>No value: {{noValue}}</label>
                     <layout gutter="10">
-                        <select v-model="noValue" :data="['0','1','2','3']" search style="flex: 1;" />
+                        <select v-model="noValue" :data="['0','1','2','3']" :virtual="virtual" :padding="padding[0]" search style="flex: 1;" />
                         <button @click="noValue = []">Clear</button>
                     </layout>
+                    <!-- rearward -->
+                    <label>Rearward: {{reward}}</label>
+                    <layout gutter="10">
+                        <select v-model="reward" :data="['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'z']" :virtual="virtual" :padding="padding[0]" style="flex: 1;"></select>
+                        <button @click="reward[0] = 'z'">z</button>
+                    </layout>
                 </layout>
             </flow>
             <!-- levelselect -->
@@ -97,7 +103,7 @@
                     <label>Now select value is {{select3}}</label>
                     <label>Label: {{label3}}</label>
                     <label>Level: {{level3}}</label>
-                    <levelselect ref="lese" v-model="select3" @label="label3 = $event" @level="level3 = $event" :data="s3other ? slist3r : slist2" :disabled="disabled" :plain="plain" :async="async" :virtual="virtual" placeholder="Please enter" @load="onLoad" @loaded="onLoaded" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></levelselect>
+                    <levelselect ref="lese" v-model="select3" @label="label3 = $event" @level="level3 = $event" :data="s3other ? slist3r : slist2" :disabled="disabled" :plain="plain" :async="async" :virtual="virtual" :padding="padding[0]" placeholder="Please enter" @load="onLoad" @loaded="onLoaded" :style="{'font-size': fontSize ? '16px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></levelselect>
                     <button @click="async = !async">{{async ? '' : '!'}}async</button>
                     <layout gutter="10">
                         <button @click="select3 = 'title'" style="flex: 1;">Set: 'title'</button>
@@ -123,6 +129,7 @@
         </layout>
         <layout gutter="10">
             <button @click="fontSize = !fontSize" style="flex: 1;">Change font size</button>
+            <select v-model="padding" :data="['0', 'xs', 's', 'm', 'l', 'xl']" style="flex: 1;"></select>
         </layout>
         <layout gutter="10">
             <button @click="background = !background" style="flex: 1;">Change bg color</button>

package/dist/app/demo/form/control/switch/switch.js

@@ -51,6 +51,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.checked3 = false;
         this.checked4 = 0;
         this.disabled = false;
+        this.size = ['m'];
     }
     onChange(e) {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/app/demo/form/control/switch/switch.xml

@@ -2,21 +2,24 @@
     <layout direction="v" gutter="10" style="flex: 1; width: 0;">
         <label>Checked: {{checked1}}, {{checked2}}, {{checked3}}</label>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked1" :disabled="disabled"></switch>
+            <switch v-model="checked1" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked1 ? 'on' : 'off'}}</label>
-            <switch v-model="checked2" :disabled="disabled"></switch>
+            <switch v-model="checked2" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked2 ? 'true' : 'false'}}</label>
         </layout>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked3" :disabled="disabled"></switch>
+            <switch v-model="checked3" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked3 ? 'ok' : 'no'}}</label>
-            <switch :disabled="disabled" @change="onChange" />
+            <switch :disabled="disabled" @change="onChange" :size="size[0]"></switch>
             <label style="flex: 1;">not</label>
         </layout>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked4" :disabled="disabled" :map="{'true':0,'false':1}"></switch>
+            <switch v-model="checked4" :disabled="disabled" :map="{'true':0,'false':1}" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked4}}</label>
         </layout>
-        <button @click="disabled = !disabled">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+        <layout gutter="10" align-v="center">
+            <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+            <select v-model="size" :data="['s', 'm']" style="flex: 1;"></select>
+        </layout>
     </layout>
 </form>

package/dist/app/demo/form/control/text/text.js

@@ -81,6 +81,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.min = undefined;
         this.plain = false;
         this.require = false;
+        this.padding = ['m'];
         this.beforechange = false;
     }
     get textBorder() {

package/dist/app/demo/form/control/text/text.xml

@@ -2,7 +2,7 @@
     <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
         <label>Text Length: {{value.length}}, Selection Start: {{selectionStart}}, Selection End: {{selectionEnd}}, Focus: {{isFocus}}</label>
         <label>Scroll Left: {{scrollLeft}}, Scroll Top: {{scrollTop}}, Scroll Height: {{scrollHeight}}, Scroll Width: {{scrollWidth}}, Client Height: {{clientHeight}}, Client Width: {{clientWidth}}</label>
-        <text v-model="value" :placeholder="placeholder" :type="type[0]" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :disabled="disabled" :readonly="readonly" :scroll="scroll" :maxlength="maxlength" :wrap="wrap" :max="max" :min="min" :plain="plain" :require="require" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @clientheight="clientHeight = $event" @clientwidth="clientWidth = $event" @scrollheight="scrollHeight = $event" @scrollwidth="scrollWidth = $event" @focus="isFocus = true" @blur="isFocus = false" @beforechange="onBeforechange" @minmaxchange="onMinMaxChange" :style="{'flex': (type[0] === 'multi') && (scroll || !wrap) ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': (type[0] === 'multi') && (scroll || !wrap) ? '0' : undefined, 'border-width': textBorder}" :class="[phcolor && ('ph-' + phcolor)]">
+        <text v-model="value" :placeholder="placeholder" :type="type[0]" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :disabled="disabled" :readonly="readonly" :scroll="scroll" :maxlength="maxlength" :wrap="wrap" :padding="padding[0]" :max="max" :min="min" :plain="plain" :require="require" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @clientheight="clientHeight = $event" @clientwidth="clientWidth = $event" @scrollheight="scrollHeight = $event" @scrollwidth="scrollWidth = $event" @focus="isFocus = true" @blur="isFocus = false" @beforechange="onBeforechange" @minmaxchange="onMinMaxChange" :style="{'flex': (type[0] === 'multi') && (scroll || !wrap) ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': (type[0] === 'multi') && (scroll || !wrap) ? '0' : undefined, 'border-width': textBorder}" :class="[phcolor && ('ph-' + phcolor)]">
             <menulist v-if="menu">
                 <menulist-item>Custom</menulist-item>
             </menulist>
@@ -37,6 +37,7 @@
             <button @click="lineHeight = lineHeight === 1 ? 1.5 : 1" style="flex: 1;">line to {{lineHeight === 1 ? 1.5 : 1}}</button>
             <button @click="fontSize = fontSize === 12 ? 16 : 12" style="flex: 1;">size to {{fontSize === 12 ? 16 : 12}}</button>
             <button @click="longClick" style="flex: 1;">{{long ? '' : '!'}}long</button>
+            <select v-model="padding" :data="['0', 'xs', 's', 'm', 'l', 'xl']" style="flex: 1;"></select>
         </layout>
         <layout gutter="10">
             <select v-model="type" :data="['text', 'password', 'multi', 'number']" style="flex: 1;"></select>

package/dist/app/demo/form/control/vflow/vflow.xml

@@ -5,7 +5,7 @@
             <!-- v -->
             <layout gutter="10" style="flex: 1; height: 0;">
                 <vflow v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" direction="v" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" @select="area = $event" @clientwidth="cWidth1 = $event" @clientheight="cHeight1 = $event" @scrollwidth="sWidth1 = $event" @scrollheight="sHeight1 = $event" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" class="border" style="flex: 1; width: 0;" :data="lineCount" v-slot="data" :sizes="is">
-                    <button v-if="data.index > 0 && data.index % 10 === 0" style="height: 30px;">test</button>
+                    <button v-if="data.index > 0 && data.index % 10 === 0">test</button>
                     <block v-else>Line {{data.row}}, index: {{data.index}}<label v-if="content" class="content">ha</label>.</block>
                 </vflow>
                 <layout class="border" style="flex: 1; width: 0;">
@@ -30,14 +30,14 @@
             <!-- button list -->
             <layout gutter="10">
                 <select v-model="lineValue" :data="[100, 500, 1000, 10000]" style="flex: 1; width: 0;"></select>
-                <button @click="lineCount += parseInt(lineValue[0])" style="height: 30px;">Add lines</button>
-                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}" style="height: 30px;">Remove lines</button>
+                <button @click="lineCount += parseInt(lineValue[0])">Add lines</button>
+                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}">Remove lines</button>
             </layout>
             <layout gutter="10">
-                <button @click="gesture = !gesture" style="flex: 1; width: 0; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
-                <button @click="selection = !selection" style="flex: 1; width: 0; height: 30px;">{{selection ? '' : '!'}}selection</button>
-                <button @click="style = !style" style="flex: 1; width: 0; height: 30px;">{{style ? '' : '!'}}style</button>
-                <button @click="content = !content" style="flex: 1; width: 0; height: 30px;">{{content ? '' : '!'}}content</button>
+                <button @click="gesture = !gesture" style="flex: 1; width: 0;">{{gesture ? '' : '!'}}gesture</button>
+                <button @click="selection = !selection" style="flex: 1; width: 0;">{{selection ? '' : '!'}}selection</button>
+                <button @click="style = !style" style="flex: 1; width: 0;">{{style ? '' : '!'}}style</button>
+                <button @click="content = !content" style="flex: 1; width: 0;">{{content ? '' : '!'}}content</button>
             </layout>
         </layout>
         <!-- 自适应 -->
@@ -45,23 +45,23 @@
             <layout :direction="direction ? 'h' : 'v'" style="flex: 1; height: 0;">
                 <vflow class="border" v-model:scroll-left="sLeft4" v-model:scroll-top="sTop4" :selection="selection" :gesture="gesture ? (direction ? ['left', 'right'] : ['top', 'bottom']) : []" @gesture="onGesture" :direction="direction ? 'h' : 'v'" @clientwidth="cWidth4 = $event" @clientheight="cHeight4 = $event" @scrollwidth="sWidth4 = $event" @scrollheight="sHeight4 = $event" :data="lineCount" v-slot="data" :sizes="is">
                     <layout align-v="center" direction="v" :class="[direction && 'rightborder']" style="flex: 1;">
-                        <button v-if="data.index > 0 && data.index % 10 === 0" style="height: 30px;" :style="{'width': direction ? '30px' : undefined}">btn</button>
+                        <button v-if="data.index > 0 && data.index % 10 === 0" :style="{'width': direction ? '30px' : undefined}">btn</button>
                         <block v-else :style="{'width': direction ? '80px' : undefined, 'text-align': direction ? 'center' : undefined}">Line {{data.row}}</block>
                     </layout>
                 </vflow>
             </layout>
             <label>Scroll Left / Top: {{sLeft4}} / {{sTop4}}, Client Width / Height: {{cWidth4}} / {{cHeight4}}, Scroll Width / Height: {{sWidth4}} / {{sHeight4}}.</label>
             <layout gutter="10">
-                <button @click="lineCount += 10" style="flex: 1; width: 0; height: 30px;">Add 10 lines</button>
-                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; width: 0; height: 30px;">Remove 10 lines</button>
-                <button @click="direction = !direction" style="flex: 1; height: 30px;">Direction</button>
+                <button @click="lineCount += 10" style="flex: 1; width: 0;">Add 10 lines</button>
+                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; width: 0;">Remove 10 lines</button>
+                <button @click="direction = !direction" style="flex: 1;">Direction</button>
             </layout>
         </layout>
         <!-- 内容超出 -->
         <layout v-else-if="ntab === 'beyond'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
             <layout gutter="10" align-v="center">
-                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; width: 0; height: 30px;">Change direction</button>
-                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; width: 0; height: 30px;">Change data</button>
+                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; width: 0;">Change direction</button>
+                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; width: 0;">Change data</button>
                 <label>Direction: {{dir5}}</label>
             </layout>
             <vflow v-model:scroll-left="sLeft5" v-model:scroll-top="sTop5" :selection="selection" :gesture="gesture ? ['left', 'right', 'top', 'bottom'] : []" @gesture="onGesture" :direction="dir5" @clientwidth="cWidth5 = $event" @clientheight="cHeight5 = $event" @scrollwidth="sWidth5 = $event" @scrollheight="sHeight5 = $event" class="border" style="flex: 1; height: 0; padding: 10px 0 0 10px;" :data="line5" v-slot="data">

package/dist/app/demo/form/main.js

@@ -53,6 +53,7 @@ const captcha_1 = __importDefault(require("./control/captcha/captcha"));
 const button_1 = __importDefault(require("~c/button/button"));
 const check_1 = __importDefault(require("./control/check/check"));
 const datepanel_1 = __importDefault(require("./control/datepanel/datepanel"));
+const calendar_1 = __importDefault(require("./control/calendar/calendar"));
 const date_1 = __importDefault(require("./control/date/date"));
 const daterange_1 = __importDefault(require("./control/daterange/daterange"));
 const dialog_1 = __importDefault(require("./control/dialog/dialog"));
@@ -169,6 +170,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(datepanel_1.default);
                     break;
                 }
+                case 'ccalendar': {
+                    frm = yield clickgo.form.create(calendar_1.default);
+                    break;
+                }
                 case 'cdate': {
                     frm = yield clickgo.form.create(date_1.default);
                     break;

package/dist/app/demo/form/main.xml

@@ -96,7 +96,7 @@
                 <layout gutter="10">
                     <button @click="openForm('ctip')">Tip</button>
                     <button @click="openForm('cgroup')">Group + Title</button>
-                    <button @click="openForm('cmpegts')">Mpegts</button>
+                    <button @click="openForm('ccalendar')">Calendar</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cicon')">Icon</button>
@@ -119,6 +119,7 @@
                     <button @click="openForm('ctuiviewer')">Tuiviewer</button>
                 </layout>
                 <layout gutter="10">
+                    <button @click="openForm('cmpegts')">Mpegts</button>
                     <button @click="openForm('ctplink')">Tplink</button>
                     <button @click="openForm('ccaptcha')">Captcha</button>
                 </layout>

package/dist/app/demo/form/method/dom/dom.js

@@ -80,6 +80,9 @@ class default_1 extends clickgo.form.AbstractForm {
     get isFull() {
         return clickgo.dom.is.full;
     }
+    get isDark() {
+        return clickgo.dom.is.dark;
+    }
     setGlobalCursor(type) {
         clickgo.dom.setGlobalCursor(type);
     }

package/dist/app/demo/form/method/dom/dom.xml

@@ -70,6 +70,7 @@
             <label>clickgo.dom.is.ctrl: {{isCtrl ? 'true' : 'false'}}</label>
             <label>clickgo.dom.is.meta: {{isMeta ? 'true' : 'false'}}</label>
             <label>clickgo.dom.is.full: {{isFull ? 'true' : 'false'}}</label>
+            <label>clickgo.dom.is.dark: {{isDark ? 'true' : 'false'}}</label>
         </layout>
     </flow>
 </form>

package/dist/app/demo/form/method/theme/theme.xml

@@ -6,6 +6,7 @@
         <button @click="setGlobal('blue')">setGlobal "/clickgo/theme/blue.cgt"</button>
         <button @click="setGlobal('byterun')">setGlobal "/clickgo/theme/byterun.cgt"</button>
         <button @click="setGlobal('light')">setGlobal "/clickgo/theme/light.cgt"</button>
+        <button @click="setGlobal('dark')">setGlobal "/clickgo/theme/dark.cgt"</button>
         <button @click="clearGlobal">clearGlobal()</button>
     </layout>
 </form>

package/dist/clickgo.js

@@ -39,7 +39,7 @@ exports.isNative = isNative;
 exports.getPlatform = getPlatform;
 exports.isImmersion = isImmersion;
 exports.hasFrame = hasFrame;
-const version = '3.16.20';
+const version = '3.16.22';
 function getVersion() {
     return version;
 }

package/dist/global.css

@@ -1 +1 @@
-@font-face{font-family:"Noto Sans Regular";src:url("notosans-regular.ttf")}#cg-wrap{position:fixed;left:0;top:0;--g-padding-s:4px;--g-padding:7px;--g-padding-h:4px var(--g-padding);--g-padding-l:14px;--g-padding-l-h:8px var(--g-padding-l);--g-padding-xl:22px;--g-padding-xl-h:12px var(--g-padding-xl);--g-bpadding:18px;--g-margin:2px;--g-radius:0;--g-radius-l:4px;--g-radius-xl:8px;--g-size:12px;--g-size-m:16px;--g-size-l:20px;--g-size-xl:28px;--g-size-xxl:34px;--g-control:14px;--g-control-m:18px;--g-family:"Noto Sans Regular",apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--g-line:1.2;--g-cubic:cubic-bezier(0.39, 0.575, 0.565, 1);--g-transition:none;--g-boxsize:calc(var(--g-padding) * 2 + var(--g-size));--cg:hsl(20, 100%, 65%);--success:hsl(150, 100%, 40%);--success-hover:hsl(150, 100%, 45%);--success-active:hsl(150, 100%, 30%);--success-focus:hsl(150, 100%, 35%);--success-disabled:hsl(150, 0%, 40%);--success-bg:hsl(150, 100%, 98%);--info:hsl(210, 100%, 50%);--info-hover:hsl(210, 100%, 60%);--info-active:hsl(210, 100%, 40%);--info-focus:hsl(210, 100%, 45%);--info-disabled:hsl(210, 0%, 50%);--info-bg:hsl(210, 100%, 98%);--warning:hsl(20, 100%, 70%);--warning-hover:hsl(20, 100%, 80%);--warning-active:hsl(20, 100%, 60%);--warning-focus:hsl(20, 100%, 65%);--warning-disabled:hsl(20, 0%, 70%);--warning-bg:hsl(20, 100%, 98%);--danger:hsl(350, 100%, 50%);--danger-hover:hsl(350, 100%, 70%);--danger-active:hsl(350, 100%, 40%);--danger-focus:hsl(350, 100%, 45%);--danger-disabled:hsl(350, 0%, 50%);--danger-bg:hsl(350, 100%, 98%);--system-color:hsl(0, 0%, 95%);--system-background:hsla(0, 0%, 0%, .35);--system-control-background:hsla(0, 0%, 100%, .03);--system-background-hover:hsla(0, 0%, 100%, .06);--system-background-active:hsla(0, 0%, 100%, .1);--system-border-color:hsla(0, 0%, 100%, .03);--system-border-color-hover:hsla(0, 0%, 100%, .06);--system-placeholder-color: hsla(0, 0%, 100%, .2);--face:hsl(0, 0%, 95%);--face-hover:hsl(0, 0%, 90%);--face-selected:hsl(0, 0%, 85%);--g-pop-background:#FFF;--g-pop-backdrop:none;--g-pop-border:solid .5px var(--g-border-color);--g-shadow:none;--g-outline-shadow:none;--g-color:hsl(0, 0%, 35%);--g-color-hover:hsl(0, 0%, 45%);--g-color-active:hsl(0, 0%, 25%);--g-color-focus:hsl(0, 0%, 30%);--g-color-disabled:hsl(0, 0%, 60%);--g-background:hsl(0, 0%, 95%);--g-background-hover:hsl(0, 0%, 100%);--g-background-active:hsl(0, 0%, 85%);--g-background-opacity:hsl(0, 0%, 50%, .2);--g-background-focus:hsl(0, 0%, 97.5%);--g-background-disabled:hsl(0, 0%, 75%);--g-border-color:hsl(0, 0%, 40%);--g-border-color-hover:hsl(0, 0%, 50%);--g-border-color-active:hsl(0, 0%, 30%);--g-border-color-focus:hsl(0, 0%, 35%);--g-border-color-disabled:hsl(0, 0%, 60%);--g-focusbox-border-color:var(--g-plain-border-color);--g-plain-color:var(--g-color);--g-plain-color-hover:var(--g-color-hover);--g-plain-color-active:var(--g-color-active);--g-plain-color-focus:var(--g-color-focus);--g-plain-color-disabled:var(--g-color-disabled);--g-plain-background:hsl(0, 0%, 100%);--g-plain-background-hover:hsl(0, 0%, 98%);--g-plain-background-active:hsl(0, 0%, 95%);--g-plain-background-focus:var(--g-plain-background);--g-plain-background-disabled:hsl(0, 0%, 95%);--g-plain-background-selected:hsl(0, 0%, 95%);--g-plain-border-color:hsl(0, 0%, 70%);--g-plain-border-color-hover:hsl(0, 0%, 80%);--g-plain-border-color-active:hsl(0, 0%, 60%);--g-plain-border-color-focus:hsl(0, 0%, 65%);--g-plain-border-color-disabled:hsl(0, 0%, 60%);--g-plain-border-color-plain:hsl(0, 0%, 85%);--g-block-background:hsl(0, 0%, 85%);--g-block-background-hover:hsl(0, 0%, 75%);--g-block-dark-background:hsl(0, 0%, 15%);--g-block-dark-background-hover:hsl(0, 0%, 25%)}[data-cg-disabled]{cursor:not-allowed}#cg-form-list{z-index:20020000}#cg-pop-list{z-index:20020001}#cg-simpletask{z-index:20020002}#cg-rectangle{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.25);background:rgba(255,255,255,.05);pointer-events:none;opacity:0}#cg-circular{z-index:20020003;box-sizing:border-box;position:absolute;border:solid 3px var(--cg);border-radius:50%;filter:drop-shadow(0 0 3px var(--cg));pointer-events:none;opacity:0}#cg-gesture{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:50%;pointer-events:none;opacity:0;background:var(--system-background);box-shadow:0px 15px 30px rgba(0,0,0,.07);transform:scale(0);width:20px;height:20px}#cg-gesture.done{background:rgba(255,255,255,.3);border:solid 3px rgba(0,0,0,.3)}#cg-gesture.ani{transition:all .3s var(--g-cubic);transition-property:left,top,transform}#cg-drag{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 3px 5px rgba(0,0,0,.1);opacity:0;display:flex;justify-content:center;align-items:center;border:solid 1px #fff;transition:all .3s var(--g-cubic);transition-property:transform,border;transform:initial}#cg-launcher{z-index:20020004;box-sizing:border-box;position:fixed;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);width:100%;height:100%;left:0;top:0;color:var(--system-color);display:none;flex-direction:column;transition:all .3s var(--g-cubic);transform:scale(1.2);opacity:0}#cg-launcher:not(.cg-show){pointer-events:none}#cg-launcher.cg-show{transform:scale(1);opacity:1}.cg-launcher-search{text-align:center;padding:50px}.cg-launcher-sinput{-webkit-appearance:none;appearance:none;padding:15px;border:solid 1px rgba(0,0,0,0);background:var(--system-control-background);width:60%;border-radius:5px;color:var(--system-color);transition:all .3s var(--g-cubic)}.cg-launcher-sinput::placeholder{color:var(--system-placeholder-color)}.cg-launcher-sinput::selection{background-color:var(--system-background-hover)}.cg-launcher-sinput:focus{outline:none;border-color:var(--system-border-color-hover)}.cg-launcher-foldername{-webkit-appearance:none;appearance:none;height:50px;font-size:28px !important;border:none;background:rgba(0,0,0,0);width:50%;color:var(--system-color);text-align:center}.cg-launcher-foldername::selection{background-color:var(--system-background-hover)}.cg-launcher-foldername:focus{outline:none}.cg-launcher-item{width:190px;display:inline-flex;vertical-align:middle;margin-bottom:50px}.cg-launcher-inner{flex:1;width:0}.cg-launcher-icon{background-position:center;background-size:80px;height:80px;background-repeat:no-repeat}.cg-launcher-icon:active{filter:brightness(0.6)}.cg-launcher-name{font-size:var(--g-size);font-weight:bold;text-shadow:0 0 3px rgba(0,0,0,.6);text-align:center;margin-top:20px}.cg-launcher-icon,.cg-launcher-name{transition:all .3s var(--g-cubic);transition-property:opacity}.cg-launcher-space{width:50px}.cg-launcher-folder{display:flex;justify-content:center;height:80px}.cg-launcher-folder>div{height:80px;width:80px;background:rgba(255,255,255,.3);border-radius:20px;padding:10px 4px 4px 10px;transition:all .3s var(--g-cubic);transition-property:left,top,width,height,opacity;overflow-y:auto}.cg-launcher-folder>div::-webkit-scrollbar{display:none}.cg-launcher-folder>div .cg-launcher-item,.cg-launcher-folder>div .cg-launcher-space{transition:all .3s var(--g-cubic)}.cg-launcher-folder>div.cg-show{padding:50px 0 0 50px}.cg-launcher-folder>div:not(.cg-show):active{filter:brightness(0.6)}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-item{width:22px;margin-bottom:6px}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-icon{background-size:16px;height:16px;pointer-events:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-name{display:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-space{width:6px}.cg-launcher-list{flex:1;height:0;overflow-y:auto;padding:0 0 0 50px}.cg-launcher-list::-webkit-scrollbar{display:none}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-icon,.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-name{opacity:0}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-folder>div:not(.cg-show){opacity:0}[data-cg-pop]{position:absolute;box-shadow:0px 15px 30px rgba(0,0,0,.07);transition:.3s var(--g-cubic);transition-property:transform,opacity;transform:translateY(-10px);opacity:0;overflow:hidden}[data-cg-pop]:not([data-cg-open]){pointer-events:none}[data-cg-pop][data-cg-pop-none]{display:none !important}[data-cg-pop][data-cg-open]{transform:translateY(0px);opacity:1}#cg-notify{z-index:20020005}.cg-notify-wrap{background:var(--system-background);position:fixed;padding:15px;border-radius:5px;right:0;bottom:0;width:280px;font-size:14px;display:flex;transition:.3s var(--g-cubic);transition-property:transform,opacity;overflow:hidden;color:var(--system-color);box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}.cg-notify-wrap.cg-notify-only{align-items:center}.cg-notify-wrap.cg-notify-full .cg-notify-title{padding-bottom:10px}.cg-notify-icon{margin-right:10px;width:14px;height:14px;border-radius:50%}.cg-notify-icon.cg-primary{background:var(--success)}.cg-notify-icon.cg-info{background:var(--info)}.cg-notify-icon.cg-warning{background:var(--warning)}.cg-notify-icon.cg-danger{background:var(--danger)}.cg-notify-icon.cg-progress{background:var(--cg)}.cg-notify-title{font-size:16px;font-weight:bold}.cg-notify-content{line-height:1.5;word-break:break-word}.cg-notify-progress{position:absolute;bottom:0;left:0;border-radius:1px;background:var(--cg);transition:width 1s ease-out;width:0%;height:2px}#cg-alert{z-index:20020006}.cg-alert-wrap{position:fixed;left:0;bottom:100px;width:100%;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.3s var(--g-cubic);transition-property:transform,opacity;color:var(--system-color);pointer-events:none}.cg-alert-wrap.cg-default .cg-alert-icon{display:none}.cg-alert-wrap.cg-primary{color:var(--success)}.cg-alert-wrap.cg-primary .cg-alert-content{border-color:var(--success);background:var(--success-bg)}.cg-alert-wrap.cg-primary .cg-alert-icon{background:var(--success)}.cg-alert-wrap.cg-info{color:var(--info)}.cg-alert-wrap.cg-info .cg-alert-content{border-color:var(--info);background:var(--info-bg)}.cg-alert-wrap.cg-info .cg-alert-icon{background:var(--info)}.cg-alert-wrap.cg-warning{color:var(--warning)}.cg-alert-wrap.cg-warning .cg-alert-content{border-color:var(--warning);background:var(--warning-bg)}.cg-alert-wrap.cg-warning .cg-alert-icon{background:var(--warning)}.cg-alert-wrap.cg-danger{color:var(--danger)}.cg-alert-wrap.cg-danger .cg-alert-content{border-color:var(--danger);background:var(--danger-bg)}.cg-alert-wrap.cg-danger .cg-alert-icon{background:var(--danger)}.cg-alert-content{padding:15px;background:var(--system-background);display:flex;align-items:center;box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);border:solid .5px rgba(0,0,0,0);border-radius:5px}.cg-alert-icon{margin-right:10px;width:14px;height:14px;border-radius:50%}#cg-simpletask{left:0;bottom:-46px;width:100%;height:46px;top:initial;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);padding:5px 0 5px 5px;display:flex;color:var(--system-color);transition:bottom .3s var(--g-cubic);overflow-x:auto;position:fixed}#cg-simpletask::-webkit-scrollbar{display:none}.cg-simpletask-item{background:rgba(0,0,0,.05);border-radius:3px;padding:10px;display:flex;align-items:center;margin-right:5px}.cg-simpletask-item:hover{background:rgba(0,0,0,.1)}.cg-simpletask-item:active{background:rgba(0,0,0,.2)}.cg-simpletask-icon{margin-right:5px;background-size:cover;width:16px;height:16px}#cg-confirm{z-index:20020007;position:fixed;left:0;top:0;width:100%;height:100%;background:var(--system-background);-webkit-backdrop-filter:blur(150px) saturate(1.5);backdrop-filter:blur(150px) saturate(1.5);justify-content:center;align-items:center}#cg-confirm .cg-confirm-box{background:var(--system-background);width:60%;box-shadow:0px 15px 30px rgba(0,0,0,.07);font-size:14px;border-radius:3px;overflow:hidden;color:var(--system-color)}#cg-confirm .cg-confirm-box #cg-confirm-content{padding:25px;line-height:1.5}#cg-confirm .cg-confirm-box .cg-confirm-controls{border-top:solid .5px var(--system-border-color);display:flex}#cg-confirm .cg-confirm-box .cg-confirm-controls>div{padding:20px;flex:1;text-align:center}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:last-child{border-left:solid .5px var(--system-border-color)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:hover{background:var(--system-background-hover)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:active{background:var(--system-background-active)}
+@font-face{font-family:"Noto Sans Regular";src:url("notosans-regular.ttf")}#cg-wrap{position:fixed;left:0;top:0;--g-padding-xs:2px;--g-padding-s:4px;--g-padding:7px;--g-padding-h:4px var(--g-padding);--g-padding-l:14px;--g-padding-l-h:8px var(--g-padding-l);--g-padding-xl:22px;--g-padding-xl-h:12px var(--g-padding-xl);--g-bpadding:18px;--g-margin:2px;--g-radius:0;--g-radius-l:4px;--g-radius-xl:8px;--g-size:12px;--g-size-m:16px;--g-size-l:20px;--g-size-xl:28px;--g-size-xxl:34px;--g-control:14px;--g-control-m:18px;--g-family:"Noto Sans Regular",apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--g-line:1.2;--g-cubic:cubic-bezier(0.39, 0.575, 0.565, 1);--g-transition:none;--g-boxsize:calc(var(--g-padding) * 2 + var(--g-size));--cg:oklch(.7 .23 45);--cg-bg:oklch(.98 .01 45);--success:oklch(.7 .23 150);--success-hover:oklch(.75 .23 150);--success-active:oklch(.6 .23 150);--success-focus:oklch(.65 .23 150);--success-disabled:oklch(.85 0 150);--success-bg:oklch(.98 .01 150);--info:oklch(.7 .23 255);--info-hover:oklch(.75 .23 255);--info-active:oklch(.6 .23 255);--info-focus:oklch(.65 .23 255);--info-disabled:oklch(.85 0 255);--info-bg:oklch(.98 .01 255);--warning:oklch(.7 .23 45);--warning-hover:oklch(.75 .23 45);--warning-active:oklch(.6 .23 45);--warning-focus:oklch(.65 .23 45);--warning-disabled:oklch(.85 0 45);--warning-bg:oklch(.98 .01 45);--danger:oklch(.7 .23 25);--danger-hover:oklch(.75 .23 25);--danger-active:oklch(.6 .23 25);--danger-focus:oklch(.65 .23 25);--danger-disabled:oklch(.85 0 25);--danger-bg:oklch(.98 .01 25);--system-color:oklch(.96 0 0);--system-background:oklch(0 0 0 / .35);--system-background-hover:oklch(1 0 0 / .06);--system-background-active:oklch(1 0 0 / .1);--system-control-background:oklch(1 0 0 / .03);--system-border-color:oklch(1 0 0 / .03);--system-border-color-hover:oklch(1 0 0 / .06);--system-placeholder-color:oklch(1 0 0 / .2);--g-pure:oklch(1 0 0);--face:oklch(.95 0 0);--face-hover:oklch(.9 0 0);--face-selected:oklch(.85 0 0);--g-pop-background:oklch(1 0 0);--g-pop-backdrop:none;--g-pop-border:solid .5px var(--g-border-color);--g-shadow:none;--g-outline-shadow:none;--g-color:oklch(.45 0 0);--g-color-hover:oklch(.55 0 0);--g-color-active:oklch(.35 0 0);--g-color-focus:oklch(.4 0 0);--g-color-disabled:oklch(.7 0 0);--g-background:oklch(.95 0 0);--g-background-hover:oklch(1 0 0);--g-background-active:oklch(.9 0 0);--g-background-opacity:oklch(.5 0 0 / .2);--g-background-focus:oklch(.97 0 0);--g-background-disabled:oklch(.85 0 0);--g-border-color:oklch(.5 0 0);--g-border-color-hover:oklch(.55 0 0);--g-border-color-active:oklch(.4 0 0);--g-border-color-focus:oklch(.45 0 0);--g-border-color-disabled:oklch(.7 0 0);--g-focusbox-border-color:var(--g-plain-border-color);--g-plain-color:var(--g-color);--g-plain-color-hover:var(--g-color-hover);--g-plain-color-active:var(--g-color-active);--g-plain-color-focus:var(--g-color-focus);--g-plain-color-disabled:var(--g-color-disabled);--g-plain-background:oklch(1 0 0);--g-plain-background-hover:oklch(.98 0 0);--g-plain-background-active:oklch(.95 0 0);--g-plain-background-focus:var(--g-plain-background);--g-plain-background-disabled:oklch(.95 0 0);--g-plain-background-selected:oklch(.95 0 0);--g-plain-border-color:oklch(.8 0 0);--g-plain-border-color-hover:oklch(.9 0 0);--g-plain-border-color-active:oklch(.7 0 0);--g-plain-border-color-focus:oklch(.75 0 0);--g-plain-border-color-disabled:oklch(.7 0 0);--g-plain-border-color-plain:oklch(.95 0 0);--g-block-background:oklch(.9 0 0);--g-block-background-hover:oklch(.8 0 0);--g-block-dark-background:oklch(.3 0 0);--g-block-dark-background-hover:oklch(.4 0 0)}[data-cg-disabled]{cursor:not-allowed}#cg-form-list{z-index:20020000}#cg-pop-list{z-index:20020001}#cg-simpletask{z-index:20020002}#cg-rectangle{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.25);background:rgba(255,255,255,.05);pointer-events:none;opacity:0}#cg-circular{z-index:20020003;box-sizing:border-box;position:absolute;border:solid 3px var(--cg);border-radius:50%;filter:drop-shadow(0 0 3px var(--cg));pointer-events:none;opacity:0}#cg-gesture{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:50%;pointer-events:none;opacity:0;background:var(--system-background);box-shadow:0px 15px 30px rgba(0,0,0,.07);transform:scale(0);width:20px;height:20px}#cg-gesture.done{background:rgba(255,255,255,.3);border:solid 3px rgba(0,0,0,.3)}#cg-gesture.ani{transition:all .3s var(--g-cubic);transition-property:left,top,transform}#cg-drag{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 3px 5px rgba(0,0,0,.1);opacity:0;display:flex;justify-content:center;align-items:center;border:solid 1px #fff;transition:all .3s var(--g-cubic);transition-property:transform,border;transform:initial}#cg-launcher{z-index:20020004;box-sizing:border-box;position:fixed;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);width:100%;height:100%;left:0;top:0;color:var(--system-color);display:none;flex-direction:column;transition:all .3s var(--g-cubic);transform:scale(1.2);opacity:0}#cg-launcher:not(.cg-show){pointer-events:none}#cg-launcher.cg-show{transform:scale(1);opacity:1}.cg-launcher-search{text-align:center;padding:50px}.cg-launcher-sinput{-webkit-appearance:none;appearance:none;padding:15px;border:solid 1px rgba(0,0,0,0);background:var(--system-control-background);width:60%;border-radius:5px;color:var(--system-color);transition:all .3s var(--g-cubic)}.cg-launcher-sinput::placeholder{color:var(--system-placeholder-color)}.cg-launcher-sinput::selection{background-color:var(--system-background-hover)}.cg-launcher-sinput:focus{outline:none;border-color:var(--system-border-color-hover)}.cg-launcher-foldername{-webkit-appearance:none;appearance:none;height:50px;font-size:28px !important;border:none;background:rgba(0,0,0,0);width:50%;color:var(--system-color);text-align:center}.cg-launcher-foldername::selection{background-color:var(--system-background-hover)}.cg-launcher-foldername:focus{outline:none}.cg-launcher-item{width:190px;display:inline-flex;vertical-align:middle;margin-bottom:50px}.cg-launcher-inner{flex:1;width:0}.cg-launcher-icon{background-position:center;background-size:80px;height:80px;background-repeat:no-repeat}.cg-launcher-icon:active{filter:brightness(0.6)}.cg-launcher-name{font-size:var(--g-size);font-weight:bold;text-shadow:0 0 3px rgba(0,0,0,.6);text-align:center;margin-top:20px}.cg-launcher-icon,.cg-launcher-name{transition:all .3s var(--g-cubic);transition-property:opacity}.cg-launcher-space{width:50px}.cg-launcher-folder{display:flex;justify-content:center;height:80px}.cg-launcher-folder>div{height:80px;width:80px;background:rgba(255,255,255,.3);border-radius:20px;padding:10px 4px 4px 10px;transition:all .3s var(--g-cubic);transition-property:left,top,width,height,opacity;overflow-y:auto}.cg-launcher-folder>div::-webkit-scrollbar{display:none}.cg-launcher-folder>div .cg-launcher-item,.cg-launcher-folder>div .cg-launcher-space{transition:all .3s var(--g-cubic)}.cg-launcher-folder>div.cg-show{padding:50px 0 0 50px}.cg-launcher-folder>div:not(.cg-show):active{filter:brightness(0.6)}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-item{width:22px;margin-bottom:6px}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-icon{background-size:16px;height:16px;pointer-events:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-name{display:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-space{width:6px}.cg-launcher-list{flex:1;height:0;overflow-y:auto;padding:0 0 0 50px}.cg-launcher-list::-webkit-scrollbar{display:none}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-icon,.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-name{opacity:0}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-folder>div:not(.cg-show){opacity:0}[data-cg-pop]{position:absolute;box-shadow:0px 15px 30px rgba(0,0,0,.07);transition:.3s var(--g-cubic);transition-property:transform,opacity;transform:translateY(-10px);opacity:0;overflow:hidden}[data-cg-pop]:not([data-cg-open]){pointer-events:none}[data-cg-pop][data-cg-pop-none]{display:none !important}[data-cg-pop][data-cg-open]{transform:translateY(0px);opacity:1}#cg-notify{z-index:20020005}.cg-notify-wrap{background:var(--system-background);position:fixed;padding:15px;border-radius:5px;right:0;bottom:0;width:280px;font-size:14px;display:flex;transition:.3s var(--g-cubic);transition-property:transform,opacity;overflow:hidden;color:var(--system-color);box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}.cg-notify-wrap.cg-notify-only{align-items:center}.cg-notify-wrap.cg-notify-full .cg-notify-title{padding-bottom:10px}.cg-notify-icon{margin-right:10px;width:14px;height:14px;border-radius:50%}.cg-notify-icon.cg-primary{background:var(--success)}.cg-notify-icon.cg-info{background:var(--info)}.cg-notify-icon.cg-warning{background:var(--warning)}.cg-notify-icon.cg-danger{background:var(--danger)}.cg-notify-icon.cg-progress{background:var(--cg)}.cg-notify-title{font-size:16px;font-weight:bold}.cg-notify-content{line-height:1.5;word-break:break-word}.cg-notify-progress{position:absolute;bottom:0;left:0;border-radius:1px;background:var(--cg);transition:width 1s ease-out;width:0%;height:2px}#cg-alert{z-index:20020006}.cg-alert-wrap{position:fixed;left:0;bottom:100px;width:100%;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.3s var(--g-cubic);transition-property:transform,opacity;color:var(--system-color);pointer-events:none}.cg-alert-wrap.cg-default .cg-alert-icon{display:none}.cg-alert-wrap.cg-primary{color:var(--success)}.cg-alert-wrap.cg-primary .cg-alert-content{border-color:var(--success);background:var(--success-bg)}.cg-alert-wrap.cg-primary .cg-alert-icon{background:var(--success)}.cg-alert-wrap.cg-info{color:var(--info)}.cg-alert-wrap.cg-info .cg-alert-content{border-color:var(--info);background:var(--info-bg)}.cg-alert-wrap.cg-info .cg-alert-icon{background:var(--info)}.cg-alert-wrap.cg-warning{color:var(--warning)}.cg-alert-wrap.cg-warning .cg-alert-content{border-color:var(--warning);background:var(--warning-bg)}.cg-alert-wrap.cg-warning .cg-alert-icon{background:var(--warning)}.cg-alert-wrap.cg-danger{color:var(--danger)}.cg-alert-wrap.cg-danger .cg-alert-content{border-color:var(--danger);background:var(--danger-bg)}.cg-alert-wrap.cg-danger .cg-alert-icon{background:var(--danger)}.cg-alert-content{padding:15px;background:var(--system-background);display:flex;align-items:center;box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);border:solid .5px rgba(0,0,0,0);border-radius:5px}.cg-alert-icon{margin-right:10px;width:14px;height:14px;border-radius:50%}#cg-simpletask{left:0;bottom:-46px;width:100%;height:46px;top:initial;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);padding:5px 0 5px 5px;display:flex;color:var(--system-color);transition:bottom .3s var(--g-cubic);overflow-x:auto;position:fixed}#cg-simpletask::-webkit-scrollbar{display:none}.cg-simpletask-item{background:oklch(0 0 0/0.05);border-radius:3px;padding:10px;display:flex;align-items:center;margin-right:5px}.cg-simpletask-item:hover{background:oklch(0 0 0/0.1)}.cg-simpletask-item:active{background:oklch(0 0 0/0.2)}.cg-simpletask-icon{margin-right:5px;background-size:cover;width:16px;height:16px}#cg-confirm{z-index:20020007;position:fixed;left:0;top:0;width:100%;height:100%;background:var(--system-background);-webkit-backdrop-filter:blur(150px) saturate(1.5);backdrop-filter:blur(150px) saturate(1.5);justify-content:center;align-items:center}#cg-confirm .cg-confirm-box{background:var(--system-background);width:60%;box-shadow:0px 15px 30px rgba(0,0,0,.07);font-size:14px;border-radius:3px;overflow:hidden;color:var(--system-color)}#cg-confirm .cg-confirm-box #cg-confirm-content{padding:25px;line-height:1.5}#cg-confirm .cg-confirm-box .cg-confirm-controls{border-top:solid .5px var(--system-border-color);display:flex}#cg-confirm .cg-confirm-box .cg-confirm-controls>div{padding:20px;flex:1;text-align:center}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:last-child{border-left:solid .5px var(--system-border-color)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:hover{background:var(--system-background-hover)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:active{background:var(--system-background-active)}

package/dist/lib/dom.d.ts

@@ -60,6 +60,7 @@ export declare const is: {
     ctrl: boolean;
     meta: boolean;
     full: boolean;
+    dark: boolean;
 };
 export declare function bindMove(e: MouseEvent | TouchEvent, opt: types.IBindMoveOptions): types.IBindMoveResult;
 export declare function bindResize(e: MouseEvent | TouchEvent, opt: types.IBindResizeOptions): void;

package/dist/lib/dom.js

@@ -1613,7 +1613,8 @@ exports.is = clickgo.vue.reactive({
     'shift': false,
     'ctrl': false,
     'meta': false,
-    'full': false
+    'full': false,
+    'dark': window.matchMedia('(prefers-color-scheme: dark)').matches,
 });
 window.addEventListener('keydown', function (e) {
     switch (e.key) {
@@ -2170,3 +2171,6 @@ document.addEventListener('fullscreenchange', function () {
     }
     exports.is.full = false;
 });
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    exports.is.dark = e.matches;
+});

package/dist/lib/form.js

@@ -1784,7 +1784,7 @@ function refreshPopPosition(el, pop, direction, size = {}) {
 }
 let lastShowPopTime = 0;
 function showPop(el, pop, direction, opt = {}) {
-    var _a;
+    var _a, _b, _c, _d;
     if (!(el instanceof Element)) {
         if (!el.$el) {
             return;
@@ -1797,15 +1797,9 @@ function showPop(el, pop, direction, opt = {}) {
         }
         pop = pop.$el;
     }
-    if (opt.null === undefined) {
-        opt.null = false;
-    }
-    if (opt.size === undefined) {
-        opt.size = {};
-    }
-    if (opt.flow === undefined) {
-        opt.flow = true;
-    }
+    (_a = opt.null) !== null && _a !== void 0 ? _a : (opt.null = false);
+    (_b = opt.size) !== null && _b !== void 0 ? _b : (opt.size = {});
+    (_c = opt.flow) !== null && _c !== void 0 ? _c : (opt.flow = true);
     if (!pop && !opt.null) {
         return;
     }
@@ -1855,7 +1849,7 @@ function showPop(el, pop, direction, opt = {}) {
     pop.removeAttribute('data-cg-pop-none');
     popInfo.list.push(pop);
     popInfo.elList.push(el);
-    popInfo.wayList.push((_a = opt.way) !== null && _a !== void 0 ? _a : 'normal');
+    popInfo.wayList.push((_d = opt.way) !== null && _d !== void 0 ? _d : 'normal');
     popInfo.time.push(Date.now());
     pop.dataset.cgLevel = (popInfo.list.length - 1).toString();
     el.dataset.cgLevel = (popInfo.elList.length - 1).toString();
@@ -2828,7 +2822,7 @@ function create(cls_1, data_1) {
 }
 function dialog(opt) {
     return new Promise(function (resolve) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (typeof opt === 'string') {
             opt = {
                 'content': opt
@@ -2847,9 +2841,7 @@ function dialog(opt) {
             return;
         }
         const locale = t.locale.lang || core.config.locale;
-        if (nopt.buttons === undefined) {
-            nopt.buttons = [(_c = (_b = info.locale[locale]) === null || _b === void 0 ? void 0 : _b.ok) !== null && _c !== void 0 ? _c : info.locale['en'].ok];
-        }
+        (_b = nopt.buttons) !== null && _b !== void 0 ? _b : (nopt.buttons = [(_d = (_c = info.locale[locale]) === null || _c === void 0 ? void 0 : _c.ok) !== null && _d !== void 0 ? _d : info.locale['en'].ok]);
         const cls = class extends AbstractForm {
             constructor() {
                 var _a, _b;
@@ -2886,7 +2878,7 @@ function dialog(opt) {
             }
         };
         create(cls, undefined, {
-            'layout': `<form title="${(_d = nopt.title) !== null && _d !== void 0 ? _d : 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}${nopt.gutter ? ` gutter="${nopt.gutter}"` : ''}>${nopt.content}</dialog></form>`,
+            'layout': `<form title="${(_e = nopt.title) !== null && _e !== void 0 ? _e : 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}${nopt.gutter ? ` gutter="${nopt.gutter}"` : ''}>${nopt.content}</dialog></form>`,
             'style': nopt.style
         }, t.id).then((frm) => {
             if (typeof frm === 'number') {