sprintify-ui 0.0.0

package/src/components/BaseFileUploader.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="relative">
+    <BaseFilePicker
+      :button-class="buttonClass"
+      :disabled="uploading || disabled"
+      :accept="accept"
+      @upload="onPictureUpload"
+    >
+      <template #default="slotProps">
+        <slot
+          name="default"
+          :uploading="uploading"
+          :selecting="slotProps.selecting"
+          :dragging="slotProps.dragging"
+          :disabled="slotProps.disabled"
+        />
+        <slot
+          name="loading"
+          :uploading="uploading"
+          :selecting="slotProps.selecting"
+          :dragging="slotProps.dragging"
+          :disabled="slotProps.disabled"
+        >
+          <BaseLoadingCover
+            icon-class="text-primary-600 w-6 h-6"
+            :model-value="loading || uploading || slotProps.selecting"
+          />
+        </slot>
+      </template>
+    </BaseFilePicker>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { config } from 'src';
+import { PropType } from 'vue';
+import { UploadedFile } from '@/types/UploadedFile';
+import { toHumanList, fileSizeFormat } from '../utils';
+import { useNotificationsStore } from '../stores/notifications';
+
+const http = config.http;
+const i18n = useI18n();
+const notifications = useNotificationsStore();
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+  beforeUpload: {
+    default: (): boolean => {
+      return true;
+    },
+    type: Function as PropType<() => boolean>,
+  },
+  buttonClass: {
+    default: '',
+    type: String,
+  },
+  maxSize: {
+    default: 1024 * 1024 * 20, // 20 MB,
+    type: Number,
+  },
+  accept: {
+    default: undefined,
+    type: String,
+  },
+  acceptedExtensions: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
+});
+
+const emit = defineEmits([
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload:end',
+]);
+
+const uploading = ref(false);
+
+async function onPictureUpload(file: File) {
+  if (!(await props.beforeUpload())) {
+    return;
+  }
+
+  try {
+    if (file.size > props.maxSize) {
+      notifications.push({
+        color: 'danger',
+        title: i18n.t('sui.error'),
+        text: i18n.t('sui.the_file_size_must_not_exceed_x', {
+          x: fileSizeFormat(props.maxSize),
+        }),
+      });
+      return;
+    }
+
+    const extension = file.name.split('.').pop();
+
+    if (
+      extension &&
+      props.acceptedExtensions &&
+      props.acceptedExtensions.length
+    ) {
+      if (!props.acceptedExtensions.includes(extension)) {
+        notifications.push({
+          color: 'danger',
+          title: i18n.t('sui.error'),
+          text:
+            i18n.t('sui.the_file_type_is_invalid') +
+            ' ' +
+            i18n.t('sui.file_must_be_of_type') +
+            ' ' +
+            toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
+            '.',
+        });
+        return;
+      }
+    }
+
+    const formData = new FormData();
+
+    formData.append('file', file);
+
+    uploading.value = true;
+    emit('upload:start');
+
+    const response = await http.post(config.upload_url, formData);
+
+    const payload = response.data as UploadedFile;
+    payload.original_file = file;
+
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      payload.data_url = e.target.result;
+      onSuccess(payload);
+    };
+
+    reader.onerror = (e: any) => {
+      onSuccess(payload);
+    };
+
+    if (payload.mime_type.includes('image')) {
+      reader.readAsDataURL(file);
+    } else {
+      onSuccess(payload);
+    }
+  } catch (e: unknown) {
+    emit('upload:fail');
+  } finally {
+    emit('upload:end');
+    uploading.value = false;
+  }
+}
+
+function onSuccess(payload: any) {
+  emit('upload:success', payload);
+}
+</script>

package/src/components/BaseInput.vue

