From 1a8688c27b797de84185b3b0bbb27db2c8d62e88 Mon Sep 17 00:00:00 2001 From: sanqi-med Date: Tue, 26 Dec 2023 11:21:44 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20main=20from=20@=20hellof2e/qua?= =?UTF-8?q?rk-design@c47451659f4b9b40baffbffe4ecd126f699cec0e=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/assets/component-legacy.a779959b.js | 1 + demo/assets/component.1f156d43.js | 26 + demo/assets/demo-legacy.08e4d7ca.js | 1 + demo/assets/demo-legacy.0b76aaf3.js | 1 + demo/assets/demo-legacy.0d73521a.js | 3 + demo/assets/demo-legacy.0ed17d53.js | 1 + demo/assets/demo-legacy.11dee985.js | 2 + demo/assets/demo-legacy.14f1998f.js | 1 + demo/assets/demo-legacy.17ccbeb0.js | 1 + demo/assets/demo-legacy.1ae49dcf.js | 1 + demo/assets/demo-legacy.1ae65516.js | 1 + demo/assets/demo-legacy.1ec8c39a.js | 1 + demo/assets/demo-legacy.29e89f7b.js | 1 + demo/assets/demo-legacy.2c4d2ca2.js | 1 + demo/assets/demo-legacy.3a6a67b0.js | 1 + demo/assets/demo-legacy.3e23b076.js | 1 + demo/assets/demo-legacy.428d3810.js | 1 + demo/assets/demo-legacy.45422b3e.js | 4 + demo/assets/demo-legacy.4f5d1758.js | 1 + demo/assets/demo-legacy.512f85de.js | 1 + demo/assets/demo-legacy.55031a9a.js | 1 + demo/assets/demo-legacy.550d40c0.js | 1 + demo/assets/demo-legacy.58840716.js | 1 + demo/assets/demo-legacy.5a729d01.js | 1 + demo/assets/demo-legacy.5dd69fa8.js | 5 + demo/assets/demo-legacy.6709fcd6.js | 1 + demo/assets/demo-legacy.68c82c64.js | 1 + demo/assets/demo-legacy.6b628d23.js | 1 + demo/assets/demo-legacy.75456a14.js | 1 + demo/assets/demo-legacy.76310c72.js | 1 + demo/assets/demo-legacy.76438d63.js | 1 + demo/assets/demo-legacy.7a6bfa00.js | 2 + demo/assets/demo-legacy.90cd7e98.js | 1 + demo/assets/demo-legacy.9481c72d.js | 5 + demo/assets/demo-legacy.97b9d7fa.js | 1 + demo/assets/demo-legacy.9b5d06db.js | 1 + demo/assets/demo-legacy.9b82a593.js | 1 + demo/assets/demo-legacy.a16de68a.js | 1 + demo/assets/demo-legacy.a6383c07.js | 1 + demo/assets/demo-legacy.b0221e4e.js | 1 + demo/assets/demo-legacy.b0867d06.js | 1 + demo/assets/demo-legacy.b207e38c.js | 1 + demo/assets/demo-legacy.c3393ddd.js | 2 + demo/assets/demo-legacy.c579d66e.js | 1 + demo/assets/demo-legacy.ca6cab93.js | 1 + demo/assets/demo-legacy.cb4724e0.js | 1 + demo/assets/demo-legacy.d076717e.js | 1 + demo/assets/demo-legacy.d91f578e.js | 1 + demo/assets/demo-legacy.db32f7d1.js | 1 + demo/assets/demo-legacy.dcc5df55.js | 2 + demo/assets/demo-legacy.ddca8c74.js | 1 + demo/assets/demo-legacy.e4c46326.js | 1 + demo/assets/demo-legacy.e81c880e.js | 1 + demo/assets/demo-legacy.e8303662.js | 1 + demo/assets/demo-legacy.f11cf820.js | 1 + demo/assets/demo-legacy.f37f9227.js | 1 + demo/assets/demo-legacy.f9403da8.js | 1 + demo/assets/demo-legacy.f9943ff9.js | 1 + demo/assets/demo.00fd097c.js | 64 + demo/assets/demo.04d10220.js | 125 + demo/assets/demo.071fc9bc.js | 102 + demo/assets/demo.0e1d9f3a.js | 177 + demo/assets/demo.10e9f9df.js | 4270 +++ demo/assets/demo.12105e03.js | 306 + demo/assets/demo.141bc5ba.js | 144 + demo/assets/demo.14c8b50a.js | 226 + demo/assets/demo.16d8a59e.js | 136 + demo/assets/demo.1c5bc053.js | 123 + demo/assets/demo.205604a1.js | 291 + demo/assets/demo.253b9ecd.js | 201 + demo/assets/demo.344b587c.js | 151 + demo/assets/demo.36e9fda5.js | 209 + demo/assets/demo.3aeeebb8.js | 122 + demo/assets/demo.413e6b4d.js | 91 + demo/assets/demo.472083aa.js | 270 + demo/assets/demo.47cbf487.js | 154 + demo/assets/demo.4e9cb270.js | 105 + demo/assets/demo.50e2ebaf.js | 207 + demo/assets/demo.54622f4c.js | 84 + demo/assets/demo.56c1d936.js | 96 + demo/assets/demo.5ab4e636.js | 166 + demo/assets/demo.5dd54e52.js | 178 + demo/assets/demo.6259b525.js | 219 + demo/assets/demo.6c3c0e46.js | 178 + demo/assets/demo.6faa3bc8.js | 240 + demo/assets/demo.7af57a27.js | 160 + demo/assets/demo.7d962a95.js | 219 + demo/assets/demo.83166e74.js | 91 + demo/assets/demo.83644c67.js | 133 + demo/assets/demo.878520d9.js | 233 + demo/assets/demo.879355d2.js | 147 + demo/assets/demo.8b075191.js | 352 + demo/assets/demo.90f20eb1.js | 97 + demo/assets/demo.923917c0.js | 269 + demo/assets/demo.94ad6efb.js | 195 + demo/assets/demo.9c85a7b8.js | 225 + demo/assets/demo.a037f8c7.js | 125 + demo/assets/demo.a142728d.js | 164 + demo/assets/demo.a31119e7.js | 100 + demo/assets/demo.aa280016.js | 134 + demo/assets/demo.b7be1be2.js | 198 + demo/assets/demo.c1069692.js | 84 + demo/assets/demo.c153ee3a.js | 85 + demo/assets/demo.ce2b80bf.js | 159 + demo/assets/demo.d8557302.js | 97 + demo/assets/demo.da68556a.js | 142 + demo/assets/demo.dfb2b213.js | 390 + demo/assets/demo.e413b186.js | 640 + demo/assets/demo.e4442e07.js | 211 + demo/assets/demo.ea16fb6e.js | 142 + demo/assets/demo.eb698258.js | 23 + demo/assets/demo.eda6c4df.js | 281 + demo/assets/demo.ee619408.js | 113 + demo/assets/demo.f497ff90.js | 246 + demo/assets/index-legacy.378a587f.js | 1 + demo/assets/index-legacy.d9d5991e.js | 1 + demo/assets/index.63eaed99.js | 84 + demo/assets/index.9e48a87d.js | 167 + demo/assets/mobile-legacy.4d4580ba.js | 1505 + demo/assets/mobile.5b772776.js | 36473 ++++++++++++++++++++ demo/assets/mobile.61c33ad3.css | 5269 +++ demo/assets/vue-router-legacy.0b1d6af2.js | 30 + demo/assets/vue-router.7779546b.js | 46 + demo/demo.html | 6 +- 124 files changed, 57769 insertions(+), 3 deletions(-) create mode 100644 demo/assets/component-legacy.a779959b.js create mode 100644 demo/assets/component.1f156d43.js create mode 100644 demo/assets/demo-legacy.08e4d7ca.js create mode 100644 demo/assets/demo-legacy.0b76aaf3.js create mode 100644 demo/assets/demo-legacy.0d73521a.js create mode 100644 demo/assets/demo-legacy.0ed17d53.js create mode 100644 demo/assets/demo-legacy.11dee985.js create mode 100644 demo/assets/demo-legacy.14f1998f.js create mode 100644 demo/assets/demo-legacy.17ccbeb0.js create mode 100644 demo/assets/demo-legacy.1ae49dcf.js create mode 100644 demo/assets/demo-legacy.1ae65516.js create mode 100644 demo/assets/demo-legacy.1ec8c39a.js create mode 100644 demo/assets/demo-legacy.29e89f7b.js create mode 100644 demo/assets/demo-legacy.2c4d2ca2.js create mode 100644 demo/assets/demo-legacy.3a6a67b0.js create mode 100644 demo/assets/demo-legacy.3e23b076.js create mode 100644 demo/assets/demo-legacy.428d3810.js create mode 100644 demo/assets/demo-legacy.45422b3e.js create mode 100644 demo/assets/demo-legacy.4f5d1758.js create mode 100644 demo/assets/demo-legacy.512f85de.js create mode 100644 demo/assets/demo-legacy.55031a9a.js create mode 100644 demo/assets/demo-legacy.550d40c0.js create mode 100644 demo/assets/demo-legacy.58840716.js create mode 100644 demo/assets/demo-legacy.5a729d01.js create mode 100644 demo/assets/demo-legacy.5dd69fa8.js create mode 100644 demo/assets/demo-legacy.6709fcd6.js create mode 100644 demo/assets/demo-legacy.68c82c64.js create mode 100644 demo/assets/demo-legacy.6b628d23.js create mode 100644 demo/assets/demo-legacy.75456a14.js create mode 100644 demo/assets/demo-legacy.76310c72.js create mode 100644 demo/assets/demo-legacy.76438d63.js create mode 100644 demo/assets/demo-legacy.7a6bfa00.js create mode 100644 demo/assets/demo-legacy.90cd7e98.js create mode 100644 demo/assets/demo-legacy.9481c72d.js create mode 100644 demo/assets/demo-legacy.97b9d7fa.js create mode 100644 demo/assets/demo-legacy.9b5d06db.js create mode 100644 demo/assets/demo-legacy.9b82a593.js create mode 100644 demo/assets/demo-legacy.a16de68a.js create mode 100644 demo/assets/demo-legacy.a6383c07.js create mode 100644 demo/assets/demo-legacy.b0221e4e.js create mode 100644 demo/assets/demo-legacy.b0867d06.js create mode 100644 demo/assets/demo-legacy.b207e38c.js create mode 100644 demo/assets/demo-legacy.c3393ddd.js create mode 100644 demo/assets/demo-legacy.c579d66e.js create mode 100644 demo/assets/demo-legacy.ca6cab93.js create mode 100644 demo/assets/demo-legacy.cb4724e0.js create mode 100644 demo/assets/demo-legacy.d076717e.js create mode 100644 demo/assets/demo-legacy.d91f578e.js create mode 100644 demo/assets/demo-legacy.db32f7d1.js create mode 100644 demo/assets/demo-legacy.dcc5df55.js create mode 100644 demo/assets/demo-legacy.ddca8c74.js create mode 100644 demo/assets/demo-legacy.e4c46326.js create mode 100644 demo/assets/demo-legacy.e81c880e.js create mode 100644 demo/assets/demo-legacy.e8303662.js create mode 100644 demo/assets/demo-legacy.f11cf820.js create mode 100644 demo/assets/demo-legacy.f37f9227.js create mode 100644 demo/assets/demo-legacy.f9403da8.js create mode 100644 demo/assets/demo-legacy.f9943ff9.js create mode 100644 demo/assets/demo.00fd097c.js create mode 100644 demo/assets/demo.04d10220.js create mode 100644 demo/assets/demo.071fc9bc.js create mode 100644 demo/assets/demo.0e1d9f3a.js create mode 100644 demo/assets/demo.10e9f9df.js create mode 100644 demo/assets/demo.12105e03.js create mode 100644 demo/assets/demo.141bc5ba.js create mode 100644 demo/assets/demo.14c8b50a.js create mode 100644 demo/assets/demo.16d8a59e.js create mode 100644 demo/assets/demo.1c5bc053.js create mode 100644 demo/assets/demo.205604a1.js create mode 100644 demo/assets/demo.253b9ecd.js create mode 100644 demo/assets/demo.344b587c.js create mode 100644 demo/assets/demo.36e9fda5.js create mode 100644 demo/assets/demo.3aeeebb8.js create mode 100644 demo/assets/demo.413e6b4d.js create mode 100644 demo/assets/demo.472083aa.js create mode 100644 demo/assets/demo.47cbf487.js create mode 100644 demo/assets/demo.4e9cb270.js create mode 100644 demo/assets/demo.50e2ebaf.js create mode 100644 demo/assets/demo.54622f4c.js create mode 100644 demo/assets/demo.56c1d936.js create mode 100644 demo/assets/demo.5ab4e636.js create mode 100644 demo/assets/demo.5dd54e52.js create mode 100644 demo/assets/demo.6259b525.js create mode 100644 demo/assets/demo.6c3c0e46.js create mode 100644 demo/assets/demo.6faa3bc8.js create mode 100644 demo/assets/demo.7af57a27.js create mode 100644 demo/assets/demo.7d962a95.js create mode 100644 demo/assets/demo.83166e74.js create mode 100644 demo/assets/demo.83644c67.js create mode 100644 demo/assets/demo.878520d9.js create mode 100644 demo/assets/demo.879355d2.js create mode 100644 demo/assets/demo.8b075191.js create mode 100644 demo/assets/demo.90f20eb1.js create mode 100644 demo/assets/demo.923917c0.js create mode 100644 demo/assets/demo.94ad6efb.js create mode 100644 demo/assets/demo.9c85a7b8.js create mode 100644 demo/assets/demo.a037f8c7.js create mode 100644 demo/assets/demo.a142728d.js create mode 100644 demo/assets/demo.a31119e7.js create mode 100644 demo/assets/demo.aa280016.js create mode 100644 demo/assets/demo.b7be1be2.js create mode 100644 demo/assets/demo.c1069692.js create mode 100644 demo/assets/demo.c153ee3a.js create mode 100644 demo/assets/demo.ce2b80bf.js create mode 100644 demo/assets/demo.d8557302.js create mode 100644 demo/assets/demo.da68556a.js create mode 100644 demo/assets/demo.dfb2b213.js create mode 100644 demo/assets/demo.e413b186.js create mode 100644 demo/assets/demo.e4442e07.js create mode 100644 demo/assets/demo.ea16fb6e.js create mode 100644 demo/assets/demo.eb698258.js create mode 100644 demo/assets/demo.eda6c4df.js create mode 100644 demo/assets/demo.ee619408.js create mode 100644 demo/assets/demo.f497ff90.js create mode 100644 demo/assets/index-legacy.378a587f.js create mode 100644 demo/assets/index-legacy.d9d5991e.js create mode 100644 demo/assets/index.63eaed99.js create mode 100644 demo/assets/index.9e48a87d.js create mode 100644 demo/assets/mobile-legacy.4d4580ba.js create mode 100644 demo/assets/mobile.5b772776.js create mode 100644 demo/assets/mobile.61c33ad3.css create mode 100644 demo/assets/vue-router-legacy.0b1d6af2.js create mode 100644 demo/assets/vue-router.7779546b.js diff --git a/demo/assets/component-legacy.a779959b.js b/demo/assets/component-legacy.a779959b.js new file mode 100644 index 000000000..b44b75fae --- /dev/null +++ b/demo/assets/component-legacy.a779959b.js @@ -0,0 +1 @@ +;(function(){System.register(['./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var Locale,defineComponent;return{setters:[function(module){Locale=module.L;defineComponent=module.d;}],execute:function(){exports('c',createComponent);const isFunction=val=>typeof val==="function";const getPropByPath=(obj,keyPath)=>{try{return keyPath.split(".").reduce((prev,curr)=>prev[curr],obj);}catch(error){return"";}};function createComponent(name){const componentName="quark-"+name;return{componentName,translate(keyPath,...args){const languages=Locale.languages();const text=getPropByPath(languages,`${name.replace("-","")}.${keyPath}`)||getPropByPath(languages,keyPath);return isFunction(text)?text(...args):text;},createDemo:function(_component){_component.baseName=name;_component.name="demo-"+name;return defineComponent(_component);}};}}};});})(); diff --git a/demo/assets/component.1f156d43.js b/demo/assets/component.1f156d43.js new file mode 100644 index 000000000..77486e350 --- /dev/null +++ b/demo/assets/component.1f156d43.js @@ -0,0 +1,26 @@ +import { L as Locale, d as defineComponent } from "./mobile.5b772776.js"; +const isFunction = (val) => typeof val === "function"; +const getPropByPath = (obj, keyPath) => { + try { + return keyPath.split(".").reduce((prev, curr) => prev[curr], obj); + } catch (error) { + return ""; + } +}; +function createComponent(name) { + const componentName = "quark-" + name; + return { + componentName, + translate(keyPath, ...args) { + const languages = Locale.languages(); + const text = getPropByPath(languages, `${name.replace("-", "")}.${keyPath}`) || getPropByPath(languages, keyPath); + return isFunction(text) ? text(...args) : text; + }, + createDemo: function(_component) { + _component.baseName = name; + _component.name = "demo-" + name; + return defineComponent(_component); + } + }; +} +export { createComponent as c }; diff --git a/demo/assets/demo-legacy.08e4d7ca.js b/demo/assets/demo-legacy.08e4d7ca.js new file mode 100644 index 000000000..f40538226 --- /dev/null +++ b/demo/assets/demo-legacy.08e4d7ca.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".navbar-demo quark-navbar {\n margin-bottom: 20px;\n background: #fff;\n}\n.navbar-demo .bg {\n background: linear-gradient(to right, #7ec1ff, #2197ff);\n color: #fff;\n --navbar-right-color: #fff;\n}\n.navbar-demo .bg2 {\n background: purple;\n color: #fff;\n font-size: 14px;\n --navbar-right-color: #fff;\n --navbar-right-font-size: 14px;\n --navbar-right-font-weight: 200;\n}\n.navbar-demo span {\n margin: 0;\n}\n.navbar-demo .left {\n text-align: left;\n padding-left: 50px;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js','./index-legacy.378a587f.js'],function(exports){'use strict';var _export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;},function(module){createComponent=module.c;},function(){}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("navbar");const _sfc_main=createDemo({setup(){const onLeftClick=()=>{Toast.text(`${translate("clicked")}`);};const onRightClick=()=>{Toast.text(`${translate("clicked")}`);};const close=()=>{Toast.text(`${translate("closed")}`);};onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",background:"文字/背景颜色设置",left:"左侧按钮自定义",right:"右侧按钮自定义",title:"页面标题",leftTitle:"左标题",rightTitle:"分享",iconTitle:"小号图标",event:"事件绑定",close:"点击左右侧和关闭",return:"返回",clicked:"点击",closed:"关闭"},"en-US":{basic:"Basic Usage",background:"Background Color",left:"Custom Left Button",right:"Csutom Right Button",title:"Page Title",leftTitle:"Left Title",rightTitle:"Share",iconTitle:"Small Icon",event:"Event Binding",close:"Click event and close",return:"Return",clicked:"Clicked",closed:"Close"}});});return{onLeftClick,onRightClick,close,translate};}});const _hoisted_1={class:"demo no-padding navbar-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title","right"];const _hoisted_5=["title","right"];const _hoisted_6=["title"];const _hoisted_7=/*#__PURE__*/createBaseVNode("span",{slot:"left",class:"left-wrap"},[/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"24",name:"user"})],-1);const _hoisted_8=[_hoisted_7];const _hoisted_9=["title"];const _hoisted_10={slot:"left"};const _hoisted_11=["title"];const _hoisted_12=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"user",slot:"right"},null,-1);const _hoisted_13=[_hoisted_12];const _hoisted_14=["right","title"];const _hoisted_15=["right","title"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-navbar",{title:_ctx.translate('title')},null,8,_hoisted_2),createBaseVNode("quark-navbar",{title:_ctx.translate('leftTitle'),closehide:"true",class:"left"},null,8,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("background")),1),createBaseVNode("quark-navbar",{class:"bg",title:_ctx.translate('title'),right:_ctx.translate('rightTitle'),safearea:"true"},null,8,_hoisted_4),createBaseVNode("quark-navbar",{class:"bg2",title:_ctx.translate('iconTitle'),right:_ctx.translate('rightTitle'),iconsize:"18"},null,8,_hoisted_5),createBaseVNode("h2",null,toDisplayString(_ctx.translate("left")),1),createBaseVNode("quark-navbar",{title:_ctx.translate('title')},_hoisted_8,8,_hoisted_6),createBaseVNode("quark-navbar",{title:_ctx.translate('title')},[createBaseVNode("span",_hoisted_10,toDisplayString(_ctx.translate("return")),1)],8,_hoisted_9),createBaseVNode("h2",null,toDisplayString(_ctx.translate("right")),1),createBaseVNode("quark-navbar",{title:_ctx.translate('title')},_hoisted_13,8,_hoisted_11),createBaseVNode("quark-navbar",{right:_ctx.translate('rightTitle'),title:_ctx.translate('title')},null,8,_hoisted_14),createBaseVNode("h2",null,toDisplayString(_ctx.translate("event")),1),createBaseVNode("quark-navbar",{right:_ctx.translate('rightTitle'),title:_ctx.translate('close'),onLeftclick:_cache[0]||(_cache[0]=(...args)=>_ctx.onLeftClick&&_ctx.onLeftClick(...args)),onRightclick:_cache[1]||(_cache[1]=(...args)=>_ctx.onRightClick&&_ctx.onRightClick(...args)),onClose:_cache[2]||(_cache[2]=(...args)=>_ctx.close&&_ctx.close(...args))},null,40,_hoisted_15)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.0b76aaf3.js b/demo/assets/demo-legacy.0b76aaf3.js new file mode 100644 index 000000000..06e59dbb6 --- /dev/null +++ b/demo/assets/demo-legacy.0b76aaf3.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".quark-tip {\n background-color: white;\n margin-bottom: 30px;\n min-height: 44px;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n padding: 10px;\n}\n.left {\n width: 30px;\n height: auto;\n word-break: normal;\n}\n.custom-tips {\n --tips-background-color: #0088ff;\n --tips-font-weight: 500;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("tooltip");const _sfc_main=createDemo({setup(){const data=ref({top:false,topleft:false,topright:false,bottom:false,bottomleft:false,bottomright:false,left:false,lefttop:false,leftbottom:false,right:false,righttop:false,rightbottom:false,topclose:false,autoclose:false,customstyle:false,large:false,largeClose:false});onBeforeMount(()=>{useTranslate({"zh-CN":{tipsPosition:"Tips 位置（所有支持的位置参见placement 参数）",topPosition:"top 位置",topLeftPosition:"top left 位置",topRightPosition:"top right 位置",tipsSize:"tips 尺寸",largeSize:"large 尺寸",tips:"气泡文字",showCloseButton:"显示关闭按钮",setAutoOffTime:"设置自动关闭时间",customStyle:"自定义样式"},"en-US":{tipsPosition:"Tips Position(See placement parameter for all supported positions)",topPosition:"Top Position",topLeftPosition:"Top Left Position",topRightPosition:"Top Right Position",tipsSize:"tips Size",largeSize:"Large Size",tips:"Bubble Text",showCloseButton:"Show Close Button",setAutoOffTime:"Set auto-off time",customStyle:"Custom Style"}});});const open=placement=>{data.value[placement]=true;};const close=placement=>{data.value[placement]=false;};return{data,open,close,translate};}});const _hoisted_1={class:"demo"};const _hoisted_2={class:"quark-tip"};const _hoisted_3=["tips","open"];const _hoisted_4={class:"quark-tip"};const _hoisted_5=["tips","open"];const _hoisted_6={class:"quark-tip"};const _hoisted_7=["tips","open"];const _hoisted_8={class:"quark-tip"};const _hoisted_9=["tips","open"];const _hoisted_10={class:"quark-tip"};const _hoisted_11=["tips","open"];const _hoisted_12={class:"quark-tip"};const _hoisted_13=["tips","open"];const _hoisted_14={class:"quark-tip"};const _hoisted_15=["tips","open"];const _hoisted_16={class:"quark-tip"};const _hoisted_17=["tips","open"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("tipsPosition")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-tooltip",{placement:"top",tips:_ctx.translate('tips'),scrollhidden:"",open:_ctx.data.top,onClick:_cache[0]||(_cache[0]=$event=>_ctx.open('top')),onClose:_cache[1]||(_cache[1]=$event=>_ctx.close('top'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topPosition")),1)],40,_hoisted_3)]),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-tooltip",{placement:"topleft",tips:_ctx.translate('tips'),scrollhidden:"",open:_ctx.data.topleft,onClick:_cache[2]||(_cache[2]=$event=>_ctx.open('topleft')),onClose:_cache[3]||(_cache[3]=$event=>_ctx.close('topleft'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topLeftPosition")),1)],40,_hoisted_5)]),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-tooltip",{placement:"topright",tips:_ctx.translate('tips'),scrollhidden:"",open:_ctx.data.topright,onClick:_cache[4]||(_cache[4]=$event=>_ctx.open('topright')),onClose:_cache[5]||(_cache[5]=$event=>_ctx.close('topright'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topRightPosition")),1)],40,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("tipsSize")),1),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-tooltip",{placement:"top",tips:_ctx.translate('tips'),scrollhidden:"",size:"large",open:_ctx.data.large,onClick:_cache[6]||(_cache[6]=$event=>_ctx.open('large')),onClose:_cache[7]||(_cache[7]=$event=>_ctx.close('large'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("largeSize")),1)],40,_hoisted_9)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("showCloseButton")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-tooltip",{placement:"top",closeable:"",scrollhidden:"",tips:_ctx.translate('tips'),open:_ctx.data.topclose,onClick:_cache[8]||(_cache[8]=$event=>_ctx.open('topclose')),onClose:_cache[9]||(_cache[9]=$event=>_ctx.close('topclose'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topPosition")),1)],40,_hoisted_11)]),createBaseVNode("div",_hoisted_12,[createBaseVNode("quark-tooltip",{placement:"top",scrollhidden:"",closeable:"",size:"large",tips:_ctx.translate('tips'),open:_ctx.data.largeClose,onClick:_cache[10]||(_cache[10]=$event=>_ctx.open('largeClose')),onClose:_cache[11]||(_cache[11]=$event=>_ctx.close('largeClose'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("largeSize")),1)],40,_hoisted_13)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("setAutoOffTime")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-tooltip",{placement:"top",autoclose:"",opentime:"5000",scrollhidden:"",tips:_ctx.translate('tips'),open:_ctx.data.autoclose,onClick:_cache[12]||(_cache[12]=$event=>_ctx.open('autoclose')),onClose:_cache[13]||(_cache[13]=$event=>_ctx.close('autoclose'))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topPosition")),1)],40,_hoisted_15)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customStyle:")),1),createBaseVNode("div",_hoisted_16,[createBaseVNode("quark-tooltip",{placement:"top",autoclose:"",closeable:"",opentime:"5000",scrollhidden:"",tips:_ctx.translate('tips'),open:_ctx.data.customstyle,onClick:_cache[14]||(_cache[14]=$event=>_ctx.open('customstyle')),onClose:_cache[15]||(_cache[15]=$event=>_ctx.close('customstyle')),class:"custom-tips"},[createBaseVNode("div",null,toDisplayString(_ctx.translate("topPosition")),1)],40,_hoisted_17)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.0d73521a.js b/demo/assets/demo-legacy.0d73521a.js new file mode 100644 index 000000000..ea32f67ef --- /dev/null +++ b/demo/assets/demo-legacy.0d73521a.js @@ -0,0 +1,3 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=":host {\n width: 100%;\n}\n\n:host .quark-virtual-list {\n width: var(--virtual-list-width, 100%);\n background-color: var(--virtual-list-background-color, #fff);\n overflow-y: auto;\n position: relative;\n}\n\n:host .quark-virtual-list-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var B,H,N,O,P,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,openBlock,createComponent;return{setters:[function(module){B=module.J;H=module.K;N=module.N;O=module.O;P=module.P;_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var style=":host {\n width: 100%;\n}\n\n:host .quark-virtual-list {\n width: var(--virtual-list-width, 100%);\n background-color: var(--virtual-list-background-color, #fff);\n overflow-y: auto;\n position: relative;\n}\n\n:host .quark-virtual-list-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n";var _dec,_dec2,_dec3,_dec4,_dec5,_dec6,_dec7,_class,_class2,_descriptor,_descriptor2,_descriptor3,_descriptor4,_descriptor5,_descriptor6;function _initializerDefineProperty(target,property2,descriptor,context){if(!descriptor)return;Object.defineProperty(target,property2,{enumerable:descriptor.enumerable,configurable:descriptor.configurable,writable:descriptor.writable,value:descriptor.initializer?descriptor.initializer.call(context):void 0});}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _applyDecoratedDescriptor(target,property2,decorators,descriptor,context){var desc={};Object.keys(descriptor).forEach(function(key){desc[key]=descriptor[key];});desc.enumerable=!!desc.enumerable;desc.configurable=!!desc.configurable;if("value"in desc||desc.initializer){desc.writable=true;}desc=decorators.slice().reverse().reduce(function(desc2,decorator){return decorator(target,property2,desc2)||desc2;},desc);if(context&&desc.initializer!==void 0){desc.value=desc.initializer?desc.initializer.call(context):void 0;desc.initializer=void 0;}if(desc.initializer===void 0){Object.defineProperty(target,property2,desc);desc=null;}return desc;}_dec=B({tag:"quark-virtuallist",style}),_dec2=N({type:Number}),_dec3=N({type:Number}),_dec4=O(),_dec5=O(),_dec6=O(),_dec7=O(),_dec(_class=(_class2=class QuarkVirtualList2 extends H{constructor(...args){super(...args);_initializerDefineProperty(this,"itemheight",_descriptor,this);_initializerDefineProperty(this,"containerheight",_descriptor2,this);_initializerDefineProperty(this,"listData",_descriptor3,this);_initializerDefineProperty(this,"visibleData",_descriptor4,this);_initializerDefineProperty(this,"renderItem",_descriptor5,this);_initializerDefineProperty(this,"startOffset",_descriptor6,this);_defineProperty(this,"prevStart",0);_defineProperty(this,"prevEnd",0);_defineProperty(this,"virtualListRef",P());_defineProperty(this,"containerRef",P());_defineProperty(this,"updateVisibleData",(scrollTop=0)=>{const start=Math.floor(scrollTop/this.itemheight);const visibleItemCnt=Math.ceil(this.containerheight/this.itemheight);const end=Math.min(start+visibleItemCnt,this.listData.length)+1;if(this.prevStart!==start||this.prevEnd!==end){this.visibleData=this.listData.slice(start,end);this.prevStart=start;this.prevEnd=end;this.startOffset=start*this.itemheight;}if(start+visibleItemCnt>=this.listData.length){this.$emit("load");}});_defineProperty(this,"handleListScroll",()=>{const{current}=this.virtualListRef;if(!current){console.warn("virtualListRef not find");return;}const scrollTop=current.scrollTop;this.updateVisibleData(scrollTop);});_defineProperty(this,"componentDidMount",()=>{this.updateVisibleData();});_defineProperty(this,"renderList",()=>{const list=this.visibleData.map(item=>this.renderItem(item));if(this.containerRef.current){this.containerRef.current.innerHTML=list.join("\n");}});}setListData(listData){this.listData=listData;this.updateVisibleData();}setRenderItem(renderItem){this.renderItem=renderItem;}render(){return/* @__PURE__ */H.h("div",{ref:this.virtualListRef,class:"quark-virtual-list",style:{height:this.containerheight},onScroll:this.handleListScroll},/* @__PURE__ */H.h("div",{class:"quark-virtual-list-phantom",style:{height:this.listData.length*this.itemheight}}),/* @__PURE__ */H.h("div",{ref:this.containerRef,class:"quark-virtual-list-container",style:{transform:`translate3d(0, ${this.startOffset}px, 0)`}},this.renderList()));}},_descriptor=_applyDecoratedDescriptor(_class2.prototype,"itemheight",[_dec2],{configurable:true,enumerable:true,writable:true,initializer:function(){return 50;}}),_descriptor2=_applyDecoratedDescriptor(_class2.prototype,"containerheight",[_dec3],{configurable:true,enumerable:true,writable:true,initializer:function(){return document.documentElement.clientHeight||document.body.clientHeight||667;}}),_descriptor3=_applyDecoratedDescriptor(_class2.prototype,"listData",[_dec4],{configurable:true,enumerable:true,writable:true,initializer:function(){return[];}}),_descriptor4=_applyDecoratedDescriptor(_class2.prototype,"visibleData",[_dec5],{configurable:true,enumerable:true,writable:true,initializer:function(){return[];}}),_descriptor5=_applyDecoratedDescriptor(_class2.prototype,"renderItem",[_dec6],{configurable:true,enumerable:true,writable:true,initializer:function(){return()=>null;}}),_descriptor6=_applyDecoratedDescriptor(_class2.prototype,"startOffset",[_dec7],{configurable:true,enumerable:true,writable:true,initializer:function(){return 0;}}),_class2))||_class;var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("virtuallist");const _sfc_main=createDemo({setup(){const list=ref(new Array(100).fill(0).map((_,i)=>i+1));const virtualListRef=ref(null);const onLoad=()=>{const len=list.value.length;const arr=new Array(100).fill(0).map((_,i)=>len+i+1);list.value=list.value.concat(arr);virtualListRef.value.setListData(list.value);};onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法"},"en-US":{basic:"Basic Usage"}});});const renderItem=text=>{const div=` +
${text}
+ `;return div;};onMounted(()=>{virtualListRef.value.setListData(list.value);virtualListRef.value.setRenderItem(renderItem);});return{translate,virtualListRef,onLoad};}});const _hoisted_1={class:"demo no-padding popup-demo"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-virtuallist",{ref:"virtualListRef",itemheight:50,containerheight:500,onLoad:_cache[0]||(_cache[0]=(...args)=>_ctx.onLoad&&_ctx.onLoad(...args))},null,544)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.0ed17d53.js b/demo/assets/demo-legacy.0ed17d53.js new file mode 100644 index 000000000..16556f50a --- /dev/null +++ b/demo/assets/demo-legacy.0ed17d53.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".dialog-demo .my-indicator {\n position: fixed;\n top: 10px;\n font-size: 18px;\n z-index: 10000;\n color: #fff;\n text-align: center;\n width: 100%;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./vue-router-legacy.0b1d6af2.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,Toast,createElementBlock,createBaseVNode,toDisplayString,imagePreview,openBlock,onBeforeRouteLeave;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;Toast=module.T;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;imagePreview=module.E;openBlock=module.b;},function(module){onBeforeRouteLeave=module.o;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("imagePreview");const _sfc_main=createDemo({setup(){const data=ref({index:0,open1:false,open2:false});const preview1=ref(null);const preview2=ref(null);const baseUrls=["https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png","https://m.hellobike.com/resource/helloyun/15697/1V_2oJv02t.png","https://m.hellobike.com/resource/helloyun/15697/Q6t6B_noNetWork.png"];const baseUse=()=>{imagePreview({images:baseUrls});};const baseUse2=()=>{imagePreview({startPosition:2,images:baseUrls});};const baseUse3=()=>{imagePreview({startPosition:1,images:baseUrls,close:index=>Toast.text(`${translate("dialog.close")}${index+1}`)});};const swipeChange=()=>{imagePreview({startPosition:1,images:baseUrls,change:index=>Toast.text(`${translate("dialog.move")}${index+1}`)});};const componentsClick=()=>{data.value.open1=true;};const componentsClick2=()=>{data.value.open2=true;};onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",configuration:"传入配置项",props:"组件式调用"},basic:{preview:"预览图片"},configuration:{initial:"指定初始位置",sliding:"监听滑动事件",close:"监听关闭事件"},props:{label:"标签式调用",nav:"自定义导航"},page1:"第",page2:"页",dialog:{move:"当前移动位置",close:"当前关闭位置"}},"en-US":{title:{basic:"Basic Usage",configuration:"Configuration Items",props:"Component Call"},basic:{preview:"Image Preview"},configuration:{initial:"Initial Position",sliding:"Sliding Event",close:"Close Event"},props:{label:"Label Call",nav:"Custom Navigation"},page1:"Page",page2:"",dialog:{move:"Current Mobile Location",close:"Current Closed Position"}}});});onMounted(()=>{preview2.value.setData({images:baseUrls,change:index=>data.value.index=index,close:()=>data.value.open2=false});preview1.value.setData({images:baseUrls,startPosition:2,change:index=>Toast.text(`${translate("dialog.move")}${index+1}`),close:()=>data.value.open1=false});});onBeforeRouteLeave(()=>{const nodes=document.querySelectorAll("quark-image-preview ");nodes.forEach(i=>i.open=false);});return{data,baseUse,baseUse2,baseUse3,swipeChange,componentsClick,componentsClick2,translate,preview1,preview2};}});const _hoisted_1={style:{"height":"100%"}};const _hoisted_2={class:"demo dialog-demo"};const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6=["title"];const _hoisted_7=["title"];const _hoisted_8=["title"];const _hoisted_9=["open"];const _hoisted_10=["open"];const _hoisted_11={class:"my-indicator",slot:"indicator"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("div",_hoisted_2,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('basic.preview'),isLink:"",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.baseUse&&_ctx.baseUse(...args))},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.configuration")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('configuration.initial'),isLink:"",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.baseUse2&&_ctx.baseUse2(...args))},null,8,_hoisted_4),createBaseVNode("quark-cell",{title:_ctx.translate('configuration.sliding'),isLink:"",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.swipeChange&&_ctx.swipeChange(...args))},null,8,_hoisted_5),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('configuration.close'),isLink:"",onClick:_cache[3]||(_cache[3]=(...args)=>_ctx.baseUse3&&_ctx.baseUse3(...args))},null,8,_hoisted_6)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.props")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{title:_ctx.translate('props.label'),isLink:"",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.componentsClick&&_ctx.componentsClick(...args))},null,8,_hoisted_7),createBaseVNode("quark-cell",{title:_ctx.translate('props.nav'),isLink:"",onClick:_cache[5]||(_cache[5]=(...args)=>_ctx.componentsClick2&&_ctx.componentsClick2(...args))},null,8,_hoisted_8)])]),createBaseVNode("quark-image-preview",{ref:"preview1",open:_ctx.data.open1},null,8,_hoisted_9),createBaseVNode("quark-image-preview",{ref:"preview2",open:_ctx.data.open2},[createBaseVNode("p",_hoisted_11,toDisplayString(_ctx.translate("page1"))+" "+toDisplayString(_ctx.data.index+1)+" "+toDisplayString(_ctx.translate("page2")),1)],8,_hoisted_10)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.11dee985.js b/demo/assets/demo-legacy.11dee985.js new file mode 100644 index 000000000..15decc0af --- /dev/null +++ b/demo/assets/demo-legacy.11dee985.js @@ -0,0 +1,2 @@ +;(function(){System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("cascadepicker");const _sfc_main=createDemo({setup(){const open=ref(false);const dateVisible=ref(false);const yearMonthVisible=ref(false);const monthDayVisible=ref(false);const timeVisible=ref(false);const datetimeVisible=ref(false);const datehourVisible=ref(false);const customToolbarVisible=ref(false);const setValueVisible=ref(false);const minDate=ref("2020-10-01");const maxDate=ref("2025-08-13");const currentDate=ref("2021-11-30");const currentTime=ref("16:01");const datetimePickerRef=ref();const timePicekerRef=ref();const yearMonthRef=ref();const monthDayRef=ref();const datetimeRef=ref();const setValueRef=ref();onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",head:"自定义头部",date:"选择年月日",yearMonth:"选择年月",monthDay:"选择月日",time:"选择时间",datetime:"选择完整时间",datehour:"选择年月日小时",setValue:"设置当前时间"},button:{cancel:"取消",confirm:"确定"},year:"年",month:"月",day:"日",hour:"时",minute:"分"},"en-US":{title:{basic:"Basic Usage",head:"Custom Head",date:"Choose Date",yearMonth:"Choose Year-Month",monthDay:"Choose Month-Day",time:"Choose Time",datetime:"Choose Datetime",datehour:"Choose DateHour",setValue:"Set current date"},button:{cancel:"Cancel",confirm:"Confirm"},year:"Year",month:"Month",day:"Day",hour:"Hour",minute:"Minute"}});});const formatter=(type,val)=>{if(type==="year"){return`${val}${translate("year")}`;}if(type==="month"){return`${val}${translate("month")}`;}if(type==="day"){return`${val}${translate("day")}`;}return val;};onMounted(()=>{yearMonthRef.value.setFormatter(formatter);monthDayRef.value.setFormatter(formatter);timePicekerRef.value.setFormatter((type,val)=>{if(type==="hour"){return`${val}${translate("hour")}`;}if(type==="minute"){return`${val}${translate("minute")}`;}return val;});timePicekerRef.value.setFilter(filter);});const filter=(type,options)=>{if(type==="minute"){return options.filter(option=>Number(option)%5===0);}return options;};const visibleHandle=(type,visible=true)=>{if(type==="date"){dateVisible.value=visible;}else if(type==="year-month"){yearMonthVisible.value=visible;}else if(type==="month-day"){monthDayVisible.value=visible;}else if(type==="time"){timeVisible.value=visible;}else if(type==="datetime"){datetimeVisible.value=visible;}else if(type==="datehour"){datehourVisible.value=visible;}else if(type==="custom"){customToolbarVisible.value=visible;}else if(type==="setValue"){if(visible===true){setValueRef.value.setValue("2023-10-07");// setValueRef.value.setValue('10:20'); // type 为 time +}setValueVisible.value=visible;}};const confirm=(type,{detail})=>{visibleHandle(type,false);if(type==="time"){Toast.text(`${detail.value}`);return;}const year=detail.value.getFullYear();const month=detail.value.getMonth()+1;const day=detail.value.getDate();const hour=detail.value.getHours();const minute=detail.value.getMinutes();if(type==="date"||type==="custom"||type==="setValue"){Toast.text(`${year}年${month}月${day}日`);}else if(type==="year-month"){Toast.text(`${year}年${month}月`);}else if(type==="month-day"){Toast.text(`${month}月${day}日`);}else if(type==="datetime"){Toast.text(`${year}年${month}月${day}日 ${hour}:${minute}`);}else if(type==="datehour"){Toast.text(`${year}年${month}月${day}日 ${hour}时`);}};const change=({detail})=>{console.log(detail.value);};return{open,confirm,change,translate,minDate,maxDate,currentDate,dateVisible,yearMonthVisible,monthDayVisible,timeVisible,datetimeVisible,datehourVisible,customToolbarVisible,visibleHandle,currentTime,datetimePickerRef,timePicekerRef,yearMonthRef,monthDayRef,datetimeRef,setValueVisible,setValueRef};}});const _hoisted_1={class:"demo"};const _hoisted_2=["title"];const _hoisted_3=["value","title","open","mindate","maxdate","confirmbuttontext","cancelbuttontext"];const _hoisted_4=["title"];const _hoisted_5=["title","open","mindate","maxdate"];const _hoisted_6=["title"];const _hoisted_7=["title","open"];const _hoisted_8=["title"];const _hoisted_9=["value","title","open"];const _hoisted_10=["title"];const _hoisted_11=["title","open","mindate","maxdate"];const _hoisted_12=["title"];const _hoisted_13=["title","open"];const _hoisted_14=["title"];const _hoisted_15=["title","open","mindate","maxdate"];const _hoisted_16=["title"];const _hoisted_17=["title","open","mindate","maxdate"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.date'),islink:"",onClick:_cache[0]||(_cache[0]=$event=>_ctx.visibleHandle('date'))},null,8,_hoisted_2)]),createBaseVNode("quark-datetime-picker",{ref:"datetimePickerRef",type:"date",value:_ctx.currentDate,title:_ctx.translate('title.date'),open:_ctx.dateVisible,mindate:_ctx.minDate,maxdate:_ctx.maxDate,confirmbuttontext:_ctx.translate('button.confirm'),cancelbuttontext:_ctx.translate('button.cancel'),onClose:_cache[1]||(_cache[1]=$event=>_ctx.visibleHandle('date',false)),onConfirm:_cache[2]||(_cache[2]=detail=>_ctx.confirm('date',detail))},null,40,_hoisted_3),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.yearMonth'),islink:"",onClick:_cache[3]||(_cache[3]=$event=>_ctx.visibleHandle('year-month'))},null,8,_hoisted_4)]),createBaseVNode("quark-datetime-picker",{ref:"yearMonthRef",type:"year-month",title:_ctx.translate('title.yearMonth'),open:_ctx.yearMonthVisible,mindate:_ctx.minDate,maxdate:_ctx.maxDate,onClose:_cache[4]||(_cache[4]=$event=>_ctx.visibleHandle('year-month',false)),onConfirm:_cache[5]||(_cache[5]=detail=>_ctx.confirm('year-month',detail))},null,40,_hoisted_5),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.monthDay'),islink:"",onClick:_cache[6]||(_cache[6]=$event=>_ctx.visibleHandle('month-day'))},null,8,_hoisted_6)]),createBaseVNode("quark-datetime-picker",{ref:"monthDayRef",type:"month-day",title:_ctx.translate('title.monthDay'),open:_ctx.monthDayVisible,onClose:_cache[7]||(_cache[7]=$event=>_ctx.visibleHandle('month-day',false)),onConfirm:_cache[8]||(_cache[8]=detail=>_ctx.confirm('month-day',detail))},null,40,_hoisted_7),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.time'),islink:"",onClick:_cache[9]||(_cache[9]=$event=>_ctx.visibleHandle('time'))},null,8,_hoisted_8)]),createBaseVNode("quark-datetime-picker",{ref:"timePicekerRef",type:"time",value:_ctx.currentTime,title:_ctx.translate('title.time'),open:_ctx.timeVisible,minhour:10,maxhour:22,minminute:5,maxminute:45,bottomhidden:true,onClose:_cache[10]||(_cache[10]=$event=>_ctx.visibleHandle('time',false)),onConfirm:_cache[11]||(_cache[11]=detail=>_ctx.confirm('time',detail)),onChange:_cache[12]||(_cache[12]=(...args)=>_ctx.change&&_ctx.change(...args))},null,40,_hoisted_9),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.datetime'),islink:"",onClick:_cache[13]||(_cache[13]=$event=>_ctx.visibleHandle('datetime'))},null,8,_hoisted_10)]),createBaseVNode("quark-datetime-picker",{ref:"datetimeRef",type:"datetime",title:_ctx.translate('title.datetime'),open:_ctx.datetimeVisible,mindate:_ctx.minDate,maxdate:_ctx.maxDate,onClose:_cache[14]||(_cache[14]=$event=>_ctx.visibleHandle('datetime',false)),onConfirm:_cache[15]||(_cache[15]=detail=>_ctx.confirm('datetime',detail))},null,40,_hoisted_11),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.datehour'),islink:"",onClick:_cache[16]||(_cache[16]=$event=>_ctx.visibleHandle('datehour'))},null,8,_hoisted_12)]),createBaseVNode("quark-datetime-picker",{type:"datehour",title:_ctx.translate('title.datehour'),open:_ctx.datehourVisible,onClose:_cache[17]||(_cache[17]=$event=>_ctx.visibleHandle('datehour',false)),onConfirm:_cache[18]||(_cache[18]=detail=>_ctx.confirm('datehour',detail))},null,40,_hoisted_13),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.head'),islink:"",onClick:_cache[19]||(_cache[19]=$event=>_ctx.visibleHandle('custom'))},null,8,_hoisted_14)]),createBaseVNode("quark-datetime-picker",{title:_ctx.translate('title.head'),type:"date",open:_ctx.customToolbarVisible,mindate:_ctx.minDate,maxdate:_ctx.maxDate,showtoolbar:true,onClose:_cache[20]||(_cache[20]=$event=>_ctx.visibleHandle('custom',false)),onConfirm:_cache[21]||(_cache[21]=detail=>_ctx.confirm('custom',detail))},null,40,_hoisted_15),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.setValue'),islink:"",onClick:_cache[22]||(_cache[22]=$event=>_ctx.visibleHandle('setValue'))},null,8,_hoisted_16)]),createBaseVNode("quark-datetime-picker",{ref:"setValueRef",title:_ctx.translate('title.setValue'),type:"date",open:_ctx.setValueVisible,mindate:_ctx.minDate,maxdate:_ctx.maxDate,showtoolbar:true,onClose:_cache[23]||(_cache[23]=$event=>_ctx.visibleHandle('setValue',false)),onConfirm:_cache[24]||(_cache[24]=detail=>_ctx.confirm('setValue',detail))},null,40,_hoisted_17)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.14f1998f.js b/demo/assets/demo-legacy.14f1998f.js new file mode 100644 index 000000000..83f74ef0c --- /dev/null +++ b/demo/assets/demo-legacy.14f1998f.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".loading-demo h2 {\n padding-left: 0 !important;\n}\n.loading-demo quark-loading {\n margin-right: 10px;\n}\n.loading-demo .demo-loadings {\n margin-bottom: 24px;\n}\n.loading-demo .custom-text {\n --loading-text-color: #08f;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var _export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("loading");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{loadingType:"加载类型",customSize:"自定义大小",customColor:"自定义颜色",loadingText:"加载文案",vertical:"垂直排列",customStyle:"自定义文本样式",load:"加载中..."},"en-US":{loadingType:"Loading Type",customSize:"Custom Size",customColor:"Custom Color",loadingText:"Loading Text",vertical:"Vertical Layout",customStyle:"Custom Text Style",load:"loading..."}});});return{translate};}});const _hoisted_1={class:"demo loading-demo"};const _hoisted_2=/*#__PURE__*/createBaseVNode("div",{class:"demo-loadings"},[/*#__PURE__*/createBaseVNode("quark-loading",{type:"circular"}),/*#__PURE__*/createBaseVNode("quark-loading")],-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("div",{class:"demo-loadings"},[/*#__PURE__*/createBaseVNode("quark-loading",{size:"20"}),/*#__PURE__*/createBaseVNode("quark-loading",{size:"30"}),/*#__PURE__*/createBaseVNode("quark-loading",{size:"40"})],-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("div",{class:"demo-loadings"},[/*#__PURE__*/createBaseVNode("quark-loading",{size:"30"}),/*#__PURE__*/createBaseVNode("quark-loading",{size:"30",color:"green"}),/*#__PURE__*/createBaseVNode("quark-loading",{size:"30",color:"#08f"})],-1);const _hoisted_5={class:"demo-loadings"};const _hoisted_6={size:"30"};const _hoisted_7={class:"demo-loadings"};const _hoisted_8={size:"30",vertical:""};const _hoisted_9={class:"demo-loadings"};const _hoisted_10={size:"30",vertical:"",class:"custom-text"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("loadingType")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("customSize")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("customColor")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("loadingText")),1),createBaseVNode("div",_hoisted_5,[createBaseVNode("quark-loading",_hoisted_6,toDisplayString(_ctx.translate("load")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("vertical")),1),createBaseVNode("div",_hoisted_7,[createBaseVNode("quark-loading",_hoisted_8,toDisplayString(_ctx.translate("load")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customStyle")),1),createBaseVNode("div",_hoisted_9,[createBaseVNode("quark-loading",_hoisted_10,toDisplayString(_ctx.translate("load")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.17ccbeb0.js b/demo/assets/demo-legacy.17ccbeb0.js new file mode 100644 index 000000000..cea13220f --- /dev/null +++ b/demo/assets/demo-legacy.17ccbeb0.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".icon-demo .demo-cell {\n display: flex;\n flex-wrap: wrap;\n padding: 13px 16px;\n background: #fff;\n border-radius: 6px;\n font-size: 14px;\n color: #666;\n}\n.icon-demo .demo-cell quark-icon {\n margin-right: 10px;\n}\n.icon-demo .icon-item {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 25%;\n cursor: pointer;\n margin-bottom: 18px;\n}\n.icon-demo .icon-item:active {\n background-color: #f2f3f5;\n}\n.icon-demo .support-icons quark-icon {\n margin-right: 0;\n}\n.icon-demo .h2-custom {\n margin-top: 30px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #909ca4;\n padding: 0 10px;\n font-weight: normal;\n}\n.icon-demo .icons-container {\n margin-top: 20px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n flex-wrap: wrap;\n}\n.icon-demo span {\n font-size: 12px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./index-legacy.d9d5991e.js','./index-legacy.378a587f.js'],function(exports){'use strict';var createComponent,f,r,w,s$6,M,h,d,a$B,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){f=module.s;r=module.x;w=module.y;s$6=module.z;M=module.M;h=module.B;d=module.C;a$B=module.D;_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;},function(){},function(){}],execute:function(){function a$A(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$D=function(t){f(s,t);var e=a$A(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-arrow-up")||customElements.define("quark-icon-arrow-up",u$D);function a$z(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var s=d(this).constructor;i=Reflect.construct(r,arguments,s);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$C=function(t){f(c,t);var e=a$z(c);function c(){var t;return r(this,c),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(c,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),c;}(h(HTMLElement));customElements.get("quark-icon-message")||customElements.define("quark-icon-message",u$C);function a$y(n){var c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,o=d(n);if(c){var r=d(this).constructor;i=Reflect.construct(o,arguments,r);}else i=o.apply(this,arguments);return a$B(this,i);};}var u$B=function(t){f(s,t);var e=a$y(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var c=this.getFontSize();this.icon.style.fontSize="".concat(c);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-setting")||customElements.define("quark-icon-setting",u$B);function a$x(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$A=function(t){f(s,t);var e=a$x(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-warning")||customElements.define("quark-icon-warning",u$A);function a$w(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$z=function(t){f(s,t);var e=a$w(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-warning-o")||customElements.define("quark-icon-warning-o",u$z);function a$v(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$y=function(t){f(s,t);var e=a$v(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-plus")||customElements.define("quark-icon-plus",u$y);function a$u(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$x=function(t){f(s,t);var e=a$u(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-more-h")||customElements.define("quark-icon-more-h",u$x);function a$t(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$w=function(t){f(s,t);var e=a$t(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-more-v")||customElements.define("quark-icon-more-v",u$w);function a$s(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$v=function(t){f(s,t);var e=a$s(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-info")||customElements.define("quark-icon-info",u$v);function a$r(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$u=function(t){f(s,t);var e=a$r(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-edit")||customElements.define("quark-icon-edit",u$u);function a$q(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var u$t=function(t){f(s,t);var e=a$q(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-comment")||customElements.define("quark-icon-comment",u$t);function a$p(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var u$s=function(t){f(s,t);var e=a$p(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-good-job")||customElements.define("quark-icon-good-job",u$s);function a$o(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$r=function(t){f(s,t);var e=a$o(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-help")||customElements.define("quark-icon-help",u$r);function s$5(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,a=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(a,arguments,r);}else i=a.apply(this,arguments);return a$B(this,i);};}var u$q=function(t){f(c,t);var e=s$5(c);function c(){var t;return r(this,c),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(c,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),c;}(h(HTMLElement));customElements.get("quark-icon-scan")||customElements.define("quark-icon-scan",u$q);function s$4(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var a=d(this).constructor;i=Reflect.construct(r,arguments,a);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$p=function(t){f(c,t);var e=s$4(c);function c(){var t;return r(this,c),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(c,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),c;}(h(HTMLElement));customElements.get("quark-icon-flash")||customElements.define("quark-icon-flash",u$p);function a$n(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,c=d(n);if(i){var r=d(this).constructor;o=Reflect.construct(c,arguments,r);}else o=c.apply(this,arguments);return a$B(this,o);};}var u$o=function(t){f(s,t);var e=a$n(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-like")||customElements.define("quark-icon-like",u$o);function s$3(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var l$2=function(t){f(a,t);var e=s$3(a);function a(){var t;return r(this,a),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(a,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),a;}(h(HTMLElement));customElements.get("quark-icon-star")||customElements.define("quark-icon-star",l$2);function s$2(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,a=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(a,arguments,r);}else i=a.apply(this,arguments);return a$B(this,i);};}var u$n=function(t){f(c,t);var e=s$2(c);function c(){var t;return r(this,c),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(c,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),c;}(h(HTMLElement));customElements.get("quark-icon-expand")||customElements.define("quark-icon-expand",u$n);function a$m(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var u$m=function(t){f(s,t);var e=a$m(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-success-o")||customElements.define("quark-icon-success-o",u$m);function a$l(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var u$l=function(t){f(s,t);var e=a$l(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-shop-cart")||customElements.define("quark-icon-shop-cart",u$l);function a$k(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var u$k=function(t){f(s,t);var e=a$k(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-location")||customElements.define("quark-icon-location",u$k);function a$j(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$j=function(t){f(s,t);var e=a$j(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-customer-service")||customElements.define("quark-icon-customer-service",u$j);function a$i(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$i=function(t){f(s,t);var e=a$i(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-unsmile")||customElements.define("quark-icon-unsmile",u$i);function a$h(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$h=function(t){f(s,t);var e=a$h(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-smile")||customElements.define("quark-icon-smile",u$h);function a$g(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var l$1=function(t){f(s,t);var e=a$g(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-unsafe")||customElements.define("quark-icon-unsafe",l$1);function a$f(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,c=d(n);if(o){var r=d(this).constructor;i=Reflect.construct(c,arguments,r);}else i=c.apply(this,arguments);return a$B(this,i);};}var l=function(t){f(s,t);var e=a$f(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-safe")||customElements.define("quark-icon-safe",l);function s$1(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$g=function(t){f(a,t);var e=s$1(a);function a(){var t;return r(this,a),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(a,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),a;}(h(HTMLElement));customElements.get("quark-icon-share")||customElements.define("quark-icon-share",u$g);function s(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$f=function(t){f(a,t);var e=s(a);function a(){var t;return r(this,a),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(a,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),a;}(h(HTMLElement));customElements.get("quark-icon-delete")||customElements.define("quark-icon-delete",u$f);function a$e(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$e=function(t){f(s,t);var e=a$e(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-refresh")||customElements.define("quark-icon-refresh",u$e);function a$d(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$d=function(t){f(s,t);var e=a$d(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-synchronous")||customElements.define("quark-icon-synchronous",u$d);function a$c(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$c=function(t){f(s,t);var e=a$c(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-time")||customElements.define("quark-icon-time",u$c);function a$b(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$b=function(t){f(s,t);var e=a$b(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-order")||customElements.define("quark-icon-order",u$b);function a$a(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$a=function(t){f(s,t);var e=a$a(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-like-fill")||customElements.define("quark-icon-like-fill",u$a);function a$9(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,c=d(n);if(i){var r=d(this).constructor;o=Reflect.construct(c,arguments,r);}else o=c.apply(this,arguments);return a$B(this,o);};}var u$9=function(t){f(s,t);var e=a$9(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-success-fill")||customElements.define("quark-icon-success-fill",u$9);function a$8(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$8=function(t){f(s,t);var e=a$8(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-close-fill")||customElements.define("quark-icon-close-fill",u$8);function a$7(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$7=function(t){f(s,t);var e=a$7(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-good-job-fill")||customElements.define("quark-icon-good-job-fill",u$7);function u$6(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var a$6=function(t){f(s,t);var e=u$6(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-time-fill")||customElements.define("quark-icon-time-fill",a$6);function a$5(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$5=function(t){f(s,t);var e=a$5(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-help-fill")||customElements.define("quark-icon-help-fill",u$5);function a$4(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$B(this,i);};}var u$4=function(t){f(s,t);var e=a$4(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-location-fill")||customElements.define("quark-icon-location-fill",u$4);function a$3(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$3=function(t){f(s,t);var e=a$3(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-info-fill")||customElements.define("quark-icon-info-fill",u$3);function a$2(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$2=function(t){f(s,t);var e=a$2(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-safe-fill")||customElements.define("quark-icon-safe-fill",u$2);function a$1(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u$1=function(t){f(s,t);var e=a$1(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-warning-fill")||customElements.define("quark-icon-warning-fill",u$1);function a(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,r=d(n);if(i){var c=d(this).constructor;o=Reflect.construct(r,arguments,c);}else o=r.apply(this,arguments);return a$B(this,o);};}var u=function(t){f(s,t);var e=a(s);function s(){var t;return r(this,s),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s$6(s,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var i=this.getFontSize();this.icon.style.fontSize="".concat(i);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s;}(h(HTMLElement));customElements.get("quark-icon-unsafe-fill")||customElements.define("quark-icon-unsafe-fill",u);var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("icon");function copyToClipboard(str){const el=document.createElement("textarea");el.value=str;el.setAttribute("readonly","");el.style.position="absolute";el.style.left="-9999px";document.body.appendChild(el);const selection=document.getSelection();if(!selection){return;}const selected=selection.rangeCount>0?selection.getRangeAt(0):false;el.select();document.execCommand("copy");document.body.removeChild(el);if(selected){selection.removeAllRanges();selection.addRange(selected);}}const _sfc_main=createDemo({setup(){const copyIcon=icon=>{const t=``;copyToClipboard(t);Toast.text(`复制成功：${t}`);};onBeforeMount(()=>{useTranslate({"zh-CN":{label:{example:"用法示例",basic:"基础图标",wireframe:"线框风格",solid:"实底风格"},title:{basic:"基础用法",size:"图标大小",color:"图标颜色"}},"en-US":{label:{example:"For Example",basic:"Basic Icon",wireframe:"Wireframe Style",solid:"Solid Style"},title:{basic:"Basic Usage",size:"Icon Size",color:"Icon Color"}}});});return{translate,copyIcon};}});const _hoisted_1={class:"demo icon-demo no-padding"};const _hoisted_2={activekey:"tab1"};const _hoisted_3=["label"];const _hoisted_4={class:"h2-custom"};const _hoisted_5=/*#__PURE__*/createBaseVNode("section",{class:"demo-cell"},[/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"26"})],-1);const _hoisted_6={class:"h2-custom"};const _hoisted_7=/*#__PURE__*/createBaseVNode("section",{class:"demo-cell"},[/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"18"}),/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"24"}),/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"30"})],-1);const _hoisted_8={class:"h2-custom"};const _hoisted_9=/*#__PURE__*/createBaseVNode("section",{class:"demo-cell"},[/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"26",color:"#F44336"}),/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"26",color:"#3F51B5"})],-1);const _hoisted_10=["label"];const _hoisted_11={class:"icons-container"};const _hoisted_12=/*#__PURE__*/createBaseVNode("quark-icon-arrow-left",{size:"26"},null,-1);const _hoisted_13=/*#__PURE__*/createBaseVNode("span",null,"arrow-left",-1);const _hoisted_14=[_hoisted_12,_hoisted_13];const _hoisted_15=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"26"},null,-1);const _hoisted_16=/*#__PURE__*/createBaseVNode("span",null,"arrow-right",-1);const _hoisted_17=[_hoisted_15,_hoisted_16];const _hoisted_18=/*#__PURE__*/createBaseVNode("quark-icon-arrow-up",{size:"26"},null,-1);const _hoisted_19=/*#__PURE__*/createBaseVNode("span",null,"arrow-up",-1);const _hoisted_20=[_hoisted_18,_hoisted_19];const _hoisted_21=/*#__PURE__*/createBaseVNode("quark-icon-arrow-down",{size:"26"},null,-1);const _hoisted_22=/*#__PURE__*/createBaseVNode("span",null,"arrow-down",-1);const _hoisted_23=[_hoisted_21,_hoisted_22];const _hoisted_24=/*#__PURE__*/createBaseVNode("quark-icon-close",{size:"26"},null,-1);const _hoisted_25=/*#__PURE__*/createBaseVNode("span",null,"close",-1);const _hoisted_26=[_hoisted_24,_hoisted_25];const _hoisted_27=/*#__PURE__*/createBaseVNode("quark-icon-success",{size:"26"},null,-1);const _hoisted_28=/*#__PURE__*/createBaseVNode("span",null,"success",-1);const _hoisted_29=[_hoisted_27,_hoisted_28];const _hoisted_30=/*#__PURE__*/createBaseVNode("quark-icon-plus",{size:"26"},null,-1);const _hoisted_31=/*#__PURE__*/createBaseVNode("span",null,"plus",-1);const _hoisted_32=[_hoisted_30,_hoisted_31];const _hoisted_33=/*#__PURE__*/createBaseVNode("quark-icon-more-h",{size:"26"},null,-1);const _hoisted_34=/*#__PURE__*/createBaseVNode("span",null,"more-h",-1);const _hoisted_35=[_hoisted_33,_hoisted_34];const _hoisted_36=/*#__PURE__*/createBaseVNode("quark-icon-more-v",{size:"26"},null,-1);const _hoisted_37=/*#__PURE__*/createBaseVNode("span",null,"more-v",-1);const _hoisted_38=[_hoisted_36,_hoisted_37];const _hoisted_39=/*#__PURE__*/createBaseVNode("quark-icon-warning",{size:"26"},null,-1);const _hoisted_40=/*#__PURE__*/createBaseVNode("span",null,"warning",-1);const _hoisted_41=[_hoisted_39,_hoisted_40];const _hoisted_42=["label"];const _hoisted_43={class:"icons-container"};const _hoisted_44=/*#__PURE__*/createBaseVNode("quark-icon-home",{size:"26"},null,-1);const _hoisted_45=/*#__PURE__*/createBaseVNode("span",null,"home",-1);const _hoisted_46=[_hoisted_44,_hoisted_45];const _hoisted_47=/*#__PURE__*/createBaseVNode("quark-icon-search",{size:"26"},null,-1);const _hoisted_48=/*#__PURE__*/createBaseVNode("span",null,"search",-1);const _hoisted_49=[_hoisted_47,_hoisted_48];const _hoisted_50=/*#__PURE__*/createBaseVNode("quark-icon-message",{size:"26"},null,-1);const _hoisted_51=/*#__PURE__*/createBaseVNode("span",null,"message",-1);const _hoisted_52=[_hoisted_50,_hoisted_51];const _hoisted_53=/*#__PURE__*/createBaseVNode("quark-icon-setting",{size:"26"},null,-1);const _hoisted_54=/*#__PURE__*/createBaseVNode("span",null,"setting",-1);const _hoisted_55=[_hoisted_53,_hoisted_54];const _hoisted_56=/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"26"},null,-1);const _hoisted_57=/*#__PURE__*/createBaseVNode("span",null,"user",-1);const _hoisted_58=[_hoisted_56,_hoisted_57];const _hoisted_59=/*#__PURE__*/createBaseVNode("quark-icon-tel",{size:"26"},null,-1);const _hoisted_60=/*#__PURE__*/createBaseVNode("span",null,"tel",-1);const _hoisted_61=[_hoisted_59,_hoisted_60];const _hoisted_62=/*#__PURE__*/createBaseVNode("quark-icon-close-o",{size:"26"},null,-1);const _hoisted_63=/*#__PURE__*/createBaseVNode("span",null,"close-o",-1);const _hoisted_64=[_hoisted_62,_hoisted_63];const _hoisted_65=/*#__PURE__*/createBaseVNode("quark-icon-notify",{size:"26"},null,-1);const _hoisted_66=/*#__PURE__*/createBaseVNode("span",null,"notify",-1);const _hoisted_67=[_hoisted_65,_hoisted_66];const _hoisted_68=/*#__PURE__*/createBaseVNode("quark-icon-warning-o",{size:"26"},null,-1);const _hoisted_69=/*#__PURE__*/createBaseVNode("span",null,"warning-o",-1);const _hoisted_70=[_hoisted_68,_hoisted_69];const _hoisted_71=/*#__PURE__*/createBaseVNode("quark-icon-info",{size:"26"},null,-1);const _hoisted_72=/*#__PURE__*/createBaseVNode("span",null,"info",-1);const _hoisted_73=[_hoisted_71,_hoisted_72];const _hoisted_74=/*#__PURE__*/createBaseVNode("quark-icon-edit",{size:"26"},null,-1);const _hoisted_75=/*#__PURE__*/createBaseVNode("span",null,"edit",-1);const _hoisted_76=[_hoisted_74,_hoisted_75];const _hoisted_77=/*#__PURE__*/createBaseVNode("quark-icon-help",{size:"26"},null,-1);const _hoisted_78=/*#__PURE__*/createBaseVNode("span",null,"help",-1);const _hoisted_79=[_hoisted_77,_hoisted_78];const _hoisted_80=/*#__PURE__*/createBaseVNode("quark-icon-scan",{size:"26"},null,-1);const _hoisted_81=/*#__PURE__*/createBaseVNode("span",null,"scan",-1);const _hoisted_82=[_hoisted_80,_hoisted_81];const _hoisted_83=/*#__PURE__*/createBaseVNode("quark-icon-good-job",{size:"26"},null,-1);const _hoisted_84=/*#__PURE__*/createBaseVNode("span",null,"good-job",-1);const _hoisted_85=[_hoisted_83,_hoisted_84];const _hoisted_86=/*#__PURE__*/createBaseVNode("quark-icon-comment",{size:"26"},null,-1);const _hoisted_87=/*#__PURE__*/createBaseVNode("span",null,"comment",-1);const _hoisted_88=[_hoisted_86,_hoisted_87];const _hoisted_89=/*#__PURE__*/createBaseVNode("quark-icon-flash",{size:"26"},null,-1);const _hoisted_90=/*#__PURE__*/createBaseVNode("span",null,"flash",-1);const _hoisted_91=[_hoisted_89,_hoisted_90];const _hoisted_92=/*#__PURE__*/createBaseVNode("quark-icon-like",{size:"26"},null,-1);const _hoisted_93=/*#__PURE__*/createBaseVNode("span",null,"like",-1);const _hoisted_94=[_hoisted_92,_hoisted_93];const _hoisted_95=/*#__PURE__*/createBaseVNode("quark-icon-star",{size:"26"},null,-1);const _hoisted_96=/*#__PURE__*/createBaseVNode("span",null,"star",-1);const _hoisted_97=[_hoisted_95,_hoisted_96];const _hoisted_98=/*#__PURE__*/createBaseVNode("quark-icon-expand",{size:"26"},null,-1);const _hoisted_99=/*#__PURE__*/createBaseVNode("span",null,"expand",-1);const _hoisted_100=[_hoisted_98,_hoisted_99];const _hoisted_101=/*#__PURE__*/createBaseVNode("quark-icon-success-o",{size:"26"},null,-1);const _hoisted_102=/*#__PURE__*/createBaseVNode("span",null,"success-o",-1);const _hoisted_103=[_hoisted_101,_hoisted_102];const _hoisted_104=/*#__PURE__*/createBaseVNode("quark-icon-shop-cart",{size:"26"},null,-1);const _hoisted_105=/*#__PURE__*/createBaseVNode("span",null,"shop-cart",-1);const _hoisted_106=[_hoisted_104,_hoisted_105];const _hoisted_107=/*#__PURE__*/createBaseVNode("quark-icon-location",{size:"26"},null,-1);const _hoisted_108=/*#__PURE__*/createBaseVNode("span",null,"location",-1);const _hoisted_109=[_hoisted_107,_hoisted_108];const _hoisted_110=/*#__PURE__*/createBaseVNode("quark-icon-customer-service",{size:"26"},null,-1);const _hoisted_111=/*#__PURE__*/createBaseVNode("span",null,"service",-1);const _hoisted_112=[_hoisted_110,_hoisted_111];const _hoisted_113=/*#__PURE__*/createBaseVNode("quark-icon-smile",{size:"26"},null,-1);const _hoisted_114=/*#__PURE__*/createBaseVNode("span",null,"smile",-1);const _hoisted_115=[_hoisted_113,_hoisted_114];const _hoisted_116=/*#__PURE__*/createBaseVNode("quark-icon-unsmile",{size:"26"},null,-1);const _hoisted_117=/*#__PURE__*/createBaseVNode("span",null,"unsmile",-1);const _hoisted_118=[_hoisted_116,_hoisted_117];const _hoisted_119=/*#__PURE__*/createBaseVNode("quark-icon-unsafe",{size:"26"},null,-1);const _hoisted_120=/*#__PURE__*/createBaseVNode("span",null,"unsafe",-1);const _hoisted_121=[_hoisted_119,_hoisted_120];const _hoisted_122=/*#__PURE__*/createBaseVNode("quark-icon-safe",{size:"26"},null,-1);const _hoisted_123=/*#__PURE__*/createBaseVNode("span",null,"safe",-1);const _hoisted_124=[_hoisted_122,_hoisted_123];const _hoisted_125=/*#__PURE__*/createBaseVNode("quark-icon-share",{size:"26"},null,-1);const _hoisted_126=/*#__PURE__*/createBaseVNode("span",null,"share",-1);const _hoisted_127=[_hoisted_125,_hoisted_126];const _hoisted_128=/*#__PURE__*/createBaseVNode("quark-icon-delete",{size:"26"},null,-1);const _hoisted_129=/*#__PURE__*/createBaseVNode("span",null,"delete",-1);const _hoisted_130=[_hoisted_128,_hoisted_129];const _hoisted_131=/*#__PURE__*/createBaseVNode("quark-icon-refresh",{size:"26"},null,-1);const _hoisted_132=/*#__PURE__*/createBaseVNode("span",null,"refresh",-1);const _hoisted_133=[_hoisted_131,_hoisted_132];const _hoisted_134=/*#__PURE__*/createBaseVNode("quark-icon-synchronous",{size:"26"},null,-1);const _hoisted_135=/*#__PURE__*/createBaseVNode("span",null,"synchronous",-1);const _hoisted_136=[_hoisted_134,_hoisted_135];const _hoisted_137=/*#__PURE__*/createBaseVNode("quark-icon-time",{size:"26"},null,-1);const _hoisted_138=/*#__PURE__*/createBaseVNode("span",null,"time",-1);const _hoisted_139=[_hoisted_137,_hoisted_138];const _hoisted_140=/*#__PURE__*/createBaseVNode("quark-icon-order",{size:"26"},null,-1);const _hoisted_141=/*#__PURE__*/createBaseVNode("span",null,"order",-1);const _hoisted_142=[_hoisted_140,_hoisted_141];const _hoisted_143=["label"];const _hoisted_144={class:"icons-container"};const _hoisted_145=/*#__PURE__*/createBaseVNode("quark-icon-camera-fill",{size:"26"},null,-1);const _hoisted_146=/*#__PURE__*/createBaseVNode("span",null,"camera-fill",-1);const _hoisted_147=[_hoisted_145,_hoisted_146];const _hoisted_148=/*#__PURE__*/createBaseVNode("quark-icon-star-fill",{size:"26"},null,-1);const _hoisted_149=/*#__PURE__*/createBaseVNode("span",null,"star-fill",-1);const _hoisted_150=[_hoisted_148,_hoisted_149];const _hoisted_151=/*#__PURE__*/createBaseVNode("quark-icon-like-fill",{size:"26"},null,-1);const _hoisted_152=/*#__PURE__*/createBaseVNode("span",null,"like-fill",-1);const _hoisted_153=[_hoisted_151,_hoisted_152];const _hoisted_154=/*#__PURE__*/createBaseVNode("quark-icon-success-fill",{size:"26"},null,-1);const _hoisted_155=/*#__PURE__*/createBaseVNode("span",null,"success-fill",-1);const _hoisted_156=[_hoisted_154,_hoisted_155];const _hoisted_157=/*#__PURE__*/createBaseVNode("quark-icon-close-fill",{size:"26"},null,-1);const _hoisted_158=/*#__PURE__*/createBaseVNode("span",null,"close-fill",-1);const _hoisted_159=[_hoisted_157,_hoisted_158];const _hoisted_160=/*#__PURE__*/createBaseVNode("quark-icon-good-job-fill",{size:"26"},null,-1);const _hoisted_161=/*#__PURE__*/createBaseVNode("span",null,"good-job-fill",-1);const _hoisted_162=[_hoisted_160,_hoisted_161];const _hoisted_163=/*#__PURE__*/createBaseVNode("quark-icon-time-fill",{size:"26"},null,-1);const _hoisted_164=/*#__PURE__*/createBaseVNode("span",null,"time-fill",-1);const _hoisted_165=[_hoisted_163,_hoisted_164];const _hoisted_166=/*#__PURE__*/createBaseVNode("quark-icon-help-fill",{size:"26"},null,-1);const _hoisted_167=/*#__PURE__*/createBaseVNode("span",null,"help-fill",-1);const _hoisted_168=[_hoisted_166,_hoisted_167];const _hoisted_169=/*#__PURE__*/createBaseVNode("quark-icon-location-fill",{size:"26"},null,-1);const _hoisted_170=/*#__PURE__*/createBaseVNode("span",null,"location-fill",-1);const _hoisted_171=[_hoisted_169,_hoisted_170];const _hoisted_172=/*#__PURE__*/createBaseVNode("quark-icon-info-fill",{size:"26"},null,-1);const _hoisted_173=/*#__PURE__*/createBaseVNode("span",null,"info-fill",-1);const _hoisted_174=[_hoisted_172,_hoisted_173];const _hoisted_175=/*#__PURE__*/createBaseVNode("quark-icon-safe-fill",{size:"26"},null,-1);const _hoisted_176=/*#__PURE__*/createBaseVNode("span",null,"safe-fill",-1);const _hoisted_177=[_hoisted_175,_hoisted_176];const _hoisted_178=/*#__PURE__*/createBaseVNode("quark-icon-warning-fill",{size:"26"},null,-1);const _hoisted_179=/*#__PURE__*/createBaseVNode("span",null,"warning-fill",-1);const _hoisted_180=[_hoisted_178,_hoisted_179];const _hoisted_181=/*#__PURE__*/createBaseVNode("quark-icon-unsafe-fill",{size:"26"},null,-1);const _hoisted_182=/*#__PURE__*/createBaseVNode("span",null,"unsafe-fill",-1);const _hoisted_183=[_hoisted_181,_hoisted_182];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("quark-tabs",_hoisted_2,[createBaseVNode("quark-tab-content",{label:_ctx.translate('label.example'),name:"tab1"},[createBaseVNode("div",null,[createBaseVNode("h2",_hoisted_4,toDisplayString(_ctx.translate("title.basic")),1),_hoisted_5,createBaseVNode("h2",_hoisted_6,toDisplayString(_ctx.translate("title.size")),1),_hoisted_7,createBaseVNode("h2",_hoisted_8,toDisplayString(_ctx.translate("title.color")),1),_hoisted_9])],8,_hoisted_3),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.basic'),name:"tab2"},[createBaseVNode("div",_hoisted_11,[createBaseVNode("div",{class:"icon-item",onClick:_cache[0]||(_cache[0]=$event=>_ctx.copyIcon('arrow-left'))},_hoisted_14),createBaseVNode("div",{class:"icon-item",onClick:_cache[1]||(_cache[1]=$event=>_ctx.copyIcon('arrow-right'))},_hoisted_17),createBaseVNode("div",{class:"icon-item",onClick:_cache[2]||(_cache[2]=$event=>_ctx.copyIcon('arrow-up'))},_hoisted_20),createBaseVNode("div",{class:"icon-item",onClick:_cache[3]||(_cache[3]=$event=>_ctx.copyIcon('arrow-down'))},_hoisted_23),createBaseVNode("div",{class:"icon-item",onClick:_cache[4]||(_cache[4]=$event=>_ctx.copyIcon('close'))},_hoisted_26),createBaseVNode("div",{class:"icon-item",onClick:_cache[5]||(_cache[5]=$event=>_ctx.copyIcon('success'))},_hoisted_29),createBaseVNode("div",{class:"icon-item",onClick:_cache[6]||(_cache[6]=$event=>_ctx.copyIcon('plus'))},_hoisted_32),createBaseVNode("div",{class:"icon-item",onClick:_cache[7]||(_cache[7]=$event=>_ctx.copyIcon('more-h'))},_hoisted_35),createBaseVNode("div",{class:"icon-item",onClick:_cache[8]||(_cache[8]=$event=>_ctx.copyIcon('more-v'))},_hoisted_38),createBaseVNode("div",{class:"icon-item",onClick:_cache[9]||(_cache[9]=$event=>_ctx.copyIcon('warning'))},_hoisted_41)])],8,_hoisted_10),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.wireframe'),name:"tab3"},[createBaseVNode("div",_hoisted_43,[createBaseVNode("div",{class:"icon-item",onClick:_cache[10]||(_cache[10]=$event=>_ctx.copyIcon('home'))},_hoisted_46),createBaseVNode("div",{class:"icon-item",onClick:_cache[11]||(_cache[11]=$event=>_ctx.copyIcon('search'))},_hoisted_49),createBaseVNode("div",{class:"icon-item",onClick:_cache[12]||(_cache[12]=$event=>_ctx.copyIcon('message'))},_hoisted_52),createBaseVNode("div",{class:"icon-item",onClick:_cache[13]||(_cache[13]=$event=>_ctx.copyIcon('setting'))},_hoisted_55),createBaseVNode("div",{class:"icon-item",onClick:_cache[14]||(_cache[14]=$event=>_ctx.copyIcon('user'))},_hoisted_58),createBaseVNode("div",{class:"icon-item",onClick:_cache[15]||(_cache[15]=$event=>_ctx.copyIcon('tel'))},_hoisted_61),createBaseVNode("div",{class:"icon-item",onClick:_cache[16]||(_cache[16]=$event=>_ctx.copyIcon('close-o'))},_hoisted_64),createBaseVNode("div",{class:"icon-item",onClick:_cache[17]||(_cache[17]=$event=>_ctx.copyIcon('notify'))},_hoisted_67),createBaseVNode("div",{class:"icon-item",onClick:_cache[18]||(_cache[18]=$event=>_ctx.copyIcon('warning-o'))},_hoisted_70),createBaseVNode("div",{class:"icon-item",onClick:_cache[19]||(_cache[19]=$event=>_ctx.copyIcon('info'))},_hoisted_73),createBaseVNode("div",{class:"icon-item",onClick:_cache[20]||(_cache[20]=$event=>_ctx.copyIcon('edit'))},_hoisted_76),createBaseVNode("div",{class:"icon-item",onClick:_cache[21]||(_cache[21]=$event=>_ctx.copyIcon('help'))},_hoisted_79),createBaseVNode("div",{class:"icon-item",onClick:_cache[22]||(_cache[22]=$event=>_ctx.copyIcon('scan'))},_hoisted_82),createBaseVNode("div",{class:"icon-item",onClick:_cache[23]||(_cache[23]=$event=>_ctx.copyIcon('good-job'))},_hoisted_85),createBaseVNode("div",{class:"icon-item",onClick:_cache[24]||(_cache[24]=$event=>_ctx.copyIcon('comment'))},_hoisted_88),createBaseVNode("div",{class:"icon-item",onClick:_cache[25]||(_cache[25]=$event=>_ctx.copyIcon('flash'))},_hoisted_91),createBaseVNode("div",{class:"icon-item",onClick:_cache[26]||(_cache[26]=$event=>_ctx.copyIcon('like'))},_hoisted_94),createBaseVNode("div",{class:"icon-item",onClick:_cache[27]||(_cache[27]=$event=>_ctx.copyIcon('star'))},_hoisted_97),createBaseVNode("div",{class:"icon-item",onClick:_cache[28]||(_cache[28]=$event=>_ctx.copyIcon('expand'))},_hoisted_100),createBaseVNode("div",{class:"icon-item",onClick:_cache[29]||(_cache[29]=$event=>_ctx.copyIcon('success-o'))},_hoisted_103),createBaseVNode("div",{class:"icon-item",onClick:_cache[30]||(_cache[30]=$event=>_ctx.copyIcon('shop-cart'))},_hoisted_106),createBaseVNode("div",{class:"icon-item",onClick:_cache[31]||(_cache[31]=$event=>_ctx.copyIcon('location'))},_hoisted_109),createBaseVNode("div",{class:"icon-item",onClick:_cache[32]||(_cache[32]=$event=>_ctx.copyIcon('customer-service'))},_hoisted_112),createBaseVNode("div",{class:"icon-item",onClick:_cache[33]||(_cache[33]=$event=>_ctx.copyIcon('smile'))},_hoisted_115),createBaseVNode("div",{class:"icon-item",onClick:_cache[34]||(_cache[34]=$event=>_ctx.copyIcon('unsmile'))},_hoisted_118),createBaseVNode("div",{class:"icon-item",onClick:_cache[35]||(_cache[35]=$event=>_ctx.copyIcon('unsafe'))},_hoisted_121),createBaseVNode("div",{class:"icon-item",onClick:_cache[36]||(_cache[36]=$event=>_ctx.copyIcon('safe'))},_hoisted_124),createBaseVNode("div",{class:"icon-item",onClick:_cache[37]||(_cache[37]=$event=>_ctx.copyIcon('share'))},_hoisted_127),createBaseVNode("div",{class:"icon-item",onClick:_cache[38]||(_cache[38]=$event=>_ctx.copyIcon('delete'))},_hoisted_130),createBaseVNode("div",{class:"icon-item",onClick:_cache[39]||(_cache[39]=$event=>_ctx.copyIcon('refresh'))},_hoisted_133),createBaseVNode("div",{class:"icon-item",onClick:_cache[40]||(_cache[40]=$event=>_ctx.copyIcon('synchronous'))},_hoisted_136),createBaseVNode("div",{class:"icon-item",onClick:_cache[41]||(_cache[41]=$event=>_ctx.copyIcon('time'))},_hoisted_139),createBaseVNode("div",{class:"icon-item",onClick:_cache[42]||(_cache[42]=$event=>_ctx.copyIcon('order'))},_hoisted_142)])],8,_hoisted_42),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.solid'),name:"tab4"},[createBaseVNode("div",_hoisted_144,[createBaseVNode("div",{class:"icon-item",onClick:_cache[43]||(_cache[43]=$event=>_ctx.copyIcon('camera-fill'))},_hoisted_147),createBaseVNode("div",{class:"icon-item",onClick:_cache[44]||(_cache[44]=$event=>_ctx.copyIcon('star-fill'))},_hoisted_150),createBaseVNode("div",{class:"icon-item",onClick:_cache[45]||(_cache[45]=$event=>_ctx.copyIcon('like-fill'))},_hoisted_153),createBaseVNode("div",{class:"icon-item",onClick:_cache[46]||(_cache[46]=$event=>_ctx.copyIcon('success-fill'))},_hoisted_156),createBaseVNode("div",{class:"icon-item",onClick:_cache[47]||(_cache[47]=$event=>_ctx.copyIcon('close-fill'))},_hoisted_159),createBaseVNode("div",{class:"icon-item",onClick:_cache[48]||(_cache[48]=$event=>_ctx.copyIcon('good-job-fill'))},_hoisted_162),createBaseVNode("div",{class:"icon-item",onClick:_cache[49]||(_cache[49]=$event=>_ctx.copyIcon('time-fill'))},_hoisted_165),createBaseVNode("div",{class:"icon-item",onClick:_cache[50]||(_cache[50]=$event=>_ctx.copyIcon('help-fill'))},_hoisted_168),createBaseVNode("div",{class:"icon-item",onClick:_cache[51]||(_cache[51]=$event=>_ctx.copyIcon('location-fill'))},_hoisted_171),createBaseVNode("div",{class:"icon-item",onClick:_cache[52]||(_cache[52]=$event=>_ctx.copyIcon('info-fill'))},_hoisted_174),createBaseVNode("div",{class:"icon-item",onClick:_cache[53]||(_cache[53]=$event=>_ctx.copyIcon('safe-fill'))},_hoisted_177),createBaseVNode("div",{class:"icon-item",onClick:_cache[54]||(_cache[54]=$event=>_ctx.copyIcon('warning-fill'))},_hoisted_180),createBaseVNode("div",{class:"icon-item",onClick:_cache[55]||(_cache[55]=$event=>_ctx.copyIcon('unsafe-fill'))},_hoisted_183)])],8,_hoisted_143)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.1ae49dcf.js b/demo/assets/demo-legacy.1ae49dcf.js new file mode 100644 index 000000000..b6546b1cd --- /dev/null +++ b/demo/assets/demo-legacy.1ae49dcf.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".tag-demo .custom-background {\n --tag-background: #666;\n}\n.tag-demo .custom-color {\n --tag-background: #fff;\n --tag-text-color: #fb990f;\n}\n.tag-demo .custom-border-color {\n --tag-border-color: #fb990f;\n}\n.tag-demo .tag-container {\n margin: 5px;\n display: inline-flex;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("sticky");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",size:"标签大小",plain:"空心样式",light:"浅色样式",color:"自定义颜色",round:"圆角标签",roundTag:"我是圆角",tag:"正"},"en-US":{basic:"Basic Usage",size:"Tag Size",plain:"Plain Tag",light:"Light Tag",color:"Custom Color",round:"Round Tag",roundTag:"Round Tag",tag:"Q"}});});return{translate};}});const _hoisted_1={class:"demo tag-demo"};const _hoisted_2={class:"tag-container"};const _hoisted_3={type:"danger",size:"large"};const _hoisted_4={class:"tag-container"};const _hoisted_5={type:"warning",size:"large"};const _hoisted_6={class:"tag-container"};const _hoisted_7={type:"success",size:"large"};const _hoisted_8={class:"tag-container"};const _hoisted_9={type:"primary",size:"large"};const _hoisted_10={class:"tag-container"};const _hoisted_11={class:"tag-container"};const _hoisted_12={size:"large"};const _hoisted_13={class:"tag-container"};const _hoisted_14={plain:"",size:"large",type:"danger"};const _hoisted_15={class:"tag-container"};const _hoisted_16={plain:"",size:"large",type:"warning"};const _hoisted_17={class:"tag-container"};const _hoisted_18={plain:"",size:"large",type:"success"};const _hoisted_19={class:"tag-container"};const _hoisted_20={plain:"",size:"large",type:"primary"};const _hoisted_21={class:"tag-container"};const _hoisted_22={light:"",size:"large",type:"danger"};const _hoisted_23={class:"tag-container"};const _hoisted_24={light:"",size:"large",type:"warning"};const _hoisted_25={class:"tag-container"};const _hoisted_26={light:"",size:"large",type:"success"};const _hoisted_27={class:"tag-container"};const _hoisted_28={light:"",size:"large",type:"primary"};const _hoisted_29={class:"tag-container"};const _hoisted_30={size:"large",color:"#ffe1e1",textcolor:"#ad0000"};const _hoisted_31={class:"tag-container"};const _hoisted_32={size:"large",color:"linear-gradient(135deg, #667eea, #764ba2)"};const _hoisted_33={class:"tag-container"};const _hoisted_34={class:"custom-border-color",plain:"",size:"large",color:"#ffe1e1",textcolor:"#ad0000"};const _hoisted_35={class:"tag-container"};const _hoisted_36={size:"large",type:"primary",round:""};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-tag",_hoisted_3,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-tag",_hoisted_5,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-tag",_hoisted_7,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-tag",_hoisted_9,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("size")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-tag",null,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_11,[createBaseVNode("quark-tag",_hoisted_12,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("plain")),1),createBaseVNode("div",_hoisted_13,[createBaseVNode("quark-tag",_hoisted_14,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_15,[createBaseVNode("quark-tag",_hoisted_16,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_17,[createBaseVNode("quark-tag",_hoisted_18,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_19,[createBaseVNode("quark-tag",_hoisted_20,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("light")),1),createBaseVNode("div",_hoisted_21,[createBaseVNode("quark-tag",_hoisted_22,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_23,[createBaseVNode("quark-tag",_hoisted_24,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_25,[createBaseVNode("quark-tag",_hoisted_26,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_27,[createBaseVNode("quark-tag",_hoisted_28,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("color")),1),createBaseVNode("div",_hoisted_29,[createBaseVNode("quark-tag",_hoisted_30,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_31,[createBaseVNode("quark-tag",_hoisted_32,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("div",_hoisted_33,[createBaseVNode("quark-tag",_hoisted_34,toDisplayString(_ctx.translate("tag")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("round")),1),createBaseVNode("div",_hoisted_35,[createBaseVNode("quark-tag",_hoisted_36,toDisplayString(_ctx.translate("roundTag")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.1ae65516.js b/demo/assets/demo-legacy.1ae65516.js new file mode 100644 index 000000000..fe5eeeb42 --- /dev/null +++ b/demo/assets/demo-legacy.1ae65516.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".button-demo .demo-buttons quark-button {\n margin: 8px;\n}\n.button-demo .flex {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n.custom-css {\n --calendar-background-color: #fce8e8;\n --calendar-theme-color: red;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,reactive,ref,createElementBlock,createBaseVNode,toDisplayString,normalizeClass,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;reactive=module.f;ref=module.r;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;normalizeClass=module.n;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("calendar");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",quick:"快捷选择",custom:"自定义日历",tiled:"平铺展示"},cellTitle:{single:"选择单个日期",multiple:"选择多个日期",range:"选择日期区间",customDefault:"自定义选中值",customMaxRange:"日期区间最大范围",customRange:"自定义日期范围",customConfirm:"自定义按钮文字",customDayText:"自定义日期文案",customPosition:"自定义弹出位置",customCss:"自定义样式",weekFirstDay:"自定义周起始日"},otherText:{multiple:"个日期",confirmText:"完成",confirmDisabledText:"请选择",midAutumn:"中秋节",nationalDday:"国庆节",today:"今天",rest:"休",in:"入店",out:"离店"}},"en-US":{title:{basic:"Basic Usage",quick:"Quick Select",custom:"Custom Calendar",tiled:"Tiled display"},cellTitle:{single:"Select Single Date",multiple:"Select Multiple Date",range:"Select Date Range",customDefault:"Custom Selected Value",customMaxRange:"Custom The Maximum Number Of Selected Days",customRange:"Custom Date Range",customConfirm:"Custom Confirm Text",customDayText:"Custom Day Text",customPosition:"Custom Pop Position",customCss:"Custom CSS",weekFirstDay:"Custom First Day Of Week"},otherText:{multiple:"Dates",confirmText:"OK",confirmDisabledText:"Please Select",midAutumn:"Mid-Autumn",nationalDday:"National Day",today:"Today",rest:"Rest",in:"In",out:"Out"}}});});const state=reactive({date:{selectSingle:null,selectRange:[],selectMultiple:[],quickSelectSingle:null,quickSelectRange:[],customDefault:new Date(),customConfirm:[],customRange:null,customMaxRange:[],customDayText:[],weekFirstDay:null,customPosition:null,customCss:null},isCss:false,visible:false,type:"single",round:true,minDate:undefined,maxDate:undefined,tiledMinDate:"2023-09-01",tiledMaxDate:"2023-10-31",maxRange:undefined,position:undefined,formatter:undefined,hideConfirm:false,confirmText:undefined,confirmDisabledText:undefined,weekFirstDay:0});const calendarRef=ref(null);const resetSettings=()=>{state.round=true;state.minDate=undefined;state.maxDate=undefined;state.maxRange=undefined;state.position=undefined;state.formatter=undefined;state.hideConfirm=false;state.confirmText=undefined;state.confirmDisabledText=undefined;state.weekFirstDay=0;state.isCss=false;calendarRef.value.setValue(null);};const dayFormatter=day=>{if(!day.date){return day;}const month=day.date.getMonth()+1;const date=day.date.getDate();if(month===9){if(date===29){day.topInfo=translate("otherText.midAutumn");}if(date===10){day.topInfo=translate("otherText.today");}if(date>28){day.bottomInfo=translate("otherText.rest");}}if(month===10){if(date===1){day.topInfo=translate("otherText.nationalDday");}if(date<7){day.bottomInfo=translate("otherText.rest");}}if(day.type==="start"){day.bottomInfo=translate("otherText.in");}else if(day.type==="end"){day.bottomInfo=translate("otherText.out");}return day;};const open=(type,id)=>{resetSettings();state.id=id;state.type=type;state.visible=true;switch(id){case"quickSelectSingle":case"quickSelectRange":state.hideConfirm=true;break;case"customDefault":calendarRef.value.setValue(new Date());break;case"customConfirm":state.confirmText=translate("otherText.confirmText");state.confirmDisabledText=translate("otherText.confirmDisabledText");break;case"customRange":state.minDate="2022-1-1";state.maxDate="2022-1-31";break;case"customDayText":state.minDate="2023-9-15";state.maxDate="2023-10-15";calendarRef.value.setFormatter(dayFormatter);break;case"customPosition":state.round=false;state.position="right";break;case"customMaxRange":state.maxRange=3;break;case"weekFirstDay":state.weekFirstDay=1;break;case"customCss":state.isCss=true;break;}};const formatDate=date=>{if(date){return`${date.getMonth()+1}/${date.getDate()}`;}};const formatFullDate=date=>{if(date){return`${date.getFullYear()}/${formatDate(date)}`;}};const formatMultiple=dates=>{if(dates.length){let text=translate("otherText.multiple");if(dates.length===1&&text.match(/.+s$/)){text=text.slice(0,text.length-1);}return dates.length+text;}};const formatRange=dateRange=>{if(dateRange.length){const[start,end]=dateRange;return`${formatDate(start)} - ${formatDate(end)}`;}};const confirm=({value})=>{state.visible=false;state.date[state.id]=value;};const close=()=>{state.visible=false;};return{translate,state,calendarRef,resetSettings,open,close,confirm,formatFullDate,formatMultiple,formatRange};}});const _hoisted_1={class:"demo button-demo"};const _hoisted_2=["title","desc"];const _hoisted_3=["title","desc"];const _hoisted_4=["title","desc"];const _hoisted_5=["title","desc"];const _hoisted_6=["title","desc"];const _hoisted_7=["title","desc"];const _hoisted_8=["title","desc"];const _hoisted_9=["title","desc"];const _hoisted_10=["title","desc"];const _hoisted_11=["title","desc"];const _hoisted_12=["title","desc"];const _hoisted_13=["title","desc"];const _hoisted_14=["title","desc"];const _hoisted_15=["maxdate","mindate"];const _hoisted_16=["open","type","round","position","mindate","maxdate","maxrange","formatter","hideconfirm","confirmtext","weekfirstday","confirmdisabledtext"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.single'),desc:_ctx.formatFullDate(_ctx.state.date.selectSingle),islink:"",onClick:_cache[0]||(_cache[0]=$event=>_ctx.open('single','selectSingle'))},null,8,_hoisted_2),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.multiple'),desc:_ctx.formatMultiple(_ctx.state.date.selectMultiple),islink:"",onClick:_cache[1]||(_cache[1]=$event=>_ctx.open('multiple','selectMultiple'))},null,8,_hoisted_3),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.range'),desc:_ctx.formatRange(_ctx.state.date.selectRange),islink:"",onClick:_cache[2]||(_cache[2]=$event=>_ctx.open('range','selectRange'))},null,8,_hoisted_4)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.quick")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.single'),desc:_ctx.formatFullDate(_ctx.state.date.quickSelectSingle),islink:"",onClick:_cache[3]||(_cache[3]=$event=>_ctx.open('single','quickSelectSingle'))},null,8,_hoisted_5),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.range'),desc:_ctx.formatRange(_ctx.state.date.quickSelectRange),islink:"",onClick:_cache[4]||(_cache[4]=$event=>_ctx.open('range','quickSelectRange'))},null,8,_hoisted_6)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.custom")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customDefault'),desc:_ctx.formatFullDate(_ctx.state.date.customDefault),islink:"",onClick:_cache[5]||(_cache[5]=$event=>_ctx.open('single','customDefault'))},null,8,_hoisted_7),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customRange'),desc:_ctx.formatFullDate(_ctx.state.date.customRange),islink:"",onClick:_cache[6]||(_cache[6]=$event=>_ctx.open('single','customRange'))},null,8,_hoisted_8),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customMaxRange'),desc:_ctx.formatRange(_ctx.state.date.customMaxRange),islink:"",onClick:_cache[7]||(_cache[7]=$event=>_ctx.open('range','customMaxRange'))},null,8,_hoisted_9),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customConfirm'),desc:_ctx.formatRange(_ctx.state.date.customConfirm),islink:"",onClick:_cache[8]||(_cache[8]=$event=>_ctx.open('range','customConfirm'))},null,8,_hoisted_10),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customDayText'),desc:_ctx.formatRange(_ctx.state.date.customDayText),islink:"",onClick:_cache[9]||(_cache[9]=$event=>_ctx.open('range','customDayText'))},null,8,_hoisted_11),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.weekFirstDay'),desc:_ctx.formatFullDate(_ctx.state.date.weekFirstDay),islink:"",onClick:_cache[10]||(_cache[10]=$event=>_ctx.open('single','weekFirstDay'))},null,8,_hoisted_12),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customPosition'),desc:_ctx.formatFullDate(_ctx.state.date.customPosition),islink:"",onClick:_cache[11]||(_cache[11]=$event=>_ctx.open('single','customPosition'))},null,8,_hoisted_13),createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('cellTitle.customCss'),desc:_ctx.formatFullDate(_ctx.state.date.customCss),islink:"",onClick:_cache[12]||(_cache[12]=$event=>_ctx.open('single','customCss'))},null,8,_hoisted_14)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.tiled")),1),createBaseVNode("quark-calendar",{tiled:true,maxdate:_ctx.state.tiledMaxDate,mindate:_ctx.state.tiledMinDate,hideconfirm:"",false:""},null,8,_hoisted_15),createBaseVNode("quark-calendar",{class:normalizeClass(_ctx.state.isCss?'custom-css':''),ref:"calendarRef",open:_ctx.state.visible,type:_ctx.state.type,round:_ctx.state.round,position:_ctx.state.position,mindate:_ctx.state.minDate,maxdate:_ctx.state.maxDate,maxrange:_ctx.state.maxRange,formatter:_ctx.state.formatter,hideconfirm:_ctx.state.hideConfirm,confirmtext:_ctx.state.confirmText,weekfirstday:_ctx.state.weekFirstDay,confirmdisabledtext:_ctx.state.confirmDisabledText,onClose:_cache[13]||(_cache[13]=(...args)=>_ctx.close&&_ctx.close(...args)),onConfirm:_cache[14]||(_cache[14]=({detail})=>_ctx.confirm(detail))},null,42,_hoisted_16)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.1ec8c39a.js b/demo/assets/demo-legacy.1ec8c39a.js new file mode 100644 index 000000000..52e04ee14 --- /dev/null +++ b/demo/assets/demo-legacy.1ec8c39a.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-badge {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("grid");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本使用",column:"自定义列数",square:"正方形格子",border:"无边框",custom:"自定义内容",text:"文字"},"en-US":{basic:"Basic Usage",column:"Custom Column",square:"Square Cell",border:"No Border",custom:"Custom Content",text:"text"}});});return{translate};}});const _hoisted_1={class:"demo demo-badge"};const _hoisted_2=["text"];const _hoisted_3=["text"];const _hoisted_4=["text"];const _hoisted_5=["text"];const _hoisted_6={column:"3"};const _hoisted_7=["text"];const _hoisted_8=["text"];const _hoisted_9=["text"];const _hoisted_10=["text"];const _hoisted_11=["text"];const _hoisted_12=["text"];const _hoisted_13={column:"3",square:""};const _hoisted_14=["text"];const _hoisted_15=["text"];const _hoisted_16=["text"];const _hoisted_17=["text"];const _hoisted_18=["text"];const _hoisted_19=["text"];const _hoisted_20={noborder:""};const _hoisted_21=["text"];const _hoisted_22=["text"];const _hoisted_23=["text"];const _hoisted_24=["text"];const _hoisted_25=/*#__PURE__*/createBaseVNode("quark-grid",{column:"3"},[/*#__PURE__*/createBaseVNode("quark-grid-item",null,[/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",style:{"width":"40px"}})]),/*#__PURE__*/createBaseVNode("quark-grid-item",null,[/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",style:{"width":"40px"}})]),/*#__PURE__*/createBaseVNode("quark-grid-item",null,[/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",style:{"width":"40px"}})])],-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-grid",null,[createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_2),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_3),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_4),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_5)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("column")),1),createBaseVNode("quark-grid",_hoisted_6,[createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_7),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_8),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_9),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_10),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_11),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_12)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("square")),1),createBaseVNode("quark-grid",_hoisted_13,[createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_14),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_15),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_16),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_17),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_18),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_19)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("border")),1),createBaseVNode("quark-grid",_hoisted_20,[createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_21),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_22),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_23),createBaseVNode("quark-grid-item",{icon:"https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png",text:_ctx.translate('text')},null,8,_hoisted_24)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("custom")),1),_hoisted_25]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.29e89f7b.js b/demo/assets/demo-legacy.29e89f7b.js new file mode 100644 index 000000000..35b7e8ab6 --- /dev/null +++ b/demo/assets/demo-legacy.29e89f7b.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".action-sheet-demo .demo-buttons quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.action-sheet-demo .demo-buttons {\n margin-bottom: 24px;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var _export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,ActionSheet,Toast,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;ActionSheet=module.A;Toast=module.T;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("actionsheet");const _sfc_main=createDemo({props:{},setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法",customStyle:"自定义样式",title:"带标题",cancel:"带取消按钮",titleStyle:"标题样式",optionStyle:"选项样式",cancelStyle:"取消按钮样式",options:["选项一","选项二","选项三"],titleTxt:"我是标题信息",maskClick:"蒙版点击"},"en-US":{basic:"Basic Usage",customStyle:"Custom Style",title:"Title",cancel:"Cancel",titleStyle:"Title Style",optionStyle:"Option Style",cancelStyle:"Cancel Style",options:["Option 1","Option 2","Option 3"],titleTxt:"Title Message",maskClick:"Mask Click"}});});const showBase=()=>{ActionSheet({actions:[{name:`${translate("options")[0]}`},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],select:(index,action)=>{Toast.text(action.name);}});};const showTitle=()=>{ActionSheet({title:`${translate("titleTxt")}`,actions:[{name:`${translate("options")[0]}`},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],select:(index,action)=>{Toast.text(action.name);}});};const showCancel=()=>{ActionSheet({title:`${translate("titleTxt")}`,actions:[{name:`${translate("options")[0]}`},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],cancelText:`${translate("cancel")}`,select:(index,action)=>{Toast.text(action.name);},cancel:()=>{Toast.text(`${translate("cancel")}`);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};const showTitleCustom=()=>{ActionSheet({title:`${translate("titleTxt")}`,titleColor:"red",titleFontSize:20,actions:[{name:`${translate("options")[0]}`},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],select:(index,action)=>{Toast.text(action.name);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};const showActionCustom=()=>{ActionSheet({title:`${translate("titleTxt")}`,actions:[{name:`${translate("options")[0]}`,color:"#999",fontSize:20},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],select:(index,action)=>{Toast.text(action.name);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};const showCancelCustom=()=>{ActionSheet({title:`${translate("titleTxt")}`,cancelText:`${translate("cancel")}`,actions:[{name:`${translate("options")[0]}`},{name:`${translate("options")[1]}`},{name:`${translate("options")[2]}`}],cancelTextColor:"red",select:(index,action)=>{Toast.text(action.name);},cancel:()=>{Toast.text(`${translate("cancel")}`);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};return{translate,showBase,showTitle,showCancel,showTitleCustom,showActionCustom,showCancelCustom};}});const _hoisted_1={class:"demo no-padding action-sheet-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6=["title"];const _hoisted_7=["title"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.showBase&&_ctx.showBase(...args)),title:_ctx.translate('basic')},null,8,_hoisted_2),createBaseVNode("quark-cell",{type:"primary",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.showTitle&&_ctx.showTitle(...args)),title:_ctx.translate('title')},null,8,_hoisted_3),createBaseVNode("quark-cell",{type:"primary",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.showCancel&&_ctx.showCancel(...args)),title:_ctx.translate('cancel')},null,8,_hoisted_4)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customStyle")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",onClick:_cache[3]||(_cache[3]=(...args)=>_ctx.showTitleCustom&&_ctx.showTitleCustom(...args)),title:_ctx.translate('titleStyle')},null,8,_hoisted_5),createBaseVNode("quark-cell",{type:"primary",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.showActionCustom&&_ctx.showActionCustom(...args)),title:_ctx.translate('optionStyle')},null,8,_hoisted_6),createBaseVNode("quark-cell",{type:"primary",onClick:_cache[5]||(_cache[5]=(...args)=>_ctx.showCancelCustom&&_ctx.showCancelCustom(...args)),title:_ctx.translate('cancelStyle')},null,8,_hoisted_7)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.2c4d2ca2.js b/demo/assets/demo-legacy.2c4d2ca2.js new file mode 100644 index 000000000..4fe11095f --- /dev/null +++ b/demo/assets/demo-legacy.2c4d2ca2.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="\nquark-icon[data-v-a092b524] {\n margin-right: 0;\n}\n.custom[data-v-a092b524] {\n}\nspan[data-v-a092b524] {\n margin: 0;\n}\n";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./index-legacy.d9d5991e.js','./index-legacy.378a587f.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock,pushScopeId,popScopeId;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;pushScopeId=module.p;popScopeId=module.q;},function(){},function(){}],execute:function(){var demo_vue_vue_type_style_index_0_scoped_true_lang='';const{createDemo,translate}=createComponent("tabbar");const _sfc_main=createDemo({setup(){const data=ref({activeIndex:0,img1:"https://m.hellobike.com/resource/helloyun/18625/MJ7Tr_src=http___inews.gtimg.com_newsapp_bt_0_12536239782_641.jpg&refer=http___inews.gtimg.jpeg",img2:"https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png"});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",noicon:"不带图标",name:"默认激活菜单",badge:"徽标提示",color:"自定义颜色",event:"自定义切换事件(可制定路由切换)",fixed:"固定底部"},tabbar:{home:"首页",user:"我的",tel:"联系"}},"en-US":{title:{basic:"Basic Usage",noicon:"No Icon",name:"Default Active menu",badge:"Badge Tips",color:"Custom Color",event:"Custom Change Event",fixed:"Fixed"},tabbar:{home:"Home",user:"User",tel:"Tel"}}});});const onChange=({detail})=>{Toast.text(`当前选中：${detail.value}`);};return{data,onChange,translate};}});const _withScopeId=n=>(pushScopeId("data-v-a092b524"),n=n(),popScopeId(),n);const _hoisted_1={class:"demo no-padding"};const _hoisted_2=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-home",{size:"20"},null,-1));const _hoisted_3=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"20"},null,-1));const _hoisted_4=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-tel",{size:"20"},null,-1));const _hoisted_5={active:"2"};const _hoisted_6={name:"home"};const _hoisted_7=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-home",{size:"20"},null,-1));const _hoisted_8={name:"user"};const _hoisted_9=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"20"},null,-1));const _hoisted_10={name:"tel"};const _hoisted_11=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-tel",{size:"20"},null,-1));const _hoisted_12=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-home",{size:"20"},null,-1));const _hoisted_13=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-user",{size:"20"},null,-1));const _hoisted_14=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-icon-tel",{size:"20"},null,-1));function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-tabbar",{onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange&&_ctx.onChange(...args))},[createBaseVNode("quark-tabbar-item",null,[_hoisted_2,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.home")),1)]),createBaseVNode("quark-tabbar-item",null,[_hoisted_3,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.user")),1)]),createBaseVNode("quark-tabbar-item",null,[_hoisted_4,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.tel")),1)])],32),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.noicon")),1),createBaseVNode("quark-tabbar",null,[createBaseVNode("quark-tabbar-item",null,toDisplayString(_ctx.translate("tabbar.home")),1),createBaseVNode("quark-tabbar-item",null,toDisplayString(_ctx.translate("tabbar.user")),1),createBaseVNode("quark-tabbar-item",null,toDisplayString(_ctx.translate("tabbar.tel")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.name")),1),createBaseVNode("quark-tabbar",_hoisted_5,[createBaseVNode("quark-tabbar-item",_hoisted_6,[_hoisted_7,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.home")),1)]),createBaseVNode("quark-tabbar-item",_hoisted_8,[_hoisted_9,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.user")),1)]),createBaseVNode("quark-tabbar-item",_hoisted_10,[_hoisted_11,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.tel")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.fixed")),1),createBaseVNode("quark-tabbar",{onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.onChange&&_ctx.onChange(...args)),fixed:""},[createBaseVNode("quark-tabbar-item",null,[_hoisted_12,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.home")),1)]),createBaseVNode("quark-tabbar-item",null,[_hoisted_13,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.user")),1)]),createBaseVNode("quark-tabbar-item",null,[_hoisted_14,createBaseVNode("div",null,toDisplayString(_ctx.translate("tabbar.tel")),1)])],32)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render],['__scopeId',"data-v-a092b524"]]));}};});})(); diff --git a/demo/assets/demo-legacy.3a6a67b0.js b/demo/assets/demo-legacy.3a6a67b0.js new file mode 100644 index 000000000..7be936c0c --- /dev/null +++ b/demo/assets/demo-legacy.3a6a67b0.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="\n.pull-content[data-v-453c7618] {\n padding: 16px;\n height: 475px;\n}\n.refresh-text[data-v-453c7618] {\n font-size: 14px;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n padding-bottom: 16px;\n box-sizing: border-box;\n color: #879099;\n}\n.refresh-text img[data-v-453c7618] {\n width: 20px;\n height: 20px;\n margin-right: 4px;\n}\n";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createTextVNode,Toast,openBlock,pushScopeId,popScopeId;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createTextVNode=module.h;Toast=module.T;openBlock=module.b;pushScopeId=module.p;popScopeId=module.q;}],execute:function(){var demo_vue_vue_type_style_index_0_scoped_true_lang='';const{createDemo,translate}=createComponent("pullrefresh");const _sfc_main=createDemo({setup(){const data=ref({loading1:false,loading2:false,loading3:false,count1:0,count2:0,count3:0});onBeforeMount(()=>{useTranslate({"zh-CN":{darkBackground:"深色背景",lightBackground:"浅色背景",customContent:"自定义内容",tip:"下拉提示",constantRefresh:"松开立即刷新",refreshing:"正在刷新数据...",refreshCount:"刷新次数",refreshSuccess:"刷新成功"},"en-US":{darkBackground:"Dark Background",lightBackground:"Light Background",customContent:"Custom Content",tip:"Drop Down Prompt",constantRefresh:"Release To Refresh Now",refreshing:"Refreshing...",refreshCount:"Number Of Refreshes ",refreshSuccess:"Refresh Success"}});});const onFresh1=()=>{data.value.loading1=true;setTimeout(()=>{Toast.success(`${translate("refreshSuccess")}`);data.value.loading1=false;data.value.count1++;},1000);};const onFresh2=()=>{data.value.loading2=true;setTimeout(()=>{Toast.success(`${translate("refreshSuccess")}`);data.value.loading2=false;data.value.count2++;},1000);};const onFresh3=()=>{data.value.loading3=true;setTimeout(()=>{Toast.success(`${translate("refreshSuccess")}`);data.value.loading3=false;data.value.count3++;},1000);};return{data,onFresh1,onFresh2,onFresh3,translate};}});const _withScopeId=n=>(pushScopeId("data-v-453c7618"),n=n(),popScopeId(),n);const _hoisted_1={class:"demo no-padding"};const _hoisted_2=["label"];const _hoisted_3=["loading"];const _hoisted_4={slot:"content",class:"pull-content"};const _hoisted_5=["label"];const _hoisted_6=["loading"];const _hoisted_7={slot:"content",class:"pull-content"};const _hoisted_8=["label"];const _hoisted_9=["loading"];const _hoisted_10={slot:"content",class:"pull-content"};const _hoisted_11={class:"refresh-text",slot:"pulling"};const _hoisted_12=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/18625/3OOq2_down.svg"},null,-1));const _hoisted_13={class:"refresh-text",slot:"loosing"};const _hoisted_14=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/18625/ImS4S_up.svg"},null,-1));const _hoisted_15={class:"refresh-text",slot:"loading"};const _hoisted_16={size:"20",type:"circular"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("quark-tabs",null,[createBaseVNode("quark-tab-content",{label:_ctx.translate('darkBackground')},[createBaseVNode("quark-pull-refresh",{dark:"",loading:_ctx.data.loading2,onRefresh:_cache[0]||(_cache[0]=(...args)=>_ctx.onFresh2&&_ctx.onFresh2(...args))},[createBaseVNode("div",_hoisted_4,toDisplayString(_ctx.translate("refreshCount"))+": "+toDisplayString(_ctx.data.count2),1)],40,_hoisted_3)],8,_hoisted_2),createBaseVNode("quark-tab-content",{label:_ctx.translate('lightBackground')},[createBaseVNode("quark-pull-refresh",{loading:_ctx.data.loading1,onRefresh:_cache[1]||(_cache[1]=(...args)=>_ctx.onFresh1&&_ctx.onFresh1(...args))},[createBaseVNode("div",_hoisted_7,toDisplayString(_ctx.translate("refreshCount"))+": "+toDisplayString(_ctx.data.count1),1)],40,_hoisted_6)],8,_hoisted_5),createBaseVNode("quark-tab-content",{label:_ctx.translate('customContent')},[createBaseVNode("quark-pull-refresh",{loading:_ctx.data.loading3,onRefresh:_cache[2]||(_cache[2]=(...args)=>_ctx.onFresh3&&_ctx.onFresh3(...args))},[createBaseVNode("div",_hoisted_10,toDisplayString(_ctx.translate("refreshCount"))+": "+toDisplayString(_ctx.data.count3),1),createBaseVNode("div",_hoisted_11,[_hoisted_12,createTextVNode(toDisplayString(_ctx.translate("tip")),1)]),createBaseVNode("div",_hoisted_13,[_hoisted_14,createTextVNode(toDisplayString(_ctx.translate("constantRefresh")),1)]),createBaseVNode("div",_hoisted_15,[createBaseVNode("quark-loading",_hoisted_16,toDisplayString(_ctx.translate("refreshing")),1)])],40,_hoisted_9)],8,_hoisted_8)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render],['__scopeId',"data-v-453c7618"]]));}};});})(); diff --git a/demo/assets/demo-legacy.3e23b076.js b/demo/assets/demo-legacy.3e23b076.js new file mode 100644 index 000000000..b16dd11d7 --- /dev/null +++ b/demo/assets/demo-legacy.3e23b076.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".swipe-demo quark-swipe-item > div {\n width: 100%;\n height: 200px;\n color: #fff;\n font-size: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.swipe-demo quark-swipe-item:nth-child(odd) > div {\n background-color: #66c6f2;\n}\n.swipe-demo quark-swipe-item:nth-child(even) > div {\n background-color: #39a9ed;\n}\n.swipe-demo .custom-indicator {\n position: absolute;\n right: 5px;\n bottom: 5px;\n padding: 2px 5px;\n color: #fff;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.1);\n z-index: 2;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createStaticVNode,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createStaticVNode=module.e;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("swipe");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本使用",indicator:"圆形指示器",auto:"自动播放",settings:"设置默认选中的swipeItem",slider:"自定义滑块大小",color:"设置指示器颜色",custom:"自定义指示器"},"en-US":{basic:"Basic Usage",indicator:"Circular Indicator",auto:"Auto PLay",settings:"Set Default Swipe Item",slider:"Custom Slider Size",color:"Set Indicator Color",custom:"Custom Indicator"}});});const onChange=e=>{};const customChange=e=>{const indicator=document.getElementById("indicator");indicator.innerHTML=`${e.detail.index+1} / 4`;};return{onChange,customChange,translate};}});const _hoisted_1={class:"demo swipe-demo",style:{"padding-left":"0","padding-right":"0"}};const _hoisted_2=/*#__PURE__*/createBaseVNode("quark-swipe",{inactivecolor:"#fff"},[/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"1")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"2")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"3")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"4")])],-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("quark-swipe",{type:"round",inactivecolor:"#fff"},[/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"1")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"2")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"3")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"4")])],-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"1")],-1);const _hoisted_5=/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"2")],-1);const _hoisted_6=/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"3")],-1);const _hoisted_7=/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"4")],-1);const _hoisted_8=[_hoisted_4,_hoisted_5,_hoisted_6,_hoisted_7];const _hoisted_9=/*#__PURE__*/createBaseVNode("quark-swipe",{defaultindex:2},[/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"1")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"2")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"3")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"4")])],-1);const _hoisted_10=/*#__PURE__*/createStaticVNode("
1
2
3
4
",1);const _hoisted_11=/*#__PURE__*/createBaseVNode("quark-swipe",{activecolor:"red"},[/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"1")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"2")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"one"},"3")]),/*#__PURE__*/createBaseVNode("quark-swipe-item",null,[/*#__PURE__*/createBaseVNode("div",{class:"two"},"4")])],-1);const _hoisted_12=/*#__PURE__*/createStaticVNode("
1
2
3
4
1 / 4
",5);const _hoisted_17=[_hoisted_12];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("indicator")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("auto")),1),createBaseVNode("quark-swipe",{id:"quark-swipe-event",autoplay:"",onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange&&_ctx.onChange(...args))},_hoisted_8,32),createBaseVNode("h2",null,toDisplayString(_ctx.translate("settings")),1),_hoisted_9,createBaseVNode("h2",null,toDisplayString(_ctx.translate("slider")),1),_hoisted_10,createBaseVNode("h2",null,toDisplayString(_ctx.translate("color")),1),_hoisted_11,createBaseVNode("h2",null,toDisplayString(_ctx.translate("custom")),1),createBaseVNode("quark-swipe",{id:"custom-indicator",onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.customChange&&_ctx.customChange(...args))},_hoisted_17,32)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.428d3810.js b/demo/assets/demo-legacy.428d3810.js new file mode 100644 index 000000000..d799c56ba --- /dev/null +++ b/demo/assets/demo-legacy.428d3810.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".popup-demo .demo-buttons quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.popup-demo .demo-buttons {\n margin-bottom: 24px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,Toast,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;Toast=module.T;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("popup");const _sfc_main=createDemo({setup(){const openCenter=ref(false);const openTop=ref(false);const openBottom=ref(false);const openLeft=ref(false);const openRight=ref(false);const openRound=ref(false);const openCloseable=ref(false);onBeforeMount(()=>{useTranslate({"zh-CN":{position:"不同位置",topPopup:"顶部弹框",bottomPopup:"底部弹窗",leftPopup:"左侧弹框",rightPopup:"右侧弹窗",centerPopup:"居中显示",firstLine:"第一行",secondLine:"第二行",thirdLine:"第三行",forthLine:"第四行",fifthLine:"第五行",sixthLine:"第六行",style:"样式",roundStyle:"圆角样式",showCloseTitle:"显示关闭按钮",closePopup:"点我关闭弹框",tip:"弹层消失回调"},"en-US":{position:"Different Position",topPopup:"Top Popup",bottomPopup:"Bottom Popup",leftPopup:"Left Popup",rightPopup:"Right Popup",centerPopup:"Center Popup",firstLine:"First Line",secondLine:"Second Line",thirdLine:"Third Line",forthLine:"Forth Line",fifthLine:"Fifth Line",sixthLine:"Six Line",style:"Style",roundStyle:"Rounded Style",showCloseTitle:"Show Close Title",closePopup:"Close Popup",tip:"Popup layer disappears callback"}});});onMounted(()=>{document.getElementById("popup-top").addEventListener("close",()=>{open.value=false;Toast.text(`${translate("tip")}`);});});const showTopPopup=()=>{openTop.value=true;};const showLeftPopup=()=>{openLeft.value=true;};const showRightPopup=()=>{openRight.value=true;};const showBottomPopup=()=>{openBottom.value=true;};const showCenterPopup=()=>{openCenter.value=true;};const showRoundPopup=()=>{openRound.value=true;};const showCloseablePopup=()=>{openCloseable.value=true;};const closeTopPopup=()=>{openTop.value=false;};const closedTopPopup=()=>{console.log("closedTopPopup");};const openedTopPopup=()=>{console.log("openedTopPopup");};const closeLeftPopup=()=>{openLeft.value=false;};const closeRightPopup=()=>{openRight.value=false;};const closeBottomPopup=()=>{openBottom.value=false;};const closeCenterPopup=()=>{openCenter.value=false;};const closeRoundPopup=()=>{openRound.value=false;};const closeCloseablePopup=()=>{openCloseable.value=false;};const contentClick=()=>{openRound.value=false;};return{openCenter,openTop,openBottom,openLeft,openRight,openRound,openCloseable,showTopPopup,showLeftPopup,showRightPopup,showBottomPopup,showCenterPopup,showRoundPopup,showCloseablePopup,closeTopPopup,closedTopPopup,openedTopPopup,closeLeftPopup,closeRightPopup,closeBottomPopup,closeCenterPopup,closeRoundPopup,closeCloseablePopup,contentClick,translate};}});const _hoisted_1={class:"demo no-padding popup-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6=["title"];const _hoisted_7=["open"];const _hoisted_8=["open"];const _hoisted_9=["open"];const _hoisted_10=["open"];const _hoisted_11=["open"];const _hoisted_12=["title"];const _hoisted_13=["title"];const _hoisted_14=["open"];const _hoisted_15=["open"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("position")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.showTopPopup&&_ctx.showTopPopup(...args)),title:_ctx.translate('topPopup')},null,8,_hoisted_2),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.showBottomPopup&&_ctx.showBottomPopup(...args)),title:_ctx.translate('bottomPopup')},null,8,_hoisted_3),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.showLeftPopup&&_ctx.showLeftPopup(...args)),title:_ctx.translate('leftPopup')},null,8,_hoisted_4),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[3]||(_cache[3]=(...args)=>_ctx.showRightPopup&&_ctx.showRightPopup(...args)),title:_ctx.translate('rightPopup')},null,8,_hoisted_5),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.showCenterPopup&&_ctx.showCenterPopup(...args)),title:_ctx.translate('centerPopup')},null,8,_hoisted_6)]),createBaseVNode("quark-popup",{id:"popup-top",position:"top",open:_ctx.openTop,onClose:_cache[5]||(_cache[5]=(...args)=>_ctx.closeTopPopup&&_ctx.closeTopPopup(...args)),onClosed:_cache[6]||(_cache[6]=(...args)=>_ctx.closedTopPopup&&_ctx.closedTopPopup(...args)),onOpened:_cache[7]||(_cache[7]=(...args)=>_ctx.openedTopPopup&&_ctx.openedTopPopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_7),createBaseVNode("quark-popup",{id:"popup-left",position:"left",open:_ctx.openLeft,onClose:_cache[8]||(_cache[8]=(...args)=>_ctx.closeLeftPopup&&_ctx.closeLeftPopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_8),createBaseVNode("quark-popup",{id:"popup-bottom",position:"bottom",open:_ctx.openBottom,onClose:_cache[9]||(_cache[9]=(...args)=>_ctx.closeBottomPopup&&_ctx.closeBottomPopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_9),createBaseVNode("quark-popup",{id:"popup-right",position:"right",open:_ctx.openRight,onClose:_cache[10]||(_cache[10]=(...args)=>_ctx.closeRightPopup&&_ctx.closeRightPopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_10),createBaseVNode("quark-popup",{id:"popup-center",position:"center",open:_ctx.openCenter,onClose:_cache[11]||(_cache[11]=(...args)=>_ctx.closeCenterPopup&&_ctx.closeCenterPopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1)],40,_hoisted_11),createBaseVNode("h2",null,toDisplayString(_ctx.translate("style")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[12]||(_cache[12]=(...args)=>_ctx.showRoundPopup&&_ctx.showRoundPopup(...args)),title:_ctx.translate('roundStyle')},null,8,_hoisted_12),createBaseVNode("quark-cell",{islink:"",onClick:_cache[13]||(_cache[13]=(...args)=>_ctx.showCloseablePopup&&_ctx.showCloseablePopup(...args)),title:_ctx.translate('showCloseTitle')},null,8,_hoisted_13)]),createBaseVNode("quark-popup",{id:"popup-round",position:"bottom",round:"",open:_ctx.openRound,onClose:_cache[15]||(_cache[15]=(...args)=>_ctx.closeRoundPopup&&_ctx.closeRoundPopup(...args))},[createBaseVNode("div",{style:{"margin-top":"20px"},onClick:_cache[14]||(_cache[14]=(...args)=>_ctx.contentClick&&_ctx.contentClick(...args))},toDisplayString(_ctx.translate("closePopup")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_14),createBaseVNode("quark-popup",{id:"popup-closeable",position:"bottom",closeable:"",round:"",open:_ctx.openCloseable,onClose:_cache[16]||(_cache[16]=(...args)=>_ctx.closeCloseablePopup&&_ctx.closeCloseablePopup(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("firstLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("secondLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("thirdLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("forthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("fifthLine")),1),createBaseVNode("div",null,toDisplayString(_ctx.translate("sixthLine")),1)],40,_hoisted_15)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.45422b3e.js b/demo/assets/demo-legacy.45422b3e.js new file mode 100644 index 000000000..e343da7a2 --- /dev/null +++ b/demo/assets/demo-legacy.45422b3e.js @@ -0,0 +1,4 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".toast-demo quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.toast-demo .quark-cell {\n padding: 13px 16px;\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px 7px #edeef1;\n font-size: 14px;\n color: #666;\n margin: 10px 0;\n box-sizing: border-box;\n cursor: pointer;\n display: grid;\n justify-content: space-between;\n grid-template-columns: 1fr 20px;\n}\n.toast-demo .quark-cell__title {\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n flex: 1;\n}\n.toast-demo .flex {\n display: flex;\n align-items: center;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("toast");const _sfc_main=createDemo({setup(){const tag=ref(null);onBeforeMount(()=>{useTranslate({"zh-CN":{top:"顶部展示",bottom:"底部展示",position:"Toast 显示位置",functionCall:"函数式调用",closeCallback:"关闭后回调函数",textTip:"文字提示",horizontalLoadingTip:"水平方向的加载图标",successTip:"成功提示",errorTip:"失败提示",warningTip:"警告提示",loadingTip:"加载提示",networkTip:"网络失败，请稍后再试～",executeCallback:"回调函数执行",close:"三秒后关闭"},"en-US":{top:"Show on top",bottom:"Show on bottom",position:"Toast position",functionCall:"Function Call",closeCallback:"Close Callback",textTip:"Text Tip",successTip:"Success Tip",errorTip:"Error Tip",warningTip:"Warning Tip",loadingTip:"Loading Tip",networkTip:"Network failed, please try again later~",executeCallback:"Execute Callback",close:"Close after three seconds"}});});const cbClick=()=>{Toast.text(`${translate("networkTip")}`,{close:()=>Toast.text(`${translate("executeCallback")}`)});};const handleTextClick=()=>{Toast.text(`${translate("networkTip")}`);};const handleTextTopClick=()=>{Toast.text(`${translate("networkTip")}`,{position:"top"});};const handleTextBottomClick=()=>{Toast.text(`${translate("networkTip")}`,{position:"bottom"});};const handlehorizontalLoadingClick=()=>{Toast.loading(`${translate("loadingTip")}`,{loadingIconDirection:"horizontal"});};const handleSuccessClick=()=>{Toast.success(`${translate("successTip")}`);};const handleErrorClick=()=>{Toast.error(`${translate("errorTip")}`);};const handleWarningClick=()=>{Toast.warning(`${translate("warningTip")}`);};const handleLoadingClick=()=>{const toast=Toast.loading(`${translate("close")}`,{duration:0,size:40});setTimeout(()=>{toast.hide();},3000);};// const tagClick = () => { +// tag.value.show = true; +// }; +return{handleTextTopClick,handleTextBottomClick,tag,cbClick,handleTextClick,handlehorizontalLoadingClick,handleSuccessClick,handleErrorClick,handleWarningClick,handleLoadingClick,translate};}});const _hoisted_1={class:"demo toast-demo"};const _hoisted_2=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_5=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_6=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_7=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_8=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_9=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);const _hoisted_10=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"20",name:"right"},null,-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("functionCall")),1),createBaseVNode("div",{class:"quark-cell",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.handleTextClick&&_ctx.handleTextClick(...args))},[createBaseVNode("div",null,"Text "+toDisplayString(_ctx.translate("textTip")),1),_hoisted_2]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.handlehorizontalLoadingClick&&_ctx.handlehorizontalLoadingClick(...args))},[createBaseVNode("div",null,"Text "+toDisplayString(_ctx.translate("horizontalLoadingTip")),1),_hoisted_3]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.handleSuccessClick&&_ctx.handleSuccessClick(...args))},[createBaseVNode("div",null,"Success "+toDisplayString(_ctx.translate("successTip")),1),_hoisted_4]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[3]||(_cache[3]=(...args)=>_ctx.handleErrorClick&&_ctx.handleErrorClick(...args))},[createBaseVNode("div",null,"Error "+toDisplayString(_ctx.translate("errorTip")),1),_hoisted_5]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.handleWarningClick&&_ctx.handleWarningClick(...args))},[createBaseVNode("div",null,"Warning "+toDisplayString(_ctx.translate("warningTip")),1),_hoisted_6]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[5]||(_cache[5]=(...args)=>_ctx.handleLoadingClick&&_ctx.handleLoadingClick(...args))},[createBaseVNode("div",null,"Loading "+toDisplayString(_ctx.translate("loadingTip")),1),_hoisted_7]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("position")),1),createBaseVNode("div",{class:"quark-cell",onClick:_cache[6]||(_cache[6]=(...args)=>_ctx.handleTextTopClick&&_ctx.handleTextTopClick(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("top")),1),_hoisted_8]),createBaseVNode("div",{class:"quark-cell",onClick:_cache[7]||(_cache[7]=(...args)=>_ctx.handleTextBottomClick&&_ctx.handleTextBottomClick(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("bottom")),1),_hoisted_9]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("closeCallback")),1),createBaseVNode("div",{class:"quark-cell",onClick:_cache[8]||(_cache[8]=(...args)=>_ctx.cbClick&&_ctx.cbClick(...args))},[createBaseVNode("div",null,toDisplayString(_ctx.translate("closeCallback")),1),_hoisted_10])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.4f5d1758.js b/demo/assets/demo-legacy.4f5d1758.js new file mode 100644 index 000000000..9f44f550a --- /dev/null +++ b/demo/assets/demo-legacy.4f5d1758.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo {\n background: #ffffff;\n}\n.demo .demo-buttons quark-button {\n margin: 8px;\n}\n.demo .flex {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n}\n.demo .flex quark-button {\n margin: 4px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,ref,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;ref=module.r;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("watermark");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{title:{default:"基础用法"},button:{normal:"文字水印",multiLine:"多行水印",image:"图片水印",gap:"缩小间距"}},"en-US":{title:{default:"basic usage"},button:{normal:"Text Watermark",image:"Image Watermark",multiLine:"multiLine Watermark",gap:"change gap"}}});});const watermark=ref(null);const image=ref("");const text=ref("quark-design");const width=ref(120);const height=ref(64);const rotate=ref(-22);const gapx=ref(24);const gapy=ref(48);const changeText=()=>{height.value="64";width.value="120";rotate.value="-22";image.value="";if(watermark.value)watermark.value.setText("quark-design");};const changeImage=()=>{height.value=36;width.value=100;rotate.value=-12;image.value="https://m.hellobike.com/resource/helloyun/16682/o7HKA_image.png?x-oss-process=image/quality,q_80";};const changeMultiText=()=>{height.value=64;width.value=120;rotate.value=-22;image.value="";if(watermark.value)watermark.value.setText(["quark-design","A component library"]);};const changeGap=()=>{gapx.value=12;gapy.value=24;};return{watermark,gapy,gapx,width,height,rotate,image,text,translate,changeText,changeMultiText,changeImage,changeGap};}});const _hoisted_1={class:"demo"};const _hoisted_2=["text","image","width","height","rotate","gapx","gapy"];const _hoisted_3={class:"demo-buttons"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("quark-watermark",{ref:"watermark",text:_ctx.text,class:"demo-watermark",image:_ctx.image,width:_ctx.width,height:_ctx.height,rotate:_ctx.rotate,gapx:_ctx.gapx,gapy:_ctx.gapy},null,8,_hoisted_2),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.default")),1),createBaseVNode("div",_hoisted_3,[createBaseVNode("quark-button",{type:"primary",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.changeText&&_ctx.changeText(...args))},toDisplayString(_ctx.translate("button.normal")),1),createBaseVNode("quark-button",{type:"primary",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.changeImage&&_ctx.changeImage(...args))},toDisplayString(_ctx.translate("button.image")),1),createBaseVNode("quark-button",{type:"primary",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.changeGap&&_ctx.changeGap(...args))},toDisplayString(_ctx.translate("button.gap")),1),createBaseVNode("quark-button",{type:"primary",onClick:_cache[3]||(_cache[3]=(...args)=>_ctx.changeMultiText&&_ctx.changeMultiText(...args))},toDisplayString(_ctx.translate("button.multiLine")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.512f85de.js b/demo/assets/demo-legacy.512f85de.js new file mode 100644 index 000000000..8f5c77b08 --- /dev/null +++ b/demo/assets/demo-legacy.512f85de.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".uploader-demo {\n background-color: #fff !important;\n}\n.uploader-demo quark-button {\n margin-left: 10px;\n}\n.uploader-demo quark-uploader {\n --uploader-border-width: 0px;\n}\n.uploader-demo .closeimg {\n --uploader-delete-top: 0px;\n --uploader-delete-right: 0px;\n --uploader-delete-wrap-width: 14px;\n --uploader-delete-wrap-height: 14px;\n --uploader-delete-background: transparent;\n --uploader-delete-left-radius: 12px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./vue-router-legacy.0b1d6af2.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,Toast,createElementBlock,createBaseVNode,toDisplayString,openBlock,onBeforeRouteLeave;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;Toast=module.T;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;},function(module){onBeforeRouteLeave=module.o;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("uploader");const _sfc_main=createDemo({setup(){const isPreview=ref(null);const preview=ref(null);const preview2=ref(null);const before=ref(null);const uploadStatus=ref(null);const oversizeRef=ref(null);const customPreviewIcon=ref(null);const previewUrls=["https://m.hellobike.com/resource/helloyun/15697/9VgwC_Screenshot_20220215_191457_com.jingyao.easybike.jpg?x-oss-process=image/quality,q_80","https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png"];onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",preview:"文件预览",status:"上传状态",previewMode:"预览模式",limit:"限制上传数量",size:"限制上传大小",custom:"自定义上传样式",customPreviewIcon:"自定义预览删除 icon",file:"上传文件",before:"上传前置",disabled:"禁止上传",toast:{format:"请上传 jpg 格式图片",overSize:"有文件超过1KB了哦"}},"en-US":{basic:"Basic Usage",preview:"File Preview",status:"upload status",previewMode:"File Preview Mode",limit:"Limit Uploads Number",size:"Limit Uploads Size",custom:"Custom Upload Style",customPreviewIcon:"Custom predictive deletion icon",file:"Upload File",before:"Before Uploading",disabled:"Disabled",toast:{format:"Please upload image in jpg format",overSize:"There are files over 1KB"}}});});onMounted(()=>{preview.value.setPreview(previewUrls);preview2.value.setPreview(previewUrls);uploadStatus.value.setPreview(previewUrls);customPreviewIcon.value.setPreview(previewUrls);const tasks=uploadStatus.value.tasks;tasks.forEach((i,index)=>{if(!index){uploadStatus.value.setStatus({...i,status:"uploading"});}});before.value.beforeUpload=beforeUpload;});const sleep=time=>{return new Promise(reslove=>{setTimeout(()=>{reslove(true);},time);});};const beforeUpload=files=>{const r=files.every(file=>file.type==="image/jpg");if(!r){Toast.text(`${translate("toast.format")}`);return false;}return true;};const oversize=({detail:{items,maxsize}})=>{console.log(items,maxsize);Toast.text(`${translate("toast.overSize")}`);};const uploadAction=async(item,status="done")=>{preview.value.setStatus({...item,status:"uploading",message:"上传中"});await sleep(2000);preview.value.setStatus({...item,status});Toast.success("上传成功");};const afterRead=async({detail:file},isDefault)=>{if(isDefault){Toast.text(`success: the file is ${file.file.name}`);return;}if(Array.isArray(file)){for(let i=0;i{uploadStatus.value.setStatus({...file,status:"uploading",message:"上传中"});await sleep(2000);uploadStatus.value.setStatus({...file,status:"failed"});Toast.success(`${file.file.name}上传失败`);};onBeforeRouteLeave(()=>{const nodes=document.querySelectorAll("quark-image-preview ");nodes.forEach(i=>i.open=false);});return{isPreview,preview,preview2,before,uploadStatus,beforeUpload,oversize,oversizeRef,afterRead,translate,afterReadStatus,customPreviewIcon};}});const _hoisted_1={class:"demo uploader-demo"};const _hoisted_2={class:"flex"};const _hoisted_3=["preview"];const _hoisted_4={class:"flex"};const _hoisted_5={class:"flex"};const _hoisted_6=/*#__PURE__*/createBaseVNode("div",{class:"flex"},[/*#__PURE__*/createBaseVNode("quark-uploader",{maxcount:"2",preview:""})],-1);const _hoisted_7={class:"flex"};const _hoisted_8={preview:""};const _hoisted_9={type:"primary",slot:"uploader",icon:"home"};const _hoisted_10={class:"flex closeimg"};const _hoisted_11={preview:"",ref:"customPreviewIcon",closeimg:"https://m.hellobike.com/resource/helloyun/15697/dEYF0_round_close_fill.png?x-oss-process=image/quality,q_80"};const _hoisted_12={preview:"",ref:"before"};const _hoisted_13=/*#__PURE__*/createBaseVNode("quark-uploader",{preview:"",disabled:true},null,-1);const _hoisted_14={class:"flex"};const _hoisted_15={ref:"preview2",preview:"",readonly:""};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-uploader",{onAfterread:_cache[0]||(_cache[0]=val=>_ctx.afterRead(val,true)),preview:_ctx.isPreview},null,40,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("preview")),1),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-uploader",{onAfterread:_cache[1]||(_cache[1]=(...args)=>_ctx.afterRead&&_ctx.afterRead(...args)),ref:"preview",preview:""},null,544)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("status")),1),createBaseVNode("div",_hoisted_5,[createBaseVNode("quark-uploader",{onAfterread:_cache[2]||(_cache[2]=(...args)=>_ctx.afterReadStatus&&_ctx.afterReadStatus(...args)),ref:"uploadStatus",preview:""},null,544)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("limit")),1),_hoisted_6,createBaseVNode("h2",null,toDisplayString(_ctx.translate("size")),1),createBaseVNode("quark-uploader",{maxsize:"1024",onOversize:_cache[3]||(_cache[3]=(...args)=>_ctx.oversize&&_ctx.oversize(...args)),ref:"oversizeRef"},null,544),createBaseVNode("h2",null,toDisplayString(_ctx.translate("custom")),1),createBaseVNode("div",_hoisted_7,[createBaseVNode("quark-uploader",_hoisted_8,[createBaseVNode("quark-button",_hoisted_9,toDisplayString(_ctx.translate("file")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customPreviewIcon")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-uploader",_hoisted_11,null,512)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("before")),1),createBaseVNode("quark-uploader",_hoisted_12,null,512),createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),_hoisted_13,createBaseVNode("h2",null,toDisplayString(_ctx.translate("previewMode")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-uploader",_hoisted_15,null,512)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.55031a9a.js b/demo/assets/demo-legacy.55031a9a.js new file mode 100644 index 000000000..36a965b87 --- /dev/null +++ b/demo/assets/demo-legacy.55031a9a.js @@ -0,0 +1 @@ +;(function(){System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createTextVNode,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createTextVNode=module.h;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("collapse");const _sfc_main=createDemo({props:{},setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法",openState:"打开状态",iconhide:"无icon样式",customTitile:"自定义标题",customIcon:"自定义图标",title:"标题",title1:"标题1",title2:"标题2",content:"生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。"},"en-US":{basic:"Basic Usage",openState:"Open State",iconhide:"Custom Style",customTitile:"Custom titile",customIcon:"Custom Icon",title:"Title",title1:"Title1",title2:"Title2",content:" Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this."}});});return{translate};}});const _hoisted_1={class:"demo no-padding action-sheet-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6=["title"];const _hoisted_7={slot:"title"};const _hoisted_8={style:{"color":"blueviolet"}};const _hoisted_9=["title"];const _hoisted_10=/*#__PURE__*/createBaseVNode("span",{slot:"icon",class:"collapse-icon"},"🎉🎉🎉",-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",null,[createBaseVNode("quark-collapse",{title:_ctx.translate('title1')},toDisplayString(_ctx.translate("content")),9,_hoisted_2),createBaseVNode("quark-collapse",{title:_ctx.translate('title2')},toDisplayString(_ctx.translate("content")),9,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("openState")),1),createBaseVNode("div",null,[createBaseVNode("quark-collapse",{title:_ctx.translate('title'),open:""},toDisplayString(_ctx.translate("content")),9,_hoisted_4)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("iconhide")),1),createBaseVNode("div",null,[createBaseVNode("quark-collapse",{title:_ctx.translate('title'),iconhide:""},toDisplayString(_ctx.translate("content")),9,_hoisted_5)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customTitile")),1),createBaseVNode("div",null,[createBaseVNode("quark-collapse",{title:_ctx.translate('title')},[createBaseVNode("div",_hoisted_7,[createBaseVNode("span",_hoisted_8,toDisplayString(_ctx.translate("title"))+toDisplayString(_ctx.translate("title")),1)]),createTextVNode(" "+toDisplayString(_ctx.translate("content")),1)],8,_hoisted_6)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customIcon")),1),createBaseVNode("div",null,[createBaseVNode("quark-collapse",{title:_ctx.translate('title')},[_hoisted_10,createTextVNode(" "+toDisplayString(_ctx.translate("content")),1)],8,_hoisted_9)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.550d40c0.js b/demo/assets/demo-legacy.550d40c0.js new file mode 100644 index 000000000..138f029e6 --- /dev/null +++ b/demo/assets/demo-legacy.550d40c0.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".stepper-demo .demo {\n width: 100%;\n}\n.stepper-demo .quark-cell {\n padding: 13px 16px;\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px 7px #edeef1;\n font-size: 14px;\n color: #666;\n margin: 10px 0;\n box-sizing: border-box;\n cursor: pointer;\n}\n.stepper-demo .theme {\n --stepper-input-text-color: black;\n --stepper-input-background-color: white;\n --stepper-input-font-size: 18px;\n --stepper-button-border-radius: 50%;\n --stepper-button-border-width: 1px;\n --stepper-plus-background-color: red;\n --stepper-plus-color: white;\n --stepper-minus-background-color: white;\n --stepper-minus-color: #ee0a24;\n --stepper-minus-border-color: #ee0a24;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("stepper");const _sfc_main=createDemo({setup(){const value=ref(1);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",limit:"限制输入范围",steps:"步长设置",interger:"限制输入整数",disabled:"禁用状态",call:"变更回调",css:"css属性"},"en-US":{basic:"Basic Usage",limit:"Limit Input Range",steps:"Steps Setting",interger:"Interger Limit",disabled:"Disabled",call:"Change Call",css:"CSS Style"}});});const changeValue=({detail})=>{value.value=detail.value;};const change=({detail})=>{Toast.text(detail.value);};const blur=({detail})=>{Toast.text("blur");};const focus=({detail})=>{Toast.text("focus");};return{value,changeValue,change,blur,focus,translate};}});const _hoisted_1={class:"demo stepper-demo"};const _hoisted_2={class:"quark-cell"};const _hoisted_3=["value"];const _hoisted_4=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-stepper",{min:"5",max:"12"})],-1);const _hoisted_5=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-stepper",{steps:"2"})],-1);const _hoisted_6=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-stepper",{interger:""})],-1);const _hoisted_7=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-stepper",{disabled:""})],-1);const _hoisted_8={class:"quark-cell"};const _hoisted_9=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-stepper",{class:"theme"})],-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-stepper",{value:_ctx.value,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.changeValue&&_ctx.changeValue(...args))},null,40,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("limit")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("steps")),1),_hoisted_5,createBaseVNode("h2",null,toDisplayString(_ctx.translate("interger")),1),_hoisted_6,createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),_hoisted_7,createBaseVNode("h2",null,toDisplayString(_ctx.translate("call")),1),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-stepper",{onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.change&&_ctx.change(...args))},null,32)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("css")),1),_hoisted_9]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.58840716.js b/demo/assets/demo-legacy.58840716.js new file mode 100644 index 000000000..14ddbc6eb --- /dev/null +++ b/demo/assets/demo-legacy.58840716.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="\n#app .list-demo.no-padding {\n height: 100%;\n}\n.list-list {\n padding: 0 16px;\n height: 60px;\n line-height: 60px;\n margin: 0 16px;\n text-align: center;\n border-bottom: 1px solid rgb(235, 237, 240);\n}\n.list-text {\n font-size: 14px;\n height: 50px;\n line-height: 50px;\n text-align: center;\n box-sizing: border-box;\n color: #879099;\n}\n";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,Fragment,renderList,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;Fragment=module.F;renderList=module.m;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_vue_vue_type_style_index_0_lang='';const{createDemo,translate}=createComponent("list");const _sfc_main=createDemo({setup(){const data=ref({list1:[],list2:[],list3:[],list4:[],loading1:false,loading2:false,loading3:false,loading4:false,finished1:false,finished2:false,finished3:false,finished4:false,error1:false,error2:false,error3:false,error4:false});const onLoad1=()=>{data.value.loading1=true;setTimeout(()=>{for(let i=0;i<10;i++){data.value.list1.push(data.value.list1.length+1);}data.value.loading1=false;if(data.value.list1.length>=40){data.value.finished1=true;}},1000);};const onLoad2=()=>{data.value.error2=false;data.value.loading2=true;setTimeout(()=>{for(let i=0;i<10;i++){data.value.list2.push(data.value.list2.length+1);}if(data.value.list2.length===10){data.value.error2=true;}else{data.value.error2=false;}data.value.loading2=false;if(data.value.list2.length>=40){data.value.finished2=true;}},1000);};const onLoad3=()=>{data.value.loading3=true;setTimeout(()=>{for(let i=0;i<10;i++){data.value.list3.push(data.value.list3.length+1);}data.value.loading3=false;if(data.value.list3.length>=40){data.value.finished3=true;}},1000);};const onLoad4=()=>{data.value.loading4=true;setTimeout(()=>{for(let i=0;i<10;i++){data.value.list4.push(data.value.list4.length+1);}data.value.loading4=false;if(data.value.list4.length>=40){data.value.finished4=true;}},1000);};const onRefresh=()=>{data.value.loading4=true;data.value.list4=[];for(let i=0;i<10;i++){data.value.list4.push(data.value.list4.length+1);}data.value.finished4=false;onLoad4();};onBeforeMount(()=>{useTranslate({"zh-CN":{label:{basic:"基础用法",error:"错误提示",custom:"自定义提示",refresh:"下拉刷新"},message:{finished:"结束提示",error:"出错了, 点击重试",custom:{finished:"自定义的结束提示",error:"自定义的错误提示",loading:"自定义的加载中..."}}},"en-US":{label:{basic:"Basic",error:"Error",custom:"Custom",refresh:"Refresh"},message:{finished:"Finished Message",error:"Something went wrong, please retry",custom:{finished:"Custom Finished Message",error:"Custom Error Message",loading:"Custom Loading..."}}}});});return{data,onLoad1,onLoad2,onLoad3,onLoad4,onRefresh,translate};}});const _hoisted_1={class:"demo list-demo no-padding"};const _hoisted_2={sticky:"",offsettop:"15vw"};const _hoisted_3=["label"];const _hoisted_4=["loading","finished","finishedtext"];const _hoisted_5={slot:"content"};const _hoisted_6=["label"];const _hoisted_7=["loading","error","errortext","finished"];const _hoisted_8={slot:"content"};const _hoisted_9=["label"];const _hoisted_10=["loading","error","finished"];const _hoisted_11={slot:"content"};const _hoisted_12={class:"list-text",slot:"finished"};const _hoisted_13={class:"list-text",slot:"error"};const _hoisted_14={class:"list-text",slot:"loading"};const _hoisted_15={size:"15"};const _hoisted_16=["label"];const _hoisted_17=["loading"];const _hoisted_18={slot:"content",class:"pull-content"};const _hoisted_19=["loading","finished","finishedtext"];const _hoisted_20={slot:"content"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("quark-tabs",_hoisted_2,[createBaseVNode("quark-tab-content",{label:_ctx.translate('label.basic')},[createBaseVNode("quark-list",{onLoad:_cache[0]||(_cache[0]=(...args)=>_ctx.onLoad1&&_ctx.onLoad1(...args)),loading:_ctx.data.loading1,finished:_ctx.data.finished1,finishedtext:_ctx.translate('message.finished')},[createBaseVNode("div",_hoisted_5,[(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.data.list1,item=>{return openBlock(),createElementBlock("div",{key:item,class:"list-list"},toDisplayString(item),1);}),128))])],40,_hoisted_4)],8,_hoisted_3),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.error')},[createBaseVNode("quark-list",{onLoad:_cache[1]||(_cache[1]=(...args)=>_ctx.onLoad2&&_ctx.onLoad2(...args)),onReload:_cache[2]||(_cache[2]=(...args)=>_ctx.onLoad2&&_ctx.onLoad2(...args)),loading:_ctx.data.loading2,error:_ctx.data.error2,errortext:_ctx.translate('message.error'),finished:_ctx.data.finished2},[createBaseVNode("div",_hoisted_8,[(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.data.list2,item=>{return openBlock(),createElementBlock("div",{key:item,class:"list-list"},toDisplayString(item),1);}),128))])],40,_hoisted_7)],8,_hoisted_6),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.custom')},[createBaseVNode("quark-list",{onLoad:_cache[3]||(_cache[3]=(...args)=>_ctx.onLoad3&&_ctx.onLoad3(...args)),loading:_ctx.data.loading3,error:_ctx.data.error3,finished:_ctx.data.finished3},[createBaseVNode("div",_hoisted_11,[(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.data.list3,item=>{return openBlock(),createElementBlock("div",{key:item,class:"list-list"},toDisplayString(item),1);}),128))]),createBaseVNode("div",_hoisted_12,toDisplayString(_ctx.translate("message.custom.finished")),1),createBaseVNode("div",_hoisted_13,toDisplayString(_ctx.translate("message.custom.error")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-loading",_hoisted_15,toDisplayString(_ctx.translate("message.custom.loading")),1)])],40,_hoisted_10)],8,_hoisted_9),createBaseVNode("quark-tab-content",{label:_ctx.translate('label.refresh')},[createBaseVNode("quark-pull-refresh",{loading:_ctx.data.loading4,onRefresh:_cache[5]||(_cache[5]=(...args)=>_ctx.onRefresh&&_ctx.onRefresh(...args))},[createBaseVNode("div",_hoisted_18,[createBaseVNode("quark-list",{onLoad:_cache[4]||(_cache[4]=(...args)=>_ctx.onLoad4&&_ctx.onLoad4(...args)),loading:_ctx.data.loading4,finished:_ctx.data.finished4,finishedtext:_ctx.translate('message.finished')},[createBaseVNode("div",_hoisted_20,[(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.data.list4,item=>{return openBlock(),createElementBlock("div",{key:item,class:"list-list"},toDisplayString(item),1);}),128))])],40,_hoisted_19)])],40,_hoisted_17)],8,_hoisted_16)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.5a729d01.js b/demo/assets/demo-legacy.5a729d01.js new file mode 100644 index 000000000..b82e6b7b3 --- /dev/null +++ b/demo/assets/demo-legacy.5a729d01.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".search-demo .search-content {\n background-color: #fff;\n padding: 6px 12px;\n}\n.search-demo .custom-color {\n --search-background: linear-gradient(135deg, #667eea, #764ba2);\n --search-action-text-color: aqua;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("search");const _sfc_main=createDemo({setup(){const defaultValue=ref("");onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",background:"更改输入框内部及外部的背景样式",color:"自定义颜色",round:"圆角",readonly:"只读",disabled:"禁用",hide:"隐藏取消按钮",show:"显示返回按钮",slot:"自定义按钮",event:"事件绑定",toast:{cancel:"取消",return:"返回",empty:"空"}},"en-US":{basic:"Basic Usage",background:"Change background style",color:"Custom Color",round:"Round",readonly:"Readonly",disabled:"Disabled",hide:"Hide Cancel Button",show:"Show Return Button",slot:"Custom Button",event:"Event Binding",toast:{cancel:"Cancel",return:"Return",empty:"Empty"}}});});const onChange1=({detail})=>{defaultValue.value=detail.value;};const onChange2=({detail})=>{defaultValue.value=detail.value;Toast.text(detail.value||`${translate("toast.empty")}`);};const onChange=({detail})=>{defaultValue.value=detail.value;Toast.text(detail.value||`${translate("toast.empty")}`);};const onFocus=()=>{Toast.text("focus");};const onBlur=()=>{Toast.text("blur");};const onSearch=()=>{Toast.text("search");};const onCancel=()=>{Toast.text(`${translate("toast.cancel")}`);};const onBack=()=>{Toast.text(`${translate("toast.return")}`);};return{defaultValue,onChange1,onChange2,onChange,onFocus,onBlur,onSearch,onCancel,onBack,translate};}});const _hoisted_1={class:"demo no-padding search-demo"};const _hoisted_2={slot:"action"};const _hoisted_3=/*#__PURE__*/createBaseVNode("quark-search",{dark:"",showback:"",hideaction:""},null,-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("quark-search",{class:"custom-color",showback:"",hideaction:"",iconColor:"aqua"},null,-1);const _hoisted_5={shape:"round"};const _hoisted_6={slot:"action"};const _hoisted_7={readonly:""};const _hoisted_8={slot:"action"};const _hoisted_9={disabled:""};const _hoisted_10={slot:"action"};const _hoisted_11=["placeholder"];const _hoisted_12={showback:""};const _hoisted_13={slot:"action"};const _hoisted_14={slot:"action"};const _hoisted_15={slot:"action"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-search",{onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange1&&_ctx.onChange1(...args))},[createBaseVNode("div",_hoisted_2,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])],32),createBaseVNode("h2",null,toDisplayString(_ctx.translate("background")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("color")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("round")),1),createBaseVNode("quark-search",_hoisted_5,[createBaseVNode("div",_hoisted_6,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("readonly")),1),createBaseVNode("quark-search",_hoisted_7,[createBaseVNode("div",_hoisted_8,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),createBaseVNode("quark-search",_hoisted_9,[createBaseVNode("div",_hoisted_10,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("hide")),1),createBaseVNode("quark-search",{hideaction:"",placeholder:_ctx.translate('hide')},null,8,_hoisted_11),createBaseVNode("h2",null,toDisplayString(_ctx.translate("show")),1),createBaseVNode("quark-search",_hoisted_12,[createBaseVNode("div",_hoisted_13,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("slot")),1),createBaseVNode("quark-search",null,[createBaseVNode("div",_hoisted_14,[createBaseVNode("div",null,toDisplayString(_ctx.translate("slot")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("event")),1),createBaseVNode("quark-search",{id:"search-event",showback:"",onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.onChange&&_ctx.onChange(...args)),onFocus:_cache[2]||(_cache[2]=(...args)=>_ctx.onFocus&&_ctx.onFocus(...args)),onBlur:_cache[3]||(_cache[3]=(...args)=>_ctx.onBlur&&_ctx.onBlur(...args)),onSearch:_cache[4]||(_cache[4]=(...args)=>_ctx.onSearch&&_ctx.onSearch(...args)),onCancel:_cache[5]||(_cache[5]=(...args)=>_ctx.onCancel&&_ctx.onCancel(...args)),onBack:_cache[6]||(_cache[6]=(...args)=>_ctx.onBack&&_ctx.onBack(...args))},[createBaseVNode("div",_hoisted_15,[createBaseVNode("div",null,toDisplayString(_ctx.translate("toast.cancel")),1)])],32)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.5dd69fa8.js b/demo/assets/demo-legacy.5dd69fa8.js new file mode 100644 index 000000000..30f8338fb --- /dev/null +++ b/demo/assets/demo-legacy.5dd69fa8.js @@ -0,0 +1,5 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-dialog .custom-footer {\n margin-top: 20px;\n}\n.demo-dialog .custom-footer quark-button {\n background: linear-gradient(270deg, #00d9ff 0%, #0098fe 100%);\n border-radius: 24px;\n width: 100%;\n height: 48px;\n}\n.demo-dialog .dialog-close {\n position: absolute;\n width: 24px;\n height: 24px;\n right: 8px;\n top: 8px;\n cursor: pointer;\n}\n.demo-dialog img {\n width: 288px;\n border-radius: 12px;\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./vue-router-legacy.0b1d6af2.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock,onBeforeRouteLeave;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;},function(module){onBeforeRouteLeave=module.o;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("dialog");// import Dialog from "./index.tsx"; +// import Toast from "../toast"; +const _sfc_main=createDemo({setup(){// ***** 标签调用 +// 标签-组件调用 +const open=ref(false);const open2=ref(false);const open3=ref(false);const open4=ref(false);const open5=ref(false);const open6=ref(false);const open7=ref(false);const open8=ref(false);const open9=ref(false);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",dialogTitle:"标题",alert:"提示弹窗",alertWithoutContent:"提示弹窗（没有内容）",confirm:"确认弹窗",btnvertical:"确认弹窗(按钮垂直排列)",basicDialog:"基础弹窗",showCloseButton:"隐藏关闭按钮",alignLeft:"内容居左对齐",customFooter:"Footer 自定义",noFooter:"Footer 隐藏",title:"这是一句话就能说清楚的确认弹窗，所以只有标题",content:"生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。",text:"代码是写出来给人看的，附带能在机器上运行",okText:"知道了",customTitle:"Title 自定义",noTitle:"Title 隐藏"},"en-US":{basic:"Basic use",dialogTitle:"Title",alert:"Alert",alertWithoutContent:"Alert without content",confirm:"Confirm dialog",btnvertical:"Confirm dialog（vertical button）",basicDialog:"Basic Dialog",showCloseButton:"Hide Close Button",alignLeft:"Align Content To The Left",customFooter:"Custom Footer",noFooter:"Not Show Footer ",title:"This is a confirmation dialog that can be explained clearly in one sentence, so only the title",content:"This is a content",text:"This is custom body. The code is written for people to see, with the addition of running on the machine",okText:"Got it",noTitle:"Title hide",customTitle:"Custom title"}});});onBeforeRouteLeave(()=>{const quarkDialogs=document.querySelectorAll("quark-dialog");quarkDialogs.forEach(i=>i.open=false);});return{open,open2,open3,open4,open5,open6,open7,open8,open9,translate};}});const _hoisted_1={class:"demo demo-dialog"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6=["open","title","content"];const _hoisted_7=["open","title","oktext"];const _hoisted_8=["open","title","content"];const _hoisted_9=["open","title","content"];const _hoisted_10=/*#__PURE__*/createBaseVNode("h2",null,"Title",-1);const _hoisted_11=["title"];const _hoisted_12=["title"];const _hoisted_13=["content","open"];const _hoisted_14={slot:"title",style:{"color":"red","font-size":"16px","margin-bottom":"14px"}};const _hoisted_15=["open","content"];const _hoisted_16=/*#__PURE__*/createBaseVNode("h2",null,"Footer",-1);const _hoisted_17=["title"];const _hoisted_18=["title"];const _hoisted_19=["title","open"];const _hoisted_20={slot:"footer",class:"custom-footer"};const _hoisted_21=["open","title","content"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",isLink:"",title:_ctx.translate('alert'),onClick:_cache[0]||(_cache[0]=$event=>_ctx.open=true)},null,8,_hoisted_2),createBaseVNode("quark-cell",{type:"primary",isLink:"",title:_ctx.translate('alertWithoutContent'),onClick:_cache[1]||(_cache[1]=$event=>_ctx.open2=true)},null,8,_hoisted_3),createBaseVNode("quark-cell",{type:"primary",isLink:"",title:_ctx.translate('confirm'),onClick:_cache[2]||(_cache[2]=$event=>_ctx.open3=true)},null,8,_hoisted_4),createBaseVNode("quark-cell",{type:"primary",isLink:"",title:_ctx.translate('btnvertical'),onClick:_cache[3]||(_cache[3]=$event=>_ctx.open6=true)},null,8,_hoisted_5)]),createBaseVNode("quark-dialog",{type:"confirm",open:_ctx.open,title:_ctx.translate('dialogTitle'),content:_ctx.translate('content'),onConfirm:_cache[4]||(_cache[4]=$event=>_ctx.open=false),onClose:_cache[5]||(_cache[5]=$event=>_ctx.open=false)},null,40,_hoisted_6),createBaseVNode("quark-dialog",{type:"confirm",open:_ctx.open2,title:_ctx.translate('title'),oktext:_ctx.translate('okText'),onConfirm:_cache[6]||(_cache[6]=$event=>_ctx.open2=false),onClose:_cache[7]||(_cache[7]=$event=>_ctx.open2=false)},null,40,_hoisted_7),createBaseVNode("quark-dialog",{open:_ctx.open3,title:_ctx.translate('dialogTitle'),content:_ctx.translate('text'),onClose:_cache[8]||(_cache[8]=$event=>_ctx.open3=false),onConfirm:_cache[9]||(_cache[9]=$event=>_ctx.open3=false),onCancel:_cache[10]||(_cache[10]=$event=>_ctx.open3=false)},null,40,_hoisted_8),createBaseVNode("quark-dialog",{btnvertical:"",open:_ctx.open6,title:_ctx.translate('dialogTitle'),content:_ctx.translate('text'),onClose:_cache[11]||(_cache[11]=$event=>_ctx.open6=false),onConfirm:_cache[12]||(_cache[12]=$event=>_ctx.open6=false),onCancel:_cache[13]||(_cache[13]=$event=>_ctx.open6=false)},null,40,_hoisted_9),_hoisted_10,createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",title:_ctx.translate('customTitle'),onClick:_cache[14]||(_cache[14]=$event=>_ctx.open4=true)},null,8,_hoisted_11),createBaseVNode("quark-cell",{islink:"",title:_ctx.translate('noTitle'),onClick:_cache[15]||(_cache[15]=$event=>_ctx.open5=true)},null,8,_hoisted_12)]),createBaseVNode("quark-dialog",{content:_ctx.translate('content'),open:_ctx.open4,onConfirm:_cache[16]||(_cache[16]=$event=>_ctx.open4=false),onCancel:_cache[17]||(_cache[17]=$event=>_ctx.open4=false),onClose:_cache[18]||(_cache[18]=$event=>_ctx.open4=false)},[createBaseVNode("div",_hoisted_14,toDisplayString(_ctx.translate("customTitle")),1)],40,_hoisted_13),createBaseVNode("quark-dialog",{notitle:"",open:_ctx.open5,content:_ctx.translate('content'),onConfirm:_cache[19]||(_cache[19]=$event=>_ctx.open5=false),onCancel:_cache[20]||(_cache[20]=$event=>_ctx.open5=false),onClose:_cache[21]||(_cache[21]=$event=>_ctx.open5=false)},null,40,_hoisted_15),_hoisted_16,createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",title:_ctx.translate('customFooter'),onClick:_cache[22]||(_cache[22]=$event=>_ctx.open8=true)},null,8,_hoisted_17),createBaseVNode("quark-cell",{islink:"",title:_ctx.translate('noFooter'),onClick:_cache[23]||(_cache[23]=$event=>_ctx.open9=true)},null,8,_hoisted_18)]),createBaseVNode("quark-dialog",{title:_ctx.translate('dialogTitle'),open:_ctx.open8,onClose:_cache[25]||(_cache[25]=$event=>_ctx.open8=false)},[createBaseVNode("div",null,toDisplayString(_ctx.translate("text")),1),createBaseVNode("div",_hoisted_20,[createBaseVNode("quark-button",{type:"primary",onClick:_cache[24]||(_cache[24]=$event=>_ctx.open8=false)},toDisplayString(_ctx.translate("customFooter")),1)])],40,_hoisted_19),createBaseVNode("quark-dialog",{nofooter:"",open:_ctx.open9,title:_ctx.translate('dialogTitle'),content:_ctx.translate('content'),onConfirm:_cache[26]||(_cache[26]=$event=>_ctx.open9=false),onClose:_cache[27]||(_cache[27]=$event=>_ctx.open9=false)},null,40,_hoisted_21)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.6709fcd6.js b/demo/assets/demo-legacy.6709fcd6.js new file mode 100644 index 000000000..3c6df4566 --- /dev/null +++ b/demo/assets/demo-legacy.6709fcd6.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".skeleton-demo .quark-cell {\n display: flex;\n}\n.skeleton-demo quark-switch {\n margin-bottom: 20px;\n}\n.skeleton-demo .demo-preview {\n display: flex;\n}\n.skeleton-demo .demo-preview img {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n margin-right: 16px;\n}\n.skeleton-demo .demo-preview .demo-content h3 {\n margin: 0;\n font-size: 18px;\n line-height: 20px;\n}\n.skeleton-demo .demo-preview .demo-content p {\n margin: 13px 0 0;\n font-size: 14px;\n line-height: 20px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("skeleton");const _sfc_main=createDemo({setup(){const data=ref({checked:false,hide:false});onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",avator:"显示头像、标题",rowwidths:"设置宽度",childComponent:"显示子组件",about:"关于 Quark",des:"Quark 是一款基于 Web Components 的跨框架 UI 组件库。"},"en-US":{basic:"Basic Usage",avator:"Show Avatar、Title",rowwidths:"Set row width",childComponent:"Show childComponent",about:"About Quark",des:"Quark is a cross-frame UI component library based on Web Components."}});});const handleSwitch=e=>{data.value.checked=e.detail.value;data.value.hide=e.detail.value;};return{data,handleSwitch,translate};}});const _hoisted_1={class:"demo skeleton-demo",style:{"background":"#fff"}};const _hoisted_2=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell base-cell"},[/*#__PURE__*/createBaseVNode("quark-skeleton",{row:2})],-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell base-cell"},[/*#__PURE__*/createBaseVNode("quark-skeleton",{title:"",avatar:"",row:2})],-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell base-cell"},[/*#__PURE__*/createBaseVNode("quark-skeleton",{title:"",avatar:"",row:2,rowwidths:"100%,20%"})],-1);const _hoisted_5=["checked"];const _hoisted_6={class:"quark-cell base-cell"};const _hoisted_7=["hide"];const _hoisted_8={class:"demo-preview"};const _hoisted_9=/*#__PURE__*/createBaseVNode("img",{src:"https://m.hellobike.com/resource/helloyun/13459/BI7jn_quark-logo.png",alt:""},null,-1);const _hoisted_10={class:"demo-content"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("avator")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("rowwidths")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("childComponent")),1),createBaseVNode("quark-switch",{checked:_ctx.data.checked,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.handleSwitch&&_ctx.handleSwitch(...args))},null,40,_hoisted_5),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-skeleton",{title:"",avatar:"",row:2,hide:_ctx.data.hide},[createBaseVNode("div",_hoisted_8,[_hoisted_9,createBaseVNode("div",_hoisted_10,[createBaseVNode("h3",null,toDisplayString(_ctx.translate("about")),1),createBaseVNode("p",null,toDisplayString(_ctx.translate("des")),1)])])],8,_hoisted_7)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.68c82c64.js b/demo/assets/demo-legacy.68c82c64.js new file mode 100644 index 000000000..e3040a265 --- /dev/null +++ b/demo/assets/demo-legacy.68c82c64.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".steps-demo .item-wrap {\n padding: 16px;\n background: #fff;\n}\n.steps-demo .item-horizontal {\n padding: 16px 0 0;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("steps");const _sfc_main=createDemo({setup(){const data=ref({title:`${translate("status.doing.title")}`,content:`${translate("status.doing.content")}`,status:"doing"});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基本用法",desc:"标题和描述信息",vertical:"竖向步骤条"},steps:{step1:"步骤一",step2:"步骤二",step3:"步骤三"},status:{done:{title:"已完成",content:"您的订单已经打包完成，商品已发出"},todo:{title:"未开始",content:"收货地址为：杭州市益展商务大厦"},doing:{title:"进行中",content:"您的订单正在配送中..."}}},"en-US":{title:{basic:"Basic Usage",desc:"Title and Description",vertical:"Vertical Steps"},steps:{step1:"Step One",step2:"Step Two",step3:"Step Three"},status:{done:{title:"Finished",content:"Your order has been packed and the item has been dispatched"},todo:{title:"Not Started",content:"The delivery address is: 16F, Yizhan Business Building, Hangzhou"},doing:{title:"Processing",content:"Your order is being shipped..."}}}});});onMounted(()=>{setTimeout(()=>{data.value.title=`${translate("status.done.title")}`;data.value.content=`${translate("status.done.content")}`;data.value.status="done";},5000);});return{data,translate};}});const _hoisted_1={class:"demo no-padding steps-demo"};const _hoisted_2={class:"item-wrap item-horizontal"};const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["title"];const _hoisted_6={class:"item-wrap item-horizontal"};const _hoisted_7=["title","content"];const _hoisted_8=["status","title","content"];const _hoisted_9=["title","content"];const _hoisted_10={class:"item-wrap"};const _hoisted_11={direction:"vertical"};const _hoisted_12=["title","content"];const _hoisted_13=["title","content"];const _hoisted_14=["title","content"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-steps",null,[createBaseVNode("quark-step",{status:"done",title:_ctx.translate('steps.step1'),order:"1"},null,8,_hoisted_3),createBaseVNode("quark-step",{status:"doing",title:_ctx.translate('steps.step2'),order:"2"},null,8,_hoisted_4),createBaseVNode("quark-step",{status:"todo",title:_ctx.translate('steps.step3'),order:"3"},null,8,_hoisted_5)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.desc")),1),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-steps",null,[createBaseVNode("quark-step",{status:"done",title:_ctx.translate('status.done.title'),content:_ctx.translate('status.done.content'),order:"1"},null,8,_hoisted_7),createBaseVNode("quark-step",{status:_ctx.data.status,title:_ctx.data.title,content:_ctx.data.content,order:"2"},null,8,_hoisted_8),createBaseVNode("quark-step",{status:"todo",title:_ctx.translate('status.todo.title'),content:_ctx.translate('status.todo.content'),order:"3"},null,8,_hoisted_9)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.vertical")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-steps",_hoisted_11,[createBaseVNode("quark-step",{status:"done",title:_ctx.translate('status.done.title'),content:_ctx.translate('status.done.content'),order:"1"},null,8,_hoisted_12),createBaseVNode("quark-step",{status:"doing",title:_ctx.translate('status.doing.title'),content:_ctx.translate('status.doing.content'),order:"2"},null,8,_hoisted_13),createBaseVNode("quark-step",{status:"todo",title:_ctx.translate('status.todo.title'),content:_ctx.translate('status.todo.content'),order:"3"},null,8,_hoisted_14)])])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.6b628d23.js b/demo/assets/demo-legacy.6b628d23.js new file mode 100644 index 000000000..dcb7c24bd --- /dev/null +++ b/demo/assets/demo-legacy.6b628d23.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-checkbox .checkbox-container {\n background: #fff;\n padding: 10px;\n border-radius: 4px;\n}\n.demo-checkbox .checkbox-container quark-checkbox {\n margin-right: 20px;\n}\n.demo-checkbox .picked {\n color: #666;\n font-size: 12px;\n margin-top: 15px;\n}\n.demo-checkbox .my-color {\n --checkbox-background: linear-gradient(225deg, #ff918d 0%, #f54640 100%);\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("checkbox");const _sfc_main=createDemo({setup(){const mycheck=ref(true);const mycheckFalse=ref(false);const type1=ref(true);const type2=ref(true);const size1=ref(true);const size2=ref(true);const groupValue=ref([]);const onChange=({detail})=>{mycheck.value=detail.value;};const onChangeFalse=({detail})=>{mycheckFalse.value=detail.value;};const onChangeType1=({detail})=>{type1.value=detail.value;};const onChangeType2=({detail})=>{type2.value=detail.value;};const onChangeSize1=({detail})=>{size1.value=detail.value;};const onChangeSize2=({detail})=>{size2.value=detail.value;};const onGroupChange=({detail})=>{groupValue.value=detail.value;};onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"复选框基础用法",type:"复选框类型",size:"复选框大小",disabled:"复选框禁用状态",group:"复选框群组",selectedColor:"复选框选中颜色自定义"},checked:{true:"勾选",false:"不勾选"},type:{round:"圆形(默认)",square:"方形"},size:{default:"默认形状-大",square:"方形-大"},disabled:{checked:"已选-禁用",unchecked:"未选-禁用"},group:{apple:"苹果",orange:"橘子",banana:"香蕉",selected:"已选: "}},"en-US":{title:{basic:"Basic Usage",type:"Checkbox Type",size:"Checkbox Size",disabled:"Disabled Checkbox",group:"Checkbox Group",selectedColor:"Custom Selected Color"},checked:{true:"Checked",false:"Unchecked"},type:{round:"Round(Default)",square:"Square"},size:{default:"Default Type - Big",square:"Square - Big"},disabled:{checked:"Checked - Disabled",unchecked:"Unchecked - Disabled"},group:{apple:"Apple",orange:"Orange",banana:"Banana",selected:"Selected: "}}});groupValue.value=[`${translate("group.apple")}`,`${translate("group.orange")}`];});return{mycheck,mycheckFalse,type1,type2,size1,size2,onChangeType2,onChangeType1,onChangeSize2,onChangeSize1,groupValue,onChange,onChangeFalse,onGroupChange,translate};}});const _hoisted_1={class:"demo demo-checkbox"};const _hoisted_2={class:"checkbox-container"};const _hoisted_3=["checked"];const _hoisted_4=["checked"];const _hoisted_5={class:"checkbox-container"};const _hoisted_6=["checked"];const _hoisted_7=["checked"];const _hoisted_8={class:"checkbox-container"};const _hoisted_9=["checked"];const _hoisted_10=["checked"];const _hoisted_11={class:"checkbox-container"};const _hoisted_12={checked:"true",disabled:""};const _hoisted_13={checked:"false",disabled:""};const _hoisted_14={class:"checkbox-container"};const _hoisted_15=["value"];const _hoisted_16=["name"];const _hoisted_17=["name"];const _hoisted_18=["name"];const _hoisted_19={className:"picked"};const _hoisted_20={class:"checkbox-container my-color"};const _hoisted_21={checked:true};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-checkbox",{checked:_ctx.mycheck,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange&&_ctx.onChange(...args))},toDisplayString(_ctx.translate("checked.true")),41,_hoisted_3),createBaseVNode("quark-checkbox",{checked:_ctx.mycheckFalse,onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.onChangeFalse&&_ctx.onChangeFalse(...args))},toDisplayString(_ctx.translate("checked.false")),41,_hoisted_4)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.type")),1),createBaseVNode("div",_hoisted_5,[createBaseVNode("quark-checkbox",{checked:_ctx.type1,shape:"round",onChange:_cache[2]||(_cache[2]=(...args)=>_ctx.onChangeType1&&_ctx.onChangeType1(...args))},toDisplayString(_ctx.translate("type.round")),41,_hoisted_6),createBaseVNode("quark-checkbox",{checked:_ctx.type2,shape:"square",onChange:_cache[3]||(_cache[3]=(...args)=>_ctx.onChangeType2&&_ctx.onChangeType2(...args))},toDisplayString(_ctx.translate("type.square")),41,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.size")),1),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-checkbox",{checked:_ctx.size1,shape:"round",size:"big",onChange:_cache[4]||(_cache[4]=(...args)=>_ctx.onChangeSize1&&_ctx.onChangeSize1(...args))},toDisplayString(_ctx.translate("size.default")),41,_hoisted_9),createBaseVNode("quark-checkbox",{checked:_ctx.size2,shape:"square",size:"big",onChange:_cache[5]||(_cache[5]=(...args)=>_ctx.onChangeSize2&&_ctx.onChangeSize2(...args))},toDisplayString(_ctx.translate("size.square")),41,_hoisted_10)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.disabled")),1),createBaseVNode("div",_hoisted_11,[createBaseVNode("quark-checkbox",_hoisted_12,toDisplayString(_ctx.translate("disabled.checked")),1),createBaseVNode("quark-checkbox",_hoisted_13,toDisplayString(_ctx.translate("disabled.unchecked")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.group")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-checkbox-group",{value:_ctx.groupValue.join(),onChange:_cache[6]||(_cache[6]=(...args)=>_ctx.onGroupChange&&_ctx.onGroupChange(...args))},[createBaseVNode("quark-checkbox",{name:_ctx.translate('group.apple')},toDisplayString(_ctx.translate("group.apple")),9,_hoisted_16),createBaseVNode("quark-checkbox",{name:_ctx.translate('group.orange'),disabled:""},toDisplayString(_ctx.translate("group.orange")),9,_hoisted_17),createBaseVNode("quark-checkbox",{name:_ctx.translate('group.banana')},toDisplayString(_ctx.translate("group.banana")),9,_hoisted_18)],40,_hoisted_15),createBaseVNode("div",_hoisted_19,toDisplayString(_ctx.translate("group.selected"))+toDisplayString(_ctx.groupValue),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.selectedColor")),1),createBaseVNode("div",_hoisted_20,[createBaseVNode("quark-checkbox",_hoisted_21,toDisplayString(_ctx.translate("title.selectedColor")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.75456a14.js b/demo/assets/demo-legacy.75456a14.js new file mode 100644 index 000000000..29606fcbc --- /dev/null +++ b/demo/assets/demo-legacy.75456a14.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".textarea-demo quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.textarea-demo .quark-cell__title {\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n flex: 1;\n}\n.textarea-demo .custom-style {\n --textarea-border-color: red;\n --textarea-color: red;\n --textarea-count-color: red;\n --textarea-placeholder-color: red;\n --textarea-text-count-align: \"left\";\n margin-bottom: 40px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,withDirectives,vModelText,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;withDirectives=module.w;vModelText=module.v;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("textarea");const _sfc_main=createDemo({setup(){const textAreaInput=ref("");const handleEvent=(event,type)=>{Toast.text(`${event.target.value}${type}`);};onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",count:"字数统计",limit:"字数限制",rows:"指定行数",height:"根据内容自动调整高度",disabled:"禁用状态",event:"触发事件",custom:"自定义样式"},"en-US":{basic:"Basic Usage",count:"Show Count",limit:"Count Limit",rows:"Rows Setting",height:"Autosize",disabled:"Disabled",event:"Event Trigger",custom:"Custom Style"}});});return{textAreaInput,handleEvent,translate};}});const _hoisted_1={class:"demo textarea-demo no-padding"};const _hoisted_2=/*#__PURE__*/createBaseVNode("quark-textarea",{showcount:""},null,-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("quark-textarea",{showcount:"",maxlength:"50"},null,-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("quark-textarea",{rows:"6"},null,-1);const _hoisted_5=/*#__PURE__*/createBaseVNode("quark-textarea",{autosize:""},null,-1);const _hoisted_6=/*#__PURE__*/createBaseVNode("quark-textarea",{disabled:""},null,-1);const _hoisted_7=/*#__PURE__*/createBaseVNode("quark-textarea",{showcount:"",class:"custom-style"},null,-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),withDirectives(createBaseVNode("quark-textarea",{"onUpdate:modelValue":_cache[0]||(_cache[0]=$event=>_ctx.textAreaInput=$event)},null,512),[[vModelText,_ctx.textAreaInput]]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("count")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("limit")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("rows")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("height")),1),_hoisted_5,createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),_hoisted_6,createBaseVNode("h2",null,toDisplayString(_ctx.translate("event")),1),createBaseVNode("quark-textarea",{onInput:_cache[1]||(_cache[1]=$event=>_ctx.handleEvent($event,'input')),onBlur:_cache[2]||(_cache[2]=$event=>_ctx.handleEvent($event,'blur')),onFocus:_cache[3]||(_cache[3]=$event=>_ctx.handleEvent($event,'focus')),onCompositionstart:_cache[4]||(_cache[4]=$event=>_ctx.handleEvent($event,'compositionstart'))},null,32),createBaseVNode("h2",null,toDisplayString(_ctx.translate("custom")),1),_hoisted_7]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.76310c72.js b/demo/assets/demo-legacy.76310c72.js new file mode 100644 index 000000000..c9fdc6fa9 --- /dev/null +++ b/demo/assets/demo-legacy.76310c72.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-card quark-card {\n margin-bottom: 20px;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var _export_sfc,createElementBlock,openBlock,createBaseVNode;return{setters:[function(module){_export_sfc=module._;createElementBlock=module.c;openBlock=module.b;createBaseVNode=module.a;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const _sfc_main={};const _hoisted_1={class:"demo demo-card"};const _hoisted_2=/*#__PURE__*/createBaseVNode("quark-card",{title:"This is title",tips:"$ 100",content:"This is content of Card"},[/*#__PURE__*/createBaseVNode("div",{class:"demo","my-slot":"desc",style:{"font-size":"14px","color":"#999","padding-top":"14px"}}," footer content ")],-1);const _hoisted_3=[_hoisted_2];function _sfc_render(_ctx,_cache){return openBlock(),createElementBlock("div",_hoisted_1,_hoisted_3);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.76438d63.js b/demo/assets/demo-legacy.76438d63.js new file mode 100644 index 000000000..28bb7e490 --- /dev/null +++ b/demo/assets/demo-legacy.76438d63.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".content {\n border-radius: 4px;\n width: 200px;\n height: 200px;\n background-color: white;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var _export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("overlay");const _sfc_main=createDemo({setup(){const open=ref(false);const customOpen=ref(false);const click=()=>{open.value=true;};const customClick=()=>{customOpen.value=true;};const closed=()=>{open.value=false;};const customClosed=()=>{customOpen.value=false;};onBeforeMount(()=>{useTranslate({"zh-CN":{basicUsage:"基础用法",context:"嵌入内容"},"en-US":{basicUsage:"Basic Usage",context:"Embedded Content"}});});return{open,customOpen,click,customClick,closed,customClosed,translate};}});const _hoisted_1={class:"demo"};const _hoisted_2=["title"];const _hoisted_3=["open"];const _hoisted_4=["title"];const _hoisted_5=["open"];const _hoisted_6=/*#__PURE__*/createBaseVNode("div",{class:"content"},null,-1);const _hoisted_7=[_hoisted_6];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basicUsage")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('basicUsage'),islink:"",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.click&&_ctx.click(...args))},null,8,_hoisted_2)]),createBaseVNode("quark-overlay",{open:_ctx.open,onClose:_cache[1]||(_cache[1]=(...args)=>_ctx.closed&&_ctx.closed(...args))},null,40,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("context")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('context'),islink:"",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.customClick&&_ctx.customClick(...args))},null,8,_hoisted_4)]),createBaseVNode("quark-overlay",{open:_ctx.customOpen,onClose:_cache[3]||(_cache[3]=(...args)=>_ctx.customClosed&&_ctx.customClosed(...args))},_hoisted_7,40,_hoisted_5)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.7a6bfa00.js b/demo/assets/demo-legacy.7a6bfa00.js new file mode 100644 index 000000000..f6bcbf5a8 --- /dev/null +++ b/demo/assets/demo-legacy.7a6bfa00.js @@ -0,0 +1,2 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".head-container {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 16px;\n padding-right: 16px;\n width: 100%;\n}\n.cancel {\n color: #969799;\n font-size: 14px;\n}\n.ensure {\n font-size: 14px;\n color: #0088ff;\n}\n.picker-title {\n font-size: 16px;\n color: #242729;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("picker");const _sfc_main=createDemo({setup(){const open=ref(false);const customOpen=ref(false);const pickerRef=ref(null);const customPickerRef=ref(null);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础使用",head:"自定义头部",selectedTime:"请选择时间",confirmText:"确认",custom:{cancel:"取消",confirm:"确定",title:"请选择城市"},time:["上午","下午"],values:["杭州","嘉兴","绍兴","宁波","湖州","千岛湖"],selected:"当前选中："},"en-US":{basic:"Basic Usage",head:"Custom head",confirmText:"Confirm",selectedTime:"Please select Time",custom:{cancel:"Cancel",confirm:"Confirm",title:"Please select city"},time:["a.m.","p.m."],values:["Hangzhou","Jiaxing","Shaoxing","Ningbo","Huzhou","Qiandao Lake"],selected:"Currently Selected: "}});});onMounted(()=>{setTimeout(()=>{//模拟异步获取数据 +const preview=pickerRef.value;preview.setColumns([{defaultIndex:2,values:translate("calendaritem.weekdays")},{defaultIndex:0,values:translate("time")}]);const customPreview=customPickerRef.value;customPreview.setColumns([{defaultIndex:0,values:translate("values")}]);},1000);});const click=()=>{open.value=true;};const customClick=()=>{customOpen.value=true;};const close=type=>{if(type===0){open.value=false;}else if(type===1){customOpen.value=false;}};const confirm=({detail})=>{const values=detail.value.map(column=>{return column.value;}).join("，");Toast.text(`${translate("selected")}${values}`);open.value=false;};const customConfirm=()=>{const customPreview=customPickerRef.value;const values=customPreview.getValues().map(column=>{return column.value;}).join("，");Toast.text(`${translate("selected")}${values}`);customOpen.value=false;};const change=({detail})=>{console.log(detail.value,33333);};return{open,customOpen,pickerRef,customPickerRef,click,customClick,close,confirm,customConfirm,change,translate};}});const _hoisted_1={class:"demo"};const _hoisted_2=["title"];const _hoisted_3=["open","title","confirmtext"];const _hoisted_4=["title"];const _hoisted_5=["open"];const _hoisted_6={slot:"header",class:"head-container"};const _hoisted_7={class:"picker-title"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('basic'),islink:"",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.click&&_ctx.click(...args))},null,8,_hoisted_2)]),createBaseVNode("quark-picker",{ref:"pickerRef",open:_ctx.open,title:_ctx.translate('selectedTime'),confirmtext:_ctx.translate('confirmText'),onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.change&&_ctx.change(...args)),onClose:_cache[2]||(_cache[2]=$event=>_ctx.close(0)),onConfirm:_cache[3]||(_cache[3]=(...args)=>_ctx.confirm&&_ctx.confirm(...args))},null,40,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("head")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('head'),islink:"",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.customClick&&_ctx.customClick(...args))},null,8,_hoisted_4)]),createBaseVNode("quark-picker",{open:_ctx.customOpen,onClose:_cache[7]||(_cache[7]=$event=>_ctx.close(1)),ref:"customPickerRef",bottomhidden:""},[createBaseVNode("div",_hoisted_6,[createBaseVNode("span",{class:"cancel",onClick:_cache[5]||(_cache[5]=$event=>_ctx.close(1))},toDisplayString(_ctx.translate("custom.cancel")),1),createBaseVNode("span",_hoisted_7,toDisplayString(_ctx.translate("custom.title")),1),createBaseVNode("span",{class:"ensure",onClick:_cache[6]||(_cache[6]=(...args)=>_ctx.customConfirm&&_ctx.customConfirm(...args))},toDisplayString(_ctx.translate("custom.confirm")),1)])],40,_hoisted_5)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.90cd7e98.js b/demo/assets/demo-legacy.90cd7e98.js new file mode 100644 index 000000000..db6e5ee34 --- /dev/null +++ b/demo/assets/demo-legacy.90cd7e98.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".uploader-demo {\n background-color: #fff !important;\n}\n.uploader-demo quark-button {\n margin-left: 10px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./vue-router-legacy.0b1d6af2.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,openBlock,Toast,onBeforeRouteLeave;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;Toast=module.T;},function(module){onBeforeRouteLeave=module.o;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("uploader");const _sfc_main=createDemo({setup(){const isPreview=ref(false);const preview=ref(null);const preview2=ref(null);const preview3=ref(null);const maxcount=ref(3);const previewUrls=["https://img.yzcdn.cn/vant/leaf.jpg","https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png"];const successUrl=["https://m.hellobike.com/resource/helloyun/15697/JPjd2_WX20220830-141115.png?x-oss-process=image/quality,q_80","https://m.hellobike.com/resource/helloyun/15697/Wc4c2_shop.png?x-oss-process=image/quality,q_80"];onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",remove:"图片删除",readonly:"只读模式"},"en-US":{basic:"Basic Usage",remove:"Picture Remove",readonly:"readonly"}});});onMounted(()=>{console.log(preview3,"333");preview.value.setPreview(previewUrls);preview2.value.setPreview(previewUrls);preview3.value.setPreview(previewUrls);});const sleep=time=>{return new Promise(reslove=>{setTimeout(()=>{reslove(true);},time);});};const callNative=async()=>{const toast=Toast.loading("客户端上传图片中");await sleep(1000);toast.hide();Toast.success("客户端返回数据");return Promise.resolve(successUrl);};const afterRead=async({detail:data})=>{const successData=await callNative();const newData=data.concat(successData);preview.value.setPreview(newData);};const onremove=({detail:item})=>{console.log(item,"item");};onBeforeRouteLeave(()=>{const nodes=document.querySelectorAll("quark-image-preview ");nodes.forEach(i=>i.open=false);});return{isPreview,preview,preview2,preview3,afterRead,translate,onremove,maxcount};}});const _hoisted_1={class:"demo uploader-demo"};const _hoisted_2={class:"flex"};const _hoisted_3=["maxcount"];const _hoisted_4={class:"flex"};const _hoisted_5={class:"flex"};const _hoisted_6={ref:"preview3",readonly:""};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-native-uploader",{ref:"preview",onOnread:_cache[0]||(_cache[0]=(...args)=>_ctx.afterRead&&_ctx.afterRead(...args)),maxcount:_ctx.maxcount},null,40,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("remove")),1),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-native-uploader",{ref:"preview2",onOnread:_cache[1]||(_cache[1]=(...args)=>_ctx.afterRead&&_ctx.afterRead(...args)),onOnremove:_cache[2]||(_cache[2]=(...args)=>_ctx.onremove&&_ctx.onremove(...args))},null,544)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("readonly")),1),createBaseVNode("div",_hoisted_5,[createBaseVNode("quark-native-uploader",_hoisted_6,null,512)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.9481c72d.js b/demo/assets/demo-legacy.9481c72d.js new file mode 100644 index 000000000..337bf03a8 --- /dev/null +++ b/demo/assets/demo-legacy.9481c72d.js @@ -0,0 +1,5 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".swipe-cell-demo {\n --button-height: 100%;\n}\n.swipe-cell-demo .right,\n.swipe-cell-demo .left {\n height: 100%;\n}\n.swipe-cell-demo .quark-button {\n height: 100%;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,ref,onMounted,Toast,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;ref=module.r;onMounted=module.g;Toast=module.T;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("cell");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{CellTitle:{basicUsage:"基本用法",custom:"自定义内容",async:"异步关闭"},title:"这是标题",desc:"描述文字",buttons:{del:"删除",collect:"收藏",select:"选择",add:"添加"},noData:"暂无数据",addData:"快去添加数据吧~",loading:"请求中",deleteSucc:"删除成功"},"en-US":{CellTitle:{basicUsage:"Basic Usage",custom:"Custom Content",async:"Async Close"},title:"Cell Title",desc:"Description",buttons:{del:"Delete",collect:"Collect",select:"Select",add:"Add"},noData:"No Data",addData:"Go to add data.",loading:"loading...",deleteSucc:"successfully deleted"}});});const onOpen=({detail})=>{console.log(detail.name,detail.position);};const onClose=({detail})=>{console.log(detail.name,detail.position);};const asyncSwipeCell=ref();onMounted(()=>{asyncSwipeCell.value.setBeforeClose(position=>{if(position==="right"){return new Promise(resolve=>{const toast=Toast.loading(translate("loading"));setTimeout(()=>{toast.hide();Toast.success(translate("deleteSucc"));resolve(true);},1000);});}else{return true;}});// asyncSwipeCell.value.open("right"); +// setTimeout(() => { +// asyncSwipeCell.value.close(); +// }, 1000); +});return{translate,onOpen,onClose,asyncSwipeCell};}});const _hoisted_1={class:"demo no-padding swipe-cell-demo"};const _hoisted_2=["title","desc"];const _hoisted_3={class:"left",slot:"left"};const _hoisted_4={type:"primary",shape:"square"};const _hoisted_5={class:"right",slot:"right"};const _hoisted_6={type:"danger",shape:"square"};const _hoisted_7={type:"primary",shape:"square"};const _hoisted_8=["title","desc"];const _hoisted_9={class:"right",slot:"right"};const _hoisted_10={type:"primary",shape:"square"};const _hoisted_11={ref:"asyncSwipeCell"};const _hoisted_12=["title","desc"];const _hoisted_13={class:"right",slot:"right"};const _hoisted_14={type:"primary",shape:"square"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.basicUsage")),1),createBaseVNode("quark-swipe-cell",{onOpen:_cache[0]||(_cache[0]=(...args)=>_ctx.onOpen&&_ctx.onOpen(...args)),onClose:_cache[1]||(_cache[1]=(...args)=>_ctx.onClose&&_ctx.onClose(...args))},[createBaseVNode("quark-cell",{title:_ctx.translate('title'),desc:_ctx.translate('desc')},null,8,_hoisted_2),createBaseVNode("div",_hoisted_3,[createBaseVNode("quark-button",_hoisted_4,toDisplayString(_ctx.translate("buttons.select")),1)]),createBaseVNode("div",_hoisted_5,[createBaseVNode("quark-button",_hoisted_6,toDisplayString(_ctx.translate("buttons.del")),1),createBaseVNode("quark-button",_hoisted_7,toDisplayString(_ctx.translate("buttons.collect")),1)])],32),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.custom")),1),createBaseVNode("quark-swipe-cell",null,[createBaseVNode("quark-empty",{title:_ctx.translate('noData'),desc:_ctx.translate('addData'),type:"local"},null,8,_hoisted_8),createBaseVNode("div",_hoisted_9,[createBaseVNode("quark-button",_hoisted_10,toDisplayString(_ctx.translate("buttons.add")),1)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.async")),1),createBaseVNode("quark-swipe-cell",_hoisted_11,[createBaseVNode("quark-cell",{title:_ctx.translate('title'),desc:_ctx.translate('desc')},null,8,_hoisted_12),createBaseVNode("div",_hoisted_13,[createBaseVNode("quark-button",_hoisted_14,toDisplayString(_ctx.translate("buttons.del")),1)])],512)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.97b9d7fa.js b/demo/assets/demo-legacy.97b9d7fa.js new file mode 100644 index 000000000..5bd3130ad --- /dev/null +++ b/demo/assets/demo-legacy.97b9d7fa.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".radio-demo .radio-container {\n background: #fff;\n padding: 10px;\n border-radius: 4px;\n}\n.radio-demo .my-color {\n --radio-background: linear-gradient(225deg, #ff918d 0%, #f54640 100%);\n}\n.radio-demo quark-radio {\n padding: 10px 0;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("radio");const _sfc_main=createDemo({setup(){const data=ref({value1:"apple",value2:"apple",value3:"apple",value4:"apple",radio1:"radio1",radio2:"radio2",flag:true});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",direction:"水平排列",type:"单选框形状",size:"单选框大小",disabled:"单选框禁用状态",selectedColor:"单选框选中颜色自定义"},direction:{radio1:"单选框1",radio2:"单选框2"},type:{round:"圆形(默认)",square:"方形"},size:{round:"圆形(大)",square:"方形(大)"},disabled:{checked:"已选-禁用",unchecked:"未选-禁用",squareChecekd:"方形-已选-禁用",squareUnchecked:"方形-未选-禁用"},group:{apple:"苹果",banana:"香蕉"}},"en-US":{title:{basic:"Basic Usage",type:"Checkbox Type",size:"Checkbox Size",disabled:"Disabled Checkbox",selectedColor:"Custom Selected Color"},direction:{radio1:"radio1",radio2:"radio2"},type:{round:"Round(Default)",square:"Square"},size:{round:"Round(Big)",square:"Square(Big)"},disabled:{checked:"Checked - Disabled",unchecked:"Unchecked - Disabled",squareChecekd:"Square - Checked -Disabled",squareUnchecked:"Square - Unchecked -Disabled"},group:{apple:"Apple",banana:"Banana"}}});});const onChange1=({detail})=>{data.value.value1=detail.value;};const directionOnChange=({detail})=>{data.value.radio1=detail.value;};const onChange2=({detail})=>{data.value.value2=detail.value;};const onChange3=({detail})=>{data.value.value3=detail.value;};const onChange4=({detail})=>{data.value.value4=detail.value;};const changeDisable=()=>{data.value.flag=!data.value.flag;};return{data,onChange1,directionOnChange,onChange2,onChange3,onChange4,changeDisable,translate};}});const _hoisted_1={class:"demo radio-demo"};const _hoisted_2={class:"radio-container"};const _hoisted_3=["value"];const _hoisted_4={name:"apple"};const _hoisted_5={name:"banana"};const _hoisted_6={class:"radio-container"};const _hoisted_7=["value"];const _hoisted_8={name:"radio1"};const _hoisted_9={name:"radio2"};const _hoisted_10={class:"radio-container"};const _hoisted_11=["value"];const _hoisted_12={name:"apple"};const _hoisted_13={name:"banana",shape:"square"};const _hoisted_14={class:"radio-container"};const _hoisted_15=["value"];const _hoisted_16={name:"apple",size:"big"};const _hoisted_17={name:"banana",size:"big"};const _hoisted_18={class:"radio-container"};const _hoisted_19=["value"];const _hoisted_20=["disabled"];const _hoisted_21=["disabled"];const _hoisted_22={class:"radio-container"};const _hoisted_23={checked:true,disabled:""};const _hoisted_24={checked:false,disabled:""};const _hoisted_25={class:"radio-container my-color"};const _hoisted_26={checked:true};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-radio-group",{value:_ctx.data.value1,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange1&&_ctx.onChange1(...args))},[createBaseVNode("quark-radio",_hoisted_4,toDisplayString(_ctx.translate("group.apple")),1),createBaseVNode("quark-radio",_hoisted_5,toDisplayString(_ctx.translate("group.banana")),1)],40,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.direction")),1),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-radio-group",{value:_ctx.data.radio1,onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.directionOnChange&&_ctx.directionOnChange(...args)),direction:"horizontal",class:"radio-group-2"},[createBaseVNode("quark-radio",_hoisted_8,toDisplayString(_ctx.translate("direction.radio1")),1),createBaseVNode("quark-radio",_hoisted_9,toDisplayString(_ctx.translate("direction.radio2")),1)],40,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.type")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-radio-group",{value:_ctx.data.value2,onChange:_cache[2]||(_cache[2]=(...args)=>_ctx.onChange2&&_ctx.onChange2(...args)),class:"radio-group-2"},[createBaseVNode("quark-radio",_hoisted_12,toDisplayString(_ctx.translate("type.round")),1),createBaseVNode("quark-radio",_hoisted_13,toDisplayString(_ctx.translate("type.square")),1)],40,_hoisted_11)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.size")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-radio-group",{value:_ctx.data.value3,onChange:_cache[3]||(_cache[3]=(...args)=>_ctx.onChange3&&_ctx.onChange3(...args))},[createBaseVNode("quark-radio",_hoisted_16,toDisplayString(_ctx.translate("size.square")),1),createBaseVNode("quark-radio",_hoisted_17,toDisplayString(_ctx.translate("size.round")),1)],40,_hoisted_15)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.disabled")),1),createBaseVNode("div",_hoisted_18,[createBaseVNode("quark-radio-group",{value:_ctx.data.value4,onChange:_cache[4]||(_cache[4]=(...args)=>_ctx.onChange4&&_ctx.onChange4(...args))},[createBaseVNode("quark-radio",{name:"apple",disabled:_ctx.data.flag},toDisplayString(_ctx.translate("disabled.checked")),9,_hoisted_20),createBaseVNode("quark-radio",{name:"banana",disabled:_ctx.data.flag},toDisplayString(_ctx.translate("disabled.unchecked")),9,_hoisted_21)],40,_hoisted_19)]),createBaseVNode("div",_hoisted_22,[createBaseVNode("quark-radio",_hoisted_23,toDisplayString(_ctx.translate("disabled.squareChecekd")),1),createBaseVNode("quark-radio",_hoisted_24,toDisplayString(_ctx.translate("disabled.squareUnchecked")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.selectedColor")),1),createBaseVNode("div",_hoisted_25,[createBaseVNode("quark-radio",_hoisted_26,toDisplayString(_ctx.translate("title.selectedColor")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.9b5d06db.js b/demo/assets/demo-legacy.9b5d06db.js new file mode 100644 index 000000000..3361b26e7 --- /dev/null +++ b/demo/assets/demo-legacy.9b5d06db.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".button-demo .demo-buttons quark-button {\n margin: 8px;\n}\n.button-demo .flex {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n}\n.button-demo .flex quark-button {\n margin: 4px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,ref,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;ref=module.r;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("button");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{title:{type:"按钮类型",shape:"按钮形状",plain:"朴素按钮",light:"浅色按钮",disabled:"禁用状态",loading:"加载状态",icon:"图标按钮",size:"按钮尺寸"},type:{default:"默认按钮",primary:"主要按钮",success:"成功按钮",danger:"危险按钮",warning:"警告按钮"},shape:{square:"方形按钮",round:"小圆角按钮"},size:{large:"特大尺寸",big:"大号尺寸",normal:"普通尺寸",small:"小号尺寸"},loading:"加载中...",click:"点我!",like:"喜欢",name:"张三"},"en-US":{title:{type:"Button Type",shape:"Button Shape",plain:"Plain Button",light:"Light Button",disabled:"Disabled",loading:"Loading",icon:"Icon Button",size:"Button Size"},type:{default:"Default",primary:"Primary",success:"Success",danger:"Danger",warning:"Warning"},shape:{square:"Square",round:"Round"},size:{large:"Large",big:"Big",normal:"Normal",small:"Small"},loading:"Loading...",click:"Click Me!",like:"Like",name:"Zhang San"}});});const isLoading=ref(false);const changeLoading=()=>{isLoading.value=true;setTimeout(()=>{isLoading.value=false;},2000);};return{translate,isLoading,changeLoading};}});const _hoisted_1={class:"demo button-demo"};const _hoisted_2={class:"demo-buttons"};const _hoisted_3={type:"primary"};const _hoisted_4={type:"success"};const _hoisted_5={type:"danger"};const _hoisted_6={type:"warning"};const _hoisted_7={class:"demo-buttons"};const _hoisted_8={plain:"",type:"primary"};const _hoisted_9={plain:"",type:"success"};const _hoisted_10={class:"demo-buttons"};const _hoisted_11={light:"",type:"primary"};const _hoisted_12={light:"",type:"success"};const _hoisted_13={class:"demo-buttons"};const _hoisted_14={type:"primary",size:"large"};const _hoisted_15={type:"primary",size:"big"};const _hoisted_16={type:"primary"};const _hoisted_17={type:"primary",size:"small"};const _hoisted_18={class:"demo-buttons"};const _hoisted_19={type:"primary",disabled:""};const _hoisted_20={disabled:""};const _hoisted_21={class:"demo-buttons"};const _hoisted_22={shape:"square",type:"danger"};const _hoisted_23={style:{"--button-border-radius":"6px"},type:"primary"};const _hoisted_24={class:"flex"};const _hoisted_25={loading:"",loadtype:"circular",type:"danger"};const _hoisted_26={loading:"",type:"warning"};const _hoisted_27=["loading"];const _hoisted_28={class:"demo-buttons"};const _hoisted_29={type:"danger",icon:"https://m.hellobike.com/resource/helloyun/16682/Agnve_tel%20(1).png"};const _hoisted_30={type:"primary",icon:"https://m.hellobike.com/resource/helloyun/16682/_pay6_setting%20(1).png"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.type")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-button",null,toDisplayString(_ctx.translate("type.default")),1),createBaseVNode("quark-button",_hoisted_3,toDisplayString(_ctx.translate("type.primary")),1),createBaseVNode("quark-button",_hoisted_4,toDisplayString(_ctx.translate("type.success")),1),createBaseVNode("quark-button",_hoisted_5,toDisplayString(_ctx.translate("type.danger")),1),createBaseVNode("quark-button",_hoisted_6,toDisplayString(_ctx.translate("type.warning")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.plain")),1),createBaseVNode("div",_hoisted_7,[createBaseVNode("quark-button",_hoisted_8,toDisplayString(_ctx.translate("type.primary")),1),createBaseVNode("quark-button",_hoisted_9,toDisplayString(_ctx.translate("type.success")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.light")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-button",_hoisted_11,toDisplayString(_ctx.translate("type.primary")),1),createBaseVNode("quark-button",_hoisted_12,toDisplayString(_ctx.translate("type.success")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.size")),1),createBaseVNode("div",_hoisted_13,[createBaseVNode("quark-button",_hoisted_14,toDisplayString(_ctx.translate("size.large")),1),createBaseVNode("quark-button",_hoisted_15,toDisplayString(_ctx.translate("size.big")),1),createBaseVNode("quark-button",_hoisted_16,toDisplayString(_ctx.translate("size.normal")),1),createBaseVNode("quark-button",_hoisted_17,toDisplayString(_ctx.translate("size.small")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.disabled")),1),createBaseVNode("div",_hoisted_18,[createBaseVNode("quark-button",_hoisted_19,toDisplayString(_ctx.translate("title.disabled")),1),createBaseVNode("quark-button",_hoisted_20,toDisplayString(_ctx.translate("title.disabled")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.shape")),1),createBaseVNode("div",_hoisted_21,[createBaseVNode("quark-button",_hoisted_22,toDisplayString(_ctx.translate("shape.square")),1),createBaseVNode("quark-button",_hoisted_23,toDisplayString(_ctx.translate("shape.round")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.loading")),1),createBaseVNode("div",_hoisted_24,[createBaseVNode("quark-button",_hoisted_25,toDisplayString(_ctx.translate("loading")),1),createBaseVNode("quark-button",_hoisted_26,toDisplayString(_ctx.translate("loading")),1),createBaseVNode("quark-button",{onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.changeLoading&&_ctx.changeLoading(...args)),loading:_ctx.isLoading,type:"success"},toDisplayString(_ctx.translate("click")),9,_hoisted_27)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.icon")),1),createBaseVNode("div",_hoisted_28,[createBaseVNode("quark-button",_hoisted_29,toDisplayString(_ctx.translate("like")),1),createBaseVNode("quark-button",_hoisted_30,toDisplayString(_ctx.translate("name")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.9b82a593.js b/demo/assets/demo-legacy.9b82a593.js new file mode 100644 index 000000000..585d307bd --- /dev/null +++ b/demo/assets/demo-legacy.9b82a593.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".scope-rate .tag-container[data-v-08f46bee] {\n margin: 5px;\n margin-bottom: 30px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock,pushScopeId,popScopeId;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;pushScopeId=module.p;popScopeId=module.q;}],execute:function(){var demo_scss_vue_type_style_index_0_src_scoped_true_lang='';const{createDemo,translate}=createComponent("rate");const _sfc_main=createDemo({setup(){const rate=ref(2);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",selectedColor:"自定义选中颜色",disabled:"禁用状态",readonly:"只读状态",event:"监听 change 事件",imageIcon:"图片icon"},"en-US":{basic:"Basic Usage",selectedColor:"Custom Selected Color",disabled:"Disabled",readonly:"Readonly",event:"Listen to change event",imageIcon:"image icon"}});});onMounted(()=>{setTimeout(()=>{rate.value=3;},2000);});const handleChange=e=>{Toast.text(e.detail.value);};return{rate,handleChange,translate};}});const _withScopeId=n=>(pushScopeId("data-v-08f46bee"),n=n(),popScopeId(),n);const _hoisted_1={class:"demo scope-rate"};const _hoisted_2=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container"},[/*#__PURE__*/createBaseVNode("quark-rate",{defaultvalue:"1"})],-1));const _hoisted_3=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container"},[/*#__PURE__*/createBaseVNode("quark-rate",{defaultvalue:"2",activecolor:"#ffd21e"})],-1));const _hoisted_4=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container"},[/*#__PURE__*/createBaseVNode("quark-rate",{defaultvalue:"2",disabled:""})],-1));const _hoisted_5=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container"},[/*#__PURE__*/createBaseVNode("quark-rate",{defaultvalue:"2",readonly:""})],-1));const _hoisted_6={class:"tag-container"};const _hoisted_7=["value"];const _hoisted_8=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container"},[/*#__PURE__*/createBaseVNode("quark-rate",{defaultvalue:"2",imgicon:"https://vue-quarkd.hellobike.com/assets/quark-logo.f9a6a307.png"})],-1));function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("selectedColor")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("readonly")),1),_hoisted_5,createBaseVNode("h2",null,toDisplayString(_ctx.translate("event")),1),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-rate",{value:_ctx.rate,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.handleChange&&_ctx.handleChange(...args))},null,40,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("imageIcon")),1),_hoisted_8]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render],['__scopeId',"data-v-08f46bee"]]));}};});})(); diff --git a/demo/assets/demo-legacy.a16de68a.js b/demo/assets/demo-legacy.a16de68a.js new file mode 100644 index 000000000..d602b7653 --- /dev/null +++ b/demo/assets/demo-legacy.a16de68a.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="\n.tag-container[data-v-3ebefdf6] {\n padding: 5px;\n margin-bottom: 30px;\n}\n.progress-wrap[data-v-3ebefdf6] {\n background: #fff;\n padding-right: 32px;\n}\nquark-progress[data-v-3ebefdf6] {\n width: 100%;\n margin: 16px;\n margin-right: 0;\n}\n.green[data-v-3ebefdf6] {\n --progress-box-background: yellowgreen;\n --progress-margin-left: 6px;\n}\n.auto[data-v-3ebefdf6] {\n width: 95%;\n height: 6px;\n}\n.wrap[data-v-3ebefdf6] {\n display: flex;\n align-items: center;\n}\n.percent[data-v-3ebefdf6] {\n color: yellowgreen;\n}\n";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,openBlock,pushScopeId,popScopeId;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;pushScopeId=module.p;popScopeId=module.q;}],execute:function(){var demo_vue_vue_type_style_index_0_scoped_true_lang='';const{createDemo,translate}=createComponent("progress");const _sfc_main=createDemo({setup(){const value=ref(10);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",showText:"显示字体进度",customColor:"自定义颜色/背景色",customStyle:"自定义宽度/高度/圆角/显示百分比"},"en-US":{basic:"Basic Usage",showText:"Show Progress",customColor:"Custom Color/Background Color",customStyle:"Custom Width/Height/Round/Percentage"}});});onMounted(()=>{let t=setInterval(()=>{if(value.value>=100)clearInterval(t);else value.value+=10;},1000);});return{value,translate};}});const _withScopeId=n=>(pushScopeId("data-v-3ebefdf6"),n=n(),popScopeId(),n);const _hoisted_1={class:"demo"};const _hoisted_2=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container progress-wrap"},[/*#__PURE__*/createBaseVNode("div",{class:"wrap"},[/*#__PURE__*/createBaseVNode("quark-progress",{value:"0"})])],-1));const _hoisted_3=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container progress-wrap space"},[/*#__PURE__*/createBaseVNode("quark-progress",{value:"100",showtext:""})],-1));const _hoisted_4={class:"tag-container progress-wrap"};const _hoisted_5=["value"];const _hoisted_6=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-progress",{value:"20",color:"green",showtext:""},null,-1));const _hoisted_7=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-progress",{value:"30",color:"green",class:"green",showtext:""},null,-1));const _hoisted_8=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("div",{class:"tag-container progress-wrap"},[/*#__PURE__*/createBaseVNode("quark-progress",{value:"90",class:"auto",color:"linear-gradient(\n 268deg,#fa2c19 0%,#fa3f19 44.59259259%,#fa5919 83.40740741%,#fa6419 100%)"},[/*#__PURE__*/createBaseVNode("span",{slot:"percent",class:"percent"},"0.9")])],-1));function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("showText")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("customColor")),1),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-progress",{value:_ctx.value,color:"yellowgreen",showtext:""},null,8,_hoisted_5),_hoisted_6,_hoisted_7]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customStyle")),1),_hoisted_8]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render],['__scopeId',"data-v-3ebefdf6"]]));}};});})(); diff --git a/demo/assets/demo-legacy.a6383c07.js b/demo/assets/demo-legacy.a6383c07.js new file mode 100644 index 000000000..32fbfef53 --- /dev/null +++ b/demo/assets/demo-legacy.a6383c07.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".image-demo .quark-cell {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px 7px #edeef1;\n font-size: 14px;\n color: #666;\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n padding: 8px;\n}\n.image-demo .quark-cell-list quark-image {\n min-width: 100px;\n min-height: 100px;\n}\n.image-demo .quark-cell-item {\n display: flex;\n flex-direction: column;\n flex: 0 0 33.33%;\n padding: 4px;\n}\n.image-demo .quark-cell-item p {\n text-align: center;\n}\n.image-demo .error-img {\n height: 30px;\n width: 30px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Fragment,renderList,createStaticVNode,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Fragment=module.F;renderList=module.m;createStaticVNode=module.e;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("image");const _sfc_main=createDemo({setup(){const imgList=ref(["https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg","https://m.hellobike.com/resource/helloyun/09764/sbESi_picture-2.jpeg","https://m.hellobike.com/resource/helloyun/09764/uzhnQ_picture-3.jpeg","https://m.hellobike.com/resource/helloyun/09764/1jm2V_picture-4.png","https://m.hellobike.com/resource/helloyun/09764/uzuHB_picture-5.jpeg","https://m.hellobike.com/resource/helloyun/09764/gyy6t_picture-6.jpeg"]);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",fit:"填充样式",round:"圆形图片",loadingMention:"加载中提示",loading:"加载中...",loadingFail:"加载失败提示",lazy:"懒加载"},"en-US":{basic:"Basic Usage",fit:"Fit Style",round:"Round Image",loadingMention:"Loading Mention",loading:"Loading...",loadingFail:"Fail Mention",lazy:"Lazy Load"}});});return{imgList,translate};}});const _hoisted_1={class:"demo image-demo"};const _hoisted_2=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell base-cell"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg"})],-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell",style:{"display":"grid","grid-template-columns":"repeat(auto-fill, 33.33%)"}},[/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",fit:"contain"}),/*#__PURE__*/createBaseVNode("p",null,"contain")]),/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",fit:"fill"}),/*#__PURE__*/createBaseVNode("p",null,"fill")]),/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",fit:"cover"}),/*#__PURE__*/createBaseVNode("p",null,"cover")]),/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",fit:"none"}),/*#__PURE__*/createBaseVNode("p",null,"none")]),/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",fit:"scale-down"}),/*#__PURE__*/createBaseVNode("p",null,"scale-down")])],-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg",width:"100px",height:"100px",fit:"cover",round:""})],-1);const _hoisted_5={class:"quark-cell"};const _hoisted_6={class:"quark-cell-item"};const _hoisted_7={src:"",width:"100px",height:"100px"};const _hoisted_8={slot:"error"};const _hoisted_9=/*#__PURE__*/createBaseVNode("div",{class:"quark-cell-item"},[/*#__PURE__*/createBaseVNode("quark-image",{src:"",width:"100px",height:"100px"},[/*#__PURE__*/createBaseVNode("div",{slot:"error"},[/*#__PURE__*/createBaseVNode("quark-loading")])])],-1);const _hoisted_10=/*#__PURE__*/createStaticVNode("
\"\"
",1);const _hoisted_11={class:"quark-cell quark-cell-list"};const _hoisted_12=["src"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("fit")),1),_hoisted_3,createBaseVNode("h2",null,toDisplayString(_ctx.translate("round")),1),_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("loadingMention")),1),createBaseVNode("div",_hoisted_5,[createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-image",_hoisted_7,[createBaseVNode("div",_hoisted_8,toDisplayString(_ctx.translate("loading")),1)])]),_hoisted_9]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("loadingFail")),1),_hoisted_10,createBaseVNode("h2",null,toDisplayString(_ctx.translate("lazy")),1),(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.imgList,img=>{return openBlock(),createElementBlock("div",_hoisted_11,[(openBlock(),createElementBlock("quark-image",{src:img,class:"img-box",key:img,lazy:""},null,8,_hoisted_12))]);}),256))]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.b0221e4e.js b/demo/assets/demo-legacy.b0221e4e.js new file mode 100644 index 000000000..d7525582c --- /dev/null +++ b/demo/assets/demo-legacy.b0221e4e.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".quark-popover {\n width: 100px;\n background-color: #0088ff;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n color: white;\n margin-right: 20px;\n}\n.quark-popover-content {\n width: 160px;\n height: 140px;\n background-color: #4a4a4a;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n color: white;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var _export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("popover");const _sfc_main=createDemo({setup(){const data=ref({light:false,dark:false,icon:false,disable:false,content:false});const lightRef=ref(null);const darkRef=ref(null);const iconRef=ref(null);const disableRef=ref(null);onBeforeMount(()=>{useTranslate({"zh-CN":{basicUsage:"基础用法",lightStyle:"浅色风格",darkStyle:"深色风格",settings:"选项配置",showIcon:"展示图标",disable:"禁用状态",customContent:"自定义内容",content:"我是自定义内容",options:["选项一","选项二","选项三"]},"en-US":{basicUsage:"Basic Usage",lightStyle:"Light Style",darkStyle:"Dark Style",settings:"Option Settings",showIcon:"Show Icon",disable:"disabled",customContent:"Custom Content",content:"This is custom content",options:["Option 1","Option 2","Option 3"]}});});onMounted(()=>{const actions=[{text:`${translate("options")[0]}`},{text:`${translate("options")[1]}`},{text:`${translate("options")[2]}`}];lightRef.value.setActions(actions);darkRef.value.setActions(actions);iconRef.value.setActions([{text:`${translate("options")[0]}`},{text:`${translate("options")[1]}`,icon:"tel"},{text:`${translate("options")[2]}`,icon:"https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png"}]);disableRef.value.setActions([{text:`${translate("options")[0]}`,disabled:true},{text:`${translate("options")[1]}`},{text:`${translate("options")[2]}`}]);});const handleLightSelect=({detail})=>{const{action,index}=detail;Toast.text(action.text);close("light");};const handleDarkSelect=({detail})=>{const{action,index}=detail;Toast.text(action.text);close("dark");};const handleIconSelect=({detail})=>{const{action,index}=detail;Toast.text(action.text);close("icon");};const handleDisableSelect=({detail})=>{const{action,index}=detail;Toast.text(action.text);close("disable");};const open=name=>{data.value[name]=true;data.value.test=true;};const close=name=>{data.value[name]=false;};return{translate,data,lightRef,darkRef,iconRef,disableRef,handleLightSelect,handleDarkSelect,handleIconSelect,handleDisableSelect,open,close};}});const _hoisted_1={class:"demo"};const _hoisted_2=["open"];const _hoisted_3=["open"];const _hoisted_4=["open"];const _hoisted_5=["open"];const _hoisted_6=["open"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basicUsage")),1),createBaseVNode("quark-popover",{scrollhidden:"",open:_ctx.data.light,theme:"light",placement:"bottomleft",ref:"lightRef",onClose:_cache[1]||(_cache[1]=$event=>_ctx.close('light')),onSelect:_cache[2]||(_cache[2]=(...args)=>_ctx.handleLightSelect&&_ctx.handleLightSelect(...args))},[createBaseVNode("div",{class:"quark-popover",onClick:_cache[0]||(_cache[0]=$event=>_ctx.open('light'))},toDisplayString(_ctx.translate("lightStyle")),1)],40,_hoisted_2),createBaseVNode("quark-popover",{scrollhidden:"",open:_ctx.data.dark,theme:"dark",ref:"darkRef",onClose:_cache[4]||(_cache[4]=$event=>_ctx.close('dark')),onSelect:_cache[5]||(_cache[5]=(...args)=>_ctx.handleDarkSelect&&_ctx.handleDarkSelect(...args))},[createBaseVNode("div",{class:"quark-popover",onClick:_cache[3]||(_cache[3]=$event=>_ctx.open('dark'))},toDisplayString(_ctx.translate("darkStyle")),1)],40,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("settings")),1),createBaseVNode("quark-popover",{scrollhidden:"",open:_ctx.data.icon,placement:"bottomleft",ref:"iconRef",theme:"light",onClose:_cache[7]||(_cache[7]=$event=>_ctx.close('icon')),onSelect:_cache[8]||(_cache[8]=(...args)=>_ctx.handleIconSelect&&_ctx.handleIconSelect(...args))},[createBaseVNode("div",{class:"quark-popover",onClick:_cache[6]||(_cache[6]=$event=>_ctx.open('icon'))},toDisplayString(_ctx.translate("showIcon")),1)],40,_hoisted_4),createBaseVNode("quark-popover",{scrollhidden:"",theme:"light",open:_ctx.data.disable,ref:"disableRef",onClose:_cache[10]||(_cache[10]=$event=>_ctx.close('disable')),onSelect:_cache[11]||(_cache[11]=(...args)=>_ctx.handleDisableSelect&&_ctx.handleDisableSelect(...args))},[createBaseVNode("div",{class:"quark-popover",onClick:_cache[9]||(_cache[9]=$event=>_ctx.open('disable'))},toDisplayString(_ctx.translate("disable")),1)],40,_hoisted_5),createBaseVNode("h2",null,toDisplayString(_ctx.translate("")),1),createBaseVNode("quark-popover",{scrollhidden:"",open:_ctx.data.content,placement:"bottomleft",onClose:_cache[14]||(_cache[14]=$event=>_ctx.close('content'))},[createBaseVNode("div",{class:"quark-popover",onClick:_cache[12]||(_cache[12]=$event=>_ctx.open('content'))},toDisplayString(_ctx.translate("customContent")),1),createBaseVNode("div",{slot:"content",class:"quark-popover-content",onClick:_cache[13]||(_cache[13]=$event=>_ctx.close('content'))},toDisplayString(_ctx.translate("content")),1)],40,_hoisted_6)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.b0867d06.js b/demo/assets/demo-legacy.b0867d06.js new file mode 100644 index 000000000..264284094 --- /dev/null +++ b/demo/assets/demo-legacy.b0867d06.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".action-sheet-demo .demo-buttons quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.action-sheet-demo .demo-buttons {\n margin-bottom: 24px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,ActionSheet,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;ActionSheet=module.I;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("sharesheet");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basicUsage:"基本使用",customStyle:"自定义样式",titleStyle:"标题样式",cancelButtonStyle:"取消按钮样式",options:["微信","微信朋友圈","QQ","QQ空间","微博","二维码"],maskClick:"蒙版点击",cancel:"取消"},"en-US":{basicUsage:"Basic Usage",customStyle:"Custom Style",titleStyle:"Title Style",cancelButtonStyle:"Cancel Button Style",options:["WeChat","WeChat Moments","QQ","QQ Space","WeiBo","QR Code"],maskClick:"Mask Click",cancel:"Cancel"}});});const showBase=()=>{ActionSheet({options:[{name:`${translate("options")[0]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png"},{name:`${translate("options")[1]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png"},{name:`${translate("options")[2]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/J4TWX9Jpca.png"},{name:`${translate("options")[3]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/wG7wG2CHQx.png"},{name:`${translate("options")[4]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/vt_vyR3M8I.png"},{name:`${translate("options")[5]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/hvu4xjJpNY.png"}],select:(index,action)=>{Toast.text(action.name);}});};const showTitleCustom=()=>{ActionSheet({titleColor:"red",titleFontSize:20,options:[{name:`${translate("options")[0]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png"},{name:`${translate("options")[1]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png"},{name:`${translate("options")[2]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/J4TWX9Jpca.png"}],select:(index,action)=>{Toast.text(action.name);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};const showCancelCustom=()=>{ActionSheet({options:[{name:`${translate("options")[0]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png"},{name:`${translate("options")[1]}`,icon:"https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png"}],cancelColor:"red",select:(index,action)=>{Toast.text(action.name);},cancel:()=>{Toast.text(`${translate("cancel")}`);},close:()=>{Toast.text(`${translate("maskClick")}`);}});};return{showBase,showTitleCustom,showCancelCustom,translate};}});const _hoisted_1={class:"demo no-padding action-sheet-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basicUsage")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.showBase&&_ctx.showBase(...args)),title:_ctx.translate('basicUsage')},null,8,_hoisted_2)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customStyle")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.showTitleCustom&&_ctx.showTitleCustom(...args)),title:_ctx.translate('titleStyle')},null,8,_hoisted_3),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.showCancelCustom&&_ctx.showCancelCustom(...args)),title:_ctx.translate('cancelButtonStyle')},null,8,_hoisted_4)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.b207e38c.js b/demo/assets/demo-legacy.b207e38c.js new file mode 100644 index 000000000..6ce079b7a --- /dev/null +++ b/demo/assets/demo-legacy.b207e38c.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".popup-demo .demo-buttons quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.popup-demo .demo-buttons {\n margin-bottom: 24px;\n}\n.popup-demo .popup-body {\n flex: 1;\n padding: 0 16px 32px;\n}\n.popup-demo .popup-body h4 {\n font-size: 14px;\n font-weight: 400;\n color: #242629;\n}\n.popup-demo .popup-body p {\n font-size: 12px;\n color: #879099;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock,createTextVNode;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;createTextVNode=module.h;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("popupextra");const _sfc_main=createDemo({setup(){const open=ref(false);const open2=ref(false);const open3=ref(false);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法",customTitle:"自定义头部",popupTitle:"主标题",popupTitle2:"主副标题"},"en-US":{basic:"Basic Usage",customTitle:"custom title",popupTitle:"main title",popupTitle2:"main subtitle"}});});return{open,open2,open3,translate};}});const _hoisted_1={class:"demo no-padding popup-demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["open"];const _hoisted_6=/*#__PURE__*/createBaseVNode("div",{class:"popup-body"},[/*#__PURE__*/createBaseVNode("h4",{class:""},"1.正正正正正正正正正正正"),/*#__PURE__*/createBaseVNode("p",null," 孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。 故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法 。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒 暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇 、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之 者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰 行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。 將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。 計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。 兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利 而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親 而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。 夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不 勝，而況無算乎！吾以此觀之，勝負見矣。 ")],-1);const _hoisted_7=[_hoisted_6];const _hoisted_8=["open"];const _hoisted_9=/*#__PURE__*/createBaseVNode("div",{class:"popup-body"},[/*#__PURE__*/createBaseVNode("h4",{class:""},"1.正正正正正正正正正正正"),/*#__PURE__*/createBaseVNode("p",null," 孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。 故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法 。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒 暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇 、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之 者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰 行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。 將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。 計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。 兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利 而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親 而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。 夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不 勝，而況無算乎！吾以此觀之，勝負見矣。 孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。 故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法 。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒 暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇 、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之 者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰 行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。 將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。 計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。 兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利 而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親 而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。 夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不 勝，而況無算乎！吾以此觀之，勝負見矣。 孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。 故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法 。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒 暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇 、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之 者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰 行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。 將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。 計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。 兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利 而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親 而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。 夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不 勝，而況無算乎！吾以此觀之，勝負見矣。 ")],-1);const _hoisted_10=[_hoisted_9];const _hoisted_11=["open"];const _hoisted_12=/*#__PURE__*/createBaseVNode("div",{slot:"title",style:{"margin":"20px"}},[/*#__PURE__*/createBaseVNode("span",{style:{"color":"red"}},"自定义"),/*#__PURE__*/createTextVNode("大标题文案 ")],-1);const _hoisted_13=/*#__PURE__*/createBaseVNode("div",{class:"popup-body"},[/*#__PURE__*/createBaseVNode("h4",{class:""},"1.正正正正正正正正正正正"),/*#__PURE__*/createBaseVNode("p",null," 孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。 故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法 。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒 暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇 、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之 者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰 行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。 將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。 計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。 兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利 而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親 而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。 夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不 勝，而況無算乎！吾以此觀之，勝負見矣。 ")],-1);const _hoisted_14=[_hoisted_12,_hoisted_13];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[0]||(_cache[0]=$event=>_ctx.open=true),title:_ctx.translate('popupTitle')},null,8,_hoisted_2),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[1]||(_cache[1]=$event=>_ctx.open2=true),title:_ctx.translate('popupTitle2')},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customTitle")),1),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[2]||(_cache[2]=$event=>_ctx.open3=true),title:_ctx.translate('customTitle')},null,8,_hoisted_4),createBaseVNode("quark-popupextra",{title:"大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案",open:_ctx.open,onClose:_cache[3]||(_cache[3]=$event=>_ctx.open=false)},_hoisted_7,40,_hoisted_5),createBaseVNode("quark-popupextra",{title:"大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案",subtitle:"副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案",open:_ctx.open2,safearea:"",onClose:_cache[4]||(_cache[4]=$event=>_ctx.open2=false)},_hoisted_10,40,_hoisted_8),createBaseVNode("quark-popupextra",{open:_ctx.open3,onClose:_cache[5]||(_cache[5]=$event=>_ctx.open3=false)},_hoisted_14,40,_hoisted_11)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.c3393ddd.js b/demo/assets/demo-legacy.c3393ddd.js new file mode 100644 index 000000000..3c29524a9 --- /dev/null +++ b/demo/assets/demo-legacy.c3393ddd.js @@ -0,0 +1,2 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".head-container {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 16px;\n padding-right: 16px;\n width: 100%;\n}\n.cancel {\n color: #969799;\n font-size: 14px;\n}\n.ensure {\n font-size: 14px;\n color: #0088ff;\n}\n.picker-title {\n font-size: 16px;\n color: #242729;\n}\n.custom-pickerview {\n --pickerview-item-height: 44px;\n --pickerview-height: 220px;\n --pickerview-row-top-mask-height: 88px;\n --pickerview-row-bottom-mask-height: 88px;\n --pickerview-scroll-margin-top: 88px;\n --pickerview-current-top: 90px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("picker");const _sfc_main=createDemo({setup(){const open=ref(false);const customOpen=ref(false);const pickerRef=ref(null);const customPickerRef=ref(null);onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础使用",head:"自定义样式",selectedTime:"请选择时间",confirmText:"确认",custom:{cancel:"取消",confirm:"确定",title:"请选择城市"},time:["上午","下午"],provinces:["浙江省"],values:["杭州","嘉兴","绍兴","宁波","湖州","千岛湖"],selected:"当前选中："},"en-US":{basic:"Basic Usage",head:"Custom Style",selectedTime:"Please Select Time",confirmText:"Confirm",custom:{cancel:"Cancel",confirm:"Confirm",title:"Please Select City"},time:["Morning","Afternoon"],provinces:["Zhejiang Province"],values:["Hangzhou","Jiaxing","Shaoxing","Ningbo","Huzhou","Qiandao Lake"],selected:"Currently Selected:"}});});onMounted(()=>{setTimeout(()=>{//模拟异步获取数据 +const preview=pickerRef.value;preview.setColumns([{defaultIndex:2,values:translate("calendaritem.weekdays")},{defaultIndex:0,values:translate("time")}]);const customPreview=customPickerRef.value;customPreview.setColumns([{defaultIndex:0,values:translate("provinces")},{defaultIndex:2,values:translate("values")}]);},0);});const click=()=>{open.value=true;};const customClick=()=>{customOpen.value=true;};const close=type=>{if(type===0){open.value=false;}else if(type===1){customOpen.value=false;}};const confirm=({detail})=>{const values=detail.value.map(column=>{return column.value;}).join("，");Toast.text(`${translate("selected")}${values}`);open.value=false;};const customConfirm=()=>{const customPreview=customPickerRef.value;const values=customPreview.getValues().map(column=>{return column.value;}).join("，");Toast.text(`${translate("selected")}${values}`);customOpen.value=false;};const change=({detail})=>{console.log(detail.value,33333);};return{open,customOpen,pickerRef,customPickerRef,click,customClick,close,confirm,customConfirm,change,translate};}});const _hoisted_1={class:"demo"};const _hoisted_2={ref:"customPickerRef",class:"custom-pickerview"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-pickerview",{ref:"pickerRef",onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.change&&_ctx.change(...args)),onConfirm:_cache[1]||(_cache[1]=(...args)=>_ctx.confirm&&_ctx.confirm(...args))},null,544),createBaseVNode("h2",null,toDisplayString(_ctx.translate("head")),1),createBaseVNode("quark-pickerview",_hoisted_2,null,512)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.c579d66e.js b/demo/assets/demo-legacy.c579d66e.js new file mode 100644 index 000000000..37e4c7174 --- /dev/null +++ b/demo/assets/demo-legacy.c579d66e.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".outer {\n margin-top: 20px;\n color: #0f80e5;\n font-size: 14px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("empty");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",desc:"描述文字",button:"底部按钮",local:"局部空白页",image:"自定义图片",bottom:"自定义底部",title:"没有历史订单",order:"快去下一单吧!",return:"自定义底部",buttontext:"去下单"},"en-US":{basic:"Basic Usage",desc:"Description",button:"Button",local:"Local empty",image:"Custom Image",bottom:"Csutom Bottom",title:"No Order History",order:"Go and Order!",return:"Csutom Bottom",buttontext:"Go to Order"}});});return{translate};}});const _hoisted_1={class:"demo"};const _hoisted_2=/*#__PURE__*/createBaseVNode("quark-empty",null,null,-1);const _hoisted_3=["title","desc"];const _hoisted_4=["title","desc","buttontext"];const _hoisted_5=["title","desc","buttontext"];const _hoisted_6=/*#__PURE__*/createBaseVNode("quark-empty",{image:"https://m.hellobike.com/resource/helloyun/13459/UxNf7LpJ2G.png"},null,-1);const _hoisted_7={class:"outer",slot:"footer"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),_hoisted_2,createBaseVNode("h2",null,toDisplayString(_ctx.translate("desc")),1),createBaseVNode("quark-empty",{image:"https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png",title:_ctx.translate('title'),desc:_ctx.translate('order')},null,8,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("button")),1),createBaseVNode("quark-empty",{image:"https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png",title:_ctx.translate('title'),desc:_ctx.translate('order'),buttontext:_ctx.translate('buttontext')},null,8,_hoisted_4),createBaseVNode("h2",null,toDisplayString(_ctx.translate("local")),1),createBaseVNode("quark-empty",{image:"https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png",title:_ctx.translate('title'),desc:_ctx.translate('order'),buttontext:_ctx.translate('buttontext'),type:"local"},null,8,_hoisted_5),createBaseVNode("h2",null,toDisplayString(_ctx.translate("image")),1),_hoisted_6,createBaseVNode("h2",null,toDisplayString(_ctx.translate("bottom")),1),createBaseVNode("quark-empty",null,[createBaseVNode("div",_hoisted_7,toDisplayString(_ctx.translate("return"))+" 🎉🎉🎉",1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.ca6cab93.js b/demo/assets/demo-legacy.ca6cab93.js new file mode 100644 index 000000000..f29812c51 --- /dev/null +++ b/demo/assets/demo-legacy.ca6cab93.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".button-demo .demo-buttons {\n margin: 8px;\n}\n.button-demo .mgr-10 {\n margin-right: 10px;\n}\n.button-demo .css {\n font-size: 20px;\n color: #333;\n letter-spacing: 2px;\n --countdown-num-min-width: 20px;\n --countdown-num-background: #fff;\n --countdown-num-padding: 0 10px;\n --countdown-num-border-radius: 6px;\n --countdown-dot-color: #333;\n --countdown-dot-margin: 6px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("button");const _sfc_main=createDemo({setup(){const time1=ref(7200000);const time2=ref(360000);const time3=ref(5000);onBeforeMount(()=>{useTranslate({"zh-CN":{base:"基本使用",format:"格式化",callback:"结束回调",style:"样式自定义",slot:"自定义间隔符"},"en-US":{base:"Basic Usage",format:"Custom Format",callback:"End the callback",style:"Custom Style",slot:"Custom spacer"}});});const onEnd=()=>{Toast.text("开始秒杀");};return{translate,time1,time2,time3,onEnd};}});const _hoisted_1={class:"demo button-demo"};const _hoisted_2={class:"demo-buttons"};const _hoisted_3=["time"];const _hoisted_4={class:"demo-buttons"};const _hoisted_5=["time"];const _hoisted_6=["time"];const _hoisted_7=["time"];const _hoisted_8={class:"demo-buttons"};const _hoisted_9=["time"];const _hoisted_10={class:"demo-buttons"};const _hoisted_11=["time"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("base")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-countdown",{time:_ctx.time1},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("format")),1),createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-countdown",{format:"MM:SS",time:_ctx.time2,class:"mgr-10"},null,8,_hoisted_5),createBaseVNode("quark-countdown",{format:"MM-SS",time:_ctx.time2,class:"mgr-10"},null,8,_hoisted_6),createBaseVNode("quark-countdown",{format:"SS",time:_ctx.time2},null,8,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("callback")),1),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-countdown",{time:_ctx.time3,onEnd:_cache[0]||(_cache[0]=(...args)=>_ctx.onEnd&&_ctx.onEnd(...args))},null,40,_hoisted_9)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("style")),1),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-countdown",{class:"css",time:_ctx.time1},null,8,_hoisted_11)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.cb4724e0.js b/demo/assets/demo-legacy.cb4724e0.js new file mode 100644 index 000000000..77b84af92 --- /dev/null +++ b/demo/assets/demo-legacy.cb4724e0.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".switch-demo quark-switch {\n margin-right: 20px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("switch");const _sfc_main=createDemo({setup(){const data=ref({checked1:false,checked2:true,checked3:true,loading:true});onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法",disabled:"禁用状态",size:"自定义大小",color:"自定义颜色",loading:"加载状态"},"en-US":{basic:"Basic Usage",disabled:"Disabled",size:"Custom Size",color:"Custom Color",loading:"Loading"}});});const handleChange1=e=>{console.log("current value is:",e.detail.value);data.value.checked1=e.detail.value;};const handleChange2=e=>{console.log("current value is:",e.detail.value);data.value.checked2=!data.value.checked2;};const handleChange3=e=>{console.log("current value is:",e.detail.value);data.value.checked3=e.detail.value;};return{data,handleChange1,handleChange2,handleChange3,translate};}});const _hoisted_1={class:"demo switch-demo",style:{"background-color":"#fff"}};const _hoisted_2=["checked"];const _hoisted_3=/*#__PURE__*/createBaseVNode("quark-switch",{disabled:""},null,-1);const _hoisted_4=/*#__PURE__*/createBaseVNode("quark-switch",{disabled:"",checked:""},null,-1);const _hoisted_5=["checked"];const _hoisted_6=["checked"];const _hoisted_7=["checked"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-switch",{checked:_ctx.data.checked1,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.handleChange1&&_ctx.handleChange1(...args))},null,40,_hoisted_2),createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),_hoisted_3,_hoisted_4,createBaseVNode("h2",null,toDisplayString(_ctx.translate("size")),1),createBaseVNode("quark-switch",{onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.handleChange2&&_ctx.handleChange2(...args)),checked:_ctx.data.checked2,size:"20"},null,40,_hoisted_5),createBaseVNode("h2",null,toDisplayString(_ctx.translate("color")),1),createBaseVNode("quark-switch",{onChange:_cache[2]||(_cache[2]=(...args)=>_ctx.handleChange3&&_ctx.handleChange3(...args)),checked:_ctx.data.checked3,color:"red",inactivecolor:"#08f"},null,40,_hoisted_6),createBaseVNode("h2",null,toDisplayString(_ctx.translate("loading")),1),createBaseVNode("quark-switch",{onChange:_cache[3]||(_cache[3]=(...args)=>_ctx.handleChange3&&_ctx.handleChange3(...args)),checked:_ctx.data.checked3,loading:""},null,40,_hoisted_7)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.d076717e.js b/demo/assets/demo-legacy.d076717e.js new file mode 100644 index 000000000..b40101a2a --- /dev/null +++ b/demo/assets/demo-legacy.d076717e.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".flex-box[data-v-84a6474c] {\n display: flex;\n}\n.flex-box quark-button[data-v-84a6474c] {\n margin: 0 8px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onMounted,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,withDirectives,vModelText,Fragment,renderList,openBlock,pushScopeId,popScopeId;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onMounted=module.g;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;withDirectives=module.w;vModelText=module.v;Fragment=module.F;renderList=module.m;openBlock=module.b;pushScopeId=module.p;popScopeId=module.q;}],execute:function(){var demo_scss_vue_type_style_index_0_src_scoped_true_lang='';const{createDemo,translate}=createComponent("form");const _sfc_main=createDemo({setup(){const formData=ref({checkbox:["apple"],radio:"",rate:"",stepper:"",switch:false,textarea:"",uploader:[],picker:""});const form=ref({name:"",password:"",other:{age:18}});const formRef=ref(null);const pickerRef=ref(null);const ruleFormRef=ref(null);const ruleForm=ref({name:"",password:"",age:""});const formAttrRef=ref();const attrsForm=ref({name:"",password:"",age:""});const formItemsRef=ref();const dynamicFormData=ref({user:[{name:"",age:""}]});const addDynamicForm=()=>{dynamicFormData.value.user.push({name:"",age:""});};const dynamicRules={name:[{required:true,message:translate("error.name")}],age:[{required:true,message:translate("error.age1")}]};onMounted(()=>{var _formRef$value,_formRef$value2,_formItemsRef$value,_formAttrRef$value,_formAttrRef$value2,_ruleFormRef$value,_dynamicFormRef$value;const picker=pickerRef.value;picker.setColumns([{defaultIndex:0,values:translate("cities")}]);(_formRef$value=formRef.value)===null||_formRef$value===void 0?void 0:_formRef$value.setModel(form.value);(_formRef$value2=formRef.value)===null||_formRef$value2===void 0?void 0:_formRef$value2.setRules({name:[{required:true,message:translate("error.name")}],password:{required:true,message:translate("error.password")},other:{age:[{required:true,message:translate("error.age1")}]}});(_formItemsRef$value=formItemsRef.value)===null||_formItemsRef$value===void 0?void 0:_formItemsRef$value.setModel(formData.value);(_formAttrRef$value=formAttrRef.value)===null||_formAttrRef$value===void 0?void 0:_formAttrRef$value.setModel(attrsForm.value);(_formAttrRef$value2=formAttrRef.value)===null||_formAttrRef$value2===void 0?void 0:_formAttrRef$value2.setRules({name:[{required:true,message:translate("error.name")}],age:{required:true,message:translate("error.age1")}});(_ruleFormRef$value=ruleFormRef.value)===null||_ruleFormRef$value===void 0?void 0:_ruleFormRef$value.setRules({name:[{required:true,message:translate("error.errorMsg"),pattern:/\w{6}/}],password:[{required:true,validator:validatorPassword}],age:[{required:true,asyncValidator:asyncValidator}]});(_dynamicFormRef$value=dynamicFormRef.value)===null||_dynamicFormRef$value===void 0?void 0:_dynamicFormRef$value.setModel(dynamicFormData.value);});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",rule:"自定义校验规则",items:"表单项类型",slots:"使用插槽",attrs:"表单属性",dynamic:"动态增加表单项"},label:{name:"姓名",password:"密码",age:"年龄",checkbox:"复选框",radio:"单选框",switch:"开关",rate:"评分",stepper:"步进器",textarea:"文本域",uploader:"文件上传",picker:"选择器"},placeholders:{pattern:"正则校验",validator:"函数校验",asyncValidator:"异步校验"},cities:["杭州","嘉兴","绍兴","宁波","湖州","千岛湖"],submit:"提交",reset:"重置",add:"添加",error:{name:"请输入姓名",password:"请输入密码",age1:"请输入年龄",age:"不能小于18岁",errorMsg:"请输入正确内容",errorPwd:"密码不能为123456"},pickerTitle:"请选择城市",enum:{apple:"苹果",banana:"香蕉",square:"方形",circle:"圆形"},customLabel:"自定义label",search:"搜索"},"en-US":{title:{basic:"Basic Usage",rule:"Custom Rules",items:"Form Items",slots:"Use slots",attrs:"Form Attributes",dynamic:"Add form items dynamically"},label:{name:"Name",password:"Password",age:"Age",checkbox:"Checkbox",radio:"Radio",switch:"Swicth",rate:"Rate",stepper:"Stepper",textarea:"Textarea",uploader:"Uploader",picker:"Picker"},placeholders:{pattern:"Use pattern",validator:"Use validator",asyncValidator:"Use async validator"},cities:["Hangzhou","Jiaxing","Shaoxing","Ningbo","Huzhou","Qiandaohu"],submit:"Submit",reset:"Reset",add:"Add",error:{name:"Name is required",password:"Password is required",age:"Must not be younger than 18",age1:"Age is required",errorMsg:"Error message",errorPwd:"Password can not be 123456"},pickerTitle:"Please choose city",enum:{apple:"apple",banana:"banana",square:"square",circle:"circle"},customLabel:"Custom Label",search:"Search"}});});const submit=ref=>{ref.validate((valid,errorMsg)=>{console.log("submit",valid,errorMsg);});};const reset=()=>{formRef.value.resetFields();};const getValues=ref=>{const values=ref.getValues();console.log(values);};const onCheckboxChange=({detail})=>{formData.value.checkbox=detail.value;};const onRadioChange=({detail})=>{formData.value.radio=detail.value;};const pickerVisible=ref(false);const close=()=>{pickerVisible.value=false;};const confirm=({detail})=>{formData.value.picker=detail.value.map(i=>i.value).join("");pickerVisible.value=false;};const ruleFormSubmit=async()=>{const valid=await ruleFormRef.value.validate();console.log(valid);};const validatorPassword=(rule,val,callback)=>{if(!val){callback(new Error(translate("error.errorMsg")));}else if(val==="123456"){callback(new Error(translate("error.errorPwd")));}else{callback();}};const asyncValidator=(rule,value)=>{return new Promise((resolve,reject)=>{if(value<18){reject(translate("error.age"));}else{resolve();}});};const dynamicFormRef=ref();return{formRef,formData,pickerRef,translate,close,confirm,onCheckboxChange,pickerVisible,onRadioChange,submit,reset,form,ruleFormRef,ruleForm,ruleFormSubmit,formAttrRef,attrsForm,formItemsRef,getValues,addDynamicForm,dynamicRules,dynamicFormData,dynamicFormRef};}});const _withScopeId=n=>(pushScopeId("data-v-84a6474c"),n=n(),popScopeId(),n);const _hoisted_1={class:"demo scoped-form"};const _hoisted_2={ref:"formRef",labelwidth:"70px"};const _hoisted_3=["label"];const _hoisted_4=["placeholder"];const _hoisted_5=["label"];const _hoisted_6=["placeholder"];const _hoisted_7=["label"];const _hoisted_8=["placeholder"];const _hoisted_9=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("br",null,null,-1));const _hoisted_10={class:"flex-box"};const _hoisted_11={ref:"ruleFormRef",labelwidth:"90px"};const _hoisted_12=["label"];const _hoisted_13=["placeholder"];const _hoisted_14=["label"];const _hoisted_15=["placeholder"];const _hoisted_16=["label"];const _hoisted_17=["placeholder"];const _hoisted_18=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("br",null,null,-1));const _hoisted_19={class:"flex-box"};const _hoisted_20={ref:"formItemsRef"};const _hoisted_21=["label"];const _hoisted_22=["value"];const _hoisted_23={name:"apple"};const _hoisted_24={name:"banana"};const _hoisted_25=["label"];const _hoisted_26=["value"];const _hoisted_27={name:"square"};const _hoisted_28={name:"circle"};const _hoisted_29=["label"];const _hoisted_30=["checked"];const _hoisted_31=["label"];const _hoisted_32=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-rate",null,null,-1));const _hoisted_33=[_hoisted_32];const _hoisted_34=["label"];const _hoisted_35=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-stepper",{min:"0",max:"99"},null,-1));const _hoisted_36=[_hoisted_35];const _hoisted_37=["label"];const _hoisted_38=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-textarea",{autosize:""},null,-1));const _hoisted_39=[_hoisted_38];const _hoisted_40=["label"];const _hoisted_41=["label"];const _hoisted_42=["value"];const _hoisted_43=["title","open"];const _hoisted_44=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("br",null,null,-1));const _hoisted_45={class:"flex-box"};const _hoisted_46={ref:"formAttrRef",labelwidth:"60px",labelposition:"right",labelsuffix:"："};const _hoisted_47=["label"];const _hoisted_48=["placeholder"];const _hoisted_49=["label","rules"];const _hoisted_50=["placeholder"];const _hoisted_51=["label"];const _hoisted_52=["placeholder"];const _hoisted_53={slot:"label"};const _hoisted_54=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("quark-field",null,null,-1));const _hoisted_55={slot:"suffix"};const _hoisted_56={type:"primary",size:"small"};const _hoisted_57={ref:"dynamicFormRef"};const _hoisted_58=["label","prop","rules"];const _hoisted_59=["onUpdate:modelValue","placeholder"];const _hoisted_60=["label","prop","rules"];const _hoisted_61=["onUpdate:modelValue","placeholder"];const _hoisted_62=/*#__PURE__*/_withScopeId(()=>/*#__PURE__*/createBaseVNode("br",null,null,-1));const _hoisted_63={class:"flex-box"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-form",_hoisted_2,[createBaseVNode("quark-form-item",{prop:"name",label:_ctx.translate('label.name')},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":_cache[0]||(_cache[0]=$event=>_ctx.form.name=$event),placeholder:_ctx.translate('label.name')},null,8,_hoisted_4),[[vModelText,_ctx.form.name]])],8,_hoisted_3),createBaseVNode("quark-form-item",{prop:"password",label:_ctx.translate('label.password')},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":_cache[1]||(_cache[1]=$event=>_ctx.form.password=$event),type:"password",placeholder:_ctx.translate('label.password')},null,8,_hoisted_6),[[vModelText,_ctx.form.password]])],8,_hoisted_5),createBaseVNode("quark-form-item",{prop:"other.age",label:_ctx.translate('label.age')},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":_cache[2]||(_cache[2]=$event=>_ctx.form.other.age=$event),placeholder:_ctx.translate('label.age')},null,8,_hoisted_8),[[vModelText,_ctx.form.other.age]])],8,_hoisted_7)],512),_hoisted_9,createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-button",{type:"primary",size:"big",onClick:_cache[3]||(_cache[3]=$event=>_ctx.submit(_ctx.formRef))},toDisplayString(_ctx.translate("submit")),1),createBaseVNode("quark-button",{size:"big",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.reset&&_ctx.reset(...args))},toDisplayString(_ctx.translate("reset")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.rule")),1),createBaseVNode("quark-form",_hoisted_11,[createBaseVNode("quark-form-item",{prop:"name",label:_ctx.translate('label.name')},[createBaseVNode("quark-field",{placeholder:_ctx.translate('placeholders.pattern')},null,8,_hoisted_13)],8,_hoisted_12),createBaseVNode("quark-form-item",{prop:"password",label:_ctx.translate('label.password')},[createBaseVNode("quark-field",{value:"123456",placeholder:_ctx.translate('placeholders.validator')},null,8,_hoisted_15)],8,_hoisted_14),createBaseVNode("quark-form-item",{prop:"age",label:_ctx.translate('label.age')},[createBaseVNode("quark-field",{placeholder:_ctx.translate('placeholders.asyncValidator')},null,8,_hoisted_17)],8,_hoisted_16)],512),_hoisted_18,createBaseVNode("div",_hoisted_19,[createBaseVNode("quark-button",{type:"primary",size:"big",onClick:_cache[5]||(_cache[5]=(...args)=>_ctx.ruleFormSubmit&&_ctx.ruleFormSubmit(...args))},toDisplayString(_ctx.translate("submit")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.items")),1),createBaseVNode("quark-form",_hoisted_20,[createBaseVNode("quark-form-item",{prop:"checkbox",label:_ctx.translate('label.checkbox')},[createBaseVNode("quark-checkbox-group",{value:_ctx.formData.checkbox,onChange:_cache[6]||(_cache[6]=(...args)=>_ctx.onCheckboxChange&&_ctx.onCheckboxChange(...args))},[createBaseVNode("quark-checkbox",_hoisted_23,toDisplayString(_ctx.translate("enum.apple")),1),createBaseVNode("quark-checkbox",_hoisted_24,toDisplayString(_ctx.translate("enum.banana")),1)],40,_hoisted_22)],8,_hoisted_21),createBaseVNode("quark-form-item",{prop:"radio",label:_ctx.translate('label.radio')},[createBaseVNode("quark-radio-group",{value:_ctx.formData.radio,direction:"horizontal",onChange:_cache[7]||(_cache[7]=(...args)=>_ctx.onRadioChange&&_ctx.onRadioChange(...args))},[createBaseVNode("quark-radio",_hoisted_27,toDisplayString(_ctx.translate("enum.square")),1),createBaseVNode("quark-radio",_hoisted_28,toDisplayString(_ctx.translate("enum.circle")),1)],40,_hoisted_26)],8,_hoisted_25),createBaseVNode("quark-form-item",{prop:"swich",label:_ctx.translate('label.switch')},[createBaseVNode("quark-switch",{checked:_ctx.formData.switch},null,8,_hoisted_30)],8,_hoisted_29),createBaseVNode("quark-form-item",{prop:"rate",label:_ctx.translate('label.rate')},_hoisted_33,8,_hoisted_31),createBaseVNode("quark-form-item",{prop:"stepper",label:_ctx.translate('label.stepper')},_hoisted_36,8,_hoisted_34),createBaseVNode("quark-form-item",{prop:"textarea",label:_ctx.translate('label.textarea')},_hoisted_39,8,_hoisted_37),createBaseVNode("quark-form-item",{prop:"uploader",label:_ctx.translate('label.uploader')},[withDirectives(createBaseVNode("quark-uploader",{"onUpdate:modelValue":_cache[8]||(_cache[8]=$event=>_ctx.formData.uploader=$event),preview:""},null,512),[[vModelText,_ctx.formData.uploader]])],8,_hoisted_40),createBaseVNode("quark-form-item",{prop:"picker",label:_ctx.translate('label.picker'),islink:""},[createBaseVNode("quark-field",{value:_ctx.formData.picker,readonly:"",onClick:_cache[9]||(_cache[9]=$event=>_ctx.pickerVisible=true)},null,8,_hoisted_42),createBaseVNode("quark-picker",{title:_ctx.translate('pickerTitle'),ref:"pickerRef",open:_ctx.pickerVisible,onClose:_cache[10]||(_cache[10]=(...args)=>_ctx.close&&_ctx.close(...args)),onConfirm:_cache[11]||(_cache[11]=(...args)=>_ctx.confirm&&_ctx.confirm(...args))},null,40,_hoisted_43)],8,_hoisted_41)],512),_hoisted_44,createBaseVNode("div",_hoisted_45,[createBaseVNode("quark-button",{type:"primary",size:"big",onClick:_cache[12]||(_cache[12]=$event=>_ctx.getValues(_ctx.formItemsRef))},toDisplayString(_ctx.translate("submit")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.attrs")),1),createBaseVNode("quark-form",_hoisted_46,[createBaseVNode("quark-form-item",{prop:"name",label:_ctx.translate('label.name'),labelwidth:"70px"},[createBaseVNode("quark-field",{placeholder:_ctx.translate('label.name')},null,8,_hoisted_48)],8,_hoisted_47),createBaseVNode("quark-form-item",{prop:"password",hideasterisk:"",label:_ctx.translate('label.password'),rules:[{required:true,message:_ctx.translate('error.password')}]},[createBaseVNode("quark-field",{type:"password",placeholder:_ctx.translate('label.password')},null,8,_hoisted_50)],8,_hoisted_49),createBaseVNode("quark-form-item",{prop:"age",label:_ctx.translate('label.age'),hidemessage:""},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":_cache[13]||(_cache[13]=$event=>_ctx.attrsForm.age=$event),placeholder:_ctx.translate('label.age')},null,8,_hoisted_52),[[vModelText,_ctx.attrsForm.age]])],8,_hoisted_51)],512),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.slots")),1),createBaseVNode("quark-form",null,[createBaseVNode("quark-form-item",null,[createBaseVNode("div",_hoisted_53,toDisplayString(_ctx.translate("customLabel")),1),_hoisted_54,createBaseVNode("div",_hoisted_55,[createBaseVNode("quark-button",_hoisted_56,toDisplayString(_ctx.translate("search")),1)])])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.dynamic")),1),createBaseVNode("quark-form",_hoisted_57,[(openBlock(true),createElementBlock(Fragment,null,renderList(_ctx.dynamicFormData.user,(item,index)=>{return openBlock(),createElementBlock(Fragment,{key:index},[createBaseVNode("quark-form-item",{label:`${_ctx.translate('label.name')}${index}`,prop:`user.${index}.name`,rules:[{required:true,message:_ctx.translate('error.name')}]},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":$event=>item.name=$event,placeholder:_ctx.translate('label.name')},null,8,_hoisted_59),[[vModelText,item.name]])],8,_hoisted_58),createBaseVNode("quark-form-item",{label:`${_ctx.translate('label.age')}${index}`,prop:`user.${index}.age`,rules:[{required:true,message:_ctx.translate('error.age1')}]},[withDirectives(createBaseVNode("quark-field",{"onUpdate:modelValue":$event=>item.age=$event,placeholder:_ctx.translate('label.age')},null,8,_hoisted_61),[[vModelText,item.age]])],8,_hoisted_60),_hoisted_62],64);}),128))],512),createBaseVNode("div",_hoisted_63,[createBaseVNode("quark-button",{type:"primary",size:"big",onClick:_cache[14]||(_cache[14]=$event=>_ctx.submit(_ctx.dynamicFormRef))},toDisplayString(_ctx.translate("submit")),1),createBaseVNode("quark-button",{size:"big",onClick:_cache[15]||(_cache[15]=(...args)=>_ctx.addDynamicForm&&_ctx.addDynamicForm(...args))},toDisplayString(_ctx.translate("add")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render],['__scopeId',"data-v-84a6474c"]]));}};});})(); diff --git a/demo/assets/demo-legacy.d91f578e.js b/demo/assets/demo-legacy.d91f578e.js new file mode 100644 index 000000000..5b1d46342 --- /dev/null +++ b/demo/assets/demo-legacy.d91f578e.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".field-demo .demo-inputs {\n margin-bottom: 24px;\n}\n.field-demo .sapce {\n margin-bottom: 10px;\n}\n.field-demo h2 {\n margin-top: 10px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #909ca4;\n padding: 0 10px;\n font-weight: normal;\n}\n.field-demo .type {\n background: #fff;\n}\n.field-demo .demo-inputs .line {\n height: 1px;\n width: calc(100% - 32px);\n background: #ebedf0;\n margin: auto;\n}\n.field-demo .theme {\n --field-label-width: 100px;\n --field-label-text-color: green;\n --field-label-font-size: 18px;\n --field-label-margin-right: 10px;\n --field-input-text-color: #999;\n --field-input-font-size: 20px;\n --field-placeholder-text-color: red;\n --field-placeholder-font-size: 12px;\n --field-disabled-text-color: #eee;\n}\n.field-demo .oneLine {\n --field-input-align: center;\n}\n.field-demo .label {\n font-size: 16px;\n min-width: 119px;\n margin-right: 12px;\n font-weight: 500;\n color: #242729;\n}\n.field-demo .label span {\n margin: 0;\n display: block;\n font-size: 13px;\n font-weight: 400;\n color: #879099;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("field");const _sfc_main=createDemo({setup(){const value=ref(1);const disabled=ref(true);const css=ref({labelWidth:"100px",labelColor:"#ccc",labelSize:"16px",labelMarginRight:"10px",inputColor:"#999",inputSize:"12px",placeholderColor:"red"});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",head:"自定义标题/无标题",disabled:"禁用与只读",css:"css 属性",event:"事件",required:"设置必填字段"},basic:{placeholder:"请输入文本",label1:"文本",label2:"密码",label3:"数字",label4:"最多5位数",value:"一二三四五"},head:{value:"自定义标题",main:"主标题",subtitle:"这是一行副标题"},nohead:{placeholder:"禁用label",value:"无标题"},disabled:{value:"我禁用了",label:"禁用"},readonly:{value:"我是只读的",label:"只读"},requiredText:{placeholder:"请输入文本",label:"文本",error:"文本内容不能为空"},requiredPhone:{placeholder:"请输入手机号",label:"手机号",error:"请输入正确的手机号"}},"en-US":{title:{basic:"Basic Usage",head:"Custom Title",disabled:"Disabled & Readonly",css:"CSS Style",event:"Event",required:"Requied Content Setting"},basic:{placeholder:"Please enter text",label1:"Text",label2:"Password",label3:"Number",label4:"Up to 5 digits",value:"One Two Tree Four Five"},head:{value:"Custom Title",main:"Main Title",subtitle:"Subtitle"},nohead:{placeholder:"Disable Label",value:"No Title"},disabled:{value:"Disabled",label:"Disabled"},readonly:{value:"Readonly",label:"Readonly"},requiredText:{placeholder:"Please enter text",label:"Text",error:"Text content cannot be empty"},requiredPhone:{placeholder:"Please enter phone number",label:"Phone number",error:"Please enter the correct number"}}});});onMounted(()=>{const field=document.getElementById("custom-rule");field.setRules([{validator:validatorPhone,message:`${translate("requiredPhone.error")}`}]);});const validatorPhone=value=>{if(!/^1[3456789]\d{9}$/.test(value)){return false;}return true;};const change=e=>{value.data=e.detail.value;Toast.text(e.detail.value);};const blur=()=>{Toast.text("blur");};const focus=()=>{Toast.text("focus");};return{value,disabled,css,change,blur,focus,translate};}});const _hoisted_1={class:"demo field-demo"};const _hoisted_2={class:"demo-inputs"};const _hoisted_3={class:"type"};const _hoisted_4=["placeholder","label"];const _hoisted_5=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_6=["label"];const _hoisted_7=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_8=["label"];const _hoisted_9=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_10=["value","label"];const _hoisted_11={class:"type"};const _hoisted_12=["value"];const _hoisted_13={slot:"label",class:"label"};const _hoisted_14=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_15=["placeholder","value"];const _hoisted_16=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_17={class:"type"};const _hoisted_18=["value","label"];const _hoisted_19=/*#__PURE__*/createBaseVNode("div",{class:"line"},null,-1);const _hoisted_20=["value","label"];const _hoisted_21={class:"type"};const _hoisted_22=["value"];const _hoisted_23=["label","value"];const _hoisted_24=["placeholder","label","errormsg"];const _hoisted_25=["placeholder","label"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("div",_hoisted_2,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("div",_hoisted_3,[createBaseVNode("quark-field",{placeholder:_ctx.translate('basic.placeholder'),label:_ctx.translate('basic.label1')},null,8,_hoisted_4),_hoisted_5,createBaseVNode("quark-field",{type:"password",value:"123456",label:_ctx.translate('basic.label2')},null,8,_hoisted_6),_hoisted_7,createBaseVNode("quark-field",{type:"number",value:"12345678901",max:"11",label:_ctx.translate('basic.label3')},null,8,_hoisted_8),_hoisted_9,createBaseVNode("quark-field",{value:_ctx.translate('basic.value'),maxlength:"5",label:_ctx.translate('basic.label4')},null,8,_hoisted_10)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.head")),1),createBaseVNode("div",_hoisted_11,[createBaseVNode("quark-field",{value:_ctx.translate('head.value')},[createBaseVNode("div",_hoisted_13,[createBaseVNode("p",null,toDisplayString(_ctx.translate("head.main")),1),createBaseVNode("span",null,toDisplayString(_ctx.translate("head.subtitle")),1)])],8,_hoisted_12),_hoisted_14,createBaseVNode("quark-field",{placeholder:_ctx.translate('nohead.placeholder'),value:_ctx.translate('nohead.value'),class:"oneLine"},null,8,_hoisted_15),_hoisted_16]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.disabled")),1),createBaseVNode("div",_hoisted_17,[createBaseVNode("quark-field",{value:_ctx.translate('disabled.value'),label:_ctx.translate('disabled.label'),disabled:""},null,8,_hoisted_18),_hoisted_19,createBaseVNode("quark-field",{value:_ctx.translate('readonly.value'),label:_ctx.translate('readonly.label'),readonly:""},null,8,_hoisted_20)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.css")),1),createBaseVNode("div",_hoisted_21,[createBaseVNode("quark-field",{class:"theme",value:_ctx.translate('title.css'),label:"css"},null,8,_hoisted_22)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.event")),1),createBaseVNode("quark-field",{label:_ctx.translate('title.event'),value:_ctx.value,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.change&&_ctx.change(...args)),onBlur:_cache[1]||(_cache[1]=(...args)=>_ctx.blur&&_ctx.blur(...args)),onFocus:_cache[2]||(_cache[2]=(...args)=>_ctx.focus&&_ctx.focus(...args))},null,40,_hoisted_23),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.required")),1),createBaseVNode("quark-field",{placeholder:_ctx.translate('requiredText.placeholder'),label:_ctx.translate('requiredText.label'),required:"",errormsg:_ctx.translate('requiredText.error')},null,8,_hoisted_24),createBaseVNode("quark-field",{placeholder:_ctx.translate('requiredPhone.placeholder'),label:_ctx.translate('requiredPhone.label'),id:"custom-rule",required:""},null,8,_hoisted_25)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.db32f7d1.js b/demo/assets/demo-legacy.db32f7d1.js new file mode 100644 index 000000000..7199261ca --- /dev/null +++ b/demo/assets/demo-legacy.db32f7d1.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-badge .demo-cell {\n display: grid;\n grid-template-columns: repeat(auto-fill, 76px);\n padding: 13px 16px;\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px 7px #edeef1;\n font-size: 14px;\n color: #666;\n align-items: self-end;\n}\n.demo-badge .custom-background {\n --badge-background: #666;\n}\n.demo-badge .custom-color {\n --badge-background: #fff;\n --badge-text-color: #fb990f;\n}\n.demo-badge .badge-container {\n margin: 0 10px;\n display: inline-flex;\n align-items: center;\n}\n.demo-badge .dark {\n padding: 5px;\n background: #666;\n}\n.demo-badge .child {\n height: 30px;\n width: 30px;\n background: #ccc;\n}\n.demo-badge .bg-color {\n --badge-background: linear-gradient(90deg, blue, pink);\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createStaticVNode,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createStaticVNode=module.e;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("badge");const _sfc_main=createDemo({setup(){const num=ref(11);const change=()=>{num.value=num.value+1;};onBeforeMount(()=>{useTranslate({"zh-CN":{independent:"徽标独立使用",word:"文字徽标",word2:"最高立减5元",type:"徽标类型",size:"徽标大小",style:"徽标风格",digital:"数字徽标",custom:"自定义样式-背景色",normal:"普通徽标",border:"边框徽标"},"en-US":{independent:"Badge Independent Use",word:"Word Badge",word2:"Up to $5 off",type:"Badge Type",size:"Badge Size",style:"Badge Style",digital:"Digital Badge",custom:"Custom-Background",normal:"Normal Badge",border:"Border Badge"}});});return{num,change,translate};}});const _hoisted_1={class:"demo demo-badge"};const _hoisted_2=/*#__PURE__*/createBaseVNode("div",{class:"badge-container"},[/*#__PURE__*/createBaseVNode("quark-badge",{type:"dot"})],-1);const _hoisted_3=/*#__PURE__*/createBaseVNode("div",{class:"badge-container"},[/*#__PURE__*/createBaseVNode("quark-badge",{type:"round",content:"9"})],-1);const _hoisted_4={class:"badge-container"};const _hoisted_5=["content"];const _hoisted_6={class:"badge-container"};const _hoisted_7=["content"];const _hoisted_8=/*#__PURE__*/createStaticVNode("
",2);const _hoisted_10=/*#__PURE__*/createStaticVNode("
",4);const _hoisted_14={class:"badge-container"};const _hoisted_15=["content"];const _hoisted_16={class:"badge-container dark"};const _hoisted_17=["content"];const _hoisted_18=/*#__PURE__*/createStaticVNode("
",2);const _hoisted_20={class:"badge-container"};const _hoisted_21=["content"];const _hoisted_22=/*#__PURE__*/createBaseVNode("div",{class:"child"},null,-1);const _hoisted_23=[_hoisted_22];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("independent")),1),_hoisted_2,_hoisted_3,createBaseVNode("div",_hoisted_4,[createBaseVNode("quark-badge",{type:"label",content:_ctx.translate('word')},null,8,_hoisted_5)]),createBaseVNode("div",_hoisted_6,[createBaseVNode("quark-badge",{type:"label",size:"big",content:_ctx.translate('word2')},null,8,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("type")),1),_hoisted_8,createBaseVNode("h2",null,toDisplayString(_ctx.translate("size")),1),_hoisted_10,createBaseVNode("h2",null,toDisplayString(_ctx.translate("style")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-badge",{type:"label",content:_ctx.translate('normal'),size:"big"},null,8,_hoisted_15)]),createBaseVNode("div",_hoisted_16,[createBaseVNode("quark-badge",{border:"",type:"label",content:_ctx.translate('border'),size:"big"},null,8,_hoisted_17)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("digital")),1),_hoisted_18,createBaseVNode("h2",{onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.change&&_ctx.change(...args))},toDisplayString(_ctx.translate("custom")),1),createBaseVNode("div",_hoisted_20,[createBaseVNode("quark-badge",{class:"bg-color",content:_ctx.num},_hoisted_23,8,_hoisted_21)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.dcc5df55.js b/demo/assets/demo-legacy.dcc5df55.js new file mode 100644 index 000000000..2dc6b8229 --- /dev/null +++ b/demo/assets/demo-legacy.dcc5df55.js @@ -0,0 +1,2 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".head-container {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 16px;\n padding-right: 16px;\n width: 100%;\n}\n.cancel {\n color: #969799;\n font-size: 14px;\n}\n.ensure {\n font-size: 14px;\n color: #0088ff;\n}\n.picker-title {\n font-size: 16px;\n color: #242729;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,onMounted,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("cascadepicker");const _sfc_main=createDemo({setup(){const open=ref(false);const customOpen=ref(false);const pickerRef=ref(null);const customPickerRef=ref(null);onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",head:"自定义头部",region:"请选择地区"},button:{cancel:"取消",confirm:"确定"},options:{zhejiang:"浙江",hangzhou:"杭州",xihu:"西湖区",yuhang:"余杭区",wenzhou:"温州",lucheng:"鹿城区",ouhai:"瓯海区",fujian:"福建",fuzhou:"福州",gulou:"鼓楼区",taijiang:"台江区",xiamen:"厦门",siming:"思明区",haicang:"海沧区",beijing:"北京"},selected:"当前选中："},"en-US":{title:{basic:"Basic Usage",head:"Custom Head",region:"Please select the region"},button:{cancel:"Cancel",confirm:"Confirm"},options:{zhejiang:"Zhejiang",hangzhou:"Hangzhou",xihu:"Xihu",yuhang:"Yuhang",wenzhou:"Wenzhou",lucheng:"Lucheng",ouhai:"Ouhai",fujian:"Fujian",fuzhou:"Fuzhou",gulou:"Gulou",taijiang:"Taijiang",xiamen:"Xiamen",siming:"Siming",haicang:"Haicang",beijing:"Beijing"},selected:"Currently selected: "}});});onMounted(()=>{const DATA=[{text:`${translate("options.zhejiang")}`,children:[{text:`${translate("options.hangzhou")}`,children:[{text:`${translate("options.xihu")}`}]},{text:`${translate("options.wenzhou")}`,children:[{text:`${translate("options.lucheng")}`},{text:`${translate("options.ouhai")}`}]}]},{text:`${translate("options.fujian")}`,children:[{text:`${translate("options.fuzhou")}`,children:[{text:`${translate("options.gulou")}`},{text:`${translate("options.taijiang")}`}]},{text:`${translate("options.xiamen")}`,children:[{text:`${translate("options.siming")}`},{text:`${translate("options.haicang")}`}]}]},{text:`${translate("options.beijing")}`,children:[{text:"",children:[{text:""}]}]}];setTimeout(()=>{//模拟异步获取数据 +const preview=pickerRef.value;preview.setColumns(DATA);const customPreview=customPickerRef.value;customPreview.setColumns(DATA);},1000);});const click=()=>{open.value=true;};const customClick=()=>{customOpen.value=true;};const close=type=>{if(type===0){open.value=false;}else if(type===1){customOpen.value=false;}};const confirm=({detail})=>{let values=detail.value.map(column=>{return column.value;});values=values.filter(value=>value.length>0);if(values.length>1){values=values.join("，");}Toast.text(`${values}`);open.value=false;};const customConfirm=()=>{const customPreview=customPickerRef.value;let values=customPreview.getValues().map(column=>{return column.value;});values=values.filter(value=>value.length>0);if(values.length>1){values=values.join("，");}Toast.text(`${values}`);customOpen.value=false;};const change=({detail})=>{console.log(detail.value,33333);};return{open,customOpen,pickerRef,customPickerRef,click,customClick,close,confirm,customConfirm,change,translate};}});const _hoisted_1={class:"demo"};const _hoisted_2=["title"];const _hoisted_3=["open","title"];const _hoisted_4=["title"];const _hoisted_5=["open"];const _hoisted_6={slot:"header",class:"head-container"};const _hoisted_7={class:"picker-title"};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.basic'),islink:"",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.click&&_ctx.click(...args))},null,8,_hoisted_2)]),createBaseVNode("quark-cascade-picker",{open:_ctx.open,onClose:_cache[1]||(_cache[1]=$event=>_ctx.close(0)),title:_ctx.translate('title.region'),onConfirm:_cache[2]||(_cache[2]=(...args)=>_ctx.confirm&&_ctx.confirm(...args)),ref:"pickerRef",onChange:_cache[3]||(_cache[3]=(...args)=>_ctx.change&&_ctx.change(...args))},null,40,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.head")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{type:"primary",title:_ctx.translate('title.head'),islink:"",onClick:_cache[4]||(_cache[4]=(...args)=>_ctx.customClick&&_ctx.customClick(...args))},null,8,_hoisted_4)]),createBaseVNode("quark-cascade-picker",{open:_ctx.customOpen,onClose:_cache[7]||(_cache[7]=$event=>_ctx.close(1)),ref:"customPickerRef",bottomhidden:""},[createBaseVNode("div",_hoisted_6,[createBaseVNode("span",{class:"cancel",onClick:_cache[5]||(_cache[5]=$event=>_ctx.close(1))},toDisplayString(_ctx.translate("button.cancel")),1),createBaseVNode("span",_hoisted_7,toDisplayString(_ctx.translate("title.region")),1),createBaseVNode("span",{class:"ensure",onClick:_cache[6]||(_cache[6]=(...args)=>_ctx.customConfirm&&_ctx.customConfirm(...args))},toDisplayString(_ctx.translate("button.confirm")),1)])],40,_hoisted_5)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.ddca8c74.js b/demo/assets/demo-legacy.ddca8c74.js new file mode 100644 index 000000000..27bb631b8 --- /dev/null +++ b/demo/assets/demo-legacy.ddca8c74.js @@ -0,0 +1 @@ +;(function(){System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("sticky");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",offset:"吸顶距离",otherUnits:"其他单位"},"en-US":{basic:"Basic Usage",offset:"Offset Top",otherUnits:"Other Units"}});});return{translate};}});const _hoisted_1={class:"demo sticky-demo",style:{"padding-left":"0","height":"150vh"}};const _hoisted_2={offsettop:"17vw"};const _hoisted_3={type:"primary",shape:"square"};const _hoisted_4={offsettop:"45vw"};const _hoisted_5={type:"primary",shape:"square",style:{"margin-left":"100px"}};const _hoisted_6={offsettop:"150px"};const _hoisted_7={type:"primary",shape:"square",style:{"margin-left":"180px"}};function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-sticky",_hoisted_2,[createBaseVNode("quark-button",_hoisted_3,toDisplayString(_ctx.translate("basic")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("offset")),1),createBaseVNode("quark-sticky",_hoisted_4,[createBaseVNode("quark-button",_hoisted_5,toDisplayString(_ctx.translate("offset")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("otherUnits")),1),createBaseVNode("quark-sticky",_hoisted_6,[createBaseVNode("quark-button",_hoisted_7,toDisplayString(_ctx.translate("otherUnits")),1)])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.e4c46326.js b/demo/assets/demo-legacy.e4c46326.js new file mode 100644 index 000000000..20116caf5 --- /dev/null +++ b/demo/assets/demo-legacy.e4c46326.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="quark-marquee {\n color: #ee8c02;\n}\nquark-marquee .line {\n width: 100%;\n height: 1px;\n background: #fff;\n}\nquark-marquee .flex {\n display: flex;\n align-items: center;\n}\n.paused-button {\n margin: 0 0 10px 20px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,reactive,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;reactive=module.f;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("marquee");const _sfc_main=createDemo({setup(){const isPaused=reactive({button:false,hover:false,click:false});onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",speed:"不同速度",paused:"暂停",pausedExmple:{button:{title:"控制暂停",pause:"暂停",continue:"继续"},hover:"悬浮暂停",click:"点击暂停"},reverse:"反转方向",content:"2022 年我们见证了很多技术的新发展新变化：低代码的突然爆火、数据库的接连开源、芯片的短缺与自研、训练模型的参数突破",alert:{return:"返回",clear:"清除"}},"en-US":{basic:"Basic Usage",speed:"Marqueen Speed",pausedExmple:{button:{title:"Control Paused",pause:"Pause",continue:"Continue"},hover:"Hover Paused",click:"Click Paused"},reverse:"Reverse Direction",content:"In 2022, we will witness many new developments and changes in technology: the sudden explosion of low-code, the continuous open source of databases, the shortage of chips and self-research, and the parameter breakthrough of training models",alert:{return:"Go Back",clear:"Clear"}}});});return{isPaused,translate};}});const _hoisted_1={class:"demo no-padding"};const _hoisted_2={class:"flex"};const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=/*#__PURE__*/createBaseVNode("br",null,null,-1);const _hoisted_6=["title"];const _hoisted_7=["title","paused"];const _hoisted_8=["title","paused"];const _hoisted_9=["title","paused"];const _hoisted_10=["title"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-marquee",{title:_ctx.translate('content')},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("speed")),1),createBaseVNode("quark-marquee",{title:_ctx.translate('content'),speed:"25"},null,8,_hoisted_4),_hoisted_5,createBaseVNode("quark-marquee",{title:_ctx.translate('content'),speed:"100"},null,8,_hoisted_6),createBaseVNode("h2",null,toDisplayString(_ctx.translate("pausedExmple.button.title")),1),createBaseVNode("quark-button",{class:"paused-button",size:"small",onClick:_cache[0]||(_cache[0]=$event=>_ctx.isPaused.button=true)},toDisplayString(_ctx.translate("pausedExmple.button.pause")),1),createBaseVNode("quark-button",{class:"paused-button",size:"small",onClick:_cache[1]||(_cache[1]=$event=>_ctx.isPaused.button=false)},toDisplayString(_ctx.translate("pausedExmple.button.continue")),1),createBaseVNode("quark-marquee",{title:_ctx.translate('content'),paused:_ctx.isPaused.button},null,8,_hoisted_7),createBaseVNode("h2",null,toDisplayString(_ctx.translate("pausedExmple.hover")),1),createBaseVNode("quark-marquee",{title:_ctx.translate('content'),paused:_ctx.isPaused.hover,onMouseover:_cache[2]||(_cache[2]=$event=>_ctx.isPaused.hover=true),onMouseleave:_cache[3]||(_cache[3]=$event=>_ctx.isPaused.hover=false)},null,40,_hoisted_8),createBaseVNode("h2",null,toDisplayString(_ctx.translate("pausedExmple.click")),1),createBaseVNode("quark-marquee",{title:_ctx.translate('content'),paused:_ctx.isPaused.click,onClick:_cache[4]||(_cache[4]=$event=>_ctx.isPaused.click=!_ctx.isPaused.click)},null,8,_hoisted_9),createBaseVNode("h2",null,toDisplayString(_ctx.translate("reverse")),1),createBaseVNode("quark-marquee",{title:_ctx.translate('content'),reverse:true},null,8,_hoisted_10)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.e81c880e.js b/demo/assets/demo-legacy.e81c880e.js new file mode 100644 index 000000000..ff6869131 --- /dev/null +++ b/demo/assets/demo-legacy.e81c880e.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".scope-market img {\n width: 288px;\n height: auto;\n border-radius: 12px;\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n}\n.scope-market .one {\n width: 100%;\n width: 325px;\n height: 200px;\n background-color: #66c6f2;\n}\n.scope-market .two {\n width: 100%;\n width: 325px;\n height: 200px;\n background-color: #39a9ed;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js','./vue-router-legacy.0b1d6af2.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onMounted,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createCommentVNode,MarketDialog,openBlock,onBeforeRouteLeave;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onMounted=module.g;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createCommentVNode=module.G;MarketDialog=module.H;openBlock=module.b;},function(module){onBeforeRouteLeave=module.o;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("marketdialog");const _sfc_main=createDemo({setup(){const open=ref(false);let value=0;onMounted(()=>{let t=setInterval(()=>{if(value>=100)clearInterval(t);else value+=10;},1000);});const showDialog=()=>{MarketDialog({url:"https://m.hellobike.com/resource/helloyun/15697/95WGX_i-hb-zyj220904-2-2.jpeg?x-oss-process=image/quality,q_80"});};const showDialog2=()=>{MarketDialog({url:"https://m.hellobike.com/resource/helloyun/15697/qxlI2_no_network.png"});};const showDialog3=()=>{open.value=true;};const close=()=>{open.value=false;};onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基础用法",tab:"标签式调用",type:{basic:"基础弹窗",irregular:"不规则弹窗",custom:"自定义内容"}},"en-US":{basic:"Basic Usage",tab:"Tab Call",type:{basic:"Basic Dialog",irregular:"Irregular Dialog",custom:"Custom Content"}}});});onBeforeRouteLeave(()=>{const nodes=document.querySelectorAll("quark-market-dialog");nodes.forEach(i=>i.open=false);});return{open,showDialog,showDialog2,showDialog3,close,translate};}});const _hoisted_1={class:"scope-market demo"};const _hoisted_2=["title"];const _hoisted_3=["title"];const _hoisted_4=["title"];const _hoisted_5=["open"];const _hoisted_6={key:0,controls:"",width:"320",slot:"market"};const _hoisted_7=/*#__PURE__*/createBaseVNode("source",{src:"https://m.hellobike.com/resource/helloyun/15697/B_TtZ_big_buck_bunny.mp4",type:"video/mp4"},null,-1);const _hoisted_8=[_hoisted_7];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[0]||(_cache[0]=$event=>_ctx.showDialog()),title:_ctx.translate('type.basic')},null,8,_hoisted_2),createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[1]||(_cache[1]=$event=>_ctx.showDialog2()),title:_ctx.translate('type.irregular')},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("tab")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{islink:"",type:"primary",onClick:_cache[2]||(_cache[2]=$event=>_ctx.showDialog3()),title:_ctx.translate('type.custom')},null,8,_hoisted_4)]),createBaseVNode("quark-market-dialog",{open:_ctx.open,onClose:_cache[3]||(_cache[3]=(...args)=>_ctx.close&&_ctx.close(...args))},[_ctx.open?(openBlock(),createElementBlock("video",_hoisted_6,_hoisted_8)):createCommentVNode("",true)],40,_hoisted_5)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.e8303662.js b/demo/assets/demo-legacy.e8303662.js new file mode 100644 index 000000000..b9b691451 --- /dev/null +++ b/demo/assets/demo-legacy.e8303662.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-circle quark-circle {\n margin-bottom: 12px;\n margin-right: 8px;\n}\n.demo-circle .custom {\n --quark-circle-transition: all linear 0.3s;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,ref,onMounted,createElementBlock,createBaseVNode,toDisplayString,createTextVNode,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;ref=module.r;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createTextVNode=module.h;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("cell");const _sfc_main=createDemo({setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{CellTitle:{basicUsage:"基本用法",custom:"样式定制",position:"起始位置"},size:"大小定制",color:"颜色定制",strokewidth:"宽度定制",layercolor:"轨道颜色",anticlockwise:"逆时针",gradient:"渐变色",right:"右侧",bottom:"下侧",left:"左侧",increase:"增加",decrease:"减少"},"en-US":{CellTitle:{basicUsage:"Basic Usage",custom:"Custom Style",position:"Start Position"},size:"Size",color:"Color",strokewidth:"Strokewidth",layercolor:"Layercolor",anticlockwise:"Anticlockwise",gradient:"Gradient",right:"Right",bottom:"Bottom",left:"Left",increase:"Increase",decrease:"Decrease"}});});const rate=ref(10);const increase=()=>{rate.value+=rate.value>=100?0:10;};const decrease=()=>{rate.value-=rate.value<=0?0:10;};const anticlockwise=ref(true);const circleRef=ref();onMounted(()=>{circleRef.value.setGradient({"0%":"#3fecff","100%":"#6149f6"});});return{translate,rate,circleRef,increase,decrease,anticlockwise};}});const _hoisted_1={class:"demo demo-circle"};const _hoisted_2=["rate"];const _hoisted_3=["rate"];const _hoisted_4=["rate"];const _hoisted_5=["rate"];const _hoisted_6=["rate"];const _hoisted_7=["rate","anticlockwise"];const _hoisted_8=["rate"];const _hoisted_9=["rate"];const _hoisted_10=["rate"];const _hoisted_11=["rate"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.basicUsage")),1),createBaseVNode("quark-circle",{rate:_ctx.rate},toDisplayString(_ctx.rate)+"%",9,_hoisted_2),createBaseVNode("div",null,[createBaseVNode("quark-button",{type:"primary",shape:"square",onClick:_cache[0]||(_cache[0]=(...args)=>_ctx.increase&&_ctx.increase(...args))},toDisplayString(_ctx.translate("increase")),1),createTextVNode("   "),createBaseVNode("quark-button",{type:"danger",shape:"square",onClick:_cache[1]||(_cache[1]=(...args)=>_ctx.decrease&&_ctx.decrease(...args))},toDisplayString(_ctx.translate("decrease")),1)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.custom")),1),createBaseVNode("quark-circle",{rate:_ctx.rate,size:"80"},toDisplayString(_ctx.translate("size")),9,_hoisted_3),createBaseVNode("quark-circle",{rate:_ctx.rate,color:"#02b357"},toDisplayString(_ctx.translate("color")),9,_hoisted_4),createBaseVNode("quark-circle",{rate:_ctx.rate,strokewidth:5},toDisplayString(_ctx.translate("strokewidth")),9,_hoisted_5),createBaseVNode("quark-circle",{rate:_ctx.rate,layercolor:"#f00"},toDisplayString(_ctx.translate("layercolor")),9,_hoisted_6),createBaseVNode("quark-circle",{rate:_ctx.rate,anticlockwise:_ctx.anticlockwise},toDisplayString(_ctx.translate("anticlockwise")),9,_hoisted_7),createBaseVNode("quark-circle",{ref:"circleRef",class:"custom",strokewidth:5,rate:_ctx.rate,size:"100"},toDisplayString(_ctx.translate("gradient")),9,_hoisted_8),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.position")),1),createBaseVNode("quark-circle",{rate:_ctx.rate,startposition:"right"},toDisplayString(_ctx.translate("right")),9,_hoisted_9),createBaseVNode("quark-circle",{rate:_ctx.rate,startposition:"bottom"},toDisplayString(_ctx.translate("bottom")),9,_hoisted_10),createBaseVNode("quark-circle",{rate:_ctx.rate,startposition:"left"},toDisplayString(_ctx.translate("left")),9,_hoisted_11)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.f11cf820.js b/demo/assets/demo-legacy.f11cf820.js new file mode 100644 index 000000000..d103e5d5e --- /dev/null +++ b/demo/assets/demo-legacy.f11cf820.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".demo-cell quark-cell {\n margin-bottom: 10px;\n}\n.demo-cell quark-cell-group quark-cell {\n margin: 0;\n}\n.demo-cell .quark-cell {\n padding: 13px 16px;\n background: #fff;\n box-shadow: 0 1px 7px #edeef1;\n font-size: 14px;\n color: #666;\n margin: 10px 0;\n box-sizing: border-box;\n cursor: pointer;\n display: grid;\n justify-content: space-between;\n grid-template-columns: 1fr 20px;\n}\n.demo-cell .my-cell {\n --cell-title-white-space: nowrap;\n --cell-title-text-overflow: ellipsis;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("cell");const _sfc_main=createDemo({setup(){const fruit=ref("apple");const onChange=({detail})=>{fruit.value=detail.value;};onBeforeMount(()=>{useTranslate({"zh-CN":{CellTitle:{basicUsage:"基本用法",router:"链接跳转",icon:"展示图标",group:"分组用法",custom:"自定义样式，省略号展示",right:"自定义右侧描述"},title:"这是标题",desc:"描述文字",longTitle:"这是标题非常的长，太长会自动换行的哦",longLongTitle:"这是标题很长长长长长长长长长长长长长长长长长长长长长长长长",router:"路由跳转",url:"链接跳转"},"en-US":{CellTitle:{basicUsage:"Basic Usage",router:"Router",icon:"Icon",group:"Inset Grouped",custom:"Custom Style",right:"Right content"},title:"Cell Title",desc:"Description",longTitle:"This is a very long title, it will automatically wrap.",longLongTitle:"The title is very very very very very very very long",router:"Router",url:"Url"}});});return{fruit,translate,onChange};}});const _hoisted_1={class:"demo no-padding demo-cell"};const _hoisted_2=["title","desc"];const _hoisted_3=["title"];const _hoisted_4=["title","desc"];const _hoisted_5=["title","desc"];const _hoisted_6=["title"];const _hoisted_7=["title"];const _hoisted_8=["title","desc"];const _hoisted_9=["title"];const _hoisted_10=["title"];const _hoisted_11=["title"];const _hoisted_12=["title"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.basicUsage")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{title:_ctx.translate('title'),desc:_ctx.translate('desc')},null,8,_hoisted_2),createBaseVNode("quark-cell",{title:_ctx.translate('title'),islink:""},null,8,_hoisted_3),createBaseVNode("quark-cell",{title:_ctx.translate('title'),desc:_ctx.translate('desc'),islink:""},null,8,_hoisted_4),createBaseVNode("quark-cell",{title:_ctx.translate('longTitle'),desc:_ctx.translate('desc'),islink:""},null,8,_hoisted_5)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.router")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{title:_ctx.translate('router'),to:"#/button",islink:""},null,8,_hoisted_6),createBaseVNode("quark-cell",{title:_ctx.translate('url'),to:"https://baidu.com",islink:""},null,8,_hoisted_7)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.icon")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{title:_ctx.translate('title'),desc:_ctx.translate('desc'),islink:"",icon:"https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png?x-oss-process=image/quality,q_80"},null,8,_hoisted_8)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.group")),1),createBaseVNode("quark-cell-group",null,[createBaseVNode("quark-cell",{title:_ctx.translate('title')},null,8,_hoisted_9),createBaseVNode("quark-cell",{title:_ctx.translate('title')},null,8,_hoisted_10)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.custom")),1),createBaseVNode("quark-cell",{class:"my-cell",title:_ctx.translate('longLongTitle')},null,8,_hoisted_11),createBaseVNode("h2",null,toDisplayString(_ctx.translate("CellTitle.right")),1),createBaseVNode("quark-cell",{title:_ctx.translate('title')},[createBaseVNode("div",null,toDisplayString(_ctx.translate("CellTitle.right")),1)],8,_hoisted_12)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.f37f9227.js b/demo/assets/demo-legacy.f37f9227.js new file mode 100644 index 000000000..939177c22 --- /dev/null +++ b/demo/assets/demo-legacy.f37f9227.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".tab-demo.demo {\n padding: 70px 0 18px !important;\n height: 3000px !important;\n}\n.tab-demo h2 {\n margin-top: 0 !important;\n}\n.tab-demo .demo-item {\n margin-bottom: 25px;\n}\n.tab-demo quark-tab-content {\n padding: 30px;\n min-height: 90px;\n}\n.tab-demo p {\n padding: 0 8px;\n font-size: 14px;\n}\n.tab-demo .height {\n height: 700px;\n}";document.head.appendChild(__vite_style__);System.register(['./mobile-legacy.4d4580ba.js','./component-legacy.a779959b.js'],function(exports){'use strict';var _export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,Toast,openBlock,createComponent;return{setters:[function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;Toast=module.T;openBlock=module.b;},function(module){createComponent=module.c;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("tab");const _sfc_main=createDemo({setup(){const data=ref({active:1,activeName:"d",activeName1:"d",disabled:"true"});onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",dark:"深色模式",name:"通过名称匹配",scroll:"横向滚动",click:"切换事件",sticky:"吸顶效果"},selected:"当前选择：",tab:["标签1","标签2","标签3","标签4","标签5","标签6","标签7","标签8","标签9","标签10"],tabs:["标签1内容","标签2内容","标签3内容","标签4内容","标签5内容","标签6内容","标签7内容","标签8内容","标签9内容","标签10内容"]},"en-US":{title:{basic:"Basic Usage",dark:"Dark",name:"Match by Name",scroll:"Horizontal Scrolling",click:"Click Event",sticky:"Sticky Effect"},selected:"Currently Selected: ",tab:["Tab1","Tab2","Tab3","Tab4","Tab5","Tab6","Tab7","Tab8","Tab9","Tab10"],tabs:["Tab1 Content","Tab2 Content","Tab3 Content","Tab4 Content","Tab5 Content","Tab6 Content","Tab7 Content","Tab8 Content","Tab9 Content","Tab10 Content"]}});});const onChange=({detail})=>{data.value.activeName1=detail.name;data.value.disabled=!data.value.disabled;Toast.text(`${translate("selected")}`+detail.label);};return{data,onChange,translate};}});const _hoisted_1={class:"demo tab-demo"};const _hoisted_2={class:"demo-item"};const _hoisted_3=["activekey"];const _hoisted_4=["label"];const _hoisted_5=["label"];const _hoisted_6=["label"];const _hoisted_7=["label"];const _hoisted_8={class:"demo-item"};const _hoisted_9=["activekey"];const _hoisted_10=["label"];const _hoisted_11=["label"];const _hoisted_12=["label"];const _hoisted_13=["label"];const _hoisted_14={class:"demo-item"};const _hoisted_15=["activekey"];const _hoisted_16=["label"];const _hoisted_17=["label"];const _hoisted_18=["label"];const _hoisted_19=["label"];const _hoisted_20={class:"demo-item"};const _hoisted_21=["label"];const _hoisted_22=["label"];const _hoisted_23=["label"];const _hoisted_24=["label"];const _hoisted_25=["label"];const _hoisted_26=["label"];const _hoisted_27=["label"];const _hoisted_28=["label"];const _hoisted_29=["label"];const _hoisted_30=["label"];const _hoisted_31={class:"demo-item"};const _hoisted_32=["activekey"];const _hoisted_33=["label"];const _hoisted_34=["label"];const _hoisted_35=["label","disabled"];const _hoisted_36=["label"];const _hoisted_37={class:"demo-item"};const _hoisted_38={sticky:"",offsettop:"17vw"};const _hoisted_39=["label"];const _hoisted_40=["label"];const _hoisted_41=["label"];const _hoisted_42=["label"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("div",_hoisted_2,[createBaseVNode("quark-tabs",{activekey:_ctx.data.active},[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0]},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_4),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1]},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_5),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2],disabled:""},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_6),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3]},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_7)],8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.dark")),1),createBaseVNode("div",_hoisted_8,[createBaseVNode("quark-tabs",{dark:"",activekey:_ctx.data.active},[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0]},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_10),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1]},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_11),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2],disabled:""},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_12),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3]},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_13)],8,_hoisted_9)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.name")),1),createBaseVNode("div",_hoisted_14,[createBaseVNode("quark-tabs",{activekey:_ctx.data.activeName},[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0],name:"a"},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_16),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1],name:"b"},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_17),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2],disabled:"",name:"c"},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_18),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3],name:"d"},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_19)],8,_hoisted_15)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.scroll")),1),createBaseVNode("div",_hoisted_20,[createBaseVNode("quark-tabs",null,[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0]},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_21),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1]},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_22),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2]},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_23),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3]},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_24),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[4]},toDisplayString(_ctx.translate("tabs")[4]),9,_hoisted_25),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[5]},toDisplayString(_ctx.translate("tabs")[5]),9,_hoisted_26),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[6]},toDisplayString(_ctx.translate("tabs")[6]),9,_hoisted_27),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[7]},toDisplayString(_ctx.translate("tabs")[7]),9,_hoisted_28),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[8]},toDisplayString(_ctx.translate("tabs")[8]),9,_hoisted_29),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[9]},toDisplayString(_ctx.translate("tabs")[9]),9,_hoisted_30)])]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.click")),1),createBaseVNode("div",_hoisted_31,[createBaseVNode("quark-tabs",{activekey:_ctx.data.activeName1,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onChange&&_ctx.onChange(...args))},[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0],name:"a"},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_33),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1],name:"b"},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_34),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2],disabled:_ctx.data.disabled,name:"c"},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_35),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3],name:"d"},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_36)],40,_hoisted_32)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.sticky")),1),createBaseVNode("div",_hoisted_37,[createBaseVNode("quark-tabs",_hoisted_38,[createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[0]},toDisplayString(_ctx.translate("tabs")[0]),9,_hoisted_39),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[1]},toDisplayString(_ctx.translate("tabs")[1]),9,_hoisted_40),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[2]},toDisplayString(_ctx.translate("tabs")[2]),9,_hoisted_41),createBaseVNode("quark-tab-content",{label:_ctx.translate('tab')[3]},toDisplayString(_ctx.translate("tabs")[3]),9,_hoisted_42)])])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.f9403da8.js b/demo/assets/demo-legacy.f9403da8.js new file mode 100644 index 000000000..ba43add66 --- /dev/null +++ b/demo/assets/demo-legacy.f9403da8.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="quark-noticebar {\n margin-bottom: 10px;\n}\nquark-marquee {\n color: inherit;\n}\n.noticebar-left-style-setting {\n background: #f0fcf6;\n color: #242729;\n}\n.noticebar-left-style-setting div {\n font-weight: 600;\n color: #f72626;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n.noticebar-right-style-setting {\n background: #fff2f2;\n color: #242729;\n}\n.noticebar-right-style-setting span {\n font-size: 14px;\n font-weight: 600;\n color: #f72626;\n display: flex;\n align-items: center;\n}\n.bg2 {\n background: rgba(255, 255, 255, 0.1);\n color: #fff;\n margin-bottom: 0;\n}\n.noticebar {\n padding: 20px;\n font-size: 12px;\n border-radius: 20px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,ref,onBeforeMount,useTranslate,createElementBlock,createBaseVNode,toDisplayString,createTextVNode,Toast,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;ref=module.r;onBeforeMount=module.o;useTranslate=module.u;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;createTextVNode=module.h;Toast=module.T;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("noticebar");const _sfc_main=createDemo({setup(){const data=ref([]);const onRightClick=()=>{Toast.text(`${translate("text.clickToast")}`);};onBeforeMount(()=>{useTranslate({"zh-CN":{title:{basic:"基础用法",multiple:"文字行数设置",style:"样式设置",marquee:"文字超长滚动",icon:"图标隐藏",custom:"两端自定义",right:"右侧事件绑定"},text:{content:"大学之道，在明明德，在亲民，在止于至善。",left:"左侧内容",right:"右侧内容",error:"当前网络不可用，请检查网络设置",set:"去设置",rightClick:"试着点击一下右箭头",multiple:"大学的目的，在于显明高尚的品德，在于使人们革除旧习，在于达到善的最高境界。大学的目的，在于显明高尚的品德，在于使人们革除旧习，在于达到善的最高境界。",clickToast:"点击测试"}},"en-US":{title:{basic:"Basic Usage",multiple:"Multiple Text",style:"Style",marquee:"Marquee",icon:"Hide Icon",custom:"Custom Ends",right:"Right Event"},text:{content:"The way of the university is to be bright and virtuous.",left:"Left Content",right:"Right Content",error:"Current network is unavailable, please check the network settings",set:"Go to Settings",rightClick:"Try to click the right arrow",multiple:"The purpose of a university is to demonstrate noble character, to get rid of old habits, and to reach the highest state of goodness. The purpose of a university is to demonstrate noble character, to get rid of old habits, and to reach the highest state of goodness.",clickToast:"Click to test"}}});data.value={lefttext:false,right:"",text:`${translate("text.content")}`,multipleText:`${translate("text.multiple")}`};});return{data,onRightClick,translate};}});const _hoisted_1={class:"demo no-padding"};const _hoisted_2=["text"];const _hoisted_3=["text"];const _hoisted_4=["text"];const _hoisted_5=["title"];const _hoisted_6=["text"];const _hoisted_7=["text"];const _hoisted_8=["text"];const _hoisted_9={slot:"left"};const _hoisted_10={slot:"right"};const _hoisted_11=["text"];const _hoisted_12={slot:"right"};const _hoisted_13=/*#__PURE__*/createBaseVNode("quark-icon-arrow-right",{size:"15",name:"right"},null,-1);const _hoisted_14=["text"];function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.basic")),1),createBaseVNode("quark-noticebar",{text:_ctx.data.text},null,8,_hoisted_2),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.multiple")),1),createBaseVNode("quark-noticeBar",{text:_ctx.data.multipleText,multiple:2},null,8,_hoisted_3),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.style")),1),createBaseVNode("quark-noticebar",{text:_ctx.data.text,color:"#1989fa",bgcolor:"#ecf9ff"},null,8,_hoisted_4),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.marquee")),1),createBaseVNode("quark-noticebar",null,[createBaseVNode("quark-marquee",{slot:"text",title:_ctx.data.multipleText},null,8,_hoisted_5)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.icon")),1),createBaseVNode("quark-noticebar",{text:_ctx.translate('text.content'),righthide:"",style:{"margin-bottom":"10px"}},null,8,_hoisted_6),createBaseVNode("quark-noticebar",{text:_ctx.translate('text.content'),lefthide:""},null,8,_hoisted_7),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.custom")),1),createBaseVNode("quark-noticebar",{class:"noticebar-left-style-setting",text:_ctx.translate('text.content')},[createBaseVNode("div",_hoisted_9,toDisplayString(_ctx.translate("text.left")),1),createBaseVNode("div",_hoisted_10,toDisplayString(_ctx.translate("text.right")),1)],8,_hoisted_8),createBaseVNode("quark-noticebar",{class:"noticebar-right-style-setting",lefthide:"",text:_ctx.translate('text.error')},[createBaseVNode("span",_hoisted_12,[createTextVNode(toDisplayString(_ctx.translate("text.set")),1),_hoisted_13])],8,_hoisted_11),createBaseVNode("h2",null,toDisplayString(_ctx.translate("title.right")),1),createBaseVNode("quark-noticebar",{text:_ctx.translate('text.rightClick'),onRightclick:_cache[0]||(_cache[0]=(...args)=>_ctx.onRightClick&&_ctx.onRightClick(...args))},null,40,_hoisted_14)]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo-legacy.f9943ff9.js b/demo/assets/demo-legacy.f9943ff9.js new file mode 100644 index 000000000..958439475 --- /dev/null +++ b/demo/assets/demo-legacy.f9943ff9.js @@ -0,0 +1 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML=".action-sheet-demo .demo-buttons quark-button {\n margin-right: 6px;\n margin-top: 6px;\n}\n.action-sheet-demo .demo-buttons {\n margin-bottom: 24px;\n}";document.head.appendChild(__vite_style__);System.register(['./component-legacy.a779959b.js','./mobile-legacy.4d4580ba.js'],function(exports){'use strict';var createComponent,_export_sfc,onBeforeMount,useTranslate,ref,onMounted,createElementBlock,createBaseVNode,toDisplayString,openBlock;return{setters:[function(module){createComponent=module.c;},function(module){_export_sfc=module._;onBeforeMount=module.o;useTranslate=module.u;ref=module.r;onMounted=module.g;createElementBlock=module.c;createBaseVNode=module.a;toDisplayString=module.t;openBlock=module.b;}],execute:function(){var demo_scss_vue_type_style_index_0_src_lang='';const{createDemo,translate}=createComponent("dropdownmenu");const _sfc_main=createDemo({props:{},setup(){onBeforeMount(()=>{useTranslate({"zh-CN":{basic:"基本用法",title:"筛选",title1:"包邮",title2:"团购",confirm:"确认",customContent:"自定义菜单内容",customColor:"自定义选中状态颜色",disabled:"禁用菜单",direction:"向上展开",option1:[{text:"全部商品",value:"0"},{text:"新款商品",value:"1"},{text:"活动商品",value:"2"}],option2:[{text:"默认排序",value:"a"},{text:"好评排序",value:"b"},{text:"销量排序",value:"c"}],swipeItems:"横向滚动"},"en-US":{basic:"Basic Usage",title:"Title",title1:"Title",title2:"Title",customContent:"Custom Content",customColor:"Custom Active Color",confirm:"Confirm",disabled:"Disabled",direction:"Expand Direction",option1:[{text:"Option 0",value:"0"},{text:"Option 1",value:"1"},{text:"Option 2",value:"2"}],option2:[{text:"Option A",value:"a"},{text:"Option B",value:"b"},{text:"Option C",value:"c"}],swipeItems:"Swipe Items"}});});const value=ref(1);const value1=ref("0");const value2=ref("a");const switch1=ref(true);const switch2=ref(false);const onSwitch1Change=e=>{switch1.value=e.detail.value;};const onSwitch2Change=e=>{switch2.value=e.detail.value;};const dropdownItemRef1=ref(null);const dropdownItemRef2=ref(null);const dropdownItemRef3=ref(null);const dropdownItemRef4=ref(null);const dropdownItemRef5=ref(null);const dropdownItemRef6=ref(null);const dropdownItemRef7=ref(null);const dropdownItemRef8=ref(null);const dropdownItemRef9=ref(null);const dropdownItemRef10=ref(null);const dropdownItemRef11=ref(null);const dropdownItemRef12=ref(null);onMounted(()=>{dropdownItemRef1.value.setOptions(translate("option1"));dropdownItemRef2.value.setOptions(translate("option2"));dropdownItemRef3.value.setOptions(translate("option1"));dropdownItemRef5.value.setOptions(translate("option1"));dropdownItemRef6.value.setOptions(translate("option2"));dropdownItemRef7.value.setOptions(translate("option1"));dropdownItemRef8.value.setOptions(translate("option2"));dropdownItemRef9.value.setOptions(translate("option1"));dropdownItemRef10.value.setOptions(translate("option2"));dropdownItemRef11.value.setOptions(translate("option1"));dropdownItemRef12.value.setOptions(translate("option2"));});const onConfirm=()=>{dropdownItemRef4.value.toggle();};return{translate,value1,value2,value:value,switch1,switch2,onConfirm,onSwitch1Change,onSwitch2Change,dropdownItemRef1,dropdownItemRef2,dropdownItemRef3,dropdownItemRef4,dropdownItemRef5,dropdownItemRef6,dropdownItemRef7,dropdownItemRef8,dropdownItemRef9,dropdownItemRef10,dropdownItemRef11,dropdownItemRef12};}});const _hoisted_1={class:"demo no-padding action-sheet-demo"};const _hoisted_2=["value"];const _hoisted_3=["value"];const _hoisted_4={ref:"dropdownItemRef3",value:"0"};const _hoisted_5=["title"];const _hoisted_6=["title"];const _hoisted_7=["checked"];const _hoisted_8=["title"];const _hoisted_9=["checked"];const _hoisted_10={style:{"padding":"5px 16px"}};const _hoisted_11={"active-color":"#f00"};const _hoisted_12=["value"];const _hoisted_13=["value"];const _hoisted_14=["value"];const _hoisted_15=["value"];const _hoisted_16={direction:"up"};const _hoisted_17={ref:"dropdownItemRef9",value:"0"};const _hoisted_18={ref:"dropdownItemRef10",value:"a"};const _hoisted_19={"swipe-threshold":4};const _hoisted_20={ref:"dropdownItemRef11",value:"0"};const _hoisted_21={ref:"dropdownItemRef12",value:"a"};const _hoisted_22=/*#__PURE__*/createBaseVNode("quark-dropdown-item",{disabled:""},null,-1);const _hoisted_23=/*#__PURE__*/createBaseVNode("quark-dropdown-item",{disabled:""},null,-1);const _hoisted_24=/*#__PURE__*/createBaseVNode("quark-dropdown-item",{disabled:""},null,-1);const _hoisted_25=/*#__PURE__*/createBaseVNode("quark-dropdown-item",{disabled:""},null,-1);function _sfc_render(_ctx,_cache,$props,$setup,$data,$options){return openBlock(),createElementBlock("div",_hoisted_1,[createBaseVNode("h2",null,toDisplayString(_ctx.translate("basic")),1),createBaseVNode("quark-dropdown-menu",null,[createBaseVNode("quark-dropdown-item",{ref:"dropdownItemRef1",value:_ctx.value1},null,8,_hoisted_2),createBaseVNode("quark-dropdown-item",{ref:"dropdownItemRef2",value:_ctx.value2},null,8,_hoisted_3)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customContent")),1),createBaseVNode("quark-dropdown-menu",null,[createBaseVNode("quark-dropdown-item",_hoisted_4,null,512),createBaseVNode("quark-dropdown-item",{ref:"dropdownItemRef4",title:_ctx.translate('title')},[createBaseVNode("quark-cell",{title:_ctx.translate('title1')},[createBaseVNode("quark-switch",{checked:_ctx.switch1,onChange:_cache[0]||(_cache[0]=(...args)=>_ctx.onSwitch1Change&&_ctx.onSwitch1Change(...args))},null,40,_hoisted_7)],8,_hoisted_6),createBaseVNode("quark-cell",{title:_ctx.translate('title2')},[createBaseVNode("quark-switch",{checked:_ctx.switch2,onChange:_cache[1]||(_cache[1]=(...args)=>_ctx.onSwitch2Change&&_ctx.onSwitch2Change(...args))},null,40,_hoisted_9)],8,_hoisted_8),createBaseVNode("div",_hoisted_10,[createBaseVNode("quark-button",{type:"primary",size:"big",onClick:_cache[2]||(_cache[2]=(...args)=>_ctx.onConfirm&&_ctx.onConfirm(...args))},toDisplayString(_ctx.translate("confirm")),1)])],8,_hoisted_5)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("customColor")),1),createBaseVNode("quark-dropdown-menu",_hoisted_11,[createBaseVNode("quark-dropdown-item",{ref:"dropdownItemRef5",value:_ctx.value1},null,8,_hoisted_12),createBaseVNode("quark-dropdown-item",{ref:"dropdownItemRef6",value:_ctx.value2},null,8,_hoisted_13)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("disabled")),1),createBaseVNode("quark-dropdown-menu",null,[createBaseVNode("quark-dropdown-item",{disabled:"",value:_ctx.value1,ref:"dropdownItemRef7"},null,8,_hoisted_14),createBaseVNode("quark-dropdown-item",{disabled:"",value:_ctx.value2,ref:"dropdownItemRef8"},null,8,_hoisted_15)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("direction")),1),createBaseVNode("quark-dropdown-menu",_hoisted_16,[createBaseVNode("quark-dropdown-item",_hoisted_17,null,512),createBaseVNode("quark-dropdown-item",_hoisted_18,null,512)]),createBaseVNode("h2",null,toDisplayString(_ctx.translate("swipeItems")),1),createBaseVNode("quark-dropdown-menu",_hoisted_19,[createBaseVNode("quark-dropdown-item",_hoisted_20,null,512),createBaseVNode("quark-dropdown-item",_hoisted_21,null,512),_hoisted_22,_hoisted_23,_hoisted_24,_hoisted_25])]);}var demo=exports('default',/*#__PURE__*/_export_sfc(_sfc_main,[['render',_sfc_render]]));}};});})(); diff --git a/demo/assets/demo.00fd097c.js b/demo/assets/demo.00fd097c.js new file mode 100644 index 000000000..98c9d9c83 --- /dev/null +++ b/demo/assets/demo.00fd097c.js @@ -0,0 +1,64 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("sticky"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + offset: "\u5438\u9876\u8DDD\u79BB", + otherUnits: "\u5176\u4ED6\u5355\u4F4D" + }, + "en-US": { + basic: "Basic Usage", + offset: "Offset Top", + otherUnits: "Other Units" + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { + class: "demo sticky-demo", + style: { "padding-left": "0", "height": "150vh" } +}; +const _hoisted_2 = { offsettop: "17vw" }; +const _hoisted_3 = { + type: "primary", + shape: "square" +}; +const _hoisted_4 = { offsettop: "45vw" }; +const _hoisted_5 = { + type: "primary", + shape: "square", + style: { "margin-left": "100px" } +}; +const _hoisted_6 = { offsettop: "150px" }; +const _hoisted_7 = { + type: "primary", + shape: "square", + style: { "margin-left": "180px" } +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-sticky", _hoisted_2, [ + createBaseVNode("quark-button", _hoisted_3, toDisplayString(_ctx.translate("basic")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("offset")), 1), + createBaseVNode("quark-sticky", _hoisted_4, [ + createBaseVNode("quark-button", _hoisted_5, toDisplayString(_ctx.translate("offset")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("otherUnits")), 1), + createBaseVNode("quark-sticky", _hoisted_6, [ + createBaseVNode("quark-button", _hoisted_7, toDisplayString(_ctx.translate("otherUnits")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.04d10220.js b/demo/assets/demo.04d10220.js new file mode 100644 index 000000000..d39f66ad4 --- /dev/null +++ b/demo/assets/demo.04d10220.js @@ -0,0 +1,125 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, f as reactive, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("marquee"); +const _sfc_main = createDemo({ + setup() { + const isPaused = reactive({ + button: false, + hover: false, + click: false + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + speed: "\u4E0D\u540C\u901F\u5EA6", + paused: "\u6682\u505C", + pausedExmple: { + button: { + title: "\u63A7\u5236\u6682\u505C", + pause: "\u6682\u505C", + continue: "\u7EE7\u7EED" + }, + hover: "\u60AC\u6D6E\u6682\u505C", + click: "\u70B9\u51FB\u6682\u505C" + }, + reverse: "\u53CD\u8F6C\u65B9\u5411", + content: "2022 \u5E74\u6211\u4EEC\u89C1\u8BC1\u4E86\u5F88\u591A\u6280\u672F\u7684\u65B0\u53D1\u5C55\u65B0\u53D8\u5316\uFF1A\u4F4E\u4EE3\u7801\u7684\u7A81\u7136\u7206\u706B\u3001\u6570\u636E\u5E93\u7684\u63A5\u8FDE\u5F00\u6E90\u3001\u82AF\u7247\u7684\u77ED\u7F3A\u4E0E\u81EA\u7814\u3001\u8BAD\u7EC3\u6A21\u578B\u7684\u53C2\u6570\u7A81\u7834", + alert: { + return: "\u8FD4\u56DE", + clear: "\u6E05\u9664" + } + }, + "en-US": { + basic: "Basic Usage", + speed: "Marqueen Speed", + pausedExmple: { + button: { + title: "Control Paused", + pause: "Pause", + continue: "Continue" + }, + hover: "Hover Paused", + click: "Click Paused" + }, + reverse: "Reverse Direction", + content: "In 2022, we will witness many new developments and changes in technology: the sudden explosion of low-code, the continuous open source of databases, the shortage of chips and self-research, and the parameter breakthrough of training models", + alert: { + return: "Go Back", + clear: "Clear" + } + } + }); + }); + return { + isPaused, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding" }; +const _hoisted_2 = { class: "flex" }; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("br", null, null, -1); +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["title", "paused"]; +const _hoisted_8 = ["title", "paused"]; +const _hoisted_9 = ["title", "paused"]; +const _hoisted_10 = ["title"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-marquee", { + title: _ctx.translate("content") + }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("speed")), 1), + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + speed: "25" + }, null, 8, _hoisted_4), + _hoisted_5, + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + speed: "100" + }, null, 8, _hoisted_6), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("pausedExmple.button.title")), 1), + createBaseVNode("quark-button", { + class: "paused-button", + size: "small", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isPaused.button = true) + }, toDisplayString(_ctx.translate("pausedExmple.button.pause")), 1), + createBaseVNode("quark-button", { + class: "paused-button", + size: "small", + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.isPaused.button = false) + }, toDisplayString(_ctx.translate("pausedExmple.button.continue")), 1), + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + paused: _ctx.isPaused.button + }, null, 8, _hoisted_7), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("pausedExmple.hover")), 1), + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + paused: _ctx.isPaused.hover, + onMouseover: _cache[2] || (_cache[2] = ($event) => _ctx.isPaused.hover = true), + onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.isPaused.hover = false) + }, null, 40, _hoisted_8), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("pausedExmple.click")), 1), + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + paused: _ctx.isPaused.click, + onClick: _cache[4] || (_cache[4] = ($event) => _ctx.isPaused.click = !_ctx.isPaused.click) + }, null, 8, _hoisted_9), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("reverse")), 1), + createBaseVNode("quark-marquee", { + title: _ctx.translate("content"), + reverse: true + }, null, 8, _hoisted_10) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.071fc9bc.js b/demo/assets/demo.071fc9bc.js new file mode 100644 index 000000000..7067c4e89 --- /dev/null +++ b/demo/assets/demo.071fc9bc.js @@ -0,0 +1,102 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("stepper"); +const _sfc_main = createDemo({ + setup() { + const value = ref(1); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + limit: "\u9650\u5236\u8F93\u5165\u8303\u56F4", + steps: "\u6B65\u957F\u8BBE\u7F6E", + interger: "\u9650\u5236\u8F93\u5165\u6574\u6570", + disabled: "\u7981\u7528\u72B6\u6001", + call: "\u53D8\u66F4\u56DE\u8C03", + css: "css\u5C5E\u6027" + }, + "en-US": { + basic: "Basic Usage", + limit: "Limit Input Range", + steps: "Steps Setting", + interger: "Interger Limit", + disabled: "Disabled", + call: "Change Call", + css: "CSS Style" + } + }); + }); + const changeValue = ({ detail }) => { + value.value = detail.value; + }; + const change = ({ detail }) => { + Toast.text(detail.value); + }; + const blur = ({ detail }) => { + Toast.text("blur"); + }; + const focus = ({ detail }) => { + Toast.text("focus"); + }; + return { + value, + changeValue, + change, + blur, + focus, + translate + }; + } +}); +const _hoisted_1 = { class: "demo stepper-demo" }; +const _hoisted_2 = { class: "quark-cell" }; +const _hoisted_3 = ["value"]; +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-stepper", { + min: "5", + max: "12" + }) +], -1); +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-stepper", { steps: "2" }) +], -1); +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-stepper", { interger: "" }) +], -1); +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-stepper", { disabled: "" }) +], -1); +const _hoisted_8 = { class: "quark-cell" }; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-stepper", { class: "theme" }) +], -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-stepper", { + value: _ctx.value, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.changeValue && _ctx.changeValue(...args)) + }, null, 40, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("limit")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("steps")), 1), + _hoisted_5, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("interger")), 1), + _hoisted_6, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + _hoisted_7, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("call")), 1), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-stepper", { + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.change && _ctx.change(...args)) + }, null, 32) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("css")), 1), + _hoisted_9 + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.0e1d9f3a.js b/demo/assets/demo.0e1d9f3a.js new file mode 100644 index 000000000..e8eef3e20 --- /dev/null +++ b/demo/assets/demo.0e1d9f3a.js @@ -0,0 +1,177 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("search"); +const _sfc_main = createDemo({ + setup() { + const defaultValue = ref(""); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + background: "\u66F4\u6539\u8F93\u5165\u6846\u5185\u90E8\u53CA\u5916\u90E8\u7684\u80CC\u666F\u6837\u5F0F", + color: "\u81EA\u5B9A\u4E49\u989C\u8272", + round: "\u5706\u89D2", + readonly: "\u53EA\u8BFB", + disabled: "\u7981\u7528", + hide: "\u9690\u85CF\u53D6\u6D88\u6309\u94AE", + show: "\u663E\u793A\u8FD4\u56DE\u6309\u94AE", + slot: "\u81EA\u5B9A\u4E49\u6309\u94AE", + event: "\u4E8B\u4EF6\u7ED1\u5B9A", + toast: { + cancel: "\u53D6\u6D88", + return: "\u8FD4\u56DE", + empty: "\u7A7A" + } + }, + "en-US": { + basic: "Basic Usage", + background: "Change background style", + color: "Custom Color", + round: "Round", + readonly: "Readonly", + disabled: "Disabled", + hide: "Hide Cancel Button", + show: "Show Return Button", + slot: "Custom Button", + event: "Event Binding", + toast: { + cancel: "Cancel", + return: "Return", + empty: "Empty" + } + } + }); + }); + const onChange1 = ({ detail }) => { + defaultValue.value = detail.value; + }; + const onChange2 = ({ detail }) => { + defaultValue.value = detail.value; + Toast.text(detail.value || `${translate("toast.empty")}`); + }; + const onChange = ({ detail }) => { + defaultValue.value = detail.value; + Toast.text(detail.value || `${translate("toast.empty")}`); + }; + const onFocus = () => { + Toast.text("focus"); + }; + const onBlur = () => { + Toast.text("blur"); + }; + const onSearch = () => { + Toast.text("search"); + }; + const onCancel = () => { + Toast.text(`${translate("toast.cancel")}`); + }; + const onBack = () => { + Toast.text(`${translate("toast.return")}`); + }; + return { + defaultValue, + onChange1, + onChange2, + onChange, + onFocus, + onBlur, + onSearch, + onCancel, + onBack, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding search-demo" }; +const _hoisted_2 = { slot: "action" }; +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("quark-search", { + dark: "", + showback: "", + hideaction: "" +}, null, -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("quark-search", { + class: "custom-color", + showback: "", + hideaction: "", + iconColor: "aqua" +}, null, -1); +const _hoisted_5 = { shape: "round" }; +const _hoisted_6 = { slot: "action" }; +const _hoisted_7 = { readonly: "" }; +const _hoisted_8 = { slot: "action" }; +const _hoisted_9 = { disabled: "" }; +const _hoisted_10 = { slot: "action" }; +const _hoisted_11 = ["placeholder"]; +const _hoisted_12 = { showback: "" }; +const _hoisted_13 = { slot: "action" }; +const _hoisted_14 = { slot: "action" }; +const _hoisted_15 = { slot: "action" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-search", { + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange1 && _ctx.onChange1(...args)) + }, [ + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ], 32), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("background")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("color")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("round")), 1), + createBaseVNode("quark-search", _hoisted_5, [ + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("readonly")), 1), + createBaseVNode("quark-search", _hoisted_7, [ + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + createBaseVNode("quark-search", _hoisted_9, [ + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("hide")), 1), + createBaseVNode("quark-search", { + hideaction: "", + placeholder: _ctx.translate("hide") + }, null, 8, _hoisted_11), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("show")), 1), + createBaseVNode("quark-search", _hoisted_12, [ + createBaseVNode("div", _hoisted_13, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("slot")), 1), + createBaseVNode("quark-search", null, [ + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("slot")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("event")), 1), + createBaseVNode("quark-search", { + id: "search-event", + showback: "", + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args)), + onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)), + onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)), + onSearch: _cache[4] || (_cache[4] = (...args) => _ctx.onSearch && _ctx.onSearch(...args)), + onCancel: _cache[5] || (_cache[5] = (...args) => _ctx.onCancel && _ctx.onCancel(...args)), + onBack: _cache[6] || (_cache[6] = (...args) => _ctx.onBack && _ctx.onBack(...args)) + }, [ + createBaseVNode("div", _hoisted_15, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("toast.cancel")), 1) + ]) + ], 32) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.10e9f9df.js b/demo/assets/demo.10e9f9df.js new file mode 100644 index 000000000..c5a39ce6b --- /dev/null +++ b/demo/assets/demo.10e9f9df.js @@ -0,0 +1,4270 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { s as f, x as r, y as w, z as s$6, M, B as h, C as d, D as a$B, _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +import "./index.9e48a87d.js"; +import "./index.63eaed99.js"; +function a$A(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$D = function(t) { + f(s2, t); + var e = a$A(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-arrow-up") || customElements.define("quark-icon-arrow-up", u$D); +function a$z(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var s2 = d(this).constructor; + i = Reflect.construct(r2, arguments, s2); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$C = function(t) { + f(c, t); + var e = a$z(c); + function c() { + var t2; + return r(this, c), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(c, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), c; +}(h(HTMLElement)); +customElements.get("quark-icon-message") || customElements.define("quark-icon-message", u$C); +function a$y(n) { + var c = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, o = d(n); + if (c) { + var r2 = d(this).constructor; + i = Reflect.construct(o, arguments, r2); + } else + i = o.apply(this, arguments); + return a$B(this, i); + }; +} +var u$B = function(t) { + f(s2, t); + var e = a$y(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var c = this.getFontSize(); + this.icon.style.fontSize = "".concat(c); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-setting") || customElements.define("quark-icon-setting", u$B); +function a$x(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$A = function(t) { + f(s2, t); + var e = a$x(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-warning") || customElements.define("quark-icon-warning", u$A); +function a$w(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$z = function(t) { + f(s2, t); + var e = a$w(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-warning-o") || customElements.define("quark-icon-warning-o", u$z); +function a$v(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$y = function(t) { + f(s2, t); + var e = a$v(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-plus") || customElements.define("quark-icon-plus", u$y); +function a$u(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$x = function(t) { + f(s2, t); + var e = a$u(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-more-h") || customElements.define("quark-icon-more-h", u$x); +function a$t(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$w = function(t) { + f(s2, t); + var e = a$t(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-more-v") || customElements.define("quark-icon-more-v", u$w); +function a$s(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$v = function(t) { + f(s2, t); + var e = a$s(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-info") || customElements.define("quark-icon-info", u$v); +function a$r(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$u = function(t) { + f(s2, t); + var e = a$r(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-edit") || customElements.define("quark-icon-edit", u$u); +function a$q(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var u$t = function(t) { + f(s2, t); + var e = a$q(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-comment") || customElements.define("quark-icon-comment", u$t); +function a$p(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var u$s = function(t) { + f(s2, t); + var e = a$p(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-good-job") || customElements.define("quark-icon-good-job", u$s); +function a$o(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$r = function(t) { + f(s2, t); + var e = a$o(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-help") || customElements.define("quark-icon-help", u$r); +function s$5(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, a2 = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(a2, arguments, r2); + } else + i = a2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$q = function(t) { + f(c, t); + var e = s$5(c); + function c() { + var t2; + return r(this, c), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(c, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), c; +}(h(HTMLElement)); +customElements.get("quark-icon-scan") || customElements.define("quark-icon-scan", u$q); +function s$4(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var a2 = d(this).constructor; + i = Reflect.construct(r2, arguments, a2); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$p = function(t) { + f(c, t); + var e = s$4(c); + function c() { + var t2; + return r(this, c), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(c, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), c; +}(h(HTMLElement)); +customElements.get("quark-icon-flash") || customElements.define("quark-icon-flash", u$p); +function a$n(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, c = d(n); + if (i) { + var r2 = d(this).constructor; + o = Reflect.construct(c, arguments, r2); + } else + o = c.apply(this, arguments); + return a$B(this, o); + }; +} +var u$o = function(t) { + f(s2, t); + var e = a$n(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-like") || customElements.define("quark-icon-like", u$o); +function s$3(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var l$2 = function(t) { + f(a2, t); + var e = s$3(a2); + function a2() { + var t2; + return r(this, a2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(a2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), a2; +}(h(HTMLElement)); +customElements.get("quark-icon-star") || customElements.define("quark-icon-star", l$2); +function s$2(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, a2 = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(a2, arguments, r2); + } else + i = a2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$n = function(t) { + f(c, t); + var e = s$2(c); + function c() { + var t2; + return r(this, c), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(c, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), c; +}(h(HTMLElement)); +customElements.get("quark-icon-expand") || customElements.define("quark-icon-expand", u$n); +function a$m(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var u$m = function(t) { + f(s2, t); + var e = a$m(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-success-o") || customElements.define("quark-icon-success-o", u$m); +function a$l(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var u$l = function(t) { + f(s2, t); + var e = a$l(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-shop-cart") || customElements.define("quark-icon-shop-cart", u$l); +function a$k(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var u$k = function(t) { + f(s2, t); + var e = a$k(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-location") || customElements.define("quark-icon-location", u$k); +function a$j(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$j = function(t) { + f(s2, t); + var e = a$j(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-customer-service") || customElements.define("quark-icon-customer-service", u$j); +function a$i(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$i = function(t) { + f(s2, t); + var e = a$i(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-unsmile") || customElements.define("quark-icon-unsmile", u$i); +function a$h(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$h = function(t) { + f(s2, t); + var e = a$h(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-smile") || customElements.define("quark-icon-smile", u$h); +function a$g(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var l$1 = function(t) { + f(s2, t); + var e = a$g(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-unsafe") || customElements.define("quark-icon-unsafe", l$1); +function a$f(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, c = d(n); + if (o) { + var r2 = d(this).constructor; + i = Reflect.construct(c, arguments, r2); + } else + i = c.apply(this, arguments); + return a$B(this, i); + }; +} +var l = function(t) { + f(s2, t); + var e = a$f(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-safe") || customElements.define("quark-icon-safe", l); +function s$1(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$g = function(t) { + f(a2, t); + var e = s$1(a2); + function a2() { + var t2; + return r(this, a2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(a2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), a2; +}(h(HTMLElement)); +customElements.get("quark-icon-share") || customElements.define("quark-icon-share", u$g); +function s(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$f = function(t) { + f(a2, t); + var e = s(a2); + function a2() { + var t2; + return r(this, a2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(a2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), a2; +}(h(HTMLElement)); +customElements.get("quark-icon-delete") || customElements.define("quark-icon-delete", u$f); +function a$e(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$e = function(t) { + f(s2, t); + var e = a$e(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-refresh") || customElements.define("quark-icon-refresh", u$e); +function a$d(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$d = function(t) { + f(s2, t); + var e = a$d(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-synchronous") || customElements.define("quark-icon-synchronous", u$d); +function a$c(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$c = function(t) { + f(s2, t); + var e = a$c(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-time") || customElements.define("quark-icon-time", u$c); +function a$b(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$b = function(t) { + f(s2, t); + var e = a$b(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-order") || customElements.define("quark-icon-order", u$b); +function a$a(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$a = function(t) { + f(s2, t); + var e = a$a(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-like-fill") || customElements.define("quark-icon-like-fill", u$a); +function a$9(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, c = d(n); + if (i) { + var r2 = d(this).constructor; + o = Reflect.construct(c, arguments, r2); + } else + o = c.apply(this, arguments); + return a$B(this, o); + }; +} +var u$9 = function(t) { + f(s2, t); + var e = a$9(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-success-fill") || customElements.define("quark-icon-success-fill", u$9); +function a$8(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$8 = function(t) { + f(s2, t); + var e = a$8(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-close-fill") || customElements.define("quark-icon-close-fill", u$8); +function a$7(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$7 = function(t) { + f(s2, t); + var e = a$7(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-good-job-fill") || customElements.define("quark-icon-good-job-fill", u$7); +function u$6(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var a$6 = function(t) { + f(s2, t); + var e = u$6(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-time-fill") || customElements.define("quark-icon-time-fill", a$6); +function a$5(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$5 = function(t) { + f(s2, t); + var e = a$5(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-help-fill") || customElements.define("quark-icon-help-fill", u$5); +function a$4(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$B(this, i); + }; +} +var u$4 = function(t) { + f(s2, t); + var e = a$4(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-location-fill") || customElements.define("quark-icon-location-fill", u$4); +function a$3(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$3 = function(t) { + f(s2, t); + var e = a$3(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-info-fill") || customElements.define("quark-icon-info-fill", u$3); +function a$2(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$2 = function(t) { + f(s2, t); + var e = a$2(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-safe-fill") || customElements.define("quark-icon-safe-fill", u$2); +function a$1(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u$1 = function(t) { + f(s2, t); + var e = a$1(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-warning-fill") || customElements.define("quark-icon-warning-fill", u$1); +function a(n) { + var i = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, r2 = d(n); + if (i) { + var c = d(this).constructor; + o = Reflect.construct(r2, arguments, c); + } else + o = r2.apply(this, arguments); + return a$B(this, o); + }; +} +var u = function(t) { + f(s2, t); + var e = a(s2); + function s2() { + var t2; + return r(this, s2), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s$6(s2, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var i = this.getFontSize(); + this.icon.style.fontSize = "".concat(i); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s2; +}(h(HTMLElement)); +customElements.get("quark-icon-unsafe-fill") || customElements.define("quark-icon-unsafe-fill", u); +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("icon"); +function copyToClipboard(str) { + const el = document.createElement("textarea"); + el.value = str; + el.setAttribute("readonly", ""); + el.style.position = "absolute"; + el.style.left = "-9999px"; + document.body.appendChild(el); + const selection = document.getSelection(); + if (!selection) { + return; + } + const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; + el.select(); + document.execCommand("copy"); + document.body.removeChild(el); + if (selected) { + selection.removeAllRanges(); + selection.addRange(selected); + } +} +const _sfc_main = createDemo({ + setup() { + const copyIcon = (icon) => { + const t = ``; + copyToClipboard(t); + Toast.text(`\u590D\u5236\u6210\u529F\uFF1A${t}`); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + label: { + example: "\u7528\u6CD5\u793A\u4F8B", + basic: "\u57FA\u7840\u56FE\u6807", + wireframe: "\u7EBF\u6846\u98CE\u683C", + solid: "\u5B9E\u5E95\u98CE\u683C" + }, + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + size: "\u56FE\u6807\u5927\u5C0F", + color: "\u56FE\u6807\u989C\u8272" + } + }, + "en-US": { + label: { + example: "For Example", + basic: "Basic Icon", + wireframe: "Wireframe Style", + solid: "Solid Style" + }, + title: { + basic: "Basic Usage", + size: "Icon Size", + color: "Icon Color" + } + } + }); + }); + return { + translate, + copyIcon + }; + } +}); +const _hoisted_1 = { class: "demo icon-demo no-padding" }; +const _hoisted_2 = { activekey: "tab1" }; +const _hoisted_3 = ["label"]; +const _hoisted_4 = { class: "h2-custom" }; +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("section", { class: "demo-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "26" }) +], -1); +const _hoisted_6 = { class: "h2-custom" }; +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("section", { class: "demo-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "18" }), + /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "24" }), + /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "30" }) +], -1); +const _hoisted_8 = { class: "h2-custom" }; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("section", { class: "demo-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-icon-user", { + size: "26", + color: "#F44336" + }), + /* @__PURE__ */ createBaseVNode("quark-icon-user", { + size: "26", + color: "#3F51B5" + }) +], -1); +const _hoisted_10 = ["label"]; +const _hoisted_11 = { class: "icons-container" }; +const _hoisted_12 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-left", { size: "26" }, null, -1); +const _hoisted_13 = /* @__PURE__ */ createBaseVNode("span", null, "arrow-left", -1); +const _hoisted_14 = [ + _hoisted_12, + _hoisted_13 +]; +const _hoisted_15 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { size: "26" }, null, -1); +const _hoisted_16 = /* @__PURE__ */ createBaseVNode("span", null, "arrow-right", -1); +const _hoisted_17 = [ + _hoisted_15, + _hoisted_16 +]; +const _hoisted_18 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-up", { size: "26" }, null, -1); +const _hoisted_19 = /* @__PURE__ */ createBaseVNode("span", null, "arrow-up", -1); +const _hoisted_20 = [ + _hoisted_18, + _hoisted_19 +]; +const _hoisted_21 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-down", { size: "26" }, null, -1); +const _hoisted_22 = /* @__PURE__ */ createBaseVNode("span", null, "arrow-down", -1); +const _hoisted_23 = [ + _hoisted_21, + _hoisted_22 +]; +const _hoisted_24 = /* @__PURE__ */ createBaseVNode("quark-icon-close", { size: "26" }, null, -1); +const _hoisted_25 = /* @__PURE__ */ createBaseVNode("span", null, "close", -1); +const _hoisted_26 = [ + _hoisted_24, + _hoisted_25 +]; +const _hoisted_27 = /* @__PURE__ */ createBaseVNode("quark-icon-success", { size: "26" }, null, -1); +const _hoisted_28 = /* @__PURE__ */ createBaseVNode("span", null, "success", -1); +const _hoisted_29 = [ + _hoisted_27, + _hoisted_28 +]; +const _hoisted_30 = /* @__PURE__ */ createBaseVNode("quark-icon-plus", { size: "26" }, null, -1); +const _hoisted_31 = /* @__PURE__ */ createBaseVNode("span", null, "plus", -1); +const _hoisted_32 = [ + _hoisted_30, + _hoisted_31 +]; +const _hoisted_33 = /* @__PURE__ */ createBaseVNode("quark-icon-more-h", { size: "26" }, null, -1); +const _hoisted_34 = /* @__PURE__ */ createBaseVNode("span", null, "more-h", -1); +const _hoisted_35 = [ + _hoisted_33, + _hoisted_34 +]; +const _hoisted_36 = /* @__PURE__ */ createBaseVNode("quark-icon-more-v", { size: "26" }, null, -1); +const _hoisted_37 = /* @__PURE__ */ createBaseVNode("span", null, "more-v", -1); +const _hoisted_38 = [ + _hoisted_36, + _hoisted_37 +]; +const _hoisted_39 = /* @__PURE__ */ createBaseVNode("quark-icon-warning", { size: "26" }, null, -1); +const _hoisted_40 = /* @__PURE__ */ createBaseVNode("span", null, "warning", -1); +const _hoisted_41 = [ + _hoisted_39, + _hoisted_40 +]; +const _hoisted_42 = ["label"]; +const _hoisted_43 = { class: "icons-container" }; +const _hoisted_44 = /* @__PURE__ */ createBaseVNode("quark-icon-home", { size: "26" }, null, -1); +const _hoisted_45 = /* @__PURE__ */ createBaseVNode("span", null, "home", -1); +const _hoisted_46 = [ + _hoisted_44, + _hoisted_45 +]; +const _hoisted_47 = /* @__PURE__ */ createBaseVNode("quark-icon-search", { size: "26" }, null, -1); +const _hoisted_48 = /* @__PURE__ */ createBaseVNode("span", null, "search", -1); +const _hoisted_49 = [ + _hoisted_47, + _hoisted_48 +]; +const _hoisted_50 = /* @__PURE__ */ createBaseVNode("quark-icon-message", { size: "26" }, null, -1); +const _hoisted_51 = /* @__PURE__ */ createBaseVNode("span", null, "message", -1); +const _hoisted_52 = [ + _hoisted_50, + _hoisted_51 +]; +const _hoisted_53 = /* @__PURE__ */ createBaseVNode("quark-icon-setting", { size: "26" }, null, -1); +const _hoisted_54 = /* @__PURE__ */ createBaseVNode("span", null, "setting", -1); +const _hoisted_55 = [ + _hoisted_53, + _hoisted_54 +]; +const _hoisted_56 = /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "26" }, null, -1); +const _hoisted_57 = /* @__PURE__ */ createBaseVNode("span", null, "user", -1); +const _hoisted_58 = [ + _hoisted_56, + _hoisted_57 +]; +const _hoisted_59 = /* @__PURE__ */ createBaseVNode("quark-icon-tel", { size: "26" }, null, -1); +const _hoisted_60 = /* @__PURE__ */ createBaseVNode("span", null, "tel", -1); +const _hoisted_61 = [ + _hoisted_59, + _hoisted_60 +]; +const _hoisted_62 = /* @__PURE__ */ createBaseVNode("quark-icon-close-o", { size: "26" }, null, -1); +const _hoisted_63 = /* @__PURE__ */ createBaseVNode("span", null, "close-o", -1); +const _hoisted_64 = [ + _hoisted_62, + _hoisted_63 +]; +const _hoisted_65 = /* @__PURE__ */ createBaseVNode("quark-icon-notify", { size: "26" }, null, -1); +const _hoisted_66 = /* @__PURE__ */ createBaseVNode("span", null, "notify", -1); +const _hoisted_67 = [ + _hoisted_65, + _hoisted_66 +]; +const _hoisted_68 = /* @__PURE__ */ createBaseVNode("quark-icon-warning-o", { size: "26" }, null, -1); +const _hoisted_69 = /* @__PURE__ */ createBaseVNode("span", null, "warning-o", -1); +const _hoisted_70 = [ + _hoisted_68, + _hoisted_69 +]; +const _hoisted_71 = /* @__PURE__ */ createBaseVNode("quark-icon-info", { size: "26" }, null, -1); +const _hoisted_72 = /* @__PURE__ */ createBaseVNode("span", null, "info", -1); +const _hoisted_73 = [ + _hoisted_71, + _hoisted_72 +]; +const _hoisted_74 = /* @__PURE__ */ createBaseVNode("quark-icon-edit", { size: "26" }, null, -1); +const _hoisted_75 = /* @__PURE__ */ createBaseVNode("span", null, "edit", -1); +const _hoisted_76 = [ + _hoisted_74, + _hoisted_75 +]; +const _hoisted_77 = /* @__PURE__ */ createBaseVNode("quark-icon-help", { size: "26" }, null, -1); +const _hoisted_78 = /* @__PURE__ */ createBaseVNode("span", null, "help", -1); +const _hoisted_79 = [ + _hoisted_77, + _hoisted_78 +]; +const _hoisted_80 = /* @__PURE__ */ createBaseVNode("quark-icon-scan", { size: "26" }, null, -1); +const _hoisted_81 = /* @__PURE__ */ createBaseVNode("span", null, "scan", -1); +const _hoisted_82 = [ + _hoisted_80, + _hoisted_81 +]; +const _hoisted_83 = /* @__PURE__ */ createBaseVNode("quark-icon-good-job", { size: "26" }, null, -1); +const _hoisted_84 = /* @__PURE__ */ createBaseVNode("span", null, "good-job", -1); +const _hoisted_85 = [ + _hoisted_83, + _hoisted_84 +]; +const _hoisted_86 = /* @__PURE__ */ createBaseVNode("quark-icon-comment", { size: "26" }, null, -1); +const _hoisted_87 = /* @__PURE__ */ createBaseVNode("span", null, "comment", -1); +const _hoisted_88 = [ + _hoisted_86, + _hoisted_87 +]; +const _hoisted_89 = /* @__PURE__ */ createBaseVNode("quark-icon-flash", { size: "26" }, null, -1); +const _hoisted_90 = /* @__PURE__ */ createBaseVNode("span", null, "flash", -1); +const _hoisted_91 = [ + _hoisted_89, + _hoisted_90 +]; +const _hoisted_92 = /* @__PURE__ */ createBaseVNode("quark-icon-like", { size: "26" }, null, -1); +const _hoisted_93 = /* @__PURE__ */ createBaseVNode("span", null, "like", -1); +const _hoisted_94 = [ + _hoisted_92, + _hoisted_93 +]; +const _hoisted_95 = /* @__PURE__ */ createBaseVNode("quark-icon-star", { size: "26" }, null, -1); +const _hoisted_96 = /* @__PURE__ */ createBaseVNode("span", null, "star", -1); +const _hoisted_97 = [ + _hoisted_95, + _hoisted_96 +]; +const _hoisted_98 = /* @__PURE__ */ createBaseVNode("quark-icon-expand", { size: "26" }, null, -1); +const _hoisted_99 = /* @__PURE__ */ createBaseVNode("span", null, "expand", -1); +const _hoisted_100 = [ + _hoisted_98, + _hoisted_99 +]; +const _hoisted_101 = /* @__PURE__ */ createBaseVNode("quark-icon-success-o", { size: "26" }, null, -1); +const _hoisted_102 = /* @__PURE__ */ createBaseVNode("span", null, "success-o", -1); +const _hoisted_103 = [ + _hoisted_101, + _hoisted_102 +]; +const _hoisted_104 = /* @__PURE__ */ createBaseVNode("quark-icon-shop-cart", { size: "26" }, null, -1); +const _hoisted_105 = /* @__PURE__ */ createBaseVNode("span", null, "shop-cart", -1); +const _hoisted_106 = [ + _hoisted_104, + _hoisted_105 +]; +const _hoisted_107 = /* @__PURE__ */ createBaseVNode("quark-icon-location", { size: "26" }, null, -1); +const _hoisted_108 = /* @__PURE__ */ createBaseVNode("span", null, "location", -1); +const _hoisted_109 = [ + _hoisted_107, + _hoisted_108 +]; +const _hoisted_110 = /* @__PURE__ */ createBaseVNode("quark-icon-customer-service", { size: "26" }, null, -1); +const _hoisted_111 = /* @__PURE__ */ createBaseVNode("span", null, "service", -1); +const _hoisted_112 = [ + _hoisted_110, + _hoisted_111 +]; +const _hoisted_113 = /* @__PURE__ */ createBaseVNode("quark-icon-smile", { size: "26" }, null, -1); +const _hoisted_114 = /* @__PURE__ */ createBaseVNode("span", null, "smile", -1); +const _hoisted_115 = [ + _hoisted_113, + _hoisted_114 +]; +const _hoisted_116 = /* @__PURE__ */ createBaseVNode("quark-icon-unsmile", { size: "26" }, null, -1); +const _hoisted_117 = /* @__PURE__ */ createBaseVNode("span", null, "unsmile", -1); +const _hoisted_118 = [ + _hoisted_116, + _hoisted_117 +]; +const _hoisted_119 = /* @__PURE__ */ createBaseVNode("quark-icon-unsafe", { size: "26" }, null, -1); +const _hoisted_120 = /* @__PURE__ */ createBaseVNode("span", null, "unsafe", -1); +const _hoisted_121 = [ + _hoisted_119, + _hoisted_120 +]; +const _hoisted_122 = /* @__PURE__ */ createBaseVNode("quark-icon-safe", { size: "26" }, null, -1); +const _hoisted_123 = /* @__PURE__ */ createBaseVNode("span", null, "safe", -1); +const _hoisted_124 = [ + _hoisted_122, + _hoisted_123 +]; +const _hoisted_125 = /* @__PURE__ */ createBaseVNode("quark-icon-share", { size: "26" }, null, -1); +const _hoisted_126 = /* @__PURE__ */ createBaseVNode("span", null, "share", -1); +const _hoisted_127 = [ + _hoisted_125, + _hoisted_126 +]; +const _hoisted_128 = /* @__PURE__ */ createBaseVNode("quark-icon-delete", { size: "26" }, null, -1); +const _hoisted_129 = /* @__PURE__ */ createBaseVNode("span", null, "delete", -1); +const _hoisted_130 = [ + _hoisted_128, + _hoisted_129 +]; +const _hoisted_131 = /* @__PURE__ */ createBaseVNode("quark-icon-refresh", { size: "26" }, null, -1); +const _hoisted_132 = /* @__PURE__ */ createBaseVNode("span", null, "refresh", -1); +const _hoisted_133 = [ + _hoisted_131, + _hoisted_132 +]; +const _hoisted_134 = /* @__PURE__ */ createBaseVNode("quark-icon-synchronous", { size: "26" }, null, -1); +const _hoisted_135 = /* @__PURE__ */ createBaseVNode("span", null, "synchronous", -1); +const _hoisted_136 = [ + _hoisted_134, + _hoisted_135 +]; +const _hoisted_137 = /* @__PURE__ */ createBaseVNode("quark-icon-time", { size: "26" }, null, -1); +const _hoisted_138 = /* @__PURE__ */ createBaseVNode("span", null, "time", -1); +const _hoisted_139 = [ + _hoisted_137, + _hoisted_138 +]; +const _hoisted_140 = /* @__PURE__ */ createBaseVNode("quark-icon-order", { size: "26" }, null, -1); +const _hoisted_141 = /* @__PURE__ */ createBaseVNode("span", null, "order", -1); +const _hoisted_142 = [ + _hoisted_140, + _hoisted_141 +]; +const _hoisted_143 = ["label"]; +const _hoisted_144 = { class: "icons-container" }; +const _hoisted_145 = /* @__PURE__ */ createBaseVNode("quark-icon-camera-fill", { size: "26" }, null, -1); +const _hoisted_146 = /* @__PURE__ */ createBaseVNode("span", null, "camera-fill", -1); +const _hoisted_147 = [ + _hoisted_145, + _hoisted_146 +]; +const _hoisted_148 = /* @__PURE__ */ createBaseVNode("quark-icon-star-fill", { size: "26" }, null, -1); +const _hoisted_149 = /* @__PURE__ */ createBaseVNode("span", null, "star-fill", -1); +const _hoisted_150 = [ + _hoisted_148, + _hoisted_149 +]; +const _hoisted_151 = /* @__PURE__ */ createBaseVNode("quark-icon-like-fill", { size: "26" }, null, -1); +const _hoisted_152 = /* @__PURE__ */ createBaseVNode("span", null, "like-fill", -1); +const _hoisted_153 = [ + _hoisted_151, + _hoisted_152 +]; +const _hoisted_154 = /* @__PURE__ */ createBaseVNode("quark-icon-success-fill", { size: "26" }, null, -1); +const _hoisted_155 = /* @__PURE__ */ createBaseVNode("span", null, "success-fill", -1); +const _hoisted_156 = [ + _hoisted_154, + _hoisted_155 +]; +const _hoisted_157 = /* @__PURE__ */ createBaseVNode("quark-icon-close-fill", { size: "26" }, null, -1); +const _hoisted_158 = /* @__PURE__ */ createBaseVNode("span", null, "close-fill", -1); +const _hoisted_159 = [ + _hoisted_157, + _hoisted_158 +]; +const _hoisted_160 = /* @__PURE__ */ createBaseVNode("quark-icon-good-job-fill", { size: "26" }, null, -1); +const _hoisted_161 = /* @__PURE__ */ createBaseVNode("span", null, "good-job-fill", -1); +const _hoisted_162 = [ + _hoisted_160, + _hoisted_161 +]; +const _hoisted_163 = /* @__PURE__ */ createBaseVNode("quark-icon-time-fill", { size: "26" }, null, -1); +const _hoisted_164 = /* @__PURE__ */ createBaseVNode("span", null, "time-fill", -1); +const _hoisted_165 = [ + _hoisted_163, + _hoisted_164 +]; +const _hoisted_166 = /* @__PURE__ */ createBaseVNode("quark-icon-help-fill", { size: "26" }, null, -1); +const _hoisted_167 = /* @__PURE__ */ createBaseVNode("span", null, "help-fill", -1); +const _hoisted_168 = [ + _hoisted_166, + _hoisted_167 +]; +const _hoisted_169 = /* @__PURE__ */ createBaseVNode("quark-icon-location-fill", { size: "26" }, null, -1); +const _hoisted_170 = /* @__PURE__ */ createBaseVNode("span", null, "location-fill", -1); +const _hoisted_171 = [ + _hoisted_169, + _hoisted_170 +]; +const _hoisted_172 = /* @__PURE__ */ createBaseVNode("quark-icon-info-fill", { size: "26" }, null, -1); +const _hoisted_173 = /* @__PURE__ */ createBaseVNode("span", null, "info-fill", -1); +const _hoisted_174 = [ + _hoisted_172, + _hoisted_173 +]; +const _hoisted_175 = /* @__PURE__ */ createBaseVNode("quark-icon-safe-fill", { size: "26" }, null, -1); +const _hoisted_176 = /* @__PURE__ */ createBaseVNode("span", null, "safe-fill", -1); +const _hoisted_177 = [ + _hoisted_175, + _hoisted_176 +]; +const _hoisted_178 = /* @__PURE__ */ createBaseVNode("quark-icon-warning-fill", { size: "26" }, null, -1); +const _hoisted_179 = /* @__PURE__ */ createBaseVNode("span", null, "warning-fill", -1); +const _hoisted_180 = [ + _hoisted_178, + _hoisted_179 +]; +const _hoisted_181 = /* @__PURE__ */ createBaseVNode("quark-icon-unsafe-fill", { size: "26" }, null, -1); +const _hoisted_182 = /* @__PURE__ */ createBaseVNode("span", null, "unsafe-fill", -1); +const _hoisted_183 = [ + _hoisted_181, + _hoisted_182 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("quark-tabs", _hoisted_2, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.example"), + name: "tab1" + }, [ + createBaseVNode("div", null, [ + createBaseVNode("h2", _hoisted_4, toDisplayString(_ctx.translate("title.basic")), 1), + _hoisted_5, + createBaseVNode("h2", _hoisted_6, toDisplayString(_ctx.translate("title.size")), 1), + _hoisted_7, + createBaseVNode("h2", _hoisted_8, toDisplayString(_ctx.translate("title.color")), 1), + _hoisted_9 + ]) + ], 8, _hoisted_3), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.basic"), + name: "tab2" + }, [ + createBaseVNode("div", _hoisted_11, [ + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.copyIcon("arrow-left")) + }, _hoisted_14), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.copyIcon("arrow-right")) + }, _hoisted_17), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.copyIcon("arrow-up")) + }, _hoisted_20), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.copyIcon("arrow-down")) + }, _hoisted_23), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[4] || (_cache[4] = ($event) => _ctx.copyIcon("close")) + }, _hoisted_26), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[5] || (_cache[5] = ($event) => _ctx.copyIcon("success")) + }, _hoisted_29), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[6] || (_cache[6] = ($event) => _ctx.copyIcon("plus")) + }, _hoisted_32), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[7] || (_cache[7] = ($event) => _ctx.copyIcon("more-h")) + }, _hoisted_35), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[8] || (_cache[8] = ($event) => _ctx.copyIcon("more-v")) + }, _hoisted_38), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[9] || (_cache[9] = ($event) => _ctx.copyIcon("warning")) + }, _hoisted_41) + ]) + ], 8, _hoisted_10), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.wireframe"), + name: "tab3" + }, [ + createBaseVNode("div", _hoisted_43, [ + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[10] || (_cache[10] = ($event) => _ctx.copyIcon("home")) + }, _hoisted_46), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[11] || (_cache[11] = ($event) => _ctx.copyIcon("search")) + }, _hoisted_49), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[12] || (_cache[12] = ($event) => _ctx.copyIcon("message")) + }, _hoisted_52), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[13] || (_cache[13] = ($event) => _ctx.copyIcon("setting")) + }, _hoisted_55), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[14] || (_cache[14] = ($event) => _ctx.copyIcon("user")) + }, _hoisted_58), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[15] || (_cache[15] = ($event) => _ctx.copyIcon("tel")) + }, _hoisted_61), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[16] || (_cache[16] = ($event) => _ctx.copyIcon("close-o")) + }, _hoisted_64), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[17] || (_cache[17] = ($event) => _ctx.copyIcon("notify")) + }, _hoisted_67), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[18] || (_cache[18] = ($event) => _ctx.copyIcon("warning-o")) + }, _hoisted_70), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[19] || (_cache[19] = ($event) => _ctx.copyIcon("info")) + }, _hoisted_73), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[20] || (_cache[20] = ($event) => _ctx.copyIcon("edit")) + }, _hoisted_76), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[21] || (_cache[21] = ($event) => _ctx.copyIcon("help")) + }, _hoisted_79), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[22] || (_cache[22] = ($event) => _ctx.copyIcon("scan")) + }, _hoisted_82), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[23] || (_cache[23] = ($event) => _ctx.copyIcon("good-job")) + }, _hoisted_85), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[24] || (_cache[24] = ($event) => _ctx.copyIcon("comment")) + }, _hoisted_88), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[25] || (_cache[25] = ($event) => _ctx.copyIcon("flash")) + }, _hoisted_91), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[26] || (_cache[26] = ($event) => _ctx.copyIcon("like")) + }, _hoisted_94), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[27] || (_cache[27] = ($event) => _ctx.copyIcon("star")) + }, _hoisted_97), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[28] || (_cache[28] = ($event) => _ctx.copyIcon("expand")) + }, _hoisted_100), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[29] || (_cache[29] = ($event) => _ctx.copyIcon("success-o")) + }, _hoisted_103), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[30] || (_cache[30] = ($event) => _ctx.copyIcon("shop-cart")) + }, _hoisted_106), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[31] || (_cache[31] = ($event) => _ctx.copyIcon("location")) + }, _hoisted_109), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[32] || (_cache[32] = ($event) => _ctx.copyIcon("customer-service")) + }, _hoisted_112), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[33] || (_cache[33] = ($event) => _ctx.copyIcon("smile")) + }, _hoisted_115), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[34] || (_cache[34] = ($event) => _ctx.copyIcon("unsmile")) + }, _hoisted_118), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[35] || (_cache[35] = ($event) => _ctx.copyIcon("unsafe")) + }, _hoisted_121), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[36] || (_cache[36] = ($event) => _ctx.copyIcon("safe")) + }, _hoisted_124), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[37] || (_cache[37] = ($event) => _ctx.copyIcon("share")) + }, _hoisted_127), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[38] || (_cache[38] = ($event) => _ctx.copyIcon("delete")) + }, _hoisted_130), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[39] || (_cache[39] = ($event) => _ctx.copyIcon("refresh")) + }, _hoisted_133), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[40] || (_cache[40] = ($event) => _ctx.copyIcon("synchronous")) + }, _hoisted_136), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[41] || (_cache[41] = ($event) => _ctx.copyIcon("time")) + }, _hoisted_139), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[42] || (_cache[42] = ($event) => _ctx.copyIcon("order")) + }, _hoisted_142) + ]) + ], 8, _hoisted_42), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.solid"), + name: "tab4" + }, [ + createBaseVNode("div", _hoisted_144, [ + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[43] || (_cache[43] = ($event) => _ctx.copyIcon("camera-fill")) + }, _hoisted_147), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[44] || (_cache[44] = ($event) => _ctx.copyIcon("star-fill")) + }, _hoisted_150), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[45] || (_cache[45] = ($event) => _ctx.copyIcon("like-fill")) + }, _hoisted_153), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[46] || (_cache[46] = ($event) => _ctx.copyIcon("success-fill")) + }, _hoisted_156), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[47] || (_cache[47] = ($event) => _ctx.copyIcon("close-fill")) + }, _hoisted_159), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[48] || (_cache[48] = ($event) => _ctx.copyIcon("good-job-fill")) + }, _hoisted_162), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[49] || (_cache[49] = ($event) => _ctx.copyIcon("time-fill")) + }, _hoisted_165), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[50] || (_cache[50] = ($event) => _ctx.copyIcon("help-fill")) + }, _hoisted_168), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[51] || (_cache[51] = ($event) => _ctx.copyIcon("location-fill")) + }, _hoisted_171), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[52] || (_cache[52] = ($event) => _ctx.copyIcon("info-fill")) + }, _hoisted_174), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[53] || (_cache[53] = ($event) => _ctx.copyIcon("safe-fill")) + }, _hoisted_177), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[54] || (_cache[54] = ($event) => _ctx.copyIcon("warning-fill")) + }, _hoisted_180), + createBaseVNode("div", { + class: "icon-item", + onClick: _cache[55] || (_cache[55] = ($event) => _ctx.copyIcon("unsafe-fill")) + }, _hoisted_183) + ]) + ], 8, _hoisted_143) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.12105e03.js b/demo/assets/demo.12105e03.js new file mode 100644 index 000000000..2bc2ea310 --- /dev/null +++ b/demo/assets/demo.12105e03.js @@ -0,0 +1,306 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, T as Toast, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("popup"); +const _sfc_main = createDemo({ + setup() { + const openCenter = ref(false); + const openTop = ref(false); + const openBottom = ref(false); + const openLeft = ref(false); + const openRight = ref(false); + const openRound = ref(false); + const openCloseable = ref(false); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + position: "\u4E0D\u540C\u4F4D\u7F6E", + topPopup: "\u9876\u90E8\u5F39\u6846", + bottomPopup: "\u5E95\u90E8\u5F39\u7A97", + leftPopup: "\u5DE6\u4FA7\u5F39\u6846", + rightPopup: "\u53F3\u4FA7\u5F39\u7A97", + centerPopup: "\u5C45\u4E2D\u663E\u793A", + firstLine: "\u7B2C\u4E00\u884C", + secondLine: "\u7B2C\u4E8C\u884C", + thirdLine: "\u7B2C\u4E09\u884C", + forthLine: "\u7B2C\u56DB\u884C", + fifthLine: "\u7B2C\u4E94\u884C", + sixthLine: "\u7B2C\u516D\u884C", + style: "\u6837\u5F0F", + roundStyle: "\u5706\u89D2\u6837\u5F0F", + showCloseTitle: "\u663E\u793A\u5173\u95ED\u6309\u94AE", + closePopup: "\u70B9\u6211\u5173\u95ED\u5F39\u6846", + tip: "\u5F39\u5C42\u6D88\u5931\u56DE\u8C03" + }, + "en-US": { + position: "Different Position", + topPopup: "Top Popup", + bottomPopup: "Bottom Popup", + leftPopup: "Left Popup", + rightPopup: "Right Popup", + centerPopup: "Center Popup", + firstLine: "First Line", + secondLine: "Second Line", + thirdLine: "Third Line", + forthLine: "Forth Line", + fifthLine: "Fifth Line", + sixthLine: "Six Line", + style: "Style", + roundStyle: "Rounded Style", + showCloseTitle: "Show Close Title", + closePopup: "Close Popup", + tip: "Popup layer disappears callback" + } + }); + }); + onMounted(() => { + document.getElementById("popup-top").addEventListener("close", () => { + open.value = false; + Toast.text(`${translate("tip")}`); + }); + }); + const showTopPopup = () => { + openTop.value = true; + }; + const showLeftPopup = () => { + openLeft.value = true; + }; + const showRightPopup = () => { + openRight.value = true; + }; + const showBottomPopup = () => { + openBottom.value = true; + }; + const showCenterPopup = () => { + openCenter.value = true; + }; + const showRoundPopup = () => { + openRound.value = true; + }; + const showCloseablePopup = () => { + openCloseable.value = true; + }; + const closeTopPopup = () => { + openTop.value = false; + }; + const closedTopPopup = () => { + console.log("closedTopPopup"); + }; + const openedTopPopup = () => { + console.log("openedTopPopup"); + }; + const closeLeftPopup = () => { + openLeft.value = false; + }; + const closeRightPopup = () => { + openRight.value = false; + }; + const closeBottomPopup = () => { + openBottom.value = false; + }; + const closeCenterPopup = () => { + openCenter.value = false; + }; + const closeRoundPopup = () => { + openRound.value = false; + }; + const closeCloseablePopup = () => { + openCloseable.value = false; + }; + const contentClick = () => { + openRound.value = false; + }; + return { + openCenter, + openTop, + openBottom, + openLeft, + openRight, + openRound, + openCloseable, + showTopPopup, + showLeftPopup, + showRightPopup, + showBottomPopup, + showCenterPopup, + showRoundPopup, + showCloseablePopup, + closeTopPopup, + closedTopPopup, + openedTopPopup, + closeLeftPopup, + closeRightPopup, + closeBottomPopup, + closeCenterPopup, + closeRoundPopup, + closeCloseablePopup, + contentClick, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding popup-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["open"]; +const _hoisted_8 = ["open"]; +const _hoisted_9 = ["open"]; +const _hoisted_10 = ["open"]; +const _hoisted_11 = ["open"]; +const _hoisted_12 = ["title"]; +const _hoisted_13 = ["title"]; +const _hoisted_14 = ["open"]; +const _hoisted_15 = ["open"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("position")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.showTopPopup && _ctx.showTopPopup(...args)), + title: _ctx.translate("topPopup") + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.showBottomPopup && _ctx.showBottomPopup(...args)), + title: _ctx.translate("bottomPopup") + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.showLeftPopup && _ctx.showLeftPopup(...args)), + title: _ctx.translate("leftPopup") + }, null, 8, _hoisted_4), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[3] || (_cache[3] = (...args) => _ctx.showRightPopup && _ctx.showRightPopup(...args)), + title: _ctx.translate("rightPopup") + }, null, 8, _hoisted_5), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.showCenterPopup && _ctx.showCenterPopup(...args)), + title: _ctx.translate("centerPopup") + }, null, 8, _hoisted_6) + ]), + createBaseVNode("quark-popup", { + id: "popup-top", + position: "top", + open: _ctx.openTop, + onClose: _cache[5] || (_cache[5] = (...args) => _ctx.closeTopPopup && _ctx.closeTopPopup(...args)), + onClosed: _cache[6] || (_cache[6] = (...args) => _ctx.closedTopPopup && _ctx.closedTopPopup(...args)), + onOpened: _cache[7] || (_cache[7] = (...args) => _ctx.openedTopPopup && _ctx.openedTopPopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_7), + createBaseVNode("quark-popup", { + id: "popup-left", + position: "left", + open: _ctx.openLeft, + onClose: _cache[8] || (_cache[8] = (...args) => _ctx.closeLeftPopup && _ctx.closeLeftPopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_8), + createBaseVNode("quark-popup", { + id: "popup-bottom", + position: "bottom", + open: _ctx.openBottom, + onClose: _cache[9] || (_cache[9] = (...args) => _ctx.closeBottomPopup && _ctx.closeBottomPopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_9), + createBaseVNode("quark-popup", { + id: "popup-right", + position: "right", + open: _ctx.openRight, + onClose: _cache[10] || (_cache[10] = (...args) => _ctx.closeRightPopup && _ctx.closeRightPopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_10), + createBaseVNode("quark-popup", { + id: "popup-center", + position: "center", + open: _ctx.openCenter, + onClose: _cache[11] || (_cache[11] = (...args) => _ctx.closeCenterPopup && _ctx.closeCenterPopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1) + ], 40, _hoisted_11), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("style")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[12] || (_cache[12] = (...args) => _ctx.showRoundPopup && _ctx.showRoundPopup(...args)), + title: _ctx.translate("roundStyle") + }, null, 8, _hoisted_12), + createBaseVNode("quark-cell", { + islink: "", + onClick: _cache[13] || (_cache[13] = (...args) => _ctx.showCloseablePopup && _ctx.showCloseablePopup(...args)), + title: _ctx.translate("showCloseTitle") + }, null, 8, _hoisted_13) + ]), + createBaseVNode("quark-popup", { + id: "popup-round", + position: "bottom", + round: "", + open: _ctx.openRound, + onClose: _cache[15] || (_cache[15] = (...args) => _ctx.closeRoundPopup && _ctx.closeRoundPopup(...args)) + }, [ + createBaseVNode("div", { + style: { "margin-top": "20px" }, + onClick: _cache[14] || (_cache[14] = (...args) => _ctx.contentClick && _ctx.contentClick(...args)) + }, toDisplayString(_ctx.translate("closePopup")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_14), + createBaseVNode("quark-popup", { + id: "popup-closeable", + position: "bottom", + closeable: "", + round: "", + open: _ctx.openCloseable, + onClose: _cache[16] || (_cache[16] = (...args) => _ctx.closeCloseablePopup && _ctx.closeCloseablePopup(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("firstLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("secondLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("thirdLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("forthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("fifthLine")), 1), + createBaseVNode("div", null, toDisplayString(_ctx.translate("sixthLine")), 1) + ], 40, _hoisted_15) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.141bc5ba.js b/demo/assets/demo.141bc5ba.js new file mode 100644 index 000000000..a77fb13d2 --- /dev/null +++ b/demo/assets/demo.141bc5ba.js @@ -0,0 +1,144 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, r as ref, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, h as createTextVNode, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("cell"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + CellTitle: { + basicUsage: "\u57FA\u672C\u7528\u6CD5", + custom: "\u6837\u5F0F\u5B9A\u5236", + position: "\u8D77\u59CB\u4F4D\u7F6E" + }, + size: "\u5927\u5C0F\u5B9A\u5236", + color: "\u989C\u8272\u5B9A\u5236", + strokewidth: "\u5BBD\u5EA6\u5B9A\u5236", + layercolor: "\u8F68\u9053\u989C\u8272", + anticlockwise: "\u9006\u65F6\u9488", + gradient: "\u6E10\u53D8\u8272", + right: "\u53F3\u4FA7", + bottom: "\u4E0B\u4FA7", + left: "\u5DE6\u4FA7", + increase: "\u589E\u52A0", + decrease: "\u51CF\u5C11" + }, + "en-US": { + CellTitle: { + basicUsage: "Basic Usage", + custom: "Custom Style", + position: "Start Position" + }, + size: "Size", + color: "Color", + strokewidth: "Strokewidth", + layercolor: "Layercolor", + anticlockwise: "Anticlockwise", + gradient: "Gradient", + right: "Right", + bottom: "Bottom", + left: "Left", + increase: "Increase", + decrease: "Decrease" + } + }); + }); + const rate = ref(10); + const increase = () => { + rate.value += rate.value >= 100 ? 0 : 10; + }; + const decrease = () => { + rate.value -= rate.value <= 0 ? 0 : 10; + }; + const anticlockwise = ref(true); + const circleRef = ref(); + onMounted(() => { + circleRef.value.setGradient({ + "0%": "#3fecff", + "100%": "#6149f6" + }); + }); + return { + translate, + rate, + circleRef, + increase, + decrease, + anticlockwise + }; + } +}); +const _hoisted_1 = { class: "demo demo-circle" }; +const _hoisted_2 = ["rate"]; +const _hoisted_3 = ["rate"]; +const _hoisted_4 = ["rate"]; +const _hoisted_5 = ["rate"]; +const _hoisted_6 = ["rate"]; +const _hoisted_7 = ["rate", "anticlockwise"]; +const _hoisted_8 = ["rate"]; +const _hoisted_9 = ["rate"]; +const _hoisted_10 = ["rate"]; +const _hoisted_11 = ["rate"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.basicUsage")), 1), + createBaseVNode("quark-circle", { rate: _ctx.rate }, toDisplayString(_ctx.rate) + "%", 9, _hoisted_2), + createBaseVNode("div", null, [ + createBaseVNode("quark-button", { + type: "primary", + shape: "square", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.increase && _ctx.increase(...args)) + }, toDisplayString(_ctx.translate("increase")), 1), + createTextVNode(" \xA0 "), + createBaseVNode("quark-button", { + type: "danger", + shape: "square", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.decrease && _ctx.decrease(...args)) + }, toDisplayString(_ctx.translate("decrease")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.custom")), 1), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + size: "80" + }, toDisplayString(_ctx.translate("size")), 9, _hoisted_3), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + color: "#02b357" + }, toDisplayString(_ctx.translate("color")), 9, _hoisted_4), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + strokewidth: 5 + }, toDisplayString(_ctx.translate("strokewidth")), 9, _hoisted_5), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + layercolor: "#f00" + }, toDisplayString(_ctx.translate("layercolor")), 9, _hoisted_6), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + anticlockwise: _ctx.anticlockwise + }, toDisplayString(_ctx.translate("anticlockwise")), 9, _hoisted_7), + createBaseVNode("quark-circle", { + ref: "circleRef", + class: "custom", + strokewidth: 5, + rate: _ctx.rate, + size: "100" + }, toDisplayString(_ctx.translate("gradient")), 9, _hoisted_8), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.position")), 1), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + startposition: "right" + }, toDisplayString(_ctx.translate("right")), 9, _hoisted_9), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + startposition: "bottom" + }, toDisplayString(_ctx.translate("bottom")), 9, _hoisted_10), + createBaseVNode("quark-circle", { + rate: _ctx.rate, + startposition: "left" + }, toDisplayString(_ctx.translate("left")), 9, _hoisted_11) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.14c8b50a.js b/demo/assets/demo.14c8b50a.js new file mode 100644 index 000000000..523607fa5 --- /dev/null +++ b/demo/assets/demo.14c8b50a.js @@ -0,0 +1,226 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("radio"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + value1: "apple", + value2: "apple", + value3: "apple", + value4: "apple", + radio1: "radio1", + radio2: "radio2", + flag: true + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + direction: "\u6C34\u5E73\u6392\u5217", + type: "\u5355\u9009\u6846\u5F62\u72B6", + size: "\u5355\u9009\u6846\u5927\u5C0F", + disabled: "\u5355\u9009\u6846\u7981\u7528\u72B6\u6001", + selectedColor: "\u5355\u9009\u6846\u9009\u4E2D\u989C\u8272\u81EA\u5B9A\u4E49" + }, + direction: { + radio1: "\u5355\u9009\u68461", + radio2: "\u5355\u9009\u68462" + }, + type: { + round: "\u5706\u5F62(\u9ED8\u8BA4)", + square: "\u65B9\u5F62" + }, + size: { + round: "\u5706\u5F62(\u5927)", + square: "\u65B9\u5F62(\u5927)" + }, + disabled: { + checked: "\u5DF2\u9009-\u7981\u7528", + unchecked: "\u672A\u9009-\u7981\u7528", + squareChecekd: "\u65B9\u5F62-\u5DF2\u9009-\u7981\u7528", + squareUnchecked: "\u65B9\u5F62-\u672A\u9009-\u7981\u7528" + }, + group: { + apple: "\u82F9\u679C", + banana: "\u9999\u8549" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + type: "Checkbox Type", + size: "Checkbox Size", + disabled: "Disabled Checkbox", + selectedColor: "Custom Selected Color" + }, + direction: { + radio1: "radio1", + radio2: "radio2" + }, + type: { + round: "Round(Default)", + square: "Square" + }, + size: { + round: "Round(Big)", + square: "Square(Big)" + }, + disabled: { + checked: "Checked - Disabled", + unchecked: "Unchecked - Disabled", + squareChecekd: "Square - Checked -Disabled", + squareUnchecked: "Square - Unchecked -Disabled" + }, + group: { + apple: "Apple", + banana: "Banana" + } + } + }); + }); + const onChange1 = ({ detail }) => { + data.value.value1 = detail.value; + }; + const directionOnChange = ({ detail }) => { + data.value.radio1 = detail.value; + }; + const onChange2 = ({ detail }) => { + data.value.value2 = detail.value; + }; + const onChange3 = ({ detail }) => { + data.value.value3 = detail.value; + }; + const onChange4 = ({ detail }) => { + data.value.value4 = detail.value; + }; + const changeDisable = () => { + data.value.flag = !data.value.flag; + }; + return { + data, + onChange1, + directionOnChange, + onChange2, + onChange3, + onChange4, + changeDisable, + translate + }; + } +}); +const _hoisted_1 = { class: "demo radio-demo" }; +const _hoisted_2 = { class: "radio-container" }; +const _hoisted_3 = ["value"]; +const _hoisted_4 = { name: "apple" }; +const _hoisted_5 = { name: "banana" }; +const _hoisted_6 = { class: "radio-container" }; +const _hoisted_7 = ["value"]; +const _hoisted_8 = { name: "radio1" }; +const _hoisted_9 = { name: "radio2" }; +const _hoisted_10 = { class: "radio-container" }; +const _hoisted_11 = ["value"]; +const _hoisted_12 = { name: "apple" }; +const _hoisted_13 = { + name: "banana", + shape: "square" +}; +const _hoisted_14 = { class: "radio-container" }; +const _hoisted_15 = ["value"]; +const _hoisted_16 = { + name: "apple", + size: "big" +}; +const _hoisted_17 = { + name: "banana", + size: "big" +}; +const _hoisted_18 = { class: "radio-container" }; +const _hoisted_19 = ["value"]; +const _hoisted_20 = ["disabled"]; +const _hoisted_21 = ["disabled"]; +const _hoisted_22 = { class: "radio-container" }; +const _hoisted_23 = { + checked: true, + disabled: "" +}; +const _hoisted_24 = { + checked: false, + disabled: "" +}; +const _hoisted_25 = { class: "radio-container my-color" }; +const _hoisted_26 = { checked: true }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-radio-group", { + value: _ctx.data.value1, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange1 && _ctx.onChange1(...args)) + }, [ + createBaseVNode("quark-radio", _hoisted_4, toDisplayString(_ctx.translate("group.apple")), 1), + createBaseVNode("quark-radio", _hoisted_5, toDisplayString(_ctx.translate("group.banana")), 1) + ], 40, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.direction")), 1), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-radio-group", { + value: _ctx.data.radio1, + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.directionOnChange && _ctx.directionOnChange(...args)), + direction: "horizontal", + class: "radio-group-2" + }, [ + createBaseVNode("quark-radio", _hoisted_8, toDisplayString(_ctx.translate("direction.radio1")), 1), + createBaseVNode("quark-radio", _hoisted_9, toDisplayString(_ctx.translate("direction.radio2")), 1) + ], 40, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.type")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-radio-group", { + value: _ctx.data.value2, + onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange2 && _ctx.onChange2(...args)), + class: "radio-group-2" + }, [ + createBaseVNode("quark-radio", _hoisted_12, toDisplayString(_ctx.translate("type.round")), 1), + createBaseVNode("quark-radio", _hoisted_13, toDisplayString(_ctx.translate("type.square")), 1) + ], 40, _hoisted_11) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.size")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-radio-group", { + value: _ctx.data.value3, + onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange3 && _ctx.onChange3(...args)) + }, [ + createBaseVNode("quark-radio", _hoisted_16, toDisplayString(_ctx.translate("size.square")), 1), + createBaseVNode("quark-radio", _hoisted_17, toDisplayString(_ctx.translate("size.round")), 1) + ], 40, _hoisted_15) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.disabled")), 1), + createBaseVNode("div", _hoisted_18, [ + createBaseVNode("quark-radio-group", { + value: _ctx.data.value4, + onChange: _cache[4] || (_cache[4] = (...args) => _ctx.onChange4 && _ctx.onChange4(...args)) + }, [ + createBaseVNode("quark-radio", { + name: "apple", + disabled: _ctx.data.flag + }, toDisplayString(_ctx.translate("disabled.checked")), 9, _hoisted_20), + createBaseVNode("quark-radio", { + name: "banana", + disabled: _ctx.data.flag + }, toDisplayString(_ctx.translate("disabled.unchecked")), 9, _hoisted_21) + ], 40, _hoisted_19) + ]), + createBaseVNode("div", _hoisted_22, [ + createBaseVNode("quark-radio", _hoisted_23, toDisplayString(_ctx.translate("disabled.squareChecekd")), 1), + createBaseVNode("quark-radio", _hoisted_24, toDisplayString(_ctx.translate("disabled.squareUnchecked")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.selectedColor")), 1), + createBaseVNode("div", _hoisted_25, [ + createBaseVNode("quark-radio", _hoisted_26, toDisplayString(_ctx.translate("title.selectedColor")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.16d8a59e.js b/demo/assets/demo.16d8a59e.js new file mode 100644 index 000000000..622800210 --- /dev/null +++ b/demo/assets/demo.16d8a59e.js @@ -0,0 +1,136 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock, p as pushScopeId, q as popScopeId } from "./mobile.5b772776.js"; +import "./index.9e48a87d.js"; +import "./index.63eaed99.js"; +var demo_vue_vue_type_style_index_0_scoped_true_lang = ""; +const { createDemo, translate } = createComponent("tabbar"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + activeIndex: 0, + img1: "https://m.hellobike.com/resource/helloyun/18625/MJ7Tr_src=http___inews.gtimg.com_newsapp_bt_0_12536239782_641.jpg&refer=http___inews.gtimg.jpeg", + img2: "https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png" + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + noicon: "\u4E0D\u5E26\u56FE\u6807", + name: "\u9ED8\u8BA4\u6FC0\u6D3B\u83DC\u5355", + badge: "\u5FBD\u6807\u63D0\u793A", + color: "\u81EA\u5B9A\u4E49\u989C\u8272", + event: "\u81EA\u5B9A\u4E49\u5207\u6362\u4E8B\u4EF6(\u53EF\u5236\u5B9A\u8DEF\u7531\u5207\u6362)", + fixed: "\u56FA\u5B9A\u5E95\u90E8" + }, + tabbar: { + home: "\u9996\u9875", + user: "\u6211\u7684", + tel: "\u8054\u7CFB" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + noicon: "No Icon", + name: "Default Active menu", + badge: "Badge Tips", + color: "Custom Color", + event: "Custom Change Event", + fixed: "Fixed" + }, + tabbar: { + home: "Home", + user: "User", + tel: "Tel" + } + } + }); + }); + const onChange = ({ detail }) => { + Toast.text(`\u5F53\u524D\u9009\u4E2D\uFF1A${detail.value}`); + }; + return { + data, + onChange, + translate + }; + } +}); +const _withScopeId = (n) => (pushScopeId("data-v-a092b524"), n = n(), popScopeId(), n); +const _hoisted_1 = { class: "demo no-padding" }; +const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-home", { size: "20" }, null, -1)); +const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "20" }, null, -1)); +const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-tel", { size: "20" }, null, -1)); +const _hoisted_5 = { active: "2" }; +const _hoisted_6 = { name: "home" }; +const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-home", { size: "20" }, null, -1)); +const _hoisted_8 = { name: "user" }; +const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "20" }, null, -1)); +const _hoisted_10 = { name: "tel" }; +const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-tel", { size: "20" }, null, -1)); +const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-home", { size: "20" }, null, -1)); +const _hoisted_13 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-user", { size: "20" }, null, -1)); +const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-icon-tel", { size: "20" }, null, -1)); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-tabbar", { + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)) + }, [ + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_2, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.home")), 1) + ]), + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_3, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.user")), 1) + ]), + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_4, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.tel")), 1) + ]) + ], 32), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.noicon")), 1), + createBaseVNode("quark-tabbar", null, [ + createBaseVNode("quark-tabbar-item", null, toDisplayString(_ctx.translate("tabbar.home")), 1), + createBaseVNode("quark-tabbar-item", null, toDisplayString(_ctx.translate("tabbar.user")), 1), + createBaseVNode("quark-tabbar-item", null, toDisplayString(_ctx.translate("tabbar.tel")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.name")), 1), + createBaseVNode("quark-tabbar", _hoisted_5, [ + createBaseVNode("quark-tabbar-item", _hoisted_6, [ + _hoisted_7, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.home")), 1) + ]), + createBaseVNode("quark-tabbar-item", _hoisted_8, [ + _hoisted_9, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.user")), 1) + ]), + createBaseVNode("quark-tabbar-item", _hoisted_10, [ + _hoisted_11, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.tel")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.fixed")), 1), + createBaseVNode("quark-tabbar", { + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args)), + fixed: "" + }, [ + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_12, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.home")), 1) + ]), + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_13, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.user")), 1) + ]), + createBaseVNode("quark-tabbar-item", null, [ + _hoisted_14, + createBaseVNode("div", null, toDisplayString(_ctx.translate("tabbar.tel")), 1) + ]) + ], 32) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a092b524"]]); +export { demo as default }; diff --git a/demo/assets/demo.1c5bc053.js b/demo/assets/demo.1c5bc053.js new file mode 100644 index 000000000..b7233c133 --- /dev/null +++ b/demo/assets/demo.1c5bc053.js @@ -0,0 +1,123 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, g as onMounted, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, G as createCommentVNode, H as MarketDialog, b as openBlock } from "./mobile.5b772776.js"; +import { o as onBeforeRouteLeave } from "./vue-router.7779546b.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("marketdialog"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + let value = 0; + onMounted(() => { + let t = setInterval(() => { + if (value >= 100) + clearInterval(t); + else + value += 10; + }, 1e3); + }); + const showDialog = () => { + MarketDialog({ + url: "https://m.hellobike.com/resource/helloyun/15697/95WGX_i-hb-zyj220904-2-2.jpeg?x-oss-process=image/quality,q_80" + }); + }; + const showDialog2 = () => { + MarketDialog({ + url: "https://m.hellobike.com/resource/helloyun/15697/qxlI2_no_network.png" + }); + }; + const showDialog3 = () => { + open.value = true; + }; + const close = () => { + open.value = false; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + tab: "\u6807\u7B7E\u5F0F\u8C03\u7528", + type: { + basic: "\u57FA\u7840\u5F39\u7A97", + irregular: "\u4E0D\u89C4\u5219\u5F39\u7A97", + custom: "\u81EA\u5B9A\u4E49\u5185\u5BB9" + } + }, + "en-US": { + basic: "Basic Usage", + tab: "Tab Call", + type: { + basic: "Basic Dialog", + irregular: "Irregular Dialog", + custom: "Custom Content" + } + } + }); + }); + onBeforeRouteLeave(() => { + const nodes = document.querySelectorAll("quark-market-dialog"); + nodes.forEach((i) => i.open = false); + }); + return { + open, + showDialog, + showDialog2, + showDialog3, + close, + translate + }; + } +}); +const _hoisted_1 = { class: "scope-market demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = { + key: 0, + controls: "", + width: "320", + slot: "market" +}; +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("source", { + src: "https://m.hellobike.com/resource/helloyun/15697/B_TtZ_big_buck_bunny.mp4", + type: "video/mp4" +}, null, -1); +const _hoisted_8 = [ + _hoisted_7 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.showDialog()), + title: _ctx.translate("type.basic") + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.showDialog2()), + title: _ctx.translate("type.irregular") + }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("tab")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.showDialog3()), + title: _ctx.translate("type.custom") + }, null, 8, _hoisted_4) + ]), + createBaseVNode("quark-market-dialog", { + open: _ctx.open, + onClose: _cache[3] || (_cache[3] = (...args) => _ctx.close && _ctx.close(...args)) + }, [ + _ctx.open ? (openBlock(), createElementBlock("video", _hoisted_6, _hoisted_8)) : createCommentVNode("", true) + ], 40, _hoisted_5) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.205604a1.js b/demo/assets/demo.205604a1.js new file mode 100644 index 000000000..69c83220c --- /dev/null +++ b/demo/assets/demo.205604a1.js @@ -0,0 +1,291 @@ +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("tab"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + active: 1, + activeName: "d", + activeName1: "d", + disabled: "true" + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + dark: "\u6DF1\u8272\u6A21\u5F0F", + name: "\u901A\u8FC7\u540D\u79F0\u5339\u914D", + scroll: "\u6A2A\u5411\u6EDA\u52A8", + click: "\u5207\u6362\u4E8B\u4EF6", + sticky: "\u5438\u9876\u6548\u679C" + }, + selected: "\u5F53\u524D\u9009\u62E9\uFF1A", + tab: [ + "\u6807\u7B7E1", + "\u6807\u7B7E2", + "\u6807\u7B7E3", + "\u6807\u7B7E4", + "\u6807\u7B7E5", + "\u6807\u7B7E6", + "\u6807\u7B7E7", + "\u6807\u7B7E8", + "\u6807\u7B7E9", + "\u6807\u7B7E10" + ], + tabs: [ + "\u6807\u7B7E1\u5185\u5BB9", + "\u6807\u7B7E2\u5185\u5BB9", + "\u6807\u7B7E3\u5185\u5BB9", + "\u6807\u7B7E4\u5185\u5BB9", + "\u6807\u7B7E5\u5185\u5BB9", + "\u6807\u7B7E6\u5185\u5BB9", + "\u6807\u7B7E7\u5185\u5BB9", + "\u6807\u7B7E8\u5185\u5BB9", + "\u6807\u7B7E9\u5185\u5BB9", + "\u6807\u7B7E10\u5185\u5BB9" + ] + }, + "en-US": { + title: { + basic: "Basic Usage", + dark: "Dark", + name: "Match by Name", + scroll: "Horizontal Scrolling", + click: "Click Event", + sticky: "Sticky Effect" + }, + selected: "Currently Selected: ", + tab: [ + "Tab1", + "Tab2", + "Tab3", + "Tab4", + "Tab5", + "Tab6", + "Tab7", + "Tab8", + "Tab9", + "Tab10" + ], + tabs: [ + "Tab1 Content", + "Tab2 Content", + "Tab3 Content", + "Tab4 Content", + "Tab5 Content", + "Tab6 Content", + "Tab7 Content", + "Tab8 Content", + "Tab9 Content", + "Tab10 Content" + ] + } + }); + }); + const onChange = ({ detail }) => { + data.value.activeName1 = detail.name; + data.value.disabled = !data.value.disabled; + Toast.text(`${translate("selected")}` + detail.label); + }; + return { + data, + onChange, + translate + }; + } +}); +const _hoisted_1 = { class: "demo tab-demo" }; +const _hoisted_2 = { class: "demo-item" }; +const _hoisted_3 = ["activekey"]; +const _hoisted_4 = ["label"]; +const _hoisted_5 = ["label"]; +const _hoisted_6 = ["label"]; +const _hoisted_7 = ["label"]; +const _hoisted_8 = { class: "demo-item" }; +const _hoisted_9 = ["activekey"]; +const _hoisted_10 = ["label"]; +const _hoisted_11 = ["label"]; +const _hoisted_12 = ["label"]; +const _hoisted_13 = ["label"]; +const _hoisted_14 = { class: "demo-item" }; +const _hoisted_15 = ["activekey"]; +const _hoisted_16 = ["label"]; +const _hoisted_17 = ["label"]; +const _hoisted_18 = ["label"]; +const _hoisted_19 = ["label"]; +const _hoisted_20 = { class: "demo-item" }; +const _hoisted_21 = ["label"]; +const _hoisted_22 = ["label"]; +const _hoisted_23 = ["label"]; +const _hoisted_24 = ["label"]; +const _hoisted_25 = ["label"]; +const _hoisted_26 = ["label"]; +const _hoisted_27 = ["label"]; +const _hoisted_28 = ["label"]; +const _hoisted_29 = ["label"]; +const _hoisted_30 = ["label"]; +const _hoisted_31 = { class: "demo-item" }; +const _hoisted_32 = ["activekey"]; +const _hoisted_33 = ["label"]; +const _hoisted_34 = ["label"]; +const _hoisted_35 = ["label", "disabled"]; +const _hoisted_36 = ["label"]; +const _hoisted_37 = { class: "demo-item" }; +const _hoisted_38 = { + sticky: "", + offsettop: "17vw" +}; +const _hoisted_39 = ["label"]; +const _hoisted_40 = ["label"]; +const _hoisted_41 = ["label"]; +const _hoisted_42 = ["label"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-tabs", { + activekey: _ctx.data.active + }, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0] + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_4), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1] + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_5), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2], + disabled: "" + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_6), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3] + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_7) + ], 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.dark")), 1), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-tabs", { + dark: "", + activekey: _ctx.data.active + }, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0] + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_10), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1] + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_11), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2], + disabled: "" + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_12), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3] + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_13) + ], 8, _hoisted_9) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.name")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-tabs", { + activekey: _ctx.data.activeName + }, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0], + name: "a" + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_16), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1], + name: "b" + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_17), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2], + disabled: "", + name: "c" + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_18), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3], + name: "d" + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_19) + ], 8, _hoisted_15) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.scroll")), 1), + createBaseVNode("div", _hoisted_20, [ + createBaseVNode("quark-tabs", null, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0] + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_21), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1] + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_22), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2] + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_23), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3] + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_24), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[4] + }, toDisplayString(_ctx.translate("tabs")[4]), 9, _hoisted_25), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[5] + }, toDisplayString(_ctx.translate("tabs")[5]), 9, _hoisted_26), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[6] + }, toDisplayString(_ctx.translate("tabs")[6]), 9, _hoisted_27), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[7] + }, toDisplayString(_ctx.translate("tabs")[7]), 9, _hoisted_28), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[8] + }, toDisplayString(_ctx.translate("tabs")[8]), 9, _hoisted_29), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[9] + }, toDisplayString(_ctx.translate("tabs")[9]), 9, _hoisted_30) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.click")), 1), + createBaseVNode("div", _hoisted_31, [ + createBaseVNode("quark-tabs", { + activekey: _ctx.data.activeName1, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)) + }, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0], + name: "a" + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_33), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1], + name: "b" + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_34), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2], + disabled: _ctx.data.disabled, + name: "c" + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_35), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3], + name: "d" + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_36) + ], 40, _hoisted_32) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.sticky")), 1), + createBaseVNode("div", _hoisted_37, [ + createBaseVNode("quark-tabs", _hoisted_38, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[0] + }, toDisplayString(_ctx.translate("tabs")[0]), 9, _hoisted_39), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[1] + }, toDisplayString(_ctx.translate("tabs")[1]), 9, _hoisted_40), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[2] + }, toDisplayString(_ctx.translate("tabs")[2]), 9, _hoisted_41), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("tab")[3] + }, toDisplayString(_ctx.translate("tabs")[3]), 9, _hoisted_42) + ]) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.253b9ecd.js b/demo/assets/demo.253b9ecd.js new file mode 100644 index 000000000..651a721f1 --- /dev/null +++ b/demo/assets/demo.253b9ecd.js @@ -0,0 +1,201 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("tooltip"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + top: false, + topleft: false, + topright: false, + bottom: false, + bottomleft: false, + bottomright: false, + left: false, + lefttop: false, + leftbottom: false, + right: false, + righttop: false, + rightbottom: false, + topclose: false, + autoclose: false, + customstyle: false, + large: false, + largeClose: false + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + tipsPosition: "Tips \u4F4D\u7F6E\uFF08\u6240\u6709\u652F\u6301\u7684\u4F4D\u7F6E\u53C2\u89C1placement \u53C2\u6570\uFF09", + topPosition: "top \u4F4D\u7F6E", + topLeftPosition: "top left \u4F4D\u7F6E", + topRightPosition: "top right \u4F4D\u7F6E", + tipsSize: "tips \u5C3A\u5BF8", + largeSize: "large \u5C3A\u5BF8", + tips: "\u6C14\u6CE1\u6587\u5B57", + showCloseButton: "\u663E\u793A\u5173\u95ED\u6309\u94AE", + setAutoOffTime: "\u8BBE\u7F6E\u81EA\u52A8\u5173\u95ED\u65F6\u95F4", + customStyle: "\u81EA\u5B9A\u4E49\u6837\u5F0F" + }, + "en-US": { + tipsPosition: "Tips Position(See placement parameter for all supported positions)", + topPosition: "Top Position", + topLeftPosition: "Top Left Position", + topRightPosition: "Top Right Position", + tipsSize: "tips Size", + largeSize: "Large Size", + tips: "Bubble Text", + showCloseButton: "Show Close Button", + setAutoOffTime: "Set auto-off time", + customStyle: "Custom Style" + } + }); + }); + const open = (placement) => { + data.value[placement] = true; + }; + const close = (placement) => { + data.value[placement] = false; + }; + return { + data, + open, + close, + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = { class: "quark-tip" }; +const _hoisted_3 = ["tips", "open"]; +const _hoisted_4 = { class: "quark-tip" }; +const _hoisted_5 = ["tips", "open"]; +const _hoisted_6 = { class: "quark-tip" }; +const _hoisted_7 = ["tips", "open"]; +const _hoisted_8 = { class: "quark-tip" }; +const _hoisted_9 = ["tips", "open"]; +const _hoisted_10 = { class: "quark-tip" }; +const _hoisted_11 = ["tips", "open"]; +const _hoisted_12 = { class: "quark-tip" }; +const _hoisted_13 = ["tips", "open"]; +const _hoisted_14 = { class: "quark-tip" }; +const _hoisted_15 = ["tips", "open"]; +const _hoisted_16 = { class: "quark-tip" }; +const _hoisted_17 = ["tips", "open"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("tipsPosition")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-tooltip", { + placement: "top", + tips: _ctx.translate("tips"), + scrollhidden: "", + open: _ctx.data.top, + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.open("top")), + onClose: _cache[1] || (_cache[1] = ($event) => _ctx.close("top")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topPosition")), 1) + ], 40, _hoisted_3) + ]), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-tooltip", { + placement: "topleft", + tips: _ctx.translate("tips"), + scrollhidden: "", + open: _ctx.data.topleft, + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.open("topleft")), + onClose: _cache[3] || (_cache[3] = ($event) => _ctx.close("topleft")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topLeftPosition")), 1) + ], 40, _hoisted_5) + ]), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-tooltip", { + placement: "topright", + tips: _ctx.translate("tips"), + scrollhidden: "", + open: _ctx.data.topright, + onClick: _cache[4] || (_cache[4] = ($event) => _ctx.open("topright")), + onClose: _cache[5] || (_cache[5] = ($event) => _ctx.close("topright")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topRightPosition")), 1) + ], 40, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("tipsSize")), 1), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-tooltip", { + placement: "top", + tips: _ctx.translate("tips"), + scrollhidden: "", + size: "large", + open: _ctx.data.large, + onClick: _cache[6] || (_cache[6] = ($event) => _ctx.open("large")), + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.close("large")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("largeSize")), 1) + ], 40, _hoisted_9) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("showCloseButton")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-tooltip", { + placement: "top", + closeable: "", + scrollhidden: "", + tips: _ctx.translate("tips"), + open: _ctx.data.topclose, + onClick: _cache[8] || (_cache[8] = ($event) => _ctx.open("topclose")), + onClose: _cache[9] || (_cache[9] = ($event) => _ctx.close("topclose")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topPosition")), 1) + ], 40, _hoisted_11) + ]), + createBaseVNode("div", _hoisted_12, [ + createBaseVNode("quark-tooltip", { + placement: "top", + scrollhidden: "", + closeable: "", + size: "large", + tips: _ctx.translate("tips"), + open: _ctx.data.largeClose, + onClick: _cache[10] || (_cache[10] = ($event) => _ctx.open("largeClose")), + onClose: _cache[11] || (_cache[11] = ($event) => _ctx.close("largeClose")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("largeSize")), 1) + ], 40, _hoisted_13) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("setAutoOffTime")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-tooltip", { + placement: "top", + autoclose: "", + opentime: "5000", + scrollhidden: "", + tips: _ctx.translate("tips"), + open: _ctx.data.autoclose, + onClick: _cache[12] || (_cache[12] = ($event) => _ctx.open("autoclose")), + onClose: _cache[13] || (_cache[13] = ($event) => _ctx.close("autoclose")) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topPosition")), 1) + ], 40, _hoisted_15) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customStyle:")), 1), + createBaseVNode("div", _hoisted_16, [ + createBaseVNode("quark-tooltip", { + placement: "top", + autoclose: "", + closeable: "", + opentime: "5000", + scrollhidden: "", + tips: _ctx.translate("tips"), + open: _ctx.data.customstyle, + onClick: _cache[14] || (_cache[14] = ($event) => _ctx.open("customstyle")), + onClose: _cache[15] || (_cache[15] = ($event) => _ctx.close("customstyle")), + class: "custom-tips" + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("topPosition")), 1) + ], 40, _hoisted_17) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.344b587c.js b/demo/assets/demo.344b587c.js new file mode 100644 index 000000000..c0f6403f4 --- /dev/null +++ b/demo/assets/demo.344b587c.js @@ -0,0 +1,151 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, F as Fragment, m as renderList, e as createStaticVNode, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("image"); +const _sfc_main = createDemo({ + setup() { + const imgList = ref([ + "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + "https://m.hellobike.com/resource/helloyun/09764/sbESi_picture-2.jpeg", + "https://m.hellobike.com/resource/helloyun/09764/uzhnQ_picture-3.jpeg", + "https://m.hellobike.com/resource/helloyun/09764/1jm2V_picture-4.png", + "https://m.hellobike.com/resource/helloyun/09764/uzuHB_picture-5.jpeg", + "https://m.hellobike.com/resource/helloyun/09764/gyy6t_picture-6.jpeg" + ]); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + fit: "\u586B\u5145\u6837\u5F0F", + round: "\u5706\u5F62\u56FE\u7247", + loadingMention: "\u52A0\u8F7D\u4E2D\u63D0\u793A", + loading: "\u52A0\u8F7D\u4E2D...", + loadingFail: "\u52A0\u8F7D\u5931\u8D25\u63D0\u793A", + lazy: "\u61D2\u52A0\u8F7D" + }, + "en-US": { + basic: "Basic Usage", + fit: "Fit Style", + round: "Round Image", + loadingMention: "Loading Mention", + loading: "Loading...", + loadingFail: "Fail Mention", + lazy: "Lazy Load" + } + }); + }); + return { + imgList, + translate + }; + } +}); +const _hoisted_1 = { class: "demo image-demo" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell base-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg" }) +], -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", { + class: "quark-cell", + style: { "display": "grid", "grid-template-columns": "repeat(auto-fill, 33.33%)" } +}, [ + /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + fit: "contain" + }), + /* @__PURE__ */ createBaseVNode("p", null, "contain") + ]), + /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + fit: "fill" + }), + /* @__PURE__ */ createBaseVNode("p", null, "fill") + ]), + /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + fit: "cover" + }), + /* @__PURE__ */ createBaseVNode("p", null, "cover") + ]), + /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + fit: "none" + }), + /* @__PURE__ */ createBaseVNode("p", null, "none") + ]), + /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + fit: "scale-down" + }), + /* @__PURE__ */ createBaseVNode("p", null, "scale-down") + ]) +], -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "https://m.hellobike.com/resource/helloyun/13459/_zZAz_2546.jpg_wh300.jpg", + width: "100px", + height: "100px", + fit: "cover", + round: "" + }) +], -1); +const _hoisted_5 = { class: "quark-cell" }; +const _hoisted_6 = { class: "quark-cell-item" }; +const _hoisted_7 = { + src: "", + width: "100px", + height: "100px" +}; +const _hoisted_8 = { slot: "error" }; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell-item" }, [ + /* @__PURE__ */ createBaseVNode("quark-image", { + src: "", + width: "100px", + height: "100px" + }, [ + /* @__PURE__ */ createBaseVNode("div", { slot: "error" }, [ + /* @__PURE__ */ createBaseVNode("quark-loading") + ]) + ]) +], -1); +const _hoisted_10 = /* @__PURE__ */ createStaticVNode('
', 1); +const _hoisted_11 = { class: "quark-cell quark-cell-list" }; +const _hoisted_12 = ["src"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("fit")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("round")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("loadingMention")), 1), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-image", _hoisted_7, [ + createBaseVNode("div", _hoisted_8, toDisplayString(_ctx.translate("loading")), 1) + ]) + ]), + _hoisted_9 + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("loadingFail")), 1), + _hoisted_10, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("lazy")), 1), + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.imgList, (img) => { + return openBlock(), createElementBlock("div", _hoisted_11, [ + (openBlock(), createElementBlock("quark-image", { + src: img, + class: "img-box", + key: img, + lazy: "" + }, null, 8, _hoisted_12)) + ]); + }), 256)) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.36e9fda5.js b/demo/assets/demo.36e9fda5.js new file mode 100644 index 000000000..4ceaa058d --- /dev/null +++ b/demo/assets/demo.36e9fda5.js @@ -0,0 +1,209 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, T as Toast, c as createElementBlock, a as createBaseVNode, t as toDisplayString, E as imagePreview, b as openBlock } from "./mobile.5b772776.js"; +import { o as onBeforeRouteLeave } from "./vue-router.7779546b.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("imagePreview"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + index: 0, + open1: false, + open2: false + }); + const preview1 = ref(null); + const preview2 = ref(null); + const baseUrls = [ + "https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png", + "https://m.hellobike.com/resource/helloyun/15697/1V_2oJv02t.png", + "https://m.hellobike.com/resource/helloyun/15697/Q6t6B_noNetWork.png" + ]; + const baseUse = () => { + imagePreview({ + images: baseUrls + }); + }; + const baseUse2 = () => { + imagePreview({ + startPosition: 2, + images: baseUrls + }); + }; + const baseUse3 = () => { + imagePreview({ + startPosition: 1, + images: baseUrls, + close: (index) => Toast.text(`${translate("dialog.close")}${index + 1}`) + }); + }; + const swipeChange = () => { + imagePreview({ + startPosition: 1, + images: baseUrls, + change: (index) => Toast.text(`${translate("dialog.move")}${index + 1}`) + }); + }; + const componentsClick = () => { + data.value.open1 = true; + }; + const componentsClick2 = () => { + data.value.open2 = true; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + configuration: "\u4F20\u5165\u914D\u7F6E\u9879", + props: "\u7EC4\u4EF6\u5F0F\u8C03\u7528" + }, + basic: { + preview: "\u9884\u89C8\u56FE\u7247" + }, + configuration: { + initial: "\u6307\u5B9A\u521D\u59CB\u4F4D\u7F6E", + sliding: "\u76D1\u542C\u6ED1\u52A8\u4E8B\u4EF6", + close: "\u76D1\u542C\u5173\u95ED\u4E8B\u4EF6" + }, + props: { + label: "\u6807\u7B7E\u5F0F\u8C03\u7528", + nav: "\u81EA\u5B9A\u4E49\u5BFC\u822A" + }, + page1: "\u7B2C", + page2: "\u9875", + dialog: { + move: "\u5F53\u524D\u79FB\u52A8\u4F4D\u7F6E", + close: "\u5F53\u524D\u5173\u95ED\u4F4D\u7F6E" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + configuration: "Configuration Items", + props: "Component Call" + }, + basic: { + preview: "Image Preview" + }, + configuration: { + initial: "Initial Position", + sliding: "Sliding Event", + close: "Close Event" + }, + props: { + label: "Label Call", + nav: "Custom Navigation" + }, + page1: "Page", + page2: "", + dialog: { + move: "Current Mobile Location", + close: "Current Closed Position" + } + } + }); + }); + onMounted(() => { + preview2.value.setData({ + images: baseUrls, + change: (index) => data.value.index = index, + close: () => data.value.open2 = false + }); + preview1.value.setData({ + images: baseUrls, + startPosition: 2, + change: (index) => Toast.text(`${translate("dialog.move")}${index + 1}`), + close: () => data.value.open1 = false + }); + }); + onBeforeRouteLeave(() => { + const nodes = document.querySelectorAll("quark-image-preview "); + nodes.forEach((i) => i.open = false); + }); + return { + data, + baseUse, + baseUse2, + baseUse3, + swipeChange, + componentsClick, + componentsClick2, + translate, + preview1, + preview2 + }; + } +}); +const _hoisted_1 = { style: { "height": "100%" } }; +const _hoisted_2 = { class: "demo dialog-demo" }; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["title"]; +const _hoisted_8 = ["title"]; +const _hoisted_9 = ["open"]; +const _hoisted_10 = ["open"]; +const _hoisted_11 = { + class: "my-indicator", + slot: "indicator" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("basic.preview"), + isLink: "", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.baseUse && _ctx.baseUse(...args)) + }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.configuration")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("configuration.initial"), + isLink: "", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.baseUse2 && _ctx.baseUse2(...args)) + }, null, 8, _hoisted_4), + createBaseVNode("quark-cell", { + title: _ctx.translate("configuration.sliding"), + isLink: "", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.swipeChange && _ctx.swipeChange(...args)) + }, null, 8, _hoisted_5), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("configuration.close"), + isLink: "", + onClick: _cache[3] || (_cache[3] = (...args) => _ctx.baseUse3 && _ctx.baseUse3(...args)) + }, null, 8, _hoisted_6) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.props")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("props.label"), + isLink: "", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.componentsClick && _ctx.componentsClick(...args)) + }, null, 8, _hoisted_7), + createBaseVNode("quark-cell", { + title: _ctx.translate("props.nav"), + isLink: "", + onClick: _cache[5] || (_cache[5] = (...args) => _ctx.componentsClick2 && _ctx.componentsClick2(...args)) + }, null, 8, _hoisted_8) + ]) + ]), + createBaseVNode("quark-image-preview", { + ref: "preview1", + open: _ctx.data.open1 + }, null, 8, _hoisted_9), + createBaseVNode("quark-image-preview", { + ref: "preview2", + open: _ctx.data.open2 + }, [ + createBaseVNode("p", _hoisted_11, toDisplayString(_ctx.translate("page1")) + " " + toDisplayString(_ctx.data.index + 1) + " " + toDisplayString(_ctx.translate("page2")), 1) + ], 8, _hoisted_10) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.3aeeebb8.js b/demo/assets/demo.3aeeebb8.js new file mode 100644 index 000000000..02b33be2a --- /dev/null +++ b/demo/assets/demo.3aeeebb8.js @@ -0,0 +1,122 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, r as ref, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("watermark"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + default: "\u57FA\u7840\u7528\u6CD5" + }, + button: { + normal: "\u6587\u5B57\u6C34\u5370", + multiLine: "\u591A\u884C\u6C34\u5370", + image: "\u56FE\u7247\u6C34\u5370", + gap: "\u7F29\u5C0F\u95F4\u8DDD" + } + }, + "en-US": { + title: { + default: "basic usage" + }, + button: { + normal: "Text Watermark", + image: "Image Watermark", + multiLine: "multiLine Watermark", + gap: "change gap" + } + } + }); + }); + const watermark = ref(null); + const image = ref(""); + const text = ref("quark-design"); + const width = ref(120); + const height = ref(64); + const rotate = ref(-22); + const gapx = ref(24); + const gapy = ref(48); + const changeText = () => { + height.value = "64"; + width.value = "120"; + rotate.value = "-22"; + image.value = ""; + if (watermark.value) + watermark.value.setText("quark-design"); + }; + const changeImage = () => { + height.value = 36; + width.value = 100; + rotate.value = -12; + image.value = "https://m.hellobike.com/resource/helloyun/16682/o7HKA_image.png?x-oss-process=image/quality,q_80"; + }; + const changeMultiText = () => { + height.value = 64; + width.value = 120; + rotate.value = -22; + image.value = ""; + if (watermark.value) + watermark.value.setText(["quark-design", "A component library"]); + }; + const changeGap = () => { + gapx.value = 12; + gapy.value = 24; + }; + return { + watermark, + gapy, + gapx, + width, + height, + rotate, + image, + text, + translate, + changeText, + changeMultiText, + changeImage, + changeGap + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["text", "image", "width", "height", "rotate", "gapx", "gapy"]; +const _hoisted_3 = { class: "demo-buttons" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("quark-watermark", { + ref: "watermark", + text: _ctx.text, + class: "demo-watermark", + image: _ctx.image, + width: _ctx.width, + height: _ctx.height, + rotate: _ctx.rotate, + gapx: _ctx.gapx, + gapy: _ctx.gapy + }, null, 8, _hoisted_2), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.default")), 1), + createBaseVNode("div", _hoisted_3, [ + createBaseVNode("quark-button", { + type: "primary", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.changeText && _ctx.changeText(...args)) + }, toDisplayString(_ctx.translate("button.normal")), 1), + createBaseVNode("quark-button", { + type: "primary", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.changeImage && _ctx.changeImage(...args)) + }, toDisplayString(_ctx.translate("button.image")), 1), + createBaseVNode("quark-button", { + type: "primary", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.changeGap && _ctx.changeGap(...args)) + }, toDisplayString(_ctx.translate("button.gap")), 1), + createBaseVNode("quark-button", { + type: "primary", + onClick: _cache[3] || (_cache[3] = (...args) => _ctx.changeMultiText && _ctx.changeMultiText(...args)) + }, toDisplayString(_ctx.translate("button.multiLine")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.413e6b4d.js b/demo/assets/demo.413e6b4d.js new file mode 100644 index 000000000..c6f65e043 --- /dev/null +++ b/demo/assets/demo.413e6b4d.js @@ -0,0 +1,91 @@ +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("loading"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + loadingType: "\u52A0\u8F7D\u7C7B\u578B", + customSize: "\u81EA\u5B9A\u4E49\u5927\u5C0F", + customColor: "\u81EA\u5B9A\u4E49\u989C\u8272", + loadingText: "\u52A0\u8F7D\u6587\u6848", + vertical: "\u5782\u76F4\u6392\u5217", + customStyle: "\u81EA\u5B9A\u4E49\u6587\u672C\u6837\u5F0F", + load: "\u52A0\u8F7D\u4E2D..." + }, + "en-US": { + loadingType: "Loading Type", + customSize: "Custom Size", + customColor: "Custom Color", + loadingText: "Loading Text", + vertical: "Vertical Layout", + customStyle: "Custom Text Style", + load: "loading..." + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { class: "demo loading-demo" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "demo-loadings" }, [ + /* @__PURE__ */ createBaseVNode("quark-loading", { type: "circular" }), + /* @__PURE__ */ createBaseVNode("quark-loading") +], -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", { class: "demo-loadings" }, [ + /* @__PURE__ */ createBaseVNode("quark-loading", { size: "20" }), + /* @__PURE__ */ createBaseVNode("quark-loading", { size: "30" }), + /* @__PURE__ */ createBaseVNode("quark-loading", { size: "40" }) +], -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", { class: "demo-loadings" }, [ + /* @__PURE__ */ createBaseVNode("quark-loading", { size: "30" }), + /* @__PURE__ */ createBaseVNode("quark-loading", { + size: "30", + color: "green" + }), + /* @__PURE__ */ createBaseVNode("quark-loading", { + size: "30", + color: "#08f" + }) +], -1); +const _hoisted_5 = { class: "demo-loadings" }; +const _hoisted_6 = { size: "30" }; +const _hoisted_7 = { class: "demo-loadings" }; +const _hoisted_8 = { + size: "30", + vertical: "" +}; +const _hoisted_9 = { class: "demo-loadings" }; +const _hoisted_10 = { + size: "30", + vertical: "", + class: "custom-text" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("loadingType")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customSize")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customColor")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("loadingText")), 1), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("quark-loading", _hoisted_6, toDisplayString(_ctx.translate("load")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("vertical")), 1), + createBaseVNode("div", _hoisted_7, [ + createBaseVNode("quark-loading", _hoisted_8, toDisplayString(_ctx.translate("load")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customStyle")), 1), + createBaseVNode("div", _hoisted_9, [ + createBaseVNode("quark-loading", _hoisted_10, toDisplayString(_ctx.translate("load")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.472083aa.js b/demo/assets/demo.472083aa.js new file mode 100644 index 000000000..6de1806a7 --- /dev/null +++ b/demo/assets/demo.472083aa.js @@ -0,0 +1,270 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("field"); +const _sfc_main = createDemo({ + setup() { + const value = ref(1); + const disabled = ref(true); + const css = ref({ + labelWidth: "100px", + labelColor: "#ccc", + labelSize: "16px", + labelMarginRight: "10px", + inputColor: "#999", + inputSize: "12px", + placeholderColor: "red" + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + head: "\u81EA\u5B9A\u4E49\u6807\u9898/\u65E0\u6807\u9898", + disabled: "\u7981\u7528\u4E0E\u53EA\u8BFB", + css: "css \u5C5E\u6027", + event: "\u4E8B\u4EF6", + required: "\u8BBE\u7F6E\u5FC5\u586B\u5B57\u6BB5" + }, + basic: { + placeholder: "\u8BF7\u8F93\u5165\u6587\u672C", + label1: "\u6587\u672C", + label2: "\u5BC6\u7801", + label3: "\u6570\u5B57", + label4: "\u6700\u591A5\u4F4D\u6570", + value: "\u4E00\u4E8C\u4E09\u56DB\u4E94" + }, + head: { + value: "\u81EA\u5B9A\u4E49\u6807\u9898", + main: "\u4E3B\u6807\u9898", + subtitle: "\u8FD9\u662F\u4E00\u884C\u526F\u6807\u9898" + }, + nohead: { + placeholder: "\u7981\u7528label", + value: "\u65E0\u6807\u9898" + }, + disabled: { + value: "\u6211\u7981\u7528\u4E86", + label: "\u7981\u7528" + }, + readonly: { + value: "\u6211\u662F\u53EA\u8BFB\u7684", + label: "\u53EA\u8BFB" + }, + requiredText: { + placeholder: "\u8BF7\u8F93\u5165\u6587\u672C", + label: "\u6587\u672C", + error: "\u6587\u672C\u5185\u5BB9\u4E0D\u80FD\u4E3A\u7A7A" + }, + requiredPhone: { + placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7", + label: "\u624B\u673A\u53F7", + error: "\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + head: "Custom Title", + disabled: "Disabled & Readonly", + css: "CSS Style", + event: "Event", + required: "Requied Content Setting" + }, + basic: { + placeholder: "Please enter text", + label1: "Text", + label2: "Password", + label3: "Number", + label4: "Up to 5 digits", + value: "One Two Tree Four Five" + }, + head: { + value: "Custom Title", + main: "Main Title", + subtitle: "Subtitle" + }, + nohead: { + placeholder: "Disable Label", + value: "No Title" + }, + disabled: { + value: "Disabled", + label: "Disabled" + }, + readonly: { + value: "Readonly", + label: "Readonly" + }, + requiredText: { + placeholder: "Please enter text", + label: "Text", + error: "Text content cannot be empty" + }, + requiredPhone: { + placeholder: "Please enter phone number", + label: "Phone number", + error: "Please enter the correct number" + } + } + }); + }); + onMounted(() => { + const field = document.getElementById("custom-rule"); + field.setRules([ + { + validator: validatorPhone, + message: `${translate("requiredPhone.error")}` + } + ]); + }); + const validatorPhone = (value2) => { + if (!/^1[3456789]\d{9}$/.test(value2)) { + return false; + } + return true; + }; + const change = (e) => { + value.data = e.detail.value; + Toast.text(e.detail.value); + }; + const blur = () => { + Toast.text("blur"); + }; + const focus = () => { + Toast.text("focus"); + }; + return { + value, + disabled, + css, + change, + blur, + focus, + translate + }; + } +}); +const _hoisted_1 = { class: "demo field-demo" }; +const _hoisted_2 = { class: "demo-inputs" }; +const _hoisted_3 = { class: "type" }; +const _hoisted_4 = ["placeholder", "label"]; +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_6 = ["label"]; +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_8 = ["label"]; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_10 = ["value", "label"]; +const _hoisted_11 = { class: "type" }; +const _hoisted_12 = ["value"]; +const _hoisted_13 = { + slot: "label", + class: "label" +}; +const _hoisted_14 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_15 = ["placeholder", "value"]; +const _hoisted_16 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_17 = { class: "type" }; +const _hoisted_18 = ["value", "label"]; +const _hoisted_19 = /* @__PURE__ */ createBaseVNode("div", { class: "line" }, null, -1); +const _hoisted_20 = ["value", "label"]; +const _hoisted_21 = { class: "type" }; +const _hoisted_22 = ["value"]; +const _hoisted_23 = ["label", "value"]; +const _hoisted_24 = ["placeholder", "label", "errormsg"]; +const _hoisted_25 = ["placeholder", "label"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("div", _hoisted_3, [ + createBaseVNode("quark-field", { + placeholder: _ctx.translate("basic.placeholder"), + label: _ctx.translate("basic.label1") + }, null, 8, _hoisted_4), + _hoisted_5, + createBaseVNode("quark-field", { + type: "password", + value: "123456", + label: _ctx.translate("basic.label2") + }, null, 8, _hoisted_6), + _hoisted_7, + createBaseVNode("quark-field", { + type: "number", + value: "12345678901", + max: "11", + label: _ctx.translate("basic.label3") + }, null, 8, _hoisted_8), + _hoisted_9, + createBaseVNode("quark-field", { + value: _ctx.translate("basic.value"), + maxlength: "5", + label: _ctx.translate("basic.label4") + }, null, 8, _hoisted_10) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.head")), 1), + createBaseVNode("div", _hoisted_11, [ + createBaseVNode("quark-field", { + value: _ctx.translate("head.value") + }, [ + createBaseVNode("div", _hoisted_13, [ + createBaseVNode("p", null, toDisplayString(_ctx.translate("head.main")), 1), + createBaseVNode("span", null, toDisplayString(_ctx.translate("head.subtitle")), 1) + ]) + ], 8, _hoisted_12), + _hoisted_14, + createBaseVNode("quark-field", { + placeholder: _ctx.translate("nohead.placeholder"), + value: _ctx.translate("nohead.value"), + class: "oneLine" + }, null, 8, _hoisted_15), + _hoisted_16 + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.disabled")), 1), + createBaseVNode("div", _hoisted_17, [ + createBaseVNode("quark-field", { + value: _ctx.translate("disabled.value"), + label: _ctx.translate("disabled.label"), + disabled: "" + }, null, 8, _hoisted_18), + _hoisted_19, + createBaseVNode("quark-field", { + value: _ctx.translate("readonly.value"), + label: _ctx.translate("readonly.label"), + readonly: "" + }, null, 8, _hoisted_20) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.css")), 1), + createBaseVNode("div", _hoisted_21, [ + createBaseVNode("quark-field", { + class: "theme", + value: _ctx.translate("title.css"), + label: "css" + }, null, 8, _hoisted_22) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.event")), 1), + createBaseVNode("quark-field", { + label: _ctx.translate("title.event"), + value: _ctx.value, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args)), + onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.blur && _ctx.blur(...args)), + onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args)) + }, null, 40, _hoisted_23), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.required")), 1), + createBaseVNode("quark-field", { + placeholder: _ctx.translate("requiredText.placeholder"), + label: _ctx.translate("requiredText.label"), + required: "", + errormsg: _ctx.translate("requiredText.error") + }, null, 8, _hoisted_24), + createBaseVNode("quark-field", { + placeholder: _ctx.translate("requiredPhone.placeholder"), + label: _ctx.translate("requiredPhone.label"), + id: "custom-rule", + required: "" + }, null, 8, _hoisted_25) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.47cbf487.js b/demo/assets/demo.47cbf487.js new file mode 100644 index 000000000..872bb85e9 --- /dev/null +++ b/demo/assets/demo.47cbf487.js @@ -0,0 +1,154 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, e as createStaticVNode, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("swipe"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u4F7F\u7528", + indicator: "\u5706\u5F62\u6307\u793A\u5668", + auto: "\u81EA\u52A8\u64AD\u653E", + settings: "\u8BBE\u7F6E\u9ED8\u8BA4\u9009\u4E2D\u7684swipeItem", + slider: "\u81EA\u5B9A\u4E49\u6ED1\u5757\u5927\u5C0F", + color: "\u8BBE\u7F6E\u6307\u793A\u5668\u989C\u8272", + custom: "\u81EA\u5B9A\u4E49\u6307\u793A\u5668" + }, + "en-US": { + basic: "Basic Usage", + indicator: "Circular Indicator", + auto: "Auto PLay", + settings: "Set Default Swipe Item", + slider: "Custom Slider Size", + color: "Set Indicator Color", + custom: "Custom Indicator" + } + }); + }); + const onChange = (e) => { + }; + const customChange = (e) => { + const indicator = document.getElementById("indicator"); + indicator.innerHTML = `${e.detail.index + 1} / 4`; + }; + return { + onChange, + customChange, + translate + }; + } +}); +const _hoisted_1 = { + class: "demo swipe-demo", + style: { "padding-left": "0", "padding-right": "0" } +}; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("quark-swipe", { inactivecolor: "#fff" }, [ + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "1") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "2") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "3") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "4") + ]) +], -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("quark-swipe", { + type: "round", + inactivecolor: "#fff" +}, [ + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "1") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "2") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "3") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "4") + ]) +], -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "1") +], -1); +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "2") +], -1); +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "3") +], -1); +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "4") +], -1); +const _hoisted_8 = [ + _hoisted_4, + _hoisted_5, + _hoisted_6, + _hoisted_7 +]; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("quark-swipe", { defaultindex: 2 }, [ + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "1") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "2") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "3") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "4") + ]) +], -1); +const _hoisted_10 = /* @__PURE__ */ createStaticVNode('
1
2
3
4
', 1); +const _hoisted_11 = /* @__PURE__ */ createBaseVNode("quark-swipe", { activecolor: "red" }, [ + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "1") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "2") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "one" }, "3") + ]), + /* @__PURE__ */ createBaseVNode("quark-swipe-item", null, [ + /* @__PURE__ */ createBaseVNode("div", { class: "two" }, "4") + ]) +], -1); +const _hoisted_12 = /* @__PURE__ */ createStaticVNode('
1
2
3
4
1 / 4
', 5); +const _hoisted_17 = [ + _hoisted_12 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("indicator")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("auto")), 1), + createBaseVNode("quark-swipe", { + id: "quark-swipe-event", + autoplay: "", + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)) + }, _hoisted_8, 32), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("settings")), 1), + _hoisted_9, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("slider")), 1), + _hoisted_10, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("color")), 1), + _hoisted_11, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("custom")), 1), + createBaseVNode("quark-swipe", { + id: "custom-indicator", + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.customChange && _ctx.customChange(...args)) + }, _hoisted_17, 32) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.4e9cb270.js b/demo/assets/demo.4e9cb270.js new file mode 100644 index 000000000..346a537e5 --- /dev/null +++ b/demo/assets/demo.4e9cb270.js @@ -0,0 +1,105 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("skeleton"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + checked: false, + hide: false + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + avator: "\u663E\u793A\u5934\u50CF\u3001\u6807\u9898", + rowwidths: "\u8BBE\u7F6E\u5BBD\u5EA6", + childComponent: "\u663E\u793A\u5B50\u7EC4\u4EF6", + about: "\u5173\u4E8E Quark", + des: "Quark \u662F\u4E00\u6B3E\u57FA\u4E8E Web Components \u7684\u8DE8\u6846\u67B6 UI \u7EC4\u4EF6\u5E93\u3002" + }, + "en-US": { + basic: "Basic Usage", + avator: "Show Avatar\u3001Title", + rowwidths: "Set row width", + childComponent: "Show childComponent", + about: "About Quark", + des: "Quark is a cross-frame UI component library based on Web Components." + } + }); + }); + const handleSwitch = (e) => { + data.value.checked = e.detail.value; + data.value.hide = e.detail.value; + }; + return { + data, + handleSwitch, + translate + }; + } +}); +const _hoisted_1 = { + class: "demo skeleton-demo", + style: { "background": "#fff" } +}; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell base-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-skeleton", { row: 2 }) +], -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell base-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-skeleton", { + title: "", + avatar: "", + row: 2 + }) +], -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("div", { class: "quark-cell base-cell" }, [ + /* @__PURE__ */ createBaseVNode("quark-skeleton", { + title: "", + avatar: "", + row: 2, + rowwidths: "100%,20%" + }) +], -1); +const _hoisted_5 = ["checked"]; +const _hoisted_6 = { class: "quark-cell base-cell" }; +const _hoisted_7 = ["hide"]; +const _hoisted_8 = { class: "demo-preview" }; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("img", { + src: "https://m.hellobike.com/resource/helloyun/13459/BI7jn_quark-logo.png", + alt: "" +}, null, -1); +const _hoisted_10 = { class: "demo-content" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("avator")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("rowwidths")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("childComponent")), 1), + createBaseVNode("quark-switch", { + checked: _ctx.data.checked, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleSwitch && _ctx.handleSwitch(...args)) + }, null, 40, _hoisted_5), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-skeleton", { + title: "", + avatar: "", + row: 2, + hide: _ctx.data.hide + }, [ + createBaseVNode("div", _hoisted_8, [ + _hoisted_9, + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("h3", null, toDisplayString(_ctx.translate("about")), 1), + createBaseVNode("p", null, toDisplayString(_ctx.translate("des")), 1) + ]) + ]) + ], 8, _hoisted_7) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.50e2ebaf.js b/demo/assets/demo.50e2ebaf.js new file mode 100644 index 000000000..2f1898965 --- /dev/null +++ b/demo/assets/demo.50e2ebaf.js @@ -0,0 +1,207 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("toast"); +const _sfc_main = createDemo({ + setup() { + const tag = ref(null); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + top: "\u9876\u90E8\u5C55\u793A", + bottom: "\u5E95\u90E8\u5C55\u793A", + position: "Toast \u663E\u793A\u4F4D\u7F6E", + functionCall: "\u51FD\u6570\u5F0F\u8C03\u7528", + closeCallback: "\u5173\u95ED\u540E\u56DE\u8C03\u51FD\u6570", + textTip: "\u6587\u5B57\u63D0\u793A", + horizontalLoadingTip: "\u6C34\u5E73\u65B9\u5411\u7684\u52A0\u8F7D\u56FE\u6807", + successTip: "\u6210\u529F\u63D0\u793A", + errorTip: "\u5931\u8D25\u63D0\u793A", + warningTip: "\u8B66\u544A\u63D0\u793A", + loadingTip: "\u52A0\u8F7D\u63D0\u793A", + networkTip: "\u7F51\u7EDC\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5\uFF5E", + executeCallback: "\u56DE\u8C03\u51FD\u6570\u6267\u884C", + close: "\u4E09\u79D2\u540E\u5173\u95ED" + }, + "en-US": { + top: "Show on top", + bottom: "Show on bottom", + position: "Toast position", + functionCall: "Function Call", + closeCallback: "Close Callback", + textTip: "Text Tip", + successTip: "Success Tip", + errorTip: "Error Tip", + warningTip: "Warning Tip", + loadingTip: "Loading Tip", + networkTip: "Network failed, please try again later~", + executeCallback: "Execute Callback", + close: "Close after three seconds" + } + }); + }); + const cbClick = () => { + Toast.text(`${translate("networkTip")}`, { + close: () => Toast.text(`${translate("executeCallback")}`) + }); + }; + const handleTextClick = () => { + Toast.text(`${translate("networkTip")}`); + }; + const handleTextTopClick = () => { + Toast.text(`${translate("networkTip")}`, { + position: "top" + }); + }; + const handleTextBottomClick = () => { + Toast.text(`${translate("networkTip")}`, { + position: "bottom" + }); + }; + const handlehorizontalLoadingClick = () => { + Toast.loading(`${translate("loadingTip")}`, { + loadingIconDirection: "horizontal" + }); + }; + const handleSuccessClick = () => { + Toast.success(`${translate("successTip")}`); + }; + const handleErrorClick = () => { + Toast.error(`${translate("errorTip")}`); + }; + const handleWarningClick = () => { + Toast.warning(`${translate("warningTip")}`); + }; + const handleLoadingClick = () => { + const toast = Toast.loading(`${translate("close")}`, { + duration: 0, + size: 40 + }); + setTimeout(() => { + toast.hide(); + }, 3e3); + }; + return { + handleTextTopClick, + handleTextBottomClick, + tag, + cbClick, + handleTextClick, + handlehorizontalLoadingClick, + handleSuccessClick, + handleErrorClick, + handleWarningClick, + handleLoadingClick, + translate + }; + } +}); +const _hoisted_1 = { class: "demo toast-demo" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_8 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +const _hoisted_10 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "right" +}, null, -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("functionCall")), 1), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args)) + }, [ + createBaseVNode("div", null, "Text " + toDisplayString(_ctx.translate("textTip")), 1), + _hoisted_2 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handlehorizontalLoadingClick && _ctx.handlehorizontalLoadingClick(...args)) + }, [ + createBaseVNode("div", null, "Text " + toDisplayString(_ctx.translate("horizontalLoadingTip")), 1), + _hoisted_3 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleSuccessClick && _ctx.handleSuccessClick(...args)) + }, [ + createBaseVNode("div", null, "Success " + toDisplayString(_ctx.translate("successTip")), 1), + _hoisted_4 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleErrorClick && _ctx.handleErrorClick(...args)) + }, [ + createBaseVNode("div", null, "Error " + toDisplayString(_ctx.translate("errorTip")), 1), + _hoisted_5 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleWarningClick && _ctx.handleWarningClick(...args)) + }, [ + createBaseVNode("div", null, "Warning " + toDisplayString(_ctx.translate("warningTip")), 1), + _hoisted_6 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[5] || (_cache[5] = (...args) => _ctx.handleLoadingClick && _ctx.handleLoadingClick(...args)) + }, [ + createBaseVNode("div", null, "Loading " + toDisplayString(_ctx.translate("loadingTip")), 1), + _hoisted_7 + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("position")), 1), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[6] || (_cache[6] = (...args) => _ctx.handleTextTopClick && _ctx.handleTextTopClick(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("top")), 1), + _hoisted_8 + ]), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleTextBottomClick && _ctx.handleTextBottomClick(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("bottom")), 1), + _hoisted_9 + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("closeCallback")), 1), + createBaseVNode("div", { + class: "quark-cell", + onClick: _cache[8] || (_cache[8] = (...args) => _ctx.cbClick && _ctx.cbClick(...args)) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("closeCallback")), 1), + _hoisted_10 + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.54622f4c.js b/demo/assets/demo.54622f4c.js new file mode 100644 index 000000000..b5d336486 --- /dev/null +++ b/demo/assets/demo.54622f4c.js @@ -0,0 +1,84 @@ +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("overlay"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const customOpen = ref(false); + const click = () => { + open.value = true; + }; + const customClick = () => { + customOpen.value = true; + }; + const closed = () => { + open.value = false; + }; + const customClosed = () => { + customOpen.value = false; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basicUsage: "\u57FA\u7840\u7528\u6CD5", + context: "\u5D4C\u5165\u5185\u5BB9" + }, + "en-US": { + basicUsage: "Basic Usage", + context: "Embedded Content" + } + }); + }); + return { + open, + customOpen, + click, + customClick, + closed, + customClosed, + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["open"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", { class: "content" }, null, -1); +const _hoisted_7 = [ + _hoisted_6 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basicUsage")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("basicUsage"), + islink: "", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args)) + }, null, 8, _hoisted_2) + ]), + createBaseVNode("quark-overlay", { + open: _ctx.open, + onClose: _cache[1] || (_cache[1] = (...args) => _ctx.closed && _ctx.closed(...args)) + }, null, 40, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("context")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("context"), + islink: "", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.customClick && _ctx.customClick(...args)) + }, null, 8, _hoisted_4) + ]), + createBaseVNode("quark-overlay", { + open: _ctx.customOpen, + onClose: _cache[3] || (_cache[3] = (...args) => _ctx.customClosed && _ctx.customClosed(...args)) + }, _hoisted_7, 40, _hoisted_5) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.56c1d936.js b/demo/assets/demo.56c1d936.js new file mode 100644 index 000000000..57f5df515 --- /dev/null +++ b/demo/assets/demo.56c1d936.js @@ -0,0 +1,96 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock, p as pushScopeId, q as popScopeId } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_scoped_true_lang = ""; +const { createDemo, translate } = createComponent("rate"); +const _sfc_main = createDemo({ + setup() { + const rate = ref(2); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + selectedColor: "\u81EA\u5B9A\u4E49\u9009\u4E2D\u989C\u8272", + disabled: "\u7981\u7528\u72B6\u6001", + readonly: "\u53EA\u8BFB\u72B6\u6001", + event: "\u76D1\u542C change \u4E8B\u4EF6", + imageIcon: "\u56FE\u7247icon" + }, + "en-US": { + basic: "Basic Usage", + selectedColor: "Custom Selected Color", + disabled: "Disabled", + readonly: "Readonly", + event: "Listen to change event", + imageIcon: "image icon" + } + }); + }); + onMounted(() => { + setTimeout(() => { + rate.value = 3; + }, 2e3); + }); + const handleChange = (e) => { + Toast.text(e.detail.value); + }; + return { + rate, + handleChange, + translate + }; + } +}); +const _withScopeId = (n) => (pushScopeId("data-v-08f46bee"), n = n(), popScopeId(), n); +const _hoisted_1 = { class: "demo scope-rate" }; +const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-rate", { defaultvalue: "1" }) +], -1)); +const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-rate", { + defaultvalue: "2", + activecolor: "#ffd21e" + }) +], -1)); +const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-rate", { + defaultvalue: "2", + disabled: "" + }) +], -1)); +const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-rate", { + defaultvalue: "2", + readonly: "" + }) +], -1)); +const _hoisted_6 = { class: "tag-container" }; +const _hoisted_7 = ["value"]; +const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-rate", { + defaultvalue: "2", + imgicon: "https://vue-quarkd.hellobike.com/assets/quark-logo.f9a6a307.png" + }) +], -1)); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("selectedColor")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("readonly")), 1), + _hoisted_5, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("event")), 1), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-rate", { + value: _ctx.rate, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)) + }, null, 40, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("imageIcon")), 1), + _hoisted_8 + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-08f46bee"]]); +export { demo as default }; diff --git a/demo/assets/demo.5ab4e636.js b/demo/assets/demo.5ab4e636.js new file mode 100644 index 000000000..445263eda --- /dev/null +++ b/demo/assets/demo.5ab4e636.js @@ -0,0 +1,166 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("steps"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + title: `${translate("status.doing.title")}`, + content: `${translate("status.doing.content")}`, + status: "doing" + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u672C\u7528\u6CD5", + desc: "\u6807\u9898\u548C\u63CF\u8FF0\u4FE1\u606F", + vertical: "\u7AD6\u5411\u6B65\u9AA4\u6761" + }, + steps: { + step1: "\u6B65\u9AA4\u4E00", + step2: "\u6B65\u9AA4\u4E8C", + step3: "\u6B65\u9AA4\u4E09" + }, + status: { + done: { + title: "\u5DF2\u5B8C\u6210", + content: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5305\u5B8C\u6210\uFF0C\u5546\u54C1\u5DF2\u53D1\u51FA" + }, + todo: { + title: "\u672A\u5F00\u59CB", + content: "\u6536\u8D27\u5730\u5740\u4E3A\uFF1A\u676D\u5DDE\u5E02\u76CA\u5C55\u5546\u52A1\u5927\u53A6" + }, + doing: { + title: "\u8FDB\u884C\u4E2D", + content: "\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u4E2D..." + } + } + }, + "en-US": { + title: { + basic: "Basic Usage", + desc: "Title and Description", + vertical: "Vertical Steps" + }, + steps: { + step1: "Step One", + step2: "Step Two", + step3: "Step Three" + }, + status: { + done: { + title: "Finished", + content: "Your order has been packed and the item has been dispatched" + }, + todo: { + title: "Not Started", + content: "The delivery address is: 16F, Yizhan Business Building, Hangzhou" + }, + doing: { + title: "Processing", + content: "Your order is being shipped..." + } + } + } + }); + }); + onMounted(() => { + setTimeout(() => { + data.value.title = `${translate("status.done.title")}`; + data.value.content = `${translate("status.done.content")}`; + data.value.status = "done"; + }, 5e3); + }); + return { + data, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding steps-demo" }; +const _hoisted_2 = { class: "item-wrap item-horizontal" }; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = { class: "item-wrap item-horizontal" }; +const _hoisted_7 = ["title", "content"]; +const _hoisted_8 = ["status", "title", "content"]; +const _hoisted_9 = ["title", "content"]; +const _hoisted_10 = { class: "item-wrap" }; +const _hoisted_11 = { direction: "vertical" }; +const _hoisted_12 = ["title", "content"]; +const _hoisted_13 = ["title", "content"]; +const _hoisted_14 = ["title", "content"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-steps", null, [ + createBaseVNode("quark-step", { + status: "done", + title: _ctx.translate("steps.step1"), + order: "1" + }, null, 8, _hoisted_3), + createBaseVNode("quark-step", { + status: "doing", + title: _ctx.translate("steps.step2"), + order: "2" + }, null, 8, _hoisted_4), + createBaseVNode("quark-step", { + status: "todo", + title: _ctx.translate("steps.step3"), + order: "3" + }, null, 8, _hoisted_5) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.desc")), 1), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-steps", null, [ + createBaseVNode("quark-step", { + status: "done", + title: _ctx.translate("status.done.title"), + content: _ctx.translate("status.done.content"), + order: "1" + }, null, 8, _hoisted_7), + createBaseVNode("quark-step", { + status: _ctx.data.status, + title: _ctx.data.title, + content: _ctx.data.content, + order: "2" + }, null, 8, _hoisted_8), + createBaseVNode("quark-step", { + status: "todo", + title: _ctx.translate("status.todo.title"), + content: _ctx.translate("status.todo.content"), + order: "3" + }, null, 8, _hoisted_9) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.vertical")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-steps", _hoisted_11, [ + createBaseVNode("quark-step", { + status: "done", + title: _ctx.translate("status.done.title"), + content: _ctx.translate("status.done.content"), + order: "1" + }, null, 8, _hoisted_12), + createBaseVNode("quark-step", { + status: "doing", + title: _ctx.translate("status.doing.title"), + content: _ctx.translate("status.doing.content"), + order: "2" + }, null, 8, _hoisted_13), + createBaseVNode("quark-step", { + status: "todo", + title: _ctx.translate("status.todo.title"), + content: _ctx.translate("status.todo.content"), + order: "3" + }, null, 8, _hoisted_14) + ]) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.5dd54e52.js b/demo/assets/demo.5dd54e52.js new file mode 100644 index 000000000..2ef11c77f --- /dev/null +++ b/demo/assets/demo.5dd54e52.js @@ -0,0 +1,178 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("grid"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u4F7F\u7528", + column: "\u81EA\u5B9A\u4E49\u5217\u6570", + square: "\u6B63\u65B9\u5F62\u683C\u5B50", + border: "\u65E0\u8FB9\u6846", + custom: "\u81EA\u5B9A\u4E49\u5185\u5BB9", + text: "\u6587\u5B57" + }, + "en-US": { + basic: "Basic Usage", + column: "Custom Column", + square: "Square Cell", + border: "No Border", + custom: "Custom Content", + text: "text" + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { class: "demo demo-badge" }; +const _hoisted_2 = ["text"]; +const _hoisted_3 = ["text"]; +const _hoisted_4 = ["text"]; +const _hoisted_5 = ["text"]; +const _hoisted_6 = { column: "3" }; +const _hoisted_7 = ["text"]; +const _hoisted_8 = ["text"]; +const _hoisted_9 = ["text"]; +const _hoisted_10 = ["text"]; +const _hoisted_11 = ["text"]; +const _hoisted_12 = ["text"]; +const _hoisted_13 = { + column: "3", + square: "" +}; +const _hoisted_14 = ["text"]; +const _hoisted_15 = ["text"]; +const _hoisted_16 = ["text"]; +const _hoisted_17 = ["text"]; +const _hoisted_18 = ["text"]; +const _hoisted_19 = ["text"]; +const _hoisted_20 = { noborder: "" }; +const _hoisted_21 = ["text"]; +const _hoisted_22 = ["text"]; +const _hoisted_23 = ["text"]; +const _hoisted_24 = ["text"]; +const _hoisted_25 = /* @__PURE__ */ createBaseVNode("quark-grid", { column: "3" }, [ + /* @__PURE__ */ createBaseVNode("quark-grid-item", null, [ + /* @__PURE__ */ createBaseVNode("img", { + src: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + style: { "width": "40px" } + }) + ]), + /* @__PURE__ */ createBaseVNode("quark-grid-item", null, [ + /* @__PURE__ */ createBaseVNode("img", { + src: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + style: { "width": "40px" } + }) + ]), + /* @__PURE__ */ createBaseVNode("quark-grid-item", null, [ + /* @__PURE__ */ createBaseVNode("img", { + src: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + style: { "width": "40px" } + }) + ]) +], -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-grid", null, [ + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_2), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_3), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_4), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_5) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("column")), 1), + createBaseVNode("quark-grid", _hoisted_6, [ + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_7), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_8), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_9), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_10), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_11), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_12) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("square")), 1), + createBaseVNode("quark-grid", _hoisted_13, [ + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_14), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_15), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_16), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_17), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_18), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_19) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("border")), 1), + createBaseVNode("quark-grid", _hoisted_20, [ + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_21), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_22), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_23), + createBaseVNode("quark-grid-item", { + icon: "https://m.hellobike.com/resource/helloyun/16682/dyElZ_img.png", + text: _ctx.translate("text") + }, null, 8, _hoisted_24) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("custom")), 1), + _hoisted_25 + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.6259b525.js b/demo/assets/demo.6259b525.js new file mode 100644 index 000000000..41db00d2b --- /dev/null +++ b/demo/assets/demo.6259b525.js @@ -0,0 +1,219 @@ +import { J as B, K as H, N, O, P, _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var style = ":host {\n width: 100%;\n}\n\n:host .quark-virtual-list {\n width: var(--virtual-list-width, 100%);\n background-color: var(--virtual-list-background-color, #fff);\n overflow-y: auto;\n position: relative;\n}\n\n:host .quark-virtual-list-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n"; +var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6; +function _initializerDefineProperty(target, property2, descriptor, context) { + if (!descriptor) + return; + Object.defineProperty(target, property2, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); +} +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true }); + } else { + obj[key] = value; + } + return obj; +} +function _applyDecoratedDescriptor(target, property2, decorators, descriptor, context) { + var desc = {}; + Object.keys(descriptor).forEach(function(key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + if ("value" in desc || desc.initializer) { + desc.writable = true; + } + desc = decorators.slice().reverse().reduce(function(desc2, decorator) { + return decorator(target, property2, desc2) || desc2; + }, desc); + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = void 0; + } + if (desc.initializer === void 0) { + Object.defineProperty(target, property2, desc); + desc = null; + } + return desc; +} +_dec = B({ + tag: "quark-virtuallist", + style +}), _dec2 = N({ + type: Number +}), _dec3 = N({ + type: Number +}), _dec4 = O(), _dec5 = O(), _dec6 = O(), _dec7 = O(), _dec(_class = (_class2 = class QuarkVirtualList2 extends H { + constructor(...args) { + super(...args); + _initializerDefineProperty(this, "itemheight", _descriptor, this); + _initializerDefineProperty(this, "containerheight", _descriptor2, this); + _initializerDefineProperty(this, "listData", _descriptor3, this); + _initializerDefineProperty(this, "visibleData", _descriptor4, this); + _initializerDefineProperty(this, "renderItem", _descriptor5, this); + _initializerDefineProperty(this, "startOffset", _descriptor6, this); + _defineProperty(this, "prevStart", 0); + _defineProperty(this, "prevEnd", 0); + _defineProperty(this, "virtualListRef", P()); + _defineProperty(this, "containerRef", P()); + _defineProperty(this, "updateVisibleData", (scrollTop = 0) => { + const start = Math.floor(scrollTop / this.itemheight); + const visibleItemCnt = Math.ceil(this.containerheight / this.itemheight); + const end = Math.min(start + visibleItemCnt, this.listData.length) + 1; + if (this.prevStart !== start || this.prevEnd !== end) { + this.visibleData = this.listData.slice(start, end); + this.prevStart = start; + this.prevEnd = end; + this.startOffset = start * this.itemheight; + } + if (start + visibleItemCnt >= this.listData.length) { + this.$emit("load"); + } + }); + _defineProperty(this, "handleListScroll", () => { + const { + current + } = this.virtualListRef; + if (!current) { + console.warn("virtualListRef not find"); + return; + } + const scrollTop = current.scrollTop; + this.updateVisibleData(scrollTop); + }); + _defineProperty(this, "componentDidMount", () => { + this.updateVisibleData(); + }); + _defineProperty(this, "renderList", () => { + const list = this.visibleData.map((item) => this.renderItem(item)); + if (this.containerRef.current) { + this.containerRef.current.innerHTML = list.join("\n"); + } + }); + } + setListData(listData) { + this.listData = listData; + this.updateVisibleData(); + } + setRenderItem(renderItem) { + this.renderItem = renderItem; + } + render() { + return /* @__PURE__ */ H.h("div", { + ref: this.virtualListRef, + class: "quark-virtual-list", + style: { + height: this.containerheight + }, + onScroll: this.handleListScroll + }, /* @__PURE__ */ H.h("div", { + class: "quark-virtual-list-phantom", + style: { + height: this.listData.length * this.itemheight + } + }), /* @__PURE__ */ H.h("div", { + ref: this.containerRef, + class: "quark-virtual-list-container", + style: { + transform: `translate3d(0, ${this.startOffset}px, 0)` + } + }, this.renderList())); + } +}, _descriptor = _applyDecoratedDescriptor(_class2.prototype, "itemheight", [_dec2], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return 50; + } +}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "containerheight", [_dec3], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return document.documentElement.clientHeight || document.body.clientHeight || 667; + } +}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "listData", [_dec4], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return []; + } +}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "visibleData", [_dec5], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return []; + } +}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "renderItem", [_dec6], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return () => null; + } +}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, "startOffset", [_dec7], { + configurable: true, + enumerable: true, + writable: true, + initializer: function() { + return 0; + } +}), _class2)) || _class; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("virtuallist"); +const _sfc_main = createDemo({ + setup() { + const list = ref(new Array(100).fill(0).map((_, i) => i + 1)); + const virtualListRef = ref(null); + const onLoad = () => { + const len = list.value.length; + const arr = new Array(100).fill(0).map((_, i) => len + i + 1); + list.value = list.value.concat(arr); + virtualListRef.value.setListData(list.value); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5" + }, + "en-US": { + basic: "Basic Usage" + } + }); + }); + const renderItem = (text) => { + const div = ` +
${text}
+ `; + return div; + }; + onMounted(() => { + virtualListRef.value.setListData(list.value); + virtualListRef.value.setRenderItem(renderItem); + }); + return { + translate, + virtualListRef, + onLoad + }; + } +}); +const _hoisted_1 = { class: "demo no-padding popup-demo" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-virtuallist", { + ref: "virtualListRef", + itemheight: 50, + containerheight: 500, + onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.onLoad && _ctx.onLoad(...args)) + }, null, 544) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.6c3c0e46.js b/demo/assets/demo.6c3c0e46.js new file mode 100644 index 000000000..4d8543725 --- /dev/null +++ b/demo/assets/demo.6c3c0e46.js @@ -0,0 +1,178 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("picker"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const customOpen = ref(false); + const pickerRef = ref(null); + const customPickerRef = ref(null); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u4F7F\u7528", + head: "\u81EA\u5B9A\u4E49\u5934\u90E8", + selectedTime: "\u8BF7\u9009\u62E9\u65F6\u95F4", + confirmText: "\u786E\u8BA4", + custom: { + cancel: "\u53D6\u6D88", + confirm: "\u786E\u5B9A", + title: "\u8BF7\u9009\u62E9\u57CE\u5E02" + }, + time: ["\u4E0A\u5348", "\u4E0B\u5348"], + values: ["\u676D\u5DDE", "\u5609\u5174", "\u7ECD\u5174", "\u5B81\u6CE2", "\u6E56\u5DDE", "\u5343\u5C9B\u6E56"], + selected: "\u5F53\u524D\u9009\u4E2D\uFF1A" + }, + "en-US": { + basic: "Basic Usage", + head: "Custom head", + confirmText: "Confirm", + selectedTime: "Please select Time", + custom: { + cancel: "Cancel", + confirm: "Confirm", + title: "Please select city" + }, + time: ["a.m.", "p.m."], + values: [ + "Hangzhou", + "Jiaxing", + "Shaoxing", + "Ningbo", + "Huzhou", + "Qiandao Lake" + ], + selected: "Currently Selected: " + } + }); + }); + onMounted(() => { + setTimeout(() => { + const preview = pickerRef.value; + preview.setColumns([ + { + defaultIndex: 2, + values: translate("calendaritem.weekdays") + }, + { + defaultIndex: 0, + values: translate("time") + } + ]); + const customPreview = customPickerRef.value; + customPreview.setColumns([ + { + defaultIndex: 0, + values: translate("values") + } + ]); + }, 1e3); + }); + const click = () => { + open.value = true; + }; + const customClick = () => { + customOpen.value = true; + }; + const close = (type) => { + if (type === 0) { + open.value = false; + } else if (type === 1) { + customOpen.value = false; + } + }; + const confirm = ({ detail }) => { + const values = detail.value.map((column) => { + return column.value; + }).join("\uFF0C"); + Toast.text(`${translate("selected")}${values}`); + open.value = false; + }; + const customConfirm = () => { + const customPreview = customPickerRef.value; + const values = customPreview.getValues().map((column) => { + return column.value; + }).join("\uFF0C"); + Toast.text(`${translate("selected")}${values}`); + customOpen.value = false; + }; + const change = ({ detail }) => { + console.log(detail.value, 33333); + }; + return { + open, + customOpen, + pickerRef, + customPickerRef, + click, + customClick, + close, + confirm, + customConfirm, + change, + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["open", "title", "confirmtext"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = { + slot: "header", + class: "head-container" +}; +const _hoisted_7 = { class: "picker-title" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("basic"), + islink: "", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args)) + }, null, 8, _hoisted_2) + ]), + createBaseVNode("quark-picker", { + ref: "pickerRef", + open: _ctx.open, + title: _ctx.translate("selectedTime"), + confirmtext: _ctx.translate("confirmText"), + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.change && _ctx.change(...args)), + onClose: _cache[2] || (_cache[2] = ($event) => _ctx.close(0)), + onConfirm: _cache[3] || (_cache[3] = (...args) => _ctx.confirm && _ctx.confirm(...args)) + }, null, 40, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("head")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("head"), + islink: "", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.customClick && _ctx.customClick(...args)) + }, null, 8, _hoisted_4) + ]), + createBaseVNode("quark-picker", { + open: _ctx.customOpen, + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.close(1)), + ref: "customPickerRef", + bottomhidden: "" + }, [ + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("span", { + class: "cancel", + onClick: _cache[5] || (_cache[5] = ($event) => _ctx.close(1)) + }, toDisplayString(_ctx.translate("custom.cancel")), 1), + createBaseVNode("span", _hoisted_7, toDisplayString(_ctx.translate("custom.title")), 1), + createBaseVNode("span", { + class: "ensure", + onClick: _cache[6] || (_cache[6] = (...args) => _ctx.customConfirm && _ctx.customConfirm(...args)) + }, toDisplayString(_ctx.translate("custom.confirm")), 1) + ]) + ], 40, _hoisted_5) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.6faa3bc8.js b/demo/assets/demo.6faa3bc8.js new file mode 100644 index 000000000..8d23b4929 --- /dev/null +++ b/demo/assets/demo.6faa3bc8.js @@ -0,0 +1,240 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("cascadepicker"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const customOpen = ref(false); + const pickerRef = ref(null); + const customPickerRef = ref(null); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + head: "\u81EA\u5B9A\u4E49\u5934\u90E8", + region: "\u8BF7\u9009\u62E9\u5730\u533A" + }, + button: { + cancel: "\u53D6\u6D88", + confirm: "\u786E\u5B9A" + }, + options: { + zhejiang: "\u6D59\u6C5F", + hangzhou: "\u676D\u5DDE", + xihu: "\u897F\u6E56\u533A", + yuhang: "\u4F59\u676D\u533A", + wenzhou: "\u6E29\u5DDE", + lucheng: "\u9E7F\u57CE\u533A", + ouhai: "\u74EF\u6D77\u533A", + fujian: "\u798F\u5EFA", + fuzhou: "\u798F\u5DDE", + gulou: "\u9F13\u697C\u533A", + taijiang: "\u53F0\u6C5F\u533A", + xiamen: "\u53A6\u95E8", + siming: "\u601D\u660E\u533A", + haicang: "\u6D77\u6CA7\u533A", + beijing: "\u5317\u4EAC" + }, + selected: "\u5F53\u524D\u9009\u4E2D\uFF1A" + }, + "en-US": { + title: { + basic: "Basic Usage", + head: "Custom Head", + region: "Please select the region" + }, + button: { + cancel: "Cancel", + confirm: "Confirm" + }, + options: { + zhejiang: "Zhejiang", + hangzhou: "Hangzhou", + xihu: "Xihu", + yuhang: "Yuhang", + wenzhou: "Wenzhou", + lucheng: "Lucheng", + ouhai: "Ouhai", + fujian: "Fujian", + fuzhou: "Fuzhou", + gulou: "Gulou", + taijiang: "Taijiang", + xiamen: "Xiamen", + siming: "Siming", + haicang: "Haicang", + beijing: "Beijing" + }, + selected: "Currently selected: " + } + }); + }); + onMounted(() => { + const DATA = [ + { + text: `${translate("options.zhejiang")}`, + children: [ + { + text: `${translate("options.hangzhou")}`, + children: [{ text: `${translate("options.xihu")}` }] + }, + { + text: `${translate("options.wenzhou")}`, + children: [ + { text: `${translate("options.lucheng")}` }, + { text: `${translate("options.ouhai")}` } + ] + } + ] + }, + { + text: `${translate("options.fujian")}`, + children: [ + { + text: `${translate("options.fuzhou")}`, + children: [ + { text: `${translate("options.gulou")}` }, + { text: `${translate("options.taijiang")}` } + ] + }, + { + text: `${translate("options.xiamen")}`, + children: [ + { text: `${translate("options.siming")}` }, + { text: `${translate("options.haicang")}` } + ] + } + ] + }, + { + text: `${translate("options.beijing")}`, + children: [ + { + text: "", + children: [{ text: "" }] + } + ] + } + ]; + setTimeout(() => { + const preview = pickerRef.value; + preview.setColumns(DATA); + const customPreview = customPickerRef.value; + customPreview.setColumns(DATA); + }, 1e3); + }); + const click = () => { + open.value = true; + }; + const customClick = () => { + customOpen.value = true; + }; + const close = (type) => { + if (type === 0) { + open.value = false; + } else if (type === 1) { + customOpen.value = false; + } + }; + const confirm = ({ detail }) => { + let values = detail.value.map((column) => { + return column.value; + }); + values = values.filter((value) => value.length > 0); + if (values.length > 1) { + values = values.join("\uFF0C"); + } + Toast.text(`${values}`); + open.value = false; + }; + const customConfirm = () => { + const customPreview = customPickerRef.value; + let values = customPreview.getValues().map((column) => { + return column.value; + }); + values = values.filter((value) => value.length > 0); + if (values.length > 1) { + values = values.join("\uFF0C"); + } + Toast.text(`${values}`); + customOpen.value = false; + }; + const change = ({ detail }) => { + console.log(detail.value, 33333); + }; + return { + open, + customOpen, + pickerRef, + customPickerRef, + click, + customClick, + close, + confirm, + customConfirm, + change, + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["open", "title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = { + slot: "header", + class: "head-container" +}; +const _hoisted_7 = { class: "picker-title" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.basic"), + islink: "", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args)) + }, null, 8, _hoisted_2) + ]), + createBaseVNode("quark-cascade-picker", { + open: _ctx.open, + onClose: _cache[1] || (_cache[1] = ($event) => _ctx.close(0)), + title: _ctx.translate("title.region"), + onConfirm: _cache[2] || (_cache[2] = (...args) => _ctx.confirm && _ctx.confirm(...args)), + ref: "pickerRef", + onChange: _cache[3] || (_cache[3] = (...args) => _ctx.change && _ctx.change(...args)) + }, null, 40, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.head")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.head"), + islink: "", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.customClick && _ctx.customClick(...args)) + }, null, 8, _hoisted_4) + ]), + createBaseVNode("quark-cascade-picker", { + open: _ctx.customOpen, + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.close(1)), + ref: "customPickerRef", + bottomhidden: "" + }, [ + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("span", { + class: "cancel", + onClick: _cache[5] || (_cache[5] = ($event) => _ctx.close(1)) + }, toDisplayString(_ctx.translate("button.cancel")), 1), + createBaseVNode("span", _hoisted_7, toDisplayString(_ctx.translate("title.region")), 1), + createBaseVNode("span", { + class: "ensure", + onClick: _cache[6] || (_cache[6] = (...args) => _ctx.customConfirm && _ctx.customConfirm(...args)) + }, toDisplayString(_ctx.translate("button.confirm")), 1) + ]) + ], 40, _hoisted_5) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.7af57a27.js b/demo/assets/demo.7af57a27.js new file mode 100644 index 000000000..d95d6258c --- /dev/null +++ b/demo/assets/demo.7af57a27.js @@ -0,0 +1,160 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, I as ActionSheet, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("sharesheet"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basicUsage: "\u57FA\u672C\u4F7F\u7528", + customStyle: "\u81EA\u5B9A\u4E49\u6837\u5F0F", + titleStyle: "\u6807\u9898\u6837\u5F0F", + cancelButtonStyle: "\u53D6\u6D88\u6309\u94AE\u6837\u5F0F", + options: ["\u5FAE\u4FE1", "\u5FAE\u4FE1\u670B\u53CB\u5708", "QQ", "QQ\u7A7A\u95F4", "\u5FAE\u535A", "\u4E8C\u7EF4\u7801"], + maskClick: "\u8499\u7248\u70B9\u51FB", + cancel: "\u53D6\u6D88" + }, + "en-US": { + basicUsage: "Basic Usage", + customStyle: "Custom Style", + titleStyle: "Title Style", + cancelButtonStyle: "Cancel Button Style", + options: [ + "WeChat", + "WeChat Moments", + "QQ", + "QQ Space", + "WeiBo", + "QR Code" + ], + maskClick: "Mask Click", + cancel: "Cancel" + } + }); + }); + const showBase = () => { + ActionSheet({ + options: [ + { + name: `${translate("options")[0]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png" + }, + { + name: `${translate("options")[1]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png" + }, + { + name: `${translate("options")[2]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/J4TWX9Jpca.png" + }, + { + name: `${translate("options")[3]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/wG7wG2CHQx.png" + }, + { + name: `${translate("options")[4]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/vt_vyR3M8I.png" + }, + { + name: `${translate("options")[5]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/hvu4xjJpNY.png" + } + ], + select: (index, action) => { + Toast.text(action.name); + } + }); + }; + const showTitleCustom = () => { + ActionSheet({ + titleColor: "red", + titleFontSize: 20, + options: [ + { + name: `${translate("options")[0]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png" + }, + { + name: `${translate("options")[1]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png" + }, + { + name: `${translate("options")[2]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/J4TWX9Jpca.png" + } + ], + select: (index, action) => { + Toast.text(action.name); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + const showCancelCustom = () => { + ActionSheet({ + options: [ + { + name: `${translate("options")[0]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/LY3mn00VTX.png" + }, + { + name: `${translate("options")[1]}`, + icon: "https://m.hellobike.com/resource/helloyun/16682/QOiMPs9BLj.png" + } + ], + cancelColor: "red", + select: (index, action) => { + Toast.text(action.name); + }, + cancel: () => { + Toast.text(`${translate("cancel")}`); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + return { + showBase, + showTitleCustom, + showCancelCustom, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding action-sheet-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basicUsage")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.showBase && _ctx.showBase(...args)), + title: _ctx.translate("basicUsage") + }, null, 8, _hoisted_2) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customStyle")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.showTitleCustom && _ctx.showTitleCustom(...args)), + title: _ctx.translate("titleStyle") + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.showCancelCustom && _ctx.showCancelCustom(...args)), + title: _ctx.translate("cancelButtonStyle") + }, null, 8, _hoisted_4) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.7d962a95.js b/demo/assets/demo.7d962a95.js new file mode 100644 index 000000000..f02b905af --- /dev/null +++ b/demo/assets/demo.7d962a95.js @@ -0,0 +1,219 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, r as ref, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("button"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + type: "\u6309\u94AE\u7C7B\u578B", + shape: "\u6309\u94AE\u5F62\u72B6", + plain: "\u6734\u7D20\u6309\u94AE", + light: "\u6D45\u8272\u6309\u94AE", + disabled: "\u7981\u7528\u72B6\u6001", + loading: "\u52A0\u8F7D\u72B6\u6001", + icon: "\u56FE\u6807\u6309\u94AE", + size: "\u6309\u94AE\u5C3A\u5BF8" + }, + type: { + default: "\u9ED8\u8BA4\u6309\u94AE", + primary: "\u4E3B\u8981\u6309\u94AE", + success: "\u6210\u529F\u6309\u94AE", + danger: "\u5371\u9669\u6309\u94AE", + warning: "\u8B66\u544A\u6309\u94AE" + }, + shape: { + square: "\u65B9\u5F62\u6309\u94AE", + round: "\u5C0F\u5706\u89D2\u6309\u94AE" + }, + size: { + large: "\u7279\u5927\u5C3A\u5BF8", + big: "\u5927\u53F7\u5C3A\u5BF8", + normal: "\u666E\u901A\u5C3A\u5BF8", + small: "\u5C0F\u53F7\u5C3A\u5BF8" + }, + loading: "\u52A0\u8F7D\u4E2D...", + click: "\u70B9\u6211!", + like: "\u559C\u6B22", + name: "\u5F20\u4E09" + }, + "en-US": { + title: { + type: "Button Type", + shape: "Button Shape", + plain: "Plain Button", + light: "Light Button", + disabled: "Disabled", + loading: "Loading", + icon: "Icon Button", + size: "Button Size" + }, + type: { + default: "Default", + primary: "Primary", + success: "Success", + danger: "Danger", + warning: "Warning" + }, + shape: { + square: "Square", + round: "Round" + }, + size: { + large: "Large", + big: "Big", + normal: "Normal", + small: "Small" + }, + loading: "Loading...", + click: "Click Me!", + like: "Like", + name: "Zhang San" + } + }); + }); + const isLoading = ref(false); + const changeLoading = () => { + isLoading.value = true; + setTimeout(() => { + isLoading.value = false; + }, 2e3); + }; + return { + translate, + isLoading, + changeLoading + }; + } +}); +const _hoisted_1 = { class: "demo button-demo" }; +const _hoisted_2 = { class: "demo-buttons" }; +const _hoisted_3 = { type: "primary" }; +const _hoisted_4 = { type: "success" }; +const _hoisted_5 = { type: "danger" }; +const _hoisted_6 = { type: "warning" }; +const _hoisted_7 = { class: "demo-buttons" }; +const _hoisted_8 = { + plain: "", + type: "primary" +}; +const _hoisted_9 = { + plain: "", + type: "success" +}; +const _hoisted_10 = { class: "demo-buttons" }; +const _hoisted_11 = { + light: "", + type: "primary" +}; +const _hoisted_12 = { + light: "", + type: "success" +}; +const _hoisted_13 = { class: "demo-buttons" }; +const _hoisted_14 = { + type: "primary", + size: "large" +}; +const _hoisted_15 = { + type: "primary", + size: "big" +}; +const _hoisted_16 = { type: "primary" }; +const _hoisted_17 = { + type: "primary", + size: "small" +}; +const _hoisted_18 = { class: "demo-buttons" }; +const _hoisted_19 = { + type: "primary", + disabled: "" +}; +const _hoisted_20 = { disabled: "" }; +const _hoisted_21 = { class: "demo-buttons" }; +const _hoisted_22 = { + shape: "square", + type: "danger" +}; +const _hoisted_23 = { + style: { "--button-border-radius": "6px" }, + type: "primary" +}; +const _hoisted_24 = { class: "flex" }; +const _hoisted_25 = { + loading: "", + loadtype: "circular", + type: "danger" +}; +const _hoisted_26 = { + loading: "", + type: "warning" +}; +const _hoisted_27 = ["loading"]; +const _hoisted_28 = { class: "demo-buttons" }; +const _hoisted_29 = { + type: "danger", + icon: "https://m.hellobike.com/resource/helloyun/16682/Agnve_tel%20(1).png" +}; +const _hoisted_30 = { + type: "primary", + icon: "https://m.hellobike.com/resource/helloyun/16682/_pay6_setting%20(1).png" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.type")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-button", null, toDisplayString(_ctx.translate("type.default")), 1), + createBaseVNode("quark-button", _hoisted_3, toDisplayString(_ctx.translate("type.primary")), 1), + createBaseVNode("quark-button", _hoisted_4, toDisplayString(_ctx.translate("type.success")), 1), + createBaseVNode("quark-button", _hoisted_5, toDisplayString(_ctx.translate("type.danger")), 1), + createBaseVNode("quark-button", _hoisted_6, toDisplayString(_ctx.translate("type.warning")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.plain")), 1), + createBaseVNode("div", _hoisted_7, [ + createBaseVNode("quark-button", _hoisted_8, toDisplayString(_ctx.translate("type.primary")), 1), + createBaseVNode("quark-button", _hoisted_9, toDisplayString(_ctx.translate("type.success")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.light")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-button", _hoisted_11, toDisplayString(_ctx.translate("type.primary")), 1), + createBaseVNode("quark-button", _hoisted_12, toDisplayString(_ctx.translate("type.success")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.size")), 1), + createBaseVNode("div", _hoisted_13, [ + createBaseVNode("quark-button", _hoisted_14, toDisplayString(_ctx.translate("size.large")), 1), + createBaseVNode("quark-button", _hoisted_15, toDisplayString(_ctx.translate("size.big")), 1), + createBaseVNode("quark-button", _hoisted_16, toDisplayString(_ctx.translate("size.normal")), 1), + createBaseVNode("quark-button", _hoisted_17, toDisplayString(_ctx.translate("size.small")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.disabled")), 1), + createBaseVNode("div", _hoisted_18, [ + createBaseVNode("quark-button", _hoisted_19, toDisplayString(_ctx.translate("title.disabled")), 1), + createBaseVNode("quark-button", _hoisted_20, toDisplayString(_ctx.translate("title.disabled")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.shape")), 1), + createBaseVNode("div", _hoisted_21, [ + createBaseVNode("quark-button", _hoisted_22, toDisplayString(_ctx.translate("shape.square")), 1), + createBaseVNode("quark-button", _hoisted_23, toDisplayString(_ctx.translate("shape.round")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.loading")), 1), + createBaseVNode("div", _hoisted_24, [ + createBaseVNode("quark-button", _hoisted_25, toDisplayString(_ctx.translate("loading")), 1), + createBaseVNode("quark-button", _hoisted_26, toDisplayString(_ctx.translate("loading")), 1), + createBaseVNode("quark-button", { + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.changeLoading && _ctx.changeLoading(...args)), + loading: _ctx.isLoading, + type: "success" + }, toDisplayString(_ctx.translate("click")), 9, _hoisted_27) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.icon")), 1), + createBaseVNode("div", _hoisted_28, [ + createBaseVNode("quark-button", _hoisted_29, toDisplayString(_ctx.translate("like")), 1), + createBaseVNode("quark-button", _hoisted_30, toDisplayString(_ctx.translate("name")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.83166e74.js b/demo/assets/demo.83166e74.js new file mode 100644 index 000000000..1fb4c31cc --- /dev/null +++ b/demo/assets/demo.83166e74.js @@ -0,0 +1,91 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("button"); +const _sfc_main = createDemo({ + setup() { + const time1 = ref(72e5); + const time2 = ref(36e4); + const time3 = ref(5e3); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + base: "\u57FA\u672C\u4F7F\u7528", + format: "\u683C\u5F0F\u5316", + callback: "\u7ED3\u675F\u56DE\u8C03", + style: "\u6837\u5F0F\u81EA\u5B9A\u4E49", + slot: "\u81EA\u5B9A\u4E49\u95F4\u9694\u7B26" + }, + "en-US": { + base: "Basic Usage", + format: "Custom Format", + callback: "End the callback", + style: "Custom Style", + slot: "Custom spacer" + } + }); + }); + const onEnd = () => { + Toast.text("\u5F00\u59CB\u79D2\u6740"); + }; + return { + translate, + time1, + time2, + time3, + onEnd + }; + } +}); +const _hoisted_1 = { class: "demo button-demo" }; +const _hoisted_2 = { class: "demo-buttons" }; +const _hoisted_3 = ["time"]; +const _hoisted_4 = { class: "demo-buttons" }; +const _hoisted_5 = ["time"]; +const _hoisted_6 = ["time"]; +const _hoisted_7 = ["time"]; +const _hoisted_8 = { class: "demo-buttons" }; +const _hoisted_9 = ["time"]; +const _hoisted_10 = { class: "demo-buttons" }; +const _hoisted_11 = ["time"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("base")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-countdown", { time: _ctx.time1 }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("format")), 1), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-countdown", { + format: "MM:SS", + time: _ctx.time2, + class: "mgr-10" + }, null, 8, _hoisted_5), + createBaseVNode("quark-countdown", { + format: "MM-SS", + time: _ctx.time2, + class: "mgr-10" + }, null, 8, _hoisted_6), + createBaseVNode("quark-countdown", { + format: "SS", + time: _ctx.time2 + }, null, 8, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("callback")), 1), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-countdown", { + time: _ctx.time3, + onEnd: _cache[0] || (_cache[0] = (...args) => _ctx.onEnd && _ctx.onEnd(...args)) + }, null, 40, _hoisted_9) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("style")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-countdown", { + class: "css", + time: _ctx.time1 + }, null, 8, _hoisted_11) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.83644c67.js b/demo/assets/demo.83644c67.js new file mode 100644 index 000000000..bf90e0783 --- /dev/null +++ b/demo/assets/demo.83644c67.js @@ -0,0 +1,133 @@ +var __async = (__this, __arguments, generator) => { + return new Promise((resolve, reject) => { + var fulfilled = (value) => { + try { + step(generator.next(value)); + } catch (e) { + reject(e); + } + }; + var rejected = (value) => { + try { + step(generator.throw(value)); + } catch (e) { + reject(e); + } + }; + var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); + step((generator = generator.apply(__this, __arguments)).next()); + }); +}; +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock, T as Toast } from "./mobile.5b772776.js"; +import { o as onBeforeRouteLeave } from "./vue-router.7779546b.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("uploader"); +const _sfc_main = createDemo({ + setup() { + const isPreview = ref(false); + const preview = ref(null); + const preview2 = ref(null); + const preview3 = ref(null); + const maxcount = ref(3); + const previewUrls = [ + "https://img.yzcdn.cn/vant/leaf.jpg", + "https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png" + ]; + const successUrl = [ + "https://m.hellobike.com/resource/helloyun/15697/JPjd2_WX20220830-141115.png?x-oss-process=image/quality,q_80", + "https://m.hellobike.com/resource/helloyun/15697/Wc4c2_shop.png?x-oss-process=image/quality,q_80" + ]; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + remove: "\u56FE\u7247\u5220\u9664", + readonly: "\u53EA\u8BFB\u6A21\u5F0F" + }, + "en-US": { + basic: "Basic Usage", + remove: "Picture Remove", + readonly: "readonly" + } + }); + }); + onMounted(() => { + console.log(preview3, "333"); + preview.value.setPreview(previewUrls); + preview2.value.setPreview(previewUrls); + preview3.value.setPreview(previewUrls); + }); + const sleep = (time) => { + return new Promise((reslove) => { + setTimeout(() => { + reslove(true); + }, time); + }); + }; + const callNative = () => __async(this, null, function* () { + const toast = Toast.loading("\u5BA2\u6237\u7AEF\u4E0A\u4F20\u56FE\u7247\u4E2D"); + yield sleep(1e3); + toast.hide(); + Toast.success("\u5BA2\u6237\u7AEF\u8FD4\u56DE\u6570\u636E"); + return Promise.resolve(successUrl); + }); + const afterRead = (_0) => __async(this, [_0], function* ({ detail: data }) { + const successData = yield callNative(); + const newData = data.concat(successData); + preview.value.setPreview(newData); + }); + const onremove = ({ detail: item }) => { + console.log(item, "item"); + }; + onBeforeRouteLeave(() => { + const nodes = document.querySelectorAll("quark-image-preview "); + nodes.forEach((i) => i.open = false); + }); + return { + isPreview, + preview, + preview2, + preview3, + afterRead, + translate, + onremove, + maxcount + }; + } +}); +const _hoisted_1 = { class: "demo uploader-demo" }; +const _hoisted_2 = { class: "flex" }; +const _hoisted_3 = ["maxcount"]; +const _hoisted_4 = { class: "flex" }; +const _hoisted_5 = { class: "flex" }; +const _hoisted_6 = { + ref: "preview3", + readonly: "" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-native-uploader", { + ref: "preview", + onOnread: _cache[0] || (_cache[0] = (...args) => _ctx.afterRead && _ctx.afterRead(...args)), + maxcount: _ctx.maxcount + }, null, 40, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("remove")), 1), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-native-uploader", { + ref: "preview2", + onOnread: _cache[1] || (_cache[1] = (...args) => _ctx.afterRead && _ctx.afterRead(...args)), + onOnremove: _cache[2] || (_cache[2] = (...args) => _ctx.onremove && _ctx.onremove(...args)) + }, null, 544) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("readonly")), 1), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("quark-native-uploader", _hoisted_6, null, 512) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.878520d9.js b/demo/assets/demo.878520d9.js new file mode 100644 index 000000000..3b250bcb7 --- /dev/null +++ b/demo/assets/demo.878520d9.js @@ -0,0 +1,233 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +import { o as onBeforeRouteLeave } from "./vue-router.7779546b.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("dialog"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const open2 = ref(false); + const open3 = ref(false); + const open4 = ref(false); + const open5 = ref(false); + const open6 = ref(false); + const open7 = ref(false); + const open8 = ref(false); + const open9 = ref(false); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + dialogTitle: "\u6807\u9898", + alert: "\u63D0\u793A\u5F39\u7A97", + alertWithoutContent: "\u63D0\u793A\u5F39\u7A97\uFF08\u6CA1\u6709\u5185\u5BB9\uFF09", + confirm: "\u786E\u8BA4\u5F39\u7A97", + btnvertical: "\u786E\u8BA4\u5F39\u7A97(\u6309\u94AE\u5782\u76F4\u6392\u5217)", + basicDialog: "\u57FA\u7840\u5F39\u7A97", + showCloseButton: "\u9690\u85CF\u5173\u95ED\u6309\u94AE", + alignLeft: "\u5185\u5BB9\u5C45\u5DE6\u5BF9\u9F50", + customFooter: "Footer \u81EA\u5B9A\u4E49", + noFooter: "Footer \u9690\u85CF", + title: "\u8FD9\u662F\u4E00\u53E5\u8BDD\u5C31\u80FD\u8BF4\u6E05\u695A\u7684\u786E\u8BA4\u5F39\u7A97\uFF0C\u6240\u4EE5\u53EA\u6709\u6807\u9898", + content: "\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002", + text: "\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C", + okText: "\u77E5\u9053\u4E86", + customTitle: "Title \u81EA\u5B9A\u4E49", + noTitle: "Title \u9690\u85CF" + }, + "en-US": { + basic: "Basic use", + dialogTitle: "Title", + alert: "Alert", + alertWithoutContent: "Alert without content", + confirm: "Confirm dialog", + btnvertical: "Confirm dialog\uFF08vertical button\uFF09", + basicDialog: "Basic Dialog", + showCloseButton: "Hide Close Button", + alignLeft: "Align Content To The Left", + customFooter: "Custom Footer", + noFooter: "Not Show Footer ", + title: "This is a confirmation dialog that can be explained clearly in one sentence, so only the title", + content: "This is a content", + text: "This is custom body. The code is written for people to see, with the addition of running on the machine", + okText: "Got it", + noTitle: "Title hide", + customTitle: "Custom title" + } + }); + }); + onBeforeRouteLeave(() => { + const quarkDialogs = document.querySelectorAll("quark-dialog"); + quarkDialogs.forEach((i) => i.open = false); + }); + return { + open, + open2, + open3, + open4, + open5, + open6, + open7, + open8, + open9, + translate + }; + } +}); +const _hoisted_1 = { class: "demo demo-dialog" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["open", "title", "content"]; +const _hoisted_7 = ["open", "title", "oktext"]; +const _hoisted_8 = ["open", "title", "content"]; +const _hoisted_9 = ["open", "title", "content"]; +const _hoisted_10 = /* @__PURE__ */ createBaseVNode("h2", null, "Title", -1); +const _hoisted_11 = ["title"]; +const _hoisted_12 = ["title"]; +const _hoisted_13 = ["content", "open"]; +const _hoisted_14 = { + slot: "title", + style: { "color": "red", "font-size": "16px", "margin-bottom": "14px" } +}; +const _hoisted_15 = ["open", "content"]; +const _hoisted_16 = /* @__PURE__ */ createBaseVNode("h2", null, "Footer", -1); +const _hoisted_17 = ["title"]; +const _hoisted_18 = ["title"]; +const _hoisted_19 = ["title", "open"]; +const _hoisted_20 = { + slot: "footer", + class: "custom-footer" +}; +const _hoisted_21 = ["open", "title", "content"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + isLink: "", + title: _ctx.translate("alert"), + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.open = true) + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + type: "primary", + isLink: "", + title: _ctx.translate("alertWithoutContent"), + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.open2 = true) + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + type: "primary", + isLink: "", + title: _ctx.translate("confirm"), + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.open3 = true) + }, null, 8, _hoisted_4), + createBaseVNode("quark-cell", { + type: "primary", + isLink: "", + title: _ctx.translate("btnvertical"), + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.open6 = true) + }, null, 8, _hoisted_5) + ]), + createBaseVNode("quark-dialog", { + type: "confirm", + open: _ctx.open, + title: _ctx.translate("dialogTitle"), + content: _ctx.translate("content"), + onConfirm: _cache[4] || (_cache[4] = ($event) => _ctx.open = false), + onClose: _cache[5] || (_cache[5] = ($event) => _ctx.open = false) + }, null, 40, _hoisted_6), + createBaseVNode("quark-dialog", { + type: "confirm", + open: _ctx.open2, + title: _ctx.translate("title"), + oktext: _ctx.translate("okText"), + onConfirm: _cache[6] || (_cache[6] = ($event) => _ctx.open2 = false), + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.open2 = false) + }, null, 40, _hoisted_7), + createBaseVNode("quark-dialog", { + open: _ctx.open3, + title: _ctx.translate("dialogTitle"), + content: _ctx.translate("text"), + onClose: _cache[8] || (_cache[8] = ($event) => _ctx.open3 = false), + onConfirm: _cache[9] || (_cache[9] = ($event) => _ctx.open3 = false), + onCancel: _cache[10] || (_cache[10] = ($event) => _ctx.open3 = false) + }, null, 40, _hoisted_8), + createBaseVNode("quark-dialog", { + btnvertical: "", + open: _ctx.open6, + title: _ctx.translate("dialogTitle"), + content: _ctx.translate("text"), + onClose: _cache[11] || (_cache[11] = ($event) => _ctx.open6 = false), + onConfirm: _cache[12] || (_cache[12] = ($event) => _ctx.open6 = false), + onCancel: _cache[13] || (_cache[13] = ($event) => _ctx.open6 = false) + }, null, 40, _hoisted_9), + _hoisted_10, + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + title: _ctx.translate("customTitle"), + onClick: _cache[14] || (_cache[14] = ($event) => _ctx.open4 = true) + }, null, 8, _hoisted_11), + createBaseVNode("quark-cell", { + islink: "", + title: _ctx.translate("noTitle"), + onClick: _cache[15] || (_cache[15] = ($event) => _ctx.open5 = true) + }, null, 8, _hoisted_12) + ]), + createBaseVNode("quark-dialog", { + content: _ctx.translate("content"), + open: _ctx.open4, + onConfirm: _cache[16] || (_cache[16] = ($event) => _ctx.open4 = false), + onCancel: _cache[17] || (_cache[17] = ($event) => _ctx.open4 = false), + onClose: _cache[18] || (_cache[18] = ($event) => _ctx.open4 = false) + }, [ + createBaseVNode("div", _hoisted_14, toDisplayString(_ctx.translate("customTitle")), 1) + ], 40, _hoisted_13), + createBaseVNode("quark-dialog", { + notitle: "", + open: _ctx.open5, + content: _ctx.translate("content"), + onConfirm: _cache[19] || (_cache[19] = ($event) => _ctx.open5 = false), + onCancel: _cache[20] || (_cache[20] = ($event) => _ctx.open5 = false), + onClose: _cache[21] || (_cache[21] = ($event) => _ctx.open5 = false) + }, null, 40, _hoisted_15), + _hoisted_16, + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + title: _ctx.translate("customFooter"), + onClick: _cache[22] || (_cache[22] = ($event) => _ctx.open8 = true) + }, null, 8, _hoisted_17), + createBaseVNode("quark-cell", { + islink: "", + title: _ctx.translate("noFooter"), + onClick: _cache[23] || (_cache[23] = ($event) => _ctx.open9 = true) + }, null, 8, _hoisted_18) + ]), + createBaseVNode("quark-dialog", { + title: _ctx.translate("dialogTitle"), + open: _ctx.open8, + onClose: _cache[25] || (_cache[25] = ($event) => _ctx.open8 = false) + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("text")), 1), + createBaseVNode("div", _hoisted_20, [ + createBaseVNode("quark-button", { + type: "primary", + onClick: _cache[24] || (_cache[24] = ($event) => _ctx.open8 = false) + }, toDisplayString(_ctx.translate("customFooter")), 1) + ]) + ], 40, _hoisted_19), + createBaseVNode("quark-dialog", { + nofooter: "", + open: _ctx.open9, + title: _ctx.translate("dialogTitle"), + content: _ctx.translate("content"), + onConfirm: _cache[26] || (_cache[26] = ($event) => _ctx.open9 = false), + onClose: _cache[27] || (_cache[27] = ($event) => _ctx.open9 = false) + }, null, 40, _hoisted_21) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.879355d2.js b/demo/assets/demo.879355d2.js new file mode 100644 index 000000000..719a4b892 --- /dev/null +++ b/demo/assets/demo.879355d2.js @@ -0,0 +1,147 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, h as createTextVNode, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("noticebar"); +const _sfc_main = createDemo({ + setup() { + const data = ref([]); + const onRightClick = () => { + Toast.text(`${translate("text.clickToast")}`); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + multiple: "\u6587\u5B57\u884C\u6570\u8BBE\u7F6E", + style: "\u6837\u5F0F\u8BBE\u7F6E", + marquee: "\u6587\u5B57\u8D85\u957F\u6EDA\u52A8", + icon: "\u56FE\u6807\u9690\u85CF", + custom: "\u4E24\u7AEF\u81EA\u5B9A\u4E49", + right: "\u53F3\u4FA7\u4E8B\u4EF6\u7ED1\u5B9A" + }, + text: { + content: "\u5927\u5B66\u4E4B\u9053\uFF0C\u5728\u660E\u660E\u5FB7\uFF0C\u5728\u4EB2\u6C11\uFF0C\u5728\u6B62\u4E8E\u81F3\u5584\u3002", + left: "\u5DE6\u4FA7\u5185\u5BB9", + right: "\u53F3\u4FA7\u5185\u5BB9", + error: "\u5F53\u524D\u7F51\u7EDC\u4E0D\u53EF\u7528\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC\u8BBE\u7F6E", + set: "\u53BB\u8BBE\u7F6E", + rightClick: "\u8BD5\u7740\u70B9\u51FB\u4E00\u4E0B\u53F3\u7BAD\u5934", + multiple: "\u5927\u5B66\u7684\u76EE\u7684\uFF0C\u5728\u4E8E\u663E\u660E\u9AD8\u5C1A\u7684\u54C1\u5FB7\uFF0C\u5728\u4E8E\u4F7F\u4EBA\u4EEC\u9769\u9664\u65E7\u4E60\uFF0C\u5728\u4E8E\u8FBE\u5230\u5584\u7684\u6700\u9AD8\u5883\u754C\u3002\u5927\u5B66\u7684\u76EE\u7684\uFF0C\u5728\u4E8E\u663E\u660E\u9AD8\u5C1A\u7684\u54C1\u5FB7\uFF0C\u5728\u4E8E\u4F7F\u4EBA\u4EEC\u9769\u9664\u65E7\u4E60\uFF0C\u5728\u4E8E\u8FBE\u5230\u5584\u7684\u6700\u9AD8\u5883\u754C\u3002", + clickToast: "\u70B9\u51FB\u6D4B\u8BD5" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + multiple: "Multiple Text", + style: "Style", + marquee: "Marquee", + icon: "Hide Icon", + custom: "Custom Ends", + right: "Right Event" + }, + text: { + content: "The way of the university is to be bright and virtuous.", + left: "Left Content", + right: "Right Content", + error: "Current network is unavailable, please check the network settings", + set: "Go to Settings", + rightClick: "Try to click the right arrow", + multiple: "The purpose of a university is to demonstrate noble character, to get rid of old habits, and to reach the highest state of goodness. The purpose of a university is to demonstrate noble character, to get rid of old habits, and to reach the highest state of goodness.", + clickToast: "Click to test" + } + } + }); + data.value = { + lefttext: false, + right: "", + text: `${translate("text.content")}`, + multipleText: `${translate("text.multiple")}` + }; + }); + return { + data, + onRightClick, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding" }; +const _hoisted_2 = ["text"]; +const _hoisted_3 = ["text"]; +const _hoisted_4 = ["text"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["text"]; +const _hoisted_7 = ["text"]; +const _hoisted_8 = ["text"]; +const _hoisted_9 = { slot: "left" }; +const _hoisted_10 = { slot: "right" }; +const _hoisted_11 = ["text"]; +const _hoisted_12 = { slot: "right" }; +const _hoisted_13 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "15", + name: "right" +}, null, -1); +const _hoisted_14 = ["text"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-noticebar", { + text: _ctx.data.text + }, null, 8, _hoisted_2), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.multiple")), 1), + createBaseVNode("quark-noticeBar", { + text: _ctx.data.multipleText, + multiple: 2 + }, null, 8, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.style")), 1), + createBaseVNode("quark-noticebar", { + text: _ctx.data.text, + color: "#1989fa", + bgcolor: "#ecf9ff" + }, null, 8, _hoisted_4), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.marquee")), 1), + createBaseVNode("quark-noticebar", null, [ + createBaseVNode("quark-marquee", { + slot: "text", + title: _ctx.data.multipleText + }, null, 8, _hoisted_5) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.icon")), 1), + createBaseVNode("quark-noticebar", { + text: _ctx.translate("text.content"), + righthide: "", + style: { "margin-bottom": "10px" } + }, null, 8, _hoisted_6), + createBaseVNode("quark-noticebar", { + text: _ctx.translate("text.content"), + lefthide: "" + }, null, 8, _hoisted_7), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.custom")), 1), + createBaseVNode("quark-noticebar", { + class: "noticebar-left-style-setting", + text: _ctx.translate("text.content") + }, [ + createBaseVNode("div", _hoisted_9, toDisplayString(_ctx.translate("text.left")), 1), + createBaseVNode("div", _hoisted_10, toDisplayString(_ctx.translate("text.right")), 1) + ], 8, _hoisted_8), + createBaseVNode("quark-noticebar", { + class: "noticebar-right-style-setting", + lefthide: "", + text: _ctx.translate("text.error") + }, [ + createBaseVNode("span", _hoisted_12, [ + createTextVNode(toDisplayString(_ctx.translate("text.set")), 1), + _hoisted_13 + ]) + ], 8, _hoisted_11), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.right")), 1), + createBaseVNode("quark-noticebar", { + text: _ctx.translate("text.rightClick"), + onRightclick: _cache[0] || (_cache[0] = (...args) => _ctx.onRightClick && _ctx.onRightClick(...args)) + }, null, 40, _hoisted_14) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.8b075191.js b/demo/assets/demo.8b075191.js new file mode 100644 index 000000000..75de71f53 --- /dev/null +++ b/demo/assets/demo.8b075191.js @@ -0,0 +1,352 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("cascadepicker"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const dateVisible = ref(false); + const yearMonthVisible = ref(false); + const monthDayVisible = ref(false); + const timeVisible = ref(false); + const datetimeVisible = ref(false); + const datehourVisible = ref(false); + const customToolbarVisible = ref(false); + const setValueVisible = ref(false); + const minDate = ref("2020-10-01"); + const maxDate = ref("2025-08-13"); + const currentDate = ref("2021-11-30"); + const currentTime = ref("16:01"); + const datetimePickerRef = ref(); + const timePicekerRef = ref(); + const yearMonthRef = ref(); + const monthDayRef = ref(); + const datetimeRef = ref(); + const setValueRef = ref(); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + head: "\u81EA\u5B9A\u4E49\u5934\u90E8", + date: "\u9009\u62E9\u5E74\u6708\u65E5", + yearMonth: "\u9009\u62E9\u5E74\u6708", + monthDay: "\u9009\u62E9\u6708\u65E5", + time: "\u9009\u62E9\u65F6\u95F4", + datetime: "\u9009\u62E9\u5B8C\u6574\u65F6\u95F4", + datehour: "\u9009\u62E9\u5E74\u6708\u65E5\u5C0F\u65F6", + setValue: "\u8BBE\u7F6E\u5F53\u524D\u65F6\u95F4" + }, + button: { + cancel: "\u53D6\u6D88", + confirm: "\u786E\u5B9A" + }, + year: "\u5E74", + month: "\u6708", + day: "\u65E5", + hour: "\u65F6", + minute: "\u5206" + }, + "en-US": { + title: { + basic: "Basic Usage", + head: "Custom Head", + date: "Choose Date", + yearMonth: "Choose Year-Month", + monthDay: "Choose Month-Day", + time: "Choose Time", + datetime: "Choose Datetime", + datehour: "Choose DateHour", + setValue: "Set current date" + }, + button: { + cancel: "Cancel", + confirm: "Confirm" + }, + year: "Year", + month: "Month", + day: "Day", + hour: "Hour", + minute: "Minute" + } + }); + }); + const formatter = (type, val) => { + if (type === "year") { + return `${val}${translate("year")}`; + } + if (type === "month") { + return `${val}${translate("month")}`; + } + if (type === "day") { + return `${val}${translate("day")}`; + } + return val; + }; + onMounted(() => { + yearMonthRef.value.setFormatter(formatter); + monthDayRef.value.setFormatter(formatter); + timePicekerRef.value.setFormatter((type, val) => { + if (type === "hour") { + return `${val}${translate("hour")}`; + } + if (type === "minute") { + return `${val}${translate("minute")}`; + } + return val; + }); + timePicekerRef.value.setFilter(filter); + }); + const filter = (type, options) => { + if (type === "minute") { + return options.filter((option) => Number(option) % 5 === 0); + } + return options; + }; + const visibleHandle = (type, visible = true) => { + if (type === "date") { + dateVisible.value = visible; + } else if (type === "year-month") { + yearMonthVisible.value = visible; + } else if (type === "month-day") { + monthDayVisible.value = visible; + } else if (type === "time") { + timeVisible.value = visible; + } else if (type === "datetime") { + datetimeVisible.value = visible; + } else if (type === "datehour") { + datehourVisible.value = visible; + } else if (type === "custom") { + customToolbarVisible.value = visible; + } else if (type === "setValue") { + if (visible === true) { + setValueRef.value.setValue("2023-10-07"); + } + setValueVisible.value = visible; + } + }; + const confirm = (type, { detail }) => { + visibleHandle(type, false); + if (type === "time") { + Toast.text(`${detail.value}`); + return; + } + const year = detail.value.getFullYear(); + const month = detail.value.getMonth() + 1; + const day = detail.value.getDate(); + const hour = detail.value.getHours(); + const minute = detail.value.getMinutes(); + if (type === "date" || type === "custom" || type === "setValue") { + Toast.text(`${year}\u5E74${month}\u6708${day}\u65E5`); + } else if (type === "year-month") { + Toast.text(`${year}\u5E74${month}\u6708`); + } else if (type === "month-day") { + Toast.text(`${month}\u6708${day}\u65E5`); + } else if (type === "datetime") { + Toast.text(`${year}\u5E74${month}\u6708${day}\u65E5 ${hour}:${minute}`); + } else if (type === "datehour") { + Toast.text(`${year}\u5E74${month}\u6708${day}\u65E5 ${hour}\u65F6`); + } + }; + const change = ({ detail }) => { + console.log(detail.value); + }; + return { + open, + confirm, + change, + translate, + minDate, + maxDate, + currentDate, + dateVisible, + yearMonthVisible, + monthDayVisible, + timeVisible, + datetimeVisible, + datehourVisible, + customToolbarVisible, + visibleHandle, + currentTime, + datetimePickerRef, + timePicekerRef, + yearMonthRef, + monthDayRef, + datetimeRef, + setValueVisible, + setValueRef + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["value", "title", "open", "mindate", "maxdate", "confirmbuttontext", "cancelbuttontext"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title", "open", "mindate", "maxdate"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["title", "open"]; +const _hoisted_8 = ["title"]; +const _hoisted_9 = ["value", "title", "open"]; +const _hoisted_10 = ["title"]; +const _hoisted_11 = ["title", "open", "mindate", "maxdate"]; +const _hoisted_12 = ["title"]; +const _hoisted_13 = ["title", "open"]; +const _hoisted_14 = ["title"]; +const _hoisted_15 = ["title", "open", "mindate", "maxdate"]; +const _hoisted_16 = ["title"]; +const _hoisted_17 = ["title", "open", "mindate", "maxdate"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.date"), + islink: "", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.visibleHandle("date")) + }, null, 8, _hoisted_2) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "datetimePickerRef", + type: "date", + value: _ctx.currentDate, + title: _ctx.translate("title.date"), + open: _ctx.dateVisible, + mindate: _ctx.minDate, + maxdate: _ctx.maxDate, + confirmbuttontext: _ctx.translate("button.confirm"), + cancelbuttontext: _ctx.translate("button.cancel"), + onClose: _cache[1] || (_cache[1] = ($event) => _ctx.visibleHandle("date", false)), + onConfirm: _cache[2] || (_cache[2] = (detail) => _ctx.confirm("date", detail)) + }, null, 40, _hoisted_3), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.yearMonth"), + islink: "", + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.visibleHandle("year-month")) + }, null, 8, _hoisted_4) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "yearMonthRef", + type: "year-month", + title: _ctx.translate("title.yearMonth"), + open: _ctx.yearMonthVisible, + mindate: _ctx.minDate, + maxdate: _ctx.maxDate, + onClose: _cache[4] || (_cache[4] = ($event) => _ctx.visibleHandle("year-month", false)), + onConfirm: _cache[5] || (_cache[5] = (detail) => _ctx.confirm("year-month", detail)) + }, null, 40, _hoisted_5), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.monthDay"), + islink: "", + onClick: _cache[6] || (_cache[6] = ($event) => _ctx.visibleHandle("month-day")) + }, null, 8, _hoisted_6) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "monthDayRef", + type: "month-day", + title: _ctx.translate("title.monthDay"), + open: _ctx.monthDayVisible, + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.visibleHandle("month-day", false)), + onConfirm: _cache[8] || (_cache[8] = (detail) => _ctx.confirm("month-day", detail)) + }, null, 40, _hoisted_7), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.time"), + islink: "", + onClick: _cache[9] || (_cache[9] = ($event) => _ctx.visibleHandle("time")) + }, null, 8, _hoisted_8) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "timePicekerRef", + type: "time", + value: _ctx.currentTime, + title: _ctx.translate("title.time"), + open: _ctx.timeVisible, + minhour: 10, + maxhour: 22, + minminute: 5, + maxminute: 45, + bottomhidden: true, + onClose: _cache[10] || (_cache[10] = ($event) => _ctx.visibleHandle("time", false)), + onConfirm: _cache[11] || (_cache[11] = (detail) => _ctx.confirm("time", detail)), + onChange: _cache[12] || (_cache[12] = (...args) => _ctx.change && _ctx.change(...args)) + }, null, 40, _hoisted_9), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.datetime"), + islink: "", + onClick: _cache[13] || (_cache[13] = ($event) => _ctx.visibleHandle("datetime")) + }, null, 8, _hoisted_10) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "datetimeRef", + type: "datetime", + title: _ctx.translate("title.datetime"), + open: _ctx.datetimeVisible, + mindate: _ctx.minDate, + maxdate: _ctx.maxDate, + onClose: _cache[14] || (_cache[14] = ($event) => _ctx.visibleHandle("datetime", false)), + onConfirm: _cache[15] || (_cache[15] = (detail) => _ctx.confirm("datetime", detail)) + }, null, 40, _hoisted_11), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.datehour"), + islink: "", + onClick: _cache[16] || (_cache[16] = ($event) => _ctx.visibleHandle("datehour")) + }, null, 8, _hoisted_12) + ]), + createBaseVNode("quark-datetime-picker", { + type: "datehour", + title: _ctx.translate("title.datehour"), + open: _ctx.datehourVisible, + onClose: _cache[17] || (_cache[17] = ($event) => _ctx.visibleHandle("datehour", false)), + onConfirm: _cache[18] || (_cache[18] = (detail) => _ctx.confirm("datehour", detail)) + }, null, 40, _hoisted_13), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.head"), + islink: "", + onClick: _cache[19] || (_cache[19] = ($event) => _ctx.visibleHandle("custom")) + }, null, 8, _hoisted_14) + ]), + createBaseVNode("quark-datetime-picker", { + title: _ctx.translate("title.head"), + type: "date", + open: _ctx.customToolbarVisible, + mindate: _ctx.minDate, + maxdate: _ctx.maxDate, + showtoolbar: true, + onClose: _cache[20] || (_cache[20] = ($event) => _ctx.visibleHandle("custom", false)), + onConfirm: _cache[21] || (_cache[21] = (detail) => _ctx.confirm("custom", detail)) + }, null, 40, _hoisted_15), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("title.setValue"), + islink: "", + onClick: _cache[22] || (_cache[22] = ($event) => _ctx.visibleHandle("setValue")) + }, null, 8, _hoisted_16) + ]), + createBaseVNode("quark-datetime-picker", { + ref: "setValueRef", + title: _ctx.translate("title.setValue"), + type: "date", + open: _ctx.setValueVisible, + mindate: _ctx.minDate, + maxdate: _ctx.maxDate, + showtoolbar: true, + onClose: _cache[23] || (_cache[23] = ($event) => _ctx.visibleHandle("setValue", false)), + onConfirm: _cache[24] || (_cache[24] = (detail) => _ctx.confirm("setValue", detail)) + }, null, 40, _hoisted_17) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.90f20eb1.js b/demo/assets/demo.90f20eb1.js new file mode 100644 index 000000000..4a40c9969 --- /dev/null +++ b/demo/assets/demo.90f20eb1.js @@ -0,0 +1,97 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("switch"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + checked1: false, + checked2: true, + checked3: true, + loading: true + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5", + disabled: "\u7981\u7528\u72B6\u6001", + size: "\u81EA\u5B9A\u4E49\u5927\u5C0F", + color: "\u81EA\u5B9A\u4E49\u989C\u8272", + loading: "\u52A0\u8F7D\u72B6\u6001" + }, + "en-US": { + basic: "Basic Usage", + disabled: "Disabled", + size: "Custom Size", + color: "Custom Color", + loading: "Loading" + } + }); + }); + const handleChange1 = (e) => { + console.log("current value is:", e.detail.value); + data.value.checked1 = e.detail.value; + }; + const handleChange2 = (e) => { + console.log("current value is:", e.detail.value); + data.value.checked2 = !data.value.checked2; + }; + const handleChange3 = (e) => { + console.log("current value is:", e.detail.value); + data.value.checked3 = e.detail.value; + }; + return { + data, + handleChange1, + handleChange2, + handleChange3, + translate + }; + } +}); +const _hoisted_1 = { + class: "demo switch-demo", + style: { "background-color": "#fff" } +}; +const _hoisted_2 = ["checked"]; +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("quark-switch", { disabled: "" }, null, -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("quark-switch", { + disabled: "", + checked: "" +}, null, -1); +const _hoisted_5 = ["checked"]; +const _hoisted_6 = ["checked"]; +const _hoisted_7 = ["checked"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-switch", { + checked: _ctx.data.checked1, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange1 && _ctx.handleChange1(...args)) + }, null, 40, _hoisted_2), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + _hoisted_3, + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("size")), 1), + createBaseVNode("quark-switch", { + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange2 && _ctx.handleChange2(...args)), + checked: _ctx.data.checked2, + size: "20" + }, null, 40, _hoisted_5), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("color")), 1), + createBaseVNode("quark-switch", { + onChange: _cache[2] || (_cache[2] = (...args) => _ctx.handleChange3 && _ctx.handleChange3(...args)), + checked: _ctx.data.checked3, + color: "red", + inactivecolor: "#08f" + }, null, 40, _hoisted_6), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("loading")), 1), + createBaseVNode("quark-switch", { + onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange3 && _ctx.handleChange3(...args)), + checked: _ctx.data.checked3, + loading: "" + }, null, 40, _hoisted_7) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.923917c0.js b/demo/assets/demo.923917c0.js new file mode 100644 index 000000000..56f3710ba --- /dev/null +++ b/demo/assets/demo.923917c0.js @@ -0,0 +1,269 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, F as Fragment, m as renderList, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_vue_vue_type_style_index_0_lang = ""; +const { createDemo, translate } = createComponent("list"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + list1: [], + list2: [], + list3: [], + list4: [], + loading1: false, + loading2: false, + loading3: false, + loading4: false, + finished1: false, + finished2: false, + finished3: false, + finished4: false, + error1: false, + error2: false, + error3: false, + error4: false + }); + const onLoad1 = () => { + data.value.loading1 = true; + setTimeout(() => { + for (let i = 0; i < 10; i++) { + data.value.list1.push(data.value.list1.length + 1); + } + data.value.loading1 = false; + if (data.value.list1.length >= 40) { + data.value.finished1 = true; + } + }, 1e3); + }; + const onLoad2 = () => { + data.value.error2 = false; + data.value.loading2 = true; + setTimeout(() => { + for (let i = 0; i < 10; i++) { + data.value.list2.push(data.value.list2.length + 1); + } + if (data.value.list2.length === 10) { + data.value.error2 = true; + } else { + data.value.error2 = false; + } + data.value.loading2 = false; + if (data.value.list2.length >= 40) { + data.value.finished2 = true; + } + }, 1e3); + }; + const onLoad3 = () => { + data.value.loading3 = true; + setTimeout(() => { + for (let i = 0; i < 10; i++) { + data.value.list3.push(data.value.list3.length + 1); + } + data.value.loading3 = false; + if (data.value.list3.length >= 40) { + data.value.finished3 = true; + } + }, 1e3); + }; + const onLoad4 = () => { + data.value.loading4 = true; + setTimeout(() => { + for (let i = 0; i < 10; i++) { + data.value.list4.push(data.value.list4.length + 1); + } + data.value.loading4 = false; + if (data.value.list4.length >= 40) { + data.value.finished4 = true; + } + }, 1e3); + }; + const onRefresh = () => { + data.value.loading4 = true; + data.value.list4 = []; + for (let i = 0; i < 10; i++) { + data.value.list4.push(data.value.list4.length + 1); + } + data.value.finished4 = false; + onLoad4(); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + label: { + basic: "\u57FA\u7840\u7528\u6CD5", + error: "\u9519\u8BEF\u63D0\u793A", + custom: "\u81EA\u5B9A\u4E49\u63D0\u793A", + refresh: "\u4E0B\u62C9\u5237\u65B0" + }, + message: { + finished: "\u7ED3\u675F\u63D0\u793A", + error: "\u51FA\u9519\u4E86, \u70B9\u51FB\u91CD\u8BD5", + custom: { + finished: "\u81EA\u5B9A\u4E49\u7684\u7ED3\u675F\u63D0\u793A", + error: "\u81EA\u5B9A\u4E49\u7684\u9519\u8BEF\u63D0\u793A", + loading: "\u81EA\u5B9A\u4E49\u7684\u52A0\u8F7D\u4E2D..." + } + } + }, + "en-US": { + label: { + basic: "Basic", + error: "Error", + custom: "Custom", + refresh: "Refresh" + }, + message: { + finished: "Finished Message", + error: "Something went wrong, please retry", + custom: { + finished: "Custom Finished Message", + error: "Custom Error Message", + loading: "Custom Loading..." + } + } + } + }); + }); + return { + data, + onLoad1, + onLoad2, + onLoad3, + onLoad4, + onRefresh, + translate + }; + } +}); +const _hoisted_1 = { class: "demo list-demo no-padding" }; +const _hoisted_2 = { + sticky: "", + offsettop: "15vw" +}; +const _hoisted_3 = ["label"]; +const _hoisted_4 = ["loading", "finished", "finishedtext"]; +const _hoisted_5 = { slot: "content" }; +const _hoisted_6 = ["label"]; +const _hoisted_7 = ["loading", "error", "errortext", "finished"]; +const _hoisted_8 = { slot: "content" }; +const _hoisted_9 = ["label"]; +const _hoisted_10 = ["loading", "error", "finished"]; +const _hoisted_11 = { slot: "content" }; +const _hoisted_12 = { + class: "list-text", + slot: "finished" +}; +const _hoisted_13 = { + class: "list-text", + slot: "error" +}; +const _hoisted_14 = { + class: "list-text", + slot: "loading" +}; +const _hoisted_15 = { size: "15" }; +const _hoisted_16 = ["label"]; +const _hoisted_17 = ["loading"]; +const _hoisted_18 = { + slot: "content", + class: "pull-content" +}; +const _hoisted_19 = ["loading", "finished", "finishedtext"]; +const _hoisted_20 = { slot: "content" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("quark-tabs", _hoisted_2, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.basic") + }, [ + createBaseVNode("quark-list", { + onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.onLoad1 && _ctx.onLoad1(...args)), + loading: _ctx.data.loading1, + finished: _ctx.data.finished1, + finishedtext: _ctx.translate("message.finished") + }, [ + createBaseVNode("div", _hoisted_5, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.list1, (item) => { + return openBlock(), createElementBlock("div", { + key: item, + class: "list-list" + }, toDisplayString(item), 1); + }), 128)) + ]) + ], 40, _hoisted_4) + ], 8, _hoisted_3), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.error") + }, [ + createBaseVNode("quark-list", { + onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.onLoad2 && _ctx.onLoad2(...args)), + onReload: _cache[2] || (_cache[2] = (...args) => _ctx.onLoad2 && _ctx.onLoad2(...args)), + loading: _ctx.data.loading2, + error: _ctx.data.error2, + errortext: _ctx.translate("message.error"), + finished: _ctx.data.finished2 + }, [ + createBaseVNode("div", _hoisted_8, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.list2, (item) => { + return openBlock(), createElementBlock("div", { + key: item, + class: "list-list" + }, toDisplayString(item), 1); + }), 128)) + ]) + ], 40, _hoisted_7) + ], 8, _hoisted_6), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.custom") + }, [ + createBaseVNode("quark-list", { + onLoad: _cache[3] || (_cache[3] = (...args) => _ctx.onLoad3 && _ctx.onLoad3(...args)), + loading: _ctx.data.loading3, + error: _ctx.data.error3, + finished: _ctx.data.finished3 + }, [ + createBaseVNode("div", _hoisted_11, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.list3, (item) => { + return openBlock(), createElementBlock("div", { + key: item, + class: "list-list" + }, toDisplayString(item), 1); + }), 128)) + ]), + createBaseVNode("div", _hoisted_12, toDisplayString(_ctx.translate("message.custom.finished")), 1), + createBaseVNode("div", _hoisted_13, toDisplayString(_ctx.translate("message.custom.error")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-loading", _hoisted_15, toDisplayString(_ctx.translate("message.custom.loading")), 1) + ]) + ], 40, _hoisted_10) + ], 8, _hoisted_9), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("label.refresh") + }, [ + createBaseVNode("quark-pull-refresh", { + loading: _ctx.data.loading4, + onRefresh: _cache[5] || (_cache[5] = (...args) => _ctx.onRefresh && _ctx.onRefresh(...args)) + }, [ + createBaseVNode("div", _hoisted_18, [ + createBaseVNode("quark-list", { + onLoad: _cache[4] || (_cache[4] = (...args) => _ctx.onLoad4 && _ctx.onLoad4(...args)), + loading: _ctx.data.loading4, + finished: _ctx.data.finished4, + finishedtext: _ctx.translate("message.finished") + }, [ + createBaseVNode("div", _hoisted_20, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.list4, (item) => { + return openBlock(), createElementBlock("div", { + key: item, + class: "list-list" + }, toDisplayString(item), 1); + }), 128)) + ]) + ], 40, _hoisted_19) + ]) + ], 40, _hoisted_17) + ], 8, _hoisted_16) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.94ad6efb.js b/demo/assets/demo.94ad6efb.js new file mode 100644 index 000000000..7ecf8a4fd --- /dev/null +++ b/demo/assets/demo.94ad6efb.js @@ -0,0 +1,195 @@ +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, A as ActionSheet, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("actionsheet"); +const _sfc_main = createDemo({ + props: {}, + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5", + customStyle: "\u81EA\u5B9A\u4E49\u6837\u5F0F", + title: "\u5E26\u6807\u9898", + cancel: "\u5E26\u53D6\u6D88\u6309\u94AE", + titleStyle: "\u6807\u9898\u6837\u5F0F", + optionStyle: "\u9009\u9879\u6837\u5F0F", + cancelStyle: "\u53D6\u6D88\u6309\u94AE\u6837\u5F0F", + options: ["\u9009\u9879\u4E00", "\u9009\u9879\u4E8C", "\u9009\u9879\u4E09"], + titleTxt: "\u6211\u662F\u6807\u9898\u4FE1\u606F", + maskClick: "\u8499\u7248\u70B9\u51FB" + }, + "en-US": { + basic: "Basic Usage", + customStyle: "Custom Style", + title: "Title", + cancel: "Cancel", + titleStyle: "Title Style", + optionStyle: "Option Style", + cancelStyle: "Cancel Style", + options: ["Option 1", "Option 2", "Option 3"], + titleTxt: "Title Message", + maskClick: "Mask Click" + } + }); + }); + const showBase = () => { + ActionSheet({ + actions: [ + { name: `${translate("options")[0]}` }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + select: (index, action) => { + Toast.text(action.name); + } + }); + }; + const showTitle = () => { + ActionSheet({ + title: `${translate("titleTxt")}`, + actions: [ + { name: `${translate("options")[0]}` }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + select: (index, action) => { + Toast.text(action.name); + } + }); + }; + const showCancel = () => { + ActionSheet({ + title: `${translate("titleTxt")}`, + actions: [ + { name: `${translate("options")[0]}` }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + cancelText: `${translate("cancel")}`, + select: (index, action) => { + Toast.text(action.name); + }, + cancel: () => { + Toast.text(`${translate("cancel")}`); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + const showTitleCustom = () => { + ActionSheet({ + title: `${translate("titleTxt")}`, + titleColor: "red", + titleFontSize: 20, + actions: [ + { name: `${translate("options")[0]}` }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + select: (index, action) => { + Toast.text(action.name); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + const showActionCustom = () => { + ActionSheet({ + title: `${translate("titleTxt")}`, + actions: [ + { name: `${translate("options")[0]}`, color: "#999", fontSize: 20 }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + select: (index, action) => { + Toast.text(action.name); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + const showCancelCustom = () => { + ActionSheet({ + title: `${translate("titleTxt")}`, + cancelText: `${translate("cancel")}`, + actions: [ + { name: `${translate("options")[0]}` }, + { name: `${translate("options")[1]}` }, + { name: `${translate("options")[2]}` } + ], + cancelTextColor: "red", + select: (index, action) => { + Toast.text(action.name); + }, + cancel: () => { + Toast.text(`${translate("cancel")}`); + }, + close: () => { + Toast.text(`${translate("maskClick")}`); + } + }); + }; + return { + translate, + showBase, + showTitle, + showCancel, + showTitleCustom, + showActionCustom, + showCancelCustom + }; + } +}); +const _hoisted_1 = { class: "demo no-padding action-sheet-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["title"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.showBase && _ctx.showBase(...args)), + title: _ctx.translate("basic") + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[1] || (_cache[1] = (...args) => _ctx.showTitle && _ctx.showTitle(...args)), + title: _ctx.translate("title") + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.showCancel && _ctx.showCancel(...args)), + title: _ctx.translate("cancel") + }, null, 8, _hoisted_4) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customStyle")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[3] || (_cache[3] = (...args) => _ctx.showTitleCustom && _ctx.showTitleCustom(...args)), + title: _ctx.translate("titleStyle") + }, null, 8, _hoisted_5), + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.showActionCustom && _ctx.showActionCustom(...args)), + title: _ctx.translate("optionStyle") + }, null, 8, _hoisted_6), + createBaseVNode("quark-cell", { + type: "primary", + onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showCancelCustom && _ctx.showCancelCustom(...args)), + title: _ctx.translate("cancelStyle") + }, null, 8, _hoisted_7) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.9c85a7b8.js b/demo/assets/demo.9c85a7b8.js new file mode 100644 index 000000000..23b0ea18f --- /dev/null +++ b/demo/assets/demo.9c85a7b8.js @@ -0,0 +1,225 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("checkbox"); +const _sfc_main = createDemo({ + setup() { + const mycheck = ref(true); + const mycheckFalse = ref(false); + const type1 = ref(true); + const type2 = ref(true); + const size1 = ref(true); + const size2 = ref(true); + const groupValue = ref([]); + const onChange = ({ detail }) => { + mycheck.value = detail.value; + }; + const onChangeFalse = ({ detail }) => { + mycheckFalse.value = detail.value; + }; + const onChangeType1 = ({ detail }) => { + type1.value = detail.value; + }; + const onChangeType2 = ({ detail }) => { + type2.value = detail.value; + }; + const onChangeSize1 = ({ detail }) => { + size1.value = detail.value; + }; + const onChangeSize2 = ({ detail }) => { + size2.value = detail.value; + }; + const onGroupChange = ({ detail }) => { + groupValue.value = detail.value; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u590D\u9009\u6846\u57FA\u7840\u7528\u6CD5", + type: "\u590D\u9009\u6846\u7C7B\u578B", + size: "\u590D\u9009\u6846\u5927\u5C0F", + disabled: "\u590D\u9009\u6846\u7981\u7528\u72B6\u6001", + group: "\u590D\u9009\u6846\u7FA4\u7EC4", + selectedColor: "\u590D\u9009\u6846\u9009\u4E2D\u989C\u8272\u81EA\u5B9A\u4E49" + }, + checked: { + true: "\u52FE\u9009", + false: "\u4E0D\u52FE\u9009" + }, + type: { + round: "\u5706\u5F62(\u9ED8\u8BA4)", + square: "\u65B9\u5F62" + }, + size: { + default: "\u9ED8\u8BA4\u5F62\u72B6-\u5927", + square: "\u65B9\u5F62-\u5927" + }, + disabled: { + checked: "\u5DF2\u9009-\u7981\u7528", + unchecked: "\u672A\u9009-\u7981\u7528" + }, + group: { + apple: "\u82F9\u679C", + orange: "\u6A58\u5B50", + banana: "\u9999\u8549", + selected: "\u5DF2\u9009: " + } + }, + "en-US": { + title: { + basic: "Basic Usage", + type: "Checkbox Type", + size: "Checkbox Size", + disabled: "Disabled Checkbox", + group: "Checkbox Group", + selectedColor: "Custom Selected Color" + }, + checked: { + true: "Checked", + false: "Unchecked" + }, + type: { + round: "Round(Default)", + square: "Square" + }, + size: { + default: "Default Type - Big", + square: "Square - Big" + }, + disabled: { + checked: "Checked - Disabled", + unchecked: "Unchecked - Disabled" + }, + group: { + apple: "Apple", + orange: "Orange", + banana: "Banana", + selected: "Selected: " + } + } + }); + groupValue.value = [ + `${translate("group.apple")}`, + `${translate("group.orange")}` + ]; + }); + return { + mycheck, + mycheckFalse, + type1, + type2, + size1, + size2, + onChangeType2, + onChangeType1, + onChangeSize2, + onChangeSize1, + groupValue, + onChange, + onChangeFalse, + onGroupChange, + translate + }; + } +}); +const _hoisted_1 = { class: "demo demo-checkbox" }; +const _hoisted_2 = { class: "checkbox-container" }; +const _hoisted_3 = ["checked"]; +const _hoisted_4 = ["checked"]; +const _hoisted_5 = { class: "checkbox-container" }; +const _hoisted_6 = ["checked"]; +const _hoisted_7 = ["checked"]; +const _hoisted_8 = { class: "checkbox-container" }; +const _hoisted_9 = ["checked"]; +const _hoisted_10 = ["checked"]; +const _hoisted_11 = { class: "checkbox-container" }; +const _hoisted_12 = { + checked: "true", + disabled: "" +}; +const _hoisted_13 = { + checked: "false", + disabled: "" +}; +const _hoisted_14 = { class: "checkbox-container" }; +const _hoisted_15 = ["value"]; +const _hoisted_16 = ["name"]; +const _hoisted_17 = ["name"]; +const _hoisted_18 = ["name"]; +const _hoisted_19 = { className: "picked" }; +const _hoisted_20 = { class: "checkbox-container my-color" }; +const _hoisted_21 = { checked: true }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-checkbox", { + checked: _ctx.mycheck, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)) + }, toDisplayString(_ctx.translate("checked.true")), 41, _hoisted_3), + createBaseVNode("quark-checkbox", { + checked: _ctx.mycheckFalse, + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChangeFalse && _ctx.onChangeFalse(...args)) + }, toDisplayString(_ctx.translate("checked.false")), 41, _hoisted_4) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.type")), 1), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("quark-checkbox", { + checked: _ctx.type1, + shape: "round", + onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChangeType1 && _ctx.onChangeType1(...args)) + }, toDisplayString(_ctx.translate("type.round")), 41, _hoisted_6), + createBaseVNode("quark-checkbox", { + checked: _ctx.type2, + shape: "square", + onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChangeType2 && _ctx.onChangeType2(...args)) + }, toDisplayString(_ctx.translate("type.square")), 41, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.size")), 1), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-checkbox", { + checked: _ctx.size1, + shape: "round", + size: "big", + onChange: _cache[4] || (_cache[4] = (...args) => _ctx.onChangeSize1 && _ctx.onChangeSize1(...args)) + }, toDisplayString(_ctx.translate("size.default")), 41, _hoisted_9), + createBaseVNode("quark-checkbox", { + checked: _ctx.size2, + shape: "square", + size: "big", + onChange: _cache[5] || (_cache[5] = (...args) => _ctx.onChangeSize2 && _ctx.onChangeSize2(...args)) + }, toDisplayString(_ctx.translate("size.square")), 41, _hoisted_10) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.disabled")), 1), + createBaseVNode("div", _hoisted_11, [ + createBaseVNode("quark-checkbox", _hoisted_12, toDisplayString(_ctx.translate("disabled.checked")), 1), + createBaseVNode("quark-checkbox", _hoisted_13, toDisplayString(_ctx.translate("disabled.unchecked")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.group")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-checkbox-group", { + value: _ctx.groupValue.join(), + onChange: _cache[6] || (_cache[6] = (...args) => _ctx.onGroupChange && _ctx.onGroupChange(...args)) + }, [ + createBaseVNode("quark-checkbox", { + name: _ctx.translate("group.apple") + }, toDisplayString(_ctx.translate("group.apple")), 9, _hoisted_16), + createBaseVNode("quark-checkbox", { + name: _ctx.translate("group.orange"), + disabled: "" + }, toDisplayString(_ctx.translate("group.orange")), 9, _hoisted_17), + createBaseVNode("quark-checkbox", { + name: _ctx.translate("group.banana") + }, toDisplayString(_ctx.translate("group.banana")), 9, _hoisted_18) + ], 40, _hoisted_15), + createBaseVNode("div", _hoisted_19, toDisplayString(_ctx.translate("group.selected")) + toDisplayString(_ctx.groupValue), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.selectedColor")), 1), + createBaseVNode("div", _hoisted_20, [ + createBaseVNode("quark-checkbox", _hoisted_21, toDisplayString(_ctx.translate("title.selectedColor")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.a037f8c7.js b/demo/assets/demo.a037f8c7.js new file mode 100644 index 000000000..655491c7a --- /dev/null +++ b/demo/assets/demo.a037f8c7.js @@ -0,0 +1,125 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, e as createStaticVNode, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("badge"); +const _sfc_main = createDemo({ + setup() { + const num = ref(11); + const change = () => { + num.value = num.value + 1; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + independent: "\u5FBD\u6807\u72EC\u7ACB\u4F7F\u7528", + word: "\u6587\u5B57\u5FBD\u6807", + word2: "\u6700\u9AD8\u7ACB\u51CF5\u5143", + type: "\u5FBD\u6807\u7C7B\u578B", + size: "\u5FBD\u6807\u5927\u5C0F", + style: "\u5FBD\u6807\u98CE\u683C", + digital: "\u6570\u5B57\u5FBD\u6807", + custom: "\u81EA\u5B9A\u4E49\u6837\u5F0F-\u80CC\u666F\u8272", + normal: "\u666E\u901A\u5FBD\u6807", + border: "\u8FB9\u6846\u5FBD\u6807" + }, + "en-US": { + independent: "Badge Independent Use", + word: "Word Badge", + word2: "Up to $5 off", + type: "Badge Type", + size: "Badge Size", + style: "Badge Style", + digital: "Digital Badge", + custom: "Custom-Background", + normal: "Normal Badge", + border: "Border Badge" + } + }); + }); + return { + num, + change, + translate + }; + } +}); +const _hoisted_1 = { class: "demo demo-badge" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "badge-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-badge", { type: "dot" }) +], -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", { class: "badge-container" }, [ + /* @__PURE__ */ createBaseVNode("quark-badge", { + type: "round", + content: "9" + }) +], -1); +const _hoisted_4 = { class: "badge-container" }; +const _hoisted_5 = ["content"]; +const _hoisted_6 = { class: "badge-container" }; +const _hoisted_7 = ["content"]; +const _hoisted_8 = /* @__PURE__ */ createStaticVNode('
', 2); +const _hoisted_10 = /* @__PURE__ */ createStaticVNode('
', 4); +const _hoisted_14 = { class: "badge-container" }; +const _hoisted_15 = ["content"]; +const _hoisted_16 = { class: "badge-container dark" }; +const _hoisted_17 = ["content"]; +const _hoisted_18 = /* @__PURE__ */ createStaticVNode('
', 2); +const _hoisted_20 = { class: "badge-container" }; +const _hoisted_21 = ["content"]; +const _hoisted_22 = /* @__PURE__ */ createBaseVNode("div", { class: "child" }, null, -1); +const _hoisted_23 = [ + _hoisted_22 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("independent")), 1), + _hoisted_2, + _hoisted_3, + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-badge", { + type: "label", + content: _ctx.translate("word") + }, null, 8, _hoisted_5) + ]), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-badge", { + type: "label", + size: "big", + content: _ctx.translate("word2") + }, null, 8, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("type")), 1), + _hoisted_8, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("size")), 1), + _hoisted_10, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("style")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-badge", { + type: "label", + content: _ctx.translate("normal"), + size: "big" + }, null, 8, _hoisted_15) + ]), + createBaseVNode("div", _hoisted_16, [ + createBaseVNode("quark-badge", { + border: "", + type: "label", + content: _ctx.translate("border"), + size: "big" + }, null, 8, _hoisted_17) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("digital")), 1), + _hoisted_18, + createBaseVNode("h2", { + onClick: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args)) + }, toDisplayString(_ctx.translate("custom")), 1), + createBaseVNode("div", _hoisted_20, [ + createBaseVNode("quark-badge", { + class: "bg-color", + content: _ctx.num + }, _hoisted_23, 8, _hoisted_21) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.a142728d.js b/demo/assets/demo.a142728d.js new file mode 100644 index 000000000..67ae45ae4 --- /dev/null +++ b/demo/assets/demo.a142728d.js @@ -0,0 +1,164 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, r as ref, g as onMounted, T as Toast, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("cell"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + CellTitle: { + basicUsage: "\u57FA\u672C\u7528\u6CD5", + custom: "\u81EA\u5B9A\u4E49\u5185\u5BB9", + async: "\u5F02\u6B65\u5173\u95ED" + }, + title: "\u8FD9\u662F\u6807\u9898", + desc: "\u63CF\u8FF0\u6587\u5B57", + buttons: { + del: "\u5220\u9664", + collect: "\u6536\u85CF", + select: "\u9009\u62E9", + add: "\u6DFB\u52A0" + }, + noData: "\u6682\u65E0\u6570\u636E", + addData: "\u5FEB\u53BB\u6DFB\u52A0\u6570\u636E\u5427~", + loading: "\u8BF7\u6C42\u4E2D", + deleteSucc: "\u5220\u9664\u6210\u529F" + }, + "en-US": { + CellTitle: { + basicUsage: "Basic Usage", + custom: "Custom Content", + async: "Async Close" + }, + title: "Cell Title", + desc: "Description", + buttons: { + del: "Delete", + collect: "Collect", + select: "Select", + add: "Add" + }, + noData: "No Data", + addData: "Go to add data.", + loading: "loading...", + deleteSucc: "successfully deleted" + } + }); + }); + const onOpen = ({ detail }) => { + console.log(detail.name, detail.position); + }; + const onClose = ({ detail }) => { + console.log(detail.name, detail.position); + }; + const asyncSwipeCell = ref(); + onMounted(() => { + asyncSwipeCell.value.setBeforeClose((position) => { + if (position === "right") { + return new Promise((resolve) => { + const toast = Toast.loading(translate("loading")); + setTimeout(() => { + toast.hide(); + Toast.success(translate("deleteSucc")); + resolve(true); + }, 1e3); + }); + } else { + return true; + } + }); + }); + return { + translate, + onOpen, + onClose, + asyncSwipeCell + }; + } +}); +const _hoisted_1 = { class: "demo no-padding swipe-cell-demo" }; +const _hoisted_2 = ["title", "desc"]; +const _hoisted_3 = { + class: "left", + slot: "left" +}; +const _hoisted_4 = { + type: "primary", + shape: "square" +}; +const _hoisted_5 = { + class: "right", + slot: "right" +}; +const _hoisted_6 = { + type: "danger", + shape: "square" +}; +const _hoisted_7 = { + type: "primary", + shape: "square" +}; +const _hoisted_8 = ["title", "desc"]; +const _hoisted_9 = { + class: "right", + slot: "right" +}; +const _hoisted_10 = { + type: "primary", + shape: "square" +}; +const _hoisted_11 = { ref: "asyncSwipeCell" }; +const _hoisted_12 = ["title", "desc"]; +const _hoisted_13 = { + class: "right", + slot: "right" +}; +const _hoisted_14 = { + type: "primary", + shape: "square" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.basicUsage")), 1), + createBaseVNode("quark-swipe-cell", { + onOpen: _cache[0] || (_cache[0] = (...args) => _ctx.onOpen && _ctx.onOpen(...args)), + onClose: _cache[1] || (_cache[1] = (...args) => _ctx.onClose && _ctx.onClose(...args)) + }, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + desc: _ctx.translate("desc") + }, null, 8, _hoisted_2), + createBaseVNode("div", _hoisted_3, [ + createBaseVNode("quark-button", _hoisted_4, toDisplayString(_ctx.translate("buttons.select")), 1) + ]), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("quark-button", _hoisted_6, toDisplayString(_ctx.translate("buttons.del")), 1), + createBaseVNode("quark-button", _hoisted_7, toDisplayString(_ctx.translate("buttons.collect")), 1) + ]) + ], 32), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.custom")), 1), + createBaseVNode("quark-swipe-cell", null, [ + createBaseVNode("quark-empty", { + title: _ctx.translate("noData"), + desc: _ctx.translate("addData"), + type: "local" + }, null, 8, _hoisted_8), + createBaseVNode("div", _hoisted_9, [ + createBaseVNode("quark-button", _hoisted_10, toDisplayString(_ctx.translate("buttons.add")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.async")), 1), + createBaseVNode("quark-swipe-cell", _hoisted_11, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + desc: _ctx.translate("desc") + }, null, 8, _hoisted_12), + createBaseVNode("div", _hoisted_13, [ + createBaseVNode("quark-button", _hoisted_14, toDisplayString(_ctx.translate("buttons.del")), 1) + ]) + ], 512) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.a31119e7.js b/demo/assets/demo.a31119e7.js new file mode 100644 index 000000000..edb8e907e --- /dev/null +++ b/demo/assets/demo.a31119e7.js @@ -0,0 +1,100 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, h as createTextVNode, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("collapse"); +const _sfc_main = createDemo({ + props: {}, + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5", + openState: "\u6253\u5F00\u72B6\u6001", + iconhide: "\u65E0icon\u6837\u5F0F", + customTitile: "\u81EA\u5B9A\u4E49\u6807\u9898", + customIcon: "\u81EA\u5B9A\u4E49\u56FE\u6807", + title: "\u6807\u9898", + title1: "\u6807\u98981", + title2: "\u6807\u98982", + content: "\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002" + }, + "en-US": { + basic: "Basic Usage", + openState: "Open State", + iconhide: "Custom Style", + customTitile: "Custom titile", + customIcon: "Custom Icon", + title: "Title", + title1: "Title1", + title2: "Title2", + content: " Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this." + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding action-sheet-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = { slot: "title" }; +const _hoisted_8 = { style: { "color": "blueviolet" } }; +const _hoisted_9 = ["title"]; +const _hoisted_10 = /* @__PURE__ */ createBaseVNode("span", { + slot: "icon", + class: "collapse-icon" +}, "\u{1F389}\u{1F389}\u{1F389}", -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", null, [ + createBaseVNode("quark-collapse", { + title: _ctx.translate("title1") + }, toDisplayString(_ctx.translate("content")), 9, _hoisted_2), + createBaseVNode("quark-collapse", { + title: _ctx.translate("title2") + }, toDisplayString(_ctx.translate("content")), 9, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("openState")), 1), + createBaseVNode("div", null, [ + createBaseVNode("quark-collapse", { + title: _ctx.translate("title"), + open: "" + }, toDisplayString(_ctx.translate("content")), 9, _hoisted_4) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("iconhide")), 1), + createBaseVNode("div", null, [ + createBaseVNode("quark-collapse", { + title: _ctx.translate("title"), + iconhide: "" + }, toDisplayString(_ctx.translate("content")), 9, _hoisted_5) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customTitile")), 1), + createBaseVNode("div", null, [ + createBaseVNode("quark-collapse", { + title: _ctx.translate("title") + }, [ + createBaseVNode("div", _hoisted_7, [ + createBaseVNode("span", _hoisted_8, toDisplayString(_ctx.translate("title")) + toDisplayString(_ctx.translate("title")), 1) + ]), + createTextVNode(" " + toDisplayString(_ctx.translate("content")), 1) + ], 8, _hoisted_6) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customIcon")), 1), + createBaseVNode("div", null, [ + createBaseVNode("quark-collapse", { + title: _ctx.translate("title") + }, [ + _hoisted_10, + createTextVNode(" " + toDisplayString(_ctx.translate("content")), 1) + ], 8, _hoisted_9) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.aa280016.js b/demo/assets/demo.aa280016.js new file mode 100644 index 000000000..e15b893c6 --- /dev/null +++ b/demo/assets/demo.aa280016.js @@ -0,0 +1,134 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("cell"); +const _sfc_main = createDemo({ + setup() { + const fruit = ref("apple"); + const onChange = ({ detail }) => { + fruit.value = detail.value; + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + CellTitle: { + basicUsage: "\u57FA\u672C\u7528\u6CD5", + router: "\u94FE\u63A5\u8DF3\u8F6C", + icon: "\u5C55\u793A\u56FE\u6807", + group: "\u5206\u7EC4\u7528\u6CD5", + custom: "\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u7701\u7565\u53F7\u5C55\u793A", + right: "\u81EA\u5B9A\u4E49\u53F3\u4FA7\u63CF\u8FF0" + }, + title: "\u8FD9\u662F\u6807\u9898", + desc: "\u63CF\u8FF0\u6587\u5B57", + longTitle: "\u8FD9\u662F\u6807\u9898\u975E\u5E38\u7684\u957F\uFF0C\u592A\u957F\u4F1A\u81EA\u52A8\u6362\u884C\u7684\u54E6", + longLongTitle: "\u8FD9\u662F\u6807\u9898\u5F88\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F\u957F", + router: "\u8DEF\u7531\u8DF3\u8F6C", + url: "\u94FE\u63A5\u8DF3\u8F6C" + }, + "en-US": { + CellTitle: { + basicUsage: "Basic Usage", + router: "Router", + icon: "Icon", + group: "Inset Grouped", + custom: "Custom Style", + right: "Right content" + }, + title: "Cell Title", + desc: "Description", + longTitle: "This is a very long title, it will automatically wrap.", + longLongTitle: "The title is very very very very very very very long", + router: "Router", + url: "Url" + } + }); + }); + return { + fruit, + translate, + onChange + }; + } +}); +const _hoisted_1 = { class: "demo no-padding demo-cell" }; +const _hoisted_2 = ["title", "desc"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title", "desc"]; +const _hoisted_5 = ["title", "desc"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["title"]; +const _hoisted_8 = ["title", "desc"]; +const _hoisted_9 = ["title"]; +const _hoisted_10 = ["title"]; +const _hoisted_11 = ["title"]; +const _hoisted_12 = ["title"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.basicUsage")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + desc: _ctx.translate("desc") + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + islink: "" + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + desc: _ctx.translate("desc"), + islink: "" + }, null, 8, _hoisted_4), + createBaseVNode("quark-cell", { + title: _ctx.translate("longTitle"), + desc: _ctx.translate("desc"), + islink: "" + }, null, 8, _hoisted_5) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.router")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("router"), + to: "#/button", + islink: "" + }, null, 8, _hoisted_6), + createBaseVNode("quark-cell", { + title: _ctx.translate("url"), + to: "https://baidu.com", + islink: "" + }, null, 8, _hoisted_7) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.icon")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title"), + desc: _ctx.translate("desc"), + islink: "", + icon: "https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png?x-oss-process=image/quality,q_80" + }, null, 8, _hoisted_8) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.group")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title") + }, null, 8, _hoisted_9), + createBaseVNode("quark-cell", { + title: _ctx.translate("title") + }, null, 8, _hoisted_10) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.custom")), 1), + createBaseVNode("quark-cell", { + class: "my-cell", + title: _ctx.translate("longLongTitle") + }, null, 8, _hoisted_11), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("CellTitle.right")), 1), + createBaseVNode("quark-cell", { + title: _ctx.translate("title") + }, [ + createBaseVNode("div", null, toDisplayString(_ctx.translate("CellTitle.right")), 1) + ], 8, _hoisted_12) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.b7be1be2.js b/demo/assets/demo.b7be1be2.js new file mode 100644 index 000000000..ff6caf165 --- /dev/null +++ b/demo/assets/demo.b7be1be2.js @@ -0,0 +1,198 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("sticky"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + size: "\u6807\u7B7E\u5927\u5C0F", + plain: "\u7A7A\u5FC3\u6837\u5F0F", + light: "\u6D45\u8272\u6837\u5F0F", + color: "\u81EA\u5B9A\u4E49\u989C\u8272", + round: "\u5706\u89D2\u6807\u7B7E", + roundTag: "\u6211\u662F\u5706\u89D2", + tag: "\u6B63" + }, + "en-US": { + basic: "Basic Usage", + size: "Tag Size", + plain: "Plain Tag", + light: "Light Tag", + color: "Custom Color", + round: "Round Tag", + roundTag: "Round Tag", + tag: "Q" + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { class: "demo tag-demo" }; +const _hoisted_2 = { class: "tag-container" }; +const _hoisted_3 = { + type: "danger", + size: "large" +}; +const _hoisted_4 = { class: "tag-container" }; +const _hoisted_5 = { + type: "warning", + size: "large" +}; +const _hoisted_6 = { class: "tag-container" }; +const _hoisted_7 = { + type: "success", + size: "large" +}; +const _hoisted_8 = { class: "tag-container" }; +const _hoisted_9 = { + type: "primary", + size: "large" +}; +const _hoisted_10 = { class: "tag-container" }; +const _hoisted_11 = { class: "tag-container" }; +const _hoisted_12 = { size: "large" }; +const _hoisted_13 = { class: "tag-container" }; +const _hoisted_14 = { + plain: "", + size: "large", + type: "danger" +}; +const _hoisted_15 = { class: "tag-container" }; +const _hoisted_16 = { + plain: "", + size: "large", + type: "warning" +}; +const _hoisted_17 = { class: "tag-container" }; +const _hoisted_18 = { + plain: "", + size: "large", + type: "success" +}; +const _hoisted_19 = { class: "tag-container" }; +const _hoisted_20 = { + plain: "", + size: "large", + type: "primary" +}; +const _hoisted_21 = { class: "tag-container" }; +const _hoisted_22 = { + light: "", + size: "large", + type: "danger" +}; +const _hoisted_23 = { class: "tag-container" }; +const _hoisted_24 = { + light: "", + size: "large", + type: "warning" +}; +const _hoisted_25 = { class: "tag-container" }; +const _hoisted_26 = { + light: "", + size: "large", + type: "success" +}; +const _hoisted_27 = { class: "tag-container" }; +const _hoisted_28 = { + light: "", + size: "large", + type: "primary" +}; +const _hoisted_29 = { class: "tag-container" }; +const _hoisted_30 = { + size: "large", + color: "#ffe1e1", + textcolor: "#ad0000" +}; +const _hoisted_31 = { class: "tag-container" }; +const _hoisted_32 = { + size: "large", + color: "linear-gradient(135deg, #667eea, #764ba2)" +}; +const _hoisted_33 = { class: "tag-container" }; +const _hoisted_34 = { + class: "custom-border-color", + plain: "", + size: "large", + color: "#ffe1e1", + textcolor: "#ad0000" +}; +const _hoisted_35 = { class: "tag-container" }; +const _hoisted_36 = { + size: "large", + type: "primary", + round: "" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-tag", _hoisted_3, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-tag", _hoisted_5, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_6, [ + createBaseVNode("quark-tag", _hoisted_7, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_8, [ + createBaseVNode("quark-tag", _hoisted_9, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("size")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-tag", null, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_11, [ + createBaseVNode("quark-tag", _hoisted_12, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("plain")), 1), + createBaseVNode("div", _hoisted_13, [ + createBaseVNode("quark-tag", _hoisted_14, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_15, [ + createBaseVNode("quark-tag", _hoisted_16, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_17, [ + createBaseVNode("quark-tag", _hoisted_18, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_19, [ + createBaseVNode("quark-tag", _hoisted_20, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("light")), 1), + createBaseVNode("div", _hoisted_21, [ + createBaseVNode("quark-tag", _hoisted_22, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_23, [ + createBaseVNode("quark-tag", _hoisted_24, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_25, [ + createBaseVNode("quark-tag", _hoisted_26, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_27, [ + createBaseVNode("quark-tag", _hoisted_28, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("color")), 1), + createBaseVNode("div", _hoisted_29, [ + createBaseVNode("quark-tag", _hoisted_30, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_31, [ + createBaseVNode("quark-tag", _hoisted_32, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("div", _hoisted_33, [ + createBaseVNode("quark-tag", _hoisted_34, toDisplayString(_ctx.translate("tag")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("round")), 1), + createBaseVNode("div", _hoisted_35, [ + createBaseVNode("quark-tag", _hoisted_36, toDisplayString(_ctx.translate("roundTag")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.c1069692.js b/demo/assets/demo.c1069692.js new file mode 100644 index 000000000..225438f1c --- /dev/null +++ b/demo/assets/demo.c1069692.js @@ -0,0 +1,84 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("empty"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + desc: "\u63CF\u8FF0\u6587\u5B57", + button: "\u5E95\u90E8\u6309\u94AE", + local: "\u5C40\u90E8\u7A7A\u767D\u9875", + image: "\u81EA\u5B9A\u4E49\u56FE\u7247", + bottom: "\u81EA\u5B9A\u4E49\u5E95\u90E8", + title: "\u6CA1\u6709\u5386\u53F2\u8BA2\u5355", + order: "\u5FEB\u53BB\u4E0B\u4E00\u5355\u5427!", + return: "\u81EA\u5B9A\u4E49\u5E95\u90E8", + buttontext: "\u53BB\u4E0B\u5355" + }, + "en-US": { + basic: "Basic Usage", + desc: "Description", + button: "Button", + local: "Local empty", + image: "Custom Image", + bottom: "Csutom Bottom", + title: "No Order History", + order: "Go and Order!", + return: "Csutom Bottom", + buttontext: "Go to Order" + } + }); + }); + return { + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("quark-empty", null, null, -1); +const _hoisted_3 = ["title", "desc"]; +const _hoisted_4 = ["title", "desc", "buttontext"]; +const _hoisted_5 = ["title", "desc", "buttontext"]; +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("quark-empty", { image: "https://m.hellobike.com/resource/helloyun/13459/UxNf7LpJ2G.png" }, null, -1); +const _hoisted_7 = { + class: "outer", + slot: "footer" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("desc")), 1), + createBaseVNode("quark-empty", { + image: "https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png", + title: _ctx.translate("title"), + desc: _ctx.translate("order") + }, null, 8, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("button")), 1), + createBaseVNode("quark-empty", { + image: "https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png", + title: _ctx.translate("title"), + desc: _ctx.translate("order"), + buttontext: _ctx.translate("buttontext") + }, null, 8, _hoisted_4), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("local")), 1), + createBaseVNode("quark-empty", { + image: "https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png", + title: _ctx.translate("title"), + desc: _ctx.translate("order"), + buttontext: _ctx.translate("buttontext"), + type: "local" + }, null, 8, _hoisted_5), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("image")), 1), + _hoisted_6, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("bottom")), 1), + createBaseVNode("quark-empty", null, [ + createBaseVNode("div", _hoisted_7, toDisplayString(_ctx.translate("return")) + " \u{1F389}\u{1F389}\u{1F389}", 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.c153ee3a.js b/demo/assets/demo.c153ee3a.js new file mode 100644 index 000000000..4b56932bf --- /dev/null +++ b/demo/assets/demo.c153ee3a.js @@ -0,0 +1,85 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, w as withDirectives, v as vModelText, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("textarea"); +const _sfc_main = createDemo({ + setup() { + const textAreaInput = ref(""); + const handleEvent = (event, type) => { + Toast.text(`${event.target.value}${type}`); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + count: "\u5B57\u6570\u7EDF\u8BA1", + limit: "\u5B57\u6570\u9650\u5236", + rows: "\u6307\u5B9A\u884C\u6570", + height: "\u6839\u636E\u5185\u5BB9\u81EA\u52A8\u8C03\u6574\u9AD8\u5EA6", + disabled: "\u7981\u7528\u72B6\u6001", + event: "\u89E6\u53D1\u4E8B\u4EF6", + custom: "\u81EA\u5B9A\u4E49\u6837\u5F0F" + }, + "en-US": { + basic: "Basic Usage", + count: "Show Count", + limit: "Count Limit", + rows: "Rows Setting", + height: "Autosize", + disabled: "Disabled", + event: "Event Trigger", + custom: "Custom Style" + } + }); + }); + return { + textAreaInput, + handleEvent, + translate + }; + } +}); +const _hoisted_1 = { class: "demo textarea-demo no-padding" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("quark-textarea", { showcount: "" }, null, -1); +const _hoisted_3 = /* @__PURE__ */ createBaseVNode("quark-textarea", { + showcount: "", + maxlength: "50" +}, null, -1); +const _hoisted_4 = /* @__PURE__ */ createBaseVNode("quark-textarea", { rows: "6" }, null, -1); +const _hoisted_5 = /* @__PURE__ */ createBaseVNode("quark-textarea", { autosize: "" }, null, -1); +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("quark-textarea", { disabled: "" }, null, -1); +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("quark-textarea", { + showcount: "", + class: "custom-style" +}, null, -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + withDirectives(createBaseVNode("quark-textarea", { + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.textAreaInput = $event) + }, null, 512), [ + [vModelText, _ctx.textAreaInput] + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("count")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("limit")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("rows")), 1), + _hoisted_4, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("height")), 1), + _hoisted_5, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + _hoisted_6, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("event")), 1), + createBaseVNode("quark-textarea", { + onInput: _cache[1] || (_cache[1] = ($event) => _ctx.handleEvent($event, "input")), + onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.handleEvent($event, "blur")), + onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.handleEvent($event, "focus")), + onCompositionstart: _cache[4] || (_cache[4] = ($event) => _ctx.handleEvent($event, "compositionstart")) + }, null, 32), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("custom")), 1), + _hoisted_7 + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.ce2b80bf.js b/demo/assets/demo.ce2b80bf.js new file mode 100644 index 000000000..614eb864a --- /dev/null +++ b/demo/assets/demo.ce2b80bf.js @@ -0,0 +1,159 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, h as createTextVNode, T as Toast, b as openBlock, p as pushScopeId, q as popScopeId } from "./mobile.5b772776.js"; +var demo_vue_vue_type_style_index_0_scoped_true_lang = ""; +const { createDemo, translate } = createComponent("pullrefresh"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + loading1: false, + loading2: false, + loading3: false, + count1: 0, + count2: 0, + count3: 0 + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + darkBackground: "\u6DF1\u8272\u80CC\u666F", + lightBackground: "\u6D45\u8272\u80CC\u666F", + customContent: "\u81EA\u5B9A\u4E49\u5185\u5BB9", + tip: "\u4E0B\u62C9\u63D0\u793A", + constantRefresh: "\u677E\u5F00\u7ACB\u5373\u5237\u65B0", + refreshing: "\u6B63\u5728\u5237\u65B0\u6570\u636E...", + refreshCount: "\u5237\u65B0\u6B21\u6570", + refreshSuccess: "\u5237\u65B0\u6210\u529F" + }, + "en-US": { + darkBackground: "Dark Background", + lightBackground: "Light Background", + customContent: "Custom Content", + tip: "Drop Down Prompt", + constantRefresh: "Release To Refresh Now", + refreshing: "Refreshing...", + refreshCount: "Number Of Refreshes ", + refreshSuccess: "Refresh Success" + } + }); + }); + const onFresh1 = () => { + data.value.loading1 = true; + setTimeout(() => { + Toast.success(`${translate("refreshSuccess")}`); + data.value.loading1 = false; + data.value.count1++; + }, 1e3); + }; + const onFresh2 = () => { + data.value.loading2 = true; + setTimeout(() => { + Toast.success(`${translate("refreshSuccess")}`); + data.value.loading2 = false; + data.value.count2++; + }, 1e3); + }; + const onFresh3 = () => { + data.value.loading3 = true; + setTimeout(() => { + Toast.success(`${translate("refreshSuccess")}`); + data.value.loading3 = false; + data.value.count3++; + }, 1e3); + }; + return { + data, + onFresh1, + onFresh2, + onFresh3, + translate + }; + } +}); +const _withScopeId = (n) => (pushScopeId("data-v-453c7618"), n = n(), popScopeId(), n); +const _hoisted_1 = { class: "demo no-padding" }; +const _hoisted_2 = ["label"]; +const _hoisted_3 = ["loading"]; +const _hoisted_4 = { + slot: "content", + class: "pull-content" +}; +const _hoisted_5 = ["label"]; +const _hoisted_6 = ["loading"]; +const _hoisted_7 = { + slot: "content", + class: "pull-content" +}; +const _hoisted_8 = ["label"]; +const _hoisted_9 = ["loading"]; +const _hoisted_10 = { + slot: "content", + class: "pull-content" +}; +const _hoisted_11 = { + class: "refresh-text", + slot: "pulling" +}; +const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("img", { src: "https://m.hellobike.com/resource/helloyun/18625/3OOq2_down.svg" }, null, -1)); +const _hoisted_13 = { + class: "refresh-text", + slot: "loosing" +}; +const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("img", { src: "https://m.hellobike.com/resource/helloyun/18625/ImS4S_up.svg" }, null, -1)); +const _hoisted_15 = { + class: "refresh-text", + slot: "loading" +}; +const _hoisted_16 = { + size: "20", + type: "circular" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("quark-tabs", null, [ + createBaseVNode("quark-tab-content", { + label: _ctx.translate("darkBackground") + }, [ + createBaseVNode("quark-pull-refresh", { + dark: "", + loading: _ctx.data.loading2, + onRefresh: _cache[0] || (_cache[0] = (...args) => _ctx.onFresh2 && _ctx.onFresh2(...args)) + }, [ + createBaseVNode("div", _hoisted_4, toDisplayString(_ctx.translate("refreshCount")) + ": " + toDisplayString(_ctx.data.count2), 1) + ], 40, _hoisted_3) + ], 8, _hoisted_2), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("lightBackground") + }, [ + createBaseVNode("quark-pull-refresh", { + loading: _ctx.data.loading1, + onRefresh: _cache[1] || (_cache[1] = (...args) => _ctx.onFresh1 && _ctx.onFresh1(...args)) + }, [ + createBaseVNode("div", _hoisted_7, toDisplayString(_ctx.translate("refreshCount")) + ": " + toDisplayString(_ctx.data.count1), 1) + ], 40, _hoisted_6) + ], 8, _hoisted_5), + createBaseVNode("quark-tab-content", { + label: _ctx.translate("customContent") + }, [ + createBaseVNode("quark-pull-refresh", { + loading: _ctx.data.loading3, + onRefresh: _cache[2] || (_cache[2] = (...args) => _ctx.onFresh3 && _ctx.onFresh3(...args)) + }, [ + createBaseVNode("div", _hoisted_10, toDisplayString(_ctx.translate("refreshCount")) + ": " + toDisplayString(_ctx.data.count3), 1), + createBaseVNode("div", _hoisted_11, [ + _hoisted_12, + createTextVNode(toDisplayString(_ctx.translate("tip")), 1) + ]), + createBaseVNode("div", _hoisted_13, [ + _hoisted_14, + createTextVNode(toDisplayString(_ctx.translate("constantRefresh")), 1) + ]), + createBaseVNode("div", _hoisted_15, [ + createBaseVNode("quark-loading", _hoisted_16, toDisplayString(_ctx.translate("refreshing")), 1) + ]) + ], 40, _hoisted_9) + ], 8, _hoisted_8) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-453c7618"]]); +export { demo as default }; diff --git a/demo/assets/demo.d8557302.js b/demo/assets/demo.d8557302.js new file mode 100644 index 000000000..8eb4b8f84 --- /dev/null +++ b/demo/assets/demo.d8557302.js @@ -0,0 +1,97 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock, p as pushScopeId, q as popScopeId } from "./mobile.5b772776.js"; +var demo_vue_vue_type_style_index_0_scoped_true_lang = ""; +const { createDemo, translate } = createComponent("progress"); +const _sfc_main = createDemo({ + setup() { + const value = ref(10); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + showText: "\u663E\u793A\u5B57\u4F53\u8FDB\u5EA6", + customColor: "\u81EA\u5B9A\u4E49\u989C\u8272/\u80CC\u666F\u8272", + customStyle: "\u81EA\u5B9A\u4E49\u5BBD\u5EA6/\u9AD8\u5EA6/\u5706\u89D2/\u663E\u793A\u767E\u5206\u6BD4" + }, + "en-US": { + basic: "Basic Usage", + showText: "Show Progress", + customColor: "Custom Color/Background Color", + customStyle: "Custom Width/Height/Round/Percentage" + } + }); + }); + onMounted(() => { + let t = setInterval(() => { + if (value.value >= 100) + clearInterval(t); + else + value.value += 10; + }, 1e3); + }); + return { + value, + translate + }; + } +}); +const _withScopeId = (n) => (pushScopeId("data-v-3ebefdf6"), n = n(), popScopeId(), n); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container progress-wrap" }, [ + /* @__PURE__ */ createBaseVNode("div", { class: "wrap" }, [ + /* @__PURE__ */ createBaseVNode("quark-progress", { value: "0" }) + ]) +], -1)); +const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container progress-wrap space" }, [ + /* @__PURE__ */ createBaseVNode("quark-progress", { + value: "100", + showtext: "" + }) +], -1)); +const _hoisted_4 = { class: "tag-container progress-wrap" }; +const _hoisted_5 = ["value"]; +const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-progress", { + value: "20", + color: "green", + showtext: "" +}, null, -1)); +const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-progress", { + value: "30", + color: "green", + class: "green", + showtext: "" +}, null, -1)); +const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "tag-container progress-wrap" }, [ + /* @__PURE__ */ createBaseVNode("quark-progress", { + value: "90", + class: "auto", + color: "linear-gradient(\n 268deg,#fa2c19 0%,#fa3f19 44.59259259%,#fa5919 83.40740741%,#fa6419 100%)" + }, [ + /* @__PURE__ */ createBaseVNode("span", { + slot: "percent", + class: "percent" + }, "0.9") + ]) +], -1)); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + _hoisted_2, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("showText")), 1), + _hoisted_3, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customColor")), 1), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-progress", { + value: _ctx.value, + color: "yellowgreen", + showtext: "" + }, null, 8, _hoisted_5), + _hoisted_6, + _hoisted_7 + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customStyle")), 1), + _hoisted_8 + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3ebefdf6"]]); +export { demo as default }; diff --git a/demo/assets/demo.da68556a.js b/demo/assets/demo.da68556a.js new file mode 100644 index 000000000..87c923fc3 --- /dev/null +++ b/demo/assets/demo.da68556a.js @@ -0,0 +1,142 @@ +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +import "./index.63eaed99.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("navbar"); +const _sfc_main = createDemo({ + setup() { + const onLeftClick = () => { + Toast.text(`${translate("clicked")}`); + }; + const onRightClick = () => { + Toast.text(`${translate("clicked")}`); + }; + const close = () => { + Toast.text(`${translate("closed")}`); + }; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + background: "\u6587\u5B57/\u80CC\u666F\u989C\u8272\u8BBE\u7F6E", + left: "\u5DE6\u4FA7\u6309\u94AE\u81EA\u5B9A\u4E49", + right: "\u53F3\u4FA7\u6309\u94AE\u81EA\u5B9A\u4E49", + title: "\u9875\u9762\u6807\u9898", + leftTitle: "\u5DE6\u6807\u9898", + rightTitle: "\u5206\u4EAB", + iconTitle: "\u5C0F\u53F7\u56FE\u6807", + event: "\u4E8B\u4EF6\u7ED1\u5B9A", + close: "\u70B9\u51FB\u5DE6\u53F3\u4FA7\u548C\u5173\u95ED", + return: "\u8FD4\u56DE", + clicked: "\u70B9\u51FB", + closed: "\u5173\u95ED" + }, + "en-US": { + basic: "Basic Usage", + background: "Background Color", + left: "Custom Left Button", + right: "Csutom Right Button", + title: "Page Title", + leftTitle: "Left Title", + rightTitle: "Share", + iconTitle: "Small Icon", + event: "Event Binding", + close: "Click event and close", + return: "Return", + clicked: "Clicked", + closed: "Close" + } + }); + }); + return { + onLeftClick, + onRightClick, + close, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding navbar-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title", "right"]; +const _hoisted_5 = ["title", "right"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = /* @__PURE__ */ createBaseVNode("span", { + slot: "left", + class: "left-wrap" +}, [ + /* @__PURE__ */ createBaseVNode("quark-icon-user", { + size: "24", + name: "user" + }) +], -1); +const _hoisted_8 = [ + _hoisted_7 +]; +const _hoisted_9 = ["title"]; +const _hoisted_10 = { slot: "left" }; +const _hoisted_11 = ["title"]; +const _hoisted_12 = /* @__PURE__ */ createBaseVNode("quark-icon-arrow-right", { + size: "20", + name: "user", + slot: "right" +}, null, -1); +const _hoisted_13 = [ + _hoisted_12 +]; +const _hoisted_14 = ["right", "title"]; +const _hoisted_15 = ["right", "title"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-navbar", { + title: _ctx.translate("title") + }, null, 8, _hoisted_2), + createBaseVNode("quark-navbar", { + title: _ctx.translate("leftTitle"), + closehide: "true", + class: "left" + }, null, 8, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("background")), 1), + createBaseVNode("quark-navbar", { + class: "bg", + title: _ctx.translate("title"), + right: _ctx.translate("rightTitle"), + safearea: "true" + }, null, 8, _hoisted_4), + createBaseVNode("quark-navbar", { + class: "bg2", + title: _ctx.translate("iconTitle"), + right: _ctx.translate("rightTitle"), + iconsize: "18" + }, null, 8, _hoisted_5), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("left")), 1), + createBaseVNode("quark-navbar", { + title: _ctx.translate("title") + }, _hoisted_8, 8, _hoisted_6), + createBaseVNode("quark-navbar", { + title: _ctx.translate("title") + }, [ + createBaseVNode("span", _hoisted_10, toDisplayString(_ctx.translate("return")), 1) + ], 8, _hoisted_9), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("right")), 1), + createBaseVNode("quark-navbar", { + title: _ctx.translate("title") + }, _hoisted_13, 8, _hoisted_11), + createBaseVNode("quark-navbar", { + right: _ctx.translate("rightTitle"), + title: _ctx.translate("title") + }, null, 8, _hoisted_14), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("event")), 1), + createBaseVNode("quark-navbar", { + right: _ctx.translate("rightTitle"), + title: _ctx.translate("close"), + onLeftclick: _cache[0] || (_cache[0] = (...args) => _ctx.onLeftClick && _ctx.onLeftClick(...args)), + onRightclick: _cache[1] || (_cache[1] = (...args) => _ctx.onRightClick && _ctx.onRightClick(...args)), + onClose: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args)) + }, null, 40, _hoisted_15) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.dfb2b213.js b/demo/assets/demo.dfb2b213.js new file mode 100644 index 000000000..9ec08d87d --- /dev/null +++ b/demo/assets/demo.dfb2b213.js @@ -0,0 +1,390 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, f as reactive, r as ref, c as createElementBlock, a as createBaseVNode, t as toDisplayString, n as normalizeClass, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("calendar"); +const _sfc_main = createDemo({ + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + quick: "\u5FEB\u6377\u9009\u62E9", + custom: "\u81EA\u5B9A\u4E49\u65E5\u5386", + tiled: "\u5E73\u94FA\u5C55\u793A" + }, + cellTitle: { + single: "\u9009\u62E9\u5355\u4E2A\u65E5\u671F", + multiple: "\u9009\u62E9\u591A\u4E2A\u65E5\u671F", + range: "\u9009\u62E9\u65E5\u671F\u533A\u95F4", + customDefault: "\u81EA\u5B9A\u4E49\u9009\u4E2D\u503C", + customMaxRange: "\u65E5\u671F\u533A\u95F4\u6700\u5927\u8303\u56F4", + customRange: "\u81EA\u5B9A\u4E49\u65E5\u671F\u8303\u56F4", + customConfirm: "\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57", + customDayText: "\u81EA\u5B9A\u4E49\u65E5\u671F\u6587\u6848", + customPosition: "\u81EA\u5B9A\u4E49\u5F39\u51FA\u4F4D\u7F6E", + customCss: "\u81EA\u5B9A\u4E49\u6837\u5F0F", + weekFirstDay: "\u81EA\u5B9A\u4E49\u5468\u8D77\u59CB\u65E5" + }, + otherText: { + multiple: "\u4E2A\u65E5\u671F", + confirmText: "\u5B8C\u6210", + confirmDisabledText: "\u8BF7\u9009\u62E9", + midAutumn: "\u4E2D\u79CB\u8282", + nationalDday: "\u56FD\u5E86\u8282", + today: "\u4ECA\u5929", + rest: "\u4F11", + in: "\u5165\u5E97", + out: "\u79BB\u5E97" + } + }, + "en-US": { + title: { + basic: "Basic Usage", + quick: "Quick Select", + custom: "Custom Calendar", + tiled: "Tiled display" + }, + cellTitle: { + single: "Select Single Date", + multiple: "Select Multiple Date", + range: "Select Date Range", + customDefault: "Custom Selected Value", + customMaxRange: "Custom The Maximum Number Of Selected Days", + customRange: "Custom Date Range", + customConfirm: "Custom Confirm Text", + customDayText: "Custom Day Text", + customPosition: "Custom Pop Position", + customCss: "Custom CSS", + weekFirstDay: "Custom First Day Of Week" + }, + otherText: { + multiple: "Dates", + confirmText: "OK", + confirmDisabledText: "Please Select", + midAutumn: "Mid-Autumn", + nationalDday: "National Day", + today: "Today", + rest: "Rest", + in: "In", + out: "Out" + } + } + }); + }); + const state = reactive({ + date: { + selectSingle: null, + selectRange: [], + selectMultiple: [], + quickSelectSingle: null, + quickSelectRange: [], + customDefault: new Date(), + customConfirm: [], + customRange: null, + customMaxRange: [], + customDayText: [], + weekFirstDay: null, + customPosition: null, + customCss: null + }, + isCss: false, + visible: false, + type: "single", + round: true, + minDate: void 0, + maxDate: void 0, + tiledMinDate: "2023-09-01", + tiledMaxDate: "2023-10-31", + maxRange: void 0, + position: void 0, + formatter: void 0, + hideConfirm: false, + confirmText: void 0, + confirmDisabledText: void 0, + weekFirstDay: 0 + }); + const calendarRef = ref(null); + const resetSettings = () => { + state.round = true; + state.minDate = void 0; + state.maxDate = void 0; + state.maxRange = void 0; + state.position = void 0; + state.formatter = void 0; + state.hideConfirm = false; + state.confirmText = void 0; + state.confirmDisabledText = void 0; + state.weekFirstDay = 0; + state.isCss = false; + calendarRef.value.setValue(null); + }; + const dayFormatter = (day) => { + if (!day.date) { + return day; + } + const month = day.date.getMonth() + 1; + const date = day.date.getDate(); + if (month === 9) { + if (date === 29) { + day.topInfo = translate("otherText.midAutumn"); + } + if (date === 10) { + day.topInfo = translate("otherText.today"); + } + if (date > 28) { + day.bottomInfo = translate("otherText.rest"); + } + } + if (month === 10) { + if (date === 1) { + day.topInfo = translate("otherText.nationalDday"); + } + if (date < 7) { + day.bottomInfo = translate("otherText.rest"); + } + } + if (day.type === "start") { + day.bottomInfo = translate("otherText.in"); + } else if (day.type === "end") { + day.bottomInfo = translate("otherText.out"); + } + return day; + }; + const open = (type, id) => { + resetSettings(); + state.id = id; + state.type = type; + state.visible = true; + switch (id) { + case "quickSelectSingle": + case "quickSelectRange": + state.hideConfirm = true; + break; + case "customDefault": + calendarRef.value.setValue(new Date()); + break; + case "customConfirm": + state.confirmText = translate("otherText.confirmText"); + state.confirmDisabledText = translate( + "otherText.confirmDisabledText" + ); + break; + case "customRange": + state.minDate = "2022-1-1"; + state.maxDate = "2022-1-31"; + break; + case "customDayText": + state.minDate = "2023-9-15"; + state.maxDate = "2023-10-15"; + calendarRef.value.setFormatter(dayFormatter); + break; + case "customPosition": + state.round = false; + state.position = "right"; + break; + case "customMaxRange": + state.maxRange = 3; + break; + case "weekFirstDay": + state.weekFirstDay = 1; + break; + case "customCss": + state.isCss = true; + break; + } + }; + const formatDate = (date) => { + if (date) { + return `${date.getMonth() + 1}/${date.getDate()}`; + } + }; + const formatFullDate = (date) => { + if (date) { + return `${date.getFullYear()}/${formatDate(date)}`; + } + }; + const formatMultiple = (dates) => { + if (dates.length) { + let text = translate("otherText.multiple"); + if (dates.length === 1 && text.match(/.+s$/)) { + text = text.slice(0, text.length - 1); + } + return dates.length + text; + } + }; + const formatRange = (dateRange) => { + if (dateRange.length) { + const [start, end] = dateRange; + return `${formatDate(start)} - ${formatDate(end)}`; + } + }; + const confirm = ({ value }) => { + state.visible = false; + state.date[state.id] = value; + }; + const close = () => { + state.visible = false; + }; + return { + translate, + state, + calendarRef, + resetSettings, + open, + close, + confirm, + formatFullDate, + formatMultiple, + formatRange + }; + } +}); +const _hoisted_1 = { class: "demo button-demo" }; +const _hoisted_2 = ["title", "desc"]; +const _hoisted_3 = ["title", "desc"]; +const _hoisted_4 = ["title", "desc"]; +const _hoisted_5 = ["title", "desc"]; +const _hoisted_6 = ["title", "desc"]; +const _hoisted_7 = ["title", "desc"]; +const _hoisted_8 = ["title", "desc"]; +const _hoisted_9 = ["title", "desc"]; +const _hoisted_10 = ["title", "desc"]; +const _hoisted_11 = ["title", "desc"]; +const _hoisted_12 = ["title", "desc"]; +const _hoisted_13 = ["title", "desc"]; +const _hoisted_14 = ["title", "desc"]; +const _hoisted_15 = ["maxdate", "mindate"]; +const _hoisted_16 = ["open", "type", "round", "position", "mindate", "maxdate", "maxrange", "formatter", "hideconfirm", "confirmtext", "weekfirstday", "confirmdisabledtext"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.single"), + desc: _ctx.formatFullDate(_ctx.state.date.selectSingle), + islink: "", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.open("single", "selectSingle")) + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.multiple"), + desc: _ctx.formatMultiple(_ctx.state.date.selectMultiple), + islink: "", + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.open("multiple", "selectMultiple")) + }, null, 8, _hoisted_3), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.range"), + desc: _ctx.formatRange(_ctx.state.date.selectRange), + islink: "", + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.open("range", "selectRange")) + }, null, 8, _hoisted_4) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.quick")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.single"), + desc: _ctx.formatFullDate(_ctx.state.date.quickSelectSingle), + islink: "", + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.open("single", "quickSelectSingle")) + }, null, 8, _hoisted_5), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.range"), + desc: _ctx.formatRange(_ctx.state.date.quickSelectRange), + islink: "", + onClick: _cache[4] || (_cache[4] = ($event) => _ctx.open("range", "quickSelectRange")) + }, null, 8, _hoisted_6) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.custom")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customDefault"), + desc: _ctx.formatFullDate(_ctx.state.date.customDefault), + islink: "", + onClick: _cache[5] || (_cache[5] = ($event) => _ctx.open("single", "customDefault")) + }, null, 8, _hoisted_7), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customRange"), + desc: _ctx.formatFullDate(_ctx.state.date.customRange), + islink: "", + onClick: _cache[6] || (_cache[6] = ($event) => _ctx.open("single", "customRange")) + }, null, 8, _hoisted_8), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customMaxRange"), + desc: _ctx.formatRange(_ctx.state.date.customMaxRange), + islink: "", + onClick: _cache[7] || (_cache[7] = ($event) => _ctx.open("range", "customMaxRange")) + }, null, 8, _hoisted_9), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customConfirm"), + desc: _ctx.formatRange(_ctx.state.date.customConfirm), + islink: "", + onClick: _cache[8] || (_cache[8] = ($event) => _ctx.open("range", "customConfirm")) + }, null, 8, _hoisted_10), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customDayText"), + desc: _ctx.formatRange(_ctx.state.date.customDayText), + islink: "", + onClick: _cache[9] || (_cache[9] = ($event) => _ctx.open("range", "customDayText")) + }, null, 8, _hoisted_11), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.weekFirstDay"), + desc: _ctx.formatFullDate(_ctx.state.date.weekFirstDay), + islink: "", + onClick: _cache[10] || (_cache[10] = ($event) => _ctx.open("single", "weekFirstDay")) + }, null, 8, _hoisted_12), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customPosition"), + desc: _ctx.formatFullDate(_ctx.state.date.customPosition), + islink: "", + onClick: _cache[11] || (_cache[11] = ($event) => _ctx.open("single", "customPosition")) + }, null, 8, _hoisted_13), + createBaseVNode("quark-cell", { + type: "primary", + title: _ctx.translate("cellTitle.customCss"), + desc: _ctx.formatFullDate(_ctx.state.date.customCss), + islink: "", + onClick: _cache[12] || (_cache[12] = ($event) => _ctx.open("single", "customCss")) + }, null, 8, _hoisted_14) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.tiled")), 1), + createBaseVNode("quark-calendar", { + tiled: true, + maxdate: _ctx.state.tiledMaxDate, + mindate: _ctx.state.tiledMinDate, + hideconfirm: "", + false: "" + }, null, 8, _hoisted_15), + createBaseVNode("quark-calendar", { + class: normalizeClass(_ctx.state.isCss ? "custom-css" : ""), + ref: "calendarRef", + open: _ctx.state.visible, + type: _ctx.state.type, + round: _ctx.state.round, + position: _ctx.state.position, + mindate: _ctx.state.minDate, + maxdate: _ctx.state.maxDate, + maxrange: _ctx.state.maxRange, + formatter: _ctx.state.formatter, + hideconfirm: _ctx.state.hideConfirm, + confirmtext: _ctx.state.confirmText, + weekfirstday: _ctx.state.weekFirstDay, + confirmdisabledtext: _ctx.state.confirmDisabledText, + onClose: _cache[13] || (_cache[13] = (...args) => _ctx.close && _ctx.close(...args)), + onConfirm: _cache[14] || (_cache[14] = ({ detail }) => _ctx.confirm(detail)) + }, null, 42, _hoisted_16) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.e413b186.js b/demo/assets/demo.e413b186.js new file mode 100644 index 000000000..38a80fe36 --- /dev/null +++ b/demo/assets/demo.e413b186.js @@ -0,0 +1,640 @@ +var __async = (__this, __arguments, generator) => { + return new Promise((resolve, reject) => { + var fulfilled = (value) => { + try { + step(generator.next(value)); + } catch (e) { + reject(e); + } + }; + var rejected = (value) => { + try { + step(generator.throw(value)); + } catch (e) { + reject(e); + } + }; + var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); + step((generator = generator.apply(__this, __arguments)).next()); + }); +}; +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, g as onMounted, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, w as withDirectives, v as vModelText, F as Fragment, m as renderList, b as openBlock, p as pushScopeId, q as popScopeId } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_scoped_true_lang = ""; +const { createDemo, translate } = createComponent("form"); +const _sfc_main = createDemo({ + setup() { + const formData = ref({ + checkbox: ["apple"], + radio: "", + rate: "", + stepper: "", + switch: false, + textarea: "", + uploader: [], + picker: "" + }); + const form = ref({ + name: "", + password: "", + other: { + age: 18 + } + }); + const formRef = ref(null); + const pickerRef = ref(null); + const ruleFormRef = ref(null); + const ruleForm = ref({ + name: "", + password: "", + age: "" + }); + const formAttrRef = ref(); + const attrsForm = ref({ + name: "", + password: "", + age: "" + }); + const formItemsRef = ref(); + const dynamicFormData = ref({ + user: [{ name: "", age: "" }] + }); + const addDynamicForm = () => { + dynamicFormData.value.user.push({ name: "", age: "" }); + }; + const dynamicRules = { + name: [{ required: true, message: translate("error.name") }], + age: [{ required: true, message: translate("error.age1") }] + }; + onMounted(() => { + var _a, _b, _c, _d, _e, _f, _g; + const picker = pickerRef.value; + picker.setColumns([ + { + defaultIndex: 0, + values: translate("cities") + } + ]); + (_a = formRef.value) == null ? void 0 : _a.setModel(form.value); + (_b = formRef.value) == null ? void 0 : _b.setRules({ + name: [{ required: true, message: translate("error.name") }], + password: { required: true, message: translate("error.password") }, + other: { + age: [{ required: true, message: translate("error.age1") }] + } + }); + (_c = formItemsRef.value) == null ? void 0 : _c.setModel(formData.value); + (_d = formAttrRef.value) == null ? void 0 : _d.setModel(attrsForm.value); + (_e = formAttrRef.value) == null ? void 0 : _e.setRules({ + name: [{ required: true, message: translate("error.name") }], + age: { required: true, message: translate("error.age1") } + }); + (_f = ruleFormRef.value) == null ? void 0 : _f.setRules({ + name: [ + { + required: true, + message: translate("error.errorMsg"), + pattern: /\w{6}/ + } + ], + password: [{ required: true, validator: validatorPassword }], + age: [{ required: true, asyncValidator }] + }); + (_g = dynamicFormRef.value) == null ? void 0 : _g.setModel(dynamicFormData.value); + }); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + title: { + basic: "\u57FA\u7840\u7528\u6CD5", + rule: "\u81EA\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219", + items: "\u8868\u5355\u9879\u7C7B\u578B", + slots: "\u4F7F\u7528\u63D2\u69FD", + attrs: "\u8868\u5355\u5C5E\u6027", + dynamic: "\u52A8\u6001\u589E\u52A0\u8868\u5355\u9879" + }, + label: { + name: "\u59D3\u540D", + password: "\u5BC6\u7801", + age: "\u5E74\u9F84", + checkbox: "\u590D\u9009\u6846", + radio: "\u5355\u9009\u6846", + switch: "\u5F00\u5173", + rate: "\u8BC4\u5206", + stepper: "\u6B65\u8FDB\u5668", + textarea: "\u6587\u672C\u57DF", + uploader: "\u6587\u4EF6\u4E0A\u4F20", + picker: "\u9009\u62E9\u5668" + }, + placeholders: { + pattern: "\u6B63\u5219\u6821\u9A8C", + validator: "\u51FD\u6570\u6821\u9A8C", + asyncValidator: "\u5F02\u6B65\u6821\u9A8C" + }, + cities: ["\u676D\u5DDE", "\u5609\u5174", "\u7ECD\u5174", "\u5B81\u6CE2", "\u6E56\u5DDE", "\u5343\u5C9B\u6E56"], + submit: "\u63D0\u4EA4", + reset: "\u91CD\u7F6E", + add: "\u6DFB\u52A0", + error: { + name: "\u8BF7\u8F93\u5165\u59D3\u540D", + password: "\u8BF7\u8F93\u5165\u5BC6\u7801", + age1: "\u8BF7\u8F93\u5165\u5E74\u9F84", + age: "\u4E0D\u80FD\u5C0F\u4E8E18\u5C81", + errorMsg: "\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9", + errorPwd: "\u5BC6\u7801\u4E0D\u80FD\u4E3A123456" + }, + pickerTitle: "\u8BF7\u9009\u62E9\u57CE\u5E02", + enum: { + apple: "\u82F9\u679C", + banana: "\u9999\u8549", + square: "\u65B9\u5F62", + circle: "\u5706\u5F62" + }, + customLabel: "\u81EA\u5B9A\u4E49label", + search: "\u641C\u7D22" + }, + "en-US": { + title: { + basic: "Basic Usage", + rule: "Custom Rules", + items: "Form Items", + slots: "Use slots", + attrs: "Form Attributes", + dynamic: "Add form items dynamically" + }, + label: { + name: "Name", + password: "Password", + age: "Age", + checkbox: "Checkbox", + radio: "Radio", + switch: "Swicth", + rate: "Rate", + stepper: "Stepper", + textarea: "Textarea", + uploader: "Uploader", + picker: "Picker" + }, + placeholders: { + pattern: "Use pattern", + validator: "Use validator", + asyncValidator: "Use async validator" + }, + cities: [ + "Hangzhou", + "Jiaxing", + "Shaoxing", + "Ningbo", + "Huzhou", + "Qiandaohu" + ], + submit: "Submit", + reset: "Reset", + add: "Add", + error: { + name: "Name is required", + password: "Password is required", + age: "Must not be younger than 18", + age1: "Age is required", + errorMsg: "Error message", + errorPwd: "Password can not be 123456" + }, + pickerTitle: "Please choose city", + enum: { + apple: "apple", + banana: "banana", + square: "square", + circle: "circle" + }, + customLabel: "Custom Label", + search: "Search" + } + }); + }); + const submit = (ref2) => { + ref2.validate((valid, errorMsg) => { + console.log("submit", valid, errorMsg); + }); + }; + const reset = () => { + formRef.value.resetFields(); + }; + const getValues = (ref2) => { + const values = ref2.getValues(); + console.log(values); + }; + const onCheckboxChange = ({ detail }) => { + formData.value.checkbox = detail.value; + }; + const onRadioChange = ({ detail }) => { + formData.value.radio = detail.value; + }; + const pickerVisible = ref(false); + const close = () => { + pickerVisible.value = false; + }; + const confirm = ({ detail }) => { + formData.value.picker = detail.value.map((i) => i.value).join(""); + pickerVisible.value = false; + }; + const ruleFormSubmit = () => __async(this, null, function* () { + const valid = yield ruleFormRef.value.validate(); + console.log(valid); + }); + const validatorPassword = (rule, val, callback) => { + if (!val) { + callback(new Error(translate("error.errorMsg"))); + } else if (val === "123456") { + callback(new Error(translate("error.errorPwd"))); + } else { + callback(); + } + }; + const asyncValidator = (rule, value) => { + return new Promise((resolve, reject) => { + if (value < 18) { + reject(translate("error.age")); + } else { + resolve(); + } + }); + }; + const dynamicFormRef = ref(); + return { + formRef, + formData, + pickerRef, + translate, + close, + confirm, + onCheckboxChange, + pickerVisible, + onRadioChange, + submit, + reset, + form, + ruleFormRef, + ruleForm, + ruleFormSubmit, + formAttrRef, + attrsForm, + formItemsRef, + getValues, + addDynamicForm, + dynamicRules, + dynamicFormData, + dynamicFormRef + }; + } +}); +const _withScopeId = (n) => (pushScopeId("data-v-84a6474c"), n = n(), popScopeId(), n); +const _hoisted_1 = { class: "demo scoped-form" }; +const _hoisted_2 = { + ref: "formRef", + labelwidth: "70px" +}; +const _hoisted_3 = ["label"]; +const _hoisted_4 = ["placeholder"]; +const _hoisted_5 = ["label"]; +const _hoisted_6 = ["placeholder"]; +const _hoisted_7 = ["label"]; +const _hoisted_8 = ["placeholder"]; +const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("br", null, null, -1)); +const _hoisted_10 = { class: "flex-box" }; +const _hoisted_11 = { + ref: "ruleFormRef", + labelwidth: "90px" +}; +const _hoisted_12 = ["label"]; +const _hoisted_13 = ["placeholder"]; +const _hoisted_14 = ["label"]; +const _hoisted_15 = ["placeholder"]; +const _hoisted_16 = ["label"]; +const _hoisted_17 = ["placeholder"]; +const _hoisted_18 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("br", null, null, -1)); +const _hoisted_19 = { class: "flex-box" }; +const _hoisted_20 = { ref: "formItemsRef" }; +const _hoisted_21 = ["label"]; +const _hoisted_22 = ["value"]; +const _hoisted_23 = { name: "apple" }; +const _hoisted_24 = { name: "banana" }; +const _hoisted_25 = ["label"]; +const _hoisted_26 = ["value"]; +const _hoisted_27 = { name: "square" }; +const _hoisted_28 = { name: "circle" }; +const _hoisted_29 = ["label"]; +const _hoisted_30 = ["checked"]; +const _hoisted_31 = ["label"]; +const _hoisted_32 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-rate", null, null, -1)); +const _hoisted_33 = [ + _hoisted_32 +]; +const _hoisted_34 = ["label"]; +const _hoisted_35 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-stepper", { + min: "0", + max: "99" +}, null, -1)); +const _hoisted_36 = [ + _hoisted_35 +]; +const _hoisted_37 = ["label"]; +const _hoisted_38 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-textarea", { autosize: "" }, null, -1)); +const _hoisted_39 = [ + _hoisted_38 +]; +const _hoisted_40 = ["label"]; +const _hoisted_41 = ["label"]; +const _hoisted_42 = ["value"]; +const _hoisted_43 = ["title", "open"]; +const _hoisted_44 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("br", null, null, -1)); +const _hoisted_45 = { class: "flex-box" }; +const _hoisted_46 = { + ref: "formAttrRef", + labelwidth: "60px", + labelposition: "right", + labelsuffix: "\uFF1A" +}; +const _hoisted_47 = ["label"]; +const _hoisted_48 = ["placeholder"]; +const _hoisted_49 = ["label", "rules"]; +const _hoisted_50 = ["placeholder"]; +const _hoisted_51 = ["label"]; +const _hoisted_52 = ["placeholder"]; +const _hoisted_53 = { slot: "label" }; +const _hoisted_54 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("quark-field", null, null, -1)); +const _hoisted_55 = { slot: "suffix" }; +const _hoisted_56 = { + type: "primary", + size: "small" +}; +const _hoisted_57 = { ref: "dynamicFormRef" }; +const _hoisted_58 = ["label", "prop", "rules"]; +const _hoisted_59 = ["onUpdate:modelValue", "placeholder"]; +const _hoisted_60 = ["label", "prop", "rules"]; +const _hoisted_61 = ["onUpdate:modelValue", "placeholder"]; +const _hoisted_62 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("br", null, null, -1)); +const _hoisted_63 = { class: "flex-box" }; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.basic")), 1), + createBaseVNode("quark-form", _hoisted_2, [ + createBaseVNode("quark-form-item", { + prop: "name", + label: _ctx.translate("label.name") + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.form.name = $event), + placeholder: _ctx.translate("label.name") + }, null, 8, _hoisted_4), [ + [vModelText, _ctx.form.name] + ]) + ], 8, _hoisted_3), + createBaseVNode("quark-form-item", { + prop: "password", + label: _ctx.translate("label.password") + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.form.password = $event), + type: "password", + placeholder: _ctx.translate("label.password") + }, null, 8, _hoisted_6), [ + [vModelText, _ctx.form.password] + ]) + ], 8, _hoisted_5), + createBaseVNode("quark-form-item", { + prop: "other.age", + label: _ctx.translate("label.age") + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.form.other.age = $event), + placeholder: _ctx.translate("label.age") + }, null, 8, _hoisted_8), [ + [vModelText, _ctx.form.other.age] + ]) + ], 8, _hoisted_7) + ], 512), + _hoisted_9, + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-button", { + type: "primary", + size: "big", + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.submit(_ctx.formRef)) + }, toDisplayString(_ctx.translate("submit")), 1), + createBaseVNode("quark-button", { + size: "big", + onClick: _cache[4] || (_cache[4] = (...args) => _ctx.reset && _ctx.reset(...args)) + }, toDisplayString(_ctx.translate("reset")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.rule")), 1), + createBaseVNode("quark-form", _hoisted_11, [ + createBaseVNode("quark-form-item", { + prop: "name", + label: _ctx.translate("label.name") + }, [ + createBaseVNode("quark-field", { + placeholder: _ctx.translate("placeholders.pattern") + }, null, 8, _hoisted_13) + ], 8, _hoisted_12), + createBaseVNode("quark-form-item", { + prop: "password", + label: _ctx.translate("label.password") + }, [ + createBaseVNode("quark-field", { + value: "123456", + placeholder: _ctx.translate("placeholders.validator") + }, null, 8, _hoisted_15) + ], 8, _hoisted_14), + createBaseVNode("quark-form-item", { + prop: "age", + label: _ctx.translate("label.age") + }, [ + createBaseVNode("quark-field", { + placeholder: _ctx.translate("placeholders.asyncValidator") + }, null, 8, _hoisted_17) + ], 8, _hoisted_16) + ], 512), + _hoisted_18, + createBaseVNode("div", _hoisted_19, [ + createBaseVNode("quark-button", { + type: "primary", + size: "big", + onClick: _cache[5] || (_cache[5] = (...args) => _ctx.ruleFormSubmit && _ctx.ruleFormSubmit(...args)) + }, toDisplayString(_ctx.translate("submit")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.items")), 1), + createBaseVNode("quark-form", _hoisted_20, [ + createBaseVNode("quark-form-item", { + prop: "checkbox", + label: _ctx.translate("label.checkbox") + }, [ + createBaseVNode("quark-checkbox-group", { + value: _ctx.formData.checkbox, + onChange: _cache[6] || (_cache[6] = (...args) => _ctx.onCheckboxChange && _ctx.onCheckboxChange(...args)) + }, [ + createBaseVNode("quark-checkbox", _hoisted_23, toDisplayString(_ctx.translate("enum.apple")), 1), + createBaseVNode("quark-checkbox", _hoisted_24, toDisplayString(_ctx.translate("enum.banana")), 1) + ], 40, _hoisted_22) + ], 8, _hoisted_21), + createBaseVNode("quark-form-item", { + prop: "radio", + label: _ctx.translate("label.radio") + }, [ + createBaseVNode("quark-radio-group", { + value: _ctx.formData.radio, + direction: "horizontal", + onChange: _cache[7] || (_cache[7] = (...args) => _ctx.onRadioChange && _ctx.onRadioChange(...args)) + }, [ + createBaseVNode("quark-radio", _hoisted_27, toDisplayString(_ctx.translate("enum.square")), 1), + createBaseVNode("quark-radio", _hoisted_28, toDisplayString(_ctx.translate("enum.circle")), 1) + ], 40, _hoisted_26) + ], 8, _hoisted_25), + createBaseVNode("quark-form-item", { + prop: "swich", + label: _ctx.translate("label.switch") + }, [ + createBaseVNode("quark-switch", { + checked: _ctx.formData.switch + }, null, 8, _hoisted_30) + ], 8, _hoisted_29), + createBaseVNode("quark-form-item", { + prop: "rate", + label: _ctx.translate("label.rate") + }, _hoisted_33, 8, _hoisted_31), + createBaseVNode("quark-form-item", { + prop: "stepper", + label: _ctx.translate("label.stepper") + }, _hoisted_36, 8, _hoisted_34), + createBaseVNode("quark-form-item", { + prop: "textarea", + label: _ctx.translate("label.textarea") + }, _hoisted_39, 8, _hoisted_37), + createBaseVNode("quark-form-item", { + prop: "uploader", + label: _ctx.translate("label.uploader") + }, [ + withDirectives(createBaseVNode("quark-uploader", { + "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => _ctx.formData.uploader = $event), + preview: "" + }, null, 512), [ + [vModelText, _ctx.formData.uploader] + ]) + ], 8, _hoisted_40), + createBaseVNode("quark-form-item", { + prop: "picker", + label: _ctx.translate("label.picker"), + islink: "" + }, [ + createBaseVNode("quark-field", { + value: _ctx.formData.picker, + readonly: "", + onClick: _cache[9] || (_cache[9] = ($event) => _ctx.pickerVisible = true) + }, null, 8, _hoisted_42), + createBaseVNode("quark-picker", { + title: _ctx.translate("pickerTitle"), + ref: "pickerRef", + open: _ctx.pickerVisible, + onClose: _cache[10] || (_cache[10] = (...args) => _ctx.close && _ctx.close(...args)), + onConfirm: _cache[11] || (_cache[11] = (...args) => _ctx.confirm && _ctx.confirm(...args)) + }, null, 40, _hoisted_43) + ], 8, _hoisted_41) + ], 512), + _hoisted_44, + createBaseVNode("div", _hoisted_45, [ + createBaseVNode("quark-button", { + type: "primary", + size: "big", + onClick: _cache[12] || (_cache[12] = ($event) => _ctx.getValues(_ctx.formItemsRef)) + }, toDisplayString(_ctx.translate("submit")), 1) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.attrs")), 1), + createBaseVNode("quark-form", _hoisted_46, [ + createBaseVNode("quark-form-item", { + prop: "name", + label: _ctx.translate("label.name"), + labelwidth: "70px" + }, [ + createBaseVNode("quark-field", { + placeholder: _ctx.translate("label.name") + }, null, 8, _hoisted_48) + ], 8, _hoisted_47), + createBaseVNode("quark-form-item", { + prop: "password", + hideasterisk: "", + label: _ctx.translate("label.password"), + rules: [{ required: true, message: _ctx.translate("error.password") }] + }, [ + createBaseVNode("quark-field", { + type: "password", + placeholder: _ctx.translate("label.password") + }, null, 8, _hoisted_50) + ], 8, _hoisted_49), + createBaseVNode("quark-form-item", { + prop: "age", + label: _ctx.translate("label.age"), + hidemessage: "" + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => _ctx.attrsForm.age = $event), + placeholder: _ctx.translate("label.age") + }, null, 8, _hoisted_52), [ + [vModelText, _ctx.attrsForm.age] + ]) + ], 8, _hoisted_51) + ], 512), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.slots")), 1), + createBaseVNode("quark-form", null, [ + createBaseVNode("quark-form-item", null, [ + createBaseVNode("div", _hoisted_53, toDisplayString(_ctx.translate("customLabel")), 1), + _hoisted_54, + createBaseVNode("div", _hoisted_55, [ + createBaseVNode("quark-button", _hoisted_56, toDisplayString(_ctx.translate("search")), 1) + ]) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("title.dynamic")), 1), + createBaseVNode("quark-form", _hoisted_57, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dynamicFormData.user, (item, index) => { + return openBlock(), createElementBlock(Fragment, { key: index }, [ + createBaseVNode("quark-form-item", { + label: `${_ctx.translate("label.name")}${index}`, + prop: `user.${index}.name`, + rules: [{ required: true, message: _ctx.translate("error.name") }] + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": ($event) => item.name = $event, + placeholder: _ctx.translate("label.name") + }, null, 8, _hoisted_59), [ + [vModelText, item.name] + ]) + ], 8, _hoisted_58), + createBaseVNode("quark-form-item", { + label: `${_ctx.translate("label.age")}${index}`, + prop: `user.${index}.age`, + rules: [{ required: true, message: _ctx.translate("error.age1") }] + }, [ + withDirectives(createBaseVNode("quark-field", { + "onUpdate:modelValue": ($event) => item.age = $event, + placeholder: _ctx.translate("label.age") + }, null, 8, _hoisted_61), [ + [vModelText, item.age] + ]) + ], 8, _hoisted_60), + _hoisted_62 + ], 64); + }), 128)) + ], 512), + createBaseVNode("div", _hoisted_63, [ + createBaseVNode("quark-button", { + type: "primary", + size: "big", + onClick: _cache[14] || (_cache[14] = ($event) => _ctx.submit(_ctx.dynamicFormRef)) + }, toDisplayString(_ctx.translate("submit")), 1), + createBaseVNode("quark-button", { + size: "big", + onClick: _cache[15] || (_cache[15] = (...args) => _ctx.addDynamicForm && _ctx.addDynamicForm(...args)) + }, toDisplayString(_ctx.translate("add")), 1) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-84a6474c"]]); +export { demo as default }; diff --git a/demo/assets/demo.e4442e07.js b/demo/assets/demo.e4442e07.js new file mode 100644 index 000000000..076ce4e18 --- /dev/null +++ b/demo/assets/demo.e4442e07.js @@ -0,0 +1,211 @@ +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +import { c as createComponent } from "./component.1f156d43.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("popover"); +const _sfc_main = createDemo({ + setup() { + const data = ref({ + light: false, + dark: false, + icon: false, + disable: false, + content: false + }); + const lightRef = ref(null); + const darkRef = ref(null); + const iconRef = ref(null); + const disableRef = ref(null); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basicUsage: "\u57FA\u7840\u7528\u6CD5", + lightStyle: "\u6D45\u8272\u98CE\u683C", + darkStyle: "\u6DF1\u8272\u98CE\u683C", + settings: "\u9009\u9879\u914D\u7F6E", + showIcon: "\u5C55\u793A\u56FE\u6807", + disable: "\u7981\u7528\u72B6\u6001", + customContent: "\u81EA\u5B9A\u4E49\u5185\u5BB9", + content: "\u6211\u662F\u81EA\u5B9A\u4E49\u5185\u5BB9", + options: ["\u9009\u9879\u4E00", "\u9009\u9879\u4E8C", "\u9009\u9879\u4E09"] + }, + "en-US": { + basicUsage: "Basic Usage", + lightStyle: "Light Style", + darkStyle: "Dark Style", + settings: "Option Settings", + showIcon: "Show Icon", + disable: "disabled", + customContent: "Custom Content", + content: "This is custom content", + options: ["Option 1", "Option 2", "Option 3"] + } + }); + }); + onMounted(() => { + const actions = [ + { + text: `${translate("options")[0]}` + }, + { + text: `${translate("options")[1]}` + }, + { + text: `${translate("options")[2]}` + } + ]; + lightRef.value.setActions(actions); + darkRef.value.setActions(actions); + iconRef.value.setActions([ + { + text: `${translate("options")[0]}` + }, + { + text: `${translate("options")[1]}`, + icon: "tel" + }, + { + text: `${translate("options")[2]}`, + icon: "https://m.hellobike.com/resource/helloyun/18625/WUu02_img.png" + } + ]); + disableRef.value.setActions([ + { + text: `${translate("options")[0]}`, + disabled: true + }, + { + text: `${translate("options")[1]}` + }, + { + text: `${translate("options")[2]}` + } + ]); + }); + const handleLightSelect = ({ detail }) => { + const { action, index } = detail; + Toast.text(action.text); + close("light"); + }; + const handleDarkSelect = ({ detail }) => { + const { action, index } = detail; + Toast.text(action.text); + close("dark"); + }; + const handleIconSelect = ({ detail }) => { + const { action, index } = detail; + Toast.text(action.text); + close("icon"); + }; + const handleDisableSelect = ({ detail }) => { + const { action, index } = detail; + Toast.text(action.text); + close("disable"); + }; + const open = (name) => { + data.value[name] = true; + data.value.test = true; + }; + const close = (name) => { + data.value[name] = false; + }; + return { + translate, + data, + lightRef, + darkRef, + iconRef, + disableRef, + handleLightSelect, + handleDarkSelect, + handleIconSelect, + handleDisableSelect, + open, + close + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = ["open"]; +const _hoisted_3 = ["open"]; +const _hoisted_4 = ["open"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = ["open"]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basicUsage")), 1), + createBaseVNode("quark-popover", { + scrollhidden: "", + open: _ctx.data.light, + theme: "light", + placement: "bottomleft", + ref: "lightRef", + onClose: _cache[1] || (_cache[1] = ($event) => _ctx.close("light")), + onSelect: _cache[2] || (_cache[2] = (...args) => _ctx.handleLightSelect && _ctx.handleLightSelect(...args)) + }, [ + createBaseVNode("div", { + class: "quark-popover", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.open("light")) + }, toDisplayString(_ctx.translate("lightStyle")), 1) + ], 40, _hoisted_2), + createBaseVNode("quark-popover", { + scrollhidden: "", + open: _ctx.data.dark, + theme: "dark", + ref: "darkRef", + onClose: _cache[4] || (_cache[4] = ($event) => _ctx.close("dark")), + onSelect: _cache[5] || (_cache[5] = (...args) => _ctx.handleDarkSelect && _ctx.handleDarkSelect(...args)) + }, [ + createBaseVNode("div", { + class: "quark-popover", + onClick: _cache[3] || (_cache[3] = ($event) => _ctx.open("dark")) + }, toDisplayString(_ctx.translate("darkStyle")), 1) + ], 40, _hoisted_3), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("settings")), 1), + createBaseVNode("quark-popover", { + scrollhidden: "", + open: _ctx.data.icon, + placement: "bottomleft", + ref: "iconRef", + theme: "light", + onClose: _cache[7] || (_cache[7] = ($event) => _ctx.close("icon")), + onSelect: _cache[8] || (_cache[8] = (...args) => _ctx.handleIconSelect && _ctx.handleIconSelect(...args)) + }, [ + createBaseVNode("div", { + class: "quark-popover", + onClick: _cache[6] || (_cache[6] = ($event) => _ctx.open("icon")) + }, toDisplayString(_ctx.translate("showIcon")), 1) + ], 40, _hoisted_4), + createBaseVNode("quark-popover", { + scrollhidden: "", + theme: "light", + open: _ctx.data.disable, + ref: "disableRef", + onClose: _cache[10] || (_cache[10] = ($event) => _ctx.close("disable")), + onSelect: _cache[11] || (_cache[11] = (...args) => _ctx.handleDisableSelect && _ctx.handleDisableSelect(...args)) + }, [ + createBaseVNode("div", { + class: "quark-popover", + onClick: _cache[9] || (_cache[9] = ($event) => _ctx.open("disable")) + }, toDisplayString(_ctx.translate("disable")), 1) + ], 40, _hoisted_5), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("")), 1), + createBaseVNode("quark-popover", { + scrollhidden: "", + open: _ctx.data.content, + placement: "bottomleft", + onClose: _cache[14] || (_cache[14] = ($event) => _ctx.close("content")) + }, [ + createBaseVNode("div", { + class: "quark-popover", + onClick: _cache[12] || (_cache[12] = ($event) => _ctx.open("content")) + }, toDisplayString(_ctx.translate("customContent")), 1), + createBaseVNode("div", { + slot: "content", + class: "quark-popover-content", + onClick: _cache[13] || (_cache[13] = ($event) => _ctx.close("content")) + }, toDisplayString(_ctx.translate("content")), 1) + ], 40, _hoisted_6) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.ea16fb6e.js b/demo/assets/demo.ea16fb6e.js new file mode 100644 index 000000000..713b6f198 --- /dev/null +++ b/demo/assets/demo.ea16fb6e.js @@ -0,0 +1,142 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, T as Toast, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("picker"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const customOpen = ref(false); + const pickerRef = ref(null); + const customPickerRef = ref(null); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u4F7F\u7528", + head: "\u81EA\u5B9A\u4E49\u6837\u5F0F", + selectedTime: "\u8BF7\u9009\u62E9\u65F6\u95F4", + confirmText: "\u786E\u8BA4", + custom: { + cancel: "\u53D6\u6D88", + confirm: "\u786E\u5B9A", + title: "\u8BF7\u9009\u62E9\u57CE\u5E02" + }, + time: ["\u4E0A\u5348", "\u4E0B\u5348"], + provinces: ["\u6D59\u6C5F\u7701"], + values: ["\u676D\u5DDE", "\u5609\u5174", "\u7ECD\u5174", "\u5B81\u6CE2", "\u6E56\u5DDE", "\u5343\u5C9B\u6E56"], + selected: "\u5F53\u524D\u9009\u4E2D\uFF1A" + }, + "en-US": { + basic: "Basic Usage", + head: "Custom Style", + selectedTime: "Please Select Time", + confirmText: "Confirm", + custom: { + cancel: "Cancel", + confirm: "Confirm", + title: "Please Select City" + }, + time: ["Morning", "Afternoon"], + provinces: ["Zhejiang Province"], + values: [ + "Hangzhou", + "Jiaxing", + "Shaoxing", + "Ningbo", + "Huzhou", + "Qiandao Lake" + ], + selected: "Currently Selected:" + } + }); + }); + onMounted(() => { + setTimeout(() => { + const preview = pickerRef.value; + preview.setColumns([ + { + defaultIndex: 2, + values: translate("calendaritem.weekdays") + }, + { + defaultIndex: 0, + values: translate("time") + } + ]); + const customPreview = customPickerRef.value; + customPreview.setColumns([ + { + defaultIndex: 0, + values: translate("provinces") + }, + { + defaultIndex: 2, + values: translate("values") + } + ]); + }, 0); + }); + const click = () => { + open.value = true; + }; + const customClick = () => { + customOpen.value = true; + }; + const close = (type) => { + if (type === 0) { + open.value = false; + } else if (type === 1) { + customOpen.value = false; + } + }; + const confirm = ({ detail }) => { + const values = detail.value.map((column) => { + return column.value; + }).join("\uFF0C"); + Toast.text(`${translate("selected")}${values}`); + open.value = false; + }; + const customConfirm = () => { + const customPreview = customPickerRef.value; + const values = customPreview.getValues().map((column) => { + return column.value; + }).join("\uFF0C"); + Toast.text(`${translate("selected")}${values}`); + customOpen.value = false; + }; + const change = ({ detail }) => { + console.log(detail.value, 33333); + }; + return { + open, + customOpen, + pickerRef, + customPickerRef, + click, + customClick, + close, + confirm, + customConfirm, + change, + translate + }; + } +}); +const _hoisted_1 = { class: "demo" }; +const _hoisted_2 = { + ref: "customPickerRef", + class: "custom-pickerview" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-pickerview", { + ref: "pickerRef", + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args)), + onConfirm: _cache[1] || (_cache[1] = (...args) => _ctx.confirm && _ctx.confirm(...args)) + }, null, 544), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("head")), 1), + createBaseVNode("quark-pickerview", _hoisted_2, null, 512) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.eb698258.js b/demo/assets/demo.eb698258.js new file mode 100644 index 000000000..3ec605b5e --- /dev/null +++ b/demo/assets/demo.eb698258.js @@ -0,0 +1,23 @@ +import { _ as _export_sfc, c as createElementBlock, b as openBlock, a as createBaseVNode } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const _sfc_main = {}; +const _hoisted_1 = { class: "demo demo-card" }; +const _hoisted_2 = /* @__PURE__ */ createBaseVNode("quark-card", { + title: "This is title", + tips: "$ 100", + content: "This is content of Card" +}, [ + /* @__PURE__ */ createBaseVNode("div", { + class: "demo", + "my-slot": "desc", + style: { "font-size": "14px", "color": "#999", "padding-top": "14px" } + }, " footer content ") +], -1); +const _hoisted_3 = [ + _hoisted_2 +]; +function _sfc_render(_ctx, _cache) { + return openBlock(), createElementBlock("div", _hoisted_1, _hoisted_3); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.eda6c4df.js b/demo/assets/demo.eda6c4df.js new file mode 100644 index 000000000..6cee8dbef --- /dev/null +++ b/demo/assets/demo.eda6c4df.js @@ -0,0 +1,281 @@ +var __defProp = Object.defineProperty; +var __defProps = Object.defineProperties; +var __getOwnPropDescs = Object.getOwnPropertyDescriptors; +var __getOwnPropSymbols = Object.getOwnPropertySymbols; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __propIsEnum = Object.prototype.propertyIsEnumerable; +var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; +var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; +}; +var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); +var __async = (__this, __arguments, generator) => { + return new Promise((resolve, reject) => { + var fulfilled = (value) => { + try { + step(generator.next(value)); + } catch (e) { + reject(e); + } + }; + var rejected = (value) => { + try { + step(generator.throw(value)); + } catch (e) { + reject(e); + } + }; + var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); + step((generator = generator.apply(__this, __arguments)).next()); + }); +}; +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, g as onMounted, T as Toast, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +import { o as onBeforeRouteLeave } from "./vue-router.7779546b.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("uploader"); +const _sfc_main = createDemo({ + setup() { + const isPreview = ref(null); + const preview = ref(null); + const preview2 = ref(null); + const before = ref(null); + const uploadStatus = ref(null); + const oversizeRef = ref(null); + const customPreviewIcon = ref(null); + const previewUrls = [ + "https://m.hellobike.com/resource/helloyun/15697/9VgwC_Screenshot_20220215_191457_com.jingyao.easybike.jpg?x-oss-process=image/quality,q_80", + "https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png" + ]; + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u7840\u7528\u6CD5", + preview: "\u6587\u4EF6\u9884\u89C8", + status: "\u4E0A\u4F20\u72B6\u6001", + previewMode: "\u9884\u89C8\u6A21\u5F0F", + limit: "\u9650\u5236\u4E0A\u4F20\u6570\u91CF", + size: "\u9650\u5236\u4E0A\u4F20\u5927\u5C0F", + custom: "\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F", + customPreviewIcon: "\u81EA\u5B9A\u4E49\u9884\u89C8\u5220\u9664 icon", + file: "\u4E0A\u4F20\u6587\u4EF6", + before: "\u4E0A\u4F20\u524D\u7F6E", + disabled: "\u7981\u6B62\u4E0A\u4F20", + toast: { + format: "\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247", + overSize: "\u6709\u6587\u4EF6\u8D85\u8FC71KB\u4E86\u54E6" + } + }, + "en-US": { + basic: "Basic Usage", + preview: "File Preview", + status: "upload status", + previewMode: "File Preview Mode", + limit: "Limit Uploads Number", + size: "Limit Uploads Size", + custom: "Custom Upload Style", + customPreviewIcon: "Custom predictive deletion icon", + file: "Upload File", + before: "Before Uploading", + disabled: "Disabled", + toast: { + format: "Please upload image in jpg format", + overSize: "There are files over 1KB" + } + } + }); + }); + onMounted(() => { + preview.value.setPreview(previewUrls); + preview2.value.setPreview(previewUrls); + uploadStatus.value.setPreview(previewUrls); + customPreviewIcon.value.setPreview(previewUrls); + const tasks = uploadStatus.value.tasks; + tasks.forEach((i, index) => { + if (!index) { + uploadStatus.value.setStatus(__spreadProps(__spreadValues({}, i), { + status: "uploading" + })); + } + }); + before.value.beforeUpload = beforeUpload; + }); + const sleep = (time) => { + return new Promise((reslove) => { + setTimeout(() => { + reslove(true); + }, time); + }); + }; + const beforeUpload = (files) => { + const r = files.every((file) => file.type === "image/jpg"); + if (!r) { + Toast.text(`${translate("toast.format")}`); + return false; + } + return true; + }; + const oversize = ({ detail: { items, maxsize } }) => { + console.log(items, maxsize); + Toast.text(`${translate("toast.overSize")}`); + }; + const uploadAction = (item, status = "done") => __async(this, null, function* () { + preview.value.setStatus(__spreadProps(__spreadValues({}, item), { + status: "uploading", + message: "\u4E0A\u4F20\u4E2D" + })); + yield sleep(2e3); + preview.value.setStatus(__spreadProps(__spreadValues({}, item), { + status + })); + Toast.success("\u4E0A\u4F20\u6210\u529F"); + }); + const afterRead = (_0, _1) => __async(this, [_0, _1], function* ({ detail: file }, isDefault) { + if (isDefault) { + Toast.text(`success: the file is ${file.file.name}`); + return; + } + if (Array.isArray(file)) { + for (let i = 0; i < file.length; i++) { + const item = file[i]; + if (i === 0) + uploadAction(item); + else + uploadAction(item); + } + } else { + uploadAction(file); + } + }); + const afterReadStatus = (_0) => __async(this, [_0], function* ({ detail: file }) { + uploadStatus.value.setStatus(__spreadProps(__spreadValues({}, file), { + status: "uploading", + message: "\u4E0A\u4F20\u4E2D" + })); + yield sleep(2e3); + uploadStatus.value.setStatus(__spreadProps(__spreadValues({}, file), { + status: "failed" + })); + Toast.success(`${file.file.name}\u4E0A\u4F20\u5931\u8D25`); + }); + onBeforeRouteLeave(() => { + const nodes = document.querySelectorAll("quark-image-preview "); + nodes.forEach((i) => i.open = false); + }); + return { + isPreview, + preview, + preview2, + before, + uploadStatus, + beforeUpload, + oversize, + oversizeRef, + afterRead, + translate, + afterReadStatus, + customPreviewIcon + }; + } +}); +const _hoisted_1 = { class: "demo uploader-demo" }; +const _hoisted_2 = { class: "flex" }; +const _hoisted_3 = ["preview"]; +const _hoisted_4 = { class: "flex" }; +const _hoisted_5 = { class: "flex" }; +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", { class: "flex" }, [ + /* @__PURE__ */ createBaseVNode("quark-uploader", { + maxcount: "2", + preview: "" + }) +], -1); +const _hoisted_7 = { class: "flex" }; +const _hoisted_8 = { preview: "" }; +const _hoisted_9 = { + type: "primary", + slot: "uploader", + icon: "home" +}; +const _hoisted_10 = { class: "flex closeimg" }; +const _hoisted_11 = { + preview: "", + ref: "customPreviewIcon", + closeimg: "https://m.hellobike.com/resource/helloyun/15697/dEYF0_round_close_fill.png?x-oss-process=image/quality,q_80" +}; +const _hoisted_12 = { + preview: "", + ref: "before" +}; +const _hoisted_13 = /* @__PURE__ */ createBaseVNode("quark-uploader", { + preview: "", + disabled: true +}, null, -1); +const _hoisted_14 = { class: "flex" }; +const _hoisted_15 = { + ref: "preview2", + preview: "", + readonly: "" +}; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("div", _hoisted_2, [ + createBaseVNode("quark-uploader", { + onAfterread: _cache[0] || (_cache[0] = (val) => _ctx.afterRead(val, true)), + preview: _ctx.isPreview + }, null, 40, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("preview")), 1), + createBaseVNode("div", _hoisted_4, [ + createBaseVNode("quark-uploader", { + onAfterread: _cache[1] || (_cache[1] = (...args) => _ctx.afterRead && _ctx.afterRead(...args)), + ref: "preview", + preview: "" + }, null, 544) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("status")), 1), + createBaseVNode("div", _hoisted_5, [ + createBaseVNode("quark-uploader", { + onAfterread: _cache[2] || (_cache[2] = (...args) => _ctx.afterReadStatus && _ctx.afterReadStatus(...args)), + ref: "uploadStatus", + preview: "" + }, null, 544) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("limit")), 1), + _hoisted_6, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("size")), 1), + createBaseVNode("quark-uploader", { + maxsize: "1024", + onOversize: _cache[3] || (_cache[3] = (...args) => _ctx.oversize && _ctx.oversize(...args)), + ref: "oversizeRef" + }, null, 544), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("custom")), 1), + createBaseVNode("div", _hoisted_7, [ + createBaseVNode("quark-uploader", _hoisted_8, [ + createBaseVNode("quark-button", _hoisted_9, toDisplayString(_ctx.translate("file")), 1) + ]) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customPreviewIcon")), 1), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-uploader", _hoisted_11, null, 512) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("before")), 1), + createBaseVNode("quark-uploader", _hoisted_12, null, 512), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + _hoisted_13, + createBaseVNode("h2", null, toDisplayString(_ctx.translate("previewMode")), 1), + createBaseVNode("div", _hoisted_14, [ + createBaseVNode("quark-uploader", _hoisted_15, null, 512) + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.ee619408.js b/demo/assets/demo.ee619408.js new file mode 100644 index 000000000..15d39646f --- /dev/null +++ b/demo/assets/demo.ee619408.js @@ -0,0 +1,113 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, r as ref, o as onBeforeMount, u as useTranslate, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock, h as createTextVNode } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("popupextra"); +const _sfc_main = createDemo({ + setup() { + const open = ref(false); + const open2 = ref(false); + const open3 = ref(false); + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5", + customTitle: "\u81EA\u5B9A\u4E49\u5934\u90E8", + popupTitle: "\u4E3B\u6807\u9898", + popupTitle2: "\u4E3B\u526F\u6807\u9898" + }, + "en-US": { + basic: "Basic Usage", + customTitle: "custom title", + popupTitle: "main title", + popupTitle2: "main subtitle" + } + }); + }); + return { + open, + open2, + open3, + translate + }; + } +}); +const _hoisted_1 = { class: "demo no-padding popup-demo" }; +const _hoisted_2 = ["title"]; +const _hoisted_3 = ["title"]; +const _hoisted_4 = ["title"]; +const _hoisted_5 = ["open"]; +const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", { class: "popup-body" }, [ + /* @__PURE__ */ createBaseVNode("h4", { class: "" }, "1.\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63"), + /* @__PURE__ */ createBaseVNode("p", null, " \u5B6B\u5B50\u66F0\uFF1A\u5175\u8005\uFF0C\u570B\u4E4B\u5927\u4E8B\uFF0C\u6B7B\u751F\u4E4B\u5730\uFF0C\u5B58\u4EA1\u4E4B\u9053\uFF0C\u4E0D\u53EF\u4E0D\u5BDF\u4E5F\u3002 \u6545\u7D93\u4E4B\u4EE5\u4E94\uFF0C\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\uFF1A\u4E00\u66F0\u9053\uFF0C\u4E8C\u66F0\u5929\uFF0C\u4E09\u66F0\u5730\uFF0C\u56DB\u66F0\u5C07\uFF0C\u4E94\u66F0\u6CD5 \u3002\u9053\u8005\uFF0C\u4EE4\u6C11\u4E8E\u4E0A\u540C\u610F\u8005\u4E5F\uFF0C\u53EF\u8207\u4E4B\u6B7B\uFF0C\u53EF\u8207\u4E4B\u751F\uFF0C\u6C11\u4E0D\u8A6D\u4E5F\u3002\u5929\u8005\uFF0C\u9670\u967D\u3001\u5BD2 \u6691\u3001\u6642\u5236\u4E5F\u3002\u5730\u8005\uFF0C\u9AD8\u4E0B\u3001\u9060\u8FD1\u3001\u96AA\u6613\u3001\u5EE3\u72F9\u3001\u6B7B\u751F\u4E5F\u3002\u5C07\u8005\uFF0C\u667A\u3001\u4FE1\u3001\u4EC1\u3001\u52C7 \u3001\u56B4\u4E5F\u3002\u6CD5\u8005\uFF0C\u66F2\u5236\u3001\u5B98\u9053\u3001\u4E3B\u7528\u4E5F\u3002\u51E1\u6B64\u4E94\u8005\uFF0C\u5C07\u83AB\u4E0D\u805E\uFF0C\u77E5\u4E4B\u8005\u52DD\uFF0C\u4E0D\u77E5\u4E4B \u8005\u4E0D\u52DD\u3002\u6545\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\u3002\u66F0\uFF1A\u4E3B\u5B70\u6709\u9053\uFF1F\u5C07\u5B70\u6709\u80FD\uFF1F\u5929\u5730\u5B70\u5F97\uFF1F\u6CD5\u4EE4\u5B70 \u884C\uFF1F\u5175\u773E\u5B70\u5F37\uFF1F\u58EB\u5352\u5B70\u7DF4\uFF1F\u8CDE\u7F70\u5B70\u660E\uFF1F\u543E\u4EE5\u6B64\u77E5\u52DD\u8CA0\u77E3\u3002 \u5C07\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u52DD\uFF0C\u7559\u4E4B\uFE54\u5C07\u4E0D\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u6557\uFF0C\u53BB\u4E4B\u3002 \u8A08\u5229\u4EE5\u807D\uFF0C\u4E43\u70BA\u4E4B\u52E2\uFF0C\u4EE5\u4F50\u5176\u5916\u3002\u52E2\u8005\uFF0C\u56E0\u5229\u800C\u5236\u6B0A\u4E5F\u3002 \u5175\u8005\uFF0C\u8A6D\u9053\u4E5F\u3002\u6545\u80FD\u800C\u793A\u4E4B\u4E0D\u80FD\uFF0C\u7528\u800C\u793A\u4E4B\u4E0D\u7528\uFF0C\u8FD1\u800C\u793A\u4E4B\u9060\uFF0C\u9060\u800C\u793A\u4E4B\u8FD1\u3002\u5229 \u800C\u8A98\u4E4B\uFF0C\u4E82\u800C\u53D6\u4E4B\uFF0C\u5BE6\u800C\u5099\u4E4B\uFF0C\u5F37\u800C\u907F\u4E4B\uFF0C\u6012\u800C\u6493\u4E4B\uFF0C\u5351\u800C\u9A55\u4E4B\uFF0C\u4F5A\u800C\u52DE\u4E4B\uFF0C\u89AA \u800C\u96E2\u4E4B\uFF0C\u653B\u5176\u4E0D\u5099\uFF0C\u51FA\u5176\u4E0D\u610F\u3002\u6B64\u5175\u5BB6\u4E4B\u52DD\uFF0C\u4E0D\u53EF\u5148\u50B3\u4E5F\u3002 \u592B\u672A\u6230\u800C\u5EDF\u7B97\u52DD\u8005\uFF0C\u5F97\u7B97\u591A\u4E5F\uFE54\u672A\u6230\u800C\u5EDF\u7B97\u4E0D\u52DD\u8005\uFF0C\u5F97\u7B97\u5C11\u4E5F\u3002\u591A\u7B97\u52DD\uFF0C\u5C11\u7B97\u4E0D \u52DD\uFF0C\u800C\u6CC1\u7121\u7B97\u4E4E\uFF01\u543E\u4EE5\u6B64\u89C0\u4E4B\uFF0C\u52DD\u8CA0\u898B\u77E3\u3002 ") +], -1); +const _hoisted_7 = [ + _hoisted_6 +]; +const _hoisted_8 = ["open"]; +const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", { class: "popup-body" }, [ + /* @__PURE__ */ createBaseVNode("h4", { class: "" }, "1.\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63"), + /* @__PURE__ */ createBaseVNode("p", null, " \u5B6B\u5B50\u66F0\uFF1A\u5175\u8005\uFF0C\u570B\u4E4B\u5927\u4E8B\uFF0C\u6B7B\u751F\u4E4B\u5730\uFF0C\u5B58\u4EA1\u4E4B\u9053\uFF0C\u4E0D\u53EF\u4E0D\u5BDF\u4E5F\u3002 \u6545\u7D93\u4E4B\u4EE5\u4E94\uFF0C\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\uFF1A\u4E00\u66F0\u9053\uFF0C\u4E8C\u66F0\u5929\uFF0C\u4E09\u66F0\u5730\uFF0C\u56DB\u66F0\u5C07\uFF0C\u4E94\u66F0\u6CD5 \u3002\u9053\u8005\uFF0C\u4EE4\u6C11\u4E8E\u4E0A\u540C\u610F\u8005\u4E5F\uFF0C\u53EF\u8207\u4E4B\u6B7B\uFF0C\u53EF\u8207\u4E4B\u751F\uFF0C\u6C11\u4E0D\u8A6D\u4E5F\u3002\u5929\u8005\uFF0C\u9670\u967D\u3001\u5BD2 \u6691\u3001\u6642\u5236\u4E5F\u3002\u5730\u8005\uFF0C\u9AD8\u4E0B\u3001\u9060\u8FD1\u3001\u96AA\u6613\u3001\u5EE3\u72F9\u3001\u6B7B\u751F\u4E5F\u3002\u5C07\u8005\uFF0C\u667A\u3001\u4FE1\u3001\u4EC1\u3001\u52C7 \u3001\u56B4\u4E5F\u3002\u6CD5\u8005\uFF0C\u66F2\u5236\u3001\u5B98\u9053\u3001\u4E3B\u7528\u4E5F\u3002\u51E1\u6B64\u4E94\u8005\uFF0C\u5C07\u83AB\u4E0D\u805E\uFF0C\u77E5\u4E4B\u8005\u52DD\uFF0C\u4E0D\u77E5\u4E4B \u8005\u4E0D\u52DD\u3002\u6545\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\u3002\u66F0\uFF1A\u4E3B\u5B70\u6709\u9053\uFF1F\u5C07\u5B70\u6709\u80FD\uFF1F\u5929\u5730\u5B70\u5F97\uFF1F\u6CD5\u4EE4\u5B70 \u884C\uFF1F\u5175\u773E\u5B70\u5F37\uFF1F\u58EB\u5352\u5B70\u7DF4\uFF1F\u8CDE\u7F70\u5B70\u660E\uFF1F\u543E\u4EE5\u6B64\u77E5\u52DD\u8CA0\u77E3\u3002 \u5C07\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u52DD\uFF0C\u7559\u4E4B\uFE54\u5C07\u4E0D\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u6557\uFF0C\u53BB\u4E4B\u3002 \u8A08\u5229\u4EE5\u807D\uFF0C\u4E43\u70BA\u4E4B\u52E2\uFF0C\u4EE5\u4F50\u5176\u5916\u3002\u52E2\u8005\uFF0C\u56E0\u5229\u800C\u5236\u6B0A\u4E5F\u3002 \u5175\u8005\uFF0C\u8A6D\u9053\u4E5F\u3002\u6545\u80FD\u800C\u793A\u4E4B\u4E0D\u80FD\uFF0C\u7528\u800C\u793A\u4E4B\u4E0D\u7528\uFF0C\u8FD1\u800C\u793A\u4E4B\u9060\uFF0C\u9060\u800C\u793A\u4E4B\u8FD1\u3002\u5229 \u800C\u8A98\u4E4B\uFF0C\u4E82\u800C\u53D6\u4E4B\uFF0C\u5BE6\u800C\u5099\u4E4B\uFF0C\u5F37\u800C\u907F\u4E4B\uFF0C\u6012\u800C\u6493\u4E4B\uFF0C\u5351\u800C\u9A55\u4E4B\uFF0C\u4F5A\u800C\u52DE\u4E4B\uFF0C\u89AA \u800C\u96E2\u4E4B\uFF0C\u653B\u5176\u4E0D\u5099\uFF0C\u51FA\u5176\u4E0D\u610F\u3002\u6B64\u5175\u5BB6\u4E4B\u52DD\uFF0C\u4E0D\u53EF\u5148\u50B3\u4E5F\u3002 \u592B\u672A\u6230\u800C\u5EDF\u7B97\u52DD\u8005\uFF0C\u5F97\u7B97\u591A\u4E5F\uFE54\u672A\u6230\u800C\u5EDF\u7B97\u4E0D\u52DD\u8005\uFF0C\u5F97\u7B97\u5C11\u4E5F\u3002\u591A\u7B97\u52DD\uFF0C\u5C11\u7B97\u4E0D \u52DD\uFF0C\u800C\u6CC1\u7121\u7B97\u4E4E\uFF01\u543E\u4EE5\u6B64\u89C0\u4E4B\uFF0C\u52DD\u8CA0\u898B\u77E3\u3002 \u5B6B\u5B50\u66F0\uFF1A\u5175\u8005\uFF0C\u570B\u4E4B\u5927\u4E8B\uFF0C\u6B7B\u751F\u4E4B\u5730\uFF0C\u5B58\u4EA1\u4E4B\u9053\uFF0C\u4E0D\u53EF\u4E0D\u5BDF\u4E5F\u3002 \u6545\u7D93\u4E4B\u4EE5\u4E94\uFF0C\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\uFF1A\u4E00\u66F0\u9053\uFF0C\u4E8C\u66F0\u5929\uFF0C\u4E09\u66F0\u5730\uFF0C\u56DB\u66F0\u5C07\uFF0C\u4E94\u66F0\u6CD5 \u3002\u9053\u8005\uFF0C\u4EE4\u6C11\u4E8E\u4E0A\u540C\u610F\u8005\u4E5F\uFF0C\u53EF\u8207\u4E4B\u6B7B\uFF0C\u53EF\u8207\u4E4B\u751F\uFF0C\u6C11\u4E0D\u8A6D\u4E5F\u3002\u5929\u8005\uFF0C\u9670\u967D\u3001\u5BD2 \u6691\u3001\u6642\u5236\u4E5F\u3002\u5730\u8005\uFF0C\u9AD8\u4E0B\u3001\u9060\u8FD1\u3001\u96AA\u6613\u3001\u5EE3\u72F9\u3001\u6B7B\u751F\u4E5F\u3002\u5C07\u8005\uFF0C\u667A\u3001\u4FE1\u3001\u4EC1\u3001\u52C7 \u3001\u56B4\u4E5F\u3002\u6CD5\u8005\uFF0C\u66F2\u5236\u3001\u5B98\u9053\u3001\u4E3B\u7528\u4E5F\u3002\u51E1\u6B64\u4E94\u8005\uFF0C\u5C07\u83AB\u4E0D\u805E\uFF0C\u77E5\u4E4B\u8005\u52DD\uFF0C\u4E0D\u77E5\u4E4B \u8005\u4E0D\u52DD\u3002\u6545\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\u3002\u66F0\uFF1A\u4E3B\u5B70\u6709\u9053\uFF1F\u5C07\u5B70\u6709\u80FD\uFF1F\u5929\u5730\u5B70\u5F97\uFF1F\u6CD5\u4EE4\u5B70 \u884C\uFF1F\u5175\u773E\u5B70\u5F37\uFF1F\u58EB\u5352\u5B70\u7DF4\uFF1F\u8CDE\u7F70\u5B70\u660E\uFF1F\u543E\u4EE5\u6B64\u77E5\u52DD\u8CA0\u77E3\u3002 \u5C07\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u52DD\uFF0C\u7559\u4E4B\uFE54\u5C07\u4E0D\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u6557\uFF0C\u53BB\u4E4B\u3002 \u8A08\u5229\u4EE5\u807D\uFF0C\u4E43\u70BA\u4E4B\u52E2\uFF0C\u4EE5\u4F50\u5176\u5916\u3002\u52E2\u8005\uFF0C\u56E0\u5229\u800C\u5236\u6B0A\u4E5F\u3002 \u5175\u8005\uFF0C\u8A6D\u9053\u4E5F\u3002\u6545\u80FD\u800C\u793A\u4E4B\u4E0D\u80FD\uFF0C\u7528\u800C\u793A\u4E4B\u4E0D\u7528\uFF0C\u8FD1\u800C\u793A\u4E4B\u9060\uFF0C\u9060\u800C\u793A\u4E4B\u8FD1\u3002\u5229 \u800C\u8A98\u4E4B\uFF0C\u4E82\u800C\u53D6\u4E4B\uFF0C\u5BE6\u800C\u5099\u4E4B\uFF0C\u5F37\u800C\u907F\u4E4B\uFF0C\u6012\u800C\u6493\u4E4B\uFF0C\u5351\u800C\u9A55\u4E4B\uFF0C\u4F5A\u800C\u52DE\u4E4B\uFF0C\u89AA \u800C\u96E2\u4E4B\uFF0C\u653B\u5176\u4E0D\u5099\uFF0C\u51FA\u5176\u4E0D\u610F\u3002\u6B64\u5175\u5BB6\u4E4B\u52DD\uFF0C\u4E0D\u53EF\u5148\u50B3\u4E5F\u3002 \u592B\u672A\u6230\u800C\u5EDF\u7B97\u52DD\u8005\uFF0C\u5F97\u7B97\u591A\u4E5F\uFE54\u672A\u6230\u800C\u5EDF\u7B97\u4E0D\u52DD\u8005\uFF0C\u5F97\u7B97\u5C11\u4E5F\u3002\u591A\u7B97\u52DD\uFF0C\u5C11\u7B97\u4E0D \u52DD\uFF0C\u800C\u6CC1\u7121\u7B97\u4E4E\uFF01\u543E\u4EE5\u6B64\u89C0\u4E4B\uFF0C\u52DD\u8CA0\u898B\u77E3\u3002 \u5B6B\u5B50\u66F0\uFF1A\u5175\u8005\uFF0C\u570B\u4E4B\u5927\u4E8B\uFF0C\u6B7B\u751F\u4E4B\u5730\uFF0C\u5B58\u4EA1\u4E4B\u9053\uFF0C\u4E0D\u53EF\u4E0D\u5BDF\u4E5F\u3002 \u6545\u7D93\u4E4B\u4EE5\u4E94\uFF0C\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\uFF1A\u4E00\u66F0\u9053\uFF0C\u4E8C\u66F0\u5929\uFF0C\u4E09\u66F0\u5730\uFF0C\u56DB\u66F0\u5C07\uFF0C\u4E94\u66F0\u6CD5 \u3002\u9053\u8005\uFF0C\u4EE4\u6C11\u4E8E\u4E0A\u540C\u610F\u8005\u4E5F\uFF0C\u53EF\u8207\u4E4B\u6B7B\uFF0C\u53EF\u8207\u4E4B\u751F\uFF0C\u6C11\u4E0D\u8A6D\u4E5F\u3002\u5929\u8005\uFF0C\u9670\u967D\u3001\u5BD2 \u6691\u3001\u6642\u5236\u4E5F\u3002\u5730\u8005\uFF0C\u9AD8\u4E0B\u3001\u9060\u8FD1\u3001\u96AA\u6613\u3001\u5EE3\u72F9\u3001\u6B7B\u751F\u4E5F\u3002\u5C07\u8005\uFF0C\u667A\u3001\u4FE1\u3001\u4EC1\u3001\u52C7 \u3001\u56B4\u4E5F\u3002\u6CD5\u8005\uFF0C\u66F2\u5236\u3001\u5B98\u9053\u3001\u4E3B\u7528\u4E5F\u3002\u51E1\u6B64\u4E94\u8005\uFF0C\u5C07\u83AB\u4E0D\u805E\uFF0C\u77E5\u4E4B\u8005\u52DD\uFF0C\u4E0D\u77E5\u4E4B \u8005\u4E0D\u52DD\u3002\u6545\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\u3002\u66F0\uFF1A\u4E3B\u5B70\u6709\u9053\uFF1F\u5C07\u5B70\u6709\u80FD\uFF1F\u5929\u5730\u5B70\u5F97\uFF1F\u6CD5\u4EE4\u5B70 \u884C\uFF1F\u5175\u773E\u5B70\u5F37\uFF1F\u58EB\u5352\u5B70\u7DF4\uFF1F\u8CDE\u7F70\u5B70\u660E\uFF1F\u543E\u4EE5\u6B64\u77E5\u52DD\u8CA0\u77E3\u3002 \u5C07\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u52DD\uFF0C\u7559\u4E4B\uFE54\u5C07\u4E0D\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u6557\uFF0C\u53BB\u4E4B\u3002 \u8A08\u5229\u4EE5\u807D\uFF0C\u4E43\u70BA\u4E4B\u52E2\uFF0C\u4EE5\u4F50\u5176\u5916\u3002\u52E2\u8005\uFF0C\u56E0\u5229\u800C\u5236\u6B0A\u4E5F\u3002 \u5175\u8005\uFF0C\u8A6D\u9053\u4E5F\u3002\u6545\u80FD\u800C\u793A\u4E4B\u4E0D\u80FD\uFF0C\u7528\u800C\u793A\u4E4B\u4E0D\u7528\uFF0C\u8FD1\u800C\u793A\u4E4B\u9060\uFF0C\u9060\u800C\u793A\u4E4B\u8FD1\u3002\u5229 \u800C\u8A98\u4E4B\uFF0C\u4E82\u800C\u53D6\u4E4B\uFF0C\u5BE6\u800C\u5099\u4E4B\uFF0C\u5F37\u800C\u907F\u4E4B\uFF0C\u6012\u800C\u6493\u4E4B\uFF0C\u5351\u800C\u9A55\u4E4B\uFF0C\u4F5A\u800C\u52DE\u4E4B\uFF0C\u89AA \u800C\u96E2\u4E4B\uFF0C\u653B\u5176\u4E0D\u5099\uFF0C\u51FA\u5176\u4E0D\u610F\u3002\u6B64\u5175\u5BB6\u4E4B\u52DD\uFF0C\u4E0D\u53EF\u5148\u50B3\u4E5F\u3002 \u592B\u672A\u6230\u800C\u5EDF\u7B97\u52DD\u8005\uFF0C\u5F97\u7B97\u591A\u4E5F\uFE54\u672A\u6230\u800C\u5EDF\u7B97\u4E0D\u52DD\u8005\uFF0C\u5F97\u7B97\u5C11\u4E5F\u3002\u591A\u7B97\u52DD\uFF0C\u5C11\u7B97\u4E0D \u52DD\uFF0C\u800C\u6CC1\u7121\u7B97\u4E4E\uFF01\u543E\u4EE5\u6B64\u89C0\u4E4B\uFF0C\u52DD\u8CA0\u898B\u77E3\u3002 ") +], -1); +const _hoisted_10 = [ + _hoisted_9 +]; +const _hoisted_11 = ["open"]; +const _hoisted_12 = /* @__PURE__ */ createBaseVNode("div", { + slot: "title", + style: { "margin": "20px" } +}, [ + /* @__PURE__ */ createBaseVNode("span", { style: { "color": "red" } }, "\u81EA\u5B9A\u4E49"), + /* @__PURE__ */ createTextVNode("\u5927\u6807\u9898\u6587\u6848 ") +], -1); +const _hoisted_13 = /* @__PURE__ */ createBaseVNode("div", { class: "popup-body" }, [ + /* @__PURE__ */ createBaseVNode("h4", { class: "" }, "1.\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63\u6B63"), + /* @__PURE__ */ createBaseVNode("p", null, " \u5B6B\u5B50\u66F0\uFF1A\u5175\u8005\uFF0C\u570B\u4E4B\u5927\u4E8B\uFF0C\u6B7B\u751F\u4E4B\u5730\uFF0C\u5B58\u4EA1\u4E4B\u9053\uFF0C\u4E0D\u53EF\u4E0D\u5BDF\u4E5F\u3002 \u6545\u7D93\u4E4B\u4EE5\u4E94\uFF0C\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\uFF1A\u4E00\u66F0\u9053\uFF0C\u4E8C\u66F0\u5929\uFF0C\u4E09\u66F0\u5730\uFF0C\u56DB\u66F0\u5C07\uFF0C\u4E94\u66F0\u6CD5 \u3002\u9053\u8005\uFF0C\u4EE4\u6C11\u4E8E\u4E0A\u540C\u610F\u8005\u4E5F\uFF0C\u53EF\u8207\u4E4B\u6B7B\uFF0C\u53EF\u8207\u4E4B\u751F\uFF0C\u6C11\u4E0D\u8A6D\u4E5F\u3002\u5929\u8005\uFF0C\u9670\u967D\u3001\u5BD2 \u6691\u3001\u6642\u5236\u4E5F\u3002\u5730\u8005\uFF0C\u9AD8\u4E0B\u3001\u9060\u8FD1\u3001\u96AA\u6613\u3001\u5EE3\u72F9\u3001\u6B7B\u751F\u4E5F\u3002\u5C07\u8005\uFF0C\u667A\u3001\u4FE1\u3001\u4EC1\u3001\u52C7 \u3001\u56B4\u4E5F\u3002\u6CD5\u8005\uFF0C\u66F2\u5236\u3001\u5B98\u9053\u3001\u4E3B\u7528\u4E5F\u3002\u51E1\u6B64\u4E94\u8005\uFF0C\u5C07\u83AB\u4E0D\u805E\uFF0C\u77E5\u4E4B\u8005\u52DD\uFF0C\u4E0D\u77E5\u4E4B \u8005\u4E0D\u52DD\u3002\u6545\u6821\u4E4B\u4EE5\u8A08\uFF0C\u800C\u7D22\u5176\u60C5\u3002\u66F0\uFF1A\u4E3B\u5B70\u6709\u9053\uFF1F\u5C07\u5B70\u6709\u80FD\uFF1F\u5929\u5730\u5B70\u5F97\uFF1F\u6CD5\u4EE4\u5B70 \u884C\uFF1F\u5175\u773E\u5B70\u5F37\uFF1F\u58EB\u5352\u5B70\u7DF4\uFF1F\u8CDE\u7F70\u5B70\u660E\uFF1F\u543E\u4EE5\u6B64\u77E5\u52DD\u8CA0\u77E3\u3002 \u5C07\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u52DD\uFF0C\u7559\u4E4B\uFE54\u5C07\u4E0D\u807D\u543E\u8A08\uFF0C\u7528\u4E4B\u5FC5\u6557\uFF0C\u53BB\u4E4B\u3002 \u8A08\u5229\u4EE5\u807D\uFF0C\u4E43\u70BA\u4E4B\u52E2\uFF0C\u4EE5\u4F50\u5176\u5916\u3002\u52E2\u8005\uFF0C\u56E0\u5229\u800C\u5236\u6B0A\u4E5F\u3002 \u5175\u8005\uFF0C\u8A6D\u9053\u4E5F\u3002\u6545\u80FD\u800C\u793A\u4E4B\u4E0D\u80FD\uFF0C\u7528\u800C\u793A\u4E4B\u4E0D\u7528\uFF0C\u8FD1\u800C\u793A\u4E4B\u9060\uFF0C\u9060\u800C\u793A\u4E4B\u8FD1\u3002\u5229 \u800C\u8A98\u4E4B\uFF0C\u4E82\u800C\u53D6\u4E4B\uFF0C\u5BE6\u800C\u5099\u4E4B\uFF0C\u5F37\u800C\u907F\u4E4B\uFF0C\u6012\u800C\u6493\u4E4B\uFF0C\u5351\u800C\u9A55\u4E4B\uFF0C\u4F5A\u800C\u52DE\u4E4B\uFF0C\u89AA \u800C\u96E2\u4E4B\uFF0C\u653B\u5176\u4E0D\u5099\uFF0C\u51FA\u5176\u4E0D\u610F\u3002\u6B64\u5175\u5BB6\u4E4B\u52DD\uFF0C\u4E0D\u53EF\u5148\u50B3\u4E5F\u3002 \u592B\u672A\u6230\u800C\u5EDF\u7B97\u52DD\u8005\uFF0C\u5F97\u7B97\u591A\u4E5F\uFE54\u672A\u6230\u800C\u5EDF\u7B97\u4E0D\u52DD\u8005\uFF0C\u5F97\u7B97\u5C11\u4E5F\u3002\u591A\u7B97\u52DD\uFF0C\u5C11\u7B97\u4E0D \u52DD\uFF0C\u800C\u6CC1\u7121\u7B97\u4E4E\uFF01\u543E\u4EE5\u6B64\u89C0\u4E4B\uFF0C\u52DD\u8CA0\u898B\u77E3\u3002 ") +], -1); +const _hoisted_14 = [ + _hoisted_12, + _hoisted_13 +]; +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-cell-group", null, [ + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[0] || (_cache[0] = ($event) => _ctx.open = true), + title: _ctx.translate("popupTitle") + }, null, 8, _hoisted_2), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[1] || (_cache[1] = ($event) => _ctx.open2 = true), + title: _ctx.translate("popupTitle2") + }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customTitle")), 1), + createBaseVNode("quark-cell", { + islink: "", + type: "primary", + onClick: _cache[2] || (_cache[2] = ($event) => _ctx.open3 = true), + title: _ctx.translate("customTitle") + }, null, 8, _hoisted_4), + createBaseVNode("quark-popupextra", { + title: "\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848", + open: _ctx.open, + onClose: _cache[3] || (_cache[3] = ($event) => _ctx.open = false) + }, _hoisted_7, 40, _hoisted_5), + createBaseVNode("quark-popupextra", { + title: "\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848\u5927\u6807\u9898\u6587\u6848", + subtitle: "\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848\u526F\u6807\u9898\u6587\u6848", + open: _ctx.open2, + safearea: "", + onClose: _cache[4] || (_cache[4] = ($event) => _ctx.open2 = false) + }, _hoisted_10, 40, _hoisted_8), + createBaseVNode("quark-popupextra", { + open: _ctx.open3, + onClose: _cache[5] || (_cache[5] = ($event) => _ctx.open3 = false) + }, _hoisted_14, 40, _hoisted_11) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/demo.f497ff90.js b/demo/assets/demo.f497ff90.js new file mode 100644 index 000000000..75f0573f2 --- /dev/null +++ b/demo/assets/demo.f497ff90.js @@ -0,0 +1,246 @@ +import { c as createComponent } from "./component.1f156d43.js"; +import { _ as _export_sfc, o as onBeforeMount, u as useTranslate, r as ref, g as onMounted, c as createElementBlock, a as createBaseVNode, t as toDisplayString, b as openBlock } from "./mobile.5b772776.js"; +var demo_scss_vue_type_style_index_0_src_lang = ""; +const { createDemo, translate } = createComponent("dropdownmenu"); +const _sfc_main = createDemo({ + props: {}, + setup() { + onBeforeMount(() => { + useTranslate({ + "zh-CN": { + basic: "\u57FA\u672C\u7528\u6CD5", + title: "\u7B5B\u9009", + title1: "\u5305\u90AE", + title2: "\u56E2\u8D2D", + confirm: "\u786E\u8BA4", + customContent: "\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9", + customColor: "\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u989C\u8272", + disabled: "\u7981\u7528\u83DC\u5355", + direction: "\u5411\u4E0A\u5C55\u5F00", + option1: [ + { text: "\u5168\u90E8\u5546\u54C1", value: "0" }, + { text: "\u65B0\u6B3E\u5546\u54C1", value: "1" }, + { text: "\u6D3B\u52A8\u5546\u54C1", value: "2" } + ], + option2: [ + { text: "\u9ED8\u8BA4\u6392\u5E8F", value: "a" }, + { text: "\u597D\u8BC4\u6392\u5E8F", value: "b" }, + { text: "\u9500\u91CF\u6392\u5E8F", value: "c" } + ], + swipeItems: "\u6A2A\u5411\u6EDA\u52A8" + }, + "en-US": { + basic: "Basic Usage", + title: "Title", + title1: "Title", + title2: "Title", + customContent: "Custom Content", + customColor: "Custom Active Color", + confirm: "Confirm", + disabled: "Disabled", + direction: "Expand Direction", + option1: [ + { text: "Option 0", value: "0" }, + { text: "Option 1", value: "1" }, + { text: "Option 2", value: "2" } + ], + option2: [ + { text: "Option A", value: "a" }, + { text: "Option B", value: "b" }, + { text: "Option C", value: "c" } + ], + swipeItems: "Swipe Items" + } + }); + }); + const value = ref(1); + const value1 = ref("0"); + const value2 = ref("a"); + const switch1 = ref(true); + const switch2 = ref(false); + const onSwitch1Change = (e) => { + switch1.value = e.detail.value; + }; + const onSwitch2Change = (e) => { + switch2.value = e.detail.value; + }; + const dropdownItemRef1 = ref(null); + const dropdownItemRef2 = ref(null); + const dropdownItemRef3 = ref(null); + const dropdownItemRef4 = ref(null); + const dropdownItemRef5 = ref(null); + const dropdownItemRef6 = ref(null); + const dropdownItemRef7 = ref(null); + const dropdownItemRef8 = ref(null); + const dropdownItemRef9 = ref(null); + const dropdownItemRef10 = ref(null); + const dropdownItemRef11 = ref(null); + const dropdownItemRef12 = ref(null); + onMounted(() => { + dropdownItemRef1.value.setOptions(translate("option1")); + dropdownItemRef2.value.setOptions(translate("option2")); + dropdownItemRef3.value.setOptions(translate("option1")); + dropdownItemRef5.value.setOptions(translate("option1")); + dropdownItemRef6.value.setOptions(translate("option2")); + dropdownItemRef7.value.setOptions(translate("option1")); + dropdownItemRef8.value.setOptions(translate("option2")); + dropdownItemRef9.value.setOptions(translate("option1")); + dropdownItemRef10.value.setOptions(translate("option2")); + dropdownItemRef11.value.setOptions(translate("option1")); + dropdownItemRef12.value.setOptions(translate("option2")); + }); + const onConfirm = () => { + dropdownItemRef4.value.toggle(); + }; + return { + translate, + value1, + value2, + value, + switch1, + switch2, + onConfirm, + onSwitch1Change, + onSwitch2Change, + dropdownItemRef1, + dropdownItemRef2, + dropdownItemRef3, + dropdownItemRef4, + dropdownItemRef5, + dropdownItemRef6, + dropdownItemRef7, + dropdownItemRef8, + dropdownItemRef9, + dropdownItemRef10, + dropdownItemRef11, + dropdownItemRef12 + }; + } +}); +const _hoisted_1 = { class: "demo no-padding action-sheet-demo" }; +const _hoisted_2 = ["value"]; +const _hoisted_3 = ["value"]; +const _hoisted_4 = { + ref: "dropdownItemRef3", + value: "0" +}; +const _hoisted_5 = ["title"]; +const _hoisted_6 = ["title"]; +const _hoisted_7 = ["checked"]; +const _hoisted_8 = ["title"]; +const _hoisted_9 = ["checked"]; +const _hoisted_10 = { style: { "padding": "5px 16px" } }; +const _hoisted_11 = { "active-color": "#f00" }; +const _hoisted_12 = ["value"]; +const _hoisted_13 = ["value"]; +const _hoisted_14 = ["value"]; +const _hoisted_15 = ["value"]; +const _hoisted_16 = { direction: "up" }; +const _hoisted_17 = { + ref: "dropdownItemRef9", + value: "0" +}; +const _hoisted_18 = { + ref: "dropdownItemRef10", + value: "a" +}; +const _hoisted_19 = { "swipe-threshold": 4 }; +const _hoisted_20 = { + ref: "dropdownItemRef11", + value: "0" +}; +const _hoisted_21 = { + ref: "dropdownItemRef12", + value: "a" +}; +const _hoisted_22 = /* @__PURE__ */ createBaseVNode("quark-dropdown-item", { disabled: "" }, null, -1); +const _hoisted_23 = /* @__PURE__ */ createBaseVNode("quark-dropdown-item", { disabled: "" }, null, -1); +const _hoisted_24 = /* @__PURE__ */ createBaseVNode("quark-dropdown-item", { disabled: "" }, null, -1); +const _hoisted_25 = /* @__PURE__ */ createBaseVNode("quark-dropdown-item", { disabled: "" }, null, -1); +function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createBaseVNode("h2", null, toDisplayString(_ctx.translate("basic")), 1), + createBaseVNode("quark-dropdown-menu", null, [ + createBaseVNode("quark-dropdown-item", { + ref: "dropdownItemRef1", + value: _ctx.value1 + }, null, 8, _hoisted_2), + createBaseVNode("quark-dropdown-item", { + ref: "dropdownItemRef2", + value: _ctx.value2 + }, null, 8, _hoisted_3) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customContent")), 1), + createBaseVNode("quark-dropdown-menu", null, [ + createBaseVNode("quark-dropdown-item", _hoisted_4, null, 512), + createBaseVNode("quark-dropdown-item", { + ref: "dropdownItemRef4", + title: _ctx.translate("title") + }, [ + createBaseVNode("quark-cell", { + title: _ctx.translate("title1") + }, [ + createBaseVNode("quark-switch", { + checked: _ctx.switch1, + onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onSwitch1Change && _ctx.onSwitch1Change(...args)) + }, null, 40, _hoisted_7) + ], 8, _hoisted_6), + createBaseVNode("quark-cell", { + title: _ctx.translate("title2") + }, [ + createBaseVNode("quark-switch", { + checked: _ctx.switch2, + onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onSwitch2Change && _ctx.onSwitch2Change(...args)) + }, null, 40, _hoisted_9) + ], 8, _hoisted_8), + createBaseVNode("div", _hoisted_10, [ + createBaseVNode("quark-button", { + type: "primary", + size: "big", + onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onConfirm && _ctx.onConfirm(...args)) + }, toDisplayString(_ctx.translate("confirm")), 1) + ]) + ], 8, _hoisted_5) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("customColor")), 1), + createBaseVNode("quark-dropdown-menu", _hoisted_11, [ + createBaseVNode("quark-dropdown-item", { + ref: "dropdownItemRef5", + value: _ctx.value1 + }, null, 8, _hoisted_12), + createBaseVNode("quark-dropdown-item", { + ref: "dropdownItemRef6", + value: _ctx.value2 + }, null, 8, _hoisted_13) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("disabled")), 1), + createBaseVNode("quark-dropdown-menu", null, [ + createBaseVNode("quark-dropdown-item", { + disabled: "", + value: _ctx.value1, + ref: "dropdownItemRef7" + }, null, 8, _hoisted_14), + createBaseVNode("quark-dropdown-item", { + disabled: "", + value: _ctx.value2, + ref: "dropdownItemRef8" + }, null, 8, _hoisted_15) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("direction")), 1), + createBaseVNode("quark-dropdown-menu", _hoisted_16, [ + createBaseVNode("quark-dropdown-item", _hoisted_17, null, 512), + createBaseVNode("quark-dropdown-item", _hoisted_18, null, 512) + ]), + createBaseVNode("h2", null, toDisplayString(_ctx.translate("swipeItems")), 1), + createBaseVNode("quark-dropdown-menu", _hoisted_19, [ + createBaseVNode("quark-dropdown-item", _hoisted_20, null, 512), + createBaseVNode("quark-dropdown-item", _hoisted_21, null, 512), + _hoisted_22, + _hoisted_23, + _hoisted_24, + _hoisted_25 + ]) + ]); +} +var demo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); +export { demo as default }; diff --git a/demo/assets/index-legacy.378a587f.js b/demo/assets/index-legacy.378a587f.js new file mode 100644 index 000000000..1f26f2ec8 --- /dev/null +++ b/demo/assets/index-legacy.378a587f.js @@ -0,0 +1 @@ +;(function(){System.register(['./mobile-legacy.4d4580ba.js'],function(){'use strict';var f,r,w,s,M,h,d,a$1;return{setters:[function(module){f=module.s;r=module.x;w=module.y;s=module.z;M=module.M;h=module.B;d=module.C;a$1=module.D;}],execute:function(){function a(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$1(this,i);};}var u=function(t){f(s$1,t);var e=a(s$1);function s$1(){var t;return r(this,s$1),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s(s$1,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s$1;}(h(HTMLElement));customElements.get("quark-icon-user")||customElements.define("quark-icon-user",u);}};});})(); diff --git a/demo/assets/index-legacy.d9d5991e.js b/demo/assets/index-legacy.d9d5991e.js new file mode 100644 index 000000000..0bfa084f4 --- /dev/null +++ b/demo/assets/index-legacy.d9d5991e.js @@ -0,0 +1 @@ +;(function(){System.register(['./mobile-legacy.4d4580ba.js'],function(){'use strict';var f,r,w,s,M,h,d,a$1;return{setters:[function(module){f=module.s;r=module.x;w=module.y;s=module.z;M=module.M;h=module.B;d=module.C;a$1=module.D;}],execute:function(){function a(n){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var i,r=d(n);if(o){var c=d(this).constructor;i=Reflect.construct(r,arguments,c);}else i=r.apply(this,arguments);return a$1(this,i);};}var u$1=function(t){f(s$1,t);var e=a(s$1);function s$1(){var t;return r(this,s$1),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s(s$1,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s$1;}(h(HTMLElement));customElements.get("quark-icon-home")||customElements.define("quark-icon-home",u$1);function l(n){var c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0;}catch(t){return!1;}}();return function(){var o,i=d(n);if(c){var r=d(this).constructor;o=Reflect.construct(i,arguments,r);}else o=i.apply(this,arguments);return a$1(this,o);};}var u=function(t){f(s$1,t);var e=l(s$1);function s$1(){var t;return r(this,s$1),(t=e.call(this)).attachShadow({mode:"open"}).innerHTML="\n \n \n "),t.icon=t.shadowRoot.getElementById("icon"),t;}return s(s$1,[{key:"connectedCallback",value:function(){this.upgradeProperty();}},{key:"attributeChangedCallback",value:function(t,e,n){if("color"===t)this.icon.style.color=n;else if("size"===t){var c=this.getFontSize();this.icon.style.fontSize="".concat(c);}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color;}},{key:"getFontSize",value:function(){return M(this.size);}},{key:"size",get:function(){return this.getAttribute("size");},set:function(t){this.setAttribute("size",t);}},{key:"color",get:function(){return this.getAttribute("color");},set:function(t){this.setAttribute("color",t);}}],[{key:"observedAttributes",get:function(){return["size","color"];}}]),s$1;}(h(HTMLElement));customElements.get("quark-icon-tel")||customElements.define("quark-icon-tel",u);}};});})(); diff --git a/demo/assets/index.63eaed99.js b/demo/assets/index.63eaed99.js new file mode 100644 index 000000000..81924c51e --- /dev/null +++ b/demo/assets/index.63eaed99.js @@ -0,0 +1,84 @@ +import { s as f, x as r, y as w, z as s, M, B as h, C as d, D as a$1 } from "./mobile.5b772776.js"; +function a(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$1(this, i); + }; +} +var u = function(t) { + f(s$1, t); + var e = a(s$1); + function s$1() { + var t2; + return r(this, s$1), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s(s$1, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s$1; +}(h(HTMLElement)); +customElements.get("quark-icon-user") || customElements.define("quark-icon-user", u); diff --git a/demo/assets/index.9e48a87d.js b/demo/assets/index.9e48a87d.js new file mode 100644 index 000000000..cbdae5571 --- /dev/null +++ b/demo/assets/index.9e48a87d.js @@ -0,0 +1,167 @@ +import { s as f, x as r, y as w, z as s, M, B as h, C as d, D as a$1 } from "./mobile.5b772776.js"; +function a(n) { + var o = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var i, r2 = d(n); + if (o) { + var c = d(this).constructor; + i = Reflect.construct(r2, arguments, c); + } else + i = r2.apply(this, arguments); + return a$1(this, i); + }; +} +var u$1 = function(t) { + f(s$1, t); + var e = a(s$1); + function s$1() { + var t2; + return r(this, s$1), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s(s$1, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var o = this.getFontSize(); + this.icon.style.fontSize = "".concat(o); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s$1; +}(h(HTMLElement)); +customElements.get("quark-icon-home") || customElements.define("quark-icon-home", u$1); +function l(n) { + var c = function() { + if ("undefined" == typeof Reflect || !Reflect.construct) + return false; + if (Reflect.construct.sham) + return false; + if ("function" == typeof Proxy) + return true; + try { + return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() { + })), true; + } catch (t) { + return false; + } + }(); + return function() { + var o, i = d(n); + if (c) { + var r2 = d(this).constructor; + o = Reflect.construct(i, arguments, r2); + } else + o = i.apply(this, arguments); + return a$1(this, o); + }; +} +var u = function(t) { + f(s$1, t); + var e = l(s$1); + function s$1() { + var t2; + return r(this, s$1), (t2 = e.call(this)).attachShadow({ + mode: "open" + }).innerHTML = "\n \n \n "), t2.icon = t2.shadowRoot.getElementById("icon"), t2; + } + return s(s$1, [{ + key: "connectedCallback", + value: function() { + this.upgradeProperty(); + } + }, { + key: "attributeChangedCallback", + value: function(t2, e2, n) { + if ("color" === t2) + this.icon.style.color = n; + else if ("size" === t2) { + var c = this.getFontSize(); + this.icon.style.fontSize = "".concat(c); + } + } + }, { + key: "upgradeProperty", + value: function() { + this.size = this.size, this.color = this.color; + } + }, { + key: "getFontSize", + value: function() { + return M(this.size); + } + }, { + key: "size", + get: function() { + return this.getAttribute("size"); + }, + set: function(t2) { + this.setAttribute("size", t2); + } + }, { + key: "color", + get: function() { + return this.getAttribute("color"); + }, + set: function(t2) { + this.setAttribute("color", t2); + } + }], [{ + key: "observedAttributes", + get: function() { + return ["size", "color"]; + } + }]), s$1; +}(h(HTMLElement)); +customElements.get("quark-icon-tel") || customElements.define("quark-icon-tel", u); diff --git a/demo/assets/mobile-legacy.4d4580ba.js b/demo/assets/mobile-legacy.4d4580ba.js new file mode 100644 index 000000000..719f065c9 --- /dev/null +++ b/demo/assets/mobile-legacy.4d4580ba.js @@ -0,0 +1,1505 @@ +;(function(){var __vite_style__=document.createElement('style');__vite_style__.innerHTML="#app {\n background: #fff;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n}\n#app #nav {\n position: fixed;\n z-index: 9999;\n left: 0;\n right: 0;\n height: 57px;\n line-height: 57px;\n text-align: center;\n background: #fff;\n font-weight: bold;\n font-size: 20px;\n color: rgb(51, 51, 51);\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);\n}\n#app #nav .back {\n position: absolute;\n left: 0;\n height: 100%;\n width: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n#app .demo {\n height: 100vh;\n background: #f5f5f9;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 70px 18px;\n min-height: 668px;\n}\n#app .demo.no-padding {\n padding: 57px 0 70px 0;\n}\n#app .demo.no-padding h2 {\n padding-left: 27px;\n}\n#app .demo.bg-w {\n background: #fff;\n}\n#app .demo::-webkit-scrollbar {\n width: 0;\n background: transparent;\n}\n#app .demo > h2 {\n margin-top: 30px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #909ca4;\n padding: 0 10px;\n font-weight: normal;\n}\n#app .demo > p {\n font-size: 12px;\n}\n#app .demo .card {\n padding: 25px 18px;\n background: rgb(255, 255, 255);\n}\n.vue-logo {\n position: absolute;\n z-index: 0;\n width: 50px;\n right: 0;\n}.index[data-v-8ec23a9e] {\n height: 100%;\n width: 100%;\n}\n.index-header[data-v-8ec23a9e] {\n display: flex;\n align-items: center;\n padding: 0 34px;\n height: 100px;\n}\n.index-header > img[data-v-8ec23a9e] {\n width: 67px;\n height: 67px;\n margin-right: 18px;\n flex-shrink: 0;\n}\n.index-header .info[data-v-8ec23a9e] {\n display: flex;\n flex-direction: column;\n}\n.index-header .info h1[data-v-8ec23a9e] {\n height: 48px;\n line-height: 48px;\n font-size: 34px;\n color: rgb(51, 51, 51);\n}\n.index-header .info p[data-v-8ec23a9e] {\n height: 18px;\n line-height: 18px;\n font-size: 12px;\n color: rgb(154, 155, 157);\n}\n.index-components[data-v-8ec23a9e] {\n background: #f7f8fa;\n border-radius: 30px 30px 0 0;\n overflow: hidden;\n padding: 16px 25px 20px;\n}\n.index-components > ol[data-v-8ec23a9e] {\n margin-bottom: 14px;\n}\n.index-components > ol > li[data-v-8ec23a9e] {\n line-height: 20px;\n font-size: 14px;\n color: rgb(144, 156, 164);\n margin-bottom: 10px;\n}\n.index-components > ol > ul li[data-v-8ec23a9e] {\n display: flex;\n align-items: center;\n padding: 0 24px;\n width: 100%;\n height: 42px;\n line-height: 42px;\n background: rgb(255, 255, 255);\n border-radius: 22px;\n box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.06);\n margin-bottom: 12px;\n}\n.index-components > ol > ul li a[data-v-8ec23a9e] {\n width: 100%;\n height: 100%;\n font-size: 15px;\n font-weight: bold;\n display: block;\n color: rgb(51, 51, 51);\n}body {\n margin: 0;\n padding: 0;\n}\n\nol,\nul {\n list-style: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\np {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n cursor: pointer;\n}\n\nhtml,\nbody,\na,\nbutton,\ninput {\n outline: 0 none;\n border: 0;\n text-decoration: none;\n}\n\nimg {\n border: 0 none;\n vertical-align: bottom;\n interpolation-mode: bicubic;\n}\n\nhtml,\nbody {\n min-height: 100vh;\n flex-direction: column;\n display: flex;\n}\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n border: 0 none;\n vertical-align: bottom;\n}\n\n::selection {\n background: var(--brand-color);\n}\n\na {\n color: #4c4c52;\n transition: all 0.25s;\n}\n\na:hover {\n color: var(--brand-color);\n transition: all 0.25s;\n}\n\nsvg {\n fill: currentColor;\n}:host {\n font-size: 30px;\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([vertical]) {\n font-size: 30px;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-loading-spinner {\n display: block;\n fill: currentcolor;\n overflow: hidden;\n width: 1em;\n height: 1em;\n margin: auto;\n color: #c8c9cc;\n}\n\n:host .quark-loading-text {\n text-indent: 8px;\n color: var(--loading-text-color, #969799);\n font-size: var(--loading-text-font-size, 14px);\n}\n\n:host([vertical]) .quark-loading-text {\n margin-left: 0;\n margin-top: 8px;\n text-indent: 0;\n}\n\n:host slot:empty .quark-loading-text {\n font-size: 0;\n margin: 0;\n}\n:host {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n height: var(--button-height, 32px);\n line-height: var(--button-height, 32px);\n text-align: center;\n border-radius: var(--button-border-radius, 16px);\n padding-left: var(--button-hspacing, 12px);\n padding-right: var(--button-hspacing, 12px);\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n:host .quark-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n border-radius: var(--button-border-radius, 16px);\n cursor: unset;\n -webkit-tap-highlight-color: transparent;\n}\n\n/* :host([shape=\"round\"]) {\n border-radius: var(--button-height, 32px);\n} */\n\n:host(:not([size])) {\n font-size: var(--button-font-size, 14px);\n}\n\n:host([size=\"small\"]) {\n height: var(--button-height, 24px);\n line-height: var(--button-height, 24px);\n font-size: var(--button-font-size, 12px);\n}\n\n:host([size=\"big\"]) {\n height: var(--button-height, 40px);\n line-height: var(--button-height, 40px);\n font-size: var(--button-font-size, 16px);\n border-radius: var(--button-big-border-radius, 8px);\n width: 100%;\n}\n\n:host([size=\"large\"]) {\n height: var(--button-height, 48px);\n line-height: var(--button-height, 48px);\n font-size: var(--button-font-size, 18px);\n border-radius: var(--button-big-border-radius, 8px);\n width: 100%;\n}\n\n:host([shape=\"square\"]) {\n border-radius: 0;\n}\n\n:host(:not([type])) {\n color: var(--button-color, #5A6066);\n border: 1px solid #E1E6EB;\n}\n\n:host([type=\"primary\"]) {\n color: var(--button-color, #fff);\n background: var(--quark-theme-color, #0088ff);\n}\n\n:host([type=\"warning\"]) {\n color: var(--button-color, #fff);\n background: var(--quark-warning-color, #FB990F);\n}\n\n:host([type=\"danger\"]) {\n color: var(--button-color, #fff);\n background: var(--quark-danger-color, #F72626);\n}\n\n:host([type=\"success\"]) {\n color: var(--button-color, #fff);\n background: var(--quark-success-color, #07C160);\n}\n\n:host([plain]) {\n border: 1px solid;\n}\n\n:host([plain][type=\"primary\"]) {\n color: var(--button-color, #0088ff);\n border-color: var(--quark-theme-color, #7FC3FF);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type=\"warning\"]) {\n color: var(--button-color, #FB990F);\n border-color: var(--quark-warning-color, #FCCC87);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type=\"danger\"]) {\n color: var(--button-color, #F72626);\n border-color: var(--quark-danger-color, #FB9292);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type=\"success\"]) {\n color: var(--button-color, #07C160);\n border-color: var(--quark-success-color, #83E0AF);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([light]) {\n background: var(--quark-light-color, #E1E6EB);\n}\n\n:host([light][type=\"primary\"]) {\n background: var(--quark-primary-light-color, #E6F4FF);\n color: var(--button-color, #0088ff);\n}\n\n:host([light][type=\"warning\"]) {\n background: var(--quark-warning-light-color, #FEF4E7);\n color: var(--button-color, #FB990F);\n}\n\n:host([light][type=\"danger\"]) {\n background: var(--quark-danger-light-color, #FEE9E9);\n color: var(--button-color, #F72626);\n}\n\n:host([light][type=\"success\"]) {\n background: var(--quark-success-light-color, #E6F8EF);\n color: var(--button-color, #07C160);\n}\n\n:host([loading]) {\n cursor: not-allowed;\n user-select: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n /* opacity: 0.68; */\n user-select: none;\n color: #BCC4CC;\n}\n\n:host([disabled][type]) {\n background: #D3DAE0;\n color: #fff;\n}\n\n:host(:active) .quark-button::before {\n opacity: 0.05;\n}\n\n:host([disabled]) .quark-button::before,\n:host([loading]) .quark-button::before {\n display: none;\n}\n\n:host .quark-button::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n background-color: #000;\n border: inherit;\n border-color: #000;\n border-radius: inherit;\n transform: translate(-50%, -50%);\n opacity: 0;\n content: \"\";\n}\n\n.quark-button:not([disabled]):active::after {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0.05;\n transition: 0s;\n}\n\n:host .quark-button-load {\n margin-right: var(--button-icon-hspacing, 6px);\n}\n\n:host .quark-button-icon {\n width: var(--button-icon-size, 1em);\n height: auto;\n margin-right: var(--button-icon-hspacing, 5px);\n}\n:host {\n font-size: inherit;\n display: inline-block;\n transition: 0.3s;\n}\n\n:host .quark-icon-svg {\n display: block;\n width: 1em;\n height: 1em;\n margin: auto;\n fill: currentColor;\n overflow: hidden;\n}\n:host {\n display: flex;\n transition: .3s;\n}\n\n:host quark-overlay {\n background-color: transparent;\n}\n\n:host .quark-toast {\n opacity: 0;\n font-size: var(--toast-font-size, 14px);\n padding: var(--toast-padding, 0);\n box-sizing: border-box;\n display: flex;\n flex-direction: var(--toast-direction, column);\n align-items: center;\n justify-content: center;\n color: var(--toast-color, #fff);\n background: rgb(0 0 0 / 80%);\n border-radius: 12px;\n box-shadow: 0 4px 12px rgb(0 0 0 / 15%);\n pointer-events: all;\n width: var(--toast-width, 120px);\n height: var(--toast-height, 120px);\n text-align: center;\n transition: opacity var(--toast-transition-fade-in, 0.3s) ease-in;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n:host([position=\"top\"]) .quark-toast {\n top: var(--toast-position-top-distance, 20%);\n}\n:host([position=\"bottom\"]) .quark-toast {\n top: var(--toast-position-top-distance, 80%);\n}\n:host .quark-toast--horizontal {\n flex-direction: row;\n padding: var(--toast-text-padding, 16px 20px);\n width: max-content;\n height: auto;\n min-width: var(--toast-min-width, 120px);\n max-width: var(--toast-max-width, 240px);\n}\n\n:host([show]) .quark-toast {\n opacity: 1;\n}\n\n:host([type=\"text\"]) .quark-toast {\n padding: var(--toast-text-padding, 16px 20px);\n width: max-content;\n height: auto;\n min-width: var(--toast-min-width, 120px);\n max-width: var(--toast-max-width, 240px);\n}\n\nquark-icon-whitesuccess-o,\nquark-icon-whiteerror-o,\nquark-icon-whitewarning-o {\n margin-bottom: 14px;\n}\n\n:host quark-loading {\n display: block;\n margin-right: var(--toast-loading-right, 0);\n margin-bottom: var(--toast-loading-bottom, 14px);\n}\n:host([type=\"loading\"]) .quark-toast--horizontal quark-loading {\n margin-bottom: var(--toast-loading-bottom) !important;\n margin-right: var(--toast-loading-right, 18px) !important;\n}\n\n:host([show][type=\"loading\"]) quark-loading {\n opacity: 1;\n display: block;\n}\n\n:host([show][type=\"loading\"]) .quark-toast--horizontal quark-loading {\n opacity: 1;\n display: block;\n}\n\n:host(:not([type=\"text\"])) quark-icon-whitesuccess-o,\n:host(:not([type=\"text\"])) quark-icon-whiteerror-o,\n:host(:not([type=\"text\"])) quark-icon-whitewarning-o {\n margin-bottom: 9px;\n}\n\n:host .quark-toast-leave {\n opacity: 0;\n transition: opacity var(--toast-transition-fade-out, 0.3s) ease-out;\n}\n:host .quark-loading-leave {\n opacity: 0;\n transition: opacity var(--toast-transition-fade-out, 0.4s) ease-out;\n}:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: var(--overlay-background, rgba(0, 0, 0, 0.7));\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: var(--overlay-z-index, 999);\n visibility: visible;\n}\n\n:host .quark-overlay-mask {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: transparent;\n z-index: -1;\n}\n\n:host .quark-overlay {\n position: relative;\n margin: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n:host {\n font-size: 18px;\n height: 44px;\n position: relative;\n display: flex;\n align-items: center;\n color: #242729;\n text-align: center;\n width: 100%;\n background-color: white;\n user-select: none;\n}\n\n:host([safearea]) {\n padding-top: constant(safe-area-inset-top);\n padding-top: env(safe-area-inset-top);\n}\n\n:host .quark-navbar-left {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n cursor: pointer;\n position: absolute;\n left: var(--navbar-left-padding, 16px);\n}\n\n:host .quark-navbar-title {\n width: 100%;\n overflow: inherit;\n font-weight: var(--navbar-title-font-weight, 600);\n color: var(--navbar-title-color, inherit);\n}\n\n:host .quark-navbar-right {\n display: flex;\n align-items: center;\n cursor: pointer;\n position: absolute;\n font-weight: var(--navbar-right-font-weight, 400);\n font-size: var(--navbar-right-font-size, 16px);\n color: var(--navbar-right-color, #242729);\n right: var(--navbar-right-padding, 16px);\n}\n\n:host .back:active, .close:active, .quark-navbar-right:active {\n opacity: 0.5;\n} \n\n:host quark-icon-close {\n position: absolute;\n left: var(--navbar-close-left, 40px);\n}\n:host {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n}\n\nlabel {\n cursor: pointer;\n display: flex;\n width: var(--switch-label-width, 3.125em);\n height: 1.875em;\n padding: 0.0625em;\n border-radius: 1.2em;\n background: var(--switch-inactive-color, #e1e6eb);\n transition: 0.3s width, 0.3s height, 0.3s background-color;\n box-sizing: border-box;\n}\n\n:host([disabled]),\n:host([loading]) {\n pointer-events: none;\n}\n\n:host([disabled]) {\n opacity: 0.6;\n}\n\n:host([disabled]) label,\n:host([loading]) label {\n pointer-events: all;\n cursor: not-allowed;\n}\n\n.quark-switch {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n}\n\nlabel::after {\n content: \"\";\n width: 1.75em;\n height: 1.75em;\n border-radius: 1em;\n background: #fff;\n transition: 0.3s background, 0.3s padding, 0.3s width, 0.3s height,\n 0.3s border-radius, 0.3s border;\n box-shadow: 0 0.125em 0.25em 0 rgb(0 35 11 / 20%);\n}\n\n.quark-switch-loading label::after {\n display: none;\n}\n\n.quark-switch-loading-wrapper {\n width: 1.75em;\n height: 1.75em;\n border-radius: 1em;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(:focus-within) #switch,\n:host(:active) .quark-switch {\n z-index: 2;\n}\n\nlabel::before {\n content: \"\";\n flex: 0;\n transition: 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) flex;\n}\n\nlabel:active::after {\n padding: 0 0.3em;\n}\n\n:host([checked]) label {\n background: var(--theme-color, var(--switch-active-color, #08f));\n}\n\n:host([checked]) label::before {\n flex: 1;\n}\n:host {\n display: inline-flex;\n}\n\n:host .quark-tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--tag-border-radius, 4px);\n padding-left: var(--tag-hspacing, 4px);\n padding-right: var(--tag-hspacing, 4px);\n /* padding-top: var(--tag-vspacing, 2px); */\n /* padding-bottom: var(--tag-vspacing, 2px); */\n font-size: var(--tag-font-size, 11px);\n line-height: var(--tag-line-height, 16px);\n font-weight: var(--tag-font-weight, 400);\n font-family: var(--tag-font-family, PingFangSC-Regular, PingFang SC);\n color: var(--tag-text-color, #fff);\n background: var(--tag-background, #0088ff);\n width: auto;\n height: auto;\n}\n\n:host([round]) .quark-tag {\n border-radius: 999px;\n}\n\n:host([size=\"large\"]) .quark-tag {\n padding-left: var(--tag-hspacing, 6px);\n padding-right: var(--tag-hspacing, 6px);\n /* padding-top: var(--tag-vspacing, 2px); */\n /* padding-bottom: var(--tag-vspacing, 2px); */\n font-size: var(--tag-font-size, 14px);\n line-height: var(--tag-line-height, 24px);\n font-weight: var(--tag-font-weight, 500);\n font-family: var(--tag-font-family, PingFangSC-Medium, PingFang SC);\n}\n\n:host([type=\"primary\"]) .quark-tag {\n background: var(--quark-theme-color, #0088ff);\n}\n\n:host([type=\"warning\"]) .quark-tag {\n background: var(--quark-warning-color, #FB990F);\n}\n\n:host([type=\"danger\"]) .quark-tag {\n background: var(--quark-danger-color, #F72626);\n}\n\n:host([type=\"success\"]) .quark-tag {\n background: var(--quark-success-color, #07C160);\n}\n\n:host([plain]) .quark-tag {\n background: white;\n /* border: 0.5px solid; */\n /* border-color: var(--tag-border-color, #0088ff); */\n outline: 0.5px solid;\n outline-color: var(--tag-border-color, --tag-text-color);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([plain][type=\"primary\"]) .quark-tag {\n border-color: var(--tag-border-color, #b2dbff);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([plain][type=\"warning\"]) .quark-tag {\n border-color: var(--tag-border-color, #fde0b7);\n color: var(--tag-text-color, #FB990F);\n}\n\n:host([plain][type=\"danger\"]) .quark-tag {\n border-color: var(--tag-border-color, #fcbdbd);\n color: var(--tag-text-color, #F72626);\n}\n\n:host([plain][type=\"success\"]) .quark-tag {\n border-color: var(--tag-border-color, #b4eccf);\n color: var(--tag-text-color, #07C160);\n}\n\n:host([light]) .quark-tag {\n color: var(--tag-text-color, #0088ff);\n background: var(--quark-primary-light-color, #E6F4FF);\n}\n\n:host([light][type=\"primary\"]) .quark-tag {\n background: var(--quark-primary-light-color, #E6F4FF);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([light][type=\"warning\"]) .quark-tag {\n background: var(--quark-warning-light-color, #FEF4E7);\n color: var(--tag-text-color, #FB990F);\n}\n\n:host([light][type=\"danger\"]) .quark-tag {\n background: var(--quark-danger-light-color, #FEE9E9);\n color: var(--tag-text-color, #F72626);\n}\n\n:host([light][type=\"success\"]) .quark-tag {\n background: var(--quark-success-light-color, #E6F8EF);\n color: var(--tag-text-color, #07C160);\n}\n:host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-badge {\n display: flex;\n}\n\n:host .quark-badge-dealclass {\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--badge-font-size, 10px);\n line-height: var(--badge-line-height, 14px);\n border-radius: 999px;\n padding: var(--badge-padding-column, 0px) var(--badge-padding-row, 4px);\n /* min-width: 14px; */\n font-weight: var(--badge-font-weight, 500);\n color: var(--badge-text-color, #fff);\n background: var(--badge-background, #F72626);\n font-family: var(--badge-font-family);\n box-sizing: border-box;\n}\n\n:host .quark-badge-fixed {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n z-index: 1;\n}\n\n:host([type=\"dot\"]) .quark-badge-dealclass {\n height: var(--badge-dot-size, 8px);\n width: var(--badge-dot-size, 8px);\n border-radius: 50%;\n min-width: 0;\n padding: 0;\n}\n\n:host .quark-badge-dealclass.quark-badge-hide {\n display: none;\n}\n\n:host([type=\"label\"]) .quark-badge-dealclass {\n font-size: var(--badge-font-size, 11px);\n line-height: var(--badge-line-height, 12px);\n padding: var(--badge-padding-column, 2px) var(--badge-padding-row, 4px);\n border-radius: 999px 999px 999px 1px;\n font-weight: 400;\n}\n\n:host([size=\"big\"]) .quark-badge-dealclass {\n padding: var(--badge-padding-column, 4px) var(--badge-padding-row, 6px);\n font-size: var(--badge-font-size, 12px);\n line-height: var(--badge-line-height, 12px);\n min-width: 20px;\n font-weight: 500;\n}\n\n:host([border]) .quark-badge-dealclass {\n border: 1px solid var(--badge-border-color, #fff);\n}\n\n:host([size=\"big\"][type=\"dot\"]) .quark-badge-dealclass {\n height: var(--badge-dot-size, 10px);\n width: var(--badge-dot-size, 10px);\n min-width: 0;\n padding: 0;\n}:host {\n font-size: var(--checkbox-font-size, 16px);\n color: var(--checkbox-color, #242729);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n}\n\n:host([disabled]) * {\n cursor: not-allowed;\n}\n\n:host .quark-checkbox-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host label {\n margin-left: 4px;\n height: var(--checkbox-label-height, 100%);\n display: inline-flex;\n align-items: center;\n}\n\n:host label.quark-checkbox-hide {\n display: none;\n}\n\n:host .quark-checkbox {\n position: relative;\n display: inline-flex;\n height: var(--checkbox-size, 16px);\n width: var(--checkbox-size, 16px);\n flex-shrink: 0;\n}\n\n:host .quark-checkbox-icon {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n /* z-index: 1; */\n visibility: hidden;\n opacity: 0;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host([size=\"big\"]) .quark-checkbox {\n height: var(--checkbox-size, 20px);\n width: var(--checkbox-size, 20px);\n}\n\n:host .quark-checkbox input {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n\n:host .quark-checkbox span {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host .quark-checkbox .quark-checkbox-show {\n background: #ffffff;\n border: 0.5px solid #bcc4cc;\n border-radius: 50%;\n}\n\n:host([disabled]) .quark-checkbox .quark-checkbox-show {\n background: #f0f3f5;\n}\n\n:host .quark-checkbox .quark-checkbox-disabled {\n display: none;\n}\n\n:host([disabled][checked]) .quark-checkbox .quark-checkbox-disabled {\n display: block;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 50%;\n z-index: 3;\n}\n\n:host([shape=\"square\"]) .quark-checkbox .quark-checkbox-show {\n border-radius: 4px;\n}\n\n:host([disabled][checked][shape=\"square\"])\n .quark-checkbox\n .quark-checkbox-disabled {\n border-radius: 4px;\n}\n\n:host([shape=\"square\"][size=\"big\"]) .quark-checkbox span {\n border-radius: 5px;\n}\n\n:host([checked]) .quark-checkbox .quark-checkbox-show {\n border: none;\n background: var(--checkbox-background, #0088ff);\n}\n\n:host([checked]) .quark-checkbox-icon {\n visibility: visible;\n opacity: 1;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host input[type=\"checkbox\"i] {\n margin: 0;\n}\n\n:host .quark-checkbox-group-wrapper {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\nquark-checkbox-group quark-checkbox {\n margin-right: var(--checkbox-group-margin, 5px);\n}\n\nquark-checkbox-group quark-checkbox:last-child {\n margin-right: 0;\n}:host {\n display: block;\n font-size: 14px;\n position: relative;\n background: #fff;\n}\n\n:host .quark-cell {\n position: relative;\n display: flex;\n width: 100%;\n padding-left: var(--cell-hspacing, 16px);\n padding-right: var(--cell-hspacing, 16px);\n padding-top: var(--cell-vspacing, 13px);\n padding-bottom: var(--cell-vspacing, 13px);\n box-sizing: border-box;\n flex-direction: row;\n align-items: center;\n}\n\n:host([islink]) {\n cursor: pointer;\n}\n\n:host([islink])::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n background-color: #000;\n border: inherit;\n border-color: #000;\n border-radius: inherit;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 0;\n content: \" \";\n}\n:host([islink]:active)::before {\n opacity: 0.1;\n}\n\n:host .quark-cell-title {\n width: var(--cell-title-width);\n white-space: var(--cell-title-white-space, wrap);\n font-size: var(--cell-title-font-size, 14px);\n font-weight: var(--cell-title-font-weight);\n text-overflow: var(--cell-title-text-overflow);\n display: block;\n color: var(--cell-title-color, #666);\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n margin-right: 4px;\n}\n\n:host .quark-cell-desc {\n color: var(--cell-desc-color, #969799);\n width: var(--cell-desc-width);\n white-space: var(--cell-title-white-space, nowrap);\n font-size: var(--cell-desc-font-size, 14px);\n font-weight: var(--cell-desc-font-weight);\n text-overflow: var(--cell-desc-text-overflow);\n overflow: hidden;\n text-align: right;\n}\n\n:host quark-icon-arrow-right {\n font-size: var(--cell-icon-font-size, 16px);\n color: var(--cell-quark-icon-color, #969799);\n}\n\n:host .quark-cell-icon {\n width: var(--cell-icon-font-size, 16px);\n height: auto;\n}\n:host {\n display: block;\n background: #fff;\n}\n::slotted(quark-cell) {\n position: relative;\n background-color: rgba(0, 0, 0, 0);\n}\n::slotted(quark-cell):after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n right: 16px;\n bottom: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 2px solid #f5f6f7;\n}\n::slotted(quark-cell:last-child):after {\n border: none;\n}\n:host {\n display: inline-block;\n\n --quark-circle-transition: all linear 1s;\n --quark-circle-text-font-size: 14px;\n}\n\n.circle-wrapper {\n position: relative;\n display: inline-block;\n text-align: center;\n}\n\n.circle-wrapper-hover {\n /* transform: rotate(270deg); */\n transform-origin: center;\n transform-box: fill-box;\n transition: var(--quark-circle-transition);\n}\n\n.circle-wrapper-content {\n width: 100%;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--quark-circle-text-font-size);\n}:host {\n /* display: flex; */\n}\n\n.sticky--fixed {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 99;\n}\n:host {\n display: block;\n text-align: unset;\n background-color: var(--tabs-background-color, #fff);\n}\n\n.quark-tabs {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n.quark-tab-nav-con {\n position: relative;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n}\n\n.quark-tab-nav {\n display: flex;\n}\n\n.quark-tab-nav-con::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n background: transparent !important;\n}\n\n.quark-tab-line {\n background: var(--tab-active-line-color, #0088ff);\n position: absolute;\n width: 0;\n margin-top: -3px;\n height: 3px;\n border-radius: 2px;\n transition: 0.25s;\n transition-timing-function: ease-in-out;\n}\n\n.quark-tab-content {\n overflow: hidden;\n flex: 1;\n}\n\n.quark-tab-content-wrap {\n display: flex;\n width: 100%;\n height: 100%;\n transition-property: transform;\n transition-duration: 0.25s;\n transition-timing-function: ease-in-out;\n}\n\n::slotted(quark-tab-content) {\n box-sizing: border-box;\n width: 100%;\n visibility: visible;\n height: 100%;\n flex-shrink: 0;\n overflow: auto;\n}\n\n::slotted(quark-tab-content:not([active])) {\n visibility: hidden;\n height: 0;\n}\n\n:host([dark]) .quark-tab-line {\n background-color: #fff;\n}\n\n:host([dark][active]) .quark-tab-line {\n color: #fff;\n}:host {\n display: inline-flex;\n flex: 1;\n height: var(--tab-item-height, 44px);\n line-height: var(--tab-item-height, 44px);\n min-width: var(--tab-item-min-width, 20vw);\n font-weight: 400;\n color: var(--tab-item-color, #5e6266);\n font-size: var(--tab-item-font-size, 16px);\n font-family: var(--tag-font-family, PingFangSC-Regular, PingFang SC);\n background-color: var(--tab-item-background-color, #fff);\n}\n\n:host([active]) {\n font-weight: 500;\n color: var(--tab-item-active-color, #333333);\n font-family: var(--tag-font-family, PingFangSC-Medium, PingFang SC);\n}\n\n:host([disabled]) {\n color: var(--tab-item-disabled-color, #c8c9cc);\n pointer-events: none;\n}\n:host([disabled]) .quark-tab-nav {\n cursor: not-allowed;\n}\n\n:host([dark]) .quark-tab-nav {\n color: var(--tab-item-dark-color, #fff);\n background-color: var(--tab-item-dark-background-color, #242729);\n}\n\n:host([dark][disabled]) .quark-tab-nav {\n color: var(--tab-item-disabled-color, #c8c9cc);\n}\n\n:host .quark-tab-nav {\n width: 100%;\n text-align: center;\n cursor: pointer;\n}:host {\n display: inline-block;\n flex: 1;\n font-size: 14px;\n width: 100%;\n}\n\n:host([status=\"doing\"]) .quark-step-icon.is-text {\n color: #fff;\n background: var(--quark-theme-color, #0088ff);\n border-color: var(--quark-theme-color, #0088ff);\n}\n\n:host .quark-step {\n display: flex;\n flex: 1;\n}\n\n:host .quark-vertical {\n display: flex;\n flex-direction: column;\n}\n\n:host .quark-step-horizontal .quark-step {\n display: block;\n flex: 1;\n text-align: center;\n}\n\n:host .quark-step-head {\n position: relative;\n}\n\n:host .quark-step-horizontal .quark-step-head {\n display: flex;\n justify-content: center;\n margin-bottom: 12px;\n}\n\n:host .quark-step-icon {\n position: relative;\n display: flex;\n font-size: var(--steps-base-font-size, 13px);\n width: 2em;\n height: 2em;\n line-height: 2em;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n\n:host .quark-step-icon.is-text {\n border-radius: 50%;\n border-width: 1px;\n border-style: solid;\n background: #fff;\n}\n\n:host .quark-step-main {\n display: inline-block;\n padding-left: 12px;\n text-align: left;\n margin-bottom: var(--step-bottom, 30px);\n}\n\n:host .quark-step-horizontal .quark-step-main {\n display: inline-block;\n padding-left: 10%;\n padding-right: 10%;\n text-align: center;\n margin-bottom: 10px;\n}\n\n:host .quark-step-title {\n font-size: var(--step-title-font-size);\n color: var(--step-title-color, #909ca4);\n display: block;\n margin-bottom: var(--step-title-bottom, 10px);\n}\n\n:host([status=\"done\"]) .quark-step-title,\n:host([status=\"doing\"]) .quark-step-title {\n color: var(--quark-theme-color, #0088ff);\n}\n\n:host([status=\"done\"]) .quark-step-head .quark-step-icon.is-text {\n color: var(--quark-theme-color, #0088ff);\n border-color: var(--quark-theme-color, #0088ff);\n background-color: #fff;\n}\n\n:host([status=\"doing\"]) .quark-step-head .quark-step-icon.is-text {\n color: #fff;\n border-color: var(--quark-theme-color, #0088ff);\n background-color: var(--quark-theme-color, #0088ff);\n}\n\n:host([status=\"todo\"]) .quark-step-head {\n color: #909ca4;\n border-color: #909ca4;\n}\n\n:host .quark-step-content {\n font-size: var(--step-content-font-size);\n color: var(--step-content-color, #666);\n display: block;\n}\n\n:host .quark-step-inner {\n display: flex;\n align-items: center;\n}\n:host {\n display: block;\n overflow: hidden;\n font-size: var(--steps-base-font-size, 13px);\n}\n\n::slotted(quark-step) {\n position: relative;\n}\n\n::slotted(quark-step)::before {\n width: 1px;\n height: 100%;\n background: #909ca4;\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n bottom: 0;\n left: 1em;\n}\n\n:host(:not([direction=\"vertical\"])) ::slotted(quark-step)::before {\n width: 100%;\n height: 1px;\n top: 1em;\n left: 60%;\n}\n\n::slotted(quark-step[status=\"done\"])::before {\n background: var(--quark-theme-color, #0088ff);\n}\n\n::slotted(quark-step:last-child)::before {\n display: none;\n}\n\n.quark-steps-horizontal {\n display: flex;\n}\n:host {\n display: flex;\n align-items: center;\n color: #ddd;\n cursor: pointer;\n}\n\n:host([disabled]) {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n:host([readonly]) {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n:host quark-icon-star {\n margin-right: 5px;\n}\n\n:host quark-icon-star:hover {\n cursor: pointer;\n}\n:host {\n display: flex;\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n box-sizing: border-box;\n padding: var(--field-padding, 16px);\n overflow: hidden;\n background: #fff;\n font-family: PingFangSC-Regular, PingFang SC;\n color: #242729;\n line-height: 24px;\n}\n\n:host label {\n flex: none;\n box-sizing: border-box;\n width: var(--field-label-width, 119px);\n flex-shrink: 0;\n font-size: var(--field-label-font-size, 15px);\n display: -webkit-box;\n overflow: hidden;\n text-align: left;\n word-wrap: break-word;\n margin-right: var(--field-label-margin-right, 12px);\n color: var(--field-label-text-color, #242729);\n font-weight: var(--field-label-font-weight);\n}\n\n:host([required]) .quark-field-label::before {\n width: 1em;\n height: 1em;\n margin-right: 4px;\n color: #F72626;\n font-size: 14px;\n content: \"*\";\n}\n\n:host input {\n display: block;\n box-sizing: border-box;\n min-width: 0;\n line-height: inherit;\n align-items: center;\n width: 100%;\n margin: 0;\n padding: 0;\n background-color: transparent;\n border: 0;\n text-shadow: none;\n cursor: text;\n border: none;\n outline: none;\n font-size: var(--field-input-font-size, 15px);\n color: var(--field-input-text-color, #242729);\n text-align: var(--field-input-align, left);\n resize: none;\n}\n\n:host label[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n color: var(--field-disabled-text-color, #c8c9cc);\n}\n\n:host input[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n color: var(--field-disabled-text-color, #c8c9cc);\n}\n\n:host input[readonly] {\n /* cursor: not-allowed; */\n}\n\n:host input::placeholder {\n color: var(--field-placeholder-text-color, #c8c9cc);\n font-size: var(--field-placeholder-font-size, 15px);\n}\n\n:host input[type=\"number\"]::-webkit-inner-spin-button,\n:host input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n:host input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n:host .quark-field-input-container {\n position: relative;\n text-align: right;\n vertical-align: middle;\n word-wrap: break-word;\n overflow: visible;\n width: 100%;\n}\n\n:host .quark-field-input-inner {\n display: flex;\n align-items: center;\n}\n\n:host .quark-field-error-msg {\n display: none;\n width: 100%;\n color: var(--field-error-text-color, #F72626);\n font-size: var(--field-error-font-size, 12px);\n text-align: var(--field-error-text-align, left);\n}\n:host {\n display: block;\n}\n\n.quark-search {\n display: flex;\n background: var(--search-background, #fff);\n padding: 6px 16px 6px 12px;\n}\n\n.quark-search-content {\n box-sizing: border-box;\n flex: 1;\n height: 32px;\n background: #f0f3f5;\n border-radius: 8px;\n padding: 6px 10px;\n display: flex;\n}\n\n.quark-search-content.round {\n border-radius: 999px;\n}\n\n.quark-search-content-left-icon {\n margin-right: 8px;\n display: flex;\n align-items: center;\n}\n\n.quark-search-input {\n flex: 1;\n display: flex;\n align-items: center;\n}\n\n.quark-search-field-clear {\n cursor: pointer;\n}\n\ninput[type=\"search\"] {\n -webkit-appearance: none;\n -webkit-box-sizing: content-box;\n}\n\ninput:-moz-placeholder,\ntextarea:-moz-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 14px);\n}\n\ninput:-ms-input-placeholder,\ntextarea:-ms-input-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 14px);\n}\n\ninput::-webkit-input-placeholder,\ntextarea::-webkit-input-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 14px);\n}\n\ninput::-webkit-search-decoration,\ninput::-webkit-search-cancel-button {\n display: none;\n}\n\n.quark-search-field-control {\n display: block;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n width: 100%;\n resize: none;\n border: 0;\n background: transparent;\n user-select: auto;\n color: var(--field-input-color, #242729);\n font-family: var(--field-input-family, PingFangSC-Regular, PingFang SC);\n outline: none;\n font-size: var(--field-font-size, 14px);\n}\n\n.quark-search-back {\n display: flex;\n align-items: center;\n margin-right: 8px;\n cursor: pointer;\n}\n\n.quark-search-action {\n margin-left: var(--search-action-text-margin-left, 16px);\n font-weight: 400;\n color: var(--search-action-text-color, #242729);\n font-size: var(--search-action-font-size, 16px);\n line-height: 32px;\n cursor: pointer;\n user-select: none;\n}\n\n.quark-search-action :active {\n background-color: #f2f3f5;\n}\n\n.quark-search-action-slot {\n padding: 0 6px;\n}\n\n.quark-search-dark {\n background: var(--search-dark-background, #0088ff);\n}\n\n.quark-search-dark .quark-search-content {\n background: #fff;\n}\n\n.quark-search-dark .quark-search-action {\n color: #fff;\n}\n\n:host input[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n color: var(--field-disabled-color, #c8c9cc);\n}\n\n.hide {\n display: none;\n}:host {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: #fff;\n}\n\n:host .quark-empty {\n padding: var(--empty-padding, 32px 0);\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n}\n\n:host .quark-empty-image {\n width: var(--empty-image-width, 191px);\n}\n\n:host .quark-empty-title {\n margin-top: 12px;\n text-align: center;\n font-size: var(--empty-title-font-size, 16px);\n line-height: var(--empty-title-line-height, 22px);\n color: var(--empty-title-color, #242729);\n white-space: var(--empty-white-space, pre-wrap);\n}\n\n:host .quark-empty-title:empty {\n margin-top: 0;\n}\n\n:host .quark-empty-desc {\n margin-top: 8px;\n font-size: var(--empty-desc-font-size, 14px);\n color: var(--empty-desc-color, #969799);\n width: var(--empty-desc-width);\n white-space: var(--empty-white-space, pre-wrap);\n line-height: var(--empty-title-line-height, 20px);\n text-align: center;\n}\n\n:host .quark-empty-desc:empty {\n margin-top: 0;\n}\n:host .quark-empty-button {\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n font-size: var(--empty-button-font-size, 16px);\n color: var(--empty-button-text-color, #fff);\n font-weight: 500;\n font-family: PingFangSC-Medium, PingFang SC;\n margin-top: var(--empty-button-margin-top, 20px);;\n background-color: var(--empty-button-background-color, #0088ff);\n line-height: var(--empty-button-line-height, 22px);\n padding: var(--empty-button-padding-column, 9px) var(--empty-button-padding-row, 34px);\n border-radius: var(--empty-button-border-radius, 20px);\n}\n\n:host([type=\"local\"]) .quark-empty-title {\n margin-top: 4px;\n font-size: var(--empty-title-font-size, 14px);\n line-height: var(--empty-title-line-height, 20px);\n}\n\n:host([type=\"local\"]) .quark-empty-desc {\n margin-top: 6px;\n font-size: var(--empty-desc-font-size, 12px);\n line-height: var(--empty-title-line-height, 17px);\n}\n\n:host([type=\"local\"]) .quark-empty-button {\n font-size: var(--empty-button-font-size, 14px);\n margin-top: var(--empty-button-margin-top, 12px);;\n line-height: var(--empty-button-line-height, 20px);\n padding: var(--empty-button-padding-column, 6px) var(--empty-button-padding-row, 26px);\n border-radius: var(--empty-button-border-radius, 16px);\n}\n:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: rgba(0, 0, 0, 0.7);\n visibility: hidden;\n text-align: center;\n font-size: 18px;\n color: #242729;\n opacity: 0;\n transition: all.3s ease-out;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: 999;\n visibility: visible;\n}\n\n:host .quark-dialog-mask {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n}\n\n:host .quark-dialog {\n position: relative;\n padding: 28px 12px 24px;\n margin: auto;\n box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);\n box-sizing: border-box;\n max-height: calc(100vh - 20px);\n border-radius: 12px;\n background-color: #fff;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.3s ease-in;\n width: var(--dialog-width, 320px);\n}\n\n:host([open]) .quark-dialog {\n opacity: 1;\n transform: scale(1);\n}\n\n.quark-dialog-close-btn {\n position: absolute;\n top: 12px;\n right: 12px;\n height: 16px;\n line-height: 16px;\n}\n\n.quark-dialog-close-btn svg {\n cursor: pointer;\n}\n\n:host .quark-dialog-title {\n font-size: var(--dialog-title-font-size, 18px);\n color: var(--dialog-title-color, #242729);\n font-family: var(--dialog-title-font-family, PingFangSC-Medium, PingFang SC);\n line-height: var(--dialog-title-line-height, 25px);\n font-weight: var(--dialog-title-font-weight, 500);\n padding: 0 14px;\n margin: 0 0 16px;\n}\n\n:host(:not([content])) .quark-dialog-title {\n margin-bottom: 20px;\n}\n\n:host .quark-dialog-content {\n font-size: var(--dialog-content-font-size, 14px);\n color: var(--dialog-content-color, \"#5A6066\");\n font-weight: var(--dialog-content-font-weight, 400);\n font-family: var(--dialog-content-font-family);\n line-height: var(--dialog-content-line-height, 20px);\n}\n\n.quark-dialog-body-wrap {\n padding: 0 12px;\n color: #5a6066;\n line-height: 20px;\n font-size: 14px;\n text-align: center;\n}\n.quark-dialog-body {\n text-align: left;\n display: inline-block;\n}\n\n:host .quark-dialog-body slot:empty {\n margin: 0;\n}\n\n:host .quark-dialog-footer {\n display: flex;\n align-items: center;\n padding: 0 4px;\n}\n\n/* :host[type=\"confirm\"] .quark-dialog-footer {\n display: flex;\n align-items: center;\n padding: 0 4px;\n} */\n\n.quark-dialog-close-btn quark-icon-close {\n color: #bcc4cc;\n cursor: pointer;\n}\n\n.quark-dialog-footer quark-button {\n display: flex;\n flex: 1 auto;\n align-items: center;\n justify-content: center;\n border-radius: var(--dialog-btn-border-radius, 8px);\n font-size: var(--dialog-btn, 16px);\n height: var(--dialog-btn, 40px);\n font-family: var(--dialog-btn-font-family, mFontFamily);\n \n}\n\n:host .quark-dialog-vertical {\n display: block;\n}\n\n:host .quark-dialog-vertical quark-button {\n margin-right: 0;\n}\n\n:host .quark-dialog-vertical .quark-dialog-cancel-btn {\n margin-top: 8px;\n}\n\n:host .quark-dialog-cancel-btn {\n color: #5a6066;\n background: #f0f3f5;\n margin-right: 8px;\n border: none;\n}\n\n:host .quark-dialog-leave {\n opacity: 0;\n transition: all.3s ease-out;\n}\n\n@media screen and (max-width: 321px) {\n :host .quark-dialog {\n display: flex;\n position: relative;\n margin: auto;\n box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);\n box-sizing: border-box;\n max-height: calc(100vh - 20px);\n border-radius: 12px;\n background-color: #fff;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.3s ease-in;\n width: var(--dialog-width, 90%);\n }\n}\n:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: var(--popup-mask-color, rgba(0, 0, 0, 0.7));\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: var(--popup-z-index, 999);\n visibility: visible;\n}\n\n:host .quark-popup-mask {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: transparent;\n z-index: -1;\n}\n\n:host .quark-popup {\n display: flex;\n /* padding: 24px; */\n flex-direction: column;\n justify-content: flex-start;\n box-sizing: border-box;\n width: var(--popup-width);\n min-width: var(--popup-min-width);\n max-width: var(--popup-max-width);\n height: var(--popup-height);\n min-height: var(--popup-min-height);\n max-height: var(--popup-max-height);\n overflow-y: auto;\n background: var(--popup-bg, #ffffff);\n opacity: 1;\n transition: transform .3s;\n transition-timing-function: ease-out;\n}\n\n:host .leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-popup::-webkit-scrollbar {\n display: none;\n /* Chrome Safari */\n}\n\n:host .quark-popup-close-btn {\n position: absolute;\n right: 3px;\n top: 3px;\n border: 0;\n color: #00000073;\n transition: color .3s;\n font-size: 20px;\n background: 0 0;\n padding: 0;\n width: 40px;\n height: 40px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 999;\n}\n\n:host .quark-popup-close-btn :hover {\n color: #bcc4cc;\n}\n\n:host([safearea][position=\"bottom\"]) .quark-popup {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n:host([safearea][position=\"top\"]) .quark-popup {\n padding-top: constant(safe-area-inset-top);\n padding-top: env(safe-area-inset-top);\n}\n\n:host([round][position=\"bottom\"]) .quark-popup {\n border-top-left-radius: var(--popup-border-radius, 16px);\n border-top-right-radius: var(--popup-border-radius, 16px);\n}\n\n:host([position=\"center\"]) .quark-popup {\n position: relative;\n margin: auto;\n transform: scale(0.5);\n max-width: var(--popup-max-width, 90%);\n max-height: var(--popup-max-height, 90%);\n}\n\n:host([open][position=\"center\"]) .quark-popup {\n transform: scale(1);\n}\n\n:host([position=\"top\"]) .quark-popup {\n transform: translate(0px, -100%);\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n max-height: var(--popup-max-height, 90%);\n min-height: var(--popup-min-height, 200px);\n}\n\n:host([open][position=\"top\"]) .quark-popup {\n transform: translate(0px, 0%);\n}\n\n:host([position=\"bottom\"]) .quark-popup {\n transform: translate(0px, 100%);\n position: fixed;\n width: 100%;\n bottom: 0;\n left: 0;\n max-height: var(--popup-max-height, 90%);\n min-height: var(--popup-min-height, 200px);\n}\n\n:host([open][position=\"bottom\"]) .quark-popup {\n transform: translate(0px, 0%);\n}\n\n:host([position=\"left\"]) .quark-popup {\n position: fixed;\n max-width: var(--popup-max-width, 90%);\n transform: translate(-100%, 0px);\n top: 0;\n left: 0;\n height: 100%;\n}\n\n:host([open][position=\"left\"]) .quark-popup {\n transform: translate(0%, 0px);\n}\n\n:host([position=\"right\"]) .quark-popup {\n position: fixed;\n max-width: var(--popup-max-width, 90%);\n transform: translate(100%, 0px);\n top: 0;\n right: 0;\n height: 100%;\n}\n\n:host([open][position=\"right\"]) .quark-popup {\n transform: translate(0%, 0px);\n}:host([radiogrouphost]) {\n font-size: var(--radio-font-size, 16px);\n color: var(--radio-color, #242729);\n display: block;\n}\n\n:host([radiohost]) {\n display: flex;\n align-items: center;\n}\n\n:host([radiohost]) * {\n cursor: pointer;\n}\n\n:host([radiogrouphost][direction=\"horizontal\"]) .quark-radio-group-wrapper {\n display: flex;\n}\n:host([radiogrouphost][direction=\"horizontal\"]) ::slotted(*) {\n margin-right: var(--radio-horizontal-gap, 20px);\n}\n\n:host([radiohost]) .quark-radio {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n}\n\n\n:host([radiohost][name][direction=\"horizontal\"]) {\n border-bottom: 1px solid #ddd;\n padding-bottom: 10px;\n}\n\n\n:host label {\n display: inline-flex;\n align-items: center;\n height: var(--radio-label-height, 100%);\n line-height: var(--radio-label-height, 100%);\n}\n\n:host label.quark-radio-hide {\n display: none;\n}\n\n:host .quark-radio-container {\n position: relative;\n display: inline-flex;\n height: var(--radio-size, 20px);\n width: var(--radio-size, 20px);\n margin-right: var(--radio-label-gap, 8px);\n flex-shrink: 0;\n}\n\n:host .quark-radio-icon {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n visibility: hidden;\n opacity: 0;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host([size=\"normal\"]) .quark-radio-container {\n height: var(--radio-size, 16px);\n width: var(--radio-size, 16px);\n}\n\n:host([size=\"big\"]) .quark-radio-container {\n height: var(--radio-size, 20px);\n width: var(--radio-size, 20px);\n}\n\n:host .quark-radio-container input {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n}\n\n:host .quark-radio-container span {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host .quark-radio-container .quark-radio-show {\n background: #ffffff;\n border-radius: 50%;\n position: relative;\n}\n\n:host .quark-radio-container .quark-radio-show::after {\n position: absolute;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border-radius: 50%;\n border: 1px solid #bcc4cc;\n transform: scale(0.5);\n}\n\n:host([disabled]) * {\n cursor: not-allowed;\n}\n\n:host([disabled]) .quark-radio-container .quark-radio-show {\n background: #f0f3f5;\n}\n\n:host .quark-radio-container .quark-radio-disabled {\n display: none;\n}\n\n:host([disabled][checked]) .quark-radio-container .quark-radio-disabled {\n display: block;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 50%;\n z-index: 3;\n}\n\n:host([shape=\"square\"]) .quark-radio-container .quark-radio-show {\n border-radius: 4px;\n}\n\n:host([disabled][checked][shape=\"square\"])\n .quark-radio-container\n .quark-radio-disabled {\n border-radius: 4px;\n}\n\n:host([shape=\"square\"]) .quark-radio-show::after {\n border-radius: 4px;\n}\n\n:host([shape=\"square\"][size=\"big\"]) .quark-radio-container span {\n border-radius: 5px;\n}\n\n:host([checked]) .quark-radio-container .quark-radio-show {\n background: var(--radio-background, #0088ff);\n}\n\n:host([checked]) .quark-radio-container .quark-radio-show::after {\n border: none;\n}\n\n:host([checked]) .quark-radio-icon {\n visibility: visible;\n opacity: 1;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host input[type=\"radio\"i] {\n margin: 0;\n}:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: rgba(0, 0, 0, 0.7);\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: 999;\n visibility: visible;\n}\n\n:host .quark-actionsheet {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n background-color: #fff;\n position: fixed;\n width: 100%;\n max-height: 90%;\n bottom: 0;\n left: 0;\n overflow: hidden;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n transition: transform .3s;\n transition-timing-function: ease-out;\n transform: translate(0, 100%);\n}\n\n:host .quark-actionsheet-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-actionsheet-title {\n color: #969799;\n font-size: 14px;\n display: flex;\n height: 60px;\n width: 100%;\n justify-content: center;\n align-items: center;\n border-bottom: 0.5px solid #ebedf0;\n text-align: center;\n}\n\n:host .quark-actionsheet-action {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n:host .quark-actionsheet-cancel {\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-actionsheet-actions {\n height: 50px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n cursor: pointer;\n text-align: center;\n color: #242729;\n font-size: 16px;\n}\n\n:host .quark-actionsheet-cancel-text {\n box-sizing: border-box;\n color: #646566;\n font-size: 16px;\n display: flex;\n width: 100%;\n justify-content: center;\n align-items: center;\n height: 50px;\n cursor: pointer;\n}\n\n:host .quark-actionsheet-cancel-gap {\n display: block;\n height: 9px;\n background-color: #f7f8fa;\n width: 100%;\n}\n\n:host([open]) .quark-actionsheet {\n transform: translate(0, 0%);\n}\n:host {\n position: relative;\n overflow: hidden;\n width: var(--swipe-width, 100%);\n height: var(--swipe-height, auto);\n border-radius: var(--swipe-border-radius, 0);\n display: flex;\n cursor: grab;\n}\n\n:host .container {\n height: 100%;\n width: auto;\n z-index: 1;\n display: flex;\n flex-direction: row;\n}\n\n:host .indicators {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 8px;\n height: 3px;\n z-index: 2;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host .indicator {\n width: 16px;\n height: 3px;\n background-color: var(--swipe-indicator-activecolor, #0088ff);\n border-radius: 2px;\n margin: 0 var(--swipe-indicator-margin, 2px);\n}\n\n:host([type=\"round\"]) .indicator {\n width: 6px;\n height: 6px;\n border-radius: 3px;\n opacity: 0.3;\n margin: 0 var(--swipe-indicator-margin, 2px);\n}\n:host {\n width: auto;\n height: 100%;\n}\n:host {\n height: 4px;\n border-radius: 3px;\n color: #242729;\n font-size: 12px;\n display: flex;\n flex: 1 auto;\n width: 100%;\n align-items: center;\n}\n\n:host .wrap {\n width: inherit;\n height: inherit;\n border-radius: inherit;\n background: var(--progress-box-background, #f0f3f5);\n}\n\n:host .progress {\n height: inherit;\n border-radius: inherit;\n}\n\n:host span {\n margin-left: var(--progress-margin-left, 12px);\n background: transparent !important;\n display: inline-block;\n}\n:host .quark-stepper-container {\n display: flex;\n}\n\n:host .quark-stepper-minus {\n position: relative;\n width: var(--stepper-button-width, 28px);\n height: var(--stepper-button-height, 28px);\n margin: 0;\n padding: 0;\n color: var(--stepper-minus-color, #242729);\n vertical-align: middle;\n background-color: var(--stepper-minus-background-color, #f2f3f5);\n border: var(--stepper-button-border-width, 0) solid\n var(--stepper-minus-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n cursor: pointer;\n}\n\n:host .quark-stepper-minus::before {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(-50%);\n content: \"\";\n width: 45%;\n height: 1px;\n}\n\n:host .quark-stepper-input {\n width: var(--stepper-input-width, 32px);\n height: var(--stepper-input-height, 28px);\n margin: 0 2px;\n padding: 0;\n color: var(--stepper-input-text-color, #242729);\n font-size: var(--stepper-input-font-size, 14px);\n line-height: var(--stepper-input-line-height, normal);\n text-align: center;\n vertical-align: middle;\n background-color: var(--stepper-input-background-color, #f2f3f5);\n border: var(--stepper-input-border-width, 1) solid\n var(--stepper-input-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n border-radius: var(--stepper-input-border-radius, 0);\n -webkit-appearance: none;\n outline: none;\n}\n\n:host .quark-stepper-plus {\n position: relative;\n width: var(--stepper-button-width, 28px);\n height: var(--stepper-button-height, 28px);\n margin: 0;\n padding: 0;\n color: var(--stepper-plus-color, #242729);\n vertical-align: middle;\n background-color: var(--stepper-plus-background-color, #f2f3f5);\n border: var(--stepper-button-border-width, 0) solid\n var(--stepper-plus-border-color, inherit);\n border-radius: var(--stepper-button-border-radius, 0);\n cursor: pointer;\n}\n\n:host .quark-stepper-plus::before {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(-50%);\n content: \"\";\n width: 45%;\n height: 1px;\n}\n\n:host .quark-stepper-plus::after {\n position: absolute;\n top: 50%;\n left: 50%;\n background-color: currentColor;\n transform: translate(0, -50%);\n content: \"\";\n width: 1px;\n height: 45%;\n}\n\n:host .quark-stepper-disabled {\n color: var(--stepper-button-disabled-color, #c8c9cc);\n background-color: #f7f8fa;\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n}\n:host {\n display: flex;\n height: var(--card-height, 138px);\n background-color: #fff;\n border-radius: var(--card-border-radius, 4px);\n overflow: hidden;\n padding-left: var(--card-hspacing, 20px);\n padding-right: var(--card-hspacing, 20px);\n padding-top: var(--card-vspacing, 20px);\n padding-bottom: var(--card-vspacing, 20px);\n box-sizing: border-box;\n}\n.card-container {\n width: 100%;\n}\n.card-container .title {\n font-size: var(--card-title-font-size, 14px);\n color: var(--card-title-color, #999);\n margin-bottom: var(--card-title-margin-bottom, 10px);\n}\n.card-body {\n display: grid;\n grid-template-columns: 1fr 80px;\n border-bottom: 1px solid #eee;\n padding-bottom: var(--card-body-padding-bottom, 20px);\n}\n.card-container .content {\n color: var(--card-content-color, #666);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n font-size: var(--card-content-font-size, 14px);\n}\n.card-container .tips {\n color: var(--card-tips-color, #333);\n font-size: var(--card-tips-font-size, 15px);\n text-align: right;\n}\n.card-container .desc {\n color: var(--card-desc-color, #999);\n font-size: var(--card-desc-font-size, 14px);\n padding-top: var(--card-desc-padding-top, 14px);\n}\n:host {\n display: block;\n font-size: 13px;\n}\n\n:host div {\n position: relative;\n display: flex;\n align-items: center;\n padding: var(--noticebar-padding, 10px);\n border-radius: var(--noticebar-border-radius, 0);\n color: #ee8c02;\n background: #fef4e7;\n}\n\n:host .quark-noticebar-left quark-icon-notify {\n margin-right: 7px;\n color: var(--noticebar-left-color);\n}\n\n:host .quark-noticebar-right quark-icon-notify {\n color: var(--noticebar-right-color);\n}\n\n:host .quark-noticebar-text {\n -webkit-line-clamp: 1;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n word-break: break-all;\n overflow: hidden;\n flex: 1;\n display: block;\n}\n:host {\n flex: 1 1;\n overflow: hidden;\n /* height: 100%; */\n display: flex;\n align-items: center;\n color: #242729;\n font-size: 14px;\n}\n\n:host .quark-marquee-title {\n width: auto;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n padding: 0 4px;\n white-space: nowrap;\n}\n\n:host .quark-marquee-paused {\n animation-play-state: paused;\n}\n\n@keyframes quark-marquee-animation {\n 0% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(-100%);\n }\n}\n:host {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.quark-pull-refresh {\n width: 100%;\n background: var(--pull-refresh-bg-light, var(--pull-refresh-bg, transparent));\n}\n\n.quark-pull-refresh-container {\n position: relative;\n transition-property: transform;\n background: var(--pull-refresh-container-bg, #fff);\n}\n\n.quark-pull-refresh-head {\n position: absolute;\n left: 0;\n width: 100%;\n height: var(--pull-refresh-head-height);\n overflow: hidden;\n color: var(--pull-refresh-head-text-color);\n font-size: var(--pull-refresh-head-font-size);\n line-height: var(--pull-refresh-head-height);\n text-align: center;\n transform: translateY(-100%);\n}\n\n.quark-pull-refresh-text {\n font-size: 14px;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n padding-bottom: 19px;\n box-sizing: border-box;\n}\n\n:host([dark]) .quark-pull-refresh {\n background: var(--pull-refresh-bg-dark, var(--pull-refresh-bg, #0088ff));\n}\n\n:host([dark]) .quark-pull-refresh-text {\n --loading-text-color: #fff;\n color: #fff;\n}\n\n.quark-dark-loading {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.quark-dark-loading img {\n width: 28px;\n height: 28px;\n margin-bottom: 8px;\n animation: rotate 1.4s linear infinite;\n}\n\n@keyframes rotate {\n to {\n transform: rotate(360deg);\n }\n}:host {\n width: 100%;\n}\n\n:host .quark-list .quark-list-text {\n height: 50px;\n line-height: 50px;\n font-size: 14px;\n color: #879099;\n text-align: center;\n}\n:host .quark-tooltip {\n display: inline-flex;\n position: relative;\n overflow: visible;\n}\n\n:host .quark-tooltip-tips {\n display: flex;\n position: absolute;\n z-index: 99;\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n transition-timing-function: ease-out;\n transform: translate(-50%, -24px);\n}\n\n:host .quark-tooltip-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-tooltip-content {\n border-radius: 4px;\n padding-left: var(--tips-hspacing, 6px);\n padding-right: var(--tips-hspacing, 6px);\n padding-top: var(--tips-vspacing, 3px);\n padding-bottom: var(--tips-vspacing, 3px);\n line-height: var(--tips-line-height, 1.4);\n font-weight: var(--tips-font-weight, 400);\n text-align: center;\n background-color: var(--tips-background-color, #242729);\n color: var(--tips-color, #fff);\n font-size: var(--tips-font-size, 12px);\n font-style: normal;\n max-width: 200px;\n width: max-content;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([size=\"large\"]) .quark-tooltip-content {\n padding-left: var(--tips-hspacing, 8px);\n padding-right: var(--tips-hspacing, 8px);\n padding-top: var(--tips-vspacing, 6px);\n padding-bottom: var(--tips-vspacing, 6px);\n font-size: var(--tips-font-size, 14px);\n}\n\n:host .quark-tooltip-triangle {\n width: 0;\n height: 0;\n overflow: hidden;\n border: 6px solid transparent;\n}\n\n:host([tips]:not([tips=\"\"])[open]) .quark-tooltip-tips {\n visibility: visible;\n opacity: 0.9;\n}\n\n:host([placement=\"top\"]) .quark-tooltip-tips {\n left: 50%;\n bottom: 100%;\n transform: translate(-50%, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"top\"]) .quark-tooltip-triangle {\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"top\"][open]) .quark-tooltip-tips {\n transform: translate(-50%, var(--tips-margin-bottom, 0px));\n}\n\n/* right */\n:host([placement=\"right\"]) .quark-tooltip-tips {\n left: 100%;\n top: 50%;\n transform: translate(24px, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"right\"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"right\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 10px), -50%);\n}\n\n/* bottom */\n:host([placement=\"bottom\"]) .quark-tooltip-tips {\n left: 50%;\n top: 100%;\n transform: translate(-50%, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"bottom\"]) .quark-tooltip-triangle {\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"bottom\"][open]) .quark-tooltip-tips {\n transform: translate(-50%, var(--tips-margin-top, 0px));\n}\n\n/* left */\n:host([placement=\"left\"]) .quark-tooltip-tips {\n right: 100%;\n top: 50%;\n transform: translate(-24px, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"left\"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"left\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -10px), -50%);\n}\n\n/* topleft */\n:host([placement=\"topleft\"]) .quark-tooltip-tips {\n left: 0;\n bottom: 100%;\n transform: translate(0, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement=\"topleft\"]) .quark-tooltip-triangle {\n margin-left: 16px;\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"topleft\"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-right, 0));\n}\n\n/* topright */\n:host([placement=\"topright\"]) .quark-tooltip-tips {\n right: 0;\n bottom: 100%;\n transform: translate(0, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement=\"topright\"]) .quark-tooltip-triangle {\n margin-right: 16px;\n border-top-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"topright\"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-right, 0));\n}\n\n/* righttop */\n:host([placement=\"righttop\"]) .quark-tooltip-tips {\n left: 100%;\n top: 0;\n transform: translate(24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"righttop\"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"righttop\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 10px), 0);\n}\n\n/* rightbottom */\n:host([placement=\"rightbottom\"]) .quark-tooltip-tips {\n left: 100%;\n bottom: 0;\n transform: translate(24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"rightbottom\"]) .quark-tooltip-triangle {\n border-right-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"rightbottom\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-left, 10px), 0);\n}\n\n/* bottomleft */\n:host([placement=\"bottomleft\"]) .quark-tooltip-tips {\n left: 0;\n top: 100%;\n transform: translate(0, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement=\"bottomleft\"]) .quark-tooltip-triangle {\n margin-left: 16px;\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"bottomleft\"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-left, 0px));\n}\n\n/* bottomright */\n:host([placement=\"bottomright\"]) .quark-tooltip-tips {\n right: 0;\n top: 100%;\n transform: translate(0, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement=\"bottomright\"]) .quark-tooltip-triangle {\n margin-right: 16px;\n border-bottom-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"bottomright\"][open]) .quark-tooltip-tips {\n transform: translate(0, var(--tips-margin-left, 0));\n}\n\n/* lefttop */\n:host([placement=\"lefttop\"]) .quark-tooltip-tips {\n right: 100%;\n top: 0;\n transform: translate(-24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"lefttop\"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"lefttop\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -10px), 0);\n}\n\n/* leftbottom */\n:host([placement=\"leftbottom\"]) .quark-tooltip-tips {\n right: 100%;\n bottom: 0;\n transform: translate(-24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"leftbottom\"]) .quark-tooltip-triangle {\n border-left-color: var(--tips-background-color, #242729);\n}\n\n:host([placement=\"leftbottom\"][open]) .quark-tooltip-tips {\n transform: translate(var(--tips-margin-right, -10px), 0);\n}\n\n:host slot {\n border-radius: inherit;\n}\n\n:host quark-icon-close {\n color: var(--tips-color, #fff);\n font-size: var(--tips-font-size, 14px);\n}\n:host {\n display: inline-block;\n}\n\n:host .quark-image {\n position: relative;\n height: var(--image-height, 100%);\n width: var(--image-height, 100%);\n}\n\n:host .quark-image-img {\n height: var(--image-height, 100%);\n width: var(--image-height, 100%);\n display: block;\n}\n\n:host .quark-image-loading {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #969799;\n font-size: 14px;\n background: #f7f8fa;\n width: 100%;\n height: 100%;\n}\n:host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host .quark-uploader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n}\n:host .quark-uploader-mg {\n /* margin-right: var(--uploader-margin, 6px); */\n}\n:host .quark-uploader-icon {\n box-sizing: border-box;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n background: var(--uploader-background, #f7f8fa);\n border-width: var(--uploader-border-width, 1px);\n border-color: var(--uploader-border-color, #e1e6eb);\n border-style: var(--uploader-border-style, dashed);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n border-radius: var(--uploader-radius, 4px);\n}\n\n:host input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n cursor: pointer;\n}\n\n:host .quark-uploader-uploader-text {\n font-size: 10px;\n color: #879099;\n}\n\n:host .quark-uploader-preview-item {\n position: relative;\n box-sizing: border-box;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n margin: 0 var(--uploader-margin, 6px) var(--uploader-margin, 6px) 0;\n border-radius: var(--uploader-radius, 4px);\n}\n\n:host .quark-uploader-preview-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n\n:host .quark-uploader-preview-item .quark-uploader-remove {\n display: inline-block;\n position: absolute;\n top: var(--uploader-delete-top, 1px);\n right: var(--uploader-delete-right, 1px);\n width: var(--uploader-delete-wrap-width, 14px);\n height: var(--uploader-delete-wrap-height, 14px);\n background: var(--uploader-delete-background, rgb(0 0 0));\n border-bottom-left-radius: var(--uploader-delete-left-radius, 12px);\n display: flex;\n justify-content: flex-end;\n cursor: pointer;\n}\n\n:host .quark-uploader-preview-item quark-icon-close {\n color: var(--uploader-delete-color, #fff);\n font-size: var(--uploader-delete-size, 10px);\n}\n\n:host .uploading {\n position: absolute;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n border-radius: var(--uploader-radius, 4px);\n background: var(--uploader-mask-background, rgba(50, 50, 51, 0.88));\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n\n:host .uploading-text {\n font-size: var(--uploader-mask-font-size, 10px);\n color: var(--uploader-mask-color, #fff);\n}\n:host .uploader-disabled {\n opacity: var(--uploader-disabled-opacity, .5);\n cursor: not-allowed;\n pointer-events: none;\n}:host {\n --popup-mask-color: rgb(0, 0, 0);\n --popup-max-width: 100%;\n --popup-max-height: 100%;\n position: relative;\n height: 100%;\n width: 100%;\n}\n\n:host .quark-imagepreview-indicator {\n display: none;\n position: fixed;\n z-index: 1000;\n top: 10px;\n text-align: center;\n color: #fff;\n font-size: 14px;\n width: 100%;\n}\n\n:host .quark-imagepreview-item {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n height: 100%;\n flex-shrink: 0;\n background: var(--imagepreview-item-bg-color, black);\n transition-duration: 0.3s;\n}\n:host .quark-preview-image {\n width: auto;\n height: 100%\n}\n:host .quark-imagepreview-item img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n -webkit-user-drag: none;\n}\n:host .quark-imagepreview-slide {\n height: 100vh;\n}\n:host .quark-imagepreview-slide .quark-imagepreview-slide-wrapper {\n position: relative;\n}\n\n:host .quark-imagepreview-slide-wrapper {\n overflow: hidden;\n height: 100%;\n background: var(--imagepreview-item-bg-color, black);\n}\n\n:host .quark-imagepreview-slide-content {\n white-space: nowrap;\n display: flex;\n height: 100%;\n background: var(--imagepreview-item-bg-color, black);\n}\n:host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-grid {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex-wrap: wrap;\n}\n:host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-grid-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding-left: var(--grid-item-hspacing, 16px);\n padding-right: var(--grid-item-hspacing, 16px);\n padding-top: var(--grid-item-vspacing, 16px);\n padding-bottom: var(--grid-item-vspacing, 16px);\n background-color: var(--grid-item-background-color, white);\n}\n\n:host .quark-grid-text {\n font-size: var(--grid-item-text-font-size, 12px);\n color: var(--grid-item-text-color, #242729);\n line-height: 1.5;\n word-break: break-all;\n margin-top: var(--grid-item-text-margin-top, 8px);\n}\n\n:host .quark-grid-icon {\n font-size: var(--grid-item-icon-font-size, 28px);\n width: var(--grid-item-icon-font-size, 28px);\n height: auto;\n}\n:host {\n width: 100%;\n display: block;\n}\n\n:host ul {\n list-style: none;\n padding: 0;\n}\n\n:host quark-button {\n width: 100%;\n font-family: PingFangSC-Medium, PingFang SC;\n font-weight: 500;\n --button-height: 100%;\n --button-font-size: 18px;\n}\n\n:host .quark-picker-container {\n width: 100%;\n height: 338px;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-header {\n position: relative;\n height: 56px;\n width: 100%;\n background-color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-title {\n color: var(--picker-title-color, #242729);\n font-weight: var(--picker-title-font-weight, 500);\n font-family: var(--picker-title-font-family, PingFangSC-Medium, PingFang SC);\n text-align: center;\n font-size: var(--picker-title-font-size, 18px);\n}\n\n:host .quark-picker-header-close-btn {\n height: 100%;\n position: absolute;\n right: 20px;\n top: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host quark-icon-close {\n font-size: 24px;\n color: #bcc4cc;\n cursor: pointer;\n}\n\n:host .quark-picker-content {\n position: absolute;\n display: flex;\n top: 56px;\n bottom: 72px;\n left: 0;\n right: 0;\n background-color: white;\n box-sizing: border-box;\n}\n\n:host .quark-picker-bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 72px;\n background-color: white;\n box-sizing: border-box;\n padding: 12px 16px;\n}\n\n:host .quark-picker-mask-top,\n.quark-picker-mask-bottom {\n z-index: 10;\n width: 100%;\n height: 83px;\n pointer-events: none;\n transform: translateZ(0);\n}\n\n/* :host .quark-picker-mask-top::after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n right: 16px;\n bottom: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 2px solid #f5f6f7;\n}\n\n:host .quark-picker-mask-bottom::before {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n right: 16px;\n top: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 2px solid #f5f6f7;\n} */\n\n.quark-picker-mask-top {\n position: absolute;\n top: 0;\n background: linear-gradient(\n to top,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-mask-bottom {\n position: absolute;\n bottom: 0;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-current {\n position: absolute;\n top: 79px;\n height: 52px;\n width: 100%;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n:host .quark-picker-current .quark-picker-current-mask {\n height: 100%;\n background-color: #f7f9fa;\n border-radius: 8px;\n}\n\n:host .quark-picker-wheel-wrapper {\n display: flex;\n padding: 10px 16px;\n width: 100%;\n}\n\n:host .quark-picker-wheel {\n flex: 1;\n width: 1%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .quark-picker-wheel-scroll {\n padding: 0;\n margin-top: 74px;\n list-style: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-wheel-item {\n font-family: PingFangSC-Semibold, PingFang SC;\n font-size: 16px;\n list-style: none;\n height: 44px;\n line-height: 44px;\n overflow: hidden;\n white-space: nowrap;\n color: #242729;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host([bottomhidden]) .quark-picker-picker-content {\n bottom: 0px;\n}\n\n:host([bottomhidden]) .quark-picker-picker-container {\n height: 266px;\n}\n:host {\n width: 100%;\n}\n\n:host ul {\n list-style: none;\n padding: 0;\n}\n\n:host quark-button {\n width: 100%;\n font-weight: 500;\n --button-height: 100%;\n --button-font-size: 18px;\n cursor: pointer;\n}\n\n:host .quark-cascade-picker {\n width: 100%;\n height: 338px;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-cascade-picker-header {\n position: relative;\n height: 56px;\n width: 100%;\n background-color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-cascade-picker-title {\n color: var(--cascadepicker-title-color, #242729);\n font-weight: var(--cascadepicker-title-font-weight, 500);\n font-family: var(--cascadepicker-title-font-family, PingFangSC-Medium, PingFang SC);\n text-align: center;\n font-size: var(--cascadepicker-title-font-size, 18px);\n}\n\n:host .quark-cascade-picker-close-btn {\n height: 100%;\n position: absolute;\n right: 20px;\n top: 0;\n bottom: 0;\n /* width: 56px; */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n:host quark-icon-close {\n font-size: 24px;\n color: #bcc4cc;\n cursor: pointer;\n}\n\n:host .quark-cascade-picker-content {\n position: absolute;\n display: flex;\n top: 56px;\n bottom: 72px;\n left: 0;\n right: 0;\n background-color: white;\n box-sizing: border-box;\n}\n\n:host .quark-cascade-picker-bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 72px;\n background-color: white;\n box-sizing: border-box;\n padding: 12px 16px;\n}\n\n:host .quark-cascade-picker-mask-top,\n.quark-cascade-picker-mask-bottom {\n z-index: 10;\n width: 100%;\n height: 83px;\n pointer-events: none;\n transform: translateZ(0);\n}\n\n:host .quark-cascade-picker-mask-top {\n position: absolute;\n top: 0;\n background: linear-gradient(\n to top,\n rgb(255 255 255 / 30%),\n rgb(255 255 255 / 80%)\n );\n}\n\n:host .quark-cascade-picker-mask-bottom {\n position: absolute;\n bottom: 0;\n background: linear-gradient(\n to bottom,\n rgb(255 255 255 / 30%),\n rgb(255 255 255 / 80%)\n );\n}\n\n:host .quark-picker-current {\n position: absolute;\n top: 79px;\n height: 52px;\n width: 100%;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n:host .quark-picker-current .quark-picker-current-mask {\n height: 100%;\n background-color: #f7f9fa;\n border-radius: 8px;\n}\n\n:host .quark-cascade-picker-wheel-wrapper {\n display: flex;\n padding: 10px 16px;\n width: 100%;\n}\n\n:host .quark-cascade-picker-wheel {\n flex: 1;\n width: 1%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .quark-cascade-picker-wheel-scroll {\n padding: 0;\n margin-top: 74px;\n list-style: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-cascade-picker-wheel-item {\n font-size: 16px;\n list-style: none;\n height: 44px;\n line-height: 44px;\n overflow: hidden;\n white-space: nowrap;\n color: #242729;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host([bottomhidden]) .quark-cascade-picker-picker-content {\n bottom: 0;\n}\n\n:host([bottomhidden]) .quark-cascade-picker-picker-container {\n height: 266px;\n}\n:host {\n width: 100%;\n display: block;\n}\n\n:host .quark-date-picker-header {\n position: relative;\n height: 56px;\n width: 100%;\n padding: 0 16px;\n background-color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host .quark-date-picker-title {\n color: var(--picker-title-color, #242729);\n font-weight: var(--picker-title-font-weight, 500);\n font-family: var(--picker-title-font-family, PingFangSC-Medium, PingFang SC);\n text-align: center;\n font-size: var(--picker-title-font-size, 18px);\n}\n\n:host .quark-date-picker-close-btn {\n color: #969799;\n font-size: 14px;\n}\n\n:host .quark-date-picker-confirm-btn {\n font-size: 14px;\n color: #0088ff;\n}\n:host {\n cursor: pointer;\n width: 100%;\n text-align: center;\n}\n\n:host([active]) {\n color: var(--tabbar-active-color, #0088FF);\n}:host {\n display: flex;\n width: 100%;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n padding: 10px 0;\n background: #fff;\n font-size: 12px;\n box-shadow: 0px -2px 8px 0px rgba(36, 39, 41, 0.08);\n}\n\n:host([fixed]) {\n position: fixed;\n bottom: 0;\n left: 0;\n}\n\n.quark-tabbar {\n width: 100%;\n display: flex;\n justify-content: space-around;\n}\n:host {\n display: block;\n}\n\n:host .quark-textarea {\n padding: var(--textarea-padding, 12px);\n background: rgb(255, 255, 255);\n border: 1px solid var(--textarea-border-color);\n display: block;\n}\n\n:host .quark-text-area {\n resize: none;\n flex: auto;\n display: block;\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n padding: 0;\n margin: 0;\n color: var(--textarea-color, #242729);\n font-size: var(--textarea-font-size, 14px);\n line-height: var(--textarea-line-height, 1.5);\n background: 0 0;\n border: 0;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n min-height: 1.5em;\n text-align: var(--textarea-text-align, left);\n}\n\n:host .quark-textarea-text-count {\n text-align: var(--textarea-text-count-align, right);\n color: var(--textarea-count-color, gray);\n padding-top: 8px;\n font-size: 14px;\n}\n:host quark-overlay .quark-market-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n:host slot[name=\"market\"] img {\n width: var(--market-dialog-with, 288px);\n border-radius: var(--market-dialog-radius, 12px);\n height: 100%;\n}\n\n:host quark-overlay .quark-market-close {\n margin-top: 40px;\n text-align: center;\n cursor: pointer;\n}\n:host {\n\n}\n\n::slotted(quark-form-item)::after {\n content: '';\n display: block;\n position: absolute;\n left: 16px;\n right: 16px;\n bottom: 0;\n border-bottom: 1px solid #f5f6f7;\n}\n\n::slotted(quark-form-item:last-child)::after {\n display: none;\n}\n\n:host {\n display: block;\n background-color: #fff;\n --textarea-padding: 0;\n --field-padding: 0;\n --textarea-line-height: 24px;\n --radio-label-height: 24px;\n --checkbox-label-height: 24px;\n position: relative;\n}\n\n.quark-form-item__wrapper {\n display: flex;\n padding: 10px 0;\n margin: 0 16px;\n}\n\n.quark-form-item__label-wrapper {\n flex-shrink: 0;\n margin-right: 12px;\n font-size: var(--cell-title-font-size, 14px);\n color: #5a6066;\n line-height: 24px;\n}\n\n.quark-form-item__label-wrapper .quark-form-item__label {\n display: inline-block;\n width: 100%;\n}\n\n.is-required .quark-form-item__label::before {\n content: '*';\n color: #f00;\n margin-right: 4px;\n}\n\n.is-no-asterisk .quark-form-item__label::before {\n display: none;\n}\n\n.quark-form-item__main {\n flex: 1;\n}\n\n.quark-form-item__main-content {\n min-height: 24px;\n /* display: flex;\n align-items: center; */\n}\n\n.quark-form-item_error-msg {\n color: #f00;\n font-size: 12px;\n line-height: 24px;\n}\n\n.quark-form-item__suffix {\n margin-left: 4px;\n flex-shrink: 0;\n}\n\n.quark-form-item__is-link {\n display: flex;\n align-items: center;\n}:host .quark-popover {\n display: inline-flex;\n position: relative;\n overflow: visible;\n cursor: pointer;\n}\n\n:host .quark-popover-tips {\n display: flex;\n position: absolute;\n z-index: 99;\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n transition-timing-function: ease-out;\n transform: translate(-50%, -24px);\n}\n\n.quark-popover-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-popover-content {\n border-radius: 4px;\n background-color: var(--popover-background-color, #4a4a4a);\n max-width: 200px;\n width: max-content;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([theme=\"light\"]) .quark-popover-content {\n background-color: var(--popover-background-color, #fff);\n}\n\n:host .quark-popover-triangle {\n width: 0;\n height: 0;\n overflow: hidden;\n border: 6px solid transparent;\n}\n\n:host([open]) .quark-popover-tips {\n visibility: visible;\n opacity: 1;\n}\n\n:host([placement=\"top\"]) .quark-popover-tips {\n left: 50%;\n bottom: 100%;\n transform: translate(-50%, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"top\"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"top\"][theme=\"light\"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"top\"][open]) .quark-popover-tips {\n transform: translate(-50%, var(--popover-margin-bottom, 0px));\n}\n\n/* right */\n:host([placement=\"right\"]) .quark-popover-tips {\n left: 100%;\n top: 50%;\n transform: translate(24px, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"right\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"right\"][theme=\"light\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"right\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 10px), -50%);\n}\n\n/* bottom */\n:host([placement=\"bottom\"]) .quark-popover-tips {\n left: 50%;\n top: 100%;\n transform: translate(-50%, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"bottom\"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"bottom\"][theme=\"light\"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"bottom\"][open]) .quark-popover-tips {\n transform: translate(-50%, var(--popover-margin-top, 0px));\n}\n\n/* left */\n:host([placement=\"left\"]) .quark-popover-tips {\n right: 100%;\n top: 50%;\n transform: translate(-24px, -50%);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"left\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"left\"][theme=\"light\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"left\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -10px), -50%);\n}\n\n/* topleft */\n:host([placement=\"topleft\"]) .quark-popover-tips {\n left: 0;\n bottom: 100%;\n transform: translate(0, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement=\"topleft\"]) .quark-popover-triangle {\n margin-left: 16px;\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"topleft\"][theme=\"light\"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"topleft\"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-right, 0));\n}\n\n/* topright */\n:host([placement=\"topright\"]) .quark-popover-tips {\n right: 0;\n bottom: 100%;\n transform: translate(0, -24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement=\"topright\"]) .quark-popover-triangle {\n margin-right: 16px;\n border-top-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"topright\"][theme=\"light\"]) .quark-popover-triangle {\n border-top-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"topright\"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-right, 0));\n}\n\n/* righttop */\n:host([placement=\"righttop\"]) .quark-popover-tips {\n left: 100%;\n top: 0;\n transform: translate(24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"righttop\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"righttop\"][theme=\"light\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"righttop\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 10px), 0);\n}\n\n/* rightbottom */\n:host([placement=\"rightbottom\"]) .quark-popover-tips {\n left: 100%;\n bottom: 0;\n transform: translate(24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"rightbottom\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"rightbottom\"][theme=\"light\"]) .quark-popover-triangle {\n border-right-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"rightbottom\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-left, 10px), 0);\n}\n\n/* bottomleft */\n:host([placement=\"bottomleft\"]) .quark-popover-tips {\n left: 0;\n top: 100%;\n transform: translate(0, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n:host([placement=\"bottomleft\"]) .quark-popover-triangle {\n margin-left: 16px;\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"bottomleft\"][theme=\"light\"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"bottomleft\"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-left, 0px));\n}\n\n/* bottomright */\n:host([placement=\"bottomright\"]) .quark-popover-tips {\n right: 0;\n top: 100%;\n transform: translate(0, 24px);\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n\n:host([placement=\"bottomright\"]) .quark-popover-triangle {\n margin-right: 16px;\n border-bottom-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"bottomright\"][theme=\"light\"]) .quark-popover-triangle {\n border-bottom-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"bottomright\"][open]) .quark-popover-tips {\n transform: translate(0, var(--popover-margin-left, 0));\n}\n\n/* lefttop */\n:host([placement=\"lefttop\"]) .quark-popover-tips {\n right: 100%;\n top: 0;\n transform: translate(-24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"lefttop\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"lefttop\"][theme=\"light\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"lefttop\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -10px), 0);\n}\n\n/* leftbottom */\n:host([placement=\"leftbottom\"]) .quark-popover-tips {\n right: 100%;\n bottom: 0;\n transform: translate(-24px, 0);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host([placement=\"leftbottom\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #4a4a4a);\n}\n\n:host([placement=\"leftbottom\"][theme=\"light\"]) .quark-popover-triangle {\n border-left-color: var(--popover-background-color, #fff);\n}\n\n:host([placement=\"leftbottom\"][open]) .quark-popover-tips {\n transform: translate(var(--popover-margin-right, -10px), 0);\n}\n\n:host slot {\n border-radius: inherit;\n}\n\n:host .quark-popover-icon {\n width: var(--popover-action-font-size, 14px);\n height: auto;\n}\n\n:host .quark-popover-action-container {\n padding-left: var(--popovers-hspacing, 16px);\n padding-right: var(--popover-hspacing, 16px);\n height: var(--popover-action-height, 44px);\n min-width: 100px;\n font-weight: var(--popover-action-font-weight, 400);\n line-height: var(--popover-action-line-height, 20px);\n text-align: center;\n color: var(--popover-color, #fff);\n font-size: var(--popover-action-font-size, 14px);\n font-style: normal;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n}\n\n:host([theme=\"light\"]) .quark-popover-action-container {\n color: var(--popover-color, #242729);\n}\n\n:host .quark-action-container-disable {\n cursor: not-allowed;\n pointer-events: none;\n user-select: none;\n color: #c8c9cc;\n}\n\n:host([theme=\"light\"]) .quark-action-container-disable {\n color: #c8c9cc;\n}\n\n:host .quark-popover-action-container:after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n pointer-events: none;\n right: 16px;\n bottom: 0;\n left: 16px;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n:host([theme=\"light\"]) .quark-popover-action-container:after {\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n:host .quark-popover-action-container:last-child::after {\n border: none;\n}\n:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: rgba(0, 0, 0, 0.7);\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: 999;\n visibility: visible;\n}\n\n:host .quark-sharesheet {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n background-color: #fff;\n position: fixed;\n width: 100%;\n max-height: 90%;\n bottom: 0;\n left: 0;\n overflow: hidden;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n transition: transform .3s;\n transition-timing-function: ease-out;\n transform: translate(0, 100%);\n}\n\n:host .quark-sharesheet-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-sharesheet-title {\n color: #969799;\n font-size: 14px;\n display: flex;\n height: 52px;\n width: 100%;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host .quark-sharesheet-action {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n}\n\n:host .quark-sharesheet-cancel {\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-sharesheet-item {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 16px;\n margin-bottom: 16px;\n width: 60px;\n}\n\n:host .quark-sharesheet-item-text {\n color: #666;\n font-size: 12px;\n line-height: 17px;\n margin-top: 8px;\n}\n\n:host .quark-sharesheet-item-icon {\n width: 50px;\n height: 50px;\n}\n\n:host .quark-sharesheet-cancel-text {\n box-sizing: border-box;\n color: #242729;\n font-size: 16px;\n display: flex;\n width: 100%;\n justify-content: center;\n align-items: center;\n height: 50px;\n cursor: pointer;\n}\n\n:host .quark-sharesheet-cancel-gap {\n display: block;\n height: 9px;\n background-color: #f7f8fa;\n width: 100%;\n}\n\n:host([open]) .quark-sharesheet {\n transform: translate(0, 0%);\n}\n:host {\n display: block;\n width: 100%;\n}\n\n:host .skeleton-container {\n display: flex;\n animation: skeleton-blink 1.2s ease-in-out infinite;\n}\n\n:host .skeleton-content {\n width: 100%;\n}\n\n:host .skeleton-avatar {\n flex-shrink: 0;\n width: var(--skeleton-avatar-size, 32px);\n height: var(--skeleton-avatar-size, 32px);\n margin-right: var(--skeleton-avatar-margin-right, 16px);\n background: var(--skeleton-avatar-background-color, #f2f3f5);\n}\n\n:host([avatarshape=\"round\"]) .skeleton-avatar {\n border-radius: 999px;\n}\n\n:host .skeleton-title {\n width: var(--skeleton-title-width, 40%);\n margin: 0;\n height: var(--skeleton-row-height, 16px);\n background: var(--skeleton-row-background-color, #f2f3f5);\n border-radius: var(--skeleton-row-border-radius, 0);\n}\n\n:host .skeleton-row {\n margin-top: var(--skeleton-row-margin-top, 12px);\n height: var(--skeleton-row-height, 16px);\n background-color: var(--skeleton-row-background-color, #f2f3f5);\n border-radius: var(--skeleton-row-border-radius, 0);\n}\n\n@keyframes skeleton-blink {\n 50% {\n opacity: 0.6;\n }\n}\n:host {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n color: #ffffff;\n}\n\n:host .num {\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n min-width: var(--countdown-num-min-width, 18px);\n padding: var(--countdown-num-padding, 0 3px);\n border-radius: var(--countdown-num-border-radius, 4px);\n background: var(--countdown-num-background, #f4433d);\n}\n\n:host .dot {\n display: inline-block;\n margin: var(--countdown-dot-margin, 0 2px);\n color: var(--countdown-dot-color, #f4433d);\n}\ndetails {\n background-color: #fff;\n}\n\ndetails[open] quark-icon-arrow-down{\n transform: rotate(180deg);\n}\n\nsummary {\n padding: 13px 26px;\n color: var(--callapse-title-color, #666);;\n font-size: var(--callapse-title-fontsize, 14px);\n position: relative;\n cursor: pointer;\n transition: all .4s;\n}\n\nsummary:first-of-type {\n list-style-type: none;\n}\n\n.collapse-icon {\n position: absolute;\n right: 26px;\n top: 15px;\n}\n\n.line {\n width: calc(100% - 52px);\n height: 1px;\n background: #ebedf0;\n position: absolute;\n bottom: 0;\n}\n\n.expander-content {\n color: var(--callapse-content-color, #666);\n font-size: var(--callapse-content-fontsize, 14px);\n line-height: 1.5;\n background-color: #fff;\n padding: 12px 28px;\n}\n\n:host([iconhide]) quark-icon-arrow-down{\n display: none;\n}:host {\n width: 100%;\n display: block;\n font-family: var(--calendar-font-family, PingFangSC-Regular, PingFang SC);\n -webkit-tap-highlight-color: transparent;\n}\n\n:host .quark-calendar {\n display: flex;\n flex-direction: column;\n height: var(--calendar-height, 80vh);\n background: var(--calendar-background-color, #ffffff);\n}\n\n:host([position=\"left\"]) .quark-calendar {\n height: var(--calendar-height, 100%);\n}\n\n:host([position=\"right\"]) .quark-calendar {\n height: var(--calendar-height, 100%);\n}\n\n:host([tiled]) .quark-calendar {\n height: var(--calendar-height, auto);\n}\n\n:host .quark-calendar-header {\n flex-shrink: 0;\n z-index: 2;\n position: relative;\n box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);\n}\n\n:host .quark-calendar-month-title {\n color: var(--calendar-month-title-color, #242729); \n height: var(--calendar-month-title-row-height, 44px);\n line-height: var(--calendar-month-title-row-height, 44px);\n font-weight: var(--calendar-month-title-font-weight, 500);\n font-size: var(--calendar-month-title-font-size, 14px);\n text-align: center;\n}\n\n:host .quark-calendar-header-title {\n color: var(--calendar-title-color, #242729); \n height: var(--calendar-title-row-height, 44px);\n line-height: var(--calendar-title-row-height, 44px);\n font-weight: var(--calendar-title-font-weight, 500);\n font-size: var(--calendar-title-font-size, 16px);\n text-align: center;\n}\n\n:host .quark-calendar-header-subtitle {\n color: var(--calendar-subtitle-color, #242729); \n height: var(--calendar-subtitle-row-height, 44px);\n line-height: var(--calendar-subtitle-row-height, 44px);\n font-weight: var(--calendar-subtitle-font-weight, 500);\n font-size: var(--calendar-subtitle-font-size, 14px);\n text-align: center;\n}\n\n:host .quark-calendar-weekdays {\n display: flex;\n}\n\n:host .quark-calendar-weekday {\n flex: 1;\n font-size: var(--calendar-weekday-font-size, 12px);\n line-height: 30px;\n text-align: center;\n}\n\n:host .quark-calendar-body {\n flex: 1;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n:host .quark-calendar-body::-webkit-scrollbar {\n display: none;\n}\n\n:host .quark-calendar-days {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n user-select: none;\n}\n\n:host .quark-calendar-month-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 0;\n color: rgba(242, 243, 245, 0.8);;\n font-size: 160px;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n\n:host .quark-calendar-day,\n:host .quark-calendar-selected-day {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n:host .quark-calendar-day {\n position: relative;\n width: 14.285%;\n height: var(--calendar-day-row-height, 64px);\n font-size: var(--calendar-day-font-size, 16px);\n margin-bottom: 4px;\n cursor: pointer;\n}\n\n:host .quark-calendar-day-end,\n:host .quark-calendar-day-start,\n:host .quark-calendar-day-start-end,\n:host .quark-calendar-day-multiple-middle,\n:host .quark-calendar-day-multiple-selected {\n color: var(--calendar-day-selected-color, #fff);\n background: var(--calendar-theme-color, #0088ff);\n}\n\n:host .quark-calendar-day-start {\n border-radius: var(--calendar-day-border-radius, 6px) 0 0 var(--calendar-day-border-radius, 6px);\n}\n\n:host .quark-calendar-day-end {\n border-radius: 0 var(--calendar-day-border-radius, 6px) var(--calendar-day-border-radius, 6px) 0;\n}\n\n:host .quark-calendar-day-start-end,\n:host .quark-calendar-day-multiple-selected {\n border-radius: var(--calendar-day-border-radius, 6px);\n}\n\n:host .quark-calendar-day-middle {\n color: var(--calendar-theme-color, #0088ff);\n}\n\n:host .quark-calendar-day-middle::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: currentColor;\n opacity: 0.1;\n content: '';\n}\n\n:host .quark-calendar-day-disabled {\n color: var(--calendar-day-disabled-color, #bbbbbb);\n cursor: default;\n}\n\n:host .quark-calendar-top-info,\n:host .quark-calendar-bottom-info {\n position: absolute;\n right: 0;\n left: 0;\n font-size: 10px;\n line-height: 14px;\n overflow:hidden;\n text-overflow:ellipsis;\n white-space:nowrap;\n @media (max-width: 350px) {\n font-size: 9px;\n }\n}\n\n:host .quark-calendar-top-info {\n top: 6px;\n}\n\n:host .quark-calendar-bottom-info {\n bottom: 6px;\n}\n\n:host .quark-calendar-selected-day {\n width: 54px;\n height: 54px;\n color: var(--calendar-day-selected-color, #fff);\n background: var(--calendar-theme-color, #0088ff);\n border-radius: var(--calendar-day-border-radius, 6px);\n}\n\n:host .quark-calendar-footer {\n flex-shrink: 0;\n margin: 8px 0;\n padding-left: var(--calendar-footer-padding, 16px);\n padding-right: var(--calendar-footer-padding, 16px);\n}\n\n:host .quark-calendar-button {\n --quark-theme-color: var(--calendar-theme-color, #0088ff);\n}\n\n:host .quark-calendar-pop-up {\n --popup-max-width: 100%;\n}:host {\n display: block;\n background: #fff;\n}\n\n:host .quark-swipe-cell {\n position: relative;\n overflow: hidden;\n cursor: grab;\n}\n\n:host .quark-swipe-cell__left,\n:host .quark-swipe-cell__right {\n position: absolute;\n top: 0;\n height: 100%;\n}\n\n:host .quark-swipe-cell__left {\n left: 0;\n transform: translate3d(-100%, 0, 0);\n}\n\n:host .quark-swipe-cell__right {\n right: 0;\n transform: translate3d(100%, 0, 0);\n}\n:host {\n width: 100%;\n display: block;\n}\n\n:host ul {\n list-style: none;\n padding: 0;\n}\n\n:host .quark-picker-container {\n width: 100%;\n height: var(--pickerview-height, 170px);\n overflow: hidden;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n\n:host .quark-picker-content {\n /* position: absolute; */\n display: flex;\n /* top: 56px; */\n /* bottom: 72px; */\n /* left: 0; */\n /* right: 0; */\n background-color: white;\n box-sizing: border-box;\n}\n\n\n:host .quark-picker-mask-top {\n z-index: 10;\n width: 100%;\n height: var(--pickerview-row-top-mask-height, 68px);\n pointer-events: none;\n transform: translateZ(0);\n}\n:host .quark-picker-mask-bottom {\n z-index: 10;\n width: 100%;\n height: var(--pickerview-row-bottom-mask-height, 68px);\n pointer-events: none;\n transform: translateZ(0);\n}\n\n\n.quark-picker-mask-top {\n position: absolute;\n top: 0;\n background: linear-gradient(\n to top,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-mask-bottom {\n position: absolute;\n bottom: 0;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.8)\n );\n}\n\n:host .quark-picker-current {\n position: absolute;\n top: var(--pickerview-current-top, 70px);\n height: var(--pickerview-item-height, 34px);\n width: 100%;\n /* padding: 0 16px; */\n box-sizing: border-box;\n}\n\n:host .quark-picker-current .quark-picker-current-mask {\n height: 100%;\n border: 1px solid #eee;\n border: var(--pickerview-border, 1px solid #eee);\n border-left: none;\n box-sizing: border-box;\n border-right: none;\n}\n\n:host .quark-picker-wheel-wrapper {\n display: flex;\n width: 100%;\n}\n\n:host .quark-picker-wheel {\n flex: 1;\n width: 1%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .quark-picker-wheel-scroll {\n padding: 0;\n margin-top: var(--pickerview-scroll-margin-top, 71px);\n list-style: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-picker-wheel-item {\n font-family: PingFangSC-Semibold, PingFang SC;\n font-size: var(--pickerview-item-font-size, 16px);\n list-style: none;\n line-height: var(--pickerview-item-height, 34px);\n height: var(--pickerview-item-height, 34px);\n overflow: hidden;\n white-space: nowrap;\n color: var(--pickerview-item-color, #242729);\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host([bottomhidden]) .quark-picker-picker-content {\n bottom: 0px;\n}\n\n:host([bottomhidden]) .quark-picker-picker-container {\n height: 266px;\n}\n:root {\n --quark-dropdown-menu-option-active-color: #0088ff;\n}\n\n:host {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-width: 0;\n}\n\n.quark-dropdown-item {\n cursor: pointer;\n height: 100%;\n}\n\n.quark-dropdown-menu__title {\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n color: var(--quark-dropdown-menu-title-color, #242729);\n font-size: var(--quark-dropdown-menu-title-font-size, 14px);\n padding: var(--quark-dropdown-menu-title-padding, 8px);\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.quark-dropdown-menu__title--disabled {\n color: #969799;\n}\n\n.quark-dropdown-menu__title::after {\n position: absolute;\n top: 50%;\n right: -4px;\n margin-top: -5px;\n border: 3px solid;\n border-color: transparent transparent var(--quark-dropdown-menu-title-color, #242729) var(--quark-dropdown-menu-title-color, #242729);\n transform: rotate(-45deg);\n opacity: 0.8;\n content: '';\n}\n\n.quark-dropdown-menu__title--disabled::after {\n border-color: transparent transparent #969799 #969799;\n}\n\n.quark-dropdown-menu__title--active {\n color: var(--quark-dropdown-menu-title-active-text-color);\n}\n\n.quark-dropdown-menu__title--active::after {\n border-color: transparent transparent currentColor currentColor;\n}\n\n.quark-dropdown-menu__title--down::after {\n margin-top: -1px;\n transform: rotate(135deg);\n}\n\n.quark-dropdown-item__content--wrapper {\n position: fixed;\n z-index: 10;\n width: 100%;\n left: 0;\n overflow: hidden;\n box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s;\n transition-timing-function: ease-out;\n}\n\n.quark-dropdown-item__content {\n position: absolute;\n left: 0;\n z-index: 10;\n right: 0;\n right: -17px;\n padding-right: 17px;\n overflow-x: hidden;\n overflow-y: scroll;\n background-color: #fff;\n transition: all .3s;\n transition-timing-function: ease-out;\n}\n\n.quark-dropdown-item__option--active {\n color: var(--quark-dropdown-menu-option-active-color);\n}\n\n.quark-dropdown-item__content--mask {\n position: absolute;\n visibility: hidden;\n left: 0;\n top: 0;\n width: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n height: 100%;\n opacity: 0;\n transition: all .3s;\n transition-timing-function: ease-out;\n}:root {\n --quark-dropdown-menu-height: 48px;\n --quark-dropdown-menu-title-background-color: #fff\n}\n\n.quark-dropdown-menu__bar {\n width: 100%;\n height: var(--quark-dropdown-menu-height);\n position: relative;\n box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);\n overflow: hidden;\n}\n\n.quark-dropdown-menu__bar-inner {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: -17px;\n padding-bottom: 17px;\n overflow-y: hidden;\n overflow-x: scroll;\n background: var(--quark-dropdown-menu-title-background-color);\n}\n\n.quark-dropdown-menu__bar-content {\n display: flex;\n height: var(--quark-dropdown-menu-height);\n}.quark-watermark {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n background-repeat: repeat;\n z-index: var(--watermark-z-index, 2000);\n}\n:host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: var(--popup-extra-mask-color, rgba(0, 0, 0, 0.7));\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: var(--popup-extra-z-index, 999);\n visibility: visible;\n}\n\n:host .quark-popup-extra-mask {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: transparent;\n z-index: -1;\n}\n\n:host .quark-popup-extra {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n box-sizing: border-box;\n background-color: #ffffff;\n opacity: 1;\n transition: transform .3s;\n transition-timing-function: ease-out;\n}\n\n:host .leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-popup-extra::-webkit-scrollbar {\n display: none;\n}\n\n:host .quark-popup-extra-close-btn {\n position: absolute;\n top: 16px;\n right: 16px;\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #879099;\n background: 0 0;\n border: 0;\n transition: color .3s;\n}\n\n:host .quark-popup-extra-close-btn :hover {\n color: black\n}\n\n:host([safearea]) .quark-popup-extra {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n:host([hideclose]) .quark-popup-extra-close-btn {\n display: none;\n}\n\n:host .quark-popup-extra {\n transform: translate(0px, 100%);\n position: fixed;\n width: 100%;\n bottom: 0;\n left: 0;\n max-height: var(--popup-extra-max-height, 80%);\n min-height: var(--popup-extra-min-height, 200px);\n border-top-left-radius: var(--popup-extra-border-radius, 16px);\n border-top-right-radius: var(--popup-extra-border-radius, 16px);\n}\n:host .quark-popup-extra-body {\n overflow-y: auto;\n}\n\n:host([open]) .quark-popup-extra {\n transform: translate(0px, 0%);\n}\n\n.quark-popup-extra-header {\n padding: 16px;\n}\n\n.quark-popup-extra-toper {\n margin-right: 36px;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.quark-popup-extra-title {\n font-size: 18px;\n color: var(--popup-extra-title-color, #242729);\n line-height: 24px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n font-family: var(\n --popup-extra-title-font-family,\n PingFangSC-Medium,\n PingFang SC\n );\n font-weight: 500;\n}\n\n.quark-popup-extra-subtitle {\n font-size: 14px;\n color: var(--popup-extra-subtitle-color, #879099);\n line-height: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n font-family: var(\n --popup-extra-subtitle-font-family,\n \"PingFangSC-Regular, PingFang SC, sans-serif\"\n );\n font-weight: 400;\n margin-top: 4px;\n}\n\n.quark-popup-extra-body-with-topline {\n border-top: 0.5px #f0f2f5 solid;\n}\n\n.quark-popup-extra-body-with-bottonline {\n border-bottom: 0.5px #f0f2f5 solid;\n}\n\n.quark-popup-extra footer {\n position: fixed;\n width: 100%;\n bottom: 0;\n padding: 10px 10px 42px;\n background: #fff;\n box-sizing: border-box;\n}\n\n.quark-popup-extra quark-button {\n height: 56px;\n color: #fff;\n background: linear-gradient(270deg, #00d9ff 0%, #0098fe 100%);\n width: 100%;\n font-size: 16px;\n box-sizing: border-box;\n}\n:host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host .quark-uploader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n margin: 0 var(--uploader-margin, 6px) var(--uploader-margin, 6px) 0;\n}\n\n:host .quark-uploader-icon {\n box-sizing: border-box;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n background: var(--uploader-background);\n border-width: var(--uploader-border-width, 1px);\n border-color: var(--uploader-border-color, #e1e6eb);\n border-style: var(--uploader-border-style, dashed);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n border-radius: var(--uploader-radius, 4px);\n}\n\n:host input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n cursor: pointer;\n}\n\n:host .quark-uploader-uploader-text {\n font-size: 10px;\n color: #879099;\n}\n\n:host .quark-uploader-preview-item {\n position: relative;\n box-sizing: border-box;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n margin: 0 var(--uploader-margin, 6px) var(--uploader-margin, 6px) 0;\n border-radius: var(--uploader-radius, 4px);\n}\n\n:host .quark-uploader-preview-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n\n:host .quark-uploader-remove {\n display: inline-block;\n position: absolute;\n top: 1px;\n right: 1px;\n width: var(--uploader-delete-wrap-width, 14px);\n height: var(--uploader-delete-wrap-height, 14px);\n background: var(--uploader-delete-background, rgb(0 0 0));\n border-bottom-left-radius: 12px;\n display: flex;\n justify-content: flex-end;\n cursor: pointer;\n}\n\n:host .quark-uploader-preview-item quark-icon-close {\n color: var(--uploader-delete-color, #fff);\n font-size: var(--uploader-delete-size, 10px);\n}\n\n:host .uploading {\n position: absolute;\n width: var(--uploader-width, 93px);\n height: var(--uploader-height, 93px);\n border-radius: var(--uploader-radius, 4px);\n background: var(--uploader-mask-background, rgba(50, 50, 51, 0.88));\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n\n:host .uploading-text {\n font-size: var(--van-uploader-mask-font-size, 10px);\n color: var(--van-uploader-mask-color, #fff);\n}\n";document.head.appendChild(__vite_style__);System.register([],function(exports,module){'use strict';return{execute:function(){exports({A:ActionSheet$1,E:imagePreview,G:createCommentVNode,H:MarketDialog,I:ActionSheet,J:B,M:M$1,P:P,a:createBaseVNode,b:openBlock,c:createElementBlock,d:defineComponent,e:createStaticVNode,f:reactive,h:createTextVNode,i:inject,k:onDeactivated,l:onActivated,m:renderList,n:normalizeClass,p:pushScopeId,q:popScopeId,r:ref,w:withDirectives});const p$3=function polyfill(){const relList=document.createElement('link').relList;if(relList&&relList.supports&&relList.supports('modulepreload')){return;}for(const link of document.querySelectorAll('link[rel="modulepreload"]')){processPreload(link);}new MutationObserver(mutations=>{for(const mutation of mutations){if(mutation.type!=='childList'){continue;}for(const node of mutation.addedNodes){if(node.tagName==='LINK'&&node.rel==='modulepreload')processPreload(node);}}}).observe(document,{childList:true,subtree:true});function getFetchOpts(script){const fetchOpts={};if(script.integrity)fetchOpts.integrity=script.integrity;if(script.referrerpolicy)fetchOpts.referrerPolicy=script.referrerpolicy;if(script.crossorigin==='use-credentials')fetchOpts.credentials='include';else if(script.crossorigin==='anonymous')fetchOpts.credentials='omit';else fetchOpts.credentials='same-origin';return fetchOpts;}function processPreload(link){if(link.ep)// ep marker = processed +return;link.ep=true;// prepopulate the load record +const fetchOpts=getFetchOpts(link);fetch(link.href,fetchOpts);}};false&&p$3();function makeMap(str,expectsLowerCase){const map=/* @__PURE__ */Object.create(null);const list=str.split(",");for(let i=0;i!!map[val.toLowerCase()]:val=>!!map[val];}const EMPTY_OBJ={};const EMPTY_ARR=[];const NOOP=()=>{};const NO=()=>false;const onRE=/^on[^a-z]/;const isOn=key=>onRE.test(key);const isModelListener=key=>key.startsWith("onUpdate:");const extend$3=Object.assign;const remove=(arr,el)=>{const i=arr.indexOf(el);if(i>-1){arr.splice(i,1);}};const hasOwnProperty$2=Object.prototype.hasOwnProperty;const hasOwn$1=(val,key)=>hasOwnProperty$2.call(val,key);const isArray$2=Array.isArray;const isMap=val=>toTypeString(val)==="[object Map]";const isSet=val=>toTypeString(val)==="[object Set]";const isFunction$2=val=>typeof val==="function";const isString=val=>typeof val==="string";const isSymbol=val=>typeof val==="symbol";const isObject$3=val=>val!==null&&typeof val==="object";const isPromise$1=val=>{return isObject$3(val)&&isFunction$2(val.then)&&isFunction$2(val.catch);};const objectToString$1=Object.prototype.toString;const toTypeString=value=>objectToString$1.call(value);const toRawType=value=>{return toTypeString(value).slice(8,-1);};const isPlainObject=val=>toTypeString(val)==="[object Object]";const isIntegerKey=key=>isString(key)&&key!=="NaN"&&key[0]!=="-"&&""+parseInt(key,10)===key;const isReservedProp=/* @__PURE__ */makeMap(// the leading comma is intentional so empty string "" is also included +",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted");const cacheStringFunction=fn=>{const cache=/* @__PURE__ */Object.create(null);return str=>{const hit=cache[str];return hit||(cache[str]=fn(str));};};const camelizeRE=/-(\w)/g;const camelize=cacheStringFunction(str=>{return str.replace(camelizeRE,(_,c)=>c?c.toUpperCase():"");});const hyphenateRE=/\B([A-Z])/g;const hyphenate=cacheStringFunction(str=>str.replace(hyphenateRE,"-$1").toLowerCase());const capitalize=cacheStringFunction(str=>str.charAt(0).toUpperCase()+str.slice(1));const toHandlerKey=cacheStringFunction(str=>str?`on${capitalize(str)}`:``);const hasChanged=(value,oldValue)=>!Object.is(value,oldValue);const invokeArrayFns=(fns,arg)=>{for(let i=0;i{Object.defineProperty(obj,key,{configurable:true,enumerable:false,value});};const looseToNumber=val=>{const n=parseFloat(val);return isNaN(n)?val:n;};let _globalThis;const getGlobalThis=()=>{return _globalThis||(_globalThis=typeof globalThis!=="undefined"?globalThis:typeof self!=="undefined"?self:typeof window!=="undefined"?window:typeof global!=="undefined"?global:{});};function normalizeStyle(value){if(isArray$2(value)){const res={};for(let i=0;i{if(item){const tmp=item.split(propertyDelimiterRE);tmp.length>1&&(ret[tmp[0].trim()]=tmp[1].trim());}});return ret;}function normalizeClass(value){let res="";if(isString(value)){res=value;}else if(isArray$2(value)){for(let i=0;i{return isString(val)?val:val==null?"":isArray$2(val)||isObject$3(val)&&(val.toString===objectToString$1||!isFunction$2(val.toString))?JSON.stringify(val,replacer,2):String(val);});const replacer=(_key,val)=>{if(val&&val.__v_isRef){return replacer(_key,val.value);}else if(isMap(val)){return{[`Map(${val.size})`]:[...val.entries()].reduce((entries,[key,val2])=>{entries[`${key} =>`]=val2;return entries;},{})};}else if(isSet(val)){return{[`Set(${val.size})`]:[...val.values()]};}else if(isObject$3(val)&&!isArray$2(val)&&!isPlainObject(val)){return String(val);}return val;};let activeEffectScope;class EffectScope{constructor(detached=false){this.detached=detached;/** + * @internal + */this._active=true;/** + * @internal + */this.effects=[];/** + * @internal + */this.cleanups=[];this.parent=activeEffectScope;if(!detached&&activeEffectScope){this.index=(activeEffectScope.scopes||(activeEffectScope.scopes=[])).push(this)-1;}}get active(){return this._active;}run(fn){if(this._active){const currentEffectScope=activeEffectScope;try{activeEffectScope=this;return fn();}finally{activeEffectScope=currentEffectScope;}}}/** + * This should only be called on non-detached scopes + * @internal + */on(){activeEffectScope=this;}/** + * This should only be called on non-detached scopes + * @internal + */off(){activeEffectScope=this.parent;}stop(fromParent){if(this._active){let i,l;for(i=0,l=this.effects.length;i{const dep=new Set(effects);dep.w=0;dep.n=0;return dep;};const wasTracked=dep=>(dep.w&trackOpBit)>0;const newTracked=dep=>(dep.n&trackOpBit)>0;const initDepMarkers=({deps})=>{if(deps.length){for(let i=0;i{const{deps}=effect;if(deps.length){let ptr=0;for(let i=0;i{if(key2==="length"||key2>=newLength){deps.push(dep);}});}else{if(key!==void 0){deps.push(depsMap.get(key));}switch(type){case"add":if(!isArray$2(target)){deps.push(depsMap.get(ITERATE_KEY));if(isMap(target)){deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));}}else if(isIntegerKey(key)){deps.push(depsMap.get("length"));}break;case"delete":if(!isArray$2(target)){deps.push(depsMap.get(ITERATE_KEY));if(isMap(target)){deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));}}break;case"set":if(isMap(target)){deps.push(depsMap.get(ITERATE_KEY));}break;}}if(deps.length===1){if(deps[0]){{triggerEffects(deps[0]);}}}else{const effects=[];for(const dep of deps){if(dep){effects.push(...dep);}}{triggerEffects(createDep(effects));}}}function triggerEffects(dep,debuggerEventExtraInfo){const effects=isArray$2(dep)?dep:[...dep];for(const effect2 of effects){if(effect2.computed){triggerEffect(effect2);}}for(const effect2 of effects){if(!effect2.computed){triggerEffect(effect2);}}}function triggerEffect(effect2,debuggerEventExtraInfo){if(effect2!==activeEffect||effect2.allowRecurse){if(effect2.scheduler){effect2.scheduler();}else{effect2.run();}}}const isNonTrackableKeys=/* @__PURE__ */makeMap(`__proto__,__v_isRef,__isVue`);const builtInSymbols=new Set(/* @__PURE__ */Object.getOwnPropertyNames(Symbol).filter(key=>key!=="arguments"&&key!=="caller").map(key=>Symbol[key]).filter(isSymbol));const get$1=/* @__PURE__ */createGetter();const shallowGet=/* @__PURE__ */createGetter(false,true);const readonlyGet=/* @__PURE__ */createGetter(true);const arrayInstrumentations=/* @__PURE__ */createArrayInstrumentations();function createArrayInstrumentations(){const instrumentations={};["includes","indexOf","lastIndexOf"].forEach(key=>{instrumentations[key]=function(...args){const arr=toRaw(this);for(let i=0,l=this.length;i{instrumentations[key]=function(...args){pauseTracking();const res=toRaw(this)[key].apply(this,args);resetTracking();return res;};});return instrumentations;}function hasOwnProperty$1(key){const obj=toRaw(this);track(obj,"has",key);return obj.hasOwnProperty(key);}function createGetter(isReadonly2=false,shallow=false){return function get2(target,key,receiver){if(key==="__v_isReactive"){return!isReadonly2;}else if(key==="__v_isReadonly"){return isReadonly2;}else if(key==="__v_isShallow"){return shallow;}else if(key==="__v_raw"&&receiver===(isReadonly2?shallow?shallowReadonlyMap:readonlyMap:shallow?shallowReactiveMap:reactiveMap).get(target)){return target;}const targetIsArray=isArray$2(target);if(!isReadonly2){if(targetIsArray&&hasOwn$1(arrayInstrumentations,key)){return Reflect.get(arrayInstrumentations,key,receiver);}if(key==="hasOwnProperty"){return hasOwnProperty$1;}}const res=Reflect.get(target,key,receiver);if(isSymbol(key)?builtInSymbols.has(key):isNonTrackableKeys(key)){return res;}if(!isReadonly2){track(target,"get",key);}if(shallow){return res;}if(isRef(res)){return targetIsArray&&isIntegerKey(key)?res:res.value;}if(isObject$3(res)){return isReadonly2?readonly(res):reactive(res);}return res;};}const set$1=/* @__PURE__ */createSetter();const shallowSet=/* @__PURE__ */createSetter(true);function createSetter(shallow=false){return function set2(target,key,value,receiver){let oldValue=target[key];if(isReadonly(oldValue)&&isRef(oldValue)&&!isRef(value)){return false;}if(!shallow){if(!isShallow(value)&&!isReadonly(value)){oldValue=toRaw(oldValue);value=toRaw(value);}if(!isArray$2(target)&&isRef(oldValue)&&!isRef(value)){oldValue.value=value;return true;}}const hadKey=isArray$2(target)&&isIntegerKey(key)?Number(key)value;const getProto=v=>Reflect.getPrototypeOf(v);function get(target,key,isReadonly=false,isShallow=false){target=target["__v_raw"];const rawTarget=toRaw(target);const rawKey=toRaw(key);if(!isReadonly){if(key!==rawKey){track(rawTarget,"get",key);}track(rawTarget,"get",rawKey);}const{has:has2}=getProto(rawTarget);const wrap=isShallow?toShallow:isReadonly?toReadonly:toReactive;if(has2.call(rawTarget,key)){return wrap(target.get(key));}else if(has2.call(rawTarget,rawKey)){return wrap(target.get(rawKey));}else if(target!==rawTarget){target.get(key);}}function has(key,isReadonly=false){const target=this["__v_raw"];const rawTarget=toRaw(target);const rawKey=toRaw(key);if(!isReadonly){if(key!==rawKey){track(rawTarget,"has",key);}track(rawTarget,"has",rawKey);}return key===rawKey?target.has(key):target.has(key)||target.has(rawKey);}function size(target,isReadonly=false){target=target["__v_raw"];!isReadonly&&track(toRaw(target),"iterate",ITERATE_KEY);return Reflect.get(target,"size",target);}function add(value){value=toRaw(value);const target=toRaw(this);const proto=getProto(target);const hadKey=proto.has.call(target,value);if(!hadKey){target.add(value);trigger(target,"add",value,value);}return this;}function set(key,value){value=toRaw(value);const target=toRaw(this);const{has:has2,get:get2}=getProto(target);let hadKey=has2.call(target,key);if(!hadKey){key=toRaw(key);hadKey=has2.call(target,key);}const oldValue=get2.call(target,key);target.set(key,value);if(!hadKey){trigger(target,"add",key,value);}else if(hasChanged(value,oldValue)){trigger(target,"set",key,value);}return this;}function deleteEntry(key){const target=toRaw(this);const{has:has2,get:get2}=getProto(target);let hadKey=has2.call(target,key);if(!hadKey){key=toRaw(key);hadKey=has2.call(target,key);}get2?get2.call(target,key):void 0;const result=target.delete(key);if(hadKey){trigger(target,"delete",key,void 0);}return result;}function clear(){const target=toRaw(this);const hadItems=target.size!==0;const result=target.clear();if(hadItems){trigger(target,"clear",void 0,void 0);}return result;}function createForEach(isReadonly,isShallow){return function forEach(callback,thisArg){const observed=this;const target=observed["__v_raw"];const rawTarget=toRaw(target);const wrap=isShallow?toShallow:isReadonly?toReadonly:toReactive;!isReadonly&&track(rawTarget,"iterate",ITERATE_KEY);return target.forEach((value,key)=>{return callback.call(thisArg,wrap(value),wrap(key),observed);});};}function createIterableMethod(method,isReadonly,isShallow){return function(...args){const target=this["__v_raw"];const rawTarget=toRaw(target);const targetIsMap=isMap(rawTarget);const isPair=method==="entries"||method===Symbol.iterator&&targetIsMap;const isKeyOnly=method==="keys"&&targetIsMap;const innerIterator=target[method](...args);const wrap=isShallow?toShallow:isReadonly?toReadonly:toReactive;!isReadonly&&track(rawTarget,"iterate",isKeyOnly?MAP_KEY_ITERATE_KEY:ITERATE_KEY);return{// iterator protocol +next(){const{value,done}=innerIterator.next();return done?{value,done}:{value:isPair?[wrap(value[0]),wrap(value[1])]:wrap(value),done};},// iterable protocol +[Symbol.iterator](){return this;}};};}function createReadonlyMethod(type){return function(...args){return type==="delete"?false:this;};}function createInstrumentations(){const mutableInstrumentations2={get(key){return get(this,key);},get size(){return size(this);},has,add,set,delete:deleteEntry,clear,forEach:createForEach(false,false)};const shallowInstrumentations2={get(key){return get(this,key,false,true);},get size(){return size(this);},has,add,set,delete:deleteEntry,clear,forEach:createForEach(false,true)};const readonlyInstrumentations2={get(key){return get(this,key,true);},get size(){return size(this,true);},has(key){return has.call(this,key,true);},add:createReadonlyMethod("add"),set:createReadonlyMethod("set"),delete:createReadonlyMethod("delete"),clear:createReadonlyMethod("clear"),forEach:createForEach(true,false)};const shallowReadonlyInstrumentations2={get(key){return get(this,key,true,true);},get size(){return size(this,true);},has(key){return has.call(this,key,true);},add:createReadonlyMethod("add"),set:createReadonlyMethod("set"),delete:createReadonlyMethod("delete"),clear:createReadonlyMethod("clear"),forEach:createForEach(true,true)};const iteratorMethods=["keys","values","entries",Symbol.iterator];iteratorMethods.forEach(method=>{mutableInstrumentations2[method]=createIterableMethod(method,false,false);readonlyInstrumentations2[method]=createIterableMethod(method,true,false);shallowInstrumentations2[method]=createIterableMethod(method,false,true);shallowReadonlyInstrumentations2[method]=createIterableMethod(method,true,true);});return[mutableInstrumentations2,readonlyInstrumentations2,shallowInstrumentations2,shallowReadonlyInstrumentations2];}const[mutableInstrumentations,readonlyInstrumentations,shallowInstrumentations,shallowReadonlyInstrumentations]=/* @__PURE__ */createInstrumentations();function createInstrumentationGetter(isReadonly,shallow){const instrumentations=shallow?isReadonly?shallowReadonlyInstrumentations:shallowInstrumentations:isReadonly?readonlyInstrumentations:mutableInstrumentations;return(target,key,receiver)=>{if(key==="__v_isReactive"){return!isReadonly;}else if(key==="__v_isReadonly"){return isReadonly;}else if(key==="__v_raw"){return target;}return Reflect.get(hasOwn$1(instrumentations,key)&&key in target?instrumentations:target,key,receiver);};}const mutableCollectionHandlers={get:/* @__PURE__ */createInstrumentationGetter(false,false)};const shallowCollectionHandlers={get:/* @__PURE__ */createInstrumentationGetter(false,true)};const readonlyCollectionHandlers={get:/* @__PURE__ */createInstrumentationGetter(true,false)};const reactiveMap=/* @__PURE__ */new WeakMap();const shallowReactiveMap=/* @__PURE__ */new WeakMap();const readonlyMap=/* @__PURE__ */new WeakMap();const shallowReadonlyMap=/* @__PURE__ */new WeakMap();function targetTypeMap(rawType){switch(rawType){case"Object":case"Array":return 1/* COMMON */;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2/* COLLECTION */;default:return 0/* INVALID */;}}function getTargetType(value){return value["__v_skip"]||!Object.isExtensible(value)?0/* INVALID */:targetTypeMap(toRawType(value));}function reactive(target){if(isReadonly(target)){return target;}return createReactiveObject(target,false,mutableHandlers,mutableCollectionHandlers,reactiveMap);}function shallowReactive(target){return createReactiveObject(target,false,shallowReactiveHandlers,shallowCollectionHandlers,shallowReactiveMap);}function readonly(target){return createReactiveObject(target,true,readonlyHandlers,readonlyCollectionHandlers,readonlyMap);}function createReactiveObject(target,isReadonly2,baseHandlers,collectionHandlers,proxyMap){if(!isObject$3(target)){return target;}if(target["__v_raw"]&&!(isReadonly2&&target["__v_isReactive"])){return target;}const existingProxy=proxyMap.get(target);if(existingProxy){return existingProxy;}const targetType=getTargetType(target);if(targetType===0/* INVALID */){return target;}const proxy=new Proxy(target,targetType===2/* COLLECTION */?collectionHandlers:baseHandlers);proxyMap.set(target,proxy);return proxy;}function isReactive(value){if(isReadonly(value)){return isReactive(value["__v_raw"]);}return!!(value&&value["__v_isReactive"]);}function isReadonly(value){return!!(value&&value["__v_isReadonly"]);}function isShallow(value){return!!(value&&value["__v_isShallow"]);}function isProxy(value){return isReactive(value)||isReadonly(value);}function toRaw(observed){const raw=observed&&observed["__v_raw"];return raw?toRaw(raw):observed;}function markRaw(value){def(value,"__v_skip",true);return value;}const toReactive=value=>isObject$3(value)?reactive(value):value;const toReadonly=value=>isObject$3(value)?readonly(value):value;function trackRefValue(ref2){if(shouldTrack&&activeEffect){ref2=toRaw(ref2);{trackEffects(ref2.dep||(ref2.dep=createDep()));}}}function triggerRefValue(ref2,newVal){ref2=toRaw(ref2);const dep=ref2.dep;if(dep){{triggerEffects(dep);}}}function isRef(r){return!!(r&&r.__v_isRef===true);}function ref(value){return createRef(value,false);}function shallowRef(value){return createRef(value,true);}function createRef(rawValue,shallow){if(isRef(rawValue)){return rawValue;}return new RefImpl(rawValue,shallow);}class RefImpl{constructor(value,__v_isShallow){this.__v_isShallow=__v_isShallow;this.dep=void 0;this.__v_isRef=true;this._rawValue=__v_isShallow?value:toRaw(value);this._value=__v_isShallow?value:toReactive(value);}get value(){trackRefValue(this);return this._value;}set value(newVal){const useDirectValue=this.__v_isShallow||isShallow(newVal)||isReadonly(newVal);newVal=useDirectValue?newVal:toRaw(newVal);if(hasChanged(newVal,this._rawValue)){this._rawValue=newVal;this._value=useDirectValue?newVal:toReactive(newVal);triggerRefValue(this);}}}function unref(ref2){return isRef(ref2)?ref2.value:ref2;}const shallowUnwrapHandlers={get:(target,key,receiver)=>unref(Reflect.get(target,key,receiver)),set:(target,key,value,receiver)=>{const oldValue=target[key];if(isRef(oldValue)&&!isRef(value)){oldValue.value=value;return true;}else{return Reflect.set(target,key,value,receiver);}}};function proxyRefs(objectWithRefs){return isReactive(objectWithRefs)?objectWithRefs:new Proxy(objectWithRefs,shallowUnwrapHandlers);}class ComputedRefImpl{constructor(getter,_setter,isReadonly,isSSR){this._setter=_setter;this.dep=void 0;this.__v_isRef=true;this["__v_isReadonly"]=false;this._dirty=true;this.effect=new ReactiveEffect(getter,()=>{if(!this._dirty){this._dirty=true;triggerRefValue(this);}});this.effect.computed=this;this.effect.active=this._cacheable=!isSSR;this["__v_isReadonly"]=isReadonly;}get value(){const self=toRaw(this);trackRefValue(self);if(self._dirty||!self._cacheable){self._dirty=false;self._value=self.effect.run();}return self._value;}set value(newValue){this._setter(newValue);}}function computed$1(getterOrOptions,debugOptions,isSSR=false){let getter;let setter;const onlyGetter=isFunction$2(getterOrOptions);if(onlyGetter){getter=getterOrOptions;setter=NOOP;}else{getter=getterOrOptions.get;setter=getterOrOptions.set;}const cRef=new ComputedRefImpl(getter,setter,onlyGetter||!setter,isSSR);return cRef;}function warn$2(msg,...args){return;}function callWithErrorHandling(fn,instance,type,args){let res;try{res=args?fn(...args):fn();}catch(err){handleError(err,instance,type);}return res;}function callWithAsyncErrorHandling(fn,instance,type,args){if(isFunction$2(fn)){const res=callWithErrorHandling(fn,instance,type,args);if(res&&isPromise$1(res)){res.catch(err=>{handleError(err,instance,type);});}return res;}const values=[];for(let i=0;i>>1;const middleJobId=getId(queue[middle]);middleJobIdflushIndex){queue.splice(i,1);}}function queuePostFlushCb(cb){if(!isArray$2(cb)){if(!activePostFlushCbs||!activePostFlushCbs.includes(cb,cb.allowRecurse?postFlushIndex+1:postFlushIndex)){pendingPostFlushCbs.push(cb);}}else{pendingPostFlushCbs.push(...cb);}queueFlush();}function flushPreFlushCbs(seen,i=isFlushing?flushIndex+1:0){for(;igetId(a)-getId(b));for(postFlushIndex=0;postFlushIndexjob.id==null?Infinity:job.id;const comparator=(a,b)=>{const diff=getId(a)-getId(b);if(diff===0){if(a.pre&&!b.pre)return-1;if(b.pre&&!a.pre)return 1;}return diff;};function flushJobs(seen){isFlushPending=false;isFlushing=true;queue.sort(comparator);const check=NOOP;try{for(flushIndex=0;flushIndexisString(a)?a.trim():a);}if(number){args=rawArgs.map(looseToNumber);}}let handlerName;let handler=props[handlerName=toHandlerKey(event)]||// also try camelCase event handler (#2249) +props[handlerName=toHandlerKey(camelize(event))];if(!handler&&isModelListener){handler=props[handlerName=toHandlerKey(hyphenate(event))];}if(handler){callWithAsyncErrorHandling(handler,instance,6,args);}const onceHandler=props[handlerName+`Once`];if(onceHandler){if(!instance.emitted){instance.emitted={};}else if(instance.emitted[handlerName]){return;}instance.emitted[handlerName]=true;callWithAsyncErrorHandling(onceHandler,instance,6,args);}}function normalizeEmitsOptions(comp,appContext,asMixin=false){const cache=appContext.emitsCache;const cached=cache.get(comp);if(cached!==void 0){return cached;}const raw=comp.emits;let normalized={};let hasExtends=false;if(!isFunction$2(comp)){const extendEmits=raw2=>{const normalizedFromExtend=normalizeEmitsOptions(raw2,appContext,true);if(normalizedFromExtend){hasExtends=true;extend$3(normalized,normalizedFromExtend);}};if(!asMixin&&appContext.mixins.length){appContext.mixins.forEach(extendEmits);}if(comp.extends){extendEmits(comp.extends);}if(comp.mixins){comp.mixins.forEach(extendEmits);}}if(!raw&&!hasExtends){if(isObject$3(comp)){cache.set(comp,null);}return null;}if(isArray$2(raw)){raw.forEach(key=>normalized[key]=null);}else{extend$3(normalized,raw);}if(isObject$3(comp)){cache.set(comp,normalized);}return normalized;}function isEmitListener(options,key){if(!options||!isOn(key)){return false;}key=key.slice(2).replace(/Once$/,"");return hasOwn$1(options,key[0].toLowerCase()+key.slice(1))||hasOwn$1(options,hyphenate(key))||hasOwn$1(options,key);}let currentRenderingInstance=null;let currentScopeId=null;function setCurrentRenderingInstance(instance){const prev=currentRenderingInstance;currentRenderingInstance=instance;currentScopeId=instance&&instance.type.__scopeId||null;return prev;}function pushScopeId(id){currentScopeId=id;}function popScopeId(){currentScopeId=null;}function withCtx(fn,ctx=currentRenderingInstance,isNonScopedSlot){if(!ctx)return fn;if(fn._n){return fn;}const renderFnWithContext=(...args)=>{if(renderFnWithContext._d){setBlockTracking(-1);}const prevInstance=setCurrentRenderingInstance(ctx);let res;try{res=fn(...args);}finally{setCurrentRenderingInstance(prevInstance);if(renderFnWithContext._d){setBlockTracking(1);}}return res;};renderFnWithContext._n=true;renderFnWithContext._c=true;renderFnWithContext._d=true;return renderFnWithContext;}function markAttrsAccessed(){}function renderComponentRoot(instance){const{type:Component,vnode,proxy,withProxy,props,propsOptions:[propsOptions],slots,attrs,emit,render,renderCache,data,setupState,ctx,inheritAttrs}=instance;let result;let fallthroughAttrs;const prev=setCurrentRenderingInstance(instance);try{if(vnode.shapeFlag&4){const proxyToUse=withProxy||proxy;result=normalizeVNode(render.call(proxyToUse,proxyToUse,renderCache,props,setupState,data,ctx));fallthroughAttrs=attrs;}else{const render2=Component;if(!!("production"!=="production")&&attrs===props);result=normalizeVNode(render2.length>1?render2(props,!!("production"!=="production")?{get attrs(){markAttrsAccessed();return attrs;},slots,emit}:{attrs,slots,emit}):render2(props,null/* we know it doesn't need it */));fallthroughAttrs=Component.props?attrs:getFunctionalFallthrough(attrs);}}catch(err){blockStack.length=0;handleError(err,instance,1);result=createVNode(Comment);}let root=result;if(fallthroughAttrs&&inheritAttrs!==false){const keys=Object.keys(fallthroughAttrs);const{shapeFlag}=root;if(keys.length){if(shapeFlag&(1|6)){if(propsOptions&&keys.some(isModelListener)){fallthroughAttrs=filterModelListeners(fallthroughAttrs,propsOptions);}root=cloneVNode(root,fallthroughAttrs);}}}if(vnode.dirs){root=cloneVNode(root);root.dirs=root.dirs?root.dirs.concat(vnode.dirs):vnode.dirs;}if(vnode.transition){root.transition=vnode.transition;}{result=root;}setCurrentRenderingInstance(prev);return result;}const getFunctionalFallthrough=attrs=>{let res;for(const key in attrs){if(key==="class"||key==="style"||isOn(key)){(res||(res={}))[key]=attrs[key];}}return res;};const filterModelListeners=(attrs,props)=>{const res={};for(const key in attrs){if(!isModelListener(key)||!(key.slice(9)in props)){res[key]=attrs[key];}}return res;};function shouldUpdateComponent(prevVNode,nextVNode,optimized){const{props:prevProps,children:prevChildren,component}=prevVNode;const{props:nextProps,children:nextChildren,patchFlag}=nextVNode;const emits=component.emitsOptions;if(nextVNode.dirs||nextVNode.transition){return true;}if(optimized&&patchFlag>=0){if(patchFlag&1024){return true;}if(patchFlag&16){if(!prevProps){return!!nextProps;}return hasPropsChanged(prevProps,nextProps,emits);}else if(patchFlag&8){const dynamicProps=nextVNode.dynamicProps;for(let i=0;itype.__isSuspense;function queueEffectWithSuspense(fn,suspense){if(suspense&&suspense.pendingBranch){if(isArray$2(fn)){suspense.effects.push(...fn);}else{suspense.effects.push(fn);}}else{queuePostFlushCb(fn);}}const INITIAL_WATCHER_VALUE={};function watch(source,cb,options){return doWatch(source,cb,options);}function doWatch(source,cb,{immediate,deep,flush,onTrack,onTrigger}=EMPTY_OBJ){var _a;const instance=getCurrentScope()===((_a=currentInstance)==null?void 0:_a.scope)?currentInstance:null;let getter;let forceTrigger=false;let isMultiSource=false;if(isRef(source)){getter=()=>source.value;forceTrigger=isShallow(source);}else if(isReactive(source)){getter=()=>source;deep=true;}else if(isArray$2(source)){isMultiSource=true;forceTrigger=source.some(s=>isReactive(s)||isShallow(s));getter=()=>source.map(s=>{if(isRef(s)){return s.value;}else if(isReactive(s)){return traverse(s);}else if(isFunction$2(s)){return callWithErrorHandling(s,instance,2);}else;});}else if(isFunction$2(source)){if(cb){getter=()=>callWithErrorHandling(source,instance,2);}else{getter=()=>{if(instance&&instance.isUnmounted){return;}if(cleanup){cleanup();}return callWithAsyncErrorHandling(source,instance,3,[onCleanup]);};}}else{getter=NOOP;}if(cb&&deep){const baseGetter=getter;getter=()=>traverse(baseGetter());}let cleanup;let onCleanup=fn=>{cleanup=effect.onStop=()=>{callWithErrorHandling(fn,instance,4);};};let ssrCleanup;if(isInSSRComponentSetup){onCleanup=NOOP;if(!cb){getter();}else if(immediate){callWithAsyncErrorHandling(cb,instance,3,[getter(),isMultiSource?[]:void 0,onCleanup]);}if(flush==="sync"){const ctx=useSSRContext();ssrCleanup=ctx.__watcherHandles||(ctx.__watcherHandles=[]);}else{return NOOP;}}let oldValue=isMultiSource?new Array(source.length).fill(INITIAL_WATCHER_VALUE):INITIAL_WATCHER_VALUE;const job=()=>{if(!effect.active){return;}if(cb){const newValue=effect.run();if(deep||forceTrigger||(isMultiSource?newValue.some((v,i)=>hasChanged(v,oldValue[i])):hasChanged(newValue,oldValue))||false){if(cleanup){cleanup();}callWithAsyncErrorHandling(cb,instance,3,[newValue,// pass undefined as the old value when it's changed for the first time +oldValue===INITIAL_WATCHER_VALUE?void 0:isMultiSource&&oldValue[0]===INITIAL_WATCHER_VALUE?[]:oldValue,onCleanup]);oldValue=newValue;}}else{effect.run();}};job.allowRecurse=!!cb;let scheduler;if(flush==="sync"){scheduler=job;}else if(flush==="post"){scheduler=()=>queuePostRenderEffect(job,instance&&instance.suspense);}else{job.pre=true;if(instance)job.id=instance.uid;scheduler=()=>queueJob(job);}const effect=new ReactiveEffect(getter,scheduler);if(cb){if(immediate){job();}else{oldValue=effect.run();}}else if(flush==="post"){queuePostRenderEffect(effect.run.bind(effect),instance&&instance.suspense);}else{effect.run();}const unwatch=()=>{effect.stop();if(instance&&instance.scope){remove(instance.scope.effects,effect);}};if(ssrCleanup)ssrCleanup.push(unwatch);return unwatch;}function instanceWatch(source,value,options){const publicThis=this.proxy;const getter=isString(source)?source.includes(".")?createPathGetter(publicThis,source):()=>publicThis[source]:source.bind(publicThis,publicThis);let cb;if(isFunction$2(value)){cb=value;}else{cb=value.handler;options=value;}const cur=currentInstance;setCurrentInstance(this);const res=doWatch(getter,cb.bind(publicThis),options);if(cur){setCurrentInstance(cur);}else{unsetCurrentInstance();}return res;}function createPathGetter(ctx,path){const segments=path.split(".");return()=>{let cur=ctx;for(let i=0;i{traverse(v,seen);});}else if(isPlainObject(value)){for(const key in value){traverse(value[key],seen);}}return value;}function withDirectives(vnode,directives){const internalInstance=currentRenderingInstance;if(internalInstance===null){return vnode;}const instance=getExposeProxy(internalInstance)||internalInstance.proxy;const bindings=vnode.dirs||(vnode.dirs=[]);for(let i=0;iextend$3({name:options.name},extraOptions,{setup:options}))():options;}const isAsyncWrapper=i=>!!i.type.__asyncLoader;const isKeepAlive=vnode=>vnode.type.__isKeepAlive;function onActivated(hook,target){registerKeepAliveHook(hook,"a",target);}function onDeactivated(hook,target){registerKeepAliveHook(hook,"da",target);}function registerKeepAliveHook(hook,type,target=currentInstance){const wrappedHook=hook.__wdc||(hook.__wdc=()=>{let current=target;while(current){if(current.isDeactivated){return;}current=current.parent;}return hook();});injectHook(type,wrappedHook,target);if(target){let current=target.parent;while(current&¤t.parent){if(isKeepAlive(current.parent.vnode)){injectToKeepAliveRoot(wrappedHook,type,target,current);}current=current.parent;}}}function injectToKeepAliveRoot(hook,type,target,keepAliveRoot){const injected=injectHook(type,hook,keepAliveRoot,true/* prepend */);onUnmounted(()=>{remove(keepAliveRoot[type],injected);},target);}function injectHook(type,hook,target=currentInstance,prepend=false){if(target){const hooks=target[type]||(target[type]=[]);const wrappedHook=hook.__weh||(hook.__weh=(...args)=>{if(target.isUnmounted){return;}pauseTracking();setCurrentInstance(target);const res=callWithAsyncErrorHandling(hook,target,type,args);unsetCurrentInstance();resetTracking();return res;});if(prepend){hooks.unshift(wrappedHook);}else{hooks.push(wrappedHook);}return wrappedHook;}}const createHook=lifecycle=>(hook,target=currentInstance)=>// post-create lifecycle registrations are noops during SSR (except for serverPrefetch) +(!isInSSRComponentSetup||lifecycle==="sp")&&injectHook(lifecycle,(...args)=>hook(...args),target);const onBeforeMount=exports('o',createHook("bm"));const onMounted=exports('g',createHook("m"));const onBeforeUpdate=createHook("bu");const onUpdated=createHook("u");const onBeforeUnmount=createHook("bum");const onUnmounted=exports('j',createHook("um"));const onServerPrefetch=createHook("sp");const onRenderTriggered=createHook("rtg");const onRenderTracked=createHook("rtc");function onErrorCaptured(hook,target=currentInstance){injectHook("ec",hook,target);}const COMPONENTS="components";function resolveComponent(name,maybeSelfReference){return resolveAsset(COMPONENTS,name,true,maybeSelfReference)||name;}const NULL_DYNAMIC_COMPONENT=Symbol.for("v-ndc");function resolveAsset(type,name,warnMissing=true,maybeSelfReference=false){const instance=currentRenderingInstance||currentInstance;if(instance){const Component=instance.type;if(type===COMPONENTS){const selfName=getComponentName(Component,false/* do not include inferred name to avoid breaking existing code */);if(selfName&&(selfName===name||selfName===camelize(name)||selfName===capitalize(camelize(name)))){return Component;}}const res=// local registration +// check instance[type] first which is resolved for options API +resolve(instance[type]||Component[type],name)||// global registration +resolve(instance.appContext[type],name);if(!res&&maybeSelfReference){return Component;}return res;}}function resolve(registry,name){return registry&&(registry[name]||registry[camelize(name)]||registry[capitalize(camelize(name))]);}function renderList(source,renderItem,cache,index){let ret;const cached=cache&&cache[index];if(isArray$2(source)||isString(source)){ret=new Array(source.length);for(let i=0,l=source.length;irenderItem(item,i,void 0,cached&&cached[i]));}else{const keys=Object.keys(source);ret=new Array(keys.length);for(let i=0,l=keys.length;i{if(!i)return null;if(isStatefulComponent(i))return getExposeProxy(i)||i.proxy;return getPublicInstance(i.parent);};const publicPropertiesMap=// Move PURE marker to new line to workaround compiler discarding it +// due to type annotation +/* @__PURE__ */extend$3(/* @__PURE__ */Object.create(null),{$:i=>i,$el:i=>i.vnode.el,$data:i=>i.data,$props:i=>i.props,$attrs:i=>i.attrs,$slots:i=>i.slots,$refs:i=>i.refs,$parent:i=>getPublicInstance(i.parent),$root:i=>getPublicInstance(i.root),$emit:i=>i.emit,$options:i=>resolveMergedOptions(i),$forceUpdate:i=>i.f||(i.f=()=>queueJob(i.update)),$nextTick:i=>i.n||(i.n=nextTick.bind(i.proxy)),$watch:i=>instanceWatch.bind(i)});const hasSetupBinding=(state,key)=>state!==EMPTY_OBJ&&!state.__isScriptSetup&&hasOwn$1(state,key);const PublicInstanceProxyHandlers={get({_:instance},key){const{ctx,setupState,data,props,accessCache,type,appContext}=instance;let normalizedProps;if(key[0]!=="$"){const n=accessCache[key];if(n!==void 0){switch(n){case 1/* SETUP */:return setupState[key];case 2/* DATA */:return data[key];case 4/* CONTEXT */:return ctx[key];case 3/* PROPS */:return props[key];}}else if(hasSetupBinding(setupState,key)){accessCache[key]=1/* SETUP */;return setupState[key];}else if(data!==EMPTY_OBJ&&hasOwn$1(data,key)){accessCache[key]=2/* DATA */;return data[key];}else if(// only cache other properties when instance has declared (thus stable) +// props +(normalizedProps=instance.propsOptions[0])&&hasOwn$1(normalizedProps,key)){accessCache[key]=3/* PROPS */;return props[key];}else if(ctx!==EMPTY_OBJ&&hasOwn$1(ctx,key)){accessCache[key]=4/* CONTEXT */;return ctx[key];}else if(shouldCacheAccess){accessCache[key]=0/* OTHER */;}}const publicGetter=publicPropertiesMap[key];let cssModule,globalProperties;if(publicGetter){if(key==="$attrs"){track(instance,"get",key);}return publicGetter(instance);}else if(// css module (injected by vue-loader) +(cssModule=type.__cssModules)&&(cssModule=cssModule[key])){return cssModule;}else if(ctx!==EMPTY_OBJ&&hasOwn$1(ctx,key)){accessCache[key]=4/* CONTEXT */;return ctx[key];}else if(// global properties +globalProperties=appContext.config.globalProperties,hasOwn$1(globalProperties,key)){{return globalProperties[key];}}else;},set({_:instance},key,value){const{data,setupState,ctx}=instance;if(hasSetupBinding(setupState,key)){setupState[key]=value;return true;}else if(data!==EMPTY_OBJ&&hasOwn$1(data,key)){data[key]=value;return true;}else if(hasOwn$1(instance.props,key)){return false;}if(key[0]==="$"&&key.slice(1)in instance){return false;}else{{ctx[key]=value;}}return true;},has({_:{data,setupState,accessCache,ctx,appContext,propsOptions}},key){let normalizedProps;return!!accessCache[key]||data!==EMPTY_OBJ&&hasOwn$1(data,key)||hasSetupBinding(setupState,key)||(normalizedProps=propsOptions[0])&&hasOwn$1(normalizedProps,key)||hasOwn$1(ctx,key)||hasOwn$1(publicPropertiesMap,key)||hasOwn$1(appContext.config.globalProperties,key);},defineProperty(target,key,descriptor){if(descriptor.get!=null){target._.accessCache[key]=0;}else if(hasOwn$1(descriptor,"value")){this.set(target,key,descriptor.value,null);}return Reflect.defineProperty(target,key,descriptor);}};function normalizePropsOrEmits(props){return isArray$2(props)?props.reduce((normalized,p)=>(normalized[p]=null,normalized),{}):props;}let shouldCacheAccess=true;function applyOptions(instance){const options=resolveMergedOptions(instance);const publicThis=instance.proxy;const ctx=instance.ctx;shouldCacheAccess=false;if(options.beforeCreate){callHook(options.beforeCreate,instance,"bc");}const{// state +data:dataOptions,computed:computedOptions,methods,watch:watchOptions,provide:provideOptions,inject:injectOptions,// lifecycle +created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,beforeUnmount,destroyed,unmounted,render,renderTracked,renderTriggered,errorCaptured,serverPrefetch,// public API +expose,inheritAttrs,// assets +components,directives,filters}=options;const checkDuplicateProperties=null;if(injectOptions){resolveInjections(injectOptions,ctx,checkDuplicateProperties);}if(methods){for(const key in methods){const methodHandler=methods[key];if(isFunction$2(methodHandler)){{ctx[key]=methodHandler.bind(publicThis);}}}}if(dataOptions){const data=dataOptions.call(publicThis,publicThis);if(!isObject$3(data));else{instance.data=reactive(data);}}shouldCacheAccess=true;if(computedOptions){for(const key in computedOptions){const opt=computedOptions[key];const get=isFunction$2(opt)?opt.bind(publicThis,publicThis):isFunction$2(opt.get)?opt.get.bind(publicThis,publicThis):NOOP;const set=!isFunction$2(opt)&&isFunction$2(opt.set)?opt.set.bind(publicThis):NOOP;const c=computed({get,set});Object.defineProperty(ctx,key,{enumerable:true,configurable:true,get:()=>c.value,set:v=>c.value=v});}}if(watchOptions){for(const key in watchOptions){createWatcher(watchOptions[key],ctx,publicThis,key);}}if(provideOptions){const provides=isFunction$2(provideOptions)?provideOptions.call(publicThis):provideOptions;Reflect.ownKeys(provides).forEach(key=>{provide(key,provides[key]);});}if(created){callHook(created,instance,"c");}function registerLifecycleHook(register,hook){if(isArray$2(hook)){hook.forEach(_hook=>register(_hook.bind(publicThis)));}else if(hook){register(hook.bind(publicThis));}}registerLifecycleHook(onBeforeMount,beforeMount);registerLifecycleHook(onMounted,mounted);registerLifecycleHook(onBeforeUpdate,beforeUpdate);registerLifecycleHook(onUpdated,updated);registerLifecycleHook(onActivated,activated);registerLifecycleHook(onDeactivated,deactivated);registerLifecycleHook(onErrorCaptured,errorCaptured);registerLifecycleHook(onRenderTracked,renderTracked);registerLifecycleHook(onRenderTriggered,renderTriggered);registerLifecycleHook(onBeforeUnmount,beforeUnmount);registerLifecycleHook(onUnmounted,unmounted);registerLifecycleHook(onServerPrefetch,serverPrefetch);if(isArray$2(expose)){if(expose.length){const exposed=instance.exposed||(instance.exposed={});expose.forEach(key=>{Object.defineProperty(exposed,key,{get:()=>publicThis[key],set:val=>publicThis[key]=val});});}else if(!instance.exposed){instance.exposed={};}}if(render&&instance.render===NOOP){instance.render=render;}if(inheritAttrs!=null){instance.inheritAttrs=inheritAttrs;}if(components)instance.components=components;if(directives)instance.directives=directives;}function resolveInjections(injectOptions,ctx,checkDuplicateProperties=NOOP){if(isArray$2(injectOptions)){injectOptions=normalizeInject(injectOptions);}for(const key in injectOptions){const opt=injectOptions[key];let injected;if(isObject$3(opt)){if("default"in opt){injected=inject(opt.from||key,opt.default,true/* treat default function as factory */);}else{injected=inject(opt.from||key);}}else{injected=inject(opt);}if(isRef(injected)){Object.defineProperty(ctx,key,{enumerable:true,configurable:true,get:()=>injected.value,set:v=>injected.value=v});}else{ctx[key]=injected;}}}function callHook(hook,instance,type){callWithAsyncErrorHandling(isArray$2(hook)?hook.map(h=>h.bind(instance.proxy)):hook.bind(instance.proxy),instance,type);}function createWatcher(raw,ctx,publicThis,key){const getter=key.includes(".")?createPathGetter(publicThis,key):()=>publicThis[key];if(isString(raw)){const handler=ctx[raw];if(isFunction$2(handler)){watch(getter,handler);}}else if(isFunction$2(raw)){watch(getter,raw.bind(publicThis));}else if(isObject$3(raw)){if(isArray$2(raw)){raw.forEach(r=>createWatcher(r,ctx,publicThis,key));}else{const handler=isFunction$2(raw.handler)?raw.handler.bind(publicThis):ctx[raw.handler];if(isFunction$2(handler)){watch(getter,handler,raw);}}}else;}function resolveMergedOptions(instance){const base=instance.type;const{mixins,extends:extendsOptions}=base;const{mixins:globalMixins,optionsCache:cache,config:{optionMergeStrategies}}=instance.appContext;const cached=cache.get(base);let resolved;if(cached){resolved=cached;}else if(!globalMixins.length&&!mixins&&!extendsOptions){{resolved=base;}}else{resolved={};if(globalMixins.length){globalMixins.forEach(m=>mergeOptions$1(resolved,m,optionMergeStrategies,true));}mergeOptions$1(resolved,base,optionMergeStrategies);}if(isObject$3(base)){cache.set(base,resolved);}return resolved;}function mergeOptions$1(to,from,strats,asMixin=false){const{mixins,extends:extendsOptions}=from;if(extendsOptions){mergeOptions$1(to,extendsOptions,strats,true);}if(mixins){mixins.forEach(m=>mergeOptions$1(to,m,strats,true));}for(const key in from){if(asMixin&&key==="expose");else{const strat=internalOptionMergeStrats[key]||strats&&strats[key];to[key]=strat?strat(to[key],from[key]):from[key];}}return to;}const internalOptionMergeStrats={data:mergeDataFn,props:mergeEmitsOrPropsOptions,emits:mergeEmitsOrPropsOptions,// objects +methods:mergeObjectOptions,computed:mergeObjectOptions,// lifecycle +beforeCreate:mergeAsArray,created:mergeAsArray,beforeMount:mergeAsArray,mounted:mergeAsArray,beforeUpdate:mergeAsArray,updated:mergeAsArray,beforeDestroy:mergeAsArray,beforeUnmount:mergeAsArray,destroyed:mergeAsArray,unmounted:mergeAsArray,activated:mergeAsArray,deactivated:mergeAsArray,errorCaptured:mergeAsArray,serverPrefetch:mergeAsArray,// assets +components:mergeObjectOptions,directives:mergeObjectOptions,// watch +watch:mergeWatchOptions,// provide / inject +provide:mergeDataFn,inject:mergeInject};function mergeDataFn(to,from){if(!from){return to;}if(!to){return from;}return function mergedDataFn(){return extend$3(isFunction$2(to)?to.call(this,this):to,isFunction$2(from)?from.call(this,this):from);};}function mergeInject(to,from){return mergeObjectOptions(normalizeInject(to),normalizeInject(from));}function normalizeInject(raw){if(isArray$2(raw)){const res={};for(let i=0;i1){return treatDefaultAsFactory&&isFunction$2(defaultValue)?defaultValue.call(instance&&instance.proxy):defaultValue;}else;}}function initProps(instance,rawProps,isStateful,isSSR=false){const props={};const attrs={};def(attrs,InternalObjectKey,1);instance.propsDefaults=/* @__PURE__ */Object.create(null);setFullProps(instance,rawProps,props,attrs);for(const key in instance.propsOptions[0]){if(!(key in props)){props[key]=void 0;}}if(isStateful){instance.props=isSSR?props:shallowReactive(props);}else{if(!instance.type.props){instance.props=attrs;}else{instance.props=props;}}instance.attrs=attrs;}function updateProps(instance,rawProps,rawPrevProps,optimized){const{props,attrs,vnode:{patchFlag}}=instance;const rawCurrentProps=toRaw(props);const[options]=instance.propsOptions;let hasAttrsChanged=false;if(// always force full diff in dev +// - #1942 if hmr is enabled with sfc component +// - vite#872 non-sfc component used by sfc component +(optimized||patchFlag>0)&&!(patchFlag&16)){if(patchFlag&8){const propsToUpdate=instance.vnode.dynamicProps;for(let i=0;i{hasExtends=true;const[props,keys]=normalizePropsOptions(raw2,appContext,true);extend$3(normalized,props);if(keys)needCastKeys.push(...keys);};if(!asMixin&&appContext.mixins.length){appContext.mixins.forEach(extendProps);}if(comp.extends){extendProps(comp.extends);}if(comp.mixins){comp.mixins.forEach(extendProps);}}if(!raw&&!hasExtends){if(isObject$3(comp)){cache.set(comp,EMPTY_ARR);}return EMPTY_ARR;}if(isArray$2(raw)){for(let i=0;i-1;prop[1/* shouldCastTrue */]=stringIndex<0||booleanIndex-1||hasOwn$1(prop,"default")){needCastKeys.push(normalizedKey);}}}}}const res=[normalized,needCastKeys];if(isObject$3(comp)){cache.set(comp,res);}return res;}function validatePropName(key){if(key[0]!=="$"){return true;}return false;}function getType(ctor){const match=ctor&&ctor.toString().match(/^\s*(function|class) (\w+)/);return match?match[2]:ctor===null?"null":"";}function isSameType(a,b){return getType(a)===getType(b);}function getTypeIndex(type,expectedTypes){if(isArray$2(expectedTypes)){return expectedTypes.findIndex(t=>isSameType(t,type));}else if(isFunction$2(expectedTypes)){return isSameType(expectedTypes,type)?0:-1;}return-1;}const isInternalKey=key=>key[0]==="_"||key==="$stable";const normalizeSlotValue=value=>isArray$2(value)?value.map(normalizeVNode):[normalizeVNode(value)];const normalizeSlot$1=(key,rawSlot,ctx)=>{if(rawSlot._n){return rawSlot;}const normalized=withCtx((...args)=>{if(!!("production"!=="production")&¤tInstance);return normalizeSlotValue(rawSlot(...args));},ctx);normalized._c=false;return normalized;};const normalizeObjectSlots=(rawSlots,slots,instance)=>{const ctx=rawSlots._ctx;for(const key in rawSlots){if(isInternalKey(key))continue;const value=rawSlots[key];if(isFunction$2(value)){slots[key]=normalizeSlot$1(key,value,ctx);}else if(value!=null){const normalized=normalizeSlotValue(value);slots[key]=()=>normalized;}}};const normalizeVNodeSlots=(instance,children)=>{const normalized=normalizeSlotValue(children);instance.slots.default=()=>normalized;};const initSlots=(instance,children)=>{if(instance.vnode.shapeFlag&32){const type=children._;if(type){instance.slots=toRaw(children);def(children,"_",type);}else{normalizeObjectSlots(children,instance.slots={});}}else{instance.slots={};if(children){normalizeVNodeSlots(instance,children);}}def(instance.slots,InternalObjectKey,1);};const updateSlots=(instance,children,optimized)=>{const{vnode,slots}=instance;let needDeletionCheck=true;let deletionComparisonTarget=EMPTY_OBJ;if(vnode.shapeFlag&32){const type=children._;if(type){if(optimized&&type===1){needDeletionCheck=false;}else{extend$3(slots,children);if(!optimized&&type===1){delete slots._;}}}else{needDeletionCheck=!children.$stable;normalizeObjectSlots(children,slots);}deletionComparisonTarget=children;}else if(children){normalizeVNodeSlots(instance,children);deletionComparisonTarget={default:1};}if(needDeletionCheck){for(const key in slots){if(!isInternalKey(key)&&!(key in deletionComparisonTarget)){delete slots[key];}}}};function setRef(rawRef,oldRawRef,parentSuspense,vnode,isUnmount=false){if(isArray$2(rawRef)){rawRef.forEach((r,i)=>setRef(r,oldRawRef&&(isArray$2(oldRawRef)?oldRawRef[i]:oldRawRef),parentSuspense,vnode,isUnmount));return;}if(isAsyncWrapper(vnode)&&!isUnmount){return;}const refValue=vnode.shapeFlag&4?getExposeProxy(vnode.component)||vnode.component.proxy:vnode.el;const value=isUnmount?null:refValue;const{i:owner,r:ref}=rawRef;const oldRef=oldRawRef&&oldRawRef.r;const refs=owner.refs===EMPTY_OBJ?owner.refs={}:owner.refs;const setupState=owner.setupState;if(oldRef!=null&&oldRef!==ref){if(isString(oldRef)){refs[oldRef]=null;if(hasOwn$1(setupState,oldRef)){setupState[oldRef]=null;}}else if(isRef(oldRef)){oldRef.value=null;}}if(isFunction$2(ref)){callWithErrorHandling(ref,owner,12,[value,refs]);}else{const _isString=isString(ref);const _isRef=isRef(ref);if(_isString||_isRef){const doSet=()=>{if(rawRef.f){const existing=_isString?hasOwn$1(setupState,ref)?setupState[ref]:refs[ref]:ref.value;if(isUnmount){isArray$2(existing)&&remove(existing,refValue);}else{if(!isArray$2(existing)){if(_isString){refs[ref]=[refValue];if(hasOwn$1(setupState,ref)){setupState[ref]=refs[ref];}}else{ref.value=[refValue];if(rawRef.k)refs[rawRef.k]=ref.value;}}else if(!existing.includes(refValue)){existing.push(refValue);}}}else if(_isString){refs[ref]=value;if(hasOwn$1(setupState,ref)){setupState[ref]=value;}}else if(_isRef){ref.value=value;if(rawRef.k)refs[rawRef.k]=value;}else;};if(value){doSet.id=-1;queuePostRenderEffect(doSet,parentSuspense);}else{doSet();}}}}const queuePostRenderEffect=queueEffectWithSuspense;function createRenderer(options){return baseCreateRenderer(options);}function baseCreateRenderer(options,createHydrationFns){const target=getGlobalThis();target.__VUE__=true;const{insert:hostInsert,remove:hostRemove,patchProp:hostPatchProp,createElement:hostCreateElement,createText:hostCreateText,createComment:hostCreateComment,setText:hostSetText,setElementText:hostSetElementText,parentNode:hostParentNode,nextSibling:hostNextSibling,setScopeId:hostSetScopeId=NOOP,insertStaticContent:hostInsertStaticContent}=options;const patch=(n1,n2,container,anchor=null,parentComponent=null,parentSuspense=null,isSVG=false,slotScopeIds=null,optimized=!!n2.dynamicChildren)=>{if(n1===n2){return;}if(n1&&!isSameVNodeType(n1,n2)){anchor=getNextHostNode(n1);unmount(n1,parentComponent,parentSuspense,true);n1=null;}if(n2.patchFlag===-2){optimized=false;n2.dynamicChildren=null;}const{type,ref,shapeFlag}=n2;switch(type){case Text:processText(n1,n2,container,anchor);break;case Comment:processCommentNode(n1,n2,container,anchor);break;case Static:if(n1==null){mountStaticNode(n2,container,anchor,isSVG);}break;case Fragment:processFragment(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);break;default:if(shapeFlag&1){processElement(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);}else if(shapeFlag&6){processComponent(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);}else if(shapeFlag&64){type.process(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized,internals);}else if(shapeFlag&128){type.process(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized,internals);}else;}if(ref!=null&&parentComponent){setRef(ref,n1&&n1.ref,parentSuspense,n2||n1,!n2);}};const processText=(n1,n2,container,anchor)=>{if(n1==null){hostInsert(n2.el=hostCreateText(n2.children),container,anchor);}else{const el=n2.el=n1.el;if(n2.children!==n1.children){hostSetText(el,n2.children);}}};const processCommentNode=(n1,n2,container,anchor)=>{if(n1==null){hostInsert(n2.el=hostCreateComment(n2.children||""),container,anchor);}else{n2.el=n1.el;}};const mountStaticNode=(n2,container,anchor,isSVG)=>{[n2.el,n2.anchor]=hostInsertStaticContent(n2.children,container,anchor,isSVG,n2.el,n2.anchor);};const moveStaticNode=({el,anchor},container,nextSibling)=>{let next;while(el&&el!==anchor){next=hostNextSibling(el);hostInsert(el,container,nextSibling);el=next;}hostInsert(anchor,container,nextSibling);};const removeStaticNode=({el,anchor})=>{let next;while(el&&el!==anchor){next=hostNextSibling(el);hostRemove(el);el=next;}hostRemove(anchor);};const processElement=(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized)=>{isSVG=isSVG||n2.type==="svg";if(n1==null){mountElement(n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);}else{patchElement(n1,n2,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);}};const mountElement=(vnode,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized)=>{let el;let vnodeHook;const{type,props,shapeFlag,transition,dirs}=vnode;el=vnode.el=hostCreateElement(vnode.type,isSVG,props&&props.is,props);if(shapeFlag&8){hostSetElementText(el,vnode.children);}else if(shapeFlag&16){mountChildren(vnode.children,el,null,parentComponent,parentSuspense,isSVG&&type!=="foreignObject",slotScopeIds,optimized);}if(dirs){invokeDirectiveHook(vnode,null,parentComponent,"created");}setScopeId(el,vnode,vnode.scopeId,slotScopeIds,parentComponent);if(props){for(const key in props){if(key!=="value"&&!isReservedProp(key)){hostPatchProp(el,key,null,props[key],isSVG,vnode.children,parentComponent,parentSuspense,unmountChildren);}}if("value"in props){hostPatchProp(el,"value",null,props.value);}if(vnodeHook=props.onVnodeBeforeMount){invokeVNodeHook(vnodeHook,parentComponent,vnode);}}if(dirs){invokeDirectiveHook(vnode,null,parentComponent,"beforeMount");}const needCallTransitionHooks=(!parentSuspense||parentSuspense&&!parentSuspense.pendingBranch)&&transition&&!transition.persisted;if(needCallTransitionHooks){transition.beforeEnter(el);}hostInsert(el,container,anchor);if((vnodeHook=props&&props.onVnodeMounted)||needCallTransitionHooks||dirs){queuePostRenderEffect(()=>{vnodeHook&&invokeVNodeHook(vnodeHook,parentComponent,vnode);needCallTransitionHooks&&transition.enter(el);dirs&&invokeDirectiveHook(vnode,null,parentComponent,"mounted");},parentSuspense);}};const setScopeId=(el,vnode,scopeId,slotScopeIds,parentComponent)=>{if(scopeId){hostSetScopeId(el,scopeId);}if(slotScopeIds){for(let i=0;i{for(let i=start;i{const el=n2.el=n1.el;let{patchFlag,dynamicChildren,dirs}=n2;patchFlag|=n1.patchFlag&16;const oldProps=n1.props||EMPTY_OBJ;const newProps=n2.props||EMPTY_OBJ;let vnodeHook;parentComponent&&toggleRecurse(parentComponent,false);if(vnodeHook=newProps.onVnodeBeforeUpdate){invokeVNodeHook(vnodeHook,parentComponent,n2,n1);}if(dirs){invokeDirectiveHook(n2,n1,parentComponent,"beforeUpdate");}parentComponent&&toggleRecurse(parentComponent,true);const areChildrenSVG=isSVG&&n2.type!=="foreignObject";if(dynamicChildren){patchBlockChildren(n1.dynamicChildren,dynamicChildren,el,parentComponent,parentSuspense,areChildrenSVG,slotScopeIds);}else if(!optimized){patchChildren(n1,n2,el,null,parentComponent,parentSuspense,areChildrenSVG,slotScopeIds,false);}if(patchFlag>0){if(patchFlag&16){patchProps(el,n2,oldProps,newProps,parentComponent,parentSuspense,isSVG);}else{if(patchFlag&2){if(oldProps.class!==newProps.class){hostPatchProp(el,"class",null,newProps.class,isSVG);}}if(patchFlag&4){hostPatchProp(el,"style",oldProps.style,newProps.style,isSVG);}if(patchFlag&8){const propsToUpdate=n2.dynamicProps;for(let i=0;i{vnodeHook&&invokeVNodeHook(vnodeHook,parentComponent,n2,n1);dirs&&invokeDirectiveHook(n2,n1,parentComponent,"updated");},parentSuspense);}};const patchBlockChildren=(oldChildren,newChildren,fallbackContainer,parentComponent,parentSuspense,isSVG,slotScopeIds)=>{for(let i=0;i{if(oldProps!==newProps){if(oldProps!==EMPTY_OBJ){for(const key in oldProps){if(!isReservedProp(key)&&!(key in newProps)){hostPatchProp(el,key,oldProps[key],null,isSVG,vnode.children,parentComponent,parentSuspense,unmountChildren);}}}for(const key in newProps){if(isReservedProp(key))continue;const next=newProps[key];const prev=oldProps[key];if(next!==prev&&key!=="value"){hostPatchProp(el,key,prev,next,isSVG,vnode.children,parentComponent,parentSuspense,unmountChildren);}}if("value"in newProps){hostPatchProp(el,"value",oldProps.value,newProps.value);}}};const processFragment=(n1,n2,container,anchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized)=>{const fragmentStartAnchor=n2.el=n1?n1.el:hostCreateText("");const fragmentEndAnchor=n2.anchor=n1?n1.anchor:hostCreateText("");let{patchFlag,dynamicChildren,slotScopeIds:fragmentSlotScopeIds}=n2;if(fragmentSlotScopeIds){slotScopeIds=slotScopeIds?slotScopeIds.concat(fragmentSlotScopeIds):fragmentSlotScopeIds;}if(n1==null){hostInsert(fragmentStartAnchor,container,anchor);hostInsert(fragmentEndAnchor,container,anchor);mountChildren(n2.children,container,fragmentEndAnchor,parentComponent,parentSuspense,isSVG,slotScopeIds,optimized);}else{if(patchFlag>0&&patchFlag&64&&dynamicChildren&&// #2715 the previous fragment could've been a BAILed one as a result +// of renderSlot() with no valid children +n1.dynamicChildren){patchBlockChildren(n1.dynamicChildren,dynamicChildren,container,parentComponent,parentSuspense,isSVG,slotScopeIds);if(// #2080 if the stable fragment has a key, it's a