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

package/src/components/pillSelect/EUIPillSelect.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <p v-if="label" class="mb-3 text-sm font-medium text-gray-500 font-inter">
+      {{ label }}<span v-if="required" class="text-red-500">*</span>
+    </p>
+    <div class="flex flex-row flex-wrap gap-3">
+      <EUIButton
+        v-for="(item, idx) in items"
+        :key="`${name}-${idx}`"
+        type="button"
+        size="md"
+        color="white"
+        :class="[
+          isSelected(item)
+            ? '!bg-purple-100 !text-purple-600 !font-medium shadow-sm'
+            : '!bg-gray-100 !text-gray-600 !font-medium hover:text-gray-800',
+          'px-4 py-2 text-sm leading-6 focus:outline-none rounded-3xl transition-colors duration-100 ease-in-out',
+        ]"
+        rounded
+        @click="handleSelect(item)"
+        :disabled="disabled"
+      >
+        {{
+          ignoreStartCase
+            ? item[labelKey] || ""
+            : startCase(item[labelKey] || "")
+        }}
+      </EUIButton>
+    </div>
+    <div class="ml-2 mt-1">
+      <EUIErrorMessage :name="name" :errors="errors" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { startCase } from "lodash";
+import EUIButton from "../button/EUIButton.vue";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+import { PropType, computed, toRefs, watch } from "vue";
+import { ErrorObject, ValidationErrors } from "../../utils/types";
+const props = defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+  modelValue: {
+    type: Object as PropType<any | null>,
+    default: null,
+  },
+  labelKey: {
+    type: String,
+    default: "label",
+  },
+  valueKey: {
+    type: String,
+    default: "value",
+  },
+  items: {
+    type: Array<any>,
+    default: [],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    deault: false,
+  },
+  required: {
+    type: Boolean,
+    deault: false,
+  },
+  errors: {
+    type: Object as PropType<ValidationErrors | ErrorObject[]>,
+    default: [],
+  },
+  ignoreStartCase: {
+    type: Boolean,
+    deault: false,
+  },
+});
+const { multiple, valueKey, labelKey, errors, ignoreStartCase } = toRefs(props);
+const emit = defineEmits(["update:model-value","on-change"]);
+const activeItem = computed({
+  set: (value) => {
+    emit("update:model-value", value);
+  },
+  get: () => props.modelValue,
+});
+const handleMultiSelect = (item: any) => {
+  if (Array.isArray(activeItem.value)) {
+    const index = activeItem.value?.findIndex(
+      (x) => x?.[valueKey.value] === item?.[valueKey.value]
+    );
+    if (index != -1) {
+      activeItem.value.splice(index, 1);
+    } else {
+      activeItem.value.push(item);
+    }
+    emit('on-change',activeItem.value)
+  }
+};
+const handleSingleSelect = (item: any) => {
+  if (!Array.isArray(activeItem.value)) {
+    if (activeItem.value?.[valueKey.value] === item?.[valueKey.value]) {
+      activeItem.value = null;
+    } else {
+      activeItem.value = item;
+    }
+    emit('on-change',activeItem.value)
+  }
+};
+const handleSelect = (item: any) => {
+  if (multiple.value) {
+    handleMultiSelect(item);
+  } else {
+    handleSingleSelect(item);
+  }
+};
+
+const isSelected = (item: any) => {
+  if (Array.isArray(activeItem.value)) {
+    const values = activeItem.value
+      .map((x) => x[valueKey.value])
+      .filter((x) => x);
+    return values.includes(item?.[valueKey.value]);
+  }
+  return activeItem.value?.[valueKey.value] === item?.[valueKey.value];
+};
+watch(
+  multiple,
+  () => {
+    if (multiple.value) {
+      if (!Array.isArray(activeItem.value)) {
+        activeItem.value = [activeItem.value];
+      }
+    } else {
+      activeItem.value = activeItem.value ? activeItem.value : null;
+    }
+  },
+  { immediate: true }
+);
+</script>

