oxy-uni-ui 1.0.1

package/components/oxy-fab/types.ts

@@ -0,0 +1,66 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { PropType } from 'vue'
+
+export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
+export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
+export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
+export type FabGap = Partial<Record<FabDirection, number>>
+export const fabProps = {
+  ...baseProps,
+  /**
+   * 是否激活
+   */
+  active: makeBooleanProp(false),
+  /**
+   * 类型，可选值为 default primary info success warning error
+   */
+  type: makeStringProp<FabType>('primary'),
+  /**
+   * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center
+   */
+  position: makeStringProp<FabPosition>('right-bottom'),
+  /**
+   * 悬浮按钮菜单弹出方向，可选值为 top bottom left right
+   */
+  direction: makeStringProp<FabDirection>('top'),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 悬浮按钮未展开时的图标
+   */
+  inactiveIcon: makeStringProp('add'),
+  /**
+   * 悬浮按钮展开时的图标
+   */
+  activeIcon: makeStringProp('close'),
+  /**
+   * 自定义悬浮按钮层级
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   */
+  draggable: makeBooleanProp(false),
+  gap: {
+    type: Object as PropType<FabGap>,
+    default: () => ({})
+  },
+  /**
+   * 用于控制点击时是否展开菜单
+   */
+  expandable: makeBooleanProp(true)
+}
+
+export type FabProps = ExtractPropTypes<typeof fabProps>
+
+export type FabExpose = {
+  // 展开菜单
+  open: () => void
+  // 收起菜单
+  close: () => void
+}
+
+export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>

package/components/oxy-floating-panel/index.scss

@@ -0,0 +1,64 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(floating-panel) {
+    background: $-dark-background2;
+
+    @include e(content) {
+      background: $-dark-background2;
+    }
+  }
+}
+
+@include b(floating-panel) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: $-floating-panel-z-index;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100vw;
+  border-top-left-radius: $-floating-panel-radius;
+  border-top-right-radius: $-floating-panel-radius;
+  background-color: $-floating-panel-bg;
+  touch-action: none;
+  will-change: transform;
+  @include when(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &::after {
+    position: absolute;
+    bottom: -100vh;
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    content: '';
+    background-color: inherit;
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: $-floating-panel-header-height;
+    cursor: grab;
+    user-select: none;
+    &-bar {
+      width: $-floating-panel-bar-width;
+      height: $-floating-panel-bar-height;
+      background-color: $-floating-panel-bar-bg;
+      border-radius: $-floating-panel-bar-radius;
+    }
+  }
+
+  @include e(content) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background-color: $-floating-panel-content-bg;
+  }
+}

package/components/oxy-floating-panel/oxy-floating-panel.vue

@@ -0,0 +1,140 @@
+<template>
+  <view
+    :class="`oxy-floating-panel ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`"
+    :style="rootStyle"
+    @touchstart.passive="handleTouchStart"
+    @touchmove.passive="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @touchcancel="handleTouchEnd"
+  >
+    <view :class="`oxy-floating-panel__header`">
+      <view :class="`oxy-floating-panel__header-bar`"></view>
+    </view>
+
+    <scroll-view
+      :class="`oxy-floating-panel__content`"
+      data-id="content"
+      :show-scrollbar="showScrollbar"
+      scroll-y
+      @touchmove.stop.prevent="handleTouchMove"
+    >
+      <slot />
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-floating-panel',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './type'
+import { addUnit, closest, objToStyle } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+
+const touch = useTouch()
+
+const props = defineProps(floatingPanelProps)
+const emit = defineEmits(['update:height', 'height-change'])
+
+const heightValue = ref<number>(props.height)
+
+const DAMP = 0.2 // 阻尼系数
+let startY: number // 起始位置
+const windowHeight = ref<number>(0)
+const dragging = ref<boolean>(false) // 是否正在拖拽
+
+const boundary = computed(() => ({
+  min: props.anchors[0] ? props.anchors[0] : 100,
+  max: props.anchors[props.anchors.length - 1] ? props.anchors[props.anchors.length - 1] : Math.round(windowHeight.value * 0.6)
+}))
+
+const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [boundary.value.min, boundary.value.max]))
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    height: addUnit(boundary.value.max),
+    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const updateHeight = (value: number) => {
+  heightValue.value = value
+  emit('update:height', value)
+}
+
+const handleTouchStart = (event: TouchEvent) => {
+  touch.touchStart(event)
+  dragging.value = true
+  startY = -heightValue.value
+}
+
+const handleTouchMove = (event: TouchEvent) => {
+  const target = event.currentTarget as any
+  if (target.dataset.id == 'content') {
+    if (!props.contentDraggable) return
+  }
+  touch.touchMove(event)
+  const moveY = touch.deltaY.value + startY
+  updateHeight(-ease(moveY))
+}
+
+const handleTouchEnd = () => {
+  dragging.value = false
+  updateHeight(closest(anchors.value, heightValue.value))
+
+  if (heightValue.value !== -startY) {
+    emit('height-change', { height: heightValue.value })
+  }
+}
+
+const ease = (y: number) => {
+  const absDistance = Math.abs(y)
+  const { min, max } = boundary.value
+
+  if (absDistance > max) {
+    return -(max + (absDistance - max) * DAMP)
+  }
+
+  if (absDistance < min) {
+    return -(min - (min - absDistance) * DAMP)
+  }
+
+  return y
+}
+
+watch(
+  () => props.height,
+  (value) => {
+    heightValue.value = value
+  }
+)
+
+watch(
+  boundary,
+  () => {
+    updateHeight(closest(anchors.value, heightValue.value))
+  },
+  { immediate: true }
+)
+
+onBeforeMount(() => {
+  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
+  windowHeight.value = _windowHeight
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-floating-panel/type.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../common/props'
+
+export const floatingPanelProps = {
+  ...baseProps,
+  /**
+   * 面板的显示高度
+   */
+  height: makeNumberProp(0),
+  /**
+   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   */
+  anchors: makeArrayProp<number>(),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 是否显示滚动条，默认值为 true
+   */
+  showScrollbar: truthProp,
+  /**
+   * 动画时长，单位毫秒，默认值为 300ms
+   */
+  duration: makeNumericProp(300),
+  /**
+   * 是否允许内容区容器拖拽，默认值为 true
+   */
+  contentDraggable: truthProp
+}
+
+export type FloatingPanelProps = ExtractPropTypes<typeof floatingPanelProps>

package/components/oxy-form/oxy-form.vue

@@ -0,0 +1,207 @@
+<template>
+  <view :class="`oxy-form ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <oxy-toast v-if="props.errorType === 'toast'" selector="oxy-form-toast" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-form',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyToast from '../oxy-toast/oxy-toast.vue'
+import { reactive, watch } from 'vue'
+import { deepClone, getPropByPath, isArray, isDef, isPromise, isString } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { useToast } from '../oxy-toast'
+import { type FormRules, FORM_KEY, type ErrorMessage, formProps, type FormExpose } from './types'
+
+const { show: showToast } = useToast('oxy-form-toast')
+const props = defineProps(formProps)
+
+const { children, linkChildren } = useChildren(FORM_KEY)
+let errorMessages = reactive<Record<string, string>>({})
+
+linkChildren({ props, errorMessages })
+
+watch(
+  () => props.model,
+  () => {
+    if (props.resetOnChange) {
+      clearMessage()
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+/**
+ * 表单校验
+ * @param prop 指定校验字段或字段数组
+ */
+async function validate(prop?: string | string[]): Promise<{ valid: boolean; errors: ErrorMessage[] }> {
+  const errors: ErrorMessage[] = []
+  let valid: boolean = true
+  const promises: Promise<void>[] = []
+  const formRules: FormRules = getMergeRules()
+  const propsToValidate = isArray(prop) ? prop : isDef(prop) ? [prop] : []
+  const rulesToValidate: FormRules =
+    propsToValidate.length > 0
+      ? propsToValidate.reduce((acc, key) => {
+          if (formRules[key]) {
+            acc[key] = formRules[key]
+          }
+          return acc
+        }, {} as FormRules)
+      : formRules
+
+  for (const propName in rulesToValidate) {
+    const rules = rulesToValidate[propName]
+    const value = getPropByPath(props.model, propName)
+
+    if (rules && rules.length > 0) {
+      for (const rule of rules) {
+        if (rule.required && (!isDef(value) || value === '')) {
+          errors.push({
+            prop: propName,
+            message: rule.message
+          })
+          valid = false
+          break
+        }
+        if (rule.pattern && !rule.pattern.test(value)) {
+          errors.push({
+            prop: propName,
+            message: rule.message
+          })
+          valid = false
+          break
+        }
+        const { validator, ...ruleWithoutValidator } = rule
+        if (validator) {
+          const result = validator(value, ruleWithoutValidator)
+          if (isPromise(result)) {
+            promises.push(
+              result
+                .then((res) => {
+                  if (typeof res === 'string') {
+                    errors.push({
+                      prop: propName,
+                      message: res
+                    })
+                    valid = false
+                  } else if (typeof res === 'boolean' && !res) {
+                    errors.push({
+                      prop: propName,
+                      message: rule.message
+                    })
+                    valid = false
+                  }
+                })
+                .catch((error?: string | Error) => {
+                  const message = isDef(error) ? (isString(error) ? error : error.message || rule.message) : rule.message
+                  errors.push({ prop: propName, message })
+                  valid = false
+                })
+            )
+          } else {
+            if (!result) {
+              errors.push({
+                prop: propName,
+                message: rule.message
+              })
+              valid = false
+            }
+          }
+        }
+      }
+    }
+  }
+
+  await Promise.all(promises)
+
+  showMessage(errors)
+
+  if (valid) {
+    if (propsToValidate.length) {
+      propsToValidate.forEach(clearMessage)
+    } else {
+      clearMessage()
+    }
+  }
+
+  return {
+    valid,
+    errors
+  }
+}
+
+// 合并子组件的rules到父组件的rules
+function getMergeRules() {
+  const mergedRules: FormRules = deepClone(props.rules)
+  const childrenProps = children.map((child) => child.prop)
+
+  // 过滤掉在 children 中不存在对应子组件的规则
+  Object.keys(mergedRules).forEach((key) => {
+    if (!childrenProps.includes(key)) {
+      delete mergedRules[key]
+    }
+  })
+
+  children.forEach((item) => {
+    if (isDef(item.prop) && isDef(item.rules) && item.rules.length) {
+      if (mergedRules[item.prop]) {
+        mergedRules[item.prop] = [...mergedRules[item.prop], ...item.rules]
+      } else {
+        mergedRules[item.prop] = item.rules
+      }
+    }
+  })
+  return mergedRules
+}
+
+function showMessage(errors: ErrorMessage[]) {
+  const childrenProps = children.map((e) => e.prop).filter(Boolean)
+  const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))
+  if (messages.length) {
+    messages.sort((a, b) => {
+      return childrenProps.indexOf(a.prop) - childrenProps.indexOf(b.prop)
+    })
+    if (props.errorType === 'toast') {
+      showToast(messages[0].message)
+    } else if (props.errorType === 'message') {
+      messages.forEach((error) => {
+        errorMessages[error.prop] = error.message
+      })
+    }
+  }
+}
+
+function clearMessage(prop?: string) {
+  if (prop) {
+    errorMessages[prop] = ''
+  } else {
+    Object.keys(errorMessages).forEach((key) => {
+      errorMessages[key] = ''
+    })
+  }
+}
+
+/**
+ * 重置表单项的验证提示
+ */
+function reset() {
+  clearMessage()
+}
+
+defineExpose<FormExpose>({ validate, reset })
+</script>
+
+<style lang="scss" scoped></style>

package/components/oxy-form/types.ts

@@ -0,0 +1,76 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp } from '../common/props'
+
+export type FormProvide = {
+  props: {
+    model: Record<string, any>
+    rules?: FormRules
+    border?: boolean
+  }
+  errorMessages?: Record<string, string>
+}
+
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('oxy-form')
+
+export type FormRules = {
+  [key: string]: FormItemRule[]
+}
+
+export type ErrorMessage = {
+  prop: string
+  message: string
+}
+
+export interface FormItemRule {
+  [key: string]: any
+  required: boolean
+  message: string
+  pattern?: RegExp
+  validator?: (value: any, rule: FormItemRuleWithoutValidator) => boolean | Promise<string> | Promise<boolean> | Promise<void> | Promise<unknown>
+}
+
+export type FormItemRuleWithoutValidator = Omit<FormItemRule, 'validator'>
+
+export const formProps = {
+  ...baseProps,
+  /**
+   * 表单数据对象
+   */
+  model: makeRequiredProp(Object as PropType<Record<string, any>>),
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Object as PropType<FormRules>,
+    default: () => ({})
+  },
+  /**
+   * 是否在输入时重置表单校验信息
+   */
+  resetOnChange: makeBooleanProp(true),
+  /**
+   * 错误提示类型
+   */
+  errorType: {
+    type: String as PropType<'toast' | 'message' | 'none'>,
+    default: 'message'
+  }
+}
+export type FormProps = ExtractPropTypes<typeof formProps>
+
+export type FormExpose = {
+  /**
+   * 表单校验
+   * @param prop 指定校验字段
+   */
+  validate: (prop?: string | Array<string>) => Promise<{
+    valid: boolean
+    errors: ErrorMessage[]
+  }>
+  /**
+   * 重置表单项的验证提示
+   */
+  reset: () => void
+}
+
+export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>

package/components/oxy-form-item/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(form-item) {
+  }
+}
+
+
+@include b(form-item) {
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+}

