@appscode/design-system 2.2.21 → 2.2.23

package/package.json

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

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

@@ -25,9 +25,7 @@ withDefaults(defineProps<prop>(), {
   showStar: false,
 });
 
-const AcInputText = defineAsyncComponent(
-  () => import("@appscode/design-system/vue-components/v3/form-fields/AcSingleInput.vue")
-);
+const AcInputText = defineAsyncComponent(() => import("./AcSingleInput.vue"));
 
 const model = defineModel({ type: String });
 const isLabelHoisted = ref(false);

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

@@ -0,0 +1,138 @@
+<template>
+  <div
+    ref="multiselectDivId"
+    class="multi-select-wrapper"
+    :class="{
+      multiselectCustomClass,
+      'has-refresh-button': hasRefreshBtn,
+      'is-disable': disabled || isLoaderActive,
+      'has-clear-button': allowEmpty && model,
+    }"
+    data-testid="cluster-status-select-header"
+  >
+    <label
+      v-if="label.length"
+      :class="{ 'show-label': isLabelHoisted }"
+      data-testid="ac-multiselect-label"
+      @click.prevent="onClickLabel"
+    >
+      {{ isLabelHoisted ? label : `Select ${label}` }}
+      <span v-if="showStar" class="is-required has-text-danger"> * </span>
+    </label>
+    <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
+      <i class="fa fa-times" />
+    </button>
+    <button
+      v-if="hasRefreshBtn"
+      class="button ac-button is-primary is-refresh is-transparent"
+      :class="{ spin: isLoaderActive }"
+      @click.prevent="$emit('refresh-btn-click')"
+    >
+      <i class="fa fa-refresh" />
+    </button>
+    <multiselect
+      ref="multiselectElement"
+      v-model="model"
+      :track-by="trackBy"
+      :label="showBy"
+      :class="multiselectCustomClass"
+      :options="options"
+      :placeholder="placeholderText"
+      :disabled="disabled || isLoaderActive"
+      :allow-empty="false"
+      :show-labels="false"
+      :close-on-select="true"
+      :open-direction="openDirection"
+      data-testid="simple-select-box"
+      @open="openDropDown"
+      @close="closeDropDown"
+      @select="onSelect"
+      @remove="onRemove"
+    >
+      <template #noResult>
+        <span> {{ noResultText }} </span>
+      </template>
+    </multiselect>
+    <p v-show="errorMsg" class="is-danger">
+      {{ errorMsg }}
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+interface Props {
+  errorMsg: string;
+  placeholderText: string;
+  disabled: boolean;
+  label: string;
+  allowEmpty: boolean;
+  options: unknown[];
+  trackBy: string;
+  showBy: string;
+  closeOnSelect: boolean;
+  hasRefreshBtn: boolean;
+  isLoaderActive: boolean;
+  noResultText: string;
+  showStar: boolean;
+  wrapperDivCustomClass: string;
+  multiselectCustomClass: string;
+  openDirection: "top" | "bottom";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  errorMsg: "",
+  placeholderText: "",
+  disabled: false,
+  label: "",
+  allowEmpty: false,
+  options: () => [],
+  wrapperDivCustomClass: "",
+  multiselectCustomClass: "",
+  trackBy: "",
+  showBy: "",
+  closeOnSelect: false,
+  hasRefreshBtn: false,
+  isLoaderActive: false,
+  noResultText: "",
+  showStar: false,
+  openDirection: "bottom",
+});
+
+const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
+
+const multiselectElement = ref<HTMLInputElement | null>(null);
+const multiselectDivId = ref<HTMLInputElement | null>(null);
+
+const model = defineModel<unknown>({ required: true });
+const isDropdownOpen = ref(false);
+
+const isLabelHoisted = computed(() => {
+  return props.label && ((model.value && model.value !== "") || isDropdownOpen.value);
+});
+
+const onClickLabel = () => {
+  if (multiselectElement.value) {
+    multiselectDivId.value?.focus();
+  }
+};
+
+const openDropDown = () => {
+  isDropdownOpen.value = true;
+  if (multiselectDivId.value) {
+    multiselectDivId.value.style.zIndex = "799";
+  }
+};
+
+const closeDropDown = () => {
+  isDropdownOpen.value = false;
+  if (multiselectDivId.value) {
+    multiselectDivId.value.style.zIndex = "";
+  }
+};
+
+const onRemove = (removedOption: unknown, id: string) => emit("remove", removedOption, id);
+
+const onSelect = (selectedOption: unknown, id: string) => emit("select", selectedOption, id);
+</script>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  customClass: string;
+  isCollapsible: boolean;
+  isRequired: boolean;
+  errors: Array<string>;
+  isFormHidden: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  label: "",
+  customClass: "",
+  isCollapsible: true,
+  isRequired: false,
+  errors: () => [],
+  isFormHidden: true,
+});
+defineEmits(["click"]);
+
+function formatErrors(err: Array<string>) {
+  return err.join("\n");
+}
+</script>
+
+<template>
+  <div class="nested-header mb-5" @click="$emit('click', $event)">
+    <h6 class="is-flex is-align-items-center is-normal" :class="customClass">
+      <span v-if="isCollapsible" class="collaps-icon mr-5">
+        <i class="fa" :class="[isFormHidden ? 'fa-plus' : 'fa-minus']" aria-hidden="true" />
+      </span>
+      {{ label }}
+      <b v-if="isRequired" class="ml-5 has-text-danger"> * </b>
+      <span
+        v-show="errors.length"
+        class="has-text-danger has-text-weight-normal is-italic ml-5 is-size-6"
+        :title="formatErrors(errors)"
+      >
+        <i class="fa fa-exclamation-triangle" aria-hidden="true" />
+        {{ errors.length === 1 ? errors[0] : `Error in ${errors.length} fields` }}
+      </span>
+    </h6>
+  </div>
+</template>

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

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+import type { AcTableCol, AcTableRow } from "../../types/table";
+import FluentSave28Regular from "~icons/fluent/save-28-regular";
+import HeroiconsXMark20Solid from "~icons/heroicons/x-mark-20-solid";
+import HeroiconsPlus from "~icons/heroicons/plus";
+import HeroiconsPencilSquare from "~icons/heroicons/pencil-square";
+import HeroiconsTrash from "~icons/heroicons/trash";
+import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
+import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
+
+interface Props {
+  disabled?: boolean;
+  isCreateDisabled?: boolean;
+  label: string;
+  isCollapsible?: boolean;
+  isRequired?: boolean;
+  errors?: Array<string>;
+  tableHeaders: Array<AcTableCol>;
+  isExpandable?: boolean;
+  isEditable?: boolean;
+  saveEditedItem?: Function;
+  clearAllFields?: Function;
+  updateEditFields?: Function;
+  saveNewItem?: Function;
+  onDeleteItem: Function;
+}
+
+const prop = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  isCreateDisabled: false,
+  label: "",
+  isCollapsible: true,
+  isRequired: false,
+  errors: () => [],
+  isExpandable: false,
+  isEditable: true,
+  saveNewItem: () => () => ({}),
+  clearAllFields: () => () => ({}),
+  updateEditFields: () => () => ({}),
+  saveEditedItem: () => () => ({}),
+  onDeleteItem: () => () => ({}),
+});
+
+const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
+
+const expandableFieldIndex = ref(-1);
+const editFieldIndex = ref(-1);
+const isFormHidden = ref(true);
+const isSavingNewElement = ref(false);
+const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
+
+function onAddClick() {
+  isSavingNewElement.value = true;
+  isFormHidden.value = false;
+  prop.clearAllFields();
+}
+
+function onSaveItem() {
+  prop.saveNewItem();
+  resetAllData();
+}
+
+function onSaveEditedItem(row: number) {
+  prop.saveEditedItem(row);
+  resetAllData();
+}
+
+function resetAllData() {
+  expandableFieldIndex.value = -1;
+  editFieldIndex.value = -1;
+  isSavingNewElement.value = false;
+  prop.clearAllFields();
+}
+
+function onEditClick(row: number) {
+  prop.updateEditFields(row);
+  editFieldIndex.value = row;
+  expandableFieldIndex.value = -1;
+}
+
+function onDetailsClick(row: number) {
+  if (expandableFieldIndex.value === row) expandableFieldIndex.value = -1;
+  else expandableFieldIndex.value = row;
+  editFieldIndex.value = -1;
+}
+
+function readableTime(utcTime: string) {
+  return new Date(utcTime).toLocaleString();
+}
+</script>
+
+<template>
+  <div :class="{ 'ac-nested-elements': label }">
+    <!-- Add New Form Start -->
+    <template v-if="isSavingNewElement">
+      <div class="is-flex is-aligned-item-center is-justify-content-space-between">
+        <accordion
+          :label="`New ${label}`"
+          :isCollapsible="isCollapsible"
+          :isRequired="isRequired"
+          :errors="errors"
+          :isFormHidden="isFormHidden"
+          @click="isFormHidden = !isFormHidden"
+        />
+        <div class="buttons pb-5">
+          <!-- save button start -->
+          <button
+            class="button ac-button is-small is-primary is-light"
+            :disabled="disabled ? true : false"
+            data-testid="single-step-form-array-item-save-button"
+            title="Save"
+            @click.prevent="onSaveItem()"
+          >
+            <span class="icon"><FluentSave28Regular /></span>
+          </button>
+          <!-- save button end -->
+          <!-- CLOSE button start -->
+          <button
+            class="button ac-button is-small is-danger is-light"
+            data-testid="single-step-form-array-item-close-button"
+            @click.prevent="resetAllData()"
+          >
+            <span class="icon"><HeroiconsXMark20Solid /></span>
+          </button>
+          <!-- CLOSE button end -->
+        </div>
+      </div>
+      <div
+        class="nested-body"
+        :class="{
+          'is-hidden': isFormHidden,
+        }"
+      >
+        <slot name="create-form" />
+      </div>
+    </template>
+    <!-- Add New Form End -->
+
+    <!-- Label and Add New Button Start -->
+    <template v-else>
+      <div class="is-flex is-aligned-item-center is-justify-content-space-between">
+        <accordion
+          :label="label"
+          :isCollapsible="isCollapsible"
+          :isRequired="isRequired"
+          :errors="errors"
+          :isFormHidden="isFormHidden"
+          @click="isFormHidden = !isFormHidden"
+        />
+        <button
+          v-if="!disabled && !isCreateDisabled"
+          class="button ac-button is-primary is-light is-outlined"
+          data-testid="single-step-form-array-item-create-button"
+          @click.prevent="onAddClick()"
+        >
+          <span class="icon"><HeroiconsPlus /> </span><span>Add New</span>
+        </button>
+      </div>
+      <!-- Label and Add New Button End -->
+
+      <!-- Data Table and Edit Form Start -->
+      <div
+        :class="{
+          'nested-body': label,
+          'is-hidden': isFormHidden,
+        }"
+      >
+        <!-- existing element start -->
+
+        <div v-if="dataForTable.length" class="ac-table-container table-container my-4">
+          <table class="table ac-table ac-striped is-fullwidth" data-testid="ac-table">
+            <thead>
+              <tr>
+                <th v-for="(item, idx) in tableHeaders" :key="idx + item.name">
+                  {{ item.name }}
+                </th>
+                <th class="has-text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="(itemRow, idxRow) in dataForTable" :key="idxRow">
+                <tr data-testid="ac-table-row">
+                  <td v-for="(itemColumn, idx) in itemRow.cells" :key="itemColumn.data as string + idx">
+                    <template v-if="tableHeaders[idx].type === 'date'">
+                      {{ readableTime(itemColumn.data as string) }}
+                    </template>
+                    <template v-else>
+                      {{ itemColumn.data }}
+                    </template>
+                  </td>
+                  <!-- Action Buttons Start -->
+                  <td>
+                    <div class="buttons is-justify-content-flex-end">
+                      <button
+                        v-if="!disabled && isEditable"
+                        class="button ac-button has-text-primary is-small"
+                        title="Edit"
+                        data-testid="single-step-form-array-item-edit-button"
+                        @click.prevent="onEditClick(idxRow)"
+                      >
+                        <span class="icon"> <HeroiconsPencilSquare /> </span>
+                      </button>
+
+                      <button
+                        v-if="!disabled"
+                        title="Delete"
+                        class="button ac-button has-text-danger is-small"
+                        data-testid="single-step-form-array-item-delete-button"
+                        @click.prevent="onDeleteItem(idxRow)"
+                      >
+                        <span class="icon"> <HeroiconsTrash /> </span>
+                      </button>
+
+                      <button
+                        v-if="isExpandable"
+                        class="button ac-button is-small"
+                        title="Expand"
+                        data-testid="single-step-form-array-item-show-details-button"
+                        @click.prevent="onDetailsClick(idxRow)"
+                      >
+                        <span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
+
+                        <span v-else class="icon"><HeroiconsChevronDownSolid /></span>
+                      </button>
+                    </div>
+                  </td>
+                  <!-- Action Button End -->
+                </tr>
+                <!-- Edit Form Start -->
+                <tr v-if="editFieldIndex === idxRow" style="background-color: #f8f8f8">
+                  <td :colspan="itemRow.cells.length + 1">
+                    <!-- nested elements start  -->
+                    <div class="mt-15 mb-15 is-flex is-aligned-item-center is-justify-content-space-between">
+                      <accordion :label="`Edit ${label}`" :is-collapsible="false" />
+                      <div class="buttons pb-5">
+                        <!-- save button start -->
+                        <button
+                          class="button ac-button is-small is-outlined is-light is-primary"
+                          :disabled="disabled ? true : false"
+                          data-testid="single-step-form-array-item-save-button"
+                          @click.prevent="onSaveEditedItem(idxRow)"
+                        >
+                          <span class="icon"> <FluentSave28Regular /> </span>
+                        </button>
+                        <!-- save button end -->
+                        <!-- close button start -->
+                        <button
+                          class="button ac-button is-small is-outlined is-light is-danger"
+                          data-testid="single-step-form-array-item-close-button"
+                          @click.prevent="resetAllData()"
+                        >
+                          <span class="icon"> <HeroiconsXMark20Solid /> </span>
+                        </button>
+                        <!-- close button end -->
+                      </div>
+                    </div>
+                    <div class="">
+                      <slot name="edit-form" />
+                    </div>
+                  </td>
+                </tr>
+                <!-- Edit Form End -->
+
+                <!-- Show Details Table Start -->
+                <tr v-if="expandableFieldIndex === idxRow" style="background-color: #f8f8f8">
+                  <td :colspan="itemRow.cells.length + 1">
+                    <slot name="row-details" />
+                  </td>
+                </tr>
+                <!-- Show Details Table End -->
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div v-else class="label-action is-flex is-flex-wrap-wrap mb-5">
+          <strong> No Item Found. </strong>
+        </div>
+        <!-- existing element end -->
+      </div>
+      <!-- Data Table and Edit Form End -->
+    </template>
+  </div>
+</template>