@antsoo-lib/components 0.1.11 → 0.1.12

package/src/form/utils/validateUtil.ts

@@ -1,244 +0,0 @@
-import RawAsyncValidator from 'async-validator'
-
-import { cloneVNode } from 'vue'
-
-import { isValidElement } from '../../_util/props-util'
-import { warning } from '../../vc-util/warning'
-import type { InternalNamePath, RuleError, RuleObject, ValidateOptions } from '../interface'
-import { defaultValidateMessages } from './messages'
-import { setValues } from './valueUtil'
-
-// Remove incorrect original ts define
-const AsyncValidator: any = RawAsyncValidator
-
-/**
- * Replace with template.
- *   `I'm ${name}` + { name: 'bamboo' } = I'm bamboo
- */
-function replaceMessage(template: string, kv: Record<string, string>): string {
-  return template.replace(/\$\{\w+\}/g, (str: string) => {
-    const key = str.slice(2, -1)
-    return kv[key]
-  })
-}
-
-async function validateRule(
-  name: string,
-  value: any,
-  rule: RuleObject,
-  options: ValidateOptions,
-  messageVariables?: Record<string, string>,
-): Promise<string[]> {
-  const cloneRule = { ...rule }
-
-  // Bug of `async-validator`
-  delete (cloneRule as any).ruleIndex
-  delete (cloneRule as any).trigger
-
-  // We should special handle array validate
-  let subRuleField: RuleObject = null
-  if (cloneRule && cloneRule.type === 'array' && cloneRule.defaultField) {
-    subRuleField = cloneRule.defaultField
-    delete cloneRule.defaultField
-  }
-
-  const validator = new AsyncValidator({
-    [name]: [cloneRule],
-  })
-
-  const messages = setValues({}, defaultValidateMessages, options.validateMessages)
-  validator.messages(messages)
-
-  let result = []
-
-  try {
-    await Promise.resolve(validator.validate({ [name]: value }, { ...options }))
-  } catch (errObj) {
-    if (errObj.errors) {
-      result = errObj.errors.map(({ message }, index: number) =>
-        // Wrap VueNode with `key`
-        isValidElement(message) ? cloneVNode(message, { key: `error_${index}` }) : message,
-      )
-    } else {
-      console.error(errObj)
-      result = [(messages.default as () => string)()]
-    }
-  }
-
-  if (!result.length && subRuleField) {
-    const subResults: string[][] = await Promise.all(
-      (value as any[]).map((subValue: any, i: number) =>
-        validateRule(`${name}.${i}`, subValue, subRuleField, options, messageVariables),
-      ),
-    )
-
-    return subResults.reduce((prev, errors) => [...prev, ...errors], [])
-  }
-
-  // Replace message with variables
-  const kv = {
-    ...(rule as Record<string, string | number>),
-    name,
-    enum: (rule.enum || []).join(', '),
-    ...messageVariables,
-  }
-
-  const fillVariableResult = result.map((error) => {
-    if (typeof error === 'string') {
-      return replaceMessage(error, kv)
-    }
-    return error
-  })
-
-  return fillVariableResult
-}
-
-/**
- * We use `async-validator` to validate the value.
- * But only check one value in a time to avoid namePath validate issue.
- */
-export function validateRules(
-  namePath: InternalNamePath,
-  value: any,
-  rules: RuleObject[],
-  options: ValidateOptions,
-  validateFirst: boolean | 'parallel',
-  messageVariables?: Record<string, string>,
-) {
-  const name = namePath.join('.')
-
-  // Fill rule with context
-  const filledRules: RuleObject[] = rules
-    .map((currentRule, ruleIndex) => {
-      const originValidatorFunc = currentRule.validator
-      const cloneRule = {
-        ...currentRule,
-        ruleIndex,
-      }
-
-      // Replace validator if needed
-      if (originValidatorFunc) {
-        cloneRule.validator = (rule: RuleObject, val: any, callback: (error?: string) => void) => {
-          let hasPromise = false
-
-          // Wrap callback only accept when promise not provided
-          const wrappedCallback = (...args: string[]) => {
-            // Wait a tick to make sure return type is a promise
-            Promise.resolve().then(() => {
-              warning(
-                !hasPromise,
-                'Your validator function has already return a promise. `callback` will be ignored.',
-              )
-
-              if (!hasPromise) {
-                callback(...args)
-              }
-            })
-          }
-
-          // Get promise
-          const promise = originValidatorFunc(rule, val, wrappedCallback)
-          hasPromise =
-            promise && typeof promise.then === 'function' && typeof promise.catch === 'function'
-
-          /**
-           * 1. Use promise as the first priority.
-           * 2. If promise not exist, use callback with warning instead
-           */
-          warning(hasPromise, '`callback` is deprecated. Please return a promise instead.')
-
-          if (hasPromise) {
-            ;(promise as Promise<void>)
-              .then(() => {
-                callback()
-              })
-              .catch((err) => {
-                callback(err || ' ')
-              })
-          }
-        }
-      }
-
-      return cloneRule
-    })
-    .sort(({ warningOnly: w1, ruleIndex: i1 }, { warningOnly: w2, ruleIndex: i2 }) => {
-      if (!!w1 === !!w2) {
-        // Let keep origin order
-        return i1 - i2
-      }
-
-      if (w1) {
-        return 1
-      }
-
-      return -1
-    })
-
-  // Do validate rules
-  let summaryPromise: Promise<RuleError[]>
-
-  if (validateFirst === true) {
-    // >>>>> Validate by serialization
-    summaryPromise = new Promise(async (resolve, reject) => {
-      for (let i = 0; i < filledRules.length; i += 1) {
-        const rule = filledRules[i]
-        const errors = await validateRule(name, value, rule, options, messageVariables)
-        if (errors.length) {
-          reject([{ errors, rule }])
-          return
-        }
-      }
-
-      resolve([])
-    })
-  } else {
-    // >>>>> Validate by parallel
-    const rulePromises: Promise<RuleError>[] = filledRules.map((rule) =>
-      validateRule(name, value, rule, options, messageVariables).then((errors) => ({
-        errors,
-        rule,
-      })),
-    )
-
-    summaryPromise = (
-      validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)
-    ).then((errors: RuleError[]): RuleError[] | Promise<RuleError[]> => {
-      // Always change to rejection for Field to catch
-      return Promise.reject<RuleError[]>(errors)
-    })
-  }
-
-  // Internal catch error to avoid console error log.
-  summaryPromise.catch((e) => e)
-
-  return summaryPromise
-}
-
-async function finishOnAllFailed(rulePromises: Promise<RuleError>[]): Promise<RuleError[]> {
-  return Promise.all(rulePromises).then(
-    (errorsList: RuleError[]): RuleError[] | Promise<RuleError[]> => {
-      const errors: RuleError[] = [].concat(...errorsList)
-
-      return errors
-    },
-  )
-}
-
-async function finishOnFirstFailed(rulePromises: Promise<RuleError>[]): Promise<RuleError[]> {
-  let count = 0
-
-  return new Promise((resolve) => {
-    rulePromises.forEach((promise) => {
-      promise.then((ruleError) => {
-        if (ruleError.errors.length) {
-          resolve([ruleError])
-        }
-
-        count += 1
-        if (count === rulePromises.length) {
-          resolve([])
-        }
-      })
-    })
-  })
-}

package/src/form/utils/valueUtil.ts

@@ -1,85 +0,0 @@
-import get from '../../vc-util/get'
-import set from '../../vc-util/set'
-import type { InternalNamePath, NamePath } from '../interface'
-import { toArray } from './typeUtil'
-
-/**
- * Convert name to internal supported format.
- * This function should keep since we still thinking if need support like `a.b.c` format.
- * 'a' => ['a']
- * 123 => [123]
- * ['a', 123] => ['a', 123]
- */
-export function getNamePath(path: NamePath | null): InternalNamePath {
-  return toArray(path)
-}
-
-export function getValue<T>(store: T, namePath: InternalNamePath) {
-  const value = get(store, namePath)
-  return value
-}
-
-export function setValue<T>(
-  store: T,
-  namePath: InternalNamePath,
-  value: any,
-  removeIfUndefined = false,
-): T {
-  const newStore = set(store, namePath, value, removeIfUndefined)
-  return newStore
-}
-
-export function containsNamePath(namePathList: InternalNamePath[], namePath: InternalNamePath) {
-  return namePathList && namePathList.some((path) => matchNamePath(path, namePath))
-}
-
-function isObject(obj: any) {
-  return typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === Object.prototype
-}
-
-/**
- * Copy values into store and return a new values object
- * ({ a: 1, b: { c: 2 } }, { a: 4, b: { d: 5 } }) => { a: 4, b: { c: 2, d: 5 } }
- */
-function internalSetValues<T>(store: T, values: T): T {
-  const newStore: T = (Array.isArray(store) ? [...store] : { ...store }) as T
-
-  if (!values) {
-    return newStore
-  }
-
-  Object.keys(values).forEach((key) => {
-    const prevValue = newStore[key]
-    const value = values[key]
-
-    // If both are object (but target is not array), we use recursion to set deep value
-    const recursive = isObject(prevValue) && isObject(value)
-    newStore[key] = recursive ? internalSetValues(prevValue, value || {}) : value
-  })
-
-  return newStore
-}
-
-export function setValues<T>(store: T, ...restValues: T[]): T {
-  return restValues.reduce((current: T, newStore: T) => internalSetValues(current, newStore), store)
-}
-
-export function cloneByNamePathList<T>(store: T, namePathList: InternalNamePath[]): T {
-  let newStore = {} as T
-  namePathList.forEach((namePath) => {
-    const value = getValue(store, namePath)
-    newStore = setValue(newStore, namePath, value)
-  })
-
-  return newStore
-}
-
-export function matchNamePath(
-  namePath: InternalNamePath,
-  changedNamePath: InternalNamePath | null,
-) {
-  if (!namePath || !changedNamePath || namePath.length !== changedNamePath.length) {
-    return false
-  }
-  return namePath.every((nameUnit, i) => changedNamePath[i] === nameUnit)
-}

package/src/grid/Col.tsx

@@ -1,160 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useInjectRow } from './context'
-import { useColStyle } from './style'
-
-type ColSpanType = number | string
-
-type FlexType = number | 'none' | 'auto' | string
-
-export interface ColSize {
-  span?: ColSpanType
-  order?: ColSpanType
-  offset?: ColSpanType
-  push?: ColSpanType
-  pull?: ColSpanType
-}
-
-function parseFlex(flex: FlexType): string {
-  if (typeof flex === 'number') {
-    return `${flex} ${flex} auto`
-  }
-
-  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
-    return `0 0 ${flex}`
-  }
-
-  return flex
-}
-
-export const colProps = () => ({
-  span: [String, Number],
-  order: [String, Number],
-  offset: [String, Number],
-  push: [String, Number],
-  pull: [String, Number],
-  xs: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  sm: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  md: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  lg: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  xl: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  xxl: {
-    type: [String, Number, Object] as PropType<string | number | ColSize>,
-    default: undefined as string | number | ColSize,
-  },
-  prefixCls: String,
-  flex: [String, Number],
-})
-
-export type ColProps = Partial<ExtractPropTypes<ReturnType<typeof colProps>>>
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ACol',
-  inheritAttrs: false,
-  props: colProps(),
-  setup(props, { slots, attrs }) {
-    const { gutter, supportFlexGap, wrap } = useInjectRow()
-    const { prefixCls, direction } = useConfigInject('col', props)
-
-    const [wrapSSR, hashId] = useColStyle(prefixCls)
-
-    const classes = computed(() => {
-      const { span, order, offset, push, pull } = props
-      const pre = prefixCls.value
-      let sizeClassObj = {}
-      sizes.forEach((size) => {
-        let sizeProps: ColSize = {}
-        const propSize = props[size]
-        if (typeof propSize === 'number') {
-          sizeProps.span = propSize
-        } else if (typeof propSize === 'object') {
-          sizeProps = propSize || {}
-        }
-
-        sizeClassObj = {
-          ...sizeClassObj,
-          [`${pre}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-          [`${pre}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-          [`${pre}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
-          [`${pre}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
-          [`${pre}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-          [`${pre}-rtl`]: direction.value === 'rtl',
-        }
-      })
-      return classNames(
-        pre,
-        {
-          [`${pre}-${span}`]: span !== undefined,
-          [`${pre}-order-${order}`]: order,
-          [`${pre}-offset-${offset}`]: offset,
-          [`${pre}-push-${push}`]: push,
-          [`${pre}-pull-${pull}`]: pull,
-        },
-        sizeClassObj,
-        attrs.class,
-        hashId.value,
-      )
-    })
-
-    const mergedStyle = computed(() => {
-      const { flex } = props
-      const gutterVal = gutter.value
-      const style: CSSProperties = {}
-      // Horizontal gutter use padding
-      if (gutterVal && gutterVal[0] > 0) {
-        const horizontalGutter = `${gutterVal[0] / 2}px`
-        style.paddingLeft = horizontalGutter
-        style.paddingRight = horizontalGutter
-      }
-
-      // Vertical gutter use padding when gap not support
-      if (gutterVal && gutterVal[1] > 0 && !supportFlexGap.value) {
-        const verticalGutter = `${gutterVal[1] / 2}px`
-        style.paddingTop = verticalGutter
-        style.paddingBottom = verticalGutter
-      }
-
-      if (flex) {
-        style.flex = parseFlex(flex)
-
-        // Hack for Firefox to avoid size issue
-        // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
-        if (wrap.value === false && !style.minWidth) {
-          style.minWidth = 0
-        }
-      }
-      return style
-    })
-
-    return () =>
-      wrapSSR(
-        <div
-          {...attrs}
-          class={classes.value}
-          style={[mergedStyle.value, attrs.style as CSSProperties]}
-        >
-          {slots.default?.()}
-        </div>,
-      )
-  },
-})

package/src/grid/Row.tsx

@@ -1,199 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
-
-import classNames from '../_util/classNames'
-import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'
-import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'
-import useResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'
-import { someType } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import useProvideRow from './context'
-import { useRowStyle } from './style'
-
-const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const
-const RowJustify = [
-  'start',
-  'end',
-  'center',
-  'space-around',
-  'space-between',
-  'space-evenly',
-] as const
-
-type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-type ResponsiveLike<T> = {
-  [key in Responsive]?: T
-}
-
-type Gap = number | undefined
-export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>
-
-type ResponsiveAligns = ResponsiveLike<(typeof RowAligns)[number]>
-type ResponsiveJustify = ResponsiveLike<(typeof RowJustify)[number]>
-
-export interface rowContextState {
-  gutter?: [number, number]
-}
-
-export const rowProps = () => ({
-  align: someType<(typeof RowAligns)[number] | ResponsiveAligns>([String, Object]),
-  justify: someType<(typeof RowJustify)[number] | ResponsiveJustify>([String, Object]),
-  prefixCls: String,
-  gutter: someType<Gutter | [Gutter, Gutter]>([Number, Array, Object], 0),
-  wrap: { type: Boolean, default: undefined },
-})
-
-export type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>
-
-const ARow = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ARow',
-  inheritAttrs: false,
-  props: rowProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('row', props)
-    const [wrapSSR, hashId] = useRowStyle(prefixCls)
-
-    let token: number
-
-    const responsiveObserve = useResponsiveObserve()
-
-    const screens = ref<ScreenMap>({
-      xs: true,
-      sm: true,
-      md: true,
-      lg: true,
-      xl: true,
-      xxl: true,
-    })
-
-    const curScreens = ref<ScreenMap>({
-      xs: false,
-      sm: false,
-      md: false,
-      lg: false,
-      xl: false,
-      xxl: false,
-    })
-
-    const mergePropsByScreen = (oriProp: 'align' | 'justify') => {
-      return computed(() => {
-        if (typeof props[oriProp] === 'string') {
-          return props[oriProp]
-        }
-        if (typeof props[oriProp] !== 'object') {
-          return ''
-        }
-
-        for (let i = 0; i < responsiveArray.length; i++) {
-          const breakpoint: Breakpoint = responsiveArray[i]
-          // if do not match, do nothing
-          if (!curScreens.value[breakpoint]) continue
-          const curVal = props[oriProp][breakpoint]
-          if (curVal !== undefined) {
-            return curVal
-          }
-        }
-        return ''
-      })
-    }
-
-    const mergeAlign = mergePropsByScreen('align')
-    const mergeJustify = mergePropsByScreen('justify')
-
-    const supportFlexGap = useFlexGapSupport()
-
-    onMounted(() => {
-      token = responsiveObserve.value.subscribe((screen) => {
-        curScreens.value = screen
-        const currentGutter = props.gutter || 0
-        if (
-          (!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
-          (Array.isArray(currentGutter) &&
-            (typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object'))
-        ) {
-          screens.value = screen
-        }
-      })
-    })
-
-    onBeforeUnmount(() => {
-      responsiveObserve.value.unsubscribe(token)
-    })
-
-    const gutter = computed(() => {
-      const results: [Gap, Gap] = [undefined, undefined]
-      const { gutter = 0 } = props
-      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined]
-      normalizedGutter.forEach((g, index) => {
-        if (typeof g === 'object') {
-          for (let i = 0; i < responsiveArray.length; i++) {
-            const breakpoint: Breakpoint = responsiveArray[i]
-            if (screens.value[breakpoint] && g[breakpoint] !== undefined) {
-              results[index] = g[breakpoint] as number
-              break
-            }
-          }
-        } else {
-          results[index] = g
-        }
-      })
-      return results
-    })
-
-    useProvideRow({
-      gutter,
-      supportFlexGap,
-      wrap: computed(() => props.wrap),
-    })
-
-    const classes = computed(() =>
-      classNames(
-        prefixCls.value,
-        {
-          [`${prefixCls.value}-no-wrap`]: props.wrap === false,
-          [`${prefixCls.value}-${mergeJustify.value}`]: mergeJustify.value,
-          [`${prefixCls.value}-${mergeAlign.value}`]: mergeAlign.value,
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-        attrs.class,
-        hashId.value,
-      ),
-    )
-
-    const rowStyle = computed(() => {
-      const gt = gutter.value
-      // Add gutter related style
-      const style: CSSProperties = {}
-      const horizontalGutter = gt[0] != null && gt[0] > 0 ? `${gt[0] / -2}px` : undefined
-      const verticalGutter = gt[1] != null && gt[1] > 0 ? `${gt[1] / -2}px` : undefined
-
-      if (horizontalGutter) {
-        style.marginLeft = horizontalGutter
-        style.marginRight = horizontalGutter
-      }
-
-      if (supportFlexGap.value) {
-        // Set gap direct if flex gap support
-        style.rowGap = `${gt[1]}px`
-      } else if (verticalGutter) {
-        style.marginTop = verticalGutter
-        style.marginBottom = verticalGutter
-      }
-      return style
-    })
-
-    return () =>
-      wrapSSR(
-        <div
-          {...attrs}
-          class={classes.value}
-          style={{ ...rowStyle.value, ...(attrs.style as CSSProperties) }}
-        >
-          {slots.default?.()}
-        </div>,
-      )
-  },
-})
-
-export default ARow

package/src/grid/context.ts

@@ -1,25 +0,0 @@
-import { computed, inject, provide } from 'vue'
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
-
-export interface RowContext {
-  gutter: ComputedRef<[number, number]>
-  wrap: ComputedRef<boolean>
-  supportFlexGap: Ref<boolean>
-}
-
-export const RowContextKey: InjectionKey<RowContext> = Symbol('rowContextKey')
-
-const useProvideRow = (state: RowContext) => {
-  provide(RowContextKey, state)
-}
-
-const useInjectRow = () => {
-  return inject(RowContextKey, {
-    gutter: computed(() => undefined),
-    wrap: computed(() => undefined),
-    supportFlexGap: computed(() => undefined),
-  })
-}
-
-export { useInjectRow, useProvideRow }
-export default useProvideRow