sprintify-ui 0.0.0

package/src/components/BaseTextarea.vue

@@ -0,0 +1,73 @@
+<template>
+  <textarea
+    :value="modelValue"
+    :type="type"
+    :name="name"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="required"
+    :rows="rows"
+    class="mb-0 block rounded"
+    @input="$emit('update:modelValue', transformInputValue($event))"
+  />
+</template>
+
+<script lang="ts" setup>
+import { get, isString, trim } from 'lodash';
+import { PropType } from 'vue';
+
+defineProps({
+  modelValue: {
+    required: true,
+    type: [String, undefined] as PropType<string | undefined>,
+  },
+  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,
+  },
+  rows: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+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);
+  }
+
+  return '';
+}
+</script>

package/src/components/BaseTextareaAutoresize.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="wrapper" class="wrapper">
+    <textarea
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      rows="1"
+      class="focus:outline-none focus:ring-0"
+      @input="onInput"
+      @keyup="onKeyUp"
+      @keydown="onKeyDown"
+      @focus="onFocus"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defineComponent, inject } from 'vue';
+
+const keys = {} as { [key: string]: boolean };
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      default: '',
+      type: String,
+    },
+    placeholder: {
+      default: '',
+      type: String,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+  },
+  emits: ['update:modelValue', 'submit', 'focus', 'input'],
+  setup() {
+    const mobile = inject('mobile') as boolean;
+    return {
+      mobile,
+    };
+  },
+  watch: {
+    modelValue(value: string) {
+      this.updateReplicatedValue(value);
+    },
+  },
+  methods: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onInput(e: any) {
+      const value = e.target.value ?? '';
+      this.$emit('update:modelValue', value);
+      this.$emit('input', e);
+      this.updateReplicatedValue(value);
+    },
+    updateReplicatedValue(value: string) {
+      const wrapper = this.$refs.wrapper as HTMLElement;
+      wrapper.dataset.replicatedValue = value;
+    },
+    onKeyDown(event: any) {
+      keys[event.key as number] = true;
+
+      if (keys['Enter'] && !keys['Shift'] && !this.mobile) {
+        this.$emit('submit');
+        event.preventDefault();
+      }
+    },
+    onKeyUp(event: any) {
+      delete keys[event.key];
+    },
+    onFocus(event: any) {
+      this.$emit('focus', event);
+    },
+  },
+});
+</script>
+
+<style lang="postcss" scoped>
+.wrapper {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+}
+.wrapper::after {
+  /* Note the weird space! Needed to prevent jumpy behavior */
+  content: attr(data-replicated-value) ' ';
+
+  /* This is how textarea text behaves */
+  white-space: pre-wrap;
+
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+}
+.wrapper > textarea {
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  resize: none;
+
+  @apply focus:outline-none;
+  @apply focus-visible:outline-none;
+}
+.wrapper > textarea,
+.wrapper::after {
+  /* Identical styling required!! */
+  padding: 0.5rem;
+  font: inherit;
+
+  @apply text-base;
+  @apply max-h-28;
+  @apply border-transparent;
+  @apply bg-slate-100;
+  @apply rounded-lg;
+
+  /* Place on top of each other */
+  grid-area: 1 / 1 / 2 / 2;
+}
+</style>

