@extends('component-base.layout')

@section('title')
    Input Number
@endsection

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
{{--    <link rel="stylesheet" href="/_assets/commons/css/test_component.css?v={{config("sns-line.version")}}" type="text/css">--}}
    <link rel="stylesheet" href="/css/component-base/input/input-number.css?v={{config("sns-line.version")}}">
    <style>
        .lme-number {
            margin-right: 20px;
        }
        .input-number-demo-area {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .input-number-demo-area-title {
            font-size: 16px;
            font-weight: 600;
            color: #222;
            margin-bottom: 16px;
        }
        .input-number-demo-area-desc {
            font-size: 12px;
            color: #9A9EAD;
            margin-bottom: 16px;
        }
        .input-number-demo-area-row {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak>

        {{-- Large (40px) --}}
        <div class="input-number-demo-area">
            <div class="input-number-demo-area-title">大きいサイズ</div>
            <div class="input-number-demo-area-desc">height: 40px</div>
            <div class="input-number-demo-area-row">
                <lme-input-number v-model="number11"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="40px">
                </lme-input-number>
                <lme-input-number v-model="number12"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="40px">
                </lme-input-number>
                <lme-input-number v-model="number13"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="40px">
                </lme-input-number>
            </div>
        </div>

        {{-- Medium (32px) --}}
        <div class="input-number-demo-area">
            <div class="input-number-demo-area-title">中サイズ</div>
            <div class="input-number-demo-area-desc">height: 32px</div>
            <div class="input-number-demo-area-row">
                <lme-input-number v-model="number21"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="32px">
                </lme-input-number>
                <lme-input-number v-model="number22"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="32px">
                </lme-input-number>
                <lme-input-number v-model="number23"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="32px">
                </lme-input-number>
            </div>
        </div>

        {{-- Small (24px) --}}
        <div class="input-number-demo-area">
            <div class="input-number-demo-area-title">小さいサイズ</div>
            <div class="input-number-demo-area-desc">height: 24px</div>
            <div class="input-number-demo-area-row">
                <lme-input-number v-model="number31"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="24px">
                </lme-input-number>
                <lme-input-number v-model="number32"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="24px">
                </lme-input-number>
                <lme-input-number v-model="number33"
                                  type="number"
                                  placeholder="00"
                                  width="80px"
                                  :min="0"
                                  height="24px">
                </lme-input-number>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="/js/component-base/input/lme-input-number.js?v={{config("sns-line.version")}}"></script>
    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                number11: null,
                number12: null,
                number13: null,
                number21: null,
                number22: null,
                number23: null,
                number31: null,
                number32: null,
                number33: null,
            },
            watch: {
            },
            created() {
            },
            mounted() {
            },
            methods: {
            }
        })
    </script>
@endpush