NJUPT-SAST · BQXBQX · Mar 17, 2024 · Mar 14, 2024 · Mar 16, 2024
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
     "ui:lint": "pnpm --filter @sast/oj-ui lint",
     "ui:format": "pnpm --filter @sast/oj-ui format",
     "ui:test": "pnpm --filter @sast/oj-ui test",
+    "ui-uni:dev": "pnpm --filter @sast/oj-ui-universal dev",
+    "ui-uni:build": "pnpm --filter @sast/oj-ui-universal build",
     "competition:dev": "pnpm --filter @sast/oj-competition dev",
     "competition:build": "pnpm --filter @sast/oj-competition build:lib",
     "competition:lint": "pnpm --filter @sast/oj-competition lint",

diff --git a/packages/competition/package.json b/packages/competition/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@sast/oj-ui": "workspace:^",
+    "@sast/oj-ui-universal": "workspace:^",
     "axios": "^1.6.7",
     "localforage": "^1.10.0",
     "react": "^18.2.0",

diff --git a/packages/competition/src/pages/login/page.tsx b/packages/competition/src/pages/login/page.tsx
@@ -1,12 +1,27 @@
 import LoginCard from "../../components/login/loginCard";
 import styles from "./page.module.scss";
+import { Button } from "@sast/oj-ui-universal";
 
 const Login = () => {
   return (
     <>
       <div className={styles["login-background"]}>
         <div className={styles["login-card-container"]}>
           <LoginCard></LoginCard>
+          <Button
+            _onclick={() => {
+              console.log("click");
+            }}
+          >
+            Click me
+          </Button>
+          <button
+            onClick={() => {
+              console.log("click");
+            }}
+          >
+            click
+          </button>
         </div>
       </div>
     </>

diff --git a/packages/ui-universal/.gitignore b/packages/ui-universal/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ui-universal/index.html b/packages/ui-universal/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/index.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Vite + Lit</h1>
+    </my-element>
+  </body>
+</html>
diff --git a/packages/ui-universal/lib/_variables.scss b/packages/ui-universal/lib/_variables.scss
@@ -0,0 +1,82 @@
+// box-shadow variables
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$shadow-md:
+  0 4px 6px -1px rgb(0 0 0 / 0.1),
+  0 2px 4px -2px rgb(0 0 0 / 0.1);
+$shadow-lg:
+  0 10px 15px -3px rgb(0 0 0 / 0.1),
+  0 4px 6px -4px rgb(0 0 0 / 0.1);
+$shadow-xl:
+  0 20px 25px -5px rgb(0 0 0 / 0.1),
+  0 8px 10px -6px rgb(0 0 0 / 0.1);
+$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+@mixin shadow {
+  &.shadow-regular {
+    box-shadow: $shadow;
+  }
+  &.shadow-small {
+    box-shadow: $shadow-sm;
+  }
+  &.shadow-medium {
+    box-shadow: $shadow-md;
+  }
+  &.shadow-large {
+    box-shadow: $shadow-lg;
+  }
+  &.shadow-extraLarge {
+    box-shadow: $shadow-xl;
+  }
+  &.shadow-inner {
+    box-shadow: $shadow-inner;
+  }
+}
+
+// border width variables
+$border-0: 0px;
+$border-1: 1px;
+$border-2: 2px;
+
+//animation-duration varibles
+$duration-100: 100ms;
+$duration-200: 200ms;
+$duration-300: 300ms;
+$duration-400: 400ms;
+$duration-800: 800ms;
+
+//border radius variables
+$radius-10: 10px;
+$radius-8: 8px;
+$radius-5: 5px;
+$radius-15: 15px;
+$radius-half: 50%;
+
+//absolute center
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+//font-size variables
+$font-size-8: 8px;
+$font-size-10: 10px;
+$font-size-12: 12px;
+$font-size-14: 14px;
+$font-size-16: 16px;
+
+//disabled
+@mixin disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+//background color
+$background-shadow-color: rgb(var(--black-color-rgb), 0.6);
+
+$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
diff --git a/packages/ui-universal/lib/assets/lit.svg b/packages/ui-universal/lib/assets/lit.svg
diff --git a/packages/ui-universal/lib/components/Button/index.scss b/packages/ui-universal/lib/components/Button/index.scss
@@ -0,0 +1,68 @@
+:host {
+  background-color: var(--primary-color);
+  color: var(--white-color);
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+  transition: all 0.15s ease-in-out;
+  @include shadow;
+  &:hover {
+    backdrop-filter: brightness(0.85);
+  }
+  &:active {
+    transform: scale(0.98);
+  }
+  &.primary {
+    background-color: var(--primary-color);
+  }
+  &.secondary {
+    background-color: var(--white-color);
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+  }
+  &.border {
+    border: solid 1px var(--border-white);
+    background-color: var(--white-color);
+    color: var(--black-color);
+    font-weight: 500;
+  }
+  &.ghost {
+    &:hover:not(.disabled) {
+      filter: brightness(1);
+      backdrop-filter: brightness(0.97);
+    }
+    background-color: transparent;
+    color: var(--primary-color);
+    font-weight: 600;
+  }
+  &.danger {
+    background-color: var(--danger-color);
+  }
+  &.disabled {
+    cursor: not-allowed;
+    &:hover {
+      backdrop-filter: none;
+    }
+    &:active {
+      transform: none;
+    }
+  }
+  &.disabledShadow {
+    filter: grayscale(1);
+  }
+  &.small {
+    padding: 5px;
+    font-size: 12px;
+  }
+  &.medium {
+    padding: 10px;
+    font-size: 16px;
+  }
+  &.large {
+    padding: 15px;
+    font-size: 20px;
+  }
+}
diff --git a/packages/ui-universal/lib/components/Button/index.ts b/packages/ui-universal/lib/components/Button/index.ts
@@ -0,0 +1,69 @@
+import { CSSResultGroup, LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createComponent } from "@lit/react";
+import { classMap } from "lit/directives/class-map.js";
+import React from "react";
+import styles from "./index.scss?inline";
+
+// export interface ButtonProps extends HTMLButtonElement {
+//   /**
+//    * The color of the button.
+//    */
+//   color?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'border';
+//   /**
+//    * The size of the button.
+//    */
+//   size?: 'small' | 'medium' | 'large';
+//   /**
+//    * The shadow of the button.
+//    */
+//   shadow?: 'regular' | 'small' | 'medium' | 'large' | 'extraLarge' | 'inner' | 'none';
+//   /**
+//    * disabledShadow, when the button is disabled ,the shadow is or not
+//    */
+//   disabledShadow?: boolean;
+// }
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement("s-button")
+export class Sbutton extends LitElement {
+  static styles = styles as unknown as CSSResultGroup;
+  @property({ type: String }) color = "primary";
+  @property({ type: String }) size = "medium";
+  @property({ type: String }) shadow = "none";
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) disabledShadow = true;
+  @property() _onclick: () => void = () => {};
+
+  protected render() {
+    return html`
+      <button
+        part="button"
+        class=${`${this.color} ${this.size} ${this.shadow} ${classMap({
+          disabled: this.disabled,
+          disabledShadow: this.disabledShadow,
+        })}`}
+        @click=${this._onclick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "s-button": Sbutton;
+  }
+}
+
+export const Button = createComponent({
+  tagName: "s-button",
+  elementClass: Sbutton,
+  react: React,
+});
diff --git a/packages/ui-universal/lib/global.scss b/packages/ui-universal/lib/global.scss
diff --git a/packages/ui-universal/lib/index.ts b/packages/ui-universal/lib/index.ts
@@ -0,0 +1 @@
+export * from "./components/Button";
diff --git a/packages/ui-universal/lib/typings/scss.d.ts b/packages/ui-universal/lib/typings/scss.d.ts
@@ -0,0 +1,11 @@
+declare module "*.scss?inline" {
+  import { CSSResult } from "lit";
+  const styles: CSSResult;
+  export default styles;
+}
+
+declare module "*.scss" {
+  import { CSSResult } from "lit";
+  const styles: CSSResult;
+  export default styles;
+}
diff --git a/packages/ui-universal/lib/vite-env.d.ts b/packages/ui-universal/lib/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ui-universal/package.json b/packages/ui-universal/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@sast/oj-ui-universal",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs.js"
+      }
+    }
+  },
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.3",
+    "lit": "^3.1.2",
+    "react": "^18.2.0",
+    "vite-plugin-dts": "^3.6.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-scss-lit": "^1.1.6",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.6"
+  }
+}
diff --git a/packages/ui-universal/public/vite.svg b/packages/ui-universal/public/vite.svg