sprintify-ui 0.6.0 → 0.6.1

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

@@ -41,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>>, {
+    trim: boolean;
     min: number;
     max: number;
-    trim: boolean;
     removeDoubleSpaces: boolean;
 }, {}>;
 export default _default;

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

@@ -1,15 +1,36 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    target: {
-        type: import("vue").PropType<HTMLElement | null>;
-        required: true;
+    class: {
+        type: import("vue").PropType<string | string[] | null>;
+        default: null;
+    };
+    text: {
+        type: import("vue").PropType<string | null>;
+        default: null;
+    };
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    target: {
-        type: import("vue").PropType<HTMLElement | null>;
-        required: true;
+    class: {
+        type: import("vue").PropType<string | string[] | null>;
+        default: null;
+    };
+    text: {
+        type: import("vue").PropType<string | null>;
+        default: null;
+    };
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
-}>>, {}, {}>, {
+}>>, {
+    class: string | string[] | null;
+    text: string | null;
+    visible: boolean;
+}, {}>, {
     default?(_: {}): any;
+    tooltip?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/types/src/components/index.d.ts

@@ -89,9 +89,10 @@ import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import BaseTimeline from './BaseTimeline.vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseTooltip from './BaseTooltip.vue';
 import BaseUniqueCode from './BaseUniqueCode.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAvatar.vue

@@ -1,49 +1,40 @@
 <template>
-  <component
-    :is="to ? 'RouterLink' : 'div'"
-    ref="buttonRef"
-    :to="to"
+  <BaseTooltip
+    :visible="tooltip"
+    :text="tooltipText"
     :class="classInternal"
   >
-    <img
-      :src="user.avatar_url"
-      :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
-      class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
+    <component
+      :is="to ? 'RouterLink' : 'div'"
+      :to="to"
+      class="flex items-center"
     >
-    <div
-      v-if="showDetails"
-      class="max-w-[120px] grow leading-tight"
-      :class="[
-        textSizeClass,
-        detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
-      ]"
-      :style="{
-        marginLeft: detailsPosition == 'right' ? spacing : '0',
-        marginRight: detailsPosition == 'left' ? spacing : '0',
-      }"
-    >
-      <div class="truncate">
-        {{ user.full_name }}
-      </div>
-      <div class="truncate font-light opacity-50">
-        {{ user.email }}
-      </div>
-    </div>
-
-    <BaseTooltip
-      v-if="tooltip"
-      :target="buttonRef"
-    >
-      <div>
-        <p class="text-xs font-medium leading-tight">
+      <img
+        :src="user.avatar_url"
+        :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+        class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
+      >
+      <div
+        v-if="showDetails"
+        class="max-w-[120px] grow leading-tight"
+        :class="[
+          textSizeClass,
+          detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
+        ]"
+        :style="{
+          marginLeft: detailsPosition == 'right' ? spacing : '0',
+          marginRight: detailsPosition == 'left' ? spacing : '0',
+        }"
+      >
+        <div class="truncate">
           {{ user.full_name }}
-        </p>
-        <p class="text-xs text-slate-500 leading-tight">
+        </div>
+        <div class="truncate font-light opacity-50">
           {{ user.email }}
-        </p>
+        </div>
       </div>
-    </BaseTooltip>
-  </component>
+    </component>
+  </BaseTooltip>
 </template>
 
 <script lang="ts" setup>
@@ -97,7 +88,19 @@ const classInternal = computed(() => {
   );
 })
 
