@antsoo-lib/components 0.1.11 → 0.1.12

package/src/typography/Editable.tsx

@@ -1,161 +0,0 @@
-import EnterOutlined from '@ant-design/icons-vue/EnterOutlined'
-
-import type { ExtractPropTypes, PropType } from 'vue'
-import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
-
-import type { ChangeEventHandler } from '../_util/EventInterface'
-import KeyCode from '../_util/KeyCode'
-import classNames from '../_util/classNames'
-import type { Direction } from '../config-provider'
-import TextArea from '../input/TextArea'
-import type { AutoSizeType } from '../input/inputProps'
-// CSSINJS
-import useStyle from './style'
-
-const editableProps = () => ({
-  prefixCls: String,
-  value: String,
-  maxlength: Number,
-  autoSize: { type: [Boolean, Object] as PropType<boolean | AutoSizeType> },
-  onSave: Function as PropType<(val: string) => void>,
-  onCancel: Function as PropType<() => void>,
-  onEnd: Function as PropType<() => void>,
-  onChange: Function as PropType<(val: string) => void>,
-  originContent: String,
-  direction: String as PropType<Direction>,
-  component: String,
-})
-export type EditableProps = Partial<ExtractPropTypes<ReturnType<typeof editableProps>>>
-const Editable = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Editable',
-  inheritAttrs: false,
-  props: editableProps(),
-  // emits: ['save', 'cancel', 'end', 'change'],
-  setup(props, { emit, slots, attrs }) {
-    const { prefixCls } = toRefs(props)
-    const state = reactive({
-      current: props.value || '',
-      lastKeyCode: undefined,
-      inComposition: false,
-      cancelFlag: false,
-    })
-    watch(
-      () => props.value,
-      (current) => {
-        state.current = current
-      },
-    )
-
-    const textArea = ref()
-
-    onMounted(() => {
-      if (textArea.value) {
-        const resizableTextArea = textArea.value?.resizableTextArea
-        const innerTextArea = resizableTextArea?.textArea
-        innerTextArea.focus()
-        const { length } = innerTextArea.value
-        innerTextArea.setSelectionRange(length, length)
-      }
-    })
-
-    function saveTextAreaRef(node: any) {
-      textArea.value = node
-    }
-
-    function onChange({ target: { value } }) {
-      state.current = value.replace(/[\r\n]/g, '')
-      emit('change', state.current)
-    }
-
-    function onCompositionStart() {
-      state.inComposition = true
-    }
-
-    function onCompositionEnd() {
-      state.inComposition = false
-    }
-
-    function onKeyDown(e: KeyboardEvent) {
-      const { keyCode } = e
-      if (keyCode === KeyCode.ENTER) {
-        e.preventDefault()
-      }
-      // We don't record keyCode when IME is using
-      if (state.inComposition) return
-
-      state.lastKeyCode = keyCode
-    }
-
-    function onKeyUp(e: KeyboardEvent) {
-      const { keyCode, ctrlKey, altKey, metaKey, shiftKey } = e
-
-      // Check if it's a real key
-      if (
-        state.lastKeyCode === keyCode &&
-        !state.inComposition &&
-        !ctrlKey &&
-        !altKey &&
-        !metaKey &&
-        !shiftKey
-      ) {
-        if (keyCode === KeyCode.ENTER) {
-          confirmChange()
-          emit('end')
-        } else if (keyCode === KeyCode.ESC) {
-          state.current = props.originContent
-          emit('cancel')
-        }
-      }
-    }
-
-    function onBlur() {
-      confirmChange()
-    }
-
-    function confirmChange() {
-      emit('save', state.current.trim())
-    }
-
-    // style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    return () => {
-      const textAreaClassName = classNames(
-        {
-          [`${prefixCls.value}`]: true,
-          [`${prefixCls.value}-edit-content`]: true,
-          [`${prefixCls.value}-rtl`]: props.direction === 'rtl',
-          [props.component ? `${prefixCls.value}-${props.component}` : '']: true,
-        },
-        attrs.class,
-        hashId.value,
-      )
-
-      return wrapSSR(
-        <div {...attrs} class={textAreaClassName}>
-          <TextArea
-            ref={saveTextAreaRef}
-            maxlength={props.maxlength}
-            value={state.current}
-            onChange={onChange as ChangeEventHandler}
-            onKeydown={onKeyDown}
-            onKeyup={onKeyUp}
-            onCompositionstart={onCompositionStart}
-            onCompositionend={onCompositionEnd}
-            onBlur={onBlur}
-            rows={1}
-            autoSize={props.autoSize === undefined || props.autoSize}
-          />
-          {slots.enterIcon ? (
-            slots.enterIcon({ className: `${props.prefixCls}-edit-content-confirm` })
-          ) : (
-            <EnterOutlined class={`${props.prefixCls}-edit-content-confirm`} />
-          )}
-        </div>,
-      )
-    }
-  },
-})
-
-export default Editable

