sprintify-ui 0.2.0 → 0.2.3

package/src/components/BaseCropper.vue

@@ -12,7 +12,10 @@
       v-bind="shared"
     />
 
-    <div ref="container" class="base-cropper-wrapper relative">
+    <div
+      ref="container"
+      class="base-cropper-wrapper relative"
+    >
       <div
         :style="{
           width: cropperConfiguration?.boundary?.width + 'px',
@@ -47,7 +50,10 @@
             class="border-r border-slate-300 bg-white px-3 py-1.5 hover:bg-slate-100"
             @click="rotateLeft"
           >
-            <BaseIcon icon="mdi:rotate-left" class="h-4 w-4" />
+            <BaseIcon
+              icon="mdi:rotate-left"
+              class="h-4 w-4"
+            />
           </button>
           <button
             type="button"
@@ -55,7 +61,10 @@
             class="bg-white px-3 py-1.5 hover:bg-slate-100"
             @click="rotateRight"
           >
-            <BaseIcon icon="mdi:rotate-right" class="h-4 w-4" />
+            <BaseIcon
+              icon="mdi:rotate-right"
+              class="h-4 w-4"
+            />
           </button>
         </div>
       </div>
@@ -67,7 +76,10 @@
         <div
           class="flex items-center rounded-lg bg-black bg-opacity-75 px-3 py-1.5 text-center text-white"
         >
-          <BaseIcon icon="ri:drag-move-2-fill" class="mr-1 h-5 w-5" />
+          <BaseIcon
+            icon="ri:drag-move-2-fill"
+            class="mr-1 h-5 w-5"
+          />
           <span>
             {{ t('drag_to_reposition') }}
           </span>
@@ -78,7 +90,7 @@
         :delay="40"
         class="z-[1]"
         :model-value="initializing"
-      ></BaseLoadingCover>
+      />
     </div>
 
     <slot

package/src/components/BaseCropperModal.vue

@@ -5,7 +5,10 @@
     :max-width="cropperSize + 'px'"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <div v-if="ready" class="flex items-center justify-center">
+    <div
+      v-if="ready"
+      class="flex items-center justify-center"
+    >
       <BaseCropper
         v-if="cropperInternal.source"
         ref="baseCropperRef"

package/src/components/BaseDataIterator.vue

@@ -13,7 +13,10 @@
         <!-- Header -->
         <div class="mb-4 flex space-x-2 empty:mb-0">
           <!-- Search bar -->
-          <div v-if="searchable" class="grow">
+          <div
+            v-if="searchable"
+            class="grow"
+          >
             <div class="relative h-11">
               <div
                 class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center pl-2.5"
@@ -30,7 +33,7 @@
                 class="h-11 w-full overflow-hidden rounded-md border border-slate-300 bg-white pl-10 pr-9 shadow-sm"
                 :placeholder="t('sui.autocomplete_placeholder')"
                 @input="onSearch"
-              />
+              >
               <div
                 v-if="searchQuery"
                 class="absolute right-0 top-0 flex h-full items-center justify-center p-1"
@@ -60,8 +63,7 @@
               <BaseDataIteratorSectionButton
                 :section="section"
                 @open="openSection(i)"
-              >
-              </BaseDataIteratorSectionButton>
+              />
             </template>
           </template>
 
@@ -98,7 +100,10 @@
 
         <!-- Pagination -->
 
-        <div v-if="paginationMetadata" class="mt-4">
+        <div
+          v-if="paginationMetadata"
+          class="mt-4"
+        >
           <p
             class="text-center text-sm text-slate-500 sm:text-right [&>b]:font-medium [&>b]:text-slate-600"
           >
@@ -112,7 +117,10 @@
           </p>
         </div>
 
-        <div v-if="paginationMetadata" class="mt-4">
+        <div
+          v-if="paginationMetadata"
+          class="mt-4"
+        >
           <BasePagination
             :model-value="page"
             :last-page="lastPage"
@@ -121,13 +129,20 @@
         </div>
       </div>
 
-      <div v-if="!compactLayout" ref="sidebar" class="space-y-3">
+      <div
+        v-if="!compactLayout"
+        ref="sidebar"
+        class="space-y-3"
+      >
         <slot
           name="sidebarTop"
           :pagination-metadata="paginationMetadata"
-        ></slot>
+        />
 
-        <template v-for="section in sectionsInternal" :key="section.name">
+        <template
+          v-for="section in sectionsInternal"
+          :key="section.name"
+        >
           <BaseDataIteratorSectionBox :section="section">
             <slot
               :name="section.name"
@@ -141,11 +156,14 @@
         <slot
           name="sidebarBottom"
           :pagination-metadata="paginationMetadata"
-        ></slot>
+        />
       </div>
     </div>
 
-    <template v-for="(section, i) in sectionsInternal" :key="section.name">
+    <template
+      v-for="(section, i) in sectionsInternal"
+      :key="section.name"
+    >
       <BaseDataIteratorSectionModal
         :section="section"
         :model-value="sectionModalActive == i"

package/src/components/BaseDataIteratorSectionBox.vue

