@ramathibodi/nuxt-commons 0.1.7 → 0.1.9

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.7"
+  "version": "0.1.9"
 }

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { VCombobox } from "vuetify/components/VCombobox";
+import {ref, watch, computed} from "vue";
+import {useAlert} from "../../composables/alert";
+import {concat} from "lodash-es";
+import {useGraphQl} from "../../composables/graphql";
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {
+  modelValue?: string
+  groupKey: string
+  fields?: string[]
+  lang?: 'TH' | 'EN'
+}
+
+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.itemCode)
+})
+
+const itemTitleField = computed(() => {
+  if (props.lang == 'TH') return 'itemValue'
+  else return 'itemValueAlternative'
+})
+
+query()
+</script>
+
+<template>
+  <v-combobox
+      v-model="selectedItem"
+      :items="items"
+      :item-title="itemTitleField"
+      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"></v-list-item>
+    </template>
+  </v-combobox>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import {VRadioGroup} from 'vuetify/components/VRadioGroup'
+import {computed, ref, watch} from 'vue'
+import {useAlert} from "../../composables/alert";
+import {useGraphQl} from "../../composables/graphql";
+import {concat} from "lodash-es";
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VRadioGroup['$props']> {
+  returnObject?: boolean
+  groupKey: string
+  modelValue?: any
+  fields?:string[]
+  lang?: 'TH' | 'EN'
+}
+
+const props = withDefaults(defineProps<Props>(),{
+  lang: 'TH'
+})
+const emit = defineEmits(['update:modelValue'])
+const items: any = ref([])
+const value = ref()
+const alert = useAlert()
+const query =  () => {
+  const variables = { groupKey : {
+      name : 'groupKey',
+      type : 'String!',
+      value : props.groupKey
+    } }
+  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"
+    })
+  })
+};
+query();
+
+watch(() => props.modelValue, (newValue) => {
+  value.value = props.modelValue
+
+}, {deep: true, immediate: true})
+
+const itemTitleField = computed(() => {
+  if (props.lang == 'TH') return 'itemValue'
+  else return 'itemValueAlternative'
+})
+</script>
+<template>
+  <v-radio-group v-model="value" v-bind="$attrs" @update:model-value="emit('update:modelValue', value.value)">
+    <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+    >
+      <slot
+          :name="name"
+          v-bind="(slotData as object)"
+          :operation="operation"
+      />
+    </template>
+    <v-radio v-for="i in items" :key="i.itemCode" v-bind="$attrs" :label="i[itemTitleField]" :value="returnObject ? i : i.itemCode"></v-radio>
+  </v-radio-group>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { VSelect } from "vuetify/components/VSelect";
+import { useGraphQl } from '../../composables/graphql'
+import { concat } from "lodash-es";
+import { useAlert } from "../../composables/alert";
+import {computed, ref, watch} from "vue";
+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"></v-list-item>
+    </template>
+  </v-select>
+</template>
+
+<style scoped>
+
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",