sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseDescriptionListItem.vue

@@ -1,47 +1,47 @@
-<template>
-  <div
-    ref="item"
-    :class="{
-      'px-4 py-4': mobile,
-      'grid grid-cols-3 gap-4 py-5 px-6': !mobile,
-    }"
-  >
-    <dt class="text-sm font-medium leading-tight text-slate-500">
-      <slot name="left" />
-    </dt>
-    <dd
-      class="text-sm leading-tight text-slate-900"
-      :class="{
-        'mt-1.5': mobile,
-        'col-span-2': !mobile,
-      }"
-    >
-      <slot name="right" />
-    </dd>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useResizeObserver } from '@vueuse/core';
-import { debounce } from 'lodash';
-import breakpoints from '../../config/breakpoints.json';
-
-const DEFAULT_WIDTH = 800;
-
-const item = ref<HTMLElement | null>(null);
-const width = ref(DEFAULT_WIDTH);
-
-const mobile = computed(() => {
-  return width.value < breakpoints.sm;
-});
-
-function setWidth() {
-  width.value = item.value?.clientWidth ?? DEFAULT_WIDTH;
-}
-
-onMounted(() => {
-  setWidth();
-});
-
-useResizeObserver(item, debounce(setWidth, 50));
-</script>
+<template>
+  <div
+    ref="item"
+    :class="{
+      'px-4 py-4': mobile,
+      'grid grid-cols-3 gap-4 py-5 px-6': !mobile,
+    }"
+  >
+    <dt class="text-sm font-medium leading-tight text-slate-500">
+      <slot name="left" />
+    </dt>
+    <dd
+      class="text-sm leading-tight text-slate-900"
+      :class="{
+        'mt-1.5': mobile,
+        'col-span-2': !mobile,
+      }"
+    >
+      <slot name="right" />
+    </dd>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { debounce } from 'lodash';
+import breakpoints from '../../config/breakpoints.json';
+
+const DEFAULT_WIDTH = 800;
+
+const item = ref<HTMLElement | null>(null);
+const width = ref(DEFAULT_WIDTH);
+
+const mobile = computed(() => {
+  return width.value < breakpoints.sm;
+});
+
+function setWidth() {
+  width.value = item.value?.clientWidth ?? DEFAULT_WIDTH;
+}
+
+onMounted(() => {
+  setWidth();
+});
+
+useResizeObserver(item, debounce(setWidth, 50));
+</script>

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,120 +1,119 @@
-<template>
-  <div
-    class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
-  >
-    <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-6 w-6 text-red-600"
-          icon="heroicons:exclamation-triangle-20-solid"
-        />
-        <BaseIcon
-          v-else-if="color == 'warning'"
-          class="h-6 w-6 text-yellow-600"
-          icon="heroicons:exclamation-triangle-20-solid"
-        />
-        <BaseIcon
-          v-else-if="color == 'success'"
-          class="h-6 w-6 text-green-600"
-          icon="heroicons:check-circle-20-solid"
-        />
-        <BaseIcon
-          v-else
-          class="h-6 w-6 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-lg font-medium leading-6 text-slate-900"
-          >
-            {{ title }}
-          </h3>
-          <div class="mt-2">
-            <p class="text-base font-normal 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 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 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';
-
-defineProps({
-  color: {
-    required: true,
-    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
-  },
-  title: {
-    default: '',
-    type: String,
-  },
-  message: {
-    default: '',
-    type: String,
-  },
-  confirmText: {
-    default() {
-      const i18n = useI18n();
-      return i18n.t('sui.confirm');
-    },
-    type: String,
-  },
-  cancelText: {
-    default() {
-      const i18n = useI18n();
-      return i18n.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 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+  >
+    <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-6 w-6 text-red-600"
+          icon="heroicons:exclamation-triangle-20-solid"
+        />
+        <BaseIcon
+          v-else-if="color == 'warning'"
+          class="h-6 w-6 text-yellow-600"
+          icon="heroicons:exclamation-triangle-20-solid"
+        />
+        <BaseIcon
+          v-else-if="color == 'success'"
+          class="h-6 w-6 text-green-600"
+          icon="heroicons:check-circle-20-solid"
+        />
+        <BaseIcon
+          v-else
+          class="h-6 w-6 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-lg font-medium leading-6 text-slate-900"
+          >
+            {{ title }}
+          </h3>
+          <div class="mt-2">
+            <p class="text-base font-normal 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 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 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,59 +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 = {};
+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 = {};