@medyll/idae-slotui-svelte 0.120.0 → 0.122.0

package/dist/utils/stylesheet/stylesheet.scss

@@ -1,147 +1,147 @@
-@use "sass:map";
-@use "containerConfig.scss";
-
-$breakpoints: (
-    "xs": var(--breakpoint-xs, 320px),
-    "sm": var(--breakpoint-sm, 480px),
-    "md": var(--breakpoint-md, 640px),
-    "lg": var(--breakpoint-lg, 960px),
-    "xl": var(--breakpoint-xl, 1280px),
-    "xxl": var(--breakpoint-xxl, 1920px),
-    "xxxl": var(--breakpoint-xxxl, 1440px)
-);
-
-$breakpoint-name: "bkp";
-
-$containerItem: "container-item"; //var(--container-item, "container-item");
-$onContainer: var(--on-container, "on-container");
-$than: "than"; // var(--than, "than");
-$showSelector: var(--show, "show");
-$hideSelector: var(--hide, "hide");
-
-@debug ($containerItem);
-:root {
-    @each $name, $size in $breakpoints {
-        --#{$breakpoint-name}-#{$name}: #{$size};
-    }
-}
-
-@mixin hidden {
-    content-visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: -10;
-    visibility: hidden;
-}
-
-@mixin visible {
-    content-visibility: auto;
-    opacity: 1;
-    position: static;
-    z-index: auto;
-    visibility: visible;
-}
-
-@function generate-visibility-classes($breakpoints) {
-    $result: ();
-    @each $name, $size in $breakpoints {
-        $result: map.merge(
-            $result,
-            (
-                "hide-more-#{$name}": (
-                    min-width: var(--#{$breakpoint-name}-#{$name}),
-                    class: hidden
-                ),
-                "show-more-#{$name}": (
-                    min-width: var(--#{$breakpoint-name}-#{$name}),
-                    class: visible
-                ),
-                "hide-less-#{$name}": (
-                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
-                    class: hidden
-                ),
-                "show-less-#{$name}": (
-                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
-                    class: visible
-                )
-            )
-        );
-    }
-    @return $result;
-}
-
-// this mixin uses the @container pseudo-class to generate container queries
-// it is used to hide/show elements based on the container width
-// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
-@mixin generate-container-queries() {
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        :global(.#{$containerItem}-hide-max-width) {
-            color: red;
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        .#{$containerItem}-hide-min-width {
-            @include hidden;
-        }
-    }
-    @container (min-height: var(--hide-on-container-height-less-#{than})) {
-        .#{$containerItem}-hide-max-height {
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-height-more-#{than})) {
-        .#{$containerItem}-hide-min-height {
-            @include hidden;
-        }
-    }
-}
-
-$visibility-classes: generate-visibility-classes($breakpoints);
-
-@each $breakp, $props in $visibility-classes {
-    @if map.has-key($props, "min-width") {
-        @media (min-width: #{map.get($props, 'min-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include visible;
-                }
-            }
-        }
-    } @else if map.has-key($props, "max-width") {
-        @media (max-width: #{map.get($props, 'max-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include visible;
-                }
-            }
-        }
-    }
-}
-
-:global([container-inline]),
-:global([container="inline"]),
-:global(.container-inline) {
-    container-type: inline-size;
-}
-
-:global([container-size]),
-:global([container="size"]),
-:global(.container-size) {
-    container-type: size;
-}
-
-:global([container-normal]),
-:global([container="normal"]),
-:global(.container-normal) {
-    container-type: normal;
-}
-@include generate-container-queries;
+@use "sass:map";
+@use "containerConfig.scss";
+
+$breakpoints: (
+    "xs": var(--breakpoint-xs, 320px),
+    "sm": var(--breakpoint-sm, 480px),
+    "md": var(--breakpoint-md, 640px),
+    "lg": var(--breakpoint-lg, 960px),
+    "xl": var(--breakpoint-xl, 1280px),
+    "xxl": var(--breakpoint-xxl, 1920px),
+    "xxxl": var(--breakpoint-xxxl, 1440px)
+);
+
+$breakpoint-name: "bkp";
+
+$containerItem: "container-item"; //var(--container-item, "container-item");
+$onContainer: var(--on-container, "on-container");
+$than: "than"; // var(--than, "than");
+$showSelector: var(--show, "show");
+$hideSelector: var(--hide, "hide");
+
+@debug ($containerItem);
+:root {
+    @each $name, $size in $breakpoints {
+        --#{$breakpoint-name}-#{$name}: #{$size};
+    }
+}
+
+@mixin hidden {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+}
+
+@mixin visible {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+}
+
+@function generate-visibility-classes($breakpoints) {
+    $result: ();
+    @each $name, $size in $breakpoints {
+        $result: map.merge(
+            $result,
+            (
+                "hide-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: hidden
+                ),
+                "show-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: visible
+                ),
+                "hide-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: hidden
+                ),
+                "show-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: visible
+                )
+            )
+        );
+    }
+    @return $result;
+}
+
+// this mixin uses the @container pseudo-class to generate container queries
+// it is used to hide/show elements based on the container width
+// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
+@mixin generate-container-queries() {
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        :global(.#{$containerItem}-hide-max-width) {
+            color: red;
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        .#{$containerItem}-hide-min-width {
+            @include hidden;
+        }
+    }
+    @container (min-height: var(--hide-on-container-height-less-#{than})) {
+        .#{$containerItem}-hide-max-height {
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-height-more-#{than})) {
+        .#{$containerItem}-hide-min-height {
+            @include hidden;
+        }
+    }
+}
+
+$visibility-classes: generate-visibility-classes($breakpoints);
+
+@each $breakp, $props in $visibility-classes {
+    @if map.has-key($props, "min-width") {
+        @media (min-width: #{map.get($props, 'min-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    } @else if map.has-key($props, "max-width") {
+        @media (max-width: #{map.get($props, 'max-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    }
+}
+
+:global([container-inline]),
+:global([container="inline"]),
+:global(.container-inline) {
+    container-type: inline-size;
+}
+
+:global([container-size]),
+:global([container="size"]),
+:global(.container-size) {
+    container-type: size;
+}
+
+:global([container-normal]),
+:global([container="normal"]),
+:global(.container-normal) {
+    container-type: normal;
+}
+@include generate-container-queries;

package/dist/utils/uses/sx4u/sx4uPreprocess.js

@@ -1,34 +1,34 @@
-export const sx4uPreprocess = {
-	render: (args) => {
-		// console.log(args);
-		const { content } = args;
-		//  console.log(content);
-		// split css by line
-		// console.log(parseCSSText(content));
-		let css_rows = content.split('\n');
-		// filter out empty elements and strip ';'
-		css_rows = css_rows
-			.filter(function (x) {
-				return x != '';
-			})
-			.map(function (x) {
-				return x.trim().replace(';', '');
-			});
-
-		let json_name = css_rows[0].trim().replace(/[\.\{\ \#]/g, '');
-
-		return { code: args.content };
-
-		function parseCSSText(cssText) {
-			var cssTxt = cssText.replace(/\/\*(.|\s)*?\*\//g, ' ').replace(/\s+/g, ' ');
-
-			var style = {},
-				[, ruleName, rule] = cssTxt.match(/ ?(.*?) ?{([^}]*)}/) || [, , cssTxt];
-
-			var cssToJs = (s) => s.replace(/\W+\w/g, (match) => match.slice(-1).toUpperCase());
-			var properties = rule.split(';').map((o) => o.split(':').map((x) => x && x.trim()));
-			for (var [property, value] of properties) style[cssToJs(property)] = value;
-			return { cssText, ruleName, style };
-		} /* updated 2017-09-28 */
-	}
-};
+export const sx4uPreprocess = {
+	render: (args) => {
+		// console.log(args);
+		const { content } = args;
+		//  console.log(content);
+		// split css by line
+		// console.log(parseCSSText(content));
+		let css_rows = content.split('\n');
+		// filter out empty elements and strip ';'
+		css_rows = css_rows
+			.filter(function (x) {
+				return x != '';
+			})
+			.map(function (x) {
+				return x.trim().replace(';', '');
+			});
+
+		let json_name = css_rows[0].trim().replace(/[\.\{\ \#]/g, '');
+
+		return { code: args.content };
+
+		function parseCSSText(cssText) {
+			var cssTxt = cssText.replace(/\/\*(.|\s)*?\*\//g, ' ').replace(/\s+/g, ' ');
+
+			var style = {},
+				[, ruleName, rule] = cssTxt.match(/ ?(.*?) ?{([^}]*)}/) || [, , cssTxt];
+
+			var cssToJs = (s) => s.replace(/\W+\w/g, (match) => match.slice(-1).toUpperCase());
+			var properties = rule.split(';').map((o) => o.split(':').map((x) => x && x.trim()));
+			for (var [property, value] of properties) style[cssToJs(property)] = value;
+			return { cssText, ruleName, style };
+		} /* updated 2017-09-28 */
+	}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@medyll/idae-slotui-svelte",
-	"version": "0.120.0",
+	"version": "0.122.0",
 	"scope": "@medyll",
 	"description": "A Svelte 5 component library for building modular and reactive user interfaces.",
 	"scripts": {
@@ -39,7 +39,7 @@
 		"svelte": "^5.0.0-next"
 	},
 	"devDependencies": {
-		"@medyll/idae-prettier-config": "^1.1.0",
+		"@medyll/idae-prettier-config": "^1.2.0",
 		"@playwright/test": "^1.51.1",
 		"@sveltejs/adapter-auto": "^5.0.0",
 		"@sveltejs/kit": "^2.20.2",
@@ -89,8 +89,8 @@
 	"dependencies": {
 		"@iconify/svelte": "^4.2.0",
 		"@medyll/cssfabric": "^0.4.2",
-		"@medyll/idae-be": "^1.28.0",
-		"@medyll/idae-engine": "^1.117.0",
+		"@medyll/idae-be": "^1.30.0",
+		"@medyll/idae-engine": "^1.119.0",
 		"d3": "^7.9.0",
 		"lerna": "^8.2.1",
 		"npm-check-updates": "^17.1.16",