0.0.1 • Published 3 years ago
lipak-input v0.0.1
Lipak Input
Lipak lipak-built input.
Installation
npm install --save @lipak/lipak-input
How to use
add component to vue instance in main.js
.
// main.js
import Vue from 'vue';
import LipakInput from '@lipak/lipak-input'
...
Vue.use(LipakInput);
...
now lipak input can be used as a component in the vue template.
<template>
<div>
my lipak input: <LipakInput v-model="username" />
</div>
</template>
<script>
export default {
data() {
return {
username: '',
}
}
}
</script>
props
general props
- v-model
- type:
[String, Number, Array, Object]
- required:
true
- type:
- type
- type:
String
- enum:
text, password, select, date, double, number, select-multiple, textarea
- default:
text
- type:
- title
- type:
String
- default:
''
- type:
- disabled
- type:
Boolean
- default:
false
- type:
- required
- type:
Boolean
- default:
false
- type:
- placeholder
- type:
String
- default:
''
- type:
- success-message
- type:
String
- default:
''
- type:
- error-message
- type:
String
- default:
''
- type:
- v-model
textarea type props
- rows
- type:
[String, Number]
- default:
3
- type:
- rows
select type props
- options
- type:
Array of Objects
- default:
[]
- optionsindex
- type:
Object
- props:
- value
- type:
String
- required:
true
- type:
- title
- type:
String
- required:
true
- type:
- disabled
- type:
Boolean
- default:
false
- type:
- value
- type:
- type:
- default-options-disabled
- type:
Boolean
- default:
true
- type:
- options
select-multiple type props
- v-model
- type:
Array of Objects
(objects are selected from options)
- type:
- options
- type:
Array of Objects
- default:
[]
- optionsindex
- type:
Object
- props:
- value
- type:
String
- required:
true
- type:
- title
- type:
String
- required:
true
- type:
- disabled
- type:
Boolean
- default:
false
- type:
- value
- type:
- type:
- v-model
date type props
- id
- type:
String
- required:
true
- unique:
true
- type:
- date-type
- type:
String
- enum:
date, datetime, year, month, time
- default:
date
- type:
- min-date
- type:
String
- default:
null
- type:
- max-date
- type:
String
- default:
null
- type:
- id
double type props
- v-model
- type:
Object
- default:
{ main: '', side: '' }
- type:
- title
- type:
String
- default:
''
- type:
- required
- type:
Boolean
- default:
false
- type:
- success-message
- type:
String
- default:
''
- type:
- error-message
- type:
String
- default:
''
- type:
all other props are like any types props written above, but has appended with
-main
and-side
.- v-model
radio type props
- v-model
- type:
[String, Number]
- required:
true
- type:
- data
- type:
[String, Number]
- default:
''
- type:
- label
- type:
String
- default:
''
- type:
- disabled
- type:
Boolean
- default:
false
- type:
general props are not supported by radio type. you can't use radio type in double type.
- v-model
number type props
- v-model
- type:
Number
- required:
true
- type:
- min
- type:
Number
- default:
-Infinity
- type:
- max
- type:
Number
- default:
+Infinity
- type:
- disabled
- type:
Boolean
- default:
false
- type:
you can't use number type in double type.
- v-model
Examples
text full props
<LipakInput
v-model="myValue"
type="text"
title="myTitle"
:disabled="false"
:required="true"
placeholder="myPlaceholder"
success-message="myMessage"
/>
select full props
<LipakInput
v-model="myValue"
type="select"
title="myTitle"
:disabled="false"
:required="true"
placeholder="myPlaceholder"
success-message="myMessage"
:default-option-disabled="true"
:options="[{ value: '1', title: 'option1 title' },
{ value: '2', title: 'option2 title', disabled: true },
{ value: '3', title: 'option3 title' }]"
/>
select-multiple full props
<LipakInput
v-model="myValue"
type="select-multiple"
title="myTitle"
:disabled="false"
:required="true"
placeholder="myPlaceholder"
success-message="myMessage"
:options="[{ value: '1', title: 'option1 title' },
{ value: '2', title: 'option2 title', disabled: true },
{ value: '3', title: 'option3 title' }]"
/>
date full props
<LipakInput
v-model="myValue"
type="date"
title="myTitle"
:disabled="false"
:required="true"
placeholder="myPlaceholder"
success-message="myMessage"
date-type="datetime"
min-date="2020/05/04"
max-date="2020/05/22"
/>
double full props
<LipakInput
v-model="myValue"
type="double"
title="myTitle"
:required="true"
success-message="myMessage"
type-main="select"
:default-option-disabled-main="true"
:options-main="[{ value: '1', title: 'option1 title' },
{ value: '2', title: 'option2 title', disabled: true },
{ value: '3', title: 'option3 title' }]"
type-side="date"
date-type-side="datetime"
min-date-side="2020/05/04"
max-date-side="2020/05/22"
/>
radio full props
<LipakInput
v-model="myValue"
type="radio"
:disabled="false"
label="myLabel1"
data="myData1"
/>
<LipakInput
v-model="myValue"
type="radio"
:disabled="false"
label="myLabel2"
data="myData2"
/>
number full props
<LipakInput
v-model="myValue"
type="number"
:disabled="false"
:min="3"
:max="7"
/>
Important notes
- if
success-message
anderror-message
set together,successMessage
will be rendered.
0.0.1
3 years ago