@mythpe/quasar-ui-qui 0.1.5 → 0.1.8

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -42,12 +42,14 @@ interface P {
   captionProps?: Props['captionProps'];
   hint?: Props['hint'];
   hintProps?: Props['hintProps'];
-  formErrors?: Props['formErrors'];
   help?: Props['help'];
   readonly?: Props['readonly'];
   loading?: Props['loading'];
   required?: Props['required'];
   rules?: Props['rules'];
+  contentClass?: Props['contentClass'];
+  emptyColor?: Props['emptyColor'];
+  btnLabel?: Props['btnLabel'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -66,7 +68,7 @@ const props = withDefaults(defineProps<P>(), {
   excel: !1,
   size: '100px',
   avatarText: undefined,
-  fit: 'contain',
+  fit: undefined,
   clearable: undefined,
   label: undefined,
   rounded: undefined,
@@ -75,20 +77,22 @@ const props = withDefaults(defineProps<P>(), {
   hintProps: undefined,
   caption: undefined,
   captionProps: undefined,
-  formErrors: () => ({}),
   help: undefined,
   readonly: !1,
   loading: !1,
   required: undefined,
-  rules: () => ({})
+  rules: () => ({}),
+  contentClass: undefined,
+  emptyColor: 'grey-2',
+  btnLabel: 'choose_file'
 })
 type Emits = {
   (e: 'click', evt?: Event): void;
 }
 const emit = defineEmits<Emits>()
 const { __ } = useMyth()
-const { accepts } = useBindInput<any>(() => props, 'avatarViewer')
-const modelValueScope = useField<Props['modelValue']>(() => props.name, undefined, {
+const { accepts, inputRules } = useBindInput<any>(() => props, 'avatarViewer')
+const modelValueScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0
 })
 const { value: modelValue, handleReset } = modelValueScope
@@ -196,7 +200,8 @@ defineOptions({
     :sm="sm"
     :xs="xs"
   >
-    <MColumn class="items-center">
+    <MColumn :class="contentClass">
+      <slot name="top" />
       <MTransition>
         <div
           v-if="!!label"
@@ -237,7 +242,7 @@ defineOptions({
         </slot>
         <div
           key="avatar"
-          :class="`rounded-borders q-mb-sm ${!!errorMessage ? 'q-pa-xs bg-negative' : ''}`"
+          :class="`rounded-borders q-mb-sm ${!!errorMessage ? 'q-pa-xs' : ''}`"
         >
           <q-skeleton
             v-if="loading"
@@ -246,16 +251,15 @@ defineOptions({
           />
           <q-avatar
             v-else
-            :color="!!errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile) ? 'primary' : undefined)"
+            :color="!!errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile) ? emptyColor : undefined)"
             :icon="isFile ? 'o_description' : undefined"
-            :rounded="rounded === undefined ? hasSrc : rounded"
+            :rounded="rounded"
             :size="size"
             text-color="white"
           >
             <q-img
               v-if="hasSrc && !isFile"
               :fit="fit"
-              :height="size"
               :src="blobUrl || url"
               ratio="1"
               @error="isLoaded = !0"
@@ -277,7 +281,7 @@ defineOptions({
         <div
           v-if="!readonly"
           key="btn"
-          class="q-mb-sm"
+          class="q-mt-lg"
         >
           <q-skeleton
             v-if="loading"
@@ -285,11 +289,11 @@ defineOptions({
           />
           <MBtn
             v-else
-            :color="!hasSrc ? 'positive' : 'secondary'"
             :disable="!isLoaded && !!url"
-            :icon="hasSrc ? 'ion-ios-close' : 'ion-ios-attach'"
-            :label="__( 'labels.' + ( clearable && hasSrc ? 'remove' : ( !clearable && hasSrc ? 'change' : 'choose') ) )"
             :loading="loadingSrc"
+            icon="ion-ios-images"
+            :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : btnLabel ) )"
+            outline
             @click="onClick"
           />
         </div>

package/src/components/form/MSelect.vue

@@ -111,7 +111,7 @@ const emit = defineEmits<Emits>()
 
 const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
-const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
+const { theme, hasTopLabel, getLabel, getAutocompleteAttribute, inputRules, getProp } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -239,8 +239,8 @@ defineOptions({
         autocomplete: getAutocompleteAttribute || undefined,
         clearable: viewMode ? !1 : clearable,
         hint: hint ? __(hint) : undefined,
-        label: viewMode && hasTopLabel ? undefined : (loading ? undefined : getPlaceholder),
-        modelValue: value,
+        label: viewMode && hasTopLabel ? undefined : (getLabel || undefined),
+        modelValue: value
       }"
       v-on="listeners"
     >

package/src/composable/useBindInput.ts

@@ -64,7 +64,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   })
   const getLabel = computed<string | undefined>(() => {
     const k = nameLabel.value
-    if (k && k.indexOf('.*.')) {
+    if (k && k.indexOf('.*.') !== -1) {
       return __(k.split('.').pop()) || undefined
     }
     return k ? (__(k) || undefined) : undefined

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

@@ -1,4 +1,4 @@
-import type { QAvatarProps, QAvatarSlots, QImgProps } from 'quasar'
+import type { NamedColor, QAvatarProps, QAvatarSlots, QImgProps } from 'quasar'
 import type { VNode } from 'vue'
 import type { InputErrorsContext, InputFormErrorsContext, InputRulesContext, MColProps } from '../components'
 
@@ -46,14 +46,6 @@ export interface MAvatarViewerProps extends QAvatarProps, MColProps {
    * The label that will appear above the image
    */
   label?: string;
-  /**
-   * List of error messages.
-   */
-  errors?: InputErrorsContext;
-  /**
-   * List of form errors.
-   */
-  formErrors?: InputFormErrorsContext;
   /**
    * Model of the component;
    * Must be FileList or Array if using 'multiple' prop;
@@ -103,6 +95,9 @@ export interface MAvatarViewerProps extends QAvatarProps, MColProps {
    * Input Validation Rules.
    */
   rules?: InputRulesContext;
+  contentClass?: string | string[] | Record<string, any>;
+  emptyColor?: NamedColor;
+  btnLabel?: string;
 }
 
 export interface MAvatarViewerSlots extends QAvatarSlots {