@mythpe/quasar-ui-qui 0.3.27 → 0.3.28

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/datatable/MDatatable.vue +284 -255
  3. package/src/components/datatable/MDtColorColumn.vue +13 -4
  4. package/src/components/datatable/MDtCopyColumn.vue +10 -2
  5. package/src/components/datatable/MDtDescColumn.vue +14 -7
  6. package/src/components/datatable/MDtImageColumn.vue +0 -4
  7. package/src/components/datatable/MDtSarColumn.vue +11 -4
  8. package/src/composable/useDtHelpers.ts +5 -1
  9. package/src/composable/useMyth.ts +23 -15
  10. package/src/types/m-datatable.d.ts +9 -0
  11. package/src/types/m-helpers.d.ts +6 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.3.27",
3
+ "version": "0.3.28",
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
@@ -25,6 +25,7 @@ import MDtCopyColumn from './MDtCopyColumn.vue'
25
25
 
26
26
  type Props = {
27
27
  controlKey?: MDatatableProps['controlKey'];
28
+ controlStart?: boolean;
28
29
  defaultItem?: MDatatableProps['defaultItem'];
29
30
  contextItems?: MDatatableProps['contextItems'];
30
31
  contextItemsLength?: MDatatableProps['contextItemsLength'];
@@ -92,23 +93,25 @@ type Props = {
92
93
  help?: MDatatableProps['help'];
93
94
  noWrapBtn?: boolean;
94
95
  lockValue?: MDatatableProps['lockValue'];
96
+ align?: MDatatableProps['align'];
95
97
  }
96
98
 
97
99
  const props = withDefaults(defineProps<Props>(), {
98
100
  rows: undefined,
99
- controlKey: () => 'control',
101
+ controlKey: 'control',
102
+ controlStart: undefined,
100
103
  defaultItem: undefined,
101
104
  contextItems: undefined,
102
105
  contextItemsLength: 4,
103
106
  hideAutoMessage: undefined,
104
107
  headers: () => ([]),
105
- serviceName: () => '',
108
+ serviceName: '',
106
109
  requestParams: undefined,
107
110
  pdf: undefined,
108
111
  excel: undefined,
109
112
  exportUrl: undefined,
110
113
  hideSearch: !1,
111
- searchDebounce: () => 600,
114
+ searchDebounce: 600,
112
115
  withIndex: undefined,
113
116
  withStore: undefined,
114
117
  withShow: undefined,
@@ -162,7 +165,8 @@ const props = withDefaults(defineProps<Props>(), {
162
165
  descColumns: undefined,
163
166
  help: undefined,
164
167
  noWrapBtn: undefined,
165
- lockValue: undefined
168
+ lockValue: undefined,
169
+ align: 'left'
166
170
  })
167
171
 
168
172
  interface Emits {
@@ -652,12 +656,14 @@ defineExpose({
652
656
  <template v-else-if="computedColorColumns.indexOf(col.name) !== -1">
653
657
  <MDtColorColumn
654
658
  v-if="col.value !== undefined && col.value !== null"
659
+ :align="col.align as any"
655
660
  :value="col.value"
656
661
  />
657
662
  </template>
658
663
  <template v-else-if="computedSarColumns.indexOf(col.name) !== -1">
659
664
  <MDtSarColumn
660
665
  v-if="col.value !== undefined && col.value !== null"
666
+ :align="col.align as any"
661
667
  :copy="computedCopyColumns.includes(col.name)"
662
668
  :copy-value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
663
669
  :value="col.value"
@@ -666,12 +672,16 @@ defineExpose({
666
672
  <template v-else-if="computedCopyColumns.indexOf(col.name) !== -1">
667
673
  <MDtCopyColumn
668
674
  v-if="col.value !== undefined && col.value !== null"
675
+ :align="col.align as any || undefined"
669
676
  :label="col.value"
670
677
  :value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
671
678
  />
672
679
  </template>
673
680
  <template v-else-if="computedDescColumns.indexOf(col.name) !== -1">
674
- <MDtDescColumn :value="col.value" />
681
+ <MDtDescColumn
682
+ :align="col.align as any || undefined"
683
+ :value="col.value"
684
+ />
675
685
  </template>
676
686
  <template v-else-if="col.name === controlKey">
677
687
  <MRow
@@ -916,249 +926,264 @@ defineExpose({
916
926
  />
917
927
  </MRow>
918
928
  <!--Buttons-->
919
- <MRow class="q-gutter-x-sm q-gutter-xs-y-sm items-center">
920
- <!-- Export PDF-->
921
- <MDtBtn
922
- v-if="pdf && getRows.length > 0"
923
- :disable="loading"
924
- icon="fa-solid fa-file-pdf"
925
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'red'}"
926
- @click="exportData('pdf')"
927
- >
928
- <q-tooltip class="m-dt-btn-tooltip">
929
- {{ __('myth.titles.exportPdf') }}
930
- </q-tooltip>
931
- </MDtBtn>
932
- <!-- Export Excel-->
933
- <MDtBtn
934
- v-if="excel && getRows.length > 0"
935
- icon="fa-solid fa-file-excel"
936
- :disable="loading"
937
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'green'}"
938
- @click="exportData('excel')"
939
- >
940
- <q-tooltip class="m-dt-btn-tooltip">
941
- {{ __('myth.titles.exportExcel') }}
942
- </q-tooltip>
943
- </MDtBtn>
944
- <!-- Filter dialog -->
945
- <MDtBtn
946
- v-if="hasFilterDialog"
947
- key="filter-selection-btn"
948
- color="brand"
949
- icon="ion-ios-options"
950
- label="myth.datatable.hints.filter"
951
- text-color="on-brand"
952
- :disable="loading"
953
- v-bind="{...pluginOptions.dt?.buttons?.filter as any}"
954
- >
955
- <MModalMenu
956
- v-model="filterDialogModel"
957
- :offset="[10,10]"
958
- no-close-btn
959
- persistent
960
- position="top"
961
- v-bind="pluginOptions.dt?.filterDialogProps as any"
962
- @before-show="beforeCloseFilterDialog"
929
+ <MRow
930
+ class="items-center justify-between"
931
+ gutter="xs"
932
+ >
933
+ <MCol auto>
934
+ <MRow
935
+ class="items-center"
936
+ gutter="xs"
963
937
  >
964
- <q-card
965
- :style="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
966
- flat
967
- square
938
+ <!-- Export PDF-->
939
+ <MDtBtn
940
+ v-if="pdf && getRows.length > 0"
941
+ :disable="loading"
942
+ icon="fa-solid fa-file-pdf"
943
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'red'}"
944
+ @click="exportData('pdf')"
968
945
  >
969
- <MContainer class="q-pa-lg">
970
- <q-toolbar :class="{'q-pa-none': isSmall}">
971
- <q-toolbar-title>
972
- {{ __('myth.datatable.filter.title') }}
973
- </q-toolbar-title>
974
- </q-toolbar>
975
- <q-separator />
976
- <MRow class="items-center">
977
- <MCol col="12">
978
- <MContainer>
979
- <slot
980
- :dt="datatableItemsScope"
981
- :filter="tempFilterForm"
982
- :form="useFormContext"
983
- :index="dialogItemIndex"
984
- :item="dialogItem"
985
- name="filter"
986
- />
987
- </MContainer>
988
- </MCol>
989
- <MCol
990
- class="q-pt-lg"
991
- col="12"
992
- >
993
- <MRow class="justify-between">
994
- <MBtn
995
- v-close-popup
996
- :label="__('myth.datatable.filter.save')"
997
- style="min-width: 110px"
998
- v-bind="pluginOptions.dt?.dialogButtonsProps as any"
999
- @click="saveFilterDialog"
1000
- />
1001
- <MBtn
1002
- v-close-popup
1003
- :label="__('myth.datatable.filter.cancel')"
1004
- style="min-width: 100px"
1005
- v-bind="pluginOptions.dt?.dialogButtonsProps as any"
1006
- @click="closeFilterDialog"
1007
- />
946
+ <q-tooltip class="m-dt-btn-tooltip">
947
+ {{ __('myth.titles.exportPdf') }}
948
+ </q-tooltip>
949
+ </MDtBtn>
950
+ <!-- Export Excel-->
951
+ <MDtBtn
952
+ v-if="excel && getRows.length > 0"
953
+ :disable="loading"
954
+ icon="fa-solid fa-file-excel"
955
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'green'}"
956
+ @click="exportData('excel')"
957
+ >
958
+ <q-tooltip class="m-dt-btn-tooltip">
959
+ {{ __('myth.titles.exportExcel') }}
960
+ </q-tooltip>
961
+ </MDtBtn>
962
+ <!-- Filter dialog -->
963
+ <MDtBtn
964
+ v-if="hasFilterDialog"
965
+ key="filter-selection-btn"
966
+ :disable="loading"
967
+ color="brand"
968
+ icon="ion-ios-options"
969
+ label="myth.datatable.hints.filter"
970
+ text-color="on-brand"
971
+ v-bind="{...pluginOptions.dt?.buttons?.filter as any}"
972
+ >
973
+ <MModalMenu
974
+ v-model="filterDialogModel"
975
+ :offset="[10,10]"
976
+ no-close-btn
977
+ persistent
978
+ position="top"
979
+ v-bind="pluginOptions.dt?.filterDialogProps as any"
980
+ @before-show="beforeCloseFilterDialog"
981
+ >
982
+ <q-card
983
+ :style="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
984
+ flat
985
+ square
986
+ >
987
+ <MContainer class="q-pa-lg">
988
+ <q-toolbar :class="{'q-pa-none': isSmall}">
989
+ <q-toolbar-title>
990
+ {{ __('myth.datatable.filter.title') }}
991
+ </q-toolbar-title>
992
+ </q-toolbar>
993
+ <q-separator />
994
+ <MRow class="items-center">
995
+ <MCol col="12">
996
+ <MContainer>
997
+ <slot
998
+ :dt="datatableItemsScope"
999
+ :filter="tempFilterForm"
1000
+ :form="useFormContext"
1001
+ :index="dialogItemIndex"
1002
+ :item="dialogItem"
1003
+ name="filter"
1004
+ />
1005
+ </MContainer>
1006
+ </MCol>
1007
+ <MCol
1008
+ class="q-pt-lg"
1009
+ col="12"
1010
+ >
1011
+ <MRow class="justify-between">
1012
+ <MBtn
1013
+ v-close-popup
1014
+ :label="__('myth.datatable.filter.save')"
1015
+ style="min-width: 110px"
1016
+ v-bind="pluginOptions.dt?.dialogButtonsProps as any"
1017
+ @click="saveFilterDialog"
1018
+ />
1019
+ <MBtn
1020
+ v-close-popup
1021
+ :label="__('myth.datatable.filter.cancel')"
1022
+ style="min-width: 100px"
1023
+ v-bind="pluginOptions.dt?.dialogButtonsProps as any"
1024
+ @click="closeFilterDialog"
1025
+ />
1026
+ </MRow>
1027
+ </MCol>
1008
1028
  </MRow>
1009
- </MCol>
1010
- </MRow>
1011
- </MContainer>
1012
- </q-card>
1013
- </MModalMenu>
1014
- </MDtBtn>
1015
- <!--Refresh-->
1016
- <MDtBtn
1017
- v-if="!noRefreshBtn"
1018
- key="refresh-selection-btn"
1019
- :disable="loading"
1020
- icon="ion-ios-refresh"
1021
- tooltip="myth.datatable.hints.refresh"
1022
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh as any}"
1023
- @click="refreshNoUpdate()"
1024
- />
1025
- <!--Fullscreen-->
1026
- <MDtBtn
1027
- v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
1028
- key="fullscreen-selection-btn"
1029
- :disable="loading"
1030
- :icon="fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
1031
- :tooltip="`myth.datatable.${fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
1032
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen as any}"
1033
- @click="fullscreen = !fullscreen"
1034
- />
1035
- <template v-if="hasSelectedItem">
1036
- <MDtBtn
1037
- v-if="hasUpdateBtn && isSingleSelectedItem"
1038
- key="update-dt-selection-btn"
1039
- :disable="loading"
1040
- icon="ion-ios-create"
1041
- update
1042
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1043
- @click="openUpdateDialogNoIndex(selected[0] as any)"
1044
- />
1045
- <MDtBtn
1046
- v-if="hasCloneBtn && isSingleSelectedItem"
1047
- key="clone-dt-selection-btn"
1048
- :disable="loading"
1049
- clone
1050
- tooltip="labels.clone"
1051
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1052
- @click="onCloneItem(selected[0] as any)"
1053
- />
1054
- <MDtBtn
1055
- v-if="hasShowBtn && isSingleSelectedItem"
1056
- key="show-dt-selection-btn"
1057
- :disable="loading"
1058
- icon="ion-ios-eye"
1059
- show
1060
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1061
- @click="openShowDialogNoIndex(selected[0] as any)"
1062
- />
1063
- <MDtBtn
1064
- v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
1065
- key="destroy-dt-selection-btn"
1066
- :disable="!hasSelectedItem || loading"
1067
- color="negative"
1068
- destroy
1069
- icon="ion-ios-trash"
1070
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1071
- @click="deleteSelectionItem()"
1072
- />
1073
- <template
1074
- v-for="(contextBtn,i) in contextItems as GenericMDtBtn[]"
1075
- :key="`top-s-${i}`"
1076
- >
1029
+ </MContainer>
1030
+ </q-card>
1031
+ </MModalMenu>
1032
+ </MDtBtn>
1033
+ <!--Refresh-->
1077
1034
  <MDtBtn
1078
- v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf !==!1) && ( (contextBtn.click && isSingleSelectedItem)
1079
- || (contextBtn.multiClick && !isSingleSelectedItem) )"
1080
- :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
1081
- __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
1082
- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any}"
1083
- @click="onClickTopMenu(contextBtn)"
1035
+ v-if="!noRefreshBtn"
1036
+ key="refresh-selection-btn"
1037
+ :disable="loading"
1038
+ icon="ion-ios-refresh"
1039
+ tooltip="myth.datatable.hints.refresh"
1040
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh as any}"
1041
+ @click="refreshNoUpdate()"
1084
1042
  />
1085
- </template>
1086
- </template>
1087
-
1088
- <q-space />
1089
- <!-- Manage Columns -->
1090
- <MDtBtn
1091
- v-if="manageColumns"
1092
- key="manage-columns-btn"
1093
- :disable="loading"
1094
- color="brand"
1095
- icon="ion-ios-desktop"
1096
- label="myth.datatable.columnsToShow"
1097
- text-color="on-brand"
1098
- tooltip="myth.datatable.columnsToShowCaption"
1099
- v-bind="pluginOptions.dt?.buttons?.filter as any"
1100
- >
1101
- <MModalMenu
1102
- :no-close-btn="$q.screen.gt.xs"
1103
- :offset="[10,10]"
1104
- >
1105
- <q-card style="min-width: 250px; max-width: 900px">
1106
- <q-card-section>
1107
- <div class="text-body1 q-mb-md">
1108
- {{ __('myth.datatable.columnsToShow') }}
1109
- </div>
1110
- <div class="text-body2">
1111
- <q-icon name="ion-ios-information-circle-outline" />
1112
- {{ __('myth.datatable.columnsToShowCaption') }}
1113
- </div>
1114
- </q-card-section>
1115
- <q-card-section>
1116
- <template
1117
- v-for="h in getHeaders"
1118
- :key="h.name"
1119
- >
1120
- <q-checkbox
1121
- v-model="visibleHeaders"
1122
- :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1123
- :label="h.label"
1124
- :val="h.name"
1125
- />
1126
- </template>
1127
- </q-card-section>
1128
- <q-card-section>
1129
- <MBtn
1130
- v-if="$q.screen.gt.xs"
1131
- v-close-popup
1132
- :class="{'q-mr-sm': !$q.screen.xs}"
1133
- color="brand"
1134
- label="labels.close"
1135
- no-caps
1136
- style="min-width: 100px"
1137
- text-color="on-brand"
1138
- unelevated
1139
- />
1140
- <MBtn
1141
- :class="{'full-width': $q.screen.xs}"
1142
- :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1143
- color="brand"
1144
- no-caps
1145
- style="min-width: 100px"
1146
- text-color="on-brand"
1147
- unelevated
1148
- @click="onManageColumnsClick()"
1043
+ <!--Fullscreen-->
1044
+ <MDtBtn
1045
+ v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
1046
+ key="fullscreen-selection-btn"
1047
+ :disable="loading"
1048
+ :icon="fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
1049
+ :tooltip="`myth.datatable.${fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
1050
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen as any}"
1051
+ @click="fullscreen = !fullscreen"
1052
+ />
1053
+ <template v-if="hasSelectedItem">
1054
+ <MDtBtn
1055
+ v-if="hasUpdateBtn && isSingleSelectedItem"
1056
+ key="update-dt-selection-btn"
1057
+ :disable="loading"
1058
+ icon="ion-ios-create"
1059
+ update
1060
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1061
+ @click="openUpdateDialogNoIndex(selected[0] as any)"
1062
+ />
1063
+ <MDtBtn
1064
+ v-if="hasCloneBtn && isSingleSelectedItem"
1065
+ key="clone-dt-selection-btn"
1066
+ :disable="loading"
1067
+ clone
1068
+ tooltip="labels.clone"
1069
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1070
+ @click="onCloneItem(selected[0] as any)"
1071
+ />
1072
+ <MDtBtn
1073
+ v-if="hasShowBtn && isSingleSelectedItem"
1074
+ key="show-dt-selection-btn"
1075
+ :disable="loading"
1076
+ icon="ion-ios-eye"
1077
+ show
1078
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1079
+ @click="openShowDialogNoIndex(selected[0] as any)"
1080
+ />
1081
+ <MDtBtn
1082
+ v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
1083
+ key="destroy-dt-selection-btn"
1084
+ :disable="!hasSelectedItem || loading"
1085
+ color="negative"
1086
+ destroy
1087
+ icon="ion-ios-trash"
1088
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"
1089
+ @click="deleteSelectionItem()"
1090
+ />
1091
+ <template
1092
+ v-for="(contextBtn,i) in contextItems as GenericMDtBtn[]"
1093
+ :key="`top-s-${i}`"
1094
+ >
1095
+ <MDtBtn
1096
+ v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf !==!1) && ( (contextBtn.click && isSingleSelectedItem)
1097
+ || (contextBtn.multiClick && !isSingleSelectedItem) )"
1098
+ :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
1099
+ __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
1100
+ v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any}"
1101
+ @click="onClickTopMenu(contextBtn)"
1149
1102
  />
