@appscode/design-system 2.2.65 → 2.2.67-alpha

package/vue-components/v3/code-preview/CodeBlock.vue

@@ -1,28 +1,39 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { ref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import AcButton from "../button/Button.vue";
 
 interface Props {
   spacing?: string;
   downloadBtn?: boolean;
+  code?: string;
   copyBtn?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   spacing: "pr-48",
   downloadBtn: false,
+  code: "",
   copyBtn: true,
 });
 
-const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+const source = ref(props.code);
+
+const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 <template>
   <div class="code-container p-0">
     <pre class="ac-hscrollbar" :class="spacing">
-      <slot name="code"/>
+     {{ code }}
     </pre>
     <div class="buttons">
       <ac-button v-if="downloadBtn" modifier-classes="is-primary small-button" icon-class="download" />
-      <ac-button v-if="copyBtn" modifier-classes="is-primary small-button" icon-class="copy" />
+      <ac-button
+        v-if="copyBtn"
+        :modifier-classes="'is-primary small-button'"
+        :icon-class="copied ? 'check' : 'copy'"
+        @click="copy()"
+      />
     </div>
   </div>
 </template>

package/vue-components/v3/code-preview/CodeGroup.vue

@@ -1,32 +1,37 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { ref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import AcButton from "../button/Button.vue";
 
 interface Props {
   spacing?: string;
   copyBtn?: boolean;
+  code?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   spacing: "pr-48",
   copyBtn: true,
+  code: "",
 });
-
-const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+const source = ref(props.code);
+const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 <template>
   <div class="code-container p-0 b-1 is-rounded-4">
     <div class="head is-flex is-justify-content-space-between is-align-items-center pt-7 px-4 b-b-1">
       <div><slot name="left" /></div>
       <ac-button
-        title="Copy"
+        :title="copied ? '' : 'Copy'"
         v-if="copyBtn"
         data-testid="kubeconfig-copy-button"
-        modifier-classes="is-outlined small-button mb-6"
-        icon-class="copy"
+        :modifier-classes="`is-outlined small-button mb-6 `"
+        :icon-class="copied ? 'check' : 'copy'"
+        @click="copy()"
       />
     </div>
     <pre class="ac-hscrollbar is-border-none">
-      <slot name="code"/>
+     {{ code }}
     </pre>
   </div>
 </template>

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -79,7 +79,7 @@ watch(
         }, 200);
       }
     }
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/Editor.vue

