fix(vue): fix problems to emit events in vue wrappers (#440)

juntossomosmais · May 22, 2024 · 26a02af · 26a02af
1 parent cd23634
commit 26a02af
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 12 deletions.
diff --git a/apps/docs-vue/.storybook/preview.ts b/apps/docs-vue/.storybook/preview.ts
@@ -6,6 +6,10 @@ import '@atomium/storybook-utils/preview.css'
 import '@juntossomosmais/atomium-tokens/tokens.css'
 import '@juntossomosmais/atomium/dist/core/core.css'
 
+import { ComponentLibrary } from '@juntossomosmais/atomium/vue'
+
+ComponentLibrary.install()
+
 const preview = {
   parameters: {
     viewport: {

diff --git a/packages/core/src/components/alert/stories/alert.args.ts b/packages/core/src/components/alert/stories/alert.args.ts
@@ -1,12 +1,12 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
 import { withActions } from '@storybook/addon-actions/decorator'
 
-import { Category } from '@atomium/storybook-utils/enums/table'
 
 export const AlertStoryArgs = {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['atomClose', 'atomAction'],
+      handles: ['atomClose', 'atomAction', 'atom-close', 'atom-action'],
     },
     docs: {
       description: {
@@ -80,7 +80,7 @@ export const AlertStoryArgs = {
 
 export const AlertComponentArgs = {
   color: 'neutral',
-  close: true,
+  close: false,
   messageTitle: 'Title example of alert',
   messageText: 'Nice message example',
   actionText: 'Action example',

diff --git a/packages/core/src/components/input/stories/input.args.ts b/packages/core/src/components/input/stories/input.args.ts
@@ -1,6 +1,6 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
 import { withActions } from '@storybook/addon-actions/decorator'
 
-import { Category } from '@atomium/storybook-utils/enums/table'
 
 export const InputStoryArgs = {
   parameters: {
@@ -11,7 +11,16 @@ export const InputStoryArgs = {
       },
     },
     actions: {
-      handles: ['atomChange', 'atomFocus', 'atomBlur', 'atomInput'],
+      handles: [
+        'atomChange',
+        'atomFocus',
+        'atomBlur',
+        'atomInput',
+        'atom-change',
+        'atom-focus',
+        'atom-blur',
+        'atom-input',
+      ],
     },
   },
   decorators: [withActions],

diff --git a/packages/core/src/components/select/stories/select.args.ts b/packages/core/src/components/select/stories/select.args.ts
@@ -16,6 +16,11 @@ export const SelectStoryArgs = {
         'atomBlur',
         'atomCancel',
         'atomDismiss',
+        'atom-change',
+        'atom-focus',
+        'atom-blur',
+        'atom-cancel',
+        'atom-dismiss',
       ],
     },
   },

diff --git a/packages/core/src/components/textarea/stories/textarea.args.ts b/packages/core/src/components/textarea/stories/textarea.args.ts
@@ -1,6 +1,6 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
 import { withActions } from '@storybook/addon-actions/decorator'
 
-import { Category } from '@atomium/storybook-utils/enums/table'
 
 export const TextareaStoryArgs = {
   parameters: {
@@ -11,7 +11,16 @@ export const TextareaStoryArgs = {
       },
     },
     actions: {
-      handles: ['atomChange', 'atomFocus', 'atomBlur', 'atomInput'],
+      handles: [
+        'atomChange',
+        'atomFocus',
+        'atomBlur',
+        'atomInput',
+        'atom-change',
+        'atom-focus',
+        'atom-blur',
+        'atom-input',
+      ],
     },
   },
   decorators: [withActions],

diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
@@ -123,8 +123,8 @@ export const config: Config = {
     vueOutputTarget({
       componentCorePackage: '@juntossomosmais/atomium',
       proxiesFile: '../vue/src/components/index.ts',
-      includeDefineCustomElements: true,
-      includePolyfills: true,
+      includeDefineCustomElements: false,
+      includePolyfills: false,
       excludeComponents,
     }),
     reactOutputTarget({

diff --git a/packages/vue/README.md b/packages/vue/README.md
@@ -10,11 +10,27 @@ This is the Vue transpiled implementation of the Atomium design system to be use
 npm i @juntossomosmais/atomium
 ```
 
-### Basic Usage
+And import `loader` in your `main.js` file
+
+```js
+import { ComponentLibrary } from '@juntossomosmais/atomium/vue'
 
-```jsx
 import '@juntossomosmais/atomium/core.css'
 
+ComponentLibrary.install()
+```
+
+Or import as a plugin in your Vue instance
+
+```js
+import { ComponentLibrary } from '@juntossomosmais/atomium/vue'
+
+Vue.use(ComponentLibrary)
+```
+
+### Basic Usage
+
+```jsx
 import { AtomButton } from '@juntossomosmais/atomium/vue'
 
 <AtomButton>Click me</AtomButton>

diff --git a/packages/vue/src/plugin.ts b/packages/vue/src/plugin.ts
@@ -4,10 +4,21 @@ import {
 } from '@juntossomosmais/atomium/loader'
 import { Plugin } from 'vue'
 
+function toKebabCase(str: string) {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
 export const ComponentLibrary: Plugin = {
   async install() {
     applyPolyfills().then(() => {
-      defineCustomElements()
+      defineCustomElements(window, {
+        ael: (el: any, eventName: string, cb: any, opts: any) =>
+          el.addEventListener(eventName.toLowerCase(), cb, opts),
+        rel: (el: any, eventName: string, cb: any, opts: any) =>
+          el.removeEventListener(eventName.toLowerCase(), cb, opts),
+        ce: (eventName: string, opts: any) =>
+          new CustomEvent(toKebabCase(eventName), opts),
+      } as any)
     })
   },
 }