@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/table/Table.vue

@@ -1,16 +1,159 @@
+<script setup lang="ts">
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onUpdated,
+  ref,
+  watch,
+} from "vue";
+import type { AcTableCol } from "../../types/table";
+
+interface Props {
+  isLoaderActive?: boolean;
+  isTableEmpty?: boolean;
+  tableHeaders?: Array<AcTableCol>;
+  collapsible?: boolean;
+  actionable?: boolean;
+  isDynamicWidthTable?: boolean;
+  fullWidth?: number;
+  columnStriped?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoaderActive: false,
+  isTableEmpty: true,
+  tableHeaders: () => [],
+  collapsible: false,
+  actionable: false,
+  isDynamicWidthTable: false,
+  fullWidth: 1920,
+  columnStriped: false,
+});
+
+const emit = defineEmits(["sort", "scroller"]);
+
+const TableContainer = defineAsyncComponent(
+  () => import("../table/TableContainer.vue")
+);
+const TableRow = defineAsyncComponent(() => import("../table/TableRow.vue"));
+const TableCell = defineAsyncComponent(() => import("../table/TableCell.vue"));
+const CellValue = defineAsyncComponent(
+  () => import("../table/table-cell/CellValue.vue")
+);
+const EmptyTableInfo = defineAsyncComponent(
+  () => import("../table/EmptyTableInfo.vue")
+);
+const FakeTableCell = defineAsyncComponent(
+  () => import("../table/FakeTableCell.vue")
+);
+
+const fakeCellWidth = ref(0);
+const headerSortables = ref<Array<{ enabled: boolean; mode: string }>>([]);
+const ac_table = ref(null as HTMLElement | null);
+const ac_table_container = ref(null as HTMLElement | null);
+
+const headerLabels = computed(() => {
+  return props.tableHeaders.map((th) =>
+    typeof th === "string" ? th : th?.name || "Label"
+  );
+});
+
+const isFullTableLoaderActive = computed(() => {
+  return !props.tableHeaders.length;
+});
+
+const loaderCols = computed(() => {
+  if (isFullTableLoaderActive.value) {
+    return 5;
+  } else if (props.isLoaderActive) {
+    return Math.max(props.tableHeaders.length + 1, 5);
+  } else {
+    return props.tableHeaders.length || 5;
+  }
+});
+
+const handleScroller = (value: number) => {
+  emit("scroller", value);
+};
+
+const onWindowResize = () => {
+  if (ac_table.value && props.isDynamicWidthTable) {
+    const tableWidth = ac_table.value.clientWidth;
+    const d = props.fullWidth - tableWidth;
+    fakeCellWidth.value = d;
+  }
+};
+
+const emitSortEvent = (index: number) => {
+  const emitValue = {
+    index,
+    label: props.tableHeaders[index].name,
+    mode: "",
+  };
+
+  headerSortables.value.forEach((hs, idx) => {
+    if (idx !== index) hs.mode = "";
+    else {
+      if (hs.mode === "asc") hs.mode = "desc";
+      else hs.mode = "asc";
+
+      emitValue.mode = hs.mode;
+    }
+  });
+
+  emit("sort", emitValue);
+};
+
+watch(
+  () => props.tableHeaders,
+  (n) => {
+    if (headerSortables.value.length === n.length) {
+      n.forEach((th, idx) => {
+        if (headerSortables.value[idx].enabled !== !!th?.sort?.enable) {
+          headerSortables.value[idx].enabled = !!th?.sort?.enable;
+          headerSortables.value[idx].mode = "";
+        }
+      });
+    } else {
+      headerSortables.value = n.map((th) => {
+        if (typeof th === "string") {
+          return {
+            enabled: false,
+            mode: "",
+          };
+        } else {
+          return {
+            enabled: !!th?.sort?.enable,
+            mode: "",
+          };
+        }
+      });
+    }
+  },
+  { immediate: true }
+);
+
+onUpdated(() => {
+  nextTick(() => {
+    onWindowResize();
+  });
+});
+</script>
+
 <template>
-  <table-container ref="ac-table-container" @scroller="handleScroller">
+  <table-container ref="ac_table_container" @scroller="handleScroller">
     <table
