@mythpe/quasar-ui-qui 0.0.19-dev → 0.0.19

package/src/components/form/MFile.vue

@@ -0,0 +1,216 @@
+<!--
+  - 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 { QFileSlots } from 'quasar'
+import { QField, QFile } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+import { useField } from 'vee-validate'
+import { reactive, toValue, useTemplateRef } from 'vue'
+import type { MFileProps as Props } from '../../types'
+import { myth } from '../../utils'
+
+interface 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'];
+  topLabel?: Props['topLabel'];
+  accept?: Props['accept'];
+  images?: Props['images'];
+  svg?: Props['svg'];
+  video?: Props['video'];
+  pdf?: Props['pdf'];
+  excel?: Props['excel'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+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,
+  topLabel: undefined,
+  accept: undefined,
+  images: () => !1,
+  svg: () => !1,
+  video: () => !1,
+  pdf: () => !1,
+  excel: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const { __ } = useMyth()
+const { props: options } = myth
+const helper = useBindInput<P>(() => props, 'file', () => ({ choose: !0 }))
+const { hasTopLabel, getLabel, getPlaceholder, accepts, inputRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange, handleBlur } = inputScope
+
+const listeners = {
+  focus: (v: Event) => handleBlur(v, !1),
+  blur: (v: Event) => handleBlur(v, !1),
+  clear: (v: Event) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<InstanceType<typeof QFile> | InstanceType<typeof QField>>('input')
+const scopes = reactive(inputScope)
+
+const pickFiles = (evt?: Event) => (input.value as QFile)?.pickFiles(evt)
+const addFiles = (files: readonly any[] | FileList) => (input.value as QFile)?.addFiles(files)
+const resetValidation = () => (input.value as QFile)?.resetValidation()
+const validate = (value?: any) => (input.value as QFile)?.validate(value)
+const focus = () => (input.value as QFile)?.focus()
+const blur = () => (input.value as QFile)?.blur()
+const removeAtIndex = (index: number) => (input.value as QFile)?.removeAtIndex(index)
+const removeFile = (index: number) => (input.value as QFile)?.removeAtIndex(index)
+const methods = {
+  pickFiles,
+  addFiles,
+  resetValidation,
+  validate,
+  focus,
+  blur,
+  removeAtIndex,
+  removeFile
+}
+
+defineExpose({ input, ...scopes, ...methods })
+defineOptions({
+  name: 'MFile',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.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">
+      <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 : QFile"
+      ref="input"
+      :accept="accepts.join(',')"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hint="__(hint)"
+      :label="hasTopLabel ? (viewMode ? undefined : getPlaceholder) : getLabel"
+      :model-value="value"
+      v-bind="{ ...options.file as any,...( viewMode ? options.field : {} ), ...$attrs, ...( viewMode ? { stackLabel: !0 } : {} ) }"
+      v-on="listeners"
+    >
+      <template #prepend>
+        <slot name="prepend">
+          <q-icon
+            class="cursor-pointer"
+            name="ion-ios-attach"
+            @click="pickFiles($event)"
+          />
+        </slot>
+      </template>
+
+      <template
+        v-for="(_,slot) in $slots as Readonly<QFileSlots>"
+        :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>
+  <slot
+    name="hidden"
+    v-bind="scopes"
+  />
+</template>

package/src/components/form/MForm.vue

@@ -0,0 +1,89 @@
+<!--
+  - 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 { InvalidSubmissionHandler, SubmissionContext, SubmissionHandler } from 'vee-validate'
+import { useForm } from 'vee-validate'
+import type { MFormProps as Props } from '../../types'
+import { computed, reactive, toValue, watch } from 'vue'
+import { useMyth } from '../../composable'
+
+interface P {
+  formProps?: Props['formProps'];
+  opts?: Props['opts'];
+  target?: Props['target'];
+  emitValues?: Props['emitValues'];
+  state?: Props['state'];
+  form?: Props['form'];
+  values?: Props['values'];
+  errors?: Props['errors'];
+  padding?: Props['padding'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  formProps: undefined,
+  opts: undefined,
+  target: undefined,
+  emitValues: () => !1,
+  state: () => () => ({}),
+  form: () => () => ({}),
+  values: () => () => ({}),
+  errors: () => () => ({}),
+  padding: undefined
+})
+const formScope = useForm<Record<string, any>>(props.opts)
+const { __, scrollToElementFromErrors } = useMyth()
+const scope = reactive(formScope)
+const { handleSubmit, resetForm, setErrors, setValues } = scope
+type Emits = {
+  (e: 'submit', values: Record<string, any>, ctx: SubmissionContext, scope: typeof formScope): void;
+}
+const emit = defineEmits<Emits>()
+const onSuccessSubmission: SubmissionHandler = async (values, ctx) => emit('submit', values, ctx, formScope)
+const onErrorSubmission: InvalidSubmissionHandler = ({ errors }) => {
+  const keys: any[] = Object.keys(errors)
+  if (keys.length) {
+    const message = errors[keys[0]] as string || __('messages.the_given_data_was_invalid')
+    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, props.target)
+  }
+}
+const defaultSubmit = props.emitValues ? handleSubmit(onSuccessSubmission, onErrorSubmission) : handleSubmit.withControlled(onSuccessSubmission,
+  onErrorSubmission)
+defineExpose({ ...scope, defaultSubmit })
+defineOptions({
+  name: 'MForm',
+  inheritAttrs: !1
+})
+const options = { deep: !0, immediate: !0 }
+const stateComputed = computed(() => props.state ? toValue(props.state) : {})
+watch(stateComputed, v => v && resetForm(v), options)
+const formComputed = computed(() => props.form ? toValue(props.form) : {})
+watch(formComputed, values => values && resetForm({ values, errors: {}, touched: {} }), options)
+const valuesComputed = computed(() => props.values ? toValue(props.values) : {})
+watch(valuesComputed, v => v && setValues(v), options)
+const errorsComputed = computed(() => props.errors ? toValue(props.errors) : {})
+watch(errorsComputed, v => v && setErrors(v), options)
+</script>
+
+<template>
+  <div
+    class="m--form__container"
+    v-bind="$attrs"
+  >
+    <form
+      :class="{'m--form': !0, 'm--container': padding}"
+      v-bind="formProps"
+      @submit="defaultSubmit"
+    >
+      <slot v-bind="scope" />
+    </form>
+  </div>
+</template>

package/src/components/form/MHidden.vue

@@ -0,0 +1,86 @@
+<!--
+  - 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 type { MHiddenProps as Props } from '../../types'
+import { reactive, toValue } from 'vue'
+import { useBindInput } from '../../composable'
+
+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'];
+  rules?: Props['rules'];
+  required?: Props['required'];
+  fieldOptions?: Props['modelValue'];
+  viewMode?: Props['viewMode'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  rules: undefined,
+  required: () => !1,
+  fieldOptions: undefined,
+  viewMode: () => !1
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'input')
+const { inputRules, getLabel } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  validateOnValueUpdate: !1,
+  validateOnMount: !1,
+  controlled: !0,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage } = inputScope
+
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes>({ ...scopes })
+defineOptions({
+  name: 'MHidden',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <input
+      v-model="value"
+      v-bind="{...$attrs,type: 'hidden' }"
+    >
+    <slot />
+  </MCol>
+</template>

package/src/components/form/MHiddenInput.vue

@@ -0,0 +1,58 @@
+<!--
+  - 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 type { MHiddenInputProps as Props } from '../../types'
+import { reactive, toValue } from 'vue'
+import { useBindInput } from '../../composable'
+
+type P = {
+  name: Props['name'];
+  rules?: Props['rules'];
+  required?: Props['required'];
+  fieldOptions?: Props['modelValue'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  rules: undefined,
+  required: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'input')
+const { inputRules, getLabel } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  validateOnValueUpdate: !1,
+  validateOnMount: !1,
+  controlled: !0,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value } = inputScope
+
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes>({ ...scopes })
+defineOptions({
+  name: 'MHiddenInput',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <input
+    v-model="value"
+    v-bind="{...$attrs,type: 'hidden' }"
+  >
+</template>

package/src/components/form/MInput.vue

@@ -12,66 +12,63 @@
 >
 
 import { useField } from 'vee-validate'
-import { computed, reactive, ref, toValue } from 'vue'
+import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import type { MInputProps as Props } from '../../types'
 import { QField, QInput, type QInputSlots } from 'quasar'
-import { useInputHelper, useMyth } from '../../composable'
+import { useBindInput, 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>()
+const props = withDefaults(defineProps<Props>(), {
+  name: () => '',
+  fillMask: undefined,
+  reverseFillMask: undefined,
+  unmaskedValue: undefined,
+  error: undefined,
+  noErrorIcon: undefined,
+  reactiveRules: undefined,
+  lazyRules: undefined,
+  stackLabel: undefined,
+  hideHint: undefined,
+  dark: undefined,
+  loading: undefined,
+  clearable: undefined,
+  filled: undefined,
+  outlined: undefined,
+  borderless: undefined,
+  standout: undefined,
+  labelSlot: undefined,
+  bottomSlots: undefined,
+  hideBottomSpace: undefined,
+  counter: undefined,
+  rounded: undefined,
+  square: undefined,
+  dense: undefined,
+  itemAligned: undefined,
+  disable: undefined,
+  readonly: undefined,
+  autofocus: undefined,
+  autogrow: undefined,
+  viewMode: undefined,
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  required: undefined,
+  autocomplete: undefined,
+  topLabel: undefined,
+  mobile: undefined,
+  email: undefined,
+  float: undefined
+})
 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, {
+const options = computed(() => myth.props.value)
+const helper = useBindInput<Props>(() => props, 'input')
+const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
   ...toValue<any>(props.fieldOptions)
@@ -81,16 +78,19 @@ 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 input = useTemplateRef<InstanceType<typeof QInput> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
-defineOptions({ name: 'MInput', inheritAttrs: !1 })
+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}]"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -127,19 +127,19 @@ defineOptions({ name: 'MInput', inheritAttrs: !1 })
     <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,
+        ...$props,
+        ...attrs as any,
         ...( viewMode ? { stackLabel: !0 } : {} ),
         autocomplete:getAutocompleteAttribute,
-        clearable: viewMode ? !1 : clearable
+        clearable:viewMode?!1:clearable,
+        error:!!errorMessage,
+        errorMessage,
+        hint:__(hint),
+        label:hasTopLabel?undefined:getLabel,
+        modelValue:value,
+        placeholder:getPlaceholder
       }"
       v-on="listeners"
     >

package/src/components/form/MInputFieldControl.vue

@@ -10,7 +10,10 @@
   lang="ts"
   setup
 >
-defineOptions({ name: 'MInputFieldControl', inheritAttrs: !1 })
+defineOptions({
+  name: 'MInputFieldControl',
+  inheritAttrs: !1
+})
 </script>
 
 <template>

package/src/components/form/MInputLabel.vue

@@ -6,14 +6,20 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 
-import { MInputLabelProps as Props } from '../../types'
+import type { MInputLabelProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 
 const { __ } = useMyth()
 defineProps<Props>()
-defineOptions({ name: 'MInputLabel' })
+defineOptions({
+  name: 'MInputLabel',
+  inheritAttrs: !1
+})
 </script>
 
 <template>
@@ -22,6 +28,7 @@ defineOptions({ name: 'MInputLabel' })
       'row items-center m--input__top-label' : !0,
       'm--input__top-label__invalid' : !field?.meta?.valid && field?.meta?.dirty
     }"
+    v-bind="$attrs"
   >
     <div class="m--input__top-label__content">
       {{ label !== undefined ? __(label) : field?.label }}