Use slider for total number of data

Author: netervati

components/modal/createModelData.vue

@@ -16,6 +16,7 @@
   const model = useModel();
   const modelData = useModelData();
   const modelDataType = useModelDataType();
+  const maxCountAllowed = ref(10 - modelData.list.length || 0);
 
   const defaultSchema = model.target?.schema?.map((sch) => ({
     max: undefined,
@@ -91,13 +92,14 @@
     <form @submit="onSubmit">
       <h3 class="text-lg font-bold">Generate Model Data</h3>
       <div class="flex">
-        <section class="form-control mt-2">
-          <FormInput
+        <section class="form-control mt-2 w-full">
+          <label class="mb-2 text-lg">No. of data:</label>
+          <FormRange
             :disabled="isDisabled"
-            :rules="{ required: 'Increase is required.' }"
+            :max="maxCountAllowed"
+            :min="1"
+            :rules="{ min: 'Number should be greater than 0.' }"
             name="increase"
-            placeholder="Enter increase"
-            type="number"
           />
         </section>
       </div>

stores/useModelData.ts

@@ -58,7 +58,7 @@ export default defineStore('model-data', () => {
       },
       async onResponse({ response }) {
         if (response.status === 200) {
-          toast.success('Created a model!');
+          toast.success('Generated new data!');
 
           if (typeof options.onSuccess === 'function') {
             options.onSuccess(response._data.secretKey);