@mythpe/quasar-ui-qui 0.1.56 → 0.1.58

package/package.json

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

package/src/boot/register.ts

@@ -7,8 +7,9 @@
  */
 
 import { boot } from 'quasar/wrappers'
-import Plugin from '../utils/vue-plugin'
+import { install } from '../utils'
+import type { InstallOptions } from '../types'
 
 export default boot(({ app }) => {
-  app.use(Plugin)
+  app.use(install, {} as InstallOptions)
 })

package/src/components/datatable/MDatatable.vue

@@ -1436,80 +1436,3 @@ defineExpose({
     </q-page-sticky>
   </div>
 </template>
-
-<style lang="sass">
-.touch
-  .m--datatable-fab-tooltip
-    display: none
-
-.body--light
-  .m--datatable
-    .q-table__top,
-    .q-table__bottom,
-    thead tr:first-child th
-      background: #fff
-
-.body--dark
-  .m--datatable
-    .q-table__top,
-    .q-table__bottom,
-    thead tr:first-child th
-      background: var(--q-dark-page)
-
-.m--datatable-component
-  .m--datatable.m--datatable-grid
-    .q-table__top
-      padding-left: 0
-      padding-right: 0
-
-  &__fab
-    margin-bottom: 12rem
-
-  &__fixed
-    thead tr th
-      position: sticky
-      z-index: 1
-
-    thead tr:first-child th
-      top: 0
-
-    .m--datatable:not(.m--datatable-grid)
-      max-height: 80vh
-
-    .m--datatable:not(.m--datatable-grid).q-table--dense
-      &.q-table--loading thead tr:last-child th
-        top: 26px
-
-      .m--datatable:not(.m--datatable-grid):not(.q-table--dense)
-        &.q-table--loading thead tr:last-child th
-          top: 55px
-
-  .q-table__bottom
-    justify-content: start !important
-
-    .q-table__separator.col
-      display: none !important
-
-  .q-table__top
-    align-items: center
-
-    .q-table__separator.col
-      display: none !important
-
-    .q-table__control:last-child
-      padding-left: 8px
-      display: block
-      flex: 10000 1 0
-      width: auto
-      min-width: 0
-      max-width: 100%
-
-.m--dialog-card
-  .q-card__actions
-    .q-btn
-      padding: 4px 16px !important
-
-.grid-style-transition
-  transition: transform .28s, background-color .28s
-
-</style>

package/src/components/util/sar/MSarCol.vue

@@ -24,8 +24,8 @@ const props = withDefaults(defineProps<Props>(), {
   append: !1
 })
 
-const { te, n } = useI18n({ useScope: 'global' })
-const { __, toFixedFormatted } = useMyth()
+const { te } = useI18n({ useScope: 'global' })
+const { __, formatMoney } = useMyth()
 const getText = computed<string | undefined>(() => {
   if (!props.text?.toString().length) {
     return props.text
@@ -37,7 +37,7 @@ const getText = computed<string | undefined>(() => {
   if (props.string) {
     return te(`labels.${text}`) ? __(`labels.${text}`) : __(text)
   }
-  const v = isNaN(text) ? toFixedFormatted(text || '') : toFixedFormatted(n(parseFloat(text || '0') || 0))
+  const v = formatMoney(text)
 
   return v !== null && v !== undefined ? (v?.toString?.() || v) : undefined
 })

package/src/index.sass

@@ -6,6 +6,8 @@
 
 //@import 'quasar/src/css/variables.sass'
 @import './style/ckeditor5.sass'
-@import './style/main.sass'
 @import './style/m-container.sass'
+@import './style/m-dt.sass'
+@import './style/main.sass'
 @import './style/print.sass'
+@import './style/transition'

package/src/style/ckeditor5.sass

@@ -1,8 +1,5 @@
 @import 'ckeditor5/ckeditor5.css' #{"/* rtl:ignore */"}
 
-$ck-z-dialog: 9999
-$ck-z-panel: calc(var(--ck-z-default) + var(--ck-z-dialog))
-
 :root
   --ck-z-dialog: 9999 !important
   --ck-z-panel: calc(var(--ck-z-default) + var(--ck-z-dialog)) !important

package/src/style/m-container.sass

@@ -1,4 +1,3 @@
-//@use "quasar/src/css/variables" as q
 
 $m--container-padding: $space-base !default
 $m--container-fluid-width: 1440px !default

package/src/style/m-dt.sass

@@ -0,0 +1,76 @@
+
+$fixed-dt-height: 80vh !default
+
+.touch
+  .m--datatable-fab-tooltip
+    display: none
+
+.body--light
+  .m--datatable
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th
+      background: #fff
+
+.body--dark
+  .m--datatable
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th
+      background: var(--q-dark-page)
+
+.m--datatable-component
+  .m--datatable.m--datatable-grid
+    .q-table__top
+      padding-left: 0
+      padding-right: 0
+
+  &__fab
+    margin-bottom: 12rem
+
+  &__fixed
+    thead tr th
+      position: sticky
+      z-index: 1
+
+    thead tr:first-child th
+      top: 0
+
+    .m--datatable:not(.m--datatable-grid)
+      max-height: $fixed-dt-height
+
+    .m--datatable:not(.m--datatable-grid).q-table--dense
+      &.q-table--loading thead tr:last-child th
+        top: 26px
+
+      .m--datatable:not(.m--datatable-grid):not(.q-table--dense)
+        &.q-table--loading thead tr:last-child th
+          top: 55px
+
+  .q-table__bottom
+    justify-content: start !important
+
+    .q-table__separator.col
+      display: none !important
+
+  .q-table__top
+    align-items: center
+
+    .q-table__separator.col
+      display: none !important
+
+    .q-table__control:last-child
+      padding-left: 8px
+      display: block
+      flex: 10000 1 0
+      width: auto
+      min-width: 0
+      max-width: 100%
+
+.m--dialog-card
+  .q-card__actions
+    .q-btn
+      padding: 4px 16px !important
+
+.grid-style-transition
+  transition: transform .28s, background-color .28s

package/src/style/main.sass

@@ -1,5 +1,4 @@
 @use 'sass:map'
-//@use "quasar/src/css/variables" as q
 
 $m--row-margin-top: 1rem !default
 $m--input-helpers-margin: 5px !default

package/src/utils/Helpers.ts

@@ -303,24 +303,16 @@ export const Helpers = {
     }
     return `//${path}`
   },
-  toFixedFormatted (value: any, prefix?: string) {
-    value = value || '0.00'
-    if (value) {
-      const text: string = value?.toString() || ''
-      const def = prefix ? (value + ` ${prefix}`) : value
-      if (!text) {
-        return def
-      }
-      const after: string = (text.split?.('.')[1] || '')?.toString() || ''
-      if (!after) {
-        return def
-      }
-      if (after?.length === 1) {
-        value = `${value}0`
-      }
-      return value?.toString() + (prefix ? ` ${prefix}` : '')
+  formatMoney (value: any = '', suffix: string = ''): string {
+    let numValue = typeof value !== 'number' ? parseFloat(value) : value
+    if (isNaN(numValue)) {
+      numValue = 0.00
     }
-    return value
+    const formattedValue = numValue.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    })
+    return `${formattedValue} ${suffix}`.trim()
   },
   calculateAspectRatio: (width: number | string, height: number | string): [number, string] => {
     width = Number(width)

package/src/utils/vue-plugin.ts

@@ -23,7 +23,6 @@ import { MythKey } from './const'
 function install (app: App, options: InstallOptions) {
   const myth = createMyth(options)
   app.provide(MythKey, myth)
-  // defineOptions(options)
   if (options?.asyncComponents) {
     defineAsyncComponents(app)
   } else {