@opentiny/vue-renderless 3.26.0 → 3.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.26.0",
+  "version": "3.28.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.26.0",
-    "@opentiny/vue-hooks": "~3.26.0",
+    "@opentiny/utils": "~3.28.0",
+    "@opentiny/vue-hooks": "~3.28.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/picker/index.js

@@ -2,7 +2,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { toDate1, getDateWithNewTimezone, getStrTimezone, getLocalTimezone } from "@opentiny/utils";
+import { toDate1, getDateWithNewTimezone, getStrTimezone, getLocalTimezone, parseIso8601 } from "@opentiny/utils";
 import { isNumber, isDate } from "@opentiny/utils";
 import { userPopper } from "@opentiny/vue-hooks";
 import { DATEPICKER } from "@opentiny/utils";
@@ -127,6 +127,24 @@ const parseAsFormatAndType = ({ api }) => (value, customFormat, type, rangeSepar
   const format = customFormat || DATEPICKER.DateFormats[type];
   return parser(value, format, rangeSeparator);
 };
+const ignoreTimezone = (value) => {
+  let res = value;
+  const ignoreTimezoneFn = (value2) => {
+    let date = value2;
+    const iso8601 = parseIso8601(value2);
+    if (iso8601) {
+      const { year, month, day, hours, minutes, seconds } = iso8601;
+      date = new Date(year, month, day, hours, minutes, seconds);
+    }
+    return date;
+  };
+  if (Array.isArray(res)) {
+    res = res.map((item) => ignoreTimezoneFn(item));
+  } else {
+    res = ignoreTimezoneFn(res);
+  }
+  return res;
+};
 const parsedValue = ({ api, props, state, t }) => () => {
   if (!props.modelValue) {
     return props.modelValue;
@@ -139,17 +157,16 @@ const parsedValue = ({ api, props, state, t }) => () => {
   if (valueIsDateObject && !isServiceTimezone) {
     return props.modelValue;
   }
+  let value = ignoreTimezone(props.modelValue);
   if (state.valueFormat) {
-    let date = props.modelValue;
-    if (isServiceTimezone) {
-      if (Array.isArray(date)) {
-        date = [].concat(date).map((item) => {
-          return isDate(item) ? formatDate(item, state.valueFormat, t) : item;
-        });
-      } else {
-        if (state.valueFormat !== DATEPICKER.TimesTamp) {
-          date = formatDate(date, state.valueFormat, t);
-        }
+    let date = value;
+    if (Array.isArray(date)) {
+      date = [].concat(date).map((item) => {
+        return isDate(item) ? formatDate(item, state.valueFormat, t) : item;
+      });
+    } else {
+      if (state.valueFormat !== DATEPICKER.TimesTamp && isDate(date)) {
+        date = formatDate(date, state.valueFormat, t);
       }
     }
     const result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
@@ -158,7 +175,7 @@ const parsedValue = ({ api, props, state, t }) => () => {
     }
     return getDateWithNewTimezone(result || props.modelValue, from, to, timezoneOffset);
   }
-  const trans = (value) => typeof value === "string" || isNumber(value) ? toDate1(value) : value;
+  const trans = (value2) => typeof value2 === "string" || isNumber(value2) ? toDate1(value2) : value2;
   const values = [].concat(props.modelValue).map((val) => getDateWithNewTimezone(trans(val), from, to, timezoneOffset));
   return values.length > 1 ? values : values[0];
 };
@@ -1019,7 +1036,7 @@ const emitDbTime = ({ emit, state, t }) => (date) => {
       if (isDate(item)) {
         hasDate = true;
         let currentDate = getDateWithNewTimezone(item, getLocalTimezone(), from);
-        if (state.valueFormat) {
+        if (state.valueFormat && state.valueFormat !== DATEPICKER.TimesTamp) {
           currentDate = formatDate(currentDate, state.valueFormat, t);
         }
         return currentDate;

package/picker/vue.js

@@ -150,6 +150,10 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     ),
     showSeconds: computed(
       () => (state.format || props.pickerOptions && props.pickerOptions.format || "ss").includes("ss")
+    ),
+    innerWidth: 0,
+    breakLine: computed(
+      () => (state.innerWidth < 230 && state.type === "daterange" || state.innerWidth < 335 && state.type === "datetimerange") && state.displayValue && state.displayValue[1]
     )
   });
   return state;
@@ -271,8 +275,13 @@ const renderless = (props, hooks, vnode, others) => {
   initApi({ api: api2, props, hooks, state, vnode, others, utils, parent, isPCMode });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
+  const resizeHandler = () => {
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+  };
   onMounted(() => {
     api2.setInputPaddingLeft();
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+    window.addEventListener("resize", resizeHandler);
   });
   parent.$on("handle-clear", (event) => {
     state.showClose = true;
@@ -280,6 +289,7 @@ const renderless = (props, hooks, vnode, others) => {
   });
   onBeforeUnmount(() => {
     api2.destroyPopper("remove");
+    window.removeEventListener("resize", resizeHandler);
     state.popperElm = null;
     state.picker = null;
   });

package/popover/index.js

@@ -123,7 +123,7 @@ const handleDocumentClick = ({ vm, state }) => (event) => {
   const popperElm = state.popperElm;
   const $el = vm.$refs.root;
   let target = event.target;
-  if ((target == null ? void 0 : target.shadowRoot) && popperElm) {
+  if ((target == null ? void 0 : target.shadowRoot) && target.shadowRoot.contains($el) && popperElm) {
     target = state.webCompEventTarget;
   }
   if (!$el || !reference || $el.contains(target) || reference.contains(target) || !popperElm || popperElm.contains(target)) {

package/rich-text/index.js

@@ -4,6 +4,21 @@ import { xss } from "@opentiny/utils";
 import { getToolbarTips, defaultOptions } from "./options";
 import registerTableModule from "./table-module";
 import registerCustomClipboard from "./clipboard";
+const registerCustomSize = (Quill, sizeConfig) => {
+  if (!sizeConfig || !Array.isArray(sizeConfig)) {
+    return;
+  }
+  const hasPixelValues = sizeConfig.some((item) => {
+    return item && typeof item === "string" && item.includes("px");
+  });
+  if (!hasPixelValues) {
+    return;
+  }
+  const SizeStyle = Quill.import("attributors/style/size");
+  const whitelist = sizeConfig.filter((item) => item !== false);
+  SizeStyle.whitelist = whitelist;
+  Quill.register("formats/size", SizeStyle, true);
+};
 const initContent = ({ state, props, nextTick }) => () => {
   if (state.quill) {
     const flag = state.quill.selection.hasFocus();
@@ -24,7 +39,34 @@ const initContent = ({ state, props, nextTick }) => () => {
   }
 };
 const initQuill = ({ api, emit, props, vm, service, state, Quill, ImageDrop, ImageUpload, FileUpload }) => () => {
+  var _a, _b;
   state.innerOptions = extend(true, {}, defaultOptions, props.globalOptions, props.options);
+  const toolbarConfig = ((_b = (_a = state.innerOptions.modules) == null ? void 0 : _a.toolbar) == null ? void 0 : _b.container) || [];
+  const findSizeConfig = (config) => {
+    if (!config)
+      return null;
+    if (Array.isArray(config)) {
+      for (let i = 0; i < config.length; i++) {
+        const result = findSizeConfig(config[i]);
+        if (result)
+          return result;
+      }
+    } else if (typeof config === "object" && config !== null) {
+      if (config.size && Array.isArray(config.size)) {
+        return config.size;
+      }
+      for (const key in config) {
+        const result = findSizeConfig(config[key]);
+        if (result)
+          return result;
+      }
+    }
+    return null;
+  };
+  const sizeConfig = findSizeConfig(toolbarConfig);
+  if (sizeConfig) {
+    registerCustomSize(Quill, sizeConfig);
+  }
   if (document.caretRangeFromPoint) {
     if (props.imageDrop) {
       Quill.register("modules/imageDrop", ImageDrop, true);

package/select/index.js

@@ -53,13 +53,13 @@ const showTip = ({ props, state, vm }) => (show) => {
     state.showTip = show && overflow && !!state.tips && !state.visible;
   }
 };
-const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
+const gridOnQueryChange = ({ props, vm, constants, state }) => async (value) => {
   const { multiple, valueField, filterMethod, remote, remoteMethod } = props;
   if ((props.filterable || props.searchable) && typeof filterMethod === "function") {
     const table = vm.$refs.selectGrid.$refs.tinyTable;
     const fullData = table.getTableData().fullData;
     vm.$refs.selectGrid.scrollTo(null, 0);
-    table.loadTableData(filterMethod(value, fullData) || []);
+    await table.loadData(filterMethod(value, fullData) || []);
     vm.$refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
     state.previousQuery = value;
   } else if (remote && typeof remoteMethod === "function") {
@@ -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) {
@@ -273,7 +289,8 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     rootAutoTipConfig: computed(() => __spreadValues({
       content: state.displayOnlyContent,
       always: !!state.displayOnlyContent
-    }, props.tooltipConfig))
+    }, props.tooltipConfig)),
+    ariaListId: "tiny-select-" + crypto.randomUUID().slice(-8)
   }));
   return state;
 };
@@ -372,8 +389,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 +431,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 +452,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 +589,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 +617,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     emitter,
     parent,
     constants,
+    isMobileFirstMode,
     useBreakpoint,
     vm,
     designConfig

package/select-dropdown/vue.js

@@ -74,12 +74,17 @@ const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm,
     mounted: mounted({ selectEmitter, constants, state, selectVm, updatePopper, destroyPopper, parent })
   });
 };
-const initWatch = ({ watch, selectVm, state, nextTick }) => {
+const initWatch = ({ watch, selectVm, state, nextTick, props }) => {
   watch(
     () => !isServer ? selectVm.state.inputWidth : void 0,
     (val) => {
       nextTick(() => {
         state.minWidth = (selectVm && selectVm.$el && selectVm.$el.getBoundingClientRect().width || val) + "px";
+        if (props.isDropInheritWidth) {
+          setTimeout(() => {
+            state.minWidth = (selectVm && selectVm.$el && selectVm.$el.getBoundingClientRect().width || val) + "px";
+          }, 210);
+        }
       });
     },
     { immediate: true }
@@ -129,9 +134,9 @@ const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted
     toRefs,
     watch
   });
-  const state = initState({ reactive, computed, popper, props, selectVm });
+  const state = initState({ reactive, computed, popper, selectVm });
   initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent, nextTick, props, isMobileFirstMode });
-  initWatch({ watch, selectVm, state, nextTick, api: api2 });
+  initWatch({ watch, selectVm, state, nextTick, props });
   onBeforeUnmount(() => {
     popper.destroyPopper("remove");
     state.popperElm = null;

package/select-wrapper/vue.js

@@ -0,0 +1,134 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+const api = [
+  "state",
+  "resolvedComponent",
+  "mergedProps",
+  "listeners",
+  "slotNames",
+  "hasScopedDefault",
+  "focus",
+  "blur"
+];
+const renderless = (props, { reactive, computed, useAttrs }, { constants, vm, components }) => {
+  const api2 = {};
+  const resolvedComponent = computed(() => computedResolvedComponent({ props, constants, vm, components }));
+  const mergedProps = computed(() => {
+    const runtimeAttrs = typeof useAttrs === "function" ? useAttrs() : null;
+    const attrs = runtimeAttrs || vm.$attrs || {};
+    const className = attrs.class;
+    const classArray = Array.isArray(className) ? ["tiny-select", ...className] : className ? ["tiny-select", className] : ["tiny-select"];
+    const _a = attrs, { class: _omitClass } = _a, restAttrs = __objRest(_a, ["class"]);
+    return __spreadProps(__spreadValues(__spreadValues({}, props), restAttrs), {
+      class: Array.from(new Set(classArray)),
+      dataTag: "tiny-select"
+    });
+  });
+  const slotNames = computed(() => Object.keys(vm.$slots || {}).filter((name) => name && name !== "default"));
+  const hasScopedDefault = computed(() => {
+    var _a, _b;
+    const scoped = (_a = vm.$scopedSlots) == null ? void 0 : _a.default;
+    if (scoped && scoped.length) {
+      return true;
+    }
+    const slot = (_b = vm.$slots) == null ? void 0 : _b.default;
+    return typeof slot === "function" && slot.length > 0;
+  });
+  const listeners = computed(() => {
+    if (vm.$listeners) {
+      return vm.$listeners;
+    }
+    return {};
+  });
+  const getChildComponent = () => {
+    var _a;
+    return (_a = vm.$refs) == null ? void 0 : _a.childComponent;
+  };
+  const state = new Proxy(
+    {},
+    {
+      get(target, prop) {
+        var _a;
+        const child = getChildComponent();
+        return (_a = child == null ? void 0 : child.state) == null ? void 0 : _a[prop];
+      },
+      set(target, prop, value) {
+        const child = getChildComponent();
+        if (child == null ? void 0 : child.state) {
+          child.state[prop] = value;
+          return true;
+        }
+        return false;
+      },
+      has(target, prop) {
+        const child = getChildComponent();
+        return prop in ((child == null ? void 0 : child.state) || {});
+      },
+      ownKeys(target) {
+        const child = getChildComponent();
+        return Object.keys((child == null ? void 0 : child.state) || {});
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        const child = getChildComponent();
+        const childState = (child == null ? void 0 : child.state) || {};
+        if (prop in childState) {
+          return {
+            enumerable: true,
+            configurable: true,
+            value: childState[prop]
+          };
+        }
+        return void 0;
+      }
+    }
+  );
+  const focus = () => {
+    const child = getChildComponent();
+    child && typeof child.focus === "function" && child.focus();
+  };
+  const blur = () => {
+    const child = getChildComponent();
+    child && typeof child.blur === "function" && child.blur();
+  };
+  const hasData = (value) => {
+    if (!value) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (typeof value === "object") {
+      return Object.keys(value).length > 0;
+    }
+    return true;
+  };
+  const computedResolvedComponent = ({ props: props2, constants: constants2, vm: vm2, components: components2 }) => {
+    var _a;
+    const comps = components2 || ((_a = vm2.$options) == null ? void 0 : _a.components) || {};
+    if (props2.renderType === constants2.TYPE.Tree || hasData(props2.treeOp)) {
+      return comps.TinyTreeSelect || "TinyTreeSelect";
+    }
+    if (props2.renderType === constants2.TYPE.Grid || hasData(props2.gridOp)) {
+      return comps.TinyGridSelect || "TinyGridSelect";
+    }
+    return comps.TinyBaseSelect || "TinyBaseSelect";
+  };
+  Object.assign(api2, {
+    state,
+    resolvedComponent,
+    mergedProps,
+    listeners,
+    slotNames,
+    hasScopedDefault,
+    focus,
+    blur
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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
+};