anvilistas / anvil-extras Goto Github PK

We could make this properly!

The quick start guide for anvil.js was nothing more than an intro.
Examples on the forum are mostly half baked

It'd be nice to have a Quill implementation that was more compatible with anvil.

quill = Quill()
quill.getText()
quill.setText()
quill.getContent()
## these are all the js methods
## We'd just need to override the __getattr__
## we could regex for snake to camel case if we like


quill.to_simpleobject() # this is very easy and means you can save it in the database as a simple object
quill.to_markdown() # I'm sure this must be possible! Then you can just display it in a rich text component


## to thing about
quill.readonly
quill.toolbar_options

I have the new indeterminate progress bar embedded in a popup alert (an app loading screen). I am finding that progress bar animation works maybe 50-60% of the time, where 40-50% of the time the progress bar is solid blue without the animation. Haven't changed any code on that loading screen in a while so can't find a reason for the intermittent animation success. Thanks for taking a look!

Hi! Amazing and very useful tools so congrats and thanks for your work guys!!

One question.. How would I go about adding the Quill Resize module when using the extras? I managed to get it working when adding Quill by myself by adding the line below it to native libraries and making the necessary changes to the JS setup.

I tried adding the line to native libraries but it did nothing sadly as I guess I'd have to change the Quill setup on JS.

Native libraries line: <script src="https://cdn.jsdelivr.net/npm/[email protected]/image-resize.min.js" async></script>
Link to Quill image resize module: https://github.com/kensnyder/quill-image-resize-module

I don't know anything other than Python so sorry if this is easy, I just haven't found the way yet. Thanks!

I've written something similar before. A nice component for a lot of uis

I'm excited about the new installation instructions, but only installing it as a third-party dependency means I can't see and play with the demo code demonstrating the components. Maybe create a separate "Extras Demo" app that has Extras installed as a third-party dependency, and provide a clone link to the demo app?

In response to https://anvil.works/forum/t/pivot-table-formatting/8582

Perhaps we should create an examples gallery
We already have examples for most things
e.g. popover, augment, hashrouting
It would be good if these could live in an appropriate place and linked to in the docs

The tabulator component is really good. Would it make sense to include this in the anvil-extras library?
https://anvil.works/forum/t/tabulator-with-anvil-components/4646

just an idea based on this post
https://anvil.works/forum/t/why-no-refresh-data-bindings-for-write-back-data-binding/8211/

I can see an argument for adding a writeback feature only for textbox/textarea components to trigger writeback on change. The current way to do it is verbose and requires too much boiler plate.

I could potentially add the method to trigger method that already exists in the augment library.

from anvil_extras import augment

def textbox_change(self, sender, **event_args):
    sender.trigger('writeback') # all writeback properties get written back on this component

The writeback would be on the component rather than on the Form so it would be different to the feature request.
https://anvil.works/forum/t/please-support-refresh-data-bindings-for-write-back-as-well/8226

Thoughts?

Alternative apis

augment.writeback(sender)
augment.trigger_writeback(sender)

A client side class for use as a form's item attribute.

It exposes a dict like interface but calls the form's refresh_data_bindings method whenever it's updated.

It will need to take a form instance as one of its init arguments.

It could provide an option to behave like a defaultdict.

Prompted by https://anvil.works/forum/t/data-binding-not-refreshing/7923/4

They just release a new version which adds an api that I contributed with anvil in mind 😉

One that does date
and one that does time

As ever - materialize has an implementation worth borrowing from.
https://materializecss.com/pickers.html

Might need to wait until datetime gets updated in skulpt for improved datetime module methods.

We should have a separate test suite that depends on anvil-extras

Especially if the user who depend on it grow.

And after #73 we're committing to backward compatibility/being very loud about breaking changes - until anvil supports versioning.

Happy to get this one started since I have a template written for testing anvil components internally.

I'm not sure what the best integration is here.
It shouldn't be part of the anvil-extras client_code since that'll massively bulk up what gets sent to the client for those depending on the app.

