sprintify-ui 0.2.0 → 0.2.1

package/src/components/BaseAutocompleteFetch.vue

@@ -28,15 +28,26 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <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
+        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/BaseAvatar.vue

@@ -8,7 +8,7 @@
       :src="user.avatar_url"
       :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
       class="shrink-0 overflow-hidden rounded-full object-cover object-center"
-    />
+    >
     <div
       v-if="showDetails"
       class="max-w-[120px] grow leading-tight"

package/src/components/BaseBadge.vue

@@ -9,8 +9,7 @@
       :icon="icon"
       class="shrink-0"
       :class="iconSizeClasses"
-    >
-    </BaseIcon>
+    />
     <slot />
   </span>
 </template>

package/src/components/BaseBelongsTo.vue

@@ -21,13 +21,22 @@
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps"></slot>
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps"></slot>
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
     </template>
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps"></slot>
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
     </template>
   </BaseAutocompleteFetch>
 </template>

package/src/components/BaseBreadcrumbs.vue

@@ -5,8 +5,14 @@
       class="hidden sm:flex"
       aria-label="Breadcrumb"
     >
-      <ol role="list" class="flex items-center space-x-3">
-        <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
+      <ol
+        role="list"
+        class="flex items-center space-x-3"
+      >
+        <li
+          v-for="(breadcrumb, index) in breadcrumbs"
+          :key="index"
+        >
           <div class="flex items-center">
             <svg
               v-if="index > 0"

package/src/components/BaseButton.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="as" ref="button" class="btn">
+  <component
+    :is="as"
+    ref="button"
+    class="btn"
+  >
     <div
       class="flex items-center justify-center"
       :class="{ 'opacity-0': loading }"
@@ -11,7 +15,10 @@
       v-if="loading"
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
-      <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+      <svg
+        class="h-4 w-4 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"

package/src/components/BaseButtonGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
+  <div
+    class="flex flex-wrap"
+    :style="{ margin: '-' + spacing }"
+  >
     <div
       v-for="option in normalizedOptions"
       :key="option.value ? option.value : 'null'"

package/src/components/BaseCharacterCounter.vue

@@ -8,7 +8,10 @@
     >
       {{ length }}/{{ max }}
     </div>
-    <div v-else-if="min && length < min" class="text-red-600">
+    <div
+      v-else-if="min && length < min"
+      class="text-red-600"
+    >
       {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
     </div>
   </div>

package/src/components/BaseClickOutside.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="root">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/src/components/BaseClipboard.vue

@@ -6,7 +6,7 @@
     @mouseenter="showTooltip()"
     @mouseleave="hideTooltip()"
   >
-    <slot></slot>
+    <slot />
     <transition
       enter-active-class="transition duration-200 ease-out"
       enter-from-class="transform scale-90 opacity-0"
@@ -22,7 +22,10 @@
         <div
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
         >
-          <div v-if="showCopied" class="flex items-center">
+          <div
+            v-if="showCopied"
+            class="flex items-center"
+          >
             <BaseIcon
               class="mr-1 text-green-500"
               icon="heroicons:check-circle-solid"

package/src/components/BaseColor.vue

@@ -30,7 +30,10 @@
               : 'border-transparent',
           ]"
         >
-          <BaseIcon icon="heroicons-solid:check-circle" class="h-5 w-5" />
+          <BaseIcon
+            icon="heroicons-solid:check-circle"
+            class="h-5 w-5"
+          />
         </div>
       </template>
     </BaseButtonGroup>

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

@@ -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>

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>