• -> ポップアップする「form」を作る ->
• -> ポップアップ時に「ターゲットの情報」を「form」を内パーツに反映 ->
• -> パーツのオリジナル部分の変更は,changeイベントでは検出されない -> パーツ内で、MutationObserver監視で対応するしかない
• -> 更新時に,「form」データを[ターゲット]に反映 -> 反映する方法を「タイプ化」して適用を実行！

// パーツの値がどこに反映するか？　反映は、classチェンジ、data属性付加ーー。listは、clasチェンジ用配列
  const $list = [
    { name:'tpl', list: $tpllist, target:getTrg },
    { name:'color', list: $colorclass, target:getTrg },
  ]
//ターゲットは、関数で取得できるもの　--  ポップアップ時にターゲットが変更されるケースを想定しているから

 form$.pop({ parts: form$.colortpl(), list: $list })(document.getElementById('dsgbtn'));

//  form$.colortpl()で動的にパーツを生成する
  

• セレクターをポップアップで選択->
• オリジナル（元のセレクター）をMutationObserverで監視-> changeが発火するのはユーザーイベントのみ

1.ノーマル（selectおよびradioボタンの親要素）

//CODE
form$.picker()(document.getElementById('wanted'));

//changeオプションで 変更時のアクションを追加できる
//opでアクセスできるので任意のkeyを設定しておけば、それにもアクセスできる
//keyとして使用できない予約語: change, tpl, start, pickerBox, picbox, picitem, active,

let op = {
  target: '#hoge',
  change:function(op){
    console.log(op.val);
    console.log(op.target);
  },
}
form$.picker(op)(document.getElementById('gakunen'));

//共通オプション
let $selop = {tag:'option'}
//個別アイテム
let $sel1 = [
[{value:'hdl-line'},'下ボーダー'],
[{value:'hdl-centerline'},'下ボーダー'],
[{value:'hdl-stackline'},'かっこいいアンダーライン'],
[{value:'hdl-fukiline'},'吹き出し（ボーダー）'],
[{value:'hdl-bg'},'背景ベタ塗りの見出し'],
[{value:'hdl-up'},'背景ベタ塗り右上がり'],
[{value:'hdl-fukibg'},'吹き出しベタ塗り'],
[{value:'hdl-wrap'},'枠線見出し'],
[{value:'hdl-tbbdr'},'上下ボーダー'],
[{value:'hdl-tbbdrw'},'上下ボーダー（W）'],
[{value:'hdl-fuki'},'吹き出し（枠線）'],
[{value:'hdl-lb'},'ワンポイント'],
[{value:'hdl-lbw'},'ワンポイント'],
[{value:'hdl-rdpin'},'ワンポイント'],
[{value:'hdl-trpin'},'ワンポイント'],
];
//selector生成
let $selecter = el$({tag:'select'},list$($sel1,$selop));

//vanillas.jsで挿入可能
document.getElementById('kiteslector').appendChild($selecter);

let $htpl = [
  {value:'hdl-line',tpl:'<p class="hdl-line"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-centerline',tpl:'<p class="hdl-centerline"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-stackline',tpl:'<p class="hdl-stackline"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-fukiline',tpl:'<p class="hdl-fukiline"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-bg',tpl:'<p class="hdl-bg"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-up',tpl:'<p class="hdl-up"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-fukibg',tpl:'<p class="hdl-fukibg"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-wrap',tpl:'<p class="hdl-wrap"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-tbbdr',tpl:'<p class="hdl-tbbdr"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-tbbdrw',tpl:'<p class="hdl-tbbdrw"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-fuki',tpl:'<p class="hdl-fuki"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-lb',tpl:'<p class="hdl-lb"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-lbw',tpl:'<p class="hdl-lbw"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-rdpin',tpl:'<p class="hdl-rdpin"><span><%=raw self%></span></p>',type:'normal'},
  {value:'hdl-trpin',tpl:'<p class="hdl-trpin"><span><%=raw self%></span></p>',type:'normal'},
];
form$.picker({
   width: '100%',
   tpl: $htpl,
})($selecter)

