sprintify-ui 0.8.70 → 0.9.0

package/src/components/BaseHasMany.vue

@@ -1,15 +1,16 @@
 <template>
-  <BaseTagAutocompleteFetch
+  <BaseTagAutocomplete
     ref="tagAutocompleteFetch"
     :model-value="models"
-    :url="url"
+    :options="options"
     :disabled="disabled"
+    :name="name"
     :placeholder="placeholder"
     :required="required"
     :value-key="primaryKey"
     :label-key="field"
+    :size="size"
     :has-error="hasError"
-    :query-key="queryKey"
     :max="max"
     @update:model-value="onUpdate"
   >
@@ -40,30 +41,24 @@
         v-bind="footerProps"
       />
     </template>
-  </BaseTagAutocompleteFetch>
+  </BaseTagAutocomplete>
 </template>
 
 <script lang="ts" setup>
-import { debounce } from 'lodash';
 import { RawOption } from '@/types';
-import { config } from '@/index';
 import { PropType } from 'vue';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import { AxiosResponse } from 'axios';
-import { getItems } from '@/utils/getApiData';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
     type: [Array, String, Number, null, undefined] as PropType<string[] | string | number | null | undefined>,
   },
-  url: {
+  options: {
     required: true,
-    type: String,
-  },
-  showRouteUrl: {
-    default: undefined,
-    type: Function as PropType<((ids: (string | number)[]) => string) | undefined>,
+    type: Array as PropType<RawOption[]>,
   },
   primaryKey: {
     default: 'id',
@@ -81,57 +76,47 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  name: {
+    default: undefined,
+    type: String,
+  },
   placeholder: {
     default: undefined,
     type: String,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   max: {
     default: undefined,
     type: Number,
   },
-  queryKey: {
-    default: 'search',
-    type: String,
-  },
-  currentModels: {
-    default() {
-      return undefined;
-    },
-    type: Array as PropType<RawOption[] | undefined>,
-  },
   hasError: {
     default: false,
     type: Boolean,
   },
 });
 
-const http = config.http;
-
 const emit = defineEmits(['update:modelValue']);
 
 const tagAutocompleteFetch = ref<InstanceType<
   typeof BaseTagAutocompleteFetch
 > | null>(null);
 
-const models = ref<RawOption[]>([]);
-const ensureModelIsFilledDebounced = debounce(() => ensureModelsAreFilled(), 100);
-
-watch(
-  () => props.currentModels,
-  ensureModelIsFilledDebounced,
-  { deep: true }
-);
-
-watch(
-  () => props.modelValue,
-  ensureModelIsFilledDebounced,
-  { deep: true }
-);
+const models = computed(() => {
+  if (!props.modelValue || !Array.isArray(props.modelValue)) {
+    return [];
+  }
 
-ensureModelIsFilledDebounced();
+  return props.modelValue
+    .map((id) => {
+      return props.options.find((m) => m[props.primaryKey] === id);
+    })
+    .filter((m) => m) as RawOption[];
+});
 
 function onUpdate(newModels: RawOption[]) {
-  models.value = newModels;
   emit(
     'update:modelValue',
     newModels.map((m) => m[props.primaryKey]),
@@ -139,84 +124,12 @@ function onUpdate(newModels: RawOption[]) {
   );
 }
 
-function ensureModelsAreFilled() {
-
-  let modelValueInternal = props.modelValue;
-
-  if (typeof modelValueInternal == 'string' || typeof modelValueInternal == 'number') {
-    modelValueInternal = [modelValueInternal + ''];
-  }
-
-  if (!Array.isArray(modelValueInternal)) {
-    models.value = [];
-    return;
-  }
-
-  if (modelValueInternal.length == 0) {
-    models.value = [];
-    return;
-  }
-
-  // Remove incorrect models
-
-  const ids = modelValueInternal.map((id: number | string) => id.toString());
-
-  models.value = models.value.filter((m) => ids.includes(m[props.primaryKey] + ''));
-
-  const localModelIds = models.value.map((m) => m[props.primaryKey] + '');
-
-  let missingIds = ids.filter((id) => !localModelIds.includes(id));
-
-
-  // Current models are fully set
-  if (missingIds.length == 0) {
-    return;
-  }
-
-  // Try with current models
-
-  if (Array.isArray(props.currentModels)) {
-    missingIds.forEach((id) => {
-      const model = props.currentModels?.find((m) => m[props.primaryKey as never] == id);
-
-      if (model) {
-        models.value.push(model);
-        missingIds = missingIds.filter((i) => i != id);
-      }
-    });
-  }
-
-  // Current models are fully set
-  if (missingIds.length == 0) {
-    return;
-  }
-
-  // Try with show route
-
-  if (props.showRouteUrl == null) {
-    return;
-  }
-
-  http
-    .get(props.showRouteUrl(missingIds))
-    .then((response: AxiosResponse) => {
-
-      const items = getItems(response.data);
-
-      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);
-}
-
 defineExpose({
   focus: () => tagAutocompleteFetch.value?.focus(),
   blur: () => tagAutocompleteFetch.value?.blur(),
   open: () => tagAutocompleteFetch.value?.open(),
   close: () => tagAutocompleteFetch.value?.close(),
-  setKeywords: (input: string) =>
-    tagAutocompleteFetch.value?.setKeywords(input),
+  setKeywords: (input: string) => tagAutocompleteFetch.value?.setKeywords(input),
 });
+
 </script>

package/src/components/BaseHasManyFetch.stories.js

@@ -0,0 +1,271 @@
+import BaseHasManyFetch from "./BaseHasManyFetch.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, options, sizes } from "../../.storybook/utils";
+import BaseAppSnackbars from "./BaseAppSnackbars.vue";
+import QueryString from "qs";
+import { random } from "lodash";
+
+export default {
+  title: "Form/BaseHasManyFetch",
+  component: BaseHasManyFetch,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+  args: {
+    url: "https://faker.witify.io/api/todos",
+    field: "name",
+    primaryKey: "id",
+    showRouteUrl: (ids) => {
+      const params = QueryString.stringify({ filter: { id: ids } });
+      return `https://faker.witify.io/api/todos?${params}`;
+    },
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseHasManyFetch, ShowValue, BaseAppSnackbars },
+    setup() {
+      const value = ref(4);
+      const currentModels = ref([
+        { id: 4, name: "Todo 4 (local)" },
+        { id: 6, name: "Todo 6 (local)" },
+      ]);
+      return { args, value, currentModels };
+    },
+    template: `
+      <BaseHasManyFetch
+        v-model="value"
+        v-bind="args"
+        :current-models="currentModels"
+      ></BaseHasManyFetch>
+      <ShowValue :value="value" />
+      <BaseAppSnackbars />
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = (args) => {
+  return {
+    components: { BaseHasManyFetch, ShowValue },
+    setup() {
+      // current model is incorrect, to test component's resilience
+      const currentModel = options[1];
+      const value = ref([7]);
+      return { args, value, currentModel };
+    },
+    template: `<BaseHasManyFetch
+      v-bind="args"
+      v-model="value"
+      :current-models="[currentModel]"
+      :disabled="true"
+    ></BaseHasManyFetch>
+    <ShowValue :value="value" />`,
+  };
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const ShowRouteUrl = Template.bind({});
+ShowRouteUrl.args = {
+  max: 3,
+  showRouteUrl: (ids) => {
+    const params = QueryString.stringify({ filter: { id: ids } });
+    return `https://faker.witify.io/api/todos?${params}`;
+  },
+};
+
+export const Sizes = (args) => ({
+  components: { BaseHasManyFetch },
+  setup() {
+    const value = ref([]);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseHasManyFetch v-model="value" v-bind="args" :size="size"></BaseHasManyFetch>
+  </div>
+  `,
+});
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseHasManyFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseHasManyFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #option="{ option, active, selected }">
+        <div
+          class="rounded px-2 py-1"
+          :class="{
+            'hover:bg-slate-100': !active && !selected,
+            'bg-slate-200 hover:bg-slate-300': active && !selected,
+            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+          }"
+        >
+          <p class="text-sm font-medium">{{ option.title }}</p>
+          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+        </div>
+      </template>
+    </BaseHasManyFetch>
+  </div>
+  `,
+  };
+};
+
+export const SlotItem = (args) => {
+  return {
+    components: { BaseHasManyFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseHasManyFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #items="{items, removeOption}">
+        <div
+          v-for="item in items"
+          :key="item"
+          class="p-0.5"
+        >
+          <div class="flex  items-center rounded border pl-2 py-1 bg-white">
+            <BaseIcon icon="heroicons:tag" class="mr-2 text-slate-500" />
+            <div>
+              {{ item.label }}
+            </div>
+
+            <button
+              type="button"
+              class="flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent pl-1 pr-3 text-xs outline-none"
+              @click=removeOption(item)
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      </template>
+    </BaseHasManyFetch>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseHasManyFetch },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        setTimeout(() => {
+          alert(1);
+        }, 300);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseHasManyFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-2 border-t">
+          <button type="button" @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseHasManyFetch>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseHasManyFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseHasManyFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #empty="props">
+        <div>
+          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
+          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
+        </div>
+      </template>
+    </BaseHasManyFetch>
+  `,
+  };
+};
+
+const RaceConditionTemplate = (args) => {
+  return {
+    components: { BaseHasManyFetch, ShowValue, BaseAppSnackbars },
+    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: `
+      <BaseHasManyFetch
+        v-model="value"
+        v-bind="args"
+      ></BaseHasManyFetch>
+
+      <br>
+
+      <p class="-mb-4">Value from data</p>
+      <ShowValue :value="valueExternal" />
+
+      <br>
+
+      <p class="-mb-4">Value from component</p>
+      <ShowValue :value="value" />
+      <BaseAppSnackbars />
+  `,
+  };
+};
+
+export const RaceCondition = RaceConditionTemplate.bind({});
+RaceCondition.args = {};
+
+export const Field = createFieldStory({
+  component: BaseHasManyFetch,
+  componentName: "BaseHasManyFetch",
+  label: "Name",
+});

package/src/components/BaseHasManyFetch.vue

@@ -0,0 +1,222 @@
+<template>
+  <BaseTagAutocompleteFetch
+    ref="tagAutocompleteFetch"
+    :model-value="models"
+    :url="url"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="primaryKey"
+    :label-key="field"
+    :has-error="hasError"
+    :query-key="queryKey"
+    :max="max"
+    @update:model-value="onUpdate"
+  >
+    <template #items="itemProps">
+      <slot
+        name="items"
+        v-bind="itemProps"
+      />
+    </template>
+
+    <template #option="optionProps">
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
+    </template>
+
+    <template #empty="emptyProps">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
+    </template>
+
+    <template #footer="footerProps">
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
+    </template>
+  </BaseTagAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from 'lodash';
+import { RawOption } from '@/types';
+import { config } from '@/index';
+import { PropType } from 'vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import { AxiosResponse } from 'axios';
+import { getItems } from '@/utils/getApiData';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Array, String, Number, null, undefined] as PropType<string[] | string | number | null | undefined>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  showRouteUrl: {
+    default: undefined,
+    type: Function as PropType<((ids: (string | number)[]) => string) | undefined>,
+  },
+  primaryKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+  currentModels: {
+    default() {
+      return undefined;
+    },
+    type: Array as PropType<RawOption[] | undefined>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const http = config.http;
+
+const emit = defineEmits(['update:modelValue']);
+
+const tagAutocompleteFetch = ref<InstanceType<
+  typeof BaseTagAutocompleteFetch
+> | null>(null);
+
+const models = ref<RawOption[]>([]);
+const ensureModelIsFilledDebounced = debounce(() => ensureModelsAreFilled(), 100);
+
+watch(
+  () => props.currentModels,
+  ensureModelIsFilledDebounced,
+  { deep: true }
+);
+
+watch(
+  () => props.modelValue,
+  ensureModelIsFilledDebounced,
+  { deep: true }
+);
+
+ensureModelIsFilledDebounced();
+
+function onUpdate(newModels: RawOption[]) {
+  models.value = newModels;
+  emit(
+    'update:modelValue',
+    newModels.map((m) => m[props.primaryKey]),
+    newModels,
+  );
+}
+
+function ensureModelsAreFilled() {
+
+  let modelValueInternal = props.modelValue;
+
+  if (typeof modelValueInternal == 'string' || typeof modelValueInternal == 'number') {
+    modelValueInternal = [modelValueInternal + ''];
+  }
+
+  if (!Array.isArray(modelValueInternal)) {
+    models.value = [];
+    return;
+  }
+
+  if (modelValueInternal.length == 0) {
+    models.value = [];
+    return;
+  }
+
+  // Remove incorrect models
+
+  const ids = modelValueInternal.map((id: number | string) => id.toString());
+
+  models.value = models.value.filter((m) => ids.includes(m[props.primaryKey] + ''));
+
+  const localModelIds = models.value.map((m) => m[props.primaryKey] + '');
+
+  let missingIds = ids.filter((id) => !localModelIds.includes(id));
+
+
+  // Current models are fully set
+  if (missingIds.length == 0) {
+    return;
+  }
+
+  // Try with current models
+
+  if (Array.isArray(props.currentModels)) {
+    missingIds.forEach((id) => {
+      const model = props.currentModels?.find((m) => m[props.primaryKey as never] == id);
+
+      if (model) {
+        models.value.push(model);
+        missingIds = missingIds.filter((i) => i != id);
+      }
+    });
+  }
+
+  // Current models are fully set
+  if (missingIds.length == 0) {
+    return;
+  }
+
+  // Try with show route
+
+  if (props.showRouteUrl == null) {
+    return;
+  }
+
+  http
+    .get(props.showRouteUrl(missingIds))
+    .then((response: AxiosResponse) => {
+
+      const items = getItems(response.data);
+
+      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);
+}
+
+defineExpose({
+  focus: () => tagAutocompleteFetch.value?.focus(),
+  blur: () => tagAutocompleteFetch.value?.blur(),
+  open: () => tagAutocompleteFetch.value?.open(),
+  close: () => tagAutocompleteFetch.value?.close(),
+  setKeywords: (input: string) =>
+    tagAutocompleteFetch.value?.setKeywords(input),
+});
+</script>

package/src/components/BaseTooltip.vue

@@ -79,7 +79,6 @@ const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, p
 
 const classInternal = computed(() => {
   return [
-    'relative',
     props.class,
   ];
 });