converted to script-setup for keyValuePairItems comp

Signed-off-by: SayedTahsin <[email protected]>

src/components/SimpleInput.vue

@@ -229,24 +229,21 @@ onMounted(() => {
  isMedium.value = true;
  }
  if (modelData.value) labelShow.value = true;
- const inputField = ref(null)
+ const inputField = ref(null);
  inputField?.value?.addEventListener('keydown', this.handleKeyDownEvent);
 });
 
 onUnmounted(() => {
- const inputField = ref(null)
- inputField?.value?.removeEventListener(
- 'keydown',
- this.handleKeyDownEvent
- );
+ const inputField = ref(null);
+ inputField?.value?.removeEventListener('keydown', this.handleKeyDownEvent);
 });
 
 watch(
  modelData,
  (newVal, oldVal) => {
  if (isMultilineValue.value) {
  setTimeout(() => {
- const textareaField = ref(null)
+ const textareaField = ref(null);
  textareaField.value.focus();
  }, 0);
  }
@@ -274,10 +271,13 @@ watch(
  { immediate: true, deep: true }
 );
 
-watch(()=>props.modelValue, (newVal, oldVal) => {
- // do this only once, when the value object is initialized after api call or some delay
- if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) initModelData();
-});
+watch(
+ () => props.modelValue,
+ (newVal, oldVal) => {
+ // do this only once, when the value object is initialized after api call or some delay
+ if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) initModelData();
+ }
+);
 // to float up label when input is focused
 const triggerInput = () => {
  labelShow.value = true;
@@ -289,18 +289,15 @@ const unTriggerInput = () => {
 // to float up label and input field is focused when label is clicked in placeholder mode
 const focusInput = () => {
  labelShow.value = true;
- 
+
  const inputField = ref(null);
  inputField?.value?.focus();
 };
 
 const onPaste = (evt) => {
  let pasteData = (evt.clipboardData || window.clipboardData).getData('text');
 
- const finalData = updatedModelDataAfterPasteAndKeyDown(
- evt.target,
- pasteData
- );
+ const finalData = updatedModelDataAfterPasteAndKeyDown(evt.target, pasteData);
 
  if (pasteData.includes('\n')) {
  isMultilineValue.value = true;
@@ -323,7 +320,10 @@ const updatedModelDataAfterPasteAndKeyDown = (el, addedData) => {
  const { selectionStart, selectionEnd } = el;
 
  const prefix = modelData.value.substring(0, selectionStart);
- const suffix = modelData.value.substring(selectionEnd, modelData.value.length);
+ const suffix = modelData.value.substring(
+ selectionEnd,
+ modelData.value.length
+ );
 
  addedData = addedData ? addedData : '\n';
 

src/components/sub-components/KeyValuePairItems.vue

@@ -131,42 +131,180 @@
  </div>
 </template>
 
-<script>
-import validation from '../../mixins/validation.js';
-import { model } from '../../mixins/model.js';
-import { defineComponent } from 'vue';
+<script setup>
+import { defineAsyncComponent, onMounted, ref, watch } from 'vue';
+const VField = defineAsyncComponent(() =>
+ import('vee-validate').then(({ Field }) => Field)
+);
+const ObjectFormWrapper = defineAsyncComponent(() =>
+ import('@/components/ObjectFormWrapper.vue').then((module) => module.default)
+);
+const ArrayInput = defineAsyncComponent(() =>
+ import('@/components/ArrayInput.vue').then((module) => module.default)
+);
+const KeyValuePairs = defineAsyncComponent(() =>
+ import('@/components/KeyValuePairs.vue').then((module) => module.default)
+);
+const SimpleInput = defineAsyncComponent(() =>
+ import('@/components/SimpleInput.vue').then((module) => module.default)
+);
+const props = defineProps({
+ type: {
+ type: String,
+ default: 'string',
+ },
+ referenceModel: {
+ type: null,
+ default: () => ({}),
+ },
+ modelValue: {
+ type: Object,
+ default: () => ({}),
+ },
+ isSelfRequired: {
+ type: Boolean,
+ default: false,
+ },
+ fieldName: {
+ type: String,
+ default: '',
+ },
+ errors: {
+ type: Object,
+ default: () => ({}),
+ },
+ index: { type: Number, default: 0 },
+ schema: {
+ type: Object,
+ default: () => ({}),
+ },
+ additionalProperties: {
+ type: Object,
+ default: () => ({}),
+ },
+});
+const emit = defineEmits(['delete-key-value', 'update:modelValue']);
+
+const modelData = ref({key:'',val:''});
 
-export default defineComponent({
- name: 'KeyValuePairItems',
- mixins: [model, validation],
- props: {
- modelValue: {
- type: Object,
- default: () => ({}),
- },
- fieldName: {
- type: String,
- default: '',
- },
- errors: {
- type: Object,
- default: () => ({}),
- },
- index: { type: Number, default: 0 },
- schema: {
- type: Object,
- default: () => ({}),
- },
- additionalProperties: {
- type: Object,
- default: () => ({}),
- },
+watch(
+ modelData,
+ (newVal, oldVal) => {
+ if (oldVal !== null && oldVal !== undefined) {
+ // clean the newVal if it's array or object if the cleanObject global data is true
+ // if (cleanObject) clean(newVal);
+
+ // prevent number from converting to string
+ if (props.type === 'number' || props.type === 'integer') {
+ // if the newVal string is empty, emit null
+ if (newVal === '') emit('update:modelValue', null);
+ else emit('update:modelValue', +newVal);
+ } else emit('update:modelValue', newVal);
+ }
  },
- emits: ['delete-key-value'],
- methods: {
- deleteProp(index) {
- this.$emit('delete-key-value', index);
- },
+ {
+ immediate: true,
+ deep: true,
+ }
+);
+watch(
+ () => props.modelValue,
+ (newVal, oldVal) => {
+ // do this only once, when the value object is initialized after api call or some delay
+ if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) initModelData();
  },
+ {
+ deep: true,
+ }
+);
+onMounted(() => {
+ initModelData();
 });
+
+const initModelData = () => {
+ if (props.modelValue) {
+ if (
+ (props.type === 'object' || props.type === 'key-value-pairs') &&
+ Object.keys(props.modelValue).length > 0
+ )
+ modelData.value = JSON.parse(JSON.stringify(props.modelValue));
+ else if (props.type === 'array' && props.modelValue.length > 0)
+ modelData.value = JSON.parse(JSON.stringify(props.modelValue));
+ else if (props.type === 'boolean' && props.modelValue !== null)
+ modelData.value = props.modelValue;
+ else if (
+ props.type === 'string' ||
+ props.type === 'number' ||
+ props.type === 'integer'
+ )
+ modelData.value = props.modelValue;
+ else modelData.value = initWithBlank();
+ } else modelData.value = initWithBlank();
+};
+const initWithBlank = () => {
+ if (props.type === 'object' || props.type === 'key-value-pairs') return {};
+ else if (props.type === 'array') return [];
+ else if (props.type === 'boolean') return false;
+ else if (props.type === 'number' || props.type === 'integer') return null;
+ else return '';
+};
+const clean = (ob) => {
+ if (props.type === 'object' || props.type === 'key-value-pairs') {
+ Object.keys(ob).forEach((key) => {
+ let stringify = '';
+ if (typeof ob[key] !== 'string') stringify = JSON.stringify(ob[key]);
+ else stringify = ob[key];
+ if (
+ stringify === undefined ||
+ stringify === 'null' ||
+ stringify === '' ||
+ stringify === '{}' ||
+ stringify === '[]'
+ ) {
+ delete ob[key];
+ }
+ });
+ } else if (props.type === 'array') {
+ let arrayOfDeleteIndexes = ob
+ .map((item, idx) => ({ item, idx }))
+ .filter((el) => {
+ const item = el.item;
+ let stringify = '';
+ if (typeof item !== 'string') stringify = JSON.stringify(item);
+ else stringify = item;
+
+ if (
+ stringify === undefined ||
+ stringify === 'null' ||
+ stringify === '' ||
+ stringify === '{}' ||
+ stringify === '[]'
+ ) {
+ return true;
+ } else return false;
+ })
+ .map((item) => item.idx);
+ arrayOfDeleteIndexes.forEach((idx) => ob.splice(idx, 1));
+ }
+};
+const ruleString = (required) => {
+ let ans = '';
+ if (required) ans += 'required';
+ return ans;
+};
+
+const ruleArray = (required) => {
+ let ans = {};
+ if (required) ans.required = true;
+ return ans;
+};
+
+const ruleObject = (required) => {
+ let ans = {};
+ if (required) ans.requiredOb = true;
+ return ans;
+};
+const deleteProp = (index) => {
+ emit('delete-key-value', index);
+};
 </script>