@sigmaott/base-next 1.0.6

package/src/utils/helper.ts

@@ -0,0 +1,56 @@
+import { ensurePrefix, isObject } from '@antfu/utils'
+import { v4 as uuidV4 } from 'uuid'
+
+export function getAssetURI(assetPath?: string, domain?: string): string {
+  if (!assetPath)
+    return ''
+  if (assetPath.indexOf('http') === 0)
+    return assetPath
+  if (domain) {
+    const root = domain.replace(/\/$/, '')
+    return `${root}${ensurePrefix('/', assetPath)}`
+  }
+
+  const root = `${window.location.protocol}//${window.location.host}`
+  return `${root}${ensurePrefix('/', assetPath)}`
+}
+
+export function genUUID() {
+  return uuidV4()
+}
+
+export function applyNullForEmptyString<T>(_obj: T): T {
+  const obj = { ..._obj }
+  return Object.keys(obj).reduce((acc, key) => {
+    if (Array.isArray(obj[key])) {
+      acc[key] = obj[key].map((item) => {
+        if (item === '' && !isObject(item))
+          return null
+
+        else if (isObject(item))
+          return applyNullForEmptyString(item)
+
+        else
+          return item
+      })
+    }
+    else if (obj[key] === '' && !isObject(obj[key])) {
+      acc[key] = null
+    }
+    else if (isObject(obj[key])) {
+      acc[key] = applyNullForEmptyString(obj[key])
+    }
+    else {
+      acc[key] = obj[key]
+    }
+    return acc
+  }, {} as T)
+}
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string = '') {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}

package/src/utils/micro.ts

