yh-mobile-components 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,261 @@
+# PDA(移动端竖屏) 组件库
+
+**此包依赖**  
+- vue 3.2.47
+- pinia 2.0.35
+- vant 4.8.1
+
+## 愿景
+
+提供一系列的列表、表单组件封装。基于封装的组件，提供一定程度的配置化
+
+## 安装
+
+初次安装以及升级版本都需要在命令行，运行下面的命令
+```shell
+npm install yh-mobile-components
+```
+
+## 使用
+
+```js
+// ......
+import yhMobileComponents from "yh-mobile-components";
+
+// ......
+async function main() {
+  // ......
+  const app = createApp(App);
+  app.use(yhMobileComponents);
+  // ......
+}
+main()
+```
+
+## 类型或枚举
+
+###### 状态枚举 StatusType
+
+```js
+export type StatusType = "primary" | "danger" | "success" | "warning" | "cyan" | "purple" | "yellow" | "pink";
+```
+
+|属性|说明|
+|----|----|
+|primary|表示主要内容，文字显示为蓝色|
+|success|表示成功，文字显示为绿色|
+|danger|表示危险，文字显示为红色|
+|warning|表示警告，文字显示为橙色|
+|cyan|文字显示为青色|
+|purple|文字显示为紫色|
+|yellow|文字显示为黄色|
+|pink|文字显示为粉色|
+
+###### 数据选项 VanOption
+列表参数、下拉、单选、多选有用到
+
+```js
+/** 下拉、单选、多选等组件的数据选项 */
+export interface vanOption {
+  /** 选项的标签用来显示的 */
+  text: string;
+  /** 选项的值，用来赋值传递给后端的 */
+  value: string | number;
+}
+```
+
+```js
+const optionData = reactive([{text:"一",value:1},{text:"二",value:2},{text:"三",value:3}])
+```
+
+## 组件说明
+
+###### yhm-list
+使用下面的模板创建一个列表
+
+```html
+<template>
+  <yhm-list v-bind="configObj"></yhm-list>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ListConfig, ListConfigObject, ParamConfig } from "yh-mobile-components/types";
+
+const listConfig = reactive<ListConfig<any>>({
+  btns: [
+    {
+      type: "primary",
+      text: "详情",
+      callback(row) {
+        console.log(row);
+      },
+    },
+  ],
+  items: [
+    {
+      span: 12,
+      label: "标签名",
+      value: "name",
+      description: "标签描述",
+      status(row) {
+        return "primary";
+      },
+    },
+    {
+      span: 12,
+      label: "偶数显示",
+      value: "name",
+      description: "标签描述",
+      show(row) {
+        
+        return row.status === 0;
+      },
+      status(row) {
+        return "primary";
+      },
+    },
+    {
+      span: 24,
+      label: "标签名",
+      value: "name",
+      description: "标签描述",
+      status(row) {
+        return "primary";
+      },
+    },
+  ],
+});
+const paramConfig = reactive<ParamConfig[]>([
+  {
+    value: "param1",
+    optionData: [
+      { text: "全部", value: "" },
+      { text: "一", value: 1 },
+      { text: "二", value: 2 },
+    ],
+    defaultValue: "",
+  },
+  {
+    value: "param2",
+    optionData: [
+      { text: "全部", value: "" },
+      { text: "一", value: 1 },
+      { text: "二", value: 2 },
+    ],
+    defaultValue: "",
+  },
+]);
+
+const configObj = reactive<ListConfigObject<any>>({
+  hasSearch: true,
+  searchPlaceholder: "关键词搜索",
+  paramConfig,
+  listConfig,
+  getData(pageIndex, pageSize, params, keyword) {
+    return new Promise((resolve, reject) => {
+      let arr: any = [];
+      for (let i = 0; i < 20; i++) {
+        arr.push({
+          name: `name${i}`,
+          status: i % 2,
+        });
+      }
+      setTimeout(() => {
+        resolve({ data: arr, total: 20 });
+      }, 1000);
+    });
+  },
+});
+</script>
+
+<style lang="scss"></style>
+
+```
+
+###### yhm-form
+使用下面的模板创建一个列表
+
+```html
+<template>
+  <yhm-form
+    :options="options"
+    :formData="formData"
+    v-model:verification="verification">
+    <van-button
+      type="primary"
+      :disabled="!verification"
+      block
+      @click="submit">
+      确认
+    </van-button>
+  </yhm-form>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ConfigFormItem } from "yh-mobile-components/types";
+
+const formData = reactive<any>({});
+const options = reactive<ConfigFormItem[]>([
+  {
+    label: "数字",
+    type: "number",
+    name: "1",
+    defaultValue: "",
+    config: {},
+    itemChange(val, data) {
+      console.log(val, data);
+    },
+  },
+]);
+const verification = ref(false);
+
+function submit() {
+  if (verification.value) {
+    // 表单验证通过
+  } else {
+    // 表单验证没通过此时按钮也处于无法点击状态
+  }
+}
+</script>
+
+```
+
+###### yhm-info  
+信息展示包裹组件，用来包裹 yhm-info-item。
+
+|属性|必选|类型|说明|  
+|----|----|----|----|    
+|hasTop|否|boolean|是否在组件上方增加一个间隔|
+
+###### yhm-info-item
+信息展示元素组件，必须嵌入 yhm-info-item 使用。
+
+|属性|必选|类型|说明|  
+|----|----|----|----|  
+|span|是|number| 1 - 24的数字|
+|label|否|string|标签名|
+|value|否|number|标签值|
+|description|否|number|标签描述|
+|regularValue|否|number| 是否让值显示黑色 |
+|status|否|StatusType| 是否让值显示黑色 |
+
+```html
+<yhm-info has-top>
+<yhm-info>
+```
+
+###### yhm-datetime
+日期时间选择组件
+
+###### yhm-switch
+开关组件
+
+###### yhm-select
+下拉选择
+
+###### yhm-radio
+单选
+
+###### yhm-checkbox
+多选

