@appscode/design-system 2.17.24 → 2.17.26

package/package.json

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

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { defineProps, type Component } from "vue";
-
+import AcButton from "../../v3/button/Button.vue";
 interface UsageRow {
   icon?: Component;
   label: string;
   values: (string | number)[];
 }
+
+type Header = string | { label: string; button?: boolean; text?: string };
+
 withDefaults(
   defineProps<{
     title?: string;
-    thead?: string[];
+    thead?: Header[];
     tbody?: UsageRow[];
   }>(),
   {
@@ -24,8 +27,24 @@ withDefaults(
   <h5 class="mb-8">{{ title }}</h5>
   <div class="usage-table-card">
     <div class="table-row thead">
-      <div v-for="(header, index) in thead" :key="index" class="table-cell">{{ header }}</div>
+      <div v-for="(header, index) in thead" :key="index" class="table-cell">
+        <template v-if="typeof header === 'string'">
+          {{ header }}
+        </template>
+        <template v-else>
+          <div class="is-flex is-align-items-center is-justify-content-flex-end gap-4">
+            <span>{{ header.label }}</span>
+            <ac-button
+              modifier-classes="is-text has-text-primary p-0 height-auto"
+              v-if="header.button"
+              @click="$emit('total-click')"
+              >({{ header.text }})</ac-button
+            >
+          </div>
+        </template>
+      </div>
     </div>
+
     <div v-for="(row, rowIndex) in tbody" :key="rowIndex" class="table-row">
       <div class="table-cell">
         <div class="is-flex gap-8">
@@ -35,7 +54,9 @@ withDefaults(
           <span>{{ row.label }}</span>
         </div>
       </div>
-      <div v-for="(val, valIndex) in row.values" :key="valIndex" class="table-cell">{{ val }}</div>
+      <div v-for="(val, valIndex) in row.values" :key="valIndex" class="table-cell">
+        {{ val }}
+      </div>
     </div>
   </div>
 </template>

package/vue-components/v3/editor/Editor.vue

@@ -15,6 +15,7 @@ interface Props {
     schema?: Record<string, unknown>;
     uri: string;
   };
+  needsUpdateOnChange?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   editorTheme: "",
   wordWrap: "on",
   validation: () => ({ uri: "" }),
+  needsUpdateOnChange: false,
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -61,7 +63,10 @@ const theme = computed(() => {
 });
 
 const onChange = (e: Event) => {
-  if (typeof e === "string") editorContent.value = e;
+  if (typeof e === "string") {
+    editorContent.value = e;
+    if (props.needsUpdateOnChange) emit("update:modelValue", e);
+  }
 };
 
 const onEditorMount = (editor: Record<string, unknown>) => {