@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.10

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

@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { defineAsyncComponent, computed } from "vue";
+
+interface Props {
+  isHeaderCell?: boolean;
+  fakeCellWidth?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isHeaderCell: false,
+  fakeCellWidth: 0,
+});
+
+const TableCell = defineAsyncComponent(() => import("./TableCell.vue"));
+
+const dynamicColumnStyle = computed(() => {
+  return {
+    right: `-${props.fakeCellWidth}px`,
+  };
+});
+</script>
+
 <template>
   <th v-if="isHeaderCell" class="increase-width">
     <div class="increase-innner" :style="dynamicColumnStyle" />
@@ -6,34 +28,3 @@
     <div class="increase-innner" :style="dynamicColumnStyle" />
   </table-cell>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    isHeaderCell: {
-      type: Boolean,
-      default: false,
-    },
-    fakeCellWidth: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  components: {
-    TableCell: defineAsyncComponent(() =>
-      import("./TableCell.vue").then((module) => module.default)
-    ),
-  },
-
-  computed: {
-    dynamicColumnStyle() {
-      return {
-        right: `-${this.fakeCellWidth}px`,
-      };
-    },
-  },
-});
-</script>

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

@@ -1,3 +1,43 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref } from "vue";
+
+interface Props {
+  isLoaderActive?: boolean;
+  isTableEmpty?: boolean;
+  tableHeaders?: Array<unknown>;
+  removeContentPadding?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoaderActive: false,
+  isTableEmpty: true,
+  tableHeaders: () => [],
+  removeContentPadding: false,
+});
+
+const TableContainer = defineAsyncComponent(
+  () => import("./TableContainer.vue")
+);
+
+const EmptyTableInfo = defineAsyncComponent(
+  () => import("./EmptyTableInfo.vue")
+);
+
+const TableRow = defineAsyncComponent(() => import("./TableRow.vue"));
+
+const TableCell = defineAsyncComponent(() => import("./TableCell.vue"));
+
+const CellValue = defineAsyncComponent(
+  () => import("./table-cell/CellValue.vue")
+);
+
+const loaderCols = ref(5);
+
+const isFullTableLoaderActive = computed(() => {
+  return !props.tableHeaders.length;
+});
+</script>
+
 <template>
   <table-container>
     <table
@@ -24,11 +64,13 @@
         <template v-if="!isTableEmpty">
           <table-row
             v-for="(tableHeader, idx) in tableHeaders"
-            :key="tableHeader"
+            :key="(tableHeader as string)"
           >
             <table-cell>
-              <slot :name="`table-cell-icon-${idx}`" />
-              {{ tableHeader }}
+              <span class="is-flex is-align-items-center">
+                <slot :name="`table-cell-icon-${idx}`" />
+                {{ tableHeader }}
+              </span>
             </table-cell>
             <table-cell v-if="isLoaderActive">
               <cell-value :is-loader-active="true" />
@@ -45,61 +87,47 @@
   </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: () => [],
-    },
-    removeContentPadding: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    TableContainer: defineAsyncComponent(() =>
-      import("../../v2/table/TableContainer.vue").then(
-        (module) => module.default
-      )
-    ),
-    EmptyTableInfo: defineAsyncComponent(() =>
-      import("../../v2/table/EmptyTableInfo.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)
-    ),
-  },
-
-  data() {
-    return {
-      loaderCols: 5,
-    };
-  },
-
-  computed: {
-    isFullTableLoaderActive() {
-      return !this.tableHeaders.length;
-    },
-  },
-});
-</script>
+<style lang="scss">
+// INFO TABLE START
+.table.ac-info-table {
+  background-color: transparent;
+  border-top: 1px solid $primary-93;
+
+  &.is-fullwidth {
+    tbody {
+      tr {
+        td {
+          &:first-child {
+            width: 1%;
+          }
+        }
+      }
+    }
+  }
+
+  padding: 10px;
+  border-radius: 4px;
+
+  tbody {
+    display: block;
+    padding: 5px 20px;
+
+    tr {
+      td {
+        border: none;
+        font-size: 13px;
+        color: $primary-20;
+        font-weight: 400;
+        padding: 3px 0px;
+        min-width: 230px;
+
+        &:first-child {
+          font-weight: 400;
+          padding-right: 10px;
+          color: $primary-5;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,3 +1,75 @@
+<script setup lang="ts">
+import type { AcTableCol } from "../../types/table";
+import { defineAsyncComponent, ref, computed, watch } from "vue";
+
+interface Props {
+  isLoaderActive?: boolean;
+  isTableEmpty?: boolean;
+  tableHeaders?: Array<AcTableCol>;
+  removeContentPadding?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoaderActive: false,
+  isTableEmpty: false,
+  tableHeaders: () => [],
+  removeContentPadding: false,
+});
+
+const TableContainer = defineAsyncComponent(
+  () => import("../table/TableContainer.vue")
+);
+const EmptyTableInfo = defineAsyncComponent(
+  () => import("../table/EmptyTableInfo.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 loaderCols = ref(5);
+const headerSortables = ref<Array<{ enabled: boolean; mode: string }>>([]);
+
+const isFullTableLoaderActive = computed(() => {
+  return !props.tableHeaders.length;
+});
+
+const headerLabels = computed(() => {
+  return props.tableHeaders.map((th) =>
+    typeof th === "string" ? th : th?.name || "Label"
+  );
+});
+
+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: "",
+          };
+        }
+      });
+    }
+  }
+);
+</script>
+
 <template>
   <table-container>
     <table
@@ -46,98 +118,3 @@
     <!-- pagination end -->
   </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: () => [],
-    },
-    removeContentPadding: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    TableContainer: defineAsyncComponent(() =>
-      import("../../v2/table/TableContainer.vue").then(
-        (module) => module.default
-      )
-    ),
-    EmptyTableInfo: defineAsyncComponent(() =>
-      import("../../v2/table/EmptyTableInfo.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)
-    ),
-  },
-
-  data() {
-    return {
-      loaderCols: 5,
-      headerSortables: [],
-    };
-  },
-
-  computed: {
-    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 = "";
-            }
-          });
-        } else {
-          this.headerSortables = n.map((th) => {
-            if (typeof th === "string") {
-              return {
-                enabled: false,
-                mode: "",
-              };
-            } else {
-              return {
-                enabled: !!th?.sort?.enable,
-                mode: "",
-              };
-            }
-          });
-        }
-      },
-    },
-  },
-});
-</script>