@appscode/design-system 2.1.8 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.1.8",
+  "version": "2.2.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -43,7 +43,7 @@
     }
 
     .multiselect__tag {
-      background-color: $gray-80;
+      background-color: $ac-primary;
       margin-top: 4px;
       margin-bottom: 0;
 

package/vue-components/v3/form-fields/Switch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
   modifierClasses?: string;
-  name: string;
+  name?: string;
   label?: string;
   type?: string;
   check?: boolean;

package/vue-components/v2/banner/Banner.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{ bannerClass: string }>(), { bannerClass: "has-text-danger" });
-</script>
-
-<template>
-  <div class="sign-up-notification mb-20">
-    <div class="has-text-centered">
-      <h3 :class="bannerClass"><slot name="banner-title">Error!</slot></h3>
-      <slot><p>Oops!! There was an error while loading!</p></slot>
-    </div>
-  </div>
-</template>

package/vue-components/v2/breadcrumbs/Breadcrumb.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="ac-breadcrumb">
-    <nav aria-label="breadcrumbs" class="breadcrumb">
-      <ul>
-        <li v-for="(item, idx) in list" :key="idx" :class="{ 'is-active': idx === list.length - 1 }">
-          <router-link class="router-link-active" :class="{ 'is-active': idx === list.length - 1 }" :to="item.path"
-            >{{ item.name }}
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      list: [],
-    };
-  },
-  methods: {
-    createBreadcrumbs(n) {
-      //Adding dynamic path to the route
-      const listPaths = this.$route.matched.map((element) => this.pathReplaceWithParam(element.path));
-
-      //Removing the last duplicate value from the listpaths array
-      listPaths.pop();
-
-      //Createing the breadcrumb name
-      const listName = this.createList(listPaths);
-
-      //Set the new breadcrumb name and path value to list
-      this.list = listName.map((element, index) => {
-        return {
-          name: element,
-          path: listPaths[index],
-        };
-      });
-    },
-    pathReplaceWithParam(path) {
-      //Split the path and remove the first and last empty block
-      let splitPath = path.split("/").filter((element) => element !== "");
-
-      //Replace all element with query params where the element start with ":"
-      // Then again add them wthi "/" and return the path value
-      return splitPath.reduce((pval, cval) => {
-        if (cval[0] === ":") {
-          const cutIndex = cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
-          return (pval += this.$route.params[cval.slice(1, cutIndex)] + "/");
-        } else return (pval += cval + "/");
-      }, "/");
-    },
-    createList(paths) {
-      //Split all the path and remove all empty block
-      let spath = paths.map((element) => {
-        return element.split("/").filter((word) => word !== "");
-      });
-
-      // Convert all the path arry in one arry where each element is the  different fo previous element
-      return spath.reduce((prev, curr, currentIdx) => {
-        if (currentIdx === 0) return prev.concat([this.createVal(0, curr)]);
-        else return prev.concat([this.createVal(spath[currentIdx - 1].length, curr)]);
-      }, []);
-    },
-    createVal(startIdx, paths) {
-      return paths.reduce((prev, curr, idx) => {
-        if (idx >= startIdx) {
-          if (idx + 1 === paths.length) return (prev += curr);
-          else return (prev += curr + " / ");
-        } else return prev + "";
-      }, "");
-    },
-  },
-  watch: {
-    "$route.path": {
-      deep: true,
-      immediate: true,
-      handler(n) {
-        this.createBreadcrumbs(n);
-      },
-    },
-  },
-};
-</script>

package/vue-components/v2/button/Button.vue

@@ -1,70 +0,0 @@
-<template>
-  <button
-    class="button ac-button is-extra-small"
-    :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
-    :disabled="disabled"
-    @click="handleClick"
-    :title="tooltip"
-  >
-    <span v-if="iconClass || iconImage" class="icon is-small">
-      <img v-if="iconImage" :src="iconImage" alt="close-icon" :width="iconImageWidth" />
-      <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
-    </span>
-    <span v-if="title" :class="titleModifierClass">{{ title }}</span>
-    <slot />
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    // button title
-    title: {
-      type: String,
-      default: "",
-    },
-    tooltip: {
-      type: String,
-      defualt: undefined,
-    },
-    // for loader
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    // for disability
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // for icon
-    iconClass: {
-      type: String,
-      default: "",
-    },
-    iconImage: {
-      type: String,
-      default: "",
-    },
-    iconImageWidth: {
-      type: Number,
-      default: undefined,
-    },
-    // modifier class
-    modifierClasses: {
-      type: String,
-      default: "is-primary",
-    },
-    titleModifierClass: {
-      type: String,
-      default: "",
-    },
-  },
-
-  methods: {
-    handleClick(e) {
-      if (!this.disabled) this.$emit("click", e);
-    },
-  },
-};
-</script>

