merge

resources/js/Global/components/Inputs/AutoCompleteWrapper.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <slot :filter="filter"> </slot>
+  </div>
+</template>
+
+<script>
+let cancelId;
+
+export default {
+  name: "AutoCompleteWrapper",
+  props: {
+    callback: {
+      type: Function,
+    },
+  },
+  methods: {
+    filter(e) {
+      clearTimeout(cancelId);
+      if (
+        e.target.value &&
+        e.target.value.length > 1 &&
+        e.code !== "Tab" &&
+        e.code !== "Enter"
+      ) {
+        cancelId = setTimeout(() => {
+          this.callback(e.target.value);
+        }, 400);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/Global/components/Inputs/Code-Editor.vue

@@ -1,26 +1,43 @@
 <template>
-    <prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
+  <prism-editor
+    class="my-editor LTR height-300"
+    v-model="code"
+    :highlight="highlighter"
+    line-numbers
+  ></prism-editor>
 </template>
 
 <script>
 // import Prism Editor
-    import { PrismEditor } from 'vue-prism-editor';
-    import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
 
 // import highlighting library (you can use any library you want just return html string)
-    import { highlight, languages } from 'prismjs/components/prism-core';
-    import 'prismjs/components/prism-clike';
-    import 'prismjs/components/prism-javascript';
-    import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-css";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
 export default {
   components: {
     PrismEditor,
   },
-        data: () => ({ code: 'console.log("Hello World")' }),
+  props: ["value", "language"],
+  data: () => ({}),
   methods: {
     highlighter(code) {
-                return highlight(code, languages.js); // languages.<insert language> to return html with markup
+      return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
+    },
+  },
+  computed: {
+    code: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        this.$emit("input", e);
+      },
     },
   },
 };

resources/js/Global/components/Inputs/TooltipButton.vue

@@ -0,0 +1,106 @@
+<template>
+  <v-tooltip
+    :top="top"
+    :bottom="bottom"
+    :left="left"
+    :right="right"
+    :color="tooltipColor"
+    :transition="transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        slot="activator"
+        fab
+        :color="buttonColor"
+        :dark="dark"
+        :light="light"
+        v-on="on"
+        @click="$emit('click')"
+        :small="small"
+        :large="large"
+        :x-large="xLarge"
+        :x-small="xSmall"
+      >
+        <v-icon dark>{{ icon }}</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: "tooltipButton",
+  props: {
+    icon: {
+      type: String,
+      default: "WMi-user",
+    },
+    buttonColor: {
+      type: String,
+      default: "black",
+    },
+    text: {
+      type: String,
+      default: "متن پیش فرض",
+    },
+    tooltipColor: {
+      type: String,
+      default: "black",
+    },
+    top: {
+      type: Boolean,
+      default: function () {
+        return !this.bottom && !this.left && !this.right ? true : false;
+      },
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: String,
+      default: "fade-transition",
+    },
+    dark: {
+      type: Boolean,
+      default: function () {
+        return !this.light ? true : false;
+      },
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: function () {
+        return !this.large && !this.xSmall && !this.xLarge ? true : false;
+      },
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    xSmall: {
+      type: Boolean,
+      default: false,
+    },
+    xLarge: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/Global/plugins/globalComponent.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from "vue";
 
 // global Styles
 
@@ -86,11 +86,11 @@ Vue.component("we-hint-text", HintText);
 import HintBlock from "@Global/components/Blocks/Hint.vue";
 Vue.component("hint-block", HintBlock);
 
-import PersianDate from '@Global/components/Inputs/PersianDate'
+import PersianDate from "@Global/components/Inputs/PersianDate";
 Vue.component("we-persian-date", PersianDate);
 
-
-
+import TooltipButton from "@Global/components/Inputs/TooltipButton";
+Vue.component("tooltip-button", TooltipButton);
 
 Vue.component("wm-breadcrumbs", Breadcrumbs);
 Vue.component("wm-dialog", Dialog);
@@ -99,10 +99,9 @@ Vue.component("wm-helper", Helper);
 Vue.component("we-no-items", NoItems);
 Vue.component("we-loading", Loading);
 
-
 //setTime
 import store from "@Global/store/index";
-store.dispatch('common/setCurrentTime');
+store.dispatch("common/setCurrentTime");
 
 //jalali => 0.6MB
 import moment from "moment"