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

package/src/components/form/MPicker.vue

@@ -0,0 +1,310 @@
+<!--
+  - 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, reactive, ref, toValue, useTemplateRef } from 'vue'
+import type { MPickerProps as Props } from '../../types'
+import { useBindInput, useMyth } from '../../composable'
+import { useField } from 'vee-validate'
+import { QDate, QField, QFieldSlots, QTime } from 'quasar'
+import { myth } from '../../utils'
+
+const defSeparator = ' - '
+const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
+  name: '',
+  type: undefined,
+  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,
+  landscape: undefined,
+  flat: undefined,
+  bordered: undefined,
+  yearsInMonthView: undefined,
+  noUnset: undefined,
+  todayBtn: undefined,
+  minimal: undefined,
+  multiple: undefined,
+  range: undefined,
+  emitImmediately: undefined,
+  format24h: undefined,
+  withSeconds: undefined,
+  nowBtn: undefined,
+  useChoice: undefined
+})
+
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<Props>(() => props, 'picker', () => ({ choose: !0 }))
+const { hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
+const { __ } = useMyth()
+const options = computed(() => myth.props.value)
+const theme = computed(() => myth.themeInput)
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const scopes = reactive(inputScope)
+const { value, errorMessage, handleChange } = inputScope
+
+const isDate = computed(() => props.type !== 'time')
+// const mask = computed(() => {
+//   if (props.range || props.multiple) {
+//     return undefined
+//     // return isDate.value ? '####/##/## - ####-##-##' : '##:## - ##:##'
+//   }
+//   return isDate.value ? '####/##/##' : '##:##'
+// })
+const format = computed(() => isDate.value ? 'YYYY/MM/DD' : 'HH:mm')
+const dateRef = ref<string | null>(null)
+const onBeforeShow = () => {
+  dateRef.value = value.value || null
+}
+const onBeforeHide = () => {
+  dateRef.value = null
+}
+const saveDialog = () => {
+  let newVal: any = dateRef.value
+  if (typeof newVal === 'object' && isDate.value) {
+    const values: any[] = Object.values(newVal)
+    for (const aKey in values) {
+      if (typeof values[aKey] === 'object') {
+        values[aKey] = Object.values(values[aKey])
+      }
+    }
+    newVal = values
+  }
+  handleChange(newVal, !!errorMessage.value)
+}
+
+const dateElm = useTemplateRef<InstanceType<typeof QDate>>('dateElm')
+const timeElm = useTemplateRef<InstanceType<typeof QTime>>('timeElm')
+defineExpose<{ input: typeof dateElm | typeof timeElm }>({ input: isDate.value ? dateElm : timeElm })
+defineOptions({ name: 'MPicker', 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>
+    <q-field
+      ref="input"
+      v-model="value"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hint="__(hint)"
+      :label="hasTopLabel ? undefined : getLabel"
+      v-bind="{
+        ...options.input as any,
+        ...options.field as any,
+        ...theme,
+        ...$attrs,
+        autocomplete:getAutocompleteAttribute,
+        stackLabel: !0
+      }"
+    >
+      <template #control>
+        <slot name="control">
+          <div
+            v-if="!disable && !readonly && !viewMode && !!getPlaceholder && !value"
+            class="q-placeholder"
+          >
+            {{ getPlaceholder }}
+          </div>
+          <template v-else-if="viewMode && viewModeValue">
+            <div>{{ viewModeValue?.toString() }}</div>
+          </template>
+          <template v-else>
+            <div>
+              <template v-if="value && Array.isArray(value)">
+                {{ value.join(rangeSeparator || options.picker?.rangeSeparator || defSeparator) }}
+              </template>
+              <template v-else>
+                {{ value?.toString() }}
+              </template>
+            </div>
+          </template>
+        </slot>
+      </template>
+      <template #append>
+        <q-btn
+          v-if="!disable && !readonly && !viewMode"
+          :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
+          flat
+          round
+          v-bind="{...options?.pickerBtn, ...btnProps}"
+        >
+          <q-popup-proxy
+            cover
+            no-shake
+            persistent
+            transition-hide="jump-down"
+            transition-show="jump-up"
+            @before-show="onBeforeShow()"
+            @before-hide="onBeforeHide()"
+          >
+            <q-card>
+              <q-date
+                v-if="isDate"
+                ref="dateElm"
+                v-bind="{
+                  ...options.date as any,
+                  ...props,
+                  ...$attrs,
+                  todayBtn: getProp('todayBtn') === undefined ? !0 : getProp('todayBtn'),
+                  mask:format,
+                  multiple,
+                  range,
+                  modelValue: dateRef ?? null
+                }"
+                @update:model-value="dateRef = $event ?? null"
+              >
+                <template #default>
+                  <div class="row items-center justify-end">
+                    <MBtn
+                      v-close-popup
+                      :label="__('close')"
+                      color="negative"
+                      flat
+                    />
+                    <MBtn
+                      v-close-popup
+                      :label="__('save')"
+                      flat
+                      @click="saveDialog()"
+                    />
+                  </div>
+                </template>
+              </q-date>
+              <q-time
+                v-else
+                ref="timeElm"
+                v-bind="{
+                  ...$props,
+                  ...options.time,
+                  ...$attrs,
+                  mask:format,
+                  nowBtn: getProp('nowBtn') === undefined? !0 : getProp('nowBtn'),
+                  modelValue: dateRef ?? null
+                }"
+                @update:model-value="dateRef = $event ?? null"
+              >
+                <div class="row items-center justify-end">
+                  <MBtn
+                    v-close-popup
+                    :label="__('close')"
+                    color="negative"
+                    flat
+                  />
+                  <MBtn
+                    v-close-popup
+                    :label="__('save')"
+                    flat
+                    @click="saveDialog()"
+                  />
+                </div>
+              </q-time>
+            </q-card>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+
+      <template
+        v-for="(_,slot) in $slots as Readonly<QFieldSlots>"
+        :key="slot"
+        #[slot]
+      >
+        <slot :name="slot" />
+      </template>
+    </q-field>
+    <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/MRadio.vue

