@pathscale/ui 0.0.56 → 0.0.57

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.
Files changed (2) hide show
  1. package/dist/index.js +81 -9
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -9484,7 +9484,7 @@ const steps_Steps = Object.assign(Steps, {
9484
9484
  Step: Step
9485
9485
  });
9486
9486
  const steps = steps_Steps;
9487
- var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><svg class="absolute inset-0 w-full h-full z-0"viewBox="0 0 400 400"preserveAspectRatio="xMidYMid slice"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg><div class="relative z-10 h-full w-full">');
9487
+ var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
9488
9488
  function hexToRgb(hex) {
9489
9489
  hex = hex.replace(/^#/, '');
9490
9490
  const bigint = parseInt(hex, 16);
@@ -9498,7 +9498,11 @@ function hexToRgb(hex) {
9498
9498
  };
9499
9499
  }
9500
9500
  function SvgBackground(props) {
9501
- const { colorStart = '#6366f1', colorEnd = '#4f46e5', backgroundColor = '#000000', opacity = 1, blurIntensity = 40, density = 5, class: className = '', style = {}, children } = props;
9501
+ const { colorStart = '#6366f1', colorEnd = '#4f46e5', backgroundColor = '#000000', opacity = 1, blurIntensity = 40, density = 5, darkness = 0, class: className = '', style = {}, children } = props;
9502
+ let containerRef;
9503
+ let svgRef;
9504
+ let canvasRef;
9505
+ const [isBackgroundReady, setBackgroundReady] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
9502
9506
  const getIntermediateColor = (t)=>{
9503
9507
  const start = hexToRgb(colorStart);
9504
9508
  const end = hexToRgb(colorEnd);
@@ -9776,22 +9780,90 @@ function SvgBackground(props) {
9776
9780
  ...accentShapes
9777
9781
  ];
9778
9782
  };
9783
+ const renderSvgToCanvas = ()=>{
9784
+ if (!svgRef || !canvasRef) return;
9785
+ const svgData = new XMLSerializer().serializeToString(svgRef);
9786
+ const svgBlob = new Blob([
9787
+ svgData
9788
+ ], {
9789
+ type: 'image/svg+xml'
9790
+ });
9791
+ const svgUrl = URL.createObjectURL(svgBlob);
9792
+ const img = new Image();
9793
+ img.src = svgUrl;
9794
+ img.onload = ()=>{
9795
+ if (!canvasRef) return;
9796
+ if (containerRef) {
9797
+ const rect = containerRef.getBoundingClientRect();
9798
+ const blurPadding = Math.ceil(2 * blurIntensity);
9799
+ canvasRef.width = rect.width + 2 * blurPadding;
9800
+ canvasRef.height = rect.height + 2 * blurPadding;
9801
+ }
9802
+ const ctx = canvasRef.getContext('2d');
9803
+ if (!ctx) return;
9804
+ ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
9805
+ ctx.fillStyle = backgroundColor;
9806
+ ctx.fillRect(0, 0, canvasRef.width, canvasRef.height);
9807
+ ctx.drawImage(img, 2 * -blurIntensity, 2 * -blurIntensity, canvasRef.width + 4 * blurIntensity, canvasRef.height + 4 * blurIntensity);
9808
+ URL.revokeObjectURL(svgUrl);
9809
+ setBackgroundReady(true);
9810
+ };
9811
+ };
9812
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
9813
+ if (window && 'ResizeObserver' in window) {
9814
+ const observer = new ResizeObserver(()=>{
9815
+ renderSvgToCanvas();
9816
+ });
9817
+ if (containerRef) observer.observe(containerRef);
9818
+ return ()=>{
9819
+ if (containerRef) observer.unobserve(containerRef);
9820
+ };
9821
+ }
9822
+ renderSvgToCanvas();
9823
+ });
9824
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
9825
+ setTimeout(()=>{
9826
+ renderSvgToCanvas();
9827
+ }, 0);
9828
+ });
9779
9829
  const backgroundStyle = ()=>({
9780
9830
  position: 'relative',
9781
9831
  overflow: 'hidden',
9782
- filter: `blur(${blurIntensity}px)`,
9783
9832
  ...style
9784
9833
  });
9834
+ const canvasStyle = ()=>({
9835
+ position: 'absolute',
9836
+ top: `-${2 * blurIntensity}px`,
9837
+ left: `-${2 * blurIntensity}px`,
9838
+ width: `calc(100% + ${4 * blurIntensity}px)`,
9839
+ height: `calc(100% + ${4 * blurIntensity}px)`,
9840
+ 'z-index': '0',
9841
+ opacity: opacity.toString(),
9842
+ filter: `blur(${blurIntensity}px)`
9843
+ });
9785
9844
  return (()=>{
9786
- var _el$14 = _tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling;
9845
+ var _el$14 = _tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling;
9846
+ var _ref$ = containerRef;
9847
+ "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$14) : containerRef = _el$14;
9787
9848
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$14, `relative flex items-center justify-center ${className}`);
9788
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$16, "fill", backgroundColor);
9789
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$15, generateShapes, null);
9790
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, children);
9849
+ _el$15.style.setProperty("display", "none");
9850
+ var _ref$2 = svgRef;
9851
+ "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$16) : svgRef = _el$16;
9852
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$17, "fill", backgroundColor);
9853
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, generateShapes, null);
9854
+ var _ref$3 = canvasRef;
9855
+ "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$18) : canvasRef = _el$18;
9856
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, darkness > 0 && (()=>{
9857
+ var _el$20 = _tmpl$10();
9858
+ _el$20.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
9859
+ _el$20.style.setProperty("pointer-events", "none");
9860
+ return _el$20;
9861
+ })(), _el$19);
9862
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$19, children);
9791
9863
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
9792
- var _v$33 = backgroundStyle(), _v$34 = opacity.toString();
9864
+ var _v$33 = backgroundStyle(), _v$34 = canvasStyle();
9793
9865
  _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$14, _v$33, _p$.e);
9794
- _v$34 !== _p$.t && (null != (_p$.t = _v$34) ? _el$15.style.setProperty("opacity", _v$34) : _el$15.style.removeProperty("opacity"));
9866
+ _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$18, _v$34, _p$.t);
9795
9867
  return _p$;
9796
9868
  }, {
9797
9869
  e: void 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pathscale/ui",
3
- "version": "0.0.56",
3
+ "version": "0.0.57",
4
4
  "author": "pathscale",
5
5
  "repository": {
6
6
  "type": "git",