sprintify-ui 0.6.30 → 0.6.32

package/dist/types/src/components/BaseHasMany.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
         type: StringConstructor;
     };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((ids: (string | number)[]) => string) | undefined>;
+    };
     primaryKey: {
         default: string;
         type: StringConstructor;
@@ -62,6 +66,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
         type: StringConstructor;
     };
+    showRouteUrl: {
+        default: undefined;
+        type: PropType<((ids: (string | number)[]) => string) | undefined>;
+    };
     primaryKey: {
         default: string;
         type: StringConstructor;
@@ -109,6 +117,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     max: number;
     queryKey: string;
     primaryKey: string;
+    showRouteUrl: ((ids: (string | number)[]) => string) | undefined;
     currentModels: Option[];
 }, {}>, {
     items?(_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.30",
+  "version": "0.6.32",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseHasMany.stories.js

@@ -2,6 +2,7 @@ import BaseHasMany from './BaseHasMany.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAppNotifications from './BaseAppNotifications.vue';
+import QueryString from 'qs';
 
 export default {
   title: 'Form/BaseHasMany',
@@ -19,7 +20,9 @@ const Template = (args) => {
   return {
     components: { BaseHasMany, ShowValue, BaseAppNotifications },
     setup() {
-      const value = ref([]);
+      const value = ref([
+        "9acd34f6-ecf3-43e3-b84e-d8fcf5382bf4"
+      ]);
       return { args, value };
     },
     template: `
@@ -60,6 +63,15 @@ Maximum.args = {
   max: 3,
 };
 
+export const ShowRouteUrl = Template.bind({});
+ShowRouteUrl.args = {
+  max: 3,
+  showRouteUrl: (ids) => {
+    const params = QueryString.stringify({ filter: { id: ids } });
+    return `https://effettandem.com/api/content/articles?${params}`;
+  },
+};
+
 export const SlotOption = (args) => {
   return {
     components: { BaseHasMany },

package/src/components/BaseHasMany.vue

@@ -46,8 +46,10 @@
 <script lang="ts" setup>
 import { isEqual } from 'lodash';
 import { Option } from '@/types';
-import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import { config } from '@/index';
 import { PropType } from 'vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import { AxiosResponse } from 'axios';
 
 const props = defineProps({
   modelValue: {
@@ -58,6 +60,10 @@ const props = defineProps({
     required: true,
     type: String,
   },
+  showRouteUrl: {
+    default: undefined,
+    type: Function as PropType<((ids: (string | number)[]) => string) | undefined>,
+  },
   primaryKey: {
     default: 'id',
     type: String,
@@ -98,6 +104,8 @@ const props = defineProps({
   },
 });
 
+const http = config.http;
+
 const emit = defineEmits(['update:modelValue']);
 
 const tagAutocompleteFetch = ref<InstanceType<
@@ -118,6 +126,36 @@ watch(
   { deep: true }
 );
 
+watch(
+  () => props.modelValue,
+  (newValue, oldValue) => {
+    if (!props.modelValue) {
+      models.value = [];
+      return;
+    }
+
+    if (newValue == oldValue) {
+      return;
+    }
+
+    if (props.showRouteUrl == null) {
+      return;
+    }
+
+    const ids = props.modelValue.map((id) => id.toString());
+
+    http
+      .get(props.showRouteUrl(ids))
+      .then((response: AxiosResponse) => {
+        models.value = response.data.data.filter((i: any) => {
+          return ids.includes(i[props.primaryKey]);
+        });
+      })
+      .catch((e: Error) => e);
+  },
+  { immediate: true }
+);
+
 function onUpdate(newModels: Option[]) {
   models.value = newModels;
   emit(

package/src/index.ts

@@ -40,14 +40,14 @@ const config = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formatQueryString(params: Record<string, any>) {
     return QueryString.stringify(params, {
-      arrayFormat: 'comma',
-      encode: import.meta.env.PROD ? true : false,
+      //arrayFormat: 'comma',
+      //encode: import.meta.env.PROD ? true : false,
     });
   },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   parseQueryString(params: string): Record<string, any> {
     return QueryString.parse(params, {
-      comma: true,
+      //comma: true,
     });
   },
   countries: [] as Country[],