sprintify-ui 0.5.11 → 0.5.12

package/dist/types/src/components/BaseLoadingCover.vue.d.ts

@@ -86,9 +86,9 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
     };
 }>>, {
-    delay: number;
-    duration: string;
     modelValue: boolean;
+    duration: string;
+    delay: number;
     size: "sm" | "lg";
     twBackdrop: string;
     twIcon: string;

package/dist/types/src/components/BaseMediaLibrary.vue.d.ts

@@ -74,9 +74,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     success: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
     start: (...args: any[]) => void;
     end: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     fail: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {

package/dist/types/src/components/BaseMenu.vue.d.ts

@@ -5,14 +5,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<ActionItem[]>;
     };
-    position: {
+    placement: {
         default: string;
-        type: PropType<"custom" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end">;
     };
     size: {
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    width: {
+        default: number;
+        type: NumberConstructor;
+    };
     twMenu: {
         default: string;
         type: PropType<string | string[]>;
@@ -26,14 +30,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<ActionItem[]>;
     };
-    position: {
+    placement: {
         default: string;
-        type: PropType<"custom" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end">;
     };
     size: {
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    width: {
+        default: number;
+        type: NumberConstructor;
+    };
     twMenu: {
         default: string;
         type: PropType<string | string[]>;
@@ -43,10 +51,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
 }>>, {
+    placement: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    width: number;
     size: "xs" | "sm" | "md";
     items: ActionItem[];
     twButton: string | Record<string, any> | unknown[];
-    position: "custom" | "bottom-left" | "bottom-right";
     twMenu: string | string[];
 }, {}>, {
     button?(_: {

package/dist/types/src/components/BaseModalCenter.vue.d.ts

@@ -62,10 +62,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    maxWidth: string;
     modelValue: boolean;
     closeOnOutsideClick: boolean;
     clipped: boolean;
+    maxWidth: string;
     twBackdrop: string | string[];
     verticalAlign: string;
     showCloseButton: boolean;

package/dist/types/src/components/BaseModalSide.vue.d.ts

@@ -46,10 +46,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    maxWidth: string;
     modelValue: boolean;
     closeOnOutsideClick: boolean;
     clipped: boolean;
+    maxWidth: string;
     twBackdrop: string | string[];
 }, {}>, {
     default?(_: {

package/dist/types/src/components/BaseRichText.vue.d.ts

@@ -83,12 +83,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    theme: "" | "snow" | "bubble";
     modelValue: string | Delta | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
     enable: boolean;
     toolbar: string | Record<string, any> | unknown[] | undefined;
+    theme: "" | "snow" | "bubble";
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseSelect.vue.d.ts

@@ -82,11 +82,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
+    options: Option[];
     modelValue: SelectOption | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
-    options: Option[];
     labelKey: string;
     valueKey: string;
 }, {}>, {

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -155,11 +155,11 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     meta: Record<string, any> | unknown[];
-    width: number;
     toggle: boolean;
+    position: "left" | "right" | "center";
+    width: number;
     field: string;
     padding: string;
-    position: "left" | "right" | "center";
     searchable: boolean;
     numeric: boolean;
     sortable: boolean;

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -81,8 +81,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     open: typeof open;
     setKeywords: typeof setKeywords;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     close: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     scrollBottom: (...args: any[]) => void;
     typing: (...args: any[]) => void;
     open: (...args: any[]) => void;

package/dist/types/src/components/BaseTagAutocompleteFetch.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     close: () => void | undefined;
     setKeywords: (input: string) => void | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     focus: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     scrollBottom: (...args: any[]) => void;
     typing: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -52,8 +52,8 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     input: (...args: any[]) => void;
     submit: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
     focus: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;

package/dist/types/src/components/BaseTooltip.vue.d.ts

@@ -0,0 +1,20 @@
+import { PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    target: {
+        required: true;
+        type: PropType<HTMLElement | null>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    target: {
+        required: true;
+        type: PropType<HTMLElement | null>;
+    };
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/composables/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { UseFloatingOptions, MaybeElement, UseFloatingReturn } from "@floating-ui/vue";
+type ReturnType = UseFloatingReturn & {
+    showTooltip: Ref<boolean>;
+};
+import { Ref } from "vue";
+declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, options?: UseFloatingOptions | undefined): ReturnType;
+export { useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -29,7 +29,6 @@
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
     "maska": "^2.1.3",
-    "microtip": "^0.2.2",
     "object-to-formdata": "^4.4.2",
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
@@ -39,6 +38,7 @@
     "vue-router": "^4.0.0"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.2",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
     "@fullcalendar/interaction": "^6.1.8",
@@ -98,7 +98,6 @@
     "lodash": "^4.17.21",
     "luxon": "^3.2.1",
     "maska": "^2.1.6",
-    "microtip": "^0.2.2",
     "object-hash": "^3.0.0",
     "object-to-formdata": "^4.4.2",
     "pinia": "^2.0.30",

package/src/assets/main.css

@@ -1,4 +1,3 @@
-@import "microtip/microtip.css";
 @import "./form.css";
 @import "./flatpickr.css";
 

package/src/components/BaseAddressForm.vue

@@ -119,7 +119,7 @@ const props = withDefaults(
   defineProps<{
     modelValue: undefined | null | Address;
     prefix: string | null;
-    required: boolean;
+    required?: boolean;
     countries?: Country[];
     regions?: Region[];
     restrictCountry?: boolean;
@@ -127,7 +127,6 @@ const props = withDefaults(
     hideCountry?: boolean;
   }>(),
   {
-    required: false,
     modelValue() {
       return {};
     },

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/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/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/BaseHeader.vue

@@ -78,7 +78,6 @@
             v-if="secondaryActions.length"
             :items="secondaryActions"
             size="sm"
-            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
           >
             <template #button="{ open }">
               <div

package/src/components/BaseInputLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <label :class="classes">
     <div
-      :ref="help ? 'info' : ''"
+      ref="labelRef"
       class="relative inline-flex"
       :class="[help ? 'cursor-help' : 'cursor-default']"
     >
@@ -18,16 +18,25 @@
         class="ml-0.5 text-red-600"
       > *</div>
     </div>
+
+    <BaseTooltip
+      v-if="help"
+      :target="labelRef"
+    >
+      <div class="text-xs">
+        {{ help }}
+      </div>
+    </BaseTooltip>
+
   </label>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
-import { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
+import BaseTooltip from './BaseTooltip.vue';
 
-const props = defineProps({
+defineProps({
   required: {
     default: false,
     type: Boolean,
@@ -46,12 +55,6 @@ const props = defineProps({
   },
 });
 
-const info = ref();
-const content = computed(() => { return props.help })
-
-useTippy(info, {
-  content: content,
-  placement: 'auto',
-})
+const labelRef = ref();
 
 </script>

package/src/components/BaseLayoutNotificationDropdown.vue

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