vue-accessible-color-picker - npm Package Compare versions

Comparing version 4.1.4 to 5.0.0

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "4.1.4",
+	"version": "5.0.0",
 	"license": "MIT",
@@ -19,8 +19,7 @@ "description": "Color picker component for Vue.js",
 	"keywords": [
-		"vue",
-		"color",
-		"picker",
+		"color picker",
 		"component",
 		"hsl",
-		"hwb"
+		"hwb",
+		"vue"
 	],
@@ -30,18 +29,11 @@ "type": "module",
 		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/vue-accessible-color-picker.js"
+			"types": "./dist/ColorPicker.d.ts",
+			"default": "./dist/ColorPicker.js"
 		},
-		"./unstyled": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/vue-accessible-color-picker-unstyled.js"
-		},
-		"./types/index.d.ts": "./types/index.d.ts"
+		"./styles": "./dist/ColorPicker.css"
 	},
-	"main": "./dist/vue-accessible-color-picker.js",
-	"module": "./dist/vue-accessible-color-picker.js",
-	"types": "./types/index.d.ts",
 	"files": [
-		"dist/vue-accessible-color-picker.js",
-		"dist/vue-accessible-color-picker-unstyled.js",
-		"types/index.d.ts"
+		"dist/ColorPicker.css",
+		"dist/ColorPicker.d.ts",
+		"dist/ColorPicker.js"
 	],
@@ -51,9 +43,15 @@ "sideEffects": false,
 		"prebuild": "rimraf dist",
-		"build": "rollup --config",
+		"build": "npm run build:lib",
+		"postbuild": "rimraf dist/src",
+		"build:lib": "vite build",
+		"postbuild:lib": "npm run build:types",
+		"build:types": "vue-tsc --project tsconfig.build-types.json",
+		"postbuild:types": "api-extractor run --local --verbose",
 		"start": "vite",
 		"test": "vitest run --coverage",
-		"lint:code": "eslint --ext .js,.vue .",
+		"lint:code": "eslint --ext .ts,.vue .",
 		"lint:code:fix": "npm run lint:code -- --fix",
 		"lint:lockfile": "lockfile-lint --path package-lock.json --validate-hosts --allowed-hosts npm",
 		"lint:package": "publint",
+		"lint:types": "vue-tsc --noEmit",
 		"release": "semantic-release",
@@ -67,32 +65,34 @@ "prepare": "husky install",
 	"devDependencies": {
-		"@commitlint/cli": "^17.6.7",
-		"@commitlint/config-conventional": "^17.6.7",
-		"@rollup/plugin-terser": "^0.4.3",
+		"@babel/types": "^7.23.4",
+		"@commitlint/cli": "^18.4.3",
+		"@commitlint/config-conventional": "^18.4.3",
+		"@microsoft/api-extractor": "^7.38.3",
 		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/commit-analyzer": "^10.0.1",
+		"@semantic-release/commit-analyzer": "^11.1.0",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^9.0.4",
-		"@semantic-release/npm": "^10.0.4",
-		"@semantic-release/release-notes-generator": "^11.0.4",
-		"@vitejs/plugin-vue": "^4.2.3",
-		"@vitest/coverage-v8": "^0.34.1",
-		"@vue/test-utils": "^2.4.1",
-		"canvas": "^2.11.2",
-		"eslint": "^8.46.0",
+		"@semantic-release/github": "^9.2.3",
+		"@semantic-release/npm": "^11.0.1",
+		"@semantic-release/release-notes-generator": "^12.1.0",
+		"@typescript-eslint/eslint-plugin": "^6.12.0",
+		"@typescript-eslint/parser": "^6.12.0",
+		"@vitejs/plugin-vue": "^4.5.0",
+		"@vitest/coverage-v8": "^0.34.6",
+		"@vue/eslint-config-typescript": "^12.0.0",
+		"@vue/test-utils": "^2.4.2",
+		"eslint": "^8.54.0",
 		"eslint-config-standard": "^17.1.0",
-		"eslint-plugin-vue": "^9.16.1",
+		"eslint-plugin-vue": "^9.18.1",
 		"husky": "^8.0.3",
 		"jsdom": "^22.1.0",
-		"lockfile-lint": "^4.12.0",
-		"postcss": "^8.4.27",
-		"publint": "^0.2.0",
-		"rimraf": "^5.0.1",
-		"rollup": "^3.27.0",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-vue": "^6.0.0",
-		"semantic-release": "^21.0.7",
+		"lockfile-lint": "^4.12.1",
+		"postcss": "^8.4.31",
+		"publint": "^0.2.5",
+		"rimraf": "^5.0.5",
+		"sass": "^1.69.5",
+		"semantic-release": "^22.0.8",
 		"standard": "^17.1.0",
-		"vite": "^4.4.8",
-		"vitest": "^0.34.1"
+		"vite": "^5.0.2",
+		"vitest": "^0.34.6",
+		"vue-tsc": "^1.8.22"
 	}
 }

