@appscode/design-system 2.17.26-alpha → 2.17.27

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

@@ -1,119 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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>

package/vue-components/v3/scaling-rules/ScalingRules.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-import InfoLightIcon from "@/components/vue-components/v3/icons/InfoLightIcon.vue";
-import CrossIcon from "@/components/vue-components/v3/icons/CrossIcon.vue";
-
-const StorageIcon2 = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/StorageIcon-2.vue"));
-const ArrowDownLongIcon = defineAsyncComponent(
-  () => import("@/components/vue-components/v3/icons/ArrowDownLongIcon.vue"),
-);
-
-interface Props {
-  title?: string;
-  initialStorage?: string;
-  rules: {
-    percent?: string;
-    size?: string;
-    role?: string;
-    showAddButton?: boolean;
-    showSaveDeleteButtons?: boolean;
-  }[];
-}
-
-withDefaults(defineProps<Props>(), {
-  title: "",
-  initialStorage: "",
-  rules: () => [],
-});
-
-const emit = defineEmits(["add-role", "save", "delete"]);
-
-function addRole() {
-  emit("add-role");
-}
-
-function saveRules() {
-  emit("save");
-}
-
-function deleteRule() {
-  emit("delete");
-}
-</script>
-
-<template>
-  <h5>{{ title }}</h5>
-
-  <span class="mb-4 is-inline-flex text-code px-2">Initial Storage</span>
-  <div class="is-flex is-flex-direction-column is-relative">
-    <div class="icon-with-input is-inactive width-120">
-      <label class="icon" for="initial">
-        <StorageIcon2 class="width-18" />
-      </label>
-      <div class="is-flex is-align-items-center px-2">{{ initialStorage }}</div>
-    </div>
-
-    <div v-for="(rule, index) in rules" :key="index" class="is-relative mt-4">
-      <div class="is-inline-flex is-align-items-center" style="margin-left: 52px">
-        <ArrowDownLongIcon />
-        <div class="input-with-icon width-80" style="margin: 4px">
-          <input type="text" class="ac-input" :value="rule.percent" />
-          <label class="icon">
-            <InfoLightIcon class="width-18" />
-          </label>
-        </div>
-        <p v-if="rule.role" class="ml-2">{{ rule.role }}</p>
-      </div>
-
-      <div class="is-flex is-align-items-center gap-8">
-        <div class="icon-with-input width-120">
-          <label class="icon">
-            <StorageIcon2 class="width-18" />
-          </label>
-          <input type="text" class="ac-input" :value="rule.size" />
-        </div>
-
-        <div class="buttons" v-if="rule.showAddButton || rule.showSaveDeleteButtons">
-          <button v-if="rule.showAddButton" class="button ac-button is-primary is-outlined is-soft" @click="addRole">
-            Add New Role
-          </button>
-
-          <template v-if="rule.showSaveDeleteButtons">
-            <button class="button ac-button is-primary is-outlined is-soft" @click="saveRules">Save</button>
-            <button class="button ac-button is-danger is-outlined is-soft" @click="deleteRule">
-              <span class="icon">
-                <CrossIcon />
-              </span>
-            </button>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/vue-components/v3/threshold/UsageThreshold.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title?: string;
-  subtitle?: string;
-  minRange?: number;
-  maxRange?: number;
-}
-
-withDefaults(defineProps<Props>(), {
-  title: "",
-  subtitle: "",
-});
-
-const threshold = defineModel<number>();
-</script>
-
-<template>
-  <h5>{{ title }}</h5>
-  <p>{{ subtitle }}</p>
-  <div class="ac-range">
-    <input v-model="threshold" type="range" :min="minRange" :max="maxRange" value="50" />
-    <span class="pl-8">{{ threshold }}</span>
-  </div>
-</template>

