@mythpe/quasar-ui-qui 0.2.60 → 0.2.61

package/package.json

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

package/src/components/form/MInput.vue

@@ -47,6 +47,7 @@ interface P {
   prependIconProps?: Props['prependIconProps'];
   appendIcon?: Props['appendIcon'];
   appendIconProps?: Props['appendIconProps'];
+  copy?: Props['copy'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -65,7 +66,7 @@ const props = withDefaults(defineProps<P>(), {
   help: undefined,
   required: undefined,
   rules: undefined,
-  viewMode: !1,
+  viewMode: undefined,
   viewModeValue: undefined,
   autocomplete: undefined,
   topLabel: undefined,
@@ -74,14 +75,15 @@ const props = withDefaults(defineProps<P>(), {
   mobile: undefined,
   email: undefined,
   float: undefined,
-  sar: !1,
+  sar: undefined,
   prependIcon: undefined,
   prependIconProps: undefined,
   appendIcon: undefined,
-  appendIconProps: undefined
+  appendIconProps: undefined,
+  copy: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __, props: pluginOptions, formatMoney } = useMyth()
+const { __, props: pluginOptions, formatMoney, copyText } = useMyth()
 const helper = useBindInput<Props>(() => props, 'input')
 const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -115,6 +117,7 @@ const sarValue = computed<string | null>(() => {
     return '0.00'
   }
 })
+const computedViewModeValue = computed<any>(() => props.viewModeValue ?? value.value)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
 defineOptions({
   name: 'MInput',
@@ -208,6 +211,23 @@ defineOptions({
       >
         <MSarIcon />
       </template>
+      <template
+        v-else-if="copy && !!computedViewModeValue"
+        #append
+      >
+        <q-btn
+          flat
+          icon="ion-copy"
+          round
+          size="sm"
+          @click="copyText(computedViewModeValue)"
+        >
+          <q-tooltip v-if="!!computedViewModeValue">
+            {{ __('labels.copy') }}
+          </q-tooltip>
+        </q-btn>
+      </template>
+
       <template
         v-if="viewMode"
         #control
@@ -219,7 +239,7 @@ defineOptions({
               :text="sarValue"
             />
             <template v-else>
-              {{ viewModeValue ?? value }}
+              {{ computedViewModeValue }}
             </template>
           </MInputFieldControl>
         </slot>

package/src/types/api/MInput.d.ts

@@ -154,6 +154,11 @@ export interface MInputProps extends Omit<QInputProps, 'rules' | 'name' | 'model
   prependIconProps?: Partial<QIconProps>;
   appendIcon?: string;
   appendIconProps?: Partial<QIconProps>;
+  /**
+   * Show copy button.
+   * Default: false.
+   */
+  copy?: boolean;
 }
 
 export type MInputSlots = QInputSlots & QFieldSlots & BaseInputsSlots