Skip to content
Snippets Groups Projects
Commit 4b20db5c authored by Kasper Seweryn's avatar Kasper Seweryn :pancakes:
Browse files

Add placeholder support for textarea

parent d61275bf
No related branches found
No related tags found
1 merge request!1Implement all components
...@@ -3,6 +3,7 @@ import { ref } from 'vue' ...@@ -3,6 +3,7 @@ import { ref } from 'vue'
const text1 = ref('# Funk\nwhale') const text1 = ref('# Funk\nwhale')
const text2 = ref('# Funk\nwhale') const text2 = ref('# Funk\nwhale')
const text3 = ref('')
</script> </script>
# Textarea # Textarea
...@@ -17,3 +18,10 @@ const text2 = ref('# Funk\nwhale') ...@@ -17,3 +18,10 @@ const text2 = ref('# Funk\nwhale')
<fw-textarea v-model="text" :max="20" /> <fw-textarea v-model="text" :max="20" />
``` ```
<fw-textarea v-model="text2" :max="20" /> <fw-textarea v-model="text2" :max="20" />
## Textarea placeholder
```html
<fw-textarea v-model="text" placeholder="Describe this track here…" />
```
<fw-textarea v-model="text3" placeholder="Describe this track here…" />
...@@ -10,10 +10,11 @@ interface Events { ...@@ -10,10 +10,11 @@ interface Events {
interface Props { interface Props {
modelValue: string modelValue: string
max?: number max?: number
placeholder?: string
} }
const emit = defineEmits<Events>() const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), { max: Infinity }) const props = withDefaults(defineProps<Props>(), { max: Infinity, placeholder: '' })
const value = useVModel(props, 'modelValue', emit) const value = useVModel(props, 'modelValue', emit)
const { undo, redo, commit, last } = useManualRefHistory(value) const { undo, redo, commit, last } = useManualRefHistory(value)
...@@ -194,6 +195,7 @@ const link = async () => { ...@@ -194,6 +195,7 @@ const link = async () => {
@keydown.ctrl.shift.x.exact.prevent="strikethrough" @keydown.ctrl.shift.x.exact.prevent="strikethrough"
@keydown.ctrl.k.exact.prevent="link" @keydown.ctrl.k.exact.prevent="link"
:maxlength="max" :maxlength="max"
:placeholder="placeholder"
v-model="value" v-model="value"
id="textarea_id" id="textarea_id"
/> />
...@@ -202,19 +204,19 @@ const link = async () => { ...@@ -202,19 +204,19 @@ const link = async () => {
<div class="separator" /> <div class="separator" />
<fw-button @click="heading1" icon="bi-type-h1" secondary :is-active="isHeading1" /> <fw-button @click="heading1" icon="bi-type-h1" secondary :is-active="isHeading1" :disabled="preview" />
<fw-button @click="heading2" icon="bi-type-h2" secondary :is-active="isHeading2" /> <fw-button @click="heading2" icon="bi-type-h2" secondary :is-active="isHeading2" :disabled="preview" />
<fw-button @click="paragraph" icon="bi-paragraph" secondary :is-active="isParagraph" /> <fw-button @click="paragraph" icon="bi-paragraph" secondary :is-active="isParagraph" :disabled="preview" />
<fw-button @click="quote" icon="bi-quote" secondary :is-active="isQuote" /> <fw-button @click="quote" icon="bi-quote" secondary :is-active="isQuote" :disabled="preview" />
<fw-button @click="orderedList" icon="bi-list-ol" secondary :is-active="isOrderedList" /> <fw-button @click="orderedList" icon="bi-list-ol" secondary :is-active="isOrderedList" :disabled="preview" />
<fw-button @click="unorderedList" icon="bi-list-ul" secondary :is-active="isUnorderedList" /> <fw-button @click="unorderedList" icon="bi-list-ul" secondary :is-active="isUnorderedList" :disabled="preview" />
<div class="separator" /> <div class="separator" />
<fw-button @click="bold" icon="bi-type-bold" secondary /> <fw-button @click="bold" icon="bi-type-bold" secondary :disabled="preview" />
<fw-button @click="italics" icon="bi-type-italic" secondary /> <fw-button @click="italics" icon="bi-type-italic" secondary :disabled="preview" />
<fw-button @click="strikethrough" icon="bi-type-strikethrough" secondary /> <fw-button @click="strikethrough" icon="bi-type-strikethrough" secondary :disabled="preview" />
<fw-button @click="link" icon="bi-link-45deg" secondary /> <fw-button @click="link" icon="bi-link-45deg" secondary :disabled="preview" />
<span v-if="max !== Infinity" class="letter-count">{{ max - value.length }}</span> <span v-if="max !== Infinity" class="letter-count">{{ max - value.length }}</span>
</div> </div>
......
...@@ -61,6 +61,10 @@ ...@@ -61,6 +61,10 @@
padding: 8px 12px 40px; padding: 8px 12px 40px;
font-family: monospace; font-family: monospace;
background: transparent; background: transparent;
&:empty {
font-family: $font-main;
}
} }
> .textarea-buttons { > .textarea-buttons {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment