sprintify-ui 0.2.0 → 0.2.3

package/src/assets/flatpickr.css

@@ -0,0 +1,238 @@
+@import 'flatpickr/dist/flatpickr.min.css';
+
+/* Customise flatpickr */
+* {
+    --calendarPadding: 10px;
+    --daySize: 36px;
+    --daysWidth: calc(var(--daySize)*7);
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -8px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.flatpickr-calendar {
+    border: inherit;
+    @apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
+    padding: var(--calendarPadding);
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
+}
+
+@screen lg {
+    .flatpickr-calendar {
+        @apply left-0 right-auto;
+        margin-left: 0;
+    }
+}
+
+.flatpickr-right.flatpickr-calendar {
+    @apply right-0 left-auto;
+    margin-left: 0;
+}
+
+.flatpickr-calendar.animate.open {
+    animation: fpFadeInDown 200ms ease-out;
+}
+
+.flatpickr-calendar.static {
+    position: absolute;
+    top: calc(100% + 4px);
+}
+
+.flatpickr-calendar.static.open {
+    z-index: 20;
+}
+
+.flatpickr-days {
+    width: var(--daysWidth);
+}
+
+.dayContainer {
+    width: var(--daysWidth);
+    min-width: var(--daysWidth);
+    max-width: var(--daysWidth);
+}
+
+.flatpickr-day {
+    @apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
+    max-width: var(--daySize);
+    height: var(--daySize);
+    line-height: var(--daySize);
+}
+
+.flatpickr-day,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+    border: none;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply bg-transparent;
+}
+
+.flatpickr-day, 
+.flatpickr-day.prevMonthDay, 
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange,
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange,
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+    border-radius: 0;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply text-slate-400 dark:text-slate-500;
+}
+
+.rangeMode .flatpickr-day {
+    margin: 0;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+    @apply bg-primary-500 text-primary-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus,
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+    @apply bg-primary-400 text-primary-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: none;
+}
+
+.flatpickr-months {
+    align-items: center;
+    margin-top: -8px;
+    margin-bottom: 6px;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+    position: static;
+    height: auto;
+    @apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;    
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+    width: 7px;
+    height: 11px;
+    fill: currentColor;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+    @apply fill-current;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+    margin-left: -10px;
+}
+
+.flatpickr-months .flatpickr-next-month {
+    margin-right: -10px;
+}
+
+.flatpickr-months .flatpickr-month {
+    @apply text-slate-800 dark:text-slate-100;
+    height: auto;
+    line-height: inherit;
+}
+
+.flatpickr-current-month {
+    @apply text-sm font-medium;
+    position: static;
+    height: auto;
+    width: auto;
+    left: auto;
+    padding: 0;
+}
+
+.flatpickr-current-month span.cur-month {
+    @apply font-medium m-0;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+    background: none;
+}
+
+.flatpickr-current-month input.cur-year {
+    font-weight: inherit;
+    box-shadow: none !important;
+}
+
+.numInputWrapper:hover {
+    background: none;
+}
+
+.numInputWrapper span {
+    display: none;
+}
+
+span.flatpickr-weekday {
+    @apply text-slate-400 dark:text-slate-500 font-medium text-xs;
+}
+
+.flatpickr-calendar.arrowTop::before,
+.flatpickr-calendar.arrowTop::after,
+.flatpickr-calendar.arrowBottom::before,
+.flatpickr-calendar.arrowBottom::after {
+    display: none;
+}

package/src/assets/main.css

@@ -1,7 +1,8 @@
-@import 'microtip/microtip.css';
-@import './form.css';
+@import "microtip/microtip.css";
+@import "./form.css";
+@import "./flatpickr.css";
 
