@appscode/design-system 2.1.7 → 2.2.0

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>

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

@@ -1,114 +0,0 @@
-<template>
-  <div>
-    <button
-      v-if="themeMode"
-      class="button ac-nav-button"
-      style="color: #ffffff; font-size: 15px"
-      @click="toggleTheme"
-      :title="themeModes[themeMode].displayName"
-    >
-      <i :class="`fa ${themeModes[themeMode].iconClass}`" />
-    </button>
-    <div class="ac-menu-content theme-choice">
-      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li
-          v-for="theme of Object.keys(themeModes)"
-          :title="themeModes[theme].displayName"
-          @click="themeMode = theme"
-          :class="{ 'is-active': themeMode === theme }"
-          :key="theme"
-        >
-          <i :class="['fa', themeModes[theme].iconClass]" />
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      themeMode: "",
-      themeModes: {
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
-        light: {
-          displayName: "Light Theme",
-          iconClass: "fa-sun-o",
-        },
-        dark: {
-          displayName: "Dark Theme",
-          iconClass: "fa-moon-o",
-        },
-      },
-    };
-  },
-
-  mounted() {
-    // get theme mode from localStorage or set default one
-    this.themeMode = localStorage.getItem("themeMode") || "light";
-  },
-
-  destroyed() {
-    this.removeColorSchemeEventListener();
-  },
-
-  watch: {
-    themeMode: {
-      handler(n) {
-        this.onThemeModeChange(n);
-      },
-    },
-  },
-
-  methods: {
-    // handle theme mode button click
-    toggleTheme() {
-      if (this.themeMode === "light") this.themeMode = "dark";
-      else if (this.themeMode === "dark") this.themeMode = "system";
-      else if (this.themeMode === "system") this.themeMode = "light";
-    },
-
-    // triggered when theme mode is updated
-    onThemeModeChange(n) {
-      localStorage.setItem("themeMode", n);
-
-      let theme = n;
-      if (n === "system") {
-        const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
-        this.addColorSchemeEventListener();
-        theme = isDarkMode ? "dark" : "light";
-      } else {
-        this.removeColorSchemeEventListener();
-      }
-      this.$emit("set:theme", theme);
-      this.handleDarkThemeClass(theme);
-    },
-
-    // add proper css class to update the ui theme
-    handleDarkThemeClass(currentTheme) {
-      if (currentTheme === "light") {
-        document.documentElement.classList.remove("is-dark-theme");
-      } else {
-        document.documentElement.classList.add("is-dark-theme");
-      }
-    },
-
-    // add system theme listener event
-    addColorSchemeEventListener() {
-      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this.handleSystemThemeChange);
-    },
-
-    // remove system theme listener event
-    removeColorSchemeEventListener() {
-      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", this.handleSystemThemeChange);
-    },
-
-    handleSystemThemeChange() {
-      this.onThemeModeChange(this.themeMode);
-    },
-  },
-};
-</script>

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

