@appscode/design-system 1.1.0 → 2.0.1

package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="content pt-10 pl-20 pb-20">
+    <h1>Heading One</h1>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+    <h2>Heading Two</h2>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h3>Heading three</h3>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Heading Four</h4>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+    <h5>Heading Five</h5>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h6>Heading Six</h6>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Block Quote</h4>
+
+    <blockquote>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
+      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
+      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
+      atque.
+    </blockquote>
+
+    <h5>Heading Five</h5>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h6>Heading Six</h6>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Block Quote</h4>
+
+    <blockquote>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
+      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
+      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
+      atque.
+    </blockquote>
+  </div>
+</template>
+
+<style lang="scss">
+.content {
+  width: 100%;
+}
+</style>

package/vue-components/v3/tab/TabItem.vue

@@ -1,17 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  isActive?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+});
+</script>
+
 <template>
   <li :class="{ 'is-active': isActive }" data-testid="tab-item">
     <slot />
   </li>
 </template>
-
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
-</script>

package/vue-components/v3/tab/Tabs.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="tabs ac-tabs">
+    <ul>
+      <slot />
+    </ul>
+  </div>
+</template>
+
+<style lang="scss">
+.tabs {
+  &.ac-tabs {
+    ul {
+      border-color: $primary-90;
+    }
+    a {
+      padding: 8px 20px;
+      color: $primary-10;
+      font-weight: 500;
+      color: $black-40;
+      &:hover {
+        border-bottom-color: $black-40;
+      }
+    }
+    li {
+      &.is-active {
+        a {
+          border-bottom-color: $primary;
+          color: $primary;
+        }
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/tab/TabsBody.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-tabs-body is-content-available">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <strong>
+    No Data Available
+    <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+  </strong>
+</template>

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-95;
+
+  &.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>