mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 05:35:07 +02:00
Creates skeleton input and button form component
This commit is contained in:
parent
14787a97e3
commit
a74b45136e
52
src/components/FormElements/Button.vue
Normal file
52
src/components/FormElements/Button.vue
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<button>
|
||||||
|
<slot name="text"></slot>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Button',
|
||||||
|
props: {
|
||||||
|
text: String,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
/* Layout settings */
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
min-width: 10rem;
|
||||||
|
cursor: pointer;
|
||||||
|
svg {
|
||||||
|
width: 1.2rem;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
path, g {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default visual settings, can be overridden when needed */
|
||||||
|
button {
|
||||||
|
color: var(--primary);
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--primary);
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
&:hover {
|
||||||
|
color: var(--background);
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
73
src/components/FormElements/Input.vue
Normal file
73
src/components/FormElements/Input.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="`input-container ${layout}`">
|
||||||
|
<label v-if="label" for="name">{{label}}</label>
|
||||||
|
<input
|
||||||
|
:type="type"
|
||||||
|
:value="value"
|
||||||
|
v-on:input="updateValue($event.target.value)"
|
||||||
|
:name="name"
|
||||||
|
:id="name"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Input',
|
||||||
|
props: {
|
||||||
|
value: String, // The value bound to v-model
|
||||||
|
label: String, // An optional label to display above
|
||||||
|
name: String, // Required unique ID value, for accessibility
|
||||||
|
placeholder: String, // Optional placeholder value
|
||||||
|
type: {
|
||||||
|
default: 'text', // Input type, e.g. text, password, number
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
layout: { // Layout alignment direction, either horizonal or verical
|
||||||
|
validator: (value) => ['horizontal', 'vertical'].indexOf(value) !== -1,
|
||||||
|
type: String,
|
||||||
|
default: 'vertical',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue(value) {
|
||||||
|
this.$emit('input', value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
div.input-container {
|
||||||
|
margin: 0.25rem auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
&.vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&.horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
label { margin-right: 0.25rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
min-width: 10rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: var(--primary);
|
||||||
|
background: var(--background);;
|
||||||
|
border: 1px solid var(--primary);
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 1px 1px 6px var(--config-settings-color);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
Loading…
x
Reference in New Issue
Block a user