@appscode/design-system 1.1.0 → 2.0.1

package/vue-components/v3/cards/OrgClusterCard.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  type?: string;
+  modifierClasses?: string;
+  roundedThumbnail?: boolean;
+  thumbnail?: string;
+  url?: string;
+  urlLabel?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "no-title",
+  type: "organization",
+  modifierClasses: "",
+  roundedThumbnail: true,
+  thumbnail: "https://via.placeholder.com/80/dddddd/808080",
+  url: "#",
+  urlLabel: "Details",
+});
+</script>
+<template>
+  <div class="card-details is-clickable" :class="modifierClasses">
+    <div class="left-content">
+      <figure class="image is-64x64">
+        <img :class="{ 'is-rounded': roundedThumbnail }" :src="thumbnail" />
+      </figure>
+      <h5>{{ title }}</h5>
+      <a :href="url" class="is-underlined has-text-weight-medium">
+        {{ urlLabel }}
+      </a>
+    </div>
+    <div class="right-content">
+      <figure class="image is-64x64">
+        <img
+          v-if="type === 'organization'"
+          src="../../images/icons/org-icon.svg"
+        />
+        <img v-else src="../../images/icons/cluster-icon.svg" />
+      </figure>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-details {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  border: 1px solid $primary-90;
+  padding: 32px 20px;
+  border-radius: 4px;
+  transition: 0.3s ease-in-out;
+
+  &:hover {
+    border: 1px solid $primary;
+
+    .right-content {
+      img {
+        filter: grayscale(0);
+      }
+    }
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    justify-content: space-between;
+
+    .image {
+      border-radius: 50%;
+
+      &:has(.is-rounded) {
+        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
+      }
+    }
+  }
+
+  .right-content {
+    img {
+      filter: grayscale(1);
+    }
+  }
+}
+</style>

package/vue-components/v3/cards/OverviewCard.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="card-data">
+    <p>
+      <slot name="card-label" />
+    </p>
+    <strong>
+      <slot name="card-value" />
+    </strong>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-data {
+  // min-width: 200px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid $primary-90;
+  padding: 8px 16px;
+  border-radius: 2px;
+  strong {
+    min-width: 30px;
+    font-size: 14px;
+  }
+}
+</style>

package/vue-components/v3/cards/OverviewCards.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const ContentHeader = defineAsyncComponent(
+  () => import("./../content/ContentHeader.vue")
+);
+
+interface Props {
+  headerTitle: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  headerTitle: "",
+});
+</script>
+
+<template>
+  <div class="overview-cards-wrapper">
+    <!-- title  -->
+    <content-header :headerTitle="headerTitle"></content-header>
+    <!-- title  -->
+    <div class="overview-cards b-t-1">
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.overview-cards-wrapper {
+  border: 1px solid $primary-90;
+  margin-right: 20px;
+  height: calc(100% - 16px);
+}
+.overview-cards {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
+  padding: 16px;
+}
+</style>

package/vue-components/v3/cards/Payment.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="ac-payment-card-wrapper">
+    <!-- single card start -->
+    <div class="ac-payment-card payment-bg-2">
+      <div class="payment-card-inner">
+        <!-- card header start  -->
+        <div class="payment-card-header">
+          <div class="card-left">
+            <div class="expired-notice">
+              <p>Expire Soon</p>
+            </div>
+          </div>
+          <!-- header-right start -->
+          <div class="card-right">
+            <div class="ac-options is-right">
+              <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 is-hidden">
+                <li><a href="#">Make as default</a></li>
+                <li><a href="#">Delete card</a></li>
+              </ul>
+              <!-- dropdown Item end -->
+            </div>
+          </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">2296</p>
+        </div>
+        <!-- card body end -->
+        <!-- card footer start  -->
+        <div class="payment-card-footer">
+          <div class="left-content">
+            <div class="p-card-expiry">
+              <p>Expiry Date <span>12/20</span></p>
+            </div>
+            <p class="user-name">John Smith</p>
+          </div>
+          <div class="p-card-logo">
+            <img
+              src="https://bb-developer-v1.web.app/_nuxt/img/visa-card-logo.6a56d8c.svg"
+              alt="visa-card"
+            />
+          </div>
+        </div>
+        <!-- card footer end -->
+      </div>
+    </div>
+    <!-- single card end -->
+  </div>
+</template>

