edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/table/UTableview.vue

@@ -1,189 +0,0 @@
-<template>
-  <div>
-    <!-- <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre> -->
-    <UTable
-      :checkable="true"
-      :table-loading="loading"
-      v-model:selectedRows.sync="selectedRows"
-      paginated
-      :checked-rows.sync="checkedRows"
-      backend-pagination
-      :per-page="limit"
-      :headers="studentHeader"
-      :items="studentData"
-      :total="studentData.length"
-      :default-sort-direction="defaultSortOrder"
-      default-sort=""
-      :current-page="offset"
-      table-height="h-[calc(100svh-15rem)] max-h-[calc(100svh-15rem)]"
-      :table-expanded="true"
-      @changePage="onPageChange"
-      @sort="onSort"
-      @mouseenter="select"
-      @mouseleave="(selectedIndex = null), (selected = null)"
-    >
-      <template #[`item.firstName`]="{ row, rowIndex }">
-        <div class="space-y-0.5">
-          <div class="block text-sm font-medium leading-snug">
-            {{
-              rowIndex +
-              capitalizeText(row?.firstName) +
-              " " +
-              capitalizeText(row?.lastName)
-            }}
-          </div>
-          <div class="text-xs font-medium text-gray-900 leading-[normal]">
-            {{ row?.referenceId }}
-          </div>
-        </div>
-      </template>
-      <template #[`item.lifecycleStage`]="{ row, rowIndex }">
-        <div :key="rowIndex">
-          <div>{{ row?.lifecycleStage }}</div>
-          <button
-            type="button"
-            class="inline-flex items-center gap-2 py-0.5 text-xs font-medium text-gray-700 bg-gray-300 outline-none ps-2 pe-0.5 rounded-3xl focus:outline-none"
-            @click="rowToggle(rowIndex)"
-          >
-            Foundation
-            <span
-              class="inline-flex items-center text-xss font-bold gap-1 ps-2 pe-1 py-0.5 bg-gray-100 rounded-3xl min-w-7"
-              >2 <ChevronBigDown class="transition-all duration-300 ease-in-out transform size-3" :class="activeRowIndex === rowIndex ? '-rotate-180': 'rotate-0'" />
-            </span>
-          </button>
-        </div>
-      </template>
-
-      <template #[`item.activeUser`]="{ row, rowIndex }">
-        {{ rowIndex }}
-        {{ row?.activeUser?.user?.firstName }}
-        {{ row?.activeUser?.user?.lastName }}
-      </template>
-
-      <template #expanded="{ row, rowIndex, headerLength }">
-        <tr v-if="rowIndex === activeRowIndex" class="row-expanded" :key="`${row}-${rowIndex}-val`">
-          <td :colspan="headerLength">
-           <div>
-             <table
-              class="px-12 border-separate table-auto max-w-max border-spacing-x-0 border-spacing-y-2"
-            >
-             <tbody>
-              <tr
-                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
-              >
-                <td
-                  v-for="(data, idx) in sqlApplication"
-                  :key="`data-${idx}`"
-                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
-                  :class="
-                    idx === 0
-                      ? 'rounded-l-lg'
-                      : idx === sqlApplication.length - 1
-                      ? 'rounded-r-lg'
-                      : ''
-                  "
-                >
-                  {{ data }}
-                </td>
-              </tr>
-
-              <tr
-                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
-              >
-                <td
-                  v-for="(data, idx) in sqlApplication"
-                  :key="`data-${idx}`"
-                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
-                  :class="
-                    idx === 0
-                      ? 'rounded-l-lg'
-                      : idx === sqlApplication.length - 1
-                      ? 'rounded-r-lg'
-                      : ''
-                  "
-                >
-                  {{ data }}
-                </td>
-              </tr>
-
-              <tr
-                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
-              >
-                <td
-                  v-for="(data, idx) in sqlApplication"
-                  :key="`data-${idx}`"
-                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
-                  :class="
-                    idx === 0
-                      ? 'rounded-l-lg'
-                      : idx === sqlApplication.length - 1
-                      ? 'rounded-r-lg'
-                      : ''
-                  "
-                >
-                  {{ data }}
-                </td>
-              </tr>
-             </tbody>
-
-            </table>
-           </div>
-          </td>
-        </tr>
-      </template>
-    </UTable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import UTable from "./UTable.vue";
-import { studentData, studentHeader } from "../../data/table";
-import { capitalizeText } from "../../utils/lodash";
-import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
-
-//TODO: Dashboard Table
-const selectedRows = ref([]);
-const loading = ref(false);
-const checkedRows = ref([]);
-const defaultSortOrder = ref("asc");
-const limit = ref(5);
-const offset = ref(1);
-const selectedIndex = ref<{ index: string } | null>(null);
-const selected = ref<{ index: string } | null>(null);
-
-const select = (_item: any, index: any) => {
-  selectedIndex.value = index;
-};
-
-const onSort = (field: string, order: string) => {
-  const modifier = order === "desc" ? -1 : 1;
-  studentData.sort((a: any, b: any) => {
-    if (a[field] < b[field]) return -1 * modifier;
-    if (a[field] > b[field]) return 1 * modifier;
-    return 0;
-  });
-};
-
-const onPageChange = (offsetData: number) => {
-  offset.value = offsetData;
-  loading.value = true;
-  console.log("@changePage:", offsetData);
-  setTimeout(() => {
-    loading.value = false;
-  }, 800);
-};
-
-const sqlApplication = ref(["Application 1", "Ready to Apply", "Mar 2025"]);
-
-const activeRowIndex = ref()
-const rowToggle = (index:any) => {
-  if(activeRowIndex.value === index){
-    activeRowIndex.value = null
-  } else {
-    activeRowIndex.value = index
-  }
-}
-</script>
-
-<style scoped></style>

