@appscode/design-system 2.17.25 → 2.17.26-alpha

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>