manabuyasuda

/**
 * 要素の幅と高さを取得します。
 * @param {HTMLElement} target 幅と高さを取得する要素
 * @return {{width: Number, height: Number}}
 * @example
 * const foo = getSize(document.querySelector('.foo'))
 * console.log(foo) // => {width: 300, height: 200}
 * console.log(foo.width) // => 300
 * console.log(foo.height) // => 200
 */

manabuyasuda

/**
 * 仕様としてフォーカス可能な要素。
 */
const focusableElementsString =
  'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), input[type="search"]:not([disabled]), select:not([disabled])'

/**
 * 仕様としてフォーカス可能、かつ`tabindex="-1"`が指定されていない要素。
 */
const currentFocusableElementsString =

manabuyasuda

import { loadDefaultJapaneseParser } from 'budoux'

const parser = loadDefaultJapaneseParser()

/**
 * 文字列を解析して、適切に改行されるように`wbr`タグを挿入します。
 * IEは`wbr`タグに対応していません。
 * @see https://caniuse.com/wbr-element
 * @see https://github.com/google/budoux/tree/main/javascript
 * @param {HTMLElement} element 最適化する要素

manabuyasuda

//- @param {Object} params
//- @param {String} params.name [""] SVGスプライトのid名
//-
//- @examples Input
//- +Icon({ name: "menu" })
//- @examples Output
//- <svg role="img">
//-   <use xlink:href="/assets/svg/sprite.svg#menu"></use>
//- </svg>
mixin Icon(params={})

manabuyasuda

//- @param {Object} params
//- @param {String} params.src [""] 画像パス
//- @param {String} params.srcset [""] 画像のalt属性値
//-
//- @examples Input
//- +Picture({ src: "https://placehold.jp/300x300.png", alt: "" })
//-   +Picture_Source({ media: "lg", srcset: "https://placehold.jp/1000x1000.png" })
//-   +Picture_Source({ media: "md", srcset: "https://placehold.jp/600x600.png" })
//-
//- @examples Output

manabuyasuda

//- @param {Object} params
//- @param {String} params.type ["button"] type属性値
//- @param {boolean|string} params.size [false] ボタンのサイズ指定（`auto`,`full`）
//- @param {boolean|string} params.icon [false] ボタンのアイコン指定（`more`）
//- @param {boolean} params.disabled [false] disabled属性値を出力するかの真偽値
//-
//- @examples Input
//- +Button デフォルトボタン
//- @examples Output
//- <button class="sw-Button" type="button">デフォルトボタン</button>

manabuyasuda

//- @param {Object} params
//- @param {boolean|string} params.start [false] start属性値を出力するかの真偽値、または出力する数値
//-
//- @examples Input
//- +ListOrder
//-   +ListOrder_Item リスト1
//-   +ListOrder_Item リスト2
//-     +ListOrder_Child
//-       +ListOrder_Item リスト2-1
//-       +ListOrder_Item リスト2-2

manabuyasuda

//- @param {Object} params
//- @param {String} params.id [""] id属性値
//- @param {String} params.name [""] name属性値
//- @param {String} params.value [""] value属性値
//- @param {boolean} params.disabled [false] disabled属性値を出力するかの真偽値
//- @param {boolean} params.error [false] エラー表示用のクラスを出力するかの真偽値
//-
//- @examples Input
//- +Checkbox({id: "checkbox1-1", name: "checkbox1", value: "0"}) チェックボックス1
//-

manabuyasuda

// package.jsonの`scripts`に以下のように指定する
// "duplicateFiles": "node scripts/duplicateFiles.js"
const fs = require('fs-extra')
// 複製元のパス
const src = './src/'
// 複製先のパス
const dest = './public/'

// `dest`をフォルダごと、すべて削除する
try {

manabuyasuda

/**
 * 要素が横スクロール可能な状態かを返します。
 * @param {HTMLElement} element テーブルをスクロールしている親要素
 * @return Boolean
 * @example
 * const tables = document.querySelectorAll('.table-wrap')
 * Array.from(tables).forEach((table) => {
 *   canScrolled(table) ? canFunc() : notFunc()
 * })
 */