@humandialog/forms.svelte 1.8.10 → 1.8.12

package/components/Floating_container.svelte

@@ -43,15 +43,12 @@ export async function show(around, _toolbar, _props = {}) {
   };
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
-  window.addEventListener("click", on_before_window_click, true);
   if (isDeviceSmallerThan("sm"))
     preventScrollRestorer = usePreventScroll();
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
   }
   await tick();
-  if (!was_visible)
-    rootElement.addEventListener("click", on_before_container_click, true);
   cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
@@ -64,8 +61,6 @@ export function hide() {
   visible = false;
   toolbar = null;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
-  window.removeEventListener("click", on_before_window_click, true);
-  rootElement?.removeEventListener("click", on_before_container_click, true);
   if (preventScrollRestorer) {
     preventScrollRestorer();
     preventScrollRestorer = null;
@@ -82,7 +77,7 @@ async function onSizeChanged() {
   cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 let hide_window_indicator = 0;
-function on_before_window_click() {
+function on_before_window_click(e) {
   hide_window_indicator++;
   setTimeout(() => {
     if (hide_window_indicator != 0) {
@@ -155,30 +150,42 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
   }
   return result;
 }
+function on_window_click(e) {
+  const clickedElement = e.target;
+  if (clickedElement.id == "__hd_svelte_floating_container") {
+    hide();
+  }
+}
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div    id="__hd_svelte_floating_container"
         class=" Floating_container
-                bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed
+                z-40
+                fixed inset-0 w-screen overflow-y-auto overscroll-contain
+                "
+        hidden={!visible}
+        on:click={on_window_click}>
+    <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black
                 sm:shadow-xl sm:shadow-slate-700/10
                 sm:dark:shadow-black/80
-                sm:outline sm:outline-1 sm:outline-stone-500"
-        style={cssPosition}
-        visible={visible}
-        bind:this={rootElement}>
-        {#if closeButtonPos}
-    <button class="     text-stone-800 dark:text-stone-400
-                        fixed w-6 h-6 flex items-center justify-center
-                        focus:outline-none font-medium  text-sm text-center"
-            style={closeButtonPos}
-            on:click={ hide }>  <!--rounded-full focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700  -->
-            <Icon component={FaTimes} s="md"/>
-        </button>
-    {/if}
+                sm:outline sm:outline-1 sm:outline-stone-500 fixed"
+                style={cssPosition}
+                bind:this={rootElement}>
+            {#if closeButtonPos}
+        <button class="     text-stone-800 dark:text-stone-400
+                            fixed w-6 h-6 flex items-center justify-center
+                            focus:outline-none font-medium  text-sm text-center"
+                style={closeButtonPos}
+                on:click={ hide }>  <!--rounded-full focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700  -->
+                <Icon component={FaTimes} s="md"/>
+            </button>
+        {/if}
 
-    {#if toolbar}
-        <svelte:component this={toolbar} {...props} {maxHeight} bind:this={internalElement} />
-    {/if}
+        {#if toolbar}
+            <svelte:component this={toolbar} {...props} {maxHeight} bind:this={internalElement} />
+        {/if}
+    </div>
 </div>
 
 <!-- use usePreventScroll instead -->

package/components/combo/combo.svelte

@@ -118,12 +118,15 @@ function setup(...args) {
   if (readOnly)
     can_be_activated = false;
   else if (is_compact) {
-    can_be_activated = false;
-    let contexts = inContext.split(" ");
-    contexts.forEach((ctx2) => {
-      if ($contextItemsStore[ctx2] == item)
-        can_be_activated = true;
-    });
+    if (inContext) {
+      can_be_activated = false;
+      let contexts = inContext.split(" ");
+      contexts.forEach((ctx2) => {
+        if ($contextItemsStore[ctx2] == item)
+          can_be_activated = true;
+      });
+    } else
+      can_be_activated = true;
   } else
     can_be_activated = true;
 }

package/components/contextmenu.container.svelte

@@ -0,0 +1,39 @@
+<script>import Menu from "./contextmenu.svelte";
+let visible = false;
+let menu;
+let onOrgHideCallback = void 0;
+export async function show(around, _operations, preference = 0, onHideCallback = void 0) {
+  visible = true;
+  onOrgHideCallback = onHideCallback;
+  menu?.show(around, _operations, preference, onHide);
+}
+export function isVisible() {
+  return visible;
+}
+export function hide() {
+  visible = false;
+  menu?.hide();
+}
+function onHide() {
+  if (onOrgHideCallback)
+    onOrgHideCallback();
+  visible = false;
+}
+function on_window_click(e) {
+  const clickedElement = e.target;
+  if (clickedElement.id == "__hd_svelte_contextmenu") {
+    hide();
+  }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div id="__hd_svelte_contextmenu"
+    class=" z-40 
+            fixed inset-0 w-screen overflow-y-auto overscroll-contain"
+    hidden={!visible}
+    on:click={on_window_click}>
+
+    <Menu bind:this={menu}/>
+
+</div>

package/components/contextmenu.container.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: ((around: DOMRect | DOMPoint, _operations: any, preference?: number, onHideCallback?: Function | undefined) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextmenuProps = typeof __propDef.props;
+export type ContextmenuEvents = typeof __propDef.events;
+export type ContextmenuSlots = typeof __propDef.slots;
+export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
+    get show(): (around: DOMRect | DOMPoint, _operations: any, preference?: number, onHideCallback?: Function | undefined) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+}
+export {};

package/components/contextmenu.svelte

@@ -204,7 +204,6 @@ export async function show(around, _operations, preference = 0, onHideCallback =
   const is_root_menu = owner_menu_item == void 0;
   if (is_root_menu) {
     hide_window_indicator = 0;
-    window.addEventListener("click", on_before_window_click, true);
     if (isDeviceSmallerThan("sm"))
       preventScrollRestorer = usePreventScroll();
   }
@@ -214,7 +213,7 @@ export async function show(around, _operations, preference = 0, onHideCallback =
   await tick();
   css_position = calculatePosition(x, y, true, false);
   if (is_root_menu)
-    menu_root.addEventListener("click", on_before_container_click, true);
+    ;
   if (menu_items.length && !isDeviceSmallerThan("sm"))
     focus_menu_item(focused_index);
 }
@@ -227,8 +226,6 @@ export function hide() {
   }
   visible = false;
   css_position = calculatePosition(x, y, false, false);
-  window.removeEventListener("click", on_before_window_click, true);
-  menu_root?.removeEventListener("click", on_before_container_click, true);
   if (preventScrollRestorer) {
     preventScrollRestorer();
     preventScrollRestorer = null;
@@ -417,196 +414,160 @@ function isOperationDisabled(operation) {
 }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<div id="__hd_svelte_contextmenu"
-    class="
-            bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500
+<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500
             dark:shadow-black z-40 fixed
             sm:shadow-xl sm:shadow-slate-700/10
             sm:dark:shadow-black/80
             sm:outline sm:outline-1 sm:outline-stone-500
-            z-40 fixed min-w-60 max-h-screen "
+            fixed min-w-60 max-h-screen "
+            style={css_position}
+                bind:this={menu_root}>
+        <div class="
+                    paper w-full sm:w-[24rem]
+                    prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+                    sm:max-w-3xl
 
-    style={css_position}
-    visible={visible}
-    bind:this={menu_root}>
-    <div class="
-                paper w-full sm:w-[24rem]
-                prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
-                sm:max-w-3xl
+                    m-0 pt-3 pb-5 px-2
+                    sm:rounded
+                    sm:bg-stone-100 sm:dark:bg-stone-900
+                    flex flex-col
+                    ">
 
-                m-0 pt-3 pb-5 px-2
-                sm:rounded
-                sm:bg-stone-100 sm:dark:bg-stone-900
-                flex flex-col
-                ">
+        <!-------------------------------------------------------------------->
+        <!-- POPUP HEADER ---------------------------------------------------->
+        <!-------------------------------------------------------------------->
+        {#if closeButtonPos}
+        <h3 class = "flex-none">
+            <div class="px-2 w-full flex flex-row justify-between">
 
-    <!-------------------------------------------------------------------->
-    <!-- POPUP HEADER ---------------------------------------------------->
-    <!-------------------------------------------------------------------->
-    {#if closeButtonPos}
-    <h3 class = "flex-none">
-        <div class="px-2 w-full flex flex-row justify-between">
-
-            <div class="grow ">
-                <span class="px-2 text-left"></span>
-            </div>
-            <div class="py-1.5  flex flex-row justify-between">
-                <button class="ml-4 w-6
-                            hover:bg-stone-200 hover:dark:bg-stone-700
-                            hover:outline hover:outline-8
-                            hover:outline-stone-200 hover:dark:outline-stone-700"
-                            on:click={hide}>
-                    <Ricon icon = 'x' />
-                </button>
+                <div class="grow ">
+                    <span class="px-2 text-left"></span>
+                </div>
+                <div class="py-1.5  flex flex-row justify-between">
+                    <button class="ml-4 w-6
+                                hover:bg-stone-200 hover:dark:bg-stone-700
+                                hover:outline hover:outline-8
+                                hover:outline-stone-200 hover:dark:outline-stone-700"
+                                on:click={hide}>
+                        <Ricon icon = 'x' />
+                    </button>
+                </div>
             </div>
-        </div>
-    </h3>
-    {/if}
+        </h3>
+        {/if}
 
 
-    <!-------------------------------------------------------------------->
-    <!-- POPUP CONTENT---------------------------------------------------->
-    <!-------------------------------------------------------------------->
-    <div class="px-2 grow max-h-[45dvh] sm:max-h-[75dvh] overflow-y-auto overscroll-contain">
+        <!-------------------------------------------------------------------->
+        <!-- POPUP CONTENT---------------------------------------------------->
+        <!-------------------------------------------------------------------->
+        <div class="px-2 grow max-h-[45dvh] sm:max-h-[75dvh] overflow-y-auto overscroll-contain">
 
 
 
-        {#each operations as operation, index}
+            {#each operations as operation, index}
 
-            {@const is_separator = operation.separator}
-            {#if is_separator}
-                {#if index>0 && index < operations.length-1}
-                    <!--hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700"-->
-                    <hr class="my-4">
-                {/if}
-            {:else}
+                {@const is_separator = operation.separator}
+                {#if is_separator}
+                    {#if index>0 && index < operations.length-1}
+                        <!--hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700"-->
+                        <hr class="my-4">
+                    {/if}
+                {:else}
 
-                {@const mobile = isDeviceSmallerThan("sm")}
-                {@const icon_placeholder_without_desc = mobile ? 12 : 10}
-                {@const icon_placeholder_with_desc = mobile ? 14 : 12}
-                {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
-                {@const menu_item_id = menu_items_id_prefix + index}
-                {@const isTop = index==0}
-                {@const isBottom = index == operations.length-1}
-                {@const isFocused = index == focused_index}
-                {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
-                {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
-                {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
-                <!--div-->
-                <div class="pl-4 cursor-pointer {active}"
-                    id={menu_item_id}
-                    bind:this={menu_items[index]}
-                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
-                    on:mouseenter = {(e) => {on_mouse_move(index)}}
-                    on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
-                    on:mousedown={mousedown}
-                    disabled={isOperationDisabled(operation)}
-                    class:opacity-60={isOperationDisabled(operation)}>
+                    {@const mobile = isDeviceSmallerThan("sm")}
+                    {@const icon_placeholder_without_desc = mobile ? 12 : 10}
+                    {@const icon_placeholder_with_desc = mobile ? 14 : 12}
+                    {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
+                    {@const menu_item_id = menu_items_id_prefix + index}
+                    {@const isTop = index==0}
+                    {@const isBottom = index == operations.length-1}
+                    {@const isFocused = index == focused_index}
+                    {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
+                    {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
+                    {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
+                    <!--div-->
+                    <div class="pl-4 cursor-pointer {active}"
+                        id={menu_item_id}
+                        bind:this={menu_items[index]}
+                        on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
+                        on:mouseenter = {(e) => {on_mouse_move(index)}}
+                        on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
+                        on:mousedown={mousedown}
+                        disabled={isOperationDisabled(operation)}
+                        class:opacity-60={isOperationDisabled(operation)}>
 
 
 
-                <h4 class = "font-normal my-0 py-2"> <!-- test -->
-                    <div class=" w-full flex flex-row justify-between">
-                        {#if operation.mricon}
-                        <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
-                        {:else if operation.icon}
-                        <div class="py-1 mr-1 w-4 text-orange-500"><Icon s="md" component={operation.icon}/></div>
-                        {:else}
-                        <div class="py-1 mr-1 w-4"></div>
-                        {/if}
-                        <div class="grow">
-                            <span class="px-2 text-left">{operation.caption}
-                            </span>
-                        </div>
+                    <h4 class = "font-normal my-0 py-2"> <!-- test -->
+                        <div class=" w-full flex flex-row justify-between">                    
+                            {#if operation.mricon}
+                                {@const color=operation.color ?? ''}
+                            <div class="py-1 mr-1 w-4 {color}"><Ricon icon = {operation.mricon} s/></div>
+                            {:else if operation.toggle !== undefined}
+                                {#if operation.toggle}
+                                    <div class="py-1 mr-1 w-4 text-orange-800 dark:text-orange-200"><Ricon icon='toggle-right' s/></div>
+                                {:else}
+                                    <div class="py-1 mr-1 w-4"><Ricon icon='toggle-left' s/></div>
+                                {/if}
+                            {:else if operation.icon}
+                            <div class="py-1 mr-1 w-4 text-orange-500"><Icon s="md" component={operation.icon}/></div>
+                            {:else}
+                            <div class="py-1 mr-1 w-4"></div>
+                            {/if}
+                            <div class="grow">
+                                <span class="px-2 text-left">{operation.caption}
+                                </span>
+                            </div>
 
-                        {#if has_submenu}
-                            <div class="py-1 mr-1 w-4"><Ricon icon = 'chevron-right' xs/></div>
-                            <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
-                        {/if}
+                            {#if has_submenu}
+                                <div class="py-1 mr-1 w-4"><Ricon icon = 'chevron-right' xs/></div>
+                                <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
+                            {/if}
 
-                    </div>
-                </h4>
+                        </div>
+                    </h4>
 
 
 
-        <!-- comming soon - top info --
-        <figcaption>
-            <div class="grid gap-4 grid-cols-3 grid-rows-1">
-                <span>OCT-254</span>
-                <span class="text-center"></span>
-                <span class="text-right">15 listopad 25</span>
-            </div>
-        </figcaption>
-        -------------------------------->
-        <!--@el------------------------->
-        <!-- comming soon - middle info --
-        <figcaption>
-            <div class="grid gap-4 grid-cols-3 grid-rows-1">
-                <span>Andrzej</span>
-                <span class="text-center"></span>
-                <span class="text-right">Specyfikacje</span>
-            </div>
-        </figcaption>
+            <!-- comming soon - top info --
+            <figcaption>
+                <div class="grid gap-4 grid-cols-3 grid-rows-1">
+                    <span>OCT-254</span>
+                    <span class="text-center"></span>
+                    <span class="text-right">15 listopad 25</span>
+                </div>
+            </figcaption>
+            -------------------------------->
+            <!--@el------------------------->
+            <!-- comming soon - middle info --
+            <figcaption>
+                <div class="grid gap-4 grid-cols-3 grid-rows-1">
+                    <span>Andrzej</span>
+                    <span class="text-center"></span>
+                    <span class="text-right">Specyfikacje</span>
+                </div>
+            </figcaption>
 
 
-        {#if summary && item[summary]}
-        <figcaption>
-            {item[summary]}
-        </figcaption>
-        {/if}
-        -------------------------------->
-            </div>
+            {#if summary && item[summary]}
+            <figcaption>
+                {item[summary]}
+            </figcaption>
+            {/if}
+            -------------------------------->
+                </div>
+            <!--/div-->
+        
+                {/if}
+            {/each}
+        </div>
         <!--/div-->
-    {#if false}
-                <button class="block w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none items-center"
-                        id={menu_item_id}
-                        bind:this={menu_items[index]}
-                        on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
-                        on:mouseenter = {(e) => {on_mouse_move(index)}}
-                        on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
-                        on:mousedown={mousedown}
-                        disabled={isOperationDisabled(operation)}
-                        class:opacity-60={isOperationDisabled(operation)}>
 
-                    <div class="flex  justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
-                        {#if operation.icon}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <Icon s="md" component={operation.icon}/>
-                        {:else if operation.img}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <div class="w-4 h-4">
-                                <img src={operation.img} alt=""/>
-                            </div>
-                        {:else}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <div class="w-4 h-4"></div>
-                        {/if}
-                    </div>
-                    <div class="">
-                            <p class=""> {operation.caption}</p>
-                        {#if operation.description}
-                            <p  class="truncate inline-block text-xs">
-                                {operation.description}
-                            </p>
-                        {/if}
-                    </div>
-                    {#if has_submenu}
-                        <p class="ms-auto pr-1 text-sm font-mono text-stone-500">&rarr;</p>
-                        <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
-                    {/if}
-                </button>
-    {/if}
-            {/if}
-        {/each}
-    </div>
-    <!--/div-->
+        </div>
+</div>
 
-    </div>
-    </div>
 
 <!-- use usePreventScroll instead -->
 <!--style>

package/components/kanban/Kanban.d.ts

@@ -10,6 +10,7 @@ export declare class rKanban_column {
     finishing: boolean;
     operations: object[] | undefined;
     onTitleChanged: Function | undefined;
+    notVisible: boolean;
 }
 export declare class rKanban_definition {
     columns: rKanban_column[];

package/components/kanban/Kanban.js

@@ -9,6 +9,7 @@ export class rKanban_column {
     finishing = false;
     operations = undefined;
     onTitleChanged = undefined;
+    notVisible = false;
 }
 export class rKanban_definition {
     columns = [];

package/components/kanban/internal/kanban.column.svelte

@@ -8,6 +8,7 @@ import { FaPlus, FaCheck } from "svelte-icons/fa";
 import Icon from "../../r.icon.svelte";
 export let currentColumnIdx;
 export let onInsert;
+export let definition;
 let column_element;
 export function getHeight() {
   if (!column_element)
@@ -40,7 +41,6 @@ export function setBorder(what_to_do) {
       break;
   }
 }
-let definition = getContext("rKanban-definition");
 let columnDef = definition.columns[currentColumnIdx];
 let column_items = void 0;
 $:
@@ -52,10 +52,16 @@ $:
 $:
   selected_class = is_row_selected ? "!border-blue-300 dark:!border-blue-300/50" : "";
 $:
-  focused_class = is_row_active ? "bg-stone-50 dark:bg-stone-800" : "";
+  focused_class = is_row_active ? "bg-stone-100 dark:bg-stone-800" : "";
 $:
   force_rerender($data_tick_store, $contextItemsStore);
+let is_visible = false;
 export function reload() {
+  columnDef = definition.columns[currentColumnIdx];
+  if (!columnDef) {
+    is_visible = false;
+    return;
+  }
   let allItems = definition.getItems();
   if (definition.stateAttrib) {
     if (columnDef.state < 0) {
@@ -73,6 +79,7 @@ export function reload() {
     } else
       column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
   }
+  is_visible = isVisible();
 }
 export function isVisible() {
   if (columnDef.state < 0) {
@@ -81,7 +88,7 @@ export function isVisible() {
     else
       return false;
   } else
-    return true;
+    return !columnDef.notVisible;
 }
 function setup_data(...args) {
   reload();
@@ -180,6 +187,8 @@ let headerElement;
 export function activate(e) {
   if (e)
     e.stopPropagation();
+  if (!columnDef)
+    return;
   if (!columnDef.operations)
     return;
   if (isActive("props", columnDef)) {
@@ -226,20 +235,20 @@ async function dblclick(e) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-{#if (columnDef.state >=0) || ((column_items && column_items.length > 0))}
+{#if is_visible}
 
 <div class="    snap-center
-                sm:snap-start
+                xsm:snap-start
+                flex-none
 
                 w-full
-
-                flex-none
                 sm:w-1/2
-                md:w-1/3
-                xl:w-1/4
-                sm:px-4
+                lg:w-1/3
+                2xl:w-1/4
 
+                sm:px-4
 
+                xbg-stone-900
 
 
                 {selected_class} {focused_class}"

package/components/kanban/internal/kanban.column.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { rKanban_definition } from '../Kanban';
 declare const __propDef: {
     props: {
         currentColumnIdx: number;
         onInsert: Function;
+        definition: rKanban_definition;
         getHeight?: (() => number) | undefined;
         editName?: ((onFinish?: Function | undefined) => void) | undefined;
         SET_LEFT?: 0 | undefined;