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

package/src/components/form/MSelect.vue

@@ -0,0 +1,343 @@
+<!--
+  - 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 { MSelectProps as Props } from '../../types'
+import { computed, reactive, ref, toValue } from 'vue'
+import { useBindInput, useMyth } from '../../composable'
+import { QField, QSelect, type QSelectSlots } from 'quasar'
+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'];
+  stackLabel?: Props['stackLabel'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  autocomplete?: Props['autocomplete'];
+  topLabel?: Props['topLabel'];
+  behavior?: Props['behavior'];
+  emitValue?: Props['emitValue'];
+  useInput?: Props['useInput'];
+  mapOptions?: Props['mapOptions'];
+  loading?: Props['loading'];
+  multiple?: Props['multiple'];
+  options?: Props['options'];
+  optionLabel?: Props['optionLabel'];
+  optionValue?: Props['optionValue'];
+  noFilter?: Props['noFilter'];
+  hideEmptyList?: Props['hideEmptyList'];
+  readonly?: Props['readonly'];
+  useChips?: Props['useChips'];
+  searchLength?: Props['searchLength'];
+  axiosMode?: Props['axiosMode'];
+  hideSelected?: Props['hideSelected'];
+  onFilter?: Props['onFilter'];
+  fieldOptions?: Props['fieldOptions'];
+  clearable?: Props['clearable'];
+  useChoice?: Props['useChoice'];
+}
+
+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,
+  stackLabel: undefined,
+  required: undefined,
+  rules: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
+  autocomplete: undefined,
+  topLabel: undefined,
+  behavior: undefined,
+  emitValue: () => !0,
+  useInput: () => !0,
+  mapOptions: () => !0,
+  loading: undefined,
+  multiple: undefined,
+  options: () => ([]),
+  optionLabel: () => 'label',
+  optionValue: () => 'value',
+  noFilter: undefined,
+  hideEmptyList: undefined,
+  readonly: undefined,
+  useChips: undefined,
+  searchLength: () => 1,
+  axiosMode: undefined,
+  hideSelected: undefined,
+  onFilter: undefined,
+  fieldOptions: undefined,
+  clearable: undefined,
+  useChoice: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+
+type Emits = {
+  (e: 'model', value: { value: any; model: object | null }): void;
+}
+const emit = defineEmits<Emits>()
+
+const { __ } = useMyth()
+const { props: pluginOptions, themeInput } = myth
+const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
+const { hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, 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 minLength = computed(() => parseInt(props.searchLength?.toString()))
+const search = defineModel<string>('search', { required: !1, default: '' })
+const getOptions = computed(() => {
+  if (!props.axiosMode && !props.noFilter && search.value?.length >= minLength.value) {
+    return props.options.filter((v: any) => {
+      if (typeof v !== 'object') {
+        return v.toString().toLowerCase().indexOf(search.value) > -1
+      }
+      let labelKey = 'label'
+      if (props.optionLabel) {
+        labelKey = typeof props.optionLabel === 'function' ? props.optionLabel(v) : props.optionLabel
+      }
+      let valueKey = 'value'
+      if (props.optionValue) {
+        valueKey = typeof props.optionValue === 'function' ? props.optionValue(v) : props.optionValue
+      }
+      return v[labelKey]?.toString().toLowerCase().indexOf(search.value) > -1 || v[valueKey]?.toString().toLowerCase().indexOf(search.value) > -1
+    })
+  }
+  return props.options
+})
+const filterFn: Props['onFilter'] = (val: string, update, abortFn) => {
+  if (props.onFilter) {
+    return props.onFilter(val, update, abortFn)
+  }
+  update(() => void 0)
+}
+const onDoneOptions = () => {
+  const e = input.value as QSelect
+  e?.updateInputValue('', !0)
+  e?.hidePopup()
+}
+const listeners = {
+  blur: (v: any) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => {
+    handleChange(v, !!errorMessage.value)
+    if (!props.emitValue) {
+      emit('model', { value: v, model: v })
+    } else {
+      const k = typeof props.optionValue === 'function' ? props.optionValue(v) : props.optionValue
+      const model = props.options.find(e => e[k] === v)
+      emit('model', { value: v, model: model ?? null })
+    }
+  },
+  inputValue: (v: string) => (search.value = v?.toString() || ''),
+  filter: filterFn
+}
+const input = ref<InstanceType<typeof QSelect | typeof QField> | null>(null)
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input, onDoneOptions: typeof onDoneOptions }>({ input, ...scopes, onDoneOptions })
+defineOptions({ name: 'MSelect', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__is-top-label':hasTopLabel,'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 : QSelect"
+      ref="input"
+      :behavior="$q.platform.is.ios === !0 ? 'dialog' : behavior"
+      :emit-value="emitValue"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hide-selected="hideSelected !== undefined ? hideSelected : search.length > 0"
+      :hint="__(hint)"
+      :label="viewMode && hasTopLabel ? undefined : (loading ? undefined : getPlaceholder)"
+      :model-value="value"
+      :option-label="optionLabel"
+      :option-value="optionValue"
+      :options="getOptions"
+      :readonly="readonly"
+      v-bind="{
+        ...pluginOptions.select as any,
+        ...( viewMode ? pluginOptions.field : {} ),
+        ...$attrs,
+        ...(viewMode ? { stackLabel: !0 } : { stackLabel: hasTopLabel ? !1 : (
+          themeInput.dense !== undefined ? themeInput.dense : getProp('dense')
+        ) } ),
+        useChips: getProp('useChips') === !0 && !multiple ? !1 : getProp('useChips'),
+        multiple,
+        mapOptions,
+        loading,
+        useInput,
+        autocomplete:getAutocompleteAttribute,
+        clearable: viewMode ? !1 : clearable
+      }"
+      v-on="listeners"
+    >
+      <template
+        v-if="!hideEmptyList"
+        #no-option
+      >
+        <slot name="no-option">
+          <q-item :dense="themeInput.dense !== undefined ? themeInput.dense : getProp('optionsDense')">
+            <q-item-section side>
+              <template v-if="loading">
+                <q-spinner color="primary" />
+              </template>
+              <template v-else-if="search?.length > 0">
+                <q-icon
+                  color="warning"
+                  name="ion-ios-warning"
+                />
+              </template>
+              <template v-else-if="!search?.length">
+                <q-icon name="ion-ios-search" />
+              </template>
+              <template v-else>
+                <q-icon name="ion-ios-information-circle-outline" />
+              </template>
+            </q-item-section>
+            <q-item-section>
+              <template v-if="loading">
+                <q-skeleton
+                  type="text"
+                  width="70%"
+                />
+                <q-skeleton
+                  type="text"
+                  width="50%"
+                />
+              </template>
+              <template v-else-if="!search?.length && useInput">
+                {{ __('myth.select.typeToSearch') }}
+              </template>
+              <template v-else-if="search?.length > 0">
+                {{ __('myth.select.noResult') }}
+              </template>
+              <template v-else>
+                {{ __('myth.select.noData') }}
+              </template>
+            </q-item-section>
+          </q-item>
+        </slot>
+      </template>
+      <template
+        v-if="loading"
+        #selected
+      >
+        <q-skeleton width="60%" />
+      </template>
+      <template
+        v-if="multiple"
+        #before-options
+      >
+        <MContainer>
+          <MRow class="items-center">
+            <MBtn
+              :label="__('done')"
+              flat
+              @click="onDoneOptions()"
+            />
+          </MRow>
+        </MContainer>
+      </template>
+
+      <template
+        v-for="(_,slot) in $slots as Readonly<QSelectSlots>"
+        :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="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/MTime.vue

@@ -0,0 +1,45 @@
+<!--
+  - 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 { MInputSlots, MTimeProps as Props } 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: 'MTime',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MPicker
+    ref="input"
+    v-model="modelValue"
+    v-bind="{...$attrs,type:'time',name}"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MPicker>
+</template>

package/src/components/form/index.ts

@@ -0,0 +1,51 @@
+/*
+ * 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
+ */
+
+import MAvatarViewer from './MAvatarViewer.vue'
+import MBtn from './MBtn.vue'
+import MCheckbox from './MCheckbox.vue'
+import MColor from './MColor.vue'
+import MDate from './MDate.vue'
+import MEditor from './MEditor.vue'
+import MEmail from './MEmail.vue'
+import MField from './MField.vue'
+import MFile from './MFile.vue'
+import MForm from './MForm.vue'
+import MHidden from './MHidden.vue'
+import MHiddenInput from './MHiddenInput.vue'
+import MInput from './MInput.vue'
+import MInputFieldControl from './MInputFieldControl.vue'
+import MInputLabel from './MInputLabel.vue'
+import MMobile from './MMobile.vue'
+import MPicker from './MPicker.vue'
+import MRadio from './MRadio.vue'
+import MSelect from './MSelect.vue'
+import MTime from './MTime.vue'
+
+export {
+  MAvatarViewer,
+  MBtn,
+  MCheckbox,
+  MColor,
+  MDate,
+  MEditor,
+  MField,
+  MFile,
+  MForm,
+  MHidden,
+  MHiddenInput,
+  MEmail,
+  MInput,
+  MInputFieldControl,
+  MInputLabel,
+  MMobile,
+  MPicker,
+  MRadio,
+  MSelect,
+  MTime
+}

package/src/components/grid/MBlock.vue

@@ -1,22 +1,43 @@
-<script lang="ts" setup>
-import type { MBlockProps } from '../../types'
-import { computed } from 'vue'
-import MythOptions from '../../myth'
-import { extend } from 'quasar'
+<!--
+  - 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
+  -->
 
-interface Props {
-  size?: MBlockProps['size'];
-  rounded?: MBlockProps['rounded'];
-  shadow?: MBlockProps['shadow'];
-}
+<script
+  lang="ts"
+  setup
+>
+import type { MBlockProps as Props } from '../../types'
+import { computed } from 'vue'
+import { myth } from '../../utils'
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  rounded: !1,
-  shadow: 'none'
+  size: undefined,
+  rounded: undefined,
+  shadow: undefined
+})
+const getSize = computed(() => {
+  if (props.size !== undefined) {
+    return props.size
+  }
+  return myth.props.value.block?.size || myth.size.value
 })
