@antsoo-lib/components 0.1.2 → 0.1.4

package/src/qrcode/style/index.ts

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

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

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

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

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

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

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

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

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