package/form/yhmCheckbox.vue

@@ -27,8 +27,8 @@ import { vanOption } from "../types";
 
 const props = withDefaults(
   defineProps<{
-    error: boolean;
-    errorMessage: string;
+    error?: boolean;
+    errorMessage?: string;
     modelValue?: any[];
     disabled?: boolean;
     optionData: vanOption[];

package/form/yhmDatetime.vue

@@ -61,9 +61,9 @@ import { ref, computed, watch, nextTick } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    error: boolean;
-    errorMessage: string;
     type: "year" | "month" | "date" | "datetime" | "time";
+    error?: boolean;
+    errorMessage?: string;
     format?: string;
     disabled?: boolean;
     modelValue?: any;

package/form/yhmInput.vue

@@ -4,28 +4,73 @@
     v-bind="$attrs"
     :model-value="modelValue"
     @update:modelValue="changeHandler"
+    @keydown="keydownHandler"
+    :type="inputType"
     :error="error"
-    :error-message="errorMessage"></van-field>
+    :error-message="errorMessage">
+    <template
+      #right-icon
+      v-if="props.type === 'scan'">
+      <svg
+        width="20px"
+        height="20px"
+        style="vertical-align: middle"
+        viewBox="0 0 1000 1000"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          stroke="var(--van-field-right-icon-color)"
+          stroke-width="60"
+          stroke-linejoin="round"
+          fill="none"
+          d="M200,350 L200,200 L400,200  M600,200 L800,200 L800,400 M800,600 L800,800 L600,800 M400,800 L200,800 L200,600 M0,500 L1000,500"></path>
+      </svg>
+    </template>
+  </van-field>
 </template>
 <script setup lang="ts">
+import { computed } from "vue";
 const props = withDefaults(
   defineProps<{
-    error: boolean;
-    errorMessage: string;
+    type?: string;
+    error?: boolean;
+    errorMessage?: string;
     modelValue?: any;
+    scanCallback?: (val) => void;
   }>(),
-  {}
+  {
+    type: "text",
+  }
 );
 
+const inputType = computed(() => {
+  if (props.type === "scan") {
+    return "text";
+  } else {
+    return props.type;
+  }
+});
+
 const emits = defineEmits<{
   (e: "update:modelValue", val: any);
   (e: "change", val: any);
+  (e: "scan", val: any);
 }>();
 
 function changeHandler(val) {
   emits("update:modelValue", val);
   emits("change", val);
 }
+
+function keydownHandler(e: KeyboardEvent) {
+  let key = e.key;
+  if (key === "Enter" && props.type === "scan") {
+    console.log("scan");
+
+    if (props.scanCallback && typeof props.scanCallback === "function") {
+      props.scanCallback(props.modelValue);
+    }
+  }
+}
 </script>
 <style lang="scss">
 .yhm-input-container {

package/form/yhmPassword.vue

@@ -0,0 +1,106 @@
+<template>
+  <van-field
+    class="yhm-input-container"
+    v-bind="$attrs"
+    :model-value="modelValue"
+    @update:modelValue="changeHandler"
+    :type="inputType"
+    :error="error"
+    :error-message="errorMessage">
+    <template #right-icon>
+      <svg
+        width="40px"
+        height="20px"
+        style="vertical-align: middle"
+        viewBox="0 0 2000 1000"
+        xmlns="http://www.w3.org/2000/svg"
+        @click="showPassword = !showPassword">
+        <path
+          d="M100,100 L1900,100 L1900,900 L100,900 Z"
+          stroke="var(--van-field-right-icon-color)"
+          stroke-width="60"
+          stroke-linejoin="round"
+          fill="none"></path>
+        <g v-if="!showPassword">
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="500"
+            cy="500"></circle>
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="1000"
+            cy="500"></circle>
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="1500"
+            cy="500"></circle>
+        </g>
+        <g v-else>
+          <polyline
+            points="350,300 650,300 500,300 500 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+          <polyline
+            points="850,300 1150,300 1000,300 1000 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+          <polyline
+            points="1350,300 1650,300 1500,300 1500 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+        </g>
+      </svg>
+    </template>
+  </van-field>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    scanCallback?: (val) => void;
+  }>(),
+  {}
+);
+
+const showPassword = ref(false);
+
+const inputType = computed(() => {
+  if (showPassword.value) {
+    return "text";
+  } else {
+    return "password";
+  }
+});
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any);
+  (e: "change", val: any);
+}>();
+
+function changeHandler(val) {
+  emits("update:modelValue", val);
+  emits("change", val);
+}
+</script>
+<style lang="scss">
+.yhm-input-container {
+  .van-field__control {
+    text-align: right;
+  }
+}
+</style>

package/form/yhmRadio.vue

@@ -26,8 +26,8 @@ import { vanOption } from "../types";
 
 const props = withDefaults(
   defineProps<{
-    error: boolean;
-    errorMessage: string;
+    error?: boolean;
+    errorMessage?: string;
     modelValue?: any;
     disabled?: boolean;
     optionData: vanOption[];

package/form/yhmSelect.vue

@@ -29,8 +29,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 
-const props = withDefaults(defineProps<{ error: boolean; errorMessage: string; modelValue?: any; disabled?: boolean; palceholder?: string; optionData: any[] }>(), {
-  type: "datetime",
+const props = withDefaults(defineProps<{ error?: boolean; errorMessage?: string; modelValue?: any; disabled?: boolean; palceholder?: string; optionData: any[] }>(), {
   disabled: false,
   palceholder: "请选择",
 });

package/form/yhmSwitch.vue

@@ -29,8 +29,8 @@ import { computed } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    error: boolean;
-    errorMessage: string;
+    error?: boolean;
+    errorMessage?: string;
     modelValue?: any;
     disabled?: boolean;
     size?: number;

package/index.ts

@@ -1,5 +1,6 @@
 import yhmList from "./info/yhmList.vue";
 import yhmDropdownItem from "./info/yhmDropdownItem.vue";
+import yhmTabs from "./info/yhmTabs.vue";
 import yhmInfo from "./info/yhmInfo.vue";
 import yhmInfoItem from "./info/yhmInfoItem.vue";
 import yhmForm from "./form/yhm-form.vue";
@@ -9,10 +10,16 @@ import yhmCheckbox from "./form/yhmCheckbox.vue";
 import yhmSelect from "./form/yhmSelect.vue";
 import yhmInput from "./form/yhmInput.vue";
 import yhmSwitch from "./form/yhmSwitch.vue";
+import yhmPassword from "./form/yhmPassword.vue";
+import vant from "vant";
+import "vant/lib/index.css";
+import "yh-mobile-components/custom.scss";
+
 export default {
   install(app) {
     app.component("yhm-list", yhmList);
     app.component("yhm-dropdown-item", yhmDropdownItem);
+    app.component("yhm-tabs", yhmTabs);
     app.component("yhm-info", yhmInfo);
     app.component("yhm-info-item", yhmInfoItem);
     app.component("yhm-form", yhmForm);
@@ -22,5 +29,7 @@ export default {
     app.component("yhm-input", yhmInput);
     app.component("yhm-select", yhmSelect);
     app.component("yhm-switch", yhmSwitch);
+    app.component("yhm-password", yhmPassword);
+    app.use(vant);
   },
 };

package/info/yhmInfoItem.vue

@@ -43,7 +43,8 @@ const widthCount = computed(() => {
   margin-right: 8px;
   .yhm-info-item {
     display: flex;
-    line-height: 24px;
+    padding: 4px 0;
+    line-height: 18px;
     .yhm-info-item-value {
       flex: 1;
       text-align: right;
@@ -59,7 +60,8 @@ const widthCount = computed(() => {
   }
   .yhm-info-description {
     color: var(--van-text-color-2);
-    line-height: 20px;
+    padding: 2px 0;
+    line-height: 16px;
   }
   &.primary {
     .yhm-info-item {

package/info/yhmList.vue

@@ -7,14 +7,23 @@
         :placeholder="searchPlaceholder"
         @update:model-value="getList(true)"
         :clearable="false"></van-search>
-      <van-dropdown-menu v-if="paramConfig && paramConfig.length">
-        <yhm-dropdown-item
+      <template v-if="paramConfig && paramConfig.length">
+        <van-dropdown-menu v-if="paramType === 'dropdown'">
+          <yhm-dropdown-item
+            :valueObj="params"
+            :value="conf.value"
+            :optionData="conf.optionData"
+            v-for="conf in paramConfig"
+            @change="getList(true)"></yhm-dropdown-item>
+        </van-dropdown-menu>
+        <yhm-tabs
+          v-else
           :valueObj="params"
           :value="conf.value"
           :optionData="conf.optionData"
           v-for="conf in paramConfig"
-          @change="getList(true)"></yhm-dropdown-item>
-      </van-dropdown-menu>
+          @change="getList(true)"></yhm-tabs>
+      </template>
     </section>
     <van-pull-refresh
       v-model="refreshing"
@@ -31,7 +40,7 @@
           <yhm-info has-top>
             <template v-for="item in listConfig?.items">
               <yhm-info-item
-                v-if="!item.show || (item.show && item.show(row))"
+                v-if="!item.show || (item.show && item.show(row, params, keyword))"
                 :label="item.label"
                 :span="item.span"
                 :status="item.status && item.status(row)"
@@ -71,6 +80,7 @@ const props = withDefaults(
     hasSearch?: boolean;
     /** 关键字筛选提示语 */
     searchPlaceholder?: string;
+    paramType?: "dropdown" | "tabs";
     /** 下拉筛选条件配置 */
     paramConfig?: ParamConfig[];
     /** 列表项目筛选 */

package/info/yhmTabs.vue

@@ -0,0 +1,92 @@
+<template>
+  <section
+    class="yhm-tabs"
+    ref="yhmTabsRef">
+    <div
+      class="yhm-tab-item"
+      :class="{ active: option.value === modelValue }"
+      @click="updateHandler($event, option.value)"
+      v-for="option in optionData">
+      {{ option.text }}
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import type { vanOption } from "../types";
+import { computed, watch, ref } from "vue";
+
+const props = defineProps<{
+  valueObj: any;
+  value: string;
+  optionData: vanOption[];
+}>();
+
+const emits = defineEmits<{
+  (e: "change");
+}>();
+
+const modelValue = computed({
+  get() {
+    return props.valueObj[props.value];
+  },
+  set(val) {
+    props.valueObj[props.value] = val;
+  },
+});
+const yhmTabsRef = ref();
+watch(
+  () => modelValue.value,
+  (val) => {
+    let optionVals = props.optionData.map((item) => item.value);
+    if (optionVals && optionVals.length && yhmTabsRef.value) {
+      let items: HTMLDivElement[] = Array.from(yhmTabsRef.value.querySelectorAll(".yhm-tab-item"));
+      let index = optionVals.indexOf(val);
+      items[index]?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+    }
+  }
+);
+
+function updateHandler(e, val: string | number) {
+  modelValue.value = val;
+  emits("change");
+}
+</script>
+<style lang="scss">
+.yhm-tabs {
+  display: flex;
+  background-color: var(--van-white);
+  padding-bottom: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  &:first-child {
+    padding-top: 5px;
+  }
+  .yhm-tab-item {
+    flex: 1 0 auto;
+    text-align: center;
+    font-size: 14px;
+    line-height: 18px;
+    padding: 3px 15px;
+    color: var(--van-primary-color);
+    border: 1px solid var(--van-primary-color);
+    &:first-child {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+    &:last-child {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+    &.active {
+      color: var(--van-white);
+      background-color: var(--van-primary-color);
+    }
+  }
+  .yhm-tab-item + .yhm-tab-item {
+    border-left: 0;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-mobile-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "移动端组件封装及配置化需求",
   "main": "index.js",
   "scripts": {

package/types.ts

@@ -31,10 +31,18 @@ export interface ListItem<T> {
   description: keyof T;
   /** 自定义插槽，用来渲染自定义元素 */
   slot?: string;
-  /** 值的样式，自定义不同的颜色 */
-  status?: (row: T) => StatusType;
-  /** 是否显示 */
-  show?: (row: T) => boolean;
+  /** 值的样式，自定义不同的颜色
+   * @param row 当前行数据
+   * @param params 列表筛选数据
+   * @param keyword 列表筛选关键字
+   */
+  status?: (row: T, parmas: any, keyword: string) => StatusType;
+  /** 是否显示
+   * @param row 当前行数据
+   * @param params 列表筛选数据
+   * @param keyword 列表筛选关键字
+   */
+  show?: (row: T, parmas: any, keyword: string) => boolean;
 }
 
 /** 列表配置 */
@@ -48,6 +56,7 @@ export interface ListConfig<T> {
 export interface ListConfigObject<T> {
   hasSearch: boolean;
   searchPlaceholder: string;
+  paramType: "dropdown" | "tabs";
   paramConfig: ParamConfig[];
   listConfig: ListConfig<T>;
   getData: (pageIndex, pageSie, params, keyword) => Promise<{ data: any[]; total: number }>;
@@ -62,7 +71,7 @@ export interface vanOption {
 }
 
 export type DateTimeType = "year" | "month" | "datetime" | "date" | "time";
-export type InputType = "color" | "email" | "number" | "tel" | "text" | "textarea" | "url" | "digit";
+export type InputType = "color" | "email" | "number" | "tel" | "text" | "textarea" | "url" | "digit" | "scan";
 export type OtherType = "checkbox" | "radio" | "select" | "switch" | "password" | "rate" | "signature" | "cascader" | "slider" | "stepper";
 
 export type FromItemType = OtherType | InputType | DateTimeType;

package/readme.md

@@ -1,47 +0,0 @@
-# PDA(移动端竖屏) 组件库
-
-**此包依赖**  
-- vue 3.2.47
-- pinia 2.0.35
-- vant 4.8.1
-
-## 愿景
-
-提供一系列的列表、表单组件封装。基于封装的组件，提供一定程度的配置化
-
-###### 页面框架组件
-- ⬜ yhm-list 可配置列表组件
-- ⬜ yhm-form 可配置表单组件
-
-###### 布局元素组件
-- ⬜ yhm-info 信息展示包裹组件
-- ⬜ yhm-info-item 信息展示元素组件
-  - 支持配置 span 来设定字段显示宽度
-
-###### 补充表单组件
-> 表单组件向 van-field 看齐，属性名称及含义尽量复用
-
-- ⬜ yhm-datetime 时间日期选择 提供google设计规范的时间日期选择器
-- ⬜ yhm-switch 开关组件封装 
-- ⬜ yhm-select 下拉选择组件（封装van-picker）
-- ⬜ yhm-radio 单选组件
-- ⬜ yhm-checkbox 多选组件
-
-
-## 业务使用
-
-使用组合式的方式来进行页面开发，并在后续的业务中逐步替代老的方式。
-
-###### 列表页
-```html
-<template>
-  <yhm-list-page>
-    <yhm-info>
-      
-    </yhm-info>
-  </yhm-list-page>
-</template>
-<script setup lange=ts>
-import { yhm-list-page } from "yh-i18n-m";
-</script>
-```