@appscode/design-system 2.4.10 → 2.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.4.10",
+  "version": "2.4.12",
   "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/CheckRadio.vue

@@ -7,35 +7,39 @@ interface Props {
   name: string;
   modifierClasses?: string;
   errorMsg?: string;
+  isRow?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
   name: "radio",
   errorMsg: "",
+  isRow: false,
 });
 const model = defineModel();
 </script>
 
 <template>
-  <div class="ac-radio" v-for="option in options" :key="name + option.label">
-    <input
-      v-model="model"
-      :class="modifierClasses"
-      :id="name + option.label"
-      type="radio"
-      :name="name"
-      l
-      :value="option.value"
-    />
-    <label :for="name + option.label">{{ option.label }}</label>
-    <p v-show="errorMsg" class="is-danger">
-      <slot name="message" />
-    </p>
+  <div class="is-flex gap-8" :class="!isRow ? 'is-flex-direction-column' : ''">
+    <div class="ac-radio mr-16" v-for="option in options" :key="name + option.label">
+      <input
+        v-model="model"
+        :class="modifierClasses"
+        :id="name + option.label"
+        type="radio"
+        :name="name"
+        l
+        :value="option.value"
+      />
+      <label :for="name + option.label">{{ option.label }}</label>
+      <p v-show="errorMsg" class="is-danger">
+        <slot name="message" />
+      </p>
+      <p v-show="errorMsg" class="is-danger mb-16">
+        {{ errorMsg }}
+      </p>
+    </div>
   </div>
-  <p v-show="errorMsg" class="is-danger mb-16">
-    {{ errorMsg }}
-  </p>
 </template>
 
 <style lang="scss">