@@ -0,0 +1,82 @@
+<template>
+  <input
+    ref="input"
+    :value="modelValue"
+    :type="type"
+    :name="name"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    class="rounded"
+    :autocomplete="autocomplete ? 'on' : 'off'"
+    @keydown.enter="onEnter"
+    @input="$emit('update:modelValue', transformInputValue($event))"
+  />
+</template>
+
+<script lang="ts" setup>
+import { get, isNumber, isString, trim } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, Number, null] as PropType<string | number | null>,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  autocomplete: {
+    default: true,
+    type: Boolean,
+  },
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+defineEmits(['update:modelValue']);
+
+function transformInputValue(event: Event | null): string | null {
+  if (event === null) {
+    return null;
+  }
+
+  const value = get(event, 'target.value', null);
+
+  if (isString(value)) {
+    return trim(value);
+  }
+
+  if (isNumber(value)) {
+    return trim(value + '');
+  }
+
+  return '';
+}
+
+function onEnter(e: Event) {
+  if (props.preventSubmit) {
+    e.preventDefault();
+    return;
+  }
+}
+</script>

package/src/components/BaseInputLabel.vue

@@ -0,0 +1,26 @@
+<template>
+  <label :class="classes"
+    >{{ label }}<span v-if="required" class="text-red-600"> *</span></label
+  >
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    required: {
+      default: false,
+      type: Boolean,
+    },
+    label: {
+      required: true,
+      type: String,
+    },
+    classes: {
+      default: 'form-input-label mb-1',
+      type: String,
+    },
+  },
+});
+</script>

package/src/components/BaseLoadingCover.vue

