select-pure - npm Package Compare versions

Comparing version 0.6.2 to 2.0.0-alpha.0

package.json

 {
   "name": "select-pure",
-  "version": "0.6.2",
-  "description": "Pure JavaScript select component.",
+  "version": "2.0.0-alpha.0",
+  "description": "Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient",
   "author": {
@@ -10,26 +10,24 @@ "name": "Maksym Dudynskyi",
   },
+  "scripts": {
+    "commit": "git-cz",
+    "serve": "es-dev-server --app-index examples/index.html --node-resolve --watch --open",
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
   "keywords": [
-    "javascript",
     "select",
-    "js"
+    "custom select",
+    "web component",
+    "customizable",
+    "accessible",
+    "mobile friendly",
+    "select box"
   ],
   "files": [
-    "lib/",
-    "dist/",
-    "LICENSE",
-    "README.md"
+    "src",
+    "dist"
   ],
-  "main": "lib/index.js",
-  "scripts": {
-    "build:dist": "rollup -c",
-    "build:lib": "babel -d lib src",
-    "build": "yarn build:dist && yarn build:lib",
-    "test": "jest --no-cache --coverage",
-    "test:update-coverage": "./scripts/update-coverage.sh",
-    "lint:js": "./node_modules/eslint/bin/eslint.js src/",
-    "lint:tests": "./node_modules/eslint/bin/eslint.js src/**/__tests__",
-    "lint:all": "yarn lint:js && yarn lint:tests",
-    "prepublish": "yarn lint:all && yarn test && yarn build && yarn test:update-coverage",
-    "commit": "git-cz"
-  },
+  "svelte": "src/index.js",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
   "repository": {
@@ -39,55 +37,15 @@ "type": "git",
   },
-  "babel": {
-    "presets": [
-      "@babel/env"
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-object-rest-spread",
-      "transform-es2015-modules-commonjs"
-    ],
-    "env": {
-      "test": {
-        "presets": [
-          [
-            "@babel/env",
-            {
-              "modules": false
-            }
-          ],
-          "jest"
-        ]
-      }
-    }
-  },
-  "jest": {
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true,
-    "testURL": "http://localhost",
-    "testPathIgnorePatterns": [
-      "lib/"
-    ]
-  },
-  "pre-commit": [
-    "lint:all",
-    "test",
-    "build"
-  ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "7.13.10",
-    "@babel/core": "7.13.10",
-    "@babel/preset-env": "7.13.12",
-    "@rollup/plugin-commonjs": "17.1.0",
-    "@rollup/plugin-node-resolve": "11.2.0",
-    "babel-jest": "26.6.3",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
-    "codecov": "3.7.2",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "commitizen": "4.2.3",
     "cz-conventional-changelog": "3.3.0",
+    "es-dev-server": "^2.1.0",
     "eslint": "7.22.0",
-    "jest": "26.6.3",
+    "jest": "^26.6.3",
+    "lit-element": "^2.4.0",
     "pre-commit": "^1.2.2",
-    "rollup": "2.42.4",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-eslint": "7.0.0",
+    "rollup": "^2.45.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-terser": "^7.0.2"
@@ -94,0 +52,0 @@ },

README.md

@@ -1,2 +0,2 @@
-# SelectPure JavaScript component
+[#](#) Custom JavaScript `<select>` component. Easy-to-use, accessible, mobile friendly and super efficient.
 
@@ -6,111 +6,134 @@ [![npm version](https://img.shields.io/npm/v/select-pure.svg)](https://www.npmjs.com/package/select-pure)
 [![brotli size](http://img.badgesize.io/https://unpkg.com/select-pure/dist/bundle.min.js?compression=brotli&label=brotli)](https://unpkg.com/select-pure/dist/bundle.min.js)
-[![npm](https://img.shields.io/npm/dt/select-pure.svg)](https://www.npmjs.com/package/select-pure)
+[![npm](https://img.shields.io/npm/dm/select-pure.svg)](https://www.npmjs.com/package/select-pure)
 [![Build Status](https://travis-ci.org/dudyn5ky1/select-pure.svg?branch=master)](https://travis-ci.org/dudyn5ky1/select-pure)
 [![codecov](https://codecov.io/gh/dudyn5ky1/select-pure/branch/master/graph/badge.svg)](https://codecov.io/gh/dudyn5ky1/select-pure)
 
-## Installation
+## Description
 
-#### NPM
+SelectPure is a Web Component (Custom Element) which makes it super use and customize. Main goal is to use extended API of the native HTML `<select>` element and provide additional features, like autocomplete, custom styling and many more. The package itself is stable to be used, however, if you've found any issues, please report them [here](https://github.com/dudyn5ky1/select-pure/issues) or create a PR of your own.
 
-```
-npm i select-pure --save
-```
+If you want to use older version, please refer to this [README](./README-v1.md).
 
-#### Yarn
+## Usage
 
-```
-yarn add select-pure
-```
+SelectPure is very easy to use. At first you have to install a package
 
-#### CDN
+`yarn add select-pure` or `npm i select-pure --save`
 
+then include it in your JavaScript file
+
+`import 'select-pure';`
+
+and use in the similar way as you would use a native HTML `<select>`.
+
 ```
-<script src="https://unpkg.com/select-pure@latest/dist/bundle.min.js"></script>
+<select-pure name="country" id="country">
+  <option-pure value="UA">Ukraine</option-pure>
+  <option-pure value="PL">Poland</option-pure>
+  <option-pure value="DE">Germany</option-pure>
+  <option-pure value="US">USA</option-pure>
+  <option-pure value="US" disabled>Russia</option-pure>
+</select-pure>
 ```
-## Usage
 
-```javascript
-import SelectPure from "select-pure";
+## SelectPure instance
 
-new SelectPure(element, config);
+In order to call API methods of the `SelectPure`, subscribe to callbacks or use it's properties, you can simple use `querySelector`.
 
-`element` // Required. Either selector or HTML node.
-`config` // Required. Configuration object.
 ```
+const selectPure = document.querySelector("select-pure");
 
-### Configuration
+console.log(selectPure.selectedIndex);
 
-| Property | Required | Type | Description |
-| --- | --- | --- | --- |
-| [option](#option) | true | Array | Collection of options to be rendered. Each `option` consists of `value`, `label` and optional property `disabled`. Properties for the single option object are listed below. |
-| [classNames](#classNames) | false | Object | Object with custom classNames to be used inside select. In the next major version default classNames will be removed and this property will become required. |
-| multiple | false | Boolean | `true` if multiple options can be selected. |
-| autocomplete | false | Boolean | Adds autocomplete input. Disabled by default. |
-| icon | false | String | If specified - `<i></i>` will be inserted inside `select-pure__selected-label`. Works only with `multiple` option set to `true`. |
-| inlineIcon | false | HMTLElement | Custom cross icon for multiple select. |
-| value | false | String \| Array | Initially selected value. If not provided - first option will be selected. If `multiple` is `true` -- `Array` should be provided. |
-| placeholder | false | String | Placeholder for cases when value is not selected by default. |
-| onChange | false | Function | Callback that returns value when option is being selected. Returns `Array` if `multiple` is `true`. |
+selectPure.disable();
+```
 
-#### option
+### Attributes
 
-Properties of a single option passed to the options Array in configuration.
+`<select-pure>` supports the following attributes: `name`, `id` and `disabled`.
 
-| Property | Required | Type | Description |
-| --- | --- | --- | --- |
-| value | true | String | Value of an option. |
-| label | true | String | Label of an option. |
-| disabled | false | Boolean | `true` if option is disabled. `false` by default. |
+`<option-pure>` supports `value`, `label`, `disabled`, `selected` and `hidden` attributes.
 
-#### classNames
+### Available properties
 
-In the next major version default classNames will be removed and this property will become required.
+| property      | description                                                                                                                                                                    |
+|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| selectedIndex | Returns index of the selected option. You can also manipulate selected value with changing this property (`selectPure.selectedIndex = 2`). Just like in the native `<select>`. |
+| value         | Returns selected value.                                                                                                                                                        |
 
-| Property | Default value | Description |
-| --- | --- | --- |
-| select | "select-pure__select" | Wrapper div. |
-| dropdownShown | "select-pure__select--opened" | Applied to the wrapper when dropdown is shown. |
-| multiselect | "select-pure__select--multiple" | Applied to the wrapper if it's a multiselect. |
-| label | "select-pure__label" | Label span. |
-| placeholder | "select-pure__placeholder" | Placeholder span. |
-| dropdown | "select-pure__options" | Options dropdown. |
-| option | "select-pure__option" | Single option. |
-| optionDisabled | "select-pure__option--disabled" | Single option. |
-| autocompleteInput | "select-pure__autocomplete" | Autocomplete input |
-| selectedLabel | "select-pure__selected-label" | Selected label for multiselect. |
-| selectedOption | "select-pure__option--selected" | Applied to option when selected. |
-| placeholderHidden | "select-pure__placeholder--hidden" | Hides placeholder when the value is selected. |
-| optionHidden | "select-pure__option--hidden" | Hides options that does not match autocomplete input. |
+### Callbacks
 
+If you want to set a callback for when the new value is selected, you can just use the traditional `addEventListener`.
 
-### API
+```
+const selectPure = document.querySelector("select-pure");
+selectPure.addEventListener("change", (event) => {
+  // You can use
+  // event.target.value or
+  // event.currentTarget.value
+});
+```
 
-| Method | Description |
-| --- | --- |
-| value() | Returns currently selected value. |
-| reset() | Resets currently selected value. |
+### API methods
 
-## Structure
+| method    | description        |
+|-----------|--------------------|
+| disable() | Disables select.   |
+| enable()  | Enables select.    |
+| open()    | Opens a dropdown.  |
+| close()   | Closes a dropdown. |
 
+### Custom styles
+
+SelectPure offers high level of customisation. You can match any design you want by just providing a simple set of css variables. Below you can find their names and default values that are included in the package.
+
 ```
-select-pure/
-└── lib/
-    └── select-pure.min.js
+select-pure {
+  --select-height: 44px;
+  --select-width: 100%;
+  --border-radius: 4px;
+  --border-width: 1px;
+  --border-color: #000;
+  --padding: 0 10px;
+  --dropdown-z-index: 2;
+  --disabled-background-color: #bdc3c7;
+  --disabled-color: #ecf0f1;
+  --background-color: #fff;
+  --color: #000;
+  --hover-background-color: #e3e3e3;
+  --hover-color: #000;
+  --selected-background-color: #e3e3e3;
+  --selected-color: #000;
+  --dropdown-gap: 0;
+  --font-size: 14px;
+  --font-family: inherit;
+  --font-weight: 400;
+}
 ```
 
+### <form> support
+
+If you place `<select-pure>` inside a `<form>` and specify a `name` or `id` attribute, it will then append a hidden `input` with a given name inside a `<form>` and trigger `change` event, when value is selected.
+
 ## TODO
 
-- [ ] Migrate to Webpack
-- [ ] Use Lerna or standard versioning
-- [ ] Use Changelog
+2.1
+[] Mutiple
+[] Autocomplete input
+[] Callback for autocomplete input
+[] Custom matching/filter pattern
+[] Fill README with React/Angular/Vue/Svelte/Purejs examples of usage;
+[] Precommit hooks;
+[] Add destroy method;
+[] Make sure Select behaves correctly when attributes are changed or options are removed from the DOM (MutationObserver);
+[] Sometimes one select scrolls dropdown in the others?
 
-## Old TODO
+2.2
+[] Option groups;
+[] Required attribute support
+[] Contribution guide;
+[] Position of the dropdown;
 
-- [ ] API method for updating select.
-- [ ] Mobile select support.
-- [ ] Drop support of default classNames (starting from 1.x.x versions).
-- [ ] Drop support of default icon, support only inline SVG instead. (starting from 1.x.x versions).
-
 ## License
 
 ```MIT```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Total package byte prevSize

73309

increased by23.72%

Dev dependency count

12

decreased by-29.41%

Number of package files

14

increased by75%

Lines of code

1334

increased by13.53%

Number of lines in readme file

139

increased by19.83%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes