@ozdao/prometheus-framework 0.2.156 → 0.2.157

package/src/builder/webpack/webpack.config.base.js

@@ -0,0 +1,127 @@
+const path = require("path");
+const webpack = require("webpack");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const Dotenv = require('dotenv-webpack');
+
+module.exports = (projectRoot) => {
+  return {
+    resolve: {
+      alias: {
+        '@': path.resolve(projectRoot, 'src'),
+        '@pf': path.resolve(projectRoot, 'prometheus-framework'),
+        'vue': path.resolve(projectRoot, 'node_modules/vue'),
+        'vue-router': path.resolve(projectRoot, 'node_modules/vue-router'),
+        'vue-i18n': path.resolve(projectRoot, 'node_modules/vue-i18n'),
+      },
+      fallback: { 
+        "path": false 
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.m?js$/,
+          exclude: /node_modules\/(?!(vue-meta)\/).*/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              configFile: path.resolve(projectRoot, 'babel.config.js')
+            },
+          },
+        },
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: require.resolve('vue-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            process.env.NODE_ENV !== 'production'
+              ? 'vue-style-loader'
+              : MiniCssExtractPlugin.loader,  
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
+                url: {
+                  filter: (url, resourcePath) => {
+                    if (url.indexOf("/fonts/")==0) {
+                      return false;
+                    }
+                    return true;
+                  },
+                }
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true, 
+              }
+            },
+          ],
+        },
+        {
+          test: /\.(?:ico|gif|png|jpg|jpeg|mp4|webp|webm|svg|woff2?|eot|ttf|otf)$/i,
+          use:  {
+            loader: 'url-loader',
+            options: {
+              emitFile: false
+            },
+          },
+        }
+      ],
+    },
+    plugins: [
+      // new BundleAnalyzerPlugin(),
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash].css',
+        chunkFilename: '[id].[contenthash].css',
+        ignoreOrder: true
+      }),
+      new CleanWebpackPlugin(),
+      new VueLoaderPlugin(),
+      new Dotenv({
+        path: `.env.${process.env.NODE_ENV}`
+      }),
+      new webpack.DefinePlugin({
+        __VUE_I18N_LEGACY_API__:false,
+        __VUE_OPTIONS_API__:true,
+        __VUE_PROD_DEVTOOLS_:false,
+        __VUE_PROD_DEVTOOLS__: true,
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+        __VUE_I18N_FULL_INSTALL__:true,
+        __INTLIFY_PROD_DEVTOOLS__:false,
+        __MOBILE_APP__: false,
+      })
+    ],
+    infrastructureLogging: {
+      level: 'verbose',
+    },
+    stats: {
+      colors: true,
+      hash: true,
+      version: true,
+      timings: true,
+      assets: true,
+      chunks: true,
+      modules: true, 
+      reasons: true,
+      children: true,
+      source: true, 
+      errors: true, 
+      errorDetails: true, 
+      errorStack: true,
+      warnings: true,
+      publicPath: true
+    },
+  };
+};

package/src/builder/webpack/webpack.config.client.js

