https://github.com/xanweb/c5-v-item-list
Concrete5 VueJS Item List for ConcreteCMS v9
https://github.com/xanweb/c5-v-item-list
Last synced: 30 days ago
JSON representation
Concrete5 VueJS Item List for ConcreteCMS v9
- Host: GitHub
- URL: https://github.com/xanweb/c5-v-item-list
- Owner: Xanweb
- License: mit
- Created: 2020-09-04T09:18:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-04T12:50:53.000Z (almost 3 years ago)
- Last Synced: 2025-05-15T04:09:49.379Z (30 days ago)
- Language: Vue
- Homepage:
- Size: 486 KB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ConcreteCMS VueJS Item List
[](https://packagist.org/packages/xanweb/c5-v-item-list)
[](LICENSE)
Manage your list of items easily without need to write a bunch of code
** Requires ConcreteCMS v9 **
## Installation
Include library to your composer.json
```bash
composer require xanweb/c5-v-item-list
```
Add the service provider to `application/config/app.php`
```php
return [
'providers' => [
'xw_item_list' => '\Xanweb\C5\VueItemList\ServiceProvider'
],
];
```
or load it from you package on_start
```php
public function on_start()
{
$this->app->make(\Concrete\Core\Foundation\Service\ProviderList::class)->registerProvider(\Xanweb\C5\VueItemList\ServiceProvider::class);
}
```
## Usage
1. Load optional assets depending on your needs:
* Editor Assets (`$this->app['editor']->requireEditorAssets();`) if you need to use RichText Editor
2. Load required Item List Asset Group (`xanweb/v-item-list`)
3. Use Item List VueJS components:
Here is an example
```vue
= t('Add Slide') ?>
= t('Edit') ?>
= t('Remove') ?>
= $form->label('', t('Title')) ?>
= $form->text($view->field('title') . '[]', ['id' => '', 'v-model' => 'item.title', 'maxlength' => 255]) ?>
= $form->label('', t('Title Color')) ?>
= $form->label('', t('Overlay Color')) ?>
= $form->label('', t('Description')) ?>
= $form->label('', t('Box Color')) ?>
= $form->label('', t('Link Type')) ?>
= $form->select($view->field('linkType') . '[]', $linkTypes, ['id' => '', 'v-model' => 'item.linkType', 'data-choice' => 'link-type', 'class' => 'bs-select']) ?>
= $form->label('', t('Page')) ?>
= $form->label('', t('URL')) ?>
= $form->url($view->field('linkExtern') . '[]', ['id' => '', 'v-model' => 'item.linkExtern', 'maxlength' => 255]) ?>
```
5. Finally, we need to initialize our Vue app
```javascript
Concrete.Vue.activateContext('itemList', function (Vue, config){
new Vue({
el: '#app',
components: config.components,
mounted() {
$(this.$el).find('.bs-select').selectpicker()
},
methods: {
onAddItem($item) {
$item.find('.bs-select').selectpicker()
}
},
data: {
drag: false,
items: <?= json_encode($rows, JSON_NUMERIC_CHECK) ?>,
colorPickerOptions: <?= json_encode($colorPickerOptions, JSON_NUMERIC_CHECK) ?>,
useCustomThumbnailsSettings: <?= json_encode($useCustomThumbnailsSetting, JSON_NUMERIC_CHECK) ?>,
defaultItem: {
get id() {
return _.uniqueId('item')
},
title: '',
fID: null,
description: '',
boxColor: 'rgba(0, 0, 0, 0.6)',
linkType: <?= json_encode(array_key_first($linkTypes)) ?>,
internalLinkCID: 0,
linkExtern: ''
}
},
computed: {
dragOptions() {
return {
animation: 200,
group: 'description',
disabled: false,
ghostClass: 'ghost'
};
}
}
})
});
```
## License
The ConcreteCMS Item List is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).