qc-ui-lit 0.1.0 → 0.2.0

package/dist/components/AMap/AMap.js

@@ -8,7 +8,7 @@ function a(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
 //#endregion
-//#region src/tools/loadAMap/loadAMap.ts
+//#region src/tools/loadAMap/index.ts
 var o, s = {
 	version: "2.0",
 	key: "94af010abe03a5b2a2f98e6739a11d0c",

package/dist/components/Button/Button.js

@@ -0,0 +1,133 @@
+import { r as e } from "../AMap/AMap.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/components/Button/qc-button.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.type = "default", this.size = "default", this.disabled = !1, this.loading = !1, this.animation = !0;
+	}
+	get _classes() {
+		return {
+			"qc-button": !0,
+			"qc-button-disabled": this.disabled,
+			"qc-button-animation": this.animation,
+			"qc-button-loading": this.loading,
+			[`qc-button-size-${this.size}`]: this.size !== "default",
+			[`qc-button-type-${this.type}`]: this.type !== "default"
+		};
+	}
+	handleClick(e) {
+		e.stopPropagation(), this.disabled || this.dispatchEvent(new CustomEvent("click", e));
+	}
+	firstUpdated() {}
+	render() {
+		return r`
+      <button type="button" class="${o(this._classes)}" ?disabled=${this.disabled} @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+    }
+    .qc-button {
+      outline: none;
+      cursor: pointer;
+      border-radius: var(--qc-radius-default);
+      padding: var(--qc-btn-default-padding);
+      transition: var(--qc-transition);
+      background-color: var(--qc-primary-color);
+      border: 1px solid var(--qc-primary-color);
+      line-height: var(--qc-line-height);
+      font-size: var(--qc-font-size-default);
+      color: var(--qc-primary-color-text);
+      vertical-align: middle;
+      user-select: none;
+    }
+    .qc-button:active {
+      filter: drop-shadow(0px 0px 4px var(--qc-primary-color));
+    }
+
+    .qc-button-animation:hover {
+      transform: scale(1.1);
+    }
+
+    .qc-button-animation:active {
+      transform: scale(0.9);
+    }
+    .qc-button-type-secondary {
+      background-color: var(--qc-secondary-color);
+      border-color: var(--qc-primary-color);
+      color: var(--qc-primary-color);
+    }
+    .qc-button-type-secondary:active {
+      filter: drop-shadow(0px 0px 4px var(--qc-primary-color));
+    }
+
+    .qc-button-type-danger {
+      background-color: var(--qc-danger-color);
+      border-color: var(--qc-danger-color);
+    }
+    .qc-button-type-danger:active {
+      filter: drop-shadow(0px 0px 4px var(--qc-danger-color));
+    }
+    .qc-button-type-success {
+      background-color: var(--qc-success-color);
+      border-color: var(--qc-success-color);
+    }
+    .qc-button-type-success:active {
+      filter: drop-shadow(0px 0px 4px var(--qc-success-color));
+    }
+
+    .qc-button-size-small {
+      padding: var(--qc-btn-small-padding);
+      font-size: var(--qc-font-size-small);
+    }
+
+    .qc-button-size-large {
+      padding: var(--qc-btn-large-padding);
+      font-size: var(--qc-font-size-large);
+    }
+    .qc-button-loading {
+      cursor: wait;
+      opacity: 0.65;
+    }
+    .qc-button-loading:hover {
+      transform: scale(1);
+    }
+
+    .qc-button-disabled {
+      opacity: 0.65;
+      cursor: not-allowed;
+      position: relative;
+      overflow: hidden;
+    }
+    .qc-button-disabled::after {
+      content: '';
+      display: block;
+      background-color: rgba(0, 0, 0, 0.4);
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .qc-button-disabled:hover {
+      transform: scale(1);
+    }
+  `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({ type: Boolean })], s.prototype, "disabled", void 0), e([a({ type: Boolean })], s.prototype, "loading", void 0), e([a({ type: Boolean })], s.prototype, "animation", void 0), s = e([i("qc-button")], s);
+//#endregion
+export { s as t };

package/dist/components/Button/qc-button.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'qc-button': QCButton;
+    }
+}
+export declare class QCButton extends LitElement {
+    type: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    animation: boolean;
+    private get _classes();
+    private handleClick;
+    firstUpdated(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}