-      ref="ac-table"
-      class="table ac-table"
+      ref="ac_table"
+      class="table ac-table is-bordered"
       :class="{
         'is-fullwidth':
           !isDynamicWidthTable ||
           isFullTableLoaderActive ||
           isTableEmpty ||
           isLoaderActive,
-        'ac-striped': !columnStriped,
-        'ac-label-texted': columnStriped,
+        // 'ac-striped': !columnStriped,
+        // 'is-bordered': columnStriped,
       }"
     >
       <thead>
@@ -56,11 +199,7 @@
               <i class="fa fa-exclamation-triangle" />
             </span>
           </th>
-          <th
-            ref="action-section"
-            v-if="actionable"
-            style="min-width: 100px"
-          ></th>
+          <th ref="action-section" v-if="actionable"></th>
           <fake-table-cell
             v-if="fakeCellWidth > 0"
             :is-header-cell="true"
@@ -97,7 +236,9 @@
           <table-row class="is-hoverless">
             <table-cell
               :colspan="
-                actionable ? tableHeaders.length + 1 : tableHeaders.length
+                tableHeaders.length +
+                (actionable ? 1 : 0) +
+                (collapsible ? 1 : 0)
               "
               class="no-data-available has-text-centered"
             >
@@ -118,160 +259,458 @@
   </table-container>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    isTableEmpty: {
-      type: Boolean,
-      default: true,
-    },
-    tableHeaders: {
-      type: Array,
-      default: () => [],
-    },
-    collapsible: {
-      type: Boolean,
-      default: false,
-    },
-    actionable: {
-      type: Boolean,
-      default: false,
-    },
-    isDynamicWidthTable: {
-      type: Boolean,
-      default: false,
-    },
-    fullWidth: {
-      type: Number,
-      default: 1920,
-    },
-    columnStriped: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["sort", "scroller"],
-  components: {
-    TableContainer: defineAsyncComponent(() =>
-      import("./TableContainer.vue").then((module) => module.default)
-    ),
-    TableRow: defineAsyncComponent(() =>
-      import("./TableRow.vue").then((module) => module.default)
-    ),
-    TableCell: defineAsyncComponent(() =>
-      import("./TableCell.vue").then((module) => module.default)
-    ),
-    CellValue: defineAsyncComponent(() =>
-      import("./table-cell/CellValue.vue").then((module) => module.default)
-    ),
-    EmptyTableInfo: defineAsyncComponent(() =>
-      import("../../v2/table/EmptyTableInfo.vue").then(
-        (module) => module.default
-      )
-    ),
-    FakeTableCell: defineAsyncComponent(() =>
-      import("./FakeTableCell.vue").then((module) => module.default)
-    ),
-  },
+<style lang="scss">
+// INFO TABLE END
 
