@lilaquadrat/cli 0.9.8 → 0.10.0

package/source/design/server/app-server.ts

@@ -0,0 +1,50 @@
+import Vue from 'vue';
+
+import APPComponent from '@partials/appcomponent.partial.vue';
+import store from 'src/store/main.store';
+
+import '@libs/Models.class';
+import '../models';
+
+import 'src/mixins/leadingZero';
+import 'src/mixins/toFixed';
+import 'src/mixins/moment';
+import 'src/mixins/formatBytes';
+
+import translation from 'src/mixins/translation';
+
+import loadComponents from 'src/mixins/loadComponents';
+import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import MainStoreState from '@store/mainStoreState.interface';
+import { routes } from 'src/routes';
+import DE from '../translations/de';
+
+translation.select('de');
+translation.add(DE, 'de');
+
+Vue.use(VueRouter);
+
+export default function createApp(): {app: Vue, router: VueRouter, store: Store<MainStoreState>} {
+
+  const router = new VueRouter({
+    routes,
+    mode: 'history',
+  });
+  const app = new Vue({
+    router,
+    store,
+    render: (h) => h(APPComponent),
+  });
+
+  /**
+   * let webpack preload modules and partials
+  */
+  loadComponents.sync(require.context('../../../../src/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'sync'), 'partials', 'lila');
+  loadComponents.sync(require.context('../../../../src/modules', true, /[a-z]\w+\.module\.(ts|vue)$/, 'sync'), 'modules', 'lila');
+
+  Vue.prototype.$enviroment = 'browser';
+
+  return { app, router, store };
+
+}

package/source/design/server/server-entry.ts

@@ -0,0 +1,53 @@
+import { RenderContext } from '@lilaquadrat/studio/lib/interfaces';
+import MainStoreState from '@store/mainStoreState.interface';
+import createApp from './app-server';
+
+export default (context: RenderContext & {rendered: () => void, state: MainStoreState}) => new Promise((resolve, reject) => {
+
+  const { app, router, store } = createApp();
+
+  router.push(context.url)
+    .catch((e) => {
+
+      console.error('ROUTE PUSH ERROR', e);
+
+    });
+
+  store.commit('setSettings', context.settings);
+  store.commit('setData', context.data);
+  store.commit('layout', context.layout);
+  store.commit('setTranslation', context.translation);
+  store.commit('setMedia', 'mobile');
+  store.commit('setFullscreen', true);
+  store.commit('renderTarget', context.renderTarget || 'web');
+  store.commit('init');
+
+  router.onReady(
+    () => {
+
+      const matchedComponents = router.getMatchedComponents();
+
+      if (!matchedComponents.length) {
+
+        return reject(new Error('ROUTE_NOT_FOUND'));
+
+      }
+
+      context.rendered = () => {
+
+        context.state = store.state;
+
+      };
+
+      return resolve(app);
+
+    },
+    reject,
+  );
+
+})
+  .catch((e) => {
+
+    console.error(e);
+
+  });

package/source/{project → design}/source/less/variables.less

@@ -1,37 +1,48 @@
+/* stylelint-disable at-rule-empty-line-before */
 @imageBase : '/img/';
 
-@smartphone :~"only screen and (max-width: 599px)";
-@tablet :~"only screen and (min-width: 600px) and (max-width: 899px)";
-@desktop :~"only screen and (min-width: 900px)";
-@desktopExt :~"only screen and (min-width: 1000px)";
-@wide :~"only screen and (min-width: 1200px)";
+@smartphone :~"only screen and (max-width: 599px), print and (max-width: 599px)";
+
+@tablet :~"only screen and (min-width: 600px) and (max-width: 899px), print and (min-width: 600px) and (max-width: 899px)";
+
+@desktop :~"only screen and (min-width: 900px), print and (min-width: 900px)";
+
+@desktopExt :~"only screen and (min-width: 1000px), print and (min-width: 1000px)";
+
+@wide :~"only screen and (min-width: 1200px), print and (min-width: 1200px)";
 
 @desktopWidth : 650px;
-@desktopWidthExt: 1080px; //grid
+@desktopWidthExt: 1080px;
 @desktopWidthWide: 1200px;
 
 @column : percentage((100 / 24)) / 100;
-@margin : percentage((100 / 24)) / 100; //margin
 
-@fontTextMenu : 2.8em;
+@margin : percentage((100 / 24)) / 100;
+
+@fontTextMenu: 2.8em;
 
 @fontText : 14.5px;
 @fontTextSmaller: 13px;
 @fontSmall: 10px;
 
 @headline_XL : 45px;
+
 @headlineLineHeight_XL : 47px;
 
 @headline_L : 34px;
+
 @headlineLineHeight_L : 36px;
 
 @headline_M : 28px;
+
 @headlineLineHeight_M : 30px;
 
 @headline_S : 22px;
+
 @headlineLineHeight_S : 24px;
 
 @headline_XS : 16px;
+
 @headlineLineHeight_XS : 18px;
 
 @buttonHeight : 35px;
@@ -45,6 +56,7 @@
 @moduleWidth_Full: 100%;
 
 @modulePadding: 40px;
+@modulePaddingExt: 40px;
 
 @rowGapPresentation: 150px;
 @rowGapContent: 50px;
@@ -52,29 +64,34 @@
 @fontBase : '../fonts/';
 
 //@deprecated
-@aTime : .3s;
+@aTime: .3s;
+
 @animationTime : .3s;
 
 @aTimeMedium : .6s;
 @animationTimeMedium: .6s;
 
 @aTimeSlow : 1s;
+
 @animationTimeSlow : 1s;
 
 @aType : ease;
+
 @animationType : ease;
 
 //colors
-@textColor : #555;
+@textColor: #555;
 
 @black : #000000;
-
 @white : #FFFFFF;
 
 @grey : #CCCCCC;
 @grey1 : #F6F6F6;
 @grey2 : #F9F9F9;
 @grey3 : #fcfcfc;
+
+@shadow: rgba(0, 0, 0, .130);
+
 @bg : #F6F6F6;
 
 @link : #5A8C99;

package/source/design/translations/de.ts

@@ -0,0 +1,65 @@
+export default {
+  required: 'erforderlich',
+  'contact-agreements': 'Vereinbarungen',
+  'validation-error-type-number': 'muss eine Zahl sein',
+  'validation-error-type-string': 'muss Text sein',
+  'validation-error-minLength': 'muss mindestens %s Zeichen lang sein',
+  'validation-error-maxLength': 'darf maximal %s Zeichen lang sein',
+  'validation-error-additionalProperties': 'Das zusätzliche Attribut "%s" ist nicht erlaubt',
+  'validation-error-maxItems': 'darf maximal %s Elemente besitzen',
+  'validation-error-minItems': 'muss mindestens %s Elemente besitzen',
+  'validation-error-contains': 'muss mindestens %s valide(s) Element(e) besitzen',
+  'validation-error-required': 'muss gesetzt sein',
+  'validation-error-accepted': 'Vereinbarungen müssen akzeptiert werden',
+  city: 'Stadt',
+  zipcode: 'Postleitzahl',
+  'street & number': 'Straße & Hausnummer',
+  prename: 'Vorname',
+  name: 'Name',
+  country: 'Land',
+  email: 'E-Mail',
+  phone: 'Telefon',
+  personal: 'Persönliche Daten',
+  address: 'Adresse',
+  contact: 'Kontakt',
+  price_with_tax: 'inkl. %s% MwSt.',
+  'show content': 'Inhalt anzeigen',
+  'select category': 'Kategorie auswählen',
+  category: 'Kategorie',
+  message: 'Nachricht',
+  'send contactform': 'Kontaktformular senden',
+  'send reservation': 'Reservierung senden',
+  'order with payment': 'Zahlungspflichtig bestellen',
+  'back to the form': 'Zurück zum Formular',
+  'not available': 'nicht verfügbar',
+  'no charge': 'kostenlos',
+  'address addition': 'Adresszusatz',
+  'address search': 'Adresssuche',
+  'no matching addresses': 'Keine passende Adresse gefunden',
+  'provide at least your street and housenumber to find your address. city and zipcode increase accuracy.': 'Bitte geben Sie mindestens Ihre Straße und Hausnummer an, um Ihre Adresse zu finden. Stadt und Postleitzahl erhöhen die Genauigkeit.',
+  'type your street and number': 'Strasse und Hausnummer',
+  'validation-error-LIST_CANNOT_JOIN': 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'validation-error-LIST_NOT_FOUND': 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'validation-error-LIST_NO_SPOT_AVAILABLE': 'Es ist keine weiteren Plätze verfügbar.',
+  'validation-error-LIST_UNIQUE_CUSTOMER_CONFIRMED': 'Die maximale Anzahl wurde erreicht.',
+  LIST_CANNOT_JOIN_reservation: 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  LIST_UNIQUE_CUSTOMER_CONFIRMED_reservation: 'Sie sind bereits für eine Reservierung vorgemerkt.',
+  LIST_NOT_FOUND_reservation: 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  LIST_NO_SPOT_AVAILABLE_reservation: 'Leider sind keine Plätze mehr verfügbar.',
+  LIST_CANNOT_JOIN_contact: 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  LIST_UNIQUE_CUSTOMER_CONFIRMED_contact: 'Sie haben bereits die maximale Anzahl an Nachrichten gesendet.',
+  LIST_NOT_FOUND_contact: 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  LIST_NO_SPOT_AVAILABLE_contact: 'Die maximale Anzahl an Nachrichten wurde erreicht.',
+  LIST_CATEGORY_LIMITED_AVAILABILITY_SINGULAR: 'Nur einmalig verfügbar',
+  LIST_CATEGORY_LIMITED_AVAILABILITY_PLURAL: 'Limitiert auf %s Plätze.',
+  LIST_CATEGORY_LIMITED_AVAILABILITY: 'Limitiert auf %s Plätze.',
+  LIST_LIMITED_AVAILABILITY_SINGULAR: 'Für diese Veranstaltung ist maximal ein Plätze verfügbar.',
+  LIST_LIMITED_AVAILABILITY_PLURAL: 'Für diese Veranstaltung sind maximal %s Plätze verfügbar.',
+  LIST_LIMITED_AVAILABILITY_STATE: 'Für diese Veranstaltung sind noch %s von %s Plätze verfügbar.',
+  LIST_CATEGORY_LAST_CHANCE_PERCENT: 'Mehr als %s% gebucht',
+  LIST_CATEGORY_LAST_CHANCE_SINGULAR: 'Nur noch %s Platz verfügbar',
+  LIST_CATEGORY_LAST_CHANCE_PLURAL: 'Nur noch %s Plätze verfügbar',
+  LIST_CATEGORY_SOLD_OUT: 'AUSVERKAUFT',
+  LIST_SOLD_OUT: 'Es sind keine weiteren Plätze verfügbar',
+  euro: '€',
+};

package/source/{project/app.ts → designFiles/app.ts.hbs}

@@ -14,22 +14,33 @@ import translation from 'src/mixins/translation';
 
 import APPComponent from '@partials/appcomponent.partial.vue';
 
+import '@libs/Models.class';
+import './models';
+
 import store from 'src/store/main.store';
 import log from 'loglevel';
 import mount from 'src/mixins/mount';
 import router from 'src/mixins/router';
 import ssr from 'src/mixins/ssr';
+import Components from '@libs/Components';
 
 /**
  *  defines the css that will be used
  */
-import './source/less/base.less';
+import 'projects/{{projectCompany}}/{{projectProject}}/source/less/base.less?main';
 import { editorRoutes, routes } from 'src/routes';
+import PortalVue from 'portal-vue';
+
+import DE from './translations/de';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const modules = require('./modules');
 
 translation.select('de');
+translation.add(DE, 'de');
 
-// eslint-disable-next-line prefer-destructuring
-const currentScript: any = document.currentScript;
+
+const currentScript = document.currentScript as HTMLScriptElement;
 
 if (currentScript) {
 
@@ -41,6 +52,7 @@ if (currentScript) {
 
 }
 
+const ISLOCAL = window.location.toString().match(/(:9001|:9000)/i);
 const ENVIRONMENT = window.location.toString().match(/(editor|dist|:9001|:9000)(\/(index\.html))?/i) ? 'editor' : 'live';
 const usedRoutes = ENVIRONMENT === 'editor' ? editorRoutes : routes;
 
@@ -50,11 +62,12 @@ ENVIRONMENT === 'editor'
   : log.setLevel('warn');
 
 Vue.use(VueRouter);
+Vue.use(PortalVue);
 
 /** APP Object for vuejs initialization */
-const appObject: any = {
+const appObject: Record<string, unknown> = {
 
-  render: (h: any) => h(APPComponent),
+  render: (h) => h(APPComponent),
 
   created: () => {
 
@@ -77,11 +90,41 @@ window.addEventListener('media', () => {
 });
 
 store.commit('setMedia', Resize.media);
+
+if (ISLOCAL) {
+
+  store.commit('setApi', {
+    mode: 'custom',
+    customEndpoints: {
+      api: 'http://localhost:9090',
+      media: 'http://localhost:9091',
+    },
+    company: process.env.company,
+    project: process.env.project,
+  });
+
+
+} else {
+
+  store.commit('setApi', {
+    mode: process.env.apiMode,
+    company: process.env.company,
+    project: process.env.project,
+  });
+
+
+}
+
 /**
  * let webpack preload modules and partials
 */
-loadComponents.lazy(require.context('../../../src/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'lazy'), 'partials');
-loadComponents.lazy(require.context('../../../src/modules', true, /[a-z]\w+\.module\.(ts|vue)$/, 'lazy'), 'modules');
+
+Components.add(modules, 'module', 'lila');
+
+store.commit('setAvailableModules', Components.getAvailableModules(modules));
+
+loadComponents.lazy(require.context('../../../src/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'lazy'), 'partials', 'lila');
+
 
 log.info(`%c[DESIGN]%cRUNNING IN ${ENVIRONMENT} MODE`, 'background: #3f2d56; color: #CCC;', 'padding: 10px');
 
@@ -113,6 +156,14 @@ if (ENVIRONMENT === 'editor') {
 if (ENVIRONMENT === 'live') {
 
   ssr(store);
+
+  // set the api after the inital store load
+  store.commit('setApi', {
+    mode: process.env.apiMode,
+    company: process.env.company,
+    project: process.env.project,
+  });
+
   mount(appObject);
 
 }

package/source/{projectFiles → designFiles}/main.js.hbs

@@ -1,3 +1,4 @@
+const modules = require('../modules.ts');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const path = require('path');
 
@@ -14,6 +15,11 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
+  env: (config) => ({
+    ...config,
+    MODULES: modules,
+  }),
+  staticDirs: ['../../../../src/source/storybook'],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -48,7 +54,7 @@ module.exports = {
       ],
     });
 
-    config.module.rules.push({
+    config.module.rules.push({lilaquadrat
         test: /\.ts$/,
 				use: [
 					{
@@ -77,4 +83,8 @@ module.exports = {
     // Return the altered config
     return config;
   },
+  framework: {
+    name: "@storybook/vue-webpack5",
+    options: {}
+  },
 }

package/source/{projectFiles → designFiles}/preview.js.hbs

@@ -8,6 +8,8 @@ import loadComponents from '@mixins/loadComponents';
 import Resize from '@libs/lila-resize';
 import Inview from '@libs/lila-inview';
 
+import '@libs/Models.class';
+import '/projects/{{projectCompany}}/{{projectProject}}/models';
 
 import Attributes from '@mixins/attributes';
 import '@mixins/leadingZero';
@@ -33,8 +35,46 @@ Vue.component(
 /**
  * let webpack preload modules and partials
 */
-loadComponents.lazy(require.context('/src/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'lazy'), 'partials');
-loadComponents.lazy(require.context('/src/modules', true, /[a-z]\w+\.module\.(ts|vue)$/, 'lazy'), 'modules');
+loadComponents.lazy(require.context('/src/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'lazy'), 'partials', 'lila');
+loadComponents.lazy(require.context('/src/modules', true, /[a-z]\w+\.module\.(ts|vue)$/, 'lazy'), 'modules', 'lila');
+
+/**
+ * load custom modules and partials
+*/
+try {
+
+  loadComponents.lazy(
+    require.context('/projects/{{projectCompany}}/{{projectProject}}/partials', true, /[a-z]\w+\.partial\.(ts|vue)$/, 'lazy'), 
+    'partials',
+    'lila',
+    '{{projectCompany}}',
+    '{{projectProject}}'
+  );
+
+} catch (error) {
+
+  console.error('you are trying to load custom partials, the folder does not exists.');
+
+}
+
+try {
+
+  loadComponents.lazy(
+    require.context('/projects/{{projectCompany}}/{{projectProject}}/modules', true, /[a-z]\w+\.module\.(ts|vue)$/, 'lazy'), 
+    'modules',
+    'lila',
+    '{{projectCompany}}',
+    '{{projectProject}}'
+  );
+
+} catch (error) {
+  
+  console.error('you are trying to load custom modules, the folder does not exists.');
+
+}
+
+
+
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },