@appscode/design-system 2.17.56 → 2.17.58

package/main.scss

@@ -3,7 +3,7 @@
 @import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
 
 // Third party CSS
-@import "../node_modules/bulma/bulma.sass";
+@import "bulma/bulma.sass";
 @import "font-awesome/css/font-awesome.min.css";
 @import "vue-multiselect/dist/vue-multiselect.css";
 

package/package.json

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

package/vue-components/index.ts

@@ -149,7 +149,6 @@ import AcSearchBar from "./v3/searchbars/SearchBar.vue";
 
 import AcSidebarTabs from "./v3/sidebar/sidebar-tabs/SidebarTabs.vue";
 import AcSidebarTabsLayout from "./v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue";
-import AcTabsContent from "./v3/sidebar/sidebar-tabs/TabsContent.vue";
 
 import AcAccentColorPicker from "./v3/sidebar/AccentColorPicker.vue";
 import AcClusterSwitcher from "./v3/sidebar/ClusterSwitcher.vue";
@@ -190,7 +189,7 @@ import AcEditorTabs from "./v3/tabs/EditorTabs.vue";
 import AcTag from "./v3/tag/Tag.vue";
 import AcTags from "./v3/tag/Tags.vue";
 
-import AcSimpleSelect from "./v3/upcoming/SimpleSelect.vue";
+import AcSimpleSelect from "./v3/form-fields/SimpleSelect.vue";
 
 export {
   AcAccordion,
@@ -314,7 +313,6 @@ export {
   AcSearchBar,
   AcSidebarTabs,
   AcSidebarTabsLayout,
-  AcTabsContent,
   AcAccentColorPicker,
   AcClusterSwitcher,
   AcSidebar,

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

@@ -331,6 +331,7 @@
         a {
           border-bottom-color: $ac-primary;
           color: $ac-primary;
+          border-bottom-width: 2px;
         }
       }
     }

package/vue-components/v3/button/Button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-interface Props {
+export interface Props {
   title?: string;
   tooltip?: string;
   isLoaderActive?: boolean;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Props {
+export interface Props {
   title?: string;
   subTitle?: string;
   logo?: string;

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

@@ -101,7 +101,7 @@ onMounted(() => {
     </template>
     <div class="is-flex is-flex-direction-column">
       <div v-if="htmlErrorMsg" class="invalid-error is-danger" v-html="errorMsg" />
-      <p v-else-if="errorMsg" class="is-danger">{{ errorMsg }}</p>
+      <p v-else-if="errorMsg" class="is-danger is-italic">{{ errorMsg }}</p>
       <slot name="message" />
     </div>
   </ac-input-text>

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

@@ -172,8 +172,8 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
         <slot name="option" v-bind="props" />
       </template>
     </multiselect>
-    <div v-if="htmlErrorMsg" class="invalid-error is-danger" v-html="errorMsg" />
-    <p v-else v-show="errorMsg" class="is-danger">
+    <div v-if="htmlErrorMsg" class="invalid-error is-danger is-italic" v-html="errorMsg" />
+    <p v-else v-show="errorMsg" class="is-danger is-italic">
       {{ errorMsg }}
     </p>
   </div>

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

@@ -82,8 +82,8 @@ watch(
       @focusout="onFocusOutInput"
     />
     <div class="is-flex is-flex-direction-column">
-      <div v-if="htmlErrorMsg" class="invalid-error" v-html="errorMsg" />
-      <p v-else-if="errorMsg" class="is-danger">{{ errorMsg }}</p>
+      <div v-if="htmlErrorMsg" class="invalid-error is-danger is-italic" v-html="errorMsg" />
+      <p v-else-if="errorMsg" class="is-danger is-italic">{{ errorMsg }}</p>
       <slot name="message" />
     </div>
   </AcInputText>

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

@@ -33,7 +33,7 @@ const model = defineModel({ type: Boolean });
       <span class="slider round"></span>
     </label>
 
-    <p v-show="errorMsg" class="is-danger">
+    <p v-show="errorMsg" class="is-danger is-italic">
       {{ errorMsg }}
     </p>
   </div>

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

@@ -4,7 +4,7 @@ import { defineAsyncComponent } from "vue";
 const HeaderItem = defineAsyncComponent(() => import("./HeaderItem.vue"));
 const HeaderItems = defineAsyncComponent(() => import("./HeaderItems.vue"));
 
-interface Props {
+export interface Props {
   title?: string;
   isContainer?: boolean;
   topValue?: string;

package/vue-components/v3/inbox/MessageList.vue

@@ -21,7 +21,7 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
       <div class="is-flex is-justify-content-space-between">
         <div class="is-flex gap-8 dropdown-action dropdown">
           <label class="ac-checkbox" for="checkbox16">
-            <input class="is-danger" id="checkbox16" type="checkbox" /><span class="checkmark"></span>
+            <input class="is-danger is-italic" id="checkbox16" type="checkbox" /><span class="checkmark"></span>
           </label>
           <button class="button ac-button is-white is-small" title="Filter">
             <span class="icon">

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

@@ -3,7 +3,7 @@ import { setCookie } from "tiny-cookie";
 import { computed, defineAsyncComponent, ref } from "vue";
 import GridIcon from "../icons/GridIcon.vue";
 
-interface Props {
+export interface Props {
   currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
   baseUrl?: string;
   activeOrganization?: string;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Props {
+export interface Props {
   modifierClasses?: string;
   fullWidth?: boolean;
   productName?: string;

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

@@ -3,7 +3,7 @@ import { useRoute } from "vue-router";
 import { computed, ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
-interface Props {
+export interface Props {
   modifierClasses?: string;
 }
 

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

@@ -6,11 +6,11 @@ import HeroiconsCheck from "~icons/heroicons/check";
 
 import type { User } from "../../types/user";
 
-interface FormatedOrgs extends User {
+export interface FormatedOrgs extends User {
   isPersonalAccount?: boolean;
 }
 
-interface Props {
+export interface Props {
   user: FormatedOrgs;
   serverDomain?: string;
   accountsDomain?: string;

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -5,7 +5,7 @@ import Badge from "../badge-tags/Badge.vue";
 
 const Multiselect = defineAsyncComponent(() => import("vue-multiselect"));
 
-interface Props {
+export interface Props {
   sidebarCollapsed?: boolean;
   mouseHover?: boolean;
   clusterOptions?: Array<SwitchCluster>;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Props {
+export interface Props {
   type?: string;
   isCollapsible?: boolean;
   sidebarLight?: boolean;

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 
-interface Props {
+export interface Props {
   isColorpickerEnabled?: boolean;
   hideFooter?: boolean;
 }

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineEmits(["toggleSidebar"]);
 
-interface Props {
+export interface Props {
   brandLogo?: string;
   brandLogoAlt?: string;
   url?: string;

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { nextTick, watch, ref } from "vue";
 
-interface Props {
+export interface Props {
   id?: string;
   title?: string;
   url?: string;

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-interface Props {
+export interface Props {
   isDropDownOpen?: boolean;
   title?: string;
   icon?: string;

package/vue-components/v3/sidebar/Steps.vue

@@ -2,7 +2,7 @@
 import FeCheck from "~icons/fe/check";
 import type { Step } from "../../types/importFlow";
 
-interface Props {
+export interface Props {
   steps?: Step[];
   activeStepIdentifier?: number;
   activeSubStepIdentifier?: number;

package/vue-components/v3/steps/Steps.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CheckIcon from "../icons/CheckIcon.vue";
 
-interface Props {
+export interface Props {
   direction?: string;
   active?: number;
   options?: { title: string; description: string; id: number }[];