fix: add Vueleton components

package.json

@@ -69,6 +69,7 @@
     "core-js": "^2.4.1",
     "sync-promise-lite": "^0.2.3",
     "vue": "^2.4.1",
-    "vue-code": "^1.2.2"
+    "vue-code": "^1.2.2",
+    "vueleton": "^0.1.0"
   }
 }

src/common/ui/dropdown.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="dropdown" :class="`dropdown-${align}`" @mouseup="onMouseUp">
-    <div class="dropdown-toggle" @click="onToggle" @focus="onFocus" @blur="onBlur">
-      <slot name="toggle"></slot>
-    </div>
-    <div class="dropdown-menu" v-show="active" @mousedown.stop>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    // If true, the dropdown menu will close on menu clicked.
-    closeAfterClick: {
-      type: Boolean,
-      default: false,
-    },
-    // If true, the dropdown menu will always open on toggle clicked.
-    toggleOnOnly: {
-      type: Boolean,
-      default: false,
-    },
-    // If true, the dropdown menu will open on toggle focused.
-    focusOpen: {
-      type: Boolean,
-      default: false,
-    },
-    // Set alignment of the dropdown menu, can be either 'left' or 'right'.
-    align: {
-      type: String,
-      default: 'left',
-    },
-  },
-  data() {
-    return {
-      active: false,
-    };
-  },
-  watch: {
-    active(active, formerActive) {
-      if (active === formerActive) return;
-      if (active) {
-        document.addEventListener('mousedown', this.onClose, false);
-      } else {
-        document.removeEventListener('mousedown', this.onClose, false);
-      }
-    },
-  },
-  methods: {
-    onToggle() {
-      this.active = !this.active;
-    },
-    onOpen() {
-      this.active = true;
-    },
-    onClose() {
-      this.active = false;
-    },
-    onFocus() {
-      if (this.focusOpen) this.onOpen();
-    },
-    onBlur() {
-      const { activeElement } = document;
-      if (activeElement !== document.body && !this.$el.contains(activeElement)) this.onClose();
-    },
-    onMouseUp() {
-      if (this.closeAfterClick) this.onClose();
-    },
-  },
-};
-</script>
-
-<style>
-.dropdown {
-  position: relative;
-  display: inline-block;
-  &-toggle {
-    cursor: pointer;
-  }
-  &-menu {
-    position: absolute;
-    top: 100%;
-    margin-top: .4rem;
-    padding: .5rem;
-    border: 1px solid #bbb;
-    background: white;
-    z-index: 10;
-    .dropdown-right & {
-      right: 0;
-    }
-  }
-}
-</style>

src/common/ui/vueleton.js

@@ -0,0 +1,3 @@
+import 'vueleton/lib/dropdown.css';
+
+export Dropdown from 'vueleton/lib/dropdown';

src/confirm/views/app.vue

@@ -4,16 +4,14 @@
       <div class="buttons pull-right">
         <vm-dropdown class="confirm-options" align="right">
           <button slot="toggle" v-text="i18n('buttonInstallOptions')"></button>
-          <div class="options-panel">
-            <label>
-              <setting-check name="closeAfterInstall" @change="checkClose" />
-              <span v-text="i18n('installOptionClose')"></span>
-            </label>
-            <label>
-              <setting-check name="trackLocalFile" :disabled="closeAfterInstall" />
-              <span v-text="i18n('installOptionTrack')"></span>
-            </label>
-          </div>
+          <label>
+            <setting-check name="closeAfterInstall" @change="checkClose" />
+            <span v-text="i18n('installOptionClose')"></span>
+          </label>
+          <label>
+            <setting-check name="trackLocalFile" :disabled="closeAfterInstall" />
+            <span v-text="i18n('installOptionTrack')"></span>
+          </label>
         </vm-dropdown>
         <button v-text="i18n('buttonConfirmInstallation')"
         :disabled="!installable" @click="installScript"></button>
@@ -34,7 +32,7 @@ import { sendMessage, zfill, request, buffer2string, isRemote, getFullUrl } from
 import options from 'src/common/options';
 import initCache from 'src/common/cache';
 import VmCode from 'src/common/ui/code';
-import VmDropdown from 'src/common/ui/dropdown';
+import { Dropdown as VmDropdown } from 'src/common/ui/vueleton';
 import SettingCheck from 'src/common/ui/setting-check';
 import getPathInfo from 'src/common/pathinfo';
 
@@ -240,7 +238,7 @@ export default {
   label {
     display: block;
   }
-  .dropdown-menu {
+  .vl-dropdown-menu {
     width: 13rem;
   }
 }

src/options/style.css

@@ -49,9 +49,6 @@ section {
     margin-bottom: .3rem;
   }
 }
-.options-panel label {
-  display: block;
-}
 .feature {
   &-text {
     position: relative;

src/options/views/tab-installed.vue

@@ -35,7 +35,7 @@
 
 <script>
 import { i18n, sendMessage, noop, debounce } from 'src/common';
-import VmDropdown from 'src/common/ui/dropdown';
+import { Dropdown as VmDropdown } from 'src/common/ui/vueleton';
 import Icon from 'src/common/ui/icon';
 import Item from './script-item';
 import Edit from './edit';
@@ -170,7 +170,7 @@ $header-height: 4rem;
     line-height: 1;
     border-bottom: 1px solid darkgray;
   }
-  .dropdown-menu {
+  .vl-dropdown-menu {
     padding: .5rem;
     white-space: nowrap;
     > a {