@opentiny/vue-renderless 3.12.1 → 3.13.0-alpha.1

package/types/search.type.d.ts

@@ -1,6 +1,91 @@
 import { ExtractPropTypes } from 'vue';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
+declare const searchProps: {
+    mini: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    big: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonText: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    /**
+     * 设置为透明模式，配置为true时，边框变为透明且收缩后半透明显示，一般用在带有背景的场景
+     */
+    transparent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 搜索的类型选项，格式为[{text:'文档',value:1},...]，不配置时类型选择固定显示为All
+     */
+    searchTypes: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    /**
+     * 设置搜索输入框内的提示占位文本
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tabindex: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 配置搜索输入框enter键,enter按下触发搜索
+     */
+    isEnterSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 配置主题色，primary:蓝 gray:灰
+     */
+    themeType: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    showButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    changeBgColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    typeValue: ObjectConstructor;
+    suffixIcon: (StringConstructor | ObjectConstructor)[];
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[]; /**
+     * 搜索的类型选项，格式为[{text:'文档',value:1},...]，不配置时类型选择固定显示为All
+     */
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
 interface ISearchState {
     show: boolean;
     focus: boolean;
@@ -10,8 +95,10 @@ interface ISearchState {
     searchValue: object;
     types: string[];
     showClear: boolean;
+    formItemSize: string;
+    searchSize: string;
 }
-type ISearchProps = ExtractPropTypes<typeof ISearchProps>;
+type ISearchProps = ExtractPropTypes<typeof searchProps>;
 type ISearchRenderlessParams = ISharedRenderlessFunctionParams<never> & {
     state: ISearchState;
     props: ISearchProps;

package/types/shared.type.d.ts

@@ -112,7 +112,7 @@ interface ISharedRenderlessParamUtils<CT = never> {
     mergeClass: (...cssClasses: any[]) => string;
 }
 /** vue.ts的一个混合上下文，也是index.ts 文件中二层函数的入参混合体。 */
-type ISharedRenderlessFunctionParams<CT> = {
+type ISharedRenderlessFunctionParams<CT = null> = {
     api: object;
     props: object;
     state: object;

package/types/skeleton-item.type.d.ts

@@ -0,0 +1,38 @@
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
+
+type VariantType = 'image' | 'circle' | 'square';
+type SizeType = 'large' | 'medium' | 'small';
+declare const $constants: {};
+declare const skeletonItemProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    modelValue: StringConstructor;
+    variant: {
+        type: PropType<VariantType>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeType>;
+        default: string;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+type ISkeletonItemProps = ExtractPropTypes<typeof skeletonItemProps>;
+type ISkeletonItemConstants = typeof $constants;
+interface ISkeletonItemState {
+    isActive: boolean;
+}
+interface ISkeletonItemApi {
+    state: ISkeletonItemState;
+}
+
+export { ISkeletonItemApi, ISkeletonItemConstants, ISkeletonItemProps, ISkeletonItemState };

package/types/skeleton.type.d.ts

@@ -0,0 +1,45 @@
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
+
+declare const $constants: {};
+declare const skeletonProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    modelValue: StringConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    avatar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowsWidth: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+type ISkeletonProps = ExtractPropTypes<typeof skeletonProps>;
+type ISkeletonConstants = typeof $constants;
+interface ISkeletonApi {
+    toPxStyle: (value: string | number) => string | undefined;
+}
+
+export { ISkeletonApi, ISkeletonConstants, ISkeletonProps };

package/types/slider.type.d.ts

@@ -134,7 +134,6 @@ interface ISliderState {
     moveStyle: object;
     points: object[];
     labels: object[];
-    isInit: boolean;
     isDrag: boolean;
     sliderSize: number;
     inputValue: [number, number];
@@ -148,6 +147,7 @@ interface ISliderState {
     leftBtnStyle: string;
     leftBtnPercent: number;
     leftBtnShow: true;
+    mouseOuterBtn: boolean;
     rightBtnStyle: string;
     rightBtnPercent: number;
     rightBtnShow: boolean;
@@ -156,6 +156,10 @@ interface ISliderState {
     tipValue: ComputedRef<string>;
     formDisabled: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    /** 使用这个值作为插槽中输入的值，而不是直接用activeValue，来实现在输入时不会被max min属性计算而改变 */
+    slotValue: number;
+    /** 是否正在输入 */
+    isSlotTyping: boolean;
 }
 interface ISliderApi {
     state: ISliderState;
@@ -186,6 +190,9 @@ interface ISliderApi {
     getPoints: () => void;
     getLabels: () => void;
     inputValueChange: () => void;
+    handleSlotInputFocus: () => void;
+    handleSlotInputBlur: () => void;
+    handleSlotInput: (event: Event) => void;
 }
 type ISliderRenderlessParams = ISharedRenderlessFunctionParams<ISliderConstants> & {
     state: ISliderState;

package/types/steps.type.d.ts

@@ -55,6 +55,12 @@ declare const stepsProps: {
     tiny_chart_theme: ObjectConstructor;
 };
 
+declare const updateStartIndex: ({ state, props }: Pick<IStepsRenderlessParams, 'state' | 'props'>) => () => void;
+declare const isVisibleHandler: ({ state, props }: Pick<IStepsRenderlessParams, 'state' | 'props'>) => (index: number) => IStepsVisibleConfig;
+declare const computedRightNodePos: ({ state, props }: Pick<IStepsRenderlessParams, 'state' | 'props'>) => () => IStepsNodePosConfig[];
+declare const handleMouseenter: ({ state, vm }: Pick<IStepsRenderlessParams, 'state' | 'vm'>) => (e: MouseEvent, placement: string) => void;
+declare const handleMouseleave: (state: IStepsRenderlessParams['state']) => () => void;
+
 type IStepsProps = ExtractPropTypes<typeof stepsProps>;
 type IStepsRenderlessParamUtils = ISharedRenderlessParamUtils<never>;
 interface IStepsState {
@@ -62,12 +68,17 @@ interface IStepsState {
     endIndex: number;
     rightNodePositions: IStepsNodePosConfig[];
     computedSpace: number | string;
+    popoverVisible: boolean;
+    popoverContent: string | null;
+    popoverPlacement: string;
 }
 interface IStepsApi {
     state: IStepsState;
-    updateStartIndex: () => void;
-    isVisibleHandler: (index: number) => IStepsVisibleConfig;
-    computedRightNodePos: () => IStepsNodePosConfig[];
+    updateStartIndex: ReturnType<typeof updateStartIndex>;
+    isVisibleHandler: ReturnType<typeof isVisibleHandler>;
+    handleMouseenter: ReturnType<typeof handleMouseenter>;
+    handleMouseleave: ReturnType<typeof handleMouseleave>;
+    computedRightNodePos: ReturnType<typeof computedRightNodePos>;
 }
 type IStepsRenderlessParams = ISharedRenderlessFunctionParams<never> & {
     props: IStepsProps;

package/types/tab-item.type.d.ts

@@ -9,7 +9,6 @@ declare const tabItemProps: {
         default: () => {};
     };
     title: StringConstructor;
-    labelContent: FunctionConstructor;
     name: StringConstructor;
     withClose: BooleanConstructor;
     disabled: BooleanConstructor;

package/types/tab-nav.type.d.ts

@@ -17,6 +17,7 @@ import { a as tabNavPcProps } from './index-e0250f63.js';
 
 declare const computedNavStyle: (state: ITabNavRenderlessParams['state']) => {
     transform: string;
+    width?: string;
 };
 declare const scrollIntoView: ({ parent, vm, state }: Pick<ITabNavRenderlessParams, 'parent' | 'vm' | 'state'>) => () => void;
 declare const computedSizeName: (state: ITabNavRenderlessParams['state']) => 'width' | 'height';
@@ -46,6 +47,10 @@ type ITabNavProps = {
 } & ExtractPropTypes<typeof tabNavPcProps> & ITabsProps;
 interface ITabNavStyle {
 }
+interface ITabLineStyle {
+    width: number;
+    offset: number;
+}
 interface ITabNavScrollable {
     prev: number;
     next: boolean;
@@ -53,7 +58,7 @@ interface ITabNavScrollable {
 interface ITabNavState {
     dragging: boolean;
     navOffset: number;
-    lineOffset: number;
+    lineStyle: ITabLineStyle;
     scrollable: boolean | ITabNavScrollable;
     isFocus: boolean;
     focusable: boolean;

package/types/tabs.type.d.ts

@@ -47,6 +47,10 @@ declare const tabsProps: {
     expandTabsTitle: StringConstructor;
     expandTabsMode: StringConstructor;
     tooltipConfig: (StringConstructor | ObjectConstructor)[];
+    optimized: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -94,6 +98,7 @@ interface ITabsState {
     offsetY: number;
     direction: string;
     expandPanesWidth: string | number;
+    activeIndex: number;
     morePanes?: ITabsPaneVm[];
     separator?: boolean;
 }

package/types/tag-group.type.d.ts

@@ -1,2 +1,65 @@
+import { ExtractPropTypes } from 'vue';
+import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-export { }
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+declare function export_default(delay: any, atBegin: any, callback?: Function): Function;
+
+declare const tagGroupProps: {
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    data: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    effect: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+declare const handelItemClick: ({ emit }: Pick<ITagGroupRenderlessParamUtils, 'emit'>) => (item: ITagGroupDataItem, index: number, $event: MouseEvent) => void;
+declare const getHiddenTags: ({ props, vm, state }: Pick<ITagGroupRenderlessParams, 'props' | 'vm' | 'state'>) => () => void;
+
+interface ITagGroupDataItem {
+    name: string;
+    type?: string;
+}
+interface ITagGroupState {
+    showMore: boolean;
+    hiddenTags: ITagGroupDataItem[];
+}
+type ITagGroupRenderlessParams = ISharedRenderlessFunctionParams<never> & {
+    api: ITagGroupApi;
+    state: ITagGroupState;
+    props: ITagGroupProps;
+};
+type ITagGroupProps = ExtractPropTypes<typeof tagGroupProps>;
+interface ITagGroupApi {
+    state: ITagGroupState;
+    getHiddenTags: ReturnType<typeof getHiddenTags>;
+    handelItemClick: ReturnType<typeof handelItemClick>;
+    debouncedGetHiddenTags?: ReturnType<typeof export_default>;
+}
+type ITagGroupRenderlessParamUtils = ISharedRenderlessParamUtils<never>;
+
+export { ITagGroupApi, ITagGroupDataItem, ITagGroupProps, ITagGroupRenderlessParamUtils, ITagGroupRenderlessParams, ITagGroupState };

package/types/tag.type.d.ts

@@ -23,6 +23,14 @@ declare const tagProps: {
     };
     beforeDelete: FunctionConstructor;
     value: (StringConstructor | NumberConstructor)[];
+    mini: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -35,6 +43,10 @@ interface ITagState {
     type: string | undefined;
     show: boolean;
     selected: boolean;
+    text: string;
+    color: string;
+    mini: boolean;
+    maxWidth: string | number;
 }
 interface ITagApi {
     state: ITagState;

package/types/tooltip.type.d.ts

@@ -131,7 +131,7 @@ declare const watchFocusing: (state: ITooltipState) => (value: boolean) => void;
 declare const focusHandler: ({ slots, api }: Pick<ITooltipRenderlessParams, 'slots' | 'api'>) => () => void;
 declare const bindEvent: ({ api, state, vm }: Pick<ITooltipRenderlessParams, 'api' | 'state' | 'vm'>) => (reference: HTMLElement) => void;
 declare const observeCallback: ({ state, popperVmRef }: Pick<ITooltipRenderlessParams, 'state' | 'popperVmRef'>) => (mutationsList: any) => void;
-declare const bindPopper: ({ vm, refs, nextTick, popperVmRef }: Pick<ITooltipRenderlessParams, 'vm' | 'refs' | 'nextTick' | 'popperVmRef'>) => (el?: Element) => void;
+declare const bindPopper: ({ vm, nextTick, popperVmRef }: Pick<ITooltipRenderlessParams, 'vm' | 'nextTick' | 'popperVmRef'>) => (el?: Element) => void;
 
 type ITooltipProps = ExtractPropTypes<typeof tooltipProps>;
 interface ITooltipState {

package/types/transfer.type.d.ts

@@ -1,2 +1,184 @@
+import { ExtractPropTypes } from 'vue';
+import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-export { }
+declare const $constants: {
+    ISCHECKED: string;
+    DROPPANEL: string;
+    TRANSFERPANEL: string;
+};
+declare const transferProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            ISCHECKED: string;
+            DROPPANEL: string;
+            TRANSFERPANEL: string;
+        };
+    };
+    buttonTexts: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    columns: ArrayConstructor;
+    data: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    dropConfig: ObjectConstructor;
+    filterMethod: FunctionConstructor;
+    filterPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    filterable: BooleanConstructor;
+    format: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    leftDefaultChecked: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    pagerOp: {
+        type: ObjectConstructor;
+        default: () => {
+            mode: string;
+            pageVO: {
+                currentPage: number;
+                pageSize: number;
+            };
+        };
+    };
+    props: {
+        type: ObjectConstructor;
+        default: () => {
+            label: string;
+            key: string;
+            disabled: string;
+        };
+    };
+    render: ObjectConstructor;
+    renderContent: FunctionConstructor;
+    renderType: StringConstructor;
+    rightDefaultChecked: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    showAllBtn: BooleanConstructor;
+    showPager: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    targetOrder: {
+        type: StringConstructor;
+        default: string;
+    };
+    titles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    toLeftDisable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    toRightDisable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    treeOp: ObjectConstructor;
+    beforeTransfer: FunctionConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+/** 生成全量数据对应的一个大对象 */
+declare const getObj: (props: ITransferProps) => () => unknown;
+/** 返回左边的数据项 */
+declare const getSourceData: ({ props, Tree }: Pick<ITransferRenderlessParams, "props"> & {
+    Tree: string;
+}) => () => unknown[];
+/** 返回右边的数据项 */
+declare const getTargetData: ({ props, state, Tree, Table }: Pick<ITransferRenderlessParams, "state" | "props"> & {
+    Tree: string;
+    Table: string;
+}) => () => unknown;
+declare const onSourceCheckedChange: ({ emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'state'>) => (val: string[], movedKeys: string[]) => void;
+declare const onTargetCheckedChange: ({ emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'state'>) => (val: string[], movedKeys: string[]) => void;
+declare const addToLeft: ({ emit, props, state }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) => (value: undefined | 'all') => void;
+declare const addToRight: ({ emit, refs, props, state, Tree }: Pick<ITransferRenderlessParams, "state" | "props" | "refs" | "emit"> & {
+    Tree: string;
+}) => (value: undefined | 'all') => void;
+declare const clearQuery: (refs: ITransferRenderlessParams['refs']) => (which: 'left' | 'right') => void;
+/** SortableJs 插件的回调逻辑， 添加，删除，更新事件后，触发本函数 */
+declare const logicFun: ({ props, emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) => ({ event, isAdd, pullMode }: {
+    event: any;
+    isAdd?: boolean | undefined;
+    pullMode?: "sort" | undefined;
+}) => void;
+/** 组件加载后，给左右面板初始化Sortable的功能 */
+declare const sortableEvent: ({ api, droppanel, props, queryDom, refs }: Pick<ITransferRenderlessParams, "props" | "refs" | "api"> & {
+    droppanel: string;
+    queryDom: string;
+}) => () => void;
+declare const getLeftCheckedData: ({ props, state }: Pick<ITransferRenderlessParams, 'state' | 'props'>) => () => ITransferData[];
+declare const getRightCheckedData: ({ props, state }: Pick<ITransferRenderlessParams, 'state' | 'props'>) => () => ITransferData[];
+
+interface ITransferData {
+    key: string;
+    label: string;
+    disabled: boolean;
+    [customProp: string]: any;
+}
+interface ITransferState {
+    /** 左边选中的key的数组 */
+    leftChecked: string[];
+    /** 右边选中的key的数组 */
+    rightChecked: string[];
+    leftData: any[];
+    rightData: any[];
+    dataObj: any;
+    /** 左边的全部数据项 */
+    sourceData: ITransferData[];
+    /** 右边的全部数据 */
+    targetData: ITransferData[];
+    /** 是否传入了有效的buttonText */
+    hasButtonTexts: boolean;
+    /** 传递给右面板的 isToLeft 属性 */
+    isToLeft: boolean;
+    /** 函数。 它传递给2个面板，用于渲染每个数据项 */
+    optionRender: any;
+}
+type ITransferProps = ExtractPropTypes<typeof transferProps>;
+type ITransferConstants = typeof $constants;
+type ITransferRenderlessParams = ISharedRenderlessFunctionParams<ITransferConstants> & {
+    api: ITransferApi;
+    state: ITransferState;
+    props: ITransferProps;
+};
+interface ITransferApi {
+    state: ITransferState;
+    /** 生成全量数据对应的一个大对象 */
+    getObj: ReturnType<typeof getObj>;
+    clearQuery: ReturnType<typeof clearQuery>;
+    getSourceData: ReturnType<typeof getSourceData>;
+    addToLeft: ReturnType<typeof addToLeft>;
+    getLeftCheckedData: ReturnType<typeof getLeftCheckedData>;
+    getRightCheckedData: ReturnType<typeof getRightCheckedData>;
+    addToRight: ReturnType<typeof addToRight>;
+    onTargetCheckedChange: ReturnType<typeof onTargetCheckedChange>;
+    onSourceCheckedChange: ReturnType<typeof onSourceCheckedChange>;
+    logicFun: ReturnType<typeof logicFun>;
+    getTargetData: ReturnType<typeof getTargetData>;
+    sortableEvent: ReturnType<typeof sortableEvent>;
+}
+type ITransferRenderlessParamUtils = ISharedRenderlessParamUtils<ITransferConstants>;
+
+export { ITransferApi, ITransferConstants, ITransferData, ITransferProps, ITransferRenderlessParamUtils, ITransferRenderlessParams, ITransferState };