The case is that I'm showing Loading component on fetch request. I use store to set $loading to true and inside conditions is the Loading component. The problem is that the Loading component seems to be taking some time to show. It feels/looks like the reason is re-rendering of Loading component. So, I was looking for v-show like thing in Svelte, which I cannot find in Docs. (Don't get angry if its there, just tell me.)
Can anyone help with this case?
Either wrap it in an {#if someCondition} block, or slap a hidden={!someCondition} attribute on an element.
If you want a block of HTML that does not re-render when the condition is changed, here is a simple solution:
<script>
// Show.svelte
export let show = true;
</script>
<div class:hide={!show}>
<slot />
</div>
<style>
.hide {
display: none !important;
}
</style>
And then use the Show component to create that block:
<script>
import Show from "Show.svelte";
let show = true;
</script>
<button on:click={() => { show = !show}}>
Click to Show/Hide Content
</button>
<Show {show}>
<div>Content</div>
</Show>
I have posted the Show component as an npm package https://www.npmjs.com/package/svelte-show
Related
I have a component which receive named slots:
<Child>
<template #content>
<p>tooltip content</p>
</template>
<template #activator>
<button>hover me</button>
</template>
</Child>
I wanna know the position and size of the activator slot no matter where I'm gonna use it and what I'm gonna do with it. If I do like this:
<template>
<div style="margin-top: 13px;" :style="styleObject">
<Child>
<template #content>
<p>tooltip content</p>
</template>
<template #activator>
<button>hover me</button>
</template>
</Child>
</div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import Child from "./components/Child.vue";
const styleObject = reactive({
marginLeft: '16px'
})
setTimeout(() => {
styleObject.marginLeft = '30px'
}, 2000)
</script>
Inside <Child> component I want to detect position changed after 2 seconds. I was able to get initial position and size with this:
const slots = useSlots()
const activatorStyles = reactive({
top: 0,
left: 0,
height: 0,
width: 0
})
const getActivatorStyles = () => {
if (slots?.activator) {
activatorStyles.top = slots.activator()[0]?.el?.offsetTop
activatorStyles.left = slots.activator()[0]?.el?.offsetLeft
activatorStyles.height = slots.activator()[0]?.el?.offsetHeight
activatorStyles.width = slots.activator()[0]?.el?.offsetWidth
console.log('activatorStyles', activatorStyles)
}
}
onUpdated(getActivatorStyles)
onMounted(getActivatorStyles)
but I'm not sure how to detect that in any of the parent components something changed which resulted in this <Child> component position or size change. For example this timeout from snippet above.
I was trying onUpdate but this seems to be working only on DOM Nodes changes (not styles). I was also trying to make this object as a computed property but no luck. Here is vue playground where initial size and position is correctly gathered but after timeout execution it doesn't detect that left changed and it stays 24.
My question is how can I can keep my activatorStyles object up-to-date no matter what will happen in parent components?
EDIT: I tried MutationObserver on parent but problem is that I don't know from where the changes of position / size might come. If I observer parentElement as suggested it works very well if the styles binding are on direct parent. If you I have more <div> nested and style binding is happening somewhere deeper the mutationObserver is not triggering anymore. To make it work I would need to pass document.body to observer which is not best performance, isn't it? playground example?
A component will only update if its props/data/computed changed. What happens there is that the update happens on the parent.
If you simply just want to access the parent from child, just use the $parent property and check/watch the property that holds the style.
Docs: https://vuejs.org/api/component-instance.html#parent
NOTE:
$parent is a reference to whatever Vue component rendered your component.
<A>
<B />
</A>
In this example, B's $parent would be A.
If you're going to teleport/move the element manually to another element, then what you want is
$el.parentElement
Example: https://www.w3schools.com/jsref/prop_node_parentelement.asp
Another option would be to check DOM changes via MutationObserver or using library like https://popper.js.org/
Docs: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Example: https://stackoverflow.com/a/20559787/10975709
My opinionated answer though would be to suggest encapsulating the idea of styling the parent as part of your component that way your component can safely check that prop always.
Your example looks similar to some of Vuetify components like the Dialog for example (because of the activator slot).
Vuetify encapsulates the responsibilities everything on its own and doesn't rely on the code of whoever uses it.
Docs: https://vuetifyjs.com/en/components/dialogs/#usage
So I've looked through stackoverflow and the documentation in Vue 3 but can't quite find what I'm looking for.
I'm trying to find a way to target a named slot, penetrate the scoped element within that slot, and override one of its children's styles. I assume I need the ::slotted selector and the :deep selector for this mission. Does anyone know how to do this?
Here is an example of the situation I am trying to solve for (LayoutContainer Component):
<section>
<slot name="text"></slot>
<slot></slot>
<slot name="sidebar"></slot>
</section>
the component that will go into the "text" slot (Eyebrow Component):
<section class="eyebrow-container">
<h1>{{title}}</h1>
<h6>{{description"}}</h6>
</section>
a completed view of the code on a page component:
<LayoutContainer>
<template #text>
<Eyebrow :title='test' :description="this is a description"></Eyebrow>
</template>
<PageBody></PageBody>
<template #sidebar>
<PageSideBar></PageSideBar>
</template>
</LayoutContainer>
Solutions I have tried in SCSS with no success:
::slotted(h6) { color: red }
::slotted(text){
:deep(.eyebrow-container) {
h6 { color: red; }
}
}
::slotted(text) {
:deep(h6) { color: red; }
}
and a few others I have forgotten at this point.
Does anyone have any ideas on how to get to the h6 tag inside of the Eyebrow Component from the Page Component's SCSS?
The slot content is owned by the parent passing them in.
So you don't need to use :slotted. You can simply use the :deep selector
<style scoped>
:deep(h6) {
color: red;
}
</style>
See it live
If you are wondering how to use :slotted then in your case it would be used in LayoutContainer component trying to style what the parent component passes in.
Scoped styling and styling child components from a parent don't work as you might think if you use multi-root node components.
So if you use mutli-root node component and :deep doesn't work, See my other answer
This is about a Vue 3 app with Vite, not webpack.
For now, as you can see from this issue on vite's issue page, vite doesn't have a convenient way of inlining SVGs without using external plugins. Vite does however, support importing files as raw text strings. As such, I had an idea to use this feature and to inline SVG's by passing the raw SVG strings into an element's v-html.
It actually works great, the SVG shows up on the page as expected and I can do the usual CSS transforms (the whole purpose of inlining them like this), but it's not perfect. As it currently stands, the element that receives the v-html directive simply places the provided HTML nested as a child. For example, if I do <span v-html="svgRaw" />, the final HTML comes out something like this
<span>
<svg>
<!-- SVG attributes go here -->
</svg>
</span>
Is there any way for me to essentially replace the parent element on which v-html is declared with the top-level element being passed to it? In the above example, it would mean the <span> just becomes an <svg>
EDIT:
Thanks to tony19 for mentioning custom directives.
My final result looks like this:
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.directive("inline", (element) => {
element.replaceWith(...element.children);
});
app.mount("#app");
Then, in the component I simply use the directive, <svg v-html="svgRaw" v-inline /> and it works great!
You could create a custom directive that replaces the wrapper element with its contents:
Use app.directive() to create a global directive, named v-inline-svg:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
.directive('inline-svg', el => {
if (!el) {
return
}
// copy attributes to first child
const content = el.tagName === 'TEMPLATE' ? el.content : el
if (content.children.length === 1) {
;[...el.attributes].forEach((attr) => content.firstChild.setAttribute(attr.name, attr.value))
}
// replace element with content
if (el.tagName === 'TEMPLATE') {
el.replaceWith(el.content)
} else {
el.replaceWith(...el.children)
}
})
.mount('#app')
In your component, include v-inline-svg on the v-html wrapper element (also works on <template> in Vue 3):
<svg v-html="svgRaw" v-inline-svg />
<!-- OR -->
<template v-html="svgRaw" v-inline-svg />
demo
I found that using the method above works but is only good for a single rendering of the svg... The element starts throwing errors if I try to change the svg contents dynamically, not sure why but assuming that the dom replacement has something to do with it.
I modified the code slightly for my use case.
app.directive('inline-svg', {
updated: (element) => {
if (element.children.length === 0) {
return
}
const svg = element.children[0]
if(svg.tagName.toLowerCase() !== 'svg') {
return
}
for (let i = 0; i < svg.attributes.length; i++) {
const attr = svg.attributes.item(i)
element.setAttribute(attr.nodeName, attr.nodeValue)
}
svg.replaceWith(...svg.children)
}
})
In my component I have.
<svg v-if="linkType !== null" v-html="linkType" v-inline-svg></svg>
The directive now copies the svg attributes across from the child to the parent and then replaces the child with it's children.
Coming from Vue2. I think this still works:
Instead of span you can use the special Vue tag template:
<template v-html="svgRaw" />
This will not render <template /> as a tag itself, but render the elements given in v-html without a parent element.
I am separating blocks with a v-if-statement like:
<div v-if="resp > 1023">
<PdfViewer />
</div>
<div v-else>
<PdfViewer />
</div>
The problem I got is when viewing it on smaller screen widths PdfViewer gets rendered one time. On widths over 1023px it's rendered two times even if the second mention of it is in the if-else block. Other html elements inside it ain't shown, but the component is.
Resp is the screen width on mount:
mounted() {
this.resp = window.innerWidth;
console.log(this.resp);
}
I solved it by assigning the value in the created lifecycle hook, so the value gets set before v-if evaluates.
created() {
this.resp = window.innerWidth;
console.log(this.resp);
}
In my Vue app, I have a component that handles a simple form named TodoForm.
Using bootstrap-vue, i would like to submit this form when the OK button of a bootstrap modal is pressed.
The code looks like this:
<b-modal id="todo-form-modal">
<todo-form />
</b-modal>
I don't want to put the modal component inside the TodoForm component since the TodoForm component only handles the form behavior, not the container where it is displayed.
I could also disable the OK button and put a button inside the form myself, but i'm sure there is a proper, a better way to submit this form (it is more like an exercise than a real project with an actual deadline).
I found the #ok event in the doc (triggered when the OK button is pressed), which is nice but i'm struggling to understand how i could use it to call a onSubmit() method inside the TodoForm.
For instance, it looks like this:
<b-modal id="todo-form-modal" #ok="something">
<todo-form />
</b-modal>
Ideally, the #ok="something" should call a method inside the TodoForm component.
How can I achieve this the right way ?
Expanding on #mapawa's answer:
<template>
<b-modal ... #ok="handleOk">
<todo-form ref="todoform" ...></todo-form>
</b-modal>
</template>
<script>
import TodoForm from 'somewhere/todoform'
export default {
components: { TodoForm },
methods: {
handleOk(bvEvt) {
// This assumes the root element of the todo form is the <form>
this.$refs.todoform.$el.submit()
// Alternatively, if your Todo Form exposes a submit method
this.$refs.todoform.submit()
}
}
}
</script>
What you want to do is to reference the parent component in the child component. You can use the ref attribute for this. I can't possibly explain this better than the official docs, so take a look at this.