ranui 0.1.0-alpha

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../utils/index.ts","../components/button/index.ts","../components/image/index.ts","../components/input/index.ts","../components/modal/index.ts","../components/tabPane/index.ts","../components/tabs/index.ts"],"sourcesContent":["export const falseList = [false, \"false\", null, undefined];\n/**\n  * @description: 判断这个元素上是否有disabled属性\n  * @param {Element} element\n  * @return {*}\n  */\nexport const isDisabled = (element: Element) => {\n  const status = element.hasAttribute('disabled')\n  const value = element.getAttribute('disabled')\n  if (status && !falseList.includes(value)) return true\n  return false\n}","import { isDisabled } from '@/utils/index'\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"disabled\", \"type\"];\n  }\n  _btn: HTMLDivElement;\n  constructor() {\n    super();\n    const slot = document.createElement(\"slot\");\n    this._btn = document.createElement(\"div\");\n    this._btn.appendChild(slot);\n    slot.setAttribute(\"class\", \"slot\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._btn);\n  }\n  get disabled() {\n    return isDisabled(this)\n  }\n  set disabled(value: boolean | string | undefined | null) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", '');\n    }\n  }\n  mousedown = (event: MouseEvent) => {\n    if (!this.disabled || this.disabled === 'false') {\n      const { left, top } = this.getBoundingClientRect();\n      this.style.setProperty(\"--ran-x\", event.clientX - left + \"px\");\n      this.style.setProperty(\"--ran-y\", event.clientY - top + \"px\");\n    }\n  };\n  mouseLeave = () => {\n    this.style.removeProperty(\"--ran-x\");\n    this.style.removeProperty(\"--ran-y\");\n  };\n  connectedCallback() {\n    this._btn.addEventListener(\"mousedown\", this.mousedown);\n    this._btn.addEventListener(\"mouseleave\", this.mouseLeave);\n  }\n  disconnectCallback() {\n    this._btn.removeEventListener(\"mousedown\", this.mousedown);\n    this._btn.removeEventListener(\"mouseleave\", this.mouseLeave);\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (name == \"disabled\" && this._btn) {\n      if (!newValue || newValue === \"false\") {\n        this._btn.setAttribute(\"disabled\", '');\n      } else {\n        this._btn.removeAttribute(\"disabled\");\n\n      }\n    }\n  }\n}\n\nfunction Custom() {\n  if (!customElements.get(\"r-button\")) {\n    customElements.define(\"r-button\", CustomElement);\n  }\n}\n\nexport default Custom()\n","import failImage from \"@/assets/image/failImage\";\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"fallback\"];\n  }\n  _image: HTMLImageElement | undefined;\n  _container: Element;\n  constructor() {\n    super();\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"r-image\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._container);\n  }\n  get fallback() {\n    return this.getAttribute(\"fallback\");\n  }\n  set fallback(value) {\n    if (value) {\n      this.setAttribute(\"fallback\", value);\n    } else {\n      this.removeAttribute(\"fallback\");\n    }\n  }\n\n  listenFallback(name: string, value: string) {\n    if (name === \"fallback\" && this._image) {\n      if (value) {\n        this._image.setAttribute(\"fallback\", value);\n      } else {\n        this._image.removeAttribute(\"fallback\");\n      }\n    }\n  }\n\n  connectedCallback() {\n    const src = this.getAttribute(\"src\") || \"\";\n    this._image = new Image();\n    this._image.src = src;\n    this._image.addEventListener(\"error\", () => {\n      if (this._image && this.fallback) {\n        this._image.src = this.fallback;\n      }\n    });\n    this._image.addEventListener(\"load\", () => {\n      if (this._image) {\n        this._container.appendChild(this._image);\n      }\n    });\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.listenFallback(name, newValue);\n  }\n}\nfunction Custom() {\n  if (!customElements.get(\"r-img\")) {\n    customElements.define(\"r-img\", CustomElement);\n  }\n}\n\nexport default Custom();\n","import { isDisabled, falseList } from '@/utils/index'\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\n      \"label\",\n      \"disabled\",\n      \"name\",\n      \"pattern\",\n      \"required\",\n      \"placeholder\",\n      \"type\",\n    ];\n  }\n  private _container: HTMLDivElement;\n  private _label: HTMLLabelElement | undefined;\n  private _input: HTMLInputElement;\n  constructor() {\n    super();\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"input\");\n    this._input = document.createElement(\"input\");\n    this._input.setAttribute(\"class\", \"input-main\");\n    this._container.appendChild(this._input);\n    shadowRoot.appendChild(this._container);\n  }\n  /**\n   * @description: 获取input的值\n   * @return {String}\n   */\n  get value() {\n    return this.getAttribute(\"value\");\n  }\n  /**\n   * @description: 设置input的值\n   * @param {String} value\n   */\n  set value(value) {\n    if (!isDisabled(this) && value) {\n      this.setAttribute(\"value\", value);\n      this._container.setAttribute(\"value\", value);\n    } else {\n      this.removeAttribute(\"value\");\n      this._container.removeAttribute(\"value\");\n    }\n  }\n  /**\n   * @description: 获取input的占位字符\n   * @return {String}\n   */\n  get placeholder() {\n    return this.getAttribute(\"placeholder\");\n  }\n  /**\n   * @description: 设置input的占位字符\n   * @param {String} value\n   */\n  set placeholder(value) {\n    if (value) {\n      this.setAttribute(\"placeholder\", value);\n    } else {\n      this.removeAttribute(\"placeholder\");\n    }\n  }\n  /**\n   * @description: input是否为必选\n   * @return {String}\n   */\n  get required() {\n    return this.getAttribute(\"required\");\n  }\n  /**\n   * @description: 设置input是否为必选，除非设置成false，否则都是必填\n   * @param {*} value\n   */\n  set required(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"required\");\n    } else {\n      this.setAttribute(\"required\", \"\");\n    }\n  }\n  /**\n   * @description: 获取input校验失败的提示\n   * @return {String}\n   */\n  get warning() {\n    return this.getAttribute(\"warning\");\n  }\n  /**\n   * @description: 设置input校验失败的提示信息\n   * @param {String} value\n   */\n  set warning(value) {\n    if (!value) {\n      this.removeAttribute(\"warning\");\n    } else {\n      this.setAttribute(\"warning\", value);\n    }\n  }\n  /**\n   * @description: 获取校验的正则\n   * @return {String}\n   */\n  get pattern() {\n    return this.getAttribute(\"pattern\");\n  }\n  /**\n   * @description: 设置input校验的正则\n   * @param {*} value\n   */\n  set pattern(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"pattern\");\n    } else {\n      this.setAttribute(\"pattern\", value);\n    }\n  }\n  /**\n   * @description: 获取input上disabled属性\n   * @return {String | null}\n   */\n  get disabled() {\n    return isDisabled(this);\n  }\n  /**\n   * @description: 设置input的disabled属性\n   * @param {String} value\n   */\n  set disabled(value) {\n    if (falseList.includes(value)) {\n      this.removeAttribute(\"disabled\");\n      this._container.removeAttribute(\"disabled\");\n      this._input.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", \"\");\n      this._container.setAttribute(\"disabled\", \"\");\n      this._input.setAttribute(\"disabled\", \"\");\n    }\n  }\n  /**\n   * @description: 获取类似于Metiral Design的输入体验。\n   */\n  get label() {\n    return this.getAttribute(\"label\") || \"\";\n  }\n  /**\n   * @description: 设置类似于Metiral Design的输入体验。\n   */\n  set label(value: string) {\n    this.setAttribute(\"label\", value);\n  }\n  /**\n   * @description: 与form组件联动时，收集的属性名\n   * @return {String}\n   */\n  get name() {\n    return this.getAttribute(\"name\") || \"\";\n  }\n  /**\n   * @description: 设置name属性\n   * @param {string} value\n   */\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n  /**\n   * @description: 获取一个icon\n   * @return {String}\n   */\n  get icon() {\n    return this.getAttribute(\"icon\");\n  }\n  /**\n   * @description: 设置icon来表示标识\n   * @param {string|null} value\n   */\n  set icon(value) {\n    if (value) {\n      this.setAttribute(\"icon\", value);\n    } else {\n      this.removeAttribute(\"icon\");\n    }\n  }\n  /**\n   * @description: 获取input的类型\n   * @return {string|null}\n   */\n  get type() {\n    return this.getAttribute(\"type\");\n  }\n  /**\n   * @description: 设置input的类型\n   * @param {string|null} value\n   */\n  set type(value) {\n    if (value) {\n      this.setAttribute(\"type\", value);\n    } else {\n      this.removeAttribute(\"type\");\n    }\n  }\n\n  /**\n   * @description: 原生的input方法\n   * @param {Event} event\n   */\n  inputValue = (event: Event) => {\n    event.stopPropagation();\n    const target = event.target as HTMLInputElement;\n    this.value = target ? target.value : \"\";\n    this.dispatchEvent(\n      new CustomEvent(\"input\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 增加change方法\n   */\n  change = () => {\n    this.dispatchEvent(\n      new CustomEvent(\"change\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 增加focus方法\n   */\n  focus = () => {\n    this.dispatchEvent(\n      new CustomEvent(\"focus\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 检查校验是否成功\n   * @return {Boolean}\n   */\n  checkout = () => {};\n  /**\n   * @description: 监听placeholder属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenPlaceholder(name: string, value: string) {\n    if (name === \"placeholder\" && this._input) {\n      if (value !== null) {\n        this._input.setAttribute(\"placeholder\", value);\n      } else {\n        this._input.removeAttribute(\"placeholder\");\n      }\n    }\n  }\n  /**\n   * @description: 监听required属性函数\n   * @param {string} name\n   * @param {string} value\n   * @return {*}\n   */\n  listenRequired(name: string, value: string) {\n    if (name === \"required\" && this._input) {\n      if (value && value !== \"false\") {\n        this._input.setAttribute(\"required\", \"\");\n      } else {\n        this._input.removeAttribute(\"required\");\n      }\n    }\n  }\n  /**\n   * @description: 监听pattern属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenPattern(name: string, value: string) {\n    if (name === \"pattern\" && this._input) {\n      if (value && value !== \"false\") {\n        this._input.setAttribute(\"pattern\", value);\n      } else {\n        this._input.removeAttribute(\"pattern\");\n      }\n    }\n  }\n  /**\n   * @description: 监听label属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenLabel(name: string, value: string) {\n    if (name === \"label\" && this._input) {\n      if (value !== null) {\n        if (this._label) {\n          this._label.innerHTML = value;\n        } else {\n          this._label = document.createElement(\"label\");\n          this._label.innerHTML = value;\n          this._label.setAttribute(\"class\", \"input-label\");\n          this._container.appendChild(this._label);\n        }\n      } else {\n        this._container.removeAttribute(\"label\");\n        if (this._label) {\n          this._container.removeChild(this._label);\n          this._label = undefined;\n        }\n      }\n    }\n  }\n  /**\n   * @description: 监听type属性\n   * @param {string} name\n   * @param {string} value\n   */\n  listenType(name: string, value: string) {\n    if (name === \"type\" && this._input) {\n      if (value) {\n        this._input.setAttribute(\"type\", value);\n      } else {\n        this._input.removeAttribute(\"type\");\n      }\n    }\n  }\n  connectedCallback() {\n    // 如果一开始就设置了input的值，则初始化input的值\n    if (this.value) {\n      this._input.value = this.value;\n      this._container.setAttribute(\"value\", this.value);\n    }\n    if (isDisabled(this)) {\n      this._container.setAttribute(\"disabled\", \"\");\n      this._input.setAttribute(\"disabled\", \"\");\n    }\n    if (this.type) {\n      this._input.setAttribute(\"type\", this.type);\n    }\n    this._input.addEventListener(\"input\", this.inputValue);\n    this._input.addEventListener(\"change\", this.change);\n    this._input.addEventListener(\"focus\", this.focus);\n  }\n  disconnectCallback() {\n    this._input.removeEventListener(\"input\", this.inputValue);\n    this._input.removeEventListener(\"change\", this.change);\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.listenPlaceholder(name, newValue);\n    this.listenRequired(name, newValue);\n    this.listenPattern(name, newValue);\n    this.listenLabel(name, newValue);\n  }\n}\n\nfunction Custom() {\n  if (!customElements.get(\"r-input\")) {\n    customElements.define(\"r-input\", CustomElement);\n  }\n}\n\nexport default Custom()\n","\nfunction Modal() {\n  const template = document.createElement('template')\n  const div = document.createElement('div')\n  div.setAttribute('class', 'modal-content')\n  const slot = document.createElement('slot')\n  slot.setAttribute('name', 'modal-content')\n  div.appendChild(slot)\n  template?.appendChild(div)\n  class Modal extends HTMLElement {\n    constructor() {\n      super();\n      // 获取模板内容\n      const templateContent = template.content;\n\n      const shadowRoot = this.attachShadow({ mode: 'open' });\n      const wrap = document.createElement('div');\n      const modal = document.createElement('div');\n      const header = document.createElement('header');\n      const btnClose = document.createElement('span');\n      const mask = document.createElement('div');\n      const footer = document.createElement('footer');\n      const btnCancel = document.createElement('xu-button');\n      const btnOk = document.createElement('xu-button');\n\n      // wrap\n      wrap.setAttribute('class', 'wrap');\n\n      // modal\n      modal.setAttribute('class', 'xu-modal');\n\n      // header\n      let title = this.getAttribute('title');\n      header.textContent = title;\n      btnClose.setAttribute('class', 'xu-close');\n      btnClose.textContent = 'x';\n      header.appendChild(btnClose);\n      modal.appendChild(header);\n\n      btnClose.addEventListener('click', () => {\n        wrap.style.display = 'none';\n      })\n\n      // content\n      modal.appendChild(templateContent.cloneNode(true));\n\n      // footer\n      btnOk.setAttribute('type', 'primary');\n      const slot1 = document.createElement('span');\n      slot1.setAttribute('slot', 'btn-content');\n      slot1.textContent = '确认';\n      btnOk.appendChild(slot1);\n\n      const slot2 = document.createElement('span');\n      slot2.setAttribute('slot', 'btn-content');\n      slot2.textContent = '取消';\n      btnCancel.appendChild(slot2);\n\n      footer.appendChild(btnCancel);\n      footer.appendChild(btnOk);\n      modal.appendChild(footer);\n\n      // mask\n      mask.setAttribute('class', 'mask');\n      wrap.appendChild(mask);\n      wrap.appendChild(modal);\n\n      // 创建样式\n      const style = document.createElement('style');\n      const width = this.getAttribute('width');\n      const isVisible = this.getAttribute('visible');\n      // 为shadow Dom添加样式\n      style.textContent = `\n        .wrap {\n          position: fixed;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          top: 0;\n          display: ${isVisible === 'true' ? 'block' : 'none'}\n        }\n        // 忽略部分样式\n      `\n      shadowRoot.appendChild(style);\n      shadowRoot.appendChild(wrap);\n    }\n    connectedCallback(el: any) {\n      console.log('insert dom', el)\n    }\n    disconnectedCallback() {\n      console.log('Custom square element removed from page.');\n    }\n    adoptedCallback() {\n      console.log('Custom square element moved to new page.');\n    }\n    attributeChangedCallback(name: string, oldValue: string | number | undefined, newValue: string | number | undefined) {\n      if (oldValue && this.shadowRoot) {\n        const children = [...this.shadowRoot.children] as Array<HTMLElement>\n        for (let i = 0; i < children.length; i++) {\n          if (children[i].nodeName === 'DIV' && children[i]?.className === 'wrap') {\n            if (newValue === 'true') {\n              children[i].style.display = 'block';\n            } else {\n              children[i].style.display = 'none';\n            }\n          }\n        }\n      }\n    }\n    // 如果需要在元素属性变化后，触发 attributeChangedCallback()回调函数，\n    // 你必须监听这个属性。这可以通过定义observedAttributes() get函数来实现\n    static get observedAttributes() {\n      return ['visible'];\n    }\n  }\n  window.customElements.define('xu-modal', Modal);\n}\nexport default Modal()","class TabPane extends HTMLElement {\n  static get observedAttributes() {\n    return [\"label\", \"key\", \"disabled\", \"icon\"];\n  }\n  _div: HTMLElement;\n  constructor() {\n    super();\n    this._div = document.createElement(\"slot\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._div);\n  }\n  get label() {\n    return this.getAttribute(\"label\") || \"\";\n  }\n  set label(value) {\n    this.setAttribute(\"label\", value);\n  }\n  get icon() {\n    return this.getAttribute(\"icon\");\n  }\n\n  get key() {\n    return this.getAttribute(\"key\");\n  }\n  set key(value) {\n    if (value) {\n      this.setAttribute(\"key\", value);\n    } else {\n      this.removeAttribute(\"key\");\n    }\n  }\n  get disabled() {\n    return this.getAttribute(\"disabled\");\n  }\n  set disabled(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", value);\n    }\n  }\n  onClick(e: Event) {\n    console.log('e',e);\n  }\n  connectedCallback() {\n    this._div.addEventListener('click', this.onClick)\n  }\n  disconnectCallback() { }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (oldValue !== newValue && newValue) {\n      // const { emitLabel } = this.parentNode;\n      // if (name === \"label\") {\n      //   emitLabel;\n      //   this.parentNode?.update &&\n      //     this.parentNode.updatalabel(this.key, newValue);\n      // }\n      // if (name === \"disabled\") {\n      //   this.parentNode?.updatadisabled &&\n      //     this.parentNode.updatadisabled(this.key, newValue);\n      // }\n    }\n  }\n}\n\nfunction CustomElement() {\n  if (!customElements.get(\"r-tab\")) {\n    customElements.define(\"r-tab\", TabPane);\n  }\n}\n\nexport default CustomElement()\n","import { isDisabled } from '@/utils/index'\nclass Tabs extends HTMLElement {\n  static get observedAttributes() {\n    return [\"active\", 'forceRender'];\n  }\n  _container: HTMLDivElement;\n  _header: HTMLDivElement;\n  _nav: HTMLDivElement;\n  _line: HTMLDivElement;\n  _content: HTMLDivElement;\n  _wrap: HTMLDivElement;\n  _slot: HTMLSlotElement;\n  tabHeaderKeyMapIndex: Record<string, number>;\n  constructor() {\n    super();\n    /**\n     * <div class=\"tab\">\n     *   <div class=\"tab-header\">\n     *      <div class=\"tab-header_nav\">...</div>\n     *      <div class=\"tab-header_line\"></div>\n     *   </div>\n     *   <div class=\"tab-content\">\n     *      <div class=\"tab-content_wrap\">\n     *         <slot></slot>\n     *      </div>\n     *   </div>\n     * </div>\n     */\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"tab\");\n    this._header = document.createElement(\"div\");\n    this._header.setAttribute(\"class\", \"tab-header\");\n    this._nav = document.createElement(\"div\");\n    this._nav.setAttribute(\"class\", \"tab-header_nav\");\n    this._line = document.createElement(\"div\");\n    this._line.setAttribute(\"class\", \"tab-header_line\");\n    this._content = document.createElement(\"div\");\n    this._content.setAttribute(\"class\", \"tab-content\");\n    this._wrap = document.createElement(\"div\");\n    this._wrap.setAttribute(\"class\", \"tab-content_wrap\");\n    this._slot = document.createElement(\"slot\");\n    this._wrap.appendChild(this._slot);\n    this._content.appendChild(this._wrap);\n    this._header.appendChild(this._nav);\n    this._header.appendChild(this._line);\n    this._container.appendChild(this._header);\n    this._container.appendChild(this._content);\n\n    this.tabHeaderKeyMapIndex = {}\n\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._container);\n  }\n\n  get align() {\n    return this.getAttribute(\"align\") || \"start\";\n  }\n\n  set align(value) {\n    this.setAttribute(\"align\", value);\n  }\n\n  get type() {\n    return this.getAttribute(\"type\") || \"flat\";\n  }\n\n  get active() {\n    return this.getAttribute(\"active\");\n  }\n\n  set active(value) {\n    if (value) {\n      this.setAttribute(\"active\", value);\n      this.setTabLine(value)\n      this.setTabContent(value)\n    } else {\n      this.removeAttribute(\"active\");\n    }\n  }\n\n  set type(value) {\n    this.setAttribute(\"type\", value);\n  }\n  /**\n   * @description: 构建tabPane组件key值和index的映射，同时判断一个tabs下的tabPane key值不能重复\n   * @param {string} key\n   * @param {number} index\n   */\n  initTabHeaderKeyMapIndex = (key: string, index: number) => {\n    const value = this.tabHeaderKeyMapIndex[key]\n    if (value) {\n      throw new Error('tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性')\n    } else {\n      this.tabHeaderKeyMapIndex[key] = index\n    }\n  }\n  /**\n   * @description: 根据传入的tabPane生成tabs的头部\n   * @param {Element} tabPane\n   * @param {number} index\n   * @return {Element}\n   */\n  createTabHeader(tabPane: Element, index: number) {\n    const label = tabPane.getAttribute(\"label\") || '';\n    const key = tabPane.getAttribute('key') || `${index}`\n    const type = tabPane.getAttribute('type') || 'text'\n    this.initTabHeaderKeyMapIndex(key, index)\n    const tabHeader = document.createElement('r-button')\n    tabHeader.setAttribute('class', 'tab-header_nav__item')\n    tabHeader.setAttribute('type', type)\n    isDisabled(tabPane) && tabHeader.setAttribute('disabled', '')\n    tabHeader.setAttribute('ran-key', key)\n    tabHeader.innerHTML = label\n    return tabHeader\n  }\n  /**\n   * @description: 通过key值设置tabLine的位置\n   * @param {string} key\n   */\n  setTabLine = (key: string) => {\n    if (key) {\n      const index = this.tabHeaderKeyMapIndex[key]\n      this._line.style.setProperty('transform', `translateX(${100 * index}%)`)\n    }\n  }\n  /**\n   * @description: 通过传入的key值设置tabContent\n   */\n  setTabContent = (key: string) => {\n    if (key) {\n      const index = this.tabHeaderKeyMapIndex[key]\n      this._wrap.style.setProperty('transform', `translateX(${index * -100}%)`)\n    }\n  }\n  /**\n   * @description: 根据点击设置tabLine的位置\n   * @param {Event} e\n   * @param {number} index\n   * @param {number} width\n   */\n  clickTabHead = (e: Event) => {\n    const tabHeader = e.target as Element\n    const key = tabHeader.getAttribute('ran-key')\n    const disabled = isDisabled(tabHeader)\n    if (!disabled && key) {\n      this.setAttribute('active', key)\n      this.setTabLine(key)\n      this.setTabContent(key)\n    }\n  }\n  /**\n   * @description: 初始化tabs的active属性和tabLine,tabContent\n   */\n  initActive = () => {\n    const tabHeaderList = [...this._nav.children]\n    const initTabHeader = tabHeaderList.filter(item => !isDisabled(item)).shift()\n    if (!initTabHeader) return\n    const index = tabHeaderList.findIndex(item => item === initTabHeader)\n    const key = initTabHeader?.getAttribute('ran-key') || `${index}`\n    if (this.active === null && key !== null) {\n      this.setAttribute('active', `${key}`)\n      const { width = 0 } = initTabHeader.getBoundingClientRect()\n      this._line.style.setProperty(\"width\", `${width}px`);\n      this.setTabLine(key)\n      this.setTabContent(key)\n    }\n  }\n  /**\n   * @description: 监听slot组件的添加/删除/替换操作，进行tabs初始化\n   * @return {*}\n   */\n  listenSlotChange = () => {\n    const slots = this._slot.assignedElements();\n    slots.forEach((item, index) => {\n      const tabPane = this.createTabHeader(item, index)\n      this._nav.appendChild(tabPane)\n      tabPane.addEventListener('click', this.clickTabHead)\n    });\n    this.initActive()\n  };\n\n  connectedCallback() {\n    this._slot.addEventListener(\"slotchange\", this.listenSlotChange);\n  }\n\n  disconnectCallback() {\n    this._slot.removeEventListener(\"slotchange\", this.listenSlotChange);\n  }\n\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (oldValue !== newValue) {\n      this.dispatchEvent(new CustomEvent('change', {\n        detail: {\n          active: this.active,\n        }\n      }));\n    }\n  }\n}\n\nfunction CustomElement() {\n  if (!customElements.get(\"r-tabs\")) {\n    customElements.define(\"r-tabs\", Tabs);\n  }\n}\n\nexport default CustomElement();\n"],"names":["CustomElement","f7170ee498e0dd32cbdcb63fba8f75cc","Custom","Modal"],"mappings":"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"}

package/dist/index.umd.cjs

@@ -0,0 +1,2 @@
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";const t=[!1,"false",null,void 0],e=e=>{const i=e.hasAttribute("disabled"),n=e.getAttribute("disabled");return!(!i||t.includes(n))};class i extends HTMLElement{constructor(){super(),this.mousedown=t=>{if(!this.disabled||"false"===this.disabled){const{left:e,top:i}=this.getBoundingClientRect();this.style.setProperty("--ran-x",t.clientX-e+"px"),this.style.setProperty("--ran-y",t.clientY-i+"px")}},this.mouseLeave=()=>{this.style.removeProperty("--ran-x"),this.style.removeProperty("--ran-y")};const t=document.createElement("slot");this._btn=document.createElement("div"),this._btn.appendChild(t),t.setAttribute("class","slot");const e=this.attachShadow({mode:"closed"}),i=document.createElement("style");i.textContent=':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 .3s cubic-bezier(.645,.045,.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}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(: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 .3s,opacity .8s}:host .slot{display:block;margin:4px 15px}\n',e.appendChild(i),e.appendChild(this._btn)}static get observedAttributes(){return["disabled","type"]}get disabled(){return e(this)}set disabled(t){t&&"false"!==t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}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(t,e,i){"disabled"==t&&this._btn&&(i&&"false"!==i?this._btn.removeAttribute("disabled"):this._btn.setAttribute("disabled",""))}}customElements.get("r-button")||customElements.define("r-button",i);class n extends HTMLElement{constructor(){super(),this._container=document.createElement("div"),this._container.setAttribute("class","r-image");const t=this.attachShadow({mode:"closed"}),e=document.createElement("style");e.textContent="",t.appendChild(e),t.appendChild(this._container)}static get observedAttributes(){return["fallback"]}get fallback(){return this.getAttribute("fallback")}set fallback(t){t?this.setAttribute("fallback",t):this.removeAttribute("fallback")}listenFallback(t,e){"fallback"===t&&this._image&&(e?this._image.setAttribute("fallback",e):this._image.removeAttribute("fallback"))}connectedCallback(){const t=this.getAttribute("src")||"";this._image=new Image,this._image.src=t,this._image.addEventListener("error",(()=>{this._image&&this.fallback&&(this._image.src=this.fallback)})),this._image.addEventListener("load",(()=>{this._image&&this._container.appendChild(this._image)}))}attributeChangedCallback(t,e,i){this.listenFallback(t,i)}}customElements.get("r-img")||customElements.define("r-img",n);class s extends HTMLElement{constructor(){super(),this.inputValue=t=>{t.stopPropagation();const e=t.target;this.value=e?e.value:"",this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value}}))},this.change=()=>{this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))},this.focus=()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value}}))},this.checkout=()=>{};const t=this.attachShadow({mode:"closed"}),e=document.createElement("style");e.textContent='.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 .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-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 .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n',t.appendChild(e),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),t.appendChild(this._container)}static get observedAttributes(){return["label","disabled","name","pattern","required","placeholder","type"]}get value(){return this.getAttribute("value")}set value(t){!e(this)&&t?(this.setAttribute("value",t),this._container.setAttribute("value",t)):(this.removeAttribute("value"),this._container.removeAttribute("value"))}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){t?this.setAttribute("placeholder",t):this.removeAttribute("placeholder")}get required(){return this.getAttribute("required")}set required(t){t&&"false"!==t?this.setAttribute("required",""):this.removeAttribute("required")}get warning(){return this.getAttribute("warning")}set warning(t){t?this.setAttribute("warning",t):this.removeAttribute("warning")}get pattern(){return this.getAttribute("pattern")}set pattern(t){t&&"false"!==t?this.setAttribute("pattern",t):this.removeAttribute("pattern")}get disabled(){return e(this)}set disabled(e){t.includes(e)?(this.removeAttribute("disabled"),this._container.removeAttribute("disabled"),this._input.removeAttribute("disabled")):(this.setAttribute("disabled",""),this._container.setAttribute("disabled",""),this._input.setAttribute("disabled",""))}get label(){return this.getAttribute("label")||""}set label(t){this.setAttribute("label",t)}get name(){return this.getAttribute("name")||""}set name(t){this.setAttribute("name",t)}get icon(){return this.getAttribute("icon")}set icon(t){t?this.setAttribute("icon",t):this.removeAttribute("icon")}get type(){return this.getAttribute("type")}set type(t){t?this.setAttribute("type",t):this.removeAttribute("type")}listenPlaceholder(t,e){"placeholder"===t&&this._input&&(null!==e?this._input.setAttribute("placeholder",e):this._input.removeAttribute("placeholder"))}listenRequired(t,e){"required"===t&&this._input&&(e&&"false"!==e?this._input.setAttribute("required",""):this._input.removeAttribute("required"))}listenPattern(t,e){"pattern"===t&&this._input&&(e&&"false"!==e?this._input.setAttribute("pattern",e):this._input.removeAttribute("pattern"))}listenLabel(t,e){"label"===t&&this._input&&(null!==e?this._label?this._label.innerHTML=e:(this._label=document.createElement("label"),this._label.innerHTML=e,this._label.setAttribute("class","input-label"),this._container.appendChild(this._label)):(this._container.removeAttribute("label"),this._label&&(this._container.removeChild(this._label),this._label=void 0)))}listenType(t,e){"type"===t&&this._input&&(e?this._input.setAttribute("type",e):this._input.removeAttribute("type"))}connectedCallback(){this.value&&(this._input.value=this.value,this._container.setAttribute("value",this.value)),e(this)&&(this._container.setAttribute("disabled",""),this._input.setAttribute("disabled","")),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(t,e,i){this.listenPlaceholder(t,i),this.listenRequired(t,i),this.listenPattern(t,i),this.listenLabel(t,i)}}customElements.get("r-input")||customElements.define("r-input",s),function(){const t=document.createElement("template"),e=document.createElement("div");e.setAttribute("class","modal-content");const i=document.createElement("slot");i.setAttribute("name","modal-content"),e.appendChild(i),null==t||t.appendChild(e);class n extends HTMLElement{constructor(){super();const e=t.content,i=this.attachShadow({mode:"open"}),n=document.createElement("div"),s=document.createElement("div"),a=document.createElement("header"),r=document.createElement("span"),o=document.createElement("div"),l=document.createElement("footer"),d=document.createElement("xu-button"),c=document.createElement("xu-button");n.setAttribute("class","wrap"),s.setAttribute("class","xu-modal");let h=this.getAttribute("title");a.textContent=h,r.setAttribute("class","xu-close"),r.textContent="x",a.appendChild(r),s.appendChild(a),r.addEventListener("click",(()=>{n.style.display="none"})),s.appendChild(e.cloneNode(!0)),c.setAttribute("type","primary");const u=document.createElement("span");u.setAttribute("slot","btn-content"),u.textContent="确认",c.appendChild(u);const b=document.createElement("span");b.setAttribute("slot","btn-content"),b.textContent="取消",d.appendChild(b),l.appendChild(d),l.appendChild(c),s.appendChild(l),o.setAttribute("class","mask"),n.appendChild(o),n.appendChild(s);const p=document.createElement("style");this.getAttribute("width");const m=this.getAttribute("visible");p.textContent=`\n        .wrap {\n          position: fixed;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          top: 0;\n          display: ${"true"===m?"block":"none"}\n        }\n        // 忽略部分样式\n      `,i.appendChild(p),i.appendChild(n)}connectedCallback(t){console.log("insert dom",t)}disconnectedCallback(){console.log("Custom square element removed from page.")}adoptedCallback(){console.log("Custom square element moved to new page.")}attributeChangedCallback(t,e,i){var n;if(e&&this.shadowRoot){const t=[...this.shadowRoot.children];for(let e=0;e<t.length;e++)"DIV"===t[e].nodeName&&"wrap"===(null==(n=t[e])?void 0:n.className)&&(t[e].style.display="true"===i?"block":"none")}}static get observedAttributes(){return["visible"]}}window.customElements.define("xu-modal",n)}();class a extends HTMLElement{constructor(){super(),this._div=document.createElement("slot");const t=this.attachShadow({mode:"closed"}),e=document.createElement("style");e.textContent="",t.appendChild(e),t.appendChild(this._div)}static get observedAttributes(){return["label","key","disabled","icon"]}get label(){return this.getAttribute("label")||""}set label(t){this.setAttribute("label",t)}get icon(){return this.getAttribute("icon")}get key(){return this.getAttribute("key")}set key(t){t?this.setAttribute("key",t):this.removeAttribute("key")}get disabled(){return this.getAttribute("disabled")}set disabled(t){t&&"false"!==t?this.setAttribute("disabled",t):this.removeAttribute("disabled")}onClick(t){console.log("e",t)}connectedCallback(){this._div.addEventListener("click",this.onClick)}disconnectCallback(){}attributeChangedCallback(t,e,i){}}customElements.get("r-tab")||customElements.define("r-tab",a);class r extends HTMLElement{constructor(){super(),this.initTabHeaderKeyMapIndex=(t,e)=>{if(this.tabHeaderKeyMapIndex[t])throw new Error("tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性");this.tabHeaderKeyMapIndex[t]=e},this.setTabLine=t=>{if(t){const e=this.tabHeaderKeyMapIndex[t];this._line.style.setProperty("transform",`translateX(${100*e}%)`)}},this.setTabContent=t=>{if(t){const e=this.tabHeaderKeyMapIndex[t];this._wrap.style.setProperty("transform",`translateX(${-100*e}%)`)}},this.clickTabHead=t=>{const i=t.target,n=i.getAttribute("ran-key");!e(i)&&n&&(this.setAttribute("active",n),this.setTabLine(n),this.setTabContent(n))},this.initActive=()=>{const t=[...this._nav.children],i=t.filter((t=>!e(t))).shift();if(!i)return;const n=t.findIndex((t=>t===i)),s=(null==i?void 0:i.getAttribute("ran-key"))||`${n}`;if(null===this.active&&null!==s){this.setAttribute("active",`${s}`);const{width:t=0}=i.getBoundingClientRect();this._line.style.setProperty("width",`${t}px`),this.setTabLine(s),this.setTabContent(s)}},this.listenSlotChange=()=>{this._slot.assignedElements().forEach(((t,e)=>{const i=this.createTabHeader(t,e);this._nav.appendChild(i),i.addEventListener("click",this.clickTabHead)})),this.initActive()},this._container=document.createElement("div"),this._container.setAttribute("class","tab"),this._header=document.createElement("div"),this._header.setAttribute("class","tab-header"),this._nav=document.createElement("div"),this._nav.setAttribute("class","tab-header_nav"),this._line=document.createElement("div"),this._line.setAttribute("class","tab-header_line"),this._content=document.createElement("div"),this._content.setAttribute("class","tab-content"),this._wrap=document.createElement("div"),this._wrap.setAttribute("class","tab-content_wrap"),this._slot=document.createElement("slot"),this._wrap.appendChild(this._slot),this._content.appendChild(this._wrap),this._header.appendChild(this._nav),this._header.appendChild(this._line),this._container.appendChild(this._header),this._container.appendChild(this._content),this.tabHeaderKeyMapIndex={};const t=this.attachShadow({mode:"closed"}),i=document.createElement("style");i.textContent=".tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--themeColor, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}\n",t.appendChild(i),t.appendChild(this._container)}static get observedAttributes(){return["active","forceRender"]}get align(){return this.getAttribute("align")||"start"}set align(t){this.setAttribute("align",t)}get type(){return this.getAttribute("type")||"flat"}get active(){return this.getAttribute("active")}set active(t){t?(this.setAttribute("active",t),this.setTabLine(t),this.setTabContent(t)):this.removeAttribute("active")}set type(t){this.setAttribute("type",t)}createTabHeader(t,i){const n=t.getAttribute("label")||"",s=t.getAttribute("key")||`${i}`,a=t.getAttribute("type")||"text";this.initTabHeaderKeyMapIndex(s,i);const r=document.createElement("r-button");return r.setAttribute("class","tab-header_nav__item"),r.setAttribute("type",a),e(t)&&r.setAttribute("disabled",""),r.setAttribute("ran-key",s),r.innerHTML=n,r}connectedCallback(){this._slot.addEventListener("slotchange",this.listenSlotChange)}disconnectCallback(){this._slot.removeEventListener("slotchange",this.listenSlotChange)}attributeChangedCallback(t,e,i){e!==i&&this.dispatchEvent(new CustomEvent("change",{detail:{active:this.active}}))}}customElements.get("r-tabs")||customElements.define("r-tabs",r)}));
+//# sourceMappingURL=index.umd.cjs.map

