@antsoo-lib/components 0.1.11 → 0.1.12

package/src/qrcode/style/index.ts

@@ -1,65 +0,0 @@
-import { resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface QRCodeToken extends FullToken<'QRCode'> {
-  QRCodeTextColor: string
-  QRCodeMaskBackgroundColor: string
-}
-
-const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
-  const { componentCls } = token
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: token.paddingSM,
-      backgroundColor: token.colorWhite,
-      borderRadius: token.borderRadiusLG,
-      border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      [`& > ${componentCls}-mask`]: {
-        position: 'absolute',
-        insetBlockStart: 0,
-        insetInlineStart: 0,
-        zIndex: 10,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-        color: token.colorText,
-        lineHeight: token.lineHeight,
-        background: token.QRCodeMaskBackgroundColor,
-        textAlign: 'center',
-        [`& > ${componentCls}-expired , & > ${componentCls}-scanned`]: {
-          color: token.QRCodeTextColor,
-        },
-      },
-      '&-icon': {
-        marginBlockEnd: token.marginXS,
-        fontSize: token.controlHeight,
-      },
-    },
-    [`${componentCls}-borderless`]: {
-      borderColor: 'transparent',
-    },
-  }
-}
-
-export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
-  genQRCodeStyle(
-    mergeToken<QRCodeToken>(token, {
-      QRCodeTextColor: 'rgba(0, 0, 0, 0.88)',
-      QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
-    }),
-  ),
-)

package/src/radio/Group.tsx

