@tplc/wot 0.0.1

package/components/wd-action-sheet/index.scss

@@ -0,0 +1,204 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(action-sheet) {
+    color: $-dark-color;
+    background-color: $-dark-background2;
+
+    @include e(action) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      &:not(.wd-action-sheet__action--disabled):not(.wd-action-sheet__action--loading):active {
+        background: $-dark-background4;
+      }
+
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(subname) {
+      color: $-dark-color3;
+    }
+
+    @include e(cancel) {
+      color: $-dark-color;
+      background: $-dark-background4;
+
+      &:active {
+        background: $-dark-background5;
+      }
+    }
+
+    :deep(.wd-action-sheet__close) {
+      color: $-dark-color3;
+    }
+
+    @include e(panel-title) {
+      color: $-dark-color;
+    }
+
+    @include e(header) {
+      color: $-dark-color;
+    }
+  }
+}
+
+:deep(.wd-action-sheet__popup) {
+  border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+}
+
+@include b(action-sheet) {
+  padding-bottom: 1px;
+  background-color: $-color-white;
+
+  @include edeep(popup) {
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+  }
+
+  @include e(actions) {
+    max-height: 50vh;
+    padding: 8px 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(action) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: $-action-sheet-action-height;
+    font-size: $-action-sheet-fs;
+    line-height: $-action-sheet-action-height;
+    color: $-action-sheet-color;
+    text-align: center;
+    background: $-action-sheet-bg;
+    border: none;
+    outline: none;
+
+    &:after {
+      display: none;
+    }
+
+    &:not(&--disabled):not(&--loading):active {
+      background: $-action-sheet-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-action-sheet-disabled-color;
+      cursor: not-allowed;
+    }
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: initial;
+    }
+  }
+
+  @include edeep(action-loading) {
+    width: $-action-sheet-loading-size;
+    height: $-action-sheet-loading-size;
+  }
+
+  @include e(name) {
+    display: inline-block;
+  }
+
+  @include e(subname) {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: $-action-sheet-subname-fs;
+    color: $-action-sheet-subname-color;
+  }
+
+  @include e(cancel) {
+    display: block;
+    width: calc(100% - 48px);
+    padding: 0;
+    margin: 0 auto 24px;
+    font-size: $-action-sheet-fs;
+    font-weight: $-action-sheet-weight;
+    line-height: $-action-sheet-cancel-height;
+    color: $-action-sheet-cancel-color;
+    text-align: center;
+    background: $-action-sheet-cancel-bg;
+    border: none;
+    border-radius: $-action-sheet-cancel-radius;
+    outline: none;
+
+    &:active {
+      background: $-action-sheet-active-color;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    height: $-action-sheet-title-height;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+    line-height: $-action-sheet-title-height;
+    color: $-action-sheet-color;
+    text-align: center;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    font-size: $-action-sheet-close-fs;
+    line-height: 1.1;
+    color: $-action-sheet-close-color;
+    transform: rotate(-45deg);
+  }
+
+  @include e(panels) {
+    height: 84px;
+    overflow-y: hidden;
+
+    &:first-of-type {
+      margin-top: 20px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 12px;
+    }
+  }
+
+  @include e(panels-content) {
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 88px;
+    padding: $-action-sheet-panel-padding;
+  }
+
+  @include e(panel-img) {
+    display: block;
+    width: $-action-sheet-panel-img-fs;
+    height: $-action-sheet-panel-img-fs;
+    margin: 0 auto;
+    margin-bottom: 7px;
+    border-radius: $-action-sheet-panel-img-radius;
+  }
+
+  @include e(panel-title) {
+    font-size: $-action-sheet-subname-fs;
+    line-height: 1.2;
+    color: $-action-sheet-color;
+    text-align: center;
+    @include lineEllipsis;
+  }
+}

package/components/wd-action-sheet/types.ts

