edvoyui-component-library-test-flight 0.0.135 → 0.0.137

package/dist/popover/EUIPopover.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=29b158d9&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=03588f75&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIPopover.vue.d.ts.map

package/dist/table/ColumnResizeTable.vue.d.ts

@@ -0,0 +1,5 @@
+import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/ColumnResizeTable.vue?vue&type=script&setup=true&lang.ts";
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/ColumnResizeTable.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/ColumnResizeTable.vue?vue&type=style&index=0&lang.scss";
+export default _sfc_main;
+//# sourceMappingURL=ColumnResizeTable.vue.d.ts.map

package/dist/table/ColumnResizeTable.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizeTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/table/ColumnResizeTable.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+GAA+G,CAAC;AACtI,cAAc,+GAA+G,CAAC;AAC9H,OAAO,6GAA6G,CAAC;AACrH,eAAe,SAAS,CAAC"}

package/dist/table/GrowthTable.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/GrowthTable.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/GrowthTable.vue?vue&type=style&index=0&scoped=51eff7b0&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/GrowthTable.vue?vue&type=style&index=0&scoped=e8f9f620&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=GrowthTable.vue.d.ts.map

package/dist/tooltip/EUITooltip.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=style&index=0&scoped=765af8f2&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=style&index=0&scoped=45d5b869&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITooltip.vue.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.135",
+  "version": "0.0.137",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -5,22 +5,261 @@
     >
       Edvoy User Interface
     </h1>
-
-<!-- TODO: Add scroll to tab section in Student details page same -->
-
   </div>
 </template>
 <script setup lang="ts">
-
 </script>
 <style lang="scss"></style>
 
 <!-- Development code here  -->
 
- <!-- <template>
+<!-- <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
+
+  <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
+    <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Click Method
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="click"
+          placement="bottom-end"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton="{ open }">
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                v-if="!open"
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+            <div @click.stop>
+              <EUISelect
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :items="datas"
+                :multiple="true"
+                :multiple-limit="3"
+              />
+            </div>
+
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+     <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Hover Method
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="hover"
+          placement="bottom-end"
+          :hover-hide-delay="150"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
+              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
+              Animi laborum tenetur culpa aperiam porro nihil eius soluta
+              asperiores.
+            </div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+   <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Default Open
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          v-model:visible="isInitiallyOpen"
+          placement="bottom-end"
+          :hover-hide-delay="150"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
+              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
+              Animi laborum tenetur culpa aperiam porro nihil eius soluta
+              asperiores.
+            </div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="onDefaultClose()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+ <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Manual
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="manual"
+          v-model:visible="popoverVisible"
+          placement="top"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+          @click="onPopoverToggle"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+            <div @click.stop>
+              <EUISelect
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :items="datas"
+                :multiple="true"
+                :multiple-limit="3"
+              />
+            </div>
+
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+  </div>
+
+
      <div class="mb-10">
       <EUITabOutline
         activeColor="purple"
@@ -1152,7 +1391,7 @@ import EUIAvatar from "./avatar/EUIAvatar.vue";
 import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
 import EUIAccordion from "./accordion/EUIAccordion.vue";
 import EUITelephone from "./telephone/EUITelephone.vue";
-import { DevicePhoneMobileIcon, ExclamationTriangleIcon, HomeIcon } from "@heroicons/vue/24/outline";
+import { DevicePhoneMobileIcon, ExclamationTriangleIcon, FunnelIcon, HomeIcon } from "@heroicons/vue/24/outline";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import EUIDashboardTable from "./table/EUIDashboardTable.vue";
 import tabData from "../data/tab";
@@ -1172,6 +1411,30 @@ import EUIAlerts from "./alerts/EUIAlerts.vue";
 import EUIButtonGroup from "./button/EUIButtonGroup.vue";
 import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
 import EUITabOutline from "./tabs/EUITabOutline.vue";
