@appscode/design-system 2.1.8 → 2.2.0

package/vue-components/v2/form-fields/AcSingleInput.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="ac-single-input is-small" :class="modifierClasses">
-    <slot name="label" />
-    <slot name="button" />
-    <slot />
-    <slot name="eye-switcher" />
-    <slot name="error" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    modifierClasses: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>

package/vue-components/v2/form-fields/Input.vue

@@ -1,17 +0,0 @@
-<template>
-  <input data-testid="ac-input" class="ac-input" v-on="inputListeners" />
-</template>
-
-<script>
-export default {
-  computed: {
-    inputListeners() {
-      return Object.assign({}, this.$listeners, {
-        input: (event) => {
-          this.$emit("input", event.target.value);
-        },
-      });
-    },
-  },
-};
-</script>

package/vue-components/v2/header/Header.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="inner-header">
-    <div class="is-flex is-justify-content-space-between" :class="{ container: isContainer }">
-      <header-items>
-        <header-item>
-          <h5>{{ title }}</h5>
-        </header-item>
-        <slot name="header-left-controls" />
-      </header-items>
-      <header-items>
-        <slot />
-      </header-items>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: "No Title",
-    },
-    isContainer: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    HeaderItems: () => import("./HeaderItems.vue"),
-    HeaderItem: () => import("./HeaderItem.vue"),
-  },
-};
-</script>

package/vue-components/v2/header/HeaderItem.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="header-item">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/header/HeaderItems.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="header-items is-flex is-align-items-center">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/icons/Ellipsis.vue

@@ -1,4 +0,0 @@
-<template>
-  <!-- <i aria-hidden="true" class="fa fa-ellipsis-h"></i> -->
-  <span>More...</span>
-</template>

package/vue-components/v2/loaders/ResourceLoader.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <content-loader
-      :width="100"
-      :height="40"
-      :speed="2"
-      :primaryColor="primaryLoaderColor"
-      :secondaryColor="secondaryLoaderColor"
-    >
-      <rect x="1" y="1" rx="1" ry="1" width="14" height="1" />
-      <rect x="17" y="1" rx="1" ry="1" width="13" height="1" />
-      <rect x="32" y="1" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="7" y="3" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="3" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="3" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="5" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="5" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="5" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="13" y="7" rx="1" ry="1" width="10" height="1" />
-      <rect x="25" y="7" rx="1" ry="1" width="20" height="1" />
-
-      <rect x="7" y="10" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="10" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="10" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="12" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="12" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="12" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="13" y="14" rx="1" ry="1" width="10" height="1" />
-      <rect x="25" y="14" rx="1" ry="1" width="20" height="1" />
-
-      <rect x="7" y="17" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="17" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="17" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="19" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="19" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="19" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="7" y="22" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="22" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="22" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="24" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="24" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="24" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="1" y="26" rx="1" ry="1" width="14" height="1" />
-      <rect x="17" y="26" rx="1" ry="1" width="13" height="1" />
-      <rect x="32" y="26" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="7" y="29" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="29" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="29" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="31" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="31" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="31" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="7" y="33" rx="1" ry="1" width="14" height="1" />
-      <rect x="23" y="33" rx="1" ry="1" width="13" height="1" />
-      <rect x="38" y="33" rx="1" ry="1" width="8" height="1" />
-
-      <rect x="13" y="35" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="35" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="35" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="13" y="37" rx="1" ry="1" width="8" height="1" />
-      <rect x="23" y="37" rx="1" ry="1" width="15" height="1" />
-      <rect x="40" y="37" rx="1" ry="1" width="4" height="1" />
-
-      <rect x="1" y="39" rx="1" ry="1" width="14" height="1" />
-      <rect x="17" y="39" rx="1" ry="1" width="13" height="1" />
-      <rect x="32" y="39" rx="1" ry="1" width="8" height="1" />
-    </content-loader>
-  </div>
-</template>
-
-<script>
-import { ContentLoader } from "vue-content-loader";
-
-export default {
-  components: {
-    ContentLoader,
-  },
-  props: {
-    primaryLoaderColor: {
-      type: String,
-      default: "#f5f7f9",
-    },
-    secondaryLoaderColor: {
-      type: String,
-      default: "#ecebeb",
-    },
-  },
-};
-</script>

