@solidpb/ui-kit 0.4.1 → 0.5.0

package/dist/components/Checkbox/Checkbox.jsx

@@ -25,6 +25,21 @@ const checkbox = tv({
         size: "sm",
     },
 });
+const label = tv({
+    base: "label text-xs",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const Checkbox = (props) => {
     const [local, inputProps] = splitProps(props, ["label", "size", "appearance", "class", "onChange"]);
     return (<label class="flex items-center gap-3 w-fit">
@@ -36,7 +51,7 @@ export const Checkbox = (props) => {
             local.onChange?.(e.currentTarget.checked);
         }}/>
 
-      {local.label && <span class="select-none">{local.label}</span>}
+      {local.label && <span class={label({ size: local.size })}>{local.label}</span>}
     </label>);
 };
 export default Checkbox;

package/dist/components/Form.jsx

@@ -20,6 +20,7 @@ export function createForm() {
     const Form = (props) => {
         const [values, setValues] = createStore({ ...props.data });
         const setValue = (key, value) => {
+            console.log("Setting value", key, value);
             setValues(key, value);
         };
         const getValue = (key) => {

package/dist/components/RelationPicker.d.ts

@@ -1,4 +1,4 @@
-import { JSXElement } from "solid-js";
+import { JSX, JSXElement } from "solid-js";
 export interface RelationPickerProps<T> {
     value: T | T[] | null;
     options: T[];
@@ -18,6 +18,8 @@ export interface RelationPickerProps<T> {
     onTextInputChange?: (text: string) => void;
     defaultFilter?: (option: T[] | Exclude<NonNullable<T>, null>, filter: string) => boolean;
     onLinkClick?: (value: T) => void;
+    href?: string;
+    onCreateInline?: (text: string) => Promise<T | undefined>;
 }
-export declare const RelationPicker: <T>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
+export declare const RelationPicker: <T extends object>(props: RelationPickerProps<T>) => JSX.Element;
 export default RelationPicker;

package/dist/components/RelationPicker.jsx

@@ -72,6 +72,21 @@ export const RelationPicker = (props) => {
             ];
         return props.options;
     };
+    const handleKeyDown = async (e) => {
+        if (e.key === "Enter" && props.onCreateInline) {
+            e.preventDefault();
+            e.stopPropagation();
+            const newValue = await props.onCreateInline(inputRef.value);
+            if (newValue) {
+                if (props.multi) {
+                    props.onChange([...(Array.isArray(props.value) ? props.value : []), newValue]);
+                }
+                else {
+                    props.onChange(newValue);
+                }
+            }
+        }
+    };
     return (<div class="floating-label">
       {props.label && <span>{props.label}</span>}
       <Combobox disabled={props.disabled} multiple={props.multi} value={values()} onChange={props.onChange} options={options()} 
@@ -103,9 +118,9 @@ export const RelationPicker = (props) => {
                 tags: props.multi && Array.isArray(props.value) && props.value.length > 0,
             })}>
                 <Show when={props.multi} fallback={<>
-                      {!props.multi && values() && (<Button variant="ghost" appearance="primary" size="xs" modifier="square" onClick={() => props.onLinkClick?.(props.value)}>
+                      {!props.multi && values() && (props.href || props.onLinkClick) && (<a class="btn btn-ghost btn-primary btn-xs btn-square" href={props.href} onClick={() => props.onLinkClick?.(props.value)}>
                           <Link class="w-[1em] h-[1em]"/>
-                        </Button>)}
+                        </a>)}
                       <Combobox.Input onBlur={(e) => {
                     if (!props.value) {
                         e.currentTarget.value = "";
@@ -113,15 +128,15 @@ export const RelationPicker = (props) => {
                     else {
                         e.currentTarget.value = String(state.selectedOptions()[0][props.labelKey]);
                     }
-                }} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)}/>
+                }} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)} onKeyDown={handleKeyDown}/>
                     </>}>
                   <div class="flex flex-wrap gap-1 w-full">
                     <For each={state.selectedOptions()}>
                       {(option) => (<span onPointerDown={(e) => e.stopPropagation()}>
-                          <Tag appearance="neutral" variant="soft" title={String(option[props.labelKey])} onDelete={() => state.remove(option)}/>
+                          <Tag appearance="neutral" variant="soft" title={String(option[props.labelKey])} onDelete={() => state.remove(option)} colorHex={"colorHex" in option ? option.colorHex : undefined}/>
                         </span>)}
                     </For>
