@varlet/ui 1.20.1-alpha.1 → 1.20.1-alpha.10

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/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,24 +8,24 @@ var _withId = /*#__PURE__*/_withScopeId("");
 
 export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   return _openBlock(), _createBlock("div", {
-    class: ["var-sticky", [_ctx.cssMode ? 'var-sticky--css-mode' : null]],
+    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 */
@@ -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,13 +80,9 @@ export default defineComponent({
         left: stickyLeft
       } = sticky.getBoundingClientRect();
       var currentOffsetTop = stickyTop - scrollerTop;
-      var {
-        onScroll,
-        cssMode
-      } = props;
 
       if (currentOffsetTop <= offsetTop.value) {
-        if (!isSupportCSSSticky || !cssMode) {
+        if (!cssMode) {
           fixedWidth.value = sticky.offsetWidth + "px";
           fixedHeight.value = sticky.offsetHeight + "px";
           fixedTop.value = scrollerTop + offsetTop.value + "px";
@@ -104,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,
@@ -122,6 +127,8 @@ export default defineComponent({
       fixedHeight,
       fixedWrapperWidth,
       fixedWrapperHeight,
+      enableCSSMode,
+      enableFixedMode,
       toNumber
     };
   }

package/es/sticky/props.js

@@ -11,6 +11,10 @@ export var props = {
     type: Boolean,
     default: false
   },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   onScroll: {
     type: Function
   }

package/es/sticky/sticky.css

@@ -1 +1 @@
-.var-sticky--css-mode { 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,6 @@
 .var-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"
@@ -1363,6 +1367,10 @@
     "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"
@@ -525,7 +526,8 @@
     "attributes": [
       "offset-top",
       "z-index",
-      "css-mode"
+      "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 层级",
@@ -4087,6 +4096,15 @@
                 "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.1-alpha.1+3769f8b0",
+  "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": "3769f8b0837bc16f9bc4d7ce3405cac61c1f79e1",
+  "gitHead": "89c77d4cb34cca2a4734796192dbd8403cca288d",
   "devDependencies": {
-    "@varlet/cli": "^1.20.1-alpha.1+3769f8b0"
+    "@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
 }