README.md

@@ -5,3 +5,3 @@ # vue-accessible-color-picker
 
-A color picker component for Vue.js 3.
+A color picker component for Vue.js.
 
@@ -26,14 +26,15 @@ This package’s files are distributed in the ES module format and have not been transpiled.
 	- [Props](#props)
+		- [`alphaChannel`](#alphachannel)
 		- [`color`](#color)
-		- [`visibleFormats`](#visibleformats)
 		- [`defaultFormat`](#defaultformat)
-		- [`alphaChannel`](#alphachannel)
 		- [`id`](#id)
+		- [`visibleFormats`](#visibleformats)
 	- [Events](#events)
 		- [`color-change`](#color-change)
 	- [Slots](#slots)
-		- [hue-range-input-label](#hue-range-input-label)
 		- [alpha-range-input-label](#alpha-range-input-label)
 		- [copy-button](#copy-button)
 		- [format-switch-button](#format-switch-button)
+		- [hue-range-input-label](#hue-range-input-label)
+	- [Theming](#theming)
 - [Versioning](#versioning)
@@ -50,6 +51,4 @@ - [Design](#design)
 
-In a Vue single file component, import the `ColorPicker` component.
+In a Vue single file component, import the `ColorPicker` component and its styles (if you want to use them).
 
-When using [Vue’s composition API](https://vuejs.org/guide/extras/composition-api-faq.html), you can directly use the component in the file’s `template` section.
-
 ```vue
@@ -63,39 +62,33 @@ <template>
 </script>
+
+<style>
+@import url('vue-accessible-color-picker/styles');
+</style>
 ```
 
-When using Vue’s options API, the component must first be registered using the `components` property on the Vue instance.
+When using [Vue’s composition API](https://vuejs.org/guide/extras/composition-api-faq.html), you can directly use the component in the file’s `template` section once you import it.
 
-```vue
-<template>
-	<ColorPicker />
-</template>
+You can also register the component and import the styles globally.
 
-<script>
-import { ColorPicker } from 'vue-accessible-color-picker'
+## Documentation
 
-export default {
-	components: {
-		ColorPicker,
-	},
-}
-</script>
-```
+### Props
 
-**Unstyled component**:
+#### `alphaChannel`
 
-If you want to use the unstyled variant of the component, you need to adjust the import statement to use the module specifier “vue-accessible-color-picker/unstyled”:
+- **Description**: Whether to show input controls for a color’s alpha channel. If set to `'hide'`, the alpha range input and the alpha channel input are hidden, the “Copy color” button will copy a CSS color value without alpha channel, and the object emitted in a `color-change` event will have a `cssColor` property value without alpha channel.
+- **Type**: `'show'` or `'hide'`
+- **Required**: No
+- **Default**: `'show'`
+- **Usage**:
 
-```js
-import { ColorPicker } from 'vue-accessible-color-picker/unstyled'
-```
+	```vue
+	<ColorPicker alpha-channel="hide" />
+	```
 
-## Documentation
-
-### Props
-
 #### `color`
 
 - **Description**: Sets the color of the color picker. You can pass any valid CSS color string or an object matching the internal color representation for an HSL, HSV, HWB, or RGB color.
-- **Type**: `string`, `ColorHsl`, `ColorHsv`, `ColorHwb`, or `ColorRgb`
-- **Required**: `false`
+- **Type**: `string`, `ColorHsl`, `ColorHwb`, or `ColorRgb`
+- **Required**: No
 - **Default**: `'#ffffffff'`
@@ -113,3 +106,3 @@ - **Usage**:
 	```vue
-	<ColorPicker :color="{ h: 0.75, s: 1, l: 0.5, a: 0.8 }" />
+	<ColorPicker :color="{ h: 270, s: 100, l: 50, a: 0.8 }" />
 	```
@@ -137,14 +130,2 @@
 
-#### `visibleFormats`
-
-- **Description**: A list of visible color formats. Controls for which formats the color `input` elements are shown and in which order the formats will be cycled through when activating the format switch button.
-- **Type**: `VisibleColorFormat[]`
-- **Required**: `false`
-- **Default**: `['hex', 'hsl', 'hwb', 'rgb']`
-- **Usage**:
-
-	```vue
-	<ColorPicker :visible-formats="['hsl', 'hwb']" />
-	```
-
 #### `defaultFormat`
@@ -154,3 +135,3 @@
 - **Type**: `VisibleColorFormat`
-- **Required**: `false`
+- **Required**: No
 - **Default**: `'hsl'`
@@ -163,24 +144,24 @@ - **Usage**:
 
-#### `alphaChannel`
+#### `id`
 
-- **Description**: Whether to show input controls for a color’s alpha channel. If set to `'hide'`, the alpha range input and the alpha channel input are hidden, the “Copy color” button will copy a CSS color value without alpha channel, and the object emitted in a `color-change` event will have a `cssColor` property value without alpha channel.
-- **Type**: `'show'` or `'hide'`
-- **Required**: `false`
-- **Default**: `'show'`
+- **Description**: The ID value will be used to prefix all `input` elements’ `id` and `label` elements’ `for` attribute values. Set this prop if you use multiple instances of the `color-picker` component on one page.
+- **Type**: `string`
+- **Required**: No
+- **Default**: `'color-picker'`
 - **Usage**:
 
 	```vue
-	<ColorPicker alpha-channel="hide" />
+	<ColorPicker id="color-picker-1" />
 	```
 
-#### `id`
+#### `visibleFormats`
 
-- **Description**: The ID value will be used to prefix all `input` elements’ `id` and `label` elements’ `for` attribute values. Set this prop if you use multiple instances of the `color-picker` component on one page.
-- **Type**: `string`
-- **Required**: `false`
-- **Default**: `'color-picker'`
+- **Description**: A list of visible color formats. Controls for which formats the color `input` elements are shown and in which order the formats will be cycled through when activating the format switch button.
+- **Type**: `VisibleColorFormat[]`
+- **Required**: No
+- **Default**: `['hex', 'hsl', 'hwb', 'rgb']`
 - **Usage**:
 
 	```vue
-	<ColorPicker id="color-picker-1" />
+	<ColorPicker :visible-formats="['hsl', 'hwb']" />
 	```
@@ -229,7 +210,2 @@
 
-#### hue-range-input-label
-
-- **Description**: Overrides the content of the hue range input’s `label` element.
-- **Default content**: Hue
-
 #### alpha-range-input-label
@@ -250,2 +226,34 @@
 
+#### hue-range-input-label
+
+- **Description**: Overrides the content of the hue range input’s `label` element.
+- **Default content**: Hue
+
+### Theming
+
+You can customize the GUI of the color picker using CSS custom properties:
+
+```css
+:root {
+	--vacp-color-focus: tomato;
+	--vacp-width-border: 2px;
+}
+```
+
+Available custom properties and their default values:
+
+| Custom property                 | Default value |
+| ------------------------------- | ------------- |
+| `--vacp-color-background-input` | `#fff`
+| `--vacp-color-background`       | `#fff`
+| `--vacp-color-border`           | `#000`
+| `--vacp-color-focus`            | `#19f`
+| `--vacp-color-text-input`       | `currentColor`
+| `--vacp-color-text`             | `currentColor`
+| `--vacp-font-family`            | `-apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif`
+| `--vacp-font-size`              | `0.8em`
+| `--vacp-spacing`                | `6px`
+| `--vacp-width-border`           | `1px`
+| `--vacp-width-color-space`      | `300px`
+
 ## Versioning
@@ -252,0 +260,0 @@

New alerts

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

698

increased by330.86%

Number of lines in readme file

282

increased by2.92%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

39971

decreased by-8.21%

Dev dependency count

31

increased by6.9%

No dependency changes