@vchasno/ui-kit 0.4.89 → 0.4.90
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/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.4.90] - 2026-02-27
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- BasePagination: used key as prop name – fix it to avoid react warning
|
|
15
|
+
|
|
10
16
|
## [0.4.89] - 2026-02-05
|
|
11
17
|
|
|
12
18
|
### Fixed
|
package/README.md
CHANGED
|
@@ -20,14 +20,11 @@ yarn add @vchasno/ui-kit
|
|
|
20
20
|
|
|
21
21
|
```jsx
|
|
22
22
|
// index.tsx
|
|
23
|
-
|
|
24
23
|
// Optional reset styles
|
|
25
24
|
import '@vchasno/ui-kit/dist/css/_base.css';
|
|
26
25
|
import '@vchasno/ui-kit/dist/css/_reset.css';
|
|
27
|
-
|
|
28
26
|
// Required main CSS which includes variables and styles
|
|
29
27
|
import '@vchasno/ui-kit/dist/css/vchasno-ui.css';
|
|
30
|
-
|
|
31
28
|
// Override theme if needed (more info in "Styling and customization" section)
|
|
32
29
|
import 'src/styles/_theme-override.css';
|
|
33
30
|
```
|
|
@@ -106,7 +103,7 @@ To customize styles you can use CSS variables and override them
|
|
|
106
103
|
```css
|
|
107
104
|
/* theme-override.css */
|
|
108
105
|
:root {
|
|
109
|
-
|
|
106
|
+
--vchasno-ui-transition-duration-sec: 0.5s; /* default 0.3s */
|
|
110
107
|
}
|
|
111
108
|
```
|
|
112
109
|
|
|
@@ -115,7 +112,7 @@ To customize styles you can use CSS variables and override them
|
|
|
115
112
|
```css
|
|
116
113
|
/* button-override.css */
|
|
117
114
|
:global(.vchasno-ui-button.--sm) {
|
|
118
|
-
|
|
115
|
+
padding: 0 20px; /* default 0 15px */
|
|
119
116
|
}
|
|
120
117
|
```
|
|
121
118
|
|
|
@@ -179,12 +176,13 @@ To publish a new version:
|
|
|
179
176
|
5. After merge to `master`, checkout `master` and pull latest changes
|
|
180
177
|
6. Create a version tag by running one of:
|
|
181
178
|
|
|
182
|
-
|
|
179
|
+
> **Note:** This package is in alpha stage (0.x.x), versioning works differently:
|
|
180
|
+
|
|
181
|
+
- `npm version patch` - for bug fixes or backward-compatible features (0.0.x)
|
|
182
|
+
- `npm version minor` - for features with breaking changes (0.x.0)
|
|
183
|
+
|
|
184
|
+
**DO NOT USE** `npm version major` until v1.0 stable release
|
|
183
185
|
|
|
184
|
-
|
|
185
|
-
- `npm version minor` - for features with breaking changes (0.x.0)
|
|
186
|
-
|
|
187
|
-
**DO NOT USE** `npm version major` until v1.0 stable release
|
|
188
|
-
7. Push the tag: `git push --tags`
|
|
186
|
+
7. Push the changes with the tag: `git push --follow-tags` or `git push && git push --tags`
|
|
189
187
|
8. CI/CD pipeline will start the publish job
|
|
190
188
|
9. Manually confirm the publish stage in CI/CD to release to npm registry
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import t from"classnames";import{composePaginationSteps as i}from"./utils.js";function n(n){return n.hide?null:e.createElement("div",{className:t("vchasno-ui-pagination",n.className)},e.createElement(a,{type:"prev",onClick:n.onPrevClick,isDisabled:n.isPrevDisabled??!1,isHidden:n.hidePrev??!1}),!n.simple&&i(n.total??0,n.currentPage).map(t=>Array.isArray(t)?t[0]?t[0]<n.currentPage?e.createElement(o,{key:"prev",isActive:!1,onClick:()=>n.onPrevGapClick?.(),text:"..."}):e.createElement(o,{key:"next",isActive:!1,onClick:()=>n.onNextGapClick?.(),text:"..."}):null:e.createElement(o,{key:t.toString(),isActive:t===n.currentPage,onClick:()=>n.onPageChange?.(t),text:t.toString()})),e.createElement(a,{type:"next",onClick:n.onNextClick,isDisabled:n.isNextDisabled??!1,isHidden:n.hideNext??!1}))}function a(i){return e.createElement("button",{type:"button",onClick:i.onClick,disabled:i.isDisabled,className:t("vchasno-ui-pagination__item","vchasno-ui-pagination__item-arrow",{"vchasno-ui-pagination__item-disabled":i.isDisabled,"vchasno-ui-pagination__item-hidden":i.isHidden})},e.createElement("svg",{style:"next"===i.type?{transform:"rotate(180deg)",transformOrigin:"center center"}:void 0,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z",fill:"currentColor"})))}function o(i){return e.createElement("button",{type:"button",onClick:i.onClick,
|
|
1
|
+
import e from"react";import t from"classnames";import{composePaginationSteps as i}from"./utils.js";function n(n){return n.hide?null:e.createElement("div",{className:t("vchasno-ui-pagination",n.className)},e.createElement(a,{type:"prev",onClick:n.onPrevClick,isDisabled:n.isPrevDisabled??!1,isHidden:n.hidePrev??!1}),!n.simple&&i(n.total??0,n.currentPage).map(t=>Array.isArray(t)?t[0]?t[0]<n.currentPage?e.createElement(o,{key:"prev",isActive:!1,onClick:()=>n.onPrevGapClick?.(),text:"..."}):e.createElement(o,{key:"next",isActive:!1,onClick:()=>n.onNextGapClick?.(),text:"..."}):null:e.createElement(o,{key:t.toString(),isActive:t===n.currentPage,onClick:()=>n.onPageChange?.(t),text:t.toString()})),e.createElement(a,{type:"next",onClick:n.onNextClick,isDisabled:n.isNextDisabled??!1,isHidden:n.hideNext??!1}))}function a(i){return e.createElement("button",{type:"button",onClick:i.onClick,disabled:i.isDisabled,className:t("vchasno-ui-pagination__item","vchasno-ui-pagination__item-arrow",{"vchasno-ui-pagination__item-disabled":i.isDisabled,"vchasno-ui-pagination__item-hidden":i.isHidden})},e.createElement("svg",{style:"next"===i.type?{transform:"rotate(180deg)",transformOrigin:"center center"}:void 0,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z",fill:"currentColor"})))}function o(i){return e.createElement("button",{type:"button",onClick:i.onClick,className:t("vchasno-ui-pagination__item",{"vchasno-ui-pagination__item-active":i.isActive})},i.text)}export{n as BasePagination};
|
|
2
2
|
//# sourceMappingURL=BasePagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasePagination.js","sources":["../../../src/components/Pagination/BasePagination.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { composePaginationSteps } from './utils';\n\nimport './Pagination.global.css';\n\nexport interface BasePaginationProps {\n hide?: boolean;\n className?: string;\n currentPage: number;\n total?: number | null;\n onPageChange?: (page: number) => void;\n simple?: boolean;\n hideNext?: boolean;\n hidePrev?: boolean;\n onPrevGapClick?: () => void;\n onNextGapClick?: () => void;\n onPrevClick: () => void;\n onNextClick: () => void;\n isPrevDisabled?: boolean;\n isNextDisabled?: boolean;\n gapStep?: number;\n}\n\nexport function BasePagination(props: BasePaginationProps) {\n if (props.hide) {\n return null;\n }\n\n return (\n <div className={cn('vchasno-ui-pagination', props.className)}>\n <PaginationArrowButton\n type=\"prev\"\n onClick={props.onPrevClick}\n isDisabled={props.isPrevDisabled ?? false}\n isHidden={props.hidePrev ?? false}\n />\n {!props.simple &&\n composePaginationSteps(props.total ?? 0, props.currentPage).map((item) => {\n if (Array.isArray(item)) {\n if (!item[0]) return null;\n // Це три крапки між сторінками і стрілочками:\n // < 1 ... 5 6 7 ... 20 >\n // ^^^ ^^^\n if (item[0] < props.currentPage) {\n return (\n <PaginationItem\n key=\"prev\"\n isActive={false}\n onClick={() => props.onPrevGapClick?.()}\n text=\"...\"\n />\n );\n } else {\n return (\n <PaginationItem\n key=\"next\"\n isActive={false}\n onClick={() => props.onNextGapClick?.()}\n text=\"...\"\n />\n );\n }\n }\n return (\n <PaginationItem\n key={item.toString()}\n isActive={item === props.currentPage}\n onClick={() => props.onPageChange?.(item)}\n text={item.toString()}\n />\n );\n })}\n <PaginationArrowButton\n type=\"next\"\n onClick={props.onNextClick}\n isDisabled={props.isNextDisabled ?? false}\n isHidden={props.hideNext ?? false}\n />\n </div>\n );\n}\n\nfunction PaginationArrowButton(props: {\n onClick: () => void;\n isDisabled: boolean;\n isHidden: boolean;\n type: 'prev' | 'next';\n}) {\n return (\n <button\n type=\"button\"\n onClick={props.onClick}\n disabled={props.isDisabled}\n className={cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', {\n ['vchasno-ui-pagination__item-disabled']: props.isDisabled,\n ['vchasno-ui-pagination__item-hidden']: props.isHidden,\n })}\n >\n <svg\n // Без стилів SVG зображує кнопку назад\n style={\n props.type === 'next'\n ? { transform: 'rotate(180deg)', transformOrigin: 'center center' }\n : undefined\n }\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n );\n}\n\nfunction PaginationItem(props: {
|
|
1
|
+
{"version":3,"file":"BasePagination.js","sources":["../../../src/components/Pagination/BasePagination.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { composePaginationSteps } from './utils';\n\nimport './Pagination.global.css';\n\nexport interface BasePaginationProps {\n hide?: boolean;\n className?: string;\n currentPage: number;\n total?: number | null;\n onPageChange?: (page: number) => void;\n simple?: boolean;\n hideNext?: boolean;\n hidePrev?: boolean;\n onPrevGapClick?: () => void;\n onNextGapClick?: () => void;\n onPrevClick: () => void;\n onNextClick: () => void;\n isPrevDisabled?: boolean;\n isNextDisabled?: boolean;\n gapStep?: number;\n}\n\nexport function BasePagination(props: BasePaginationProps) {\n if (props.hide) {\n return null;\n }\n\n return (\n <div className={cn('vchasno-ui-pagination', props.className)}>\n <PaginationArrowButton\n type=\"prev\"\n onClick={props.onPrevClick}\n isDisabled={props.isPrevDisabled ?? false}\n isHidden={props.hidePrev ?? false}\n />\n {!props.simple &&\n composePaginationSteps(props.total ?? 0, props.currentPage).map((item) => {\n if (Array.isArray(item)) {\n if (!item[0]) return null;\n // Це три крапки між сторінками і стрілочками:\n // < 1 ... 5 6 7 ... 20 >\n // ^^^ ^^^\n if (item[0] < props.currentPage) {\n return (\n <PaginationItem\n key=\"prev\"\n isActive={false}\n onClick={() => props.onPrevGapClick?.()}\n text=\"...\"\n />\n );\n } else {\n return (\n <PaginationItem\n key=\"next\"\n isActive={false}\n onClick={() => props.onNextGapClick?.()}\n text=\"...\"\n />\n );\n }\n }\n return (\n <PaginationItem\n key={item.toString()}\n isActive={item === props.currentPage}\n onClick={() => props.onPageChange?.(item)}\n text={item.toString()}\n />\n );\n })}\n <PaginationArrowButton\n type=\"next\"\n onClick={props.onNextClick}\n isDisabled={props.isNextDisabled ?? false}\n isHidden={props.hideNext ?? false}\n />\n </div>\n );\n}\n\nfunction PaginationArrowButton(props: {\n onClick: () => void;\n isDisabled: boolean;\n isHidden: boolean;\n type: 'prev' | 'next';\n}) {\n return (\n <button\n type=\"button\"\n onClick={props.onClick}\n disabled={props.isDisabled}\n className={cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', {\n ['vchasno-ui-pagination__item-disabled']: props.isDisabled,\n ['vchasno-ui-pagination__item-hidden']: props.isHidden,\n })}\n >\n <svg\n // Без стилів SVG зображує кнопку назад\n style={\n props.type === 'next'\n ? { transform: 'rotate(180deg)', transformOrigin: 'center center' }\n : undefined\n }\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n );\n}\n\nfunction PaginationItem(props: { isActive: boolean; text: string; onClick: () => void }) {\n return (\n <button\n type=\"button\"\n onClick={props.onClick}\n className={cn('vchasno-ui-pagination__item', {\n ['vchasno-ui-pagination__item-active']: props.isActive,\n })}\n >\n {props.text}\n </button>\n );\n}\n"],"names":["BasePagination","props","hide","React","div","className","cn","PaginationArrowButton","type","onClick","onPrevClick","isDisabled","isPrevDisabled","isHidden","hidePrev","simple","composePaginationSteps","total","currentPage","map","item","Array","isArray","PaginationItem","key","isActive","onPrevGapClick","text","onNextGapClick","toString","onPageChange","onNextClick","isNextDisabled","hideNext","button","disabled","svg","style","transform","transformOrigin","undefined","width","height","viewBox","fill","xmlns","path","d"],"mappings":"mGA0BO,SAASA,EAAeC,CAA0B,SACrD,AAAIA,EAAMC,IAAI,CACH,KAIPC,EAACC,aAAAA,CAAAA,MAAAA,CAAIC,UAAWC,EAAG,wBAAyBL,EAAMI,SAAS,GACvDF,EAACI,aAAAA,CAAAA,EAAAA,CACGC,KAAK,OACLC,QAASR,EAAMS,WAAW,CAC1BC,WAAYV,EAAMW,cAAc,EAAI,CAAA,EACpCC,SAAUZ,EAAMa,QAAQ,EAAI,CAAA,CAE/B,GAAA,CAACb,EAAMc,MAAM,EACVC,EAAuBf,EAAMgB,KAAK,EAAI,EAAGhB,EAAMiB,WAAW,EAAEC,GAAG,CAAC,AAACC,GAC7D,AAAIC,MAAMC,OAAO,CAACF,GACd,AAAKA,CAAI,CAAC,EAAE,CAIRA,CAAI,CAAC,EAAE,CAAGnB,EAAMiB,WAAW,CAEvBf,EAACoB,aAAAA,CAAAA,EAAAA,CACGC,IAAI,OACJC,SAAU,CAAA,EACVhB,QAAS,IAAMR,EAAMyB,cAAc,KACnCC,KAAK,QAKTxB,EAACoB,aAAAA,CAAAA,EAAAA,CACGC,IAAI,OACJC,SAAU,CAAA,EACVhB,QAAS,IAAMR,EAAM2B,cAAc,KACnCD,KAAK,QAnBI,KAyBrBxB,EAACoB,aAAAA,CAAAA,EAAAA,CACGC,IAAKJ,EAAKS,QAAQ,GAClBJ,SAAUL,IAASnB,EAAMiB,WAAW,CACpCT,QAAS,IAAMR,EAAM6B,YAAY,GAAGV,GACpCO,KAAMP,EAAKS,QAAQ,MAInC1B,EAACI,aAAAA,CAAAA,EAAAA,CACGC,KAAK,OACLC,QAASR,EAAM8B,WAAW,CAC1BpB,WAAYV,EAAM+B,cAAc,EAAI,CAAA,EACpCnB,SAAUZ,EAAMgC,QAAQ,EAAI,CAAA,IAI5C,CAEA,SAAS1B,EAAsBN,CAK9B,EACG,OACIE,EAAC+B,aAAAA,CAAAA,SAAAA,CACG1B,KAAK,SACLC,QAASR,EAAMQ,OAAO,CACtB0B,SAAUlC,EAAMU,UAAU,CAC1BN,UAAWC,EAAG,8BAA+B,oCAAqC,CAC7E,uCAAyCL,EAAMU,UAAU,CACzD,qCAAuCV,EAAMY,QAAAA,AAClD,IAEAV,EAACiC,aAAAA,CAAAA,MAAAA,CAEGC,MACIpC,AAAe,SAAfA,EAAMO,IAAI,CACJ,CAAE8B,UAAW,iBAAkBC,gBAAiB,iBAChDC,KAAAA,EAEVC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAEN1C,EAAC2C,aAAAA,CAAAA,OAAAA,CACGC,EAAE,0SACFH,KAAK,kBAKzB,CAEA,SAASrB,EAAetB,CAA+D,EACnF,OACIE,EAAC+B,aAAAA,CAAAA,SAAAA,CACG1B,KAAK,SACLC,QAASR,EAAMQ,OAAO,CACtBJ,UAAWC,EAAG,8BAA+B,CACxC,qCAAuCL,EAAMwB,QAAAA,AAClD,EAECxB,EAAAA,EAAM0B,IAAI,CAGvB"}
|