Merge pull request #48 from InhiblabCore/dev

docs: inline style

Author: hongaah

packages/hooks/src/useAsyncOrder/demo/demo.vue

@@ -71,5 +71,3 @@
     },
   })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useBoolean/demo/demo.vue

@@ -4,9 +4,9 @@
     <br>
     <div>
       <p>
-        <vhp-button style="margin-left: 16px" @click="() => set(!flag)">set</vhp-button>
-        <vhp-button style="margin-left: 16px" @click="() => setTrue()">setTrue</vhp-button>
-        <vhp-button style="margin-left: 16px" @click="() => setFalse()">setFalse</vhp-button>
+        <vhp-button @click="() => set(!flag)">set</vhp-button>
+        <vhp-button style="margin-left: 8px" @click="() => setTrue()">setTrue</vhp-button>
+        <vhp-button style="margin-left: 8px" @click="() => setFalse()">setFalse</vhp-button>
       </p>
     </div>
   </div>

packages/hooks/src/useCounter/demo/demo.vue

@@ -5,13 +5,13 @@
       <vhp-button type="vhp-button" @click="inc()">
         inc()
       </vhp-button>
-      <vhp-button type="vhp-button" @click="dec()">
+      <vhp-button type="vhp-button" @click="dec()" style="margin-right: 8px">
         dec()
       </vhp-button>
-      <vhp-button type="vhp-button" @click="set(3)">
+      <vhp-button type="vhp-button" @click="set(3)" style="margin-right: 8px">
         set(3)
       </vhp-button>
-      <vhp-button type="vhp-button" @click="reset()">
+      <vhp-button type="vhp-button" @click="reset()" style="margin-right: 8px">
         reset()
       </vhp-button>
     </div>
@@ -22,11 +22,3 @@
   import { useCounter } from 'vue-hooks-plus'
   const [current, { inc, dec, set, reset }] = useCounter(20, { min: 1, max: 10 })
 </script>
-
-<style scoped lang="less">
-  .contain {
-    & > vhp-button {
-      margin-right: 8px;
-    }
-  }
-</style>

packages/hooks/src/useDarkMode/demo/Test.vue

@@ -31,5 +31,3 @@
     },
   }
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useDarkMode/demo/demo.vue

@@ -31,5 +31,3 @@
     },
   }
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useDebounce/demo/demo.vue

@@ -1,16 +1,15 @@
 <template>
-	<div>
-		<input type="text" placeholder="输入" v-model="valueRef" />
-		<p>500ms后变化：{{ debouncedValue }}</p>
-	</div>
+  <div>
+    <input type="text" placeholder="输入" v-model="valueRef">
+    <p>500ms后变化：{{ debouncedValue }}</p>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useDebounce } from 'vue-hooks-plus'
-const valueRef = ref('')
+  import { useDebounce } from 'vue-hooks-plus'
+  const valueRef = ref('')
 
-const debouncedValue = useDebounce(valueRef, { wait: 500 })
+  const debouncedValue = useDebounce(valueRef, { wait: 500 })
 </script>
-<style scoped lang="less"></style>

packages/hooks/src/useDebounceFn/demo/demo.vue

@@ -19,4 +19,3 @@
     },
   )
 </script>
-<style scoped lang="less"></style>

packages/hooks/src/useDrop/demo/DragDemo.vue

@@ -1,31 +1,29 @@
 <template>
-	<div
-		ref="dragRef"
-		style="border:1px solid #e8e8e8; padding: 16px; width: 100px; text-align: center; margin-right: 16px;"
-	>
-		{{ dragging ? 'dragging' : `box-${data}` }}
-	</div>
+  <div
+    ref="dragRef"
+    style="border:1px solid #e8e8e8; padding: 16px; width: 100px; text-align: center; margin-right: 16px;"
+  >
+    {{ dragging ? 'dragging' : `box-${data}` }}
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useDrag, useBoolean } from 'vue-hooks-plus'
+  import { useDrag, useBoolean } from 'vue-hooks-plus'
 
-const props = defineProps<{
-	data?: string
-}>()
-const [dragging, { set: setDragging }] = useBoolean(false)
-const dragRef = ref(null)
+  const props = defineProps<{
+    data?: string
+  }>()
+  const [dragging, { set: setDragging }] = useBoolean(false)
+  const dragRef = ref(null)
 
-useDrag(props.data, dragRef, {
-	onDragStart: () => {
-		setDragging(true)
-	},
-	onDragEnd: () => {
-		setDragging(false)
-	},
-})
+  useDrag(props.data, dragRef, {
+    onDragStart: () => {
+      setDragging(true)
+    },
+    onDragEnd: () => {
+      setDragging(false)
+    },
+  })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useDrop/demo/demo.vue

@@ -32,58 +32,42 @@ useDrag(props.data, dragRef, {
  -->
 
 <template>
-	<div>
-		<div
-			ref="dropRef"
-			style=" border: 1px dashed #e8e8e8 ; padding: 16px; text-align: center;max-height: 400px;overflow-y: scroll;"
-		>
-			{{ isHovering ? 'release here' : 'drop here' }}
+  <div>
+    <div
+      ref="dropRef"
+      style=" border: 1px dashed #e8e8e8 ; padding: 16px; text-align: center;max-height: 400px;overflow-y: scroll;"
+    >
+      {{ isHovering ? 'release here' : 'drop here' }}
 
-			<p v-for="(item, index) in list" :key="index">{{ item }}</p>
-		</div>
-		<div style=" margin-top: 8px">
-			<drag-demo
-				v-for="item in [
-					'1',
-					'2',
-					'3',
-					'4',
-					'5',
-					'6',
-					'7',
-					'8',
-					'9',
-					'10',
-					'11',
-					'12',
-					'13',
-				]"
-				:key="item"
-				:data="item"
-			/>
-		</div>
-	</div>
+      <p v-for="(item, index) in list" :key="index">{{ item }}</p>
+    </div>
+    <div style=" margin-top: 8px">
+      <drag-demo
+        v-for="item in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']"
+        :key="item"
+        :data="item"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useBoolean, useDrop } from 'vue-hooks-plus'
-import DragDemo from './DragDemo.vue'
+  import { useBoolean, useDrop } from 'vue-hooks-plus'
+  import DragDemo from './DragDemo.vue'
 
-const dropRef = ref(null)
-const list = ref([])
-const [isHovering, { set: setIsHovering }] = useBoolean(false)
+  const dropRef = ref(null)
+  const list = ref([])
+  const [isHovering, { set: setIsHovering }] = useBoolean(false)
 
-useDrop(dropRef, {
-	onDom: (content: string, e) => {
-		// @ts-ignore
-		list.value.push(`custom: ${content} dropped`)
-		setIsHovering(false)
-	},
-	onDragEnter: () => setIsHovering(true),
-	onDragLeave: () => setIsHovering(false),
-})
+  useDrop(dropRef, {
+    onDom: (content: string, e) => {
+      // @ts-ignore
+      list.value.push(`custom: ${content} dropped`)
+      setIsHovering(false)
+    },
+    onDragEnter: () => setIsHovering(true),
+    onDragLeave: () => setIsHovering(false),
+  })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useEventEmitter/demo/DemoA.vue

@@ -1,28 +1,26 @@
 <template>
-	<div>A组件props event通信： {{ count }}</div>
-	<div style="margin-top: 8px;">
-		<a @click="changeGlobal">子组件A内进行全局</a>
-	</div>
+  <div>A组件props event通信： {{ count }}</div>
+  <div style="margin-top: 8px;">
+    <a @click="changeGlobal">子组件A内进行全局</a>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useEventEmitter } from 'vue-hooks-plus'
+  import { useEventEmitter } from 'vue-hooks-plus'
 
-const event = useEventEmitter({ global: true })
-const props = defineProps<{
-	event: any
-}>()
-const count = ref(0)
+  const event = useEventEmitter({ global: true })
+  const props = defineProps<{
+    event: any
+  }>()
+  const count = ref(0)
 
-props.event.useSubscription('change', () => {
-	count.value += 1
-})
+  props.event.useSubscription('change', () => {
+    count.value += 1
+  })
 
-const changeGlobal = () => {
-	event.emit('change')
-}
+  const changeGlobal = () => {
+    event.emit('change')
+  }
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useEventEmitter/demo/GlobalDemo.vue

@@ -1,18 +1,16 @@
 <template>
-	<div style="margin-top: 16px;">全局事件: {{ globalCount }}</div>
+  <div style="margin-top: 16px;">全局事件: {{ globalCount }}</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useEventEmitter } from 'vue-hooks-plus'
+  import { useEventEmitter } from 'vue-hooks-plus'
 
-const event = useEventEmitter({ global: true })
-const globalCount = ref(0)
+  const event = useEventEmitter({ global: true })
+  const globalCount = ref(0)
 
-event.useSubscription('change', () => {
-	globalCount.value += 1
-})
+  event.useSubscription('change', () => {
+    globalCount.value += 1
+  })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useEventEmitter/demo/demo.vue

@@ -31,5 +31,3 @@
     eventA.emit('change')
   }
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useEventListener/demo/demo.vue

@@ -1,25 +1,23 @@
 <template>
-	<div>
-		<div ref="divRef">点击我！</div>
-		<br />
-		<div>点击：{{ valueRef }}</div>
-	</div>
+  <div>
+    <div ref="divRef">点击我！</div>
+    <br>
+    <div>点击：{{ valueRef }}</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useEventListener } from 'vue-hooks-plus'
+  import { ref } from 'vue'
+  import { useEventListener } from 'vue-hooks-plus'
 
-const divRef = ref()
-const valueRef = ref(0)
+  const divRef = ref()
+  const valueRef = ref(0)
 
-useEventListener(
-	'click',
-	() => {
-		valueRef.value += 1
-	},
-	{ target: divRef }
-)
+  useEventListener(
+    'click',
+    () => {
+      valueRef.value += 1
+    },
+    { target: divRef },
+  )
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useEventListener/demo/demo1.vue

@@ -1,18 +1,16 @@
 <template>
-	<div>
-		<div>窗口尺寸改变：{{ valueRef }}</div>
-	</div>
+  <div>
+    <div>窗口尺寸改变：{{ valueRef }}</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useEventListener } from 'vue-hooks-plus'
+  import { ref } from 'vue'
+  import { useEventListener } from 'vue-hooks-plus'
 
-const valueRef = ref(0)
+  const valueRef = ref(0)
 
-useEventListener('resize', () => {
-	valueRef.value += 1
-})
+  useEventListener('resize', () => {
+    valueRef.value += 1
+  })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useExternal/demo/demo.vue

@@ -43,5 +43,3 @@
     }
   })
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useExternal/demo/demo1.vue

@@ -28,5 +28,3 @@
   const path = ref('')
   const status = useExternal(path)
 </script>
-
-<style scoped lang="less"></style>

packages/hooks/src/useFavicon/demo/Test.vue

@@ -34,5 +34,3 @@
 
   useFavicon(url)
 </script>
-
-<style scoped lang="less"></style>