package/vue-components/v2/button/Buttons.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="buttons" style="width: max-content">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/button/DownloadBtn.vue

@@ -1,45 +0,0 @@
-<template>
-  <ac-button
-    modifier-classes="is-primary is-square"
-    icon-class="download"
-    :is-loader-active="isFetching"
-    @click="download()"
-  />
-</template>
-
-<script>
-import downloadFunc from "downloadjs";
-
-export default {
-  components: {
-    AcButton: () => import("./../button/Button.vue"),
-  },
-  props: {
-    fileData: {
-      type: String,
-      default: "",
-    },
-    fileName: {
-      type: String,
-      default: "",
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      downloadIcon: "fa fa-cloud-download",
-    };
-  },
-  component: {
-    downloadFunc,
-  },
-  methods: {
-    download() {
-      downloadFunc(this.fileData, this.fileName);
-    },
-  },
-};
-</script>

package/vue-components/v2/card/Card.vue

@@ -1,37 +0,0 @@
-<template>
-  <div
-    class="ac-single-card has-text-centered vendor-card"
-    :class="{ 'is-selected': isSelected }"
-    @click="$emit('click', $event)"
-    data-testid="card-list-item"
-  >
-    <div class="ac-card-logo" v-if="hasLogo">
-      <slot name="card-logo" />
-    </div>
-    <div class="ac-card-name" v-if="hasName">
-      <p>
-        <slot name="card-name" />
-      </p>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-    hasLogo: {
-      type: Boolean,
-      default: true,
-    },
-    hasName: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>

package/vue-components/v2/card/CardContent.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="ac-card-content b-1 b-t-n">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/card/CardHeader.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1">
-    <div class="header-left-content">
-      <slot name="card-header-left" />
-    </div>
-    <div class="header-right-content">
-      <slot name="card-header-right" />
-    </div>
-  </div>
-</template>

package/vue-components/v2/card/Cards.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="ac-card-wrapper">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/card/OverviewCard.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="card-data">
-    <p>
-      <slot name="card-label" />
-    </p>
-    <h5>
-      <slot name="card-value" />
-    </h5>
-  </div>
-</template>

package/vue-components/v2/card/OverviewCards.vue

@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <h1>Hello there</h1>
-    <div class="overview-cards">
-      <slot />
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.overview-cards {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
-
-  border: 1px solid $color-border-light;
-  padding: 16px;
-  height: 100%;
-  margin-right: 20px;
-}
-</style>

package/vue-components/v2/card/PaymentCard.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="ac-payment-card" :class="bgClass">
-    <div class="payment-card-inner">
-      <!-- card header start  -->
-      <div class="payment-card-header">
-        <div class="card-left">
-          <slot name="expire-section" />
-        </div>
-        <!-- header-right start -->
-        <div class="card-right">
-          <template v-if="showRightSection">
-            <p v-if="isDefaultCard" class="default-status">
-              <span>
-                <i class="fa fa-check-circle" aria-hidden="true" />
-                Default
-              </span>
-            </p>
-            <slot v-else name="option-button" />
-          </template>
-        </div>
-        <!-- header-right end -->
-      </div>
-      <!-- card header end -->
-      <!-- card body start  -->
-      <div class="payment-card-body">
-        <p class="p-card-number is-star">****</p>
-        <p class="p-card-number is-star">****</p>
-        <p class="p-card-number is-star">****</p>
-        <p class="p-card-number"><slot name="card-number" /></p>
-      </div>
-      <!-- card body end -->
-      <!-- card footer start  -->
-      <div class="payment-card-footer">
-        <div class="left-content">
-          <div class="p-card-expiry">
-            <p>
-              <slot name="card-expiry-date" />
-            </p>
-          </div>
-          <p class="user-name">
-            <slot name="card-holder-name" />
-          </p>
-        </div>
-        <div class="p-card-logo">
-          <slot name="card-logo" />
-        </div>
-      </div>
-      <!-- card footer end -->
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    bgClass: {
-      type: String,
-      default: "payment-bg-2",
-    },
-    isDefaultCard: {
-      type: Boolean,
-      default: false,
-    },
-    showRightSection: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>

