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

package/src/components/form/MSelect.vue

@@ -0,0 +1,352 @@
+<!--
+  - 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, toValue, useTemplateRef } 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 = useTemplateRef<InstanceType<typeof QSelect> | InstanceType<typeof QField>>('input')
+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,48 @@
+<!--
+  - 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/MToggle.vue

@@ -0,0 +1,211 @@
+<!--
+  - 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, toValue, useTemplateRef } from 'vue'
+import { useField } from 'vee-validate'
+import type { MToggleProps as Props } from '../../types'
+import { useBindInput, useMyth } from '../../composable'
+import { QToggle } from 'quasar'
+import { myth } from '../../utils'
+
+interface P {
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  val?: Props['val'];
+  name: Props['name'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  help?: Props['help'];
+  activeLabel?: Props['activeLabel'];
+  inactiveLabel?: Props['inactiveLabel'];
+  trueValue?: Props['trueValue'];
+  falseValue?: Props['falseValue'];
+  indeterminateValue?: Props['indeterminateValue'];
+  color?: Props['color'];
+  checkedIcon?: Props['checkedIcon'];
+  indeterminateIcon?: Props['indeterminateIcon'];
+  uncheckedIcon?: Props['uncheckedIcon'];
+  status?: Props['status'];
+  rules?: Props['rules'];
+  dense?: Props['dense'];
+  keepColor?: Props['keepColor'];
+  required?: Props['required'];
+  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,
+  val: undefined,
+  name: () => '',
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  help: undefined,
+  trueValue: !0,
+  falseValue: !1,
+  indeterminateValue: null,
+  color: () => 'primary',
+  checkedIcon: () => 'ion-checkmark',
+  uncheckedIcon: () => 'ion-close',
+  indeterminateIcon: () => 'ion-ios-code-working',
+  activeLabel: () => 'yes',
+  inactiveLabel: () => 'no',
+  status: () => !1,
+  rules: undefined,
+  dense: undefined,
+  keepColor: undefined,
+  required: undefined,
+  rowProps: undefined,
+  colProps: undefined,
+  viewMode: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'toggle', () => ({ choose: !0 }))
+const { getLabel: toggleLabel, inputRules, getProp } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: toggleLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange } = inputScope
+
+const listeners = {
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+
+const { __ } = useMyth()
+const { props: pluginOptions, themeInput } = myth
+const getLabel = computed<string | undefined>(() => {
+  const def = undefined
+  const v = value.value
+  if (v === props.trueValue) {
+    return __(props.status ? 'active' : props.activeLabel) as string || def
+  }
+  if (v === props.falseValue) {
+    return __(props.status ? 'inactive' : props.inactiveLabel) as string || def
+  }
+  return __('none') as string || def
+})
+
+const input = useTemplateRef<InstanceType<typeof QToggle>>('input')
+const scopes = reactive(inputScope)
+defineExpose({ input, ...scopes })
+defineOptions({
+  name: 'MToggle',
+  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
+        :field="scopes"
+        class="no-margin"
+      >
+        <MHelpRow
+          v-if="!!help"
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <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="{
+            ...pluginOptions.input as any,
+            ...pluginOptions.field,
+            ...$attrs,
+            borderless: !0,
+            outlined: !1,
+            dense: themeInput.dense !== undefined ? themeInput.dense : getProp('dense')
+          }"
+        >
+          <q-toggle
+            :disable="viewMode"
+            :false-value="falseValue"
+            :indeterminate-value="indeterminateValue"
+            :label="getLabel"
+            :model-value="value"
+            :true-value="trueValue"
+            v-bind="{
+              ...pluginOptions.toggle,
+              ...$attrs,
+              dense: themeInput.dense !== undefined ? themeInput.dense : getProp('dense'),
+              checkedIcon: getProp('checkedIcon'),
+              uncheckedIcon: getProp('uncheckedIcon'),
+              color: !!errorMessage ? 'negative' : getProp('color'),
+              indeterminateIcon: getProp('indeterminateIcon'),
+              keepColor: getProp('keepColor'),
+            }"
+            v-on="listeners"
+          >
+            <slot v-bind="scopes" />
+          </q-toggle>
+        </q-field>
+      </MCol>
+      <slot
+        name="after"
+        v-bind="scopes"
+      />
+    </MRow>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>