@mythpe/quasar-ui-qui 0.0.20 → 0.0.21-dev

package/src/composable/useHelpersMyth.ts

@@ -0,0 +1,179 @@
+/*
+ * 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 { 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'
+
+type G = { name: string; } & Record<string, any>;
+type OptsContext = { choose?: boolean; };
+export const useInputHelper = <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 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 getLabel = computed<string | undefined>(() => {
+    const k = props.label === undefined ? props.name : props.label
+    return k ? (__(k) || undefined) : undefined
+  })
+  const getPlaceholder = computed<string | undefined>(() => {
+    if (props.placeholder === undefined) {
+      const k = props.label !== undefined ? props.label : props.name
+      return __(`replace.${opts?.choose ? 'choose' : 'enter'}`, { 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
+    if (autocomplete !== undefined) {
+      if (autocomplete === !0 || autocomplete === '') {
+        return kebabCase(props.name)
+      } else if (autocomplete === !1) {
+        return 'off'
+      } else if (autocomplete?.length > 0) {
+        return autocomplete
+      }
+    }
+    return undefined
+  })
+  const accepts = computed(() => {
+    const l: any[] = []
+    if (props.accept) {
+      l.push(props.accept)
+    }
+    if (props.images) {
+      l.push('image/png,image/jpg,image/jpeg')
+    }
+    if (props.svg) {
+      l.push('image/svg+xml')
+    }
+    if (props.video) {
+      l.push('video/mp4,video/x-m4v,video/*')
+    }
+    if (props.pdf) {
+      l.push('application/pdf')
+    }
+    if (props.excel) {
+      l.push('.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+    }
+    return l
+  })
+
+  const isNumeric = (str: any) => !isNaN(str) && !isNaN(parseFloat(str))
+  const convertRules = (rules: any) => {
+    if (!rules) {
+      return {}
+    }
+    let values: Record<string, any> = {}
+    const list: any[] = typeof rules === 'string' ? rules.split('|') : (Array.isArray(rules) ? rules : [rules])
+
+    for (const rule of list) {
+      // console.log(rule)
+      if (!rule) {
+        continue
+      }
+      if (typeof rule === 'object' && !Array.isArray(rule)) {
+        values = { ...values, ...rule }
+        continue
+      }
+      if (Array.isArray(rule)) {
+        values = { ...values, ...rule }
+      }
+      const [name, value] = rule.split(':')
+      if (!name) {
+        continue
+      }
+      values[name] = !value ? !0
+        : /,/g.test(value) ? value.split(',').map((e: any) => isNumeric(e) ? parseInt(e) : e) : (isNumeric(value) ? parseInt(value) : value)
+    }
+    if (values.color && props.required) {
+      values.requiredColor = values.color
+      delete values.color
+    }
+    return values
+  }
+  const publicRules = ['required', 'email', 'numeric', 'integer', 'float', 'color']
+  const validations = (messages.value as any)?.[locale.value]?.validation?.messages || {}
+  const getRules = 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)])
+    for (const k of keys) {
+      if (['mobile', '_default', 'default'].includes(k)) {
+        continue
+      }
+      const cases = [k, snakeCase(k), camelCase(k), kebabCase(k)]
+
+      // eslint-disable-next-line no-labels
+      mainFor: for (const c of cases) {
+        for (const b of [attrs.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
+            break mainFor
+          }
+        }
+      }
+    }
+
+    const mobile = attrs.value?.mobile !== undefined ? attrs.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
+  })
+
+  return {
+    getRules,
+    accepts,
+    hasTopLabel,
+    getLabel,
+    getPlaceholder,
+    getAutocompleteAttribute,
+    inputOptions,
+    inputProps
+  }
+}
+
+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/useMyth.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+
+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
+
+  return { __ }
+}

package/src/index.common.js

@@ -1 +1,19 @@
-export * from './vue-plugin'
+/*
+ * 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 * as composable from './composable'
+import * as utils from './utils'
+
+export default {
+  ...composable,
+  ...utils
+}
+
+export * from './components'
+export * from './composable'
+export * from './utils'

package/src/index.esm.js

@@ -1,4 +1,19 @@
-import * as VuePlugin from './vue-plugin'
+/*
+ * 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
+ */
 
-export * from './vue-plugin'
-export default VuePlugin
+import * as composable from './composable'
+import * as utils from './utils'
+
+export default {
+  ...composable,
+  ...utils
+}
+
+export * from './components'
+export * from './composable'
+export * from './utils'

package/src/index.js

