eslink-ui-plus/es/search-date-picker/index.js

vue3 component library, css framework

import{defineComponent as f,ref as b,pushScopeId as y,popScopeId as g,resolveComponent as h,openBlock as r,createBlock as Y,withCtx as k,createElementVNode as _,normalizeClass as $,normalizeStyle as E,renderSlot as c,createElementBlock as i,toDisplayString as S,computed as w,createVNode as V,mergeProps as M}from"vue";import C from"dayjs";import{ElPopover as P,ElDatePicker as N}from"element-plus";var p=f({components:{ElPopover:P},props:{styles:{type:Object,default:()=>({})},label:{type:[String,Number],default:""},value:{type:[String,Number],default:""},useSlot:{type:Boolean,default:!0},class:{type:String,default:""},panelClass:{type:String,default:""},popoverClass:{type:String,default:""}},emits:["open","close"],setup(e,{emit:n,slots:s}){const l=b(!1),a=b(null);return{panelVisible:l,closePanel:()=>{l.value=!1},slots:s,popoverEl:a,emit:n}}});y("data-v-8823a666");const z={key:1,class:"es-search-label__container"},B={key:0,class:"es-search-label__container__label"},j={key:1,class:"es-search-label__container__label"},I={key:2,class:"es-search-label__container__value"},T={key:3,class:"es-search-label__container__value"},A=_("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);g();function D(e,n,s,l,a,m){const t=h("el-popover");return r(),Y(t,{ref:"popoverEl",placement:"bottom-start",offset:6,width:"unset","hide-after":0,"popper-class":`el-popover--no-padding ${e.popoverClass}`,visible:e.panelVisible,"onUpdate:visible":n[0]||(n[0]=o=>e.panelVisible=o),onShow:n[1]||(n[1]=o=>e.emit("open")),onHide:n[2]||(n[2]=o=>e.emit("close"))},{reference:k(()=>[_("div",{class:$(["es-search-label",e.class]),style:E(e.styles)},[e.slots.main?c(e.$slots,"main",{key:0}):(r(),i("div",z,[e.slots.label?(r(),i("div",B,[c(e.$slots,"label")])):(r(),i("div",j,S(e.label),1)),e.slots.value?(r(),i("div",I,[c(e.$slots,"value")])):(r(),i("div",T,S(e.value),1)),A]))],6)]),default:k(()=>[_("div",{class:$(["es-search-label__slot",e.panelClass])},[c(e.$slots,"panel",{closePanel:e.closePanel,popoverEl:e.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function u(e,n){n===void 0&&(n={});var s=n.insertAt;if(!(!e||typeof document=="undefined")){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",s==="top"&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var U=`.es-search-label[data-v-8823a666] {
  font-size: 14px;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
}
.es-search-label__container[data-v-8823a666] {
  display: flex;
}
.es-search-label__container__label[data-v-8823a666] {
  color: #7a7c90;
}
.es-search-label__container__icon[data-v-8823a666] {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
.es-search-label__container__icon[data-v-8823a666]::before {
  color: #a7baf1;
}`;u(U);var F=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;u(F),p.render=D,p.__scopeId="data-v-8823a666",p.__file="components/search-label/index.vue",p.install=e=>{e.component("es-search-label",p)};var d=f({components:{ElDatePicker:N,EsSearchLabel:p},props:{label:[String,Number],defaultValue:[String,Number],modelValue:[Array,Date],type:{type:String,default:"year",validate:e=>["year","month","monthrange"].includes(e)}},emits:["update:modelValue","done"],setup(e,{emit:n}){const s={year:"YYYY",month:"YYYY-MM",monthrange:"YYYY-MM"},l=t=>{const o=s[e.type];return e.type==="monthrange"&&!(t==null?void 0:t.length)?[]:t?e.type==="monthrange"?t.map(v=>C(v).format(o)):C(t).format(o):""},a=w({get(){return e.modelValue||(e.type==="monthrange"?[]:"")},set(t){console.log(t,l(t)),n("update:modelValue",l(t)),n("done",l(t))}});return{valueModel:w(()=>{var t;return a.value&&((t=a.value)==null?void 0:t.length)?e.type==="monthrange"?l(a.value).join(" - "):l(a.value):e.defaultValue}),datePickerModel:a}}});y("data-v-64e75fa6");const H={class:"es-date-time-range-picker"};g();function L(e,n,s,l,a,m){const t=h("es-search-label"),o=h("el-date-picker");return r(),i("div",H,[V(t,{label:e.label,value:e.valueModel},null,8,["label","value"]),V(o,M({class:"es-date-time-range-picker__input"},e.$attrs,{modelValue:e.datePickerModel,"onUpdate:modelValue":n[0]||(n[0]=v=>e.datePickerModel=v),type:e.type,placement:"bottom-start"}),null,16,["modelValue","type"])])}var O=`.es-date-time-range-picker[data-v-64e75fa6] {
  position: relative;
}
.es-date-time-range-picker[data-v-64e75fa6] .el-date-editor {
  height: 20px;
  line-height: 20px;
  border: 0;
  padding: 0;
}`;u(O);var q=`.es-date-time-range-picker__input {
  position: absolute !important;
  left: 0;
  width: 100% !important;
  opacity: 0;
}
.el-range__close-icon,
.el-range__icon {
  display: none !important;
}
.el-date-editor {
  width: unset;
}
.el-range-separator {
  height: 20px !important;
  line-height: 20px !important;
}
.el-date-picker-rewrite {
  position: unset !important;
  box-shadow: unset !important;
  border: 0 !important;
}
.el-date-picker-rewrite .el-popper__arrow {
  display: none;
}`;u(q),d.render=L,d.__scopeId="data-v-64e75fa6",d.__file="components/search-date-picker/index.vue",d.install=e=>{e.component("es-search-date-picker",d)};export{d as default};