@mythpe/quasar-ui-qui 0.1.10 → 0.1.11

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -284,8 +284,10 @@ const resetDialogs = () => {
 /** --- */
 const headersProp = computed(() => props.headers)
 const getHeaders = computed<any[]>(() => parseHeaders(headersProp.value, reactive({ noSort: props.imageColumns })) || [])
-const visibleColumnsProp = computed(() => props.visibleColumns)
-const visibleHeaders = ref(parseHeaders(visibleColumnsProp.value || headersProp.value).map(e => e.name))
+const visibleHeaders = ref<string[]>(parseHeaders(props.visibleColumns || headersProp.value).map(e => e.name))
+watch(() => toValue(props.visibleColumns), v => {
+  visibleHeaders.value = v ? parseHeaders(v).map(e => e.name) : []
+}, { deep: !0 })
 /** --- */
 
 const selected = ref<MDtItem[]>([])
@@ -334,7 +336,7 @@ const tableOptions = reactive<MDatatableOptions>({
 /** Table */
 
 /** --- */
-const addListBtnComputed = computed(() => {
+/* const addListBtnComputed = computed(() => {
   if (props.addListBtn !== undefined) {
     return props.addListBtn
   }
@@ -342,7 +344,7 @@ const addListBtnComputed = computed(() => {
     return pluginOptions.value.datatable?.addListBtn
   }
   return !1
-})
+}) */
 const hasAddBtn = computed<boolean>(() => {
   if (props.hideAddBtn) {
     return !1
@@ -364,14 +366,14 @@ const hasShowBtn = computed<boolean>(() => {
 })
 const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
 const hasFilterDialog = computed<boolean>(() => !!slots.filter)
-const hasMenu = computed<boolean>(() => {
+/* const hasMenu = computed<boolean>(() => {
   const pdf = props.pdf && getRows.value.length > 0
   const excel = props.excel && getRows.value.length > 0
   if (pdf || excel) {
     return !0
   }
   return hasAddBtn.value && !!addListBtnComputed.value
-})
+}) */
 
 const isUpdateMode = ref<boolean>(!1)
 const formMode = computed<'update' | 'store'>(() => isUpdateMode.value ? 'update' : 'store')
@@ -1579,124 +1581,29 @@ defineOptions({
                 />
               </MRow>
               <!--Buttons-->
-              <MRow class="row q-gutter-x-sm q-gutter-xs-y-sm items-center">
-                <!--More Menu-->
+              <MRow class="q-gutter-x-sm q-gutter-xs-y-sm items-center">
+                <!-- Export PDF-->
                 <MDtBtn
-                  v-if="hasMenu"
-                  key="more-selection-btn"
-                  :disable="tableOptions.loading"
-                  icon="ion-ios-options"
-                  label="myth.datatable.hints.options"
-                  tooltip="myth.datatable.hints.more"
-                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.more}"
+                  v-if="pdf && getRows.length > 0"
+                  icon="fa-solid fa-file-pdf"
+                  text-color="red"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
+                  @click="exportData('pdf')"
                 >
-                  <MModalMenu
-                    :offset="[10,10]"
-                    position="bottom"
-                    v-bind="pluginOptions.dt?.buttons?.moreMenu as any"
-                  >
-                    <q-list
-                      style="min-width: 250px"
-                      v-bind="pluginOptions.dt?.buttons?.moreList"
-                    >
-                      <!-- Add Btn -->
-                      <q-item
-                        v-if="hasAddBtn && !!addListBtnComputed"
-                        v-close-popup
-                        clickable
-                        v-bind="pluginOptions.dt?.buttons?.moreItem"
-                        @click="openCreateDialog()"
-                      >
-                        <q-item-section thumbnail>
-                          <q-icon
-                            color="primary"
-                            name="add"
-                            right
-                            size="xs"
-                          />
-                        </q-item-section>
-                        <q-item-section>
-                          <span> {{ getFormTitle }}</span>
-                        </q-item-section>
-                      </q-item>
-                      <!-- Export PDF-->
-                      <q-item
-                        v-if="pdf && getRows.length > 0"
-                        v-close-popup
-                        clickable
-                        v-bind="pluginOptions.dt?.buttons?.moreItem"
-                        @click="exportData('pdf')"
-                      >
-                        <q-item-section thumbnail>
-                          <q-icon
-                            color="red"
-                            name="fa-solid fa-file-pdf"
-                            right
-                            size="xs"
-                          />
-                        </q-item-section>
-                        <q-item-section>
-                          <span>
-                            {{ __('myth.titles.exportPdf') }}
-                            <q-badge
-                              v-if="tableOptions.selected.length > 1"
-                              :label="tableOptions.selected.length"
-                              align="top"
-                              rounded
-                            />
-                          </span>
-                        </q-item-section>
-                      </q-item>
-                      <!-- Export Excel-->
-                      <q-item
-                        v-if="excel && getRows.length > 0"
-                        v-close-popup
-                        clickable
-                        v-bind="pluginOptions.dt?.buttons?.moreItem"
-                        @click="exportData('excel')"
-                      >
-                        <q-item-section thumbnail>
-                          <q-icon
-                            color="green"
-                            name="fa-solid fa-file-excel"
-                            right
-                            size="xs"
-                          />
-                        </q-item-section>
-                        <q-item-section>
-                          <span>
-                            {{ __('myth.titles.exportExcel') }}
-                            <q-badge
-                              v-if="tableOptions.selected.length>1"
-                              :label="tableOptions.selected.length"
-                              align="top"
-                              rounded
-                            />
-                          </span>
-                        </q-item-section>
-                      </q-item>
-                      <q-item
-                        v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
-                        v-close-popup
-                        clickable
-                        v-bind="pluginOptions.dt?.buttons?.moreItem"
-                        @click="tableOptions.fullscreen = !tableOptions.fullscreen"
-                      >
-                        <q-item-section thumbnail>
-                          <q-icon
-                            :name="tableOptions.fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
-                            right
-                          />
-                        </q-item-section>
-                        <q-item-section>
-                          <q-item-label>
-                            {{ __('myth.datatable.' + (tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen')) }}
-                          </q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </MModalMenu>
+                  <q-tooltip>{{ __('myth.titles.exportPdf') }}</q-tooltip>
+                </MDtBtn>
+
+                <!-- Export Excel-->
+                <MDtBtn
+                  v-if="excel && getRows.length > 0"
+                  icon="fa-solid fa-file-excel"
+                  text-color="green"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
+                  @click="exportData('excel')"
+                >
+                  <q-tooltip>{{ __('myth.titles.exportExcel') }}</q-tooltip>
                 </MDtBtn>
+
                 <!-- Filter dialog -->
                 <MDtBtn
                   v-if="hasFilterDialog"
@@ -1772,6 +1679,7 @@ defineOptions({
                     </q-card>
                   </MModalMenu>
                 </MDtBtn>
+
                 <!--Refresh-->
                 <MDtBtn
                   v-if="!noRefreshBtn"
@@ -1782,6 +1690,7 @@ defineOptions({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh}"
                   @click="refreshNoUpdate()"
                 />
+
                 <!--Fullscreen-->
                 <MDtBtn
                   v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"

package/src/components/form/MAvatarViewer.vue

@@ -290,9 +290,9 @@ defineOptions({
           <MBtn
             v-else
             :disable="!isLoaded && !!url"
+            :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : btnLabel ) )"
             :loading="loadingSrc"
             icon="ion-ios-images"
-            :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : btnLabel ) )"
             outline
             @click="onClick"
           />

package/src/components/form/MPicker.vue

@@ -210,8 +210,8 @@ defineOptions({
       <template #append>
         <q-btn
           v-if="!disable && !readonly && !viewMode"
-          :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
           :color="!!errorMessage ? 'negative' : undefined"
+          :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
           flat
           round
           v-bind="{...pluginOptions?.pickerBtn, ...btnProps}"

package/src/style/main.sass

@@ -19,7 +19,6 @@ $m--input-helpers-margin: 5px !default
     width: 0 !important
 
 
-
 .m--row + .m--row
   margin-top: $m--row-margin-top
 

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

@@ -1,6 +1,6 @@
 import type { NamedColor, QAvatarProps, QAvatarSlots, QImgProps } from 'quasar'
 import type { VNode } from 'vue'
-import type { InputErrorsContext, InputFormErrorsContext, InputRulesContext, MColProps } from '../components'
+import type { InputRulesContext, MColProps } from '../components'
 
 export type MAvatarViewerModelValue = File | null | undefined;
 

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

@@ -36,5 +36,5 @@ export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'>
 }
 
 export interface MAxiosSlots extends MSelectSlots {
-  [ k : keyof MSelectSlots ]
+  [k: keyof MSelectSlots]
 }

package/src/types/components.d.ts

@@ -37,16 +37,7 @@ import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
 import type { ThemeShadow, ThemeSize } from './theme'
 import type { ApiInterface, HelpersStubSchema } from './api-helpers'
-import type {
-  MDatatableProps,
-  MDatatableSlots,
-  MDtAvatarProps,
-  MDtAvatarSlots,
-  MDtBtnProps,
-  MDtBtnSlots,
-  MDtContextmenuItemsProps,
-  MDtContextmenuItemsSlots
-} from './m-datatable'
+import type { MDatatableProps, MDatatableSlots, MDtAvatarProps, MDtAvatarSlots, MDtBtnProps, MDtBtnSlots, MDtContextmenuItemsProps, MDtContextmenuItemsSlots } from './m-datatable'
 import type { EditorConfig } from 'ckeditor5'
 import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
 import type { MTransitionProps, MTransitionsSlots } from './api/MTransition'

package/src/types/plugin-props-option.d.ts

@@ -231,11 +231,11 @@ export interface MythComponentsProps {
     buttons?: {
       filter?: Partial<MDtBtnProps>;
       refresh?: Partial<MDtBtnProps>;
-      more?: Partial<MDtBtnProps>;
+      // more?: Partial<MDtBtnProps>;
       fullscreen?: Partial<MDtBtnProps>;
-      moreMenu?: Partial<QMenuProps>;
-      moreList?: Partial<QListProps>;
-      moreItem?: Partial<QItemProps>;
+      // moreMenu?: Partial<QMenuProps>;
+      // moreList?: Partial<QListProps>;
+      // moreItem?: Partial<QItemProps>;
     },
     topSelection?: {
       btn?: Partial<MDtBtnProps>;