@mythpe/quasar-ui-qui 0.2.29 → 0.2.30

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -79,6 +79,7 @@ type Props = {
   backIcon?: MDatatableProps['backIcon'];
   urlColumns?: MDatatableProps['urlColumns'];
   colorColumns?: MDatatableProps['colorColumns'];
+  sarColumns?: MDatatableProps['sarColumns'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -141,7 +142,8 @@ const props = withDefaults(defineProps<Props>(), {
   noBackBtn: !1,
   backIcon: undefined,
   urlColumns: () => ([]),
-  colorColumns: () => ([])
+  colorColumns: () => ([]),
+  sarColumns: () => ([])
 })
 
 interface Emits {
@@ -372,6 +374,7 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
 const urlColumnsProp = computed<string[]>(() => toValue(props.urlColumns) || [])
 const colorColumnsProp = computed<string[]>(() => toValue(props.colorColumns) || [])
+const sarColumnsProp = computed<string[]>(() => toValue(props.sarColumns) || [])
 onMounted(() => refresh())
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
@@ -623,6 +626,14 @@ defineExpose({
                             </div>
                           </div>
                         </template>
+                        <template v-else-if="sarColumnsProp.indexOf(col.name) !== -1">
+                          <div
+                            v-if="!!col.value"
+                            class="row q-gutter-lg justify-center items-center"
+                          >
+                            <MSarString :text="col.value||'0.00'" />
+                          </div>
+                        </template>
                         <template v-else-if="col.name === controlKey">
                           <MRow
                             class="m--dt-context_menu_items"
@@ -1235,6 +1246,15 @@ defineExpose({
             </div>
           </q-td>
         </template>
+        <template
+          v-for="sr in sarColumnsProp"
+          :key="`a-sr-${sr}`"
+          #[`body-cell-${sr}`]="srProps"
+        >
+          <q-td :props="srProps">
+            <MSarString :text="srProps.row[sr]||'0.00'" />
+          </q-td>
+        </template>
 
         <template
           v-for="slotName in getSlots"

package/src/components/form/MInput.vue

@@ -15,6 +15,7 @@ import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QInput, type QInputSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 import type { MInputProps as Props } from '../../types'
+import { MSarString } from '../sar'
 
 interface P {
   name: Props['name'];
@@ -108,7 +109,6 @@ const sarValue = computed<string | null>(() => {
   if (value.value?.toString?.()?.length) {
     v = value.value
   }
-  console.log(v)
   return v || null
 })
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
@@ -205,13 +205,10 @@ defineOptions({
       >
         <slot name="control">
           <MInputFieldControl>
-            <template v-if="sar">
-              <div class="row items-start q-gu tter-sm">
-                <span v-text="sarValue" />
-                <MSarIcon />
-              </div>
-              <!--<MSarCol :text="!!viewModeValue?.toString?.()?.length ? viewModeValue : ( !!value?.toString?.()?.length ? value : undefined )" />-->
-            </template>
+            <MSarString
+              v-if="sar"
+              :text="sarValue"
+            />
             <template v-else>
               {{ viewModeValue ?? value }}
             </template>

package/src/components/sar/MSarIcon.vue

@@ -15,7 +15,7 @@ const noDefault = defineModel<boolean>('noDefault', { required: !1, default: !1
 const props = defineProps<Props>()
 const getSize = computed<Props['size']>(() => noDefault.value ? props.size : props.size || '100%')
 defineOptions({
-  name: 'MSarIcon',
+  name: 'MSarString',
   inheritAttrs: !1
 })
 </script>

package/src/components/sar/{MSarCol.vue → MSarString.vue}

@@ -14,22 +14,14 @@ import { useMyth } from '../../composable'
 
 interface Props {
   text?: any;
-  size?: string | number;
-  iconSize?: string | number;
   string?: boolean;
-  append?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   text: undefined,
-  size: 15,
-  iconSize: 17,
-  string: !1,
-  append: !1
+  string: !1
 })
 
-const getSize = computed<number>(() => parseInt(props.size?.toString?.() || '0') || 0)
-// const getIconSize = computed<number>(() => parseInt(props.iconSize?.toString?.() || '0') || 0)
 const { te } = useI18n({ useScope: 'global' })
 const { __, formatMoney } = useMyth()
 const getText = computed<string | undefined>(() => {
@@ -41,36 +33,28 @@ const getText = computed<string | undefined>(() => {
     return props.text
   }
   if (props.string) {
-    return te(`labels.${text}`) ? __(`labels.${text}`) : __(text)
+    return te(`labels.${text}`) ? __(`labels.${text}`) : (te(text) ? __(text) : text)
   }
   const v = isNaN(text) ? text : formatMoney(text)
   return v !== null && v !== undefined ? (v?.toString?.() || v) : undefined
 })
 
 defineOptions({
-  name: 'MSarCol',
+  name: 'MSarString',
   inheritAttrs: !1
 })
 </script>
 
 <template>
   <div
-    :class="`m--sar-col ${append ? 'm--sar-col__append' : ''}`"
+    class="m--sar-col"
     v-bind="$attrs"
   >
-    <MRow
-      class="items-center"
-      gutter
-    >
-      <slot name="default">
-        <div
-          v-if="text !== undefined && text !== null"
-          :style="`font-size: ${getSize}px;`"
-          class="flex flex-center m--sar-col__text"
-          v-text="getText"
-        />
-      </slot>
-      <!--<MSarSvg :size="getIconSize" />-->
-    </MRow>
+    <span>
+      <MSarIcon v-if="!$q.lang.rtl" />
+      <span :class="{'q-pr-xs': $q.lang.rtl, 'q-pl-xs': !$q.lang.rtl}">{{ getText }}</span>
+      <MSarIcon v-if="$q.lang.rtl" />
+      <slot />
+    </span>
   </div>
 </template>

package/src/components/sar/index.ts

@@ -7,7 +7,8 @@
  */
 
 import MSarIcon from './MSarIcon.vue'
+import MSarString from './MSarString.vue'
 
-export { MSarIcon }
+export { MSarIcon, MSarString }
 
 export default {}

package/src/plugin/defineAsyncComponents.ts

@@ -58,7 +58,6 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MDtContextmenuItems', defineAsyncComponent(() => import('../components/datatable/MDtContextmenuItems.vue')))
 
   // Utils.
-  // app.component('MSarCol', defineAsyncComponent(() => import('../components/util/sar/MSarSvg.vue')))
-  // app.component('MSarSvg', defineAsyncComponent(() => import('../components/util/sar/MSarSvg.vue')))
   app.component('MSarIcon', defineAsyncComponent(() => import('../components/sar/MSarIcon.vue')))
+  app.component('MSarString', defineAsyncComponent(() => import('../components/sar/MSarString.vue')))
 }

package/src/style/m-input.sass

@@ -38,10 +38,3 @@ $radius-value: $generic-border-radius !default
   font-weight: 400
   line-height: 1.25rem
   letter-spacing: 0.03333em
-
-.m--input
-  .m--sar-col
-    &__text
-      font-size: 18px
-      line-height: 16px
-      height: 15px

package/src/types/components.d.ts

@@ -988,15 +988,12 @@ export interface MSarIconSlots {
   default: () => VNode[]
 }
 
-export type MSarColProps = {
-  size?: string | number;
-  iconSize?: string | number;
+export type MSarStringProps = {
   text?: any;
   string?: boolean;
-  append?: boolean;
 }
 
-export interface MSarColSlots {
+export interface MSarStringSlots {
   default: () => VNode[]
 }
 
@@ -1058,7 +1055,7 @@ declare module '@vue/runtime-core' {
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
 
     // Utils.
-    // MSarCol: GlobalComponentConstructor<MSarColProps, MSarColSlots>;
     MSarIcon: GlobalComponentConstructor<MSarIconProps, MSarIconSlots>;
+    MSarString: GlobalComponentConstructor<MSarStringProps, MSarStringSlots>;
   }
 }

package/src/types/m-datatable.d.ts

@@ -305,6 +305,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Names of color pattern columns in the table.
    */
   colorColumns?: MaybeRefOrGetter<string[]>;
+  /**
+   * Names of SAR columns in the table.
+   */
+  sarColumns?: MaybeRefOrGetter<string[]>;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {