desti Posted October 18, 2020 Share Posted October 18, 2020 Create simple modal window with form, for example? Link to comment Share on other sites More sharing options...
desti Posted October 19, 2020 Author Share Posted October 19, 2020 Perhaps will be useful. JS file ;( function($, _, undefined){ "use strict"; ips.controller.register('app.front.folder.vuemodal', { _vueapp: null, initialize: function () { var jsToGet = [ 'https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js', 'https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js', ]; ips.loader.get(jsToGet).then( function () { this.setup(); }.bind(this)); $('head').append( "<link rel='stylesheet' type='text/css' media='all' href='https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css' />", "<link rel='stylesheet' type='text/css' media='all' href='https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css'/>" ); }, setup: function() { Vue.component('my-tooltip', { props: ['message'], template: ` <v-tooltip left :open-on-hover="false"> <template #activator="{ on }"> <v-btn icon @click="on.click" @blur="on.blur" retain-focus-on-click> <v-icon color="grey lighten-1"> mdi-help-circle-outline </v-icon> </v-btn> </template> <div v-html="message"></div> </v-tooltip> ` }); this._vueapp = new Vue({ el: '#vuemodal', vuetify: new Vuetify(), template: ` <v-app> <v-row justify="center"> <v-dialog v-model="showModal" max-width="600"> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark v-bind="attrs" v-on="on">Open Dialog</v-btn> </template> <v-card class="pa-4 indigo lighten-5"> <v-card class="pa-2"> <v-toolbar dense color="blue darken-4" dark> <v-toolbar-title class="headline">Popup header</v-toolbar-title> <v-spacer></v-spacer> <my-tooltip message="Help message"></my-tooltip> </v-toolbar> <v-card-title class="pa-2">Useful Content</v-card-title> <v-form> <v-text-field class="ma-1" dense label="Enter your name"></v-text-field> <v-divider></v-divider> <v-card-actions class="pa-2 ma-0"> <v-spacer></v-spacer> <v-btn small bottom color="success" @click="submit()">Submit</v-btn> </v-card-actions> </v-form> </v-card> </v-card> </v-dialog> </v-row> </v-app> `, data: { showModal: false }, methods: { submit() { this.showModal = false} } }); } }); }(jQuery, _)); add to template <div data-controller="app.front.folder.vuemodal" style='height:36px !important; overflow: hidden !important;'> <div id='vuemodal'></div> </div> add to custom css (ips styles break vuetify styles) .v-text-field input { border:none!important; box-shadow:none!important; max-width:100%!important; } Link to comment Share on other sites More sharing options...
Numbered Posted October 19, 2020 Share Posted October 19, 2020 It might be useful in case of inserting some standalone vue widget inside IPS from another modern web service. Thank you for the starting point. But in the case of standard behavior (like a modal form), it's not good practice, as I think. Link to comment Share on other sites More sharing options...
desti Posted October 19, 2020 Author Share Posted October 19, 2020 Yes, the real script shows the complex vue widget (fetch data from server, dynamic form render, send data back to server). Scanty "ips form helper" cannot do this without dark rituals and human sacrifice. Link to comment Share on other sites More sharing options...
Recommended Posts