@mythpe/quasar-ui-qui 0.0.26 → 0.0.27-dev

package/src/components/form/MField.vue

@@ -0,0 +1,148 @@
+<!--
+  - 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 { useFieldError, useFieldValue } from 'vee-validate'
+import type { MFieldProps as Props } from '../../types'
+import { useTemplateRef } from 'vue'
+import { QField, QFieldSlots } from 'quasar'
+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'];
+  autocomplete?: Props['autocomplete'];
+  topLabel?: Props['topLabel'];
+  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,
+  autocomplete: undefined,
+  topLabel: undefined,
+  clearable: undefined
+})
+const { __ } = useMyth()
+const { props: options } = myth
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'input')
+const { hasTopLabel, getLabel, getPlaceholder, inputRules, attrs } = helper
+const value = useFieldValue(() => props.name)
+const errorMessage = useFieldError(() => props.name)
+const input = useTemplateRef<InstanceType<typeof QField>>('input')
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({
+  name: 'MField',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view': !0}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot name="top-input" />
+    <slot name="top-label">
+      <MInputLabel
+        v-if="hasTopLabel"
+        :field="{label: getLabel} as any"
+      >
+        <MHelpRow
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <q-field
+      ref="input"
+      v-bind="{
+        ...options.input as any,
+        ...options.field as any,
+        ...$attrs,
+        ...myth.themeInput,
+        clearable: !1,
+        stackLabel: !0,
+        error:!!errorMessage,
+        errorMessage,
+        hint:__(hint),
+        label:hasTopLabel ? undefined : getLabel,
+        modelValue:value,
+        placeholder:getPlaceholder,
+      }"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QFieldSlots>"
+        :key="slot"
+        #[slot]
+      >
+        <slot :name="slot" />
+      </template>
+      <template #control>
+        <slot name="control">
+          <MInputFieldControl>
+            {{ modelValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+    </q-field>
+    <slot name="help">
+      <MHelpRow
+        v-if="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot name="bottom-input" />
+  </MCol>
+</template>

package/src/components/form/MFile.vue

@@ -0,0 +1,215 @@
+<!--
+  - 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 { QField, QFile, QFileSlots } 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>