Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

croud-forms

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

croud-forms - npm Package Compare versions

Comparing version 1.0.6 to 1.1.2

.postcssrc.js
.vscode/settings.json
build/check-versions.js
build/vue-loader.conf.js
build/webpack.test.conf.js
src/components/Example.vue
src/components/fields/Checkbox.vue
src/components/fields/Cleave.vue
src/components/fields/Input.vue
src/components/FormBuilder.vue
src/components/FormField.vue
src/croud-forms.js
src/mixins/Form.js
static/croud-logo.svg
static/vue-multiselect.min.css
yarn.lock

34

.eslintrc.js

@@ -0,6 +1,12 @@

// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
extends: 'airbnb-base',

@@ -11,5 +17,21 @@ // required to lint *.vue files

],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
'rules': {
'import/no-unresolved': 0,
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
'js': 'never',
'vue': 'never'
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
'optionalDependencies': ['test/unit/index.js']
}],
// allow debugger during development

@@ -19,6 +41,12 @@ 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,

"indent": [2, 4],
"arrow-body-style": [2, "as-needed"],
// "arrow-body-style": [2, "always"],
"no-param-reassign": [2, {"props": false}],
"max-len": [1, 100],
}
"camelcase": 1,
"no-undef": 1,
"arrow-parens": 0,
},
globals: {
'$': false,
},
}

50

build/build.js

@@ -1,35 +0,35 @@

// https://github.com/shelljs/shelljs
require('shelljs/global')
env.NODE_ENV = 'production'
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
console.log(
' Tip:\n' +
' Built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
)
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/', assetsPath)
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

34

build/dev-server.js

@@ -0,5 +1,12 @@

require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var config = require('../config')
var proxyMiddleware = require('http-proxy-middleware')

@@ -12,2 +19,4 @@ var webpackConfig = process.env.NODE_ENV === 'testing'

var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend

@@ -22,9 +31,8 @@ // https://github.com/chimurai/http-proxy-middleware

publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// force page reload when html-webpack-plugin template changes

@@ -44,3 +52,3 @@ compiler.plugin('compilation', function (compilation) {

}
app.use(proxyMiddleware(context, options))
app.use(proxyMiddleware(options.filter || context, options))
})

@@ -62,2 +70,8 @@

var uri = 'http://localhost:' + port
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + '\n')
})
module.exports = app.listen(port, function (err) {

@@ -68,3 +82,7 @@ if (err) {

}
console.log('Listening at http://localhost:' + port + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})

63

build/utils.js

@@ -6,3 +6,6 @@ var path = require('path')

exports.assetsPath = function (_path) {
return path.posix.join(config.build.assetsSubDirectory, _path)
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}

@@ -12,32 +15,44 @@

options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loaders) {
var sourceLoader = loaders.map(function (loader) {
var extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/, '-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader', sourceLoader].join('!')
return ['vue-style-loader'].concat(loaders)
}
}
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
return {
css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

@@ -54,3 +69,3 @@ }

test: new RegExp('\\.' + extension + '$'),
loader: loader
use: loader
})

@@ -57,0 +72,0 @@ }

71

build/webpack.base.conf.js
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {

@@ -12,55 +16,30 @@ entry: {

path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
extensions: ['.js', '.vue', '.json'],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
preLoaders: [
rules: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
loader: 'url-loader',
options: {
limit: 10000,

@@ -72,4 +51,4 @@ name: utils.assetsPath('img/[name].[hash:7].[ext]')

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
loader: 'url-loader',
options: {
limit: 10000,

@@ -80,9 +59,3 @@ name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

]
},
eslint: {
formatter: require('eslint-friendly-formatter')
},
vue: {
loaders: utils.cssLoaders()
}
}

17

build/webpack.dev.conf.js

@@ -0,7 +1,8 @@

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

@@ -15,6 +16,6 @@ // add hot-reload related code to entry chunks

module: {
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// eval-source-map is faster for development
devtool: '#eval-source-map',
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [

@@ -25,5 +26,4 @@ new webpack.DefinePlugin({

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin

@@ -34,4 +34,5 @@ new HtmlWebpackPlugin({

inject: true
})
}),
new FriendlyErrorsPlugin()
]
})

48

build/webpack.prod.conf.js
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'

@@ -15,3 +18,6 @@ ? require('../config/test.env')

module: {
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},

@@ -21,13 +27,7 @@ devtool: config.build.productionSourceMap ? '#source-map' : false,

path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
filename: utils.assetsPath('js/[name].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({

@@ -39,7 +39,12 @@ 'process.env': env

warnings: false
}
},
sourceMap: true
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin(),
// generate dist index.html with correct asset hash for caching.

@@ -83,3 +88,11 @@ // you can customize output by editing /index.html

chunks: ['vendor']
})
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]

@@ -106,2 +119,7 @@ })

if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

10

config/index.js

@@ -17,3 +17,8 @@ // see http://vuejs-templates.github.io/webpack for documentation.

