sprintify-ui 0.0.123 → 0.0.125

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

@@ -0,0 +1,68 @@
+import { PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    value: {
+        required: true;
+        type: StringConstructor;
+    };
+    showTooltip: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    tooltipPosition: {
+        default: string;
+        type: PropType<"left" | "right" | "top" | "bottom">;
+    };
+    tooltipSize: {
+        default: string;
+        type: PropType<"small" | "large" | "medium">;
+    };
+    timeZone: {
+        default: string;
+        type: StringConstructor;
+    };
+    as: {
+        default: string;
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        required: true;
+        type: StringConstructor;
+    };
+    showTooltip: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    tooltipPosition: {
+        default: string;
+        type: PropType<"left" | "right" | "top" | "bottom">;
+    };
+    tooltipSize: {
+        default: string;
+        type: PropType<"small" | "large" | "medium">;
+    };
+    timeZone: {
+        default: string;
+        type: StringConstructor;
+    };
+    as: {
+        default: string;
+        type: StringConstructor;
+    };
+}>>, {
+    as: string;
+    showTooltip: boolean;
+    tooltipPosition: "left" | "right" | "top" | "bottom";
+    tooltipSize: "small" | "large" | "medium";
+    timeZone: string;
+}>, {
+    default: (_: {
+        readableDate: string;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,7 +2,7 @@ import { PropType } from 'vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: boolean;
-        type: BooleanConstructor;
+        type: PropType<boolean | null | undefined>;
     };
     name: {
         default: undefined;
@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: boolean;
-        type: BooleanConstructor;
+        type: PropType<boolean | null | undefined>;
     };
     name: {
         default: undefined;
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     name: string;
     color: "dark" | "light" | "danger" | "success" | "warning" | "info" | "primary";
     size: "base" | "xs" | "sm" | "lg" | "xl";
-    modelValue: boolean;
+    modelValue: boolean | null | undefined;
     hasError: boolean;
 }>, {
     default: (_: {}) => any;

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

@@ -28,6 +28,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
 import BaseField from './BaseField.vue';
@@ -79,4 +80,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDropdown, BaseDropdownAutocomplete, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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

@@ -68,6 +68,7 @@ declare const messages: {
             yes_delete: string;
             you_can_upload_up_to_n_files: string;
             you_cannot_select_more_than_x_items: string;
+            just_now: string;
         };
     };
     fr: {
@@ -132,6 +133,7 @@ declare const messages: {
             yes_delete: string;
             you_can_upload_up_to_n_files: string;
             you_cannot_select_more_than_x_items: string;
+            just_now: string;
         };
     };
 };
@@ -209,6 +211,7 @@ declare const config: {
                 yes_delete: string;
                 you_can_upload_up_to_n_files: string;
                 you_cannot_select_more_than_x_items: string;
+                just_now: string;
             };
         };
         fr: {
@@ -273,6 +276,7 @@ declare const config: {
                 yes_delete: string;
                 you_can_upload_up_to_n_files: string;
                 you_cannot_select_more_than_x_items: string;
+                just_now: string;
             };
         };
     }, {}, {}, string, true>;

package/package.json

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

package/src/components/BaseAppDialogs.vue

@@ -105,6 +105,20 @@ watch(
   }
 );
 
+window.addEventListener('keydown', onKeydown);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown);
+});
+
+function onKeydown(event: KeyboardEvent) {
+  if (dialogs.value.length == 0) return;
+
+  if (event.key === 'Escape') {
+    cancel(dialogs.value[dialogs.value.length - 1]);
+  }
+}
+
 defineExpose({
   dialogs,
 });

package/src/components/BaseDialog.vue

@@ -42,7 +42,7 @@
             {{ title }}
           </h3>
           <div class="mt-2">
-            <p class="text-base font-light text-slate-600">
+            <p class="text-base font-normal text-slate-600">
               {{ message }}
             </p>
           </div>
@@ -51,6 +51,7 @@
     </div>
     <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
       <button
+        ref="confirm"
         type="button"
         class="btn mb-2 w-full sm:mb-0 sm:w-auto"
         :class="{
@@ -75,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 defineProps({
@@ -108,4 +109,12 @@ defineProps({
 });
 
 defineEmits(['cancel', 'confirm']);
+
+const confirm = ref(null) as Ref<HTMLButtonElement | null>;
+
+onMounted(() => {
+  if (confirm.value) {
+    confirm.value.focus();
+  }
+});
 </script>

package/src/components/BaseDisplayRelativeTime.stories.js

@@ -0,0 +1,59 @@
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Components/BaseDisplayRelativeTime',
+  component: BaseDisplayRelativeTime,
+  argTypes: {
+    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(),
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDisplayRelativeTime },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDisplayRelativeTime v-bind="args"></BaseDisplayRelativeTime>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  showTooltip: true,
+  tooltipPosition: 'top',
+  tooltipSize: 'large',
+};
+
+const TemplateCustom = (args) => ({
+  components: { BaseDisplayRelativeTime },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDisplayRelativeTime v-bind="args" v-slot="{readableDate}">
+      <span class="text-red-500">
+         {{readableDate}}
+      </span>
+    </BaseDisplayRelativeTime>
+  `,
+});
+
+export const CustomSlot = TemplateCustom.bind({});
+CustomSlot.args = {};

package/src/components/BaseDisplayRelativeTime.vue

@@ -0,0 +1,122 @@
+<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"
+  >
+    <slot name="default" :readable-date="readableDate">
+      <span
+        class="cursor-pointer rounded-full px-3 py-1 text-xs text-slate-600 hover:bg-slate-50"
+      >
+        {{ readableDate }}
+      </span>
+    </slot>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import humanizeDuration from 'humanize-duration';
+import { DateTime } from 'luxon';
+import { PropType } from 'vue';
+const props = defineProps({
+  value: {
+    required: true,
+    type: String,
+  },
+  showTooltip: {
+    default: true,
+    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,
+  },
+  as: {
+    default: 'span',
+    type: String,
+  },
+});
+
+const now = ref(DateTime.now().toSeconds());
+
+function getMinutes(duration: number) {
+  return Math.abs(duration / 60000);
+}
+
+function getDuration() {
+  const nowLuxon = DateTime.fromSeconds(now.value);
+  const duration = DateTime.fromISO(props.value, {
+    zone: props.timeZone,
+  }).diff(nowLuxon).milliseconds;
+
+  return duration;
+}
+
+function getInterval() {
+  const duration = getDuration();
+  const minutes = Math.ceil(getMinutes(duration));
+
+  if (minutes < 10) {
+    return 10 * 1000;
+  }
+
+  if (minutes < 60) {
+    return 30 * 1000;
+  }
+
+  if (minutes < 1140) {
+    return 60 * 1000;
+  }
+
+  if (minutes < 10080) {
+    return 60 * 60 * 1000;
+  }
+
+  return 1000;
+}
+
+const intervalValue = getInterval();
+
+const intervalId = setInterval(() => {
+  now.value = DateTime.now().toSeconds();
+}, intervalValue);
+
+const i18n = useI18n();
+
+const readableDate = computed(() => {
+  const duration = getDuration();
+  const durationHuman = humanizeDuration(duration, {
+    language: i18n.locale.value,
+    round: true,
+    largest: 1,
+  });
+
+  const minutes = getMinutes(duration);
+
+  if (minutes < 1) {
+    return i18n.t('sui.just_now');
+  }
+
+  return i18n.t('sui.x_ago', { duration: durationHuman });
+});
+
+const tooltip = computed(() => {
+  return DateTime.fromISO(props.value)
+    .setLocale(i18n.locale.value)
+    .toLocaleString(DateTime.DATETIME_FULL);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
+</script>

package/src/components/BaseSwitch.vue

@@ -2,7 +2,7 @@
   <SwitchGroup>
     <div class="inline-flex items-center space-x-3">
       <Switch
-        :model-value="modelValue"
+        :model-value="modelValue ?? false"
         :class="[
           modelValue ? bg : 'bg-slate-200',
           'relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
@@ -39,7 +39,7 @@ import { PropType } from 'vue';
 const props = defineProps({
   modelValue: {
     default: false,
-    type: Boolean,
+    type: [Boolean, null, undefined] as PropType<boolean | null | undefined>,
   },
   name: {
     default: undefined,

package/src/components/index.ts

@@ -28,6 +28,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
 import BaseField from './BaseField.vue';
@@ -112,6 +113,7 @@ export {
   BaseDescriptionList,
   BaseDescriptionListItem,
   BaseDialog,
+  BaseDisplayRelativeTime,
   BaseDropdown,
   BaseDropdownAutocomplete,
   BaseField,

package/src/lang/en.json

@@ -59,6 +59,7 @@
     "year": "Year",
     "yes_delete": "Yes, delete",
     "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
-    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items"
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items",
+    "just_now": "Just now"
   }
 }

package/src/lang/fr.json

@@ -59,6 +59,7 @@
     "year": "Année",
     "yes_delete": "Oui, supprimer",
     "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
-    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments"
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments",
+    "just_now": "à l’instant"
   }
 }