New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@treacherous/vue

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@treacherous/vue - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

0

build/paths.js

@@ -0,0 +0,0 @@ module.exports = {

18

build/tasks/clean.js

@@ -1,9 +0,11 @@

var gulp = require("gulp");
var del = require("del");
var fs = require('fs');
var paths = require("../paths");
const del = require("del");
const paths = require("../paths");
gulp.task("clean", function(callback) {
del.sync(paths.dist);
callback();
});
function clean() {
return new Promise((resolve, reject) => {
del.sync(paths.dist);
resolve();
});
}
exports.clean = clean;

35

build/tasks/compile.js

@@ -1,2 +0,2 @@

const gulp = require('gulp');
const {src, dest, series} = require('gulp');
const ts = require('gulp-typescript');

@@ -6,7 +6,7 @@ const merge = require('merge2');

const webpack = require('webpack-stream');
const runSequence = require("run-sequence");
const {clean} = require("./clean");
var compileFor = function(moduleType, withTypings = false, target = "es2015") {
const compileFor = function(moduleType, withTypings = false, target = "es2015") {
console.log(`Compiling for ${moduleType} - targetting ${target}`);
var tsProject = ts.createProject('tsconfig.json', {
const tsProject = ts.createProject('tsconfig.json', {
declaration: withTypings || false,

@@ -17,3 +17,3 @@ module: moduleType,

var tsResult = gulp.src(`${paths.src}/**/*.ts`)
const tsResult = src(`${paths.src}/**/*.ts`)
.pipe(tsProject());

@@ -23,12 +23,12 @@

return merge([
tsResult.dts.pipe(gulp.dest(paths.dist + "/definitions")),
tsResult.js.pipe(gulp.dest(paths.dist + "/" + moduleType))
tsResult.dts.pipe(dest(paths.dist + "/definitions")),
tsResult.js.pipe(dest(paths.dist + "/" + moduleType))
]);
}
return tsResult.js.pipe(gulp.dest(paths.dist + "/" +moduleType));
return tsResult.js.pipe(dest(paths.dist + "/" +moduleType));
}
gulp.task("compile-webpack", function() {
return gulp.src(`${paths.dist}/es2015/plugin.js`)
function compileWebpack() {
return src(`${paths.dist}/es2015/plugin.js`)
.pipe(webpack({

@@ -45,9 +45,10 @@ output: {

commonjs2: "@treacherous/core"
}
},
"vue": "var Vue"
}
}))
.pipe(gulp.dest(`${paths.dist}/umd`))
});
.pipe(dest(`${paths.dist}/umd`))
}
gulp.task('compile-modules', function(){
function compileModules(){
return merge([

@@ -57,6 +58,4 @@ compileFor("commonjs", true),

])
});
}
gulp.task('compile', ["clean"], function(callback) {
return runSequence('compile-modules', 'compile-webpack', callback);
});
exports.compile = series(clean, compileModules, compileWebpack);

11

build/tasks/default.js

@@ -1,6 +0,7 @@

const gulp = require("gulp");
const runSequence = require("run-sequence");
const {clean} = require("./clean");
const {compile} = require("./compile");
const {example} = require("./examples");
const {series} = require("gulp");
gulp.task("default", function(callback) {
runSequence("clean", "compile", "example", callback);
});
exports.defaultTask = series(clean, compile, example);
exports.example = example;

21

build/tasks/examples.js

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

var gulp = require('gulp');
var webpack = require('webpack-stream');
var examplesDir = "example";
const {src, dest} = require('gulp');
const webpack = require('webpack-stream');
const examplesDir = "example";
gulp.task('example', function() {
return gulp.src(`${examplesDir}/app.js`)
function example() {
return src(`${examplesDir}/app.js`)
.pipe(webpack({

@@ -15,5 +15,10 @@ module: {

filename: "compiled.js"
}
},
optimization: {
minimize: false
},
}))
.pipe(gulp.dest(`${examplesDir}`));
});
.pipe(dest(`${examplesDir}`));
}
exports.example = example;

59

dist/commonjs/plugin.js
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());

@@ -11,2 +12,3 @@ });

Object.defineProperty(exports, "__esModule", { value: true });
exports.ruleRegistry = exports.createRuleset = exports.viewStrategyRegistry = exports.ValidateWith = void 0;
const core_1 = require("@treacherous/core");

@@ -19,3 +21,3 @@ const view_1 = require("@treacherous/view");

for (const key in obj) {
delete obj[key];
delete obj.key;
}

