sprintify-ui 0.4.4 → 0.4.6

package/src/components/BaseCalendar.stories.js

@@ -0,0 +1,202 @@
+import BaseCalendar from './BaseCalendar.vue';
+
+export default {
+  title: 'Components/BaseCalendar',
+  component: BaseCalendar,
+  args: {},
+  argTypes: {
+    locale: {
+      control: { type: 'select' },
+      options: ['en', 'fr']
+    }
+  },
+};
+
+function getDateByDay(day) {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth() + 1;
+
+  const formattedMonth = month < 10 ? `0${month}` : month;
+  const formattedDay = day < 10 ? `0${day}` : day;
+
+  const dateString = `${year}-${formattedMonth}-${formattedDay}`;
+  return dateString;
+}
+
+const events = [
+  { id: 1, title: 'Reserved', start: getDateByDay(15) + ' 10:30:00', end: getDateByDay(20) + ' 13:25:00' },
+  { id: 2, title: 'Accepted', start: getDateByDay(11), end: getDateByDay(17), backgroundColor: 'green', borderColor: 'green' },
+  { id: 3, title: 'Blocked', start: getDateByDay(5), end: getDateByDay(5), backgroundColor: '#000', borderColor: '#000' },
+  { id: 4, title: 'Removed', start: getDateByDay(25), end: getDateByDay(26), backgroundColor: 'orange', borderColor: 'red', textColor: 'blue' },
+]
+
+const Template = (args) => ({
+  components: { BaseCalendar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCalendar v-bind="args" class="mb-3">
+    </BaseCalendar>
+  `,
+});
+
+
+const TemplateWithAllEvents = (args) => ({
+  components: { BaseCalendar },
+  setup() {
+    function onSelect(payload) {
+      alert('selected: start = ' + payload.start + ', end = ' + payload.end);
+    }
+
+    function onClick(payload) {
+      alert('clicked: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+
+    function onAdd() {
+      alert('added')
+    }
+
+    function onChange(payload) {
+      alert('changed: start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+
+    function onResize(payload) {
+      alert('resized: start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+
+    function onDrop(payload) {
+      alert('dropped: start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+
+    function onDateClick(payload) {
+      alert('date clicked = ' + payload.date);
+    }
+
+    return { args, onSelect, onClick, onAdd, onChange, onResize, onDrop, onDateClick };
+  },
+  template: `
+    <BaseCalendar 
+      v-bind="args" 
+      class="mb-3"
+      @select="onSelect"
+      @click="onClick"
+      @add="onAdd"
+      @change="onChange"
+      @resize="onResize"
+      @drop="onDrop"
+      @dateClick="onDateClick"
+    >
+    </BaseCalendar>
+  `,
+});
+
+const TemplateWithHoverEvents = (args) => ({
+  components: { BaseCalendar },
+  setup() {
+    function onMouseenter(payload) {
+      alert('mouseenter: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+
+    function onMouseleave(payload) {
+      alert('mouseleave: title = ' + payload.event.title + ', start = ' + payload.event.start + ', end = ' + payload.event.end)
+    }
+    return { args, onMouseenter, onMouseleave };
+  },
+  template: `
+    <BaseCalendar 
+      v-bind="args" 
+      class="mb-3"
+      @mouseenter="onMouseenter"
+      @mouseleave="onMouseleave"
+    >
+    </BaseCalendar>
+  `,
+});
+
+const TemplateWithSlot = (args) => ({
+  components: { BaseCalendar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCalendar v-bind="args" class="mb-3">
+      <template #eventContent="{ event }">
+        <div class="px-3 py-2">
+          <div class="text-center">
+            {{ event.title }} 🤓🤓🤓
+          </div>
+        </div>
+      </template>
+    </BaseCalendar>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+};
+
+export const Event = TemplateWithAllEvents.bind({});
+Event.args = {
+  events: events,
+};
+
+export const HoverEvent = TemplateWithHoverEvents.bind({});
+HoverEvent.args = {
+  events: events
+};
+
+export const CustomSlot = TemplateWithSlot.bind({});
+CustomSlot.args = {
+  events: events
+};
+
+export const ToolbarHeaderAll1 = Template.bind({});
+ToolbarHeaderAll1.args = {
+  headerToolbarLeft: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarCenter: 'title',
+  headerToolbarRight: 'prev,next today',
+};
+
+export const ToolbarHeaderAll2 = Template.bind({});
+ToolbarHeaderAll2.args = {
+  headerToolbarLeft: 'title',
+  headerToolbarCenter: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarRight: 'prev,next today',
+};
+
+export const ToolbarHeaderAll3 = Template.bind({});
+ToolbarHeaderAll3.args = {
+  headerToolbarLeft: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarCenter: 'prev,next today',
+  headerToolbarRight: 'title',
+};
+
+export const ToolbarHeaderAll4 = Template.bind({});
+ToolbarHeaderAll4.args = {
+  headerToolbarLeft: 'prev,next today',
+  headerToolbarCenter: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+  headerToolbarRight: 'title',
+};
+
+export const ToolbarHeaderAll5 = Template.bind({});
+ToolbarHeaderAll5.args = {
+  headerToolbarLeft: 'title',
+  headerToolbarCenter: 'prev,next today',
+  headerToolbarRight: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+};
+
+export const ToolbarHeaderAll6 = Template.bind({});
+ToolbarHeaderAll6.args = {
+  headerToolbarLeft: 'prev,next today',
+  headerToolbarCenter: 'title',
+  headerToolbarRight: 'multiMonthYear dayGridMonth timeGridWeek timeGridDay listWeek',
+};
+
+export const ToolbarHeaderSome = Template.bind({});
+ToolbarHeaderSome.args = {
+  headerToolbarRight: 'dayGridMonth timeGridWeek',
+  headerToolbarCenter: 'title',
+  headerToolbarLeft: 'prev,next'
+};

package/src/components/BaseCalendar.vue

@@ -0,0 +1,216 @@
+<template>
+  <FullCalendar
+    ref="fullCalendar"
+    class="base-full-calendar"
+    :options="calendarOptions"
+  >
+    <template
+      v-if="$slots.eventContent"
+      #eventContent="slotProps"
+    >
+      <slot
+        name="eventContent"
+        v-bind="{ ...slotProps }"
+      />
+    </template>
+  </FullCalendar>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list';
+import multiMonthPlugin from '@fullcalendar/multimonth'
+import { useI18nStore } from '@/stores/i18n';
+import { PropType } from 'vue';
+import { CalendarEvent } from '../types/CalendarEvent';
+import { CalendarOptions } from '@fullcalendar/core';
+
+const emit = defineEmits([
+  'click',
+  'mouseenter',
+  'mouseleave',
+  'select',
+  'add',
+  'change',
+  'resize',
+  'drop',
+  'dateClick',
+  'remove',
+]);
+
+const fullCalendar = ref<typeof FullCalendar | null>(null);
+
+const props = defineProps({
+  headerToolbarLeft: {
+    default: 'prev,next',
+    type: String,
+  },
+  headerToolbarCenter: {
+    default: 'title',
+    type: String,
+  },
+  headerToolbarRight: {
+    default: '',
+    type: String,
+  },
+  initialView: {
+    default: 'dayGridMonth',
+    type: String as PropType<'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek' | 'multiMonthPlugin'>,
+  },
+  eventDisplay: {
+    default: 'auto',
+    type: String as PropType<'auto' | 'block' | 'list-item' | 'background' | 'inverse-background' | 'none'>,
+  },
+  editable: {
+    default: true,
+    type: Boolean,
+  },
+  selectable: {
+    default: true,
+    type: Boolean,
+  },
+  dayMaxEvents: {
+    default: true,
+    type: Boolean,
+  },
+  weekends: {
+    default: true,
+    type: Boolean,
+  },
+  events: {
+    default: () => [],
+    type: Array as PropType<CalendarEvent[]>,
+  },
+  locale: {
+    default: '',
+    type: String
+  }
+});
+
+const internalLocale = computed(() => {
+  if (!props.locale) {
+    return useI18nStore().locale
+  }
+
+  return props.locale;
+})
+
+const calendarOptions = computed(() => {
+  return {
+    plugins: [
+      dayGridPlugin,
+      timeGridPlugin,
+      interactionPlugin,
+      listPlugin,
+      multiMonthPlugin
+    ],
+    headerToolbar: {
+      left: props.headerToolbarLeft,
+      center: props.headerToolbarCenter,
+      right: props.headerToolbarRight
+    },
+    initialView: props.initialView,
+    initialEvents: [],
+    buttonText: {
+      year: t('year'),
+      month: t('month'),
+      week: t('week'),
+      list: t('list'),
+      day: t('day'),
+      today: t('today'),
+      class: 'btn btn-primary'
+    },
+    locale: internalLocale.value,
+    editable: props.editable,
+    selectable: props.selectable,
+    dayMaxEvents: props.dayMaxEvents,
+    weekends: props.weekends,
+    eventDisplay: props.eventDisplay,
+    select: select,
+    eventClick: click,
+    eventMouseEnter: mouseenter,
+    eventMouseLeave: mouseleave,
+    eventAdd: add,
+    eventChange: change,
+    eventResize: resize,
+    eventDrop: drop,
+    eventRemove: remove,
+    dateClick: dateClick,
+    events: props.events,
+  } as CalendarOptions;
+});
+
+function select(payload: any) {
+  emit('select', payload);
+}
+
+function click(payload: any) {
+  emit('click', payload);
+}
+
+function mouseenter(payload: any) {
+  emit('mouseenter', payload);
+}
+
+function mouseleave(payload: any) {
+  emit('mouseleave', payload);
+}
+
+function add(payload: any) {
+  emit('add', payload);
+}
+
+function change(payload: any) {
+  emit('change', payload);
+}
+
+function resize(payload: any) {
+  emit('resize', payload);
+}
+
+function drop(payload: any) {
+  emit('drop', payload);
+}
+
+function dateClick(payload: any) {
+  emit('dateClick', payload);
+}
+
+function remove(payload: any) {
+  emit('remove', payload);
+}
+
+</script>
+<style lang="postcss">
+.base-full-calendar {
+  &.fc {
+    .fc-button-primary:disabled {
+      @apply btn btn-primary cursor-not-allowed;
+    }
+
+    .fc-button-primary {
+      @apply btn btn-primary;
+    }
+
+    .fc-button-primary:not(:disabled).fc-button-active {
+      @apply bg-primary-600 text-white border-primary-700
+    }
+
+    .fc-button-primary:not(:disabled):active {
+      @apply bg-primary-600 text-white border-primary-700
+    }
+
+    .fc-button-primary:hover {
+      @apply border-primary-700;
+    }
+
+    .fc-button-primary:focus {
+      @apply ring-4 ring-primary-200 !important;
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -19,6 +19,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClickOutside from './BaseClickOutside.vue';
 import BaseClipboard from './BaseClipboard.vue';
+import BaseCalendar from './BaseCalendar.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -117,6 +118,7 @@ export {
   BaseCharacterCounter,
   BaseClickOutside,
   BaseClipboard,
+  BaseCalendar,
   BaseColor,
   BaseContainer,
   BaseCounter,

package/src/lang/en.json

@@ -1,7 +1,10 @@
 {
   "cancel": "Cancel",
   "cropper": "Crop",
+  "day": "Day",
   "drag_to_reposition": "Drag to reposition",
+  "list": "List",
+  "month": "Month",
   "save": "Save",
   "sui": {
     "address": "Address",
@@ -85,5 +88,8 @@
     "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 {count} items"
-  }
+  },
+  "today": "Today",
+  "week": "Week",
+  "year": "Year"
 }

package/src/lang/fr.json

@@ -1,7 +1,10 @@
 {
   "cancel": "Fermer",
   "cropper": "Recadrer",
+  "day": "Jour",
   "drag_to_reposition": "Faites glisser pour repositionner",
+  "list": "Liste",
+  "month": "Mois",
   "save": "Sauvegarder",
   "sui": {
     "address": "Adresse",
@@ -85,5 +88,8 @@
     "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 {count} éléments"
-  }
+  },
+  "today": "Aujourd\\'hui",
+  "week": "Semaine",
+  "year": "Année"
 }

package/src/types/CalendarEvent.ts

@@ -0,0 +1,9 @@
+export interface CalendarEvent {
+  id: number;
+  title: string;
+  start: string;
+  end: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  textColor?: string;
+}

package/src/types/index.ts

@@ -10,6 +10,7 @@ export type Locales = { [locale: string]: string };
 
 export enum Method {
   post = 'post',
+  put = 'put',
   patch = 'patch',
 }