package/src/components/tabs/EUITabOutline.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="bg-white rounded-t-xl" v-bind="$attrs">
-    <div
-      class="relative z-10 inline-flex items-center w-full gap-2 pt-3 overflow-hidden transition-all duration-200 ease-in border border-b-0 border-solid rounded-t-xl isolate before:h-4 before:w-px before:bg-gray-200 before:-bottom-3 before:-left-px before:absolute after:h-4 after:w-px after:bg-gray-200 after:-bottom-3 after:-right-px after:absolute bg-gradient-to-b from-gray-100"
-    >
-      <nav
-        class="relative z-0 inline-flex flex-row items-center w-full gap-2 px-6"
-      >
-        <div
-          id="tab-indicator"
-          :style="{
-            '--border': allColor[activeColor],
-          }"
-        >
-          <span></span>
-        </div>
-        <button
-          v-for="(data, index) in items"
-          :key="`data-${index}`"
-          v-bind="buttonAttrs"
-          :data-tab="data.name"
-          :class="[
-            'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center will-change-contents',
-            getBtnClass(data.name || ''),
-            activeBtnName === data.name ? 'font-semibold' : 'font-normal',
-          ]"
-          :disabled="disabled"
-          :loading="loading"
-          @click="handleOnChange(data || '')"
-          style="transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1)"
-        >
-          <component
-            :is="icon"
-            v-if="iconType === 'icon' || iconType === 'startIcon'"
-            :class="[iconWidth]"
-          />
-          <slot :data="data" :activeName="activeBtnName">
-            {{ data?.name }}
-          </slot>
-          <component
-            :is="icon"
-            v-if="iconType === 'endIcon'"
-            :class="[iconWidth]"
-          />
-          <svg
-            v-if="loading"
-            class="animate-spin"
-            :class="[iconWidth]"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            />
-            <path
-              fill="currentColor"
-              class="opacity-75"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        </button>
-      </nav>
-    </div>
-
-    <div
-      class="relative z-0 px-4 py-4 -mt-px text-gray-500 border border-gray-200 border-solid rounded-b-xl"
-    >
-      <template v-for="(data, index) in items" :key="`data-${index}`">
-        <slot
-          v-if="data.name === activeBtnName"
-          name="content"
-          :data="data"
-          :activeName="activeBtnName"
-        >
-          {{ data.name }}
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  PropType,
-  reactive,
-  ref,
-  toRefs,
-  useAttrs,
-} from "vue";
-
-interface Item {
-  name: string;
-  [key: string]: any;
-}
-
-const props = defineProps({
-  items: {
-    type: Array as () => Item[],
-    default: () => [],
-  },
-  defaultActive: {
-    type: String,
-    default: "",
-  },
-  type: {
-    type: String,
-    default: "button",
-  },
-  size: {
-    type: String as PropType<"sm" | "md" | "lg">,
-    default: "md",
-  },
-  activeColor: {
-    type: String as PropType<"success" | "black" | "purple" | "default">,
-    default: "black",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon" | "icon">,
-    default: "",
-  },
-  icon: {
-    type: [String, Object, Function],
-    default: "",
-  },
-  loading: Boolean,
-  disabled: Boolean,
-});
-
-const emit = defineEmits<{
-  (event: "update:activeTabItem", activeTabItem: Item): void;
-}>();
-
-defineOptions({
-  inheritAttrs: false, // 🛑 prevents auto-inheritance of $attrs to root
-});
-const attrs = useAttrs();
-const buttonAttrs = computed(() => {
-  const { class: _class, style: _style, id: _id, ...rest } = attrs;
-  return rest;
-});
-
-const { items, defaultActive } = toRefs(props);
-const activeBtnName = ref(defaultActive.value || items.value[0]?.name || "");
-
-const marker = (el: HTMLElement) => {
-  const indicator = document.querySelector("#tab-indicator") as HTMLElement;
-  if (indicator && el) {
-    indicator.style.left = el.offsetLeft + "px";
-    indicator.style.width = el.offsetWidth + "px";
-  }
-};
-
-const handleOnChange = (val: any) => {
-  activeBtnName.value = val?.name;
-  emit("update:activeTabItem", val);
-  nextTick(() => {
-    const activeBtn = document.querySelector(
-      `nav button[data-tab="${activeBtnName.value}"]`
-    );
-    if (activeBtn) marker(activeBtn as HTMLElement);
-  });
-};
-
-onMounted(() => {
-  nextTick(() => {
-    requestAnimationFrame(() => {
-      const activeBtn = document.querySelector(
-        `nav button[data-tab="${activeBtnName.value}"]`
-      );
-      if (activeBtn) marker(activeBtn as HTMLElement);
-    });
-  });
-});
-
-const btnColors = {
-  default: {
-    enabled: "text-gray-500 cursor-pointer hover:text-gray-700",
-    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800",
-  },
-  black: {
-    enabled: "text-black cursor-pointer",
-    disabled: "cursor-not-allowed text-gray-300",
-  },
-  success: {
-    enabled: "text-green-600 cursor-pointer",
-    disabled: "cursor-not-allowed text-green-700/60",
-  },
-  purple: {
-    enabled: "text-purple-600 cursor-pointer",
-    disabled: "cursor-not-allowed text-purple-400",
-  },
-};
-
-const iconClasses = {
-  lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
-  md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
-  sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
-};
-
-const iconWidthClasses = reactive({
-  sm: "w-5 h-5 text-current",
-  md: "w-6 h-6 text-current",
-  lg: "w-6 h-6 text-current",
-});
-
-const iconWidth = computed(() => {
-  return iconWidthClasses[props.size] || "";
-});
-
-const getBtnClass = (btnName: string) => {
-  const isActive = btnName === activeBtnName.value;
-  const colorKey = isActive ? props.activeColor : "default";
-  const state = props.disabled ? "disabled" : "enabled";
-  const colorClass = btnColors[colorKey] ? btnColors[colorKey][state] : "";
-  const sizeClass = props.size === "sm" ? "text-sm" : "text-base";
-  const typeClass = iconClasses[props.size] || "";
-  return `${colorClass} ${sizeClass} ${typeClass}`;
-};
-
-const allColor = {
-  purple: "#7c3aed",
-  success: "#16a34a",
-  black: "#000",
-  default: "#9ca3af",
-};
-</script>
-
-<style lang="scss">
-:root {
-  --clr: theme("colors.white");
-}
-
-#tab-indicator {
-  transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
-  background-image: linear-gradient(90deg, #fff, #fff),
-    linear-gradient(to top, #e5e7eb, #e5e7eb, var(--border));
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
-  @apply absolute left-0 w-auto h-full top-0 -z-[1] rounded-t-xl border-solid border-t-2 border bg-white p-2 border-transparent;
-  &::before {
-    content: "";
-    box-shadow: 5px 5px 0 5px var(--clr);
-    @apply absolute -bottom-px -left-3 size-3 bg-transparent border border-gray-200 border-solid border-l-0 border-t-0 rounded-br-2xl;
-  }
-  &::after {
-    content: "";
-    box-shadow: -5px 5px 0 5px var(--clr);
-    @apply absolute -bottom-px -right-3 size-3 bg-transparent border  border-gray-200 border-solid border-r-0 border-t-0 rounded-bl-2xl;
-  }
-  span {
-    @apply bg-white w-full h-1 absolute -bottom-px inset-x-0 z-[1];
-  }
-}
-</style>

package/src/components/tabs/EUITabs.vue

@@ -1,226 +0,0 @@
-<template>
-  <div>
-      <div
-      v-if="tabStyle === 'design'"
-      class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2 overflow-x-auto scrollbar--hide whitespace-nowrap max-w-full"
-    >
-    <template v-for="(tab, tabindex) in tabs" :key="tabindex">
-      <button
-      type="button"
-      :id="`id-${tab.name}`"
-      :disabled="tab?.disabled"
-      :title="tab?.toolTipText"
-      class="[&:not(:focus-visible)]:focus:outline-none relative w-max inline-flex items-center transition-colors duration-100 h-7"
-      :class="[
-          tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
-          'flex-shrink-0'
-        ]"
-        role="tab"
-        tabindex="-1"
-        @click="selectTab(tabindex)"
-      >
-        <div
-          class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
-          :class="{
-            'translate-x-full': tabindex < activeTabIndex,
-            '-translate-x-full': tabindex > activeTabIndex,
-            'translate-x-0 rounded-lg bg-white ring-1 ring-gray-200/75': activeTabIndex === tabindex,
-          }"
-        />
-        <span
-          :class="[
-            'w-full px-2 py-1 text-xs tracking-wide z-10 flex items-center justify-start gap-2',
-            activeTabIndex === tabindex
-              ? ' text-gray-800 font-semibold'
-              : ' text-gray-600 font-medium hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
-          ]"
-        >
-          <slot
-            name="title"
-            :tab="tab"
-            :tabIndex="tabindex"
-            :activeTab="activeTabIndex"
-          >
-            {{ tab?.name }}
-          </slot>
-        </span>
-      </button>
-
-      <div v-if="tabindex !== tabs.length -1" :class="['self-stretch w-px h-4 my-2',
-       tabindex === activeTabIndex - 1 ? 'bg-transparent' : activeTabIndex === tabindex ? 'bg-transparent': 'bg-gray-300']"></div>
-    </template>
-
-    </div>
-    <div
-      v-else-if="tabStyle === 'border'"
-      class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
-      :class="[
-        tabAlign === 'justify'
-          ? 'justify-between'
-          : tabAlign === 'end'
-          ? 'justify-end'
-          : 'justify-start',
-      ]"
-    >
-      <button
-        v-for="(tab, tabindex) in tabs"
-        :disabled="tab?.disabled"
-        :title="tab?.toolTipText"
-        :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',
-          tabSize === 'sm'
-            ? 'text-sm font-semibold border-b-2'
-            : 'text-base font-bold border-b-[3px]',
-          activeTabIndex === tabindex
-            ? 'border-gray-900 text-gray-900'
-            : 'border-transparent text-gray-500',
-          tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
-        ]"
-        @click="selectTab(tabindex)"
-      >
-        <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"
-        :disabled="tab?.disabled"
-        :title="tab?.toolTipText"
-        :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',
-          tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-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">
-      <button
-        v-for="(tab, tabindex) in tabs"
-        :disabled="tab?.disabled"
-        :title="tab?.toolTipText"
-        :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"
-        :class="[
-          activeTabIndex === tabindex
-            ? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
-            : 'border-white hover:bg-gray-50 text-gray-700',
-          tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
-        ]"
-        @click="selectTab(tabindex)"
-      >
-        <slot
-          name="title"
-          :tab="tab"
-          :tabIndex="tabindex"
-          :activeTab="activeTabIndex"
-        >
-          {{ tab?.name }}
-        </slot>
-      </button>
-    </div>
-    <slot name="content" :active-tab="tabs[activeTabIndex]">
-      <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',
-          },
-        ]"
-      >
-          {{ tabs[activeTabIndex]?.content }}
-        </div>
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps, ref, watch } from "vue";
-
-interface Tab {
-  name: string;
-  content?: string;
-  disabled?: boolean;
-  toolTipText?: string;
-}
-
-const props = defineProps<{
-  tabs: Tab[];
-  defaultActiveIndex?: number;
-  tabStyle: "rounded" | "border" | "design" | "shadow";
-  contentClass?: string[] | string;
-  tabSize?: "sm" | "md";
-  tabAlign?: "start" | "justify" | "end";
-  isHighlighedActivetab?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (event: "update:activeTab", activeTab: Tab): void;
-  (event: "update:defaultActiveIndex", defaultActiveIndex: number): void;
-}>();
-
-const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
-
-const selectTab = (index: number) => {
-  activeTabIndex.value = index;
-  emit("update:defaultActiveIndex", activeTabIndex.value );
-  emit("update:activeTab", props.tabs[activeTabIndex.value]);
-};
-
-watch(
-  () => props.defaultActiveIndex,
-  (newIndex) => {
-    activeTabIndex.value = newIndex ?? 0;
-  },{
-    immediate:true
-  }
-);
-</script>
-
-<style scoped>
-/* Add any scoped styles if needed */
-</style>