An open API service indexing awesome lists of open source software.

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: about 1 month ago
JSON representation

Concrete5 VueJS Item List for ConcreteCMS v9

Awesome Lists containing this project

README

        

# ConcreteCMS VueJS Item List
[![Latest Version on Packagist](https://img.shields.io/packagist/v/xanweb/c5-v-item-list.svg?style=flat-square)](https://packagist.org/packages/xanweb/c5-v-item-list)
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](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).