@icvdeveloper/common-module 0.0.96 → 0.0.97

package/dist/runtime/components/profile/Profile.vue

@@ -1,149 +1,149 @@
-<script lang="ts" setup>
-import { toRefs, reactive, ref, computed } from "vue";
-import { find } from "lodash-es";
-import { storeToRefs } from "pinia";
-import { useAuthStore } from "../../store/auth";
-import Sidebar from "./components/Sidebar.vue";
-import SidebarNavItem from "./components/SidebarNavItem.vue";
-import TabGeneralInformation from "./tabs/GeneralInformation.vue";
-import TabFavorites from "./tabs/Favorites.vue";
-import TabProfileImage from "./tabs/ProfileImage.vue";
-
-type Props = {
-  visible?: boolean;
-  showFavorites?: boolean;
-};
-
-type Tab = {
-  id: number;
-  name: string;
-  component: Component | null;
-  shouldShow: boolean;
-  selected: boolean;
-};
-
-// props
-const props = withDefaults(defineProps<Props>(), {
-  visible: false,
-  showFavorites: false,
-});
-
-// data
-const { visible, showFavorites } = toRefs(props);
-const { user } = storeToRefs(useAuthStore());
-const tabs = reactive<Tab[]>([
-  {
-    id: 1,
-    name: "General Information",
-    component: TabGeneralInformation,
-    shouldShow: true,
-    selected: true,
-  },
-  {
-    id: 2,
-    name: "Profile Image",
-    component: TabProfileImage,
-    shouldShow: true,
-    selected: false,
-  },
-  {
-    id: 3,
-    name: "Favorites",
-    component: TabFavorites,
-    shouldShow: showFavorites.value,
-    selected: false,
-  },
-  {
-    id: 4,
-    name: "Logout",
-    component: null,
-    shouldShow: true,
-    selected: false,
-  },
-]);
-
-// emits
-const emit = defineEmits<{
-  (event: "close"): void;
-}>();
-
-// computed
-const selectedTab = computed<Tab>(() => {
-  return find(tabs, {
-    selected: true,
-  });
-});
-
-// actions
-const { logout } = useAuthStore();
-const closeModal = () => {
-  emit("close");
-};
-
-const setTab = (id: number) => {
-  if (id === 4) {
-    logout();
-    closeModal();
-    return;
-  }
-
-  const currentSelected = find(tabs, {
-    selected: true,
-  });
-
-  if (currentSelected) {
-    currentSelected.selected = false;
-  }
-
-  const newSelected = find(tabs, {
-    id,
-  });
-
-  newSelected.selected = true;
-};
-</script>
-
-<template>
-  <CommonModal
-    :use-padding="false"
-    modal-size="60"
-    :visible="visible"
-    @trigger="closeModal"
-  >
-    <template #modal-body>
-      <div class="p-2">
-        <div class="flex flex-col md:flex-row w-full p-5">
-          <Sidebar :name="user.name">
-            <SidebarNavItem
-              v-for="tab in tabs"
-              :id="tab.id"
-              :key="tab.id"
-              class="cursor-pointer"
-              :active="tab.selected === true"
-              @click="setTab"
-            >
-              {{ tab.name }}
-            </SidebarNavItem>
-          </Sidebar>
-
-          <div class="md:w-3/4 content-container ml-0 md:ml-2">
-            <div
-              v-if="selectedTab"
-              class="rounded overflow-hidden shadow-lg w-full h-full p-5"
-            >
-              <h2 class="mb-4">
-                {{ selectedTab.name }}
-              </h2>
-
-              <component
-                :is="selectedTab.component"
-                v-if="selectedTab.component && selectedTab.shouldShow"
-                :user="user"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </CommonModal>
-</template>
+<script lang="ts" setup>
+import { toRefs, reactive, ref, computed } from "vue";
+import { find } from "lodash-es";
+import { storeToRefs } from "pinia";
+import { useAuthStore } from "../../store/auth";
+import Sidebar from "./components/Sidebar.vue";
+import SidebarNavItem from "./components/SidebarNavItem.vue";
+import TabGeneralInformation from "./tabs/GeneralInformation.vue";
+import TabFavorites from "./tabs/Favorites.vue";
+import TabProfileImage from "./tabs/ProfileImage.vue";
+
+type Props = {
+  visible?: boolean;
+  showFavorites?: boolean;
+};
+
+type Tab = {
+  id: number;
+  name: string;
+  component: Component | null;
+  shouldShow: boolean;
+  selected: boolean;
+};
+
+// props
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  showFavorites: false,
+});
+
+// data
+const { visible, showFavorites } = toRefs(props);
+const { user } = storeToRefs(useAuthStore());
+const tabs = reactive<Tab[]>([
+  {
+    id: 1,
+    name: "General Information",
+    component: TabGeneralInformation,
+    shouldShow: true,
+    selected: true,
+  },
+  {
+    id: 2,
+    name: "Profile Image",
+    component: TabProfileImage,
+    shouldShow: true,
+    selected: false,
+  },
+  {
+    id: 3,
+    name: "Favorites",
+    component: TabFavorites,
+    shouldShow: showFavorites.value,
+    selected: false,
+  },
+  {
+    id: 4,
+    name: "Logout",
+    component: null,
+    shouldShow: true,
+    selected: false,
+  },
+]);
+
+// emits
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
+
+// computed
+const selectedTab = computed<Tab>(() => {
+  return find(tabs, {
+    selected: true,
+  });
+});
+
+// actions
+const { logout } = useAuthStore();
+const closeModal = () => {
+  emit("close");
+};
+
+const setTab = (id: number) => {
+  if (id === 4) {
+    logout();
+    closeModal();
+    return;
+  }
+
+  const currentSelected = find(tabs, {
+    selected: true,
+  });
+
+  if (currentSelected) {
+    currentSelected.selected = false;
+  }
+
+  const newSelected = find(tabs, {
+    id,
+  });
+
+  newSelected.selected = true;
+};
+</script>
+
+<template>
+  <CommonModal
+    :use-padding="false"
+    modal-size="60"
+    :visible="visible"
+    @trigger="closeModal"
+  >
+    <template #modal-body>
+      <div class="p-2">
+        <div class="flex flex-col md:flex-row w-full p-5">
+          <Sidebar :name="user.name">
+            <SidebarNavItem
+              v-for="tab in tabs"
+              :id="tab.id"
+              :key="tab.id"
+              class="cursor-pointer"
+              :active="tab.selected === true"
+              @click="setTab"
+            >
+              {{ tab.name }}
+            </SidebarNavItem>
+          </Sidebar>
+
+          <div class="md:w-3/4 content-container ml-0 md:ml-2">
+            <div
+              v-if="selectedTab"
+              class="rounded overflow-hidden shadow-lg w-full h-full p-5"
+            >
+              <h2 class="mb-4">
+                {{ selectedTab.name }}
+              </h2>
+
+              <component
+                :is="selectedTab.component"
+                v-if="selectedTab.component && selectedTab.shouldShow"
+                :user="user"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </CommonModal>
+</template>

