@icvdeveloper/common-module 0.0.130 → 0.0.131

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.130"
+  "version": "0.0.131"
 }

package/dist/runtime/@types/components.d.ts

@@ -227,3 +227,77 @@ export type PlayerAndContentClassObj = {
     sponsoredByText?: string | null;
     components?: PlayerAndContentCompObj;
 };
+export type SidebarNavItemClassObj = {
+    link?: string | null;
+};
+export type SidebarClassObj = {
+    container?: string | null;
+    containerInner?: string | null;
+    nameContainer?: string | null;
+    slotContainer?: string | null;
+};
+export type FavoritesClassObj = {
+    container?: string | null;
+    favorite?: string | null;
+    favoriteName?: string | null;
+    favoriteDesc?: string | null;
+};
+export type AlertBoxClassObj = {
+    container?: string | null;
+    containerInner?: string | null;
+    list?: string | null;
+    listElement?: string | null;
+};
+export type TextInputClassObj = {
+    container?: string | null;
+};
+export type SwitchInputClassObj = {
+    container?: string | null;
+    containerInner?: string | null;
+    buttonDiv?: string | null;
+    slotElement?: string | null;
+};
+export type GenInfoCompObj = {
+    alertBox?: AlertBoxClassObj;
+    textInput?: TextInputClassObj;
+    switchInput?: SwitchInputClassObj;
+};
+export type GenInfoClassObj = {
+    container?: string | null;
+    fieldsContainer?: string | null;
+    fieldElement?: string | null;
+    fieldLabel?: string | null;
+    buttonContainer?: string | null;
+    responseMsg?: string | null;
+    submitButton?: string | null;
+    components?: GenInfoCompObj;
+};
+export type ProfileImageCompObj = {
+    alertBox?: AlertBoxClassObj;
+};
+export type ProfileImageClassObj = {
+    container?: string | null;
+    image?: string | null;
+    formContainer?: string | null;
+    submitButton?: string | null;
+    buttonSvg?: string | null;
+    buttonText?: string | null;
+    inputField?: string | null;
+    components?: ProfileImageCompObj;
+};
+export type ProfileCompObj = {
+    genInfo?: GenInfoClassObj;
+    profileImage?: ProfileImageClassObj;
+    favorites?: FavoritesClassObj;
+    modal?: modalClassObj;
+    sidebar?: SidebarClassObj;
+    sidebarNavItem?: SidebarNavItemClassObj;
+};
+export type ProfileClassObj = {
+    container?: string | null;
+    containerInner?: string | null;
+    contentContainer?: string | null;
+    contentContainerInner?: string | null;
+    contentName?: string | null;
+    components?: ProfileCompObj;
+};

package/dist/runtime/components/forms/AlertBox.vue

@@ -1,20 +1,52 @@
 <script lang="ts" setup>
 import { toRefs } from "vue";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { AlertBoxClassObj } from "../../@types/components";
 
 type Props = {
   errors: Array<any>;
+  classObject?: AlertBoxClassObj;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      containerInner: "",
+      list: "",
+      listElement: "",
+    };
+  },
+});
 
-const { errors } = toRefs(props);
+const { classBinding } = useClassBinding();
+
+const { errors, classObject } = toRefs(props);
 </script>
 
 <template>
-  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red">
-    <span class="inline-block align-middle">
-      <ul>
-        <li v-for="error in errors" :key="error[0]">{{ error[0] }}</li>
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500'
+      )
+    "
+  >
+    <span
+      :class="
+        classBinding(classObject, 'containerInner', 'inline-block align-middle')
+      "
+    >
+      <ul :class="classBinding(classObject, 'list', '')">
+        <li
+          v-for="error in errors"
+          :key="error[0]"
+          :class="classBinding(classObject, 'listElement', '')"
+        >
+          {{ error[0] }}
+        </li>
       </ul>
     </span>
   </div>

package/dist/runtime/components/forms/SwitchInput.vue

