Skip to content

Commit

Permalink
fix: created a helper function to handle component reactivity (#183)
Browse files Browse the repository at this point in the history 
- chore: created helper function for `shallowFields`
> - This helper function shallowRefs components that are being passed in a reactive state.
- fix: implemented `shallowFields` for all `Buefy` page components
> - Fixes: #168
  • Loading branch information
Wesley Ford authored Jan 26, 2024
1 parent 7fddd5a commit 2f266cf
Show file tree
Hide file tree
Showing 43 changed files with 389 additions and 254 deletions.
25 changes: 14 additions & 11 deletions packages/docs/src/pages/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</div>
<p>You can show options by groups</p>
</Example>

<Example :component="ExKeepFirst" :code="ExKeepFirstCode" title="Keep First">
<div class="tags has-addons">
<span class="tag is-success">Since</span>
Expand All @@ -33,7 +33,7 @@
<p>Additionally, use <code>select-on-click-outside</code> to automatically select the first element when clicking outside of
the <code>input</code> element.</p>
</Example>

<Example :component="ExCustomAsync" :code="ExCustomAsyncCode" title="Async with custom template">
<p>You can have a custom template by adding a scoped slot to it.</p>
<p><small>API from <a href="https://www.themoviedb.org" target="_blank">TMDb</a></small>.</p>
Expand All @@ -52,6 +52,7 @@
<script>
import api from './api/autocomplete'
import variables from './variables/autocomplete'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -73,7 +74,7 @@
import ExInfiniteScroll from './examples/ExInfiniteScroll'
import ExInfiniteScrollCode from './examples/ExInfiniteScroll.vue?raw'
import ExKeepFirst from './examples/ExKeepFirst'
import ExKeepFirstCode from './examples/ExKeepFirst.vue?raw'
Expand All @@ -82,21 +83,23 @@
return {
api,
variables,
ExSimple,
...shallowFields({
ExSimple,
ExObjArray,
ExHeader,
ExFooter,
ExCustomAsync,
ExInfiniteScroll,
ExGroups,
ExKeepFirst
}),
ExSimpleCode,
ExObjArrayCode,
ExObjArray,
ExHeader,
ExHeaderCode,
ExFooter,
ExFooterCode,
ExCustomAsyncCode,
ExCustomAsync,
ExInfiniteScroll,
ExInfiniteScrollCode,
ExGroups,
ExGroupsCode,
ExKeepFirst,
ExKeepFirstCode
}
}
Expand Down
15 changes: 9 additions & 6 deletions packages/docs/src/pages/components/breadcrumb/Breadcrumb.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<Example :component="ExAlignments" :code="ExAlignmentsCode" title="Alignments"/>

<Example :component="ExSeparators" :code="ExSeparatorsCode" title="Separators"/>

<Example :component="ExSizes" :code="ExSizesCode" title="Sizes"/>

