feat(checkbox): checkbox element and style for pages refactor

packages/ui/build.mjs

@@ -3,6 +3,7 @@ import { readFile } from 'node:fs/promises';
 // eslint-disable-next-line import/no-unresolved
 import clean from '@akrc/esbuild-plugin-clean';
 // eslint-disable-next-line import/no-unresolved
+import vitaminTheme from '@websublime/vitamin-theme';
 import postcssAutoprefixer from 'autoprefixer';
 import { context } from 'esbuild';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';
@@ -17,7 +18,15 @@ import packageJson from './package.json' assert { type: 'json' };
 const processor = postcss([
   postcssImport(),
   postcssNested(),
-  tailwindcss({ config: './tailwind.config.cjs' }),
+  tailwindcss({
+    config: {
+      content: ['./src/**/*.{ts,tsx}'],
+      plugins: [vitaminTheme()],
+      theme: {
+        extend: {}
+      }
+    }
+  }),
   postcssAutoprefixer()
 ]);
 

packages/ui/development.mjs

@@ -5,6 +5,7 @@ import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import clean from '@akrc/esbuild-plugin-clean';
+import vitaminTheme from '@websublime/vitamin-theme';
 import postcssAutoprefixer from 'autoprefixer';
 import { context } from 'esbuild';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';
@@ -23,12 +24,31 @@ const ROOT = resolve(join(dirname(fileURLToPath(import.meta.url)), '../'));
 const CORE = resolve(join(ROOT, './core/dist'));
 const THEME = resolve(join(ROOT, './theme/dist'));
 
