sprintify-ui 0.0.11 → 0.0.13

package/src/components/BaseDataIterator.vue

@@ -11,12 +11,12 @@
         :class="{ 'col-span-1': !mobileLayout, 'col-span-2': mobileLayout }"
       >
         <!-- Header -->
-        <div class="mb-4 flex space-x-2 empty:mb-0">
+        <div class="flex mb-4 space-x-2 empty:mb-0">
           <!-- Search bar -->
           <div v-if="searchable" class="grow">
             <div class="relative h-11">
               <div
-                class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+                class="flex pointer-events-none absolute top-0 left-0 h-full items-center justify-center pl-2.5"
               >
                 <BaseIcon
                   class="h-6 w-6 text-slate-400"
@@ -33,7 +33,7 @@
               />
               <div
                 v-if="searchQuery"
-                class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
+                class="flex absolute top-0 right-0 h-full items-center justify-center p-1"
               >
                 <button
                   type="button"
@@ -55,15 +55,15 @@
           <!-- Filters (mobile) -->
           <button
             v-if="mobileLayout && hasFilters"
-            class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
+            class="flex btn h-11 items-center justify-center py-1 text-base shadow-sm"
             type="button"
             @click="showFilters = true"
           >
             <BaseIcon
-              class="mr-2 h-6 w-6 text-slate-500"
+              class="h-6 w-6 text-slate-500 xs:mr-2"
               icon="heroicons:adjustments-horizontal-solid"
             />
-            <span>{{ $t('sui.filters') }}</span>
+            <span class="hidden xs:block">{{ $t('sui.filters') }}</span>
           </button>
 
           <!-- Menu -->
@@ -99,38 +99,32 @@
 
         <!-- Pagination -->
 
+        <div class="mt-5">
+          <p class="text-center text-xs text-slate-400 sm:text-right">
+            {{
+              (paginationMetadata.current_page - 1) *
+                paginationMetadata.per_page +
+              1
+            }}
+            -
+            {{
+              $t('sui.pagination_detail', {
+                page: Math.min(
+                  paginationMetadata.current_page * paginationMetadata.per_page,
+                  paginationMetadata.total
+                ),
+                total: paginationMetadata.total,
+              })
+            }}
+          </p>
+        </div>
+
         <div class="mt-4">
-          <div
-            class="flex flex-wrap xs:flex-nowrap xs:items-center xs:justify-between"
-          >
-            <div class="flex items-center space-x-3">
-              <BasePaginationSimple
-                :model-value="page"
-                :last-page="lastPage"
-                @model-value:update="onPageChange"
-              />
-              <div>
-                <p class="text-sm text-slate-600">
-                  {{
-                    (paginationMetadata.current_page - 1) *
-                      paginationMetadata.per_page +
-                    1
-                  }}
-                  -
-                  {{
-                    $t('sui.pagination_detail', {
-                      page: Math.min(
-                        paginationMetadata.current_page *
-                          paginationMetadata.per_page,
-                        paginationMetadata.total
-                      ),
-                      total: paginationMetadata.total,
-                    })
-                  }}
-                </p>
-              </div>
-            </div>
-          </div>
+          <BasePagination
+            :model-value="page"
+            :last-page="lastPage"
+            @update:model-value="onPageChange"
+          />
         </div>
       </div>
 
