edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/modal/EUIModal.stories.ts

@@ -0,0 +1,372 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { ref } from "vue";
+import EUIModal from "./EUIModal.vue";
+import EUIButton from "../button/EUIButton.vue";
+
+const meta: Meta<typeof EUIModal> = {
+  title: "Example/Modal",
+  component: EUIModal,
+  tags: ["autodocs"],
+  argTypes: {
+    ...{
+      isVisible: {
+        control: "boolean",
+        description: "Controls the visibility of the EUIModal.",
+      },
+      slimHeader: {
+        control: "boolean",
+        description: "Enables a slimmer header style for the modal.",
+        defaultValue: false,
+      },
+      title: {
+        control: "text",
+        description: "Sets the title displayed in the modal header.",
+        defaultValue: "Default Modal Title",
+      },
+      roundedClass: {
+        control: "text",
+        description:
+          "CSS class for defining custom border radius of the modal.",
+        defaultValue: "",
+      },
+      "update:isVisible": {
+        action: "update:isVisible",
+        description: "Triggers when the modal's visibility is updated.",
+      },
+      confirm: {
+        action: "confirm",
+        description: "Emits when the confirm button is clicked.",
+      },
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ["update:isVisible"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default EUIModal story with basic content
+export const Default: Story = {
+  args: {
+    isVisible: false,
+  },
+  render: (args) => ({
+    components: { EUIModal, EUIButton },
+    setup() {
+      const isModalVisible = ref(args.isVisible);
+
+      const openModal = () => {
+        isModalVisible.value = true;
+        action("update:isVisible")(true);
+      };
+
+      const closeModal = () => {
+        isModalVisible.value = false;
+        action("update:isVisible")(false);
+      };
+
+      return {
+        args,
+        isModalVisible,
+        openModal,
+        closeModal,
+        onConfirm: action("confirm"),
+      };
+    },
+    template: `
+      <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+      <EUIModal v-bind="args" :isVisible="isModalVisible" @update:isVisible="closeModal" @confirm="onConfirm">
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+              quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+              aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+              Perspiciatis, nihil?</p>
+      </EUIModal>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates a modal component that is initially hidden. Clicking the 'Open Modal' button triggers the modal to appear, and it can be closed through the close button inside the modal or the cancel button. The modal also includes a 'Confirm' button that emits a `confirm` event, which is logged in Storybook’s actions panel.",
+      },
+      source: {
+        code: `<script setup lang="ts">
+import { ref } from "vue";
+const isModalVisible = ref(false);
+
+const openModal = () => {
+  isModalVisible.value = true;
+};
+
+const closeModal = () => {
+  isModalVisible.value = false;
+};
+
+const onActionModal = () => {
+  alert("Modal Action working set validation");
+  closeModal();
+};
+</script>
+<template>
+  <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+  <EUIModal
+    :isVisible="isModalVisible"
+    :slim-header="false"
+    @update:isVisible="isModalVisible = $event"
+    @confirm="onActionModal"
+  >
+    <div>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+      possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid eius
+      omnis repellendus nihil soluta vitae a temporibus! Perspiciatis, nihil?
+    </div>
+  </EUIModal>
+</template>
+`,
+      },
+    },
+  },
+};
+
+// Custom EUIModal story with different content
+export const ModalCustomize: Story = {
+  args: {
+    isVisible: false, // EUIModal is visible by default
+  },
+  render: (args) => ({
+    components: { EUIModal, EUIButton },
+    setup() {
+      const isModalVisible = ref(args.isVisible);
+
+      const openModal = () => {
+        isModalVisible.value = true;
+        action("update:isVisible")(true);
+      };
+
+      const closeModal = () => {
+        isModalVisible.value = false;
+        action("update:isVisible")(false);
+      };
+
+      const onActionModal = () => {
+        alert("Modal Action working set validation");
+        closeModal();
+      };
+
+      return {
+        args,
+        isModalVisible,
+        openModal,
+        closeModal,
+        onActionModal,
+        onConfirm: action("confirm"),
+      };
+    },
+    template: `
+      <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+      <EUIModal v-bind="args" :isVisible="isModalVisible" @update:isVisible="closeModal" @confirm="onConfirm">
+        <template #header>
+            <div
+              class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b"
+            >
+              Custom Header here
+            </div>
+          </template>
+          <template #content>
+            <div
+              class="p-4 max-h-[calc(100svh-10rem)] overflow-y-auto space-y-4"
+            >
+              <div v-for="item in 10" :key="item">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+                quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+                aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+                Perspiciatis, nihil?
+              </div>
+            </div>
+          </template>
+          <template #footer>
+            <div
+              class="sticky inset-x-0 bottom-0 flex items-center justify-end gap-4 p-4 bg-white border-t border-gray-200"
+            >
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+                @click="closeModal"
+              >
+                Cancel
+              </button>
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+                @click="onActionModal"
+              >
+                Apply now
+              </button>
+            </div>
+          </template>
+      </EUIModal>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "* The template method allows you to define how content is rendered in the <mark>EUIModal</mark> component. \n\n* Named slots <mark>(#header, #content, #footer)</mark> enable you to customize modal.",
+      },
+      source: {
+        code: `<script setup lang="ts">
+import { ref } from "vue";
+const isModalVisible = ref(false);
+
+const openModal = () => {
+  isModalVisible.value = true;
+};
+
+const closeModal = () => {
+  isModalVisible.value = false;
+};
+
+const onActionModal = () => {
+  alert("Modal Action working set validation");
+  closeModal();
+};
+</script>
+<template>
+  <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+  <EUIModal
+    :isVisible="isModalVisible"
+    :slim-header="false"
+    rounded-class="rounded-3xl"
+    @update:isVisible="isModalVisible = $event"
+    @confirm="closeModal"
+  >
+    <template #header>
+      <div class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b">
+        Custom Header here
+      </div>
+    </template>
+    <template #content>
+      <div class="p-4 max-h-[calc(100svh-10rem)] overflow-y-auto space-y-4">
+        <div v-for="item in 10" :key="item">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+          possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid
+          eius omnis repellendus nihil soluta vitae a temporibus! Perspiciatis,
+          nihil?
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        class="sticky inset-x-0 bottom-0 flex items-center justify-end gap-4 p-4 bg-white border-t border-gray-200"
+      >
+        <button
+          class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+          @click="closeModal()"
+        >
+          Cancel
+        </button>
+        <button
+          class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+          @click="onActionModal()"
+        >
+          Apply now
+        </button>
+      </div>
+    </template>
+  </EUIModal>
+</template>
+`,
+      },
+    },
+  },
+};
+
+export const SlimHeader: Story = {
+  args: {
+    isVisible: false,
+    slimHeader: true,
+    title: "Slimheader Modal Title",
+  },
+  render: (args) => ({
+    components: { EUIModal, EUIButton },
+    setup() {
+      const isModalVisible = ref(args.isVisible);
+
+      const openModal = () => {
+        isModalVisible.value = true;
+        action("update:isVisible")(true);
+      };
+
+      const closeModal = () => {
+        isModalVisible.value = false;
+        action("update:isVisible")(false);
+      };
+
+      return {
+        args,
+        isModalVisible,
+        openModal,
+        closeModal,
+        onConfirm: action("confirm"),
+      };
+    },
+    template: `
+      <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+      <EUIModal v-bind="args" :isVisible="isModalVisible" :slimHeader="args.slimHeader" :title="args.title" :roundedClass="args.roundedClass" @update:isVisible="closeModal" @confirm="onConfirm">
+        <template #title>{{ args.title }}</template>
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+              quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+              aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+              Perspiciatis, nihil?</p>
+      </EUIModal>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates a modal component that is initially hidden. Clicking the 'Open Modal' button triggers the modal to appear, and it can be closed through the close button inside the modal or the cancel button. The modal also includes a 'Confirm' button that emits a `confirm` event, which is logged in Storybook’s actions panel. enable <mark>slimheader</mark> use template slot name <mark>(#title)</mark>",
+      },
+      source: {
+        code: `<script setup lang="ts">
+import { ref } from "vue";
+const isModalVisible = ref(false);
+
+const openModal = () => {
+  isModalVisible.value = true;
+};
+
+const closeModal = () => {
+  isModalVisible.value = false;
+};
+
+const onActionModal = () => {
+  alert("Modal Action working set validation");
+  closeModal();
+};
+
+</script>
+<template>
+  <EUIButton size="md" color="purple" @click="openModal">Open Modal</EUIButton>
+  <EUIModal
+    :isVisible="isModalVisible"
+    :slim-header="true"
+    @update:isVisible="isModalVisible = $event"
+    @confirm="onActionModal"
+  >
+    <template #title> Default Modal Title</template>
+    <div>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+      possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid eius
+      omnis repellendus nihil soluta vitae a temporibus! Perspiciatis, nihil?
+    </div>
+  </EUIModal>
+</template>
+`,
+      },
+    },
+  },
+};

package/src/components/modal/EUIModal.vue

@@ -0,0 +1,163 @@
+<template>
+  <Teleport defer to="body">
+    <Transition name="modal">
+      <div
+        v-if="isVisible"
+        class="fixed inset-0 z-50 flex flex-col items-center justify-end sm:justify-center"
+        @click.self="closeModal"
+      >
+        <div
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden"
+        ></div>
+        <div
+          class="bg-white shadow-lg max-w-lg w-full max-h-[calc(100svh-3rem)] md:h-auto overflow-hidden relative"
+          :class="[
+            roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
+          ]"
+        >
+          <template v-if="$slots.header">
+            <slot name="header"></slot>
+          </template>
+          <div
+            v-else
+            class="flex items-center justify-between font-medium text-gray-700"
+            :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
+          >
+            <h3 class="text-xl font-semibold">
+              <slot name="title">{{ title || "Modal Title" }}</slot>
+            </h3>
+            <div>
+              <button
+                type="button"
+                class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
+                @click="closeModal"
+              >
+                <span class="sr-only">Close</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                  class="w-5 h-5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <template v-if="$slots.content">
+            <slot name="content"></slot>
+          </template>
+          <div v-else class="p-4 border-t border-b border-gray-200">
+            <slot></slot>
+          </div>
+
+          <template v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </template>
+          <div v-else class="flex items-center justify-end p-4 space-x-2">
+            <button
+              @click="closeModal"
+              class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+            >
+              Cancel
+            </button>
+            <button
+              @click="$emit('confirm')"
+              class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent, watchEffect } from "vue";
+
+export default defineComponent({
+  name: "Modal",
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    slimHeader: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    roundedClass: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:isVisible", "confirm"],
+  methods: {
+    closeModal() {
+      this.$emit("update:isVisible", false);
+    },
+  },
+  setup(props) {
+    watchEffect(() => {
+      if (props.isVisible) {
+        document.body.style.overflow = "hidden"; // Disable body scroll
+      } else {
+        document.body.style.overflow = ""; // Re-enable body scroll
+      }
+    });
+
+    return {};
+  },
+  beforeUnmount() {
+    document.body.style.overflow = ""; // Re-enable scroll when component unmounts
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+  transform-origin: top;
+  transform: translateY(40%) scale(0.4);
+}
+.modal-enter-to,
+.modal-leave-from {
+  opacity: 1;
+  transform-origin: top center;
+  transform: translateY(0%) scale(1);
+}
+
+.backdrop {
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.modal-enter-from .backdrop,
+.modal-leave-to .backdrop {
+  transform: scale(0.3) rotate3d(0.5, 1, 0, 60deg);
+  opacity: 0;
+}
+.modal-enter-to .backdrop,
+.modal-leave-from .backdrop {
+  // transform: scale(0.8) rotate3d(0.5, 0, 0, 90deg); //rotate effect
+  transform: scale(1) rotate3d(0, 0, 0, 90deg); // fade effect only
+  opacity: 0.2;
+}
+</style>

package/src/components/pillSelect/EUIPillSelect.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import EUIPillSelect from "./EUIPillSelect.vue";
+import { ref } from "vue";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Example/Pill Select",
+  component: EUIPillSelect,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    items: {
+      control: "object",
+      description: "Array of options to display in the select pills.",
+    },
+    modelValue: {
+      control: "object",
+    },
+    label: {
+      control: "text",
+    },
+    name: {
+      control: "text",
+    },
+    multiple: {
+      control: "boolean",
+    },
+    errors: {
+      control: "object",
+    },
+  },
+} satisfies Meta<typeof EUIPillSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    name: "pill",
+    modelValue: {
+      value: "usa",
+      label: "United States",
+    },
+    label:"Please select country",
+    disabled: false,
+    multiple: false,
+    items: [
+      { value: "usa", label: "United States", name: "United States" },
+      { value: "canada", label: "Canada", name: "Canada" },
+      { value: "uk", label: "United Kingdom", name: "United Kingdom" },
+    ],
+    errors: {
+      pill: "Pill is Required",
+    },
+  },
+  render: (args) => ({
+    components: { EUIPillSelect },
+    setup() {
+      const modelValue = ref(args.modelValue);
+
+      const onUpdateModelValue = (newValue: any) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      return { args, modelValue, onUpdateModelValue };
+    },
+    template: `<EUIPillSelect v-bind="args"  v-model="modelValue"      @update:modelValue="onUpdateModelValue" />`,
+  }),
+};