feat: add qrcode

components/locale/en_US.ts

@@ -131,6 +131,10 @@ const localeValues: Locale = {
   Image: {
     preview: 'Preview',
   },
+  QRCode: {
+    expired: 'QR code expired',
+    refresh: 'Refresh',
+  },
 };
 
 export default localeValues;

components/locale/index.tsx

@@ -42,6 +42,10 @@ export interface Locale {
     copied?: any;
     expand?: any;
   };
+  QRCode: {
+    expired?: string;
+    refresh?: string;
+  };
 }
 
 export interface LocaleProviderProps {

components/locale/zh_CN.ts

@@ -130,6 +130,10 @@ const localeValues: Locale = {
   Image: {
     preview: '预览',
   },
+  QRCode: {
+    expired: '二维码已过期',
+    refresh: '点击刷新',
+  },
 };
 
 export default localeValues;

components/qrcode/demo/base.vue

@@ -15,7 +15,7 @@ Basic Usage.
 </docs>
 
 <template>
-  <a-qr-code value="https://www.antdv.com/" />
+  <a-qrcode value="https://www.antdv.com/" />
 </template>
 
 <script lang="ts">

components/qrcode/demo/customColor.vue

@@ -16,8 +16,8 @@ Custom Color.
 
 <template>
   <a-space>
-    <div><a-qr-code value="http://www.antv.com" color="#73d13d" /></div>
-    <div><a-qr-code value="http://www.antv.com" color="#1677ff" /></div>
+    <div><a-qrcode value="http://www.antv.com" color="#73d13d" /></div>
+    <div><a-qrcode value="http://www.antv.com" color="#1677ff" /></div>
   </a-space>
 </template>
 

components/qrcode/demo/customSize.vue

@@ -27,7 +27,7 @@ Custom Size.
   </a-button-group>
   <br />
   <br />
-  <a-qr-code
+  <a-qrcode
     :size="size"
     :icon-size="size / 4"
     error-level="H"

components/qrcode/demo/download.vue

@@ -15,7 +15,7 @@ A way to download QRCode.
 </docs>
 
 <template>
-  <a-qr-code ref="qrcodeCanvasRef" value="http://www.antv.com" />
+  <a-qrcode ref="qrcodeCanvasRef" value="http://www.antv.com" />
   <br />
   <br />
   <a-button type="primary" @click="dowloadChange">Downlaod</a-button>

components/qrcode/demo/errorLevel.vue

@@ -15,7 +15,7 @@ set Error Level.
 </docs>
 
 <template>
-  <a-qr-code v-model:error-level="level" value="http://www.antv.com" />
+  <a-qrcode v-model:error-level="level" value="http://www.antv.com" />
   <br />
   <br />
   <a-segmented v-model:value="level" :options="segmentedData" />

components/qrcode/demo/icon.vue

@@ -15,7 +15,7 @@ QRCode with Icon.
 </docs>
 
 <template>
-  <a-qr-code
+  <a-qrcode
     error-level="H"
     value="https://www.antv.com"
     icon="https://www.antdv.com/assets/logo.1ef800a8.svg"

components/qrcode/demo/popover.vue

@@ -17,7 +17,7 @@ With Popover.
 <template>
   <a-popover>
     <template #content>
-      <a-qr-code value="http://www.antv.com" />
+      <a-qrcode value="http://www.antv.com" />
     </template>
     <img width="100" height="100" src="https://aliyuncdn.antdv.com/logo.png" />
   </a-popover>

components/qrcode/demo/status.vue

@@ -16,8 +16,8 @@ The status can be controlled by the value `status`.
 
 <template>
   <a-space>
-    <div><a-qr-code value="http://www.antv.com" status="loading" /></div>
-    <div><a-qr-code value="http://www.antv.com" status="expired" @refresh="refreshChange" /></div>
+    <div><a-qrcode value="http://www.antv.com" status="loading" /></div>
+    <div><a-qrcode value="http://www.antv.com" status="expired" @refresh="refreshChange" /></div>
   </a-space>
 </template>
 

components/qrcode/index.en-US.md

@@ -21,7 +21,12 @@ Used when the link needs to be converted into a QR Code.
 | bordered | Whether has border style | boolean | `true` |
 | errorLevel | Error Code Level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` |
 | status | QRCode status | `active` \| `expired` \| `loading ` | `active` |
-| onRefresh | callback | `() => void` | - |
+
+### events
+
+| Events Name | Description | Arguments    | Version |
+| :---------- | :---------- | :----------- | :------ |
+| refresh     | callback    | `() => void` | -       |
 
 ## FAQ
 

components/qrcode/index.tsx

@@ -4,16 +4,14 @@ import classNames from '../_util/classNames';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { initDefaultProps } from '../_util/props-util';
 import useStyle from './style';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import { useLocaleReceiver } from '../locale/LocaleReceiver';
+import defaultLocale from '../locale/en_US';
 import { toCanvas, toDataURL } from 'qrcode';
 import { withInstall } from '../_util/type';
-import theme from '../theme';
-import warning from '../_util/warning';
 import Spin from '../spin';
 import Button from '../button';
 import { ReloadOutlined } from '@ant-design/icons-vue';
-
-const { useToken } = theme;
+import { useToken } from '../theme/internal';
 
 interface QRCodeCanvasColor {
   dark?: string; // 默认#000000ff
@@ -30,17 +28,9 @@ interface QRCodeCanvasOptions {
   width: number;
   color?: QRCodeCanvasColor;
 }
-interface QRCodeCanvasProps {
-  value: string;
-  errorLevel?: string;
-  size: number;
-  icon?: string;
-  iconSize?: number;
-  color?: string;
-}
 const qrcodeProps = () => {
   return {
-    value: String,
+    value: { type: String, required: true },
     errorLevel: String,
     size: { type: Number, default: 160 },
     icon: String,
@@ -120,73 +110,53 @@ const QRCodeCanvas = defineComponent({
   },
 });
 const QRCode = defineComponent({
-  name: 'AQrCode',
+  name: 'AQrcode',
   props: initDefaultProps(qrcodeProps(), {}),
   emits: ['refresh'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
+    const [locale] = useLocaleReceiver('QRCode', defaultLocale.QRCode);
     const { prefixCls } = useConfigInject('qrcode', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const { value, errorLevel, size, icon, iconSize, color, status, bordered } = toRefs(props);
+    const [, token] = useToken();
+    const { value, size, status, bordered } = toRefs(props);
     const pre = prefixCls.value;
-    if (!props.value) {
-      if (process.env.NODE_ENV !== 'production') {
-        warning(false, 'QRCode', 'need to receive `value` props');
-      }
-      return null;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      warning(
-        !(icon.value && errorLevel.value === 'L'),
-        'QRCode',
-        'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.',
-      );
-    }
-    const qrcodeCanvasProps: QRCodeCanvasProps = {
-      value: value.value,
-      errorLevel: errorLevel.value,
-      size: size.value - 26,
-      icon: icon.value,
-      iconSize: iconSize.value,
-      color: color.value,
+    const toDataUrl = async () => {
+      return await toDataURL(value.value);
     };
+    expose({ toDataUrl });
     return () => {
       return wrapSSR(
-        <LocaleReceiver
-          componentName="QRCode"
-          children={() => {
-            return (
-              <div
-                style={{ width: size.value + 'px', height: size.value + 'px' }}
-                class={classNames(hashId.value, pre, {
-                  [`${prefixCls}-borderless`]: !bordered.value,
-                })}
-              >
-                {status.value !== 'active' && (
-                  <div class={classNames(`${pre}-mask`)}>
-                    {status.value === 'loading' && <Spin />}
-                    {status.value === 'expired' && (
-                      <>
-                        <p class={classNames(`${pre}-expired`)}>二维码已过期</p>
-                        <Button type="link" onClick={() => emit('refresh')}>
-                          <ReloadOutlined />
-                          点击刷新
-                        </Button>
-                      </>
-                    )}
-                  </div>
-                )}
-                <QRCodeCanvas {...qrcodeCanvasProps} />
-              </div>
-            );
-          }}
-        />,
+        <div
+          style={{ width: size.value + 'px', height: size.value + 'px' }}
+          class={classNames(hashId.value, pre, {
+            [`${prefixCls}-borderless`]: !bordered.value,
+          })}
+        >
+          {status.value !== 'active' && (
+            <div class={classNames(`${pre}-mask`)}>
+              {status.value === 'loading' && <Spin />}
+              {status.value === 'expired' && (
+                <>
+                  <p class={classNames(`${pre}-expired`)}>{locale.value.expired}</p>
+                  <Button type="link" onClick={() => emit('refresh')}>
+                    <ReloadOutlined />
+                    {locale.value.refresh}
+                  </Button>
+                </>
+              )}
+            </div>
+          )}
+          <QRCodeCanvas
+            value={props.value}
+            errorLevel={props.errorLevel}
+            size={props.size - (token.value.paddingSM + token.value.lineWidth) * 2}
+            icon={props.icon}
+            iconSize={props.iconSize}
+            color={props.color}
+          />
+        </div>,
       );
     };
   },
-  methods: {
-    async toDataUrl() {
-      return await toDataURL(this.value);
-    },
-  },
 });
 export default withInstall(QRCode);

components/qrcode/index.zh-CN.md

@@ -22,7 +22,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAA
 | bordered | 是否有边框 | boolean | `true` |
 | errorLevel | 二维码纠错等级 | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` |
 | status | 二维码状态 | `active` \| `expired` \| `loading ` | `active` |
-| onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
+
+### 事件
+
+| 事件名称 | 说明                 | 回调参数     | 版本 |
+| :------- | :------------------- | :----------- | :--- |
+| refresh  | 点击"点击刷新"的回调 | `() => void` | -    |
 
 ## FAQ