Skip to content

Commit 9e950e8

Browse files
jacobmllr95jacobmllr95
authored
chore: convert all line endings to unix (#5474)
1 parent bac6b88 commit 9e950e8

37 files changed

+5495
-5495
lines changed

‎docs/assets/vercel.svg

Lines changed: 3 additions & 3 deletions
Loading

‎src/components/aspect/README.md

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
1-
# Aspect
2-
3-
> The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
4-
> When the content is longer than the available height, then the component will expand vertically to
5-
> fit all content. If the content is shorter than the computed aspect height, the component will
6-
> ensure a minimum height is maintained.
7-
8-
## Overview
9-
10-
The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of
11-
`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
12-
to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
13-
`'4:3'`.
14-
15-
The width will always be 100% of the available width in the parent element/component.
16-
17-
```html
18-
<template>
19-
<div>
20-
<b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
21-
<b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-select>
22-
</b-form-group>
23-
<b-card>
24-
<b-aspect :aspect="aspect">
25-
This will always be an aspect of "{{ aspect }}",
26-
except when the content is too tall.
27-
</b-aspect>
28-
</b-card>
29-
</div>
30-
</template>
31-
32-
<script>
33-
export default {
34-
data() {
35-
return {
36-
aspect: '16:9',
37-
aspects: [
38-
{ text: '4:3 (SD)', value: '4:3' },
39-
{ text: '1:1 (Square)', value: '1:1' },
40-
{ text: '16:9 (HD)', value: '16:9' },
41-
{ text: '1.85:1 (Widescreen)', value: '1.85:1' },
42-
{ text: '2:1 (Univisium/Superscope)', value: '2:1' },
43-
{ text: '21:9 (Anamorphic)', value: '21:9' },
44-
{ text: '1.43:1 (IMAX)', value: '1.43:1' },
45-
{ text: '3:2 (35mm Film)', value: '3:2' },
46-
{ text: '3:1 (APS-P)', value: '3:1' },
47-
{ text: '4/3 (Same as 4:3)', value: 4 / 3 },
48-
{ text: '16/9 (Same as 16:9)', value: 16 / 9 },
49-
{ text: '3 (Same as 3:1)', value: 3 },
50-
{ text: '2 (Same as 2:1)', value: 2 },
51-
{ text: '1.85 (Same as 1.85:1)', value: 1.85 },
52-
{ text: '1.5', value: 1.5 },
53-
{ text: '1 (Same as 1:1)', value: 1 }
54-
]
55-
}
56-
}
57-
}
58-
</script>
59-
60-
<!-- b-aspect.vue -->
61-
```
62-
63-
## See also
64-
65-
- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)
1+
# Aspect
2+
3+
> The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
4+
> When the content is longer than the available height, then the component will expand vertically to
5+
> fit all content. If the content is shorter than the computed aspect height, the component will
6+
> ensure a minimum height is maintained.
7+
8+
## Overview
9+
10+
The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of
11+
`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
12+
to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
13+
`'4:3'`.
14+
15+
The width will always be 100% of the available width in the parent element/component.
16+
17+
```html
18+
<template>
19+
<div>
20+
<b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
21+
<b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-select>
22+
</b-form-group>
23+
<b-card>
24+
<b-aspect :aspect="aspect">
25+
This will always be an aspect of "{{ aspect }}",
26+
except when the content is too tall.
27+
</b-aspect>
28+
</b-card>
29+
</div>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data() {
35+
return {
36+
aspect: '16:9',
37+
aspects: [
38+
{ text: '4:3 (SD)', value: '4:3' },
39+
{ text: '1:1 (Square)', value: '1:1' },
40+
{ text: '16:9 (HD)', value: '16:9' },
41+
{ text: '1.85:1 (Widescreen)', value: '1.85:1' },
42+
{ text: '2:1 (Univisium/Superscope)', value: '2:1' },
43+
{ text: '21:9 (Anamorphic)', value: '21:9' },
44+
{ text: '1.43:1 (IMAX)', value: '1.43:1' },
45+
{ text: '3:2 (35mm Film)', value: '3:2' },
46+
{ text: '3:1 (APS-P)', value: '3:1' },
47+
{ text: '4/3 (Same as 4:3)', value: 4 / 3 },
48+
{ text: '16/9 (Same as 16:9)', value: 16 / 9 },
49+
{ text: '3 (Same as 3:1)', value: 3 },
50+
{ text: '2 (Same as 2:1)', value: 2 },
51+
{ text: '1.85 (Same as 1.85:1)', value: 1.85 },
52+
{ text: '1.5', value: 1.5 },
53+
{ text: '1 (Same as 1:1)', value: 1 }
54+
]
55+
}
56+
}
57+
}
58+
</script>
59+
60+
<!-- b-aspect.vue -->
61+
```
62+
63+
## See also
64+
65+
- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)