@@ -1,17 +1,27 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { SwitchInputClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
 
 interface Props {
   isEnabled: boolean;
   color?: string;
+  classObject?: SwitchInputClassObj;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  isEnabled: false,
   color: "#4D4D4D",
+  classObject: () => {
+    return {
+      container: "",
+      containerInner: "",
+      buttonDiv: "",
+    };
+  },
 });
 
 const value = ref<boolean>(props.isEnabled);
+const { color, classObject } = toRefs(props);
 
 const emit = defineEmits<{
   (event: "toggle", value: boolean): void;
@@ -21,19 +31,25 @@ const toggle = () => {
   value.value = !value.value;
   emit("toggle", value.value);
 };
+
+const { classBinding } = useClassBinding();
 </script>
 
 <template id="switch-button">
-  <div class="switch-button-control">
+  <div :class="classBinding(classObject, 'container', 'switch-button-control')">
     <div
-      class="switch-button"
-      :class="{ enabled: value }"
+      :class="[
+        { enabled: value },
+        classBinding(classObject, 'containerInner', 'switch-button'),
+      ]"
       :style="{ '--color': color }"
       @click="toggle"
     >
-      <div class="button" />
+      <div :class="classBinding(classObject, 'buttonDiv', 'button')" />
     </div>
-    <div class="switch-button-label">
+    <div
+      :class="classBinding(classObject, 'slotElement', 'switch-button-label')"
+    >
       <slot />
     </div>
   </div>

package/dist/runtime/components/forms/TextInput.vue

@@ -1,11 +1,21 @@
 <script lang="ts" setup>
