@appscode/design-system 2.6.22-alpha-0.0.17 → 2.6.22-alpha-0.0.19

package/package.json

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

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

@@ -67,6 +67,12 @@
     }
   }
 
+  &.is-extra-large {
+    .ac-modal-inner {
+      width: calc(100vw - 200px);
+    }
+  }
+
   .ac-modal-inner {
     margin: 0 auto;
     background-color: $white-100;

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

@@ -40,13 +40,19 @@
   margin-left: -20px;
   border-bottom: 1px solid $color-border;
 
-  &.is-unread {
-    background-color: $secondary-light-gray;
+  &.is-read {
+    h6 {
+      font-weight: 400 !important;
+    }
+    h6,
+    p,
+    button,
+    span {
+      color: $slate-40;
+    }
   }
   &.is-active {
     background-color: $primary-light-gray;
-    border-top: 1px solid $ac-primary;
-    border-bottom: 1px solid $ac-primary;
 
     h6 {
       color: $ac-primary;
@@ -61,6 +67,7 @@
   }
   .time {
     font-size: 11px;
+    text-transform: capitalize;
   }
   .ac-checkbox {
     margin-top: 4px;
@@ -70,6 +77,9 @@
 .message-details {
   max-width: 768px;
   margin: 0;
+  .table.ac-table {
+    background-color: #fff;
+  }
   @include until-widescreen {
     margin: 0;
   }
@@ -135,7 +145,7 @@ body:has(.message-details) {
   &.is-open {
     // background-color: $primary-light-gray;
     padding: 16px;
-    border: 2px solid $ac-primary;
+    background-color: #f1f1f1;
     border-radius: 8px;
     margin: 8px;
   }
@@ -143,6 +153,8 @@ body:has(.message-details) {
     max-width: 100%;
     font-size: 1rem;
     max-height: 300px;
+    padding: 4px;
+    border-radius: 4px;
   }
 }
 

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

@@ -16,11 +16,5 @@ const handleInput = (e: Event) => {
 </script>
 
 <template>
-  <input
-    class="ac-input"
-    data-testid="ac-input"
-    :class="{ 'width-200': modelValue }"
-    :value="modelValue"
-    @input="handleInput"
-  />
+  <input class="ac-input" data-testid="ac-input" :value="modelValue" @input="handleInput" />
 </template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import HeroiconsChevronDown20Solid from "~icons/heroicons/chevron-down-20-solid";
+
+interface Props {
+  title: string;
+  isOpen?: boolean;
+  hasIcon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+  hasIcon: false
+});
+
+const dropDownStatus = ref<"close" | "open">("close");
+
+const toggleDropDownStatus = () => {
+  if (dropDownStatus.value === "open") dropDownStatus.value = "close";
+  else dropDownStatus.value = "open";
+};
+
+watch(
+  () => props.isOpen,
+  (n) => {
+    if (n) {
+      dropDownStatus.value = "open";
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div
+    class="label pt-10 pb-10 pl-16 pr-16 b-b-1 is-flex is-align-items-center is-justify-content-space-between is-fullwidth is-clickable"
+    @click="toggleDropDownStatus">
+    <div class="is-flex gap-8">
+      <span v-if="hasIcon" class="icon">
+        <slot name="drop-down-icon" />
+      </span>{{ title }}
+    </div>
+    <HeroiconsChevronDown20Solid
+      :style="{ transform: dropDownStatus === 'open' ? 'rotate(180deg)' : 'none', transition: '0.2s' }" />
+  </div>
+  <slot v-if="dropDownStatus === 'open'" name="drop-down-items" />
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+  id: string;
+  url?: string;
+  isActive?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+  url: "",
+});
+</script>
+
+<template>
+  <router-link :to="url" class="sidebar-item" :class="{ 'is-active': isActive }">
+    <span class="icon">
+      <slot name="item-icon" />
+    </span>
+    <span>{{ title }}</span>
+  </router-link>
+</template>

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

@@ -1,93 +1,10 @@
-<script setup lang="ts">
-import { nextTick, watch, ref, computed } from "vue";
-import { useRoute } from "vue-router";
-import CogIcon from "../../icons/CogIcon.vue";
-
-interface SidebarEntry {
-  id: string;
-  name: string;
-  icon?: any;
-  url: string;
-}
-
-interface SidebarSection {
-  id: string;
-  name: string;
-  icon?: any;
-  entries: SidebarEntry[];
-}
-
-interface Props {
-  items: SidebarSection[];
-  isActive: boolean;
-}
-
-// Props
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  isActive: false
-});
-
-const sidebarItem = ref<HTMLElement | null>(null);
-
-const route = useRoute();
-
-const updatedItems = computed(() => {
-  return props.items.map((section) => {
-    const updatedEntries = section.entries.map((entry) => ({
-      ...entry,
-      isActive: route.path === entry.url,
-    }));
-    return { ...section, entries: updatedEntries };
-  });
-});
-
-// Scroll active item into view
-watch(
-  () => props.isActive,
-  (n) => {
-    if (n) {
-      nextTick(() => {
-        setTimeout(() => {
-          const top = (sidebarItem.value && sidebarItem.value.getBoundingClientRect().top) || 0;
-          if (top > window.innerHeight - 200) {
-            sidebarItem.value?.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
-          }
-        }, 300);
-      });
-    }
-  },
-  { immediate: true },
-);
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="sidebar-style-2">
     <div class="left-sidebar">
-      <div class="sidebar-items" v-for="(section, sIdx) in updatedItems" :key="section.id">
-        <label class="label">{{ section.name }}</label>
-
-        <slot
-          name="sidebar-item"
-          v-for="(entry, iIdx) in section.entries"
-          :key="entry.id"
-          :item="entry"
-        >
-          <router-link
-            :to="entry.url"
-            class="sidebar-item"
-            :class="{ 'is-active': entry.isActive }"
-            :ref="entry.isActive ? sidebarItem : null"
-          >
-            <span class="icon">
-              <img :src="entry.icon || CogIcon" alt="icon" />
-            </span>
-            <span>{{ entry.name }}</span>
-          </router-link>
-        </slot>
+      <div class="sidebar-items">
+        <slot name="items-with-drop-down" />
       </div>
     </div>
   </div>