package/src/components/popover/EUIPopover.stories.ts

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIPopover from "./EUIPopover.vue";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { ref } from "vue";
+
+const meta: Meta<typeof EUIPopover> = {
+  title: "Example/Popover",
+  component: EUIPopover,
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Sets the title for the popper content.",
+    },
+    trigger: {
+      control: { type: "select" },
+      options: ["click", "hover"],
+      description:
+        "Specifies the trigger for displaying the popper. Default is 'click'.",
+      defaultValue: "click",
+      table: {
+        defaultValue: { summary: "click" },
+      },
+    },
+    placement: {
+      control: { type: "select" },
+      options: ["top", "left", "bottom", "right", "bottom-start", "bottom-end"],
+      description:
+        "Defines the position of the popper relative to the reference element. Default is 'bottom'.",
+      defaultValue: "bottom",
+      table: {
+        defaultValue: { summary: "bottom" },
+      },
+    },
+    className: {
+      control: "text",
+      description:
+        "Additional CSS classes for styling the popper content container.",
+    },
+    customButton: {
+      control: "text",
+      description:
+        "CSS classes for styling the button that triggers the popper.",
+    },
+  },
+} satisfies Meta<typeof EUIPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: "max-w-64 min-w-64",
+    title: "Popper click to show",
+    customButton: "border border-gray-600 px-4 py-2 rounded-lg",
+    trigger: "click",
+    placement: "bottom",
+  },
+  render: (args) => ({
+    components: { EUIPopover },
+    setup() {
+      return { args };
+    },
+    template: `<div class="min-h-72 mx-auto max-w-xl p-6">
+                <EUIPopover v-bind="args">
+                  <template #referenceButton>
+                   Information
+                  </template>
+                  <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg text-start">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+                  </div>
+                </EUIPopover>
+              </div>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This is the default configuration for the `EUIPopover` component, triggered by clicking the button.",
+      },
+      source: {
+        code: `<template>
+      <EUIPopover
+        trigger="click"
+        placement="bottom"
+        className="max-w-64 min-w-64"
+        title="Popper click to show"
+        customButton="border border-gray-600 px-4 py-2 rounded-lg"
+      >
+        <template #referenceButton>
+          Information
+        </template>
+        <!-- Popper Content Here... -->
+        <div
+          class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
+        >
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
+          quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
+          excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+        </div>
+      </EUIPopover>
+    </template>`,
+      },
+    },
+  },
+};
+
+export const PopoverHover: Story = {
+  args: {
+    title: "Popover hover to Shows",
+    className: "max-w-64 min-w-64",
+    customButton: "border border-gray-600 px-4 py-2 rounded-lg",
+    trigger: "hover",
+    placement: "bottom-start",
+  },
+  render: (args) => ({
+    components: { EUIPopover, InformationCircleIcon },
+    setup() {
+      return { args };
+    },
+    template: `<div class="min-h-72">
+                <EUIPopover v-bind="args" trigger="hover">
+                  <template #referenceButton>
+                   Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
+                  </template>
+                  <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+                  </div>
+                </EUIPopover>
+              </div>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The `PopoverHover` story showcases the `EUIPopover` component triggered on hover.",
+      },
+      source: {
+        code: `<template>
+      <EUIPopover
+        trigger="hover"
+        placement="bottom-start"
+        className="max-w-64 min-w-64"
+        title="Popper hover to Shows"
+        customButton="border border-gray-600 px-4 py-2 rounded-lg"
+      >
+        <template #referenceButton>
+          <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
+        </template>
+        <!-- Popper Content Here... -->
+        <div
+          class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
+        >
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
+          quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
+          excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+        </div>
+      </EUIPopover>
+    </template>`,
+      },
+    },
+  },
+};
+
+export const PopoverEmitAccess: Story = {
+  args: {
+    title: "Popover click to Show",
+    className: "max-w-64 min-w-64",
+    customButton: "border border-gray-600 px-4 py-2 rounded-lg",
+    trigger: "click",
+    placement: "bottom-start",
+  },
+  render: (args) => ({
+    components: { EUIPopover, InformationCircleIcon },
+    setup() {
+      const popoverVisible = ref(false);
+
+      const onPopoverShow = () => {
+        popoverVisible.value = true;
+      };
+
+      const onPopoverHide = () => {
+        popoverVisible.value = false;
+      };
+
+      return { args, onPopoverShow, onPopoverHide };
+    },
+    template: `<div class="min-h-72">
+                <EUIPopover v-bind="args" trigger="click"  @showPopover="onPopoverShow"
+         @hidePopover="onPopoverHide">
+                  <template #referenceButton>
+                   Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
+                  </template>
+                  <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+                  </div>
+                </EUIPopover>
+              </div>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The `PopoverClick` story showcases the `EUIPopover` component triggered on Emit.",
+      },
+      source: {
+        code: `<script lang="ts" setup>
+const popoverVisible = ref(false);
+
+const onPopoverShow = () => {
+  popoverVisible.value = true;
+};
+
+const onPopoverHide = () => {
+  popoverVisible.value = false;
+};
+</script>
+<template>
+<div>
+  Popover is {{ popoverVisible ? "visible" : "hidden" }}
+</div>
+  <EUIPopover
+    @showPopover="onPopoverShow"
+    @hidePopover="onPopoverHide"
+    trigger="hover"
+    placement="bottom-start"
+    className="max-w-64 min-w-64"
+    title="Popover hover to Shows"
+    customButton="border border-gray-600 px-4 py-2 rounded-lg"
+  >
+    <template #referenceButton>
+      <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
+    </template>
+    <!-- Popover Content Here... -->
+    <div
+      class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
+    >
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
+      quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
+      excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
+    </div>
+  </EUIPopover>
+</template>`,
+      },
+    },
+  },
+};

package/src/components/popover/EUIPopover.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div
+      ref="popperButton"
+      :class="['inline-flex items-center text-sm font-semibold gap-x-2', customButton]"
+    >
+      <slot name="referenceButton" :open="isOpen"/>
+    </div>
+    <div
+      ref="tooltip"
+      :class="['poppertooltip h-auto text-sm font-normal bg-white', className]"
+    >
+      <div class="arrow" data-popper-arrow />
+      <div
+        v-if="title"
+        class="text-base font-semibold text-current leading-[normal] px-4 py-2"
+        v-text="title"
+      />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+import { createPopper, Instance } from "@popperjs/core";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+import { onMounted, ref } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  trigger: {
+    type: String as PropType<"click" | "hover">,
+    default: "click",
+    validator: (value: string) => ["click", "hover"].includes(value),
+  },
+  className: {
+    type: String,
+    required: false,
+    default: "bg-white text-gray-900",
+  },
+  placement: {
+    type: String as PropType<"top" | "left" | "bottom" | "right" | "bottom-start" | "bottom-end">,
+    default: "bottom",
+  },
+  customButton: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+
+const popperInstance = ref<Instance | null>(null);
+const popperButton = ref<HTMLElement | null>(null);
+const tooltip = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+
+const emit = defineEmits(['showPopover', 'hidePopover']);
+
+onMounted(() => {
+  if (props.trigger === "click") {
+    useEventListener(popperButton.value, "click", show);
+    onClickOutside(popperButton.value, hide);
+  } else if (props.trigger === "hover") {
+    const showEvents = ["mouseenter", "focus"];
+    const hideEvents = ["mouseleave", "blur"];
+
+    showEvents.forEach((event) => {
+      popperButton.value?.addEventListener(event, show);
+    });
+
+    hideEvents.forEach((event) => {
+      popperButton.value?.addEventListener(event, hide);
+    });
+  }
+
+  if (popperButton.value && tooltip.value) {
+    popperInstance.value = createPopper(popperButton.value, tooltip.value, {
+      placement: props.placement,
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+});
+
+function show() {
+  tooltip.value?.setAttribute("data-show", "");
+  isOpen.value = true;
+  emit("showPopover");
+  popperInstance.value?.update();
+}
+
+function hide() {
+  tooltip.value?.removeAttribute("data-show");
+  isOpen.value = false;
+  emit("hidePopover");
+}
+</script>
+
+<style lang="scss" scoped>
+.poppertooltip {
+  @apply hidden;
+}
+
+.poppertooltip[data-show] {
+  z-index: calc(infinity);
+  @apply block rounded-lg;
+}
+
+.arrow,
+.arrow::before {
+  background: inherit;
+  @apply size-3 absolute border-[0.4rem] border-gray-200 rounded-tl-sm -z-[1];
+}
+
+.arrow {
+  @apply invisible;
+}
+
+.arrow::before {
+  content: "";
+  @apply visible transform rotate-45 mx-1;
+}
+
+.poppertooltip{
+  &[data-popper-placement^="top"] > .arrow {
+    @apply bottom-0 -ml-2.5;
+    &::before {
+      @apply border-t-transparent border-l-transparent;
+    }
+  }
+  &[data-popper-placement^="bottom"] > .arrow {
+    @apply -top-3 -ml-2.5;
+    &::before {
+      @apply border-b-transparent border-r-transparent;
+    }
+  }
+  &[data-popper-placement^="left"] > .arrow {
+    @apply right-1 -mt-1.5;
+    &::before {
+      @apply border-l-transparent border-b-transparent;
+    }
+  }
+  &[data-popper-placement^="right"] > .arrow {
+    @apply -left-4 -mt-1.5;
+    &::before {
+      @apply border-r-transparent border-t-transparent;
+    }
+  }
+}
+</style>

package/src/components/radio/EUIRadio.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIRadio from "./EUIRadio.vue";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Radio",
+  component: EUIRadio,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      description: "The label displayed next to the raidobox",
+      control: "text",
+    },
+    disabled: {
+      description: "Disables the raidobox when set to true",
+      control: "boolean",
+    },
+    modelValue: {
+      description: "Controls the checked state of the raidobox",
+      control: "boolean",
+    },
+    errors: {
+      description:
+        "An object that contains error messages or validation information",
+      control: "object",
+    },
+    name: {
+      description:
+        "The name attribute for the raidobox input, useful for forms",
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof EUIRadio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    label: "Accept Terms & Conditions",
+    modelValue: false,
+    disabled: false,
+  },
+};
+
+// Disabled state story
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Radio",
+    modelValue: false,
+    disabled: true,
+  },
+};

package/src/components/radio/EUIRadio.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <label class="inline-flex items-center cursor-pointer eui-radio">
+        <input
+            v-model="modelValue"
+            type="radio"
+            class="sr-only peer eui-radio_input"
+            :disabled="disabled"
+            @change="toggle()"
+        />
+        <div
+        class="eui-radio_circle relative size-6 bg-gray-200 peer-focus:outline-none rounded-full after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-gray-500/20 after:border-gray-300/10 after:border after:rounded-full after:size-5 peer-checked:after:bg-purple-700"
+        >
+            <span class="eui-radio_icons"></span>
+        </div>
+        <span v-if="label" class="text-sm font-medium text-gray-900 ms-3 first-letter:capitalize">
+            {{ label }}
+        </span>
+    </label>
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from "vue";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+
+// Props declaration
+const props = defineProps({
+  errors: { type: Object, required: false, default: () => {} },
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    required: true,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  label: { type: String as PropType<string>, required: true, default: "" },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const {modelValue} = toRefs(props)
+
+const emit = defineEmits(["update:modelValue", "toggle"]);
+const toggle = () => {
+  emit("toggle", props.modelValue);
+  emit("update:modelValue", props.modelValue);
+};
+
+</script>
+
+<style lang="scss" scoped>
+    .eui-radio_icons {
+      @apply size-5 absolute z-10 top-0.5 left-0.5 rounded-full;
+      &::after {
+        content: '';
+        @apply absolute border-solid border-transparent transform scale-0 opacity-0 transition-all duration-200 delay-75 ease-in;
+      }
+      &::after {
+        @apply rotate-45 top-2;
+      }
+    }
+
+    .eui-radio_input:checked + .eui-radio_circle {
+      .eui-radio_icons {
+        &::after {
+          width: 5.3px;
+          border-width: 0 2.4px 2.4px 0;
+          @apply border-white top-1 left-2 h-2.5 opacity-100 scale-100;
+        }
+      }
+    }
+</style>