Merge branch 'development'

DamSenViet · Nov 9, 2020 · f3c7a60 · f3c7a60
2 parents dcae8a3 + 90d0cbf
commit f3c7a60
Show file tree

Hide file tree

Showing 39 changed files with 2,459 additions and 206 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ npm install babylonjs@">=4.1.0" babylonjs-loaders@">=4.1.0"
 # core library
 yarn add @damsenviet/acpatterns
 # if you need the modeler
-yard add babylonjs@">=4.1.0" babylonjs-loaders@">=4.1.0"
+yarn add babylonjs@">=4.1.0" babylonjs-loaders@">=4.1.0"
 ```
 
 3. **CDN**
@@ -71,7 +71,7 @@ as their texture representation and allow you to draw on the canvas.
 Assuming you have the following HTML content, you can link a pattern to a
 `Drawer` in this quick start guide like so:
 
-1. **ES Modules**
+**ES Modules**
 
 ``` js
 import {
@@ -103,7 +103,7 @@ drawer.tool = pen;
 ```
 
 
-2. **Script**
+**Script**
 
 ``` html
 <script>

diff --git a/docs/.vuepress/assets/icons/bx-check.vue b/docs/.vuepress/assets/icons/bx-check.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-chevron-down.vue b/docs/.vuepress/assets/icons/bx-chevron-down.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293L12 13.586 7.707 9.293 6.293 10.707 12 16.414 17.707 10.707z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-chevron-up.vue b/docs/.vuepress/assets/icons/bx-chevron-up.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.293 13.293L7.707 14.707 12 10.414 16.293 14.707 17.707 13.293 12 7.586z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-circle.vue b/docs/.vuepress/assets/icons/bx-circle.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2C6.486,2,2,6.486,2,12c0.001,5.515,4.487,10.001,10,10.001c5.514,0,10-4.486,10.001-10.001 C22.001,6.486,17.515,2,12,2z M12,20.001c-4.41,0-7.999-3.589-8-8.001c0-4.411,3.589-8,8-8c4.412,0,8.001,3.589,8.001,8 C20,16.412,16.411,20.001,12,20.001z"/></svg>
+</template
diff --git a/docs/.vuepress/assets/icons/bx-color-fill.vue b/docs/.vuepress/assets/icons/bx-color-fill.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 13.998c-.092.065-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5C22 15.998 20.092 14.063 20 13.998zM3.414 12.998c0 .534.208 1.036.586 1.414l5.586 5.586c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.584 8.707 2.291 7.293 3.705l2.293 2.293L4 11.584C3.622 11.962 3.414 12.464 3.414 12.998zM11 7.412l5.586 5.586L11 18.584h.001l-.001 1v-1l-5.586-5.586L11 7.412z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-edit-alt.vue b/docs/.vuepress/assets/icons/bx-edit-alt.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zM16.045 4.401l1.587 1.585-1.59 1.584-1.586-1.585L16.045 4.401zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zM4 20H20V22H4z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-move.vue b/docs/.vuepress/assets/icons/bx-move.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 11L13 11 13 6 16 6 12 2 8 6 11 6 11 11 6 11 6 8 2 12 6 16 6 13 11 13 11 18 8 18 12 22 16 18 13 18 13 13 18 13 18 16 22 12 18 8z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-pencil.vue b/docs/.vuepress/assets/icons/bx-pencil.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M16.589 9L15.003 7.414 5.906 16.511 5.377 18.625 7.491 18.097z"/><path transform="rotate(134.999 18.003 6)" fill="none" d="M16.882 4.879H19.125V7.122H16.882z"/><path d="M4.003,21c0.081,0,0.162-0.01,0.242-0.03l4-1c0.176-0.044,0.337-0.135,0.465-0.263L21.003,7.414 c0.378-0.378,0.586-0.88,0.586-1.414s-0.208-1.036-0.586-1.414L19.417,3c-0.756-0.756-2.072-0.756-2.828,0L4.296,15.293 c-0.128,0.128-0.219,0.289-0.263,0.464l-1,4c-0.086,0.341,0.015,0.701,0.263,0.95C3.485,20.897,3.741,21,4.003,21z M18.003,4.414 L19.589,6l-1.586,1.586L16.417,6L18.003,4.414z M5.906,16.511l9.097-9.097L16.589,9l-9.098,9.097l-2.114,0.528L5.906,16.511z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-rectangle.vue b/docs/.vuepress/assets/icons/bx-rectangle.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,3H4C2.897,3,2,3.897,2,5v14c0,1.103,0.897,2,2,2h16c1.103,0,2-0.897,2-2V5C22,3.897,21.103,3,20,3z M4,19V5h16 l0.001,14H4z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-upload.vue b/docs/.vuepress/assets/icons/bx-upload.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 15L13 15 13 9 16 9 12 4 8 9 11 9z"/><path d="M20,18H4v-7H2v7c0,1.103,0.897,2,2,2h16c1.103,0,2-0.897,2-2v-7h-2V18z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/icons/bx-x.vue b/docs/.vuepress/assets/icons/bx-x.vue
@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"/></svg>
+</template>
diff --git a/docs/.vuepress/assets/presets/dress-denim-jacket.js b/docs/.vuepress/assets/presets/dress-denim-jacket.js
diff --git a/docs/.vuepress/assets/presets/shirt-jotaro.js b/docs/.vuepress/assets/presets/shirt-jotaro.js
diff --git a/docs/.vuepress/assets/presets/standard-bells.js b/docs/.vuepress/assets/presets/standard-bells.js
diff --git a/docs/.vuepress/components/Collapsible.vue b/docs/.vuepress/components/Collapsible.vue
@@ -0,0 +1,87 @@
+<template>
+  <div
+    :class="{
+      collapsible: true,
+      expanded: expanded,
+    }"
+  >
+    <div class="tab" @click="$emit('change', !expanded)">
+      <span class="label">
+        <slot name="label"></slot>
+      </span>
+      <BxChevronDown class="toggle-icon" v-if="!expanded" />
+      <BxChevronUp class="toggle-icon" v-else />
+    </div>
+    <div class="content">
+      <slot v-if="expanded"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import BxChevronUp from "./../assets/icons/bx-chevron-up";
+import BxChevronDown from "./../assets/icons/bx-chevron-down";
+
+export default {
+  components: {
+    BxChevronUp,
+    BxChevronDown,
+  },
+  props: {
+    expanded: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data: function () {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./../styles/colors";
+
+.collapsible {
+  .tab {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    justify-items: auto;
+    align-content: center;
+    align-items: center;
+    
+    border-radius: 4px;
+    transition: background-color 0.2s ease-in-out;
+    &:hover {
+      cursor: pointer;
+      background-color: $white-smoke;
+    }
+  }
+  &.expanded {
+    .tab {
+      margin-bottom: 5px;
+    }
+  }
+
+  .label {
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  .toggle-icon {
+    fill: $font-color;
+    // height: 15px;
+  }
+  
+  .content {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+</style>