-                    <Combobox.Input class="w-[unset]" onBlur={(e) => (e.currentTarget.value = "")} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)}/>
+                    <Combobox.Input class="w-[unset]" onBlur={(e) => (e.currentTarget.value = "")} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)} onKeyDown={handleKeyDown}/>
                   </div>
                 </Show>
               </div>

package/dist/components/Switch/Switch.jsx

@@ -25,6 +25,21 @@ const toggle = tv({
         size: "sm",
     },
 });
+const label = tv({
+    base: "label text-xs",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const Switch = (props) => {
     const [local, inputProps] = splitProps(props, ["label", "size", "appearance", "class", "onChange"]);
     return (<label class="flex items-center gap-3 w-fit">
@@ -33,9 +48,9 @@ export const Switch = (props) => {
             appearance: local.appearance,
             class: local.class,
         })} onChange={(e) => {
-            local.onChange?.(Boolean(e.currentTarget.value));
+            local.onChange?.(e.currentTarget.checked);
         }}/>
-      {local.label && <span class="select-none">{local.label}</span>}
+      {local.label && <span class={label({ size: local.size })}>{local.label}</span>}
     </label>);
 };
 export default Switch;

package/dist/index.d.ts

@@ -28,7 +28,6 @@ export * from "./components/Switch";
 export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Tag";
-export * from "./components/TagArea";
 export * from "./components/TextArea";
 export * from "./components/ThemeSwitch";
 export * from "./components/Toast";

package/dist/index.js

@@ -28,7 +28,6 @@ export * from "./components/Switch";
 export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Tag";
-export * from "./components/TagArea";
 export * from "./components/TextArea";
 export * from "./components/ThemeSwitch";
 export * from "./components/Toast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/components/TagArea/TagArea.d.ts