@@ -0,0 +1,207 @@
+import { deepMerge, p } from '@antfu/utils'
+import type { cacheOptions, loadErrorHandler, plugin } from 'wujie'
+import type { lifecycle } from 'wujie/esm/sandbox'
+import { defu } from 'defu'
+import { bus, destroyApp, setupApp } from 'wujie'
+
+interface Lifecycles {
+  beforeLoad: lifecycle
+  beforeMount: lifecycle
+  afterMount: lifecycle
+  beforeUnmount: lifecycle
+  afterUnmount: lifecycle
+  activated: lifecycle
+  deactivated: lifecycle
+  loadError: loadErrorHandler
+}
+
+export interface MenuItem {
+  name: string
+  meta: Record<string, any>
+  path: string
+  children: MenuItem[] | undefined
+}
+
+export interface ChildApp {
+  name: string
+  routes: MenuItem[]
+}
+
+export interface AppConfig {
+  tokenProp?: 'x-backdoor' | 'Authorization' | 'local'
+  token: string
+  appId?: string
+  // meta
+  meta?: {
+    layoutMode?: 'horizontal' | 'vertical'
+    lang?: 'vi' | 'en'
+  }
+  isProduction?: boolean
+}
+
+export interface GlobalState extends AppConfig {
+  children: ChildApp[]
+  [key: string]: any
+}
+
+export interface MicroApp extends cacheOptions {
+  preload?: boolean
+}
+
+export interface AppProps {
+  activeRule: string
+  [key: string]: any // addition props, specific to each app
+}
+
+export enum SigmaMicroEnum {
+  __PRELOAD__ = '__PRELOAD__',
+  __STATE_CHANGE__ = '__STATE_CHANGE__',
+  __SET_STATE__ = '__SET_STATE__',
+}
+
+let microApps: MicroApp[] = []
+
+function addMicroApp(appWindow: Window) {
+  const id = appWindow.__WUJIE.id
+  if (!appWindow.parent.$microWindows)
+    appWindow.parent.$microWindows = {}
+
+  appWindow.parent.$microWindows[id] = appWindow
+}
+
+const defaultLifecycles: Lifecycles = {
+  beforeLoad: (appWindow) => {
+    console.log(`${appWindow.__WUJIE.id} beforeLoad`)
+    console.log('[LOG] ~ file: micro.ts:76 ~ appWindow:', appWindow)
+    addMicroApp(appWindow)
+  },
+  beforeMount: appWindow => console.log(`${appWindow.__WUJIE.id} beforeMount`),
+  afterMount: appWindow => console.log(`${appWindow.__WUJIE.id} afterMount`),
+  beforeUnmount: appWindow => console.log(`${appWindow.__WUJIE.id} beforeUnmount `),
+  afterUnmount: appWindow => console.log(`${appWindow.__WUJIE.id} afterUnmount`),
+  activated: appWindow => console.log(`${appWindow.__WUJIE.id} activated`),
+  deactivated: appWindow => console.log(`${appWindow.__WUJIE.id} deactivated`),
+  loadError: (url, e) => console.log(`${url}`, e),
+
+}
+
+const plugins: Array<plugin> = [
+  {
+  },
+]
+
+// function credentialsFetch(url: string, options: any) {
+//   return window.fetch(url, { ...options, credentials: 'omit' })
+// }
+
+window.__SIGMA_STATE__ = {
+  token: '',
+  tokenProp: 'x-backdoor',
+  appId: 'default-app',
+  children: [],
+  meta: {
+    layoutMode: 'horizontal',
+    lang: 'vi',
+  },
+  isProduction: true,
+}
+
+export function registerSigmaApps(
+  registrableApps: MicroApp[],
+  appConfig: AppConfig,
+  lifecycles: Partial<Lifecycles> = defaultLifecycles,
+) {
+  if (!appConfig.token)
+    throw new Error('appConfig.token is required')
+
+  window.__SIGMA_STATE__ = defu(appConfig, window.__SIGMA_STATE__) as any
+  window.localStorage.setItem('__SS_LAYOUT_MODE__', window.__SIGMA_STATE__.meta?.layoutMode || 'horizontal')
+
+  bus.$on(SigmaMicroEnum.__STATE_CHANGE__, (newState: GlobalState) => {
+    window.__SIGMA_STATE__ = deepMerge(window.__SIGMA_STATE__, newState) as any
+  })
+
+  bus.$on(SigmaMicroEnum.__SET_STATE__, (newState: Partial<GlobalState>) => {
+    window.__SIGMA_STATE__ = deepMerge(window.__SIGMA_STATE__, newState) as any
+    bus.$emit(SigmaMicroEnum.__STATE_CHANGE__, window.__SIGMA_STATE__)
+  })
+
+  microApps = registrableApps
+
+  const degrade = window.localStorage.getItem('degrade') === 'true' || !window.Proxy || !window.CustomElementRegistry
+  const isProduction = appConfig.isProduction
+
+  async function getRoutes(url: string) {
+    try {
+      const res = await fetch(url)
+      const json = await res.json()
+      return json
+    }
+    catch (error) {
+      console.log('[LOG] ~ file: index.ts ~ line 165 ~ error', error)
+    }
+  }
+
+  async function getMenu() {
+    const menus = await p(registrableApps)
+      .map(async ({ name, url, preload, ...rest }) => {
+        const routes: any[] = []
+        try {
+          setupApp({
+            name,
+            url,
+            attrs: isProduction ? { src: url } : {},
+            exec: true,
+            alive: true,
+            // fetch: credentialsFetch,
+            plugins,
+            // prefix: { "prefix-dialog": "/dialog", "prefix-location": "/location" },
+            // degrade,
+            ...rest,
+            ...lifecycles,
+          })
+
+          // if (preload || window.localStorage.getItem('preload') !== 'false') {
+          //   preloadApp({
+          //     name,
+          //     beforeLoad: (appWindow) => {
+          //       addMicroApp(appWindow)
+          //     },
+          //   })
+          // }
+
+          // if (url)
+          // routes = await getRoutes(`${ensureSuffix('/', url)}routes.json`)
+        }
+        catch (e) {
+          console.error(e)
+        }
+        return { name, url, routes }
+      })
+
+    bus.$emit(SigmaMicroEnum.__SET_STATE__, { children: menus })
+  }
+
+  // getMenu()
+
+  return {
+    bus,
+    setState: (newState: Partial<GlobalState>) => {
+      bus.$emit(SigmaMicroEnum.__SET_STATE__, newState)
+    },
+    onStateChange: (callback: (newState: GlobalState) => void) => {
+      bus.$on(SigmaMicroEnum.__STATE_CHANGE__, callback)
+      return () =>
+        bus.$off(SigmaMicroEnum.__STATE_CHANGE__, () => { })
+    },
+    destroy() {
+      registrableApps.forEach(({ name }) => {
+        destroyApp(name)
+      })
+    },
+  }
+}
+
+export function getMicroApp(name: string) {
+  return microApps.find(item => item.name === name)
+}