1150
- </q-card-section>
1151
- </q-card>
1152
- </MModalMenu>
1153
- </MDtBtn>
1154
- <!-- Wrap Btn -->
1155
- <MDtBtn
1156
- v-if="!computedNoWrapBtn"
1157
- :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
1158
- flat
1159
- tooltip="myth.datatable.wrapBtn"
1160
- @click="wrapCellsRef = !wrapCellsRef"
1161
- />
1103
+ </template>
1104
+ </template>
1105
+ </MRow>
1106
+ </MCol>
1107
+ <MCol auto>
1108
+ <MRow
1109
+ class="items-center"
1110
+ gutter="xs"
1111
+ >
1112
+ <!-- Manage Columns -->
1113
+ <MDtBtn
1114
+ v-if="manageColumns"
1115
+ key="manage-columns-btn"
1116
+ :disable="loading"
1117
+ color="brand"
1118
+ icon="ion-ios-desktop"
1119
+ label="myth.datatable.columnsToShow"
1120
+ text-color="on-brand"
1121
+ tooltip="myth.datatable.columnsToShowCaption"
1122
+ v-bind="pluginOptions.dt?.buttons?.filter as any"
1123
+ >
1124
+ <MModalMenu
1125
+ :no-close-btn="$q.screen.gt.xs"
1126
+ :offset="[10,10]"
1127
+ >
1128
+ <q-card style="min-width: 250px; max-width: 900px">
1129
+ <q-card-section>
1130
+ <div class="text-body1 q-mb-md">
1131
+ {{ __('myth.datatable.columnsToShow') }}
1132
+ </div>
1133
+ <div class="text-body2">
1134
+ <q-icon name="ion-ios-information-circle-outline" />
1135
+ {{ __('myth.datatable.columnsToShowCaption') }}
1136
+ </div>
1137
+ </q-card-section>
1138
+ <q-card-section>
1139
+ <template
1140
+ v-for="h in getHeaders"
1141
+ :key="h.name"
1142
+ >
1143
+ <q-checkbox
1144
+ v-model="visibleHeaders"
1145
+ :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1146
+ :label="h.label"
1147
+ :val="h.name"
1148
+ />
1149
+ </template>
1150
+ </q-card-section>
1151
+ <q-card-section>
1152
+ <MBtn
1153
+ v-if="$q.screen.gt.xs"
1154
+ v-close-popup
1155
+ :class="{'q-mr-sm': !$q.screen.xs}"
1156
+ color="brand"
1157
+ label="labels.close"
1158
+ no-caps
1159
+ style="min-width: 100px"
1160
+ text-color="on-brand"
1161
+ unelevated
1162
+ />
1163
+ <MBtn
1164
+ :class="{'full-width': $q.screen.xs}"
1165
+ :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1166
+ color="brand"
1167
+ no-caps
1168
+ style="min-width: 100px"
1169
+ text-color="on-brand"
1170
+ unelevated
1171
+ @click="onManageColumnsClick()"
1172
+ />
1173
+ </q-card-section>
1174
+ </q-card>
1175
+ </MModalMenu>
1176
+ </MDtBtn>
1177
+ <!-- Wrap Btn -->
1178
+ <MDtBtn
1179
+ v-if="!computedNoWrapBtn"
1180
+ :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
1181
+ flat
1182
+ tooltip="myth.datatable.wrapBtn"
1183
+ @click="wrapCellsRef = !wrapCellsRef"
1184
+ />
1185
+ </MRow>
1186
+ </MCol>
1162
1187
  </MRow>
