@opentiny/vue-renderless 3.26.0 → 3.28.0

package/base-select/vue.js

@@ -57,6 +57,7 @@ import {
   watchPropsOption,
   onMouseenterNative,
   onMouseleaveNative,
+  onMouseenterSelf,
   onCopying,
   defaultOnQueryChange,
   queryChange,
@@ -100,10 +101,14 @@ import {
   updateSelectedData,
   hidePanel,
   computedShowTagText,
-  isTagClosable
+  isTagClosable,
+  computedCurrentSizeMap,
+  watchOptionsWhenAutoSelect
 } from "./index";
 import { debounce } from "@opentiny/utils";
 import { isNumber } from "@opentiny/utils";
+import { useUserAgent } from "@opentiny/vue-hooks";
+import { isServer } from "@opentiny/utils";
 const api = [
   "state",
   "toggleCheckAll",
@@ -148,6 +153,7 @@ const api = [
   "navigateOptions",
   "onMouseenterNative",
   "onMouseleaveNative",
+  "onMouseenterSelf",
   "onCopying",
   "handleDropdownClick",
   "handleEnterTag",
@@ -160,14 +166,25 @@ 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(),
     datas: [],
     initDatas: [],
     query: "",
-    magicKey: 0,
     options: [],
     visible: false,
     showCopy: computed(() => api2.computedShowCopy()),
@@ -185,7 +202,7 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     optionsAllDisabled: computed(() => api2.computedOptionsAllDisabled()),
     collapseTagSize: computed(() => api2.computedCollapseTagSize()),
     showNewOption: computed(() => api2.computedShowNewOption()),
-    selectSize: computed(() => props.size || state.formItemSize),
+    selectSize: computed(() => !isServer ? props.size || state.formItemSize : 0),
     optimizeOpts: computed(() => api2.computeOptimizeOpts()),
     optimizeStore: { valueIndex: 0, recycleScrollerHeight: computed(() => api2.recycleScrollerHeight()) },
     collapseTags: computed(() => api2.computeCollapseTags()),
@@ -202,11 +219,39 @@ 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
-    ),
-    displayOnlyContent: computed(
-      () => props.multiple && Array.isArray(state.selected) ? state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("; ") : ""
+      () => 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) {
+            return state.selected.map((item) => {
+              const find = props.options.find((opt) => opt[props.valueField] === item.value);
+              return find ? find[props.textField] : "";
+            }).join("; ");
+          } else {
+            return state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("; ");
+          }
+        } else {
+          return "";
+        }
+      } else {
+        if (state.selected) {
+          if (state.isDisplayOnly && props.options && props.options.length > 0) {
+            const find = props.options.find((opt) => opt[props.valueField] === state.selected.value);
+            return find ? find[props.textField] : "";
+          } else {
+            return ((_a = state.selected.state) == null ? void 0 : _a.currentLabel) || state.selected.currentLabel || state.selected.label || "";
+          }
+        } else {
+          return "";
+        }
+      }
+    }),
     breakpoint: useBreakpoint ? useBreakpoint().current : "",
     isSaaSTheme: vm.theme === "saas",
     disabledOptionHover: false,
@@ -220,11 +265,18 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
         return designConfig.state.autoHideDownIcon;
       }
       return true;
-    })()
+    })(),
+    designConfig,
+    currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
+    rootAutoTipConfig: computed(() => __spreadValues({
+      content: state.displayOnlyContent,
+      always: !!state.displayOnlyContent
+    }, props.tooltipConfig))
   }));
   return state;
 };
 const initStateAdd = ({ computed, props, api: api2, parent }) => {
+  const { isIOS } = useUserAgent();
   return {
     selectedTags: [],
     tips: "",
@@ -269,16 +321,20 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => {
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
     isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
     isShowTagText: computed(() => api2.computedShowTagText()),
-    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)),
     childrenName: computed(() => "children"),
     tooltipContent: {},
     isHidden: false,
     optionIndexArr: [],
+    isIOS,
     showCollapseTag: false,
     exceedMaxVisibleRow: false,
     // 是否超出默认最大显示行数
-    toHideIndex: Infinity
+    toHideIndex: Infinity,
     // 第一个超出被隐藏的索引
+    willFocusRun: false,
+    // 进入focus时，延时等一下看是否触发blur,触发则不进入focus
+    willFocusTimer: 0
   };
 };
 const initApi = ({
@@ -308,12 +364,12 @@ 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),
-    setSoftFocus: setSoftFocus({ vm, state }),
+    setSoftFocus: setSoftFocus({ vm, state, props }),
     resetInputWidth: resetInputWidth({ vm, state }),
     resetHoverIndex: resetHoverIndex({ props, state }),
     resetDatas: resetDatas({ props, state }),
@@ -332,6 +388,7 @@ const initApi = ({
     watchPropsOption: watchPropsOption({ constants, parent, props, state }),
     onMouseenterNative: onMouseenterNative({ state }),
     onMouseleaveNative: onMouseleaveNative({ state }),
+    onMouseenterSelf: onMouseenterSelf({ state }),
     onCopying: onCopying({ state, vm }),
     watchHoverIndex: watchHoverIndex({ state }),
     computeOptimizeOpts: computeOptimizeOpts({ props, designConfig }),
@@ -339,16 +396,16 @@ 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(state),
-    computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),
+    computedSelectDisabled: computedSelectDisabled({ state }),
     computedIsExpand: computedIsExpand({ props, state }),
     watchInitValue: watchInitValue({ props, emit }),
     watchShowClose: watchShowClose({ nextTick, state, parent }),
@@ -360,7 +417,9 @@ const initApi = ({
     computedShowTagText: computedShowTagText({ state }),
     isTagClosable: isTagClosable(),
     updateSelectedData: updateSelectedData({ state }),
-    hidePanel: hidePanel({ state })
+    hidePanel: hidePanel({ state }),
+    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig }),
+    watchOptionsWhenAutoSelect: watchOptionsWhenAutoSelect({ state, props, nextTick, api: api2 })
   });
   addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };
