feat: update docs and fix breadcrumb

Author: linspw

README.md

@@ -14,14 +14,18 @@ yarn add @hyone/hyone-ui
 
 ### Use
 
-After installing, to use HyONE Vue, you will need to import the desired components to use them.
+After installing, add HyONEPlugin to your vue instance.
 
-- In Vue script:
+- In main js:
 ```js
-import { AButton } from '@hyone/hyone-ui';
-export default {
-  components: { AButton }
-};
+import { createApp } from 'vue';
+import '@hyone/hyone-ui/dist/hyone-ui.css';
+import { HyONEPlugin } from '@hyone/hyone-ui';
+import App from './app.vue'
+
+createApp
+  .use(HyONEPlugin)
+  .mount('#root');
 ```
 
 - In template:

package.json

@@ -27,7 +27,6 @@
     "*.js"
   ],
   "dependencies": {
-    "click-outside-vue3": "^4.0.1",
     "core-js": "^3.6.5",
     "url-join": "^4.0.1",
     "vue": "^3.0.0",

src/components/molecules/a-breadcrumb/a-breadcrumb.vue

@@ -8,11 +8,9 @@
       class="a-breadcrumb__item"
       :size="(index === 0) ? 'small' : 'extra-small'"
       tag="a"
-      :weight="(index === 0) ? 'extra-bold' : 'bold'"
+      :weight="(index === 0) ? 'bold' : 'medium'"
     >
-      <template>
-        {{ item.text }}
-      </template>
+      {{ item.text }}
     </ATitle>
   </nav>
 </template>

src/components/molecules/a-dropdown/a-dropdown.stories.mdx renamed to src/components/molecules/a-dropdown/a-dropdown.[WIP]stories.mdx

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-click-outside="handleClickOutside"
     class="a-dropdown"
   >
     <AButton
@@ -41,17 +40,13 @@
 </template>
 
 <script>
-import vClickOutside from 'click-outside-vue3';
 import { shouldBeOneOf } from 'vue-prop-validation-helper';
 import { AButton } from '@/components/atoms/a-button';
 
 export default {
   components: {
     AButton,
   },
-  directives: {
-    vClickOutside: vClickOutside.directive,
-  },
   props: {
     position: {
       type: String,

src/components/molecules/a-dropdown/a-dropdown.vue

@@ -19,14 +19,18 @@ yarn add @hyone/hyone-ui
 
 ### Use
 
-After installing, to use Aurora Vue, you will need to import the desired components to use them.
+After installing, add HyONEPlugin to your vue instance.
 
-- In Vue script:
+- In main js:
 ```js
-import { AButton } from '@hyone/hyone-ui';
-export default {
-  components: { AButton }
-};
+import { createApp } from 'vue';
+import '@hyone/hyone-ui/dist/hyone-ui.css';
+import { HyONEPlugin } from '@hyone/hyone-ui';
+import App from './app.vue'
+
+createApp
+  .use(HyONEPlugin)
+  .mount('#root');
 ```
 
 - In template:

src/docs/0.welcome-aurora-vue.stories.mdx

@@ -5272,11 +5272,6 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-click-outside-vue3@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz#81a6ac01696b301764b42db6fdbdf28e7cd8ef95"
-  integrity sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==
-
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"