{"_id":"@aqua-ds/vue","_rev":"3-6845137286590661cb6ff1b632481006","name":"@aqua-ds/vue","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@aqua-ds/vue","version":"0.0.1","keywords":["aqua","design-system","component-library","UI","vue3"],"author":{"name":"frontops@masiv.com"},"license":"MIT","_id":"@aqua-ds/vue@0.0.1","maintainers":[{"name":"aqua_team","email":"frontops@masiv.com"}],"homepage":"https://masivapp.notion.site/Vue-3-2011de3976b9804cbd0bcee9fe4ecfd9","dist":{"shasum":"af6de168b948877ce021034d25f3837affe82388","tarball":"https://registry.npmjs.org/@aqua-ds/vue/-/vue-0.0.1.tgz","fileCount":15,"integrity":"sha512-XR/CXpGgiSnEC+tK9Q5hiLxunzo/N9fnlk4I+WAMIlxhZd8612tieiOgKAGPlRx2DBPJMRbrJSgP5DvyNUCpNA==","signatures":[{"sig":"MEUCIQCBvStOb6b0qmX53yvRznAjG9wNzYmcelB/m2iuV7bp3gIgQGHwtB29Q8f9w/UOh6UAyI63SnG/HfJt6Q9Yvsc1CLw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130986},"main":"lib/index.js","type":"module","types":"dist/index.d.ts","exports":{".":"./lib/index.ts","./lib/*":"./lib/*","./components":"./lib/components.ts"},"gitHead":"fa3c18ecd44c0a545e04bef09b1188445dc34bc5","scripts":{"tsc":"tsc -p . --outDir ./dist","test":"echo \"Error: no test specified\" && exit 1","build":"npm run tsc"},"_npmUser":{"name":"aqua_team","email":"frontops@masiv.com"},"_npmVersion":"10.9.2","description":"Aqua Vue, Vue, Aqua Design System","directories":{},"_nodeVersion":"20.16.0","dependencies":{"@aqua-ds/web-components":"^0.0.5","@stencil/vue-output-target":"^0.9.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","typescript":"^5.7.3","@types/node":"^22.13.4"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.1_1758924931211_0.370713389093579","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@aqua-ds/vue","version":"0.0.2","keywords":["aqua","design-system","component-library","UI","vue3"],"author":{"name":"frontops@masiv.com"},"license":"MIT","_id":"@aqua-ds/vue@0.0.2","maintainers":[{"name":"aqua_team","email":"frontops@masiv.com"}],"homepage":"https://masivapp.notion.site/Vue-3-2011de3976b9804cbd0bcee9fe4ecfd9","dist":{"shasum":"c29929f5916fed38ee1fe314730a45a741703763","tarball":"https://registry.npmjs.org/@aqua-ds/vue/-/vue-0.0.2.tgz","fileCount":15,"integrity":"sha512-GSVdSRLSucm/Jv1Eyj9i/gJD+55mhpHss7ocKGjO9bU6L/Fic/mSNpxZkKHlI2lyOG/RGtq+AH0A3xaYpqepQw==","signatures":[{"sig":"MEUCIQDgYrqgweW8eW8pYOQFDz7nSP2wlliNiYABaIq5RBoPywIgMj8aduaitAcmpZ/b6KWDVrASOAD5OorRGintE2vskyg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":131745},"main":"lib/index.js","type":"module","types":"dist/index.d.ts","exports":{".":"./lib/index.ts","./enums":{"types":"@aqua-ds/web-components/enums","import":"@aqua-ds/web-components/enums"},"./lib/*":"./lib/*","./types":{"types":"@aqua-ds/web-components/types","import":"@aqua-ds/web-components/types"},"./constants":{"types":"@aqua-ds/web-components/constants","import":"@aqua-ds/web-components/constants"},"./components":"./lib/components.ts"},"gitHead":"345b96a3787ede99392efeb572a25ad19a741c8b","scripts":{"tsc":"tsc -p . --outDir ./dist","test":"echo \"Error: no test specified\" && exit 1","build":"npm run tsc"},"_npmUser":{"name":"aqua_team","email":"frontops@masiv.com"},"_npmVersion":"11.6.1","description":"Version Vue of Aqua Design System","directories":{},"_nodeVersion":"22.20.0","dependencies":{"@aqua-ds/web-components":"^0.0.6","@stencil/vue-output-target":"^0.9.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","typescript":"^5.7.3","@types/node":"^22.13.4"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.2_1760569674706_0.3014953022794489","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@aqua-ds/vue","version":"0.0.3","description":"Version Vue of Aqua Design System","main":"lib/index.js","types":"dist/index.d.ts","type":"module","license":"MIT","author":{"name":"frontops@masiv.com"},"homepage":"https://masivapp.notion.site/Vue-3-2011de3976b9804cbd0bcee9fe4ecfd9","keywords":["aqua","design-system","component-library","UI","vue3"],"exports":{"./components":"./lib/components.ts","./enums":{"import":"@aqua-ds/web-components/enums","types":"@aqua-ds/web-components/enums"},"./types":{"import":"@aqua-ds/web-components/types","types":"@aqua-ds/web-components/types"},"./constants":{"import":"@aqua-ds/web-components/constants","types":"@aqua-ds/web-components/constants"},"./lib/*":"./lib/*",".":"./lib/index.ts"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"npm run tsc","tsc":"tsc -p . --outDir ./dist"},"publishConfig":{"access":"public"},"devDependencies":{"@types/node":"^22.13.4","typescript":"^5.7.3","vue":"^3.5.13"},"dependencies":{"@aqua-ds/web-components":"^0.0.8","@stencil/vue-output-target":"^0.9.4"},"_id":"@aqua-ds/vue@0.0.3","gitHead":"67615573527a0e0c8d47e203c5dd54a2a52b0838","_nodeVersion":"20.18.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-gk/OydZeCViC/nGXI6kYO/x0twfAQaylKQlM3vQdAsLPjC7Huw/rAmnUMiEOvgypnb+Dj2ILlHZKczkRuFEsMA==","shasum":"dded22761471c534d80117a0af1641f9c5b9d21e","tarball":"https://registry.npmjs.org/@aqua-ds/vue/-/vue-0.0.3.tgz","fileCount":15,"unpackedSize":132958,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICcLX/cREa6v4YGWWVTs0+Oo4xVmj/LmQlMvsg5/YQvsAiEA/Cnh/8wFEIcfVrsv+o8rffRG0k06u2inY5X+//6s9PA="}]},"_npmUser":{"name":"aqua_team","email":"frontops@masiv.com"},"directories":{},"maintainers":[{"name":"aqua_team","email":"frontops@masiv.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.0.3_1761162502463_0.09711671436524849"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-26T22:15:31.103Z","modified":"2025-10-22T19:48:22.875Z","0.0.1":"2025-09-26T22:15:31.391Z","0.0.2":"2025-10-15T23:07:54.898Z","0.0.3":"2025-10-22T19:48:22.664Z"},"author":{"name":"frontops@masiv.com"},"license":"MIT","homepage":"https://masivapp.notion.site/Vue-3-2011de3976b9804cbd0bcee9fe4ecfd9","keywords":["aqua","design-system","component-library","UI","vue3"],"description":"Version Vue of Aqua Design System","maintainers":[{"name":"aqua_team","email":"frontops@masiv.com"}],"readme":"# [AquaDS Vue3](https://masivapp.notion.site/Quick-Start-1f31de3976b9809891d8ca8aeaa4d5fa)\r\n\r\n![version](https://img.shields.io/npm/v/%40aqua-ds%2Fvue)\r\n![lastUpdated](https://img.shields.io/npm/last-update/%40aqua-ds%2Fvue)\r\n\r\n\r\n![AquaDs](https://img.notionusercontent.com/ext/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fpublic.notion-static.com%2Fbd2cb463-be69-4b79-a901-ef0ff01e283c%2Fsimbol_aqua.png/size/w=160?exp=1758922476&sig=gdBTpSOkMJyg1mAZzp5llZWD1HFegTHzrbLMcpbS3M0&id=1f21de39-76b9-80c9-9a15-007a540a7f73&table=custom_emoji)\r\n\r\n\r\n✨ **Design together. Build together. Speak the same language.** ✨\r\n\r\n\r\n\r\n`npm i @aqua-ds/vue`\r\n\r\n---\r\n\r\nWorks smoothly with Vue 3 using on-demand imports and Vite configuration.\r\n\r\n# Installation\r\n\r\nTo install Aqua DS in a Vue 3 project using NPM:\r\n\r\n1. Ensure you have a Vue 3 project initialized and are using the latest versions of Node.js and NPM.\r\n2. Install Aqua DS Package for Vue:\r\n    \r\n    ```bash\r\n    npm i @aqua-ds/vue\r\n    ```\r\n    \r\n3. Configure **`vite.config.js`:**\r\n4. If using Vite, you must add the following so Vue knows which tags should be treated as **Web Components** instead of **Vue components** during the template compilation process (Learn more at [Vue and Web Components | Vue.js](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue)):\r\n    \r\n    ```jsx\r\n    ...\r\n    import vueJsx from '@vitejs/plugin-vue-jsx'\r\n    ...\r\n    \r\n    export default defineConfig({\r\n    \t...\r\n      plugins: [\r\n    \t\tvue({\r\n          template: {\r\n            compilerOptions: {\r\n              isCustomElement: (tag) => tag.startsWith('aq-'),\r\n            },\r\n          },\r\n        }),\r\n        vueJsx(),\r\n        ...\r\n        ]\r\n      }\r\n    );\r\n    ```\r\n    \r\n\r\n# Using Aqua DS Components in Vue 3\r\n\r\nOnce you’ve installed Aqua DS and set up your project, you can begin using components in your Vue 3 templates.\r\n\r\nHere’s how you can use components from the official list:\r\n\r\n[Components](https://www.notion.so/Components-2011de3976b9801388eadaacd389ee67?pvs=21) \r\n\r\n**Example:** `<aq-button>`\r\n\r\n```html\r\n<!-- anyFile.vue -->\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue';\r\nimport { AqButton } from '@aqua-ds/vue';\r\n\r\nexport default defineComponent({\r\n\tcomponents: {\r\n    AqButton,\r\n  },\r\n  setup() {\r\n\t  const handleclick = (e: Event) => {\r\n\t    console.log('AqButton click from vue ', e);\r\n\t  };\r\n\t}\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div class=\"container\">\r\n    <aq-button @click=\"handleclick\" variant=\"primary\" type=\"submit\">\r\n      <em class=\"aq-icon-settings\"></em> Button\r\n    </aq-button>\r\n\t</div>\r\n</template>\r\n```\r\n\r\n<aside>\r\n💡\r\n\r\n**Tip:** Aqua DS supports tree-shaking, so importing only the components you use keeps your final bundle small.\r\n\r\n</aside>\r\n\r\n## Importing Components in Vue\r\n\r\nTo ensure full compatibility when using Aqua components in Vue.js, always import them explicitly inside a `defineComponent` block.\r\n\r\n```html\r\n<script lang=\"ts\">\r\nimport { AqBadge } from '@aqua-ds/vue';\r\nimport { defineComponent } from 'vue';\r\n\r\nexport default defineComponent({\r\n  components: {\r\n    AqBadge,\r\n  },\r\n});\r\n</script>\r\n\r\n<template>\r\n\t...\r\n  <aq-badge state=\"warning\">Warning</aq-badge>\r\n\t...\r\n</template>\r\n```\r\n\r\n## Handling Component Events\r\n\r\nAqua DS components emit **custom DOM events** that are fully compatible with Vue 3’s native event handling syntax. This means you can use `v-on:` or the shorthand `@` to listen for events, just like with any standard Vue component.\r\n\r\n**Example: Listening to an Event**\r\n\r\n```html\r\n<script lang=\"ts\">\r\nimport { AqButton } from '@aqua-ds/vue';\r\nimport { defineComponent } from 'vue';\r\n\r\nexport default defineComponent({\r\n  components: { AqButton },\r\n  setup() {\r\n    const handleClick= (ev: Event) => {\r\n      console.log('Handling button click event: ', ev);\r\n    };\r\n    return { \r\n\t\t  handleClick\r\n    };\r\n  }\r\n});\r\n</script>\r\n<template>\r\n\t<div>\r\n\t  <aq-button variant=\"primary\" @click=\"handleClick\">\r\n\t    Click Me\r\n\t  </aq-button>\r\n  </div>\r\n</template>\r\n```\r\n\r\n```html\r\n<script lang=\"ts\">\r\nimport { AqCheckbox } from '@aqua-ds/vue';\r\nimport { defineComponent } from 'vue';\r\n\r\nexport default defineComponent({\r\n  components: { AqCheckbox },\r\n  setup() {\r\n    const handleValueChanged = (ev: Event) => {\r\n      console.log('Handling checkbox custom aqChange from vue: ', ev);\r\n    };\r\n    return { \r\n\t\t  handleValueChanged\r\n    };\r\n  }\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<div>\r\n\t\t<aq-checkbox \r\n\t\t\tid-checkbox=\"checkbox-2\" \r\n\t\t\tname=\"checkbox-2\" \r\n\t\t\tlabel=\"This is a checkbox 2\" \r\n\t\t\ticon=\"aq-icon-message\"\r\n      is-required \r\n      info=\"This is an information tooltip\" \r\n      value-checkbox=\"option-2\" \r\n      @input=\"handleValueChanged\"\r\n    >\r\n    </aq-checkbox>\r\n\t</div>\r\n</template>\r\n```\r\n\r\n## Two-Way Binding\r\n\r\nAqua DS is compatible with Vue 3’s `v-model` for **two-way binding**, allowing your application to stay in sync with component values.\r\n\r\n **Example Using** `v-model`\r\n\r\n```html\r\n<script lang=\"ts\">\r\nimport { AqCheckbox } from '@aqua-ds/vue';\r\nimport { defineComponent } from 'vue';\r\n\r\nexport default defineComponent({\r\n  components: { AqCheckbox },\r\n  setup() {\r\n\t  const selectedValue = ref();\r\n\t  return {\r\n\t\t  selectedValue,\r\n\t  }\r\n  }\r\n});\r\n</script>\r\n<template>\r\n\t<div>\r\n\t\t<aq-checkbox \r\n\t\t\tid-checkbox=\"checkbox-2\" \r\n\t\t\tname=\"checkbox-2\" \r\n\t\t\tlabel=\"This is a checkbox 2\" \r\n\t\t\ticon=\"aq-icon-message\"\r\n      is-required \r\n      info=\"This is an information tooltip\" \r\n      value-checkbox=\"option-2\" \r\n      @input=\"handleValueChanged\"\r\n      v-model=\"selectedValue\"\r\n    >\r\n    </aq-checkbox>\r\n\t</div>\r\n</template>\r\n```\r\n\r\n<aside>\r\n💡\r\n\r\nAlways refer to the documentation of each individual component for a complete list of supported events, their purpose, and usage examples.\r\n\r\n</aside>\r\n\r\n<aside>\r\nℹ️\r\n\r\nOnly **some** Aqua DS components are compatible with `v-model`, particularly those that deal with user input and require reactive state handling (such as form fields).\r\n\r\n</aside>\r\n\r\n## Passing Properties to Components\r\n\r\nWhen using Aqua DS components in Vue 3, you can pass properties just like you would with any other component. Aqua DS supports standard HTML attributes, as well as custom component-specific props. Vue automatically converts kebab-case attributes into camelCase props internally.\r\n\r\n```html\r\n<script lang=\"ts\">\r\nimport { AqButtonSplit } from '@aqua-ds/vue';\r\nimport { defineComponent, ref } from 'vue';\r\n\t\r\nexport default defineComponent({\r\n  components: { AqButtonSplit },\r\n  setup() {\r\n    const handleaqclickLeft = (e: Event) => {\r\n      console.log('Handling button-group custom aqclick from vue ', e);\r\n    };\r\n    const handleaqclickRight = (e: Event) => {\r\n      console.log('Handling button-group custom aqclick from vue ', e);\r\n    };\r\n    const handleaqclickItem = (e: Event) => {\r\n      console.log('Handling button-group custom aqclick from vue ', e);\r\n    };\r\n    const items = ref([{\r\n\t    id: \"id1\",\r\n\t    name: \"option1\"\r\n\t  },\r\n\t  {\r\n\t    id: \"id2\",\r\n\t    name: \"option2\"\r\n\t  }]);\r\n\r\n    return {\r\n      handleaqclickLeft,\r\n      handleaqclickRight,\r\n      handleaqclickItem,\r\n      items\r\n    };\r\n  },\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"section\">\r\n\t  <aq-button-split\r\n\t\t  :items=\"items\"\r\n\t\t  variant=\"success\"\r\n\t\t  size=\"medium\"\r\n\t\t  icon=\"aq-icon-send-money\"\r\n\t\t  @clickLeft=\"handleAqClickLeft\"\r\n\t\t  @clickRight=\"handleAqClickRight\"\r\n\t\t  @clickItem=\"handleAqClickItem\"\r\n\t  >\r\n\t\t  Button\r\n\t  </aq-button-split>\r\n  </div>\r\n</template>\r\n```\r\n\r\nThis is a practical example of using the `<aq-button-split>` component in Vue 3. This includes:\r\n\r\n- **Static props** like `variant`, `size`, and `icon`.\r\n- **Dynamic props** passed via `v-bind` (shorthand `:`).\r\n- **Event bindings** using Vue's `@` directive (`v-on` shorthand).\r\n\r\n<aside>\r\n⚠️\r\n\r\nAll Aqua DS component events are fully compatible with Vue 3’s native event binding syntax. You can listen to any custom event emitted by a component using either:\r\n\r\n- `v-on:eventName`\r\n- `@eventName` (shorthand for `v-on`)\r\n</aside>\r\n\r\n<aside>\r\nℹ️\r\n\r\nMost Aqua DS component props are fully compatible with Vue’s `v-bind` directive, allowing you to dynamically bind data to the component’s attributes.\r\n\r\n</aside>\r\n\r\n## Implementing custom Slots\r\n\r\nWhen we develop a component using the **Stencil API**, the `slot` element is implemented based on Web Component standards. This differs from **bindings** and **custom events**, which are adapted to work with framework-specific integrations.\r\n\r\nWhen the component is transpiled into a **Vue component**, it is not a fully native Vue component but rather a wrapper around a Web Component. As a result, some Vue-specific features are not fully supported.\r\n\r\nFor example, when a developer uses the `v-slot` or `#slot` syntax on a **Vue component**, Vue expects to find a Vue-native slot. However, since the slot is defined using the Web Component specification (as per-Stencil), Vue is not aware of it.\r\n\r\nTo properly use our slots, developers must use the native Web Component slot syntax provided by the **Stencil API**—that is, using the `slot` attribute directly in the markup.\r\n\r\n```html\r\n <aq-dropdown id=\"dropdown-1\" :items=\"items\" :popover-width=\"300\">\r\n  <aq-button slot=\"activator\" is-outline\r\n    ><i class=\"aq-icon-three-dots-vertical\"></i\r\n  ></aq-button>\r\n</aq-dropdown>\r\n```\r\n\r\nWhen you do this, you'll gain access to the Web Component slot and be able to use it as needed.\r\n\r\nIf you're using **Vetur**, a linter, or any tool with strict Vue file validation, and it shows a syntax error, follow these steps:\r\n\r\n### `“slot” attributes are deprecated`\r\n\r\nDon’t worry about that error — it’s not caused by your code, nor is it related to our library. It’s just that Vue mistakenly thinks we’re using the Vue 2 API, but in reality, we’re targeting the Stencil API. To prevent and fix this warning, you just need to configure it properly in your `eslint.config` file:\r\n\r\n```jsx\r\n// eslint.config.ts\r\nrules: {\r\n  // ...\r\n  'vue/no-deprecated-slot-attribute': 'off',\r\n  // ...\r\n}\r\n```\r\n\r\n## Vue Component Naming Convention\r\n\r\nIn Aqua DS, **all Vue components must be used in lowercase** (e.g., `aq-button`) when declared in your templates. This is required to ensure maximum compatibility across platforms, especially when using components in HTML-like syntaxes where uppercase tags are not recognized properly.\r\n\r\nEven though you import the component in PascalCase in your JavaScript (`AqButton`), it should **always be used in lowercase** in your Vue templates:\r\n\r\n```html\r\n<template>\r\n  <aq-button variant=\"primary\">Button</aq-button> <!-- ✅ Correct -->\r\n</template>\r\n```\r\n\r\n<aside>\r\n❗\r\n\r\nAvoid using `<AqButton>` in templates. It may not render correctly in some environments.\r\n\r\n</aside>\r\n\r\n# Important Notes\r\n\r\n### **Component Names:**\r\n\r\nAqua DS components must be used in **kebab-case** (`aq-button`, not `AqButton`) to ensure full compatibility in Vue templates.\r\n\r\n### **Tree Shaking:**\r\n\r\nTo reduce your final bundle size, only import the components you use.\r\n\r\nExample (in your main file or component script):\r\n\r\n```html\r\n<script>\r\n...\r\nimport {\r\n  AqDropdown,\r\n  AqButton,\r\n  AqSubheading,\r\n  AqCheckbox,\r\n  AqBadge,\r\n} from '@aqua-ds/vue'\r\n...\r\n</script>\r\n```\r\n\r\n### \r\n\r\n\r\n✨ **Design together. Build together. Speak the same language.** ✨","readmeFilename":"README.md"}