@windwalker-io/core 4.0.7 → 4.0.9

package/fusionfile.mjs

@@ -5,33 +5,43 @@
  * @license    MIT
  */
 
-import fusion, { watch, parallel, src, dest } from '@windwalker-io/fusion';
+import fusion, { watch, parallel, src, dest, wait } from '@windwalker-io/fusion';
 import { babelBasicOptions } from '@windwalker-io/fusion/src/utilities/babel.js';
 import postcss from 'gulp-postcss';
+import path from 'path';
 import tailwindcss from 'tailwindcss';
-import WebpackDynamicPublicPathPlugin from 'webpack-dynamic-public-path';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 export async function debuggers() {
   // Watch start
   watch(['src/debugger/**/*.{js,vue}', 'scss/**/*.scss']);
   // Watch end
 
-  fusion.vue(
-    'src/debugger/debugger.js',
-    'dist/debugger/',
-    {
-      override: (config) => {
-        config.output.publicPath = "publicPathPlaceholder";
+  return wait(
+    fusion.vue(
+      'src/debugger/debugger.js',
+      'dist/debugger/',
+      {
+        override: (config) => {
+          config.resolve.alias = {
+            '@': path.resolve(path.resolve(), './src/debugger/') // Will be overwrite when compile
+          }
+
+          // @see https://webpack.js.org/guides/public-path/#automatic-publicpath
+          config.output.publicPath = "auto";
 
-          config.plugins.push(
-          new WebpackDynamicPublicPathPlugin({
-            externalPublicPath: "window.externalPublicPath"
-          })
-        );
+          config.output.chunkFilename = process.env.NODE_ENV === 'production'
+            ? 'chunk-vendor-[id].js'
+            : 'dev/chunk-vendor-[id].js';
+
+          // config.plugins.push(
+          //   new BundleAnalyzerPlugin()
+          // );
+        }
       }
-    }
+    ),
+    fusion.copy('images/**/*', 'dist/images/')
   );
-  fusion.copy('images/**/*', 'dist/images/');
 }
 
 export async function console() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windwalker-io/core",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "type": "module",
   "description": "Windwalker Core JS package",
   "scripts": {
@@ -15,26 +15,32 @@
   "author": "Simon Asika",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
     "axios": "^0.21.1",
-    "webpack-dynamic-public-path": "^1.0.7"
+    "dayjs": "^1.11.5"
   },
   "devDependencies": {
-    "@windwalker-io/fusion": "^1.0",
     "@tailwindcss/custom-forms": "^0.2.1",
     "@tailwindcss/ui": "^0.7.2",
+    "@windwalker-io/fusion": "^1.0",
     "autoprefixer": "^10.2.6",
     "axios": "^0.21.1",
+    "bootstrap": "^5.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.0",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^4.0.0",
     "postcss-nested": "^5.0.5",
     "regenerator-runtime": "^0.13.7",
-    "sql-formatter": "^4.0.2",
+    "sql-formatter": "^10.6.0",
     "tailwindcss": "^2.1.4",
     "vue": "^3.0.11",
+    "vuedraggable": "^3.0||^4.0.3",
     "vue-router": "^4.0.8",
-    "webpack": "^4.0"
+    "webpack": "^5.0",
+    "webpack-bundle-analyzer": "^4.6.1"
   },
   "windwalker": {
     "vendors": [

package/scss/_variables.scss

@@ -0,0 +1,8 @@
+// Part of earth file.
+
+// Custom
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/maps";

package/scss/base/_typography.scss

@@ -0,0 +1,9 @@
+// Part of earth file.
+
+pre {
+  margin-bottom: 0;
+}
+
+code {
+  color: $dark;
+}

package/scss/debugger.scss

@@ -1,24 +1,53 @@
 // Part of starter file.
 
-@tailwind base;
+@import "variables";
 
-@layer base {
-  h1 {
-    @apply text-2xl;
-  }
-  h2 {
-    @apply text-xl;
-  }
-  h3 {
-    @apply text-lg;
-  }
-  a {
-    @apply text-blue-600 underline;
-  }
-}
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
 
-@tailwind components;
-@tailwind utilities;
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+//@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+//@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+//@import "bootstrap/scss/accordion";
+//@import "bootstrap/scss/breadcrumb";
+//@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+//@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+//@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+//@import "bootstrap/scss/spinners";
+//@import "bootstrap/scss/offcanvas";
+//@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+@import "base/typography";
 
 @import "layout/layout";
 @import "layout/sidebar";

package/scss/layout/_layout.scss

@@ -1,6 +1,5 @@
 // Part of starter file.
 
 .h-w-sidebar {
-  width: 250px;
-  min-width: 250px;
+  //
 }

package/scss/layout/_sidebar.scss

@@ -1,6 +1,11 @@
 // Part of starter file.
 
 .c-sidebar-menu-item {
-  @apply px-4 py-3 no-underline text-gray-800 hover:text-gray-600 block border-b border-gray-300
-    hover:bg-gray-300;
+  color: $dark;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+}
+
+.c-sidebar-menu-item.active {
+  background-color: $gray-300;
 }

package/src/debugger/App.vue

@@ -1,51 +1,81 @@
 <template>
-  <div class="c-main-wrapper min-h-screen	flex flex-col">
-    <div class="flex items-center bg-gray-800 p-3 text-white"
+  <div class="c-main-wrapper">
+    <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"
       style="height: 60px">
-      <!-- Logo -->
-      <div class="h-w-sidebar">
-        <img src="assets/vendor/@windwalker-io/core/dist/images/windwalker-logo-h-w.svg" alt="logo"
-          style="height: 30px">
-      </div>
+      <div class="container-fluid">
+        <!-- Logo -->
+        <div class="navbar-brand">
+          <img src="assets/vendor/@windwalker-io/core/dist/images/windwalker-logo-h-w.svg" alt="logo"
+            style="height: 30px">
+        </div>
 
-      <!-- Header  -->
-      <div class="">
+        <!-- Header  -->
+        <div class="">
 
+        </div>
       </div>
     </div>
 
     <!-- Body -->
-    <div class="flex flex-grow">
+    <div class="d-flex flex-column flex-md-row" style="margin-top: 60px;">
       <!-- Sidebar -->
-      <div class="h-w-sidebar bg-gray-200">
-        <div class="">
-          <router-link to="/"
-          class="c-sidebar-menu-item">
-            Dashboard
-          </router-link>
-        </div>
-        <div>
-          <router-link to="/system"
-          class="c-sidebar-menu-item">
-            System
-          </router-link>
-        </div>
-        <div>
-          <router-link to="/request"
-            class="c-sidebar-menu-item">
-            Request
-          </router-link>
-        </div>
-        <div>
-          <router-link to="/db"
-            class="c-sidebar-menu-item">
-            Database
-          </router-link>
+      <div class="h-w-sidebar bg-light">
+        <div class="nav flex-column bg-light position-sticky"
+          style="min-width: 200px; top: 60px">
+          <div class="nav-item nav-item--dashboard">
+            <router-link to="/"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'dashboard' }">
+              Dashboard
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--system">
+            <router-link to="/system"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'system' }">
+              System
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--request">
+            <router-link to="/request"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'request' }">
+              Request
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--routing">
+            <router-link to="/routing"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'routing' }">
+              Routing
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--timeline">
+            <router-link to="/timeline"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'timeline' }">
+              Timeline
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--timeline">
+            <router-link to="/events"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'events' }">
+              Events
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--db">
+            <router-link to="/db"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'db' }">
+              Database
+            </router-link>
+          </div>
         </div>
       </div>
 
       <!-- Content Body -->
-      <div class="bg-gray-100 flex-grow">
+      <div class="flex-grow-1">
         <router-view></router-view>
       </div>
     </div>
@@ -55,7 +85,8 @@
 </template>
 
 <script>
-import { RouterLink, RouterView } from 'vue-router';
+import { computed } from 'vue';
+import { RouterLink, RouterView, useRoute } from 'vue-router';
 import Store from './Store.vue';
 
 export default {
@@ -66,13 +97,18 @@ export default {
     RouterView
   },
   setup() {
+    const route = useRoute();
+    const currentRoute = computed(() => route.name);
+
     return {
-      
+      currentRoute
     };
   }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.c-sidebar-menu-item.active {
 
+}
 </style>

package/src/debugger/Store.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { currentId } from './services/store.js';
+import { currentId } from '@/services/store.js';
 
 export default {
   name: 'Store',

package/src/debugger/components/BsModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <teleport to="body">
+    <div ref="modal" class="modal fade" :id="idName"
+      v-bind="$attrs"
+      tabindex="-1"
+      role="dialog"
+      :aria-labelledby="idName + '-label'"
+      :aria-hidden="visible ? 'true' : 'false'"
+      :data-bs-backdrop="backdrop"
+    >
+      <div class="modal-dialog"
+        role="document"
+        :class="size ? 'modal-' + size : null">
+        <div class="modal-content">
+          <template v-if="visible">
+            <template v-if="hasSlots('header-element')">
+              <slot name="header-element"></slot>
+            </template>
+            <div v-else class="modal-header">
+              <slot name="header">
+                <div class="modal-title" :id="idName + '-label'">
+                    <h4>{{ title }}</h4>
+                </div>
+              </slot>
+              <button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true" class="visually-hidden">&times;</span>
+              </button>
+            </div>
+          </template>
+          <div v-if="visible" class="modal-body">
+            <slot></slot>
+          </div>
+          <div v-if="visible && hasSlots('footer')" class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+import Modal from 'bootstrap/js/src/modal.js';
+import { onMounted, reactive, ref, toRefs, watch } from 'vue';
+
+export default {
+  name: 'BsModal',
+  inheritAttrs: false,
+  props: {
+    id: String,
+    open: {
+      type: Boolean,
+      default: false
+    },
+    size: String,
+    title: String,
+    backdrop: {
+      type: [ String, Boolean ],
+      default: true
+    }
+  },
+  emits: [
+    'show',
+    'shown',
+    'hide',
+    'hidden'
+  ],
+  setup(props, { emit, slots }) {
+    const modal = ref(null);
+    const state = reactive({
+      idName: props.id || 'modal-' + (Math.random() + 1).toString(36).substring(7),
+      visible: props.open,
+    });
+
+    watch(() => state.visible, (v, oldV) => {
+      if (!oldV && v) {
+        getModalInstance().show();
+      }
+      if (oldV && !v) {
+        getModalInstance().hide();
+      }
+    });
+
+    watch(() => props.open, (v) => {
+      state.visible = v
+    });
+
+    watch(() => props.id, (idName) => {
+      state.idName = idName;
+    });
+
+    onMounted(() => {
+      modal.value.addEventListener('show.bs.modal', (e) => {
+        emit('show', e);
+      });
+
+      modal.value.addEventListener('shown.bs.modal', (e) => {
+        emit('shown', e);
+      });
+      modal.value.addEventListener('hide.bs.modal', (e) => {
+        emit('hide', e);
+      });
+
+      modal.value.addEventListener('hidden.bs.modal', (e) => {
+        emit('hidden', e);
+      });
+    });
+
+    function getModalInstance() {
+      return Modal.getOrCreateInstance(modal.value);
+    }
+
+    function hasSlots(name) {
+      return slots[name] !== undefined;
+    }
+
+    return {
+      ...toRefs(state),
+      modal,
+      hasSlots
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/components/KeyValueTable.vue

@@ -0,0 +1,51 @@
+<template>
+  <table class="table table-bordered">
+    <thead>
+    <tr>
+      <th class="" style="width: 20%; min-width: 150px;" >
+        Key
+      </th>
+      <th>
+        Value
+      </th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr v-for="(value, key) of data" :key="key">
+      <td style="width: 20%; word-break: break-all">
+        {{ key }}
+      </td>
+      <td style="width: 80%; max-width: 800px">
+        <pre style="word-break: break-all" class="m-0">{{ displayData(value) }}</pre>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'KeyValueTable',
+  props: {
+    data: Object
+  },
+  setup() {
+    function displayData(v) {
+      if (typeof v === 'object' || Array.isArray(v)) {
+        return JSON.stringify(v, null, 2);
+      }
+
+      return v;
+    }
+
+    return {
+      displayData
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>