@@ -1,190 +0,0 @@
-<template>
-  <navbar-item>
-    <button class="button ac-nav-button ac-profile-button">
-      <div class="ac-user-profile">
-        <img :src="user.avatar_url" alt="User Photo" />
-      </div>
-      {{ user.full_name || user.username }}
-      <i class="fa fa-angle-down" aria-hidden="true"></i>
-    </button>
-    <navbar-item-content class="navbar-dropdown-wrapper">
-      <div v-if="user.username" class="user-profile-wrapper" @mouseleave="onMouseLeave()">
-        <div class="profile-area">
-          <div class="profile-photo">
-            <img :src="user.avatar_url" alt="User Photo" class="width-50 height-50" />
-            <button class="camera-icon"></button>
-          </div>
-          <div class="profile-info" style="width: calc(100% - 60px)">
-            <a
-              :href="`${serverDomain}/${user.username}`"
-              :title="user.username.toUpperCase()"
-              data-testid="user-profile-link"
-              class="line-break-anywhere is-ellipsis-1"
-              >{{ user.username.toUpperCase() }}</a
-            >
-            <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
-          </div>
-        </div>
-        <transition-group name="list" tag="ul">
-          <li key="settings">
-            <a data-testid="user-settings-link" :href="`${serverDomain}/user/settings/`">Settings</a>
-          </li>
-          <li v-if="isLoggedinUserAdmin" key="site-admin">
-            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`">Site Administration</a>
-          </li>
-          <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
-            <a
-              class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
-              @click="toggleList()"
-            >
-              <span>Switch Account</span>
-              <span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`"></i></span>
-            </a>
-            <transition-group
-              name="list"
-              tag="ul"
-              class="ac-vscrollbar"
-              ref="dropdownItems"
-              :style="{ maxHeight: dropDownSectionHeight }"
-            >
-              <li v-for="(org, idx) in formattedOrganizations" :key="org.username">
-                <a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
-                  <div class="width-30 height-30 image">
-                    <img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
-                  </div>
-                  <div class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10">
-                    <div class="org-info">
-                      <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{
-                        org.username
-                      }}</strong>
-                      <p>
-                        {{ org.isPersonalAccount ? "Personal Account" : "Organization" }}
-                      </p>
-                    </div>
-                    <span v-if="idx === 0" class="material-icons-outlined font-size-18 ml-10 is-pulled-right">
-                      check
-                    </span>
-                  </div>
-                </a>
-              </li>
-            </transition-group>
-          </li>
-          <li key="dashboard">
-            <nuxt-link v-if="isPlatformDomain" to="/dashboard" data-testid="user-dashboard-link"> Dashboard </nuxt-link>
-            <a v-else :href="`${serverDomain}/dashboard`" data-testid="user-dashboard-link"> Dashboard </a>
-          </li>
-          <li key="signout">
-            <a :href="`${accountsDomain}/user/logout`" data-testid="signout-link"> Sign out </a>
-          </li>
-        </transition-group>
-      </div>
-    </navbar-item-content>
-  </navbar-item>
-</template>
-
-<script>
-export default {
-  props: {
-    // active user info
-    user: {
-      type: Object,
-      default: () => ({}),
-    },
-    serverDomain: {
-      type: String,
-      default: "",
-    },
-    accountsDomain: {
-      type: String,
-      default: "",
-    },
-    showAccountSwitcher: {
-      type: Boolean,
-      default: false,
-    },
-    // all available organization list including personal account
-    organizations: {
-      type: Array,
-      default: () => [],
-    },
-    isLoggedinUserAdmin: {
-      type: Boolean,
-      default: false,
-    },
-    isPlatformDomain: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    NavbarItem: () => import("./NavbarItem.vue"),
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
-
-  computed: {
-    formattedOrganizations() {
-      let activeUser;
-      const filteredList = this.organizations.filter((item) => {
-        if (item.username === this.user.username) {
-          activeUser = item;
-        } else {
-          return true;
-        }
-        return false;
-      });
-
-      filteredList.unshift(activeUser);
-
-      return filteredList || [];
-    },
-  },
-
-  data() {
-    return {
-      dropDownStatus: "close",
-      dropDownSectionHeight: null,
-    };
-  },
-
-  methods: {
-    toggleList() {
-      this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
-      this.$nextTick(() => {
-        this.$refs["dropdownItems"].$el.scrollTo(0, 0);
-      });
-    },
-    onOrganizationClick(orgName) {
-      this.$refs["dropdownItems"].$el.scrollTo(0, 0);
-      this.$emit("activeorg$set", orgName);
-    },
-    onMouseLeave() {
-      this.dropDownStatus = "close";
-    },
-  },
-
-  watch: {
-    dropDownStatus: {
-      immediate: true,
-      handler(n) {
-        if (n === "open") {
-          this.$nextTick(() => {
-            const dropDownUl = this.$refs["dropdownItems"];
-            if (dropDownUl) this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
-          });
-        } else {
-          this.dropDownSectionHeight = null;
-        }
-      },
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.ac-vscrollbar {
-  overflow: auto !important;
-}
-.line-break-anywhere {
-  line-break: anywhere;
-}
-</style>

package/vue-components/v2/notification/Notification.vue

@@ -1,92 +0,0 @@
-<template>
-  <div @mouseenter="notificationPanelOpen = true" @mouseleave="notificationPanelOpen = false">
-    <button class="button ac-nav-button">
-      <span v-if="unreadCount">{{ unreadCount }}</span>
-      <i class="fa fa-bell" :class="{ 'ac-shake': unreadCount }" aria-hidden="true"></i>
-    </button>
-    <div class="ac-menu-content is-notification">
-      <div class="notification-header">
-        <div class="left-content">
-          <p>
-            Notifications <span>({{ notifications.length }})</span>
-          </p>
-        </div>
-        <div class="right-content"></div>
-      </div>
-      <div :key="notificationPanelOpen ? 1 : 0" class="notification-body">
-        <transition-group v-if="notifications.length" name="slide-right">
-          <notification-item
-            v-for="notification in notifications"
-            :key="`${notification.id}${unreadCount}`"
-            :notification="notification"
-          />
-        </transition-group>
-        <span v-else class="single-notification-item">No new notifications</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { StringCodec } from "nats.ws/cjs/nats";
-export default {
-  components: {
-    NotificationItem: () => import("./NotificationItem.vue"),
-  },
-  data() {
-    return {
-      notifications: [],
-      notificationsRead: 0,
-
-      notificationPanelOpen: false,
-      subscription: null,
-    };
-  },
-  computed: {
-    unreadCount() {
-      return this.notifications.length - this.notificationsRead;
-    },
-  },
-  watch: {
-    notificationPanelOpen(n) {
-      if (n) {
-        this.notificationsRead = this.notifications.length;
-      }
-    },
-  },
-  created() {
-    this.subscribeToNotifcations();
-  },
-  methods: {
-    addNewNotification(notification) {
-      this.notifications.unshift(notification);
-      if (this.notificationPanelOpen) {
-        this.notificationsRead = this.notifications.length;
-      }
-    },
-    async subscribeToNotifcations() {
-      this.subscription = this.$nc?.subscribe("notifications");
-      console.log("Started listening to Notifications");
-
-      if (this.subscription) {
-        // listen to channel events
-        for await (const msg of this.subscription) {
-          console.log("notifications ===>");
-          console.log({ data: StringCodec().decode(msg.data) });
-          const log = JSON.parse(StringCodec().decode(msg.data));
-          console.log({ log });
-          const currentTime = new Date().getTime();
-          this.addNewNotification({
-            ...log,
-            id: currentTime,
-            time: currentTime,
-          });
-          msg.respond();
-        }
-        console.log("Stopped listening to Notifications");
-        console.log("Closed Channel Notifications");
-      }
-    },
-  },
-};
-</script>

package/vue-components/v2/notification/NotificationItem.vue

@@ -1,42 +0,0 @@
-<template>
-  <a class="single-notification-item is-complete">
-    <p>
-      {{ notification.msg }}
-    </p>
-    <div class="notification-status">
-      <p
-        :class="{
-          'is-success': notification.status === 'Success',
-          'has-text-danger': notification.status === 'Failed',
-          'is-info': notification.status === 'Started' || notification.status === 'Running',
-          'is-warning': notification.status === 'Pending',
-        }"
-      >
-        <i
-          class="fa mr-5"
-          :class="{
-            'fa-check': notification.status === 'Success',
-            'fa-exclamation-triangle': notification.status === 'Failed',
-            'fa-info-circle':
-              notification.status === 'Started' ||
-              notification.status === 'Pending' ||
-              notification.status === 'Running',
-          }"
-        />
-        {{ notification.status }}
-      </p>
-      <p>{{ notification.time | getDayDifferences }} ago</p>
-    </div>
-  </a>
-</template>
-
-<script>
-export default {
-  props: {
-    notification: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>

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

@@ -1,214 +0,0 @@
-<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" data-testid="rows-per-page-selector">
-          <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()" data-testid="pagination-previous-page-button">
-            <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)"
-            data-testid="pagination-page-switch-button"
-            :class="{ 'is-current': activePageNo === page }"
-            >{{ page }}</a
-          >
-        </li>
-        <li>
-          <a class="next" @click.prevent="nextPage()" data-testid="pagination-next-page-button">
-            <i class="fa fa-angle-right" aria-hidden="true"></i>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    hideRowsPerPageSelection: {
-      type: Boolean,
-      default: false,
-    },
-    totalNoOfItems: {
-      type: Number,
-      default: 0,
-    },
-    preSelectedItemsCountPerPage: {
-      type: Number,
-      default: 5,
-    },
-  },
-
-  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>
-<style lang="scss" scoped>
-.inner-table-pagination {
-  padding: 4px 20px;
-}
-
-.pagination-item {
-  ul {
-    li {
-      display: inline-block;
-      a {
-        display: block;
-        width: 20px;
-        text-align: center;
-        font-size: 13px;
-        font-weight: 500;
-        border-radius: 4px;
-        border: 1px solid $color-border;
-        color: $ac-primary;
-        margin-left: 4px;
-
-        &:hover {
-          background-color: $ac-primary !important;
-          color: $white-100;
-          border: 1px solid $color-border;
-        }
-        &.previous {
-          background-color: $primary-97;
-        }
-        &.next {
-          background-color: $primary-97;
-        }
-        &.is-current {
-          background-color: $ac-primary;
-          color: $white-100;
-        }
-      }
-    }
-  }
-}
-
-.counting-page,
-.pagination-filter {
-  color: $color-text;
-  font-size: 12px;
-  span {
-    font-weight: 500;
-    padding: 0 4px;
-  }
-}
-.pagination-filter {
-  select {
-    background-color: $primary-97;
-    border: 1px solid $color-border;
-    border-radius: 2px;
-    margin-left: 4px;
-    height: 22px;
-    padding: 0 4px;
-    &:focus,
-    &:active,
-    &:focus-visible {
-      border: 1px solid $ac-primary;
-      outline: none;
-    }
-  }
-}
-</style>