@@ -485,6 +544,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);
   watch(() => state.hoverIndex, api2.watchHoverIndex);
   props.options && watch(() => props.options, api2.watchPropsOption, { immediate: true, deep: true });
   props.optimization && watch(() => state.optimizeOpts, api2.watchOptimizeOpts, { immediate: true });
@@ -505,6 +566,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     emitter,
     parent,
     constants,
+    isMobileFirstMode,
     useBreakpoint,
     vm,
     designConfig

package/calendar-view/index.js

@@ -426,15 +426,18 @@ const toToday = ({ state, api, nextTick }) => () => {
     });
   }
 };
-const currentDateChange = ({ state, api }) => (date) => {
+const currentDateChange = ({ state, api, nextTick }) => (date) => {
   const currentDate = new Date(date);
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth() + 1;
+  const day = currentDate.getDate();
   state.activeMonth = month;
   state.activeYear = year;
+  state.currentDate = `${year}-${month}-${day}`;
   if (state.mode !== "month") {
-    api.getAllWednesdaysInMonth(currentDate);
-    api.getAllDatesOfCurrWeek(state.monthWednesdays[0]);
+    nextTick(() => {
+      api.initWeeklyCalendar(currentDate);
+    });
   }
 };
 const getAllWednesdaysInYear = ({ state }) => (year) => {

package/calendar-view/vue.js

@@ -123,11 +123,12 @@ const initState = ({ reactive, props, computed, api: api2, images, modesIcon })
     multiSelect: computed(() => props.multiSelect),
     cascaderVisible: false,
     eventTipContent: {},
-    activeYear: props.year,
+    activeYear: props.year || (/* @__PURE__ */ new Date()).getFullYear(),
     displayMode: props.mode,
-    activeMonth: props.month,
-    currentDate: props.year + "-" + props.month,
-    cascaderCurrent: [props.year || (/* @__PURE__ */ new Date()).getFullYear(), props.month || (/* @__PURE__ */ new Date()).getMonth + 1],
+    activeMonth: props.month || (/* @__PURE__ */ new Date()).getMonth() + 1,
+    dateType: computed(() => !props.day ? "month" : "date"),
+    currentDate: props.year && props.month && props.day ? `${props.year}-${props.month}-${props.day}` : props.year && props.month ? `${props.year}-${props.month}` : `${(/* @__PURE__ */ new Date()).getFullYear()}-${(/* @__PURE__ */ new Date()).getMonth() + 1}-${(/* @__PURE__ */ new Date()).getDate()}`,
+    cascaderCurrent: [props.year || (/* @__PURE__ */ new Date()).getFullYear(), props.month || (/* @__PURE__ */ new Date()).getMonth() + 1],
     cascaderOptions: computed(() => api2.computeCascaderOptions()),
     calendar: computed(() => api2.computedCalendar("cur")),
     prevCalendar: computed(() => api2.computedCalendar("prev")),
@@ -153,6 +154,9 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
     () => state.mode,
     (val) => {
       emit("mode-change", val);
+      if (val !== "month") {
+        api2.getAllDatesOfCurrWeek(state.currentDate);
+      }
       if (val === "schedule") {
         api2.getCurWeekEvent();
       }
@@ -266,7 +270,7 @@ const initApi = ({ vm, api: api2, state, t, props, emit, nextTick }) => {
     initWeeklyCalendar: initWeeklyCalendar({ api: api2, state }),
     getDatesOfPreviousWeek: getDatesOfPreviousWeek({ api: api2, state }),
     getDatesOfNextWeek: getDatesOfNextWeek({ api: api2, state }),
-    currentDateChange: currentDateChange({ api: api2, state }),
+    currentDateChange: currentDateChange({ api: api2, state, nextTick }),
     newSchedule: newSchedule({ emit }),
     getPrevWeek: throttle(50, true, getPrevWeek({ api: api2, state, emit })),
     getNextWeek: throttle(50, true, getNextWeek({ api: api2, state, emit })),

package/color-picker/vue.js

@@ -50,6 +50,10 @@ const renderless = (props, ctx, { emit }) => {
   ctx.watch(
     () => props.modelValue,
     () => {
+      if (props.colorMode === "linear-gradient") {
+        state.hex = props.modelValue;
+        return;
+      }
       color.fromString(props.modelValue);
       const { r, g, b, a } = color.toRgba();
       state.hex = `rgba(${r}, ${g}, ${b}, ${a})`;

package/color-select-panel/alpha-select/index.js

@@ -1,12 +1,15 @@
 import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
-const initState = ({ ref, reactive }) => {
-  const background = ref("");
+import { useContext } from "../utils/context";
+const initState = (hooks) => {
+  const { ref, reactive } = hooks;
+  const ctx = useContext(hooks);
+  const background = ref(ctx.activeColor.value.color.value);
   const left = ref(0);
-  const state = reactive({ background, left });
+  const state = reactive({ background, left, activeColor: ctx.activeColor });
   return state;
 };
-const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
+const useEvent = (state, slider, alphaWrapper, alphaThumb, props, ctx) => {
   const onDrag = (event) => {
     if (!slider.value || !alphaThumb.value) {
       return;
@@ -20,7 +23,7 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
     const alpha = Math.round(
       (left - alphaThumb.value.offsetWidth / 2) / (rect.width - alphaThumb.value.offsetWidth) * 100
     );
-    props.color.set("alpha", alpha);
+    ctx.activeColor.value.color.set("alpha", alpha);
   };
   const onClick = (event) => {
     if (event.target !== alphaThumb.value) {
@@ -36,12 +39,12 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
     if (!el) {
       return 0;
     }
-    const alpha = props.color.get("alpha");
+    const alpha = ctx.activeColor.value.color.get("alpha");
     return alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100;
   };
   const getBackground = () => {
-    if (props.color && props.color.value) {
-      const { r, g, b } = props.color.toRgb();
+    if (ctx.activeColor && ctx.activeColor.value) {
+      const { r, g, b } = ctx.activeColor.value.color.toRgb();
       return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
     }
     return "";
@@ -52,14 +55,16 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
   };
   return { onDrag, onClick, update };
 };
-const initWatch = (props, update, { watch }) => {
+const initWatch = (props, update, { watch }, ctx) => {
   watch(
-    () => props.color.get("alpha"),
-    () => update(),
+    () => ctx.activeColor.value.color,
+    () => {
+      update();
+    },
     { deep: true }
   );
   watch(
-    () => props.color,
+    () => ctx.activeColor,
     () => update(),
     { deep: true }
   );

package/color-select-panel/alpha-select/vue.js

@@ -1,6 +1,7 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
 import { initState, initWatch, useEvent } from ".";
+import { useContext } from "../utils/context";
 const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb", "onClick"];
 const renderless = (props, hooks, utils) => {
   const { onMounted, ref } = hooks;
@@ -8,8 +9,9 @@ const renderless = (props, hooks, utils) => {
   const slider = ref();
   const alphaWrapper = ref();
   const alphaThumb = ref();
+  const ctx = useContext(hooks);
   const state = initState(hooks);
-  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props);
+  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props, ctx);
   onMounted(() => {
     if (!slider.value || !alphaThumb.value) {
       return;
@@ -27,7 +29,7 @@ const renderless = (props, hooks, utils) => {
     update();
     emit("ready", update);
   });
-  initWatch(props, update, hooks);
+  initWatch(props, update, hooks, ctx);
   const api2 = {
     state,
     slider,

package/color-select-panel/hue-select/index.js

@@ -1,9 +1,28 @@
 import "../../chunk-G2ADBYYC.js";
+import { Color } from "../utils/color";
 import { getClientXY } from "../utils/getClientXY";
-const initState = (props, { reactive, ref, computed }) => {
+import { useContext } from "../utils/context";
+import { ColorPoint } from "../utils/color-points";
+const useOnClickBar = ({ addPoint, setActivePoint, getActviePoint }, { bar }, getLeft) => {
+  return (event) => {
+    const activePoint = getActviePoint().value;
+    const color = new Color({
+      enableAlpha: activePoint.color.enableAlpha,
+      format: activePoint.color.format,
+      value: activePoint.color.value
+    });
+    const left = getLeft(bar.value, event);
+    const colorPoint = new ColorPoint(color, left);
+    addPoint(colorPoint);
+    setActivePoint(colorPoint);
+  };
+};
+const initState = (props, hooks) => {
+  const { reactive, ref, computed } = hooks;
+  const ctx = useContext(hooks);
   const hueValue = computed(() => props.color.get("hue"));
   const thumbLeft = ref(0);
-  const state = reactive({ hueValue, thumbLeft });
+  const state = reactive({ hueValue, thumbLeft, ctx });
   return state;
 };
 const initDom = ({ ref }) => {
@@ -13,7 +32,7 @@ const initDom = ({ ref }) => {
     wrapper: ref()
   };
 };
-const useEvent = ({ thumb, bar }, state, props, { emit }) => {
+const useEvent = ({ thumb, bar }, state, props, { emit }, ctx) => {
   const onSvReady = (update2) => {
     emit("svReady", update2);
   };
@@ -21,7 +40,7 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!thumb.value) {
       return 0;
     }
-    const hue = props.color.get("hue");
+    const hue = ctx.activeColor.value.color.get("hue");
     if (!bar.value) {
       return 0;
     }
@@ -29,6 +48,20 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
   };
   const update = () => {
     state.thumbLeft = getThumbTop();
+    if (ctx.colorMode.value !== "linear-gradient") {
+      ctx.activeColor.value.cursorLeft = state.thumbLeft;
+    }
+  };
+  const getLeft = (barEl, event) => {
+    if (!thumb.value) {
+      return 0;
+    }
+    const rect = barEl == null ? void 0 : barEl.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    let left = clientX - rect.left;
+    left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+    left = Math.max(thumb.value.offsetWidth / 2, left);
+    return left;
   };
   const onDrag = (event) => {
     if (!bar.value || !thumb.value) {
@@ -38,20 +71,18 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!el) {
       return;
     }
+    const left = getLeft(el, event);
     const rect = el == null ? void 0 : el.getBoundingClientRect();
-    const { clientX } = getClientXY(event);
-    let left = clientX - rect.left;
-    left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-    left = Math.max(thumb.value.offsetWidth / 2, left);
     const hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
     state.thumbLeft = left;
     emit("hueUpdate", hue);
-    props.color.set("hue", hue);
+    ctx.activeColor.value.color.set("hue", hue);
   };
-  return { update, onDrag, onSvReady };
+  return { update, onDrag, onSvReady, getLeft, getThumbTop };
 };
 export {
   initDom,
   initState,
-  useEvent
+  useEvent,
+  useOnClickBar
 };

package/color-select-panel/hue-select/vue.js

@@ -1,19 +1,38 @@
-import "../../chunk-G2ADBYYC.js";
+import {
+  __objRest,
+  __spreadValues
+} from "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
-import { initDom, initState, useEvent } from ".";
-const api = ["state", "onSvReady", "bar", "thumb", "wrapper"];
+import { initDom, initState, useEvent, useOnClickBar } from ".";
+import { useContext } from "../utils/context";
+import { useColorPoints } from "../utils/color-points";
+const api = ["state", "onSvReady", "bar", "thumb", "wrapper", "onClickBar"];
 const renderless = (props, hooks, utils) => {
-  const { onMounted } = hooks;
+  const { onMounted, watch } = hooks;
   const { emit } = utils;
   const { thumb, bar, wrapper } = initDom(hooks);
   const state = initState(props, hooks);
-  const { onSvReady, onDrag, update } = useEvent({ thumb, bar, wrapper }, state, props, utils);
+  const ctx = useContext(hooks);
+  const { onSvReady, onDrag, update, getLeft, getThumbTop } = useEvent(
+    { thumb, bar, wrapper },
+    state,
+    props,
+    utils,
+    ctx
+  );
+  const _a = useColorPoints(
+    { wrapper: bar, points: [ctx.activeColor.value] },
+    hooks,
+    ctx
+  ), { addPoint, setActivePoint } = _a, rest = __objRest(_a, ["addPoint", "setActivePoint"]);
+  const onClickBar = useOnClickBar(__spreadValues({ addPoint, setActivePoint }, rest), { bar, thumb, wrapper }, getLeft);
   const api2 = {
     state,
     onSvReady,
     bar,
     thumb,
-    wrapper
+    wrapper,
+    onClickBar
   };
   onMounted(() => {
     if (!bar.value || !thumb.value) {
@@ -32,6 +51,13 @@ const renderless = (props, hooks, utils) => {
     emit("hueReady", update);
     update();
   });
+  watch(
+    () => ctx.activeColor.value.color,
+    () => {
+      state.thumbLeft = getThumbTop();
+    },
+    { immediate: true, deep: true }
+  );
   return api2;
 };
 export {