sprintify-ui 0.2.25 → 0.2.27

package/src/components/BaseAppNotifications.vue

@@ -3,61 +3,24 @@
     <div
       class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
     >
-      <div class="w-full max-w-sm">
+      <div class="w-full">
         <TransitionGroup
           enter-active-class="transition duration-300 ease-out transform"
-          enter-from-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
-          enter-to-class="sm:translate-x-0 translate-y-0 opacity-100"
+          enter-from-class="translate-y-2 opacity-0"
+          enter-to-class="translate-y-0 opacity-100"
           leave-active-class="transition duration-100 ease-in"
-          leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
-          leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
+          leave-from-class="translate-y-0 opacity-100"
+          leave-to-class="translate-y-2 opacity-0"
         >
           <div
             v-for="notification in notifications"
             :key="notification.id"
           >
-            <div
-              class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
-            >
-              <div
-                class="flex w-12 items-center justify-center"
-                :class="{
-                  'bg-blue-500': notification.color == 'info',
-                  'bg-red-500': notification.color == 'danger',
-                  'bg-yellow-500': notification.color == 'warning',
-                  'bg-green-500': notification.color == 'success',
-                }"
-              >
-                <svg
-                  class="h-6 w-6 fill-current text-white"
-                  viewBox="0 0 40 40"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
-                  />
-                </svg>
-              </div>
-
-              <div class="-mx-3 px-4 pt-2 pb-3">
-                <div class="mx-3">
-                  <h3
-                    class="mb-1 font-semibold leading-tight"
-                    :class="{
-                      'text-blue-500': notification.color == 'info',
-                      'text-red-500': notification.color == 'danger',
-                      'text-yellow-500': notification.color == 'warning',
-                      'text-green-500': notification.color == 'success',
-                    }"
-                  >
-                    {{ notification.title }}
-                  </h3>
-                  <p class="text-sm leading-tight text-slate-600">
-                    {{ notification.text }}
-                  </p>
-                </div>
-              </div>
-            </div>
+            <BaseToast
+              class="mt-4"
+              :text="notification.text"
+              :color="notification.color"
+            />
           </div>
         </TransitionGroup>
       </div>
@@ -67,6 +30,7 @@
 
 <script lang="ts" setup>
 import { useNotificationsStore } from '@/index';
+import BaseToast from './BaseToast.vue';
 
 const notificationsStore = useNotificationsStore();
 

package/src/components/BaseAvatar.vue

@@ -24,7 +24,7 @@
       <div class="truncate">
         {{ user.full_name }}
       </div>
-      <div class="truncate opacity-50">
+      <div class="truncate font-light opacity-50">
         {{ user.email }}
       </div>
     </div>

package/src/components/BaseBreadcrumbs.vue

@@ -34,7 +34,7 @@
                   { 'ml-2': index > 0 },
                   isExactActive
                     ? 'text-primary-600'
-                    : 'text-slate-500 hover:text-slate-700',
+                    : 'text-slate-600 hover:text-slate-700',
                 ]"
                 @click.prevent="navigate()"
               >
@@ -60,11 +60,11 @@
     <RouterLink
       v-if="mobileBreadcrumb"
       :to="mobileBreadcrumb.to"
-      class="block text-slate-500 sm:hidden"
+      class="block text-slate-600 sm:hidden"
     >
       <div class="flex items-center">
         <svg
-          class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
+          class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-slate-500"
           viewBox="0 0 20 20"
           fill="currentColor"
           aria-hidden="true"

package/src/components/BaseDataIterator.vue

@@ -46,7 +46,7 @@
                 ref="searchInput"
                 v-model="searchQuery"
                 type="text"
-                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm"
+                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm placeholder:font-light placeholder:text-sm focus:ring-blue-300 focus:ring-4"
                 :class="{
                   'pl-9 pr-8': size == 'sm',
                   'pl-10 pr-9': size == 'md',
