diff --git a/components/forms/ImageComponent.vue b/components/forms/ImageComponent.vue
index 7923b49..66c117f 100644
--- a/components/forms/ImageComponent.vue
+++ b/components/forms/ImageComponent.vue
@@ -57,7 +57,7 @@ const STATUS_INITIAL = 0,
   STATUS_SUCCESS = 2,
   STATUS_FAILED = 3;
 
-import { upload } from "@services/fileUploadService";
+// import { upload } from "@services/fileUploadService.js";
 import { wait } from "~/manuals/utilities.js";
 
 import formBuilderMixin from "@mixins/formBuilderMixin";
@@ -107,16 +107,16 @@ export default {
       // upload data to the server
       this.currentStatus = STATUS_SAVING;
 
-      upload(formData)
-        .then(wait(1500)) // DEV ONLY: wait for 1.5s
-        .then((x) => {
-          this.uploadedFiles = [].concat(x);
-          this.currentStatus = STATUS_SUCCESS;
-        })
-        .catch((err) => {
-          this.uploadError = err.response;
-          this.currentStatus = STATUS_FAILED;
-        });
+      // upload(formData)
+      //   .then(wait(1500)) // DEV ONLY: wait for 1.5s
+      //   .then((x) => {
+      //     this.uploadedFiles = [].concat(x);
+      //     this.currentStatus = STATUS_SUCCESS;
+      //   })
+      //   .catch((err) => {
+      //     this.uploadError = err.response;
+      //     this.currentStatus = STATUS_FAILED;
+      //   });
     },
     reset() {
       // reset form to initial state
diff --git a/components/forms/SelectComponentDefault.vue b/components/forms/SelectComponentDefault.vue
index ad84ee8..f91c5b9 100644
--- a/components/forms/SelectComponentDefault.vue
+++ b/components/forms/SelectComponentDefault.vue
@@ -30,13 +30,15 @@
 
 <script>
 import formBuilderMixin from "@mixins/formBuilderMixin";
-import HttpService from "@services/httpService";
+// import HttpService from "@services/httpService";
 
 export default {
   // props:["listOptions"],
 
   mixins: [formBuilderMixin],
-
+  created() {
+    this.httpService = useNuxtApp()["$http"];
+  },
   mounted() {
     setTimeout(() => {
       this.setOptions();
@@ -45,7 +47,7 @@ export default {
   },
   data() {
     return {
-      httpService: undefined,
+      httpService: {},
       optionRendering: false,
       listOptions: [],
     };
@@ -173,7 +175,7 @@ export default {
       if (this.optionRendering) return;
 
       let vm = this;
-      this.httpService = new HttpService();
+      // this.httpService = new HttpService();
 
       this.optionRendering = true;
 
diff --git a/mixins/formBuilderMixin.js b/mixins/formBuilderMixin.js
new file mode 100644
index 0000000..0967b80
--- /dev/null
+++ b/mixins/formBuilderMixin.js
@@ -0,0 +1,358 @@
+export default {
+  props: ["formElement", "keyValue"],
+
+  data() {
+    return {
+      options: {
+        controls: [
+          // "play-large", // The large play button in the center
+          //'restart', // Restart playback
+          // "rewind", // Rewind by the seek time (default 10 seconds)
+          "play", // Play/pause playback
+          // "fast-forward", // Fast forward by the seek time (default 10 seconds)
+          "progress", // The progress bar and scrubber for playback and buffering
+          "current-time", // The current time of playback
+          // "duration", // The full duration of the media
+          "mute", // Toggle mute
+          "volume", // Volume control
+          // "captions", // Toggle captions
+          "settings", // Settings menu
+          // "pip", // Picture-in-picture (currently Safari only)
+          // "airplay", // Airplay (currently Safari only)
+          "download", // Show a download button with a link to either the current source or a custom URL you specify in your options
+          // "fullscreen", // Toggle fullscreen
+        ],
+        speed: { selected: 1, options: [0.75, 1, 1.5, 2] },
+      },
+      hasError: false,
+      localFormElement: {},
+      textValue: "",
+      emit_disable: false,
+      textValuePrev: "",
+      textDate: [],
+      objectValue: {}, // for select component {text, value}
+      isUpdateitem: false,
+      renderKey:1,
+    };
+  },
+  beforeMount() {
+    this.$root.$on("catch-form-builder-event", this.listenEventBus);
+  },
+  beforeDestroy() {
+    this.$root.$off("catch-form-builder-event", this.listenEventBus);
+  },
+
+  mounted() {
+    // this.textValue = this.value;
+    // this.textItem = this.value
+
+    this.disableEmitTemprory(2000);
+
+    this.localFormElement = this.formElement;
+    this.textValuePrev = this.localFormElement.value;
+    this.initTextValue();
+    this.textValuePrev = this.textValue;
+    // this.date = this.textValue; // for DateCompnent
+  },
+
+  watch: {
+    formElement: {
+      handler(newValue) {
+        this.localFormElement = newValue;
+      },
+      deep: true,
+      nested: true,
+    },
+
+    textValue(newVal) {
+      // console.log(this.localFormElement.key, newVal)
+      if (this.textValuePrev == newVal) {
+        return;
+      }
+      let [emitValue, emitValueObject] = this.parseValueToEmit(newVal)
+
+      // if (!this.emit_disable)
+      // console.log(this.localFormElement.key, newVal, emitValue, this.localFormElement.value)
+      if(this.localFormElement.value != emitValue)
+         this.$emit("take-value", emitValue);
+
+      if (emitValueObject) this.parseAffectedToEventBus(emitValueObject); // for select only
+      else this.parseAffectedToEventBus(emitValue);
+    },
+  },
+  methods: {
+    incrementRenderKey(){
+      this.renderKey = this.renderKey +1
+      this.$forceUpdate();      
+    },
+
+    parseValueToEmit(newVal){
+      let emitValue = newVal;
+      let emitValueObject = undefined;
+
+      if (this.localFormElement?.type == "date") {
+        // console.info(newVal);
+        emitValue = newVal;
+        try {
+          if (this.localFormElement?.savetype == "timestamp") {
+            let dtStr = newVal;
+            // const dtStr = "2012/02/26";
+            const [y, m, d] = dtStr.split(/-|\//);
+            const date = new Date(y, m - 1, d);
+            // emitValue = date.toISOString();
+            emitValue = date.getTime()();
+          }
+          //  if( this.localFormElement?.subtype == 'time' )
+          //   return "HH:mm"
+        } catch {
+          emitValue = newVal;
+        }
+        // console.info(emitValue);
+      }
+      // input , textarea   if multi items
+      else if (this.localFormElement?.isarray) {
+        let delim = this.localFormElement?.delimiter
+          ? this.localFormElement.delimiter
+          : "-";
+
+        emitValue = [];
+        newVal
+          .split(delim)
+          .filter((el) => el.trim())
+          .forEach((el) => {
+            emitValue.push(el.trim());
+          });
+          // console.log(emitValue)
+      } else if (this.localFormElement.type == "select" && this.listOptions) {
+        // if(this.localFormElement.key == 'city'){
+        // }
+        emitValue = newVal;
+        //برای ذدخیره در بک کدام مقدار را بفرستد
+        if (this.localFormElement.value_save) {
+          emitValueObject = this.listOptions.find(
+            (item) => item.value == newVal
+          );
+
+          if (emitValueObject && this.localFormElement.value_save == "title") {
+            emitValue = emitValueObject.title ?? emitValueObject.value;
+          } else if (
+            emitValueObject &&
+            this.localFormElement.value_save == "object"
+          ) {
+            emitValue = {
+              id: emitValueObject.value,
+              title: emitValueObject.title,
+            };
+          }
+        }
+      } else if (this.localFormElement?.type == "number"){
+        if(this.localFormElement?.step != 1){
+          emitValue = parseFloat(newVal)
+        }
+        else
+          emitValue = parseInt(newVal)
+      }
+      else emitValue = newVal;
+
+      return [emitValue, emitValueObject]
+
+    },
+    listenEventBus({ value, affectedTo }) {
+      // console.log(affectedTo.key, this.localFormElement.key);
+      if (affectedTo.key === this.localFormElement.key) {
+        try {
+
+          // console.log(this.localFormElement.key, affectedTo, value);
+          // console.log(this[affectedTo.action])
+          this[affectedTo.action](value);
+          
+        } catch (err) {}
+      }
+    },
+    parseAffectedToEventBus(newValue) {
+      if (!this.localFormElement["affected-to"]) return;
+
+      // console.log("parseAffectedToEvent", newValue);
+      // console.log(newValue);
+
+      let affectedTo = this.localFormElement["affected-to"];
+      // console.log(affectedTo);
+
+      affectedTo.forEach((item_affectedTo) => {
+        let value = newValue;
+        if (
+          typeof newValue == "object" &&
+          item_affectedTo?.param &&
+          newValue[item_affectedTo?.param]
+        )
+          value = newValue[item_affectedTo?.param];
+
+        if (item_affectedTo?.emit) {
+          this.$emit( "action-affected-item", { action:item_affectedTo.emit, key: item_affectedTo.key, value});
+          // console.log("action-affected-item", { action:item_affectedTo.emit, key: item_affectedTo.key, value})
+        } else if (item_affectedTo?.action) {
+          this.$root.$emit("catch-form-builder-event", {
+            value: value,
+            affectedTo: item_affectedTo,
+          });
+        }
+      });
+    },
+    disableEmitTemprory(timeout = 1000) {
+      this.emit_disable = true;
+      setTimeout(() => {
+        this.emit_disable = false;
+      }, timeout);
+    },
+
+    clearErrors() {
+      return true;
+    },
+    getLabel() {
+      let label = this.localFormElement.label;
+      if (this.localFormElement?.required == "1") label = "*" + label;
+      return label;
+    },
+    validate(ev) {
+      const value = ev.target.value;
+      if (this.localFormElement.validate) {
+        // چک کردن برای وجود الگو
+        if (value) {
+          let pattern = this.localFormElement.validate;
+          // اگر الگوی ورودی معتبر باشد، تنظیم می‌کنیم که مقدار مطابقت دارد یا خیر
+          this.hasError = new RegExp(pattern).test(value);
+        } else {
+          // اگر مقدار ورودی خالی باشد، خطا بر اساس الزامی بودن فیلد تعیین می‌شود
+          this.hasError = this.localFormElement?.required ? true : false;
+        }
+      } else {
+        // اگر الگوی validate وجود نداشته باشد، کاری انجام نمی‌دهیم
+        this.hasError = false;
+      }
+      // اعلان خطا به والد (component اصلی)
+      this.$emit("take-value-validate", this.hasError);
+    },
+
+    initTextValue(newValue=undefined) {
+      // console.log('initTextValue', this.localFormElement.key, newValue)
+      
+      let value = "";
+      if(newValue)
+        value = newValue
+      else if(this.localFormElement.value)
+        value = this.localFormElement.value;
+      else if(this.localFormElement.value_defualt)
+        value = this.localFormElement.value_defualt
+
+
+
+      // در همه حالت نباید این باشد اگر لازم شد باید پیش فرض تنظیم شود
+      // ذخیره هم نمیشود ...!!!
+      // if (!value && this.localFormElement.type == "select") {
+      //   value = this.listOptions.length > 0 ? this.listOptions[0].value : "";
+      // }
+      // console.log(this.localFormElement.key, value)
+
+      var mValue = value ?? "";
+
+      if (this.localFormElement?.type == "date") {
+        //  console.info("setTextValue", mValue);
+        try {
+          var date = "";
+          if (mValue != "") {
+            if (this.localFormElement?.savetype == "timestamp") {
+              let timeWithMiliSeconds = mValue;
+
+              if ( this.isUnixTimestamp(mValue) && mValue.toString().length <= 11) {
+                timeWithMiliSeconds = mValue * 1000;
+              }
+              date = this.$moment(new Date(timeWithMiliSeconds)).format(
+                "YYYY-MM-DD HH:mm"
+              );
+            } else if (
+              this.localFormElement?.savetype == "datetime" ||
+              this.localFormElement?.savetype == "date"
+            ) {
+              date = this.$moment(new Date(mValue)).format("YYYY-MM-DD HH:mm");
+            } else date = mValue;
+          }
+          this.textDate = date;
+          mValue = date
+        } catch {
+          this.textDate = mValue;
+        }
+      } else if (this.localFormElement?.isarray) {
+        if (value && Array.isArray(value)) {
+          let delim = this.localFormElement?.delimiter
+            ? this.localFormElement.delimiter
+            : "-";
+          mValue = value.join(delim);
+        } else mValue = "";
+      } else if (this.localFormElement.type == "select") {
+        if (this.localFormElement?.value_save == "title" && this.listOptions) {
+          // console.log('value_defualt', this.localFormElement.value_defualt)
+          let finded = this.listOptions.find((item) => {
+            if (item.title == value) {
+              return item;
+            }
+          });
+
+          if (finded) {
+            mValue = finded.value;
+            // console.log('finded', finded)
+          } else {
+            mValue =
+              this.listOptions.length > 0 ? this.listOptions[0].value : "";
+          }
+        } else if (this.localFormElement?.value_save == "object") {
+          mValue = value.value;
+        } else mValue = value ?? "";
+      } else {
+        mValue = value ?? "";
+      } 
+      
+      //نیازی به ارسال تغییر در واچ نیست
+      if(this.localFormElement.value == value )
+        this.textValuePrev == value
+
+      this.textValue = mValue
+
+        // console.log(' this.textValue', this.localFormElement.key,  this.textValue)
+    },
+    isUnixTimestamp(value) {
+      // Check if the value is a number
+      if (typeof value !== "number" && !/^\d+$/.test(value)) {
+        return false;
+      }
+      // Convert to number if it's a string
+      value = parseInt(value);
+      // Unix timestamps are non-negative integers
+      return !isNaN(value) && value >= 0 && value % 1 === 0;
+    },
+
+    sendTextValue() {
+      this.$emit("keydown", {
+        text: this.textValue,
+        key: this.keyValue,
+        isUpdate: this.isUpdateitem,
+      });
+    },
+
+    ////ااز هیچا فراخوانی نمیشه لذا کامنت کردم
+    //فقط برای select
+    // takeSelectValue($event, type) {
+
+    //   this.objectValue = {
+    //     value: $event.target.value,
+    //     text: $event.target.selectedOptions[0].text,
+    //   };
+
+    //   console.log('takeSelectValue',this.localFormElement.key , objectValue)
+
+    //   this.$emit("take-select-object", {
+    //     type: type,
+    //     objectValue: this.objectValue,
+    //   });
+    // },
+  },
+};
diff --git a/systems/search_ui b/systems/search_ui
index 0825fef..6006976 160000
--- a/systems/search_ui
+++ b/systems/search_ui
@@ -1 +1 @@
-Subproject commit 0825fefd58df634196a1f7cf49446db73547c961
+Subproject commit 60069767c4961548b0db60b6d00da4a97433ccaf