package/components/oxy-form-item/oxy-form-item.vue

@@ -0,0 +1,56 @@
+<template>
+  <oxy-cell
+    custom-class="oxy-form-item"
+    :required="required"
+    :title="label"
+    :center="center"
+    :border="border"
+    :title-width="labelWidth"
+    :is-link="isLink"
+  >
+    <slot></slot>
+    <view v-if="errorMessage" class="oxy-form-item__error-message">{{ errorMessage }}</view>
+  </oxy-cell>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-form-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import OxyCell from '../oxy-cell/oxy-cell.vue'
+import { FORM_KEY } from '../oxy-form/types'
+import { formItemProps } from './types'
+
+const props = defineProps(formItemProps)
+
+const { parent: form, index } = useParent(FORM_KEY)
+
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+const border = computed(() => {
+  if (index.value > 0 && form && form.props.border) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-form-item/types.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../oxy-form/types'
+
+export const formItemProps = {
+  ...baseProps,
+  prop: makeRequiredProp(String),
+  rules: makeArrayProp<FormItemRule>(),
+  required: Boolean,
+  center: makeBooleanProp(false),
+  label: String,
+  labelWidth: makeStringProp('100px'),
+  isLink: Boolean
+}
+
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>

package/components/oxy-gap/index.scss

@@ -0,0 +1,9 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+@include b(gap) {
+  @include m(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}