vue-devui 1.3.4-alpha.4 → 1.4.1

package/tabs/index.es.js

@@ -1,4 +1,4 @@
-import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, onUnmounted, watch, createVNode, resolveComponent, nextTick, provide, mergeProps, getCurrentInstance } from "vue";
+import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, onUnmounted, watch, nextTick, createVNode, resolveComponent, provide, mergeProps, getCurrentInstance } from "vue";
 const tabsProps = {
   modelValue: {
     type: [String, Number],
@@ -263,10 +263,12 @@ var TabNav = defineComponent({
       }
     });
     watch(() => props.modelValue, () => {
-      const tab2 = tabsList.value.find((item) => item.props.id === props.modelValue);
-      if (tab2) {
-        activeClick(tab2);
-      }
+      nextTick(() => {
+        const tab2 = tabsList.value.find((item) => item.props.id === props.modelValue);
+        if (tab2) {
+          activeClick(tab2);
+        }
+      });
     });
     return () => {
       const closeIconEl = (item) => {

package/tabs/index.umd.js

@@ -1 +1 @@
-(function(v,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis!="undefined"?globalThis:v||self,t(v.index={},v.Vue))})(this,function(v,t){"use strict";const w={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null},closeable:{type:Boolean,default:!1},addable:{type:Boolean,default:!1},tabPosition:{type:String,default:"top"}};function y(e,a,n){let o=e;return a&&(o+=`__${a}`),n&&(o+=`--${n}`),o}function V(e,a=!1){const n=a?`.devui-${e}`:`devui-${e}`;return{b:()=>y(n),e:s=>s?y(n,s):"",m:s=>s?y(n,"",s):"",em:(s,f)=>s&&f?y(n,s,f):""}}const g=V("tabs");function U(e,a){const{cssClass:n,tabPosition:o,customWidth:r}=t.toRefs(e),l=t.computed(()=>({[g.e("nav")]:!0,[g.em("nav",e.type)]:!0,[n.value]:Boolean(n.value),[g.em("nav","top")]:o.value==="top",[g.em("nav","right")]:o.value==="right",[g.em("nav","bottom")]:o.value==="bottom",[g.em("nav","left")]:o.value==="left"})),i=t.computed(()=>({["custom-width"]:Boolean(r.value)})),s={width:e.customWidth?e.customWidth:""},f=t.computed(()=>["top","bottom"].includes(e.tabPosition)?{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}:{top:a.offsetTop+"px",height:a.offsetHeight+"px",width:a.offsetWidth+"px"});return{ulClasses:l,aClasses:i,customStyle:s,sliderAnimationStyle:f}}function $(e,a,n,o,r,l){const i=()=>{e.type==="slider"&&setTimeout(()=>{var c;const d=(c=l.value)==null?void 0:c.querySelector("#"+e.modelValue+".active");d&&l.value&&(["top","bottom"].includes(e.tabPosition)?o.offsetLeft=d.getBoundingClientRect().left-l.value.getBoundingClientRect().left:(o.offsetTop=d.getBoundingClientRect().top-l.value.getBoundingClientRect().top,o.offsetHeight=d.getBoundingClientRect().height),o.offsetWidth=d.getBoundingClientRect().width)})},s=d=>{let c=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const u=e.beforeChange(d);typeof u!="undefined"&&(u.then?c=u:c=Promise.resolve(u))}return c},f=(d,c)=>{const u=d.props.id;!e.reactivable&&e.modelValue===u||s(u).then(p=>{if(!p)return;const C=n.value.find(P=>P.props.id===u);a&&C&&!C.props.disabled&&(a.state.active=u,e.type==="slider"&&c&&l&&l.value&&(["left","right"].includes(e.tabPosition)?o.offsetLeft=c.getBoundingClientRect().left-l.value.nativeElement.getBoundingClientRect().left:(o.offsetTop=c.getBoundingClientRect().top-l.value.nativeElement.getBoundingClientRect().top,o.offsetHeight=c.getBoundingClientRect().height),o.offsetWidth=c.getBoundingClientRect().width),r.emit("active-tab-change",C.props.id))})};return{update:i,activeClick:f,beforeMount:()=>{e.type!=="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&f(n.value[0])},mounted:()=>{var d;if(e.type==="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&n.value[0]){const c=n.value[0],u=(d=c.tabsEle)==null?void 0:d.value,p=u==null?void 0:u.getElementById(c.tabId);f(p)}},tabCanClose:d=>(e.closeable||d.closeable)&&!d.disabled}}function j(e){return{onTabRemove:(o,r)=>{r.stopPropagation(),e.emit("tab-remove",o.props,r),e.emit("tab-change",o.props.id,"delete")},onTabAdd:()=>{e.emit("tab-add"),e.emit("tab-change",void 0,"add")}}}var F="",k=t.defineComponent({name:"DTabNav",props:w,emits:["active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=V("tabs"),o=t.shallowRef(),r=t.reactive({offsetLeft:0,offsetWidth:0,offsetTop:0,offsetHeight:0,id:null}),l=t.inject("tabs"),i=t.computed(()=>Object.values((l==null?void 0:l.state.data)||{})),{ulClasses:s,aClasses:f,customStyle:B,sliderAnimationStyle:N}=U(e,r),{update:m,beforeMount:d,mounted:c,activeClick:u,tabCanClose:p}=$(e,l,i,r,a,o),{onTabRemove:C,onTabAdd:P}=j(a),_=()=>{P(),t.nextTick(()=>{o.value&&(o.value.scrollLeft=o.value.scrollWidth)})};let R=!1;const L=h=>{if(o.value){const T=h.clientX,b=o.value.scrollLeft;R=!0,o.value.addEventListener("mousemove",M=>{if(R&&o.value){const E=M.clientX-T;o.value.scrollLeft=b-E}}),o.value.addEventListener("mouseup",()=>{R=!1}),o.value.addEventListener("mouseleave",()=>{R=!1})}};return t.onUpdated(()=>m()),t.onBeforeMount(()=>d()),t.onMounted(()=>{c(),o.value&&o.value.addEventListener("mousedown",L)}),t.onUnmounted(()=>{o.value&&o.value.removeEventListener("mousedown",L)}),t.watch(()=>e.modelValue,()=>{const h=i.value.find(T=>T.props.id===e.modelValue);h&&u(h)}),()=>{const h=b=>p(b)?t.createVNode("span",{class:n.e("close-btn"),onClick:M=>C(b,M)},[t.createVNode(t.resolveComponent("d-icon"),{size:"12px",name:"error-o"},null)]):null,T=e.addable?t.createVNode("li",{class:n.e("new-tab"),onClick:_},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]):null;return t.createVNode("ul",{ref:o,role:"tablist",class:s.value},[(i.value||[]).map(b=>t.createVNode("li",{role:"presentation",onClick:()=>{u(b)},class:(e.modelValue===b.props.id?"active":"")+(b.props.disabled?" disabled":""),id:b.props.id},[t.createVNode("span",{class:n.e("nav-content")},[t.createVNode("a",{role:"tab","data-toggle":b.props.id,"aria-expanded":e.modelValue===b.props.id,class:f.value,style:B},[b.slots.title?b.slots.title():t.createVNode("span",null,[b.props.title])]),h(b)])])),T,t.createVNode("div",{class:n.e(`nav-${e.type}-animation`),style:N.value},null)])}}});const W=V("tabs");function X(e){return{onUpdateModelValue:i=>{e.emit("update:modelValue",i)},onActiveTabChange:i=>{e.emit("active-tab-change",i)},onTabRemove:(i,s)=>{e.emit("tab-remove",i,s)},onTabAdd:()=>{e.emit("tab-add")},onTabChange:(i,s)=>{e.emit("tab-change",i,s)}}}function D(e){return{tabsClasses:t.computed(()=>({[W.b()]:!0,[W.m(e.tabPosition)]:!0}))}}var S=t.defineComponent({name:"DTabs",props:w,emits:["update:modelValue","active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=t.reactive({data:{},active:e.modelValue,showContent:e.showContent}),o=m=>{m.uid&&(n.data[m.uid]=m)},r=m=>{m&&delete n.data[m]};t.provide("tabs",{state:n,addTab:o,deleteTab:r});const{onUpdateModelValue:l,onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}=X(a),{tabsClasses:N}=D(e);return t.watch(()=>n.active,()=>{l(n.active)}),()=>{var c,u;const m=t.createVNode(k,t.mergeProps(e,{onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}),null),d=(u=(c=a.slots).default)==null?void 0:u.call(c);return t.createVNode("div",{class:N.value},[e.tabPosition==="bottom"?[d,m]:[m,d],t.createVNode("div",{style:"clear: both"},null)])}}});const H={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1}};var q="",A=t.defineComponent({name:"DTab",props:H,setup(e,{slots:a}){const n=t.inject("tabs"),o=V("tab"),r=t.getCurrentInstance(),l=t.reactive({uid:r==null?void 0:r.uid,slots:a,props:e});return t.onMounted(()=>{n==null||n.addTab(l)}),t.onUnmounted(()=>{n==null||n.deleteTab(l.uid)}),()=>{var f;const{id:i}=e;return(n==null?void 0:n.state.showContent)&&n.state.active===i?t.createVNode("div",{class:o.e("content")},[t.createVNode("div",{role:"tabpanel"},[(f=a.default)==null?void 0:f.call(a)])]):null}}}),I={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"100%",install(e){e.component(S.name,S),e.component(A.name,A)}};v.Tab=A,v.Tabs=S,v.default=I,v.tabsProps=w,Object.defineProperty(v,"__esModule",{value:!0}),v[Symbol.toStringTag]="Module"});
+(function(v,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis!="undefined"?globalThis:v||self,t(v.index={},v.Vue))})(this,function(v,t){"use strict";const w={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null},closeable:{type:Boolean,default:!1},addable:{type:Boolean,default:!1},tabPosition:{type:String,default:"top"}};function y(e,a,n){let o=e;return a&&(o+=`__${a}`),n&&(o+=`--${n}`),o}function V(e,a=!1){const n=a?`.devui-${e}`:`devui-${e}`;return{b:()=>y(n),e:s=>s?y(n,s):"",m:s=>s?y(n,"",s):"",em:(s,f)=>s&&f?y(n,s,f):""}}const g=V("tabs");function k(e,a){const{cssClass:n,tabPosition:o,customWidth:r}=t.toRefs(e),l=t.computed(()=>({[g.e("nav")]:!0,[g.em("nav",e.type)]:!0,[n.value]:Boolean(n.value),[g.em("nav","top")]:o.value==="top",[g.em("nav","right")]:o.value==="right",[g.em("nav","bottom")]:o.value==="bottom",[g.em("nav","left")]:o.value==="left"})),i=t.computed(()=>({["custom-width"]:Boolean(r.value)})),s={width:e.customWidth?e.customWidth:""},f=t.computed(()=>["top","bottom"].includes(e.tabPosition)?{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}:{top:a.offsetTop+"px",height:a.offsetHeight+"px",width:a.offsetWidth+"px"});return{ulClasses:l,aClasses:i,customStyle:s,sliderAnimationStyle:f}}function U(e,a,n,o,r,l){const i=()=>{e.type==="slider"&&setTimeout(()=>{var c;const d=(c=l.value)==null?void 0:c.querySelector("#"+e.modelValue+".active");d&&l.value&&(["top","bottom"].includes(e.tabPosition)?o.offsetLeft=d.getBoundingClientRect().left-l.value.getBoundingClientRect().left:(o.offsetTop=d.getBoundingClientRect().top-l.value.getBoundingClientRect().top,o.offsetHeight=d.getBoundingClientRect().height),o.offsetWidth=d.getBoundingClientRect().width)})},s=d=>{let c=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const u=e.beforeChange(d);typeof u!="undefined"&&(u.then?c=u:c=Promise.resolve(u))}return c},f=(d,c)=>{const u=d.props.id;!e.reactivable&&e.modelValue===u||s(u).then(p=>{if(!p)return;const C=n.value.find(P=>P.props.id===u);a&&C&&!C.props.disabled&&(a.state.active=u,e.type==="slider"&&c&&l&&l.value&&(["left","right"].includes(e.tabPosition)?o.offsetLeft=c.getBoundingClientRect().left-l.value.nativeElement.getBoundingClientRect().left:(o.offsetTop=c.getBoundingClientRect().top-l.value.nativeElement.getBoundingClientRect().top,o.offsetHeight=c.getBoundingClientRect().height),o.offsetWidth=c.getBoundingClientRect().width),r.emit("active-tab-change",C.props.id))})};return{update:i,activeClick:f,beforeMount:()=>{e.type!=="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&f(n.value[0])},mounted:()=>{var d;if(e.type==="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&n.value[0]){const c=n.value[0],u=(d=c.tabsEle)==null?void 0:d.value,p=u==null?void 0:u.getElementById(c.tabId);f(p)}},tabCanClose:d=>(e.closeable||d.closeable)&&!d.disabled}}function $(e){return{onTabRemove:(o,r)=>{r.stopPropagation(),e.emit("tab-remove",o.props,r),e.emit("tab-change",o.props.id,"delete")},onTabAdd:()=>{e.emit("tab-add"),e.emit("tab-change",void 0,"add")}}}var F="",j=t.defineComponent({name:"DTabNav",props:w,emits:["active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=V("tabs"),o=t.shallowRef(),r=t.reactive({offsetLeft:0,offsetWidth:0,offsetTop:0,offsetHeight:0,id:null}),l=t.inject("tabs"),i=t.computed(()=>Object.values((l==null?void 0:l.state.data)||{})),{ulClasses:s,aClasses:f,customStyle:B,sliderAnimationStyle:N}=k(e,r),{update:m,beforeMount:d,mounted:c,activeClick:u,tabCanClose:p}=U(e,l,i,r,a,o),{onTabRemove:C,onTabAdd:P}=$(a),_=()=>{P(),t.nextTick(()=>{o.value&&(o.value.scrollLeft=o.value.scrollWidth)})};let R=!1;const L=h=>{if(o.value){const T=h.clientX,b=o.value.scrollLeft;R=!0,o.value.addEventListener("mousemove",M=>{if(R&&o.value){const E=M.clientX-T;o.value.scrollLeft=b-E}}),o.value.addEventListener("mouseup",()=>{R=!1}),o.value.addEventListener("mouseleave",()=>{R=!1})}};return t.onUpdated(()=>m()),t.onBeforeMount(()=>d()),t.onMounted(()=>{c(),o.value&&o.value.addEventListener("mousedown",L)}),t.onUnmounted(()=>{o.value&&o.value.removeEventListener("mousedown",L)}),t.watch(()=>e.modelValue,()=>{t.nextTick(()=>{const h=i.value.find(T=>T.props.id===e.modelValue);h&&u(h)})}),()=>{const h=b=>p(b)?t.createVNode("span",{class:n.e("close-btn"),onClick:M=>C(b,M)},[t.createVNode(t.resolveComponent("d-icon"),{size:"12px",name:"error-o"},null)]):null,T=e.addable?t.createVNode("li",{class:n.e("new-tab"),onClick:_},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]):null;return t.createVNode("ul",{ref:o,role:"tablist",class:s.value},[(i.value||[]).map(b=>t.createVNode("li",{role:"presentation",onClick:()=>{u(b)},class:(e.modelValue===b.props.id?"active":"")+(b.props.disabled?" disabled":""),id:b.props.id},[t.createVNode("span",{class:n.e("nav-content")},[t.createVNode("a",{role:"tab","data-toggle":b.props.id,"aria-expanded":e.modelValue===b.props.id,class:f.value,style:B},[b.slots.title?b.slots.title():t.createVNode("span",null,[b.props.title])]),h(b)])])),T,t.createVNode("div",{class:n.e(`nav-${e.type}-animation`),style:N.value},null)])}}});const W=V("tabs");function X(e){return{onUpdateModelValue:i=>{e.emit("update:modelValue",i)},onActiveTabChange:i=>{e.emit("active-tab-change",i)},onTabRemove:(i,s)=>{e.emit("tab-remove",i,s)},onTabAdd:()=>{e.emit("tab-add")},onTabChange:(i,s)=>{e.emit("tab-change",i,s)}}}function D(e){return{tabsClasses:t.computed(()=>({[W.b()]:!0,[W.m(e.tabPosition)]:!0}))}}var S=t.defineComponent({name:"DTabs",props:w,emits:["update:modelValue","active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=t.reactive({data:{},active:e.modelValue,showContent:e.showContent}),o=m=>{m.uid&&(n.data[m.uid]=m)},r=m=>{m&&delete n.data[m]};t.provide("tabs",{state:n,addTab:o,deleteTab:r});const{onUpdateModelValue:l,onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}=X(a),{tabsClasses:N}=D(e);return t.watch(()=>n.active,()=>{l(n.active)}),()=>{var c,u;const m=t.createVNode(j,t.mergeProps(e,{onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}),null),d=(u=(c=a.slots).default)==null?void 0:u.call(c);return t.createVNode("div",{class:N.value},[e.tabPosition==="bottom"?[d,m]:[m,d],t.createVNode("div",{style:"clear: both"},null)])}}});const H={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1}};var q="",A=t.defineComponent({name:"DTab",props:H,setup(e,{slots:a}){const n=t.inject("tabs"),o=V("tab"),r=t.getCurrentInstance(),l=t.reactive({uid:r==null?void 0:r.uid,slots:a,props:e});return t.onMounted(()=>{n==null||n.addTab(l)}),t.onUnmounted(()=>{n==null||n.deleteTab(l.uid)}),()=>{var f;const{id:i}=e;return(n==null?void 0:n.state.showContent)&&n.state.active===i?t.createVNode("div",{class:o.e("content")},[t.createVNode("div",{role:"tabpanel"},[(f=a.default)==null?void 0:f.call(a)])]):null}}}),I={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"100%",install(e){e.component(S.name,S),e.component(A.name,A)}};v.Tab=A,v.Tabs=S,v.default=I,v.tabsProps=w,Object.defineProperty(v,"__esModule",{value:!0}),v[Symbol.toStringTag]="Module"});

