@tplc/wot 0.0.1

package/components/wd-index-anchor/wd-index-anchor.vue

@@ -0,0 +1,57 @@
+<template>
+  <!-- #ifdef MP-DINGTALK -->
+  <view :class="`wd-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
+    <!-- #endif -->
+    <view
+      :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`"
+      :style="customStyle"
+      :id="indexAnchorId"
+    >
+      <slot>
+        {{ index }}
+      </slot>
+    </view>
+    <!-- #ifdef MP-DINGTALK -->
+  </view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { indexAnchorProps } from './type'
+import { onMounted, getCurrentInstance, ref, computed } from 'vue'
+import { indexBarInjectionKey } from '../wd-index-bar/type'
+import { getRect, isDef, uuid } from '../common/util'
+import { useParent } from '../composables/useParent'
+
+const props = defineProps(indexAnchorProps)
+
+const { parent: indexBar } = useParent(indexBarInjectionKey)
+
+const indexAnchorId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const isSticky = computed(() => {
+  return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
+})
+
+function getInfo() {
+  getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
+    if (isDef(indexBar)) {
+      const anchor = indexBar.anchorState.anchorList.find((v) => v.index === props.index)!
+      anchor.top = Math.floor(res.top!)
+    }
+  })
+}
+
+onMounted(() => {
+  if (isDef(indexBar)) {
+    indexBar.anchorState.anchorList.push({ top: 0, index: props.index })
+  }
+  getInfo()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-index-bar/index.scss

@@ -0,0 +1,39 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(index-bar) {
+    @include e(index) {
+      color: $-color-white;
+    }
+  }
+}
+
+@include b(index-bar) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  @include e(content) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(sidebar) {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+  }
+
+  @include e(index) {
+    padding: 4px 6px;
+    font-size: 12px;
+    font-weight: $-fw-medium;
+    color: $-color-title;
+
+    @include when(active) {
+      color: $-color-theme;
+    }
+  }
+}

package/components/wd-index-bar/type.ts

@@ -0,0 +1,28 @@
+import type { Ref, InjectionKey, ExtractPropTypes } from 'vue'
+import { makeBooleanProp } from '../common/props'
+
+export type AnchorIndex = number | string
+
+export interface AnchorItem {
+  top: number
+  index: AnchorIndex
+}
+
+export const indexBarProps = {
+  /**
+   * @description 索引是否吸顶
+   */
+  sticky: makeBooleanProp(false),
+}
+
+export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
+
+export type InderBarProvide = {
+  props: { sticky?: boolean }
+  anchorState: {
+    anchorList: AnchorItem[] // 锚点列表
+    activeIndex: AnchorIndex | null // 当前激活的索引
+  }
+}
+
+export const indexBarInjectionKey: InjectionKey<InderBarProvide> = Symbol('wd-index-bar')

package/components/wd-index-bar/wd-index-bar.vue

@@ -0,0 +1,158 @@
+<template>
+  <view class="wd-index-bar" :id="indexBarId">
+    <!-- #ifdef MP-DINGTALK -->
+    <view class="wd-index-bar" :id="indexBarId">
+      <!-- #endif -->
+      <scroll-view
+        :scrollTop="scrollState.scrollTop"
+        :scroll-y="true"
+        class="wd-index-bar__content"
+        @scroll="hanleScroll"
+      >
+        <slot></slot>
+      </scroll-view>
+      <view
+        class="wd-index-bar__sidebar"
+        @touchstart.stop.prevent="handleTouchStart"
+        @touchmove.stop.prevent="handleTouchMove"
+        @touchend.stop.prevent="handleTouchEnd"
+        @touchcancel.stop.prevent="handleTouchEnd"
+      >
+        <view
+          class="wd-index-bar__index"
+          :class="{ 'is-active': item.index === state.activeIndex }"
+          v-for="item in state.anchorList"
+          :key="item.index"
+        >
+          {{ item.index }}
+        </view>
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { AnchorItem, AnchorIndex } from './type'
+import { indexBarInjectionKey, indexBarProps } from './type'
+import { ref, getCurrentInstance, onMounted, reactive, nextTick } from 'vue'
+import { getRect, isDef, uuid, requestAnimationFrame } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+
+const props = defineProps(indexBarProps)
+
+const indexBarId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const state = reactive({
+  activeIndex: null as AnchorIndex | null,
+  anchorList: [] as AnchorItem[],
+})
+
+const { linkChildren } = useChildren(indexBarInjectionKey)
+
+linkChildren({ props, anchorState: state })
+
+const scrollState = reactive({
+  scrollTop: 0, // 即将滚动到的位置
+  prevScrollTop: 0, // 上次记录的位置
+  // 滚动距离
+  touching: false,
+})
+
+// 组件距离页面顶部的高度
+let offsetTop = 0
+const sidebarInfo = {
+  // 侧边栏距离顶部的高度
+  offsetTop: 0,
+  // 高度固定24px
+  indexHeight: 24,
+}
+
+function init() {
+  setTimeout(() => {
+    state.activeIndex = state.anchorList[0]?.index
+    Promise.all([
+      getRect(`#${indexBarId.value}`, false, proxy),
+      getRect('.wd-index-bar__sidebar', false, proxy),
+      getRect('.wd-index-bar__index', false, proxy),
+    ]).then(([bar, sidebar, index]) => {
+      offsetTop = bar.top!
+      sidebarInfo.offsetTop = sidebar.top!
+      sidebarInfo.indexHeight = index.height!
+    })
+  }, 100)
+}
+
+onMounted(() => {
+  init()
+})
+
+function hanleScroll(scrollEvent: any) {
+  if (scrollState.touching) {
+    return
+  }
+  const { detail } = scrollEvent
+  const scrolltop = Math.floor(detail.scrollTop)
+  const anchor = state.anchorList.find((item, index) => {
+    if (!isDef(state.anchorList[index + 1])) return true
+    if (
+      item.top - offsetTop <= scrolltop &&
+      state.anchorList[index + 1].top - offsetTop > scrolltop
+    )
+      return true
+    return false
+  })!
+  if (state.activeIndex !== anchor.index) {
+    state.activeIndex = anchor.index
+  }
+  scrollState.prevScrollTop = scrolltop
+}
+
+function getAnchorByPageY(pageY: number) {
+  const y = pageY - sidebarInfo.offsetTop
+  let idx = Math.floor(y / sidebarInfo.indexHeight)
+  if (idx < 0) idx = 0
+  else if (idx > state.anchorList.length - 1) idx = state.anchorList.length - 1
+  return state.anchorList[idx]
+}
+
+function handleTouchStart() {
+  scrollState.touching = true
+}
+
+function handleTouchMove(e: TouchEvent) {
+  const clientY = e.touches[0].pageY
+  if (state.activeIndex === getAnchorByPageY(clientY).index) {
+    return
+  }
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+}
+
+function handleTouchEnd(e: TouchEvent) {
+  const clientY = e.changedTouches[0].pageY
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+  requestAnimationFrame(() => {
+    scrollState.touching = false
+  })
+}
+
+function setScrollTop(top: number) {
+  if (scrollState.scrollTop === top) {
+    scrollState.scrollTop = scrollState.prevScrollTop
+    nextTick(() => {
+      scrollState.scrollTop = top
+    })
+  } else {
+    scrollState.scrollTop = top
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-input/index.scss

@@ -0,0 +1,326 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(input) {
+    background: $-dark-background2;
+
+    &::after {
+      background: $-dark-color-gray;
+    }
+
+    @include when(not-empty) {
+      &:not(.is-disabled) {
+        &::after {
+          background-color: $-dark-color;
+        }
+      }
+    }
+
+    @include e(inner) {
+      color: $-dark-color;
+
+      &::-webkit-input-placeholder {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(placeholder) {
+      color: $-dark-color3;
+    }
+
+    @include e(count) {
+      color: $-dark-color3;
+      background: transparent;
+    }
+
+    @include e(count-current) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      color: $-dark-color;
+      background: transparent;
+    }
+
+    @include when(cell) {
+      line-height: $-cell-line-height;
+      background-color: $-dark-background2;
+
+      @include when(border) {
+        @include halfPixelBorder('top', $-input-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include when(disabled) {
+      .wd-input__inner {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(input) {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $-input-bg;
+
+  &::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    content: '';
+    background: $-input-border-color;
+    transition: background-color 0.2s ease-in-out;
+    transform: scaleY(0.5);
+  }
+
+  @include when(not-empty) {
+    &:not(.is-disabled) {
+      &::after {
+        background-color: $-input-not-empty-border-color;
+      }
+    }
+  }
+
+  @include e(label) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    font-size: $-input-fs;
+    color: $-cell-title-color;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+        content: '*';
+      }
+    }
+  }
+
+  @include e(label-inner) {
+    display: inline-block;
+    font-size: $-input-fs;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(value) {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  @include e(prefix) {
+    margin-right: $-input-icon-margin;
+    font-size: $-input-fs;
+    line-height: initial;
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      margin-left: 0;
+    }
+  }
+
+  @include e(suffix) {
+    flex-shrink: 0;
+    margin-left: $-input-icon-margin;
+    line-height: initial;
+  }
+
+  @include e(error-message) {
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    color: $-form-item-error-message-color;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(disabled) {
+    .wd-input__inner {
+      color: $-input-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(error) {
+    .wd-input__inner {
+      color: $-input-error-color;
+      background: transparent;
+    }
+  }
+
+  @include when(no-border) {
+    &::after {
+      display: none;
+    }
+
+    .wd-input__inner {
+      height: $-input-inner-height-no-border;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @include when(cell) {
+    display: flex;
+    align-items: flex-start;
+    padding: $-input-cell-padding $-input-padding;
+    background-color: $-input-cell-bg;
+
+    &.is-error::after {
+      background: $-input-cell-border-color;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      display: inline-flex;
+      align-items: center;
+      height: $-input-cell-height;
+      line-height: $-input-cell-height;
+    }
+
+    .wd-input__prefix {
+      display: inline-block;
+      margin-right: $-cell-icon-right;
+    }
+
+    .wd-input__inner {
+      height: $-input-cell-height;
+    }
+
+    &.wd-input::after {
+      display: none;
+    }
+
+    @include when(center) {
+      align-items: center;
+    }
+
+    @include when(border) {
+      @include halfPixelBorder('top', $-input-cell-padding);
+    }
+  }
+
+  @include when(large) {
+    padding: $-input-cell-padding-large;
+
+    .wd-input__prefix {
+      font-size: $-input-fs-large;
+    }
+
+    .wd-input__label-inner {
+      font-size: $-input-fs-large;
+    }
+
+    .wd-input__inner {
+      font-size: $-input-fs-large;
+    }
+
+    .wd-input__count {
+      font-size: $-input-count-fs-large;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      font-size: $-input-icon-size-large;
+    }
+  }
+
+  @include e(inner) {
+    box-sizing: border-box;
+    flex: 1;
+    height: $-input-inner-height;
+    padding: 0;
+    font-size: $-input-fs;
+    color: $-input-color;
+    background: none;
+    border: none;
+    outline: none;
+
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+
+    @include when(align-right) {
+      text-align: right;
+    }
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include edeep(icon) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-icon-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include edeep(clear) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-clear-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count) {
+    margin-left: 15px;
+    font-size: $-input-count-fs;
+    color: $-input-count-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count-current) {
+    color: $-input-count-current-color;
+
+    @include when(error) {
+      color: $-input-error-color;
+    }
+  }
+
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+
+    &.is-error {
+      color: $-input-error-color;
+    }
+  }
+
+  .wd-input__count,
+  .wd-input__count-current {
+    display: inline-flex;
+  }
+}