@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

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

@@ -1,100 +1,100 @@
-<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>
+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>

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

@@ -1,72 +1,72 @@
-<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>
+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>

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

@@ -1,39 +1,39 @@
-<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">
+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>