+import EUIPopover from "./popover/EUIPopover.vue";
+
+// TODO: Popover
+const isLoading = ref(false);
+const popoverVisible = ref(false);
+
+const isInitiallyOpen = ref(true);
+const onDefaultClose = () => {
+  isInitiallyOpen.value = false;
+};
+
+const onPopoverToggle = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
+const onPopoverHide = () => {
+  popoverVisible.value = false;
+};
+
+const applyFilter = () => {
+  onPopoverHide();
+};
+
+const resetFilters = () => {};
 
 const allDays = ref([
   { name: "7 days", count: 5 },

package/src/components/index.ts

@@ -41,6 +41,7 @@ export { default as EUITable } from "./table/EUITable.vue";
 export { default as EUIStudentPagination } from "./table/EUIStudentPagination.vue";
 export { default as EUIMultiDropdown } from "./dropdown/EUIMultiDropdown.vue";
 export { default as GrowthTable } from "./table/GrowthTable.vue";
+export { default as ColumnResizeTable } from "./table/ColumnResizeTable.vue";
 
 export { default as EUILoader } from "./loader/EUILoader.vue";
 export { default as EUICircleLoader } from "./loader/EUICircleLoader.vue";

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

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 import EUIPopover from "./EUIPopover.vue";
+import EUIButton from "../button/EUIButton.vue";
 import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { ref } from "vue";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
 
 const meta: Meta<typeof EUIPopover> = {
   title: "Example/Popover",
@@ -14,7 +16,7 @@ const meta: Meta<typeof EUIPopover> = {
     },
     trigger: {
       control: { type: "select" },
-      options: ["click", "hover"],
+      options: ["click", "hover", "manual"],
       description:
         "Specifies the trigger for displaying the popper. Default is 'click'.",
       defaultValue: "click",
@@ -57,7 +59,7 @@ export const Default: Story = {
     placement: "bottom",
   },
   render: (args) => ({
-    components: { EUIPopover },
+    components: { EUIPopover, EUIButton },
     setup() {
       return { args };
     },
@@ -140,6 +142,7 @@ export const PopoverHover: Story = {
       <EUIPopover
         trigger="hover"
         placement="bottom-start"
+        :hover-hide-delay="150"
         className="max-w-64 min-w-64"
         title="Popper hover to Shows"
         customButton="border border-gray-600 px-4 py-2 rounded-lg"
@@ -162,7 +165,7 @@ export const PopoverHover: Story = {
   },
 };
 
-export const PopoverEmitAccess: Story = {
+export const PopoverManualAccess: Story = {
   args: {
     title: "Popover click to Show",
     className: "max-w-64 min-w-64",
@@ -171,28 +174,29 @@ export const PopoverEmitAccess: Story = {
     placement: "bottom-start",
   },
   render: (args) => ({
-    components: { EUIPopover, InformationCircleIcon },
+    components: { EUIPopover, InformationCircleIcon, EUIButton },
     setup() {
       const popoverVisible = ref(false);
 
-      const onPopoverShow = () => {
-        popoverVisible.value = true;
+      const onPopoverToggle = () => {
+        popoverVisible.value = !popoverVisible.value;
       };
 
       const onPopoverHide = () => {
         popoverVisible.value = false;
       };
 
-      return { args, onPopoverShow, onPopoverHide };
+      return { args, popoverVisible, onPopoverToggle, onPopoverHide };
     },
     template: `<div class="min-h-72">
-                <EUIPopover v-bind="args" trigger="click"  @showPopover="onPopoverShow"
-         @hidePopover="onPopoverHide">
+                <EUIPopover v-bind="args" trigger="manual" v-model:visible="popoverVisible" placement="top" title="Popper Manual Access" @click="onPopoverToggle">
                   <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!
+
+                    <EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
                   </div>
                 </EUIPopover>
               </div>`,
@@ -205,28 +209,29 @@ export const PopoverEmitAccess: Story = {
       },
       source: {
         code: `<script lang="ts" setup>
-const popoverVisible = ref(false);
+              const popoverVisible = ref(false);
 
-const onPopoverShow = () => {
-  popoverVisible.value = true;
-};
+              const onPopoverToggle = () => {
+                popoverVisible.value = !popoverVisible.value;
+              };
 
-const onPopoverHide = () => {
-  popoverVisible.value = false;
-};
-</script>
+              const onPopoverHide = () => {
+                popoverVisible.value = false;
+              };
+            </script>
 <template>
 <div>
   Popover is {{ popoverVisible ? "visible" : "hidden" }}
 </div>
   <EUIPopover
-    @showPopover="onPopoverShow"
-    @hidePopover="onPopoverHide"
-    trigger="hover"
+    trigger="manual"
+    v-model:visible="popoverVisible"
+    placement="top"
     placement="bottom-start"
     className="max-w-64 min-w-64"
-    title="Popover hover to Shows"
+    title="Popover Manual access"
     customButton="border border-gray-600 px-4 py-2 rounded-lg"
+    @click="onPopoverToggle"
   >
     <template #referenceButton>
       <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
@@ -238,6 +243,7 @@ const onPopoverHide = () => {
       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!
+      <EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
     </div>
   </EUIPopover>
 </template>`,
@@ -245,3 +251,56 @@ const onPopoverHide = () => {
     },
   },
 };
+
+export const PopoverDefaultOpen: 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, ChevronBigDown },
+    setup() {
+      const isInitiallyOpen = ref(true);
+
+      return { args, isInitiallyOpen };
+    },
+    template: `<div class="min-h-72">
+                <EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
+          :hover-hide-delay="150">
+                  <template #referenceButton #referenceButton="{ open }">
+                   Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
+                  </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: `<script lang="ts" setup>
+              const isInitiallyOpen = ref(true);
+              </script>
+              <template>
+      <EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
+          :hover-hide-delay="150">
+                  <template #referenceButton #referenceButton="{ open }">
+                   Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
+                  </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>
+    </template>`,
+      },
+    },
+  },
+};