@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

package/dist/runtime/components/form/SignPad.vue

@@ -1,218 +1,226 @@
-<script lang="ts" setup>
-import { VueSignaturePad } from 'vue-signature-pad'
-import { VInput } from 'vuetify/components/VInput'
-import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
-import { useAssetFile, type Base64Asset, type Base64File } from '../../composables/assetFile'
-
-interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
-  title?: string
-  btnName?: string
-  titleConfirm?: string
-  penColor?: string
-  /** hydrate when id is present but base64String is missing */
-  autoHydrate?: boolean
-}
-
-const props = withDefaults(defineProps<SignatureProps>(), {
-  title: 'Signature',
-  btnName: 'Draw Your Signature',
-  titleConfirm: 'I Accept My Signature',
-  penColor: '#303F9F',
-  autoHydrate: true,
-})
-
-const { hydrateAssetFile } = useAssetFile()
-
-const model = defineModel<Base64Asset | string | null>({ default: null })
-
-// refs
-const inputRef = ref<InstanceType<typeof VInput> | null>(null)
-const signaturePadRef = ref<InstanceType<typeof VueSignaturePad> | null>(null)
-
-const isDialogOpen = ref(false)
-
-// signature pad options from props
-const signatureOptions = computed(() => ({
-  penColor: props.penColor,
-  minWidth: 0.5,
-  maxWidth: 4,
-}))
-
-// internal normalized value
-const normalized = ref<Base64Asset | null>(null)
-const imageDataUrl = computed(() => {
-  const val = normalized.value
-  if (!val?.base64String) return null
-
-  return useAssetFile().ensureDataUrl(val.base64String.trim(),(val as Base64File).fileType || "image/png")
-})
-
-
-// guards
-let syncing = false      // block re-entrancy while normalizing/hydrating
-
-function wrapToAsset(input: Base64Asset | string | null): Base64Asset | null {
-  if (input == null) return null
-  return typeof input === 'string' ? { base64String: input } : input
-}
-
-/** Normalize & (optionally) hydrate whenever external model changes */
-watch(
-    model,
-    async (val) => {
-      if (syncing) return
-      syncing = true
-      try {
-        const asAsset = wrapToAsset(val)
-        normalized.value = asAsset
-
-        // If parent provided a string, convert and write back once
-        if (typeof val === 'string') {
-          model.value = asAsset
-        }
-
-        // Hydrate if requested and needed (id present, no base64String)
-        if (props.autoHydrate && asAsset?.id != null && !asAsset.base64String) {
-          await hydrateAssetFile(asAsset) // mutates asAsset in-place
-          // reflect hydrated base64String back to parent (guarded)
-          model.value = asAsset
-        }
-      } finally {
-        syncing = false
-      }
-    },
-    { immediate: true }
-)
-
-// signature actions
-const undoSignature = () => signaturePadRef.value?.undoSignature()
-const clearSignature = () => signaturePadRef.value?.clearSignature()
-
-const closeDialog = () => {
-  isDialogOpen.value = false
-  signaturePadRef.value?.clearSignature()
-  signaturePadRef.value?.clearCacheImages?.()
-}
-
-const saveSignature = () => {
-  isDialogOpen.value = false
-  const result = signaturePadRef.value?.saveSignature()
-  if (!result) return
-  const { isEmpty, data } = result
-  if (isEmpty) {
-    normalized.value = null
-    model.value = null
-  } else {
-    const asset: Base64Asset = { base64String: data }
-    normalized.value = asset
-    model.value = asset
-  }
-}
-
-const openSignatureDialog = async () => {
-  // ensure hydration before opening to preview correctly
-  if (props.autoHydrate && normalized.value?.id != null && !normalized.value.base64String) {
-    await hydrateAssetFile(normalized.value)
-    model.value = normalized.value
-  }
-
-  isDialogOpen.value = true
-
-  const existing = normalized.value?.base64String
-  if (existing) {
-    // seed after dialog mount
-    requestAnimationFrame(() => signaturePadRef.value?.fromDataURL(existing))
-  }
-}
-
-// validation passthrough
-const isValid = computed(() => inputRef.value?.isValid)
-const errorMessages = computed(() => inputRef.value?.errorMessages)
-
-defineExpose({
-  errorMessages,
-  isValid,
-  reset: () => inputRef.value?.reset(),
-  resetValidation: () => inputRef.value?.resetValidation(),
-  validate: () => inputRef.value?.validate(),
-})
-</script>
-
-<template>
-  <v-input v-model="model" v-bind="$attrs" ref="inputRef">
-    <template #default="{ isReadonly, isDisabled }">
-      <v-card class="w-100" flat :variant="$attrs.variant" :title="props.title">
-        <v-card-text v-if="normalized?.base64String">
-          <v-img :src="imageDataUrl" cover />
-          <v-icon
-              class="position-absolute"
-              style="top: 8px; right: 8px; z-index: 10;"
-              @click="model = null; normalized = null"
-              v-if="!isReadonly?.value"
-          >
-            mdi mdi-close-circle
-          </v-icon>
-        </v-card-text>
-
-        <v-card-actions v-if="!isReadonly?.value">
-          <v-btn
-              append-icon="mdi mdi-draw-pen"
-              block
-              class="text-none"
-              color="primary"
-              variant="flat"
-              @click="openSignatureDialog"
-              :readonly="isReadonly?.value"
-              :disabled="isDisabled?.value"
-          >
-            {{ props.btnName }}
-          </v-btn>
-        </v-card-actions>
-
-        <v-dialog v-model="isDialogOpen" height="auto" persistent width="100%">
-          <v-card>
-            <v-toolbar>
-              <v-toolbar-title class="text-no-wrap">
-                {{ props.title }}
-              </v-toolbar-title>
-
-              <v-btn icon @click="undoSignature">
-                <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
-              </v-btn>
-
-              <v-btn icon @click="clearSignature">
-                <v-icon>fa-solid fa-trash</v-icon>
-              </v-btn>
-
-              <v-btn icon @click="closeDialog">
-                <v-icon>fa-solid fa-xmark</v-icon>
-              </v-btn>
-            </v-toolbar>
-
-            <v-card-text>
-              <VueSignaturePad
-                  ref="signaturePadRef"
-                  :options="signatureOptions"
-                  height="40vh"
-              />
-            </v-card-text>
-
-            <v-divider />
-
-            <v-card-actions class="justify-center">
-              <v-btn
-                  class="text-none"
-                  color="success"
-                  prepend-icon="fa-solid fa-check"
-                  variant="flat"
-                  @click="saveSignature"
-              >
-                {{ props.titleConfirm }}
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </v-card>
-    </template>
-  </v-input>
-</template>
+<script lang="ts" setup>
+/**
+ * FormSignPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { VueSignaturePad } from 'vue-signature-pad'
+import { VInput } from 'vuetify/components/VInput'
+import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
+import { useAssetFile, type Base64Asset, type Base64File } from '../../composables/assetFile'
+
+interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
+  title?: string // Title text displayed in the component header or dialog.
+  btnName?: string // Button label used to open the signature pad dialog.
+  titleConfirm?: string // Confirmation text shown before accepting the signature.
+  penColor?: string // Pen stroke color used while drawing the signature.
+  /** hydrate when id is present but base64String is missing */
+  autoHydrate?: boolean // Converts incoming serialized values into component runtime format on mount/watch.
+}
+
+/**
+ * Public props accepted by FormSignPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<SignatureProps>(), {
+  title: 'Signature',
+  btnName: 'Draw Your Signature',
+  titleConfirm: 'I Accept My Signature',
+  penColor: '#303F9F',
+  autoHydrate: true,
+})
+
+const { hydrateAssetFile } = useAssetFile()
+
+const model = defineModel<Base64Asset | string | null>({ default: null })
+
+// refs
+const inputRef = ref<InstanceType<typeof VInput> | null>(null)
+const signaturePadRef = ref<InstanceType<typeof VueSignaturePad> | null>(null)
+
+const isDialogOpen = ref(false)
+
+// signature pad options from props
+const signatureOptions = computed(() => ({
+  penColor: props.penColor,
+  minWidth: 0.5,
+  maxWidth: 4,
+}))
+
+// internal normalized value
+const normalized = ref<Base64Asset | null>(null)
+const imageDataUrl = computed(() => {
+  const val = normalized.value
+  if (!val?.base64String) return null
+
+  return useAssetFile().ensureDataUrl(val.base64String.trim(),(val as Base64File).fileType || "image/png")
+})
+
+
+// guards
+let syncing = false      // block re-entrancy while normalizing/hydrating
+
+function wrapToAsset(input: Base64Asset | string | null): Base64Asset | null {
+  if (input == null) return null
+  return typeof input === 'string' ? { base64String: input } : input
+}
+
+/** Normalize & (optionally) hydrate whenever external model changes */
+watch(
+    model,
+    async (val) => {
+      if (syncing) return
+      syncing = true
+      try {
+        const asAsset = wrapToAsset(val)
+        normalized.value = asAsset
+
+        // If parent provided a string, convert and write back once
+        if (typeof val === 'string') {
+          model.value = asAsset
+        }
+
+        // Hydrate if requested and needed (id present, no base64String)
+        if (props.autoHydrate && asAsset?.id != null && !asAsset.base64String) {
+          await hydrateAssetFile(asAsset) // mutates asAsset in-place
+          // reflect hydrated base64String back to parent (guarded)
+          model.value = asAsset
+        }
+      } finally {
+        syncing = false
+      }
+    },
+    { immediate: true }
+)
+
+// signature actions
+const undoSignature = () => signaturePadRef.value?.undoSignature()
+const clearSignature = () => signaturePadRef.value?.clearSignature()
+
+const closeDialog = () => {
+  isDialogOpen.value = false
+  signaturePadRef.value?.clearSignature()
+  signaturePadRef.value?.clearCacheImages?.()
+}
+
+const saveSignature = () => {
+  isDialogOpen.value = false
+  const result = signaturePadRef.value?.saveSignature()
+  if (!result) return
+  const { isEmpty, data } = result
+  if (isEmpty) {
+    normalized.value = null
+    model.value = null
+  } else {
+    const asset: Base64Asset = { base64String: data }
+    normalized.value = asset
+    model.value = asset
+  }
+}
+
+const openSignatureDialog = async () => {
+  // ensure hydration before opening to preview correctly
+  if (props.autoHydrate && normalized.value?.id != null && !normalized.value.base64String) {
+    await hydrateAssetFile(normalized.value)
+    model.value = normalized.value
+  }
+
+  isDialogOpen.value = true
+
+  const existing = normalized.value?.base64String
+  if (existing) {
+    // seed after dialog mount
+    requestAnimationFrame(() => signaturePadRef.value?.fromDataURL(existing))
+  }
+}
+
+// validation passthrough
+const isValid = computed(() => inputRef.value?.isValid)
+const errorMessages = computed(() => inputRef.value?.errorMessages)
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset: () => inputRef.value?.reset(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
+})
+</script>
+
+<template>
+  <v-input v-model="model" v-bind="$attrs" ref="inputRef">
+    <template #default="{ isReadonly, isDisabled }">
+      <v-card class="w-100" flat :variant="$attrs.variant" :title="props.title">
+        <v-card-text v-if="normalized?.base64String">
+          <v-img :src="imageDataUrl" cover />
+          <v-icon
+              class="position-absolute"
+              style="top: 8px; right: 8px; z-index: 10;"
+              @click="model = null; normalized = null"
+              v-if="!isReadonly?.value"
+          >
+            mdi mdi-close-circle
+          </v-icon>
+        </v-card-text>
+
+        <v-card-actions v-if="!isReadonly?.value">
+          <v-btn
+              append-icon="mdi mdi-draw-pen"
+              block
+              class="text-none"
+              color="primary"
+              variant="flat"
+              @click="openSignatureDialog"
+              :readonly="isReadonly?.value"
+              :disabled="isDisabled?.value"
+          >
+            {{ props.btnName }}
+          </v-btn>
+        </v-card-actions>
+
+        <v-dialog v-model="isDialogOpen" height="auto" persistent width="100%">
+          <v-card>
+            <v-toolbar>
+              <v-toolbar-title class="text-no-wrap">
+                {{ props.title }}
+              </v-toolbar-title>
+
+              <v-btn icon @click="undoSignature">
+                <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
+              </v-btn>
+
+              <v-btn icon @click="clearSignature">
+                <v-icon>fa-solid fa-trash</v-icon>
+              </v-btn>
+
+              <v-btn icon @click="closeDialog">
+                <v-icon>fa-solid fa-xmark</v-icon>
+              </v-btn>
+            </v-toolbar>
+
+            <v-card-text>
+              <VueSignaturePad
+                  ref="signaturePadRef"
+                  :options="signatureOptions"
+                  height="40vh"
+              />
+            </v-card-text>
+
+            <v-divider />
+
+            <v-card-actions class="justify-center">
+              <v-btn
+                  class="text-none"
+                  color="success"
+                  prepend-icon="fa-solid fa-check"
+                  variant="flat"
+                  @click="saveSignature"
+              >
+                {{ props.titleConfirm }}
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-card>
+    </template>
+  </v-input>
+</template>

