edvoyui-component-library-test-flight 0.0.40 → 0.0.42

package/dist/table/EUIDashboardTable.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=style&index=0&scoped=2b1db7c3&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=style&index=0&scoped=473ceac4&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIDashboardTable.vue.d.ts.map

package/dist/table/EUITable.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUITable.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUITable.vue?vue&type=style&index=0&scoped=125a9a20&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUITable.vue?vue&type=style&index=0&scoped=0d422110&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITable.vue.d.ts.map

package/package.json

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

package/src/components/HelloWorld.vue

@@ -2,16 +2,63 @@
   <h1 class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-2 decoration-green-400 decoration-wavy">
     Edvoy User Interface
   </h1>
+
+  <UTableview />
 </template>
 <script setup lang="ts">
+import UTableview from './table/UTableview.vue';
+
 
 </script>
 <style lang="scss"></style>
 
 <!-- Development code here -->
-<!--  <template>
+<!-- <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
+    <div class="">
+       <pre class="text-[0.5rem] p-2 rounded-lg max-h-72 overflow-y-auto text-red-600 border border-gray-100">
+        {{ `Total Row:${selectedRows.length}` }}
+        {{ selectedRows.map(x => x?._id)}}
+      </pre>
+
+            <div class="py-4">
+      <EUITable
+        :checkable="true"
+        :table-loading="loading"
+        paginated
+        v-model:selectedRows.sync="selectedRows"
+        :checked-rows.sync="checkedRows"
+        backend-pagination
+        :per-page="10"
+        :headers="studentHeader"
+        :items="studentData"
+        :total="studentData.length"
+        :default-sort-direction="defaultSortOrder"
+        default-sort=""
+        :current-page="offset"
+        @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">
+              {{ 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.activeUser`]="{ row, rowIndex }">
+          {{ row?.activeUser?.user?.firstName }}
+          {{ row?.activeUser?.user?.lastName }}
+        </template>
+      </EUITable>
+    </div>
+    </div>
     <Delete />
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
@@ -910,6 +957,7 @@ const form = reactive({
 });
 
 //TODO: Dashboard Table
+const selectedRows = ref([])
 const checkedRows = ref([]);
 const defaultSortOrder = ref("asc");
 const limit = ref(5);

package/src/components/table/EUIDashboardTable.vue

@@ -177,6 +177,7 @@ import SortArrow from "../../assets/svg/SortArrow.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import { capitalizeText } from "../../utils/lodash";
 import EUICircleLoader from "../loader/EUICircleLoader.vue";
+import { indexOf, getValueByPath, defaultFilter } from "../../utils/helpers";
 
 interface Header {
   value: string;
@@ -232,7 +233,6 @@ const {
   headers,
   paginated,
   isRowCheckable,
-  customIsChecked,
 } = toRefs(props);
 
 const currentSort = ref(defaultSort.value);
@@ -295,13 +295,10 @@ const isIndeterminate = computed(() => {
 });
 
 const isAllChecked = computed(() => {
-  const validVisibleData = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
-  );
-  if (validVisibleData.length === 0) return false;
-  return validVisibleData.every(
-    (row) => indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0
-  );
+    return (
+        computedItems.value.length > 0 &&
+        computedItems.value.every(row => newCheckedRows.value.includes(row))
+    );
 });
 
 const isAllUncheckable = computed(() => {
@@ -311,35 +308,6 @@ const isAllUncheckable = computed(() => {
   return validVisibleData.length === 0;
 });
 
-// methods
-const defaultFilter = (value: any, search: any) => {
-  return value.toString().toLowerCase().includes(search);
-};
-
-const indexOf = (
-  array: any[],
-  obj: any,
-  fn: (item: any, obj: any) => boolean
-): number => {
-  if (!array) return -1;
-  if (!fn || typeof fn !== "function") return array?.indexOf(obj);
-  for (let i = 0; i < array.length; i++) {
-    if (fn(array[i], obj)) {
-      return i;
-    }
-  }
-  return -1;
-};
-
-const getValueByPath = (obj: any, path: string) => {
-  return path
-    .split(".")
-    .reduce(
-      (o: { [x: string]: any }, i: string | number) => (o ? o[i] : null),
-      obj
-    );
-};
-
 const emit = defineEmits([
   "update:currentPage",
   "changePage",
@@ -347,6 +315,7 @@ const emit = defineEmits([
   "check",
   "check-all",
   "update:checkedRows",
+  "update:selectedRows",
   "changeLimit",
   "mouseenter",
   "mouseleave",
@@ -374,24 +343,44 @@ const sortBy = (header: any, event: any) => {
   emit("sort", currentSort.value, currentSortDir.value, event);
 };
 
-const checkAll = () => {
-  const allRowsCheckable = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
-  );
-  const allChecked = isAllChecked.value;
-  newCheckedRows.value = allChecked ? [] : allRowsCheckable.slice();
-  emit("check", newCheckedRows.value);
-  emit("check-all", newCheckedRows.value);
-  emit("update:checkedRows", newCheckedRows.value);
-};
+ const isRowChecked = (row:any) => {
+    return indexOf(newCheckedRows.value, row) >= 0;
+  };
 
-const isRowChecked = (row: any) => {
-  return indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0;
+ const removeCheckedRow = (row:any) => {
+      const index = indexOf(newCheckedRows.value, row);
+      if (index >= 0) {
+          newCheckedRows.value.splice(index, 1);
+      }
+  };
+
+const checkAll = () => {
+    if (isAllChecked.value) {
+        // Uncheck all rows
+        newCheckedRows.value = []
+    } else {
+        // Check all rows
+        const rowsToCheck = computedItems.value.filter(
+        row => !newCheckedRows.value.includes(row)
+        );
+        newCheckedRows.value.push(...rowsToCheck);
+    }
+    emit('check', newCheckedRows.value);
+    emit("check-all", newCheckedRows.value);
+    emit("update:checkedRows", newCheckedRows.value);
+    emit("update:selectedRows", newCheckedRows.value);
 };
 
-const checkRow = (row: any, _rowIndex: number, _event:boolean) => {
-  if (!isRowCheckable.value(row)) return;
-    // console.log('@event',row, _rowIndex, _event)
+const checkRow = (row: any, _rowIndex: number, _event:any) => {
+  const isChecked = newCheckedRows.value.includes(row);
+    if (_event && isChecked) {
+      removeCheckedRow(row);
+    } else {
+        newCheckedRows.value.push(row);
+    }
+    emit("check", newCheckedRows.value, row);
+    emit("update:checkedRows", newCheckedRows.value);
+    emit("update:selectedRows", newCheckedRows.value);
 };
 
 // watch

package/src/components/table/EUITable.vue

@@ -25,7 +25,7 @@
                     :indeterminate="isIndeterminate"
                     :disabled="isAllUncheckable"
                     class="flex justify-center mt-0"
-                    @change="checkAll()"
+                    @change="checkAll"
                   />
                 </th>
               </template>
@@ -108,7 +108,7 @@
                     <EUITableCheckbox
                       :disabled="!isRowCheckable(row)"
                       :checked="isRowChecked(row)"
-                      @change="($event:boolean) => checkRow(row, rowIndex, $event)"
+                      @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
                     />
                   </td>
                 </template>
@@ -189,6 +189,7 @@ import EUIPageLimit from "./EUIPageLimit.vue";
 import EUIStudentPagination from "./EUIStudentPagination.vue";
 import { capitalizeText } from "../../utils/lodash";
 import EUICircleLoader from "../loader/EUICircleLoader.vue";
+import { indexOf, getValueByPath, defaultFilter } from "../../utils/helpers";
 
 interface Header {
   value: string;
@@ -241,7 +242,6 @@ const {
   headers,
   paginated,
   isRowCheckable,
-  customIsChecked,
 } = toRefs(props);
 
 const currentSort = ref(defaultSort.value);
@@ -302,13 +302,10 @@ const isIndeterminate = computed(() => {
 });
 
 const isAllChecked = computed(() => {
-  const validVisibleData = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
-  );
-  if (validVisibleData.length === 0) return false;
-  return validVisibleData.every(
-    (row) => indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0
-  );
+    return (
+        computedItems.value.length > 0 &&
+        computedItems.value.every(row => newCheckedRows.value.includes(row))
+    );
 });
 
 const isAllUncheckable = computed(() => {
@@ -319,34 +316,6 @@ const isAllUncheckable = computed(() => {
 });
 
 // methods
-const defaultFilter = (value:any, search:any) => {
-  return value.toString().toLowerCase().includes(search);
-};
-
-const indexOf = (
-  array: any[],
-  obj: any,
-  fn: (item: any, obj: any) => boolean
-): number =>  {
-  if (!array) return -1;
-  if (!fn || typeof fn !== "function") return array?.indexOf(obj);
-  for (let i = 0; i < array.length; i++) {
-    if (fn(array[i], obj)) {
-      return i;
-    }
-  }
-  return -1;
-};
-
-const getValueByPath = (obj: any, path: string) => {
-  return path
-    .split(".")
-    .reduce(
-      (o: { [x: string]: any }, i: string | number) => (o ? o[i] : null),
-      obj
-    );
-};
-
 const emit = defineEmits([
   "update:currentPage",
   "changePage",
@@ -354,6 +323,7 @@ const emit = defineEmits([
   "check",
   "check-all",
   "update:checkedRows",
+  "update:selectedRows",
   "changeLimit",
   "mouseenter",
   "mouseleave"
@@ -381,24 +351,44 @@ const sortBy = (header: any, event: any) => {
   emit("sort", currentSort.value, currentSortDir.value, event);
 };
 
-const checkAll = () => {
-  const allRowsCheckable = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
-  );
-  const allChecked = isAllChecked.value;
-  newCheckedRows.value = allChecked ? [] : allRowsCheckable.slice();
-  emit("check", newCheckedRows.value);
-  emit("check-all", newCheckedRows.value);
-  emit("update:checkedRows", newCheckedRows.value);
-};
+  const isRowChecked = (row:any) => {
+    return indexOf(newCheckedRows.value, row) >= 0;
+  };
 
-const isRowChecked = (row:any) => {
-  return indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0;
+ const removeCheckedRow = (row:any) => {
+      const index = indexOf(newCheckedRows.value, row);
+      if (index >= 0) {
+          newCheckedRows.value.splice(index, 1);
+      }
+  };
+
+  const checkAll = () => {
+    if (isAllChecked.value) {
+        // Uncheck all rows
+        newCheckedRows.value = []
+    } else {
+        // Check all rows
+        const rowsToCheck = computedItems.value.filter(
+        row => !newCheckedRows.value.includes(row)
+        );
+        newCheckedRows.value.push(...rowsToCheck);
+    }
+    emit('check', newCheckedRows.value);
+    emit("check-all", newCheckedRows.value);
+    emit("update:checkedRows", newCheckedRows.value);
+    emit("update:selectedRows", newCheckedRows.value);
 };
 
-const checkRow = (row: any, _rowIndex: number, _event:boolean) => {
-  if (!isRowCheckable.value(row)) return;
-    // console.log(row, _rowIndex, _event)
+const checkRow = (row: any, _rowIndex: number, _event:any) => {
+  const isChecked = newCheckedRows.value.includes(row);
+    if (_event && isChecked) {
+      removeCheckedRow(row);
+    } else {
+        newCheckedRows.value.push(row);
+    }
+    emit("check", newCheckedRows.value, row);
+    emit("update:checkedRows", newCheckedRows.value);
+    emit("update:selectedRows", newCheckedRows.value);
 };
 
 // watch
@@ -417,16 +407,17 @@ watch(
   { immediate: true }
 );
 
+//shadow-[4px_0px_8px_0px_#e5e6e8]
 // table scroll to add class
 const stickyClass = computed(() => {
   return props.checkable && props.stickyColumn
     ? {
         head: "bg-gray-100 sticky left-16 top-0 z-20 shadow-[10px_0px_16px_-5px_#e5e6e8]",
-        body: "bg-white sticky left-16 top-0 z-10 shadow-[-10px_24px_10px_10px_#e5e6e8]",
+        body: "bg-white sticky left-16 top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0 after:bg-white/10",
       }
     : {
         head: "bg-gray-100 sticky left-0 top-0 z-20 shadow-[10px_0px_16px_-5px_#e5e6e8]",
-        body: "bg-white sticky left-0 top-0 z-10 shadow-[-10px_24px_10px_10px_#e5e6e8]",
+        body: "bg-white sticky left-0 top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0 after:bg-white/10",
       };
 });
 

package/src/components/table/EUITableCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <label class="table-checkbox">
-    <input v-model="isChecked" type="checkbox" :value="value" v-bind="mergedAttrs" @change="toggle($event)" />
+    <input v-model="selected" type="checkbox" :value="value" v-bind="mergedAttrs" @change="onChange" />
     <span class="check-icon">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -33,28 +33,52 @@ const props = defineProps({
     default: null
   }
 })
-const emit = defineEmits(['update:checked','change']);
-const attrs = useAttrs();
 
-const isChecked = ref<boolean>(props.checked);
+const emit = defineEmits(['change', 'update:checked'])
+const isIndeterminate = ref(props.indeterminate)
+
+watch(() => props.indeterminate, (val) => {
+  isIndeterminate.value = val
+})
+
+const selected = computed({
+  get() {
+    return props.checked
+  },
+  set(val) {
+    emit('update:checked', val)
+  }
+})
+
+const onChange = (event: Event) => {
+  emit('change', event);
+};
+
+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 attrs = useAttrs()
+const computedTabIndex = computed(() => (attrs.disabled ? -1 : 0))
+
 const mergedAttrs = computed(() => ({
   ...attrs,
-  tabindex: attrs.disabled ? -1 : 0,
+  tabindex: computedTabIndex.value,
   role: 'checkbox',
-}));
-watch(
-  () => props.checked,
-  (newValue) => {
-    isChecked.value = newValue;
-  }
-);
+  // "aria-checked": isIndeterminate.value ? "mixed" : isActive.value.toString(),
+  // "aria-disabled": attrs.disabled || undefined,
+}))
 
-const toggle = ($event: Event) => {
-  if($event) {
-    emit('update:checked', isChecked.value);
-    emit('change', isChecked.value)
+watch(isActive, () => {
+  if (props.indeterminate) {
+    isIndeterminate.value = false
   }
-};
+})
 </script>
 
 <style lang="scss">

package/src/components/table/UCheckbox.vue

@@ -0,0 +1,167 @@
+<template>
+  <label :class="classes">
+    <span class="text-[0.5rem] absolute z-20 top-0 text-gray-400">{{ selected }}</span>
+    <input
+      v-model="selected"
+      data-test="checkbox-toggle"
+      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 mt-3 cursor-pointer;
+  &__input {
+    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-50 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative;
+    &::after {
+      @apply absolute hidden border-solid inset-x-0 top-0 m-auto;
+      content: "";
+      width: 6px;
+      height: 10px;
+      bottom: 2px;
+      border-width: 0 3px 3px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+    &:hover {
+      @apply bg-gray-300;
+    }
+    &:checked {
+      @apply bg-white border-blue-600;
+      &::after {
+        @apply block border-blue-600;
+      }
+    }
+    &:focus {
+      @apply outline-none border-2 border-blue-600 bg-gray-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-50;
+        }
+      }
+    }
+  }
+  &__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-blue-600;
+      &::after {
+        @apply block bg-blue-600 border-0 bottom-0 transform-none;
+        width: 10px;
+        height: 2px;
+      }
+    }
+  }
+}
+</style>