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

vue3 component library, css framework

import{defineComponent as f,ref as g,pushScopeId as V,popScopeId as w,resolveComponent as h,openBlock as r,createBlock as C,withCtx as k,createElementVNode as y,normalizeClass as $,normalizeStyle as M,renderSlot as v,createElementBlock as i,toDisplayString as S,computed as b,createVNode as D,mergeProps as E}from"vue";import N from"dayjs";import{ElPopover as P,ElDatePicker as H}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 t=g(!1),o=g(null);return{panelVisible:t,closePanel:()=>{t.value=!1},slots:s,popoverEl:o,emit:n}}});V("data-v-8823a666");const z={key:1,class:"es-search-label__container"},A={key:0,class:"es-search-label__container__label"},B={key:1,class:"es-search-label__container__label"},j={key:2,class:"es-search-label__container__value"},I={key:3,class:"es-search-label__container__value"},T=y("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);w();function U(e,n,s,t,o,c){const u=h("el-popover");return r(),C(u,{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]=a=>e.panelVisible=a),onShow:n[1]||(n[1]=a=>e.emit("open")),onHide:n[2]||(n[2]=a=>e.emit("close"))},{reference:k(()=>[y("div",{class:$(["es-search-label",e.class]),style:M(e.styles)},[e.slots.main?v(e.$slots,"main",{key:0}):(r(),i("div",z,[e.slots.label?(r(),i("div",A,[v(e.$slots,"label")])):(r(),i("div",B,S(e.label),1)),e.slots.value?(r(),i("div",j,[v(e.$slots,"value")])):(r(),i("div",I,S(e.value),1)),T]))],6)]),default:k(()=>[y("div",{class:$(["es-search-label__slot",e.panelClass])},[v(e.$slots,"panel",{closePanel:e.closePanel,popoverEl:e.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function _(e,n){n===void 0&&(n={});var s=n.insertAt;if(!(!e||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",s==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var q=`.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;
}`;_(q);var L=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;_(L),p.render=U,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:H,EsSearchLabel:p},props:{label:[String,Number],defaultValue:[String,Number],modelValue:Array,type:{type:String,default:"daterange"}},emits:["update:modelValue","done"],setup(e,{emit:n}){const s=a=>{const l=e.type==="daterange"?"YYYY-MM-DD":"YYYY-MM-DD HH:mm:ss";return a.map(m=>N(m).format(l))},t=b({get(){var a;const l=(a=e.modelValue)!=null?a:[];return(l==null?void 0:l.length)===0||l.every(Y=>!Y)?[]:l},set(a){n("update:modelValue",s(a)),n("done",s(a))}}),o=b(()=>{let a=Array.isArray(t.value)?t.value:[];const l=(a==null?void 0:a.length)===0||a.every(m=>!m);return a=l?[]:a,e.type,l?e.defaultValue:s(a).join(" - ")}),c=b(()=>e.type==="daterange"?"none":"block");return{valueModel:o,datePickerModel:t,setHeaderDisplay:()=>{const a=document.querySelectorAll(".el-date-range-picker__time-header");a&&a.forEach(l=>{l.style.display=c.value})}}}});function O(e,n,s,t,o,c){const u=h("es-search-label"),a=h("el-date-picker");return r(),i("div",{class:"es-date-time-range-picker",onClick:n[1]||(n[1]=(...l)=>e.setHeaderDisplay&&e.setHeaderDisplay(...l))},[D(u,{label:e.label,value:e.valueModel},null,8,["label","value"]),D(a,E({class:"es-date-time-range-picker__input"},e.$attrs,{modelValue:e.datePickerModel,"onUpdate:modelValue":n[0]||(n[0]=l=>e.datePickerModel=l),type:"datetimerange",placement:"bottom-start"}),null,16,["modelValue"])])}var R=`.es-date-time-range-picker[data-v-23894714] {
  position: relative;
}
.es-date-time-range-picker[data-v-23894714] .el-date-editor {
  height: 20px;
  line-height: 20px;
  border: 0;
  padding: 0;
}`;_(R);var F=`.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;
}`;_(F),d.render=O,d.__scopeId="data-v-23894714",d.__file="components/search-date-range-picker/index.vue",d.install=e=>{e.component("es-search-date-range-picker",d)};export{d as default};