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

vue3 component library, css framework

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