sprintify-ui 0.0.11 → 0.0.13

package/src/components/BaseMediaLibrary.vue

@@ -1,29 +1,5 @@
 <template>
   <div>
-    <div
-      v-if="currentMediaInternal.length + normalizedModelValue.to_add.length"
-      class="mb-5"
-    >
-      <div class="flex flex-wrap">
-        <BaseMediaLibraryItem
-          v-for="(media, index) in currentMediaInternal"
-          :key="media.id"
-          :media="media"
-          @delete="promptRemoveMedia(index)"
-        >
-          {{ media.file_name }}
-        </BaseMediaLibraryItem>
-        <BaseMediaLibraryItem
-          v-for="(file, index) in normalizedModelValue.to_add"
-          :key="file.id"
-          :media="file"
-          @delete="promptRemoveUploadedFile(index)"
-        >
-          {{ file.file_name }}
-        </BaseMediaLibraryItem>
-      </div>
-    </div>
-
     <BaseFileUploader
       :max-size="maxSize"
       :disabled="disabled"
@@ -44,34 +20,28 @@
           :max="max"
         >
           <div
-            class="flex w-full items-start space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-200 hover:bg-slate-50 hover:enabled:bg-slate-100"
+            class="rounded border border-dashed p-6 duration-150"
             :class="[
-              baseFileUploaderProps.dragging ? 'bg-slate-100' : 'bg-white',
-              baseFileUploaderProps.disabled ? 'opacity-25' : '',
+              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-slate-100',
+              baseFileUploaderProps.disabled
+                ? 'cursor-not-allowed border-slate-300'
+                : 'border-slate-400 hover:bg-slate-50',
             ]"
           >
-            <div class="rounded-full bg-slate-200 p-2">
+            <div :class="[baseFileUploaderProps.disabled ? 'opacity-30' : '']">
               <BaseIcon
                 icon="heroicons:arrow-up-on-square"
-                class="h-6 w-6 text-slate-500"
+                class="mx-auto mb-3 h-6 w-6 text-slate-500"
               />
-            </div>
-            <div class="text-left">
-              <p class="mb-0 text-sm font-medium leading-tight">
-                {{ $t('sui.drop_or_click_to_upload') }}
-              </p>
-
-              <div class="mt-1 text-sm leading-tight text-slate-500">
-                <p v-if="max > 1">
-                  {{ $t('sui.you_can_upload_up_to_n_files', { count: max }) }}
-                </p>
-                <p>
-                  {{
-                    capitalize(
-                      $t('sui.up_to_x', { x: fileSizeFormat(maxSize) })
-                    )
-                  }}
+              <div class="text-center">
+                <p class="mb-0 text-sm font-medium leading-tight">
+                  {{ $t('sui.drop_or_click_to_upload') }}
                 </p>
+
+                <div class="mt-1 text-xs leading-tight text-slate-500">
+                  <p v-if="maxFileText">{{ maxFileText }}</p>
+                  <p>{{ maxFileSize }}</p>
+                </div>
               </div>
             </div>
           </div>
@@ -79,22 +49,54 @@
       </template>
     </BaseFileUploader>
 
-    <p class="text-red-600">
+    <BaseAlert v-if="globalErrorMessage" class="mt-5" color="danger" bordered>
       {{ globalErrorMessage }}
-    </p>
+    </BaseAlert>
+
+    <div
+      v-if="currentMediaInternal.length + normalizedModelValue.to_add.length"
+      class="mt-5"
+    >
+      <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        <div v-for="(media, index) in currentMediaInternal" :key="media.id">
+          <BaseMediaItem
+            :media="media"
+            :show-remove="!disabled"
+            @delete="promptRemoveMedia(index)"
+          >
+            {{ media.file_name }}
+          </BaseMediaItem>
+        </div>
+        <div
+          v-for="(file, index) in normalizedModelValue.to_add"
+          :key="file.id"
+        >
+          <BaseMediaItem
+            :media="file"
+            :show-remove="!disabled"
+            @delete="promptRemoveUploadedFile(index)"
+          >
+            {{ file.file_name }}
+          </BaseMediaItem>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { UploadedFile } from '@/types/UploadedFile';
 import { Media } from '@/types/Media';
-import _, { cloneDeep, get } from 'lodash';
+import { cloneDeep, isArray, isObject } from 'lodash';
 import { PropType } from 'vue';
 import { MediaLibraryPayload } from '@/types/types';
 import { useDialogsStore } from '../stores/dialogs';
 import { useNotificationsStore } from '../stores/notifications';
 import { capitalize } from 'lodash';
-import { fileSizeFormat } from 'src/utils';
+import BaseFileUploader from './BaseFileUploader.vue';
+import BaseMediaItem from './BaseMediaItem.vue';
+import { fileSizeFormat } from '@/utils';
+import BaseAlert from './BaseAlert.vue';
 
 const i18n = useI18n();
 
@@ -146,7 +148,7 @@ const props = defineProps({
   },
   errors: {
     default: undefined,
-    type: Object as PropType<Record<string, string[]>>,
+    type: [Array] as PropType<string[]>,
   },
   disabled: {
     default: false,
@@ -159,9 +161,9 @@ const currentMediaInternal = ref(cloneDeep(props.currentMedia));
 const normalizedModelValue = computed(() => {
   if (
     props.modelValue &&
-    _.isObject(props.modelValue) &&
-    _.isArray(props.modelValue.to_add) &&
-    _.isArray(props.modelValue.to_remove)
+    isObject(props.modelValue) &&
+    isArray(props.modelValue.to_add) &&
+    isArray(props.modelValue.to_remove)
   ) {
     return props.modelValue;
   }
@@ -260,23 +262,20 @@ function sync(modelValue: MediaLibraryPayload) {
   emit('update', modelValue);
 }
 
-function errorMessage(name: string): string {
-  const errors = get(props.errors, name, []);
-
-  if (errors.length == 0) {
-    return '';
-  }
-
-  return errors[0];
-}
-
 const globalErrorMessage = computed(() => {
-  if (errorMessage(props.name + '.to_add.0')) {
-    return errorMessage(props.name + '.to_add.0');
-  }
-  if (errorMessage(props.name + '.to_remove')) {
-    return errorMessage(props.name + '.to_remove');
+  if (props.errors && props.errors.length) {
+    return props.errors[0];
   }
   return '';
 });
+
+const maxFileText = computed(() => {
+  return i18n.t('sui.you_can_upload_up_to_n_files', { count: props.max });
+});
+
+const maxFileSize = computed(() => {
+  return capitalize(
+    i18n.t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) })
+  );
+});
 </script>

package/src/components/BaseMediaPreview.stories.js

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

package/src/components/BaseMediaPreview.vue

@@ -0,0 +1,90 @@
+<template>
+  <component
+    :is="url ? 'a' : 'div'"
+    :href="url"
+    target="_blank"
+    class="relative flex items-center justify-center overflow-hidden"
+    :class="[url ? 'duration-100 hover:bg-slate-100' : 'bg-white']"
+  >
+    <img
+      v-if="type == 'image' && url"
+      :src="url"
+      class="h-full w-full bg-black 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 bg-black object-contain object-center"
+      :alt="name"
+    />
+    <div
+      v-else
+      class="flex h-full w-full items-center justify-center bg-slate-200"
+    >
+      <BaseIcon
+        v-if="extension == 'pdf'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="mdi:file-pdf-box"
+      />
+      <BaseIcon
+        v-else-if="type == 'image'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="mdi:camera"
+      />
+      <BaseIcon
+        v-else-if="type == 'audio'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="mdi:music"
+      />
+      <span
+        v-else
+        class="text-xs font-semibold uppercase leading-tight text-slate-600"
+      >
+        {{ extension }}
+      </span>
+    </div>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { BaseIcon } from './index';
+
+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 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/BaseMenu.stories.js

@@ -0,0 +1,125 @@
+import BaseMenu from './BaseMenu.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseMenu',
+  component: BaseMenu,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: ['bottom-left', 'bottom-right'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMenu,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const items = [
+      {
+        label: 'Export file',
+        icon: 'mdi-export',
+        action() {
+          alert('Export!');
+        },
+      },
+      {
+        label: 'Google',
+        icon: 'mdi-google',
+        href: 'https://google.com',
+        count: 1000,
+      },
+      {
+        icon: 'mdi-access-point',
+        label: 'Reconnect',
+        to: 'home',
+        color: 'success',
+      },
+      {
+        icon: 'mdi-archive',
+        label: 'Archive',
+        href: 'https://google.com',
+        color: 'warning',
+      },
+      {
+        icon: 'mdi-trash-can',
+        label: 'Delete',
+        href: 'https://google.com',
+        color: 'danger',
+        count: 1,
+      },
+    ];
+
+    const user = {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    };
+
+    args.items = items;
+
+    return { args, user };
+  },
+  template: `
+    <div class="pb-52">
+
+      <h2 class="mb-5 font-semibold">Various examples</h2>
+      
+      <p class="text-sm mb-1 text-slate-600">Simple button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div 
+            class="btn" 
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            Click me
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">Contextual action button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            <BaseIcon icon="heroicons-solid:dots-vertical" />
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">With BaseAvatar</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div class="bg-white">
+            <BaseAvatar show-details :user="user" />
+          </div>
+        </template>
+      </BaseMenu>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseMenu.vue

@@ -16,7 +16,7 @@
     >
       <MenuItems
         :class="[menuClass, menuPositionClass]"
-        class="absolute z-10 mt-2 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+        class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
         <slot name="items">
           <template v-for="item in items" :key="item.label + 'link'">

package/src/components/BaseModalCenter.stories.js

@@ -0,0 +1,61 @@
+import BaseModalCenter from './BaseModalCenter.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalCenter',
+  component: BaseModalCenter,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    verticalAlign: {
+      control: { type: 'select' },
+      options: ['center', 'top'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalCenter,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalCenter v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <p class="mb-6">Hello!</p>
+
+            <button @click="close" class="btn btn-sm">Close</button>
+          </div>
+        </template>
+      </BaseModalCenter>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const VerticalAlignTop = Template.bind({});
+VerticalAlignTop.args = {
+  verticalAlign: 'top',
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

package/src/components/BaseModalCenter.vue

@@ -30,7 +30,7 @@
               >
                 <div
                   v-if="modelValue"
-                  :class="modalOverlayClasses"
+                  :class="backdropClass"
                   class="fixed inset-0 transition-opacity"
                   @click="
                     closeOnOutsideClick
@@ -85,7 +85,7 @@ const props = defineProps({
     default: 'center',
     type: String,
   },
-  modalOverlayClasses: {
+  backdropClass: {
     default: 'bg-opacity-70 bg-slate-900',
     type: String,
   },

package/src/components/BaseModalSide.stories.js

@@ -0,0 +1,55 @@
+import BaseModalSide from './BaseModalSide.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalSide',
+  component: BaseModalSide,
+  args: {
+    position: 'bottom-right',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalSide,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalSide v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <p class="mb-6">Hello!</p>
+
+            <button @click="close" class="btn btn-sm">Close</button>
+          </div>
+        </template>
+      </BaseModalSide>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const CustomMaxWidth = Template.bind({});
+CustomMaxWidth.args = {
+  maxWidth: '16rem',
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

package/src/components/BaseModalSide.vue

@@ -24,7 +24,7 @@
               >
                 <div
                   v-show="modelValue"
-                  :class="modalOverlayClasses"
+                  :class="backdropClass"
                   class="fixed inset-0 transition-opacity"
                   @click="
                     closeOnOutsideClick
@@ -85,7 +85,7 @@ const props = defineProps({
     default: '32rem',
     type: String,
   },
-  modalOverlayClasses: {
+  backdropClass: {
     default: 'bg-opacity-70 bg-slate-900',
     type: String,
   },