@mythpe/quasar-ui-qui 0.2.68 → 0.2.69
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
|
@@ -195,12 +195,16 @@ const {
|
|
|
195
195
|
resetDialogs,
|
|
196
196
|
getHeaders,
|
|
197
197
|
visibleHeaders,
|
|
198
|
+
onManageColumnsClick,
|
|
198
199
|
contextmenu,
|
|
199
200
|
selected,
|
|
200
201
|
onUpdateSelectedItems,
|
|
201
202
|
pagination,
|
|
202
203
|
search,
|
|
203
204
|
searchColumnsRef,
|
|
205
|
+
getSearchColumnsHeaders,
|
|
206
|
+
isSearchSelectedAll,
|
|
207
|
+
onCustomSearchClick,
|
|
204
208
|
searchPlaceholder,
|
|
205
209
|
loading,
|
|
206
210
|
filterForm,
|
|
@@ -492,7 +496,7 @@ defineExpose({
|
|
|
492
496
|
v-model:fullscreen="fullscreen"
|
|
493
497
|
v-model:pagination="pagination"
|
|
494
498
|
v-model:selected="selected"
|
|
495
|
-
:class="`m-datatable ` + (
|
|
499
|
+
:class="`m-datatable ` + (isSmall ? 'm-datatable-grid' : '')"
|
|
496
500
|
:columns="getHeaders"
|
|
497
501
|
:filter="search"
|
|
498
502
|
:grid="isGrid"
|
|
@@ -733,8 +737,8 @@ defineExpose({
|
|
|
733
737
|
v-bind="pluginOptions.dt?.searchInput?.menuBtn as any"
|
|
734
738
|
>
|
|
735
739
|
<MModalMenu
|
|
740
|
+
:no-close-btn="$q.screen.gt.xs"
|
|
736
741
|
:offset="[10,10]"
|
|
737
|
-
no-close-btn
|
|
738
742
|
v-bind="pluginOptions.dt?.searchInput?.menuProps as any"
|
|
739
743
|
>
|
|
740
744
|
<q-toolbar>
|
|
@@ -750,8 +754,8 @@ defineExpose({
|
|
|
750
754
|
<MRow class="items-center">
|
|
751
755
|
<MCol col="12">
|
|
752
756
|
<template
|
|
753
|
-
v-for="h in
|
|
754
|
-
:key="h.name"
|
|
757
|
+
v-for="h in getSearchColumnsHeaders"
|
|
758
|
+
:key="`checkbox-${h.name}`"
|
|
755
759
|
>
|
|
756
760
|
<q-checkbox
|
|
757
761
|
v-model="searchColumnsRef"
|
|
@@ -759,24 +763,49 @@ defineExpose({
|
|
|
759
763
|
:disable="searchColumnsRef.length < 2 && searchColumnsRef.indexOf(h.name) !== -1"
|
|
760
764
|
:label="h.label"
|
|
761
765
|
:val="h.name"
|
|
766
|
+
class="q-ml-xs"
|
|
762
767
|
/>
|
|
763
768
|
</template>
|
|
764
769
|
</MCol>
|
|
765
770
|
</MRow>
|
|
771
|
+
<MRow
|
|
772
|
+
class="items-stretch justify-between"
|
|
773
|
+
col
|
|
774
|
+
>
|
|
775
|
+
<MCol
|
|
776
|
+
v-if="!$q.screen.xs"
|
|
777
|
+
col="12"
|
|
778
|
+
md="auto"
|
|
779
|
+
>
|
|
780
|
+
<MBtn
|
|
781
|
+
v-close-popup
|
|
782
|
+
:class="{'full-width': isSmall}"
|
|
783
|
+
:label="__('myth.titles.done')"
|
|
784
|
+
color="primary"
|
|
785
|
+
no-caps
|
|
786
|
+
style="min-width: 100px"
|
|
787
|
+
text-color="body"
|
|
788
|
+
unelevated
|
|
789
|
+
@click="search ? refresh() : undefined"
|
|
790
|
+
/>
|
|
791
|
+
</MCol>
|
|
792
|
+
<MCol
|
|
793
|
+
col="12"
|
|
794
|
+
md="auto"
|
|
795
|
+
>
|
|
796
|
+
<MBtn
|
|
797
|
+
:class="{'full-width': isSmall}"
|
|
798
|
+
:label="__(`labels.${isSearchSelectedAll ? 'unselect':'select'}_all`)"
|
|
799
|
+
color="primary"
|
|
800
|
+
no-caps
|
|
801
|
+
style="min-width: 100px"
|
|
802
|
+
text-color="body"
|
|
803
|
+
unelevated
|
|
804
|
+
@click="onCustomSearchClick()"
|
|
805
|
+
/>
|
|
806
|
+
</MCol>
|
|
807
|
+
</MRow>
|
|
766
808
|
</MContainer>
|
|
767
|
-
<MRow>
|
|
768
|
-
<q-btn
|
|
769
|
-
v-close-popup
|
|
770
|
-
:class="{'full-width': $q.screen.lt.md}"
|
|
771
|
-
:label="__('myth.titles.done')"
|
|
772
|
-
:size="$q.screen.lt.md ? 'lg' : 'md'"
|
|
773
|
-
flat
|
|
774
|
-
no-caps
|
|
775
|
-
style="min-width: 68px"
|
|
776
|
-
unelevated
|
|
777
|
-
@click="search ? refresh() : undefined"
|
|
778
|
-
/>
|
|
779
|
-
</MRow>
|
|
780
809
|
</MModalMenu>
|
|
781
810
|
<MTooltip>
|
|
782
811
|
{{ __('myth.datatable.searchColumns') }}
|
|
@@ -846,7 +875,7 @@ defineExpose({
|
|
|
846
875
|
:fluid="!1"
|
|
847
876
|
class="q-pa-md"
|
|
848
877
|
>
|
|
849
|
-
<q-toolbar :class="{'q-pa-none':
|
|
878
|
+
<q-toolbar :class="{'q-pa-none': isSmall}">
|
|
850
879
|
<q-toolbar-title>
|
|
851
880
|
{{ __('myth.datatable.filter.title') }}
|
|
852
881
|
</q-toolbar-title>
|
|
@@ -968,11 +997,76 @@ defineExpose({
|
|
|
968
997
|
/>
|
|
969
998
|
</template>
|
|
970
999
|
</template>
|
|
1000
|
+
|
|
1001
|
+
<!-- Manage Columns -->
|
|
1002
|
+
<template v-if="manageColumns">
|
|
1003
|
+
<q-space />
|
|
1004
|
+
<MDtBtn
|
|
1005
|
+
key="manage-columns-btn"
|
|
1006
|
+
:disable="loading"
|
|
1007
|
+
icon="ion-ios-desktop"
|
|
1008
|
+
label="myth.datatable.columnsToShow"
|
|
1009
|
+
tooltip="myth.datatable.columnsToShowCaption"
|
|
1010
|
+
>
|
|
1011
|
+
<MModalMenu
|
|
1012
|
+
:no-close-btn="$q.screen.gt.xs"
|
|
1013
|
+
:offset="[10,10]"
|
|
1014
|
+
>
|
|
1015
|
+
<q-card style="min-width: 250px; max-width: 900px">
|
|
1016
|
+
<q-card-section>
|
|
1017
|
+
<div class="text-body1 q-mb-md">
|
|
1018
|
+
{{ __('myth.datatable.columnsToShow') }}
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="text-body2">
|
|
1021
|
+
<q-icon name="ion-ios-information-circle-outline" />
|
|
1022
|
+
{{ __('myth.datatable.columnsToShowCaption') }}
|
|
1023
|
+
</div>
|
|
1024
|
+
</q-card-section>
|
|
1025
|
+
<q-card-section>
|
|
1026
|
+
<template
|
|
1027
|
+
v-for="h in getHeaders"
|
|
1028
|
+
:key="h.name"
|
|
1029
|
+
>
|
|
1030
|
+
<q-checkbox
|
|
1031
|
+
v-model="visibleHeaders"
|
|
1032
|
+
:disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
|
|
1033
|
+
:label="h.label"
|
|
1034
|
+
:val="h.name"
|
|
1035
|
+
/>
|
|
1036
|
+
</template>
|
|
1037
|
+
</q-card-section>
|
|
1038
|
+
<q-card-section>
|
|
1039
|
+
<MBtn
|
|
1040
|
+
v-if="$q.screen.gt.xs"
|
|
1041
|
+
v-close-popup
|
|
1042
|
+
:class="{'q-mr-sm': !$q.screen.xs}"
|
|
1043
|
+
color="primary"
|
|
1044
|
+
label="labels.close"
|
|
1045
|
+
no-caps
|
|
1046
|
+
style="min-width: 100px"
|
|
1047
|
+
text-color="body"
|
|
1048
|
+
unelevated
|
|
1049
|
+
/>
|
|
1050
|
+
<MBtn
|
|
1051
|
+
:class="{'full-width': $q.screen.xs}"
|
|
1052
|
+
:label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
|
|
1053
|
+
color="primary"
|
|
1054
|
+
no-caps
|
|
1055
|
+
style="min-width: 100px"
|
|
1056
|
+
text-color="body"
|
|
1057
|
+
unelevated
|
|
1058
|
+
@click="onManageColumnsClick()"
|
|
1059
|
+
/>
|
|
1060
|
+
</q-card-section>
|
|
1061
|
+
</q-card>
|
|
1062
|
+
</MModalMenu>
|
|
1063
|
+
</MDtBtn>
|
|
1064
|
+
</template>
|
|
971
1065
|
</MRow>
|
|
972
1066
|
|
|
973
1067
|
<!-- Manage Columns -->
|
|
974
1068
|
<MRow
|
|
975
|
-
v-if="manageColumns"
|
|
1069
|
+
v-if="manageColumns && false"
|
|
976
1070
|
class="items-center"
|
|
977
1071
|
>
|
|
978
1072
|
<q-list
|
|
@@ -983,7 +1077,7 @@ defineExpose({
|
|
|
983
1077
|
:caption="__('myth.datatable.columnsToShowCaption')"
|
|
984
1078
|
:label="__('myth.datatable.columnsToShow')"
|
|
985
1079
|
expand-separator
|
|
986
|
-
icon="ion-ios-
|
|
1080
|
+
icon="ion-ios-tv"
|
|
987
1081
|
>
|
|
988
1082
|
<q-card>
|
|
989
1083
|
<q-card-section>
|
|
@@ -1277,7 +1371,7 @@ defineExpose({
|
|
|
1277
1371
|
>
|
|
1278
1372
|
<q-card class="m-dialog-card">
|
|
1279
1373
|
<q-card-section ref="formTitle">
|
|
1280
|
-
<q-toolbar :class="{'q-pa-none':
|
|
1374
|
+
<q-toolbar :class="{'q-pa-none': isSmall}">
|
|
1281
1375
|
<slot
|
|
1282
1376
|
:dt="datatableItemsScope"
|
|
1283
1377
|
:form="useFormContext"
|
|
@@ -110,6 +110,9 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
|
|
|
110
110
|
return h
|
|
111
111
|
})
|
|
112
112
|
const visibleHeaders = ref<string[]>([])
|
|
113
|
+
const onManageColumnsClick = () => {
|
|
114
|
+
visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [getHeaders.value[0].name] : getHeaders.value.map(e => e.name)
|
|
115
|
+
}
|
|
113
116
|
|
|
114
117
|
const contextmenu = ref(!1)
|
|
115
118
|
const selected = ref<MDtItem[]>([])
|
|
@@ -123,6 +126,11 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
|
|
|
123
126
|
const pagination = ref<MDatatablePagination>({ ...initPaginationOptions })
|
|
124
127
|
const search = ref<string | null>(null)
|
|
125
128
|
const searchColumnsRef = ref<string[]>([])
|
|
129
|
+
const getSearchColumnsHeaders = computed(() => getHeaders.value.filter(e => e.field !== props.controlKey))
|
|
130
|
+
const isSearchSelectedAll = computed(() => searchColumnsRef.value.length === getSearchColumnsHeaders.value.length)
|
|
131
|
+
const onCustomSearchClick = () => {
|
|
132
|
+
searchColumnsRef.value = isSearchSelectedAll.value ? [getSearchColumnsHeaders.value[0].name] : getSearchColumnsHeaders.value.map(e => e.name)
|
|
133
|
+
}
|
|
126
134
|
const searchPlaceholder = computed<string>(() => {
|
|
127
135
|
if (searchColumnsRef.value.length > 0) {
|
|
128
136
|
return __('myth.datatable.searchInputPlaceholder',
|
|
@@ -898,6 +906,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
|
|
|
898
906
|
resetDialogs,
|
|
899
907
|
getHeaders,
|
|
900
908
|
visibleHeaders,
|
|
909
|
+
onManageColumnsClick,
|
|
901
910
|
contextmenu,
|
|
902
911
|
selected,
|
|
903
912
|
onUpdateSelectedItems,
|
|
@@ -905,6 +914,9 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
|
|
|
905
914
|
pagination,
|
|
906
915
|
search,
|
|
907
916
|
searchColumnsRef,
|
|
917
|
+
getSearchColumnsHeaders,
|
|
918
|
+
isSearchSelectedAll,
|
|
919
|
+
onCustomSearchClick,
|
|
908
920
|
searchPlaceholder,
|
|
909
921
|
loading,
|
|
910
922
|
filterForm,
|