Commit 0d9d09c4 authored by Alex Vipond's avatar Alex Vipond

Create custom tailwind config, make other tweaks that I forgot about

parent 5b6c26d7
This diff is collapsed.
......@@ -2,73 +2,30 @@
<ArraySearch
:array="array"
:options="searchOptions"
:parent-data="{
string: string,
position: position,
completeOptions: completeOptions,
navigateOptions: navigateOptions,
popOptions: popOptions,
parentData: parentData,
}"
v-slot="{ query, results, setQuery, search, parentData: BaleadaAutocomplete }"
:parentData="{ string, position, completeOptions, navigateOptions, popOptions, parentData }"
v-slot="{ query, results, setQuery, search, parentData: { string, position, completeOptions, navigateOptions, popOptions, parentData } }"
>
<ArrayNavigate
:array="results"
:options="BaleadaAutocomplete.navigateOptions"
:parent-data="{
BaleadaAutocomplete: BaleadaAutocomplete,
results: results,
setQuery: setQuery,
search: search,
}"
v-slot="{ currentIndex, next, prev, parentData: ArraySearch }"
:options="navigateOptions"
:parentData="{ string, position, completeOptions, popOptions, parentData, results, setQuery, search }"
v-slot="{ currentIndex, next, prev, goTo, parentData: { string, position, completeOptions, popOptions, parentData, results, setQuery, search } }"
>
<!-- TODO: don't hardcode complete and update:position events -->
<StringComplete
:string="ArraySearch.BaleadaAutocomplete.string"
:position="ArraySearch.BaleadaAutocomplete.position"
:string="string"
:position="position"
@complete="string => $emit('complete', string)"
@update:position="position => $emit('update:position', position)"
:options="ArraySearch.BaleadaAutocomplete.completeOptions"
:parent-data="{
ArraySearch: ArraySearch,
currentIndex: currentIndex,
next: next,
prev: prev
}"
v-slot="{ handleInput, string, segment, complete, parentData: ArrayNavigate }"
:options="completeOptions"
:parentData="{ popOptions, parentData, results, setQuery, search, currentIndex, next, prev, goTo }"
v-slot="{ handleInput, string, segment, complete, parentData: { popOptions, parentData, results, setQuery, search, currentIndex, next, prev, goTo } }"
>
<ElementPop
:reference="ArrayNavigate.ArraySearch.BaleadaAutocomplete.reference"
:popper="ArrayNavigate.ArraySearch.BaleadaAutocomplete.popper"
:options="ArrayNavigate.ArraySearch.BaleadaAutocomplete.popOptions"
:parent-data="{
parentData: ArrayNavigate.ArraySearch.BaleadaAutocomplete.parent,
results: ArrayNavigate.ArraySearch.results,
setQuery: ArrayNavigate.ArraySearch.setQuery,
search: ArrayNavigate.ArraySearch.search,
currentIndex: ArrayNavigate.currentIndex,
next: ArrayNavigate.next,
prev: ArrayNavigate.prev,
handleInput: handleInput,
string: string,
segment: segment,
complete: complete
}"
v-slot="{
parentData: {
results,
setQuery,
search,
currentIndex,
next,
prev,
handleInput,
string,
segment,
complete,
}
}"
:reference="reference"
:popper="popper"
:options="popOptions"
:parentData="{ parentData, results, setQuery, search, currentIndex, next, prev, goTo, handleInput, string, segment, complete }"
>
<slot
:results="results"
......@@ -77,6 +34,7 @@
:currentIndex="currentIndex"
:next="next"
:prev="prev"
:goTo="goTo"
:handleInput="handleInput"
:string="string"
:segment="segment"
......
......@@ -10,7 +10,7 @@ export default {
type: [String, HTMLMediaElement],
required: true,
},
elementParent: {
ancestor: {
type: Node,
},
// options: {
......@@ -29,9 +29,9 @@ export default {
getData: getData,
selectElement () {
return this.getSelection({
vm: this,
elementsProp: 'element',
elementsParentProp: 'elementParent',
fallback: this.$el,
selection: this.element,
ancestor: this.ancestor,
isMultiple: false,
})
},
......@@ -90,16 +90,16 @@ export default {
element () {
this.selectedElement = this.selectElement()
},
elementParent () {
ancestor () {
this.selectedElement = this.selectElement()
},
options () {
this.instance = this.construct()
}
},
render () {
if (this.$scopedSlots.default !== undefined) {
return this.$scopedSlots.default({
computed: {
provisions () {
return {
// state
audioTracks: this.instance.audioTracks,
autoplay: this.instance.autoplay,
......@@ -146,12 +146,18 @@ export default {
el: () => this.$el,
emit: (event, payload) => this.$emit(event, payload),
parentData: this.parentData
})
} else if (this.$slots.default !== undefined) {
return this.$slots.default[0]
} else {
return null
}
}
},
provide() {
return { mediaElementControl: this.provisions }
},
render () {
return (this.$scopedSlots.default !== undefined)
? this.$scopedSlots.default(this.provisions)
: (this.$slots.default !== undefined)
? this.$slots.default[0]
: null
},
}
</script>
module.exports = {
theme: {
fractions: {
'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'2/6': '33.33333%',
'3/6': '50%',
'4/6': '66.66667%',
'5/6': '83.33333%',
'1/12': '8.33333%',
'2/12': '16.66667%',
'3/12': '25%',
'4/12': '33.33333%',
'5/12': '41.66667%',
'6/12': '50%',
'7/12': '58.33333%',
'8/12': '66.66667%',
'9/12': '75%',
'10/12': '83.33333%',
'11/12': '91.66667%',
'full': '100%'
},
screenWidthFractions: {
'1/2': 'calc(1/2 * 100vw)',
'1/3': 'calc(1/3 * 100vw)',
'2/3': 'calc(2/3 * 100vw)',
'1/4': 'calc(1/4 * 100vw)',
'2/4': 'calc(2/4 * 100vw)',
'3/4': 'calc(3/4 * 100vw)',
'1/5': 'calc(1/5 * 100vw)',
'2/5': 'calc(2/5 * 100vw)',
'3/5': 'calc(3/5 * 100vw)',
'4/5': 'calc(4/5 * 100vw)',
'1/6': 'calc(1/6 * 100vw)',
'2/6': 'calc(2/6 * 100vw)',
'3/6': 'calc(3/6 * 100vw)',
'4/6': 'calc(4/6 * 100vw)',
'5/6': 'calc(5/6 * 100vw)',
'1/12': 'calc(1/12 * 100vw)',
'2/12': 'calc(2/12 * 100vw)',
'3/12': 'calc(3/12 * 100vw)',
'4/12': 'calc(4/12 * 100vw)',
'5/12': 'calc(5/12 * 100vw)',
'6/12': 'calc(6/12 * 100vw)',
'7/12': 'calc(7/12 * 100vw)',
'8/12': 'calc(8/12 * 100vw)',
'9/12': 'calc(9/12 * 100vw)',
'10/12': 'calc(10/12 * 100vw)',
'11/12': 'calc(11/12 * 100vw)',
'screen': '100vw'
},
screenHeightFractions: {
'1/2': 'calc(1/2 * 100vh)',
'1/3': 'calc(1/3 * 100vh)',
'2/3': 'calc(2/3 * 100vh)',
'1/4': 'calc(1/4 * 100vh)',
'2/4': 'calc(2/4 * 100vh)',
'3/4': 'calc(3/4 * 100vh)',
'1/5': 'calc(1/5 * 100vh)',
'2/5': 'calc(2/5 * 100vh)',
'3/5': 'calc(3/5 * 100vh)',
'4/5': 'calc(4/5 * 100vh)',
'1/6': 'calc(1/6 * 100vh)',
'2/6': 'calc(2/6 * 100vh)',
'3/6': 'calc(3/6 * 100vh)',
'4/6': 'calc(4/6 * 100vh)',
'5/6': 'calc(5/6 * 100vh)',
'1/12': 'calc(1/12 * 100vh)',
'2/12': 'calc(2/12 * 100vh)',
'3/12': 'calc(3/12 * 100vh)',
'4/12': 'calc(4/12 * 100vh)',
'5/12': 'calc(5/12 * 100vh)',
'6/12': 'calc(6/12 * 100vh)',
'7/12': 'calc(7/12 * 100vh)',
'8/12': 'calc(8/12 * 100vh)',
'9/12': 'calc(9/12 * 100vh)',
'10/12': 'calc(10/12 * 100vh)',
'11/12': 'calc(11/12 * 100vh)',
'screen': '100vh'
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px'
},
spacing: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '2rem',
'8': '2.5rem',
'9': '3rem',
'10': '4rem',
'11': '5rem',
'12': '6rem',
'13': '8rem',
'14': '10rem',
'15': '12rem',
'16': '14rem',
'17': '16rem'
},
borderRadius: {
'0': '0',
default: '0.125rem',
'1': '0.25rem',
'2': '0.5rem',
full: '9999px'
},
borderWidth: {
'0': '0',
default: '1px',
'1': '1.5px',
'2': '2px',
'3': '4px',
'4': '8px'
},
boxShadow: {
'0': 'none',
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'1': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'2': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
'3': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'4': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'-1': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)'
},
fontSize: {
'1': '0.75rem',
'2': '0.875rem',
'3': '1rem',
'4': '1.125rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.875rem',
'8': '2.25rem',
'9': '3rem',
'10': '4rem'
},
fontWeight: {
'100': '100',
'200': '200',
'300': '300',
'400': '400',
'500': '500',
'600': '600',
'700': '700',
'800': '800',
'900': '900'
},
height: theme => ({
auto: 'auto',
...theme('spacing'),
...theme('fractions'),
...theme('screenHeightFractions')
}),
letterSpacing: {
'-2': '-0.05em',
'-1': '-0.025em',
'0': '0',
'1': '0.025em',
'2': '0.05em',
'3': '0.1em'
},
lineHeight: {
'0': '1',
'1': '1.25',
'2': '1.375',
'3': '1.5',
'4': '1.625',
'5': '2'
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing'))
}),
maxHeight: theme => ({
...theme('fractions'),
...theme('screenHeightFractions')
}),
maxWidth: theme => ({
'1': '20rem',
'2': '24rem',
'3': '28rem',
'4': '32rem',
'5': '36rem',
'6': '42rem',
'7': '48rem',
'8': '56rem',
'9': '64rem',
'10': '72rem',
...theme('fractions'),
...theme('screenWidthFractions')
}),
minHeight: theme => ({
'0': '0',
...theme('fractions'),
...theme('screenHeightFractions')
}),
minWidth: theme => ({
'0': '0',
...theme('fractions'),
...theme('screenWidthFractions')
}),
width: theme => ({
auto: 'auto',
...theme('spacing'),
...theme('fractions'),
...theme('screenWidthFractions')
}),
inset: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing'))
})
},
variants: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'active']
}
......@@ -25,7 +25,7 @@ class Completable {
// Default settings are designed to support an autocomplete component that replaces the full segment/search term with a completion
segmentsFromDivider: false,
segmentsToPosition: false,
divider: /\W/,
divider: /\s/,
positionsAfterCompletion: true,
...options
}
......
......@@ -5,7 +5,6 @@
*/
import axios from 'axios'
import is from './is.js'
class Requestable {
#requestConfig
......
......@@ -37,7 +37,7 @@
| --- | --- | --- | --- |
| `segmentsFromDivider` | Boolean | `false` | Indicates whether or not the Completable instance, when extracting a segment, should extract a segment of text starting from a divider (for example, the space between words) or from the very beginning of the string. See the <nuxt-link to="#How-the-Completable-instance-extracts-segments">How the Completable instance extracts segments</nuxt-link> section for more info. |
| `segmentsToPosition` | Boolean | `false` | Indicates whether or not the Completable instance, when extracting a segment, should extract a segment of text up to the current position or through the end of the string. See the <nuxt-link to="#How-the-Completable-instance-extracts-segments">How the Completable instance extracts segments</nuxt-link> section for more info. |
| `divider` | RegExp | `/\W/` | <p>Tells the Completable instance how segments of the string are divided. Has no effect when <code>segmentsFromDivider</code> is <code>false</code>.</p><p>See the <nuxt-link to="#How-the-Completable-instance-extracts-segments">How the Completable instance extracts segments</nuxt-link> section for more info.</p> |
| `divider` | RegExp | `/\s/` | <p>Tells the Completable instance how segments of the string are divided. Has no effect when <code>segmentsFromDivider</code> is <code>false</code>.</p><p>See the <nuxt-link to="#How-the-Completable-instance-extracts-segments">How the Completable instance extracts segments</nuxt-link> section for more info.</p> |
| `positionsAfterCompletion` | Boolean | `true` | <p>Indicates whether or not the Completable instance, after completing the string, should set the current position to the index after the segment's replacement.</p><p>See the <nuxt-link to="#How-the-Completable-instance-handles-current-position">How the Completable instance handles current position</nuxt-link> section for more info.</p> |
| `onComplete` | Function | none | Passes a function that Completable will call after completing the string. `onComplete` takes one argument: the completed string (String). |
| `onPosition` | Function | none | <p>Passes a function that Completable will call after completing the string. <code>onPosition</code> takes one argument: a position (Number) whose exact value differs based on <code>positionsAfterCompletion</code> and <code>segmentsToPosition</code>.</p><p>See the <nuxt-link to="#How-the-Completable-instance-handles-current-position">How the Completable instance handles current position</nuxt-link> section for more info.</p> |
......
......@@ -86,7 +86,7 @@
| --- | --- |
| Action providers | Renderless components that provide one or more **functions** |
| Interaction providers | Renderless components that provide one or more **event handlers** (functions that take an event—native, emitted by Vue, or emitted by a third-party library—as an argument) or **observation handlers** (functions that take an observer entry as an argument) |
| Controlled components | Components with one prop whose state is controlled by `v-model` or equivalent |
| Controlled components | Components with one prop whose state is controlled by two-way data binding |
| Composed components | Higher-level renderless components created by combining two or more action providers, interaction providers, and/or controlled components. |
......
<template>
<section class="">
<section class="h-screen inline-flex flex-col p-16">
<MediaElementControl element="video" v-slot="{
<BaleadaAutocomplete
v-model="popover"
:position.sync="popoverPosition"
reference="textarea"
popper="#popper"
:array="['Label', 'Element Type', 'Description', 'Tags']"
:completeOptions="completeOptions"
v-slot="{
string,
handleInput,
segment,
setQuery,
search,
results,
complete
}"
>
<div class="">
<textarea
name="name"
rows="8"
cols="80"
:value="string"
@input="handleInput"
/>
<StateWatch :state="segment" :callback="() => { setQuery(segment); search() }" />
<ul id="popper">
<li v-for="result in results">
<button class="btn" type="button" name="button" @click="complete(`{{${result.item}}}`)">
{{ result.item }}
</button>
</li>
</ul>
</div>
</BaleadaAutocomplete>
<!-- <MediaElementControl element="video" v-slot="{
audioTracks,
autoplay,
buffered,
......@@ -50,37 +85,6 @@
</video>
<div class="absolute h-16 pin-b pin-l w-full bg-true-black"/>
</div>
<pre><code>audioTracks: {{ JSON.stringify(audioTracks, null, 2) }}
autoplay: {{ JSON.stringify(autoplay, null, 2) }}
buffered: {{ JSON.stringify(buffered, null, 2) }}
controller: {{ JSON.stringify(controller, null, 2) }}
controls: {{ JSON.stringify(controls, null, 2) }}
controlsList: {{ JSON.stringify(controlsList, null, 2) }}
crossOrigin: {{ JSON.stringify(crossOrigin, null, 2) }}
currentSrc: {{ JSON.stringify(currentSrc, null, 2) }}
currentTime: {{ JSON.stringify(currentTime, null, 2) }}
defaultMuted: {{ JSON.stringify(defaultMuted, null, 2) }}
defaultPlaybackRate: {{ JSON.stringify(defaultPlaybackRate, null, 2) }}
disableRemotePlayback: {{ JSON.stringify(disableRemotePlayback, null, 2) }}
duration: {{ JSON.stringify(duration, null, 2) }}
ended: {{ JSON.stringify(ended, null, 2) }}
error: {{ JSON.stringify(error, null, 2) }}
loop: {{ JSON.stringify(loop, null, 2) }}
mediaGroup: {{ JSON.stringify(mediaGroup, null, 2) }}
muted: {{ JSON.stringify(muted, null, 2) }}
networkState: {{ JSON.stringify(networkState, null, 2) }}
paused: {{ JSON.stringify(paused, null, 2) }}
playbackRate: {{ JSON.stringify(playbackRate, null, 2) }}
played: {{ JSON.stringify(played, null, 2) }}
preload: {{ JSON.stringify(preload, null, 2) }}
readyState: {{ JSON.stringify(readyState, null, 2) }}
seekable: {{ JSON.stringify(seekable, null, 2) }}
seeking: {{ JSON.stringify(seeking, null, 2) }}
src: {{ JSON.stringify(src, null, 2) }}
srcObject: {{ JSON.stringify(srcObject, null, 2) }}
textTracks: {{ JSON.stringify(textTracks, null, 2) }}
videoTracks: {{ JSON.stringify(videoTracks, null, 2) }}
volume: {{ JSON.stringify(volume, null, 2) }} </code></pre>
<button
class="mt-5 btn border-2 border-primary-600 text-primary-600 hover:scale-5 active:scale-4"
name="playPauseVid"
......@@ -89,7 +93,7 @@ volume: {{ JSON.stringify(volume, null, 2) }} </code></pre>
Play/Pause
</button>
</div>
</MediaElementControl>
</MediaElementControl> -->
</section>
<!-- <section class="h-screen">
......@@ -124,6 +128,7 @@ import MediaElementControl from '~/components/MediaElementControl.vue'
import ArraySearch from '~/components/ArraySearch.vue'
import ArraySearchSlot from '~/components/docs/ArraySearchSlot.vue'
import ArrayReorder from '~/components/ArrayReorder'
import StateWatch from '~/components/StateWatch'
import BaleadaAutocomplete from '~/components/BaleadaAutocomplete.vue'
......@@ -136,6 +141,7 @@ export default {
components: {
// UserIdentify,
FunctionDelay,
StateWatch,
BaleadaAutocomplete,
RectangleGradient,
ElementsMutationObserve,
......@@ -164,6 +170,12 @@ export default {
// sortableOptions: {
// draggable: 'li'
// }
},
popover: '',
popoverPosition: 0,
completeOptions: {
segmentsFromDivider: true,
segmentsToPosition: true,
}
}
},
......@@ -189,10 +201,10 @@ export default {
}
},
watch: {
position () {
popoverPosition () {
this.input.focus()
this.$nextTick(() => {
const newPosition = /\s/.test(this.input.value[this.position]) ? this.position + 1 : this.position
const newPosition = /\s/.test(this.input.value[this.popoverPosition]) ? this.popoverPosition + 1 : this.popoverPosition
this.input.setSelectionRange(newPosition, newPosition)
})
}
......@@ -200,7 +212,7 @@ export default {
created () {
},
mounted () {
this.input = this.$el.querySelector('input')
this.input = this.$el.querySelector('textarea')
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment