Merge pull request #22 from NJUPT-SAST/dev-uni

feat: select component

docs/docs/components/universal/_meta.json

@@ -5,5 +5,6 @@
  "input",
  "badge",
  "calendar",
- "card"
+ "card",
+ "select"
 ]

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>

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

docs/docs/components/universal/select.mdx

@@ -0,0 +1,70 @@
+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` |
+| `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>
+ );
+}
+```

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}"

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;
+ }
+}