@mythpe/quasar-ui-qui 0.1.48 → 0.1.50

package/package.json

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

package/src/components/form/MInput.vue

@@ -41,6 +41,7 @@ interface P {
   mobile?: Props['mobile'];
   email?: Props['email'];
   float?: Props['float'];
+  sar?: boolean;
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -59,7 +60,7 @@ const props = withDefaults(defineProps<P>(), {
   help: undefined,
   required: undefined,
   rules: undefined,
-  viewMode: () => !1,
+  viewMode: !1,
   viewModeValue: undefined,
   autocomplete: undefined,
   topLabel: undefined,
@@ -67,7 +68,8 @@ const props = withDefaults(defineProps<P>(), {
   clearable: undefined,
   mobile: undefined,
   email: undefined,
-  float: undefined
+  float: undefined,
+  sar: !1
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __, props: pluginOptions } = useMyth()
@@ -133,6 +135,7 @@ defineOptions({
     <component
       :is="viewMode ? QField : QInput"
       ref="input"
+      class="m--input"
       v-bind="{
         ...$attrs,
         ...theme,
@@ -161,7 +164,12 @@ defineOptions({
       >
         <slot name="control">
           <MInputFieldControl>
-            {{ viewModeValue ?? value }}
+            <template v-if="sar">
+              <MSarCol :text="!!viewModeValue?.toString?.()?.length ? viewModeValue : ( !!value?.toString?.()?.length ? value : undefined )" />
+            </template>
+            <template v-else>
+              {{ viewModeValue ?? value }}
+            </template>
           </MInputFieldControl>
         </slot>
       </template>

package/src/components/form/index.ts

@@ -10,7 +10,7 @@ import MAxios from './MAxios.vue'
 import MAvatarViewer from './MAvatarViewer.vue'
 import MBtn from './MBtn.vue'
 import MCheckbox from './MCheckbox.vue'
-// import MCkeditor from './MCkeditor.vue'
+import MCkeditor from './MCkeditor.vue'
 import MColor from './MColor.vue'
 import MDate from './MDate.vue'
 import MEditor from './MEditor.vue'
@@ -40,7 +40,7 @@ export {
   MAvatarViewer,
   MBtn,
   MCheckbox,
-  // MCkeditor,
+  MCkeditor,
   MColor,
   MDate,
   MEditor,

package/src/components/index.ts

@@ -13,3 +13,4 @@ export * from './modal'
 export * from './parials'
 export * from './typography'
 export * from './transition'
+export * from './util'

package/src/components/util/index.ts

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

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

@@ -0,0 +1,70 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+import MSarSvg from './MSarSvg.vue'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { useMyth } from '../../../composable'
+
+interface Props {
+  text?: any;
+  string?: boolean;
+  append?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: undefined,
+  string: !1,
+  append: !1
+})
+
+const { te, n } = useI18n({ useScope: 'global' })
+const { __, toFixedFormatted } = useMyth()
+const getText = computed<string | undefined>(() => {
+  if (!props.text?.toString().length) {
+    return props.text
+  }
+  const text = props.text?.toString?.() || null
+  if (!text) {
+    return props.text
+  }
+  if (props.string) {
+    return te(`labels.${text}`) ? __(`labels.${text}`) : __(text)
+  }
+  const v = isNaN(text) ? toFixedFormatted(text || '') : toFixedFormatted(n(parseFloat(text || '0') || 0))
+
+  return v !== null && v !== undefined ? (v?.toString?.() || v) : undefined
+})
+
+defineOptions({
+  name: 'MSarCol',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="`m--sar-col ${append ? 'm--sar-col__append' : ''}`"
+    v-bind="$attrs"
+  >
+    <MRow
+      class="items-center"
+      gutter
+    >
+      <slot name="default">
+        <div
+          v-if="text !== undefined && text !== null"
+          class="flex flex-center m--sar-col__text"
+          v-text="getText"
+        />
+      </slot>
+      <MSarSvg />
+    </MRow>
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MSarSvg',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="flex m--sar-svg"
+    v-bind="$attrs"
+  >
+    <slot />
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      height="15px"
+      viewBox="0 0 1124.14 1256.39"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        :fill="$q.dark.isActive ? '#FFF' : '#231f20'"
+        class="cls-1"
+        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
+        :fill="$q.dark.isActive ? '#FFF' : '#231f20'"
+        class="cls-1"
+        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>
+  </div>
+</template>

package/src/components/util/sar/index.ts

@@ -0,0 +1,12 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+import MSarCol from './MSarCol.vue'
+import MSarSvg from './MSarSvg.vue'
+
+export { MSarCol, MSarSvg }

package/src/plugin/defineAsyncComponents.ts

@@ -57,4 +57,8 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MDtAvatar', defineAsyncComponent(() => import('../components/datatable/MDtAvatar.vue')))
   app.component('MDtBtn', defineAsyncComponent(() => import('../components/datatable/MDtBtn.vue')))
   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')))
 }

package/src/style/main.sass

@@ -179,3 +179,10 @@ $m--select__popup-content: 300px !default
 
 .m--select__popup-content
   max-height: $m--select__popup-content
+
+.m--input
+  .m--sar-col
+    &__text
+      font-size: 18px
+      line-height: 16px
+      height: 15px

package/src/types/components.d.ts

@@ -341,7 +341,9 @@ export type BaseInputsSlots = InputHelpSlots & {
   'bottom-input': () => VNode[];
 }
 
-export type MInputProps = Omit<QInputProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint'> & BaseInputsProps
+export interface MInputProps extends Omit<QInputProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint'>, BaseInputsProps {
+  sar?: boolean;
+}
 
 export type MInputSlots = QInputSlots & QFieldSlots & BaseInputsSlots
 
@@ -963,6 +965,24 @@ export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeh
 }
 export type MCkeditorSlots = BaseInputsSlots
 
+export interface MSarColProps {
+  text?: any;
+  string?: boolean;
+  append?: boolean;
+}
+
+export interface MSarColSlots {
+  default: () => VNode[]
+}
+
+export interface MSarSvgProps {
+  [key: string]: any;
+}
+
+export interface MSarSvgSlots {
+  default: () => VNode[]
+}
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
@@ -1019,5 +1039,9 @@ declare module '@vue/runtime-core' {
     MDtAvatar: GlobalComponentConstructor<MDtAvatarProps, MDtAvatarSlots>;
     MDtBtn: GlobalComponentConstructor<MDtBtnProps, MDtBtnSlots>;
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
+
+    // Utils.
+    MSarCol: GlobalComponentConstructor<MSarColProps, MSarColSlots>;
+    MSarSvg: GlobalComponentConstructor<MSarSvgProps, MSarSvgSlots>;
   }
 }

package/src/utils/Helpers.ts

@@ -9,10 +9,32 @@
 import type { AxiosInstance, AxiosRequestConfig } from 'axios'
 import type { ConfigType, DownloadFromResponse, DownloadFromResponseCode, HelpersStubSchema, ParamsType, UrlType } from '../types'
 import lodash from 'lodash'
-import { openURL, scroll } from 'quasar'
-
+import { colors, openURL, scroll, setCssVar } from 'quasar'
 import { nextTick } from 'vue'
 
+const defOpacity = 10
+const darkenColor = (color: string, percent: number = defOpacity) => {
+  const { lighten } = colors
+  return lighten(color, percent * -1)
+}
+const lightenColor = (color: string, percent: number = defOpacity) => {
+  const { lighten } = colors
+  return lighten(color, percent)
+}
+const setCss: typeof setCssVar = (varName, value, element) => {
+  setCssVar(varName, value, element || document.documentElement)
+  if (varName === 'primary') {
+    const lighten = lightenColor(value, 50)
+    const dark = darkenColor(value, 10)
+    setCssVar('scrollbar-track', lighten)
+    setCssVar('scrollbar-hover', dark)
+  }
+}
+const colorIsDark = (color: string): boolean => {
+  const { luminosity } = colors
+  return luminosity(color) < 0.5
+}
+
 export const Helpers = {
   appendArray (formData: FormData, values: File | Blob | Record<string, any> | any, name?: string | null | undefined) {
     let value: never | any
@@ -306,5 +328,48 @@ export const Helpers = {
       return `${l.protocol}//${l.host}/${path}`
     }
     return `//${path}`
-  }
+  },
+  toFixedFormatted (value: any) {
+    if (value) {
+      const text: string = value?.toString() || ''
+      if (!text) {
+        return value
+      }
+      const after: string = (text.split?.('.')[1] || '')?.toString() || ''
+      if (!after) {
+        return value
+      }
+      if (after?.length === 1) {
+        return `${value}0`
+      }
+      return value?.toString()
+    }
+    return value
+  },
+  calculateAspectRatio: (width: number | string, height: number | string): [number, string] => {
+    width = Number(width)
+    height = Number(height)
+    const gcd = (a: number, b: number) => (b === 0 ? a : gcd(b, a % b))
+    const divisor = gcd(width, height)
+    return [width / height, `${width / divisor}:${height / divisor}`]
+  },
+  convertToArabicNumbers: (input: string | number): string => {
+    const numberMap: { [key: string]: string } = {
+      0: '٠',
+      1: '١',
+      2: '٢',
+      3: '٣',
+      4: '٤',
+      5: '٥',
+      6: '٦',
+      7: '٧',
+      8: '٨',
+      9: '٩'
+    }
+    return input.toString().split('').map(char => numberMap[char] || char).join('')
+  },
+  lightenColor,
+  darkenColor,
+  setCss,
+  colorIsDark
 }