@antsoo-lib/components 0.1.11 → 0.1.12

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

@@ -1,248 +0,0 @@
----
-category: Components
-type: 通用
-title: Icon
-subtitle: 图标
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
----
-
-语义化的矢量图形。使用图标组件，你需要安装 `@ant-design/icons-vue` 图标组件包：
-
-```bash
-npm install --save @ant-design/icons-vue
-```
-
-## 设计师专属
-
-安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
-
-## API
-
-### 通用图标
-
-| 参数         | 说明                                       | 类型                  | 默认值 | 版本 |
-| ------------ | ------------------------------------------ | --------------------- | ------ | ---- |
-| rotate       | 图标旋转角度（IE9 无效）                   | number                | -      |      |
-| spin         | 是否有旋转动画                             | boolean               | false  |      |
-| style        | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties         | -      |      |
-| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色     | string (十六进制颜色) | -      |      |
-
-其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
-
-```jsx
-import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
-
-<star-outlined />
-<star-filled />
-<star-two-tone two-tone-color="#eb2f96" />
-```
-
-### 自定义 Icon/Custom Icon
-
-| 参数      | 说明                                                           | 类型                                       | 默认值 | 版本 |
-| --------- | -------------------------------------------------------------- | ------------------------------------------ | ------ | ---- |
-| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `Vue` 组件 | ComponentType&lt;CustomIconComponentProps> | -      |      |
-| rotate    | 图标旋转角度（IE9 无效）                                       | number                                     | -      |      |
-| spin      | 是否有旋转动画                                                 | boolean                                    | false  |      |
-| style     | 设置图标的样式，例如 `fontSize` 和 `color`                     | CSSProperties                              | -      |      |
-
-### SVG 图标
-
-在 `1.2.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：
-
-- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
-- 在低端设备上 SVG 有更好的清晰度。
-- 支持多色图标。
-- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
-
-更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
-
-所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `class` 设置图标的大小和单色图标的颜色。例如：
-
-```html
-<template>
-  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
-</template>
-<script>
-  import { MessageOutlined } from '@ant-design/icons-vue'
-
-  import { defineComponent } from 'vue'
-
-  export default defineComponent({
-    components: {
-      MessageOutlined,
-    },
-  })
-</script>
-```
-
-### 双色图标主色
-
-对于双色图标，可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
-
-```jsx
-import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons-vue'
-
-setTwoToneColor('#eb2f96')
-getTwoToneColor() // #eb2f96
-```
-
-### 自定义 font 图标
-
-在 `1.2.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
-
-```jsx
-import { createFromIconfontCN } from '@ant-design/icons-vue'
-
-import { defineComponent } from 'vue'
-
-const MyIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
-})
-
-export default defineComponent({
-  setup() {
-    return () => <MyIcon type="icon-dianzan" />
-  },
-})
-```
-
-其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
-
-`options` 的配置项如下：
-
-| 参数             | 说明                                                        | 类型                                 | 默认值 |
-| ---------------- | ----------------------------------------------------------- | ------------------------------------ | ------ |
-| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性           | `{ class, attrs, props, on, style }` | {}     |
-| scriptUrl        | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string                               | -      |
-
-在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
-
-见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
-
-### 自定义 SVG 图标
-
-#### vue cli 3
-
-可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。
-
-```js
-// vue.config.js
-module.exports = {
-  chainWebpack: (config) => {
-    const svgRule = config.module.rule('svg')
-
-    svgRule.uses.clear()
-
-    svgRule.use('vue-svg-loader').loader('vue-svg-loader')
-  },
-}
-```
-
-```jsx
-import Icon from '@ant-design/icons-vue'
-import MessageSvg from 'path/to/message.svg'
-
-import { defineComponent } from 'vue'
-
-// '*.svg' 文件的路径
-
-export default defineComponent({
-  setup() {
-    return () => <Icon type={MessageSvg} />
-  },
-})
-```
-
-#### Rsbuild
-
-Rsbuild 是新一代构建工具，官网 https://rsbuild.dev/
-
-自己实现一个 `vue-svg-loader.js` 文件，好处是可以自定义美化 svg，然后在 `rsbuild.config.ts` 中配置：
-
-```js
-// vue-svg-loader.js
-
-const { optimize } = require('svgo')
-const { version } = require('vue')
-const semverMajor = require('semver/functions/major')
-
-module.exports = async function (svg) {
-  const callback = this.async()
-
-  try {
-    ;({ data: svg } = await optimize(svg, {
-      path: this.resourcePath,
-      js2svg: {
-        indent: 2,
-        pretty: true,
-      },
-      plugins: [
-        'convertStyleToAttrs',
-        'removeDoctype',
-        'removeXMLProcInst',
-        'removeComments',
-        'removeMetadata',
-        'removeTitle',
-        'removeDesc',
-        'removeStyleElement',
-        'removeXMLNS',
-        'removeXMLProcInst',
-      ],
-    }))
-  } catch (error) {
-    callback(error)
-    return
-  }
-
-  if (semverMajor(version) === 2) {
-    svg = svg.replace('<svg', '<svg v-on="$listeners"')
-  }
-
-  callback(null, `<template>${svg}</template>`)
-}
-```
-
-```js
-// rsbuild.config.ts
-/* eslint-disable */
-import { defineConfig } from '@rsbuild/core'
-import { pluginVue } from '@rsbuild/plugin-vue'
-
-export default defineConfig({
-  tools: {
-    bundlerChain(chain, { CHAIN_ID }) {
-      chain.module
-        // 先给svg排除默认的规则，方便下面自定义loader
-        .rule(CHAIN_ID.RULE.SVG)
-        .exclude.add(/\.svg$/)
-    },
-    rspack: {
-      module: {
-        rules: [
-          {
-            test: /\.svg$/,
-            use: ['vue-loader', 'vue-svg-loader'],
-          },
-        ],
-      },
-      resolveLoader: {
-        alias: {
-          'vue-svg-loader': require('path').join(__dirname, './vue-svg-loader.js'),
-        },
-      },
-    },
-  },
-})
-```
-
-`Icon` 中的 `component` 组件的接受的属性如下：
-
-| 字段   | 说明                    | 类型             | 只读值         |
-| ------ | ----------------------- | ---------------- | -------------- |
-| class  | 计算后的 `svg` 类名     | string           | -              |
-| fill   | `svg` 元素填充的颜色    | string           | 'currentColor' |
-| height | `svg` 元素高度          | string \| number | '1em'          |
-| style  | 计算后的 `svg` 元素样式 | CSSProperties    | -              |
-| width  | `svg` 元素宽度          | string \| number | '1em'          |

