sprintify-ui 0.5.12 → 0.6.1

package/src/components/BaseTagAutocomplete.vue

@@ -160,7 +160,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-
   max: {
     default: undefined,
     type: Number,
@@ -185,9 +184,13 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   twContainer: {
     default: '',
-    type: [String, Array] as PropType<string|string[]>,
+    type: [String, Array] as PropType<string | string[]>,
   },
 });
 
@@ -214,6 +217,20 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
+let openOfFocusTimeout = 0;
+
+onMounted(() => {
+  openOfFocusTimeout = setTimeout(() => {
+    if (props.focusOnMount) {
+      open();
+    }
+  }, 10)
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(openOfFocusTimeout);
+});
+
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 const keywords = ref('');

package/src/components/BaseTagAutocompleteFetch.vue

@@ -12,6 +12,7 @@
     :has-error="hasError"
     :max="max"
     :filter="() => true"
+    :focus-on-mount="focusOnMount"
     @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
@@ -111,6 +112,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);

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,16 +38,25 @@
 
 <script lang="ts" setup>
 import { useTooltip } from '@/composables/tooltip';
-import { PropType } from 'vue';
+import { unrefElement } from '@vueuse/core';
 
-const props = defineProps({
-    target: {
-        required: true,
-        type: Object as PropType<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

@@ -18,7 +18,6 @@ import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseClickOutside from './BaseClickOutside.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseCalendar from './BaseCalendar.vue';
 import BaseColor from './BaseColor.vue';
@@ -90,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';
@@ -118,7 +118,6 @@ export {
   BaseCard,
   BaseCardRow,
   BaseCharacterCounter,
-  BaseClickOutside,
   BaseClipboard,
   BaseCalendar,
   BaseColor,
@@ -190,6 +189,7 @@ export {
   BaseTextareaAutoresize,
   BaseTimeline,
   BaseTimelineItem,
+  BaseTooltip,
   BaseUniqueCode,
   BaseLayoutStacked,
   BaseLayoutStackedConfigurable,

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

@@ -1,28 +0,0 @@
-import { MaybeElement } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
-import { PropType } from 'vue';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    includes: {
-        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
-        default: () => never[];
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clickOutside: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    includes: {
-        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
-        default: () => never[];
-    };
-}>> & {
-    onClickOutside?: ((...args: any[]) => any) | undefined;
-}, {
-    includes: (string | MaybeRef<MaybeElement>)[];
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/BaseClickOutside.vue

@@ -1,37 +0,0 @@
-<template>
-  <div ref="root">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useClickOutside } from '@/composables/clickOutside';
-import { MaybeElement } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  includes: {
-    type: Array as PropType<(MaybeRef<MaybeElement> | string)[]>,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['clickOutside']);
-
-const root = ref<null | HTMLElement>(null);
-
-const includes = [] as (MaybeRef<MaybeElement> | string)[];
-
-function addInclude(include: MaybeRef<MaybeElement> | string) {
-  includes.push(include);
-}
-
-provide('clickOutside:addInclude', addInclude);
-
-useClickOutside(root, () => emit('clickOutside'), {
-  includes: () => {
-    return [...includes, ...props.includes];
-  },
-});
-</script>