productionGzip: false,
productionGzipExtensions: ['js', 'css']
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},

@@ -23,2 +28,3 @@ dev: {

port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',

@@ -32,4 +38,4 @@ assetsPublicPath: '/',

// just be aware of this issue when enabling this option.
cssSourceMap: false,
cssSourceMap: false
}
}

133

package.json
{
"name": "croud-forms",
"version": "1.0.6",
"version": "1.1.2",
"description": "Croud form building blocks",
"author": "Brock Reece <Brock Reece>",
"author": "Croud",
"private": false,
"main": "./src/croud-forms.js",
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "karma start test/unit/karma.conf.js --single-run",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
"lint": "eslint --ext .js,.vue src test/unit/specs"
},
"dependencies": {
"vue": "^1.0.21",
"babel-runtime": "^6.0.0"
"moment": "^2.18.1",
"vue-cleave": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.23.0",
"eslint": "^2.10.2",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.3.0",
"eslint-config-airbnb-base": "^3.0.1",
"eslint-plugin-import": "^1.8.1",
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.2.1",
"babel-preset-latest": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"babel-runtime": "^6.25.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.4",
"croud-vue-semantic": "^1.0.6",
"css-loader": "^0.26.1",
"eslint": "^3.14.1",
"eslint-config-airbnb-base": "^11.0.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-import": "^2.2.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.12.0",
"json-loader": "^0.5.4",
"karma": "^0.13.15",
"karma-coverage": "^0.5.5",
"karma-mocha": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon-chai": "^1.2.0",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^2.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon-chai": "^1.2.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.24",
"karma-webpack": "^1.7.0",
"lolex": "^1.4.0",
"mocha": "^2.4.5",
"chai": "^3.5.0",
"sinon": "^1.17.3",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
"phantomjs-prebuilt": "^2.1.14",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"sinon": "^1.17.7",
"sinon-chai": "^2.8.0",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"phantomjs-prebuilt": "^2.1.3",
"ora": "^0.2.0",
"shelljs": "^0.6.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.3.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^0.8.3"
"vue": "^2.4.2",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.4.2",
"vuelidate": "^0.5.0",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"
},
"main": "./src/main.js",
"browserify": {
"transform": [
"babelify",
"vueify"
]
}
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

183

README.md

@@ -1,1 +0,182 @@

# croud-forms
# croud-forms
A package for generating form inputs based on a JS object.
## Installation
Install using yarn
```bash
yarn install croud-forms
```
Or if you're after the vue1 version.
```bash
yarn install croud-forms@1.0.6
```
And add to your Vue project as a plugin
```js
import CroudForms from croud-forms
Vue.use(CroudForms)
```
## Usage
### Basics
**Field object**
The field object is made up of 3 mandatory keys and an additional contextual object that is needed for more complex fields, like select or cleave components.
```js
{
data(){
return {
field: {
field_name: 'First name', // Sets the label text
field_type: 'text', // Type of field we want to use
field_slug: 'firstName', // Key of the data object to get and set
field_options: {
select_options: {
google_adwords: 'Google Adwords', // key: value
adwords_editor: 'Adwords Editor',
bing_ads: 'Bing Ads',
},
},
},
user: {
firstName: '',
},
}
},
}
```
**Field components**
Croud-forms provides two different components for displaying the form fields.
```html
<!-- Form field component -->
<croud-form-field :field="field" v-model="user[field.field_slug]" />
<!-- Table row component -->
<table class="ui very basic table">
<tr is="croud-form-row" :field="field" v-model="user[field.field_slug]"></tr>
</table>
```
### Read Only
Croud-forms allows a **read-only** flag to be passed into any field as a prop
```html
<croud-form-field :field="field" v-model="user.firstName" :read-only="true"/>
```
### Vuelidate integration
Croud-forms can integrate with [vuelidate](https://monterail.github.io/vuelidate/) to provide visual feedback when the output of the form isn't what we expected.
You can add a validation object to your component which can dictate the rules for your fields, below is a very basic example, view the [vuelidate docs](https://monterail.github.io/vuelidate/#examples) for more inspiration.
```js
import { validationMixin } from 'vuelidate'
import { required, minLength, numeric, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
user: {
firstName: {
required,
minLength: minLength(2),
},
}
},
```
And for the visual feedback, you can pass the validation object through to the croud-form-field, like so...
```html
<croud-form-field field="field" v-model="user.firstName" :validation="$v.user.firstName" />
```
### Bringing it all together
This project includes a **croud-form-builder** component that can build a form based on a JSON schema and can also handle the validation
You can add this component to your mark up with the following syntax
```html
<croud-form-builder :read-only="false" :schema='schema' v-model="user" :validations="$v.user" />
```
And you can build up your model, schema and validations from within your component.
```js
import { validationMixin } from 'vuelidate'
import { required, minLength, numeric, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
data() {
return {
user: {
firstName: '',
lastName: '',
email: '',
age: 0,
},
schema: [
{
class: 'two fields',
children: [
{
field_name: 'First name',
field_type: 'text',
field_slug: 'firstName',
},
{
field_name: 'Last name',
field_type: 'text',
field_slug: 'lastName',
},
],
},
{
field_name: 'Email Address',
field_type: 'email',
field_slug: 'email',
},
{
field_name: 'Age',
field_type: 'number',
field_slug: 'age',
},
],
}
},
validations: {
user: {
firstName: {
required,
minLength: minLength(2),
},
lasstName: {
required,
minLength: minLength(2),
},
email: {
required,
email,
},
age: {
required,
numeric,
},
},
},
}
```

23

src/main.js

@@ -1,13 +0,12 @@

const FormRow = require('./components/FormRow.vue')
const DateTime = require('./components/fields/DateTime.vue')
const Date = require('./components/fields/Date.vue')
const Time = require('./components/fields/Time.vue')
import Vue from 'vue'
import App from './App'
module.exports = {
install(Vue) {
Vue.component('croud-form-row', FormRow)
Vue.component('croud-date-time', DateTime)
Vue.component('croud-date', Date)
Vue.component('croud-time', Time)
},
}
Vue.config.productionTip = false
Vue.use(require('croud-vue-semantic'))
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
})

