ranui 0.1.0-alpha → 0.1.1-alpha

package/components/input/index.ts

@@ -1,367 +0,0 @@
-import { isDisabled, falseList } from '@/utils/index'
-
-class CustomElement extends HTMLElement {
-  static get observedAttributes() {
-    return [
-      "label",
-      "disabled",
-      "name",
-      "pattern",
-      "required",
-      "placeholder",
-      "type",
-    ];
-  }
-  private _container: HTMLDivElement;
-  private _label: HTMLLabelElement | undefined;
-  private _input: HTMLInputElement;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "input");
-    this._input = document.createElement("input");
-    this._input.setAttribute("class", "input-main");
-    this._container.appendChild(this._input);
-    shadowRoot.appendChild(this._container);
-  }
-  /**
-   * @description: 获取input的值
-   * @return {String}
-   */
-  get value() {
-    return this.getAttribute("value");
-  }
-  /**
-   * @description: 设置input的值
-   * @param {String} value
-   */
-  set value(value) {
-    if (!isDisabled(this) && value) {
-      this.setAttribute("value", value);
-      this._container.setAttribute("value", value);
-    } else {
-      this.removeAttribute("value");
-      this._container.removeAttribute("value");
-    }
-  }
-  /**
-   * @description: 获取input的占位字符
-   * @return {String}
-   */
-  get placeholder() {
-    return this.getAttribute("placeholder");
-  }
-  /**
-   * @description: 设置input的占位字符
-   * @param {String} value
-   */
-  set placeholder(value) {
-    if (value) {
-      this.setAttribute("placeholder", value);
-    } else {
-      this.removeAttribute("placeholder");
-    }
-  }
-  /**
-   * @description: input是否为必选
-   * @return {String}
-   */
-  get required() {
-    return this.getAttribute("required");
-  }
-  /**
-   * @description: 设置input是否为必选，除非设置成false，否则都是必填
-   * @param {*} value
-   */
-  set required(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("required");
-    } else {
-      this.setAttribute("required", "");
-    }
-  }
-  /**
-   * @description: 获取input校验失败的提示
-   * @return {String}
-   */
-  get warning() {
-    return this.getAttribute("warning");
-  }
-  /**
-   * @description: 设置input校验失败的提示信息
-   * @param {String} value
-   */
-  set warning(value) {
-    if (!value) {
-      this.removeAttribute("warning");
-    } else {
-      this.setAttribute("warning", value);
-    }
-  }
-  /**
-   * @description: 获取校验的正则
-   * @return {String}
-   */
-  get pattern() {
-    return this.getAttribute("pattern");
-  }
-  /**
-   * @description: 设置input校验的正则
-   * @param {*} value
-   */
-  set pattern(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("pattern");
-    } else {
-      this.setAttribute("pattern", value);
-    }
-  }
-  /**
-   * @description: 获取input上disabled属性
-   * @return {String | null}
-   */
-  get disabled() {
-    return isDisabled(this);
-  }
-  /**
-   * @description: 设置input的disabled属性
-   * @param {String} value
-   */
-  set disabled(value) {
-    if (falseList.includes(value)) {
-      this.removeAttribute("disabled");
-      this._container.removeAttribute("disabled");
-      this._input.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", "");
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-  }
-  /**
-   * @description: 获取类似于Metiral Design的输入体验。
-   */
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  /**
-   * @description: 设置类似于Metiral Design的输入体验。
-   */
-  set label(value: string) {
-    this.setAttribute("label", value);
-  }
-  /**
-   * @description: 与form组件联动时，收集的属性名
-   * @return {String}
-   */
-  get name() {
-    return this.getAttribute("name") || "";
-  }
-  /**
-   * @description: 设置name属性
-   * @param {string} value
-   */
-  set name(value: string) {
-    this.setAttribute("name", value);
-  }
-  /**
-   * @description: 获取一个icon
-   * @return {String}
-   */
-  get icon() {
-    return this.getAttribute("icon");
-  }
-  /**
-   * @description: 设置icon来表示标识
-   * @param {string|null} value
-   */
-  set icon(value) {
-    if (value) {
-      this.setAttribute("icon", value);
-    } else {
-      this.removeAttribute("icon");
-    }
-  }
-  /**
-   * @description: 获取input的类型
-   * @return {string|null}
-   */
-  get type() {
-    return this.getAttribute("type");
-  }
-  /**
-   * @description: 设置input的类型
-   * @param {string|null} value
-   */
-  set type(value) {
-    if (value) {
-      this.setAttribute("type", value);
-    } else {
-      this.removeAttribute("type");
-    }
-  }
-
-  /**
-   * @description: 原生的input方法
-   * @param {Event} event
-   */
-  inputValue = (event: Event) => {
-    event.stopPropagation();
-    const target = event.target as HTMLInputElement;
-    this.value = target ? target.value : "";
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        detail: {
-          value: this.value,
-        },
-      })
-    );
-  };
-  /**
-   * @description: 增加change方法
-   */
-  change = () => {
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: {
-          value: this.value,
-        },
-      })
-    );
-  };
-  /**
-   * @description: 增加focus方法
-   */
-  focus = () => {
-    this.dispatchEvent(
-      new CustomEvent("focus", {
-        detail: {
-          value: this.value,
-        },
-      })
-    );
-  };
-  /**
-   * @description: 检查校验是否成功
-   * @return {Boolean}
-   */
-  checkout = () => {};
-  /**
-   * @description: 监听placeholder属性函数
-   * @param {string} name
-   * @param {string} value
-   */
-  listenPlaceholder(name: string, value: string) {
-    if (name === "placeholder" && this._input) {
-      if (value !== null) {
-        this._input.setAttribute("placeholder", value);
-      } else {
-        this._input.removeAttribute("placeholder");
-      }
-    }
-  }
-  /**
-   * @description: 监听required属性函数
-   * @param {string} name
-   * @param {string} value
-   * @return {*}
-   */
-  listenRequired(name: string, value: string) {
-    if (name === "required" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("required", "");
-      } else {
-        this._input.removeAttribute("required");
-      }
-    }
-  }
-  /**
-   * @description: 监听pattern属性函数
-   * @param {string} name
-   * @param {string} value
-   */
-  listenPattern(name: string, value: string) {
-    if (name === "pattern" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("pattern", value);
-      } else {
-        this._input.removeAttribute("pattern");
-      }
-    }
-  }
-  /**
-   * @description: 监听label属性函数
-   * @param {string} name
-   * @param {string} value
-   */
-  listenLabel(name: string, value: string) {
-    if (name === "label" && this._input) {
-      if (value !== null) {
-        if (this._label) {
-          this._label.innerHTML = value;
-        } else {
-          this._label = document.createElement("label");
-          this._label.innerHTML = value;
-          this._label.setAttribute("class", "input-label");
-          this._container.appendChild(this._label);
-        }
-      } else {
-        this._container.removeAttribute("label");
-        if (this._label) {
-          this._container.removeChild(this._label);
-          this._label = undefined;
-        }
-      }
-    }
-  }
-  /**
-   * @description: 监听type属性
-   * @param {string} name
-   * @param {string} value
-   */
-  listenType(name: string, value: string) {
-    if (name === "type" && this._input) {
-      if (value) {
-        this._input.setAttribute("type", value);
-      } else {
-        this._input.removeAttribute("type");
-      }
-    }
-  }
-  connectedCallback() {
-    // 如果一开始就设置了input的值，则初始化input的值
-    if (this.value) {
-      this._input.value = this.value;
-      this._container.setAttribute("value", this.value);
-    }
-    if (isDisabled(this)) {
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-    if (this.type) {
-      this._input.setAttribute("type", this.type);
-    }
-    this._input.addEventListener("input", this.inputValue);
-    this._input.addEventListener("change", this.change);
-    this._input.addEventListener("focus", this.focus);
-  }
-  disconnectCallback() {
-    this._input.removeEventListener("input", this.inputValue);
-    this._input.removeEventListener("change", this.change);
-  }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    this.listenPlaceholder(name, newValue);
-    this.listenRequired(name, newValue);
-    this.listenPattern(name, newValue);
-    this.listenLabel(name, newValue);
-  }
-}
-
-function Custom() {
-  if (!customElements.get("r-input")) {
-    customElements.define("r-input", CustomElement);
-  }
-}
-
-export default Custom()

package/components/modal/index.ts

@@ -1,118 +0,0 @@
-
-function Modal() {
-  const template = document.createElement('template')
-  const div = document.createElement('div')
-  div.setAttribute('class', 'modal-content')
-  const slot = document.createElement('slot')
-  slot.setAttribute('name', 'modal-content')
-  div.appendChild(slot)
-  template?.appendChild(div)
-  class Modal extends HTMLElement {
-    constructor() {
-      super();
-      // 获取模板内容
-      const templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({ mode: 'open' });
-      const wrap = document.createElement('div');
-      const modal = document.createElement('div');
-      const header = document.createElement('header');
-      const btnClose = document.createElement('span');
-      const mask = document.createElement('div');
-      const footer = document.createElement('footer');
-      const btnCancel = document.createElement('xu-button');
-      const btnOk = document.createElement('xu-button');
-
-      // wrap
-      wrap.setAttribute('class', 'wrap');
-
-      // modal
-      modal.setAttribute('class', 'xu-modal');
-
-      // header
-      let title = this.getAttribute('title');
-      header.textContent = title;
-      btnClose.setAttribute('class', 'xu-close');
-      btnClose.textContent = 'x';
-      header.appendChild(btnClose);
-      modal.appendChild(header);
-
-      btnClose.addEventListener('click', () => {
-        wrap.style.display = 'none';
-      })
-
-      // content
-      modal.appendChild(templateContent.cloneNode(true));
-
-      // footer
-      btnOk.setAttribute('type', 'primary');
-      const slot1 = document.createElement('span');
-      slot1.setAttribute('slot', 'btn-content');
-      slot1.textContent = '确认';
-      btnOk.appendChild(slot1);
-
-      const slot2 = document.createElement('span');
-      slot2.setAttribute('slot', 'btn-content');
-      slot2.textContent = '取消';
-      btnCancel.appendChild(slot2);
-
-      footer.appendChild(btnCancel);
-      footer.appendChild(btnOk);
-      modal.appendChild(footer);
-
-      // mask
-      mask.setAttribute('class', 'mask');
-      wrap.appendChild(mask);
-      wrap.appendChild(modal);
-
-      // 创建样式
-      const style = document.createElement('style');
-      const width = this.getAttribute('width');
-      const isVisible = this.getAttribute('visible');
-      // 为shadow Dom添加样式
-      style.textContent = `
-        .wrap {
-          position: fixed;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: 0;
-          display: ${isVisible === 'true' ? 'block' : 'none'}
-        }
-        // 忽略部分样式
-      `
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(wrap);
-    }
-    connectedCallback(el: any) {
-      console.log('insert dom', el)
-    }
-    disconnectedCallback() {
-      console.log('Custom square element removed from page.');
-    }
-    adoptedCallback() {
-      console.log('Custom square element moved to new page.');
-    }
-    attributeChangedCallback(name: string, oldValue: string | number | undefined, newValue: string | number | undefined) {
-      if (oldValue && this.shadowRoot) {
-        const children = [...this.shadowRoot.children] as Array<HTMLElement>
-        for (let i = 0; i < children.length; i++) {
-          if (children[i].nodeName === 'DIV' && children[i]?.className === 'wrap') {
-            if (newValue === 'true') {
-              children[i].style.display = 'block';
-            } else {
-              children[i].style.display = 'none';
-            }
-          }
-        }
-      }
-    }
-    // 如果需要在元素属性变化后，触发 attributeChangedCallback()回调函数，
-    // 你必须监听这个属性。这可以通过定义observedAttributes() get函数来实现
-    static get observedAttributes() {
-      return ['visible'];
-    }
-  }
-  window.customElements.define('xu-modal', Modal);
-}
-export default Modal()

package/components/tabPane/index.ts

@@ -1,71 +0,0 @@
-class TabPane extends HTMLElement {
-  static get observedAttributes() {
-    return ["label", "key", "disabled", "icon"];
-  }
-  _div: HTMLElement;
-  constructor() {
-    super();
-    this._div = document.createElement("slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    shadowRoot.appendChild(this._div);
-  }
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  get icon() {
-    return this.getAttribute("icon");
-  }
-
-  get key() {
-    return this.getAttribute("key");
-  }
-  set key(value) {
-    if (value) {
-      this.setAttribute("key", value);
-    } else {
-      this.removeAttribute("key");
-    }
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", value);
-    }
-  }
-  onClick(e: Event) {
-    console.log('e',e);
-  }
-  connectedCallback() {
-    this._div.addEventListener('click', this.onClick)
-  }
-  disconnectCallback() { }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (oldValue !== newValue && newValue) {
-      // const { emitLabel } = this.parentNode;
-      // if (name === "label") {
-      //   emitLabel;
-      //   this.parentNode?.update &&
-      //     this.parentNode.updatalabel(this.key, newValue);
-      // }
-      // if (name === "disabled") {
-      //   this.parentNode?.updatadisabled &&
-      //     this.parentNode.updatadisabled(this.key, newValue);
-      // }
-    }
-  }
-}
-
-function CustomElement() {
-  if (!customElements.get("r-tab")) {
-    customElements.define("r-tab", TabPane);
-  }
-}
-
-export default CustomElement()

package/components/tabs/index.less

@@ -1,47 +0,0 @@
-.tab {
-  ::slotted(r-tab) {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    flex-shrink: 0;
-    overflow: auto;
-  }
-  // &([type="line"]) {
-  //   .tab-header_line {
-  //     visibility: hidden;
-  //   }
-  // }
-  &-header {
-    position: relative;
-    overflow: hidden;
-    scroll-behavior: smooth;
-    &_nav {
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: flex-start;
-      align-items: center;
-      &__item {
-      }
-    }
-    &_line {
-      position: absolute;
-      width: 0;
-      margin-top: -2px;
-      height: 2px;
-      border-radius: 2px;
-      background: var(--themeColor, #1890ff);
-      transition: 0.2s;
-    }
-  }
-
-  &-content {
-    overflow: hidden;
-    &_wrap {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      transition: 0.2s;
-    }
-  }
-}