ff-ui-plus 2.0.7

package/packages/theme-chalk/mixins/function.scss

@@ -0,0 +1,71 @@
+//  fork from element-plus  and rewrite
+
+@use "./config" as config;
+
+// BEM support Func
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, config.$t-modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, "." + config.$t-state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ":") {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: "--" + config.$el-namespace;
+  @each $item in $list {
+    @if $item != "" {
+      $name: $name + "-" + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}

package/packages/theme-chalk/mixins/mixins.scss

@@ -0,0 +1,79 @@
+//  fork from element-plus  and rewrite
+
+@use "./config" as *;
+@use "./function" as *;
+
+// BEM
+@mixin b($block) {
+  $B: $t-namespace + $t-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+@mixin elb($block) {
+  $B: $el-namespace + $t-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element, $nest: false) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $t-element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @if $nest {
+      @at-root {
+        #{$selector} {
+          #{$currentSelector} {
+            @content;
+          }
+        }
+      }
+    } @else {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @if $nest {
+      @at-root {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    } @else {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier, $nest: false) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $t-modifier-separator + $unit + ","};
+  }
+
+  @if $nest {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  } @else {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}

package/packages/theme-chalk/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@ff-ui-plus/theme-chalk",
+  "private": true,
+  "version": "0.0.7",
+  "description": "@ff-ui-plus theme-chalk",
+  "license": "MIT",
+  "main": "index.css",
+  "unpkg": "index.css",
+  "jsdelivr": "index.css",
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "cross-env T_UI_PLUS_THEME_CHALK_DEV=true  tsx watch ./build.ts ",
+    "build": "tsx ./build.ts"
+  },
+  "devDependencies": {
+    "sass": "^1.69.4",
+    "postcss": "^8.4.31",
+    "postcss-nested": "^6.0.1",
+    "postcss-scss": "^4.0.9"
+  }
+}

package/packages/theme-chalk/src/adaptive-page.scss

@@ -0,0 +1,48 @@
+.t_adaptive_page {
+  display: flex;
+  align-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .left_content {
+    background: var(--el-bg-color);
+    margin: 8px;
+    margin-right: 0;
+    .left_tree {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+      overflow-y: auto;
+    }
+  }
+  .right_content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .table_main {
+      flex: 1;
+      overflow-y: auto;
+      width: 100%;
+      height: 100vh;
+      .t-table {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .t_table_self-filling {
+      .t-table {
+        .el-table {
+          height: 100vh;
+        }
+      }
+    }
+  }
+}

package/packages/theme-chalk/src/button.scss

@@ -0,0 +1,23 @@
+.t-button-tip {
+  padding: 0;
+  height: auto;
+
+  &:hover,
+  &:focus {
+    animation: jump 0.3s;
+  }
+
+  @keyframes jump {
+    0% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-3px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+}

package/packages/theme-chalk/src/chart.scss

@@ -0,0 +1,10 @@
+.t-chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &-container {
+    width: 100%;
+    height: 100%;
+  }
+}

package/packages/theme-chalk/src/date-picker.scss

@@ -0,0 +1,3 @@
+.t-date-picker {
+  width: 100%;
+}

package/packages/theme-chalk/src/detail.scss

@@ -0,0 +1,7 @@
+.t_detail {
+  .el-descriptions__body {
+    .el-descriptions__label:not(.is-bordered-label) {
+      margin-right: 10px;
+    }
+  }
+}

package/packages/theme-chalk/src/form.scss

@@ -0,0 +1,104 @@
+.t-form {
+  display: flex;
+  flex-wrap: wrap;
+
+  .el-form-item {
+    align-items: center;
+
+    .el-form-item__content {
+      .el-input,
+      .el-select,
+      .el-date-editor,
+      .el-textarea {
+        width: 100%;
+      }
+
+      .el-input-number {
+        .el-input {
+          width: inherit;
+        }
+      }
+    }
+  }
+
+  // 左对齐
+  .asterisk-left {
+    .el-form-item__label {
+      margin-left: 5px;
+    }
+  }
+
+  .t-margin-top-5 {
+    margin-top: calc(5px);
+  }
+
+  .el-input-number {
+    .el-input {
+      .el-input__inner {
+        text-align: left;
+      }
+    }
+  }
+
+  .render_label {
+    .el-form-item__label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &::before {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  // 左对齐
+  .render_laber_position_left {
+    .el-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+
+  // 顶部对齐
+  &.el-form--label-top {
+    .render_label {
+      .el-form-item__label {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .label_render {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .text_show {
+    color: var(--el-text-color-primary);
+  }
+
+  .slot_label {
+    .el-form-item__content {
+      label {
+        color: var(--el-text-color-primary);
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .flex-box {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .flex-ver {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .footer_btn {
+    width: 100%;
+  }
+}

package/packages/theme-chalk/src/index.scss

@@ -0,0 +1,19 @@
+@use "./adaptive-page.scss";
+@use "./button.scss";
+@use "./chart.scss";
+@use "./checkbox.scss";
+@use "./date-picker.scss";
+@use "./detail.scss";
+@use "./form.scss";
+@use "./input.scss";
+@use "./layout-page.scss";
+@use "./layout-page-item.scss";
+@use "./module-form.scss";
+@use "./query-condition.scss";
+@use "./radio.scss";
+@use "./select.scss";
+@use "./select-icon.scss";
+@use "./select-table.scss";
+@use "./step-wizard.scss";
+@use "./table.scss";
+@use "./tabs.scss";

package/packages/theme-chalk/src/layout-page-item.scss

@@ -0,0 +1,10 @@
+.t_layout_page_item {
+  // margin: 8px;
+  padding: 16px;
+  background: var(--el-bg-color);
+  border-radius: 4px;
+}
+.page_item_no_margin {
+  margin: 0;
+  padding: 0;
+}

package/packages/theme-chalk/src/layout-page.scss

@@ -0,0 +1,37 @@
+.t_layout_page {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .back_to_top {
+    position: absolute;
+    right: 10px;
+    bottom: 100px;
+    z-index: 100;
+    box-shadow: 0 5px 6px 2px rgba(0, 0, 0, 0.5);
+    background: #fff;
+    border-radius: 5px;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > div {
+      cursor: pointer;
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-icon {
+        color: #9b59b6;
+      }
+    }
+  }
+}
+.layout_page_no_margin {
+  padding: 0;
+}