feat(components): CLabel

packages/chusho/lib/components/CLabel/CLabel.spec.js

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import CLabel from './CLabel';
+
+describe('CLabel', () => {
+  it('renders with config class', () => {
+    const wrapper = mount(CLabel, {
+      global: {
+        provide: {
+          $chusho: {
+            options: {
+              components: {
+                label: {
+                  class: 'label',
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    expect(wrapper.classes()).toEqual(['label']);
+  });
+
+  it('renders default slot and attributes', () => {
+    const wrapper = mount(CLabel, {
+      attrs: {
+        for: 'the-field',
+      },
+      slots: {
+        default: 'Label',
+      },
+    });
+
+    expect(wrapper.html()).toBe('<label for="the-field">Label</label>');
+  });
+});

packages/chusho/lib/components/CLabel/CLabel.ts

@@ -0,0 +1,23 @@
+import { defineComponent, h, inject, mergeProps } from 'vue';
+
+import { DollarChusho } from '../../types';
+import { generateConfigClass } from '../../utils/components';
+import componentMixin from '../mixins/componentMixin';
+
+export default defineComponent({
+  name: 'CLabel',
+
+  mixins: [componentMixin],
+
+  inheritAttrs: false,
+
+  render() {
+    const labelConfig = inject<DollarChusho | null>('$chusho', null)?.options
+      ?.components?.label;
+    const attrs: Record<string, unknown> = {
+      ...generateConfigClass(labelConfig?.class, this.$props),
+    };
+
+    return h('label', mergeProps(this.$attrs, attrs), this.$slots);
+  },
+});

packages/chusho/lib/components/CLabel/index.ts

@@ -0,0 +1,3 @@
+import CLabel from './CLabel';
+
+export { CLabel };

packages/chusho/lib/components/index.ts

@@ -4,6 +4,7 @@ export * from './CCheckbox';
 export * from './CCollapse';
 export * from './CDialog';
 export * from './CIcon';
+export * from './CLabel';
 export * from './CPicture';
 export * from './CSelect';
 export * from './CTabs';

packages/chusho/lib/types/index.ts

@@ -53,6 +53,7 @@ interface ComponentsOptions {
     width?: number;
     height?: number;
   };
+  label?: ComponentCommonOptions;
   picture?: ComponentCommonOptions;
   select?: ComponentCommonOptions;
   selectBtn?: ComponentCommonOptions;

packages/chusho/src/chusho.config.js

@@ -32,9 +32,10 @@ export default {
     },
 
     checkbox: {
-      class({ checked }) {
+      class({ variant, checked }) {
         return [
           'appearance-none inline-block w-3 h-3 rounded-sm border-2 border-white ring-2 ring-gray-500',
+          { 'mr-3': variant?.includes('inline') },
           { 'bg-white': !checked },
           { 'bg-accent-500': checked },
         ];
@@ -74,6 +75,18 @@ export default {
       class: 'inline-block align-middle pointer-events-none fill-current',
     },
 
+    label: {
+      class({ variant }) {
+        return [
+          'cursor-pointer',
+          {
+            'block mb-1 font-bold': !variant,
+            'inline-flex items-center': variant?.includes('inline'),
+          },
+        ];
+      },
+    },
+
     picture: {
       class: 'picture',
     },

packages/chusho/src/components/examples/components/label/Default.vue

@@ -0,0 +1,3 @@
+<template>
+  <CLabel>Label</CLabel>
+</template>

packages/chusho/src/components/examples/components/label/WithCheckbox.vue

@@ -0,0 +1,5 @@
+<template>
+  <CLabel variant="inline" for="my-field">
+    <CCheckbox id="my-field" variant="inline" /> Label
+  </CLabel>
+</template>

packages/chusho/src/components/examples/components/label/WithTextField.vue

@@ -0,0 +1,4 @@
+<template>
+  <CLabel for="my-field">Label</CLabel>
+  <CTextField id="my-field" />
+</template>

packages/docs/.vuepress/config.js

@@ -62,6 +62,7 @@ module.exports = {
             '/guide/components/collapse.md',
             '/guide/components/dialog.md',
             '/guide/components/icon.md',
+            '/guide/components/label.md',
             '/guide/components/picture.md',
             '/guide/components/select.md',
             '/guide/components/tabs.md',

packages/docs/chusho.config.js

@@ -105,6 +105,10 @@ export default {
       class: 'inline-block align-middle fill-current stroke-current',
     },
 
+    label: {
+      class: 'cursor-pointer font-medium',
+    },
+
     picture: {
       class: 'block h-auto rounded-2xl',
     },

packages/docs/guide/components/README.md

@@ -6,6 +6,7 @@
 - [Collapse](collapse.html)
 - [Dialog](dialog.html)
 - [Icon](icon.html)
+- [Label](label.html)
 - [Picture](picture.html)
 - [Select](select.html)
 - [Tabs](tabs.html)

packages/docs/guide/components/label.md

@@ -0,0 +1,54 @@
+# Label
+
+Just like a regular `<label />`
+
+<Showcase>
+    <CLabel>
+        I’m a label!
+    </CLabel>
+</Showcase>
+
+## Config
+
+The options below are to be set in the [global configuration](/guide/config.html) at the following location:
+
+```js
+{
+  components: {
+    label: { ... },
+  },
+}
+```
+
+### class
+
+Classes applied to the label element, except when the prop `bare` is set to `true`. See [styling components](/guide/styling-components/).
+
+- **type:** `Array<String | Object> | Object | String | (props: Object) => {}`
+- **default:** `null`
+
+#### Example
+
+```js
+class: 'label'
+```
+
+## API
+
+<Docgen :components="['CLabel']" />
+
+## Examples
+
+### Simplest
+
+```vue:no-line-numbers
+<CLabel>Label</CLabel>
+```
+
+### Linked to a field
+
+```vue
+<CLabel for="the-field">
+  <CCheckbox id="the-field" /> Something labelling the checkbox
+</CLabel>
+```