refactor(label): update component (#433)

* refactor: label

* refactor: remove control story

* fix: lint issues

* chore: add more test

* fix: test

* fix: lint issues

* fix: emits

* fix: update packages/components/label/src/stories/Styled.vue

* fix: lint issues

package.json

@@ -166,7 +166,7 @@
       "@oku-ui/utils": "workspace:^",
       "@oku-ui/visually-hidden": "workspace:^",
       "@vue/runtime-core": "3.3.9",
-      "vite": "5.0.2",
+      "vite": "5.0.4",
       "vue": "3.3.9"
     }
   },

packages/components/avatar/README.md

@@ -5,7 +5,6 @@ An image element with a fallback for representing the user.
 
 [![Version](https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/avatar) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/avatar)
 
-
 ## Installation
 
 ```sh

packages/components/label/README.md

@@ -3,12 +3,12 @@ Renders an accessible label associated with controls.
 
 ![@oku-ui/label](./../../../.github/assets/og/oku-label.jpg)
 
-<span><a href="https://www.npmjs.com/package/@oku-ui/label "><img src="https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/label"> <img src="https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/label"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+[![Version](https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/label) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/label)
 
 ## Installation
 
 ```sh
 $ pnpm add @oku-ui/label
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/label)
+[Documentation](https://oku-ui.com/primitives/components/label)

packages/components/label/package.json

@@ -38,8 +38,7 @@
   },
   "dependencies": {
     "@oku-ui/primitive": "latest",
-    "@oku-ui/use-composable": "latest",
-    "@oku-ui/utils": "latest"
+    "@oku-ui/use-composable": "latest"
   },
   "devDependencies": {
     "tsconfig": "workspace:^"

packages/components/label/src/index.ts

@@ -1,8 +1,8 @@
-export {
-  OkuLabel,
-} from './label'
+export { OkuLabel } from './label'
+
 export type {
   LabelProps,
+  LabelEmits,
   LabelElement,
-  LabelNaviteElement,
-} from './label'
+  LabelNativeElement,
+} from './props'

packages/components/label/src/label.ts

@@ -1,47 +1,35 @@
 import { defineComponent, h, mergeProps } from 'vue'
