chore: Removed outdated examples
This commit is contained in:
Zaytsev Kirill
parent
323fbf4bf4
commit
9004e5d690
@ -1,109 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
id="app"
|
|
||||||
class="specimen-list"
|
|
||||||
>
|
|
||||||
<SpecimenButton />
|
|
||||||
<SpecimenBox />
|
|
||||||
<SpecimenFile />
|
|
||||||
<SpecimenGroup />
|
|
||||||
<SpecimenSelect />
|
|
||||||
<SpecimenSlider />
|
|
||||||
<SpecimenText />
|
|
||||||
<SpecimenTextarea />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import SpecimenText from './specimens/SpecimenText'
|
|
||||||
import SpecimenTextarea from './specimens/SpecimenTextarea'
|
|
||||||
import SpecimenGroup from './specimens/SpecimenGroup'
|
|
||||||
import SpecimenFile from './specimens/SpecimenFile'
|
|
||||||
import SpecimenButton from './specimens/SpecimenButton'
|
|
||||||
import SpecimenBox from './specimens/SpecimenBox'
|
|
||||||
import SpecimenSlider from './specimens/SpecimenSlider'
|
|
||||||
import SpecimenSelect from './specimens/SpecimenSelect'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
SpecimenButton,
|
|
||||||
SpecimenBox,
|
|
||||||
SpecimenText,
|
|
||||||
SpecimenTextarea,
|
|
||||||
SpecimenGroup,
|
|
||||||
SpecimenFile,
|
|
||||||
SpecimenSlider,
|
|
||||||
SpecimenSelect,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
$formulate-font-stack: Arial, sans-serif;
|
|
||||||
$formulate-gray: gray;
|
|
||||||
$formulate-green: green;
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: $formulate-font-stack;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background-color: white;
|
|
||||||
padding: .5em 0;
|
|
||||||
color: $formulate-green;
|
|
||||||
border-bottom: 1px solid $formulate-gray;
|
|
||||||
margin: 2em 0 0 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.specimen-list {
|
|
||||||
padding: 1em;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
@media (min-width: 756px) {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.specimens {
|
|
||||||
@media (min-width: 500px) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.specimen {
|
|
||||||
max-width: 400px;
|
|
||||||
padding: 1em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
@media (min-width: 500px) {
|
|
||||||
width: 50%;
|
|
||||||
border-bottom: 1px solid $formulate-gray;
|
|
||||||
&:nth-of-type(odd) {
|
|
||||||
border-right: 1px solid $formulate-gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 900px) {
|
|
||||||
width: 33.332%;
|
|
||||||
border-right: 1px solid $formulate-gray;
|
|
||||||
|
|
||||||
&:nth-of-type(3n) {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import VueFormulario from '@/index.ts'
|
|
||||||
import FormulateSpecimens from './FormulateSpecimens.vue'
|
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
|
||||||
Vue.use(VueFormulario)
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
render: h => h(FormulateSpecimens)
|
|
||||||
}).$mount('#app')
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>Box classification</h2>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Single Checkbox</h3>
|
|
||||||
<FormulateInput
|
|
||||||
type="checkbox"
|
|
||||||
label="Are you attractive?"
|
|
||||||
help="In your own opinion at least."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Multi checkbox</h3>
|
|
||||||
<FormulateInput
|
|
||||||
type="checkbox"
|
|
||||||
label="Which recent U.S. president is your favorite?"
|
|
||||||
:options="{trump: 'Trump', obama: 'Obama', bush: 'Bush', clinton: 'Clinton'}"
|
|
||||||
help="Your selection will be transmitted directly to the NSA."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Radio</h3>
|
|
||||||
<FormulateInput
|
|
||||||
type="radio"
|
|
||||||
label="What heavily body would you like to visit?"
|
|
||||||
:options="{moon: 'Moon', mars: 'Mars', venus: 'Venus', mercury: 'Mercury', sun: 'Sun'}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens">
|
|
||||||
<h2>Button classification</h2>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Button</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Click me"
|
|
||||||
type="button"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Submit</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Submit me"
|
|
||||||
type="submit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>File classification</h2>
|
|
||||||
<div class="specimen specimen">
|
|
||||||
<h3>Text</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Upload a file"
|
|
||||||
type="file"
|
|
||||||
help="Select any file to upload"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Image</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="What do you look like?"
|
|
||||||
type="image"
|
|
||||||
help="Select a picture to upload."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--group">
|
|
||||||
<h2>Group classification</h2>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Non-repeatable group</h3>
|
|
||||||
<FormulateInput
|
|
||||||
type="group"
|
|
||||||
>
|
|
||||||
<FormulateInput
|
|
||||||
label="City"
|
|
||||||
type="text"
|
|
||||||
name="city"
|
|
||||||
/>
|
|
||||||
<FormulateInput
|
|
||||||
label="State"
|
|
||||||
type="select"
|
|
||||||
:options="{NE: 'Nebraska', MO: 'Missouri', VA: 'Virginia'}"
|
|
||||||
placeholder="Select a state"
|
|
||||||
/>
|
|
||||||
</FormulateInput>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Repeatable group</h3>
|
|
||||||
<FormulateInput
|
|
||||||
name="users"
|
|
||||||
label="Invite some new users"
|
|
||||||
type="group"
|
|
||||||
placeholder="users"
|
|
||||||
help="Fields can be grouped"
|
|
||||||
:repeatable="true"
|
|
||||||
>
|
|
||||||
<FormulateInput
|
|
||||||
label="First and last name"
|
|
||||||
name="name"
|
|
||||||
type="text"
|
|
||||||
placeholder="User’s name"
|
|
||||||
validation="required"
|
|
||||||
/>
|
|
||||||
<FormulateInput
|
|
||||||
name="email"
|
|
||||||
label="Email address"
|
|
||||||
type="email"
|
|
||||||
placeholder="User’s email"
|
|
||||||
validation="required|email"
|
|
||||||
/>
|
|
||||||
</FormulateInput>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>Select classification</h2>
|
|
||||||
<div class="specimen specimen--single">
|
|
||||||
<h3>Select</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="What planet is the hottest?"
|
|
||||||
type="select"
|
|
||||||
:options="{mercury: 'Mercury', venus: 'Venus', earth: 'Earth', mars: 'Mars'}"
|
|
||||||
help="Average temperature on the surface of the planet."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>Slider classification</h2>
|
|
||||||
<div class="specimen specimen--single">
|
|
||||||
<h3>Range</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="How far should we crank it up?"
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="11"
|
|
||||||
:show-value="true"
|
|
||||||
help="Whenever we’re allowed to have a party again..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>Text classification</h2>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Color</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Pick a color?"
|
|
||||||
type="color"
|
|
||||||
help="Choose your favorite."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Date</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Select a day."
|
|
||||||
type="date"
|
|
||||||
help="Choose your birthday."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Datetime-local</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Select a day and time."
|
|
||||||
type="datetime-local"
|
|
||||||
help="When is the meeting?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Email</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="What is your email?"
|
|
||||||
type="email"
|
|
||||||
placeholder="placeholder@example.com"
|
|
||||||
help="What is your email address?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Month</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Favorite month"
|
|
||||||
type="month"
|
|
||||||
help="When is Christmas?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Number</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="How old are you?"
|
|
||||||
type="number"
|
|
||||||
placeholder="25"
|
|
||||||
help="Select your age"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Password</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Enter a password."
|
|
||||||
type="password"
|
|
||||||
help="Choose something long and tricky."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Search</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="But I still haven't found."
|
|
||||||
type="search"
|
|
||||||
placeholder="What im looking for..."
|
|
||||||
help="I have climbed the highest mountains."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Tel</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Oh you like Mike & Ikes?"
|
|
||||||
type="tel"
|
|
||||||
placeholder="Can I have you number..."
|
|
||||||
help="Can I have it?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Time</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="What time is dinner?"
|
|
||||||
type="time"
|
|
||||||
placeholder="Pick a time"
|
|
||||||
help="When will you eat your food?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Text</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Username"
|
|
||||||
type="text"
|
|
||||||
placeholder="Username"
|
|
||||||
help="Select a username"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Url</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="Personal website"
|
|
||||||
type="url"
|
|
||||||
placeholder="https://"
|
|
||||||
help="What is the url for your website?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="specimen">
|
|
||||||
<h3>Week</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="I don’t know who would use this field."
|
|
||||||
type="week"
|
|
||||||
placeholder="Pick a week"
|
|
||||||
help="What week is it?"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="specimens specimens--text">
|
|
||||||
<h2>Textarea classification</h2>
|
|
||||||
<div class="specimen specimen--single">
|
|
||||||
<h3>Textarea</h3>
|
|
||||||
<FormulateInput
|
|
||||||
label="What is your life story?"
|
|
||||||
type="textarea"
|
|
||||||
help="I want to hear all about it!"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -5,11 +5,11 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run build:esm & npm run build:umd & npm run build:iife & wait && echo \"Build complete:\nesm: $(gzip -c dist/formulario.esm.js | wc -c)b gzip\numd: $(gzip -c dist/formulario.umd.js | wc -c)b gzip\nmin: $(gzip -c dist/formulario.min.js | wc -c)b gzip\"",
|
"build": "npm run build:esm & npm run build:umd & npm run build:iife & wait && echo \"Build complete:\nesm: $(gzip -c dist/formulario.esm.js | wc -c)b gzip\numd: $(gzip -c dist/formulario.umd.js | wc -c)b gzip\nmin: $(gzip -c dist/formulario.min.js | wc -c)b gzip\"",
|
||||||
"test": "NODE_ENV=test jest --config test/jest.conf.js",
|
"test": "NODE_ENV=test jest --config test/jest.conf.js",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
"build:esm": "rollup --config build/rollup.config.js --format es --file dist/formulario.esm.js",
|
"build:esm": "rollup --config build/rollup.config.js --format es --file dist/formulario.esm.js",
|
||||||
"build:iife": "rollup --config build/rollup.iife.config.js --format iife --file dist/formulario.min.js",
|
"build:iife": "rollup --config build/rollup.iife.config.js --format iife --file dist/formulario.min.js",
|
||||||
"build:size": "gzip -c dist/formulario.esm.js | wc -c",
|
"build:size": "gzip -c dist/formulario.esm.js | wc -c",
|
||||||
"build:umd": "rollup --config build/rollup.config.js --format umd --file dist/formulario.umd.js",
|
"build:umd": "rollup --config build/rollup.config.js --format umd --file dist/formulario.umd.js",
|
||||||
"dev": "vue-cli-service serve --port=7872 examples/main.js",
|
|
||||||
"test:coverage": "NODE_ENV=test jest --config test/jest.conf.js --coverage",
|
"test:coverage": "NODE_ENV=test jest --config test/jest.conf.js --coverage",
|
||||||
"test:watch": "NODE_ENV=test jest --config test/jest.conf.js --watch"
|
"test:watch": "NODE_ENV=test jest --config test/jest.conf.js --watch"
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user