Skip to content

Commit 55a5f04

Browse files
vbarbaroshvbarbarosh
committed
progress
1 parent 45eec99 commit 55a5f04

11 files changed

+227
-3
lines changed

‎dist/vue-modal.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ function vue_modal(props) {
219219
}
220220

221221
function autofocus(parent) {
222-
return jquery__WEBPACK_IMPORTED_MODULE_2___default()(parent).andSelf().find('[autofocus]a, [autofocus] a, [autofocus]button, [autofocus] button, [autofocus]input, [autofocus] input, [autofocus]textarea, [autofocus] textarea').filter(':visible').first().focus().select();
222+
return jquery__WEBPACK_IMPORTED_MODULE_2___default()(parent).addBack().find('[autofocus]a, [autofocus] a, [autofocus]button, [autofocus] button, [autofocus]input, [autofocus] input, [autofocus]textarea, [autofocus] textarea').filter(':visible').first().focus().select();
223223
}
224224

225225
/* harmony default export */ __webpack_exports__["default"] = (vue_modal);

‎dist/vue-modal.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
vue-modal.vbarbarosh.com

‎docs/components/vue-prism.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
document.write('<link href="https://unpkg.com/[email protected]/themes/prism-okaidia.css" rel="stylesheet" />');
2+
document.write('<script src="https://unpkg.com/[email protected]/prism.js" data-manual></script>');
3+
4+
Vue.component('vue-prism', {
5+
template: '<pre v-once v-bind:class="x"><slot>{{ value }}</slot></pre>',
6+
props: ['value', 'type'],
7+
computed: {
8+
x: function () {
9+
return 'lang-' + this.type;
10+
},
11+
},
12+
mounted: function () {
13+
Prism.highlightElement(this.$el);
14+
},
15+
});

‎docs/demos.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
[
2+
{
3+
"file": "demos/demo-vue-modal-1-hello.html",
4+
"html": null,
5+
"js": "Vue.component('modal-hello', {\n template: '#templ-modal-hello',\n inject: ['modal'],\n});\n\nnew Vue({\n el: '#app',\n methods: {\n hello: async function () {\n console.log(await modal_hello().promise());\n },\n },\n});\n\nfunction modal_hello(value)\n{\n return vue_modal({template: '<modal-hello v-model=\"value\" />', data: {value}});\n}\n",
6+
"js_deps": [
7+
"https://unpkg.com/[email protected]/dist/jquery.js",
8+
"https://unpkg.com/[email protected]/js/browser/bluebird.js",
9+
"https://unpkg.com/[email protected]/dist/vue.js",
10+
"https://unpkg.com/@vbarbarosh/[email protected]/dist/vue-modal.js"
11+
],
12+
"css": null,
13+
"css_deps": []
14+
}
15+
]

‎docs/demos/demo-vue-modal-1-hello.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link href="https://unpkg.com/@vbarbarosh/[email protected]/dist/sm.css" rel="stylesheet" />
7+
<title>The most basic example</title>
8+
</head>
9+
<body class="checkerboard">
10+
11+
<div id="app" v-show="true" class="w500 ma mv10 pv10 ph15 bs5 white" style="display: none;">
12+
<button v-on:click="hello">Hello</button>
13+
</div>
14+
15+
<script src="https://unpkg.com/[email protected]/dist/jquery.js" data-include></script>
16+
<script src="https://unpkg.com/[email protected]/js/browser/bluebird.js" data-include></script>
17+
<script src="https://unpkg.com/[email protected]/dist/vue.js" data-include></script>
18+
<script src="https://unpkg.com/@vbarbarosh/[email protected]/dist/vue-modal.js" data-include></script>
19+
20+
<script id="templ-modal-hello" type="text/html">
21+
<!-- https://smcss.vbarbarosh.com/demos/#modal -->
22+
<div v-on:click="($event.currentTarget === $event.target) && modal.return(false)" class="fix-f oa flex-row" style="background: rgba(0, 0, 0, 0.25)">
23+
<div class="ma">
24+
<div class="w500 ma mv15 p15 mg15 white border bs15">
25+
<p class="xm">Praesent non suscipit lectus. Integer in lectus quam. Sed sed cursus mi. Maecenas mattis, metus ac volutpat vehicula, lacus felis vulputate est, at euismod tortor augue sed neque. Duis porttitor nisl et sapien efficitur, eget feugiat purus dapibus. Nam mattis aliquam felis, in tempor metus tempus at. In molestie vestibulum dolor ut consectetur.</p>
26+
<p class="xm">Vestibulum aliquet enim quis sodales tincidunt. Donec vulputate magna diam, id feugiat nisi aliquam in. Cras gravida odio ac metus tincidunt pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum porttitor laoreet neque vel tincidunt. Integer eu scelerisque purus, quis porta ligula. Donec molestie risus ac malesuada laoreet. Duis eleifend enim tincidunt sagittis efficitur. Nunc maximus libero eget rutrum sollicitudin. Praesent cursus non justo sed auctor. Phasellus nibh nibh, egestas eget leo quis, molestie varius felis. In lobortis porta ultrices. Nunc gravida semper diam, a tincidunt urna porta ut. Proin cursus mi quam, vitae lobortis nunc feugiat eu. Maecenas ut gravida lectus, eget tincidunt ante.</p>
27+
<div>
28+
<button v-on:click="modal.return(true)">Confirm</button>
29+
<button v-on:click="modal.return(false)">Cancel</button>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</script>
35+
36+
<script id="js">
37+
Vue.component('modal-hello', {
38+
template: '#templ-modal-hello',
39+
inject: ['modal'],
40+
});
41+
42+
new Vue({
43+
el: '#app',
44+
methods: {
45+
hello: async function () {
46+
console.log(await modal_hello().promise());
47+
},
48+
},
49+
});
50+
51+
function modal_hello(value)
52+
{
53+
return vue_modal({template: '<modal-hello v-model="value" />', data: {value}});
54+
}
55+
</script>
56+
57+
</body>
58+
</html>