package/src/typography/Link.tsx

@@ -1,37 +0,0 @@
-import type { AnchorHTMLAttributes, ExtractPropTypes, FunctionalComponent } from 'vue'
-
-import omit from '../_util/omit'
-import warning from '../_util/warning'
-import Base, { baseProps } from './Base'
-
-export const linkProps = () =>
-  omit({ ...baseProps(), ellipsis: { type: Boolean, default: undefined } }, ['component'])
-
-export type LinkProps = Partial<ExtractPropTypes<ReturnType<typeof linkProps>>> &
-  AnchorHTMLAttributes
-
-const Link: FunctionalComponent<LinkProps> = (props, { slots, attrs }) => {
-  const { ellipsis, rel, ...restProps } = { ...props, ...attrs }
-  warning(
-    typeof ellipsis !== 'object',
-    'Typography.Link',
-    '`ellipsis` only supports boolean value.',
-  )
-  const mergedProps = {
-    ...restProps,
-    rel: rel === undefined && restProps.target === '_blank' ? 'noopener noreferrer' : rel,
-    ellipsis: !!ellipsis,
-    component: 'a',
-  }
-  // https://github.com/ant-design/ant-design/issues/26622
-  // @ts-ignore
-  delete mergedProps.navigate
-
-  return <Base {...mergedProps} v-slots={slots}></Base>
-}
-
-Link.displayName = 'ATypographyLink'
-Link.inheritAttrs = false
-Link.props = linkProps()
-
-export default Link

package/src/typography/Paragraph.tsx

@@ -1,24 +0,0 @@
-import type { ExtractPropTypes, FunctionalComponent } from 'vue'
-
-import omit from '../_util/omit'
-import Base, { baseProps } from './Base'
-
-export const paragraphProps = () => omit(baseProps(), ['component'])
-
-export type ParagraphProps = Partial<ExtractPropTypes<ReturnType<typeof paragraphProps>>>
-
-const Paragraph: FunctionalComponent<ParagraphProps> = (props, { slots, attrs }) => {
-  const paragraphProps = {
-    ...props,
-    component: 'div',
-    ...attrs,
-  }
-
-  return <Base {...paragraphProps} v-slots={slots}></Base>
-}
-
-Paragraph.displayName = 'ATypographyParagraph'
-Paragraph.inheritAttrs = false
-Paragraph.props = paragraphProps()
-
-export default Paragraph

package/src/typography/Text.tsx

