@mythpe/quasar-ui-qui 0.0.23-dev → 0.0.24-dev

package/src/components/transition/MFadeTransition.vue

@@ -0,0 +1,27 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+defineOptions({
+  name: 'MFadeTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/transition/MFadeXTransition.vue

@@ -0,0 +1,26 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+<script
+  lang="ts"
+  setup
+>
+defineOptions({
+  name: 'MFadeXTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade-x"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/transition/MTransition.vue

@@ -0,0 +1,41 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+import type { MTransitionProps as Props } from '../../types'
+
+interface P {
+  enterIn?: Props['enterIn'];
+  enterOut?: Props['enterOut'];
+  slowIn?: Props['slowIn'];
+  slowOut?: Props['slowIn'];
+}
+
+withDefaults(defineProps<P>(), {
+  enterIn: () => 'fadeIn',
+  enterOut: () => 'fadeOut',
+  slowIn: () => !1,
+  slowOut: () => !1
+})
+defineOptions({
+  name: 'MTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <TransitionGroup
+    :enter-active-class="`animated ${enterIn} ${slowIn ? 'slow' : ''}`"
+    :leave-active-class="`animated ${enterOut} ${slowOut ? 'slow' : ''}`"
+    appear
+    name="m__transition__fade"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TransitionGroup>
+</template>

package/src/components/transition/index.ts

@@ -0,0 +1,13 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+import MFadeTransition from './MFadeTransition.vue'
+import MFadeXTransition from './MFadeXTransition.vue'
+import MTransition from './MTransition.vue'
+
+export { MFadeTransition, MFadeXTransition, MTransition }

package/src/components/typography/index.ts

@@ -7,4 +7,5 @@
  */
 
 import MTypingString from './MTypingString.vue'
+
 export { MTypingString }

package/src/composable/index.ts

@@ -6,5 +6,7 @@
  * Github: https://github.com/mythpe
  */
 
-export * from './useHelpersMyth'
+export * from './useBindInput'
 export * from './useMyth'
+export * from './useValue'
+export * from './useError'

package/src/composable/{useHelpersMyth.ts → useBindInput.ts}

@@ -1,51 +1,69 @@
-/*
- * MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
- * Email: mythpe@gmail.com
- * Mobile: +966590470092
- * Website: https://www.4myth.com
- * Github: https://github.com/mythpe
- */
-
-import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
-import { computed, type MaybeRefOrGetter, toValue } from 'vue'
-import { extend, useSplitAttrs } from 'quasar'
+import type { PropsContext as UiOpt } from '../types'
+import { computed, MaybeRefOrGetter, ref, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useFieldError, useFieldValue, useSetFieldError, useSetFieldValue } from 'vee-validate'
-import { myth } from '../utils'
 import { useMyth } from './useMyth'
-import type { UiOptionsContext as UiOpt } from '../types'
+import { useSplitAttrs } from 'quasar'
+import { myth } from '../utils'
+import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
 
-type G = { name: string; } & Record<string, any>;
+type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };
-export const useInputHelper = <P extends G = G> (Props: MaybeRefOrGetter<P>, key: keyof UiOpt, Opts: MaybeRefOrGetter<OptsContext> = {}) => {
+export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key: keyof UiOpt, Opts: MaybeRefOrGetter<OptsContext> = {}) => {
   const { messages, locale } = useI18n({ useScope: 'global' })
   const { __ } = useMyth()
-  const { attributes: attrs } = useSplitAttrs()
+  const { attributes } = useSplitAttrs()
   const props = toValue<P>(Props)
   const opts = toValue<OptsContext>(Opts)
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  const inputOptions = computed(() => (k: keyof UiOpt) => myth.options.value[k] || {})
-  const inputProps = computed<UiOpt[typeof key] & P>(() => extend(!0, {}, inputOptions.value(key), props))
-  const hasTopLabel = computed(() => inputProps.value?.topLabel === !0)
+  const getProp = computed(() => (k: string) => {
+    if (props[k] !== undefined) {
+      return props[k]
+    }
+    return pluginProps.value[key]?.[k]
+  })
+
+  const { themeBtn, themeInput, props: pluginProps } = myth
+  const theme = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
+  const mergedTheme = ref({})
+  for (const k in theme.value) {
+    mergedTheme.value[k] = props[k] !== undefined ? theme.value[k] : props[k]
+  }
+  /**
+   * Top Label Style.
+   */
+  const hasTopLabel = computed(() => {
+    if (props.topLabel !== undefined) {
+      return props.topLabel !== !1
+    }
+    if ('topLabel' in theme.value && theme.value.topLabel !== undefined) {
+      return theme.value.topLabel !== !1
+    }
+    if (pluginProps.value[key] && 'topLabel' in pluginProps.value[key]) {
+      return pluginProps.value[key]?.topLabel !== !1
+    }
+    return !1
+  })
 
   const getLabel = computed<string | undefined>(() => {
     const k = props.label === undefined ? props.name : props.label
     return k ? (__(k) || undefined) : undefined
   })
   const getPlaceholder = computed<string | undefined>(() => {
+    const replace = computed(() => {
+      const val = props.useChoice !== undefined ? props.useChoice : (attributes.value.useChoice !== undefined ? attributes.value.useChoice : opts?.choose)
+      if (typeof val === 'string' && val?.length > 0) {
+        return val
+      }
+      return 'enter'
+    })
     if (props.placeholder === undefined) {
       const k = props.label !== undefined ? props.label : props.name
-      return __(`replace.${opts?.choose ? 'choose' : 'enter'}`, { name: __(k) })
+      return __(`replace.${replace.value}`, { name: __(k) })
     }
     return __(props.placeholder) || undefined
-    // if (inputProps.value.hidePlaceholder === !0) {
-    //   return props.placeholder !== undefined ? (__(props.placeholder) || undefined) : undefined
-    // }
   })
   const getAutocompleteAttribute = computed<string | null | undefined>(() => {
-    const opt = inputOptions.value(key)
-    const autocomplete = 'autocomplete' in opt && opt?.autocomplete !== undefined ? opt?.autocomplete : props.autocomplete
+    const autocomplete = props.autocomplete !== undefined ? props.autocomplete : (pluginProps.value[key] && 'autocomplete' in pluginProps.value[key] ? pluginProps.value[key]?.autocomplete : undefined)
+    // const autocomplete = 'autocomplete' in opt && opt?.autocomplete !== undefined ? opt?.autocomplete : props.autocomplete
     if (autocomplete !== undefined) {
       if (autocomplete === !0 || autocomplete === '') {
         return kebabCase(props.name)
@@ -58,24 +76,51 @@ export const useInputHelper = <P extends G = G> (Props: MaybeRefOrGetter<P>, key
     return undefined
   })
   const accepts = computed(() => {
-    const l: any[] = []
+    const l: string[] = []
     if (props.accept) {
-      l.push(props.accept)
+      if (typeof props.accept === 'string') {
+        l.push(props.accept)
+      } else if (Array.isArray(props.accept)) {
+        l.push(...props.accept)
+      } else if (typeof props.accept === 'object') {
+        const v = toValue(props.accept)
+        l.push(...Object.values<string>(v))
+      }
     }
     if (props.images) {
-      l.push('image/png,image/jpg,image/jpeg')
+      if (typeof props.images === 'string' && props.images?.length > 0) {
+        l.push(props.images)
+      } else {
+        l.push('image/png,image/jpg,image/jpeg')
+      }
     }
     if (props.svg) {
-      l.push('image/svg+xml')
+      if (typeof props.svg === 'string' && props.svg?.length > 0) {
+        l.push(props.svg)
+      } else {
+        l.push('image/svg+xml')
+      }
     }
     if (props.video) {
-      l.push('video/mp4,video/x-m4v,video/*')
+      if (typeof props.video === 'string' && props.video?.length > 0) {
+        l.push(props.video)
+      } else {
+        l.push('video/mp4')
+      }
     }
     if (props.pdf) {
-      l.push('application/pdf')
+      if (typeof props.pdf === 'string' && props.pdf?.length > 0) {
+        l.push(props.pdf)
+      } else {
+        l.push('application/pdf')
+      }
     }
     if (props.excel) {
-      l.push('.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+      if (typeof props.excel === 'string' && props.excel?.length > 0) {
+        l.push(props.excel)
+      } else {
+        l.push('application/vnd.ms-excel')
+      }
     }
     return l
   })
@@ -115,13 +160,12 @@ export const useInputHelper = <P extends G = G> (Props: MaybeRefOrGetter<P>, key
   }
   const publicRules = ['required', 'email', 'numeric', 'integer', 'float', 'color']
   const validations = (messages.value as any)?.[locale.value]?.validation?.messages || {}
-  const getRules = computed<Record<string, any>>(() => {
+  const inputRules = computed<Record<string, any>>(() => {
     if (props.viewMode) {
       return {}
     }
     const rules: any = { ...convertRules(toValue(props.rules)) }
-    // const attrs = toValue(opts.attrs) || {}
-    const keys = uniq<string>([...publicRules, ...(myth.options.value.inputRules ?? []), ...Object.keys(validations)])
+    const keys = uniq<string>([...publicRules, ...(myth.rules.value ?? []), ...Object.keys(validations)])
     for (const k of keys) {
       if (['mobile', '_default', 'default'].includes(k)) {
         continue
@@ -130,7 +174,7 @@ export const useInputHelper = <P extends G = G> (Props: MaybeRefOrGetter<P>, key
 
       // eslint-disable-next-line no-labels
       mainFor: for (const c of cases) {
-        for (const b of [attrs.value, props]) {
+        for (const b of [attributes.value, props]) {
           if (c in b && (b[c] === !0 || b[c] === '')) {
             rules[snakeCase(k)] = b[c] === !0 || b[c] === '' ? !0 : b[c]
             // eslint-disable-next-line no-labels
@@ -140,40 +184,26 @@ export const useInputHelper = <P extends G = G> (Props: MaybeRefOrGetter<P>, key
       }
     }
 
-    const mobile = attrs.value?.mobile !== undefined ? attrs.value.mobile : props.mobile
+    const mobile = attributes.value?.mobile !== undefined ? attributes.value.mobile : props.mobile
     if (mobile !== undefined && mobile !== false) {
       const defLen = 10
       rules.digits = typeof mobile === 'boolean' ? defLen : (mobile || defLen)
     }
     return Object.values(rules).filter(e => !!e).length > 0 ? rules : undefined
   })
-
+  const attrs = computed(() => ({
+    ...props,
+    ...attributes.value,
+    ...mergedTheme.value
+  }))
   return {
-    getRules,
+    inputRules,
     accepts,
     hasTopLabel,
     getLabel,
     getPlaceholder,
     getAutocompleteAttribute,
-    inputOptions,
-    inputProps
+    getProp,
+    attrs
   }
 }
-
-export const useValue = <T = any> (name: MaybeRefOrGetter<string>) => {
-  const [value, setValue] = [useFieldValue<T>(name), useSetFieldValue<T>(name)]
-  const field = computed<T>({
-    get: () => value.value,
-    set: (v: T) => setValue(v)
-  })
-
-  return { field, value, setValue }
-}
-export const useError = (name: MaybeRefOrGetter<string>) => {
-  const [error, setErrors] = [useFieldError(name), useSetFieldError(name)]
-  const errors = computed<string | string[] | undefined>({
-    get: () => error.value,
-    set: (v: string | string[] | undefined) => setErrors(v)
-  })
-  return { errors, error, setErrors }
-}

package/src/composable/useError.ts

@@ -0,0 +1,11 @@
+import { computed, MaybeRefOrGetter } from 'vue'
+import { useFieldError, useSetFieldError } from 'vee-validate'
+
+export const useError = (name: MaybeRefOrGetter<string>) => {
+  const [error, setErrors] = [useFieldError(name), useSetFieldError(name)]
+  const errors = computed<string | string[] | undefined>({
+    get: () => error.value,
+    set: (v: string | string[] | undefined) => setErrors(v)
+  })
+  return { errors, error, setErrors }
+}

package/src/composable/useMyth.ts

@@ -6,12 +6,289 @@
  * Github: https://github.com/mythpe
  */
 
+import lodash from 'lodash'
 import { useI18n } from 'vue-i18n'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { copyToClipboard, Dialog, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
+import { Helpers, myth, Str } from '../utils'
+import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 
 export const useMyth = () => {
   const { t, te } = useI18n({ useScope: 'global' })
-  // const __ = (key: string, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
-  const __ = (key: any, args?: Record<string, unknown>) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`) : te(key) ? t(key) : key
+  const { props: pluginOptions } = myth
+  const q = useQuasar()
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const __ = (key: any, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
 
-  return { __ }
+  function quasarNotifyOptions (opts: QNotifyCreateOptions | string): QNotifyCreateOptions {
+    return {
+      badgeColor: 'primary',
+      progress: !0,
+      ...pluginOptions.value.notify as any,
+      message: typeof opts === 'string' ? opts : opts.message,
+      ...(typeof opts !== 'string' ? opts : {})
+    }
+  }
+
+  function alertMessage (opts: Vue3MAlertMessageOptions): Vue3MAlertMessage {
+    return q.notify(helpers.quasarNotifyOptions(opts))
+  }
+
+  const helpers = {
+    getPageTitle (route: RouteLocationNormalizedLoaded, number?: number | string): string {
+      number = number || 2
+      number = parseInt(number.toString())
+      const defaultValue = ''
+      // Not is route
+      // No page title
+      if (!route) {
+        return defaultValue
+      }
+
+      const routePath = route?.path?.toString() || null
+      const routeName = route?.name?.toString() || null
+
+      // Not is route
+      // No page title
+      if (!routePath || !routeName) {
+        return defaultValue
+      }
+
+      let lastRouteName = routeName.split('.').pop() || ''
+      if (lastRouteName === 'index') {
+        const s = routeName.split('.')
+        lastRouteName = s[s.length - 2] ?? lastRouteName
+      }
+      const pluralize = Str.pascalCase(lodash.pluralize(lastRouteName))
+      const singular = Str.pascalCase(lodash.singularize(lastRouteName))
+      const keys = lodash.filter(lodash.uniq([
+        `${lastRouteName}Page.title`,
+        `${lodash.camelCase(lastRouteName)}Page.title`,
+        `choice.${pluralize}`,
+        `choice.${singular}`,
+        `replace.${lastRouteName}_details`,
+        `replace.${lastRouteName}`,
+        pluralize,
+        lodash.snakeCase(pluralize),
+        singular,
+        lodash.snakeCase(singular)
+      ]))
+
+      let str: string | null = null
+      let k: string | any
+
+      if (te((k = `routes.${routeName}`)) && lodash.isString((str = t(k)))) {
+        return str
+      }
+
+      if (te((k = `routes.${routePath}`)) && lodash.isString((str = t(k)))) {
+        return str
+      }
+
+      for (const f in keys) {
+        if (!(k = keys[f])) {
+          continue
+        }
+        if (te && te(k) && lodash.isString(t(k))) {
+          if (lodash.startsWith(k, 'choice.')) {
+            const s = k.split('.')
+            const n = routeName.split('.')
+            if (s.length === 2 && n.length > 1) {
+              const model = n[n.length - 2]
+              const pluralizeModel = lodash.pluralize(lodash.pascalCase(model))
+              const _modelChoiceKey = `choice.${pluralizeModel}`
+              if (te(_modelChoiceKey)) {
+                const l = t(_modelChoiceKey, number as any)
+                const rep = lodash.singularize(n[n.length - 1]).toLocaleLowerCase()
+                const e = `replace.${rep}`
+                str = te(e) ? t(e, { name: l }) : null
+              } else {
+                const pop: string = k.split('.').pop() || ''
+                str = te(k) ? t(k, number as any, { [pop]: number }) : null
+              }
+            } else {
+              const pop: string = k.split('.').pop() || ''
+              str = te(k) ? t(k, number as any, { [pop]: number }) : null
+            }
+          } else {
+            const parents: string[] = routeName.split('.')
+            if (parents.length > 1) {
+              const e = `choice.${Str.pascalCase(lodash.pluralize(parents[parents.length - 2]))}`
+              str = te(e) ? t(k, { name: t(e, '1') }) : null
+            } else {
+              str = te(k) ? t(k, { name: '' }) : null
+            }
+          }
+          return str || defaultValue
+        }
+      }
+      return defaultValue
+    },
+    /**
+     * Custom transformer
+     * @param headers
+     * @param options
+     */
+    parseHeaders (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] {
+      const defaultOptions: Partial<ParseHeaderOptions> = {
+        controlKey: 'control',
+        // controlStyle: 'max-width: 150px',
+        align: 'center'
+        // sortable: !0
+      }
+      const opts = extend<ParseHeaderOptions>(!0, defaultOptions, options)
+      let control: string | undefined = defaultOptions.controlKey
+      let controlStyle: string | undefined = defaultOptions.controlStyle
+      if (opts.controlKey) {
+        control = opts.controlKey
+        delete opts.controlKey
+      }
+      if (opts.controlStyle) {
+        controlStyle = opts.controlStyle
+        delete opts.controlStyle
+      }
+
+      const result: MDtColumn[] = []
+
+      headers.forEach((elm: string | MDtColumn | undefined) => {
+        if (typeof elm !== 'string' && !elm?.name) return elm
+        // Todo: will do this
+        let item: MDtColumn = typeof elm === 'string' ? {
+          name: elm as string,
+          label: elm as string,
+          field: elm as string
+        } : { ...elm }
+        item.name = item.name ?? ''
+        item.label = (item.label === undefined || item.label === null) ? item.name : item.label
+        item.field = (item.field === undefined || item.field === null) ? item.name : item.field
+        item = {
+          ...item,
+          name: Str.strBefore(Str.strBefore(item.name), 'ToString'),
+          label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
+        }
+        const name = item.name
+        let k
+        if (te) {
+          if (te((k = `attributes.${item.label}`))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k)
+          } else if (te((k = `attributes.${lodash.snakeCase(item.label)}`))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k)
+          } else if (te((k = `attributes.${lodash.camelCase(item.label)}`))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k)
+          } else if (te((k = `attributes.${Str.pascalCase(item.label)}`))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k)
+          } else if (te((k = `choice.${lodash.pluralize(Str.pascalCase(item.label))}`))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k, 2)
+          } else if (te((k = item.label))) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            item.label = t(k)
+          }
+        }
+
+        if (name === control) {
+          if (controlStyle && !item.style) {
+            item.style = controlStyle + (item.style ? ` ${item.style}` : '')
+          }
+          item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m--control-header'
+          item.headerClasses = item.headerClasses.trim()
+          item.sortable = !1
+          if (!item.align) {
+            item.align = 'right'
+          }
+          opts.classes = opts.classes || ''
+          if (typeof opts.classes === 'function') {
+            opts.classes = opts.classes()
+          }
+          opts.classes += ' m--control-cell'
+          opts.classes = opts.classes.trim()
+        }
+
+        item = { ...opts, ...item }
+
+        if (item.sortable === undefined && (options.noSort ?? []).length > 0 && options.noSort?.includes(item.name)) {
+          item.sortable = !1
+        } else if (item.sortable === undefined) {
+          item.sortable = !0
+        }
+        result.push(item)
+      })
+      return lodash.uniqBy(result, (e: MDtColumn) => e.name)
+    },
+    /**
+     * Copy text
+     * @param text
+     */
+    copyText: async (text: string | any) => copyToClipboard(text),
+    quasarNotifyOptions,
+    alertMessage,
+    alertSuccess (message: string) {
+      return alertMessage({ type: 'positive', message })
+    },
+    alertError (message: string) {
+      return alertMessage({ type: 'negative', message })
+    },
+    confirmMessage (message?: string, title?: string, opts?: QDialogOptions): Vue3MConfirmMessage {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      title = title || t('messages.are_you_sure') || ''
+      message = message || ''
+      opts = opts || {}
+      const buttonsProps = {
+        ...(pluginOptions.value.btn || {})
+        // ...(options.value.confirmDialogOptions?.buttons || {})
+      }
+      // const okProps = options.value.confirmDialogOptions?.okProps || {}
+      const okProps: any = {}
+      // const cancelProps = options.value.confirmDialogOptions?.cancelProps || {}
+      const cancelProps: any = {}
+      // const dialogProps = options.value.confirmDialog || {} as any
+      const dialogProps: any = {}
+      dialogProps.transitionShow = dialogProps.transitionShow || 'jump-down'
+      dialogProps.transitionHide = dialogProps.transitionHide || 'jump-up'
+      dialogProps.class = ('m--confirm ') + (dialogProps.class || '')
+      return Dialog.create({
+        title,
+        message,
+        focus: 'none',
+        cancel: {
+          color: cancelProps.color || 'positive',
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          label: t(cancelProps?.label || 'no'),
+          ...buttonsProps as any,
+          flat: !0,
+          unelevated: !0,
+          ...cancelProps as any
+        },
+        ok: {
+          color: okProps.color || 'negative',
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          label: t(okProps?.label || 'yes'),
+          ...buttonsProps as any,
+          flat: !0,
+          unelevated: !0,
+          ...okProps as any
+        },
+        persistent: !0,
+        ...dialogProps as any,
+        ...opts as any
+      })
+    },
+    ...Helpers
+  }
+
+  return { __, helpers }
 }

package/src/composable/useValue.ts

@@ -0,0 +1,12 @@
+import { computed, MaybeRefOrGetter } from 'vue'
+import { useFieldValue, useSetFieldValue } from 'vee-validate'
+
+export const useValue = <T = any> (name: MaybeRefOrGetter<string>) => {
+  const [value, setValue] = [useFieldValue<T>(name), useSetFieldValue<T>(name)]
+  const field = computed<T>({
+    get: () => value.value,
+    set: (v: T) => setValue(v)
+  })
+
+  return { field, value, setValue }
+}