@iservice365/layer-common 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 0.0.5
+
+### Patch Changes
+
+- 07a1941: chore: adjust navigation drawer and header
+
 ## 0.0.4
 
 ### Patch Changes

package/components/Layout/Header.vue

@@ -1,23 +1,6 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
-    <div style="width: 264px" class="ml-2">
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-    </div>
-
-    <v-row no-gutters>
-      <v-col cols="6">
-        <v-text-field
-          v-model="search"
-          width="100%"
-          prepend-inner-icon="mdi-magnify"
-          variant="solo-filled"
-          flat
-          density="comfortable"
-          hide-details
-          rounded="xl"
-        />
-      </v-col>
-    </v-row>
+    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
     <template #append>
       <v-btn
@@ -94,13 +77,15 @@
 <script setup lang="ts">
 import { useTheme } from "vuetify";
 
+const menu = defineModel("menu", { type: Boolean });
+
 const search = defineModel("search", { type: String });
 
 const { drawer } = useLocal();
 
 const { redirect } = useUtils();
 
-const { APP_ACCOUNT, APP_NAME, APP_NAME_ROUTE } = useRuntimeConfig().public;
+const { APP_ACCOUNT, APP_NAME } = useRuntimeConfig().public;
 
 const theme = useTheme();
 

package/components/Layout/NavigationDrawer.vue

@@ -1,45 +1,34 @@
 <template>
-  <v-navigation-drawer
-    v-model="drawer"
-    permanent
-    floating
-    class="pr-2 bg-primary"
-  >
+  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
     <v-list>
       <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title class="text-h6 text-white">
-            {{ APP_NAME }}
-          </v-list-item-title>
-        </v-list-item-content>
+        <v-list-item-title class="text-h6 text-white">
+          {{ APP_NAME }}
+        </v-list-item-title>
       </v-list-item>
       <slot name="action" />
       <template
         v-for="(navigationItem, navigationIndex) in props.navigationItems"
-        :key="`${navigationItem.route.name}-${navigationIndex}`"
+        :key="`${navigationItem.title}-${navigationIndex}`"
       >
         <NavigationItem
+          v-if="navigationItem.route && navigationItem.route.name"
           :title="navigationItem.title"
           :icon="navigationItem.icon"
           :route="navigationItem.route"
           :children="navigationItem.children"
         />
-      </template>
 
-      <v-list-subheader>
-        <span class="font-weight-bold text-white">iService365 Services</span>
-      </v-list-subheader>
-      <template
-        v-for="(service, serviceIndex) in services"
-        :key="`${service.id}-${serviceIndex}`"
-      >
         <NavigationItem
-          :name="`${service.id}-${serviceIndex}`"
-          :title="service.title"
-          :icon="service.icon"
-          :link="service.link"
+          v-else-if="navigationItem.link"
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :link="navigationItem.link"
+          :children="navigationItem.children"
         />
       </template>
+
+      <slot name="services"> </slot>
     </v-list>
   </v-navigation-drawer>
 </template>
@@ -51,40 +40,5 @@ const props = defineProps({
 
 const { drawer } = useLocal();
 
-const {
-  APP_NAME,
-  APP_SECURITY,
-  APP_HYGIENE,
-  APP_PROPERTY_MANAGEMENT,
-  APP_MECHANICAL_ELECTRICAL,
-} = useRuntimeConfig().public;
-
-const services = computed(() => {
-  return [
-    {
-      id: "security",
-      title: "Security",
-      icon: "mdi-shield",
-      link: APP_SECURITY,
-    },
-    {
-      id: "hygiene",
-      title: "Hygiene",
-      icon: "mdi-spray-bottle",
-      link: APP_HYGIENE,
-    },
-    {
-      id: "property-management",
-      title: "Property Management",
-      icon: "mdi-home-city-outline",
-      link: APP_PROPERTY_MANAGEMENT,
-    },
-    {
-      id: "mechanical-electrical",
-      title: "Mechanical & Electrical",
-      icon: "mdi-tools",
-      link: APP_MECHANICAL_ELECTRICAL,
-    },
-  ];
-});
+const { APP_NAME } = useRuntimeConfig().public;
 </script>

package/components/NavigationItem.vue

@@ -1,12 +1,7 @@
 <template>
   <v-list-group v-if="children && children.length">
     <template #activator="{ props }">
-      <v-list-item
-        v-bind="props"
-        :prepend-icon="icon"
-        rounded="e-pill"
-        class="text-subtitle-2"
-      >
+      <v-list-item v-bind="props" :prepend-icon="icon" class="text-subtitle-2">
         {{ title }}
       </v-list-item>
     </template>
@@ -22,11 +17,10 @@
   </v-list-group>
 
   <v-list-item
-    v-if="props.route.name"
+    v-if="props.route && props.route.name"
     :key="props.name"
     :prepend-icon="icon"
     :to="props.route"
-    rounded="e-pill"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -37,7 +31,6 @@
     :key="props.name"
     :prepend-icon="icon"
     :href="props.link"
-    rounded="e-pill"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -57,9 +50,9 @@ const props = defineProps({
     default: "",
   },
   route: {
-    type: Object,
+    type: Object as PropType<Record<string, any>>,
     default() {
-      return { name: "", params: {} };
+      return { name: "" };
     },
   },
   link: {

package/components/SwitchContext.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-menu
+    v-model="menu"
+    location="bottom"
+    offset="5px"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ props }">
+      <v-list>
+        <v-list-item
+          v-bind="props"
+          :key="props.title"
+          :prepend-icon="prop.icon"
+          append-icon="mdi-chevron-down"
+          :to="props.route"
+          class="text-subtitle-2 font-weight-bold"
+        >
+          Select {{ prop.title }}
+        </v-list-item>
+      </v-list>
+    </template>
+
+    <v-card width="300px" rounded="lg" class="pa-4">
+      <span class="text-subtitle-2 font-weight-bold">
+        Switch {{ prop.title }} context
+      </span>
+      <v-text-field density="compact" width="100%" hide-details class="mb-2">
+        <template #prepend-inner>
+          <v-icon>mdi-magnify</v-icon>
+        </template>
+      </v-text-field>
+      <v-divider />
+      <v-list class="pa-0 my-2" density="compact" max-height="200px">
+        <v-list-item
+          density="compact"
+          class="text-caption font-weight-bold"
+          v-for="item in prop.items"
+          :key="item.value"
+          @click="emit('click:switch', item.value)"
+        >
+          <v-icon size="16" class="mr-2">
+            {{ prop.selected === item.value ? "mdi-check" : "" }}
+          </v-icon>
+
+          {{ item.text }}
+        </v-list-item>
+      </v-list>
+
+      <slot name="footer"></slot>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "app",
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: false,
+    default: () => [],
+  },
+  selected: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "mdi-domain",
+  },
+  logo: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click:switch"]);
+
+const menu = defineModel<boolean>({ required: false, default: false });
+</script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/types/local.d.ts

@@ -32,6 +32,7 @@ declare type TNavigationItem = {
   title: string;
   icon?: string;
   route?: TNavigationRoute;
+  link?: string;
   children?: TNavigationItem[];
 };