We also would want prs to include tests.
It might be least hassle to create a test suite app as a separate repo and make a note of how to add tests with a pr in the contributing docs.

When clicking the "Run" button to test an Anvil app in development mode (but not when running the app via its url), I get the following error when trying to import local_storage:

ExternalError: SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at app/anvil_extras/storage.py, line 103
  called from StorageDemo, line 5
  called from Main, line 9

I suppose it's something to do with the iframe? This was not happening just 24 hours ago, but now it persistently is.

Clone link: https://anvil.works/build#clone:X32NITRHDRRHDOFO=OIDA3G3GQVMLMMT2LPC7BV3O

Probably no longer required and can be replaced with anvil.js.get_dom_node

This will affect the two progress bar components.

The margin of -55px taken from the original css doesn't seem to work now that it's incorporated into a form.

Probably best to make it a property so it can be passed in.

https://anvil.works/forum/t/object-has-no-attribute-popper/8833/4

Not so much a bug - but the error isn't helpful

localstorage should be able to handle datetime objects

best to wait until strptime gets added to skulpt before attempting this

Something similar to
https://anvil.works/library/slider
https://anvil.works/forum/t/slider-with-dynamic-ticks-and-labels/5761

I would like to be able to emulate clicking a navigation menu link from code. The undocumented method 'open_form' gets me most of the way there but it doesn't show the menu link as selected.

In the auto_refreshing Demo code, self.item is initialized like this:

self.item = self.default_item = dict(tally=100, counter=0,)

There are buttons to change item["tally"] and item["counter"], and the label components displaying these values are auto-refreshed. Then there is another button that resets the tally and counter to the default values via this line:

self.item = self.default_item

This works as intended, but the trouble is that this actually shouldn't work--and it indeed doesn't work without the auto-refreshing enabled. The reason is that self.item was initialized to be equal to self.default_item by reference, so any changes to self.item should also change self.default_item. The fact that it doesn't when auto-refreshing is triggered by changes to self.item seems to be a subtle bug (or undocumented side effect) in the auto-refreshing functionality.

Helpers for recently requested components.

A trend on the forum seems to be those wanting to display audio, video.

Advanced features might be to support something like this:
https://googlechrome.github.io/samples/image-capture/photo-resolution.html

I think I'd like to be able to put all the navigation configuration in one place, in the Main (or startup) module. Then the navigation module needn't even be imported in the content forms. Rather, everything could be configured in one place, which could look like:

from anvil_extras import navigation
from ...Components import Components
from ...MessagingDemo import MessagingDemo

menu = [
    dict(text="Components", name="components", form=Components, title="Component Demos"),
    dict(text="Messaging", name="messaging", form=MessagingDemo, title="Publish/Subscribe Messaging"),
]

class Main(MainTemplate):
    def __init__(self, **properties):
        navigation.build_menu(self.menu_panel, menu)

Then when I want to add a new content Form to the menu, I need only make changes here (importing the Form and adding the menu specification dict). For one thing, this approach eliminates to need to make sure a 'target' key matches the 'name' key in a separate module.

One common element in the many of the apps I write is the need for some sort of workflow. I would be good to write a module to make that easier.

I can imagine defining a series of actions and the logic between them as elements of a flow-chart encoded within a dict.

Standard actions available might be:

• Execute a function
• Open a form within an alert

It may be pretty simple, but it wasn't obvious to me beforehand that this would work without a hitch (as long as the component names and API for the features you're using are stable between versions):

1. Clone the new version of Anvil Extras.
2. Remove the dependency on the old version from your app.
3. Add a dependency to the new version.

I'm having trouble understanding what the EditableCard is intended to be. As far as I can tell, though, it's not working.

(What I was picturing, for the "text" datatype anyway, was a textbox with a pencil icon in the upper right (when editable=True) that allows editing it.)

could be a little nicer - margin -2px top and bottom helps. (eliminates the slight border radius) and then removing the left right padding

What do you think about an autocompleter component?

Just a proof of concept for now:

https://anvil.works/forum/t/indeterminate-checkboxes/4462/6

Hi anvil community,

