sprintify-ui 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -41,7 +41,8 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.12",
     "color2k": "^2.0.2",
-    "tailwind-merge": "^1.12.0"
+    "tailwind-merge": "^1.12.0",
+    "vue-tippy": "^6.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

package/src/components/BaseClipboard.stories.js

@@ -3,6 +3,7 @@ import BaseClipboard from './BaseClipboard.vue';
 export default {
   title: 'Components/BaseClipboard',
   component: BaseClipboard,
+  args: {},
   argTypes: {},
 };
 
@@ -12,13 +13,13 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <BaseClipboard class="mb-3">
+    <BaseClipboard v-bind="args" class="mb-3">
       <span class="underline text-blue-600">{{ args.value }}</span>
     </BaseClipboard>
 
     <br>
 
-    <BaseClipboard class="mb-3 border border-slate-200 rounded px-2 py-px">
+    <BaseClipboard v-bind="args" class="mb-3 border border-slate-200 rounded px-2 py-px">
       <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
       <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
     </BaseClipboard>

package/src/components/BaseClipboard.vue

@@ -1,50 +1,18 @@
 <template>
   <button
+    ref="btn"
     type="button"
     class="relative inline-flex items-center"
-    @click="copyText()"
-    @mouseenter="showTooltip()"
-    @mouseleave="hideTooltip()"
   >
     <slot />
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="transform scale-90 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-90 opacity-0"
-    >
-      <div
-        v-show="tooltipShown"
-        class="pointer-events-none absolute left-full z-[1] items-center"
-      >
-        <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"
-          >
-            <BaseIcon
-              class="mr-1 text-green-500"
-              icon="heroicons:check-circle-solid"
-            />
-            {{ t('sui.copied') }}
-          </div>
-          <div v-else>
-            {{ t('sui.click_to_copy') }}
-          </div>
-        </div>
-      </div>
-    </transition>
   </button>
 </template>
 
 <script lang="ts" setup>
 import { t } from '@/i18n';
+import { useTippy } from 'vue-tippy'
+import 'tippy.js/dist/tippy.css'
 
