@humandialog/forms.svelte 1.7.28 → 1.8.1

package/components/ricons/underline.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  UnderlineProps */
+/** @typedef {typeof __propDef.events}  UnderlineEvents */
+/** @typedef {typeof __propDef.slots}  UnderlineSlots */
+export default class Underline extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UnderlineProps = typeof __propDef.props;
+export type UnderlineEvents = typeof __propDef.events;
+export type UnderlineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/upload.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 1;
+</script>
+
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload-icon lucide-upload">
+  <path d="M12 3v12" />
+  <path d="m17 8-5-5-5 5" />
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /></svg>

package/components/ricons/upload.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  UploadProps */
+/** @typedef {typeof __propDef.events}  UploadEvents */
+/** @typedef {typeof __propDef.slots}  UploadSlots */
+export default class Upload extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UploadProps = typeof __propDef.props;
+export type UploadEvents = typeof __propDef.events;
+export type UploadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/user.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 1;
+</script>
+
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-icon lucide-user">
+  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" /></svg>

package/components/ricons/user.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  UserProps */
+/** @typedef {typeof __propDef.events}  UserEvents */
+/** @typedef {typeof __propDef.slots}  UserSlots */
+export default class User extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UserProps = typeof __propDef.props;
+export type UserEvents = typeof __propDef.events;
+export type UserSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/users.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 1;
+</script>
+
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-icon lucide-users">
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <path d="M16 3.128a4 4 0 0 1 0 7.744" />
+  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+  <circle cx="9" cy="7" r="4" /></svg>

package/components/ricons/users.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  UsersProps */
+/** @typedef {typeof __propDef.events}  UsersEvents */
+/** @typedef {typeof __propDef.slots}  UsersSlots */
+export default class Users extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UsersProps = typeof __propDef.props;
+export type UsersEvents = typeof __propDef.events;
+export type UsersSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/x.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 1;
+</script>
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x">
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" /></svg>

package/components/ricons/x.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  XProps */
+/** @typedef {typeof __propDef.events}  XEvents */
+/** @typedef {typeof __propDef.slots}  XSlots */
+export default class X extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type XProps = typeof __propDef.props;
+export type XEvents = typeof __propDef.events;
+export type XSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/sidebar/sidebar.brand.svelte

@@ -2,22 +2,23 @@
 <script>
     export let href = "/";
     export let img = "";
+    export let summary = "Current group";
 
     let user_class = $$props.class ?? "";
 
 </script>
 
