sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseDisplayRelativeTime.vue

@@ -1,120 +1,120 @@
-<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="text-xs text-slate-600">
-        {{ readableDate }}
-      </span>
-    </slot>
-  </component>
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-import { useI18nStore } from '@/stores/i18n';
-import humanizeDuration from 'humanize-duration';
-import { DateTime } from 'luxon';
-import { PropType } from 'vue';
-const props = defineProps({
-  value: {
-    required: true,
-    type: String,
-  },
-  showTooltip: {
-    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,
-  },
-  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 readableDate = computed(() => {
-  const duration = getDuration();
-  const durationHuman = humanizeDuration(duration, {
-    language: useI18nStore().locale,
-    round: true,
-    largest: 1,
-  });
-
-  const minutes = getMinutes(duration);
-
-  if (minutes < 1) {
-    return t('sui.just_now');
-  }
-
-  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);
-});
-</script>
+<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="text-xs text-slate-600">
+        {{ readableDate }}
+      </span>
+    </slot>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import { useI18nStore } from '@/stores/i18n';
+import humanizeDuration from 'humanize-duration';
+import { DateTime } from 'luxon';
+import { PropType } from 'vue';
+const props = defineProps({
+  value: {
+    required: true,
+    type: String,
+  },
+  showTooltip: {
+    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,
+  },
+  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 readableDate = computed(() => {
+  const duration = getDuration();
+  const durationHuman = humanizeDuration(duration, {
+    language: useI18nStore().locale,
+    round: true,
+    largest: 1,
+  });
+
+  const minutes = getMinutes(duration);
+
+  if (minutes < 1) {
+    return t('sui.just_now');
+  }
+
+  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);
+});
+</script>

package/src/components/BaseDraggable.vue

@@ -1,71 +1,71 @@
-<template>
-  <div ref="elementsRef">
-    <slot
-      v-for="(element, index) in modelValue"
-      :key="element[itemKey]"
-      name="item"
-      :element="element"
-      :index="index"
-    ></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import Sortable from 'sortablejs';
-
-const props = defineProps<{
-  modelValue: any[];
-  itemKey: string;
-  handle: string;
-  disabled: boolean;
-}>();
-
-const emit = defineEmits(['update:modelValue']);
-
-const elementsRef = ref<HTMLElement | null>(null);
-
-let sortable = null as Sortable | null;
-
-onMounted(() => {
-  if (!elementsRef.value) {
-    return;
-  }
-
-  sortable = Sortable.create(elementsRef.value, {
-    handle: props.handle,
-    disabled: props.disabled,
-    onEnd: (event) => {
-      if (event.oldIndex !== undefined && event.newIndex !== undefined) {
-        const modelValue = cloneDeep(props.modelValue);
-
-        const modelValueUpdated = arrayMove(
-          modelValue,
-          event.oldIndex,
-          event.newIndex
-        );
-
-        emit('update:modelValue', modelValueUpdated);
-      }
-    },
-  });
-});
-
-function arrayMove(array: any[], fromIndex: number, toIndex: number): any[] {
-  const element = array[fromIndex];
-  array.splice(fromIndex, 1);
-  array.splice(toIndex, 0, element);
-  return array;
-}
-
-onBeforeUnmount(() => {
-  sortable?.destroy();
-});
-
-watch(
-  () => props.disabled,
-  (disabled) => {
-    sortable?.option('disabled', disabled);
-  }
-);
-</script>
+<template>
+  <div ref="elementsRef">
+    <slot
+      v-for="(element, index) in modelValue"
+      :key="element[itemKey]"
+      name="item"
+      :element="element"
+      :index="index"
+    ></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import Sortable from 'sortablejs';
+
+const props = defineProps<{
+  modelValue: any[];
+  itemKey: string;
+  handle: string;
+  disabled: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const elementsRef = ref<HTMLElement | null>(null);
+
+let sortable = null as Sortable | null;
+
+onMounted(() => {
+  if (!elementsRef.value) {
+    return;
+  }
+
+  sortable = Sortable.create(elementsRef.value, {
+    handle: props.handle,
+    disabled: props.disabled,
+    onEnd: (event) => {
+      if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+        const modelValue = cloneDeep(props.modelValue);
+
+        const modelValueUpdated = arrayMove(
+          modelValue,
+          event.oldIndex,
+          event.newIndex
+        );
+
+        emit('update:modelValue', modelValueUpdated);
+      }
+    },
+  });
+});
+
+function arrayMove(array: any[], fromIndex: number, toIndex: number): any[] {
+  const element = array[fromIndex];
+  array.splice(fromIndex, 1);
+  array.splice(toIndex, 0, element);
+  return array;
+}
+
+onBeforeUnmount(() => {
+  sortable?.destroy();
+});
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    sortable?.option('disabled', disabled);
+  }
+);
+</script>