@appscode/design-system 2.4.29 → 2.5.0

package/package.json

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

@@ -160,6 +160,12 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
       <template #noResult>
         <span> {{ noResultText }} </span>
       </template>
+      <template #singleLabel="props">
+        <slot name="singleLabel" v-bind="props" />
+      </template>
+      <template #option="props">
+        <slot name="option" v-bind="props" />
+      </template>
     </multiselect>
     <p v-show="errorMsg" class="is-danger">
       {{ errorMsg }}

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/form-fields/SingleStepFormArray.vue

@@ -9,8 +9,6 @@ import HeroiconsTrash from "~icons/heroicons/trash";
 import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
 import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
 
-const JsonModal = defineAsyncComponent(() => import("../modals/JsonShowModal.vue"));
-
 interface Props {
   disabled?: boolean;
   isCreateDisabled?: boolean;
@@ -51,8 +49,6 @@ const editFieldIndex = ref(-1);
 const isFormHidden = ref(true);
 const isSavingNewElement = ref(false);
 const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
-const isOpen = ref(false);
-const fullNamespaceList = ref<string[]>([]);
 
 function onAddClick() {
   isSavingNewElement.value = true;
@@ -93,29 +89,9 @@ function readableTime(utcTime: unknown) {
   if (typeof utcTime === "string") return new Date(utcTime).toLocaleString();
   else return utcTime;
 }
-function truncatedNamespaces(namespaces: string[]): string {
-  if (namespaces.length <= 1) {
-    return namespaces[0];
-  }
-  return namespaces.slice(0, 1).join(", ") + ` (+${namespaces.length - 1})`;
-}
-
-function showFullNamespaceList(namespaces: string[]): void {
-  isOpen.value = true;
-
-  fullNamespaceList.value = namespaces;
-}
 </script>
 
 <template>
-  <json-modal
-    v-if="isOpen"
-    :open="isOpen"
-    :title="'Namespace List'"
-    :editor-content="fullNamespaceList"
-    @closemodal="isOpen = false"
-  ></json-modal>
-
   <div :class="{ 'ac-nested-elements': label }">
     <!-- Add New Form Start -->
     <template v-if="isSavingNewElement">
@@ -208,21 +184,7 @@ function showFullNamespaceList(namespaces: string[]): void {
                 <tr data-testid="ac-table-row">
                   <td v-for="(itemColumn, idx) in itemRow.cells" :key="tableHeaders[idx].name + idx">
                     <template v-if="tableHeaders[idx].type === 'date'">
-                      {{ readableTime(itemColumn.data) }}
-                    </template>
-                    <template
-                      v-else-if="tableHeaders[idx].name.toLowerCase() === 'namespace' && Array.isArray(itemColumn.data)"
-                    >
-                      <span
-                        >{{ truncatedNamespaces(itemColumn.data) }}
-                        <div
-                          v-if="itemColumn.data.length > 1"
-                          class="tag is-secondary is-light"
-                          @click="showFullNamespaceList(itemColumn.data)"
-                        >
-                          <a>More </a>
-                        </div></span
-                      >
+                      {{ readableTime(itemColumn.data as string) }}
                     </template>
                     <template v-else>
                       {{ itemColumn.data }}

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 };