sprintify-ui 0.4.1 → 0.4.3

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update" | "remove" | "save:name")[], "update" | "remove" | "save:name", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update" | "remove")[], "update" | "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     media: {
         required: true;
         type: PropType<UploadedFile | Media>;
@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onUpdate?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
-    "onSave:name"?: ((...args: any[]) => any) | undefined;
 }, {
     draggable: boolean;
     disabled: boolean;

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

@@ -60,10 +60,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

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

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

@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     href: string | undefined;
     action: () => Promise<void> | undefined;
     color: string;
-    description: string;
     contrast: "high" | "low";
+    description: string;
     linkText: string;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.4.1",
+  "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/BaseForm.vue

@@ -20,7 +20,7 @@
       leave-to-class="opacity-0"
     >
       <slot
-        v-if="loading"
+        v-if="loading && showLoadingMask"
         name="loading"
       >
         <div
@@ -37,7 +37,7 @@
             <path
               fill="currentColor"
               d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-            />
+            ></path>
           </svg>
         </div>
       </slot>
@@ -106,6 +106,10 @@ const props = defineProps({
     default: '',
     type: String,
   },
+  showLoadingMask: {
+    default: true,
+    type: Boolean,
+  },
   showNotificationOnError: {
     default: true,
     type: Boolean,

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>

package/src/components/BaseMediaList.vue

@@ -16,7 +16,6 @@
           :disabled="disabled"
           @update="onItemUpdate(index, $event)"
           @remove="$emit('remove', index)"
-          @save:name="$emit('save:name', index, $event)"
         />
       </div>
     </template>
@@ -50,7 +49,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'remove', 'save:name']);
+const emit = defineEmits(['update:modelValue', 'remove']);
 
 function onItemUpdate(index: number, media: Media | UploadedFile) {
   const modelValue = cloneDeep(props.modelValue);

package/src/components/BaseMediaListItem.vue

@@ -59,7 +59,6 @@
           type="text"
           :value="name"
           autofocus
-          @input="onNameChange"
           @keydown.enter.prevent="saveName"
           @keydown.escape.prevent="viewMode = 'show'"
         >
@@ -132,7 +131,7 @@ import { t } from '@/i18n';
 import { useResizeObserver } from '@vueuse/core';
 import breakpoints from '../../config/breakpoints.json';
 
-const emit = defineEmits(['remove', 'update', 'save:name']);
+const emit = defineEmits(['remove', 'update']);
 
 const props = defineProps({
   media: {
@@ -201,17 +200,13 @@ function editName() {
   }, 100);
 }
 
-function onNameChange(e: Event) {
-  const target = e.target as HTMLInputElement;
+function saveName() {
+  const target = inputRef.value;
   const media = cloneDeep(props.media);
-  media.name = (target.value ?? '') as string;
+  media.name = (target?.value ?? '') as string;
   const ext = media.file_name.split('.').pop();
   media.file_name = media.name + '.' + ext;
-  emit('update', media);
-}
-
-function saveName() {
   viewMode.value = 'show';
-  emit('save:name');
+  emit('update', media);
 }
 </script>