{"version":3,"file":"SelectorLite-e109045f.js","sources":["../../../app/frontend/components/form/SelectorLite.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport SelectorCore from '@/components/form/SelectorCore.vue'\nconst { props, emits } = SelectorCore\n\nexport default defineComponent({\n  name: 'SelectorLite',\n\n  components: {\n    SelectorCore,\n  },\n\n  props,\n\n  emits,\n})\n</script>\n\n<template>\n  <nav class=\"nav\">\n    <SelectorCore\n      :model-value=\"modelValue\"\n      :items=\"items\"\n      :name=\"name\"\n      :unit=\"unit\"\n      :is-disabled=\"isDisabled\"\n      :default-selector-label=\"defaultSelectorLabel\"\n      :default-selector-value=\"defaultSelectorValue\"\n      :inline=\"inline\"\n      :is-error=\"isError\"\n      @change=\"$emit('change', $event)\"\n      @update:model-value=\"$emit('update:modelValue', $event)\" />\n  </nav>\n</template>\n\n<style lang=\"sass\" scoped>\n/**\n * SelectorDefault.vue の scoped style を上書くために deep 修飾子を使用。\n * @see https://zenn.dev/karan_coron/articles/87597250de406018e351\n */\n.nav\n  ::v-deep(.o-selector)\n    $root: '.o-selector'\n    $icon-width: 8px\n    $icon-right-position: 10px\n    width: 100%\n    display: block\n    margin:\n      top: 14px\n      left: 0\n      right: auto\n\n    &:first-child\n      margin-top: 0\n\n    #{$root}--label\n      width: 100%\n      display: inline-block\n      line-height: 1\n      vertical-align: middle\n      position: relative\n      +transition\n\n      &::after\n        position: absolute\n        top: 50%\n        right: $icon-right-position\n        transform: translateY(-50%)\n        +iconArrow(down)\n\n    #{$root}--items\n      $icon-margin: 20px\n      width: 100%\n      padding: 0.75em ($icon-width + $icon-right-position + $icon-margin) 0.75em 1em\n      border: none\n      border-bottom: 1px solid $border-x-light-gray\n      cursor: pointer\n      +transition\n\n      +mouseover\n        border-color: $border-orange\n\n    &.is-inline\n      width: auto\n      display: inline-block\n\n    &[data-disabled=\"true\"]\n      #{$root}--label\n        opacity: 0.4\n\n        &::after\n          opacity: 0.3\n\n    &[data-error=\"true\"]\n      #{$root}--label\n        &::after\n          +iconArrow(down, $border-error)\n\n      #{$root}--items\n        background-color: transparent\n        border-color: $border-error\n</style>\n"],"names":["props","emits","SelectorCore","_sfc_main","defineComponent","_resolveComponent","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_SelectorCore","_ctx","_cache","$event"],"mappings":"gIAGA,KAAM,CAAE,MAAAA,EAAO,MAAAC,CAAU,EAAAC,EAEzBC,EAAeC,EAAgB,CAC7B,KAAM,eAEN,WAAY,CACV,aAAAF,CACF,EAEA,MAAAF,EAEA,MAAAC,CACF,CAAC,wDAICI,EAaM,cAAA,EAXD,OAAAC,EAAuB,EAAAC,EAAA,MAAAC,EAAA,CAAAC,EAChBC,EAAK,CACZ,cAAUC,EAAA,WACV,MAAMA,EAAA,MACN,KAAAA,EAAA,KACA,KAAAA,EAAA,KACA,cAAAA,EAAA,WACA,yBAAcA,EAAA,qBACd,yBAAiBA,EAAA,qBACjB,OAAMA,EAAA,OACN,WAAAA,EAAA,QAAA,SAAAC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAAF,EAAA,MAAA,SAAAE,CAAA"}