@@ -0,0 +1,128 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-04-04 22:35:25
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+
+export type Action = {
+  /**
+   * 选项名称
+   */
+  name: string
+  /**
+   * 描述信息
+   */
+  subname: string
+  /**
+   * 颜色
+   */
+  color: string
+  /**
+   * 禁用
+   */
+  disabled: boolean
+  /**
+   * 加载中状态
+   */
+  loading: boolean
+}
+
+export type Panel = {
+  /**
+   * 图片地址
+   */
+  iconUrl: string
+  /**
+   * 标题内容
+   */
+  title: string
+}
+
+export const actionSheetProps = {
+  ...baseProps,
+  /**
+   * header 头部样式
+   * @default ''
+   * @type {string}
+   */
+  customHeaderClass: makeStringProp(''),
+  /**
+   * 设置菜单显示隐藏
+   * @default false
+   * @type {boolean}
+   */
+  modelValue: { ...makeBooleanProp(false), ...makeRequiredProp(Boolean) },
+  /**
+   * 菜单选项
+   * @default []
+   * @type {Action[]}
+   */
+  actions: makeArrayProp<Action>(),
+  /**
+   * 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
+   * @default []
+   * @type {Array<Panel | Panel[]>}
+   */
+  panels: makeArrayProp<Panel | Panel[]>(),
+  /**
+   * 标题
+   * @type {string}
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * @type {string}
+   */
+  cancelText: String,
+  /**
+   * 点击选项后是否关闭菜单
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickAction: makeBooleanProp(true),
+  /**
+   * 点击遮罩是否关闭
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框动画持续时间
+   * @default 200
+   * @type {number}
+   */
+  duration: makeNumberProp(200),
+  /**
+   * 菜单层级
+   * @default 10
+   * @type {number}
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * @default true
+   * @type {boolean}
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * @default true
+   * @type {boolean}
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+}
+
+export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>

package/components/wd-action-sheet/wd-action-sheet.vue

@@ -0,0 +1,174 @@
+<template>
+  <view>
+    <wd-popup
+      custom-class="wd-action-sheet__popup"
+      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      v-model="showPopup"
+      :duration="duration"
+      position="bottom"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :lazy-render="lazyRender"
+      @enter="handleOpen"
+      @close="close"
+      @after-enter="handleOpened"
+      @after-leave="handleClosed"
+      @click-modal="handleClickModal"
+      :z-index="zIndex"
+    >
+      <view
+        :class="`wd-action-sheet ${customClass}`"
+        :style="`${
+          (actions && actions.length) || (panels && panels.length)
+            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
+            : 'margin-bottom: var(--window-bottom);'
+        } ${customStyle}`"
+      >
+        <view v-if="title" :class="`wd-action-sheet__header ${customHeaderClass}`">
+          {{ title }}
+          <wd-icon custom-class="wd-action-sheet__close" name="add" @click="close" />
+        </view>
+        <view class="wd-action-sheet__actions" v-if="actions && actions.length">
+          <button
+            v-for="(action, rowIndex) in actions"
+            :key="rowIndex"
+            :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''}  ${
+              action.loading ? 'wd-action-sheet__action--loading' : ''
+            }`"
+            :style="`color: ${action.color}`"
+            @click="select(rowIndex, 'action')"
+          >
+            <wd-loading custom-class="`wd-action-sheet__action-loading" v-if="action.loading" />
+            <view v-else class="wd-action-sheet__name">{{ action.name }}</view>
+            <view v-if="!action.loading && action.subname" class="wd-action-sheet__subname">
+              {{ action.subname }}
+            </view>
+          </button>
+        </view>
+        <view v-if="formatPanels && formatPanels.length">
+          <view
+            v-for="(panel, rowIndex) in formatPanels"
+            :key="rowIndex"
+            class="wd-action-sheet__panels"
+          >
+            <view class="wd-action-sheet__panels-content">
+              <view
+                v-for="(col, colIndex) in panel"
+                :key="colIndex"
+                class="wd-action-sheet__panel"
+                @click="select(rowIndex, 'panels', colIndex)"
+              >
+                <image class="wd-action-sheet__panel-img" :src="(col as any).iconUrl" />
+                <view class="wd-action-sheet__panel-title">{{ (col as any).title }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <slot />
+        <button v-if="cancelText" class="wd-action-sheet__cancel" @click="handleCancel">
+          {{ cancelText }}
+        </button>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-action-sheet',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { watch, ref } from 'vue'
+import { actionSheetProps, type Panel } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(actionSheetProps)
+const emit = defineEmits([
+  'select',
+  'click-modal',
+  'cancel',
+  'closed',
+  'close',
+  'open',
+  'opened',
+  'update:modelValue',
+])
+
+const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
+
+const showPopup = ref<boolean>(false)
+
+watch(() => props.panels, computedValue, { deep: true, immediate: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopup.value = newValue
+  },
+  { deep: true, immediate: true },
+)
+
+function isPanelArray() {
+  return props.panels.length && !isArray(props.panels[0])
+}
+function computedValue() {
+  formatPanels.value = isPanelArray() ? [props.panels as Panel[]] : (props.panels as Panel[][])
+}
+
+function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
+  if (type === 'action') {
+    if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
+      return
+    }
+    emit('select', {
+      item: props.actions[rowIndex],
+      index: rowIndex,
+    })
+  } else if (isPanelArray()) {
+    emit('select', {
+      item: props.panels[Number(colIndex)],
+      index: colIndex,
+    })
+  } else {
+    emit('select', {
+      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      rowIndex,
+      colIndex,
+    })
+  }
+  close()
+}
+function handleClickModal() {
+  emit('click-modal')
+  if (props.closeOnClickModal) {
+    close()
+  }
+}
+function handleCancel() {
+  emit('cancel')
+  close()
+}
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+function handleOpen() {
+  emit('open')
+}
+function handleOpened() {
+  emit('opened')
+}
+function handleClosed() {
+  emit('closed')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-backtop/index.scss

@@ -0,0 +1,25 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(backtop) {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: $-color-gray-8;
+  background-color: $-backtop-bg;
+
+  @include edeep(backicon) {
+    font-size: $-backtop-icon-size;
+  }
+
+  @include when(circle) {
+    border-radius: 50%;
+  }
+
+  @include when(square) {
+    border-radius: 4px;
+  }
+}

package/components/wd-backtop/types.ts

@@ -0,0 +1,37 @@
+import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const backtopProps = {
+  ...baseProps,
+  /**
+   * 页面滚动距离
+   */
+  scrollTop: makeRequiredProp(Number),
+  /**
+   * 距离顶部多少距离时显示
+   */
+  top: makeNumberProp(300),
+  /**
+   * 返回顶部滚动时间
+   */
+  duration: makeNumberProp(100),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * icon样式
+   */
+  iconStyle: makeStringProp(''),
+  /**
+   * 形状
+   */
+  shape: makeStringProp('circle'),
+  /**
+   * 距离屏幕底部距离
+   */
+  bottom: makeNumberProp(100),
+  /**
+   * 距离屏幕右边距离
+   */
+  right: makeNumberProp(20),
+}

