cnhis-design-vue 3.2.1-beta.6 → 3.2.1-beta.7

package/es/components/field-set/src/TableStyle.vue2.js

@@ -1 +1 @@
-import{defineComponent as e,ref as t,reactive as l,watch as i,openBlock as r,createElementBlock as o,createElementVNode as a,createVNode as n,unref as s,Fragment as b,renderList as p,toDisplayString as d,normalizeClass as c,withDirectives as u,vShow as f,withCtx as m,createTextVNode as v}from"vue";import{NSwitch as C,NIcon as g,NButton as y}from"naive-ui";import _ from"./components/table-demo.vue.js";import{CheckmarkCircle as S}from"@vicons/ionicons5";const k={class:"main-wrapper"},h={class:"set-item"},x=a("span",{style:{"margin-right":"20px"}},"开启斑马线",-1),j={class:"set-item table-item"},w=["onClickCapture"],z={class:"table-style__desc"},T={class:"circle"},E={class:"main-wrapper__table-footer"};var F=e({__name:"TableStyle",props:{tableStyleConfig:{type:Object,default:()=>({stripe:!1,border:!0})}},emits:["save","close"],setup(e,{expose:F,emit:O}){var U,q;const A=e,B=t([{title:"样式一",label:"无列分割线",tableConfig:{stripe:!1,border:!(null==(U=A.tableStyleConfig)?void 0:U.border)}},{title:"样式二",label:"列分割线",tableConfig:{stripe:!1,border:!!(null==(q=A.tableStyleConfig)?void 0:q.border)}}]),D=l(A.tableStyleConfig);function G(e){B.value.forEach((t=>t.tableConfig.stripe=e))}function H(){O("close")}function I(){O("save")}return i((()=>A.tableStyleConfig),(e=>{const{stripe:t=!1,border:l=!0}=e;D.stripe=t,D.border=l}),{immediate:!0,deep:!0}),F({getTableFields:function(){return D}}),(e,t)=>(r(),o("div",k,[a("div",h,[x,n(s(C),{value:D.stripe,"onUpdate:value":[t[0]||(t[0]=e=>D.stripe=e),G],size:"small"},null,8,["value"])]),a("div",j,[(r(!0),o(b,null,p(B.value,((e,t)=>(r(),o(b,{key:t},[a("h4",null,d(e.title),1),a("div",{class:c(["table-style",{active:e.tableConfig.border===D.border}]),onClickCapture:()=>{return t=e.tableConfig.border,void(D.border=t);var t}},[n(_,{tableConfig:e.tableConfig},null,8,["tableConfig"]),a("div",z,[u(n(s(g),{size:20,component:s(S)},null,8,["component"]),[[f,e.tableConfig.border===D.border]]),u(a("i",T,null,512),[[f,e.tableConfig.border!==D.border]]),a("span",null,d(e.label),1)])],42,w)],64)))),128))]),a("div",E,[n(s(y),{style:{"margin-right":"8px"},onClick:H},{default:m((()=>[v("取消")])),_:1}),n(s(y),{type:"primary",onClick:I},{default:m((()=>[v("保存")])),_:1})])]))}});export{F as default};
+import{defineComponent as e,ref as t,reactive as r,watch as l,openBlock as s,createElementBlock as a,createElementVNode as i,createVNode as o,unref as n,Fragment as d,renderList as p,toDisplayString as b,normalizeClass as m,withDirectives as c,vShow as u,withCtx as v,createTextVNode as f}from"vue";import{NSwitch as g,NIcon as y,NButton as _}from"naive-ui";import{CheckmarkCircle as C}from"@vicons/ionicons5";import h from"../../../shared/assets/img/table_style_1.png.js";import S from"../../../shared/assets/img/table_style_2.png.js";import j from"../../../shared/assets/img/table_style_3.png.js";import k from"../../../shared/assets/img/table_style_4.png.js";const x={class:"main-wrapper"},w={class:"set-item"},z=i("span",{style:{"margin-right":"20px"}},"开启斑马线",-1),T={class:"set-item table-item"},F=["onClickCapture"],O={class:"table-bg"},U=["src"],q={class:"table-style__desc"},A={class:"circle"},B={class:"main-wrapper__table-footer"};var D=e({__name:"TableStyle",props:{tableStyleConfig:{type:Object,default:()=>({stripe:!1,border:!0})}},emits:["save","close"],setup(e,{expose:D,emit:E}){var G,H;const I=e,J=t([{title:"样式一",label:"无列分割线",border:!(null==(G=I.tableStyleConfig)?void 0:G.border)},{title:"样式二",label:"列分割线",border:!!(null==(H=I.tableStyleConfig)?void 0:H.border)}]),K=r(I.tableStyleConfig);function L(){E("close")}function M(){E("save")}return l((()=>I.tableStyleConfig),(e=>{const{stripe:t=!1,border:r=!0}=e;K.stripe=t,K.border=r}),{immediate:!0,deep:!0}),D({getTableFields:function(){return K}}),(e,t)=>(s(),a("div",x,[i("div",w,[z,o(n(g),{value:K.stripe,"onUpdate:value":t[0]||(t[0]=e=>K.stripe=e),size:"small"},null,8,["value"])]),i("div",T,[(s(!0),a(d,null,p(J.value,((e,t)=>{return s(),a(d,{key:t},[i("h4",null,b(e.title),1),i("div",{class:m(["table-style",{active:e.border===K.border}]),onClickCapture:()=>{return t=e.border,void(K.border=t);var t}},[i("div",O,[i("img",{src:(r=e.border,K.stripe?r?h:j:r?S:k),alt:""},null,8,U)]),i("div",q,[c(o(n(y),{size:20,component:n(C)},null,8,["component"]),[[u,e.border===K.border]]),c(i("i",A,null,512),[[u,e.border!==K.border]]),i("span",null,b(e.label),1)])],42,F)],64);var r})),128))]),i("div",B,[o(n(_),{style:{"margin-right":"8px"},onClick:L},{default:v((()=>[f("取消")])),_:1}),o(n(_),{type:"primary",onClick:M},{default:v((()=>[f("保存")])),_:1})])]))}});export{D as default};

