https://1x1.systems/_nuxt/ui-kit.AVijNZa4.js

1import{_ as K}from"./Input.B0zO46lR.js";import{_ as z}from"./sprite.MSAEivaF.js";import{_ as Z}from"./entry.2ehg4ZD6.js";import{G as y,L as f,a8 as A,M as $,_ as e,a0 as ee,$ as le,N as se,V as te,X as ie,A as ae,a as u,c as ne,f as O,w as oe,C as ce,af as de,Q as i,u as c,q as T,P as m,a9 as g,ag as G}from"./swiper-vue.iPC35nDh.js";import{_ as ue,a as re}from"./Radiobutton.Dzhp2L1L.js";import{_ as pe,a as be}from"./Index.C--HJTme.js";import{_ as _e}from"./Collapsible.ewEKviRC.js";import{_ as ve}from"./Index.en0imrJp.js";const he={name:"ElSelect",props:{modelValue:{type:[Number,String],default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},label:{type:String,default:""},error:{type:String,default:""},options:{type:Array,default:()=>[],validator:l=>Array.isArray(l)?!0:"[ElSelect] 'options' prop must be an array"}},emits:["update:modelValue","blur","focus","change"],data(){return{isHover:!1,isFocus:!1}},computed:{nativeInputValue(){return this.modelValue===null||this.modelValue===void 0?"":String(this.modelValue)}},watch:{nativeInputValue(){this.setNativeInputValue()}},mounted(){this.setNativeInputValue()},methods:{focus(){this.$refs.input.focus()},blur(){this.$refs.input.blur()},handleBlur(l){this.isFocus=!1,this.$emit("blur",l)},handleFocus(l){this.isFocus=!0,this.$emit("focus",l)},setNativeInputValue(){const l=this.$refs.input;l&&l.value!==this.nativeInputValue&&(l.value=this.nativeInputValue)},handleChange(l){this.$emit("update:modelValue",l.target.value),this.$emit("change",l.target.value),this.$nextTick(this.setNativeInputValue)},isObject(l){return Object.prototype.toString.call(l).toLowerCase()==="[object object]"},getOptionLabel(l){return this.isObject(l)?l.label:l},getOptionValue(l){return this.isObject(l)?l.value:l}}},me=z+"#icon-arrow-down",ge=["for"],xe={key:0},ke={key:1,class:"el-select__error-text"},ye=e("svg",{class:"icon"},[e("use",{"xlink:href":me})],-1),fe=["disabled","readonly","aria-label"],Te=["label","value"];function Ve(l,r,a,V,_,v){return y(),f("div",{class:te(["el-select",{"is-disabled":a.disabled,"is-required":a.required,"is-readonly":a.readonly,"is-error":a.error}])},[a.label||a.error?(y(),f("label",{key:0,class:"el-select__label",for:l.$attrs.name},[a.label?(y(),f("span",xe,A(a.label),1)):$("",!0),a.error?(y(),f("span",ke,A(a.error),1)):$("",!0)],8,ge)):$("",!0),ye,e("select",se({ref:"input",class:"el-select__inner"},l.$attrs,{disabled:a.disabled,readonly:a.readonly,"aria-label":a.label,onFocus:r[0]||(r[0]=(...o)=>v.handleFocus&&v.handleFocus(...o)),onBlur:r[1]||(r[1]=(...o)=>v.handleBlur&&v.handleBlur(...o)),onChange:r[2]||(r[2]=(...o)=>v.handleChange&&v.handleChange(...o)),onMouseenter:r[3]||(r[3]=o=>_.isHover=!0),onMouseleave:r[4]||(r[4]=o=>_.isHover=!1)}),[(y(!0),f(ee,null,le(a.options,(o,w)=>(y(),f("option",{key:w,label:v.getOptionLabel(o),value:v.getOptionValue(o)},null,8,Te))),128))],16,fe)],2)}const Ce=Z(he,[["render",Ve]]),Se={class:"el-tab-pane__content"},Ee={name:"ElTabsItem"},we=Object.assign(Ee,{props:{label:{type:String,default:"Tab"},labelSlot:{},disabled:{type:Boolean,default:!1}},setup(l){return(r,a)=>(y(),f("div",Se,[ie(r.$slots,"default")]))}}),De=we,Le={name:"ElTabs",props:{defaultIndex:{default:0,type:Number}},emits:{tabChanged:l=>l!==void 0||l!==null},setup(l,{emit:r,slots:a}){const{defaultIndex:V}=ae(l),_=u(0),v=u([]),o=u([]),w=ne(()=>o.value.map((p,n)=>O("div",{id:`pane-${n}`,class:"el-tab-pane",style:`display: ${_.value===n?"block":"none"}`,role:"tabpanel","aria-labelledby":`tab-${n}`},p)));oe(V,p=>{p!==_.value&&(_.value=p)});const C=(p,n,b)=>{b||(_.value=n,r("tabChanged",n))},B=()=>{o.value.splice(0,o.value.length),a.default().forEach(p=>{p.type.name&&p.type.name==="ElTabsItem"?o.value.push(p):p.children.forEach(n=>{n.type.name&&n.type.name==="ElTabsItem"&&o.value.push(n)})})},N=p=>{let n=null,b=!1;return a.default().forEach(h=>{b||(h.type==="template"&&h.props.name===p?(n=h.children,b=!0):h.children.length&&h.children.forEach(S=>{b||S.props.name===p&&(n=S.children,b=!0)}))}),n===null?[]:n};return ce(()=>{B()}),de(()=>{B()}),()=>{const p=[];return o.value.forEach((n,b)=>{const h=n.props,S=h["label-slot"]?N(h["label-slot"]):h.label,E=h.disabled===!0||h.disabled==="";v.value[b]=E,p.push(O("li",{id:`tab-${b}`,class:["el-tabs__item",{"is-active":_.value===b}],tabIndex:"0",role:"tab","aria-controls":`pane-${b}`,"aria-selected":_.value===b?"true":"false","aria-disabled":E?"true":"false",onClick:U=>{C(U,b,E)}},S))}),O("div",{class:"el-tabs",role:"tabs"},[O("ul",{class:"el-tabs__nav",role:"tablist"},p),...w.value])}}},Ie=Le,s=z+"#icon-arrow-back",I=z+"#icon-map",k=z+"#icon-arrow-down",Be={class:"ui-kit"},Oe=G('<section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Color</span></div><div class="ui-kit-section__content"><div class="color-box color-box--black"><div class="color-box__block"></div><span class="el-label el-label--small">Black</span></div><div class="color-box color-box--black-80"><div class="color-box__block"></div><span class="el-label el-label--small">Black 80%</span></div><div class="color-box color-box--black-10"><div class="color-box__block"></div><span class="el-label el-label--small">Black 10%</span></div><div class="color-box color-box--black-07"><div class="color-box__block"></div><span class="el-label el-label--small">Black 7%</span></div><br><div class="color-box color-box--dark"><div class="color-box__block"></div><span class="el-label el-label--small">Dark</span></div><div class="color-box color-box--grey-28"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-28</span></div><div class="color-box color-box--grey-36"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-36</span></div><div class="color-box color-box--grey-3c"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-3c</span></div><div class="color-box color-box--grey-8f"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-8f</span></div><div class="color-box color-box--grey"><div class="color-box__block"></div><span class="el-label el-label--small">Grey</span></div><div class="color-box color-box--grey-ae"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-ae</span></div><div class="color-box color-box--grey-bb"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-bb</span></div><div class="color-box color-box--grey-d5"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-d5</span></div><div class="color-box color-box--grey-e3"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-e3</span></div><div class="color-box color-box--grey-ec"><div class="color-box__block"></div><span class="el-label el-label--small">Grey-ec</span></div><br><div class="color-box color-box--white"><div class="color-box__block"></div><span class="el-label el-label--small">White</span></div><div class="color-box color-box--light"><div class="color-box__block"></div><span class="el-label el-label--small">Light (bg)</span></div><br><div class="color-box color-box--brand"><div class="color-box__block"></div><span class="el-label el-label--small">Brand</span></div><br><div class="color-box color-box--danger"><div class="color-box__block"></div><span class="el-label el-label--small">Danger</span></div><div class="color-box color-box--warning"><div class="color-box__block"></div><span class="el-label el-label--small">Warning</span></div><div class="color-box color-box--success"><div class="color-box__block"></div><span class="el-label el-label--small">Success</span></div></div></section><section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Typography</span></div><div class="ui-kit-section__content"><div class="typography-box typography-box--max">var(--font-size-max)</div><div class="typography-box typography-box--big">var(--font-size-big)</div><div class="typography-box typography-box--primary">var(--font-size-primary)</div><div class="typography-box typography-box--medium">var(--font-size-medium)</div><div class="typography-box typography-box--small">var(--font-size-small)</div><br><div class="help-text">NOTE: These variables update their values on @mobile viewports (&lt;= 767px)</div></div></section><section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Label</span></div><div class="ui-kit-section__content d-flex"><div class="ui-kit-subsection label-box" style="width:250px;"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Size variants:</span></div><div class="ui-kit-subsection__content"><div class="typography-example"><span class="el-label el-label--big">Label big</span></div><div class="typography-example"><span class="el-label">Label (default)</span></div><div class="typography-example"><span class="el-label el-label--medium">Label medium</span></div><div class="typography-example"><span class="el-label el-label--small">Label small</span></div></div></div></div></section><section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Heading</span></div><div class="ui-kit-section__content"><div class="ui-kit-subsection heading-box"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Size variants:</span></div><div class="ui-kit-subsection__content"><div class="typography-example"><span class="el-heading el-heading--h1">Heading h1</span></div><div class="typography-example"><span class="el-heading el-heading--h2">Heading h2</span></div><div class="typography-example"><span class="el-heading el-heading--h3">Heading h3 (default)</span></div><div class="typography-example"><span class="el-heading el-heading--h4">Heading h4</span></div></div></div></div></section>',4),ze=e("section",{class:"ui-kit-section"},[e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Link")]),e("div",{class:"ui-kit-section__content"},[e("div",{class:"ui-kit-subsection links-box"},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Size variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link")])]),e("div",{class:"typography-example",style:{"margin-top":"20px"}},[e("a",{href:"#",class:"el-link el-link--small"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link small")])])])]),e("div",{class:"ui-kit-subsection links-box",style:{"margin-top":"30px"}},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Color variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"d-flex"},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link")])]),e("div",{class:"typography-example"}

1,[e("a",{href:"#",class:"el-link is-hover"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link (hover)")])])]),e("div",{class:"d-flex",style:{"margin-top":"20px"}},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--secondary"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link secondary")])]),e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--thirdly is-hover"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link secondary (hover)")])])]),e("div",{class:"d-flex",style:{"margin-top":"20px"}},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--thirdly"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link thirdly")])]),e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--thirdly is-hover"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link thirdly (hover)")])])]),e("div",{class:"d-flex",style:{"margin-top":"20px"}},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--brand"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link brand")])]),e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--brand is-hover"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link brand (hover)")])])]),e("div",{class:"d-flex",style:{"margin-top":"20px",background:"#000"}},[e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--light"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link light")])]),e("div",{class:"typography-example"},[e("a",{href:"#",class:"el-link el-link--light is-hover"},[e("svg",{class:"icon"},[e("use",{"xlink:href":s})]),e("span",{class:"el-link__label"},"Link light (hover)")])])])])])])],-1),Ge=e("section",{class:"ui-kit-section"},[e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Button")]),e("div",{class:"ui-kit-section__content"},[e("div",{class:"d-flex"},[e("div",{class:"ui-kit-subsection buttons-box-sizes",style:{width:"250px"}},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Size variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"element-example"},[e("button",{type:"button",class:"el-button"},[e("svg",{class:"icon"},[e("use",{"xlink:href":I})]),e("span",{class:"el-button__label"},"Default")])]),e("div",{class:"element-example"},[e("button",{type:"button",class:"el-button el-button--medium"},[e("svg",{class:"icon"},[e("use",{"xlink:href":I})]),e("span",{class:"el-button__label"},"medium")])]),e("div",{class:"element-example"},[e("button",{type:"button",class:"el-button el-button--small"},[e("svg",{class:"icon"},[e("use",{"xlink:href":I})]),e("span",{class:"el-button__label"},"small")])])])]),e("div",{class:"ui-kit-subsection",style:{width:"300px"}},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Mod variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"element-example"},[e("button",{type:"button",class:"el-button el-button--thirdly el-button--is-borderless"},[e("svg",{class:"icon"},[e("use",{"xlink:href":I})]),e("span",{class:"el-button__label"},"Borderless")])]),e("div",{class:"element-example"},[e("button",{type:"button",class:"el-button el-button--is-gradient"},[e("svg",{class:"icon"},[e("use",{"xlink:href":I})]),e("span",{class:"el-button__label"},"Gradient")])]),e("div",{class:"element-example",style:{"margin-top":"20px",background:"#979797",padding:"20px"}},[e("button",{type:"button",class:"el-button el-button--light el-button--is-text-clipped-on-hover is-hover"},"Text-clipped")])])])]),e("div",{class:"ui-kit-subsection buttons-box",style:{"margin-top":"20px"}},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Color variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button"},"Default static"),e("button",{type:"button",class:"el-button is-hover"},"Default hover"),e("button",{type:"button",class:"el-button is-disabled"},"Default disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--default-light"},"Default light static"),e("button",{type:"button",class:"el-button el-button--default-light is-hover"},"Default light hover"),e("button",{type:"button",class:"el-button el-button--default-light is-disabled"},"Default light disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--secondary"},"Secondary static"),e("button",{type:"button",class:"el-button el-button--secondary is-hover"},"Secondary hover"),e("button",{type:"button",class:"el-button el-button--secondary is-disabled"},"Secondary disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--thirdly"},"Thirdly static"),e("button",{type:"button",class:"el-button el-button--thirdly is-hover"},"Thirdly hover"),e("button",{type:"button",class:"el-button el-button--thirdly is-disabled"},"Thirdly disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--brand"},"Brand static"),e("button",{type:"button",class:"el-button el-button--brand is-hover"},"Brand hover"),e("button",{type:"button",class:"el-button el-button--brand is-disabled"},"Brand disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--is-gradient"},"Gradient static"),e("button",{type:"button",class:"el-button el-button--is-gradient is-hover"},"Gradient hover"),e("button",{type:"button",class:"el-button el-button--is-gradient is-disabled"},"Gradient disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--form-action"},"Form-action static"),e("button",{type:"button",class:"el-button el-button--form-action is-hover"},"Form-action hover"),e("button",{type:"button",class:"el-button el-button--form-action is-disabled"},"Form-action disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--dark"},"Dark static"),e("button",{type:"button",class:"el-button el-button--dark is-hover"},"Dark hover"),e("button",{type:"button",class:"el-button el-button--dark is-disabled"},"Dark disabled")]),e("div",{class:"element-example d-flex"},[e("button",{type:"button",class:"el-button el-button--dark-grey"},"Dark grey static"),e("button",{type:"button",class:"el-button el-button--dark-grey is-hover"},"Dark grey hover"),e("button",{type:"button",class:"el-button el-button--dark-grey is-disabled"},"Dark grey disabled")]),e("div",{class:"element-example d-flex",style:{"padding-top":"20px",background:"#979797"}},[e("button",{type:"button",class:"el-button el-button--light"},"Light static"),e("button",{type:"button",class:"el-button el-button--light is-hover"},"Light hover"),e("button",{type:"button",class:"el-button el-button--light is-disabled"},"Light disabled")]),e("div",{class:"element-example d-flex",style:{"padding-bottom":"20px",background:"#979797"}},[e("button",{type:"button",class:"el-button el-button--light-thirdly"},"Light-thirdly static"),e("button",{type:"button",class:"el-button el-button--light-thirdly is-hover"},"Light-thirdly hover"),e("button",{type:"button",class:"el-button el-button--light-thirdly is-disabled"},"Light-thirdly disabled")])])])])],-1),Ne=G('<section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Icon button</span></div><div class="ui-kit-section__content"><div class="d-flex">

1<div class="ui-kit-subsection" style="width:200px;"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Size variants:</span></div><div class="ui-kit-subsection__content"><div class="element-example"><button type="button" class="el-icon-button"><svg class="icon"><use xlink:href="'+s+'"></use></svg><span class="el-icon-button__label">Default</span></button></div><div class="element-example" style="margin-top:20px;"><button type="button" class="el-icon-button el-icon-button--small"><svg class="icon"><use xlink:href="'+s+'"></use></svg><span class="el-icon-button__label">Small</span></button></div></div></div><div class="ui-kit-subsection" style="width:300px;"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Mod variants:</span></div><div class="ui-kit-subsection__content"><div class="element-example"><button type="button" class="el-icon-button el-icon-button--no-border"><svg class="icon"><use xlink:href="'+s+'"></use></svg><span class="el-icon-button__label">Back</span></button><span class="el-label el-label--small" style="margin-left:20px;">(no-border)</span></div></div></div></div><div class="ui-kit-subsection icon-buttons-box" style="margin-top:20px;"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Color variants:</span></div><div class="ui-kit-subsection__content"><div class="element-example d-flex"><div class="el-label el-label--small" style="width:150px;">default</div><button type="button" class="el-icon-button"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button is-hover"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button is-disabled"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button></div><div class="element-example d-flex"><div class="el-label el-label--small" style="width:150px;">primary</div><button type="button" class="el-icon-button el-icon-button--primary"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--primary is-hover"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--primary is-disabled"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button></div><div class="element-example d-flex" style="padding:20px;background:#e6e6e6;"><div class="el-label el-label--small" style="width:150px;">light</div><button type="button" class="el-icon-button el-icon-button--light"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--light is-hover"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--light is-disabled"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button></div><div class="element-example d-flex" style="padding:20px;background:#979797;"><div class="el-label el-label--small" style="width:150px;color:var(--color-light);">light-thirdly</div><button type="button" class="el-icon-button el-icon-button--light-thirdly"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--light-thirdly is-hover"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button><button type="button" class="el-icon-button el-icon-button--light-thirdly is-disabled"><svg class="icon"><use xlink:href="'+s+'"></use></svg></button></div></div></div></div></section>',1),Ue={class:"ui-kit-section"},Me=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Input (Vue component)")],-1),qe={class:"ui-kit-section__content"},Fe={class:"d-flex"},$e={class:"ui-kit-subsection",style:{width:"300px"}},He=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Size variants:")],-1),Re={class:"ui-kit-subsection__content"},je={class:"element-example"},Pe={class:"ui-kit-subsection",style:{width:"300px","margin-left":"16px"}},Ae=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Mod variants:")],-1),We={class:"ui-kit-subsection__content"},Qe={class:"element-example"},Xe=e("span",null,[g("Custom label "),e("span",{class:"el-label h-color--secondary"},"optional")],-1),Ye=G('<div class="ui-kit-subsection inputs-box" style="margin-top:20px;"><div class="ui-kit-subsection__heading"><span class="el-heading el-heading--h4">Color variants:</span></div><div class="ui-kit-subsection__content"><div class="element-example d-flex align-items-center" style="padding:0 20px;"><div class="el-label el-label--small" style="width:150px;">primary</div><div class="el-input"><label for="input-demo-2" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-2" placeholder="Enter title"></div><div class="el-input is-focus"><label for="input-demo-3" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-3" placeholder="Enter title" value="Some title"></div><div class="el-input is-error"><label for="input-demo-4" class="el-input__label"><span>Title</span><span class="el-input__error-text">Some error text</span></label><input class="el-input__inner" name="input-demo-4" placeholder="Enter title" value="Some title"></div><div class="el-input is-disabled"><label for="input-demo-5" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-5" placeholder="Enter title" value="Some title"></div></div><div class="element-example d-flex align-items-center" style="margin-top:10px;padding:0 20px;"><div class="el-label el-label--small" style="width:150px;">secondary</div><div class="el-input el-input--secondary">

1<label for="input-demo-14" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-14" placeholder="Enter title"></div><div class="el-input el-input--secondary is-focus"><label for="input-demo-15" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-15" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--secondary is-error"><label for="input-demo-16" class="el-input__label"><span>Title</span><span class="el-input__error-text">Some error text</span></label><input class="el-input__inner" name="input-demo-16" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--secondary is-disabled"><label for="input-demo-17" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-17" placeholder="Enter title" value="Some title"></div></div><div class="element-example d-flex align-items-center" style="margin-top:10px;padding:0 20px;"><div class="el-label el-label--small" style="width:150px;">light</div><div class="el-input el-input--light"><label for="input-demo-10" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-10" placeholder="Enter title"></div><div class="el-input el-input--light is-focus"><label for="input-demo-11" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-11" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--light is-error"><label for="input-demo-12" class="el-input__label"><span>Title</span><span class="el-input__error-text">Some error text</span></label><input class="el-input__inner" name="input-demo-12" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--light is-disabled"><label for="input-demo-13" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-13" placeholder="Enter title" value="Some title"></div></div><div class="element-example d-flex align-items-center" style="margin-top:10px;padding:20px;background-color:#979797;"><div class="el-label el-label--small" style="width:150px;color:var(--color-light);">dark</div><div class="el-input el-input--dark"><label for="input-demo-6" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-6" placeholder="Enter title"></div><div class="el-input el-input--dark is-focus"><label for="input-demo-7" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-7" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--dark is-error"><label for="input-demo-8" class="el-input__label"><span>Title</span><span class="el-input__error-text">Some error text</span></label><input class="el-input__inner" name="input-demo-8" placeholder="Enter title" value="Some title"></div><div class="el-input el-input--dark is-disabled"><label for="input-demo-9" class="el-input__label"><span>Title</span></label><input class="el-input__inner" name="input-demo-9" placeholder="Enter title" value="Some title"></div></div></div></div>',1),Je={class:"ui-kit-section"},Ke=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Select (Vue component)")],-1),Ze={class:"ui-kit-section__content"},el={class:"d-flex"},ll={class:"ui-kit-subsection",style:{width:"300px"}},sl=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Size variants:")],-1),tl={class:"ui-kit-subsection__content"},il={class:"element-example"},al=e("div",{class:"ui-kit-subsection selects-box",style:{"margin-top":"20px"}},[e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Color variants:")]),e("div",{class:"ui-kit-subsection__content"},[e("div",{class:"element-example d-flex",style:{padding:"0 20px"}},[e("div",{class:"el-label el-label--small",style:{width:"150px"}},"primary"),e("div",{class:"el-select"},[e("label",{for:"select-demo-2",class:"el-select__label"},[e("span",null,"Title")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-2",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select is-focus"},[e("label",{for:"select-demo-3",class:"el-select__label"}," Title "),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-3",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select is-error"},[e("label",{for:"select-demo-4",class:"el-select__label"},[e("span",null,"Title"),e("span",{class:"el-input__error-text"},"Some error text")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-4",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select is-disabled"},[e("label",{for:"select-demo-5",class:"el-select__label"},[e("span",null,"Title")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-5",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])])]),e("div",{class:"element-example d-flex",style:{"margin-top":"10px",padding:"20px","background-color":"#979797"}},[e("div",{class:"el-label el-label--small",style:{width:"150px",color:"var(--color-light)"}},"dark"),e("div",{class:"el-select el-select--dark"},[e("label",{for:"select-demo-6",class:"el-select__label"},[e("span",null,"Title")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-6",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select el-select--dark is-focus"},[e("label",{for:"select-demo-7",class:"el-select__label"}," Title "),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-7",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select el-select--dark is-error"},[e("label",{for:"select-demo-8",class:"el-select__label"},[e("span",null,"Title"),e("span",{class:"el-input__error-text"},"Some error text")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-8",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])]),e("div",{class:"el-select el-select--dark is-disabled"},[e("label",{for:"select-demo-9",class:"el-select__label"},[e("span",null,"Title")]),e("svg",{class:"icon"},[e("use",{"xlink:href":k})]),e("select",{class:"el-select__inner",name:"select-demo-9",placeholder:"Choose title"},[e("option",null,"Title 1"),e("option",null,"Title 2"),e("option",null,"Title 3"),e("option",null,"Title 4")])])])])],-1),nl={class:"ui-kit-section"},ol=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Checkbox (Vue component)")],-1),cl={class:"ui-kit-section__content"},dl={class:"ui-kit-subsection checkboxes-box"},ul={class:"element-example"},rl=e("a",{href:"#",class:"el-link el-link--brand"},[e("span",{class:"el-link__label"},"privacy policy")],-1),pl={class:"element-example",style:{"margin-top":"30px"}},bl=e("a",{href:"#",class:"el-link el-link--brand"},[e("span",{class:"el-link__label"},"privacy policy")],-1),_l={class:"ui-kit-subsection checkboxes-box",style:{"margin-top":"20px"}},vl=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Color variants:")],-1),hl={class:"ui-kit-subsection__content"},ml={class:"element-example d-flex"},gl={class:"ui-kit-section"},xl=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Radiobutton (Vue component)")],-1),kl={class:"ui-kit-section__content"},yl={class:"ui-kit-subsection radiobuttons-box"},fl={class:"element-example d-flex"},Tl={class:"ui-kit-subsection radiobuttons-box",style:{"margin-top":"20px"}},Vl=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Color variants:")],-1),Cl={class:"ui-kit-subsection__content"},Sl={class:"element-example d-flex"},El=G('<section class="ui-kit-section"><div class="ui-kit-section__heading"><span class="el-heading el-heading--h4">Table</span></div><div class="ui-kit-section__content"><div class="d-flex"><div class="ui-kit-subsection" style="width:600px;"><div class="ui-kit-subsection__content"><div class="element-example"><table class="el-table"><tr><td><span class="el-label">Product 1</span></td><td>

1<span class="el-label el-label--medium h-color--secondary">Description 1</span></td><td align="right"><span class="el-label">50€</span></td></tr><tr><td><span class="el-label">Product 2</span></td><td><span class="el-label el-label--medium h-color--secondary">Description 2</span></td><td align="right"><span class="el-label">100€</span></td></tr><tr><td><span class="el-label">Product 3</span></td><td><span class="el-label el-label--medium h-color--secondary">Description 3</span></td><td align="right"><span class="el-label">70€</span></td></tr></table></div></div></div></div></div></section>',1),wl={class:"ui-kit-section"},Dl=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Tabs (Vue component)")],-1),Ll={class:"ui-kit-section__content"},Il={class:"d-flex"},Bl={class:"ui-kit-subsection",style:{width:"600px"}},Ol={class:"ui-kit-subsection__content"},zl={class:"element-example"},Gl={class:"ui-kit-section"},Nl=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Steps (Vue component)")],-1),Ul={class:"ui-kit-section__content"},Ml={class:"d-flex"},ql={class:"ui-kit-subsection",style:{width:"600px"}},Fl={class:"ui-kit-subsection__content"},$l={class:"element-example"},Hl={class:"ui-kit-section"},Rl=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Collapsible (Vue component)")],-1),jl={class:"ui-kit-section__content"},Pl={class:"d-flex"},Al={class:"ui-kit-subsection",style:{width:"600px"}},Wl={class:"ui-kit-subsection__content"},Ql={class:"element-example"},Xl=e("p",null," Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Yl={class:"ui-kit-section"},Jl=e("div",{class:"ui-kit-section__heading"},[e("span",{class:"el-heading el-heading--h4"},"Range (Vue component)")],-1),Kl={class:"ui-kit-section__content"},Zl={class:"ui-kit-subsection",style:{width:"600px"}},es=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Horizontal (default)")],-1),ls={class:"ui-kit-subsection__content"},ss={class:"element-example"},ts={class:"ui-kit-subsection",style:{width:"600px","margin-top":"20px"}},is=e("div",{class:"ui-kit-subsection__heading"},[e("span",{class:"el-heading el-heading--h4"},"Vertical")],-1),as={class:"ui-kit-subsection__content"},ns={class:"element-example"},vs={__name:"ui-kit",setup(l){const r=u(!0),a=u(!1),V=u("Some value"),_=u("Some value"),v=u(""),o=u("option1"),w=u([{label:"Option1",value:"option1"},{label:"Option2",value:"option2"},{label:"Option3",value:"option3"},{label:"Option4",value:"option4"}]),C=u(70),B=u(0),N=u(100),p=u(10),n=u(70),b=u(0),h=u(100),S=u(1),E=u("mm"),U=x=>{v.value=x?"":"This field is required"},M=u(!0),W=x=>{console.log(x)},H=x=>{console.log(x)},R=x=>{console.log(x)};return(x,t)=>{const j=K,Q=Ce,D=ue,L=re,q=De,X=Ie,F=pe,Y=be,J=_e,P=ve;return y(),f("main",Be,[Oe,ze,Ge,Ne,e("section",Ue,[Me,e("div",qe,[e("div",Fe,[e("div",$e,[He,e("div",Re,[e("div",je,[i(j,{modelValue:c(V),"onUpdate:modelValue":t[0]||(t[0]=d=>T(V)?V.value=d:null),label:"Label (*required)",placeholder:"Enter value",name:"inputDemo",error:c(v),onChange:U},null,8,["modelValue","error"])])])]),e("div",Pe,[Ae,e("div",We,[e("div",Qe,[i(j,{modelValue:c(_),"onUpdate:modelValue":t[1]||(t[1]=d=>T(_)?_.value=d:null),placeholder:"Enter value",name:"inputDemoCustomLabel"},{label:m(()=>[Xe]),_:1},8,["modelValue"])])])])]),Ye])]),e("section",Je,[Ke,e("div",Ze,[e("div",el,[e("div",ll,[sl,e("div",tl,[e("div",il,[i(Q,{modelValue:c(o),"onUpdate:modelValue":t[2]||(t[2]=d=>T(o)?o.value=d:null),label:"Option",placeholder:"Choose option",name:"selectDemo",options:c(w)},null,8,["modelValue","options"])])])])]),al])]),e("section",nl,[ol,e("div",cl,[e("div",dl,[e("div",ul,[

1i(D,{modelValue:c(r),"onUpdate:modelValue":t[3]||(t[3]=d=>T(r)?r.value=d:null)},{default:m(()=>[g(" I consent to the "),rl]),_:1},8,["modelValue"])]),e("div",pl,[i(D,{modelValue:c(a),"onUpdate:modelValue":t[4]||(t[4]=d=>T(a)?a.value=d:null),error:"You must accept our privacy policy to continue"},{default:m(()=>[g(" I consent to the "),bl]),_:1},8,["modelValue"])])]),e("div",_l,[vl,e("div",hl,[e("div",ml,[i(D,{id:"unchecked-checkbox-demo-id",name:"unchecked-checkbox-demo","model-value":!1,label:"Unchecked"}),i(D,{id:"checked-checkbox-demo-id",name:"checked-checkbox-demo","model-value":!0,label:"Checked"}),i(D,{id:"disabled-checkbox-demo-id",name:"disabled-checkbox-demo","model-value":!1,disabled:"",label:"Disabled"})])])])])]),e("section",gl,[xl,e("div",kl,[e("div",yl,[e("div",fl,[i(L,{id:"unchecked-radio-demo-id","model-value":!0,name:"radio-demo",label:"Unchecked",onChange:t[5]||(t[5]=d=>R("radio1:change value "+d))}),i(L,{id:"checked-radio-demo-id","model-value":!1,name:"radio-demo",label:"Checked",onChange:t[6]||(t[6]=d=>R("radio2:change value "+d))})])]),e("div",Tl,[Vl,e("div",Cl,[e("div",Sl,[i(L,{id:"unchecked-radio-demo-id",name:"unchecked-radio-demo","model-value":!1,label:"Unchecked"}),i(L,{id:"checked-radio-demo-id",name:"checked-radio-demo","model-value":!0,label:"Checked"}),i(L,{id:"disabled-radio-demo-id",name:"disabled-radio-demo","model-value":!1,label:"Disabled",disabled:""})])])])])]),El,e("section",wl,[Dl,e("div",Ll,[e("div",Il,[e("div",Bl,[e("div",Ol,[e("div",zl,[i(X,{onTabChanged:W},{default:m(()=>[i(q,{label:"Tab 1"},{default:m(()=>[g(" This is Tab 1 ")]),_:1}),i(q,{label:"Tab 2"},{default:m(()=>[g(" This is Tab 2 ")]),_:1}),i(q,{label:"Tab 3"},{default:m(()=>[g(" This is Tab 3 ")]),_:1})]),_:1})])])])])])]),e("section",Gl,[Nl,e("div",Ul,[e("div",Ml,[e("div",ql,[e("div",Fl,[e("div",$l,[i(Y,null,{default:m(()=>[i(F,{title:"Step 1"},{default:m(()=>[g(" Content 1 ")]),_:1}),i(F,{title:"Step 2"},{default:m(()=>[g(" Content 2 ")]),_:1}),i(F,{title:"Step 3",collapsed:c(M),style:{cursor:"pointer"},onClick:t[7]||(t[7]=d=>M.value=!c(M))},{default:m(()=>[g(" Content 3 ")]),_:1},8,["collapsed"])]),_:1})])])])])])]),e("section",Hl,[Rl,e("div",jl,[e("div",Pl,[e("div",Al,[e("div",Wl,[e("div",Ql,[i(J,{title:"What is Lorem Ipsum?"},{default:m(()=>[Xl]),_:1})])])])])])]),e("section",Yl,[Jl,e("div",Kl,[e("div",Zl,[es,e("div",ls,[e("div",ss,[i(P,{modelValue:c(C),"onUpdate:modelValue":t[8]||(t[8]=d=>T(C)?C.value=d:null),min:c(B)||0,max:c(N)||0,step:c(p)||1,units:c(E),onChange:t[9]||(t[9]=d=>H("range1:change value "+c(C)))},null,8,["modelValue","min","max","step","units"])])])]),e("div",ts,[is,e("div",as,[e("div",ns,[i(P,{modelValue:c(n),"onUpdate:modelValue":t[10]||(t[10]=d=>T(n)?n.value=d:null),orientation:"vertical",min:c(b)||0,max:c(h)||0,step:c(S)||1,units:c(E),onChange:t[11]||(t[11]=d=>H("range2:change value"+c(n)))},null,8,["modelValue","min","max","step","units"])])])])])])])}}};export{vs as default};