@intechstudio/grid-uikit 1.20241017.2206 → 1.20241122.1635

package/dist/MeltCombo.svelte

@@ -0,0 +1,137 @@
+<script>import { createEventDispatcher } from "svelte";
+import {
+  createCombobox,
+  melt
+} from "@melt-ui/svelte";
+export let value;
+export let size = "auto";
+export let suggestions = [];
+export let placeholder = "";
+export let validator = (value2) => {
+  return true;
+};
+export let disabled = false;
+export let preProcessor = (value2) => {
+  return value2;
+};
+export let postProcessor = (value2) => {
+  return value2;
+};
+export let title = "";
+const toOption = (option2) => ({
+  value: option2,
+  label: option2.info
+});
+const dispatch = createEventDispatcher();
+let isError = false;
+let infoValue = "";
+let oldValue = void 0;
+const {
+  elements: { menu, input, option, label },
+  states: { open, inputValue, selected },
+  helpers: { isSelected }
+} = createCombobox({
+  forceVisible: true
+});
+$:
+  handleValueChange(value);
+$:
+  handleSelectionChange($selected?.value);
+$:
+  handleInputChange($inputValue);
+function handleValueChange(value2) {
+  if ($inputValue === value2 || !value2) {
+    return;
+  }
+  inputValue.set(preProcessor(value2));
+}
+function handleSelectionChange(option2) {
+  if (!option2) {
+    return;
+  }
+  handleInputChange(option2.value);
+  handleChange();
+}
+function handleInputChange(input2) {
+  infoValue = suggestions.find((s) => String(s.value).trim() == String(input2).trim())?.info || "";
+  isError = !validator($inputValue);
+  if (oldValue === void 0) {
+    oldValue = value;
+  }
+  if (input2 === value) {
+    return;
+  }
+  value = input2;
+  inputValue.set(value);
+  dispatch("validator", { isError });
+  dispatch("input", postProcessor(input2));
+}
+function handleChange() {
+  if (oldValue !== void 0 && oldValue !== value) {
+    oldValue = void 0;
+    dispatch("change", postProcessor($inputValue));
+  }
+}
+</script>
+
+<div class="flex flex-col relative" class:flex-grow={size === "full"}>
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label
+    use:melt={$label}
+    class="text-white text-sm pb-1 truncate items-center"
+    class:hidden={label.length === 0}
+  >
+    {title}
+  </label>
+  <input
+    type="text"
+    use:melt={$input}
+    on:change={handleChange}
+    class="w-full flex flex-row border mb-1 {isError && !disabled
+      ? 'border-error'
+      : 'border-black'} p-2 {disabled
+      ? 'bg-black/20 text-white/40'
+      : 'bg-transparent text-white'}"
+    {placeholder}
+    {disabled}
+  />
+  {#if $open && !disabled && suggestions.length > 0}
+    <div {...$menu} use:menu class="menu">
+      {#each suggestions as suggestion}
+        <div
+          {...$option(toOption(suggestion))}
+          use:option
+          class="cursor-pointer truncate hover:bg-white/40 p-2 hover:text-white {$isSelected(
+            suggestion.value,
+          )
+            ? 'bg-white/10'
+            : ' '}"
+        >
+          {suggestion.info}
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="text-white/60 text-sm truncate">
+    {infoValue}
+  </div>
+</div>
+
+<style>
+  .menu {
+    z-index: 40;
+    max-height: 8rem;
+    overflow-y: auto;
+    border-radius: 0.25rem;
+    border-width: 1px;
+    border-color: rgb(255 255 255 / 0.5);
+    --tw-bg-opacity: 1;
+    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+    color: rgb(255 255 255 / 0.8);
+    width: -moz-fit-content !important;
+    width: fit-content !important;
+    min-width: 8% !important;
+    max-width: 13% !important
+}
+</style>

