sprintify-ui 0.10.64 → 0.10.65

package/src/components/BaseModalCenter.vue

@@ -1,128 +1,128 @@
-<template>
-  <Teleport to="body">
-    <transition
-      name="modal"
-      enter-active-class="duration-300"
-      leave-active-class="duration-200"
-    >
-      <div v-show="modelValue">
-        <div
-          data-scroll-lock-scrollable
-          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-        >
-          <div
-            class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
-            :class="[
-              showCloseButton ? 'pt-20' : 'pt-6',
-              {
-                'sm:items-center': verticalAlign == 'center',
-                'sm:items-start': verticalAlign == 'top',
-              },
-            ]"
-          >
-            <div class="pt-safe grow">
-              <transition
-                appear
-                enter-active-class="duration-100 ease-out"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="duration-100 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <div
-                  v-if="modelValue"
-                  :class="twMerge(
-                    'fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity',
-                    twBackdrop
-                  )"
-                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
-                />
-              </transition>
-
-              <transition
-                appear
-                enter-active-class="duration-100 ease-out"
-                enter-from-class="translate-y-20 opacity-0"
-                enter-to-class="translate-y-0 opacity-100"
-                leave-active-class="duration-100 ease-in"
-                leave-from-class="translate-y-0 opacity-100"
-                leave-to-class="translate-y-20 opacity-0"
-              >
-                <div
-                  v-if="modelValue"
-                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white ring-1 ring-opacity-10 ring-black sm:rounded-xl sm:shadow-2xl"
-                  :style="{
-                    maxWidth: maxWidth,
-                  }"
-                  :class="[
-                    modal.animationClasses.value,
-                    clipped ? 'overflow-hidden' : '',
-                  ]"
-                >
-                  <slot :close="modal.close" />
-                </div>
-              </transition>
-            </div>
-          </div>
-
-          <button
-            v-if="showCloseButton"
-            class="right fixed shadow hover:shadow-lg duration-300 transition-shadow right-2 top-2 flex h-10 w-10 ring-1 ring-opacity-5 ring-black bg-white items-center justify-center rounded-full"
-            type="button"
-            @click="modal.close()"
-          >
-            <BaseIcon
-              class="h-5 w-5 text-black"
-              icon="heroicons:x-mark"
-            />
-          </button>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useModal } from '@/composables/modal';
-import { PropType } from 'vue';
-import { twMerge } from 'tailwind-merge';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: Boolean,
-  },
-  verticalAlign: {
-    default: 'center',
-    type: String,
-  },
-  closeOnOutsideClick: {
-    default: true,
-    type: Boolean,
-  },
-  maxWidth: {
-    default: '512px',
-    type: String,
-  },
-  showCloseButton: {
-    default: true,
-    type: Boolean,
-  },
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-  twBackdrop: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit as any
-);
-</script>
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          data-scroll-lock-scrollable
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+        >
+          <div
+            class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
+            :class="[
+              showCloseButton ? 'pt-20' : 'pt-6',
+              {
+                'sm:items-center': verticalAlign == 'center',
+                'sm:items-start': verticalAlign == 'top',
+              },
+            ]"
+          >
+            <div class="pt-safe grow">
+              <transition
+                appear
+                enter-active-class="duration-100 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  :class="twMerge(
+                    'fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity',
+                    twBackdrop
+                  )"
+                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-100 ease-out"
+                enter-from-class="translate-y-20 opacity-0"
+                enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="duration-100 ease-in"
+                leave-from-class="translate-y-0 opacity-100"
+                leave-to-class="translate-y-20 opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white ring-1 ring-opacity-10 ring-black sm:rounded-xl sm:shadow-2xl"
+                  :style="{
+                    maxWidth: maxWidth,
+                  }"
+                  :class="[
+                    modal.animationClasses.value,
+                    clipped ? 'overflow-hidden' : '',
+                  ]"
+                >
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+
+          <button
+            v-if="showCloseButton"
+            class="right fixed shadow hover:shadow-lg duration-300 transition-shadow right-2 top-2 flex h-10 w-10 ring-1 ring-opacity-5 ring-black bg-white items-center justify-center rounded-full"
+            type="button"
+            @click="modal.close()"
+          >
+            <BaseIcon
+              class="h-5 w-5 text-black"
+              icon="heroicons:x-mark"
+            />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useModal } from '@/composables/modal';
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  verticalAlign: {
+    default: 'center',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '512px',
+    type: String,
+  },
+  showCloseButton: {
+    default: true,
+    type: Boolean,
+  },
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit as any
+);
+</script>

package/src/components/BaseModalSide.stories.js

