@mythpe/quasar-ui-qui 0.3.92 → 0.3.94

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -1562,10 +1562,6 @@ defineExpose({
     <!--Import Dialog-->
     <MDialog
       v-model="importDialogModel"
-      allow-focus-outside
-      no-backdrop-dismiss
-      no-esc-dismiss
-      no-shake
       position="top"
       transition-hide="slide-up"
       transition-show="slide-down"
@@ -1626,12 +1622,19 @@ defineExpose({
       v-bind="pluginOptions.dt?.formDialogProps"
     >
       <q-card class="q-dialog-plugin">
-        <div class="m-form__container full-height no-wrap">
+        <MContainer
+          dense
+          fluid
+        >
           <form
             class="m-form column full-height justify-between no-wrap"
             @submit="defaultSubmitItem"
           >
-            <q-card class="m-dialog-card">
+            <q-card
+              class="m-dialog-card"
+              flat
+              square
+            >
               <q-card-section ref="formTitle">
                 <q-toolbar :class="['m-container__fluid', {'q-pa-none': isSmall}]">
                   <slot
@@ -1746,7 +1749,7 @@ defineExpose({
               </q-card-actions>
             </q-card>
           </form>
-        </div>
+        </MContainer>
       </q-card>
     </MDialog>
 
@@ -1755,49 +1758,48 @@ defineExpose({
       v-model="showDialogModel"
       v-bind="pluginOptions.dt?.showDialogProps"
     >
-      <q-card class="m-dialog-card">
-        <q-card-section ref="showTitleRef">
-          <q-toolbar>
-            <q-toolbar-title>
-              <q-btn
-                :icon="`ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
-                fab-mini
-                flat
-                @click="closeShowDialog()"
-              >
-                <q-tooltip class="m-dt-btn-tooltip">
-                  {{ __('myth.titles.back') }}
-                </q-tooltip>
-              </q-btn>
-              {{ getShowTitle }}
-            </q-toolbar-title>
-          </q-toolbar>
-        </q-card-section>
-        <q-separator />
-        <q-card-section
-          :style="`height: ${($q.screen.height || 100) - 3 - (($refs.showActionsRef as any)?.$el?.offsetHeight || 60) - (($refs.showTitleRef as any)?.$el?.offsetHeight || 80)}px`"
-          class="scroll m-datatable__dialog-show-container"
-        >
-          <slot
-            :dt="datatableItemsScope"
-            :form="useFormContext"
-            :index="dialogItemIndex"
-            :item="dialogItem"
-            name="show"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-actions
-          ref="showActionsRef"
-          align="left"
-          class="print-hide"
+      <q-card
+        class="m-dialog-card q-dialog-plugin"
+        flat
+      >
+        <MContainer
+          dense
+          fluid
         >
-          <MBtn
-            label="myth.titles.close"
-            v-bind="pluginOptions.dt?.dialogButtonsProps"
-            @click="closeShowDialog"
-          />
-        </q-card-actions>
+          <q-card flat>
+            <q-card-section ref="showTitleRef">
+              <q-toolbar>
+                <q-toolbar-title>
+                  {{ getShowTitle }}
+                </q-toolbar-title>
+                <q-btn
+                  flat
+                  icon="close"
+                  padding="3px"
+                  text-color="body"
+                  @click="closeShowDialog"
+                >
+                  <q-tooltip class="m-dt-btn-tooltip">
+                    {{ __('myth.titles.close') }}
+                  </q-tooltip>
+                </q-btn>
+              </q-toolbar>
+            </q-card-section>
+            <q-separator />
+            <q-card-section
+              :style="`height: ${($q.screen.height || 100) - 84 }px`"
+              class="scroll m-datatable__dialog-show-container"
+            >
+              <slot
+                :dt="datatableItemsScope"
+                :form="useFormContext"
+                :index="dialogItemIndex"
+                :item="dialogItem"
+                name="show"
+              />
+            </q-card-section>
+          </q-card>
+        </MContainer>
       </q-card>
     </MDialog>
 

package/src/components/form/MPhone.vue

@@ -19,6 +19,7 @@ interface P {
   name: Props['name'];
   countryPhone?: Props['countryPhone'];
   readonly?: Props['readonly'];
+  viewMode?: Props['viewMode'];
   required?: Props['required'];
   placeholder?: Props['placeholder'];
   viewModeValue?: Props['viewModeValue'];
@@ -41,6 +42,10 @@ const countryName = computed(() => props.countryPhone || `${props.name}_country`
 const countryValue = useFieldValue(countryName)
 const $q = useQuasar()
 const { __ } = useMyth()
+const getPlaceholder = computed(() => {
+  return !countryValue.value ? __('replace.choose', { name: __(`attributes.${countryName.value}`) }) : props.placeholder
+})
+const isSmall = computed(() => $q.screen.lt.md)
 const focus = () => {
   phoneRef?.value?.input?.focus?.()
 }
@@ -85,6 +90,30 @@ defineOptions({
     }"
   >
     <MRow col>
+      <MAxios
+        :autocomplete="false"
+        :class="['self-start overflow-hidden',{hidden: readonly,'order-last': $q.lang.rtl}]"
+        :dense="dense"
+        :name="countryName"
+        :prepend-icon="noIcon ? undefined : (!isSmall ? 'ion-keypad' : undefined)"
+        :required="readonly ? undefined : required"
+        :search-length="searchLength??0"
+        :style="`width: ${isSmall ? 150 : 200}px;max-height: 60px;`"
+        :use-input="!0"
+        :view-mode="readonly"
+        auto
+        hide-bottom-space
+        hide-dropdown-icon
+        hide-hint
+        no-filter
+        no-loading
+        option-label="code_label"
+        popup-content-class="m-select__popup-phone"
+        popup-no-route-dismiss
+        service="country.codes"
+        v-bind="selectProps"
+        @model="onSelectCountry"
+      />
       <MInput
         ref="phoneRef"
         :input-class="!countryValue ? undefined : `ltr`"
@@ -98,11 +127,11 @@ defineOptions({
           ...$attrs,
           required,
           dense,
-          viewModeValue,
-          placeholder: !countryValue ? __('replace.choose',{name: __(`attributes.${countryName}`) }) : placeholder,
-          col: readonly ? 12 : 7,
-          readonly: readonly ? !1 : !countryValue,
-          viewMode: readonly,
+          viewModeValue: viewModeValue !== undefined ? viewModeValue : getPlaceholder,
+          placeholder:getPlaceholder,
+          col: !0,
+          viewMode: (readonly || viewMode) ? !0 : !countryValue,
+          readonly: undefined,
         }"
       >
         <template
@@ -113,26 +142,6 @@ defineOptions({
           <slot :name="slot" />
         </template>
       </MInput>
-      <MAxios
-        :autocomplete="false"
-        :class="{hidden: readonly}"
-        :dense="dense"
-        :name="countryName"
-        :prepend-icon="noIcon ? undefined : ($q.screen.gt.xs ? 'ion-keypad' : undefined)"
-        :required="readonly ? undefined : required"
-        :search-length="searchLength??0"
-        :view-mode="readonly"
-        col
-        hide-bottom-space
-        hide-dropdown-icon
-        hide-hint
-        option-label="code_label"
-        popup-content-class="m-select__popup-phone"
-        popup-no-route-dismiss
-        service="country.codes"
-        v-bind="selectProps"
-        @model="onSelectCountry"
-      />
     </MRow>
   </MCol>
 </template>