-const tooltipShown = ref(false);
 const showCopied = ref(false);
 
 const props = defineProps({
@@ -54,6 +22,34 @@ const props = defineProps({
   },
 });
 
+const btn = 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)
+    }
+  },
+})
+
 async function writeText(text: string) {
   if (
     typeof navigator === 'undefined' ||
@@ -66,31 +62,19 @@ async function writeText(text: string) {
   await navigator.clipboard.writeText(text);
 }
 
-let timeoutId = null as null | number;
+let timeoutId = undefined as undefined | number;
 
-function showTooltip() {
-  tooltipShown.value = true;
-}
+function copyText(instance: any) {
 
-function hideTooltip() {
-  tooltipShown.value = false;
-  setTimeout(() => {
-    showCopied.value = false;
-  }, 200);
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
-}
-
-function copyText() {
   writeText(props.value);
-  showSuccessMessage();
+  showSuccessMessage(instance);
 }
 
-function showSuccessMessage() {
+function showSuccessMessage(instance: any) {
   showCopied.value = true;
   timeoutId = setTimeout(() => {
-    tooltipShown.value = false;
+    instance.hide();
+    clearTimeout(timeoutId);
     setTimeout(() => {
       showCopied.value = false;
     }, 200);

package/src/components/BaseDisplayRelativeTime.stories.js

@@ -8,16 +8,6 @@ export default {
     showTooltip: {
       control: { type: 'boolean' },
     },
-    tooltipPosition: {
-      options: ['top', 'bottom', 'right', 'left'],
-      control: { type: 'radio' },
-      if: { arg: 'showTooltip' },
-    },
-    tooltipSize: {
-      options: ['small', 'medium', 'large'],
-      control: { type: 'radio' },
-      if: { arg: 'showTooltip' },
-    },
   },
   args: {
     value: DateTime.now().minus({ minutes: 2 }).toISO(),
@@ -37,8 +27,6 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   showTooltip: true,
-  tooltipPosition: 'top',
-  tooltipSize: 'large',
 };
 
 const TemplateCustom = (args) => ({

package/src/components/BaseDisplayRelativeTime.vue

@@ -1,10 +1,7 @@
 <template>
   <component
     :is="as"
-    :aria-label="showTooltip ? tooltip : undefined"
-    :data-microtip-position="showTooltip ? tooltipPosition : undefined"
-    :data-microtip-size="showTooltip ? tooltipSize : undefined"
-    :role="showTooltip ? 'tooltip' : undefined"
+    :ref="showTooltip ? 'tooltip' : ''"
   >
     <slot
       name="default"
@@ -22,7 +19,9 @@ import { t } from '@/i18n';
 import { useI18nStore } from '@/stores/i18n';
 import humanizeDuration from 'humanize-duration';
 import { DateTime } from 'luxon';
-import { PropType } from 'vue';
+import { useTippy } from 'vue-tippy'
+import 'tippy.js/dist/tippy.css'
+
 const props = defineProps({
   value: {
     required: true,
@@ -32,14 +31,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  tooltipPosition: {
-    default: 'top',
-    type: String as PropType<'top' | 'right' | 'left' | 'bottom'>,
-  },
-  tooltipSize: {
-    default: 'large',
-    type: String as PropType<'small' | 'medium' | 'large'>,
-  },
   timeZone: {
     default: 'utc',
     type: String,
@@ -50,6 +41,19 @@ const props = defineProps({
   },
 });
 
+const tooltip = ref();
+
+const tooltipContent = computed(() => {
+  return DateTime.fromISO(props.value)
+    .setLocale(useI18nStore().locale)
+    .toLocaleString(DateTime.DATETIME_FULL);
+});
+
+useTippy(tooltip, {
+  content: tooltipContent,
+  placement: 'auto',
+})
+
 const now = ref(DateTime.now().toSeconds());
 
 function getMinutes(duration: number) {
@@ -111,11 +115,6 @@ const readableDate = computed(() => {
   return t('sui.x_ago', { duration: durationHuman });
 });
 
-const tooltip = computed(() => {
-  return DateTime.fromISO(props.value)
-    .setLocale(useI18nStore().locale)
-    .toLocaleString(DateTime.DATETIME_FULL);
-});
 
 onBeforeUnmount(() => {
   clearInterval(intervalId);

package/src/components/BaseInputLabel.stories.js

@@ -20,7 +20,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-  <form @submit.prevent="" class="mt-10">
+  <form @submit.prevent="">
     <BaseInputLabel v-bind="args"></BaseInputLabel>
     <BaseInput required name="name" placeholder="Enter your first name"></BaseInput>
   </form>

package/src/components/BaseInputLabel.vue

@@ -1,10 +1,9 @@
 <template>
   <label :class="classes">
     <div
-      class="relative"
+      :ref="help ? 'info' : ''"
+      class="relative inline-flex items-center"
       :class="[help ? 'cursor-help' : 'cursor-default']"
-      @mouseenter="showTooltip = true"
-      @mouseleave="showTooltip = false"
     >
       <span> {{ label }}</span>
 
@@ -18,58 +17,41 @@
         v-if="required"
         class="ml-0.5 text-red-600"
       > *</span>
-
-      <Transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="transform scale-95 opacity-0"
-        enter-to-class="transform scale-100 opacity-100"
-        leave-active-class="transition duration-75 ease-in"
-        leave-from-class="transform scale-100 opacity-100"
-        leave-to-class="transform scale-95 opacity-0"
-      >
-        <div
-          v-if="showTooltip && help"
-          class="pointer-events-none absolute bottom-[100%] left-0 z-[1] w-auto max-w-[300px]"
-        >
-          <div
-            class="relative bottom-1 rounded-md bg-slate-700 py-1 px-2 text-xs leading-tight text-white"
-          >
-            {{ help }}
-          </div>
-        </div>
-      </Transition>
     </div>
   </label>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<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'
 
-export default defineComponent({
-  components: { BaseIcon },
-  props: {
-    required: {
-      default: false,
-      type: Boolean,
-    },
-    label: {
-      required: true,
-      type: String,
-    },
-    classes: {
-      default: 'mb-1 block text-sm',
-      type: String,
-    },
-    help: {
-      default: null,
-      type: [String, null] as PropType<string | null>,
-    },
+const props = defineProps({
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  label: {
+    required: true,
+    type: String,
+  },
+  classes: {
+    default: 'mb-1 block text-sm',
+    type: String,
   },
-  data() {
-    return {
-      showTooltip: false,
-    };
+  help: {
+    default: null,
+    type: [String, null] as PropType<string | null>,
   },
 });
+
+const info = ref();
+const content = computed(() => { return props.help })
+
+useTippy(info, {
+  content: content,
+  placement: 'auto',
+})
+
 </script>