@pantograph/vue 0.26.0 → 0.27.0

package/dist/Select/types.d.ts

@@ -1,12 +1,11 @@
 import { SelectContentEmits, SelectContentProps, SelectPortalProps, SelectRootEmits, SelectRootProps, SelectTriggerProps } from 'reka-ui';
-import { GetPopupContainer } from '../Popover/Popover';
-import { PopoverPlacement } from '../Popover';
+import { GetPopupContainer, PopoverPlacement } from '../Popover';
 import { Direction } from '../ConfigProvider';
-import { SkeletonProps } from '../Skeleton/Skeleton';
+import { SkeletonProps } from '../Skeleton';
 import { SelectSize, SelectStatus } from './Select.model';
 import { EmitToProp } from '../types';
-import { ScrollContainerProps } from '../ScrollContainer/index.js';
-import { EmptyProps } from '../Empty/index.js';
+import { ScrollContainerProps } from '../ScrollContainer';
+import { EmptyProps } from '../Empty';
 import { ClassValue } from 'class-variance-authority/types';
 export interface SelectOptionItemDefault {
     icon?: string;
@@ -76,6 +75,8 @@ export interface SelectProps extends SelectRootProps, Omit<SelectTriggerProps, '
     minWidth?: string | number;
 }
 export interface SelectEmits extends SelectRootEmits, SelectContentEmits {
+    change: SelectRootEmits['update:modelValue'];
+    select: [value: string, selected: boolean];
 }
 export type SelectEmitObject = {
     [K in keyof SelectEmits as EmitToProp<K>]: () => void;

package/dist/Select.vue_vue_type_script_setup_true_lang-CjWKTWNp.js

@@ -0,0 +1 @@
+"use strict";const n=require("vue"),k=require("reka-ui"),L=require("es-toolkit"),X=require("./options-CY2uxp5A.js"),r=require("./Icon.vue_vue_type_script_setup_true_lang-CXwAf04H.js");require("@vueuse/core");require("@tanstack/vue-virtual");const i=require("@pantograph/utils"),le=require("class-variance-authority"),ye=require("./Empty.vue_vue_type_script_setup_true_lang-Cw-L4cfY.js"),ve=require("./Skeleton.vue_vue_type_script_setup_true_lang-DBb6fA3l.js"),ue=require("./Divider.vue_vue_type_script_setup_true_lang-Bs3xi5Tz.js");require("@pantograph/tokens");const M=require("./isEmpty-BKZMdy8h.js"),Ce=require("./useInputDataStates-B2KtpFr0.js"),he=require("./useLazyLoading-H6VG5aE-.js"),ce=require("./Popover.vue_vue_type_script_setup_true_lang-DZu6h5sn.js"),_e=require("./ConfigProvider.vue_vue_type_script_setup_true_lang-BAXkTMEt.js"),Se=require("./ScrollContainer.vue_vue_type_script_setup_true_lang-WN0vUSFg.js"),ge=require("./Chip.vue_vue_type_script_setup_true_lang-Bact--QN.js"),Ee=require("@pantograph/style/select.css?raw"),re=["sm","md","lg"],de=["error","warning","success"],[pe,me]=k.createContext("Select"),[Le,Ve]=k.createContext("_Select"),w=i.getBemBlock("select"),fe=n.defineComponent({...X.getComponentOptions("SelectLabel"),__name:"SelectLabel",setup(f){return(t,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(n.unref(i.getBemElement)(n.unref(w),"label"))},[n.renderSlot(t.$slots,"default")],2))}}),oe=n.defineComponent({name:X.getComponentName("SelectOption"),props:{option:{type:[Object,String],required:!0}},slots:Object,setup(f,{slots:t}){const o=pe(),e=n.computed(()=>{switch(o.getSize.value){case"sm":return"2xsm";case"lg":return"sm";case"md":default:return"xsm"}}),D=n.computed(()=>o.getOptionValue(f.option)),c=n.computed(()=>o.getOptionLabel(f.option)),W=n.computed(()=>o.getOptionIcon(f.option)),K=n.computed(()=>o.getOptionDisabled(f.option)),P=i.getBemElement(w,"option"),U=le.cva(P,{variants:{size:i.generateVariantClassList(re,P)}}),A=_=>{var V,z;const y=_.detail.value;o.emit("select",y,r.isArray(o.modelValue.value)?!((z=(V=o.modelValue.value)==null?void 0:V.includes)!=null&&z.call(V,y)):!0)};if(!f.option)throw new Error("option is required");const F=()=>{var y;const _=(y=t.indicator)==null?void 0:y.call(t,{option:f.option});return r.isEmptyElement(_)?n.h(k.SelectItemIndicator,{asChild:!0},()=>n.h(r._sfc_main$2,{icon:o.props.indicatorIcon,size:e.value})):_},T=()=>{var V,z,j;const _=(V=t.default)==null?void 0:V.call(t,{option:f.option}),y=[];if(!r.isEmptyElement(_))y.push(_);else{const H=(z=t.leading)==null?void 0:z.call(t,{option:f.option}),s=!r.isEmptyElement(H);if(W.value||s){let q;s?q=H:q=n.h(r._sfc_main$2,{icon:W.value,size:e.value}),y.push(n.h("div",{class:i.normCls(i.getBemElement(P,"leading"),o.props.itemLeadingCls)},q))}let E;const b=(j=t.text)==null?void 0:j.call(t,{option:f.option});r.isEmptyElement(b)?E=c.value:E=b,y.push(n.h("div",{class:i.normCls(i.getBemElement(P,"text"),o.props.optionTextCls)},E))}return n.h("div",{class:i.normCls(i.getBemElement(P,"content"),o.props.optionContentCls)},y)};return()=>n.h(k.SelectItem,{value:D.value,textValue:c.value,disabled:K.value,class:i.normCls(U({size:o.getSize.value}),o.props.optionCls),onSelect:A},()=>[T(),F()])}}),Be=n.defineComponent({name:X.getComponentName("SelectTrigger"),props:{getOptionSlot:{type:Function,required:!0}},setup(f,{slots:t,attrs:o}){const e=pe(),D=({value:s},E)=>{if(E.stopPropagation(),s&&r.isArray(e.modelValue.value)&&!e.getDisabled.value){const b=e.modelValue.value.filter(q=>q!==s);e.modelValue.value=b,e.emit("update:modelValue",b),e.emit("select",s,!1)}},c=i.getBemElement(w,"trigger"),W=le.cva(c,{variants:{size:i.generateVariantClassList(re,c),status:i.generateVariantClassList(de,c),bordered:i.generateVariantClassList("bordered",c),multiple:i.generateVariantClassList("multiple",c),contentFit:i.generateVariantClassList("content-fit",c),wrapped:i.generateVariantClassList("wrapped",c),filled:i.generateVariantClassList("filled",c)}}),K=n.computed(()=>{switch(e.getSize.value){case"sm":return"xsm";case"lg":return"md";case"md":default:return"sm"}}),P=n.computed(()=>{switch(e.getSize.value){case"sm":return"2xsm";case"md":default:return"xsm"}}),U=n.computed(()=>{if(!e.props.multiple&&L.isString(e.modelValue.value)&&!M.isEmptyLikeLodash(e.modelValue.value))return e.getOptionByValue(e.modelValue.value)}),A=(s=U.value)=>{if(e.props.selectedItemIconAsTrailingIcon&&r.isObject(s)&&"icon"in s)return s.icon},F=n.computed(()=>A()),T=n.computed(()=>{if(!e.props.noTrailing)return e.props.trailingIcon}),_=n.computed(()=>!M.isEmptyLikeLodash(e.modelValue.value)&&e.props.multiple&&r.isArray(e.modelValue.value)),y=n.computed(()=>({modelValue:L.cloneDeep(e.modelValue.value),open:L.cloneDeep(e.open.value)})),V=s=>({...y.value,option:e.getOptionByValue(s)}),z=n.computed(()=>({disabled:e.getDisabled.value,reference:e.props.reference,tabindex:e.getDisabled.value?void 0:0,as:"div",class:i.normCls(W({size:e.getSize.value,status:e.getStatus.value==="success"&&M.isEmptyLikeLodash(e.modelValue.value)?void 0:e.getStatus.value,bordered:e.props.bordered,multiple:e.props.multiple,contentFit:e.props.contentFit,wrapped:e.props.wrapped,filled:!M.isEmptyLikeLodash(e.modelValue.value)}),e.props.triggerCls),...o})),j=(s,E=P.value)=>n.h(r._sfc_main$2,{icon:s,size:E}),H=()=>{var b;let s;const E=(b=t.triggerTrailing)==null?void 0:b.call(t,y.value);if(r.isEmptyElement(E)?T.value&&(s=j(T.value)):s=E,s)return n.h("div",{class:i.normCls(i.getBemElement(c,"trailing"),e.props.triggerTrailingCls)},s)};return()=>{var q;const s=(q=t.trigger)==null?void 0:q.call(t,y.value),b=(()=>{if(r.isEmptyElement(s))return!1;const x=r.filterEmpty(s)??null,R=x.length===1?x[0]:x;return R?r.isValidElement(R)&&!r.isFragment(R):!0})();return n.h(k.SelectTrigger,{...z.value,asChild:b,key:String(b)},{default:()=>{var J;if(!r.isEmptyElement(s))return s;const x=(J=t.triggerLeading)==null?void 0:J.call(t,y.value),R=!r.isEmptyElement(x),Y=()=>{var N;if(!e.props.multiple&&!r.isArray(e.modelValue.value)){const $=(N=f.getOptionSlot("leading",e.modelValue.value))==null?void 0:N();if(R||$||F.value||e.props.leadingIcon){let l;return r.isEmptyElement($)?F.value?l=j(F.value):R?l=x:e.props.leadingIcon&&(l=j(e.props.leadingIcon)):l=$,n.h("div",{class:i.normCls(i.getBemElement(c,"leading"),e.props.triggerLeadingCls)},l)}}},ie=()=>{const N=[];if(M.isEmptyLikeLodash(e.modelValue.value)){if(e.props.placeholder&&!e.props.multiple){const $=()=>{var S;const l=(S=t.placeholder)==null?void 0:S.call(t,y.value);return r.isEmptyElement(l)?e.props.placeholder:l};N.push($())}}else{const l=(()=>{var O,v,d;const S=(O=t.triggerValue)==null?void 0:O.call(t,y.value);if(!r.isEmptyElement(S))return S;if(e.props.multiple&&r.isArray(e.modelValue.value))return n.h(ge._sfc_main$1,{maxCount:e.props.maxCount,size:K.value,color:"primary",closeable:!e.getDisabled.value,noPopover:!0,noWrap:!e.props.wrapped,class:i.normCls(i.getBemElement(c,"tag_list"),e.props.tagListCls),onClose:D},()=>e.modelValue.value.map(g=>{var Q;const B=a=>{var C;const p=(C=t.tagClose)==null?void 0:C.call(t,{...V(g),onClose:a});return r.isEmptyElement(p)?null:p},I=(Q=f.getOptionSlot("default",g))==null?void 0:Q(),ae=()=>{var C,u;const a=(C=f.getOptionSlot("text",g))==null?void 0:C(),p=(u=t.tagText)==null?void 0:u.call(t,V(g));return r.isEmptyElement(p)?r.isEmptyElement(I)?r.isEmptyElement(a)?e.getLabelByValue(g):a:I:p},te=({size:a})=>{var h,m;if(!r.isEmptyElement(I))return null;const p=(h=f.getOptionSlot("leading",g))==null?void 0:h(),C=(m=t.tagLeading)==null?void 0:m.call(t,V(g)),u=A(e.getOptionByValue(g))??e.props.leadingIcon;return r.isEmptyElement(C)?r.isEmptyElement(p)?u?j(u,a):r.isEmptyElement(x)?null:x:p:C},ne=()=>{var p;const a=(p=t.tagTrailing)==null?void 0:p.call(t,V(g));return r.isEmptyElement(a)?null:a};return n.h(ge._sfc_main,{value:g,class:i.normCls(i.getBemElement(c,"tag"),e.props.tagCls),closeIconCls:i.getBemElement(c,"tag__close")},{text:ae,leading:te,trailing:ne,close:B})}));if(!r.isArray(e.modelValue.value)){const g=(v=f.getOptionSlot("default",e.modelValue.value))==null?void 0:v(),B=(d=f.getOptionSlot("text",e.modelValue.value))==null?void 0:d();return r.isEmptyElement(g)?r.isEmptyElement(B)?L.isString(e.modelValue.value)?e.getLabelByValue(e.modelValue.value):e.modelValue.value:B:g}})();l&&N.push(l)}return N},G=[],Z=Y();r.isEmptyElement(Z)||G.push(Z),G.push(n.h(k.Primitive,{class:i.normCls(i.getBemElement(c,"content"),e.props.triggerContentCls,M.isEmptyLikeLodash(e.modelValue.value)?e.props.triggerContentPlaceholderCls:e.props.triggerContentValueCls),as:"div",key:String(_.value),asChild:_.value},{default:ie}));const ee=H();return r.isEmptyElement(ee)||G.push(ee),G}})}}}),be=n.defineComponent({name:X.getComponentName("SelectWrapper"),setup(f,{slots:t}){const o=Le(),e=k.injectSelectRootContext(),D=n.ref();he.useLazyLoading({target:D});const c=n.ref(),W=ce.getPopoverPortalProps({triggerRef:c,props:o.props}),{getFlipOnDir:K,getDir:P}=_e.useConfig(),U=K("reversePlacementOnDir"),A=P(),F=ce.getPopoverContentProps({props:o.props,flip:U,emitsAsProps:o.emitsAsProps,_dir:A,controlAutoFocus:!1,extraPropNames:["bodyLock","position"]}),T=({key:l,getterKey:S,defaultValue:O,noReturnOption:v})=>d=>{const g=L.isFunction(O)?O(d):O;if(r.isObject(d)){const B=d[l]??g,I=S&&o.props[S];if(I){if(L.isString(I))return d[I]??B;if(L.isFunction(I))return I(d)??B}return B}return L.isString(d)&&!v?d??g:g},_=T({getterKey:"getValue",key:"value"}),y=T({getterKey:"getLabel",key:"label",defaultValue:_}),V=T({getterKey:"getIcon",key:"icon",noReturnOption:!0}),z=l=>{var S;if((S=o.props.options)!=null&&S.length)for(const O of o.props.options){if(_(O)===l)return O;const v=E(O);if(v!=null&&v.length){for(const d of v)if(_(d)===l)return d}}return l},j=l=>{const S=z(l);return S?y(S)??l:l},H=T({getterKey:"getDisabled",key:"disabled",defaultValue:!1,noReturnOption:!0}),s=T({getterKey:"getGroupLabel",key:"label",noReturnOption:!0}),E=T({getterKey:"getGroupOptions",key:"options",noReturnOption:!0}),{getDisabled:b,getStatus:q,getSize:x}=Ce.useFormInput({getDisabled:()=>o.props.disabled,getSize:()=>o.props.size,getStatus:()=>o.props.status});me({props:o.props,attrs:o.attrs,emit:o.emit,getOptionValue:_,getOptionLabel:y,getOptionDisabled:H,getOptionIcon:V,getOptionByValue:z,getLabelByValue:j,getDisabled:b,getStatus:q,getSize:x,...e,modelValue:e.modelValue}),n.watch(()=>[o.props.clearOnChangeMultiple,o.props.multiple],()=>{o.props.clearOnChangeMultiple&&(e.modelValue.value=void 0,o.emit("update:modelValue",void 0))});const R=n.computed(()=>{const l=o.props.scrollContainerProps??{};return{...l,areaCls:[i.getBemElement(w,"scroll_area"),l==null?void 0:l.class,l==null?void 0:l.areaCls]}}),Y=i.getBemElement(w,"popup"),ie=le.cva(Y,{variants:{size:i.generateVariantClassList(re,Y)}}),G=l=>{if(r.isNumber(l))return`${l}px`;if(typeof l=="string")return l},Z=n.computed(()=>G(o.props.popupWidth)),ee=n.computed(()=>G(o.props.popupHeight)),J=n.computed(()=>G(o.props.minWidth)),N=n.computed(()=>({type:x.value==="sm"?"simple":"advance",...L.omit(o.props.emptyProps??{},["class"])})),$=n.computed(()=>L.omit(o.props.skeletonProps??{},["class"]));return()=>{var te,ne,Q;const l=a=>{var p;if((p=o.props.options)!=null&&p.length&&a>0)return!!o.props.options[a-1]},S=a=>{var p,C;if((p=o.props.options)!=null&&p.length&&a>0){const u=o.props.options[a-1];return!!(u&&((C=E(u))!=null&&C.length))}},O=(te=t.default)==null?void 0:te.call(t,{}),v=(ne=r.flattenChildrenByType(O,oe))==null?void 0:ne.filter(a=>{var p;return r.isObject(a==null?void 0:a.props)&&((p=a==null?void 0:a.props)==null?void 0:p.option)}),d=[];(o.props.options??[]).forEach((a,p)=>{const C=h=>n.h(oe,{option:h},{default:()=>{var m;return(m=t.option)==null?void 0:m.call(t,{option:h})},leading:()=>{var m;return(m=t.optionLeading)==null?void 0:m.call(t,{option:h})},indicator:()=>{var m;return(m=t.optionIndicator)==null?void 0:m.call(t,{option:h})},text:()=>{var m;return(m=t.optionText)==null?void 0:m.call(t,{option:h})}}),u=E(a);if(u!=null&&u.length){l(p)&&d.push(n.h(ue._sfc_main));const h=s(a);h&&d.push(n.h(fe,{class:o.props.labelCls},()=>h)),u.forEach(m=>{d.push(C(m))})}else S(p)?d.push(n.h(ue._sfc_main)):d.push(C(a))});const g=r.flattenChildrenByType(d,oe).filter(a=>{var p;return r.isObject(a==null?void 0:a.props)&&((p=a==null?void 0:a.props)==null?void 0:p.option)}),B=!!(g!=null&&g.length||v!=null&&v.length),I=(a,p)=>{var C;if(B&&!M.isEmptyLikeLodash(p)&&L.isString(p)){const u=v!=null&&v.length?v:g;if(u.length){const h=u.find(m=>{var se;return r.isObject(m.props)&&_((se=m.props)==null?void 0:se.option)===p});return(C=h==null?void 0:h.children)==null?void 0:C[a]}}},ae=()=>{var p,C;const a=[];if(B||o.props.loading){const u=[];if(B&&(v!=null&&v.length?u.push(O):u.push(...d)),o.props.loading){const h=(p=t.loading)==null?void 0:p.call(t,{});if(!r.isEmptyElement(h))u.push(h);else{const m=new Array(B?2:o.props.loadingRowCount).fill(1);u.push(...m.map(()=>n.h(ve._sfc_main,{size:x.value,class:i.normCls(i.getBemElement(w,"skeleton"),o.props.skeletonCls),...$.value})))}}a.push(n.h("div",{class:i.normCls(i.getBemElement(w,"options"),o.props.optionsCls)},u))}else if(!B){const u=(C=t.empty)==null?void 0:C.call(t,N.value);r.isEmptyElement(u)?a.push(n.h(ye._sfc_main,{class:i.normCls(i.getBemElement(w,"empty"),o.props.emptyCls),...N.value},{title:t.emptyTitle,description:t.emptyDescription,actions:t.emptyActions,image:t.emptyImage})):a.push(u)}return o.props.lazyLoading&&a.push(n.h("div",{class:i.getBemElement(w,"lazy_loading")},n.h("div",{class:i.getBemElement(w,"lazy_loading_trigger"),ref:D}))),a};return[n.h(Be,{getOptionSlot:I,ref:c,...o.attrs,style:{...((Q=o.attrs)==null?void 0:Q.style)??{},"--ptc-select-trigger-min-w":J.value}},{trigger:t.trigger,triggerLeading:t.triggerLeading,placeholder:t.placeholder,triggerValue:t.triggerValue,triggerTrailing:t.triggerTrailing,tagClose:t.tagClose,tagTrailing:t.tagTrailing,tagLeading:t.tagLeading,tagText:t.tagText}),n.h(k.SelectPortal,W.value,()=>n.h(k.SelectContent,{...F.value,class:i.normCls(ie(o.props),o.props.popupCls),style:{display:e.open.value?void 0:"none",zIndex:o.props.zIndex,"--ptc-select-popup-width":o.props.samePopupWidth?void 0:Z.value,"--ptc-select-popup-height":ee.value,"--ptc-select-trigger-min-w":J.value}},()=>n.h(Se._sfc_main,R.value,ae)))]}}}),Oe=n.defineComponent({...X.getComponentOptions("Select"),__name:"Select",props:{status:{},size:{default:"md"},multiple:{type:Boolean,default:void 0},contentFit:{type:Boolean},wrapped:{type:Boolean},noTrailing:{type:Boolean},leadingIcon:{},zIndex:{},trailingIcon:{default:"tabler:chevron-down"},selectedItemIconAsTrailingIcon:{type:Boolean,default:!0},maxCount:{},to:{},placeholder:{},indicatorIcon:{default:"tabler:check"},options:{},getDisabled:{},getLabel:{},getValue:{},getGroupOptions:{},getGroupLabel:{},getIcon:{},placement:{default:"bottom"},reversePlacementOnDir:{},loading:{type:Boolean},skeletonProps:{},loadingRowCount:{default:10},lazyLoading:{type:Boolean},bordered:{type:Boolean,default:!0},clearOnChangeMultiple:{type:Boolean,default:!0},triggerCls:{},triggerLeadingCls:{},triggerContentCls:{},triggerContentPlaceholderCls:{},triggerContentValueCls:{},triggerTrailingCls:{},itemLeadingCls:{},optionCls:{},tagListCls:{},tagCls:{},popupCls:{},labelCls:{},optionsCls:{},optionTextCls:{},optionContentCls:{},emptyCls:{},skeletonCls:{},scrollContainerProps:{},emptyProps:{},samePopupWidth:{type:Boolean,default:!0},popupHeight:{default:384},popupWidth:{},minWidth:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:void 0},defaultValue:{},modelValue:{},by:{},dir:{},autocomplete:{},disabled:{type:Boolean,default:void 0},name:{},required:{type:Boolean},reference:{},forceMount:{type:Boolean,default:void 0},position:{default:"popper"},bodyLock:{type:Boolean},side:{},sideOffset:{default:4},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean,default:void 0},collisionBoundary:{},collisionPadding:{default:4},arrowPadding:{},sticky:{},hideWhenDetached:{type:Boolean,default:void 0},positionStrategy:{default:"fixed"},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean,default:void 0},prioritizePosition:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{},defer:{type:Boolean}},emits:["change","select","update:modelValue","update:open","closeAutoFocus","escapeKeyDown","pointerDownOutside"],setup(f,{emit:t}){r.useComponentStyle("select",Ee);const o=f,e=t,D=k.useEmitAsProps(e),c=n.computed(()=>L.omitBy({...L.pick(o,["open","defaultOpen","defaultValue","modelValue","by","dir","multiple","autocomplete","disabled"]),...L.pick(D,["onUpdate:modelValue","onUpdate:open"])},L.isUndefined)),W=n.useSlots(),K=n.useAttrs();return Ve({attrs:K,props:o,emit:e,emitsAsProps:D}),(P,U)=>(n.openBlock(),n.createBlock(n.unref(k.SelectRoot),n.normalizeProps(n.guardReactiveProps(c.value)),{default:n.withCtx(()=>[n.createVNode(n.unref(be),null,n.createSlots({_:2},[n.renderList(Object.keys(W),A=>({name:A,fn:n.withCtx(F=>[n.renderSlot(P.$slots,A,n.normalizeProps(n.guardReactiveProps(F)))])}))]),1024)]),_:3},16))}});exports.SelectOption=oe;exports.SelectSizes=re;exports.SelectStatuses=de;exports._sfc_main=Oe;exports._sfc_main$1=fe;exports.injectSelectContext=pe;exports.provideSelectContext=me;