Coder Social home page Coder Social logo

xboxyan / xy-ui Goto Github PK

View Code? Open in Web Editor NEW
1.2K 17.0 161.0 13.16 MB

🎨面向未来的原生 web components UI组件库

Home Page: https://xy-ui.codelabo.cn/

License: MIT License

HTML 8.33% JavaScript 84.78% CSS 6.89%
web-components ui-components html5 javascript keyboard shadow-dom custom-elements xy-ui webcomponents giscus

xy-ui's Issues

使用cdn引入情况下，svg图标加载失败 

attributeChangedCallback (name, oldValue, newValue) {
        if( name == 'name' && this.use){
            this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `../iconfont/icon.svg#icon-${newValue}`);
        }
        if( name == 'path' && this.d){
            this.d.setAttribute("d", newValue);
        }
        if( name == 'color' && this.icon){
            this.icon.style.color = newValue;
        }
        if( name == 'size' && this.icon){
            this.icon.style.fontSize = newValue + 'px';
        }
    }
}
../iconfont路径是本地路径
网络请求svg路径url为 file:///F:/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/iconfont/icon.svg

设置 input 步进 为小数时，会发生计算错误

问题描述

设置 input 步进 为小数时，会发生计算错误

复现

<xy-input id="activity-chance" name="title" 
label="中奖率" required errordir="top" errortips="请输入中奖率"
 type="number" min="0" max="100" step="0.01"></xy-input>

从 0.2 按 0.01 步进时会得到 0.21000000000000002

效果

步进前
image

步进 0.01 后
image

版本 1.3.2

暂时的解决方案,针对4位以内的小数
仍会出现精度问题，勉强使用
直接修改了 xy-input.js 440 行
源文件

set value(value) {
        this.input.value = value;
        this.checkValidity();
        this.dispatchEvent(new CustomEvent('change',{
            detail:{
                value:this.value
            }
        }));
    }

修改后

set value(value) {
        if(typeof(value)==='number' ){
            this.input.value = Math.floor(value*10000)/10000;
            this.checkValidity();
            this.dispatchEvent(new CustomEvent('change',{
                detail:{
                    value:Math.floor(this.value*10000)/10000
                }
            }));
        }else{
            this.input.value = value;
            this.checkValidity();
            this.dispatchEvent(new CustomEvent('change',{
                detail:{
                    value:this.value
                }
            }));
        }
    }

xy-tab 内部的 xy-dialog 组件大小会被限制，无法铺满全屏

问题描述

当 xy-dialog 组件放在 xy-tab 内部的时候，开启 xy-dialog 后 ，xy-dialog 的大小不会超出 xy-tab 的宽高

在多层组件嵌套时， xy-dialog 所在的组件会是 xy-tab 组件的 tab 之一，
此时 xy-dialog 将不可避免的嵌套在 xy-tab 内部,
如果 xy-tab 所在的组件没有全屏宽高，其内部的 xy-dialog 也将无法铺满全屏

示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .wrapper {
      display: flex;
      width: 100vw;
      height: 50vh;
    }

    .top {
      background-color: #3fceff;
    }

    .bottom {
      background-color: #f1db87;
    }
  </style>
</head>
<body>

<script type="module" async>
  import './xy_ui/index.js'
</script>

<div class="wrapper top">
  top
</div>
<div class="wrapper bottom">
  bottom
  <xy-tab>
    <xy-tab-content label="tab1">
      <xy-dialog class="dialog" title="dialog" footer="false">

      </xy-dialog>
    </xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
  </xy-tab>
</div>

<script>
  window.onload = function () {
    document.querySelector('.dialog').open = true
  }

</script>

</body>
</html>

image

期望行为

在多层组件嵌套时，xy-tab 内部的 xy-dialog 开启时默认铺满屏幕

版本 1.3.3

传统项目应用不了

我公司的项目用的layui，然后layui它的模块化是另类的，没办法用webpack打包。然后我用cdn的方式引用（script），发现报错，因为xy-ui/index.jx用了import ，然后我把单个js文件引入，然后把export和import去掉，发现可以使用。

Migration to Typescript

Hi,
it's an awesome and simple web component UI library, with very useful widgets and ready to use. I'm working on a version in Typescript to have more control over the code, and I also moved the application styles engine in a dedicated sass files.

I still have work to do to clean up the code and have simple and clear interfaces in Typescript. But that's what I already have ...

https://i.imgur.com/cLvnxQf.png
image

xy-select 在特定 web component 组件内使用时会失效

问题描述

xy-select 在多层组件嵌套时，点击后不会显示下拉列表。
查看元素发现是因为在点击后 xy-select 内部的 xy-button 元素的 data-show 属性值被动态赋值后仍然为 false

image

目前这种情况分别出现在我的2个项目内，均为原生项目，均使用 web component.

由于嵌套非常复杂，暂时写不出复现 demo. 试过简单的嵌套是正常的。

版本 1.3.2

可能的原因

测试发现 xy-select 组件只要放在我写的 web component 组件内,就会失效
示例 在 LayOut 组件内使用 xy-select 导致 xy-select 下拉无法被激活

(function () {
  class LayOut extends HTMLElement {
    static get observedAttributes() {
      return ['acitve-title', 'active-sub-title']
    }

    constructor() {
      super()
      this.attachShadow({mode: 'open'})
      this.shadowRoot.innerHTML = `
        <style>
        
        </style>
        
        <div class="wrapper">
          <xy-select>
              <xy-option value="1">Option1</xy-option>
              <xy-option value="2">Option2</xy-option>
              <xy-option value="3">Option3</xy-option>
          </xy-select>
       
        </div>
      `

      this._a = ''
    }

    connectedCallback() {
    }

    disconnectedCallback() {

    }

    attributeChangedCallback(attr, oldVal, newVal) {
      // const attribute = attr.toLowerCase()
      // if (attribute === 'descriptions') {
      //   console.log(1)
      //   this.render(newVal)
      // }
    }

  }

  const FrozenLayOut = Object.freeze(LayOut);
  customElements.define('lay-out', FrozenLayOut);
})()

请问 Web Components 开发过程中，如何解决写在 js 文件中的 template 提示问题呢？

请问 Web Components 开发过程中，如何解决写在 js 文件中的 template 提示问题呢？
譬如 VS Code 里安装插件写 React JSX 会有标签提示，而看了下您写的代码都是在 js 里直接字符串渲染。
请问像这类似有辅助的提示工具吗？

const template = document.createElement("template");
template.innerHTML = `
<style>
  ...
</style>
`;

还是说直接硬写？

动态修改 xy-input 组件的 min 属性不生效

错误描述

<xy-input name="totalNumber" label="" required errordir="right" errortips="请输入" 
               type="number" min="10" step="1"></xy-input>

input.setAttribute('min', 10)

查看 xy-input 的 dom min 属性已经修改，但是输入小于10的数字不会验证失败

期望

由于 xy-input 的 min 属性可能由父组件初始化，会在父组件挂载的时候更新自己的 min 属性
可以动态修改 xy-input 的 min 属性

替代方案

暂时通过重新插入新的 完整 xy-input 标签解决

版本 1.3.2

import引入存在问题 

  <script type="module">
    import './components/xy-checkbox.js'
  </script>

  <xy-checkbox checked></xy-checkbox>

  <script>
    document.querySelector('xy-checkbox').checked // undefined
  </script>

浏览器给出的是undefined，而预期是true。
去掉xy-checkbox.js中的export语法，采用同步script脚本引入，一切正常。
估计是module异步的原因导致的？

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.