@mythpe/quasar-ui-qui 0.0.17-dev → 0.0.18-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.17-dev",
+  "version": "0.0.18-dev",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/boot/register.ts

@@ -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 { boot } from 'quasar/wrappers'
 import Plugin from '../utils/vue-plugin'
 

package/src/components/form/MBtn.vue

@@ -1,9 +1,20 @@
-<script lang="ts" setup>
+<!--
+  - 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 { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { myth } from '../../utils/myth'
+import { myth } from '../../utils'
 
 const props = defineProps<MBtnProps>()
 const options = computed(() => myth.options.value.btn ?? {})

package/src/components/form/MInput.vue

@@ -0,0 +1,178 @@
+<!--
+  - 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 { useField } from 'vee-validate'
+import { computed, reactive, ref, toValue } from 'vue'
+import type { MInputProps as Props } from '../../types'
+import { QField, QInput, type QInputSlots } from 'quasar'
+import { useInputHelper, useMyth } from '../../composable'
+import { myth } from '../../utils'
+
+type P = {
+  name: Props['name'];
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  placeholder?: Props['placeholder'];
+  help?: Props['help'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  autocomplete?: Props['autocomplete'];
+  topLabel?: Props['topLabel'];
+  fieldOptions?: Props['fieldOptions'];
+  clearable?: Props['clearable'];
+}
+
+// const props = withDefaults(defineProps<P>(), {
+//   name: () => '',
+//   auto: undefined,
+//   col: undefined,
+//   xs: undefined,
+//   sm: undefined,
+//   md: undefined,
+//   lg: undefined,
+//   xl: undefined,
+//   label: undefined,
+//   caption: undefined,
+//   hint: undefined,
+//   placeholder: undefined,
+//   help: undefined,
+//   required: undefined,
+//   rules: undefined,
+//   viewMode: () => !1,
+//   viewModeValue: undefined,
+//   autocomplete: undefined,
+//   topLabel: undefined,
+//   fieldOptions: undefined,
+//   clearable: undefined
+// })
+const props = defineProps<Props>()
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const { __ } = useMyth()
+const options = computed(() => myth.options.value)
+const helper = useInputHelper<P>(() => props, 'input')
+const { hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, getRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, getRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange, handleBlur } = inputScope
+const listeners = {
+  blur: (v: any) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = ref<InstanceType<typeof QInput | typeof QField> | null>(null)
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({ name: 'MInput', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':getRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot
+      name="top-input"
+      v-bind="scopes"
+    />
+    <slot
+      name="top-label"
+      v-bind="scopes"
+    >
+      <MInputLabel
+        v-if="hasTopLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <component
+      :is="viewMode ? QField : QInput"
+      ref="input"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hint="hint ? __(hint) : hint"
+      :label="hasTopLabel ? undefined : getLabel"
+      :model-value="value"
+      :placeholder="getPlaceholder"
+      v-bind="{
+        ...options.input as any,
+        ...( viewMode ? options.field : {} ),
+        ...$attrs,
+        ...( viewMode ? { stackLabel: !0 } : {} ),
+        autocomplete:getAutocompleteAttribute,
+        clearable: viewMode ? !1 : clearable
+      }"
+      v-on="listeners"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QInputSlots>"
+        :key="slot"
+        #[slot]
+      >
+        <slot :name="slot" />
+      </template>
+      <template
+        v-if="viewMode"
+        #control
+      >
+        <slot name="control">
+          <MInputFieldControl>
+            {{ viewModeValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+    </component>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/MInputFieldControl.vue

@@ -0,0 +1,24 @@
+<!--
+  - 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: 'MInputFieldControl', inheritAttrs: !1 })
+</script>
+
+<template>
+  <div
+    class="self-center full-width no-outline ellipsis"
+    tabindex="0"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/form/MInputLabel.vue

@@ -0,0 +1,31 @@
+<!--
+  - 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 { MInputLabelProps as Props } from '../../types'
+import { useMyth } from '../../composable'
+
+const { __ } = useMyth()
+defineProps<Props>()
+defineOptions({ name: 'MInputLabel' })
+</script>
+
+<template>
+  <div
+    :class="{
+      'row items-center m--input__top-label' : !0,
+      'm--input__top-label__invalid' : !field?.meta?.valid && field?.meta?.dirty
+    }"
+  >
+    <div class="m--input__top-label__content">
+      {{ label !== undefined ? __(label) : field?.label }}
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/form/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 MBtn from './MBtn.vue'
+import MInput from './MInput.vue'
+import MInputFieldControl from './MInputFieldControl.vue'
+import MInputLabel from './MInputLabel.vue'
+
+export { MBtn, MInput, MInputFieldControl, MInputLabel }

package/src/components/grid/MBlock.vue

@@ -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
+  -->
+
 <script lang="ts" setup>
 import type { MBlockProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../utils/myth'
+import { myth } from '../../utils'
 import { extend } from 'quasar'
 
 interface Props {
@@ -15,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   rounded: !1,
   shadow: 'none'
 })
-const block = computed(() => MythOptions.options.value.block ?? {})
+const block = computed(() => myth.options.value.block ?? {})
 const options = computed<Props>(() => extend(!0, { ...props }, block.value))
 defineOptions({
   name: 'MBlock',

package/src/components/grid/MCol.vue

@@ -1,9 +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
+  -->
+
 <script
   lang="ts"
   setup
 >
 import { computed } from 'vue'
-// import { uniq } from 'lodash'
+import { uniq } from 'lodash'
 import type { MColProps } from '../../types'
 
 interface Props {
@@ -44,9 +52,9 @@ const classes = computed(() => {
   if (list.length === 1 && props.col !== !1) {
     list.push('col')
   }
-  // return uniq(list)
-  return list
+  return uniq(list)
 })
+
 defineOptions({
   name: 'MCol',
   inheritAttrs: !1

package/src/components/grid/MColumn.vue

@@ -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
+  -->
+
 <script lang="ts" setup>
 defineOptions({
   name: 'MColumn',

package/src/components/grid/MContainer.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import type { MContainerProps } from '../../types'
-import MythOptions from '../../utils/myth'
+import { myth } from '../../utils'
 import { computed } from 'vue'
 
 interface Props {
@@ -18,7 +18,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const styles = computed(() => MythOptions.options.value?.style ?? {})
+const styles = computed(() => myth.options.value?.style ?? {})
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size

package/src/components/grid/MHelpRow.vue

@@ -10,7 +10,7 @@
   lang="ts"
   setup
 >
-import { useI18n } from 'vue-i18n'
+import { useMyth } from '../../composable'
 
 interface Props {
   text?: string | undefined;
@@ -19,8 +19,7 @@ interface Props {
 }
 
 defineProps<Props>()
-const { t, te } = useI18n({ useScope: 'global' })
-const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
+const { __ } = useMyth()
 defineOptions({
   name: 'MHelpRow',
   inheritAttrs: !1

package/src/components/grid/MRow.vue

@@ -1,10 +1,18 @@
+<!--
+  - 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 { MRowProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../utils/myth'
+import { myth } from '../../utils'
 
 interface Props {
   gutter?: MRowProps['gutter'];
@@ -12,7 +20,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const defSize = computed<string>(() => MythOptions.options.value.style?.gutters || '')
+const defSize = computed<string>(() => myth.options.value.style?.gutters || '')
 const gutterSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 defineOptions({

package/src/components/grid/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 MBlock from './MBlock.vue'
+import MCol from './MCol.vue'
+import MColumn from './MColumn.vue'
+import MContainer from './MContainer.vue'
+import MHelpRow from './MHelpRow.vue'
+import MRow from './MRow.vue'
+
+export { MBlock, MCol, MColumn, MContainer, MHelpRow, MRow }

package/src/components/index.ts

@@ -0,0 +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
+ */
+
+export * from './form'
+export * from './grid'
+export * from './typography'

package/src/components/typography/MTypingString.vue

@@ -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
+  -->
+
 <script
   lang="ts"
   setup

package/src/components/typography/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
+ */
+
+import MTypingString from './MTypingString.vue'
+export { MTypingString }

package/src/composable/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 './useHelpersMyth'
+export * from './useMyth'

package/src/composable/useHelpersMyth.ts

@@ -0,0 +1,178 @@
+/*
+ * 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)
+  // @ts-ignore
+  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 './utils/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.d.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 './types'

package/src/index.esm.js

@@ -1,4 +1,19 @@
-export * from './utils/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 Plugin from './utils/vue-plugin'
-export default Plugin
+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,2 +1,17 @@
-import * as Plugin from './utils/vue-plugin'
-export default 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 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/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

@@ -1,20 +1,24 @@
+/*
+ * 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 MBtn from '../components/form/MBtn.vue'
-import MBlock from '../components/grid/MBlock.vue'
-import MCol from '../components/grid/MCol.vue'
-import MColumn from '../components/grid/MColumn.vue'
-import MContainer from '../components/grid/MContainer.vue'
-import MHelpRow from '../components/grid/MHelpRow.vue'
-import MRow from '../components/grid/MRow.vue'
-import MTypingString from '../components/typography/MTypingString.vue'
+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)
@@ -31,13 +35,11 @@ function install (app: App, options = {}) {
 export {
   name,
   version,
-  install,
-  myth
+  install
 }
 
 export default {
   name,
   version,
-  install,
-  myth
+  install
 }

package/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
-    "rootDir": ".",
-    "outDir": "./dist",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "target": "esnext",
@@ -10,7 +7,6 @@
     "resolveJsonModule": true,
     "moduleDetection": "force",
     "isolatedModules": true,
-    "verbatimModuleSyntax": true,
     "module": "preserve",
     "noEmit": true,
     "lib": [
@@ -22,13 +18,16 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "noImplicitOverride": true,
-    "exactOptionalPropertyTypes": true,
+    "exactOptionalPropertyTypes": false,
     "noUncheckedIndexedAccess": true
   },
-  "exclude": [
-    "./build"
-  ],
   "include": [
-    "src/**/*"
+    "./**/*.d.ts",
+    "./**/*"
+  ],
+  "exclude": [
+    "./build",
+    "./dist",
+    "./node_modules",
   ]
 }

package/index.d.ts

@@ -1,5 +0,0 @@
-export * from './src/utils/vue-plugin'
-export * from './src/types'
-
-import * as Plugin from './src/utils/vue-plugin'
-export default Plugin

package/src/types/myth.ts

@@ -1,42 +0,0 @@
-import type { QBtnProps } from 'quasar'
-import type { Ref } from 'vue'
-import type { MBlockProps, StyleSize } from './components'
-
-export interface UiOptionsContext {
-  /**
-   * 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;
-  };
-  /**
-   * 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>;
-}
-
-export interface MythContext {
-  options: Ref<UiOptionsContext>;
-  setOptions: (values: Partial<UiOptionsContext>) => void;
-  withOptions: (values: Partial<UiOptionsContext>) => void;
-  withBtnOptions: (values: Partial<QBtnProps>) => void;
-}