Skip to content

Commit 8ee8e26

Browse files
teleskop150750teleskop150750
committed
feat: [Label] implements
1 parent 60fcfa4 commit 8ee8e26

File tree

9 files changed

+140
-0
lines changed

9 files changed

+140
-0
lines changed

‎packages/vue-primitives/src/label/Label.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { PrimitiveProps } from '../primitive/index.ts'
2+
3+
export interface LabelProps extends PrimitiveProps {}
4+
5+
// eslint-disable-next-line ts/consistent-type-definitions
6+
export type LabelEmits = {
7+
mousedown: [event: MouseEvent]
8+
}

‎packages/vue-primitives/src/label/Label.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import { Primitive } from '../primitive/index.ts'
3+
import type { LabelEmits, LabelProps } from './Label.ts'
4+
5+
defineOptions({
6+
name: 'OkuLabel',
7+
})
8+
9+
withDefaults(defineProps<LabelProps>(), {
10+
as: 'label',
11+
})
12+
const emit = defineEmits<LabelEmits>()
13+
14+
function onMousedown(event: MouseEvent) {
15+
// only prevent text selection if clicking inside the label itself
16+
const target = event.target as HTMLElement
17+
if (target.closest('button, input, select, textarea'))
18+
return
19+
20+
emit('mousedown', event)
21+
// prevent text selection when double clicking label
22+
if (!event.defaultPrevented && event.detail > 1)
23+
event.preventDefault()
24+
}
25+
</script>
26+
27+
<template>
28+
<Primitive
29+
:as="as"
30+
:as-child="asChild"
31+
@mousedown="onMousedown"
32+
>
33+
<slot />
34+
</Primitive>
35+
</template>

‎packages/vue-primitives/src/label/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Label } from './Label.vue'

‎packages/vue-primitives/src/label/stories/Control.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import './styles.css'
3+
4+
function onClick() {
5+
// eslint-disable-next-line no-alert
6+
window?.alert('clicked')
7+
}
8+
</script>
9+
10+
<template>
11+
<button class="label_controlClass" @click="onClick">
12+
Control
13+
</button>
14+
</template>

‎packages/vue-primitives/src/label/stories/Label.stories.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import CStyled from './Styled.vue'
2+
import CWithControl from './WithControl.vue'
3+
import CWithInputNumber from './WithInputNumber.vue'
4+
5+
export default { title: 'Components/Label', excludeStories: ['RECOMMENDED_CSS__LABEL__ROOT'] }
6+
7+
export function Styled() {
8+
return CStyled
9+
}
10+
11+
export function WithControl() {
12+
return CWithControl
13+
}
14+
15+
export function WithInputNumber() {
16+
return CWithInputNumber
17+
}

‎packages/vue-primitives/src/label/stories/Styled.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Label } from '../index.ts'
3+
import './styles.css'
4+
</script>
5+
6+
<template>
7+
<div>
8+
<Label class="label_rootClass">Label</Label>
9+
</div>
10+
</template>

‎packages/vue-primitives/src/label/stories/WithControl.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup lang="ts">
2+
import { Label } from '../index.ts'
3+
import Control from './Control.vue'
4+
import './styles.css'
5+
</script>
6+
7+
<template>
8+
<div>
9+
<h1>Wrapping control</h1>
10+
<Label>
11+
<Control class="label_controlClass" /> Label
12+
</Label>
13+
14+
<h1>Referencing control</h1>
15+
<Control id="control" class="label_controlClass" />
16+
<Label for="control">Label</Label>
17+
</div>
18+
</template>

‎packages/vue-primitives/src/label/stories/WithInputNumber.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
import { Label } from '../index.ts'
3+
import './styles.css'
4+
</script>
5+
6+
<template>
7+
<div>
8+
<Label>
9+
<span>Name:</span>
10+
<input type="number">
11+
</Label>
12+
</div>
13+
</template>

‎packages/vue-primitives/src/label/stories/styles.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.label_rootClass {
2+
/* ensures it can receive vertical margins */
3+
display: inline-block;
4+
/* better default alignment */
5+
vertical-align: middle;
6+
/* mimics default `label` tag (as we render a `span`) */
7+
cursor: default;
8+
9+
display: inline-block;
10+
border: 1px solid gainsboro;
11+
padding: 10px;
12+
}
13+
14+
.label_controlClass {
15+
display: inline-flex;
16+
border: 1px solid gainsboro;
17+
padding: 10px;
18+
vertical-align: middle;
19+
margin: 0 10px;
20+
21+
&:hover {
22+
background-color: red;
23+
}
24+
}

0 commit comments

Comments
 (0)