@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

package/dist/runtime/components/master/Select.vue

@@ -1,84 +1,84 @@
-<script setup lang="ts">
-import {VSelect} from 'vuetify/components/VSelect'
-import {concat} from 'lodash-es'
-import {computed, ref, watch} from 'vue'
-import {useGraphQl} from '../../composables/graphql'
-import {useAlert} from '../../composables/alert'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {
-  modelValue?: string
-  groupKey: string
-  fields?: string[]
-}
-const props = withDefaults(defineProps<Props>(), {
-  lang: 'TH',
-})
-
-const emit = defineEmits(['update:modelValue'])
-const items = ref<Array<any>>([])
-const alert = useAlert()
-const selectedItem = ref<any>()
-function query() {
-  const variables: Record<string, any> = { groupKey: { value: props.groupKey, required: true } }
-  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-  if (props.fields) fields = concat(fields, props.fields)
-
-  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
-    items.value = result
-  }).catch((error) => {
-    alert?.addAlert({
-      message: `${error.message}`,
-      alertType: 'error',
-    })
-  })
-}
-
-watch(() => props.groupKey, () => {
-  query()
-}, { immediate: true })
-
-watch(selectedItem, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-
-const itemTitleField = computed(() => {
-  if (props.lang == 'TH') return 'itemValue'
-  else return 'itemValueAlternative'
-})
-
-query()
-</script>
-
-<template>
-  <v-select
-    v-model="selectedItem"
-    :item-title="itemTitleField"
-    :items="items"
-    item-value="itemCode"
-  >
-    <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-        :operation="operation"
-      />
-    </template>
-    <template
-      v-if="!$slots.item"
-      #item="{ props, item }"
-    >
-      <v-list-item
-        v-bind="props"
-        :title="item.raw.itemValue"
-      />
-    </template>
-  </v-select>
-</template>
-
+<script setup lang="ts">
+import {VSelect} from 'vuetify/components/VSelect'
+import {concat} from 'lodash-es'
+import {computed, ref, watch} from 'vue'
+import {useGraphQl} from '../../composables/graphql'
+import {useAlert} from '../../composables/alert'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {
+  modelValue?: string
+  groupKey: string
+  fields?: string[]
+}
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'TH',
+})
+
+const emit = defineEmits(['update:modelValue'])
+const items = ref<Array<any>>([])
+const alert = useAlert()
+const selectedItem = ref<any>()
+function query() {
+  const variables: Record<string, any> = { groupKey: { value: props.groupKey, required: true } }
+  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
+  if (props.fields) fields = concat(fields, props.fields)
+
+  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
+    items.value = result
+  }).catch((error) => {
+    alert?.addAlert({
+      message: `${error.message}`,
+      alertType: 'error',
+    })
+  })
+}
+
+watch(() => props.groupKey, () => {
+  query()
+}, { immediate: true })
+
+watch(selectedItem, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+const itemTitleField = computed(() => {
+  if (props.lang == 'TH') return 'itemValue'
+  else return 'itemValueAlternative'
+})
+
+query()
+</script>
+
+<template>
+  <v-select
+    v-model="selectedItem"
+    :item-title="itemTitleField"
+    :items="items"
+    item-value="itemCode"
+  >
+    <template
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="((slotData || {}) as object)"
+        :operation="operation"
+      />
+    </template>
+    <template
+      v-if="!$slots.item"
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="props"
+        :title="item.raw.itemValue"
+      />
+    </template>
+  </v-select>
+</template>
+
 <style scoped>
 
-</style>
+</style>

package/dist/runtime/components/model/Pad.vue

@@ -1,122 +1,122 @@
-<script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue'
-import { cloneDeep, isEqual } from 'lodash-es'
-import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props {
-  title?: string
-  initialData?: object
-  saveCaption?: string
-  cancelCaption?: string
-}
-
-const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
-  saveCaption: 'บันทึก',
-  cancelCaption: 'ยกเลิก',
-  fields: () => ['*'],
-})
-
-const { item,
-  canCreate, canUpdate,
-  createItem, updateItem,
-  reload, isLoading } = useGraphqlModelItem(props)
-
-const formPadRef = ref()
-const formData = ref<object>({})
-
-const canSave = computed(() => { return (canCreate.value && isCreating.value) || canUpdate.value })
-
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, item.value))
-})
-
-const isCreating = computed(() => {
-  return !item.value
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (item.value) {
-    formData.value = cloneDeep(item.value)
-  }
-  else {
-    formData.value = Object.assign({}, props.initialData)
-  }
-}
-
-watchEffect(loadFormData)
-
-function save() {
-  if (formPadRef.value.isValid) {
-    if (isCreating.value) createItem(formData.value)
-    else updateItem(formData.value)
-  }
-}
-
-function cancel() {
-  formPadRef.value.reset()
-  loadFormData()
-}
-
-defineExpose({ save, cancel, reload, item, isLoading })
-</script>
-
-<template>
-  <VCard>
-    <VToolbar>
-      <VToolbarTitle>
-        <slot name="title">
-          {{ title }}
-          <v-icon
-            size="small"
-            @click="reload"
-          >
-            mdi mdi-refresh
-          </v-icon>
-        </slot>
-      </VToolbarTitle>
-    </VToolbar>
-    <VCardText>
-      <form-pad
-        ref="formPadRef"
-        v-model="formData"
-        isolated
-      >
-        <template #default="slotData">
-          <slot
-            v-bind="slotData"
-            :is-creating="isCreating"
-            :is-data-change="isDataChange"
-          />
-        </template>
-      </form-pad>
-    </VCardText>
-    <VCardActions>
-      <VSpacer />
-      <VBtn
-        color="primary"
-        variant="flat"
-        :loading="isLoading"
-        :disabled="!isDataChange || !canSave"
-        @click="save"
-      >
-        {{ saveCaption }}
-      </VBtn>
-      <VBtn
-        color="error"
-        variant="flat"
-        :disabled="isLoading"
-        @click="cancel"
-      >
-        {{ cancelCaption }}
-      </VBtn>
-    </VCardActions>
-  </VCard>
-</template>
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue'
+import { cloneDeep, isEqual } from 'lodash-es'
+import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props {
+  title?: string
+  initialData?: object
+  saveCaption?: string
+  cancelCaption?: string
+}
+
+const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  fields: () => ['*'],
+})
+
+const { item,
+  canCreate, canUpdate,
+  createItem, updateItem,
+  reload, isLoading } = useGraphqlModelItem(props)
+
+const formPadRef = ref()
+const formData = ref<object>({})
+
+const canSave = computed(() => { return (canCreate.value && isCreating.value) || canUpdate.value })
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, item.value))
+})
+
+const isCreating = computed(() => {
+  return !item.value
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (item.value) {
+    formData.value = cloneDeep(item.value)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+}
+
+watchEffect(loadFormData)
+
+function save() {
+  if (formPadRef.value.isValid) {
+    if (isCreating.value) createItem(formData.value)
+    else updateItem(formData.value)
+  }
+}
+
+function cancel() {
+  formPadRef.value.reset()
+  loadFormData()
+}
+
+defineExpose({ save, cancel, reload, item, isLoading })
+</script>
+
+<template>
+  <VCard>
+    <VToolbar>
+      <VToolbarTitle>
+        <slot name="title">
+          {{ title }}
+          <v-icon
+            size="small"
+            @click="reload"
+          >
+            mdi mdi-refresh
+          </v-icon>
+        </slot>
+      </VToolbarTitle>
+    </VToolbar>
+    <VCardText>
+      <form-pad
+        ref="formPadRef"
+        v-model="formData"
+        isolated
+      >
+        <template #default="slotData">
+          <slot
+            v-bind="slotData"
+            :is-creating="isCreating"
+            :is-data-change="isDataChange"
+          />
+        </template>
+      </form-pad>
+    </VCardText>
+    <VCardActions>
+      <VSpacer />
+      <VBtn
+        color="primary"
+        variant="flat"
+        :loading="isLoading"
+        :disabled="!isDataChange || !canSave"
+        @click="save"
+      >
+        {{ saveCaption }}
+      </VBtn>
+      <VBtn
+        color="error"
+        variant="flat"
+        :disabled="isLoading"
+        @click="cancel"
+      >
+        {{ cancelCaption }}
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>