-const processor = postcss([
-  postcssImport(),
-  postcssNested(),
-  tailwindcss({ config: './tailwind.config.cjs' }),
-  postcssAutoprefixer()
-]);
+const processor = (html = false) =>
+  postcss([
+    postcssImport(),
+    postcssNested(),
+    html
+      ? tailwindcss({
+          config: {
+            content: ['./www/index.html'],
+            plugins: [vitaminTheme()],
+            theme: {
+              extend: {}
+            }
+          }
+        })
+      : tailwindcss({
+          config: {
+            content: ['./src/**/*.{ts,tsx}'],
+            plugins: [vitaminTheme()],
+            theme: {
+              extend: {}
+            }
+          }
+        }),
+    postcssAutoprefixer()
+  ]);
 
 function local() {
   const handlerCore = sirv(CORE, { dev: true, single: true });
@@ -65,7 +85,7 @@ function styleTheme() {
     setup(build) {
       build.onStart(async () => {
         const content = await readFile('./src/style.css', 'utf8');
-        const { css } = await processor.process(content, { from: './src/style.css' });
+        const { css } = await processor(true).process(content, { from: './src/style.css' });
         await outputFile('./www/assets/style.css', css);
         return console.info('Tailwind style generated.');
       });
@@ -102,13 +122,15 @@ async function development({ serve = true, watch = true } = {}) {
       clean({ dirs: ['www/assets'] }),
       litCssPlugin({
         transform: async (css, { filePath }) => {
-          return await processor.process(css, { from: filePath }).then((result) => {
-            return result.css;
-          });
+          return await processor(false)
+            .process(css, { from: filePath })
+            .then((result) => {
+              return result.css;
+            });
         }
       }),
-      styleTheme(),
-      litCssInJs()
+      litCssInJs(),
+      styleTheme()
     ],
     sourcemap: true,
     target: 'es2020',

packages/ui/src/browser.ts

@@ -1,5 +1,7 @@
+import { registerComponent as registCheckboxComponent } from './elements/checkbox/plugin.js';
 import { registerComponent as registIconComponent } from './elements/icon/plugin.js';
 import { registerComponent as registSwitchComponent } from './elements/switch/plugin.js';
 
 registIconComponent();
 registSwitchComponent();
+registCheckboxComponent();

packages/ui/src/elements/checkbox/checkbox.ts

@@ -0,0 +1,76 @@
+/**
+|--------------------------------------------------------------------------
+| Copyright Websublime All Rights Reserved.
+|--------------------------------------------------------------------------
+|
+| Use of this source code is governed by an MIT-style license that can be
+| found in the LICENSE file at https://websublime.dev/license
+|
+*/
+
+import { ComponentMetadata } from '@websublime/vitamin-core';
+import { ComponentElement } from '@websublime/vitamin-core/web-component.js';
+import { css, html, unsafeCSS } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import { version } from '../../version.js';
+
+import style from './style.css';
+import type { CheckboxElementOptions } from './types.js';
+
+const metadata: ComponentMetadata = {
+  description: 'Checkbox component',
+  link: 'https://websublime.dev/elements/checkbox',
+  name: 'Checkbox Component',
+  qa: 'ui-checkbox',
+  scope: '@websublime/vitamin-ui',
+  version
+};
+
+export class CheckboxElement extends ComponentElement<CheckboxElementOptions> {
+  static styles = css`
+    ${unsafeCSS(style)}
+  `;
+
+  @property({ reflect: true, type: Boolean })
+  checked = false;
+
+  @query('input')
+  checkbox!: HTMLInputElement;
+
+  constructor() {
+    super(metadata);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    const { className = [] } = this.options;
+
+    for (const name of className) {
+      this.classList.add(name);
+    }
+  }
+
+  handleChange() {
+    this.checked = Boolean(this.checkbox.checked);
+
+    const event = new CustomEvent('change', { bubbles: true, cancelable: true, composed: true, detail: this.checked });
+    this.dispatchEvent(event);
+  }
+
+  render() {
+    return html`
+      <label class="ui-checkbox-label" for="checkbox">
+        <input type="checkbox" id="checkbox" @change=${this.handleChange} .checked=${this.checked} />
+        <slot name="label"></slot>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-checkbox': CheckboxElement;
+  }
+}

packages/ui/src/elements/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { registerComponent } from './plugin.js';
+export { CheckboxElement } from './checkbox.js';
+export type { CheckboxElementOptions } from './types.js';

packages/ui/src/elements/checkbox/plugin.ts

@@ -0,0 +1,14 @@
+import { defineWebComponent } from '@websublime/vitamin-core/web-component.js';
+
+import { CheckboxElement } from './checkbox.js';
+import type { CheckboxElementOptions } from './types.js';
+
+/**
+ * @public
+ */
+export const registerComponent = (options: CheckboxElementOptions = {}, name = 'ui-checkbox') =>
+  defineWebComponent(name, CheckboxElement, {
+    className: ['ui-checkbox'],
+    enabled: false,
+    ...options
+  });

packages/ui/src/elements/checkbox/style.css

@@ -0,0 +1,8 @@
+@tailwind utilities;
+@tailwind components;
+
+@layer components {
+  :host {
+    @apply flex flex-wrap content-center;
+  }
+}

packages/ui/src/elements/checkbox/types.ts

@@ -0,0 +1,6 @@
+import { WebComponentOptions } from '@websublime/vitamin-core';
+
+export interface CheckboxElementOptions extends WebComponentOptions {
+  className?: string[];
+  enabled?: boolean;
+}

packages/ui/src/index.ts

@@ -1,2 +1,3 @@
 export { IconElement, registerComponent as registIconComponent } from './elements/icon/index.js';
 export { SwitchElement, registerComponent as registSwitchComponent } from './elements/switch/index.js';
+export { CheckboxElement, registerComponent as registCheckboxComponent } from './elements/checkbox/index.js';

packages/ui/src/main.ts

@@ -1,5 +1,7 @@
+import { registerComponent as registCheckboxComponent } from './elements/checkbox/plugin.js';
 import { registerComponent as registIconComponent } from './elements/icon/plugin.js';
 import { registerComponent as registSwitchComponent } from './elements/switch/plugin.js';
 
 registIconComponent();
 registSwitchComponent();
+registCheckboxComponent();

packages/ui/src/style.css

@@ -1,5 +1,51 @@
 @tailwind base;
+@tailwind utilities;
+@tailwind components;
 
-.ui-play-section {
-  display: flex;
+@layer base {
+  body {
+    --font-size: 16px;
+  }
 }
+
+@layer utilities {
+  .transition-colors {
+    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+  }
+
+  .border-b {
+    border-bottom-width: 1px;
+  }
+}
+
+@layer components {
+  .ui-play-section {
+    display: flex;
+    @apply rounded-[0.5rem] border shadow;
+  }
+
+  .ui-play-container {
+    flex: 1;
+    @apply flex-col flex;
+  }
+
+  .ui-play-nav {
+    border-bottom-width: 1px;
+    @apply flex h-16 items-center px-4;
+  }
+
+  .ui-play-content {
+    @apply flex-1 space-y-4 p-8 pt-6;
+
+    table tr {
+      @apply border-b transition-colors;
+
+      td {
+        @apply p-4 align-middle;
+      }
+    }
+  }
+}
+

packages/ui/www/index.html

@@ -57,43 +57,48 @@
     <style>.ui-switch {  }</style>
 
     <section class="ui-play-section">
-      <table>
-        <tr>
-          <th>Tag Name</th>
-          <th>Component</th>
-          <th>Properties</th>
-          <th>CSS Properties</th>
-        </tr>
-        <tr>
-          <td>
-            <p>Name: ui-icon</p>
-          </td>
-          <td>
-            <i style="height: 64px; width: 64px; display: block"><ui-icon name="github"></ui-icon></i>
-          </td>
-          <td>TODO</td>
-          <td>TODO</td>
-        </tr>
-        <tr>
-          <td>
-            <p>Name: ui-switch</p>
-          </td>
-          <td>
-            <ui-switch>
-              <ui-icon slot="prepend" name="moon"></ui-icon>
-              <ui-icon slot="append" name="sun"></ui-icon>
-            </ui-switch>
-            <ui-switch>
-              <span slot="left">OFF</span>
-              <span slot="right">ON</span>
-              <ui-icon style="color: red" slot="prepend" name="moon"></ui-icon>
-              <ui-icon style="color: green" slot="append" name="sun"></ui-icon>
-            </ui-switch>
-          </td>
-          <td>TODO</td>
-          <td>TODO</td>
-        </tr>
-      </table>
+      <div class="ui-play-container">
+        <nav class="ui-play-nav">Navigation</nav>
+        <div class="ui-play-content">
+          <table class="w-full">
+            <tr>
+              <th>Tag Name</th>
+              <th>Component</th>
+              <th>Properties</th>
+              <th>CSS Properties</th>
+            </tr>
+            <tr>
+              <td>
+                <p>Name: ui-icon</p>
+              </td>
+              <td>
+                <i style="height: 64px; width: 64px; display: block"><ui-icon name="github"></ui-icon></i>
+              </td>
+              <td>TODO</td>
+              <td>TODO</td>
+            </tr>
+            <tr>
+              <td>
+                <p>Name: ui-switch</p>
+              </td>
+              <td>
+                <ui-switch>
+                  <ui-icon slot="prepend" name="moon"></ui-icon>
+                  <ui-icon slot="append" name="sun"></ui-icon>
+                </ui-switch>
+                <ui-switch>
+                  <span slot="left">OFF</span>
+                  <span slot="right">ON</span>
+                  <ui-icon style="color: red" slot="prepend" name="moon"></ui-icon>
+                  <ui-icon style="color: green" slot="append" name="sun"></ui-icon>
+                </ui-switch>
+              </td>
+              <td>TODO</td>
+              <td>TODO</td>
+            </tr>
+          </table>
+        </div>
+      </div>
     </section>
 
     <script type="module" src="/assets/main.js"></script>