@mythpe/quasar-ui-qui 0.4.40 → 0.4.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/datatable/MDatatable.vue +327 -347
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.4.40",
3
+ "version": "0.4.41",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
package/src/components/datatable/MDatatable.vue CHANGED
@@ -800,8 +800,11 @@ defineExpose({
800
800
  v-bind="topSlotProps"
801
801
  />
802
802
  <!--Title and Search-->
803
- <MRow :class="{hidden: !hasAddBtn && !getTableTitle && hideTitle && hideSearch}">
804
- <!--Default Title Slot-->
803
+ <MRow
804
+ :class="[{hidden: !hasAddBtn && !getTableTitle && hideTitle && hideSearch},'items-start']"
805
+ col="sm"
806
+ >
807
+ <!--Title & Back & Add & Import-->
805
808
  <slot
806
809
  :dt="datatableItemsScope"
807
810
  :form="useFormContext"
@@ -810,92 +813,76 @@ defineExpose({
810
813
  name="title"
811
814
  >
812
815
  <MCol col="12">
813
- <div class="q-mb-sm">
814
- <MRow class="justify-between">
815
- <!--Back Button-->
816
- <MCol
817
- v-if="!noBackBtn && !hideTitle"
818
- auto
816
+ <MRow
817
+ class="items-start"
818
+ gutter="sm"
819
+ >
820
+ <!--Back Button-->
821
+ <q-btn
822
+ v-if="!noBackBtn && !hideTitle"
823
+ :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
824
+ class="m-datatable__table-back-btn q-mr-sm"
825
+ dense
826
+ flat
827
+ @click="$router.back()"
828
+ />
829
+ <!--Table Title-->
830
+ <div v-if="!!getTableTitle && !hideTitle">
831
+ <div :class="['text-h5 ellipsis m-datatable__table-title',titleClass]">
832
+ <span>{{ getTableTitle }}</span>
833
+ <span v-if="!!help">
834
+ <q-icon
835
+ class="cursor-pointer"
836
+ name="ion-ios-information-circle-outline"
837
+ right
838
+ size="18px"
839
+ >
840
+ <q-tooltip>
841
+ <div class="text-body1">
842
+ {{ __(help) }}
843
+ </div>
844
+ </q-tooltip>
845
+ </q-icon>
846
+ </span>
847
+ </div>
848
+ <slot
849
+ :dt="datatableItemsScope"
850
+ :form="useFormContext"
851
+ :index="dialogItemIndex"
852
+ :item="dialogItem"
853
+ name="subtitle"
819
854
  >
820
- <q-btn
821
- :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
822
- class="m-datatable__table-back-btn q-mr-sm"
823
- flat
824
- @click="$router.back()"
825
- />
826
- </MCol>
827
-
828
- <!--Table Title-->
829
- <MCol col>
830
855
  <div
831
- v-if="!!getTableTitle && !hideTitle"
832
- :class="['text-h5 ellipsis m-datatable__table-title',titleClass]"
856
+ v-if="!!subtitle"
857
+ :class="['m-datatable__table-subtitle',subtitleClass]"
833
858
  >
834
- <span>{{ getTableTitle }}</span>
835
- <span v-if="!!help">
836
- <q-icon
837
- class="cursor-pointer"
838
- name="ion-ios-information-circle-outline"
839
- right
840
- size="18px"
841
- >
842
- <q-tooltip>
843
- <div class="text-body1">
844
- {{ __(help) }}
845
- </div>
846
- </q-tooltip>
847
- </q-icon>
848
- </span>
859
+ {{ __(subtitle) }}
849
860
  </div>
850
- <slot
851
- :dt="datatableItemsScope"
852
- :form="useFormContext"
853
- :index="dialogItemIndex"
854
- :item="dialogItem"
855
- name="subtitle"
856
- >
857
- <div
858
- v-if="!!subtitle"
859
- :class="['m-datatable__table-subtitle',subtitleClass]"
860
- >
861
- {{ __(subtitle) }}
862
- </div>
863
- </slot>
864
- </MCol>
865
-
866
- <div class="flex-break xs" />
867
-
868
- <!--Import Btn-->
869
- <MCol
870
- v-if="!!importBtn"
871
- auto
872
- >
873
- <MDtBtn
874
- color="green"
875
- icon="far fa-file-excel"
876
- label="labels.import"
877
- no-caps
878
- text-color="white"
879
- @click="onOpenImportDialog()"
880
- />
881
- </MCol>
882
-
883
- <!-- Add Btn -->
884
- <MCol
885
- v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
886
- auto
887
- >
888
- <MBtn
889
- :label="getFormTitle"
890
- no-caps
891
- @click="openCreateDialog()"
892
- />
893
- </MCol>
894
- <q-space class="xs" />
895
- </MRow>
896
- </div>
861
+ </slot>
862
+ </div>
863
+ <div class="flex-break xs" />
864
+ <q-space />
865
+ <!--Import Btn-->
866
+ <MBtn
867
+ v-if="!importBtn"
868
+ color="green"
869
+ icon="far fa-file-excel"
870
+ label="labels.import"
871
+ no-caps
872
+ text-color="white"
873
+ @click="onOpenImportDialog()"
874
+ />
875
+ <!--Add Btn-->
876
+ <MBtn
877
+ v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
878
+ :label="getFormTitle"
879
+ no-caps
880
+ @click="openCreateDialog()"
881
+ />
882
+ </MRow>
897
883
  </MCol>
898
884
  </slot>
885
+ <!--Top Search-->
899
886
  <slot
900
887
  :dt="datatableItemsScope"
901
888
  :form="useFormContext"
@@ -903,27 +890,13 @@ defineExpose({
903
890
  :item="dialogItem"
904
891
  name="top-search"
905
892
  />
893
+ <!--Search-->
906
894
  <MCol
907
895
  v-if="!hideSearch"
908
896
  col="12"
897
+ md="6"
909
898
  >
910
899
  <MRow col="xs">
911
- <MSelect
912
- v-model="searchBy"
913
- :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
914
- :emit-value="false"
915
- :field-options="{ controlled: !1 }"
916
- :options="searchByColumns"
917
- :use-input="!1"
918
- autocomplete="none"
919
- col="3"
920
- hide-dropdown-icon
921
- label="replace.search_by"
922
- md="3"
923
- name="search_by"
924
- v-bind="{...theme.inputs as any, ...pluginOptions.dt?.searchInput?.props as any}"
925
- @update:model-value="onSearchByUpdate()"
926
- />
927
900
  <MInput
928
901
  :debounce="searchDebounce"
929
902
  :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
@@ -931,7 +904,7 @@ defineExpose({
931
904
  :model-value="search"
932
905
  :placeholder="searchPlaceholder"
933
906
  autocomplete="none"
934
- col
907
+ col="8"
935
908
  label="labels.search"
936
909
  name="search"
937
910
  outlined
@@ -960,73 +933,77 @@ defineExpose({
960
933
  </q-icon>
961
934
  </template>
962
935
  </MInput>
936
+ <MSelect
937
+ v-model="searchBy"
938
+ :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
939
+ :emit-value="false"
940
+ :field-options="{ controlled: !1 }"
941
+ :options="searchByColumns"
942
+ :options-dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
943
+ :use-input="!1"
944
+ autocomplete="none"
945
+ col
946
+ hide-dropdown-icon
947
+ label="replace.search_by"
948
+ name="search_by"
949
+ v-bind="{...theme.inputs as any, ...pluginOptions.dt?.searchInput?.props as any}"
950
+ @update:model-value="onSearchByUpdate()"
951
+ />
963
952
  </MRow>
964
953
  </MCol>
965
- <slot
966
- :dt="datatableItemsScope"
967
- :form="useFormContext"
968
- :index="dialogItemIndex"
969
- :item="dialogItem"
970
- name="bottom-search"
971
- />
972
- </MRow>
973
- <!--Buttons-->
974
- <MRow
975
- class="items-center justify-between m-datatable__table-top-buttons"
976
- gutter="xs"
977
- style="margin-top: 5px;"
978
- >
979
- <MCol auto>
954
+ <!--Buttons-->
955
+ <MCol col>
980
956
  <MRow
981
- class="items-center"
957
+ class="items-center m-datatable__table-top-buttons"
982
958
  gutter="xs"
983
959
  >
984
- <!-- Filter dialog -->
985
- <MDtBtn
986
- v-if="hasFilterDialog"
987
- key="filter-selection-btn"
988
- :disable="loading"
989
- color="primary"
990
- icon="ion-ios-options"
991
- label="myth.datatable.hints.filter"
992
- text-color="on-primary"
993
- v-bind="{...pluginOptions.dt?.buttons?.filter as any}"
994
- >
995
- <MModalMenu
996
- v-model="filterDialogModel"
997
- :offset="[10,10]"
998
- no-close-btn
999
- persistent
1000
- position="top"
1001
- v-bind="pluginOptions.dt?.filterDialogProps as any"
1002
- @before-show="beforeCloseFilterDialog"
960
+ <MCol auto>
961
+ <MRow
962
+ class="items-center"
963
+ gutter="xs"
1003
964
  >
1004
- <q-card
1005
- :style="`max-width: 600px; width: ${$q.screen.width}px`"
965
+ <!-- Filter dialog -->
966
+ <MBtn
967
+ v-if="hasFilterDialog"
968
+ key="filter-selection-btn"
969
+ :disable="loading"
970
+ color=""
1006
971
  flat
1007
- square
972
+ icon="ion-ios-options"
973
+ label="myth.datatable.hints.filter"
974
+ text-color=""
1008
975
  >
1009
- <MContainer class="q-pa-lg">
1010
- <q-toolbar :class="{'q-pa-none': isSmall}">
1011
- <q-toolbar-title>
1012
- {{ __('myth.datatable.filter.title') }}
1013
- </q-toolbar-title>
1014
- </q-toolbar>
1015
- <q-separator />
1016
- <MRow class="items-center">
1017
- <MCol col="12">
1018
- <MContainer>
1019
- <slot
1020
- :dt="datatableItemsScope"
1021
- :filter="tempFilterForm"
1022
- :form="useFormContext"
1023
- :index="dialogItemIndex"
1024
- :item="dialogItem"
1025
- name="filter"
1026
- />
1027
- </MContainer>
1028
- </MCol>
1029
- <MCol col="12">
976
+ <MModalMenu
977
+ v-model="filterDialogModel"
978
+ :offset="[0,10]"
979
+ no-close-btn
980
+ persistent
981
+ v-bind="pluginOptions.dt?.filterDialogProps as any"
982
+ @before-show="beforeCloseFilterDialog"
983
+ >
984
+ <q-card
985
+ :style="`max-width: 600px; width: ${$q.screen.width}px`"
986
+ flat
987
+ square
988
+ >
989
+ <q-toolbar :class="{'q-pa-none': isSmall}">
990
+ <q-toolbar-title>
991
+ {{ __('myth.datatable.filter.title') }}
992
+ </q-toolbar-title>
993
+ </q-toolbar>
994
+ <q-separator />
995
+ <MContainer size="sm">
996
+ <slot
997
+ :dt="datatableItemsScope"
998
+ :filter="tempFilterForm"
999
+ :form="useFormContext"
1000
+ :index="dialogItemIndex"
1001
+ :item="dialogItem"
1002
+ name="filter"
1003
+ />
1004
+ </MContainer>
1005
+ <q-separator color="primary" />
1006
+ <MContainer size="sm">
1030
1007
  <MRow class="justify-between">
1031
1008
  <MBtn
1032
1009
  v-close-popup
@@ -1043,203 +1020,206 @@ defineExpose({
1043
1020
  @click="closeFilterDialog"
1044
1021
  />
1045
1022
  </MRow>
1046
- </MCol>
1047
- </MRow>
1048
- </MContainer>
1049
- </q-card>
1050
- </MModalMenu>
1051
- </MDtBtn>
1052
- <!-- Export Buttons-->
1053
- <MDtBtn
1054
- v-if="(pdf || excel)"
1055
- :disable="loading || getRows.length < 1"
1056
- icon="ion-ios-cloud-download"
1057
- label="labels.export"
1058
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, color: undefined, textColor: undefined,dense: false}"
1059
- >
1060
- <q-menu
1061
- :offset="[0,10]"
1062
- fit
1063
- >
1064
- <q-list>
1065
- <template
1066
- v-for="(s,sdx) in ['pdf','excel'] as MDtExportOptions[]"
1067
- :key="`dt-export-${s}-${sdx}`"
1023
+ </MContainer>
1024
+ </q-card>
1025
+ </MModalMenu>
1026
+ </MBtn>
1027
+ <!-- Export Buttons-->
1028
+ <MBtn
1029
+ v-if="(pdf || excel)"
1030
+ :disable="loading || getRows.length < 1"
1031
+ color=""
1032
+ flat
1033
+ icon="ion-ios-cloud-download"
1034
+ label="labels.export"
1035
+ text-color=""
1036
+ >
1037
+ <q-menu
1038
+ :offset="[0,10]"
1039
+ fit
1068
1040
  >
1069
- <q-item
1070
- v-if="hasExport(s)"
1071
- v-close-popup
1072
- clickable
1073
- @click="exportData(s)"
1074
- >
1075
- <q-item-section>
1076
- <q-item-label>{{ __(s) }}</q-item-label>
1077
- </q-item-section>
1078
- </q-item>
1079
- </template>
1080
- </q-list>
1081
- </q-menu>
1082
- </MDtBtn>
1083
- <!--Refresh-->
1084
- <MDtBtn
1085
- v-if="!noRefreshBtn"
1086
- key="refresh-selection-btn"
1087
- :disable="loading"
1088
- icon="ion-ios-refresh"
1089
- tooltip="myth.datatable.hints.refresh"
1090
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh as any}"
1091
- @click="refreshNoUpdate()"
1092
- />
1093
- <!--Fullscreen-->
1094
- <MDtBtn
1095
- v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
1096
- key="fullscreen-selection-btn"
1097
- :disable="loading"
1098
- :icon="fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
1099
- :tooltip="`myth.datatable.${fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
1100
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen as any}"
1101
- @click="fullscreen = !fullscreen"
1102
- />
1103
- <template v-if="hasSelectedItem">
1104
- <MDtBtn
1105
- v-if="hasUpdateBtn && isSingleSelectedItem"
1106
- key="update-dt-selection-btn"
1107
- :disable="loading"
1108
- icon="ion-ios-create"
1109
- update
1110
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1111
- @click="openUpdateDialogNoIndex(selected[0] as any)"
1112
- />
1113
- <MDtBtn
1114
- v-if="hasCloneBtn && isSingleSelectedItem"
1115
- key="clone-dt-selection-btn"
1116
- :disable="loading"
1117
- clone
1118
- tooltip="labels.clone"
1119
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1120
- @click="onCloneItem(selected[0] as any)"
1121
- />
1122
- <MDtBtn
1123
- v-if="hasShowBtn && isSingleSelectedItem"
1124
- key="show-dt-selection-btn"
1125
- :disable="loading"
1126
- icon="ion-ios-eye"
1127
- show
1128
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1129
- @click="openShowDialogNoIndex(selected[0] as any)"
1130
- />
1131
- <MDtBtn
1132
- v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
1133
- key="destroy-dt-selection-btn"
1134
- :disable="!hasSelectedItem || loading"
1135
- color="negative"
1136
- destroy
1137
- icon="ion-ios-trash"
1138
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1139
- @click="deleteSelectionItem()"
1140
- />
1141
- <template
1142
- v-for="(contextBtn,i) in contextItems as GenericMDtBtn[]"
1143
- :key="`top-s-${i}`"
1144
- >
1041
+ <q-list>
1042
+ <template
1043
+ v-for="(s,sdx) in ['pdf','excel'] as MDtExportOptions[]"
1044
+ :key="`dt-export-${s}-${sdx}`"
1045
+ >
1046
+ <q-item
1047
+ v-if="hasExport(s)"
1048
+ v-close-popup
1049
+ clickable
1050
+ @click="exportData(s)"
1051
+ >
1052
+ <q-item-section>
1053
+ <q-item-label>{{ __(s) }}</q-item-label>
1054
+ </q-item-section>
1055
+ </q-item>
1056
+ </template>
1057
+ </q-list>
1058
+ </q-menu>
1059
+ </MBtn>
1060
+ <!--Refresh-->
1061
+ <MDtBtn
1062
+ v-if="!noRefreshBtn"
1063
+ key="refresh-selection-btn"
1064
+ :disable="loading"
1065
+ dense
1066
+ flat
1067
+ icon="ion-ios-refresh"
1068
+ round
1069
+ tooltip="myth.datatable.hints.refresh"
1070
+ @click="refreshNoUpdate()"
1071
+ />
1072
+ <!--Fullscreen-->
1145
1073
  <MDtBtn
1146
- v-if="showIfContext(contextBtn)"
1147
- :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
1148
- __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
1149
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any,to: typeof contextBtn.attr?.to === 'function' ? contextBtn.attr.to(selected[0],0) : contextBtn.attr?.to}"
1150
- @click="contextBtn.attr?.to ? undefined : onClickTopMenu(contextBtn)"
1074
+ v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
1075
+ key="fullscreen-selection-btn"
1076
+ :disable="loading"
1077
+ :icon="fullscreen ? 'ion-ios-contract' : 'fullscreen'"
1078
+ :tooltip="`myth.datatable.${fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
1079
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen as any}"
1080
+ @click="fullscreen = !fullscreen"
1151
1081
  />
1152
- </template>
1153
- </template>
1082
+ <!-- Manage Columns -->
1083
+ <MDtBtn
1084
+ v-if="manageColumns && !manageColumnsInline"
1085
+ key="manage-columns-btn"
1086
+ :disable="loading"
1087
+ flat
1088
+ icon="mdi-table"
1089
+ tooltip="myth.datatable.columnsToShowCaption"
1090
+ v-bind="pluginOptions.dt?.buttons?.filter as any"
1091
+ >
1092
+ <MModalMenu
1093
+ :no-close-btn="$q.screen.gt.xs"
1094
+ :offset="[10,10]"
1095
+ >
1096
+ <q-card style="min-width: 250px; max-width: 900px">
1097
+ <q-card-section>
1098
+ <div class="text-body1 q-mb-xs">
1099
+ {{ __('myth.datatable.columnsToShow') }}
1100
+ </div>
1101
+ <div class="text-body2">
1102
+ <q-icon name="ion-ios-information-circle-outline" />
1103
+ {{ __('myth.datatable.columnsToShowCaption') }}
1104
+ </div>
1105
+ </q-card-section>
1106
+ <q-separator />
1107
+ <q-card-section>
1108
+ <div class="row">
1109
+ <template
1110
+ v-for="h in getHeaders"
1111
+ :key="h.name"
1112
+ >
1113
+ <q-checkbox
1114
+ v-model="visibleHeaders"
1115
+ :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1116
+ :label="h.label"
1117
+ :val="h.name"
1118
+ />
1119
+ </template>
1120
+ </div>
1121
+ </q-card-section>
1122
+ <q-separator />
1123
+ <q-card-section>
1124
+ <MBtn
1125
+ v-if="$q.screen.gt.xs"
1126
+ v-close-popup
1127
+ :class="{'q-mr-sm': !$q.screen.xs}"
1128
+ color="primary"
1129
+ label="labels.close"
1130
+ no-caps
1131
+ style="min-width: 100px"
1132
+ text-color="on-primary"
1133
+ unelevated
1134
+ />
1135
+ <MBtn
1136
+ :class="{'full-width': $q.screen.xs}"
1137
+ :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1138
+ color="primary"
1139
+ no-caps
1140
+ style="min-width: 100px"
1141
+ text-color="on-primary"
1142
+ unelevated
1143
+ @click="onManageColumnsClick()"
1144
+ />
1145
+ </q-card-section>
1146
+ </q-card>
1147
+ </MModalMenu>
1148
+ </MDtBtn>
1149
+ <!-- Wrap Btn -->
1150
+ <MDtBtn
1151
+ v-if="!computedNoWrapBtn"
1152
+ :icon="`ion-ios-${wrapCellsRef ? 'code' : 'code-working'}`"
1153
+ flat
1154
+ tooltip="myth.datatable.wrapBtn"
1155
+ @click="wrapCellsRef = !wrapCellsRef"
1156
+ />
1157
+ </MRow>
1158
+ </MCol>
1154
1159
  </MRow>
1155
1160
  </MCol>
1156
-
1157
- <MCol
1158
- v-if="computedNoWrapBtn || manageColumns"
1159
- auto
1160
- >
1161
- <MRow
1162
- class="items-center"
1163
- gutter="xs"
1161
+ <slot
1162
+ :dt="datatableItemsScope"
1163
+ :form="useFormContext"
1164
+ :index="dialogItemIndex"
1165
+ :item="dialogItem"
1166
+ name="bottom-search"
1167
+ />
1168
+ </MRow>
1169
+ <template v-if="hasSelectedItem">
1170
+ <MRow gutter="sm">
1171
+ <MDtBtn
1172
+ v-if="hasUpdateBtn && isSingleSelectedItem"
1173
+ key="update-dt-selection-btn"
1174
+ :disable="loading"
1175
+ icon="ion-ios-create"
1176
+ update
1177
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1178
+ @click="openUpdateDialogNoIndex(selected[0] as any)"
1179
+ />
1180
+ <MDtBtn
1181
+ v-if="hasCloneBtn && isSingleSelectedItem"
1182
+ key="clone-dt-selection-btn"
1183
+ :disable="loading"
1184
+ clone
1185
+ tooltip="labels.clone"
1186
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1187
+ @click="onCloneItem(selected[0] as any)"
1188
+ />
1189
+ <MDtBtn
1190
+ v-if="hasShowBtn && isSingleSelectedItem"
1191
+ key="show-dt-selection-btn"
1192
+ :disable="loading"
1193
+ icon="ion-ios-eye"
1194
+ show
1195
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1196
+ @click="openShowDialogNoIndex(selected[0] as any)"
1197
+ />
1198
+ <MDtBtn
1199
+ v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
1200
+ key="destroy-dt-selection-btn"
1201
+ :disable="!hasSelectedItem || loading"
1202
+ color="negative"
1203
+ destroy
1204
+ icon="ion-ios-trash"
1205
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1206
+ @click="deleteSelectionItem()"
1207
+ />
1208
+ <template
1209
+ v-for="(contextBtn,i) in contextItems as GenericMDtBtn[]"
1210
+ :key="`top-s-${i}`"
1164
1211
  >
1165
- <!-- Manage Columns -->
1166
1212
  <MDtBtn
1167
- v-if="manageColumns && !manageColumnsInline"
1168
- key="manage-columns-btn"
1169
- :disable="loading"
1170
- flat
1171
- icon="ion-ios-desktop"
1172
- tooltip="myth.datatable.columnsToShowCaption"
1173
- v-bind="pluginOptions.dt?.buttons?.filter as any"
1174
- >
1175
- <MModalMenu
1176
- :no-close-btn="$q.screen.gt.xs"
1177
- :offset="[10,10]"
1178
- >
1179
- <q-card style="min-width: 250px; max-width: 900px">
1180
- <q-card-section>
1181
- <div class="text-body1 q-mb-xs">
1182
- {{ __('myth.datatable.columnsToShow') }}
1183
- </div>
1184
- <div class="text-body2">
1185
- <q-icon name="ion-ios-information-circle-outline" />
1186
- {{ __('myth.datatable.columnsToShowCaption') }}
1187
- </div>
1188
- </q-card-section>
1189
- <q-separator />
1190
- <q-card-section>
1191
- <div class="row">
1192
- <template
1193
- v-for="h in getHeaders"
1194
- :key="h.name"
1195
- >
1196
- <q-checkbox
1197
- v-model="visibleHeaders"
1198
- :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1199
- :label="h.label"
1200
- :val="h.name"
1201
- />
1202
- </template>
1203
- </div>
1204
- </q-card-section>
1205
- <q-separator />
1206
- <q-card-section>
1207
- <MBtn
1208
- v-if="$q.screen.gt.xs"
1209
- v-close-popup
1210
- :class="{'q-mr-sm': !$q.screen.xs}"
1211
- color="primary"
1212
- label="labels.close"
1213
- no-caps
1214
- style="min-width: 100px"
1215
- text-color="on-primary"
1216
- unelevated
1217
- />
1218
- <MBtn
1219
- :class="{'full-width': $q.screen.xs}"
1220
- :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1221
- color="primary"
1222
- no-caps
1223
- style="min-width: 100px"
1224
- text-color="on-primary"
1225
- unelevated
1226
- @click="onManageColumnsClick()"
1227
- />
1228
- </q-card-section>
1229
- </q-card>
1230
- </MModalMenu>
1231
- </MDtBtn>
1232
- <!-- Wrap Btn -->
1233
- <MDtBtn
1234
- v-if="!computedNoWrapBtn"
1235
- :icon="`ion-ios-${wrapCellsRef ? 'code' : 'code-working'}`"
1236
- flat
1237
- tooltip="myth.datatable.wrapBtn"
1238
- @click="wrapCellsRef = !wrapCellsRef"
1213
+ v-if="showIfContext(contextBtn)"
1214
+ :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
1215
+ __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
1216
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any,to: typeof contextBtn.attr?.to === 'function' ? contextBtn.attr.to(selected[0],0) : contextBtn.attr?.to}"
1217
+ @click="contextBtn.attr?.to ? undefined : onClickTopMenu(contextBtn)"
1239
1218
  />
1240
- </MRow>
1241
- </MCol>
1242
- </MRow>
1219
+ </template>
1220
+ </MRow>
1221
+ </template>
1222
+
1243
1223
  <!-- Manage Columns -->
1244
1224
  <MRow
1245
1225
  v-if="manageColumns && manageColumnsInline"