@@ -1,148 +0,0 @@
-import { computed, defineComponent, nextTick, ref, watch } from 'vue'
-import type { ExtractPropTypes } from 'vue'
-
-import classNames from '../_util/classNames'
-import { arrayType, booleanType, functionType, stringType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useInjectFormItemContext } from '../form/FormItemContext'
-import Radio from './Radio'
-import { useProvideRadioGroupContext } from './context'
-import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface'
-// CSSINJS
-import useStyle from './style'
-
-const RadioGroupSizeTypes = ['large', 'default', 'small'] as const
-
-export type RadioGroupSize = (typeof RadioGroupSizeTypes)[number]
-
-export type RadioGroupOption = RadioGroupOptionType
-
-export interface RadioGroupChildOption {
-  label?: any
-  value: any
-  disabled?: boolean
-}
-
-export const radioGroupProps = () => ({
-  prefixCls: String,
-  value: PropTypes.any,
-  size: stringType<RadioGroupSize>(),
-  options: arrayType<Array<string | RadioGroupChildOption | number>>(),
-  disabled: booleanType(),
-  name: String,
-  buttonStyle: stringType<RadioGroupButtonStyle>('outline'),
-  id: String,
-  optionType: stringType<RadioGroupOptionType>('default'),
-  onChange: functionType<(e: RadioChangeEvent) => void>(),
-  'onUpdate:value': functionType<(val: any) => void>(),
-})
-
-export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ARadioGroup',
-  inheritAttrs: false,
-  props: radioGroupProps(),
-  // emits: ['update:value', 'change'],
-  setup(props, { slots, emit, attrs }) {
-    const formItemContext = useInjectFormItemContext()
-    const { prefixCls, direction, size } = useConfigInject('radio', props)
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const stateValue = ref(props.value)
-    const updatingValue = ref<boolean>(false)
-    watch(
-      () => props.value,
-      (val) => {
-        stateValue.value = val
-        updatingValue.value = false
-      },
-    )
-
-    const onRadioChange = (ev: RadioChangeEvent) => {
-      const lastValue = stateValue.value
-      const { value } = ev.target
-
-      if (!('value' in props)) {
-        stateValue.value = value
-      }
-      // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
-      if (!updatingValue.value && value !== lastValue) {
-        updatingValue.value = true
-        emit('update:value', value)
-        emit('change', ev)
-        formItemContext.onFieldChange()
-      }
-      nextTick(() => {
-        updatingValue.value = false
-      })
-    }
-
-    useProvideRadioGroupContext({
-      onChange: onRadioChange,
-      value: stateValue,
-      disabled: computed(() => props.disabled),
-      name: computed(() => props.name),
-      optionType: computed(() => props.optionType),
-    })
-
-    return () => {
-      const { options, buttonStyle, id = formItemContext.id.value } = props
-
-      const groupPrefixCls = `${prefixCls.value}-group`
-
-      const classString = classNames(
-        groupPrefixCls,
-        `${groupPrefixCls}-${buttonStyle}`,
-        {
-          [`${groupPrefixCls}-${size.value}`]: size.value,
-          [`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
-        },
-        attrs.class,
-        hashId.value,
-      )
-
-      let children = null
-      if (options && options.length > 0) {
-        children = options.map((option) => {
-          if (typeof option === 'string' || typeof option === 'number') {
-            return (
-              <Radio
-                key={option}
-                prefixCls={prefixCls.value}
-                disabled={props.disabled}
-                value={option}
-                checked={stateValue.value === option}
-              >
-                {option}
-              </Radio>
-            )
-          }
-          const { value, disabled, label } = option as RadioGroupChildOption
-          return (
-            <Radio
-              key={`radio-group-value-options-${value}`}
-              prefixCls={prefixCls.value}
-              disabled={disabled || props.disabled}
-              value={value}
-              checked={stateValue.value === value}
-            >
-              {label}
-            </Radio>
-          )
-        })
-      } else {
-        children = slots.default?.()
-      }
-      return wrapSSR(
-        <div {...attrs} class={classString} id={id}>
-          {children}
-        </div>,
-      )
-    }
-  },
-})

package/src/radio/Radio.tsx

@@ -1,127 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
-
-import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import { booleanType, functionType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import { useInjectDisabled } from '../config-provider/DisabledContext'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'
-import VcCheckbox from '../vc-checkbox/Checkbox'
-import { useInjectRadioGroupContext, useInjectRadioOptionTypeContext } from './context'
-import type { RadioChangeEvent } from './interface'
-// CSSINJS
-import useStyle from './style'
-
-export const radioProps = () => ({
-  prefixCls: String,
-  checked: booleanType(),
-  disabled: booleanType(),
-  isGroup: booleanType(),
-  value: PropTypes.any,
-  name: String,
-  id: String,
-  autofocus: booleanType(),
-  onChange: functionType<(event: RadioChangeEvent) => void>(),
-  onFocus: functionType<FocusEventHandler>(),
-  onBlur: functionType<FocusEventHandler>(),
-  onClick: functionType<MouseEventHandler>(),
-  'onUpdate:checked': functionType<(checked: boolean) => void>(),
-  'onUpdate:value': functionType<(checked: boolean) => void>(),
-})
-
-export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ARadio',
-  inheritAttrs: false,
-  props: radioProps(),
-  setup(props, { emit, expose, slots, attrs }) {
-    const formItemContext = useInjectFormItemContext()
-    const formItemInputContext = FormItemInputContext.useInject()
-    const radioOptionTypeContext = useInjectRadioOptionTypeContext()
-    const radioGroupContext = useInjectRadioGroupContext()
-    const disabledContext = useInjectDisabled()
-    const mergedDisabled = computed(() => disabled.value ?? disabledContext.value)
-
-    const vcCheckbox = ref<HTMLElement>()
-
-    const { prefixCls: radioPrefixCls, direction, disabled } = useConfigInject('radio', props)
-    const prefixCls = computed(() =>
-      radioGroupContext?.optionType.value === 'button' || radioOptionTypeContext === 'button'
-        ? `${radioPrefixCls.value}-button`
-        : radioPrefixCls.value,
-    )
-    const contextDisabled = useInjectDisabled()
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(radioPrefixCls)
-
-    const focus = () => {
-      vcCheckbox.value.focus()
-    }
-
-    const blur = () => {
-      vcCheckbox.value.blur()
-    }
-
-    expose({ focus, blur })
-
-    const handleChange = (event: RadioChangeEvent) => {
-      const targetChecked = event.target.checked
-      emit('update:checked', targetChecked)
-      emit('update:value', targetChecked)
-      emit('change', event)
-      formItemContext.onFieldChange()
-    }
-
-    const onChange = (e: RadioChangeEvent) => {
-      emit('change', e)
-      if (radioGroupContext && radioGroupContext.onChange) {
-        radioGroupContext.onChange(e)
-      }
-    }
-
-    return () => {
-      const radioGroup = radioGroupContext
-      const { prefixCls: customizePrefixCls, id = formItemContext.id.value, ...restProps } = props
-
-      const rProps: RadioProps = {
-        prefixCls: prefixCls.value,
-        id,
-        ...omit(restProps, ['onUpdate:checked', 'onUpdate:value']),
-        disabled: disabled.value ?? contextDisabled.value,
-      }
-
-      if (radioGroup) {
-        rProps.name = radioGroup.name.value
-        rProps.onChange = onChange
-        rProps.checked = props.value === radioGroup.value.value
-        rProps.disabled = mergedDisabled.value || radioGroup.disabled.value
-      } else {
-        rProps.onChange = handleChange
-      }
-      const wrapperClassString = classNames(
-        {
-          [`${prefixCls.value}-wrapper`]: true,
-          [`${prefixCls.value}-wrapper-checked`]: rProps.checked,
-          [`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
-          [`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
-          [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
-        },
-        attrs.class,
-        hashId.value,
-      )
-
-      return wrapSSR(
-        <label {...attrs} class={wrapperClassString}>
-          <VcCheckbox {...rProps} type="radio" ref={vcCheckbox} />
-          {slots.default && <span>{slots.default()}</span>}
-        </label>,
-      )
-    }
-  },
-})

package/src/radio/RadioButton.tsx

@@ -1,23 +0,0 @@
-import { defineComponent } from 'vue'
-
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Radio, { radioProps } from './Radio'
-import { useProvideRadioOptionTypeContext } from './context'
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ARadioButton',
-  inheritAttrs: false,
-  props: radioProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls } = useConfigInject('radio', props)
-    useProvideRadioOptionTypeContext('button')
-    return () => {
-      return (
-        <Radio {...attrs} {...props} prefixCls={prefixCls.value}>
-          {slots.default?.()}
-        </Radio>
-      )
-    }
-  },
-})

package/src/radio/context.ts

@@ -1,24 +0,0 @@
-import type { InjectionKey } from 'vue'
-import { inject, provide } from 'vue'
-
-import type { RadioGroupContext, RadioOptionTypeContextProps } from './interface'
-
-const radioGroupContextKey: InjectionKey<RadioGroupContext> = Symbol('radioGroupContextKey')
-export const useProvideRadioGroupContext = (props: RadioGroupContext) => {
-  provide(radioGroupContextKey, props)
-}
-
-export const useInjectRadioGroupContext = () => {
-  return inject(radioGroupContextKey, undefined)
-}
-
-const radioOptionTypeContextKey: InjectionKey<RadioOptionTypeContextProps> = Symbol(
-  'radioOptionTypeContextKey',
-)
-export const useProvideRadioOptionTypeContext = (props: RadioOptionTypeContextProps) => {
-  provide(radioOptionTypeContextKey, props)
-}
-
-export const useInjectRadioOptionTypeContext = () => {
-  return inject(radioOptionTypeContextKey, undefined)
-}

package/src/radio/index.en-US.md

@@ -1,54 +0,0 @@
----
-category: Components
-type: Data Entry
-title: Radio
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a9roS6DHFIcAAAAAAAAAAAAADrJ8AQ/original
----
-
-Radio.
-
-## When To Use
-
-- Used to select a single state from multiple options.
-- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
-
-## API
-
-### Radio/Radio.Button
-
-| Property         | Description                                                          | Type    | Default |
-| ---------------- | -------------------------------------------------------------------- | ------- | ------- |
-| autofocus        | get focus when component mounted                                     | boolean | false   |
-| checked(v-model) | Specifies whether the radio is selected.                             | boolean | -       |
-| disabled         | Disable radio                                                        | boolean | false   |
-| value            | According to value for comparison, to determine whether the selected | any     | -       |
-
-### RadioGroup
-
-Radio group can wrap a group of `Radio`。
-
-| Property       | Description                                               | Type                                                                                   | Default   | Version |
-| -------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------- | ------- |
-| buttonStyle    | style type of radio button                                | `outline` \| `solid`                                                                   | `outline` |         |
-| disabled       | Disable all radio buttons                                 | boolean                                                                                | false     |         |
-| name           | The `name` property of all `input[type="radio"]` children | string                                                                                 | -         |         |
-| options        | set children optional                                     | string\[] \| number\[] \| Array<{ label: string value: string disabled?: boolean }> | -         |         |
-| optionType     | Set Radio optionType                                      | `default` \| `button`                                                                  | `default` | 3.0.0   |
-| size           | size for radio button style                               | `large` \| `default` \| `small`                                                        | `default` |         |
-| value(v-model) | Used for setting the currently selected value.            | any                                                                                    | -         |         |
-
-### RadioGroup Events
-
-| Events Name | Description                                                     | Arguments         |
-| ----------- | --------------------------------------------------------------- | ----------------- |
-| change      | The callback function that is triggered when the state changes. | Function(e:Event) |
-
-## Methods
-
-### Radio
-
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | remove focus |
-| focus() | get focus    |

package/src/radio/index.ts

@@ -1,27 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import Group from './Group'
-import Radio from './Radio'
-import Button from './RadioButton'
-
-export type { RadioProps } from './Radio'
-export type { RadioGroupProps } from './Group'
-export type { RadioChangeEvent, RadioChangeEventTarget } from './interface'
-
-Radio.Group = Group
-Radio.Button = Button
-
-/* istanbul ignore next */
-Radio.install = function (app: App) {
-  app.component(Radio.name, Radio)
-  app.component(Radio.Group.name, Radio.Group)
-  app.component(Radio.Button.name, Radio.Button)
-  return app
-}
-
-export { Button, Group, Button as RadioButton, Group as RadioGroup }
-export default Radio as typeof Radio &
-  Plugin & {
-    readonly Group: typeof Group
-    readonly Button: typeof Button
-  }

package/src/radio/index.zh-CN.md

@@ -1,55 +0,0 @@
----
-category: Components
-type: 数据录入
-title: Radio
-subtitle: 单选框
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a9roS6DHFIcAAAAAAAAAAAAADrJ8AQ/original
----
-
-单选框。
-
-## 何时使用
-
-- 用于在多个备选项中选中单个状态。
-- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
-
-## API
-
-### Radio/Radio.Button
-
-| 参数             | 说明                              | 类型    | 默认值 |
-| ---------------- | --------------------------------- | ------- | ------ |
-| autofocus        | 自动获取焦点                      | boolean | false  |
-| checked(v-model) | 指定当前是否选中                  | boolean | false  |
-| disabled         | 禁用 Radio                        | boolean | false  |
-| value            | 根据 value 进行比较，判断是否选中 | any     | -      |
-
-### RadioGroup
-
-单选框组合，用于包裹一组 `Radio`。
-
-| 参数           | 说明                                                   | 类型                                                                                  | 默认值    | 版本  |
-| -------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------- | --------- | ----- |
-| buttonStyle    | RadioButton 的风格样式，目前有描边和填色两种风格       | `outline` \| `solid`                                                                  | `outline` |       |
-| disabled       | 禁选所有子单选器                                       | boolean                                                                               | false     |       |
-| name           | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string                                                                                | -         |       |
-| options        | 以配置形式设置子元素                                   | string\[] \| number[] \| Array<{ label: string value: string disabled?: boolean }> | -         |       |
-| optionType     | 用于设置 Radio `options` 类型                          | `default` \| `button`                                                                 | `default` | 3.0.0 |
-| size           | 大小，只对按钮样式生效                                 | `large` \| `default` \| `small`                                                       | `default` |       |
-| value(v-model) | 用于设置当前选中的值                                   | any                                                                                   | -         |       |
-
-### RadioGroup 事件
-
-| 事件名称 | 说明                 | 回调参数          |
-| -------- | -------------------- | ----------------- |
-| change   | 选项变化时的回调函数 | Function(e:Event) |
-
-## 方法
-
-### Radio
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |

package/src/radio/interface.ts

@@ -1,33 +0,0 @@
-import type { Ref } from 'vue'
-
-import type { RadioProps } from './Radio'
-
-export interface RadioChangeEventTarget extends RadioProps {
-  checked: boolean
-}
-
-export type RadioGroupButtonStyle = 'outline' | 'solid'
-export type RadioGroupOptionType = 'default' | 'button'
-
-export interface RadioChangeEvent {
-  target: RadioChangeEventTarget
-  stopPropagation: () => void
-  preventDefault: () => void
-  nativeEvent: MouseEvent
-}
-
-export interface RadioGroupContext {
-  onChange: (e: RadioChangeEvent) => void
-  value: Ref<any>
-  disabled: Ref<boolean>
-  name: Ref<string>
-  /**
-   * Control the appearance for Radio to display as button or not
-   *
-   * @default 'default'
-   * @internal
-   */
-  optionType?: Ref<RadioGroupOptionType>
-}
-
-export type RadioOptionTypeContextProps = RadioGroupOptionType