-const block = computed(() => MythOptions.options.value.block ?? {})
-const options = computed<Props>(() => extend(!0, { ...props }, block.value))
+const getRounded = computed(() => {
+  if (props.rounded !== undefined) {
+    return props.rounded
+  }
+  return myth.props.value.block?.rounded || myth.rounded.value
+})
+const getShadow = computed(() => {
+  if (props.shadow !== undefined) {
+    return props.shadow
+  }
+  return myth.props.value.block?.shadow || myth.shadow.value
+})
+
 defineOptions({
   name: 'MBlock',
   inheritAttrs: !1
@@ -27,12 +48,13 @@ defineOptions({
   <div
     :class="{
       'm---block' : !0,
-      [`q-pa-${options.size}`] : options.size && options.size !== 'none',
-      'rounded-borders' : options.rounded === !0,
-      [`shadow-${options.shadow}`] : options.shadow && options.shadow !== 'none'
+      [`q-pa-${getSize}`] : getSize && getSize !== 'none',
+      'rounded-borders' : getRounded === !0,
+      [`shadow-${getShadow||''}`] : getShadow && getShadow !== 'none'
     }"
     v-bind="$attrs"
   >
+    {{ getRounded }}
     <slot />
   </div>
 </template>

package/src/components/grid/MCol.vue

@@ -1,21 +1,18 @@
+<!--
+  - 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 } from 'vue'
 import { uniq } from 'lodash'
-import type { MColProps } from '../../types'
-
-interface Props {
-  name?: MColProps['name']
-  auto?: MColProps['auto']
-  col?: MColProps['col']
-  xs?: MColProps['xs']
-  sm?: MColProps['sm']
-  md?: MColProps['md']
-  lg?: MColProps['lg']
-  xl?: MColProps['xl']
-}
+import type { MColProps as Props } from '../../types'
 
 const props = defineProps<Props>()
 const classes = computed(() => {
@@ -45,8 +42,8 @@ const classes = computed(() => {
     list.push('col')
   }
   return uniq(list)
-  // return list
 })
+
 defineOptions({
   name: 'MCol',
   inheritAttrs: !1
@@ -56,8 +53,7 @@ defineOptions({
 <template>
   <div
     :class="classes"
-    :data-input-name="name??undefined"
-    v-bind="$attrs"
+    v-bind="{...$attrs,':data-input-name': name??undefined}"
   >
     <slot />
   </div>

package/src/components/grid/MColumn.vue

@@ -1,3 +1,11 @@
+<!--
+  - 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: 'MColumn',

package/src/components/grid/MContainer.vue

@@ -6,24 +6,33 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import type { MContainerProps } from '../../types'
-import MythOptions from '../../myth'
+import { myth } from '../../utils'
 import { computed } from 'vue'
 
-interface Props {
-  size?: MContainerProps['size'];
-  fluid?: MContainerProps['fluid'];
-  dense?: MContainerProps['dense'];
-}
-
-const props = defineProps<Props>()
-const styles = computed(() => MythOptions.options.value?.style ?? {})
+const props = withDefaults(defineProps<MContainerProps>(), {
+  size: undefined,
+  dense: !1,
+  fluid: undefined
+})
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size
   }
-  return styles.value.gutters
+  if (myth.props.value.container?.size !== undefined) {
+    return myth.props.value.container?.size
+  }
+  return myth.size.value
+})
+const fluidProp = computed(() => {
+  if (props.fluid !== undefined) {
+    return props.fluid
+  }
+  return myth.fluid.value === !0
 })
 defineOptions({
   name: 'MContainer',
@@ -35,8 +44,8 @@ defineOptions({
   <div
     :class="{
       'm--container' : !0,
-      'm--container__fluid' : (fluid !== !1 && fluid !== undefined) || (styles.fluid === !0 && (fluid !== !1 && fluid !== undefined)),
-      'm--container__dense' : dense !== !1 && dense !== undefined,
+      'm--container__fluid' : fluidProp === !0,
+      'm--container__dense' : dense === !0,
       [`q-pa-${sizeProp||''}`]: sizeProp && sizeProp !== 'none'
     }"
     v-bind="$attrs"

package/src/components/grid/MHelpRow.vue

@@ -10,17 +10,11 @@
   lang="ts"
   setup
 >
-import { useI18n } from 'vue-i18n'
+import { useMyth } from '../../composable'
+import type { MHelpRowProps } from '../../types'
 
-interface Props {
-  text?: string | undefined;
-  icon?: string | undefined;
-  tooltip?: boolean | undefined;
-}
-
-defineProps<Props>()
-const { t, te } = useI18n({ useScope: 'global' })
-const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
+defineProps<MHelpRowProps>()
+const { __ } = useMyth()
 defineOptions({
   name: 'MHelpRow',
   inheritAttrs: !1
@@ -28,11 +22,14 @@ defineOptions({
 </script>
 
 <template>
-  <div class="row">
+  <div
+    v-if="text || tooltip"
+    class="row"
+  >
     <div class="col-auto">
       <q-icon
+        :class="{'cursor-pointer': !!tooltip}"
         :left="!!text && !tooltip"
-        class="cursor-pointer"
         name="ion-ios-information-circle-outline"
         size="19px"
       >