{"version":3,"file":"BaseSelect-cR-SrNVP.js","sources":["../../src/composable/ui/useWindowResize.ts","../../src/composable/ui/useWindowScroll.ts","../../src/components/Layouts/BaseMenu.vue","../../src/components/Forms/BaseSelect.vue"],"sourcesContent":["import { onUnmounted } from 'vue';\n\nexport default function useWindowResize(onResize: () => void) {\n  const resize = () => {\n    onResize();\n  };\n  window.addEventListener('resize', resize);\n  onUnmounted(() => {\n    window.removeEventListener('resize', resize);\n  });\n}\n","import { onUnmounted } from 'vue';\n\nexport default function useWindowScroll(onScroll: () => void) {\n  const scroll = () => {\n    onScroll();\n  };\n  window.addEventListener('scroll', scroll);\n  onUnmounted(() => {\n    window.removeEventListener('scroll', scroll);\n  });\n}\n","<template>\n  <div v-bind=\"$attrs\" ref=\"containerRef\">\n    <slot name=\"activator\" :attrs=\"attrs\"></slot>\n  </div>\n  <Teleport to=\"body\">\n    <fade-transition :duration=\"300\">\n      <div v-if=\"open\" class=\"menu\" :style=\"menuStyle\" ref=\"menuRef\" @click=\"onClickItem\" @keyup.enter=\"onClickItem\">\n        <slot/>\n      </div>\n    </fade-transition>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\n\nimport {\n  computed,\n  CSSProperties,\n  defineEmits,\n  defineProps,\n  onUnmounted,\n  reactive,\n  ref,\n  watch\n} from 'vue';\nimport { onClickOutside } from '@vueuse/core';\nimport useWindowResize from '@/composable/ui/useWindowResize';\nimport useWindowScroll from '@/composable/ui/useWindowScroll';\nimport FadeTransition from \"@/components/Transitions/FadeTransition.vue\";\n\nconst props = defineProps({\n  modelValue: {\n    type: Boolean,\n    default: false,\n  },\n  activator: {\n    type: Object as () => HTMLElement,\n    required: false,\n  },\n  position: {\n    type: String as () => 'top' | 'bottom' | 'left' | 'right',\n    required: false,\n    default: 'top',\n  },\n  width: {\n    type: [Number],\n  },\n  closeOnSelect: {\n    type: Boolean,\n    default: () => true,\n  },\n  hiddenScroll: {\n    type: Boolean,\n    default: () => true,\n    required: false,\n  },\n});\n\nconst emit = defineEmits(['update:open', 'clickOutside']);\n\nconst containerRef = ref<HTMLElement>();\nconst menuRef = ref<HTMLElement>();\n\nconst open = ref(false);\nconst location = reactive({\n  top: 0,\n  left: 0,\n  width: 0,\n});\n\nconst menuHeight = ref(0);\n\nonClickOutside(menuRef, () => {\n  if (open.value) {\n    open.value = false;\n    emit('clickOutside');\n  }\n});\n\nconst activatorRef = computed(() => props.activator || containerRef.value);\n\nconst menuStyle = computed((): CSSProperties => ({\n    top: `${location.top + 3}px`,\n    left: `${location.left + 1}px`,\n    width: `${location.width - 2}px`,\n}));\n\nfunction onResize() {\n\n  if (!activatorRef.value) return;\n  const containerRect = activatorRef.value.getBoundingClientRect();\n\n  let top = containerRect.top + window.scrollY;\n  let left = containerRect.left + window.scrollX;\n\n  const { width, height } = containerRect;\n\n  if (props.position === 'bottom') top += height;\n  else if (props.position === 'left') left -= width;\n  else if (props.position === 'right') left += width;\n  else if (props.position === 'top') {\n    top -= 3;\n    left -= 1;\n  }\n\n  let limitPosition = containerRect.bottom + menuHeight.value;\n  if (props.position === 'top'){\n    limitPosition -= height;\n  }\n\n  if((limitPosition) > window.innerHeight) {\n    top = top - menuHeight.value - 6;\n    if (props.position === 'bottom') top -= height;\n    if (props.position === 'top') top += height + 6;\n  }\n\n  const header = document.querySelector('header');\n  if(header && header.clientHeight) {\n  if(top < header?.clientHeight) {\n    top = header?.clientHeight;\n  }}\n\n  const menuWidth = props.width || (width);\n  location.width = menuWidth;\n  location.top = top;\n  location.left = left - ((menuWidth - width) / 2);\n  location.width = props.position === 'top' ? location.width + 2 : location.width;\n}\n\nfunction onClick() {\n  open.value = !open.value;\n}\n\nfunction onClickItem() {\n  if (props.closeOnSelect) open.value = !open.value;\n}\n\nconst attrs = computed(() => ({\n  onClick,\n}));\n\nwatch(activatorRef, (newValue, oldValue) => {\n  oldValue?.removeEventListener('click', onClick);\n  newValue?.addEventListener('click', onClick);\n}, { immediate: true });\n\nuseWindowResize(onResize);\nuseWindowScroll(onResize);\n\n\nwatch(()=> open.value, ()=> {\n  if(open.value && props.hiddenScroll) {\n    document.documentElement.style.overflow = 'hidden';\n  }\n  onResize();\n  if(!open.value && props.hiddenScroll) {\n    document.documentElement.style.overflow = 'auto';\n  }\n}, { immediate: true });\n\n\nwatch(() => props.modelValue, (newValue) => {\n  open.value = newValue;\n}, { immediate: true });\n\nfunction observeHeight(element: HTMLElement) {\n  const heightObserver = new ResizeObserver(() => {\n    updateHeight();\n  });\n  heightObserver.observe(element);\n}\n\nonUnmounted(() => {\n  activatorRef.value?.removeEventListener('click', onClick);\n  document.documentElement.style.overflow = 'auto';\n});\n\nfunction updateHeight() {\n  const currentHeight = menuRef.value?.offsetHeight || 0;\n  if (menuHeight.value !== currentHeight) {\n    menuHeight.value = currentHeight;\n  }\n}\n\nwatch(() => menuHeight.value, () => {\n  onResize();\n}, { immediate: true });\n\nwatch(() => menuRef.value, (newValue) => {\n  if(newValue) {\n    observeHeight(newValue);\n  }\n}, { immediate: true });\n\n</script>\n\n<style scoped>\n\n.menu {\n  position: absolute !important;\n  display: inline-block;\n  overflow-y: auto;\n  overflow-x: hidden;\n  contain: content;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.059);\n  background-color: white;\n}\n\n.fade-enter-active {\n  transition: opacity 0.4s ease-in;\n}\n\n.fade-leave-active {\n  transition: opacity 0.2s ease-out;\n}\n\n</style>\n","<template>\n  <div class=\"w-100 px-2\" ref=\"containerRef\">\n    <flex-layout v-if=\"!props.noLabel\" class=\"w-100 pe-2\" :class=\"{'label-border mb-2': hasLabelBorder}\">\n      <base-text :color=\"labelColor\">{{ props.label }}</base-text>\n      <required-tag-text v-if=\"props.requiredTag || props.primaryRequiredTag\" :color=\"props.primaryRequiredTag? 'primary' : 'error'\">必須</required-tag-text>\n    </flex-layout>\n    <div v-if=\"hasAppend\" class=\"d-flex px-0 align-items-center\">\n      <div class=\"input-container\" ref=\"inputRef\" @click=\"onClick\" @keyup.enter=\"onClick\">\n        <input\n          class=\"flex-grow-1\"\n          :class=\"{'error': !!error, 'invalidField': !!validate(rules, props.modelValue), 'placeholder-style': isPlaceholder }\"\n          :value=\"selectedText\"\n          readonly\n          :disabled=\"props.disabled\"\n          :placeholder=\"props.placeholder\"\n          type=\"text\"\n          @click.prevent\n        >\n        <base-icon\n          v-if=\"props.clearable\"\n          class=\"clickable\"\n          width=\"20px\"\n          height=\"20px\"\n          :stroke=\"props.disabled ? 'gray': 'black'\"\n          name=\"cross-sign\"\n          @click.stop=\"onSelect(returnObject ? {} : undefined)\"/>\n      </div>\n      <slot name=\"append\" />\n    </div>\n    <div v-else class=\"input-container\" ref=\"inputRef\" @click=\"onClick\" @keyup.enter=\"onClick\">\n      <input\n        class=\"flex-grow-1\"\n        :class=\"{'error': !!error, 'invalidField': !!validate(rules, props.modelValue),  'placeholder-style': isPlaceholder }\"\n        :value=\"selectedText\"\n        readonly\n        :disabled=\"props.disabled\"\n        :placeholder=\"props.placeholder\"\n        type=\"text\"\n        @click.prevent\n      >\n      <base-icon\n        v-if=\"props.clearable\"\n        class=\"clickable\"\n        width=\"20px\"\n        height=\"20px\"\n        :stroke=\"props.disabled ? 'gray': 'black'\"\n        name=\"cross-sign\"\n        @click.stop=\"onSelect(returnObject ? {} : undefined)\"/>\n    </div>\n    <base-menu v-if=\"breakpoint.mdAndUp && !disabled\" :activator=\"inputRef\">\n      <div class=\"menu-content p-0\">\n        <base-text class=\"menu-title\" bold>{{ selectedText || props.placeholder }}</base-text>\n        <div class=\"menu-list\">\n          <div class=\"menu-item\" v-for=\"(item, i) in props.items\" :key=\"i\" @click=\"onSelect(item)\"\n               @keyup.enter=\"onSelect(item)\">\n            <i class=\"bi bi-chevron-right\"></i>\n            <base-text class=\"w-100 pt-2\" justify=\"center\">{{ item[props.itemText] }}</base-text>\n          </div>\n        </div>\n      </div>\n    </base-menu>\n    <sliding-up-layout v-else-if=\"!disabled\" :activator=\"inputRef\">\n      <div class=\"menu-content p-0\">\n        <base-text class=\"menu-title\" bold>{{ selectedText || props.placeholder }}</base-text>\n        <div class=\"menu-list\">\n          <div class=\"menu-item\" v-for=\"(item, i) in props.items\" :key=\"i\" @click=\"onSelect(item)\"\n               @keyup.enter=\"onSelect(item)\">\n            <i class=\"bi bi-chevron-right\"></i>\n            <base-text class=\"w-100 pt-2\" justify=\"center\">{{ item[props.itemText] }}</base-text>\n          </div>\n        </div>\n      </div>\n    </sliding-up-layout>\n    <base-text v-if=\"!noError\" color=\"error\" size=\"xs\">{{ error }}</base-text>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T\">\nimport {computed, defineEmits, defineProps, ref, toRef} from 'vue';\nimport BaseText from '@/components/Texts/BaseText.vue';\nimport FlexLayout from '@/components/Layouts/FlexLayout.vue';\nimport BaseMenu from '@/components/Layouts/BaseMenu.vue';\nimport {useBreakpoint} from '@/composable/ui/useScreen';\nimport SlidingUpLayout from '@/components/Layouts/SlidingUpLayout.vue';\nimport RequiredTagText from '@/components/Texts/RequiredTagText.vue';\nimport BaseIcon from '@/components/Images/BaseIcon.vue';\nimport {ValidatorRule} from '@/composable/ui/useForm';\nimport useFormField from '@/composable/ui/useFormField';\nimport {useValidator} from \"@/composable/ui/useValidator\";\nconst { validate } = useValidator();\n\nconst props = defineProps(\n  {\n    label: String,\n    noLabel: Boolean,\n    modelValue: [String, Number, Object, Boolean],\n    placeholder: String,\n    rules: {\n      type: [Array as () => ValidatorRule<string>, Object as () => ValidatorRule<string>],\n      default: () => [],\n    },\n    items: {\n      type: Array as () => { [key: string]: any }[],\n      default: () => [],\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    returnObject: Boolean,\n    itemValue: {type: String, default: 'value'},\n    itemText: {type: String, default: 'text'},\n    noError: {type: Boolean, default: false},\n    requiredTag: {\n      type: Boolean,\n      default: false,\n    },\n    labelColor: {\n      type: String,\n      default: 'primary',\n    },\n    hasLabelBorder: {\n      type: Boolean,\n      default: false,\n    },\n    hasAppend: {\n      type: Boolean,\n    },\n    dependencyField: {\n      type: [String, Number],\n    },\n    primaryRequiredTag: {\n      type: Boolean,\n      default: false,\n    },\n    isOptional: {\n      type: Boolean,\n      default: false,\n    },\n  },\n);\nconst emit = defineEmits(['update:modelValue']);\n\nconst dependencyField = computed(() => props.dependencyField)\n\n\nconst openMenu = ref(false);\nconst inputRef = ref<HTMLInputElement>();\nconst breakpoint = useBreakpoint();\nconst {error} = useFormField(toRef(() => props.modelValue), toRef(() => props.rules), dependencyField, props.isOptional);\n\nconst isPlaceholder = computed(() => {\n  if (selectedText.value === '下限なし' || selectedText.value === '上限なし') {\n    return true;\n  }\n  return selectedText.value === props.placeholder || selectedText.value === '' || selectedText.value === undefined;\n});\n\nconst selected = computed(() => {\n  if (props.returnObject) {\n    const modelValue = props.modelValue as { [key: string]: unknown };\n    return props.items.find((i) => i[props.itemValue] === modelValue[props.itemValue]);\n  }\n  return props.items.find((i) => i[props.itemValue] === props.modelValue);\n});\nconst selectedText = computed(() => (selected.value ? selected.value[props.itemText] : ''));\n\nfunction onClick() {\n  openMenu.value = !openMenu.value;\n}\n\nfunction onSelect(item: { [key: string]: unknown } | undefined) {\n  if (props.disabled) return;\n  if (item) {\n    if (props.returnObject) {\n      emit('update:modelValue', item);\n    } else {\n      const value = item[props.itemValue];\n      emit('update:modelValue', value);\n    }\n  } else {\n    emit('update:modelValue', undefined);\n  }\n\n  openMenu.value = false;\n}\n\n\n</script>\n\n<style scoped>\n.input-container {\n  height: 50px;\n  width: 100%;\n  font-size: 16px;\n  padding: 0 12px;\n  border: 1px solid var(--border);\n  border-radius: 5px;\n  background-color: var(--grayLight) !important;\n  transition: background 300ms;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n}\n\n.input-container + .error {\n  border-radius: 60px;\n  border: 2px solid var(--error);\n}\n\ninput {\n  font-size: 18px;\n  border: none;\n  background-color: transparent;\n  transition: background 300ms;\n  cursor: pointer;\n}\n\n.placeholder-style {\n  color: var(--placeholder) !important;\n}\n\n::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: var(--placeholder);\n  opacity: 1; /* Firefox */\n}\n\n:-ms-input-placeholder { /* Internet Explorer 10-11 */\n  color: red;\n}\n\n::-ms-input-placeholder { /* Microsoft Edge */\n  color: red;\n}\n\n\n.menu-content {\n  background-color: white;\n  border: 2px var(--black) solid;\n  contain: content;\n}\n\n.menu-title {\n  height: 65px;\n  padding: 20px 12px;\n  font-size: 14px;\n}\n\n.menu-list {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.menu-item {\n  min-height: 48px;\n  cursor: pointer;\n  transition: 300ms;\n}\n\n.menu-item:hover {\n  background-color: var(--gray);\n}\n\ninput {\n  width: 100%;\n}\n\n.label-border {\n  border-bottom: 1px solid var(--primary);\n}\n\n</style>\n"],"names":["useWindowResize","onResize","resize","onUnmounted","useWindowScroll","onScroll","scroll","props","__props","emit","__emit","containerRef","ref","menuRef","open","location","reactive","menuHeight","onClickOutside","activatorRef","computed","menuStyle","containerRect","top","left","width","height","limitPosition","header","menuWidth","onClick","onClickItem","attrs","watch","newValue","oldValue","observeHeight","element","updateHeight","_a","currentHeight","validate","useValidator","dependencyField","openMenu","inputRef","breakpoint","useBreakpoint","error","useFormField","toRef","isPlaceholder","selectedText","selected","modelValue","i","onSelect","item","value"],"mappings":"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"}