@mythpe/quasar-ui-qui 0.1.9 → 0.1.11

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -48,54 +48,55 @@ const initMetaServer: MDatatableMetaServer = {
   total: null
 }
 
-interface Props {
+type Props = {
   controlKey?: MDatatableProps['controlKey'];
   defaultItem?: MDatatableProps['defaultItem'];
   contextItems?: MDatatableProps['contextItems'];
   contextItemsLength?: MDatatableProps['contextItemsLength'];
-  hideAutoMessage?: MDatatableProps['hideAutoMessage'];
+  hideAutoMessage?: boolean;
   headers: MDatatableProps['headers'];
   serviceName?: MDatatableProps['serviceName'];
   requestParams?: MDatatableProps['requestParams'];
-  pdf?: MDatatableProps['pdf'];
-  excel?: MDatatableProps['excel'];
+  pdf?: boolean;
+  excel?: boolean;
   exportUrl?: MDatatableProps['exportUrl'];
-  hideSearch?: MDatatableProps['hideSearch'];
+  hideSearch?: boolean;
   searchDebounce?: MDatatableProps['searchDebounce'];
   withIndex?: MDatatableProps['withIndex'];
   withStore?: MDatatableProps['withStore'];
   withShow?: MDatatableProps['withShow'];
   withUpdate?: MDatatableProps['withUpdate'];
-  hideAddBtn?: MDatatableProps['hideAddBtn'];
-  hideUpdateBtn?: MDatatableProps['hideUpdateBtn'];
-  hideShowBtn?: MDatatableProps['hideShowBtn'];
-  hideDestroyBtn?: MDatatableProps['hideDestroyBtn'];
+  hideAddBtn?: boolean;
+  hideUpdateBtn?: boolean;
+  cloneBtn?: boolean;
+  hideShowBtn?: boolean;
+  hideDestroyBtn?: boolean;
   storeRoute?: MDatatableProps['storeRoute'];
-  storeQueryParams?: MDatatableProps['storeQueryParams'];
+  storeQueryParams?: boolean;
   updateRoute?: MDatatableProps['updateRoute'];
-  updateQueryParams?: MDatatableProps['updateQueryParams'];
+  updateQueryParams?: boolean;
   showRoute?: MDatatableProps['showRoute'];
-  showQueryParams?: MDatatableProps['showQueryParams'];
-  mouse?: MDatatableProps['mouse'];
-  noRefreshBtn?: MDatatableProps['noRefreshBtn'];
-  endReach?: MDatatableProps['endReach'];
-  showSelection?: MDatatableProps['showSelection'];
-  hideSelection?: MDatatableProps['hideSelection'];
-  multiSelection?: MDatatableProps['multiSelection'];
-  multiDestroy?: MDatatableProps['multiDestroy'];
+  showQueryParams?: boolean;
+  mouse?: boolean;
+  noRefreshBtn?: boolean;
+  endReach?: boolean;
+  showSelection?: boolean;
+  hideSelection?: boolean;
+  multiSelection?: boolean;
+  multiDestroy?: boolean;
   rowsPerPageOptions?: MDatatableProps['rowsPerPageOptions'];
   ignoreKeys?: MDatatableProps['ignoreKeys'];
   grid?: MDatatableProps['grid'];
   title?: MDatatableProps['title'];
-  manageColumns?: MDatatableProps['manageColumns'];
+  manageColumns?: boolean;
   visibleColumns?: MDatatableProps['visibleColumns'];
   searchColumns?: MDatatableProps['searchColumns'];
-  addTopBtn?: MDatatableProps['addTopBtn'];
-  addListBtn?: MDatatableProps['addListBtn'];
-  addFabBtn?: MDatatableProps['addFabBtn'];
-  fullscreenBtn?: MDatatableProps['fullscreenBtn'];
-  noBodyControl?: MDatatableProps['noBodyControl'];
-  showCardControlHeader?: MDatatableProps['showCardControlHeader'];
+  addTopBtn?: boolean;
+  addListBtn?: boolean;
+  addFabBtn?: boolean;
+  fullscreenBtn?: boolean;
+  noBodyControl?: boolean;
+  showCardControlHeader?: boolean;
   dense?: MDatatableProps['dense'];
   bordered?: MDatatableProps['bordered'];
   flat?: MDatatableProps['flat'];
@@ -119,29 +120,30 @@ const props = withDefaults(defineProps<Props>(), {
   pdf: undefined,
   excel: undefined,
   exportUrl: undefined,
-  hideSearch: undefined,
+  hideSearch: !1,
   searchDebounce: () => 600,
   withIndex: undefined,
   withStore: undefined,
   withShow: undefined,
   withUpdate: undefined,
-  hideAddBtn: undefined,
-  hideUpdateBtn: undefined,
-  hideShowBtn: undefined,
-  hideDestroyBtn: undefined,
+  hideAddBtn: !1,
+  hideUpdateBtn: !1,
+  cloneBtn: !1,
+  hideShowBtn: !1,
+  hideDestroyBtn: !1,
   storeRoute: undefined,
-  storeQueryParams: undefined,
+  storeQueryParams: !1,
   updateRoute: undefined,
-  updateQueryParams: undefined,
+  updateQueryParams: !1,
   showRoute: undefined,
-  showQueryParams: undefined,
-  mouse: undefined,
-  noRefreshBtn: undefined,
-  endReach: undefined,
-  showSelection: undefined,
-  hideSelection: undefined,
-  multiSelection: undefined,
-  multiDestroy: undefined,
+  showQueryParams: !1,
+  mouse: !1,
+  noRefreshBtn: !1,
+  endReach: !1,
+  showSelection: !1,
+  hideSelection: !1,
+  multiSelection: !1,
+  multiDestroy: !1,
   rowsPerPageOptions: () => [50, 250, 500, 0],
   ignoreKeys: undefined,
   grid: undefined,
@@ -282,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[]>([])
@@ -332,7 +336,7 @@ const tableOptions = reactive<MDatatableOptions>({
 /** Table */
 
 /** --- */
-const addListBtnComputed = computed(() => {
+/* const addListBtnComputed = computed(() => {
   if (props.addListBtn !== undefined) {
     return props.addListBtn
   }
@@ -340,7 +344,7 @@ const addListBtnComputed = computed(() => {
     return pluginOptions.value.datatable?.addListBtn
   }
   return !1
-})
+}) */
 const hasAddBtn = computed<boolean>(() => {
   if (props.hideAddBtn) {
     return !1
@@ -351,24 +355,25 @@ const hasUpdateBtn = computed<boolean>(() => {
   if (props.hideUpdateBtn) {
     return !1
   }
-  return !!slots.form || !!props.updateRoute || !!props.updateQueryParams
+  return !!slots.form || !!props.updateRoute || props.updateQueryParams
 })
+const hasCloneBtn = computed<boolean>(() => Boolean(props.cloneBtn))
 const hasShowBtn = computed<boolean>(() => {
   if (props.hideShowBtn) {
     return !1
   }
-  return !!slots.show || !!props.showRoute || !!props.showQueryParams
+  return !!slots.show || !!props.showRoute || props.showQueryParams
 })
 const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
 const hasFilterDialog = computed<boolean>(() => !!slots.filter)
-const hasMenu = computed<boolean>(() => {
-  const pdf = !!props.pdf && getRows.value.length > 0
-  const excel = !!props.excel && getRows.value.length > 0
+/* 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')
@@ -1014,7 +1019,6 @@ const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | u
 }
 const contextmenuItemsProp = computed(() => props.contextItems)
 const contextmenuItems = computed<any>(() => ([
-  ...(contextmenuItemsProp.value || []),
   {
     name: 'show',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
@@ -1024,6 +1028,13 @@ const contextmenuItems = computed<any>(() => ([
     showIf: hasShowBtn.value,
     order: 100
   },
+  {
+    name: 'clone',
+    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.clone' : undefined,
+    click: onCloneItem,
+    showIf: hasCloneBtn.value,
+    order: 200
+  },
   {
     name: 'update',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.update' : undefined,
@@ -1031,7 +1042,7 @@ const contextmenuItems = computed<any>(() => ([
       openUpdateDialog(item, index)
     },
     showIf: hasUpdateBtn.value,
-    order: 200
+    order: 300
   },
   {
     name: 'destroy',
@@ -1044,9 +1055,28 @@ const contextmenuItems = computed<any>(() => ([
     attr: {
       color: 'negative'
     },
-    order: 300
-  }
+    order: 400
+  },
+  ...(contextmenuItemsProp.value || [])
 ].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))))
+const onCloneItem = (item: MDtItem) => {
+  item = toValue(item)
+  confirmMessage()
+    .onOk(() => {
+      $q.loading.show()
+      getMythApiServicesSchema().clone(item.id)
+        .then(({ _message }) => {
+          _message && alertSuccess(_message)
+          refreshNoUpdate()
+        })
+        .catch(({ _message }) => {
+          _message && alertError(_message)
+        })
+        .finally(() => {
+          $q.loading.hide()
+        })
+    })
+}
 const endReach = computed<boolean>(() => Boolean(props.endReach))
 const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
 const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
@@ -1551,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"
@@ -1744,6 +1679,7 @@ defineOptions({
                     </q-card>
                   </MModalMenu>
                 </MDtBtn>
+
                 <!--Refresh-->
                 <MDtBtn
                   v-if="!noRefreshBtn"
@@ -1754,6 +1690,7 @@ defineOptions({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh}"
                   @click="refreshNoUpdate()"
                 />
+
                 <!--Fullscreen-->
                 <MDtBtn
                   v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
@@ -1774,6 +1711,15 @@ defineOptions({
                     v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
                     @click="openUpdateDialogNoIndex(tableOptions.selected[0] as any)"
                   />
+                  <MDtBtn
+                    v-if="hasCloneBtn && isSingleSelectedItem"
+                    key="clone-dt-selection-btn"
+                    :disable="tableOptions.loading"
+                    clone
+                    tooltip="labels.clone"
+                    v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
+                    @click="onCloneItem(tableOptions.selected[0] as any)"
+                  />
                   <MDtBtn
                     v-if="hasShowBtn && isSingleSelectedItem"
                     key="show-dt-selection-btn"
@@ -1926,7 +1872,7 @@ defineOptions({
             <q-td :props="noBodyProps">
               <!--Control-->
               <q-btn-dropdown
-                v-if="contextmenuItems.length>contextItemsLength"
+                v-if="contextmenuItems.length > contextItemsLength"
                 v-close-popup
                 :menu-offset="[0,10]"
                 color="primary"
@@ -1934,24 +1880,16 @@ defineOptions({
                 outline
                 v-bind="pluginOptions.dt?.controlDropdown"
               >
-                <q-list>
+                <q-list
+                  :dense="getProp('dense')"
+                  separator
+                >
                   <MDtContextmenuItems
                     :index="noBodyProps.rowIndex"
                     :item="noBodyProps.row"
                     :items="contextmenuItems"
                     display-mode="item"
                   />
-                  <!--<q-item-->
-                  <!--  v-for="contextmenuItem in contextmenuItems"-->
-                  <!--  :key="`dt-r${contextmenuItem.name}`"-->
-                  <!--  v-close-popup-->
-                  <!--  clickable-->
-                  <!--&gt;-->
-                  <!--  <pre>{{ contextmenuItem }}</pre>-->
-                  <!--  <q-item-section>-->
-                  <!--    <q-item-label>{{ contextmenuItem.label }}</q-item-label>-->
-                  <!--  </q-item-section>-->
-                  <!--</q-item>-->
                 </q-list>
               </q-btn-dropdown>
               <MRow

package/src/components/datatable/MDtBtn.vue

@@ -18,6 +18,7 @@ interface Props {
   show?: boolean | undefined;
   update?: boolean | undefined;
   destroy?: boolean | undefined;
+  clone?: boolean | undefined;
   tooltip?: string | null | undefined;
   color?: string | undefined;
   icon?: string | undefined;
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   show: undefined,
   update: undefined,
   destroy: undefined,
+  clone: undefined,
   color: undefined,
   icon: undefined,
   tooltip: undefined,
@@ -46,7 +48,7 @@ type Events = {
 }
 const emit = defineEmits<Events>()
 
-const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy)
+const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy || !!props.clone)
 const { __, props: pluginOptions } = useMyth()
 const getTooltip = computed(() => {
   if (props.tooltip !== undefined) {
@@ -57,6 +59,8 @@ const getTooltip = computed(() => {
     return __('labels.update')
   } else if (props.destroy) {
     return __('labels.destroy')
+  } else if (props.clone) {
+    return __('labels.clone')
   }
   return props.tooltip
 })
@@ -67,6 +71,8 @@ const getIcon = computed(() => {
     return 'ion-ios-create'
   } else if (props.destroy) {
     return 'ion-ios-trash'
+  } else if (props.clone) {
+    return 'ion-copy'
   }
   return props.icon
 })
@@ -83,18 +89,20 @@ const getColor = computed<string | undefined>(() => {
   }
   return props.color
 })
-// const getLabel = computed(() => {
-//   if (props.label) {
-//     return __(props.label)
-//   } else if (props.show) {
-//     return __('labels.show')
-//   } else if (props.update) {
-//     return __('labels.update')
-//   } else if (props.destroy) {
-//     return __('labels.destroy')
-//   }
-//   return props.label
-// })
+const getLabel = computed(() => {
+  if (props.label !== undefined) {
+    return __(props.label)
+  } else if (props.show) {
+    return __('labels.show')
+  } else if (props.update) {
+    return __('labels.update')
+  } else if (props.destroy) {
+    return __('labels.destroy')
+  } else if (props.clone) {
+    return __('labels.clone')
+  }
+  return props.label
+})
 
 defineOptions({
   name: 'MDtBtn',
@@ -111,6 +119,7 @@ defineOptions({
     @click="emit('click',$event)"
   >
     <q-item-section
+      v-if="!!getIcon"
       side
       v-bind="pluginOptions.dt?.MDtBtn?.item?.avatarProps"
     >
@@ -123,7 +132,7 @@ defineOptions({
     <q-item-section v-bind="pluginOptions.dt?.MDtBtn?.item?.labelSectionProps">
       <q-item-label v-bind="pluginOptions.dt?.MDtBtn?.item?.itemLabelProps">
         <slot>
-          {{ label ? __(label) : label }}
+          {{ __(getLabel) }}
         </slot>
       </q-item-label>
     </q-item-section>

package/src/components/datatable/MDtContextmenuItems.vue

@@ -15,6 +15,7 @@ import type { MDatatableDialogsOptions, MDatatableProps } from '../../types'
 import type { UnwrapRef } from 'vue'
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   items: MDatatableProps['contextItems'],
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const itemMode = computed(() => props.displayMode === 'item')
 const { __ } = useMyth()
+const { te } = useI18n({ useScope: 'global' })
 defineOptions({
   name: 'MDtContextmenuItems',
   inheritAttrs: !1
@@ -46,9 +48,7 @@ defineOptions({
       <MDtBtn
         v-if="typeof m.showIf === 'function' ? m.showIf(item,index) : m.showIf"
         :[m.name]="!0"
-        :label="itemMode && m.label === undefined ? __(m.tooltip || m.attr?.label || m.attr?.tooltip || m.name) : (m.label !== undefined ?
-          __(m.label || m.name) :
-          undefined)"
+        :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"
         :tooltip="m.tooltip !== undefined ? m.tooltip : (m.label === undefined ? `labels.${m.name}` : undefined)"
         dense

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/api-helpers.d.ts

@@ -38,6 +38,8 @@ export type HelpersStubSchema = {
 
   update (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
 
+  clone (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
   destroy (id: UrlType, config?: AxiosRequestConfig): Promise<ApiInterface>;
 
   destroyAll (ids?: UrlType[], config?: AxiosRequestConfig): Promise<ApiInterface>;

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/m-datatable.d.ts

@@ -114,6 +114,7 @@ export type MDatatableDialogsOptions<T extends MDDIP = MDDIP> = {
 export interface MDtBtnProps extends MBtnProps {
   show?: boolean;
   update?: boolean;
+  clone?: boolean;
   destroy?: boolean;
   tooltip?: string | undefined;
   color?: string;
@@ -226,6 +227,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   withUpdate?: string | string[];
   hideAddBtn?: boolean;
   hideUpdateBtn?: boolean;
+  cloneBtn?: boolean;
   hideShowBtn?: boolean;
   hideDestroyBtn?: boolean;
   storeRoute?: string | RouteLocationRaw;

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>;

package/src/utils/Helpers.ts

@@ -87,6 +87,12 @@ export const Helpers = {
         data && Helpers.appendArray(formData, data)
         return axios().post(u, formData, config)
       },
+      async clone (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig) {
+        const u = makeUrl(`${id}/Clone`)
+        const formData = new FormData()
+        data && Helpers.appendArray(formData, data)
+        return axios().post(u, formData, config)
+      },
       async destroy (id: UrlType, config?: AxiosRequestConfig) {
         const u = makeUrl(id)
         return axios().delete(u, config)