quasar-ui-danx 0.3.1 → 0.3.3

package/src/components/ActionTable/Filters/FilterListToggle.vue

@@ -39,10 +39,14 @@ const activeCount = computed(() => Object.keys(props.filter).filter(key => props
 </script>
 <style lang="scss" scoped>
 .btn-blue-highlight {
-  @apply rounded-lg border border-solid;
+  @apply rounded-lg border border-solid p-3 whitespace-nowrap;
 
   &.highlighted {
     box-shadow: 0 0 0 3px #B8E1FF;
   }
+
+  :deep(.q-btn__content) {
+    @apply flex items-center flex-nowrap;
+  }
 }
 </style>

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/ActionTable/Form/RenderedForm.vue

@@ -7,10 +7,11 @@
             :key="name"
             :name="name"
             class="p-0"
+            content-class="w-full"
         >
-          <div class="flex flex-nowrap items-center text-sm">
-            <div>{{ name || "(Default)" }}</div>
-            <template v-if="!disable && !readonly">
+          <div class="flex flex-nowrap items-center text-sm w-full">
+            <div class="flex-grow">{{ name || "1" }}</div>
+            <div v-if="!disable && !readonly && canModifyVariations" class="flex flex-nowrap items-center mr-2">
               <a
                   @click="() => (variationToEdit = name) && (newVariationName = name)"
                   class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
@@ -24,7 +25,7 @@
               >
                 <RemoveIcon class="w-3 text-red-900" />
               </a>
-            </template>
+            </div>
           </div>
         </QTab>
         <QTab
@@ -115,7 +116,8 @@ const props = defineProps({
   showName: Boolean,
   disable: Boolean,
   readonly: Boolean,
-  saving: Boolean
+  saving: Boolean,
+  canModifyVariations: Boolean
 });
 
 const FORM_FIELD_MAP = {
@@ -138,14 +140,19 @@ const mappedFields = props.form.fields.map((field) => ({
 }));
 
 const variationNames = computed(() => {
-  return [...new Set(props.values.map(v => v.variation))].sort();
+  const names = [...new Set(props.values.map(v => v.variation))].sort();
+  // Always guarantee that we show the default variation
+  if (names.length === 0) {
+    names.push("");
+  }
+  return names;
 });
 
 const currentVariation = ref(variationNames.value[0] || "");
 const newVariationName = ref("");
 const variationToEdit = ref(false);
 const variationToDelete = ref("");
-const canAddVariation = computed(() => variationNames.value.length < props.form.variations && !props.readonly && !props.disable);
+const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
 function getFieldResponse(name) {
   if (!props.values) return undefined;
@@ -165,19 +172,25 @@ function onInput(name, value) {
   emit("update:values", newValues);
 }
 
+function createVariation(variation) {
+  return props.form.fields.map((field) => ({
+    variation,
+    name: field.name,
+    value: field.type === "BOOLEAN" ? false : null
+  }));
+}
+
 function onAddVariation() {
   if (props.saving) return;
+  let newValues = [...props.values];
 
+  if (newValues.length === 0) {
+    newValues = createVariation("");
+  }
   const previousName = variationNames.value[variationNames.value.length - 1];
-  const newName = incrementName(!previousName ? "Variation 1" : previousName);
-
-  const newVariation = props.form.fields.map((field) => ({
-    variation: newName,
-    name: field.name,
-    value: field.type === "BOOLEAN" ? false : null
-  }));
-  const newValues = [...props.values, ...newVariation];
-  emit("update:values", newValues);
+  const newName = incrementName(!previousName ? "1" : previousName);
+  const newVariation = createVariation(newName);
+  emit("update:values", [...newValues, ...newVariation]);
   currentVariation.value = newName;
 }
 

package/src/components/Navigation/NavigationMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+      class="p-4"
+      :class="{ 'is-collapsed': collapsed }"
+  >
+    <div
+        v-for="item in allowedItems"
+        :key="'nav-item-' + item.label"
+    >
+      <a class="nav-link" @click="item.onClick">
+        <component
+            :is="item.icon"
+            class="nav-icon"
+        />
+        <div class="label ml-2">{{ item.label }}</div>
+        <QTooltip v-if="collapsed">{{ item.label }}</QTooltip>
+      </a>
+      <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,
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const allowedItems = computed(() => props.items.filter((item) => !item.hidden));
+</script>
+
+<style lang="scss">
+.nav-link {
+  display: block !important;
+  padding: 1.2em;
+  border-radius: 0.5em;
+  font-weight: bold;
+  font-size: 14px;
+  color: black;
+  height: 3.8em;
+  width: 13em;
+  transition: all 150ms;
+
+  &:hover {
+    @apply bg-gray-200;
+    .nav-icon {
+      @apply text-gray-700;
+    }
+  }
+
+  &.is-active {
+    @apply bg-blue-100;
+  }
+
+  &.is-disabled {
+    @apply bg-inherit;
+  }
+
+  .label {
+    @apply transition-all;
+  }
+
+  .nav-icon {
+    @apply w-5 h-5 flex-shrink-0 text-black;
+  }
+}
+
+.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/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";