headlesslaravel/craniums

@craniums/vue

Headless Laravel Vue components and mixins

Install

Within your resources/js/app.js file:

import Cranium from '@craniums/vue';

createApp({
    ...
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .use(Cranium) <---
    .mount(el);

add the following to your tailwind config content array:

'./node_modules/@craniums/vue/src/**/*.vue',

craniums's Issues

Range.vue require max > min

<Filter> component

Refactor v-query into a filter component so react friendly

Table: sort option

<Table :fields="['title', 'body']" :sort="['title']"/>

Makes the header cell clickable and toggles sort=title and sort-desc=title

Items: columns

kanban style https://dribbble.com/shots/17469750-Tasks-management

<Columns 
    :fields="fields"
    :values="values"
/>

Add click-away to seeker

Lets clear the input If you search something and then click outside of the search area / results

Pagination: load more mode

Currently Items/Table.vue and items/List.vue etc use pagination with page numbers. Lets add a pagination parameter to their mixin Items.js that allows paginate="more" which would pass to the Pagination.vue component and instead of showing page numbers.. it just axios requests the next link and appends the current result set instead of changing navigating.

Items: output prop

You can pass a template slot to override an output..

Would be cool to pass an object of functions to format outputs

:cells="['display']"
:output="{ 'display': formatFitment }"

Im thinking it probably should be in :cells or :fields also

[
    {
        key: 'display',
        output: this.functionName
    }
]

Fields: Flexible Content

https://github.com/whitecube/nova-flexible-content

Same results structure

Make autocomplete and seeker and any other result set from official apis default to display and value item displays so search results can be autocomplete also

filters with modifiers

already made just documenting

<component
    :is="field.component"
    v-bind="vModelProps"
/>

vModelProps = {
min: values.min,
'onUpdate:min': (value) => values.min = value,
max: values.max,
'onUpdate:max': (value) => values.max = value
}

Here vModelProps would be a computed created dynamically from the keys.

Pagination: option to limit number of displayed

In small spaces this is breaks down when a lot of options: Pagination.vue

Items: Map

Seeker: highlight results

<seeker highlight="underline bg-yellow-200 px-1 -mx-1" />

Pagination: simple mode

The default pagination is page number links.

Would be nice to just have [ < ] [ > ] buttos :paginate="simple"

Resize table columns

https://www.brainbell.com/javascript/download/demo-resizable.html

https://www.brainbell.com/javascript/making-resizable-table-js.html

Make props follow a pattern

form uses fields and values

table: cells => fields
detail: keys => fields
table: data => values

Items: Calendar

https://vcalendar.io/

Inspiration

• Chips
• Toggle Button
• Input Switch
• Multi Select
• Table row group
• Table context menu
• Table virtual scroll
• Table inline editing
• Table row expand
• Table tree
• Deferred loading
• File upload
• Preview Image
• Table pagination options
• Table column fixed
• Table header fixed
• Table column width

Repeater: make fields slots

Default should be Field 1 label and html inputs etc

<repeater
    name="things"
    :errors="errors"
    :fields="['field_1', 'field_2']"
    v-model="values.things"
/>

Then you can override a single field

<repeater
    name="things"
    :errors="errors"
    :fields="['field_1', 'field_2']"
    v-model="values.things"
>
    <template #field.field_1="{ value, error }">
        <input v-model="value" id="custom" />
    </template>

    <template #field.field_2.all="{ value, error }">
        <label>adding .all overrides the label and error message</label>
        <input v-model="value" id="custom" />
    </template>
</repeater>

or you can override the entire row

<repeater
    name="things"
    :errors="errors"
    :fields="['field_1', 'field_2']"
    v-model="values.things"
>
    <template #row="{ row, errors }">
        <input v-model="row.field_1"  />
        <input v-model="row.field_2"  />
    </template>
</repeater>