I use the Autocomplete in my app and i have problems to get it working on mobile devices.
On mobile devices I was not able to select a suggested item by clicking or pressing enter:

I tested this on Galaxy S8 and Iphone 6S.

Open this sample app on your mobile device and type "A":
https://AUSGIWLXDFGUKBDZ.anvil.app/RAPVVK5WB4R3KSLG2ENC3JCV
or clone the app:
https://anvil.works/build#clone:AUSGIWLXDFGUKBDZ=YAB7DUIKKSQTEC2MWDS3R36C

A nice util function perhaps
https://anvil.works/forum/t/force-show-spinner-opposite-of-anvil-server-no-loading-indicator/5557

Need to do this. Adding it here as a reminder!

Probably taking inspiration from:

https://anvil.works/forum/t/another-switch-toggle-using-checkbox-and-anvil-roles/3832
https://anvil.works/forum/t/toggle-switch-demo-custom-html/755

https://anvil.works/forum/t/floating-action-button/4489/2

maybe

anvil still does.
anvil-extras definitely doesn't

we should make a note somewhere in our docs.

Would love the ChipsInput to take an actual Chip component, can change the background color of the chip going in. Would love to show the colors showing where a chip is within a workflow process. Would this be possible now? Using ChipsInput ?

It would be good to do this well

I've used this in client side test suite before - it's pretty nice - you can set any text component to the stdout!

import sys

class _Out:
    def __init__(component):
        self._out = component
    def write(self, x):
        try:
            self._out.text += x
        finally:
            sys.__stdout__.write(x)

def set_component_as_stdout(component):
    sys.stdout = _Out(component)

We should triage the validator for the orm and include similar syntax as a complementary set of functions/decorators here.

I've always found the anvil Library validator component a little tricky to use and a simpler api would be great.

This combined with auto_refreshing would work really well I think.

auto_refreshing triggers the refresh_data_bindings which in turn will trigger the event handler so the idea here would be that you can do your validation inside the event handler refreshing_databindings.

I have some code patterns I use regularly to add sorting and filtering to a data grid.

I could turn those into Mixin classes, I suspect.

See - https://materializecss.com/waves.html

when adding a designer component onto the screen default values can disappear if the component hasn't had any values changed.

to reproduce add any designer component and put the cursor into the spacing above input.
Move the cursor to a different input.
The value disappears.

Some posts on the forum about this.

I think it'll be straight forward to adjust the Materialize UI tabs component to work with anvil

https://materializecss.com/tabs.html

Uising the popup client code for a zoom into image type situation, its in a repeating panel. Seems the popup stays only the size/width of the current column

Attached is example

I found an issue where using the autocomplete focus method (autocomplete_1.focus()) will correctly take focus on the autocomplete widget but will disable the functionality of the autocomplete dropdown when the user starts typing. Thanks for having a look!

In #60, #31 and #51 i ended up writing a heap of javascript that was only for the designer.

One thing that i'd like to explore is moving this code into its own javascript files.
Either as a folder in this library or as a separate library within anvil-extras

Reasons:

Size:

• This code is for the designer only and isn't necessary when the app is being run.
• But the live app will still pull in the html as text unnecessarily
• (the javascript never runs because it gets discarded before the component is added to the page)

DRY

• A lot of the javascript is the same so it would be worth pulling out the common routines to make future designer compatible components easier to write

Growth

• Development in the js eco system build process 😨

Editor

• it's a pain working with anvil's html editor

The html would then look something like

<div class="anvil-slider"></div>
<script type="module">
  import { DesignerSlider } from 'https://jspm.dev/anvil-extras/designer-components';
  DesignSlider.init();
</script>

This would keep the html small so reduce the code size. The javascript would only be loaded in the designer since in the real app we remove the script element before the component is added to the screen.

Not sure it's something for this library

Forum link
https://anvil.works/forum/t/events-on-pagination-buttons/8556/4

Could maybe go in augment

from anvil_extras import augment

self.data_grid.set_event_handler('pagination_click', self.pagination_click)

I have the code written for this

What do you think?