@varlet/ui 1.27.12 → 1.27.13

package/es/back-top/BackTop.js

@@ -9,7 +9,7 @@ var {
   n,
   classes
 } = createNamespace('back-top');
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, mergeProps as _mergeProps, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -18,17 +18,18 @@ export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_Teleport, {
     to: "body",
     disabled: _ctx.disabled
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')])),
+  }, [_createElementVNode("div", _mergeProps({
+    class: _ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')]),
     ref: "backTopEl",
-    style: _normalizeStyle({
+    style: {
       right: _ctx.toSizeUnit(_ctx.right),
       bottom: _ctx.toSizeUnit(_ctx.bottom)
-    }),
+    }
+  }, _ctx.$attrs, {
     onClick: _cache[0] || (_cache[0] = _withModifiers(function () {
       return _ctx.click && _ctx.click(...arguments);
     }, ["stop"]))
-  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
+  }), [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
     type: "primary",
     round: "",
     "var-back-top-cover": ""
@@ -39,8 +40,8 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 6
-  /* CLASS, STYLE */
+  })])], 16
+  /* FULL_PROPS */
   )], 8
   /* PROPS */
   , ["disabled"]);
@@ -52,6 +53,7 @@ export default defineComponent({
     VarButton,
     VarIcon
   },
+  inheritAttrs: false,
   props,
 
   setup(props) {

package/es/select/Select.js

@@ -55,6 +55,7 @@ export function render(_ctx, _cache) {
     onClose: _ctx.handleBlur
   }, {
     menu: _withCtx(() => [_createElementVNode("div", {
+      ref: "menuEl",
       class: _normalizeClass(_ctx.n('scroller'))
     }, [_renderSlot(_ctx.$slots, "default")], 2
     /* CLASS */
@@ -202,6 +203,7 @@ export default defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    var menuEl = ref(null);
 
     var computeLabel = () => {
       var {
@@ -309,6 +311,7 @@ export default defineComponent({
       isFocus.value = true;
       call(onFocus);
       validateWithTrigger('onFocus');
+      detectBoundary();
     };
 
     var handleBlur = () => {
@@ -433,6 +436,7 @@ export default defineComponent({
       wrapWidth.value = getWrapWidth();
       offsetY.value = getOffsetY() + toPxNum(props.offsetY);
       isFocus.value = true;
+      detectBoundary();
     }; // expose
 
 
@@ -449,6 +453,23 @@ export default defineComponent({
       resetValidation();
     };
 
+    var detectBoundary = () => {
+      var {
+        body
+      } = document;
+      nextTick(() => {
+        var _menuEl$value, _menuEl$value2;
+
+        var {
+          offsetTop: menuOffsetTop,
+          offsetHeight: menuOffsetHeight
+        } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
+        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
+        if (menuOffsetTop < 0) offsetY.value = getOffsetY();
+        if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+      });
+    };
+
     watch(() => props.multiple, () => {
       var {
         multiple,
@@ -482,6 +503,7 @@ export default defineComponent({
       formDisabled: form == null ? void 0 : form.disabled,
       label,
       labels,
+      menuEl,
       n,
       classes,
       computePlaceholderState,

package/es/varlet.esm.js

@@ -1945,17 +1945,18 @@ function render$U(_ctx, _cache) {
   return openBlock(), createBlock(Teleport, {
     to: "body",
     disabled: _ctx.disabled
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.show, _ctx.n("--active")])),
+  }, [createElementVNode("div", mergeProps({
+    class: _ctx.classes(_ctx.n(), [_ctx.show, _ctx.n("--active")]),
     ref: "backTopEl",
-    style: normalizeStyle({
+    style: {
       right: _ctx.toSizeUnit(_ctx.right),
       bottom: _ctx.toSizeUnit(_ctx.bottom)
-    }),
+    }
+  }, _ctx.$attrs, {
     onClick: _cache[0] || (_cache[0] = withModifiers(function() {
       return _ctx.click && _ctx.click(...arguments);
     }, ["stop"]))
-  }, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_component_var_button, {
+  }), [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_component_var_button, {
     type: "primary",
     round: "",
     "var-back-top-cover": ""
@@ -1964,7 +1965,7 @@ function render$U(_ctx, _cache) {
       name: "chevron-up"
     })]),
     _: 1
-  })])], 6)], 8, ["disabled"]);
+  })])], 16)], 8, ["disabled"]);
 }
 var BackTop = defineComponent({
   render: render$U,
@@ -1973,6 +1974,7 @@ var BackTop = defineComponent({
     VarButton: Button,
     VarIcon: Icon
   },
+  inheritAttrs: false,
   props: props$O,
   setup(props2) {
     var show = ref(false);
@@ -13655,6 +13657,7 @@ function render$f(_ctx, _cache) {
     onClose: _ctx.handleBlur
   }, {
     menu: withCtx(() => [createElementVNode("div", {
+      ref: "menuEl",
       class: normalizeClass(_ctx.n("scroller"))
     }, [renderSlot(_ctx.$slots, "default")], 2)]),
     default: withCtx(() => [createElementVNode("div", {
@@ -13759,6 +13762,7 @@ var Select = defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var menuEl = ref(null);
     var computeLabel = () => {
       var {
         multiple: multiple2,
@@ -13846,6 +13850,7 @@ var Select = defineComponent({
       isFocus.value = true;
       call(onFocus);
       validateWithTrigger("onFocus");
+      detectBoundary();
     };
     var handleBlur = () => {
       var {
@@ -13949,6 +13954,7 @@ var Select = defineComponent({
       wrapWidth.value = getWrapWidth();
       offsetY.value = getOffsetY() + toPxNum(props2.offsetY);
       isFocus.value = true;
+      detectBoundary();
     };
     var blur = () => {
       isFocus.value = false;
@@ -13958,6 +13964,23 @@ var Select = defineComponent({
       call(props2["onUpdate:modelValue"], props2.multiple ? [] : void 0);
       resetValidation();
     };
+    var detectBoundary = () => {
+      var {
+        body
+      } = document;
+      nextTick(() => {
+        var _menuEl$value, _menuEl$value2;
+        var {
+          offsetTop: menuOffsetTop,
+          offsetHeight: menuOffsetHeight
+        } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
+        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
+        if (menuOffsetTop < 0)
+          offsetY.value = getOffsetY();
+        if (menuOffsetBottom < 0)
+          offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+      });
+    };
     watch(() => props2.multiple, () => {
       var {
         multiple: multiple2,
@@ -13990,6 +14013,7 @@ var Select = defineComponent({
       formDisabled: form == null ? void 0 : form.disabled,
       label,
       labels,
+      menuEl,
       n: n$h,
       classes: classes$d,
       computePlaceholderState,

package/highlight/attributes.json

@@ -1337,7 +1337,7 @@
   },
   "var-select/offset-y": {
     "type": "string | number",
-    "description": "下拉菜单的垂直偏移量 默认值：true"
+    "description": "下拉菜单的垂直偏移量 默认值：0"
   },
   "var-select/chip": {
     "type": "boolean",

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.27.11",
+  "version": "1.27.12",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3976,7 +3976,7 @@
             {
               "name": "offset-y",
               "description": "下拉菜单的垂直偏移量",
-              "default": "true",
+              "default": "0",
               "value": {
                 "type": "string | number",
                 "kind": "expression"

package/lib/back-top/BackTop.js

@@ -33,17 +33,18 @@ function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
     to: "body",
     disabled: _ctx.disabled
-  }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')])),
+  }, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: _ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')]),
     ref: "backTopEl",
-    style: (0, _vue.normalizeStyle)({
+    style: {
       right: _ctx.toSizeUnit(_ctx.right),
       bottom: _ctx.toSizeUnit(_ctx.bottom)
-    }),
+    }
+  }, _ctx.$attrs, {
     onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(function () {
       return _ctx.click && _ctx.click(...arguments);
     }, ["stop"]))
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+  }), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_button, {
     type: "primary",
     round: "",
     "var-back-top-cover": ""
@@ -54,8 +55,8 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 6
-  /* CLASS, STYLE */
+  })])], 16
+  /* FULL_PROPS */
   )], 8
   /* PROPS */
   , ["disabled"]);
@@ -68,6 +69,7 @@ var _default = (0, _vue.defineComponent)({
     VarButton: _button.default,
     VarIcon: _icon.default
   },
+  inheritAttrs: false,
   props: _props.props,
 
   setup(props) {

package/lib/select/Select.js

@@ -74,6 +74,7 @@ function render(_ctx, _cache) {
     onClose: _ctx.handleBlur
   }, {
     menu: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
+      ref: "menuEl",
       class: (0, _vue.normalizeClass)(_ctx.n('scroller'))
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
     /* CLASS */
@@ -222,6 +223,7 @@ var _default = (0, _vue.defineComponent)({
       // expose
       resetValidation
     } = (0, _components.useValidation)();
+    var menuEl = (0, _vue.ref)(null);
 
     var computeLabel = () => {
       var {
@@ -329,6 +331,7 @@ var _default = (0, _vue.defineComponent)({
       isFocus.value = true;
       (0, _components.call)(onFocus);
       validateWithTrigger('onFocus');
+      detectBoundary();
     };
 
     var handleBlur = () => {
@@ -453,6 +456,7 @@ var _default = (0, _vue.defineComponent)({
       wrapWidth.value = getWrapWidth();
       offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
       isFocus.value = true;
+      detectBoundary();
     }; // expose
 
 
@@ -469,6 +473,23 @@ var _default = (0, _vue.defineComponent)({
       resetValidation();
     };
 
+    var detectBoundary = () => {
+      var {
+        body
+      } = document;
+      (0, _vue.nextTick)(() => {
+        var _menuEl$value, _menuEl$value2;
+
+        var {
+          offsetTop: menuOffsetTop,
+          offsetHeight: menuOffsetHeight
+        } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
+        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
+        if (menuOffsetTop < 0) offsetY.value = getOffsetY();
+        if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+      });
+    };
+
     (0, _vue.watch)(() => props.multiple, () => {
       var {
         multiple,
@@ -502,6 +523,7 @@ var _default = (0, _vue.defineComponent)({
       formDisabled: form == null ? void 0 : form.disabled,
       label,
       labels,
+      menuEl,
       n,
       classes,
       computePlaceholderState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.27.12",
+  "version": "1.27.13",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.27.12",
+    "@varlet/icons": "1.27.13",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.27.12",
-    "@varlet/touch-emulator": "1.27.12",
+    "@varlet/cli": "1.27.13",
+    "@varlet/touch-emulator": "1.27.13",
     "@vue/runtime-core": "3.2.25",
     "@vue/test-utils": "2.0.0-rc.6",
     "clipboard": "^2.0.6",

package/types/icon.d.ts

@@ -6,7 +6,7 @@ export interface IconProps {
   color?: string
   namespace?: string
   transition?: string | number
-  onClick?: () => (event: Event) => void
+  onClick?: (event: Event) => void
 }
 
 export class Icon extends VarComponent {