sybz-components 0.0.4 → 0.0.6

package/dist/utilities.css

@@ -193283,11 +193283,11 @@ html.dark,
   font-weight: 900;
 }
 
-.h-block {
+.h-block, .h-full {
   height: 100%;
 }
 
-.w-block {
+.w-block, .w-full {
   width: 100%;
 }
 

package/dist/utilities.scss

@@ -0,0 +1,497 @@
+@import './tokens.scss';
+@each $cl, $clVar in blue var(--blue), blue2 var(--blue2), 85 var(--85), 65 var(--65), 45 var(--45), black var(--black),
+  white var(--white), red var(--red), red2 var(--red2), yellow var(--yellow), yellow2 var(--yellow2), green var(--green),
+  green2 var(--green2), gray var(--gray), gray2 var(--gray2), line var(--line)
+{
+  .cl-#{'' + $cl} {
+    color: $clVar;
+  }
+  .bg-#{'' + $cl} {
+    background: $clVar;
+  }
+}
+
+// 定义flex等分
+@for $num from 0 through 24 {
+  .flex-#{$num},
+  .f-#{$num} {
+    flex: $num;
+  }
+  .o-#{$num} {
+    opacity: $num * 0.1;
+  }
+  @each $short, $long in p padding, m margin, h height, lh line-height {
+    .#{$short}#{'' + $num} {
+      #{$long}: $num * 8px;
+    }
+    @if ($short == p or $short == m) {
+      .#{$short}t#{'' + $num} {
+        #{$long}-top: $num * 8px;
+      }
+      .#{$short}r#{'' + $num} {
+        #{$long}-right: $num * 8px;
+      }
+      .#{$short}b#{'' + $num} {
+        #{$long}-bottom: $num * 8px;
+      }
+      .#{$short}l#{'' + $num} {
+        #{$long}-left: $num * 8px;
+      }
+      .#{$short}lr#{'' + $num} {
+        #{$long}-left: $num * 8px;
+        #{$long}-right: $num * 8px;
+      }
+      .#{$short}tb#{'' + $num} {
+        #{$long}-top: $num * 8px;
+        #{$long}-bottom: $num * 8px;
+      }
+      .#{$short}t {
+        #{$long}-top: 8px;
+      }
+      .#{$short}r {
+        #{$long}-right: 8px;
+      }
+      .#{$short}b {
+        #{$long}-bottom: 8px;
+      }
+      .#{$short}l {
+        #{$long}-left: 8px;
+      }
+      .#{$short}lr {
+        #{$long}-left: 8px;
+        #{$long}-right: 8px;
+      }
+      .#{$short}tb {
+        #{$long}-top: 8px;
+        #{$long}-bottom: 8px;
+      }
+    }
+  }
+}
+.p {
+  padding: 8px;
+}
+.m {
+  margin: 8px;
+}
+
+@for $index from -100 through 100 {
+  .ft-#{$index},
+  .fs-#{$index} {
+    font-size: $index + px;
+  }
+
+  .w-#{$index} {
+    width: $index + px;
+  }
+  .h-#{$index} {
+    height: $index + px;
+  }
+  .h-#{$index}\% {
+    height: $index * 1%;
+  }
+  .w-#{$index}\% {
+    width: $index * 1%;
+  }
+  .m-h-#{$index}\% {
+    min-height: $index * 1%;
+  }
+  .m-w-#{$index}\% {
+    min-width: $index * 1%;
+  }
+  .br-#{$index}\% {
+    border-radius: $index * 1%;
+  }
+  .l-h-#{$index}\% {
+    line-height: $index * 1%;
+  }
+  .l-h-#{$index} {
+    line-height: $index + px;
+  }
+  .br-#{$index} {
+    border-radius: $index + px;
+  }
+  .m-h-#{$index} {
+    min-height: $index + px;
+  }
+  .m-w-#{$index} {
+    min-width: $index + px;
+  }
+
+  // 缩写版，结果如: m-l-30
+  // 定义外边距
+  .m-#{$index} {
+    margin: $index + px;
+  }
+  .m-l-#{$index} {
+    margin-left: $index + px;
+  }
+  .m-t-#{$index} {
+    margin-top: $index + px;
+  }
+  .m-r-#{$index} {
+    margin-right: $index + px;
+  }
+  .m-b-#{$index} {
+    margin-bottom: $index + px;
+  }
+  .m-lr-#{$index} {
+    margin-left: $index + px;
+    margin-right: $index + px;
+  }
+  .m-tb-#{$index} {
+    margin-top: $index + px;
+    margin-bottom: $index + px;
+  }
+
+  // 定义内边距
+  .p-#{$index} {
+    padding: $index + px;
+  }
+  .p-l-#{$index} {
+    padding-left: $index + px;
+  }
+  .p-t-#{$index} {
+    padding-top: $index + px;
+  }
+  .p-r-#{$index} {
+    padding-right: $index + px;
+  }
+  .p-b-#{$index} {
+    padding-bottom: $index + px;
+  }
+  .p-lr-#{$index} {
+    padding-left: $index + px;
+    padding-right: $index + px;
+  }
+  .p-tb-#{$index} {
+    padding-top: $index + px;
+    padding-bottom: $index + px;
+  }
+
+  // 定义border
+  .bd-#{$index} {
+    border: $index + px solid var(--line-color);
+  }
+  .bd-l-#{$index} {
+    border-left: $index + px solid var(--line-color);
+  }
+  .bd-t-#{$index} {
+    border-top: $index + px solid var(--line-color);
+  }
+  .bd-r-#{$index} {
+    border-right: $index + px solid var(--line-color);
+  }
+  .bd-b-#{$index} {
+    border-bottom: $index + px solid var(--line-color);
+  }
+
+  // 定义上下左右 l-2 => left: 2px; t-10 => top: 10px;
+
+  .t-#{$index} {
+    top: $index + px;
+  }
+  .r-#{$index} {
+    right: $index + px;
+  }
+  .b-#{$index} {
+    bottom: $index + px;
+  }
+  .l-#{$index} {
+    left: $index + px;
+  }
+  .t-#{$index}\% {
+    top: $index * 1%;
+  }
+  .r-#{$index}\% {
+    right: $index * 1%;
+  }
+  .b-#{$index}\% {
+    bottom: $index * 1%;
+  }
+  .l-#{$index}\% {
+    left: $index * 1%;
+  }
+  .z-#{$index} {
+    z-index: $index;
+  }
+}
+
+@for $index from -1000 through 1000 {
+  @if $index >= 100 or $index < 0 {
+    @if $index % 2 == 0 or $index % 5 == 0 or $index == 1 {
+      .w-#{$index} {
+        width: $index + px;
+      }
+      .h-#{$index} {
+        height: $index + px;
+      }
+      .h-#{$index}\% {
+        height: $index * 1%;
+      }
+      .w-#{$index}\% {
+        width: $index * 1%;
+      }
+      .m-h-#{$index}\% {
+        min-height: $index * 1%;
+      }
+      .m-w-#{$index}\% {
+        min-width: $index * 1%;
+      }
+      .l-h-#{$index}\% {
+        line-height: $index * 1%;
+      }
+      .l-h-#{$index} {
+        line-height: $index + px;
+      }
+      .m-h-#{$index} {
+        min-height: $index + px;
+      }
+      .m-w-#{$index} {
+        min-width: $index + px;
+      }
+
+      // 缩写版，结果如: m-l-30
+      // 定义外边距
+      .m-#{$index} {
+        margin: $index + px;
+      }
+      .m-l-#{$index} {
+        margin-left: $index + px;
+      }
+      .m-t-#{$index} {
+        margin-top: $index + px;
+      }
+      .m-r-#{$index} {
+        margin-right: $index + px;
+      }
+      .m-b-#{$index} {
+        margin-bottom: $index + px;
+      }
+      .m-lr-#{$index} {
+        margin-left: $index + px;
+        margin-right: $index + px;
+      }
+      .m-tb-#{$index} {
+        margin-top: $index + px;
+        margin-bottom: $index + px;
+      }
+
+      // 定义内边距
+      .p-#{$index} {
+        padding: $index + px;
+      }
+      .p-l-#{$index} {
+        padding-left: $index + px;
+      }
+      .p-t-#{$index} {
+        padding-top: $index + px;
+      }
+      .p-r-#{$index} {
+        padding-right: $index + px;
+      }
+      .p-b-#{$index} {
+        padding-bottom: $index + px;
+      }
+      .p-lr-#{$index} {
+        padding-left: $index + px;
+        padding-right: $index + px;
+      }
+      .p-tb-#{$index} {
+        padding-top: $index + px;
+        padding-bottom: $index + px;
+      }
+
+      // 定义上下左右 l-2 => left: 2px; t-10 => top: 10px;
+
+      .t-#{$index} {
+        top: $index + px;
+      }
+      .r-#{$index} {
+        right: $index + px;
+      }
+      .b-#{$index} {
+        bottom: $index + px;
+      }
+      .l-#{$index} {
+        left: $index + px;
+      }
+      .t-#{$index}\% {
+        top: $index * 1%;
+      }
+      .r-#{$index}\% {
+        right: $index * 1%;
+      }
+      .b-#{$index}\% {
+        bottom: $index * 1%;
+      }
+      .l-#{$index}\% {
+        left: $index * 1%;
+      }
+      .z-#{$index} {
+        z-index: $index;
+      }
+    }
+  }
+}
+
+// flex布局
+//类名  .f-ct-st
+$justify: (
+  bs: baseline,
+  st: flex-start,
+  ct: center,
+  ed: flex-end,
+  bt: space-between,
+  sb: space-between,
+  ar: space-around,
+  lt: left,
+  rt: right,
+  un: unset,
+  nm: normal,
+);
+$align: (
+  bs: baseline,
+  st: flex-start,
+  ct: center,
+  ed: flex-end,
+  un: unset,
+  nm: normal,
+  tp: top,
+);
+@each $justifyKey, $justifyVal in $justify {
+  .f-#{$justifyKey} {
+    display: flex;
+    justify-content: #{$justifyVal};
+    align-items: center;
+  }
+  @each $alignKey, $alignVal in $align {
+    .f-#{$justifyKey}-#{$alignKey} {
+      display: flex;
+      justify-content: #{$justifyVal};
+      align-items: #{$alignVal};
+    }
+  }
+}
+.f {
+  display: flex;
+}
+.f-i {
+  display: inline-flex;
+}
+.f-c {
+  flex-direction: column;
+}
+.f-wrap,
+.f-w {
+  flex-wrap: wrap;
+}
+@each $short, $long in s flex-start, e flex-end, c center, b baseline {
+  .ai-#{$short} {
+    align-items: $long;
+  }
+}
+@each $short, $long in e flex-end, c center, b space-between, a space-around, e space-evenly {
+  .jc-#{$short} {
+    justify-content: $long;
+  }
+}
+
+// overflow相关  visible hidden scroll auto
+@each $short, $long in v visible, h hidden, s scroll, a auto {
+  .o-#{$short} {
+    overflow: $long;
+  }
+}
+// 垂直对齐相关 vertical-align
+@each $short, $long in t top, b bottom, m middle, bl baseline, sb sub, sp super {
+  .v#{$short} {
+    vertical-align: $long;
+  }
+}
+// display显示相关
+@each $short, $long in b block, i inline, ib inline-block, f flex, n none {
+  .d-#{$short} {
+    display: $long;
+  }
+}
+// position相关
+@each $short, $long in r relative, a absolute, f fixed, s static {
+  .po-#{$short} {
+    position: $long;
+  }
+}
+
+@each $bold in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
+  .fw-#{$bold},
+  .bold-#{$bold} {
+    font-weight: $bold;
+  }
+}
+
+.bd {
+  border: 1px solid var(--line-color);
+}
+
+.bs {
+  box-sizing: border-box;
+}
+.fw,
+.bold {
+  font-weight: 900;
+}
+
+.h-block, .h-full {
+  height: 100%;
+}
+.w-block, .w-full {
+  width: 100%;
+}
+.animate {
+  transition: all 0.2s linear;
+}
+
+.tl {
+  text-align: left;
+}
+.tc {
+  text-align: center;
+}
+.tr {
+  text-align: right;
+}
+.sd {
+  box-shadow: 3px 3px 6px var(--shadow-color);
+}
+.ma {
+  margin: 0 auto;
+}
+
+.link {
+  cursor: pointer;
+  color: var(--blue);
+}
+.cp {
+  cursor: pointer;
+}
+.ac {
+  color: var(--blue);
+}
+
+//文本超出换行或隐藏，最多5行
+@for $i from 1 through 5 {
+  .line-#{$i} {
+    @if $i == '1' {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    } @else {
+      display: -webkit-box !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      -webkit-line-clamp: $i;
+      -webkit-box-orient: vertical !important;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sybz-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Vue3 中基于Element-plus二次封装基础组件文档",
   "private": false,
   "type": "module",
@@ -28,9 +28,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier --write --ignore-unknown --ignore-path .prettierignore \"*.{js,cjs,mjs,ts,cts,mts,json,jsonc,css,scss,vue,html,md,yml,yaml}\" \".vscode/**/*.{json,jsonc}\" \"{docs,packages,public,scripts,skills}/**/*.{js,cjs,mjs,ts,cts,mts,json,jsonc,tsx,jsx,css,scss,vue,html,md,yml,yaml}\"",
     "release": "pnpm build && npm version patch && npm publish",
-    "format": "prettier --write example/ packages/ docs/",
-    "docsdev": "vitepress dev docs",
+    "format": "pnpm lint:prettier",
     "docsbuild": "vitepress build docs",
     "docsserve": "vitepress serve docs",
     "deploy": "sh -x deploy.sh",