package/src/utils/popoverSelectAttrs.ts

@@ -0,0 +1,24 @@
+export const popperOptions = {
+  modifiers: [
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 2],
+      },
+    },
+    {
+      name: 'preventOverflow',
+      options: {
+        boundary: 'viewport',
+      },
+    },
+  ],
+  strategy: 'fixed',
+}
+
+export const popperClass = '!z-[9999]'
+
+export const popoverSelectAttrs = {
+  popperOptions,
+  popperClass,
+}

package/src/utils/popup.ts

@@ -0,0 +1,96 @@
+function getFullUrlPath(location: Location | HTMLAnchorElement): string {
+  const isHttps = location.protocol === 'https:'
+  return (
+    `${location.protocol
+    }//${location.hostname
+    }:${location.port || (isHttps ? '443' : '80')
+    }${/^\//.test(location.pathname)
+      ? location.pathname
+      : `/${location.pathname}`}`
+  )
+}
+
+export function parseQueryString(str: string) {
+  const obj: any = {}
+  let key
+  let value;
+  (str || '').split('&').forEach((keyValue: string) => {
+    if (keyValue) {
+      value = keyValue.split('=')
+      key = decodeURIComponent(value[0])
+      obj[key] = value[1] ? decodeURIComponent(value[1]) : true
+    }
+  })
+  return obj
+}
+
+export function openAsyncPopup({ url, name, redirectUri, options }: { url: string; name: string; redirectUri: string; options?: string }) {
+  let popup: any
+
+  try {
+    popup = window.open(url, name, options || `width=${1440},height=${900}`)
+    if (popup && popup.focus)
+      popup.focus()
+
+    const pool = pooling(redirectUri)
+    return pool
+  }
+  catch (e) {
+    return Promise.reject(new Error('Popup error occurred'))
+  }
+
+  async function pooling(redirectUri: string) {
+    return new Promise((resolve: (value: unknown) => void, reject) => {
+      const redirectUriParser = document.createElement('a')
+      redirectUriParser.href = redirectUri
+      const redirectUriPath = getFullUrlPath(redirectUriParser)
+
+      let poolingInterval: any = setInterval(() => {
+        if (
+          !popup
+          || popup.closed
+          || popup.closed === undefined
+        ) {
+          clearInterval(poolingInterval)
+          poolingInterval = 0
+          reject(new Error('Popup window closed'))
+        }
+
+        try {
+          const location = popup
+
+          const popupWindowPath = getFullUrlPath(location.location)
+          if (popupWindowPath === redirectUriPath) {
+            if (location.location.search || location.location.hash) {
+              const query = parseQueryString(
+                location.location.search.substring(1).replace(/\/$/, ''),
+              )
+              const hash = parseQueryString(
+                location.location.hash.substring(1).replace(/[/$]/, ''),
+              )
+              const params = {
+                ...query,
+                ...hash,
+              }
+              if (params.error)
+                reject(params.error)
+
+              else
+                resolve(params)
+            }
+            else {
+              reject(new Error('Redirect has occurred but no query or hash parameters were found.'))
+            }
+
+            clearInterval(poolingInterval)
+            poolingInterval = 0
+            location.close()
+          }
+        }
+        catch (e) {
+          // Ignore DOMException: Blocked a frame with origin from accessing a cross-origin frame.
+        }
+      }, 250)
+    })
+  }
+}

package/src/utils/pwa.ts

