@intechstudio/grid-uikit 1.20260626.1315 → 1.20260713.1604

package/dist/MeltSelect.svelte

@@ -65,7 +65,8 @@
     <span>&#9660;</span>
   </button>
   {#if $open}
-    <div {...$menu} use:menu class="menu">
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div {...$menu} use:menu on:mousedown|preventDefault class="menu">
       {#each options as item}
         <div
           {...$option({ value: item.value, label: item.title })}

package/dist/MeltSelect.svelte.d.ts

@@ -23,6 +23,8 @@ declare const MeltSelect: $$__sveltets_2_IsomorphicComponent<{
     title?: string;
     valueInfoEnabled?: boolean;
 }, {
+    mousedown: MouseEvent;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type MeltSelect = InstanceType<typeof MeltSelect>;

package/dist/MoltenPushButtonGroup.svelte

@@ -1,11 +1,225 @@
-<div class="button-group">
-  <slot />
+<script lang="ts">
+  import { createSelect, melt } from "@melt-ui/svelte";
+
+  export let options: {
+    title: string;
+    value: any;
+    onclick?: (value: any) => void;
+  }[] = [];
+  export let style: "normal" | "outlined" | "accept" = "normal";
+  export let disabled: boolean = false;
+  export let target: any = undefined;
+
+  function getDefaultSelected() {
+    if (!options?.length) return undefined;
+    const obj = options.find((e) => e.value === target);
+    return obj ? { label: obj.title, value: obj.value } : undefined;
+  }
+
+  const {
+    elements: { menu, option, trigger },
+    states: { selected, selectedLabel, open },
+    helpers: { isSelected },
+  } = createSelect({
+    disabled: disabled,
+    forceVisible: true,
+    positioning: {
+      placement: "bottom-start",
+      fitViewport: true,
+    },
+    defaultSelected: getDefaultSelected(),
+  });
+
+  $: if ($selected) {
+    handleSelectionChange();
+  }
+
+  $: if (target != null) {
+    handleTargetChange();
+  }
+
+  function handleTargetChange() {
+    if ($selected?.value === target) return;
+    const obj = options.find((e) => e.value === target);
+    selected.set({ label: obj?.title ?? "", value: obj?.value });
+  }
+
+  function handleSelectionChange() {
+    if (!$selected || $selected.value === target) return;
+    target = $selected.value;
+  }
+
+  function closeDropdown() {
+    open.set(false);
+  }
+
+  function handleAction() {
+    if (!options || !$selected) return;
+    const item = options.find((e) => e.value === $selected.value);
+    if (item?.onclick) {
+      item.onclick($selected.value);
+    }
+  }
+</script>
+
+<div class="split-button-group">
+  <div class="main-button-wrapper">
+    <slot
+      name="button"
+      {closeDropdown}
+      {handleAction}
+      selectedLabel={$selectedLabel}
+    />
+  </div>
+
+  <button
+    {...$trigger}
+    use:trigger
+    class="trigger style-{style}"
+    {disabled}
+    aria-label="Open dropdown"
+  >
+    &#9660;
+  </button>
+
+  {#if $open}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div {...$menu} use:menu on:mousedown|preventDefault class="menu">
+      {#each options as item}
+        <div
+          {...$option({ value: item.value, label: item.title })}
+          use:option
+          class="option"
+          class:option-selected={$isSelected(item.value)}
+        >
+          {item.title}
+        </div>
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>
-  .button-group {
-    display: flex;
-    gap: 0;
+  .split-button-group {
+    display: inline-flex;
     position: relative;
   }
+
+  .main-button-wrapper {
+    display: inline-flex;
+  }
+
+  .trigger {
+    cursor: pointer;
+    border-top-right-radius: var(--radius, 0.25rem);
+    border-bottom-right-radius: var(--radius, 0.25rem);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    overflow: hidden;
+    padding: 0.25rem 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5em;
+
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    text-transform: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  .trigger:disabled {
+    cursor: default;
+  }
+
+  .trigger:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
+
+  .trigger.style-normal {
+    color: var(--foreground-muted);
+    background-color: var(--background-muted);
+    border: 1px solid var(--background-soft);
+    border-left: none;
+  }
+
+  .trigger.style-normal:hover:not(:disabled) {
+    background-color: var(--background-soft);
+  }
+
+  .trigger.style-normal:disabled {
+    color: var(--foreground-disabled);
+    background-color: var(--background-soft);
+    border: 1px solid var(--background-soft);
+    border-left: none;
+  }
+
+  .trigger.style-outlined {
+    background-color: var(--background-muted);
+    border: 1px solid var(--accent);
+    border-left: none;
+    color: var(--foreground-muted);
+  }
+
+  .trigger.style-outlined:hover:not(:disabled) {
+    background-color: var(--accent-soft);
+    border-color: var(--accent-muted);
+  }
+
+  .trigger.style-outlined:disabled {
+    background-color: var(--background-muted);
+    color: var(--foreground-disabled);
+    border: 1px solid var(--accent-soft);
+    border-left: none;
+  }
+
+  .trigger.style-accept {
+    color: var(--foreground);
+    background-color: var(--accent);
+    border-left: none;
+  }
+
+  .trigger.style-accept:hover:not(:disabled) {
+    background-color: var(--accent-soft);
+  }
+
+  .trigger.style-accept:disabled {
+    color: var(--foreground-disabled);
+    background-color: var(--accent-soft);
+    border-left: none;
+  }
+
+  .menu {
+    z-index: 40;
+    width: 10em;
+    background-color: var(--popover-background);
+    color: var(--foreground-muted);
+    border: 1px solid var(--foreground-muted);
+    border-radius: var(--radius, 0.25rem);
+  }
+
+  .option {
+    cursor: pointer;
+    padding: 0.5rem;
+    white-space: nowrap;
+  }
+
+  .option:hover,
+  .option[data-highlighted] {
+    background-color: var(--popover-selection);
+    color: var(--foreground);
+  }
+
+  .option-selected {
+    background-color: var(--popover-reference);
+  }
 </style>

package/dist/MoltenPushButtonGroup.svelte.d.ts

@@ -1,21 +1,8 @@
-export default MoltenPushButtonGroup;
-type MoltenPushButtonGroup = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const MoltenPushButtonGroup: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,25 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const MoltenPushButtonGroup: $$__sveltets_2_IsomorphicComponent<{
+    options?: {
+        title: string;
+        value: any;
+        onclick?: (value: any) => void;
+    }[];
+    style?: "normal" | "outlined" | "accept";
+    disabled?: boolean;
+    target?: any;
+}, {
+    mousedown: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    button: {
+        closeDropdown: () => void;
+        handleAction: () => void;
+        selectedLabel: string;
+    };
+}, {}, string>;
+type MoltenPushButtonGroup = InstanceType<typeof MoltenPushButtonGroup>;
+export default MoltenPushButtonGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260626.1315",
+  "version": "1.20260713.1604",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"