@@ -28,3 +30,3 @@ };

};
exports.ValidateWith = (ruleset, options = {}) => {
const ValidateWith = (ruleset, options = {}) => {
return {

@@ -56,3 +58,3 @@ data() {

},
created() {
beforeMount() {
const context = this;

@@ -77,7 +79,7 @@ if (options.withReactiveValidation === undefined) {

}
if (options.validateProps && Reflect.has(context._props, prop)) {
return Reflect.get(context._props, prop);
if (options.validateProps && Reflect.has(context.$props, prop)) {
return Reflect.get(context.$props, prop);
}
if (options.validateComputed && Reflect.has(context._computed, prop)) {
return Reflect.get(context._computed, prop);
if (options.validateComputed && Reflect.has(context.$computed, prop)) {
return Reflect.get(context.$computed, prop);
}

@@ -87,3 +89,3 @@ return undefined;

};
const virtualModel = new Proxy(context._data, proxyHandler);
const virtualModel = new Proxy(context.$data, proxyHandler);
let validationGroupBuilder = core_1.createGroup();

@@ -102,6 +104,6 @@ if (options.withReactiveValidation) {

if (args.isValid) {
context.$delete(context.modelErrors, args.property);
delete context.modelErrors[args.property];
}
else {
context.$set(context.modelErrors, args.property, args.error);
context.modelErrors[args.property] = args.error;
}

@@ -113,3 +115,3 @@ });

},
beforeDestroy() {
beforeUnmount() {
const metadata = this._validationMetadata;

@@ -123,5 +125,6 @@ if (metadata[ReactiveSubscription]) {

};
exports.ValidateWith = ValidateWith;
const showErrorDirective = {
bind: function (element, binding, vnode) {
const context = vnode.context;
beforeMount: function (element, binding) {
const context = binding.instance;
const validationGroup = context._validationGroup;

@@ -149,3 +152,3 @@ if (!validationGroup) {

if (!metadata[ReactiveSubscription]) {
context.$delete(context.modelErrors, propertyNameOrRoute);
delete context.modelErrors[propertyNameOrRoute];
}

@@ -157,3 +160,3 @@ }

if (!metadata[ReactiveSubscription]) {
context.$set(context.modelErrors, propertyNameOrRoute, error);
context.modelErrors[propertyNameOrRoute] = error;
}

@@ -171,4 +174,4 @@ }

},
unbind: function (element, binding, vnode) {
let context = vnode.context;
unmounted: function (element, binding) {
let context = binding.instance;
let propertyRoute = view_1.ElementHelper.getPropertyRouteFrom(element);

@@ -186,4 +189,4 @@ if (!propertyRoute) {

const summaryDirective = {
bind: function (element, binding, vnode) {
const context = vnode.context;
beforeMount: function (element, binding) {
const context = binding.instance;
if (!context._validationMetadata) {

@@ -255,4 +258,4 @@ context._validationMetadata = {};

},
unbind: function (element, binding, vnode) {
const context = vnode.context;
unmounted: function (element, binding) {
const context = binding.instance;
const metadata = context._validationMetadata;

@@ -264,13 +267,13 @@ if (metadata[SummarySubKey]) {

};
const install = function (Vue, options) {
Vue.directive('show-error', showErrorDirective);
Vue.directive('validation-summary', summaryDirective);
const install = function (app, options) {
app.directive('show-error', showErrorDirective);
app.directive('validation-summary', summaryDirective);
};
var view_2 = require("@treacherous/view");
exports.viewStrategyRegistry = view_2.viewStrategyRegistry;
Object.defineProperty(exports, "viewStrategyRegistry", { enumerable: true, get: function () { return view_2.viewStrategyRegistry; } });
var core_2 = require("@treacherous/core");
exports.createRuleset = core_2.createRuleset;
exports.ruleRegistry = core_2.ruleRegistry;
Object.defineProperty(exports, "createRuleset", { enumerable: true, get: function () { return core_2.createRuleset; } });
Object.defineProperty(exports, "ruleRegistry", { enumerable: true, get: function () { return core_2.ruleRegistry; } });
exports.default = {
install: install
};

6

dist/definitions/plugin.d.ts

@@ -22,4 +22,4 @@ import { Ruleset } from "@treacherous/core";

};
created(): void;
beforeDestroy(): void;
beforeMount(): void;
beforeUnmount(): void;
};

@@ -29,4 +29,4 @@ export { viewStrategyRegistry } from "@treacherous/view";

declare const _default: {
install: (Vue: any, options: any) => void;
install: (app: any, options: any) => void;
};
export default _default;

49

dist/es2015/plugin.js
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());

@@ -16,3 +17,3 @@ });

for (const key in obj) {
delete obj[key];
delete obj.key;
}

@@ -52,3 +53,3 @@ };

},
created() {
beforeMount() {
const context = this;

@@ -73,7 +74,7 @@ if (options.withReactiveValidation === undefined) {

}
if (options.validateProps && Reflect.has(context._props, prop)) {
return Reflect.get(context._props, prop);
if (options.validateProps && Reflect.has(context.$props, prop)) {
return Reflect.get(context.$props, prop);
}
if (options.validateComputed && Reflect.has(context._computed, prop)) {
return Reflect.get(context._computed, prop);
if (options.validateComputed && Reflect.has(context.$computed, prop)) {
return Reflect.get(context.$computed, prop);
}

@@ -83,3 +84,3 @@ return undefined;

};
const virtualModel = new Proxy(context._data, proxyHandler);
const virtualModel = new Proxy(context.$data, proxyHandler);
let validationGroupBuilder = createGroup();

@@ -98,6 +99,6 @@ if (options.withReactiveValidation) {

if (args.isValid) {
context.$delete(context.modelErrors, args.property);
delete context.modelErrors[args.property];
}
else {
context.$set(context.modelErrors, args.property, args.error);
context.modelErrors[args.property] = args.error;
}

@@ -109,3 +110,3 @@ });

},
beforeDestroy() {
beforeUnmount() {
const metadata = this._validationMetadata;

@@ -120,4 +121,4 @@ if (metadata[ReactiveSubscription]) {

const showErrorDirective = {
bind: function (element, binding, vnode) {
const context = vnode.context;
beforeMount: function (element, binding) {
const context = binding.instance;
const validationGroup = context._validationGroup;

@@ -145,3 +146,3 @@ if (!validationGroup) {

if (!metadata[ReactiveSubscription]) {
context.$delete(context.modelErrors, propertyNameOrRoute);
delete context.modelErrors[propertyNameOrRoute];
}

@@ -153,3 +154,3 @@ }

if (!metadata[ReactiveSubscription]) {
context.$set(context.modelErrors, propertyNameOrRoute, error);
context.modelErrors[propertyNameOrRoute] = error;
}

@@ -167,4 +168,4 @@ }

},
unbind: function (element, binding, vnode) {
let context = vnode.context;
unmounted: function (element, binding) {
let context = binding.instance;
let propertyRoute = ElementHelper.getPropertyRouteFrom(element);

@@ -182,4 +183,4 @@ if (!propertyRoute) {

const summaryDirective = {
bind: function (element, binding, vnode) {
const context = vnode.context;
beforeMount: function (element, binding) {
const context = binding.instance;
if (!context._validationMetadata) {

@@ -251,4 +252,4 @@ context._validationMetadata = {};

},
unbind: function (element, binding, vnode) {
const context = vnode.context;
unmounted: function (element, binding) {
const context = binding.instance;
const metadata = context._validationMetadata;

@@ -260,5 +261,5 @@ if (metadata[SummarySubKey]) {

};
const install = function (Vue, options) {
Vue.directive('show-error', showErrorDirective);
Vue.directive('validation-summary', summaryDirective);
const install = function (app, options) {
app.directive('show-error', showErrorDirective);
app.directive('validation-summary', summaryDirective);
};

@@ -265,0 +266,0 @@ export { viewStrategyRegistry } from "@treacherous/view";

2

dist/umd/treacherous.vue.umd.js

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

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@treacherous/core")):"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TreacherousVue=t(require("@treacherous/core")):e.TreacherousVue=t(e.Treacherous)}(window,function(e){return function(e){var t={};function r(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(a,i,function(t){return e[t]}.bind(null,i));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t);var a=r(0);class i{}i.hasClass=((e,t)=>e.classList?e.classList.contains(t):!!e.className.match(new RegExp(`(\\s|^)${t}(\\s|$)`))),i.addClass=((e,t)=>{e.classList?e.classList.add(t):i.hasClass(e,t)||(e.errorClassName+=" "+t)}),i.removeClass=((e,t)=>{if(e.classList)e.classList.remove(t);else if(i.hasClass(e,t)){const r=new RegExp(`(\\s|^)${t}(\\s|$)`);e.errorClassName=e.className.replace(r," ")}});class o{constructor(){this.getElementValidatorId=(e=>(e.getAttribute("id")||e.setAttribute("id","unique-"+o.currentCount++),e.getAttribute("id")+"-error-container")),this.createErrorElement=((e,t)=>{let r=this.getElementValidatorId(t),a=document.createElement("div");return a.id=r,a.className="validation-error-container",a.textContent=e,t.parentElement.appendChild(a),a}),this.removeErrorElement=function(e){let t=this.getElementValidatorId(e),r=document.getElementById(t);r&&r.parentElement.removeChild(r)},this.addElementError=function(e,t){let r=this.getElementValidatorId(t);return document.getElementById(r)?(this.removeErrorElement(t),this.createErrorElement(e,t)):this.createErrorElement(e,t)}}}o.currentCount=1;class n{constructor(){this.applyContainerClass=(e=>{i.addClass(e,n.containerClassName)}),this.getPropertyElementName=(e=>{let t=e.replace(/[\W]/g,"-");return`${n.elementIdFormat}${t}`}),this.getPropertyErrorElement=((e,t)=>{let r=this.getPropertyElementName(t);return e.querySelector(`#${r}`)}),this.createPropertyErrorElement=((e,t,r)=>{let a=this.getPropertyElementName(r),i=document.createElement("div");return i.id=a,i.className=n.errorClassName,i.textContent=e,i.setAttribute("property-route",r),t.appendChild(i),i}),this.removePropertyErrorElement=((e,t)=>{let r=this.getPropertyErrorElement(e,t);r&&e.removeChild(r)})}}n.elementIdFormat="summary-error-for-",n.errorClassName="summary-error",n.containerClassName="validation-summary-container";var s=new class{constructor(){this.strategies={},this.registerStrategy=(e=>{this.strategies[e.strategyName]=e}),this.unregisterStrategy=(e=>{delete this.strategies[e.strategyName]}),this.getStrategyNamed=(e=>this.strategies[e]||null),this.hasStrategyNamed=(e=>null!=this.getStrategyNamed(e))}};s.registerStrategy(new class{constructor(e=new o){this.inlineHandler=e,this.strategyName="inline"}propertyBecomeValid(e){i.removeClass(e,"invalid"),i.addClass(e,"valid"),this.inlineHandler.removeErrorElement(e)}propertyBecomeInvalid(e,t){i.removeClass(e,"valid"),i.addClass(e,"invalid"),this.inlineHandler.addElementError(t,e)}});var l,u=new class{constructor(){this.summaries={},this.registerSummary=(e=>{this.summaries[e.summaryName]=e}),this.unregisterSummary=(e=>{delete this.summaries[e.summaryName]}),this.getSummaryNamed=(e=>this.summaries[e]||null),this.hasSummaryNamed=(e=>null!=this.getSummaryNamed(e))}};u.registerSummary(new class{constructor(e=new n){this.summaryHandler=e,this.summaryName="default"}setupContainer(e){this.summaryHandler.applyContainerClass(e)}propertyBecomeValid(e,t){this.summaryHandler.removePropertyErrorElement(e,t)}propertyBecomeInvalid(e,t,r){let a=`${r} - ${t}`;this.summaryHandler.removePropertyErrorElement(e,r),this.summaryHandler.createPropertyErrorElement(a,e,r)}});class d{static literalToJson(e){let t,r=`{ ${e} }`.replace(d.jsLiteralRegex,'$1"$2":');try{t=JSON.parse(r)}catch(t){console.warn(`unable to process literal: ${e}`,t)}return t||{}}}d.jsLiteralRegex=/({|,)(?:\s*)(?:')?([A-Za-z_$\.][A-Za-z0-9_ \-\.$]*)(?:')?(?:\s*):/g;class c{static getPropertyRouteFrom(e){return e.getAttribute(c.ValidatePropertyAttributeName)}static getViewStrategyFrom(e){return e.getAttribute(c.ViewStrategyAttributeName)}static getViewOptionsFrom(e){let t=e.getAttribute(c.ViewOptionsAttributeName);if(t)return d.literalToJson(t)}static getSummaryStrategyFrom(e){return e.getAttribute(c.ViewSummaryStrategyAttributeName)}static getSummaryOptionsFrom(e){let t=e.getAttribute(c.SummaryOptionsAttributeName);if(t)return d.literalToJson(t)}}c.ValidatePropertyAttributeName="validate-property",c.ViewStrategyAttributeName="view-strategy",c.ViewOptionsAttributeName="view-options",c.ViewSummaryStrategyAttributeName="view-summary-strategy",c.SummaryOptionsAttributeName="summary-options",function(e){e[e.unknown=0]="unknown",e[e.valid=1]="valid",e[e.invalid=2]="invalid"}(l||(l={})),r.d(t,"ValidateWith",function(){return y}),r.d(t,"viewStrategyRegistry",function(){return s}),r.d(t,"createRuleset",function(){return a.createRuleset}),r.d(t,"ruleRegistry",function(){return a.ruleRegistry});var m=function(e,t,r,a){return new(r||(r=Promise))(function(i,o){function n(e){try{l(a.next(e))}catch(e){o(e)}}function s(e){try{l(a.throw(e))}catch(e){o(e)}}function l(e){e.done?i(e.value):new r(function(t){t(e.value)}).then(n,s)}l((a=a.apply(e,t||[])).next())})};const p="summary-subscriptions",y=(e,t={})=>({data:()=>({modelErrors:{}}),computed:{isValid:function(){return 0==Object.keys(this.modelErrors).length}},watch:{isValid:function(e){this.$emit("model-state-changed",{isValid:e,errors:this.modelErrors})}},methods:{getValidationGroup:function(){return this._validationGroup},refreshValidation:function(){return m(this,void 0,void 0,function*(){const e=yield this._validationGroup.getModelErrors(!0);(e=>{for(const t in e)delete e[t]})(this.modelErrors),((e,t)=>{for(const r in t)e[r]=t[r]})(this.modelErrors,e)})}},created(){const r=this;void 0===t.withReactiveValidation&&(t.withReactiveValidation=!1),void 0===t.validateComputed&&(t.validateComputed=!1),void 0===t.validateProps&&(t.validateProps=!1),void 0===t.validateOnStart&&(t.validateOnStart=!1);const i={get:(e,a)=>Reflect.has(e,a)?Reflect.get(e,a):t.validateProps&&Reflect.has(r._props,a)?Reflect.get(r._props,a):t.validateComputed&&Reflect.has(r._computed,a)?Reflect.get(r._computed,a):void 0},o=new Proxy(r._data,i);let n=Object(a.createGroup)();t.withReactiveValidation&&(n=n.asReactiveGroup()),t.validateOnStart&&(n=n.andValidateOnStart());const s={};r._validationGroup=n.build(o,e),r._validationMetadata=s,t.withReactiveValidation&&(s["reactive-subscription"]=r._validationGroup.propertyStateChangedEvent.subscribe(e=>{e.isValid?r.$delete(r.modelErrors,e.property):r.$set(r.modelErrors,e.property,e.error)})),s["validation-subscriptions"]={},s[p]=[]},beforeDestroy(){const e=this._validationMetadata;e["reactive-subscription"]&&e["reactive-subscription"](),this._validationGroup.release()}}),v={bind:function(e,t,r){const a=r.context,i=a._validationGroup;if(!i)return;const o=a._validationMetadata,n=c.getPropertyRouteFrom(e);if(!n)return;const u=i.getPropertyDisplayName(n),d=c.getViewStrategyFrom(e),m=s.getStrategyNamed(d||"inline");if(!m)return;let p=l.unknown;const y=c.getViewOptionsFrom(e)||{};const v=i.propertyStateChangedEvent.subscribe(t=>{(t=>{t?(m.propertyBecomeInvalid(e,t,n,p,y),p=l.invalid,o["reactive-subscription"]||a.$set(a.modelErrors,u,t)):(m.propertyBecomeValid(e,n,p,y),p=l.valid,o["reactive-subscription"]||a.$delete(a.modelErrors,u))})(t.error)},e=>e.property==n);o["validation-subscriptions"][n]=v},unbind:function(e,t,r){let a=r.context,i=c.getPropertyRouteFrom(e);if(!i)return;let o=a._validationMetadata["validation-subscriptions"][i];o&&o()}},h={bind:function(e,t,r){const i=r.context;i._validationMetadata||(i._validationMetadata={},i._validationMetadata[p]=[]);const o=i._validationMetadata;let n=null;if(!(n=null!=t.value?t.value:i._validationGroup))return;const s=Array.isArray(n),l=c.getSummaryStrategyFrom(e),d=u.getSummaryNamed(l||"default");if(!d)return;const m=c.getSummaryOptionsFrom(e)||{};d.setupContainer(e,m);const y=t=>{const r=(e=>{if(!s)return n.getPropertyDisplayName(e);let t=e;return n.forEach(r=>{let a=r.getPropertyDisplayName(e);a!=e&&(t=a)}),t})(t.property);t.isValid?d.propertyBecomeValid(e,r,m):d.propertyBecomeInvalid(e,t.error,r,m)},v=e=>{e.getModelErrors(!1).then(e=>{for(const t in e)y(new a.PropertyStateChangedEvent(t,!1,e[t]))})};if(s)n.forEach(e=>{const t=e.propertyStateChangedEvent.subscribe(y);o[p].push(t),v(e)});else{const e=n.propertyStateChangedEvent.subscribe(y);o[p].push(e),v(n)}},unbind:function(e,t,r){const a=r.context._validationMetadata;a[p]&&a[p].forEach(e=>e())}};t.default={install:function(e,t){e.directive("show-error",v),e.directive("validation-summary",h)}}}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@treacherous/core")):"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TreacherousVue=t(require("@treacherous/core")):e.TreacherousVue=t(e.Treacherous)}(window,(function(e){return function(e){var t={};function r(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(a,i,function(t){return e[t]}.bind(null,i));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t),r.d(t,"ValidateWith",(function(){return y})),r.d(t,"viewStrategyRegistry",(function(){return s})),r.d(t,"createRuleset",(function(){return a.createRuleset})),r.d(t,"ruleRegistry",(function(){return a.ruleRegistry}));var a=r(0);class i{}i.hasClass=(e,t)=>e.classList?e.classList.contains(t):!!e.className.match(new RegExp(`(\\s|^)${t}(\\s|$)`)),i.addClass=(e,t)=>{e.classList?e.classList.add(t):i.hasClass(e,t)||(e.errorClassName+=" "+t)},i.removeClass=(e,t)=>{if(e.classList)e.classList.remove(t);else if(i.hasClass(e,t)){const r=new RegExp(`(\\s|^)${t}(\\s|$)`);e.errorClassName=e.className.replace(r," ")}};class n{constructor(){this.getElementValidatorId=e=>(e.getAttribute("id")||e.setAttribute("id","unique-"+n.currentCount++),e.getAttribute("id")+"-error-container"),this.createErrorElement=(e,t)=>{let r=this.getElementValidatorId(t),a=document.createElement("div");return a.id=r,a.className="validation-error-container",a.textContent=e,t.parentElement.appendChild(a),a},this.removeErrorElement=function(e){let t=this.getElementValidatorId(e),r=document.getElementById(t);r&&r.parentElement.removeChild(r)},this.addElementError=function(e,t){let r=this.getElementValidatorId(t);return document.getElementById(r)?(this.removeErrorElement(t),this.createErrorElement(e,t)):this.createErrorElement(e,t)}}}n.currentCount=1;class o{constructor(){this.applyContainerClass=e=>{i.addClass(e,o.containerClassName)},this.getPropertyElementName=e=>{let t=e.replace(/[\W]/g,"-");return`${o.elementIdFormat}${t}`},this.getPropertyErrorElement=(e,t)=>{let r=this.getPropertyElementName(t);return e.querySelector("#"+r)},this.createPropertyErrorElement=(e,t,r)=>{let a=this.getPropertyElementName(r),i=document.createElement("div");return i.id=a,i.className=o.errorClassName,i.textContent=e,i.setAttribute("property-route",r),t.appendChild(i),i},this.removePropertyErrorElement=(e,t)=>{let r=this.getPropertyErrorElement(e,t);r&&e.removeChild(r)}}}o.elementIdFormat="summary-error-for-",o.errorClassName="summary-error",o.containerClassName="validation-summary-container";var s=new class{constructor(){this.strategies={},this.registerStrategy=e=>{this.strategies[e.strategyName]=e},this.unregisterStrategy=e=>{delete this.strategies[e.strategyName]},this.getStrategyNamed=e=>this.strategies[e]||null,this.hasStrategyNamed=e=>null!=this.getStrategyNamed(e)}};s.registerStrategy(new class{constructor(e=new n){this.inlineHandler=e,this.strategyName="inline"}propertyBecomeValid(e){i.removeClass(e,"invalid"),i.addClass(e,"valid"),this.inlineHandler.removeErrorElement(e)}propertyBecomeInvalid(e,t){i.removeClass(e,"valid"),i.addClass(e,"invalid"),this.inlineHandler.addElementError(t,e)}});var l,u=new class{constructor(){this.summaries={},this.registerSummary=e=>{this.summaries[e.summaryName]=e},this.unregisterSummary=e=>{delete this.summaries[e.summaryName]},this.getSummaryNamed=e=>this.summaries[e]||null,this.hasSummaryNamed=e=>null!=this.getSummaryNamed(e)}};u.registerSummary(new class{constructor(e=new o){this.summaryHandler=e,this.summaryName="default"}setupContainer(e){this.summaryHandler.applyContainerClass(e)}propertyBecomeValid(e,t){this.summaryHandler.removePropertyErrorElement(e,t)}propertyBecomeInvalid(e,t,r){let a=`${r} - ${t}`;this.summaryHandler.removePropertyErrorElement(e,r),this.summaryHandler.createPropertyErrorElement(a,e,r)}});class c{static literalToJson(e){let t,r=`{ ${e} }`.replace(c.jsLiteralRegex,'$1"$2":');try{t=JSON.parse(r)}catch(t){console.warn("unable to process literal: "+e,t)}return t||{}}}c.jsLiteralRegex=/({|,)(?:\s*)(?:')?([A-Za-z_$\.][A-Za-z0-9_ \-\.$]*)(?:')?(?:\s*):/g;class d{static getPropertyRouteFrom(e){return e.getAttribute(d.ValidatePropertyAttributeName)}static getViewStrategyFrom(e){return e.getAttribute(d.ViewStrategyAttributeName)}static getViewOptionsFrom(e){let t=e.getAttribute(d.ViewOptionsAttributeName);if(t)return c.literalToJson(t)}static getSummaryStrategyFrom(e){return e.getAttribute(d.ViewSummaryStrategyAttributeName)}static getSummaryOptionsFrom(e){let t=e.getAttribute(d.SummaryOptionsAttributeName);if(t)return c.literalToJson(t)}}d.ValidatePropertyAttributeName="validate-property",d.ViewStrategyAttributeName="view-strategy",d.ViewOptionsAttributeName="view-options",d.ViewSummaryStrategyAttributeName="view-summary-strategy",d.SummaryOptionsAttributeName="summary-options",function(e){e[e.unknown=0]="unknown",e[e.valid=1]="valid",e[e.invalid=2]="invalid"}(l||(l={}));var m=function(e,t,r,a){return new(r||(r=Promise))((function(i,n){function o(e){try{l(a.next(e))}catch(e){n(e)}}function s(e){try{l(a.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,s)}l((a=a.apply(e,t||[])).next())}))};const p="summary-subscriptions",y=(e,t={})=>({data:()=>({modelErrors:{}}),computed:{isValid:function(){return 0==Object.keys(this.modelErrors).length}},watch:{isValid:function(e){this.$emit("model-state-changed",{isValid:e,errors:this.modelErrors})}},methods:{getValidationGroup:function(){return this._validationGroup},refreshValidation:function(){return m(this,void 0,void 0,(function*(){const e=yield this._validationGroup.getModelErrors(!0);(e=>{for(const t in e)delete e.key})(this.modelErrors),((e,t)=>{for(const r in t)e[r]=t[r]})(this.modelErrors,e)}))}},beforeMount(){const r=this;void 0===t.withReactiveValidation&&(t.withReactiveValidation=!1),void 0===t.validateComputed&&(t.validateComputed=!1),void 0===t.validateProps&&(t.validateProps=!1),void 0===t.validateOnStart&&(t.validateOnStart=!1);const i={get:(e,a)=>Reflect.has(e,a)?Reflect.get(e,a):t.validateProps&&Reflect.has(r.$props,a)?Reflect.get(r.$props,a):t.validateComputed&&Reflect.has(r.$computed,a)?Reflect.get(r.$computed,a):void 0},n=new Proxy(r.$data,i);let o=Object(a.createGroup)();t.withReactiveValidation&&(o=o.asReactiveGroup()),t.validateOnStart&&(o=o.andValidateOnStart());const s={};r._validationGroup=o.build(n,e),r._validationMetadata=s,t.withReactiveValidation&&(s["reactive-subscription"]=r._validationGroup.propertyStateChangedEvent.subscribe(e=>{e.isValid?delete r.modelErrors[e.property]:r.modelErrors[e.property]=e.error})),s["validation-subscriptions"]={},s[p]=[]},beforeUnmount(){const e=this._validationMetadata;e["reactive-subscription"]&&e["reactive-subscription"](),this._validationGroup.release()}}),v={beforeMount:function(e,t){const r=t.instance,a=r._validationGroup;if(!a)return;const i=r._validationMetadata,n=d.getPropertyRouteFrom(e);if(!n)return;const o=a.getPropertyDisplayName(n),u=d.getViewStrategyFrom(e),c=s.getStrategyNamed(u||"inline");if(!c)return;let m=l.unknown;const p=d.getViewOptionsFrom(e)||{};const y=a.propertyStateChangedEvent.subscribe(t=>{var a;(a=t.error)?(c.propertyBecomeInvalid(e,a,n,m,p),m=l.invalid,i["reactive-subscription"]||(r.modelErrors[o]=a)):(c.propertyBecomeValid(e,n,m,p),m=l.valid,i["reactive-subscription"]||delete r.modelErrors[o])},e=>e.property==n);i["validation-subscriptions"][n]=y},unmounted:function(e,t){let r=t.instance,a=d.getPropertyRouteFrom(e);if(!a)return;let i=r._validationMetadata["validation-subscriptions"][a];i&&i()}},h={beforeMount:function(e,t){const r=t.instance;r._validationMetadata||(r._validationMetadata={},r._validationMetadata[p]=[]);const i=r._validationMetadata;let n=null;if(n=null!=t.value?t.value:r._validationGroup,!n)return;const o=Array.isArray(n),s=d.getSummaryStrategyFrom(e),l=u.getSummaryNamed(s||"default");if(!l)return;const c=d.getSummaryOptionsFrom(e)||{};l.setupContainer(e,c);const m=t=>{const r=(e=>{if(!o)return n.getPropertyDisplayName(e);let t=e;return n.forEach(r=>{let a=r.getPropertyDisplayName(e);a!=e&&(t=a)}),t})(t.property);t.isValid?l.propertyBecomeValid(e,r,c):l.propertyBecomeInvalid(e,t.error,r,c)},y=e=>{e.getModelErrors(!1).then(e=>{for(const t in e)m(new a.PropertyStateChangedEvent(t,!1,e[t]))})};if(o)n.forEach(e=>{const t=e.propertyStateChangedEvent.subscribe(m);i[p].push(t),y(e)});else{const e=n.propertyStateChangedEvent.subscribe(m);i[p].push(e),y(n)}},unmounted:function(e,t){const r=t.instance._validationMetadata;r[p]&&r[p].forEach(e=>e())}};t.default={install:function(e,t){e.directive("show-error",v),e.directive("validation-summary",h)}}}])}));

0

docs/directives.md

@@ -0,0 +0,0 @@ # Directives

0

docs/example.md

@@ -0,0 +0,0 @@ # Example

0

docs/strategies.md

@@ -0,0 +0,0 @@ # Strategies

0

docs/useful-info.md

@@ -0,0 +0,0 @@ # Useful Info

31

example/app.js

@@ -1,6 +0,5 @@

import Vue from "vue/dist/vue";
import {createApp} from "vue/dist/vue.esm-browser";
// This is all you need to do to add the plugin
// Grab the plugin for use in Vue
import TreacherousVue from "../dist/commonjs/plugin"
Vue.use(TreacherousVue);

@@ -13,4 +12,4 @@ // Add custom strategy for complex example

// Add our components for examples
import "./components/basic/basic.component";
import "./components/complex/complex.component";
import {basicComponent} from "./components/basic/basic.component";
import {complexComponent} from "./components/complex/complex.component";

@@ -21,3 +20,3 @@ // Setup parent data, the validation is handled in the children but the parents can hook in if they need to

isComplexValid: true, // ^^
validationSummaryGroups: null, // This is used to collate the 2 child validation groups for a summary on parent
validationSummaryGroups: null, // This is used to collate the 2 child validation groups for a summary on parent
dummyPropData: { blah: "dummy value" } // This is just to show you can validate on properties

@@ -35,7 +34,19 @@ };

// The components we want to use
const components = {
'basic': basicComponent,
'complex': complexComponent
};
// Start the app
let app = new Vue({
el: "#app",
data: appData,
let app = createApp({
components: components,
data() { return appData },
mounted: onMounted
});
});
// This is all you need to do to use the plugin in vue
app.use(TreacherousVue);
// Start the app
app.mount('#app')

8

example/components/basic/basic.component.js

@@ -1,3 +0,1 @@

import Vue from "vue/dist/vue";
import {createRuleset} from "@treacherous/core";

@@ -13,6 +11,6 @@ import template from "./basic.html";

Vue.component('basic', {
data: () => { return { username: "joe.bloggs" } },
export const basicComponent = {
data: function() { return { username: "joe.bloggs" } },
template: template,
mixins: [ ValidateWith(dataRuleset) ]
});
};

6

example/components/complex/complex.component.js

@@ -1,3 +0,1 @@

import Vue from "vue/dist/vue";
import { UserData } from "./user-data.model";

@@ -20,3 +18,3 @@ import { Hobby } from "./hobby.model";

Vue.component('complex', {
export const complexComponent = {
data: () => new UserData("Bob", 20, [

@@ -30,2 +28,2 @@ new Hobby("reading"),

mixins: [ ValidateWith(complexRuleset, { validateProps: true, withReactiveValidation: true }) ] // Enable Prop and Reactive validation
});
};

0

example/components/complex/hobby.model.js

@@ -0,0 +0,0 @@ export function Hobby(name)

0

example/components/complex/hobby.ruleset.js

@@ -0,0 +0,0 @@ import {createRuleset} from "../../../dist/commonjs/plugin";

0

example/components/complex/user-data.model.js

@@ -0,0 +0,0 @@ export function UserData(name, age, hobbies)

0

example/components/complex/user-data.ruleset.js

@@ -0,0 +0,0 @@ import {createRuleset} from "@treacherous/core";

0

example/custom-view/tooltip-strategy.js

@@ -0,0 +0,0 @@ import {IViewStrategy, ClassHelper, InlineHandler} from "@treacherous/view";

5

gulpfile.js

@@ -1,1 +0,4 @@

require("require-dir")("build/tasks");
const {defaultTask, example} = require("./build/tasks/default");
exports.default = defaultTask;
exports.example = example;

19

package.json
{
"name": "@treacherous/vue",
"version": "0.4.2",
"version": "0.5.0",
"description": "A vue plugin to use the treacherous validation system",

@@ -14,3 +14,3 @@ "author": "LP",

"dependencies": {
"vue": "^2.5.17",
"vue": "^3.0.5",
"@treacherous/core": "^0.17.7",

@@ -20,12 +20,11 @@ "@treacherous/view": "^0.4.4"

"devDependencies": {
"gulp": "^3.9.1",
"gulp": "^4.0.2",
"natives": "^1.1.6",
"gulp-typescript": "^5.0.1",
"merge2": "^1.2.3",
"typescript": "^3.4.5",
"run-sequence": "^2.2.1",
"require-dir": "^1.2.0",
"del": "^4.1.0",
"webpack-stream": "^5.2.1",
"raw-loader": "^2.0.0"
"merge2": "^1.4.1",
"typescript": "^4.1.5",
"del": "^6.0.0",
"webpack-stream": "^6.1.2",
"raw-loader": "^4.0.2"
}
}

7

README.md

@@ -9,2 +9,5 @@ # Treacherous-Vue

- For Vue 2.x support use 0.4.x versions
- Version >= 0.5.x are for Vue 3.x
**VIEW THE EXAMPLE/DEMO [HERE](https://rawgit.com/grofit/treacherous-vue/master/example/app.html)**

@@ -36,3 +39,3 @@

Vue.use(TreacherousPlugin);
myApp.use(TreacherousPlugin);
```

@@ -57,3 +60,3 @@

Vue.component('my-component', {
myApp.component('my-component', {
data: function() {

@@ -60,0 +63,0 @@ name: "Bob"

51

src/plugin.ts

@@ -10,2 +10,3 @@ import {

} from "@treacherous/core";
import {viewStrategyRegistry, viewSummaryRegistry, ElementHelper, ValidationState} from "@treacherous/view";

@@ -27,4 +28,4 @@

for(const key in obj)
{ delete obj[key]; }
}
{ delete obj.key; }
};

@@ -34,3 +35,3 @@ const populateProperties = (objA: any, objB: any) => {

{ objA[key] = objB[key]; }
}
};

@@ -62,3 +63,3 @@ export const ValidateWith = (ruleset: Ruleset, options: RulesetOptions = {}) => {

},
created() {
beforeMount() {
const context = <any>this;

@@ -78,7 +79,7 @@

if(options.validateProps && Reflect.has(context._props, prop))
{ return Reflect.get(context._props, prop); }
if(options.validateProps && Reflect.has(context.$props, prop))
{ return Reflect.get(context.$props, prop); }
if(options.validateComputed && Reflect.has(context._computed, prop))
{ return Reflect.get(context._computed, prop); }
if(options.validateComputed && Reflect.has(context.$computed, prop))
{ return Reflect.get(context.$computed, prop); }

@@ -89,3 +90,3 @@ return undefined;

const virtualModel = new Proxy(context._data, proxyHandler);
const virtualModel = new Proxy(context.$data, proxyHandler);

@@ -108,5 +109,5 @@ let validationGroupBuilder: ValidationGroupBuilder | ReactiveValidationGroupBuilder = createGroup();

if(args.isValid)
{ context.$delete(context.modelErrors, args.property); }
{ delete context.modelErrors[args.property]; }
else
{ context.$set(context.modelErrors, args.property, args.error); }
{ context.modelErrors[args.property] = args.error; }
});

@@ -118,3 +119,3 @@ }

},
beforeDestroy() {
beforeUnmount() {
const metadata = this._validationMetadata;

@@ -131,4 +132,4 @@

const showErrorDirective = {
bind: function (element: HTMLElement, binding: any, vnode: any) {
const context = vnode.context;
beforeMount: function (element: HTMLElement, binding: any) {
const context = binding.instance;
const validationGroup = <IReactiveValidationGroup>context._validationGroup;

@@ -158,3 +159,3 @@ if(!validationGroup) { return; }

if(!metadata[ReactiveSubscription])
{ context.$delete(context.modelErrors, propertyNameOrRoute); }
{ delete context.modelErrors[propertyNameOrRoute]; }
}

@@ -167,3 +168,3 @@ else

if(!metadata[ReactiveSubscription])
{ context.$set(context.modelErrors, propertyNameOrRoute, error); }
{ context.modelErrors[propertyNameOrRoute] = error; }
}

@@ -183,4 +184,4 @@ };

},
unbind: function (element: HTMLElement, binding: any, vnode: any) {
let context = vnode.context;
unmounted: function (element: HTMLElement, binding: any) {
let context = binding.instance;
let propertyRoute = ElementHelper.getPropertyRouteFrom(element);

@@ -196,4 +197,4 @@ if(!propertyRoute) { return; }

const summaryDirective = {
bind: function (element: HTMLElement, binding: any, vnode: any) {
const context = vnode.context;
beforeMount: function (element: HTMLElement, binding: any) {
const context = binding.instance;

@@ -271,4 +272,4 @@ if(!context._validationMetadata)

},
unbind: function (element: HTMLElement, binding: any, vnode: any) {
const context = vnode.context;
unmounted: function (element: HTMLElement, binding: any) {
const context = binding.instance;
const metadata = context._validationMetadata;

@@ -281,5 +282,5 @@

const install = function(Vue: any, options: any) {
Vue.directive('show-error', showErrorDirective);
Vue.directive('validation-summary', summaryDirective);
const install = function(app: any, options: any) {
app.directive('show-error', showErrorDirective);
app.directive('validation-summary', summaryDirective);
}

@@ -286,0 +287,0 @@

0

tsconfig.json

@@ -0,0 +0,0 @@ {

example/app.css

Sorry, the diff of this file is not supported yet

example/app.html

Sorry, the diff of this file is not supported yet

example/compiled.js

Sorry, the diff of this file is too big to display

example/components/basic/basic.html

Sorry, the diff of this file is not supported yet

example/components/complex/complex.html

Sorry, the diff of this file is not supported yet

example/validation-styles.css

Sorry, the diff of this file is not supported yet

LICENSE

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