@@ -0,0 +1,78 @@
+const path = require("path");
+const glob = require('glob-all');
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const PurgeCSSPlugin = require('purgecss-webpack-plugin');
+
+const baseConfig = require('./webpack.config.base');
+
+module.exports = (projectRoot) => {
+  const isProd = process.env.NODE_ENV === "production";
+
+  const config = {
+    mode: !isProd ? "development" : "production",
+    devtool: !isProd ? "inline-source-map" : "source-map",
+    entry: {
+      main: !isProd
+        ? [path.resolve("../utils/hot-reload.js"), path.resolve(projectRoot, "src/entry-client.js")]
+        : path.resolve(projectRoot, "src/entry-client.js"),
+    },
+    module: {
+      rules: [],
+    },
+    output: {
+      filename: "main.[fullhash].js",
+      chunkFilename: '[name].[contenthash].js',
+      path: path.resolve(projectRoot, "builds/web/client"),
+      publicPath: "/",
+      clean: true
+    },
+    plugins: [
+      ...(!isProd ? [new webpack.HotModuleReplacementPlugin()] : []),
+      new StatsWriterPlugin(),
+      new WorkboxPlugin.GenerateSW({
+         clientsClaim: true,
+         skipWaiting: true,
+       }),
+      new PurgeCSSPlugin({
+        paths: glob.sync([
+          path.join(projectRoot, 'src/**/*.vue'),
+          path.join(projectRoot, 'prometheus-framework/src/**/*.vue'),
+        ]),
+        safelist: { greedy: [ /data-v-.*/ ] }
+      }),
+    ],
+    optimization: {
+      usedExports: true,  
+      splitChunks: {
+        chunks: "async",
+        minSize: 0,
+        minRemainingSize: 0,
+        minChunks: 1,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        enforceSizeThreshold: 50000,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "vendors",
+            priority: -10,
+            reuseExistingChunk: true,
+          },
+        },
+      },
+      minimize: isProd,
+      minimizer: [
+        new TerserPlugin(), 
+        new CssMinimizerPlugin()
+      ],
+    },
+  };
+
+  return merge(baseConfig(projectRoot), config);
+};

package/src/builder/webpack/webpack.config.server.js

@@ -0,0 +1,31 @@
+const path = require("path");
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = (projectRoot) => {
+  return {
+    target: 'node',
+    mode: "development",
+    entry: [
+      'webpack/hot/poll?1000', 
+      path.resolve(projectRoot, 'server/server.js')
+    ],
+    output: {
+      filename: "server.[fullhash].js",
+      path: path.resolve(projectRoot, "builds/web/server"),
+      clean: true
+    },
+    resolve: {
+      alias: {
+        '@pf': path.resolve(projectRoot, 'prometheus-framework'),
+      },
+      fallback: { 
+        "path": false 
+      }
+    },
+    // externals: [nodeExternals()],
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
+  };
+};

package/src/builder/webpack/webpack.config.spa.js

@@ -0,0 +1,80 @@
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const Mustache = require("mustache");
+const fs = require('fs').promises;
+
+const getClientConfig = require("./webpack.config.client");
+const templatePath = path.resolve(__dirname,"../templates/page.html");
+
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = (projectRoot) => {
+
+  // let mainJS = !isProd ? [path.resolve("../utils/hot-reload.js"), path.resolve(projectRoot, "src/app.js")] : path.resolve(projectRoot, "src/app.js")
+
+  const spaConfig = {
+    mode: !isProd ? "development" : "production",
+    devtool: "source-map",
+    entry: {
+      main: path.resolve(projectRoot, "src/app.js"),
+    },
+    output: {
+      filename: "main.js",
+      path: path.resolve(projectRoot, "builds/web/spa"),
+      clean: true
+    },
+    target: "web",
+    module: {
+      rules: [
+        // Дополнительные правила могут быть добавлены здесь
+      ]
+    },
+    plugins: [
+      ...(!isProd ? [new webpack.HotModuleReplacementPlugin()] : []),
+      new StatsWriterPlugin(),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: async () => {
+          const template = await fs.readFile(templatePath, 'utf8');
+          const meta = {
+            htmlAttrs: 'lang="en"',
+            headAttrs: '',
+            bodyAttrs: '',
+            head: '<meta name="description" content="Example">',
+            body: '',
+          };
+          const data = {
+            googleTagId: process.env.GOOGLE_TAG_ID,
+            googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY,
+            meta,
+          };
+          return Mustache.render(template, data);
+        },
+        filename: 'index.html',
+        inject: 'body',
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: path.resolve(projectRoot, '../public/logo'), to: 'logo' },
+          { from: path.resolve(projectRoot, '../public/walkthrough'), to: 'walkthrough' }
+        ]
+      }),
+      // new ServiceWorkerPlugin()
+    ],
+    optimization: {
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+    },
+  };
+
+  return merge(getClientConfig(projectRoot), spaConfig);
+};

package/src/builder/webpack/webpack.config.ssr.js