@@ -0,0 +1,175 @@
+<!--
+  - 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 { defineProps, reactive, ref, toValue } from 'vue'
+import { useBindInput, useMyth } from '../../composable'
+import type { MRadioProps as Props } from '../../types'
+import { QField, QRadio } from 'quasar'
+import { myth } from '../../utils'
+
+type P = {
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  name: Props['name'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  help?: Props['help'];
+  val: Props['val'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  dense?: Props['dense'];
+  checkedIcon?: Props['checkedIcon'];
+  rowProps?: Props['rowProps'];
+  colProps?: Props['colProps'];
+  viewMode?: Props['viewMode'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  name: () => '',
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  help: undefined,
+  val: undefined,
+  required: undefined,
+  rules: undefined,
+  dense: undefined,
+  checkedIcon: undefined,
+  rowProps: undefined,
+  colProps: undefined,
+  viewMode: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'radio')
+const { getLabel, inputRules, attrs, getProp } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  type: 'radio',
+  checkedValue: () => props.val,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange } = inputScope
+const { __ } = useMyth()
+const { props: options } = myth
+const listeners = {
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = ref<InstanceType<typeof QRadio> | null>(null)
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({ name: 'MRadio', 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="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption text-caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <MRow v-bind="rowProps">
+      <slot
+        name="before"
+        v-bind="scopes"
+      />
+      <MCol v-bind="colProps">
+        <q-field
+          :error="!!errorMessage"
+          :error-message="errorMessage"
+          :hint="__(hint)"
+          v-bind="{
+            ...options.input as any,
+            ...options.field,
+            ...$attrs,
+            ...myth.themeInput,
+            borderless: !0,
+            outlined: !1,
+            stackLabel: !0
+          }"
+        >
+          <template #control>
+            <q-radio
+              ref="input"
+              :disable="viewMode"
+              :model-value="value"
+              :val="val"
+              v-bind="{
+                ...options.radio,
+                ...$attrs,
+                dense: attrs.dense,
+                checkedIcon: getProp('checkedIcon'),
+                label: undefined
+              }"
+              v-on="listeners"
+            >
+              <template #default>
+                <MRow class="items-center">
+                  <div
+                    v-if="!!getLabel"
+                    class="text-color"
+                  >
+                    {{ getLabel }}
+                  </div>
+                  <MHelpRow
+                    v-if="!!help"
+                    :right="!!getLabel"
+                    :text="help"
+                    tooltip
+                  />
+                </MRow>
+              </template>
+            </q-radio>
+          </template>
+        </q-field>
+        <slot v-bind="scopes" />
+      </MCol>
+      <slot
+        name="after"
+        v-bind="scopes"
+      />
+    </MRow>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>