@appscode/design-system 0.0.21-alpha.2 → 0.4.27

package/vue-components/v3/pagination/Pagination.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="level inner-table-pagination" v-show="showPagination">
+    <div class="pagination-filter level-left">
+      <div
+        class="level-item"
+        v-show="
+          !hideRowsPerPageSelection &&
+          totalNoOfItems > preSelectedItemsCountPerPage
+        "
+      >
+        <label>Rows per page</label>
+        <select
+          v-model="selectedItemCountPerPage"
+          name="page"
+          data-testid="rows-per-page-selector"
+        >
+          <option :value="5">5</option>
+          <option :value="10" v-show="totalNoOfItems > 5">10</option>
+          <option :value="15" v-show="totalNoOfItems > 10">15</option>
+          <option :value="20" v-show="totalNoOfItems > 15">20</option>
+          <option :value="25" v-show="totalNoOfItems > 20">25</option>
+          <option :value="50" v-show="totalNoOfItems > 25">50</option>
+        </select>
+      </div>
+    </div>
+
+    <nav class="pagination-item level-right">
+      <p class="counting-page">
+        Showing
+        <span>{{ itemsRange.start + 1 }}</span
+        >to <span>{{ itemsRange.end }}</span
+        >of <span>{{ totalNoOfItems }}</span
+        >{{ totalNoOfItems > 1 ? "Items" : "Item" }}
+      </p>
+
+      <ul v-if="totalNoOfItems > selectedItemCountPerPage">
+        <li>
+          <a
+            class="previous"
+            @click.prevent="prevPage()"
+            data-testid="pagination-previous-page-button"
+          >
+            <i class="fa fa-angle-left" aria-hidden="true"></i>
+          </a>
+        </li>
+        <li v-for="page in pages" :key="`page-${page}`">
+          <a
+            @click.prevent="changePage(page)"
+            data-testid="pagination-page-switch-button"
+            :class="{ 'is-current': activePageNo === page }"
+            >{{ page }}</a
+          >
+        </li>
+        <li>
+          <a
+            class="next"
+            @click.prevent="nextPage()"
+            data-testid="pagination-next-page-button"
+          >
+            <i class="fa fa-angle-right" aria-hidden="true"></i>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    hideRowsPerPageSelection: {
+      type: Boolean,
+      default: false,
+    },
+    totalNoOfItems: {
+      type: Number,
+      default: 0,
+    },
+    preSelectedItemsCountPerPage: {
+      type: Number,
+      default: 5,
+    },
+  },
+  emits: ["pagination:pagechange"],
+
+  data() {
+    return {
+      activePageNo: 1,
+      selectedItemCountPerPage: 5,
+    };
+  },
+
+  computed: {
+    noOfPages() {
+      return Math.ceil(this.totalNoOfItems / this.selectedItemCountPerPage);
+    },
+    noOfPageNos() {
+      return Math.min(this.noOfPages, 5);
+    },
+    pageRange() {
+      let o = { start: 1, end: 0 };
+      if (this.noOfPageNos < 5) {
+        o.start = 1;
+        o.end = this.noOfPageNos;
+      } else {
+        if (this.activePageNo < 3) {
+          o.start = 1;
+          o.end = 5;
+        } else if (this.activePageNo > this.noOfPages - 2) {
+          o.start = this.noOfPages - 4;
+          o.end = this.noOfPages;
+        } else {
+          o.start = this.activePageNo - 2;
+          o.end = this.activePageNo + 2;
+        }
+      }
+      return o;
+    },
+    pages() {
+      let ar = [];
+      let start = this.pageRange.start;
+      let end = this.pageRange.end;
+      for (let i = start; i <= end; i++) {
+        ar.push(i);
+      }
+      return ar;
+    },
+    itemsRange() {
+      let start = (this.activePageNo - 1) * this.selectedItemCountPerPage;
+      let end = Math.min(
+        this.activePageNo * this.selectedItemCountPerPage,
+        this.totalNoOfItems
+      );
+
+      return { start, end };
+    },
+    showPagination() {
+      return this.itemsRange.end > this.itemsRange.start;
+    },
+  },
+
+  created() {
+    this.selectedItemCountPerPage = this.preSelectedItemsCountPerPage;
+  },
+
+  methods: {
+    prevPage() {
+      this.activePageNo = Math.max(this.activePageNo - 1, 1);
+    },
+    changePage(page) {
+      this.activePageNo = page;
+    },
+    nextPage() {
+      this.activePageNo = Math.min(this.activePageNo + 1, this.noOfPages);
+    },
+  },
+
+  watch: {
+    itemsRange: {
+      deep: true,
+      handler(n) {
+        this.$emit("pagination:pagechange", n);
+      },
+    },
+    selectedItemCountPerPage() {
+      this.activePageNo = 1;
+    },
+  },
+});
+</script>

package/vue-components/v3/searchbars/SearchBar.vue

