sprintify-ui 0.1.18 → 0.2.1

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

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    :class="buttonClass"
+    :class="twButton"
     :disabled="disabled"
     @drop.prevent="
       dragging = false;
@@ -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>
@@ -32,14 +36,14 @@ import { maxSize, validExtension } from '@/utils/fileValidations';
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     accept?: string;
     acceptedExtensions?: string[];
   }>(),
   {
     disabled: false,
-    buttonClass: '',
+    twButton: '',
     maxSize: 1024 * 1024 * 20, // 20 MB,
     accept: undefined,
     acceptedExtensions: undefined,

package/src/components/BaseFilePickerCrop.stories.js

@@ -11,7 +11,7 @@ export default {
   title: 'Form/BaseFilePickerCrop',
   component: BaseFilePickerCrop,
   args: {
-    buttonClass: 'w-full',
+    twButton: 'w-full',
     acceptedExtensions: ['jpg', 'jpeg', 'png'],
   },
 };
@@ -68,8 +68,8 @@ const Template = (args) => ({
         <BaseLoadingCover
           :model-value="args.loading || uploading || selecting"
           :delay="0"
-          icon-class="text-primary-600 w-6 h-6"
-          backdrop-class="bg-white opacity-60"
+          tw-icon="text-primary-600 w-6 h-6"
+          tw-backdrop="bg-white opacity-60"
         />
       </template>
     </BaseFilePickerCrop>

package/src/components/BaseFilePickerCrop.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseFilePicker
-    :button-class="buttonClass"
+    :tw-button="twButton"
     :disabled="disabled"
     accept="image/*"
     :max-size="maxSize"
@@ -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"
@@ -31,14 +34,14 @@ import { isObject, reject } from 'lodash';
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     acceptedExtensions?: string[];
     cropper: BaseCropperConfig | null;
   }>(),
   {
     disabled: false,
-    buttonClass: '',
+    twButton: '',
     maxSize: 1024 * 1024 * 20, // 20 MB
     acceptedExtensions: undefined,
   }

package/src/components/BaseFileUploader.stories.js

@@ -7,7 +7,7 @@ export default {
   title: 'Form/BaseFileUploader',
   component: BaseFileUploader,
   args: {
-    buttonClass: 'w-full',
+    twButton: 'w-full',
     acceptedExtensions: ['jpg', 'png'],
     maxSize: 1024 * 200, // 200kb
     url: 'https://dummyjson.com/posts/add',
@@ -53,8 +53,8 @@ const Template = (args) => ({
         <BaseLoadingCover
           :model-value="args.loading || uploading || selecting"
           :delay="0"
-          icon-class="text-red-600 w-6 h-6"
-          backdrop-class="bg-white opacity-60"
+          tw-icon="text-red-600 w-6 h-6"
+          tw-backdrop="bg-white opacity-60"
         />
       </template>
     </BaseFileUploader>

package/src/components/BaseFileUploader.vue

@@ -20,7 +20,7 @@
         >
           <BaseLoadingCover
             :delay="0"
-            icon-class="w-6 h-6 text-primary-600"
+            tw-icon="w-6 h-6 text-primary-600"
             :model-value="loading || uploading || slotProps.selecting"
           />
         </slot>
@@ -49,7 +49,7 @@ const props = withDefaults(
     disabled?: boolean;
     loading?: boolean;
     beforeUpload?: () => boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     accept?: string;
     acceptedExtensions?: string[];
@@ -63,7 +63,7 @@ const props = withDefaults(
     beforeUpload: (): boolean => {
       return true;
     },
-    buttonClass: '',
+    twButton: '',
     maxSize: undefined,
     accept: undefined,
     acceptedExtensions: undefined,
@@ -88,7 +88,7 @@ const componentInternal = computed(() => {
 const pickerProps = computed(() => {
   const pickerProps = {
     disabled: props.disabled || props.loading || uploading.value,
-    buttonClass: props.buttonClass,
+    twButton: props.twButton,
     maxSize: props.maxSize,
     accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
     acceptedExtensions: props.acceptedExtensions,

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,13 +19,16 @@
       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"
         >
           <div
-            class="absolute inset-0 h-full w-full opacity-80"
-            :class="loadingMaskClass"
+            class="absolute inset-0 h-full w-full"
+            :class="twMerge('bg-white opacity-80', twLoadingMask)"
           />
           <svg
             class="relative h-6 w-6 animate-spin text-blue-600"
@@ -46,6 +53,7 @@ import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { config, useNotificationsStore } from '@/index';
 import { get, isArray } from 'lodash';
 import { t } from '@/i18n';
+import { twMerge } from 'tailwind-merge';
 
 const notifications = useNotificationsStore();
 
@@ -94,8 +102,8 @@ const props = defineProps({
     },
     type: Function as PropType<(error: AxiosError) => void>,
   },
-  loadingMaskClass: {
-    default: 'bg-white',
+  twLoadingMask: {
+    default: '',
     type: String,
   },
   showNotificationOnError: {

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

@@ -2,7 +2,7 @@
   <BaseMenu
     class="inline-block"
     :position="mobile ? 'custom' : 'bottom-left'"
-    :menu-class="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+    :tw-menu="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
   >
     <template #button="{ open }">
       <div
@@ -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 menu-class="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">