Merge pull request #131 from alley-rs/main

0.2.9
alley-rs · Jul 19, 2024 · 595731e · 595731e
2 parents c4154f7 + ce723f7
commit 595731e
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 256 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ dist-ssr
 
 lib/
 bun.lockb
+*.bak
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "alley-components",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "repository": "https://github.com/alley-rs/alley-components",
   "keywords": [
     "solid",

diff --git a/packages/components/input/index.scss b/packages/components/input/index.scss
@@ -18,27 +18,66 @@ $base: "alley-input";
   --alley-input-input-font-size-sm: 12px;
   --alley-input-input-font-size: 14px;
   --alley-input-input-font-size-lg: 16px;
+  --alley-input-line-height: var(--alley-line-height);
 
+  position: relative;
+  display: inline-flex;
   width: 100%;
+  min-width: 0;
+  padding: var(--alley-input-padding-block) var(--alley-input-padding-inline);
+  color: var(--alley-color-text);
+  font-size: var(--alley-input-input-font-size);
+  line-height: var(--alley-input-line-height);
+  border-radius: var(--alley-border-radius);
+  transition: all var(--alley-motion-duration-mid);
   text-overflow: ellipsis;
   background: var(--alley-color-bg-container);
   border-width: var(--alley-line-width);
   border-style: var(--alley-line-type);
   border-color: var(--alley-color-border);
   margin: 0;
-  padding: var(--alley-input-padding-block) var(--alley-input-padding-inline);
-  color: var(--alley-color-text);
-  font-size: var(--alley-input-input-font-size);
-  line-height: var(--alley-line-height);
   list-style: none;
-  position: relative;
-  display: inline-block;
-  min-width: 0;
-  border-radius: var(--alley-border-radius);
-  transition: all var(--alley-motion-duration-mid);
   box-sizing: border-box;
 
-  &:hover:not([disabled]) {
+  [class^="alley-input"] {
+    box-sizing: border-box;
+  }
+
+  .#{$base}-input {
+    font-size: inherit;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    outline: none;
+    cursor: text;
+    line-height: var(--alley-input-line-height);
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    min-width: 0;
+    transition: all var(--alley-motion-duration-mid);
+
+    &:hover,
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &-suffix,
+  &-prefix {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+
+  &-suffix {
+    margin-inline-start: var(--alley-padding-xxs);
+  }
+
+  &:hover:not(.#{$base}-disabled) {
     border-color: var(--alley-input-hover-border-color);
     background-color: var(--alley-input-hover-bg);
   }
@@ -58,21 +97,22 @@ $base: "alley-input";
     filter: none;
     cursor: not-allowed;
     opacity: 1;
+    border-color: var(--alley-color-border);
   }
 
   &-small {
     padding: var(--alley-input-padding-block-sm)
       var(--alley-input-padding-inline-sm);
-    font-size: var(--alley-input-input-font-size-sm);
     border-radius: var(--alley-border-radius-sm);
   }
 
   &-large {
+    --alley-input-line-height: var(--alley-line-height-lg);
+
     padding: var(--alley-input-padding-block-lg)
       var(--alley-input-padding-inline-lg);
     font-size: var(--alley-input-input-font-size-lg);
     border-radius: var(--alley-border-radius-lg);
-    line-height: var(--alley-line-height-lg);
   }
 
   &-space-compact-item {

diff --git a/packages/components/input/index.tsx b/packages/components/input/index.tsx
@@ -1,7 +1,7 @@
 import { addClassNames } from "~/utils";
 import "./index.scss";
 import type { InputProps } from "./interface";
-import { mergeProps, useContext } from "solid-js";
+import { mergeProps, Show, splitProps, useContext } from "solid-js";
 import { SpaceCompactContext } from "../space/compact";
 
 const baseClassName = "alley-input";
@@ -11,27 +11,43 @@ const Input = (props: InputProps) => {
     useContext(SpaceCompactContext) ?? {};
 
   const merged = mergeProps({ autocomplete: "off" }, props);
+  const [extraProps, inputProps] = splitProps(merged, [
+    "prefix",
+    "suffix",
+    "style",
+    "classList",
+  ]);
 
-  const size = () => spaceCompactItemSize ?? merged.size;
+  const size = () => spaceCompactItemSize ?? inputProps.size;
 
-  const className = () => {
+  const containerClassName = () => {
     return addClassNames(
       baseClassName,
       size() && `${baseClassName}-${size()}`,
-      merged.disabled && `${baseClassName}-disabled`,
+      inputProps.disabled && `${baseClassName}-disabled`,
       spaceCompactItemClass,
       spaceCompactItemClass && `${baseClassName}-${spaceCompactItemClass}`,
     );
   };
 
   return (
-    <input
-      {...merged}
-      type="text"
-      class={className()}
-      onChange={(e) => merged.onChange?.(e.target.value)}
-      onInput={(e) => merged.onInput?.(e.target.value)}
-    />
+    <span
+      class={containerClassName()}
+      classList={extraProps.classList}
+      style={extraProps.style}
+    >
+      <input
+        {...inputProps}
+        type="text"
+        class={`${baseClassName}-input`}
+        onChange={(e) => inputProps.onChange?.(e.target.value)}
+        onInput={(e) => inputProps.onInput?.(e.target.value)}
+      />
+
+      <Show when={extraProps.suffix}>
+        <span class={`${baseClassName}-suffix`}>{extraProps.suffix}</span>
+      </Show>
+    </span>
   );
 };
 

diff --git a/packages/components/input/interface.ts b/packages/components/input/interface.ts
@@ -3,7 +3,7 @@ import type { BaseSizeComponentProps } from "~/interface";
 
 type InputTag = Omit<
   JSX.HTMLElementTags["input"],
-  "size" | "style" | "onChange" | "onInput"
+  "size" | "style" | "onChange" | "onInput" | "prefix"
 >;
 
 export interface InputProps
@@ -12,4 +12,6 @@ export interface InputProps
   onChange?: (value: string) => void;
   onInput?: (value: string) => void;
   autocomplete?: "on" | "off";
+  prefix?: JSX.Element;
+  suffix?: JSX.Element;
 }
diff --git a/packages/components/input/password.tsx b/packages/components/input/password.tsx
@@ -33,7 +33,6 @@ const Password = (props: PasswordProps) => {
         style={{
           position: "absolute",
           right: "6px",
-          top: "8px",
           "z-index": 10,
         }}
       />

diff --git a/packages/components/tooltip/index.scss b/packages/components/tooltip/index.scss
@@ -1,102 +1,69 @@
-.tooltip {
+.alley-tooltip {
+  --alley-tooltip-visibility: hidden;
+  --alley-tooltip-arrow-gap: 5px;
+
   display: inline-block;
   width: max-content;
   max-width: 280px;
   text-align: start;
-
-  --visibility: hidden;
-  --arrow-gap: 5px;
+  box-sizing: border-box;
+  background-color: #333;
+  color: #fff;
+  padding: var(--alley-tooltip-padding, 0.3rem);
+  border-radius: 4px;
+  z-index: 9999;
+  font-size: var(--alley-tooltip-font-size, 0.8rem);
+  width: max-content;
+  box-shadow: var(--alley-box-shadow-secondary);
+  position: absolute;
 
   &-small {
-    --tooltip-font-size: 0.6rem;
-    --tooltip-padding: 0.15rem;
+    --alley-tooltip-font-size: 0.6rem;
+    --alley-tooltip-padding: 0.15rem;
   }
 
   &-large {
-    --tooltip-padding: 0.5rem;
-    --tooltip-font-size: 1rem;
+    --alley-tooltip-padding: 0.5rem;
+    --alley-tooltip-font-size: 1rem;
   }
 
-  &-text {
-    width: 100%;
-    font-size: var(--tooltip-font-size, 0.8rem);
-  }
-
-  &-popover {
-    position: fixed;
-    background-color: #333;
-    color: #fff;
-    padding: var(--tooltip-padding, 0.3rem);
-    border-radius: 4px;
-    z-index: 9999;
-    font-size: 0.8rem;
-    width: max-content;
-    max-width: 250px;
-    visibility: var(--visibility);
-    box-shadow: var(--alley-box-shadow-secondary);
+  &-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
 
     &-left {
-      left: var(--left);
-      top: var(--top);
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #333;
+      top: 50%;
+      left: 100%;
       transform: translateY(-50%);
     }
 
     &-right {
-      left: var(--left);
-      top: var(--top);
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #333;
+      top: 50%;
+      left: calc(var(--alley-tooltip-arrow-gap) * -1);
       transform: translateY(-50%);
     }
 
     &-top {
-      top: var(--top);
-      left: var(--left);
-      transform: translateX(-50%) translateY(-100%);
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid #333;
+      top: 100%;
+      left: calc(50% - var(--alley-tooltip-arrow-gap));
     }
 
     &-bottom {
-      top: var(--top);
-      left: var(--left);
-      transform: translateX(-50%) translateY(-100%);
-    }
-
-    &-arrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-
-      &-left {
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid #333;
-        top: 50%;
-        left: 100%;
-        transform: translateY(-50%);
-      }
-
-      &-right {
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-right: 5px solid #333;
-        top: 50%;
-        left: calc(var(--arrow-gap) * -1);
-        transform: translateY(-50%);
-      }
-
-      &-top {
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-top: 5px solid #333;
-        top: 100%;
-        left: calc(50% - var(--arrow-gap));
-      }
-
-      &-bottom {
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 5px solid #333;
-        top: calc(var(--arrow-gap) * -1);
-        left: calc(50% - var(--arrow-gap) - var(--offset-x));
-      }
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid #333;
+      top: calc(var(--alley-tooltip-arrow-gap) * -1);
+      left: calc(50% - var(--alley-tooltip-arrow-gap));
     }
   }
 }