package/types/editable-select/__tests__/clearable-editable-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/editable-select/__tests__/custom-template-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/editable-select/__tests__/disabled-editable-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/editable-select/__tests__/event-editable-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/editable-select/__tests__/search-filter-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/editable-select/src/components/dropdown/dropdown-types.d.ts

@@ -0,0 +1,15 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { Options } from '../../editable-select-types';
+export declare const dropdownProps: {
+    readonly options: {
+        readonly type: PropType<Options>;
+        readonly default: () => never[];
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+    };
+    readonly maxHeight: {
+        readonly type: NumberConstructor;
+    };
+};
+export declare type DropdownProps = ExtractPropTypes<typeof dropdownProps>;

package/types/editable-select/src/components/dropdown/dropdown.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<unknown, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export default _default;

package/types/editable-select/src/components/option/option-types.d.ts

@@ -0,0 +1,18 @@
+import { ExtractPropTypes } from 'vue';
+export declare const editableSelectOptionProps: {
+    label: {
+        type: StringConstructor;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hovering: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare type EditableSelectOptionProps = ExtractPropTypes<typeof editableSelectOptionProps>;

package/types/editable-select/src/components/option/option.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: StringConstructor;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hovering: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hovering: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    hovering: boolean;
+}>;
+export default _default;

package/types/editable-select/src/composables/use-input-event.d.ts

@@ -0,0 +1,14 @@
+import { Ref, SetupContext } from 'vue';
+import { EditableSelectProps } from '../editable-select-types';
+import { States } from './use-select';
+export interface UseInputEventReturnType {
+    blur: () => void;
+    setSoftFocus: () => void;
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+    onInput: (e: Event) => void;
+    handleBlur: (e: FocusEvent) => void;
+    handleFocus: (e: FocusEvent) => void;
+    handleClear: (e: Event) => void;
+}
+export declare function useInputEvent(inputRef: Ref<HTMLInputElement | undefined>, props: EditableSelectProps, states: States, ctx: SetupContext): UseInputEventReturnType;

package/types/editable-select/src/composables/use-input-render.d.ts

@@ -0,0 +1,12 @@
+import { ComputedRef } from 'vue';
+import { EditableSelectProps } from '../editable-select-types';
+import { States } from './use-select';
+interface UseInputRenderReturnType {
+    inputClasses: ComputedRef<Record<string, boolean>>;
+    inputPlaceholderClasses: ComputedRef<Record<string, boolean>>;
+    inputWrapperClasses: ComputedRef<Record<string, boolean>>;
+    inputInnerClasses: ComputedRef<Record<string, boolean>>;
+    inputSuffixClasses: ComputedRef<Record<string, boolean>>;
+}
+export declare function useInputRender(props: EditableSelectProps, states: States): UseInputRenderReturnType;
+export {};

package/types/editable-select/src/composables/use-keyboard-select.d.ts

@@ -1,7 +1,7 @@
-import { ComputedRef, Ref } from 'vue';
-import { OptionObjectItem } from '../editable-select-types';
-interface useKeyboardSelectReturnType {
-    handleKeydown: (event: KeyboardEvent) => void;
+import { Ref } from 'vue';
+import { EditableSelectProps, Option, Options } from '../editable-select-types';
+import { States } from './use-select';
+export interface UseKeyboardSelectReturnType {
+    onKeydown: (e: KeyboardEvent) => void;
 }
-export declare function useKeyboardSelect(dropdownRef: Ref, hoverIndex: Ref<number>, filteredOptions: ComputedRef<OptionObjectItem[]>, disabledKey: string, visible: Ref<boolean>, loading: Ref<boolean>, handleClick: (option: OptionObjectItem, index: number) => void, toggleMenu: () => void, closeMenu: () => void): useKeyboardSelectReturnType;
-export {};
+export declare function useKeyboardSelect(props: EditableSelectProps, states: States, filteredOptions: Ref<Options>, scrollToItem: (index: number) => void, handleOptionSelect: (option: Option, byClick: boolean) => void): UseKeyboardSelectReturnType;

package/types/editable-select/src/composables/use-lazy-load.d.ts

@@ -1,6 +1,7 @@
 import { Ref, SetupContext } from 'vue';
-interface useLazyLoadReturenType {
+import { EditableSelectProps } from '../editable-select-types';
+interface UseLazyLoadReturnType {
     loadMore: () => void;
 }
-export declare function useLazyLoad(dropdownRef: Ref<HTMLElement>, enableLazyLoad: boolean, ctx: SetupContext): useLazyLoadReturenType;
+export declare function useLazyLoad(dropdownRef: Ref<HTMLElement | undefined>, props: EditableSelectProps, ctx: SetupContext): UseLazyLoadReturnType;
 export {};

package/types/editable-select/src/composables/use-option.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef } from 'vue';
+import { EditableSelectOptionProps } from '../components/option/option-types';
+interface UseOptionReturnType {
+    optionClasses: ComputedRef<Record<string, boolean>>;
+}
+export declare function useOption(props: EditableSelectOptionProps): UseOptionReturnType;
+export {};

package/types/editable-select/src/composables/use-select.d.ts

@@ -1,7 +1,27 @@
-import { ComputedRef } from 'vue';
-import { EditableSelectProps, OptionObjectItem } from '../editable-select-types';
+import { ComputedRef, Ref, SetupContext } from 'vue';
+import { EditableSelectProps, Option, Options } from '../editable-select-types';
+export interface UseSelectStatesReturnType {
+    hoveringIndex: number;
+    selectedIndex: number;
+    query: string;
+    inputValue: string;
+    selectedLabel: string;
+    isFocus: boolean;
+    visible: boolean;
+    softFocus: boolean;
+    isSilentBlur: boolean;
+    inputHovering: boolean;
+}
 interface UseSelectReturnType {
-    normalizeOptions: ComputedRef<OptionObjectItem[]>;
+    cachedOptions: Ref<Options>;
+    filteredOptions: ComputedRef<Options>;
+    emptyText: ComputedRef<string>;
+    showClearable: ComputedRef<boolean>;
+    toggleMenu: () => void;
+    handleOptionSelect: (option: Option, byClick: boolean) => void;
+    scrollToItem: (index: number) => void;
 }
-export declare function useSelect(props: EditableSelectProps): UseSelectReturnType;
+export declare type States = UseSelectStatesReturnType;
+export declare function useSelectStates(): UseSelectStatesReturnType;
+export declare function useSelect(dropdownRef: Ref, props: EditableSelectProps, states: States, setSoftFocus: () => void, ctx: SetupContext): UseSelectReturnType;
 export {};

package/types/editable-select/src/editable-select-types.d.ts

@@ -1,50 +1,85 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-export interface OptionObjectItem {
+import type { PropType, ExtractPropTypes, InjectionKey, Ref, ComputedRef } from 'vue';
+export interface Option {
     label: string;
     value: string | number;
+    disabled?: boolean;
     [key: string]: unknown;
 }
-export declare type Option = string | number | Partial<OptionObjectItem>;
 export declare type Options = Array<Option>;
+export declare type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+export declare type EditableSelectSize = 'sm' | 'lg';
 export declare const editableSelectProps: {
     readonly modelValue: {
-        readonly type: StringConstructor;
-        readonly default: "";
+        readonly type: PropType<string | number>;
+    };
+    readonly appendToBody: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly position: {
+        readonly type: PropType<Placement[]>;
+        readonly default: readonly ["bottom"];
     };
     readonly options: {
         readonly type: PropType<Options>;
         readonly default: () => never[];
     };
+    readonly width: {
+        readonly type: NumberConstructor;
+    };
+    readonly maxHeight: {
+        readonly type: NumberConstructor;
+    };
+    readonly size: {
+        readonly type: PropType<EditableSelectSize>;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "Select";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly allowClear: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
     readonly disabled: {
         readonly type: BooleanConstructor;
+        readonly default: false;
     };
     readonly disabledKey: {
         readonly type: StringConstructor;
         readonly default: "";
     };
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: "Search";
-    };
-    readonly width: {
-        readonly type: NumberConstructor;
+    readonly remote: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
-    readonly maxHeight: {
-        readonly type: NumberConstructor;
+    readonly filterMethod: {
+        readonly type: PropType<(inputValue: string) => void>;
     };
-    readonly loading: {
-        readonly type: BooleanConstructor;
+    readonly remoteMethod: {
+        readonly type: PropType<(inputValue: string) => void>;
     };
     readonly enableLazyLoad: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
-    readonly searchFn: {
-        readonly type: PropType<(option: OptionObjectItem, term: string) => boolean>;
-    };
 };
 export declare type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>;
+export interface EditableSelectContext {
+    dropdownRef: Ref<HTMLElement | undefined>;
+    query: Ref<string>;
+    inputValue: Ref<string>;
+    hoveringIndex: Ref<number>;
+    loading: Ref<boolean>;
+    modelValue: Ref<string | number | undefined> | undefined;
+    emptyText: ComputedRef<string>;
+    disabledKey: string;
+    loadMore: () => void;
+    handleOptionSelect: (option: Option, byClick: boolean) => void;
+    setSoftFocus: () => void;
+}
+export declare const SELECT_KEY: InjectionKey<EditableSelectContext>;

package/types/editable-select/src/editable-select.d.ts

@@ -1,3 +1,132 @@
 import './editable-select.scss';
-declare const _default: import("vue").DefineComponent<unknown, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+declare const _default: import("vue").DefineComponent<{
+    readonly modelValue: {
+        readonly type: import("vue").PropType<string | number>;
+    };
+    readonly appendToBody: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly position: {
+        readonly type: import("vue").PropType<import("./editable-select-types").Placement[]>;
+        readonly default: readonly ["bottom"];
+    };
+    readonly options: {
+        readonly type: import("vue").PropType<import("./editable-select-types").Options>;
+        readonly default: () => never[];
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+    };
+    readonly maxHeight: {
+        readonly type: NumberConstructor;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("./editable-select-types").EditableSelectSize>;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "Select";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly allowClear: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabledKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly remote: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly filterMethod: {
+        readonly type: import("vue").PropType<(inputValue: string) => void>;
+    };
+    readonly remoteMethod: {
+        readonly type: import("vue").PropType<(inputValue: string) => void>;
+    };
+    readonly enableLazyLoad: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, "clear" | "blur" | "change" | "focus" | "loadMore" | "update:modelValue" | "visibleChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import("vue").PropType<string | number>;
+    };
+    readonly appendToBody: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly position: {
+        readonly type: import("vue").PropType<import("./editable-select-types").Placement[]>;
+        readonly default: readonly ["bottom"];
+    };
+    readonly options: {
+        readonly type: import("vue").PropType<import("./editable-select-types").Options>;
+        readonly default: () => never[];
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+    };
+    readonly maxHeight: {
+        readonly type: NumberConstructor;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("./editable-select-types").EditableSelectSize>;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "Select";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly allowClear: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabledKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly remote: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly filterMethod: {
+        readonly type: import("vue").PropType<(inputValue: string) => void>;
+    };
+    readonly remoteMethod: {
+        readonly type: import("vue").PropType<(inputValue: string) => void>;
+    };
+    readonly enableLazyLoad: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>>, {
+    readonly position: import("./editable-select-types").Placement[];
+    readonly loading: boolean;
+    readonly disabled: boolean;
+    readonly options: import("./editable-select-types").Options;
+    readonly placeholder: string;
+    readonly disabledKey: string;
+    readonly appendToBody: boolean;
+    readonly enableLazyLoad: boolean;
+    readonly allowClear: boolean;
+    readonly remote: boolean;
+}>;
 export default _default;

package/types/form/__tests__/form-item-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/select/src/select.d.ts

@@ -189,11 +189,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:modelValue': (val: import("./select-types").ModelValue) => void;
     readonly onToggleChange: (bool: boolean) => void;
     readonly allowClear: boolean;
+    readonly remote: boolean;
     readonly overview: "border" | "underlined";
     readonly optionDisabledKey: string;
     readonly collapseTags: boolean;
     readonly collapseTagsTooltip: boolean;
-    readonly remote: boolean;
     readonly allowCreate: boolean;
     readonly noDataText: string;
     readonly noMatchText: string;