@@ -793,7 +793,7 @@ const sectionsInternal = computed<DataIteratorSection[]>(() => {
         name: 'filters',
         title: t('sui.filters'),
         closeText: t('sui.apply_filters'),
-        icon: 'heroicons:adjustments-horizontal',
+        icon: 'heroicons:funnel',
         opened: true,
       },
       ...sections,

package/src/components/BaseDataIteratorSectionModal.vue

@@ -4,7 +4,7 @@
     @update:model-value="emit('update:modelValue', $event)"
   >
     <div>
-      <div class="border-b border-slate-300 p-4">
+      <div class="border-b border-slate-200 p-4">
         <h2 class="text-base font-semibold">
           {{ section.title }}
         </h2>
@@ -14,7 +14,7 @@
         <slot />
       </div>
 
-      <div class="border-t border-slate-300 p-4">
+      <div class="border-t border-slate-200 p-4">
         <button
           class="btn btn-primary w-full sm:w-auto"
           @click="emit('update:modelValue', false)"

package/src/components/BaseDataTable.stories.js

@@ -7,6 +7,7 @@ import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
 import { onBeforeUnmount } from 'vue';
 import { DateTime } from 'luxon';
+import { templateDataTable } from '../../.storybook/utils';
 
 export default {
   title: 'Data/BaseDataTable',
@@ -43,150 +44,7 @@ const templateComponents = {
 const template = `
 <div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
 <br/>
-<BaseDataTable v-bind="args" @cell-click="onCellClick" @fetch="onFetch">
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Titre"
-    sortable
-    field="title->en"
-    :toggle="false"
-  >
-    <div class="font-medium text-slate-900 leading-tight truncate">
-      {{ row.title.slice(0, 30) }}...
-    </div>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="URL"
-    field="website_url"
-    sortable
-  >
-    <a :href="row.website_url" target="_blank" class="btn btn-xs whitespace-pre space-x-1.5 shadow-sm">
-      <span class="whitespace-pre">Open website</span>
-      <BaseIcon icon="heroicons:arrow-top-right-on-square-20-solid" class="w-4 h-4 inline-block" />
-    </a>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Access Level"
-    field="access_level"
-    sortable
-  >
-    <BaseBadge
-      contrast="low"
-      :color="row.access_level == 'public' ? 'green' : 'gray'"
-      bordered
-    >
-      {{ row.access_level }}
-    </BaseBadge>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Vote"
-    field="votes_avg_score"
-    sortable
-    custom-key="votes_avg_score"
-    :toggle="true"
-    :toggle-default="false"
-  >
-    <BaseBadge color="blue" contrast="low" bordered>
-      {{ Math.round(row.votes_avg_score) }} / 5
-    </BaseBadge>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    v-if="ownerIsVisible"
-    label="Owner"
-    custom-key="owner"
-    field="owner_id"
-    :toggle="true"
-    sortable
-  >
-    <span class="text-slate-600 whitespace-pre">{{ row.owner?.name }}</span>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Created at"
-    field="created_at"
-    sortable
-  >
-    <p class="text-slate-600 text-sm">{{ DateTime.fromISO(row.created_at).toLocaleString() }}</p>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Select"
-    :clickable="false"
-    padding="0px"
-  >
-    <select class="select border-none text-sm rounded text-slate-600  focus:z-10 focus:ring-2 bg-transparent">
-      <option>Option 1</option>
-      <option>Option 2</option>
-    </select>
-  </BaseTableColumn>
-
-  <template #detail="{ row }">
-    <div class="p-4 text-xs">
-      <p>ID : <span class="font-mono">{{ row.id }}</span></p>
-      <p>Created at : <span class="font-mono">{{ row.created_at }}</span></p>
-    </div>
-  </template>
-
-  <template #test>
-    <div>
-      Section Test
-    </div>
-  </template>
-
-  <template #filters="{ query, updateQueryValue }">
-    <div class="space-y-3">
-      <div>
-        <p class="mb-1 text-sm">
-          Type
-        </p>
-        <BaseSelect
-          :model-value="query.type ?? null"
-          class="w-full rounded border-slate-300 text-base sm:text-sm"
-          placeholder="-"
-          @update:model-value="updateQueryValue('type', $event)"
-        >
-          <option value="video">
-            Video
-          </option>
-          <option value="article">
-            Article
-          </option>
-        </BaseSelect>
-      </div>
-      <div>
-        <p class="mb-1 text-sm">
-          Access Level
-        </p>
-        <BaseSelect
-          :model-value="query.access_level ?? null"
-          class="w-full rounded border-slate-300 text-base sm:text-sm"
-          placeholder="-"
-          @update:model-value="updateQueryValue('access_level', $event)"
-        >
-          <option value="public">
-            Public
-          </option>
-          <option value="member">
-            Member
-          </option>
-          <option value="vip">
-            VIP
-          </option>
-        </BaseSelect>
-      </div>
-    </div>
-  </template>
-</BaseDataTable>
+${templateDataTable}
 <BaseAppNotifications></BaseAppNotifications>
 <BaseAppDialogs></BaseAppDialogs>
 `;

package/src/components/BaseDataTable.vue

@@ -118,7 +118,7 @@
                   <BaseMenu
                     v-if="showRowActionMenu"
                     :items="rowActionMenuItems(row)"
-                    size="sm"
+                    :size="size == 'sm' ? 'xs' : 'sm'"
                     :tw-button="[
                       'btn flex p-0 items-center justify-center',
                       {

package/src/components/BaseDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+    class="relative transform overflow-hidden rounded-lg bg-white border border-slate-200 p-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
   >
     <div class="sm:flex sm:items-start">
       <div
@@ -14,22 +14,22 @@
       >
         <BaseIcon
           v-if="color == 'danger'"
-          class="h-6 w-6 text-red-600"
+          class="h-5 w-5 text-red-600"
           icon="heroicons:exclamation-triangle-20-solid"
         />
         <BaseIcon
           v-else-if="color == 'warning'"
-          class="h-6 w-6 text-yellow-600"
+          class="h-5 w-5 text-yellow-600"
           icon="heroicons:exclamation-triangle-20-solid"
         />
         <BaseIcon
           v-else-if="color == 'success'"
-          class="h-6 w-6 text-green-600"
+          class="h-5 w-5 text-green-600"
           icon="heroicons:check-circle-20-solid"
         />
         <BaseIcon
           v-else
-          class="h-6 w-6 text-primary-600"
+          class="h-5 w-5 text-primary-600"
           icon="heroicons:information-circle-20-solid"
         />
       </div>
@@ -37,12 +37,12 @@
         <slot>
           <h3
             id="modal-title"
-            class="text-lg font-medium leading-6 text-slate-900"
+            class="text-base font-medium leading-6 text-slate-900"
           >
             {{ title }}
           </h3>
           <div class="mt-2">
-            <p class="text-base font-normal text-slate-600">
+            <p class="text-sm font-light text-slate-600">
               {{ message }}
             </p>
           </div>
@@ -53,7 +53,7 @@
       <button
         ref="confirm"
         type="button"
-        class="btn mb-2 w-full sm:mb-0 sm:w-auto"
+        class="btn btn-sm mb-2 w-full sm:mb-0 sm:w-auto"
         :class="{
           'btn-primary': color == 'info',
           'btn-danger': color == 'danger',
@@ -66,7 +66,7 @@
       </button>
       <button
         type="button"
-        class="btn w-full sm:mr-2 sm:w-auto"
+        class="btn btn-sm w-full sm:mr-2 sm:w-auto"
         @click="$emit('cancel')"
       >
         {{ cancelText ?? t('sui.cancel') }}

package/src/components/BaseGantt.vue

@@ -102,7 +102,7 @@
             <text
               :x="tick.align == 'middle' ? tick.width / 2 : 0"
               :y="33"
-              class="text-[11px] font-normal text-slate-600"
+              class="text-[11px] font-light text-slate-600"
               fill="currentColor"
               text-anchor="middle"
             >

package/src/components/BaseHeader.vue

@@ -3,23 +3,15 @@
     <BaseBreadcrumbs
       v-if="breadcrumbs"
       :breadcrumbs="breadcrumbs"
-      :size="compactLayout ? 'sm' : 'md'"
-      class="lg:mb-1 mb-2"
+      class="mb-1"
     />
 
     <div class="lg:flex lg:items-top lg:justify-between">
       <div class="min-w-0 flex-1">
         <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
-          <h2
-            class="order-2 font-bold text-slate-900 xs:order-1"
-            :class="[
-              compactLayout
-                ? 'mr-2 text-2xl leading-7'
-                : 'mr-3 truncate text-3xl tracking-tight',
-            ]"
-          >
+          <h1 class="order-2 font-bold text-slate-900 xs:order-1 mr-3 truncate text-3xl tracking-tight">
             {{ title }}
-          </h2>
+          </h1>
 
           <div
             v-if="badge"
@@ -34,13 +26,13 @@
             </BaseBadge>
           </div>
         </div>
-        <h3
+        <h2
           v-if="subtitle"
-          class="mt-1 leading-tight text-slate-500 text-sm"
-          :class="[compactLayout ? '' : 'truncate text-base']"
+          class="mt-1 leading-tight font-light text-slate-600 text-xs"
+          :class="[compactLayout ? '' : 'truncate']"
         >
           {{ subtitle }}
-        </h3>
+        </h2>
         <div
           v-if="attributes"
           class="flex"
@@ -53,20 +45,22 @@
           <div
             v-for="attribute in attributes"
             :key="attribute.label"
-            class="flex items-center text-sm text-slate-500"
+            class="flex items-center"
           >
             <BaseIcon
               :icon="attribute.icon"
-              class="mr-1.5 h-4 w-4 flex-shrink-0 text-slate-400"
+              class="mr-1.5 h-4 w-4 shrink-0 text-slate-600"
               aria-hidden="true"
             />
-            {{ attribute.label }}
+            <span class="text-sm text-slate-600">
+              {{ attribute.label }}
+            </span>
           </div>
         </div>
       </div>
 
       <div
-        class="mt-4 lg:mt-0"
+        class="mt-3 lg:mt-0 mb-2 lg:mb-0"
       >
         <div
           class="flex gap-2"

package/src/components/BaseIconPicker.vue

@@ -43,7 +43,7 @@
             :class="[
               modelValue == icon
                 ? 'bg-primary-600 text-white'
-                : 'bg-white text-slate-800 hover:bg-slate-200',
+                : 'bg-white text-gray-700 hover:bg-gray-200',
             ]"
             class="flex items-center justify-center rounded p-1"
             @click="onClick(icon)"

package/src/components/BaseInputLabel.vue

@@ -10,8 +10,8 @@
 
       <BaseIcon
         v-if="help"
-        class="relative bottom-px ml-1 inline h-4 w-4 text-slate-400"
-        icon="heroicons:question-mark-circle-20-solid"
+        class="relative bottom-px ml-1 inline h-4 w-4"
+        icon="mdi:information-outline"
       />
 
       <span

package/src/components/BaseModalCenter.vue

@@ -23,35 +23,29 @@
             <div class="pt-safe grow">
               <transition
                 appear
-                enter-active-class="duration-300 ease-out"
+                enter-active-class="duration-100 ease-out"
                 enter-from-class="opacity-0"
                 enter-to-class="opacity-100"
-                leave-active-class="duration-200 ease-in"
+                leave-active-class="duration-100 ease-in"
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0"
               >
                 <div
                   v-if="modelValue"
-                  :class="
-                    twMerge(
-                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
-                      twBackdrop
-                    )
-                  "
-                  @click="
-                    closeOnOutsideClick
-                      ? modal.close()
-                      : modal.refuseAnimation()
-                  "
+                  :class="twMerge(
+                    'fixed inset-0 bg-slate-300 bg-opacity-60 transition-opacity',
+                    twBackdrop
+                  )"
+                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
                 />
               </transition>
 
               <transition
                 appear
-                enter-active-class="duration-300 ease-out"
+                enter-active-class="duration-100 ease-out"
                 enter-from-class="translate-y-20 opacity-0"
                 enter-to-class="translate-y-0 opacity-100"
-                leave-active-class="duration-200 ease-in"
+                leave-active-class="duration-100 ease-in"
                 leave-from-class="translate-y-0 opacity-100"
                 leave-to-class="translate-y-20 opacity-0"
               >
@@ -74,12 +68,12 @@
 
           <button
             v-if="showCloseButton"
-            class="right fixed right-2 top-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            class="right fixed shadow hover:shadow-lg duration-300 transition-shadow right-2 top-2 flex h-10 w-10 bg-white items-center justify-center rounded-full"
             type="button"
             @click="modal.close()"
           >
             <BaseIcon
-              class="h-8 w-8 text-white"
+              class="h-5 w-5 text-black"
               icon="heroicons:x-mark"
             />
           </button>

package/src/components/BaseModalSide.vue

@@ -14,7 +14,7 @@
             <div class="min-h-full grow">
               <transition
                 appear
-                enter-active-class="duration-300 ease-out"
+                enter-active-class="duration-200 ease-out"
                 enter-from-class="opacity-0"
                 enter-to-class="opacity-100"
                 leave-active-class="duration-200 ease-in"
@@ -23,26 +23,20 @@
               >
                 <div
                   v-show="modelValue"
-                  :class="
-                    twMerge(
-                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
-                      twBackdrop
-                    )
-                  "
-                  @click="
-                    closeOnOutsideClick
-                      ? modal.close()
-                      : modal.refuseAnimation()
-                  "
+                  :class="twMerge(
+                    'fixed inset-0 bg-slate-300 bg-opacity-60 transition-opacity',
+                    twBackdrop
+                  )"
+                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
                 />
               </transition>
 
               <transition
                 appear
