@belleui/belle-select - npm Package Compare versions

Comparing version 0.0.1-alpha.1 to 0.0.1-alpha.2

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [0.0.1-alpha.2](https://github.com/belleui/belleui/compare/v0.0.1-alpha.1...v0.0.1-alpha.2) (2021-04-15)
+
+
+### Bug Fixes
+
+* **select:** change choosed option's value ([f4d20c6](https://github.com/belleui/belleui/commit/f4d20c63e4607b947182c0c7f11de55c28c3374c))
+* **select:** options add pointer style ([a3fa55a](https://github.com/belleui/belleui/commit/a3fa55a6d52085a51feeefff8b600384682e341f))
+
+
+
+
+
 ## [0.0.1-alpha.1](https://github.com/belleui/belleui/compare/v0.0.1-alpha.0...v0.0.1-alpha.1) (2020-10-27)
@@ -8,0 +20,0 @@

lib/belle-select-css.js

 import { css } from 'lit-element';
-export default css `:host{display:inline-block;width:150px;color:rgba(0,0,0,0.8)}.select-selector{box-sizing:border-box;position:relative;padding:0 11px;width:100%;height:30px;line-height:30px;background-color:#fff;border:1px solid #d9d9d9;border-radius:2px;-webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.select-selector .select-item{height:100%;width:100%}.belle-select-options{display:block;height:30px;line-height:30px;padding:0 11px}
+export default css `:host{display:inline-block;width:150px;color:rgba(0,0,0,0.8)}.select-selector{box-sizing:border-box;position:relative;padding:0 11px;width:100%;height:30px;line-height:30px;background-color:#fff;border:1px solid #d9d9d9;border-radius:2px;-webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.select-selector .select-item{height:100%;width:100%}.belle-select-options{display:block;height:30px;line-height:30px;padding:0 11px;cursor:pointer}.belle-select-dropdown{display:none}.belle-select-dropdown.show{display:block}
 `;

lib/belle-select-option.js

@@ -41,4 +41,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     handleClick() {
-        this.dispatchEvent(new CustomEvent('click', {
-            bubbles: false,
+        console.log('this.value...', this.value);
+        this.dispatchEvent(new CustomEvent('on-click', {
+            detail: {
+                value: this.value
+            },
+            bubbles: true,
             composed: true
@@ -50,3 +54,3 @@ }));
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
@@ -53,0 +57,0 @@ ], BelleSelectOption.prototype, "value", void 0);

lib/belle-select.d.ts

@@ -17,6 +17,10 @@ import { LitElement, TemplateResult } from 'lit-element';
     content: string;
+    isDropdown: boolean;
     render(): TemplateResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(): void;
     slotChange(): void;
+    protected handleClick(e: Event): void;
+    protected toggleDropdown(): void;
 }
@@ -23,0 +27,0 @@ declare global {

lib/belle-select.js

@@ -11,2 +11,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, LitElement, html, property, query } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map.js';
 import style from './belle-select-css';
@@ -28,2 +29,3 @@ /**
         this.content = '';
+        this.isDropdown = false;
     }
@@ -33,7 +35,16 @@ render() {
       <div class="belle-select">
-        <div class="select-selector">
+        <div
+          class="select-selector"
+          @click=${this.toggleDropdown}
+        >
           <span class="select-item">${this.content}</span>
           <span class="select-arrow"></span>
         </div>
-        <div class="belle-select-dropdown">
+        <div
+          class="belle-select-dropdown"
+          class=${classMap({
+            'belle-select-dropdown': true,
+            show: this.isDropdown
+        })}
+        >
           <slot id="slot" @slotchange=${this.slotChange}></slot>
@@ -46,9 +57,9 @@ </div>
         super.connectedCallback();
-        // this.addEventListener('click', this.handleClick)
+        this.addEventListener('on-click', this.handleClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        // this.removeEventListener('click', this.handleClick)
+        this.removeEventListener('on-click', this.handleClick);
     }
-    slotChange() {
+    updated() {
         const optionSlot = this.optionSlot;
@@ -73,2 +84,13 @@ const optionNodes = optionSlot.assignedNodes();
     }
+    slotChange() {
+        this.requestUpdate();
+    }
+    handleClick(e) {
+        const { value } = e.detail;
+        this.name = value;
+        this.toggleDropdown();
+    }
+    toggleDropdown() {
+        this.isDropdown = !this.isDropdown;
+    }
 };
@@ -94,2 +116,6 @@ BelleSelect.styles = style;
 ], BelleSelect.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], BelleSelect.prototype, "isDropdown", void 0);
 BelleSelect = __decorate([
@@ -96,0 +122,0 @@ customElement('belle-select')

package.json

 {
   "name": "@belleui/belle-select",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "",
@@ -10,3 +10,3 @@ "keywords": [
   "author": "WUSO01 <[e-mail]>",
-  "homepage": "https://github.com/belleui/belleui/tree/master/packages/belle-select",
+  "homepage": "https://github.com/belleui/belleui/tree/master/packages/select",
   "license": "MIT",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
     "url": "https://github.com/belleui/belleui",
-    "directory": "packages/belle-select"
+    "directory": "packages/select"
   },
@@ -31,3 +31,3 @@ "publishConfig": {
   },
-  "gitHead": "540a9d3bd74420d1de2b4d9045415fbad9d91c86"
+  "gitHead": "3664724905e2074a2e3ec3b5bfc8e0489f431a6a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10766

increased by15.23%

Lines of code

247

increased by16.51%

Number of low quality alerts

1

decreased by-50%

No dependency changes