package/dist/index.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.cjs","sources":["../utils/index.ts","../components/button/index.ts","../components/image/index.ts","../components/input/index.ts","../components/modal/index.ts","../components/tabPane/index.ts","../components/tabs/index.ts"],"sourcesContent":["export const falseList = [false, \"false\", null, undefined];\n/**\n  * @description: 判断这个元素上是否有disabled属性\n  * @param {Element} element\n  * @return {*}\n  */\nexport const isDisabled = (element: Element) => {\n  const status = element.hasAttribute('disabled')\n  const value = element.getAttribute('disabled')\n  if (status && !falseList.includes(value)) return true\n  return false\n}","import { isDisabled } from '@/utils/index'\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"disabled\", \"type\"];\n  }\n  _btn: HTMLDivElement;\n  constructor() {\n    super();\n    const slot = document.createElement(\"slot\");\n    this._btn = document.createElement(\"div\");\n    this._btn.appendChild(slot);\n    slot.setAttribute(\"class\", \"slot\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._btn);\n  }\n  get disabled() {\n    return isDisabled(this)\n  }\n  set disabled(value: boolean | string | undefined | null) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", '');\n    }\n  }\n  mousedown = (event: MouseEvent) => {\n    if (!this.disabled || this.disabled === 'false') {\n      const { left, top } = this.getBoundingClientRect();\n      this.style.setProperty(\"--ran-x\", event.clientX - left + \"px\");\n      this.style.setProperty(\"--ran-y\", event.clientY - top + \"px\");\n    }\n  };\n  mouseLeave = () => {\n    this.style.removeProperty(\"--ran-x\");\n    this.style.removeProperty(\"--ran-y\");\n  };\n  connectedCallback() {\n    this._btn.addEventListener(\"mousedown\", this.mousedown);\n    this._btn.addEventListener(\"mouseleave\", this.mouseLeave);\n  }\n  disconnectCallback() {\n    this._btn.removeEventListener(\"mousedown\", this.mousedown);\n    this._btn.removeEventListener(\"mouseleave\", this.mouseLeave);\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (name == \"disabled\" && this._btn) {\n      if (!newValue || newValue === \"false\") {\n        this._btn.setAttribute(\"disabled\", '');\n      } else {\n        this._btn.removeAttribute(\"disabled\");\n\n      }\n    }\n  }\n}\n\nfunction Custom() {\n  if (!customElements.get(\"r-button\")) {\n    customElements.define(\"r-button\", CustomElement);\n  }\n}\n\nexport default Custom()\n","import failImage from \"@/assets/image/failImage\";\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"fallback\"];\n  }\n  _image: HTMLImageElement | undefined;\n  _container: Element;\n  constructor() {\n    super();\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"r-image\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._container);\n  }\n  get fallback() {\n    return this.getAttribute(\"fallback\");\n  }\n  set fallback(value) {\n    if (value) {\n      this.setAttribute(\"fallback\", value);\n    } else {\n      this.removeAttribute(\"fallback\");\n    }\n  }\n\n  listenFallback(name: string, value: string) {\n    if (name === \"fallback\" && this._image) {\n      if (value) {\n        this._image.setAttribute(\"fallback\", value);\n      } else {\n        this._image.removeAttribute(\"fallback\");\n      }\n    }\n  }\n\n  connectedCallback() {\n    const src = this.getAttribute(\"src\") || \"\";\n    this._image = new Image();\n    this._image.src = src;\n    this._image.addEventListener(\"error\", () => {\n      if (this._image && this.fallback) {\n        this._image.src = this.fallback;\n      }\n    });\n    this._image.addEventListener(\"load\", () => {\n      if (this._image) {\n        this._container.appendChild(this._image);\n      }\n    });\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.listenFallback(name, newValue);\n  }\n}\nfunction Custom() {\n  if (!customElements.get(\"r-img\")) {\n    customElements.define(\"r-img\", CustomElement);\n  }\n}\n\nexport default Custom();\n","import { isDisabled, falseList } from '@/utils/index'\n\nclass CustomElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\n      \"label\",\n      \"disabled\",\n      \"name\",\n      \"pattern\",\n      \"required\",\n      \"placeholder\",\n      \"type\",\n    ];\n  }\n  private _container: HTMLDivElement;\n  private _label: HTMLLabelElement | undefined;\n  private _input: HTMLInputElement;\n  constructor() {\n    super();\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"input\");\n    this._input = document.createElement(\"input\");\n    this._input.setAttribute(\"class\", \"input-main\");\n    this._container.appendChild(this._input);\n    shadowRoot.appendChild(this._container);\n  }\n  /**\n   * @description: 获取input的值\n   * @return {String}\n   */\n  get value() {\n    return this.getAttribute(\"value\");\n  }\n  /**\n   * @description: 设置input的值\n   * @param {String} value\n   */\n  set value(value) {\n    if (!isDisabled(this) && value) {\n      this.setAttribute(\"value\", value);\n      this._container.setAttribute(\"value\", value);\n    } else {\n      this.removeAttribute(\"value\");\n      this._container.removeAttribute(\"value\");\n    }\n  }\n  /**\n   * @description: 获取input的占位字符\n   * @return {String}\n   */\n  get placeholder() {\n    return this.getAttribute(\"placeholder\");\n  }\n  /**\n   * @description: 设置input的占位字符\n   * @param {String} value\n   */\n  set placeholder(value) {\n    if (value) {\n      this.setAttribute(\"placeholder\", value);\n    } else {\n      this.removeAttribute(\"placeholder\");\n    }\n  }\n  /**\n   * @description: input是否为必选\n   * @return {String}\n   */\n  get required() {\n    return this.getAttribute(\"required\");\n  }\n  /**\n   * @description: 设置input是否为必选，除非设置成false，否则都是必填\n   * @param {*} value\n   */\n  set required(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"required\");\n    } else {\n      this.setAttribute(\"required\", \"\");\n    }\n  }\n  /**\n   * @description: 获取input校验失败的提示\n   * @return {String}\n   */\n  get warning() {\n    return this.getAttribute(\"warning\");\n  }\n  /**\n   * @description: 设置input校验失败的提示信息\n   * @param {String} value\n   */\n  set warning(value) {\n    if (!value) {\n      this.removeAttribute(\"warning\");\n    } else {\n      this.setAttribute(\"warning\", value);\n    }\n  }\n  /**\n   * @description: 获取校验的正则\n   * @return {String}\n   */\n  get pattern() {\n    return this.getAttribute(\"pattern\");\n  }\n  /**\n   * @description: 设置input校验的正则\n   * @param {*} value\n   */\n  set pattern(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"pattern\");\n    } else {\n      this.setAttribute(\"pattern\", value);\n    }\n  }\n  /**\n   * @description: 获取input上disabled属性\n   * @return {String | null}\n   */\n  get disabled() {\n    return isDisabled(this);\n  }\n  /**\n   * @description: 设置input的disabled属性\n   * @param {String} value\n   */\n  set disabled(value) {\n    if (falseList.includes(value)) {\n      this.removeAttribute(\"disabled\");\n      this._container.removeAttribute(\"disabled\");\n      this._input.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", \"\");\n      this._container.setAttribute(\"disabled\", \"\");\n      this._input.setAttribute(\"disabled\", \"\");\n    }\n  }\n  /**\n   * @description: 获取类似于Metiral Design的输入体验。\n   */\n  get label() {\n    return this.getAttribute(\"label\") || \"\";\n  }\n  /**\n   * @description: 设置类似于Metiral Design的输入体验。\n   */\n  set label(value: string) {\n    this.setAttribute(\"label\", value);\n  }\n  /**\n   * @description: 与form组件联动时，收集的属性名\n   * @return {String}\n   */\n  get name() {\n    return this.getAttribute(\"name\") || \"\";\n  }\n  /**\n   * @description: 设置name属性\n   * @param {string} value\n   */\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n  /**\n   * @description: 获取一个icon\n   * @return {String}\n   */\n  get icon() {\n    return this.getAttribute(\"icon\");\n  }\n  /**\n   * @description: 设置icon来表示标识\n   * @param {string|null} value\n   */\n  set icon(value) {\n    if (value) {\n      this.setAttribute(\"icon\", value);\n    } else {\n      this.removeAttribute(\"icon\");\n    }\n  }\n  /**\n   * @description: 获取input的类型\n   * @return {string|null}\n   */\n  get type() {\n    return this.getAttribute(\"type\");\n  }\n  /**\n   * @description: 设置input的类型\n   * @param {string|null} value\n   */\n  set type(value) {\n    if (value) {\n      this.setAttribute(\"type\", value);\n    } else {\n      this.removeAttribute(\"type\");\n    }\n  }\n\n  /**\n   * @description: 原生的input方法\n   * @param {Event} event\n   */\n  inputValue = (event: Event) => {\n    event.stopPropagation();\n    const target = event.target as HTMLInputElement;\n    this.value = target ? target.value : \"\";\n    this.dispatchEvent(\n      new CustomEvent(\"input\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 增加change方法\n   */\n  change = () => {\n    this.dispatchEvent(\n      new CustomEvent(\"change\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 增加focus方法\n   */\n  focus = () => {\n    this.dispatchEvent(\n      new CustomEvent(\"focus\", {\n        detail: {\n          value: this.value,\n        },\n      })\n    );\n  };\n  /**\n   * @description: 检查校验是否成功\n   * @return {Boolean}\n   */\n  checkout = () => {};\n  /**\n   * @description: 监听placeholder属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenPlaceholder(name: string, value: string) {\n    if (name === \"placeholder\" && this._input) {\n      if (value !== null) {\n        this._input.setAttribute(\"placeholder\", value);\n      } else {\n        this._input.removeAttribute(\"placeholder\");\n      }\n    }\n  }\n  /**\n   * @description: 监听required属性函数\n   * @param {string} name\n   * @param {string} value\n   * @return {*}\n   */\n  listenRequired(name: string, value: string) {\n    if (name === \"required\" && this._input) {\n      if (value && value !== \"false\") {\n        this._input.setAttribute(\"required\", \"\");\n      } else {\n        this._input.removeAttribute(\"required\");\n      }\n    }\n  }\n  /**\n   * @description: 监听pattern属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenPattern(name: string, value: string) {\n    if (name === \"pattern\" && this._input) {\n      if (value && value !== \"false\") {\n        this._input.setAttribute(\"pattern\", value);\n      } else {\n        this._input.removeAttribute(\"pattern\");\n      }\n    }\n  }\n  /**\n   * @description: 监听label属性函数\n   * @param {string} name\n   * @param {string} value\n   */\n  listenLabel(name: string, value: string) {\n    if (name === \"label\" && this._input) {\n      if (value !== null) {\n        if (this._label) {\n          this._label.innerHTML = value;\n        } else {\n          this._label = document.createElement(\"label\");\n          this._label.innerHTML = value;\n          this._label.setAttribute(\"class\", \"input-label\");\n          this._container.appendChild(this._label);\n        }\n      } else {\n        this._container.removeAttribute(\"label\");\n        if (this._label) {\n          this._container.removeChild(this._label);\n          this._label = undefined;\n        }\n      }\n    }\n  }\n  /**\n   * @description: 监听type属性\n   * @param {string} name\n   * @param {string} value\n   */\n  listenType(name: string, value: string) {\n    if (name === \"type\" && this._input) {\n      if (value) {\n        this._input.setAttribute(\"type\", value);\n      } else {\n        this._input.removeAttribute(\"type\");\n      }\n    }\n  }\n  connectedCallback() {\n    // 如果一开始就设置了input的值，则初始化input的值\n    if (this.value) {\n      this._input.value = this.value;\n      this._container.setAttribute(\"value\", this.value);\n    }\n    if (isDisabled(this)) {\n      this._container.setAttribute(\"disabled\", \"\");\n      this._input.setAttribute(\"disabled\", \"\");\n    }\n    if (this.type) {\n      this._input.setAttribute(\"type\", this.type);\n    }\n    this._input.addEventListener(\"input\", this.inputValue);\n    this._input.addEventListener(\"change\", this.change);\n    this._input.addEventListener(\"focus\", this.focus);\n  }\n  disconnectCallback() {\n    this._input.removeEventListener(\"input\", this.inputValue);\n    this._input.removeEventListener(\"change\", this.change);\n  }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.listenPlaceholder(name, newValue);\n    this.listenRequired(name, newValue);\n    this.listenPattern(name, newValue);\n    this.listenLabel(name, newValue);\n  }\n}\n\nfunction Custom() {\n  if (!customElements.get(\"r-input\")) {\n    customElements.define(\"r-input\", CustomElement);\n  }\n}\n\nexport default Custom()\n","\nfunction Modal() {\n  const template = document.createElement('template')\n  const div = document.createElement('div')\n  div.setAttribute('class', 'modal-content')\n  const slot = document.createElement('slot')\n  slot.setAttribute('name', 'modal-content')\n  div.appendChild(slot)\n  template?.appendChild(div)\n  class Modal extends HTMLElement {\n    constructor() {\n      super();\n      // 获取模板内容\n      const templateContent = template.content;\n\n      const shadowRoot = this.attachShadow({ mode: 'open' });\n      const wrap = document.createElement('div');\n      const modal = document.createElement('div');\n      const header = document.createElement('header');\n      const btnClose = document.createElement('span');\n      const mask = document.createElement('div');\n      const footer = document.createElement('footer');\n      const btnCancel = document.createElement('xu-button');\n      const btnOk = document.createElement('xu-button');\n\n      // wrap\n      wrap.setAttribute('class', 'wrap');\n\n      // modal\n      modal.setAttribute('class', 'xu-modal');\n\n      // header\n      let title = this.getAttribute('title');\n      header.textContent = title;\n      btnClose.setAttribute('class', 'xu-close');\n      btnClose.textContent = 'x';\n      header.appendChild(btnClose);\n      modal.appendChild(header);\n\n      btnClose.addEventListener('click', () => {\n        wrap.style.display = 'none';\n      })\n\n      // content\n      modal.appendChild(templateContent.cloneNode(true));\n\n      // footer\n      btnOk.setAttribute('type', 'primary');\n      const slot1 = document.createElement('span');\n      slot1.setAttribute('slot', 'btn-content');\n      slot1.textContent = '确认';\n      btnOk.appendChild(slot1);\n\n      const slot2 = document.createElement('span');\n      slot2.setAttribute('slot', 'btn-content');\n      slot2.textContent = '取消';\n      btnCancel.appendChild(slot2);\n\n      footer.appendChild(btnCancel);\n      footer.appendChild(btnOk);\n      modal.appendChild(footer);\n\n      // mask\n      mask.setAttribute('class', 'mask');\n      wrap.appendChild(mask);\n      wrap.appendChild(modal);\n\n      // 创建样式\n      const style = document.createElement('style');\n      const width = this.getAttribute('width');\n      const isVisible = this.getAttribute('visible');\n      // 为shadow Dom添加样式\n      style.textContent = `\n        .wrap {\n          position: fixed;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          top: 0;\n          display: ${isVisible === 'true' ? 'block' : 'none'}\n        }\n        // 忽略部分样式\n      `\n      shadowRoot.appendChild(style);\n      shadowRoot.appendChild(wrap);\n    }\n    connectedCallback(el: any) {\n      console.log('insert dom', el)\n    }\n    disconnectedCallback() {\n      console.log('Custom square element removed from page.');\n    }\n    adoptedCallback() {\n      console.log('Custom square element moved to new page.');\n    }\n    attributeChangedCallback(name: string, oldValue: string | number | undefined, newValue: string | number | undefined) {\n      if (oldValue && this.shadowRoot) {\n        const children = [...this.shadowRoot.children] as Array<HTMLElement>\n        for (let i = 0; i < children.length; i++) {\n          if (children[i].nodeName === 'DIV' && children[i]?.className === 'wrap') {\n            if (newValue === 'true') {\n              children[i].style.display = 'block';\n            } else {\n              children[i].style.display = 'none';\n            }\n          }\n        }\n      }\n    }\n    // 如果需要在元素属性变化后，触发 attributeChangedCallback()回调函数，\n    // 你必须监听这个属性。这可以通过定义observedAttributes() get函数来实现\n    static get observedAttributes() {\n      return ['visible'];\n    }\n  }\n  window.customElements.define('xu-modal', Modal);\n}\nexport default Modal()","class TabPane extends HTMLElement {\n  static get observedAttributes() {\n    return [\"label\", \"key\", \"disabled\", \"icon\"];\n  }\n  _div: HTMLElement;\n  constructor() {\n    super();\n    this._div = document.createElement(\"slot\");\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._div);\n  }\n  get label() {\n    return this.getAttribute(\"label\") || \"\";\n  }\n  set label(value) {\n    this.setAttribute(\"label\", value);\n  }\n  get icon() {\n    return this.getAttribute(\"icon\");\n  }\n\n  get key() {\n    return this.getAttribute(\"key\");\n  }\n  set key(value) {\n    if (value) {\n      this.setAttribute(\"key\", value);\n    } else {\n      this.removeAttribute(\"key\");\n    }\n  }\n  get disabled() {\n    return this.getAttribute(\"disabled\");\n  }\n  set disabled(value) {\n    if (!value || value === \"false\") {\n      this.removeAttribute(\"disabled\");\n    } else {\n      this.setAttribute(\"disabled\", value);\n    }\n  }\n  onClick(e: Event) {\n    console.log('e',e);\n  }\n  connectedCallback() {\n    this._div.addEventListener('click', this.onClick)\n  }\n  disconnectCallback() { }\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (oldValue !== newValue && newValue) {\n      // const { emitLabel } = this.parentNode;\n      // if (name === \"label\") {\n      //   emitLabel;\n      //   this.parentNode?.update &&\n      //     this.parentNode.updatalabel(this.key, newValue);\n      // }\n      // if (name === \"disabled\") {\n      //   this.parentNode?.updatadisabled &&\n      //     this.parentNode.updatadisabled(this.key, newValue);\n      // }\n    }\n  }\n}\n\nfunction CustomElement() {\n  if (!customElements.get(\"r-tab\")) {\n    customElements.define(\"r-tab\", TabPane);\n  }\n}\n\nexport default CustomElement()\n","import { isDisabled } from '@/utils/index'\nclass Tabs extends HTMLElement {\n  static get observedAttributes() {\n    return [\"active\", 'forceRender'];\n  }\n  _container: HTMLDivElement;\n  _header: HTMLDivElement;\n  _nav: HTMLDivElement;\n  _line: HTMLDivElement;\n  _content: HTMLDivElement;\n  _wrap: HTMLDivElement;\n  _slot: HTMLSlotElement;\n  tabHeaderKeyMapIndex: Record<string, number>;\n  constructor() {\n    super();\n    /**\n     * <div class=\"tab\">\n     *   <div class=\"tab-header\">\n     *      <div class=\"tab-header_nav\">...</div>\n     *      <div class=\"tab-header_line\"></div>\n     *   </div>\n     *   <div class=\"tab-content\">\n     *      <div class=\"tab-content_wrap\">\n     *         <slot></slot>\n     *      </div>\n     *   </div>\n     * </div>\n     */\n    this._container = document.createElement(\"div\");\n    this._container.setAttribute(\"class\", \"tab\");\n    this._header = document.createElement(\"div\");\n    this._header.setAttribute(\"class\", \"tab-header\");\n    this._nav = document.createElement(\"div\");\n    this._nav.setAttribute(\"class\", \"tab-header_nav\");\n    this._line = document.createElement(\"div\");\n    this._line.setAttribute(\"class\", \"tab-header_line\");\n    this._content = document.createElement(\"div\");\n    this._content.setAttribute(\"class\", \"tab-content\");\n    this._wrap = document.createElement(\"div\");\n    this._wrap.setAttribute(\"class\", \"tab-content_wrap\");\n    this._slot = document.createElement(\"slot\");\n    this._wrap.appendChild(this._slot);\n    this._content.appendChild(this._wrap);\n    this._header.appendChild(this._nav);\n    this._header.appendChild(this._line);\n    this._container.appendChild(this._header);\n    this._container.appendChild(this._content);\n\n    this.tabHeaderKeyMapIndex = {}\n\n    const shadowRoot = this.attachShadow({ mode: \"closed\" });\n    shadowRoot.appendChild(this._container);\n  }\n\n  get align() {\n    return this.getAttribute(\"align\") || \"start\";\n  }\n\n  set align(value) {\n    this.setAttribute(\"align\", value);\n  }\n\n  get type() {\n    return this.getAttribute(\"type\") || \"flat\";\n  }\n\n  get active() {\n    return this.getAttribute(\"active\");\n  }\n\n  set active(value) {\n    if (value) {\n      this.setAttribute(\"active\", value);\n      this.setTabLine(value)\n      this.setTabContent(value)\n    } else {\n      this.removeAttribute(\"active\");\n    }\n  }\n\n  set type(value) {\n    this.setAttribute(\"type\", value);\n  }\n  /**\n   * @description: 构建tabPane组件key值和index的映射，同时判断一个tabs下的tabPane key值不能重复\n   * @param {string} key\n   * @param {number} index\n   */\n  initTabHeaderKeyMapIndex = (key: string, index: number) => {\n    const value = this.tabHeaderKeyMapIndex[key]\n    if (value) {\n      throw new Error('tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性')\n    } else {\n      this.tabHeaderKeyMapIndex[key] = index\n    }\n  }\n  /**\n   * @description: 根据传入的tabPane生成tabs的头部\n   * @param {Element} tabPane\n   * @param {number} index\n   * @return {Element}\n   */\n  createTabHeader(tabPane: Element, index: number) {\n    const label = tabPane.getAttribute(\"label\") || '';\n    const key = tabPane.getAttribute('key') || `${index}`\n    const type = tabPane.getAttribute('type') || 'text'\n    this.initTabHeaderKeyMapIndex(key, index)\n    const tabHeader = document.createElement('r-button')\n    tabHeader.setAttribute('class', 'tab-header_nav__item')\n    tabHeader.setAttribute('type', type)\n    isDisabled(tabPane) && tabHeader.setAttribute('disabled', '')\n    tabHeader.setAttribute('ran-key', key)\n    tabHeader.innerHTML = label\n    return tabHeader\n  }\n  /**\n   * @description: 通过key值设置tabLine的位置\n   * @param {string} key\n   */\n  setTabLine = (key: string) => {\n    if (key) {\n      const index = this.tabHeaderKeyMapIndex[key]\n      this._line.style.setProperty('transform', `translateX(${100 * index}%)`)\n    }\n  }\n  /**\n   * @description: 通过传入的key值设置tabContent\n   */\n  setTabContent = (key: string) => {\n    if (key) {\n      const index = this.tabHeaderKeyMapIndex[key]\n      this._wrap.style.setProperty('transform', `translateX(${index * -100}%)`)\n    }\n  }\n  /**\n   * @description: 根据点击设置tabLine的位置\n   * @param {Event} e\n   * @param {number} index\n   * @param {number} width\n   */\n  clickTabHead = (e: Event) => {\n    const tabHeader = e.target as Element\n    const key = tabHeader.getAttribute('ran-key')\n    const disabled = isDisabled(tabHeader)\n    if (!disabled && key) {\n      this.setAttribute('active', key)\n      this.setTabLine(key)\n      this.setTabContent(key)\n    }\n  }\n  /**\n   * @description: 初始化tabs的active属性和tabLine,tabContent\n   */\n  initActive = () => {\n    const tabHeaderList = [...this._nav.children]\n    const initTabHeader = tabHeaderList.filter(item => !isDisabled(item)).shift()\n    if (!initTabHeader) return\n    const index = tabHeaderList.findIndex(item => item === initTabHeader)\n    const key = initTabHeader?.getAttribute('ran-key') || `${index}`\n    if (this.active === null && key !== null) {\n      this.setAttribute('active', `${key}`)\n      const { width = 0 } = initTabHeader.getBoundingClientRect()\n      this._line.style.setProperty(\"width\", `${width}px`);\n      this.setTabLine(key)\n      this.setTabContent(key)\n    }\n  }\n  /**\n   * @description: 监听slot组件的添加/删除/替换操作，进行tabs初始化\n   * @return {*}\n   */\n  listenSlotChange = () => {\n    const slots = this._slot.assignedElements();\n    slots.forEach((item, index) => {\n      const tabPane = this.createTabHeader(item, index)\n      this._nav.appendChild(tabPane)\n      tabPane.addEventListener('click', this.clickTabHead)\n    });\n    this.initActive()\n  };\n\n  connectedCallback() {\n    this._slot.addEventListener(\"slotchange\", this.listenSlotChange);\n  }\n\n  disconnectCallback() {\n    this._slot.removeEventListener(\"slotchange\", this.listenSlotChange);\n  }\n\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (oldValue !== newValue) {\n      this.dispatchEvent(new CustomEvent('change', {\n        detail: {\n          active: this.active,\n        }\n      }));\n    }\n  }\n}\n\nfunction CustomElement() {\n  if (!customElements.get(\"r-tabs\")) {\n    customElements.define(\"r-tabs\", Tabs);\n  }\n}\n\nexport default CustomElement();\n"],"names":["falseList","isDisabled","element","status","hasAttribute","value","getAttribute","includes","CustomElement","HTMLElement","constructor","this","mousedown","event","disabled","left","top","getBoundingClientRect","style","setProperty","clientX","clientY","mouseLeave","removeProperty","slot","document","createElement","_btn","appendChild","setAttribute","shadowRoot","attachShadow","mode","F7170EE498E0DD32CBDCB63FBA8F75CC","textContent","observedAttributes","removeAttribute","connectedCallback","addEventListener","disconnectCallback","removeEventListener","attributeChangedCallback","name","oldValue","newValue","customElements","get","define","_container","fallback","listenFallback","_image","src","Image","inputValue","stopPropagation","target","dispatchEvent","CustomEvent","detail","change","focus","checkout","_input","placeholder","required","warning","pattern","label","icon","type","listenPlaceholder","listenRequired","listenPattern","listenLabel","_label","innerHTML","removeChild","listenType","template","div","Modal","templateContent","content","wrap","modal","header","btnClose","mask","footer","btnCancel","btnOk","title","display","cloneNode","slot1","slot2","isVisible","el","console","log","disconnectedCallback","adoptedCallback","children","i","length","nodeName","_a","className","window","TabPane","_div","key","onClick","e","Tabs","initTabHeaderKeyMapIndex","index","tabHeaderKeyMapIndex","Error","setTabLine","_line","setTabContent","_wrap","clickTabHead","tabHeader","initActive","tabHeaderList","_nav","initTabHeader","filter","item","shift","findIndex","active","width","listenSlotChange","_slot","assignedElements","forEach","tabPane","createTabHeader","_header","_content","align"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1 @@
+: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 .3s cubic-bezier(.645,.045,.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}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(: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 .3s,opacity .8s}:host .slot{display:block;margin:4px 15px}.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 .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-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 .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}.tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--themeColor, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}

package/dist/typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.less"
+declare module '@/assets'
+declare module '@/components'
+declare module '@/plugins'

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export declare const falseList: (string | boolean | null | undefined)[];
+/**
+  * @description: 判断这个元素上是否有disabled属性
+  * @param {Element} element
+  * @return {*}
+  */
+export declare const isDisabled: (element: Element) => boolean;

package/docs/button/index.md

@@ -0,0 +1,25 @@
+# Button 按钮
+按钮用于开始一个即时操作。
+
+## 代码演示
+
+<div style="display:inline-block;margin-right: 8px;margin-bottom: 12px;">
+    <r-button type="primary"><span slot="r-btn_content">主要按钮</span></r-button>
+</div>
+<div style="display:inline-block;margin-right: 8px;margin-bottom: 12px;">
+    <r-button type="warning"><span slot="r-btn_content">警告按钮</span></r-button>
+</div>
+<div style="display:inline-block;margin-right: 8px;margin-bottom: 12px;">
+    <r-button><span slot="r-btn_content">默认按钮</span></r-button>
+</div>
+<div style="display:inline-block;margin-right: 8px;margin-bottom: 12px;">
+    <r-button type="text"><span slot="r-btn_content">文本按钮</span></r-button>
+</div>
+
+
+```xml
+ <r-button type="primary"><span slot="r-btn_content">主要按钮</span></r-button>
+ <r-button type="warning"><span slot="r-btn_content">警告按钮</span></r-button>
+ <r-button type="text"><span slot="r-btn_content">文本按钮</span></r-button>
+ <r-button><span slot="r-btn_content">默认按钮</span></r-button>
+```

package/docs/image/index.md

@@ -0,0 +1,9 @@
+# Image 图片
+
+## 代码演示
+
+```xml
+ <r-img src="" fallback=""></r-img>
+ ```
+
+ <r-img fallback="data:image/png;base64,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"></r-img>

package/docs/input/index.md

@@ -0,0 +1,146 @@
+# Input 输入框
+通过鼠标或键盘输入内容，是最基础的表单域的包装。
+
+## 代码演示
+
+<div style="width:300px;">
+    输入框：<r-input></r-input>
+</div>
+
+
+```xml
+<r-input></r-input>
+```
+
+## 属性
+### 标签`label`
+
+提供类似于Metiral Design的输入体验。
+
+<r-input label="user"></r-input>
+
+```html
+<r-input label="user"></r-input>
+```
+
+### 占位`placeholder`
+
+与原生`placeholder`一致。
+
+<r-input placeholder="user"></r-input>
+
+```html
+<r-input placeholder="user"></r-input>
+```
+
+### 禁用`disabled`
+
+通过`disabled`可以禁用输入框，禁用后该按钮上的事件失效。
+
+<r-input label="user" disabled></r-input>
+
+```html
+<r-input label="user" disabled></r-input>
+```
+
+### 值`value`
+
+设置或返回输入框的`value`属性值。
+
+<r-input value="1234"></r-input>
+
+### 类型`type`
+
+目前支持`password`、`number`这几种类型，设置后会出现额外的`ui`控件。
+
+#### 密码输入框
+
+支持密码明文和密文切换。
+
+<r-input icon="lock" type="password"></r-input>
+
+```html
+<r-input icon="lock" type="password"></r-input>
+```
+
+### 图标`icon`
+
+可以设置一个`icon`来表示标签标识。
+
+<r-input icon="user"></r-input>
+
+```html
+<r-input icon="user"></r-input>
+```
+
+#### 数字输入框
+
+数字输入框，类似于原生`input[type=number]`，支持`min`、`max`、`step`属性，支持键盘上下键切换数字。
+
+<r-input type="number" min="-10" max="10" step="0.5" ></r-input>
+
+```html
+<r-input type="number" min="-10" max="10" step="0.5" ></r-input>
+```
+
+### 必填项`required`
+
+<r-input icon="user" required placeholder="required"></r-input>
+
+```html
+<r-input icon="user" required placeholder="required"></r-input>
+```
+
+### 正则校验pattern
+
+设置`pattern`属性，这是一个正则。
+
+<r-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号"></r-input>
+
+```html
+<r-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号"></r-input>
+```
+
+### 自定义错误提示
+可以自定义提示信息`warning`
+
+<r-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号" warning="手机号格式有误"></r-input>
+
+```html
+<r-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号" warning="手机号格式有误"></r-input>
+```
+### name属性名
+跟form组件联动的时候有效，form提交时收集的字段名字
+
+## 事件`event`
+
+常见的回调事件。
+
+### onchange
+
+文本改变的时候触发（失焦后）。
+
+<r-input onchange="XyMessage.info(this.value)"></r-input>
+
+```html
+<r-input onchange="fn(event)"></r-input>
+```
+
+### oninput
+
+输入时触发。
+<r-input oninput="XyMessage.info(this.value)"></r-input>
+
+```html
+<r-input oninput="fn(event)"></r-input>
+```
+
+### checkout
+
+主动校验，弹出提示信息。
+
+<r-input required placeholder="required"></r-input>
+
+```js
+input.checkout();
+```

package/docs/tabs/index.md

@@ -0,0 +1,121 @@
+# Tab
+
+## 代码展示
+
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab label="tab2">tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+
+```xml
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab label="tab2">tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+```
+
+## 属性
+
+### 名称`label`
+
+每个`r-tab`需要指定一个名称`label`，用于显示标签头。
+
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab label="tab2">tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+
+```xml
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab label="tab2">tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+```
+
+### 禁用`disabled`
+
+每个`r-tab`可以指定`disabled`属性，用来禁用该标签页。
+
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab id="tab-content-disabled" label="tab2" disabled>tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+
+```xml
+<r-tabs>
+    <r-tab label="tab1">tab1</r-tab>
+    <r-tab label="tab2" disabled>tab2</r-tab>
+    <r-tab label="tab3">tab3</r-tab>
+</r-tabs>
+```
+
+### 标识`key`,`active`
+
+每个`r-tab`需要指定一个标识`key`，没有会默认以序列号为`key`，
+
+`active`作用在`r-tabs`上，可以指定切换到具体标签页，也可以指定初始值。
+
+<r-tabs active="B">
+    <r-tab label="tab1" key="A">tab1</r-tab>
+    <r-tab label="tab2" key="B">tab2</r-tab>
+    <r-tab label="tab3" key="C">tab3</r-tab>
+</r-tabs>
+
+```html
+<r-tabs active="B">
+    <r-tab label="tab1" key="A">tab1</r-tab>
+    <r-tab label="tab2" key="B">tab2</r-tab>
+    <r-tab label="tab3" key="C">tab3</r-tab>
+</r-tabs>
+```
+
+### 图标`icon`
+
+
+每个`r-tab`可以指定`icon`，配合`label`实现图标加文字的效果。
+
+<r-tabs>
+    <r-tab label="home" icon="home">tab1</r-tab>
+    <r-tab label="message" icon="message">tab2</r-tab>
+    <r-tab label="user" icon="user">tab3</r-tab>
+</r-tabs>
+
+```html
+<r-tabs>
+    <r-tab label="home" icon="home">tab1</r-tab>
+    <r-tab label="message" icon="message">tab2</r-tab>
+    <r-tab label="user" icon="user">tab3</r-tab>
+</r-tabs>
+```
+
+也可以单独指定`icon`，不使用`label`。
+
+<r-tabs>
+    <r-tab icon="home">tab1</r-tab>
+    <r-tab icon="message">tab2</r-tab>
+    <r-tab icon="user">tab3</r-tab>
+</r-tabs>
+
+```html
+<r-tabs>
+    <r-tab icon="home">tab1</r-tab>
+    <r-tab icon="message">tab2</r-tab>
+    <r-tab icon="user">tab3</r-tab>
+</r-tabs>
+```
+
+### 风格`type`
+
+### 对齐`align`
+
+## 事件`event`
+
+### onchange 
+
+切换完成时触发。
+