@appscode/design-system 2.6.20 → 2.6.22-alpha

package/main.scss

@@ -16,6 +16,7 @@
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
+@import "@/components/vue-components/styles/components/table";
 @import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.6.20",
+  "version": "2.6.22-alpha",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/base/utilities/_spacing.scss

@@ -108,6 +108,11 @@ $spacing-values: (
   .width-#{$i} {
     width: #{$i}px !important;
   }
+
+  .size-#{$i} {
+    height: #{$i}px !important;
+    width: #{$i}px !important;
+  }
 }
 
 .height-auto {

package/vue-components/styles/components/_avatar.scss

@@ -34,4 +34,14 @@
       border-radius: 50%;
     }
   }
+  img {
+    background-color: #ddd;
+    height: 100%;
+    width: 100%;
+  }
+}
+.avatar-group {
+  .avatar {
+    margin-left: -8px;
+  }
 }

package/vue-components/styles/components/inbox/all.scss

@@ -60,9 +60,9 @@
 
 .message-details {
   max-width: 768px;
-  margin: 36px 32px 32px 64px;
+  margin: 16px 64px 16px 64px;
   @include until-widescreen {
-    margin: 36px 16px 16px 16px;
+    margin: 16px 32px 16px 64px;
   }
 }
 
@@ -87,10 +87,10 @@
   }
 }
 .message-content {
-  height: calc(100vh - 170px);
+  // height: calc(100vh - 170px);
   overflow-y: auto;
   overflow-x: hidden;
-  padding-inline: 20px;
+  // padding-inline: 20px;
 }
 
 .is-fullwidth.searchbar {
@@ -122,8 +122,15 @@ body:has(.message-details) {
 .message-details {
   max-width: 100%;
   overflow: hidden;
+  transition: 0.2s ease-in-out;
+  &.is-open {
+    background-color: $primary-light-gray;
+    padding: 16px;
+    border: 2px solid $ac-primary;
+  }
   pre {
     max-width: 100%;
     font-size: 1rem;
+    max-height: 300px;
   }
 }

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { defineAsyncComponent, defineProps } from "vue";
+import BuildingIcon from "@/components/vue-components/v3/icons/BuildingIcon.vue";
+
+interface TabItem {
+  label: string;
+  href: string;
+  icon: any;
+}
+
+interface Props {
+  profileThumbnail?: string;
+  displayName?: string;
+  username?: string;
+  location?: string;
+  webURL?: string;
+  tabs?: TabItem[];
+}
+
+withDefaults(defineProps<Props>(), {
+  profileThumbnail: "https://placehold.co/100x100",
+  displayName: "John Doe",
+  username: "@mohintest1",
+  location: "Dhaka",
+  webURL: "https://appscode.com",
+  tabs: () => [
+    { label: "Overview", href: "#", icon: BuildingIcon },
+    { label: "Organizations", href: "#", icon: BuildingIcon },
+    { label: "Activities", href: "#", icon: BuildingIcon },
+    { label: "Settings", href: "#", icon: BuildingIcon },
+    { label: "Site Administration", href: "#", icon: BuildingIcon },
+  ],
+});
+
+// Avatar
+const Avatar = defineAsyncComponent(() => import("@/components/vue-components/v3/avatar/Avatar.vue"));
+// Tabs
+const Tabs = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/Tabs.vue"));
+const TabItem = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/TabItem.vue"));
+
+import LinkIcon from "@/components/vue-components/v3/icons/LinkIcon.vue";
+import MapIcon from "@/components/vue-components/v3/icons/MapIcon.vue";
+</script>
+
+<template>
+  <div class="profile-banner">
+    <div class="container px-5">
+      <div class="columns is-multiline">
+        <div class="column is-12">
+          <!-- user profile start  -->
+          <div class="user-profile">
+            <div class="avatar is-flex gap-16">
+              <slot name="avatar">
+                <Avatar size="48x48" :imgUrl="profileThumbnail" roundedClass="is-rounded-4" />
+              </slot>
+              <!-- <Avatar size="48x48" roundedClass="is-rounded-4" /> -->
+              <div class="is-flex is-flex-direction-column">
+                <h5 class="mb-0">{{ displayName }}</h5>
+                <div class="is-flex is-align-items-center gap-24">
+                  <p>{{ username }}</p>
+                  <p class="is-flex is-align-items-center gap-4">
+                    <span class="icon"><MapIcon /></span>
+                    <span>{{ location }}</span>
+                  </p>
+
+                  <a :href="`${webURL}`" target="_blank" class="is-flex is-align-items-center gap-4">
+                    <span class="icon"><LinkIcon /></span>
+                    <span class="is-underlined">{{ webURL }}</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- user profile start  -->
+        </div>
+
+        <slot name="tabs-menu">
+          <!-- tabs area start  -->
+          <div class="column is-12">
+            <tabs class="solid-tab px-3">
+              <tab-item v-for="(tab, index) in tabs" :key="index" :class="{ 'is-active': index === 0 }">
+                <a :href="tab.href">
+                  <span class="icon"><component :is="tab.icon" /></span>
+                  <span>{{ tab.label }}</span>
+                </a>
+              </tab-item>
+            </tabs>
+          </div>
+          <!-- tabs area end  -->
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -48,8 +48,8 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
               :key="idx + tag.value"
               :class="tag.class"
               :data-testid="idx === 0 ? 'cluster-status-text' : undefined"
-              class="is-flex is-align-center gap-4"
-              ><span v-if="tag?.isSpinner || false" class="is-flex gap-4"><SvgSpinners270Ring /></span
+              class="is-flex is-align-center gap-6"
+              ><span v-if="tag?.isSpinner || false" class="is-flex gap-6"><SvgSpinners270Ring /></span
               >{{ tag.value }}</span
             >
           </div>

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

@@ -0,0 +1,20 @@
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Appscodelabs",
+  },
+  logo: {
+    type: String,
+    default: "https://placehold.co/100x100",
+  },
+  url: {
+    type: String,
+    default: "#",
+  },
+});
+</script>
+<template>
+  <a :href="props.url" class="org-thumb" :title="props.title"><img :src="props.logo" :alt="props.title" /></a>
+</template>