@@ -1,45 +0,0 @@
-import type { ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
-
-import omit from '../_util/omit'
-import warning from '../_util/warning'
-import type { EllipsisConfig } from './Base'
-import Base, { baseProps } from './Base'
-
-export const textProps = () => ({
-  ...omit(baseProps(), ['component']),
-  ellipsis: {
-    type: [Boolean, Object] as PropType<
-      boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>
-    >,
-    default: undefined as boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>,
-  },
-})
-
-export type TextProps = Partial<ExtractPropTypes<ReturnType<typeof textProps>>>
-
-const Text: FunctionalComponent<TextProps> = (props, { slots, attrs }) => {
-  const { ellipsis } = props
-  warning(
-    typeof ellipsis !== 'object' ||
-      !ellipsis ||
-      (!('expandable' in ellipsis) && !('rows' in ellipsis)),
-    'Typography.Text',
-    '`ellipsis` do not support `expandable` or `rows` props.',
-  )
-  const textProps = {
-    ...props,
-    ellipsis:
-      ellipsis && typeof ellipsis === 'object'
-        ? omit(ellipsis as any, ['expandable', 'rows'])
-        : ellipsis,
-    component: 'span',
-    ...attrs,
-  }
-  return <Base {...textProps} v-slots={slots}></Base>
-}
-
-Text.displayName = 'ATypographyText'
-Text.inheritAttrs = false
-Text.props = textProps()
-
-export default Text

package/src/typography/Title.tsx

@@ -1,40 +0,0 @@
-import type { ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
-
-import omit from '../_util/omit'
-import { tupleNum } from '../_util/type'
-import warning from '../_util/warning'
-import Base, { baseProps } from './Base'
-
-const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4, 5)
-
-export const titleProps = () => ({
-  ...omit(baseProps(), ['component', 'strong']),
-  level: Number as PropType<(typeof TITLE_ELE_LIST)[number]>,
-})
-
-export type TitleProps = Partial<ExtractPropTypes<ReturnType<typeof titleProps>>>
-
-const Title: FunctionalComponent<TitleProps> = (props, { slots, attrs }) => {
-  const { level = 1, ...restProps } = props
-  let component: string
-  if (TITLE_ELE_LIST.includes(level)) {
-    component = `h${level}`
-  } else {
-    warning(false, 'Typography', 'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value.')
-    component = 'h1'
-  }
-
-  const titleProps = {
-    ...restProps,
-    component,
-    ...attrs,
-  }
-
-  return <Base {...titleProps} v-slots={slots}></Base>
-}
-
-Title.displayName = 'ATypographyTitle'
-Title.inheritAttrs = false
-Title.props = titleProps()
-
-export default Title

package/src/typography/Typography.tsx

@@ -1,58 +0,0 @@
-import type { HTMLAttributes, PropType } from 'vue'
-import { defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { Direction } from '../config-provider'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-// CSSINJS
-import useStyle from './style'
-
-export interface TypographyProps extends HTMLAttributes {
-  direction?: Direction
-  prefixCls?: string
-}
-
-export interface InternalTypographyProps extends TypographyProps {
-  component?: string
-}
-export const typographyProps = () => ({
-  prefixCls: String,
-  direction: String as PropType<Direction>,
-  // Form Internal use
-  component: String,
-})
-const Typography = defineComponent({
-  name: 'ATypography',
-  inheritAttrs: false,
-  props: typographyProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('typography', props)
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    return () => {
-      const {
-        prefixCls: _prefixCls,
-        direction: _direction,
-        component: Component = 'article' as any,
-        ...restProps
-      } = { ...props, ...attrs }
-      return wrapSSR(
-        <Component
-          {...restProps}
-          class={classNames(
-            prefixCls.value,
-            { [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
-            attrs.class,
-            hashId.value,
-          )}
-        >
-          {slots.default?.()}
-        </Component>,
-      )
-    }
-  },
-})
-
-export default Typography

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

@@ -1,146 +0,0 @@
----
-category: Components
-type: General
-title: Typography
-cols: 1
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original
----
-
-Basic text writing, including headings, body text, lists, and more.
-
-## When To Use
-
-- When need to display a title or paragraph contents in Articles/Blogs/Notes.
-- When you need copyable/editable/ellipsis texts.
-
-## API
-
-### Typography.Text
-
-| Property         | Description                                                      | Type                                              | Default | Version               |
-| ---------------- | ---------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- |
-| code             | Code style                                                       | boolean                                           | false   |                       |
-| content(v-model) | When using ellipsis or editable, use content instead of children | string                                            | -       |                       |
-| copyable         | Whether to be copyable, customize it via setting an object       | boolean \| [copyable](#copyable)                  | false   | [copyable](#copyable) |
-| delete           | Deleted line style                                               | boolean                                           | false   |                       |
-| disabled         | Disabled content                                                 | boolean                                           | false   |                       |
-| editable         | If editable. Can control edit state when is object               | boolean \| [editable](#editable)                  | false   | [editable](#editable) |
-| ellipsis         | Display ellipsis when text overflows                             | boolean                                           | false   |                       |
-| keyboard         | Keyboard style                                                   | boolean                                           | false   |                       |
-| mark             | Marked style                                                     | boolean                                           | false   |                       |
-| strong           | Bold style                                                       | boolean                                           | false   |                       |
-| type             | Content type                                                     | `secondary` \| `success` \| `warning` \| `danger` | -       |                       |
-| underline        | Underlined style                                                 | boolean                                           | false   |                       |
-
-### Typography.Title
-
-| Property         | Description                                                                             | Type                                              | Default | Version               |
-| ---------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- |
-| code             | Code style                                                                              | boolean                                           | false   |                       |
-| content(v-model) | When using ellipsis or editable, use content instead of children                        | string                                            | -       |                       |
-| copyable         | Whether to be copyable, customize it via setting an object                              | boolean \| [copyable](#copyable)                  | false   | [copyable](#copyable) |
-| delete           | Deleted line style                                                                      | boolean                                           | false   |                       |
-| disabled         | Disabled content                                                                        | boolean                                           | false   |                       |
-| editable         | If editable. Can control edit state when is object                                      | boolean \| [editable](#editable)                  | false   | [editable](#editable) |
-| ellipsis         | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis)                  | false   | [ellipsis](#ellipsis) |
-| level            | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5`                         | number: 1, 2, 3, 4, 5                             | 1       |                       |
-| mark             | Marked style                                                                            | boolean                                           | false   |                       |
-| type             | Content type                                                                            | `secondary` \| `success` \| `warning` \| `danger` | -       |                       |
-| underline        | Underlined style                                                                        | boolean                                           | false   |                       |
-
-### Typography.Paragraph
-
-| Property         | Description                                                                             | Type                                              | Default | Version               |
-| ---------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- |
-| code             | Code style                                                                              | boolean                                           | false   |                       |
-| content(v-model) | When using ellipsis or editable, use content instead of children                        | string                                            | -       |                       |
-| copyable         | Whether to be copyable, customize it via setting an object                              | boolean \| [copyable](#copyable)                  | false   | [copyable](#copyable) |
-| delete           | Deleted line style                                                                      | boolean                                           | false   |                       |
-| disabled         | Disabled content                                                                        | boolean                                           | false   |                       |
-| editable         | If editable. Can control edit state when is object                                      | boolean \| [editable](#editable)                  | false   | [editable](#editable) |
-| ellipsis         | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis)                  | false   | [ellipsis](#ellipsis) |
-| mark             | Marked style                                                                            | boolean                                           | false   |                       |
-| strong           | Bold style                                                                              | boolean                                           | false   |                       |
-| type             | Content type                                                                            | `secondary` \| `success` \| `warning` \| `danger` | -       |                       |
-| underline        | Underlined style                                                                        | boolean                                           | false   |                       |
-
-### slots
-
-| Name              | Description                                               | Property              | Default                                         | Version |
-| ----------------- | --------------------------------------------------------- | --------------------- | ----------------------------------------------- | ------- |
-| copyableIcon      | Custom copy icon                                          | `{ copied: boolean }` | `copied ? <CheckOutlined /> : <CopyOutlined />` |         |
-| copyableTooltip   | Custom tooltip text, hide when `copyable.tooltip = false` | `{ copied: boolean }` | `copied ? 'Copied' : 'Copy'`                    |         |
-| editableEnterIcon | Custom "enter" icon in the edit field                     | `{className: string}` | `<EnterOutlined />`                             | 3.0     |
-| editableIcon      | Custom editable icon                                      | -                     | &lt;EditOutlined />                             |         |
-| editableTooltip   | Custom tooltip text, hide when `editable.tooltip = false` | -                     | `Edit`                                          |         |
-| ellipsisSymbol    | Custom description of ellipsis                            | -                     | -                                               |         |
-| ellipsisTooltip   | Show tooltip when ellipsis                                | -                     | -                                               |         |
-
-### copyable
-
-```json
-  {
-    text: string,
-    onCopy: function(event),
-    tooltip: false,
-  }
-```
-
-| Property | Description             | Type     | Default | Version |
-| -------- | ----------------------- | -------- | ------- | ------- |
-| text     | The text to copy        | string   | -       |         |
-| tooltip  | Whether to show tooltip | boolean  | true    |         |
-| onCopy   | Called when copied text | function | -       |         |
-
-### editable
-
-```json
-  {
-    tooltip: boolean,
-    editing: boolean,
-    maxlength: number,
-    autoSize: boolean | { minRows: number, maxRows: number },
-    onStart: function,
-    onChange: function(string),
-    onCancel: function,
-    onEnd: function,
-    triggerType: ('icon' | 'text')[],
-  }
-```
-
-| Property    | Description                                                                      | Type                                            | Default   | Version |
-| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------- | --------- | ------- |
-| autoSize    | `autoSize` attribute of textarea                                                 | boolean \| { minRows: number, maxRows: number } | -         |         |
-| editing     | Whether to be editable                                                           | boolean                                         | false     |         |
-| maxlength   | `maxlength` attribute of textarea                                                | number                                          | -         |         |
-| tooltip     | Whether to show tooltip                                                          | boolean                                         | true      |         |
-| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`>                        | \[`icon`] |         |
-| onCancel    | Called when type ESC to exit editable state                                      | function                                        | -         |         |
-| onChange    | Called when input at textarea                                                    | function(event)                                 | -         |         |
-| onEnd       | Called when type ENTER to exit editable state                                    | function                                        | -         |         |
-| onStart     | Called when enter editable state                                                 | function                                        | -         |         |
-
-### ellipsis
-
-```json
-  {
-    rows: number,
-    expandable: boolean,
-    suffix: string,
-    symbol: string,
-    tooltip: boolean | string,
-    onExpand: function(event),
-    onEllipsis: function(ellipsis),
-  }
-```
-
-| Property   | Description                               | Type               | Default  | Version |
-| ---------- | ----------------------------------------- | ------------------ | -------- | ------- |
-| expandable | Whether to be expandable                  | boolean            | -        |         |
-| rows       | Max rows of content                       | number             | -        |         |
-| suffix     | Suffix of ellipsis content                | string             | -        |         |
-| symbol     | Custom description of ellipsis            | string             | `Expand` |         |
-| tooltip    | Show tooltip when ellipsis                | boolean \| string  | -        |         |
-| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | -        |         |
-| onExpand   | Called when expand content                | function(event)    | -        |         |

package/src/typography/index.tsx

@@ -1,41 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import Base from './Base'
-import Link from './Link'
-import Paragraph from './Paragraph'
-import Text from './Text'
-import Title from './Title'
-import Typography from './Typography'
-
-export type { TypographyProps } from './Typography'
-
-Typography.Text = Text
-Typography.Title = Title
-Typography.Paragraph = Paragraph
-Typography.Link = Link
-Typography.Base = Base
-
-Typography.install = function (app: App) {
-  app.component(Typography.name, Typography)
-  app.component(Typography.Text.displayName, Text)
-  app.component(Typography.Title.displayName, Title)
-  app.component(Typography.Paragraph.displayName, Paragraph)
-  app.component(Typography.Link.displayName, Link)
-  return app
-}
-
-export {
-  Link as TypographyLink,
-  Paragraph as TypographyParagraph,
-  Text as TypographyText,
-  Title as TypographyTitle,
-}
-
-export default Typography as typeof Typography &
-  Plugin & {
-    readonly Text: typeof Text
-    readonly Title: typeof Title
-    readonly Paragraph: typeof Paragraph
-    readonly Link: typeof Link
-    readonly Base: typeof Base
-  }