@@ -0,0 +1,19 @@
+/*
+ * 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 * as composable from './composable'
+import * as utils from './utils'
+
+export default {
+  ...composable,
+  ...utils
+}
+
+export * from './components'
+export * from './composable'
+export * from './utils'

package/src/index.sass

@@ -1,3 +1,11 @@
+/*!
+ / 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 'quasar/src/css/variables.sass'
 $m--container-padding: $space-base !default
 $m--container-fluid-width: 1440px !default

package/src/index.umd.js

@@ -1,3 +1,17 @@
+/*
+ * 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 * as VuePlugin from './vue-plugin'
-export default VuePlugin
+import * as components from './components'
+import * as composable from './composable'
+import * as utils from './utils'
+
+export default {
+  ...components,
+  ...composable,
+  ...utils
+}

package/src/types/components.d.ts

@@ -1,6 +1,15 @@
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QItemProps } from 'quasar'
-import type { VNode } from 'vue'
-import { TypedOptions } from 'typed.js'
+/*
+ * 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 type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QFieldSlots, QInputProps, QInputSlots, QItemProps } from 'quasar'
+import type { MaybeRefOrGetter, UnwrapNestedRefs, VNode } from 'vue'
+import type { TypedOptions } from 'typed.js'
+import type { FieldContext, FieldOptions } from 'vee-validate'
 
 export type StyleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
 
@@ -12,7 +21,7 @@ export interface MBtnSlots extends QBtnSlots {
   /**
    * Use for custom content, instead of relying on 'icon' and 'label' props
    */
-  default: () => VNode[];
+  default?: () => VNode[];
   /**
    * Override the default QSpinner when in 'loading' state
    */
@@ -36,7 +45,7 @@ export interface MBlockProps {
 }
 
 export interface MBlockSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export type ColStyleType =
