KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added button classes for dialog

Browse Source
This commit is contained in:
euvl
2017-10-25 10:50:50 +01:00
parent 8048d5e6fe
commit c58dc87f57
3 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
dist/index.js vendored
View File

@@ -702,13 +702,13 @@
}; };
exports.default = parse; exports.default = parse;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog {\n font-size: 14px;\n}\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n font-size: 12px;\n}\n.vue-dialog .dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog button {\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 44px;\n height: 44px;\n\n/* text-transform: uppercase; */\n/* letter-spacing: 1px; */\n\n color:inherit;\n font:inherit;\n}\n.vue-dialog button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "", { exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color:inherit;\n font:inherit;\n outline: none;\n}\n.vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "", {
version: 3, version: 3,
sources: [ "/./src/Dialog.vue?5777ebd5" ], sources: [ "/./src/Dialog.vue?124e6492" ],
names: [], names: [],
mappings: ";AA2FA;EACA,gBAAA;CACA;AAEA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;EACA,gBAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,iCAAA;AACA,2BAAA;;EAEA,cAAA;EACA,aAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA", mappings: ";AA4FA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CAEA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,2BAAA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;EACA,cAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA",
file: "Dialog.vue", file: "Dialog.vue",
sourcesContent: [ '<template>\n <modal name="dialog"\n height="auto"\n :classes="[\'v--modal\', \'vue-dialog\', this.params.class]"\n :width="width"\n :pivot-y="0.3"\n :adaptive="true"\n :clickToClose="clickToClose"\n :transition="transition"\n @before-open="beforeOpened"\n @before-close="beforeClosed"\n @opened="$emit(\'opened\', $event)"\n @closed="$emit(\'closed\', $event)">\n <div class="dialog-content">\n <div class="dialog-c-title"\n v-if="params.title"\n v-html="params.title || \'\'"></div>\n <div class="dialog-c-text"\n v-html="params.text || \'\'"></div>\n </div>\n <div class="dialog-buttons" v-if="buttons">\n <button v-for="(button, i) in buttons"\n :style="buttonStyle"\n :key="i"\n v-html="button.title"\n @click.stop="click(i, $event)">\n {{button.title}}\n </button>\n </div>\n <div v-else class="dialog-buttons-none"></div>\n </modal>\n</template>\n<script>\n export default {\n name: \'Dialog\',\n props: {\n width: {\n type: [Number, String],\n default: 400\n },\n clickToClose: {\n type: Boolean,\n default: true\n },\n transition: {\n type: String,\n default: \'fade\'\n }\n },\n data () {\n return {\n params: {},\n defaultButtons: [{ title: \'CLOSE\' }]\n }\n },\n computed: {\n buttons () {\n return this.params.buttons || this.defaultButtons\n },\n /**\n * Returns FLEX style with correct width for arbitrary number of\n * buttons.\n */\n buttonStyle () {\n return {\n flex: `1 1 ${100 / this.buttons.length}%`\n }\n }\n },\n methods: {\n beforeOpened (event) {\n this.params = event.params || {}\n this.$emit(\'before-opened\', event)\n },\n beforeClosed (event) {\n this.params = {}\n this.$emit(\'before-closed\', event)\n },\n click (i, event) {\n let button = this.buttons[i]\n\n if (typeof button.handler === \'function\') {\n return button.handler(i, event)\n } else {\n this.$modal.hide(\'dialog\')\n }\n }\n }\n }\n<\/script>\n<style>\n .vue-dialog {\n font-size: 14px;\n }\n\n .vue-dialog div {\n box-sizing: border-box;\n }\n\n .vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n }\n\n .vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n }\n\n .vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n }\n\n .vue-dialog .dialog-c-text {\n }\n\n .vue-dialog .dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n font-size: 12px;\n }\n\n .vue-dialog .dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n }\n\n .vue-dialog button {\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 44px;\n height: 44px;\n\n /* text-transform: uppercase; */\n /* letter-spacing: 1px; */\n\n color:inherit;\n font:inherit;\n }\n\n .vue-dialog button:hover {\n background: rgba(0, 0, 0, 0.01);\n }\n\n .vue-dialog button:active {\n background: rgba(0, 0, 0, 0.025);\n }\n\n .vue-dialog button:not(:first-of-type) {\n border-left: 1px solid #eee;\n }\n</style>\n' ], sourcesContent: [ '<template>\n <modal name="dialog"\n height="auto"\n :classes="[\'v--modal\', \'vue-dialog\', this.params.class]"\n :width="width"\n :pivot-y="0.3"\n :adaptive="true"\n :clickToClose="clickToClose"\n :transition="transition"\n @before-open="beforeOpened"\n @before-close="beforeClosed"\n @opened="$emit(\'opened\', $event)"\n @closed="$emit(\'closed\', $event)">\n <div class="dialog-content">\n <div class="dialog-c-title"\n v-if="params.title"\n v-html="params.title || \'\'"></div>\n <div class="dialog-c-text"\n v-html="params.text || \'\'"></div>\n </div>\n <div class="vue-dialog-buttons" v-if="buttons">\n <button v-for="(button, i) in buttons"\n :class="button.class || \'vue-dialog-button\'"\n :style="buttonStyle"\n :key="i"\n v-html="button.title"\n @click.stop="click(i, $event)">\n {{button.title}}\n </button>\n </div>\n <div v-else class="vue-dialog-buttons-none"></div>\n </modal>\n</template>\n<script>\n export default {\n name: \'Dialog\',\n props: {\n width: {\n type: [Number, String],\n default: 400\n },\n clickToClose: {\n type: Boolean,\n default: true\n },\n transition: {\n type: String,\n default: \'fade\'\n }\n },\n data () {\n return {\n params: {},\n defaultButtons: [{ title: \'CLOSE\' }]\n }\n },\n computed: {\n buttons () {\n return this.params.buttons || this.defaultButtons\n },\n /**\n * Returns FLEX style with correct width for arbitrary number of\n * buttons.\n */\n buttonStyle () {\n return {\n flex: `1 1 ${100 / this.buttons.length}%`\n }\n }\n },\n methods: {\n beforeOpened (event) {\n this.params = event.params || {}\n this.$emit(\'before-opened\', event)\n },\n beforeClosed (event) {\n this.params = {}\n this.$emit(\'before-closed\', event)\n },\n click (i, event) {\n let button = this.buttons[i]\n\n if (typeof button.handler === \'function\') {\n return button.handler(i, event)\n } else {\n this.$modal.hide(\'dialog\')\n }\n }\n }\n }\n<\/script>\n<style>\n .vue-dialog div {\n box-sizing: border-box;\n }\n\n .vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n }\n\n .vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n }\n\n .vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n\n }\n\n .vue-dialog .dialog-c-text {\n }\n\n .vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n }\n\n .vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n }\n\n .vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color:inherit;\n font:inherit;\n outline: none;\n }\n\n .vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n }\n\n .vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n }\n\n .vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n }\n</style>\n' ],
sourceRoot: "webpack://" sourceRoot: "webpack://"
} ]); } ]);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
@@ -777,10 +777,11 @@
innerHTML: _vm._s(_vm.params.text || "") innerHTML: _vm._s(_vm.params.text || "")
} }
}) ]), _vm._v(" "), _vm.buttons ? _c("div", { }) ]), _vm._v(" "), _vm.buttons ? _c("div", {
staticClass: "dialog-buttons" staticClass: "vue-dialog-buttons"
}, _vm._l(_vm.buttons, function(button, i) { }, _vm._l(_vm.buttons, function(button, i) {
return _c("button", { return _c("button", {
key: i, key: i,
class: button.class || "vue-dialog-button",
style: _vm.buttonStyle, style: _vm.buttonStyle,
domProps: { domProps: {
innerHTML: _vm._s(button.title) innerHTML: _vm._s(button.title)
@@ -792,7 +793,7 @@
} }
}, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]); }, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]);
})) : _c("div", { })) : _c("div", {
staticClass: "dialog-buttons-none" staticClass: "vue-dialog-buttons-none"
}) ]); }) ]);
}, },
staticRenderFns: [] staticRenderFns: []