package/components/wd-backtop/wd-backtop.vue

@@ -0,0 +1,48 @@
+<template>
+  <wd-transition :show="show" name="fade">
+    <view
+      :class="`wd-backtop ${customClass} is-${shape}`"
+      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
+      @click="handleBacktop"
+    >
+      <slot v-if="$slots.default"></slot>
+      <wd-icon
+        v-else
+        custom-class="wd-backtop__backicon"
+        name="backtop"
+        :custom-style="iconStyle"
+      />
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-backtop',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { backtopProps } from './types'
+
+const props = defineProps(backtopProps)
+
+const show = computed(() => props.scrollTop > props.top)
+
+function handleBacktop() {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: props.duration,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-badge/index.scss

@@ -0,0 +1,59 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(badge) {
+    @include e(content) {
+      border-color: $-dark-background2;
+    }
+  }
+}
+
+@include b(badge) {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+
+  @include e(content) {
+    display: inline-block;
+    height: $-badge-height;
+    padding: $-badge-padding;
+    font-size: $-badge-fs;
+    font-weight: 500;
+    line-height: $-badge-height;
+    color: $-badge-color;
+    text-align: center;
+    white-space: nowrap;
+    background-color: $-badge-bg;
+    border: $-badge-border;
+    border-radius: calc($-badge-height / 2 + 2px);
+
+    @include when(fixed) {
+      position: absolute;
+      transform: translateY(-50%) translateX(50%);
+    }
+
+    @include when(dot) {
+      width: $-badge-dot-size;
+      height: $-badge-dot-size;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $-badge-primary;
+        } @else if $type == success {
+          background-color: $-badge-success;
+        } @else if $type == warning {
+          background-color: $-badge-warning;
+        } @else if $type == info {
+          background-color: $-badge-info;
+        } @else {
+          background-color: $-badge-danger;
+        }
+      }
+    }
+  }
+}