Copy codes raw

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tikuidoc-tikui",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "Tikui documentation",
   "main": "tikuidoc.json",
   "files": [

part/code.pug

@@ -2,6 +2,8 @@
   .tikui-line-section--column
     pre.doc-code-example
       code.code.language-html !{htmlCode}
+    button.tikui-button.-small(onclick='copyCode(this)' data-code=htmlRaw) Copy
   .tikui-line-section--column
     pre.doc-code-example
       code.code.language-pug !{pugCode}
+    button.tikui-button.-small(onclick='copyCode(this)' data-code=pugRaw) Copy

src/documentation/atom/button/_button.scss

@@ -2,9 +2,13 @@
 
 $tikui-button-border-width: 1px !default;
 $tikui-button-padding: 19px !default;
+$tikui-button-padding-small: 9px !default;
 $tikui-button-min-width: 176px !default;
+$tikui-button-min-width-small: 80px !default;
 $tikui-button-line-height: 20px !default;
+$tikui-button-line-height-small: 16px !default;
 $tikui-button-font-size: 16px !default;
+$tikui-button-font-size-small: 12px !default;
 $tikui-button-radius: 30px !default;
 $tikui-button-font-family: $tikui-font-family-main !default;
 $tikui-button-color-background: $tikui-color-secondary !default;
@@ -56,4 +60,11 @@ $tikui-button-secondary-hover-color-background: $tikui-button-color-background !
       background-color: $tikui-button-secondary-hover-color-background;
     }
   }
+
+  &.-small {
+    padding: $tikui-button-padding-small;
+    min-width: $tikui-button-min-width-small;
+    line-height: $tikui-button-line-height-small;
+    font-size: $tikui-button-font-size-small;
+  }
 }

src/documentation/scripts/tikui.js

@@ -62,3 +62,7 @@ const tikuiScripts = () => {
 };
 
 document.addEventListener('DOMContentLoaded', tikuiScripts, false);
+
+const copyCode = async (element) => {
+  await navigator.clipboard.writeText(element.dataset['code']);
+};