sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseDialog.vue

@@ -1,221 +1,221 @@
-<template>
-  <form
-    class="relative transform overflow-hidden rounded-lg bg-white ring-1 ring-black ring-opacity-10 p-4 text-left shadow-xl transition-all || sm:my-8 sm:w-full sm:max-w-lg"
-    @submit.prevent="confirm"
-  >
-    <div class="sm:flex sm:items-start || sm:gap-4">
-      <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 grow || sm:mt-0 sm:text-left"
-      >
-        <slot>
-          <h3
-            id="modal-title"
-            class="text-base font-medium leading-6 text-slate-900"
-          >
-            {{ title }}
-          </h3>
-          <div class="mt-2">
-            <div
-              v-if="html"
-              class="text-slate-500 prose-sm prose-p:leading-snug prose-a:text-blue-600 prose-a:underline"
-              v-html="message"
-            />
-            <p
-              v-else
-              class="text-sm text-slate-500"
-            >
-              {{ message }}
-            </p>
-          </div>
-
-          <BaseField
-            v-if="inputConfig"
-            class="mt-5 w-full"
-            :label="inputConfig.label"
-            :size="inputConfig.size"
-            :required="inputConfig.required"
-          >
-            <BasePassword
-              v-if="inputConfig.type == 'password'"
-              ref="inputRef"
-              v-model="input"
-              name="input"
-              :placeholder="inputConfig.placeholder"
-              class="w-full"
-            />
-            <BaseInput
-              v-else
-              ref="inputRef"
-              v-model="input"
-              name="input"
-              :placeholder="inputConfig.placeholder"
-              :type="inputConfig.type"
-              class="w-full"
-            />
-          </BaseField>
-
-          <BaseAlert
-            v-if="errorMessage"
-            class="mt-4"
-            color="danger"
-            bordered
-          >
-            {{ errorMessage }}
-          </BaseAlert>
-        </slot>
-      </div>
-    </div>
-
-    <div class="mt-5 || sm:mt-4 sm:flex sm:flex-row-reverse">
-      <BaseButton
-        ref="confirmRef"
-        size="sm"
-        class="mb-2 w-full sm:mb-0 sm:w-auto"
-        :color="color"
-      >
-        {{ confirmText ?? t('sui.confirm') }}
-      </BaseButton>
-      <BaseButton
-        type="button"
-        size="sm"
-        class="w-full sm:mr-2 sm:w-auto"
-        @click="$emit('cancel')"
-      >
-        {{ cancelText ?? t('sui.cancel') }}
-      </BaseButton>
-    </div>
-  </form>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { t } from '@/i18n';
-import BaseButton from './BaseButton.vue';
-import BaseInput from './BaseInput.vue';
-import BaseField from './BaseField.vue';
-import BasePassword from './BasePassword.vue';
-import BaseAlert from './BaseAlert.vue';
-import { InputConfigProps } from '@/types';
-
-const props = defineProps({
-  color: {
-    required: true,
-    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
-  },
-  title: {
-    default: '',
-    type: String,
-  },
-  message: {
-    default: '',
-    type: String,
-  },
-  errorMessage: {
-    default: '',
-    type: [String, null, undefined] as PropType<string | null | undefined>,
-  },
-  html: {
-    default: false,
-    type: Boolean,
-  },
-  confirmText: {
-    default() {
-      return t('sui.confirm');
-    },
-    type: String,
-  },
-  cancelText: {
-    default() {
-      return t('sui.cancel');
-    },
-    type: String,
-  },
-  input: {
-    default: false,
-    type: [Boolean, Object] as PropType<boolean | InputConfigProps>,
-  },
-});
-
-const emit = defineEmits(['cancel', 'confirm']);
-
-const confirmRef = ref<HTMLButtonElement | null>(null);
-const inputRef = ref<HTMLInputElement | null>(null);
-
-onMounted(() => {
-  if (inputRef.value) {
-    inputRef.value.focus();
-  } else {
-    if (confirmRef.value) {
-      confirmRef.value.focus();
-    }
-  }
-});
-
-const input = ref('');
-
-const inputConfig = computed(() => {
-
-  if (props.input === false) {
-    return null;
-  }
-
-  if (typeof props.input === 'object') {
-    return props.input;
-  }
-
-  return {
-    label: '',
-    placeholder: '',
-  } as InputConfigProps;
-});
-
-function confirm() {
-  if (props.input === false) {
-    return emit('confirm');
-  }
-
-  if (input.value == '' && inputConfig.value?.required) {
-
-    inputRef.value?.focus();
-
-    return;
-  }
-
-  emit('confirm', input.value);
-
-  input.value = '';
-
-}
-
-</script>
+<template>
+  <form
+    class="relative transform overflow-hidden rounded-lg bg-white ring-1 ring-black ring-opacity-10 p-4 text-left shadow-xl transition-all || sm:my-8 sm:w-full sm:max-w-lg"
+    @submit.prevent="confirm"
+  >
+    <div class="sm:flex sm:items-start || sm:gap-4">
+      <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 grow || sm:mt-0 sm:text-left"
+      >
+        <slot>
+          <h3
+            id="modal-title"
+            class="text-base font-medium leading-6 text-slate-900"
+          >
+            {{ title }}
+          </h3>
+          <div class="mt-2">
+            <div
+              v-if="html"
+              class="text-slate-500 prose-sm prose-p:leading-snug prose-a:text-blue-600 prose-a:underline"
+              v-html="message"
+            />
+            <p
+              v-else
+              class="text-sm text-slate-500"
+            >
+              {{ message }}
+            </p>
+          </div>
+
+          <BaseField
+            v-if="inputConfig"
+            class="mt-5 w-full"
+            :label="inputConfig.label"
+            :size="inputConfig.size"
+            :required="inputConfig.required"
+          >
+            <BasePassword
+              v-if="inputConfig.type == 'password'"
+              ref="inputRef"
+              v-model="input"
+              name="input"
+              :placeholder="inputConfig.placeholder"
+              class="w-full"
+            />
+            <BaseInput
+              v-else
+              ref="inputRef"
+              v-model="input"
+              name="input"
+              :placeholder="inputConfig.placeholder"
+              :type="inputConfig.type"
+              class="w-full"
+            />
+          </BaseField>
+
+          <BaseAlert
+            v-if="errorMessage"
+            class="mt-4"
+            color="danger"
+            bordered
+          >
+            {{ errorMessage }}
+          </BaseAlert>
+        </slot>
+      </div>
+    </div>
+
+    <div class="mt-5 || sm:mt-4 sm:flex sm:flex-row-reverse">
+      <BaseButton
+        ref="confirmRef"
+        size="sm"
+        class="mb-2 w-full sm:mb-0 sm:w-auto"
+        :color="color"
+      >
+        {{ confirmText ?? t('sui.confirm') }}
+      </BaseButton>
+      <BaseButton
+        type="button"
+        size="sm"
+        class="w-full sm:mr-2 sm:w-auto"
+        @click="$emit('cancel')"
+      >
+        {{ cancelText ?? t('sui.cancel') }}
+      </BaseButton>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { t } from '@/i18n';
+import BaseButton from './BaseButton.vue';
+import BaseInput from './BaseInput.vue';
+import BaseField from './BaseField.vue';
+import BasePassword from './BasePassword.vue';
+import BaseAlert from './BaseAlert.vue';
+import { InputConfigProps } from '@/types';
+
+const props = defineProps({
+  color: {
+    required: true,
+    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
+  },
+  title: {
+    default: '',
+    type: String,
+  },
+  message: {
+    default: '',
+    type: String,
+  },
+  errorMessage: {
+    default: '',
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  html: {
+    default: false,
+    type: Boolean,
+  },
+  confirmText: {
+    default() {
+      return t('sui.confirm');
+    },
+    type: String,
+  },
+  cancelText: {
+    default() {
+      return t('sui.cancel');
+    },
+    type: String,
+  },
+  input: {
+    default: false,
+    type: [Boolean, Object] as PropType<boolean | InputConfigProps>,
+  },
+});
+
+const emit = defineEmits(['cancel', 'confirm']);
+
+const confirmRef = ref<HTMLButtonElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+onMounted(() => {
+  if (inputRef.value) {
+    inputRef.value.focus();
+  } else {
+    if (confirmRef.value) {
+      confirmRef.value.focus();
+    }
+  }
+});
+
+const input = ref('');
+
+const inputConfig = computed(() => {
+
+  if (props.input === false) {
+    return null;
+  }
+
+  if (typeof props.input === 'object') {
+    return props.input;
+  }
+
+  return {
+    label: '',
+    placeholder: '',
+  } as InputConfigProps;
+});
+
+function confirm() {
+  if (props.input === false) {
+    return emit('confirm');
+  }
+
+  if (input.value == '' && inputConfig.value?.required) {
+
+    inputRef.value?.focus();
+
+    return;
+  }
+
+  emit('confirm', input.value);
+
+  input.value = '';
+
+}
+
+</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 = {};