@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,100 +1,112 @@
-<script lang="ts" setup>
-import { type Ref, ref, watch, computed } 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: 'ยืนยัน',
-  message: 'ยืนยันทำรายการนี้',
-  buttonTrueText: 'ตกลง',
-  buttonFalseText: 'ยกเลิก',
-  width: 'auto',
-})
-
-const emit = defineEmits<{
-  (e: 'update:result', value: boolean): void
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
-const dialogVisible: Ref<boolean> = ref(false)
-dialogVisible.value = props.modelValue
-watch(
-  () => props.modelValue,
-  () => {
-    dialogVisible.value = props.modelValue
-  },
-)
-
-const txtConfirm = ref<string>()
-
-const isDisabled = computed(() => {
-  if (isUndefined(props.confirmData)) return false
-  if (isEmpty(props.confirmData)) return true
-  return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false
-})
-
-const handleResult = (result: boolean) => {
-  dialogVisible.value = false
-  emit('update:modelValue', dialogVisible.value)
-  emit('update:result', result)
-  txtConfirm.value = ''
-}
-</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>
+<script lang="ts" setup>
+/**
+ * DialogConfirm coordinates modal rendering and interactions for runtime dialog flows.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { type Ref, ref, watch, computed } 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 DialogConfirm.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'ยืนยัน',
+  message: 'ยืนยันทำรายการนี้',
+  buttonTrueText: 'ตกลง',
+  buttonFalseText: 'ยกเลิก',
+  width: 'auto',
+})
+
+/**
+ * Custom events emitted by DialogConfirm.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:result', value: boolean): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(false)
+dialogVisible.value = props.modelValue
+watch(
+  () => props.modelValue,
+  () => {
+    dialogVisible.value = props.modelValue
+  },
+)
+
+const txtConfirm = ref<string>()
+
+const isDisabled = computed(() => {
+  if (isUndefined(props.confirmData)) return false
+  if (isEmpty(props.confirmData)) return true
+  return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false
+})
+
+const handleResult = (result: boolean) => {
+  dialogVisible.value = false
+  emit('update:modelValue', dialogVisible.value)
+  emit('update:result', result)
+  txtConfirm.value = ''
+}
+</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/Host.vue

@@ -1,84 +1,88 @@
-<script setup lang="ts">
-import {shallowReactive, onMounted} from 'vue'
-import {useDialog} from "../../composables/dialog"
-import type {DialogOpenResult} from "../../types/dialogManager";
-
-interface DialogEntry {
-  id: number
-  component: any
-  props: Record<string, any>
-  resolve: (val: any) => void
-  reject: (val: any) => void
-}
-
-const dialogs = shallowReactive<DialogEntry[]>([])
-let idCounter = 0
-
-function open(component: any, inputProps: Record<string, any> = {}) : DialogOpenResult  {
-  const id = ++idCounter
-
-  const promise = new Promise<any>((resolve,reject) => {
-    const dialogProps = {
-      ...inputProps,
-      modelValue: true,
-      'onUpdate:modelValue': (v: boolean) => {
-        if (!v) close(id, null)
-      },
-      onResolve: (val: any) => close(id, val),
-      onReject: (val: any) => closeWithReject(id, val)
-    }
-
-    dialogs.push({
-      id,
-      component,
-      props: dialogProps,
-      resolve,
-      reject
-    })
-  })
-
-  const closeInstance = (val?: any) => {
-    close(id,val)
-  }
-
-  const rejectInstance = (val?: any) => {
-    closeWithReject(id,val)
-  }
-
-  return { id, promise, closeInstance, rejectInstance}
-}
-
-function close(id: number, val: any) {
-  const index = dialogs.findIndex((d) => d.id === id)
-  if (index !== -1) {
-    dialogs[index].resolve(val)
-    dialogs.splice(index, 1)
-  }
-}
-
-function closeWithReject(id: number, val: any) {
-  const index = dialogs.findIndex((d) => d.id === id)
-  if (index !== -1) {
-    dialogs[index].reject(val)
-    dialogs.splice(index, 1)
-  }
-}
-
-onMounted(() => {
-  useDialog()?.setDialogHost(open, close)
-})
-
-defineExpose({ open, close })
-</script>
-<template>
-  <Teleport to="body">
-    <div>
-      <component
-          v-for="dialog in dialogs"
-          :key="dialog.id"
-          :is="dialog.component"
-          v-bind="dialog.props"
-      />
-    </div>
-  </Teleport>
-</template>
+<script setup lang="ts">
+/**
+ * DialogHost coordinates modal rendering and interactions for runtime dialog flows.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {shallowReactive, onMounted} from 'vue'
+import {useDialog} from "../../composables/dialog"
+import type {DialogOpenResult} from "../../types/dialogManager";
+
+interface DialogEntry {
+  id: number
+  component: any
+  props: Record<string, any>
+  resolve: (val: any) => void
+  reject: (val: any) => void
+}
+
+const dialogs = shallowReactive<DialogEntry[]>([])
+let idCounter = 0
+
+function open(component: any, inputProps: Record<string, any> = {}) : DialogOpenResult  {
+  const id = ++idCounter
+
+  const promise = new Promise<any>((resolve,reject) => {
+    const dialogProps = {
+      ...inputProps,
+      modelValue: true,
+      'onUpdate:modelValue': (v: boolean) => {
+        if (!v) close(id, null)
+      },
+      onResolve: (val: any) => close(id, val),
+      onReject: (val: any) => closeWithReject(id, val)
+    }
+
+    dialogs.push({
+      id,
+      component,
+      props: dialogProps,
+      resolve,
+      reject
+    })
+  })
+
+  const closeInstance = (val?: any) => {
+    close(id,val)
+  }
+
+  const rejectInstance = (val?: any) => {
+    closeWithReject(id,val)
+  }
+
+  return { id, promise, closeInstance, rejectInstance}
+}
+
+function close(id: number, val: any) {
+  const index = dialogs.findIndex((d) => d.id === id)
+  if (index !== -1) {
+    dialogs[index].resolve(val)
+    dialogs.splice(index, 1)
+  }
+}
+
+function closeWithReject(id: number, val: any) {
+  const index = dialogs.findIndex((d) => d.id === id)
+  if (index !== -1) {
+    dialogs[index].reject(val)
+    dialogs.splice(index, 1)
+  }
+}
+
+onMounted(() => {
+  useDialog()?.setDialogHost(open, close)
+})
+
+defineExpose({ open, close })
+</script>
+<template>
+  <Teleport to="body">
+    <div>
+      <component
+          v-for="dialog in dialogs"
+          :key="dialog.id"
+          :is="dialog.component"
+          v-bind="dialog.props"
+      />
+    </div>
+  </Teleport>
+</template>

package/dist/runtime/components/dialog/Index.vue

@@ -1,72 +1,84 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-interface DialogProps {
-  modelValue?: boolean
-  title?: string
-  message?: string
-  type?: 'success' | 'error' | 'warning' | 'info'
-  width?: number | string
-}
-
-const props = defineProps<DialogProps>()
-const emit = defineEmits(['update:modelValue'])
-
-const dialogIcon = computed(() => {
-  switch (props.type) {
-    case 'success':
-      return 'mdi mdi-check-circle'
-    case 'error':
-      return 'mdi mdi-alert-circle'
-    case 'warning':
-      return 'mdi mdi-alert'
-    case 'info':
-      return 'mdi mdi-information-variant-circle'
-    default:
-      return ''
-  }
-})
-</script>
-
-<template>
-  <VDialog
-    :model-value="modelValue"
-    :width="width"
-    max-width="800"
-    @update:model-value="emit('update:modelValue', false)"
-  >
-    <VCard>
-      <VToolbar :color="type">
-        <VToolbarTitle>
-          <VIcon :icon="dialogIcon" />
-          {{ title }}
-        </VToolbarTitle>
-        <VBtn
-          icon="mdi mdi-close"
-          size="x-small"
-          @click="emit('update:modelValue', false)"
-        />
-      </VToolbar>
-      <VCardText>
-        <slot>
-          {{ message }}
-        </slot>
-      </VCardText>
-      <VDivider />
-      <VCardActions>
-        <VBtn
-          :color="type"
-          block
-          class="ma-auto"
-          @click="emit('update:modelValue', false)"
-        >
-          ตกลง
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="">
-
-</style>
+<script lang="ts" setup>
+/**
+ * DialogIndex coordinates modal rendering and interactions for runtime dialog flows.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { computed } from 'vue'
+
+interface DialogProps {
+  modelValue?: boolean // Bound value for v-model synchronization with the parent component.
+  title?: string // Title text displayed in the component header or dialog.
+  message?: string // main message body shown in UI
+  type?: 'success' | 'error' | 'warning' | 'info' // visual variant controlling color and intent semantics
+  width?: number | string // dialog/component width in CSS-compatible units
+}
+
+/**
+ * Public props accepted by DialogIndex.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<DialogProps>()
+/**
+ * Custom events emitted by DialogIndex.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const dialogIcon = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return 'mdi mdi-check-circle'
+    case 'error':
+      return 'mdi mdi-alert-circle'
+    case 'warning':
+      return 'mdi mdi-alert'
+    case 'info':
+      return 'mdi mdi-information-variant-circle'
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <VDialog
+    :model-value="modelValue"
+    :width="width"
+    max-width="800"
+    @update:model-value="emit('update:modelValue', false)"
+  >
+    <VCard>
+      <VToolbar :color="type">
+        <VToolbarTitle>
+          <VIcon :icon="dialogIcon" />
+          {{ title }}
+        </VToolbarTitle>
+        <VBtn
+          icon="mdi mdi-close"
+          size="x-small"
+          @click="emit('update:modelValue', false)"
+        />
+      </VToolbar>
+      <VCardText>
+        <slot>
+          {{ message }}
+        </slot>
+      </VCardText>
+      <VDivider />
+      <VCardActions>
+        <VBtn
+          :color="type"
+          block
+          class="ma-auto"
+          @click="emit('update:modelValue', false)"
+        >
+          ตกลง
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="">
+
+</style>

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

@@ -1,39 +1,51 @@
-<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="500"
-  >
-    <v-card :color="props.color">
-      <v-card-text>
-        <v-row>
-          <v-col class="text-center">
-            <slot>กรุณารอสักครู่</slot>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-progress-linear indeterminate />
-    </v-card>
-  </v-dialog>
-</template>
+<script setup lang="ts">
+/**
+ * DialogLoading coordinates modal rendering and interactions for runtime dialog flows.
+ * 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 DialogLoading.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+/**
+ * Public props accepted by DialogLoading.
+ * 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="500"
+  >
+    <v-card :color="props.color">
+      <v-card-text>
+        <v-row>
+          <v-col class="text-center">
+            <slot>กรุณารอสักครู่</slot>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-progress-linear indeterminate />
+    </v-card>
+  </v-dialog>
+</template>