feat: add devtools

package.json

@@ -1,16 +1,19 @@
 {
-  "name": "devtools",
+  "name": "@kazanexpress/frontend-devtools",
+  "main": "./dist/KeDevtools.common.js",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build-bundle": "vue-cli-service build --target lib --name KeDevtools ./src/components/index.ts",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-svg-loader": "^0.12.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
@@ -31,6 +34,15 @@
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "typescript": "~4.1.5",
+    "vue-cli-plugin-svg-loader": "~1.1.1",
     "vue-template-compiler": "^2.6.11"
-  }
+  },
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js",
+    "*.svg"
+  ]
 }

src/App.vue

@@ -1,28 +1,17 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
+  <KeDevtools :items="['asd']">
+    <template #item-asd> asd </template>
+  </KeDevtools>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import HelloWorld from "./components/HelloWorld.vue";
+import KeDevtools from "./components/KeDevtools.vue";
 
 export default Vue.extend({
   name: "App",
   components: {
-    HelloWorld,
+    KeDevtools,
   },
 });
 </script>
-
-<style lang="stylus">
-#app
-  font-family Avenir, Helvetica, Arial, sans-serif
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-  text-align center
-  color #2c3e50
-  margin-top 60px
-</style>

src/components/KeDevtools.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="devtools">
+    <slot name="before" />
+    <div class="devtools-panel" :class="{ active: isShowDevtools }">
+      <button class="devtools-panel-activator" @click="toggleShowDevtools">
+        <DevtoolsLogo />
+      </button>
+      <div class="devtools-panel-wrapper">
+        <button
+          v-for="item in items"
+          :key="item"
+          class="devtools-panel-button"
+          @click="onClickItem(item)"
+        >
+          <slot :name="`item-${item}`" />
+        </button>
+      </div>
+    </div>
+    <slot name="after" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue";
+import DevtoolsLogo from "@/assets/devtools.svg";
+
+const LOCAL_STORAGE_KEY = "ke-devtools";
+
+const processFlag = (item: string) => {
+  let result = false;
+  const localFlags = JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_KEY) || "{}"
+  );
+
+  if (localFlags[item]) {
+    delete localFlags[item];
+  } else {
+    localFlags[item] = true;
+    result = true;
+  }
+
+  if (Object.keys(localFlags).length === 0) {
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
+  } else {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(localFlags));
+  }
+
+  return result;
+};
+
+export default Vue.extend({
+  name: "ke-devtools",
+  components: {
+    DevtoolsLogo,
+  },
+  props: {
+    items: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isShowDevtools: false,
+    };
+  },
+  methods: {
+    toggleShowDevtools() {
+      this.isShowDevtools = !this.isShowDevtools;
+    },
+    onClickItem(key: string) {
+      const value = processFlag(key);
+      this.$emit("update", { key, value });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.devtools {
+  position: absolute;
+  width: 100%;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.devtools-panel {
+  transform: translateY(-100%);
+  transition: 0.15s transform;
+}
+
+.devtools-panel.active {
+  transform: translateY(0);
+}
+
+.devtools-panel-wrapper {
+  z-index: 80;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+  background-color: #2e3138;
+}
+
+.devtools-panel-button {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.devtools-panel-activator {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  border-radius: 50%;
+  background-color: #2e3138;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  outline: none;
+  border: none;
+  padding: 35px;
+  transform: translate(32%, 42%);
+}
+
+.devtools-panel-activator svg {
+  transform: translate(-4px, 26px);
+}
+
+.devtools-panel-activator:hover {
+  background-color: #494b50;
+}
+</style>

src/components/index.ts

@@ -0,0 +1,6 @@
+import Vue from "vue";
+import KeDevtools from "./KeDevtools.vue";
+
+Vue.component("KeDevtools", KeDevtools);
+
+export default KeDevtools;

src/shims-vue.d.ts

@@ -2,3 +2,8 @@ declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

vue.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  pluginOptions: {
+    svgLoader: {
+      svgo: {
+        plugins: [],
+      },
+    },
+  },
+};