sprintify-ui 0.2.1 → 0.2.3

package/src/assets/flatpickr.css

@@ -0,0 +1,238 @@
+@import 'flatpickr/dist/flatpickr.min.css';
+
+/* Customise flatpickr */
+* {
+    --calendarPadding: 10px;
+    --daySize: 36px;
+    --daysWidth: calc(var(--daySize)*7);
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -8px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.flatpickr-calendar {
+    border: inherit;
+    @apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
+    padding: var(--calendarPadding);
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
+}
+
+@screen lg {
+    .flatpickr-calendar {
+        @apply left-0 right-auto;
+        margin-left: 0;
+    }
+}
+
+.flatpickr-right.flatpickr-calendar {
+    @apply right-0 left-auto;
+    margin-left: 0;
+}
+
+.flatpickr-calendar.animate.open {
+    animation: fpFadeInDown 200ms ease-out;
+}
+
+.flatpickr-calendar.static {
+    position: absolute;
+    top: calc(100% + 4px);
+}
+
+.flatpickr-calendar.static.open {
+    z-index: 20;
+}
+
+.flatpickr-days {
+    width: var(--daysWidth);
+}
+
+.dayContainer {
+    width: var(--daysWidth);
+    min-width: var(--daysWidth);
+    max-width: var(--daysWidth);
+}
+
+.flatpickr-day {
+    @apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
+    max-width: var(--daySize);
+    height: var(--daySize);
+    line-height: var(--daySize);
+}
+
+.flatpickr-day,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+    border: none;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply bg-transparent;
+}
+
+.flatpickr-day, 
+.flatpickr-day.prevMonthDay, 
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange,
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange,
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+    border-radius: 0;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply text-slate-400 dark:text-slate-500;
+}
+
+.rangeMode .flatpickr-day {
+    margin: 0;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+    @apply bg-primary-500 text-primary-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus,
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+    @apply bg-primary-400 text-primary-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: none;
+}
+
+.flatpickr-months {
+    align-items: center;
+    margin-top: -8px;
+    margin-bottom: 6px;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+    position: static;
+    height: auto;
+    @apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;    
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+    width: 7px;
+    height: 11px;
+    fill: currentColor;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+    @apply fill-current;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+    margin-left: -10px;
+}
+
+.flatpickr-months .flatpickr-next-month {
+    margin-right: -10px;
+}
+
+.flatpickr-months .flatpickr-month {
+    @apply text-slate-800 dark:text-slate-100;
+    height: auto;
+    line-height: inherit;
+}
+
+.flatpickr-current-month {
+    @apply text-sm font-medium;
+    position: static;
+    height: auto;
+    width: auto;
+    left: auto;
+    padding: 0;
+}
+
+.flatpickr-current-month span.cur-month {
+    @apply font-medium m-0;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+    background: none;
+}
+
+.flatpickr-current-month input.cur-year {
+    font-weight: inherit;
+    box-shadow: none !important;
+}
+
+.numInputWrapper:hover {
+    background: none;
+}
+
+.numInputWrapper span {
+    display: none;
+}
+
+span.flatpickr-weekday {
+    @apply text-slate-400 dark:text-slate-500 font-medium text-xs;
+}
+
+.flatpickr-calendar.arrowTop::before,
+.flatpickr-calendar.arrowTop::after,
+.flatpickr-calendar.arrowBottom::before,
+.flatpickr-calendar.arrowBottom::after {
+    display: none;
+}

package/src/assets/main.css

@@ -1,5 +1,6 @@
 @import "microtip/microtip.css";
 @import "./form.css";
