sprintify-ui 0.1.18 → 0.2.1

package/src/components/BaseLoadingCover.stories.js

@@ -46,10 +46,10 @@ LargeSpinner.args = {
 
 export const SpinnerCustomClass = Template.bind({});
 SpinnerCustomClass.args = {
-  iconClass: 'text-red-500 w-10 h-10',
+  twIcon: 'text-red-500 w-10 h-10',
 };
 
 export const BackdropCustomClass = Template.bind({});
 BackdropCustomClass.args = {
-  backdropClass: 'bg-slate-100 opacity-50',
+  twBackdrop: 'bg-slate-100 opacity-50',
 };

package/src/components/BaseLoadingCover.vue

@@ -11,16 +11,23 @@
       v-if="showSpinner"
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
-      <div class="absolute h-full w-full" :class="backdropClass" />
+      <div :class="twMerge('absolute h-full w-full bg-white', twBackdrop)" />
 
-      <BaseSpinnerSmall v-if="size == 'sm'" :class="iconClass" />
-      <BaseSpinnerLarge v-else-if="size == 'lg'" :class="iconClass" />
+      <BaseSpinnerSmall
+        v-if="size == 'sm'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
+      <BaseSpinnerLarge
+        v-else-if="size == 'lg'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
     </div>
   </Transition>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
@@ -35,15 +42,15 @@ const props = defineProps({
   /**
    * Classes added to the backdrop
    */
-  backdropClass: {
-    default: 'bg-white',
+  twBackdrop: {
+    default: '',
     type: String,
   },
   /**
    * Classes added to the spinner icon
    */
-  iconClass: {
-    default: 'text-blue-500 w-10 h-10',
+  twIcon: {
+    default: '',
     type: String,
   },
   /**

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>

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

@@ -5,7 +5,7 @@
       :max-size="maxSize"
       :disabled="disabled"
       class="w-full"
-      button-class="w-full"
+      tw-button="w-full"
       :accept="accept"
       :accepted-extensions="acceptedExtensions"
       :url="uploadUrl"
@@ -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

@@ -6,8 +6,11 @@
     :class="[position == 'custom' ? 'static' : 'relative']"
   >
     <div>
-      <MenuButton :class="buttonClass">
-        <slot name="button" :open="open" />
+      <MenuButton :class="twButton">
+        <slot
+          name="button"
+          :open="open"
+        />
       </MenuButton>
     </div>
 
@@ -20,16 +23,35 @@
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        :class="[menuClass, menuPositionClass]"
+        :style="menuPositionStyles"
+        :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="my-1 -mx-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"
@@ -48,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"
@@ -68,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"
@@ -91,16 +120,13 @@ import { PropType } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import { MenuItemInterface } from '@/types';
 import BaseMenuItem from './BaseMenuItem.vue';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   items: {
     default: undefined,
     type: Array as PropType<MenuItemInterface[]>,
   },
-  menuClass: {
-    default: 'w-48',
-    type: [String, Array, Object],
-  },
   position: {
     default: 'bottom-left',
     type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
@@ -109,21 +135,31 @@ const props = defineProps({
     default: 'sm',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
-  buttonClass: {
+  twMenu: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  twButton: {
     default: 'flex',
     type: [String, Array, Object],
   },
 });
 
-const menuPositionClass = computed(() => {
+const menuPositionStyles = computed(() => {
   if (props.position == 'custom') {
-    return '';
+    return {};
   }
   if (props.position == 'bottom-left') {
-    return 'origin-top-right right-0';
+    return {
+      origin: 'top-right',
+      right: '0',
+    };
   }
   if (props.position == 'bottom-right') {
-    return 'origin-top-left left-0';
+    return {
+      origin: 'top-left',
+      left: '0',
+    };
   }
 });
 </script>

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

@@ -32,8 +32,12 @@
               >
                 <div
                   v-if="modelValue"
-                  :class="backdropClass"
-                  class="fixed inset-0 transition-opacity"
+                  :class="
+                    twMerge(
+                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
+                      twBackdrop
+                    )
+                  "
                   @click="
                     closeOnOutsideClick
                       ? modal.close()
@@ -70,11 +74,14 @@
 
           <button
             v-if="showCloseButton"
-            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            class="right fixed right-2 top-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
             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>
@@ -84,6 +91,8 @@
 
 <script lang="ts" setup>
 import { useModal } from '@/composables/modal';
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   modelValue: {
@@ -94,10 +103,6 @@ const props = defineProps({
     default: 'center',
     type: String,
   },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
   closeOnOutsideClick: {
     default: true,
     type: Boolean,
@@ -114,6 +119,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseModalSide.vue

@@ -23,8 +23,12 @@
               >
                 <div
                   v-show="modelValue"
-                  :class="backdropClass"
-                  class="fixed inset-0 transition-opacity"
+                  :class="
+                    twMerge(
+                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
+                      twBackdrop
+                    )
+                  "
                   @click="
                     closeOnOutsideClick
                       ? modal.close()
@@ -75,6 +79,8 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 import { useModal } from '@/composables/modal';
 import { useBreakpoints } from '@/composables/breakpoints';
 
@@ -87,10 +93,6 @@ const props = defineProps({
     default: '32rem',
     type: String,
   },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
   closeOnOutsideClick: {
     default: true,
     type: Boolean,
@@ -99,6 +101,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseNavbar.stories.js

@@ -99,7 +99,7 @@ const Template = (args) => ({
 
             <div class="hidden md:ml-6 md:flex md:items-center">
               <!-- Profile dropdown -->
-              <BaseMenu menu-class="w-52" :items="userMenu">
+              <BaseMenu tw-menu="w-52" :items="userMenu">
                 <template #button="{ open }">
                   <div
                     class="flex rounded-full"

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"