13
dist/ssr.index.js vendored
View File

@@ -656,13 +656,13 @@
}; };
exports.default = parse; exports.default = parse;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog {\n font-size: 14px;\n}\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n font-size: 12px;\n}\n.vue-dialog .dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog button {\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 44px;\n height: 44px;\n\n/* text-transform: uppercase; */\n/* letter-spacing: 1px; */\n\n color:inherit;\n font:inherit;\n}\n.vue-dialog button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "", { exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n}\n.vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color:inherit;\n font:inherit;\n outline: none;\n}\n.vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n}\n", "", {
version: 3, version: 3,
sources: [ "/./src/Dialog.vue?5777ebd5" ], sources: [ "/./src/Dialog.vue?124e6492" ],
names: [], names: [],
mappings: ";AA2FA;EACA,gBAAA;CACA;AAEA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;EACA,gBAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,iCAAA;AACA,2BAAA;;EAEA,cAAA;EACA,aAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA", mappings: ";AA4FA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CAEA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,2BAAA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;EACA,cAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA",
file: "Dialog.vue", file: "Dialog.vue",
sourcesContent: [ '<template>\n <modal name="dialog"\n height="auto"\n :classes="[\'v--modal\', \'vue-dialog\', this.params.class]"\n :width="width"\n :pivot-y="0.3"\n :adaptive="true"\n :clickToClose="clickToClose"\n :transition="transition"\n @before-open="beforeOpened"\n @before-close="beforeClosed"\n @opened="$emit(\'opened\', $event)"\n @closed="$emit(\'closed\', $event)">\n <div class="dialog-content">\n <div class="dialog-c-title"\n v-if="params.title"\n v-html="params.title || \'\'"></div>\n <div class="dialog-c-text"\n v-html="params.text || \'\'"></div>\n </div>\n <div class="dialog-buttons" v-if="buttons">\n <button v-for="(button, i) in buttons"\n :style="buttonStyle"\n :key="i"\n v-html="button.title"\n @click.stop="click(i, $event)">\n {{button.title}}\n </button>\n </div>\n <div v-else class="dialog-buttons-none"></div>\n </modal>\n</template>\n<script>\n export default {\n name: \'Dialog\',\n props: {\n width: {\n type: [Number, String],\n default: 400\n },\n clickToClose: {\n type: Boolean,\n default: true\n },\n transition: {\n type: String,\n default: \'fade\'\n }\n },\n data () {\n return {\n params: {},\n defaultButtons: [{ title: \'CLOSE\' }]\n }\n },\n computed: {\n buttons () {\n return this.params.buttons || this.defaultButtons\n },\n /**\n * Returns FLEX style with correct width for arbitrary number of\n * buttons.\n */\n buttonStyle () {\n return {\n flex: `1 1 ${100 / this.buttons.length}%`\n }\n }\n },\n methods: {\n beforeOpened (event) {\n this.params = event.params || {}\n this.$emit(\'before-opened\', event)\n },\n beforeClosed (event) {\n this.params = {}\n this.$emit(\'before-closed\', event)\n },\n click (i, event) {\n let button = this.buttons[i]\n\n if (typeof button.handler === \'function\') {\n return button.handler(i, event)\n } else {\n this.$modal.hide(\'dialog\')\n }\n }\n }\n }\n<\/script>\n<style>\n .vue-dialog {\n font-size: 14px;\n }\n\n .vue-dialog div {\n box-sizing: border-box;\n }\n\n .vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n }\n\n .vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n }\n\n .vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n }\n\n .vue-dialog .dialog-c-text {\n }\n\n .vue-dialog .dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n font-size: 12px;\n }\n\n .vue-dialog .dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n }\n\n .vue-dialog button {\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 44px;\n height: 44px;\n\n /* text-transform: uppercase; */\n /* letter-spacing: 1px; */\n\n color:inherit;\n font:inherit;\n }\n\n .vue-dialog button:hover {\n background: rgba(0, 0, 0, 0.01);\n }\n\n .vue-dialog button:active {\n background: rgba(0, 0, 0, 0.025);\n }\n\n .vue-dialog button:not(:first-of-type) {\n border-left: 1px solid #eee;\n }\n</style>\n' ], sourcesContent: [ '<template>\n <modal name="dialog"\n height="auto"\n :classes="[\'v--modal\', \'vue-dialog\', this.params.class]"\n :width="width"\n :pivot-y="0.3"\n :adaptive="true"\n :clickToClose="clickToClose"\n :transition="transition"\n @before-open="beforeOpened"\n @before-close="beforeClosed"\n @opened="$emit(\'opened\', $event)"\n @closed="$emit(\'closed\', $event)">\n <div class="dialog-content">\n <div class="dialog-c-title"\n v-if="params.title"\n v-html="params.title || \'\'"></div>\n <div class="dialog-c-text"\n v-html="params.text || \'\'"></div>\n </div>\n <div class="vue-dialog-buttons" v-if="buttons">\n <button v-for="(button, i) in buttons"\n :class="button.class || \'vue-dialog-button\'"\n :style="buttonStyle"\n :key="i"\n v-html="button.title"\n @click.stop="click(i, $event)">\n {{button.title}}\n </button>\n </div>\n <div v-else class="vue-dialog-buttons-none"></div>\n </modal>\n</template>\n<script>\n export default {\n name: \'Dialog\',\n props: {\n width: {\n type: [Number, String],\n default: 400\n },\n clickToClose: {\n type: Boolean,\n default: true\n },\n transition: {\n type: String,\n default: \'fade\'\n }\n },\n data () {\n return {\n params: {},\n defaultButtons: [{ title: \'CLOSE\' }]\n }\n },\n computed: {\n buttons () {\n return this.params.buttons || this.defaultButtons\n },\n /**\n * Returns FLEX style with correct width for arbitrary number of\n * buttons.\n */\n buttonStyle () {\n return {\n flex: `1 1 ${100 / this.buttons.length}%`\n }\n }\n },\n methods: {\n beforeOpened (event) {\n this.params = event.params || {}\n this.$emit(\'before-opened\', event)\n },\n beforeClosed (event) {\n this.params = {}\n this.$emit(\'before-closed\', event)\n },\n click (i, event) {\n let button = this.buttons[i]\n\n if (typeof button.handler === \'function\') {\n return button.handler(i, event)\n } else {\n this.$modal.hide(\'dialog\')\n }\n }\n }\n }\n<\/script>\n<style>\n .vue-dialog div {\n box-sizing: border-box;\n }\n\n .vue-dialog .dialog-flex {\n width: 100%;\n height: 100%;\n }\n\n .vue-dialog .dialog-content {\n flex: 1 0 auto;\n width: 100%;\n padding: 15px;\n font-size: 14px;\n }\n\n .vue-dialog .dialog-c-title {\n font-weight: 600;\n padding-bottom: 15px;\n\n }\n\n .vue-dialog .dialog-c-text {\n }\n\n .vue-dialog .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n }\n\n .vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n }\n\n .vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color:inherit;\n font:inherit;\n outline: none;\n }\n\n .vue-dialog-button:hover {\n background: rgba(0, 0, 0, 0.01);\n }\n\n .vue-dialog-button:active {\n background: rgba(0, 0, 0, 0.025);\n }\n\n .vue-dialog-button:not(:first-of-type) {\n border-left: 1px solid #eee;\n }\n</style>\n' ],
sourceRoot: "webpack://" sourceRoot: "webpack://"
} ]); } ]);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
@@ -731,10 +731,11 @@
innerHTML: _vm._s(_vm.params.text || "") innerHTML: _vm._s(_vm.params.text || "")
} }
}) ]), _vm._v(" "), _vm.buttons ? _c("div", { }) ]), _vm._v(" "), _vm.buttons ? _c("div", {
staticClass: "dialog-buttons" staticClass: "vue-dialog-buttons"
}, _vm._l(_vm.buttons, function(button, i) { }, _vm._l(_vm.buttons, function(button, i) {
return _c("button", { return _c("button", {
key: i, key: i,
class: button.class || "vue-dialog-button",
style: _vm.buttonStyle, style: _vm.buttonStyle,
domProps: { domProps: {
innerHTML: _vm._s(button.title) innerHTML: _vm._s(button.title)
@@ -746,7 +747,7 @@
} }
}, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]); }, [ _vm._v("\n " + _vm._s(button.title) + "\n ") ]);
})) : _c("div", { })) : _c("div", {
staticClass: "dialog-buttons-none" staticClass: "vue-dialog-buttons-none"
}) ]); }) ]);
}, },
staticRenderFns: [] staticRenderFns: []

34
src/Dialog.vue
View File

@@ -18,8 +18,9 @@
<div class="dialog-c-text" <div class="dialog-c-text"
v-html="params.text || ''"></div> v-html="params.text || ''"></div>
</div> </div>
<div class="dialog-buttons" v-if="buttons"> <div class="vue-dialog-buttons" v-if="buttons">
<button v-for="(button, i) in buttons" <button v-for="(button, i) in buttons"
:class="button.class || 'vue-dialog-button'"
:style="buttonStyle" :style="buttonStyle"
:key="i" :key="i"
v-html="button.title" v-html="button.title"
@@ -27,7 +28,7 @@
{{button.title}} {{button.title}}
</button> </button>
</div> </div>
<div v-else class="dialog-buttons-none"></div> <div v-else class="vue-dialog-buttons-none"></div>
</modal> </modal>
</template> </template>
<script> <script>
@@ -89,10 +90,6 @@
} }
</script> </script>
<style> <style>
.vue-dialog {
font-size: 14px;
}
.vue-dialog div { .vue-dialog div {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -106,55 +103,54 @@
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
padding: 15px; padding: 15px;
font-size: 14px;
} }
.vue-dialog .dialog-c-title { .vue-dialog .dialog-c-title {
font-weight: 600; font-weight: 600;
padding-bottom: 15px; padding-bottom: 15px;
} }
.vue-dialog .dialog-c-text { .vue-dialog .dialog-c-text {
} }
.vue-dialog .dialog-buttons { .vue-dialog .vue-dialog-buttons {
display: flex; display: flex;
flex: 0 1 auto; flex: 0 1 auto;
width: 100%; width: 100%;
border-top: 1px solid #eee; border-top: 1px solid #eee;
font-size: 12px;
} }
.vue-dialog .dialog-buttons-none { .vue-dialog .vue-dialog-buttons-none {
width: 100%; width: 100%;
padding-bottom: 15px; padding-bottom: 15px;
} }
.vue-dialog button { .vue-dialog-button {
font-size: 12px !important;
background: transparent; background: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
line-height: 44px; line-height: 40px;
height: 44px; height: 40px;
/* text-transform: uppercase; */
/* letter-spacing: 1px; */
color:inherit; color:inherit;
font:inherit; font:inherit;
outline: none;
} }
.vue-dialog button:hover { .vue-dialog-button:hover {
background: rgba(0, 0, 0, 0.01); background: rgba(0, 0, 0, 0.01);
} }
.vue-dialog button:active { .vue-dialog-button:active {
background: rgba(0, 0, 0, 0.025); background: rgba(0, 0, 0, 0.025);
} }
.vue-dialog button:not(:first-of-type) { .vue-dialog-button:not(:first-of-type) {
border-left: 1px solid #eee; border-left: 1px solid #eee;
} }
</style> </style>