+import { useClassBinding } from "../../composables/useClassBinding";
+import { TextInputClassObj } from "../../@types/components";
+
 type Props = {
   modelValue: string;
   placeholder: string;
   type: string;
+  classObject?: TextInputClassObj;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+    };
+  },
+});
 
 const emit = defineEmits<{
   (event: "update:modelValue", value: string): void;
@@ -15,11 +25,14 @@ const emit = defineEmits<{
 const changeInput = (e) => {
   emit("update:modelValue", e.target.value);
 };
+
+const { classBinding } = useClassBinding();
+const { classObject } = toRefs(props);
 </script>
 
 <template>
   <input
-    class="form-input px-2 py-1"
+    :class="classBinding(classObject, 'container', 'form-input px-2 py-1')"
     :type="type"
     :value="props.modelValue"
     :placeholder="placeholder"

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

@@ -3,6 +3,17 @@ import { toRefs, reactive, ref, computed } from "vue";
 import { find } from "lodash-es";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "../../store/auth";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  ProfileClassObj,
+  ProfileCompObj,
+  modalClassObj,
+  SidebarNavItemClassObj,
+  SidebarClassObj,
+  GenInfoClassObj,
+  ProfileImageClassObj,
+  FavoritesClassObj,
+} from "../../@types/components";
 import Sidebar from "./components/Sidebar.vue";
 import SidebarNavItem from "./components/SidebarNavItem.vue";
 import TabGeneralInformation from "./tabs/GeneralInformation.vue";
@@ -12,6 +23,7 @@ import TabProfileImage from "./tabs/ProfileImage.vue";
 type Props = {
   visible?: boolean;
   showFavorites?: boolean;
+  classObject?: ProfileClassObj;
 };
 
 type Tab = {
@@ -26,10 +38,32 @@ type Tab = {
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   showFavorites: false,
+  classObject: () => {
+    return {
+      container: "",
+      containerInner: "",
+      contentContainer: "",
+      contentContainerInner: "",
+      contentName: "",
+      components: ref<ProfileCompObj>({
+        genInfo: ref<GenInfoClassObj>({}),
+        profileImage: ref<ProfileImageClassObj>({}),
+        favorites: ref<FavoritesClassObj>({}),
+        modal: ref<modalClassObj>({}),
+        sidebar: ref<SidebarClassObj>({}),
+        sidebarNavitem: ref<SidebarNavItemClassObj>({}),
+      }),
+      // components: ref<PlayerAndContentCompObj>({
+      //   contentTabs: ref<ContentTabsClassObj>({}),
+      //   contentArea: ref<ContentAreaClassObj>({}),
+      //   mediaContainer: ref<MediaContainerClassObj>({}),
+      // }),
+    };
+  },
 });
 
 // data
-const { visible, showFavorites } = toRefs(props);
+const { visible, showFavorites, classObject } = toRefs(props);
 const { user } = storeToRefs(useAuthStore());
 const tabs = reactive<Tab[]>([
   {
@@ -62,6 +96,8 @@ const tabs = reactive<Tab[]>([
   },
 ]);
 
+const { classBinding } = useClassBinding();
+
 // emits
 const emit = defineEmits<{
   (event: "close"): void;
@@ -101,6 +137,20 @@ const setTab = (id: number) => {
 
   newSelected.selected = true;
 };
+
+const tabClassObj = computed<{}>(() => {
+  if (selectedTab.value.name === "General Information") {
+    return classObject.value.components?.genInfo;
+  }
+  if (selectedTab.value.name === "Profile Image") {
+    return classObject.value.components?.profileImage;
+  }
+  if (selectedTab.value.name === "Favorites") {
+    return classObject.value.components?.favorites;
+  } else {
+    return {};
+  }
+});
 </script>
 
 <template>
@@ -108,17 +158,29 @@ const setTab = (id: number) => {
     :use-padding="false"
     modal-size="60"
     :visible="visible"
+    :class-object="classObject.components?.modal"
     @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">
+      <div :class="classBinding(classObject, 'container', 'p-2')">
+        <div
+          :class="
+            classBinding(
+              classObject,
+              'containerInner',
+              'flex flex-col md:flex-row w-full p-5'
+            )
+          "
+        >
+          <Sidebar
+            :name="user.name"
+            :class-object="classObject.components?.sidebar"
+          >
             <SidebarNavItem
               v-for="tab in tabs"
               :id="tab.id"
               :key="tab.id"
-              class="cursor-pointer"
+              :class-object="classObject.components?.sidebarNavItem"
               :active="tab.selected === true"
               @click="setTab"
             >
@@ -126,18 +188,33 @@ const setTab = (id: number) => {
             </SidebarNavItem>
           </Sidebar>
 
-          <div class="md:w-3/4 content-container ml-0 md:ml-2">
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'contentContainer',
+                '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"
+              :class="
+                classBinding(
+                  classObject,
+                  'contentContainerInner',
+                  'rounded overflow-hidden shadow-lg w-full h-full p-5'
+                )
+              "
             >
-              <h2 class="mb-4">
+              <h2 :class="classBinding(classObject, 'contentName', 'mb-4')">
                 {{ selectedTab.name }}
               </h2>
 
               <component
                 :is="selectedTab.component"
                 v-if="selectedTab.component && selectedTab.shouldShow"
+                :class-object="tabClassObj"
                 :user="user"
               />
             </div>

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

@@ -1,25 +1,58 @@
 <script lang="ts" setup>
 import { toRefs } from "vue";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import { SidebarClassObj } from "../../../@types/components";
 
 type Props = {
   name: string;
+  classObject?: SidebarClassObj;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      containerInner: "",
+      nameContainer: "",
+      slotContainer: "",
+    };
+  },
+});
+
+const { classObject } = toRefs(props);
 
 const { name } = toRefs(props);
+const { classBinding } = useClassBinding();
 </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"
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        '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">
+    <div :class="classBinding(classObject, 'containerInner', 'px-6 py-4')">
+      <div
+        :class="
+          classBinding(classObject, 'nameContainer', 'font-bold text-xl mb-2')
+        "
+      >
         {{ name }}
       </div>
 
-      <nav class="flex-grow md:block pb-0 md:pb-4 md:overflow-y-auto">
+      <nav
+        :class="
+          classBinding(
+            classObject,
+            'slotContainer',
+            'flex-grow md:block pb-0 md:pb-4 md:overflow-y-auto'
+          )
+        "
+      >
         <slot />
       </nav>
     </div>

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

@@ -1,15 +1,26 @@
 <script lang="ts" setup>
 import { toRefs } from "vue";
+import { SidebarNavItemClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
 
 type Props = {
   active: boolean;
   id: number;
+  classObject?: SidebarNavItemClassObj;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      link: "",
+    };
+  },
+});
+
+const { classBinding } = useClassBinding();
 
 // reactive prop data
-const { active, id } = toRefs(props);
+const { active, id, classObject } = toRefs(props);
 
 // emits
 const emit = defineEmits<{
@@ -24,8 +35,14 @@ const onClick = () => {
 
 <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"
+    :class="[
+      { active: active },
+      classBinding(
+        classObject,
+        'link',
+        'sidebar-nav-item block px-4 py-2 mt-2 mx-1 text-black text-sm no-underline font-semibold rounded-lg cursor-pointer hover:bg-gray-500 focus:text-white hover:text-white focus:bg-gray-500 focus:outline-none focus:shadow-outline'
+      ),
+    ]"
     @click="onClick"
   >
     <slot />

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

@@ -1,21 +1,42 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "../../../store/auth";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import { FavoritesClassObj } from "../../../@types/components";
 
+type Props = {
+  classObject?: FavoritesClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      favorite: "",
+      favoriteName: "",
+      favoriteDesc: "",
+    };
+  },
+});
+const { classObject } = toRefs(props);
+const { classBinding } = useClassBinding();
 const { user } = storeToRefs(useAuthStore());
 </script>
 
 <template>
