@wiajs/ui/dist/editTable/index.less

wia app ui packages

/*
 * Edit Table, 类似 listView
 * 编辑表table的 class 请设置为 edit-table
 */
@import '../dataTable/index.less';

:root {
  --edit-table-font-size: 14px;
  --edit-table-attach-gap: 2px;
  --edit-table-attach-img: 60px; // 附件图标高度
  // --edit-table-attach-cat-minheight: 90px; // 类别高度
  --edit-table-attach-cat-heigth: 90px; // 类别高度
}

.edit-table {
  // 字体、颜色、文本对齐可继承,无需每级定义
  // 表样式
  width: 100%;
  border-collapse: collapse;
  border: none; // 1px solid #CCCCCC;
  table-layout: fixed; /*确保td 不被内容撑开，有第一行或colgroup 设置列宽*/
  // background: white; // WhiteSmoke
  // background: WhiteSmoke; // WhiteSmoke  245 245 245
  // background: rgb(247, 248, 250); // WhiteSmoke
  margin: 1rem 0 0 0;
  font-size: var(--edit-table-font-size); // 17
  // color: #828282;
  color: #4b4b4b;

  h1 {
    font-size: 0.9rem; // 18
    font-weight: 400;
    margin-bottom: 0.75rem;
  }
  h2 {
    font-size: 0.85rem; // 17
    font-weight: 400;
    margin-bottom: 0.3rem;
  }
  h3 {
    font-size: 0.8rem; // 16
    font-weight: 400;
  }
  p {
    margin: 10px 0;
  }

  /* 跟 listView th 一致 */
  th {
    font-weight: bold;
    font-size: 0.85rem;
    padding: 4px 5px 2px;
    border-bottom: 1px solid #dce0e0; /*#666;*/
    //border-top: 1px solid #f1f1f1;
    //border-left: 1px solid #cccccc;
    //border-right: 1px solid #cccccc;
    // background-color: white; //#396799; /*#396799; lightsteelblue; *#cedce9; #ebebed;*/
    white-space: nowrap;
    text-align: center; /*text-align: left;*/
    height: 1rem;
  }

  .imgTitle {
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
  }

  tbody {
    // background-color: white;
  }

  /* 跟 listView odd tr 一致 */
  tr {
    input,
    span {
      // min-height: 2.2rem;
      // min-height: 32px;
      min-height: 22px;
      //background: lavender;
      // padding: 10px 0 10px 0.75rem;
    }
  }

  /* mobile no use odd even!
  .etRowOdd {
    min-height: 2.2rem;
    //background-color: lavender;
    input, span {
      min-height: 2.2rem;
      //background: lavender;
      padding: 5px 0.75rem;
    }
  }

  .etRowEven {
    min-height: 2.2rem;
    //background-color: whitesmoke;
    input, span {
      min-height: 2.2rem;
      //background: whitesmoke;
      padding: 5px 0.75rem;
    }
  }
  */

  /* 默认所有 td 带下划线 */
  td {
    // border-bottom: 1px solid #ccc; /* 灰色下划线 */
    // border: none;
    border-collapse: collapse;
    // padding: 5px;
    // vertical-align: bottom;
    vertical-align: middle;
    // vertical-align: top;
    // padding: 2px; /* 可选内边距 */
    // display: flex;
    // justify-content: stretch; // 充满
  }
  .data-table td {
    vertical-align: middle;
  }

  /* 包含 etLabel 的 td 不带下划线 */
  td:has(> .etLabel) {
    border-bottom: none;
    padding-left: 8px;
  }

  /* 包含 etLabel 的 td 带下划线 */
  td:has(> .etValue) {
    border-bottom: 1px solid #ccc; /* 灰色下划线 */
  }

  td:has(> .etNumber) {
    border-bottom: 1px solid #ccc; /* 灰色下划线 */
  }

  /* 包含 etLabel 的 td 取消下划线 */
  td:has(> .etChange) {
    border-bottom: 1px solid rgb(255, 193, 7); /* 灰色下划线 */
  }

  td:has(> .etAttach) {
    border-bottom: 1px solid #ccc; /* 灰色下划线 */
    padding-bottom: 3px;
  }

  td:has(> .etAttach.etCap) {
    border: 1px solid rgba(0, 0, 0, 0.125);
    padding-top: 5px;
  }

  /* editTable 独有的，跟 行 底色一致,与TD类似 */
  input {
    // --dy-input-color: red;
    --dy-input-color: #80bdff;
    --dy-size: 32px;
  }

  input-x {
    /* 移除边框和背景 */
    border: none; // 移除边框
    // border: none;
    // background: transparent;
    // outline: none;

    vertical-align: bottom;
    padding: 2px;
    cursor: pointer;
    // cursor: default; // 普通文本光标

    /*height: 22px;*/
    width: 100%;
    //text-align: center;
  }

  select {
    width: 100%;
    height: 100%;
  }

  /* 对 input不起作用,对span起作用
  .specN:after {
    content: ':';
    display: inline-block;
  }
  */

  span {
    //float: left;
    display: inline-flex; // inline-block 和 flex 特性
    align-items: center;
    // justify-content: start;
    // text-align: left;
    word-break: break-all;
    white-space: pre-wrap; // 保留空格和换行，超出自动换行

    width: 100%;
    // height: 100%; // 跨行时高度不正常

    padding: 5px;
    // background: white;
    // color: rgb(29, 33, 41);
    color: rgb(134, 144, 156);

    outline: none;

    &.etValue {
      color: rgb(78, 89, 105);
    }

    // 标签
    &.etLabel {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出显示省略号 */
      min-width: 40px; // 最小列宽
      // max-width: 100px; // 最大列宽
      // width: fit-content; // 内容宽度
      // 鼠标移动显示
      &:hover {
        overflow: visible;
        white-space: normal;
        // z-index: 1;
        position: relative;
        // background: white;
        // box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }
    }

    &.etVertical {
      writing-mode: vertical-rl; /* 从右到左垂直排列 */
      /* writing-mode: vertical-lr;  从左到右垂直排列 */
      text-orientation: upright; /* 保持文字直立（中文/日文适用） */
    }

    &.etClamp {
      display: -webkit-box;
      -webkit-line-clamp: 3; // 只显示三行
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 5em; // 1em = font-size
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

    &.etClamp:hover {
      -webkit-line-clamp: unset;
      overflow: visible;
      max-height: none;
    }

    // span 可编辑
    &.edit {
      display: block;
      // contenteditable = plaintext-only"; // 编辑，但是无法获得光标位置,插入图片需要光标位置!
      -webkit-user-modify: read-write-plaintext-only;
      user-modify: read-write-plaintext-only;
      // border: 1px solid #2563eb !important; // rgb(0, 123, 255)
      border: 1px solid #80bdff !important;

      -webkit-line-clamp: unset;
      overflow: visible;
      max-height: none;
    }
  }

  .etNumber {
    display: inline-flex;
    // flex-direction: row-reverse;
    width: 100%;
    white-space: nowrap; /* 防止内容换行 */

    span {
      white-space: nowrap;
      display: inline-block;
    }

    span.etValue {
      flex: auto;
      text-align: right;
      padding-right: 4px; /* 可选：添加一点右边距 */
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 15px;
    }

    span.etSuffix {
      flex: none; /* 不伸缩 */
      width: fit-content; /* 基于内容宽度 */
      color: #a8abb2;
    }
  }

  textarea {
    // background: white;
    //border: 1px red;
    padding: 3px;
    width: 100%; /*100%-10px会撑开页面超出10px*/
    height: 1rem;
    text-align: left;
  }

  // view 视图
  .etView input,
  .etView textarea {
    color: rgb(29, 33, 41);
    /* 解决 textarea 的特殊样式 */
    resize: none;
    overflow: hidden;
    white-space: normal;

    // user-select: none; /* 禁止选择和编辑 */
    user-select: text; /* 允许选择文本 */
    pointer-events: none; // 禁止编辑，不会聚焦和失去焦点！！！

    /* 可选：hover时保持普通光标 */
    &:hover {
      cursor: default;
    }
  }

  /*编辑样式*/
  .etEdit input,
  .etEdit textarea {
    text-align: left !important;
    // padding: 5px; /*5px 0px 3px;*/
    padding: 0 5px; /*5px 0px 3px;*/
    width: 100%;
    word-break: break-all; // 换行
  }

  /* editTable编辑时的式样,有个虚线边框 */
  .etCellEdit {
    //background: LightSteelBlue !important; /*#d0e0ff;*/
    // border: 1px dotted black !important;
    border: 1px solid #2563eb !important; // rgb(0, 123, 255)
    //text-align: left !important;
    //padding: 0; /*5px 0px 3px;*/
    /*height: 22px;*/
    //width: 98%;
  }

  /* 移除 span 黑色边框 */
  span-x:focus-visible {
    outline: none;
    caret-color: transparent; /* 隐藏输入光标 */
  }

  span-x {
    // user-select: none; /* 禁止文本选中 */
    cursor: default; /* 使用默认箭头光标 */
  }

  /* 出入的图片样式,用于手机*/
  .etImg {
    padding: 0;
    width: 100%;
    height: auto;
  }

  /* editTable 独有，选择行，跟 鼠标移动时的 背景色一致 */
  .etRowSelOdd,
  .etRowSelEven {
    background: LightSteelBlue;

    input,
    span {
      background: LightSteelBlue;
    }
  }

  /* 行号,注意字体 */
  .etCellSel {
    background: White;
    cursor: pointer;
    color: Navy;
  }

  /* 行号 鼠标 移动 变色*/
  .etCellSelMouseOver {
    background: LightSteelBlue;
    cursor: pointer;
  }

  /*用于输入组件所在 层的外框*/
  .etInputBox {
    position: absolute;
    border: 1px solid #7f9db9;
    width: 182px;
    height: 100px;
    overflow: hidden;
  }

  .etInputSel {
    position: relative;
    margin: -3px;
    width: 500px;
    height: 500px;
    line-height: 14px;
    /*color:#909993;*/
  }

  // 表格带格线
  .etBorder {
    td {
      border-bottom: 1px solid #cccccc;
    }
  }

  .etRadio,
  .etCheckbox {
    display: flex;
    align-items: center;
    justify-content: space-around;

    label {
      // --f7-list-item-media-margin: 4px;
      i {
        margin-right: 4px;
      }
      display: flex;
      align-items: center;
      min-height: 32px;
    }
  }

  @import './attach.less';
}