@humandialog/forms.svelte 0.4.44 → 0.5.1

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -2,9 +2,7 @@
 /** @typedef {typeof __propDef.events}  SidebarEvents */
 /** @typedef {typeof __propDef.slots}  SidebarSlots */
 export default class Sidebar extends SvelteComponentTyped<{
-    inserter?: any;
     border?: boolean | undefined;
-    inserter_placeholder?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +15,7 @@ export type SidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        inserter?: any;
         border?: boolean | undefined;
-        inserter_placeholder?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/sidebar/sidebar.item.svelte

@@ -1,13 +1,13 @@
 <script>import Icon from "../icon.svelte";
-import { context_items_store, auto_hide_sidebar, context_toolbar_operations } from "../../stores";
+import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import FaBars from "svelte-icons/fa/FaBars.svelte";
 import {
   selectable as _selectable,
-  is_selected,
+  isSelected,
   editable as _editable,
-  handle_select
+  handleSelect
 } from "../../utils";
-import { show_menu } from "../menu";
+import { showMenu } from "../menu";
 export let href;
 export let icon = void 0;
 export let active = false;
@@ -15,7 +15,7 @@ export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
 $:
-  context_data = $context_items_store;
+  context_data = $contextItemsStore;
 let user_class = $$props.class ?? "";
 let root;
 function selectable_if_needed(node, selectable2) {
@@ -23,7 +23,7 @@ function selectable_if_needed(node, selectable2) {
     _selectable(node, selectable2);
 }
 function selected(itm, context_data2) {
-  if (is_selected(itm))
+  if (isSelected(itm))
     return true;
   else
     return false;
@@ -35,7 +35,7 @@ function editable_if_needed(node, editable2) {
 function on_link_clicked(e) {
   auto_hide_sidebar();
   if (selectable)
-    handle_select(e);
+    handleSelect(e);
   e.stopPropagation();
 }
 function on_contextmenu(e) {
@@ -46,7 +46,7 @@ function on_contextmenu(e) {
     return;
   if (operations_list.length == 0)
     return;
-  show_menu(new DOMPoint(e.clientX, e.clientY), operations_list);
+  showMenu(new DOMPoint(e.clientX, e.clientY), operations_list);
   e.preventDefault();
 }
 function can_show_context_menu(itm, context_data2) {
@@ -68,7 +68,7 @@ function on_show_menu(e) {
     return;
   if (operations_list.length == 0)
     return;
-  show_menu(rect, operations_list);
+  showMenu(rect, operations_list);
 }
 </script>
 
@@ -81,11 +81,11 @@ function on_show_menu(e) {
         on:keyup
         class="     border border-transparent rounded-lg
                     text-lg sm:text-base font-normal 
-                    text-gray-900 sm:hover:bg-gray-100  
-                    dark:text-white sm:dark:hover:bg-gray-700 {user_class}
+                    text-stone-900 sm:hover:bg-stone-100  
+                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}
                     flex flex-row justify-between"
-        class:bg-gray-200={active}
-        class:dark:bg-gray-700={active}
+        class:bg-stone-200={active}
+        class:dark:bg-stone-700={active}
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked} 

package/components/sidebar/sidebar.list.svelte

@@ -0,0 +1,68 @@
+<script>import Icon from "../icon.svelte";
+import Edit from "../edit.field.svelte";
+import { FaPlus } from "svelte-icons/fa";
+import { getPrev, getNext, swapElements, getLast } from "../../utils";
+import { informModification, pushChanges } from "../../updates";
+export let objects;
+export let orderAttrib = void 0;
+export let inserter = void 0;
+export let inserterPlaceholder = "New";
+export const ORDER_STEP = 64;
+export const MIN_ORDER = 0;
+export function reload(_objects) {
+  objects = _objects;
+}
+export function moveUp(element) {
+  if (!orderAttrib)
+    return;
+  let prev = getPrev(objects, element);
+  if (prev) {
+    objects = swapElements(objects, element, prev);
+    const tmp = element[orderAttrib];
+    element[orderAttrib] = prev[orderAttrib];
+    prev[orderAttrib] = tmp;
+    informModification(element, orderAttrib);
+    informModification(prev, orderAttrib);
+    pushChanges();
+  }
+}
+export function moveDown(element) {
+  if (!orderAttrib)
+    return;
+  let next = getNext(objects, element);
+  if (next) {
+    objects = swapElements(objects, element, next);
+    const tmp = element[orderAttrib];
+    element[orderAttrib] = next[orderAttrib];
+    next[orderAttrib] = tmp;
+    informModification(element, orderAttrib);
+    informModification(next, orderAttrib);
+    pushChanges();
+  }
+}
+function onNewElement(text) {
+  if (orderAttrib) {
+    let newElementOrder;
+    const last = getLast(objects);
+    if (last)
+      newElementOrder = last[orderAttrib] + ORDER_STEP;
+    else
+      newElementOrder = MIN_ORDER;
+    inserter(text, newElementOrder);
+  } else
+    inserter(text);
+}
+</script>
+
+{#each objects as item (item.Id)}
+    <slot {item}/>
+{/each }
+
+{#if inserter}
+    <Edit   class="p-3 sm:p-2 text-lg sm:text-base font-normal text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
+            onEnter={onNewElement} 
+            placeholder={inserterPlaceholder} 
+            inserter={true}>
+        <Icon size={5} component={FaPlus} class="mr-3"/>
+    </Edit>
+{/if}

package/components/sidebar/sidebar.list.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        objects: object[];
+        orderAttrib?: string | undefined;
+        inserter?: Function | undefined;
+        inserterPlaceholder?: string | undefined;
+        ORDER_STEP?: 64 | undefined;
+        MIN_ORDER?: 0 | undefined;
+        reload?: ((_objects: object[]) => void) | undefined;
+        moveUp?: ((element: object) => void) | undefined;
+        moveDown?: ((element: object) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: object;
+        };
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get ORDER_STEP(): 64;
+    get MIN_ORDER(): 0;
+    get reload(): (_objects: object[]) => void;
+    get moveUp(): (element: object) => void;
+    get moveDown(): (element: object) => void;
+}
+export {};

package/components/sidebar/sidebar.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <aside class="w-full" aria-label="Sidebar">
-    <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+    <div class="overflow-y-auto py-4 px-3 bg-stone-50 rounded dark:bg-stone-800">
         <slot/>
     </div>
 </aside>

package/components/simple.table.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {data_tick_store, context_items_store, context_info_store } from '../stores.js'
+    import {data_tick_store, contextItemsStore, context_info_store } from '../stores.js'
     import {getContext} from 'svelte';
 
     export let context = ""
@@ -18,7 +18,7 @@
         
     let item = null 
     if(self == null)
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
     else
         item = self    
 
@@ -35,7 +35,7 @@
         {
             last_tick = t            
             if(self == null)
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
             else
                 item = self    
 
@@ -50,33 +50,33 @@
     
 
     
-    const select_item = (itm, cinfo) => () => {
+    const selectItem = (itm, cinfo) => () => {
        
-        $context_items_store[select] = itm;
+        $contextItemsStore[select] = itm;
         $context_info_store[select] = cinfo;
         
         if(focus)
-            $context_items_store.focused = select
+            $contextItemsStore.focused = select
         if(nav)
             $data_tick_store = $data_tick_store + 1;
     };
     
-    let selected_item = $context_items_store[select]
-    $: selected_item = $context_items_store[select]
+    let selected_item = $contextItemsStore[select]
+    $: selected_item = $contextItemsStore[select]
 </script>
 
 
-    <table class="min-w-full h-auto divide-gray-200">
-        <thead class="bg-gray-50 sticky">
+    <table class="min-w-full h-auto divide-stone-200">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if headers != null}
                     {#each headers as header}
-                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                             {header}
                         </th>
                     {/each}    
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
@@ -89,13 +89,13 @@
                     {#if item == selected_item}
                     <tr >
                         {#each fields as field}
-                            <td class="px-4 py-1 bg-slate-100 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                            <td class="px-4 py-1 bg-stone-100 whitespace-nowrap text-sm font-normal text-stone-900">{item[field]}</td>
                         {/each}
                     </tr>
                     {:else}
-                    <tr on:click={select_item(item, cinfo)}>
+                    <tr on:click={selectItem(item, cinfo)}>
                         {#each fields as field}
-                            <td class="px-4 py-1 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                            <td class="px-4 py-1 whitespace-nowrap text-sm font-normal text-stone-900">{item[field]}</td>
                         {/each}
                     </tr>
                     {/if}

package/components/simple.table.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SimpleEvents */
 /** @typedef {typeof __propDef.slots}  SimpleSlots */
 export default class Simple extends SvelteComponentTyped<{
-    select?: string | undefined;
     focus?: boolean | undefined;
+    select?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -22,8 +22,8 @@ export type SimpleSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        select?: string | undefined;
         focus?: boolean | undefined;
+        select?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/components/table/_template.table.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {data_tick_store, context_items_store, context_info_store } from '../../stores.js'
+    import {data_tick_store, contextItemsStore, context_info_store } from '../../stores.js'
     import {getContext} from 'svelte';
 
     export let context = ""
@@ -18,7 +18,7 @@
         
     let item = null 
     if(self == null)
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
     else
         item = self    
 
@@ -35,7 +35,7 @@
         {
             last_tick = t            
             if(self == null)
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
             else
                 item = self    
 
@@ -50,46 +50,46 @@
     
 
     
-    const select_item = (itm, cinfo) => () => {
+    const selectItem = (itm, cinfo) => () => {
        
-        $context_items_store[select] = itm;
+        $contextItemsStore[select] = itm;
         $context_info_store[select] = cinfo;
         
         if(focus)
-            $context_items_store.focused = select
+            $contextItemsStore.focused = select
         if(nav)
             $data_tick_store = $data_tick_store + 1;
     };
     
-    let selected_item = $context_items_store[select]
-    $: selected_item = $context_items_store[select]
+    let selected_item = $contextItemsStore[select]
+    $: selected_item = $contextItemsStore[select]
 </script>
 
 
-    <table class="min-w-full h-auto divide-gray-200 cursor-default">
-        <thead class="bg-gray-50 sticky">
+    <table class="min-w-full h-auto divide-stone-200 cursor-default">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if headers != null}
                     {#each headers as header}
-                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                             {header}
                         </th>
                     {/each}    
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
             </tr>
         </thead>
         {#if (items != null && items.length > 0 && fields != null)}
-            <tbody class="bg-white dark:bg-slate-900">
+            <tbody class="bg-white dark:bg-stone-900">
                 {#each items as item}
                     {#if (item != null )}
-                        <tr on:click={select_item(item, cinfo)}
-                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
-                            class:bg-slate-100={item==selected_item}
-                            class:dark:bg-slate-700={item==selected_item}>
+                        <tr on:click={selectItem(item, cinfo)}
+                            class="whitespace-nowrap text-sm font-normal text-stone-900 dark:text-stone-300"
+                            class:bg-stone-100={item==selected_item}
+                            class:dark:bg-stone-700={item==selected_item}>
                             {#if $$slots['row']}
                                 <slot name='row' {item}/>
                             {:else}

package/components/table/_template.table.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TemplateEvents */
 /** @typedef {typeof __propDef.slots}  TemplateSlots */
 export default class Template extends SvelteComponentTyped<{
-    select?: string | undefined;
     focus?: boolean | undefined;
+    select?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -30,8 +30,8 @@ export type TemplateSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        select?: string | undefined;
         focus?: boolean | undefined;
+        select?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/components/table/table.svelte

@@ -1,8 +1,8 @@
-<script>import { data_tick_store, context_items_store, context_info_store, context_types_store, context_toolbar_operations } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, context_info_store, contextTypesStore, contextToolbarOperations } from "../../stores.js";
 import { getContext, setContext, onDestroy } from "svelte";
 import { rTable_definition } from "./table";
-import { parse_width_directive } from "../../utils.js";
-import { show_menu } from "../menu";
+import { parseWidthDirective } from "../../utils.js";
+import { showMenu } from "../menu";
 export let context = "";
 export let collection = "";
 export let self = null;
@@ -15,8 +15,8 @@ export let focus = true;
 export let nav = true;
 export let c = "";
 export let typename = "";
-export let toolbar_operations = [];
-export let menu_operations = [];
+export let toolbarOperations = [];
+export let menuOperations = [];
 let definition = new rTable_definition();
 setContext("rTable-definition", definition);
 setContext("rIs-table-component", true);
@@ -25,19 +25,19 @@ let items = null;
 let item = null;
 let last_tick = -1;
 let selected_item;
-let cs = c ? parse_width_directive(c) : "w-full min-w-full";
+let cs = c ? parseWidthDirective(c) : "w-full min-w-full";
 $: {
   if ($data_tick_store > last_tick)
     refresh();
 }
 $:
-  selected_item = $context_items_store[select];
+  selected_item = $contextItemsStore[select];
 onDestroy(() => {
-  select_item(null, null);
+  selectItem(null, null);
 });
 export function refresh() {
   last_tick = $data_tick_store;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   if (objects)
     items = objects;
   else if (item && collection)
@@ -45,27 +45,27 @@ export function refresh() {
   else
     items = [];
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
 }
-export function update_objects(_objects) {
+export function updateObjects(_objects) {
   objects = _objects;
   refresh();
 }
-export function update_self(_self) {
+export function updateSelf(_self) {
   self = _self;
   refresh();
 }
-export function select_item(itm, cinfo2) {
-  $context_items_store[select] = itm;
+export function selectItem(itm, cinfo2) {
+  $contextItemsStore[select] = itm;
   $context_info_store[select] = cinfo2;
   if (itm && itm.oclType)
-    $context_types_store[select] = itm.oclType;
+    $contextTypesStore[select] = itm.oclType;
   if (focus)
-    $context_items_store.focused = select;
+    $contextItemsStore.focused = select;
   if (itm)
-    $context_toolbar_operations = [...toolbar_operations];
+    $contextToolbarOperations = [...toolbarOperations];
   else
-    $context_toolbar_operations = [];
+    $contextToolbarOperations = [];
   if (nav)
     $data_tick_store = $data_tick_store + 1;
 }
@@ -80,33 +80,33 @@ function override_items_from_slot(...args) {
   return 0;
 }
 function show_context_menu(e, itm, cinfo2) {
-  if (!menu_operations)
+  if (!menuOperations)
     return;
-  if (menu_operations.length == 0)
+  if (menuOperations.length == 0)
     return;
   e.stopPropagation();
   e.preventDefault();
-  show_menu(new DOMPoint(e.clientX, e.clientY), menu_operations);
+  showMenu(new DOMPoint(e.clientX, e.clientY), menuOperations);
 }
 </script>
 
 {#if true}
     <slot/> <!-- let definition execute -->
     
-    <table class="{cs} h-auto divide-gray-200 cursor-default">
-        <thead class="bg-gray-50 sticky">
+    <table class="{cs} h-auto divide-stone-200 cursor-default">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if definition || headers.length }
                     {@const lheaders = headers.length ? headers : definition.columns.map( v => v.header )}
                     {#if lheaders.length && lheaders.some(s => s.length > 0)}
                         {#each lheaders as header}
-                            <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                                 {header}
                             </th>
                         {/each}    
                     {/if}
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
@@ -114,14 +114,14 @@ function show_context_menu(e, itm, cinfo2) {
         </thead>
         {#if (items != null) && (items.length > 0)}
             {@const lfields = fields.length ? fields : definition.columns.map( v => v.field )}
-            <tbody class="bg-white dark:bg-slate-900">
+            <tbody class="bg-white dark:bg-stone-900">
                 {#each items as item}
                     {#if (item != null )}
-                        <tr on:click={ (e) => { e.stopPropagation(); e.preventDefault(); select_item(item, cinfo);} }
-                            on:contextmenu={ (e) => {select_item(item, cinfo); show_context_menu(e, item, cinfo)} }
-                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
-                            class:bg-slate-100={item==selected_item}
-                            class:dark:bg-slate-700={item==selected_item}>
+                        <tr on:click={ (e) => { e.stopPropagation(); e.preventDefault(); selectItem(item, cinfo);} }
+                            on:contextmenu={ (e) => {selectItem(item, cinfo); show_context_menu(e, item, cinfo)} }
+                            class="whitespace-nowrap text-sm font-normal text-stone-900 dark:text-stone-300"
+                            class:bg-stone-100={item==selected_item}
+                            class:dark:bg-stone-700={item==selected_item}>
                             {#each lfields as field, i}
                                 {@const cc = `c${i}`}
                                 {@const column = definition.columns[i]}

package/components/table/table.svelte.d.ts

@@ -13,12 +13,12 @@ declare const __propDef: {
         nav?: boolean | undefined;
         c?: string | undefined;
         typename?: string | undefined;
-        toolbar_operations?: any[] | undefined;
-        menu_operations?: any[] | undefined;
+        toolbarOperations?: any[] | undefined;
+        menuOperations?: any[] | undefined;
         refresh?: (() => void) | undefined;
-        update_objects?: ((_objects: any) => void) | undefined;
-        update_self?: ((_self: any) => void) | undefined;
-        select_item?: ((itm: any, cinfo: any) => void) | undefined;
+        updateObjects?: ((_objects: any) => void) | undefined;
+        updateSelf?: ((_self: any) => void) | undefined;
+        selectItem?: ((itm: any, cinfo: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -68,8 +68,8 @@ export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
     get refresh(): () => void;
-    get update_objects(): (_objects: any) => void;
-    get update_self(): (_self: any) => void;
-    get select_item(): (itm: any, cinfo: any) => void;
+    get updateObjects(): (_objects: any) => void;
+    get updateSelf(): (_self: any) => void;
+    get selectItem(): (itm: any, cinfo: any) => void;
 }
 export {};

package/components/textarea.ltop.svelte

@@ -45,11 +45,11 @@
 </script>    
 
 <div class="{col_span}">
-    <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+    <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
     <textarea id="description" rows="5" 
-    class="block {input_p} w-full text-sm text-gray-900 bg-gray-50 
-    rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500
-     dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white 
+    class="block {input_p} w-full text-sm text-stone-900 bg-stone-50 
+    rounded-lg border border-stone-300 focus:ring-primary-500 focus:border-primary-500
+     dark:bg-stone-700 dark:border-stone-600 dark:placeholder-stone-400 dark:text-white 
      dark:focus:ring-primary-500 dark:focus:border-primary-500" 
      placeholder={placeholder}>{val}</textarea>                    
 </div>

package/components/tile.title.svelte

@@ -1,7 +1,7 @@
 <script>
     import {getContext} from 'svelte';
-    import {data_tick_store, context_items_store} from '../stores.js' 
-    import { parse_width_directive} from '../utils.js'
+    import {data_tick_store, contextItemsStore} from '../stores.js' 
+    import { parseWidthDirective} from '../utils.js'
    
     export let label = "Label"
     export let a = '';
@@ -10,7 +10,7 @@
     let _label = label;
 
 
-    let cs = parse_width_directive(c);
+    let cs = parseWidthDirective(c);
     
     let     item = null
     let     ctx = ''
@@ -24,7 +24,7 @@
     }
     else if(a != '')
     {
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
         if(item != null)
             _label = item[a]
     }
@@ -40,7 +40,7 @@
                 _label = label;
             else
             {
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
                 if(item != null)
                     _label = item[a]
             }
@@ -50,5 +50,5 @@
 }
 </script>
 
-<p class="{cs} text-gray-900 dark:text-white {$$restProps['class']}">{_label}</p>
+<p class="{cs} text-stone-900 dark:text-white {$$restProps['class']}">{_label}</p>