@mythpe/quasar-ui-qui 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -34,10 +34,11 @@
     "ckeditor5": "^43.3.1",
     "lodash": "^4.17.21",
     "lodash-inflection": "^1.5.0",
+    "qs": "^6.13.1",
     "typed.js": "^2.1.0",
     "vee-validate": "^4.14.7",
     "vue-i18n": "^11.0.0-beta.2",
-    "qs": "^6.13.1"
+    "vue3-signature": "^0.2.4"
   },
   "devDependencies": {
     "@quasar/app-webpack": "^3.15.1",

package/src/components/form/MSignaturePad.vue

@@ -0,0 +1,295 @@
+<!--
+  - 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
+  -->
+
+<script lang="ts" setup>
+
+import { useField } from 'vee-validate'
+import { computed, reactive, ref, toValue, watch } from 'vue'
+import Vue3Signature from 'vue3-signature'
+import type { MSignaturePadProps as Props, SignaturePadWaterMark } from '../../types'
+import { useBindInput, useMyth } from '../../composable'
+
+interface P {
+  name: Props['name'];
+  clearOnResize?: Props['clearOnResize'];
+  large?: Props['large'];
+  disabled?: Props['disabled'];
+  required?: Props['required'];
+  color?: Props['color'];
+  bg?: Props['bg'];
+  height?: Props['height'];
+  width?: Props['width'];
+  label?: Props['label'];
+  center?: Props['center'];
+  labelProps?: Props['labelProps'];
+  // url?: Props['url'];
+  noBtn?: Props['noBtn'];
+  waterMark?: Props['waterMark'];
+  viewMode?: Props['viewMode'];
+
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+
+  clearOnResize: !1,
+  large: !1,
+  disabled: !1,
+  required: !1,
+  color: 'rgb(0, 0, 0)',
+  bg: 'rgb(255,255,255)',
+  height: '300px',
+  width: '100%',
+  label: undefined,
+  center: !1,
+  labelProps: undefined,
+  // url: undefined,
+  noBtn: !1,
+  waterMark: undefined,
+  fieldOptions: undefined,
+
+  viewMode: !1
+})
+
+type Emits = {
+  (e: 'clear'): void;
+  (e: 'undo'): void;
+}
+const emit = defineEmits<Emits>()
+
+const { __, alertError } = useMyth()
+
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const url = defineModel<Props['url']>('url', { required: !1, default: undefined })
+const helper = useBindInput<P & Props>(() => props, 'signaturePad')
+const { getLabel, inputRules, hasTopLabel } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { errorMessage, handleChange, handleBlur } = inputScope
+
+const padRef = ref<InstanceType<typeof Vue3Signature> | null>(null)
+const confirmed = ref(!1)
+const disabledRef = ref(!1)
+const isDisabled = computed(() => props.disabled || disabledRef.value || confirmed.value)
+const reset = () => {
+  confirmed.value = !1
+  url.value = undefined
+  disabledRef.value = !1
+}
+const save = (type: 'image/jpeg' | 'image/svg+xml') => {
+  const isEmpty = !!padRef.value?.isEmpty()
+  if (isEmpty && props.required) {
+    alertError(__('validation.messages.required', { field: __(props.label || __('signature')) }))
+    return
+  }
+  confirmed.value = !0
+  if (url.value) {
+    url.value = undefined
+    padRef.value?.clear()
+  }
+  const v = isEmpty ? null : padRef.value?.save(type)
+  handleBlur(undefined, !0)
+  handleChange(v, !0)
+}
+const clear = () => {
+  padRef.value?.clear()
+  handleBlur(undefined, !0)
+  confirmed.value && handleChange(null, !0)
+  emit('clear')
+  reset()
+}
+const undo = () => {
+  padRef.value?.undo()
+  emit('undo')
+  handleBlur(undefined, !0)
+  confirmed.value && handleChange(null, !1)
+  reset()
+}
+const isEmpty = () => !!padRef.value?.isEmpty()
+const addWaterMark = (opt: SignaturePadWaterMark) => padRef.value?.addWaterMark(opt)
+const fromDataURL = (url: string) => padRef.value?.fromDataURL(url)
+const scopes = reactive(inputScope)
+defineExpose({ reset, save, clear, undo, disabled: isDisabled, isEmpty, addWaterMark, fromDataURL, padRef, ...scopes })
+defineOptions({ name: 'MSignaturePad', inheritAttrs: !1 })
+watch(url, (url) => {
+  if (url) {
+    fromDataURL(url)
+    if (!confirmed.value) {
+      confirmed.value = !0
+    }
+  }
+}, { immediate: !0 })
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__is-top-label':hasTopLabel,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot
+      :confirmed="confirmed"
+      name="top-input"
+      v-bind="scopes"
+    />
+    <MTransition>
+      <div
+        key="top"
+        class="row justify-between items-center q-mb-lg"
+      >
+        <div
+          :class="{
+            'text-center': center,
+            'q-mb-xs text-weight-bold' : !0,
+            'text-body1': !large,
+            'text-h6': large,
+            'text-negative': !!errorMessage,
+            'text-positive': !errorMessage && confirmed
+          }"
+          v-bind="labelProps"
+        >
+          <span v-if="!!label">{{ __(label) }}</span>
+          <span
+            v-if="label && required && !confirmed"
+            class="text-negative print-hide"
+          >&nbsp;*</span>
+          <q-icon
+            v-if="confirmed"
+            color="positive"
+            name="verified"
+            right
+            size="20px"
+          />
+        </div>
+      </div>
+      <div
+        v-if="!!errorMessage"
+        key="signature-errors"
+        class="text-negative text-caption q-mb-lg"
+      >
+        <q-icon
+          name="ion-ios-information-circle-outline"
+          size="18px"
+        />
+        {{ errorMessage }}
+      </div>
+      <div
+        key="signature-pad"
+        :class="{
+          'bg-negative': !!errorMessage,
+          'print-shadow-none bordered' : !0
+        }"
+      >
+        <div>
+          <slot
+            name="pad"
+            v-bind="{...scopes,width,height,reset,save,clear,undo,confirmed}"
+          >
+            <Vue3Signature
+              v-if="!url"
+              ref="padRef"
+              :class="{'q-mx-auto': !0, 'hidden': !!$slots.pad}"
+              :clear-on-resize="clearOnResize"
+              :disabled="isDisabled"
+              :h="height"
+              :sig-option="{
+                penColor: color,
+                backgroundColor: bg
+              }"
+              :w="width"
+              :water-mark="waterMark"
+            />
+            <template v-else-if="!!url">
+              <q-img
+                :height="height"
+                :src="url"
+                :width="width"
+              />
+            </template>
+          </slot>
+          <slot
+            :confirmed="confirmed"
+            v-bind="scopes"
+          />
+        </div>
+      </div>
+      <div
+        v-show="!disabled && !noBtn"
+        key="signature-buttons"
+        class="q-mt-sm print-hide"
+      >
+        <template v-if="!confirmed">
+          <div class="column q-gutter-sm">
+            <MBtn
+              :label="__('labels.confirm_signature')"
+              color="positive"
+              flat
+              icon="ion-ios-hand"
+              @click="save('image/jpeg')"
+            />
+          </div>
+          <MRow class="justify-between">
+            <MBtn
+              :label="__('labels.undo')"
+              flat
+              icon="ion-ios-undo"
+              @click="undo"
+            />
+            <q-space />
+            <MBtn
+              :label="__('labels.clear_signature')"
+              color="negative"
+              flat
+              icon="ion-ios-repeat"
+              @click="clear"
+            />
+          </MRow>
+        </template>
+        <MTransition>
+          <MColumn v-if="confirmed">
+            <MBtn
+              :label="__('labels.clear_signature')"
+              color="negative"
+              flat
+              icon="ion-ios-refresh"
+              @click="clear"
+            />
+          </MColumn>
+        </MTransition>
+      </div>
+    </MTransition>
+    <slot
+      :confirmed="confirmed"
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/index.ts