@@ -13,9 +13,12 @@
         class="h-5 w-5 text-slate-500 duration-300"
         :class="active ? 'rotate-90 transform' : ''"
         icon="heroicons:chevron-right-20-solid"
-      ></BaseIcon>
+      />
     </button>
-    <div v-show="active" class="border-t border-slate-300 py-5 px-4">
+    <div
+      v-show="active"
+      class="border-t border-slate-300 py-5 px-4"
+    >
       <slot />
     </div>
   </BaseCard>

package/src/components/BaseDataIteratorSectionButton.vue

@@ -5,17 +5,19 @@
     type="button"
     @click="open()"
   >
-    <BaseIcon class="h-5 w-5 text-slate-500" :icon="section.icon" />
+    <BaseIcon
+      class="h-5 w-5 text-slate-500"
+      :icon="section.icon"
+    />
     <span
       v-if="section.title && width > 600"
       class="ml-2 whitespace-pre text-sm"
-      >{{ section.title }}</span
-    >
+    >{{ section.title }}</span>
     <BaseBadge
       v-if="section.count"
       class="ml-2"
       :label="section.count"
-    ></BaseBadge>
+    />
   </button>
 </template>
 

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -1,6 +1,9 @@
 <template>
   <ul>
-    <li v-for="col in toggleableColumns" :key="col.newKey">
+    <li
+      v-for="col in toggleableColumns"
+      :key="col.newKey"
+    >
       <label class="cursor-pointer">
         <input
           :checked="visibleColumns.includes(col.newKey)"
@@ -8,7 +11,7 @@
           class="mr-2 h-3.5 w-3.5 cursor-pointer rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
           :value="col.newKey"
           @change="onVisibleColumnChange($event, col.newKey)"
-        />
+        >
         <span class="text-xs text-slate-700">
           {{ col.label }}
         </span>

package/src/components/BaseDataTable.vue

@@ -24,19 +24,20 @@
         firstLoad,
       }"
     >
-      <BaseCard clipped class="w-full overflow-hidden">
+      <BaseCard
+        clipped
+        class="w-full overflow-hidden"
+      >
         <div v-if="newCheckedRows.length">
           <div
             class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
           >
             <div>
-              <span class="mr-3 text-slate-500"
-                >{{
-                  t('sui.x_rows_selected', {
-                    count: newCheckedRows.length,
-                  })
-                }}.</span
-              >
+              <span class="mr-3 text-slate-500">{{
+                t('sui.x_rows_selected', {
+                  count: newCheckedRows.length,
+                })
+              }}.</span>
               <button
                 type="button"
                 class="mr-3 inline text-slate-700 underline"
@@ -102,7 +103,7 @@
                     <BaseDataTableRowAction
                       :row="row"
                       :row-action="rowAction"
-                    ></BaseDataTableRowAction>
+                    />
                   </template>
                   <BaseMenu
                     v-if="showRowActionMenu"
@@ -120,15 +121,24 @@
           </template>
 
           <template #detail="propsDetail">
-            <slot name="detail" v-bind="propsDetail" />
+            <slot
+              name="detail"
+              v-bind="propsDetail"
+            />
           </template>
 
           <template #checkedHeader="propsCheckHeader">
-            <slot name="checkedHeader" v-bind="propsCheckHeader" />
+            <slot
+              name="checkedHeader"
+              v-bind="propsCheckHeader"
+            />
           </template>
 
           <template #empty>
-            <div v-if="error" class="flex items-center justify-center py-16">
+            <div
+              v-if="error"
+              class="flex items-center justify-center py-16"
+            >
               <div class="flex flex-col items-center justify-center">
                 <BaseIcon
                   icon="heroicons:x-circle"
@@ -144,7 +154,7 @@
               class="flex items-center justify-center py-16"
             >
               <div class="flex flex-col items-center">
-                <BaseEmptyState class="w-32"></BaseEmptyState>
+                <BaseEmptyState class="w-32" />
 
                 <p class="mt-3 text-center text-sm text-slate-600">
                   {{ t('sui.nothing_found') }}
@@ -169,22 +179,35 @@
     </template>
 
     <template #sidebarTop="sidebarProps">
-      <slot name="sidebarTop" v-bind="sidebarProps"></slot>
+      <slot
+        name="sidebarTop"
+        v-bind="sidebarProps"
+      />
     </template>
 
     <template #sidebarBottom="sidebarProps">
-      <slot name="sidebarBottom" v-bind="sidebarProps"></slot>
+      <slot
+        name="sidebarBottom"
+        v-bind="sidebarProps"
+      />
     </template>
 
-    <template v-if="toggleable" #columns>
+    <template
+      v-if="toggleable"
+      #columns
+    >
       <BaseDataIteratorSectionColumns
         v-model:visibleColumns="visibleColumns"
         :table="table"
         @update:visible-columns="onUpdateVisibleColumn"
-      ></BaseDataIteratorSectionColumns>
+      />
     </template>
 
-    <template v-for="section in sections" :key="section.name" #[section.name]>
+    <template
+      v-for="section in sections"
+      :key="section.name"
+      #[section.name]
+    >
       <slot :name="section.name" />
     </template>
   </BaseDataIterator>