let $cmntpl = '<p class="hdl-bg"><span><%=raw self%></span></p>';

let $tpldata = [
  {value:'hdl-line'},
  {value:'hdl-centerline'},
  {value:'hdl-stackline'},
  {value:'hdl-fukiline'},
  {value:'hdl-bg'},
  {value:'hdl-up'},
  {value:'hdl-fukibg'},
  {value:'hdl-wrap'},
  {value:'hdl-tbbdr'},
  {value:'hdl-tbbdrw'},
  {value:'hdl-fuki'},
  {value:'hdl-lb'},
  {value:'hdl-lbw'},
  {value:'hdl-rdpin'},
  {value:'hdl-trpin'},
];
form$.picker({
   width: '100%',
   tpl: $cmntpl,
   data: $tpldata,
})($selecter)

//変更時に見出しカラーを変更する関数
  function changecolor($target,$tagethash,$colorhash) {
   return function(e) {
    let $val = e.target.value;
    let $t = $target.querySelector('.' + $target.getAttribute('data-value'));
  //ターゲットのカラークラスを変更
    fn$.inClass($colorhash,'remove')($t);
    $t.classList.add($val);
  //ターゲット配列の'tpl'key の値（テンプレ）カラークラスを変更
  //個別テンプレパターン
    fn$.updateHashKey($htpl, fn$.addClassHTML($val,$colorhash))('tpl');
   }
  }

//カラーボタン用配列　＝ { el:リスト個別, tpl:個別テンプレ, data:テンプレ用データ }
  let $colorlist = [
    {data:{color:"danger-color-dark"},el:{value:"red-b"}},
    {data:{color:"black"},el:{value:"blk-b"}},
    {data:{color:"primary-color-dark"},el:{value:"blu-b"}},
    {data:{color:"blue lighten-4"},el:{value:"blu-l"}},
    {data:{color:"pink lighten-4"},el:{value:"red-l"}},
    {data:{color:"bg-line"},el:{value:"grn-b"}},
    {data:{color:"light-green accent-1"},el:{value:"grn-l"}},
    {data:{color:"orange accent-4"},el:{value:"yll-b"}},
    {data:{color:"yellow accent-2"},el:{value:"yll-l"}},
    {data:{color:"brown darken-4"},el:{value:"blw-b"}},
    {data:{color:"brown lighten-3"},el:{value:"blw-l"}},
    {data:{color:"grey lighten-4"},el:{value:"blk-l"}},
  ];

  //カラー配列 = カラー変更時に
  let $clrclass = $colorlist.map((obj) => obj.el.value);

  //カラーオブジェクト = wapテンプレート用オブジェクト
  let $clrobj = $radio_data.map(obj => ({color:obj.color})));

  //valueオブジェクト
  let $vlobj = $radio_data.map(obj => ({value:obj.value}));


//共通配列に入れる関数 = 変更時に作動する
  let $fun = function(e){
    e.addEventListener('change',changecolor($picker.start,$htpl,$clrclass),false);
  }

//共通配列　＝　{ el:リスト共通, tpl:テンプレ }
  let $listcmn = {
    el:{tag:'input',type:'radio',class:'lg-input', name:'box-color',fun:$fun,},
    tpl:'<label class="radio-lg"><%=raw self%><span class="lg-design"></span><div class="w53 <%=color%> o-"></div></label>',//カラーボタンテンプレ
  };

//カラーボタンの親を生成、ノードに挿入
  let $colorbar = el$({class:'pib-bar-color my-2'});
  document.getElementById('kitecolor').appendChild($colorbar);


//カラーボタンをリストで生成、ループでテンプレートをwrapし、親要素に挿入
  fn$.list$wrap($colorlist,$listcmn)($colorbar);