ranui 0.1.0-alpha → 0.1.1-alpha.12

package/components/button/index.less

@@ -1,95 +0,0 @@
-:host {
-  position: relative;
-  display: inline-block;
-  font-weight: 400;
-  white-space: nowrap;
-  text-align: center;
-  background-image: none;
-  border: 1px solid transparent;
-  box-shadow: 0 2px #00000004;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  line-height: 22px;
-  font-size: 14px;
-  border-radius: 2px;
-  color: #000000d9;
-  border-color: #d9d9d9;
-  background: #fff;
-  overflow: hidden;
-  pointer-events: auto;
-  &,
-  &(:active),
-  &(:focus) {
-    outline: 0;
-  }
-  &(:not([disabled]):hover) {
-    border-color: #1890ff;
-    color: #1890ff;
-  }
-  &([type="primary"]) {
-    border-color: #1890ff;
-    background-color: #1890ff;
-    color: #fff;
-  }
-  &([type="primary"]:not([disabled]))::after {
-    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
-  }
-  &([type="primary"]:not([disabled]):hover) {
-    background-color: #40a9ff;
-    color: #fff;
-  }
-  &([type="warning"]) {
-    border-color: #ff4d4f;
-    background-color: #ff4d4f;
-    color: #fff;
-  }
-  &([type="warning"]:not([disabled]))::after {
-    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
-  }
-  &([type="warning"]:not([disabled]):hover) {
-    border-color: #ff4d4f;
-    background-color: #ff4d4f;
-    color: #fff;
-  }
-  &([type="text"]) {
-    border: none;
-  }
-  &([disabled]) {
-    cursor: not-allowed;
-    pointer-events: all;
-    opacity: 0.6;
-  }
-  &(:not([disabled]):active)::after {
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 0.3;
-    transition: 0s;
-  }
-  &(:active) .btn::before {
-    opacity: 0.2;
-  }
-  &(:not([disabled]))::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: var(--ran-x, 0);
-    top: var(--ran-y, 0);
-    pointer-events: none;
-    background-image: radial-gradient(circle, #1890ff 10%, transparent 10.01%);
-    background-repeat: no-repeat;
-    background-position: 50%;
-    transform: translate(-50%, -50%) scale(10);
-    opacity: 0;
-    transition: transform 0.3s, opacity 0.8s;
-  }
-  .slot {
-    display: block;
-    margin: 4px 15px;
-  }
-}

package/components/button/index.ts

@@ -1,64 +0,0 @@
-import { isDisabled } from '@/utils/index'
-
-class CustomElement extends HTMLElement {
-  static get observedAttributes() {
-    return ["disabled", "type"];
-  }
-  _btn: HTMLDivElement;
-  constructor() {
-    super();
-    const slot = document.createElement("slot");
-    this._btn = document.createElement("div");
-    this._btn.appendChild(slot);
-    slot.setAttribute("class", "slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    shadowRoot.appendChild(this._btn);
-  }
-  get disabled() {
-    return isDisabled(this)
-  }
-  set disabled(value: boolean | string | undefined | null) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", '');
-    }
-  }
-  mousedown = (event: MouseEvent) => {
-    if (!this.disabled || this.disabled === 'false') {
-      const { left, top } = this.getBoundingClientRect();
-      this.style.setProperty("--ran-x", event.clientX - left + "px");
-      this.style.setProperty("--ran-y", event.clientY - top + "px");
-    }
-  };
-  mouseLeave = () => {
-    this.style.removeProperty("--ran-x");
-    this.style.removeProperty("--ran-y");
-  };
-  connectedCallback() {
-    this._btn.addEventListener("mousedown", this.mousedown);
-    this._btn.addEventListener("mouseleave", this.mouseLeave);
-  }
-  disconnectCallback() {
-    this._btn.removeEventListener("mousedown", this.mousedown);
-    this._btn.removeEventListener("mouseleave", this.mouseLeave);
-  }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name == "disabled" && this._btn) {
-      if (!newValue || newValue === "false") {
-        this._btn.setAttribute("disabled", '');
-      } else {
-        this._btn.removeAttribute("disabled");
-
-      }
-    }
-  }
-}
-
-function Custom() {
-  if (!customElements.get("r-button")) {
-    customElements.define("r-button", CustomElement);
-  }
-}
-
-export default Custom()

package/components/form/index.ts

@@ -1,36 +0,0 @@
-function Component() {
-    const template = document.createElement('template');
-    const slot = document.createElement('slot');
-    const form = document.createElement('form');
-    form.setAttribute('class', 'r-form');
-    slot.setAttribute('name', 'r-form_content');
-    form.appendChild(slot);
-    template.appendChild(form);
-    class CustomElement extends HTMLElement {
-        _form: HTMLFormElement;
-        constructor() {
-            super();
-            this._form = form.cloneNode(true) as HTMLFormElement
-            const shadowRoot = this.attachShadow({ mode: 'closed' });
-            const jsonData: Record<string, any> = {}
-            const formData = new FormData(this._form)
-            formData.forEach((value, key) => {
-                if (!jsonData[key]) {
-                    jsonData[key] = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
-                }
-            });
-            this._form.addEventListener("submit", () => {
-                this.value = JSON.stringify(jsonData)
-            });
-            shadowRoot.appendChild(this._form);
-        }
-        get value() {
-            return this.getAttribute("value");
-        }
-        set value(value) {
-            if (value !== null) this.setAttribute("value", value);
-        }
-    }
-    window.customElements.define('r-form', CustomElement)
-}
-export default Component()

package/components/image/index.ts

@@ -1,62 +0,0 @@
-import failImage from "@/assets/image/failImage";
-
-class CustomElement extends HTMLElement {
-  static get observedAttributes() {
-    return ["fallback"];
-  }
-  _image: HTMLImageElement | undefined;
-  _container: Element;
-  constructor() {
-    super();
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "r-image");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    shadowRoot.appendChild(this._container);
-  }
-  get fallback() {
-    return this.getAttribute("fallback");
-  }
-  set fallback(value) {
-    if (value) {
-      this.setAttribute("fallback", value);
-    } else {
-      this.removeAttribute("fallback");
-    }
-  }
-
-  listenFallback(name: string, value: string) {
-    if (name === "fallback" && this._image) {
-      if (value) {
-        this._image.setAttribute("fallback", value);
-      } else {
-        this._image.removeAttribute("fallback");
-      }
-    }
-  }
-
-  connectedCallback() {
-    const src = this.getAttribute("src") || "";
-    this._image = new Image();
-    this._image.src = src;
-    this._image.addEventListener("error", () => {
-      if (this._image && this.fallback) {
-        this._image.src = this.fallback;
-      }
-    });
-    this._image.addEventListener("load", () => {
-      if (this._image) {
-        this._container.appendChild(this._image);
-      }
-    });
-  }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    this.listenFallback(name, newValue);
-  }
-}
-function Custom() {
-  if (!customElements.get("r-img")) {
-    customElements.define("r-img", CustomElement);
-  }
-}
-
-export default Custom();

package/components/input/index.less

@@ -1,114 +0,0 @@
-.input {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  min-width: 0;
-  padding: 2px 8px;
-  color: #000000d9;
-  font-size: 12px;
-  line-height: 1.5715;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  transition: all 0.3s;
-  &:active {
-    border-color: #40a9ff;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-    border-right-width: 1px;
-    outline: 0;
-  }
-  &:hover {
-    border-color: #40a9ff;
-    border-right-width: 1px;
-  }
-  & > .input-main:hover ~ .input-label {
-    color: #40a9ff;
-  }
-  &[value] > .input-label {
-    transform: translateY(calc(-50% - 0.43em)) scale(0.8);
-    color: #00000040;
-  }
-  &[disabled] {
-    color: #00000040;
-    background-color: #f5f5f5;
-    border-color: #d9d9d9;
-    box-shadow: none;
-    cursor: not-allowed;
-    opacity: 1;
-    & > .input-main {
-      color: #00000040;
-      background-color: #f5f5f5;
-      border-color: #d9d9d9;
-      box-shadow: none;
-      cursor: not-allowed;
-      opacity: 1;
-    }
-    & > .input-main:hover ~ .input-label {
-      color: #999;
-    }
-    & > .input-label {
-      color: #999;
-      border-color: #d9d9d9;
-      box-shadow: none;
-      cursor: not-allowed;
-    }
-  }
-  &-main {
-    writing-mode: horizontal-tb;
-    text-rendering: auto;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    text-align: start;
-    -webkit-rtl-ordering: logical;
-    cursor: text;
-    touch-action: manipulation;
-    -webkit-appearance: none;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    margin: 0;
-    font-variant: tabular-nums;
-    list-style: none;
-    font-feature-settings: "tnum";
-    position: relative;
-    border: none;
-    width: 100%;
-    min-width: 0;
-    color: #000000d9;
-    font-size: 14px;
-    line-height: 1.5715;
-    background-color: #fff;
-    background-image: none;
-    transition: all 0.3s;
-    &:focus,
-    &:hover {
-      border: none;
-      outline: 0;
-    }
-    &::placeholder {
-      color: #999;
-    }
-    &:placeholder-shown ~ .input-label {
-      transform: translateY(calc(-50% - 0.43em)) scale(0.8);
-    }
-    &:focus ~ .input-label {
-      transform: translateY(calc(-50% - 0.43em)) scale(0.8);
-    }
-  }
-  &-label {
-    pointer-events: none;
-    position: absolute;
-    font-size: 14px;
-    left: 8px;
-    transition: transform 0.3s, color 0.3s, background-color 0.3s;
-    transform-origin: left;
-    padding: 0 0.2em;
-    color: #999;
-    // background: #fff;
-    backdrop-filter: blur(10px);
-    opacity: 0.9;
-  }
-}