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

package/src/components/table/ResizeTableview.vue

@@ -1,198 +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> -->
-    <ColumnResizeTable
-      :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>
-    </ColumnResizeTable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { studentData, studentHeader } from "../../data/table";
-import { capitalizeText } from "../../utils/lodash";
-import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
-import ColumnResizeTable from "./ColumnResizeTable.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;
-  }, 1000);
-};
-
-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/table/UCheckbox.vue

@@ -1,169 +0,0 @@
-<template>
-  <label :class="classes">
-    <input
-      v-model="selected"
-      type="checkbox"
-      :value="value"
-      v-bind="attrs"
-      class="ui-checkbox__input"
-    />
-    <span v-if="$slots.default || label" class="ui-checkbox__label">
-      <span v-if="label">
-        {{ label }}
-      </span>
-      <span v-if="$slots.default">
-        <slot />
-      </span>
-    </span>
-  </label>
-</template>
-
-<script lang="ts">
-import { computed, ref, watch } from "vue";
-
-export default {
-  name: "UICheckbox",
-  inheritAttrs: false,
-
-  props: {
-    indeterminate: Boolean,
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      default: null,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-  },
-
-  setup(props, { emit, attrs }) {
-    const isIndeterminate = ref(props.indeterminate);
-    const selected = computed({
-      get: () => props.checked,
-      set: (val) => emit("update:checked", val),
-    });
-
-    const isActive = computed(() => {
-      const modelIsArray = Array.isArray(props.checked) && props.checked.length !== 0;
-      const sameValue = (element:any) => element === props.value;
-
-      if (modelIsArray) {
-        return props.checked.some(sameValue);
-      }
-
-      return props.checked === true;
-    });
-
-    const classes = computed(() => ({
-      "ui-checkbox": true,
-      "ui-checkbox--indeterminate": isIndeterminate.value,
-    }));
-
-    const computedTabIndex = computed(() => (attrs.disabled ? -1 : 0));
-
-    const computedAttrs = computed(() => ({
-      ...attrs,
-      tabindex: computedTabIndex.value,
-      role: "checkbox",
-      // "aria-checked": isIndeterminate.value ? "mixed" : isActive.value.toString(),
-      // "aria-disabled": attrs.disabled || undefined,
-    }));
-    watch(
-      () => props.indeterminate,
-      (val) => {
-        isIndeterminate.value = val;
-      }
-    );
-
-    watch(isActive, () => {
-      if (props.indeterminate) {
-        isIndeterminate.value = false;
-      }
-    });
-
-    return {
-      isIndeterminate,
-      selected,
-      isActive,
-      classes,
-      attrs: computedAttrs,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.ui-checkbox {
-  @apply inline-flex items-center cursor-pointer;
-  &__input {
-    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
-    &::after {
-      @apply absolute hidden border-solid inset-x-0 top-0 m-auto w-1.5 h-2.5 bottom-0.5 scale-100;
-      content: "";
-      border-width: 0 2px 2px 0;
-      -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-      transform: translate3d(0, 1, 0);
-      transition: all 0.2s ease;
-    }
-    &:hover {
-      @apply bg-purple-100 border-purple-500;
-    }
-    &:checked {
-      transition: all 0.3s ease;
-      transform: translate3d(0, 1, 0);
-      @apply bg-purple-700 border-purple-700;
-      &::after {
-        @apply block border-white;
-      }
-      &:focus {
-        @apply bg-purple-700;
-      }
-    }
-    &:focus {
-      @apply outline-none border-2 border-purple-700 bg-purple-200;
-    }
-    &:disabled {
-      @apply bg-gray-300 border-gray-100 cursor-not-allowed;
-      & ~ span {
-        @apply cursor-not-allowed;
-      }
-      &:checked {
-        @apply bg-white border-white;
-        &::after {
-          @apply block border-gray-100;
-        }
-      }
-    }
-  }
-  &__label {
-    @apply ml-2 text-gray-900;
-  }
-  &--invalid & {
-    &__input {
-      @apply border-red-400;
-      &:checked {
-        @apply border-red-400;
-        &::after {
-          @apply block border-red-400;
-        }
-      }
-    }
-  }
-  &--indeterminate & {
-    &__input {
-      @apply border-purple-700;
-      &::after {
-        @apply block bg-purple-700 border-0 bottom-0 transform-none;
-        width: 10px;
-        height: 2px;
-      }
-    }
-  }
-}
-</style>