@@ -0,0 +1,86 @@
+import type { ModuleOptions } from '@vite-pwa/nuxt'
+
+export function pwa(appName: string): ModuleOptions {
+  // function withBasePath(path: string) {
+  //   return ensureSuffix('/', process.env.NUXT_APP_BASE_URL || '/') + path
+  // }
+
+  // const scope = withBasePath('')
+
+  return {
+    registerType: 'autoUpdate',
+    manifest: {
+      scope: '/',
+      name: appName,
+      short_name: appName,
+      description: appName,
+      theme_color: '#ffffff',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+        {
+          src: 'maskable-icon.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable',
+        },
+      ],
+    },
+    workbox: {
+      navigateFallback: '/',
+      // Only precache these files - html should be excluded
+      globPatterns: ['**/*.{js,css}'],
+
+      // Don't fallback on document based (e.g. `/some-page`) requests
+      // Even though this says `null` by default, I had to set this specifically to `null` to make it work
+      cleanupOutdatedCaches: true,
+      // runtimeCaching: [
+      //   {
+      //     urlPattern: /^https:\/\/fonts.googleapis.com\/.*/i,
+      //     handler: 'CacheFirst',
+      //     options: {
+      //       expiration: {
+      //         maxEntries: 10,
+      //         maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+      //       },
+      //       cacheableResponse: {
+      //         statuses: [0, 200],
+      //       },
+      //     },
+      //   },
+      //   {
+      //     urlPattern: /^https:\/\/fonts.gstatic.com\/.*/i,
+      //     handler: 'CacheFirst',
+      //     options: {
+      //       cacheName: 'gstatic-fonts-cache',
+      //       expiration: {
+      //         maxEntries: 10,
+      //         maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+      //       },
+      //       cacheableResponse: {
+      //         statuses: [0, 200],
+      //       },
+      //     },
+      //   },
+      // ],
+    },
+    client: {
+      installPrompt: true,
+      periodicSyncForUpdates: 20,
+    },
+    registerWebManifestInRouteRules: true,
+    writePlugin: true,
+    devOptions: {
+      enabled: process.env.VITE_PLUGIN_PWA === 'true',
+      navigateFallback: '/',
+    },
+  }
+}

package/src/utils/query-filter.ts

@@ -0,0 +1,111 @@
+export type InputType =
+  | 'text'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'time'
+  | 'datetime'
+  | 'select'
+  | 'multiselect'
+
+export interface FieldConfig {
+  label: string
+  input: InputType
+  value: string
+  modify?: boolean
+  validation: {
+    required?: boolean
+    min?: number
+    max?: number
+  }
+  options: {
+    label: string
+    value: string
+  }[]
+}
+
+export type FieldConfigMap = Record<string, FieldConfig>
+
+export interface Option {
+  label: string
+  value: string | number
+}
+export interface JsonRule {
+  id: string
+  field?: string
+  label?: string
+  input: InputType
+  operator?: string
+  validation?: {
+    min?: number
+    max?: number
+    required?: boolean
+  }
+  value?: (string | number)[]
+  options?: Option[]
+  valid: boolean
+}
+
+type Condition = 'AND' | 'OR'
+
+export interface JsonGroup {
+  id: string
+  input: 'group'
+  condition: Condition
+  rules: (JsonRule | JsonGroup)[]
+  not: boolean
+  valid: boolean
+}
+
+export interface Config {
+  conditions: Record<string, { label: string; value: string }>
+  fields: Record<
+    string,
+    {
+      label: string
+      input: InputType
+      operators?: string[]
+      validation: Object
+      options?: { label: string; value: string }[]
+      value: string | number
+    }
+  >
+  operators: Record<
+    string,
+    {
+      type: string
+      label: string
+
+      nb_input: number
+      multiple: boolean
+
+      apply_to: string[]
+    }
+  >
+  settings: {
+    size: 'large' | 'middle' | 'small'
+    canSetCondition: boolean
+    canSetNot: boolean
+    showNot: boolean
+    showCondition: boolean
+    showActions: boolean
+    showAddGroup: boolean
+    showAddRule: boolean
+    showDelGroup: boolean
+    showDelRule: boolean
+    showEditRule: boolean
+    showDrag: boolean
+    isFieldSelect: boolean
+    fieldSelectPlaceholder: string
+    maxHeight: string
+    fieldSelectLabel: string
+    operatorSelectLabel: string
+    operatorsSelectPlaceholder: string
+    inputPlaceholder: string
+    addGroupLabel: string
+    addRuleLabel: string
+    delGroupLabel: string
+    delRuleLabel: string
+    defaultCondition: Condition
+  }
+}

