sprintify-ui 0.1.18 → 0.2.1

package/src/components/BaseColor.vue

@@ -9,9 +9,9 @@
       :options="colorOptions"
       :multiple="multiple"
       :button-type="buttonType"
-      :button-class="''"
-      :button-selected-class="''"
-      :button-unselected-class="''"
+      tw-button=""
+      tw-button-selected=""
+      tw-button-unselected=""
       @update:model-value="(value) => transformModelValue(value)"
     >
       <template #option="option">
@@ -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,15 +63,14 @@
               <BaseDataIteratorSectionButton
                 :section="section"
                 @open="openSection(i)"
-              >
-              </BaseDataIteratorSectionButton>
+              />
             </template>
           </template>
 
           <!-- Menu -->
           <BaseMenu
             v-if="actions && actions.length"
-            menu-class="w-52"
+            tw-menu="w-52"
             :items="actions"
           >
             <template #button="{ open }">
@@ -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.stories.js

@@ -52,7 +52,7 @@ const template = `
       <div class="font-medium text-slate-900 leading-tight truncate">
         {{ row.title }}
       </div>
-      <p v-if="false" class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
+      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
         {{ row.subtitle }}
       </p>
     </div>

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"
@@ -47,7 +48,7 @@
             </div>
             <BaseMenu
               v-if="checkableActions?.length"
-              menu-class="w-52"
+              tw-menu="w-52"
               :items="checkableActions"
             >
               <template #button="{ open }">
@@ -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>
 

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
@@ -31,7 +35,7 @@
           <template #option="optionProps">
             <div
               :class="[optionProps.active ? 'bg-slate-100' : 'bg-white']"
-              class="mb-px flex items-center rounded py-1 px-1"
+              class="mb-px flex items-center rounded px-1 py-1"
             >
               <div class="flex grow items-center">
                 <slot
@@ -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>
@@ -126,7 +130,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:model-value', 'close']);
 
-const componentName = computed(() => {
+const componentName = computed<any>(() => {
   if (props.multiple) {
     if (props.url) {
       return BaseTagAutocompleteFetch;
@@ -141,10 +145,12 @@ const componentName = computed(() => {
   if (props.url) {
     return BaseAutocompleteFetch;
   }
+
   if (props.options) {
     return BaseAutocomplete;
   }
-  console.error('BaseDropdownAutocomplete: options or url is required');
+
+  throw new Error('BaseDropdownAutocomplete: options or url is required');
 });
 
 const autocomplete = ref<any>(null);

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