package/vue-components/v3/form-fields/Searchbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, watch } from "vue";
 
 interface Props {
   placeholder?: string;
@@ -13,7 +13,14 @@ withDefaults(defineProps<Props>(), {
   loading: false,
   withResult: false,
 });
+const emit = defineEmits(["handleSearch"]);
 
+const searchText = ref("");
+console.log(searchText);
+
+watch(searchText, (n) => {
+  emit("handleSearch", n.trim());
+});
 const SearchIcon = defineAsyncComponent(() => import("./../icons/SearchIcon.vue"));
 const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vue"));
 </script>
@@ -26,7 +33,7 @@ const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vu
         <SearchIcon v-else />
       </span>
     </label>
-    <input id="search" type="text" :placeholder="placeholder" class="pl-40" />
+    <input id="search" type="text" :placeholder="placeholder" class="pl-40" v-model="searchText" />
 
     <!-- use .is-absolute  -->
     <div v-if="withResult" class="search-result-box panel is-fullwidth z-900">

package/vue-components/v3/icons/BuildingIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008zm0 3h.008v.008h-.008zm0 3h.008v.008h-.008z"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/CogIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+      <path
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87q.11.06.22.127c.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a8 8 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a7 7 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a7 7 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a7 7 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124q.108-.066.22-.128c.332-.183.582-.495.644-.869z"
+      />
+      <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+    </g>
+  </svg>
+</template>

package/vue-components/v3/icons/LinkIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/MapIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+      <path d="M15 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+      <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0" />
+    </g>
+  </svg>
+</template>

package/vue-components/v3/icons/PlusIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M12 4.5v15m7.5-7.5h-15"
+    />
+  </svg>
+</template>

package/vue-components/v3/loaders/EditorLoader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { rand } from "@vueuse/core";
+import { defineAsyncComponent } from "vue";
+
+const Skeleton = defineAsyncComponent(() => import("../skeleton/Skeleton.vue"));
+</script>
+
+<template>
+  <div class="is-flex is-align-items-start" style="gap: 32px">
+    <div style="width: 250px">
+      <Skeleton v-for="i in 6" :key="i" height="28px" modifier-classes="mb-8 ml-8" />
+    </div>
+    <div style="width: calc(100% - 250px)">
+      <Skeleton v-for="i in 20" :key="i" height="16px" :width="`${rand(10, 100)}%`" modifier-classes="mb-8" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup>
+import { defineAsyncComponent, defineProps } from "vue";
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "Search what you are looking for...",
+  },
+});
+
+const emit = defineEmits(["handleSearch"]);
+function handleSearch(searchText) {
+  emit("handleSearch", searchText);
+}
+
+const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
+</script>
+<template>
+  <div class="filterable-searchbar is-flex">
+    <Searchbar :placeholder="props.placeholder" @handleSearch="handleSearch" />
+    <select class="select search-filter">
+      <option value="all-cluster">All Cluster</option>
+      <option value="active">Active</option>
+      <option value="pending">Pending</option>
+    </select>
+  </div>
+</template>

