add thrid party

Author: David-Desmaisons

docs/app.js

@@ -1,20 +1,13 @@
 <template>
   <div id="app">
     <div class="logo">
-      <a
-        href="https://github.com/SortableJS/Vue.Draggable"
-        target="_blank"
-      ><img
-          alt="Vue logo"
-          src="./assets/logo.png"
-        /></a>
+      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank"
+        ><img alt="Vue logo" src="./assets/logo.png"
+      /></a>
     </div>
 
     <div class="container ">
-      <ul
-        class="nav nav-tabs"
-        role="tablist"
-      >
+      <ul class="nav nav-tabs" role="tablist">
         <li
           class="nav-item"
           v-for="component in componentList"
@@ -27,14 +20,12 @@
             :href="`#${component.name}`"
             role="tab"
             aria-controls="profile"
-          >{{ component.display }}</a>
+            >{{ component.display }}</a
+          >
         </li>
       </ul>
 
-      <div
-        class="tab-content"
-        id="tab-content"
-      >
+      <div class="tab-content" id="tab-content">
         <div
           class="tab-pane show"
           :id="component.name"
@@ -72,9 +63,8 @@ import $ from "jquery";
 const requireContext = require.context("./components/", false, /\.vue$/);
 
 const components = requireContext.keys().reduce((acc, key) => {
-  const name = key.replace(/^\.\//, "").replace(/\.\w+$/, "");
   const component = requireContext(key).default;
-  acc[name] = component;
+  acc[component.name] = component;
   return acc;
 }, {});
 

docs/fonts/element-icons.2fad952a.woff

@@ -0,0 +1,99 @@
+<template>
+  <div class="row">
+    <div class="col-7">
+      <h3>
+        Integration with
+        <a
+          href="https://element.eleme.io/#/en-US/component/collapse#collapse"
+          target="_blank"
+          >Element collapse</a
+        >
+      </h3>
+
+      <draggable
+        element="el-collapse"
+        :list="list"
+        :component-data="collapseComponentData"
+      >
+        <el-collapse-item
+          v-for="item in list"
+          :key="item.id"
+          :title="item.title"
+          :name="item.id"
+        >
+          <div v-for="(lign, idx) in item.text" :key="idx">{{ lign }}</div>
+        </el-collapse-item>
+      </draggable>
+    </div>
+    <rawDisplayer class="col-3" :value="list" title="List" />
+    <rawDisplayer class="col-1" :value="activeNames" title="activeNames" />
+  </div>
+</template>
+
+<script>
+import "element-ui/lib/theme-chalk/index.css";
+import draggable from "@/vuedraggable";
+
+export default {
+  name: "third-party",
+  display: "Third party",
+  order: 8,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      list: [
+        {
+          title: "Consistency",
+          id: 1,
+          text: [
+            "Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;",
+            "Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."
+          ]
+        },
+        {
+          title: "Feedback",
+          id: 2,
+          text: [
+            "Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;",
+            "Visual feedback: reflect current state by updating or rearranging elements of the page."
+          ]
+        },
+        {
+          title: "Efficiency",
+          id: 3,
+          text: [
+            "Simplify the process: keep operating process simple and intuitive;",
+            "Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;",
+            "Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."
+          ]
+        },
+        {
+          title: "Controllability",
+          id: 4,
+          text: [
+            "Decision making: giving advices about operations is acceptable, but do not make decisions for the users;",
+            "Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
+          ]
+        }
+      ],
+      activeNames: [1],
+      collapseComponentData: {
+        on: {
+          input: this.inputChanged
+        },
+        props: {
+          value: this.activeNames
+        }
+      }
+    };
+  },
+  methods: {
+    inputChanged(val) {
+      this.activeNames = val;
+    }
+  }
+};
+</script>
+<style scoped></style>

docs/fonts/element-icons.6f0a7632.ttf

@@ -3,6 +3,7 @@ import App from "./App.vue";
 import VueRouter from "vue-router";
 import routes from "./route";
 import rawDisplayer from "./components/infra/raw-displayer.vue";
+import ElementUI from "element-ui";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.css";
@@ -16,6 +17,8 @@ const router = new VueRouter({
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
 Vue.component("rawDisplayer", rawDisplayer);
+Vue.use(ElementUI);
+
 new Vue({
   router,
   render: h => h(App)

example/App.vue

@@ -38,6 +38,7 @@
     "babel-jest": "^23.6.0",
     "bootstrap": "^4.3.1",
     "component-fixture": "^0.4.1",
+    "element-ui": "^2.5.4",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
     "font-awesome": "^4.7.0",