@humandialog/forms.svelte 0.3.3 → 0.3.5

package/README.md

@@ -1,4 +1,4 @@
-# <img src="https://objectreef.dev/reef.png" alt="ObjectReef logo" width="26"> @humandialog/auth.svelte
+# <img src="https://objectreef.dev/reef.png" alt="ObjectReef logo" width="26"> @humandialog/forms.svelte
 
 Basic Svelte UI components for Object Reef applications
 

package/components/button.svelte

@@ -0,0 +1,80 @@
+<script>import { Button } from "flowbite-svelte";
+import { getContext } from "svelte";
+import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
+import { Auth } from "@humandialog/auth.svelte/dist/index.js";
+export let self = null;
+export let operation = "";
+export let params = null;
+export let context = "";
+export let typename = "";
+export let action = null;
+let ctx = context ? context : getContext("ctx");
+let is_table_component = getContext("rIs-table-component");
+let can_be_activated = true;
+let item = null;
+let additional_class = $$restProps.class ?? "";
+let last_tick = -1;
+$:
+  setup($data_tick_store);
+function setup(data_tick_store2) {
+  if (data_tick_store2 <= last_tick)
+    return;
+  last_tick = data_tick_store2;
+  if (!action) {
+    item = self ?? $context_items_store[ctx];
+    if (!typename)
+      typename = $context_types_store[ctx];
+  }
+  if (is_table_component) {
+    if ($context_items_store["sel"] != self)
+      can_be_activated = false;
+    else
+      can_be_activated = true;
+  } else
+    can_be_activated = true;
+}
+async function click() {
+  if (action) {
+    if (params)
+      action(params);
+    else
+      action();
+    $data_tick_store = $data_tick_store + 1;
+  } else if (item && operation && typename) {
+    try {
+      let res;
+      if (params) {
+        res = await Auth.fetch(
+          `json/yav1/${typename}/${item.Id}/${operation}`,
+          {
+            method: "POST",
+            body: JSON.stringify(params)
+          }
+        );
+      } else
+        res = await Auth.fetch(`json/yav1/${typename}/${item.Id}/${operation}`);
+      if (res.ok)
+        $data_tick_store = $data_tick_store + 1;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+</script>
+
+{#if is_table_component}
+    {#if can_be_activated}
+        <Button on:click={click} class="h-7 {additional_class}" 
+                disabled={!can_be_activated}
+                color='alternative'
+                >
+            <slot/>
+        </Button>
+    {/if}
+{:else}
+
+    <Button on:click={click} class="h-7 {additional_class}" 
+            disabled={!can_be_activated}>
+        <slot/>
+    </Button>
+{/if}

package/components/button.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        self?: null | undefined;
+        operation?: string | undefined;
+        params?: null | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        action?: null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/checkbox.svelte

@@ -0,0 +1,55 @@
+<script>import { getContext } from "svelte";
+import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
+import { inform_modification, push_changes } from "../updates.js";
+import { parse_width_directive } from "../utils.js";
+export let checked = void 0;
+export let disabled = false;
+export let self = null;
+export let a = "";
+export let context = "";
+export let typename = "";
+export let c = "";
+let item = null;
+let additional_class = $$restProps.class ?? "";
+let value = false;
+let ctx = context ? context : getContext("ctx");
+let cs = parse_width_directive(c);
+let color_style = disabled ? "text-gray-400 dark:text-gray-500" : "text-gray-900 dark:text-gray-300";
+let last_tick = -1;
+$:
+  setup($data_tick_store);
+function setup(data_tick_store2) {
+  if (data_tick_store2 <= last_tick)
+    return;
+  last_tick = data_tick_store2;
+  if (checked === void 0) {
+    item = self ?? $context_items_store[ctx];
+    if (!typename)
+      typename = $context_types_store[ctx];
+    value = item && a ? !!item[a] : false;
+  } else
+    value = checked;
+}
+function on_changed() {
+  if (item && a) {
+    item[a] = value;
+    if (typename) {
+      inform_modification(item, a, typename);
+      $data_tick_store = $data_tick_store + 1;
+      push_changes();
+    }
+  }
+}
+</script>
+
+<div class="ml-2 h-6 {cs} {color_style} {additional_class} flex items-center">
+    <input  type="checkbox" 
+            bind:checked={value} 
+            on:change={on_changed}
+            {disabled} 
+            class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2 dark:bg-gray-700 dark:border-gray-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
+    <span class="text-sm font-medium ml-1">
+        <slot/>
+    </span>
+    
+</div>

package/components/checkbox.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/components/combo/combo.d.ts

@@ -0,0 +1,15 @@
+export declare class rCombo_item {
+    Key: any | undefined;
+    Name: string | undefined;
+    Avatar: string | undefined;
+    Color: string | undefined;
+}
+export declare class rCombo_definition {
+    source: rCombo_item[];
+    collection_expr: string | undefined;
+    on_collect: undefined;
+    element_key: string | undefined;
+    element_name: string | undefined;
+    element_avatar: string | undefined;
+}
+export declare const cached_sources: Map<string, Promise<object>>;

package/components/combo/combo.item.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from "svelte";
+import { rCombo_definition, rCombo_item } from "./combo";
+export let key = void 0;
+export let name = void 0;
+export let avatar = void 0;
+export let color = void 0;
+let definition = getContext("rCombo-definition");
+let item = new rCombo_item();
+item.Name = name;
+item.Key = key;
+item.Avatar = avatar;
+item.Color = color;
+definition.source.push(item);
+</script>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        key?: any | undefined;
+        name?: string | undefined;
+        avatar?: string | undefined;
+        color?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+}
+export {};

package/components/combo/combo.js

@@ -0,0 +1,15 @@
+export class rCombo_item {
+    Key;
+    Name;
+    Avatar; //url to avatar
+    Color;
+}
+export class rCombo_definition {
+    source = [];
+    collection_expr;
+    on_collect = undefined;
+    element_key;
+    element_name;
+    element_avatar;
+}
+export const cached_sources = new Map();

package/components/combo/combo.source.svelte

@@ -0,0 +1,13 @@
+<script>import { getContext } from "svelte";
+export let collection = "";
+export let on_collect = void 0;
+export let key = "";
+export let name = "";
+export let avatar = "";
+let definition = getContext("rCombo-definition");
+definition.collection_expr = collection;
+definition.on_collect = on_collect;
+definition.element_key = key;
+definition.element_name = name;
+definition.element_avatar = avatar;
+</script>

package/components/combo/combo.source.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        collection?: string | undefined;
+        on_collect?: undefined;
+        key?: string | undefined;
+        name?: string | undefined;
+        avatar?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+}
+export {};