@@ -216,7 +210,7 @@ import {
 import BaseMenu from './BaseMenu.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
-import BasePaginationSimple from './BasePaginationSimple.vue';
+import BasePagination from './BasePagination.vue';
 import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';

package/src/components/BaseDataTable.stories.js

@@ -87,9 +87,9 @@ const template = `
         <BaseSelect
           :model-value="query.type ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('type', $event)"
         >
-          <option value="">-</option>
           <option value="video">
             Video
           </option>
@@ -105,9 +105,9 @@ const template = `
         <BaseSelect
           :model-value="query.access_level ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('access_level', $event)"
         >
-          <option value="">-</option>
           <option value="public">
             Public
           </option>

package/src/components/BaseFileUploader.vue

@@ -92,6 +92,10 @@ const emit = defineEmits([
 const uploading = ref(false);
 
 async function onFileSelect(file: File) {
+  if (uploading.value) {
+    return;
+  }
+
   uploading.value = true;
 
   if (!(await props.beforeUpload())) {

package/src/components/BaseHasMany.vue

@@ -0,0 +1,92 @@
+<template>
+  <BaseTagAutocompleteFetch
+    :model-value="models"
+    :url="url"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="foreignKey"
+    :label-key="field"
+    :input-class="inputClass"
+    :query-key="queryKey"
+    :max="max"
+    @update:model-value="onUpdate"
+  >
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps"></slot>
+    </template>
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps"></slot>
+    </template>
+  </BaseTagAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Option } from '@/types/types';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  foreignKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  inputClass: {
+    default: undefined,
+    type: String,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+  currentModels: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Option[]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const models = ref(props.currentModels);
+
+function onUpdate(newModels: Option[]) {
+  models.value = newModels;
+  emit(
+    'update:modelValue',
+    newModels.map((m) => m[props.foreignKey])
+  );
+}
+</script>

package/src/components/BaseInput.stories.js

@@ -0,0 +1,46 @@
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Form/BaseInput',
+  component: BaseInput,
+  args: {
+    required: true,
+    type: 'text',
+    name: 'name',
+    class: 'w-full',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInput,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseInput v-model="value" v-bind="args"></BaseInput>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  placeholder: 'Enter your name',
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  type: 'number',
+  step: 0.1,
+  placeholder: 'Enter a number',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Disabled input!',
+  disabled: true,
+  placeholder: 'Enter your name',
+};

package/src/components/BaseInput.vue

@@ -4,10 +4,11 @@
     :value="modelValue"
     :type="type"
     :name="name"
+    :step="step"
     :disabled="disabled"
     :placeholder="placeholder"
     :required="required"
-    class="rounded"
+    class="rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     :autocomplete="autocomplete ? 'on' : 'off'"
     @keydown.enter="onEnter"
     @input="$emit('update:modelValue', transformInputValue($event))"
@@ -20,17 +21,24 @@ import { PropType } from 'vue';
 
 const props = defineProps({
   modelValue: {
-    required: true,
+    default: '',
     type: [String, Number, null] as PropType<string | number | null>,
   },
   type: {
     type: String,
     default: 'text',
   },
+  step: {
+    default: undefined,
+    type: Number,
+  },
   autocomplete: {
     default: true,
     type: Boolean,
   },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
   preventSubmit: {
     default: false,
     type: Boolean,

package/src/components/BaseInputLabel.stories.js

@@ -0,0 +1,31 @@
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Form/BaseInputLabel',
+  component: BaseInputLabel,
+  args: {
+    required: true,
+    label: 'First Name',
+    class: 'text-slate-600 block text-sm',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInputLabel,
+    BaseInput,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <form @submit.prevent="">
+    <BaseInputLabel v-bind="args"></BaseInputLabel>
+    <BaseInput required name="name" placeholder="Enter your first name"></BaseInput>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseInputLabel.vue

@@ -18,7 +18,7 @@ export default defineComponent({
       type: String,
     },
     classes: {
-      default: 'form-input-label mb-1',
+      default: 'mb-1 block text-sm',
       type: String,
     },
   },

package/src/components/BaseLoadingCover.stories.js

@@ -0,0 +1,55 @@
+import BaseLoadingCover from './BaseLoadingCover.vue';
+
+export default {
+  title: 'Layout/BaseLoadingCover',
+  component: BaseLoadingCover,
+  args: {
+    delay: 0,
+    modelValue: true,
+    size: 'sm',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="relative bg-slate-100 p-6 py-10">
+      <p class="text-center text-slate-700">Non dolor consectetur et occaecat.</p>
+      <BaseLoadingCover v-bind="args" />
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SmallSpinner = Template.bind({});
+SmallSpinner.args = {
+  size: 'sm',
+};
+
+export const LargeSpinner = Template.bind({});
+LargeSpinner.args = {
+  size: 'lg',
+};
+
+export const SpinnerCustomClass = Template.bind({});
+SpinnerCustomClass.args = {
+  iconClass: 'text-red-500 w-10 h-10',
+};
+
+export const BackdropCustomClass = Template.bind({});
+BackdropCustomClass.args = {
+  backdropClass: 'bg-slate-100 opacity-50',
+};

package/src/components/BaseLoadingCover.vue

@@ -25,28 +25,46 @@ import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const props = defineProps({
+  /**
+   * Show/Hide the loading cover
+   */
   modelValue: {
     default: true,
     type: Boolean,
   },
+  /**
+   * Classes added to the backdrop
+   */
   backdropClass: {
     default: 'bg-white',
     type: String,
   },
+  /**
+   * Classes added to the spinner icon
+   */
   iconClass: {
     default: 'text-blue-500 w-10 h-10',
     type: String,
   },
+  /**
+   * Change the type of spinner. 'sm' for a small spinner. 'lg' for a large spinner.
+   */
   size: {
     default: 'sm',
     type: String as PropType<'sm' | 'lg'>,
   },
+  /**
+   * Transition duration class.
+   */
   duration: {
     default: 'duration-300',
     type: String,
   },
+  /**
+   * Delay before showing the loading cover. This delay is used to avoid unnecessary showing the spinner for a fraction of second when the loading time is too short.
+   */
   delay: {
-    default: 330,
+    default: 0,
     type: Number,
   },
 });

package/src/components/BaseMediaItem.stories.js

@@ -0,0 +1,41 @@
+import BaseMediaItem from './BaseMediaItem.vue';
+
+export default {
+  title: 'Components/BaseMediaItem',
+  component: BaseMediaItem,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMediaItem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseMediaItem v-bind="args" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  media: {
+    id: 'xxxxxxxxxxx',
+    file_name: 'picture.jpg',
+    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    mime_type: 'image',
+    size: 430 * 1024,
+  },
+};
+
+export const PDF = Template.bind({});
+PDF.args = {
+  media: {
+    id: 'xxxxxxxxxxx',
+    file_name: 'document.pdf',
+    url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80',
+    mime_type: 'application/pdf',
+    size: 430 * 1024,
+  },
+};

package/src/components/BaseMediaItem.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="rounded border border-slate-300 bg-white shadow">
+    <div class="relative flex">
+      <div class="shrink-0">
+        <BaseMediaPreview class="h-14 w-14 rounded-l" :media="media" />
+      </div>
+      <component
+        :is="url ? 'a' : 'p'"
+        :href="url"
+        target="_blank"
+        class="grow overflow-hidden px-3 pt-3"
+      >
+        <div class="text-left leading-tight">
+          <p class="grow truncate text-sm font-medium">
+            {{ name }}
+          </p>
+          <p class="shrink-0 text-[10px] font-medium text-slate-400">
+            {{ size }}
+          </p>
+        </div>
+      </component>
+      <div v-if="showRemove" class="shrink-0 p-2">
+        <button
+          type="button"
+          class="rounded-full bg-slate-400 p-1 text-white hover:bg-slate-500"
+          @click="$emit('delete')"
+        >
+          <BaseIcon icon="heroicons:x-mark-20-solid" class="h-4 w-4"></BaseIcon>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { fileSizeFormat } from '@/utils';
+import BaseMediaPreview from './BaseMediaPreview.vue';
+import { BaseIcon } from '.';
+
+defineEmits(['delete']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const size = computed(() => {
+  return fileSizeFormat(props.media.size);
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+</script>

package/src/components/BaseMediaLibrary.stories.js

@@ -0,0 +1,80 @@
+import BaseApp from './BaseApp.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+
+const mediaModel = {
+  id: 'xxxxx',
+  file_name: 'picture0-1-2dfjjje-23refg-45t.jpg',
+  mime_type: 'image/jpg',
+  url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=1200&h=800&q=80',
+  size: 430 * 1024,
+};
+
+export default {
+  title: 'Form/BaseMediaLibrary',
+  component: BaseMediaLibrary,
+  args: {
+    name: 'media',
+    max: 2,
+    min: 2,
+    acceptedExtensions: ['jpg', 'png'],
+    maxSize: 500 * 1024,
+    currentMedia: [
+      mediaModel,
+      {
+        id: '1',
+        url: '',
+        mime_type: 'application/pdf',
+        file_name: 'document.pdf',
+        size: 40012,
+      },
+      {
+        id: '2',
+        url: '',
+        mime_type: 'application/excel',
+        file_name: 'finance-2022.xlsx',
+        size: 5461,
+      },
+      {
+        id: '3',
+        url: '',
+        mime_type: 'image/png',
+        file_name: '34345-1.png',
+        size: 40012,
+      },
+      {
+        id: '4',
+        url: '',
+        mime_type: 'audio/mp3',
+        file_name: 'test.mp3',
+        size: 792834,
+      },
+    ],
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseMediaLibrary v-bind="args" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Errors = Template.bind({});
+Errors.args = {
+  errors: ['Whoops, you forgot the name of your mother!'],
+};