@humandialog/forms.svelte 1.7.27 → 1.8.0

package/components/list/internal/list.element copy.svelte

@@ -0,0 +1,530 @@
+<script>import { tick, getContext } from "svelte";
+import { contextItemsStore } from "../../../stores";
+import {
+  isSelected,
+  selectable,
+  activateItem,
+  isActive,
+  editable,
+  startEditing,
+  addActiveItem,
+  removeActiveItem
+} from "../../../utils";
+import { showGridMenu, showMenu } from "../../menu";
+import { pushChanges, informModification } from "../../../updates";
+import Summary from "./list.element.summary.svelte";
+import Properties from "./list.element.props.svelte";
+import { isDeviceSmallerThan } from "../../../utils";
+import Icon from "../../icon.svelte";
+import ChessRook from "../../ricons/chess-rook.svelte";
+import ClipboardMinus from "../../ricons/clipboard-minus.svelte";
+import Ricon from "../../ricon.svelte";
+import { get_ricon } from "../../ricons.js";
+import Spinner from "../../delayed.spinner.svelte";
+import { rList_definition, rList_property_type } from "../List";
+import { push, link } from "svelte-spa-router";
+import { FaExternalLinkAlt, FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
+import Tags from "../../tags.svelte";
+import { ext } from "../../../i18n";
+export let item;
+export let title = "";
+export let summary = "";
+export let typename = void 0;
+export let toolbarOperations = void 0;
+export let contextMenu = void 0;
+export let multiselectOperations = (items) => [];
+export let key = "";
+export let selectionKey = "props";
+export let multiselect = false;
+let definition = getContext("rList-definition");
+let placeholder = "";
+let props_sm;
+let props_md;
+$:
+  is_row_active = calculate_active(item, $contextItemsStore);
+$:
+  is_row_selected = selected(item, $contextItemsStore);
+$:
+  selected_class = is_row_selected ? "!border-blue-300 dark:!border-blue-300/50" : "";
+$:
+  focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
+$:
+  download = is_row_active && (definition.downloadable || (definition.downloadableFunc ? definition.downloadableFunc(item) : false));
+$:
+  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func || download);
+if (!typename) {
+  if (item.$type)
+    typename = item.$type;
+  else if (item.$ref) {
+    let s = item.$ref.split("/");
+    typename = s[1];
+  }
+}
+if (!title)
+  title = definition.title;
+if (!summary)
+  summary = definition.summary;
+let [name_w, props_w] = calc_horz_division();
+function calc_horz_division() {
+  const props_no = definition.properties.length;
+  switch (props_no) {
+    case 0:
+      return ["w-full", ""];
+    case 1:
+      return ["w-2/3", "w-1/3"];
+    case 2:
+      return ["w-2/3", "w-1/3"];
+    case 3:
+      return ["w-1/2", "w-1/2"];
+    default:
+      return ["w-1/3", "w-2/3"];
+  }
+}
+function calculate_active(...args) {
+  const key2 = getItemKeyName(item);
+  const active = isActive(selectionKey, item, key2);
+  return active;
+}
+function selected(...args) {
+  return isSelected(item);
+}
+function getItemKey(item2) {
+  if (key)
+    return item2[key];
+  else if (item2.$ref)
+    return item2.$ref;
+  else if (item2.Id)
+    return item2.Id;
+  else
+    return 0;
+}
+function getItemKeyName(item2) {
+  if (key)
+    return key;
+  else {
+    const keys = Object.keys(item2);
+    if (keys.findIndex((e) => e == "$ref") >= 0)
+      return "$ref";
+    else if (keys.findIndex((e) => e == "Id") >= 0)
+      return "Id";
+    else
+      return "";
+  }
+}
+async function change_name(text) {
+  if (definition.on_title_changed) {
+    definition.on_title_changed(item, text, title);
+  } else {
+    item[title] = text;
+    informModification(item, title, typename);
+    pushChanges();
+  }
+}
+async function change_summary(text) {
+  if (definition.on_summary_changed) {
+    definition.on_summary_changed(item, text, summary);
+  } else {
+    item[summary] = text;
+    informModification(item, summary, typename);
+    pushChanges();
+  }
+}
+function edit(e) {
+  if (!is_row_active)
+    return;
+  startEditing(e.target);
+}
+export function activate() {
+  activate_row(null, item);
+}
+function on_active_row_clicked(e, part) {
+  if (!is_row_active)
+    return;
+  let click_on_empty_space = true;
+  let n = e.target;
+  while (n) {
+    let is_in_cell = n.getAttribute("role") == "gridcell";
+    if (is_in_cell) {
+      click_on_empty_space = false;
+      break;
+    }
+    n = n.parentElement;
+  }
+  let can_show_context_menu = click_on_empty_space;
+  can_show_context_menu = false;
+  if (can_show_context_menu && contextMenu) {
+    const pt = new DOMPoint(e.clientX, e.clientY);
+    let context_operations = contextMenu(item);
+    if (context_operations !== null) {
+      if (typeof context_operations === "object") {
+        if (Array.isArray(context_operations))
+          showMenu(pt, context_operations);
+        else if (context_operations.grid)
+          showGridMenu(pt, context_operations.grid);
+      }
+    }
+  } else if (click_on_empty_space) {
+    if (definition.title_href || definition.title_href_func) {
+    } else {
+    }
+  } else {
+  }
+}
+function followDefinedHRef() {
+  let link2 = getHRef();
+  if (link2)
+    push(link2);
+}
+function getHRef() {
+  if (definition.title_href)
+    return definition.title_href;
+  else if (definition.title_href_func)
+    return definition.title_href_func(item);
+  else
+    return "";
+}
+function activate_row(e, item2) {
+  const openable = !!definition.title_href || !!definition.title_href_func;
+  if (toolbarOperations) {
+    if (multiselect)
+      activateItem(selectionKey, item2, multiselectOperations);
+    else
+      activateItem(selectionKey, item2, toolbarOperations(item2));
+    if (e)
+      e.stopPropagation();
+  } else {
+    activateItem(selectionKey, item2, []);
+    if (e)
+      e.stopPropagation();
+  }
+}
+function on_contextmenu(e) {
+  if (!contextMenu)
+    return;
+  const pt = new DOMPoint(e.clientX, e.clientY);
+  let context_operations = contextMenu(item);
+  if (context_operations !== null) {
+    if (typeof context_operations === "object") {
+      if (Array.isArray(context_operations))
+        showMenu(pt, context_operations);
+      else if (context_operations.grid)
+        showGridMenu(pt, context_operations.grid);
+    }
+  }
+  e.preventDefault();
+}
+export function editProperty(field) {
+  if (field == title)
+    force_editing("Title");
+  else if (field == summary)
+    force_editing("Summary");
+  else {
+    if (isDeviceSmallerThan("sm"))
+      props_sm.editProperty(field);
+    else
+      props_md.editProperty(field);
+  }
+}
+async function force_editing(field) {
+  let element_id = `__hd_list_ctrl_${getItemKey(item)}_${field}`;
+  let element_node = document.getElementById(element_id);
+  if (!element_node) {
+    placeholder = field;
+    await tick();
+    element_node = document.getElementById(element_id);
+    if (!element_node)
+      return;
+  }
+  if (!element_node.classList.contains("editable")) {
+    return;
+  }
+  if (field == "Title") {
+    if (is_link_like) {
+      startEditing(element_node, () => {
+        placeholder = "";
+      });
+    } else {
+      element_node.focus();
+      setSelectionAtEnd(element_node);
+    }
+  } else {
+    element_node.focus();
+    setSelectionAtEnd(element_node);
+  }
+}
+function setSelectionAtEnd(element) {
+  const textNode = element.childNodes[0];
+  const text = textNode.textContent;
+  let range = document.createRange();
+  let end_offset = text.length;
+  let end_container = textNode;
+  range.setStart(end_container, end_offset);
+  range.setEnd(end_container, end_offset);
+  let sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+let rootElement;
+export function scrollToView() {
+  rootElement.scrollIntoView(
+    {
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }
+  );
+}
+function onToggleMultiSelect(e) {
+  if (!is_row_active)
+    addActiveItem(selectionKey, item, multiselectOperations);
+  else
+    removeActiveItem(selectionKey, item, multiselectOperations);
+  if (e)
+    e.stopPropagation();
+}
+let isDownloading = false;
+async function onDownloadFile(e) {
+  isDownloading = true;
+  e.preventDefault();
+  e.stopPropagation();
+  if (definition.onOpen)
+    await definition.onOpen(item);
+  isDownloading = false;
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if item}
+{@const element_title = ext(item[title])}
+
+<!--row 3------------------------------------------------------------------------------------------->
+<figure class="pl-8">
+    <!-- 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------------------------->
+    <h4 class="mt-1 -indent-8 ">
+        <a  class="sm:hover:cursor-pointer underline"
+                                    href={getHRef()} use:link>
+
+
+        <div class="inline-block w-4 h-4 ml-0 mr-3 align-baseline
+                text-stone-700 dark:text-stone-400 ">
+                <!--Ricon icon={ClipboardMinus}/-->
+                <ChessRook />
+        </div>
+
+        {element_title}
+        </a>
+    </h4>
+    <!-- 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] || placeholder=='Summary')}
+    <figcaption>
+        {item[summary]}
+    </figcaption>
+    {/if}
+</figure>
+
+<!---@OLD---------------------------------------------------------------------------------------------------------------->
+<section    class="my-1 flex flex-row w-full  text-stone-900 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
+            role="menu"
+            tabindex="-1"
+            bind:this={rootElement}>
+
+    {#if multiselect}
+        {@const icon=is_row_active ? FaRegCheckCircle : FaRegCircle}
+         <Icon  component={icon}
+                class="flex-none h-4 w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-1 ml-2 mr-3 "
+                on:click={onToggleMultiSelect}/>
+    {/if}
+
+    {#if isDownloading}
+        <Spinner class="mt-0.5  ml-2  mr-1" size={5} delay={0}/>
+    {:else}
+        <slot name="left" element={item}/>
+    {/if}
+
+    <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>
+
+    <div    class="ml-3 w-full py-0"
+            use:selectable={item}
+            on:click={(e) => {activate_row(e, item)}}
+            role="row"
+            tabindex="0">
+        <div class="block sm:flex sm:flex-row" on:click={(e) => on_active_row_clicked(e, 'top')}>
+
+            {#if is_row_active}
+                {#key item[title]}
+                    {#if is_link_like}
+                        <p  class=" text-base font-semibold
+
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
+                                    id="__hd_list_ctrl_{getItemKey(item)}_Title"
+                                    use:editable={{
+                                        action: (text) => {change_name(text)},
+                                        active: false,
+                                        readonly: definition.title_readonly,
+                                        onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
+                                    }}
+                            >
+                            {#if download}
+                                <a  class="sm:hover:cursor-pointer underline"
+                                    download
+                                    href={getHRef()}
+                                    on:click={onDownloadFile}>
+                                    {element_title}
+                                </a>
+                            {:else}
+                                <a  class="sm:hover:cursor-pointer underline"
+                                    href={getHRef()} use:link>
+                                    {element_title}
+                                </a>
+                            {/if}
+                        </p>
+                    {:else if definition.onOpen}
+                        <p  class=" text-base font-semibold
+
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
+                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
+                            use:editable={{
+                                action: (text) => {change_name(text)},
+                                active: true,
+                                readonly: definition.title_readonly,
+                            }}>
+                                <span   class="sm:hover:cursor-pointer underline"
+                                        on:click|stopPropagation={(e) => definition.onOpen(item)}>
+                                    {element_title}
+                                </span>
+
+                            <!--
+                            {#if definition.onOpen}
+                                <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
+                                        on:click={(e) => definition.onOpen(item)}>
+                                    <FaExternalLinkAlt/>
+                                </button>
+                            {/if}
+                            -->
+                        </p>
+                    {:else}
+                        <p  class=" text-base font-semibold
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
+                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
+                            use:editable={{
+                                action: (text) => {change_name(text)},
+                                active: true,
+                                readonly: definition.title_readonly,
+                            }}>
+                                <span>
+                                    {element_title}
+                                </span>
+                        </p>
+                    {/if}
+                {/key}
+            {:else}
+                <p  class=" text-base font-semibold
+
+                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
+                    id="__hd_list_ctrl_{getItemKey(item)}_Title">
+                    {element_title}
+                </p>
+            {/if}
+
+
+            <section class="hidden sm:block w-full sm:flex-none sm:{props_w}">
+                <Properties {definition} {item} {placeholder} bind:this={props_md}/>
+            </section>
+        </div>
+
+        <section class="block sm:hidden w-full">
+            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
+        </section>
+
+        {#if summary && (item[summary] || placeholder=='Summary')}
+            {@const summaryText = ext(item[summary])}
+            {@const element_id = `__hd_list_ctrl_${getItemKey(item)}_Summary`}
+            {#key summaryText }
+                {#if is_row_active}
+                    <p  id={element_id}
+                        class=" text-sm
+                                text-stone-600 dark:text-stone-400"
+                            use:editable={{
+                                action: (text) => {change_summary(text)},
+                                readonly: definition.summary_readonly,
+                                onFinish: (d) => {placeholder='';},
+                                active: true
+                            }}>
+                        {summaryText}
+                    </p>
+                {:else}
+                    <p  id={element_id}
+                        class=" text-sm
+                                    text-stone-600 dark:text-stone-400"
+                        on:click={(e) => on_active_row_clicked(e, 'bottom')}>
+                        {summaryText}
+                    </p>
+                {/if}
+            {/key}
+
+        {/if}
+
+        {#if definition.tags}
+                <Tags
+                    class="mt-1 mb-1"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={definition.tags.a}
+                    getGlobalTags={definition.tags.getAllTags}
+                    s="sm"
+                    onSelect={definition.tags.onSelect}
+                    onUpdateAllTags={definition.tags.onUpdateAllTags}
+                    canChangeColor={definition.tags.canChangeColor}
+                    readOnly={definition.tags.readOnly}
+                />
+            {/if}
+
+    </div>
+</section>
+{/if}
+
+<style>
+    .grid-1
+    {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+
+    .grid-2
+    {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .grid-3
+    {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .grid-4
+    {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+    }
+
+</style>

package/components/list/internal/list.element copy.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        item: object;
+        title?: string | undefined;
+        summary?: string | undefined;
+        typename?: string | undefined;
+        toolbarOperations?: undefined;
+        contextMenu?: undefined;
+        multiselectOperations?: ((items: any) => never[]) | undefined;
+        key?: string | undefined;
+        selectionKey?: string | undefined;
+        multiselect?: boolean | undefined;
+        activate?: (() => void) | undefined;
+        editProperty?: ((field: string) => void) | undefined;
+        scrollToView?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        left: {
+            element: object;
+        };
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get activate(): () => void;
+    get editProperty(): (field: string) => void;
+    get scrollToView(): () => void;
+}
+export {};