@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-cascader/hooks/useDisplayValues.ts

@@ -1,64 +0,0 @@
-import type { Ref, VNode } from 'vue'
-import { computed } from 'vue'
-
-import { isValidElement } from '../../_util/props-util'
-import { cloneElement } from '../../_util/vnode'
-import type {
-  BaseCascaderProps,
-  DefaultOptionType,
-  InternalFieldNames,
-  SingleValueType,
-} from '../Cascader'
-import { toPathKey } from '../utils/commonUtil'
-import { toPathOptions } from '../utils/treeUtil'
-
-export default (
-  rawValues: Ref<SingleValueType[]>,
-  options: Ref<DefaultOptionType[]>,
-  fieldNames: Ref<InternalFieldNames>,
-  multiple: Ref<boolean>,
-  displayRender: Ref<BaseCascaderProps['displayRender']>,
-) => {
-  return computed(() => {
-    const mergedDisplayRender =
-      displayRender.value ||
-      // Default displayRender
-      (({ labels }) => {
-        const mergedLabels = multiple.value ? labels.slice(-1) : labels
-        const SPLIT = ' / '
-
-        if (mergedLabels.every((label) => ['string', 'number'].includes(typeof label))) {
-          return mergedLabels.join(SPLIT)
-        }
-
-        // If exist non-string value, use VueNode instead
-        return mergedLabels.reduce((list, label, index) => {
-          const keyedLabel = isValidElement(label)
-            ? cloneElement(label as unknown as VNode, { key: index })
-            : label
-
-          if (index === 0) {
-            return [keyedLabel]
-          }
-
-          return [...list, SPLIT, keyedLabel]
-        }, [])
-      })
-
-    return rawValues.value.map((valueCells) => {
-      const valueOptions = toPathOptions(valueCells, options.value, fieldNames.value)
-
-      const label = mergedDisplayRender({
-        labels: valueOptions.map(({ option, value }) => option?.[fieldNames.value.label] ?? value),
-        selectedOptions: valueOptions.map(({ option }) => option),
-      })
-      const value = toPathKey(valueCells)
-      return {
-        label,
-        value,
-        key: value,
-        valueCells,
-      }
-    })
-  })
-}

package/src/vc-cascader/hooks/useEntities.ts

@@ -1,37 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-import type { DataEntity } from '../../vc-tree/interface'
-import { convertDataToEntities } from '../../vc-tree/utils/treeUtil'
-import type { DefaultOptionType, InternalFieldNames } from '../Cascader'
-import { VALUE_SPLIT } from '../utils/commonUtil'
-
-export interface OptionsInfo {
-  keyEntities: Record<string, DataEntity>
-  pathKeyEntities: Record<string, DataEntity>
-}
-
-/** Lazy parse options data into conduct-able info to avoid perf issue in single mode */
-export default (options: Ref<DefaultOptionType[]>, fieldNames: Ref<InternalFieldNames>) => {
-  const entities = computed(() => {
-    return (
-      convertDataToEntities(options.value as any, {
-        fieldNames: fieldNames.value,
-        initWrapper: (wrapper) => ({
-          ...wrapper,
-          pathKeyEntities: {},
-        }),
-        processEntity: (entity, wrapper: any) => {
-          const pathKey = entity.nodes.map((node) => node[fieldNames.value.value]).join(VALUE_SPLIT)
-
-          wrapper.pathKeyEntities[pathKey] = entity
-
-          // Overwrite origin key.
-          // this is very hack but we need let conduct logic work with connect path
-          entity.key = pathKey
-        },
-      }) as any
-    ).pathKeyEntities
-  })
-  return entities
-}

package/src/vc-cascader/hooks/useMissingValues.ts

