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

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.136",
+  "version": "0.0.137",
   "type": "module",
   "files": [
     "dist/",

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>`,
+      },
+    },
+  },
+};