@mythpe/quasar-ui-qui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -222,9 +222,11 @@ const {
   fetchDatatableItems,
   exportData,
   openDialogTimeout,
+  beforeCloseFilterDialog,
   openFilterDialog,
   saveFilterDialog,
   closeFilterDialog,
+  filterDialogModel,
   onRemoveFilter,
   updateFilterOptions,
   openShowDialogNoIndex,
@@ -351,7 +353,7 @@ const onSuccess: SubmissionHandler = async (form) => {
   } catch (e: any) {
     const { _message, _errors } = e || {}
     dialogErrors.value = _errors || {}
-    scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
+    await scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
       useFormContext.setErrors(_errors)
@@ -854,13 +856,14 @@ defineExpose({
                   label="myth.datatable.hints.filter"
                   tooltip="myth.datatable.hints.filter"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
-                  @click="openFilterDialog()"
                 >
                   <MModalMenu
+                    v-model="filterDialogModel"
                     no-close-btn
                     persistent
                     position="top"
                     v-bind="pluginOptions.dt?.filterDialogProps as any"
+                    @before-show="beforeCloseFilterDialog"
                   >
                     <q-card
                       :style="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
@@ -1059,9 +1062,9 @@ defineExpose({
                       <span>
                         {{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}
                       </span>
-                      <span v-if="typeof filterValue === 'boolean'">: {{
-                        __(`labels.${filterValue ? 'yes' : 'no'}`)
-                      }}</span>
+                      <span v-if="typeof filterValue === 'boolean'">
+                        : {{ __(`labels.${filterValue ? 'yes' : 'no'}`) }}
+                      </span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
                       <span
                         v-else-if="Array.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
@@ -1072,6 +1075,7 @@ defineExpose({
                       <span
                         v-else-if="quasarHelpers.object(filterValue) && filterValue.label"
                       >: {{ filterValue.label }}</span>
+                      <span v-else-if="typeof filterValue === 'object'">:&nbsp;{{ Object.values(filterValue).join(' - ') }}</span>
                     </q-chip>
                   </MCol>
                 </template>

package/src/components/form/__MOptions.vue

@@ -0,0 +1,289 @@
+<!--
+  - 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 { computed, onMounted, reactive, toValue, useTemplateRef } from 'vue'
+import type { QField, QOptionGroupSlots } from 'quasar'
+import { QOptionGroup } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+
+interface 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'];
+  disable?: Props['disable'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  topLabel?: Props['topLabel'];
+  color?: Props['color'];
+  type?: Props['type'];
+  keepColor?: Props['keepColor'];
+  service?: Props['service'];
+  guest?: boolean;
+  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,
+  disable: undefined,
+  viewMode: !1,
+  viewModeValue: undefined,
+  topLabel: undefined,
+  color: 'primary',
+  type: 'radio',
+  keepColor: undefined,
+  guest: !1,
+  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, theme } = 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, __, props: pluginProps, api } = useMyth()
+const fetchData = async () => {
+  if (props.service) {
+    const s = props.service
+    loading.value = !0
+    try {
+      let method: any = null
+      if (typeof s === 'string' && s.includes('.')) {
+        const args = s.split('.')
+        do {
+          if (!method) {
+            method = api.value.services[args.shift() as any]
+          }
+          method = method[args.shift() as any]
+        }
+        while (args.length)
+      } else {
+        method = typeof s === 'function' ? s : (props.guest ? api.value.services[s].staticIndex : api.value.services[s].index)
+      }
+      if (method != null) {
+        const { _data } = await method()
+        options.value = _data as any
+      }
+    } catch (e: any) {
+      alertError(e?._message || e?.message || 'Failed to fetch data')
+    } finally {
+      loading.value = !1
+    }
+  }
+}
+const getOptions = computed(() => {
+  if (props.viewMode) {
+    return options.value.filter(e => e.value === value.value)
+  }
+  return options.value
+})
+onMounted(() => {
+  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"
+      >
+        <template #default>
+          <MHelpRow
+            v-if="!!help"
+            :text="help"
+            class="q-ml-lg"
+            tooltip
+          />
+          <template v-if="loading">
+            <div class="flex-break" />
+            <q-spinner-dots
+              class="q-mt-lg q-ml-lg"
+              color="primary"
+              size="22px"
+            />
+          </template>
+        </template>
+      </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>
+    <q-option-group
+      ref="input"
+      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :color="!!errorMessage ? 'negative' : getProp('color')"
+      :disable="disable"
+      :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
+      :option-disable="viewMode ? (v) => v.value !== value : undefined"
+      v-bind="{
+        ...$attrs,
+        ...theme,
+        ...pluginProps.options as any,
+        modelValue: value,
+        name: name,
+        options: getOptions,
+        type: type,
+        label: getLabel || undefined,
+      }"
+      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>
+    </q-option-group>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!getLabel && help"
+        :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>

package/src/components/modal/MModalMenu.vue

@@ -18,7 +18,17 @@ interface Props {
   position?: MModalMenuProps['position'];
 }
 
+const modelValue = defineModel<boolean>({ required: !1, default: undefined })
 const { props: pluginOptions, __ } = useMyth()
+
+type Emits = {
+  (e: 'beforeShow', evt?: Event): void;
+  (e: 'show', evt?: Event): void;
+  (e: 'beforeHide', evt?: Event): void;
+  (e: 'hide', evt?: Event): void;
+}
+const emit = defineEmits<Emits>()
+
 withDefaults(defineProps<Props>(), {
   noCloseBtn: () => !1,
   position: () => 'bottom'
@@ -31,6 +41,7 @@ defineOptions({
 
 <template>
   <q-popup-proxy
+    v-model="modelValue"
     :position="position"
     allow-focus-outside
     class="m--modal_menu"
@@ -39,6 +50,10 @@ defineOptions({
     no-shake
     persistent
     v-bind="{...pluginOptions.modalMenu,...$attrs}"
+    @hide="emit('hide', $event)"
+    @show="emit('show', $event)"
+    @before-show="emit('beforeShow',$event)"
+    @before-hide="emit('beforeHide',$event)"
   >
     <q-card v-bind="pluginOptions.modalMenuOptions?.card">
       <slot />

package/src/composable/useDtHelpers.ts

@@ -431,20 +431,30 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     resetDialogForm({ values: init || {} }, { force: !0 })
     attrs && setValues(attrs, !1)
   }
-  const openFilterDialog = () => {
+  const beforeShowFilterDialog = async () => {
     resetDialogForm({ values: {}, errors: {} }, { force: !0 })
-    nextTick(() => {
+    await nextTick(() => {
       tempFilterForm.value = { ...filterForm.value }
+    })
+  }
+  const beforeCloseFilterDialog = async () => {
+    tempFilterForm.value = { ...filterForm.value }
+  }
+  const openFilterDialog = async () => {
+    await beforeShowFilterDialog()
+    await nextTick(() => {
       filterDialogModel.value = !0
     })
   }
-  const saveFilterDialog = () => {
+  const saveFilterDialog = async () => {
     filterDialogModel.value = !1
-    nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
+    await nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
   }
-  const closeFilterDialog = () => {
+  const closeFilterDialog = async () => {
     filterDialogModel.value = !1
-    tempFilterForm.value = { ...filterForm.value }
+    await nextTick(() => {
+      beforeCloseFilterDialog()
+    })
   }
   const onRemoveFilter = (key: string | number) => {
     const filter = filterForm.value
@@ -926,6 +936,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     fetchDatatableItems,
     exportData,
     openDialogTimeout,
+    beforeCloseFilterDialog,
     openFilterDialog,
     saveFilterDialog,
     closeFilterDialog,

package/src/index.sass

@@ -5,9 +5,13 @@
 // Github: https://github.com/mythpe
 
 //@import 'quasar/src/css/variables.sass'
-@import './style/ckeditor5.sass'
-@import './style/m-container.sass'
-@import './style/m-dt.sass'
-@import './style/main.sass'
-@import './style/print.sass'
+@import './style/main'
+@import './style/ckeditor5'
+@import './style/m-container'
+@import './style/m-dt'
+@import './style/m-help-row'
+@import './style/m-input'
+@import './style/m-picker'
+@import './style/m-select'
+@import './style/print'
 @import './style/transition'

package/src/style/m-dt.sass

@@ -1,4 +1,4 @@
-
+$control-max-width: 200px !default
 $fixed-dt-height: 80vh !default
 
 .touch
@@ -74,3 +74,12 @@ $fixed-dt-height: 80vh !default
 
 .grid-style-transition
   transition: transform .28s, background-color .28s
+
+.screen--xs,
+.screen--sm
+  .m--dt-btn-tooltip
+    display: none
+
+.m--control-cell,
+.m--control-header
+  width: $control-max-width

package/src/style/m-help-row.sass

@@ -0,0 +1,4 @@
+$m-help-row-margin-top: 4px !default
+
+.m--help-row
+  margin-top: $m-help-row-margin-top

package/src/style/m-input.sass

@@ -0,0 +1,47 @@
+$m--input-helpers-margin: 5px !default
+$radius-value: $generic-border-radius !default
+
+[data-input-name].m--input__error
+  > .q-field
+    &:not(.q-field--disabled)
+      .q-field__label::after
+        color: var(--q-negative)
+
+  .m--input__top-label__content
+    color: var(--q-negative)
+
+
+[data-input-name].m--input__required
+  &:not(.m--input__is-top-label)
+    > .q-field
+      &:not(.q-field--disabled)
+        .q-field__label::after
+          content: ' *'
+
+  .m--input__top-label__content::after
+    content: ' *'
+    color: var(--q-negative)
+
+
+.m--input__color-preview
+  border: 1px solid var(--q-primary)
+  border-radius: $radius-value
+
+
+.m--input__top-label,
+.m--input__hint
+  margin-bottom: $m--input-helpers-margin
+
+.m--input__caption
+  margin-bottom: $m--input-helpers-margin
+  font-size: 0.75rem
+  font-weight: 400
+  line-height: 1.25rem
+  letter-spacing: 0.03333em
+
+.m--input
+  .m--sar-col
+    &__text
+      font-size: 18px
+      line-height: 16px
+      height: 15px

package/src/style/m-picker.sass

@@ -0,0 +1,7 @@
+.m--date__picker,
+.m--time__picker
+  .q-date__calendar-item
+    > div
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden

package/src/style/m-select.sass

@@ -0,0 +1,4 @@
+$m--select__popup-content: 300px !default
+
+.m--select__popup-content
+  max-height: $m--select__popup-content

package/src/style/main.sass

@@ -1,7 +1,6 @@
 @use 'sass:map'
 
 $m--row-margin-top: 1rem !default
-$m--input-helpers-margin: 5px !default
 
 // Flex.
 .flex-break
@@ -86,7 +85,6 @@ $bordered-style: $bordered-size solid var(--q-primary) !default
 .#{$bordered-class-name}
   border: $bordered-style
 
-
 @each $x in $alignsX
   .bordered-#{$x}
     border-#{$x}: $bordered-style
@@ -109,87 +107,15 @@ $bordered-style: $bordered-size solid var(--q-primary) !default
     .bordered-#{$y}
       border-#{$y}: $bordered-style
 
+
 .pre-text
   white-space-collapse: preserve-breaks
   white-space: pre-line
 
+
 pre
   max-width: 100%
 
-[data-input-name].m--input__error
-  > .q-field
-    &:not(.q-field--disabled)
-      .q-field__label::after
-        color: var(--q-negative)
-
-  .m--input__top-label__content
-    color: var(--q-negative)
-
-
-[data-input-name].m--input__required
-  &:not(.m--input__is-top-label)
-    > .q-field
-      &:not(.q-field--disabled)
-        .q-field__label::after
-          content: ' *'
-
-  .m--input__top-label__content::after
-    content: ' *'
-    color: var(--q-negative)
-
-.m--input__color-preview
-  border: 1px solid var(--q-primary)
-  border-radius: $radius-value
-
-
 .m--confirm.actions-between
   .q-card__actions
     justify-content: space-between !important
-
-.m--input__top-label,
-.m--input__hint
-  margin-bottom: $m--input-helpers-margin
-
-
-.m--input__caption
-  margin-bottom: $m--input-helpers-margin
-  font-size: 0.75rem
-  font-weight: 400
-  line-height: 1.25rem
-  letter-spacing: 0.03333em
-
-$control-max-width: 200px !default
-
-.m--control-cell,
-.m--control-header
-  width: $control-max-width
-
-.screen--xs,
-.screen--sm
-  .m--dt-btn-tooltip
-    display: none
-
-$m-help-row-margin-top: 4px !default
-
-.m--help-row
-  margin-top: $m-help-row-margin-top
-
-$m--select__popup-content: 300px !default
-
-.m--select__popup-content
-  max-height: $m--select__popup-content
-
-.m--input
-  .m--sar-col
-    &__text
-      font-size: 18px
-      line-height: 16px
-      height: 15px
-
-.m--date__picker,
-.m--time__picker
-  .q-date__calendar-item
-    > div
-      text-overflow: ellipsis
-      white-space: nowrap
-      overflow: hidden