@@ -0,0 +1,47 @@
+<template>
+  <ac-single-input modifier-classes="is-extra-small width-200">
+    <template #button>
+      <button class="ac-search-button">
+        <i class="fa fa-search" aria-hidden="true"></i>
+      </button>
+    </template>
+    <ac-input
+      name="search"
+      placeholder="Search"
+      type="search"
+      class="ac-search"
+      v-model="searchText"
+    />
+  </ac-single-input>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    AcSingleInput: defineAsyncComponent(() =>
+      import("../../v2/form-fields/AcSingleInput.vue").then(
+        (module) => module.default
+      )
+    ),
+    AcInput: defineAsyncComponent(() =>
+      import("../form-fields/Input.vue").then((module) => module.default)
+    ),
+  },
+
+  emits: ["search"],
+
+  data() {
+    return {
+      searchText: "",
+    };
+  },
+
+  watch: {
+    searchText(n) {
+      this.$emit("search", n);
+    },
+  },
+});
+</script>

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="sidebarCollapsed" class="is-cluster-logo">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="name"
+    :options="clusterOptions"
+    :allow-empty="false"
+    deselect-label=""
+    select-label=""
+    selected-label=""
+  >
+    <template #singleLabel="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template #option="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+  import { defineComponent, defineAsyncComponent } from 'vue'
+  export default defineComponent({
+    components: {
+      Multiselect: defineAsyncComponent(() =>
+        import('vue-multiselect').then((module) => module.default)
+      ),
+    },
+    props: {
+      sidebarCollapsed: {
+        type: Boolean,
+        default: false,
+      },
+      mouseHover: {
+        type: Boolean,
+        default: false,
+      },
+      clusterOptions: {
+        type: Array,
+        default: () => [],
+      },
+      modelValue: {
+        type: String,
+        default: '',
+      },
+    },
+
+    emits: ['update:modelValue'],
+
+    data() {
+      return {
+        selectedCluster: null,
+        selectedClusterName: null,
+      }
+    },
+
+    watch: {
+      modelValue: {
+        immediate: true,
+        handler(n) {
+          this.selectedClusterName = n
+        },
+      },
+      selectedCluster: {
+        deep: true,
+        handler(n) {
+          if (this.selectedClusterName !== n.name) {
+            this.selectedClusterName = n.name
+          }
+        },
+      },
+      selectedClusterName(n) {
+        if (n !== this.selectedCluster.name) {
+          this.clusterOptions.forEach((item) => {
+            if (this.selectedClusterName === item.name) {
+              this.selectedCluster = item
+            }
+          })
+        }
+
+        this.$emit('update:modelValue', n)
+      },
+      clusterOptions: {
+        deep: true,
+        immediate: true,
+        async handler(list) {
+          if (list) {
+            list.forEach((item) => {
+              if (this.selectedClusterName === item.name) {
+                this.selectedCluster = item
+              }
+            })
+          }
+        },
+      },
+    },
+
+    methods: {
+      getProviderIcon(provider) {
+        return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`
+      },
+    },
+  })
+</script>

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -0,0 +1,120 @@
+<template>
+  <li :class="`is-${dropDownStatus}`">
+    <a class="ac-dropdown-button" :title="title" @click="toggleDropDownStatus">
+      <span>
+        <img :src="icon" alt="icon" />
+      </span>
+      <strong>{{ title || "-" }}</strong>
+      <span class="ac-arrow-down">
+        <i class="fa fa-angle-down" aria-hidden="true"> </i>
+      </span>
+    </a>
+
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isDropDownOpen: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "Sidebar Item",
+    },
+    icon: {
+      type: String,
+      default: "@/assets/images/icons/basic.svg",
+    },
+  },
+
+  emits: ["dropDownItemChange"],
+
+  data() {
+    return {
+      dropDownStatus: "close",
+      dropDownSectionHeight: null,
+      isCompMounted: false,
+    };
+  },
+
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
+      }
+    }, 700);
+  },
+
+  watch: {
+    title(n, o) {
+      if (n && this.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("open");
+        });
+      }
+
+      if (o && this.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("close");
+        });
+      }
+    },
+    isDropDownOpen: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.dropDownStatus = "open";
+        } else this.dropDownStatus = "close";
+      },
+    },
+    dropDownStatus: {
+      immediate: true,
+      handler(n) {
+        if (n === "open") {
+          // emit event to close other drop down items
+          this.$emit("dropDownItemChange");
+
+          this.$nextTick(() => {
+            const dropDownUl = this.$refs["sectionItems"];
+            // debugger;
+            if (dropDownUl)
+              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+          });
+        } else {
+          // emit event to close other drop down items
+          this.dropDownSectionHeight = null;
+        }
+      },
+    },
+  },
+
+  methods: {
+    setDropdownMaxHeight(mode) {
+      if (mode === "open") {
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
+      } else {
+        this.dropDownSectionHeight = null;
+      }
+    },
+    toggleDropDownStatus() {
+      if (this.dropDownStatus === "open") {
+        this.dropDownStatus = "close";
+      } else this.dropDownStatus = "open";
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,17 @@
+<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/table/FakeTableCell.vue

@@ -0,0 +1,39 @@
+<template>
+  <th v-if="isHeaderCell" class="increase-width">
+    <div class="increase-innner" :style="dynamicColumnStyle" />
+  </th>
+  <table-cell v-else class="increase-width">
+    <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

@@ -0,0 +1,105 @@
+<template>
+  <table-container>
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
+      <tbody v-if="isFullTableLoaderActive">
+        <table-row v-for="i in loaderCols" :key="i">
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+        </table-row>
+      </tbody>
+      <tbody
+        v-else
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding,
+        }"
+      >
+        <template v-if="!isTableEmpty">
+          <table-row
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="tableHeader"
+          >
+            <table-cell>
+              <slot :name="`table-cell-icon-${idx}`" />
+              {{ tableHeader }}
+            </table-cell>
+            <table-cell v-if="isLoaderActive">
+              <cell-value :is-loader-active="true" />
+            </table-cell>
+            <table-cell v-else>
+              <slot :name="`slot-${idx}`" />
+            </table-cell>
+          </table-row>
+        </template>
+
+        <empty-table-info v-else />
+      </tbody>
+    </table>
+  </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>