@@ -0,0 +1,57 @@
+const path = require("path");
+const webpack = require("webpack");
+const nodeExternals = require('webpack-node-externals');
+const { merge } = require("webpack-merge");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+
+const getBaseConfig = require("./webpack.config.base.js");
+
+module.exports = (projectRoot) => {
+  const isProd = process.env.NODE_ENV === "production";
+
+  const ssrConfig = {
+    target: "node",
+    mode: !isProd ? "development" : "production",
+    entry: {
+      main: path.resolve(projectRoot, "src/entry-server.js"),
+    },
+    output: {
+      filename: "main.[fullhash].js",
+      path: path.resolve(projectRoot, "builds/web/server"),
+      libraryTarget: "commonjs2",
+      clean: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          // we don't need styles on the server, so we just ignore them
+          use: "null-loader",
+        },
+      ],
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      ...(isProd ? [new WebpackManifestPlugin({
+         fileName: 'manifest.json'
+      })] : []),
+    ],
+    externals: [
+      nodeExternals({
+        allowlist: [
+          /^vue-meta*/,
+          /\.(css|sass|scss)$/,
+          /\.(vue)$/,
+          /\.(html)$/,
+        ],
+      })
+    ],
+  };
+
+  return merge(getBaseConfig(projectRoot), ssrConfig);
+};

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -34,9 +34,9 @@
         {{ item.name }}
       </router-link>
 
-      <span v-else>
+      <a v-else>
         {{ item.name }}
-      </span>
+      </a>
 
       <!-- Arrow -->
       <svg 
@@ -54,39 +54,62 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-
+import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import i18n from '@pf/src/modules/globals/localization/vue-i18n'
+import i18n from '@pf/src/modules/globals/localization/vue-i18n';
 
 const route = useRoute();
 const { t, locale } = useI18n();
 
