sprintify-ui 0.0.12 → 0.0.14

package/src/components/BaseInput.vue

@@ -1,23 +1,43 @@
 <template>
-  <input
-    ref="input"
-    :value="modelValue"
-    :type="type"
-    :name="name"
-    :step="step"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :required="required"
-    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))"
-  />
+  <div class="inline-flex rounded border border-slate-300">
+    <div
+      v-if="icon && iconPosition == 'left'"
+      class="flex shrink-0 items-center justify-center rounded-l border-r border-slate-300 bg-slate-100 px-3 text-slate-600"
+    >
+      <BaseIcon icon="heroicons:phone-20-solid" />
+    </div>
+    <input
+      ref="input"
+      :value="modelValue"
+      :type="type"
+      :name="name"
+      :step="step"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="required"
+      class="border-none bg-transparent outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
+      :class="{
+        'rounded-r': icon && iconPosition == 'left',
+        'rounded-l': icon && iconPosition == 'right',
+        rounded: !icon,
+      }"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      @keydown.enter="onEnter"
+      @input="$emit('update:modelValue', transformInputValue($event))"
+    />
+    <div
+      v-if="icon && iconPosition == 'right'"
+      class="flex shrink-0 items-center justify-center rounded-r border-l border-slate-300 bg-slate-100 px-3 text-slate-600"
+    >
+      <BaseIcon icon="heroicons:phone-20-solid" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { get, isNumber, isString, trim } from 'lodash';
 import { PropType } from 'vue';
+import { BaseIcon } from './index';
 
 const props = defineProps({
   modelValue: {
@@ -59,6 +79,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  icon: {
+    default: null,
+    type: String,
+  },
+  iconPosition: {
+    default: 'left',
+    type: String as PropType<'left' | 'right'>,
+  },
 });
 
 defineEmits(['update:modelValue']);

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!'],
+};

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.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/BaseSelect.vue

@@ -36,7 +36,7 @@ const EMPTY_VALUE_EXTERNAL = null;
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [String, Number, null, undefined] as PropType<Option>,
+    type: [String, Number, null] as PropType<Option | undefined>,
   },
   name: {
     default: undefined,

package/src/components/BaseSideNavigationItem.vue

@@ -1,11 +1,15 @@
 <template>
-  <router-link v-slot="{ href, navigate, isActive }" :to="to" custom>
+  <router-link
+    v-slot="{ href, navigate, isActive, isExactActive }"
+    :to="to"
+    custom
+  >
     <a
       :href="disabled ? undefined : href"
       :disabled="disabled"
       class="group relative flex items-center px-3 py-1"
       :class="[
-        isActive
+        (activeStrategy == 'default' ? isActive : isExactActive)
           ? 'font-semibold text-blue-600'
           : 'text-slate-600 hover:text-slate-900',
         disabled ? 'cursor-not-allowed opacity-60' : '',
@@ -15,7 +19,7 @@
       <div
         class="absolute left-0 top-0 h-full"
         :class="[
-          isActive
+          (activeStrategy == 'default' ? isActive : isExactActive)
             ? 'w-[2px] bg-blue-600'
             : 'group-hover:w-px group-hover:bg-slate-700',
         ]"
@@ -38,6 +42,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  activeStrategy: {
+    default: 'default',
+    type: String as PropType<'default' | 'exact'>,
+  },
 });
 
 const onClick = (navigate: () => void) => {

package/src/components/BaseSystemAlert.vue

@@ -36,7 +36,7 @@ import { RouteLocationRaw } from 'vue-router';
 const props = defineProps({
   to: {
     default: undefined,
-    type: [Object, String, undefined] as PropType<RouteLocationRaw | undefined>,
+    type: [Object, String] as PropType<RouteLocationRaw | undefined>,
   },
   action: {
     default: undefined,