@appscode/design-system 2.17.25 → 2.17.26-alpha-1

package/vue-components/v3/config-secret/ConfigSecret.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const InfoLightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/InfoLightIcon.vue"));
+
+import CustomSelect from "@/components/vue-components/v3/form-fields/CustomSelect.vue";
+import CodeGroup from "@/components/vue-components/v3/code-preview/CodeGroup.vue";
+</script>
+<template>
+  <SectionContent class="mt-24" :custom="true">
+    <template #custom-header>
+      <div class="tabs ac-tabs" style="margin: -8px -16px">
+        <ul>
+          <li class="is-active"><a href="#">NEW CONFIG SECRET</a></li>
+          <li><a href="#">APPLY CONFIG</a></li>
+          <li><a href="#">REMOVE</a></li>
+        </ul>
+      </div>
+    </template>
+    <template #section-body>
+      <h5>Config Secret</h5>
+      <p>Select a configuration secret from the available list to update your database settings</p>
+      <CustomSelect :multiselect="false" class="mt-16 mb-0 width-300" />
+
+      <p>You have selected <strong>db_config</strong> secret</p>
+      <code-group code="code here">
+        <template #left>
+          <h5>Value *</h5>
+        </template>
+      </code-group>
+
+      <br />
+
+      <div class="is-flex gap-8 file-explore">
+        <div class="left-content content-sidebar">
+          <ul>
+            <li class="is-active"><a href="#">db_config</a></li>
+            <li><a href="#">user.conf</a></li>
+            <li><a href="#">mongod.conf</a></li>
+          </ul>
+          <AlertMessage modifier-classes="is-info" class="mt-8">
+            <template #icon>
+              <InfoLightIcon />
+            </template>
+            <template #custom-text>
+              <p>Kubedb er <a href="#">link</a> asbe for config secret</p>
+            </template>
+          </AlertMessage>
+        </div>
+        <div class="right-content">
+          <code-group code="code here">
+            <template #left>
+              <h5>Value *</h5>
+            </template>
+          </code-group>
+        </div>
+      </div>
+    </template>
+  </SectionContent>
+</template>

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

@@ -15,7 +15,7 @@ interface Props {
     schema?: Record<string, unknown>;
     uri: string;
   };
-  needsUpdateOnChange?: boolean
+  needsUpdateOnChange?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   editorTheme: "",
   wordWrap: "on",
   validation: () => ({ uri: "" }),
