@appscode/design-system 2.2.27 → 2.2.28

package/package.json

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

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  options: Array<{
+    value: unknown;
+    label: string;
+  }>;
+  name?: string;
+  modifierClasses?: string;
+  errorMsg?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  name: "checkbox",
+  errorMsg: "",
+});
+
+const model = defineModel({ type: Array });
+</script>
+
+<template>
+  <div v-for="option in options" :key="name + option.label" class="field">
+    <input
+      class="is-checkradio has-background-color"
+      :class="modifierClasses"
+      :id="name + option.label"
+      :value="option.value"
+      type="checkbox"
+      v-model="model"
+    />
+    <label :for="name + option.label">{{ option.label }}</label>
+  </div>
+  <p v-show="errorMsg" class="is-danger">
+    {{ errorMsg }}
+  </p>
+</template>
+
+<style lang="scss">
+@import "../../../vue-components/styles/components/form-fields/_check-radio-switch.scss";
+</style>

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

@@ -1,33 +1,42 @@
 <script setup lang="ts">
 interface Props {
-  modifierClasses?: string;
+  options: Array<{
+    value: unknown;
+    label: string;
+  }>;
   name: string;
-  label?: string;
-  type?: string;
-  check?: boolean;
+  modifierClasses?: string;
+  errorMsg?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
-  name: "checkbox",
-  label: "Check Radio",
-  type: "checkbox",
-  check: false,
+  name: "radio",
+  errorMsg: "",
 });
+const model = defineModel();
 </script>
 
 <template>
-  <div class="field">
+  <div v-for="option in options" :key="name + option.label" class="field">
     <input
+      v-model="model"
       class="is-checkradio"
-      :class="[type === 'checkbox' ? 'has-background-color' : '', modifierClasses]"
-      :id="name"
-      :type="type"
+      :class="modifierClasses"
+      :id="name + option.label"
+      type="radio"
       :name="name"
-      :checked="check"
+      l
+      :value="option.value"
     />
-    <label :for="name">{{ label }}</label>
+    <label :for="name + option.label">{{ option.label }}</label>
+    <p v-show="errorMsg" class="is-danger">
+      <slot name="message" />
+    </p>
   </div>
+  <p v-show="errorMsg" class="is-danger">
+    {{ errorMsg }}
+  </p>
 </template>
 
 <style lang="scss">

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

@@ -1,33 +1,26 @@
 <script setup lang="ts">
 interface Props {
   modifierClasses?: string;
-  name?: string;
+  name: string;
   label?: string;
-  type?: string;
-  check?: boolean;
+  errorMsg?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
-  name: "switch",
   label: "Switch Label",
-  type: "checkbox",
-  check: false,
+  errorMsg: "",
 });
-const emit = defineEmits(["change"]);
+
+const model = defineModel({ type: Boolean });
 </script>
 
 <template>
   <div class="field">
-    <input
-      :id="name"
-      type="checkbox"
-      :name="name"
-      class="switch is-rounded"
-      :class="modifierClasses"
-      :checked="check"
-      @change="$emit('change')"
-    />
+    <input v-model="model" :id="name" type="checkbox" :name="name" class="switch is-rounded" :class="modifierClasses" />
     <label :for="name">{{ label }}</label>
+    <p v-show="errorMsg" class="is-danger">
+      {{ errorMsg }}
+    </p>
   </div>
 </template>

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

@@ -166,6 +166,7 @@ function handleIsActiveChange(isActive: string) {
                 <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
                   <a
                     class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
+                    data-testid="switch-account-button"
                     @click="toggleList()"
                   >
                     <div class="is-flex gap-8">