{"version":3,"file":"BottomSheet-DMNBJ03a.js","sources":["../../../app/javascript/src/components/Containers/BottomSheet.vue"],"sourcesContent":["<template>\n  <transition name=\"slide-up\">\n    <div v-if=\"show\"\n         ref=\"sheet\"\n         class=\"sheet\"\n         :class=\"{ 'show-close-icon': closeIcon }\"\n         :style=\"sheetStyle\"\n    >\n      <div ref=\"panel\" class=\"panel\" :style=\"panelStyle\">\n        <div ref=\"header\" class=\"header\">\n          <div class=\"drag-handle\"></div>\n\n          <slot name=\"header\"/>\n        </div>\n\n        <button class=\"close\" @click=\"$emit('close')\">\n          <CloseIcon/>\n        </button>\n\n        <div class=\"body\">\n          <slot/>\n        </div>\n\n        <div v-if=\"$slots.footer\" ref=\"footer\" class=\"footer\">\n          <slot name=\"footer\"/>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport { useDraggable, useElementBounding, useElementSize, useScrollLock, watchImmediate, useStyleTag } from \"@vueuse/core\";\nimport CloseIcon from 'app/assets/images/common/close.svg?component';\n\nconst emit = defineEmits(['move', 'close']);\nconst props = defineProps({\n  show: Boolean,\n  backdrop: Boolean,\n  closeIcon: Boolean,\n  top: {\n    type: Number,\n    default: 20\n  },\n  pinBackground: Boolean,\n});\nconst sheet = ref();\nconst panel = ref();\nconst header = ref();\nconst footer = ref();\n\nconst { height: headerHeight } = useElementBounding(header);\nconst { height: footerHeight } = useElementBounding(footer);\nconst { height: panelHeight } = useElementSize(panel);\n\nconst sheetStyle = computed(() => ({\n  backgroundColor: props.backdrop ? '#00000033' : 'transparent',\n  zIndex: props.backdrop ? 3000 : 1000,\n}));\n\nconst panelStyle = computed(() => ({\n  paddingTop: `${headerHeight.value}px`,\n  paddingBottom: `${footerHeight.value}px`,\n  transform: `translateY(${y.value}px)`,\n  marginBottom: `${y.value}px`,\n}));\n\nconst { y } = useDraggable(header, {\n  axis: 'y',\n  initialValue: { y: props.top },\n  containerElement: sheet,\n  onEnd: (pos) => {\n    emit('move', pos.y);\n    const halfPoint = panelHeight.value / 2;\n    if (pos.y > halfPoint) {\n      emit('close');\n    }\n    y.value = props.top;\n  }\n});\n\nconst locked = useScrollLock(document);\nconst { load, unload } = useStyleTag('html { height: 100%; position: fixed; inset: 0; z-index: 0; }', { immediate: false });\n\nwatch(() => props.top, top => y.value = top);\n\nwatchImmediate(() => props.show, (show) => {\n  locked.value = show;\n  props.pinBackground && show ? load() : unload();\n})\n</script>\n\n<style lang=\"scss\" scoped>\n@include slide-up-transition(100%, 100%, 500ms);\n$close-icon-width: 16px;\n\n.sheet {\n  position: fixed;\n  inset: 0;\n  @include flex-column;\n\n  &.slide-up-enter-active, &.slide-up-leave-active {\n    background-color: transparent;\n  }\n\n  &.show-close-icon {\n    button.close {\n      display: flex;\n    }\n\n    .header {\n      padding-right: calc(20px + $close-icon-width + 8px);\n    }\n  }\n\n  .panel {\n    color: #222;\n    background-color: white;\n    margin-top: auto;\n    border-radius: 15px 15px 0 0;\n    height: 100%;\n    @include flex-column;\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0px -4px 12px 0px rgba($grey-75, 0.10);\n  }\n\n  button.close {\n    display: none;\n    position: absolute;\n    z-index: 10;\n    right: 20px;\n    top: 20px;\n    height: 36px;\n    align-items: center;\n\n    &, &:deep(svg) {\n      width: $close-icon-width;\n    }\n  }\n\n  .header {\n    padding-inline: 20px;\n    padding-block: 24px 16px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: white;\n    font-size: 24px;\n    line-height: 28px;\n    font-weight: 600;\n    touch-action: none;\n\n    .drag-handle {\n      width: 48px;\n      height: 4px;\n      background: $grey-50;\n      border-radius: 15px;\n      position: absolute;\n      top: 12px;\n      left: calc(50% - 24px);\n    }\n  }\n\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    position: relative;\n  }\n\n  .footer {\n    padding: 20px;\n    border-top: 1px solid $gray-light;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: white;\n    @include flex-column;\n  }\n}\n</style>"],"names":["emit","__emit","props","__props","sheet","ref","panel","header","footer","headerHeight","useElementBounding","footerHeight","panelHeight","useElementSize","sheetStyle","computed","panelStyle","y","useDraggable","pos","halfPoint","locked","useScrollLock","load","unload","useStyleTag","watch","top","watchImmediate","show"],"mappings":"yeAoCA,MAAMA,EAAOC,EACPC,EAAQC,EAURC,EAAQC,EAAK,EACbC,EAAQD,EAAK,EACbE,EAASF,EAAK,EACdG,EAASH,EAAK,EAEd,CAAE,OAAQI,GAAiBC,EAAmBH,CAAM,EACpD,CAAE,OAAQI,GAAiBD,EAAmBF,CAAM,EACpD,CAAE,OAAQI,GAAgBC,EAAeP,CAAK,EAE9CQ,EAAaC,EAAS,KAAO,CACjC,gBAAiBb,EAAM,SAAW,YAAc,cAChD,OAAQA,EAAM,SAAW,IAAO,GAClC,EAAE,EAEIc,EAAaD,EAAS,KAAO,CACjC,WAAY,GAAGN,EAAa,KAAK,KACjC,cAAe,GAAGE,EAAa,KAAK,KACpC,UAAW,cAAcM,EAAE,KAAK,MAChC,aAAc,GAAGA,EAAE,KAAK,IAC1B,EAAE,EAEI,CAAE,EAAAA,CAAC,EAAKC,EAAaX,EAAQ,CACjC,KAAM,IACN,aAAc,CAAE,EAAGL,EAAM,GAAK,EAC9B,iBAAkBE,EAClB,MAAQe,GAAQ,CACdnB,EAAK,OAAQmB,EAAI,CAAC,EAClB,MAAMC,EAAYR,EAAY,MAAQ,EAClCO,EAAI,EAAIC,GACVpB,EAAK,OAAO,EAEdiB,EAAE,MAAQf,EAAM,GACpB,CACA,CAAC,EAEKmB,EAASC,EAAc,QAAQ,EAC/B,CAAE,KAAAC,EAAM,OAAAC,GAAWC,EAAY,gEAAiE,CAAE,UAAW,GAAO,EAE1H,OAAAC,EAAM,IAAMxB,EAAM,IAAKyB,GAAOV,EAAE,MAAQU,CAAG,EAE3CC,EAAe,IAAM1B,EAAM,KAAO2B,GAAS,CACzCR,EAAO,MAAQQ,EACf3B,EAAM,eAAiB2B,EAAON,EAAI,EAAKC,EAAQ,CACjD,CAAC"}