sprintify-ui 0.2.0 → 0.2.1

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>

package/src/components/BaseDropdownAutocomplete.vue

@@ -8,7 +8,11 @@
     @close="onClose"
   >
     <template #button="buttonProps">
-      <slot name="button" v-bind="buttonProps" :new-value="newValue"></slot>
+      <slot
+        name="button"
+        v-bind="buttonProps"
+        :new-value="newValue"
+      />
     </template>
     <template #dropdown="{ close }">
       <div
@@ -39,17 +43,17 @@
                   :option="optionProps.option"
                   :active="optionProps.active"
                   :size="size"
-                ></slot>
+                />
               </div>
               <div class="shrink-0">
                 <BaseIcon
                   v-if="
                     (optionProps.selected ?? false) ||
-                    (optionProps.option[valueKey] == null && newValue == null)
+                      (optionProps.option[valueKey] == null && newValue == null)
                   "
                   icon="mdi:check-bold"
                   class="h-4 w-4 text-slate-500"
-                ></BaseIcon>
+                />
               </div>
             </div>
           </template>

package/src/components/BaseField.vue

@@ -6,9 +6,12 @@
       :required="required"
       :class="labelClassInternal"
     />
-    <slot></slot>
+    <slot />
     <template v-if="errorMessage">
-      <BaseInputError v-if="errorTypeInternal == 'default'" class="mt-1">
+      <BaseInputError
+        v-if="errorTypeInternal == 'default'"
+        class="mt-1"
+      >
         {{ errorMessage }}
       </BaseInputError>
       <BaseAlert

package/src/components/BaseFieldI18n.vue

@@ -1,7 +1,10 @@
 <template>
   <div :data-name="nameInternal">
     <div class="space-y-2">
-      <div v-for="(locale, key) in localesInternal" :key="key">
+      <div
+        v-for="(locale, key) in localesInternal"
+        :key="key"
+      >
         <BaseField
           :name="`${nameInternal}.${key}`"
           :required="requiredInternal"
@@ -26,7 +29,12 @@
         </BaseField>
       </div>
     </div>
-    <BaseAlert v-if="globalErrorMessage" class="mt-3" bordered color="danger">
+    <BaseAlert
+      v-if="globalErrorMessage"
+      class="mt-3"
+      bordered
+      color="danger"
+    >
       {{ globalErrorMessage }}
     </BaseAlert>
   </div>

package/src/components/BaseFilePicker.vue

@@ -12,7 +12,11 @@
     @dragenter.prevent="dragging = true"
     @click="pickFile"
   >
-    <slot :selecting="selecting" :dragging="dragging" :disabled="disabled" />
+    <slot
+      :selecting="selecting"
+      :dragging="dragging"
+      :disabled="disabled"
+    />
   </button>
   <input
     ref="input"
@@ -20,7 +24,7 @@
     :accept="accept"
     hidden="true"
     @change="onInputChange"
-  />
+  >
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseFilePickerCrop.vue

@@ -8,7 +8,10 @@
     @select="launchCropper"
   >
     <template #default="slotProps">
-      <slot name="default" v-bind="slotProps" />
+      <slot
+        name="default"
+        v-bind="slotProps"
+      />
 
       <BaseCropperModal
         v-if="cropperInternal"

package/src/components/BaseForm.vue

@@ -1,5 +1,9 @@
 <template>
-  <form ref="form" class="relative" @submit.prevent="submit()">
+  <form
+    ref="form"
+    class="relative"
+    @submit.prevent="submit()"
+  >
     <slot
       :errors="errors"
       :loading="loading"
@@ -15,7 +19,10 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
-      <slot v-if="loading" name="loading">
+      <slot
+        v-if="loading"
+        name="loading"
+      >
         <div
           class="absolute inset-0 flex h-full w-full items-center justify-center"
         >

package/src/components/BaseHasMany.vue

@@ -14,19 +14,31 @@
     @update:model-value="onUpdate"
   >
     <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 #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps" />
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
     </template>
 
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" />
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
     </template>
   </BaseTagAutocompleteFetch>
 </template>

package/src/components/BaseHeader.vue

@@ -20,7 +20,10 @@
             {{ title }}
           </h2>
 
-          <div v-if="badge" class="order-1 mb-1 xs:order-2 xs:mb-0">
+          <div
+            v-if="badge"
+            class="order-1 mb-1 xs:order-2 xs:mb-0"
+          >
             <BaseBadge
               :color="badge.color"
               :icon="badge.icon"

package/src/components/BaseIconPicker.vue

@@ -11,7 +11,11 @@
         class="max-w-[150px] shrink-0 rounded-l border-r-0 border-slate-300 py-1.5 pl-2 pr-6 focus:border-slate-300 focus:outline-none focus:ring-0 sm:text-sm"
         @change="onSuffixChange"
       >
-        <option v-for="(label, key) in suffixes" :key="key" :value="key">
+        <option
+          v-for="(label, key) in suffixes"
+          :key="key"
+          :value="key"
+        >
           {{ label }}
         </option>
       </select>
@@ -21,12 +25,18 @@
         type="text"
         :placeholder="t('sui.search') + '...'"
         class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
-      />
+      >
     </div>
 
-    <div ref="drawer" class="h-44 overflow-y-auto px-2 pb-2">
+    <div
+      ref="drawer"
+      class="h-44 overflow-y-auto px-2 pb-2"
+    >
       <ul class="flex flex-wrap">
-        <li v-for="icon in filteredIcons" :key="icon">
+        <li
+          v-for="icon in filteredIcons"
+          :key="icon"
+        >
           <button
             type="button"
             :data-icon="icon"

package/src/components/BaseInput.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="inline-flex rounded border" :class="[borderColor]">
+  <div
+    class="inline-flex rounded border"
+    :class="[borderColor]"
+  >
     <div
       v-if="iconLeft"
       class="flex shrink-0 items-center justify-center rounded-l border-r px-3 transition-colors"
@@ -29,10 +32,10 @@
         emptyLeft && emptyRight
           ? 'full'
           : emptyLeft
-          ? 'left'
-          : emptyRight
-          ? 'right'
-          : 'none'
+            ? 'left'
+            : emptyRight
+              ? 'right'
+              : 'none'
       "
       class="grow"
       v-bind="bindings"
@@ -52,7 +55,7 @@
         'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
       }"
       @input="update"
-    />
+    >
     <input
       v-else
       ref="input"
@@ -66,7 +69,7 @@
         'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
       }"
       @input="update"
-    />
+    >
     <div
       v-if="suffix"
       class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"

package/src/components/BaseInputError.vue

@@ -1,6 +1,6 @@
 <template>
   <p class="block text-sm font-medium leading-tight text-red-600">
-    <slot></slot>
+    <slot />
   </p>
 </template>
 

package/src/components/BaseInputLabel.vue

@@ -14,7 +14,10 @@
         icon="heroicons:question-mark-circle-20-solid"
       />
 
-      <span v-if="required" class="ml-0.5 text-red-600"> *</span>
+      <span
+        v-if="required"
+        class="ml-0.5 text-red-600"
+      > *</span>
 
       <Transition
         enter-active-class="transition duration-200 ease-out"

package/src/components/BaseInputPercent.vue

@@ -14,7 +14,7 @@
     :min="min"
     :max="max"
     @update:model-value="onUpdate"
-  ></BaseInput>
+  />
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -10,13 +10,16 @@
         :class="[open ? 'bg-slate-100' : '']"
         @click="onOpen"
       >
-        <BaseIcon icon="fa-solid:bell" :class="[iconClasses]"></BaseIcon>
+        <BaseIcon
+          icon="fa-solid:bell"
+          :class="[iconClasses]"
+        />
         <BaseCounter
           v-if="notificationsConfig.items.length"
           class="absolute top-0 right-0"
           :size="counterSize"
           :count="notificationsConfig.items.length"
-        ></BaseCounter>
+        />
       </div>
     </template>
 
@@ -28,7 +31,7 @@
         <BaseLayoutNotificationItem
           :notification="notification"
           @click="onClick"
-        ></BaseLayoutNotificationItem>
+        />
       </template>
 
       <div
@@ -39,7 +42,7 @@
           <BaseIcon
             icon="heroicons:inbox-stack"
             class="mx-auto mb-2 h-8 w-8 text-slate-400"
-          ></BaseIcon>
+          />
           <p class="text-center text-sm text-slate-700">
             {{ t('sui.notifications_empty') }}
           </p>
@@ -51,7 +54,10 @@
         class="mt-1 border-t border-slate-200 pt-1"
       >
         <MenuItem v-slot="{ active, close }">
-          <RouterLink :to="notificationsConfig.footerTo" @mouseup="close">
+          <RouterLink
+            :to="notificationsConfig.footerTo"
+            @mouseup="close"
+          >
             <div
               class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
               :class="[active ? 'bg-slate-100' : '']"

package/src/components/BaseLayoutNotificationItem.vue

@@ -1,19 +1,29 @@
 <template>
-  <MenuItem v-if="notification.to" v-slot="{ active, close }">
-    <RouterLink :to="notification.to" @mouseup="onClick(close)">
+  <MenuItem
+    v-if="notification.to"
+    v-slot="{ active, close }"
+  >
+    <RouterLink
+      :to="notification.to"
+      @mouseup="onClick(close)"
+    >
       <BaseLayoutNotificationItemContent
         :active="active"
         :notification="notification"
-      ></BaseLayoutNotificationItemContent>
+      />
     </RouterLink>
   </MenuItem>
   <div v-else>
-    <MenuItem v-slot="{ active }" as="button" class="w-full text-left">
+    <MenuItem
+      v-slot="{ active }"
+      as="button"
+      class="w-full text-left"
+    >
       <BaseLayoutNotificationItemContent
         :active="active"
         :notification="notification"
         @mouseup="onClick()"
-      ></BaseLayoutNotificationItemContent>
+      />
     </MenuItem>
   </div>
 </template>

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="px-3 py-2" :class="[active ? 'bg-slate-100' : '']">
+  <div
+    class="px-3 py-2"
+    :class="[active ? 'bg-slate-100' : '']"
+  >
     <div
       class="text-sm leading-tight text-slate-800"
       v-html="notification.text"
-    ></div>
+    />
     <BaseDisplayRelativeTime
       v-if="notification.created_at"
       v-slot="{ readableDate }"

package/src/components/BaseLayoutSidebar.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="min-h-full">
-    <TransitionRoot as="template" :show="showMobileMenu">
+    <TransitionRoot
+      as="template"
+      :show="showMobileMenu"
+    >
       <Dialog
         as="div"
         class="relative z-40 xl:hidden"
@@ -57,7 +60,11 @@
                 </div>
               </TransitionChild>
               <div class="flex flex-shrink-0 items-center px-4">
-                <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+                <img
+                  class="block h-8 w-auto"
+                  :src="logoUrl"
+                  :alt="appName"
+                >
               </div>
               <div
                 data-scroll-lock-scrollable
@@ -69,7 +76,10 @@
               </div>
             </DialogPanel>
           </TransitionChild>
-          <div class="w-14 flex-shrink-0" aria-hidden="true">
+          <div
+            class="w-14 flex-shrink-0"
+            aria-hidden="true"
+          >
             <!-- Dummy element to force sidebar to shrink to fit close icon -->
           </div>
         </div>
@@ -90,7 +100,10 @@
           {{ systemAlert.message }}
         </BaseSystemAlert>
 
-        <div class="flex bg-white" :style="{ height: navbarHeight + 'px' }">
+        <div
+          class="flex bg-white"
+          :style="{ height: navbarHeight + 'px' }"
+        >
           <button
             type="button"
             class="border-r border-slate-200 px-4 text-slate-500 xl:hidden"
@@ -130,7 +143,11 @@
           :style="{ height: navbarHeight + 'px' }"
           :class="[dark ? 'bg-slate-900' : 'bg-white']"
         >
-          <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+          <img
+            class="block h-8 w-auto"
+            :src="logoUrl"
+            :alt="appName"
+          >
         </div>
         <div class="flex flex-1">
           <nav class="flex-1">

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -8,8 +8,15 @@
     <template #menu>
       <div class="px-3 py-6">
         <div class="space-y-8">
-          <div v-for="section in actionSections" :key="section.title">
-            <h2 v-if="section.title" class="pl-3" :class="sectionTitleClasses">
+          <div
+            v-for="section in actionSections"
+            :key="section.title"
+          >
+            <h2
+              v-if="section.title"
+              class="pl-3"
+              :class="sectionTitleClasses"
+            >
               {{ section.title }}
             </h2>
             <div>
@@ -43,7 +50,7 @@
             :size="size"
             @click="onNotificationClick"
             @open="onNotificationOpen"
-          ></BaseLayoutNotificationDropdown>
+          />
 
           <!-- Profile dropdown -->
           <div
@@ -54,13 +61,20 @@
               'ml-0': size == 'xs',
             }"
           >
-            <BaseMenu :items="userMenu" :size="size == 'xs' ? 'xs' : 'sm'">
+            <BaseMenu
+              :items="userMenu"
+              :size="size == 'xs' ? 'xs' : 'sm'"
+            >
               <template #button="{ open }">
                 <div
                   class="flex rounded-md p-1.5 hover:bg-slate-100"
                   :class="[open ? 'bg-slate-100' : '']"
                 >
-                  <BaseAvatar :user="user" :size="size" show-details />
+                  <BaseAvatar
+                    :user="user"
+                    :size="size"
+                    show-details
+                  />
                 </div>
               </template>
             </BaseMenu>

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -6,8 +6,15 @@
 
         <div class="flex justify-center">
           <!-- Logo -->
-          <RouterLink to="/" class="flex flex-shrink-0 items-center p-2 pl-0">
-            <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+          <RouterLink
+            to="/"
+            class="flex flex-shrink-0 items-center p-2 pl-0"
+          >
+            <img
+              class="block h-8 w-auto"
+              :src="logoUrl"
+              :alt="appName"
+            >
           </RouterLink>
 
           <!-- Links (desktop) -->
@@ -31,13 +38,23 @@
             :notifications-config="notifications"
             @click="onNotificationClick"
             @open="onNotificationOpen"
-          ></BaseLayoutNotificationDropdown>
+          />
 
           <!-- Profile dropdown -->
-          <BaseMenu tw-menu="w-52" class="hidden md:block" :items="userMenu">
+          <BaseMenu
+            tw-menu="w-52"
+            class="hidden md:block"
+            :items="userMenu"
+          >
             <template #button="{ open }">
-              <div class="flex rounded-full" :class="[open ? '' : '']">
-                <BaseAvatar :class="dark ? 'text-white' : ''" :user="user" />
+              <div
+                class="flex rounded-full"
+                :class="[open ? '' : '']"
+              >
+                <BaseAvatar
+                  :class="dark ? 'text-white' : ''"
+                  :user="user"
+                />
               </div>
             </template>
           </BaseMenu>
@@ -59,7 +76,7 @@
       <hr
         class="mb-4 mt-2"
         :class="[dark ? 'border-slate-700' : 'border-slate-200']"
-      />
+      >
 
       <!-- Profile links -->
       <div class="p-2 pb-6">

package/src/components/BaseMediaGallery.vue

@@ -9,7 +9,10 @@
       @update:model-value="onDragUpdate"
     >
       <template #item="{ element, index }">
-        <div :style="{ width: itemWidth }" class="p-1">
+        <div
+          :style="{ width: itemWidth }"
+          class="p-1"
+        >
           <BaseMediaGalleryItem
             :media="element"
             :show-remove="!disabled"

package/src/components/BaseMediaGalleryItem.vue

@@ -12,10 +12,13 @@
         v-if="draggable && !disabled"
         class="handle flex shrink-0 cursor-move items-center justify-center border-r border-slate-300 bg-slate-200 px-1"
       >
-        <BaseIcon icon="mdi:drag"></BaseIcon>
+        <BaseIcon icon="mdi:drag" />
       </div>
       <div class="shrink-0">
-        <BaseMediaPreview class="h-12 w-12" :media="media" />
+        <BaseMediaPreview
+          class="h-12 w-12"
+          :media="media"
+        />
       </div>
       <component
         :is="url ? 'a' : 'p'"
@@ -33,13 +36,19 @@
         </div>
       </component>
     </div>
-    <div v-if="showRemove" class="absolute top-px right-px">
+    <div
+      v-if="showRemove"
+      class="absolute top-px right-px"
+    >
       <button
         type="button"
         class="rounded-full bg-white p-1 text-slate-500 hover:bg-slate-100"
         @click="$emit('remove')"
       >
-        <BaseIcon icon="heroicons:x-mark-20-solid" class="h-5 w-5"></BaseIcon>
+        <BaseIcon
+          icon="heroicons:x-mark-20-solid"
+          class="h-5 w-5"
+        />
       </button>
     </div>
   </div>