‎docs/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
7+
<link href="https://unpkg.com/@vbarbarosh/[email protected]/dist/sm.css" rel="stylesheet" />
8+
<title>An abstraction for working with modals in Vue | @vbarbarosh/vue-modal</title>
9+
<style>
10+
.app-border { border: 1px solid #e7e7e7; }
11+
</style>
12+
</head>
13+
<body>
14+
15+
<nav class="navbar navbar-expand-lg navbar-light bg-light app-border xborder-ht">
16+
<a class="navbar-brand" href="#"><small>@vbarbarosh/vue-modal<sub><sub>v1.0.0</sub></sub></small></a>
17+
<div class="collapse navbar-collapse">
18+
<ul class="navbar-nav ml-auto">
19+
<li class="nav-item">
20+
<a class="nav-link" href="https://github.com/vbarbarosh/vue-modal">
21+
GitHub
22+
</a>
23+
</li>
24+
</ul>
25+
</div>
26+
</nav>
27+
28+
<br>
29+
30+
<div id="app" class="container">
31+
32+
<p>An abstraction for working with modals in Vue.</p>
33+
34+
<ul>
35+
<li v-for="demo in demos">
36+
<a v-bind:href="demo.file">{{ demo.file }}</a>
37+
</li>
38+
</ul>
39+
40+
</div>
41+
42+
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
43+
<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
44+
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
45+
<script src="https://unpkg.com/[email protected]/js/browser/bluebird.js"></script>
46+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
47+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
48+
<script src="https://unpkg.com/@vbarbarosh/[email protected]/dist/vue-modal.js"></script>
49+
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
50+
51+
<script>
52+
(function () {
53+
54+
new Vue({
55+
el: '#app',
56+
data: {
57+
demos: [],
58+
},
59+
created: function () {
60+
axios.get('demos.json?v=1.0.0').then(v => this.demos = v.data);
61+
},
62+
});
63+
64+
})();
65+
</script>
66+
67+
</body>
68+
</html>

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@babel/core": "^7.8.4",
3737
"@babel/preset-env": "^7.8.4",
3838
"@vbarbarosh/mjs": "github:vbarbarosh/mjs",
39+
"@vbarbarosh/node-cli": "github:vbarbarosh/node-cli",
3940
"babel-loader": "^8.0.6",
4041
"cherio": "^1.0.0-rc.2",
4142
"webpack": "^4.41.5",

‎src/build/build-docs.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
#!/usr/bin/env node-esm
2+
3+
// node-esm is just a shell script with: `node -r esm "$@"`
4+
5+
import Promise from 'bluebird';
6+
import cherio from 'cherio';
7+
import fs from 'fs';
8+
9+
const fs_read = Promise.promisify(fs.readFile);
10+
11+
async function main()
12+
{
13+
const out = [];
14+
for (let i = 2, end = process.argv.length; i < end; ++i) {
15+
const file = process.argv[i];
16+
const $ = cherio.load(await fs_read(file));
17+
const html = str_strip_line_spaces($('#html').html());
18+
const js = str_strip_line_spaces($('#js').html());
19+
const js_deps = $('script[src][data-include]').map(function () { return $(this).attr('src'); }).toArray();
20+
const css = str_strip_line_spaces($('#css').html());
21+
const css_deps = $('link[href][data-include]').map(function () { return $(this).attr('href'); }).toArray();
22+
out.push({file, html, js, js_deps, css, css_deps});
23+
}
24+
console.log(JSON.stringify(out, null, 4));
25+
}
26+
27+
function str_strip_line_spaces(s)
28+
{
29+
s = String(s||'').replace(/^\n+|[\n\s]+$/g, '');
30+
31+
let spaces = Number.MAX_SAFE_INTEGER;
32+
// Find out common number of spaces at the beginning of each line
33+
s.split('\n').forEach(function (line) {
34+
if (line.trim()) {
35+
spaces = Math.min(spaces, line.length - line.replace(/^ +/, '').length);
36+
}
37+
});
38+
39+
// Remove the same amount of spaces from the beginning of each line
40+
let out = '';
41+
s.split('\n').forEach(function (line) {
42+
out += line.substr(spaces);
43+
out += '\n';
44+
});
45+
return out.trim() ? out : null;
46+
}
47+
48+
// https://stackoverflow.com/a/57241059/1478566
49+
function cli(main)
50+
{
51+
// https://stackoverflow.com/a/46916601/1478566
52+
return Promise.method(main).call().catch(panic).finally(clearInterval.bind(null, setInterval(v=>v, 1E9)));
53+
}
54+
55+
function panic(error)
56+
{
57+
console.error(error);
58+
process.exit(1);
59+
}
60+
61+
cli(main);

‎src/vue_modal.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function vue_modal(props)
8585

8686
function autofocus(parent)
8787
{
88-
return jQuery(parent).andSelf().find('[autofocus]a, [autofocus] a, [autofocus]button, [autofocus] button, [autofocus]input, [autofocus] input, [autofocus]textarea, [autofocus] textarea').filter(':visible').first().focus().select();
88+
return jQuery(parent).addBack().find('[autofocus]a, [autofocus] a, [autofocus]button, [autofocus] button, [autofocus]input, [autofocus] input, [autofocus]textarea, [autofocus] textarea').filter(':visible').first().focus().select();
8989
}
9090

9191
export default vue_modal;

0 commit comments

Comments
 (0)