‎src/components/aspect/aspect.js

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
1-
import Vue from '../../utils/vue'
2-
import { mathAbs } from '../../utils/math'
3-
import { toFloat } from '../../utils/number'
4-
import normalizeSlotMixin from '../../mixins/normalize-slot'
5-
6-
// --- Constants ---
7-
const NAME = 'BAspect'
8-
const CLASS_NAME = 'b-aspect'
9-
10-
const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
11-
const RX_SEPARATOR = /[/:]/
12-
13-
// --- Main Component ---
14-
export const BAspect = /*#__PURE__*/ Vue.extend({
15-
name: NAME,
16-
mixins: [normalizeSlotMixin],
17-
props: {
18-
aspect: {
19-
// Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
20-
// Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
21-
type: [Number, String],
22-
default: '1:1'
23-
},
24-
tag: {
25-
type: String,
26-
default: 'div'
27-
}
28-
},
29-
computed: {
30-
padding() {
31-
const aspect = this.aspect
32-
let ratio = 1
33-
if (RX_ASPECT.test(aspect)) {
34-
// Width and/or Height can be a decimal value below `1`, so
35-
// we only fallback to `1` if the value is `0` or `NaN`
36-
const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
37-
ratio = width / height
38-
} else {
39-
ratio = toFloat(aspect) || 1
40-
}
41-
return `${100 / mathAbs(ratio)}%`
42-
}
43-
},
44-
render(h) {
45-
const $sizer = h('div', {
46-
staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
47-
style: { paddingBottom: this.padding, height: 0 }
48-
})
49-
const $content = h(
50-
'div',
51-
{
52-
staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
53-
style: { marginLeft: '-100%' }
54-
},
55-
[this.normalizeSlot('default')]
56-
)
57-
return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
58-
}
59-
})
1+
import Vue from '../../utils/vue'
2+
import { mathAbs } from '../../utils/math'
3+
import { toFloat } from '../../utils/number'
4+
import normalizeSlotMixin from '../../mixins/normalize-slot'
5+
6+
// --- Constants ---
7+
const NAME = 'BAspect'
8+
const CLASS_NAME = 'b-aspect'
9+
10+
const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
11+
const RX_SEPARATOR = /[/:]/
12+
13+
// --- Main Component ---
14+
export const BAspect = /*#__PURE__*/ Vue.extend({
15+
name: NAME,
16+
mixins: [normalizeSlotMixin],
17+
props: {
18+
aspect: {
19+
// Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
20+
// Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
21+
type: [Number, String],
22+
default: '1:1'
23+
},
24+
tag: {
25+
type: String,
26+
default: 'div'
27+
}
28+
},
29+
computed: {
30+
padding() {
31+
const aspect = this.aspect
32+
let ratio = 1
33+
if (RX_ASPECT.test(aspect)) {
34+
// Width and/or Height can be a decimal value below `1`, so
35+
// we only fallback to `1` if the value is `0` or `NaN`
36+
const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
37+
ratio = width / height
38+
} else {
39+
ratio = toFloat(aspect) || 1
40+
}
41+
return `${100 / mathAbs(ratio)}%`
42+
}
43+
},
44+
render(h) {
45+
const $sizer = h('div', {
46+
staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
47+
style: { paddingBottom: this.padding, height: 0 }
48+
})
49+
const $content = h(
50+
'div',
51+
{
52+
staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
53+
style: { marginLeft: '-100%' }
54+
},
55+
[this.normalizeSlot('default')]
56+
)
57+
return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
58+
}
59+
})

0 commit comments

Comments
 (0)