sprintify-ui 0.0.12 → 0.0.14

package/src/components/BaseTagAutocompleteFetch.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseTagAutocomplete
-    :loading="loading && page == 1"
+    :loading="showLoading && page == 1"
     :model-value="modelValue"
     :disabled="disabled"
     :placeholder="placeholder"
@@ -8,22 +8,30 @@
     :value-key="valueKey"
     :label-key="labelKey"
     :input-class="inputClass"
-    :min="min"
     :max="max"
+    :filter="() => true"
     @focus="onFocus"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <template #empty>
-      <div class="p-5 text-center text-slate-600">
-        <span v-if="firstSearch">
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
+    </template>
+
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+        <div
+          v-if="firstSearch"
+          class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
+        >
           {{ $t('sui.nothing_found') }}
-        </span>
-        <span v-else>
-          {{ $t('sui.autocomplete_placeholder') }}
-        </span>
-      </div>
+        </div>
+      </slot>
     </template>
   </BaseTagAutocomplete>
 </template>
@@ -33,6 +41,7 @@ import { debounce } from 'lodash';
 import { config } from '@/index';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types/types';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 
 const props = defineProps({
   modelValue: {
@@ -67,21 +76,22 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  min: {
-    default: undefined,
-    type: Number,
-  },
   max: {
     default: undefined,
     type: Number,
   },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
 
 const http = config.http;
 
-const loading = ref(false);
+const showLoading = ref(false);
+const fetching = ref(false);
 const firstSearch = ref(false);
 const reachedEnd = ref(false);
 const keywords = ref('');
@@ -94,18 +104,15 @@ const onTyping = (query: string) => {
 
   if (keywords.value != query) {
     keywords.value = query;
+    showLoading.value = true;
     debouncedSearch();
   }
 };
 
 const onFocus = () => {
-  if (firstSearch.value) {
-    return;
+  if (!firstSearch.value) {
+    search();
   }
-
-  search();
-
-  firstSearch.value = true;
 };
 
 const scrollBottom = () => {
@@ -116,17 +123,18 @@ const scrollBottom = () => {
 };
 
 const search = () => {
-  if (loading.value) {
+  if (fetching.value) {
     return;
   }
 
-  loading.value = true;
+  fetching.value = true;
+  showLoading.value = true;
   firstSearch.value = true;
 
   http
     .get(props.url, {
       params: {
-        search: keywords.value,
+        [props.queryKey]: keywords.value,
         page: page.value,
       },
     })
@@ -142,9 +150,12 @@ const search = () => {
       } else {
         options.value.push(...data);
       }
+
+      firstSearch.value = true;
     })
     .finally(() => {
-      loading.value = false;
+      fetching.value = false;
+      showLoading.value = false;
     });
 };
 

package/src/components/BaseTextarea.vue

@@ -18,8 +18,8 @@ import { PropType } from 'vue';
 
 defineProps({
   modelValue: {
-    required: true,
-    type: [String, undefined] as PropType<string | undefined>,
+    default: undefined,
+    type: String as PropType<string | undefined>,
   },
   type: {
     type: String,

package/src/components/HasMany.stories.js

@@ -0,0 +1,135 @@
+import BaseHasMany from './BaseHasMany.vue';
+
+export default {
+  title: 'Form/BaseHasMany',
+  component: BaseHasMany,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    field: 'title',
+    foreignKey: 'id',
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+      <BaseHasMany
+        v-model="value"
+        v-bind="args"
+      ></BaseHasMany>
+      <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? '[]' }}</span></p>
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `<BaseHasMany
+      v-bind="args"
+      v-model="value"
+      :current-models="[{title: 'Dark Vader', id: 1}]"
+      :disabled="true"
+    ></BaseHasMany>`,
+  };
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseHasMany
+      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>
+    </BaseHasMany>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseHasMany
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseHasMany>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseHasMany
+      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>
+    </BaseHasMany>
+  `,
+  };
+};

package/src/components/index.ts

@@ -12,6 +12,7 @@ import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -24,10 +25,14 @@ import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
+import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseInput from './BaseInput.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseMediaItem from './BaseMediaItem.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import BaseMediaPreview from './BaseMediaPreview.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
@@ -46,13 +51,14 @@ import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
 import BaseSkeleton from './BaseSkeleton.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
-import BaseTextarea from './BaseTextarea.vue';
-import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
-import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseTabs from './BaseTabs.vue';
 import BaseTabItem from './BaseTabItem.vue';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 
 export {
   BaseAlert,
@@ -69,6 +75,7 @@ export {
   BaseButton,
   BaseCard,
   BaseCardRow,
+  BaseCharacterCounter,
   BaseClipboard,
   BaseContainer,
   BaseCounter,
@@ -81,10 +88,14 @@ export {
   BaseDialog,
   BaseFilePicker,
   BaseFileUploader,
+  BaseHasMany,
   BaseIcon,
   BaseInput,
   BaseInputLabel,
   BaseLoadingCover,
+  BaseMediaItem,
+  BaseMediaLibrary,
+  BaseMediaPreview,
   BaseMenu,
   BaseMenuItem,
   BaseModalCenter,
@@ -103,11 +114,12 @@ export {
   BaseSkeleton,
   BaseSwitch,
   BaseSystemAlert,
-  BaseTextarea,
-  BaseTextareaAutoresize,
-  BaseCharacterCounter,
   BaseTabs,
   BaseTabItem,
+  BaseTagAutocomplete,
+  BaseTagAutocompleteFetch,
   BaseTable,
   BaseTableColumn,
+  BaseTextarea,
+  BaseTextareaAutoresize,
 };

package/src/lang/en.json

@@ -53,6 +53,6 @@
     "year": "Year",
     "yes_delete": "Yes, delete",
     "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
-    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items"
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items"
   }
 }

package/src/lang/fr.json

@@ -53,6 +53,6 @@
     "year": "An",
     "yes_delete": "Oui, supprimer",
     "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
-    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments"
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments"
   }
 }

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

@@ -1,25 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        required: true;
-        type: NumberConstructor;
-    };
-    lastPage: {
-        required: true;
-        type: NumberConstructor;
-    };
-}, unknown, unknown, {}, {
-    next(): void;
-    previous(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:model-value"[], "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: NumberConstructor;
-    };
-    lastPage: {
-        required: true;
-        type: NumberConstructor;
-    };
-}>> & {
-    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-}, {}>;
-export default _default;

package/src/components/BaseMediaLibraryItem.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="w-full rounded-lg border border-slate-200">
-    <div class="flex space-x-5 p-4">
-      <div
-        class="h-20 w-20 shrink-0 rounded border border-slate-200 bg-slate-900"
-      >
-        <component
-          :is="url ? 'a' : 'div'"
-          :href="url"
-          target="_blank"
-          class="flex h-full w-full items-center justify-center overflow-hidden"
-        >
-          <img
-            v-if="type == 'image' && url"
-            :src="url"
-            class="h-full w-full object-contain object-center"
-            :alt="name"
-          />
-          <img
-            v-else-if="type == 'image' && 'data_url' in media"
-            :src="media.data_url"
-            class="h-full w-full object-contain object-center"
-            :alt="name"
-          />
-          <span v-else class="leading-tight text-slate-600">{{
-            extension
-          }}</span>
-        </component>
-      </div>
-      <div class="grow overflow-hidden">
-        <div class="leading-normal">
-          <p class="mb-1 truncate text-sm font-medium leading-tight">
-            {{ name }}
-          </p>
-          <p class="text-sm leading-tight text-slate-500">
-            {{ size }}
-          </p>
-          <button
-            type="button"
-            class="mt-2 appearance-none text-sm underline"
-            @click="$emit('delete')"
-          >
-            {{ capitalize($t('sui.remove')) }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Media } from '@/types/Media';
-import { UploadedFile } from '@/types/UploadedFile';
-import { PropType } from 'vue';
-import { capitalize } from 'lodash';
-import { fileSizeFormat } from 'src/utils';
-
-defineEmits(['delete']);
-
-const props = defineProps({
-  media: {
-    required: true,
-    type: Object as PropType<Media | UploadedFile>,
-  },
-});
-
-const name = computed(() => {
-  return props.media.file_name;
-});
-
-const size = computed(() => {
-  return fileSizeFormat(props.media.size);
-});
-
-const type = computed(() => {
-  const parts = props.media.mime_type.split('/');
-  return parts[0];
-});
-
-const extension = computed(() => {
-  const parts = props.media.mime_type.split('/');
-  return parts[parts.length - 1];
-});
-
-const url = computed(() => {
-  if ('url' in props.media) {
-    return props.media.url;
-  }
-
-  return null;
-});
-</script>

package/src/components/BasePaginationSimple.vue

@@ -1,60 +0,0 @@
-<template>
-  <nav
-    v-if="lastPage > 1 || lastPage < modelValue"
-    class="flex items-center space-x-1 sm:px-0"
-  >
-    <button
-      type="button"
-      :disabled="modelValue == 1"
-      class="flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 text-sm font-medium text-slate-400 outline-none hover:enabled:border-slate-400 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:border-transparent disabled:opacity-60"
-      @click="previous()"
-    >
-      <BaseIcon
-        class="h-5 w-5 text-slate-400"
-        icon="heroicons-solid:chevron-left"
-      />
-    </button>
-    <button
-      :disabled="modelValue >= lastPage"
-      class="flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 text-sm font-medium text-slate-400 outline-none hover:enabled:border-slate-400 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:border-transparent disabled:opacity-60"
-      @click="next()"
-    >
-      <BaseIcon
-        class="h-5 w-5 text-slate-400"
-        icon="heroicons-solid:chevron-right"
-      />
-    </button>
-  </nav>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: Number,
-    },
-    lastPage: {
-      required: true,
-      type: Number,
-    },
-  },
-  emits: ['update:model-value'],
-  methods: {
-    next() {
-      if (this.modelValue >= this.lastPage) {
-        return;
-      }
-      this.$emit('update:model-value', this.modelValue + 1);
-    },
-    previous() {
-      if (this.modelValue == 1) {
-        return;
-      }
-      this.$emit('update:model-value', this.modelValue - 1);
-    },
-  },
-});
-</script>