package/vue-components/v3/cards/Vendor.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  subTitle?: string;
+  logo?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "no title",
+  subTitle: "",
+  logo: "https://bb-developer-v1.web.app/_nuxt/img/azure-logo.4fa9281.svg",
+});
+</script>
+
+<template>
+  <!-- use "is-selected" for select item  -->
+  <div class="ac-single-card has-text-centered">
+    <div class="ac-card-logo">
+      <div class="card-status" />
+      <img :src="logo" alt="vendor logo" />
+    </div>
+    <div class="ac-card-name">
+      <p>{{ title }}</p>
+      <p v-if="subTitle" class="has-text-weight-normal mt-8">
+        {{ subTitle }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ac-single-card {
+  border: 1px solid $primary-90;
+  transition: 0.3s ease-in-out;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: $primary-97;
+  min-width: 215px;
+  padding: 30px 20px 20px;
+  cursor: pointer;
+
+  .ac-card-name {
+    p {
+      font-size: 13px;
+      color: $primary-10;
+      line-height: 1;
+      font-weight: 500;
+
+      &.free {
+        color: $primary;
+      }
+    }
+  }
+  .ac-card-logo {
+    width: 70px;
+    height: 70px;
+    border: 1px solid $primary-90;
+    background-color: $white-100;
+    border-radius: 50%;
+    padding: 16px;
+    margin-inline: auto;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+  &.is-selected {
+    border: 1px solid $primary !important;
+  }
+  &:hover {
+    border: 1px solid $primary;
+
+    .ac-card-title {
+      h4 {
+        a {
+          color: $primary;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,14 +1,34 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const HeaderItems = defineAsyncComponent(
+  () => import("./../header/HeaderItems.vue")
+);
+
+interface Props {
+  headerTitle?: string;
+  headerSubTitle?: string;
+  removeBorderBottom?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  headerTitle: "Content Header",
+  headerSubTitle: "",
+  removeBorderBottom: false,
+});
+</script>
+
 <template>
-  <div class="ac-content-header" :class="{ 'b-b-1': !removeBorderBottom }">
+  <div class="ac-content-header">
     <!-- header left start  -->
     <div class="ac-cheader-left">
       <!-- title  -->
       <div class="ac-content-title">
-        <h6 class="is-flex">
+        <h5 class="is-flex is-align-items-center gap-8">
           <slot name="header-icon" />
           {{ headerTitle }}
           <slot name="title-right-actions" />
-        </h6>
+        </h5>
         <p v-if="headerSubTitle">{{ headerSubTitle }}</p>
       </div>
       <!-- title  -->
@@ -26,30 +46,19 @@
     <!-- header right end -->
   </div>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    headerTitle: {
-      type: String,
-      default: "Content Header",
-    },
-    headerSubTitle: {
-      type: String,
-      default: "",
-    },
-    removeBorderBottom: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    HeaderItems: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
-    ),
-  },
-});
-</script>
+<style lang="scss" scoped>
+.ac-content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 20px;
+  min-height: 40px;
+  .ac-content-title {
+    h4,
+    h5,
+    h6 {
+      color: $primary-10;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-content-layout">
+    <slot name="content-header" />
+
+    <div class="ac-content">
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.ac-content-layout {
+  // margin: 20px;
+  // margin-top: 8px;
+  // border: 1px solid $primary-95;
+  margin-bottom: 16px;
+  border-radius: 4px;
+}
+</style>

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

@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+
+const ContentLayout = defineAsyncComponent(() => import("./ContentLayout.vue"));
+const ContentHeader = defineAsyncComponent(() => import("./ContentHeader.vue"));
+const HeaderItem = defineAsyncComponent(
+  () => import("./../header/HeaderItem.vue")
+);
+const SearchBar = defineAsyncComponent(
+  () => import("./../searchbars/SearchBar.vue")
+);
+
+interface Props {
+  removeTableHeaderPadding?: boolean;
+  tableTitle?: string;
+  tableSubTitle?: string;
+  searchable?: boolean;
+  hideHeader?: boolean;
+  removeBorderBottom?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  removeTableHeaderPadding: false,
+  tableTitle: "Table",
+  tableSubTitle: "",
+  searchable: false,
+  hideHeader: false,
+  removeBorderBottom: false,
+});
+
+const acInuptId = props.tableTitle.trim()?.replace(/ /g, "-")?.toLowerCase();
+const searchText = ref("");
+
+const updateSearchText = (text: string) => {
+  searchText.value = text;
+};
+</script>
+
 <template>
   <content-layout>
     <template #content-header>
@@ -5,6 +43,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <template #title-right-actions>
@@ -12,7 +51,11 @@
         </template>
         <slot name="content-left-controls" />
         <header-item>
-          <search-bar v-if="searchable" @search="updateSearchText" />
+          <search-bar
+            v-if="searchable"
+            @search="updateSearchText"
+            :ac-input-id="acInuptId"
+          />
         </header-item>
         <slot name="content-right-controls" />
       </content-header>
@@ -24,60 +67,3 @@
     />
   </content-layout>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  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,
-    },
-  },
-  components: {
-    ContentLayout: defineAsyncComponent(() =>
-      import("../../v2/content/ContentLayout.vue").then(
-        (module) => module.default
-      )
-    ),
-    ContentHeader: defineAsyncComponent(() =>
-      import("./ContentHeader.vue").then((module) => module.default)
-    ),
-    HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
-    ),
-    SearchBar: defineAsyncComponent(() =>
-      import("../searchbars/SearchBar.vue").then((module) => module.default)
-    ),
-  },
-
-  data() {
-    return {
-      searchText: "",
-    };
-  },
-
-  methods: {
-    updateSearchText(text) {
-      this.searchText = text;
-    },
-  },
-});
-</script>

