ipyvuetify can't set prop to static text - jupyter-notebook

Hello nice people of Internet ;)
New job, new language. I need to modify Ipyvuetify Vue code in Jupiter notebooks to use static props.
I was able to throw together simple vue example
where I am able to set prop of child component via assigned static text in declarative way in vue file.
And it works just fine in js variant. https://jsfiddle.net/wu9bxL1n/1/
But the same approach doesn't seem to work at all in ipyvuetify syntax. No error no nothing. Static string assigned to child prop is just being silently ignored and I can't seem to find anything in docs as for why. What did I missed ?
Here is the smallest possible code in ipyvuetify syntax copy/pastable to Jupiter notebook.
import ipyvuetify as v
import traitlets
​
class AA(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<v-card-title>{{label}}</v-card-title>
</template>
<script> export default { name: "aa", props: ['label'] } </script>''').tag(sync=True)
label = traitlets.Unicode('But this is showing default text instead').tag(sync=True)
​
class BB(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<div>
<v-text-field label="This text was set statically" ></v-text-field>
<aa label="This text was set statically"></aa>
</div>
</template>''').tag(sync=True)
components = traitlets.Dict(default_value={'aa': AA()}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
​
BB()
​---
Output:
This text was set statically
But this is showing default text instead

O boy.
Answer was some undocumented behavior seen in some 3rd party lib source code.
we need to use
default_value={'aa': AA }
instead of
default_value={'aa': AA()}
then setting static props to your own components will work.
Weird I know.
Hopefully people solving the some problem will find this.
Take care guys ;)

Related

Nuxt3 navigateTo gives Uncaught (in promise) TypeError

I am trying to programmatically route to a detail page from within a list in Nuuxt3 app:
#/pages/items/index.vue
<script setup lang="ts">
const gotoDetail = async (itemId) => {
await navigateTo(`/items/${itemId}`)
}
</script>
<template>
<div>
<NuxtLayout name="main-standard">
<template #main-content>
<div v-for='item in items' :key=item>
<div #click='gotoDetail(item.id)'
</div>
</template>
<template #main-content>
<!-- aside content -->
</template>
<NuxtLayout>
</div>
</template>
And I am getting this error message:
ERROR: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
I have searched for an answer and most solutions mention to wrap the <NuxtLayout> with a div. But that did'nt solve my issue.
I am using a default Layout. So the<NuxtLayout name="main-standard"> is inside this default layout. Both pages: index.vue and [itemId].vue are in the pages/items/ folder.
I am doing something wrong but just can't find it. Does anyone see whats going on?
A few things here are going to break your code.
One, the middle div with the click handler is missing a closing >, contents, and a closing </div>. (Of course you may have omitted that for brevity)
items isn't defined, so there's nothing to iterate over.
You're using the same v-slot name #main-content for multiple templates, but each slot name should be unique. The # attributes (shorthand for v-slot) should match the slot names you write in your layout, and those must also be unique within the component.
The main problem looks to be related to the way you're using layouts. To mess with layout on a page using the component, you have to add this into the setup script:
definePageMeta({
layout: false,
});
A different way of applying your custom layout to this page is to replace the false boolean with the name of the layout, and omit the tag from this page altogether. For that to work, app.vue should have a <NuxtLayout> tag wrapping the <NuxtPage>
Not a breaking change, but it may also simplify things to write
<NuxtLink :to="`/items/${itemId}`">{{ whatever you wanted inside that div }} </NuxtLink>
If you need to run code before navigating to that page, you can add it into the top-level middleware folder, and call that named middleware on the page before which you want it to run.

Storybook Error: Couldn't find story matching 'components-button--page'

I can't seem to resolve this error I am getting in Storybook. I have the following file called Button.stories.mdx:
import { Meta, Story, ArgsTable, Canvas } from '#storybook/addon-docs/blocks';
import Button from './Button';
import ButtonStory from './Button.stories.tsx'
<Meta title="Components/Button" component={Button} />
export const Template = (args) => <Button {...args } />
# Button Component
---
This Button component is supposed to handle all states for a button. It extends off of the HTML button type so that you should have all native HTML features that a button would provide.
We may make some of these optional props required if we deam that it is important. This is usually an accessibility call.
This button should handle actions that occur on the page and if you want to use a href to make it a link you should surround it within an a tag.
Types supported by aero-design-system:
- Primary
- Secondary
## Quick Start
To create a button, use import the `Button` and give it the following props `props`.
<Canvas>
</Canvas>
<ArgsTable of={Button} args={{
backgroundColor: { control: 'color' }
}} />
And I am getting the following error:
Couldn't find story matching 'components-button--page'.
I have tried placing a blank story in there with that ID but that didn't seem to fix anything. I just got a new error
Uncaught Error: Docs-only story
I haven't been able to see anything related to this on here yet.
In my case, the problem was simple, I was trying to load unexisting story:
http://localhost:6006/?path=/story/spoiler--primary
instead, I should've loaded this :)
http://localhost:6006/?path=/story/testcomponent--primary
Something that storybook's documentation doesn't seem to mention is a few important bits:
<Story/> component must have a name property with at least ONE character
<Story/> component must have at least a single child within it
Meaning, the minimum requirement to get the mdx file to render when using the <Story/> component is this:
<Story name="default">
<Button/>
</Story>
This is regardless of whether the <Story/> component is wrapped around the <Canvas/> component or not.
The second half of the problem is <Canvas/> component, and it has just one condition:
It must have at least a single child within it
so the mimimum requirement for <Canvas/> to render is this:
<Canvas>
<Button/>
</Canvas>
Combining everything together for your case scenario, what you need to do with <Canvas/> is this:
<Canvas>
<Story name="default">
<Button/>
</Story>
</Canvas>
Try setting it that way, then refresh the page.
If you are using storybook v6. Try to check stories property at your .storybook/main.js. Make sure the path/file type is correct.
module.exports={
stories:[
'../src/components/Button.stories.mdx', // default page
'../src/**/*.stories.#(js|jsx|ts|tsx|mdx)'
]
}

