@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

package/dist/runtime/components/dialog/default/Confirm.vue

@@ -1,101 +1,113 @@
-<script lang="ts" setup>
-import { ref, watch, computed, type Ref } from 'vue'
-import { isEqual, isUndefined, isEmpty } from 'lodash-es'
-
-interface DialogProps {
-  title?: string
-  modelValue: boolean
-  message?: string
-  buttonTrueText?: string
-  buttonFalseText?: string
-  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
-  confirmData?: string
-  width?: string
-}
-
-const props = withDefaults(defineProps<DialogProps>(), {
-  title: 'Confirm',
-  message: 'Do you want to proceed?',
-  buttonTrueText: 'Ok',
-  buttonFalseText: 'Cancel',
-  type: 'primary',
-  width: 'auto',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'resolve', value: boolean): void
-  (e: 'reject', value: any): void
-}>()
-
-const dialogVisible: Ref<boolean> = ref(props.modelValue)
-
-watch(() => props.modelValue, (val) => {
-  dialogVisible.value = val
-})
-
-watch(dialogVisible, (val) => {
-  if (!val) emit('update:modelValue', false)
-})
-
-const txtConfirm = ref<string>('')
-
-const isDisabled = computed(() => {
-  if (isUndefined(props.confirmData)) return false
-  if (isEmpty(props.confirmData)) return true
-  return !isEqual(txtConfirm.value, props.confirmData)
-})
-
-const handleResult = (result: boolean) => {
-  dialogVisible.value = false
-  emit('resolve', result) // emit back to dialog-manager
-}
-</script>
-
-<template>
-  <v-row justify="center">
-    <v-dialog
-        v-model="dialogVisible"
-        persistent
-        :width="props.width"
-    >
-      <v-card>
-        <v-toolbar
-            :color="props.type"
-            :title="props.title"
-        />
-        <v-card-text>{{ props.message }}</v-card-text>
-        <v-card-text v-if="props.confirmData">
-          <v-text-field
-              v-model="txtConfirm"
-              variant="underlined"
-          >
-            <template #label>
-              <slot
-                  name="labelTextConfirm"
-                  :text="props.confirmData"
-              />
-            </template>
-          </v-text-field>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-              variant="text"
-              @click="handleResult(false)"
-          >
-            {{ props.buttonFalseText }}
-          </v-btn>
-          <v-btn
-              :color="props.type"
-              variant="text"
-              :disabled="isDisabled"
-              @click="handleResult(true)"
-          >
-            {{ props.buttonTrueText }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-row>
+<script lang="ts" setup>
+/**
+ * DialogDefaultConfirm is a default dialog content component used by the dialog host for common runtime prompts and feedback.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch, computed, type Ref } from 'vue'
+import { isEqual, isUndefined, isEmpty } from 'lodash-es'
+
+interface DialogProps {
+  title?: string // Title text displayed in the component header or dialog.
+  modelValue: boolean // Bound value for v-model synchronization with the parent component.
+  message?: string // main message body shown in UI
+  buttonTrueText?: string // label for the confirm/primary action
+  buttonFalseText?: string // label for the cancel/secondary action
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error' // visual variant controlling color and intent semantics
+  confirmData?: string // confirmation text that users must type before continue
+  width?: string // dialog/component width in CSS-compatible units
+}
+
+/**
+ * Public props accepted by DialogDefaultConfirm.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'Confirm',
+  message: 'Do you want to proceed?',
+  buttonTrueText: 'Ok',
+  buttonFalseText: 'Cancel',
+  type: 'primary',
+  width: 'auto',
+})
+
+/**
+ * Custom events emitted by DialogDefaultConfirm.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'resolve', value: boolean): void
+  (e: 'reject', value: any): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+
+watch(dialogVisible, (val) => {
+  if (!val) emit('update:modelValue', false)
+})
+
+const txtConfirm = ref<string>('')
+
+const isDisabled = computed(() => {
+  if (isUndefined(props.confirmData)) return false
+  if (isEmpty(props.confirmData)) return true
+  return !isEqual(txtConfirm.value, props.confirmData)
+})
+
+const handleResult = (result: boolean) => {
+  dialogVisible.value = false
+  emit('resolve', result) // emit back to dialog-manager
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+        v-model="dialogVisible"
+        persistent
+        :width="props.width"
+    >
+      <v-card>
+        <v-toolbar
+            :color="props.type"
+            :title="props.title"
+        />
+        <v-card-text>{{ props.message }}</v-card-text>
+        <v-card-text v-if="props.confirmData">
+          <v-text-field
+              v-model="txtConfirm"
+              variant="underlined"
+          >
+            <template #label>
+              <slot
+                  name="labelTextConfirm"
+                  :text="props.confirmData"
+              />
+            </template>
+          </v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+              variant="text"
+              @click="handleResult(false)"
+          >
+            {{ props.buttonFalseText }}
+          </v-btn>
+          <v-btn
+              :color="props.type"
+              variant="text"
+              :disabled="isDisabled"
+              @click="handleResult(true)"
+          >
+            {{ props.buttonTrueText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
 </template>

package/dist/runtime/components/dialog/default/Loading.vue

@@ -1,48 +1,60 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-interface DialogProps {
-  modelValue: boolean
-  color?: string
-}
-const emit = defineEmits(['update:modelValue'])
-
-const props = defineProps<DialogProps>()
-const dialogVisible = ref<boolean>(props.modelValue)
-
-watch(() => props.modelValue, (newValue) => {
-  dialogVisible.value = newValue
-})
-
-watch(() => dialogVisible.value, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-</script>
-
-<template>
-  <v-dialog
-      v-model="dialogVisible"
-      persistent
-      max-width="400"
-      class="rounded-xl"
-  >
-    <v-card :color="props.color || 'surface'" elevation="10" class="pa-4 rounded-xl">
-      <v-card-title class="text-h6 text-center">
-        <slot name="title">Please wait</slot>
-      </v-card-title>
-
-      <v-card-text class="text-center">
-        <v-progress-circular
-            indeterminate
-            size="40"
-            width="4"
-            color="primary"
-            class="mb-4"
-        />
-        <div>
-          <slot>Loading data, please wait...</slot>
-        </div>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
+<script setup lang="ts">
+/**
+ * DialogDefaultLoading is a default dialog content component used by the dialog host for common runtime prompts and feedback.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch } from 'vue'
+
+interface DialogProps {
+  modelValue: boolean // Bound value for v-model synchronization with the parent component.
+  color?: string // Vuetify color name applied to the visual element.
+}
+/**
+ * Custom events emitted by DialogDefaultLoading.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+/**
+ * Public props accepted by DialogDefaultLoading.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<DialogProps>()
+const dialogVisible = ref<boolean>(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+watch(() => dialogVisible.value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialogVisible"
+      persistent
+      max-width="400"
+      class="rounded-xl"
+  >
+    <v-card :color="props.color || 'surface'" elevation="10" class="pa-4 rounded-xl">
+      <v-card-title class="text-h6 text-center">
+        <slot name="title">Please wait</slot>
+      </v-card-title>
+
+      <v-card-text class="text-center">
+        <v-progress-circular
+            indeterminate
+            size="40"
+            width="4"
+            color="primary"
+            class="mb-4"
+        />
+        <div>
+          <slot>Loading data, please wait...</slot>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>

package/dist/runtime/components/dialog/default/Notify.vue

@@ -1,70 +1,82 @@
-<script lang="ts" setup>
-import { ref, watch, type Ref } from 'vue'
-
-interface DialogProps {
-  title?: string
-  modelValue: boolean
-  message?: string
-  buttonText?: string
-  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
-  width?: string
-}
-
-const props = withDefaults(defineProps<DialogProps>(), {
-  title: 'Notice',
-  message: 'Something happened.',
-  buttonText: 'OK',
-  type: 'primary',
-  width: 'auto',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'resolve', value: boolean): void
-}>()
-
-const dialogVisible: Ref<boolean> = ref(props.modelValue)
-
-watch(() => props.modelValue, (val) => {
-  dialogVisible.value = val
-})
-
-watch(dialogVisible, (val) => {
-  if (!val) emit('update:modelValue', false)
-})
-
-const handleClose = () => {
-  dialogVisible.value = false
-  emit('resolve', true)
-}
-</script>
-
-<template>
-  <v-row justify="center">
-    <v-dialog
-        v-model="dialogVisible"
-        persistent
-        :width="props.width"
-    >
-      <v-card>
-        <v-toolbar
-            :color="props.type"
-            :title="props.title"
-            density="compact"
-        />
-        <v-card-text class="text-body-2 text-center py-4">
-          {{ props.message }}
-        </v-card-text>
-        <v-card-actions class="justify-center">
-          <v-btn
-              :color="props.type"
-              variant="elevated"
-              @click="handleClose"
-          >
-            {{ props.buttonText }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
+<script lang="ts" setup>
+/**
+ * DialogDefaultNotify is a default dialog content component used by the dialog host for common runtime prompts and feedback.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch, type Ref } from 'vue'
+
+interface DialogProps {
+  title?: string // Title text displayed in the component header or dialog.
+  modelValue: boolean // Bound value for v-model synchronization with the parent component.
+  message?: string // main message body shown in UI
+  buttonText?: string // Label text displayed on the primary action button.
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error' // visual variant controlling color and intent semantics
+  width?: string // dialog/component width in CSS-compatible units
+}
+
+/**
+ * Public props accepted by DialogDefaultNotify.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'Notice',
+  message: 'Something happened.',
+  buttonText: 'OK',
+  type: 'primary',
+  width: 'auto',
+})
+
+/**
+ * Custom events emitted by DialogDefaultNotify.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'resolve', value: boolean): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+
+watch(dialogVisible, (val) => {
+  if (!val) emit('update:modelValue', false)
+})
+
+const handleClose = () => {
+  dialogVisible.value = false
+  emit('resolve', true)
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+        v-model="dialogVisible"
+        persistent
+        :width="props.width"
+    >
+      <v-card>
+        <v-toolbar
+            :color="props.type"
+            :title="props.title"
+            density="compact"
+        />
+        <v-card-text class="text-body-2 text-center py-4">
+          {{ props.message }}
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <v-btn
+              :color="props.type"
+              variant="elevated"
+              @click="handleClose"
+          >
+            {{ props.buttonText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>

package/dist/runtime/components/dialog/default/Printing.vue

@@ -1,35 +1,47 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-interface DialogProps {
-  modelValue: boolean
-  color?: string
-}
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps<DialogProps>()
-const dialogVisible = ref(props.modelValue)
-
-watch(() => props.modelValue, (newValue) => {
-  dialogVisible.value = newValue
-})
-
-watch(() => dialogVisible.value, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-</script>
-
-<template>
-  <v-dialog
-      v-model="dialogVisible"
-      persistent
-      max-width="320"
-      class="rounded-lg"
-  >
-    <v-card :color="props.color || 'surface'" class="pa-3 rounded-lg d-flex flex-column align-center">
-      <v-icon size="36" color="primary" class="mb-2">mdi mdi-printer</v-icon>
-      <div class="text-center text-body-2">
-        <slot>Preparing to print...</slot>
-      </div>
-    </v-card>
-  </v-dialog>
+<script setup lang="ts">
+/**
+ * DialogDefaultPrinting is a default dialog content component used by the dialog host for common runtime prompts and feedback.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch } from 'vue'
+
+interface DialogProps {
+  modelValue: boolean // Bound value for v-model synchronization with the parent component.
+  color?: string // Vuetify color name applied to the visual element.
+}
+/**
+ * Custom events emitted by DialogDefaultPrinting.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+/**
+ * Public props accepted by DialogDefaultPrinting.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<DialogProps>()
+const dialogVisible = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+watch(() => dialogVisible.value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialogVisible"
+      persistent
+      max-width="320"
+      class="rounded-lg"
+  >
+    <v-card :color="props.color || 'surface'" class="pa-3 rounded-lg d-flex flex-column align-center">
+      <v-icon size="36" color="primary" class="mb-2">mdi mdi-printer</v-icon>
+      <div class="text-center text-body-2">
+        <slot>Preparing to print...</slot>
+      </div>
+    </v-card>
+  </v-dialog>
 </template>