quasar-ui-danx 0.3.2 → 0.3.4

package/src/components/ActionTable/Form/Fields/SelectDrawer.vue

@@ -14,6 +14,7 @@
           @click="toggleSelect(option)"
       >
         <QCheckbox
+            @click.stop="toggleSelect(option)"
             :model-value="isSelected(option)"
             class="mr-2"
         />

package/src/components/Navigation/NavigationMenu.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+      class="p-4"
+      :class="{ 'is-collapsed': collapsed }"
+  >
+    <div
+        v-for="item in allowedItems"
+        :key="'nav-item-' + item.label"
+        class="nav-menu-item"
+        :class="item.class || itemClass"
+    >
+      <div class="flex flex-nowrap" @click="item.onClick">
+        <div v-if="item.icon">
+          <component
+              :is="item.icon"
+              class="nav-icon"
+              :class="item.iconClass"
+          />
+        </div>
+        <div class="label ml-2" :class="item.labelClass">{{ item.label }}</div>
+        <QTooltip v-if="collapsed" v-bind="item.tooltip">{{ item.tooltip?.text || item.label }}</QTooltip>
+      </div>
+      <QSeparator
+          v-if="item.separator"
+          :key="'separator-' + item.label"
+          class="my-2"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  collapsed: Boolean,
+  itemClass: {
+    type: String,
+    default: "hover:bg-gray-200"
+  },
+  activeClass: {
+    type: String,
+    default: "bg-blue-200"
+  },
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const allowedItems = computed(() => props.items.filter((item) => !item.hidden));
+</script>
+
+<style lang="scss">
+.nav-menu-item {
+  padding: 1.2em;
+  border-radius: 0.5em;
+  font-weight: bold;
+  font-size: 14px;
+  height: 3.8em;
+  width: 13em;
+  transition: all 150ms, color 0ms;
+  cursor: pointer;
+
+  &.is-disabled {
+    @apply bg-inherit;
+  }
+
+  .label {
+    @apply transition-all;
+  }
+
+  .nav-icon {
+    @apply w-5 h-5 flex-shrink-0;
+  }
+}
+
+.is-collapsed {
+  .nav-link {
+    width: 3.8em;
+  }
+
+  .label {
+    @apply opacity-0;
+  }
+}
+</style>

package/src/components/Navigation/index.ts

@@ -0,0 +1 @@
+export { default as NavigationMenu } from "./NavigationMenu.vue";

package/src/components/Utility/Files/FilePreview.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="relative flex justify-center bg-gray-100" :class="{'rounded-2xl': !square}">
+  <div class="relative flex justify-center bg-gray-100 overflow-hidden" :class="{'rounded-2xl': !square}">
     <template v-if="computedImage">
       <div
-          class="grow h-full overflow-hidden"
-          :class="{'rounded-2xl': !square}"
+          class="grow h-full"
           @click="showPreview = true"
       >
         <div

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./ActionTable";
 export * from "./AuditHistory";
 export * from "./DragAndDrop";
+export * from "./Navigation";
 export * from "./PanelsDrawer";
 export * from "./Utility";

package/src/styles/general.scss

@@ -0,0 +1,18 @@
+body {
+  height: 100vh;
+
+  #app,
+  #main-layout,
+  main {
+    height: 100%;
+  }
+}
+
+a {
+  cursor: pointer;
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/styles/index.scss

@@ -3,3 +3,4 @@
 @tailwind utilities;
 
 @import 'quasar-reset';
+@import "general";