glib-web 3.0.13 → 3.1.0

package/.eslintrc.js

@@ -1,37 +1,34 @@
 module.exports = {
-  root: true,
-  env: {
-    // this section will be used to determine which APIs are available to us
-    // (i.e are we running in a browser environment or a node.js env)
-    node: true,
-    browser: true
-  },
-  plugins: [
-    'vuetify'
-  ],
-  parserOptions: {
-    parser: "babel-eslint",
-    // specifying a module sourcetype prevent eslint from marking import statements as errors
-    sourceType: "module"
-  },
-  extends: [
-    // use the recommended rule set for both plain javascript and vue
-    "eslint:recommended",
-    "plugin:vue/recommended",
-    "prettier/vue",
-    "plugin:prettier/recommended"
-  ],
-  rules: {
-    // we should always disable console logs and debugging in production
-    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    // "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-    "vue/component-name-in-template-casing": ["error", "PascalCase"],
-    'vuetify/no-deprecated-classes': 'error',
-    'vuetify/grid-unknown-attributes': 'error',
-    'vuetify/no-legacy-grid': 'error',
-  },
-  globals: {
-    "Utils": "readonly",
-    "GLib": "readonly",
-  }
-};
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "plugin:vue/vue3-essential",
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        "vue/multi-word-component-names": ["off"]
+    },
+    "globals": {
+        "GLib": "readonly",
+        "Utils": "readonly"
+    }
+};

package/README.md

@@ -1,18 +1,20 @@
-
 ## Set up ESLint
-* Install the following VSCode extensions
-  * `ESLint`
-  * `Vetur`
-* Edit settings.json
-  * `CTRL+SHIFT+P` -> `Open Settings (JSON)` -- This will open an editor for `settings.json`.
-  * Copy content of `settings.json.example` into the editor.
+
+- Install the following VSCode extensions
+  - `ESLint`
+  - `Volar`
+- Edit settings.json
+  - `CTRL+SHIFT+P` -> `Preferences: Open User Settings (JSON)` -- This will open an editor for `settings.json`.
+  - Copy content of `settings.json.example` into the editor.
 
 ## Best practices
-* To prevent circular dependencies between components:
-  * It’s okay to use dispatchEvent for upward communication (i.e. child component to ancestors). This fits with how the JS event model works as it already supports event propagation out of the box.
-  * For downward communication, don’t use any sort of event/pub-sub mechanism. Always use Vuejs data binding instead.
+
+- To prevent circular dependencies between components:
+  - It’s okay to use dispatchEvent for upward communication (i.e. child component to ancestors). This fits with how the JS event model works as it already supports event propagation out of the box.
+  - For downward communication, don’t use any sort of event/pub-sub mechanism. Always use Vuejs data binding instead.
 
 ## Link to local npm during development
+
 - `cd glib-web-npm`
 - `yarn install`
 - `yarn link`
@@ -21,10 +23,12 @@
 - `bin/webpack-dev-server`
 
 ## Prepare for publishing
+
 - Create a PR to the `master` branch
 - After approval, merge the PR.
 
 ## Publish package to npm
+
 - One-off login
   - npm login --registry=https://registry.npmjs.org/glib-web
 - Bump `version` in `package.json`

package/actions/popovers/open.js

@@ -1,6 +1,3 @@
-import { nextTick } from "vue";
-import bus from "../../utils/eventBus";
-
 export default class {
     execute(properties, component) {
         Utils.launch.popover.open(properties, component);

package/components/_responsive.vue

@@ -56,7 +56,7 @@ export default {
       return item.view == "panels/column-v1";
     },
     viewKey(item, index) {
-      return index
+      return index;
 
       // return `view${index}_${item.view}`;
 

package/components/popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Placement options:
+    <!-- Placement options:
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -13,7 +13,7 @@
     | 'left-start'
     | 'left-end'
   -->
-  <common-responsive :style="floatingStyles" v-if="toggle" :spec="spec" />
+    <common-responsive :style="floatingStyles" v-if="toggle" :spec="spec" />
 </template>
 
 <script>
@@ -37,6 +37,7 @@ export default {
                 this.toggle = false;
             })
             document.addEventListener('click', this.handleClose)
+            window.addEventListener('resize', () => this.toggle = false)
         },
         handleClose(event) {
             const isClickInside = this.$el.contains(event.target)

package/nav/dialog.vue

@@ -2,7 +2,6 @@
   <v-dialog :model-value="model" :width="spec.width || 600" :dark="false" :fullscreen="fullscreen" :sm-and-down="false"
     :persistent="!spec.closeOnBlur">
     <v-card :style="hamburgerStyles" class="hamburger">
-      <!-- <v-card-title v-if="title || showClose" class="text-h5" primary-title> -->
 
       <panels-responsive v-if="header" :spec="header" />
       <div class="dialog-title flex flex-wrap justify-between" v-if="title">
@@ -12,7 +11,8 @@
       </div>
 
       <div class="dialogs-body relative">
-        <v-btn size="small" v-if="showClose" text icon @click="close" class="mr-3 mt-2 close-btn" variant="flat">
+        <v-btn size="small" v-if="!disableCloseButton" text icon @click="close" class="mr-3 mt-2 close-btn"
+          style="z-index: 999;" variant="flat">
           <v-icon>close</v-icon>
         </v-btn>
         <component :is="containerComponent" :spec="formSpec">
@@ -64,7 +64,7 @@ export default {
       model: null,
       url: null,
       urlLoaded: false,
-      showClose: true,
+      disableCloseButton: false,
       isFormDirty: false,
       isFormSubmitted: false,
       isMobile: false,
@@ -138,7 +138,6 @@ export default {
     },
     reload(newSpec) {
       if (Utils.http.proceedEvenWhenDirty()) {
-        this.spec.url = newSpec.url
         this.urlLoaded = false;
         this.show(true);
       }
@@ -149,7 +148,7 @@ export default {
     show(reload) {
       const spec = this.spec;
       this.url = spec.url;
-      this.showClose = this.spec.showClose || Utils.type.isString(this.url);
+      this.disableCloseButton = this.spec.disableCloseButton || Utils.type.isString(this.url);
 
       if (Utils.type.isString(this.url)) {
         if (!this.urlLoaded) {
@@ -158,7 +157,6 @@ export default {
           }
           const url = Utils.url.appendParams(this.url, { _dialog: "v1" });
           Http.execute({ url: url }, "GET", this, (response) => {
-            console.log(url)
             Utils.http.forceComponentUpdate(() => {
               this.urlLoaded = true;
               this.title = response.title;
@@ -167,7 +165,7 @@ export default {
               this.header = response.header;
               this.body = response.body;
               this.footer = response.footer;
-              this.showClose = this.spec.showClose || true;
+              this.disableCloseButton = this.spec.disableCloseButton || false;
 
               Action.execute(response.onLoad, this);
             });
@@ -177,7 +175,7 @@ export default {
         this.title = this.spec.title;
         this.message = this.spec.message;
         this.body = this.spec.body;
-        this.showClose = this.spec.showClose || true;
+        this.disableCloseButton = this.spec.disableCloseButton || false;
         Action.execute(spec.onLoad, this);
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.0.13",
+  "version": "3.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,6 +19,7 @@
     "json-logic-js": "^2.0.0",
     "lodash.merge": "^4.6.2",
     "marked": "^4.0.0",
+    "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.4",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
@@ -37,11 +38,7 @@
   "devDependencies": {
     "@types/chart.js": "^2.9.34",
     "eslint": "^8.36.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^9.9.0",
-    "eslint-plugin-vuetify": "^2.0.0-beta.2",
-    "material-design-icons-iconfont": "^6.7.0",
+    "eslint-plugin-vue": "^9.17.0",
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }

package/settings.json.example

@@ -1,21 +1,17 @@
 {
+  "editor.tabSize": 2,
   "editor.scrollBeyondLastLine": false,
+  "editor.formatOnSave": true,
   "editor.minimap.enabled": false,
-  "editor.tabSize": 2,
-  "vetur.format.defaultFormatter.js": "vscode-typescript",
-  "vetur.format.defaultFormatter.html": "js-beautify-html",
-  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
-  "vetur.format.defaultFormatterOptions": {
-    "js-beautify-html": {
-      "wrap_attributes": "auto"
-    }
+  "ruby.format": "rubocop",
+  "window.zoomLevel": 1,
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
   },
-  "eslint.validate": [
-    "vue",
-    "html",
-    "javascript"
-  ],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
-}
+  "eslint.run": "onSave",
+  "javascript.format.semicolons": "insert",
+  "javascript.preferences.quoteStyle": "double"
+}

package/utils/eventBus.js

@@ -1,5 +1,7 @@
 // eventBus.js
-import emitter from 'tiny-emitter/instance'
+import Emitter from 'tiny-emitter'
+
+const emitter = new Emitter()
 
 export default {
     $on: (...args) => emitter.on(...args),

package/utils/history.js

@@ -1,5 +1,4 @@
 import { nextTick } from "vue";
-import eventBus from "./eventBus";
 import { vueApp } from "../store";
 
 export default class {

package/utils/launch.js

@@ -3,7 +3,7 @@ import Dialog from "../nav/dialog.vue";
 import Sheet from "../nav/sheet.vue";
 import Snackbar from "../nav/snackbar.vue";
 import Popover from "../components/popover.vue";
-import { computePosition, shift, offset } from '@floating-ui/dom'
+import { computePosition, flip, offset } from '@floating-ui/dom'
 import bus from "./eventBus";
 
 import { createApp, h } from "vue";
@@ -62,7 +62,7 @@ class LaunchPopover {
       // These properties need to be set to get an accurate calculation. See https://floating-ui.com/docs/computeposition
       Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
 
-      computePosition(reference, floating, { placement: placement, middleware: [shift(), offset(offsetSize)] })
+      computePosition(reference, floating, { placement: placement, middleware: [flip(), offset(offsetSize)] })
         .then(({ x, y }) => {
           Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 1200 });
         })