@mythpe/quasar-ui-qui 0.1.98 → 0.1.99

package/package.json

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

package/src/components/form/MPicker.vue

@@ -52,6 +52,7 @@ interface P {
   noDefaultLocale?: boolean;
 }
 
+type ModelType = Props['modelValue']
 const props = withDefaults(defineProps<P>(), {
   name: () => '',
   auto: undefined,
@@ -84,11 +85,11 @@ const props = withDefaults(defineProps<P>(), {
   noDefaultLocale: !1
 })
 
-defineModel<Props['modelValue']>({ required: !1, default: undefined })
+defineModel<ModelType>({ required: !1, default: undefined })
 const helper = useBindInput<Props>(() => props, 'picker', () => ({ choose: !0 }))
 const { theme, hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
 const { __, props: pluginOptions } = useMyth()
-const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+const inputScope = useField<ModelType>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
   ...toValue<any>(props.fieldOptions)
@@ -105,7 +106,7 @@ const isDate = computed(() => props.type !== 'time')
 //   return isDate.value ? '####/##/##' : '##:##'
 // })
 const format = computed(() => isDate.value ? 'YYYY/MM/DD' : 'HH:mm')
-const dateRef = ref<string | null>(null)
+const dateRef = ref<ModelType>(null)
 
 const { t, te } = useI18n({ useScope: 'global' })
 const daysShort = computed(() => {
@@ -142,19 +143,20 @@ const onBeforeHide = () => {
   dateRef.value = null
 }
 const saveDialog = () => {
-  let newVal: any = dateRef.value ?? null
+  const newVal: ModelType = toValue(dateRef.value || null)
   if (!newVal) {
     return
   }
-  if (typeof newVal === 'object' && isDate.value) {
-    const values: any[] = Object.values(newVal)
-    for (const aKey in values) {
-      if (typeof values[aKey] === 'object') {
-        values[aKey] = Object.values(values[aKey])
-      }
-    }
-    newVal = values
-  }
+  // if (isDate.value) {
+  // const values: string[] = Object.values(newVal)
+  // console.log(values)
+  //   for (const aKey in values) {
+  //     if (typeof values[aKey] === 'object') {
+  //       values[aKey] = Object.values(values[aKey])
+  //     }
+  //   }
+  //   newVal = values
+  // }
   handleChange(newVal, !!errorMessage.value)
 }
 
@@ -170,7 +172,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode,'m--picker':!0}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -231,8 +233,8 @@ defineOptions({
           </template>
           <template v-else>
             <div>
-              <template v-if="value && Array.isArray(value)">
-                {{ value.join(rangeSeparator || pluginOptions.picker?.rangeSeparator || defSeparator) }}
+              <template v-if="value && typeof value === 'object'">
+                {{ Object.values(value).join(rangeSeparator || pluginOptions.picker?.rangeSeparator || defSeparator) }}
               </template>
               <template v-else>
                 {{ value?.toString() }}
@@ -263,6 +265,7 @@ defineOptions({
               <q-date
                 v-if="isDate"
                 ref="dateElm"
+                class="m--date__picker"
                 v-bind="{
                   ...pluginOptions.date as any,
                   ...$attrs,
@@ -295,6 +298,7 @@ defineOptions({
               <q-time
                 v-else
                 ref="timeElm"
+                class="m--time__picker"
                 v-bind="{
                   ...pluginOptions.time,
                   ...$attrs,

package/src/style/main.sass

@@ -185,3 +185,11 @@ $m--select__popup-content: 300px !default
       font-size: 18px
       line-height: 16px
       height: 15px
+
+.m--date__picker,
+.m--time__picker
+  .q-date__calendar-item
+    > div
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden

package/src/types/components.d.ts

@@ -408,7 +408,7 @@ export interface MPickerProps extends BaseInputsProps, Omit<QDateProps, 'modelVa
    * Initial value of the picker.
    * Default is: null.
    */
-  modelValue?: any;
+  modelValue?: string | any[] | any | null | undefined;
   /**
    * Type of picker. 'date' or 'time'.
    * Default is: 'date'.