-  data() {
-    return {
-      fakeCellWidth: 0,
-      headerSortables: [],
-    };
-  },
+// GENERAL TABLE START
+.table.ac-table {
+  background-color: transparent;
+  margin-bottom: 0;
+
+  thead {
+    background-color: $primary-95;
+    font-size: 13px;
+    line-height: initial;
 
-  computed: {
-    loaderCols() {
-      if (this.isFullTableLoaderActive) {
-        return 5;
-      } else if (this.isLoaderActive) {
-        return Math.max(this.tableHeaders.length + 1, 5);
-      } else {
-        return this.tableHeaders.length || 5;
+    tr {
+      border-bottom: 1px solid $primary-95;
+
+      th {
+        padding: 10px 20px;
+        color: $primary-5;
+        border: none;
+        font-weight: 500;
+        // background-color: $primary-97;
+        // text-transform: uppercase;
+        font-weight: 500;
+
+        &.sorting {
+          cursor: pointer;
+          position: relative;
+
+          &.sorting-asc {
+            &::before {
+              color: $primary-5;
+            }
+          }
+
+          &.sorting-desc {
+            &::after {
+              color: $primary-5;
+            }
+          }
+
+          &:after,
+          &::before {
+            position: absolute;
+            color: #808998;
+            top: 0.4em;
+            font-size: 13px;
+            font-weight: 1000;
+            display: block;
+          }
+
+          &:before {
+            right: 1em;
+            content: "\2191";
+          }
+
+          &:after {
+            right: 0.5em;
+            content: "\2193";
+          }
+        }
+      }
+    }
+  }
+
+  tbody {
+    &.is-selected {
+      transform: matrix(1, 0, 0, 1, 0, 0) !important;
+      box-shadow: inset 0 0 0 1px $primary;
+      border-radius: 4px;
+      border-bottom: none;
+      color: $black-5;
+    }
+
+    tr {
+      border-bottom: 1px solid $primary-90;
+      &.is-link {
+        cursor: pointer;
+      }
+      &.is-selected {
+        background-color: $primary-97 !important;
+        transform: matrix(1, 0, 0, 1, 0, 0) !important;
+        box-shadow: inset 0 0 0 1.2px $primary;
+        border-radius: 4px;
+        border-bottom: none;
+        color: $black-5;
+        transition: 0.3s ease-in-out;
+        .tag {
+          background-color: $primary-80;
+        }
+        &:hover {
+          background-color: $primary-95 !important;
+          transform: matrix(1, 0, 0, 1, 0, 0) !important;
+          box-shadow: inset 0 0 0 1.2px $primary !important;
+        }
       }
-    },
-    isFullTableLoaderActive() {
-      return !this.tableHeaders.length;
-    },
-    headerLabels() {
-      return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th?.name || "Label"
-      );
-    },
-  },
 
-  watch: {
-    tableHeaders: {
-      immediate: true,
-      handler(n) {
-        if (this.headerSortables.length === n.length) {
-          n.forEach((th, idx) => {
-            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
-              this.headerSortables[idx].enabled = !!th?.sort?.enable;
-              this.headerSortables[idx].mode = "";
+      &.is-hoverless {
+        box-shadow: none !important;
+        transform: none !important;
+        background-color: $white-100 !important;
+      }
+      td {
+        font-size: 13px;
+        padding: 5px 20px;
+        color: $primary-10;
+        border: none;
+
+        a:not(.tag a) {
+          color: $primary;
+          font-weight: 500 !important;
+          transition: 0.3s ease-in-out;
+          font-weight: 400;
+        }
+
+        .tags {
+          .tag {
+            a {
+              color: $primary;
+              transition: 0.3s ease-in-out;
+              font-weight: 500;
+
+              &:hover {
+                color: $primary-5;
+              }
             }
-          });
-        } else {
-          this.headerSortables = n.map((th) => {
-            if (typeof th === "string") {
-              return {
-                enabled: false,
-                mode: "",
-              };
-            } else {
-              return {
-                enabled: !!th?.sort?.enable,
-                mode: "",
-              };
+          }
+        }
+
+        &.is-danger {
+          color: $danger;
+        }
+
+        .image-with-status {
+          margin-right: 20px;
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+
+          &.is-danger {
+            background-color: $danger;
+          }
+
+          i.fa {
+            position: absolute;
+            background-color: $primary;
+            color: $white-100;
+            font-size: 11px;
+            width: 15px;
+            height: 15px;
+            text-align: center;
+            line-height: 15px;
+            border-radius: 50%;
+            right: -5px;
+            top: 5px;
+
+            &.fa-close {
+              background-color: $danger;
             }
-          });
+          }
+
+          img {
+            width: 20px;
+            height: 20px;
+            object-fit: cover;
+            border-radius: 50%;
+          }
         }
-      },
-    },
-  },
-  updated() {
-    this.$nextTick(() => {
-      this.onWindowResize();
-    });
-  },
 
-  methods: {
-    handleScroller(value) {
-      this.$emit("scroller", value);
-    },
-    onWindowResize() {
-      if (this.$refs["ac-table"] && this.isDynamicWidthTable) {
-        const tableWidth = this.$refs["ac-table"]?.clientWidth;
-        const d = this.fullWidth - tableWidth;
-        this.fakeCellWidth = d;
+        .collapsible-row {
+          max-height: 0;
+          overflow-y: hidden;
+
+          &.is-active {
+            max-height: 60vh;
+            overflow-y: overlay;
+            animation: expand 0.5s ease-in-out;
+          }
+
+          &.is-closed {
+            max-height: 0;
+            overflow-y: hidden;
+            animation: collapse 0.5s ease-in-out;
+          }
+        }
+
+        white-space: nowrap;
       }
-    },
-    emitSortEvent(index) {
-      const emitValue = {
-        index,
-        label: this.tableHeaders[index].name,
-        mode: "",
-      };
-
-      this.headerSortables.forEach((hs, idx) => {
-        if (idx !== index) hs.mode = "";
-        else {
-          if (hs.mode === "asc") hs.mode = "desc";
-          else hs.mode = "asc";
-
-          emitValue.mode = hs.mode;
+
+      .options-items {
+        a:hover {
+          color: $white-100;
+          text-decoration: none;
         }
-      });
+      }
 
-      this.$emit("sort", emitValue);
-    },
-  },
-});
-</script>
+      transition: 0.3s ease-in-out;
+    }
+  }
+
+  .increase-width {
+    position: relative;
+    visibility: hidden;
+    width: 36px;
+
+    .increase-innner {
+      border-bottom: 1px solid $primary-90;
+      border-top: 1px solid $primary-90;
+      bottom: -1px;
+      left: 0;
+      position: absolute;
+      right: -451px;
+      top: -1px;
+      visibility: visible;
+      background-color: $primary-90;
+    }
+  }
+
+  td {
+    &.increase-width {
+      .increase-innner {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.is-bordered {
+    thead {
+      tr {
+        th {
+          border-top: 1px solid $primary-95;
+          border-bottom: 1px solid $primary-95;
+          border-right: 1px solid $primary-95;
+          background-color: $primary-97;
+
+          &:first-child {
+            border-left: 1px solid transparent;
+          }
+          &:last-child {
+            border-right: 1px solid transparent;
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &:hover {
+          box-shadow: none;
+        }
+
+        td {
+          font-size: 13px;
+          color: $primary-20;
+          background-color: transparent;
+          border-bottom: 1px solid $primary-95;
+          border-right: 1px solid $primary-95;
+          &:last-child {
+            border-right: 1px solid transparent;
+          }
+          &:first-child {
+            border-left: 1px solid transparent;
+          }
+
+          &:first-child {
+            color: $primary-5;
+            border-radius: 0;
+          }
+
+          &:last-child {
+            border-radius: 0;
+          }
+
+          .ac-single-checkbox {
+            .is-checkradio[type="checkbox"] {
+              &.ac-checkbox + label {
+                color: $primary-20;
+
+                &::before {
+                  height: 16px;
+                  width: 16px;
+                  background-color: $primary-95;
+                }
+
+                &::after {
+                  top: 6px;
+                  left: 6px;
+                  border-color: $black-80;
+                  width: 0.3rem;
+                  height: 0.5rem;
+                }
+              }
+
+              &:checked + label::before {
+                background-color: $primary;
+                border-color: $primary;
+              }
+
+              &:checked + label::after {
+                border-color: $primary-90;
+              }
+            }
+          }
+
+          .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
+            background-color: $primary;
+            border-color: $primary;
+          }
+
+          .is-checkradio[type="checkbox"] + label::before,
+          .is-checkradio[type="checkbox"] + label:before {
+            top: 3px;
+          }
+        }
+      }
+    }
+  }
+
+  &.ac-separate-tr {
+    border-collapse: separate;
+    border-spacing: 0px 5px;
+
+    tbody {
+      tr {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.is-middle-aligned {
+    thead {
+      tr {
+        th {
+          vertical-align: middle;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  &.is-dark {
+    thead {
+      background-color: $primary-5;
+
+      tr {
+        th {
+          color: $white-100;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          color: $white-100;
+        }
+
+        &:nth-child(odd) {
+          background-color: $primary-20;
+        }
+
+        &:nth-child(even) {
+          background-color: $primary-5;
+        }
+
+        &:hover {
+          background-color: $primary;
+
+          td {
+            color: $white-100;
+          }
+        }
+      }
+    }
+  }
+}
+
+.table.ac-table tbody tr:hover td a:not(.tag a) {
+  text-decoration: underline;
+  color: $primary;
+}
+
+// table inner shadow
+.table-inner-shadow {
+  border-radius: 0px;
+  background: $primary-90;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
+}
+
+@keyframes expand {
+  from {
+    max-height: 0;
+    overflow-y: hidden;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+}
+
+@keyframes collapse {
+  from {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 0;
+    overflow-y: hidden;
+  }
+}
+
+// GENERAL TABLE END
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+</style>