@beeq/vue 1.8.0-beta.8 → 1.8.0

package/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nx/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

package/README.md

@@ -2,35 +2,93 @@
 
 A lightweight utility that wraps BEEQ custom elements ("web components") so they can be seamlessly integrated into Vue applications.
 
+## Why is this necessary?
+
+BEEQ can generate Vue component wrappers for your web components. This allows BEEQ components to be used within a Vue 3 application. The benefits of using BEEQ's component wrappers over the standard web components include:
+
+- Type checking with your components.
+- Integration with the router link and Vue router.
+- Optionally, form control web components can be used with `v-model`.
+
+(*Adapted from the [Stencil official documentation](https://stenciljs.com/docs/vue)*)
+
 ## Package installation
 
+> [!TIP]
+> Please always refer to the [official BEEQ documentation](https://www.beeq.design/3d466e231/p/359a26-for-developers/b/53475d) for more information about the installation.
+
 - install the package
 
 ```
-npm install @beeq/vue
+npm install @beeq/{core,vue}
 ```
 
-- update the package
+> [!NOTE]
+> Make sure that you have installed the `@beeq/core` package.
 
+### Add BEEQ styles and assets
+
+Import BEEQ styles into your application's main style file:
+
+```css
+@import "@beeq/core/dist/beeq/beeq.css";
 ```
-npm install @beeq/vue@latest
+
+> [!TIP]
+> BEEQ uses SVG icons and these assets are shipped in a separate folder. You can use the `setBasePath` method to set the path to the icons. Make sure that your project bundle the icons in a way that they are accessible from the browser.
+
+You can move the icons from the node_modules folder to your assets folder and set the path like this:
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // treat all BEEQ tags as custom elements
+          isCustomElement: (tag) => tag.includes("bq-"),
+        },
+      },
+    }),
+    vueJsx(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: "./node_modules/@beeq/core/dist/beeq/svg/*",
+          dest: "assets/svg",
+        },
+        // other assets
+      ],
+    }),
+  ],
+  // other configurations
+});
 ```
 
-if `@beeq/core` package is installed you should update both
+```js
+// main.ts
+import { setBasePath } from '@beeq/core';
 
-```
-npm install @beeq/{core,vue}
+setBasePath('icons/svg');
 ```
 
-### Add BEEQ styles and assets
+But you can also use a different icons library or a CDN:
 
-Make sure that BEEQ main style is imported into your application's main style file:
+```js
+import { setBasePath } from '@beeq/core';
 
-```css
-@import "@beeq/core/dist/beeq/beeq";
+// Using heroicons library
+setBasePath('https://cdn.jsdelivr.net/npm/heroicons@2.1.5/24/outline');
 ```
 
-> ❗️The icons SVG are shipped in a separate folder. Depending on your stack, your project will need to include `node_modules/@beeq/core/dist/beeq/svg` in the build in such a way that it respond to: `http://<domain>/svg`
+> [!CAUTION]
+> When using a different icons library, make sure you use the correct icon names provided by the library or the CDN.
 
 ## Usage
 
@@ -52,13 +110,3 @@ const name = ref('John Doe');
   </bq-input>
 </template>
 ```
-
-## Why is this necessary?
-
-BEEQ can generate Vue component wrappers for your web components. This allows BEEQ components to be used within a Vue 3 application. The benefits of using BEEQ's component wrappers over the standard web components include:
-
-- Type checking with your components.
-- Integration with the router link and Vue router.
-- Optionally, form control web components can be used with `v-model`.
-
-(*Adapted from the [Stencil official documentation](https://stenciljs.com/docs/vue)*)

package/eslint.config.js

@@ -0,0 +1,41 @@
+const nxESLint = require('@nx/eslint-plugin');
+const jsoncParser = require('jsonc-eslint-parser');
+const tsESLint = require('typescript-eslint');
+
+/** @type { import("eslint").Linter.Config[] } */
+module.exports = [
+  ...tsESLint.configs.recommended,
+  {
+    ignores: ['**/src/components.ts'],
+  },
+  {
+    rules: {
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'prefer-const': 'off',
+    },
+  },
+  {
+    files: ['**/package.json', '**/project.json'],
+    languageOptions: {
+      parser: jsoncParser,
+    },
+    plugins: {
+      '@nx': nxESLint,
+    },
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredDependencies: ['@beeq/core', '@stencil/vue-output-target', 'tslib', 'vue'],
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.js'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+];

package/package.json

@@ -1,21 +1,20 @@
 {
-    "name": "@beeq/vue",
-    "version": "1.8.0-beta.8",
-    "license": "Apache-2.0",
-    "description": "Vue specific wrapper for BEEQ Design System components",
-    "main": "./src/index.js",
-    "types": "./src/index.d.ts",
-    "dependencies": {
-        "@beeq/core": "^1.8.0-beta.8",
-        "tslib": "^2.6.3"
-    },
-    "peerDependencies": {
-        "vue": ">=3.3.0"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Endava/BEEQ"
-    },
-    "module": "./src/index.js",
-    "type": "module"
-}
+  "name": "@beeq/vue",
+  "version": "1.8.0",
+  "license": "Apache-2.0",
+  "description": "Vue specific wrapper for BEEQ Design System components",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "dependencies": {
+    "@beeq/core": "^1.8.0",
+    "@stencil/vue-output-target": "^0.9.0",
+    "tslib": "^2.6.3"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Endava/BEEQ"
+  }
+}

package/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "beeq-vue",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/beeq-vue/src",
+  "projectType": "library",
+  "tags": ["wrapper", "vue", "publishable"],
+  "implicitDependencies": ["beeq"],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "clean": true,
+        "outputPath": "dist/beeq-vue",
+        "main": "packages/beeq-vue/src/index.ts",
+        "tsConfig": "packages/beeq-vue/tsconfig.lib.json",
+        "assets": ["packages/beeq-vue/README.md"]
+      },
+      "dependsOn": [{ "dependencies": true, "target": "build" }]
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["{projectRoot}/**/*.ts", "{projectRoot}/package.json", "{projectRoot}/project.json"]
+      }
+    }
+  }
+}