feat: add typography (#3807)

* feat: add typography

* fix: review typography

* fix: review typography

* feat: update typography

* feat: update typography

* fix: typography

* test: update typography

Co-authored-by: zkwolf <[email protected]>

Author: tangjinzhou

.eslintrc

@@ -36,7 +36,8 @@
         "@typescript-eslint/no-unused-vars": [
           "error",
           { "vars": "all", "args": "after-used", "ignoreRestSiblings": true }
-        ]
+        ],
+        "@typescript-eslint/ban-ts-comment": 0
       }
     }
   ],

components/_util/copy-to-clipboard/index.ts

@@ -0,0 +1,120 @@
+import deselectCurrent from './toggle-selection';
+
+interface Options {
+  debug?: boolean;
+  message?: string;
+  format?: string; // MIME type
+  onCopy?: (clipboardData: object) => void;
+}
+
+const clipboardToIE11Formatting = {
+  'text/plain': 'Text',
+  'text/html': 'Url',
+  default: 'Text',
+};
+
+const defaultMessage = 'Copy to clipboard: #{key}, Enter';
+
+function format(message: string) {
+  const copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+
+function copy(text: string, options?: Options): boolean {
+  let message,
+    reselectPrevious,
+    range,
+    selection,
+    mark,
+    success = false;
+  if (!options) {
+    options = {};
+  }
+  const debug = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+
+    range = document.createRange();
+    selection = document.getSelection();
+
+    mark = document.createElement('span');
+    mark.textContent = text;
+    // reset user styles for span element
+    mark.style.all = 'unset';
+    // prevents scrolling to the end of the page
+    mark.style.position = 'fixed';
+    mark.style.top = 0;
+    mark.style.clip = 'rect(0, 0, 0, 0)';
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = 'pre';
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = 'text';
+    mark.style.MozUserSelect = 'text';
+    mark.style.msUserSelect = 'text';
+    mark.style.userSelect = 'text';
+    mark.addEventListener('copy', function(e) {
+      e.stopPropagation();
+      if (options.format) {
+        e.preventDefault();
+        if (typeof e.clipboardData === 'undefined') {
+          // IE 11
+          debug && console.warn('unable to use e.clipboardData');
+          debug && console.warn('trying IE specific stuff');
+          (window as any).clipboardData.clearData();
+          const format =
+            clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default'];
+          (window as any).clipboardData.setData(format, text);
+        } else {
+          // all other browsers
+          e.clipboardData.clearData();
+          e.clipboardData.setData(options.format, text);
+        }
+      }
+      if (options.onCopy) {
+        e.preventDefault();
+        options.onCopy(e.clipboardData);
+      }
+    });
+
+    document.body.appendChild(mark);
+
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+
+    const successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('copy command was unsuccessful');
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error('unable to copy using execCommand: ', err);
+    debug && console.warn('trying IE specific stuff');
+    try {
+      (window as any).clipboardData.setData(options.format || 'text', text);
+      options.onCopy && options.onCopy((window as any).clipboardData);
+      success = true;
+    } catch (err) {
+      debug && console.error('unable to copy using clipboardData: ', err);
+      debug && console.error('falling back to prompt');
+      message = format('message' in options ? options.message : defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == 'function') {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+
+  return success;
+}
+
+export default copy;

components/_util/copy-to-clipboard/toggle-selection.ts

@@ -0,0 +1,41 @@
+// copy from https://github.com/sudodoki/toggle-selection
+// refactor to esm
+const deselectCurrent = (): (() => void) => {
+  const selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function() {};
+  }
+  let active = document.activeElement as any;
+
+  const ranges = [];
+  for (let i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i));
+  }
+
+  switch (
+    active.tagName.toUpperCase() // .toUpperCase handles XHTML
+  ) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      active.blur();
+      break;
+
+    default:
+      active = null;
+      break;
+  }
+
+  selection.removeAllRanges();
+  return function() {
+    selection.type === 'Caret' && selection.removeAllRanges();
+
+    if (!selection.rangeCount) {
+      ranges.forEach(function(range) {
+        selection.addRange(range);
+      });
+    }
+
+    active && active.focus();
+  };
+};
+export default deselectCurrent;

components/_util/hooks/useConfigInject.ts

@@ -0,0 +1,8 @@
+import { computed, inject } from 'vue';
+import { defaultConfigProvider } from '../../config-provider';
+
+export default (name: string, props: Record<any, any>) => {
+  const configProvider = inject('configProvider', defaultConfigProvider);
+  const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
+  return { configProvider, prefixCls };
+};

components/index.ts

@@ -146,6 +146,8 @@ import { default as Descriptions } from './descriptions';
 import { default as PageHeader } from './page-header';
 import { default as Space } from './space';
 
+import { default as Typography } from './typography';
+
 const components = [
   Affix,
   Anchor,
@@ -210,6 +212,7 @@ const components = [
   PageHeader,
   Space,
   Image,
+  Typography,
 ];
 
 const install = function(app: App) {
@@ -298,6 +301,7 @@ export {
   PageHeader,
   Space,
   Image,
+  Typography,
 };
 
 export default {

components/input/TextArea.tsx

@@ -13,6 +13,8 @@ const TextAreaProps = {
   autosize: withUndefined(PropTypes.oneOfType([Object, Boolean])),
   autoSize: withUndefined(PropTypes.oneOfType([Object, Boolean])),
   showCount: PropTypes.looseBool,
+  onCompositionstart: PropTypes.func,
+  onCompositionend: PropTypes.func,
 };
 
 export default defineComponent({

components/input/calculateNodeHeight.tsx

@@ -155,5 +155,6 @@ export default function calculateNodeHeight(
     minHeight: `${minHeight}px`,
     maxHeight: `${maxHeight}px`,
     overflowY,
+    resize: 'none',
   };
 }

components/style.ts

@@ -61,4 +61,5 @@ import './page-header/style';
 import './form/style';
 import './space/style';
 import './image/style';
+import './typography/style';
 // import './color-picker/style';

components/style/mixins/typography.less

@@ -47,3 +47,12 @@
     @typography-title-margin-bottom
   );
 }
+.typography-title-5() {
+  .typography-title(
+    @heading-5-size,
+    @typography-title-font-weight,
+    1.5,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}