@@ -30,6 +30,7 @@ import MPassword from './MPassword.vue'
 import MPicker from './MPicker.vue'
 import MRadio from './MRadio.vue'
 import MSelect from './MSelect.vue'
+import MSignaturePad from './MSignaturePad.vue'
 import MTime from './MTime.vue'
 import MToggle from './MToggle.vue'
 import MUploader from './MUploader.vue'
@@ -59,6 +60,7 @@ export {
   MPicker,
   MRadio,
   MSelect,
+  MSignaturePad,
   MTime,
   MToggle,
   MUploader

package/src/plugin/defineAsyncComponents.ts

@@ -26,6 +26,7 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MPicker', defineAsyncComponent(() => import('../components/form/MPicker.vue')))
   app.component('MRadio', defineAsyncComponent(() => import('../components/form/MRadio.vue')))
   app.component('MSelect', defineAsyncComponent(() => import('../components/form/MSelect.vue')))
+  app.component('MSignaturePad', defineAsyncComponent(() => import('../components/form/MSignaturePad.vue')))
   app.component('MTime', defineAsyncComponent(() => import('../components/form/MTime.vue')))
   app.component('MToggle', defineAsyncComponent(() => import('../components/form/MToggle.vue')))
   app.component('MUploader', defineAsyncComponent(() => import('../components/form/MUploader.vue')))

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

@@ -0,0 +1,184 @@
+import type { BaseInputsProps, MColProps } from '../components'
+import type { VNode } from 'vue'
+
+export interface SignaturePadWaterMark {
+  /**
+   * Watermark text. default is: ''
+   * e.g. "Your Name", "Your Company", "Date"
+   */
+  text: string;
+  /**
+   * Mark font. Default is: '20px sans-serif'
+   */
+  font: string;
+  /**
+   * Fill Text and Stroke Text,  'all' | 'stroke' | 'fill'.
+   * Default is: 'fill'.
+   */
+  style: 'all' | 'stroke' | 'fill';
+  /**
+   *  Fill color.
+   *  Default is: '#333'
+   */
+  fillStyle: CSSStyleDeclaration['color'];
+  /**
+   * Stroke Color.
+   * Default is: '#333'.
+   */
+  strokeStyle: CSSStyleDeclaration['color'];
+  /**
+   * Fill positionX.
+   * Default is: 20
+   */
+  x: number;
+  /**
+   * fill positionY.
+   * Default is: 20
+   */
+  y: number;
+  /**
+   * Stroke positionX.
+   * Default is: 40
+   */
+  sx: number;
+  /**
+   * Stroke positionY.
+   * Default is: 40
+   */
+  sy: number;
+}
+
+export interface MSignaturePadProps extends Omit<MColProps, 'name'>, Pick<BaseInputsProps, 'fieldOptions'> {
+  /**
+   * Base64 data of the signature.
+   */
+  modelValue?: string | null | undefined;
+  /**
+   * Name of field.
+   * Default is: signature.
+   */
+  name: string;
+  /**
+   * Signature pen color.
+   * Default is: 'rgb(0, 0, 0)'
+   */
+  color?: CSSStyleDeclaration['color'];
+  /**
+   * Signature pad background color.
+   * Default is: 'rgb(255,255,255)'
+   */
+  bg?: CSSStyleDeclaration['backgroundColor'];
+  /**
+   * Parent container width.
+   * Need units like 100px or 100%
+   * Default is: '100%'
+   */
+  width?: string;
+  /**
+   * Parent container height.
+   * Need units like 100px or 100%
+   * Default is: '200px'
+   */
+  height?: string;
+  /**
+   * Canvas is cleared on window resize.
+   * Default is: false.
+   */
+  clearOnResize?: boolean;
+  /**
+   * Disable Signature pad.
+   * Default is: false.
+   */
+  disabled?: boolean;
+  /**
+   * Add Required validation.
+   * Default is: false.
+   */
+  required?: boolean;
+  /**
+   * Signature pad label.
+   * Default is: undefined.
+   */
+  label?: string | undefined | null;
+  /**
+   * Props of signature pad label.
+   * Default is: undefined.
+   */
+  labelProps?: Record<string, any>;
+  /**
+   * Signature pad center label.
+   * Default is: false.
+   */
+  center?: boolean | undefined;
+  /**
+   * Default value for signature url.
+   * Default is: undefined.
+   */
+  url?: string | undefined;
+  /**
+   * Hide control buttons.
+   * Default is: false.
+   */
+  noBtn?: boolean;
+  /**
+   * Size of signature pad label.
+   * Default is: false.
+   */
+  large?: boolean;
+  /**
+   * Signature pad watermark text.
+   * Default is: undefined.
+   */
+  waterMark?: SignaturePadWaterMark;
+  /**
+   * Set Component in view mode.
+   */
+  viewMode?: boolean;
+}
+
+export interface MSignaturePadMethods {
+  /**
+   * Save image as PNG/JPEG/SVG
+   * @param type
+   */
+  save: (type: 'image/jpeg' | 'image/svg+xml') => string;
+  /**
+   * Clear canvas
+   */
+  clear: () => void;
+  /**
+   * Returns true if canvas is empty.
+   * otherwise returns false
+   */
+  isEmpty: () => boolean;
+  /**
+   * Remove the last step of pen.
+   */
+  undo: () => void;
+  /**
+   * Reset Pad state.
+   */
+  reset: () => void;
+  /**
+   * Add Text Watermark.
+   */
+  addWaterMark: (opt: SignaturePadWaterMark) => void;
+  /**
+   * Draws signature image from data URL.
+   */
+  fromDataURL: (url: string) => void;
+}
+
+export interface MSignaturePadSlots {
+  'top-input': () => VNode[];
+  default: () => VNode[];
+  pad: (scope: {
+    width: MSignaturePadProps['width'];
+    height: MSignaturePadProps['height'];
+    reset: MSignaturePadMethods['reset'];
+    save: MSignaturePadMethods['save'];
+    clear: MSignaturePadMethods['clear'];
+    undo: MSignaturePadMethods['undo']
+  }) => VNode[];
+  'bottom-input': () => VNode[];
+}

package/src/types/components.d.ts

@@ -43,6 +43,7 @@ import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer
 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'
 
 export type MBtnProps = QBtnProps & {
   ariaLabel?: boolean | string | null | undefined;
@@ -989,6 +990,7 @@ declare module '@vue/runtime-core' {
     MPicker: GlobalComponentConstructor<MPickerProps, MPickerSlots>;
     MRadio: GlobalComponentConstructor<MRadioProps, MRadioSlots>;
     MSelect: GlobalComponentConstructor<MSelectProps, MSelectSlots>;
+    MSignaturePad: GlobalComponentConstructor<MSignaturePadProps, MSignaturePadSlots>;
     MTime: GlobalComponentConstructor<MTimeProps, MTimeSlots>;
     MToggle: GlobalComponentConstructor<MToggleProps, MToggleSlots>;
     MUploader: GlobalComponentConstructor<MUploaderProps, MUploaderSlots>;

package/src/types/index.d.ts

@@ -21,4 +21,5 @@ export * from './theme'
 export * from './api/MAvatarViewer'
 export * from './api/MAxios'
 export * from './api/MSelect'
+export * from './api/MSignaturePad'
 export * from './api/MTransition'

package/src/types/plugin-props-option.d.ts

@@ -44,6 +44,7 @@ import type {
 import type { MDatatableProps, MDtBtnProps } from './m-datatable'
 import type { MAvatarViewerProps } from './api/MAvatarViewer'
 import type { MSelectProps } from './api/MSelect'
+import type { MSignaturePadProps } from './api/MSignaturePad'
 
 export interface MythComponentsProps {
   // Grid.
@@ -123,6 +124,10 @@ export interface MythComponentsProps {
    * MSelect component.
    */
   select?: Partial<MSelectProps>;
+  /**
+   * MSignaturePad component.
+   */
+  signaturePad?: Partial<MSignaturePadProps>;
   /**
    * MPicker component.
    */