package/dist/runtime/components/profile/components/Sidebar.vue

@@ -1,27 +1,27 @@
-<script lang="ts" setup>
-import { toRefs } from "vue";
-
-type Props = {
-  name: string;
-};
-
-const props = defineProps<Props>();
-
-const { name } = toRefs(props);
-</script>
-
-<template>
-  <div
-    class="md:w-1/4 rounded overflow-hidden shadow-lg md:mr-2 mt-1 mb-4 md:mb-0 md:mt-0"
-  >
-    <div class="px-6 py-4">
-      <div class="font-bold text-xl mb-2">
-        {{ name }}
-      </div>
-
-      <nav class="flex-grow md:block pb-0 md:pb-4 md:overflow-y-auto">
-        <slot />
-      </nav>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { toRefs } from "vue";
+
+type Props = {
+  name: string;
+};
+
+const props = defineProps<Props>();
+
+const { name } = toRefs(props);
+</script>
+
+<template>
+  <div
+    class="md:w-1/4 rounded overflow-hidden shadow-lg md:mr-2 mt-1 mb-4 md:mb-0 md:mt-0"
+  >
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">
+        {{ name }}
+      </div>
+
+      <nav class="flex-grow md:block pb-0 md:pb-4 md:overflow-y-auto">
+        <slot />
+      </nav>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/profile/components/SidebarNavItem.vue

@@ -1,39 +1,39 @@
-<script lang="ts" setup>
-import { toRefs } from "vue";
-
-type Props = {
-  active: boolean;
-  id: number;
-};
-
-const props = defineProps<Props>();
-
-// reactive prop data
-const { active, id } = toRefs(props);
-
-// emits
-const emit = defineEmits<{
-  (event: "click", value: number): void;
-}>();
-
-// methods
-const onClick = () => {
-  emit("click", id.value);
-};
-</script>
-
-<template>
-  <a
-    :class="{ active: active }"
-    class="sidebar-nav-item block px-4 py-2 mt-2 mx-1 text-black text-sm no-underline font-semibold rounded-lg hover:bg-gray-500 focus:text-white hover:text-white focus:bg-gray-500 focus:outline-none focus:shadow-outline"
-    @click="onClick"
-  >
-    <slot />
-  </a>
-</template>
-
-<style scoped>
-.active {
-  @apply bg-gray-500 text-white;
-}
-</style>
+<script lang="ts" setup>
+import { toRefs } from "vue";
+
+type Props = {
+  active: boolean;
+  id: number;
+};
+
+const props = defineProps<Props>();
+
+// reactive prop data
+const { active, id } = toRefs(props);
+
+// emits
+const emit = defineEmits<{
+  (event: "click", value: number): void;
+}>();
+
+// methods
+const onClick = () => {
+  emit("click", id.value);
+};
+</script>
+
+<template>
+  <a
+    :class="{ active: active }"
+    class="sidebar-nav-item block px-4 py-2 mt-2 mx-1 text-black text-sm no-underline font-semibold rounded-lg hover:bg-gray-500 focus:text-white hover:text-white focus:bg-gray-500 focus:outline-none focus:shadow-outline"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+
+<style scoped>
+.active {
+  @apply bg-gray-500 text-white;
+}
+</style>

package/dist/runtime/components/profile/tabs/Favorites.vue

@@ -1,21 +1,21 @@
-<script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import { useAuthStore } from "../../../store/auth";
-
-const { user } = storeToRefs(useAuthStore());
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="favorite in user.favorites"
-      :key="favorite.id"
-      class="py-2 border-b"
-    >
-      <h3 class="pb-2">
-        {{ favorite.name }}
-      </h3>
-      <div v-html="favorite.description" />
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useAuthStore } from "../../../store/auth";
+
+const { user } = storeToRefs(useAuthStore());
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="favorite in user.favorites"
+      :key="favorite.id"
+      class="py-2 border-b"
+    >
+      <h3 class="pb-2">
+        {{ favorite.name }}
+      </h3>
+      <div v-html="favorite.description" />
+    </div>
+  </div>
+</template>