@mythpe/quasar-ui-qui 0.3.1 → 0.3.2

package/package.json

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

package/src/components/form/MColor.vue

@@ -13,7 +13,7 @@
 import type { MInputProps as Props, MInputSlots } from '../../types'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import { useField } from 'vee-validate'
-import { useBindInput } from '../../composable'
+import { useBindInput, useMyth } from '../../composable'
 import type { QField, QInput } from 'quasar'
 
 type P = {
@@ -48,7 +48,7 @@ const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   ...toValue<any>(props.fieldOptions)
 })
 const { value, errorMessage, handleChange, handleBlur } = inputScope
-
+const { colorStyle } = useMyth()
 const listeners = {
   blur: (v: any) => handleBlur(v, !0),
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
@@ -82,13 +82,13 @@ defineOptions({
   >
     <template #prepend>
       <div
-        :style="`width: 20px; height: 20px; background-color: ${value};`"
+        :style="`width: 20px; height: 20px; ${colorStyle(value,!0)}`"
         class="m-input__color-preview"
       />
     </template>
     <template
-      #append
       v-if="!viewMode && !readonly && !disable"
+      #append
     >
       <q-icon
         class="cursor-pointer"
@@ -99,7 +99,10 @@ defineOptions({
           transition-hide="scale"
           transition-show="scale"
         >
-          <q-color v-model="value" />
+          <q-color
+            v-model="value"
+            :name="name"
+          />
         </q-popup-proxy>
       </q-icon>
     </template>

package/src/composable/useColor.ts

@@ -0,0 +1,6 @@
+export const useColor = () => {
+  const toColors = (color: any) => {
+
+  }
+  return { toColors }
+}

package/src/composable/useMyth.ts

@@ -10,7 +10,7 @@ import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useRoute } from 'vue-router'
 import type { QDialogOptions, QDialogProps, QNotifyCreateOptions } from 'quasar'
-import { copyToClipboard, extend, useQuasar } from 'quasar'
+import { colors, copyToClipboard, extend, useQuasar } from 'quasar'
 import { Helpers, MythKey, type MythType, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 import { computed, inject } from 'vue'
@@ -277,6 +277,20 @@ export const useMyth = () => {
     })
   }
   const isSmall = computed(() => q.screen.lt.md)
+  const colorStyle = (value: any, bg: boolean = false) => {
+    if (!value) {
+      return ''
+    }
+    if (!value.startsWith('#')) {
+      value = colors.getPaletteColor(value)
+    }
+    const attr = bg ? 'background-color: ' : 'color: '
+    if (value === 'transparent') {
+      return `${attr} transparent;`
+    }
+    return `${attr} ${value};`
+  }
+
   return {
     __,
     getPageTitle,
@@ -291,6 +305,7 @@ export const useMyth = () => {
     ...Str,
     veeRules,
     isSmall,
+    colorStyle,
     ...plugin
   }
 }