refactor: table

components/_util/getScrollBarSize.js → components/_util/getScrollBarSize.ts

@@ -1,6 +1,12 @@
-let cached;
+/* eslint-disable no-param-reassign */
+
+let cached: number;
+
+export default function getScrollBarSize(fresh?: boolean) {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
 
-export default function getScrollBarSize(fresh) {
   if (fresh || cached === undefined) {
     const inner = document.createElement('div');
     inner.style.width = '100%';
@@ -10,8 +16,8 @@ export default function getScrollBarSize(fresh) {
     const outerStyle = outer.style;
 
     outerStyle.position = 'absolute';
-    outerStyle.top = 0;
-    outerStyle.left = 0;
+    outerStyle.top = '0';
+    outerStyle.left = '0';
     outerStyle.pointerEvents = 'none';
     outerStyle.visibility = 'hidden';
     outerStyle.width = '200px';
@@ -36,3 +42,21 @@ export default function getScrollBarSize(fresh) {
   }
   return cached;
 }
+
+function ensureSize(str: string) {
+  const match = str.match(/^(.*)px$/);
+  const value = Number(match?.[1]);
+  return Number.isNaN(value) ? getScrollBarSize() : value;
+}
+
+export function getTargetScrollBarSize(target: HTMLElement) {
+  if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
+    return { width: 0, height: 0 };
+  }
+
+  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');
+  return {
+    width: ensureSize(width),
+    height: ensureSize(height),
+  };
+}

components/_util/props-util/index.js

@@ -29,6 +29,7 @@ const parseStyleText = (cssText = '', camel) => {
   const res = {};
   const listDelimiter = /;(?![^(]*\))/g;
   const propertyDelimiter = /:(.+)/;
+  if (typeof cssText === 'object') return cssText;
   cssText.split(listDelimiter).forEach(function (item) {
     if (item) {
       const tmp = item.split(propertyDelimiter);

components/_util/reactivePick.ts

@@ -0,0 +1,14 @@
+import type { UnwrapRef } from 'vue';
+import { reactive, toRef } from 'vue';
+
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * @see https://vueuse.js.org/reactivePick
+ */
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: K[]
+): { [S in K]: UnwrapRef<T[S]> } {
+  return reactive(Object.fromEntries(keys.map(k => [k, toRef(obj, k)]))) as any;
+}

components/_util/toReactive.ts

@@ -0,0 +1,42 @@
+import { isRef, reactive } from 'vue';
+import type { Ref } from 'vue';
+type MaybeRef<T> = T | Ref<T>;
+/**
+ * Converts ref to reactive.
+ *
+ * @see https://vueuse.org/toReactive
+ * @param objectRef A ref of object
+ */
+export function toReactive<T extends object>(objectRef: MaybeRef<T>): T {
+  if (!isRef(objectRef)) return reactive(objectRef) as T;
+
+  const proxy = new Proxy(
+    {},
+    {
+      get(_, p, receiver) {
+        return Reflect.get(objectRef.value, p, receiver);
+      },
+      set(_, p, value) {
+        (objectRef.value as any)[p] = value;
+        return true;
+      },
+      deleteProperty(_, p) {
+        return Reflect.deleteProperty(objectRef.value, p);
+      },
+      has(_, p) {
+        return Reflect.has(objectRef.value, p);
+      },
+      ownKeys() {
+        return Object.keys(objectRef.value);
+      },
+      getOwnPropertyDescriptor() {
+        return {
+          enumerable: true,
+          configurable: true,
+        };
+      },
+    },
+  );
+
+  return reactive(proxy) as T;
+}

components/_util/util.js

@@ -62,4 +62,9 @@ export function getDataAndAriaProps(props) {
   }, {});
 }
 
+export function toPx(val) {
+  if (typeof val === 'number') return `${val}px`;
+  return val;
+}
+
 export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

components/checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+import type { ExtractPropTypes } from 'vue';
 import { defineComponent, inject, nextTick } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
@@ -9,11 +10,8 @@ import type { RadioChangeEvent } from '../radio/interface';
 import type { EventHandler } from '../_util/EventInterface';
 function noop() {}
 
-export default defineComponent({
-  name: 'ACheckbox',
-  inheritAttrs: false,
-  __ANT_CHECKBOX: true,
-  props: {
+export const checkboxProps = () => {
+  return {
     prefixCls: PropTypes.string,
     defaultChecked: PropTypes.looseBool,
     checked: PropTypes.looseBool,
@@ -27,7 +25,17 @@ export default defineComponent({
     autofocus: PropTypes.looseBool,
     onChange: PropTypes.func,
     'onUpdate:checked': PropTypes.func,
-  },
+    skipGroup: PropTypes.looseBool,
+  };
+};
+
+export type CheckboxProps = Partial<ExtractPropTypes<ReturnType<typeof checkboxProps>>>;
+
+export default defineComponent({
+  name: 'ACheckbox',
+  inheritAttrs: false,
+  __ANT_CHECKBOX: true,
+  props: checkboxProps(),
   emits: ['change', 'update:checked'],
   setup() {
     return {
@@ -38,6 +46,9 @@ export default defineComponent({
 
   watch: {
     value(value, prevValue) {
+      if (this.skipGroup) {
+        return;
+      }
       nextTick(() => {
         const { checkboxGroupContext: checkboxGroup = {} } = this;
         if (checkboxGroup.registerValue && checkboxGroup.cancelValue) {
@@ -85,7 +96,7 @@ export default defineComponent({
     const props = getOptionProps(this);
     const { checkboxGroupContext: checkboxGroup, $attrs } = this;
     const children = getSlot(this);
-    const { indeterminate, prefixCls: customizePrefixCls, ...restProps } = props;
+    const { indeterminate, prefixCls: customizePrefixCls, skipGroup, ...restProps } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
     const {
@@ -101,7 +112,7 @@ export default defineComponent({
       prefixCls,
       ...restAttrs,
     };
-    if (checkboxGroup) {
+    if (checkboxGroup && !skipGroup) {
       checkboxProps.onChange = (...args) => {
         this.$emit('change', ...args);
         checkboxGroup.toggleOption({ label: children, value: props.value });

components/checkbox/index.ts

@@ -1,6 +1,7 @@
 import type { App, Plugin } from 'vue';
-import Checkbox from './Checkbox';
+import Checkbox, { checkboxProps } from './Checkbox';
 import CheckboxGroup from './Group';
+export type { CheckboxProps } from './Checkbox';
 
 Checkbox.Group = CheckboxGroup;
 
@@ -10,7 +11,7 @@ Checkbox.install = function (app: App) {
   app.component(CheckboxGroup.name, CheckboxGroup);
   return app;
 };
-export { CheckboxGroup };
+export { CheckboxGroup, checkboxProps };
 export default Checkbox as typeof Checkbox &
   Plugin & {
     readonly Group: typeof CheckboxGroup;

components/components.ts

@@ -164,7 +164,22 @@ export { default as Steps, Step } from './steps';
 export type { SwitchProps } from './switch';
 export { default as Switch } from './switch';
 
-export { default as Table, TableColumn, TableColumnGroup } from './table';
+export type {
+  TableProps,
+  TablePaginationConfig,
+  ColumnGroupType as TableColumnGroupType,
+  ColumnType as TableColumnType,
+  ColumnProps as TableColumnProps,
+  ColumnsType as TableColumnsType,
+} from './table';
+export {
+  default as Table,
+  TableColumn,
+  TableColumnGroup,
+  TableSummary,
+  TableSummaryRow,
+  TableSummaryCell,
+} from './table';
 
 export type { TransferProps } from './transfer';
 export { default as Transfer } from './transfer';

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -113,32 +113,47 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
     <div class="ant-spin-nested-loading">
       <!---->
       <div class="ant-spin-container">
-        <div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left">
+        <div class="ant-table ant-table-empty" style="margin-top: 8px;">
           <!---->
-          <div class="ant-table-content">
-            <!---->
-            <div class="ant-table-body">
-              <table class="">
-                <colgroup>
-                  <col data-key="0">
-                  <col data-key="1">
-                </colgroup>
+          <div class="ant-table-container">
+            <div class="ant-table-content">
+              <table style="table-layout: auto;">
+                <colgroup></colgroup>
                 <thead class="ant-table-thead">
                   <tr>
-                    <th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
-            </div></span>
-            <!---->
-            </th>
-            <th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
-          </div></span>
+                    <th class="ant-table-cell" colstart="0" colend="0">
+                      <!---->Name
+                    </th>
+                    <th class="ant-table-cell" colstart="1" colend="1">
+                      <!---->Age
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="ant-table-tbody">
+                  <!---->
+                  <tr class="ant-table-placeholder">
+                    <td colspan="2" class="ant-table-cell">
+                      <!---->No data
+                    </td>
+                  </tr>
+                </tbody>
+                <!---->
+              </table>
+            </div>
+          </div>
           <!---->
-          </th>
-          </tr>
-          </thead>
-          <tbody class="ant-table-tbody"></tbody>
-          </table>
         </div>
-        <div class="ant-table-placeholder">
+      </div>
+    </div>
+  </div>
+  <h3>List</h3>
+  <div class="ant-list ant-list-split">
+    <!---->
+    <!---->
+    <div class="ant-spin-nested-loading">
+      <!---->
+      <div class="ant-spin-container">
+        <div class="ant-list-empty-text">
           <div class="ant-empty ant-empty-normal">
             <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
                 <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
@@ -153,39 +168,11 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
             <!---->
           </div>
         </div>
-        <!---->
       </div>
     </div>
-  </div>
-</div>
-</div>
-<h3>List</h3>
-<div class="ant-list ant-list-split">
-  <!---->
-  <!---->
-  <div class="ant-spin-nested-loading">
     <!---->
-    <div class="ant-spin-container">
-      <div class="ant-list-empty-text">
-        <div class="ant-empty ant-empty-normal">
-          <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
-              <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
-                  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
-                </g>
-              </g>
-            </svg></div>
-          <p class="ant-empty-description">No Data</p>
-          <!---->
-        </div>
-      </div>
-    </div>
+    <!---->
   </div>
-  <!---->
-  <!---->
-</div>
 </div>
 `;