vuejs 3: inject key into child component?

Versions:
VueJS: 3.x
Chrome: Version 93.0.4577.63 (Official Build) (x86_64)
macOS: Big Sur 11.5.2
My use-case must be common, and I am mildly surprised that it does not work "out of the box".
I have these simple routes:
/patients/new
/patients/1
/about
which I access from a single-page application (SPA) through vueJS router-links:
<router-link to="/about">About</router-link> |
<router-link to="/patients/new">New Patient</router-link> |
<router-link to="/patients/1">Update Patient</router-link>
/patients/1 returns a pre-populated HTML FORM with details of patient with ID 1.
/patients/new returns the same HTML FORM with blank entries.
Intuitively, if I visit /patients/1 link, and then visit /patients/new, I would expect HTML FORM to be empty; conversely, if I visit /patients/new and then /patients/1, I would expect the HTML FORM to be pre-populated accordingly.
This is not what happens. Instead, the SPA does not re-create / re-mount the HTML FORM.
Solution: many articles suggest using a reactive variable referenced by a :key attribute in the HTML FORM. Then whichever link we visit, as long as we change the reactive variable, the vueJS component that houses the HTML FORM should be re-created / re-mounted.
My approach: provide a reactive variable at the root component, and inject it within the vueJS component (ie, the Patient component here) that renders the HTML FORM.
Here's what my root component looks like:
<script lang="ts">
import { defineComponent } from 'vue'
import Vue from 'vue'
export default defineComponent({
name: "App",
provide() {
return {
routePath: Vue.computed(() => this.$route.path)
}
}
});
</script>
where the reactive variable is routePath. Then in the Patient component, I have this:
export default defineComponent({
name: "Patient",
inject: ['routePath'],
...
});
with the HTML FORM defined with the :key attribute like this:
<template>
<form :key="routePath">
...
</form>
</template>
I believe the basic idea here is sound, but it is not working, and it does seem like a cumbersome approach.
So, here are my questions:
Is this approach sound?
Why is the Vue.computed() invocation broken? Here's the stack trace from Chrome console:
App.vue?3acc:9 Uncaught TypeError: Cannot read properties of undefined (reading 'computed')
at Proxy.provide (App.vue?3acc:9)
at qe (runtime-core.esm-bundler.js:2463)
at Pr (runtime-core.esm-bundler.js:6713)
at Lr (runtime-core.esm-bundler.js:6632)
at Tr (runtime-core.esm-bundler.js:6562)
at D (runtime-core.esm-bundler.js:4421)
at N (runtime-core.esm-bundler.js:4396)
at m (runtime-core.esm-bundler.js:3991)
at K (runtime-core.esm-bundler.js:5140)
at mount (runtime-core.esm-bundler.js:3477)
Thanks for looking into it.
It appears this issue is unresolved in vueJS 3.x. See open issue for details. There are work-arounds. Eg, see this github project. In my case, I've decided to change the workflow to avoid said issue.

<v-time-picker> - time picker not working

<v-time-picker> - did you register the component correctly? For recursive components, make sure to provide the "name" option
<div class="form-inline">
<label for="">Time</label>
<v-time-picker
class="theme-orange"
v-model="time"
input-class="form-control"
type="time"
auto>
</v-time-picker>
</div>
I need to get only time picker, how can i fix this issue?
This is the Vuetify code for the time picker
<v-time-picker v-model="time" header-color="primary"></v-time-picker>
You must make sure that you have the v-model associated even in the JS, the variable in your JS can be null or string and you can use it for any function.
In your JS it must be like this
data:{
time: ''(this is most recommended) or time: null
}
The error message means that you have not imported the component in your file. Another approach is to add vuetify globally to your project. To fix this, add the following line in your main.js/index.js file:
import Vuetify from 'vuetify';
// ...other import statements
Vue.use(Vuetify)

Accessing children elements in a SWC

Does anyone know if its possible to access children elements in a SWC? I have created some MC's and inside of some of these MC's I have some dynamic textFields. I export the content to a SWC and load it into my Flex project. No problem loading it or accessing the parent elements, they display fine. But I want to access the textfields nestes in the MC's and modify the text. When I debug the app, I can see the textfields as child elements. It's typed as a TextField and the Instance Name is the same as input in the Flash IDE but I cannot access it. When Flex compiles it throws an error saying it doesn't recognize the method. I've tried to insert actionscript on the timeline, linked external classes and nothing can be accessed. Does anyone know of a way to do this?
It's hard to say since you're not showing your code that fails, but I suspect you're doing:
import myswc.*;
myswc.Symbol1.myTextField.text = "Foo"
instead of
var clip:MovieClip = new myswc.Symbol1();
clip.myTextField.text = "Foo"
I just bumped into this as well, and am curious as to why you're suggesting he's NOT using the instance name since myTextField is obviously an instance name for the TextField he's using....

Resources