@intechstudio/grid-uikit 0.0.12 → 1.20240722.817

package/dist/AtomicInput.svelte

@@ -0,0 +1,109 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let inputValue = "";
+export let suggestions = [];
+export let customClasses = "";
+export let placeholder = "";
+export let suggestionTarget = void 0;
+export let validator = (text) => {
+  return true;
+};
+let isError = false;
+let disabled = false;
+let infoValue = "";
+let displayText;
+let focus;
+function handleValueChange(value) {
+  if (value !== displayText) {
+    displayText = value;
+  }
+  infoValue = suggestions.find(
+    (s) => String(s.value).trim() == String(value).trim()
+  )?.info ?? "";
+  isError = !validator(displayText);
+  dispatch("validator", { isError });
+}
+$: {
+  handleValueChange(inputValue);
+}
+function handleBlur(e) {
+  if (inputValue !== displayText) {
+    sendData(displayText);
+  }
+}
+function sendData(value) {
+  dispatch("change", value);
+}
+function handleFocus(e) {
+  dispatch("focus");
+  updateSuggestions();
+}
+function updateSuggestions() {
+  if (typeof suggestionTarget !== "undefined") {
+    const event = new CustomEvent("display", {
+      detail: {
+        data: suggestions,
+        sender: inputComponent
+      }
+    });
+    suggestionTarget.dispatchEvent(event);
+  }
+}
+function handleSuggestionSelected(e) {
+  const { value } = e.detail;
+  displayText = value;
+  sendData(displayText);
+}
+let inputComponent;
+</script>
+  
+  <div class="{$$props.class} w-full relative">
+    <input
+      bind:this={inputComponent}
+      {disabled}
+      bind:value={displayText}
+      on:focus={handleFocus}
+      on:blur={handleBlur}
+      on:suggestion-select={handleSuggestionSelected}
+      type="text"
+      {placeholder}
+      class="{customClasses} w-full border
+        focus:neumorph focus:rounded-lg
+        {isError
+        ? 'border-error focus:outline-error'
+        : 'focus:border-select border-secondary'} bg-secondary text-white py-0.5 pl-2 rounded-none"
+    />
+  
+    <div class=" py-1">
+      {#if !focus && infoValue !== undefined}
+        <div class="{infoValue ? 'text-gray-500' : 'text-gray-600'} text-sm">
+          {infoValue}
+        </div>
+      {/if}
+    </div>
+  </div>
+  
+  <style>
+    .neumorph {
+      box-shadow: -2px -2px 10px #242c30, 2px 2px 10px #303c42;
+    }
+  
+    ::-webkit-scrollbar {
+      border-radius: 8px;
+      height: 6px;
+      width: 6px;
+      background: #1e2628;
+    }
+  
+    ::-webkit-scrollbar-thumb {
+      background: #286787;
+      border-radius: 8px;
+      -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+    }
+  
+    ::-webkit-scrollbar-corner {
+      border-radius: 8px;
+      background: #1e2628;
+    }
+  </style>
+  

package/dist/AtomicInput.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inputValue?: string | undefined;
+        suggestions?: {
+            value: string;
+            info: string;
+        }[] | undefined;
+        customClasses?: string | undefined;
+        placeholder?: string | undefined;
+        suggestionTarget?: Element | undefined;
+        validator?: ((text: string) => boolean) | undefined;
+    };
+    events: {
+        validator: CustomEvent<any>;
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AtomicInputProps = typeof __propDef.props;
+export type AtomicInputEvents = typeof __propDef.events;
+export type AtomicInputSlots = typeof __propDef.slots;
+export default class AtomicInput extends SvelteComponent<AtomicInputProps, AtomicInputEvents, AtomicInputSlots> {
+}
+export {};

package/dist/AtomicSuggestions.svelte

@@ -0,0 +1,55 @@
+<script>import { clickOutside } from "./click-outside.action";
+export let component = void 0;
+let suggestions = [];
+let target = void 0;
+function handleDisplay(e) {
+  const { data, sender } = e.detail;
+  target = sender;
+  suggestions = data;
+}
+function handleClickOutside(e) {
+  suggestions = [];
+}
+function handleSuggestionSelected(value) {
+  const event = new CustomEvent("suggestion-select", {
+    detail: {
+      value
+    }
+  });
+  target.dispatchEvent(event);
+  suggestions = [];
+}
+</script>
+  
+  <suggestions
+    class="flex w-full p-2"
+    class:hidden={suggestions.length === 0}
+    bind:this={component}
+    on:display={handleDisplay}
+    use:clickOutside={{ useCapture: false }}
+    on:click-outside={handleClickOutside}
+  >
+    <div class="w-full p-1 neumorph rounded-lg border border-select bg-secondary">
+      <ul
+        class="scrollbar max-h-40 overflow-y-scroll pr-1 text-white cursor-pointer"
+      >
+        {#each suggestions as suggestion}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+          <li
+            on:click={() => handleSuggestionSelected(suggestion.value)}
+            class="hover:bg-black p-1 pl-2"
+          >
+            {suggestion.info}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </suggestions>
+  
+  <style>
+    .neumorph {
+      box-shadow: -2px -2px 10px #242c30, 2px 2px 10px #303c42;
+    }
+  </style>
+  

package/dist/AtomicSuggestions.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        component?: undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AtomicSuggestionsProps = typeof __propDef.props;
+export type AtomicSuggestionsEvents = typeof __propDef.events;
+export type AtomicSuggestionsSlots = typeof __propDef.slots;
+export default class AtomicSuggestions extends SvelteComponent<AtomicSuggestionsProps, AtomicSuggestionsEvents, AtomicSuggestionsSlots> {
+}
+export {};

package/dist/click-outside.action.d.ts

@@ -0,0 +1,6 @@
+/** Dispatch event on click outside of node */
+export declare function clickOutside(node: Element, { useCapture }: {
+    useCapture?: boolean | undefined;
+}): {
+    destroy(): void;
+};

package/dist/click-outside.action.js

@@ -0,0 +1,16 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node, { useCapture = false }) {
+    const handleClick = (event) => {
+        if (node &&
+            !node.contains(event.target) &&
+            !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent("click-outside"));
+        }
+    };
+    document.addEventListener("mousedown", handleClick, useCapture);
+    return {
+        destroy() {
+            document.removeEventListener("mousedown", handleClick, useCapture);
+        },
+    };
+}

package/dist/index.d.ts

@@ -11,3 +11,5 @@ export { default as MoltenButton } from "./MoltenButton.svelte";
 export { default as MoltenInput } from "./MoltenInput.svelte";
 export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
 export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
+export { default as AtomicInput } from "./AtomicInput.svelte";
+export { default as AtomicSuggestions } from "./AtomicSuggestions.svelte";

package/dist/index.js

@@ -11,3 +11,5 @@ export { default as MoltenButton } from "./MoltenButton.svelte";
 export { default as MoltenInput } from "./MoltenInput.svelte";
 export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
 export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
+export { default as AtomicInput } from "./AtomicInput.svelte";
+export { default as AtomicSuggestions } from "./AtomicSuggestions.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "0.0.12",
+  "version": "1.20240722.817",
   "scripts": {
     "dev": "vite",
     "build": "vite build",