-const breadcrumbs = computed(() => {
-  return route.matched
-    .map((route) => {
-      const title = route.meta?.title;
+function createRoute(array, route) {
+  return array
+    .map(segment => {
+      if (segment.startsWith(':')) {
+        let paramName = segment.replace(/[:?]/g, '');
+        return route.params[paramName] || null;
+      }
+      return segment;
+    })
+    .filter(segment => segment !== null)
+    .join('/');
+}
+
+const breadcrumbs = ref([]);
+
+function updateBreadcrumbs() {
+  breadcrumbs.value = route.matched
+    .map((r) => {
+      const title = r.meta?.title;
       const currentLocale = locale?.value;
     
       const name = title && currentLocale && title[currentLocale];
-      const path = route.path.replace(/:.+?\//g, (match) => '');
-      const isHidden = route.meta?.breadcrumbs?.hidden;
+
+      let path = r.path.split('/');
+      path = createRoute(path, route);
+
+      const isHidden = r.meta?.breadcrumbs?.hidden;
     
       return { name, path, isHidden };
     })
     .filter((breadcrumb) => {
       return breadcrumb.name && !breadcrumb.isHidden;
     });
-});
+}
+
+watch(
+  () => route.matched,
+  () => {
+    updateBreadcrumbs();
+  },
+  { immediate: true }
+);
 </script>
 
-<style lang='scss'>
-  .breadcrumbs { 
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
 
 
+<style lang='scss'>
+  .breadcrumbs { 
     height: 4rem;
 
     // border-bottom: 1px solid rgba(0,0,0,0.1);

package/src/components/Field/Field.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'
 
   const emit = defineEmits(['update:field', 'focus', 'blur']);
 
@@ -19,6 +19,24 @@
     emit('update:field', props.value)
   }
 
+  const textarea = ref(null);
+
+  function resize() {
+    if (textarea.value) textarea.value.style.height = "1rem";
+    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + "px";
+  }
+
+
+  onUpdated(() => {
+   if (props.type === 'textarea') nextTick(() => {  { focus()} })
+    resize()
+  });
+
+  onMounted(() => {
+    if (props.type === 'textarea') nextTick(() => {  { focus()} })
+    resize()
+  });
+
   const text = ref(props.field);
 </script>
 
@@ -56,6 +74,7 @@
       />
       <textarea 
         v-else
+        ref="textarea"
         @input="event => text = emit('update:field', event.target.value)"
         @focus="event => emit('focus', event)"
         @blur="event => emit('blur', event)"
@@ -88,7 +107,7 @@
   </transition>
 </template>
 
-<style lang="scss" >
+<style lang="scss" scoped>
   input, textarea, span {
     line-height: 1;
     color: inherit;

package/src/components/Popup/Popup.vue

@@ -5,7 +5,7 @@
 					<div v-if="isPopupOpen" key="popup-content" class="pd-small z-index-6 popup-wrapper">
 
 						<transition name="TransitionTranslateY" mode="out-in">
-							<section class="pos-relative " v-bind="$attrs" :class="$attrs.class">
+							<section class="pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
 									<h4 v-if="title" class="mn-b-small">{{title}}</h4>
 									<IconCross :fill="'rgb(var(--white))'" @click="closePopup()" class="cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5"/>
 									<slot></slot>

package/src/modules/auth/store/auth.js

@@ -107,8 +107,7 @@
     },
 
     async signup(user, type, invite) {
-
-
+      
       const { password, passwordRepeat } = state.user;
 
       console.log(password)

package/src/modules/backoffice/components/layouts/Backoffice.vue

@@ -1,24 +1,11 @@
 <template>
-  <section id="account" class="cols-1">
-    <!-- ---------------------------------------------------------------- -->
-    <!-- 02. Page Tabs  -->
-    <!-- ---------------------------------------------------------------- -->
-    <!-- <div class="pd-medium menu-tabs">
-      <button 
-        @click="$router.push('/account/community')" 
-        :class="{'product-tab-active': $route.path === '/account/community'}" 
-        class="mn-b-small product-tab"
-       >
-        Blog
-      </button>
-
-      <button 
-        @click="$router.push('/account/gallery')" 
-        :class="{'product-tab-active': $route.path === '/account/gallery'}" class="product-tab"
-      >
-        Gallery
-      </button>
-    </div> -->
+  <section id="account" class="gap-thin pd-thin cols-2-1_3">
+    
+    <div v-if="route.meta.sidebar" class="w-100">
+      <transition name="scaleIn" mode="out-in">
+        <component :is="route.meta.sidebar" />
+      </transition>
+    </div>
 
     <div class="w-100">
       <router-view  v-slot="{ Component, route }">
@@ -32,49 +19,36 @@
 </template>
 
 
-<script setup>
-
-
-
+<script setup="props">
+/////////////////////////////
+// COMPONENT DEPENDENCIES
+/////////////////////////////
+import { ref, onMounted } from 'vue';
+/////////////////////////////
+// HELPERS
+/////////////////////////////
+import { useRoute, useRouter } from 'vue-router'
+
+import * as auth  from '@pf/src/modules/auth/store/auth'
+import * as organizations  from '@pf/src/modules/organizations/store/organizations'
+
+const route = useRoute()
+const router = useRouter()
+/////////////////////////////
+// CREATED
+/////////////////////////////
+const props = defineProps({
+  favorites: Array,
+});
+
+const selectedOrganization = ref(null);
+const publics = ref([]);
+/////////////////////////////
+// MOUNTED
+/////////////////////////////
+onMounted(async () =>{
+})
 </script>
 
 <style lang="scss">
-.menu-tabs {
-
-  min-width: 16rem;
-  height: min-content;
-   
-  border-radius: 1rem;
-  background: #f7f7f7;
-
-  .product-tab {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-
-
-    background: transparent;
-
-    text-align: left;
-
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    width: 100%;
-
-    svg { opacity: 0.33; margin-right: 1rem; }
-
-    &:hover {
-      cursor: pointer;
-    }
-    
-    &-active {
-      color: rgb(var(--main));
-      background: white;
-
-      svg { opacity: 1; path { fill: rgb(var(--main));}  }
-    }
-
-  }
-}
 </style>