@public-ui/sample-react 1.7.5 → 1.7.6-rc.0
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/1159.js +1 -1
- package/dist/1474.js +1 -1
- package/dist/{7495.js → 1509.js} +2 -2
- package/dist/183.js +1 -1
- package/dist/2337.js +1 -1
- package/dist/2412.js +1 -1
- package/dist/3303.js +1 -1
- package/dist/3325.js +1 -1
- package/dist/3429.js +1 -1
- package/dist/3459.js +1 -1
- package/dist/3537.js +1 -1
- package/dist/{6691.js → 3711.js} +2 -2
- package/dist/3932.js +1 -1
- package/dist/4021.js +1 -1
- package/dist/4022.js +1 -1
- package/dist/4195.js +1 -1
- package/dist/4291.js +1 -1
- package/dist/4323.js +1 -1
- package/dist/4355.js +1 -1
- package/dist/4477.js +1 -1
- package/dist/4564.js +1 -1
- package/dist/4891.js +1 -1
- package/dist/5183.js +1 -1
- package/dist/5369.js +1 -1
- package/dist/5390.js +1 -1
- package/dist/540.js +1 -1
- package/dist/5862.js +1 -1
- package/dist/5866.js +1 -1
- package/dist/6012.js +1 -1
- package/dist/6068.js +1 -1
- package/dist/6210.js +1 -1
- package/dist/6320.js +1 -1
- package/dist/6558.js +1 -1
- package/dist/6813.js +1 -1
- package/dist/6908.js +1 -1
- package/dist/7029.js +1 -1
- package/dist/7255.js +1 -1
- package/dist/{8068.js → 7437.js} +2 -2
- package/dist/7447.js +1 -1
- package/dist/7715.js +1 -1
- package/dist/7722.js +1 -1
- package/dist/7734.js +2 -0
- package/dist/7801.js +1 -1
- package/dist/7858.js +1 -1
- package/dist/7955.js +1 -1
- package/dist/7958.js +1 -1
- package/dist/7995.js +1 -1
- package/dist/8061.js +1 -1
- package/dist/8065.js +1 -1
- package/dist/8073.js +1 -1
- package/dist/8099.js +1 -1
- package/dist/8111.js +1 -1
- package/dist/8255.js +1 -1
- package/dist/8291.js +1 -1
- package/dist/8496.js +2 -0
- package/dist/8709.js +1 -1
- package/dist/8761.js +1 -1
- package/dist/9106.js +1 -1
- package/dist/9734.js +1 -1
- package/dist/9747.js +1 -1
- package/dist/9792.js +1 -1
- package/dist/9895.js +1 -1
- package/dist/9963.js +1 -1
- package/dist/9972.js +1 -1
- package/dist/main.css +1 -1
- package/dist/main.js +2 -2
- package/dist/main.js.LICENSE.txt +2 -2
- package/package.json +14 -14
- package/src/components/badge/basic.tsx +5 -5
- package/src/components/toast/basic.tsx +58 -34
- package/src/shares/routes.ts +0 -2
- package/dist/6655.js +0 -2
- package/dist/7200.js +0 -2
- package/src/components/popover/basic.tsx +0 -36
- package/src/components/popover/routes.ts +0 -8
- /package/dist/{6655.js.LICENSE.txt → 1509.js.LICENSE.txt} +0 -0
- /package/dist/{6691.js.LICENSE.txt → 3711.js.LICENSE.txt} +0 -0
- /package/dist/{7200.js.LICENSE.txt → 7437.js.LICENSE.txt} +0 -0
- /package/dist/{7495.js.LICENSE.txt → 7734.js.LICENSE.txt} +0 -0
- /package/dist/{8068.js.LICENSE.txt → 8496.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
|
-
* @remix-run/router v1.
|
|
38
|
+
* @remix-run/router v1.11.0
|
|
39
39
|
*
|
|
40
40
|
* Copyright (c) Remix Software Inc.
|
|
41
41
|
*
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
*/
|
|
47
47
|
|
|
48
48
|
/**
|
|
49
|
-
* React Router v6.
|
|
49
|
+
* React Router v6.18.0
|
|
50
50
|
*
|
|
51
51
|
* Copyright (c) Remix Software Inc.
|
|
52
52
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/sample-react",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.6-rc.0",
|
|
4
4
|
"description": "This app contains samples for the KoliBri/Public UI",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
6
6
|
"dependencies": {
|
|
@@ -8,31 +8,31 @@
|
|
|
8
8
|
"@leanup/stack-react": "1.3.48",
|
|
9
9
|
"@leanup/stack-webpack": "1.3.48",
|
|
10
10
|
"@public-oss/kolibri-themes": "0.0.3",
|
|
11
|
-
"@public-ui/components": "1.7.
|
|
12
|
-
"@public-ui/react": "1.7.
|
|
13
|
-
"@public-ui/themes": "1.7.
|
|
14
|
-
"@types/node": "20.
|
|
15
|
-
"@types/react": "18.2.
|
|
16
|
-
"@types/react-dom": "18.2.
|
|
17
|
-
"@unocss/preset-uno": "0.
|
|
18
|
-
"@unocss/webpack": "0.
|
|
11
|
+
"@public-ui/components": "1.7.6-rc.0",
|
|
12
|
+
"@public-ui/react": "1.7.6-rc.0",
|
|
13
|
+
"@public-ui/themes": "1.7.6-rc.0",
|
|
14
|
+
"@types/node": "20.9.0",
|
|
15
|
+
"@types/react": "18.2.37",
|
|
16
|
+
"@types/react-dom": "18.2.15",
|
|
17
|
+
"@unocss/preset-uno": "0.57.3",
|
|
18
|
+
"@unocss/webpack": "0.57.3",
|
|
19
19
|
"ajv": "8.12.0",
|
|
20
|
-
"chromedriver": "
|
|
20
|
+
"chromedriver": "119.0.1",
|
|
21
21
|
"cpy-cli": "5.0.0",
|
|
22
|
-
"eslint-plugin-jsx-a11y": "6.
|
|
22
|
+
"eslint-plugin-jsx-a11y": "6.8.0",
|
|
23
23
|
"eslint-plugin-react": "7.33.2",
|
|
24
24
|
"formik": "2.4.5",
|
|
25
25
|
"nightwatch-axe-verbose": "2.2.2",
|
|
26
26
|
"npm-run-all": "4.1.5",
|
|
27
27
|
"react": "18.2.0",
|
|
28
28
|
"react-dom": "18.2.0",
|
|
29
|
-
"react-router": "6.
|
|
30
|
-
"react-router-dom": "6.
|
|
29
|
+
"react-router": "6.18.0",
|
|
30
|
+
"react-router-dom": "6.18.0",
|
|
31
31
|
"rimraf": "3.0.2",
|
|
32
32
|
"ts-prune": "0.10.3",
|
|
33
33
|
"typescript": "5.2.2",
|
|
34
34
|
"world_countries_lists": "2.8.2",
|
|
35
|
-
"yup": "1.3.
|
|
35
|
+
"yup": "1.3.2"
|
|
36
36
|
},
|
|
37
37
|
"files": [
|
|
38
38
|
".eslintignore",
|
|
@@ -8,11 +8,11 @@ const PROPS = {
|
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export const BadgeBasic: FC = () => (
|
|
11
|
-
<div className="
|
|
11
|
+
<div className="flex gap-2">
|
|
12
12
|
<KolBadge {...PROPS}></KolBadge>
|
|
13
|
-
<KolBadge _color="#
|
|
14
|
-
<KolBadge _color="#
|
|
15
|
-
<KolBadge _color="#
|
|
16
|
-
<KolBadge _color="#
|
|
13
|
+
<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
|
|
14
|
+
<KolBadge _color="#06539e" {...PROPS}></KolBadge>
|
|
15
|
+
<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
|
|
16
|
+
<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
|
|
17
17
|
</div>
|
|
18
18
|
);
|
|
@@ -5,39 +5,63 @@ import { getRoot } from '../../shares/react-roots';
|
|
|
5
5
|
|
|
6
6
|
const toaster = ToasterService.getInstance(document);
|
|
7
7
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
8
|
+
export const ToastBasic: FC = () => {
|
|
9
|
+
const handleButtonClickSimple = () => {
|
|
10
|
+
void toaster.enqueue({
|
|
11
|
+
description: 'Toasty',
|
|
12
|
+
label: `Initial Toast`,
|
|
13
|
+
type: 'warning',
|
|
14
|
+
});
|
|
15
|
+
};
|
|
15
16
|
|
|
16
|
-
const handleButtonClickComplex = () => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
};
|
|
17
|
+
const handleButtonClickComplex = () => {
|
|
18
|
+
void toaster.enqueue({
|
|
19
|
+
render: (element: HTMLElement, { close }) => {
|
|
20
|
+
getRoot(element).render(
|
|
21
|
+
<>
|
|
22
|
+
<KolButton
|
|
23
|
+
_label={'Hello World from Toast!'}
|
|
24
|
+
_on={{
|
|
25
|
+
onClick: () => {
|
|
26
|
+
console.log('Toast Button clicked!');
|
|
27
|
+
close();
|
|
28
|
+
},
|
|
29
|
+
}}
|
|
30
|
+
/>
|
|
31
|
+
</>,
|
|
32
|
+
);
|
|
33
|
+
},
|
|
34
|
+
label: `Initial Toast`,
|
|
35
|
+
type: 'warning',
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const handleButtonClickOpenAndClose = async () => {
|
|
40
|
+
const close = await toaster.enqueue({
|
|
41
|
+
description: 'I will disappear in two seconds...',
|
|
42
|
+
label: `Good Bye`,
|
|
43
|
+
type: 'warning',
|
|
44
|
+
});
|
|
37
45
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
)
|
|
46
|
+
if (close) {
|
|
47
|
+
setTimeout(close, 2000);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const closeAll = () => {
|
|
52
|
+
toaster.closeAll();
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<div>
|
|
57
|
+
<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
|
|
58
|
+
<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
|
|
59
|
+
<br />
|
|
60
|
+
<br />
|
|
61
|
+
<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
|
|
62
|
+
<br />
|
|
63
|
+
<br />
|
|
64
|
+
<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
};
|
package/src/shares/routes.ts
CHANGED
|
@@ -33,7 +33,6 @@ import { LOGO_ROUTES } from '../components/logo/routes';
|
|
|
33
33
|
import { MODAL_ROUTES } from '../components/modal/routes';
|
|
34
34
|
import { NAV_ROUTES } from '../components/nav/routes';
|
|
35
35
|
import { PAGINATION_ROUTES } from '../components/pagination/routes';
|
|
36
|
-
import { POPOVER_ROUTES } from '../components/popover/routes';
|
|
37
36
|
import { PROGRESS_ROUTES } from '../components/progress/routes';
|
|
38
37
|
import { QUOTE_ROUTES } from '../components/quote/routes';
|
|
39
38
|
import { SELECT_ROUTES } from '../components/select/routes';
|
|
@@ -85,7 +84,6 @@ export const ROUTES: Routes = {
|
|
|
85
84
|
...MODAL_ROUTES,
|
|
86
85
|
...NAV_ROUTES,
|
|
87
86
|
...PAGINATION_ROUTES,
|
|
88
|
-
...POPOVER_ROUTES,
|
|
89
87
|
...PROGRESS_ROUTES,
|
|
90
88
|
...QUOTE_ROUTES,
|
|
91
89
|
...SELECT_ROUTES,
|
package/dist/6655.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! For license information please see 6655.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6655],{6655:(t,e,i)=>{i.r(e),i.d(e,{kol_popover:()=>h});var o=i(8269),s=i(4604),n=i(9336),a=i(9430),r=i(1454),l=i(2180);const h=class{constructor(t){(0,o.r)(this,t),this.alignPopover=t=>{setTimeout((()=>{var e;if("test"!==l.p&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,o=this.popoverElement,n=this.arrowElement,a=[(0,s.o)(null!==(e=null==n?void 0:n.offsetHeight)&&void 0!==e?e:10),(0,s.f)(),(0,s.s)()];n&&a.push((0,s.a)({element:n})),(0,s.c)(i,o,{placement:this.state._align,middleware:a}).then((({x:e,y:i,middlewareData:o,placement:s})=>{this.setPosition(e,i,o,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,i,o,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&i.arrow)switch(o){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=(0,r.g)().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=(0,r.g)().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return(0,o.h)(o.H,{ref:this.catchHostAndTriggerElement},(0,o.h)("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},(0,o.h)("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),(0,o.h)("slot",null)))}validateAlign(t){(0,n.v)(this,t)}validateShow(t){(0,a.v)(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};h.style=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}"},9430:(t,e,i)=>{i.d(e,{v:()=>s});var o=i(8068);const s=(t,e,i)=>{(0,o.a)(t,"_show",e,i)}}}]);
|
package/dist/7200.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! For license information please see 7200.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7200],{9336:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(7612);const i=(t,e)=>{(0,o.v)(t,"_align",e)}},7612:(t,e,n)=>{n.d(e,{v:()=>r});var o=n(8068);const i=new Set([...new Set(['"left", "right"']),...new Set(['"bottom", "top"'])]),r=(t,e,n)=>{(0,o.w)(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),i,n,{defaultValue:"top"})}},4604:(t,e,n)=>{n.d(e,{a:()=>W,b:()=>ht,c:()=>yt,f:()=>_,o:()=>V,s:()=>B});var o=Object.defineProperty,i=Object.defineProperties,r=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,f=(t,e,n)=>e in t?o(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,a=(t,e)=>{for(var n in e||(e={}))c.call(e,n)&&f(t,n,e[n]);if(l)for(var n of l(e))s.call(e,n)&&f(t,n,e[n]);return t},u=(t,e)=>i(t,r(e)),d=(t,e)=>{var n={};for(var o in t)c.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&l)for(var o of l(t))e.indexOf(o)<0&&s.call(t,o)&&(n[o]=t[o]);return n},p=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const m=Math.min,h=Math.max,y=Math.round,g=Math.floor,x=t=>({x:t,y:t}),v={left:"right",right:"left",bottom:"top",top:"bottom"},b={start:"end",end:"start"};function w(t,e,n){return h(t,m(e,n))}function R(t,e){return"function"==typeof t?t(e):t}function E(t){return t.split("-")[0]}function T(t){return t.split("-")[1]}function L(t){return"x"===t?"y":"x"}function A(t){return"y"===t?"height":"width"}function O(t){return["top","bottom"].includes(E(t))?"y":"x"}function P(t){return L(O(t))}function S(t){return t.replace(/start|end/g,(t=>b[t]))}function k(t){return t.replace(/left|right|bottom|top/g,(t=>v[t]))}function D(t){return"number"!=typeof t?function(t){return a({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function C(t){return u(a({},t),{top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height})}function F(t,e,n){let{reference:o,floating:i}=t;const r=O(e),l=P(e),c=A(l),s=E(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let p;switch(s){case"top":p={x:a,y:o.y-i.height};break;case"bottom":p={x:a,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(T(e)){case"start":p[l]-=d*(n&&f?-1:1);break;case"end":p[l]+=d*(n&&f?-1:1)}return p}function H(t,e){return p(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:d="viewport",elementContext:p="floating",altBoundary:m=!1,padding:h=0}=R(e,t),y=D(h),g=c[m?"floating"===p?"reference":"floating":p],x=C(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(g))||n?g:g.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:d,strategy:s})),v="floating"===p?u(a({},l.floating),{x:o,y:i}):l.reference,b=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),w=(yield null==r.isElement?void 0:r.isElement(b))&&(yield null==r.getScale?void 0:r.getScale(b))||{x:1,y:1},E=C(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({rect:v,offsetParent:b,strategy:s}):v);return{top:(x.top-E.top+y.top)/w.y,bottom:(E.bottom-x.bottom+y.bottom)/w.y,left:(x.left-E.left+y.left)/w.x,right:(E.right-x.right+y.right)/w.x}}))}const W=t=>({name:"arrow",options:t,fn(e){return p(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:a=0}=R(t,e)||{};if(null==f)return{};const u=D(a),d={x:n,y:o},p=P(i),h=A(p),y=yield l.getDimensions(f),g="y"===p,x=g?"top":"left",v=g?"bottom":"right",b=g?"clientHeight":"clientWidth",E=r.reference[h]+r.reference[p]-d[p]-r.floating[h],L=d[p]-r.reference[p],O=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let S=O?O[b]:0;S&&(yield null==l.isElement?void 0:l.isElement(O))||(S=c.floating[b]||r.floating[h]);const k=E/2-L/2,C=S/2-y[h]/2-1,F=m(u[x],C),H=m(u[v],C),W=F,_=S-y[h]-H,V=S/2-y[h]/2+k,B=w(W,V,_),M=!s.arrow&&null!=T(i)&&V!=B&&r.reference[h]/2-(V<W?F:H)-y[h]/2<0,j=M?V<W?W-V:_-V:0;return{[p]:d[p]-j,data:{[p]:B,centerOffset:V-B+j},reset:M}}))}}),_=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return p(this,null,(function*(){var n;const{placement:o,middlewareData:i,rects:r,initialPlacement:l,platform:c,elements:s}=e,f=R(t,e),{mainAxis:a=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:y=!0}=f,g=d(f,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]),x=E(o),v=E(l)===l,b=yield null==c.isRTL?void 0:c.isRTL(s.floating),w=p||(v||!y?[k(l)]:function(t){const e=k(t);return[S(t),e,S(e)]}(l));p||"none"===h||w.push(...function(t,e,n,o){const i=T(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(E(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(S)))),r}(l,y,h,b));const L=[l,...w],O=yield H(e,g),D=[];let C=(null==(n=i.flip)?void 0:n.overflows)||[];if(a&&D.push(O[x]),u){const t=function(t,e,n){void 0===n&&(n=!1);const o=T(t),i=P(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=k(l)),[l,k(l)]}(o,r,b);D.push(O[t[0]],O[t[1]])}if(C=[...C,{placement:o,overflows:D}],!D.every((t=>t<=0))){var F,W;const t=((null==(F=i.flip)?void 0:F.index)||0)+1,e=L[t];if(e)return{data:{index:t,overflows:C},reset:{placement:e}};let n=null==(W=C.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:W.placement;if(!n)switch(m){case"bestFit":{var _;const t=null==(_=C.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:_[0];t&&(n=t);break}case"initialPlacement":n=l}if(o!==n)return{reset:{placement:n}}}return{}}))}}},V=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){return p(this,null,(function*(){const{x:n,y:o}=e,i=yield function(t,e){return p(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=E(n),c=T(n),s="y"===O(n),f=["left","top"].includes(l)?-1:1,u=r&&s?-1:1,d=R(e,t);let{mainAxis:p,crossAxis:m,alignmentAxis:h}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:a({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof h&&(m="end"===c?-1*h:h),s?{x:m*u,y:p*f}:{x:p*f,y:m*u}}))}(e,t);return{x:n+i.x,y:o+i.y,data:i}}))}}},B=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return p(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=R(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=d(r,["mainAxis","crossAxis","limiter"]),p={x:n,y:o},m=yield H(e,f),h=O(E(i)),y=L(h);let g=p[y],x=p[h];if(l){const t="y"===y?"bottom":"right";g=w(g+m["y"===y?"top":"left"],g,g-m[t])}if(c){const t="y"===h?"bottom":"right";x=w(x+m["y"===h?"top":"left"],x,x-m[t])}const v=s.fn(u(a({},e),{[y]:g,[h]:x}));return u(a({},v),{data:{x:v.x-n,y:v.y-o}})}))}}};function M(t){return N(t)?(t.nodeName||"").toLowerCase():"#document"}function j(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function z(t){var e;return null==(e=(N(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function N(t){return t instanceof Node||t instanceof j(t).Node}function I(t){return t instanceof Element||t instanceof j(t).Element}function q(t){return t instanceof HTMLElement||t instanceof j(t).HTMLElement}function X(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof j(t).ShadowRoot)}function Y(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=Q(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function $(t){return["table","td","th"].includes(M(t))}function G(t){const e=J(),n=Q(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function J(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function K(t){return["html","body","#document"].includes(M(t))}function Q(t){return j(t).getComputedStyle(t)}function U(t){return I(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Z(t){if("html"===M(t))return t;const e=t.assignedSlot||t.parentNode||X(t)&&t.host||z(t);return X(e)?e.host:e}function tt(t){const e=Z(t);return K(e)?t.ownerDocument?t.ownerDocument.body:t.body:q(e)&&Y(e)?e:tt(e)}function et(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=tt(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=j(i);return r?e.concat(l,l.visualViewport||[],Y(i)?i:[],l.frameElement&&n?et(l.frameElement):[]):e.concat(i,et(i))}function nt(t){const e=Q(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=q(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=y(n)!==r||y(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function ot(t){return I(t)?t:t.contextElement}function it(t){const e=ot(t);if(!q(e))return x(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=nt(e);let l=(r?y(n.width):n.width)/o,c=(r?y(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const rt=x(0);function lt(t){const e=j(t);return J()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:rt}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=ot(t);let l=x(1);e&&(o?I(o)&&(l=it(o)):l=it(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==j(t))&&e}(r,n,o)?lt(r):x(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=j(r),e=o&&I(o)?j(o):o;let n=t.frameElement;for(;n&&o&&e!==t;){const t=it(n),e=n.getBoundingClientRect(),o=Q(n),i=e.left+(n.clientLeft+parseFloat(o.paddingLeft))*t.x,r=e.top+(n.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=i,f+=r,n=j(n).frameElement}}return C({width:a,height:u,x:s,y:f})}function st(t){return ct(z(t)).left+U(t).scrollLeft}function ft(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=j(t),o=z(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=J();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=z(t),n=U(t),o=t.ownerDocument.body,i=h(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=h(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+st(t);const c=-n.scrollTop;return"rtl"===Q(o).direction&&(l+=h(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(z(t));else if(I(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=q(t)?it(t):x(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=lt(t);o=u(a({},e),{x:e.x-n.x,y:e.y-n.y})}return C(o)}function at(t,e){const n=Z(t);return!(n===e||!I(n)||K(n))&&("fixed"===Q(n).position||at(n,e))}function ut(t,e,n){const o=q(e),i=z(e),r="fixed"===n,l=ct(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=x(0);if(o||!o&&!r)if(("body"!==M(e)||Y(i))&&(c=U(e)),o){const t=ct(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=st(i));return{x:l.left+c.scrollLeft-s.x,y:l.top+c.scrollTop-s.y,width:l.width,height:l.height}}function dt(t,e){return q(t)&&"fixed"!==Q(t).position?e?e(t):t.offsetParent:null}function pt(t,e){const n=j(t);if(!q(t))return n;let o=dt(t,e);for(;o&&$(o)&&"static"===Q(o).position;)o=dt(o,e);return o&&("html"===M(o)||"body"===M(o)&&"static"===Q(o).position&&!G(o))?n:o||function(t){let e=Z(t);for(;q(e)&&!K(e);){if(G(e))return e;e=Z(e)}return null}(t)||n}const mt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=q(n),r=z(n);if(n===r)return e;let l={scrollLeft:0,scrollTop:0},c=x(1);const s=x(0);if((i||!i&&"fixed"!==o)&&(("body"!==M(n)||Y(r))&&(l=U(n)),q(n))){const t=ct(n);c=it(n),s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{width:e.width*c.x,height:e.height*c.y,x:e.x*c.x-l.scrollLeft*c.x+s.x,y:e.y*c.y-l.scrollTop*c.y+s.y}},getDocumentElement:z,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let o=et(t,[],!1).filter((t=>I(t)&&"body"!==M(t))),i=null;const r="fixed"===Q(t).position;let l=r?Z(t):t;for(;I(l)&&!K(l);){const e=Q(l),n=G(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||Y(l)&&!n&&at(t,l))?o=o.filter((t=>t!==l)):i=e,l=Z(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=ft(e,n,i);return t.top=h(o.top,t.top),t.right=m(o.right,t.right),t.bottom=m(o.bottom,t.bottom),t.left=h(o.left,t.left),t}),ft(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:pt,getElementRects:function(t){return p(this,null,(function*(){let{reference:e,floating:n,strategy:o}=t;const i=this.getOffsetParent||pt,r=this.getDimensions;return{reference:ut(e,yield i(n),o),floating:a({x:0,y:0},yield r(n))}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){return nt(t)},getScale:it,isElement:I,isRTL:function(t){return"rtl"===Q(t).direction}};function ht(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=ot(t),d=i||r?[...f?et(f):[],...et(e)]:[];d.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const p=f&&c?function(t,e){let n,o=null;const i=z(t);function r(){clearTimeout(n),o&&o.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:d,width:p,height:y}=t.getBoundingClientRect();if(c||e(),!p||!y)return;const x={rootMargin:-g(d)+"px "+-g(i.clientWidth-(f+p))+"px "+-g(i.clientHeight-(d+y))+"px "+-g(f)+"px",threshold:h(0,m(1,s))||1};let v=!0;function b(t){const e=t[0].intersectionRatio;if(e!==s){if(!v)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),100)}v=!1}try{o=new IntersectionObserver(b,u(a({},x),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(b,x)}o.observe(t)}(!0),r}(f,n):null;let y,x=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(x),x=requestAnimationFrame((()=>{v&&v.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let b=s?ct(t):null;return s&&function e(){const o=ct(t);!b||o.x===b.x&&o.y===b.y&&o.width===b.width&&o.height===b.height||n(),b=o,y=requestAnimationFrame(e)}(),n(),()=>{d.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),p&&p(),v&&v.disconnect(),v=null,s&&cancelAnimationFrame(y)}}const yt=(t,e,n)=>{const o=new Map,i=a({platform:mt},n),r=u(a({},i.platform),{_c:o});return((t,e,n)=>p(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:d,y:p}=F(f,o,s),m=o,h={},y=0;for(let n=0;n<c.length;n++){const{name:r,fn:g}=c[n],{x,y:v,data:b,reset:w}=yield g({x:d,y:p,initialPlacement:o,placement:m,strategy:i,middlewareData:h,rects:f,platform:l,elements:{reference:t,floating:e}});d=null!=x?x:d,p=null!=v?v:p,h=u(a({},h),{[r]:a(a({},h[r]),b)}),w&&y<=50&&(y++,"object"==typeof w&&(w.placement&&(m=w.placement),w.rects&&(f=!0===w.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):w.rects),({x:d,y:p}=F(f,m,s))),n=-1)}return{x:d,y:p,placement:m,strategy:i,middlewareData:h}})))(t,e,u(a({},i),{platform:r}))}}}]);
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { KolButton, KolInputPassword, KolInputText, KolPopover } from '@public-ui/react';
|
|
3
|
-
|
|
4
|
-
import { FC } from 'react';
|
|
5
|
-
|
|
6
|
-
export const PopoverBasic: FC = () => {
|
|
7
|
-
const [top, setTop] = React.useState(false);
|
|
8
|
-
const [right, setRight] = React.useState(false);
|
|
9
|
-
const [bottom, setBottom] = React.useState(false);
|
|
10
|
-
const [left, setLeft] = React.useState(false);
|
|
11
|
-
const [login, setLogin] = React.useState(false);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<div className="grid gap-4 max-w-[400px] mx-auto pt-8">
|
|
15
|
-
<KolButton _label="Oben" _icons="codicon codicon-arrow-up" _variant="primary" _on={{ onClick: () => setTop(!top) }}></KolButton>
|
|
16
|
-
<KolPopover _show={top}>Ich bin oberhalb</KolPopover>
|
|
17
|
-
<KolButton _label="Rechts" _icons="codicon codicon-arrow-right" _variant="danger" _on={{ onClick: () => setRight(!right) }}></KolButton>
|
|
18
|
-
<KolPopover _align="right" _show={right}>
|
|
19
|
-
Ich bin rechts
|
|
20
|
-
</KolPopover>
|
|
21
|
-
<KolButton _label="Unten" _icons="codicon codicon-arrow-down" _variant="secondary" _on={{ onClick: () => setBottom(!bottom) }}></KolButton>
|
|
22
|
-
<KolPopover _align="bottom" _show={bottom}>
|
|
23
|
-
Ich bin unterhalb
|
|
24
|
-
</KolPopover>
|
|
25
|
-
<KolButton _label="Links" _icons="codicon codicon-arrow-left" _variant="normal" _on={{ onClick: () => setLeft(!left) }}></KolButton>
|
|
26
|
-
<KolPopover _align="left" _show={left}>
|
|
27
|
-
Ich bin links
|
|
28
|
-
</KolPopover>
|
|
29
|
-
<KolButton _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
|
|
30
|
-
<KolPopover _show={login}>
|
|
31
|
-
<KolInputText>Benutzername</KolInputText>
|
|
32
|
-
<KolInputPassword>Passwort</KolInputPassword>
|
|
33
|
-
</KolPopover>
|
|
34
|
-
</div>
|
|
35
|
-
);
|
|
36
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|