@extends('component-base.layout')

@section('title')
    Select
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/input/select.css?v={{config("sns-line.version")}}">
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-flex-col" style="gap: 20px">
            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">上ラベル</div>
                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected"
                            :options="options"
                            width="250px"
                            height="40px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected2"
                            :options="options"
                            width="250px"
                            height="32px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected3"
                            :options="options"
                            width="250px"
                            height="24px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected4"
                            :options="options"
                            width="250px"
                            height="40px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected5"
                            :options="options"
                            width="250px"
                            height="32px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="vertical"
                            v-model="selected6"
                            :options="options"
                            width="250px"
                            height="24px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="vertical"
                            v-model="selected7"
                            :options="options"
                            width="250px"
                            height="40px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="vertical"
                            v-model="selected8"
                            :options="options"
                            width="250px"
                            height="32px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="vertical"
                            v-model="selected9"
                            :options="options"
                            width="250px"
                            height="24px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="vertical"
                            width="250px"
                            height="40px"
                            @change="onChange4"
                            v-model="users"
                            :error-message="selected_4_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="vertical"
                            width="250px"
                            height="32px"
                            @change="onChange5"
                            v-model="users2"
                            :error-message="selected_5_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="vertical"
                            width="250px"
                            height="24px"
                            @change="onChange6"
                            v-model="users3"
                            :error-message="selected_6_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px;">
                <div style="font-weight: bold">横ラベル</div>
                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected"
                            :options="options"
                            width="220px"
                            height="40px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected2"
                            :options="options"
                            width="220px"
                            height="32px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected3"
                            :options="options"
                            width="220px"
                            height="24px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected4"
                            :options="options"
                            width="220px"
                            height="40px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected5"
                            :options="options"
                            width="220px"
                            height="32px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            direction="horizontal"
                            v-model="selected6"
                            :options="options"
                            width="220px"
                            height="24px"
                            @change="onChange"
                            error-message="入力必須項目です"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="horizontal"
                            v-model="selected7"
                            :options="options"
                            width="220px"
                            height="40px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="horizontal"
                            v-model="selected8"
                            :options="options"
                            width="220px"
                            height="32px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            required
                            disabled
                            direction="horizontal"
                            v-model="selected9"
                            :options="options"
                            width="220px"
                            height="24px"
                            @change="onChange"
                            placeholder="プレースホルダー">
                    </lme-select>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="horizontal"
                            width="220px"
                            height="40px"
                            @change="onChange7"
                            v-model="users4"
                            :error-message="selected_7_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="horizontal"
                            width="220px"
                            height="32px"
                            @change="onChange8"
                            v-model="users5"
                            :error-message="selected_8_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>

                    <lme-select
                            label="ラベル"
                            :required="true"
                            direction="horizontal"
                            width="220px"
                            height="24px"
                            @change="onChange9"
                            v-model="users6"
                            :error-message="selected_9_error"
                            :options="options"
                            multiple
                            placeholder="選択してください">
                    </lme-select>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 30px;background: white; border-radius: 10px;min-height: 350px">
                <lme-select
                        label="ラベル"
                        direction="horizontal"
                        v-model="categories.selected"
                        :options="categories"
                        width="200px"
                        height="40px"
                        @change="onChange"
                        category
                        required
                        placeholder="プレースホルダー">
                </lme-select>

                <lme-select
                        label="ラベル"
                        direction="vertical"
                        v-model="categories2.selected"
                        :options="categories2"
                        width="200px"
                        height="40px"
                        @change="onChange"
                        category
                        required
                        placeholder="プレースホルダー">
                </lme-select>


            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/input/lme-select.js"></script>
    <script src="/js/component-base/input/select.js?v={{config("sns-line.version")}}"></script>
@endpush