@appscode/design-system 2.1.7 → 2.2.0

package/vue-components/v2/preloader/Preloader.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
-    style="height: calc(100vh - 200px)"
-  >
-    <span v-if="showSpinner" class="spinner"></span>
-    <p class="font-size-12 mt-10 pl-5">
-      {{ message }}
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    showSpinner: {
-      type: Boolean,
-      default: true,
-    },
-    message: {
-      type: String,
-      default: "Loading ...",
-    },
-  },
-};
-</script>

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

@@ -1,31 +0,0 @@
-<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>
-export default {
-  components: {
-    AcSingleInput: () => import("../form-fields/AcSingleInput.vue"),
-    AcInput: () => import("../form-fields/Input.vue"),
-  },
-
-  data() {
-    return {
-      searchText: "",
-    };
-  },
-
-  watch: {
-    searchText(n) {
-      this.$emit("search", n);
-    },
-  },
-};
-</script>

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

@@ -1,126 +0,0 @@
-<template>
-  <div class="is-cluster-logo" v-if="sidebarCollapsed">
-    <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"
-    deselectLabel=""
-    selectLabel=""
-    selectedLabel=""
-  >
-    <template slot="singleLabel" slot-scope="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 slot="option" slot-scope="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>
-export default {
-  props: {
-    sidebarCollapsed: {
-      type: Boolean,
-      default: false,
-    },
-    mouseHover: {
-      type: Boolean,
-      default: false,
-    },
-    clusterOptions: {
-      type: Array,
-      default: [],
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-  },
-
-  components: {
-    Multiselect: () => import("vue-multiselect"),
-  },
-
-  data() {
-    return {
-      selectedCluster: null,
-      selectedClusterName: "",
-    };
-  },
-
-  methods: {
-    getProviderIcon(provider) {
-      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
-    },
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      handler(n) {
-        this.selectedClusterName = n;
-      },
-    },
-    selectedCluster: {
-      deep: true,
-      handler(n) {
-        this.selectedClusterName = n.name;
-      },
-    },
-    selectedClusterName(n) {
-      if (this.selectedCluster && n !== this.selectedCluster.name) {
-        this.clusterOptions.forEach((item) => {
-          if (this.selectedClusterName === item.name) {
-            this.selectedCluster = item;
-          }
-        });
-      }
-      this.$emit("input", n);
-    },
-    clusterOptions: {
-      deep: true,
-      immediate: true,
-      async handler(list) {
-        if (list) {
-          list.forEach(async (item) => {
-            if (item.name === this.selectedClusterName) {
-              this.selectedCluster = item;
-            }
-          });
-        }
-      },
-    },
-  },
-};
-</script>

package/vue-components/v2/sidebar/Sidebar.vue

@@ -1,5 +0,0 @@
-<template>
-  <ul class="menu-list ac-menu-list">
-    <slot />
-  </ul>
-</template>

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -1,59 +0,0 @@
-<template>
-  <li ref="sidebarItem">
-    <router-link :id="id" :title="title" :to="url" :class="{ 'is-active': isActive }">
-      <span>
-        <img :src="icon" alt="icon" />
-      </span>
-      <strong>{{ title }}</strong>
-    </router-link>
-  </li>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      default: "sidebar-item",
-    },
-    title: {
-      type: String,
-      default: "Sidebar Item",
-    },
-    url: {
-      type: String,
-      default: "/",
-    },
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: null,
-      default: "@/assets/images/icons/basic.svg",
-    },
-  },
-  watch: {
-    isActive: {
-      immediate: true,
-      handler(n) {
-        if (n) {
-          this.$nextTick(() => {
-            setTimeout(() => {
-              const top = (this.$refs.sidebarItem && this.$refs.sidebarItem.getBoundingClientRect().top) || 0;
-              // preventing scroll to options that are already visible
-              if (top > window.innerHeight - 200) {
-                // scroll to selected option item
-                this.$refs.sidebarItem.scrollIntoView({
-                  behavior: "smooth",
-                  block: "center",
-                });
-              }
-            }, 500);
-          });
-        }
-      },
-    },
-  },
-};
-</script>

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

