@mythpe/quasar-ui-qui 0.4.97 → 0.4.99

package/package.json

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

package/src/boot/register.ts

@@ -10,5 +10,5 @@ import { boot } from 'quasar/wrappers'
 import { install } from '../utils'
 
 export default boot(({ app }) => {
-  app.use(install)
+  app.use(install, {} as any)
 })

package/src/components/datatable/MDatatable.vue

@@ -232,7 +232,7 @@ const $q = useQuasar()
 const $router = useRouter()
 const { te } = useI18n({ useScope: 'global' })
 const useFormContext = useForm<any, any>()
-const { resetForm: resetDialogForm, handleSubmit } = useFormContext
+const { resetForm: resetDialogForm, handleSubmit, errors, meta } = useFormContext
 
 const {
   onRowContextmenu,
@@ -254,6 +254,7 @@ const {
   dialogErrors,
   setDialogErrors,
   resetDialogs,
+  resetVeeForm,
   getHeaders,
   getSortedHeaders,
   arrangementColumns,
@@ -417,6 +418,7 @@ const onSuccess: SubmissionHandler = async (form) => {
       if (isUpdateMode.value) {
         if (_data) {
           updateDatatableItem(_data as any, dialogItemIndex.value)
+          resetVeeForm(_data)
         }
         emit('update', response)
         if (!props.noUpdateClose && !props.noAutoClose) {
@@ -495,9 +497,17 @@ watch(loading, v => {
 watch([filterForm, () => $q.lang.nativeName], () => refreshNoUpdate(), { deep: !0 })
 watch(formDialogModel, (v) => {
   if (!v) {
+    const keys = { ...dialogErrors.value, ...errors.value }
+    for (const k in keys) {
+      useFormContext.setFieldError(k, undefined)
+      useFormContext.setFieldTouched(k, !1)
+    }
     dialogErrors.value = {}
   }
 })
+watch(dialogErrors, (v) => {
+  useFormContext.setErrors(v || {})
+}, { deep: !0 })
 const table = ref<InstanceType<typeof QTable>>()
 const mainAttrs = computed(() => ({
   title: getTableTitle.value,
@@ -557,6 +567,7 @@ defineOptions({
 defineExpose({
   formContext: useFormContext,
   resetDialogs,
+  resetVeeForm,
   tableOptions,
   getMythApiServicesSchema,
   updateSelectedItems,
@@ -1691,8 +1702,10 @@ defineExpose({
                 >
                   <MBtn
                     :class="{'full-width': $q.screen.xs}"
+                    :disable="isUpdateMode ? (!meta.dirty && !meta.touched) || (!meta.dirty && meta.touched) : false"
                     :label="__(`myth.titles.${isUpdateMode ? 'save' : 'store'}`)"
                     :loading="loading"
+                    style="min-width: 120px"
                     type="submit"
                     v-bind="pluginOptions.dt?.dialogButtonsProps"
                   />
@@ -1702,6 +1715,7 @@ defineExpose({
                   :disable="loading"
                   label="myth.titles.close"
                   outline
+                  style="min-width: 120px"
                   text-color="body"
                   v-bind="pluginOptions.dt?.dialogButtonsProps"
                   @click="closeFormDialog"

package/src/components/form/MAvatarViewer.vue

@@ -241,7 +241,7 @@ defineOptions({
         <MRow
           v-if="label !== undefined"
           key="label"
-          class="items-center q-mb-md"
+          class="items-center q-mb-sm"
         >
           <q-skeleton
             v-if="loading"
@@ -261,6 +261,7 @@ defineOptions({
           <MHelpRow
             v-if="!!help && !loading"
             :text="help"
+            style="margin-top: 0"
             tooltip
           />
         </MRow>
@@ -316,6 +317,12 @@ defineOptions({
               class="text-white text-h3"
               v-text="getAvatarText"
             />
+            <div v-else>
+              <q-icon
+                :name="`ion-ios-${readonly ? 'aperture' : 'cloud-upload'}`"
+                color="primary"
+              />
+            </div>
           </q-avatar>
         </MTransition>
       </div>

package/src/components/form/MInput.vue

@@ -166,7 +166,7 @@ defineOptions({
         <MHelpRow
           v-if="!!help"
           :text="help"
-          class="q-ml-md"
+          class="q-ml-sm"
           tooltip
         />
       </MInputLabel>

package/src/components/form/MOptions.vue

@@ -255,13 +255,13 @@ defineOptions({
           <MHelpRow
             v-if="!!help"
             :text="help"
-            class="q-ml-lg"
+            class="q-ml-sm"
             tooltip
           />
           <template v-if="loading">
             <div class="flex-break" />
             <q-spinner-dots
-              class="q-mt-lg q-ml-lg"
+              class="q-mt-lg q-ml-sm"
               color="primary"
               size="25px"
             />

package/src/components/form/MPicker.vue

@@ -200,6 +200,7 @@ defineOptions({
       >
         <MHelpRow
           v-if="!!help"
+          class="q-ml-sm"
           :text="help"
           tooltip
         />

package/src/components/form/MSelect.vue

@@ -261,6 +261,7 @@ defineOptions({
         <MHelpRow
           v-if="!!help"
           :text="help"
+          class="q-ml-sm"
           tooltip
         />
       </MInputLabel>

package/src/components/form/MToggle.vue

@@ -169,6 +169,7 @@ defineOptions({
         <MHelpRow
           v-if="!!help"
           :text="help"
+          class="q-ml-sm"
           tooltip
         />
       </MInputLabel>

package/src/components/form/MUploader.vue

@@ -365,15 +365,15 @@ defineOptions({
           <div class="col">
             <div
               v-if="!!label"
-              class="q-uploader__title"
+              class="q-uploader__title text-large"
             >
               {{ __(label) }}
             </div>
             <div
-              v-if="!readonly"
+              v-if="!readonly && (scope.uploadSizeLabel !== '0.0B' && scope.uploadProgressLabel !== '0.00%')"
               class="q-uploader__subtitle"
             >
-              {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+              {{ scope.uploadSizeLabel }} • {{ scope.uploadProgressLabel }}
             </div>
           </div>
           <template v-if="!readonly">
@@ -472,8 +472,8 @@ defineOptions({
         </MRow>
         <q-list
           v-else
-          :class="{'row': displayMode === 'card','q-gutter-sm': displayMode === 'card'}"
-          :separator="displayMode === 'list' ? !0 : undefined"
+          :class="{'row q-gutter-sm': displayMode === 'card' && !$q.screen.xs}"
+          :separator="displayMode === 'list' || $q.screen.xs ? !0 : undefined"
         >
           <template
             v-for="(file,i) in scope.files"
@@ -508,6 +508,7 @@ defineOptions({
             >
               <MUploaderItem
                 :audio-props="audioProps"
+                :class="{'q-mb-sm': $q.screen.xs}"
                 :collection="collection"
                 :default-file-icon="defaultFileIcon"
                 :delete-media-icon="deleteMediaIcon"

package/src/components/parials/MUploaderItem.vue

@@ -61,7 +61,7 @@ const props = withDefaults(defineProps<P>(), {
   defaultFileIcon: undefined,
   deleteMediaIcon: undefined,
   downloadFileIcon: undefined,
-  mediaLabel: () => '',
+  mediaLabel: undefined,
   ratio: 16 / 9,
   videoProps: undefined,
   audioProps: undefined
@@ -83,7 +83,7 @@ const emit = defineEmits<Emits>()
 
 const q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })
-const { alertError, alertSuccess, confirmMessage, __, props: pluginOptions, api: mApi } = useMyth()
+const { alertError, alertSuccess, confirmMessage, __, props: pluginOptions, api: mApi, ucFirst } = useMyth()
 const api = computed(() => mApi.value.services)
 const setModelValue = (value: Props['modelValue']) => emit('values', value)
 const deleting = ref(!1)
@@ -199,7 +199,7 @@ defineOptions({
       />
     </q-item-section>
     <q-item-section :class="{'overflow-hidden': displayMode === 'card'}">
-      <q-item-label v-if="!!mediaProp[mediaLabel]">
+      <q-item-label v-if="mediaLabel && !!mediaProp[mediaLabel]">
         {{ mediaProp[mediaLabel] }}
         <q-icon
           v-if="updateBtn"
@@ -274,8 +274,9 @@ defineOptions({
         caption
         class="print-hide"
       >
-        <span v-if="!!mediaProp.size_to_string">{{ mediaProp.size_to_string }} | {{ modelValue.type_to_string || modelValue.type }}</span>
-        <span v-if="modelValue.__sizeLabel">{{ modelValue.__sizeLabel }} / {{ modelValue.__progressLabel }}</span>
+        <span v-if="!!mediaProp.size_to_string && modelValue.type_to_string">{{ mediaProp.size_to_string }} • {{ modelValue.type_to_string }}</span>
+        <span v-else-if="!!mediaProp.size_to_string">{{ mediaProp.size_to_string }}</span>
+        <span v-if="modelValue.__sizeLabel">{{ modelValue.__sizeLabel }} • {{ modelValue.__progressLabel }}</span>
       </q-item-label>
       <q-item-label
         v-if="(mediaProp.id && mediaProp.url) || (!hideDeleteMedia || (hideDeleteMedia && !mediaProp.id))"

package/src/components/sar/MSarIcon.vue

@@ -7,17 +7,9 @@
   -->
 
 <script lang="ts" setup>
-import type { QIconProps } from 'quasar'
-import { computed } from 'vue'
 
-type Props = QIconProps
-const noDefault = defineModel<boolean>('noDefault', { required: !1, default: !1 })
-const props = defineProps<Props>()
-const getSize = computed<any>(() => ({
-  size: noDefault.value ? props.size : (props.size || '100%')
-}))
 defineOptions({
-  name: 'MSarString',
+  name: 'MSarIcon',
   inheritAttrs: !1
 })
 </script>
@@ -25,20 +17,8 @@ defineOptions({
 <template>
   <q-icon
     class="m-sar-icon"
-    v-bind="Object.assign({},$props,$attrs,getSize)"
+    v-bind="{...$attrs, name: 'myth-sar'}"
   >
-    <slot name="default">
-      <svg
-        viewBox="0 0 1124.14 1256.39"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"
-        />
-        <path
-          d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z"
-        />
-      </svg>
-    </slot>
+    <slot />
   </q-icon>
 </template>

package/src/composable/useDtHelpers.ts

@@ -21,7 +21,7 @@ import { useMyth } from './useMyth'
 import { extend, is, useQuasar } from 'quasar'
 import { useRoute, useRouter } from 'vue-router'
 import type { AxiosRequestConfig } from 'axios'
-import { useResetForm, useSetFormValues } from 'vee-validate'
+import { useResetForm } from 'vee-validate'
 import { MFrameDialog } from '../components'
 
 const initPaginationOptions: MDatatablePagination = {
@@ -491,15 +491,16 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
     }
   }
   const openDialogTimeout = 100
-  const setValues = useSetFormValues()
   const resetDialogForm = useResetForm()
   const resetVeeForm = async (attrs?: Record<string, any>) => {
-    const init: any = {}
+    let init: any = {}
     for (const k in defaultItem.value) {
       init[k] = attrs && k in attrs ? attrs[k] : defaultItem.value[k]
     }
-    resetDialogForm({ values: init || {} }, { force: !0 })
-    attrs && setValues(attrs, !1)
+    if (attrs) {
+      init = { ...init, ...attrs }
+    }
+    resetDialogForm({ values: init || {}, errors: undefined }, { force: !0 })
   }
   const beforeShowFilterDialog = async () => {
     resetDialogForm({ values: {}, errors: {} }, { force: !0 })
@@ -633,11 +634,10 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
           getRows.value[index] = { ..._data } as any
           nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
         }
-        setTimeout(() => {
-          resetVeeForm(_data)
-          nextTick(() => {
-            formDialogModel.value = !0
-          })
+        setTimeout(async () => {
+          await resetVeeForm(_data)
+          await nextTick()
+          formDialogModel.value = !0
         }, openDialogTimeout)
       })
       .catch((e: any) => {
@@ -1024,6 +1024,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
     dialogErrors,
     setDialogErrors,
     resetDialogs,
+    resetVeeForm,
     getHeaders,
     getSortedHeaders,
     arrangementColumns,

package/src/icons/config.ts

@@ -0,0 +1,13 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2026 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+export const iconSet = 'myth-'
+export const icons = {
+  sar: 'M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z&&M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z|0 0 1124.14 1256.39'
+}
+export default {}

package/src/icons/index.ts

@@ -0,0 +1,10 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2026 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+export * from './config'
+export default {}

package/src/style/typography.sass

@@ -34,3 +34,6 @@ $text-underline-styles: ("solid": solid, "double": double, "dotted": dotted, "da
   .text-underline-#{$style-name}
     text-decoration-line: underline !important
     text-decoration-style: $style-value !important
+
+.text-large
+  font-size: large

package/src/types/api/MSar.d.ts

@@ -9,7 +9,7 @@
 import type { VNode } from 'vue'
 import type { QIconProps } from 'quasar'
 
-export type MSarIconProps = Omit<QIconProps, 'name'> & Record<string, any>;
+export type MSarIconProps = Omit<QIconProps, 'name'>;
 
 export interface MSarIconSlots {
   default: () => VNode[]

package/src/types/api/MUploader.d.ts

@@ -20,22 +20,27 @@ export interface MUploaderMediaItem {
   name: string;
   file_name: string;
   type: MediaType;
-  type_to_string: string;
+  type_to_string: string | null;
+  mime_type: string;
   size: number;
   size_to_string: string;
+  collection_name: string;
+  collection_to_string: string;
   url: string;
   download_url: string;
-  icon: string;
-  description: string;
-  attachment_type: string;
-  collection_to_string: string;
+  icon: string | null;
+  description: string | null;
+  attachment_type: string | null;
   attachment_type_id: number | null;
-  attachment_type_id_to_string: string;
+  attachment_type_id_to_string: string | null;
   user_id: number | null;
-  user_id_to_string: string;
+  user_id_to_string: string | null;
   order_column: number;
   original_url: boolean;
   preview_url: boolean;
+  model_id: number;
+  model_id_to_string: string;
+  model_type: string;
   model_type_to_string: string;
   is_image: boolean;
   is_pdf: boolean;

package/src/utils/vue-plugin.ts

@@ -13,6 +13,8 @@ import { defineComponents } from '../plugin/defineComponents'
 
 import { createMyth, extendOptions } from './createMyth'
 import { MythKey } from './const'
+import { icons, iconSet } from '../icons'
+import { Str } from './Str'
 
 function install (app: App, options: InstallOptions) {
   const opts = extendOptions(options)
@@ -35,6 +37,20 @@ function install (app: App, options: InstallOptions) {
   // for (const routesKey in routes) {
   //   console.log(routesKey)
   // }
+  const otherIconMapFn = app.config.globalProperties.$q.iconMapFn
+  app.config.globalProperties.$q.iconMapFn = (iconName) => {
+    if (iconName.startsWith(iconSet)) {
+      const name = Str.camelCase(iconName.slice(iconSet.length))
+      if (Object.keys(icons).includes(name)) {
+        return {
+          icon: icons[name]
+        }
+      }
+    }
+    if (typeof otherIconMapFn === 'function') {
+      return otherIconMapFn(iconName)
+    }
+  }
 }
 
 export {