Commit c541333b authored by Alex Vipond's avatar Alex Vipond

Refactor getSelection and move components out of nested vue folder

parent 09eed36d
......@@ -96,17 +96,10 @@
"href": "/docs/tools/utility-functions/last-match",
"name": "lastMatch",
"isCode": true
}
]
},
{
"name": "helper functions",
"heading_level": 3,
"sort": true,
"pages": [
},
{
"href": "/docs/tools/helper-functions/get-elements",
"name": "getElements",
"href": "/docs/tools/helper-functions/get-selection",
"name": "getSelection",
"isCode": true
}
]
......
This source diff could not be displayed because it is too large. You can view the blob instead.
<script>
import Navigable from '../../js/navigable.js'
import Navigable from '../js/navigable.js'
export default {
props: {
......@@ -11,7 +11,7 @@ export default {
type: Object,
},
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
},
data () {
return {
......@@ -76,7 +76,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
import Searchable from '../../js/searchable.js'
import getData from '../../js/get-data.js'
import Searchable from '../js/searchable.js'
import getData from '../js/get-data.js'
export default {
props: {
......@@ -18,7 +18,7 @@ export default {
type: Boolean,
default: true,
},
parentScope: { type: Object }
parentData: { type: Object }
},
data () {
return {
......@@ -80,7 +80,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
}
}
},
......
......@@ -3,7 +3,7 @@ import Wavesurfer from 'wavesurfer.js'
export default {
props: {
parentScope: { type: Object },
parentData: { type: Object },
url: { type: String },
file: { type: File },
containerSelector: {
......@@ -258,7 +258,7 @@ export default {
zoom: this.zoom,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
......@@ -2,26 +2,26 @@
<ArraySearch
:array="array"
:options="searchOptions"
:parent-scope="{
:parent-data="{
string: string,
position: position,
completeOptions: completeOptions,
navigateOptions: navigateOptions,
popOptions: popOptions,
parent: parentScope,
parentData: parentData,
}"
v-slot="{ query, results, setQuery, search, parent: BaleadaAutocomplete }"
v-slot="{ query, results, setQuery, search, parentData: BaleadaAutocomplete }"
>
<ArrayNavigate
:array="results"
:options="BaleadaAutocomplete.navigateOptions"
:parent-scope="{
:parent-data="{
BaleadaAutocomplete: BaleadaAutocomplete,
results: results,
setQuery: setQuery,
search: search,
}"
v-slot="{ currentIndex, next, prev, parent: ArraySearch }"
v-slot="{ currentIndex, next, prev, parentData: ArraySearch }"
>
<!-- TODO: don't hardcode complete and update:position events -->
<StringComplete
......@@ -30,20 +30,20 @@
@complete="string => $emit('complete', string)"
@update:position="position => $emit('update:position', position)"
:options="ArraySearch.BaleadaAutocomplete.completeOptions"
:parent-scope="{
:parent-data="{
ArraySearch: ArraySearch,
currentIndex: currentIndex,
next: next,
prev: prev
}"
v-slot="{ handleInput, string, segment, complete, parent: ArrayNavigate }"
v-slot="{ handleInput, string, segment, complete, parentData: ArrayNavigate }"
>
<ElementPop
:reference="ArrayNavigate.ArraySearch.BaleadaAutocomplete.reference"
:popper="ArrayNavigate.ArraySearch.BaleadaAutocomplete.popper"
:options="ArrayNavigate.ArraySearch.BaleadaAutocomplete.popOptions"
:parent-scope="{
parent: ArrayNavigate.ArraySearch.BaleadaAutocomplete.parent,
:parent-data="{
parentData: ArrayNavigate.ArraySearch.BaleadaAutocomplete.parent,
results: ArrayNavigate.ArraySearch.results,
setQuery: ArrayNavigate.ArraySearch.setQuery,
search: ArrayNavigate.ArraySearch.search,
......@@ -56,7 +56,7 @@
complete: complete
}"
v-slot="{
parent: {
parentData: {
results,
setQuery,
search,
......@@ -89,10 +89,10 @@
</template>
<script>
import ElementPop from '~/components/vue/ElementPop.vue'
import StringComplete from '~/components/vue/StringComplete.vue'
import ArrayNavigate from '~/components/vue/ArrayNavigate.vue'
import ArraySearch from '~/components/vue/ArraySearch.vue'
import ElementPop from '~/components/ElementPop.vue'
import StringComplete from '~/components/StringComplete.vue'
import ArrayNavigate from '~/components/ArrayNavigate.vue'
import ArraySearch from '~/components/ArraySearch.vue'
export default {
model: {
......@@ -127,7 +127,7 @@ export default {
popOptions: {
// See ElementPop for more details
},
parentScope: {
parentData: {
type: Object,
}
}
......
......@@ -21,7 +21,7 @@ export default {
default: 'DATE_MED'
},
onConstruct: { type: Function },
parentScope: { type: Object }
parentData: { type: Object }
},
computed: {
formattedDate () {
......@@ -78,7 +78,7 @@ export default {
return this.$scopedSlots.default({
emit: (event, payload) => this.$emit(event, payload),
formattedDate: this.formattedDate,
parent: this.parentScope,
parentData: this.parentData,
})
}
}
......
<script>
import { DateTime } from 'luxon'
import is from '../../js/is.js'
import is from '../js/is.js'
export default {
props: {
......
<script>
import { Sortable } from '@shopify/draggable'
import Reorderable from '../js/reorderable.js'
import getData from '../js/get-data.js'
import getSelection from '../js/get-selection.js'
export default {
model: {
......@@ -10,17 +13,17 @@ export default {
type: Array,
required: true
},
elements: {
element: {
type: [String, NodeList],
},
elementsParent: {
elementAncestor: {
type: HTMLElement,
},
options: {
type: [Object, Function],
},
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
container: {
type: [String, HTMLElement]
......@@ -43,6 +46,17 @@ export default {
}
},
methods: {
getData: getData,
getSelection: getSelection,
selectElement () {
return this.getSelection({
fallback: this.$el,
selection: this.element,
ancestor: this.ancestor,
isMultiple: false
})
},
getContainer (container) {
if (container === undefined) {
return this.$el
......@@ -118,7 +132,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope,
parentData: this.parentData,
})
}
}
......
......@@ -17,7 +17,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
export default {
props: {
parentScope: { type: Object },
parentData: { type: Object },
targetId: {
type: String,
required: true
......@@ -56,7 +56,7 @@ export default {
isFullScreen: this.isFullScreen,
enterFullScreen: this.enterFullScreen,
exitFullScreen: this.exitFullScreen,
parent: this.parentScope
parentData: this.parentData
})
}
}
......
......@@ -3,8 +3,8 @@
import Popper from 'popper.js'
// Utils
import getElements from '../../js/get-elements.js'
import getData from '../../js/get-data.js'
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
export default {
props: {
......@@ -16,17 +16,17 @@ export default {
type: [String, Node],
default: '*:last-child',
},
referenceParent: {
referenceAncestor: {
type: Node,
},
popperParent: {
popperAncestor: {
type: Node,
},
options: {
type: Object,
},
onConstruct: { type: Function },
parentScope: { type: Object }
parentData: { type: Object }
},
data () {
return {
......@@ -35,21 +35,21 @@ export default {
}
},
methods: {
getElements: getElements,
getSelection: getSelection,
getData: getData,
selectReference () {
return this.getElements({
vm: this,
elementsProp: 'reference',
elementsParentProp: 'referenceParent',
return this.getSelection({
fallback: this.$el,
selection: this.reference,
ancestor: this.referenceAncestor,
isMultiple: false
})
},
selectPopper () {
return this.getElements({
vm: this,
elementsProp: 'popper',
elementsParentProp: 'popperParent',
return this.getSelection({
fallback: this.$el,
selection: this.popper,
ancestor: this.popperAncestor,
isMultiple: false
})
},
......@@ -127,7 +127,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
......@@ -3,7 +3,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
export default {
props: {
parentScope: { type: Object },
parentData: { type: Object },
selector: {
type: String,
// default: $el
......
......@@ -3,8 +3,8 @@
import Hammer from 'hammerjs'
// Utils
import getElements from '../../js/get-elements.js'
import getData from '../../js/get-data.js'
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
export default {
props: {
......@@ -18,17 +18,17 @@ export default {
type: [Object, Function],
},
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
},
methods: {
getElements: getElements,
getSelection: getSelection,
getData: getData,
selectElement () {
return this.getElements({
vm: this,
elementsProp: 'element',
elementsParentProp: 'elementParent',
return this.getSelection({
fallback: this.$el,
selection: this.element,
ancestor: this.elementParent,
isMultiple: false
})
},
......@@ -108,7 +108,7 @@ export default {
this.selectedElement = this.selectElement()
this.instance = this.construct()
},
elementParent () {
ancestor () {
this.selectedElement = this.selectElement()
this.instance = this.construct()
},
......@@ -125,7 +125,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
......@@ -2,8 +2,8 @@
import anime from 'animejs'
// Utils
import getElements from '../../js/get-elements.js'
import getData from '../../js/get-data.js'
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
export default {
props: {
......@@ -11,7 +11,7 @@ export default {
elements: {
type: [String, Node, NodeList],
},
elementsParent: {
ancestor: {
type: Node,
// default: this.$el
},
......@@ -27,7 +27,7 @@ export default {
onConstruct: {
type: Function,
},
parentScope: { type: Object }
parentData: { type: Object }
},
data () {
return {
......@@ -37,12 +37,12 @@ export default {
methods: {
// Utils
getData: getData,
getElements: getElements,
getSelection: getSelection,
selectElements () {
return this.getElements({
vm: this,
elementsProp: 'elements',
elementsParentProp: 'elementsParent',
return this.getSelection({
fallback: this.$el,
selection: this.elements,
ancestor: this.ancestor,
isMultiple: true
})
},
......@@ -140,7 +140,7 @@ export default {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
elementsParent () {
ancestor () {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
......@@ -181,7 +181,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
// Parent scope
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
// Utils
import getElements from '../../js/get-elements.js'
import getData from '../../js/get-data.js'
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
export default {
props: {
elements: {
type: [String, Node],
},
elementsParent: {
ancestor: {
type: Node,
},
options: {
type: Object,
},
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
},
data () {
return {
......@@ -24,13 +24,13 @@ export default {
}
},
methods: {
getElements: getElements,
getSelection: getSelection,
getData: getData,
selectElements () {
return this.getElements({
vm: this,
elementsProp: 'elements',
elementsParentProp: 'elementsParent',
return this.getSelection({
fallback: this.$el,
selection: this.elements,
ancestor: this.ancestor,
isMultiple: true,
})
},
......@@ -79,11 +79,11 @@ export default {
this.instance.disconnect()
},
watch: {
element () {
elements () {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
elementParent () {
ancestor () {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
......@@ -103,7 +103,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
// Utils
import getElements from '../../js/get-elements.js'
import getData from '../../js/get-data.js'
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
export default {
props: {
elements: {
type: [String, Node],
},
elementsParent: {
ancestor: {
type: Node,
},
options: {
type: Object,
},
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
},
data () {
return {
......@@ -24,13 +24,13 @@ export default {
}
},
methods: {
getElements: getElements,
getSelection: getSelection,
getData: getData,
selectElements () {
return this.getElements({
vm: this,
elementsProp: 'elements',
elementsParentProp: 'elementsParent',
return this.getSelection({
fallback: this.$el,
selection: this.elements,
ancestor: this.ancestor,
isMultiple: true,
})
},
......@@ -74,11 +74,11 @@ export default {
this.instance.disconnect()
},
watch: {
element () {
elements () {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
elementParent () {
ancestor () {
this.selectedElements = this.selectElements()
this.instance = this.construct()
},
......@@ -93,7 +93,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
import Delayable from '../../js/delayable.js'
import Delayable from '../js/delayable.js'
export default {
props: {
......@@ -9,7 +9,7 @@ export default {
},
options: { type: Object },
onConstruct: { type: Function },
parentScope: { type: Object },
parentData: { type: Object },
},
data () {
return {
......@@ -63,7 +63,7 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parent: this.parentScope
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
......
<script>
import { modifiers, keys, getKeyProps, getModifierProps, getKeyMethods, getModifierMethods } from '../../js/get-keydown-data.js'
import { modifiers, keys, getKeyProps, getModifierProps, getKeyMethods, getModifierMethods } from '../js/get-keydown-data.js'
export default {
props: {
parentScope: { type: Object },
parentData: { type: Object },
documentIsTarget: { type: Boolean, default: true },
// Generate all keydown props
......@@ -14,7 +14,7 @@ export default {
created () {
const definedProps = Object.keys(this.$props).filter(prop => {
return (
prop !== 'parentScope'
prop !== 'parentData'
&& prop !== 'documentIsTarget'
&& !/(?:Handler|Args)$/.test(prop)
&& this[prop] !== undefined
......@@ -74,7 +74,7 @@ export default {
render () {
return this.$scopedSlots.default({
keydown: this.keydownHandler,
parent: this.parentScope
parentData: this.parentData