package/dist/MeltCombo.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+        size?: "auto" | "full";
+        suggestions?: Array<{
+            info: string;
+            value: any;
+        }>;
+        placeholder?: string;
+        validator?: (value: string) => boolean;
+        disabled?: boolean;
+        preProcessor?: (value: string) => string;
+        postProcessor?: (value: string) => string;
+        title?: string;
+    };
+    events: {
+        validator: CustomEvent<any>;
+        input: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MeltComboProps = typeof __propDef.props;
+export type MeltComboEvents = typeof __propDef.events;
+export type MeltComboSlots = typeof __propDef.slots;
+export default class MeltCombo extends SvelteComponent<MeltComboProps, MeltComboEvents, MeltComboSlots> {
+}
+export {};

package/dist/MeltRadio.svelte.d.ts

@@ -19,6 +19,8 @@ declare const __propDef: {
                 update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
                 set: (this: void, value: string) => void;
                 subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
+                get: () => string;
+                destroy?: (() => void) | undefined;
             };
         };
     };

package/dist/Tree.svelte

@@ -0,0 +1,58 @@
+<script>import {} from "@melt-ui/svelte";
+import { getContext } from "svelte";
+export let treeItems = [];
+export let level = 0;
+export let toggleMainLevels = true;
+const {
+  elements: { item, group },
+  helpers: { isExpanded },
+  states: { expanded }
+} = getContext("tree");
+function toggleExpand(id, level2, value) {
+  if (!toggleMainLevels) {
+    return;
+  }
+  if (level2 === 0 && value) {
+    expanded.set([id]);
+  }
+}
+</script>
+
+{#each treeItems as child}
+  <button
+    type="button"
+    {...$item({ id: child.id, hasChildren: true })}
+    use:item
+    on:click={() => toggleExpand(child.id, level, $isExpanded(child.id))}
+    class="flex items-center w-full"
+  >
+    <slot name="folder" {level} {child} isExpanded={$isExpanded(child.id)} />
+  </button>
+
+  {#if $isExpanded(child.id)}
+    <div
+      class="flex flex-col"
+      class:max-h-full={level === 0}
+      class:overflow-y-scroll={level === 0}
+      class:pr-1={level === 0}
+    >
+      {#if child.children && child.children.length > 0}
+        <div {...$group({ id: child.id })} use:group class="pl-4">
+          <svelte:self treeItems={child.children} level={level + 1}>
+            <svelte:fragment slot="folder" let:level let:child let:isExpanded>
+              <slot name="folder" {level} {child} {isExpanded} />
+            </svelte:fragment>
+
+            <svelte:fragment slot="file" let:item>
+              <slot name="file" {item} />
+            </svelte:fragment>
+          </svelte:self>
+        </div>
+      {/if}
+
+      {#each child.items as item (item.id)}
+        <slot name="file" {item} />
+      {/each}
+    </div>
+  {/if}
+{/each}

package/dist/index.d.ts

@@ -15,3 +15,5 @@ export { default as AtomicInput } from "./AtomicInput.svelte";
 export { default as AtomicSuggestions } from "./AtomicSuggestions.svelte";
 export { contextMenu, contextTarget } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";
+export { default as Tree } from "./Tree.svelte";
+export { default as MeltCombo } from "./MeltCombo.svelte";

package/dist/index.js

@@ -15,3 +15,5 @@ export { default as AtomicInput } from "./AtomicInput.svelte";
 export { default as AtomicSuggestions } from "./AtomicSuggestions.svelte";
 export { contextMenu, contextTarget } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";
+export { default as Tree } from "./Tree.svelte";
+export { default as MeltCombo } from "./MeltCombo.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20241017.2206",
+  "version": "1.20241122.1635",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -25,7 +25,8 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@melt-ui/svelte": "^0.42.0",
+    "@melt-ui/pp": "^0.3.2",
+    "@melt-ui/svelte": "^0.84.0",
     "svelte": "^4.2.12",
     "svelte-easy-popover": "^1.0.0"
   },