-<section class="mb-5 {user_class}">
-    <a href={href} class="flex items-center pl-2.5 ">
-        {#if img}
-            <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
-        {/if}
+<figure>
+    <h2 class="mb-5 {user_class}">
+        <a href={href} class="">
+            {#if img}
+                <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
+            {/if}
 
-        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-            <slot/>
-        </span>
-    </a>
-    {#if $$slots.summary}
-        <slot name="summary"/>
-    {/if}
-</section>
+            <span >
+                <slot/>
+            </span>
+        </a>
+    </h2>
+    <figcaption>{summary}</figcaption>
+</figure>

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

@@ -4,12 +4,12 @@
 export default class Sidebar extends SvelteComponentTyped<{
     [x: string]: any;
     img?: string | undefined;
+    summary?: string | undefined;
     href?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-    summary: {};
 }> {
 }
 export type SidebarProps = typeof __propDef.props;
@@ -20,6 +20,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         img?: string | undefined;
+        summary?: string | undefined;
         href?: string | undefined;
     };
     events: {
@@ -27,7 +28,6 @@ declare const __propDef: {
     };
     slots: {
         default: {};
-        summary: {};
     };
 };
 export {};

package/components/sidebar/sidebar.group.svelte

@@ -1,7 +1,8 @@
 <script>
     import {FaChevronDown, FaChevronUp} from 'svelte-icons/fa'
+    import {navAutoHide} from '../../utils'
     import {i18n} from '../../i18n'
-    import {link} from 'svelte-spa-router'
+    import {link, push} from 'svelte-spa-router'
 
     export let border = false;
     export let title = ''
@@ -22,43 +23,64 @@
         collapsed = !collapsed;
     }
 
+    function on_link_clicked(e)
+    {
+        if(!e.target)
+            return;
+
+        let linkNode = e.target;
+        while(linkNode && linkNode.tagName != 'A')
+            linkNode = linkNode.parentElement;
+
+        if(!linkNode)
+            return;
+
+        const href = linkNode.getAttribute('href');
+        e.preventDefault();
+
+        navAutoHide()
+        redirect_to(href)
+    }
+
+    function redirect_to(href)
+    {
+        if(!href)
+            return;
 
+        let absolute_pattern = /^https?:\/\//i;
+        if (!absolute_pattern.test(href))
+            push(href);
+        else
+            window.location.href = href;
+    }
 
 </script>
 
+<hr class="my-0">
 {#if title}
-    <div class="w-full flex flex-row justify-between {title_border} mb-2">
-        <p class="text-xs uppercase font-semibold">
-         {title}
-            {#if collapsable}
-                <button class="inline-block ml-3 sm:ml-2 sm:mt-0.5 w-4 sm:w-3 h-4 sm:h-3" on:click={toggleCollapsed}>
-                    {#if collapsed}
-                        <FaChevronDown/>
-                    {:else}
-                        <FaChevronUp/>
-                    {/if}
-                </button>
-            {/if}
-        </p>
-
+    <figure >
         {#if moreHref}
-            <p class="text-xs uppercase font-semibold mr-2 text-stone-900 dark:text-stone-400">
-                <a href={moreHref} class="text-right" use:link>
-                    {i18n({en: 'More...', es: 'Más...', pl: 'Więcej...'})}
+
+            <figcaption>
+                <div class="grid gap-4 grid-cols-2 grid-rows-1">
+                <span>{title}</span>
+                <a href={moreHref} class="text-right" use:link on:click={on_link_clicked}>
+                <span class="text-sky-500 text-right">
+                        {i18n({en: 'More...', es: 'Más...', pl: 'Więcej...'})}
+                </span>
                 </a>
-            </p>
-        {/if}
-    </div>
+                </div>
+            </figcaption>
 
-{/if}
+        {:else}
+            <figcaption >
+                {title}
+            </figcaption>
+        {/if}
+    </figure>
 
-{#if !collapsable}
-    <ul class= "{list_border}">
-        <slot/>
-    </ul>
-{:else if !collapsed}
-    <ul class="{list_border}">
-        <slot/>
-    </ul>
 {/if}
 
+<div >
+    <slot/>
+</div>

package/components/sidebar/sidebar.item.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext, tick } from "svelte";
-import Icon from "../icon.svelte";
+import Rfigure from "../r.figure.svelte";
+import Ricon from "../r.icon.svelte";
 import { contextItemsStore, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisV } from "svelte-icons/fa";
 import { link, push } from "svelte-spa-router";
@@ -16,13 +17,14 @@ import {
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
-export let icon = void 0;
+export let icon = "cat";
 export let active = false;
 export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
 export let item = void 0;
 export let summary = void 0;
+export let iicon = void 0;
 let isOnPage = getContext("rIs-page-component");
 let summaryElement = null;
 let summaryPlaceholder = false;
@@ -33,6 +35,16 @@ $:
   isRowActive = calculateIsRowActive($contextItemsStore);
 $:
   summaryText = calculateSummary(summary);
+$:
+  activeClass = isRowActive ? "bg-stone-200 dark:bg-stone-700 outline outline-8 outline-stone-200 dark:outline-stone-700 ring-1 ring-offset-8 ring-stone-300 dark:ring-stone-700" : "";
+$:
+  icom = fetch_icon(item, icon, iicon);
+function fetch_icon(item2, icon2, iicon2) {
+  if (item2 && iicon2)
+    icon2 = item2[iicon2];
+  if (!icon2)
+    icon2 = "file-archive";
+}
 function calculateSummary(...args) {
   if (!summary) {
     summaryEditable = void 0;
@@ -173,146 +185,28 @@ function on_show_menu(e) {
     return;
   showMenu(rect, operations_list);
 }
-function activateRow(e) {
-  if (!item)
-    return;
-  if (!isOnPage)
-    return;
-  let operationsContainer;
-  if (operations) {
-    let operationsList = operations(root);
-    operationsContainer = {
-      opver: 1,
-      operations: [
-        {
-          caption: i18n({ en: "View", es: "Ver", pl: "Widok" }),
-          operations: [
-            {
-              icon: FaEllipsisV,
-              menu: operationsList,
-              fab: "M00"
-            }
-          ]
-        }
-      ]
-    };
-  } else
-    operationsContainer = [];
-  activateItem("props", item, operationsContainer);
-  if (e)
-    e.stopPropagation();
-}
 </script>
 
-<li bind:this={root}>
-    <!--svelte-ignore a11y-click-events-have-key-events -->
-    <div
-        on:click
-        on:click={activateRow}
-        on:keydown
-        on:keyup
-        class="     mb-2
-                    border border-transparent rounded-lg
-                    text-stone-900 dark:text-white  {user_class}"
-        class:sm:hover:bg-stone-100={!!href}
-        class:sm:dark:hover:bg-stone-700={!!href}
-        class:bg-stone-200={isRowActive}
-        class:dark:bg-stone-700={isRowActive}
-        class:selected={selected(selectable, context_data)}>  <!-- on:contextmenu={on_contextmenu} -->
-            <div class="flex flex-row justify-between
-                        text-base font-semibold">
-                {#if href}
-                    {#if isOnPage}
-                        {#if isRowActive}
-                            <a  on:click={on_link_clicked} 
-                                href={href} 
-                                use:link
-                                class="flex-1 ml-2 inline-flex items-center underline"
-                                >
-                                {#if icon}
-                                    <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
-                                    
-                                {/if}
-                                <span   class="ml-3"
-                                        use:editable_if_needed={editable}>
-                                    <slot/>
-                                </span>
-                            </a>
-                        {:else}
-                            <span  on:click={on_link_clicked} 
-                                class="flex-1 ml-2 inline-flex items-center"
-                                >
-                                {#if icon}
-                                    <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
-                                    
-                                {/if}
-                                <span   class="ml-3"
-                                        use:editable_if_needed={editable}>
-                                    <slot/>
-                                </span>
-                            </span>
-                        {/if}
-                    {:else}
-                        <a  on:click={on_link_clicked} 
-                            href={href} 
-                            use:link
-                            class="flex-1 ml-2 inline-flex items-center group"
-                            >
-                            {#if icon}
-                                <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
-                                
-                            {/if}
-                            <span   class="ml-3 group-hover:underline"
-                                    use:editable_if_needed={editable}>
-                                <slot/>
-                            </span>
-                        </a>
-                    {/if}
-                {:else}
-                    <p  class="flex-1 ml-2 inline-flex items-center group cursor-default"
-                        use:selectable_if_needed={selectable}>
-                        {#if icon}
-                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
-                        {/if}
-                        <span   class="ml-3"
-                                use:editable_if_needed={editable}>
-                            <slot/>
-                        </span>
-                    </p>
-                {/if}
-
-                {#if  !isOnPage}
-                <section    class="flex-0 w-20 sm:w-12 flex-0 flex flex-row"
-                            use:selectable_if_needed={selectable}>
-                    {#if can_show_context_menu(selectable, context_data)}
-                        <button class="w-5 h-5 mt-0.5 mr-3 ml-auto" on:click={on_show_menu}>
-                            <FaBars/>
-                        </button>
-                    {/if}
-                </section>
-                {/if}
-            </div>
-
-            {#if summaryText || summaryPlaceholder}
-                <p class="ml-14 mt-1
-                        text-stone-900 dark:text-stone-400
-                        cursor-default
-                        text-sm   "
-                    use:selectable_if_needed={selectable}
-                    use:editable_if_needed={summaryEditable}
-                    bind:this={summaryElement}>
-                    {summaryText}
-                </p>
-            {/if}
-
-    </div>
-</li>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-structure -->
 
+<!-- isRowActive -->
+<figure class="pl-8 {activeClass}" bind:this={root}>
+    <a  on:click={on_link_clicked}
+                                href={href}
+                                use:link>
+    <h4 class="-indent-8">
+        <div class="inline-block w-4 h-4 ml-0 mr-3 align-baseline
+                    text-stone-700 dark:text-stone-400 ">
+            <Ricon icon = {icon}/>
+        </div>
+        <slot/>
+    </h4>
+    </a>
+    {#if summaryText}
+        <figcaption>
+            {summaryText}
+        </figcaption>
+    {/if}
 
-<style>
-    .selected {
-    border-width: 1px;
-    --tw-border-opacity: 1 !important;
-    border-color: rgb(147 197 253 / var(--tw-border-opacity)) !important
-}
-</style>
+</figure>

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

@@ -3,21 +3,18 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         href: string;
-        icon?: any | undefined;
+        icon?: string | undefined;
         active?: boolean | undefined;
         selectable?: any | undefined;
         editable?: any | undefined;
         operations?: any | undefined;
         item?: object | undefined;
         summary?: string | object | undefined;
+        iicon?: string | object | undefined;
         editSummary?: (() => Promise<void>) | undefined;
         updateSummary?: ((txt: any) => void) | undefined;
     };
     events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/sidebar/sidebar.list.svelte

@@ -102,20 +102,20 @@ function onBlurInserter() {
         {/key}
     {/each }
 {:else}
-    <p class="text-xs text-center uppercase text-stone-900 dark:text-stone-400"> 
-        {i18n({ 
-            en: 'No elements', 
-            es: 'Falta de elementos', 
+    <p class="text-center uppercase text-stone-900 dark:text-stone-400">
+        {i18n({
+            en: 'No elements',
+            es: 'Falta de elementos',
             pl: 'Brak elementów'})}
     </p>
 {/if}
 
 {#if inserter}
     <Edit   class=" mb-2 ml-2
-            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} 
+            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}
             onBlur={onBlurInserter}
             bind:this={inserterElement}>

package/components/sidebar/sidebar.svelte

@@ -2,8 +2,25 @@
 
 </script>
 
-<aside class="w-full" aria-label="Sidebar">
-    <div class="overflow-y-auto py-4 px-3 bg-stone-50 rounded dark:bg-stone-800">
+<!--div class="prose prose-stone max-w-none
+                darkx:prose-invert darkx:text-stone-400
+                prose-headings:scroll-mt-28 prose-headings:font-display
+                prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]
+                prose-lead:text-stone-500 darkx:prose-lead:text-stone-400
+                prose-a:font-semibold darkx:prose-a:text-sky-400
+                prose-a:no-underline
+                prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
+                hover:prose-a:[--tw-prose-underline-size:6px] darkx:[--tw-prose-background:theme(colors.stone.900)]
+                darkx:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
+                darkx:hover:prose-a:[--tw-prose-underline-size:6px]
+                prose-pre:rounded-xl prose-pre:bg-stone-900 prose-pre:shadow-lg darkx:prose-pre:bg-stone-800/60
+                darkx:prose-pre:shadow-none darkx:prose-pre:ring-1 darkx:prose-pre:ring-stone-300/10 darkx:prose-hr:border-stone-800"-->
+
+<!--aside class="w-full prose prose-base prose-zinc dark:prose-invert prose-a:no-underline " aria-label="Sidebar"-->
+<aside class="w-full " aria-label="Sidebar">
+    <div class= "sidebar-frame overflow-y-auto
+                prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+                mx-6 my-6">
         <slot/>
     </div>
 </aside>