-[aria-label][role~='tooltip']::after {
+[aria-label][role~="tooltip"]::after {
   white-space: pre-line;
 }
 

package/src/components/BaseActionItem.vue

@@ -12,7 +12,7 @@
       :aria-current="isActive ? 'page' : undefined"
       @click.prevent="onClick(navigate)"
     >
-      <slot :active="isActive"> </slot>
+      <slot :active="isActive" />
     </a>
   </RouterLink>
   <button
@@ -22,10 +22,15 @@
     :class="props.class"
     @click="onClick(action)"
   >
-    <slot :active="false"> </slot>
+    <slot :active="false" />
   </button>
-  <a v-else-if="href" :href="href" :class="props.class" @click="onClick()">
-    <slot :active="false"> </slot>
+  <a
+    v-else-if="href"
+    :href="href"
+    :class="props.class"
+    @click="onClick()"
+  >
+    <slot :active="false" />
   </a>
 </template>
 

package/src/components/BaseActionItemButton.vue

@@ -11,7 +11,7 @@
       :icon="action.icon"
       :class="iconClasses"
       class="mr-2"
-    ></BaseIcon>
+    />
     <span :class="[action.icon ? 'pr-1' : '']">{{ action.label }}</span>
   </BaseActionItem>
 </template>

package/src/components/BaseAddressForm.vue

@@ -18,7 +18,10 @@
     />
   </BaseField>
 
-  <BaseField :name="`${namePrefix}address_2`" class="mb-4">
+  <BaseField
+    :name="`${namePrefix}address_2`"
+    class="mb-4"
+  >
     <BaseInput
       :model-value="normalizedModelValue.address_2 ?? ''"
       :placeholder="t('sui.address_2_description')"
@@ -69,8 +72,7 @@
         :disabled="props.restrictCountry"
         value-key="id"
         @update:model-value="update('country', $event)"
-      >
-      </BaseSelect>
+      />
     </BaseField>
     <BaseField
       v-if="!props.hideRegion"
@@ -87,8 +89,7 @@
         label-key="name"
         value-key="id"
         @update:model-value="update('region', $event)"
-      >
-      </BaseSelect>
+      />
     </BaseField>
   </div>
 </template>

package/src/components/BaseAlert.vue

@@ -3,7 +3,10 @@
     class="flex w-full items-start rounded-md p-4"
     :class="[backgroundClass, borderClass]"
   >
-    <div v-if="showIcon" class="mr-3">
+    <div
+      v-if="showIcon"
+      class="mr-3"
+    >
       <BaseIcon
         v-if="color == 'warning'"
         icon="heroicons-solid:exclamation"
@@ -35,7 +38,10 @@
         {{ title }}
       </h3>
 
-      <div v-if="$slots.default" :class="[textClass, 'text-sm leading-tight']">
+      <div
+        v-if="$slots.default"
+        :class="[textClass, 'text-sm leading-tight']"
+      >
         <slot />
       </div>
     </div>

package/src/components/BaseAppNotifications.vue

@@ -12,7 +12,10 @@
           leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
           leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
         >
-          <div v-for="notification in notifications" :key="notification.id">
+          <div
+            v-for="notification in notifications"
+            :key="notification.id"
+          >
             <div
               class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
             >

package/src/components/BaseAutocomplete.vue

@@ -36,11 +36,11 @@
               inputSizeClass,
               !visibleFocus
                 ? [
-                    'focus:ring-0',
-                    hasErrorInternal
-                      ? 'focus:border-red-600'
-                      : 'focus:border-slate-300',
-                  ]
+                  'focus:ring-0',
+                  hasErrorInternal
+                    ? 'focus:border-red-600'
+                    : 'focus:border-slate-300',
+                ]
                 : '',
             ]"
             autocomplete="off"
@@ -48,7 +48,7 @@
             @click="open"
             @input="onTextInput"
             @keydown="onTextKeydown"
-          />
+          >
           <div
             class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center"
             :class="[iconWrapClass]"
@@ -103,13 +103,22 @@
           @scroll-bottom="emit('scrollBottom')"
         >
           <template #empty="emptyProps">
-            <slot name="empty" v-bind="{ ...emptyProps, ...slotProps }" />
+            <slot
+              name="empty"
+              v-bind="{ ...emptyProps, ...slotProps }"
+            />
           </template>
           <template #option="optionProps">
-            <slot name="option" v-bind="{ ...optionProps, ...slotProps }" />
+            <slot
+              name="option"
+              v-bind="{ ...optionProps, ...slotProps }"
+            />
           </template>
           <template #footer="footerProps">
-            <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
+            <slot
+              name="footer"
+              v-bind="{ ...footerProps, ...slotProps }"
+            />
           </template>
         </BaseAutocompleteDrawer>
       </div>

package/src/components/BaseAutocompleteDrawer.vue

@@ -6,7 +6,10 @@
       class="max-h-[214px] w-full overflow-y-auto"
     >
       <!-- Slot empty -->
-      <slot v-if="options.length == 0" name="empty">
+      <slot
+        v-if="options.length == 0"
+        name="empty"
+      >
         <div
           class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
         >
@@ -15,7 +18,10 @@
       </slot>
 
       <!-- Option list -->
-      <ul v-else :class="twDrawer">
+      <ul
+        v-else
+        :class="twDrawer"
+      >
         <li
           v-for="(option, index) in options"
           :key="option.value ? option.value : 'null'"
@@ -48,7 +54,7 @@
                     v-if="isSelected(option)"
                     icon="heroicons:check-20-solid"
                     :class="optionIconClass"
-                  ></BaseIcon>
+                  />
                 </div>
               </div>
             </slot>
