@mythpe/quasar-ui-qui 0.4.52 → 0.4.54

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.4.52",
3
+ "version": "0.4.54",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
@@ -244,6 +244,7 @@ const {
244
244
  resetDialogs,
245
245
  getHeaders,
246
246
  getSortedHeaders,
247
+ arrangementColumns,
247
248
  controlKey,
248
249
  controlJustify,
249
250
  visibleHeaders,
@@ -265,14 +266,14 @@ const {
265
266
  hasAction,
266
267
  fullscreen,
267
268
  hasAddBtn,
268
- hasUpdateBtn,
269
- hasCloneBtn,
270
- hasShowBtn,
271
- hasDestroyBtn,
269
+ // hasUpdateBtn,
270
+ // hasCloneBtn,
271
+ // hasShowBtn,
272
+ // hasDestroyBtn,
272
273
  hasFilterDialog,
273
274
  isUpdateMode,
274
275
  setIsUpdateMode,
275
- isSingleSelectedItem,
276
+ // isSingleSelectedItem,
276
277
  hasSelectedItem,
277
278
  getShowTitle,
278
279
  getFormTitle,
@@ -314,7 +315,7 @@ const {
314
315
  contextmenuItems,
315
316
  activeContextItems,
316
317
  datatableItemsScope,
317
- onCloneItem,
318
+ // onCloneItem,
318
319
  openAttachmentDialog,
319
320
  importDialogModel,
320
321
  onOpenImportDialog,
@@ -1003,7 +1004,7 @@ defineExpose({
1003
1004
  name="filter"
1004
1005
  />
1005
1006
  </MContainer>
1006
- <q-separator color="primary" />
1007
+ <q-separator />
1007
1008
  <MContainer size="sm">
1008
1009
  <MRow class="justify-between">
1009
1010
  <MBtn
@@ -1103,6 +1104,12 @@ defineExpose({
1103
1104
  <q-icon name="ion-ios-information-circle-outline" />
1104
1105
  {{ __('myth.datatable.columnsToShowCaption') }}
1105
1106
  </div>
1107
+ <q-checkbox
1108
+ v-model="arrangementColumns"
1109
+ :label="__('myth.datatable.arrangementColumns')"
1110
+ class="q-mt-sm"
1111
+ dense
1112
+ />
1106
1113
  </q-card-section>
1107
1114
  <q-separator />
1108
1115
  <q-card-section>
@@ -1123,25 +1130,23 @@ defineExpose({
1123
1130
  <q-separator />
1124
1131
  <q-card-section>
1125
1132
  <MBtn
1126
- v-if="$q.screen.gt.xs"
1127
- v-close-popup
1128
- :class="{'q-mr-sm': !$q.screen.xs}"
1133
+ :class="{'full-width': $q.screen.xs}"
1134
+ :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1129
1135
  color="primary"
1130
- label="labels.close"
1131
1136
  no-caps
1132
1137
  style="min-width: 100px"
1133
1138
  text-color="on-primary"
1134
- unelevated
1139
+ @click="onManageColumnsClick()"
1135
1140
  />
1136
1141
  <MBtn
1137
- :class="{'full-width': $q.screen.xs}"
1138
- :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1142
+ v-if="$q.screen.gt.xs"
1143
+ v-close-popup
1144
+ :class="['',{'q-ml-sm': !$q.screen.xs}]"
1139
1145
  color="primary"
1146
+ label="labels.close"
1140
1147
  no-caps
1141
1148
  style="min-width: 100px"
1142
1149
  text-color="on-primary"
1143
- unelevated
1144
- @click="onManageColumnsClick()"
1145
1150
  />
1146
1151
  </q-card-section>
1147
1152
  </q-card>
@@ -1167,67 +1172,67 @@ defineExpose({
1167
1172
  name="bottom-search"
1168
1173
  />
1169
1174
  </MRow>
1170
- <template v-if="hasSelectedItem && contextmenuItems.length > 0 && getShowSelection">
1171
- <MRow gutter="sm">
1172
- <!--<MDtBtn-->
1173
- <!-- v-if="hasUpdateBtn && isSingleSelectedItem"-->
1174
- <!-- key="update-dt-selection-btn"-->
1175
- <!-- :disable="loading"-->
1176
- <!-- icon="ion-ios-create"-->
1177
- <!-- update-->
1178
- <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1179
- <!-- @click="openUpdateDialogNoIndex(selected[0] as any)"-->
1180
- <!--/>-->
1181
- <!--<MDtBtn-->
1182
- <!-- v-if="hasCloneBtn && isSingleSelectedItem"-->
1183
- <!-- key="clone-dt-selection-btn"-->
1184
- <!-- :disable="loading"-->
1185
- <!-- clone-->
1186
- <!-- tooltip="labels.clone"-->
1187
- <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1188
- <!-- @click="onCloneItem(selected[0] as any)"-->
1189
- <!--/>-->
1190
- <!--<MDtBtn-->
1191
- <!-- v-if="hasShowBtn && isSingleSelectedItem"-->
1192
- <!-- key="show-dt-selection-btn"-->
1193
- <!-- :disable="loading"-->
1194
- <!-- icon="ion-ios-eye"-->
1195
- <!-- show-->
1196
- <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1197
- <!-- @click="openShowDialogNoIndex(selected[0] as any)"-->
1198
- <!--/>-->
1199
- <!--<MDtBtn-->
1200
- <!-- v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"-->
1201
- <!-- key="destroy-dt-selection-btn"-->
1202
- <!-- :disable="!hasSelectedItem || loading"-->
1203
- <!-- color="negative"-->
1204
- <!-- destroy-->
1205
- <!-- icon="ion-ios-trash"-->
1206
- <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1207
- <!-- @click="deleteSelectionItem()"-->
1208
- <!--/>-->
1209
- <template
1210
- v-for="(contextBtn,i) in contextmenuItems as GenericMDtBtn[]"
1211
- :key="`top-s-${i}`"
1212
- >
1213
- <MDtBtn
1214
- v-if="showIfContext(contextBtn)"
1215
- :tooltip="contextBtn.tooltip ? __(contextBtn.tooltip) : (
1216
- contextBtn.label ? ( te(`labels.${contextBtn.label}`) ? __(`labels.${contextBtn.label}`) : __(contextBtn.label) ) : undefined
1217
- )"
1218
- v-bind="{
1219
- ...defaultTopBtnProps,
1220
- ...pluginOptions.dt?.topSelection?.btn as any,
1221
- ...contextBtn as any,
1222
- ...contextBtn.attr as any,
1223
- to: typeof contextBtn.attr?.to === 'function' ? contextBtn.attr.to(selected[0],0) : contextBtn.attr?.to,
1224
- [contextBtn.name]: true,
1225
- }"
1226
- @click="contextBtn.attr?.to ? undefined : onClickTopMenu(contextBtn)"
1227
- />
1228
- </template>
1229
- </MRow>
1230
- </template>
1175
+ <MRow
1176
+ gutter="sm"
1177
+ >
1178
+ <!--<MDtBtn-->
1179
+ <!-- v-if="hasUpdateBtn && isSingleSelectedItem"-->
1180
+ <!-- key="update-dt-selection-btn"-->
1181
+ <!-- :disable="loading"-->
1182
+ <!-- icon="ion-ios-create"-->
1183
+ <!-- update-->
1184
+ <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1185
+ <!-- @click="openUpdateDialogNoIndex(selected[0] as any)"-->
1186
+ <!--/>-->
1187
+ <!--<MDtBtn-->
1188
+ <!-- v-if="hasCloneBtn && isSingleSelectedItem"-->
1189
+ <!-- key="clone-dt-selection-btn"-->
1190
+ <!-- :disable="loading"-->
1191
+ <!-- clone-->
1192
+ <!-- tooltip="labels.clone"-->
1193
+ <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1194
+ <!-- @click="onCloneItem(selected[0] as any)"-->
1195
+ <!--/>-->
1196
+ <!--<MDtBtn-->
1197
+ <!-- v-if="hasShowBtn && isSingleSelectedItem"-->
1198
+ <!-- key="show-dt-selection-btn"-->
1199
+ <!-- :disable="loading"-->
1200
+ <!-- icon="ion-ios-eye"-->
1201
+ <!-- show-->
1202
+ <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1203
+ <!-- @click="openShowDialogNoIndex(selected[0] as any)"-->
1204
+ <!--/>-->
1205
+ <!--<MDtBtn-->
1206
+ <!-- v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"-->
1207
+ <!-- key="destroy-dt-selection-btn"-->
1208
+ <!-- :disable="!hasSelectedItem || loading"-->
1209
+ <!-- color="negative"-->
1210
+ <!-- destroy-->
1211
+ <!-- icon="ion-ios-trash"-->
1212
+ <!-- v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any}"-->
1213
+ <!-- @click="deleteSelectionItem()"-->
1214
+ <!--/>-->
1215
+ <template
1216
+ v-for="(contextBtn,i) in contextmenuItems as GenericMDtBtn[]"
1217
+ :key="`top-s-${i}`"
1218
+ >
1219
+ <MDtBtn
1220
+ v-if="showIfContext(contextBtn)"
1221
+ :tooltip="contextBtn.tooltip ? __(contextBtn.tooltip) : (
1222
+ contextBtn.label ? ( te(`labels.${contextBtn.label}`) ? __(`labels.${contextBtn.label}`) : __(contextBtn.label) ) : undefined
1223
+ )"
1224
+ v-bind="{
1225
+ ...defaultTopBtnProps,
1226
+ ...pluginOptions.dt?.topSelection?.btn as any,
1227
+ ...contextBtn as any,
1228
+ ...contextBtn.attr as any,
1229
+ to: typeof contextBtn.attr?.to === 'function' ? contextBtn.attr.to(selected[0],0) : contextBtn.attr?.to,
1230
+ [contextBtn.name]: true,
1231
+ }"
1232
+ @click="contextBtn.attr?.to ? undefined : onClickTopMenu(contextBtn)"
1233
+ />
1234
+ </template>
1235
+ </MRow>
1231
1236
 
1232
1237
  <!-- Manage Columns -->
1233
1238
  <MRow
@@ -1244,6 +1249,7 @@ defineExpose({
1244
1249
  expand-separator
1245
1250
  icon="ion-ios-tv"
1246
1251
  >
1252
+ <q-separator />
1247
1253
  <q-card>
1248
1254
  <q-card-section>
1249
1255
  <template
@@ -1257,6 +1263,24 @@ defineExpose({
1257
1263
  :val="h.name"
1258
1264
  />
1259
1265
  </template>
1266
+ <MRow
1267
+ class="q-mt-sm row items-center"
1268
+ gutter
1269
+ >
1270
+ <MBtn
1271
+ :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1272
+ color="primary"
1273
+ no-caps
1274
+ style="min-width: 100px"
1275
+ text-color="on-primary"
1276
+ @click="onManageColumnsClick()"
1277
+ />
1278
+ <q-checkbox
1279
+ v-model="arrangementColumns"
1280
+ :label="__('myth.datatable.arrangementColumns')"
1281
+ dense
1282
+ />
1283
+ </MRow>
1260
1284
  </q-card-section>
1261
1285
  </q-card>
1262
1286
  </q-expansion-item>
@@ -139,14 +139,20 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
139
139
  }
140
140
  return h
141
141
  })
142
- const getSortedHeaders = computed(() => getHeaders.value.slice().sort((a, b) => {
143
- if (a.name === controlKey.value || b.name === controlKey.value) {
144
- return 0
142
+ const arrangementColumns = ref(!1)
143
+ const getSortedHeaders = computed(() => {
144
+ if (!arrangementColumns.value) {
145
+ return getHeaders.value
145
146
  }
146
- const f = visibleHeaders.value.indexOf(a.name)
147
- const l = visibleHeaders.value.indexOf(b.name)
148
- return f - l
149
- }))
147
+ return getHeaders.value.slice().sort((a, b) => {
148
+ if (a.name === controlKey.value || b.name === controlKey.value) {
149
+ return 0
150
+ }
151
+ const f = visibleHeaders.value.indexOf(a.name)
152
+ const l = visibleHeaders.value.indexOf(b.name)
153
+ return f - l
154
+ })
155
+ })
150
156
  const visibleHeaders = ref<string[]>([])
151
157
  const onManageColumnsClick = () => {
152
158
  visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [getHeaders.value[0].name] : getHeaders.value.map(e => e.name)
@@ -815,7 +821,13 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
815
821
  selected.value = [item]
816
822
  onDeleteItem(item, index)
817
823
  },
818
- showIf: hasDestroyBtn.value,
824
+ multiClick: hasDestroyBtn.value && props.multiDestroy && selected.value.length > 1 ? () => deleteSelectionItem() : undefined,
825
+ showIf: () => {
826
+ if (selected.value.length < 2) {
827
+ return hasDestroyBtn.value
828
+ }
829
+ return hasDestroyBtn.value && props.multiDestroy
830
+ },
819
831
  attr: {
820
832
  color: 'negative'
821
833
  },
@@ -897,7 +909,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
897
909
  onRemoveFilter
898
910
  })
899
911
  const getShowSelection = computed<boolean | undefined>(() => {
900
- if (props.hideSelection) {
912
+ if (props.hideSelection || !getRows.value.length) {
901
913
  return !1
902
914
  }
903
915
  if (!activeContextItems.value.length && !props.pdf && !props.excel) {
@@ -994,6 +1006,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
994
1006
  resetDialogs,
995
1007
  getHeaders,
996
1008
  getSortedHeaders,
1009
+ arrangementColumns,
997
1010
  controlProps,
998
1011
  controlKey,
999
1012
  controlJustify,