edvoyui-component-library-test-flight 0.0.105 → 0.0.106

package/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=9b4681af&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=8ce36c62&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json

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

package/src/components/breadcrumb/EUIBreadcrumb.stories.ts

@@ -0,0 +1,75 @@
+// EUIBreadcrumb.stories.ts
+import { Meta, StoryObj } from "@storybook/vue3";
+import EUIBreadcrumb from "./EUIBreadcrumb.vue";
+import {
+  BookOpenIcon,
+  HomeIcon,
+  TableCellsIcon,
+} from "@heroicons/vue/24/outline";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: EUIBreadcrumb,
+  tags: ["autodocs"],
+  argTypes: {
+    pages: {
+      description: `An array of objects representing the breadcrumb pages.
+Each object can include:
+- \`name\` (string): The display name of the breadcrumb item.
+- \`href\` (string, optional): The URL the breadcrumb item points to.
+- \`current\` (boolean, optional): Indicates if the breadcrumb item is the current page.
+- \`showIcon\` (Vue component, optional): An icon component to display alongside the name.`,
+      control: "object",
+    },
+  },
+} satisfies Meta<typeof EUIBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+      },
+      {
+        name: "Data",
+        current: false,
+      },
+    ],
+  },
+};
+
+// Default story with minimum props
+export const IconsUsed: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+        showIcon: HomeIcon,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+        showIcon: BookOpenIcon,
+      },
+      {
+        name: "Data",
+        current: false,
+        showIcon: TableCellsIcon,
+      },
+    ],
+  },
+};

package/src/components/breadcrumb/EUIBreadcrumb.vue

@@ -0,0 +1,59 @@
+<template>
+  <nav aria-label="breadcrumb" class="my-2">
+    <ol
+      role="list"
+      class="flex items-center justify-start max-w-full space-x-1"
+    >
+      <li
+        v-for="(page, index) in pages"
+        :key="page.name"
+        class="flex flex-row items-center justify-start space-x-1"
+      >
+        <a
+          :href="page.href"
+          class="inline-flex items-center gap-2 text-sm font-medium font-inter"
+          :class="
+            pages.length - 1 !== index
+              ? 'text-gray-600 hover:text-gray-700'
+              : 'text-gray-500'
+          "
+          :aria-current="page.current ? 'page' : undefined"
+        >
+          <component
+            v-if="page?.showIcon"
+            :is="page?.showIcon"
+            class="text-current size-4"
+          />
+          {{ page.name }}</a
+        >
+        <ChevronDownStroke
+          v-if="pages.length - 1 !== index"
+          class="flex-shrink-0 w-5 h-5 text-gray-400 transform -rotate-90"
+          aria-hidden="true"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type PropType } from "vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+interface BreadcrumbPage {
+  name: string;
+  href?: string;
+  current?: boolean;
+  showIcon?: {};
+}
+
+const props = defineProps({
+  pages: {
+    type: Array as PropType<BreadcrumbPage[]>,
+    default: [],
+  },
+});
+const { pages } = toRefs(props);
+</script>
+
+<style scoped></style>

package/src/components/index.ts

@@ -48,3 +48,5 @@ export { default as EUITooltip } from "./tooltip/EUITooltip.vue";
 export { default as EUISearch } from "./searchInput/EUISearch.vue";
 export { default as EUISearchExpand } from "./searchexpand/EUISearchExpand.vue";
 export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";
+
+export { default as EUIBreadcrumb } from "./breadcrumb/EUIBreadcrumb.vue";

package/src/components/tabs/EUITabs.vue

@@ -31,7 +31,7 @@
                 : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
             ]"
           >
-            <slot name="title" :tab="tab">
+            <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
               {{ tab?.name }}
             </slot>
           </span>
@@ -51,6 +51,7 @@
         <button
           v-for="(tab, tabindex) in tabs"
           :key="tabindex"
+          type="button"
           role="tab"
           :id="`id-${tab.name}`"
           :class="[
@@ -64,11 +65,38 @@
           ]"
           @click="selectTab(tabindex)"
         >
-          <slot name="title" :tab="tab">
+          <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
             {{ tab?.name }}
           </slot>
         </button>
       </div>
+      <div
+      v-else-if="tabStyle === 'shadow'"
+      class="justify-start relative z-0 inline-flex items-center gap-0 bg-white/50 rounded-t-lg shadow-[0px_1px_2px_0px_rgba(55,65,81,0.10)]"
+    >
+      <button
+        v-for="(tab, tabindex) in tabs"
+        :key="tabindex"
+        type="button"
+        role="tab"
+        :id="`id-${tab.name}`"
+        :class="[
+          'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800 h-12 rounded-t-lg',
+          tabSize === 'sm'
+            ? 'text-sm font-medium border-b-2'
+            : 'text-base font-semibold border-b-[3px]',
+          activeTabIndex === tabindex
+            ? 'border-purple-800 text-purple-800 bg-white z-10 rounded-t-lg shadow-[0px_2px_4px_0px_rgba(55,65,81,0.1)]'
+            : 'border-transparent text-gray-500 z-0',
+        ]"
+        @click="selectTab(tabindex)"
+      >
+        <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
+          {{ tab?.name }}
+        </slot>
+      </button>
+    </div>
+
       <div
         v-else
         class="flex items-center gap-1 p-2 transition-all duration-100"
@@ -76,6 +104,7 @@
         <button
           v-for="(tab, tabindex) in tabs"
           :key="tabindex"
+          type="button"
           role="tab"
           :id="`id-${tab.name}`"
           class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
@@ -86,12 +115,12 @@
           "
           @click="selectTab(tabindex)"
         >
-          <slot name="title" :tab="tab">
+          <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
             {{ tab?.name }}
           </slot>
         </button>
       </div>
-    <div :class="['py-2 text-base font-normal text-gray-700', contentClass]">
+    <div :class="['py-2 text-base font-normal text-gray-700 bg-white relative', contentClass, {'rounded-lg !rounded-tl-none shadow-[0px_-2px_24px_0px_rgba(0,0,0,0.075)] z-20':tabStyle === 'shadow'}]">
       <slot name="content" :active-tab="tabs[activeTabIndex]">
         {{ tabs[activeTabIndex]?.content }}
       </slot>
@@ -110,7 +139,7 @@ interface Tab {
 const props = defineProps<{
   tabs: Tab[];
   defaultActiveIndex?: number;
-  tabStyle: "rounded" | "border" | "design";
+  tabStyle: "rounded" | "border" | "design" | "shadow";
   contentClass?: string[] | string;
   tabSize?: "sm" | "md";
   tabAlign?: "start" | "justify" | "end";