sprintify-ui 0.5.11 → 0.6.0

package/src/components/BaseAutocomplete.vue

@@ -26,11 +26,10 @@
             ref="inputElement"
             :value="keywords"
             type="text"
-            :placeholder="
-              placeholder ? placeholder : t('sui.autocomplete_placeholder')
-            "
-            class="relative w-full pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
+            :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
+            class="relative w-full placeholder:text-slate-400 disabled:cursor-not-allowed disabled:text-slate-300"
             :class="[
+              showDeleteButton ? 'pr-9' : '',
               select ? '-left-px rounded-r' : 'rounded',
               hasErrorInternal ? 'border-red-600' : 'border-slate-300',
               inputSizeClass,
@@ -63,7 +62,7 @@
       </div>
 
       <div
-        v-if="normalizedModelValue && !disabled && showModelValue"
+        v-if="showDeleteButton"
         class="absolute right-0 top-0 flex h-full items-center p-1"
       >
         <button
@@ -207,6 +206,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   /** Show an 'empty option', should use with showModelValue = true for better UX  */
   showEmptyOption: {
     default: false,
@@ -249,6 +252,20 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
+let openOfFocusTimeout = 0;
+
+onMounted(() => {
+  openOfFocusTimeout = setTimeout(() => {
+    if (props.focusOnMount) {
+      open();
+    }
+  }, 10)
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(openOfFocusTimeout);
+});
+
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 let timerId = 0;
@@ -321,6 +338,7 @@ useClickOutside(autocomplete, () => {
 function open() {
   clearInterval(timerId);
   // Always focus as a safety
+
   focus();
   // Only emit open if value changes
   if (!opened.value) {
@@ -513,6 +531,10 @@ const iconWrapClass = computed(() => {
   return 'pl-2.5';
 });
 
+const showDeleteButton = computed(() => {
+  return normalizedModelValue.value && !props.disabled && props.showModelValue;
+});
+
 defineExpose({
   focus,
   blur,

package/src/components/BaseAutocompleteFetch.vue

@@ -17,6 +17,7 @@
     :dropdown-show="dropdownShow"
     :show-model-value="showModelValue"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :select="select"
@@ -144,6 +145,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseAvatar.vue

@@ -1,13 +1,14 @@
 <template>
   <component
     :is="to ? 'RouterLink' : 'div'"
+    ref="buttonRef"
     :to="to"
-    class="flex shrink-0 items-center"
+    :class="classInternal"
   >
     <img
       :src="user.avatar_url"
       :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
-      class="shrink-0 overflow-hidden rounded-full object-cover object-center"
+      class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
     >
     <div
       v-if="showDetails"
@@ -28,6 +29,20 @@
         {{ user.email }}
       </div>
     </div>
+
+    <BaseTooltip
+      v-if="tooltip"
+      :target="buttonRef"
+    >
+      <div>
+        <p class="text-xs font-medium leading-tight">
+          {{ user.full_name }}
+        </p>
+        <p class="text-xs text-slate-500 leading-tight">
+          {{ user.email }}
+        </p>
+      </div>
+    </BaseTooltip>
   </component>
 </template>
 
@@ -35,6 +50,12 @@
 import { PropType } from 'vue';
 import { User } from '@/types/User';
 import { RouteLocationRaw } from 'vue-router';
+import { twMerge } from 'tailwind-merge';
+import BaseTooltip from './BaseTooltip.vue';
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = defineProps({
   user: {
@@ -53,12 +74,31 @@ const props = defineProps({
     default: 'right',
     type: String as PropType<'left' | 'right'>,
   },
+  class: {
+    default: '',
+    type: String,
+  },
+  tooltip: {
+    default: false,
+    type: Boolean,
+  },
   to: {
     default: undefined,
     type: [String, Object] as PropType<RouteLocationRaw>,
   },
 });
 
+const classInternal = computed(() => {
+  return twMerge(
+    'inline-flex',
+    'shrink-0',
+    'items-center',
+    props.class,
+  );
+})
+
+const buttonRef = ref<HTMLElement | null>(null);
+
 const sizeClass = computed((): string => {
   const base = 'h-9 w-9';
 

package/src/components/BaseAvatarGroup.stories.js

@@ -13,7 +13,7 @@ export default {
 
 const user = {
   email: 'jane@witify.io',
-  full_name: 'Jane Doe',
+  full_name: 'Jane Doe with a very long name',
   avatar_url:
     'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
 };

package/src/components/BaseAvatarGroup.vue

@@ -3,15 +3,15 @@
     <div
       v-for="(user, index) in users"
       :key="user.email + '-' + index"
-      role="tooltip"
       class="shrink-0"
-      :aria-label="user.full_name + '\n' + user.email"
       :style="{
         marginLeft: index === 0 ? '0' : '-' + spacing,
       }"
     >
       <div class="rounded-full border-[3px] border-white">
         <BaseAvatar
+          class="flex"
+          tooltip
           :user="user"
           :size="size"
           :show-details="false"

package/src/components/BaseBelongsTo.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :select="select"
     @update:model-value="onUpdate"
   >
@@ -105,6 +106,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseBelongsToFetch.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :select="select"
     @update:model-value="onUpdate"
   >
@@ -115,6 +116,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseClipboard.vue

@@ -1,17 +1,63 @@
 <template>
   <button
-    ref="btn"
+    ref="buttonRef"
     type="button"
     class="relative inline-flex items-center"
+    @click="copyText"
   >
     <slot />
+    <Teleport
+      to="body"
+    >
+      <div
+        ref="floatingRef"
+        :style="floatingStyles"
+        class="fixed top-0 left-0 pointer-events-none"
+      >
+        <transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
+          enter-to-class="transform translate-y-0 scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform translate-y-0 scale-100 opacity-100"
+          leave-to-class="transform -translate-y-2 scale-95 opacity-0"
+        >
+          <div
+            v-if="showTooltip"
+            class="bg-white shadow-md ring-1 ring-black ring-opacity-10 text-slate-900 rounded-md pt-1.5 pb-2 px-3 text-xs"
+          >
+            <div v-if="showCopied">
+              <div class="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-5 h-5 mr-1 text-green-500"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  ></path>
+                </svg>
+                {{ t('sui.copied') }}
+              </div>
+            </div>
+            <div v-else>
+              {{ t('sui.click_to_copy') }}
+            </div>
+          </div>
+        </transition>
+      </div>
+    </Teleport> 
   </button>
 </template>
 
 <script lang="ts" setup>
 import { t } from '@/i18n';
-import { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
+import { useTooltip } from '@/composables/tooltip';
 
 const showCopied = ref(false);
 
@@ -22,33 +68,10 @@ const props = defineProps({
   },
 });
 
-const btn = ref();
+const buttonRef = ref();
+const floatingRef = ref();
 
-const content = computed(() => {
-  return showCopied.value ?
-    `<div class="flex items-center">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 text-green-500">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      ${t('sui.copied')}
-    </div>` :
-
-    t('sui.click_to_copy')
-})
-
-useTippy(btn, {
-  content: content,
-  placement: 'auto',
-  interactive: true,
-  hideOnClick: 'toggle',
-  trigger: 'mouseenter click',
-  allowHTML: true,
-  onTrigger(instance, event) {
-    if (event.type === 'click') {
-      copyText(instance)
-    }
-  },
-})
+const { showTooltip, floatingStyles } = useTooltip(buttonRef, floatingRef);
 
 async function writeText(text: string) {
   if (
@@ -64,19 +87,18 @@ async function writeText(text: string) {
 
 let timeoutId = undefined as undefined | number;
 
-function copyText(instance: any) {
-
+function copyText() {
   writeText(props.value);
-  showSuccessMessage(instance);
+  showSuccessMessage();
 }
 
-function showSuccessMessage(instance: any) {
+function showSuccessMessage() {
   showCopied.value = true;
   timeoutId = setTimeout(() => {
-    instance.hide();
     clearTimeout(timeoutId);
     setTimeout(() => {
       showCopied.value = false;
+      showTooltip.value = false;
     }, 200);
   }, 1600);
 }

package/src/components/BaseCounter.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex w-auto items-center justify-center rounded-full"
+    class="inline-flex w-auto items-center justify-center font-normal rounded-full"
     :class="[sizeClass, colorClass]"
   >
     {{ countLabel }}

package/src/components/BaseDataTable.vue

@@ -623,7 +623,7 @@ function onUpdateVisibleColumn() {
 */
 
 const rowActionsInternal = computed<RowAction[]>(() => {
-  const actions = cloneDeep(props.rowActions) ?? [];
+  const actions = [];
 
   if (props.editUrl && props.editButton) {
     actions.push({
@@ -634,6 +634,8 @@ const rowActionsInternal = computed<RowAction[]>(() => {
     });
   }
 
+  actions.push(...cloneDeep(props.rowActions) ?? []);
+
   if (props.deleteUrl && props.deleteButton) {
     actions.push({
       label: t('sui.delete'),

package/src/components/BaseDatePicker.vue

@@ -232,10 +232,10 @@ onMounted(() => {
   init();
 });
 
-onBeforeUnmount(() => {
-  if (picker) {
-    picker.destroy();
-  }
+onUnmounted(() => {
+  // Cause weird animation problems when using with BaseDropdown
+  // We assume the calendar will self destroy when the component is unmounted
+  // picker?.destroy();
 });
 
 function init() {

package/src/components/BaseDisplayRelativeTime.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="as"
-    :ref="showTooltip ? 'tooltip' : ''"
+    ref="tooltipRef"
   >
     <slot
       name="default"
@@ -11,6 +11,15 @@
         {{ readableDate }}
       </span>
     </slot>
+
+    <BaseTooltip
+      v-if="tooltip"
+      :target="tooltipRef"
+    >
+      <div class="text-xs">
+        {{ tooltipContent }}
+      </div>
+    </BaseTooltip>
   </component>
 </template>
 
@@ -19,16 +28,15 @@ import { t } from '@/i18n';
 import { useI18nStore } from '@/stores/i18n';
 import humanizeDuration from 'humanize-duration';
 import { DateTime } from 'luxon';
-import { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
+import BaseTooltip from './BaseTooltip.vue';
 
 const props = defineProps({
   value: {
     required: true,
     type: String,
   },
-  showTooltip: {
-    default: false,
+  tooltip: {
+    default: true,
     type: Boolean,
   },
   timeZone: {
@@ -41,19 +49,14 @@ const props = defineProps({
   },
 });
 
-const tooltip = ref();
+const tooltipRef = ref();
 
 const tooltipContent = computed(() => {
   return DateTime.fromISO(props.value)
     .setLocale(useI18nStore().locale)
-    .toLocaleString(DateTime.DATETIME_FULL);
+    .toLocaleString(DateTime.DATETIME_MED);
 });
 
-useTippy(tooltip, {
-  content: tooltipContent,
-  placement: 'auto',
-})
-
 const now = ref(DateTime.now().toSeconds());
 
 function getMinutes(duration: number) {

package/src/components/BaseDropdown.stories.js

@@ -3,7 +3,6 @@ import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
-import BaseClickOutside from './BaseClickOutside.vue';
 import { options } from '../../.storybook/utils';
 
 const items = [];
@@ -21,13 +20,12 @@ export default {
     placement: {
       control: {
         type: 'select',
-        options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
       },
+      options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
     },
   },
   args: {
     placement: 'bottom-start',
-    padding: 8,
   },
 };
 
@@ -73,40 +71,23 @@ export const WithAutocomplete = (args) => ({
   components: { BaseDropdown, BaseAutocomplete, BaseBadge },
   setup() {
     const value = ref(null);
-    const autocomplete = ref(null);
-
-    function onOpen() {
-      if (autocomplete.value) {
-        setTimeout(() => {
-          autocomplete.value.open();
-        }, 1);
-      }
-    }
-
-    function onClose() {
-      setTimeout(() => {
-        if (autocomplete.value) {
-          autocomplete.value.setKeywords('');
-        }
-      }, 10);
-    }
 
     function onUpdate(v, close) {
       if (v) {
         close();
       }
     }
-    return { args, options, value, onOpen, onClose, onUpdate, autocomplete };
+
+    return { args, options, value, onUpdate };
   },
   template: `
-    <BaseDropdown @open="onOpen" @close="onClose" v-bind="args">
+    <BaseDropdown v-bind="args">
       <template #button>
         <BaseBadge>{{ value ? value.label : 'Select a Character' }}</BaseBadge>
       </template>
       <template #dropdown="{close}">
-        <div class="bg-white shadow border border-slate-300 py-1 px-1 rounded" style="min-width: 250px">
+        <div class="bg-white shadow-lg rounded-md border py-2 px-2" style="min-width: 250px">
           <BaseAutocomplete
-            ref="autocomplete"
             required
             v-model="value"
             label-key="label" 
@@ -117,6 +98,7 @@ export const WithAutocomplete = (args) => ({
             :visibleFocus="false"
             dropdownShow="always"
             :showModelValue="false"
+            focus-on-mount
             @update:modelValue="onUpdate($event, close)"
           ></BaseAutocomplete>
         </div>
@@ -128,37 +110,8 @@ export const WithAutocomplete = (args) => ({
 WithAutocomplete.args = {
   animated: true,
   placement: 'bottom-start',
-  padding: 3,
 };
 
-export const ModalWithScroll = (args) => ({
-  components: { BaseDropdown, BaseModalCenter },
-  setup() {
-    return { args, items };
-  },
-  template: `
-  <BaseModalCenter :model-value="true">
-    <div class="p-10 bg-white">
-      <BaseDropdown v-bind="args">
-        <template #button>
-          <div class="btn btn-primary">Click me</div>
-        </template>
-        <template #dropdown>
-          <div 
-            class="bg-white shadow py-1 px-1 rounded" 
-            style="max-height: 200px; overflow: auto;" 
-            data-scroll-lock-scrollable>
-            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
-          </div>
-        </template>
-      </BaseDropdown>
-
-      <div style="height: 3000px;"></div>
-    </div>
-  </BaseModalCenter>
-  `,
-});
-
 export const WithDatePicker = (args) => ({
   components: { BaseDropdown, BaseDatePicker },
   setup() {
@@ -171,7 +124,7 @@ export const WithDatePicker = (args) => ({
       <div class="btn btn-primary">Click me</div>
     </template>
     <template #dropdown>
-      <div class="bg-white shadow-lg rounded border p-2">
+      <div class="bg-white shadow-lg rounded-md ring-1 ring-black ring-opacity-10 p-2">
         <BaseDatePicker v-model="date" :show-input="true" inline></BaseDatePicker>
       </div>
     </template>
@@ -180,31 +133,35 @@ export const WithDatePicker = (args) => ({
 });
 
 WithDatePicker.args = {
+  animated: true,
   placement: 'bottom-start',
 };
 
-export const WithinClickOutside = (args) => ({
-  components: { BaseDropdown, BaseClickOutside },
+export const ModalWithScroll = (args) => ({
+  components: { BaseDropdown, BaseModalCenter },
   setup() {
-    function onClickOutside() {
-      alert('click outside');
-    }
-    return { args, items, onClickOutside };
+    const open = ref(true);
+    return { args, items, open };
   },
   template: `
-  <BaseClickOutside @clickOutside="onClickOutside">
-    <div class="bg-slate-200 shadow-md min-h-[100px] p-3">
+  <BaseModalCenter v-model="open">
+    <div class="p-10 bg-white">
       <BaseDropdown v-bind="args">
         <template #button>
           <div class="btn btn-primary">Click me</div>
         </template>
         <template #dropdown>
-          <div class="bg-white shadow-lg rounded border p-2 w-[260px]">
-            ...
+          <div 
+            class="bg-white shadow py-1 px-1 rounded" 
+            style="max-height: 200px; overflow: auto;" 
+            data-scroll-lock-scrollable>
+            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
           </div>
         </template>
       </BaseDropdown>
+
+      <div style="height: 3000px;"></div>
     </div>
-  </BaseClickOutside>
+  </BaseModalCenter>
   `,
 });