@@ -1,15 +0,0 @@
-import { JSX, JSXElement } from "solid-js";
-interface TagAreaProps<T extends Tag = Tag> {
-    tags: T[];
-    setTags: (tags: T[]) => void;
-    onCreateTag: (name: string) => Promise<T | undefined>;
-    onDeleteTag: (tag: T) => Promise<void>;
-    suggestions?: T[];
-    noSuggestionsPlaceholder?: string;
-    dropDownAction?: JSXElement;
-    placeholder?: string;
-    editable?: boolean;
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-export declare const TagArea: <T extends Tag = Tag>(props: TagAreaProps<T>) => JSX.Element;
-export default TagArea;

package/dist/components/TagArea/TagArea.jsx

@@ -1,116 +0,0 @@
-import { createSignal, For, Show, createMemo } from "solid-js";
-import { TextField } from "@kobalte/core/text-field";
-import Tag from "../Tag/Tag";
-import { tv } from "tailwind-variants";
-const tagArea = tv({
-    base: "textarea outline-offset-0 p-2 min-h-2",
-    variants: {
-        editing: {
-            true: "",
-            false: "cursor-pointer",
-        },
-    },
-});
-const menu = tv({
-    base: "dropdown-content bg-base-200 min-w-30 shadow-sm rounded-box menu absolute border border-base-200 gap-1",
-    variants: {
-        size: {
-            xs: "menu-xs",
-            sm: "menu-sm",
-            md: "menu-base",
-            lg: "menu-lg",
-            xl: "menu-xl",
-        },
-    },
-    defaultVariants: {
-        size: "sm",
-    },
-});
-export const TagArea = (props) => {
-    const [tagInput, setTagInput] = createSignal("");
-    const [showSuggestions, setShowSuggestions] = createSignal(false);
-    const [editing, setEditing] = createSignal(false);
-    let inputRef;
-    const filteredSuggestions = createMemo(() => (props.suggestions || []).filter((s) => s.name.toLowerCase().includes(tagInput().toLowerCase()) && !props.tags.some((t) => t.id === s.id)));
-    const handleTagInput = async (e) => {
-        setShowSuggestions(true);
-        if (tagInput().trim()) {
-            if (e.key === "Enter") {
-                e.preventDefault();
-                e.stopPropagation();
-                const newTagName = tagInput().trim();
-                if (!props.tags.map((t) => t.name).includes(newTagName)) {
-                    let newTag = undefined;
-                    newTag = await props.onCreateTag(newTagName);
-                    if (newTag)
-                        props.setTags([...props.tags, newTag]);
-                }
-                setTagInput("");
-                setShowSuggestions(false);
-            }
-            else {
-                setShowSuggestions(true);
-            }
-        }
-        else {
-            if (e.key === "Delete" || e.key === "Backspace") {
-                if (props.tags.length > 0) {
-                    const lastTag = props.tags[props.tags.length - 1];
-                    await props.onDeleteTag(lastTag);
-                    props.setTags(props.tags.slice(0, -1));
-                }
-            }
-        }
-    };
-    const handleSuggestionClick = (tag) => {
-        props.setTags([...props.tags, tag]);
-        setTagInput("");
-        setShowSuggestions(false);
-    };
-    const deleteTag = async (t) => {
-        await props.onDeleteTag(t);
-        props.setTags((props.tags || []).filter((tag) => tag.id !== t.id));
-    };
-    return (<div class={tagArea({ editing: editing() })} onMouseDown={(e) => {
-            if (props.editable === false)
-                return;
-            e.preventDefault();
-            setEditing(true);
-            inputRef?.focus();
-        }}>
-      <div class="flex flex-wrap gap-1">
-        <For each={props.tags || []}>
-          {(t) => (<Tag title={t.name || ""} colorHex={t.colorHex || "#6b7280"} onDelete={editing()
-                ? () => {
-                    setShowSuggestions(false);
-                    deleteTag(t);
-                }
-                : undefined} size={props.size}/>)}
-        </For>
-        {editing() && props.editable !== false && (<div class="relative flex-1 min-w-30">
-            <TextField value={tagInput()} onChange={setTagInput}>
-              <TextField.Input ref={inputRef} onKeyDown={handleTagInput} placeholder={props.placeholder || ""} onBlur={() => {
-                setEditing(false);
-                setShowSuggestions(false);
-                setTagInput("");
-            }} class="w-full focus:outline-none"/>
-            </TextField>
-            <Show when={showSuggestions()}>
-              <div class={menu({ size: props.size })}>
-                <Show when={filteredSuggestions().length > 0} fallback={<p class="italic text-xs">{props.noSuggestionsPlaceholder ?? "No matches found"}</p>}>
-                  <ul>
-                    <For each={filteredSuggestions()}>
-                      {(s) => (<li class="cursor-pointer rounded" onMouseDown={() => handleSuggestionClick(s)}>
-                          <a>{s.name}</a>
-                        </li>)}
-                    </For>
-                  </ul>
-                </Show>
-                <Show when={props.dropDownAction}>{props.dropDownAction}</Show>
-              </div>
-            </Show>
-          </div>)}
-      </div>
-    </div>);
-};
-export default TagArea;

package/dist/components/TagArea/index.d.ts

@@ -1 +0,0 @@
-export * from "./TagArea";

package/dist/components/TagArea/index.js

@@ -1 +0,0 @@
-export * from "./TagArea";