@mythpe/quasar-ui-qui 0.0.23 → 0.0.24-dev

package/src/components/form/MDate.vue

@@ -0,0 +1,47 @@
+<!--
+  - 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 { MDateProps as Props, MInputSlots } from '../../types'
+import { useTemplateRef } from 'vue'
+import MPicker from './MPicker.vue'
+
+type P = {
+  name: Props['name'];
+  rules?: Props['rules'];
+}
+withDefaults(defineProps<P>(), {
+  name: () => '',
+  rules: undefined
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const input = useTemplateRef<InstanceType<typeof MPicker>>('input')
+defineExpose<{
+  input: typeof input
+}>({ input })
+defineOptions({
+  name: 'MDate',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MPicker
+    ref="input"
+    v-model="modelValue"
+    v-bind="{...$attrs,type:'date',name}"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MPicker>
+</template>

package/src/components/form/MEditor.vue

@@ -0,0 +1,285 @@
+<!--
+  - 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 { QEditor, QField, useQuasar } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+import { useField } from 'vee-validate'
+import type { MEditorProps as Props } from '../../types'
+import { reactive, toValue, useTemplateRef } from 'vue'
+import { myth } from '../../utils'
+
+const $q = useQuasar()
+const _toolbar = [
+  [
+    // {
+    //   label: $q.lang.editor.align,
+    //   icon: $q.iconSet.editor.align,
+    //   fixedLabel: true,
+    //   list: 'only-icons',
+    //   options: ['left', 'center', 'right', 'justify']
+    // },
+    {
+      label: $q.lang.editor.align,
+      icon: $q.iconSet.editor.align,
+      fixedLabel: true,
+      options: ['left', 'center', 'right', 'justify']
+    }
+  ],
+  ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
+  ['hr', 'link', 'print', 'fullscreen'],
+  [
+    {
+      label: $q.lang.editor.formatting,
+      icon: $q.iconSet.editor.formatting,
+      list: 'no-icons',
+      options: [
+        'p',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'code'
+      ]
+    },
+    {
+      label: $q.lang.editor.fontSize,
+      icon: $q.iconSet.editor.fontSize,
+      fixedLabel: true,
+      fixedIcon: true,
+      list: 'no-icons',
+      options: [
+        'size-1',
+        'size-2',
+        'size-3',
+        'size-4',
+        'size-5',
+        'size-6',
+        'size-7'
+      ]
+    },
+    {
+      label: $q.lang.editor.fontSize,
+      icon: $q.iconSet.editor.fontSize,
+      fixedLabel: true,
+      fixedIcon: true,
+      list: 'no-icons',
+      options: [
+        'size-1',
+        'size-2',
+        'size-3',
+        'size-4',
+        'size-5',
+        'size-6',
+        'size-7'
+      ]
+    },
+    {
+      label: $q.lang.editor.defaultFont,
+      icon: $q.iconSet.editor.font,
+      fixedIcon: true,
+      list: 'no-icons',
+      options: [
+        'default_font',
+        'arial',
+        'arial_black',
+        'comic_sans',
+        'courier_new',
+        'impact',
+        'lucida_grande',
+        'times_new_roman',
+        'verdana'
+      ]
+    },
+    'removeFormat'
+  ],
+  ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
+  ['undo', 'redo'],
+  ['viewsource']
+]
+const _fonts = {
+  arial: 'Arial',
+  arial_black: 'Arial Black',
+  comic_sans: 'Comic Sans MS',
+  courier_new: 'Courier New',
+  impact: 'Impact',
+  lucida_grande: 'Lucida Grande',
+  times_new_roman: 'Times New Roman',
+  verdana: 'Verdana'
+}
+const _definitions = {
+  colors: {
+    label: 'Colors',
+    tip: 'Change the text & background colors',
+    icon: 'colorize'
+  }
+}
+
+interface P {
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  minHeight?: Props['minHeight'];
+  name: Props['name'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  placeholder?: Props['placeholder'];
+  help?: Props['help'];
+  dense?: Props['dense'];
+  toolbar?: Props['toolbar'];
+  fonts?: Props['fonts'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  topLabel?: Props['topLabel'];
+  required?: Props['required'];
+  fieldOptions?: Props['fieldOptions'];
+  useChoice?: Props['useChoice'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  minHeight: () => '10rem',
+  name: () => '',
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  placeholder: undefined,
+  help: undefined,
+  dense: undefined,
+  toolbar: undefined,
+  fonts: undefined,
+  rules: undefined,
+  topLabel: undefined,
+  viewMode: undefined,
+  required: undefined,
+  fieldOptions: undefined,
+  useChoice: undefined
+})
+const { __ } = useMyth()
+const { props: pluginOptions, themeInput } = myth
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<any>(() => props, 'editor')
+const { hasTopLabel, getLabel, getPlaceholder, inputRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange } = inputScope
+
+const listeners = {
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+
+const input = useTemplateRef<InstanceType<typeof QEditor> | InstanceType<typeof QField>>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({
+  name: 'MEditor',
+  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="inputScope"
+    />
+    <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>
+    <slot
+      name="help"
+      v-bind="inputScope"
+    >
+      <MHelpRow :text="help" />
+    </slot>
+    <component
+      :is="viewMode ? QField : QEditor"
+      ref="input"
+      :_definitions="{..._definitions,...pluginOptions.editor?.definitions}"
+      :fonts="fonts || _fonts"
+      :label="hasTopLabel ? undefined : getLabel"
+      :min-height="minHeight"
+      :model-value="value || ''"
+      :placeholder="getPlaceholder"
+      :toolbar="toolbar || _toolbar"
+      v-bind="{
+        ...pluginOptions.editor as any,
+        ...( viewMode ? pluginOptions.field : {} ),
+        ...$attrs,
+        ...( viewMode ? { stackLabel: !0 } : {} ),
+        dense: themeInput.dense !== undefined ? themeInput.dense : $q.screen.lt.lg
+      }"
+      v-on="listeners"
+    />
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="inputScope"
+    />
+    <MFadeXTransition>
+      <p
+        v-if="!!errorMessage"
+        class="text-body2 text-negative"
+      >
+        {{ errorMessage }}
+      </p>
+    </MFadeXTransition>
+  </MCol>
+</template>

package/src/components/form/MEmail.vue

@@ -0,0 +1,40 @@
+<!--
+  - 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'
+
+defineProps<Props>()
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const input = useTemplateRef<InstanceType<typeof MInput>>('input')
+defineExpose<{
+  input: typeof input
+}>({ input })
+defineOptions({
+  name: 'MEmail',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MInput
+    ref="input"
+    v-model="modelValue"
+    v-bind="{...$attrs,...$props,type:'email',email:!0}"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MInput>
+</template>

package/src/components/form/MField.vue

@@ -0,0 +1,142 @@
+<!--
+  - 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>