quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 5.76 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a as o,b as r,c as a,P as s,H as i,d as l,N as c,B as p}from"../index2.js";import{_ as u}from"../defineProperty.js";import{s as f}from"../public.js";function d(t){var n=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 r,a=e(t);if(n){var s=e(this).constructor;r=Reflect.construct(a,arguments,s)}else r=a.apply(this,arguments);return o(this,r)}}var h=function(e){r(l,i);var o=d(l);function l(){var n;t(this,l);for(var e=arguments.length,r=new Array(e),i=0;i<e;i++)r[i]=arguments[i];return n=o.call.apply(o,[this].concat(r)),u(a(n),"order",""),u(a(n),"status",""),u(a(n),"title",""),u(a(n),"content",""),u(a(n),"containerRef",s()),n}return n(l,[{key:"setDirection",value:function(t){var n=this.containerRef.current;n&&("vertical"===t?n.classList.remove("quark-step-horizontal"):n.classList.add("quark-step-horizontal"))}},{key:"render",value:function(){return i.h("div",{class:"quark-step quark-step-horizontal",ref:this.containerRef,part:"root"},i.h("div",{class:"quark-step",part:"step"},i.h("div",{class:"quark-step-head",part:"head"},i.h("div",{class:"quark-step-icon is-text",part:"icon"},i.h("div",{class:"quark-step-inner",part:"inner"},i.h("slot",{name:"order"},this.order)))),i.h("div",{class:"quark-step-main",part:"main"},i.h("div",{class:"quark-step-title",part:"title"},i.h("slot",{name:"title"},this.title)),i.h("div",{class:"quark-step-content",part:"content"},i.h("slot",{name:"content"},this.content)))))}}]),l}();l([c()],h.prototype,"order",void 0),l([c()],h.prototype,"status",void 0),l([c()],h.prototype,"title",void 0),l([c()],h.prototype,"content",void 0);var k=h=l([p({tag:"quark-step",style:':host {\n display: inline-block;\n flex: 1;\n font-size: 3.73333vw;\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: 3.2vw;\n}\n\n:host .quark-step-icon {\n position: relative;\n display: flex;\n font-size: var(--steps-base-font-size, 3.46667vw);\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: 3.2vw;\n text-align: left;\n margin-bottom: var(--step-bottom, 8vw);\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: 2.66667vw;\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, 2.66667vw);\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'})],h),v=function(e){r(l,i);var o=d(l);function l(){var n;t(this,l);for(var e=arguments.length,r=new Array(e),i=0;i<e;i++)r[i]=arguments[i];return n=o.call.apply(o,[this].concat(r)),u(a(n),"direction",""),u(a(n),"slotRef",s()),u(a(n),"handleSlotChange",(function(){var t=n.slotRef.current;t&&f(t.assignedNodes()).forEach((function(t){t.setDirection(n.direction||"horizontal")}))})),n}return n(l,[{key:"render",value:function(){return i.h("div",{id:"step-container",class:"vertical"===this.direction?"quark-vertical":"quark-steps quark-steps-horizontal"},i.h("slot",{onslotchange:this.handleSlotChange,ref:this.slotRef}))}}]),l}();l([c()],v.prototype,"direction",void 0),v=l([p({tag:"quark-steps",style:':host {\n display: block;\n overflow: hidden;\n font-size: var(--steps-base-font-size, 3.46667vw);\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'})],v);export{v as QuarkSteps,k as default};