@@ -90,7 +90,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 
 watch(
@@ -102,7 +102,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -100,14 +100,14 @@ watch(
   {
     immediate: true,
     deep: true,
-  }
+  },
 );
 
 watch(
   () => props.toggleHideValue,
   (n) => {
     hideValue.value = n;
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/MonacoEditor.vue

@@ -59,7 +59,7 @@ export default defineComponent({
     // remove the schema
     if (this.$monacoValidationOptions) {
       this.$monacoValidationOptions.schemas = this.$monacoValidationOptions.schemas.filter(
-        (schema) => !schema.fileMatch.includes(this.modelId)
+        (schema) => !schema.fileMatch.includes(this.modelId),
       );
     }
     // dispose editor

package/vue-components/v3/editor/ResourceKeyValueEditor.vue

@@ -60,7 +60,7 @@ watch(
   (n) => {
     emit("activeKey", n);
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -56,7 +56,7 @@ watch(
   (n) => {
     if (n) triggerInput();
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -53,7 +53,7 @@ watch(
   (n) => {
     if (n) triggerInput();
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -19,18 +19,14 @@ 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 v-for="option in options" :key="name + option.label" class="mb-8">
+    <label class="ac-checkbox" :for="name + option.label">
+      <input :class="modifierClasses" :id="name + option.label" :value="option.value" type="checkbox" v-model="model" />
+      <span class="checkmark"></span>
+      <span>{{ option.label }}</span>
+    </label>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -18,10 +18,9 @@ const model = defineModel();
 </script>
 
 <template>
-  <div v-for="option in options" :key="name + option.label" class="field">
+  <div class="ac-radio" v-for="option in options" :key="name + option.label">
     <input
       v-model="model"
-      class="is-checkradio"
       :class="modifierClasses"
       :id="name + option.label"
       type="radio"
@@ -34,7 +33,7 @@ const model = defineModel();
       <slot name="message" />
     </p>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface prop {
+  multiselect?: boolean;
+  custom?: boolean;
+  group?: boolean;
+  isOpen?: boolean;
+}
+
+withDefaults(defineProps<prop>(), {
+  multiselect: false,
+  custom: false,
+  isOpen: false,
+});
+
+const AcButtons = defineAsyncComponent(() => import("../button/Buttons.vue"));
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+
+const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
+const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
+const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
+</script>
+
+<template>
+  <!-- add dynamic 'z-index', use 'is-open' for show hide options -->
+  <div class="ac-single-input is-small is-selectbox" :class="[isOpen ? 'is-open' : '']" style="z-index: 2">
+    <!-- add 'show-label' class for move top -->
+    <label for="custom-select" class="ac-label show-label">Select Option</label>
+    <input type="text" value="Select" />
+
+    <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-info is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-secondary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-clickable">+3</span>
+        </div>
+      </div>
+    </div>
+
+    <ac-buttons>
+      <button class="button ac-button is-white">
+        <ArrowDownIcon />
+      </button>
+
+      <ac-button modifier-classes="is-white">
+        <RefreshIcon class="is-spin" />
+      </ac-button>
+
+      <ac-button modifier-classes="is-white">
+        <CloseIcon style="rotate: 180deg" />
+      </ac-button>
+    </ac-buttons>
+
+    <ul v-if="group" class="options group">
+      <li v-for="i in 2" :key="i">
+        <strong>Group one</strong>
+        <ul>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-five" />
+            <label for="opt-five">Select option five</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-six" checked />
+            <label for="opt-six">Select option six</label>
+          </li>
+          <li class="is-disabled">
+            <input v-if="multiselect" type="checkbox" name="" id="opt-seven" />
+            <label for="opt-seven">Select option seven</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-eight" />
+            <label for="opt-eight">Select option eight</label>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div v-else-if="custom" class="custom-select options">
+      <slot />
+    </div>
+
+    <ul v-else class="options">
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-one" />
+        <label for="opt-one">Select option one</label>
+      </li>
+      <li class="is-active">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-two" />
+        <label for="opt-two">Select option Two</label>
+      </li>
+      <li class="is-disabled">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-three" />
+        <label for="opt-three">Select option three</label>
+      </li>
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-four" />
+        <label for="opt-four">Select option four</label>
+      </li>
+    </ul>
+  </div>
+  <!-- <single-input /> -->
+</template>

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

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="input-container">
+      <AcInput v-model="newItem" @keyup.enter="addItem" :placeholderText="placeholderText" class="input-field" />
+      <AcButton @click="addItem">Add</AcButton>
+    </div>
+    <transition-group name="list" tag="ul" class="item-list">
+      <li v-for="(item, index) in items" :key="item" class="list-item">
+        <span>{{ item }}</span>
+        <AcButton @click="removeItem(index)" class="remove-button">&times;</AcButton>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import AcInput from "./AcInput.vue";
+import AcButton from "../button/Button.vue";
+
+withDefaults(
+  defineProps<{
+    placeholderText?: string;
+  }>(),
+  { placeholderText: "Enter a New Item" },
+);
+
+const newItem = ref("");
+const items = ref<string[]>([]);
+
+const emit = defineEmits<{
+  (e: "update:items", value: string[]): void;
+}>();
+
+const addItem = () => {
+  if (newItem.value.trim()) {
+    items.value.unshift(newItem.value.trim());
+    newItem.value = "";
+    emit("update:items", items.value);
+  }
+};
+
+const removeItem = (index: number) => {
+  items.value.splice(index, 1);
+  emit("update:items", items.value);
+};
+</script>
+
+<style scoped>
+.title {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.input-field {
+  border-radius: 8px;
+  transition: border-color 0.3s;
+  margin-right: 8px;
+  width: 100%;
+}
+.input-container {
+  display: flex;
+}
+
+.item-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background-color: #ecf0f1;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.list-item:hover {
+  background-color: #e0e6e8;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.remove-button {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+}
+
+.remove-button:hover {
+  background-color: #c0392b;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s;
+}
+.list-enter,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

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

@@ -18,17 +18,21 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="field">
-    <input
-      v-model="model"
-      :id="name"
-      type="checkbox"
-      :name="name"
-      class="switch is-rounded is-primary"
-      :class="modifierClasses"
-      :data-testid="dataTestId"
-    />
+  <div class="ac-switch is-flex is-align-items-center gap-8">
     <label :for="name">{{ label }}</label>
+    <label class="switch">
+      <input
+        v-model="model"
+        :id="name"
+        type="checkbox"
+        :name="name"
+        class="switch is-rounded is-primary"
+        :class="modifierClasses"
+        :data-testid="dataTestId"
+      />
+      <span class="slider round"></span>
+    </label>
+
     <p v-show="errorMsg" class="is-danger">
       {{ errorMsg }}
     </p>

package/vue-components/v3/icons/ArrowDownIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+  </svg>
+</template>

package/vue-components/v3/icons/CloseIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    height="16px"
+    width="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+  </svg>
+</template>

package/vue-components/v3/icons/RefreshIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+</template>

package/vue-components/v3/modal/DialogModal.vue

@@ -50,7 +50,7 @@ watch(
     } else {
       destroyModal();
     }
-  }
+  },
 );
 
 const handleBackdropClick = (event: MouseEvent) => {

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

@@ -25,10 +25,10 @@ function clickEvent() {
 const route = useRoute();
 watch(
   () => route.fullPath,
-  (n) => {
+  () => {
     isActive.value = "";
     emit("onRouteChange");
-  }
+  },
 );
 onClickOutside(navbarItem, () => {
   isActive.value = "";

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

@@ -12,7 +12,7 @@ withDefaults(
   {
     notifications: () => [],
     unreadNotification: 0,
-  }
+  },
 );
 function notificationTime(time: number) {
   return TimeConvert.getDayDifferences({ past: time });

package/vue-components/v3/pagination/Pagination.vue

@@ -103,7 +103,7 @@ watch(
   {
     deep: true,
     immediate: true,
-  }
+  },
 );
 </script>
 

package/vue-components/v3/sidebar/AccentColorPicker.vue

@@ -63,7 +63,7 @@ watch(
       document.documentElement.style.setProperty("--hsl-lightness", lightness);
     });
   },
-  { deep: true }
+  { deep: true },
 );
 
 watch(
@@ -76,7 +76,7 @@ watch(
       document.documentElement.style.setProperty("--font-hsl-lightness", lightness);
     });
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
 

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -32,7 +32,7 @@ watch(
   (n) => {
     selectedClusterName.value = n;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(selectedCluster, (n) => {
@@ -62,7 +62,7 @@ watch(
         return selectedClusterName.value === item.name;
       }) || null;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 </script>
 

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -38,7 +38,7 @@ watch(
       });
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -22,7 +22,7 @@ watch(
       dropDownStatus.value = "open";
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const toggleDropDownStatus = () => {

package/vue-components/v3/table/InfoTable.vue

@@ -53,7 +53,7 @@ const isFullTableLoaderActive = computed(() => {
         }"
       >
         <template v-if="!isTableEmpty">
-          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="(tableHeader as string)">
+          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="tableHeader as string">
             <table-cell>
               <span class="is-flex is-align-items-center">
                 <slot :name="`table-cell-icon-${idx}`" />

package/vue-components/v3/table/MultiInfoTable.vue

@@ -58,7 +58,7 @@ watch(
         }
       });
     }
-  }
+  },
 );
 </script>