oxy-uni-ui 1.0.1

package/components/oxy-input/oxy-input.vue

@@ -0,0 +1,300 @@
+<template>
+  <view :class="rootClass" :style="customStyle" @click="handleClick">
+    <view v-if="label || $slots.label" :class="labelClass" :style="labelStyle">
+      <text v-if="isRequired && markerSide === 'before'" class="oxy-input__required oxy-input__required--left">*</text>
+      <view v-if="prefixIcon || $slots.prefix" class="oxy-input__prefix">
+        <oxy-icon v-if="prefixIcon && !$slots.prefix" custom-class="oxy-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+        <slot v-else name="prefix"></slot>
+      </view>
+      <view class="oxy-input__label-inner">
+        <text v-if="label && !$slots.label">{{ label }}</text>
+        <slot v-else-if="$slots.label" name="label"></slot>
+      </view>
+      <text v-if="isRequired && markerSide === 'after'" class="oxy-input__required">*</text>
+    </view>
+    <view class="oxy-input__body">
+      <view class="oxy-input__value">
+        <view v-if="(prefixIcon || $slots.prefix) && !label" class="oxy-input__prefix">
+          <oxy-icon v-if="prefixIcon && !$slots.prefix" custom-class="oxy-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+          <slot v-else name="prefix"></slot>
+        </view>
+        <input
+          :class="[
+            'oxy-input__inner',
+            prefixIcon ? 'oxy-input__inner--prefix' : '',
+            showWordCount ? 'oxy-input__inner--count' : '',
+            alignRight ? 'is-align-right' : '',
+            customInputClass
+          ]"
+          :type="type"
+          :password="showPassword && !isPOxyVisible"
+          v-model="inputValue"
+          :placeholder="placeholderValue"
+          :disabled="disabled || readonly"
+          :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"
+          :ignoreCompositionEvent="ignoreCompositionEvent"
+          :inputmode="inputmode"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
+          @keyboardheightchange="handleKeyboardheightchange"
+        />
+        <view v-if="props.readonly" class="oxy-input__readonly-mask" />
+        <view v-if="showClear || showPassword || suffixIcon || showWordCount || $slots.suffix" class="oxy-input__suffix">
+          <oxy-icon v-if="showClear" custom-class="oxy-input__clear" name="error-fill" @click="handleClear" />
+          <oxy-icon v-if="showPassword" custom-class="oxy-input__icon" :name="isPOxyVisible ? 'view' : 'eye-close'" @click="togglePOxyVisible" />
+          <view v-if="showWordCount" class="oxy-input__count">
+            <text
+              :class="[
+              inputValue && String(inputValue).length > 0 ? 'oxy-input__count-current' : '',
+              String(inputValue).length > maxlength! ? 'is-error' : ''
+            ]"
+            >
+              {{ String(inputValue).length }}
+            </text>
+            /{{ maxlength }}
+          </view>
+          <oxy-icon v-if="suffixIcon && !$slots.suffix" custom-class="oxy-input__icon" :name="suffixIcon" @click="onClickSuffixIcon" />
+          <slot v-else name="suffix"></slot>
+        </view>
+      </view>
+      <view v-if="errorMessage" class="oxy-input__error-message">{{ errorMessage }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-input',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch, useSlots, type Slots } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { isDef, objToStyle, pause, isEqual } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../oxy-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { inputProps } from './types'
+
+interface InputSlots extends Slots {
+  prefix?: () => any
+  suffix?: () => any
+  label?: () => any
+}
+
+const props = defineProps(inputProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'clicksuffixicon',
+  'clickprefixicon',
+  'click'
+])
+const slots = useSlots() as InputSlots
+const { translate } = useTranslate('input')
+
+const isPOxyVisible = ref<boolean>(false)
+const clearing = ref<boolean>(false) // 是否正在清空操作，避免重复触发失焦
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string | number>(getInitValue()) // 输入框的值
+const cell = useCell()
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  }
+)
+
+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 `oxy-input  ${props.label || slots.label ? '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 `oxy-input__label ${props.customLabelClass}`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `oxy-input__placeholder  ${props.placeholderClass}`
+})
+
+const labelStyle = computed(() => {
+  return props.labelWidth
+    ? objToStyle({
+        'min-width': props.labelWidth,
+        'max-width': props.labelWidth
+      })
+    : ''
+})
+
+// 状态初始化
+function getInitValue() {
+  const formatted = formatValue(props.modelValue)
+  if (!isValueEqual(formatted, props.modelValue)) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
+}
+
+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 togglePOxyVisible() {
+  isPOxyVisible.value = !isPOxyVisible.value
+}
+async function handleClear() {
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    clearing.value = true
+    focused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  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)
+}
+function isValueEqual(value1: number | string, value2: number | string) {
+  return isEqual(String(value1), String(value2))
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
+<style lang="scss">
+@import './placeholder.scss';
+</style>

package/components/oxy-input/placeholder.scss

@@ -0,0 +1,21 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.oxy-theme-dark {
+  @include b(input) {
+    @include e(placeholder) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+
+@include b(input) {
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+
+    &.is-error {
+      color: $-input-error-color;
+    }
+  }
+}

package/components/oxy-input/types.ts

@@ -0,0 +1,189 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../oxy-form/types'
+
+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 InputSize = 'large'
+
+export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+
+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<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),
+  /**
+   * 设置左侧标题
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp(''),
+  /**
+   * 设置输入框大小，可选值：large
+   */
+  size: String as PropType<InputSize>,
+  /**
+   * 设置输入框错误状态，错误状态时为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 当有label属性时，设置标题和输入框垂直居中，默认为顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 非 cell 类型下是否隐藏下划线
+   */
+  noBorder: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合oxy-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，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'),
+  /**
+   * 必填标记位置，可选值：before（标签前）、after（标签后）
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
+}
+
+export type InputProps = ExtractPropTypes<typeof inputProps>

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

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