From 22a42a52eb5382ea47d0ec2a33d61f7695dfef88 Mon Sep 17 00:00:00 2001
From: MaxtuneLee <max@xox.im>
Date: Fri, 29 Mar 2024 18:47:21 +0800
Subject: [PATCH 1/2] feat: select component

---
 docs/docs/components/universal/_meta.json     |   3 +-
 docs/docs/components/universal/select.mdx     |  71 ++++++++
 .../lib/components/Input/index.ts             |  14 +-
 .../lib/components/Select/index.scss          |  87 ++++++++++
 .../lib/components/Select/index.ts            | 153 ++++++++++++++++++
 packages/ui-universal/lib/index.ts            |   1 +
 6 files changed, 320 insertions(+), 9 deletions(-)
 create mode 100644 docs/docs/components/universal/select.mdx
 create mode 100644 packages/ui-universal/lib/components/Select/index.scss
 create mode 100644 packages/ui-universal/lib/components/Select/index.ts

diff --git a/docs/docs/components/universal/_meta.json b/docs/docs/components/universal/_meta.json
index 0f88905..cbdcc5e 100644
--- a/docs/docs/components/universal/_meta.json
+++ b/docs/docs/components/universal/_meta.json
@@ -5,5 +5,6 @@
     "input",
     "badge",
     "calendar",
-    "card"
+    "card",
+    "select"
 ]
\ No newline at end of file
diff --git a/docs/docs/components/universal/select.mdx b/docs/docs/components/universal/select.mdx
new file mode 100644
index 0000000..59c3022
--- /dev/null
+++ b/docs/docs/components/universal/select.mdx
@@ -0,0 +1,71 @@
+import Wraper from '../../tools/wraper/index'
+import { Select } from '@sast/ui-universal'
+
+# Select Component
+
+The Select component provides a dropdown menu with selectable options.
+
+<Wraper>
+    <div style={{margin: 10}}>
+        <Select
+            title="Select an option"
+            optionsList={[
+                { value: "1", label: "Next.js" },
+                { value: "2", label: "Lit Element" },
+                { value: "3", label: "Nuxt.js" }
+            ]}
+            onchange={(value) => console.log("Selected option:", value)}
+            selectKey={0}
+            width={400}
+            placeHolder="Please select"
+        />
+    </div>
+</Wraper>
+
+## Props
+
+| Property           | Description                                      | Type                                          | Default  |
+|--------------------|--------------------------------------------------|-----------------------------------------------|----------|
+| `onchange`         | Callback function triggered when an option is selected. | `(value: OptionProps) => void`             |          |
+| `optionsList`      | List of options for the select menu.             | `Array<OptionProps>`                         |          |
+| `title`            | Title of the select.                             | `string`                                      |          |
+| `disabled`         | If `true`, the select will be disabled.          | `boolean`                                     | `false`  |
+| `defaultSelectKey` | The default selected option key.                 | `number`                                      | `0`      |
+| `selectKey`        | The currently selected option key.               | `number`                                      | `0`      |
+| `isBorder`         | If `true`, the select will have a border.        | `boolean`                                     | `true`   |
+| `width`            | The width of the select.                         | `number`                                      | `200`    |
+| `placeHolder`      | Placeholder text displayed when no option is selected. | `string`                                 | `"Please select"` |
+
+## Events
+
+- `onchange`: Fired when an option is selected. Provides the selected option as an argument to the callback function.
+
+## Example
+
+```jsx
+import { Select } from '@sast/ui-universal'
+
+
+export default function Example() {
+  const handleSelect = (value) => {
+    console.log("Selected option:", value);
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <Select
+            title="Select an option"
+            optionsList={[
+                { value: "1", label: "Next.js" },
+                { value: "2", label: "Lit Element" },
+                { value: "3", label: "Nuxt.js" }
+            ]}
+            onchange={(value) => console.log("Selected option:", value)}
+            selectKey={0}
+            width={400}
+            placeHolder="Please select"
+        />
+    </div>
+  );
+}
+```
\ No newline at end of file
diff --git a/packages/ui-universal/lib/components/Input/index.ts b/packages/ui-universal/lib/components/Input/index.ts
index 4624567..027a39b 100644
--- a/packages/ui-universal/lib/components/Input/index.ts
+++ b/packages/ui-universal/lib/components/Input/index.ts
@@ -5,6 +5,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { createComponent } from "@lit/react";
 import React from "react";
 import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
 
 export interface InputProps {
   /**
@@ -42,11 +43,7 @@ export interface InputProps {
   /**
    * value ,the value of the input
    */
-  value: string;
-  /**
-   * defaultValue, the defaultValue of the input
-   */
-  defaultValue?: string;
+  value?: string;
   /**
    * isBorder? have the border of the input
    */
@@ -58,14 +55,14 @@ export class AInput extends LitElement {
   static styles = styles;
   @property({ type: Number }) width: InputProps["width"] = 250;
   @property({ type: Boolean }) fill: InputProps["fill"] = false;
-  @property({ type: Boolean }) disabled: InputProps["disabled"] = false;
+  @property({ type: Boolean, reflect: true }) disabled: InputProps["disabled"] =
+    false;
   @property({ type: String }) label: InputProps["label"] = "输入框";
   @property({ type: String }) mode: InputProps["mode"] = "text";
   @property({ type: String }) placeholder: InputProps["placeholder"];
   @property({ type: Number }) fontsize: InputProps["fontsize"] = 16;
   @property({ type: Boolean }) isFillFather: InputProps["isFillFather"] = false;
   @property({ type: String }) value: InputProps["value"] = "";
-  @property({ type: String }) defaultValue: InputProps["defaultValue"];
   @property({ type: Boolean }) isBorder: InputProps["isBorder"] = true;
 
   @state() isFocus = false;
@@ -94,6 +91,7 @@ export class AInput extends LitElement {
         style="width:${this.fill
           ? "100%"
           : `${this.width}px`};--input-font-size:${this.fontsize}px;"
+        aria-disabled="${this.disabled ? "true" : "false"}"
       >
         ${this.label
           ? html`<label
@@ -113,7 +111,7 @@ export class AInput extends LitElement {
           class="input"
           type="${ifDefined(this.mode)}"
           placeholder=${ifDefined(this.placeholder)}
-          .value="${this.value}"
+          .value="${live(this.value) as string}"
           .disabled="${this.disabled}"
           @input="${this.handleInput}"
           @focus="${this.handleFocus}"
diff --git a/packages/ui-universal/lib/components/Select/index.scss b/packages/ui-universal/lib/components/Select/index.scss
new file mode 100644
index 0000000..fc7d08b
--- /dev/null
+++ b/packages/ui-universal/lib/components/Select/index.scss
@@ -0,0 +1,87 @@
+@use '../../variables' as *;
+@use '../../_variables/color.scss' as *;
+@use '../../_variables/duration.scss' as *;
+@use '../../_variables/animation.scss' as *;
+@mixin select-option {
+  border-radius: 5px;
+  cursor: pointer;
+  color: $primary-color;
+}
+$animation-duration: $duration-300;
+.input {
+  input::placeholder {
+    transition: all $animation-duration $cubic-bezier;
+    color: $black-color;
+  }
+  &.hide-placeholder {
+    input::placeholder {
+      color: $gray-color;
+    }
+  }
+}
+.options {
+  position: absolute;
+  width: 280px;
+  box-sizing: border-box;
+  z-index: 1;
+  margin-top: 3px;
+  flex-direction: column;
+  gap: 4px;
+  padding: 7px 8px;
+  font-size: 14px;
+  max-height: 250px;
+  overflow-y: scroll;
+  box-shadow: $shadow;
+  border-radius: 8px;
+  transform-origin: top;
+  opacity: 0;
+  transform: scaleY(0);
+  background-color: $white-color;
+  transition: all $animation-duration $cubic-bezier;
+  display: flex;
+  .nothing-img-container {
+    margin: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    img {
+      width: 160px;
+    }
+  }
+  &.show {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  .option-item {
+    flex-shrink: 0;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    transition: all $animation-duration $cubic-bezier;
+    &:hover {
+      background-color: rgba(var(--shadow-color-rgb), 0.08);
+      padding: 0 0 0 2px;
+      @include select-option();
+    }
+    &.option-item-selected {
+      background-color: rgba(var(--shadow-color-rgb), 0.15);
+      padding: 0 0 0 4px;
+      @include select-option();
+    }
+    .option-item-span {
+      padding: 0 7px;
+    }
+  }
+}
+
+@keyframes scaleFromBottom {
+  0% {
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: bottom;
+  }
+}
diff --git a/packages/ui-universal/lib/components/Select/index.ts b/packages/ui-universal/lib/components/Select/index.ts
new file mode 100644
index 0000000..162fe85
--- /dev/null
+++ b/packages/ui-universal/lib/components/Select/index.ts
@@ -0,0 +1,153 @@
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import styles from "./index.scss?inline";
+import React from "react";
+import { createComponent } from "@lit/react";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+export interface OptionProps {
+  value: string;
+  label: string;
+  // key: number;
+}
+export interface SelectProps {
+  /**
+   * onChange of the select
+   */
+  onchange?: (value: OptionProps) => void;
+  /**
+   * the optionList of the select
+   */
+  optionsList: Array<OptionProps>;
+  /**
+   * the title of the select
+   */
+  title: string;
+  /**
+   * diabled of the select
+   */
+  disabled?: boolean;
+  /**
+   * selectKey, the selectKey of the options
+   */
+  selectKey?: number;
+  /**
+   * isBorder,  the border of the select
+   */
+  isBorder?: boolean;
+  /**
+   * width, the width of the select
+   */
+  width?: number;
+  /**
+   * placeHolder of the select
+   */
+  placeHolder?: string;
+}
+@customElement("a-select")
+class ASelect extends LitElement {
+  static styles = styles;
+  @property({ type: Array }) optionsList: SelectProps["optionsList"] = [];
+  @property({ type: String }) title: SelectProps["title"] = "";
+  @property({ type: Boolean }) disabled: SelectProps["disabled"] = false;
+  @property({ type: Number }) selectKey: SelectProps["selectKey"] = -1;
+  @property({ type: Boolean }) isBorder: SelectProps["isBorder"] = true;
+  @property({ type: Number }) width: SelectProps["width"] = 200;
+  @property({ type: String }) placeHolder: SelectProps["placeHolder"] =
+    "请选择";
+
+  @state() showOptions = false;
+
+  private handleChange = (key: number) => {
+    this.showOptions = !this.showOptions;
+    this.selectKey = key;
+    this.onchange &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.onchange(this.optionsList[key] as any);
+  };
+
+  private handleKeyBoardSelect = (e: KeyboardEvent) => {
+    // use keyboard to control selection
+    if (e.key === "Enter") {
+      this.handleChange(this.selectKey as number);
+    }
+    if (this.showOptions) {
+      if (e.key === "ArrowDown") {
+        if (this.selectKey !== undefined) {
+          if (this.selectKey < this.optionsList.length - 1) {
+            this.selectKey++;
+          } else {
+            this.selectKey = 0;
+          }
+        } else {
+          this.selectKey = 0;
+        }
+      }
+      if (e.key === "ArrowUp") {
+        if (this.selectKey !== undefined) {
+          if (this.selectKey > 0) {
+            this.selectKey--;
+          } else {
+            this.selectKey = this.optionsList.length - 1;
+          }
+        } else {
+          this.selectKey = this.optionsList.length - 1;
+        }
+      }
+    }
+  };
+
+  protected render() {
+    return html`
+      <a-input
+        .label=${this.title}
+        width=${this.width as number}
+        ?disabled=${this.disabled as boolean}
+        placeholder=${ifDefined(this.placeHolder)}
+        value=${this.optionsList[this.selectKey as number]?.label}
+        ?isBorder=${this.isBorder as boolean}
+        @focus=${() => {
+          this.showOptions = true;
+        }}
+        @blur=${() => {
+          setTimeout(() => {
+            this.showOptions = false;
+          }, 200);
+        }}
+        @keydown=${this.handleKeyBoardSelect}
+        id="select"
+      ></a-input>
+      <div
+        class="options ${classMap({
+          show: this.showOptions,
+        })}"
+      >
+        ${this.optionsList.map(
+          (item: OptionProps, index: number) => html`
+            <div
+              class="option-item ${classMap({
+                "option-item-selected": this.selectKey === index,
+              })}"
+              @click=${this.handleChange.bind(this, index)}
+            >
+              <span class="option-item-span">${item.label}</span>
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "a-select": ASelect;
+  }
+}
+
+export const Select = createComponent({
+  tagName: "a-select",
+  elementClass: ASelect,
+  react: React,
+});
diff --git a/packages/ui-universal/lib/index.ts b/packages/ui-universal/lib/index.ts
index af36557..ee5624d 100644
--- a/packages/ui-universal/lib/index.ts
+++ b/packages/ui-universal/lib/index.ts
@@ -4,3 +4,4 @@ export * from "./components/Input";
 export * from "./components/Badge";
 export * from "./components/Calendar";
 export * from "./components/Card";
+export * from "./components/Select"
\ No newline at end of file

From 1f0b1dfaf1805a52d6f3900201c1962dc4cabd81 Mon Sep 17 00:00:00 2001
From: MaxtuneLee <max@xox.im>
Date: Fri, 29 Mar 2024 18:48:42 +0800
Subject: [PATCH 2/2] docs: input/card/select improvements

---
 docs/docs/components/universal/card.mdx   | 4 ++--
 docs/docs/components/universal/input.mdx  | 1 -
 docs/docs/components/universal/select.mdx | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/docs/components/universal/card.mdx b/docs/docs/components/universal/card.mdx
index d07f4ad..0bff8bd 100644
--- a/docs/docs/components/universal/card.mdx
+++ b/docs/docs/components/universal/card.mdx
@@ -13,7 +13,7 @@ The Card component displays content within a styled card container.
         padding={16}
         gap={8}
         width={400}
-        titleImageUrl="/aurora-poster.png"
+        titleImageUrl="https://sastimg.mxte.cc/image/6Ht1"
       >
         <div slot="header"><span style={{fontWeight: 'bold', fontSize: '18px'}}>Aurora UI · Universal Component</span></div>
         <div slot="content">🌏 This is the universal version of SAST UI, which is based on Web Components. It is designed to be used in any framework, such as React, Vue, Angular, and even vanilla JavaScript.</div>
@@ -131,7 +131,7 @@ export default function Example() {
         padding={16}
         gap={8}
         width={400}
-        titleImageUrl="/aurora-poster.png"
+        titleImageUrl="https://sastimg.mxte.cc/image/6Ht1"
       >
         <div slot="header">Header Content</div>
         <div slot="content">Main Content</div>
diff --git a/docs/docs/components/universal/input.mdx b/docs/docs/components/universal/input.mdx
index d9ac864..7b48487 100644
--- a/docs/docs/components/universal/input.mdx
+++ b/docs/docs/components/universal/input.mdx
@@ -23,7 +23,6 @@ Input component allows users to input text or passwords.
 | `fontsize`       | The font size of the input.                  | `number`                                                | `16`    |
 | `isFillFather`   | If `true`, the input will fill its container.| `boolean`                                               | `false` |
 | `value`          | The value of the input.                      | `string`                                                |     |
-| `defaultValue`   | The default value of the input.              | `string`                                                |  |
 | `isBorder`       | If `true`, the input will have a border.     | `boolean`                                               | `true`  |
 
 ## Example in HTML
diff --git a/docs/docs/components/universal/select.mdx b/docs/docs/components/universal/select.mdx
index 59c3022..81f99d8 100644
--- a/docs/docs/components/universal/select.mdx
+++ b/docs/docs/components/universal/select.mdx
@@ -30,7 +30,6 @@ The Select component provides a dropdown menu with selectable options.
 | `optionsList`      | List of options for the select menu.             | `Array<OptionProps>`                         |          |
 | `title`            | Title of the select.                             | `string`                                      |          |
 | `disabled`         | If `true`, the select will be disabled.          | `boolean`                                     | `false`  |
-| `defaultSelectKey` | The default selected option key.                 | `number`                                      | `0`      |
 | `selectKey`        | The currently selected option key.               | `number`                                      | `0`      |
 | `isBorder`         | If `true`, the select will have a border.        | `boolean`                                     | `true`   |
 | `width`            | The width of the select.                         | `number`                                      | `200`    |