vueless 0.0.1

package/_readme/layoutApp.md

@@ -0,0 +1,153 @@
+## App layout:
+
+Settings for an `app` layout shuld be configured in the `app.layout.config.js`.
+When using this layout on the project, you need to import the file from `store/authLayout.js` to the project's `store`.
+
+For icons use in layout configs, you need to create an `icons` constant, where set to specify the path to the icons.
+
+Example:
+
+``` javascript
+const icons = {
+    SettingsFill: require("@material-symbols/svg-400/outlined/settings-fill.svg"),
+}
+
+iconName: icons.SettingsFill
+```
+
+***
+
+**logoPath** – logo image path from `/public` folder.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+logoPath: "static/logos/dark-outline.svg"
+```
+
+***
+
+**mobileLogoPath** – logo path from `/public` folder for mobile version.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+mobileLogoPath: "static/logos/light.svg",
+```
+
+***
+
+**brandName** – brand name.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+brandName: "Atmosfera"
+```
+
+***
+
+**profileRouteName** – Vue.js router route name which need to be invoked on click by user block.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+profileRouteName: "Profile",
+```
+
+***
+
+**mainMenuItems** – main menu items.
+- type: Array of Objects
+- default: []
+
+Example:
+
+``` javascript
+// Internal link 
+mainMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      page: "MainLayout",
+      translate: "title.information.support", 
+    },
+],
+```
+
+``` javascript
+// External link
+mainMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      translate: "title.information.support",
+      link: {
+        url: "https://google.com",
+        targetBlank: false,
+      },
+    },
+],
+```
+
+``` javascript
+// Hidden menu item
+mainMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      translate: "title.information.support",
+      page: "MainLayout",
+      isHidden: true,
+    },
+],
+```
+
+``` javascript
+// Menu item section
+mainMenuItems: [
+    {
+      translate: "title.sections",
+      isHidden: false,
+    },
+],
+```
+
+***where***:
+
+`iconName` – icon SVG data source path.
+- type: String
+- default: ""
+
+`page` – Vue route name for page.
+- type: String
+- default: ""
+
+`translate` – item text Vue i18n translation path.
+- type: String
+- default: ""
+
+`link` – external link url.
+- type: String
+- default: ""
+
+`targetBlank` – open external link in new window.
+- type: Boolean
+- default: false
+
+`isHidden` – hide a menu item.
+- type: Boolean
+- default: false
+
+***
+
+**footerMenuItems** – footer menu items. Settings for `footerMenuItems` are same as in `mainMenuItems` excludes sections.
+- type: Array of Objects
+- default: []
+
+***

package/_readme/layoutAuth.md

@@ -0,0 +1,190 @@
+## Auth layout:
+
+Settings for an `auth` layout should be configured in the `auth.layout.config.js`.
+
+For icons use in layout configs, you need to create an `icons` constant, where set to specify the path to the icons.
+
+Example:
+
+``` javascript
+const icons = {
+    SettingsFill: require("@material-symbols/svg-400/outlined/settings-fill.svg"),
+}
+
+iconName: icons.SettingsFill
+```
+
+***
+
+**logoPath** – logo image path from `/public` folder.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+logoPath: "static/logos/dark-outline.svg"
+```
+
+***
+
+**logoLabel** – small text label at the top right part of a logo. Value can be string or array of objects (use when you want to add different labels for routes that useing same auth layout).
+- type: String / Array
+- default: ""
+
+Example:
+
+``` javascript
+// String
+logoLabel: "admin"
+```    
+
+
+``` javascript
+// Array of Objects
+logoLabel: [
+    {     
+        routeNames: ["Login", "ForgotPassword"],
+        label: "",
+    },
+    {     
+        routeNames: ["AdminLogin"],
+        label: "admin",
+    }
+]
+```
+***where***:
+
+`logoLabel[x].routeNames` – array with page Vue route names.
+- type: Array of Objects
+- default: []
+
+`logoLabel[x].label` – small text label near logo.
+- type: String
+- default: ""
+
+***
+
+**languages** – languages block.
+- type: Object
+- default: {}
+
+Example:
+
+``` javascript    
+languages: {
+  isHidden: true,
+}
+```
+***where***:
+
+`isHidden` – hides languages block.
+- type: Boolean
+- default: false
+
+***
+
+**features** – the page is divided into two parts, a block for some information and a block with a login form.
+- type: Object
+- default: {}
+
+Example:
+
+``` javascript   
+features: {
+  isHidden: false,
+  logoPath: "static/logos/dark-outline.svg",
+}
+```
+***where***:
+
+`isHidden` – shows features block.
+- type: Boolean
+- default: true
+
+`logoPath` – logo image path from `/public` folder for features block.
+- type: String
+- default: ""
+
+***
+
+**brandName** – footer brand name.
+- type: String
+- default: ""
+
+Example:
+
+``` javascript
+brandName: "Atmosfera"
+``` 
+
+***
+
+**footerMenuItems** – footer menu items.
+- type: Array of Objects
+- default: []
+
+Example:
+
+``` javascript
+// Internal link 
+footerMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      page: "MainLayout",
+      translate: "title.information.support", 
+    },
+],
+```
+
+``` javascript
+// External link
+footerMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      translate: "title.information.support",
+      link: "https://google.com",
+      targetBlank: false,
+    },
+],
+```
+
+``` javascript
+// Hidden menu item
+footerMenuItems: [
+    {
+      iconName: icons.SettingsFill,
+      translate: "title.information.support",
+      page: "MainLayout",
+      isHidden: true,
+    },
+],
+```
+
+***where***:
+
+`iconName` – icon SVG data source path.
+- type: String
+- default: ""
+
+`page` – Vue route name for page.
+- type: String
+- default: ""
+
+`translate` – item text Vue i18n translation path.
+- type: String
+- default: ""
+
+`link` – external link url.
+- type: String
+- default: ""
+
+`targetBlank` – open external link in new window.
+- type: Boolean
+- default: false
+
+`isHidden` – hide a menu item.
+- type: Boolean
+- default: false
+
+***

package/composable.ui/index.js

@@ -0,0 +1,81 @@
+import { getCurrentInstance, useAttrs, Comment, Text, Fragment } from "vue";
+import { cx, globalComponentConfig, strategyOverwrite } from "vueless/service.ui";
+
+/*
+  Merging component configs in a given sequence (bigger number = bigger priority):
+  1. Default component config
+  2. Custom global component config (/vueless.config.js)
+  3. Component config (:ui="{...}" props)
+  4. Component classes (class="...")
+*/
+export function useUI(defaultConfig = {}, propsConfig = {}, topLevelClassKey = "wrapper") {
+  const { name: componentName } = getCurrentInstance().type;
+  const globalConfig = globalComponentConfig[componentName];
+
+  const attrs = useAttrs();
+
+  const ui = strategyOverwrite
+    ? { ...defaultConfig, ...globalConfig, ...propsConfig }
+    : mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+
+  ui[topLevelClassKey] = cx([ui[topLevelClassKey], attrs.class]);
+
+  return {
+    ui,
+    hasSlotContent,
+  };
+}
+
+/*
+  Recursively merge config objects with tailwind classes duplicates removing.
+ */
+function mergeConfigs({ defaultConfig, globalConfig, propsConfig, ui = {} }) {
+  globalConfig = globalConfig || {};
+  propsConfig = propsConfig || {};
+
+  const isGlobalConfig = Object.keys(globalConfig).length;
+  const isPropsConfig = Object.keys(propsConfig).length;
+
+  for (let key in defaultConfig) {
+    if (isGlobalConfig || isPropsConfig) {
+      const isObject = typeof defaultConfig[key] === "object";
+      const isEmpty = defaultConfig[key] === null;
+
+      ui[key] =
+        isObject && !isEmpty
+          ? mergeConfigs({
+              defaultConfig: defaultConfig[key],
+              globalConfig: globalConfig[key],
+              propsConfig: propsConfig[key],
+              ui: defaultConfig[key],
+            })
+          : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+    } else {
+      ui[key] = defaultConfig[key];
+    }
+  }
+
+  return ui;
+}
+
+/**
+  Check if slot defined, and have a content.
+  @returns boolean
+ */
+function hasSlotContent(slot, props = {}) {
+  const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
+
+  const isVNodeEmpty = (vnode) => {
+    return (
+      !vnode ||
+      asArray(vnode).every(
+        (vnode) =>
+          vnode.type === Comment ||
+          (vnode.type === Text && !vnode.children?.length) ||
+          (vnode.type === Fragment && !vnode.children?.length),
+      )
+    );
+  };
+
+  return !isVNodeEmpty(slot?.(props));
+}

package/config.rollup-plugin-visualizer/index.js

@@ -0,0 +1,11 @@
+/**
+  Docs:
+  https://github.com/btd/rollup-plugin-visualizer?tab=readme-ov-file#options
+*/
+export default {
+  template: "treemap", // sunburst
+  gzipSize: true,
+  brotliSize: true,
+  filename: "report.html",
+  emitFile: false,
+};

package/config.unplugin-vue-i18n/index.js

@@ -0,0 +1,9 @@
+/**
+  Docs:
+  https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#-options
+*/
+export default {
+  defaultSFCLang: "yaml", // use a yaml format for localization files
+  strictMessage: false, // allows html in localizations
+  runtimeOnly: false, // enables pluralization rules in build
+};

package/config.vite-plugin-pwa/index.js

@@ -0,0 +1,132 @@
+/**
+  Docs:
+  https://vite-pwa-org.netlify.app/guide/
+*/
+export default {
+  manifest: {
+    display: "standalone",
+    orientation: "portrait",
+    icons: [
+      {
+        src: "static/favicons/icon-48x48.png",
+        sizes: "48x48",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-57x57.png",
+        sizes: "57x57",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-60x60.png",
+        sizes: "60x60",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-72x72.png",
+        sizes: "72x72",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-76x76.png",
+        sizes: "76x76",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-96x96.png",
+        sizes: "96x96",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-114x114.png",
+        sizes: "114x114",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-120x120.png",
+        sizes: "120x120",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-128x128.png",
+        sizes: "128x128",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-144x144.png",
+        sizes: "144x144",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-152x152.png",
+        sizes: "152x152",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-180x180.png",
+        sizes: "180x180",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-256x256.png",
+        sizes: "256x256",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-348x348.png",
+        sizes: "348x348",
+        type: "image/png",
+      },
+      {
+        src: "static/favicons/icon-512x512-desktop.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "static/favicons/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  },
+  includeAssets: ["favicon.ico", "assets/*", "static/*"],
+  workbox: {
+    globPatterns: ["**/*.{js,css,html,ico,png,svg,jpg,gif,woff2,webmanifest}"],
+    globIgnores: [".htaccess", "**/*.{map}"],
+    runtimeCaching: [
+      {
+        urlPattern: ({ url }) => url.href.includes("/api/v1"),
+        handler: "NetworkFirst",
+        options: getCacheOptions("api-cache"),
+      },
+      {
+        urlPattern: ({ url }) => url.href.includes("fonts.googleapis.com"),
+        handler: "CacheFirst",
+        options: getCacheOptions("google-fonts-cache"),
+      },
+      {
+        urlPattern: ({ url }) => url.href.includes("fonts.gstatic.com"),
+        handler: "CacheFirst",
+        options: getCacheOptions("gstatic-fonts-cache"),
+      },
+    ],
+  },
+  devOptions: {
+    enabled: false, // enables pwa in the dev env
+  },
+};
+
+function getCacheOptions(cacheName) {
+  return {
+    cacheName,
+    expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
+    cacheableResponse: { statuses: [0, 200] },
+  };
+}

package/config.vite-svg-loader/index.js

@@ -0,0 +1,22 @@
+/**
+  Docs (the list of all rules):
+  https://svgo.dev/docs/preset-default/#plugins-list
+*/
+export default {
+  svgo: true,
+  svgoConfig: {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeViewBox: false,
+            convertColors: {
+              currentColor: true,
+            },
+          },
+        },
+      },
+    ],
+  },
+};

package/constant.component-names/index.js

@@ -0,0 +1,6 @@
+/*
+  This file need to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UEmpty = "UEmpty";
+export const UInput = "UInput";