feat(div): update props and attributes

changed for markdown parser.
Now we can write without indent.
And recommend that the first line be a blank line.

README.md

@@ -69,14 +69,21 @@ and writing like below:
 ## The culprit is <NetaBareSpan bare="Mr. Foo">◯◯</NetaBareSpan>
 
 <NetaBareDiv>
-  <template #default>
-    Message that do not contain spoilers is here.
-  </template>
-  <template #bare>
-    Message containing spoilers is here.
-  </template>
+
+Message that do not contain spoilers is here.
+It is recommended that the first line be a blank line for markdown parser.
 </NetaBareDiv>
 
+<NetaBareDiv bare>
+
+Message containing spoilers is here.
+</NetaBareDiv>
+
+<NetaBareDiv bare :isBare="false">
+
+Message that do not contain spoilers is here.
+`isBare` prop takes priority of `bare` attribute.
+</NetaBareDiv>
 ```
 
 ![NetaBare Switch](https://github.com/monsat/vuepress-plugin-netabare-switch/blob/main/doc/images/netabare-switch.gif?raw=true)
@@ -97,14 +104,14 @@ plugins: [
 ],
 ```
 
-## Component Slots and Props
+## Component Slots, Props ,and Attributes
 
 ### `<NetaBareSwitch>`: Toggle switch.
 
 `#default` slot is message to toggle NetaBare
 
 Default is in Japanese.
-#### `name?: string`
+#### `name?: string` prop
 
 using for `<input type=checkbox class="toggle-checkbox">` id and storage key
 
@@ -140,9 +147,16 @@ using for `<input type=checkbox class="toggle-checkbox">` id and storage key
 
 ### `<NetaBareDiv>`: Div of spoiler
 
-`#default` slot is paragraph excluding spoiler.
+`#default` slot is paragraph including/excluding spoiler.
+
+#### `isBare?: boolean` prop
+
+If true, messages in the default slot are including spoiler.
+If false, without spoiler even if `bare` attribute exists.
+
+#### `bare` attribute
 
-`#bare` slot is paragraph including spoiler.
+If exists, messages in the default slot are including spoiler.
 
 ### `<NetaBareSpan>`: Span of spoiler
 

src/client/components/NetaBareDiv.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
 import { useNetaBare } from '../composables/useNetaBare'
 
 interface Props {
   name?: string
+  isBare?: boolean
 }
 
-const { name } = defineProps<Props>()
+// 初期値を設定しないと false になってしまうため undefined で設定する
+const { name, isBare } = withDefaults( defineProps<Props>(), { isBare: undefined })
+const attrs = useAttrs()
+
+// isBare prop の値を優先し、なければ bare attribute があるかどうか
+// isBare prop が false なら bare attribute があっても false
+const bare = computed(() => isBare ?? Object.keys(attrs).includes('bare'))
 
 const { checked } = useNetaBare(name)
 </script>
 
 <template>
-  <p v-if="checked"><slot name="bare">ネタバレの内容</slot></p>
-  <p v-else><slot name="default">ネタバレに配慮した内容</slot></p>
+  <div v-if="checked === bare">
+    <slot></slot>
+  </div>
 </template>