@appscode/design-system 2.17.26-alpha → 2.17.27

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

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