1163
1188
 
1164
1189
  <!-- Manage Columns -->
@@ -1302,19 +1327,19 @@ defineExpose({
1302
1327
  />
1303
1328
  </q-list>
1304
1329
  </q-btn-dropdown>
1305
- <MRow
1306
- v-else
1307
- class="m-dt-context_menu_items justify-end"
1308
- gutter
1309
- space="xs"
1310
- >
1311
- <!--Control-->
1312
- <MDtContextmenuItems
1313
- :index="noBodyProps.rowIndex"
1314
- :item="noBodyProps.row"
1315
- :items="contextmenuItems"
1316
- />
1317
- </MRow>
1330
+ <div v-else>
1331
+ <MRow
1332
+ :class="['m-dt-context_menu_items ',{'justify-end': !controlStart}]"
1333
+ gutter="xs"
1334
+ >
1335
+ <!--Control-->
1336
+ <MDtContextmenuItems
1337
+ :index="noBodyProps.rowIndex"
1338
+ :item="noBodyProps.row"
1339
+ :items="contextmenuItems"
1340
+ />
1341
+ </MRow>
1342
+ </div>
1318
1343
  </q-td>
1319
1344
  </slot>
1320
1345
  </template>
@@ -1354,6 +1379,7 @@ defineExpose({
1354
1379
  <q-td :props="ccProps">
1355
1380
  <MDtColorColumn
1356
1381
  v-if="ccProps.row[ccProps.col.field] !== undefined && ccProps.row[ccProps.col.field] !== null"
1382
+ :align="ccProps.col.align as any"
1357
1383
  :value="ccProps.row[ccProps.col.field]"
1358
1384
  />
1359
1385
  </q-td>
@@ -1366,6 +1392,7 @@ defineExpose({
1366
1392
  <q-td :props="sarCellProps">
1367
1393
  <MDtSarColumn
1368
1394
  v-if="sarCellProps.row[sarCellProps.col.field] !== undefined && sarCellProps.row[sarCellProps.col.field] !== null"
1395
+ :align="sarCellProps.col.align as any"
1369
1396
  :copy="computedCopyColumns.includes(sarCellProps.col.name)"
1370
1397
  :copy-value="sarCellProps.col.copyValue && typeof sarCellProps.col.copyValue === 'function' ? sarCellProps.col.copyValue(sarCellProps.row) : sarCellProps.row[sarCellProps.col.copyValue || sarCellProps.col.field]"
1371
1398
  :value="sarCellProps.row[sarCellProps.col.field]"
@@ -1379,6 +1406,7 @@ defineExpose({
1379
1406
  >
1380
1407
  <q-td :props="copyCellProps">
1381
1408
  <MDtCopyColumn
1409
+ :align="copyCellProps.col.align as any || undefined"
1382
1410
  :label="copyCellProps.col.copyLabel && typeof copyCellProps.col.copyLabel === 'function' ? copyCellProps.col.copyLabel(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyLabel || copyCellProps.col.field]"
1383
1411
  :value="copyCellProps.col.copyValue && typeof copyCellProps.col.copyValue === 'function' ? copyCellProps.col.copyValue(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyValue || copyCellProps.col.field]"
1384
1412
  />
@@ -1392,6 +1420,7 @@ defineExpose({
1392
1420
  <q-td :props="descColumnProps">
1393
1421
  <MDtDescColumn
1394
1422
  v-if="descColumnProps.row[descColumnProps.col.field] !== undefined && descColumnProps.row[descColumnProps.col.field] !== null"
1423
+ :align="descColumnProps.col.align as any || undefined"
1395
1424
  :value="descColumnProps.row[descColumnProps.col.field]"
1396
1425
  />
1397
1426
  </q-td>
package/src/components/datatable/MDtColorColumn.vue CHANGED
@@ -10,14 +10,22 @@
10
10
 
11
11
  import { useMyth } from '../../composable'
12
12
  import type { MDtColorColumnProps } from '../../types'
13
+ import { computed } from 'vue'
13
14
 
14
15
  interface Props {
15
16
  value?: MDtColorColumnProps['value'];
16
17
  size?: MDtColorColumnProps['size'];
18
+ align?: MDtColorColumnProps['align'];
17
19
  }
18
20
 
19
- defineProps<Props>()
21
+ const props = defineProps<Props>()
20
22
  const { __, copyText } = useMyth()
23
+ const map = {
24
+ left: 'start',
25
+ center: 'center',
26
+ right: 'end'
27
+ }
28
+ const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
21
29
  defineOptions({
22
30
  name: 'MDtColorColumn',
23
31
  inheritAttrs: !1
@@ -25,8 +33,9 @@ defineOptions({
25
33
  </script>
26
34
 
27
35
  <template>
28
- <div
29
- class="row q-gutter-lg justify-center items-center"
36
+ <MRow
37
+ :class="`items-center justify-${getAlign}`"
38
+ gutter="xs"
30
39
  v-bind="$attrs"
31
40
  >
32
41
  <div>
@@ -42,5 +51,5 @@ defineOptions({
42
51
  </q-tooltip>
43
52
  </div>
44
53
  <slot />
45
- </div>
54
+ </MRow>
46
55
  </template>
package/src/components/datatable/MDtCopyColumn.vue CHANGED
@@ -11,16 +11,24 @@
11
11
  import { useMyth } from '../../composable'
12
12
  import type { MDtCopyColumnProps } from '../../types'
13
13
  import MDtSarColumn from './MDtSarColumn.vue'
14
+ import { computed } from 'vue'
14
15
 
15
16
  interface Props {
16
17
  label?: MDtCopyColumnProps['label'];
17
18
  value?: MDtCopyColumnProps['value'];
18
19
  width?: MDtCopyColumnProps['width'];
19
20
  sar?: MDtCopyColumnProps['sar'];
21
+ align?: MDtCopyColumnProps['align'];
20
22
  }
21
23
 
22
- defineProps<Props>()
24
+ const props = defineProps<Props>()
23
25
  const { copyText } = useMyth()
26
+ const map = {
27
+ left: 'start',
28
+ center: 'center',
29
+ right: 'end'
30
+ }
31
+ const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
24
32
  defineOptions({
25
33
  name: 'MDtCopyColumn',
26
34
  inheritAttrs: !1
@@ -30,7 +38,7 @@ defineOptions({
30
38
  <template>
31
39
  <MRow
32
40
  v-if="!!value"
33
- class="items-center justify-center"
41
+ :class="`items-center justify-${getAlign}`"
34
42
  v-bind="$attrs"
35
43
  >
36
44
  <div
package/src/components/datatable/MDtDescColumn.vue CHANGED
@@ -10,15 +10,21 @@
10
10
 
11
11
  import type { MDtDescColumnProps } from '../../types'
12
12
  import { useMyth } from '../../composable'
13
+ import { computed } from 'vue'
13
14
 
14
15
  interface Props {
15
16
  value?: MDtDescColumnProps['value'];
17
+ align?: MDtDescColumnProps['align'];
16
18
  }
17
19
 
18
- defineProps<Props>()
19
-
20
- const { __, copyText } = useMyth()
21
-
20
+ const props = defineProps<Props>()
21
+ const { copyText } = useMyth()
22
+ const map = {
23
+ left: 'start',
24
+ center: 'center',
25
+ right: 'end'
26
+ }
27
+ const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
22
28
  defineOptions({
23
29
  name: 'MDtDescColumn',
24
30
  inheritAttrs: !1
@@ -26,8 +32,9 @@ defineOptions({
26
32
  </script>
27
33
 
28
34
  <template>
29
- <div
30
- class="row q-gutter-md items-center justify-center"
35
+ <MRow
36
+ :class="`items-center justify-${getAlign}`"
37
+ gutter="xs"
31
38
  v-bind="$attrs"
32
39
  >
33
40
  <div class="m-dt__max_desc">
@@ -49,5 +56,5 @@ defineOptions({
49
56
  </q-tooltip>
50
57
  </div>
51
58
  <slot />
52
- </div>
59
+ </MRow>
53
60
  </template>
package/src/components/datatable/MDtImageColumn.vue CHANGED
@@ -73,7 +73,3 @@ defineOptions({
73
73
  </q-avatar>
74
74
  </template>
75
75
  </template>
76
-
77
- <style lang="sass" scoped>
78
-
79
- </style>
package/src/components/datatable/MDtSarColumn.vue CHANGED
@@ -17,12 +17,19 @@ interface Props {
17
17
  value?: MDtSarColumnProps['value'];
18
18
  copyValue?: MDtSarColumnProps['copyValue'];
19
19
  copy?: boolean;
20
+ align?: MDtSarColumnProps['align'];
20
21
  }
21
22
 
22
23
  const props = defineProps<Props>()
23
24
  const { __, copyText } = useMyth()
24
25
  const val = computed(() => props.value || '0.00')
25
26
  const inputValue = computed(() => (props.copyValue || props.value) || '0.00')
27
+ const map = {
28
+ left: 'start',
29
+ center: 'center',
30
+ right: 'end'
31
+ }
32
+ const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
26
33
  defineOptions({
27
34
  name: 'MDtSarColumn',
28
35
  inheritAttrs: !1
@@ -30,17 +37,17 @@ defineOptions({
30
37
  </script>
31
38
 
32
39
  <template>
33
- <div
34
- class="row justify-center items-center"
40
+ <MRow
41
+ :class="`items-center justify-${getAlign}`"
35
42
  v-bind="$attrs"
36
43
  >
37
44
  <q-btn
38
45
  v-if="!!copy && !!inputValue"
46
+ class="q-mr-xs"
39
47
  dense
40
48
  flat
41
49
  icon="ion-copy"
42
50
  round
43
- class="q-mr-xs"
44
51
  size="sm"
45
52
  @click="() => copyText(inputValue)"
46
53
  >
@@ -50,5 +57,5 @@ defineOptions({
50
57
  </q-btn>
51
58
  <MSarString :text="val" />
52
59
  <slot />
53
- </div>
60
+ </MRow>
54
61
  </template>
package/src/composable/useDtHelpers.ts CHANGED
@@ -112,7 +112,11 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
112
112
  }
113
113
 
114
114
  const getHeaders = computed<any[]>(() => {
115
- const h = parseHeaders(props.headers as MDtHeadersParameter, { noSort: props.imageColumns }) || []
115
+ const h = parseHeaders(props.headers as MDtHeadersParameter, {
116
+ noSort: props.imageColumns,
117
+ controlAlign: props.controlStart ? 'left' : 'right',
118
+ align: getProp.value('align')
119
+ }) || []
116
120
  if (!activeContextItems.value.length) {
117
121
  return h.filter(e => e.name !== props.controlKey)
118
122
  }
package/src/composable/useMyth.ts CHANGED
@@ -120,22 +120,24 @@ export const useMyth = () => {
120
120
  */
121
121
  const parseHeaders = (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] => {
122
122
  const defaultOptions: Partial<ParseHeaderOptions> = {
123
- controlKey: 'control',
123
+ controlKey: 'control'
124
124
  // controlStyle: 'max-width: 150 px',
125
- align: 'center'
125
+ // align: 'center'
126
126
  // sortable: !0
127
127
  }
128
128
  const opts = extend<ParseHeaderOptions>(!0, {}, defaultOptions, options)
129
- let control: string | undefined = defaultOptions.controlKey
130
- let controlStyle: string | undefined = defaultOptions.controlStyle
131
- if (opts.controlKey) {
132
- control = opts.controlKey
133
- delete opts.controlKey
134
- }
135
- if (opts.controlStyle) {
136
- controlStyle = opts.controlStyle
137
- delete opts.controlStyle
138
- }
129
+ const control: string | undefined = opts.controlKey || defaultOptions.controlKey
130
+ const controlStyle: string | undefined = opts.controlStyle || defaultOptions.controlStyle
131
+ const noSort = options.noSort || []
132
+ // delete opts.noSort
133
+ // if (opts.controlKey) {
134
+ // control = opts.controlKey
135
+ // delete opts.controlKey
136
+ // }
137
+ // if (opts.controlStyle) {
138
+ // controlStyle = opts.controlStyle
139
+ // delete opts.controlStyle
140
+ // }
139
141
  const result: MDtColumn[] = []
140
142
 
141
143
  headers.forEach((elm: string | MDtColumn | undefined) => {
@@ -191,7 +193,10 @@ export const useMyth = () => {
191
193
  item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m-control-header'
192
194
  item.headerClasses = item.headerClasses.trim()
193
195
  item.sortable = !1
194
- if (!item.align) {
196
+ if (opts.controlAlign) {
197
+ item.align = opts.controlAlign
198
+ } else if (!item.align) {
199
+ // console.log(item)
195
200
  item.align = 'right'
196
201
  }
197
202
  // opts.classes = opts.classes || ''
@@ -203,14 +208,17 @@ export const useMyth = () => {
203
208
  opts.classes = opts.classes.trim()
204
209
  }
205
210
  }
206
-
211
+ if (!item.align) {
212
+ item.align = 'left'
213
+ }
207
214
  item = { ...opts, ...item }
208
215
 
209
- if (item.sortable === undefined && (options.noSort ?? []).length > 0 && options.noSort?.includes(item.name)) {
216
+ if (item.sortable === undefined && noSort.length > 0 && noSort.includes(item.name)) {
210
217
  item.sortable = !1
211
218
  } else if (item.sortable === undefined) {
212
219
  item.sortable = !0
213
220
  }
221
+ // console.log(item)
214
222
  result.push(item)
215
223
  })
216
224
  return Helpers.uniqBy(result, 'name')
package/src/types/m-datatable.d.ts CHANGED
@@ -214,6 +214,7 @@ export type MDtRequestParamsObjectProp = Partial<GenericFormValues>
214
214
  export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = Omit<QTableProps, 'rows' | 'rowsPerPageOptions' | 'visibleColumns'> & {
215
215
  rows?: any[];
216
216
  controlKey?: string;
217
+ controlStart?: boolean;
217
218
  defaultItem?: Partial<MDtItem<I>>
218
219
  contextItems?: MaybeRefOrGetter<GenericMDtBtn[]>;
219
220
  contextItemsLength?: number;
@@ -336,6 +337,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
336
337
  * Column name to lock the value.
337
338
  */
338
339
  lockValue?: string;
340
+ /**
341
+ * Align all table columns to the left, center, or right.
342
+ */
343
+ align?: 'left' | 'right' | 'center';
339
344
  }
340
345
 
341
346
  export interface MDtAvatarProps extends QAvatarProps {
@@ -368,6 +373,7 @@ export interface MDtContextmenuItemsSlots {
368
373
  export interface MDtColorColumnProps {
369
374
  value?: any;
370
375
  size?: string | number;
376
+ align?: 'left' | 'right' | 'center';
371
377
  }
372
378
 
373
379
  export interface MDtColorColumnSlots {
@@ -382,6 +388,7 @@ export interface MDtCopyColumnProps {
382
388
  value?: any;
383
389
  width?: string | number;
384
390
  sar?: boolean;
391
+ align?: 'left' | 'right' | 'center';
385
392
  }
386
393
 
387
394
  export interface MDtCopyColumnSlots {
@@ -393,6 +400,7 @@ export interface MDtCopyColumnSlots {
393
400
 
394
401
  export interface MDtDescColumnProps {
395
402
  value?: any;
403
+ align?: 'left' | 'right' | 'center';
396
404
  }
397
405
 
398
406
  export interface MDtDescColumnSlots {
@@ -419,6 +427,7 @@ export interface MDtSarColumnProps {
419
427
  value?: any;
420
428
  copy?: boolean;
421
429
  copyValue?: any;
430
+ align?: 'left' | 'right' | 'center';
422
431
  }
423
432
 
424
433
  export interface MDtSarColumnSlots {
package/src/types/m-helpers.d.ts CHANGED
@@ -11,12 +11,13 @@ import type { DialogChainObject, QNotifyCreateOptions, QNotifyUpdateOptions, QTa
11
11
  import type { MDatatableProps } from './m-datatable'
12
12
 
13
13
  export type ParseHeaderOptions = {
14
- controlKey?: 'control' | string
15
- controlStyle?: 'max-width: 150px' | string
16
- align?: 'left' | 'right' | 'center' | undefined
14
+ controlKey?: 'control' | string;
15
+ controlStyle?: 'max-width: 150px' | string;
16
+ controlAlign?: 'left' | 'right' | 'center' | undefined;
17
+ align?: 'left' | 'right' | 'center' | undefined;
17
18
  sortable?: boolean | undefined;
18
- classes?: string | (() => string) | (<T>(item: T) => string),
19
- noSort?: string[]
19
+ classes?: string | (() => string) | (<T>(item: T) => string);
20
+ noSort?: string[];
20
21
  }
21
22
 
22
23
  export type MDtColumn = QTableProps['columns'][number]