@opentiny/vue-renderless 3.25.0 → 3.26.0

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

@@ -2,8 +2,8 @@ import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
 const initState = (props, { reactive, ref, computed }) => {
   const hueValue = computed(() => props.color.get("hue"));
-  const thumbTop = ref(0);
-  const state = reactive({ hueValue, thumbTop });
+  const thumbLeft = ref(0);
+  const state = reactive({ hueValue, thumbLeft });
   return state;
 };
 const initDom = ({ ref }) => {
@@ -25,10 +25,10 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!bar.value) {
       return 0;
     }
-    return hue * (bar.value.offsetHeight - thumb.value.offsetHeight / 2) / 360;
+    return hue * (bar.value.offsetWidth - thumb.value.offsetWidth / 2) / 360;
   };
   const update = () => {
-    state.thumbTop = getThumbTop();
+    state.thumbLeft = getThumbTop();
   };
   const onDrag = (event) => {
     if (!bar.value || !thumb.value) {
@@ -39,12 +39,12 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
       return;
     }
     const rect = el == null ? void 0 : el.getBoundingClientRect();
-    const { clientY } = getClientXY(event);
-    let top = clientY - rect.top;
-    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-    top = Math.max(thumb.value.offsetHeight / 2, top);
-    const hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
-    state.thumbTop = top;
+    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);
   };

package/color-select-panel/index.js

@@ -114,6 +114,32 @@ const initApi = (props, state, { emit, nextTick }) => {
     onClickOutside
   };
 };
+const parseCustomRGBA = (str, type) => {
+  if (!str || typeof str !== "string") {
+    return [0, 0, 0, 0];
+  }
+  let content = "";
+  let match = null;
+  if (type === "hsl") {
+    match = str.match(/hsla?\(([^)]+)\)/);
+  } else if (type === "rgb") {
+    match = str.match(/rgba?\(([^)]+)\)/);
+  } else if (type === "hsv") {
+    match = str.match(/hsva?\(([^)]+)\)/);
+  }
+  if (!match || !match[1]) {
+    return [0, 0, 0, 0];
+  }
+  content = match[1];
+  const parts = content.split(",").map((item) => item.trim());
+  const result = parts.map((item, index) => {
+    if (index === 0 || index === parts.length - 1 && parts.length === 4) {
+      return parseFloat(item);
+    }
+    return item;
+  });
+  return result;
+};
 const initState = (props, { reactive, ref, computed }) => {
   var _a, _b;
   const stack = ref([...(_a = props.history) != null ? _a : []]);
@@ -130,6 +156,12 @@ const initState = (props, { reactive, ref, computed }) => {
     })
   );
   const input = ref("");