package/es/components/field-set/style/index.css

@@ -1 +1 @@
-.c-field-set{height:100%;width:100%}.c-field-set__color-picker .n-color-picker-trigger__value{display:none}.c-field-set .main-wrapper{display:flex;flex-flow:column nowrap;height:100%;width:100%}.c-field-set .main-wrapper__search-wrapper.n-input{margin-bottom:12px;width:50%}.c-field-set .main-wrapper .item{background:#fff}.c-field-set .main-wrapper .item:active{background:#f2f2f2;box-shadow:0 0 10px 0 #d5d5d5}.c-field-set .main-wrapper .item:focus{background-color:#f2f2f2}.c-field-set .main-wrapper .item.disabled{cursor:not-allowed}.c-field-set .main-wrapper .item .row{align-items:center;border-bottom:1px solid #e8e8e8;display:flex;height:var(--row-height);padding:5px 0}.c-field-set .main-wrapper .table-cell{box-sizing:border-box;color:inherit;display:inline-block;padding:0 5px}.c-field-set .main-wrapper .table-cell .highlight{background-color:var(--primary-color);color:#fff}.c-field-set .main-wrapper .table-cell .c-field-set__color-picker{display:block}.c-field-set .main-wrapper__table-header{align-items:center;background:#f2f2f4;border:1px solid #f2f2f2;display:flex;height:52px}.c-field-set .main-wrapper__table-header .n-checkbox.n-checkbox--disabled .n-checkbox__label{color:var(--n-text-color)}.c-field-set .main-wrapper__table-body{flex:1;overflow-y:auto}.c-field-set .main-wrapper__table-footer{border-top:1px solid #d5d5d5;padding:12px 0}.c-field-set .main-wrapper .set-item{padding:10px 0}.c-field-set .main-wrapper .set-item.table-item{border-top:1px solid #e8e8e8;width:50%}.c-field-set .main-wrapper .set-item.table-item h4{font-size:16px;font-weight:400;margin-bottom:12px}.c-field-set .main-wrapper .set-item.table-item .table-style{background:#e5e5e5;border:2px solid #cfcfcf;border-radius:4px;cursor:pointer;margin-bottom:10px;padding:20px 0 0}.c-field-set .main-wrapper .set-item.table-item .table-style .table-bg{background:#fff;border-radius:5px;margin:0 20px 20px;padding:10px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc{align-items:center;background:#fff;display:flex;padding:10px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc .n-icon{color:var(--c-primary-color);font-size:20px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc .circle{border:1px solid #d5d5d5;border-radius:50%;display:inline-block;height:18px;width:18px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc span{margin-left:5px}.c-field-set .main-wrapper .set-item.table-item .table-style.active{background:#e2ebfa;border:2px solid var(--c-primary-color)}.c-field-set__color-block{display:inline-block;margin-left:20px;position:relative}.c-field-set__color-block:before{background-color:var(--color);border-radius:2px;content:"";height:14px;left:-20px;position:absolute;top:3px;width:14px}.c-field-set__space{width:100%}.c-field-set__space>div:first-child{width:80%}.c-field-set__space .filter-btn{color:var(--c-primary-color);cursor:pointer}.c-field-set__condition .opt-btn{cursor:pointer;display:inline-flex}.c-field-set__condition .condition-wrapper__item{align-items:center;display:flex;margin-top:10px}.c-field-set__condition .condition-wrapper__item .item-index{margin-right:10px}.c-field-set__condition .condition-wrapper__item>.n-date-picker,.c-field-set__condition .condition-wrapper__item>.n-input,.c-field-set__condition .condition-wrapper__item>.n-input-number,.c-field-set__condition .condition-wrapper__item>.n-select{margin-right:10px;width:20%}.c-field-set__condition .sql-expression-wrapper{margin-top:10px}
+.c-field-set{height:100%;width:100%}.c-field-set__color-picker .n-color-picker-trigger__value{display:none}.c-field-set .main-wrapper{display:flex;flex-flow:column nowrap;height:100%;width:100%}.c-field-set .main-wrapper__search-wrapper.n-input{margin-bottom:12px;width:50%}.c-field-set .main-wrapper .item{background:#fff}.c-field-set .main-wrapper .item:active{background:#f2f2f2;box-shadow:0 0 10px 0 #d5d5d5}.c-field-set .main-wrapper .item:focus{background-color:#f2f2f2}.c-field-set .main-wrapper .item.disabled{cursor:not-allowed}.c-field-set .main-wrapper .item .row{align-items:center;border-bottom:1px solid #e8e8e8;display:flex;height:var(--row-height);padding:5px 0}.c-field-set .main-wrapper .table-cell{box-sizing:border-box;color:inherit;display:inline-block;padding:0 5px}.c-field-set .main-wrapper .table-cell .highlight{background-color:var(--primary-color);color:#fff}.c-field-set .main-wrapper .table-cell .c-field-set__color-picker{display:block}.c-field-set .main-wrapper__table-header{align-items:center;background:#f2f2f4;border:1px solid #f2f2f2;display:flex;height:52px}.c-field-set .main-wrapper__table-header .n-checkbox.n-checkbox--disabled .n-checkbox__label{color:var(--n-text-color)}.c-field-set .main-wrapper__table-body{flex:1;overflow-y:auto}.c-field-set .main-wrapper__table-footer{border-top:1px solid #d5d5d5;padding:12px 0}.c-field-set .main-wrapper .set-item{padding:10px 0}.c-field-set .main-wrapper .set-item.table-item{border-top:1px solid #e8e8e8;width:50%}.c-field-set .main-wrapper .set-item.table-item h4{font-size:16px;font-weight:400;margin-bottom:12px}.c-field-set .main-wrapper .set-item.table-item .table-style{background:#e5e5e5;border:2px solid #cfcfcf;border-radius:4px;cursor:pointer;margin-bottom:10px;padding:20px 0 0}.c-field-set .main-wrapper .set-item.table-item .table-style .table-bg{background:#fff;border-radius:5px;margin:0 20px 20px;padding:10px}.c-field-set .main-wrapper .set-item.table-item .table-style .table-bg img{width:100%}.c-field-set .main-wrapper .set-item.table-item .table-style__desc{align-items:center;background:#fff;display:flex;padding:10px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc .n-icon{color:var(--c-primary-color);font-size:20px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc .circle{border:1px solid #d5d5d5;border-radius:50%;display:inline-block;height:18px;width:18px}.c-field-set .main-wrapper .set-item.table-item .table-style__desc span{margin-left:5px}.c-field-set .main-wrapper .set-item.table-item .table-style.active{background:#e2ebfa;border:2px solid var(--c-primary-color)}.c-field-set__color-block{display:inline-block;margin-left:20px;position:relative}.c-field-set__color-block:before{background-color:var(--color);border-radius:2px;content:"";height:14px;left:-20px;position:absolute;top:3px;width:14px}.c-field-set__space{width:100%}.c-field-set__space>div:first-child{width:80%}.c-field-set__space .filter-btn{color:var(--c-primary-color);cursor:pointer}.c-field-set__condition .opt-btn{cursor:pointer;display:inline-flex}.c-field-set__condition .condition-wrapper__item{align-items:center;display:flex;margin-top:10px}.c-field-set__condition .condition-wrapper__item .item-index{margin-right:10px}.c-field-set__condition .condition-wrapper__item>.n-date-picker,.c-field-set__condition .condition-wrapper__item>.n-input,.c-field-set__condition .condition-wrapper__item>.n-input-number,.c-field-set__condition .condition-wrapper__item>.n-select{margin-right:10px;width:20%}.c-field-set__condition .sql-expression-wrapper{margin-top:10px}