sprintify-ui 0.2.0 → 0.2.1

package/src/components/BaseMediaItem.vue

@@ -2,7 +2,10 @@
   <div class="rounded bg-white shadow">
     <div class="relative flex">
       <div class="shrink-0">
-        <BaseMediaPreview class="h-12 w-12 rounded-l" :media="media" />
+        <BaseMediaPreview
+          class="h-12 w-12 rounded-l"
+          :media="media"
+        />
       </div>
       <component
         :is="url ? 'a' : 'p'"
@@ -19,13 +22,19 @@
           </p>
         </div>
       </component>
-      <div v-if="showRemove" class="shrink-0 p-0.5">
+      <div
+        v-if="showRemove"
+        class="shrink-0 p-0.5"
+      >
         <button
           type="button"
           class="rounded-full bg-white p-1 text-slate-400 hover:bg-slate-100"
           @click="$emit('remove')"
         >
-          <BaseIcon icon="heroicons:x-mark-20-solid" class="h-4 w-4"></BaseIcon>
+          <BaseIcon
+            icon="heroicons:x-mark-20-solid"
+            class="h-4 w-4"
+          />
         </button>
       </div>
     </div>

package/src/components/BaseMediaLibrary.vue

@@ -42,7 +42,9 @@
                 </p>
 
                 <div class="mt-1 text-xs leading-tight text-slate-500">
-                  <p v-if="maxFileText">{{ maxFileText }}</p>
+                  <p v-if="maxFileText">
+                    {{ maxFileText }}
+                  </p>
                   <p>{{ maxFileSize }}</p>
                 </div>
               </div>
@@ -52,7 +54,10 @@
       </template>
     </BaseFileUploader>
 
-    <div v-if="normalizedModelValue.length" class="mt-5">
+    <div
+      v-if="normalizedModelValue.length"
+      class="mt-5"
+    >
       <slot
         :model-value="normalizedModelValue"
         name="list"
@@ -69,7 +74,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaPictures>
+        />
 
         <BaseMediaList
           v-else-if="layout == 'list'"
@@ -79,7 +84,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaList>
+        />
 
         <BaseMediaGallery
           v-else-if="layout == 'gallery'"
@@ -89,7 +94,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaGallery>
+        />
       </slot>
     </div>
   </div>

package/src/components/BaseMediaList.vue

@@ -17,7 +17,7 @@
           @update="onItemUpdate(index, $event)"
           @remove="$emit('remove', index)"
           @save:name="$emit('save:name', index, $event)"
-        ></BaseMediaListItem>
+        />
       </div>
     </template>
   </BaseDraggable>

package/src/components/BaseMediaListItem.vue

@@ -3,14 +3,20 @@
     class="group flex h-10 items-center justify-between"
     :class="[draggable ? 'pr-2' : 'px-2']"
   >
-    <div v-if="draggable && !disabled" class="handle shrink-0 cursor-move px-1">
-      <BaseIcon icon="mdi:drag" class="h-5 w-5 text-slate-400"></BaseIcon>
+    <div
+      v-if="draggable && !disabled"
+      class="handle shrink-0 cursor-move px-1"
+    >
+      <BaseIcon
+        icon="mdi:drag"
+        class="h-5 w-5 text-slate-400"
+      />
     </div>
     <div class="mr-2 shrink-0">
       <BaseIcon
         icon="heroicons-solid:paper-clip"
         class="h-5 w-5 shrink-0 text-slate-400"
-      ></BaseIcon>
+      />
     </div>
     <div class="flex grow items-center gap-3 overflow-hidden">
       <div
@@ -31,12 +37,15 @@
             <BaseIcon
               icon="heroicons-solid:pencil"
               class="h-5 w-5 shrink-0 text-slate-400"
-            ></BaseIcon>
+            />
           </div>
         </button>
       </div>
 
-      <div v-else class="flex grow items-center py-1">
+      <div
+        v-else
+        class="flex grow items-center py-1"
+      >
         <input
           ref="inputRef"
           class="h-8 w-full max-w-md rounded border border-slate-300 px-2 py-0 focus:ring-0"
@@ -46,7 +55,7 @@
           @input="onNameChange"
           @keydown.enter.prevent="saveName"
           @keydown.escape.prevent="viewMode = 'show'"
-        />
+        >
 
         <div class="flex shrink-0 items-center">
           <button

package/src/components/BaseMediaPictures.vue