package/vue-components/v2/loaders/SidebarLoader.vue

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <content-loader
-      :width="100"
-      :height="175"
-      :speed="2"
-      :primaryColor="primaryLoaderColor"
-      :secondaryColor="secondaryLoaderColor"
-    >
-      <rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
-      <rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
-      <rect x="15" y="40" rx="3" ry="3" width="83" height="15" />
-      <rect x="15" y="57" rx="3" ry="3" width="83" height="15" />
-
-      <rect x="2" y="78" rx="3" ry="3" width="96" height="20" />
-      <rect x="15" y="100" rx="3" ry="3" width="83" height="15" />
-      <rect x="15" y="117" rx="3" ry="3" width="83" height="15" />
-      <rect x="15" y="134" rx="3" ry="3" width="83" height="15" />
-
-      <rect x="2" y="155" rx="3" ry="3" width="96" height="20" />
-    </content-loader>
-  </div>
-</template>
-
-<script>
-import { ContentLoader } from "vue-content-loader";
-
-export default {
-  components: {
-    ContentLoader,
-  },
-  props: {
-    primaryLoaderColor: {
-      type: String,
-      default: "#f5f7f9",
-    },
-    secondaryLoaderColor: {
-      type: String,
-      default: "#ecebeb",
-    },
-  },
-};
-</script>

package/vue-components/v2/modal/Modal.vue

@@ -1,137 +0,0 @@
-<template>
-  <portal to="modal">
-    <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
-    <!-- modal start  -->
-    <div
-      v-if="showModal"
-      class="ac-modal is-middle-alignment"
-      :class="modifierClasses"
-      @click.self="onModalOutsideClick"
-    >
-      <div class="ac-modal-inner">
-        <!-- modal header start  -->
-        <div class="ac-modal-header">
-          <h5>{{ title }}</h5>
-          <header-items>
-            <slot name="modal-header-controls" />
-            <header-item>
-              <ac-button
-                modifier-classes="is-square is-transparent"
-                :disabled="isCloseOptionDisabled"
-                :icon-image="require('@appscode/design-system-images/icons/close-icon.svg')"
-                data-testid="delete-confirmation-modal-close-icon"
-                @click.stop="destroyModal"
-              />
-            </header-item>
-          </header-items>
-        </div>
-        <!-- modal header end -->
-
-        <!-- modal body start  -->
-        <div class="ac-modal-body ac-vscrollbar" data-testid="ac-modal-content-with-scroll">
-          <div class="ac-modal-content">
-            <!-- freedom content start  -->
-            <slot />
-            <!-- freedom content end -->
-          </div>
-        </div>
-        <!-- modal body end  -->
-
-        <!-- modal footer start -->
-        <div
-          v-if="!hideActionFooter"
-          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
-        >
-          <div>
-            <slot name="modal-footer-left" />
-          </div>
-          <buttons class="has-text-right is-block">
-            <slot name="modal-footer-controls" />
-          </buttons>
-          <!-- modal footer end -->
-        </div>
-      </div>
-    </div>
-  </portal>
-</template>
-
-<script>
-export default {
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "Modal",
-    },
-    modifierClasses: {
-      type: String,
-      default: "",
-    },
-    isCloseOptionDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    ignoreOutsideClick: {
-      type: Boolean,
-      default: false,
-    },
-    hideActionFooter: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    HeaderItems: () => import("../header/HeaderItems.vue"),
-    HeaderItem: () => import("../header/HeaderItem.vue"),
-    Buttons: () => import("../button/Buttons.vue"),
-    AcButton: () => import("../button/Button.vue"),
-  },
-
-  data() {
-    return {
-      showModal: false,
-    };
-  },
-
-  watch: {
-    open: {
-      immediate: true,
-      handler(n) {
-        if (n) {
-          this.initializeModal();
-        } else {
-          this.destroyModal();
-        }
-      },
-    },
-  },
-
-  methods: {
-    onKeyDown(e) {
-      if (this.open && e.keyCode === 27) {
-        // escape key
-        this.destroyModal();
-      }
-    },
-    onModalOutsideClick() {
-      if (this.ignoreOutsideClick) return;
-      this.destroyModal();
-    },
-    initializeModal() {
-      this.showModal = true;
-      document.addEventListener("keydown", this.onKeyDown);
-    },
-    destroyModal() {
-      if (this.isCloseOptionDisabled) return;
-      this.showModal = false;
-      document.removeEventListener("keydown", this.onKeyDown);
-
-      this.$emit("closemodal", true);
-    },
-  },
-};
-</script>

package/vue-components/v2/modals/DeleteConfirmationModal.vue