+  const hexInput1 = ref();
+  const hexInput2 = ref();
+  const hexInput4 = ref();
+  const hexInput5 = ref();
+  const hexInput6 = ref();
+  const hexInput7 = ref();
   const showPicker = ref(props.visible);
   const showPanel = ref(false);
   const panelColor = computed(() => {
@@ -142,6 +174,12 @@ const initState = (props, { reactive, ref, computed }) => {
   const state = reactive({
     color,
     input,
+    hexInput1,
+    hexInput2,
+    hexInput4,
+    hexInput5,
+    hexInput6,
+    hexInput7,
     showPicker,
     showPanel,
     panelColor,
@@ -195,6 +233,11 @@ const initWatch = (state, props, { nextTick, watch }, { emit }) => {
     () => state.currentColor,
     () => {
       state.input = state.currentColor;
+      const result = parseCustomRGBA(state.currentColor, state.currentFormat);
+      state.hexInput4 = Math.ceil(Number(result[0]));
+      state.hexInput5 = result[1];
+      state.hexInput6 = result[2];
+      state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
       triggerColorUpdate(state.input, emit);
     },
     { flush: "sync" }
@@ -236,6 +279,7 @@ export {
   initState,
   initWatch,
   panelRgb,
+  parseCustomRGBA,
   triggerCancel,
   triggerColorUpdate,
   triggerConfirm,

package/color-select-panel/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { initApi, initState, initWatch } from "./index";
+import { initApi, initState, initWatch, parseCustomRGBA } from "./index";
 const api = [
   "state",
   "open",
@@ -53,6 +53,11 @@ const renderless = (props, hooks, utils) => {
   hooks.onMounted(() => {
     if (props.modelValue) {
       state.input = state.currentColor;
+      const result = parseCustomRGBA(state.currentColor, state.currentFormat) || [0, 0, 0, 0];
+      state.hexInput4 = Math.ceil(Number(result[0]));
+      state.hexInput5 = result[1];
+      state.hexInput6 = result[2];
+      state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
     }
   });
   return api2;

package/dropdown/vue.js

@@ -22,9 +22,11 @@ import {
   toggleFocus
 } from "./index";
 const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
-const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
+const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig, useBreakpoint }) => {
   const api2 = {};
+  const { current } = useBreakpoint();
   const state = reactive({
+    current,
     visible: false,
     timeout: null,
     focusing: false,

package/file-upload/vue.js

@@ -144,7 +144,7 @@ const initState = ({
     chunkUploadUrl: "",
     largeFileInfo: {},
     headers: {},
-    accept: "",
+    accept: props.accept || "",
     edmToken: {},
     isSuccess: false,
     singleMaxSize: 200,

package/fluent-editor/index.js

@@ -109,7 +109,7 @@ const keyDownHandler = ({ state }) => (e) => {
     if (e.keyCode === 27 && state.isFullscreen) {
       state.isFullscreen = !state.isFullscreen;
     }
-  } else {
+  } else if (e.type === "click") {
     state.isFullscreen = !state.isFullscreen;
   }
 };

package/input/index.js

@@ -71,7 +71,8 @@ const calcTextareaHeight = ({
   }
   const { paddingSize, borderSize, boxSizing, contextStyle } = api.calculateNodeStyling(targetElement);
   hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
+  const safePlaceholder = targetElement.placeholder ? targetElement.placeholder.trim().split("\n")[0] : "";
+  hiddenTextarea.value = targetElement.value || safePlaceholder || "";
   let height = hiddenTextarea.scrollHeight;
   const textareaStyle = {};
   if (mode === "mobile") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.25.0",
+  "version": "3.26.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.25.0",
-    "@opentiny/vue-hooks": "~3.25.0",
+    "@opentiny/utils": "~3.26.0",
+    "@opentiny/vue-hooks": "~3.26.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/pager/vue.js

@@ -135,8 +135,8 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     watchShowSizes: watchShowSizes({ nextTick, vm }),
     watchInternalPageSize: watchInternalPageSize({ emit, props })
   });
-  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   state.internalPageSize = api2.getInternalPageSize();
+  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
   watch(() => state.internalPageSize, api2.watchInternalPageSize);
   watch(() => props.currentPage, api2.watchCurrentPage);

package/popeditor/index.js

@@ -106,9 +106,6 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
   if (skipBeforeClose !== true && typeof props.beforeClose === "function" && props.beforeClose("confirm") === false) {
     return;
   }
-  if (props.autoReset) {
-    handleReset({ api, state, props })();
-  }
   if (props.popseletor === constants.TYPE_GRID) {
     props.multi ? api.getMultiSelectedData({ props, state }) : api.getRadioSelectedData();
     if (!isNull(state.commitValue)) {
@@ -130,6 +127,9 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
       emit("change", commitValue, state.treeSelectList);
     }
   }
+  if (props.autoReset) {
+    handleReset({ api, state, props })();
+  }
   state.open = false;
 };
 const handleReset = ({ api, state, props }) => () => {

package/search/index.js

@@ -27,6 +27,7 @@ const searchClick = ({ emit, props, state }) => (event) => {
   event.preventDefault();
   if (props.mini && state.collapse) {
     state.collapse = false;
+    emit("expand");
   } else {
     emit("search", state.searchValue, state.currentValue);
   }
@@ -37,11 +38,14 @@ const searchEnterKey = ({ api, props, vm, nextTick }) => (event) => {
     nextTick(() => vm.$refs.input.blur());
   }
 };
-const clickOutside = ({ parent, props, state }) => (event) => {
+const clickOutside = ({ parent, props, state, emit }) => (event) => {
   const path = (event == null ? void 0 : event.composedPath) && event.composedPath();
   if (path ? !path.includes(parent.$el) : !parent.$el.contains(event.target)) {
     state.show = false;
-    props.mini && !state.currentValue && (state.collapse = true);
+    if (props.mini && !state.currentValue && !state.collapse) {
+      state.collapse = true;
+      emit("collapse");
+    }
   }
 };
 const setDefaultType = (searchTypes, typeValue) => {

package/search/vue.js

@@ -76,7 +76,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
     handleChange: handleChange({ emit, state }),
     showSelector: showSelector({ vm, state }),
     searchClick: searchClick({ emit, props, state }),
-    clickOutside: clickOutside({ parent, props, state }),
+    clickOutside: clickOutside({ parent, props, state, emit }),
     emitInput: emitInput({ emit })
   }, formatSearchTypes2.api);
   Object.assign(api2, {

package/select/vue.js

@@ -269,7 +269,11 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
       return true;
     })(),
     designConfig,
-    currentSizeMap: computed(() => api2.computedCurrentSizeMap())
+    currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
+    rootAutoTipConfig: computed(() => __spreadValues({
+      content: state.displayOnlyContent,
+      always: !!state.displayOnlyContent
+    }, props.tooltipConfig))
   }));
   return state;
 };

package/slider-button/vue.js

@@ -4,6 +4,7 @@ const api = ["state", "handleChange"];
 const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount, watch }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
     disabled: inject("disabled", null) || props.disabled,
+    displayed: inject("displayed", null) || props.displayed,
     type: inject("sliderType", null),
     value: computed({
       get: () => api2.getValue(),

package/slider-button-group/vue.js

@@ -47,6 +47,7 @@ const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watc
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
   provide("disabled", props.disabled);
+  provide("displayed", props.displayed);
   onMounted(() => {
     api2.getChangePosition(props.modelValue);
     api2.watchVisible();

package/tabs/vue.js

@@ -40,7 +40,8 @@ const initState = ({ reactive, props }) => reactive({
   direction: "",
   expandPanesWidth: "",
   activeIndex: 1,
-  separator: props.separator
+  separator: props.separator,
+  headerOnly: props.headerOnly
 });
 const initWatcher = ({
   watch,

package/tabs-mf/index.js

@@ -203,7 +203,10 @@ const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
   Object.assign(state, { moreList, moreLeft, moreRight });
 });
 const getBoundRect = (vm) => () => vm.$el.getBoundingClientRect();
-const handleClickDropdownItem = (tabs) => (name) => tabs.clickMore(name);
+const handleClickDropdownItem = (tabs) => (navItem, event) => {
+  tabs.$emit("click", navItem, event);
+  tabs.clickMore(navItem.name);
+};
 const scrollToLeft = (tabs) => () => {
   tabs.scrollTo(tabs.state.navs[0].name);
 };

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

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { IButtonGroupNode as IButtonGroupNode$1 } from '@opentiny/vue-renderless/types/button-group.type';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 

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/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/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/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/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 }),