Merge branch 'hotfix/2.20.8' into main

.github/release.yml

@@ -6,8 +6,12 @@ changelog:
     - title: Improvements 🦾
       labels:
         - "improvement"
+        - "Improvement"
         - "enhancement"
+        - "Enhancement"
     - title: Bugfixes 🐛
       labels:
         - "bugfix"
+        - "Bugfix"
         - "bug"
+        - "Bug"

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "2.20.0",
+	"version": "2.20.8",
 	"name": "harmless_key",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Harmless Key",

src/components/Drawer.vue

@@ -9,7 +9,7 @@
 			<div class="drawer__content" :class="drawer.classes">
 				<component
 					v-if="component"
-					v-bind="drawer.data"
+					v-bind="!Array.isArray(drawer.data) ? drawer.data : null"
 					:is="component"
 					:data="drawer.data"
 					:type="drawer.type"

src/components/campaign/resources/CheatSheet.vue

@@ -1,105 +1,112 @@
 <template>
-  <div>
-    <hk-input 
-			v-model="query" 
-			:dense="!compendium"
-			label="Search"
-			class="mb-2"
-			clearable>
+	<div>
+		<hk-input v-model="query" :dense="!compendium" label="Search" class="mb-2" clearable>
 			<q-icon slot="prepend" name="search" />
 		</hk-input>
 		<p class="red" v-if="query && !sheet.length">Nothing found</p>
-    <q-tabs
-      v-if="!query"
-			v-model="type"
+		<q-tabs
+			v-if="!query && !isMobile"
+			v-model="tab_type"
 			:dark="$store.getters.theme === 'dark'"
 			inline-label
 			outside-arrows
 			mobile-arrows
-      class="mb-2"
+			class="mb-2"
 		>
-			<q-tab
-				v-for="{ name, label } in types"
-				:name="name"
-				:label="label"
-				:key="name"
-			/>
+			<q-tab v-for="{ name, label } in types" :name="name" :label="label" :key="name" />
 		</q-tabs>
 
-    <q-list :dark="$store.getters.theme === 'dark'" class="accordion">
-      <q-expansion-item
-        v-for="{ type, name, description, caption, src, url } in sheet"
-        :dark="$store.getters.theme === 'dark'"
-        switch-toggle-side
-        :name="name"
-        :key="url"
-      >
-        <template v-slot:header>
-          <q-item-section>
-            <router-link v-if="compendium" :to="`/compendium/rules/${url}`" stop.prevent>
-             {{ name }}
-            </router-link>
-            <template v-else>{{ name }}</template>
-            <q-item-label caption class="neutral-3">{{ caption }}</q-item-label>
-          </q-item-section>
-          <q-item-section avatar class="neutral-3">
-            {{ types.filter(item => item.name === type)[0]?.label }}
-          </q-item-section>
-        </template>
+		<q-list :dark="$store.getters.theme === 'dark'" class="accordion">
+			<q-expansion-item
+				v-for="{ type, name, description, caption, src, url } in sheet"
+				:dark="$store.getters.theme === 'dark'"
+				switch-toggle-side
+				:name="name"
+				:key="url"
+			>
+				<template v-slot:header>
+					<q-item-section>
+						<router-link v-if="compendium" :to="`/compendium/rules/${url}`" stop.prevent>
+							{{ name }}
+						</router-link>
+						<template v-else>{{ name }}</template>
+						<q-item-label caption class="neutral-3">{{ caption }}</q-item-label>
+					</q-item-section>
+					<q-item-section avatar class="neutral-3">
+						{{ types.filter((item) => item.name === type)[0]?.label }}
+					</q-item-section>
+				</template>
 
-        <div class="accordion-body">
-          <hk-markdown-editor :value="description" read-only />
-          <span class="neutral-2">{{ src }}</span>
-        </div>
-      </q-expansion-item>
-    </q-list>
-  </div>
+				<div class="accordion-body">
+					<hk-markdown-editor :value="description" read-only />
+					<span class="neutral-2">{{ src }}</span>
+				</div>
+			</q-expansion-item>
+		</q-list>
+	</div>
 </template>
 
 <script>
 import { rules } from "src/utils/generalConstants";
 
 export default {
-  name: "CheatSheet",
-  props: {
-    compendium: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  data() {
-    return {
-      type: "action",
-      query: null,
-      types: [
-        {
-          name: "action",
-          label: "Action"
-        },
-        {
-          name: "bonus_action",
-          label: "Bonus Action"
-        },
-        {
-          name: "reaction",
-          label: "Reaction"
-        },
-        {
-          name: "movement",
-          label: "Movement"
-        },
-        {
-          name: "environment",
-          label: "Environment"
-        },
-      ],
-      cheatSheet: rules,
-    }
-  },
-  computed: {
-    sheet() {
-      return this.query ? this.cheatSheet.filter(({ name, description }) => name.toLowerCase().includes(this.query.toLowerCase()) || description.toLowerCase().includes(this.query.toLowerCase())) : this.cheatSheet.filter(item => item.type === this.type);
-    }
-  }
-}
+	name: "CheatSheet",
+	props: {
+		compendium: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			tab_type: undefined,
+			query: null,
+			types: [
+				{
+					name: "action",
+					label: "Action",
+				},
+				{
+					name: "bonus_action",
+					label: "Bonus Action",
+				},
+				{
+					name: "reaction",
+					label: "Reaction",
+				},
+				{
+					name: "movement",
+					label: "Movement",
+				},
+				{
+					name: "environment",
+					label: "Environment",
+				},
+			],
+			cheatSheet: rules,
+		};
+	},
+	mounted() {
+		console.log("Mount Cheat Sheet");
+	},
+	computed: {
+		isMobile() {
+			// This only works for real mobiles, not for small desktop screens
+			return this.$q.platform.is.mobile;
+		},
+		sheet() {
+			if (this.query) {
+				return this.cheatSheet.filter(
+					({ name, description }) =>
+						name.toLowerCase().includes(this.query.toLowerCase()) ||
+						description.toLowerCase().includes(this.query.toLowerCase())
+				);
+			}
+			if (this.tab_type) {
+				return this.cheatSheet.filter((item) => item.type === this.tab_type);
+			}
+			return this.cheatSheet;
+		},
+	},
+};
 </script>