@@ -84,7 +93,7 @@ export interface MColProps {
 }
 
 export interface MColSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MColumnProps {
@@ -92,7 +101,7 @@ export interface MColumnProps {
 }
 
 export interface MColumnSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MContainerProps {
@@ -102,7 +111,7 @@ export interface MContainerProps {
 }
 
 export interface MContainerSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MRowProps {
@@ -117,7 +126,7 @@ export interface MRowProps {
 }
 
 export interface MRowSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MHelpRowProps extends Partial<QItemProps> {
@@ -127,7 +136,7 @@ export interface MHelpRowProps extends Partial<QItemProps> {
 }
 
 export interface MHelpRowSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MTypingStringProps {
@@ -142,13 +151,160 @@ export interface MTypingStringProps {
 }
 
 export interface MTypingStringSlots {
+  default?: () => VNode[];
+}
+
+export type BaseInputFieldPropContext = FieldContext<any>;
+export type BaseInputFieldProps = {
+  /**
+   * Context of field input.
+   */
+  field: UnwrapNestedRefs<BaseInputFieldPropContext>;
+  readonly label?: string | undefined;
+}
+
+export type MInputFieldControlProps = Record<string, unknown>;
+export type MInputFieldControlSlots = {
+  default: () => VNode[];
+}
+
+export type MInputLabelProps = BaseInputFieldProps;
+export type MInputLabelSlots = {
+  default?: () => VNode[];
+}
+
+export type ViewModeProps = {
+  /**
+   * Set input to vie mode use q-field
+   */
+  readonly viewMode?: boolean;
+  /**
+   * View Mode value for input or modelValue.
+   */
+  readonly viewModeValue?: any;
+}
+export type InputHelpProps = {
+  /**
+   * Information text with Icon.
+   */
+  readonly help?: string;
+}
+export type InputHelpSlots = {
+  /**
+   * VNode bottom of input & before 'bottom-input slot'.
+   */
+  help: () => VNode[];
+}
+export type InputRulesContext = string | string[] | Record<string, any> | undefined;
+export type InputErrorsContext = string[];
+export type InputFormErrorsContext = Record<string, InputErrorsContext> | undefined;
+export type BaseInputFormProps = {
+  /**
+   * Input name.
+   */
+  readonly name: string;
+  /**
+   * Input model value.
+   * can be used instead of initialValue.
+   */
+  modelValue?: any;
+  /**
+   * Input Label.
+   */
+  readonly label?: string | undefined;
+  /**
+   * Caption under label.
+   */
+  readonly caption?: string | undefined;
+  /**
+   * Input Hint.
+   */
+  readonly hint?: string | undefined;
+  /**
+   * Input Placeholder.
+   */
+  readonly placeholder?: string | undefined;
+  /**
+   * Input Required validation.
+   */
+  readonly required?: boolean;
+  /**
+   * Input Validation Rules.
+   */
+  readonly rules?: InputRulesContext;
+  /**
+   * Input Error Messages.
+   */
+  // errors?: InputErrorsContext;
+  /**
+   * Form Error Messages.
+   */
+  // formErrors?: InputFormErrorsContext;
+  /**
+   * Input autocomplete attribute.
+   * if true, will set from input name.
+   * if false, will set 'off'.
+   * else, will set the attribute value.
+   * Default: undefined.
+   */
+  readonly autocomplete?: boolean | string | undefined;
+  /**
+   * Inputs Top Label.
+   */
+  readonly topLabel?: boolean;
+  /**
+   * Mobile Rule.
+   */
+  readonly mobile?: boolean | string | number | undefined;
+  /**
+   * Email Rule.
+   */
+  readonly email?: boolean;
+  /**
+   * Number Rule.
+   */
+  readonly float?: boolean;
+  /**
+   * vee-validate Field Options.
+   */
+  readonly fieldOptions?: Partial<FieldOptions> | MaybeRefOrGetter<Partial<FieldOptions>>;
+}
+export type BaseInputsProps = ViewModeProps & InputHelpProps & Omit<MColProps, 'name'> & BaseInputFormProps;
+export type BaseInputsSlots = InputHelpSlots & {
+  /**
+   * VNode top of input & top of 'top label slot'.
+   */
+  'top-input': () => VNode[];
+  /**
+   * The label top on input
+   */
+  'top-label': () => VNode[];
+  /**
+   * VNode top of input & after top label.
+   */
+  caption: () => VNode[];
+  /**
+   * Field main content
+   */
   default: () => VNode[];
+  /**
+   * VNode bottom of input.
+   */
+  'bottom-input': () => VNode[];
+}
+
+export interface MInputProps extends Omit<QInputProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint'>, BaseInputsProps {
+  //
 }
+export type MInputSlots = QInputSlots & QFieldSlots & BaseInputsSlots
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
     MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
+    MInput: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MInputFieldControl: GlobalComponentConstructor<MInputFieldControlProps, MInputFieldControlSlots>;
+    MInputLabel: GlobalComponentConstructor<MInputLabelProps, MInputLabelSlots>;
 
     // Grid.
     MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;

package/src/types/index.d.ts

@@ -1,2 +1,73 @@
+/*
+ * 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 type { QBtnProps, QFieldProps } from 'quasar'
+import type { Ref } from 'vue'
+import type { MBlockProps, MInputProps, StyleSize } from './components'
+
+export interface UiOptionsContext {
+  /**
+   * Rules keys that can be added to Input Rules as Vue Attr
+   */
+  inputRules?: string[];
+  /**
+   * Style of the components.
+   */
+  style?: {
+    /**
+     * Apply Padding on all sides of components.
+     */
+    gutters?: StyleSize | undefined;
+    /**
+     * Apply Fluid on all sides of containers.
+     */
+    fluid?: boolean | undefined;
+    /**
+     * Apply style of all inputs.
+     */
+    // inputs?: {
+    //   dense?: boolean;
+    //   rounded?: boolean;
+    //   outlined?: boolean;
+    //   standout?: boolean;
+    // }
+  };
+  /**
+   * MBtn component.
+   */
+  btn?: {
+    props?: Partial<QBtnProps>;
+    loading?: {
+      type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
+      color?: string | undefined;
+      size?: string | undefined;
+      label?: boolean | undefined;
+    }
+  };
+  /**
+   * MBlock component.
+   */
+  block?: Partial<MBlockProps>;
+  /**
+   * MInput component.
+   */
+  input?: Partial<MInputProps>;
+  /**
+   * MInput view mode props.
+   */
+  field?: Partial<QFieldProps>;
+}
+
+export interface MythContext {
+  options: Ref<UiOptionsContext>;
+  setOptions: (values: Partial<UiOptionsContext>) => void;
+  withOptions: (values: Partial<UiOptionsContext>) => void;
+  withBtnOptions: (values: Partial<QBtnProps>) => void;
+}
+
 export * from './components'
-export * from './myth'

package/src/utils/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+export * from './myth'
+export * from './vue-plugin'

package/src/{myth.ts → utils/myth.ts}

@@ -1,7 +1,15 @@
+/*
+ * 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 { ref } from 'vue'
 import type { QBtnProps } from 'quasar'
 import { extend } from 'quasar'
-import type { MythContext, UiOptionsContext } from './types'
+import type { UiOptionsContext } from '../types'
 
 const defGutters = 'md'
 const defaultOptions: UiOptionsContext = {
@@ -11,7 +19,7 @@ const defaultOptions: UiOptionsContext = {
 }
 const optionsRef = ref<UiOptionsContext>({ ...defaultOptions })
 
-export const myth : MythContext = {
+export const myth = {
   options: optionsRef,
   setOptions (values: Partial<UiOptionsContext>) {
     optionsRef.value = extend(!0, defaultOptions, values)
@@ -27,4 +35,3 @@ export const myth : MythContext = {
     })
   }
 }
-export default myth

package/src/utils/vue-plugin.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 type { App } from 'vue'
+import { name, version } from '../../package.json'
+import { myth } from './myth'
+import { MBlock, MBtn, MCol, MColumn, MContainer, MHelpRow, MInput, MInputFieldControl, MInputLabel, MRow, MTypingString } from '../components'
+
+function install (app: App, options = {}) {
+  myth.withOptions(options)
+
+  // Form.
+  app.component('MBtn', MBtn)
+  app.component('MInput', MInput)
+  app.component('MInputFieldControl', MInputFieldControl)
+  app.component('MInputLabel', MInputLabel)
+
+  // Grid.
+  app.component('MBlock', MBlock)
+  app.component('MCol', MCol)
+  app.component('MColumn', MColumn)
+  app.component('MContainer', MContainer)
+  app.component('MHelpRow', MHelpRow)
+  app.component('MRow', MRow)
+
+  // Typography.
+  app.component('MTypingString', MTypingString)
+}
+
+export {
+  name,
+  version,
+  install
+}
+
+export default {
+  name,
+  version,
+  install
+}