@@ -1,114 +0,0 @@
-<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>
-export default {
-  props: {
-    isDropDownOpen: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "Sidebar Item",
-    },
-    icon: {
-      type: String,
-      default: "@/assets/images/icons/basic.svg",
-    },
-  },
-
-  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"];
-            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/v2/tab/TabItem.vue

@@ -1,16 +0,0 @@
-<template>
-  <li :class="{ 'is-active': isActive }" data-testid="tab-item">
-    <slot />
-  </li>
-</template>
-
-<script>
-export default {
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>

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

@@ -1,7 +0,0 @@
-<template>
-  <div class="tabs ac-tabs">
-    <ul>
-      <slot />
-    </ul>
-  </div>
-</template>

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

@@ -1,5 +0,0 @@
-<template>
-  <div class="ac-tabs-body is-content-available">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/table/EmptyTableImage.vue

@@ -1,3 +0,0 @@
-<template>
-  <img src="@/assets/images/illustrations/no-data-cuate-light.svg" alt="" />
-</template>

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

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

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

@@ -1,35 +0,0 @@
-<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>
-export default {
-  props: {
-    isHeaderCell: {
-      type: Boolean,
-      default: false,
-    },
-    fakeCellWidth: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  components: {
-    TableCell: () => import("@appscode/design-system/vue-components/v2/table/TableCell.vue"),
-  },
-
-  computed: {
-    dynamicColumnStyle() {
-      return {
-        right: `-${this.fakeCellWidth}px`,
-      };
-    },
-  },
-};
-</script>

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

@@ -1,91 +0,0 @@
-<template>
-  <table-container>
-    <table class="table ac-info-table is-fullwidth" :class="{ 'pl-0 pr-0': removeContentPadding }">
-      <tbody v-if="isFullTableLoaderActive">
-        <!-- table loader -->
-        <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>
-        <!-- table loader -->
-      </tbody>
-      <tbody
-        v-else
-        :class="{
-          'no-data-available has-text-centered p-10': isTableEmpty,
-          'pl-0 pr-0': removeContentPadding,
-        }"
-      >
-        <template v-if="!isTableEmpty">
-          <!-- table rows -->
-          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="tableHeader">
-            <table-cell>
-              <!-- for table cell icons -->
-              <slot :name="`table-cell-icon-${idx}`" />
-              <!-- for table cell icons -->
-              {{ tableHeader }}
-            </table-cell>
-            <table-cell v-if="isLoaderActive">
-              <!-- single col loader -->
-              <cell-value :is-loader-active="true" />
-              <!-- single col loader -->
-            </table-cell>
-            <table-cell v-else>
-              <slot :name="`slot-${idx}`" />
-            </table-cell>
-          </table-row>
-          <!-- table rows -->
-        </template>
-
-        <empty-table-info v-else />
-      </tbody>
-    </table>
-  </table-container>
-</template>
-
-<script>
-export default {
-  props: {
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    isTableEmpty: {
-      type: Boolean,
-      default: true,
-    },
-    tableHeaders: {
-      type: Array,
-      default: () => [],
-    },
-    removeContentPadding: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    TableContainer: () => import("./TableContainer.vue"),
-    EmptyTableInfo: () => import("./EmptyTableInfo.vue"),
-    TableRow: () => import("./TableRow.vue"),
-    TableCell: () => import("./TableCell.vue"),
-    CellValue: () => import("./table-cell/CellValue.vue"),
-  },
-
-  data() {
-    return {
-      loaderCols: 5,
-    };
-  },
-
-  computed: {
-    isFullTableLoaderActive() {
-      return !this.tableHeaders.length;
-    },
-  },
-};
-</script>

package/vue-components/v2/table/NarrowTable.vue

@@ -1,17 +0,0 @@
-<template>
-  <table-container>
-    <table class="table ac-info-table is-narrow">
-      <tbody>
-        <slot />
-      </tbody>
-    </table>
-  </table-container>
-</template>
-
-<script>
-export default {
-  components: {
-    TableContainer: () => import("./TableContainer.vue"),
-  },
-};
-</script>