@mythpe/quasar-ui-qui 0.1.53 → 0.1.55

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -13,7 +13,7 @@
 import type { MDatatableProps } from '../../types'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { onMounted, ref, toValue, watch } from 'vue'
+import { computed, onMounted, ref, toValue, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import lodash from 'lodash'
 import { useDtHelpers, useMyth } from '../../composable'
@@ -380,7 +380,9 @@ watch(formDialogModel, (v) => {
     dialogErrors.value = {}
   }
 })
-
+const activeContextItems = computed(() => {
+  return contextmenuItems.value.filter((e, i) => typeof e.showIf === 'function' ? e.showIf(e, i) : e.showIf !== !1) as Required<MDatatableProps['contextItems']> || []
+})
 const table = ref<InstanceType<typeof QTable>>()
 defineOptions({
   name: 'MDatatable',
@@ -451,7 +453,7 @@ defineExpose({
           :key="i"
         >
           <MDtBtn
-            v-if="typeof contextmenuItem.showIf === 'function' ? contextmenuItem.showIf(dialogItem,dialogItemIndex) : contextmenuItem.showIf"
+            v-if="typeof contextmenuItem.showIf === 'function' ? contextmenuItem.showIf(dialogItem,dialogItemIndex) : contextmenuItem.showIf !== !1"
             :[contextmenuItem.name]="!0"
             :dense="dense === undefined ? (theme.buttons.dense !== undefined ? theme.buttons.dense : pluginOptions.datatable?.dense) : dense"
             :label="contextmenuItem.contextLabel !== undefined ? (contextmenuItem.contextLabel === null ? undefined : __(contextmenuItem.contextLabel)) : __(contextmenuItem.label || contextmenuItem.name) "
@@ -967,7 +969,8 @@ defineExpose({
                     :key="`top-s-${i}`"
                   >
                     <MDtBtn
-                      v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf) && ( (contextBtn.click && isSingleSelectedItem) || (contextBtn.multiClick && !isSingleSelectedItem) )"
+                      v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf !==!1) && ( (contextBtn.click && isSingleSelectedItem)
+                        || (contextBtn.multiClick && !isSingleSelectedItem) )"
                       :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
                         __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
                       v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any}"
@@ -1098,7 +1101,7 @@ defineExpose({
             <q-td :props="noBodyProps">
               <!--Control-->
               <q-btn-dropdown
-                v-if="contextmenuItems.length > contextItemsLength"
+                v-if="activeContextItems.length > contextItemsLength"
                 v-close-popup
                 :menu-offset="[0,10]"
                 color="primary"

package/src/components/datatable/MDtBtn.vue

@@ -13,6 +13,7 @@
 
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
+import type { NamedColor } from 'quasar'
 
 interface Props {
   show?: boolean | undefined;
@@ -20,7 +21,7 @@ interface Props {
   destroy?: boolean | undefined;
   clone?: boolean | undefined;
   tooltip?: string | null | undefined;
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   icon?: string | undefined;
   listItem?: boolean | undefined;
   label?: string | undefined;

package/src/components/datatable/MDtContextmenuItems.vue

@@ -46,7 +46,7 @@ defineOptions({
       :key="`MDtContextmenuItems-i${i}`"
     >
       <MDtBtn
-        v-if="typeof m.showIf === 'function' ? m.showIf(item,index) : m.showIf"
+        v-if="typeof m.showIf === 'function' ? m.showIf(item,index) : m.showIf !== !1"
         :[m.name]="!0"
         :label="itemMode&&m.label===undefined?(te(`labels.${m.name}`)?__(`labels.${m.name}`):__(m.tooltip || m.attr?.label || m.attr?.tooltip || m.name)):(m.label!==undefined?__(m.label || m.name):undefined)"
         :list-item="itemMode"

package/src/components/form/MInputLabel.vue

@@ -33,6 +33,7 @@ defineOptions({
     }"
     v-bind="$attrs"
   >
+    <slot name="before" />
     <div class="m--input__top-label__content">
       {{ label !== undefined ? __(label) : field?.label }}
     </div>

package/src/components/form/MOptions.vue

@@ -132,18 +132,21 @@ defineOptions({
         v-if="!!getLabel && (!viewMode || (theme.topLabel || getProp('topLabel')))"
         :field="scopes"
       >
-        <MHelpRow
-          v-if="!!help"
-          :text="help"
-          tooltip
-        />
-        <template v-if="loading">
-          <div class="flex-break" />
-          <q-spinner-dots
-            class="q-mt-lg q-ml-lg"
-            color="primary"
-            size="22px"
+        <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>

package/src/components/grid/MHelpRow.vue

@@ -29,6 +29,7 @@ defineOptions({
   <div
     v-if="text || tooltip"
     class="m--help-row row"
+    v-bind="$attrs"
   >
     <div class="col-auto">
       <q-icon

package/src/components/parials/MUploaderItem.vue

@@ -174,6 +174,7 @@ defineOptions({ name: 'MUploaderItem' })
         :ratio="1"
         :src="modelValue.__img ? modelValue.__img.src : mediaProp.url"
         fit="contain"
+        no-spinner
       />
       <q-icon
         v-else

package/src/types/components.d.ts

@@ -208,6 +208,7 @@ export type MInputFieldControlSlots = {
 export type MInputLabelProps = BaseInputFieldProps
 
 export type MInputLabelSlots = {
+  before?: () => VNode[];
   default?: () => VNode[];
 }
 

package/src/types/m-datatable.d.ts

@@ -7,7 +7,7 @@
  */
 
 import type { AxiosResponse } from 'axios'
-import type { QAvatarProps, QAvatarSlots, QTableProps, QTableSlots } from 'quasar'
+import type { NamedColor, QAvatarProps, QAvatarSlots, QTableProps, QTableSlots } from 'quasar'
 import type { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { GenericFormValues, MBtnProps, MBtnSlots, MFormSlots } from './components'
@@ -117,7 +117,7 @@ export interface MDtBtnProps extends MBtnProps {
   clone?: boolean;
   destroy?: boolean;
   tooltip?: string | undefined;
-  color?: string;
+  color?: NamedColor | undefined;
   icon?: string;
   listItem?: boolean;
   fabMini?: boolean;
@@ -169,7 +169,7 @@ export type GenericMDtBtn<T extends E = E> = Record<string, any> & {
   multiClick?: (items: T[]) => void;
   showIf?: boolean | ((item: UnwrapRef<MDatatableDialogsOptions['item']>, index: UnwrapRef<MDatatableDialogsOptions['index']>) => boolean);
   order?: number;
-  attr?: Partial<MDtBtnProps> & Partial<{ icon?: string; textColor?: string; color?: string; }>;
+  attr?: Partial<MDtBtnProps> & Partial<{ icon?: string; textColor?: NamedColor | undefined; color?: NamedColor | undefined; }>;
 }
 
 type MDatatableFormScope = Parameters<MFormSlots['default']>[0]

package/src/types/theme.d.ts

@@ -1,4 +1,4 @@
-import type { QBtnProps, QInputProps } from 'quasar'
+import type { NamedColor, QBtnProps, QInputProps } from 'quasar'
 
 export type ThemeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | string;
 export type ThemeShadow = string | number | 'transition' | 'none';
@@ -51,7 +51,7 @@ export type Theme = {
 
 export type ButtonLoadingOptions = {
   type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail' | 'spinner';
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   size?: string | undefined;
   label?: boolean;
 }