@appscode/design-system 2.4.9 → 2.4.11

package/package.json

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

package/vue-components/v3/code-preview/CodeBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import AcButton from "../button/Button.vue";
 
@@ -17,15 +17,14 @@ const props = withDefaults(defineProps<Props>(), {
   copyBtn: true,
 });
 
-const source = ref(props.code);
+const source = computed(() => props.code);
 
 const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
+
 <template>
   <div class="code-container p-0">
-    <pre class="ac-hscrollbar" :class="spacing">
-     {{ code }}
-    </pre>
+    <pre class="ac-hscrollbar" :class="spacing">{{ source }}</pre>
     <div class="buttons">
       <ac-button v-if="downloadBtn" modifier-classes="is-primary small-button" icon-class="download" />
       <ac-button

package/vue-components/v3/code-preview/CodeGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import AcButton from "../button/Button.vue";
 
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   copyBtn: true,
   code: "",
 });
-const source = ref(props.code);
+const source = computed(() => props.code);
 const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 <template>
@@ -31,7 +31,7 @@ const { copy, copied } = useClipboard({ source, legacy: true });
       />
     </div>
     <pre class="ac-hscrollbar is-border-none">
-     {{ code }}
+     {{ source }}
     </pre>
   </div>
 </template>

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

@@ -8,6 +8,7 @@ interface Props {
   placeholderText?: string;
   disabled?: boolean;
   label?: string;
+  taggable?: boolean;
   allowEmpty?: boolean;
   options?: unknown[];
   trackBy?: string;
@@ -17,12 +18,14 @@ interface Props {
   isLoaderActive?: boolean;
   noResultText?: string;
   showStar?: boolean;
+  tagPlaceholder?: string;
   wrapperDivCustomClass?: string;
   multiselectCustomClass?: string;
   openDirection?: "top" | "bottom";
   groupLabel?: string;
   groupValues?: string;
   groupSelect?: boolean;
+  onTagAdd?: Function;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +48,9 @@ const props = withDefaults(defineProps<Props>(), {
   groupLabel: "",
   groupValues: "",
   groupSelect: false,
+  taggable: false,
+  tagPlaceholder: "",
+  onTagAdd: () => "",
 });
 
 const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
@@ -141,16 +147,19 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
       :disabled="disabled || isLoaderActive"
       :allow-empty="false"
       :show-labels="false"
+      :taggable="taggable"
       :close-on-select="true"
       :open-direction="openDirection"
       :group-values="groupValues"
       :group-label="groupLabel"
       :group-select="groupSelect"
+      :tag-placeholder="tagPlaceholder"
       data-testid="simple-select-box"
       @open="openDropDown"
       @close="closeDropDown"
       @select="onSelect"
       @remove="onRemove"
+      @tag="onTagAdd"
     >
       <template #noResult>
         <span> {{ noResultText }} </span>