+@import "./flatpickr.css";
 
 [aria-label][role~="tooltip"]::after {
   white-space: pre-line;

package/src/components/BaseDatePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="base-date-picker relative">
+  <div class="relative">
     <div
       class="pointer-events-none absolute top-0 left-0 flex h-[42px] items-center justify-center pl-2.5"
     >
@@ -42,7 +42,6 @@ import { DateTime } from 'luxon';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { useField } from '@/composables/field';
 import flatpickr from 'flatpickr';
-import 'flatpickr/dist/flatpickr.css';
 
 import { t } from '@/i18n';
 import { French } from 'flatpickr/dist/l10n/fr';
@@ -160,6 +159,7 @@ const flatpickrConfig = computed(() => {
     dateFormat: formatInternal.value,
     mode: props.mode,
     locale: locale.value,
+    monthSelectorType: 'static',
     minDate: props.minDate ?? undefined,
     maxDate: props.maxDate ?? undefined,
     noCalendar: props.noCalendar,
@@ -167,6 +167,8 @@ const flatpickrConfig = computed(() => {
     inline: props.inline,
     animate: false,
     time_24hr: true,
+    prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
+    nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
   } as any;
 });
 
@@ -277,101 +279,3 @@ function clear() {
   emitUpdate(null);
 }
 </script>
-
-<style lang="postcss">
-body .flatpickr-calendar {
-  width: 280px;
-  box-shadow: 1px 0 0 #cbd5e1, -1px 0 0 #cbd5e1, 0 1px 0 #cbd5e1,
-    0 -1px 0 #cbd5e1, 0 3px 13px rgb(0 0 0 / 10%);
-
-  &.inline {
-    width: 260px;
-    box-shadow: none;
-    border: none;
-    padding: 0;
-
-    .flatpickr-months {
-      width: 260px;
-    }
-
-    .flatpickr-innerContainer {
-      padding: 0;
-      width: 260px;
-    }
-  }
-
-  .dayContainer {
-    width: 260px;
-    max-width: 260px;
-    min-width: 260px;
-  }
-
-  .flatpickr-day {
-    height: 36px;
-    line-height: 36px;
-  }
-
-  .flatpickr-months {
-    width: 280px;
-    padding-top: 10px;
-
-    .flatpickr-prev-month,
-    .flatpickr-next-month {
-      top: 5px;
-    }
-
-    .flatpickr-prev-month {
-      left: 2px;
-    }
-
-    .flatpickr-next-month {
-      right: 2px;
-    }
-
-    .flatpickr-prev-month:hover svg,
-    .flatpickr-next-month:hover svg {
-      fill: #888;
-    }
-  }
-
-  .flatpickr-current-month {
-    padding-top: 1px;
-
-    .flatpickr-monthDropdown-months {
-      font-weight: 400;
-      height: 25px;
-      &:focus {
-        box-shadow: none;
-      }
-    }
-
-    input.cur-year {
-      font-weight: 400;
-      height: 25px;
-      &:focus {
-        box-shadow: none;
-      }
-    }
-  }
-
-  .flatpickr-innerContainer {
-    padding: 10px;
-    padding-top: 0;
-    width: 280px;
-  }
-
-  .flatpickr-rContainer {
-    width: 260px;
-  }
-
-  .numInput {
-    &:focus {
-      box-shadow: none;
-    }
-  }
-}
-
-.flatpickr-calendar span.flatpickr-weekday {
-  @apply font-medium text-slate-400;
-}
-</style>

package/src/components/BasePWAPrompt.stories.js

@@ -0,0 +1,51 @@
+import BasePWAPrompt from './BasePWAPrompt.vue';
+
+export default {
+  title: 'Components/BasePWAPrompt',
+  component: BasePWAPrompt,
+  argTypes: {
+  },
+};
+
+const Template = (args) => ({
+  components: { BasePWAPrompt },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BasePWAPrompt v-bind="args">
+      
+    </BasePWAPrompt>
+  `,
+});
+
+const TemplateWithFooter = (args) => ({
+  components: { BasePWAPrompt },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BasePWAPrompt v-bind="args">
+      <template #footer>
+        <div class="bg-red-500 p-4 text-center text-white">
+          Custom  footer
+        </div>
+      </template>
+    </BasePWAPrompt>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  appName: 'Witify',
+  srcLogo: 'https://media.licdn.com/dms/image/D4E0BAQGYgsAV7tho4Q/company-logo_100_100/0/1685653464675?e=1694044800&v=beta&t=0cnsfS5qXUVgnDPQhB9WUgYa5UkKqWKcxzDYBbe9kb0',
+};
+
+
+
+export const WithSlotFooter = TemplateWithFooter.bind({});
+WithSlotFooter.args = {
+  appName: 'Witify',
+  srcLogo: 'https://media.licdn.com/dms/image/D4E0BAQGYgsAV7tho4Q/company-logo_100_100/0/1685653464675?e=1694044800&v=beta&t=0cnsfS5qXUVgnDPQhB9WUgYa5UkKqWKcxzDYBbe9kb0',
+};
+

package/src/components/BasePWAPrompt.vue

@@ -0,0 +1,107 @@
+<template>
+  <BaseModalCenter
+    v-model="active"
+    clipped
+  >
+      <div class="">
+        <div class="text-center py-4 px-8">
+          <div class="flex justify-center p-2">
+            <img :src="srcLogo" :alt="appName" class="h-16 w-16 rounded-lg shadow-md my-4" />
+          </div>
+          <h2 class="mb-4 text-lg">
+            <div v-if="title">
+              {{ title }}
+            </div>
+            <div v-else>
+              {{ t('sui.install') + ' ' + appName }}
+            </div>
+          </h2>
+          <p class="text-gray-600">
+            {{ description }}
+          </p>
+        </div>
+
+        <slot name="footer">
+          <div class="flex items-center justify-center bg-slate-100 p-4 text-sm text-slate-600">
+          {{ $t('sui.pwa_tap') }}
+          <BaseIcon icon="heroicons:arrow-up-on-square" class="h-6 w-6 mx-1"/>
+
+          {{ $t('sui.pwa_add_to_home_screen') }}
+        </div>
+        </slot>
+      </div>
+  </BaseModalCenter>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from 'luxon';
+import { t } from '@/i18n';
+import BaseModalCenter from './BaseModalCenter.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+const props = defineProps({
+  appName: {
+    required: true,
+    type: String,
+  },
+  srcLogo: {
+    required: true,
+    type: String,
+  },
+  title: {
+    default: '',
+    type: String,
+  },
+  description: {
+    default: t('sui.pwa_description'),
+    type: String,
+  },
+});
+
+const active = ref(false)
+
+function close() {
+  hide();
+  active.value = false;
+}
+
+watch(
+  () => active.value,
+  () => {
+    if (!active.value) {
+      hide()
+    }
+  }
+)
+
+const KEY = 'lastPwaPrompt';
+
+function hide() {
+  const now = DateTime.now().toISO() as string;
+  localStorage.setItem(KEY, now);
+}
+
+function canShow() {
+  if ((navigator as any).standalone) {
+    return false;
+  }
+
+  const today = DateTime.now();
+  let days = Number.MAX_SAFE_INTEGER;
+
+  const lastPrompt = localStorage.getItem(KEY);
+  if (lastPrompt) {
+    const lastPromptDateTime = DateTime.fromISO(lastPrompt);
+    days = lastPromptDateTime.diff(today, 'days').days;
+  }
+
+  const isApple = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform);
+  return (isNaN(days) || days > 14) //&& isApple;
+}
+
+onMounted(() => {
+  if (canShow()) {
+    active.value = true;
+  }
+});
+</script>

package/src/components/index.ts

@@ -65,6 +65,7 @@ import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
 import BaseProgressCircle from './BaseProgressCircle.vue';
+import BasePWAPrompt from './BasePWAPrompt.vue';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseRichText from './BaseRichText.vue';
@@ -74,6 +75,8 @@ import BaseSideNavigation from './BaseSideNavigation.vue';
 import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
 import BaseSkeleton from './BaseSkeleton.vue';
 import BaseStatistic from './BaseStatistic.vue';
+import BaseStepper from './BaseStepper.vue';
+import BaseStepperItem from './BaseStepperItem.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
 import BaseTabs from './BaseTabs.vue';
@@ -160,6 +163,7 @@ export {
   BasePanel,
   BasePassword,
   BaseProgressCircle,
+  BasePWAPrompt,
   BaseRadioGroup,
   BaseReadMore,
   BaseRichText,
@@ -169,6 +173,8 @@ export {
   BaseSideNavigationItem,
   BaseSkeleton,
   BaseStatistic,
+  BaseStepper,
+  BaseStepperItem,
   BaseSwitch,
   BaseSystemAlert,
   BaseTabs,

package/src/lang/en.json

@@ -34,6 +34,7 @@
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",
     "go_to_page": "Go to ",
+    "install": "Install",
     "invalid_value": "Invalid value",
     "just_now": "Just now",
     "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
@@ -53,6 +54,10 @@
     "postal_code_zip_code": "Postal Code / Zip Code",
     "previous": "Previous",
     "previous_month": "Previous month",
+    "pwa_add_to_home_screen": "then 'Add to Home Screen'",
+    "pwa_description": "Install this application on your home screen for faster access",
+    "pwa_share_button": "Share button",
+    "pwa_tap": "Just tap",
     "read_more": "Read more",
     "region": "State / Province",
     "remove": "Remove",

package/src/lang/fr.json

@@ -34,6 +34,7 @@
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",
     "go_to_page": "Page",
+    "install": "Installer",
     "invalid_value": "Valeur invalide",
     "just_now": "à l’instant",
     "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
@@ -53,6 +54,10 @@
     "postal_code_zip_code": "Code postal",
     "previous": "Précédent",
     "previous_month": "Mois précédent",
+    "pwa_add_to_home_screen": "puis 'Sur l'écran d'accueil'",
+    "pwa_description": "Installer cette application sur votre écran d'accueil pour un accès ",
+    "pwa_share_button": "Bouton de partage",
+    "pwa_tap": "Appuyez sur",
     "read_more": "Lire la suite",
     "region": "État / Province",
     "remove": "Retirer",