-  needsUpdateOnChange: false
+  needsUpdateOnChange: false,
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -65,8 +65,7 @@ const theme = computed(() => {
 const onChange = (e: Event) => {
   if (typeof e === "string") {
     editorContent.value = e;
-    if(props.needsUpdateOnChange)
-     emit("update:modelValue", e);
+    if (props.needsUpdateOnChange) emit("update:modelValue", e);
   }
 };
 

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

@@ -1,11 +1,22 @@
 <script setup lang="ts">
+import ArrowIcon from "../icons/ArrowIcon.vue";
 interface Props {
   modifierClasses?: string;
+  type?: string;
+  hasModifierBtn?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
+  type: "",
+  hasModifierBtn: false,
 });
+
+const emit = defineEmits(["updateCount"]);
+
+function changes(value: number) {
+  emit("updateCount", value);
+}
 </script>
 
 <template>
@@ -15,6 +26,15 @@ withDefaults(defineProps<Props>(), {
     <slot />
     <slot name="eye-switcher" />
     <slot name="error" />
+
+    <div class="up-down-btns" v-if="hasModifierBtn">
+      <button class="arrow-up" title="Button Up" @click="changes(1)">
+        <ArrowIcon direction="down" />
+      </button>
+      <button class="arrow-down" title="Button Down" @click="changes(-1)">
+        <ArrowIcon />
+      </button>
+    </div>
   </div>
 </template>
 

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

@@ -12,6 +12,7 @@ interface Props {
   errorMsg?: string;
   isRow?: boolean;
   hasDescription?: boolean;
+  ellipsis?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   errorMsg: "",
   isRow: false,
   hasDescription: false,
+  ellipsis: "is-ellipsis-2",
 });
 const includeSelectedClass = (optionValue: unknown) => {
   return props.hasDescription && JSON.stringify(model.value) === JSON.stringify(optionValue);
@@ -62,7 +64,7 @@ const bodyClass = computed(() => {
       <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">
+      <p v-if="hasDescription" class="mt-8" :class="ellipsis" :title="option.description">
         {{ option.description }}
       </p>
       <p v-show="errorMsg" class="has-text-danger mb-16">

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

@@ -0,0 +1,8 @@
+<template>
+  <svg width="6" height="45" viewBox="0 0 6 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.5 1C3.5 0.723858 3.27614 0.5 3 0.5C2.72386 0.5 2.5 0.723858 2.5 1H3.5ZM3 45L5.88675 40H0.113249L3 45ZM3 1H2.5V40.5H3H3.5V1H3Z"
+      fill="#CBD5E1"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from Huge Icons by Hugeicons - undefined -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M20 12H4m11 5s5-3.682 5-5s-5-5-5-5"
+      color="currentColor"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+    <!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      color="currentColor"
+    >
+      <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10" />
+      <path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009" />
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M152 96h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8m-8 48h-32v-32h32Zm88 0h-16v-32h16a8 8 0 0 0 0-16h-16V56a16 16 0 0 0-16-16h-40V24a8 8 0 0 0-16 0v16h-32V24a8 8 0 0 0-16 0v16H56a16 16 0 0 0-16 16v40H24a8 8 0 0 0 0 16h16v32H24a8 8 0 0 0 0 16h16v40a16 16 0 0 0 16 16h40v16a8 8 0 0 0 16 0v-16h32v16a8 8 0 0 0 16 0v-16h40a16 16 0 0 0 16-16v-40h16a8 8 0 0 0 0-16m-32 56H56V56h144z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M232 56H24A16 16 0 0 0 8 72v128a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0V72a16 16 0 0 0-16-16M24 72h208v96H24Zm88 80a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8H48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8Zm-56-48h48v32H56Zm88 48h64a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8m8-48h48v32h-48Z"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/StorageIcon-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
+    <!-- Icon from OpenSearch UI by OpenSearch Contributors - https://github.com/opensearch-project/oui/blob/main/LICENSE.txt -->
+    <g fill="currentColor" fill-rule="evenodd" transform="translate(0 2)">
+      <path
+        fill-rule="nonzero"
+        d="M2 6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1zm13 2v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1m1-3V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v3c0 .601.271 1.133.69 1.5C.271 6.867 0 7.399 0 8v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8c0-.601-.271-1.133-.689-1.5c.418-.367.689-.899.689-1.5"
+      />
+      <circle cx="4.5" cy="9.5" r="1.5" />
+      <circle cx="4.5" cy="3.5" r="1.5" />
+      <path d="M12 8h1v3h-1zm-2 0h1v3h-1zm2-6h1v3h-1zm-2 0h1v3h-1z" />
+    </g>
+  </svg>
+</template>

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

@@ -131,7 +131,7 @@ const handleClick = (name: string) => {
           <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
             <ul class="ac-scrollbar p-0 app-drawer">
               <li v-for="app in filteredAppList" :key="app.url">
-                <a :href="app.url" target="_blank" @click="handleClick(app.name)">
+                <a :href="app.url" @click="handleClick(app.name)">
                   <article class="media">
                     <figure class="media-left">
                       <p class="image">

package/vue-components/v3/node-selection/NodeSelection.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+const AcSelect = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/AcSelect.vue"));
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+
+interface Props {
+  sectionTitle?: string;
+  policyTitle?: string;
+  policyDescription?: string;
+  policyOptions: Array<{ name: string; id?: string }>;
+  hasInfo?: boolean;
+  infoMessage?: string;
+  topologyTitle?: string;
+  topologyDescription?: string;
+  topologyKey: string;
+  topologyValue: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  hasInfo: false,
+  infoMessage: "",
+});
+
+const machine = ref("");
+</script>
+
+<template>
+  <SectionContent :title="sectionTitle" :class="modifierClasses">
+    <template #section-body>
+      <div class="columns" style="align-items: end">
+        <div class="column is-6">
+          <h6>{{ policyTitle }}</h6>
+          <p>{{ policyDescription }}</p>
+          <AcSelect
+            v-model="machine"
+            :options="policyOptions"
+            :label="policyTitle"
+            group-label="language"
+            show-by="name"
+          />
+        </div>
+        <div v-if="hasInfo" class="column is-6">
+          <AlertMessage modifier-classes="is-info">
+            <template #custom-text>
+              <p><strong>Label Selector:</strong> {{ infoMessage }}</p>
+            </template>
+          </AlertMessage>
+        </div>
+      </div>
+      <div class="columns is-multiline">
+        <div class="column is-12">
+          <h6>{{ topologyTitle }}</h6>
+          <p class="mb-0">{{ topologyDescription }}</p>
+        </div>
+        <div class="column is-6">
+          <ac-single-input>
+            <label for="email" class="ac-label is-required show-label">Key </label>
+            <input id="Key" name="Key" type="Key" class="ac-input bg-white" :placeholder="topologyKey" disabled />
+          </ac-single-input>
+        </div>
+        <div class="column is-6">
+          <ac-single-input>
+            <label for="Value" class="ac-label is-required show-label">Value </label>
+            <input
+              id="Value"
+              name="Value"
+              type="Value"
+              class="ac-input bg-white"
+              :placeholder="topologyValue"
+              disabled
+            />
+          </ac-single-input>
+        </div>
+      </div>
+    </template>
+  </SectionContent>
+</template>

package/vue-components/v3/postgres/Postgres.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+import ScalingRules from "../scaling-rules/ScalingRules.vue";
+import UsageThreshold from "../threshold/UsageThreshold.vue";
+
+const threshold = ref(10);
+</script>
+<template>
+  <SectionContent title="Postgres" class="mt-24">
+    <template #section-body>
+      <UsageThreshold
+        title="Usage Threshold (%)"
+        subtitle="Set the threshold percentage of storage usage to trigger scaling."
+        v-model="threshold"
+        :min-range="0"
+        :max-range="100"
+      />
+
+      <ScalingRules
+        title="Scaling Rules"
+        :initialStorage="'100Gi'"
+        :rules="[
+          { percent: '20%', size: '500Gi', role: '1st role', showAddButton: true, showSaveDeleteButtons: false },
+          { percent: '10%', size: '2000Gi', showAddButton: false, showSaveDeleteButtons: true },
+        ]"
+        @add-role="$emit('add-role')"
+        @save="$emit('save')"
+        @delete="$emit('delete')"
+      />
+    </template>
+  </SectionContent>
+</template>

package/vue-components/v3/replica-set/MachineProfile.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+const AcSelect = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/AcSelect.vue"));
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+const ArrowRightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/ArrowRightIcon.vue"));
+const MachineCpuIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/MachineCpuIcon.vue"));
+const MachineMemoryIcon = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/icons/MachineMemoryIcon.vue"),
+);
+
+interface Props {
+  sectionTitle: string;
+  leftHeader?: string;
+  rightHeader?: string;
+  optionsTitle?: string;
+  currentOption: string;
+  newOptions: Array<{ name: string; id?: string }>;
+  currentCpu?: string;
+  currentMemory?: string;
+  newCpu?: string;
+  newMemory?: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  leftHeader: "",
+  rightHeader: "",
+  optionsTitle: "",
+  currentCpu: "",
+  currentMemory: "",
+  newCpu: "",
+  newMemory: "",
+});
+
+const machine = ref("");
+</script>
+<template>
+  <SectionContent :title="sectionTitle" :is-expandable="true" :class="modifierClasses">
+    <template #section-body>
+      <div class="is-flex is-align-items-center gap-4">
+        <SectionContent :custom="true" class="single-machine">
+          <template #custom-header>
+            <h6>{{ leftHeader }}</h6>
+          </template>
+          <template #section-body>
+            <ac-single-input>
+              <label for="email" class="ac-label is-required show-label">{{ optionsTitle }} </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                class="ac-input bg-white"
+                :placeholder="currentOption"
+                disabled
+              />
+            </ac-single-input>
+            <div class="is-flex gap-12">
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineCpuIcon />
+                </span>
+                <span>{{ currentCpu }} CPU</span>
+              </p>
+
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineMemoryIcon />
+                </span>
+                <span>{{ currentMemory }} Memory</span>
+              </p>
+            </div>
+          </template>
+        </SectionContent>
+        <div class="arrow-right-icon">
+          <ArrowRightIcon />
+        </div>
+        <SectionContent :custom="true" class="single-machine">
+          <template #custom-header>
+            <h6>{{ rightHeader }}</h6>
+          </template>
+          <template #section-body>
+            <AcSelect
+              v-model="machine"
+              :options="newOptions"
+              label="Machine"
+              group-label="language"
+              show-by="name"
+              track-by="name"
+            />
+            <div class="is-flex gap-12">
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineCpuIcon />
+                </span>
+                <span>{{ newCpu }} CPU</span>
+              </p>
+
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineMemoryIcon />
+                </span>
+                <span>{{ newMemory }} Memory</span>
+              </p>
+            </div>
+          </template>
+        </SectionContent>
+      </div>
+    </template>
+  </SectionContent>
+</template>
+
+<style lang="scss">
+.single-machine {
+  min-width: 300px;
+}
+</style>

package/vue-components/v3/replica-set/MultiMachineProfile.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const AcSelect = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/AcSelect.vue"));
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+const ArrowRightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/ArrowRightIcon.vue"));
+const MachineCpuIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/MachineCpuIcon.vue"));
+const MachineMemoryIcon = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/icons/MachineMemoryIcon.vue"),
+);
+
+interface item {
+  title?: string;
+  optionsTitle?: string;
+  currentOption: string;
+  newOptions: Array<{ name: string; id?: string }>;
+  currentCpu?: string;
+  currentMemory?: string;
+  newCpu?: string;
+  newMemory?: string;
+}
+interface Props {
+  items: item[];
+  modifierClasses?: string;
+}
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+const machines = ref<string[]>([]);
+</script>
+
+<template>
+  <div class="is-flex gap-4" :class="modifierClasses">
+    <div class="card-group mt-24" v-for="(item, index) in items" :key="index">
+      <h6 class="card-label">{{ item.title }}</h6>
+      <div class="is-flex">
+        <div class="card-content p-8 is-flex is-align-items-center gap-8">
+          <div class="has-background-white p-16 is-rounded-4">
+            <ac-single-input>
+              <label for="email" class="ac-label is-required show-label">{{ item.optionsTitle }} </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                class="ac-input bg-white"
+                :placeholder="item.currentOption"
+                disabled
+              />
+            </ac-single-input>
+            <div class="is-flex gap-12">
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineCpuIcon />
+                </span>
+                <span class="is-whitespace-nowrap">{{ item.currentCpu }} CPU</span>
+              </p>
+
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineMemoryIcon />
+                </span>
+                <span class="is-whitespace-nowrap">{{ item.currentMemory }} Memory</span>
+              </p>
+            </div>
+          </div>
+          <div class="arrow-right-icon">
+            <ArrowRightIcon />
+          </div>
+
+          <div class="has-background-white p-16 is-rounded-4">
+            <AcSelect
+              v-model="machines[index]"
+              :options="item.newOptions"
+              :label="item.optionsTitle"
+              group-label="language"
+              show-by="name"
+              class="mb-16"
+            />
+            <div class="is-flex gap-12">
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineCpuIcon />
+                </span>
+                <span class="is-whitespace-nowrap">{{ item.newCpu }} CPU</span>
+              </p>
+
+              <p class="is-flex gap-4">
+                <span class="icon">
+                  <MachineMemoryIcon />
+                </span>
+                <span class="is-whitespace-nowrap">{{ item.newMemory }} Memory</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/vue-components/v3/replica-set/UpgradeSet.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+const ArrowRightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/ArrowRightIcon.vue"));
+
+interface Props {
+  title?: string;
+  description?: string;
+  currentInputTitle?: string;
+  newInputTitle?: string;
+  currentValue: string;
+  modifierClasses?: string;
+}
+withDefaults(defineProps<Props>(), {});
+const newValue = ref("");
+</script>
+<template>
+  <div :class="modifierClasses">
+    <h6>{{ title }}</h6>
+    <p>{{ description }}</p>
+
+    <div class="is-flex">
+      <ac-single-input>
+        <label for="Value" class="ac-label is-required show-label">{{ currentInputTitle }}</label>
+        <input class="ac-input" :placeholder="currentValue" disabled />
+      </ac-single-input>
+
+      <div class="arrow-right-icon">
+        <ArrowRightIcon />
+      </div>
+
+      <ac-single-input>
+        <label for="Value" class="ac-label is-required show-label">{{ newInputTitle }}</label>
+        <input v-model="newValue" class="ac-input" :placeholder="currentValue" />
+      </ac-single-input>
+    </div>
+  </div>
+</template>