sprintify-ui 0.4.4 → 0.4.5

package/src/components/BaseDialog.stories.js

@@ -1,51 +1,51 @@
-import BaseDialog from './BaseDialog.vue';
-
-export default {
-  title: 'Components/BaseDialog',
-  component: BaseDialog,
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: ['success', 'info', 'warning', 'danger'],
-    },
-  },
-  args: {
-    message:
-      'Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.',
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseDialog },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseDialog v-bind="args">
-    </BaseDialog>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  title: 'Be careful',
-  color: 'warning',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  title: 'Success',
-  color: 'success',
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  title: 'Error',
-  color: 'danger',
-};
-
-export const Info = Template.bind({});
-Info.args = {
-  title: 'Information',
-  color: 'info',
-};
+import BaseDialog from './BaseDialog.vue';
+
+export default {
+  title: 'Components/BaseDialog',
+  component: BaseDialog,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+  args: {
+    message:
+      'Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.',
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDialog },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDialog v-bind="args">
+    </BaseDialog>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  title: 'Be careful',
+  color: 'warning',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  title: 'Success',
+  color: 'success',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  title: 'Error',
+  color: 'danger',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  title: 'Information',
+  color: 'info',
+};

package/src/components/BaseDialog.vue

@@ -1,119 +1,119 @@
-<template>
-  <div
-    class="relative transform overflow-hidden rounded-lg bg-white border border-slate-200 p-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
-  >
-    <div class="sm:flex sm:items-start">
-      <div
-        class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
-        :class="{
-          'bg-primary-100': color == 'info',
-          'bg-red-100': color == 'danger',
-          'bg-yellow-100': color == 'warning',
-          'bg-green-100': color == 'success',
-        }"
-      >
-        <BaseIcon
-          v-if="color == 'danger'"
-          class="h-5 w-5 text-red-600"
-          icon="heroicons:exclamation-triangle-20-solid"
-        />
-        <BaseIcon
-          v-else-if="color == 'warning'"
-          class="h-5 w-5 text-yellow-600"
-          icon="heroicons:exclamation-triangle-20-solid"
-        />
-        <BaseIcon
-          v-else-if="color == 'success'"
-          class="h-5 w-5 text-green-600"
-          icon="heroicons:check-circle-20-solid"
-        />
-        <BaseIcon
-          v-else
-          class="h-5 w-5 text-primary-600"
-          icon="heroicons:information-circle-20-solid"
-        />
-      </div>
-      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-        <slot>
-          <h3
-            id="modal-title"
-            class="text-base font-medium leading-6 text-slate-900"
-          >
-            {{ title }}
-          </h3>
-          <div class="mt-2">
-            <p class="text-sm font-light text-slate-600">
-              {{ message }}
-            </p>
-          </div>
-        </slot>
-      </div>
-    </div>
-    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-      <button
-        ref="confirm"
-        type="button"
-        class="btn btn-sm mb-2 w-full sm:mb-0 sm:w-auto"
-        :class="{
-          'btn-primary': color == 'info',
-          'btn-danger': color == 'danger',
-          'btn-warning': color == 'warning',
-          'btn-success': color == 'success',
-        }"
-        @click="$emit('confirm')"
-      >
-        {{ confirmText ?? t('sui.confirm') }}
-      </button>
-      <button
-        type="button"
-        class="btn btn-sm w-full sm:mr-2 sm:w-auto"
-        @click="$emit('cancel')"
-      >
-        {{ cancelText ?? t('sui.cancel') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { t } from '@/i18n';
-
-defineProps({
-  color: {
-    required: true,
-    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
-  },
-  title: {
-    default: '',
-    type: String,
-  },
-  message: {
-    default: '',
-    type: String,
-  },
-  confirmText: {
-    default() {
-      return t('sui.confirm');
-    },
-    type: String,
-  },
-  cancelText: {
-    default() {
-      return t('sui.cancel');
-    },
-    type: String,
-  },
-});
-
-defineEmits(['cancel', 'confirm']);
-
-const confirm = ref<HTMLButtonElement | null>(null);
-
-onMounted(() => {
-  if (confirm.value) {
-    confirm.value.focus();
-  }
-});
-</script>
+<template>
+  <div
+    class="relative transform overflow-hidden rounded-lg bg-white border border-slate-200 p-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+  >
+    <div class="sm:flex sm:items-start">
+      <div
+        class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
+        :class="{
+          'bg-primary-100': color == 'info',
+          'bg-red-100': color == 'danger',
+          'bg-yellow-100': color == 'warning',
+          'bg-green-100': color == 'success',
+        }"
+      >
+        <BaseIcon
+          v-if="color == 'danger'"
+          class="h-5 w-5 text-red-600"
+          icon="heroicons:exclamation-triangle-20-solid"
+        />
+        <BaseIcon
+          v-else-if="color == 'warning'"
+          class="h-5 w-5 text-yellow-600"
+          icon="heroicons:exclamation-triangle-20-solid"
+        />
+        <BaseIcon
+          v-else-if="color == 'success'"
+          class="h-5 w-5 text-green-600"
+          icon="heroicons:check-circle-20-solid"
+        />
+        <BaseIcon
+          v-else
+          class="h-5 w-5 text-primary-600"
+          icon="heroicons:information-circle-20-solid"
+        />
+      </div>
+      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+        <slot>
+          <h3
+            id="modal-title"
+            class="text-base font-medium leading-6 text-slate-900"
+          >
+            {{ title }}
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm font-light text-slate-600">
+              {{ message }}
+            </p>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+      <button
+        ref="confirm"
+        type="button"
+        class="btn btn-sm mb-2 w-full sm:mb-0 sm:w-auto"
+        :class="{
+          'btn-primary': color == 'info',
+          'btn-danger': color == 'danger',
+          'btn-warning': color == 'warning',
+          'btn-success': color == 'success',
+        }"
+        @click="$emit('confirm')"
+      >
+        {{ confirmText ?? t('sui.confirm') }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm w-full sm:mr-2 sm:w-auto"
+        @click="$emit('cancel')"
+      >
+        {{ cancelText ?? t('sui.cancel') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { t } from '@/i18n';
+
+defineProps({
+  color: {
+    required: true,
+    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
+  },
+  title: {
+    default: '',
+    type: String,
+  },
+  message: {
+    default: '',
+    type: String,
+  },
+  confirmText: {
+    default() {
+      return t('sui.confirm');
+    },
+    type: String,
+  },
+  cancelText: {
+    default() {
+      return t('sui.cancel');
+    },
+    type: String,
+  },
+});
+
+defineEmits(['cancel', 'confirm']);
+
+const confirm = ref<HTMLButtonElement | null>(null);
+
+onMounted(() => {
+  if (confirm.value) {
+    confirm.value.focus();
+  }
+});
+</script>

package/src/components/BaseDisplayRelativeTime.stories.js

@@ -1,47 +1,47 @@
-import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
-import { DateTime } from 'luxon';
-
-export default {
-  title: 'Data/BaseDisplayRelativeTime',
-  component: BaseDisplayRelativeTime,
-  argTypes: {
-    showTooltip: {
-      control: { type: 'boolean' },
-    },
-  },
-  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,
-};
-
-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 = {};
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Data/BaseDisplayRelativeTime',
+  component: BaseDisplayRelativeTime,
+  argTypes: {
+    showTooltip: {
+      control: { type: 'boolean' },
+    },
+  },
+  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,
+};
+
+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

@@ -1,122 +1,122 @@
-<template>
-  <component
-    :is="as"
-    :ref="showTooltip ? 'tooltip' : ''"
-  >
-    <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 { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
-
-const props = defineProps({
-  value: {
-    required: true,
-    type: String,
-  },
-  showTooltip: {
-    default: false,
-    type: Boolean,
-  },
-  timeZone: {
-    default: 'utc',
-    type: String,
-  },
-  as: {
-    default: 'span',
-    type: String,
-  },
-});
-
-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) {
-  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 });
-});
-
-
-onBeforeUnmount(() => {
-  clearInterval(intervalId);
-});
-</script>
+<template>
+  <component
+    :is="as"
+    :ref="showTooltip ? 'tooltip' : ''"
+  >
+    <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 { useTippy } from 'vue-tippy'
+import 'tippy.js/dist/tippy.css'
+
+const props = defineProps({
+  value: {
+    required: true,
+    type: String,
+  },
+  showTooltip: {
+    default: false,
+    type: Boolean,
+  },
+  timeZone: {
+    default: 'utc',
+    type: String,
+  },
+  as: {
+    default: 'span',
+    type: String,
+  },
+});
+
+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) {
+  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 });
+});
+
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
+</script>