@tplc/wot 0.0.1

package/components/wd-overlay/wd-overlay.vue

@@ -0,0 +1,46 @@
+<template>
+  <wd-transition
+    :show="show"
+    name="fade"
+    custom-class="wd-overlay"
+    :duration="duration"
+    :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    @click="handleClick"
+    @touchmove.stop.prevent="lockScroll ? noop : ''"
+  >
+    <slot></slot>
+  </wd-transition>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-overlay',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import useLockScroll from '../composables/useLockScroll'
+import { overlayProps } from './types'
+
+const props = defineProps(overlayProps)
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+  emit('click')
+}
+
+function noop() {}
+
+// #ifdef H5
+useLockScroll(() => props.show && props.lockScroll)
+// #endif
+</script>
+
+<style lang="scss">
+@import './index';
+</style>

package/components/wd-pagination/index.scss

@@ -0,0 +1,57 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(pager) {
+    background-color: $-dark-background;
+    @include e(message) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(pager) {
+  user-select: none;
+  background-color: #fff;
+
+  @include edeep(icon) {
+    font-size: $-pagination-icon-size;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: $-pagination-content-padding;
+  }
+  @include e(message) {
+    padding: $-pagination-message-padding;
+    font-size: $-pagination-message-fs;
+    color: $-pagination-message-color;
+    text-align: center;
+  }
+  @include edeep(nav) {
+    min-width: $-pagination-nav-width;
+    @include m(active) {
+      color: rgba(0, 0, 0, 0.65);
+    }
+    @include m(disabled) {
+      color: rgba(0, 0, 0, 0.15);
+    }
+  }
+  @include e(size) {
+    flex: 1;
+    font-size: $-pagination-nav-content-fs;
+    text-align: center;
+  }
+  @include e(separator) {
+    padding: $-pagination-nav-sepatator-padding;
+  }
+  @include edeep(left) {
+    display: inline-block;
+    transform: rotate(180deg) translateY(1px);
+  }
+  @include e(current) {
+    color: $-pagination-nav-current-color;
+  }
+}

package/components/wd-pagination/types.ts

@@ -0,0 +1,41 @@
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+
+export const paginationProps = {
+  ...baseProps,
+  /**
+   * 当前页
+   */
+  modelValue: makeRequiredProp(Number),
+  /**
+   * 总页数，如果有total，则优先使用total计算页数
+   */
+  totalPage: makeNumberProp(1),
+  /**
+   * 是否展示分页为Icon图标
+   */
+  showIcon: makeBooleanProp(false),
+  /**
+   * 是否展示总条数
+   */
+  showMessage: makeBooleanProp(false),
+  /**
+   * 总条数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 每页条数
+   */
+  pageSize: makeNumberProp(10),
+  /**
+   * 上一页文本
+   */
+  prevText: String,
+  /**
+   * 下一页文本
+   */
+  nextText: String,
+  /**
+   * 总页数只有一页时是否隐藏
+   */
+  hideIfOnePage: makeBooleanProp(true),
+}

package/components/wd-pagination/wd-pagination.vue

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :class="`wd-pager ${customClass}`"
+    :style="customStyle"
+    v-if="!(hideIfOnePage && totalPageNum === 1)"
+  >
+    <view class="wd-pager__content">
+      <wd-button
+        :plain="modelValue > 1"
+        type="info"
+        size="small"
+        :disabled="modelValue <= 1"
+        custom-class="wd-pager__nav"
+        @click="sub"
+      >
+        <text v-if="!showIcon">{{ prevText || translate('prev') }}</text>
+        <wd-icon
+          v-else
+          :custom-class="`wd-pager__left wd-pager__icon ${modelValue <= 1 ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
+          name="arrow-right"
+        ></wd-icon>
+      </wd-button>
+      <view class="wd-pager__size">
+        <text class="wd-pager__current">{{ modelValue }}</text>
+        <text class="wd-pager__separator">/</text>
+        <text>{{ totalPageNum }}</text>
+      </view>
+      <wd-button
+        :plain="modelValue < totalPageNum"
+        type="info"
+        size="small"
+        :disabled="modelValue >= totalPageNum"
+        custom-class="wd-pager__nav"
+        @click="add"
+      >
+        <text v-if="!showIcon">{{ nextText || translate('next') }}</text>
+        <wd-icon
+          v-else
+          :custom-class="`wd-pager__icon ${modelValue >= totalPageNum ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
+          name="arrow-right"
+        ></wd-icon>
+      </wd-button>
+    </view>
+    <view class="wd-pager__message" v-if="showMessage">
+      <text>{{ translate('page', modelValue) }}，</text>
+      <text v-if="total">{{ translate('total', total) }}，</text>
+      <text>{{ translate('size', pageSize) }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-pagination',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { paginationProps } from './types'
+
+const { translate } = useTranslate('pagination')
+
+const props = defineProps(paginationProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const totalPageNum = ref<number>(0) // 总页数
+
+watch(
+  () => props.totalPage,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = newValue
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage()
+  },
+  { immediate: true, deep: true },
+)
+
+function add() {
+  const { modelValue } = props
+  if (modelValue > totalPageNum.value - 1) {
+    return
+  }
+  emit('change', { value: modelValue + 1 })
+  emit('update:modelValue', modelValue + 1)
+}
+
+function sub() {
+  const { modelValue } = props
+  if (modelValue < 2) {
+    return
+  }
+  emit('change', { value: modelValue - 1 })
+  emit('update:modelValue', modelValue - 1)
+}
+
+function updateTotalPage() {
+  const { total, pageSize } = props
+  if (total) {
+    totalPageNum.value = Math.ceil(total / pageSize)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-password-input/index.scss

@@ -0,0 +1,123 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(password-input) {
+    @include e(item) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      @include when(border) {
+        border-color: $-dark-border-color;
+      }
+    }
+
+    @include e(mask) {
+      background-color: $-dark-color;
+    }
+
+    @include e(cursor) {
+      background-color: $-dark-color;
+    }
+
+    @include e(info) {
+      color: $-dark-color;
+
+      @include when(border) {
+        color: $-dark-color2;
+      }
+    }
+  }
+}
+
+@include b(password-input) {
+  position: relative;
+  margin: 0 $-password-input-margin;
+  user-select: none;
+
+  @include e(security) {
+    display: flex;
+    width: 100%;
+    height: $-password-input-height;
+    cursor: pointer;
+  }
+
+  @include e(item) {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: $-password-input-font-size;
+    line-height: 1.2;
+    color: $-password-input-text-color;
+    background: $-password-input-background;
+
+    @include when(border) {
+      border: 1px solid $-password-input-border-color;
+
+      &:not(:last-child) {
+        border-right: none;
+      }
+
+      &:first-child {
+        border-top-left-radius: $-password-input-radius;
+        border-bottom-left-radius: $-password-input-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $-password-input-radius;
+        border-bottom-right-radius: $-password-input-radius;
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $-password-input-dot-size;
+    height: $-password-input-dot-size;
+    visibility: hidden;
+    background: $-password-input-dot-color;
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  @include e(cursor) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $-password-input-cursor-width;
+    height: $-password-input-cursor-height;
+    background: $-password-input-cursor-color;
+    transform: translate(-50%, -50%);
+    animation: $-password-input-cursor-duration cursor-flicker infinite;
+  }
+
+  @include e(info) {
+    margin-top: $-password-input-margin;
+    font-size: $-password-input-info-font-size;
+    color: $-password-input-info-color;
+    text-align: center;
+
+    @include when(error) {
+      color: $-password-input-error-info-color;
+    }
+  }
+}
+
+@keyframes cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/components/wd-password-input/types.ts

@@ -0,0 +1,48 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-03-18 15:12:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-password-input\types.ts
+ * 记得注释
+ */
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+
+export const passwordInputProps = {
+  ...baseProps,
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 是否隐藏密码内容
+   */
+  mask: makeBooleanProp(true),
+  /**
+   * 输入框下方文字提示
+   */
+  info: makeStringProp(''),
+  /**
+   * 输入框下方错误提示
+   */
+  errorInfo: makeStringProp(''),
+  /**
+   * 输入框格子之间的间距，如 20px 2em，默认单位为 px
+   */
+  gutter: makeNumericProp(0),
+  /**
+   * 密码最大长度
+   */
+  length: makeNumberProp(6),
+  /**
+   * 是否已聚焦，聚焦时会显示光标
+   */
+  focused: makeBooleanProp(true),
+}

package/components/wd-password-input/wd-password-input.vue

@@ -0,0 +1,58 @@
+<template>
+  <view :class="`wd-password-input ${customClass}`" :style="customStyle">
+    <view @touchstart="onTouchStart" class="wd-password-input__security">
+      <view
+        v-for="(_, index) in length"
+        :key="index"
+        :class="`wd-password-input__item ${gutter ? '' : 'is-border'}`"
+        :style="{ marginLeft: index !== 0 && gutter ? addUnit(gutter) : 0 }"
+      >
+        <view
+          v-if="focused && index === modelValue.length"
+          class="wd-password-input__cursor"
+        ></view>
+        <view v-else :class="`wd-password-input__value`">
+          <view
+            :style="{ visibility: mask && modelValue[index] ? 'visible' : 'hidden' }"
+            class="wd-password-input__mask"
+          ></view>
+          <text v-if="!mask && modelValue[index]">{{ modelValue[index] }}</text>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="info || errorInfo"
+      :class="`wd-password-input__info ${errorInfo ? 'is-error' : ''}`"
+    >
+      {{ errorInfo || info }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-password-input',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { addUnit } from '../common/util'
+import { passwordInputProps } from './types'
+
+defineProps(passwordInputProps)
+
+const emit = defineEmits(['focus'])
+
+function onTouchStart(event: Event) {
+  emit('focus', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-picker/index.scss

@@ -0,0 +1,216 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(picker) {
+    @include when(border) {
+      .wd-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include e(value) {
+      color: $-dark-color;
+    }
+
+    @include e(placeholder) {
+      color: $-dark-color-gray;
+    }
+
+    :deep(.wd-picker__arrow) {
+      color: $-dark-color;
+    }
+
+    @include e(cell) {
+      color: $-dark-color;
+      background-color: $-dark-background2;
+      @include when(disabled) {
+        .wd-picker__value {
+          color: $-dark-color3;
+        }
+        .wd-picker__placeholder {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+
+    @include when(disabled) {
+      .wd-picker__value {
+        color: $-dark-color3;
+      }
+
+      .wd-picker__placeholder {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(action) {
+      @include m(cancel) {
+        color: $-dark-color;
+      }
+      @include when(loading) {
+        color: $-dark-color3;
+      }
+    }
+  }
+}
+
+@include b(picker) {
+  @include edeep(popup) {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  @include when(border) {
+    .wd-picker__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+  @include when(large) {
+    .wd-picker__cell {
+      font-size: $-cell-title-fs-large;
+    }
+    :deep(.wd-picker__arrow) {
+      font-size: $-cell-icon-size-large;
+    }
+  }
+  @include when(error) {
+    .wd-picker__value,
+    :deep(.wd-picker__arrow) {
+      color: $-input-error-color;
+    }
+  }
+  @include when(align-right) {
+    .wd-picker__value {
+      text-align: right;
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    overflow: hidden;
+    font-size: $-cell-title-fs;
+    line-height: $-cell-line-height;
+    color: $-cell-title-color;
+    text-decoration: none;
+    background-color: $-color-white;
+
+    @include when(disabled) {
+      .wd-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-picker__value {
+      color: $-picker-column-disabled-color;
+    }
+  }
+
+  @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 e(label) {
+    position: relative;
+    box-sizing: border-box;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    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(value-wraper) {
+    display: flex;
+  }
+
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    line-height: $-cell-line-height;
+    color: $-cell-arrow-color;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
+  }
+
+  @include e(toolbar) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: $-picker-toolbar-height;
+    font-size: $-picker-toolbar-fs;
+    line-height: $-picker-action-height;
+  }
+
+  @include e(action) {
+    display: block;
+    padding: 24px 15px 14px 15px;
+    font-size: $-picker-toolbar-fs;
+    color: $-picker-toolbar-finish-color;
+    background: transparent;
+    border: none;
+    outline: none;
+
+    @include m(cancel) {
+      color: $-picker-toolbar-cancel-color;
+    }
+
+    @include when(loading) {
+      color: $-picker-loading-button-color;
+    }
+  }
+  @include e(title) {
+    display: block;
+    padding-top: 10px;
+    font-weight: $-action-sheet-weight;
+    color: $-picker-toolbar-title-color;
+  }
+}