@tplc/wot 0.0.1

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

@@ -0,0 +1,221 @@
+<template>
+  <view
+    :class="`wd-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`"
+    :style="customStyle"
+  >
+    <view
+      :class="`wd-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
+      @click="sub"
+    >
+      <wd-icon name="decrease" custom-class="wd-input-number__action-icon"></wd-icon>
+    </view>
+    <view v-if="!withoutInput" class="wd-input-number__inner" @click.stop="">
+      <input
+        class="wd-input-number__input"
+        :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
+        type="digit"
+        :disabled="disabled || disableInput"
+        v-model="inputValue"
+        :placeholder="placeholder"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <view class="wd-input-number__input-border"></view>
+    </view>
+    <view
+      :class="`wd-input-number__action ${maxDisabled || disablePlus ? 'is-disabled' : ''}`"
+      @click="add"
+    >
+      <wd-icon name="add" custom-class="wd-input-number__action-icon"></wd-icon>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input-number',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { debounce, isDef, isEqual } from '../common/util'
+import { inputNumberProps } from './types'
+
+const props = defineProps(inputNumberProps)
+const emit = defineEmits(['focus', 'blur', 'change', 'update:modelValue'])
+
+const minDisabled = ref<boolean>(false)
+const maxDisabled = ref<boolean>(false)
+const inputValue = ref<string | number>('') // 输入框的值
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = newValue
+    splitDisabled(newValue)
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  [() => props.max, () => props.min],
+  () => {
+    updateBoundary()
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => props.disabled,
+  (newValue) => {
+    minDisabled.value = newValue
+    maxDisabled.value = newValue
+  },
+  { immediate: true, deep: true },
+)
+
+function updateBoundary() {
+  debounce(() => {
+    const value = formatValue(inputValue.value)
+    if (!isEqual(inputValue.value, value)) {
+      setValue(value)
+    }
+    splitDisabled(value)
+  }, 30)()
+}
+
+function splitDisabled(value: number | string) {
+  const { disabled, min, max, step } = props
+  minDisabled.value = disabled || Number(value) <= min || changeStep(value, -step) < min
+  maxDisabled.value = disabled || Number(value) >= max || changeStep(value, step) > max
+}
+
+function toPrecision(value: number) {
+  return Number(
+    parseFloat(
+      `${Math.round(value * Math.pow(10, props.precision)) / Math.pow(10, props.precision)}`,
+    ).toFixed(props.precision),
+  )
+}
+
+function getPrecision(value?: number) {
+  if (value === undefined) return 0
+  const valueString = value.toString()
+  const dotPosition = valueString.indexOf('.')
+  let precision = 0
+  if (dotPosition !== -1) {
+    precision = valueString.length - dotPosition - 1
+  }
+  return precision
+}
+
+function toStrictlyStep(value: number | string) {
+  const stepPrecision = getPrecision(props.step)
+  const precisionFactory = Math.pow(10, stepPrecision)
+  return (Math.round(Number(value) / props.step) * precisionFactory * props.step) / precisionFactory
+}
+
+function setValue(value: string | number, change: boolean = true) {
+  if (props.allowNull && (!isDef(value) || value === '')) {
+    dispatchChangeEvent(value, change)
+    return
+  }
+
+  if (props.stepStrictly) {
+    value = toStrictlyStep(value)
+  }
+  if ((value || value === 0) && props.precision !== undefined) {
+    value = toPrecision(Number(value))
+  }
+  if (Number(value) > props.max) value = toPrecision(props.max)
+  if (Number(value) < props.min) value = toPrecision(props.min)
+
+  dispatchChangeEvent(value, change)
+}
+
+function changeStep(val: string | number, step: number) {
+  val = Number(val)
+
+  if (isNaN(val)) {
+    return props.min
+  }
+
+  const precisionFactory = Math.pow(10, props.precision)
+  return toPrecision((val * precisionFactory + step * precisionFactory) / precisionFactory)
+}
+
+function sub() {
+  if (minDisabled.value || props.disableMinus) return
+
+  const newValue = changeStep(inputValue.value, -props.step)
+  dispatchChangeEvent(newValue)
+}
+
+function add() {
+  if (maxDisabled.value || props.disablePlus) return
+
+  const newValue = changeStep(inputValue.value, props.step)
+  dispatchChangeEvent(newValue)
+}
+
+function handleInput(event: any) {
+  const value = event.detail.value || ''
+  dispatchChangeEvent(value)
+}
+
+function handleFocus(event: any) {
+  emit('focus', event.detail)
+}
+
+function handleBlur() {
+  const value = formatValue(inputValue.value)
+  if (!isEqual(inputValue.value, value)) {
+    setValue(value)
+  }
+  emit('blur', {
+    value,
+  })
+}
+
+function dispatchChangeEvent(value: string | number, change: boolean = true) {
+  if (isEqual(inputValue.value, value)) {
+    return
+  }
+  inputValue.value = value
+  change && emit('update:modelValue', inputValue.value)
+  change && emit('change', { value })
+}
+
+function formatValue(value: string | number) {
+  if (props.allowNull && (!isDef(value) || value === '')) {
+    return ''
+  }
+
+  value = Number(value)
+
+  if (isNaN(value)) {
+    value = props.min
+  }
+
+  if (props.stepStrictly) {
+    value = toStrictlyStep(value)
+  }
+
+  if (props.precision !== undefined) {
+    value = value.toFixed(props.precision)
+  }
+
+  return Number(value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-loading/index.scss

@@ -0,0 +1,34 @@
+@import '../common/abstracts/_mixin';
+@import '../common/abstracts/variable';
+
+@include b(loading) {
+  display: inline-block;
+  width: $-loading-size;
+  height: $-loading-size;
+  font-size: 0;
+  line-height: 0;
+  vertical-align: middle;
+
+  @include e(body) {
+    width: 100%;
+    height: 100%;
+    animation: wd-rotate 0.8s linear infinite;
+    animation-duration: 2s;
+  }
+  @include e(svg) {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/wd-loading/types.ts

@@ -0,0 +1,31 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-07-18 22:09:12
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumericProp, makeStringProp } from '../common/props'
+
+export type LoadingType = 'outline' | 'ring' // 提示信息加载状态类型
+
+export const loadingProps = {
+  ...baseProps,
+  /**
+   * 加载指示器类型，可选值：'outline' | 'ring'
+   */
+  type: makeStringProp<LoadingType>('ring'),
+  /**
+   * 设置加载指示器颜色
+   */
+  color: makeStringProp('#4D80F0'),
+  /**
+   * 设置加载指示器大小
+   */
+  size: makeNumericProp(''),
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>

package/components/wd-loading/wd-loading.vue

@@ -0,0 +1,90 @@
+<template>
+  <view :class="`wd-loading ${props.customClass}`" :style="rootStyle">
+    <view class="wd-loading__body">
+      <view class="wd-loading__svg" :style="`background-image: url(${svg});`"></view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-loading',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import base64 from '../common/base64'
+import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
+import { loadingProps } from './types'
+
+const svgDefineId = context.id++
+const svgDefineId1 = context.id++
+const svgDefineId2 = context.id++
+
+const icon = {
+  outline(color = '#4D80F0') {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="${svgDefineId}"><stop stop-color="#FFF" offset="0%" stop-opacity="0"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${color}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#${svgDefineId}) " stroke-width="3.5" stroke-linecap="round"/></g></svg>`
+  },
+  ring(color = '#4D80F0', intermediateColor = '#a6bff7') {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="${svgDefineId1}" gradientUnits="userSpaceOnUse" x1="50" x2="50" y2="180"><stop offset="0" stop-color="${color}"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId1})" d="M20 100c0-44.1 35.9-80 80-80V0C44.8 0 0 44.8 0 100s44.8 100 100 100v-20c-44.1 0-80-35.9-80-80z"></path> <linearGradient id="${svgDefineId2}" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"><stop offset="0" stop-color="#fff" stop-opacity="0"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId2})" d="M100 0v20c44.1 0 80 35.9 80 80s-35.9 80-80 80v20c55.2 0 100-44.8 100-100S155.2 0 100 0z"></path> <circle cx="100" cy="10" r="10" fill="${color}"></circle></svg>`
+  },
+}
+
+const props = defineProps(loadingProps)
+
+const svg = ref<string>('')
+const intermediateColor = ref<string>('')
+const iconSize = ref<string | number | null>(null)
+
+watch(
+  () => props.size,
+  (newVal) => {
+    iconSize.value = addUnit(newVal)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.type,
+  () => {
+    buildSvg()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(iconSize.value)) {
+    style.height = addUnit(iconSize.value)
+    style.width = addUnit(iconSize.value)
+  }
+  return `${objToStyle(style)}; ${props.customStyle}`
+})
+
+onBeforeMount(() => {
+  intermediateColor.value = gradient(props.color, '#ffffff', 2)[1]
+  buildSvg()
+})
+
+function buildSvg() {
+  const { type, color } = props
+  const ringType: 'outline' | 'ring' = isDef(type) ? type : 'ring'
+  const svgStr = `"data:image/svg+xml;base64,${base64(ringType === 'ring' ? icon[ringType](color, intermediateColor.value) : icon[ringType](color))}"`
+  svg.value = svgStr
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-loadmore/index.scss

@@ -0,0 +1,39 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+.wot-theme-dark {
+  @include b(loadmore) {
+    color: $-dark-color;
+  }
+}
+
+@include b(loadmore) {
+  width: 100%;
+  height: $-loadmore-height;
+  line-height: $-loadmore-height;
+  color: $-loadmore-color;
+  text-align: center;
+
+  @include edeep(loading) {
+    display: inline-block;
+    width: $-loadmore-loading-size;
+    height: $-loadmore-loading-size;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  @include e(text) {
+    display: inline-block;
+    font-size: $-loadmore-fs;
+    vertical-align: middle;
+
+    @include when(light) {
+      margin: 0 6px;
+      color: $-loadmore-error-color;
+    }
+  }
+  @include edeep(refresh) {
+    display: inline-block;
+    font-size: $-loadmore-refresh-fs;
+    color: $-loadmore-error-color;
+    vertical-align: middle;
+  }
+}

package/components/wd-loadmore/types.ts

@@ -0,0 +1,24 @@
+import type { PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type LoadMoreState = 'loading' | 'error' | 'finished'
+
+export const loadmoreProps = {
+  ...baseProps,
+  /**
+   * 加载状态，可选值：'loading' | 'error' | 'finished'
+   */
+  state: String as PropType<LoadMoreState>,
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: makeStringProp('加载失败，点击重试'),
+}

package/components/wd-loadmore/wd-loadmore.vue

@@ -0,0 +1,53 @@
+<template>
+  <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
+    <wd-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</wd-divider>
+    <block v-if="state === 'error'">
+      <block v-if="errorText">
+        {{ errorText }}
+      </block>
+      <block v-else>
+        <text class="wd-loadmore__text">{{ translate('error') }}</text>
+        <text class="wd-loadmore__text is-light">{{ translate('retry') }}</text>
+        <wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
+      </block>
+    </block>
+    <block v-if="state === 'loading'">
+      <wd-loading custom-class="wd-loadmore__loading" />
+      <text class="wd-loadmore__text">{{ loadingText || translate('loading') }}</text>
+    </block>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-loadmore',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { loadmoreProps, type LoadMoreState } from './types'
+
+const props = defineProps(loadmoreProps)
+const emit = defineEmits(['reload'])
+
+const { translate } = useTranslate('loadmore')
+
+const currentState = ref<LoadMoreState | null>(null)
+
+function reload() {
+  if (props.state !== 'error') return
+  currentState.value = 'loading'
+  emit('reload')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-message-box/index.scss

@@ -0,0 +1,121 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+.wot-theme-dark {
+  @include b(message-box) {
+    @include e(body) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(content) {
+      color: $-dark-color3;
+
+      &::-webkit-scrollbar-thumb {
+        background: $-dark-border-color;
+      }
+    }
+  }
+}
+
+:deep(.wd-message-box) {
+  overflow: hidden;
+  border-radius: $-message-box-radius;
+}
+
+@include b(message-box) {
+  overflow: hidden;
+  border-radius: $-message-box-radius;
+
+  @include e(container) {
+    box-sizing: border-box;
+    width: $-message-box-width;
+  }
+
+  @include e(body) {
+    padding: $-message-box-padding;
+    background-color: $-message-box-bg;
+
+    @include when(no-title) {
+      padding: 25px 24px 0px;
+    }
+  }
+
+  @include e(title) {
+    padding-top: 5px;
+    padding-bottom: 10px;
+    font-size: $-message-box-title-fs;
+    font-weight: 500;
+    line-height: 20px;
+    color: $-message-box-title-color;
+    text-align: center;
+  }
+
+  @include e(content) {
+    max-height: $-message-box-content-max-height;
+    overflow: auto;
+    font-size: $-message-box-content-fs;
+    line-height: 20px;
+    color: $-message-box-content-color;
+    text-align: center;
+
+    &::-webkit-scrollbar {
+      width: $-message-box-content-scrollbar-width;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: $-message-box-content-scrollbar-width;
+      background: $-message-box-content-scrollbar-color;
+      border-radius: calc($-message-box-content-scrollbar-width / 2);
+    }
+  }
+
+  @include e(input-error) {
+    min-height: 18px;
+    margin-top: 2px;
+    color: $-message-box-input-error-color;
+    text-align: left;
+
+    @include when(hidden) {
+      visibility: hidden;
+    }
+  }
+
+  @include e(actions) {
+    padding: 24px;
+  }
+
+  @include e(flex) {
+    display: flex;
+  }
+
+  @include e(block) {
+    display: block;
+  }
+
+  @include e(cancel) {
+    margin-right: 16px;
+  }
+}
+
+.zoomIn-enter-active,
+.zoomIn-leave-active {
+  opacity: 1;
+  transition: all 0.2s;
+  transform: translate3d(-50%, -50%, 0) scale(1);
+}
+
+.zoomIn-enter {
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  transform: translate3d(-50%, -50%, 0) scale(0.7);
+}
+
+.zoomIn-leave-to {
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  transform: translate3d(-50%, -50%, 0) scale(0.9);
+}