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

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, toValue, useTemplateRef } from 'vue'
+import type { MInputProps as Props } from '../../types'
+import { QField, QInput, type QInputSlots } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+import { myth } from '../../utils'
+
+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.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)
+})
+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 = 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
+})
+</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"
+      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"
+      v-bind="{
+        ...( viewMode ? options.field : {} ),
+        ...$props,
+        ...attrs as any,
+        ...( viewMode ? { stackLabel: !0 } : {} ),
+        autocomplete:getAutocompleteAttribute,
+        clearable:viewMode?!1:clearable,
+        error:!!errorMessage,
+        errorMessage,
+        hint:__(hint),
+        label:hasTopLabel?undefined:getLabel,
+        modelValue:value,
+        placeholder:getPlaceholder
+      }"
+      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,27 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+defineOptions({
+  name: '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,38 @@
+<!--
+  - 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 { MInputLabelProps as Props } from '../../types'
+import { useMyth } from '../../composable'
+
+const { __ } = useMyth()
+defineProps<Props>()
+defineOptions({
+  name: 'MInputLabel',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      '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 }}
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/form/MMobile.vue

@@ -0,0 +1,43 @@
+<!--
+  - 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 { MInputProps as Props, MInputSlots } from '../../types'
+import { useTemplateRef } from 'vue'
+import MInput from './MInput.vue'
+import { myth } from '../../utils'
+
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const input = useTemplateRef<InstanceType<typeof MInput>>('input')
+const { props: options } = myth
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({
+  name: 'MMobile',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MInput
+    ref="input"
+    v-model="modelValue"
+    type="tel"
+    v-bind="{...options.mobile as any,...$attrs}"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MInput>
+</template>

package/src/components/form/MOptions.vue

@@ -0,0 +1,255 @@
+<!--
+  - 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 { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
+import { reactive, toValue, useTemplateRef } from 'vue'
+import { QField, QOptionGroup, type QOptionGroupSlots } 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'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  topLabel?: Props['topLabel'];
+  color?: Props['color'];
+  type?: Props['type'];
+  keepColor?: Props['keepColor'];
+  service?: Props['service'];
+  fullWidth?: Props['fullWidth'];
+  fitWidth?: Props['fullWidth'];
+  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,
+  color: () => 'primary',
+  type: 'radio',
+  keepColor: undefined,
+  service: undefined,
+  fullWidth: () => !1,
+  fitWidth: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const options = defineModel<MOptionsOptionContext[]>('options', { required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'options')
+const { getLabel, inputRules, getProp } = 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 = {
+  blur: (v: any) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<InstanceType<typeof QField> | InstanceType<typeof QOptionGroup>>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+const { alertError, __ } = useMyth()
+const { props: pluginProps } = myth
+const fetchData = async () => {
+  if (props.service) {
+    loading.value = !0
+    try {
+      const { _data } = await props.service()
+      options.value = _data as any
+    } catch (e: any) {
+      alertError(e?._message || e?.message || 'Failed to fetch data')
+    } finally {
+      loading.value = !1
+    }
+  }
+}
+fetchData()
+defineOptions({
+  name: 'MOptions',
+  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="!!getLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          v-if="!!help"
+          :text="help"
+          tooltip
+        />
+        <MTransition>
+          <q-spinner-dots
+            v-if="loading"
+            color="primary"
+            size="25px"
+          />
+        </MTransition>
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <MTransition>
+      <div
+        v-if="!!errorMessage"
+        class="text-negative text-caption"
+      >
+        <q-icon
+          v-if="!!errorMessage"
+          color="negative"
+          name="ion-ios-information-circle-outline"
+          size="20px"
+        />
+        {{ errorMessage }}
+      </div>
+    </MTransition>
+    <component
+      :is="viewMode ? QField : QOptionGroup"
+      ref="input"
+      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :color="!!errorMessage ? 'negative' : getProp('color')"
+      :error="viewMode ? !!errorMessage : undefined"
+      :error-message="viewMode ? errorMessage : undefined"
+      :hint="viewMode ? __(hint) : undefined"
+      :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
+      :label="getLabel"
+      :model-value="value"
+      :options="options"
+      :type="viewMode ? undefined : type"
+      v-bind="{ ...pluginProps.options as any,...( viewMode ? pluginProps.field : {} ), ...$attrs, ...( viewMode ? { stackLabel: !0 } : {} ) }"
+      v-on="listeners"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QOptionGroupSlots>"
+        :key="slot"
+        #[slot]="inputSlot"
+      >
+        <slot
+          :name="slot"
+          v-bind="inputSlot || {}"
+        />
+      </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="!getLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+    <slot
+      :options="options"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>
+
+<style lang="sass">
+$c: calc(100% / 3)
+
+.m--options
+  .q-checkbox__inner,
+  .q-radio__inner,
+  .q-toggle__inner
+    align-self: flex-start
+
+  &__full_width
+    > div
+      .q-checkbox,
+      .q-radio,
+      .q-toggle,
+      .q-checkbox__label,
+      .q-radio__label,
+      .q-toggle__label
+        width: 100%
+
+  &__fit_width
+    margin-left: 0
+
+    > div
+      width: calc(100% / 3)
+      margin-left: 0
+</style>