I have created some reusable Modal components moving our app away from jQuery and Bootstrap.
I patterned these components after the components in Laravel Jetstream (Inertia) stack.
First I have a top level DialogContainer which houses the transitions and backdrop and then a generic slot. This top level component is also wrapped in a call to portal-vue so that all my modals are sent to the dialog-helper.
For brevity I'll remove all the Tailwind classes which are straight from TailwindUI.
<template>
<portal to="dialog-helper">
<Transition attrs>
...
<div v-show="show" class="classes">
<slot v-if="show" />
</div>
</Transition>
</portal>
</template>
Next I have several different types of Dialogs, a Fullscreen, Footed, Confirm, Plain Panel etc. These all have named slots for different sections, and are wrapped with the DialogContainer
Confirm Dialog
<template>
<DialogContainer :show="show" :max-width="maxWidth" :closeable="closeable" #close="closeDialog">
...
<h3 class="classes">
<slot name="title" />
</h3>
...
<div class="classes">
<slot name="content" />
</div>
...
<div class="classes">
<CancelButton />
<ConfirmButton />
</div>
...
</DialogContainer>
</template>
Then when I want to use the confirm dialog in a template:
<ConfirmDialog :show="isOpen" #close="isOpen = false" #confirmed="someMethod">
<template #title>Are You Sure You Want to Delete This Item?</template>
<template #content>Deleting this will cause a complete nuclear meltdown, this isn't reversable!</template> // this works
<template #content>
<div class="row">
<div class="form-group col-md-12" :class="{ 'has-error': validation.max }">
<label class="control-label">Maximum Percentage</label>
<input class="form-control" v-model="form.max" placeholder="Maximum ..." type="number" />
<span class="help-block" v-if="validation.max">
{{ validation.max[0] }}
</span>
</div>
</div>
</template> // This works fine, no problems.
<template #content>
<div class="alert alert-warning">
Romantic notes required for Christmas will get auto-populated on the document when rendered.
</div>
</template> // won't open and gives no error in console
<template #content>
<WarningAlert> // even wrapped in a component ...
<p>Romantic notes required for Christmas will get auto-populated on the document when rendered.</p>
</WarningAlert>
</template> // NOPE, this doesn't work either.
</ConfirmDialog>
Can anyone tell me what I'm doing wrong, this exact strategy works in Jetstream, but something isn't working for me here.
UPDATE
I've discovered that I'm able to place plain text up to 109 characters in length. After that it fails ... wth?
Related
Picture
Hi, this is my design right now and i want to expand it more but something is limiting me.
<div className="position-absolute start-50 translate-middle-x">
<div className="d-flex">
<div className="me-2">
<Posts />
</div>
<div className="col">
<GroupPage />
</div>
</div>
</div>
I use d-flex to add element by : by.
I want to expand it to almost whole screen but no luck.
I followed JustinKo's other answer(How to access and interact with Shadow DOM using Watir?) but I don't know how to use it for my requirement here.
here is the text field which I would like to locate. This text_field is coming within the shadow dom as shown below.
<div class="vaadin-text-field-container">
<label part="label" id="vaadin-text-field-label-0">Username</label>
<div part="input-field" id="vaadin-text-field-input-0">
<slot name="prefix"></slot>
<slot name="input">
<input part="value" tabindex="0" aria-labelledby="vaadin-text-field-label-0 vaadin-text-field-input-0" maxlength="512" autocomplete="off" required="">
</slot>
<div part="clear-button" id="clearButton" role="button" aria-label="Clear" hidden="true"></div>
<slot name="suffix"></slot>
</div>
<div part="helper-text" id="vaadin-text-field-helper-0">
<slot name="helper"></slot>
</div>
<div part="error-message" aria-live="assertive" aria-hidden="true" id="vaadin-text-field-error-0"></div>
</div>
<style include="lumo-text-field"></style><style include="lumo-input-field-theme"></style><style include="flow_css_mod_12"></style>
Any specific method which would help me locating this element in Shadow DOM in WATIR?
How can I use the filter input from the component outside in the blade file , while still being able to filter the table which is in the vuejs file?
ie: I want to restructure where the filter input.
In my Invoice Component vuejs file -
<template>
<div class="my-5 container-fluid">
<h2>Invoice inner</h2>
<b-input-group class="mt-3 mb-3" size="sm">
<b-form-input v-model="keyword" placeholder="Filter" type="text"></b-form-input>
</b-input-group>
<b-table :fields="fields" :items="items" :keyword="keyword"></b-table>
</div>
</template>
<script>
.....
</script>
In my blade template-
#section('content')
<section class="user-info d-md-flex justify-content-between py-4 mb-5">
<div class="d-flex align-items-center pb-3">
<img class="rounded-circle user-img"
src="https://images.pexels.com/photos/3095439/pexels-photo-3095439.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="" />
</div>
<form class="form-inline">
**//i want the filter input in this area and not above the table in the vue component and still be able to filter the table**
</form>
</section>
<invoices-component />
#endsection
Register your component as a window object
const app = new Vue({
...
});
window.app = app;
Then create a input which would change the model of the app
<input type="text" onchange="window.app.keyword = this.value" />
I have Laravel app, and create search box with algolia everything is good and the search is find but my question now for this code of Vue :
<template>
<ais-index app-id="myid" api-key="mykey" index-name="users">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
<ais-results>
<template slot-scope="{result}">
<div>
<h2>{{ result.name }}</h2>
<h4>{{ result.email }}</h4>
</div>
</template>
</ais-results>
</ais-index>
</template>
<script>
export default {};
</script>
I need spare the form ( ais-input ) in a place and put the result ( ais-results ) in another place of course same page
Something like that make two component one for input and second for result ( blew it will be in blade file ) :
<div class="col-md-2">
<search-box/> (<ais-input/>)
</div>
<div class="col-md-2">
<result-box/> (<ais-results/>)
</div>
Considering they seem to already be components, you can try to use them directly.
You can create two new Vue components, where you add the existing components:
<template>
<div class="col-md-2">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
</div>
</template>
And the you can use them in your template as you wish.
I want to append div using xpath inheriting a parent template.
for ex.
this is parent template
<template id="parent_id">
<div id="header">
<div class="container">
<h1> HEADER </h1>
</div>
</div>
<div id="product">
<div class="container">
<!-- THERE IS SOME CONTENT -->
</div>
</div>
</template>
i want to change like this,
<template id="parent_id">
<div id="product">
<div class="inner">
<div class="container">
<!-- THERE IS SOME CONTENT -->
</div>
</div>
</div>
</template>
i try this,
<template id="product_custom" inherit_id="parent_id">
<xpath expr="//div[#id='product']" position="after">
<div class="inner">
</xpath>
</template>
while replace all content is easy or copy all content to custom template, but it not proper way. i want to wrap a div on content.
I think you cannot do that, because you are going either to override the content or to place your <div/> before, after on inside the selected element.
A simple solution will be to give the id="product" div the class inner by using position="attributes". Or if you really need this, a possible solution is:
replace id="product" with class="inner" with one override using attributes position
define your own template in a second override and call the original one inside it
You will end up with something like this:
<template id="my_parent" inherit_id="foo.parent_id">
<div id="product">
<t t-call="foo.parent_id" />
</div>
</template>
plus the override of the attributes. Never done something like this and the code above is not tested but it could work ;)