@coyalabs/bts-style 1.1.6 → 1.1.7

package/dist/Components/ContextMenu.svelte

@@ -0,0 +1,121 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+
+  /**
+   * @type {Array<{label: string, value: any, disabled?: boolean, type?: 'item' | 'separator'}>}
+   */
+  export let items = [];
+
+  /**
+   * @type {any}
+   */
+  export let selectedValue = null;
+
+  /**
+   * @type {(value: any) => void}
+   */
+  export let onSelect = () => {};
+
+  /**
+   * Group items into categories based on separators
+   * @typedef {{label: string | null, items: Array<{item: {label: string, value: any, disabled?: boolean, type?: 'item' | 'separator'}, originalIndex: number}>}} Category
+   * @type {Category[]}
+   */
+  $: categories = items.reduce((/** @type {Category[]} */ acc, item, index) => {
+    if (item.type === 'separator') {
+      acc.push({ label: item.label, items: [] });
+    } else {
+      if (acc.length === 0) {
+        acc.push({ label: null, items: [] });
+      }
+      acc[acc.length - 1].items.push({ item, originalIndex: index });
+    }
+    return acc;
+  }, /** @type {Category[]} */ ([]));
+
+  /**
+   * @param {any} value
+   */
+  function handleSelect(value) {
+    onSelect(value);
+  }
+</script>
+
+<BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="15px" borderRadiusTopRight="15px" borderRadiusBottomLeft="15px" borderRadiusBottomRight="15px">
+  {#each categories as category, catIndex}
+    {#if category.label}
+      <div class="separator" class:not-first={catIndex > 0}>
+        <BaseText variant="content">{category.label}</BaseText>
+      </div>
+    {/if}
+    <div class="category-items">
+      {#each category.items as {item}}
+        <button
+          class="context-item"
+          class:selected={item.value === selectedValue}
+          class:disabled={item.disabled}
+          disabled={item.disabled}
+          on:click={() => handleSelect(item.value)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/each}
+</BaseContainer>
+
+<style>
+  .category-items {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .separator {
+    opacity: 0.6;
+    padding-bottom: 0.5rem;
+    font-size: 0.85rem;
+  }
+
+  .separator.not-first {
+    padding-top: 0.5rem;
+    border-top: 1px solid rgba(227, 216, 216, 0.1);
+    margin-top: 0.5rem;
+  }
+
+  .context-item {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: none;
+    border: none;
+    color: #E3D8D8;
+    font-family: 'Satoshi', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    border-radius: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .context-item:hover:not(.disabled) {
+    background-color: rgba(227, 216, 216, 0.1);
+  }
+
+  .context-item.selected {
+    background-color: rgba(255, 239, 246, 0.15);
+    font-weight: 700;
+  }
+
+  .context-item.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .context-item:not(:last-child) {
+    margin-bottom: 4px;
+  }
+</style>

package/dist/Components/ContextMenu.svelte.d.ts

@@ -0,0 +1,40 @@
+export default ContextMenu;
+type ContextMenu = SvelteComponent<{
+    items?: {
+        label: string;
+        value: any;
+        disabled?: boolean | undefined;
+        type?: "separator" | "item" | undefined;
+    }[] | undefined;
+    selectedValue?: any;
+    onSelect?: ((value: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<{
+    items?: {
+        label: string;
+        value: any;
+        disabled?: boolean;
+        type?: "item" | "separator";
+    }[] | undefined;
+    selectedValue?: any;
+    onSelect?: ((value: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Dropdown.svelte

@@ -1,6 +1,6 @@
 <script>
   import Button from './Button.svelte';
-  import BaseContainer from '../Base/BaseContainer.svelte';
+  import ContextMenu from './ContextMenu.svelte';
   import { icons } from '../icons';
   import { slide } from 'svelte/transition';
 
@@ -25,7 +25,7 @@
   export let width = '200px';
 
   /**
-   * @type {Array<{label: string, value: any, disabled?: boolean}>}
+   * @type {Array<{label: string, value: any, disabled?: boolean, type?: 'item' | 'separator'}>}
    */
   export let options = [];
 
@@ -111,19 +111,7 @@
 
   {#if isOpen}
     <div class="dropdown-menu" transition:slide={{ duration: 150 }}>
-      <BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="15px" borderRadiusTopRight="15px" borderRadiusBottomLeft="15px" borderRadiusBottomRight="15px">
-        {#each options as option}
-          <button
-            class="dropdown-item"
-            class:selected={option.value === value}
-            class:disabled={option.disabled}
-            disabled={option.disabled}
-            on:click={() => selectOption(option.value)}
-          >
-            {option.label}
-          </button>
-        {/each}
-      </BaseContainer>
+      <ContextMenu items={options} selectedValue={value} onSelect={selectOption} />
     </div>
   {/if}
 </div>
@@ -152,40 +140,4 @@
     right: 0;
     z-index: 1000;
   }
-
-  .dropdown-item {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: none;
-    border: none;
-    color: #E3D8D8;
-    font-family: 'Satoshi', sans-serif;
-    font-size: 0.95rem;
-    font-weight: 500;
-    text-align: left;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    border-radius: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dropdown-item:hover:not(.disabled) {
-    background-color: rgba(227, 216, 216, 0.1);
-  }
-
-  .dropdown-item.selected {
-    background-color: rgba(255, 239, 246, 0.15);
-    font-weight: 700;
-  }
-
-  .dropdown-item.disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .dropdown-item:not(:last-child) {
-    margin-bottom: 4px;
-  }
 </style>

package/dist/Components/Dropdown.svelte.d.ts

@@ -13,6 +13,7 @@ type Dropdown = SvelteComponent<{
         label: string;
         value: any;
         disabled?: boolean | undefined;
+        type?: "separator" | "item" | undefined;
     }[] | undefined;
     onChange?: ((value: any) => void) | undefined;
 }, {
@@ -34,6 +35,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
         label: string;
         value: any;
         disabled?: boolean;
+        type?: "item" | "separator";
     }[] | undefined;
     onChange?: ((value: any) => void) | undefined;
 }, {

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as Toggle } from "./Components/Toggle.svelte";
 export { default as Tooltip } from "./Components/Tooltip.svelte";
 export { default as TabBar } from "./Components/TabBar.svelte";
 export { default as Dropdown } from "./Components/Dropdown.svelte";
+export { default as ContextMenu } from "./Components/ContextMenu.svelte";
 export { default as Popup } from "./Components/Popup/Popup.svelte";
 export { popupStore } from "./Components/popupStore.js";
 export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Toggle } from "./Components/Toggle.svelte";
 export { default as Tooltip } from "./Components/Tooltip.svelte";
 export { default as TabBar } from "./Components/TabBar.svelte";
 export { default as Dropdown } from "./Components/Dropdown.svelte";
+export { default as ContextMenu } from "./Components/ContextMenu.svelte";
 export { default as Popup } from "./Components/Popup/Popup.svelte";
 export { popupStore } from "./Components/popupStore.js";
 export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {