glib-web 0.5.98 → 0.6.2

package/nav/dialog.vue

@@ -1,127 +1,127 @@
-<template>
-  <v-dialog
-    v-model="model"
-    width="600"
-    :dark="false"
-    :sm-and-down="false"
-    :persistent="true"
-  >
-    <v-card>
-      <v-card-title v-if="title || showClose" class="headline" primary-title>
-        {{ title }}
-        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
-          <v-icon>close</v-icon>
-        </v-btn>
-      </v-card-title>
-
-      <div>
-        <div v-if="message" class="dialog-message">
-          <common-message :spec="spec" />
-        </div>
-        <panels-responsive v-if="body" :spec="body" />
-      </div>
-
-      <v-divider></v-divider>
-
-      <v-card-actions v-if="spec.buttons">
-        <v-spacer></v-spacer>
-
-        <v-btn
-          v-for="(button, index) in spec.buttons"
-          :key="index"
-          color="primary"
-          text
-          @click="click(button, $event)"
-        >
-          {{ button.text }}
-        </v-btn>
-
-        <panels-responsive v-if="footer" :spec="footer" />
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-import Http from "../utils/http";
-import Action from "../action";
-
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    stack: { type: Array, required: true },
-    vueApp: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      title: null,
-      message: null,
-      body: null,
-      footer: null,
-      model: null,
-      url: this.spec.url,
-      showClose: Utils.type.isString(this.spec.url)
-    };
-  },
-  watch: {
-    model: function(val, oldVal) {
-      if (!val) {
-        this.$destroy();
-      }
-    }
-  },
-  methods: {
-    $ready() {
-      this.$root.vueApp = this.vueApp;
-
-      const spec = this.spec;
-      if (Utils.type.isString(this.url)) {
-        this.message = "Loading...";
-        const url = Utils.url.appendParams(this.url, { _dialog: "v1" });
-        Http.execute({ url: url }, "GET", this, response => {
-          this.title = response.title;
-          this.message = "";
-          this.body = response.body;
-          this.footer = response.footer;
-          this.showClose = false;
-        });
-      } else {
-        this.title = this.spec.title;
-        this.message = this.spec.message;
-        this.body = this.spec.body;
-        Action.execute(spec.onLoad, null, this);
-      }
-
-      this.stack.push(this);
-      this.model = true;
-    },
-    $tearDown() {
-      console.log("Dialog destroyed");
-      this.stack.remove(this);
-    },
-    close() {
-      this.model = false;
-    },
-    click(spec, event) {
-      const onClick = spec["onClick"];
-      this.model = false;
-      Action.execute(onClick, event.target, this);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.dialog-message {
-  padding: 16px 16px 20px 16px;
-  /* white-space: pre-wrap; */
-}
-.dialog-close {
-  right: 16px;
-  top: 12px;
-  position: absolute;
-}
-.v-card__text {
-  padding: 0 !important;
-}
-</style>
+<template>
+  <v-dialog
+    v-model="model"
+    width="600"
+    :dark="false"
+    :sm-and-down="false"
+    :persistent="true"
+  >
+    <v-card>
+      <v-card-title v-if="title || showClose" class="headline" primary-title>
+        {{ title }}
+        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <div>
+        <div v-if="message" class="dialog-message">
+          <common-message :spec="spec" />
+        </div>
+        <panels-responsive v-if="body" :spec="body" />
+      </div>
+
+      <v-divider></v-divider>
+
+      <v-card-actions v-if="spec.buttons">
+        <v-spacer></v-spacer>
+
+        <v-btn
+          v-for="(button, index) in spec.buttons"
+          :key="index"
+          color="primary"
+          text
+          @click="click(button, $event)"
+        >
+          {{ button.text }}
+        </v-btn>
+
+        <panels-responsive v-if="footer" :spec="footer" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import Http from "../utils/http";
+import Action from "../action";
+
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    stack: { type: Array, required: true },
+    vueApp: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      title: null,
+      message: null,
+      body: null,
+      footer: null,
+      model: null,
+      url: this.spec.url,
+      showClose: Utils.type.isString(this.spec.url)
+    };
+  },
+  watch: {
+    model: function(val, oldVal) {
+      if (!val) {
+        this.$destroy();
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      this.$root.vueApp = this.vueApp;
+
+      const spec = this.spec;
+      if (Utils.type.isString(this.url)) {
+        this.message = "Loading...";
+        const url = Utils.url.appendParams(this.url, { _dialog: "v1" });
+        Http.execute({ url: url }, "GET", this, response => {
+          this.title = response.title;
+          this.message = "";
+          this.body = response.body;
+          this.footer = response.footer;
+          this.showClose = false;
+        });
+      } else {
+        this.title = this.spec.title;
+        this.message = this.spec.message;
+        this.body = this.spec.body;
+        Action.execute(spec.onLoad, null, this);
+      }
+
+      this.stack.push(this);
+      this.model = true;
+    },
+    $tearDown() {
+      console.log("Dialog destroyed");
+      this.stack.remove(this);
+    },
+    close() {
+      this.model = false;
+    },
+    click(spec, event) {
+      const onClick = spec["onClick"];
+      this.model = false;
+      Action.execute(onClick, event.target, this);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dialog-message {
+  padding: 16px 16px 20px 16px;
+  /* white-space: pre-wrap; */
+}
+.dialog-close {
+  right: 16px;
+  top: 12px;
+  position: absolute;
+}
+.v-card__text {
+  padding: 0 !important;
+}
+</style>

package/nav/drawer.vue

@@ -1,105 +1,105 @@
-<template>
-  <!-- <v-navigation-drawer app fixed v-model="state" @input="updateState"> -->
-  <!-- <v-navigation-drawer mini-variant app v-model="state" @input="updateState"> -->
-
-  <v-navigation-drawer
-    v-model="state"
-    app
-    :class="cssClasses"
-    :dark="cssClasses.includes('dark')"
-    :expand-on-hover="expandOnHover()"
-    :permanent="cssClasses.includes('permanent')"
-    :style="style"
-    @input="updateState"
-  >
-    <template v-if="spec.header">
-      <!-- <v-toolbar flat> -->
-      <panels-responsive :spec="spec.header" />
-      <!-- </v-toolbar> -->
-      <v-divider></v-divider>
-    </template>
-
-    <v-list dense class="pt-0">
-      <div v-for="(item, index) in spec.rows" :key="index">
-        <v-divider v-if="item.type == 'divider'" />
-        <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
-        <nav-drawerButton v-else :spec="item" />
-        <!-- <nav-drawerButton :spec="item" :state="state" v-else /> -->
-      </div>
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script>
-// import UrlUtils from "../utils/url";
-import NavDrawerButton from "./drawerButton";
-import NavDrawerLabel from "./drawerLabel";
-
-export default {
-  components: {
-    "nav-drawerButton": NavDrawerButton,
-    "nav-drawerLabel": NavDrawerLabel
-  },
-  // props: ["spec", "trigger", "permanent"],
-  props: {
-    spec: { type: Object, required: true },
-    trigger: { type: [Object, Date], default: null },
-    permanent: { type: Boolean, required: true }
-  },
-  data: function() {
-    return {
-      // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
-      // See https://vuetifyjs.com/en/components/navigation-drawers
-      state: null
-    };
-  },
-  computed: {
-    cssClasses() {
-      // To make sure a css class name is assigned to this component
-      this.spec.view = this.spec.view || "pages/leftDrawer";
-      return this.$classes();
-    },
-    style() {
-      // Increase z-index so that the drawer is above the page header.
-      // return { zIndex: 11 };
-      return this.$styles();
-    },
-    lgAndAbove() {
-      switch (this.$vuetify.breakpoint.name) {
-        case "xs":
-        case "sm":
-        case "md":
-          return false;
-        default:
-          return true;
-      }
-    }
-  },
-  watch: {
-    trigger: function(val, oldVal) {
-      this.state = !this.state;
-    }
-  },
-  methods: {
-    $ready() {
-      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
-      this.$el.addEventListener("drawers/clickButton", () => {
-        if (!this.permanent) {
-          this.updateState(false);
-        }
-      });
-    },
-    updateState(state) {
-      this.state = state;
-    },
-    expandOnHover() {
-      return (
-        this.cssClasses.includes("mini") ||
-        (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
-      );
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <!-- <v-navigation-drawer app fixed v-model="state" @input="updateState"> -->
+  <!-- <v-navigation-drawer mini-variant app v-model="state" @input="updateState"> -->
+
+  <v-navigation-drawer
+    v-model="state"
+    app
+    :class="cssClasses"
+    :dark="cssClasses.includes('dark')"
+    :expand-on-hover="expandOnHover()"
+    :permanent="cssClasses.includes('permanent')"
+    :style="style"
+    @input="updateState"
+  >
+    <template v-if="spec.header">
+      <!-- <v-toolbar flat> -->
+      <panels-responsive :spec="spec.header" />
+      <!-- </v-toolbar> -->
+      <v-divider></v-divider>
+    </template>
+
+    <v-list dense class="pt-0">
+      <div v-for="(item, index) in spec.rows" :key="index">
+        <v-divider v-if="item.type == 'divider'" />
+        <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
+        <nav-drawerButton v-else :spec="item" />
+        <!-- <nav-drawerButton :spec="item" :state="state" v-else /> -->
+      </div>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+// import UrlUtils from "../utils/url";
+import NavDrawerButton from "./drawerButton";
+import NavDrawerLabel from "./drawerLabel";
+
+export default {
+  components: {
+    "nav-drawerButton": NavDrawerButton,
+    "nav-drawerLabel": NavDrawerLabel
+  },
+  // props: ["spec", "trigger", "permanent"],
+  props: {
+    spec: { type: Object, required: true },
+    trigger: { type: [Object, Date], default: null },
+    permanent: { type: Boolean, required: true }
+  },
+  data: function() {
+    return {
+      // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
+      // See https://vuetifyjs.com/en/components/navigation-drawers
+      state: null
+    };
+  },
+  computed: {
+    cssClasses() {
+      // To make sure a css class name is assigned to this component
+      this.spec.view = this.spec.view || "pages/leftDrawer";
+      return this.$classes();
+    },
+    style() {
+      // Increase z-index so that the drawer is above the page header.
+      // return { zIndex: 11 };
+      return this.$styles();
+    },
+    lgAndAbove() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+        case "sm":
+        case "md":
+          return false;
+        default:
+          return true;
+      }
+    }
+  },
+  watch: {
+    trigger: function(val, oldVal) {
+      this.state = !this.state;
+    }
+  },
+  methods: {
+    $ready() {
+      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
+      this.$el.addEventListener("drawers/clickButton", () => {
+        if (!this.permanent) {
+          this.updateState(false);
+        }
+      });
+    },
+    updateState(state) {
+      this.state = state;
+    },
+    expandOnHover() {
+      return (
+        this.cssClasses.includes("mini") ||
+        (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
+      );
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/nav/drawerButton.vue

@@ -1,31 +1,31 @@
-<template>
-  <v-list-item :href="$href(spec)" @click="performAction($event)">
-    <v-list-item-action v-if="spec.icon">
-      <common-icon :spec="spec.icon" />
-    </v-list-item-action>
-
-    <v-list-item-content>
-      <v-list-item-title>
-        {{ spec.text }}
-        <common-badge :spec="spec" />
-      </v-list-item-title>
-    </v-list-item-content>
-  </v-list-item>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  methods: {
-    performAction(event) {
-      // this.$el.dispatchEvent(new Event("drawers/clickButton", { bubbles: true }))
-      this.$dispatchEvent("drawers/clickButton", {});
-      this.$onClick(event);
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <v-list-item :href="$href(spec)" @click="performAction($event)">
+    <v-list-item-action v-if="spec.icon">
+      <common-icon :spec="spec.icon" />
+    </v-list-item-action>
+
+    <v-list-item-content>
+      <v-list-item-title>
+        {{ spec.text }}
+        <common-badge :spec="spec" />
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  methods: {
+    performAction(event) {
+      // this.$el.dispatchEvent(new Event("drawers/clickButton", { bubbles: true }))
+      this.$dispatchEvent("drawers/clickButton", {});
+      this.$onClick(event);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "glib-web",
-  "version": "0.5.98",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@mdi/font": "^4.5.95",
-    "@rails/actioncable": "^6.0.0",
-    "@rails/activestorage": "^6.0.0-alpha",
-    "awesome-phonenumber": "2.15.0",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-annotation": "^0.5.7",
-    "json-logic-js": "^1.2.2",
-    "marked": "^0.7.0",
-    "phoenix": "^1.5.3",
-    "push.js": "^1.0.12",
-    "sass": "^1.23.6",
-    "sass-loader": "^8.0.0",
-    "vue": "2.6.10",
-    "vue-chartkick": "^0.6.1",
-    "vue-gtag": "^1.1.2",
-    "vue-youtube": "^1.4.0",
-    "vue2-editor": "^2.9.1",
-    "vue2-google-maps": "^0.10.6",
-    "vuedraggable": "^2.24.1",
-    "vuetify": "2.3.9"
-  },
-  "devDependencies": {
-    "@types/chart.js": "^2.9.34",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-loader": "^3.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.3",
-    "eslint-plugin-vuetify": "^1.0.0-beta.3",
-    "prettier": "^1.18.2"
-  }
-}
+{
+  "name": "glib-web",
+  "version": "0.6.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@mdi/font": "^4.5.95",
+    "@rails/actioncable": "^6.0.0",
+    "@rails/activestorage": "^6.0.0-alpha",
+    "awesome-phonenumber": "2.15.0",
+    "chart.js": "^2.8.0",
+    "chartjs-plugin-annotation": "^0.5.7",
+    "json-logic-js": "^1.2.2",
+    "marked": "^0.7.0",
+    "phoenix": "^1.5.3",
+    "push.js": "^1.0.12",
+    "sass": "^1.23.6",
+    "sass-loader": "^8.0.0",
+    "vue": "2.6.10",
+    "vue-chartkick": "^0.6.1",
+    "vue-gtag": "^1.1.2",
+    "vue-youtube": "^1.4.0",
+    "vue2-editor": "^2.9.1",
+    "vue2-google-maps": "^0.10.6",
+    "vuedraggable": "^2.24.1",
+    "vuetify": "2.3.9"
+  },
+  "devDependencies": {
+    "@types/chart.js": "^2.9.34",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vuetify": "^1.0.0-beta.3",
+    "prettier": "^1.18.2"
+  }
+}