package/src/components/BaseTitle.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="flex w-full space-x-4">
+    <div v-if="back">
+      <router-link
+        :to="back"
+        class="block rounded-full border border-slate-200 bg-white p-2 shadow duration-150 hover:bg-slate-100"
+      >
+        <Icon class="h-6 w-6" icon="mdi:chevron-left" />
+      </router-link>
+    </div>
+    <div class="grow sm:flex sm:items-start">
+      <div class="sm:flex-auto">
+        <component :is="`h${level}`" :class="titleClass">
+          {{ title }}
+        </component>
+        <p v-if="subtitle" :class="subtitleClass">
+          {{ subtitle }}
+        </p>
+      </div>
+      <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+export default defineComponent({
+  props: {
+    title: {
+      required: true,
+      type: String,
+    },
+    subtitle: {
+      default: '',
+      type: String,
+    },
+    level: {
+      default: 1,
+      type: Number,
+    },
+    back: {
+      default: '',
+      type: [String, Object] as PropType<RouteLocationRaw>,
+    },
+  },
+  computed: {
+    titleClass(): string {
+      let classes =
+        'font-display md:leading-tight font-semibold text-slate-900';
+
+      if (this.level == 1) {
+        classes += ' md:text-3xl text-3xl leading-9';
+      }
+
+      if (this.level == 2) {
+        classes += ' md:text-xl text-xl leading-6';
+      }
+
+      return classes;
+    },
+    subtitleClass(): string {
+      let classes = 'mt-1 text-slate-600';
+
+      if (this.level == 1) {
+        classes += ' text-base leading-5';
+      }
+
+      if (this.level == 2) {
+        classes += ' text-base leading-5';
+      }
+
+      return classes;
+    },
+  },
+});
+</script>

package/src/components/BaseWordCount.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="max && (!min || text.length >= min)"
+    class="text-sm"
+    :class="{
+      'text-slate-500': text.length <= max,
+      'text-red-600': text.length > max,
+    }"
+  >
+    {{ text.length }}/{{ max }}
+  </div>
+  <div v-if="min && text.length < min" class="text-sm text-red-600">
+    {{ $t('sui.min_x_characters', { x: min }) }} ({{ text.length }}/{{ min }})
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    text: {
+      required: true,
+      type: String,
+    },
+    min: {
+      default: undefined,
+      type: Number,
+    },
+    max: {
+      default: undefined,
+      type: Number,
+    },
+  },
+});
+</script>

package/src/components/SlotComponent.ts

