Initial project

src/@core/comp-functions/forms/form-utils.js

@@ -0,0 +1,23 @@
+export const useInputImageRenderer = (inputEl, callback) => {
+  const inputImageRenderer = () => {
+    const file = inputEl.value.files[0]
+    const reader = new FileReader()
+
+    reader.addEventListener(
+      'load',
+      () => {
+        callback(reader.result)
+      },
+      false,
+    )
+
+    if (file) {
+      reader.readAsDataURL(file)
+    }
+  }
+  return {
+    inputImageRenderer,
+  }
+}
+
+export const _ = null

src/@core/comp-functions/forms/form-validation.js

@@ -0,0 +1,66 @@
+import { ref, nextTick } from '@vue/composition-api'
+
+// ===========================================================
+// ! This is coupled with "veeValidate" plugin
+// ===========================================================
+
+export default function formValidation(resetFormData, clearFormData = () => {}) {
+  // ------------------------------------------------
+  // refFormObserver
+  // ! This is for veeValidate Observer
+  // * Used for veeValidate form observer
+  // ------------------------------------------------
+  const refFormObserver = ref(null)
+
+  // ------------------------------------------------
+  // resetObserver
+  // ! This function is coupled with veeValidate
+  // * It resets form observer
+  // ------------------------------------------------
+  const resetObserver = () => {
+    refFormObserver.value.reset()
+  }
+
+  // ------------------------------------------------
+  // getValidationState
+  // ! This function is coupled with veeValidate
+  // * It returns true/false based on validation
+  // ------------------------------------------------
+  // eslint-disable-next-line object-curly-newline
+  const getValidationState = ({ dirty, validated, required: fieldRequired, changed, valid = null }) => {
+    const result = dirty || validated ? valid : null
+    return !fieldRequired && !changed ? null : result
+  }
+
+  // ------------------------------------------------
+  // resetForm
+  // ! This function is coupled with veeValidate
+  // * This uses resetFormData arg to reset form data
+  // ------------------------------------------------
+  const resetForm = () => {
+    resetFormData()
+    nextTick(() => {
+      resetObserver()
+    })
+  }
+
+  // ------------------------------------------------
+  // clearForm
+  // ! This function is coupled with veeValidate
+  // * This uses clearFormData arg to reset form data
+  // ------------------------------------------------
+  const clearForm = () => {
+    clearFormData()
+    nextTick(() => {
+      resetObserver()
+    })
+  }
+
+  return {
+    refFormObserver,
+    resetObserver,
+    getValidationState,
+    resetForm,
+    clearForm,
+  }
+}

src/@core/comp-functions/misc/event-listeners.js

@@ -0,0 +1,20 @@
+import { ref, onUnmounted } from '@vue/composition-api'
+
+export const useScrollListener = () => {
+  const scrolledTo = ref(null)
+
+  const scrollHandler = () => {
+    scrolledTo.value = window.scrollY
+  }
+
+  window.addEventListener('scroll', scrollHandler)
+  onUnmounted(() => {
+    window.removeEventListener('scroll', scrollHandler)
+  })
+
+  return {
+    scrolledTo,
+  }
+}
+
+export const _ = null

src/@core/comp-functions/ui/app.js

@@ -0,0 +1,18 @@
+import store from '@/store'
+import { ref, watch, computed } from '@vue/composition-api'
+
+export const useResponsiveAppLeftSidebarVisibility = () => {
+  const mqShallShowLeftSidebar = ref(false)
+  // Close Active Sidebars and other stuff when going in large device
+  const currentBreakPoint = computed(() => store.getters['app/currentBreakPoint'])
+  watch(currentBreakPoint, (val, oldVal) => {
+    // Reset chats & contacts left sidebar
+    if (oldVal === 'md' && val === 'lg') mqShallShowLeftSidebar.value = false
+  })
+
+  return {
+    mqShallShowLeftSidebar,
+  }
+}
+
+export const _ = {}

src/@core/comp-functions/ui/vertical-menu.js

@@ -0,0 +1,21 @@
+import { onBeforeUnmount } from '@vue/composition-api'
+import userAppConfig from '@core/app-config/useAppConfig'
+
+/**
+ * Collapse vertical menu when route is visited and restore the state on route leave
+ */
+export const useCollapseMenuOnVisit = () => {
+  const { isVerticalMenuCollapsed } = userAppConfig()
+  const wasVerticalMenuCollapsed = isVerticalMenuCollapsed.value
+
+  if (!wasVerticalMenuCollapsed.value) {
+    isVerticalMenuCollapsed.value = true
+  }
+
+  // Restore the original collapse value
+  onBeforeUnmount(() => {
+    isVerticalMenuCollapsed.value = wasVerticalMenuCollapsed
+  })
+}
+
+export const _ = null