@varlet/ui 1.20.0-alpha.0 → 1.20.1-alpha.10

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.20.0](https://github.com/haoziqaq/varlet/compare/v1.19.0...v1.20.0) (2021-09-15)
+
+**Note:** Version bump only for package @varlet/ui
+
+
+
+
+
 # [1.19.0](https://github.com/haoziqaq/varlet/compare/v1.18.1...v1.19.0) (2021-09-13)
 
 

package/es/index-anchor/IndexAnchor.js

@@ -10,6 +10,8 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.stickyOffsetTop : null,
     "z-index": _ctx.sticky ? _ctx.zIndex : null,
+    disabled: _ctx.disabled && !_ctx.cssMode,
+    "css-mode": _ctx.cssMode,
     ref: "anchorEl"
   }, {
     default: _withId(() => [_createVNode("div", _mergeProps({
@@ -24,7 +26,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
   }, 8
   /* PROPS */
-  , ["offset-top", "z-index"]);
+  , ["offset-top", "z-index", "disabled", "css-mode"]);
 });
 export default defineComponent({
   render,
@@ -42,6 +44,7 @@ export default defineComponent({
       bindIndexBar
     } = useIndexBar();
     var ownTop = ref(0);
+    var disabled = ref(false);
     var name = computed(() => props.index);
     var anchorEl = ref(null);
 
@@ -53,6 +56,7 @@ export default defineComponent({
     var {
       active,
       sticky,
+      cssMode,
       stickyOffsetTop,
       zIndex
     } = indexBar;
@@ -62,11 +66,16 @@ export default defineComponent({
       ownTop.value = anchorEl.value.$el ? anchorEl.value.$el.offsetTop : anchorEl.value.offsetTop;
     };
 
+    var setDisabled = value => {
+      disabled.value = value;
+    };
+
     var indexAnchorProvider = {
       index,
       name,
       ownTop,
-      setOwnTop
+      setOwnTop,
+      setDisabled
     };
     bindIndexBar(indexAnchorProvider);
     return {
@@ -75,6 +84,8 @@ export default defineComponent({
       active,
       sticky,
       zIndex,
+      disabled,
+      cssMode,
       stickyOffsetTop,
       Transition
     };

package/es/index-bar/IndexBar.js

@@ -66,11 +66,13 @@ export default defineComponent({
     var anchorNameList = ref([]);
     var active = ref();
     var sticky = computed(() => props.sticky);
+    var cssMode = computed(() => props.cssMode);
     var stickyOffsetTop = computed(() => props.stickyOffsetTop);
     var zIndex = computed(() => props.zIndex);
     var indexBarProvider = {
       active,
       sticky,
+      cssMode,
       stickyOffsetTop,
       zIndex
     };
@@ -88,12 +90,20 @@ export default defineComponent({
         scrollTop,
         scrollHeight
       } = scrollEl.value;
+      var {
+        offsetTop
+      } = barEl.value;
       indexAnchors.forEach((anchor, index) => {
         var anchorTop = anchor.ownTop.value;
-        var top = scrollTop - anchorTop + stickyOffsetTop.value;
+        var top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
         var distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
 
         if (top >= 0 && top < distance && !clickedName.value) {
+          if (index && !props.cssMode) {
+            indexAnchors[index - 1].setDisabled(true);
+          }
+
+          anchor.setDisabled(false);
           emitEvent(anchor);
         }
       });

package/es/index-bar/props.js

@@ -7,6 +7,10 @@ export var props = {
     type: Number,
     default: 0
   },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
   hideList: {
     type: Boolean,
     default: false

package/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/snackbar/style/less.js

@@ -1,8 +1,8 @@
 import '../../styles/common.less'
+import '../SnackbarSfc.less'
 import '../../styles/elevation.less'
 import '../../loading/loading.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../snackbar.less'
 import '../coreSfc.less'
-import '../SnackbarSfc.less'

package/es/step/Step.js

@@ -12,24 +12,6 @@ var _hoisted_1 = {
   class: "var-step"
 };
 var _hoisted_2 = {
-  key: 0,
-  class: "var-step-horizontal"
-};
-var _hoisted_3 = {
-  class: "var-step-horizontal__main",
-  ref: "main"
-};
-var _hoisted_4 = {
-  key: 3
-};
-var _hoisted_5 = {
-  key: 1,
-  class: "var-step-vertical"
-};
-var _hoisted_6 = {
-  class: "var-step-vertical__main"
-};
-var _hoisted_7 = {
   key: 3
 };
 
@@ -38,10 +20,16 @@ _popScopeId();
 export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_ctx.direction === 'horizontal' ? (_openBlock(), _createBlock("div", _hoisted_2, [_createVNode("div", _hoisted_3, [_createVNode("div", {
-    class: ["var-step-horizontal__tag", {
-      'var-step-horizontal__tag--active': _ctx.isActive || _ctx.isCurrent
-    }],
+  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", {
+    class: "var-step-" + _ctx.direction
+  }, [_createVNode("div", {
+    class: "var-step-" + _ctx.direction + "__main",
+    ref: _ctx.getRef
+  }, [_createVNode("div", {
+    class: {
+      ["var-step-" + _ctx.direction + "__tag"]: true,
+      ["var-step-" + _ctx.direction + "__tag--active"]: _ctx.isActive || _ctx.isCurrent
+    },
     style: {
       backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor
     },
@@ -50,7 +38,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     key: 0,
     class: "var-step__icon",
     "var-step-cover": "",
-    name: _ctx.activeIcon || 'check'
+    name: _ctx.activeIcon
   }, null, 8
   /* PROPS */
   , ["name"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
@@ -67,76 +55,31 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     name: _ctx.inactiveIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : (_openBlock(), _createBlock("span", _hoisted_4, _toDisplayString(_ctx.index + 1), 1
+  , ["name"])) : (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.index + 1), 1
   /* TEXT */
   ))], 6
   /* CLASS, STYLE */
   ), _createVNode("div", {
-    class: ["var-step-horizontal__content", {
-      'var-step-horizontal__content--active': _ctx.isActive || _ctx.isCurrent
-    }],
+    class: {
+      ["var-step-" + _ctx.direction + "__content"]: true,
+      ["var-step-" + _ctx.direction + "__content--active"]: _ctx.isActive || _ctx.isCurrent
+    },
     onClick: _cache[2] || (_cache[2] = (...args) => _ctx.click && _ctx.click(...args))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  )], 512
-  /* NEED_PATCH */
+  )], 2
+  /* CLASS */
   ), !_ctx.isLastChild ? (_openBlock(), _createBlock("div", {
     key: 0,
-    class: "var-step-horizontal__line",
+    class: "var-step-" + _ctx.direction + "__line",
     style: {
       margin: _ctx.lineMargin
     }
-  }, null, 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)])) : (_openBlock(), _createBlock("div", _hoisted_5, [_createVNode("div", _hoisted_6, [_createVNode("div", {
-    class: ["var-step-vertical__tag", {
-      'var-step-vertical__tag--active': _ctx.isActive || _ctx.isCurrent
-    }],
-    style: {
-      backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor
-    },
-    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.click && _ctx.click(...args))
-  }, [_ctx.isActive ? (_openBlock(), _createBlock(_component_var_icon, {
-    key: 0,
-    class: "var-step__icon",
-    "var-step-cover": "",
-    name: _ctx.activeIcon
-  }, null, 8
-  /* PROPS */
-  , ["name"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
-    key: 1,
-    class: "var-step__icon",
-    "var-step-cover": "",
-    name: _ctx.currentIcon
-  }, null, 8
-  /* PROPS */
-  , ["name"])) : _ctx.inactiveIcon ? (_openBlock(), _createBlock(_component_var_icon, {
-    key: 2,
-    class: "var-step__icon",
-    "var-step-cover": "",
-    name: _ctx.inactiveIcon
-  }, null, 8
-  /* PROPS */
-  , ["name"])) : (_openBlock(), _createBlock("span", _hoisted_7, _toDisplayString(_ctx.index + 1), 1
-  /* TEXT */
-  ))], 6
+  }, null, 6
   /* CLASS, STYLE */
-  ), _createVNode("div", {
-    class: ["var-step-vertical__content", {
-      'var-step-vertical__content--active': _ctx.isActive || _ctx.isCurrent
-    }],
-    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.click && _ctx.click(...args))
-  }, [_renderSlot(_ctx.$slots, "default")], 2
+  )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
-  )]), !_ctx.isLastChild ? (_openBlock(), _createBlock("div", {
-    key: 0,
-    class: "var-step-vertical__line",
-    style: {
-      margin: _ctx.lineMargin
-    }
-  }, null, 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)]))]);
+  )]);
 });
 export default defineComponent({
   render,
@@ -177,6 +120,12 @@ export default defineComponent({
 
     var click = () => clickStep(index.value);
 
+    var getRef = el => {
+      if (direction.value === 'horizontal') {
+        main.value = el;
+      }
+    };
+
     bindSteps(stepProvider);
     watch(length, newLength => {
       isLastChild.value = newLength - 1 === index.value;
@@ -196,7 +145,8 @@ export default defineComponent({
       activeColor,
       inactiveColor,
       isLastChild,
-      click
+      click,
+      getRef
     };
   }
 

package/es/sticky/Sticky.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, computed } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, computed, watch } from 'vue';
 import { props } from './props';
 import { getParentScroller, toPxNum } from '../utils/elements';
 import { toNumber } from '../utils/shared';
@@ -8,29 +8,29 @@ var _withId = /*#__PURE__*/_withScopeId("");
 
 export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   return _openBlock(), _createBlock("div", {
-    class: "var-sticky",
+    class: ["var-sticky", [_ctx.enableCSSMode ? 'var-sticky--css-mode' : null]],
     ref: "stickyEl",
     style: {
       zIndex: _ctx.toNumber(_ctx.zIndex),
-      top: !_ctx.isFixed ? _ctx.offsetTop + "px" : null,
-      width: _ctx.isFixed ? _ctx.fixedWidth : null,
-      height: _ctx.isFixed ? _ctx.fixedHeight : null
+      top: _ctx.enableCSSMode ? _ctx.offsetTop + "px" : null,
+      width: _ctx.enableFixedMode ? _ctx.fixedWidth : null,
+      height: _ctx.enableFixedMode ? _ctx.fixedHeight : null
     }
   }, [_createVNode("div", {
     class: "var-sticky__wrapper",
     ref: "wrapperEl",
     style: {
       zIndex: _ctx.toNumber(_ctx.zIndex),
-      position: _ctx.isFixed ? 'fixed' : null,
-      width: _ctx.isFixed ? _ctx.fixedWrapperWidth : null,
-      height: _ctx.isFixed ? _ctx.fixedWrapperHeight : null,
-      left: _ctx.isFixed ? _ctx.fixedLeft : null,
-      top: _ctx.isFixed ? _ctx.fixedTop : null
+      position: _ctx.enableFixedMode ? 'fixed' : null,
+      width: _ctx.enableFixedMode ? _ctx.fixedWrapperWidth : null,
+      height: _ctx.enableFixedMode ? _ctx.fixedWrapperHeight : null,
+      left: _ctx.enableFixedMode ? _ctx.fixedLeft : null,
+      top: _ctx.enableFixedMode ? _ctx.fixedTop : null
     }
   }, [_renderSlot(_ctx.$slots, "default")], 4
   /* STYLE */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   );
 });
 export default defineComponent({
@@ -41,7 +41,6 @@ export default defineComponent({
   setup(props) {
     var stickyEl = ref(null);
     var wrapperEl = ref(null);
-    var isSupportCSSSticky;
     var isFixed = ref(false);
     var fixedTop = ref('0px');
     var fixedLeft = ref('0px');
@@ -49,10 +48,22 @@ export default defineComponent({
     var fixedHeight = ref('auto');
     var fixedWrapperWidth = ref('auto');
     var fixedWrapperHeight = ref('auto');
+    var enableCSSMode = computed(() => !props.disabled && props.cssMode);
+    var enableFixedMode = computed(() => !props.disabled && isFixed.value);
     var offsetTop = computed(() => toPxNum(props.offsetTop));
     var scroller = window;
 
     var handleScroll = () => {
+      var {
+        onScroll,
+        cssMode,
+        disabled
+      } = props;
+
+      if (disabled) {
+        return;
+      }
+
       var scrollerTop = 0;
 
       if (scroller !== window) {
@@ -69,12 +80,9 @@ export default defineComponent({
         left: stickyLeft
       } = sticky.getBoundingClientRect();
       var currentOffsetTop = stickyTop - scrollerTop;
-      var {
-        onScroll
-      } = props;
 
       if (currentOffsetTop <= offsetTop.value) {
-        if (!isSupportCSSSticky) {
+        if (!cssMode) {
           fixedWidth.value = sticky.offsetWidth + "px";
           fixedHeight.value = sticky.offsetHeight + "px";
           fixedTop.value = scrollerTop + offsetTop.value + "px";
@@ -103,12 +111,10 @@ export default defineComponent({
       window.removeEventListener('scroll', handleScroll);
     };
 
+    watch(() => props.disabled, handleScroll);
     onActivated(addScrollListener);
     onDeactivated(removeScrollListener);
-    onMounted(() => {
-      isSupportCSSSticky = ['sticky', '-webkit-sticky'].includes(window.getComputedStyle(stickyEl.value).position);
-      addScrollListener();
-    });
+    onMounted(addScrollListener);
     onUnmounted(removeScrollListener);
     return {
       stickyEl,
@@ -121,6 +127,8 @@ export default defineComponent({
       fixedHeight,
       fixedWrapperWidth,
       fixedWrapperHeight,
+      enableCSSMode,
+      enableFixedMode,
       toNumber
     };
   }

package/es/sticky/props.js

@@ -7,6 +7,14 @@ export var props = {
     type: [String, Number],
     default: 10
   },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   onScroll: {
     type: Function
   }

package/es/sticky/sticky.css

@@ -1 +1 @@
-.var-sticky { position: sticky; position: -webkit-sticky;}
+.var-sticky { position: relative;}.var-sticky--css-mode { position: sticky; position: -webkit-sticky;}

package/es/sticky/sticky.less

@@ -1,4 +1,8 @@
 .var-sticky {
-  position: sticky;
-  position: -webkit-sticky;
+  position: relative;
+
+  &--css-mode {
+    position: sticky;
+    position: -webkit-sticky;
+  }
 }

package/highlight/attributes.json

@@ -711,6 +711,10 @@
     "type": "boolean",
     "description": "是否隐藏锚点列表 默认值：false"
   },
+  "var-index-bar/css-mode": {
+    "type": "boolean",
+    "description": "开启原生`css sticky`模式 默认值：false"
+  },
   "var-index-bar/z-index": {
     "type": "number | string",
     "description": "z-index 层级 默认值：1"
@@ -1359,6 +1363,14 @@
     "type": "string | number",
     "description": "吸顶时的层级 默认值：0"
   },
+  "var-sticky/css-mode": {
+    "type": "boolean",
+    "description": "开启原生`css sticky`模式 默认值：false"
+  },
+  "var-sticky/disabled": {
+    "type": "boolean",
+    "description": "禁用吸顶, 设置为`true`时, 元素会回到文档流中 默认值：false"
+  },
   "var-style-provider/style-vars": {
     "type": "Record<string, string>",
     "description": "css变量 默认值：{}"

package/highlight/tags.json

@@ -274,6 +274,7 @@
       "sticky",
       "sticky-offset-top",
       "hide-list",
+      "css-mode",
       "z-index",
       "highlight-color",
       "duration"
@@ -524,7 +525,9 @@
   "var-sticky": {
     "attributes": [
       "offset-top",
-      "z-index"
+      "z-index",
+      "css-mode",
+      "disabled"
     ]
   },
   "var-style-provider": {

package/highlight/web-types.json

@@ -2150,6 +2150,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "css-mode",
+              "description": "开启原生`css sticky`模式",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "z-index",
               "description": "z-index 层级",
@@ -4078,6 +4087,24 @@
                 "type": "string | number",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "css-mode",
+              "description": "开启原生`css sticky`模式",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "禁用吸顶, 设置为`true`时, 元素会回到文档流中",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.20.0-alpha.0+be463adf",
+  "version": "1.20.1-alpha.10+89c77d4c",
   "description": "A material like components library",
   "module": "es/index.js",
   "typings": "types/index.d.ts",
@@ -45,9 +45,9 @@
   "peerDependencies": {
     "vue": "^3.0.0"
   },
-  "gitHead": "be463adf62cb7cb196e555a42c37a7d2b10cac77",
+  "gitHead": "89c77d4cb34cca2a4734796192dbd8403cca288d",
   "devDependencies": {
-    "@varlet/cli": "^1.20.0-alpha.0+be463adf"
+    "@varlet/cli": "^1.20.1-alpha.10+89c77d4c"
   },
   "dependencies": {
     "dayjs": "^1.10.4",

package/types/indexBar.d.ts

@@ -4,6 +4,7 @@ export interface IndexBarProps {
   sticky?: boolean
   stickyOffsetTop?: number
   hideList?: boolean
+  cssMode?: boolean
   zIndex?: number | string
   highlightColor?: string
   duration?: number | string

package/types/sticky.d.ts

@@ -3,6 +3,8 @@ import { VarComponent } from './varComponent'
 export interface StickyProps {
   offsetTop?: string | number
   zIndex?: string | number
+  cssMode?: boolean
+  disabled?: boolean
   onScroll?: (offsetTop: number, isFixed: boolean) => void
 }