@@ -0,0 +1,37 @@
+import { DefineComponent, defineComponent, h } from 'vue';
+
+/**
+ * Base component to manually render the slot of component
+ */
+export default defineComponent({
+  name: 'SlotComponent',
+  props: {
+    component: {
+      type: Object,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'default',
+    },
+    props: {
+      required: true,
+      type: Object,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  render() {
+    let slots = (this.component as DefineComponent).$slots;
+
+    if (slots == undefined) {
+      slots = (this.component as DefineComponent).slots;
+    }
+
+    const slot = slots[this.name](this.props);
+
+    return h(this.tag, {}, slot);
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,5 @@
+import BaseButton from './BaseButton.vue'
+
+export {
+  BaseButton,
+}

package/src/composables/breakpoints.ts

@@ -0,0 +1,6 @@
+import { useBreakpoints as useBase } from '@vueuse/core';
+import breakpoints from '../../config/breakpoints.json';
+
+export function useBreakpoints() {
+  return useBase(breakpoints);
+}

package/src/composables/modal.ts

@@ -0,0 +1,77 @@
+import { disableScroll, enableScroll } from 'src/utils';
+import { Ref } from 'vue';
+
+export function useModal(
+  modelValue: Ref<boolean>,
+  scrollable: Ref<HTMLElement | null>,
+  emit: any
+) {
+  const mounted = ref(false);
+
+  watch(
+    () => modelValue.value,
+    () => {
+      init();
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    mounted.value = true;
+    init();
+  });
+
+  onBeforeUnmount(() => {
+    deactivate();
+  });
+
+  function init() {
+    if (!mounted.value) {
+      return;
+    }
+
+    if (modelValue.value) {
+      activate();
+    } else {
+      deactivate();
+    }
+  }
+
+  function activate() {
+    disableScroll(scrollable.value);
+    window.addEventListener('keydown', onKeydown);
+  }
+
+  function deactivate() {
+    enableScroll();
+    window.removeEventListener('keydown', onKeydown);
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.code == 'Escape') {
+      if (modelValue) {
+        close();
+      }
+    }
+  }
+
+  const animationClasses = ref('');
+
+  function refuseAnimation() {
+    animationClasses.value = '';
+    setTimeout(() => {
+      animationClasses.value = 'animate-shake';
+    });
+  }
+
+  function close() {
+    animationClasses.value = '';
+    emit('update:modelValue', false);
+  }
+
+  return {
+    close,
+    refuseAnimation,
+    animationClasses,
+  };
+}

package/src/constants/MyConstants.ts

@@ -0,0 +1 @@
+export const MAGIC_NUM = 100

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+import * as MyConstants from './MyConstants'
+
+export {
+  MyConstants
+}

package/src/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    route: (name: string, options?: any) => string;
+  }
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+import axios, { AxiosInstance } from 'axios';
+import { App } from 'vue';
+import * as components from './components';
+import QueryString from 'qs';
+import { createI18n, I18n } from 'vue-i18n';
+import en from '@/lang/en.json';
+import fr from '@/lang/fr.json';
+
+const messages = { en, fr };
+
+interface SprintifyUIConfig {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  i18n?: I18n<typeof messages, {}, {}, string, true>;
+  http?: AxiosInstance;
+  upload_url?: string;
+  formatQueryString?: (params: Record<string, any>) => string;
+  parseQueryString?: (params: string) => Record<string, any>;
+}
+
+const pluginConfig = {
+  i18n: createI18n({
+    messages: { en, fr },
+  }),
+  http: axios.create(),
+  upload_url: '/api/upload',
+  formatQueryString(params: Record<string, any>) {
+    return QueryString.stringify(params, {
+      arrayFormat: 'comma',
+      encode: import.meta.env.PROD ? true : false,
+    });
+  },
+  parseQueryString(params: string): Record<string, any> {
+    return QueryString.parse(params);
+  },
+};
+
+function install(app: App, config: SprintifyUIConfig) {
+  for (const key in components) {
+    // @ts-expect-error Will throw
+    app.component(key, components[key]);
+  }
+
+  if (config.i18n) {
+    pluginConfig.i18n = config.i18n;
+  }
+
+  if (config.http) {
+    pluginConfig.http = config.http;
+  }
+
+  if (config.upload_url) {
+    pluginConfig.upload_url = config.upload_url;
+  }
+
+  if (config.formatQueryString) {
+    pluginConfig.formatQueryString = config.formatQueryString;
+  }
+
+  if (config.parseQueryString) {
+    pluginConfig.parseQueryString = config.parseQueryString;
+  }
+}
+
+export default { install };
+
+export * from './components';
+export * from './constants';
+export * from './utils';
+
+export { pluginConfig as config };

package/src/lang/en.json

@@ -0,0 +1,56 @@
+{
+  "sui": {
+    "and": "and",
+    "apply_filters": "Apply filters",
+    "autocomplete_placeholder": "Type to start your search",
+    "cancel": "Cancel",
+    "clear": "Clear",
+    "click_or_select_date": "Click or select date",
+    "click_to_copy": "Click to copy",
+    "columns": "Columns",
+    "confirm": "Confirm",
+    "copied": "Copied",
+    "create_new": "Create new",
+    "day": "Day",
+    "delete_record": "Delete the record",
+    "delete_record_description": "Are you sure to delete this record? This action is irreversible.",
+    "deselect_all": "Deselect all",
+    "drop_or_click_to_upload": "Drop or click to upload",
+    "error": "Error",
+    "file_must_be_of_type": "The file must be of type",
+    "filters": "Filters",
+    "min_x_characters": "{x} characters minimum",
+    "month": "Month",
+    "next": "Next",
+    "next_month": "Next month",
+    "nothing_found": "Nothing found",
+    "or": "or",
+    "pagination_detail": "{page} records of {total}",
+    "previous": "Previous",
+    "previous_month": "Previous month",
+    "read_more": "Read more",
+    "remove": "Remove",
+    "remove_file": "Remove file?",
+    "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",
+    "select_an_item": "Select an item",
+    "select_an_option": "Select an option",
+    "success": "Success",
+    "the_file_size_must_not_exceed_x": "The file size must not exceed {x}",
+    "the_file_type_is_invalid": "The file type is invalid",
+    "type_to_start_your_search": "Type to start your search",
+    "up_to_x": "Up to {x}",
+    "whoops": "Whoops",
+    "x_rows_selected": "1 item selected | {count} items selected",
+    "year": "Year",
+    "yes_delete": "Yes, delete",
+    "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items",
+    "units": {
+      "b": "B",
+      "gb": "GB",
+      "kb": "kB",
+      "mb": "MB",
+      "tb": "TB"
+    }
+  }
+}

package/src/lang/fr.json

@@ -0,0 +1,56 @@
+{
+  "sui": {
+    "and": "et",
+    "apply_filters": "Appliquer les filtres",
+    "autocomplete_placeholder": "Tapez pour lancer votre recherche",
+    "cancel": "Annuler",
+    "clear": "Effacer",
+    "click_or_select_date": "Cliquez ou sélectionnez la date",
+    "click_to_copy": "Cliquez pour copier",
+    "columns": "Colonnes",
+    "confirm": "Confirmer",
+    "copied": "Copié",
+    "create_new": "Créer un nouveau",
+    "day": "Jour",
+    "delete_record": "Supprimer l'item",
+    "delete_record_description": "Voulez-vous vraiment supprimer cet item ? \nCette action est irréversible.",
+    "deselect_all": "Tout déselectionner",
+    "drop_or_click_to_upload": "Déposez ou cliquez pour télécharger",
+    "error": "Erreur",
+    "file_must_be_of_type": "Le fichier doit être de type",
+    "filters": "Filtres",
+    "min_x_characters": "{x} caractères minimum",
+    "month": "Mois",
+    "next": "Suivant",
+    "next_month": "Mois prochain",
+    "nothing_found": "Rien n'a été trouvé",
+    "or": "ou",
+    "pagination_detail": "{page} items de {total}",
+    "previous": "Précédent",
+    "previous_month": "Mois précédent",
+    "read_more": "Lire la suite",
+    "remove": "Retirer",
+    "remove_file": "Retirer le fichier?",
+    "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",
+    "select_an_item": "Sélectionner un élément",
+    "select_an_option": "Sélectionner une option",
+    "success": "Succès",
+    "the_file_size_must_not_exceed_x": "La taille du fichier ne doit pas dépasser {x}",
+    "the_file_type_is_invalid": "Le type de fichier n'est pas valide",
+    "type_to_start_your_search": "Tapez pour lancer votre recherche",
+    "up_to_x": "Jusqu'à {x}",
+    "whoops": "Oups",
+    "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
+    "year": "An",
+    "yes_delete": "Oui, supprimer",
+    "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments",
+    "units": {
+      "b": "o",
+      "gb": "Go",
+      "kb": "Ko",
+      "mb": "Mo",
+      "tb": "To"
+    }
+  }
+}

package/src/types/Media.ts

@@ -0,0 +1,9 @@
+interface Media {
+  id: string;
+  file_name: string;
+  size: number;
+  mime_type: string;
+  url: string;
+}
+
+export { Media };

package/src/types/UploadedFile.ts

@@ -0,0 +1,10 @@
+interface UploadedFile {
+  id: string;
+  file_name: string;
+  size: number;
+  mime_type: string;
+  original_file?: File;
+  data_url?: string;
+}
+
+export { UploadedFile };

package/src/types/User.ts

@@ -0,0 +1,7 @@
+interface User {
+  full_name: string;
+  email?: string;
+  avatar_url?: string;
+}
+
+export { User };