-const buttonRef = ref<HTMLElement | null>(null);
+const tooltipText = computed(() => {
+
+  if (!props.tooltip) {
+    return null;
+  }
+
+  return `<p class="font-medium leading-tight">
+  ${props.user.full_name}
+</p>
+<p class="text-slate-500 leading-tight">
+  ${props.user.email}
+</p>`;
+})
 
 const sizeClass = computed((): string => {
   const base = 'h-9 w-9';

package/src/components/BaseDisplayRelativeTime.vue

@@ -1,26 +1,22 @@
 <template>
-  <component
-    :is="as"
-    ref="tooltipRef"
+  <BaseTooltip
+    :visible="tooltip"
+    :text="tooltipContent"
   >
-    <slot
-      name="default"
-      :readable-date="readableDate"
+    <component
+      :is="as"
+      ref="tooltipRef"
     >
-      <span class="text-xs text-slate-600">
-        {{ readableDate }}
-      </span>
-    </slot>
-
-    <BaseTooltip
-      v-if="tooltip"
-      :target="tooltipRef"
-    >
-      <div class="text-xs">
-        {{ tooltipContent }}
-      </div>
-    </BaseTooltip>
-  </component>
+      <slot
+        name="default"
+        :readable-date="readableDate"
+      >
+        <span class="text-xs text-slate-600">
+          {{ readableDate }}
+        </span>
+      </slot>
+    </component>
+  </BaseTooltip>
 </template>
 
 <script lang="ts" setup>
@@ -52,6 +48,11 @@ const props = defineProps({
 const tooltipRef = ref();
 
 const tooltipContent = computed(() => {
+
+  if (!props.tooltip) {
+    return null;
+  }
+
   return DateTime.fromISO(props.value)
     .setLocale(useI18nStore().locale)
     .toLocaleString(DateTime.DATETIME_MED);

package/src/components/BaseInputLabel.vue

@@ -7,27 +7,21 @@
     >
       <div> {{ label }}</div>
 
-      <BaseIcon
+      <BaseTooltip
         v-if="help"
-        class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
-        icon="mdi:information-outline"
-      />
+        :text="help"
+      >
+        <BaseIcon
+          class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
+          icon="mdi:information-outline"
+        />
+      </BaseTooltip>
 
       <div
         v-if="required"
         class="ml-0.5 text-red-600"
       > *</div>
     </div>
-
-    <BaseTooltip
-      v-if="help"
-      :target="labelRef"
-    >
-      <div class="text-xs">
-        {{ help }}
-      </div>
-    </BaseTooltip>
-
   </label>
 </template>
 

package/src/components/BaseTooltip.stories.js

@@ -0,0 +1,62 @@
+import BaseTooltip from './BaseTooltip.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+    title: 'Components/BaseTooltip',
+    component: BaseTooltip,
+    args: {
+        text: 'Click here to learn more about this button',
+    },
+};
+
+const Template = (args) => ({
+    components: {
+        BaseCard,
+        BaseCardRow,
+        BaseTooltip,
+    },
+    setup() {
+        return { args };
+    },
+    template: `
+    <BaseCard>
+        <BaseCardRow size=sm>
+        <BaseTooltip class="inline-block" v-bind="args">
+            <div>Hover me, the tooltip show appear outside the BaseCard</div>
+        </BaseTooltip>
+        </BaseCardRow>
+    </BaseCard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const CustomSlotTemplate = (args) => ({
+    components: {
+        BaseCard,
+        BaseCardRow,
+        BaseTooltip,
+    },
+    setup() {
+        return { args };
+    },
+    template: `
+    <BaseCard>
+        <BaseCardRow size=sm>
+            <BaseTooltip class="inline-block" v-bind="args">
+                <div>Hover me, the tooltip show appear outside the BaseCard</div>
+                <template #tooltip>
+                    <div class="bg-black text-white text-xs p-3">
+                        {{ args.text }}
+                    </div>
+                </template>
+            </BaseTooltip>
+        </BaseCardRow>
+    </BaseCard>
+  `,
+});
+
+export const CustomSlot = CustomSlotTemplate.bind({});
+CustomSlot.args = {};

package/src/components/BaseTooltip.vue

@@ -1,5 +1,14 @@
 <template>
-  <Teleport to="body">
+  <div
+    ref="targetRef"
+    :class="props.class"
+  >
+    <slot />
+  </div>
+  <Teleport
+    v-if="visible"
+    to="body"
+  >
     <div
       ref="tooltipRef"
       class="fixed top-0 left-0 pointer-events-none z-tooltip"
@@ -13,12 +22,15 @@
         leave-from-class="transform scale-100 opacity-100"
         leave-to-class="transform scale-90 opacity-0"
       >
-        <div
+        <slot
           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"
+          name="tooltip"
         >
-          <slot />
-        </div>
+          <div
+            class="bg-white shadow-md text-xs max-w-xs leading-snug ring-1 ring-black ring-opacity-10 text-slate-900 rounded-md pt-1.5 pb-2 px-3"
+            v-html="text"
+          />
+        </slot>
       </transition>
     </div>
   </Teleport>
@@ -26,12 +38,25 @@
 
 <script lang="ts" setup>
 import { useTooltip } from '@/composables/tooltip';
+import { unrefElement } from '@vueuse/core';
 
-const props = defineProps<{
-  target: HTMLElement | null;
-}>();
+defineOptions({
+  inheritAttrs: false,
+});
 
-const targetInternal = computed(() => props.target ?? null);
+const props = withDefaults(defineProps<{
+  visible?: boolean,
+  text?: string | null | undefined;
+  class?: string[] | string | null | undefined;
+}>(), {
+  visible: true,
+  text: null,
+  class: null,
+});
+
+const targetRef = ref<HTMLElement | null>(null);
+
+const targetInternal = computed(() => unrefElement(targetRef));
 
 const tooltipRef = ref<HTMLElement | null>(null)
 

package/src/components/index.ts

@@ -89,6 +89,7 @@ import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import BaseTimeline from './BaseTimeline.vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseTooltip from './BaseTooltip.vue';
 import BaseUniqueCode from './BaseUniqueCode.vue';
 
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
@@ -188,6 +189,7 @@ export {
   BaseTextareaAutoresize,
   BaseTimeline,
   BaseTimelineItem,
+  BaseTooltip,
   BaseUniqueCode,
   BaseLayoutStacked,
   BaseLayoutStackedConfigurable,