30

src/mixins/Input.js
module.exports = {
model: {
prop: 'model',
event: 'set-value',
},
props: {
field: {
required: true,
twoWay: true,
},

@@ -10,3 +14,2 @@

required: true,
twoWay: true,
},

@@ -25,3 +28,26 @@

},
validation: {
required: true,
},
},
computed: {
value: {
get() {
return this.model
},
set(val) {
this.$emit('set-value', val)
},
},
},
watch: {
value() {
if (this.validation.$touch) {
this.validation.$touch()
}
},
},
}

18

test/unit/index.js

@@ -0,8 +1,16 @@

import Vue from 'vue';
Vue.config.productionTip = false;
require('es6-promise').polyfill();
window.jQuery = window.$ = require('jquery')
window.gateway_url = 'gateway.croudcontrol.dev'
// Polyfill fn.bind() for PhantomJS
/* eslint-disable no-extend-native */
Function.prototype.bind = require('function-bind')
Function.prototype.bind = require('function-bind');
// require all test files (files that ends with .spec.js)
var testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
const testsContext = require.context('./specs', true, /\.spec$/);
testsContext.keys().forEach(testsContext);

@@ -12,3 +20,3 @@ // require all src files except main.js for coverage.

// you want coverage for.
var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
srcContext.keys().forEach(srcContext);

60

test/unit/karma.conf.js

@@ -6,48 +6,7 @@ // This is a karma config file. For more details see

var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('../../build/webpack.base.conf')
var utils = require('../../build/utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../../')
var webpackConfig = require('../../build/webpack.test.conf');
var webpackConfig = merge(baseConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
loaders: utils.styleLoaders()
},
devtool: '#inline-source-map',
vue: {
loaders: {
js: 'isparta'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
// make sure isparta loader is applied before eslint
webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
webpackConfig.module.preLoaders.unshift({
test: /\.js$/,
loader: 'isparta',
include: path.resolve(projectRoot, 'src')
})
// only apply babel for test files when using isparta
webpackConfig.module.loaders.some(function (loader, i) {
if (loader.loader === 'babel') {
loader.include = path.resolve(projectRoot, 'test/unit')
return true
}
})
module.exports = function (config) {
config.set({
browserNoActivityTimeout: 100000,
// to run in additional browsers:

@@ -60,3 +19,6 @@ // 1. install corresponding karma launcher

reporters: ['spec', 'coverage'],
files: ['./index.js'],
files: [
'../../node_modules/babel-polyfill/dist/polyfill.js',
'./index.js',
],
preprocessors: {

@@ -67,3 +29,3 @@ './index.js': ['webpack', 'sourcemap']

webpackMiddleware: {
noInfo: true
noInfo: true,
},

@@ -74,6 +36,6 @@ coverageReporter: {

{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
{ type: 'text-summary' },
]
}
})
}
},
});
};
.babelrc

Sorry, the diff of this file is not supported yet

.editorconfig

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

src/App.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Date.vue

Sorry, the diff of this file is not supported yet

src/components/fields/DateTime.vue

Sorry, the diff of this file is not supported yet

src/components/fields/General.vue

Sorry, the diff of this file is not supported yet

src/components/fields/MultiCheckbox.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Number.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Radio.vue

Sorry, the diff of this file is not supported yet

src/components/fields/SearchSelect.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Select.vue

Sorry, the diff of this file is not supported yet

src/components/fields/SortCode.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Text.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Textarea.vue

Sorry, the diff of this file is not supported yet

src/components/fields/Time.vue

Sorry, the diff of this file is not supported yet

src/components/FormRow.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc