sprintify-ui 0.6.73 → 0.6.75

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

@@ -38,8 +38,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     currentModel: {
-        default: null;
-        type: PropType<Option | null>;
+        default: undefined;
+        type: PropType<Option | null | undefined>;
     };
     hasError: {
         default: boolean;
@@ -127,8 +127,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     currentModel: {
-        default: null;
-        type: PropType<Option | null>;
+        default: undefined;
+        type: PropType<Option | null | undefined>;
     };
     hasError: {
         default: boolean;
@@ -190,7 +190,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     emptyOptionLabel: string;
     primaryKey: string;
     showRouteUrl: ((id: string | number) => string) | undefined;
-    currentModel: Option | null;
+    currentModel: Option | null | undefined;
 }, {}>, {
     option?(_: {
         focus: () => void;

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
 declare function focusAction(): void;
 declare function blurAction(): void;
+declare function selectAction(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -96,6 +97,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     focus: typeof focusAction;
     blur: typeof blurAction;
+    select: typeof selectAction;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     blur: (...args: any[]) => void;

package/package.json

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

package/src/components/BaseAutocomplete.vue

@@ -107,7 +107,6 @@
 </template>
 
 <script lang="ts" setup>
-import { get } from 'lodash';
 import { PropType, ComputedRef } from 'vue';
 import { NormalizedOption, Option, OptionValue } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';

package/src/components/BaseAutocompleteFetch.stories.js

@@ -15,7 +15,7 @@ export default {
     },
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
+    url: 'https://faker.witify.io/api/todos',
     labelKey: 'title',
     valueKey: 'id',
   },
@@ -104,7 +104,7 @@ export const SlotOption = (args) => {
             }"
           >
             <p class="text-sm font-medium">{{ option.title }}</p>
-            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+            <p class="opacity-60 text-xs">{{ option.description }}</p>
           </div>
         </template>
       </BaseAutocompleteFetch>
@@ -172,8 +172,9 @@ export const WithSelect = (args) => {
       const select = {
         options: [
           { label: 'All', value: 'all' },
-          { label: 'Video', value: 'video' },
-          { label: 'Article', value: 'article' },
+          { label: 'Work', value: 'work' },
+          { label: 'Personal', value: 'personal' },
+          { label: 'Family', value: 'family' },
         ],
         labelKey: 'label',
         valueKey: 'value',
@@ -184,10 +185,10 @@ export const WithSelect = (args) => {
 
       const url = computed(() => {
         if (selected.value == 'all' || !selected.value) {
-          return 'https://effettandem.com/api/content/articles';
+          return 'https://faker.witify.io/api/todos';
         }
         return (
-          'https://effettandem.com/api/content/articles' +
+          'https://faker.witify.io/api/todos' +
           '?type=' +
           selected.value
         );

package/src/components/BaseBelongsToFetch.stories.js

@@ -11,12 +11,16 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
+      options: sizes,
     },
-    options: sizes,
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
-    field: 'title',
+    url: 'https://faker.witify.io/api/todos',
+    field: 'name',
+    primaryKey: 'id',
+    showRouteUrl(id) {
+      return `https://faker.witify.io/api/todos/${id}`;
+    },
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -24,7 +28,7 @@ export default {
 const Template = (args) => ({
   components: { BaseBelongsToFetch, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref(4);
     return { args, value };
   },
   template: `
@@ -74,9 +78,6 @@ export const Sizes = (args) => ({
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  currentModel: options[0],
-  primaryKey: 'value',
-  field: 'label',
   disabled: true,
 };
 
@@ -103,7 +104,7 @@ export const SlotOption = (args) => {
             }"
           >
             <p class="text-sm font-medium">{{ option.title }}</p>
-            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+            <p class="opacity-60 text-xs">{{ option.description }}</p>
           </div>
         </template>
       </BaseBelongsToFetch>
@@ -165,14 +166,15 @@ export const WithSelect = (args) => {
   return {
     components: { BaseBelongsToFetch, ShowValue },
     setup() {
-      const value = ref(options[0]);
       const selected = ref(null);
+      const value = ref(5);
 
       const select = {
         options: [
           { label: 'All', value: 'all' },
-          { label: 'Video', value: 'video' },
-          { label: 'Article', value: 'article' },
+          { label: 'Personal', value: 'personal' },
+          { label: 'Work', value: 'work' },
+          { label: 'Family', value: 'family' },
         ],
         labelKey: 'label',
         valueKey: 'value',
@@ -183,10 +185,10 @@ export const WithSelect = (args) => {
 
       const url = computed(() => {
         if (selected.value == 'all' || !selected.value) {
-          return 'https://effettandem.com/api/content/articles';
+          return 'https://faker.witify.io/api/todos';
         }
         return (
-          'https://effettandem.com/api/content/articles' +
+          'https://faker.witify.io/api/todos' +
           '?type=' +
           selected.value
         );

package/src/components/BaseBelongsToFetch.vue

@@ -49,6 +49,7 @@ import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import { Option, SelectConfiguration } from '@/types';
 import { Size } from '@/utils/sizes';
+import { debounce, isObject } from 'lodash';
 
 const props = defineProps({
   modelValue: {
@@ -90,8 +91,8 @@ const props = defineProps({
     type: String,
   },
   currentModel: {
-    default: null,
-    type: [Object, null] as PropType<Option | null>,
+    default: undefined,
+    type: [Object, null, undefined] as PropType<Option | null | undefined>,
   },
   hasError: {
     default: false,
@@ -144,39 +145,18 @@ const autocompleteFetch = ref<InstanceType<
 > | null>(null);
 
 const model = ref(props.currentModel);
+const ensureModelIsFilledDebounced = debounce(ensureModelIsFilled, 100);
 
 watch(
   () => props.currentModel,
-  (newValue, oldValue) => {
-    model.value = newValue;
-  },
-  { deep: true }
+  ensureModelIsFilledDebounced,
+  { immediate: true },
 );
 
 watch(
   () => props.modelValue,
-  (newValue, oldValue) => {
-    if (!props.modelValue) {
-      model.value = null;
-      return;
-    }
-
-    if (newValue == oldValue) {
-      return;
-    }
-
-    if (props.showRouteUrl == null) {
-      return;
-    }
-
-    http
-      .get(props.showRouteUrl(props.modelValue))
-      .then((response: AxiosResponse) => {
-        model.value = response.data.data;
-      })
-      .catch((e: Error) => e);
-  },
-  { immediate: true }
+  ensureModelIsFilledDebounced,
+  { immediate: true },
 );
 
 function onUpdate(newModel: Option | null) {
@@ -189,6 +169,54 @@ function onUpdate(newModel: Option | null) {
   }
 }
 
+function ensureModelIsFilled() {
+
+  if (props.modelValue == null) {
+    model.value = null;
+    return;
+  }
+
+  const modelId = model.value ? model.value[props.primaryKey as never] : null;
+
+  // Current value is already set
+  if (props.modelValue == modelId) {
+    return;
+  }
+
+  // Try with current model
+  if (props.currentModel && props.currentModel[props.primaryKey as never] == props.modelValue) {
+    model.value = props.currentModel;
+    return;
+  }
+
+  // Try with show route
+
+  if (props.showRouteUrl == null) {
+    return;
+  }
+
+  http
+    .get(props.showRouteUrl(props.modelValue))
+    .then((response: AxiosResponse) => {
+
+      const data = response.data as Record<string, unknown>;
+
+      if (!isObject(data)) {
+        return;
+      }
+
+      if (data[props.primaryKey as never] == props.modelValue) {
+        model.value = data;
+        return;
+      }
+
+      if (isObject(data.data) && data.data[props.primaryKey as never] == props.modelValue) {
+        model.value = data.data;
+        return;
+      }
+    });
+}
+
 defineExpose({
   focus: () => autocompleteFetch.value?.focus(),
   blur: () => autocompleteFetch.value?.blur(),

package/src/components/BaseField.vue

@@ -110,12 +110,13 @@ const getErrorMessageByName = inject(
   }
 ) as (name: string) => string | null | undefined;
 
-const clearErrors = inject('form:clearErrors', () => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const clearErrors = inject('form:clearErrors', (name?: string | null | undefined) => {
   return;
-}) as () => void;
+}) as (name?: string | null | undefined) => void;
 
-function fieldOnUpdate() {
-  clearErrors();
+function fieldOnUpdate(name?: string | null | undefined) {
+  clearErrors(name);
 }
 
 const labelNormalized = computed((): string | null => {

package/src/components/BaseFieldI18n.stories.js

@@ -5,16 +5,6 @@ import ShowValue from '@/../.storybook/components/ShowValue.vue';
 export default {
   title: 'Form/BaseFieldI18n',
   component: BaseFieldI18n,
-  decorators: [
-    (story) => ({
-      components: { story, BaseForm },
-      template: `
-      <BaseForm method="post" url="https://faker.witify.io/api/todos/422" :data="{}">
-        <story/>
-        <button type="submit" class="btn btn-primary mt-5">Submit</button>
-      </BaseForm>`,
-    }),
-  ],
   args: {
     component: 'BaseInput',
     required: true,
@@ -24,14 +14,23 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseFieldI18n, ShowValue },
+  components: { BaseForm, BaseFieldI18n, ShowValue },
   setup() {
-    const value = ref(null);
-    return { args, value };
+    const form = ref({
+      _status: 422,
+      name: {
+        en: 'Name',
+        fr: 'Nom',
+      },
+    });
+    return { args, form };
   },
   template: `
-    <BaseFieldI18n v-model="value" v-bind="args" class="w-full"></BaseFieldI18n>
-    <ShowValue :value="value" />
+    <BaseForm method="post" url="https://faker.witify.io/api/todos" :data="form">
+      <BaseFieldI18n v-model="form.name" v-bind="args" class="w-full"></BaseFieldI18n>
+      <button type="submit" class="btn btn-primary mt-5">Submit</button>
+      <ShowValue :value="form" />
+    </BaseForm>
   `,
 });
 

package/src/components/BaseForm.stories.js

@@ -19,6 +19,7 @@ const Template = (args) => ({
   },
   setup() {
     const form = ref({
+      _status: 422,
       number: 1.1,
     });
     return { args, form };
@@ -26,7 +27,7 @@ const Template = (args) => ({
   template: `
   <BaseForm 
     method="post" 
-    url="https://faker.witify.io/api/todos/422" 
+    url="https://faker.witify.io/api/todos" 
     :data="form" 
     v-slot="{disabled}"
   >

package/src/components/BaseForm.vue

@@ -216,7 +216,7 @@ function query() {
     .then((response: AxiosResponse) => {
       loading.value = false;
 
-      errors.value = {};
+      clearErrors();
 
       successHandler(response);
 
@@ -295,10 +295,14 @@ function getErrorMessageByName(name: string): string | null {
 }
 
 function clearErrors(name = null): void {
-  if (name == null) {
+  if (name == null || name == undefined) {
     errors.value = {};
-  } else {
+    return;
+  }
+
+  if (errors.value[name]) {
     delete errors.value[name];
+    return;
   }
 }
 

package/src/components/BaseHasMany.stories.js

@@ -3,6 +3,7 @@ import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 import QueryString from 'qs';
+import { random } from 'lodash';
 
 const sizes = ['xs', 'sm', 'md'];
 
@@ -16,12 +17,12 @@ export default {
     },
   },
   args: {
-    url: 'https://effettandem.com/api/content/articles',
-    field: 'title',
+    url: 'https://faker.witify.io/api/todos',
+    field: 'name',
     primaryKey: 'id',
     showRouteUrl: (ids) => {
       const params = QueryString.stringify({ filter: { id: ids } });
-      return `https://effettandem.com/api/content/articles?${params}`;
+      return `https://faker.witify.io/api/todos?${params}`;
     }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
@@ -32,8 +33,8 @@ const Template = (args) => {
     components: { BaseHasMany, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref([
-        "9acd34f6-ecf3-43e3-b84e-d8fcf5382bf4",
-        "994ecd49-0796-402d-ab1a-63d4e5c2a68a",
+        "4",
+        "6",
       ]);
       return { args, value };
     },
@@ -81,7 +82,7 @@ ShowRouteUrl.args = {
   max: 3,
   showRouteUrl: (ids) => {
     const params = QueryString.stringify({ filter: { id: ids } });
-    return `https://effettandem.com/api/content/articles?${params}`;
+    return `https://faker.witify.io/api/todos?${params}`;
   },
 };
 
@@ -221,6 +222,53 @@ export const SlotEmpty = (args) => {
   };
 };
 
+const RaceConditionTemplate = (args) => {
+  return {
+    components: { BaseHasMany, ShowValue, BaseAppNotifications },
+    setup() {
+
+      const value = ref([
+        "4",
+        "6",
+      ]);
+
+      const valueExternal = ref([]);
+
+      const intervalId = setInterval(() => {
+        const newValue = [random(1, 10)];
+        value.value = newValue;
+        valueExternal.value = newValue;
+      }, 300);
+
+      setTimeout(() => {
+        clearInterval(intervalId);
+      }, 1000);
+
+      return { args, value, valueExternal };
+    },
+    template: `
+      <BaseHasMany
+        v-model="value"
+        v-bind="args"
+      ></BaseHasMany>
+
+      <br>
+
+      <p class="-mb-4">Value from data</p>
+      <ShowValue :value="valueExternal" />
+
+      <br>
+
+      <p class="-mb-4">Value from component</p>
+      <ShowValue :value="value" />
+      <BaseAppNotifications />
+  `,
+  };
+};
+
+export const RaceCondition = RaceConditionTemplate.bind({});
+RaceCondition.args = {};
+
 export const Field = createFieldStory({
   component: BaseHasMany,
   componentName: 'BaseHasMany',

package/src/components/BaseHasMany.vue

@@ -129,7 +129,7 @@ watch(
 
 watch(
   () => props.modelValue,
-  debounce(() => fetchModels(), 200),
+  debounce(() => fetchModels(), 100),
   { immediate: true }
 );
 
@@ -150,9 +150,9 @@ function fetchModels() {
 
   // Do not fetch if the modelValue is the same as the local models
 
+  // Get primaryKeys as string for comparison
   const ids = props.modelValue.map((id: number | string) => id.toString());
-
-  const localModelIds = models.value.map((m) => m[props.primaryKey]);
+  const localModelIds = models.value.map((m) => '' + m[props.primaryKey]);
 
   if (isEqual(ids, localModelIds)) {
     return;
@@ -164,8 +164,9 @@ function fetchModels() {
 
       const items = getItems(response.data);
 
-      models.value = items.filter((i: any) => {
-        return ids.includes(i[props.primaryKey]);
+      models.value = items.filter((i: Record<string, any>) => {
+        // convert primary keys to string for comparison
+        return ids.includes('' + i[props.primaryKey]);
       });
     })
     .catch((e: Error) => e);

package/src/components/BaseInput.vue

@@ -367,6 +367,10 @@ function blurAction() {
   input.value?.blur();
 }
 
+function selectAction() {
+  input.value?.select();
+}
+
 function onIconLeftClickInternal() {
   if (props.onIconLeftClick) {
     props.onIconLeftClick();
@@ -386,5 +390,6 @@ function onIconRightClickInternal() {
 defineExpose({
   focus: focusAction,
   blur: blurAction,
+  select: selectAction,
 });
 </script>

package/src/composables/field.ts

@@ -30,9 +30,10 @@ export function useField(config: Config) {
   const fieldName = inject('field:name', ref('')) as Ref<string>;
   const fieldSize = inject('field:size', ref('md')) as Ref<Size>;
 
-  const fieldOnUpdate = inject('field:onUpdate', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const fieldOnUpdate = inject('field:onUpdate', (name?: string | null | undefined) => {
     return;
-  }) as () => void;
+  }) as (name?: string | null | undefined) => void;
 
   const getErrorMessageByName = inject(
     'form:getErrorMessageByName',
@@ -121,7 +122,7 @@ export function useField(config: Config) {
 
   function emitUpdate(value: any) {
     emit('update:modelValue', value);
-    fieldOnUpdate();
+    fieldOnUpdate(nameInternal.value);
   }
 
   return {