@mythpe/quasar-ui-qui 0.2.38 → 0.2.40

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -331,14 +331,12 @@ defineOptions({
           </MTransition>
           <MBtn
             v-if="!loading"
-            :color="undefined"
             :disable="!isLoaded && !!url"
             :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"
-            outline
             @click="onClick"
           />
         </div>
@@ -355,10 +353,8 @@ defineOptions({
           class="q-mt-lg"
         >
           <MBtn
-            :color="undefined"
             icon="ion-cloud-download"
             label="labels.download"
-            outline
             @click="openWindow(url)"
           />
         </div>

package/src/components/form/MCheckbox.vue

@@ -59,12 +59,12 @@ const props = withDefaults(defineProps<P>(), {
   val: undefined,
   required: undefined,
   rules: undefined,
-  trueValue: () => !0,
-  falseValue: () => !1,
+  trueValue: !0,
+  falseValue: !1,
   checkedIcon: undefined,
   rowProps: undefined,
   colProps: undefined,
-  viewMode: () => !1,
+  viewMode: !1,
   fieldOptions: undefined,
   autocomplete: undefined,
   disable: undefined
@@ -125,6 +125,7 @@ defineOptions({
       <MCol v-bind="colProps">
         <q-field
           v-bind="{
+            ...theme,
             error: !!errorMessage,
             errorMessage,
             hint: hint ? __(hint) : undefined,
@@ -159,7 +160,7 @@ defineOptions({
               <MRow class="items-center">
                 <div
                   v-if="!!getLabel"
-                  :class="errorMessage ? undefined : 'text-color'"
+                  :class="errorMessage ? undefined : 'text-body'"
                 >
                   {{ getLabel }}
                 </div>

package/src/components/form/MOptions.vue

@@ -65,7 +65,7 @@ const props = withDefaults(defineProps<P>(), {
   viewMode: () => !1,
   viewModeValue: undefined,
   topLabel: undefined,
-  color: () => 'primary',
+  color: undefined,
   type: 'radio',
   keepColor: undefined,
   guest: !1,
@@ -164,8 +164,8 @@ defineOptions({
             <div class="flex-break" />
             <q-spinner-dots
               class="q-mt-lg q-ml-lg"
-              color="primary"
-              size="22px"
+              color="brand"
+              size="25px"
             />
           </template>
         </template>
@@ -197,7 +197,6 @@ defineOptions({
       :is="viewMode ? QField : QOptionGroup"
       ref="input"
       :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
-      :color="!!errorMessage ? 'negative' : getProp('color')"
       :error="viewMode ? !!errorMessage : undefined"
       :error-message="viewMode ? errorMessage : undefined"
       :hint="viewMode ? ( hint ? __(hint) : undefined ) : undefined"
@@ -210,7 +209,8 @@ defineOptions({
         ...$attrs,
         ...theme,
         ...( viewMode ? { ...pluginProps.field } : pluginProps.options as any ),
-        stackLabel: !0
+        stackLabel: !0,
+        color:!!errorMessage ? 'negative' : getProp('color')
       }"
       v-on="listeners"
     >

package/src/components/form/MRadio.vue

@@ -33,6 +33,7 @@ type P = {
   required?: Props['required'];
   rules?: Props['rules'];
   dense?: Props['dense'];
+  color?: Props['color'];
   checkedIcon?: Props['checkedIcon'];
   rowProps?: Props['rowProps'];
   colProps?: Props['colProps'];
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<P>(), {
   required: undefined,
   rules: undefined,
   dense: undefined,
+  color: undefined,
   checkedIcon: undefined,
   rowProps: undefined,
   colProps: undefined,
@@ -143,6 +145,7 @@ defineOptions({
                 ...$attrs,
                 disable: viewMode ? !0 : disable,
                 checkedIcon: getProp('checkedIcon'),
+                color: !!errorMessage ? 'negative' : getProp('color'),
                 label: undefined
               }"
               v-on="listeners"
@@ -151,7 +154,7 @@ defineOptions({
                 <MRow class="items-center">
                   <div
                     v-if="!!getLabel"
-                    class="text-color"
+                    class="text-body"
                   >
                     {{ getLabel }}
                   </div>

package/src/components/form/MSignaturePad.vue

@@ -162,39 +162,36 @@ watch(url, (url) => {
       name="top-input"
       v-bind="scopes"
     />
-    <MTransitionGroup>
+    <div class="row justify-between items-center q-mb-sm">
       <div
-        key="top"
-        class="row justify-between items-center q-mb-sm"
+        :class="{
+          'text-center': center,
+          'q-mb-xs text-weight-bold' : !0,
+          'text-body1': !large,
+          'text-h6': large,
+          'text-negative': !!errorMessage,
+          'text-positive': !errorMessage && confirmed
+        }"
+        v-bind="labelProps"
       >
-        <div
-          :class="{
-            'text-center': center,
-            'q-mb-xs text-weight-bold' : !0,
-            'text-body1': !large,
-            'text-h6': large,
-            'text-negative': !!errorMessage,
-            'text-positive': !errorMessage && confirmed
-          }"
-          v-bind="labelProps"
-        >
-          <span v-if="!!label">{{ __(label) }}</span>
-          <span
-            v-if="label && required && !confirmed"
-            class="text-negative print-hide"
-          >&nbsp;*</span>
-          <q-icon
-            v-if="confirmed"
-            color="positive"
-            name="verified"
-            right
-            size="20px"
-          />
-        </div>
+        <span v-if="!!label">{{ __(label) }}</span>
+        <span
+          v-if="label && required && !confirmed"
+          class="text-negative print-hide"
+        >&nbsp;*</span>
+        <q-icon
+          v-if="confirmed"
+          color="positive"
+          name="verified"
+          right
+          size="20px"
+        />
       </div>
+    </div>
+
+    <MTransition in="fadeIn">
       <div
         v-if="!!errorMessage"
-        key="signature-errors"
         class="text-negative text-caption q-mb-sm"
       >
         <q-icon
@@ -203,11 +200,13 @@ watch(url, (url) => {
         />
         {{ errorMessage }}
       </div>
-      <div
-        key="signature-pad"
-        :class="{ 'bg-negativ e': !!errorMessage, }"
-        class="print-shadow-none bordered"
-      >
+    </MTransition>
+    <div
+      key="signature-pad"
+      :class="{ 'bg-negative': !!errorMessage, }"
+      class="print-shadow-none bordered"
+    >
+      <MTransition in="fadeIn">
         <div>
           <slot
             name="pad"
@@ -242,46 +241,54 @@ watch(url, (url) => {
             v-bind="scopes"
           />
         </div>
-      </div>
+      </MTransition>
+    </div>
+
+    <MTransition in="fadeIn">
       <div
         v-show="!disabled && !noBtn"
         key="signature-buttons"
         class="q-mt-sm print-hide"
       >
-        <template v-if="!confirmed">
-          <MBtn
-            :label="__('labels.confirm_signature')"
-            class="full-width q-mb-sm"
-            color="positive"
-            @click="save('image/jpeg')"
-          />
-          <MRow class="justify-between">
+        <MTransitionGroup in="fadeIn">
+          <template v-if="!confirmed">
             <MBtn
-              :label="__('labels.undo')"
-              icon="ion-ios-undo"
-              @click="undo"
+              key="confirm_signature"
+              :label="__('labels.confirm_signature')"
+              class="full-width q-mb-sm"
+              color="positive"
+              text-color="white"
+              @click="save('image/jpeg')"
             />
-            <q-space />
-            <MBtn
-              :label="__('labels.clear_signature')"
-              color="negative"
-              icon="ion-ios-repeat"
-              @click="clear"
-            />
-          </MRow>
-        </template>
-        <MTransition>
+            <MRow
+              key="control_signature"
+              class="justify-between"
+            >
+              <MBtn
+                :label="__('labels.undo')"
+                icon="ion-ios-undo"
+                @click="undo"
+              />
+              <q-space />
+              <MBtn
+                :label="__('labels.clear_signature')"
+                icon="ion-ios-repeat"
+                @click="clear"
+              />
+            </MRow>
+          </template>
+        </MTransitionGroup>
+        <MTransition in="fadeIn">
           <MBtn
             v-if="confirmed"
             :label="__('labels.clear_signature')"
             class="full-width"
-            color="negative"
             icon="ion-ios-refresh"
             @click="clear"
           />
         </MTransition>
       </div>
-    </MTransitionGroup>
+    </MTransition>
     <slot
       :confirmed="confirmed"
       name="bottom-input"

package/src/components/form/MToggle.vue

@@ -68,13 +68,13 @@ const props = withDefaults(defineProps<P>(), {
   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,
+  color: undefined,
+  checkedIcon: 'ion-checkmark',
+  uncheckedIcon: 'ion-close',
+  indeterminateIcon: 'ion-ios-code-working',
+  activeLabel: 'yes',
+  inactiveLabel: 'no',
+  status: !1,
   rules: undefined,
   dense: undefined,
   keepColor: undefined,

package/src/style/m-input.sass

@@ -24,7 +24,7 @@ $radius-value: $generic-border-radius !default
 
 .m--input
   &__color-preview
-    border: 1px solid var(--q-primary)
+    border: 1px solid var(--q-brand)
     border-radius: $radius-value
 
   &__top-label,

package/src/style/main.sass

@@ -28,23 +28,6 @@ $m--row-margin-top: 1rem !default
 .rtl
   direction: rtl #{"/* rtl:ignore */"}
 
-// Colors.
-$text-light-color: #111111 !default
-$text-dark-color: #ffffff !default
-
-.body--light
-  color: $text-light-color
-
-  .text-color
-    color: $text-light-color
-
-.body--dark
-  color: $text-dark-color
-
-  .text-color
-    color: $text-dark-color
-
-
 $text-decorations: ('none': none, 'overline': overline, 'underline': underline, 'line-through': line-through)
 @each $name, $value in $text-decorations
   .text-decoration-#{$name}
@@ -69,7 +52,7 @@ $maxes: ('width', 'height') !default
   .max-#{$max}
     max-#{$max}: 100% !important
 
-$m--bordered-color: var(--q-primary) !default
+$m--bordered-color: var(--q-body) !default
 $alignsX: ('top', 'bottom') !default
 $alignsY: ('left', 'right') !default
 $radius-class-name: 'border-rounded' !default