@@ -16,7 +16,7 @@
           :size="size"
           :disabled="disabled"
           @remove="$emit('remove', index)"
-        ></BaseMediaPicturesItem>
+        />
       </div>
     </template>
   </BaseDraggable>

package/src/components/BaseMediaPicturesItem.vue

@@ -16,7 +16,7 @@
         height: size + 'px',
       }"
       class="overflow-hidden rounded-lg object-cover"
-    />
+    >
     <div class="absolute -top-2 -right-2 flex gap-1">
       <a
         v-if="url"
@@ -24,7 +24,10 @@
         target="_blank"
         class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
       >
-        <BaseIcon class="h-4 w-4" icon="mdi:download"></BaseIcon>
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:download"
+        />
       </a>
       <button
         v-if="showRemove"
@@ -33,7 +36,10 @@
         class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10 disabled:bg-white disabled:opacity-70"
         @click="$emit('remove')"
       >
-        <BaseIcon class="h-4 w-4" icon="mdi:close"></BaseIcon>
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:close"
+        />
       </button>
     </div>
   </div>

package/src/components/BaseMediaPreview.vue

@@ -12,13 +12,13 @@
       :src="url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
-    />
+    >
     <img
       v-else-if="type == 'image' && 'data_url' in media && previewImage"
       :src="media.data_url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
-    />
+    >
     <div
       v-else
       class="flex h-full w-full items-center justify-center bg-slate-100"

package/src/components/BaseMenu.vue

@@ -7,7 +7,10 @@
   >
     <div>
       <MenuButton :class="twButton">
-        <slot name="button" :open="open" />
+        <slot
+          name="button"
+          :open="open"
+        />
       </MenuButton>
     </div>
 
@@ -24,13 +27,31 @@
         :class="twMerge('w-48', twMenu)"
         class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
-        <slot name="items" :items="items">
-          <template v-for="item in items" :key="item.label + 'link'">
-            <div v-if="item.line" class="-mx-1 my-1 flex h-px bg-slate-200" />
+        <slot
+          name="items"
+          :items="items"
+        >
+          <template
+            v-for="item in items"
+            :key="item.label + 'link'"
+          >
+            <div
+              v-if="item.line"
+              class="-mx-1 my-1 flex h-px bg-slate-200"
+            />
 
-            <MenuItem v-else-if="item.to" v-slot="{ active, close }">
-              <RouterLink :to="item.to" @mouseup="close">
-                <slot name="item" :item="item">
+            <MenuItem
+              v-else-if="item.to"
+              v-slot="{ active, close }"
+            >
+              <RouterLink
+                :to="item.to"
+                @mouseup="close"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                >
                   <BaseMenuItem
                     :label="item.label"
                     :count="item.count"
@@ -49,7 +70,10 @@
               as="a"
               :href="item.href"
             >
-              <slot name="item" :item="item">
+              <slot
+                name="item"
+                :item="item"
+              >
                 <BaseMenuItem
                   :label="item.label"
                   :count="item.count"
@@ -69,7 +93,11 @@
               class="w-full"
               @click="item.action"
             >
-              <slot name="item" :item="item" :active="active">
+              <slot
+                name="item"
+                :item="item"
+                :active="active"
+              >
                 <BaseMenuItem
                   :label="item.label"
                   :count="item.count"

package/src/components/BaseMenuItem.vue

@@ -1,11 +1,22 @@
 <template>
   <div :class="buttonClasses">
     <div class="flex items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span :class="textSize">{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="color" />
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="color"
+      />
     </div>
   </div>
 </template>

package/src/components/BaseModalCenter.vue

@@ -78,7 +78,10 @@
             type="button"
             @click="modal.close()"
           >
-            <BaseIcon class="h-8 w-8 text-white" icon="heroicons:x-mark" />
+            <BaseIcon
+              class="h-8 w-8 text-white"
+              icon="heroicons:x-mark"
+            />
           </button>
         </div>
       </div>

package/src/components/BaseNavbarItemContent.vue

