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