@appscode/design-system 2.6.22-alpha-0.0.4 → 2.6.22

package/main.scss

@@ -16,7 +16,6 @@
 // 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.22-alpha-0.0.4",
+  "version": "2.6.22",
   "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,11 +108,6 @@ $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,14 +34,4 @@
       border-radius: 50%;
     }
   }
-  img {
-    background-color: #ddd;
-    height: 100%;
-    width: 100%;
-  }
-}
-.avatar-group {
-  .avatar {
-    margin-left: -8px;
-  }
 }

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-6"
-              ><span v-if="tag?.isSpinner || false" class="is-flex gap-6"><SvgSpinners270Ring /></span
+              class="is-flex is-align-center gap-4"
+              ><span v-if="tag?.isSpinner || false" class="is-flex gap-4"><SvgSpinners270Ring /></span
               >{{ tag.value }}</span
             >
           </div>

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

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

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

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent, defineProps } from "vue";
-import BuildingIcon from "../icons/BuildingIcon.vue";
-import LinkIcon from "../icons/LinkIcon.vue";
-import MapIcon from "../icons/MapIcon.vue";
-
-interface TabItemType {
-  label: string;
-  href: string;
-  icon: any;
-}
-
-interface PropsType {
-  profileThumbnail?: string;
-  displayName?: string;
-  username?: string;
-  location?: string;
-  webURL?: string;
-  tabs?: TabItemType[];
-}
-
-withDefaults(defineProps<PropsType>(), {
-  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 TabsComponent = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/Tabs.vue"));
-const TabItemComponent = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/TabItem.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-component class="solid-tab px-3">
-            <tab-item-component 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-component>
-          </tabs-component>
-        </div>
-        <!-- tabs area end  -->
-        <!-- </slot> -->
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,20 +0,0 @@
-<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/icons/BuildingIcon.vue

@@ -1,13 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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/searchbars/FilterableSearchBar.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { defineAsyncComponent, defineProps, ref, watch } from "vue";
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "Search what you are looking for...",
-  },
-  isFilter: {
-    type: Boolean,
-    default: false,
-  },
-  filterOptions: {
-    type: Array,
-    default: () => [
-      { value: "all-cluster", text: "All Cluster" },
-      { value: "active", text: "Active" },
-      { value: "pending", text: "Pending" },
-    ],
-  },
-});
-const emit = defineEmits(["handleSearch", "handleFilter"]);
-function handleSearch(searchText) {
-  emit("handleSearch", searchText);
-}
-
-const selectedFilter = ref("all-cluster");
-
-watch(selectedFilter, (n) => {
-  emit("handleFilter", n);
-});
-
-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" v-show="props.isFilter" v-model="selectedFilter">
-      <option v-for="option in filterOptions" :key="option.value" :value="option.value">
-        {{ option.text }}
-      </option>
-    </select>
-  </div>
-</template>

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

@@ -1,34 +0,0 @@
-<script setup>
-import CogIcon from "../../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

@@ -1,58 +0,0 @@
-<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>