sprintify-ui 0.2.0 → 0.2.3

package/src/components/BaseShortcut.vue

@@ -1,6 +1,11 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
-    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
+    <BaseActionItem
+      :to="to"
+      :href="href"
+      :action="action"
+      class="block w-full"
+    >
       <section class="whitespace-pre-line p-4">
         <!-- Icon -->
         <div
@@ -11,7 +16,7 @@
             v-if="icon"
             :icon="icon"
             :class="iconSizeClasses"
-          ></BaseIcon>
+          />
         </div>
         <!-- Title -->
         <div class="text-md font-semibold">
@@ -29,12 +34,14 @@
           v-if="linkText"
           class="flex items-center justify-start text-sm font-medium"
         >
-          <div class="mr-1 leading-none">{{ linkText }}</div>
+          <div class="mr-1 leading-none">
+            {{ linkText }}
+          </div>
           <div>
             <BaseIcon
               icon="heroicons:arrow-right-20-solid"
               class="mt-px h-4 w-4"
-            ></BaseIcon>
+            />
           </div>
         </div>
       </section>

package/src/components/BaseSideNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <nav aria-label="Sidebar" class="relative">
+  <nav
+    aria-label="Sidebar"
+    class="relative"
+  >
     <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
     <div
       class="relative overflow-x-auto overflow-y-hidden"

package/src/components/BaseSideNavigationItem.vue

@@ -17,7 +17,10 @@
       ]"
       @click.prevent="onClick(navigate)"
     >
-      <div class="relative flex items-center" :class="[sizeClassInner]">
+      <div
+        class="relative flex items-center"
+        :class="[sizeClassInner]"
+      >
         <div
           class="absolute left-0 top-0 h-full"
           :class="[
@@ -25,7 +28,7 @@
               ? 'w-[2px] bg-primary-600'
               : 'group-hover:w-px group-hover:bg-slate-700',
           ]"
-        ></div>
+        />
         <slot :active="isActiveInternal(isActive, isExactActive)" />
       </div>
     </a>

package/src/components/BaseSkeleton.vue

@@ -12,8 +12,8 @@
       :style="{
         animationDelay: delay,
       }"
-    ></div>
-    <slot></slot>
+    />
+    <slot />
   </div>
 </template>
 

package/src/components/BaseStatistic.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
+  <div
+    class="inline-flex rounded-xl p-4"
+    :class="[centerClass]"
+  >
     <section>
       <!-- Label -->
       <header class="mb-0.5 text-base font-medium">
         {{ label }}
       </header>
       <!-- Content -->
-      <div class="flex" :class="[centerClass]">
+      <div
+        class="flex"
+        :class="[centerClass]"
+      >
         <div class="text-3xl font-bold leading-tight">
           {{ primaryValue }}
         </div>
@@ -18,9 +24,14 @@
         >
           <!-- Icon trend -->
           <div v-if="trend">
-            <BaseIcon :icon="icon" :class="iconClass" />
+            <BaseIcon
+              :icon="icon"
+              :class="iconClass"
+            />
+          </div>
+          <div class="text-lg">
+            {{ secondaryValue }}
           </div>
-          <div class="text-lg">{{ secondaryValue }}</div>
         </div>
       </div>
       <!-- Caption -->

package/src/components/BaseStepper.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="lg:border-t lg:border-b lg:border-gray-200">
-    <nav class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8" aria-label="Progress">
+    <nav
+      class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
+      aria-label="Progress"
+    >
       <ol
         role="list"
         class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"

package/src/components/BaseSwitch.stories.js

@@ -1,7 +1,6 @@
 import BaseSwitch from './BaseSwitch.vue';
 import BaseContainer from './BaseContainer.vue';
 import { createFieldStory } from '../../.storybook/utils';
-import { Icon } from '@iconify/vue';
 
 export default {
   title: 'Form/BaseSwitch',

package/src/components/BaseSwitch.vue

@@ -24,10 +24,16 @@
           }"
           class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
         >
-          <BaseIcon v-if="icon" :icon="icon" />
+          <BaseIcon
+            v-if="icon"
+            :icon="icon"
+          />
         </span>
       </Switch>
-      <SwitchLabel v-if="$slots.default" class="cursor-pointer">
+      <SwitchLabel
+        v-if="$slots.default"
+        class="cursor-pointer"
+      >
         <slot />
       </SwitchLabel>
     </div>

package/src/components/BaseSystemAlert.vue

@@ -17,7 +17,10 @@
         </div>
       </div>
     </component>
-    <div v-if="closable" class="absolute top-0 right-0 p-3">
+    <div
+      v-if="closable"
+      class="absolute top-0 right-0 p-3"
+    >
       <button
         type="button"
         class="rounded-full bg-black bg-opacity-50 p-1 text-white"

package/src/components/BaseTabItem.vue

@@ -18,7 +18,10 @@
         ]"
         @click.prevent="onClick(navigate)"
       >
-        <div class="relative flex" :class="sizeClassInner">
+        <div
+          class="relative flex"
+          :class="sizeClassInner"
+        >
           <div
             class="absolute left-0 bottom-0 w-full"
             :class="[
@@ -26,7 +29,7 @@
                 ? 'h-[2px] bg-primary-600'
                 : 'group-hover:h-px group-hover:bg-slate-700',
             ]"
-          ></div>
+          />
           <div class="whitespace-nowrap">
             <slot :active="isActiveInternal(isActive, isExactActive)" />
           </div>

package/src/components/BaseTable.vue

@@ -3,7 +3,10 @@
     class="relative w-full overflow-hidden"
     :class="maxHeight ? 'base-table--has-max-height' : ''"
   >
