@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

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

@@ -0,0 +1,55 @@
+<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 top = ref<number>(0)
+
+const isSticky = computed(() => {
+  return indexBar.value && indexBar.value.props.sticky && indexBar.value.anchorState.activeIndex === props.index
+})
+
+function getInfo() {
+  getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
+    if (isDef(indexBar.value)) {
+      top.value = Math.floor(res.top!)
+    }
+  })
+}
+
+onMounted(() => {
+  getInfo()
+})
+
+defineExpose({
+  top
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,68 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+$index-bar-sidebar-right: var(--wot-index-bar-sidebar-right, $spacing-super-tight) !default;
+$index-bar-index-font-size: var(--wot-index-bar-index-font-size, $typography-label-size-main) !default;
+$index-bar-index-width: var(--wot-index-bar-index-width, $typography-label-line--height-size-main) !default;
+$index-bar-index-height: var(--wot-index-bar-index-height, $typography-label-line--height-size-main) !default;
+$index-bar-index-font-weight: var(--wot-index-bar-index-font-weight, $font-weight-medium) !default;
+$index-bar-index-color: var(--wot-index-bar-index-color, $text-auxiliary) !default;
+$index-bar-index-border-radius: var(--wot-index-bar-index-border-radius, $radius-radius-full) !default;
+$index-bar-index-color-active: var(--wot-index-bar-index-color-active, $text-white) !default;
+$index-bar-index-bg-active: var(--wot-index-bar-index-bg-active, $primary-6) !default;
+$index-bar-current-index-size: var(--wot-index-bar-current-index-size, $n-56) !default;
+$index-bar-current-index-bg: var(--wot-index-bar-current-index-bg, $primary-6) !default;
+$index-bar-current-index-color: var(--wot-index-bar-current-index-color, $text-white) !default;
+$index-bar-current-index-font-size: var(--wot-index-bar-current-index-font-size, $typography-title-size-extra-large) !default;
+$index-bar-current-index-z-index: var(--wot-index-bar-current-index-z-index, 10) !default;
+
+@include b(index-bar) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  @include e(content) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(current-index) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: $index-bar-current-index-z-index;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $index-bar-current-index-size;
+    height: $index-bar-current-index-size;
+    font-size: $index-bar-current-index-font-size;
+    color: $index-bar-current-index-color;
+    background-color: $index-bar-current-index-bg;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @include e(sidebar) {
+    position: absolute;
+    top: 50%;
+    right: $index-bar-sidebar-right;
+    transform: translateY(-50%);
+  }
+
+  @include e(index) {
+    color: $index-bar-index-color;
+    font-size: $index-bar-index-font-size;
+    font-weight: $index-bar-index-font-weight;
+    height: $index-bar-index-height;
+    width: $index-bar-index-width;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $index-bar-index-border-radius;
+    @include when(active) {
+      color: $index-bar-index-color-active;
+      background: $index-bar-index-bg-active;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,157 @@
+<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 v-if="scrollState.touching" class="wd-index-bar__current-index">{{ state.activeIndex }}</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 children" :key="item.index">
+          {{ item.index }}
+        </view>
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { AnchorIndex } from './type'
+import { indexBarInjectionKey, indexBarProps } from './type'
+import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
+import { getRect, isDef, uuid, pause } 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
+})
+
+const { linkChildren, children } = useChildren(indexBarInjectionKey)
+
+linkChildren({ props, anchorState: state })
+
+watch(
+  () => children,
+  (newValue) => {
+    if (!newValue.length) {
+      state.activeIndex = null // 或者设置为一个默认值，如第一个子项的索引
+      return
+    }
+
+    if (!isDef(state.activeIndex) || !newValue.find((item) => item.index === state.activeIndex)) {
+      state.activeIndex = newValue[0].index
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const scrollState = reactive({
+  scrollTop: 0, // 即将滚动到的位置
+  prevScrollTop: 0, // 上次记录的位置
+  // 滚动距离
+  touching: false
+})
+
+// 组件距离页面顶部的高度
+let offsetTop = 0
+let sidebarInfo = {
+  // 侧边栏距离顶部的高度
+  offsetTop: 0,
+  // 高度固定24px
+  indexHeight: 24
+}
+
+function init() {
+  setTimeout(() => {
+    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 = children.find((item, index) => {
+    if (!isDef(children[index + 1])) return true
+    if (item.$.exposed!.top.value - offsetTop <= scrolltop && children[index + 1].$.exposed!.top.value - offsetTop > scrolltop) return true
+    return false
+  })
+  if (isDef(anchor) && 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 > children.length - 1) idx = children.length - 1
+  return children[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).$.exposed!.top.value - offsetTop)
+}
+
+async function handleTouchEnd(e: TouchEvent) {
+  const clientY = e.changedTouches[0].pageY
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+  await pause()
+  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">
+@use './index.scss';
+</style>

package/components/wd-input/index.scss

@@ -0,0 +1,129 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+// 输入框内边距
+$input-padding: var(--wot-input-padding, $padding-loose $padding-loose);
+// 输入框背景色
+$input-bg: var(--wot-input-bg, $filled-oppo);
+// 输入框内高度
+$input-inner-height: var(--wot-input-inner-height, $n-20);
+// 输入框内字号
+$input-inner-font-size: var(--wot-input-inner-font-size, $typography-body-size-main);
+// 输入框文字颜色
+$input-inner-color: var(--wot-input-inner-color, $text-main);
+// 输入框占位符颜色
+$input-inner-placeholder-color: var(--wot-input-inner-placeholder-color, $text-placeholder);
+// 输入框禁用颜色
+$input-disabled-color: var(--wot-input-disabled-color, $text-disabled);
+// 输入框图标颜色
+$input-icon-color: var(--wot-input-icon-color, $icon-secondary);
+// 输入框图标字号
+$input-icon-font-size: var(--wot-input-icon-font-size, $n-18);
+// 输入框图标间距
+$input-icon-margin: var(--wot-input-icon-margin, $spacing-tight);
+// 输入框字数统计间距
+$input-count-margin: var(--wot-input-count-margin, $spacing-extra-loose);
+// 输入框字数统计颜色
+$input-count-color: var(--wot-input-count-color, $text-auxiliary);
+// 输入框字数统计字号
+$input-count-font-size: var(--wot-input-count-font-size, $typography-body-size-main);
+// 输入框字数统计行高
+$input-count-line-height: var(--wot-input-count-line-height, $typography-body-line--height-size-main);
+// 输入框错误颜色
+$input-error-color: var(--wot-input-error-color, $danger-main);
+
+@include b(input) {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $input-padding;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $input-bg;
+
+  @include e(prefix) {
+    margin-right: $input-icon-margin;
+    font-size: $input-icon-font-size;
+    line-height: initial;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  @include edeep(icon, clear) {
+    font-size: $input-icon-font-size;
+    line-height: $input-icon-font-size;
+    color: $input-icon-color;
+  }
+
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: initial;
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      margin-left: $input-icon-margin;
+    }
+  }
+
+  @include when(disabled) {
+    .wd-input__inner,
+    .wd-input__placeholder {
+      color: $input-disabled-color;
+    }
+  }
+
+  @include when(error) {
+    .wd-input__inner {
+      color: $input-error-color;
+    }
+  }
+
+  @include e(inner) {
+    flex: 1;
+    height: $input-inner-height;
+    font-size: $input-inner-font-size;
+    color: $input-inner-color;
+    outline: none;
+    border: none;
+    background: none;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: $input-inner-height;
+
+    &::-webkit-input-placeholder {
+      color: $input-inner-placeholder-color;
+    }
+
+    @include when(align-right) {
+      text-align: right;
+    }
+  }
+
+  @include e(placeholder) {
+    color: $input-inner-placeholder-color;
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(count) {
+    margin-left: $input-count-margin;
+    font-size: $input-count-font-size;
+    line-height: $input-count-line-height;
+    color: $input-count-color;
+  }
+
+  @include when(compact) {
+    padding: 0;
+    background: transparent;
+  }
+}

package/components/wd-input/types.ts

@@ -0,0 +1,165 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export type InputClearTrigger = 'focus' | 'always'
+
+export type InputType = 'text' | 'number' | 'digit' | 'idcard' | 'safe-password' | 'nickname' | 'tel'
+
+export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+
+export const inputProps = {
+  ...baseProps,
+  /**
+   * 自定义输入框类名
+   */
+  customInputClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * 占位文本
+   */
+  placeholder: String,
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   */
+  placeholderStyle: String,
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   */
+  placeholderClass: makeStringProp(''),
+  /**
+   * 原生属性，指定光标与键盘的距离。取 input 距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
+   */
+  cursorSpacing: makeNumberProp(0),
+  /**
+   * 原生属性，指定focus时的光标位置
+   */
+  cursor: makeNumberProp(-1),
+  /**
+   * 原生属性，光标起始位置，自动聚集时有效，需与selection-end搭配使用
+   */
+  selectionStart: makeNumberProp(-1),
+  /**
+   * 原生属性，光标结束位置，自动聚集时有效，需与selection-start搭配使用
+   */
+  selectionEnd: makeNumberProp(-1),
+  /**
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * focus时，点击页面的时候不收起键盘
+   */
+  holdKeyboard: makeBooleanProp(false),
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效，可选值：done / go / next / search / send
+   */
+  confirmType: makeStringProp<InputConfirmType>('done'),
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   */
+  confirmHold: makeBooleanProp(false),
+  /**
+   * 原生属性，获取焦点
+   */
+  focus: makeBooleanProp(false),
+  /**
+   * 类型，可选值：text / number / digit / idcard / safe-password / nickname / tel
+   */
+  type: makeStringProp<InputType>('text'),
+  /**
+   * 原生属性，最大长度
+   */
+  maxlength: {
+    type: Number,
+    // #ifndef MP-ALIPAY
+    default: -1
+    // #endif
+  },
+  /**
+   * 原生属性，禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 微信小程序原生属性，强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   */
+  alwaysEmbed: makeBooleanProp(false),
+  // 原生属性结束
+  /**
+   * 输入框的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 绑定值
+   */
+  modelValue: makeNumericProp(''),
+  /**
+   * 显示为密码框
+   */
+  showPassword: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 前置图标，icon组件中的图标类名
+   */
+  prefixIcon: String,
+  /**
+   * 后置图标，icon组件中的图标类名
+   */
+  suffixIcon: String,
+  /**
+   * 显示字数限制，需要同时设置 maxlength
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置输入框错误状态，错误状态时为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   * 类型: "focus" | "always"
+   * 默认值: "always"
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   */
+  focusWhenClear: makeBooleanProp(true),
+  /**
+   * 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
+   * 类型: boolean
+   * 默认值: true
+   */
+  ignoreCompositionEvent: makeBooleanProp(true),
+  /**
+   * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。
+   * 类型: InputMode
+   * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password"
+   * 默认值: "text"
+   */
+  inputmode: makeStringProp<InputMode>('text'),
+  /**
+   * 支付宝小程序，可以在 input / textarea 组件中加上 enableNative="{{false}}"，避免 textarea 弹出键盘后出现内容上移
+   * 仅支付宝小程序支持
+   * 类型: boolean
+   * 默认值: true
+   */
+  enableNative: makeBooleanProp(true),
+  /**
+   * 紧凑模式，移除内边距和背景色，在结合 cell 或 form-item 使用时建议开启
+   * 类型: boolean
+   * 默认值: -
+   */
+  compact: makeBooleanProp(void 0)
+}
+
+export type InputProps = ExtractPropTypes<typeof inputProps>