quasar-ui-danx 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "core-js": "^3.0.0",
     "cssnano": "^4.1.10",
     "eslint": "^8.5.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.24.1",
     "fs-extra": "^8.1.0",
     "postcss": "^8.4.38",

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -1,27 +1,45 @@
 <template>
   <div class="rendered-form">
-    <div v-if="form.variations > 1" class="mb-4">
-      <QTabs v-model="currentVariation" class="text-xs">
+    <div
+      v-if="form.variations > 1"
+      class="mb-4"
+    >
+      <QTabs
+        v-model="currentVariation"
+        class="text-xs"
+      >
         <QTab
-            v-for="(name, index) in variationNames"
-            :key="name"
-            :name="name"
-            class="p-0"
-            content-class="w-full"
+          v-for="(name, index) in variationNames"
+          :key="name"
+          :name="name"
+          class="p-0"
+          content-class="w-full"
         >
           <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">
+            <div
+              v-if="!isVariationFormComplete(name)"
+              class="variation-missing-icon pl-1"
+            >
+              <MissingIcon class="text-red-400 w-4" />
+              <QTooltip>Creative Form Incomplete</QTooltip>
+            </div>
+            <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"
+                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
+                @click="() => (variationToEdit = name) && (newVariationName = name)"
               >
                 <EditIcon class="w-3 text-blue-900" />
               </a>
               <a
-                  v-if="index > 0"
-                  @click="variationToDelete = name"
-                  class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
+                v-if="index > 0"
+                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
+                @click="variationToDelete = name"
               >
                 <RemoveIcon class="w-3 text-red-900" />
               </a>
@@ -29,63 +47,65 @@
           </div>
         </QTab>
         <QTab
-            v-if="canAddVariation"
-            name="add"
-            key="add-new-variation"
-            @click="onAddVariation"
-            class="bg-blue-600 rounded-t-lg !text-white"
+          v-if="canAddVariation"
+          key="add-new-variation"
+          name="add"
+          class="bg-blue-600 rounded-t-lg !text-white"
+          @click="onAddVariation"
         >
           <template v-if="saving">
             <QSpinnerBall class="w-4" />
           </template>
-          <template v-else>+ Add Variation</template>
+          <template v-else>
+            + Add Variation
+          </template>
         </QTab>
       </QTabs>
     </div>
     <div
-        v-for="(field, index) in mappedFields"
-        :key="field.id"
-        :class="{ 'mt-4': index > 0 }"
+      v-for="(field, index) in mappedFields"
+      :key="field.id"
+      :class="{ 'mt-4': index > 0 }"
     >
       <Component
-          :is="field.component"
-          :key="field.name + '-' + currentVariation"
-          :model-value="getFieldValue(field.name)"
-          :field="field"
-          :label="field.label || undefined"
-          :no-label="noLabel"
-          :show-name="showName"
-          :disable="disable"
-          :readonly="readonly"
-          @update:model-value="onInput(field.name, $event)"
+        :is="field.component"
+        :key="field.name + '-' + currentVariation"
+        :model-value="getFieldValue(field.name)"
+        :field="field"
+        :label="field.label || undefined"
+        :no-label="noLabel"
+        :show-name="showName"
+        :disable="disable"
+        :readonly="readonly"
+        @update:model-value="onInput(field.name, $event)"
       />
     </div>
     <ConfirmDialog
-        v-if="variationToEdit !== false"
-        title="Change variation name"
-        @confirm="onChangeVariationName"
-        @close="variationToEdit = false"
+      v-if="variationToEdit !== false"
+      title="Change variation name"
+      @confirm="onChangeVariationName"
+      @close="variationToEdit = false"
     >
       <TextField
-          v-model="newVariationName"
-          label="Enter name"
-          placeholder="Variation Name"
-          input-class="bg-white"
+        v-model="newVariationName"
+        label="Enter name"
+        placeholder="Variation Name"
+        input-class="bg-white"
       />
     </ConfirmDialog>
     <ConfirmDialog
-        v-if="variationToDelete"
-        :title="`Remove variation ${variationToDelete}?`"
-        content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
-        confirm-class="bg-red-900 text-white"
-        content-class="w-96"
-        @confirm="onRemoveVariation(variationToDelete)"
-        @close="variationToDelete = ''"
+      v-if="variationToDelete"
+      :title="`Remove variation ${variationToDelete}?`"
+      content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
+      confirm-class="bg-red-900 text-white"
+      content-class="w-96"
+      @confirm="onRemoveVariation(variationToDelete)"
+      @close="variationToDelete = ''"
     />
   </div>
 </template>
 <script setup>
-import { PencilIcon as EditIcon } from "@heroicons/vue/solid";
+import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
 import { computed, ref } from "vue";
 import { FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
@@ -154,9 +174,9 @@ const variationToEdit = ref(false);
 const variationToDelete = ref("");
 const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
-function getFieldResponse(name) {
+function getFieldResponse(name, variation) {
   if (!props.values) return undefined;
-  return props.values.find((v) => v.variation === currentVariation.value && v.name === name);
+  return props.values.find((v) => v.variation === (variation !== undefined ? variation : currentVariation.value) && v.name === name);
 }
 function getFieldValue(name) {
   return getFieldResponse(name)?.value;
@@ -224,4 +244,19 @@ function onRemoveVariation(name) {
   }
   variationToDelete.value = "";
 }
+
+function isVariationFormComplete(variation) {
+  const requiredGroups = {};
+  return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
+    const fieldResponse = getFieldResponse(field.name, variation);
+    const hasValue = !!fieldResponse && fieldResponse.value !== null;
+    if (field.required_group) {
+      // This required group has already been satisfied
+      if (requiredGroups[field.required_group]) return true;
+      return requiredGroups[field.required_group] = hasValue;
+    } else {
+      return hasValue;
+    }
+  });
+}
 </script>

package/src/components/Navigation/NavigationMenu.vue

@@ -1,29 +1,46 @@
 <template>
   <div
-      class="p-4"
-      :class="{ 'is-collapsed': collapsed }"
+    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"
+      v-for="item in allowedItems"
+      :key="'nav-item-' + item.label"
+      class="nav-menu-item-box"
     >
-      <div class="flex flex-nowrap" @click="item.onClick">
-        <div v-if="item.icon">
+      <div
+        class="nav-menu-item flex flex-nowrap"
+        :class="item.class || itemClass"
+        @click="item.onClick"
+      >
+        <div
+          v-if="item.icon"
+          class="flex-shrink-0"
+        >
           <component
-              :is="item.icon"
-              class="nav-icon"
-              :class="item.iconClass"
+            :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
+          v-if="!collapsed"
+          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"
+        v-if="item.separator"
+        :key="'separator-' + item.label"
+        class="my-2"
       />
     </div>
   </div>
@@ -52,12 +69,10 @@ const allowedItems = computed(() => props.items.filter((item) => !item.hidden));
 
 <style lang="scss">
 .nav-menu-item {
-  padding: 1.2em;
+  padding: 1em;
   border-radius: 0.5em;
   font-weight: bold;
   font-size: 14px;
-  height: 3.8em;
-  width: 13em;
   transition: all 150ms, color 0ms;
   cursor: pointer;
 

package/src/components/Utility/Tabs/IndicatorTab.vue

@@ -1,20 +1,22 @@
 <template>
   <QTab
-      :name="name"
-      class="w-full"
-      content-class="w-full"
+    :name="name"
+    class="w-full"
+    content-class="w-full"
   >
     <div class="flex items-center w-full">
-      <div class="flex-grow text-sm">{{ label }}</div>
+      <div class="flex-grow text-sm">
+        {{ label }}
+      </div>
       <div>
         <OverdueIcon
-            v-if="overdue"
-            class="w-5 ml-2"
-            :class="isActive ? 'text-white' : 'text-red-400'"
+          v-if="overdue"
+          class="w-5 ml-2"
+          :class="isActive ? 'text-white' : 'text-red-400'"
         />
         <WarningIcon
-            v-else-if="warning"
-            class="text-yellow-600 w-5"
+          v-else-if="warning"
+          class="text-yellow-600 w-5"
         />
       </div>
     </div>

package/src/styles/index.scss

@@ -2,5 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import 'quasar-reset';
+@import "quasar-reset";
 @import "general";
+@import "transitions";

package/src/styles/transitions.scss

@@ -0,0 +1,15 @@
+body.disable-all-transitions {
+  * {
+    transition: none !important;
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}