package/src/utils/table.ts

@@ -0,0 +1,35 @@
+export function useTableHeight(tableRef: any, paginationRef: any) {
+  const tableHeight = ref(0)
+
+  const paddingH = 36
+  const marginH = 24
+
+  function calcHeight() {
+    const footerH = window.document.querySelector('.el-footer')?.clientHeight || 0 // footer-height
+    const clientHeight = window.document.documentElement.clientHeight + window.document.documentElement.getBoundingClientRect().y
+    const tableBounding = useElementBounding(tableRef)
+    const paginationBounding = useElementBounding(paginationRef)
+    tableHeight.value = clientHeight - (tableBounding.y.value + paginationBounding.height.value + paddingH + marginH + footerH)
+  }
+
+  useEventListener('resize', () => {
+    calcHeight()
+  })
+
+  const { layoutMode } = useLayoutStore()
+
+  watch(layoutMode, () => {
+    nextTick(() => {
+      calcHeight()
+    })
+  })
+
+  watch(paginationRef, () => {
+    nextTick(() => {
+      calcHeight()
+    })
+  }, { immediate: true })
+  return {
+    tableHeight,
+  }
+}

package/src/utils/tryCatch.ts

@@ -0,0 +1,25 @@
+// Types for the result object with discriminated union
+interface Success<T> {
+  data: T
+  error: null
+}
+
+interface Failure<E> {
+  data: null
+  error: E
+}
+
+type Result<T, E = Error> = Success<T> | Failure<E>
+
+// Main wrapper function
+export async function tryCatch<T, E = Error>(
+  promise: Promise<T>,
+): Promise<Result<T, E>> {
+  try {
+    const data = await promise
+    return { data, error: null }
+  }
+  catch (error) {
+    return { data: null, error: error as E }
+  }
+}

package/src/utils/utils.ts

@@ -0,0 +1,58 @@
+/** whether the route is used as a menu */
+import type { RouteRecordNormalized } from 'vue-router'
+
+function asMenu(route: RouteRecordNormalized, isSubApp: boolean) {
+  if (route.meta?.isHideSubApp && isSubApp)
+    return false
+  return route.meta && !route.meta?.notAsMenu
+}
+
+export function sortRoutes(routes: RouteRecordNormalized[] = []) {
+  return routes.sort((next, pre) =>
+    Number(next.meta?.order || Infinity) - Number(pre.meta?.order || Infinity),
+  )
+}
+
+interface MenuItem {
+  name: string
+  meta: Record<string, any>
+  path: string
+  children: MenuItem[] | undefined
+}
+
+export function transformRouteToMenu(routes: RouteRecordNormalized[], isSubApp = true, parentPath: string | undefined = undefined) {
+  const menu: MenuItem[] = []
+
+  sortRoutes(routes).forEach((route) => {
+    let { name, path, meta } = route
+
+    let children: MenuItem[] | undefined
+
+    if (parentPath)
+      path = `${parentPath}/${path}`
+
+    if (route.children)
+      children = transformRouteToMenu(route.children, isSubApp, path)
+
+    const menuItem: MenuItem = {
+      name: name as string,
+      path,
+      meta: meta as Record<string, any>,
+      children,
+    }
+
+    // route show on menu
+    if (asMenu(route, isSubApp))
+      menu.push(menuItem)
+    // route not show on menu but children does
+    else if (children)
+      menu.push(...children)
+  })
+
+  return menu
+}
+
+export function isAllowedCharacters(text: string): boolean {
+  const ALLOWED_CHARACTERS_REGEX = /[^a-zA-Z0-9!\"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]/g
+  return ALLOWED_CHARACTERS_REGEX.test(text)
+}