@@ -607,8 +630,8 @@ function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
       disabled: action.disabled && action.disabled(row),
       action: action.action
         ? () => {
-            if (action.action) action.action(row);
-          }
+          if (action.action) action.action(row);
+        }
         : undefined,
       to: action.to ? action.to(row) : undefined,
     };

package/src/components/BaseDataTableRowAction.vue

@@ -6,7 +6,10 @@
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     @click="rowAction.action ? rowAction.action(row) : null"
   >
-    <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
+    <BaseIcon
+      :icon="rowAction.icon"
+      class="text-slate-500"
+    />
   </button>
   <RouterLink
     v-else-if="rowAction.to"
@@ -14,7 +17,10 @@
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     class="btn btn-white border border-slate-300 p-2 shadow-sm hover:bg-slate-100"
   >
-    <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
+    <BaseIcon
+      :icon="rowAction.icon"
+      class="text-slate-500"
+    />
   </RouterLink>
 </template>
 

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"
     >
@@ -16,7 +16,7 @@
       class="flatpickr w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-slate-300"
       :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
       :placeholder="t('sui.click_or_select_date')"
-    />
+    >
     <div
       v-if="modelValueFormatted && !disabled"
       class="absolute right-0 top-0 flex h-[42px] items-center justify-center p-1"
@@ -26,7 +26,10 @@
         class="flex items-center rounded p-1.5 hover:bg-slate-100"
         @click="clear()"
       >
-        <BaseIcon class="h-5 w-5 text-slate-600" icon="heroicons:x-mark" />
+        <BaseIcon
+          class="h-5 w-5 text-slate-600"
+          icon="heroicons:x-mark"
+        />
       </button>
     </div>
   </div>
@@ -39,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';
@@ -157,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,
@@ -164,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;
 });
 
@@ -274,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/BaseDateSelect.vue

@@ -17,10 +17,19 @@
           :placeholder="t('sui.year')"
           @change="update()"
         >
-          <option disabled selected hidden :value="null">
+          <option
+            disabled
+            selected
+            hidden
+            :value="null"
+          >
             {{ t('sui.year') }}
           </option>
-          <option v-for="year in years" :key="year" :value="year">
+          <option
+            v-for="year in years"
+            :key="year"
+            :value="year"
+          >
             {{ year }}
           </option>
         </select>
@@ -42,10 +51,19 @@
           :placeholder="t('sui.month')"
           @change="update()"
         >
-          <option disabled selected hidden :value="null">
+          <option
+            disabled
+            selected
+            hidden
+            :value="null"
+          >
             {{ t('sui.month') }}
           </option>
-          <option v-for="(month, i) in months" :key="month" :value="i + 1">
+          <option
+            v-for="(month, i) in months"
+            :key="month"
+            :value="i + 1"
+          >
             {{ month }}
           </option>
         </select>
@@ -67,10 +85,19 @@
           :placeholder="t('sui.day')"
           @change="update()"
         >
-          <option disabled selected hidden :value="null">
+          <option
+            disabled
+            selected
+            hidden
+            :value="null"
+          >
             {{ t('sui.day') }}
           </option>
-          <option v-for="day in days" :key="day" :value="day">
+          <option
+            v-for="day in days"
+            :key="day"
+            :value="day"
+          >
             {{ day }}
           </option>
         </select>

package/src/components/BaseDisplayRelativeTime.vue

@@ -6,7 +6,10 @@
     :data-microtip-size="showTooltip ? tooltipSize : undefined"
     :role="showTooltip ? 'tooltip' : undefined"
   >
-    <slot name="default" :readable-date="readableDate">
+    <slot
+      name="default"
+      :readable-date="readableDate"
+    >
       <span class="text-xs text-slate-600">
         {{ readableDate }}
       </span>

package/src/components/BaseDraggable.vue

@@ -6,7 +6,7 @@
       name="item"
       :element="element"
       :index="index"
-    ></slot>
+    />
   </div>
 </template>
 

package/src/components/BaseDropdown.vue

@@ -1,10 +1,18 @@
 <template>
   <div>
-    <button ref="button" type="button" @click="toggle()">
-      <slot name="button"></slot>
+    <button
+      ref="button"
+      type="button"
+      @click="toggle()"
+    >
+      <slot name="button" />
     </button>
     <Teleport to="body">
-      <div ref="dropdown" class="z-menu" :style="dropdownStyles">
+      <div
+        ref="dropdown"
+        class="z-menu"
+        :style="dropdownStyles"
+      >
         <Transition
           :enter-active-class="
             animated ? 'transition duration-200 ease-out' : ''
@@ -16,14 +24,17 @@
           leave-to-class="transform scale-95 opacity-0"
         >
           <template v-if="showDropdown || keepAlive">
-            <div v-show="showDropdown" class="inline-block">
+            <div
+              v-show="showDropdown"
+              class="inline-block"
+            >
               <slot
                 name="dropdown"
                 :show-dropdown="showDropdown"
                 :close="close"
                 :open="open"
                 :toggle="toggle"
-              ></slot>
+              />
             </div>
           </template>
         </Transition>