-import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
-import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import { useForwardRef } from '@oku-ui/use-composable'
-
-export type LabelNaviteElement = OkuElement<'label'>
-export type LabelElement = HTMLLabelElement
-
-export interface LabelProps extends PrimitiveProps {}
-
-const NAME = 'OkuLabel'
+import { useForwardRef, useListeners } from '@oku-ui/use-composable'
+import { Primitive } from '@oku-ui/primitive'
+import { LABEL_NAME, labelProps } from './props'
+import type { LabelEmits, LabelNativeElement } from './props'
 
 const label = defineComponent({
-  name: NAME,
+  name: LABEL_NAME,
   inheritAttrs: false,
   props: {
-    ...primitiveProps,
+    ...labelProps.props,
   },
   emits: {
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    mousedown: (event: MouseEvent) => true,
+    ...labelProps.emits,
   },
   setup(props, { attrs, slots, emit }) {
     const forwardedRef = useForwardRef()
+    const emits = useListeners(['onMousedown'])
 
-    const originalReturn = () => h(Primitive.label, {
-      ...mergeProps(attrs, props),
-      ref: forwardedRef,
+    return () => h(Primitive.label, {
+      ...mergeProps(attrs, emits),
       asChild: props.asChild,
-      onMousedown: (event: MouseEvent) => {
+      ref: forwardedRef,
+      onMousedown: (event: LabelEmits['mousedown'][0]) => {
         emit('mousedown', event)
         // prevent text selection when double clicking label
         if (!event.defaultPrevented && event.detail > 1)
           event.preventDefault()
       },
-    }, {
-      default: () => slots.default?.(),
-    })
-    return originalReturn
+    }, () => slots.default?.())
   },
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuLabel = label as typeof label &
-  (new () => {
-    $props: LabelNaviteElement
-  })
+export const OkuLabel = label as typeof label & (new () => { $props: LabelNativeElement })

packages/components/label/src/props.ts

@@ -0,0 +1,27 @@
+import { primitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
+
+export const LABEL_NAME = 'OkuLabel'
+
+/* -------------------------------------------------------------------------------------------------
+ * Label - label.ts
+ * ----------------------------------------------------------------------------------------------- */
+
+export type LabelNativeElement = OkuElement<'label'>
+export type LabelElement = HTMLLabelElement
+
+export interface LabelProps extends PrimitiveProps { }
+
+export interface LabelEmits {
+  mousedown: [event: MouseEvent]
+}
+
+export const labelProps = {
+  props: {
+    ...primitiveProps,
+  },
+  emits: {
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    mousedown: (event: LabelEmits['mousedown'][0]) => true,
+  },
+}

packages/components/label/src/stories/Control.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+function alert(text: string) {
+  // eslint-disable-next-line no-alert
+  window.alert(text)
+}
+</script>
+
+<template>
+  <button class="label-control" v-bind="$attrs" @click="alert('clicked')">
+    Control
+  </button>
+</template>

packages/components/label/src/stories/Label.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import type { ILabelProps } from './LabelDemo.vue'
+import OkuLabel from './LabelDemo.vue'
+
+interface StoryProps extends ILabelProps { }
+
+const meta = {
+  title: 'Components/Label',
+  component: OkuLabel,
+  args: {
+    template: 'Styled',
+  },
+} satisfies Meta<typeof OkuLabel> & {
+  args: StoryProps
+}
+
+export default meta
+type Story = StoryObj<typeof meta> & {
+  args: StoryProps
+}
+
+export const Styled: Story = {
+  args: {
+    template: 'Styled',
+  },
+  render: (args: any) => ({
+    components: { OkuLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <OkuLabel v-bind="args" />
+    `,
+  }),
+}
+
+export const WithControl: Story = {
+  args: {
+    template: 'WithControl',
+  },
+  render: (args: any) => ({
+    components: { OkuLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <OkuLabel v-bind="args" />
+    `,
+  }),
+}

packages/components/label/src/stories/LabelDemo.vue

@@ -1,55 +1,51 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { OkuLabel } from '@oku-ui/label'
+import Styled from './Styled.vue'
+import WithControl from './WithControl.vue'
 
-export interface OkuLabelProps {
-  label: string
-  template: '#1' | '#2'
+withDefaults(defineProps<ILabelProps>(), {})
+
+export interface ILabelProps {
+  template?: 'Styled' | 'WithControl'
   allshow?: boolean
 }
-
-withDefaults(defineProps<OkuLabelProps>(), {
-  label: 'First Name',
-  template: '#1',
-})
-
-const labelRef = ref()
-onMounted(() => {
-  console.warn(labelRef.value)
-})
-const alert = () => console.warn('alert')
-
-const value = ref()
 </script>
 
 <template>
-  <div class="cursor-default inline-block">
-    <div v-if="template === '#1' || allshow" class="flex flex-col">
-      <OkuLabel ref="labelRef" :value="value" class="text-black text-2xl border-2 border-gray-500 mb-4" for="firstName">
-        {{ label }}
-      </OkuLabel>
-      <input id="firstName" class="mt-4 bg-gray-200 p-2 border-2 border-gray-500" type="text" defaultValue="Pedro Duarte">
-    </div>
-    <div v-if="template === '#2' || allshow" class="flex flex-col">
-      <div>
-        <h1>Wrapping control</h1>
-        <OkuLabel>
-          <button class="flex-inline p-4 border bg-gray-400 hover:bg-red-500" @click="alert">
-            Control
-          </button>
-          {{ label }}
-        </OkuLabel>
-      </div>
-
-      <div>
-        <h1>Referencing control</h1>
-        <button id="control" class="flex-inline p-4 border bg-gray-400 hover:bg-red-500" @click="alert">
-          Control
-        </button>
-        <OkuLabel for="control">
-          {{ label }}
-        </OkuLabel>
-      </div>
-    </div>
+  <div>
+    <template v-if="template === 'Styled' || allshow">
+      <Styled />
+    </template>
+
+    <template v-if="template === 'WithControl' || allshow">
+      <WithControl />
+    </template>
   </div>
 </template>
+
+<style>
+.label {
+  /* RECOMMENDED_CSS_LABEL */
+  /* ensures it can receive vertical margins */
+  display: inline-block;
+  /* better default alignment */
+  vertical-align: middle;
+  /* mimics default `label` tag (as we render a `span`) */
+  cursor: default;
+
+  display: inline-block;
+  border: 1px solid gainsboro;
+  padding: 10px;
+}
+
+.label-control {
+  display: inline-flex;
+  border: 1px solid gainsboro;
+  padding: 10px;
+  vertical-align: middle;
+  margin: 0px 10px;
+
+  &:hover {
+    background-color: red;
+  }
+}
+</style>

packages/components/label/src/stories/Styled.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { OkuLabel } from '@oku-ui/label'
+</script>
+
+<template>
+  <OkuLabel class="label">
+    Label
+  </OkuLabel>
+</template>

packages/components/label/src/stories/WithControl.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { OkuLabel } from '@oku-ui/label'
+import Control from './Control.vue'
+</script>
+
+<template>
+  <h1>Wrapping control</h1>
+  <OkuLabel>
+    <Control class="label-control" /> Label
+  </OkuLabel>
+
+  <h1>Referencing control</h1>
+  <Control id="control" class="label-control" />
+  <OkuLabel for="control">
+    Label
+  </OkuLabel>
+</template>