quasar-ui-danx 0.3.4 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.4",
+  "version": "0.3.8",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -10,7 +10,8 @@
   "scripts": {
     "dev": "cd dev && quasar dev && cd ..",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postversion": "yarn build && npm publish && cd .. && git add ui && git commit -m \"v$npm_package_version\" && git tag \"v$npm_package_version\" && git push"
   },
   "repository": {
     "type": "git",
@@ -27,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/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/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;
+}