package/vue-components/v3/dropdown/DropdownAction.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+import HeroiconsChevronDown from "~icons/heroicons/chevron-down";
+import HeroiconsChevronUp from "~icons/heroicons/chevron-up";
+import { onClickOutside } from "@vueuse/core";
+
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  buttonModifierClass?: string;
+  disabled?: boolean;
+  iconClass: string;
+}
+withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: "",
+  buttonModifierClass: "",
+  disabled: false,
+  iconClass: "",
+});
+const actionDropdown = ref<HTMLElement | null>(null);
+const emit = defineEmits(["update:modelValue"]);
+
+onClickOutside(actionDropdown, () => emit("update:modelValue", false));
+</script>
+
+<template>
+  <!-- dropdown start  -->
+  <div
+    ref="actionDropdown"
+    class="dropdown-action"
+    :class="{ 'dropdown is-active': modelValue }"
+  >
+    <div class="dropdown-trigger">
+      <ac-button
+        :modifier-classes="buttonModifierClass"
+        aria-haspopup="true"
+        aria-controls="dropdown-menu3"
+        :disabled="disabled"
+        :icon-class="iconClass"
+        @click="emit('update:modelValue', !modelValue)"
+      >
+        <template #icon>
+          <slot name="icon" />
+        </template>
+        <span>{{ title }}</span>
+        <span class="icon is-small">
+          <HeroiconsChevronDown v-if="!modelValue" />
+          <HeroiconsChevronUp v-else />
+        </span>
+      </ac-button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
+      <div class="dropdown-content ac-scrollbar p-0">
+        <slot name="list" />
+      </div>
+    </div>
+  </div>
+  <!-- dropdown end -->
+</template>
+<style lang="scss">
+.dropdown-group {
+  margin-bottom: 8px;
+}
+.dropdown-action {
+  .dropdown-content {
+    min-width: 220px;
+    max-width: 500px;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    border: 1px solid $primary-90;
+
+    label {
+      padding: 8px 16px;
+      display: flex;
+      border-bottom: 1px solid $primary-95;
+      color: $primary-20;
+      font-weight: 500;
+    }
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      padding: 8px 16px;
+      color: $primary-20;
+      &:hover {
+        background-color: $primary-97;
+        color: $primary;
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/dropdown/DropdownDivider.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <hr class="dropdown-divider" />
 </template>

package/vue-components/v3/dropdown/DropdownItem.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="dropdown-item">
     <slot />