@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.12

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="inner-header">
+    <div
+      class="is-flex is-justify-content-space-between"
+      :class="{ container: isContainer }"
+    >
+      <header-items>
+        <header-item>
+          <transition name="fade" mode="out-in" appear>
+            <h5 :key="title">{{ title }}</h5>
+          </transition>
+        </header-item>
+        <slot name="header-left-controls" />
+      </header-items>
+      <header-items>
+        <slot />
+      </header-items>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "No Title",
+    },
+    isContainer: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

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

@@ -0,0 +1,126 @@
+<template>
+  <teleport to="#modals">
+    <!-- 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="destroyModal"
+    >
+      <div class="ac-modal-inner">
+        <!-- modal header start  -->
+        <div class="ac-modal-header">
+          <h6>{{ title }}</h6>
+          <header-items>
+            <slot name="modal-header-controls" />
+            <header-item>
+              <ac-button
+                modifier-classes="is-square is-transparent"
+                :icon-image="crossIcon"
+                @click.stop="destroyModal"
+              />
+            </header-item>
+          </header-items>
+        </div>
+        <!-- modal header end -->
+
+        <!-- modal body start  -->
+        <div class="ac-modal-body">
+          <div class="ac-modal-content">
+            <!-- freedom content start  -->
+            <slot />
+            <!-- freedom content end -->
+          </div>
+        </div>
+        <!-- modal body end  -->
+
+        <!-- modal footer start -->
+        <div class="ac-modal-footer action-footer">
+          <buttons class="has-text-right is-block">
+            <slot name="modal-footer-controls" />
+          </buttons>
+          <!-- modal footer end -->
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "Modal",
+    },
+    modifierClasses: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["closemodal"],
+
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+    Buttons: defineAsyncComponent(() =>
+      import("../../v2/button/Buttons.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showModal: false,
+      crossIcon: import.meta.globEager(
+        "/src/assets/icons/modal/close-icon.svg"
+      )["/src/assets/icons/modal/close-icon.svg"].default,
+    };
+  },
+
+  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();
+      }
+    },
+    initializeModal() {
+      this.showModal = true;
+      document.addEventListener("keydown", this.onKeyDown);
+    },
+    destroyModal() {
+      this.showModal = false;
+      document.removeEventListener("keydown", this.onKeyDown);
+
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,87 @@
+<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}: &quot;${editorContent}&quot;`"
+          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 { defineComponent, defineAsyncComponent } from "vue";
+import { useToast } from "vue-toastification";
+
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    editorTitle: {
+      type: String,
+      default: "",
+    },
+    editorContent: {
+      type: null,
+      default: () => ({}),
+    },
+  },
+  emits: ["closemodal"],
+  components: {
+    Modal: defineAsyncComponent(() =>
+      import("../modal/Modal.vue").then((module) => module.default)
+    ),
+    Editor: defineAsyncComponent(() =>
+      import("../editor/Editor.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+  },
+  computed: {
+    parsedContent() {
+      try {
+        return JSON.parse(this.editorContent);
+      } catch (e) {
+        return this.editorContent;
+      }
+    },
+  },
+  setup() {
+    const toast = useToast();
+    return { toast };
+  },
+  methods: {
+    onCopy() {
+      this.toast.success("Value copied successfully", { timeout: 1000 });
+    },
+    onError() {
+      this.toast.error("Copying failed", { timeout: 1000 });
+    },
+    closeModal() {
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="app-drawer-wrapper">
+    <div class="drawer-icon">
+      <svg
+        class="gb_We"
+        focusable="false"
+        viewBox="0 0 24 24"
+        :style="{ fill: 'white' }"
+      >
+        <path
+          d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
+        ></path>
+      </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>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    apps: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    NavbarItemContent: defineAsyncComponent(() =>
+      import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/navbar/User.vue

@@ -0,0 +1,64 @@
+<template>
+  <navbar-item>
+    <button class="button ac-nav-button ac-profile-button">
+      {{ user.full_name || user.username }}
+      <i class="fa fa-angle-down" aria-hidden="true"></i>
+      <div class="ac-user-profile">
+        <img :src="user.avatar_url" alt="User Photo" />
+      </div>
+    </button>
+    <navbar-item-content>
+      <div v-if="user.username" class="user-profile-wrapper">
+        <div class="profile-area">
+          <div class="profile-photo">
+            <img :src="user.avatar_url" alt="User Photo" />
+            <button class="camera-icon"></button>
+          </div>
+          <div class="profile-info">
+            <p>{{ user.username.toUpperCase() }}</p>
+            <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
+          </div>
+        </div>
+        <ul>
+          <li>
+            <a :href="`${serverDomain}/user/settings/`">Settings</a>
+          </li>
+          <template v-if="user.is_admin">
+            <li>
+              <a :href="`${serverDomain}/admin`"> Site Administration </a>
+            </li>
+          </template>
+          <li>
+            <a :href="`${serverDomain}/user/logout`"> Sign out </a>
+          </li>
+        </ul>
+      </div>
+    </navbar-item-content>
+  </navbar-item>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    user: {
+      type: Object,
+      default: () => ({}),
+    },
+    serverDomain: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    NavbarItem: defineAsyncComponent(() =>
+      import("../../v2/navbar/NavbarItem.vue").then((module) => module.default)
+    ),
+    NavbarItemContent: defineAsyncComponent(() =>
+      import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/pagination/Pagination.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="level inner-table-pagination" v-show="showPagination">
+    <div class="pagination-filter level-left">
+      <div
+        class="level-item"
+        v-show="
+          !hideRowsPerPageSelection &&
+          totalNoOfItems > preSelectedItemsCountPerPage
+        "
+      >
+        <label>Rows per page</label>
+        <select v-model="selectedItemCountPerPage" name="page">
+          <option :value="5">5</option>
+          <option :value="10" v-show="totalNoOfItems > 5">10</option>
+          <option :value="15" v-show="totalNoOfItems > 10">15</option>
+          <option :value="20" v-show="totalNoOfItems > 15">20</option>
+          <option :value="25" v-show="totalNoOfItems > 20">25</option>
+          <option :value="50" v-show="totalNoOfItems > 25">50</option>
+        </select>
+      </div>
+    </div>
+
+    <nav class="pagination-item level-right">
+      <p class="counting-page">
+        Showing
+        <span>{{ itemsRange.start + 1 }}</span
+        >to <span>{{ itemsRange.end }}</span
+        >of <span>{{ totalNoOfItems }}</span
+        >{{ totalNoOfItems > 1 ? "Items" : "Item" }}
+      </p>
+
+      <ul v-if="totalNoOfItems > selectedItemCountPerPage">
+        <li>
+          <a class="previous" @click.prevent="prevPage()">
+            <i class="fa fa-angle-left" aria-hidden="true"></i>
+          </a>
+        </li>
+        <li v-for="page in pages" :key="`page-${page}`">
+          <a
+            @click.prevent="changePage(page)"
+            :class="{ 'is-current': activePageNo === page }"
+            >{{ page }}</a
+          >
+        </li>
+        <li>
+          <a class="next" @click.prevent="nextPage()">
+            <i class="fa fa-angle-right" aria-hidden="true"></i>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    hideRowsPerPageSelection: {
+      type: Boolean,
+      default: false,
+    },
+    totalNoOfItems: {
+      type: Number,
+      default: 0,
+    },
+    preSelectedItemsCountPerPage: {
+      type: Number,
+      default: 5,
+    },
+  },
+  emits: ["pagination:pagechange"],
+
+  data() {
+    return {
+      activePageNo: 1,
+      selectedItemCountPerPage: 5,
+    };
+  },
+
+  computed: {
+    noOfPages() {
+      return Math.ceil(this.totalNoOfItems / this.selectedItemCountPerPage);
+    },
+    noOfPageNos() {
+      return Math.min(this.noOfPages, 5);
+    },
+    pageRange() {
+      let o = { start: 1, end: 0 };
+      if (this.noOfPageNos < 5) {
+        o.start = 1;
+        o.end = this.noOfPageNos;
+      } else {
+        if (this.activePageNo < 3) {
+          o.start = 1;
+          o.end = 5;
+        } else if (this.activePageNo > this.noOfPages - 2) {
+          o.start = this.noOfPages - 4;
+          o.end = this.noOfPages;
+        } else {
+          o.start = this.activePageNo - 2;
+          o.end = this.activePageNo + 2;
+        }
+      }
+      return o;
+    },
+    pages() {
+      let ar = [];
+      let start = this.pageRange.start;
+      let end = this.pageRange.end;
+      for (let i = start; i <= end; i++) {
+        ar.push(i);
+      }
+      return ar;
+    },
+    itemsRange() {
+      let start = (this.activePageNo - 1) * this.selectedItemCountPerPage;
+      let end = Math.min(
+        this.activePageNo * this.selectedItemCountPerPage,
+        this.totalNoOfItems
+      );
+
+      return { start, end };
+    },
+    showPagination() {
+      return this.itemsRange.end > this.itemsRange.start;
+    },
+  },
+
+  created() {
+    this.selectedItemCountPerPage = this.preSelectedItemsCountPerPage;
+  },
+
+  methods: {
+    prevPage() {
+      this.activePageNo = Math.max(this.activePageNo - 1, 1);
+    },
+    changePage(page) {
+      this.activePageNo = page;
+    },
+    nextPage() {
+      this.activePageNo = Math.min(this.activePageNo + 1, this.noOfPages);
+    },
+  },
+
+  watch: {
+    itemsRange: {
+      deep: true,
+      handler(n) {
+        this.$emit("pagination:pagechange", n);
+      },
+    },
+    selectedItemCountPerPage() {
+      this.activePageNo = 1;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,47 @@
+<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>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    AcSingleInput: defineAsyncComponent(() =>
+      import("../../v2/form-fields/AcSingleInput.vue").then(
+        (module) => module.default
+      )
+    ),
+    AcInput: defineAsyncComponent(() =>
+      import("../form-fields/Input.vue").then((module) => module.default)
+    ),
+  },
+
+  emits: ["search"],
+
+  data() {
+    return {
+      searchText: "",
+    };
+  },
+
+  watch: {
+    searchText(n) {
+      this.$emit("search", n);
+    },
+  },
+});
+</script>

package/vue-components/v3/tab/TabItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <li :class="{ 'is-active': isActive }">
+    <slot />
+  </li>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,39 @@
+<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>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isHeaderCell: {
+      type: Boolean,
+      default: false,
+    },
+    fakeCellWidth: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  components: {
+    TableCell: defineAsyncComponent(() =>
+      import("./TableCell.vue").then((module) => module.default)
+    ),
+  },
+
+  computed: {
+    dynamicColumnStyle() {
+      return {
+        right: `-${this.fakeCellWidth}px`,
+      };
+    },
+  },
+});
+</script>