@neovici/cosmoz-rating 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hooks/use-rating.d.ts +3 -3
- package/dist/hooks/use-rating.js +26 -21
- package/dist/rating.css.js +40 -5
- package/dist/rating.d.ts +2 -2
- package/dist/rating.js +2 -2
- package/dist/types.d.ts +3 -5
- package/package.json +11 -26
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const useRating: (
|
|
1
|
+
import { Props } from '../types';
|
|
2
|
+
declare const useRating: (props: Props) => {
|
|
3
3
|
rating: number | null;
|
|
4
|
-
disabled: boolean;
|
|
4
|
+
disabled: boolean | undefined;
|
|
5
5
|
maxRating: number;
|
|
6
6
|
handleComponentLeave: () => void;
|
|
7
7
|
renderStar: (index: number) => import("lit-html").TemplateResult<1>;
|
package/dist/hooks/use-rating.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { useState, html, useEffect } from '@pionjs/pion';
|
|
2
2
|
import { svg } from 'lit-html';
|
|
3
|
-
|
|
3
|
+
import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
|
|
4
|
+
const useRating = (props) => {
|
|
5
|
+
const host = useHost();
|
|
4
6
|
const [hoveredRating, setHoveredRating] = useState(null);
|
|
5
|
-
const
|
|
6
|
-
const rating =
|
|
7
|
-
const disabled =
|
|
8
|
-
const
|
|
9
|
-
const maxRating =
|
|
7
|
+
const ratingRaw = props.rating;
|
|
8
|
+
const rating = ratingRaw ? parseFloat(ratingRaw) : null;
|
|
9
|
+
const disabled = props.disabled;
|
|
10
|
+
const maxRatingRaw = props.maxRating;
|
|
11
|
+
const maxRating = maxRatingRaw ? parseInt(maxRatingRaw, 10) : 5;
|
|
10
12
|
useEffect(() => {
|
|
11
13
|
// Set appropriate tabIndex for accessibility
|
|
12
14
|
if (!disabled && host.tabIndex === -1) {
|
|
@@ -57,36 +59,39 @@ const useRating = (host) => {
|
|
|
57
59
|
if (isPartial && rating !== null) {
|
|
58
60
|
fillPercentage = Math.round((rating % 1) * 100);
|
|
59
61
|
}
|
|
60
|
-
const starPath =
|
|
62
|
+
const starPath = [
|
|
63
|
+
'M6.93894 0.263019L8.39719 3.47842C8.45207 3.59942 8.53952 3.70396',
|
|
64
|
+
'8.65043 3.78114C8.76133 3.85833 8.89163 3.90534 9.02772 3.91727L12.5802',
|
|
65
|
+
'4.22519C12.9821 4.28175 13.1424 4.7583 12.851 5.03271L10.175 7.20599C9.95835',
|
|
66
|
+
'7.38195 9.85977 7.65845 9.91935 7.92553L10.6972 11.4457C10.7655 11.8322',
|
|
67
|
+
'10.3462 12.1276 9.98652 11.9443L6.88586 10.1889C6.76893 10.1225 6.63578',
|
|
68
|
+
'10.0875 6.50017 10.0875C6.36457 10.0875 6.23142 10.1225 6.11448 10.1889L3.01382',
|
|
69
|
+
'11.9432C2.65522 12.1255 2.23486 11.8311 2.30311 11.4447L3.08099 7.92448C3.13949',
|
|
70
|
+
'7.6574 3.04199 7.3809 2.82531 7.20494L0.14825 5.03376C-0.142099 4.7604',
|
|
71
|
+
'0.0182426 4.2828 0.419097 4.22624L3.97154 3.91832C4.10763 3.90639 4.23793',
|
|
72
|
+
'3.85938 4.34883 3.78219C4.45974 3.705 4.54719 3.60046 4.60207 3.47947L6.06031',
|
|
73
|
+
'0.264067C6.24124 -0.0878475 6.7591 -0.0878474 6.93894 0.263019Z',
|
|
74
|
+
].join(' ');
|
|
61
75
|
const partialPaths = svg `<defs>
|
|
62
76
|
<clipPath id="clip-${index}">
|
|
63
77
|
<rect x="0" y="0" width="${fillPercentage}%" height="100%" />
|
|
64
78
|
</clipPath>
|
|
65
79
|
</defs>
|
|
66
|
-
<!-- Background (empty) star -->
|
|
67
|
-
<path d="${starPath}"
|
|
80
|
+
<!-- Background (empty) star with border -->
|
|
81
|
+
<path d="${starPath}"></path>
|
|
68
82
|
<!-- Partial fill (clipped) star -->
|
|
69
|
-
<path
|
|
70
|
-
d="${starPath}"
|
|
71
|
-
fill="var(--rating-star-color)"
|
|
72
|
-
clip-path="url(#clip-${index})"
|
|
73
|
-
></path>`;
|
|
83
|
+
<path d="${starPath}" clip-path="url(#clip-${index})"></path>`;
|
|
74
84
|
return html `
|
|
75
85
|
<svg
|
|
76
86
|
class="${starClass}"
|
|
77
87
|
@click="${() => handleStarClick(starRating)}"
|
|
78
88
|
@mouseenter="${() => handleStarHover(starRating)}"
|
|
79
|
-
viewBox="0 0
|
|
89
|
+
viewBox="-0.5 -0.5 14 13"
|
|
80
90
|
xmlns="http://www.w3.org/2000/svg"
|
|
81
91
|
>
|
|
82
92
|
${isPartial
|
|
83
93
|
? partialPaths
|
|
84
|
-
: svg `<path
|
|
85
|
-
d="${starPath}"
|
|
86
|
-
fill="${starClass.includes('filled')
|
|
87
|
-
? 'var(--rating-star-color)'
|
|
88
|
-
: 'var(--rating-star-color-empty)'}"
|
|
89
|
-
></path>`}
|
|
94
|
+
: svg `<path d="${starPath}"></path>`}
|
|
90
95
|
</svg>
|
|
91
96
|
`;
|
|
92
97
|
};
|
package/dist/rating.css.js
CHANGED
|
@@ -2,11 +2,18 @@ import { css } from '@pionjs/pion';
|
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
5
|
-
--rating-
|
|
6
|
-
--rating-
|
|
7
|
-
--rating-
|
|
5
|
+
--cosmoz-rating-color: #cf2005;
|
|
6
|
+
--cosmoz-rating-color-fill: var(--cosmoz-rating-color);
|
|
7
|
+
--cosmoz-rating-color-empty: transparent;
|
|
8
|
+
--cosmoz-rating-color-hover: var(--cosmoz-rating-color);
|
|
9
|
+
--cosmoz-rating-color-border: var(--cosmoz-rating-color);
|
|
10
|
+
--cosmoz-rating-color-border-empty: var(--cosmoz-rating-color);
|
|
11
|
+
--cosmoz-rating-color-border-hover: var(--cosmoz-rating-color);
|
|
12
|
+
|
|
13
|
+
/* Size and spacing */
|
|
8
14
|
--rating-star-size: 24px;
|
|
9
15
|
--rating-star-gap: 2px;
|
|
16
|
+
--rating-star-border-width: 1px;
|
|
10
17
|
}
|
|
11
18
|
|
|
12
19
|
:host([disabled]) {
|
|
@@ -23,14 +30,42 @@ export const styles = css `
|
|
|
23
30
|
width: var(--rating-star-size);
|
|
24
31
|
height: var(--rating-star-size);
|
|
25
32
|
cursor: pointer;
|
|
26
|
-
transition:
|
|
33
|
+
transition:
|
|
34
|
+
fill 0.2s ease,
|
|
35
|
+
stroke 0.2s ease,
|
|
36
|
+
stroke-width 0.2s ease;
|
|
27
37
|
}
|
|
28
38
|
|
|
29
39
|
:host([disabled]) .star {
|
|
30
40
|
cursor: default;
|
|
31
41
|
}
|
|
32
42
|
|
|
43
|
+
.star path {
|
|
44
|
+
stroke: var(--cosmoz-rating-color-border-empty);
|
|
45
|
+
stroke-width: var(--rating-star-border-width);
|
|
46
|
+
fill: var(--cosmoz-rating-color-empty);
|
|
47
|
+
transition:
|
|
48
|
+
fill 0.2s ease,
|
|
49
|
+
stroke 0.2s ease;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.star.filled path {
|
|
53
|
+
fill: var(--cosmoz-rating-color-fill);
|
|
54
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.star.partial > path:first-of-type {
|
|
58
|
+
fill: var(--cosmoz-rating-color-empty);
|
|
59
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.star.partial > path:last-of-type {
|
|
63
|
+
fill: var(--cosmoz-rating-color-fill);
|
|
64
|
+
stroke: var(--cosmoz-rating-color-border);
|
|
65
|
+
}
|
|
66
|
+
|
|
33
67
|
.star:hover path {
|
|
34
|
-
|
|
68
|
+
fill: var(--cosmoz-rating-color-hover) !important;
|
|
69
|
+
stroke: var(--cosmoz-rating-color-border-hover) !important;
|
|
35
70
|
}
|
|
36
71
|
`;
|
package/dist/rating.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const CosmozRating: import("@pionjs/pion/lib/component").ComponentConstructor<
|
|
1
|
+
import { Props } from './types';
|
|
2
|
+
declare const CosmozRating: import("@pionjs/pion/lib/component").ComponentConstructor<Props>;
|
|
3
3
|
export { CosmozRating };
|
|
4
4
|
export default CosmozRating;
|
package/dist/rating.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { component, html } from '@pionjs/pion';
|
|
2
2
|
import useRating from './hooks/use-rating';
|
|
3
3
|
import { styles } from './rating.css';
|
|
4
|
-
const Rating = (
|
|
5
|
-
const { maxRating, renderStar, handleComponentLeave } = useRating(
|
|
4
|
+
const Rating = (props) => {
|
|
5
|
+
const { maxRating, renderStar, handleComponentLeave } = useRating(props);
|
|
6
6
|
return html `
|
|
7
7
|
<div class="rating-container" @mouseleave=${handleComponentLeave}>
|
|
8
8
|
${Array.from({ length: maxRating }, (_, index) => renderStar(index))}
|
package/dist/types.d.ts
CHANGED
|
@@ -3,10 +3,8 @@ export interface RatingEvent extends CustomEvent {
|
|
|
3
3
|
rating: number;
|
|
4
4
|
};
|
|
5
5
|
}
|
|
6
|
-
export interface
|
|
7
|
-
rating?:
|
|
6
|
+
export interface Props {
|
|
7
|
+
rating?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
maxRating?:
|
|
10
|
-
}
|
|
11
|
-
export interface CosmozRatingElement extends HTMLElement, CosmozRatingProps {
|
|
9
|
+
maxRating?: string;
|
|
12
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-rating",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "A simple rating web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
"pion",
|
|
10
10
|
"lit-html"
|
|
11
11
|
],
|
|
12
|
-
"homepage": "https://github.com/
|
|
12
|
+
"homepage": "https://github.com/Neovici/cosmoz-rating#readme",
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/
|
|
14
|
+
"url": "https://github.com/Neovici/cosmoz-rating/issues"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "git+https://github.com/
|
|
18
|
+
"url": "git+https://github.com/Neovici/cosmoz-rating.git"
|
|
19
19
|
},
|
|
20
20
|
"license": "Apache-2.0",
|
|
21
21
|
"author": "",
|
|
@@ -34,19 +34,8 @@
|
|
|
34
34
|
"storybook:build": "storybook build",
|
|
35
35
|
"storybook:deploy": "storybook-to-ghpages",
|
|
36
36
|
"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
|
|
37
|
-
"prepare": "husky"
|
|
38
|
-
|
|
39
|
-
"release": {
|
|
40
|
-
"plugins": [
|
|
41
|
-
"@semantic-release/commit-analyzer",
|
|
42
|
-
"@semantic-release/release-notes-generator",
|
|
43
|
-
"@semantic-release/changelog",
|
|
44
|
-
"@semantic-release/github",
|
|
45
|
-
"@semantic-release/npm",
|
|
46
|
-
"@semantic-release/git"
|
|
47
|
-
],
|
|
48
|
-
"branch": "master",
|
|
49
|
-
"preset": "conventionalcommits"
|
|
37
|
+
"prepare": "husky",
|
|
38
|
+
"changeset": "changeset"
|
|
50
39
|
},
|
|
51
40
|
"publishConfig": {
|
|
52
41
|
"access": "public"
|
|
@@ -59,31 +48,27 @@
|
|
|
59
48
|
".": "./dist/index.js"
|
|
60
49
|
},
|
|
61
50
|
"dependencies": {
|
|
51
|
+
"@neovici/cosmoz-utils": "^6.14.2",
|
|
62
52
|
"@pionjs/pion": "^2.5.2",
|
|
63
53
|
"lit-html": "^3.3.1"
|
|
64
54
|
},
|
|
65
55
|
"devDependencies": {
|
|
56
|
+
"@changesets/cli": "^2.27.0",
|
|
66
57
|
"@commitlint/cli": "^19.2.1",
|
|
67
58
|
"@commitlint/config-conventional": "^19.1.0",
|
|
68
59
|
"@eslint/eslintrc": "^2.0.0",
|
|
69
60
|
"@neovici/cfg": "^2.0.0",
|
|
70
61
|
"@open-wc/testing": "^4.0.0",
|
|
71
|
-
"@
|
|
72
|
-
"@
|
|
73
|
-
"@storybook/addon-essentials": "^7.0.0",
|
|
74
|
-
"@storybook/addon-links": "^7.0.0",
|
|
75
|
-
"@storybook/web-components": "7.6.17",
|
|
62
|
+
"@playwright/test": "1.60.0",
|
|
63
|
+
"@storybook/web-components-vite": "^9.1.5",
|
|
76
64
|
"@types/mocha": "^10.0.6",
|
|
77
65
|
"@types/node": "^22.10.2",
|
|
78
|
-
"@web/storybook-builder": "^0.1.9",
|
|
79
|
-
"@web/storybook-framework-web-components": "^0.1.1",
|
|
80
66
|
"esbuild": "^0.24.0",
|
|
81
67
|
"http-server": "^14.1.1",
|
|
82
68
|
"husky": "^9.0.11",
|
|
83
69
|
"rollup-plugin-esbuild": "^6.1.1",
|
|
84
|
-
"semantic-release": "^24.0.0",
|
|
85
70
|
"sinon": "^19.0.0",
|
|
86
|
-
"storybook": "^
|
|
71
|
+
"storybook": "^9.1.5",
|
|
87
72
|
"typescript": "^5.4.3"
|
|
88
73
|
},
|
|
89
74
|
"overrides": {
|