@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/styles/components/button/_index.less

@@ -0,0 +1,246 @@
+/*
+ * @description: 按钮 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+@plugin "../../plugin/index";
+
+.@{componentPrefix}-button {
+  @ns: @{componentPrefix}-button;
+  @typeList: primary, success, info, warning, danger, cyan;
+  @sizeSet: {
+    small: .useSizeSmall(0);
+    normal: .useSizeDft(0);
+    large: .useSizeLarge(0);
+  }
+
+  @themeList: ghost, fantasy, empty;
+  @notAllowed: disabled, loading;
+
+  // mixin of notAllowed
+  .notAllowedMixin(@color, @bg, @br) {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      --button-color: @color;
+      --button-color-bg: @bg;
+      --button-color-br: @br;
+    }
+  }
+
+  // var
+  & {
+    --button-color: getClrVar(text);
+    --button-color-bg: getClrVar(brand);
+    --button-color-br: getClrVar(brand);
+    --button-color-hover: getClrHoverVar(brand);
+    --button-color-focus: getClrFocusVar(brand);
+    --button-color-active: getClrActiveVar(brand);
+    --button-color-disabled: getClrVar(brand, disabled);
+  }
+
+  // base
+  & {
+    .useIFlexRCC(4);
+    .useSizeDft(0, 9);
+    .useBorderBox();
+    .useBorderRadius(5);
+    transition: all .15s;
+    user-select: none;
+    border: solid 1px;
+    outline: none;
+    color: var(--button-color);
+    background-color: var(--button-color-bg);
+    border-color: var(--button-color-br);
+
+    &:hover,
+    &:focus-visible {
+      --button-color-bg: var(--button-color-hover);
+    }
+
+    &:active {
+      --button-color-bg: var(--button-color-active);
+    }
+  }
+
+  // 修改按钮类型
+  each(@typeList, .(@type) {
+    .m(@type, {
+      --button-color: getClrVar(text);
+      --button-color-bg: getClrVar(@type);
+      --button-color-br: getClrVar(@type);
+
+      &:hover,
+      &:focus-visible {
+        --button-color: getClrVar(text);
+        --button-color-bg: getClrHoverVar(@type);
+        --button-color-br: getClrHoverVar(@type);
+      }
+
+      &:active {
+        --button-color-bg: getClrActiveVar(@type);
+      }
+    })
+
+  })
+
+  // 修改 fantasy 主题
+  .m(fantasy, {
+    --button-color: getClrVar(black);
+    --button-color-bg: getClrFadeVar(brand);
+    --button-color-br: getClrLightVar(brand);
+
+    &:hover,
+    &:focus-visible {
+      --button-color-bg: getClrHoverVar(brand, fade);
+    }
+
+    &:active {
+      --button-color-bg: getClrActiveVar(brand, fade);
+    }
+
+    each(@typeList, .(@type) {
+      .with(@ns, {
+        .m(@type, {
+          --button-color: getClrVar(black);
+          --button-color-bg: getClrFadeVar(@type);
+          --button-color-br: getClrLightVar(@type);
+
+          &:hover,
+          &:focus-visible {
+            --button-color: getClrVar(text);
+            --button-color-bg: getClrHoverVar(@type);
+          }
+
+          &:active {
+            --button-color-bg: getClrActiveVar(@type);
+          }
+        })
+      })
+    })
+  });
+
+  // 修改 empty 主题（特殊）
+  .m(empty, {
+    --button-color: getClrVar(black);
+    --button-color-bg: getClrVar(bg);
+    --button-color-br: getClrFadeVar(brand);
+
+    &:hover,
+    &:focus-visible {
+      --button-color-bg: getClrVar(bg);
+      --button-color-br: getClrHoverVar(brand, fade);
+    }
+
+    &:active {
+      --button-color-br: getClrActiveVar(brand, light);
+    }
+
+    each(@typeList, .(@type) {
+      .with(@ns, {
+        .m(@type, {
+          --button-color: getClrVar(@type);
+          --button-color-bg: getClrVar(bg);
+          --button-color-br: getClrVar(gray);
+
+          &:hover,
+          &:focus-visible {
+            --button-color-br: getClrHoverVar(@type);
+          }
+
+          &:active {
+            --button-color-br: getClrActiveVar(@type, light);
+          }
+        });
+      });
+    });
+  });
+
+  // 修改 ghost 主题
+  .m(ghost, {
+    --button-color-bg: transparent;
+    --button-color-br: transparent;
+    --button-color: getClrVar(brand);
+
+    &:hover,
+    &:focus-visible {
+      --button-color-bg: getClrHoverVar(brand, fade);
+    }
+
+    &:active {
+      --button-color: getClrActiveVar(brand, light);
+    }
+
+    each(@typeList, .(@type) {
+      .with(@ns, {
+        .m(@type, {
+          --button-color: getClrVar(@type);
+          --button-color-br: transparent;
+
+          &:hover,
+          &:focus-visible {
+            --button-color-bg: getClrHoverVar(@type, fade);
+          }
+
+          &:active {
+            --button-color: getClrActiveVar(@type, light);
+          }
+        })
+      })
+    })
+  });
+
+  // 状态禁用，正在加载
+  each(@notAllowed, .(@status) {
+    .is(@status, {
+      .notAllowedMixin(getClrVar(text), getClrVar(brand), getClrVar(brand));
+    });
+
+    each(@typeList, .(@type) {
+      .m(@type, {
+        .is(@status, {
+          .notAllowedMixin(getClrVar(white), getClrVar(@type), getClrVar(gray));
+        });
+      });
+
+      .m(@type, empty, {
+        .is(@status, {
+          .notAllowedMixin(getClrVar(@type), getClrVar(bg), getClrVar(gray));
+        })
+      });
+
+      .m(@type, ghost, {
+        .is(@status, {
+          .notAllowedMixin(getClrVar(@type), getClrVar(bg), transparent);
+
+        })
+      });
+
+      .m(@type, fantasy, {
+        .is(@status, {
+          .notAllowedMixin(getClrVar(black), getClrVar(@type, fade), getClrVar(gray));
+        })
+      });
+    });
+
+    .m(ghost, {
+      .is(@status, {
+        .notAllowedMixin(getClrVar(brand), var(--pixel-color-bg), transparent);
+      })
+    });
+  });
+
+  // 修改尺寸
+  each(@sizeSet, .(@rule, @key) {
+    .m(@key, {
+      @rule();
+    });
+  });
+
+}
+
+
+
+

package/packages/styles/components/dialog/_index.less

@@ -0,0 +1,46 @@
+/*
+ * @description: 对话框 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-dialog {
+  @ns: @{componentPrefix}-dialog;
+  @inner: @{componentPrefix}-message;
+  @drag-container: @{componentPrefix}-draggable-container;
+
+  // base
+  & {
+    // 全屏 & 元素居中
+    .useModal();
+    .useFlexRCC();
+  }
+
+  // ele inner
+  .e(inner, {
+    min-width: 400px;
+    min-height: 250px;
+    width: 30vw;
+    position: absolute;
+    z-index: 30;
+
+    .d(@inner, {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+    });
+
+  });
+
+  // status part
+  .is(part, {
+    position: absolute;
+    .d(@drag-container, {
+      position: absolute;
+      z-index: 30;
+    });
+  })
+
+}
+
+

package/packages/styles/components/divider/_index.less

@@ -0,0 +1,89 @@
+/*
+ * @description: 分割线 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+@plugin "../../plugin/index";
+
+.@{componentPrefix}-divider {
+  @ns: @{componentPrefix}-divider;
+  @types: dashed, solid;
+  @placements: start, center, end;
+  @dir: vertical, horizontal;
+
+  // var
+  & {
+    --pixel-divider-gap: 10px;
+    --pixel-divider-placement: center;
+  }
+
+  // base
+  & {
+    .useBorderBox();
+    .useIFlexRCC();
+
+    position: relative;
+    margin: var(--pixel-divider-gap) 0;
+    font-size: var(--pixel-font-size-small);
+    width: 100%;
+    height: .8px;
+    flex: 0;
+  }
+
+  // ele content
+  .e(content, {
+    padding: 0 10px;
+    position: absolute;
+
+    .useIFlexRCC(5);
+
+    background-color: var(--pixel-color-bg);
+    left: var(--pixel-divider-placement);
+  });
+
+  // modifier type
+  .m(solid, {
+    background-color: var(--pixel-color-gray);
+  });
+
+  .m(dashed, {
+    background: linear-gradient(45deg,
+    transparent 0%,
+    transparent 50%,
+    var(--pixel-color-gray) 50%,
+    var(--pixel-color-gray) 100%) repeat;
+    background-size: 15px 1px;
+  });
+
+  // modifier placement
+  each(@placements, .(@v) {
+    & when (@v = start) {
+      .m(@v, {
+        .e(content, {
+          left: 15px;
+        }, @ns);
+      });
+    }
+    & when (@v = end) {
+      .m(@v, {
+        .e(content, {
+          right: 15px;
+        }, @ns);
+      });
+    }
+  });
+
+  // modifier direction
+  .m(vertical, {
+    margin: 0 var(--pixel-divider-gap);
+    height: 100%;
+    min-height: 1em;
+    width: 0.8px;
+
+    .e(content, {
+      padding: 10px 0;
+    }, @ns);
+  });
+}
+

package/packages/styles/components/drawer/_index.less

@@ -0,0 +1,73 @@
+/*
+ * @description: 抽屉 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-drawer {
+  @ns: @{componentPrefix}-drawer;
+  @inner: @{componentPrefix}-message;
+  @positions: top, left, bottom, right;
+
+  // base
+  & {
+    .useModal();
+  }
+
+  // ele inner
+  .e(inner, {
+    min-height: 200px;
+    position: absolute;
+    border-radius: unset;
+    padding: 20px 30px;
+    z-index: 1;
+
+    .d(@inner, {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+    });
+
+  });
+
+  // modifier position
+  & {
+    .m(left, {
+      .e(inner, {
+        height: 100%;
+        width: 30%;
+      }, @ns);
+    });
+    .m(top, {
+      .e(inner, {
+        width: 100%;
+        height: 30%
+      }, @ns);
+    });
+    .m(bottom, {
+      .e(inner, {
+        bottom: 0;
+        width: 100%;
+        height: 30%;
+      }, @ns);
+    });
+    .m(right, {
+      .e(inner, {
+        bottom: 0;
+        right: 0;
+        height: 100%;
+        width: 30%;
+      }, @ns);
+    });
+  }
+
+  // status part
+  .is(part, {
+    position: absolute;
+  });
+}
+
+
+
+
+

package/packages/styles/components/dropdown/_index.less

@@ -0,0 +1,92 @@
+/*
+ * @description: 下拉菜单 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-dropdown {
+  @ns: @{componentPrefix}-dropdown;
+  @scrollbar: @{componentPrefix}-scrollbar;
+
+  // var
+  & {
+    --pixel-dropdown-justify: unset;
+    --pixel-dropdown-active-color: unset;
+  }
+
+  // base
+  & {
+    padding: 0;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.05),
+                0 8px 10px 1px rgba(0, 0, 0, 0.06),
+                0 5px 5px -3px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .e(wrapper, {
+    padding: 4px 0;
+  });
+
+  // ele inner
+  .e(inner, {
+    list-style: none;
+    margin: 0;
+    color: inherit;
+    padding: 0;
+  });
+}
+
+.@{componentPrefix}-dropdown-item {
+  @ns: @{componentPrefix}-dropdown-item;
+
+  // base
+  & {
+    .useBorderBox();
+    .useFlexRCC(8);
+    justify-content: var(--pixel-dropdown-justify);
+    .useSizeDft(0);
+
+    position: relative;
+    padding: 8px 16px;
+    margin: 0 4px;
+    border-radius: 3px;
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.9);
+    transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  // status active
+  .is(active, {
+    font-weight: 600;
+    color: var(--pixel-dropdown-active-color);
+    background-color: rgba(0, 0, 0, 0.05);
+  });
+
+  // status disabled
+  .is(disabled, {
+    color: rgba(0, 0, 0, 0.26);
+    cursor: not-allowed;
+    
+    &:hover {
+      background-color: transparent;
+    }
+  });
+}
+
+
+
+
+

package/packages/styles/components/floating/_index.less

@@ -0,0 +1,78 @@
+/*
+ * @description: 浮动 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../global";
+
+.@{componentPrefix}-floating {
+    @ns: @{componentPrefix}-floating;
+
+    // base
+    & {
+        .useBorderDft();
+        .useBorderRadius(4);
+
+        padding: 5px;
+        position: relative;
+        white-space: nowrap;
+        height: 100%;
+        width: 100%;
+    }
+
+    .e(arrow, {
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        z-index: 0;
+        content: "";
+        display: block;
+        rotate: 45deg;
+        box-sizing: border-box;
+        background-color: inherit;
+        user-select: none;
+    });
+
+    &[data-placement^="top"] {
+        transform-origin: center bottom;
+        .e(arrow, {
+            bottom: -5px;
+            border-right: 1px solid var(--pixel-color-gray);
+            border-bottom: 1px solid var(--pixel-color-gray);
+        }, @ns);
+    }
+
+    &[data-placement^="bottom"] {
+        transform-origin: center top;
+        .e(arrow, {
+            top: -5px;
+            border-left: 1px solid var(--pixel-color-gray);
+            border-top: 1px solid var(--pixel-color-gray);
+        }, @ns);
+    }
+
+    &[data-placement^="left"] {
+        transform-origin: right center;
+        .e(arrow, {
+            right: -5px;
+            border-right: 1px solid var(--pixel-color-gray);
+            border-top: 1px solid var(--pixel-color-gray);
+        }, @ns);
+    }
+
+    &[data-placement^="right"] {
+        transform-origin: left center;
+        .e(arrow, {
+            left: -5px;
+            border-left: 1px solid var(--pixel-color-gray);
+            border-bottom: 1px solid var(--pixel-color-gray);
+        }, @ns);
+    }
+}
+
+.___p-floating-container {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 0;
+    width: 0;
+}

package/packages/styles/components/grid/_index.less

@@ -0,0 +1,50 @@
+/*
+ * @description: 栅格 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-row {
+  @ns: @{componentPrefix}-row;
+
+  & {
+    --pixel-row-gutter: unset;
+    --pixel-row-justify: unset;
+    --pixel-row-align: unset;
+  }
+
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--pixel-row-gutter);
+  justify-content: var(--pixel-row-justify);
+  align-items: var(--pixel-row-align);
+}
+
+.@{componentPrefix}-col {
+  @ns: @{componentPrefix}-col;
+
+  // mixin offset
+  .mixinOffset(@num) when (@num <= 24) {
+    &-offset-@{num} {
+      @t: (@num * 100 / 24);
+      margin-left: ~"@{t}%"
+    }
+    .mixinOffset(@num+1);
+  }
+
+  // mixin span
+  .mixinSpan(@num) when (@num <= 24) {
+    &-span-@{num} {
+      @t: (@num * 100 / 24);
+      flex: 0 0 ~"@{t}%";
+      max-width: ~"@{t}%";
+    }
+    .mixinSpan(@num+1);
+  }
+
+  .mixinOffset(1);
+  .mixinSpan(1);
+  .useBorderBox();
+
+  padding: 0 calc(var(--pixel-row-gutter) / 2);
+}

package/packages/styles/components/icon/_index.less

@@ -0,0 +1,27 @@
+/*
+ * @description: 图标 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-icon {
+  @ns: @{componentPrefix}-icon;
+
+  // var
+  & {
+    --pixel-icon-color: inherit;
+  }
+
+  // base
+  & {
+    .useIFlexRCC();
+    cursor: pointer;
+    user-select: none;
+    box-sizing: unset !important;
+    width: 1em;
+    height: 1em;
+    color: var(--pixel-icon-color);
+  }
+}
+
+