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

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

@@ -0,0 +1,93 @@
+<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/section/SectionContent.vue

@@ -4,7 +4,7 @@ import ArrowIcon from "../icons/ArrowIcon.vue";
 import AcButton from "../button/Button.vue";
 import HeaderItem from "../header/HeaderItem.vue";
 import HeaderItems from "../header/HeaderItems.vue";
-import ArrowUturnLeft from "../icons/ArrowUturnLeft.vue";
+import HeroiconsArrowUturnLeft20Solid from "~icons/heroicons/arrow-uturn-left-20-solid.svg";
 
 interface Props {
   title?: string;

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

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

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

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

@@ -0,0 +1,235 @@
+<script setup>
+import { onMounted, onBeforeUnmount } from "vue";
+
+function useDraggable(selector) {
+  let isDragging = false;
+  let startY = 0;
+  let scrollTop = 0;
+
+  const onMouseMove = (e) => {
+    if (!isDragging) return;
+    const y = e.pageY;
+    const walk = y - startY;
+    el.scrollTop = scrollTop - walk;
+  };
+
+  const onTouchMove = (e) => {
+    if (!isDragging) return;
+    const y = e.touches[0].pageY;
+    const walk = y - startY;
+    el.scrollTop = scrollTop - walk;
+  };
+
+  const stopDrag = () => (isDragging = false);
+
+  let el;
+
+  onMounted(() => {
+    el = document.querySelector(selector);
+    if (!el) return;
+
+    const startDragMouse = (e) => {
+      isDragging = true;
+      startY = e.pageY;
+      scrollTop = el.scrollTop;
+    };
+
+    const startDragTouch = (e) => {
+      isDragging = true;
+      startY = e.touches[0].pageY;
+      scrollTop = el.scrollTop;
+    };
+
+    el.addEventListener("mousedown", startDragMouse);
+    el.addEventListener("touchstart", startDragTouch);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", stopDrag);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", stopDrag);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", stopDrag);
+    window.removeEventListener("touchmove", onTouchMove);
+    window.removeEventListener("touchend", stopDrag);
+  });
+}
+
+useDraggable(".picker-day");
+useDraggable(".picker-hour");
+useDraggable(".picker-minute");
+</script>
+
+<template>
+  <div class="picker-wrapper">
+    <div class="duration-header"><h6>Duration ( 1day 06h 9min )</h6></div>
+    <div class="d-title">
+      <span>DAY</span>
+      <span>HOUR</span>
+      <span>MINUTE</span>
+    </div>
+    <div class="picker">
+      <div class="picker-window"></div>
+      <!-- <div class="triangle"></div> -->
+
+      <ul class="picker-day">
+        <li v-for="i in 30" :key="i">{{ i }}</li>
+      </ul>
+      <ul class="picker-hour">
+        <li v-for="i in 24" :key="i">{{ i }}</li>
+      </ul>
+      <ul class="picker-minute">
+        <li v-for="i in 60" :key="i">{{ i }}</li>
+      </ul>
+    </div>
+    <div class="duration-footer is-flex is-justify-content-flex-end pr-8 pb-8">
+      <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>
+</template>
+<style lang="scss" scoped>
+/* ========== Variables ========== */
+$cool-gray: #eff1f1;
+$secondary-light-gray: #f7f9fa;
+$scroll-highlight: darken($cool-gray, 10);
+
+/* ========== Mixins ========== */
+@mixin hide-scrollbars {
+  -ms-overflow-style: none; // IE 10+
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ========== Container ========== */
+.picker-wrapper {
+  background: white;
+  box-shadow: 0 0.5vw 2vw -5px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  flex-direction: column;
+  border-radius: 8px;
+}
+
+/* ========== Header ========== */
+.duration-header {
+  background-color: $secondary-light-gray;
+  text-align: center;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  h6 {
+    font-size: 13px;
+    margin: 0;
+    font-weight: 600;
+  }
+}
+
+/* ========== Title Labels ========== */
+.d-title {
+  display: inline-grid;
+  grid-template-columns: repeat(3, fit-content(100px));
+  justify-content: end;
+  gap: 0.5em;
+  font-weight: bold;
+  font-size: 11px;
+  padding: 8px 1rem 0;
+
+  span {
+    width: 40px;
+    text-align: center;
+    margin-right: 1em;
+  }
+}
+
+/* ========== Picker Section ========== */
+.picker {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: repeat(3, fit-content(80px));
+  justify-content: end;
+  padding: 0 1rem;
+  font-size: 13px;
+  font-weight: 500;
+  font-feature-settings: "tnum";
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::before {
+    top: 0;
+    height: 50%;
+    background: linear-gradient(white, rgba(255, 255, 255, 0));
+  }
+
+  &::after {
+    bottom: 0;
+    height: 50%;
+    background: linear-gradient(rgba(255, 255, 255, 0), white);
+  }
+
+  ul {
+    @include hide-scrollbars();
+    max-height: 190px;
+    overflow-y: scroll;
+    padding: 1.5em 0;
+    margin-right: 1em;
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+
+    li {
+      scroll-snap-align: center;
+      height: 2.35em;
+      width: 40px;
+      text-align: center;
+      user-select: none;
+      cursor: pointer;
+      line-height: 2.35em;
+      border-radius: 4px;
+
+      &:hover {
+        background: #f0f0f0;
+      }
+    }
+  }
+}
+
+/* ========== Highlight Window ========== */
+.picker-window {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 2.4em;
+  transform: translateY(-52%);
+  border-top: 1px solid $scroll-highlight;
+  border-bottom: 1px solid $scroll-highlight;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* ========== Footer Buttons ========== */
+.duration-footer {
+  padding: 0 1rem 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+
+  .buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+</style>