@appscode/design-system 2.4.30 → 2.5.0

package/package.json

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

package/vue-components/index.ts

@@ -0,0 +1 @@
+export * from "./v3";

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -237,3 +237,9 @@
     }
   }
 }
+
+.details-with-checkradio-wrapper {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
+}

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

@@ -1,27 +1,54 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 interface Props {
   options: Array<{
     value: unknown;
     label: string;
+    description?: string;
   }>;
   name: string;
   modifierClasses?: string;
   errorMsg?: string;
   isRow?: boolean;
+  hasDescription?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   modifierClasses: "",
   name: "radio",
   errorMsg: "",
   isRow: false,
+  hasDescription: false,
 });
+const includeSelectedClass = (optionValue: unknown) => {
+  return props.hasDescription && JSON.stringify(model.value) === JSON.stringify(optionValue);
+};
+const handleClick = (optionValue: unknown) => {
+  model.value = optionValue;
+};
 const model = defineModel();
+
+const bodyClass = computed(() => {
+  if (props.hasDescription) return "gap-16 details-with-checkradio-wrapper";
+  else if (!props.isRow) return "is-flex is-flex-wrap-wrap is-flex-direction-column";
+  else return "gap-24";
+});
 </script>
 
 <template>
-  <div class="is-flex" :class="!isRow ? 'is-flex-direction-column' : 'gap-8'" data-testid="check-radio-element">
-    <div class="ac-radio mr-16" v-for="option in options" :key="name + option.label" data-testid="check-radio-option">
+  <div :class="bodyClass" data-testid="check-radio-element">
+    <div
+      class="ac-radio"
+      v-for="option in options"
+      :key="name + option.label"
+      :class="{
+        'card-select is-clickable': hasDescription,
+        'is-selected': includeSelectedClass(option.value),
+      }"
+      data-testid="check-radio-option"
+      @click.prevent="handleClick(option.value)"
+    >
       <input
         v-model="model"
         :class="modifierClasses"
@@ -34,6 +61,9 @@ const model = defineModel();
       <p v-show="errorMsg" class="has-text-danger">
         <slot name="message" />
       </p>
+      <p v-if="hasDescription" class="is-ellipsis-2 mt-8" :title="option.description">
+        {{ option.description }}
+      </p>
       <p v-show="errorMsg" class="has-text-danger mb-16">
         {{ errorMsg }}
       </p>

package/vue-components/v3/index.ts

@@ -0,0 +1,9 @@
+import AcAccordion from "./accordion/Accordion.vue";
+import AcAlert from "./alert/Alert.vue";
+import AcAlertMessage from "./alert/AlertMessage.vue";
+import AcToast from "./alert/Toast.vue";
+import AcAvatar from "./avatar/Avatar.vue";
+import AcBadge from "./badge-tags/Badge.vue";
+import AcTag from "./badge-tags/Tag.vue";
+
+export { AcAccordion, AcAlert, AcAlertMessage, AcToast, AcAvatar, AcBadge, AcTag };