edvoyui-component-library-test-flight 0.0.251 → 0.0.252

package/dist/components/accordion/EUIAccordionMenu.d.ts

@@ -0,0 +1,70 @@
+import { PropType } from '../../../node_modules/vue';
+type AccordionMenuItem = {
+    id: string;
+    label: string;
+};
+type AccordionMenuSection = {
+    id: string;
+    label: string;
+    items: AccordionMenuItem[];
+};
+declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
+    items: {
+        type: PropType<AccordionMenuSection[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultOpen: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controlled expanded category; takes precedence over defaultOpen when set. */
+    openSection: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Keep the expanded category title visible while a long menu scrolls. */
+    stickySectionHeaders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
+    "update:modelValue": (id: string) => any;
+    "update:open": (id: string | null) => any;
+}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
+    items: {
+        type: PropType<AccordionMenuSection[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultOpen: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controlled expanded category; takes precedence over defaultOpen when set. */
+    openSection: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Keep the expanded category title visible while a long menu scrolls. */
+    stickySectionHeaders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((id: string) => any) | undefined;
+    "onUpdate:open"?: ((id: string | null) => any) | undefined;
+}>, {
+    items: AccordionMenuSection[];
+    modelValue: string;
+    defaultOpen: string;
+    openSection: string;
+    stickySectionHeaders: boolean;
+}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/components/accordion/EUIAccordionMenu.vue

@@ -0,0 +1,160 @@
+<template>
+  <nav class="w-full space-y-1" aria-label="Filter categories">
+    <section v-for="section in items" :key="section.id">
+      <button
+        type="button"
+        class="flex items-center w-full gap-2 py-1 pl-4 pr-2 text-sm text-left transition-[background-color,color] duration-300 ease-out rounded min-h-8"
+        :class="
+          [
+            expandedSection === section.id
+              ? 'bg-gray-100 text-slate-900 font-semibold'
+              : 'bg-white text-gray-600 hover:bg-slate-50 font-medium',
+            stickySectionHeaders && expandedSection === section.id
+              ? 'sticky top-0 z-50 isolate !bg-gray-100'
+              : '',
+          ]
+        "
+        :aria-expanded="expandedSection === section.id"
+        @click="toggleSection(section.id)"
+      >
+        <span class="flex-1 min-w-0 truncate">{{ section.label }}</span>
+        <svg
+          class="size-5 shrink-0 transition-transform duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
+          :class="expandedSection === section.id ? 'rotate-90' : ''"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+        >
+          <path
+            d="M10 8.13867C11.4619 9.20073 12.7713 10.4457 13.8942 11.8408C14.0353 12.016 14.0353 12.2613 13.8942 12.4365C12.7713 13.8316 11.4619 15.0766 10 16.1387"
+            stroke="currentColor"
+            stroke-opacity="0.8"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </button>
+
+      <div
+        class="grid transition-[grid-template-rows,opacity] duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)] motion-reduce:transition-none"
+        :class="
+          expandedSection === section.id
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        "
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div class="relative flex flex-col gap-1 pb-2 my-1 ml-4">
+            <span
+              aria-hidden="true"
+              class="absolute top-0 left-0 z-0 w-px bg-slate-200"
+              :style="treeRailStyle(section.items.length)"
+            />
+            <span
+              aria-hidden="true"
+              class="absolute top-0 left-4 right-0 z-[1] h-8 rounded-md bg-violet-50 ring-1 ring-inset ring-violet-100 transition-[transform,opacity] duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
+              :class="
+                activeItem &&
+                section.items.some((item) => item.id === activeItem)
+                  ? 'opacity-100'
+                  : 'opacity-0'
+              "
+              :style="indicatorStyle(section)"
+            />
+            <button
+              v-for="item in section.items"
+              :key="item.id"
+              type="button"
+              class="relative z-[2] flex items-center w-[calc(100%-1rem)] h-8 py-0 pl-4 pr-3 ml-4 text-xs text-left transition-colors duration-200 rounded-xl before:absolute before:-left-4 before:top-0 before:h-4 before:w-4 before:rounded-bl-lg before:border-b before:border-l before:border-slate-200 before:content-[''] tracking-[-0.015em]"
+              :class="
+                activeItem === item.id
+                  ? 'text-violet-900 font-semibold'
+                  : 'text-gray-600 hover:text-gray-800 font-medium'
+              "
+              :aria-current="activeItem === item.id ? 'page' : undefined"
+              @click="selectItem(section.id, item.id)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, type CSSProperties, type PropType } from "vue";
+
+type AccordionMenuItem = { id: string; label: string };
+type AccordionMenuSection = {
+  id: string;
+  label: string;
+  items: AccordionMenuItem[];
+};
+
+const props = defineProps({
+  items: { type: Array as PropType<AccordionMenuSection[]>, default: () => [] },
+  modelValue: { type: String, default: "" },
+  defaultOpen: { type: String, default: "" },
+  /** Controlled expanded category; takes precedence over defaultOpen when set. */
+  openSection: { type: String, default: "" },
+  /** Keep the expanded category title visible while a long menu scrolls. */
+  stickySectionHeaders: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [id: string];
+  "update:open": [id: string | null];
+}>();
+const expandedSection = ref<string | null>(
+  props.openSection || props.defaultOpen || props.items[0]?.id || null,
+);
+const activeItem = computed(() => props.modelValue);
+
+watch(
+  () => props.items,
+  (items) => {
+    if (!items.some((item) => item.id === expandedSection.value))
+      expandedSection.value = items[0]?.id || null;
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.openSection,
+  (sectionId) => {
+    expandedSection.value = sectionId || null;
+  },
+);
+
+const toggleSection = (id: string) => {
+  expandedSection.value = expandedSection.value === id ? null : id;
+  emit("update:open", expandedSection.value);
+};
+
+const selectItem = (sectionId: string, itemId: string) => {
+  expandedSection.value = sectionId;
+  emit("update:open", sectionId);
+  emit("update:modelValue", itemId);
+};
+
+const SUBMENU_ROW_STEP_REM = 2.25;
+
+const indicatorStyle = (
+  section: AccordionMenuSection,
+): CSSProperties => {
+  const index = section.items.findIndex((item) => item.id === activeItem.value);
+  return {
+    transform: `translateY(${Math.max(0, index) * SUBMENU_ROW_STEP_REM}rem)`,
+  };
+};
+
+/** The rail ends at the start of the final item's curved CSS connector. */
+const treeRailStyle = (itemCount: number): CSSProperties => ({
+  height: `${Math.max(0, (itemCount - 1) * SUBMENU_ROW_STEP_REM + 0.75)}rem`,
+});
+</script>

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as EUIStepperTimeline } from './stepperTimeline/EUIStepperTimel
 export { default as EUIStepperVertical } from './stepperTimeline/EUIStepperVertical';
 export { default as EUIStepperHorizontal } from './stepperTimeline/EUIStepperHorizontal';
 export { default as EUIAccordion } from './accordion/EUIAccordion';
+export { default as EUIAccordionMenu } from './accordion/EUIAccordionMenu';
 export { default as EUIPopover } from './popover/EUIPopover';
 export { default as EUIModal } from './modal/EUIModal';
 export { default as EUISlideover } from './slideover/EUISlideover';

package/dist/components/tag/EUITag.vue

@@ -10,17 +10,12 @@
     <button
       v-if="closeIcon"
       type="button"
-      class="relative flex-shrink-0 -mr-1 rounded group hover:bg-red-300/50 active:bg-red-300"
-      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-3.5']"
+      class="relative inline-flex items-center justify-center flex-shrink-0 -mr-1 rounded group hover:bg-red-100 active:bg-red-200"
+      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-4']"
       @click.stop="removeTag"
     >
       <span class="sr-only">Remove</span>
-      <svg
-        viewBox="0 0 14 14"
-        class="stroke-gray-400 group-hover:stroke-red-600/75 text-violet-600"
-      >
-        <path d="M4 4l6 6m0-6l-6 6" />
-      </svg>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-gray-400 group-hover:text-red-600/75" :class="[props.size === 'lg' ? 'size-5' : props.size === 'md'? 'size-4' : 'size-3']"><path d="M6 18L12 12M12 12L18 6M12 12L6 6M12 12L18 18" stroke="currentColor" stroke-opacity="0.9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
     </button>
   </div>
 </template>
@@ -69,7 +64,7 @@ const tagClass = computed(() => {
       : "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
   secondary: btnDisabled
       ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-violet-50"
-      : "bg-violet-100 hover:bg-violet-50 active:bg-violet-100 cursor-pointer text-violet-500 active:shadow-violet-200",
+      : "bg-violet-100 hover:bg-violet-50 active:bg-violet-100 cursor-pointer text-violet-600 active:shadow-violet-200",
    tertiary: btnDisabled
       ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-400/20"
       : "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",