-  <div>
+  <div :class="classBinding(classObject, 'container', '')">
     <div
       v-for="favorite in user.favorites"
       :key="favorite.id"
-      class="py-2 border-b"
+      :class="classBinding(classObject, 'favorite', 'py-2 border-b')"
     >
-      <h3 class="pb-2">
+      <h3 :class="classBinding(classObject, 'favoriteName', 'pb-2')">
         {{ favorite.name }}
       </h3>
-      <div v-html="favorite.description" />
+      <div
+        :class="classBinding(classObject, 'favoriteDesc', '')"
+        v-html="favorite.description"
+      />
     </div>
   </div>
 </template>

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

@@ -2,6 +2,40 @@
 import { storeToRefs } from "pinia";
 import { ref, reactive } from "vue";
 import { useAuthStore } from "../../../store/auth";
+import {
+  GenInfoClassObj,
+  GenInfoCompObj,
+  AlertBoxClassObj,
+  TextInputClassObj,
+  SwitchInputClassObj,
+} from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  classObject?: GenInfoClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      fieldsContainer: "",
+      fieldElement: "",
+      fieldLabel: "",
+      buttonContainer: "",
+      responseMsg: "",
+      components: ref<GenInfoCompObj>({
+        alertBox: ref<AlertBoxClassObj>({}),
+        textInput: ref<TextInputClassObj>({}),
+        switchInput: ref<SwitchInputClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { classBinding } = useClassBinding();
+
+const { classObject } = toRefs(props);
 
 const { user } = storeToRefs(useAuthStore());
 const formData = reactive({
@@ -30,76 +64,157 @@ const handleForm = () => {
       wasSaved.value = true;
     })
     .catch((error) => {
-      if (error.response === 422) {
-        errors.value = error.response.data.errors;
+      console.log(error);
+      console.log(error.response);
+      console.log(error.response._data);
+      if (error.response.status === 422) {
+        errors.value = error.response._data.errors;
       }
     });
 };
 </script>
 
 <template>
-  <div class="flex justify-between flex-col">
-    <CommonAlertBox v-if="errors" :errors="errors" />
+  <div
+    :class="
+      classBinding(classObject, 'container', 'flex justify-between flex-col')
+    "
+  >
+    <CommonAlertBox
+      v-if="Object.keys(errors).length"
+      :errors="errors"
+      :class-object="classObject.components?.alertBox"
+    />
 
-    <div>
-      <div class="mb-4">
-        <label class="block text-grey-darker text-sm font-bold mb-2">
+    <div :class="classBinding(classObject, 'fieldsContainer', '')">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
+        <label
+          :class="
+            classBinding(
+              classObject,
+              'fieldLabel',
+              'block text-grey-700 text-sm font-bold mb-2'
+            )
+          "
+        >
           Title
         </label>
         <CommonTextInput
           v-model="formData.title"
-          class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
+          :class="
+            classBinding(
+              classObject.components?.textInput,
+              'container',
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+            )
+          "
           type="text"
           placeholder="Title"
         />
       </div>
-      <div class="mb-4">
-        <label class="block text-grey-darker text-sm font-bold mb-2">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
+        <label
+          :class="
+            classBinding(
+              classObject,
+              'fieldLabel',
+              'block text-grey-700 text-sm font-bold mb-2'
+            )
+          "
+        >
           Name
         </label>
         <CommonTextInput
           v-model="formData.name"
-          class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
+          :class="
+            classBinding(
+              classObject.components?.textInput,
+              'container',
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+            )
+          "
           type="text"
           placeholder="Name"
         />
       </div>
-      <div class="mb-4">
-        <label class="block text-grey-darker text-sm font-bold mb-2">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
+        <label
+          :class="
+            classBinding(
+              classObject,
+              'fieldLabel',
+              'block text-grey-700 text-sm font-bold mb-2'
+            )
+          "
+        >
           Company
         </label>
         <CommonTextInput
           v-model="formData.company"
-          class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
+          :class="
+            classBinding(
+              classObject.components?.textInput,
+              'container',
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+            )
+          "
           type="text"
           placeholder="Company"
         />
       </div>
-      <div class="mb-4">
-        <label class="block text-grey-darker text-sm font-bold mb-2">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
+        <label
+          :class="
+            classBinding(
+              classObject,
+              'fieldLabel',
+              'block text-grey-700 text-sm font-bold mb-2'
+            )
+          "
+        >
           LinkedIn
         </label>
         <CommonTextInput
           v-model="formData.linkedin_url"
-          class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
+          :class="
+            classBinding(
+              classObject.components?.textInput,
+              'container',
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+            )
+          "
           type="text"
           placeholder="LinkedIn URL"
         />
       </div>
-      <div class="mb-4">
-        <label class="block text-grey-darker text-sm font-bold mb-2">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
+        <label
+          :class="
+            classBinding(
+              classObject,
+              'fieldLabel',
+              'block text-grey-700 text-sm font-bold mb-2'
+            )
+          "
+        >
           Twitter
         </label>
         <CommonTextInput
           v-model="formData.twitter_url"
-          class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
+          :class="
+            classBinding(
+              classObject.components?.textInput,
+              'container',
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+            )
+          "
           type="text"
           placeholder="Twitter URL"
         />
       </div>
-
-      <div class="mb-4">
+      <div :class="classBinding(classObject, 'fieldElement', 'mb-4')">
         <CommonSwitchInput
+          :class-object="classObject.components?.switchInput"
           :is-enabled="formData.video_chat"
           @toggle="toggleChat"
         >
@@ -107,11 +222,22 @@ const handleForm = () => {
         </CommonSwitchInput>
       </div>
     </div>
-    <div>
-      <p v-if="wasSaved" class="text-green">Your profile was saved!</p>
+    <div :class="classBinding(classObject, 'buttonContainer', '')">
+      <p
+        v-if="wasSaved"
+        :class="classBinding(classObject, 'responseMsg', 'text-green-500')"
+      >
+        Your profile was saved!
+      </p>
 
       <button
-        class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+        :class="
+          classBinding(
+            classObject,
+            'submitButton',
+            'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline'
+          )
+        "
         type="button"
         @click="handleForm"
       >

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

@@ -2,7 +2,36 @@
 import { ref, reactive } from "vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "../../../store/auth";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import {
+  ProfileImageClassObj,
+  ProfileCompObj,
+  AlertBoxClassObj,
+} from "../../../@types/components";
 
+type Props = {
+  classObject?: ProfileImageClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      image: "",
+      formContainer: "",
+      submitButton: "",
+      buttonSvg: "",
+      buttonText: "",
+      inputField: "",
+      components: ref<ProfileCompObj>({
+        alertBox: ref<AlertBoxClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { classBinding } = useClassBinding();
+const { classObject } = toRefs(props);
 const { user } = storeToRefs(useAuthStore());
 const wasSaved = ref<boolean>(false);
 const errors = ref<[]>([]);
@@ -26,50 +55,73 @@ const onFileChanged = (e) => {
     })
     .catch((error) => {
       if (error.response.status === 422) {
-        errors.value = error.response.data.errors;
+        errors.value = error.response._data.errors;
       }
     });
 };
 </script>
 
 <template>
-  <div>
-    <div>
-      <CommonAlertBox :errors="errors" />
+  <div :class="classBinding(classObject, 'container', '')">
+    <CommonAlertBox
+      v-if="Object.keys(errors).length"
+      :errors="errors"
+      :class-object="classObject.components?.alertBox"
+    />
 
-      <img
-        v-if="user.profile_image"
-        :src="user.profile_image"
-        width="100"
-        height="100"
-        alt=""
-      />
+    <img
+      v-if="user.profile_image"
+      :src="user.profile_image"
+      :class="classBinding(classObject, 'image', 'w-100 h-100')"
+      alt=""
+    />
 
-      <div class="overflow-hidden relative w-64 mt-4 mb-4">
-        <p v-if="wasSaved" class="text-green">Your profile Image was saved!</p>
+    <div
+      :class="
+        classBinding(
+          classObject,
+          'formContainer',
+          'overflow-hidden relative w-64 mt-4 mb-4'
+        )
+      "
+    >
+      <p
+        v-if="wasSaved"
+        :class="classBinding(classObject, 'responseMsg', 'text-green-500')"
+      >
+        Your profile image was saved!
+      </p>
 
-        <button
-          class="rounded bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 w-full inline-flex items-center"
+      <label
+        for="inputImg"
+        :class="
+          classBinding(
+            classObject,
+            'submitButton',
+            'cursor-pointer rounded bg-blue-500 text-white font-bold py-2 px-4 inline-flex items-center hover:bg-blue-700 active:bg-blue-800'
+          )
+        "
+      >
+        <svg
+          fill="#FFF"
+          :class="classBinding(classObject, 'buttonSvg', 'w-6 h-6')"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
+        </svg>
+        <span :class="classBinding(classObject, 'buttonText', 'ml-2')"
+          >Change Profile Image</span
         >
-          <svg
-            fill="#FFF"
-            height="18"
-            viewBox="0 0 24 24"
-            width="18"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M0 0h24v24H0z" fill="none" />
-            <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
-          </svg>
-          <span class="ml-2">Change Profile Image</span>
-        </button>
-        <input
-          class="cursor-pointer absolute block py-2 px-4 w-full opacity-0 pin-r pin-t"
-          type="file"
-          accept="image/*"
-          @change="onFileChanged"
-        />
-      </div>
+      </label>
+      <input
+        id="inputImg"
+        :class="classBinding(classObject, 'inputField', 'hidden')"
+        type="file"
+        accept="image/*"
+        @change="onFileChanged"
+      />
     </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icvdeveloper/common-module",
-  "version": "0.0.130",
+  "version": "0.0.131",
   "license": "MIT",
   "type": "module",
   "exports": {