@antsoo-lib/components 0.1.2 → 0.1.4

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,158 @@
+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>
+      )
+    }
+  },
+})