@@ -1,27 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-import type { DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader'
-import { toPathOptions } from '../utils/treeUtil'
-
-export default (
-  options: Ref<DefaultOptionType[]>,
-  fieldNames: Ref<InternalFieldNames>,
-  rawValues: Ref<SingleValueType[]>,
-) => {
-  return computed(() => {
-    const missingValues: SingleValueType[] = []
-    const existsValues: SingleValueType[] = []
-
-    rawValues.value.forEach((valueCell) => {
-      const pathOptions = toPathOptions(valueCell, options.value, fieldNames.value)
-      if (pathOptions.every((opt) => opt.option)) {
-        existsValues.push(valueCell)
-      } else {
-        missingValues.push(valueCell)
-      }
-    })
-
-    return [existsValues, missingValues]
-  })
-}

package/src/vc-cascader/hooks/useSearchConfig.ts

@@ -1,41 +0,0 @@
-import type { Ref } from 'vue'
-import { ref, shallowRef, watchEffect } from 'vue'
-
-import { warning } from '../../vc-util/warning'
-import type { BaseCascaderProps, ShowSearchType } from '../Cascader'
-
-// Convert `showSearch` to unique config
-export default function useSearchConfig(showSearch?: Ref<BaseCascaderProps['showSearch']>) {
-  const mergedShowSearch = shallowRef(false)
-  const mergedSearchConfig = ref<ShowSearchType>({})
-  watchEffect(() => {
-    if (!showSearch.value) {
-      mergedShowSearch.value = false
-      mergedSearchConfig.value = {}
-      return
-    }
-
-    let searchConfig: ShowSearchType = {
-      matchInputWidth: true,
-      limit: 50,
-    }
-
-    if (showSearch.value && typeof showSearch.value === 'object') {
-      searchConfig = {
-        ...searchConfig,
-        ...showSearch.value,
-      }
-    }
-
-    if (searchConfig.limit <= 0) {
-      delete searchConfig.limit
-
-      if (process.env.NODE_ENV !== 'production') {
-        warning(false, "'limit' of showSearch should be positive number or false.")
-      }
-    }
-    mergedShowSearch.value = true
-    mergedSearchConfig.value = searchConfig
-  })
-  return { showSearch: mergedShowSearch, searchConfig: mergedSearchConfig }
-}

package/src/vc-cascader/hooks/useSearchOptions.ts

@@ -1,78 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-import type { DefaultOptionType, InternalFieldNames, ShowSearchType } from '../Cascader'
-
-export const SEARCH_MARK = '__rc_cascader_search_mark__'
-
-const defaultFilter: ShowSearchType['filter'] = (search, options, { label }) =>
-  options.some((opt) => String(opt[label]).toLowerCase().includes(search.toLowerCase()))
-
-const defaultRender: ShowSearchType['render'] = ({ path, fieldNames }) =>
-  path.map((opt) => opt[fieldNames.label]).join(' / ')
-
-export default (
-  search: Ref<string>,
-  options: Ref<DefaultOptionType[]>,
-  fieldNames: Ref<InternalFieldNames>,
-  prefixCls: Ref<string>,
-  config: Ref<ShowSearchType>,
-  changeOnSelect: Ref<boolean>,
-) => {
-  return computed(() => {
-    const { filter = defaultFilter, render = defaultRender, limit = 50, sort } = config.value
-    const filteredOptions: DefaultOptionType[] = []
-    if (!search.value) {
-      return []
-    }
-
-    function dig(list: DefaultOptionType[], pathOptions: DefaultOptionType[]) {
-      list.forEach((option) => {
-        // Perf saving when `sort` is disabled and `limit` is provided
-        if (!sort && limit > 0 && filteredOptions.length >= limit) {
-          return
-        }
-
-        const connectedPathOptions = [...pathOptions, option]
-        const children = option[fieldNames.value.children]
-
-        // If current option is filterable
-        if (
-          // If is leaf option
-          !children ||
-          children.length === 0 ||
-          // If is changeOnSelect
-          changeOnSelect.value
-        ) {
-          if (filter(search.value, connectedPathOptions, { label: fieldNames.value.label })) {
-            filteredOptions.push({
-              ...option,
-              [fieldNames.value.label as 'label']: render({
-                inputValue: search.value,
-                path: connectedPathOptions,
-                prefixCls: prefixCls.value,
-                fieldNames: fieldNames.value,
-              }),
-              [SEARCH_MARK]: connectedPathOptions,
-            })
-          }
-        }
-
-        if (children) {
-          dig(option[fieldNames.value.children] as DefaultOptionType[], connectedPathOptions)
-        }
-      })
-    }
-
-    dig(options.value, [])
-
-    // Do sort
-    if (sort) {
-      filteredOptions.sort((a, b) => {
-        return sort(a[SEARCH_MARK], b[SEARCH_MARK], search.value, fieldNames.value)
-      })
-    }
-
-    return limit > 0 ? filteredOptions.slice(0, limit as number) : filteredOptions
-  })
-}

package/src/vc-cascader/index.tsx

@@ -1,16 +0,0 @@
-// rc-cascader@3.4.2
-import Cascader, {
-  SHOW_CHILD,
-  SHOW_PARENT,
-  internalCascaderProps as cascaderProps,
-} from './Cascader'
-
-export type {
-  BaseOptionType,
-  CascaderProps,
-  DefaultOptionType,
-  FieldNames,
-  ShowSearchType,
-} from './Cascader'
-export { cascaderProps, SHOW_CHILD, SHOW_PARENT }
-export default Cascader

package/src/vc-cascader/utils/commonUtil.ts

@@ -1,51 +0,0 @@
-import type {
-  DefaultOptionType,
-  FieldNames,
-  InternalFieldNames,
-  SingleValueType,
-} from '../Cascader'
-
-export const VALUE_SPLIT = '__RC_CASCADER_SPLIT__'
-export const SHOW_PARENT = 'SHOW_PARENT'
-export const SHOW_CHILD = 'SHOW_CHILD'
-
-export function toPathKey(value: SingleValueType) {
-  return value.join(VALUE_SPLIT)
-}
-
-export function toPathKeys(value: SingleValueType[]) {
-  return value.map(toPathKey)
-}
-
-export function toPathValueStr(pathKey: string) {
-  return pathKey.split(VALUE_SPLIT)
-}
-
-export function fillFieldNames(fieldNames?: FieldNames): InternalFieldNames {
-  const { label, value, children } = fieldNames || {}
-  const val = value || 'value'
-  return {
-    label: label || 'label',
-    value: val,
-    key: val,
-    children: children || 'children',
-  }
-}
-
-export function isLeaf(option: DefaultOptionType, fieldNames: FieldNames) {
-  return option.isLeaf ?? !option[fieldNames.children]?.length
-}
-
-export function scrollIntoParentView(element: HTMLElement) {
-  const parent = element.parentElement
-  if (!parent) {
-    return
-  }
-
-  const elementToParent = element.offsetTop - parent.offsetTop // offsetParent may not be parent.
-  if (elementToParent - parent.scrollTop < 0) {
-    parent.scrollTo({ top: elementToParent })
-  } else if (elementToParent + element.offsetHeight - parent.scrollTop > parent.offsetHeight) {
-    parent.scrollTo({ top: elementToParent + element.offsetHeight - parent.offsetHeight })
-  }
-}

package/src/vc-cascader/utils/treeUtil.ts

@@ -1,60 +0,0 @@
-import type { Key } from '../../_util/type'
-import type {
-  DefaultOptionType,
-  InternalFieldNames,
-  ShowCheckedStrategy,
-  SingleValueType,
-} from '../Cascader'
-import type { OptionsInfo } from '../hooks/useEntities'
-import { SHOW_CHILD } from './commonUtil'
-
-export function formatStrategyValues(
-  pathKeys: Key[],
-  keyPathEntities: OptionsInfo['pathKeyEntities'],
-  showCheckedStrategy: ShowCheckedStrategy,
-) {
-  const valueSet = new Set(pathKeys)
-
-  return pathKeys.filter((key) => {
-    const entity = keyPathEntities[key]
-    const parent = entity ? entity.parent : null
-    const children = entity ? entity.children : null
-    return showCheckedStrategy === SHOW_CHILD
-      ? !(children && children.some((child) => child.key && valueSet.has(child.key)))
-      : !(parent && !parent.node.disabled && valueSet.has(parent.key))
-  })
-}
-
-export function toPathOptions(
-  valueCells: SingleValueType,
-  options: DefaultOptionType[],
-  fieldNames: InternalFieldNames,
-  // Used for loadingKeys which saved loaded keys as string
-  stringMode = false,
-) {
-  let currentList = options
-  const valueOptions: {
-    value: SingleValueType[number]
-    index: number
-    option: DefaultOptionType
-  }[] = []
-
-  for (let i = 0; i < valueCells.length; i += 1) {
-    const valueCell = valueCells[i]
-    const foundIndex = currentList?.findIndex((option) => {
-      const val = option[fieldNames.value]
-      return stringMode ? String(val) === String(valueCell) : val === valueCell
-    })
-    const foundOption = foundIndex !== -1 ? currentList?.[foundIndex] : null
-
-    valueOptions.push({
-      value: foundOption?.[fieldNames.value] ?? valueCell,
-      index: foundIndex,
-      option: foundOption,
-    })
-
-    currentList = foundOption?.[fieldNames.children]
-  }
-
-  return valueOptions
-}

package/src/vc-checkbox/Checkbox.tsx

@@ -1,151 +0,0 @@
-// based on rc-checkbox 2.3.2
-import type { HTMLAttributes } from 'vue'
-import { defineComponent, ref, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import PropTypes from '../_util/vue-types'
-
-export const checkboxProps = {
-  prefixCls: String,
-  name: String,
-  id: String,
-  type: String,
-  defaultChecked: { type: [Boolean, Number], default: undefined },
-  checked: { type: [Boolean, Number], default: undefined },
-  disabled: Boolean,
-  tabindex: { type: [Number, String] },
-  readonly: Boolean,
-  autofocus: Boolean,
-  value: PropTypes.any,
-  required: Boolean,
-}
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Checkbox',
-  inheritAttrs: false,
-  props: initDefaultProps(checkboxProps, {
-    prefixCls: 'rc-checkbox',
-    type: 'checkbox',
-    defaultChecked: false,
-  }),
-  emits: ['click', 'change'],
-  setup(props, { attrs, emit, expose }) {
-    const checked = ref(props.checked === undefined ? props.defaultChecked : props.checked)
-    const inputRef = ref<HTMLInputElement>()
-    watch(
-      () => props.checked,
-      () => {
-        checked.value = props.checked
-      },
-    )
-    expose({
-      focus() {
-        inputRef.value?.focus()
-      },
-
-      blur() {
-        inputRef.value?.blur()
-      },
-    })
-    const eventShiftKey = ref()
-    const handleChange = (e) => {
-      if (props.disabled) {
-        return
-      }
-      if (props.checked === undefined) {
-        checked.value = e.target.checked
-      }
-      e.shiftKey = eventShiftKey.value
-      const eventObj = {
-        target: {
-          ...props,
-          checked: e.target.checked,
-        },
-        stopPropagation() {
-          e.stopPropagation()
-        },
-        preventDefault() {
-          e.preventDefault()
-        },
-        nativeEvent: e,
-      }
-
-      // fix https://github.com/vueComponent/ant-design-vue/issues/3047
-      // 受控模式下维持现有状态
-      if (props.checked !== undefined) {
-        inputRef.value.checked = !!props.checked
-      }
-      emit('change', eventObj)
-      eventShiftKey.value = false
-    }
-    const onClick = (e: MouseEvent) => {
-      emit('click', e)
-      // onChange没能获取到shiftKey，使用onClick hack
-      eventShiftKey.value = e.shiftKey
-    }
-    return () => {
-      const {
-        prefixCls,
-        name,
-        id,
-        type,
-        disabled,
-        readonly,
-        tabindex,
-        autofocus,
-        value,
-        required,
-        ...others
-      } = props
-      const {
-        class: className,
-        onFocus,
-        onBlur,
-        onKeydown,
-        onKeypress,
-        onKeyup,
-      } = attrs as HTMLAttributes
-      const othersAndAttrs = { ...others, ...attrs }
-      const globalProps = Object.keys(othersAndAttrs).reduce((prev, key) => {
-        if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') {
-          prev[key] = othersAndAttrs[key]
-        }
-        return prev
-      }, {})
-
-      const classString = classNames(prefixCls, className, {
-        [`${prefixCls}-checked`]: checked.value,
-        [`${prefixCls}-disabled`]: disabled,
-      })
-      const inputProps = {
-        name,
-        id,
-        type,
-        readonly,
-        disabled,
-        tabindex,
-        class: `${prefixCls}-input`,
-        checked: !!checked.value,
-        autofocus,
-        value,
-        ...globalProps,
-        onChange: handleChange,
-        onClick,
-        onFocus,
-        onBlur,
-        onKeydown,
-        onKeypress,
-        onKeyup,
-        required,
-      }
-
-      return (
-        <span class={classString}>
-          <input ref={inputRef} {...inputProps} />
-          <span class={`${prefixCls}-inner`} />
-        </span>
-      )
-    }
-  },
-})