-                enter-active-class="duration-300 ease-out"
+                enter-active-class="duration-200 ease-out"
                 enter-from-class="translate-x-20 opacity-0"
                 enter-to-class="translate-x-0 opacity-100"
-                leave-active-class="duration-200 ease-in"
+                leave-active-class="duration-100 ease-in"
                 leave-from-class="translate-x-0 opacity-100"
                 leave-to-class="translate-x-20 opacity-0"
               >
@@ -51,19 +45,19 @@
                   :style="{
                     maxWidth: realMaxWidth,
                   }"
-                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-xl sm:rounded-t-none"
+                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl sm:rounded-t-none"
                   :class="[
                     modal.animationClasses.value,
                     clipped ? 'overflow-hidden' : '',
                   ]"
                 >
                   <button
-                    class="absolute -top-[4.5rem] right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20 sm:-left-[4.5rem] sm:top-2"
+                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg sm:-left-[3rem] sm:top-2 duration-300 transition-shadow"
                     type="button"
                     @click="modal.close()"
                   >
                     <BaseIcon
-                      class="h-8 w-8 text-white"
+                      class="h-5 w-5 text-black"
                       icon="heroicons:x-mark"
                     />
                   </button>

package/src/components/BaseNavbarSideItem.vue

@@ -93,7 +93,7 @@ const showSubActions = computed((): boolean => {
 });
 
 const subItemClasses = computed((): string[] => {
-  const classList = ['flex w-full font-normal'];
+  const classList = ['flex w-full font-light'];
 
   if (props.dark) {
     classList.push('text-slate-300 hover:text-white');

package/src/components/BasePanel.vue

@@ -9,7 +9,7 @@
       </h3>
       <p
         v-if="description"
-        class="mt-1 text-sm leading-normal text-slate-600"
+        class="mt-1 text-sm leading-normal font-light text-slate-600"
       >
         {{ description }}
       </p>