package/src/image/PreviewGroup.tsx

@@ -1,77 +0,0 @@
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'
-import RightOutlined from '@ant-design/icons-vue/RightOutlined'
-import RotateLeftOutlined from '@ant-design/icons-vue/RotateLeftOutlined'
-import RotateRightOutlined from '@ant-design/icons-vue/RotateRightOutlined'
-import SwapOutlined from '@ant-design/icons-vue/SwapOutlined'
-import ZoomInOutlined from '@ant-design/icons-vue/ZoomInOutlined'
-import ZoomOutOutlined from '@ant-design/icons-vue/ZoomOutOutlined'
-
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import { getTransitionName } from '../_util/transition'
-import { anyType } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { PreviewGroupPreview } from '../vc-image/src/PreviewGroup'
-import PreviewGroup from '../vc-image/src/PreviewGroup'
-import useStyle from './style'
-
-export const icons = {
-  rotateLeft: <RotateLeftOutlined />,
-  rotateRight: <RotateRightOutlined />,
-  zoomIn: <ZoomInOutlined />,
-  zoomOut: <ZoomOutOutlined />,
-  close: <CloseOutlined />,
-  left: <LeftOutlined />,
-  right: <RightOutlined />,
-  flipX: <SwapOutlined />,
-  flipY: <SwapOutlined rotate={90} />,
-}
-const previewGroupProps = () => ({
-  previewPrefixCls: String,
-  preview: anyType<boolean | PreviewGroupPreview>(),
-})
-export type ImageGroupProps = Partial<ExtractPropTypes<ReturnType<typeof previewGroupProps>>>
-
-const InternalPreviewGroup = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AImagePreviewGroup',
-  inheritAttrs: false,
-  props: previewGroupProps(),
-  setup(props, { attrs, slots }) {
-    const { prefixCls, rootPrefixCls } = useConfigInject('image', props)
-    const previewPrefixCls = computed(() => `${prefixCls.value}-preview`)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const mergedPreview = computed(() => {
-      const { preview } = props
-      if (preview === false) {
-        return preview
-      }
-      const _preview = typeof preview === 'object' ? preview : {}
-
-      return {
-        ..._preview,
-        rootClassName: hashId.value,
-        transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
-        maskTransitionName: getTransitionName(
-          rootPrefixCls.value,
-          'fade',
-          _preview.maskTransitionName,
-        ),
-      }
-    })
-    return () => {
-      return wrapSSR(
-        <PreviewGroup
-          {...{ ...attrs, ...props }}
-          preview={mergedPreview.value}
-          icons={icons}
-          previewPrefixCls={previewPrefixCls.value}
-          v-slots={slots}
-        ></PreviewGroup>,
-      )
-    }
-  },
-})
-export default InternalPreviewGroup

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

