foucui 1.0.1

package/components/QiuForm/index.vue

@@ -0,0 +1,172 @@
+<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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,276 @@
+<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

@@ -0,0 +1,11 @@
+<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>