-    <div ref="slot" style="display: none">
+    <div
+      ref="slot"
+      style="display: none"
+    >
       <slot />
     </div>
 
@@ -17,7 +20,10 @@
         <div class="inline-block min-w-full align-middle">
           <div class="relative min-h-[300px]">
             <table class="min-w-full border-separate border-spacing-0">
-              <thead v-if="newColumns.length" ref="thead">
+              <thead
+                v-if="newColumns.length"
+                ref="thead"
+              >
                 <tr>
                   <th
                     v-if="showDetailRowIcon"
@@ -38,7 +44,7 @@
                         :checked="isAllChecked"
                         :disabled="isAllUncheckable"
                         :class="checkboxStyle"
-                      />
+                      >
                     </div>
                   </th>
                   <th
@@ -84,14 +90,14 @@
                               :opacity="!isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="M8.71 12.29L11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"
-                            ></path>
+                            />
                           </g>
                           <g transform="translate(0 3)">
                             <path
                               :opacity="isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="m8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"
-                            ></path>
+                            />
                           </g>
                         </svg>
                       </div>
@@ -109,7 +115,7 @@
                       :checked="isAllChecked"
                       :disabled="isAllUncheckable"
                       :class="checkboxStyle"
-                    />
+                    >
                   </th>
                 </tr>
               </thead>
@@ -156,7 +162,7 @@
                           :disabled="!isRowCheckable(row)"
                           :checked="isRowChecked(row)"
                           :class="checkboxStyle"
-                        />
+                        >
                       </div>
                     </td>
 
@@ -197,7 +203,7 @@
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
                         :class="checkboxStyle"
-                      />
+                      >
                     </td>
                   </tr>
 
@@ -211,7 +217,11 @@
                         class="td"
                         :class="borderBottomDetailClasses(index)"
                       >
-                        <slot name="detail" :row="row" :index="index" />
+                        <slot
+                          name="detail"
+                          :row="row"
+                          :index="index"
+                        />
                       </td>
                     </tr>
                   </transition>

package/src/components/BaseTagAutocomplete.vue

@@ -55,7 +55,7 @@
             @click="open"
             @input="onTextInput"
             @keydown="onTextKeydown"
-          />
+          >
         </div>
       </div>
     </div>
@@ -82,13 +82,22 @@
           @scroll-bottom="emit('scrollBottom')"
         >
           <template #empty="emptyProps">
-            <slot name="empty" v-bind="{ ...emptyProps, ...slotProps }" />
+            <slot
+              name="empty"
+              v-bind="{ ...emptyProps, ...slotProps }"
+            />
           </template>
           <template #option="optionProps">
-            <slot name="option" v-bind="{ ...optionProps, ...slotProps }" />
+            <slot
+              name="option"
+              v-bind="{ ...optionProps, ...slotProps }"
+            />
           </template>
           <template #footer="footerProps">
-            <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
+            <slot
+              name="footer"
+              v-bind="{ ...footerProps, ...slotProps }"
+            />
           </template>
         </BaseAutocompleteDrawer>
       </div>

package/src/components/BaseTagAutocompleteFetch.vue

@@ -18,19 +18,33 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <template #items="itemProps">
-      <slot name="items" v-bind="itemProps" />
+      <slot
+        name="items"
+        v-bind="itemProps"
+      />
     </template>
 
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps" />
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
 
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
+      <slot
+        name="footer"
+        v-bind="footerProps"
+        :keywords="keywords"
+      />
     </template>
 
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+        :first-search="firstSearch"
+      >
         <div
           v-if="firstSearch"
           class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"

package/src/components/BaseTextareaAutoresize.vue

@@ -1,5 +1,9 @@
 <template>
-  <div ref="wrapper" class="grid" :style="{ maxHeight: maxHeight + 'px' }">
+  <div
+    ref="wrapper"
+    class="grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
     <textarea
       :value="modelValue"
       :name="nameInternal"
@@ -91,7 +95,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+const { nameInternal, requiredInternal, hasErrorInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),

package/src/components/BaseTimeline.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="flow-root">
-    <ul role="list" class="-mb-8">
-      <li v-for="(item, index) in items" :key="index">
+    <ul
+      role="list"
+      class="-mb-8"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
         <div class="relative pb-8">
           <span
             v-if="index != items.length - 1"

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",

package/src/svg/BaseEmptyState.vue

@@ -1,5 +1,9 @@
 <template>
-  <svg viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 150 150"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       class="text-slate-100"
       d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z"

package/src/svg/BaseSpinnerLarge.vue

@@ -14,9 +14,21 @@
       stroke="url(#gradient)"
     />
     <linearGradient id="gradient">
-      <stop offset="50%" stop-color="#2563eb" stop-opacity="1" />
-      <stop offset="65%" stop-color="#2563eb" stop-opacity=".5" />
-      <stop offset="100%" stop-color="#2563eb" stop-opacity="0" />
+      <stop
+        offset="50%"
+        stop-color="#2563eb"
+        stop-opacity="1"
+      />
+      <stop
+        offset="65%"
+        stop-color="#2563eb"
+        stop-opacity=".5"
+      />
+      <stop
+        offset="100%"
+        stop-color="#2563eb"
+        stop-opacity="0"
+      />
     </linearGradient>
   </svg>
 </template>

package/src/svg/BaseSpinnerSmall.vue

@@ -1,6 +1,12 @@
 <template>
-  <svg class="animate-spin" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+  <svg
+    class="animate-spin"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+    />
   </svg>
 </template>