oxy-uni-ui 1.0.1

package/components/oxy-textarea/types.ts

@@ -0,0 +1,288 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../oxy-form/types'
+import type { InputClearTrigger, InputMode } from '../oxy-input/types'
+
+export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export const textareaProps = {
+  ...baseProps,
+  /**
+   * * 自定义文本域容器class名称。
+   * 类型：string
+   */
+  customTextareaContainerClass: makeStringProp(''),
+
+  /**
+   * * 自定义文本域class名称。
+   * 类型：string
+   */
+  customTextareaClass: makeStringProp(''),
+
+  /**
+   * * 自定义标签class名称。
+   * 类型：string
+   */
+  customLabelClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * * 绑定值。
+   * 类型：string | number
+   */
+  modelValue: makeNumericProp(''),
+
+  /**
+   * * 占位文本。
+   * 类型：string
+   * 默认值：'请输入...'
+   */
+  placeholder: String,
+
+  /**
+   * 指定placeholder的样式。
+   * 类型：string
+   */
+  placeholderStyle: String,
+
+  /**
+   * * 指定placeholder的样式类。
+   * 类型：string
+   * 默认值：空字符串
+   */
+  placeholderClass: makeStringProp(''),
+
+  /**
+   * * 禁用输入框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * * 最大输入长度，设置为-1表示不限制最大长度。
+   * 类型：number
+   * 默认值：-1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * * 自动聚焦并拉起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoFocus: makeBooleanProp(false),
+
+  /**
+   * * 获取焦点。
+   * 类型：boolean
+   * 默认值：false
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * * 是否自动增高输入框高度，style.height属性在auto-height生效时不生效。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoHeight: makeBooleanProp(false),
+
+  /**
+   * * 如果textarea处于position:fixed区域，需要设置此属性为true。
+   * 类型：boolean
+   * 默认值：false
+   */
+  fixed: makeBooleanProp(false),
+
+  /**
+   * * 指定光标与键盘的距离，取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为实际距离。
+   * 类型：number
+   * 默认值：0
+   */
+  cursorSpacing: makeNumberProp(0),
+
+  /**
+   * * 指定focus时的光标位置。
+   * 类型：number
+   * 默认值：-1
+   */
+  cursor: makeNumberProp(-1),
+
+  /**
+   * * 设置键盘右下角按钮的文字。
+   * 类型：string
+   * 默认值：'done'
+   * 可选值有'done', 'go', 'next', 'search', 'send'
+   */
+  confirmType: String as PropType<ConfirmType>,
+
+  /**
+   * * 点击键盘右下角按钮时是否保持键盘不收起。
+   * 类型：boolean
+   * 默认值：false
+   */
+  confirmHold: makeBooleanProp(false),
+
+  /**
+   * * 是否显示键盘上方带有“完成”按钮那一栏。
+   * 类型：boolean
+   * 默认值：true
+   */
+  showConfirmBar: makeBooleanProp(true),
+
+  /**
+   * * 光标起始位置，自动聚集时有效，需与selection-end搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionStart: makeNumberProp(-1),
+
+  /**
+   * * 光标结束位置，自动聚集时有效，需与selection-start搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionEnd: makeNumberProp(-1),
+
+  /**
+   * * 键盘弹起时是否自动上推页面。
+   * 类型：boolean
+   * 默认值：true
+   */
+  adjustPosition: makeBooleanProp(true),
+
+  /**
+   * * 是否去掉iOS下的默认内边距。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disableDefaultPadding: makeBooleanProp(false),
+
+  /**
+   * * focus状态下点击页面时是否不收起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  holdKeyboard: makeBooleanProp(false),
+
+  // 非原生属性
+  /**
+   * * 显示为密码框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showPassword: makeBooleanProp(false),
+
+  /**
+   * * 是否显示清空按钮。
+   * 类型：boolean
+   * 默认值：false
+   */
+  clearable: makeBooleanProp(false),
+
+  /**
+   * * 输入框只读状态。
+   * 类型：boolean
+   * 默认值：false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * * 前置图标，icon组件中的图标类名。
+   * 类型：string
+   */
+  prefixIcon: String,
+  /**
+   * * 是否显示字数限制，需要同时设置maxlength。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置左侧标题。
+   * 类型：string
+   */
+  label: String,
+
+  /**
+   * 设置左侧标题宽度。
+   * 类型：string
+   */
+  labelWidth: makeStringProp(''),
+  /**
+   * * 设置输入框大小。
+   * 类型：string
+   */
+  size: String,
+
+  /**
+   * * 设置输入框错误状态（红色）。
+   * 类型：boolean
+   * 默认值：false
+   */
+  error: makeBooleanProp(false),
+
+  /**
+   * * 当存在label属性时，设置标题和输入框垂直居中，默认为顶部居中。
+   * 类型：boolean
+   * 默认值：false
+   */
+  center: makeBooleanProp(false),
+
+  /**
+   * * 非cell类型下是否隐藏下划线。
+   * 类型：boolean
+   * 默认值：false
+   */
+  noBorder: makeBooleanProp(false),
+
+  /**
+   * * cell类型下必填样式。
+   * 类型：boolean
+   * 默认值：false
+   */
+  required: makeBooleanProp(false),
+
+  /**
+   * * 表单域model字段名，在使用表单校验功能的情况下，该属性是必填的。
+   * 类型：string
+   */
+  prop: makeStringProp(''),
+
+  /**
+   * * 表单验证规则。
+   * 类型：FormItemRule[]
+   * 默认值：[]
+   */
+  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 TextareaProps = ExtractPropTypes<typeof textareaProps>

package/components/oxy-toast/index.scss

@@ -0,0 +1,75 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(toast) {
+  display: inline-block;
+  max-width: $-toast-max-width;
+  padding: $-toast-padding;
+  background-color: $-toast-bg;
+  border-radius: $-toast-radius;
+  color: $-toast-color;
+  transition: all 0.2s;
+  font-size: $-toast-fs;
+  box-sizing: border-box;
+  box-shadow: $-toast-box-shadow;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+
+  @include e(msg) {
+    font-size: $-toast-fs;
+    word-break: break-all;
+    line-height: $-toast-line-height;
+    text-align: left;
+    font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
+  }
+  @include edeep(icon) {
+    display: inline-block;
+    margin-right: $-toast-icon-margin-right;
+    font-size: $-toast-icon-size;
+
+    @include when(vertical) {
+      margin-right: 0;
+      margin-bottom: $-toast-icon-margin-bottom;
+    }
+  }
+  @include e(iconWrap){
+    font-size: 0;
+    line-height: 0;
+    vertical-align: middle;
+  }
+  @include e(iconBox){
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  @include e(iconSvg){
+    width: $-toast-icon-size;
+    height: $-toast-icon-size;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  @include e(loading) {
+    margin-bottom: $-toast-loading-margin-bottom;
+    display: inline-block;
+  }
+  @include m(top) {
+    transform: translate3d(0, -40vh, 0);
+  }
+  @include m(middle-top){
+    transform: translate3d(0%,-18.8vh,0);
+  }
+  @include m(bottom) {
+    transform: translate3d(0, 40vh, 0);
+  }
+  @include m(with-icon) {
+    min-width: $-toast-with-icon-min-width;
+    display: inline-flex;
+    align-items: center;
+  }
+  @include m(loading) {
+    min-width: auto;
+    padding: $-toast-loading-padding;
+  }
+}

package/components/oxy-toast/index.ts

@@ -0,0 +1,92 @@
+import { inject, provide, ref } from 'vue'
+import type { Toast, ToastOptions } from './types'
+import { deepMerge } from '../common/util'
+
+/**
+ * useToast 用到的key
+ */
+const toastDefaultOptionKey = '__TOAST_OPTION__'
+
+// 默认模板
+export const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+
+const None = Symbol('None')
+
+export function useToast(selector: string = ''): Toast {
+  const toastOptionKey = getToastOptionKey(selector)
+  const toastOption = inject(toastOptionKey, ref<ToastOptions | typeof None>(None)) // toast选项
+  if (toastOption.value === None) {
+    toastOption.value = defaultOptions
+    provide(toastOptionKey, toastOption)
+  }
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const createMethod = (toastOptions: ToastOptions) => {
+    return (options: ToastOptions | string) => {
+      return show(deepMerge(toastOptions, typeof options === 'string' ? { msg: options } : options) as ToastOptions)
+    }
+  }
+
+  const show = (option: ToastOptions | string) => {
+    const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
+    toastOption.value = deepMerge(options, {
+      show: true
+    }) as ToastOptions
+    // 开始渲染，并在 duration ms之后执行清除
+    timer && clearTimeout(timer)
+    if (toastOption.value.duration && toastOption.value.duration > 0) {
+      timer = setTimeout(() => {
+        timer && clearTimeout(timer)
+        close()
+      }, options.duration)
+    }
+  }
+
+  const loading = createMethod({
+    iconName: 'loading',
+    duration: 0,
+    cover: true
+  })
+  const success = createMethod({
+    iconName: 'success',
+    duration: 1500
+  })
+  const error = createMethod({ iconName: 'error' })
+  const warning = createMethod({ iconName: 'warning' })
+  const info = createMethod({ iconName: 'info' })
+
+  const close = () => {
+    toastOption.value = { show: false }
+  }
+  return {
+    show,
+    loading,
+    success,
+    error,
+    warning,
+    info,
+    close
+  }
+}
+
+export const getToastOptionKey = (selector: string) => {
+  return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey
+}
+
+export const toastIcon = {
+  success() {
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#34D19D" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#34D19D"/><path d="M19 24l4 4 8-8" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'
+  },
+  warning() {
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#F0883A" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#F0883A"/><rect x="22.5" y="14" width="3" height="12" fill="#FFF" rx="1.5"/><circle cx="24" cy="30" r="2" fill="#FFF"/></svg>'
+  },
+  info() {
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#909CB7" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#909CB7"/><circle cx="24" cy="18" r="2" fill="#FFF"/><rect x="22.5" y="22" width="3" height="12" fill="#FFF" rx="1.5"/></svg>'
+  },
+  error() {
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#fa4350" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#fa4350"/><path d="M18 18l12 12M30 18L18 30" stroke="#FFF" stroke-width="2.5" stroke-linecap="round"/></svg>'
+  }
+}

package/components/oxy-toast/oxy-toast.vue

@@ -0,0 +1,198 @@
+<template>
+  <oxy-overlay
+    v-if="cover"
+    :z-index="zIndex"
+    lock-scroll
+    :show="show"
+    custom-style="background-color: transparent;pointer-events: auto;"
+  ></oxy-overlay>
+  <oxy-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
+    <view :class="rootClass">
+      <!--iconName优先级更高-->
+      <oxy-loading
+        v-if="iconName === 'loading'"
+        :type="loadingType"
+        :color="loadingColor"
+        :size="loadingSize"
+        :custom-class="`oxy-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+      />
+      <view
+        :class="`oxy-toast__iconWrap oxy-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
+      >
+        <view class="oxy-toast__iconBox">
+          <view class="oxy-toast__iconSvg" :style="svgStyle"></view>
+        </view>
+      </view>
+      <oxy-icon
+        v-else-if="iconClass"
+        :custom-class="`oxy-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="iconClass"
+      ></oxy-icon>
+      <!--文本-->
+      <view v-if="msg" class="oxy-toast__msg">{{ msg }}</view>
+    </view>
+  </oxy-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-toast',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+
+import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import base64 from '../common/base64'
+import { defaultOptions, getToastOptionKey, toastIcon } from '.'
+import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
+import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
+
+const props = defineProps(toastProps)
+const iconName = ref<string>('') // 图标类型
+const msg = ref<string>('') // 消息内容
+const position = ref<string>('middle')
+const show = ref<boolean>(false)
+const zIndex = ref<number>(100)
+const loadingType = ref<ToastLoadingType>('outline')
+const loadingColor = ref<string>('#4D80F0')
+const iconSize = ref<string>() // 图标大小
+const loadingSize = ref<string>() // loading大小
+const svgStr = ref<string>('') // 图标
+const cover = ref<boolean>(false) // 是否存在遮罩层
+const classPrefix = ref<string>('oxy-icon') // 图标前缀
+const iconClass = ref<string>('') // 图标类名
+const direction = ref<ToastDirection>('horizontal') // toast布局方向
+
+let opened: (() => void) | null = null
+
+let closed: (() => void) | null = null
+
+const toastOptionKey = getToastOptionKey(props.selector)
+const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
+
+// 监听options变化展示
+watch(
+  () => toastOption.value,
+  (newVal: ToastOptions) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 监听options变化展示
+watch(
+  () => iconName.value,
+  () => {
+    buildSvg()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 动画自定义样式
+ */
+const transitionStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': zIndex.value,
+    position: 'fixed',
+    top: '50%',
+    left: 0,
+    width: '100%',
+    transform: 'translate(0, -50%)',
+    'text-align': 'center',
+    'pointer-events': 'none'
+  }
+  return objToStyle(style)
+})
+
+const rootClass = computed(() => {
+  return `oxy-toast ${props.customClass} oxy-toast--${position.value} ${
+    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !msg.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+})
+
+const svgStyle = computed(() => {
+  const style: CSSProperties = {
+    backgroundImage: `url(${svgStr.value})`
+  }
+  if (isDef(iconSize.value)) {
+    style.width = iconSize.value
+    style.height = iconSize.value
+  }
+  return objToStyle(style)
+})
+
+onBeforeMount(() => {
+  buildSvg()
+})
+
+function handleAfterEnter() {
+  if (isFunction(opened)) {
+    opened()
+  }
+}
+
+function handleAfterLeave() {
+  if (isFunction(closed)) {
+    closed()
+  }
+}
+
+function buildSvg() {
+  if (iconName.value !== 'success' && iconName.value !== 'warning' && iconName.value !== 'info' && iconName.value !== 'error') return
+  const iconSvg = toastIcon[iconName.value]()
+  const iconSvgStr = `"data:image/svg+xml;base64,${base64(iconSvg)}"`
+  svgStr.value = iconSvgStr
+}
+
+/**
+ * 重置toast选项值
+ * @param option toast选项值
+ */
+function reset(option: ToastOptions) {
+  show.value = isDef(option.show) ? option.show : false
+
+  if (show.value) {
+    mergeOptionsWithProps(option, props)
+  }
+}
+
+function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
+  iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName
+  iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass
+  msg.value = isDef(option.msg!) ? option.msg! : props.msg
+  position.value = isDef(option.position!) ? option.position! : props.position
+  zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
+  loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
+  loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
+  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  cover.value = isDef(option.cover!) ? option.cover! : props.cover
+  classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
+  direction.value = isDef(option.direction) ? option.direction : props.direction
+  closed = isFunction(option.closed) ? option.closed : isFunction(props.closed) ? props.closed : null
+  opened = isFunction(option.opened) ? option.opened : isFunction(props.opened) ? props.opened : null
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>