@@ -0,0 +1,84 @@
+<template>
+  <Transition
+    :enter-active-class="'transition ease-out ' + duration"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    :leave-active-class="'transition ease-in ' + duration"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="showSpinner"
+      class="absolute inset-0 flex h-full w-full items-center justify-center"
+    >
+      <div class="absolute h-full w-full" :class="backdropClass" />
+      <svg
+        v-if="icon == 'line'"
+        class="animate-spin"
+        :class="iconClass"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+        />
+      </svg>
+      <BaseSpinner v-else-if="icon == 'spinner'" :class="iconClass" />
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import BaseSpinner from './BaseSpinner.vue';
+
+const props = defineProps({
+  modelValue: {
+    default: true,
+    type: Boolean,
+  },
+  backdropClass: {
+    default: 'bg-white',
+    type: String,
+  },
+  iconClass: {
+    default: 'text-blue-500 w-10 h-10',
+    type: String,
+  },
+  icon: {
+    default: 'line',
+    type: String as PropType<'line' | 'spinner'>,
+  },
+  duration: {
+    default: 'duration-300',
+    type: String,
+  },
+  delay: {
+    default: 330,
+    type: Number,
+  },
+});
+
+let timeoutId = null as number | null;
+
+const showSpinner = ref(false);
+
+watch(
+  () => props.modelValue,
+  (newValue: boolean) => {
+    if (newValue) {
+      timeoutId = setTimeout(() => {
+        showSpinner.value = true;
+      }, props.delay);
+    } else {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      showSpinner.value = false;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>

package/src/components/BaseLoadingPage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="fixed inset-0 z-loading flex h-full w-full items-center justify-center bg-white"
+  >
+    <div class="flex flex-col items-center">
+      <img
+        :src="'/img/logo/icon-color.svg'"
+        alt="Loading"
+        class="mb-14 w-16 animate-pulse"
+      />
+      <svg class="h-6 w-6 animate-spin text-primary-500" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+        />
+      </svg>
+    </div>
+  </div>
+</template>

package/src/components/BaseMediaLibrary.vue

@@ -0,0 +1,281 @@
+<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"
+      class="w-full"
+      button-class="w-full"
+      :accept="accept"
+      :accepted-extensions="acceptedExtensions"
+      @upload:start="$emit('upload:start', $event)"
+      @upload:end="$emit('upload:end', $event)"
+      @upload:fail="$emit('upload:fail', $event)"
+      @upload:success="onUploadSuccess"
+    >
+      <template #default="baseFileUploaderProps">
+        <slot
+          name="default"
+          v-bind="baseFileUploaderProps"
+          :max-size="maxSize"
+          :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="[
+              baseFileUploaderProps.dragging ? 'bg-slate-100' : 'bg-white',
+              baseFileUploaderProps.disabled ? 'opacity-25' : '',
+            ]"
+          >
+            <div class="rounded-full bg-slate-200 p-2">
+              <Icon
+                icon="heroicons:arrow-up-on-square"
+                class="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) })
+                    )
+                  }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </template>
+    </BaseFileUploader>
+
+    <p class="text-red-600">
+      {{ globalErrorMessage }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadedFile } from '@/types/UploadedFile';
+import { Media } from '@/types/Media';
+import _, { cloneDeep, get } 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';
+
+const i18n = useI18n();
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
+
+const emit = defineEmits([
+  'update',
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload:end',
+]);
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: Object as PropType<MediaLibraryPayload | null | undefined>,
+  },
+  name: {
+    required: true,
+    type: String,
+  },
+  min: {
+    type: Number,
+    default: undefined,
+  },
+  max: {
+    default: 100,
+    type: Number,
+  },
+  maxSize: {
+    default: 20 * 1024 * 1024,
+    type: Number,
+  },
+  accept: {
+    default: undefined,
+    type: String,
+  },
+  acceptedExtensions: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
+  currentMedia: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Media[]>,
+  },
+  errors: {
+    default: undefined,
+    type: Object as PropType<Record<string, string[]>>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+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)
+  ) {
+    return props.modelValue;
+  }
+
+  return {
+    to_add: [],
+    to_remove: [],
+  };
+});
+
+const numberOfFiles = computed((): number => {
+  return (
+    currentMediaInternal.value.length +
+    (props.modelValue?.to_add.length ?? 0) -
+    (props.modelValue?.to_remove.length ?? 0)
+  );
+});
+
+sync(normalizedModelValue.value);
+
+function onUploadSuccess(file: UploadedFile) {
+  if (file == null) {
+    return;
+  }
+
+  if (numberOfFiles.value >= props.max && props.max > 1) {
+    notifications.push({
+      title: i18n.t('sui.whoops'),
+      text: i18n.t('sui.you_can_upload_up_to_n_files', { count: props.max }),
+      color: 'danger',
+    });
+    return;
+  }
+
+  const modelValue = cloneDeep(normalizedModelValue.value);
+
+  if (props.max == 1) {
+    // Remove everything...
+    modelValue.to_remove.push(...currentMediaInternal.value.map((m) => m.id));
+    modelValue.to_add = [];
+    currentMediaInternal.value = [];
+  }
+
+  modelValue.to_add.push(file);
+
+  sync(modelValue);
+
+  emit('upload:success', file);
+}
+
+function promptRemoveUploadedFile(index: number, length = 1) {
+  dialogs.push({
+    title: i18n.t('sui.remove_file'),
+    message: i18n.t('sui.remove_file_description'),
+    color: 'warning',
+    onConfirm() {
+      removeUploadedFile(index, length);
+    },
+  });
+}
+
+function promptRemoveMedia(index: number) {
+  dialogs.push({
+    title: i18n.t('sui.remove_file'),
+    message: i18n.t('sui.remove_file_description'),
+    color: 'warning',
+    onConfirm() {
+      removeMedia(index);
+    },
+  });
+}
+
+function removeUploadedFile(index: number, length = 1) {
+  const modelValue = cloneDeep(normalizedModelValue.value);
+
+  modelValue?.to_add.splice(index, length);
+
+  sync(modelValue);
+}
+
+function removeMedia(index: number) {
+  const media = currentMediaInternal.value[index];
+
+  if (media) {
+    const modelValue = cloneDeep(normalizedModelValue.value);
+
+    modelValue.to_remove.push(media.id);
+
+    sync(modelValue);
+
+    currentMediaInternal.value.splice(index, 1);
+  }
+}
+
+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');
+  }
+  return '';
+});
+</script>