@mythpe/quasar-ui-qui 0.4.98 → 0.4.100

package/package.json

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

package/src/boot/register.ts

@@ -10,5 +10,5 @@ import { boot } from 'quasar/wrappers'
 import { install } from '../utils'
 
 export default boot(({ app }) => {
-  app.use(install)
+  app.use(install, {} as any)
 })

package/src/components/datatable/MDatatable.vue

@@ -774,8 +774,9 @@ defineExpose({
                             :align="col.align as any"
                             :copy="computedCopyColumns.includes(col.name)"
                             :copy-value="col.copyValue && typeof col.copyValue === 'function' ? () => col.copyValue(itemProps.row) : itemProps.row[col.copyValue || col.field]"
-                            :string="col.field.includes('_to_string') || col.field.includes('ToString')"
+                            :string="col.field.includes('_to_string') || col.field.includes('ToString') || col.string === !0"
                             :value="col.value"
+                            :digits="col.digits"
                           />
                         </template>
                         <template v-else-if="computedDescColumns.indexOf(col.name) !== -1">
@@ -1485,8 +1486,9 @@ defineExpose({
               :align="sarCellProps.col.align as any"
               :copy="computedCopyColumns.includes(sarCellProps.col.name)"
               :copy-value="sarCellProps.col.copyValue && typeof sarCellProps.col.copyValue === 'function' ? () => sarCellProps.col.copyValue(sarCellProps.row) : sarCellProps.row[sarCellProps.col.copyValue || sarCellProps.col.field]"
-              :string="sarCellProps.col.field.includes('_to_string') || sarCellProps.col.field.includes('ToString')"
+              :string="sarCellProps.col.field.includes('_to_string') || sarCellProps.col.field.includes('ToString') || sarCellProps.col.string === !0"
               :value="sarCellProps.row[sarCellProps.col.field]"
+              :digits="sarCellProps.col.digits"
             />
           </q-td>
         </template>

package/src/components/datatable/MDtSarColumn.vue

@@ -19,6 +19,7 @@ interface Props {
   copyValue?: MDtSarColumnProps['copyValue'];
   align?: MDtSarColumnProps['align'];
   string?: boolean;
+  digits?: MDtSarColumnProps['digits'];
 }
 
 const props = defineProps<Props>()
@@ -67,6 +68,7 @@ defineOptions({
     </q-btn>
     <MSarString
       :string="string"
+      :digits="digits"
       :text="val"
     />
     <slot />

package/src/components/sar/MSarIcon.vue

@@ -7,17 +7,9 @@
   -->
 
 <script lang="ts" setup>
-import type { QIconProps } from 'quasar'
-import { computed } from 'vue'
 
-type Props = QIconProps
-const noDefault = defineModel<boolean>('noDefault', { required: !1, default: !1 })
-const props = defineProps<Props>()
-const getSize = computed<any>(() => ({
-  size: noDefault.value ? props.size : (props.size || '100%')
-}))
 defineOptions({
-  name: 'MSarString',
+  name: 'MSarIcon',
   inheritAttrs: !1
 })
 </script>
@@ -25,20 +17,8 @@ defineOptions({
 <template>
   <q-icon
     class="m-sar-icon"
-    v-bind="Object.assign({},$props,$attrs,getSize)"
+    v-bind="{...$attrs, name: 'myth-sar'}"
   >
-    <slot name="default">
-      <svg
-        viewBox="0 0 1124.14 1256.39"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"
-        />
-        <path
-          d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z"
-        />
-      </svg>
-    </slot>
+    <slot />
   </q-icon>
 </template>

package/src/components/sar/MSarString.vue

@@ -11,31 +11,36 @@ import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
 import type { MSarStringProps } from '../../types'
-import { useQuasar } from 'quasar'
+import { extend } from 'quasar'
 
 interface Props {
+  tag?: MSarStringProps['tag'];
   text?: MSarStringProps['text'];
   string?: boolean;
+  format?: MSarStringProps['format'];
+  digits?: MSarStringProps['digits'];
 }
 
 const props = defineProps<Props>()
 
-const $q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })
 const { __, formatMoney } = useMyth()
 const getText = computed<string | undefined>(() => {
-  if (!props.text?.toString().length) {
-    return props.text
+  const text = props.text?.toString?.() || ''
+  const length = text.length
+  if (length < 1) {
+    return undefined
   }
-  const text = props.text?.toString?.() || null
-  if (!text) {
-    return props.text
-  }
-  if (props.string) {
-    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
+  const suffix = '﷼'
+  const def = 2
+  const digits = props.digits !== undefined ? parseInt(props.digits?.toString?.() ?? `${def}`) ?? def : def
+  const opt = extend<Intl.NumberFormatOptions>(!0, {
+    minimumFractionDigits: digits ?? def,
+    maximumFractionDigits: digits ?? def
+  }, props.format)
+  const value = props.string ? (te(`labels.${text}`) ? __(`labels.${text}`) : (te(text) ? __(text) : `${text}`)) : text
+  return !isNaN(value) ? formatMoney(value, suffix, opt) : `${value} ${suffix}`.trim()
+  // return v !== null && v !== undefined ? (v?.toString?.() || v) : undefined
 })
 
 defineOptions({
@@ -45,12 +50,9 @@ defineOptions({
 </script>
 
 <template>
-  <div
-    class="m-sar-col"
-    style="direction: rtl !important;"
+  <span
+    class="m-sar-string sar-icon"
     v-bind="$attrs"
-  >
-    <span>{{ getText }}</span>
-    <span :class="['sar-icon',{'q-pl-xs': $q.lang.rtl, 'q-pr-xs': !$q.lang.rtl}]">{{ __('sr') }}</span>
-  </div>
+    v-text="getText"
+  />
 </template>

package/src/icons/config.ts

@@ -0,0 +1,13 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2026 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+export const iconSet = 'myth-'
+export const icons = {
+  sar: 'M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z&&M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z|0 0 1124.14 1256.39'
+}
+export default {}

package/src/icons/index.ts

@@ -0,0 +1,10 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2026 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+export * from './config'
+export default {}

package/src/style/sar-font.sass

@@ -8,14 +8,20 @@
 
 @font-face
   font-family: SarIcon
-  font-style: normal
-  font-weight: 400
   src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype")
-  font-display: block
+  font-display: swap
+  unicode-range: U+FDFC
 
 .sar-icon
-  font-family: SarIcon, sans-serif !important
   font-style: normal !important
   font-weight: 400 !important
   font-variant: normal !important
   text-transform: none !important
+
+[dir="rtl"]
+  .sar-icon
+    font-family: SarIcon, var(--m-font-rtl, 'inherit'), 'Roboto', sans-serif
+
+[dir="ltr"]
+  .sar-icon
+    font-family: SarIcon, var(--m-font-ltr, 'inherit'), 'Roboto', sans-serif

package/src/types/api/MSar.d.ts

@@ -9,15 +9,18 @@
 import type { VNode } from 'vue'
 import type { QIconProps } from 'quasar'
 
-export type MSarIconProps = Omit<QIconProps, 'name'> & Record<string, any>;
+export type MSarIconProps = Omit<QIconProps, 'name'>;
 
 export interface MSarIconSlots {
   default: () => VNode[]
 }
 
 export type MSarStringProps = {
+  tag?: any;
   text?: any;
   string?: boolean;
+  format?: Intl.NumberFormatOptions;
+  digits?: number | string;
 }
 
 export interface MSarStringSlots {

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

@@ -474,6 +474,7 @@ export interface MDtSarColumnProps {
   copyValue?: any;
   align?: 'left' | 'right' | 'center';
   string?: boolean;
+  digits?: number | string;
 }
 
 export interface MDtSarColumnSlots {

package/src/utils/vue-plugin.ts

@@ -13,6 +13,8 @@ import { defineComponents } from '../plugin/defineComponents'
 
 import { createMyth, extendOptions } from './createMyth'
 import { MythKey } from './const'
+import { icons, iconSet } from '../icons'
+import { Str } from './Str'
 
 function install (app: App, options: InstallOptions) {
   const opts = extendOptions(options)
@@ -35,6 +37,20 @@ function install (app: App, options: InstallOptions) {
   // for (const routesKey in routes) {
   //   console.log(routesKey)
   // }
+  const otherIconMapFn = app.config.globalProperties.$q.iconMapFn
+  app.config.globalProperties.$q.iconMapFn = (iconName) => {
+    if (iconName.startsWith(iconSet)) {
+      const name = Str.camelCase(iconName.slice(iconSet.length))
+      if (Object.keys(icons).includes(name)) {
+        return {
+          icon: icons[name]
+        }
+      }
+    }
+    if (typeof otherIconMapFn === 'function') {
+      return otherIconMapFn(iconName)
+    }
+  }
 }
 
 export {