@@ -1,11 +1,22 @@
 <template>
   <div :class="classes">
     <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span :class="[sizeClasses]">{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
     </div>
   </div>
 </template>

package/src/components/BaseNavbarSideItem.vue

@@ -24,7 +24,10 @@
       v-if="showSubActions && item.actions && item.actions.length"
       class="mt-2 mb-3"
     >
-      <div v-for="subItem in item.actions" :key="subItem.label">
+      <div
+        v-for="subItem in item.actions"
+        :key="subItem.label"
+      >
         <BaseActionItem
           :to="subItem.to"
           :href="subItem.href"

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,10 +1,17 @@
 <template>
   <div :class="classes">
     <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span>{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
       <BaseCounter
         :size="size"
         :count="count"

package/src/components/BaseNumber.vue

@@ -8,7 +8,10 @@
       leave-from-class="transform scale-100 opacity-100"
       leave-to-class="transform scale-90 opacity-0"
     >
-      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
+      <div
+        v-if="showInvalidInput"
+        class="absolute left-0 top-full z-[1]"
+      >
         <div
           class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
         >
@@ -47,7 +50,7 @@
         @blur="onBlur"
         @focus="onFocus"
         @keydown="onKeydown"
-      />
+      >
       <div class="border-l border-slate-300">
         <button
           type="button"
@@ -56,7 +59,7 @@
           :disabled="disabled"
           @click="increment"
         >
-          <BaseIcon icon="mdi:chevron-up"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-up" />
         </button>
         <button
           type="button"
@@ -65,7 +68,7 @@
           :disabled="disabled"
           @click="decrement"
         >
-          <BaseIcon icon="mdi:chevron-down"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-down" />
         </button>
       </div>
     </div>

package/src/components/BasePagination.vue

@@ -53,7 +53,7 @@
           @keydown.enter="onManualPageMobileEnter"
           @input="onManualPageMobileInput"
           @blur="setPageFromManualPageMobile"
-        />
+        >
         <span class="ml-2 text-sm font-normal text-slate-500">
           {{ t('sui.of') }} {{ lastPage }}
         </span>
@@ -88,7 +88,7 @@
         @keydown.enter="onManualPageEnter"
         @input="onManualPageInput"
         @blur="setPageFromManualPage"
-      />
+      >
     </div>
   </nav>
 </template>

package/src/components/BasePanel.vue

@@ -7,7 +7,10 @@
       <h3 class="text-base font-semibold leading-6 text-slate-900">
         {{ title }}
       </h3>
-      <p v-if="description" class="mt-1 text-sm leading-normal text-slate-600">
+      <p
+        v-if="description"
+        class="mt-1 text-sm leading-normal text-slate-600"
+      >
         {{ description }}
       </p>
     </div>

package/src/components/BasePassword.vue

@@ -16,7 +16,7 @@
       :required="requiredInternal"
       class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
       @input="onInput"
-    />
+    >
     <div class="flex shrink-0 pl-3">
       <button
         tabindex="-1"
@@ -30,7 +30,11 @@
           icon="heroicons:eye-slash-20-solid"
           class="h-5 w-5"
         />
-        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
+        <BaseIcon
+          v-else
+          icon="heroicons:eye-20-solid"
+          class="h-5 w-5"
+        />
       </button>
     </div>
   </div>

package/src/components/BaseProgressCircle.vue

@@ -1,5 +1,8 @@
 <template>
-  <svg :height="radius * 2" :width="radius * 2">
+  <svg
+    :height="radius * 2"
+    :width="radius * 2"
+  >
     <circle
       stroke="currentColor"
       class="text-slate-200"

package/src/components/BaseRadioGroup.vue

@@ -20,9 +20,12 @@
             :value="option.value"
             :class="twInput"
             @input="emitUpdate(option.value)"
-          />
+          >
 
-          <slot name="option" :option="option">
+          <slot
+            name="option"
+            :option="option"
+          >
             <span class="text-sm">{{ option.label }}</span>
           </slot>
         </label>

package/src/components/BaseRichText.vue

@@ -14,8 +14,7 @@
       :enable="enable"
       content-type="html"
       @update:content="emitUpdate(updateChange($event))"
-    >
-    </quill-editor>
+    />
   </div>
 </template>
 

package/src/components/BaseSelect.vue

@@ -13,7 +13,11 @@
     @change="onChange($event)"
   >
     <template v-if="requiredInternal">
-      <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
+      <option
+        disabled
+        hidden
+        :value="EMPTY_VALUE_INTERNAL"
+      >
         {{ placeholder ? placeholder : t('sui.select_an_option') }}
       </option>
     </template>
@@ -101,7 +105,7 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-const options = ref([] as HTMLOptionElement[]);
+const options = ref<HTMLOptionElement[]>([]);
 
 function isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {

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"