RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-22 05:16:05 +03:00
Code Issues Projects Releases Wiki Activity

chore: Removed outdated examples

Browse Source
This commit is contained in:
Zaytsev Kirill 2020-10-18 17:15:50 +03:00
parent 323fbf4bf4
commit 9004e5d690
11 changed files with 1 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
examples/FormulateSpecimens.vue
View File

@ -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>

10
examples/main.js
View File

@ -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')

30
examples/specimens/SpecimenBox.vue
View File

@ -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>

19
examples/specimens/SpecimenButton.vue
View File

@ -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>

21
examples/specimens/SpecimenFile.vue
View File

@ -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>

49
examples/specimens/SpecimenGroup.vue
View File

@ -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>

14
examples/specimens/SpecimenSelect.vue
View File

@ -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>

16
examples/specimens/SpecimenSlider.vue
View File

@ -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>

117
examples/specimens/SpecimenText.vue
View File

@ -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>

13
examples/specimens/SpecimenTextarea.vue
View File

@ -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>

2
package.json
View File

@ -5,11 +5,11 @@
"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\"",
"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: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: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:watch": "NODE_ENV=test jest --config test/jest.conf.js --watch"
},