first commit
This commit is contained in:
46
resources/js/@core/utils/formatters.js
Normal file
46
resources/js/@core/utils/formatters.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import { isToday } from './helpers'
|
||||
|
||||
export const avatarText = value => {
|
||||
if (!value)
|
||||
return ''
|
||||
const nameArray = value.split(' ')
|
||||
|
||||
return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
|
||||
}
|
||||
|
||||
// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
|
||||
export const kFormatter = num => {
|
||||
const regex = /\B(?=(\d{3})+(?!\d))/g
|
||||
|
||||
return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
|
||||
}
|
||||
|
||||
/**
|
||||
* Format and return date in Humanize format
|
||||
* Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
|
||||
* Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
|
||||
* @param {string} value date to format
|
||||
* @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
|
||||
*/
|
||||
export const formatDate = (value, formatting = { month: 'short', day: 'numeric', year: 'numeric' }) => {
|
||||
if (!value)
|
||||
return value
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||
}
|
||||
|
||||
/**
|
||||
* Return short human friendly month representation of date
|
||||
* Can also convert date to only time if date is of today (Better UX)
|
||||
* @param {string} value date to format
|
||||
* @param {boolean} toTimeForCurrentDay Shall convert to time if day is today/current
|
||||
*/
|
||||
export const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
|
||||
const date = new Date(value)
|
||||
let formatting = { month: 'short', day: 'numeric' }
|
||||
if (toTimeForCurrentDay && isToday(date))
|
||||
formatting = { hour: 'numeric', minute: 'numeric' }
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||
}
|
||||
export const prefixWithPlus = value => value > 0 ? `+${value}` : value
|
29
resources/js/@core/utils/helpers.js
Normal file
29
resources/js/@core/utils/helpers.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// 👉 IsEmpty
|
||||
export const isEmpty = value => {
|
||||
if (value === null || value === undefined || value === '')
|
||||
return true
|
||||
|
||||
return !!(Array.isArray(value) && value.length === 0)
|
||||
}
|
||||
|
||||
// 👉 IsNullOrUndefined
|
||||
export const isNullOrUndefined = value => {
|
||||
return value === null || value === undefined
|
||||
}
|
||||
|
||||
// 👉 IsEmptyArray
|
||||
export const isEmptyArray = arr => {
|
||||
return Array.isArray(arr) && arr.length === 0
|
||||
}
|
||||
|
||||
// 👉 IsObject
|
||||
export const isObject = obj => obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
|
||||
|
||||
// 👉 IsToday
|
||||
export const isToday = date => {
|
||||
const today = new Date()
|
||||
|
||||
return (date.getDate() === today.getDate()
|
||||
&& date.getMonth() === today.getMonth()
|
||||
&& date.getFullYear() === today.getFullYear())
|
||||
}
|
50
resources/js/@core/utils/plugins.js
Normal file
50
resources/js/@core/utils/plugins.js
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* This is helper function to register plugins like a nuxt
|
||||
* To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use`
|
||||
* For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts`
|
||||
*
|
||||
*
|
||||
* @param {App} app Vue app instance
|
||||
* @returns void
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* // File: src/plugins/vuetify/index.ts
|
||||
*
|
||||
* import type { App } from 'vue'
|
||||
* import { createVuetify } from 'vuetify'
|
||||
*
|
||||
* const vuetify = createVuetify({ ... })
|
||||
*
|
||||
* export default function (app: App) {
|
||||
* app.use(vuetify)
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* All you have to do is use this helper function in `main.ts` file like below:
|
||||
* ```ts
|
||||
* // File: src/main.ts
|
||||
* import { registerPlugins } from '@core/utils/plugins'
|
||||
* import { createApp } from 'vue'
|
||||
* import App from '@/App.vue'
|
||||
*
|
||||
* // Create vue app
|
||||
* const app = createApp(App)
|
||||
*
|
||||
* // Register plugins
|
||||
* registerPlugins(app) // [!code focus]
|
||||
*
|
||||
* // Mount vue app
|
||||
* app.mount('#app')
|
||||
* ```
|
||||
*/
|
||||
export const registerPlugins = app => {
|
||||
const imports = import.meta.glob(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true })
|
||||
const importPaths = Object.keys(imports).sort()
|
||||
|
||||
importPaths.forEach(path => {
|
||||
const pluginImportModule = imports[path]
|
||||
|
||||
pluginImportModule.default?.(app)
|
||||
})
|
||||
}
|
95
resources/js/@core/utils/validators.js
Normal file
95
resources/js/@core/utils/validators.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import { isEmpty, isEmptyArray, isNullOrUndefined } from './helpers'
|
||||
|
||||
// 👉 Required Validator
|
||||
export const requiredValidator = value => {
|
||||
if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
|
||||
return 'This field is required'
|
||||
|
||||
return !!String(value).trim().length || 'This field is required'
|
||||
}
|
||||
|
||||
// 👉 Email Validator
|
||||
export const emailValidator = value => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
if (Array.isArray(value))
|
||||
return value.every(val => re.test(String(val))) || 'The Email field must be a valid email'
|
||||
|
||||
return re.test(String(value)) || 'The Email field must be a valid email'
|
||||
}
|
||||
|
||||
// 👉 Password Validator
|
||||
export const passwordValidator = password => {
|
||||
const regExp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&*()]).{8,}/
|
||||
const validPassword = regExp.test(password)
|
||||
|
||||
return validPassword || 'Field must contain at least one uppercase, lowercase, special character and digit with min 8 chars'
|
||||
}
|
||||
|
||||
// 👉 Confirm Password Validator
|
||||
export const confirmedValidator = (value, target) => value === target || 'The Confirm Password field confirmation does not match'
|
||||
|
||||
// 👉 Between Validator
|
||||
export const betweenValidator = (value, min, max) => {
|
||||
const valueAsNumber = Number(value)
|
||||
|
||||
return (Number(min) <= valueAsNumber && Number(max) >= valueAsNumber) || `Enter number between ${min} and ${max}`
|
||||
}
|
||||
|
||||
// 👉 Integer Validator
|
||||
export const integerValidator = value => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
if (Array.isArray(value))
|
||||
return value.every(val => /^-?[0-9]+$/.test(String(val))) || 'This field must be an integer'
|
||||
|
||||
return /^-?[0-9]+$/.test(String(value)) || 'This field must be an integer'
|
||||
}
|
||||
|
||||
// 👉 Regex Validator
|
||||
export const regexValidator = (value, regex) => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
let regeX = regex
|
||||
if (typeof regeX === 'string')
|
||||
regeX = new RegExp(regeX)
|
||||
if (Array.isArray(value))
|
||||
return value.every(val => regexValidator(val, regeX))
|
||||
|
||||
return regeX.test(String(value)) || 'The Regex field format is invalid'
|
||||
}
|
||||
|
||||
// 👉 Alpha Validator
|
||||
export const alphaValidator = value => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
|
||||
return /^[A-Z]*$/i.test(String(value)) || 'The Alpha field may only contain alphabetic characters'
|
||||
}
|
||||
|
||||
// 👉 URL Validator
|
||||
export const urlValidator = value => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
const re = /^(https?):\/\/[^\s$.?#].[^\s]*$/
|
||||
|
||||
return re.test(String(value)) || 'URL is invalid'
|
||||
}
|
||||
|
||||
// 👉 Length Validator
|
||||
export const lengthValidator = (value, length) => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
|
||||
return String(value).length === length || `The Min Character field must be at least ${length} characters`
|
||||
}
|
||||
|
||||
// 👉 Alpha-dash Validator
|
||||
export const alphaDashValidator = value => {
|
||||
if (isEmpty(value))
|
||||
return true
|
||||
const valueAsString = String(value)
|
||||
|
||||
return /^[0-9A-Z_-]*$/i.test(valueAsString) || 'All Character are not valid'
|
||||
}
|
13
resources/js/@core/utils/vuetify.js
Normal file
13
resources/js/@core/utils/vuetify.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { cookieRef } from '@layouts/stores/config'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
export const resolveVuetifyTheme = () => {
|
||||
const cookieColorScheme = cookieRef('color-scheme', usePreferredDark().value ? 'dark' : 'light')
|
||||
const storedTheme = cookieRef('theme', themeConfig.app.theme).value
|
||||
|
||||
return storedTheme === 'system'
|
||||
? cookieColorScheme.value === 'dark'
|
||||
? 'dark'
|
||||
: 'light'
|
||||
: storedTheme
|
||||
}
|
Reference in New Issue
Block a user