@mythpe/quasar-ui-qui 0.2.8 → 0.2.10

package/package.json

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

package/src/components/form/MInput.vue

@@ -11,7 +11,7 @@
   setup
 >
 import { useField } from 'vee-validate'
-import { reactive, toValue, useTemplateRef } from 'vue'
+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'
@@ -80,7 +80,7 @@ const props = withDefaults(defineProps<P>(), {
   appendIconProps: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __, props: pluginOptions } = useMyth()
+const { __, props: pluginOptions, formatMoney } = useMyth()
 const helper = useBindInput<Props>(() => props, 'input')
 const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -95,6 +95,22 @@ const listeners = {
 }
 const input = useTemplateRef<InstanceType<typeof QInput> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
+const sarValue = computed<string | null>(() => {
+  if (!props.sar) {
+    return null
+  }
+  let v = formatMoney('')
+
+  if (props.viewModeValue?.toString?.()?.length > 0) {
+    v = props.viewModeValue
+  }
+
+  if (value.value?.toString?.()?.length) {
+    v = value.value
+  }
+  console.log(v)
+  return v || null
+})
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
 defineOptions({
   name: 'MInput',
@@ -181,7 +197,7 @@ defineOptions({
         v-else-if="sar && !viewMode"
         #append
       >
-        <MSarCol />
+        <MSarIcon />
       </template>
       <template
         v-if="viewMode"
@@ -190,7 +206,11 @@ defineOptions({
         <slot name="control">
           <MInputFieldControl>
             <template v-if="sar">
-              <MSarCol :text="!!viewModeValue?.toString?.()?.length ? viewModeValue : ( !!value?.toString?.()?.length ? value : undefined )" />
+              <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>
             <template v-else>
               {{ viewModeValue ?? value }}

package/src/components/form/MPicker.vue

@@ -50,6 +50,8 @@ interface P {
   fieldOptions?: Props['fieldOptions'];
   locale?: Props['locale'];
   noDefaultLocale?: boolean;
+  prependIcon?: Props['prependIcon'];
+  prependIconProps?: Props['prependIconProps'];
 }
 
 type ModelType = Props['modelValue']
@@ -82,7 +84,9 @@ const props = withDefaults(defineProps<P>(), {
   disable: undefined,
   fieldOptions: undefined,
   locale: undefined,
-  noDefaultLocale: !1
+  noDefaultLocale: !1,
+  prependIcon: undefined,
+  prependIconProps: undefined
 })
 
 defineModel<ModelType>({ required: !1, default: undefined })
@@ -243,6 +247,15 @@ defineOptions({
           </template>
         </slot>
       </template>
+      <template
+        v-if="!!prependIcon"
+        #prepend
+      >
+        <q-icon
+          :name="prependIcon"
+          v-bind="prependIconProps"
+        />
+      </template>
       <template #append>
         <q-btn
           v-if="!disable && !readonly && !viewMode"
@@ -328,7 +341,6 @@ defineOptions({
           </q-popup-proxy>
         </q-btn>
       </template>
-
       <template
         v-for="(_,slot) in $slots as Readonly<QFieldSlots>"
         :key="slot"

package/src/components/index.ts

@@ -11,8 +11,8 @@ export * from './form'
 export * from './grid'
 export * from './modal'
 export * from './parials'
+export * from './sar'
 export * from './typography'
 export * from './transition'
-export * from './util'
 
 export default {}

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

@@ -7,10 +7,10 @@
   -->
 
 <script lang="ts" setup>
-import MSarSvg from './MSarSvg.vue'
+// import MSarSvg from './MSarSvg.vue'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import { useMyth } from '../../../composable'
+import { useMyth } from '../../composable'
 
 interface Props {
   text?: any;
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const getSize = computed<number>(() => parseInt(props.size?.toString?.() || '0') || 0)
-const getIconSize = computed<number>(() => parseInt(props.iconSize?.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>(() => {
@@ -70,7 +70,7 @@ defineOptions({
           v-text="getText"
         />
       </slot>
-      <MSarSvg :size="getIconSize" />
+      <!--<MSarSvg :size="getIconSize" />-->
     </MRow>
   </div>
 </template>

package/src/components/sar/MSarIcon.vue

@@ -0,0 +1,39 @@
+<!--
+  - 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>
+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<Props['size']>(() => noDefault.value ? props.size : props.size || '100%')
+defineOptions({
+  name: 'MSarIcon',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-icon v-bind="{...$props,...$attrs,size: getSize}">
+    <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>
+  </q-icon>
+</template>

package/src/components/{util → sar}/index.ts

@@ -6,6 +6,8 @@
  * Github: https://github.com/mythpe
  */
 
-export * from './sar'
-export {}
+import MSarIcon from './MSarIcon.vue'
+
+export { MSarIcon }
+
 export default {}

package/src/index.sass

@@ -15,3 +15,4 @@
 @import './style/m-select'
 @import './style/print'
 @import './style/transition'
+@import './style/typography'

package/src/plugin/defineAsyncComponents.ts

@@ -59,6 +59,7 @@ 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('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')))
 }

package/src/style/typography.sass

@@ -0,0 +1,28 @@
+[dir="rtl"]
+  body
+    text-rendering: optimizeLegibility
+    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum"
+    -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum"
+    -moz-font-feature-settings: "kern=1"
+    font-optical-sizing: auto
+    font-style: normal
+
+body
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+$text-decorations: ("underline": underline, "no-underline": none, "overline": overline, "line-through": line-through, "none": none) !default
+@each $name, $value in $text-decorations
+  .text-#{$name}
+    text-decoration: $value !important
+
+    @if $name == "underline"
+      text-underline-offset: 0.2em
+      text-decoration-thickness: 1px
+
+$text-underline-styles: ("solid": solid, "double": double, "dotted": dotted, "dashed": dashed, "wavy": wavy) !default
+
+@each $style-name, $style-value in $text-underline-styles
+  .text-underline-#{$style-name}
+    text-decoration-line: underline !important
+    text-decoration-style: $style-value !important

package/src/types/components.d.ts

@@ -17,7 +17,8 @@ import type {
   QEditorSlots,
   QFieldSlots,
   QFileProps,
-  QFileSlots, QIconProps,
+  QFileSlots,
+  QIconProps,
   QInputProps,
   QInputSlots,
   QItemProps,
@@ -44,7 +45,6 @@ import type { MTransitionProps, MTransitionsSlots } from './api/MTransition'
 import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
 import type { MSelectProps, MSelectSlots } from './api/MSelect'
 import type { MSignaturePadProps, MSignaturePadSlots } from './api/MSignaturePad'
-import Parials from '../components/parials'
 
 export type MBtnProps = QBtnProps & {
   ariaLabel?: boolean | string | null | undefined;
@@ -437,6 +437,8 @@ export interface MPickerProps extends BaseInputsProps, Omit<QDateProps, 'modelVa
    * Only work for 'date' type.
    */
   noDefaultLocale?: boolean;
+  prependIcon?: string;
+  prependIconProps?: Partial<QIconProps>;
 }
 
 export type MPickerSlots = MInputSlots
@@ -981,9 +983,11 @@ export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeh
 }
 export type MCkeditorSlots = BaseInputsSlots
 
-export type MSarSvgProps = {
-  size?: string | number;
-} & Record<string, any>;
+export type MSarIconProps = Omit<QIconProps, 'name'> & Record<string, any>;
+
+export interface MSarIconSlots {
+  default: () => VNode[]
+}
 
 export type MSarColProps = {
   size?: string | number;
@@ -997,10 +1001,6 @@ export interface MSarColSlots {
   default: () => VNode[]
 }
 
-export interface MSarSvgSlots {
-  default: () => VNode[]
-}
-
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
@@ -1059,7 +1059,7 @@ declare module '@vue/runtime-core' {
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
 
     // Utils.
-    MSarCol: GlobalComponentConstructor<MSarColProps, MSarColSlots>;
-    MSarSvg: GlobalComponentConstructor<MSarSvgProps, MSarSvgSlots>;
+    // MSarCol: GlobalComponentConstructor<MSarColProps, MSarColSlots>;
+    MSarIcon: GlobalComponentConstructor<MSarIconProps, MSarIconSlots>;
   }
 }

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

@@ -1,50 +0,0 @@
-<!--
-  - 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>
-import { computed } from 'vue'
-
-type Props = {
-  size?: string | number;
-}
-const props = withDefaults(defineProps<Props>(), {
-  size: 15
-})
-const getSize = computed<number>(() => parseInt(props.size?.toString?.() || '0') || 0)
-
-defineOptions({
-  name: 'MSarSvg',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    class="flex m--sar-svg"
-    v-bind="$attrs"
-  >
-    <slot />
-    <svg
-      :height="`${getSize}px`"
-      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

@@ -1,14 +0,0 @@
-/*
- * 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 }
-
-export default {}