artifact: "Vue 3 Component Library" status: "beta"
vue3complib
Vue 3 component library.
Project setup
yarn install
Build library
yarn build
Compiles and hot-reloads for development
yarn serve
Lints and fixes files
yarn lint
components
Labeled
Labeled content. Label can be either on left or right side.
Props
label
-
String
, required. Label to be displayed.
rev
-
Boolean
, optional, defaults tofalse
. By default the label is rendered on the left side. Ifrev
istrue
then the label will be rendered on the right side.
Perscheck
Persistent checkbox.
Props
id
-
String
, required. Local storage unique ID, to be used to store checkbox state.
default
-
Boolean
, optional, defaults tofalse
. Default value to use when there is not a yet a stored value in local storage,false
for unchecked andtrue
for checked.
Events
perscheckchanged
Event content
id
Local storage unique ID.
checked
Checked status of persistent checkbox, false
for unchecked, true
for checked.
Perstext
Persistent text input.
Props
id
-
String
, required. Local storage unique ID, to be used to store text input value.
default
-
String
, optional, defaults to empty string. Default value to use when there is not a yet a stored value in local storage.
buttoncaption
-
String
, optional, defaults to empty string. If non empty, a submit button with this caption will be added.
onsubmitclear
-
Boolean
, optional, default tofalse
. Clear text on submit.
Events
perstextchanged
Event content
id
Local storage unique ID.
value
Value of the persistent text input.
submit
Boolean, set to true
if the text was submitted by pressing ENTER or the submit button, undefined
otherwise.
Perscombo
Persistent combo box.
Props
id
-
String
, required. Local storage unique ID, to be used to store selected value.
options
-
Array
, optional ( a default with 3 test options is provided ). Each element of the array is an object that has adisplay
and avalue
field. The former will be shown to the user, that latter will be returned as selected value.
[
{
display: "Display1",
value: "value1",
},
{
display: "Display2",
value: "value2",
},
...
}
Events
perscombochanged
Event content
id
Local storage unique ID.
value
Selected value of the persistent combo.
Tabpane
Tabpane.
Props
id
-
String
, required. Local storage unique ID, to be used to store selected tab.
width
-
Number
, optional. Width of tab content inpx
. Defaults to 600. Should be set usingv-bind:
or:
.
height
-
Number
, optional. Height of tab content inpx
. Defaults to 400. Should be set usingv-bind:
or:
.
Slots
Every child of a Tabpane
is considered a tab. It can be any valid HTML element. You should add attribute caption
to each of these elements ( or accept default tab name, which is Tab {index of tab}
).
Example
<Tabpane
id="tabpane"
v-on:tabpanechanged="event"
:width="300"
:height="100"
>
<div caption="Custom tab">custom</div>
<div>tab 1</div>
<div>tab 2</div>
</Tabpane>
Events
tabpanechanged
Event content
id
Local storage unique ID.
selectedTab
Index of selected tab.
selectedTabCaption
Caption of selected tab.
Link
Link that opens in new tab.
Props
href
-
String
, required. Url or link.
caption
-
String
, optional, defaults tohref
. Caption of link.
Chessboard
Chessboard.
Props
fen
FEN of the initial position. Optional, if no FEN is specified, the starting position will be set up.
Events
chessboardmoveplayed
Event content
orig
Original square of the move.
dest
Destination square of the move.
uci
Move in UCI notation.
isLegal
True if the move is legal, false otherwise.
legals
Legal UCIs for this move. Can be more than one if the move is promotion.
legalUci
If the move is legal, this is the UCI move the board actually played ( the first of legal UCIs ).
san
Move in SAN notation.