ranui 0.1.0-alpha

package/.vitepress/config.ts

@@ -0,0 +1,26 @@
+const sidebar = {
+  "/": [
+    { text: "快速开始", link: "/" },
+    {
+      text: "通用",
+      children: [
+        { text: "Button 按钮", link: "/docs/button/" },
+        { text: "Input 输入框", link: "/docs/input/" },
+        { text: "Image 图片", link: "/docs/image/" },
+      ],
+    },
+    { text: "导航" },
+    { text: "反馈" },
+    { text: "数据录入" },
+    { text: "数据展示" },
+    { text: "布局" },
+  ],
+};
+const config = {
+  title: "RanUI",
+  themeConfig: {
+    sidebar,
+  },
+};
+
+export default config;

package/.vitepress/theme/index.ts

@@ -0,0 +1,9 @@
+import DefaultTheme from 'vitepress/theme'
+import '../../index'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.config.compilerOptions.isCustomElement = (tag) => tag.includes('r-')
+  }
+}

package/assets/image/failImage.ts

@@ -0,0 +1,4 @@
+const failImage = `
+    data:image/png;base64,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
+`;
+export default failImage;

package/assets/svgs/check-circle.svg

@@ -0,0 +1,4 @@
+<svg t="1665313196617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="200" height="200">
+    <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="7486"></path>
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="7487"></path>
+</svg>

package/assets/svgs/close-circle.svg

@@ -0,0 +1,4 @@
+<svg t="1665313468275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7625" width="200" height="200">
+    <path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="7626"></path>
+    <path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="7627"></path>
+</svg>

package/assets/svgs/eye-close.svg

@@ -0,0 +1,4 @@
+<svg t="1665473540543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="200" height="200">
+    <path d="M942.3 486.4l-0.1-0.1-0.1-0.1c-36.4-76.7-80-138.7-130.7-186L760.7 351c43.7 40.2 81.5 93.7 114.1 160.9C791.5 684.2 673.4 766 512 766c-51.3 0-98.3-8.3-141.2-25.1l-54.7 54.7C374.6 823.8 439.8 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0.1-51.3zM878.3 154.2l-42.4-42.4c-3.1-3.1-8.2-3.1-11.3 0L707.8 228.5C649.4 200.2 584.2 186 512 186c-192.2 0-335.4 100.5-430.2 300.3v0.1c-7.7 16.2-7.7 35.2 0 51.5 36.4 76.7 80 138.7 130.7 186.1L111.8 824.5c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4c3.1 3.1 8.2 3.1 11.3 0l712.8-712.8c3.1-3 3.1-8.1 0-11.2zM398.9 537.4c-1.9-8.2-2.9-16.7-2.9-25.4 0-61.9 50.1-112 112-112 8.7 0 17.3 1 25.4 2.9L398.9 537.4z m184.5-184.5C560.5 342.1 535 336 508 336c-97.2 0-176 78.8-176 176 0 27 6.1 52.5 16.9 75.4L263.3 673c-43.7-40.2-81.5-93.7-114.1-160.9C232.6 339.8 350.7 258 512 258c51.3 0 98.3 8.3 141.2 25.1l-69.8 69.8z" p-id="7486"></path>
+    <path d="M508 624c-6.4 0-12.7-0.5-18.8-1.6l-51.1 51.1c21.4 9.3 45.1 14.4 69.9 14.4 97.2 0 176-78.8 176-176 0-24.8-5.1-48.5-14.4-69.9l-51.1 51.1c1 6.1 1.6 12.4 1.6 18.8C620 573.9 569.9 624 508 624z" p-id="7487"></path>
+</svg>

package/assets/svgs/eye.svg

@@ -0,0 +1,4 @@
+<svg t="1665473580103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7625" width="200" height="200">
+    <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="7626"></path>
+    <path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="7627"></path>
+</svg>

package/assets/svgs/info-circle.svg

@@ -0,0 +1,5 @@
+<svg t="1665313505832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="200" height="200">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="7766"></path>
+    <path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="7767"></path>
+    <path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="7768"></path>
+</svg>

package/assets/svgs/lock.svg

@@ -0,0 +1,4 @@
+<svg t="1665313581686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8045" width="200" height="200">
+    <path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240z m460 600H232V536h560v304z" p-id="8046"></path>
+    <path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53c12.1-8.7 20-22.9 20-39 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 16.1 7.9 30.3 20 39z" p-id="8047"></path>
+</svg>

package/assets/svgs/unlock.svg

@@ -0,0 +1,4 @@
+<svg t="1665313601302" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8185" width="200" height="200">
+    <path d="M832 464H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v68c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-68c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32z m-40 376H232V536h560v304z" p-id="8186"></path>
+    <path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53c12.1-8.7 20-22.9 20-39 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 16.1 7.9 30.3 20 39z" p-id="8187"></path>
+</svg>

package/assets/svgs/user.svg

@@ -0,0 +1,3 @@
+<svg t="1665313543054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7906" width="200" height="200">
+    <path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="7907"></path>
+</svg>

package/components/button/index.less

@@ -0,0 +1,95 @@
+: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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,114 @@
+.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;
+  }
+}