@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/base/docs/testing.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Testing" />
+
+# Testing
+
+## Jest
+
+Jest may throw errors during test runs when encountering ES modules or node_modules that need transformation.
+If you encounter errors like "SyntaxError: Unexpected token 'export'" or "Cannot use import statement outside a
+module", add the following `transformIgnorePatterns` configuration to your Jest config:
+
+```js
+// In jest.config.js or package.json
+"transformIgnorePatterns": [
+  "node_modules/(?!(your-problematic-module|another-module)/)"
+]
+```

package/versions/base/docs/vue.mdx

@@ -0,0 +1,159 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Frameworks/Vue" />
+
+# Vue Framework Integration
+
+This guide will help you get started with consuming the Modus Vue Web Component library in your Vue project.
+
+We highly recommend using the Modus Vue Components library for Vue based projects.
+These components are automatically generated using the Stencil Vue Framework Integration.
+
+Follow the steps outlined below to integrate and use Modus Vue Web Components effectively.
+
+Please refer to the [official stencil documentation](https://stenciljs.com/docs/vue) for more information on how to integrate with your Vue project.
+
+## Usage
+
+Modus Vue Components have a peer dependency with Modus Web Components and require the
+installation of both packages.
+
+### 1. Install `@trimble-oss/moduswebcomponents-vue`:
+
+<b>
+  Lock the installed package versions to avoid unintended breakages on future
+  npm installs.
+</b>
+
+```bash
+npm install @trimble-oss/moduswebcomponents @trimble-oss/moduswebcomponents-vue@<latest-version>
+# e.g.,
+npm install @trimble-oss/moduswebcomponents@1.0.0 @trimble-oss/moduswebcomponents-vue@1.0.0
+```
+
+### 2. Set up the styling:
+
+You will need to import our styling in your main JavaScript or CSS file:
+
+```js
+// main.ts
+import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+### 3. Use the component library as normal:
+
+**Note:** Use camelCase for multi-word properties (e.g., `alertTitle` instead of `alert-title`)
+
+```vue
+<template>
+  <ModusWcButton color="primary" @click="handleClick"> Click Me </ModusWcButton>
+
+  <ModusWcBadge aria-label="Badge" content="Words" />
+</template>
+
+<script setup lang="ts">
+import {
+  ModusWcButton,
+  ModusWcBadge,
+} from '@trimble-oss/moduswebcomponents-vue';
+
+const handleClick = () => {
+  console.log('Button clicked!');
+};
+</script>
+```
+
+## Custom Elements Configuration
+
+When using web components directly in Vue, you need to configure Vue to recognize custom elements:
+
+### 1. Install `@trimble-oss/moduswebcomponents`:
+
+```bash
+npm install @trimble-oss/moduswebcomponents@latest
+```
+
+### 2. Set up the styling:
+
+```js
+// main.ts
+import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+### 3. Configure Vue to work with custom elements:
+
+In your `vite.config.ts`, you need to tell Vue to ignore custom elements:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // Tell Vue to ignore all components starting with "modus-wc"
+          isCustomElement: (tag) => tag.startsWith('modus-wc'),
+        },
+      },
+    }),
+  ],
+});
+```
+
+### 4. Use the web components in your Vue templates:
+
+```vue
+<template>
+  <modus-wc-button label="Click Me" />
+  <modus-wc-badge aria-label="Badge" content="Words" />
+</template>
+```
+
+## Wrapping Components
+
+When using Modus Vue Components directly, it is recommended to wrap them in corresponding Vue components within your application. This will abstract away from the library dependency, allowing more flexibility for you and your application in the future.
+
+Wrapped Modus Avatar Example:
+
+```vue
+<template>
+  <ModusWcAvatar v-bind="$props" />
+</template>
+
+<script setup lang="ts">
+import { ModusWcAvatar } from '@trimble-oss/moduswebcomponents-vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+interface Props extends ComponentProps<typeof ModusWcAvatar> {}
+
+defineProps<Props>();
+</script>
+```
+
+or, a more complex wrapper:
+
+```vue
+<template>
+  <ModusWcTextInput v-bind="$props" @inputChange="handleInputChange" />
+</template>
+
+<script setup lang="ts">
+import { ModusWcTextInput } from '@trimble-oss/moduswebcomponents-vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+interface Props
+  extends Omit<ComponentProps<typeof ModusWcTextInput>, 'onInputChange'> {
+  onValueChange?: (value: string) => void;
+}
+
+const props = defineProps<Props>();
+
+const handleInputChange = (e: CustomEvent) => {
+  const value = e.detail.target.value;
+  props.onValueChange?.(value);
+};
+</script>
+```