release(box-model): v1.0.0

index.json

@@ -1,6 +1,6 @@
 {
   "box-model": {
-    "version": "0.1.0",
+    "version": "1.0.0",
     "style": true,
     "icon": false,
     "test": true,

src/box-model/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0 (6 Sep 2024)
+
+* feat: hover effect

src/box-model/index.ts

@@ -1,6 +1,8 @@
 import map from 'licia/map'
 import isNum from 'licia/isNum'
 import isStr from 'licia/isStr'
+import bind from 'licia/bind'
+import $ from 'licia/$'
 import { exportCjs, pxToNum } from '../share/util'
 import Component, { IComponentOptions } from '../share/Component'
 
@@ -39,11 +41,11 @@ export default class BoxModel extends Component<IOptions> {
     })
   }
   private render() {
-    const { c } = this
+    const { c, $container } = this
     const boxModel = this.getBoxModelData()
 
     // prettier-ignore
-    this.$container.html([boxModel.position ? `<div class="${c('position')}">` : '',
+    $container.html([boxModel.position ? `<div class="${c('position')}">` : '',
       boxModel.position ? `<div class="${c('label')}">position</div><div class="${c('top')}">${boxModel.position.top}</div><br><div class="${c('left')}">${boxModel.position.left}</div>` : '',
       `<div class="${c('margin')}">`,
         `<div class="${c('label')}">margin</div><div class="${c('top')}">${boxModel.margin.top}</div><br><div class="${c('left')}">${boxModel.margin.left}</div>`,
@@ -62,6 +64,57 @@ export default class BoxModel extends Component<IOptions> {
       '</div>',
       boxModel.position ? `<div class="${c('right')}">${boxModel.position.right}</div><br><div class="${c('bottom')}">${boxModel.position.bottom}</div>` : '',
     boxModel.position ? '</div>' : ''].join(''))
+
+    const $margin = this.find('.margin')
+    const $border = this.find('.border')
+    const $padding = this.find('.padding')
+    const $content = this.find('.content')
+
+    const highlightAll = () => {
+      $margin.addClass(c('highlighted'))
+      $border.addClass(c('highlighted'))
+      $padding.addClass(c('highlighted'))
+      $content.addClass(c('highlighted'))
+    }
+    highlightAll()
+
+    const highlight = (type: string) => {
+      this.find(`.highlighted`).rmClass(c('highlighted'))
+      let $el: $.$
+      switch (type) {
+        case 'margin':
+          $el = $margin
+          break
+        case 'border':
+          $el = $border
+          break
+        case 'padding':
+          $el = $padding
+          break
+        default:
+          $el = $content
+          break
+      }
+      $el.addClass(c('highlighted'))
+      this.emit('highlight', type)
+    }
+
+    const highlightMargin = bind(highlight, this, 'margin')
+    const highlightBorder = bind(highlight, this, 'border')
+    const highlightPadding = bind(highlight, this, 'padding')
+    const highlightContent = bind(highlight, this, 'content')
+
+    $margin.on('mouseenter', highlightMargin).on('mouseleave', () => {
+      highlightAll()
+      this.emit('highlight', 'all')
+    })
+    $border.on('mouseenter', highlightBorder).on('mouseleave', highlightMargin)
+    $padding
+      .on('mouseenter', highlightPadding)
+      .on('mouseleave', highlightBorder)
+    $content
+      .on('mouseenter', highlightContent)
+      .on('mouseleave', highlightPadding)
   }
   private getBoxModelData() {
     const { element } = this.options

src/box-model/package.json

@@ -1,5 +1,5 @@
 {
   "name": "box-model",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Css box model metrics"
 }

src/box-model/story.js

@@ -3,6 +3,7 @@ import $ from 'licia/$'
 import h from 'licia/h'
 import story from '../share/story'
 import readme from './README.md'
+import changelog from './CHANGELOG.md'
 import BoxModel from 'luna-box-model.js'
 import { text, object } from '@storybook/addon-knobs'
 
@@ -53,10 +54,15 @@ const def = story(
 
     boxModel.setOption('element', target)
 
+    boxModel
+      .on('highlight', (type) => console.log('highlight', type))
+      .on('leave', () => console.log('leave'))
+
     return boxModel
   },
   {
     readme,
+    changelog,
     source: __STORY__,
   }
 )

src/box-model/style.scss

@@ -34,28 +34,52 @@
   vertical-align: middle;
   padding: 3px;
   margin: 3px;
+  color: $color-text;
+  background: $color-bg-container;
 }
 .position {
   border: 1px grey dotted;
 }
 .margin {
-  color: $color-text;
   border: 1px dashed;
-  background: rgba(246, 178, 107, 0.66);
+  &.highlighted {
+    color: $color-text !important;
+    background: rgba(246, 178, 107, 0.66) !important;
+  }
 }
 .border {
-  color: $color-text;
   border: 1px #000 solid;
-  background: rgba(255, 229, 153, 0.66);
+  &.highlighted {
+    color: $color-text !important;
+    background: rgba(255, 229, 153, 0.66) !important;
+  }
 }
 .padding {
-  color: $color-text;
   border: 1px grey dashed;
-  background: rgba(147, 196, 125, 0.55);
+  &.highlighted {
+    color: $color-text !important;
+    background: rgba(147, 196, 125, 0.55) !important;
+  }
 }
 .content {
-  color: $color-text;
   border: 1px grey solid;
   min-width: 100px;
-  background: rgba(111, 168, 220, 0.66);
+  &.highlighted {
+    color: $color-text !important;
+    background: rgba(111, 168, 220, 0.66) !important;
+  }
+}
+
+.theme-dark {
+  .position,
+  .margin,
+  .border,
+  .padding,
+  .content {
+    color: $color-text-dark;
+    background: $color-bg-container-dark;
+  }
+  .border {
+    border-color: grey;
+  }
 }