@mythpe/quasar-ui-qui 0.4.54 → 0.4.56

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.54",
3
+ "version": "0.4.56",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
@@ -73,7 +73,6 @@ type Props = {
73
73
  manageColumns?: MDatatableProps['manageColumns'];
74
74
  manageColumnsInline?: MDatatableProps['manageColumnsInline'];
75
75
  visibleColumns?: MDatatableProps['visibleColumns'];
76
- // searchColumns?: MDatatableProps['searchColumns'];
77
76
  addTopBtn?: boolean;
78
77
  addListBtn?: boolean;
79
78
  addFabBtn?: boolean;
@@ -83,7 +82,7 @@ type Props = {
83
82
  dense?: MDatatableProps['dense'];
84
83
  bordered?: MDatatableProps['bordered'];
85
84
  flat?: MDatatableProps['flat'];
86
- rows?: MDatatableProps['rows'];
85
+ // rows?: MDatatableProps['rows'];
87
86
  fixed?: MDatatableProps['fixed'];
88
87
  imageColumns?: MDatatableProps['imageColumns'];
89
88
  imageMode?: MDatatableProps['imageMode'];
@@ -108,7 +107,7 @@ type Props = {
108
107
  }
109
108
 
110
109
  const props = withDefaults(defineProps<Props>(), {
111
- rows: undefined,
110
+ // rows: undefined,
112
111
  rowClass: undefined,
113
112
  control: undefined,
114
113
  defaultItem: undefined,
@@ -189,7 +188,7 @@ const props = withDefaults(defineProps<Props>(), {
189
188
  })
190
189
 
191
190
  interface Emits {
192
- (e: 'update:rows', value: any): void;
191
+ // (e: 'update:rows', value: any): void;
193
192
 
194
193
  (e: 'store', value: ApiInterface): void;
195
194
 
@@ -274,7 +273,7 @@ const {
274
273
  isUpdateMode,
275
274
  setIsUpdateMode,
276
275
  // isSingleSelectedItem,
277
- hasSelectedItem,
276
+ // hasSelectedItem,
278
277
  getShowTitle,
279
278
  getFormTitle,
280
279
  isGrid,
@@ -341,7 +340,8 @@ const {
341
340
  watch(defaultItem, (v) => {
342
341
  resetDialogForm({ values: { ...v || {} } }, { force: !0 })
343
342
  }, { immediate: !1, deep: !0 })
344
- watch(() => getRows.value, (v) => emit('update:rows', v), { deep: !0 })
343
+ // watch(getRows, (v) => emit('update:rows', v), { deep: !0 })
344
+ defineModel<any[]>('rows', { required: false, default: undefined })
345
345
  watch([
346
346
  () => toValue(props.visibleColumns),
347
347
  () => toValue(props.headers)
@@ -518,7 +518,7 @@ const showIfContext = (contextBtn: GenericMDtBtn): boolean => {
518
518
  }
519
519
  return !1
520
520
  }
521
- const tooSmallComputed = computed(() => props.tooSmall === 0 ? false : ($q.screen.height < (props.tooSmall || 600)))
521
+ const tooSmallComputed = computed(() => props.tooSmall === 0 ? false : ($q.screen.height < (props.tooSmall || 400)))
522
522
  const searchByColumns = computed(() => [
523
523
  {
524
524
  name: 'all',
@@ -823,9 +823,10 @@ defineExpose({
823
823
  <q-btn
824
824
  v-if="!noBackBtn && !hideTitle"
825
825
  :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
826
- class="m-datatable__table-back-btn q-mr-sm"
826
+ class="m-datatable__table-back-btn"
827
827
  dense
828
- flat
828
+ style="min-width: 50px"
829
+ unelevated
829
830
  @click="$router.back()"
830
831
  />
831
832
  <!--Table Title-->
@@ -881,6 +882,13 @@ defineExpose({
881
882
  no-caps
882
883
  @click="openCreateDialog()"
883
884
  />
885
+ <div class="flex-break" />
886
+ <div
887
+ v-if="!hideTitle"
888
+ class="full-width"
889
+ >
890
+ <q-separator spaced />
891
+ </div>
884
892
  </MRow>
885
893
  </MCol>
886
894
  </slot>
@@ -953,8 +961,9 @@ defineExpose({
953
961
  />
954
962
  </MRow>
955
963
  </MCol>
964
+ <!--<q-space v-if="$q.screen.gt.sm" />-->
956
965
  <!--Buttons-->
957
- <MCol col>
966
+ <MCol auto>
958
967
  <MRow
959
968
  class="items-center m-datatable__table-top-buttons"
960
969
  gutter="xs"
@@ -1017,7 +1026,10 @@ defineExpose({
1017
1026
  <MBtn
1018
1027
  v-close-popup
1019
1028
  :label="__('myth.datatable.filter.cancel')"
1029
+ color="on-primary"
1030
+ outline
1020
1031
  style="min-width: 100px"
1032
+ text-color="primary"
1021
1033
  v-bind="pluginOptions.dt?.dialogButtonsProps as any"
1022
1034
  @click="closeFilterDialog"
1023
1035
  />
@@ -1120,7 +1132,6 @@ defineExpose({
1120
1132
  >
1121
1133
  <q-checkbox
1122
1134
  v-model="visibleHeaders"
1123
- :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1124
1135
  :label="h.label"
1125
1136
  :val="h.name"
1126
1137
  />
@@ -1129,32 +1140,38 @@ defineExpose({
1129
1140
  </q-card-section>
1130
1141
  <q-separator />
1131
1142
  <q-card-section>
1132
- <MBtn
1133
- :class="{'full-width': $q.screen.xs}"
1134
- :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1135
- color="primary"
1136
- no-caps
1137
- style="min-width: 100px"
1138
- text-color="on-primary"
1139
- @click="onManageColumnsClick()"
1140
- />
1141
- <MBtn
1142
- v-if="$q.screen.gt.xs"
1143
- v-close-popup
1144
- :class="['',{'q-ml-sm': !$q.screen.xs}]"
1145
- color="primary"
1146
- label="labels.close"
1147
- no-caps
1148
- style="min-width: 100px"
1149
- text-color="on-primary"
1150
- />
1143
+ <MRow
1144
+ :gutter="!$q.screen.xs"
1145
+ class="justify-between items-center"
1146
+ >
1147
+ <MBtn
1148
+ v-if="$q.screen.gt.xs"
1149
+ v-close-popup
1150
+ :class="['',{'q-mr-sm': !$q.screen.xs}]"
1151
+ color="primary"
1152
+ label="labels.done"
1153
+ no-caps
1154
+ style="min-width: 100px"
1155
+ text-color="on-primary"
1156
+ />
1157
+ <MBtn
1158
+ :class="{'full-width': $q.screen.xs}"
1159
+ :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
1160
+ color="on-primary"
1161
+ no-caps
1162
+ outline
1163
+ style="min-width: 100px"
1164
+ text-color="primary"
1165
+ @click="onManageColumnsClick()"
1166
+ />
1167
+ </MRow>
1151
1168
  </q-card-section>
1152
1169
  </q-card>
1153
1170
  </MModalMenu>
1154
1171
  </MDtBtn>
1155
1172
  <!-- Wrap Btn -->
1156
1173
  <MDtBtn
1157
- v-if="!computedNoWrapBtn"
1174
+ v-if="!computedNoWrapBtn && !isGrid"
1158
1175
  :icon="`ion-ios-${wrapCellsRef ? 'code' : 'code-working'}`"
1159
1176
  flat
1160
1177
  tooltip="myth.datatable.wrapBtn"
@@ -1258,7 +1275,6 @@ defineExpose({
1258
1275
  >
1259
1276
  <q-checkbox
1260
1277
  v-model="visibleHeaders"
1261
- :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
1262
1278
  :label="h.label"
1263
1279
  :val="h.name"
1264
1280
  />
@@ -58,7 +58,18 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
58
58
  uniqBy
59
59
  } = useMyth()
60
60
  const props = toValue(options)
61
- const getRows = ref<MDtItem[]>([])
61
+ const rowsRef = ref<MDtItem[]>([])
62
+ const getRows = computed<any>({
63
+ get: () => {
64
+ if (props.rows !== undefined && props.rows !== null) {
65
+ return props.rows
66
+ }
67
+ return rowsRef.value
68
+ },
69
+ set: (v: any) => {
70
+ rowsRef.value = v
71
+ }
72
+ })
62
73
  const defaultItem = computed(() => toValue(props.defaultItem))
63
74
  const getTableTitle = computed(() => {
64
75
  if (props.title) {
@@ -155,7 +166,8 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
155
166
  })
156
167
  const visibleHeaders = ref<string[]>([])
157
168
  const onManageColumnsClick = () => {
158
- visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [getHeaders.value[0].name] : getHeaders.value.map(e => e.name)
169
+ // visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [getHeaders.value[0].name] : getHeaders.value.map(e => e.name)
170
+ visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [] : getHeaders.value.slice().map(e => e.name)
159
171
  }
160
172
 
161
173
  const contextmenu = ref(!1)