package/vue-components/v2/card/PaymentCardOptionButtons.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="ac-options is-right" @click="handleClick">
-    <div class="option-dots">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-    <!-- dropdown Item start  -->
-    <!-- use "is-hidden" class in the line below for hide dropdown element  -->
-    <ul class="options-items" :class="{ 'is-hidden': isOptionButtonHidden }">
-      <li>
-        <slot name="make-default-button" />
-      </li>
-      <li>
-        <slot name="delete-card-button" />
-      </li>
-    </ul>
-    <!-- dropdown Item end -->
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    isOptionButtonHidden: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    handleClick(e) {
-      if (!this.disabled) this.$emit("click", e);
-    },
-  },
-};
-</script>

package/vue-components/v2/card/PaymentCards.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="ac-payment-card-wrapper">
-    <!-- loader start -->
-    <div v-if="isLoaderActive" class="ac-payment-card is-transparent-bg p-0">
-      <content-loader :height="235" :speed="2" :primaryColor="primaryColor" :secondaryColor="secondaryColor" />
-    </div>
-    <!-- loader end -->
-    <template v-else>
-      <slot name="cards" />
-    </template>
-
-    <!-- single payment method start -->
-    <slot name="add-card" />
-  </div>
-</template>
-<script>
-import { ContentLoader } from "vue-content-loader";
-import {
-  loaderLightThemePrimaryColor,
-  loaderDarkThemePrimaryColor,
-  loaderLightThemeSecondaryColor,
-  loaderDarkThemeSecondaryColor,
-} from "@appscode/design-system/plugins/theme";
-
-export default {
-  components: {
-    ContentLoader,
-  },
-  props: {
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme")
-        ? loaderDarkThemePrimaryColor
-        : loaderLightThemePrimaryColor;
-    },
-    secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme")
-        ? loaderDarkThemeSecondaryColor
-        : loaderLightThemeSecondaryColor;
-    },
-  },
-};
-</script>

package/vue-components/v2/content/ContentHeader.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="ac-content-header" :class="{ 'b-b-1': !removeBorderBottom }">
-    <!-- header left start  -->
-    <div class="ac-cheader-left">
-      <!-- title  -->
-      <div class="ac-content-title">
-        <h6>
-          <slot name="header-icon" />
-          {{ headerTitle }}
-        </h6>
-        <p v-if="headerSubTitle">{{ headerSubTitle }}</p>
-      </div>
-      <!-- title  -->
-    </div>
-    <!-- header left end -->
-
-    <!-- header right start  -->
-    <div class="ac-cheader-right">
-      <!-- your feedom content start here  -->
-      <header-items>
-        <slot />
-      </header-items>
-      <!-- your feedom content end here  -->
-    </div>
-    <!-- header right end -->
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: "Content Header",
-    },
-    headerSubTitle: {
-      type: String,
-      default: "",
-    },
-    removeBorderBottom: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    HeaderItems: () => import("../header/HeaderItems.vue"),
-  },
-};
-</script>

package/vue-components/v2/content/ContentLayout.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="ac-content-layout mb-20">
-    <slot name="content-header" />
-
-    <div class="ac-content">
-      <slot />
-    </div>
-  </div>
-</template>

package/vue-components/v2/content/ContentTable.vue

@@ -1,62 +0,0 @@
-<template>
-  <content-layout>
-    <template #content-header>
-      <content-header
-        v-if="!hideHeader"
-        :header-title="tableTitle"
-        :header-sub-title="tableSubTitle"
-        :remove-border-bottom="removeBorderBottom"
-        :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
-      >
-        <header-item>
-          <search-bar v-if="searchable" @search="searchText = $event" />
-        </header-item>
-        <slot name="content-controls" />
-      </content-header>
-    </template>
-    <slot name="content" :search-text="searchText" />
-  </content-layout>
-</template>
-
-<script>
-export default {
-  props: {
-    removeTableHeaderPadding: {
-      type: Boolean,
-      default: false,
-    },
-    tableTitle: {
-      type: String,
-      default: "Table",
-    },
-    tableSubTitle: {
-      type: String,
-      default: "",
-    },
-    searchable: {
-      type: Boolean,
-      default: true,
-    },
-    hideHeader: {
-      type: Boolean,
-      default: false,
-    },
-    removeBorderBottom: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    ContentLayout: () => import("./ContentLayout.vue"),
-    ContentHeader: () => import("./ContentHeader.vue"),
-    HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue"),
-  },
-
-  data() {
-    return {
-      searchText: "",
-    };
-  },
-};
-</script>