@@ -1,74 +0,0 @@
-<template>
-  <!-- modal start  -->
-  <modal :title="title" modifier-classes="is-normal" :open="open" @closemodal="closeModal">
-    <!-- freedom content start  -->
-    <div class="action-message pt-35 pb-35 has-text-centered">
-      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
-      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
-    </div>
-
-    <!-- freedom content end -->
-
-    <!-- modal footer start -->
-    <template #modal-footer-controls>
-      <ac-button
-        @click.stop="closeModal"
-        title="Cancel"
-        modifier-classes="is-outlined"
-        data-testid="delete-confirmation-modal-close-button"
-      />
-      <ac-button
-        modifier-classes="is-danger"
-        :is-loader-active="isDeleteActive"
-        title="Yes"
-        data-testid="delete-confirmation-modal-confirm-button"
-        @click.stop="confirm(true)"
-      />
-    </template>
-  </modal>
-  <!-- modal end  -->
-</template>
-
-<script>
-export default {
-  components: {
-    Modal: () => import("./../modal/Modal.vue"),
-    AcButton: () => import("./../button/Button.vue"),
-  },
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    message: {
-      type: String,
-      default: "",
-    },
-    itemName: {
-      type: String,
-      default: "",
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isDeleteActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    confirm(response) {
-      this.$emit("delete-confirmation-modal$confirm", response);
-    },
-    closeModal() {
-      this.confirm(false);
-      this.$emit("closemodal", true);
-    },
-  },
-};
-</script>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -1,69 +0,0 @@
-<template>
-  <modal :title="editorTitle" :open="open" @closemodal="closeModal" modifier-classes="is-medium">
-    <template #modal-header-controls>
-      <header-item>
-        <ac-button
-          modifier-classes="is-square is-primary"
-          icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`"
-          v-clipboard:success="onCopy"
-          v-clipboard:error="onError"
-        />
-      </header-item>
-    </template>
-    <editor :value="JSON.stringify(parsedContent, null, 4)" :read-only="true" language="json" :show-minimap="false" />
-  </modal>
-</template>
-
-<script>
-import Preloader from "../preloader/Preloader.vue";
-import Banner from "../banner/Banner.vue";
-export default {
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    editorTitle: {
-      type: String,
-      default: "",
-    },
-    editorContent: {
-      type: null,
-      default: () => ({}),
-    },
-  },
-  components: {
-    Modal: () => import("../modal/Modal.vue"),
-    Editor: () => ({
-      component: import("../editor/Editor.vue"),
-      loading: Preloader,
-      delay: 200,
-      error: Banner,
-      timeout: 100000,
-    }),
-    AcButton: () => import("../button/Button.vue"),
-    HeaderItem: () => import("../header/HeaderItem.vue"),
-  },
-  computed: {
-    parsedContent() {
-      try {
-        return JSON.parse(this.editorContent);
-      } catch (e) {
-        return this.editorContent;
-      }
-    },
-  },
-  methods: {
-    onCopy() {
-      this.$toasted.global.success("Value copied successfully").goAway(1000);
-    },
-    onError() {
-      this.$toasted.global.error("Copying failed").goAway(1000);
-    },
-    closeModal() {
-      this.$emit("closemodal", true);
-    },
-  },
-};
-</script>

package/vue-components/v2/navbar/Appdrawer.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="app-drawer-wrapper is-flex">
-    <div class="drawer-icon is-flex is-justify-content-center is-align-items-center">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M6.66667 2H2V6.66667H6.66667V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 2H9.33337V6.66667H14V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 9.33334H9.33337V14H14V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-    <!-- dropdown start -->
-    <div class="ac-menu-content app-drawer-dropdown is-active">
-      <ul>
-        <li v-for="app in apps" :key="app.url">
-          <a :href="app.url">
-            <article class="media">
-              <figure class="media-left">
-                <p class="image">
-                  <img :src="app.icon_url" />
-                </p>
-              </figure>
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>{{ app.title }}</strong>
-                    <span>{{ app.sub_title }}</span>
-                  </p>
-                </div>
-              </div>
-            </article>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    apps: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
-};
-</script>

package/vue-components/v2/navbar/Navbar.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="ac-navbar-area" id="header">
-    <div class="ac-navbar-inner">
-      <!-- navbar start  -->
-      <nav class="ac-navbar">
-        <!-- navbar logo start  -->
-        <!-- <div class="ac-navbar-brand">
-          <slot name="navbar-brand-logo" />
-        </div> -->
-        <!-- navbar logo end -->
-
-        <!-- navbar search area start  -->
-        <div class="ac-navbar-search">
-          <slot name="navbar-search" />
-        </div>
-        <!-- navbar search area end -->
-
-        <!-- navbar menus start  -->
-        <div class="ac-navbar-menu">
-          <!-- single navbar menu item start  -->
-          <slot />
-          <!-- single navbar menu item end  -->
-        </div>
-        <!-- navbar menus end -->
-      </nav>
-      <!-- navbar end -->
-    </div>
-  </div>
-</template>

package/vue-components/v2/navbar/NavbarItem.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="ac-menu-item">
-    <slot />
-  </div>
-</template>
-
-<style></style>

package/vue-components/v2/navbar/NavbarItemContent.vue

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