@cldemo/ui-kit 1.0.11 → 1.0.12

package/buildLibs/styles/Element/ClDarg.css

@@ -0,0 +1,37 @@
+.panel-darg {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.panel-darg .darg-select,
+.panel-darg .darg-placeholder,
+.darg-moveing .darg-select,
+.darg-moveing .darg-placeholder {
+  background-color: #e6f4ff;
+}
+
+.panel-darg li.darg-placeholder {
+  border: 2px dashed #409eff;
+  min-height: 40px;
+}
+
+.panel-darg tr.darg-placeholder {
+  border-top: 2px solid #409eff;
+  border-bottom: 2px solid #409eff;
+}
+
+.panel-darg .darg-handle {
+  cursor: move;
+}
+
+ul.darg-moveing {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.darg-moveing > li {
+  margin: 0;
+}
+

package/buildLibs/styles/Element/ClDivider.css

@@ -0,0 +1,82 @@
+/* Divider 分割线样式 */
+.panel-divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  color: var(--divider-text-color, #969799);
+  font-size: 14px;
+}
+
+/* 左右两条线（无文本时 flex:1 拼成整线，有文本时夹住文本） */
+.panel-divider::before,
+.panel-divider::after {
+  flex: 1;
+  content: '';
+  border-style: solid;
+  border-width: 1px 0 0;
+  border-color: var(--divider-line-color, #ebedf0);
+}
+
+.panel-divider--text::before {
+  margin-right: 16px;
+}
+
+.panel-divider--text::after {
+  margin-left: 16px;
+}
+
+/* 文本 */
+.divider-text {
+  display: inline-block;
+  padding: 0;
+  white-space: nowrap;
+}
+
+/* 虚线 */
+.panel-divider--dashed::before,
+.panel-divider--dashed::after {
+  border-style: dashed;
+}
+
+/* 文本位置 */
+.panel-divider--left::before {
+  max-width: 10%;
+}
+
+.panel-divider--right::after {
+  max-width: 10%;
+}
+
+/* 细线 */
+.panel-divider--hairline::before,
+.panel-divider--hairline::after {
+  border-width: 0.5px 0 0;
+}
+
+/* ===== gold 金色渐变短线（theme="gold"，居中短装饰线，两端透明渐隐） ===== */
+.panel-divider--gold {
+  justify-content: center;
+}
+
+.panel-divider--gold::before {
+  flex: none;
+  width: 64px;
+  height: 2px;
+  border: none;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--divider-line-color, #e8a87c),
+    transparent
+  );
+}
+
+.panel-divider--gold::after {
+  display: none;
+}
+
+/* gold 为纯装饰短线，隐藏文本 */
+.panel-divider--gold .divider-text {
+  display: none;
+}
+

package/buildLibs/styles/Element/ClEllipsis.css

@@ -0,0 +1,167 @@
+.tooltip {
+  padding: 0 !important;
+  z-index: 3999;
+}
+
+.tooltip-inner {
+  text-align: left;
+  max-width: 300px;
+  word-wrap: break-word;
+  word-break: break-all;
+  color: #2c3343;
+  background-color: #ffffff;
+  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  font-size: 14px;
+}
+.tooltip > .arrow,
+.tooltip > .arrow::before {
+  position: absolute;
+  background: inherit;
+}
+
+.tooltip > .arrow {
+  visibility: hidden;
+  width: 16px;
+  height: 8px;
+}
+
+.tooltip > .arrow::before {
+  visibility: visible;
+  content: '';
+  width: 0;
+  height: 0;
+}
+
+.tooltip[data-popper-placement^='top'] > .arrow {
+  bottom: -7px;
+}
+
+.tooltip[data-popper-placement^='top'] > .arrow::before {
+  border-width: 8px 8px 0 8px;
+}
+
+.tooltip[data-popper-placement^='right'] .tooltip-inner {
+  box-shadow: -3px 2px 10px 0 rgba(0, 0, 0, 0.2);
+}
+
+.tooltip[data-popper-placement^='right'] > .arrow {
+  left: -7px;
+  width: 8px;
+  height: 16px;
+}
+
+.tooltip[data-popper-placement^='right'] > .arrow::before {
+  border-width: 8px 8px 8px 0;
+}
+
+.tooltip[data-popper-placement^='bottom'] .tooltip-inner {
+  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
+}
+
+.tooltip[data-popper-placement^='bottom'] > .arrow {
+  top: -7px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .arrow::before {
+  border-width: 0 8px 8px 8px;
+}
+
+.tooltip[data-popper-placement^='left'] .tooltip-inner {
+  box-shadow: 3px 2px 10px 0 rgba(0, 0, 0, 0.2);
+}
+
+.tooltip[data-popper-placement^='left'] > .arrow {
+  right: -7px;
+  width: 8px;
+  height: 16px;
+}
+
+.tooltip[data-popper-placement^='left'] > .arrow::before {
+  border-width: 8px 0 8px 8px;
+}
+
+.tooltip.tooltip-white[data-popper-placement^='top'] > .arrow::before {
+  border-top-color: #ffffff;
+}
+.tooltip.tooltip-white[data-popper-placement^='right'] > .arrow::before {
+  border-right-color: #ffffff;
+}
+.tooltip.tooltip-white[data-popper-placement^='bottom'] > .arrow::before {
+  border-bottom-color: #ffffff;
+}
+.tooltip.tooltip-white[data-popper-placement^='left'] > .arrow::before {
+  border-left-color: #ffffff;
+}
+
+.tooltip.tooltip-black .tooltip-inner {
+  color: #ffffff;
+  background-color: #000000;
+}
+.tooltip.tooltip-black[data-popper-placement^='top'] > .arrow::before {
+  border-top-color: #000000;
+}
+.tooltip.tooltip-black[data-popper-placement^='right'] > .arrow::before {
+  border-right-color: #000000;
+}
+.tooltip.tooltip-black[data-popper-placement^='bottom'] > .arrow::before {
+  border-bottom-color: #000000;
+}
+
+/* ---- 箭头对齐：-start → 靠左/上，-end → 靠右/下；水平 14px，垂直 5px ---- */
+.tooltip[data-popper-placement='top-start'] > .arrow,
+.tooltip[data-popper-placement='bottom-start'] > .arrow {
+  left: 14px !important;
+  right: auto !important;
+  transform: none !important;
+}
+.tooltip[data-popper-placement='top-end'] > .arrow,
+.tooltip[data-popper-placement='bottom-end'] > .arrow {
+  left: auto !important;
+  right: 14px !important;
+  transform: none !important;
+}
+.tooltip[data-popper-placement='right-start'] > .arrow,
+.tooltip[data-popper-placement='left-start'] > .arrow {
+  top: 5px !important;
+  bottom: auto !important;
+  transform: none !important;
+}
+.tooltip[data-popper-placement='right-end'] > .arrow,
+.tooltip[data-popper-placement='left-end'] > .arrow {
+  top: auto !important;
+  bottom: 5px !important;
+  transform: none !important;
+}
+.panel-ellipsis {
+    position: relative;
+}
+
+.ellipsis-txt-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+}
+
+/* 多行省略：由内层 span 承担 line-clamp（与 Banner 一致，避免 -webkit-box 作外层时失效） */
+.ellipsis-txt-lines-2,
+.ellipsis-txt-lines-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    white-space: normal;
+    word-break: break-all;
+}
+
+.ellipsis-txt-lines-3 {
+    -webkit-line-clamp: 3;
+}
+
+.ellipsis-txt-title > span {
+    cursor: default;
+}
+.ellipsis-txt-click > span {
+    cursor: pointer;
+}

package/buildLibs/styles/Element/ClEmpty.css

@@ -0,0 +1,34 @@
+/* Empty 空状态样式 */
+.panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+  cursor: pointer;
+}
+
+.empty-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.empty-image-default {
+  font-size: 40px;
+  line-height: 1;
+}
+
+.empty-description {
+  margin-top: 8px;
+  padding: 0 32px;
+  color: #969799;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.empty-footer {
+  margin-top: 24px;
+}
+

package/buildLibs/styles/Element/ClForm.css

@@ -0,0 +1,268 @@
+.panel-form {
+  position: relative;
+}
+
+.panel-validate-element {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.panel-validate-errors {
+  color: red !important;
+  cursor: default !important;
+}
+
+.panel-validate-errors.validate-errors-tip {
+  margin-left: 5px;
+}
+
+.validate-errors-tip > .error-tip-el {
+  cursor: default;
+}
+
+.panel-validate-errors.validate-errors-text {
+  margin-left: 5px;
+}
+
+.panel-validate-errors.validate-errors-li > .error-li-el {
+  list-style: none;
+  padding: 5px 0 0 0;
+  margin: 0;
+}
+
+.panel-validate-element.validate-msg-top > .panel-validate-errors {
+  align-self: flex-start;
+  margin-top: 5px;
+}
+
+.panel-validate-element[data-validate-error] .panel-input input[type='text'].form-control {
+  border-color: red !important;
+}
+
+/* 覆盖未显式设置 type 的输入框（如 cl-input-number 渲染的 type="" 输入），
+   [type='text'] 选择器匹配的是属性值，无法命中空 type，需按 class 单独兜底 */
+.panel-validate-element[data-validate-error] .panel-input input.form-control {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-input .input-group-text {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-input input[type='password'].form-control {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] input[type='text'].form-control {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-textarea textarea.text-area {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-input.input-bottomLine > div {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-input-captcha {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-select
+  .select-inText
+  > .dropdownLayer-text-container,
+.panel-validate-element[data-validate-error]
+  .panel-select
+  .select-inDropdown.dropdownLayer-dropdown-open,
+.panel-validate-element[data-validate-error] .panel-select .select-inTag.select-inTag-open {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-select
+  .dropdownLayer-text-container
+  > .dropdownLayer-text-arrow {
+  color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-radio .radio label:before {
+  border-color: red;
+}
+
+.panel-validate-element[data-validate-error] .panel-checkbox .checkbox label:before {
+  border-color: red;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectTag
+  > .selectTag-container
+  > .selectTag-item {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-fileupload > .fileUpload-default {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error] .panel-fileupload > .fileUpload-button .btn-default {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error] .panel-fileupload .panel-btn-parent .btn {
+  border-color: red !important;
+}
+
+.panel-validate-element[data-validate-error] .panel-table.table-border-all .table-wrapper,
+.panel-validate-element[data-validate-error] .panel-table .table-wrapper {
+  border: 1px solid red !important;
+  transition: border-color 300ms linear;
+  border-radius: 4px;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-table.table-border-all
+  ::-webkit-scrollbar-track {
+  border-right-color: red !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-datetime
+  .dropdownLayer-text
+  > .dropdownLayer-text-container,
+.panel-validate-element[data-validate-error]
+  .panel-datetime
+  .dropdownLayer-dropdown.dropdownLayer-dropdown-open {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-list.dropdownLayer-dropdown.dropdownLayer-dropdown-down
+  > .arrow {
+  border-bottom-color: red !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-datetime.dropdownLayer-arrow
+  > .dropdownLayer-dropdown:before {
+  border-bottom-color: red !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-datetime.datetime-range
+  .calendar-range
+  > .calendar-text
+  > .time-input-base
+  > .form-control {
+  border-color: #cfcfcf !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectmove
+  > .selectmove-search
+  .panel-input.input-icon
+  > div {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectmove
+  > .selectmove-body
+  > .selectmove-tree
+  > .selectmove-tree-item {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectmove
+  > .selectmove-body
+  > .selectmove-result
+  .selectmove-result-container {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error] .panel-colorPicker > .dropdownLayer-text,
+.panel-validate-element[data-validate-error]
+  .panel-colorPicker
+  .dropdownLayer-dropdown.dropdownLayer-dropdown-open {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-colorPicker
+  > .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-down
+  > .arrow {
+  border-bottom-color: red;
+}
+
+.panel-validate-element[data-validate-error] .panel-inputtag .inputTag-container.inputTag-multiple {
+  border-color: red;
+}
+
+/* InputNumberStepper 数量步进：校验失败整框变红 */
+.panel-validate-element[data-validate-error] .panel-inputNumberStepper {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+/* Textarea 备注：文本域变红（根类为 panel-inputtextarea） */
+.panel-validate-element[data-validate-error] .panel-inputtextarea textarea.form-control {
+  border-color: red !important;
+}
+
+/* Slider 滑动值：轨道/进度条变红 */
+.panel-validate-element[data-validate-error] .panel-slider .slider-track,
+.panel-validate-element[data-validate-error] .panel-slider .slider-bar {
+  background-color: red !important;
+  transition: background-color 300ms linear;
+}
+
+/* WeekHour 周时段：整框变红 */
+.panel-validate-element[data-validate-error] .panel-weekhour {
+  border-color: red !important;
+  transition: border-color 300ms linear;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectCascade
+  > .selectCascade-item
+  > .panel-validate-element[data-validate-success]
+  > .panel-select
+  .select-inText
+  > .dropdownLayer-text-container,
+.panel-validate-element[data-validate-error]
+  .panel-selectCascade
+  > .selectCascade-item
+  > .panel-validate-element[data-validate-success]
+  > .panel-select
+  .select-inDropdown.dropdownLayer-dropdown-open,
+.panel-validate-element[data-validate-error]
+  .panel-selectCascade
+  > .selectCascade-item
+  > .panel-validate-element[data-validate-success]
+  > .panel-select
+  .select-inTag.select-inTag-open {
+  border-color: #cfcfcf !important;
+}
+
+.panel-validate-element[data-validate-error]
+  .panel-selectCascade
+  > .selectCascade-item
+  > .panel-validate-element[data-validate-success]
+  .panel-select
+  .dropdownLayer-text-container
+  > .dropdownLayer-text-arrow {
+  color: #cfcfcf !important;
+}
+