package/vue-components/v3/time/AcDuration.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent, ref } from "vue";
-
-interface Props {
-  modifierClasses?: string;
-  label?: string;
-  required?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  modifierClasses: "",
-  label: "Default",
-  required: false,
-});
-
-const showDuration = ref(false);
-const selectedDay = ref(0);
-const selectedHour = ref(0);
-const selectedMinute = ref(0);
-
-const AcSingleInput = defineAsyncComponent(
-  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
-);
-
-const vClickOutside = {
-  mounted(el: any, binding: any) {
-    el.__clickOutsideHandler__ = (event: any) => {
-      if (!(el === event.target || el.contains(event.target))) {
-        binding.value(event);
-      }
-    };
-    document.addEventListener("click", el.__clickOutsideHandler__);
-  },
-  unmounted(el: any) {
-    document.removeEventListener("click", el.__clickOutsideHandler__);
-  },
-};
-
-function handleScroll(type: "day" | "hour" | "minute") {
-  const container = document.querySelector(`.${type}-scroll`);
-  if (!container) return;
-
-  const scrollTop = container.scrollTop;
-  const itemHeight = container.querySelector("li")?.clientHeight || 0;
-  const containerHeight = container.clientHeight;
-
-  // Correctly calculate the middle index
-  const middleIndex = Math.round((scrollTop + containerHeight / 2 - itemHeight / 2) / itemHeight);
-
-  if (type === "day") {
-    selectedDay.value = middleIndex;
-  } else if (type === "hour") {
-    selectedHour.value = middleIndex;
-  } else if (type === "minute") {
-    selectedMinute.value = middleIndex + 1;
-  }
-}
-
-function getSelectedValue(type: "day" | "hour" | "minute") {
-  if (type === "day") return selectedDay.value;
-  if (type === "hour") return selectedHour.value;
-  return selectedMinute.value;
-}
-
-function setSelectedValue(type: "day" | "hour" | "minute", value: number) {
-  if (type === "day") {
-    selectedDay.value = value;
-  } else if (type === "hour") {
-    selectedHour.value = value;
-  } else if (type === "minute") {
-    selectedMinute.value = value;
-  }
-}
-</script>
-<template>
-  <div class="ac-duration-wrapper" :class="modifierClasses" v-click-outside="() => (showDuration = false)">
-    <ac-single-input class="width-220" @click="showDuration = !showDuration">
-      <label for="Value" :class="{ 'ac-label': true, 'is-required': required }">
-        {{ selectedDay }}d {{ selectedHour }}h {{ selectedMinute }}m
-      </label>
-      <input class="ac-input" />
-    </ac-single-input>
-
-    <div class="ac-duration" v-if="showDuration">
-      <div class="duration-header has-text-center">
-        <h6>Duration</h6>
-      </div>
-      <div class="duration-body">
-        <div class="is-flex">
-          <!-- Days -->
-          <div class="duration">
-            <span>DAY</span>
-            <ul class="day-scroll scroll-list" @scroll="handleScroll('day')">
-              <li
-                v-for="i in Array.from({ length: 30 }, (_, i) => i)"
-                :key="'d' + i"
-                :class="{ active: getSelectedValue('day') === i }"
-                @click="setSelectedValue('day', i)"
-              >
-                {{ i }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Hours -->
-          <div class="duration">
-            <span>HOUR</span>
-            <ul class="hour-scroll scroll-list" @scroll="handleScroll('hour')">
-              <li
-                v-for="i in Array.from({ length: 24 }, (_, i) => i)"
-                :key="'h' + i"
-                :class="{ active: getSelectedValue('hour') === i }"
-                @click="setSelectedValue('hour', i)"
-              >
-                {{ i }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Minutes -->
-          <div class="duration">
-            <span>MIN</span>
-            <ul class="minute-scroll scroll-list" @scroll="handleScroll('minute')">
-              <li
-                v-for="i in Array.from({ length: 60 }, (_, i) => i)"
-                :key="'m' + i"
-                :class="{ active: getSelectedValue('minute') === i }"
-                @click="setSelectedValue('minute', i)"
-              >
-                {{ i }}
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="duration-footer">
-        <div class="buttons">
-          <button class="button ac-button is-small is-outlined" @click="showDuration = false">Cancel</button>
-          <button class="button ac-button is-small is-outlined">Ok</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.scroll-list {
-  height: 150px;
-  overflow-y: scroll;
-  scroll-snap-type: y mandatory;
-  padding: 0;
-  margin: 0;
-}
-.scroll-list li {
-  color: #888;
-}
-.scroll-list li.active {
-  color: #007bff;
-  font-weight: 600;
-}
-
-.duration > span {
-  display: block;
-  text-align: center;
-  margin-bottom: 5px;
-}
-</style>