Merge pull request #209 from Yannick243/vue3-composition-refactor

feat(ui-predicate-vue3): migrate components to composition API & add support for v-model

Author: Yannick243

packages/ui-predicate-vue3/README.md

@@ -56,7 +56,7 @@ app.mount('#app');
 <template>
   <div>
     <ui-predicate
-      :data="predicate"
+      v-model="predicate"
       :columns="columns"
       @change="onChange"
       @initialized="onInitialized"
@@ -164,7 +164,6 @@ const columns = {
 }
 
 const onChange = (data) => {
-  predicate.value = data
    console.log('Predicate changed', data);
 };
 
@@ -276,7 +275,7 @@ export default {
   },
   methods: {
     onChange(diff) {
-      this.predicate = diff;
+      console.log('Predicate changed', diff);
     },
   },
 };

packages/ui-predicate-vue3/getting-started/DateRangeArgument.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ui-predicate__date__range__argument">
+    <input type="date" v-model="start" @change="emitUpdatedValue" />
+    <span>and</span>
+    <input type="date" v-model="end" @change="emitUpdatedValue" />
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  value: {
+    type: null,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["change"]);
+
+const start = ref(props.value?.[0] || "");
+const end = ref(props.value?.[1] || "");
+
+// Watch for external prop changes and update local refs
+watch(
+  () => props.value,
+  (newValue) => {
+    if (Array.isArray(newValue)) {
+      start.value = newValue[0] || "";
+      end.value = newValue[1] || "";
+    }
+  }
+);
+
+const emitUpdatedValue = () => {
+  emit("change", [start.value, end.value]);
+};
+</script>
+<style scoped>
+.ui-predicate__date__range__argument {
+  display: flex;
+  align-items: center;
+}
+</style>

packages/ui-predicate-vue3/getting-started/simple.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="column">
       <ui-predicate
-        :data="predicate"
+        v-model="predicate"
         :columns="columns"
-        @change="onChange"
+        @changed="onChange"
         @initialized="onInitialized"
       />
     </div>
@@ -36,6 +36,7 @@ import { ref } from 'vue';
 import ColorArgument from './ColorArgument.vue';
 import TextArgument from './TextArgument.vue';
 import DateArgument from './DateArgument.vue';
+import DateRangeArgument from './DateRangeArgument.vue';
 
 const predicate = ref({
   logicalType_id: 'all',
@@ -103,6 +104,11 @@ const columns = {
       label: 'is',
       argumentType_id: 'datepicker',
     },
+    {
+      operator_id: 'isBetween_date',
+      label: 'is between',
+      argumentType_id: 'daterangepicker',
+    },
     {
       operator_id: 'isBrighterThan',
       label: 'is brighter than',
@@ -130,7 +136,7 @@ const columns = {
     },
     {
       type_id: 'datetime',
-      operator_ids: ['is_date'],
+      operator_ids: ['is_date', 'isBetween_date'],
     },
     {
       type_id: 'color',
@@ -156,6 +162,10 @@ const columns = {
       argumentType_id: 'datepicker',
       component: DateArgument,
     },
+    {
+      argumentType_id: 'daterangepicker',
+      component: DateRangeArgument,
+    },
     {
       argumentType_id: 'colorpicker',
       component: ColorArgument,
@@ -172,11 +182,11 @@ const columns = {
 }
 
 const onChange = (data) => {
-  predicate.value = data
+  console.log('UIPredicate onChange', data);
 };
 
 const onInitialized = (ctrl) => {
-  // console.log('UIPredicate initialized', ctrl);
+  console.log('UIPredicate initialized', ctrl);
 }
 </script>