@@ -65,16 +71,22 @@
       >
         <div
           class="absolute inset-0 h-full w-full bg-gradient-to-b from-transparent to-white"
-        ></div>
+        />
         <BaseSpinnerSmall
           class="mx-auto h-7 w-7 text-slate-300"
-        ></BaseSpinnerSmall>
+        />
       </div>
     </div>
 
     <div ref="footer">
-      <div v-if="$slots.footer" class="bg-white">
-        <slot :options="options" name="footer" />
+      <div
+        v-if="$slots.footer"
+        class="bg-white"
+      >
+        <slot
+          :options="options"
+          name="footer"
+        />
       </div>
     </div>
 
@@ -83,12 +95,18 @@
       class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
     >
       <div class="space-y-1">
-        <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
-        <BaseSkeleton class="h-7 w-full opacity-70" delay="50ms"></BaseSkeleton>
+        <BaseSkeleton
+          class="h-7 w-full"
+          delay="0ms"
+        />
+        <BaseSkeleton
+          class="h-7 w-full opacity-70"
+          delay="50ms"
+        />
         <BaseSkeleton
           class="h-7 w-full opacity-30"
           delay="100ms"
-        ></BaseSkeleton>
+        />
       </div>
     </div>
   </div>

package/src/components/BaseAutocompleteFetch.vue

@@ -28,15 +28,26 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps" />
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
 
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" :keywords="keywords" />
+      <slot
+        name="footer"
+        v-bind="footerProps"
+        :keywords="keywords"
+      />
     </template>
 
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+        :first-search="firstSearch"
+      >
         <div
           v-if="firstSearch"
           class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"

package/src/components/BaseAvatar.vue

@@ -8,7 +8,7 @@
       :src="user.avatar_url"
       :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
       class="shrink-0 overflow-hidden rounded-full object-cover object-center"
-    />
+    >
     <div
       v-if="showDetails"
       class="max-w-[120px] grow leading-tight"

package/src/components/BaseBadge.vue

@@ -9,8 +9,7 @@
       :icon="icon"
       class="shrink-0"
       :class="iconSizeClasses"
-    >
-    </BaseIcon>
+    />
     <slot />
   </span>
 </template>

package/src/components/BaseBelongsTo.vue

@@ -21,13 +21,22 @@
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps"></slot>
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps"></slot>
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
     </template>
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps"></slot>
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
     </template>
   </BaseAutocompleteFetch>
 </template>

package/src/components/BaseBreadcrumbs.vue

@@ -5,8 +5,14 @@
       class="hidden sm:flex"
       aria-label="Breadcrumb"
     >
-      <ol role="list" class="flex items-center space-x-3">
-        <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
+      <ol
+        role="list"
+        class="flex items-center space-x-3"
+      >
+        <li
+          v-for="(breadcrumb, index) in breadcrumbs"
+          :key="index"
+        >
           <div class="flex items-center">
             <svg
               v-if="index > 0"

package/src/components/BaseButton.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="as" ref="button" class="btn">
+  <component
+    :is="as"
+    ref="button"
+    class="btn"
+  >
     <div
       class="flex items-center justify-center"
       :class="{ 'opacity-0': loading }"
@@ -11,7 +15,10 @@
       v-if="loading"
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
-      <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+      <svg
+        class="h-4 w-4 animate-spin"
+        viewBox="0 0 24 24"
+      >
         <path
           fill="currentColor"
           d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"

package/src/components/BaseButtonGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
+  <div
+    class="flex flex-wrap"
+    :style="{ margin: '-' + spacing }"
+  >
     <div
       v-for="option in normalizedOptions"
       :key="option.value ? option.value : 'null'"

package/src/components/BaseCharacterCounter.vue

@@ -8,7 +8,10 @@
     >
       {{ length }}/{{ max }}
     </div>
-    <div v-else-if="min && length < min" class="text-red-600">
+    <div
+      v-else-if="min && length < min"
+      class="text-red-600"
+    >
       {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
     </div>
   </div>

package/src/components/BaseClickOutside.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="root">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/src/components/BaseClipboard.vue

@@ -6,7 +6,7 @@
     @mouseenter="showTooltip()"
     @mouseleave="hideTooltip()"
   >
-    <slot></slot>
+    <slot />
     <transition
       enter-active-class="transition duration-200 ease-out"
       enter-from-class="transform scale-90 opacity-0"
@@ -22,7 +22,10 @@
         <div
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
         >
-          <div v-if="showCopied" class="flex items-center">
+          <div
+            v-if="showCopied"
+            class="flex items-center"
+          >
             <BaseIcon
               class="mr-1 text-green-500"
               icon="heroicons:check-circle-solid"

package/src/components/BaseColor.vue

@@ -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>