@tplc/wot 0.0.1

package/components/wd-input/types.ts

@@ -0,0 +1,182 @@
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export type InputClearTrigger = 'focus' | 'always'
+
+export const inputProps = {
+  ...baseProps,
+  customInputClass: makeStringProp(''),
+  customLabelClass: 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('done'),
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   */
+  confirmHold: makeBooleanProp(false),
+  /**
+   * 原生属性，获取焦点
+   */
+  focus: makeBooleanProp(false),
+  /**
+   * 类型，可选值：text / number / digit / idcard
+   */
+  type: makeStringProp('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),
+  /**
+   * 使用 后置图标 插槽
+   */
+  useSuffixSlot: makeBooleanProp(false),
+  /**
+   * 使用 前置图标 插槽
+   */
+  usePrefixSlot: makeBooleanProp(false),
+  /**
+   * 前置图标，icon组件中的图标类名
+   */
+  prefixIcon: String,
+  /**
+   * 后置图标，icon组件中的图标类名
+   */
+  suffixIcon: String,
+  /**
+   * 显示字数限制，需要同时设置 maxlength
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置左侧标题
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用 label 插槽
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 设置输入框大小，可选值：large
+   */
+  size: String,
+  /**
+   * 设置输入框错误状态，错误状态时为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 当有label属性时，设置标题和输入框垂直居中，默认为顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 非 cell 类型下是否隐藏下划线
+   */
+  noBorder: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   * 类型: "focus" | "always"
+   * 默认值: "always"
+   * 最低版本: $LOWEST_VERSION$
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   * 最低版本: $LOWEST_VERSION$
+   */
+  focusWhenClear: makeBooleanProp(true),
+}

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

@@ -0,0 +1,327 @@
+<template>
+  <view :class="rootClass" :style="customStyle" @click="handleClick">
+    <view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
+      <view v-if="prefixIcon || usePrefixSlot" class="wd-input__prefix">
+        <wd-icon
+          v-if="prefixIcon && !usePrefixSlot"
+          custom-class="wd-input__icon"
+          :name="prefixIcon"
+          @click="onClickPrefixIcon"
+        />
+        <slot v-else name="prefix"></slot>
+      </view>
+      <view class="wd-input__label-inner">
+        <template v-if="label">{{ label }}</template>
+        <slot v-else name="label"></slot>
+      </view>
+    </view>
+    <view class="wd-input__body">
+      <view class="wd-input__value">
+        <view v-if="(prefixIcon || usePrefixSlot) && !label" class="wd-input__prefix">
+          <wd-icon
+            v-if="prefixIcon"
+            custom-class="wd-input__icon"
+            :name="prefixIcon"
+            @click="onClickPrefixIcon"
+          />
+          <slot name="prefix"></slot>
+        </view>
+        <input
+          :class="[
+            'wd-input__inner',
+            prefixIcon ? 'wd-input__inner--prefix' : '',
+            showWordCount ? 'wd-input__inner--count' : '',
+            alignRight ? 'is-align-right' : '',
+            customInputClass,
+          ]"
+          :type="type"
+          :password="showPassword && !isPwdVisible"
+          v-model="inputValue"
+          :placeholder="placeholderValue"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :focus="focused"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :cursor-spacing="cursorSpacing"
+          :placeholder-style="placeholderStyle"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :adjust-position="adjustPosition"
+          :hold-keyboard="holdKeyboard"
+          :always-embed="alwaysEmbed"
+          :placeholder-class="inputPlaceholderClass"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
+          @keyboardheightchange="handleKeyboardheightchange"
+        />
+        <view v-if="readonly" class="wd-input__readonly-mask" />
+        <view
+          v-if="showClear || showPassword || suffixIcon || showWordCount || $slots.suffix"
+          class="wd-input__suffix"
+        >
+          <wd-icon
+            v-if="showClear"
+            custom-class="wd-input__clear"
+            name="error-fill"
+            @click="handleClear"
+          />
+          <wd-icon
+            v-if="showPassword"
+            custom-class="wd-input__icon"
+            :name="isPwdVisible ? 'view' : 'eye-close'"
+            @click="togglePwdVisible"
+          />
+          <view v-if="showWordCount" class="wd-input__count">
+            <text
+              :class="[
+                inputValue && String(inputValue).length > 0 ? 'wd-input__count-current' : '',
+                String(inputValue).length > maxlength! ? 'is-error' : '',
+              ]"
+            >
+              {{ String(inputValue).length }}
+            </text>
+            /{{ maxlength }}
+          </view>
+          <wd-icon
+            v-if="suffixIcon"
+            custom-class="wd-input__icon"
+            :name="suffixIcon"
+            @click="onClickSuffixIcon"
+          />
+          <slot name="suffix"></slot>
+        </view>
+      </view>
+      <view v-if="errorMessage" class="wd-input__error-message">{{ errorMessage }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { isDef, objToStyle, pause, requestAnimationFrame } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { inputProps } from './types'
+
+const props = defineProps(inputProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'change',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'clicksuffixicon',
+  'clickprefixicon',
+  'click',
+])
+const { translate } = useTranslate('input')
+
+const isPwdVisible = ref<boolean>(false)
+const clearing = ref<boolean>(false) // 是否正在清空操作，避免重复触发失焦
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string | number>('') // 输入框的值
+const cell = useCell()
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  },
+  { immediate: true, deep: true },
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (
+    clearable &&
+    !readonly &&
+    !disabled &&
+    inputValue.value &&
+    (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))
+  ) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+/**
+ * 表单错误提示信息
+ */
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (
+        Object.prototype.hasOwnProperty.call(rules, key) &&
+        key === props.prop &&
+        Array.isArray(rules[key])
+      ) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+const rootClass = computed(() => {
+  return `wd-input  ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${
+    cell.border.value ? 'is-border' : ''
+  } ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''}  ${
+    inputValue.value && String(inputValue.value).length > 0 ? 'is-not-empty' : ''
+  }  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
+})
+
+const labelClass = computed(() => {
+  return `wd-input__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-input__placeholder  ${props.placeholderClass}`
+})
+
+const labelStyle = computed(() => {
+  return props.labelWidth
+    ? objToStyle({
+        'min-width': props.labelWidth,
+        'max-width': props.labelWidth,
+      })
+    : ''
+})
+
+onBeforeMount(() => {
+  initState()
+})
+
+// 状态初始化
+function initState() {
+  inputValue.value = formatValue(inputValue.value)
+  emit('update:modelValue', inputValue.value)
+}
+
+function formatValue(value: string | number) {
+  const { maxlength } = props
+  if (isDef(maxlength) && maxlength !== -1 && String(value).length > maxlength) {
+    return value.toString().slice(0, maxlength)
+  }
+  return value
+}
+
+function togglePwdVisible() {
+  isPwdVisible.value = !isPwdVisible.value
+}
+function handleClear() {
+  clearing.value = true
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    focused.value = false
+  }
+  requestAnimationFrame(() => {
+    if (props.focusWhenClear) {
+      focused.value = true
+      focusing.value = true
+    }
+    emit('change', {
+      value: '',
+    })
+    emit('update:modelValue', inputValue.value)
+    emit('clear')
+  })
+}
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value,
+  })
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function onClickSuffixIcon() {
+  emit('clicksuffixicon')
+}
+function onClickPrefixIcon() {
+  emit('clickprefixicon')
+}
+function handleClick(event: MouseEvent) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,132 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(input-number) {
+    @include e(action) {
+      color: $-dark-color;
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(input) {
+      color: $-dark-color;
+    }
+
+    @include when(disabled) {
+      .wd-input-number__input {
+        color: $-dark-color-gray;
+      }
+      .wd-input-number__sub,
+      .wd-input-number__add {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(input-number) {
+  display: inline-block;
+  line-height: 1.15;
+  user-select: none;
+
+  @include e(action) {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: $-input-number-btn-width;
+    height: $-input-number-height;
+    color: $-input-number-icon-color;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+
+    // 左右加减号的边框
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      content: '';
+      border: 1px solid $-input-number-border-color;
+      border-top-left-radius: calc($-input-number-radius * 2);
+      border-bottom-left-radius: calc($-input-number-radius * 2);
+      transform: scale(0.5);
+      transform-origin: left top;
+    }
+    &:last-child::after {
+      border-top-left-radius: 0;
+      border-top-right-radius: calc($-input-number-radius * 2);
+      border-bottom-right-radius: calc($-input-number-radius * 2);
+      border-bottom-left-radius: 0;
+    }
+    @include when(disabled) {
+      color: $-input-number-disabled-color;
+    }
+  }
+
+  @include e(inner) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  @include e(input) {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: block;
+    width: $-input-number-input-width;
+    height: $-input-number-height;
+    padding: 0 2px;
+    font-size: $-input-number-fs;
+    color: $-input-number-color;
+    text-align: center;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @include e(input-border) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: calc(200% - 2px);
+    border-top: 1px solid $-input-number-border-color;
+    border-bottom: 1px solid $-input-number-border-color;
+    transform: scaleY(0.5);
+    transform-origin: left top;
+  }
+
+  @include edeep(action-icon) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: inline-block;
+    width: $-input-number-icon-size;
+    height: $-input-number-icon-size;
+    font-size: $-input-number-icon-size;
+    transform: translate(-50%, -50%);
+  }
+
+  @include when(disabled) {
+    .wd-input-number__input {
+      z-index: inherit;
+      color: $-input-number-disabled-color;
+    }
+    .wd-input-number__sub,
+    .wd-input-number__add {
+      color: $-input-number-disabled-color;
+    }
+  }
+  @include when(without-input) {
+    .wd-input-number__action:last-child::after {
+      border-left: none;
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-03-18 14:58:47
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-input-number\types.ts
+ * 记得注释
+ */
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeRequiredProp,
+  makeStringProp,
+  numericProp,
+} from '../common/props'
+
+export const inputNumberProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeRequiredProp(numericProp),
+  /**
+   * 最小值
+   */
+  min: makeNumberProp(1),
+  /**
+   * 最大值
+   */
+  max: makeNumberProp(Number.MAX_SAFE_INTEGER),
+  /**
+   * 步进值
+   */
+  step: makeNumberProp(1),
+  /**
+   * 是否严格按照步进值递增或递减
+   */
+  stepStrictly: makeBooleanProp(false),
+  /**
+   * 数值精度
+   */
+  precision: makeNumberProp(0),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否禁用输入框
+   */
+  disableInput: makeBooleanProp(false),
+  /**
+   * 是否禁用减号按钮
+   */
+  disableMinus: makeBooleanProp(false),
+  /**
+   * 是否禁用加号按钮
+   */
+  disablePlus: makeBooleanProp(false),
+  /**
+   * 是否不显示输入框
+   */
+  withoutInput: makeBooleanProp(false),
+  /**
+   * 输入框宽度
+   */
+  inputWidth: makeNumericProp(36),
+  /**
+   * 是否允许为空
+   */
+  allowNull: makeBooleanProp(false),
+  /**
+   * 输入框占位符
+   */
+  placeholder: makeStringProp(''),
+}