yh-mobile-components 1.0.5 → 1.0.7

package/form/yhmCascader.vue

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

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

@@ -54,12 +54,14 @@
             </template>
           </yhm-info>
           <yhm-info class="yhm-list-item-actions">
-            <div
-              v-for="btn in listConfig.btns"
-              :class="`yhm-list-btn${btn.type ? ' ' + btn.type : ''}`"
-              @click="() => btn.callback(row)">
-              {{ btn.text }}
-            </div>
+            <template v-for="btn in listConfig.btns">
+              <div
+                v-if="!item.show || (item.show && item.show(row))"
+                :class="`yhm-list-btn${btn.type ? ' ' + btn.type : ''}`"
+                @click="() => btn.callback(row)">
+                {{ btn.text }}
+              </div>
+            </template>
           </yhm-info>
         </template>
       </van-list>
@@ -163,6 +165,10 @@ onMounted(() => {
 });
 
 onActivated(() => {});
+
+defineExpose({
+  getList,
+});
 </script>
 <style lang="scss">
 .yhm-list-container {

package/info/yhmTable.vue

@@ -0,0 +1,87 @@
+<template>
+  <section class="yhm-table-container">
+    <table class="yhm-table">
+      <colgroup>
+        <col
+          v-for="col in columns"
+          :width="col.width"
+          :align="col.align" />
+      </colgroup>
+      <tr>
+        <th
+          v-for="column in columns"
+          :align="column.align">
+          {{ column.label }}
+        </th>
+      </tr>
+      <tr v-for="row in data">
+        <td
+          v-for="column in columns"
+          :align="column.align">
+          {{ row[column.prop] }}
+        </td>
+      </tr>
+    </table>
+  </section>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { ColumnItem } from "../types";
+
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    hasIndex?: boolean;
+    columns: ColumnItem[];
+  }>(),
+  {
+    data: [],
+    hasIndex: false,
+    columns: [],
+  }
+);
+
+const tableWidth = computed(() => {
+  let width = props.columns.reduce((accumulator, column) => {
+    let w = parseInt(column.width);
+    if (!isNaN(w)) {
+      w = 0;
+    }
+    return accumulator + w;
+  }, 0);
+
+  return width === 0 ? "100%" : `${width}px`;
+});
+</script>
+<style lang="scss">
+.yhm-table-container {
+  width: 100%;
+  overflow-x: auto;
+  .yhm-table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: 100%;
+    width: v-bind(tableWidth);
+    position: relative;
+    background-color: var(--van-white);
+    th,
+    td {
+      box-sizing: border-box;
+      padding: 10px 16px;
+      line-height: 24px;
+      font-size: var(--van-font-size-md);
+    }
+    th {
+      color: var(--van-text-color);
+      font-weight: 400;
+    }
+    td {
+      color: var(--van-text-color-2);
+    }
+    tr + tr {
+      border-top: 1px solid var(--van-gray-1);
+    }
+  }
+}
+</style>

package/package.json

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

package/types.ts

@@ -17,6 +17,10 @@ export interface ListBtn {
   text: string;
   /** 按钮被点击后的回调函数 */
   callback: (row) => void;
+  /** 是否显示
+   * @param row 当前行数据
+   */
+  show?: (row: T) => boolean;
 }
 
 /** 列表对象字段 */
@@ -122,3 +126,12 @@ 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;
+  width: string;
+  align: "left" | "center" | "right";
+}