@@ -1,55 +1,61 @@
-import BaseModalSide from "./BaseModalSide.vue";
-import { Icon as BaseIcon } from "@iconify/vue";
-import BaseAvatar from "./BaseAvatar.vue";
-
-export default {
-  title: "Components/BaseModalSide",
-  component: BaseModalSide,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseModalSide,
-    BaseIcon,
-    BaseAvatar,
-  },
-  setup() {
-    const show = ref(false);
-    return { args, show };
-  },
-  template: `
-    <div class="">
-      <button @click="show = true" class="btn">Show modal</button>
-      <BaseModalSide v-model="show" v-bind="args">
-        <template #default="{close}">
-          <div class="p-8">
-            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
-
-            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
-
-            <button @click="close" class="btn mt-4">Close</button>
-          </div>
-        </template>
-      </BaseModalSide>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const CustomMaxWidth = Template.bind({});
-CustomMaxWidth.args = {
-  maxWidth: "16rem",
-};
-
-export const CustomBackdropClass = Template.bind({});
-CustomBackdropClass.args = {
-  backdropClass: "bg-red-500 bg-opacity-70",
-};
-
-export const PreventLeave = Template.bind({});
-PreventLeave.args = {
-  closeOnOutsideClick: false,
-};
+import BaseModalSide from "./BaseModalSide.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import BaseAvatar from "./BaseAvatar.vue";
+
+export default {
+  title: "Components/BaseModalSide",
+  component: BaseModalSide,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalSide,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalSide v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
+
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
+          </div>
+        </template>
+      </BaseModalSide>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const CustomMaxWidth = Template.bind({});
+CustomMaxWidth.args = {
+  maxWidth: "16rem",
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: "bg-red-500 bg-opacity-70",
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};
+
+
+export const AlignLeft = Template.bind({});
+AlignLeft.args = {
+  align: "left",
+};

package/src/components/BaseModalSide.vue

@@ -1,116 +1,130 @@
-<template>
-  <Teleport to="body">
-    <transition
-      name="modal"
-      enter-active-class="duration-300"
-      leave-active-class="duration-200"
-    >
-      <div v-show="modelValue">
-        <div
-          data-scroll-lock-scrollable
-          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-        >
-          <div class="flex min-h-full w-full pt-20 sm:pt-0">
-            <div class="min-h-full grow">
-              <transition
-                appear
-                enter-active-class="duration-200 ease-out"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="duration-200 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <div
-                  v-show="modelValue"
-                  :class="twMerge(
-                    'fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity',
-                    twBackdrop
-                  )"
-                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
-                />
-              </transition>
-
-              <transition
-                appear
-                enter-active-class="duration-200 ease-out"
-                enter-from-class="translate-x-20 opacity-0"
-                enter-to-class="translate-x-0 opacity-100"
-                leave-active-class="duration-100 ease-in"
-                leave-from-class="translate-x-0 opacity-100"
-                leave-to-class="translate-x-20 opacity-0"
-              >
-                <div
-                  v-show="modelValue"
-                  :style="{
-                    maxWidth: realMaxWidth,
-                  }"
-                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl ring-1 ring-black ring-opacity-10 || sm:rounded-t-none"
-                  :class="[
-                    modal.animationClasses.value,
-                    clipped ? 'overflow-hidden' : '',
-                  ]"
-                >
-                  <button
-                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg ring-1 ring-black ring-opacity-5 duration-300 transition-shadow || sm:-left-[3rem] sm:top-2"
-                    type="button"
-                    @click="modal.close()"
-                  >
-                    <BaseIcon
-                      class="h-5 w-5 text-black"
-                      icon="heroicons:x-mark"
-                    />
-                  </button>
-                  <slot :close="modal.close" />
-                </div>
-              </transition>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { twMerge } from 'tailwind-merge';
-import { useModal } from '@/composables/modal';
-import { useBreakpoints } from '@/composables/breakpoints';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: Boolean,
-  },
-  maxWidth: {
-    default: '32rem',
-    type: String,
-  },
-  closeOnOutsideClick: {
-    default: true,
-    type: Boolean,
-  },
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-  twBackdrop: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const breakpoints = useBreakpoints();
-
-const realMaxWidth = computed((): string => {
-  return breakpoints.greater('sm').value ? props.maxWidth : '100%';
-});
-
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit
-);
-</script>
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          data-scroll-lock-scrollable
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+        >
+          <div class="flex min-h-full w-full pt-20 sm:pt-0">
+            <div class="min-h-full grow">
+              <transition
+                appear
+                enter-active-class="duration-200 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :class="twMerge(
+                    'fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity',
+                    twBackdrop
+                  )"
+                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-200 ease-out"
+                enter-from-class="translate-x-20 opacity-0"
+                enter-to-class="translate-x-0 opacity-100"
+                leave-active-class="duration-100 ease-in"
+                leave-from-class="translate-x-0 opacity-100"
+                leave-to-class="translate-x-20 opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :style="{
+                    maxWidth: realMaxWidth,
+                  }"
+                  class="pb-safe py-safe relative z-[1] flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl ring-1 ring-black ring-opacity-10 || sm:rounded-t-none"
+                  :class="[
+                    modal.animationClasses.value,
+                    classAlign,
+                    clipped ? 'overflow-hidden' : '',
+                  ]"
+                >
+                  <button
+                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg ring-1 ring-black ring-opacity-5 duration-300 transition-shadow"
+                    :class="classButtonAlign"
+                    type="button"
+                    @click="modal.close()"
+                  >
+                    <BaseIcon
+                      class="h-5 w-5 text-black"
+                      icon="heroicons:x-mark"
+                    />
+                  </button>
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import { useModal } from '@/composables/modal';
+import { useBreakpoints } from '@/composables/breakpoints';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '32rem',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  align: {
+    default: 'right',
+    type: String as PropType<'right' | 'left'>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const breakpoints = useBreakpoints();
+
+const realMaxWidth = computed((): string => {
+  return breakpoints.greater('sm').value ? props.maxWidth : '100%';
+});
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit
+);
+
+const classAlign = computed(() => {
+  return props.align === 'right' ? 'mr-0 ml-auto' : 'mr-auto ml-0';
+});
+
+const classButtonAlign = computed(() => {
+  return props.align === 'right' ? '|| sm:-left-[3rem] sm:top-2' : '|| sm:-right-[3rem] sm:top-2';
+});
+</script>