sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseToast.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="flex justify-center">
-    <div class="inline-flex items-center max-w-sm overflow-hidden rounded bg-slate-700 shadow-xl py-3 px-3">
-      <BaseIcon
-        :icon="icon" 
-        class="w-5 h-5 mr-2.5 shrink-0"
-        :class="colorClass"
-      />
-      
-      <p class="text-sm leading-snug text-white line-clamp-4">
-        {{ text }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  text: string;
-  color: string;
-}>();
-
-const colorClass = computed(() => {
-  if (props.color == 'warning') {
-    return 'text-yellow-500';
-  } else if (props.color == 'danger') {
-    return 'text-red-500';
-  } else if (props.color == 'success') {
-    return 'text-green-500';
-  }
-  return 'text-blue-500';
-});
-
-const icon = computed(() => {
-  if (props.color == 'warning') {
-    return 'heroicons-solid:exclamation';
-  } else if (props.color == 'danger') {
-    return 'heroicons-solid:exclamation-circle';
-  } else if (props.color == 'success') {
-    return 'heroicons-solid:check-circle';
-  }
-  return 'heroicons-solid:information-circle';
-});
+<template>
+  <div class="flex justify-center">
+    <div class="inline-flex items-center max-w-sm overflow-hidden rounded bg-slate-700 shadow-xl py-3 px-3">
+      <BaseIcon
+        :icon="icon" 
+        class="w-5 h-5 mr-2.5 shrink-0"
+        :class="colorClass"
+      />
+      
+      <p class="text-sm leading-snug text-white line-clamp-4">
+        {{ text }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  text: string;
+  color: string;
+}>();
+
+const colorClass = computed(() => {
+  if (props.color == 'warning') {
+    return 'text-yellow-500';
+  } else if (props.color == 'danger') {
+    return 'text-red-500';
+  } else if (props.color == 'success') {
+    return 'text-green-500';
+  }
+  return 'text-blue-500';
+});
+
+const icon = computed(() => {
+  if (props.color == 'warning') {
+    return 'heroicons-solid:exclamation';
+  } else if (props.color == 'danger') {
+    return 'heroicons-solid:exclamation-circle';
+  } else if (props.color == 'success') {
+    return 'heroicons-solid:check-circle';
+  }
+  return 'heroicons-solid:information-circle';
+});
 </script>

package/src/components/BaseTooltip.stories.js

@@ -1,65 +1,65 @@
-import BaseTooltip from "./BaseTooltip.vue";
-import BaseCard from "./BaseCard.vue";
-import BaseCardRow from "./BaseCardRow.vue";
-
-export default {
-  title: "Components/BaseTooltip",
-  component: BaseTooltip,
-  args: {
-    text: "Click here to learn more about this button",
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCard,
-    BaseCardRow,
-    BaseTooltip,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseCard>
-        <BaseCardRow size=sm>
-        <BaseTooltip class="inline-block" v-bind="args">
-            <div>Hover me, the tooltip show appear outside the BaseCard</div>
-        </BaseTooltip>
-        </BaseCardRow>
-    </BaseCard>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Dark = Template.bind({});
-Dark.args = { dark: true };
-
-const CustomSlotTemplate = (args) => ({
-  components: {
-    BaseCard,
-    BaseCardRow,
-    BaseTooltip,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseCard>
-        <BaseCardRow size=sm>
-            <BaseTooltip class="inline-block" v-bind="args">
-                <div>Hover me, the tooltip show appear outside the BaseCard</div>
-                <template #tooltip>
-                    <div class="bg-black text-white text-xs p-3">
-                        {{ args.text }}
-                    </div>
-                </template>
-            </BaseTooltip>
-        </BaseCardRow>
-    </BaseCard>
-  `,
-});
-
-export const CustomSlot = CustomSlotTemplate.bind({});
-CustomSlot.args = {};
+import BaseTooltip from "./BaseTooltip.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+
+export default {
+  title: "Components/BaseTooltip",
+  component: BaseTooltip,
+  args: {
+    text: "Click here to learn more about this button",
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCard,
+    BaseCardRow,
+    BaseTooltip,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCard>
+        <BaseCardRow size=sm>
+        <BaseTooltip class="inline-block" v-bind="args">
+            <div>Hover me, the tooltip show appear outside the BaseCard</div>
+        </BaseTooltip>
+        </BaseCardRow>
+    </BaseCard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Dark = Template.bind({});
+Dark.args = { dark: true };
+
+const CustomSlotTemplate = (args) => ({
+  components: {
+    BaseCard,
+    BaseCardRow,
+    BaseTooltip,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCard>
+        <BaseCardRow size=sm>
+            <BaseTooltip class="inline-block" v-bind="args">
+                <div>Hover me, the tooltip show appear outside the BaseCard</div>
+                <template #tooltip>
+                    <div class="bg-black text-white text-xs p-3">
+                        {{ args.text }}
+                    </div>
+                </template>
+            </BaseTooltip>
+        </BaseCardRow>
+    </BaseCard>
+  `,
+});
+
+export const CustomSlot = CustomSlotTemplate.bind({});
+CustomSlot.args = {};

package/src/components/BaseTooltip.vue

@@ -1,94 +1,94 @@
-<template>
-  <div
-    ref="targetRef"
-    :class="classInternal"
-  >
-    <slot />
-  </div>
-  <Teleport
-    v-if="visible"
-    to="body"
-  >
-    <div
-      ref="tooltipRef"
-      class="fixed top-0 left-0 z-tooltip"
-      :class="[!interactive ? 'pointer-events-none' : '']"
-      :style="floatingStyles"
-    >
-      <transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="transform scale-90 opacity-0"
-        enter-to-class="transform scale-100 opacity-100"
-        leave-active-class="transition duration-75 ease-in"
-        leave-from-class="transform scale-100 opacity-100"
-        leave-to-class="transform scale-90 opacity-0"
-      >
-        <slot
-          v-if="showTooltip"
-          name="tooltip"
-        >
-          <div
-            class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
-            :class="[
-              dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
-            ]"
-            v-html="text"
-          />
-        </slot>
-      </transition>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useTooltip } from '@/composables/tooltip';
-import { unrefElement } from '@vueuse/core';
-import { UseFloatingOptions } from '@floating-ui/vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<{
-  visible?: boolean,
-  text?: string | null | undefined;
-  class?: string[] | string | null | undefined;
-  floatingOptions?: UseFloatingOptions,
-  /**
-   * Whether the tooltip content is interactive or not.
-   * When true, hovering the tooltip content will keep it visible.
-   */
-  interactive?: boolean,
-  delay?: number,
-  dark?: boolean,
-  offset?: number,
-}>(), {
-  visible: true,
-  text: null,
-  class: null,
-  floatingOptions() {
-    return {
-      placement: 'top-start',
-    };
-  },
-  interactive: false,
-  delay: 0,
-  dark: false,
-  offset: 6,
-});
-
-const targetRef = ref<HTMLElement | null>(null);
-
-const targetInternal = computed(() => unrefElement(targetRef));
-
-const tooltipRef = ref<HTMLElement | null>(null)
-
-const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
-
-const classInternal = computed(() => {
-  return [
-    props.class,
-  ];
-});
-
+<template>
+  <div
+    ref="targetRef"
+    :class="classInternal"
+  >
+    <slot />
+  </div>
+  <Teleport
+    v-if="visible"
+    to="body"
+  >
+    <div
+      ref="tooltipRef"
+      class="fixed top-0 left-0 z-tooltip"
+      :class="[!interactive ? 'pointer-events-none' : '']"
+      :style="floatingStyles"
+    >
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-90 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-90 opacity-0"
+      >
+        <slot
+          v-if="showTooltip"
+          name="tooltip"
+        >
+          <div
+            class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
+            :class="[
+              dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
+            ]"
+            v-html="text"
+          />
+        </slot>
+      </transition>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useTooltip } from '@/composables/tooltip';
+import { unrefElement } from '@vueuse/core';
+import { UseFloatingOptions } from '@floating-ui/vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  visible?: boolean,
+  text?: string | null | undefined;
+  class?: string[] | string | null | undefined;
+  floatingOptions?: UseFloatingOptions,
+  /**
+   * Whether the tooltip content is interactive or not.
+   * When true, hovering the tooltip content will keep it visible.
+   */
+  interactive?: boolean,
+  delay?: number,
+  dark?: boolean,
+  offset?: number,
+}>(), {
+  visible: true,
+  text: null,
+  class: null,
+  floatingOptions() {
+    return {
+      placement: 'top-start',
+    };
+  },
+  interactive: false,
+  delay: 0,
+  dark: false,
+  offset: 6,
+});
+
+const targetRef = ref<HTMLElement | null>(null);
+
+const targetInternal = computed(() => unrefElement(targetRef));
+
+const tooltipRef = ref<HTMLElement | null>(null)
+
+const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
+
+const classInternal = computed(() => {
+  return [
+    props.class,
+  ];
+});
+
 </script>

package/src/components/BaseUniqueCode.stories.js

@@ -1,36 +1,36 @@
-import BaseUniqueCode from "./BaseUniqueCode.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-
-export default {
-  title: "Form/BaseUniqueCode",
-  component: BaseUniqueCode,
-  argTypes: {
-    type: {
-      control: { type: "select" },
-      options: ["numeric", "alphanumeric"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseUniqueCode, ShowValue },
-  setup() {
-    const value = ref("");
-    return { args, value };
-  },
-  template: `
-    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const Numeric = Template.bind({});
-Numeric.args = {
-  numberOfCharacters: 4,
-};
-
-export const Alphanumeric = Template.bind({});
-Alphanumeric.args = {
-  numberOfCharacters: 4,
-  type: "text",
-};
+import BaseUniqueCode from "./BaseUniqueCode.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+
+export default {
+  title: "Form/BaseUniqueCode",
+  component: BaseUniqueCode,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["numeric", "alphanumeric"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseUniqueCode, ShowValue },
+  setup() {
+    const value = ref("");
+    return { args, value };
+  },
+  template: `
+    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Numeric = Template.bind({});
+Numeric.args = {
+  numberOfCharacters: 4,
+};
+
+export const Alphanumeric = Template.bind({});
+Alphanumeric.args = {
+  numberOfCharacters: 4,
+  type: "text",
+};