@opentiny/vue-renderless 3.25.0 → 3.27.0

package/types/button.type.d.ts

@@ -1,4 +1,5 @@
 import { ComputedRef, ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const buttonProps: {
@@ -80,7 +81,7 @@ declare const buttonProps: {
         type: PropType<(ev: MouseEvent) => void>;
     };
     tiny_mode: StringConstructor;
-    tiny_mode_root: BooleanConstructor; /** 是否圆角按钮 */
+    tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
     tiny_renderless: FunctionConstructor;
     tiny_theme: StringConstructor;

package/types/color-select-panel.type.d.ts

@@ -1,3 +1,78 @@
+import { ComputedRef, Ref } from 'vue';
+
+interface LinearGradientState {
+    linearGradientBarBackground: string;
+}
+interface ColorOptions {
+    enableAlpha: boolean;
+    format: string;
+    value?: string;
+}
+interface HSVColor {
+    h: number;
+    s: number;
+    v: number;
+}
+interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface HSLColor {
+    hue: number;
+    sat: number;
+    light: number;
+}
+interface IColor {
+    enableAlpha: boolean;
+    format: string;
+    value: string;
+    selected?: boolean;
+    get(prop: string): number;
+    set(props: {
+        [key: string]: any;
+    }): void;
+    set(prop: string, value: number): void;
+    compare(color: IColor): boolean;
+    isHSL(value: string): boolean;
+    isHsv(value: string): boolean;
+    isRgb(value: string): boolean;
+    isHex(value: string): boolean;
+    onHsv(value: string): void;
+    onRgb(value: string): void;
+    onHex(value: string): void;
+    onHsl(value: string): void;
+    fromHSV(hsv: HSVColor): void;
+    fromString(value: string): void;
+    toRgb(): RGBColor;
+    onChange(): void;
+}
+interface ColorUtils {
+    rgb2hsv(rgb: RGBColor): HSVColor;
+    hsv2rgb(hsv: HSVColor): RGBColor;
+    hsv2hsl(hsv: {
+        hue: number;
+        sat: number;
+        val: number;
+    }): [number, number, number];
+    hsl2hsv(hsl: HSLColor): HSVColor;
+    toHex(rgb: RGBColor): string;
+    parseHex(hex: string): number;
+    hexOne(value: number): string;
+}
+interface IColorPoint {
+    color: IColor;
+    cursorLeft: number;
+}
+interface ColorPanelContext {
+    colorMode: ComputedRef<IColorSelectPanelProps['colorMode']>;
+    activeColor: Ref<IColorPoint>;
+    bar: Ref<HTMLElement | null>;
+    colorPoints: Ref<IColorPoint[]>;
+    linearGardientValue: Ref<string>;
+    deg: Ref<number>;
+}
+type IColorSelectPanelMaybeRef<T> = IColorSelectPanelRef<T> | T;
 interface IColorSelectPanelRef<T> {
     value: T;
 }
@@ -7,6 +82,7 @@ interface IColorSelectPanelProps {
     history: string[];
     predefine: string[];
     format: ('hsl' | 'hsv' | 'hex' | 'rgb')[];
+    colorMode: 'linear-gradient' | 'monochrome';
     modelValue: string;
     enableHistory: boolean;
     enablePredefineColor: boolean;
@@ -23,5 +99,125 @@ interface IColorSelectPanelHueProps<C> {
 interface IColorSelectPanelAlphaPanel<C> {
     color: C;
 }
+interface UseColorPointsRet {
+    onClick: (element: Element, point: IColorPoint) => void;
+    linearGradientValue: Readonly<Ref<string>>;
+    updateDeg: (_deg: number) => void;
+    removePoint: (point: IColorPoint) => void;
+    addPoint: (point: IColorPoint) => void;
+    setActivePoint: (point: IColorPoint) => void;
+    getActviePoint: () => Ref<IColorPoint>;
+}
+interface ColorSelectPanelExtends {
+    parse: parse;
+}
+interface LinearGradientNode {
+    type: 'linear-gradient';
+    orientation?: DirectionalNode | AngularNode | undefined;
+    colorStops: ColorStop[];
+}
+interface RepeatingLinearGradientNode {
+    type: 'repeating-linear-gradient';
+    orientation?: DirectionalNode | AngularNode | undefined;
+    colorStops: ColorStop[];
+}
+interface RadialGradientNode {
+    type: 'radial-gradient';
+    orientation?: Array<ShapeNode | DefaultRadialNode | ExtentKeywordNode> | undefined;
+    colorStops: ColorStop[];
+}
+interface RepeatingRadialGradientNode {
+    type: 'repeating-radial-gradient';
+    orientation?: Array<ShapeNode | DefaultRadialNode | ExtentKeywordNode> | undefined;
+    colorStops: ColorStop[];
+}
+interface DirectionalNode {
+    type: 'directional';
+    value: 'left' | 'top' | 'bottom' | 'right' | 'left top' | 'top left' | 'left bottom' | 'bottom left' | 'right top' | 'top right' | 'right bottom' | 'bottom right';
+}
+interface AngularNode {
+    type: 'angular';
+    value: string;
+}
+interface LiteralNode {
+    type: 'literal';
+    value: string;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface HexNode {
+    type: 'hex';
+    value: string;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface RgbNode {
+    type: 'rgb';
+    value: [string, string, string];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface RgbaNode {
+    type: 'rgba';
+    value: [string, string, string, string?];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface HslNode {
+    type: 'hsl';
+    value: [string, string, string];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface HslaNode {
+    type: 'hsla';
+    value: [string, string, string, string?];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface VarNode {
+    type: 'var';
+    value: string;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+interface ShapeNode {
+    type: 'shape';
+    style?: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode | undefined;
+    value: 'ellipse' | 'circle';
+    at?: PositionNode | undefined;
+}
+interface DefaultRadialNode {
+    type: 'default-radial';
+    at: PositionNode;
+}
+interface PositionKeywordNode {
+    type: 'position-keyword';
+    value: 'center' | 'left' | 'top' | 'bottom' | 'right';
+}
+interface PositionNode {
+    type: 'position';
+    value: {
+        x: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode;
+        y: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode;
+    };
+}
+interface ExtentKeywordNode {
+    type: 'extent-keyword';
+    value: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner' | 'contain' | 'cover';
+    at?: PositionNode | undefined;
+}
+interface PxNode {
+    type: 'px';
+    value: string;
+}
+interface EmNode {
+    type: 'em';
+    value: string;
+}
+interface PercentNode {
+    type: '%';
+    value: string;
+}
+interface CalcNode {
+    type: 'calc';
+    value: string;
+}
+type ColorStop = LiteralNode | HexNode | RgbNode | RgbaNode | HslNode | HslaNode | VarNode;
+type GradientNode = LinearGradientNode | RepeatingLinearGradientNode | RadialGradientNode | RepeatingRadialGradientNode;
+type parse = (value: string) => GradientNode[];
 
-export { IColorSelectPanelAlphProps, IColorSelectPanelAlphaPanel, IColorSelectPanelHueProps, IColorSelectPanelProps, IColorSelectPanelRef, IColorSelectPanelSVProps };
+export { AngularNode, CalcNode, ColorOptions, ColorPanelContext, ColorSelectPanelExtends, ColorStop, ColorUtils, DefaultRadialNode, DirectionalNode, EmNode, ExtentKeywordNode, GradientNode, HSLColor, HSVColor, HexNode, HslNode, HslaNode, IColor, IColorPoint, IColorSelectPanelAlphProps, IColorSelectPanelAlphaPanel, IColorSelectPanelHueProps, IColorSelectPanelMaybeRef, IColorSelectPanelProps, IColorSelectPanelRef, IColorSelectPanelSVProps, LinearGradientNode, LinearGradientState, LiteralNode, PercentNode, PositionKeywordNode, PositionNode, PxNode, RGBColor, RadialGradientNode, RepeatingLinearGradientNode, RepeatingRadialGradientNode, RgbNode, RgbaNode, ShapeNode, UseColorPointsRet, VarNode, parse };

package/types/dialog-box.type.d.ts

@@ -1,17 +1,7 @@
 import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams, ISharedRenderlessParamHooks } from './shared.type.js';
 
-/**
- * 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 const $constants: {
     DIALOG_SLIDER_RIGHT: string;
     DIALOG_FADE: string;
@@ -138,6 +128,9 @@ declare const dialogBoxProps: {
         type: ObjectConstructor;
         default: () => {};
     };
+    onClose: {
+        type: PropType<() => void>;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];

package/types/numeric.type.d.ts

@@ -74,7 +74,7 @@ declare const numericProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: (StringConstructor | NumberConstructor | undefined)[];
+    modelValue: (StringConstructor | NumberConstructor)[];
     mouseWheel: BooleanConstructor;
     name: StringConstructor;
     placeholder: StringConstructor;

package/types/pager.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const pagerProps: {

package/types/picker.type.d.ts

@@ -57,6 +57,10 @@ declare const pickerProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    popperOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
     align: {
         type: StringConstructor;
         default: string;

package/types/radio-button.type.d.ts

@@ -1,6 +1,7 @@
 import { StyleValue, ExtractPropTypes } from 'vue';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 import { IRadioGroupProps } from './radio-group.type.js';
+import '@opentiny/vue-common';
 
 declare const $constants: {
     RADIO_GROUP: string;

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

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const radioGroupProps: {

package/types/radio.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams } from './shared.type.js';
 
 declare const $constants: {

package/types/slider.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes, CSSProperties, ComputedRef } from 'vue';
+import { ExtractPropTypes, CSSProperties, ComputedRef } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const $constants: {

package/types/space.type.d.ts

@@ -0,0 +1,31 @@
+/** 支持的 size 类型定义：预设值或 px 数字，或水平/垂直间距数组 */
+type SpaceSize = 'small' | 'medium' | 'large' | string | number | Array<string | number>;
+/** 交叉轴对齐方式 */
+type SpaceAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+/** 主轴对齐方式 */
+type SpaceJustify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+/** 布局方向：横向还是纵向 */
+type SpaceDirection = 'row' | 'column';
+/** Space 组件 props 接口定义 */
+interface ISpaceProps {
+    size?: SpaceSize;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    direction?: SpaceDirection;
+    wrap?: boolean;
+    order?: any[];
+    customClass?: string;
+    customStyle?: string | Record<string, any>;
+}
+/** renderless 返回的响应式数据结构 */
+interface ISpaceApi {
+    state: {
+        direction: SpaceDirection;
+        align: SpaceAlign;
+        justify: SpaceJustify;
+        wrap: boolean;
+        gapStyle: Record<string, string>;
+    };
+}
+
+export { ISpaceApi, ISpaceProps, SpaceAlign, SpaceDirection, SpaceJustify, SpaceSize };

package/types/switch.type.d.ts

@@ -23,7 +23,7 @@ declare const switchProps: {
     };
     showText: {
         type: BooleanConstructor;
-        default: undefined;
+        default: boolean;
     };
     types: {
         type: StringConstructor;

package/types/tabs.type.d.ts

@@ -57,6 +57,7 @@ declare const tabsProps: {
     moreShowAll: BooleanConstructor;
     panelMaxHeight: StringConstructor;
     panelWidth: StringConstructor;
+    headerOnly: BooleanConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -108,6 +109,7 @@ interface ITabsState {
     activeIndex: number;
     morePanes?: ITabsPaneVm[];
     separator?: boolean;
+    headerOnly?: boolean;
 }
 /**
  *tab根元素实例对象

package/types/user-contact.type.d.ts

@@ -1,17 +1,7 @@
 import { ExtractPropTypes, ref } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-/**
- * 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 const userContactProps: {
     showName: {
         type: BooleanConstructor;

package/user/index.js

@@ -91,7 +91,7 @@ const request = {
       cb({ error: e });
     });
   },
-  batchRequest(api) {
+  batchRequest(api, emit) {
     const me = this;
     const reqParamsSeq = me.getParams();
     let reqLen = reqParamsSeq.length;
@@ -112,6 +112,7 @@ const request = {
             });
           });
           errors.length && logger.warn(`user [${errors.join(",")}] not found`);
+          emit("error", errors);
           this.clearRequest();
         }
       }
@@ -142,12 +143,12 @@ const request = {
       this.batch = batch;
     }
   },
-  getusers({ param, api, batch, cb }) {
+  getusers({ param, api, batch, cb, emit }) {
     if (batch !== false) {
       this.setBatch(batch);
       clearTimeout(this.timmer);
       this.addRequest({ param, cb });
-      this.timmer = setTimeout(() => this.batchRequest(api), 100);
+      this.timmer = setTimeout(() => this.batchRequest(api, emit), 100);
     } else {
       this.singleRequest(param, api, cb);
     }
@@ -316,7 +317,7 @@ const syncCacheIds = ({ props, state }) => (ids, queryIds, cacheData) => {
     }
   });
 };
-const getUsers = ({ api, props, state }) => (value) => {
+const getUsers = ({ api, props, state, emit }) => (value) => {
   const { cache } = props;
   const { valueField } = state;
   const ids = Array.isArray(value) ? value : value.split(props.valueSplit);
@@ -339,7 +340,7 @@ const getUsers = ({ api, props, state }) => (value) => {
         resolve(data.concat(filterData));
       }
     };
-    request.getusers({ param, api, batch: state.batch, cb });
+    request.getusers({ param, api, batch: state.batch, cb, emit });
   });
 };
 const updateCache = ({ props, state }) => () => {

package/user/vue.js

@@ -57,7 +57,7 @@ const renderless = (props, { reactive, watch, computed, provide }, { emit, nextT
     suggestUser: suggestUser(api2),
     cacheUser: cacheUser({ api: api2, props, service: $service, state }),
     initUser: initUser({ api: api2, props, state }),
-    getUsers: getUsers({ api: api2, props, state }),
+    getUsers: getUsers({ api: api2, props, state, emit }),
     setSelected: setSelected({ api: api2, props, state }),
     searchMethod: searchMethod({ api: api2, props, state, emit }),
     userChange: userChange({ api: api2, emit, props, state, dispatch, constants }),