package/dist/runtime/components/form/System.vue

@@ -1,27 +1,35 @@
-<script lang="ts" setup>
-import Pad from './Pad.vue'
-import { watch } from 'vue'
-import { useGraphQlOperation } from '../../composables/graphqlOperation'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof Pad['$props']> {
-  templateId: string;
-  cache?: boolean | number
-}
-
-const props = withDefaults(defineProps<Props>(),{
-  cache: false
-})
-
-const currentTemplate = ref<any>({})
-
-watch(()=>props.templateId, (newValue) => {
-  useGraphQlOperation("Query","systemTemplateById",["template","templateScript"],{id: newValue},props.cache).then(result => {
-    currentTemplate.value = result
-  }).catch(_error => {
-    currentTemplate.value = {}
-  })
-})
-</script>
-<template>
-  <FormPad v-bind="$attrs" :template="currentTemplate.template" :template-script="currentTemplate.templateScript" />
+<script lang="ts" setup>
+/**
+ * FormSystem is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import Pad from './Pad.vue'
+import { watch } from 'vue'
+import { useGraphQlOperation } from '../../composables/graphqlOperation'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof Pad['$props']> {
+  templateId: string; // identifier value used to resolve business data
+  cache?: boolean | number // Enables cached requests; number values represent cache TTL in milliseconds.
+}
+
+/**
+ * Public props accepted by FormSystem.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(),{
+  cache: false
+})
+
+const currentTemplate = ref<any>({})
+
+watch(()=>props.templateId, (newValue) => {
+  useGraphQlOperation("Query","systemTemplateById",["template","templateScript"],{id: newValue},props.cache).then(result => {
+    currentTemplate.value = result
+  }).catch(_error => {
+    currentTemplate.value = {}
+  })
+})
+</script>
+<template>
+  <FormPad v-bind="$attrs" :template="currentTemplate.template" :template-script="currentTemplate.templateScript" />
 </template>