@@ -1,48 +0,0 @@
----
-category: Components
-type: Data Display
-title: Image
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
----
-
-Previewable image.
-
-## When To Use
-
-- When you need to display pictures.
-- Display when loading a large image or fault tolerant handling when loading fail.
-
-## API
-
-| Property    | Description                                               | Type                                   | Default | Version |
-| ----------- | --------------------------------------------------------- | -------------------------------------- | ------- | ------- |
-| alt         | Image description                                         | string                                 | -       | 2.0.0   |
-| fallback    | Load failure fault-tolerant src                           | string                                 | -       | 2.0.0   |
-| height      | Image height                                              | string \| number                       | -       | 2.0.0   |
-| placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot                        | -       | 2.0.0   |
-| preview     | preview config, disabled when `false`                     | boolean \| [previewType](#previewtype) | true    | 2.0.0   |
-| src         | Image path                                                | string                                 | -       | 2.0.0   |
-| previewMask | custom mask                                               | false \| function \| slot              | -       | 3.2.0   |
-| width       | Image width                                               | string \| number                       | -       | 2.0.0   |
-
-### events
-
-| Events Name | Description          | Arguments              | Version |
-| ----------- | -------------------- | ---------------------- | ------- |
-| error       | Load failed callback | (event: Event) => void | 3.2.0   |
-
-### previewType
-
-```ts
-{
-  visible?: boolean;
-  onVisibleChange?: (visible, prevVisible) => void;
-  getContainer?: string | HTMLElement | (() => HTMLElement);
-  src?: string;
-  maskClassName?: string;
-  current?: number;
-}
-```
-
-Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)

package/src/image/index.tsx

@@ -1,87 +0,0 @@
-import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'
-
-import type { App, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { getTransitionName } from '../_util/transition'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import defaultLocale from '../locale/en_US'
-import ImageInternal from '../vc-image'
-import { imageProps } from '../vc-image/src/Image'
-import PreviewGroup, { icons } from './PreviewGroup'
-import useStyle from './style'
-
-export type ImageProps = Partial<
-  ExtractPropTypes<ReturnType<typeof imageProps>> &
-    Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
->
-const Image = defineComponent({
-  name: 'AImage',
-  inheritAttrs: false,
-  props: imageProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls, rootPrefixCls, configProvider } = useConfigInject('image', props)
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const mergedPreview = computed(() => {
-      const { preview } = props
-
-      if (preview === false) {
-        return preview
-      }
-      const _preview = typeof preview === 'object' ? preview : {}
-
-      return {
-        icons,
-        ..._preview,
-        transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
-        maskTransitionName: getTransitionName(
-          rootPrefixCls.value,
-          'fade',
-          _preview.maskTransitionName,
-        ),
-      }
-    })
-
-    return () => {
-      const imageLocale = configProvider.locale?.value?.Image || defaultLocale.Image
-      const defaultPreviewMask = () => (
-        <div class={`${prefixCls.value}-mask-info`}>
-          <EyeOutlined />
-          {imageLocale?.preview}
-        </div>
-      )
-      const { previewMask = slots.previewMask || defaultPreviewMask } = props
-      return wrapSSR(
-        <ImageInternal
-          {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
-          preview={mergedPreview.value}
-          rootClassName={classNames(props.rootClassName, hashId.value)}
-          v-slots={{
-            ...slots,
-            previewMask: typeof previewMask === 'function' ? previewMask : null,
-          }}
-        ></ImageInternal>,
-      )
-    }
-  },
-})
-
-export { imageProps }
-
-Image.PreviewGroup = PreviewGroup
-
-Image.install = function (app: App) {
-  app.component(Image.name, Image)
-  app.component(Image.PreviewGroup.name, Image.PreviewGroup)
-  return app
-}
-
-export { PreviewGroup as ImagePreviewGroup }
-
-export default Image as typeof Image &
-  Plugin & {
-    readonly PreviewGroup: typeof PreviewGroup
-  }

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

@@ -1,49 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Image
-subtitle: 图片
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
----
-
-可预览的图片。
-
-## 何时使用
-
-- 需要展示图片时使用。
-- 加载大图时显示 loading 或加载失败时容错处理。
-
-## API
-
-| 参数        | 说明                               | 类型                                   | 默认值 | 版本  |
-| ----------- | ---------------------------------- | -------------------------------------- | ------ | ----- |
-| alt         | 图像描述                           | string                                 | -      | 2.0.0 |
-| fallback    | 加载失败容错地址                   | string                                 | -      | 2.0.0 |
-| height      | 图像高度                           | string \| number                       | -      | 2.0.0 |
-| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot                        | -      | 2.0.0 |
-| preview     | 预览参数，为 `false` 时禁用        | boolean \| [previewType](#previewtype) | true   | 2.0.0 |
-| src         | 图片地址                           | string                                 | -      | 2.0.0 |
-| previewMask | 自定义 mask                        | false \| function \| slot              | -      | 3.2.0 |
-| width       | 图像宽度                           | string \| number                       | -      | 2.0.0 |
-
-### 事件
-
-| 事件名称 | 说明         | 回调参数               | 版本  |
-| -------- | ------------ | ---------------------- | ----- |
-| error    | 加载错误回调 | (event: Event) => void | 3.2.0 |
-
-### previewType
-
-```ts
-{
-  visible?: boolean;
-  onVisibleChange?: (visible, prevVisible) => void;
-  getContainer: string | HTMLElement | (() => HTMLElement);
-  src?: string;
-  maskClassName?: string;
-  current?: number;
-}
-```
-
-其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)