@hsu-react/ui 0.0.3 → 0.0.5

package/src/components/Tree/_components/TitleSearchBar/index.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import Input, { InputProps } from "../../../Input";
 import Icon from "../../../Icon";
 import Button, { ButtonProps } from "../../../Button";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 export interface TitleSearchBarProps {
   title?: React.ReactNode;

package/src/components/Tree/index.tsx

@@ -9,7 +9,7 @@ import React, {
   useRef,
 } from "react";
 import { generateRandomStr } from "hsu-utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import TitleSearchBar from "./_components/TitleSearchBar";
 import { useTreeSearch } from "./_hooks/useTreeSearch";

package/src/components/Upload/_components/UploadedItem/index.tsx

@@ -5,7 +5,7 @@ import Button from "../../../Button";
 import { downloadFile } from "hsu-utils";
 import { deepCopy } from "hsu-utils";
 import { FilePreviewTypeArr } from "../../../FilePreview";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 import { UploadProps } from "../..";
 
 interface UploadedItemProps {

package/src/components/Upload/_components/UploadingItem/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { UploadFile, Progress, Tooltip, Popconfirm } from "antd";
 import classNames from "classnames";
 import Button from "../../../Button";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 interface UploadingItemProps {
   file: UploadFile;

package/src/components/Upload/index.tsx

@@ -8,7 +8,7 @@ import React, { useCallback } from "react";
 import { Canceler } from "axios";
 import { RcFile } from "antd/es/upload";
 import { deepCopy } from "hsu-utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import { ButtonProps, ProgressProps } from "antd";
 import FilePreview, { FilePreviewType } from "../FilePreview";

package/src/styles/utils.scss

@@ -0,0 +1,81 @@
+/* =========================================================
+ * utils.scss
+ * Design: 1366 x 768
+ * Rule:   x/width -> vw, y/height -> vh
+ * Mode:   function (return calc() expressions)
+ *
+ * Usage:
+ *   .banner {
+ *     background-size: 100% vh(239);
+ *   }
+ *
+ *   .box {
+ *     width: vw(600);
+ *     height: vh(300);
+ *   }
+ * ========================================================= */
+
+$design-w: 1366;
+$design-h: 768;
+
+/* -------------------------
+ * vw (width/x-axis)
+ * ------------------------- */
+@function vw($px) {
+  @return calc((#{$px} / #{$design-w}) * 100vw);
+}
+
+@function vw2($a, $b) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw);
+}
+
+@function vw3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw)
+    calc((#{$c} / #{$design-w}) * 100vw);
+}
+
+@function vw4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-w}) * 100vw) calc((#{$r} / #{$design-w}) * 100vw)
+    calc((#{$b} / #{$design-w}) * 100vw) calc((#{$l} / #{$design-w}) * 100vw);
+}
+
+/* -------------------------
+ * vh (height/y-axis)
+ * ------------------------- */
+@function vh($px) {
+  @return calc((#{$px} / #{$design-h}) * 100vh);
+}
+
+@function vh2($a, $b) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh);
+}
+
+@function vh3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh)
+    calc((#{$c} / #{$design-h}) * 100vh);
+}
+
+@function vh4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-h}) * 100vh) calc((#{$r} / #{$design-h}) * 100vh)
+    calc((#{$b} / #{$design-h}) * 100vh) calc((#{$l} / #{$design-h}) * 100vh);
+}
+
+/* =========================================================
+ * Examples (delete if you want)
+ * ========================================================= */
+/*
+.banner {
+  background-size: 100% vh(239);
+}
+
+.card {
+  padding: vw4(24, 32, 24, 32);
+  border-radius: vh(16);
+}
+
+.modal {
+  width: vw(600);
+  height: vh(400);
+  transform: translateY(vh(50));
+}
+*/

package/src/typings.d.ts

@@ -1,8 +1,8 @@
 // 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
 // 仅提供类型，不影响运行时行为。
 
-// CSS / Less Modules
-declare module "*.module.less" {
+// CSS / Sass Modules
+declare module "*.module.scss" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
@@ -10,7 +10,7 @@ declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
-declare module "*.less" {
+declare module "*.scss" {
   const content: string;
   export default content;
 }

package/es/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/

package/lib/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/

package/src/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/