@opentiny/vue-renderless 3.21.0 → 3.21.2

package/common/deps/popper.js

@@ -53,6 +53,9 @@ const isFixed = (el) => {
   if (getStyleComputedProperty(el, "position") === "fixed") {
     return true;
   }
+  if (el.host) {
+    el = el.host;
+  }
   return el.parentNode ? isFixed(el.parentNode) : false;
 };
 const getBoundingClientRect = (el) => {

package/common/deps/vue-popper.js

@@ -22,6 +22,9 @@ const getReferMaxZIndex = (reference) => {
   let z;
   do {
     reference = reference.parentNode;
+    if (reference && reference instanceof ShadowRoot && reference.host) {
+      reference = reference.host;
+    }
     if (reference) {
       z = getZIndex(reference);
     } else {

package/common/index.js

@@ -237,7 +237,7 @@ const CASCADER = {
   PropsHover: "hoverThreshold",
   MenuConnector: "cascader-menu-"
 };
-const version = "3.21.0";
+const version = "3.21.2";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

package/common/runtime.js

@@ -22,7 +22,7 @@ import vuePopup from "./deps/vue-popup";
 import validate from "./validate";
 import memorize from "./deps/memorize";
 import * as common from ".";
-const version = "3.21.0";
+const version = "3.21.2";
 const Renderless = {
   browser,
   array,

package/dropdown/index.js

@@ -11,19 +11,23 @@ const watchFocusing = (parent) => (value) => {
     value ? addClass(selfDefine, "focusing") : removeClass(selfDefine, "focusing");
   }
 };
-const show = ({ props, state }) => () => {
+const show = ({ props, state, emit }) => () => {
   if (props.disabled) {
     return;
   }
-  clearTimeout(Number(state.timeout));
-  state.timeout = setTimeout(
-    () => {
-      state.visible = true;
-    },
-    state.trigger === "click" ? 0 : props.showTimeout
-  );
+  if (state.visibleIsBoolean) {
+    emit("update:visible", true);
+  } else {
+    clearTimeout(Number(state.timeout));
+    state.timeout = setTimeout(
+      () => {
+        state.visible = true;
+      },
+      state.trigger === "click" ? 0 : props.showTimeout
+    );
+  }
 };
-const hide = ({ api, props, state }) => () => {
+const hide = ({ api, props, state, emit }) => () => {
   if (props.disabled) {
     return;
   }
@@ -31,20 +35,28 @@ const hide = ({ api, props, state }) => () => {
   if (props.tabindex >= 0 && state.triggerElm) {
     api.resetTabindex(state.triggerElm);
   }
-  clearTimeout(Number(state.timeout));
-  state.timeout = setTimeout(
-    () => {
-      state.visible = false;
-    },
-    state.trigger === "click" ? 0 : props.hideTimeout
-  );
+  if (state.visibleIsBoolean) {
+    emit("update:visible", false);
+  } else {
+    clearTimeout(Number(state.timeout));
+    state.timeout = setTimeout(
+      () => {
+        state.visible = false;
+      },
+      state.trigger === "click" ? 0 : props.hideTimeout
+    );
+  }
 };
 const handleClick = ({ api, props, state, emit }) => () => {
   if (props.disabled) {
     return;
   }
-  emit("handle-click", state.visible);
-  state.visible ? api.hide() : api.show();
+  if (state.visibleIsBoolean) {
+    emit("handle-click", props.visible);
+  } else {
+    emit("handle-click", state.visible);
+    state.visible ? api.hide() : api.show();
+  }
 };
 const handleTriggerKeyDown = ({ api, state }) => (event) => {
   const keyCode = event.keyCode;
@@ -62,7 +74,7 @@ const handleTriggerKeyDown = ({ api, state }) => (event) => {
     api.hide();
   }
 };
-const handleItemKeyDown = ({ api, props, state }) => (event) => {
+const handleItemKeyDown = ({ api, props, state, emit }) => (event) => {
   const keyCode = event.keyCode;
   const target = event.target;
   const currentIndex = state.menuItemsArray.indexOf(target);
@@ -128,6 +140,9 @@ const initEvent = ({ api, props, state, vm, mode }) => () => {
     on(state.triggerElm, "blur", api.toggleFocusOnFalse);
     on(state.triggerElm, "click", api.toggleFocusOnFalse);
   }
+  if (state.visibleIsBoolean) {
+    return;
+  }
   if (state.trigger === "hover") {
     on(state.triggerElm, "mouseenter", api.show);
     on(state.triggerElm, "mouseleave", api.hide);
@@ -176,7 +191,9 @@ const mounted = ({ api, vm, state, broadcast }) => () => {
   vm.$on("selected-index", (selectedIndex) => {
     broadcast("TinyDropdownMenu", "menu-selected-index", selectedIndex);
   });
-  vm.$on("is-disabled", api.clickOutside);
+  if (!state.visibleIsBoolean) {
+    vm.$on("is-disabled", api.clickOutside);
+  }
 };
 const beforeDistory = ({ vm, api, state }) => () => {
   if (state.triggerElm) {

package/dropdown/vue.js

@@ -39,19 +39,20 @@ const renderless = (props, { reactive, watch, provide, onMounted, computed, onBe
     trigger: computed(() => {
       var _a;
       return props.trigger || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.trigger) || "hover";
-    })
+    }),
+    visibleIsBoolean: computed(() => typeof props.visible === "boolean")
   });
   provide("dropdownVm", vm);
   Object.assign(api2, {
     state,
     watchVisible: watchVisible({ broadcast, emit, nextTick }),
     watchFocusing: watchFocusing(parent),
-    show: show({ props, state }),
-    hide: hide({ api: api2, props, state }),
+    show: show({ props, state, emit }),
+    hide: hide({ api: api2, props, state, emit }),
     mounted: mounted({ api: api2, vm, state, broadcast }),
     handleClick: handleClick({ api: api2, props, state, emit }),
     handleTriggerKeyDown: handleTriggerKeyDown({ api: api2, state }),
-    handleItemKeyDown: handleItemKeyDown({ api: api2, props, state }),
+    handleItemKeyDown: handleItemKeyDown({ api: api2, props, state, emit }),
     resetTabindex: resetTabindex(api2),
     removeTabindex: removeTabindex(state),
     initAria: initAria({ state, props }),
@@ -65,7 +66,11 @@ const renderless = (props, { reactive, watch, provide, onMounted, computed, onBe
     toggleFocusOnTrue: toggleFocus({ state, value: true }),
     toggleFocusOnFalse: toggleFocus({ state, value: false })
   });
-  watch(() => state.visible, api2.watchVisible);
+  if (typeof props.visible === "boolean") {
+    watch(() => props.visible, api2.watchVisible);
+  } else {
+    watch(() => state.visible, api2.watchVisible);
+  }
   watch(() => state.focusing, api2.watchFocusing);
   onMounted(api2.mounted);
   onBeforeUnmount(api2.beforeDistory);

package/grid/utils/dom.js

@@ -119,9 +119,12 @@ const colToVisible = ($table, column, move) => {
   });
 };
 const hasDataTag = (el, value) => {
-  if (!el || !value || !el.getAttribute) {
+  if (!el || !value) {
     return false;
   }
+  if (el.host) {
+    el = el.host;
+  }
   return (" " + el.getAttribute("data-tag") + " ").includes(" " + value + " ");
 };
 const getEventTargetNode = (event, container, queryCls) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.21.0",
+  "version": "3.21.2",
   "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": {
-    "color": "4.2.3",
-    "@opentiny/utils": "^1.0.0"
+    "@opentiny/utils": "^1.0.0",
+    "color": "4.2.3"
   },
   "devDependencies": {
     "esno": "^4.7.0",

package/types/dropdown.type.d.ts

@@ -3,6 +3,10 @@ import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './
 
 declare const dropdownProps: {
     modelValue: (StringConstructor | NumberConstructor)[];
+    visible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     type: StringConstructor;
     trigger: StringConstructor;
     size: {
@@ -97,7 +101,7 @@ interface IDropdownState {
     visible: boolean;
     timeout: null | NodeJS.Timeout;
     focusing: false;
-    menuItems: NodeListOf<HTMLElement> | undefined | null;
+    menuItems: NodeListOf<HTMLElement> | undefined | null | [];
     menuItemsArray: HTMLElement[] | null;
     triggerElm: HTMLElement | null;
     dropdownElm: HTMLElement | null;
@@ -105,6 +109,8 @@ interface IDropdownState {
     showIcon: boolean;
     showSelfIcon: boolean;
     designConfig: IDropdownRenderlessParamUtils['designConfig'];
+    trigger: 'click' | 'hover';
+    visibleIsBoolean: boolean;
 }
 interface IDropdownApi {
     state: IDropdownState;