foucui 1.0.1 → 2.0.0

package/components/QiuForm/index.vue

@@ -1,172 +0,0 @@
-<template>
-  <form
-    class="qiu-form"
-    :class="[
-      `qiu-form--label-${labelPosition}`,
-      { 'qiu-form--inline': inline },
-    ]"
-    :style="formStyle"
-    @submit.prevent
-  >
-    <slot />
-  </form>
-</template>
-
-<script lang="ts" setup>
-import type { QiuFormContext, QiuFormItemContext, QiuFormRules } from './types'
-import { QIU_FORM_KEY } from './types'
-
-defineOptions({ name: 'QiuForm' })
-
-const props = withDefaults(
-  defineProps<{
-    model?: Record<string, any>
-    rules?: QiuFormRules
-    labelWidth?: string | number
-    labelPosition?: 'left' | 'right' | 'top'
-    inline?: boolean
-    disabled?: boolean
-    hideRequiredAsterisk?: boolean
-    requireAsteriskPosition?: 'left' | 'right'
-    validateOnRuleChange?: boolean
-  }>(),
-  {
-    labelWidth: '',
-    labelPosition: 'right',
-    inline: false,
-    disabled: false,
-    hideRequiredAsterisk: false,
-    requireAsteriskPosition: 'left',
-    validateOnRuleChange: true,
-  }
-)
-
-const emit = defineEmits<{
-  validate: [prop: string, isValid: boolean, message: string]
-}>()
-
-const normalizedLabelWidth = computed(() => {
-  if (!props.labelWidth && props.labelWidth !== 0) return ''
-  return typeof props.labelWidth === 'number' ? `${props.labelWidth}px` : props.labelWidth
-})
-
-const formStyle = computed(() => {
-  if (!normalizedLabelWidth.value) return undefined
-  return { '--qiu-form-label-width': normalizedLabelWidth.value }
-})
-
-const fields = ref<QiuFormItemContext[]>([])
-
-const addField = (field: QiuFormItemContext) => {
-  if (!fields.value.find((f) => f.uid === field.uid)) fields.value.push(field)
-}
-
-const removeField = (field: QiuFormItemContext) => {
-  fields.value = fields.value.filter((f) => f.uid !== field.uid)
-}
-
-const validate = (callback?: (valid: boolean) => void): Promise<boolean> => {
-  const list = fields.value.filter((f) => f.prop)
-  return Promise.all(list.map((f) => f.validate('')))
-    .then((results) => {
-      const valid = results.every(Boolean)
-      callback?.(valid)
-      return valid
-    })
-    .catch(() => {
-      callback?.(false)
-      return false
-    })
-}
-
-const validateField = async (propsOrProp: string | string[]) => {
-  const propsList = Array.isArray(propsOrProp) ? propsOrProp : [propsOrProp]
-  const list = fields.value.filter((f) => f.prop && propsList.includes(f.prop))
-  const results = await Promise.all(list.map((f) => f.validate('')))
-  return results.every(Boolean)
-}
-
-const resetFields = () => {
-  fields.value.forEach((f) => f.resetField())
-}
-
-const clearValidate = (propsOrProp?: string | string[]) => {
-  const propsList = propsOrProp
-    ? Array.isArray(propsOrProp)
-      ? propsOrProp
-      : [propsOrProp]
-    : null
-  fields.value.forEach((f) => {
-    if (!propsList || (f.prop && propsList.includes(f.prop))) f.clearValidate()
-  })
-}
-
-const formCtx: QiuFormContext = {
-  model: computed(() => props.model),
-  rules: computed(() => props.rules),
-  labelWidth: normalizedLabelWidth,
-  labelPosition: computed(() => props.labelPosition),
-  disabled: computed(() => props.disabled),
-  hideRequiredAsterisk: computed(() => props.hideRequiredAsterisk),
-  addField,
-  removeField,
-  emitValidate: (prop, isValid, message) => emit('validate', prop, isValid, message),
-}
-
-provide(QIU_FORM_KEY, formCtx)
-provide('qiuFormLabelWidth', normalizedLabelWidth)
-provide('qiuFormLabelPosition', computed(() => props.labelPosition))
-
-watch(
-  () => props.rules,
-  () => {
-    if (props.validateOnRuleChange) void validate()
-  },
-  { deep: true }
-)
-
-defineExpose({
-  validate,
-  validateField,
-  resetFields,
-  clearValidate,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-form {
-  --qiu-form-label-width: auto;
-
-  &--inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 16px;
-    align-items: flex-start;
-  }
-
-  &--label-top {
-    :deep(.qiu-form-item) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    :deep(.qiu-form-item__label) {
-      justify-content: flex-start;
-      width: auto;
-      padding-bottom: 4px;
-    }
-  }
-
-  &--label-left {
-    :deep(.qiu-form-item__label) {
-      justify-content: flex-start;
-    }
-  }
-
-  &--label-right {
-    :deep(.qiu-form-item__label) {
-      justify-content: flex-end;
-    }
-  }
-}
-</style>

package/components/QiuForm/types.ts

@@ -1,39 +0,0 @@
-export const QIU_FORM_KEY = Symbol('qiuForm')
-export const QIU_FORM_ITEM_KEY = Symbol('qiuFormItem')
-
-export type QiuFormRule = {
-  required?: boolean
-  message?: string
-  min?: number
-  max?: number
-  pattern?: RegExp
-  type?: string
-  trigger?: 'blur' | 'change' | Array<'blur' | 'change'>
-  validator?: (
-    rule: QiuFormRule,
-    value: any,
-    callback: (error?: string | Error) => void
-  ) => void
-}
-
-export type QiuFormRules = Record<string, QiuFormRule | QiuFormRule[]>
-
-export interface QiuFormItemContext {
-  uid: number
-  prop?: string
-  validate: (trigger: string) => Promise<boolean>
-  resetField: () => void
-  clearValidate: () => void
-}
-
-export interface QiuFormContext {
-  model: import('vue').ComputedRef<Record<string, any> | undefined>
-  rules: import('vue').ComputedRef<QiuFormRules | undefined>
-  labelWidth: import('vue').ComputedRef<string>
-  labelPosition: import('vue').ComputedRef<'left' | 'right' | 'top'>
-  disabled: import('vue').ComputedRef<boolean>
-  hideRequiredAsterisk: import('vue').ComputedRef<boolean>
-  addField: (field: QiuFormItemContext) => void
-  removeField: (field: QiuFormItemContext) => void
-  emitValidate: (prop: string, isValid: boolean, message: string) => void
-}

package/components/QiuFormItem/index.vue

@@ -1,276 +0,0 @@
-<template>
-  <div
-    class="qiu-form-item"
-    :class="{
-      'is-required': isRequired,
-      'is-error': validateState === 'error',
-    }"
-  >
-    <label
-      v-if="label || $slots.label"
-      class="qiu-form-item__label"
-      :style="labelStyle"
-    >
-      <slot name="label">{{ label }}</slot>
-    </label>
-    <div class="qiu-form-item__content">
-      <slot />
-      <div v-if="validateMessage && validateState === 'error'" class="qiu-form-item__error">
-        {{ validateMessage }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuFormContext, QiuFormItemContext, QiuFormRule } from '../QiuForm/types'
-import { QIU_FORM_ITEM_KEY, QIU_FORM_KEY } from '../QiuForm/types'
-
-defineOptions({ name: 'QiuFormItem' })
-
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    labelWidth?: string | number
-    required?: boolean
-    prop?: string
-    error?: string
-    rules?: QiuFormRule | QiuFormRule[]
-  }>(),
-  {
-    required: undefined,
-  }
-)
-
-const form = inject<QiuFormContext | null>(QIU_FORM_KEY, null)
-const formLabelWidth = inject<Ref<string>>('qiuFormLabelWidth', ref(''))
-const formLabelPosition = inject<Ref<'left' | 'right' | 'top'>>(
-  'qiuFormLabelPosition',
-  ref('right')
-)
-
-const uid = getCurrentInstance()?.uid ?? Math.random()
-const validateState = ref<'' | 'error' | 'success' | 'validating'>('')
-const validateMessage = ref('')
-const initialValue = ref<any>(undefined)
-
-const resolvedLabelWidth = computed(() => {
-  if (props.labelWidth !== undefined && props.labelWidth !== '') {
-    return typeof props.labelWidth === 'number' ? `${props.labelWidth}px` : props.labelWidth
-  }
-  return form?.labelWidth.value || formLabelWidth.value
-})
-
-const labelStyle = computed(() => {
-  if ((form?.labelPosition.value || formLabelPosition.value) === 'top') return undefined
-  if (!resolvedLabelWidth.value) return undefined
-  return { width: resolvedLabelWidth.value }
-})
-
-const fieldValue = computed(() => {
-  if (!props.prop || !form?.model.value) return undefined
-  return form.model.value[props.prop]
-})
-
-const normalizedRules = computed((): QiuFormRule[] => {
-  const list: QiuFormRule[] = []
-  if (props.rules) list.push(...(Array.isArray(props.rules) ? props.rules : [props.rules]))
-  if (props.prop && form?.rules.value?.[props.prop]) {
-    const r = form.rules.value[props.prop]
-    list.push(...(Array.isArray(r) ? r : [r]))
-  }
-  return list
-})
-
-const isRequired = computed(() => {
-  if (form?.hideRequiredAsterisk.value) return false
-  if (props.required === true) return true
-  if (props.required === false) return false
-  return normalizedRules.value.some((r) => r.required)
-})
-
-const runRule = (rule: QiuFormRule, value: any): Promise<string> =>
-  new Promise((resolve) => {
-    if (rule.required) {
-      const empty =
-        value === undefined ||
-        value === null ||
-        value === '' ||
-        (Array.isArray(value) && !value.length)
-      if (empty) {
-        resolve(rule.message || '必填项')
-        return
-      }
-    }
-    if (rule.min != null || rule.max != null) {
-      const len = typeof value === 'number' ? value : String(value ?? '').length
-      if (rule.min != null && len < rule.min) {
-        resolve(rule.message || `长度不能少于 ${rule.min}`)
-        return
-      }
-      if (rule.max != null && len > rule.max) {
-        resolve(rule.message || `长度不能超过 ${rule.max}`)
-        return
-      }
-    }
-    if (rule.pattern && value != null && value !== '' && !rule.pattern.test(String(value))) {
-      resolve(rule.message || '格式不正确')
-      return
-    }
-    if (rule.validator) {
-      rule.validator(rule, value, (err?: string | Error) => {
-        if (!err) resolve('')
-        else resolve(typeof err === 'string' ? err : err.message || '校验失败')
-      })
-      return
-    }
-    resolve('')
-  })
-
-const validate = async (trigger: string): Promise<boolean> => {
-  if (props.error) {
-    validateState.value = 'error'
-    validateMessage.value = props.error
-    return false
-  }
-  const rules = normalizedRules.value.filter((r) => {
-    if (!trigger) return true
-    const t = r.trigger
-    if (!t) return true
-    const arr = Array.isArray(t) ? t : [t]
-    return arr.includes(trigger as 'blur' | 'change')
-  })
-  if (!rules.length && !trigger) {
-    // full validate uses all rules
-  }
-  const useRules = trigger ? rules : normalizedRules.value
-  if (!useRules.length) {
-    validateState.value = ''
-    validateMessage.value = ''
-    return true
-  }
-
-  validateState.value = 'validating'
-  for (const rule of useRules) {
-    const msg = await runRule(rule, fieldValue.value)
-    if (msg) {
-      validateState.value = 'error'
-      validateMessage.value = msg
-      if (props.prop) form?.emitValidate(props.prop, false, msg)
-      return false
-    }
-  }
-  validateState.value = 'success'
-  validateMessage.value = ''
-  if (props.prop) form?.emitValidate(props.prop, true, '')
-  return true
-}
-
-const resetField = () => {
-  if (props.prop && form?.model.value) {
-    form.model.value[props.prop] = initialValue.value
-  }
-  clearValidate()
-}
-
-const clearValidate = () => {
-  validateState.value = ''
-  validateMessage.value = ''
-}
-
-const fieldCtx: QiuFormItemContext = {
-  uid,
-  prop: props.prop,
-  validate,
-  resetField,
-  clearValidate,
-}
-
-provide(QIU_FORM_ITEM_KEY, {
-  validate,
-  prop: computed(() => props.prop),
-})
-
-onMounted(() => {
-  initialValue.value = fieldValue.value
-  form?.addField(fieldCtx)
-})
-
-onBeforeUnmount(() => {
-  form?.removeField(fieldCtx)
-})
-
-watch(
-  () => props.error,
-  (err) => {
-    if (err) {
-      validateState.value = 'error'
-      validateMessage.value = err
-    }
-  }
-)
-
-watch(fieldValue, () => {
-  if (validateState.value === 'error' || normalizedRules.value.some((r) => {
-    const t = r.trigger
-    if (!t) return true
-    const arr = Array.isArray(t) ? t : [t]
-    return arr.includes('change')
-  })) {
-    void validate('change')
-  }
-})
-
-defineExpose({ validate, resetField, clearValidate, validateState, validateMessage })
-</script>
-
-<style lang="scss" scoped>
-.qiu-form-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 18px;
-
-  &.is-required .qiu-form-item__label::before {
-    margin-right: 4px;
-    color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-    content: '*';
-  }
-
-  &.is-error {
-    :deep(.qiu-input),
-    :deep(.qiu-select),
-    :deep(.qiu-input-number) {
-      border-color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-    }
-  }
-}
-
-.qiu-form-item__label {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  height: 32px;
-  padding-right: 12px;
-  font-size: 14px;
-  line-height: 32px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-}
-
-.qiu-form-item__content {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  line-height: 32px;
-}
-
-.qiu-form-item__error {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  padding-top: 2px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-}
-</style>

package/components/QiuFullscreen/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <qiu-icon class="qiu-fullscreen" :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" @click="toggle" />
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuFullscreen',
-})
-
-const { isFullscreen, toggle } = useFullscreen()
-</script>