Merge pull request #55 from yangjingyu/fixed-47

fix: #47 radioType 设置失效
yangjingyu · Feb 7, 2024 · 7550e78 · 7550e78
2 parents 73c959e + ecadb14
commit 7550e78
Show file tree

Hide file tree

Showing 5 changed files with 5,191 additions and 6 deletions.
diff --git a/dist/vs-tree.css b/dist/vs-tree.css
@@ -1 +1,376 @@
-.vs-loading{min-height:100px;background-image:url(oval.svg);background-position:50%;background-repeat:no-repeat}.vs-tree-node{height:26px;cursor:pointer;color:#606266;font-size:14px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;padding:0 0 2px;-webkit-box-sizing:border-box;box-sizing:border-box}.vs-tree-node:hover{background-color:#eee}.vs-tree-node:first-child .expand:before{height:0}.vs-indent-unit{position:relative;display:inline-block;width:14px;height:14px;vertical-align:middle}.vs-indent-unit:after{content:"";width:0;height:160%;position:absolute;left:50%;border-left:1px dashed #ddd;top:-8px}.vs-loading-unit.is-loading{width:14px;height:14px;margin-right:5px;display:inline-block;vertical-align:middle}.vs-loading-unit.is-loading:after{content:"";width:14px;height:14px;display:inline-block;vertical-align:top}.expand,.expand-empty{width:14px;height:14px;line-height:10px;display:inline-block;margin-right:5px;color:#bbb;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle}.expand{position:relative;cursor:pointer}.expand.vs-expand-icon:after{content:"";width:14px;height:14px;display:inline-block;background-image:url(expand.svg);background-size:10px 10px;background-repeat:no-repeat;background-position:50%;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.expanded{color:#bbb}.expanded.vs-expand-icon:after{-webkit-transform:rotate(0);transform:rotate(0)}.expand.is-loading:after,.vs-loading-unit.is-loading:after{background-image:url(oval.svg);background-repeat:no-repeat;background-size:14px 14px;border:none;color:transparent}.vs-indent-unit~.expand:before{content:"";position:absolute;top:-50%;left:50%;width:0;height:50%;margin-top:-25%;border-left:1px dashed #ddd}.vs-tree-node:not([vs-child])+.vs-tree-node .vs-indent-unit~.expand:before{display:none}.vs-indent-unit~.expand-empty{position:relative}.vs-indent-unit~.expand-empty:after{content:"";position:absolute;top:50%;left:50%;width:50%;margin-top:-1px;border-bottom:1px dashed #ddd}.vs-indent-unit~.expand-empty:before{content:"";position:absolute;top:-50%;left:50%;height:200%;border-left:1px dashed #ddd}.selected{background-color:#eee}.vs-checkbox,.vs-radio{color:#606266;font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:8px;font-size:0}.vs-checkbox,.vs-checkbox__input,.vs-radio,.vs-radio__input{position:relative;cursor:pointer;display:inline-block;white-space:nowrap;vertical-align:middle}.vs-checkbox__input,.vs-radio__input{outline:none;line-height:1}.vs-checkbox__inner,.vs-radio__inner{display:inline-block;position:relative;border:1px solid #d9d9d9;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.is-indeterminate .vs-checkbox__inner:before{content:"";position:absolute;display:block;background-color:#1989fa;height:12px;-webkit-transform:scale(.6);transform:scale(.6);left:0;right:0;top:0;border-radius:2px}.vs-checkbox__original:checked~.vs-checkbox__inner{background-color:#1989fa;border-color:#1989fa}.vs-checkbox__original:checked~.vs-checkbox__inner:after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.vs-checkbox__inner:after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;-webkit-transform-origin:center;transform-origin:center}.vs-checkbox__original:disabled~.vs-checkbox__inner{background-color:#edf2fc;border-color:#dcdfe6;cursor:not-allowed}.vs-checkbox__original:checked:disabled~.vs-checkbox__inner:after{border-color:#c0c4cc}.vs-checkbox__original,.vs-radio__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;z-index:-1}.vs-radio__inner{border-radius:100%}.vs-radio__inner:after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";left:3px;position:absolute;top:3px;width:6px;height:6px;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .15s ease-in .05s;transition:-webkit-transform .15s ease-in .05s;transition:transform .15s ease-in .05s;transition:transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;-webkit-transform-origin:center;transform-origin:center;border-radius:100%}.vs-radio__original:checked~.vs-radio__inner{border-color:#1989fa}.vs-radio__original:checked~.vs-radio__inner:after{background-color:#1989fa;-webkit-transform:scale(1);transform:scale(1)}.vs-radio__original:checked:disabled~.vs-radio__inner:after{border-color:#c0c4cc}.vs-icon-leaf,.vs-icon-parent{width:14px;height:14px;margin-right:5px;display:inline-block;vertical-align:middle;background-image:url(leaf.svg);background-size:12px 12px;background-repeat:no-repeat;background-position:50%}.vs-icon-leaf>img,.vs-icon-parent>img{width:100%;height:100%}.vs-icon-parent{background-image:url(parent.svg)}.vs-transition{height:0;-webkit-transition:all .3s ease;transition:all .3s ease;overflow-y:hidden}.vs-tree-node.vs-drag-enter{background-color:rgba(25,137,250,.8);color:#fff}.vs-tree-node.vs-drag-over-gap-bottom,.vs-tree-node.vs-drag-over-gap-top{position:relative}.vs-tree-node.vs-drag-over-gap-bottom:before,.vs-tree-node.vs-drag-over-gap-top:before{content:"";position:absolute;left:0;width:100%;height:2px;background-color:#1989fa}.vs-tree-node.vs-drag-over-gap-top:before{top:0}.vs-tree-node.vs-drag-over-gap-bottom:before{bottom:0}.vs-search-only-leaf .vs-tree-inner{padding-left:0!important}.vs-search-only-leaf .vs-tree-inner .expand-empty{display:none}.vs-theme-element .is-indeterminate .vs-checkbox__inner{background-color:#1989fa;border-color:#1989fa}.vs-theme-element .is-indeterminate .vs-checkbox__inner:before{background-color:#fff;height:1px;width:50%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.vs-breadcrumb{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;font-variant:tabular-nums;line-height:1.5715;list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";color:rgba(0,0,0,.45);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.vs-breadcrumb>span{display:inline-block}.vs-breadcrumb>span:not(:last-child){cursor:pointer;color:#1989fa}.vs-breadcrumb>span:not(:last-child):hover{color:rgba(25,137,250,.8)}.vs-breadcrumb>span:last-child{color:rgba(0,0,0,.85)}.vs-breadcrumb-separator{margin:0 8px;color:rgba(0,0,0,.45)}
+.vs-loading {
+  min-height: 100px;
+  background-image: url(./oval.svg);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.vs-tree-node {
+  height: 26px;
+  cursor: pointer;
+  color: #606266;
+  font-size: 14px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  white-space: nowrap;
+  padding: 0 0 2px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.vs-tree-node:hover {
+  background-color: #eee;
+}
+.vs-tree-node:first-child .expand::before {
+  height: 0;
+}
+.vs-indent-unit {
+  position: relative;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+}
+.vs-indent-unit::after {
+  content: "";
+  width: 0;
+  height: 160%;
+  position: absolute;
+  left: 50%;
+  border-left: 1px dashed #ddd;
+  top: -8px;
+}
+.vs-loading-unit.is-loading {
+  width: 14px;
+  height: 14px;
+  margin-right: 5px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.vs-loading-unit.is-loading::after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: top;
+}
+.expand,
+.expand-empty {
+  width: 14px;
+  height: 14px;
+  line-height: 10px;
+  display: inline-block;
+  margin-right: 5px;
+  color: #bbb;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  vertical-align: middle;
+}
+.expand {
+  position: relative;
+  cursor: pointer;
+}
+.expand.vs-expand-icon::after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  background-image: url(./expand.svg);
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.expanded {
+  color: #bbb;
+}
+.expanded.vs-expand-icon::after {
+  -webkit-transform: rotate(0);
+          transform: rotate(0);
+}
+.expand.is-loading::after,
+.vs-loading-unit.is-loading::after {
+  background-image: url(./oval.svg);
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  border: none;
+  color: transparent;
+}
+.vs-indent-unit ~ .expand::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: 50%;
+  width: 0;
+  height: 50%;
+  margin-top: -25%;
+  border-left: 1px dashed #ddd;
+}
+.vs-tree-node:not([vs-child]) + .vs-tree-node .vs-indent-unit ~ .expand::before {
+  display: none;
+}
+.vs-indent-unit ~ .expand-empty {
+  position: relative;
+}
+.vs-indent-unit ~ .expand-empty::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  margin-top: -1px;
+  border-bottom: 1px dashed #ddd;
+}
+.vs-indent-unit ~ .expand-empty::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: 50%;
+  height: 200%;
+  border-left: 1px dashed #ddd;
+}
+.selected {
+  background-color: #eee;
+}
+.vs-checkbox,
+.vs-radio {
+  position: relative;
+  color: #606266;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  margin-right: 8px;
+  vertical-align: middle;
+  font-size: 0;
+}
+.vs-checkbox__input,
+.vs-radio__input {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  line-height: 1;
+  position: relative;
+  vertical-align: middle;
+}
+.vs-checkbox__inner,
+.vs-radio__inner {
+  display: inline-block;
+  position: relative;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  background-color: #FFFFFF;
+  z-index: 1;
+  -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+}
+.is-indeterminate .vs-checkbox__inner::before {
+  content: '';
+  position: absolute;
+  display: block;
+  background-color: #1989fa;
+  height: 12px;
+  -webkit-transform: scale(0.6);
+          transform: scale(0.6);
+  left: 0;
+  right: 0;
+  top: 0;
+  border-radius: 2px;
+}
+.vs-checkbox__original:checked ~ .vs-checkbox__inner {
+  background-color: #1989fa;
+  border-color: #1989fa;
+}
+.vs-checkbox__original:checked ~ .vs-checkbox__inner::after {
+  -webkit-transform: rotate(45deg) scaleY(1);
+          transform: rotate(45deg) scaleY(1);
+}
+.vs-checkbox__inner::after {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  content: "";
+  border: 1px solid #FFFFFF;
+  border-left: 0;
+  border-top: 0;
+  height: 7px;
+  left: 4px;
+  position: absolute;
+  top: 1px;
+  -webkit-transform: rotate(45deg) scaleY(0);
+          transform: rotate(45deg) scaleY(0);
+  width: 3px;
+  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  -webkit-transform-origin: center;
+          transform-origin: center;
+}
+.vs-checkbox__original:disabled ~ .vs-checkbox__inner {
+  background-color: #edf2fc;
+  border-color: #dcdfe6;
+  cursor: not-allowed;
+}
+.vs-checkbox__original:checked:disabled ~ .vs-checkbox__inner:after {
+  border-color: #c0c4cc;
+}
+.vs-checkbox__original,
+.vs-radio__original {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  margin: 0;
+  width: 0;
+  height: 0;
+  z-index: -1;
+}
+.vs-radio__inner {
+  border-radius: 100%;
+}
+.vs-radio__inner:after {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  content: "";
+  left: 3px;
+  position: absolute;
+  top: 3px;
+  width: 6px;
+  height: 6px;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
+  transition: -webkit-transform 0.15s ease-in 0.05s;
+  transition: transform 0.15s ease-in 0.05s;
+  transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
+  -webkit-transform-origin: center;
+          transform-origin: center;
+  border-radius: 100%;
+}
+.vs-radio__original:checked ~ .vs-radio__inner {
+  border-color: #1989fa;
+}
+.vs-radio__original:checked ~ .vs-radio__inner:after {
+  background-color: #1989fa;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+.vs-radio__original:checked:disabled ~ .vs-radio__inner:after {
+  border-color: #c0c4cc;
+}
+.vs-icon-leaf,
+.vs-icon-parent {
+  width: 14px;
+  height: 14px;
+  margin-right: 5px;
+  display: inline-block;
+  vertical-align: middle;
+  background-image: url(./leaf.svg);
+  background-size: 12px 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.vs-icon-leaf > img,
+.vs-icon-parent > img {
+  width: 100%;
+  height: 100%;
+}
+.vs-icon-parent {
+  background-image: url(./parent.svg);
+}
+.vs-transition {
+  height: 0;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  overflow-y: hidden;
+}
+.vs-tree-node.vs-drag-enter {
+  background-color: rgba(25, 137, 250, 0.8);
+  color: #fff;
+}
+.vs-tree-node.vs-drag-over-gap-top,
+.vs-tree-node.vs-drag-over-gap-bottom {
+  position: relative;
+}
+.vs-tree-node.vs-drag-over-gap-top::before,
+.vs-tree-node.vs-drag-over-gap-bottom::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #1989fa;
+}
+.vs-tree-node.vs-drag-over-gap-top::before {
+  top: 0;
+}
+.vs-tree-node.vs-drag-over-gap-bottom::before {
+  bottom: 0;
+}
+.vs-search-only-leaf .vs-tree-inner {
+  padding-left: 0!important;
+}
+.vs-search-only-leaf .vs-tree-inner .expand-empty {
+  display: none;
+}
+.vs-theme-element .is-indeterminate .vs-checkbox__inner {
+  background-color: #1989fa;
+  border-color: #1989fa;
+}
+.vs-theme-element .is-indeterminate .vs-checkbox__inner::before {
+  background-color: #fff;
+  height: 1px;
+  width: 50%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) scale(1);
+          transform: translate(-50%, -50%) scale(1);
+}
+.vs-breadcrumb {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: "tnum";
+          font-feature-settings: "tnum";
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+.vs-breadcrumb > span {
+  display: inline-block;
+}
+.vs-breadcrumb > span:not(:last-child) {
+  cursor: pointer;
+  color: #1989fa;
+}
+.vs-breadcrumb > span:not(:last-child):hover {
+  color: rgba(25, 137, 250, 0.8);
+}
+.vs-breadcrumb > span:last-child {
+  color: rgba(0, 0, 0, 0.85);
+}
+.vs-breadcrumb-separator {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
+}
diff --git a/dist/vs-tree.esm.browser.js b/dist/vs-tree.esm.browser.js
diff --git a/dist/vs-tree.js b/dist/vs-tree.js
diff --git a/public/单选示例.html b/public/单选示例.html
@@ -46,7 +46,7 @@
     const tree = new vsTree.default('#tree', {
       data: data,
       showRadio: true,
-      radioType: 'level',
+      radioType: 'level',//'all', // 'level',
       checkOnClickNode: true,
       max: 0,
       highlightCurrent: false,