@opentiny/vue-renderless 3.26.0 → 3.27.0

package/select/index.js

@@ -179,8 +179,8 @@ const handleMenuEnter = ({ api, nextTick, state, props }) => () => {
     nextTick(() => api.scrollToOption(state.selected));
   }
 };
-const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
-  if (state.device === "mb" && props.multiple && !changed)
+const emitChange = ({ emit, props, state, constants, isMobileFirstMode }) => (value, changed) => {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !changed)
     return;
   const seekItem = (val, arr, items, flag) => {
     if (constants.TYPE.Tree === flag) {
@@ -220,8 +220,8 @@ const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
     }
   }
 };
-const directEmitChange = ({ emit, props, state }) => (value, key) => {
-  if (state.device === "mb" && props.multiple)
+const directEmitChange = ({ emit, props, state, isMobileFirstMode }) => (value, key) => {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple)
     return;
   emit("change", value, key);
 };
@@ -1101,7 +1101,7 @@ const toHide = ({ constants, state, props, vm, api }) => () => {
     }
   }
 };
-const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
+const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMode }) => (value) => {
   var _a;
   if ((props.filterable || props.searchable || props.remote) && !value) {
     (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
@@ -1109,7 +1109,7 @@ const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) =>
   if (api.onCopying()) {
     return;
   }
-  if (value && props.multiple && state.device === "mb") {
+  if (value && props.multiple && isMobileFirstMode && state.device === "mb") {
     state.selectedCopy = state.selected.slice();
   }
   setTimeout(() => {
@@ -1147,12 +1147,28 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
     api.resetInputHeight();
   }
   nextTick(() => {
-    if (parent.$el.querySelector("input") !== document.activeElement) {
+    var _a;
+    if (parent.$el.querySelector("input") !== document.activeElement && // filterable时， 从 input 框离开了
+    !(((_a = document.activeElement) == null ? void 0 : _a.classList.contains("tiny-input__inner")) && // 并且当前不在下拉面板的searchable 的input中时，  才需要更新一下setSelect
+    document.activeElement.closest(".tiny-select-dropdown__search"))) {
       api.setSelected();
     }
   });
   api.getOptionIndexArr();
 };
+const watchOptionsWhenAutoSelect = ({ nextTick, props, state, api }) => () => {
+  if (props.autoSelect && props.remote) {
+    nextTick(() => {
+      var _a, _b;
+      if (((_a = props.options) == null ? void 0 : _a.length) === 1 || state.options.length === 1) {
+        const { valueField } = props;
+        const option = ((_b = props.options) == null ? void 0 : _b.length) === 1 ? props.options[0] : state.options[0];
+        api.updateModelValue(props.multiple ? [option[props.valueField]] : option[props.valueField]);
+        state.visible = false;
+      }
+    });
+  }
+};
 const getOptionIndexArr = ({ props, state, api }) => () => {
   setTimeout(() => {
     state.optionIndexArr = api.queryVisibleOptions().map((item) => Number(item.getAttribute("data-index")));
@@ -1586,9 +1602,9 @@ const computeMultipleLimit = ({ props, state }) => () => {
   const { optimizeOpts } = state;
   return optmzApis.natural(multiple && optimization ? multipleLimit || optimizeOpts.limit : multipleLimit);
 };
-const updateModelValue = ({ props, emit, state }) => (value, needUpdate) => {
+const updateModelValue = ({ props, emit, state, isMobileFirstMode }) => (value, needUpdate) => {
   state.isClickChoose = true;
-  if (state.device === "mb" && props.multiple && !needUpdate) {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !needUpdate) {
     state.modelValue = value;
   } else {
     emit("update:modelValue", value);
@@ -1626,17 +1642,17 @@ const computedTagsStyle = ({ props, parent, state, vm }) => () => {
   }
   return tagsStyle;
 };
-const computedReadonly = ({ props, state }) => () => {
+const computedReadonly = ({ props, state, isMobileFirstMode }) => () => {
   if (state.isIOS && props.filterable) {
     return false;
   } else {
-    return state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+    return isMobileFirstMode && state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
   }
 };
 const computedShowClose = ({ props, state }) => () => props.clearable && !state.selectDisabled && (state.inputHovering || props.multiple && state.visible) && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== "");
 const computedCollapseTagSize = (state) => () => state.selectSize;
-const computedShowNewOption = ({ props, state }) => () => {
-  const query = state.device === "mb" ? state.queryValue : state.query;
+const computedShowNewOption = ({ props, state, isMobileFirstMode }) => () => {
+  const query = isMobileFirstMode && state.device === "mb" ? state.queryValue : state.query;
   return (props.filterable || props.searchable) && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
 };
 const computedShowCopy = ({ props, state }) => () => props.multiple && props.copyable && state.inputHovering && state.selected.length;
@@ -1845,6 +1861,7 @@ export {
   watchInputHover,
   watchOptimizeOpts,
   watchOptions,
+  watchOptionsWhenAutoSelect,
   watchPropsOption,
   watchShowClose,
   watchValue,

package/select/vue.js

@@ -113,7 +113,8 @@ import {
   computedIsExpand,
   computedShowTagText,
   isTagClosable,
-  computedCurrentSizeMap
+  computedCurrentSizeMap,
+  watchOptionsWhenAutoSelect
 } from "./index";
 import { debounce } from "@opentiny/utils";
 import { isNumber } from "@opentiny/utils";
@@ -183,7 +184,19 @@ const api = [
   "computedShowTagText",
   "isTagClosable"
 ];
-const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  api: api2,
+  emitter,
+  parent,
+  constants,
+  isMobileFirstMode,
+  useBreakpoint,
+  vm,
+  designConfig
+}) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
     selectEmitter: emitter(),
@@ -224,10 +237,13 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     selectedCopy: [],
     compareValue: null,
     selectedVal: computed(
-      () => state.device === "mb" && props.multiple && state.visible ? state.selectedCopy : state.selected
+      () => isMobileFirstMode && state.device === "mb" && props.multiple && state.visible ? state.selectedCopy : state.selected
     ),
     displayOnlyContent: computed(() => {
       var _a;
+      if (vm.$slots.reference) {
+        return "";
+      }
       if (props.multiple) {
         if (Array.isArray(state.selected)) {
           if (state.isDisplayOnly && props.options && props.options.length > 0) {
@@ -372,8 +388,8 @@ const initApi = ({
     getChildValue: getChildValue(),
     getOption: getOption({ props, state, api: api2 }),
     getSelectedOption: getSelectedOption({ props, state }),
-    emitChange: emitChange({ emit, props, state, constants }),
-    directEmitChange: directEmitChange({ emit, props, state, constants }),
+    emitChange: emitChange({ emit, props, state, constants, isMobileFirstMode }),
+    directEmitChange: directEmitChange({ emit, props, state, constants, isMobileFirstMode }),
     toggleMenu: toggleMenu({ vm, state, props, api: api2, isMobileFirstMode }),
     showTip: showTip({ props, state, vm }),
     onOptionDestroy: onOptionDestroy(state),
@@ -414,12 +430,12 @@ const initApi = ({
     computeMultipleLimit: computeMultipleLimit({ props, state }),
     watchInputHover: watchInputHover({ vm }),
     initQuery: initQuery({ props, state, constants, vm }),
-    updateModelValue: updateModelValue({ props, emit, state }),
+    updateModelValue: updateModelValue({ props, emit, state, isMobileFirstMode }),
     computedTagsStyle: computedTagsStyle({ props, parent, state, vm }),
-    computedReadonly: computedReadonly({ props, state }),
+    computedReadonly: computedReadonly({ props, state, isMobileFirstMode }),
     computedShowClose: computedShowClose({ props, state }),
     computedCollapseTagSize: computedCollapseTagSize(state),
-    computedShowNewOption: computedShowNewOption({ props, state }),
+    computedShowNewOption: computedShowNewOption({ props, state, isMobileFirstMode }),
     computedShowCopy: computedShowCopy({ props, state }),
     computedOptionsAllDisabled: computedOptionsAllDisabled(state),
     computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),
@@ -435,7 +451,8 @@ const initApi = ({
     clearNoMatchValue: clearNoMatchValue({ props, emit }),
     computedShowTagText: computedShowTagText({ state }),
     isTagClosable: isTagClosable(),
-    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig })
+    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig }),
+    watchOptionsWhenAutoSelect: watchOptionsWhenAutoSelect({ state, props, nextTick, api: api2 })
   });
   addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };
@@ -571,6 +588,8 @@ const initWatch = ({ watch, props, api: api2, state, nextTick }) => {
 };
 const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
   watch(() => [...state.options], api2.watchOptions);
+  watch(() => state.options, api2.watchOptionsWhenAutoSelect);
+  props.options && watch(() => props.options, api2.watchOptionsWhenAutoSelect);
   if (props.renderType === "grid" && !props.optimization) {
     watch(() => state.gridData, api2.setSelected, { immediate: true });
   }
@@ -597,6 +616,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     emitter,
     parent,
     constants,
+    isMobileFirstMode,
     useBreakpoint,
     vm,
     designConfig

package/slider/vue.js

@@ -172,6 +172,13 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
       api2.setActiveButtonValue(value);
     }
   );
+  watch(
+    () => props.vertical,
+    () => {
+      api2.setBarStyle();
+      api2.setButtonStyle();
+    }
+  );
   watch(
     () => state.leftBtnValue,
     (newVal) => {

package/space/index.js

@@ -0,0 +1,30 @@
+import "../chunk-G2ADBYYC.js";
+const sizeMap = {
+  small: "8px",
+  medium: "16px",
+  large: "24px"
+};
+const parseGap = (gap) => {
+  if (typeof gap === "number")
+    return `${gap}px`;
+  if (gap in sizeMap)
+    return sizeMap[gap];
+  if (typeof gap === "string")
+    return gap;
+  return "0px";
+};
+const getGapStyle = (props) => {
+  const gapProp = props.size;
+  if (Array.isArray(gapProp)) {
+    const [horizontal, vertical] = gapProp;
+    return {
+      gap: `${parseGap(vertical)} ${parseGap(horizontal)}`
+    };
+  }
+  return {
+    gap: parseGap(gapProp)
+  };
+};
+export {
+  getGapStyle
+};

package/space/vue.js

@@ -0,0 +1,39 @@
+import "../chunk-G2ADBYYC.js";
+import { getGapStyle } from "./index";
+const api = ["state", "orderedChildren"];
+function isVNodeFn(node) {
+  return !!(node && (node.__v_isVNode || node.componentOptions));
+}
+const renderless = (props, hooks, { slots }) => {
+  const { reactive, computed } = hooks;
+  const state = reactive({
+    gapStyle: computed(() => getGapStyle(props))
+  });
+  const orderedChildren = computed(() => {
+    var _a, _b;
+    const children = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+    const validChildren = children.filter((v) => {
+      if (!isVNodeFn(v))
+        return false;
+      const type = v.type;
+      return type !== "Comment" && type !== Symbol.for("v-comment");
+    });
+    if (!((_b = props.order) == null ? void 0 : _b.length))
+      return validChildren;
+    const map = {};
+    validChildren.forEach((child) => {
+      var _a2, _b2, _c;
+      const key = (_c = child.key) != null ? _c : Array.isArray((_a2 = child.props) == null ? void 0 : _a2.class) ? child.props.class.join(" ") : (_b2 = child.props) == null ? void 0 : _b2.class;
+      if (key)
+        map[String(key)] = child;
+    });
+    const sorted = props.order.map((k) => map[k]).filter(Boolean);
+    const rest = validChildren.filter((v) => !props.order.includes(String(v.key)));
+    return [...sorted, ...rest];
+  });
+  return { state, orderedChildren };
+};
+export {
+  api,
+  renderless
+};

package/tab-nav/index.js

@@ -301,11 +301,11 @@ const watchCurrentName = ({ nextTick, vm, state }) => () => {
   });
 };
 const handleTitleMouseenter = ({ state, vm, props }) => (e, title) => {
-  const dom = e.target;
-  const el = title == null ? void 0 : title.el;
   if (props.tooltipConfig) {
     return;
   }
+  const dom = e.target;
+  const el = title == null ? void 0 : title.el;
   if (dom && el && el.scrollWidth > el.offsetWidth) {
     const tooltip = vm.$refs.tooltip;
     tooltip.state.referenceElm = dom;

package/tabs-mf/vue-nav.js

@@ -6,37 +6,28 @@ const renderless = (props, { reactive, inject, computed, onMounted, onBeforeUnmo
     navItems: computed(() => tabs.state.items),
     currentNav: computed(() => tabs.state.navs[state.currentIndex]),
     currentIndex: computed(
-      () => tabs.state.navs.findIndex((item) => tabs.state.currentItem && tabs.state.currentItem.name === item.name)
+      () => tabs.state.navs.findIndex((item) => tabs.state.cacheCurrentItem && tabs.state.cacheCurrentItem.name === item.name)
     ),
     currentWidth: 0,
     currentPosition: 0
   });
-  let rafId, observer;
+  let observer;
   onMounted(() => {
     observer = new MutationObserver((mutationsList) => {
-      for (let mutation of mutationsList) {
-        if (mutation.type === "attributes") {
-          if (rafId) {
-            cancelAnimationFrame(rafId);
-          }
-          rafId = requestAnimationFrame(() => {
-            const nav = state.currentNav;
-            state.currentWidth = nav && nav.$el.offsetWidth || 0;
-            state.currentPosition = nav && nav.$el.offsetLeft || 0;
-          });
-        }
-      }
+      const nav = state.currentNav;
+      state.currentWidth = nav && nav.$el.offsetWidth || 0;
+      state.currentPosition = nav && nav.$el.offsetLeft || 0;
     });
     observer.observe(vm.$el, { attributes: true, subtree: true });
   });
   onBeforeUnmount(() => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
-    }
     observer.disconnect();
     observer = null;
   });
-  return { state };
+  Object.assign(api, {
+    state
+  });
+  return api;
 };
 export {
   api,

package/tabs-mf/vue-slider-bar.js

@@ -0,0 +1,24 @@
+import "../chunk-G2ADBYYC.js";
+const api = ["state"];
+const renderless = (props, { reactive, inject, computed, onMounted, onUnmounted, onUpdated }, { vm, emit }) => {
+  const tabs = inject("tabs", null);
+  const state = reactive({
+    currentNav: computed(() => props.currentNav || null),
+    currentWidth: computed(() => props.currentWidth + "px"),
+    currentPosition: computed(() => props.currentPosition + "px")
+  });
+  const handleTransitionEnd = () => {
+    tabs.state.currentItem = tabs.state.cacheCurrentItem;
+  };
+  onMounted(() => {
+    vm.$el.addEventListener("transitionend", handleTransitionEnd);
+  });
+  onUnmounted(() => {
+    vm.$el.removeEventListener("transitionend", handleTransitionEnd);
+  });
+  return { state };
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/vue.js

@@ -37,7 +37,8 @@ const renderless = (props, hooks, { vm, emit, nextTick }) => {
   const state = reactive({
     items: [],
     navs: [],
-    currentItem: computed(() => state.items.find((item) => item.selected)),
+    currentItem: null,
+    cacheCurrentItem: computed(() => state.items.find((item) => item.selected)),
     key: computed(() => state.currentItem ? state.currentItem.name : random()),
     separator: props.separator,
     swipeable: computed(() => api2.computedSwipeable()),
@@ -83,6 +84,7 @@ const renderless = (props, hooks, { vm, emit, nextTick }) => {
   );
   onMounted(() => {
     nextTick(() => api2.observeTabSwipeSize());
+    state.currentItem = state.cacheCurrentItem;
     props.activeName && api2.scrollTo(props.activeName);
     props.modelValue && api2.scrollTo(props.modelValue);
   });

package/tag/index.js

@@ -8,7 +8,7 @@ const handleClose = ({ emit, props, state }) => (event) => {
   props.beforeDelete ? props.beforeDelete(close) : close();
 };
 const handleClick = ({ emit, props, parent, state }) => (event) => {
-  if (props.selectable || props.disabled)
+  if (props.disabled)
     return;
   parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
   state.selected = !state.selected;

package/tree-menu/index.js

@@ -56,6 +56,9 @@ const watchFilterText = ({ vm }) => (value) => {
 const nodeDragStart = (emit) => (node, event) => {
   emit("node-drag-start", node, event);
 };
+const inputChange = ({ emit, state }) => () => {
+  emit("input-change", state.filterText);
+};
 const nodeDragEnter = (emit) => (dragNode, dropNode, event) => {
   emit("node-drag-enter", dragNode, dropNode, event);
 };
@@ -155,6 +158,7 @@ export {
   getTree,
   handleToggleMenu,
   initData,
+  inputChange,
   nodeClick,
   nodeCollapse,
   nodeDragEnd,

package/tree-menu/vue.js

@@ -6,6 +6,7 @@ import {
   watchFilterText,
   nodeDragStart,
   nodeDragEnter,
+  inputChange,
   nodeDragOver,
   nodeDragEnd,
   nodeDrop,
@@ -35,6 +36,7 @@ const api = [
   "filterNode",
   "nodeDragStart",
   "nodeDragEnter",
+  "inputChange",
   "nodeDragOver",
   "nodeDragEnd",
   "nodeDrop",
@@ -86,6 +88,7 @@ const renderless = (props, { computed, watch, reactive, onMounted }, { t, servic
     nodeDragOver: nodeDragOver(emit),
     nodeDragStart: nodeDragStart(emit),
     nodeDragEnter: nodeDragEnter(emit),
+    inputChange: inputChange({ emit, state }),
     currentChange: currentChange(emit),
     watchFilterText: watchFilterText({ vm }),
     getTitle: getTitle(props),

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/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;