Этот модуль отвечает за финальный и встраиваемый редактор шаблона магазина

client -┐
        ├  main.js          - используется для создания рабочей версии магазина. должен получать настоящие товары и сообщать в `store.js`
        ├  embed_main.js    - используется для встраиваиния в редактор. должен получать примеры товаров \ либо только что добавленные товары
        └  structire.js     - шаблон магазина. содежит роуты, навигацию, компонент и данные для компонент. должен генерироваться при создании магазина

Связь между компонентами и основные действия преложения содержатся в store.js

components -┐
            └┬ store.js       - аналог event-bus, контейнер состояния и роутер. содержит в себе все роуты, активный роут, товары, полученные от `main.js` и все действия с товарами. методы и данные содержатся в миксинах
             ├ CartActions.js - примесь, содержащая все действия с товарами, все товары, полученные от `main.js`
             └ Router.js      - примесь, отвечающая за роутер, ресолвинг роутов. получает роуты от `main.js` через событие `new-appData` если параметр `useLocation = false`, то ресолвинг роутов не сказывется на uri и истории браузера

лучше не использовать в конфиге webpack для этого модуля алиасы кроме components, для удобства встраивания

структура appData (structire.js):

{
    nav: RouteComponent,
    footer: RouteComponent,
    routes: Routes
}

nav и footer не обязательные свойства. Суть - навигация и футер которые будут применяться по стандарту у всех роутов

структура RouteComponent:

{
    component: VueComponent,
    props: {
        header: 'Lorem ipsum',
        description: "Consectetur adipisicing elit, sed",
        iclass: componentClass,
        childrens: [
            {
                caption: 'To products',
                to: '/products'
            },
        ],
        ...customProps
    },
},

структура Routes:

{
    name: routeName,
    title: routeTitle,
    path: '/path/with/:param1/:param-2',
    nav: RouteComponent,
    footer: RouteComponent,
    layout: [
        RouteComponent,
        RouteComponent,
        RouteComponent,
        ...
    ]
},
...

nav и footer не обязательные свойства. Суть - навигация и футер которые будут применяться на данной странице вместо стандартных

Компоненты

Все подключаемые компоненты должны находиться в папке соответсующей темы и должны быть доступны для импорта из index.js этой темы

Стили всех компонент должны быть описанны так, чтобы их можно было переиспользовать независимо Все цвета в стилях компонент должны быть обьявлены как переменные --color, для того чтобы их потом можно было корректно стилизовать

Во всех компонентах должен иметь свойство type. Это необходимо для определения разрешенных для редактирования действий

При создании новой компоненты с уникальным типом необходимо описать ее исходные значения полей, уникальные \ уникально-редактируемые поля в components/ComponentTypesDescription.js, иначе все поля будут заполнятся и редактироваться как это предусматривает ComponentTypesDescription.default. Описание выглядит как

    typeName: {
        defaults: {
            fieldName: fieldDefaultValue,
        },
        editors: {
            fieldName: fieldEditor,
        }
    }

fieldEditor - это всегда системная компонента, путь до которой может получить components/ComponentTypesDescription.js. fieldEditor должен поддерживать v-model

Если тип обладает полем, стандартное значение или логика которого отличается от описанного в default - необходимо указать его стандатное значение в defaults и соответвующий редактор в editors. Если поле не используется то нужно указать его стандартное значение и редактор как undefined.

Для получаения описания типа есть метод ComponentTypesDescription.getTypeDescription принимающий аргументом имя типа.

Для создания рекурсивных компонент необходимо включить в компоненту структуру:

    ...
        <div data-container="1">
            <router-component :data="c" v-for="c, $i in layout" v-if="layout && layout.length" :key="$i" :data-index="$i"/>
            ...
        </div>
    ...

т.е. <router-component/> должен всегда находиться внутри элемента с аттрибутом data-container="1". это необходимо для того, чтобы редактор мог распознать область встраивания