sprintify-ui 0.0.203 → 0.1.0

package/src/components/BaseAddressForm.vue

@@ -65,6 +65,7 @@
         class="w-full"
         :options="countries"
         label-key="name"
+        :disabled="props.restrictCountry"
         value-key="id"
         @update:model-value="update('country', $event)"
       >
@@ -100,7 +101,16 @@ import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
 import { config } from '..';
 
-type Address = Record<string, string | number | null | undefined>;
+const DEFAULT_COUNTRY = 'ca';
+
+type Address = {
+  address_1?: string | null;
+  address_2?: string | null;
+  postal_code?: string | null;
+  city?: string | null;
+  region?: string | null;
+  country?: string | null;
+};
 
 const props = withDefaults(
   defineProps<{
@@ -108,6 +118,7 @@ const props = withDefaults(
     prefix: string | null;
     countries?: Country[];
     regions?: Region[];
+    restrictCountry?: boolean;
   }>(),
   {
     modelValue() {
@@ -120,13 +131,14 @@ const props = withDefaults(
     regions() {
       return [];
     },
+    restrictCountry: false,
   }
 );
 
 const emit = defineEmits(['update:model-value']);
 
 const normalizedModelValue = computed((): Address => {
-  const form = cloneDeep(props.modelValue ?? {});
+  const form = cloneDeep(props.modelValue ?? {}) as Address;
   form.address_1 = form.address_1 ?? '';
   form.address_2 = form.address_2 ?? '';
   form.city = form.city ?? '';
@@ -136,6 +148,16 @@ const normalizedModelValue = computed((): Address => {
   return form;
 });
 
+const normalizedCountry = computed((): string | null => {
+  if (props.restrictCountry) {
+    if (normalizedModelValue.value.country) {
+      return normalizedModelValue.value.country;
+    }
+    return DEFAULT_COUNTRY;
+  }
+  return normalizedModelValue.value.country ?? null;
+});
+
 const countries = computed((): Country[] => {
   if (props.countries && isArray(props.countries) && props.countries.length) {
     return props.countries;
@@ -163,7 +185,7 @@ const namePrefix = computed((): string => {
   return '';
 });
 
-function update(field: string, value: string) {
+function update(field: keyof Address, value: string) {
   const newForm = cloneDeep(normalizedModelValue.value);
   newForm[field] = value;
   emit('update:model-value', newForm);
@@ -189,17 +211,42 @@ onMounted(() => {
   }
 
   autocomplete = new window.google.maps.places.Autocomplete(
-    address1Input.value,
-    {
-      fields: ['address_components'],
-      types: ['address'],
-      componentRestrictions: { country: 'ca' },
-    }
+    address1Input.value
   );
 
+  setAutocompleteOptions();
+
   autocomplete.addListener('place_changed', fillAddress);
 });
 
+watch(
+  () => props.modelValue?.country + ' ' + props.restrictCountry,
+  () => {
+    setAutocompleteOptions();
+  }
+);
+
+function setAutocompleteOptions() {
+  if (!autocomplete) {
+    return;
+  }
+
+  const options = {
+    fields: ['address_components'],
+    types: ['address'],
+  } as any;
+
+  if (props.restrictCountry) {
+    if (normalizedCountry.value) {
+      options.componentRestrictions = {
+        country: normalizedCountry.value,
+      };
+    }
+  }
+
+  autocomplete.setOptions(options);
+}
+
 function fillAddress() {
   if (!autocomplete) {
     return;

package/src/components/BaseMediaGallery.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="itemsRef">
+    <vuedraggable
+      :model-value="modelValue"
+      group="media"
+      item-key="id"
+      tag="div"
+      :disabled="disabled"
+      class="-m-1 flex flex-wrap"
+      handle=".handle"
+      @update:model-value="onDragUpdate"
+    >
+      <template #item="{ element, index }">
+        <div :style="{ width: itemWidth }" class="p-1">
+          <BaseMediaGalleryItem
+            :media="element"
+            :show-remove="!disabled"
+            :disabled="disabled"
+            :draggable="draggable"
+            @remove="$emit('remove', index)"
+          >
+            {{ element.file_name }}
+          </BaseMediaGalleryItem>
+        </div>
+      </template>
+    </vuedraggable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { useElementSize } from '@vueuse/core';
+import { PropType } from 'vue';
+import vuedraggable from 'vuedraggable';
+import BaseMediaGalleryItem from './BaseMediaGalleryItem.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Object as PropType<(Media | UploadedFile)[]>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 140,
+    type: Number,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  itemMaxWidth: {
+    default: 220,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'remove']);
+
+// Item width
+
+const itemsRef = ref<HTMLElement | null>(null);
+const itemWidth = ref('220px');
+
+const itemsRefSize = useElementSize(itemsRef);
+
+watch(
+  () => itemsRefSize.width.value,
+  (width) => {
+    if (width <= 300) {
+      itemWidth.value = '100%';
+      return;
+    }
+
+    const numberOfItems = Math.floor(width / props.itemMaxWidth);
+
+    itemWidth.value = `${100 / numberOfItems}%`;
+  }
+);
+
+function onDragUpdate(value: (Media | UploadedFile)[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('update:modelValue', value);
+}
+</script>

package/src/components/BaseMediaGalleryItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="relative overflow-hidden rounded bg-white shadow ring-1 ring-black ring-opacity-10"
+  >
+    <div
+      class="flex"
+      :class="{
+        'pr-4': draggable,
+      }"
+    >
+      <div
+        v-if="draggable && !disabled"
+        class="handle flex shrink-0 cursor-move items-center justify-center border-r border-slate-300 bg-slate-200 px-1"
+      >
+        <BaseIcon icon="mdi:drag"></BaseIcon>
+      </div>
+      <div class="shrink-0">
+        <BaseMediaPreview class="h-12 w-12" :media="media" />
+      </div>
+      <component
+        :is="url ? 'a' : 'p'"
+        :href="url"
+        target="_blank"
+        class="flex grow items-center overflow-hidden px-3"
+      >
+        <div class="overflow-hidden text-left leading-tight">
+          <p class="mb-px grow truncate text-[13px] font-medium">
+            {{ name }}
+          </p>
+          <p class="shrink-0 text-[10px] text-slate-400">
+            {{ fileSize }}
+          </p>
+        </div>
+      </component>
+    </div>
+    <div v-if="showRemove" class="absolute top-px right-px">
+      <button
+        type="button"
+        class="rounded-full bg-white p-1 text-slate-500 hover:bg-slate-100"
+        @click="$emit('remove')"
+      >
+        <BaseIcon icon="heroicons:x-mark-20-solid" class="h-5 w-5"></BaseIcon>
+      </button>
+    </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 { Icon as BaseIcon } from '@iconify/vue';
+
+defineEmits(['remove']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const fileSize = computed(() => {
+  return fileSizeFormat(props.media.size);
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+</script>

package/src/components/BaseMediaItem.vue

@@ -10,7 +10,7 @@
         target="_blank"
         class="flex grow items-center overflow-hidden px-3"
       >
-        <div class="text-left leading-tight">
+        <div class="overflow-hidden text-left leading-tight">
           <p class="mb-px grow truncate text-[13px] font-medium">
             {{ name }}
           </p>

package/src/components/BaseMediaLibrary.stories.js

@@ -1,15 +1,27 @@
 import BaseApp from './BaseApp.vue';
 import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import { BaseIcon } from '../components';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '@/../.storybook/utils';
 
 const mediaModel = {
   id: 'xxxxx',
+  name: 'picture0-1-2dfjjje-23refg-45t',
   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,
 };
 
+const mediaModel2 = {
+  id: 'yyyyy',
+  name: 'photo-1678729465418-ee8127e8c5cd',
+  file_name: 'photo-1678729465418-ee8127e8c5cd.jpg',
+  mime_type: 'image/jpg',
+  url: 'https://images.unsplash.com/photo-1678729465418-ee8127e8c5cd?auto=format&fit=crop&w=800&q=80',
+  size: 430 * 1024,
+};
+
 export default {
   title: 'Form/BaseMediaLibrary',
   component: BaseMediaLibrary,
@@ -18,12 +30,24 @@ export default {
     min: 2,
     acceptedExtensions: ['jpg', 'jpeg', 'png', 'webp'],
     uploadUrl: 'https://faker.witify.io/api/todos/upload',
-    currentMedia: [
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([
       mediaModel,
+      mediaModel2,
       {
         id: '1',
         url: '',
         mime_type: 'application/pdf',
+        name: 'document',
         file_name: 'document.pdf',
         size: 40012,
       },
@@ -31,6 +55,7 @@ export default {
         id: '2',
         url: '',
         mime_type: 'application/excel',
+        name: 'finance-2022',
         file_name: 'finance-2022.xlsx',
         size: 5461,
       },
@@ -38,6 +63,7 @@ export default {
         id: '3',
         url: '',
         mime_type: 'image/png',
+        name: '34345-1',
         file_name: '34345-1.png',
         size: 40012,
       },
@@ -45,30 +71,101 @@ export default {
         id: '4',
         url: '',
         mime_type: 'audio/mp3',
+        name: 'test',
         file_name: 'test.mp3',
         size: 792834,
       },
-    ],
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseApp,
-    BaseMediaLibrary,
-  },
-  setup() {
-    const value = ref(null);
+    ]);
     return { args, value };
   },
   template: `
     <BaseMediaLibrary v-model="value" v-bind="args" />
+    <ShowValue :value="value" />
     <BaseApp></BaseApp>
   `,
 });
 
-export const Demo = Template.bind({});
-Demo.args = {};
+// Layout - Gallery
+
+export const LayoutGallery = Template.bind({});
+LayoutGallery.args = {
+  layout: 'gallery',
+};
+
+export const LayoutGalleryDisabled = Template.bind({});
+LayoutGalleryDisabled.args = {
+  layout: 'gallery',
+  disabled: true,
+};
+
+export const LayoutGalleryDraggable = Template.bind({});
+LayoutGalleryDraggable.args = {
+  layout: 'gallery',
+  draggable: true,
+};
+
+export const LayoutGalleryDraggableDisabled = Template.bind({});
+LayoutGalleryDraggableDisabled.args = {
+  layout: 'gallery',
+  disabled: true,
+  draggable: true,
+};
+
+// Layout - List
+
+export const LayoutList = Template.bind({});
+LayoutList.args = {
+  layout: 'list',
+};
+
+export const LayoutListDisabled = Template.bind({});
+LayoutListDisabled.args = {
+  layout: 'list',
+  disabled: true,
+};
+
+export const LayoutListDraggable = Template.bind({});
+LayoutListDraggable.args = {
+  layout: 'list',
+  draggable: true,
+};
+
+export const LayoutListDraggableDisabled = Template.bind({});
+LayoutListDraggableDisabled.args = {
+  layout: 'list',
+  disabled: true,
+  draggable: true,
+};
+
+// Layout - Images
+
+export const LayoutImages = Template.bind({});
+LayoutImages.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+};
+
+export const LayoutImagesDisabled = Template.bind({});
+LayoutImagesDisabled.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  disabled: true,
+};
+
+export const LayoutImagesDraggable = Template.bind({});
+LayoutImagesDraggable.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  draggable: true,
+};
+
+export const LayoutImagesDraggableDisabled = Template.bind({});
+LayoutImagesDraggableDisabled.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  disabled: true,
+  draggable: true,
+};
 
 export const Crop = Template.bind({});
 Crop.args = {
@@ -89,12 +186,77 @@ MaxSize.args = {
   maxSize: 10 * 1024,
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
 export const Field = createFieldStory({
   component: BaseMediaLibrary,
   componentName: 'BaseMediaLibrary',
 });
+
+// Slots
+
+const SlotDefaultTemplate = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([mediaModel, mediaModel2]);
+    return { args, value };
+  },
+  template: `
+    <BaseMediaLibrary v-model="value" v-bind="args">
+      <template #default>
+        <div class="btn btn-lg w-full">
+          Upload!
+        </div>
+      </template>
+    </BaseMediaLibrary>
+
+    <ShowValue :value="value" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+export const SlotDefault = SlotDefaultTemplate.bind({});
+SlotDefault.args = {};
+
+const SlotListTemplate = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([mediaModel, mediaModel2]);
+    return { args, value };
+  },
+  template: `
+    <BaseMediaLibrary v-model="value" v-bind="args">
+      <template #list="{ modelValue, remove }">
+        <div v-for="(item, i) in modelValue" :key="item.id" class="mb-3">
+          <div class="flex items-center">
+            <div class="w-12 h-12 mr-4">
+              <img :src="item.url" class="w-full h-full object-cover" />
+            </div>  
+            <div class="flex-1">
+              <div class="text-sm font-semibold">{{ item.name }}</div>
+              <div class="text-xs text-gray-500">{{ item.file_name }}</div>
+            </div>
+            <div class="flex items-center">
+              <div class="text-xs text-gray-500 mr-2">{{ item.size }}</div>
+              <div class="text-xs text-gray-500 mr-2">{{ item.mime_type }}</div>
+            </div>  
+          </div>
+
+          <button type="button" @click="remove(i)" class="text-xs text-red-500">Remove</button> 
+        </div>
+      </template>
+    </BaseMediaLibrary>
+
+    <ShowValue :value="value" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+export const SlotList = SlotListTemplate.bind({});
+SlotList.args = {};