xboxyan / xy-ui Goto Github PK

下载该工程到本地，使用docsify serve docs命令开启之后，为啥没有像你的https://xy-ui.codelabo.cn/docs/#/xy-button一样有交互呢，都变成了文字呢

https://xy-ui.codelabo.cn/docs/#/xy-rate

Description

https://xy-ui.codelabo.cn/docs/#/xy-input

Description

https://xy-ui.codelabo.cn/docs/#/xy-loading

Description

https://xy-ui.codelabo.cn/docs/#/themeColor

Description

https://xy-ui.codelabo.cn/docs/#/xy-img

Description

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

https://xy-ui.codelabo.cn/docs/#/xy-table

Description

https://xy-ui.codelabo.cn/docs/#/xy-slider

Description

https://xy-ui.codelabo.cn/docs/#/xy-select

Description

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

https://xy-ui.codelabo.cn/docs/#/xy-textarea

Description

https://xy-ui.codelabo.cn/docs/#/xy-form

Description

看了一下作品 , 能在 vite 中运行 , 就是会有一堆的提示 , 但是能正常的使用 , 后面准备使用到 vue 项目中

https://xy-ui.codelabo.cn/docs/#/xy-pagination

Description

错误描述

<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

https://xy-ui.codelabo.cn/docs/#/

Description

问题描述

设置 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

效果

步进前

步进 0.01 后

版本 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
                }
            }));
        }
    }

大佬这个组件库实在是太棒了，是我目前看到的最好的 web component ui 组件库

完全的标准 web component 语法，全平台兼容，美观，好用，隔离。

参照 https://ant.design/components/date-picker-cn/

我也在给公司开发 纯粹的 web component 组件，希望有机会给项目作出贡献.

https://xy-ui.codelabo.cn/docs/#/xy-checkbox?id=%e6%96%b9%e6%b3%95function

Description

https://xy-ui.codelabo.cn/docs/#/README

Description

https://xy-ui.codelabo.cn/docs/#/xy-layout

Description

https://xy-ui.codelabo.cn/docs/#/xy-radio

Description

https://xy-ui.codelabo.cn/docs/#/xy-dialog

Description

https://xy-ui.codelabo.cn/docs/#/xy-date-picker

Description

https://xy-ui.codelabo.cn/docs/#/xy-button.md?id=onfocus%E3%80%81onblur

Description

https://xy-ui.codelabo.cn/docs/#/xy-tab

Description

https://xy-ui.codelabo.cn/docs/#/xy-icon

Description

https://xy-ui.codelabo.cn/docs/#/xy-color-picker

Description

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

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

还是说直接硬写？

https://xy-ui.codelabo.cn/docs/#/xy-message

Description

https://xy-ui.codelabo.cn/docs/#/

Description

https://xy-ui.codelabo.cn/docs/#/xy-switch

Description

https://xy-ui.codelabo.cn/docs/#/xy-button

Description

https://xy-ui.codelabo.cn/docs/#/xy-tips

Description

https://xy-ui.codelabo.cn/docs/#/xy-text

Description

https://xy-ui.codelabo.cn/docs/#/update

Description

问题描述

当 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>

期望行为

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

版本 1.3.3

https://xy-ui.codelabo.cn/docs/#/themeColor

Description

https://xy-ui.codelabo.cn/docs/#/xy-view

Description

  <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异步的原因导致的？

演示

点击一个 xy-select 时，鼠标移动至该 xy-select 的第一个下拉列表时，当鼠标在xy-select 和其 下拉列表之间的空白处时，会触发下拉列表下层的 其他 xy-select 的聚焦。

版本 1.3.4

https://xy-ui.codelabo.cn/docs/#/xy-popover

Description

问题描述

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

目前这种情况分别出现在我的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);
})()

Great library, I like your visual effects.

I may be missing something, but if I open chrome tools to this page: https://xy-ui.codelabo.cn/docs/#/xy-input, and try to modify the label property / attribute, nothing happens. Is this by design? It would be nice to have the ability to change the label.