@mythpe/quasar-ui-qui 0.4.51 → 0.4.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.4.51",
+  "version": "0.4.53",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -244,6 +244,7 @@ const {
   resetDialogs,
   getHeaders,
   getSortedHeaders,
+  arrangementColumns,
   controlKey,
   controlJustify,
   visibleHeaders,
@@ -265,14 +266,14 @@ const {
   hasAction,
   fullscreen,
   hasAddBtn,
-  hasUpdateBtn,
-  hasCloneBtn,
-  hasShowBtn,
-  hasDestroyBtn,
+  // hasUpdateBtn,
+  // hasCloneBtn,
+  // hasShowBtn,
+  // hasDestroyBtn,
   hasFilterDialog,
   isUpdateMode,
   setIsUpdateMode,
-  isSingleSelectedItem,
+  // isSingleSelectedItem,
   hasSelectedItem,
   getShowTitle,
   getFormTitle,
@@ -314,7 +315,7 @@ const {
   contextmenuItems,
   activeContextItems,
   datatableItemsScope,
-  onCloneItem,
+  // onCloneItem,
   openAttachmentDialog,
   importDialogModel,
   onOpenImportDialog,
@@ -1003,7 +1004,7 @@ defineExpose({
                                   name="filter"
                                 />
                               </MContainer>
-                              <q-separator color="primary" />
+                              <q-separator />
                               <MContainer size="sm">
                                 <MRow class="justify-between">
                                   <MBtn
@@ -1103,6 +1104,12 @@ defineExpose({
                                   <q-icon name="ion-ios-information-circle-outline" />
                                   {{ __('myth.datatable.columnsToShowCaption') }}
                                 </div>
+                                <q-checkbox
+                                  v-model="arrangementColumns"
+                                  :label="__('myth.datatable.arrangementColumns')"
+                                  class="q-mt-sm"
+                                  dense
+                                />
                               </q-card-section>
                               <q-separator />
                               <q-card-section>
@@ -1123,25 +1130,23 @@ defineExpose({
                               <q-separator />
                               <q-card-section>
                                 <MBtn
-                                  v-if="$q.screen.gt.xs"
-                                  v-close-popup
-                                  :class="{'q-mr-sm': !$q.screen.xs}"
+                                  :class="{'full-width': $q.screen.xs}"
+                                  :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
                                   color="primary"
-                                  label="labels.close"
                                   no-caps
                                   style="min-width: 100px"
                                   text-color="on-primary"
-                                  unelevated
+                                  @click="onManageColumnsClick()"
                                 />
                                 <MBtn
-                                  :class="{'full-width': $q.screen.xs}"
-                                  :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
+                                  v-if="$q.screen.gt.xs"
+                                  v-close-popup
+                                  :class="['',{'q-ml-sm': !$q.screen.xs}]"
                                   color="primary"
+                                  label="labels.close"
                                   no-caps
                                   style="min-width: 100px"
                                   text-color="on-primary"
-                                  unelevated
-                                  @click="onManageColumnsClick()"
                                 />
                               </q-card-section>
                             </q-card>
@@ -1244,6 +1249,7 @@ defineExpose({
                     expand-separator
                     icon="ion-ios-tv"
                   >
+                    <q-separator />
                     <q-card>
                       <q-card-section>
                         <template
@@ -1257,6 +1263,24 @@ defineExpose({
                             :val="h.name"
                           />
                         </template>
+                        <MRow
+                          class="q-mt-sm row items-center"
+                          gutter
+                        >
+                          <MBtn
+                            :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
+                            color="primary"
+                            no-caps
+                            style="min-width: 100px"
+                            text-color="on-primary"
+                            @click="onManageColumnsClick()"
+                          />
+                          <q-checkbox
+                            v-model="arrangementColumns"
+                            :label="__('myth.datatable.arrangementColumns')"
+                            dense
+                          />
+                        </MRow>
                       </q-card-section>
                     </q-card>
                   </q-expansion-item>

package/src/components/sar/MSarString.vue

@@ -47,10 +47,10 @@ defineOptions({
 <template>
   <div
     class="m-sar-col"
+    style="direction: rtl !important;"
     v-bind="$attrs"
   >
-    <span :class="['sar-icon',{hidden: $q.lang.rtl}]">{{ __('sr') }}&nbsp;</span>
     <span>{{ getText }}</span>
-    <span :class="['sar-icon',{hidden: !$q.lang.rtl}]">&nbsp;{{ __('sr') }}</span>
+    <span :class="['sar-icon',{'q-pl-xs': $q.lang.rtl, 'q-pr-xs': !$q.lang.rtl}]">{{ __('sr') }}</span>
   </div>
 </template>

package/src/composable/useDtHelpers.ts

@@ -139,14 +139,20 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
     }
     return h
   })
-  const getSortedHeaders = computed(() => getHeaders.value.slice().sort((a, b) => {
-    if (a.name === controlKey.value || b.name === controlKey.value) {
-      return 0
+  const arrangementColumns = ref(!1)
+  const getSortedHeaders = computed(() => {
+    if (!arrangementColumns.value) {
+      return getHeaders.value
     }
-    const f = visibleHeaders.value.indexOf(a.name)
-    const l = visibleHeaders.value.indexOf(b.name)
-    return f - l
-  }))
+    return getHeaders.value.slice().sort((a, b) => {
+      if (a.name === controlKey.value || b.name === controlKey.value) {
+        return 0
+      }
+      const f = visibleHeaders.value.indexOf(a.name)
+      const l = visibleHeaders.value.indexOf(b.name)
+      return f - l
+    })
+  })
   const visibleHeaders = ref<string[]>([])
   const onManageColumnsClick = () => {
     visibleHeaders.value = visibleHeaders.value.length === getHeaders.value.length ? [getHeaders.value[0].name] : getHeaders.value.map(e => e.name)
@@ -994,6 +1000,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
     resetDialogs,
     getHeaders,
     getSortedHeaders,
+    arrangementColumns,
     controlProps,
     controlKey,
     controlJustify,