Skip to content

Commit b1bf97c

Browse files
MuffinKMuffinK
committed
add password mode
1 parent 7a40774 commit b1bf97c

12 files changed

+115
-162
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# single-number-input-vue
22
number input using single char
3+

‎build/rollup.config.js

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,39 @@ import typescript from 'rollup-plugin-typescript2';
33
import commonjs from 'rollup-plugin-commonjs';
44
import nodeResolve from 'rollup-plugin-node-resolve';
55
import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
6-
import rollupPluginTypescriptPathMapping from 'rollup-plugin-typescript-path-mapping'
7-
6+
import rollupPluginTypescriptPathMapping from 'rollup-plugin-typescript-path-mapping';
7+
import replace from 'rollup-plugin-replace';
88

99
import alias from 'rollup-plugin-alias';
1010
export default {
11-
input: 'src/wrapper.js',
12-
output: {
13-
name: 'singleNumberInput',
14-
exports: 'named',
15-
globals: ['Vue']
16-
},
17-
external: [ 'vue' ],
18-
plugins: [
19-
VuePlugin({
20-
css: true, // Dynamically inject css as a <style> tag
21-
compileTemplate: true, // Explicitly convert template to render function
22-
}),
23-
rollupPluginTypescriptPathMapping({
24-
baseUrl: './',
25-
paths: {
26-
'vue-class-component': ['vue-class-component/lib/index']
27-
},
28-
outDir: 'dist',
29-
rootDir: 'src'
30-
}),
31-
nodeResolve({
32-
jsnext: true,
33-
main: false
34-
}),
35-
typescript(),
36-
buble() // Transpile to ES5x
37-
],
11+
input: 'src/wrapper.js',
12+
output: {
13+
name: 'singleNumberInput',
14+
exports: 'named',
15+
globals: ['Vue']
16+
},
17+
external: ['vue'],
18+
plugins: [
19+
VuePlugin({
20+
css: true, // Dynamically inject css as a <style> tag
21+
compileTemplate: true, // Explicitly convert template to render function
22+
}),
23+
replace({
24+
'process.env.NODE_ENV': JSON.stringify('production')
25+
}),
26+
rollupPluginTypescriptPathMapping({
27+
baseUrl: './',
28+
paths: {
29+
'vue-class-component': ['vue-class-component/lib/index']
30+
},
31+
outDir: 'dist',
32+
rootDir: 'src'
33+
}),
34+
nodeResolve({
35+
jsnext: true,
36+
main: false
37+
}),
38+
typescript(),
39+
buble() // Transpile to ES5x
40+
],
3841
};

‎dist/singleNumberInput.esm.js

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,6 @@ function isPrimitive(value) {
4141
var type = typeof value;
4242
return value == null || (type !== "object" && type !== "function");
4343
}
44-
function warn(message) {
45-
if (typeof console !== 'undefined') {
46-
console.warn('[vue-class-component] ' + message);
47-
}
48-
}
4944

5045
function collectDataFromConstructor(vm, Component) {
5146
// override _init to prevent to init as Vue instance
@@ -83,12 +78,6 @@ function collectDataFromConstructor(vm, Component) {
8378
plainData[key] = data[key];
8479
}
8580
});
86-
if (process.env.NODE_ENV !== 'production') {
87-
if (!(Component.prototype instanceof Vue) && Object.keys(plainData).length > 0) {
88-
warn('Component class must inherit Vue or its descendant class ' +
89-
'when class property is used.');
90-
}
91-
}
9281
return plainData;
9382
}
9483

@@ -154,21 +143,6 @@ function componentFactory(Component, options) {
154143
forwardStaticMembers(Extended, Component, Super);
155144
return Extended;
156145
}
157-
var reservedPropertyNames = [
158-
// Unique id
159-
'cid',
160-
// Super Vue constructor
161-
'super',
162-
// Component options that will be used by the component
163-
'options',
164-
'superOptions',
165-
'extendOptions',
166-
'sealedOptions',
167-
// Private assets
168-
'component',
169-
'directive',
170-
'filter'
171-
];
172146
function forwardStaticMembers(Extended, Original, Super) {
173147
// We have to use getOwnPropertyNames since Babel registers methods as non-enumerable
174148
Object.getOwnPropertyNames(Original).forEach(function (key) {
@@ -203,13 +177,6 @@ function forwardStaticMembers(Extended, Original, Super) {
203177
return;
204178
}
205179
}
206-
// Warn if the users manually declare reserved properties
207-
if (process.env.NODE_ENV !== 'production'
208-
&& reservedPropertyNames.indexOf(key) >= 0) {
209-
warn("Static property name '" + key + "' declared on class '" + Original.name + "' " +
210-
'conflicts with reserved property name of Vue internal. ' +
211-
'It may cause unexpected behavior of the component. Consider renaming the property.');
212-
}
213180
Object.defineProperty(Extended, key, descriptor);
214181
});
215182
}
@@ -243,7 +210,6 @@ function Prop(options) {
243210
});
244211
}
245212

246-
// import Component from 'vue-class-component';
247213
var NumberString = function NumberString(maxLength) {
248214
this.value = '';
249215
this.maxLength = maxLength || 4;
@@ -258,7 +224,10 @@ NumberString.prototype.pop = function pop () {
258224
this.value = this.value.slice(0, -1);
259225
}
260226
};
261-
NumberString.prototype.getDisplayString = function getDisplayString () {
227+
NumberString.prototype.getDisplayString = function getDisplayString (password) {
228+
if (password) {
229+
return new Array(this.value.length).fill('*').join('').padEnd(this.maxLength, ' ').split('').join('|');
230+
}
262231
return this.value.padEnd(this.maxLength, ' ').split('').join('|');
263232
};
264233
NumberString.prototype.setValue = function setValue (inputNumber) {
@@ -281,19 +250,19 @@ var SingleNumberInput = (function (Vue$$1) {
281250
SingleNumberInput.prototype.mounted = function mounted () {
282251
this.stringValue = new NumberString(Number(this.chNumber));
283252
this.stringValue.setValue(this.value);
284-
this.displayString = this.stringValue.getDisplayString();
253+
this.displayString = this.stringValue.getDisplayString(this.password);
285254
this.widthStyle.width = Number(this.chNumber) * 4 + 'ch';
286255
};
287256
SingleNumberInput.prototype.keydown = function keydown (event) {
288257
var numberValue = '0123456789'.indexOf(event.key);
289258
if (numberValue !== -1) {
290259
this.stringValue.push(event.key);
291-
this.displayString = this.stringValue.getDisplayString();
260+
this.displayString = this.stringValue.getDisplayString(this.password);
292261
this.$emit('input', this.stringValue.value);
293262
}
294263
else if (event.key === "Backspace") {
295264
this.stringValue.pop();
296-
this.displayString = this.stringValue.getDisplayString();
265+
this.displayString = this.stringValue.getDisplayString(this.password);
297266
this.$emit('input', this.stringValue.value);
298267
}
299268
event.cancelBubble = true;
@@ -305,6 +274,9 @@ var SingleNumberInput = (function (Vue$$1) {
305274
__decorate([
306275
Prop()
307276
], SingleNumberInput.prototype, "chNumber", void 0);
277+
__decorate([
278+
Prop()
279+
], SingleNumberInput.prototype, "password", void 0);
308280
__decorate([
309281
Prop()
310282
], SingleNumberInput.prototype, "value", void 0);
@@ -352,11 +324,11 @@ __vue_render__._withStripped = true;
352324
/* style */
353325
var __vue_inject_styles__ = function (inject) {
354326
if (!inject) { return }
355-
inject("data-v-ceba03e8_0", { source: "\ninput[data-v-ceba03e8]{\n background: transparent;\n border: black solid 1px;\n text-align: center;\n border-radius: 5px;\n font-size: xx-large;\n letter-spacing: 1ch;\n text-indent: 1ch;\n font-family: monospace;\n color: transparent;\n text-shadow: 0 0 0 #000;\n}\n", map: {"version":3,"sources":["/Users/muffin/workspace/single-number-input-vue/src/singleNumberInput.vue"],"names":[],"mappings":";AAwEA;EACA,wBAAA;EACA,wBAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;EACA,iBAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;CACA","file":"singleNumberInput.vue","sourcesContent":["<template>\n <div>\n <input type=\"text\" v-model=\"displayString\" :style=\"widthStyle\" @keydown=\"keydown\">\n </div>\n</template>\n\n<script lang=\"ts\">\n\nimport Vue from \"vue\";\nimport {Component, Prop, Watch} from 'vue-property-decorator';\n// import Component from 'vue-class-component';\n\nclass NumberString {\n value = '';\n maxLength: number;\n\n constructor(maxLength: number){\n this.maxLength = maxLength || 4;\n }\n push(char: string){\n if(this.value.length < this.maxLength && char.length === 1){\n this.value = [this.value, char].join('');\n }\n }\n pop(){\n if(this.value.length !== 0){\n this.value = this.value.slice(0, -1);\n } \n }\n getDisplayString(){\n return this.value.padEnd(this.maxLength, ' ').split('').join('|');\n }\n setValue(inputNumber: string){\n if(inputNumber.length>= this.maxLength && !isNaN(parseInt(inputNumber))){\n this.value = inputNumber;\n }\n }\n}\n@Component({})\nexport default class SingleNumberInput extends Vue {\n displayString = '';\n widthStyle = {\n width: '16ch'\n }\n @Prop() private chNumber!: string;\n stringValue! : NumberString;\n @Prop() value!: string;\n mounted() {\n this.stringValue = new NumberString(Number(this.chNumber));\n this.stringValue.setValue(this.value);\n this.displayString = this.stringValue.getDisplayString();\n this.widthStyle.width = Number(this.chNumber) * 4 + 'ch';\n }\n\n keydown(event: KeyboardEvent){\n let numberValue = '0123456789'.indexOf(event.key);\n if(numberValue !== -1){\n this.stringValue.push(event.key);\n this.displayString = this.stringValue.getDisplayString();\n this.$emit('input', this.stringValue.value);\n }else if(event.key === \"Backspace\"){\n this.stringValue.pop()\n this.displayString = this.stringValue.getDisplayString();\n this.$emit('input', this.stringValue.value);\n }\n event.cancelBubble = true;\n event.preventDefault();\n }\n}\n</script>\n\n<style scoped>\n input{\n background: transparent;\n border: black solid 1px;\n text-align: center;\n border-radius: 5px;\n font-size: xx-large;\n letter-spacing: 1ch;\n text-indent: 1ch;\n font-family: monospace;\n color: transparent;\n text-shadow: 0 0 0 #000;\n }\n</style>\n\n"]}, media: undefined });
327+
inject("data-v-70028fc6_0", { source: "\ninput[data-v-70028fc6]{\n background: transparent;\n border: black solid 1px;\n text-align: center;\n border-radius: 5px;\n font-size: xx-large;\n letter-spacing: 1ch;\n text-indent: 1ch;\n font-family: monospace;\n color: transparent;\n text-shadow: 0 0 0 #000;\n}\n", map: {"version":3,"sources":["/Users/muffin/workspace/single-number-input-vue/src/singleNumberInput.vue"],"names":[],"mappings":";AA2EA;EACA,wBAAA;EACA,wBAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;EACA,oBAAA;EACA,iBAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;CACA","file":"singleNumberInput.vue","sourcesContent":["<template>\n <div>\n <input type=\"text\" v-model=\"displayString\" :style=\"widthStyle\" @keydown=\"keydown\">\n </div>\n</template>\n\n<script lang=\"ts\">\n\nimport Vue from \"vue\";\nimport {Component, Prop, Watch} from 'vue-property-decorator';\n\nclass NumberString {\n value = '';\n maxLength: number;\n\n constructor(maxLength: number){\n this.maxLength = maxLength || 4;\n }\n push(char: string){\n if(this.value.length < this.maxLength && char.length === 1){\n this.value = [this.value, char].join('');\n }\n }\n pop(){\n if(this.value.length !== 0){\n this.value = this.value.slice(0, -1);\n } \n }\n getDisplayString(password: boolean){\n if(password){\n return new Array(this.value.length).fill('*').join('').padEnd(this.maxLength, ' ').split('').join('|');\n }\n return this.value.padEnd(this.maxLength, ' ').split('').join('|');\n }\n setValue(inputNumber: string){\n if(inputNumber.length>= this.maxLength && !isNaN(parseInt(inputNumber))){\n this.value = inputNumber;\n }\n }\n}\n@Component({})\nexport default class SingleNumberInput extends Vue {\n displayString = '';\n widthStyle = {\n width: '16ch'\n }\n @Prop() private chNumber!: string;\n @Prop() private password!: boolean;\n stringValue! : NumberString;\n @Prop() value!: string;\n mounted() {\n this.stringValue = new NumberString(Number(this.chNumber));\n this.stringValue.setValue(this.value);\n this.displayString = this.stringValue.getDisplayString(this.password);\n this.widthStyle.width = Number(this.chNumber) * 4 + 'ch';\n }\n\n keydown(event: KeyboardEvent){\n let numberValue = '0123456789'.indexOf(event.key);\n if(numberValue !== -1){\n this.stringValue.push(event.key);\n this.displayString = this.stringValue.getDisplayString(this.password);\n this.$emit('input', this.stringValue.value);\n }else if(event.key === \"Backspace\"){\n this.stringValue.pop()\n this.displayString = this.stringValue.getDisplayString(this.password);\n this.$emit('input', this.stringValue.value);\n }\n event.cancelBubble = true;\n event.preventDefault();\n }\n}\n</script>\n\n<style scoped>\n input{\n background: transparent;\n border: black solid 1px;\n text-align: center;\n border-radius: 5px;\n font-size: xx-large;\n letter-spacing: 1ch;\n text-indent: 1ch;\n font-family: monospace;\n color: transparent;\n text-shadow: 0 0 0 #000;\n }\n</style>\n\n"]}, media: undefined });
356328

357329
};
358330
/* scoped */
359-
var __vue_scope_id__ = "data-v-ceba03e8";
331+
var __vue_scope_id__ = "data-v-70028fc6";
360332
/* module identifier */
361333
var __vue_module_identifier__ = undefined;
362334
/* functional template */
@@ -505,5 +477,5 @@ if (GlobalVue) {
505477
GlobalVue.use(plugin);
506478
}
507479

508-
export default component;
480+
export default SingleNumberInput$1;
509481
export { install };

0 commit comments

Comments
 (0)