@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/search-panel.css

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */

package/theme-chalk/searchlayout.css

@@ -0,0 +1,125 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+.zjhc-search__layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.zjhc-search__panel {
+  padding: 15px 20px 0;
+  margin-bottom: 16px;
+  background-color: var(--el-fill-color-blank);
+  border-radius: 5px;
+  border: 1px solid var(--el-border-color);
+  width: 100%;
+}
+.zjhc-search__panel .el-col > .el-button {
+  margin-bottom: 15px;
+}
+.zjhc-search__panel .el-date-editor.el-input,
+.zjhc-search__panel .el-date-editor.el-input__wrapper {
+  width: var(--el-input-width);
+}
+.zjhc-search__panel .zjhc-collapse__toggle {
+  margin-bottom: 15px;
+  height: var(--el-button--height) !important;
+}
+
+.zjhc-search__content {
+  background-color: var(--el-fill-color-blank);
+  border-radius: 5px;
+  border: 1px solid var(--el-border-color);
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+}
+
+.zjhc-search__sidebar {
+  width: var(--zjhc-search-sidebar-width);
+  padding: 15px 0 15px 20px;
+}
+
+.zjhc-search__toolbar {
+  margin-bottom: 12px;
+  padding: 0 20px;
+}
+.zjhc-search__toolbar .el-dropdown + .el-button,
+.zjhc-search__toolbar .el-dropdown + .el-dropdown,
+.zjhc-search__toolbar .el-button + .el-dropdown {
+  margin-left: 12px;
+}
+
+.zjhc-search__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 15px 0;
+}
+.zjhc-search__main .zjhc-advance__layout {
+  padding: 0 20px;
+}
+
+.zjhc-search__grid {
+  padding: 0 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.zjhc-search__pagination {
+  margin-top: 16px;
+  padding: 0 20px;
+}
+
+.zjhc-search__dropdown-active {
+  background-color: var(--el-primary-opactiy01);
+}
+.zjhc-search__dropdown-active.el-dropdown-menu__item {
+  color: var(--el-color-primary);
+}
+.zjhc-search__dropdown-active.el-dropdown-menu__item:not(.is-disabled):focus, .zjhc-search__dropdown-active.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: var(--el-primary-opactiy01) !important;
+  color: var(--el-color-primary) !important;
+}
+
+.zjhc-search__row-active td.el-table__cell {
+  background: var(--el-table-check-bg) !important;
+}
+.zjhc-search__row-active.hover-row > td.el-table__cell {
+  background: var(--el-table-check-bg) !important;
+}

package/theme-chalk/src/autocomplete.scss

@@ -0,0 +1,103 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(autocomplete) {
+  width: var(--el-input-width);
+  position: relative;
+  display: inline-block;
+
+  @include e(popper) {
+    max-width: 810px;
+    @include picker-popper(
+      var(--el-bg-color-overlay),
+      1px solid var(--el-border-color-light),
+      none
+    );
+  }
+}
+
+@include b(autocomplete-suggestion) {
+  border-radius: var(--el-border-radius-base);
+  box-sizing: border-box;
+  @include e(wrap) {
+    max-height: 280px;
+    padding: 6px 0;
+    box-sizing: border-box;
+  }
+  @include e(list) {
+    margin: 0;
+    padding: 0;
+  }
+  & li {
+    padding: 0 30px 0 10px;
+    margin: 0 0 1px;
+    line-height: var(--el-input-height);
+    cursor: pointer;
+    color: var(--el-text-color-regular);
+    font-size: var(--el-font-size-base);
+    list-style: none;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+
+    &:hover {
+      background-color: var(--el-fill-color-light);
+    }
+
+    &.highlighted {
+      background-color: var(--el-fill-color-light);
+    }
+
+    &.divider {
+      margin-top: 6px;
+      border-top: 1px solid var(--el-color-black);
+    }
+
+    &.divider:last-child {
+      margin-bottom: -6px;
+    }
+    &.is-selected {
+      background: var(--el-primary-opactiy01);
+      color: var(--el-color-primary);
+      .selected-icon {
+        display: block;
+      }
+    }
+    // &.is-empty {
+    //   background-color: transparent;
+    //   text-align: center;
+    //   color: var(--el-text-color-secondary);
+    // }
+    .selected-icon {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      margin-top: -7px;
+      font-size: 14px;
+      display: none;
+    }
+  }
+
+  @include when(loading) {
+    li {
+      text-align: center;
+      height: 100px;
+      line-height: 100px;
+      font-size: 20px;
+      color: var(--el-text-color-secondary);
+
+      &::after {
+        display: inline-block;
+        content: '';
+        height: 100%;
+        vertical-align: middle;
+      }
+
+      &:hover {
+        background-color: var(--el-bg-color-overlay);
+      }
+    }
+  }
+}