<ApiView :data="api"/>
Expand All @@ -14,6 +14,7 @@
<script>
import api from './api/breadcrumb'
import variables from './variables/breadcrumb'
import { shallowFields } from '@/utils'
import ExAlignments from './examples/ExAlignments'
import ExAlignmentsCode from './examples/ExAlignments.vue?raw'
Expand All @@ -25,18 +26,20 @@
import ExSizesCode from './examples/ExSizes.vue?raw'
export default {
name: 'Breadcrumb',
data () {
return {
api,
variables,
ExAlignments,
...shallowFields({
ExAlignments,
ExSeparators,
ExSizes
}),
ExAlignmentsCode,
ExSeparators,
ExSeparatorsCode,
ExSizes,
ExSizesCode,
}
}
Expand Down
15 changes: 9 additions & 6 deletions packages/docs/src/pages/components/button/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<script>
import api from './api/button'
import variables from './variables/button'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -49,12 +50,14 @@
return {
api,
variables,
ExSimple,
ExTypesStates,
ExIcons,
ExSizes,
ExTags,
ExRouter,
...shallowFields({
ExSimple,
ExTypesStates,
ExIcons,
ExSizes,
ExTags,
ExRouter
}),
ExSimpleCode,
ExTypesStatesCode,
ExIconsCode,
Expand Down
23 changes: 13 additions & 10 deletions packages/docs/src/pages/components/carousel/Carousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
<script>
import api from './api/carousel'
import variables from './variables/carousel'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExFull from './examples/ExFull'
Expand Down Expand Up @@ -79,16 +80,18 @@
return {
api,
variables,
ExSimple,
ExFull,
ExArrow,
ExIndicator,
ExProgress,
ExCustomIndicator,
ExGallery,
ExCarouselList,
ExWithCard,
ExWithList,
...shallowFields({
ExSimple,
ExFull,
ExArrow,
ExIndicator,
ExProgress,
ExCustomIndicator,
ExGallery,
ExCarouselList,
ExWithCard,
ExWithList
}),
ExSimpleCode,
ExFullCode,
ExArrowCode,
Expand Down
13 changes: 8 additions & 5 deletions packages/docs/src/pages/components/checkbox/Checkbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<script>
import api from './api/checkbox'
import variables from './variables/checkbox'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -43,15 +44,17 @@
return {
api,
variables,
ExSimple,
...shallowFields({
ExSimple,
ExArray,
ExSizes,
ExTypes,
ExCheckboxButton
}),
ExSimpleCode,
ExArray,
ExArrayCode,
ExSizes,
ExSizesCode,
ExTypes,
ExTypesCode,
ExCheckboxButton,
ExCheckboxButtonCode
}
}
Expand Down
15 changes: 9 additions & 6 deletions packages/docs/src/pages/components/clockpicker/Clockpicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<Example :component="ExColors" :code="ExColorsCode" title="Colors" vertical>
<p>
Clockpicker supports all <code>is-&lt;color&gt;</code> classes from Bulma, including custom colors added at build time.
This can be specified in the <code>class</code> property or in the <code>type</code> property.
This can be specified in the <code>class</code> property or in the <code>type</code> property.
Inline display is also availble by specifying the <code>inline</code> prop.
</p>
</Example>
Expand All @@ -28,6 +28,7 @@

<script>
import api from './api/clockpicker'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -48,15 +49,17 @@
data() {
return {
api,
ExSimple,
...shallowFields({
ExSimple,
ExNonReadonly,
ExRange,
ExFooter,
ExColors
}),
ExSimpleCode,
ExNonReadonly,
ExNonReadonlyCode,
ExRange,
ExRangeCode,
ExFooter,
ExFooterCode,
ExColors,
ExColorsCode
}
}
Expand Down
13 changes: 8 additions & 5 deletions packages/docs/src/pages/components/collapse/Collapse.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

<script>
import api from './api/collapse'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -36,15 +37,17 @@
data() {
return {
api,
ExSimple,
...shallowFields({
ExSimple,
ExPanelTemplate,
ExCardTemplate,
ExPosition,
ExAccordion
}),
ExSimpleCode,
ExPanelTemplate,
ExPanelTemplateCode,
ExCardTemplate,
ExCardTemplateCode,
ExPosition,
ExPositionCode,
ExAccordion,
ExAccordionCode
}
}
Expand Down
14 changes: 8 additions & 6 deletions packages/docs/src/pages/components/colorpicker/Colorpicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<script>
import api from './api/colorpicker'
import variables from './variables/colorpicker'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -39,16 +40,17 @@
return {
api,
variables,
ExSimple,
...shallowFields({
ExSimple,
ExAlpha,
ExRepresentation,
ExFormatter,
ExFields
}),
ExSimpleCode,
ExAlpha,
ExAlphaCode,
ExRepresentation,
ExRepresentationCode,
ExFormatter,
ExFormatterCode,
ExFields,
ExFieldsCode
}
}
Expand Down
29 changes: 16 additions & 13 deletions packages/docs/src/pages/components/datepicker/Datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
<script>
import api from './api/datepicker'
import variables from './variables/datepicker'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand Down Expand Up @@ -133,31 +134,33 @@
return {
api,
variables,
ExSimple,
...shallowFields({
ExSimple,
ExEditable,
ExRange,
ExFooter,
ExHeader,
ExProgrammatically,
ExTrigger,
ExInline,
ExUnselectable,
ExEvents,
ExMonth,
ExRangeInput,
ExMultipleInput,
}),
ExSimpleCode,
ExEditable,
ExEditableCode,
ExRange,
ExRangeCode,
ExFooter,
ExFooterCode,
ExHeader,
ExHeaderCode,
ExProgrammatically,
ExProgrammaticallyCode,
ExTrigger,
ExTriggerCode,
ExInline,
ExInlineCode,
ExUnselectable,
ExUnselectableCode,
ExEvents,
ExEventsCode,
ExMonth,
ExMonthCode,
ExRangeInput,
ExRangeInputCode,
ExMultipleInput,
ExMultipleInputCode
}
}
Expand Down
15 changes: 9 additions & 6 deletions packages/docs/src/pages/components/datetimepicker/Datetimepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@

<script>
import api from './api/datetimepicker'
import { shallowFields } from '@/utils'
import ExSimple from './examples/ExSimple'
import ExSimpleCode from './examples/ExSimple.vue?raw'
Expand All @@ -51,12 +52,14 @@
data() {
return {
api,
ExSimple,
ExEditable,
ExRange,
ExFooter,
ExInline,
ExGranularity,
...shallowFields({
ExSimple,
ExEditable,
ExRange,
ExFooter,
ExInline,
ExGranularity,
}),
ExSimpleCode,
ExEditableCode,
ExRangeCode,
Expand Down
Loading

0 comments on commit 2f266cf

Please sign in to comment.