@mythpe/quasar-ui-qui 0.1.88 → 0.1.90

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -131,7 +131,7 @@ const toUrl = (data?: any) => {
 const hasSrc = computed(() => !!modelValue.value || !!url.value)
 
 /**
- * Check if blob value is a File & not image
+ * Check if the blob value is a File & not image
  */
 const isFile = computed(() => {
   if (!(modelValue.value instanceof File)) {
@@ -154,6 +154,15 @@ const isImage = computed(() => {
 })
 const isFileNotImage = computed(() => hasSrc.value && !isImage.value)
 const getAvatarText = computed<string | undefined>(() => props.avatarText ? props.avatarText.slice(0, 1).toUpperCase() : undefined)
+const getRequired = computed(() => {
+  if (!props.required) {
+    return !1
+  }
+  if (hasSrc.value) {
+    return !1
+  }
+  return !0
+})
 const loadingSrc = ref(!1)
 const onClick = (e?: Event) => {
   if (props.readonly) {
@@ -242,7 +251,7 @@ defineOptions({
           >
             {{ label ? __(label) : label }}
             <span
-              v-if="required && !readonly"
+              v-if="getRequired && !readonly"
               class="text-negative"
             >*</span>
           </div>
@@ -272,7 +281,7 @@ defineOptions({
             type="QAvatar"
           />
           <q-avatar
-            v-else
+            v-if="!loading"
             :color="errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile || isFileNotImage) ? emptyColor : undefined)"
             :icon="isFileNotImage && !url ? 'o_description' : undefined"
             :rounded="rounded"
@@ -310,13 +319,25 @@ defineOptions({
             v-if="loading"
             type="QBtn"
           />
+          <MTransition>
+            <div
+              v-if="!loading && !!modelValue"
+              key="uploaded-text"
+              class="text-center q-mb-lg text-positive"
+            >
+              <q-icon name="ion-checkmark" />
+              {{ __('labels.uploaded') }}
+            </div>
+          </MTransition>
           <MBtn
-            v-else
+            v-if="!loading"
             :color="undefined"
             :disable="!isLoaded && !!url"
-            :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : btnLabel ) )"
+            :icon="`ion-${hasSrc ? (required ? 'cloud-upload' : 'ios-trash') : 'cloud-upload'}`"
+            :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : (
+              hasSrc ? 'remove' : btnLabel
+            ) ) )"
             :loading="loadingSrc"
-            icon="ion-ios-images"
             outline
             @click="onClick"
           />
@@ -335,7 +356,7 @@ defineOptions({
         >
           <MBtn
             :color="undefined"
-            icon="ion-ios-download"
+            icon="ion-cloud-download"
             label="labels.download"
             outline
             @click="openWindow(url)"
@@ -360,7 +381,7 @@ defineOptions({
       :accept="accepts.join(',')"
       :clearable="clearable"
       :name="name || ''"
-      :required="required"
+      :required="getRequired"
       :rules="rules"
       class="hidden"
     />

package/src/composable/useBindInput.ts

@@ -3,6 +3,7 @@ import { computed, ref, toValue, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
 import type { MythComponentsProps as UiOpt } from '../types/plugin-props-option'
+import { biRadar } from '@quasar/extras/bootstrap-icons'
 
 type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };
@@ -213,6 +214,10 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
       mainFor: for (const c of cases) {
         for (const b of [attributes, props]) {
           if (c in b && (b[c] === !0 || b[c] === '')) {
+            if (key === 'avatarViewer' && c === 'required') {
+              // eslint-disable-next-line no-labels
+              break mainFor
+            }
             rules[snakeCase(k)] = b[c] === !0 || b[c] === '' ? !0 : b[c]
             // eslint-disable-next-line no-labels
             break mainFor

package/src/composable/useDtHelpers.ts

@@ -175,9 +175,11 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     return __('show_details')
   })
   const getFormTitle = computed(() => {
-    const name = serviceName.value && typeof serviceName.value !== 'function' ? __(`choice.${pascalCase(pluralize(
-      serviceName.value.split(
-        '/').pop()))}`, 1) : ''
+    let name = ''
+    if (serviceName.value && typeof serviceName.value !== 'function') {
+      const s = serviceName.value?.toString()?.split('/').pop() ?? ''
+      name = __(`choice.${pascalCase(pluralize(s))}`, 1)
+    }
     return __(`replace.${formMode.value}`, { name })
   })
   const isGrid = computed(() => {

package/src/utils/Str.ts

@@ -7,7 +7,8 @@
  */
 
 // import { plural as pluralCase, singular as singularCase } from '__pluralize'
-import __pluralize from './copy_pluralize'
+// import __pluralize from './copy_pluralize'
+import __pluralize from 'pluralize'
 import { camelCase, capitalCase, dotCase, kebabCase, pascalCase, snakeCase } from 'change-case'
 // console.log(__pluralize.plural())
 export const Str = {