Merge branch 'release-3.18.0' of github.com:opentiny/tiny-vue into release-3.18.0

packages/renderless/src/anchor/index.ts

@@ -119,7 +119,7 @@ export const handleScroll = (state: IAnchorRenderlessParams['state']) => () => {
   state.scrollTimer = window.setTimeout(() => {
     state.isScroll = false
     clearTimeout(state.scrollTimer)
-  }, 2000)
+  }, 200)
 }
 
 // 设置滚动偏移量
@@ -183,6 +183,11 @@ export const onItersectionObserver =
           return
         }
 
+        if (state.isScroll) {
+          api.handleScroll()
+          return
+        }
+
         for (let key in state.observerLinks) {
           if (Object.prototype.hasOwnProperty.call(state.observerLinks, key)) {
             const item = state.observerLinks[key]
@@ -202,7 +207,7 @@ export const onItersectionObserver =
           }
         }
       },
-      { root: scrollContainer, threshold: [0] }
+      { root: scrollContainer, threshold: [0, 0.25, 0.5, 1] }
     )
 
     addObserver({ props, state })

packages/theme-saas/src/anchor/index.less

@@ -0,0 +1,151 @@
+/**
+* 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.
+*
+*/
+
+@import '../custom.less';
+
+@anchor-prefix-cls: ~'@{css-prefix}anchor';
+
+.@{anchor-prefix-cls} {
+  @apply bg-transparent;
+  @apply w-50;
+  @apply relative;
+  @apply text-color-text-primary;
+  @apply text-sm;
+
+  &__affix {
+    @apply fixed;
+    z-index: 1;
+  }
+
+  &__line {
+    .@{anchor-prefix-cls}-link + .@{anchor-prefix-cls}-link {
+      margin-top: 0.5em;
+    }
+
+    .@{anchor-prefix-cls}-link-mask {
+      @apply absolute;
+      @apply max-w-0;
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      left: 2px;
+      @apply w-full;
+      background-color: var(--ti-anchor-link-mask-bg-color);
+    }
+
+    .@{anchor-prefix-cls}-orbit {
+      @apply absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      @apply w-1;
+      @apply rounded;
+      @apply bg-color-border;
+
+      &-skid {
+        @apply absolute;
+        left: 0;
+        @apply w-1;
+        @apply bg-color-brand;
+        @apply rounded;
+        &--active {
+          @apply bg-color-brand;
+        }
+      }
+    }
+  }
+
+  &-link-title:hover {
+    @apply text-color-brand;
+  }
+
+  &-link {
+    @apply ml-4;
+    cursor: pointer;
+    @apply leading-9;
+
+    &-title {
+      display: block;
+      @apply max-w-full;
+      padding: var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-right)
+        var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-left);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      @apply text-color-text-primary;
+      @apply whitespace-nowrap;
+      &&--active {
+        @apply text-color-brand;
+      }
+    }
+  }
+
+  &__dot {
+    @apply w-50;
+
+    .@{anchor-prefix-cls} {
+      padding: 0 16px;
+    }
+
+    .@{anchor-prefix-cls}-link {
+      @apply relative;
+      padding-left: 10px;
+      margin-bottom: 16px;
+    }
+
+    .@{anchor-prefix-cls}-link-title {
+      padding-left: 16px;
+      padding-right: 0;
+      -webkit-line-clamp: 2;
+
+      &:before {
+        content: '';
+        display: block;
+        @apply w-2;
+        @apply h-2;
+        border: 1px solid var(--ti-anchor-dot-border-color);
+        @apply absolute;
+        border-radius: 50%;
+        left: 0px;
+        top: 6px;
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        width: 1px;
+        background-color: var(--color-border-base);
+        @apply bg-color-bg-2;
+        @apply absolute;
+        border-radius: 50%;
+        left: 3.5px;
+        top: 20px;
+        bottom: -18px;
+      }
+
+      &:hover,
+      &--active {
+        color: var(--ti-anchor-link-active-text-color);
+
+        &:before {
+          border-color: var(--ti-anchor-link-active-text-color);
+          @apply opacity-100;
+        }
+      }
+    }
+
+    .@{anchor-prefix-cls}-link:last-child > .@{anchor-prefix-cls}-link-title:after {
+      @apply hidden;
+    }
+  }
+}

packages/theme-saas/theme/defaultTheme.js

@@ -61,6 +61,7 @@ module.exports = {
     60: '15rem',
     56: '14rem',
     52: '13rem',
+    50: '12.5rem',
     48: '12rem',
     45: '11.25rem',
     44: '11rem',

packages/vue/src/anchor/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@opentiny/vue-anchor",
+  "type": "module",
   "version": "3.18.0",
   "description": "",
-  "main": "lib/index.js",
+  "license": "MIT",
   "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "main": "lib/index.js",
+  "module": "index.ts",
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "^0.31.0"
+  }
 }

packages/vue/src/anchor/src/pc.vue

@@ -1,10 +1,12 @@
 <script lang="tsx">
 import { props, setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/anchor/vue'
+import { AutoTip } from '@opentiny/vue-directive'
 import type { IAnchorApi } from '@opentiny/vue-renderless/types/anchor.type'
 
 export default defineComponent({
   name: $prefix + 'Anchor',
+  directives: { AutoTip },
   props: [...props, 'isAffix', 'links', 'containerId', 'markClass', 'type'],
   emits: ['linkClick', 'onChange', 'change'], // deprecated v3.12.0废弃，v3.17.0移除onChange 事件
   setup(props, context) {
@@ -27,9 +29,9 @@ export default defineComponent({
               <a
                 href={item.link}
                 class={[`${anchorClass}-link-title`, currentLink === item.link && `${anchorClass}-link-title--active`]}
-                title={item.title}
                 onClick={(e) => linkClick(e, item)}
-                ref={item.link}>
+                ref={item.link}
+                v-auto-tip>
                 {item.title}
               </a>
               {item.children ? renderLinks(item.children) : null}