zhytech-ui-mobile 1.0.0

package/README.md

@@ -0,0 +1,71 @@
+# zhytechUI Mobile
+
+> ### 简介
+一个基于Vue3 + wot-design-uni + TypeScript + unocss封装的前端UI组件库
+
+[在线演示](http://60.205.113.132:7006/)
+> ### 组件列表
+#### 1、dynamicRenderer
+动态表单渲染组件：
+支持**基础组件**（文本、输入框、单选框、复选框、数字框、日期、时间）、**高级组件**（文件上传、图片上传）、**应用组件**（质控评分、公司人员选择组件、公司岗位选择组件）、**布局组件**（分组、标签页）。
+
+> ### 使用说明
+#### 1、安装
+```ts
+npm i zhytech-ui-mobile -S
+```
+更新本版
+```ts
+npm i zhytech-ui-mobile@latest -S
+```
+#### 2、引入使用
+1)、按需引入：在要使用的页面添加下面代码即可
+```ts
+import { ZhyFormRenderer } from "zhytech-ui-mobile"
+import "zhytech-ui-mobile/dist/style.css";
+```
+2)、全局引入：在main.ts中引入，在项目内任何页面都不需要单独引入
+```ts
+import zhytechUIMobile from "zhytech-ui-mobile";
+import "zhytech-ui-mobile/dist/style.css";
+createApp(app).use(zhytechUIMobile)
+```
+#### 2、主题(V 1.1.0)
+目前支持传入主题色,默认主题色`#4d80f0` 设置方法如下：
+2.1、在全局引入时设置主题色
+```ts
+// 在main.ts中引入
+const theme = { colorTheme: "#ff0000" };
+createApp(app)use(zhytechUiMobile, { theme });
+```
+2.2、动态设置组件库主题色，使用提供的setTheme方法设置
+```ts
+// 在需要的地方设置
+import { setTheme } from "zhytech-ui-mobile";
+setTheme("dark");
+```
+#### 3、使用组件
+```html
+   <zhy-form-designer :formData="formData"></zhy-form-designer>
+```
+#### 4、使用组件提供的类型
+```ts
+   import type { batchAddComponentParam, dynamicFormData, uploadOption } from "zhytech-ui-mobile";
+```
+> #### 注意：
+
+1)、此组件库提供的所有组件在使用时均需要添加**zhy**前缀，如：zhy-form-renderer
+
+2)、此组件css样式依赖scss开发，使用者项目还需要添加scss依赖。
+
+> #### 版本更新清单：
+
+**V 1.0.0**
+```html
+1.……………………
+2.……………………
+```
+
+> #### 后续计划：
+
+此组件库目前还处于雏形，后续会继续添加组件

package/dist/build/h5/static/iconfont/iconfont.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5013457 */
+  src: url('iconfont.woff2?t=1756949533339') format('woff2'),
+       url('iconfont.woff?t=1756949533339') format('woff'),
+       url('iconfont.ttf?t=1756949533339') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.zhy-tip:before {
+  content: "\e6bf";
+}
+
+.zhy-form:before {
+  content: "\e643";
+}
+
+.zhy-examination:before {
+  content: "\e635";
+}
+

package/dist/build/h5/static/scss/actionSheet.scss

@@ -0,0 +1,12 @@
+.zhy.wd-action-sheet {
+  .wd-action-sheet__header {
+    height: 45px;
+    line-height: 45px;
+    background-color: var(--wot-color-theme, #4d80f0);
+    color: #ffffff;
+    .wd-icon {
+      top: 15px;
+      color: #ffffff;
+    }
+  }
+}

package/dist/build/h5/static/scss/button.scss

@@ -0,0 +1,3 @@
+:deep(.wd-button__text) {
+  letter-spacing: 2px;
+}

package/dist/build/h5/static/scss/checkbox.scss

@@ -0,0 +1,35 @@
+.zhy.wd-checkbox-group {
+  .wd-checkbox {
+    max-width: 100%;
+    width: auto;
+    margin-bottom: 0;
+    margin-top: 8px;
+    &.is-inline {
+      margin-right: 15px;
+    }
+    // &.is-disabled {
+    //   &.is-checked {
+    //     .wd-checkbox__shape {
+    //       border-color: var(--wot-color-primary);
+    //       background-color: var(--wot-color-primary);
+    //     }
+    //   }
+    //   .wd-checkbox__shape {
+    //     background: unset;
+    //     color: #ffffff;
+    //   }
+    // }
+    .wd-checkbox__shape {
+      vertical-align: top;
+    }
+    .wd-checkbox__label {
+      vertical-align: top;
+      width: calc(100% - 21px);
+      margin-left: 5px;
+      margin-top: -3px;
+      .wd-checkbox__txt {
+        white-space: normal;
+      }
+    }
+  }
+}

package/dist/build/h5/static/scss/form.scss

@@ -0,0 +1,18 @@
+.zhy.wd-form {
+  .zhy.wd-cell {
+    padding-left: 0;
+    .wd-cell__wrapper {
+      &.is-vertical {
+        padding: 5px;
+        .wd-cell__right {
+          margin-top: 0;
+        }
+      }
+      .wd-cell__right {
+        .wd-cell__value.wd-cell__value--right {
+          text-align: left;
+        }
+      }
+    }
+  }
+}

package/dist/build/h5/static/scss/index.scss

@@ -0,0 +1,7 @@
+@import "form.scss";
+@import "button.scss";
+@import "radio.scss";
+@import "checkbox.scss";
+@import "input.scss";
+@import "picker.scss";
+@import "actionSheet.scss";

package/dist/build/h5/static/scss/input.scss

@@ -0,0 +1,15 @@
+.zhy.wd-input {
+  padding: 0 10px;
+  margin-top: 4px;
+  border-radius: 6px;
+  border: 1px solid #999999;
+  &::after {
+    display: none;
+  }
+  &.is-disabled {
+    background-color: #f8f8f8;
+    .uni-input-input:disabled {
+      color: #000000;
+    }
+  }
+}

package/dist/build/h5/static/scss/picker.scss

@@ -0,0 +1,13 @@
+.zhy.wd-picker {
+  .wd-picker__toolbar {
+    height: 45px;
+    background-color: var(--wot-color-theme, #4d80f0);
+    .wd-picker__action {
+      padding: 0 15px;
+      color: #ffffff;
+    }
+  }
+  .wd-picker-view-column__item.wd-picker-view-column__item--active {
+    background-color: #fffacd;
+  }
+}

package/dist/build/h5/static/scss/radio.scss

@@ -0,0 +1,33 @@
+.zhy.wd-radio-group {
+  .wd-radio {
+    margin-top: 8px;
+    &.is-inline {
+      margin-right: 15px;
+    }
+    &.is-dot.icon-placement-left {
+      max-width: 100%;
+      width: auto;
+      align-items: flex-start;
+      .wd-radio__label {
+        text-align: left;
+        width: calc(100% - 21px);
+      }
+    }
+    // &.is-disabled {
+    //   &.is-checked {
+    //     .wd-radio__shape {
+    //       border-color: var(--wot-color-primary);
+    //       background-color: var(--wot-color-primary);
+    //     }
+    //   }
+    //   .wd-radio__shape {
+    //     background: unset;
+    //     color: #ffffff;
+    //   }
+    // }
+    .wd-radio__shape {
+      margin-top: 2px;
+      margin-right: 5px;
+    }
+  }
+}