@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/alert/Alert.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div :class="modifierClasses" class="ac-notification">
+    <p>
+      <slot />
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// for alert message
+.ac-notification {
+  background-color: #dee7f5;
+  font-size: 13px;
+  color: $primary;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  overflow: hidden;
+  border: 1px solid $primary;
+  border-radius: 4px;
+  justify-content: flex-start;
+  position: relative;
+  z-index: 1;
+  min-width: 280px;
+
+  p {
+    color: $primary;
+
+    .close-icon {
+      padding-right: 10px;
+      font-size: 15px;
+    }
+
+    a {
+      text-decoration: underline;
+      color: $primary;
+
+      &:hover {
+        color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          calc(var(--hsl-lightness) - 10%),
+          1
+        );
+      }
+    }
+  }
+
+  button.close {
+    background-color: transparent;
+    cursor: pointer;
+    right: 0px;
+    position: absolute;
+    box-shadow: none;
+    border: none;
+    font-size: 14px;
+    color: $danger;
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// mixin for .ac-notification
+@mixin acNotification($colorName) {
+  background-color: scale-color($color: $colorName, $lightness: 80%);
+  color: $white-100;
+  border-color: $colorName;
+
+  p {
+    color: $colorName;
+
+    a {
+      color: $colorName;
+
+      &:hover {
+        color: $colorName;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+@mixin acPrimaryNotification() {
+  background-color: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    0.2
+  );
+  color: $white-100;
+  border-color: $primary;
+
+  p {
+    color: $primary;
+
+    a {
+      color: $primary;
+
+      &:hover {
+        color: $primary;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// is-primary
+.ac-notification.is-primary {
+  @include acPrimaryNotification();
+}
+
+// is.info
+.ac-notification.is-info {
+  @include acNotification($info);
+}
+
+// is.success
+.ac-notification.is-success {
+  @include acNotification($success);
+}
+
+// is-danger
+.ac-notification.is-danger {
+  @include acNotification($danger);
+}
+
+// is-warning
+.ac-notification.is-warning {
+  @include acNotification($warning);
+}
+
+/*====================================
+AC Toast
+=====================================*/
+
+.ac-toast {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 4px;
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 10px;
+
+  * {
+    color: $white-100;
+  }
+
+  p {
+    padding-left: 16px;
+
+    i.fa {
+      padding-right: 0 !important;
+      margin-right: 4px;
+    }
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: underline;
+    padding: 0 15px;
+
+    &:hover {
+      color: $black-70;
+    }
+  }
+
+  button.close-button {
+    border-radius: 0px;
+    background-color: transparent;
+    border: none;
+    color: $white-100;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+    height: 100%;
+    width: 30px;
+    z-index: 1;
+    cursor: pointer;
+    border-left: 1px solid #dddddd;
+  }
+}
+
+// mixin for .ac-toast
+@mixin acToast($colorName) {
+  background-color: $colorName;
+  color: $white-100;
+  border-color: $colorName;
+}
+
+// is-primary
+.ac-toast.is-primary {
+  @include acToast($primary);
+}
+
+// is-info
+.ac-toast.is-info {
+  @include acToast($info);
+}
+
+// is.success
+.ac-toast.is-success {
+  @include acToast($success);
+}
+
+// is-danger
+.ac-toast.is-danger {
+  @include acToast($danger);
+}
+
+// is-warning
+.ac-toast.is-warning {
+  @include acToast($warning);
+}
+
+// dark theme start
+// .is-dark-theme {
+//   .ac-notification.is-danger {
+//     background-color: $black-80;
+//   }
+// }
+</style>

package/vue-components/v3/alert/Toast.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="toast" :class="modifierClasses">
+    <div class="toast-header is-flex is-align-items-center">
+      <h6 class="mr-auto">Toast Header</h6>
+      <small>2 hours ago</small>
+      <button
+        type="button"
+        class="button ac-button is-transparent w-18 h-18 flex ml-8"
+      >
+        <span class="material-icons close-icon is-size-5">close</span>
+      </button>
+    </div>
+    <div class="toast-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.ac-toast {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 4px;
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 10px;
+
+  * {
+    color: $white-100;
+  }
+
+  p {
+    padding-left: 16px;
+
+    i.fa {
+      padding-right: 0 !important;
+      margin-right: 4px;
+    }
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: underline;
+    padding: 0 15px;
+
+    &:hover {
+      color: $black-90;
+    }
+  }
+
+  button.close-button {
+    border-radius: 0px;
+    background-color: transparent;
+    border: none;
+    color: $white-100;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+    height: 100%;
+    width: 30px;
+    z-index: 1;
+    cursor: pointer;
+    border-left: 1px solid #dddddd;
+  }
+}
+</style>

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

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="sign-up-notification mb-20">
+    <div class="has-text-centered">
+      <h3 class="has-text-danger"><slot name="banner-title">Error!</slot></h3>
+      <slot><p>Oops!! There was an error while loading!</p></slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { watch, ref } from "vue";
+import { useRoute } from "vue-router";
+
+interface BreadCrumbType {
+  name: string;
+  path: string;
+}
+
+const list = ref<Array<BreadCrumbType>>([]);
+
+const route = useRoute();
+
+const pathReplaceWithParam = (path: string) => {
+  //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 += route.params[cval.slice(1, cutIndex)] + "/");
+    } else return (pval += cval + "/");
+  }, "/");
+};
+
+const createVal = (startIdx: number, paths: Array<string>) => {
+  return paths.reduce((prev, curr, idx) => {
+    if (idx >= startIdx) {
+      if (idx + 1 === paths.length) return (prev += curr);
+      else return (prev += curr + " / ");
+    } else return prev + "";
+  }, "");
+};
+
+const createList = (paths: Array<string>) => {
+  //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([createVal(0, curr)]);
+    else return prev.concat([createVal(spath[currentIdx - 1].length, curr)]);
+  }, []);
+};
+
+const createBreadcrumbs = () => {
+  //Adding dynamic path to the route
+  const listPaths = route.matched.map((element) =>
+    pathReplaceWithParam(element.path)
+  );
+
+  // If there is duplicate value in arrays last element remove it
+  const length = listPaths.length;
+  if (length > 1 && listPaths[length - 1] === listPaths[length - 2])
+    listPaths.pop();
+
+  //Createing the breadcrumb name
+  const listName = createList(listPaths);
+
+  //Set the new breadcrumb name and path value to list
+  list.value = listName.map((element, index) => {
+    return {
+      name: element,
+      path: listPaths[index],
+    };
+  });
+};
+
+watch(
+  () => route.path,
+  () => {
+    createBreadcrumbs();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+</script>
+
+<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"
+          >
+            <span v-if="idx === 0" class="icon is-flex-start p-0 m-0">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M1 4.5L5.5 1L10 4.5V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H2C1.73478 11 1.48043 10.8946 1.29289 10.7071C1.10536 10.5196 1 10.2652 1 10V4.5Z"
+                  stroke="#666666"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M4 11V6H7V11"
+                  stroke="#666666"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            {{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* breadcumb style */
+.ac-breadcrumb {
+  padding: 8px 20px;
+  border-bottom: 1px solid $primary-95;
+  position: sticky;
+  top: 50px;
+  height: auto;
+  background-color: $white-100;
+  z-index: 998;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  a {
+    color: $primary-20;
+    font-size: 13px;
+    padding: 0 3px;
+    font-weight: 500;
+    font-style: normal;
+
+    &:hover {
+      color: $primary-10;
+    }
+  }
+
+  li.is-active {
+    a {
+      color: $primary-10;
+      font-weight: 500;
+    }
+  }
+}
+</style>

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

@@ -1,78 +1,131 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  title?: string;
+  tooltip?: string;
+  isLoaderActive?: boolean;
+  disabled?: boolean;
+  iconClass?: string;
+  iconImage?: string;
+  iconImageWidth?: number;
+  modifierClasses?: string;
+  titleModifierClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  tooltip: undefined,
+  isLoaderActive: false,
+  disabled: false,
+  iconClass: "",
+  iconImage: "",
+
+  iconImageWidth: undefined,
+  modifierClasses: "is-primary",
+  titleModifierClass: "",
+});
+
+const emit = defineEmits(["click"]);
+
+const handleClick = (e: Event) => {
+  if (!props.disabled) emit("click", e);
+};
+
+const showUnpluginIcon = computed(() => {
+  if (props.iconClass.includes("unplugin")) return true;
+  else return false;
+});
+</script>
+
 <template>
   <button
-    class="button ac-button is-extra-small"
+    class="button ac-button"
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
-    :disabled="disabled ? true : null"
+    :disabled="disabled ? true : undefined"
     @click="handleClick"
     :title="tooltip"
   >
-    <span v-if="iconClass || iconImage" class="icon is-small">
+    <span
+      v-if="iconClass || iconImage"
+      class="icon is-small"
+      :class="showUnpluginIcon ? iconClass : ''"
+    >
       <img
         v-if="iconImage"
         :src="iconImage"
         alt="icon"
         :width="iconImageWidth"
       />
+
+      <slot name="icon" v-else-if="showUnpluginIcon" />
+
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
+
     <span v-if="title" :class="titleModifierClass">{{ title }}</span>
     <slot />
   </button>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  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: "",
-    },
-  },
+<style lang="scss" scoped>
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
 
-  emits: ["click"],
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
 
-  methods: {
-    handleClick(e) {
-      if (!this.disabled) this.$emit("click", e);
-    },
-  },
-});
-</script>
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent #1c1c1c #1c1c1c !important;
+        }
+      }
+      &.is-outlined {
+        &:hover {
+          border-color: inherit;
+        }
+      }
+    }
+
+    &.is-small {
+      padding: 4px 12px;
+      &:not(.is-rounded) {
+        border-radius: 4px;
+      }
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    isMaxWidth?: boolean;
+  }>(),
+  { isMaxWidth: false }
+);
+</script>
+<template>
+  <div v-if="isMaxWidth" :style="{ width: 'max-content' }" class="buttons">
+    <slot />
+  </div>
+  <div v-else class="buttons"><slot /></div>
+</template>
+
+<!-- <style lang="scss">
+.buttons {
+  .button {
+    margin-bottom: 16px;
+  }
+}
+</style> -->