@marianmeres/stuic 1.87.0 → 1.89.0

package/dist/components/Input/FieldSelect.svelte

@@ -1,9 +1,10 @@
-<script context="module">import { createEventDispatcher } from "svelte";
+<script context="module">import { createClog } from "@marianmeres/clog";
+import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import {
-  getId,
   Thc,
+  getId,
   validate as validateAction
 } from "../../index.js";
 const _emptyClasses = () => ({
@@ -72,7 +73,8 @@ export class FieldSelectConfig {
 }
 </script>
 
-<script>const dispatch = createEventDispatcher();
+<script>const clog = createClog("FieldSelect");
+const dispatch = createEventDispatcher();
 export let options = [];
 let _class = {};
 export { _class as class };
@@ -93,17 +95,24 @@ export let labelLeft = FieldSelectConfig.labelLeft;
 export let labelLeftWidth = FieldSelectConfig.labelLeftWidth;
 let validation;
 const setValidationResult = (res) => validation = res;
-let _options = [];
-$:
-  _options = options.map((v) => {
-    if (typeof v === "string") {
+const _normalizeAndGroupOptions = (opts) => {
+  const groupped = /* @__PURE__ */ new Map();
+  opts.forEach((v) => {
+    if (typeof v === "string")
       v = { label: v };
-    }
-    if (v.value === void 0) {
+    if (v.value === void 0)
       v.value = v.label;
-    }
-    return v;
+    const optgLabel = v.optgroup || "";
+    if (!groupped.has(optgLabel))
+      groupped.set(optgLabel, []);
+    const optgroup = groupped.get(optgLabel);
+    optgroup.push(v);
   });
+  return groupped;
+};
+let _options;
+$:
+  _options = _normalizeAndGroupOptions(options);
 let _inputEl;
 $:
   if (_inputEl)
@@ -202,8 +211,18 @@ $:
 					on:mouseenter
 					on:mouseleave
 				>
-					{#each _options as o, i}
-						<option value={o.value}>{o.label}</option>
+					{#each _options as [_optgroup, _opts]}
+						{#if _optgroup}
+							<optgroup label={_optgroup}>
+								{#each _opts as o}
+									<option value={o.value}>{o.label}</option>
+								{/each}
+							</optgroup>
+						{:else}
+							{#each _opts as o}
+								<option value={o.value}>{o.label}</option>
+							{/each}
+						{/if}
 					{/each}
 				</select>
 

package/dist/components/Input/FieldSelect.svelte.d.ts

@@ -29,6 +29,7 @@ declare const __propDef: {
         options?: (string | {
             label: string;
             value?: string | undefined;
+            optgroup?: string | undefined;
         })[] | undefined;
         class?: FieldSelectConfigClasses | undefined;
         classBySize?: FieldSelectConfigClassesBySize | undefined;

package/dist/components/Notifications/Notifications.svelte

@@ -7,7 +7,7 @@ import { notificationsDefaultIcons } from "./notifications-icons.js";
 const X_POSITIONS = ["left", "center", "right"];
 const Y_POSITIONS = ["top", "center", "bottom"];
 const DEFAULT = {
-  posX: "center",
+  posX: "right",
   posXMobile: "center",
   posY: "top",
   posYMobile: "bottom"
@@ -28,7 +28,7 @@ export class NotificationsConfig {
       box: `
                     relative flex
                     pointer-events-auto 
-                    w-full max-w-lg
+                    w-full max-w-sm
                     rounded-md
                     shadow-lg
                     bg-gray-700 text-white

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.87.0",
+	"version": "1.89.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",