yh-mobile-components 1.0.4 → 1.0.6

package/form/yhmCascader.vue

@@ -0,0 +1,5 @@
+<template>
+  <section></section>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>

package/form/yhmPassword.vue

@@ -1,6 +1,7 @@
 <template>
   <van-field
-    class="yhm-input-container"
+    class="yhm-password-container"
+    ref="passwordRef"
     v-bind="$attrs"
     :model-value="modelValue"
     @update:modelValue="changeHandler"
@@ -14,13 +15,13 @@
         style="vertical-align: middle"
         viewBox="0 0 2000 1000"
         xmlns="http://www.w3.org/2000/svg"
-        @click="showPassword = !showPassword">
+        @click="changeShowPassword">
         <path
-          d="M100,100 L1900,100 L1900,900 L100,900 Z"
+          d="M100,500 L100,200 S100,100 200,100 L1800,100 S1900,100 1900,200 L1900,800 S1900,900 1800,900 L200,900 S100,900 100,800 Z"
           stroke="var(--van-field-right-icon-color)"
-          stroke-width="60"
-          stroke-linejoin="round"
+          stroke-width="50"
           fill="none"></path>
+        pa
         <g v-if="!showPassword">
           <circle
             r="150"
@@ -46,18 +47,21 @@
             points="350,300 650,300 500,300 500 700"
             stroke="var(--van-field-right-icon-color)"
             stroke-width="60"
+            stroke-linecap="round"
             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-linecap="round"
             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-linecap="round"
             stroke-linejoin="round"
             fill="none"></polyline>
         </g>
@@ -96,9 +100,15 @@ function changeHandler(val) {
   emits("update:modelValue", val);
   emits("change", val);
 }
+
+const passwordRef = ref();
+function changeShowPassword() {
+  showPassword.value = !showPassword.value;
+  passwordRef.value?.focus();
+}
 </script>
 <style lang="scss">
-.yhm-input-container {
+.yhm-password-container {
   .van-field__control {
     text-align: right;
   }

package/form/yhmRate.vue

@@ -0,0 +1,5 @@
+<template>
+  <section></section>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>

package/form/yhmSignature.vue

@@ -0,0 +1,5 @@
+<template>
+  <section></section>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>

package/form/yhmSlider.vue

@@ -0,0 +1,5 @@
+<template>
+  <section></section>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>

package/form/yhmStepper.vue

@@ -0,0 +1,5 @@
+<template>
+  <section></section>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>

package/index.ts

@@ -3,6 +3,7 @@ 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 yhmTable from "./info/yhmTable.vue";
 import yhmForm from "./form/yhm-form.vue";
 import yhmDatetime from "./form/yhmDatetime.vue";
 import yhmRadio from "./form/yhmRadio.vue";
@@ -11,6 +12,11 @@ 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 yhmCascader from "./form/yhmCascader.vue";
+import yhmRate from "./form/yhmRate.vue";
+import yhmSignature from "./form/yhmSignature.vue";
+import yhmSlider from "./form/yhmSlider.vue";
+import yhmStepper from "./form/yhmStepper.vue";
 import vant from "vant";
 import "vant/lib/index.css";
 import "yh-mobile-components/custom.scss";
@@ -22,6 +28,7 @@ export default {
     app.component("yhm-tabs", yhmTabs);
     app.component("yhm-info", yhmInfo);
     app.component("yhm-info-item", yhmInfoItem);
+    app.component("yhm-table", yhmTable);
     app.component("yhm-form", yhmForm);
     app.component("yhm-datetime", yhmDatetime);
     app.component("yhm-radio", yhmRadio);
@@ -30,6 +37,11 @@ export default {
     app.component("yhm-select", yhmSelect);
     app.component("yhm-switch", yhmSwitch);
     app.component("yhm-password", yhmPassword);
+    app.component("yhm-cascader", yhmCascader);
+    app.component("yhm-rate", yhmRate);
+    app.component("yhm-signature", yhmSignature);
+    app.component("yhm-slider", yhmSlider);
+    app.component("yhm-stepper", yhmStepper);
     app.use(vant);
   },
 };

package/info/yhmList.vue

@@ -40,10 +40,10 @@
           <yhm-info has-top>
             <template v-for="item in listConfig?.items">
               <yhm-info-item
-                v-if="!item.show || (item.show && item.show(row, params, keyword))"
+                v-if="!item.show || (item.show && item.show(row))"
                 :label="item.label"
                 :span="item.span"
-                :status="item.status && item.status(row, params, keyword)"
+                :status="item.status && item.status(row)"
                 :description="row[item.description] || item.description"
                 :value="row[item.value] || item.value">
                 <slot
@@ -119,13 +119,12 @@ async function getList(isClear = false) {
   }
   listError.value = false;
   timer = setTimeout(async () => {
+    listLoading.value = true;
     if (isClear) {
       list.value = [];
       finished.value = false;
       refreshing.value = true;
       pageIndex.value = 1;
-    } else {
-      listLoading.value = true;
     }
     let { data: l, total: t } = await props.getData(pageIndex.value, pageSize.value, params, keyword);
     try {
@@ -164,6 +163,10 @@ onMounted(() => {
 });
 
 onActivated(() => {});
+
+defineExpose({
+  getList,
+});
 </script>
 <style lang="scss">
 .yhm-list-container {

package/info/yhmTable.vue

@@ -0,0 +1,21 @@
+<template>
+  <section class="yhm-table-container">
+    <table>
+      <colgroup>
+        <col />
+      </colgroup>
+      <tr></tr>
+    </table>
+  </section>
+  <talbe class="yhm-talbe-"></talbe>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns: ColumnItem[];
+  }>(),
+  {}
+);
+</script>
+<style lang="scss"></style>

package/package.json

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

package/types.ts

@@ -33,16 +33,12 @@ export interface ListItem<T> {
   slot?: string;
   /** 值的样式，自定义不同的颜色
    * @param row 当前行数据
-   * @param params 列表筛选数据
-   * @param keyword 列表筛选关键字
    */
-  status?: (row: T, parmas: any, keyword: string) => StatusType;
+  status?: (row: T) => StatusType;
   /** 是否显示
    * @param row 当前行数据
-   * @param params 列表筛选数据
-   * @param keyword 列表筛选关键字
    */
-  show?: (row: T, parmas: any, keyword: string) => boolean;
+  show?: (row: T) => boolean;
 }
 
 /** 列表配置 */
@@ -56,7 +52,7 @@ export interface ListConfig<T> {
 export interface ListConfigObject<T> {
   hasSearch: boolean;
   searchPlaceholder: string;
-  paramType: "dropdown" | "tabs";
+  paramType?: "dropdown" | "tabs";
   paramConfig: ParamConfig[];
   listConfig: ListConfig<T>;
   getData: (pageIndex, pageSie, params, keyword) => Promise<{ data: any[]; total: number }>;
@@ -126,3 +122,10 @@ export interface ConfigFormItem {
   /** 不同类型表单项的个性化配置 */
   config: ConfigFormItem["type"] extends DateTimeType ? DatetimeConfig : ConfigFormItem["type"] extends "checkbox" ? CheckboxConfig : ConfigFormItem["type"] extends "radio" ? RadioConfig : ConfigFormItem["type"] extends "select" ? SelectConfig : ConfigFormItem["type"] extends "switch" ? SwitchConfig : {};
 }
+
+/** 表格单元格 */
+export interface ColumnItem {
+  /** 表头名 */
+  label: string;
+  prop: string;
+}