123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
import XElement from './x-element.js';import Highlight from './highlight.js';import Color from './modules/color.js';
export default class XGuide extends XElement {
    title = 'Guide';    text = 'Hello World';
    checked = true;
    radioOne = undefined;    radioTwo = undefined;
    color = Color();    colorChange () { this.color = Color(); }
    active = true;    lightblue = active => active ? 'lightblue' : '';    classToggle () { this.active = !this.active; }
    value = { text: 'hello world' };
    fruit = 'Orange';    fruits = [ 'Apple', 'Orange', 'Tomato' ];
    plant = undefined;    cars = [];
    form = '';    agree = true;    disabled = false;    lastName = 'bond';    firstName = 'james';    favoriteNumber = undefined;    submit (form) {        this.form = JSON.stringify(form, null, '\t');        console.log(form);        console.log(this);    }
    highlight (query) {        return Highlight(this.querySelector(query).innerHTML, 'html')            .replace(/{{/g, '{‌{').replace(/}}/g, '}‌}').replace(/^(\t{4}|\s{16})/mg, '').slice(1);    }
    constructor () {        super();        this.shadowRoot.innerHTML = '<slot></slot>';    }
    connectedCallback () {        if (this.innerHTML) return;        this.innerHTML = this.#html;        // document.body.style.opacity = 1;    }
    #html = /*html*/`    <style>        .default {            border: solid 5px transparent;        }        .class-color {            border-color: var(--accent);        }    </style>
    <section id="text">        <h3>Text Binder</h3>        <pre>            <code html="{{highlight('#text-demo')}}"></code>            <div id="text-demo">                <span>{{text}}</span>            </div>        </pre>    </section>
    <section id="checked">        <h3>Checked Binder</h3>        <pre>            <code html="{{highlight('#checked-demo')}}"></code>            <div id="checked-demo">                <input type="checkbox" value="{{checked}}" checked="{{checked = $checked}}"> Checkbox {{checked ? 'checked' : ''}}            </div>        </pre>        <pre>            <code html="{{highlight('#radio-demo')}}"></code>            <div id="radio-demo">                <input type="radio" name="radio" value="one" checked="{{radioOne = $checked}}"> Radio One {{radioOne ? 'checked' : ''}}                <input type="radio" name="radio" value="two" checked="{{radioTwo = $checked}}"> Radio Two {{radioTwo ? 'checked' : ''}}            </div>        </pre>    </section>
    <section id="style">        <h3>Style Binder</h3>        <pre>            <code html="{{highlight('#style-demo')}}"></code>            <div id="style-demo">                <span style="color: {{color}}">Look at my style</span>                <button onclick="{{colorChange()}}">Change Color</button>            </div>        </pre>    </section>
    <section id="class">        <h3>Class Binder</h3>        <pre>            <code html="{{highlight('#class-demo')}}"></code>            <div id="class-demo">                <span class="default {{active ? 'class-color' : ''}}">Look at my class</span>                <button onclick="{{classToggle()}}">Toggle Active</button>            </div>        </pre>    </section>
    <section id="value">        <h3>Value Binder</h3>        <pre>            <code html="{{highlight('#value-demo')}}"></code>            <div id="value-demo">                <input value="{{value.text = $value.toUpperCase()}}">                <input value="{{value.text = $value.toLowerCase()}}">                <span>{{value.text}}</span>            </div>        </pre>    </section>
    <section id="each">        <h3>Each Binder</h3>        <pre>            <code html="{{highlight('#each-demo')}}"></code>            <div id="each-demo">                <div each="{{[ fruits, 'ff', 'key', 'index' ]}}">                    <div id="{{ff}}">                        <strong>Key: </strong>{{key}},                        <strong>Index: </strong>{{index}},                        <strong>Value: </strong>{{ff}}                    </div>                </div>            </div>        </pre>    </section>
    <section id="select">        <h3>Select Binder</h3>        <pre>            <code html="{{highlight('#plant-demo')}}"></code>            <div id="plant-demo">                <select value="{{plant = $value}}">                    <option value="tree">Tree</option>                    <option value="cactus">Cactus</option>                </select>                <span>{{plant}}</span>            </div>        </pre>        <pre>            <code html="{{highlight('#fruit-demo')}}"></code>            <div id="fruit-demo">                <select value="{{fruit = $value}}" each="{{[fruits, 'f']}}">                    <option value="{{f}}">{{f}}</option>                </select>                <span>{{fruit}}</span>            </div>        </pre>        <pre>            <code html="{{highlight('#cars-demo')}}"></code>            <div id="cars-demo">                <select value="{{cars = $value}}" multiple>                    <option value="volvo">Volvo</option>                    <option value="saab">Saab</option>                    <option value="opel">Opel</option>                    <option value="audi">Audi</option>                </select>                <span>{{cars}}</span>            </div>        </pre>    </section>
    <section id="html">        <h3>HTML Binder</h3>        <pre>            <code html="{{highlight('#html-demo')}}"></code>            <div id="html-demo">                <div html="{{'<strong>Hyper Text Markup Language</strong>'}}"></div>            </div>        </pre>    </section>
    <section id="submit">        <h3>Submit Binder</h3>        <br>        <form onsubmit="{{submit($form)}}" reset>            <div>{{firstName}}</div>            <input disabled="{{disabled}}" name="name.first" value="{{firstName = $value}}" placeholder="first name">            <div>{{lastName}}</div>            <input name="name.last" value="{{$value ?? lastName}}" placeholder="last name">            <br>            <br>            <input type="checkbox" name="agree" value="{{agree ? 'yes' : 'no'}}" checked="{{agree = $checked}}">Agree? {{agree ? 'yes': 'no'}}            <br>            <br>            <strong>Animal:</strong>            <input type="radio" name="animal" value="{{'dogs'}}" checked="{{$checked}}">Dogs            <input type="radio" name="animal" value="cats" checked="{{$checked}}">Cats            <br>            <br>            <div>{{favoriteNumber}}</div>            <input name="favoriteNumber" type="number" value="{{favoriteNumber = $value ?? NaN}}">            <br>            <br>            <input type="submit" value="submit">        </form>        <br>        <pre>{{form}}</pre>    </section>
    `;
}