woothu
850 lines
27 KiB
Vue
850 lines
27 KiB
Vue
<template>
|
|
<div class="animated fadeIn">
|
|
<CRow>
|
|
<CCol sm="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Credit Card </strong> <small>Form</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow>
|
|
<CCol sm="12">
|
|
<CFormInput
|
|
label="Name"
|
|
placeholder="Enter your name"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="12">
|
|
<CFormInput
|
|
label="Credit Card Number"
|
|
placeholder="0000 0000 0000 0000"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="4">
|
|
<CFormSelect
|
|
label="Month"
|
|
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
|
/>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CFormSelect
|
|
label="Year"
|
|
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
|
/>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CFormInput
|
|
label="CVV/CVC"
|
|
placeholder="123"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Company </strong><small>Form</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CFormInput
|
|
label="Company"
|
|
placeholder="Enter your company name"
|
|
/>
|
|
<CFormInput
|
|
label="VAT"
|
|
placeholder="PL1234567890"
|
|
/>
|
|
<CFormInput
|
|
label="Street"
|
|
placeholder="Enter street name"
|
|
/>
|
|
<CRow>
|
|
<CCol sm="8">
|
|
<CFormInput
|
|
label="City"
|
|
placeholder="Enter your city"
|
|
/>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CFormInput
|
|
label="Postal code"
|
|
placeholder="Postal code"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
<CFormInput
|
|
label="Country"
|
|
placeholder="Country name"
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Basic Form</strong> Elements
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
description="Let us know your full name."
|
|
label="Enter your name"
|
|
horizontal
|
|
autocomplete="name"
|
|
/>
|
|
<CFormInput
|
|
label="Static"
|
|
value="Username"
|
|
horizontal
|
|
plaintext
|
|
/>
|
|
<CFormInput
|
|
label="Text input"
|
|
description="This is a help text"
|
|
placeholder="Text"
|
|
horizontal
|
|
/>
|
|
<CFormInput
|
|
label="Date"
|
|
type="date"
|
|
horizontal
|
|
/>
|
|
<CFormInput
|
|
label="Email input"
|
|
description="Please enter your email"
|
|
placeholder="Enter your email"
|
|
type="email"
|
|
horizontal
|
|
autocomplete="email"
|
|
/>
|
|
<CFormInput
|
|
label="Password Input"
|
|
description="Please enter a complex password"
|
|
placeholder="Enter your password"
|
|
type="password"
|
|
horizontal
|
|
autocomplete="current-password"
|
|
/>
|
|
<CFormInput
|
|
label="Disabled Input"
|
|
placeholder="Disabled"
|
|
horizontal
|
|
disabled
|
|
/>
|
|
<CFormInput
|
|
label="Textarea"
|
|
placeholder="Content..."
|
|
horizontal
|
|
textarea="true"
|
|
rows="9"
|
|
/>
|
|
<CFormSelect
|
|
label="Select"
|
|
horizontal
|
|
:options="options"
|
|
placeholder="Please select"
|
|
/>
|
|
<CFormSelect
|
|
label="Select"
|
|
size="lg"
|
|
horizontal
|
|
:options="options"
|
|
placeholder="Please select"
|
|
/>
|
|
<CFormSelect
|
|
label="Select"
|
|
size="sm"
|
|
horizontal
|
|
:options="options"
|
|
placeholder="Please select"
|
|
/>
|
|
<CFormSelect
|
|
label="Select"
|
|
horizontal
|
|
:options="options"
|
|
placeholder="Please select"
|
|
disabled
|
|
/>
|
|
<template v-for="(name, key) in checkboxNames">
|
|
<div class="form-row form-group" :key="name">
|
|
<CCol sm="3">
|
|
{{name}}
|
|
</CCol>
|
|
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
|
<CFormCheckbox
|
|
v-for="option in options"
|
|
:key="option"
|
|
:label="option"
|
|
:type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
|
|
:value="option"
|
|
:custom="key > 3"
|
|
:name="`Option 1${key}`"
|
|
:checked="[0,1,4,5].includes(key) ?
|
|
`Option 1` : Math.random() > 0.6"
|
|
:class="key % 2 === 1 ? 'form-check-inline' : ''"
|
|
/>
|
|
</CCol>
|
|
</div>
|
|
</template>
|
|
<CFormFile
|
|
label="File input"
|
|
horizontal
|
|
/>
|
|
<CFormFile
|
|
label="Multiple file input"
|
|
horizontal
|
|
multiple
|
|
/>
|
|
</CForm>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Inline</strong> Form
|
|
</CCardHeader>
|
|
|
|
<CCardBody>
|
|
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
|
<CForm inline>
|
|
<CFormInput
|
|
class="mr-2"
|
|
label="<small>Name: </small>"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<CFormInput
|
|
label="<small>Email: </small>"
|
|
placeholder="jane.doe@example.com"
|
|
autocomplete="email"
|
|
/>
|
|
</CForm>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Horizontal</strong> Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
type="email"
|
|
description="Please enter your email."
|
|
autocomplete="email"
|
|
label="Email"
|
|
horizontal
|
|
placeholder="Enter Email..."
|
|
/>
|
|
<CFormInput
|
|
type="password"
|
|
description="Please enter your password."
|
|
autocomplete="current-password"
|
|
label="Password"
|
|
horizontal
|
|
placeholder="Enter Password..."
|
|
/>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Normal</strong> Form
|
|
</CCardHeader>
|
|
<CForm novalidate>
|
|
<CCardBody>
|
|
<CFormInput
|
|
type="email"
|
|
description="Please enter your email."
|
|
autocomplete="email"
|
|
label="Email"
|
|
placeholder="Enter Email..."
|
|
required
|
|
wasValidated
|
|
/>
|
|
<CFormInput
|
|
type="password"
|
|
description="Please enter your password."
|
|
autocomplete="current-password"
|
|
label="Password"
|
|
placeholder="Enter Password..."
|
|
required
|
|
wasValidated
|
|
/>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CForm>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Input <strong>Grid</strong>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow class="form-group">
|
|
<CCol sm="3">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-3"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="4">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-4"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="5">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-5"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="6">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-6"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="7">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-7"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="8">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-8"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="9">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-9"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="10">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-10"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="11">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-11"/>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow class="form-group">
|
|
<CCol sm="12">
|
|
<CFormInput class="mb-0" placeholder=".col-sm-12"/>
|
|
</CCol>
|
|
</CRow>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Input <strong>Sizes</strong>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CFormInput
|
|
label="Small input"
|
|
size="sm"
|
|
horizontal
|
|
placeholder="size='sm'"
|
|
/>
|
|
<CFormInput
|
|
label="Default input"
|
|
horizontal
|
|
placeholder="normal"
|
|
/>
|
|
<CFormInput
|
|
label="Large input"
|
|
size="lg"
|
|
horizontal
|
|
placeholder="size='lg'"
|
|
/>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
|
|
<CCol sm="12" md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Basic Validation</strong> Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm validated novalidate>
|
|
<CFormInput
|
|
label="Input is valid"
|
|
valid-feedback="Input is not required."
|
|
/>
|
|
<CFormInput
|
|
label="Input is invalid"
|
|
required
|
|
valid-feedback="Thank you :)"
|
|
invalid-feedback="Please provide a required input."
|
|
/>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="12" md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Custom Validation</strong> Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
label="Input is valid"
|
|
valid-feedback="Input is valid."
|
|
invalid-feedback="Please provide at least 4 characters."
|
|
value="Valid value"
|
|
:isValid="validator"
|
|
/>
|
|
<CFormInput
|
|
label="Input is invalid"
|
|
valid-feedback="Thank you :)"
|
|
invalid-feedback="Please provide at least 4 characters."
|
|
:isValid="validator"
|
|
/>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Icon/Text</strong> Groups
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CFormInput
|
|
placeholder="Username"
|
|
prepend="<i class='fa fa-user'></i>"
|
|
/>
|
|
<CFormInput
|
|
type="email"
|
|
placeholder="Email"
|
|
autocomplete="email"
|
|
append="<i class='fa fa-envelope-o'></i>"
|
|
/>
|
|
<CFormInput
|
|
prepend="<i class='fa fa-euro'></i>"
|
|
placeholder="ex. $1.000.000"
|
|
append=".00"
|
|
/>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Buttons</strong> Groups
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CFormInput placeholder="Username">
|
|
<template #prepend>
|
|
<CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
|
|
</template>
|
|
</CFormInput>
|
|
<CFormInput
|
|
type="email"
|
|
placeholder="Email"
|
|
autocomplete="email"
|
|
>
|
|
<template #append>
|
|
<CButton type="submit" variant="primary">Submit</CButton>
|
|
</template>
|
|
</CFormInput>
|
|
<CFormInput
|
|
type="email"
|
|
placeholder="Email"
|
|
autocomplete="email"
|
|
>
|
|
<template #prepend>
|
|
<CButton variant="primary"><i class="fa fa-facebook"></i></CButton>
|
|
</template>
|
|
<template #append>
|
|
<CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
|
|
</template>
|
|
</CFormInput>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
<strong>Dropdowns</strong> Groups
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CFormInput placeholder="Username">
|
|
<template #prepend>
|
|
<CDropdown
|
|
buttonContent="Action"
|
|
variant="primary"
|
|
>
|
|
<CDropdownItem>Action</CDropdownItem>
|
|
<CDropdownItem>Another action</CDropdownItem>
|
|
<CDropdownItem>Something else here...</CDropdownItem>
|
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
</CDropdown>
|
|
</template>
|
|
</CFormInput>
|
|
<CFormInput
|
|
type="email"
|
|
placeholder="Email"
|
|
autocomplete="email"
|
|
>
|
|
<template #append>
|
|
<CDropdown
|
|
buttonContent="Action"
|
|
variant="primary"
|
|
right
|
|
>
|
|
<CDropdownItem>Action</CDropdownItem>
|
|
<CDropdownItem>Another action</CDropdownItem>
|
|
<CDropdownItem>Something else here...</CDropdownItem>
|
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
</CDropdown>
|
|
</template>
|
|
</CFormInput>
|
|
<CFormInput placeholder="...">
|
|
|
|
<template #prepend>
|
|
<CDropdown
|
|
buttonContent="Split"
|
|
variant="primary"
|
|
split
|
|
>
|
|
<CDropdownItem href="#">Action</CDropdownItem>
|
|
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
<CDropdownItem href="#">Something else here...</CDropdownItem>
|
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
</CDropdown>
|
|
</template>
|
|
|
|
<template #append>
|
|
<CDropdown
|
|
buttonContent="Action"
|
|
variant="primary"
|
|
right
|
|
>
|
|
<CDropdownItem>Action</CDropdownItem>
|
|
<CDropdownItem>Another action</CDropdownItem>
|
|
<CDropdownItem>Something else here...</CDropdownItem>
|
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
</CDropdown>
|
|
</template>
|
|
|
|
</CFormInput>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
|
|
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow
|
|
class="form-group"
|
|
v-for="(number, key) in [4,5,6,7,8]"
|
|
:key="key"
|
|
>
|
|
<CCol :col="12 - number">
|
|
<CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
|
</CCol>
|
|
<CCol :col="number">
|
|
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
|
</CCol>
|
|
</CRow>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton size="sm" variant="primary">Action</CButton>
|
|
<CButton size="sm" variant="danger">Action</CButton>
|
|
<CButton size="sm" variant="warning">Action</CButton>
|
|
<CButton size="sm" variant="info">Action</CButton>
|
|
<CButton size="sm" variant="success">Action</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol md="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Input Grid for small devices! <small> <code>.col-*</code></small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow
|
|
class="form-group"
|
|
v-for="(number, key) in [4,5,6,7,8]"
|
|
:key="key"
|
|
>
|
|
<CCol :col="number">
|
|
<CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
|
|
</CCol>
|
|
<CCol :col="12 - number">
|
|
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
|
</CCol>
|
|
</CRow>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton size="sm" variant="primary">Action</CButton>
|
|
<CButton size="sm" variant="danger">Action</CButton>
|
|
<CButton size="sm" variant="warning">Action</CButton>
|
|
<CButton size="sm" variant="info">Action</CButton>
|
|
<CButton size="sm" variant="success">Action</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Example Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
prepend="Username"
|
|
append="<i class='fa fa-user'></i>"
|
|
/>
|
|
<CFormInput
|
|
prepend="Email"
|
|
type="email"
|
|
autocomplete="email"
|
|
append="<i class='fa fa-envelope'></i>"
|
|
/>
|
|
<CFormInput
|
|
prepend="Password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
append="<i class='fa fa-asterisk'></i>"
|
|
/>
|
|
<div class="form-group form-actions">
|
|
<CButton type="submit" size="sm" variant="primary">Submit</CButton>
|
|
</div>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Example Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
placeholder="Username"
|
|
append="<i class='fa fa-user'></i>"
|
|
/>
|
|
<CFormInput
|
|
placeholder="Email"
|
|
type="email"
|
|
autocomplete="email"
|
|
append="<i class='fa fa-envelope'></i>"
|
|
/>
|
|
<CFormInput
|
|
placeholder="Password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
append="<i class='fa fa-asterisk'></i>"
|
|
/>
|
|
<div class="form-group form-actions">
|
|
<CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
|
|
</div>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="4">
|
|
<CCard>
|
|
<CCardHeader>
|
|
Example Form
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CForm>
|
|
<CFormInput
|
|
placeholder="Username"
|
|
prepend="<i class='fa fa-user'></i>"
|
|
/>
|
|
<CFormInput
|
|
placeholder="Email"
|
|
type="email"
|
|
autocomplete="email"
|
|
prepend="<i class='fa fa-envelope'></i>"
|
|
/>
|
|
<CFormInput
|
|
placeholder="Password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
prepend="<i class='fa fa-asterisk'></i>"
|
|
/>
|
|
<div class="form-group form-actions">
|
|
<CButton type="submit" size="sm" variant="success">Submit</CButton>
|
|
</div>
|
|
</CForm>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol lg="12">
|
|
<transition name="fade">
|
|
<CCard v-if="show">
|
|
<CCardHeader>
|
|
<i class="fa fa-edit"></i> Form Elements
|
|
<div class="card-header-actions">
|
|
<CLink href="#" class="card-header-action btn-setting">
|
|
<i class="icon-settings"></i>
|
|
</CLink>
|
|
<CLink
|
|
class="card-header-action btn-minimize"
|
|
@click="formCollapsed=!formCollapsed"
|
|
>
|
|
<i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
|
|
</CLink>
|
|
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
|
<i class="icon-close"></i>
|
|
</CLink>
|
|
</div>
|
|
</CCardHeader>
|
|
<CCollapse :show="formCollapsed">
|
|
<CCardBody>
|
|
<CFormInput
|
|
label="Prepended text"
|
|
prepend="@"
|
|
description="Here's some help text"
|
|
type="email"
|
|
autocomplete="email"
|
|
/>
|
|
<CFormInput
|
|
label="Appended text"
|
|
append=".00"
|
|
description="Here's some help text"
|
|
/>
|
|
<CFormInput
|
|
label="Appended text"
|
|
prepend="$"
|
|
append=".00"
|
|
description="Here's some help text"
|
|
/>
|
|
<CFormInput
|
|
label="Append with button"
|
|
description="Here's some help text"
|
|
>
|
|
<template #append>
|
|
<CButton variant="primary">Go!</CButton>
|
|
</template>
|
|
</CFormInput>
|
|
<CFormInput label="Two-buttons append">
|
|
<template v-slot:append>
|
|
<CButton variant="primary">Search</CButton>
|
|
<CButton variant="danger">Options</CButton>
|
|
</template>
|
|
</CFormInput>
|
|
<div class="form-actions">
|
|
<CButton type="submit" variant="primary">Save changes</CButton>
|
|
<CButton variant="secondary">Cancel</CButton>
|
|
</div>
|
|
</CCardBody>
|
|
</CCollapse>
|
|
</CCard>
|
|
</transition>
|
|
</CCol>
|
|
</CRow>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'forms',
|
|
data () {
|
|
return {
|
|
selected: [], // Must be an array reference!
|
|
show: true,
|
|
id: 'sdfjosdf22',
|
|
cInput: '',
|
|
smh: 'shnsad',
|
|
trueValue:'someTrueValue',
|
|
falseValue:'someFalseValue',
|
|
checks: ['someTrueValue','hehehe2','',1,1,1,1,1,1,1,1,1,1,1,1],
|
|
selected: 'first',
|
|
isValid: '',
|
|
testkkk: 2,
|
|
horizontal: { label:'col-3', input:'col-9' },
|
|
options: ['Option 1', 'Option 2', 'Option 3'],
|
|
formCollapsed: true,
|
|
checkboxNames: ['Radios', 'Inline Radios',
|
|
'Checkboxes', 'Inline Checkboxes',
|
|
'Radios - custom', 'Inline Radios - custom',
|
|
'Checkboxes - custom', 'Inline Checkboxes - custom']
|
|
}
|
|
},
|
|
updated () {
|
|
console.log('parent updated')
|
|
},
|
|
methods: {
|
|
testt (e) {
|
|
// console.log(e)
|
|
// this.selected = 3
|
|
this.cInput += 100
|
|
},
|
|
validator (val) {
|
|
return val ? val.length >= 4 : false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s;
|
|
}
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|