{"version":3,"file":"SelectorCore-5df73b3e.js","sources":["../../../app/frontend/components/form/SelectorCore.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, PropType, getCurrentInstance, ref, watch, nextTick, onMounted } from 'vue'\n\n/**\n * @fileoverview\n *  機能と DOM のみの準ヘッドレスコンポーネントです。\n *  実際に利用する際は、ラッパーコンポーネントを用意し、deep オブション付きのスタイルを定義した上での運用を想定しており、\n *  よってこのコンポーネントのみでの使用はできません。\n * @example /app/frontend/components/form/SelectorDefault.vue\n */\nexport default defineComponent({\n  name: 'SelectorCore',\n\n  props: {\n    /**\n     * <select> 要素の valueを受け取る\n     * 値が null の場合は value 指定なしとして内部データで処理を行う\n     */\n    modelValue: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n\n    /**\n     * <select> 要素の <option> 部分に渡す配列\n     *\n     * @example [1, 2, 3, 4] : number 型の配列\n     * @example ['1', '2', '3', '4'] : String 型の配列\n     * @example [{ value: '1', label: 'ラベル1' }] : Object 型の配列 value と画面に表示する内容が異なる場合\n     *\n     */\n    items: {\n      type: Array as PropType<SelectorOption[]>,\n      required: true,\n    },\n\n    /**\n     * フォームの name 属性\n     * 任意プロパティ\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * <option> の末尾に付与される単位\n     * 任意プロパティ\n     *\n     * @example unit=\"個\" => <option>1個</option>\n     */\n    unit: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * セレクターの非活性フラグ\n     * 任意プロパティ\n     *\n     * @usage 活性状態を管理する親の data を受け渡す\n     */\n    isDisabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * プレースホルダー用ラベル\n     * 任意プロパティ\n     */\n    defaultSelectorLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * プレースホルダー用の値\n     * 任意プロパティ\n     */\n    defaultSelectorValue: {\n      type: [String, Number],\n      default: null,\n    },\n\n    /**\n     * inline-block 表示するかどうか\n     */\n    inline: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * エラー発生状態かどうか\n     * ※ エラー状態は外から受け取る\n     */\n    isError: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: ['update:modelValue', 'change'],\n\n  setup(props, context) {\n    /**\n     * コンポーネント内部でもつ選択状態の値\n     * 親コンポーネントから value プロパティ を受け取らない場合は、このプロパティの値が selector に反映される\n     */\n    const localValue = ref()\n\n    watch(() => props.modelValue, () => {\n      localValue.value = props.modelValue\n    })\n\n    /**\n     * [リアクティブデータの描画漏れ回避策]\n     *\n     * option の値が更新されたら強制描画する\n     */\n    watch(() => props.items, (newValue) => {\n      if (newValue.length) {\n        const instance = getCurrentInstance()\n        nextTick(() => {\n          instance?.proxy?.$forceUpdate()\n        })\n      }\n    }, { deep: true })\n\n    onMounted(() => {\n      localValue.value = (props.modelValue !== null)\n        ? props.modelValue\n        : (props.defaultSelectorValue !== null)\n          ? props.defaultSelectorValue\n          : localValue.value\n    })\n\n    const init = () => {\n      // 親から受け取った value がオプション選択肢にない場合は、先頭の値を選択する\n      const itemValues = props.items.map(item => itemValue(item))\n      itemValues.push(props.defaultSelectorValue)\n\n      if (!itemValues.includes(props.modelValue) && props.items.length) {\n        // context.emit('update:modelValue', props.items[0].value)\n        context.emit('update:modelValue', undefined)\n      }\n    }\n\n    /**\n     * セレクターの選択項目変更時の emit 処理\n     *\n     * @usage ページの呼び出し側で v-model で親の data と紐付ける (v-model の内部的に v-on と糖衣構文となるので受取可能となる)\n     */\n    const updateValue = (event: Event) => {\n      // 親から value プロパティを受け取っている場合\n      if (props.modelValue !== null) {\n        const currentValue = props.modelValue\n          ? props.modelValue.toString() // event.target.value が文字列のため比較対象と型を合わせる\n          : props.defaultSelectorValue\n\n        const targetOption = props.items.find(item => itemValue(item).toString() === (event.target as HTMLInputElement).value)\n        // 変更後の値が item リストに存在しない場合はデフォルト選択値と見なす\n        const changedValue = targetOption\n          ? itemValue(targetOption)\n          : props.defaultSelectorValue\n\n        context.emit('update:modelValue', changedValue)\n\n        // 値に変更があった場合のみ change イベントを emit する\n        if (currentValue !== changedValue) {\n          context.emit('change', changedValue)\n        }\n      } else {\n        // コンポーネント内部の値を保存\n        localValue.value = (event.target as HTMLInputElement).value\n        context.emit('update:modelValue', localValue.value)\n      }\n    }\n\n    /**\n     * option の値\n     *\n     * @param item {String|Object}\n     * @return {String}\n     */\n    const itemValue = (item: SelectorOption) => {\n      return typeof item === 'object' ? item.value : item\n    }\n\n    /**\n     * option 表示用のラベル\n     *\n     * @param item {String|Object}\n     * @return {String}\n     */\n    const itemLabel = (item: SelectorOption) => {\n      return typeof item === 'object' ? item.label : item\n    }\n\n    init()\n\n    return {\n      // data\n      localValue,\n\n      // methods\n      updateValue,\n      itemValue,\n      itemLabel,\n    }\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'o-selector',\n      { 'is-inline': inline },\n    ]\"\n    :data-disabled=\"isDisabled\"\n    :data-error=\"isError\">\n    <label\n      :class=\"[\n        'o-selector--label',\n        { 'is-inline': inline },\n      ]\"\n      :data-disabled=\"isDisabled\"\n      :data-error=\"isError\">\n      <select\n        class=\"o-selector--items\"\n        :value=\"localValue\"\n        :name=\"name\"\n        :disabled=\"isDisabled\"\n        :data-error=\"isError\"\n        @change=\"updateValue\">\n\n        <!-- 初期値 -->\n        <option\n          v-if=\"defaultSelectorLabel.length > 0\"\n          class=\"o-selector--item\"\n          :value=\"defaultSelectorValue\">\n          {{ defaultSelectorLabel }}\n        </option>\n\n        <option\n          v-for=\"item in items\"\n          :key=\"itemLabel(item)\"\n          class=\"o-selector--item\"\n          :value=\"itemValue(item)\">\n          {{ itemLabel(item) }}{{ unit }}\n        </option>\n      </select>\n    </label>\n  <!-- /.o-selector --></div>\n</template>\n"],"names":["_sfc_main","defineComponent","props","context","localValue","ref","watch","newValue","instance","getCurrentInstance","nextTick","_a","onMounted","init","itemValues","item","itemValue","updateValue","event","currentValue","targetOption","changedValue","itemLabel","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_normalizeClass","args","_createElementBlock","_toDisplayString","_hoisted_4","_createCommentVNode","_openBlock","_Fragment","_renderList"],"mappings":"iJAUA,MAAAA,EAAeC,EAAgB,CAC7B,KAAM,eAEN,MAAO,CAKL,WAAY,CACV,KAAM,CAAC,OAAQ,OAAQ,OAAO,EAC9B,QAAS,IACX,EAUA,MAAO,CACL,KAAM,MACN,SAAU,EACZ,EAMA,KAAM,CACJ,KAAM,OACN,QAAS,EACX,EAQA,KAAM,CACJ,KAAM,OACN,QAAS,EACX,EAQA,WAAY,CACV,KAAM,QACN,QAAS,EACX,EAMA,qBAAsB,CACpB,KAAM,OACN,QAAS,EACX,EAMA,qBAAsB,CACpB,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACX,EAKA,OAAQ,CACN,KAAM,QACN,QAAS,EACX,EAMA,QAAS,CACP,KAAM,QACN,QAAS,EACX,CACF,EAEA,MAAO,CAAC,oBAAqB,QAAQ,EAErC,MAAMC,EAAOC,EAAS,CAKpB,MAAMC,EAAaC,IAEbC,EAAA,IAAMJ,EAAM,WAAY,IAAM,CAClCE,EAAW,MAAQF,EAAM,UAAA,CAC1B,EAODI,EAAM,IAAMJ,EAAM,MAAQK,GAAa,CACrC,GAAIA,EAAS,OAAQ,CACnB,MAAMC,EAAWC,IACjBC,EAAS,IAAM,QACbC,EAAAH,GAAA,YAAAA,EAAU,QAAV,MAAAG,EAAiB,cAAa,CAC/B,CACH,CAAA,EACC,CAAE,KAAM,EAAA,CAAM,EAEjBC,EAAU,IAAM,CACHR,EAAA,MAASF,EAAM,aAAe,KACrCA,EAAM,WACLA,EAAM,uBAAyB,KAC9BA,EAAM,qBACNE,EAAW,KAAA,CAClB,EAED,MAAMS,EAAO,IAAM,CAEjB,MAAMC,EAAaZ,EAAM,MAAM,IAAYa,GAAAC,EAAUD,CAAI,CAAC,EAC/CD,EAAA,KAAKZ,EAAM,oBAAoB,EAEtC,CAACY,EAAW,SAASZ,EAAM,UAAU,GAAKA,EAAM,MAAM,QAEhDC,EAAA,KAAK,oBAAqB,MAAS,CAC7C,EAQIc,EAAeC,GAAiB,CAEhC,GAAAhB,EAAM,aAAe,KAAM,CAC7B,MAAMiB,EAAejB,EAAM,WACvBA,EAAM,WAAW,SAAA,EACjBA,EAAM,qBAEJkB,EAAelB,EAAM,MAAM,KAAaa,GAAAC,EAAUD,CAAI,EAAE,SAAS,IAAOG,EAAM,OAA4B,KAAK,EAE/GG,EAAeD,EACjBJ,EAAUI,CAAY,EACtBlB,EAAM,qBAEFC,EAAA,KAAK,oBAAqBkB,CAAY,EAG1CF,IAAiBE,GACXlB,EAAA,KAAK,SAAUkB,CAAY,CACrC,MAGWjB,EAAA,MAASc,EAAM,OAA4B,MAC9Cf,EAAA,KAAK,oBAAqBC,EAAW,KAAK,CACpD,EASIY,EAAaD,GACV,OAAOA,GAAS,SAAWA,EAAK,MAAQA,EAS3CO,EAAaP,GACV,OAAOA,GAAS,SAAWA,EAAK,MAAQA,EAG5C,OAAAF,IAEE,CAEL,WAAAT,EAGA,YAAAa,EACA,UAAAD,EACA,UAAAM,CAAA,CAEJ,CACF,CAAC,uIAKS,SAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,qBAA6C,MAAAC,EAAA,CAAA,aAIlD,CAAe,YAAAN,EAAA,MAAA,CAAA,CACf,EAAA,gBAAAA,EAAA,WACD,aAAAA,EAAA,OAAA,EAAA,YACgE,MAAAM,EAAA,CAAA,oBAI7D,CAAe,YAAAN,EAAA,MAAA,CAAA,CACf,EAAA,gBAAAA,EAAA,WACD,aAAAA,EAAA,OAAA,EAAA,GAEU,SAAU,CACjB,MAAM,oBACN,MAAUA,EAAA,WACV,KAAAA,EAAA,KACA,SAAMA,EAAA,WAAA,aAAAA,EAAA,QAIC,SAAAC,EAAA,CAAA,IAAAA,EAAqB,CAAM,EAAA,IAAAM,IAAAP,EAAA,aAAAA,EAAA,YAAA,GAAAO,CAAA,EAAA,EAAA,oCACT,EAAAC,EAAA,SAAA,CACvB,IAAK,EAAA,MAAA,+CAIR,EAAAC,EAAAT,EAAA,oBAMS,EANT,EAAAU,CAAA,GAAAC,EAAA,GAAA,EAAA,GAAAC,EAEQ,EAAc,EAAAJ,EAAAK,EAAA,KAAAC,EAAAd,EAAA,MAAAT,IACfqB,EAAA,EAAmBJ,EAAA,SAAA,CACvB,IAAKR,EAAE,UAAUT,CAAA,EAAA,MAAA"}