package/vue-components/v3/sidebar/basic-sidebar/Sidebar.vue

@@ -0,0 +1,43 @@
+<script setup>
+import CogIcon from "@/components/vue-components/v3/icons/CogIcon.vue";
+
+// Define the props to accept the data structure
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Default Label", // Optional default value
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="sidebar-style-2">
+    <div class="left-sidebar">
+      <!-- Iterate through each section (based on your sidebar JSON structure) -->
+      <div class="sidebar-items" v-for="(data, idx) in props.items" :key="idx">
+        <label class="label">{{ data.label }}</label>
+
+        <!-- Iterate through the items inside each section -->
+        <slot
+          name="sidebar-item"
+          v-for="(item, idx) in data.items"
+          :key="idx"
+          :item="item"
+        >
+          <a
+            :href="item.link || '#'"
+            class="sidebar-item"
+            :class="{ 'is-active': item.isActive }"
+          >
+            <span class="icon"><component :is="item.icon || CogIcon" /></span>
+            <span>{{ item.text }}</span>
+          </a>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/vue-components/v3/table/basic-table/Table.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import Avatar from "../../avatar/Avatar.vue";
+
+interface Organization {
+  name: string;
+  logo: string;
+  description: string;
+  clusters: number;
+  members: Array<{
+    name: string;
+    avatar: string;
+  }>;
+}
+
+defineProps<{ organizations: Organization[] }>();
+</script>
+
+<template>
+  <table class="table ac-table is-fullwidth b-1 is-middle">
+    <thead>
+      <tr>
+        <th>Organizations</th>
+        <th class="has-text-right">Clusters</th>
+        <th class="has-text-right">Members</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="(org, index) in organizations" :key="index" class="is-clickable">
+        <td>
+          <div class="is-flex gap-8">
+            <div class="org-thumb">
+              <img :src="org.logo" :alt="org.name" />
+            </div>
+            <div class="is-flex is-flex-direction-column">
+              <h5>{{ org.name }}</h5>
+              <p>{{ org.description }}</p>
+            </div>
+          </div>
+        </td>
+
+        <td class="has-text-right">{{ org.clusters }}</td>
+        <td class="has-text-right">
+          <div class="is-flex is-justify-content-flex-end avatar-group">
+            <Avatar
+              v-for="(member, idx) in org.members"
+              :key="idx"
+              :rounded="true"
+              size="24x24"
+              :src="member.avatar"
+              :alt="member.name"
+            />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>