mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

fix codepen heights

Browse Source
This commit is contained in:
Jeff
2018-09-05 08:07:02 -07:00
parent b48fd94e4f
commit fc9328d438
7 changed files with 129 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vuepress/components/CodePen.vue
+12 -108
View File
@@ -9,116 +9,20 @@
</template>
<script>
import mountCodePen from '../utils/codePen';
export default {
props: ['url', 'height'],
props: {
url: {
type: String,
required: true,
},
height: {
default: 250
}
},
mounted () {
document.getElementsByClassName || (document.getElementsByClassName = function (e) {
var n, t, r, a = document, o = [];
if (a.querySelectorAll) return a.querySelectorAll('.' + e);
if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
null, 0,
null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
'(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
return o;
}), function () {
function e () {
function e () {
for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
var u = a(e[t]);
if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
var c = i(u), l = s(u, c);
f(e[t], l);
}
}
m();
}
function n (e, n) {
if ('string' == typeof e.user) return e.user;
for (var t = 0, r = n.children.length; t < r; t++) {
var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
if (i) return i[2];
}
return 'anon';
}
function r (e) {return e['slug-hash'];}
function a (e) {
for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
var o = t[r].name;
0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
}
return n;
}
function o (e) {
return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
}
function i (e) {
var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
o = [n, t, a, e['slug-hash'] + r].join('/');
return o.replace(/\/\//g, '//');
}
function u (e) {
return e.host ? c(e.host) : 'file:' === document.location.protocol
? 'https://codepen.io'
: '//codepen.io';
}
function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
function l (e) {
var n = '';
for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
return n;
}
function s (e, n) {
var r;
e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
var a = {
id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
src: n,
scrolling: 'no',
frameborder: '0',
height: d(e),
allowTransparency: 'true',
allowfullscreen: 'true',
allowpaymentrequest: 'true',
name: 'CodePen Embed',
title: r,
'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
style: 'width: ' + p + '; overflow: hidden;',
}, o = '<iframe ';
for (var i in a) o += i + '="' + a[i] + '" ';
return o += '></iframe>';
}
function d (e) {return e.height ? e.height : 300;}
function f (e, n) {
if (e.parentNode) {
var t = document.createElement('div');
t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
} else e.innerHTML = n;
}
function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
var p = '100%';
e();
}
function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
var t = 1;
window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
}();
mountCodePen();
},
};
</script>
docs/.vuepress/utils/codePen.js
+111
View File
@@ -0,0 +1,111 @@
export default () => {
document.getElementsByClassName || (document.getElementsByClassName = function (e) {
var n, t, r, a = document, o = [];
if (a.querySelectorAll) return a.querySelectorAll('.' + e);
if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
null, 0,
null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
'(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
return o;
}), function () {
function e () {
function e () {
for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
var u = a(e[t]);
if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
var c = i(u), l = s(u, c);
f(e[t], l);
}
}
m();
}
function n (e, n) {
if ('string' == typeof e.user) return e.user;
for (var t = 0, r = n.children.length; t < r; t++) {
var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
if (i) return i[2];
}
return 'anon';
}
function r (e) {return e['slug-hash'];}
function a (e) {
for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
var o = t[r].name;
0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
}
return n;
}
function o (e) {
return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
}
function i (e) {
var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
o = [n, t, a, e['slug-hash'] + r].join('/');
return o.replace(/\/\//g, '//');
}
function u (e) {
return e.host ? c(e.host) : 'file:' === document.location.protocol
? 'https://codepen.io'
: '//codepen.io';
}
function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
function l (e) {
var n = '';
for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
return n;
}
function s (e, n) {
var r;
e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
var a = {
id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
src: n,
scrolling: 'no',
frameborder: '0',
height: d(e),
allowTransparency: 'true',
allowfullscreen: 'true',
allowpaymentrequest: 'true',
name: 'CodePen Embed',
title: r,
'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
style: 'width: ' + p + '; overflow: hidden;',
}, o = '<iframe ';
for (var i in a) o += i + '="' + a[i] + '" ';
return o += '></iframe>';
}
function d (e) {return e.height ? e.height : 300;}
function f (e, n) {
if (e.parentNode) {
var t = document.createElement('div');
t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
} else e.innerHTML = n;
}
function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
var p = '100%';
e();
}
function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
var t = 1;
window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
}();
}
docs/docs/digging-deeper/ajax.md
+1 -1
View File
@@ -1,6 +1,6 @@
## AJAX Remote Option Loading
<CodePen url="POMeOX" height="40"/>
<CodePen url="POMeOX" height="400"/>
The `onSearch` prop allows you to load options via ajax in a parent component
when the search text is updated. It is invoked with two parameters, `search` & `loading`.
docs/docs/digging-deeper/vuex.md
+1 -1
View File
@@ -13,4 +13,4 @@ action, or trigger a mutation.
></v-select>
```
<CodePen url="aJQJyp" height="50"/>
<CodePen url="aJQJyp" height="350"/>
docs/docs/getting-started/localization.md
+1 -1
View File
@@ -40,4 +40,4 @@ All of the text within the component has been wrapped within [slots](https://vue
For a full list of component slots, view the [slots API docs](../api/slots.md).
<CodePen url="oZmLVN" height="25"/>
<CodePen url="oZmLVN" height="450"/>
docs/docs/getting-started/options.md
+1 -1
View File
@@ -31,7 +31,7 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
<v-select label="countryName" :options="countries"></v-select>
```
<CodePen url="aEjLPB" height="50"/>
<CodePen url="aEjLPB" height="450"/>
## Option Object Key
docs/docs/getting-started/values.md
+2 -2
View File
@@ -24,7 +24,7 @@ By default, `vue-select` supports choosing a single value. If you need multiple
<v-select multiple v-model="selected"></v-select>
```
<CodePen url="opMGro" height="25"/>
<CodePen url="opMGro" height="250"/>
## Tagging
@@ -37,7 +37,7 @@ If you want new tags to be pushed to the options list, set `push-tags` to true.
## Return a Single Key from an Object
<CodePen url="XVoWxm" height="35"/>
<CodePen url="XVoWxm" height="350"/>
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.