package/src/vc-dialog/Content.tsx

@@ -1,158 +0,0 @@
-import type { CSSProperties, PropType } from 'vue'
-import { Transition, computed, defineComponent, nextTick, ref } from 'vue'
-
-import type { MouseEventHandler } from '../_util/EventInterface'
-import { getTransitionProps } from '../_util/transition'
-import dialogPropTypes from './IDialogPropTypes'
-import { offset } from './util'
-
-const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }
-const entityStyle = { outline: 'none' }
-export interface ContentRef {
-  focus: () => void
-  changeActive: (next: boolean) => void
-}
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'DialogContent',
-  inheritAttrs: false,
-  props: {
-    ...dialogPropTypes(),
-    motionName: String,
-    ariaId: String,
-    onVisibleChanged: Function as PropType<(visible: boolean) => void>,
-    onMousedown: Function as PropType<MouseEventHandler>,
-    onMouseup: Function as PropType<MouseEventHandler>,
-  },
-  setup(props, { expose, slots, attrs }) {
-    const sentinelStartRef = ref<HTMLDivElement>()
-    const sentinelEndRef = ref<HTMLDivElement>()
-    const dialogRef = ref<HTMLDivElement>()
-    expose({
-      focus: () => {
-        sentinelStartRef.value?.focus({ preventScroll: true })
-      },
-      changeActive: (next) => {
-        const { activeElement } = document
-        if (next && activeElement === sentinelEndRef.value) {
-          sentinelStartRef.value.focus({ preventScroll: true })
-        } else if (!next && activeElement === sentinelStartRef.value) {
-          sentinelEndRef.value.focus({ preventScroll: true })
-        }
-      },
-    })
-    const transformOrigin = ref<string>()
-    const contentStyleRef = computed(() => {
-      const { width, height } = props
-      const contentStyle: CSSProperties = {}
-      if (width !== undefined) {
-        contentStyle.width = typeof width === 'number' ? `${width}px` : width
-      }
-      if (height !== undefined) {
-        contentStyle.height = typeof height === 'number' ? `${height}px` : height
-      }
-      if (transformOrigin.value) {
-        contentStyle.transformOrigin = transformOrigin.value
-      }
-      return contentStyle
-    })
-
-    const onPrepare = () => {
-      nextTick(() => {
-        if (dialogRef.value) {
-          const elementOffset = offset(dialogRef.value)
-          transformOrigin.value = props.mousePosition
-            ? `${props.mousePosition.x - elementOffset.left}px ${
-                props.mousePosition.y - elementOffset.top
-              }px`
-            : ''
-        }
-      })
-    }
-    const onVisibleChanged = (visible: boolean) => {
-      props.onVisibleChanged(visible)
-    }
-    return () => {
-      const {
-        prefixCls,
-        footer = slots.footer?.(),
-        title = slots.title?.(),
-        ariaId,
-        closable,
-        closeIcon = slots.closeIcon?.(),
-        onClose,
-        bodyStyle,
-        bodyProps,
-        onMousedown,
-        onMouseup,
-        visible,
-        modalRender = slots.modalRender,
-        destroyOnClose,
-        motionName,
-      } = props
-      let footerNode: any
-      if (footer) {
-        footerNode = <div class={`${prefixCls}-footer`}>{footer}</div>
-      }
-
-      let headerNode: any
-      if (title) {
-        headerNode = (
-          <div class={`${prefixCls}-header`}>
-            <div class={`${prefixCls}-title`} id={ariaId}>
-              {title}
-            </div>
-          </div>
-        )
-      }
-
-      let closer: any
-      if (closable) {
-        closer = (
-          <button type="button" onClick={onClose} aria-label="Close" class={`${prefixCls}-close`}>
-            {closeIcon || <span class={`${prefixCls}-close-x`} />}
-          </button>
-        )
-      }
-
-      const content = (
-        <div class={`${prefixCls}-content`}>
-          {closer}
-          {headerNode}
-          <div class={`${prefixCls}-body`} style={bodyStyle} {...bodyProps}>
-            {slots.default?.()}
-          </div>
-          {footerNode}
-        </div>
-      )
-      const transitionProps = getTransitionProps(motionName)
-      return (
-        <Transition
-          {...transitionProps}
-          onBeforeEnter={onPrepare}
-          onAfterEnter={() => onVisibleChanged(true)}
-          onAfterLeave={() => onVisibleChanged(false)}
-        >
-          {visible || !destroyOnClose ? (
-            <div
-              {...attrs}
-              ref={dialogRef}
-              v-show={visible}
-              key="dialog-element"
-              role="document"
-              style={[contentStyleRef.value, attrs.style as CSSProperties]}
-              class={[prefixCls, attrs.class]}
-              onMousedown={onMousedown}
-              onMouseup={onMouseup}
-            >
-              <div tabindex={0} ref={sentinelStartRef} style={entityStyle}>
-                {modalRender ? modalRender({ originVNode: content }) : content}
-              </div>
-              <div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} />
-            </div>
-          ) : null}
-        </Transition>
-      )
-    }
-  },
-})