@extends('component-base.layout')

@section('title')
    Input
@endsection

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

@section('contents')
    <div id="vue-element" v-cloak style="display: flex;flex-direction: column;gap: 20px">
        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">input上ラベル</div>
            <div class="lme-flex lme-items-start lme-justify-between" style="gap: 20px">
                <lme-input v-model="row_21"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           :error-message="row_21_error"
                           width="300px"
                           size="lg">
                </lme-input>


                <lme-input v-model="row_22"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           :error-message="row_22_error"
                           width="300px"
                           size="md">
                </lme-input>

                <lme-input v-model="row_23"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           :error-message="row_23_error"
                           width="300px"
                           size="sm">
                </lme-input>
            </div>

            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input v-model="row_2111"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="300px"
                           size="lg">
                </lme-input>

                <lme-input v-model="row_2222"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="300px"
                           size="md">
                </lme-input>

                <lme-input v-model="row_2333"
                           required
                           label="ラベル"
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="300px"
                           size="sm">
                </lme-input>
            </div>

            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input v-model="view"
                           label="ラベル"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="300px"
                           size="lg">
                </lme-input>

                <lme-input v-model="view"
                           label="ラベル"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="300px"
                           size="md">
                </lme-input>

                <lme-input v-model="view"
                           label="ラベル"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="300px"
                           size="sm">
                </lme-input>
            </div>
        </div>

        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">input 横ラベル</div>
            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input v-model="row_51"
                           type="text"
                           label="ラベル"
                           :vertical="false"
                           :required="true"
                           :error-message="row_51_error"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="lg">
                </lme-input>

                <lme-input v-model="row_52"
                           label="ラベル"
                           :vertical="false"
                           :required="true"
                           :error-message="row_52_error"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="md">
                </lme-input>

                <lme-input v-model="row_53"
                           label="ラベル"
                           :vertical="false"
                           :required="true"
                           :error-message="row_53_error"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="sm">
                </lme-input>
            </div>

            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input v-model="row_61"
                           label="ラベル"
                           :vertical="false"
                           required
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="250px"
                           size="lg">
                </lme-input>

                <lme-input v-model="row_62"
                           label="ラベル"
                           :vertical="false"
                           required
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="250px"
                           size="md">
                </lme-input>

                <lme-input v-model="row_63"
                           label="ラベル"
                           :vertical="false"
                           required
                           placeholder="プレースホルダー"
                           error-message="入力必須項目です"
                           width="250px"
                           size="sm">
                </lme-input>
            </div>

            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input v-model="view"
                           label="ラベル"
                           :vertical="false"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="lg">
                </lme-input>

                <lme-input v-model="view"
                           label="ラベル"
                           :vertical="false"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="md">
                </lme-input>

                <lme-input v-model="view"
                           label="ラベル"
                           :vertical="false"
                           :required="false"
                           :disabled="true"
                           placeholder="プレースホルダー"
                           width="250px"
                           size="sm">
                </lme-input>
            </div>
        </div>

        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">textarea</div>

            <div class="lme-flex lme-items-center lme-justify-between">
                <lme-textarea
                        label="プレースホルダー"
                        required
                        placeholder="プレースホルダー"
                        width="300px"
                        height="80px"
                        v-model="content"
                        :max-count="1000"
                        :error-message="content_error">
                </lme-textarea>

                <lme-textarea
                        label="プレースホルダー"
                        required
                        placeholder="プレースホルダー"
                        width="300px"
                        height="80px"
                        v-model="content2"
                        :max-count="1000"
                        error-message="入力必須項目です">
                </lme-textarea>

                <lme-textarea
                        label="プレースホルダー"
                        required
                        placeholder="プレースホルダー"
                        width="300px"
                        height="80px"
                        v-model="content3"
                        :max-count="1000"
                        disabled>
                </lme-textarea>
            </div>
        </div>

        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">検索</div>
            <div class="lme-flex lme-flex-col lme-items-start" style="gap: 20px">
                <lme-input-search v-model="search"
                                  placeholder="プレースホルダー"
                                  :disabled="false"
                                  @search="onSearch"
                                  width="350px"
                                  height="32px">
                </lme-input-search>

                <lme-input-search v-model="search2"
                                  placeholder="プレースホルダー"
                                  :disabled="true"
                                  @search="onSearch"
                                  width="350px"
                                  height="32px">
                </lme-input-search>
            </div>
        </div>

        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">password</div>
            <div class="lme-flex lme-flex-col lme-items-start" style="gap: 20px">
                <lme-input v-model="password"
                           type="password"
                           label="ラベル"
                           placeholder="プレースホルダー"
                           :prefix="true"
                           :suffix="false"
                           @suffix-click="togglePassword"
                           :max-count="10"
                           width="350px"
                           size="md">
                </lme-input>

                <lme-input v-model="password_2"
                           :type="showPassword ? 'text' : 'password'"
                           label="ラベル"
                           :required="true"
                           :error-message="password_2_error"
                           placeholder="プレースホルダー"
                           :prefix="true"
                           :suffix="true"
                           @suffix-click="togglePassword"
                           width="350px"
                           size="md">
                </lme-input>
            </div>
        </div>

        <div class="lme-flex lme-flex-col" style="max-width: 1200px;padding: 20px;gap: 20px;background-color: #FFFFFF;border-radius: 10px">
            <div style="font-weight: bold">input number</div>
            <div class="lme-flex lme-items-start lme-justify-between">
                <lme-input-number v-model="row_211"
                                  type="number"
                                  label="ラベル"
                                  placeholder="00"
                                  width="300px"
                                  :min="0"
                                  height="40px">
                </lme-input-number>

                <lme-input-number v-model="row_222"
                                  type="number"
                                  label="ラベル"
                                  placeholder="00"
                                  width="300px"
                                  :min="0"
                                  required
                                  :error-message="row_222_error"
                                  height="40px">
                </lme-input-number>

                <lme-input-number v-model="row_233"
                                  type="number"
                                  label="ラベル"
                                  placeholder="00"
                                  width="300px"
                                  :min="0"
                                  disabled
                                  height="40px">
                </lme-input-number>
            </div>
        </div>
    </div>
@endsection

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