yh-mobile-components 1.0.0

package/custom.scss

@@ -0,0 +1,167 @@
+$Blue: (
+  1: #f2f3ff,
+  2: #d9e1ff,
+  3: #b5c7ff,
+  4: #8eabff,
+  5: #618dff,
+  6: #366ef4,
+  7: #0052d9,
+  8: #003cab,
+  9: #002a7c,
+  10: #001a57,
+);
+
+$Red: (
+  1: #fff0ed,
+  2: #ffd8d2,
+  3: #ffb9b0,
+  4: #ff9285,
+  5: #f6685d,
+  6: #d54941,
+  7: #ad352f,
+  8: #881f1c,
+  9: #68070a,
+  10: #490002,
+);
+
+$Orange: (
+  1: #fff1e9,
+  2: #ffd9c2,
+  3: #ffb98c,
+  4: #fa9550,
+  5: #e37318,
+  6: #be5a00,
+  7: #954500,
+  8: #713300,
+  9: #532300,
+  10: #3b1700,
+);
+
+$Green: (
+  1: #e3f9e9,
+  2: #c6f3d7,
+  3: #92dab2,
+  4: #56c08d,
+  5: #2ba471,
+  6: #008858,
+  7: #006c45,
+  8: #005334,
+  9: #003b23,
+  10: #002515,
+);
+
+$Gray: (
+  1: #f3f3f3,
+  2: #eeeeee,
+  3: #e8e8e8,
+  4: #dddddd,
+  5: #c6c6c6,
+  6: #a6a6a6,
+  7: #8b8b8b,
+  8: #777777,
+  9: #5e5e5e,
+  10: #4b4b4b,
+  11: #393939,
+  12: #2c2c2c,
+  13: #242424,
+  14: #181818,
+);
+
+$Cyan: (
+  1: #e8f5ff,
+  2: #c4e8ff,
+  3: #85d3ff,
+  4: #41b8f2,
+  5: #029cd4,
+  6: #0080b0,
+  7: #00668e,
+  8: #004e6d,
+  9: #003850,
+  10: #002536,
+);
+
+$Purple: (
+  1: #fbf0ff,
+  2: #eedcff,
+  3: #dcbfff,
+  4: #c69cff,
+  5: #ad75fe,
+  6: #8e56dd,
+  7: #7137bf,
+  8: #5610a4,
+  9: #3b007b,
+  10: #280057,
+);
+
+$Yellow: (
+  1: #fff5e4,
+  2: #ffe7b5,
+  3: #ffd36d,
+  4: #f5ba18,
+  5: #d8a100,
+  6: #b38500,
+  7: #8b6600,
+  8: #654900,
+  9: #443000,
+  10: #2b1d00,
+);
+
+$Pink: (
+  1: #fff0f6,
+  2: #ffd8eb,
+  3: #ffaedc,
+  4: #ff79cd,
+  5: #e851b3,
+  6: #c43695,
+  7: #a12279,
+  8: #800a5f,
+  9: #610046,
+  10: #43002f,
+);
+
+:root {
+  @each $index, $color in $Blue {
+    --van-blue-#{$index}: #{$color};
+  }
+  @each $index, $color in $Red {
+    --van-red-#{$index}: #{$color};
+  }
+  @each $index, $color in $Orange {
+    --van-orange-#{$index}: #{$color};
+  }
+  @each $index, $color in $Green {
+    --van-green-#{$index}: #{$color};
+  }
+  @each $index, $color in $Gray {
+    --van-gray-#{$index}: #{$color};
+  }
+  @each $index, $color in $Cyan {
+    --van-cyan-#{$index}: #{$color};
+  }
+  @each $index, $color in $Purple {
+    --van-purple-#{$index}: #{$color};
+  }
+  @each $index, $color in $Yellow {
+    --van-yellow-#{$index}: #{$color};
+  }
+  @each $index, $color in $Pink {
+    --van-pink-#{$index}: #{$color};
+  }
+  --van-red: var(--van-red-6);
+  --van-blue: var(--van-blue-7);
+  --van-orange: var(--van-orange-5);
+  --van-orange-dark: var(--van-orange-7);
+  --van-orange-light: var(--van-orange-2);
+  --van-green: var(--van-green-5);
+  --van-cyan: var(--van-cyan-5);
+  --van-purple: var(--van-purple-6);
+  --van-yellow: var(--van-yellow-4);
+  --van-pink: var(--van-pink-5);
+  --van-text-color: var(--van-gray-14);
+  --van-text-color-2: var(--van-gray-8);
+  --van-text-color-3: var(--van-gray-5);
+  --van-primary-bg: var(--van-blue-2);
+  --van-success-bg: var(--van-green-2);
+  --van-danger-bg: var(--van-red-2);
+  --van-warning-bg: var(--van-orange-2);
+}

package/form/yhm-form.vue

@@ -0,0 +1,174 @@
+<style lang="scss">
+.yhm-form-container {
+  padding: 16px 0;
+  .van-form {
+    margin-bottom: 16px;
+  }
+  .yhm-form-actions {
+    padding: 0 16px;
+  }
+}
+</style>
+<template>
+  <section class="yhm-form-container">
+    <van-form>
+      <template v-for="item in optionsConfig">
+        <component
+          :is="item.component"
+          v-bind="item.attrs"
+          :error="item.error"
+          :error-message="item.errorMessage"
+          :model-value="formData[item.name]"
+          @update:modelValue="handlerChange($event, item)"></component>
+      </template>
+    </van-form>
+    <div class="yhm-form-actions">
+      <slot></slot>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { computed, watch, reactive, onMounted } from "vue";
+import { ConfigFormItem, SwitchConfig } from "../types";
+
+const props = defineProps<{
+  options: ConfigFormItem[];
+  formData: any;
+  verification: boolean;
+}>();
+
+interface ConfigItem {
+  component: string;
+  rex: ConfigFormItem["rex"];
+  rexMsg: ConfigFormItem["rexMsg"];
+  name: ConfigFormItem["name"];
+  defaultValue: ConfigFormItem["defaultValue"];
+  error: boolean;
+  errorMessage: string;
+  attrs: Record<string, any>;
+  itemChange?: (val, data) => void;
+}
+
+const optionsConfig = computed<ConfigItem[]>(() => {
+  return props.options.map((item) => {
+    let { label, required, name, defaultValue, disabled, placeholder, type, rexMsg, rex, itemChange, labelAlign, config } = item;
+    let error = false;
+    let errorMessage = "";
+    let component = "yhm-input";
+    switch (type) {
+      case "year":
+      case "month":
+      case "datetime":
+      case "date":
+      case "time":
+        component = "yhm-datetime";
+        if (!defaultValue) defaultValue = "";
+        break;
+      case "radio":
+        component = "yhm-radio";
+        if (!defaultValue) defaultValue = "";
+        break;
+      case "select":
+        component = "yhm-select";
+        if (!defaultValue) defaultValue = "";
+        break;
+      case "switch":
+        component = "yhm-switch";
+        if (!defaultValue) defaultValue = (config as SwitchConfig).activeValue || "";
+        break;
+      case "checkbox":
+        component = "yhm-checkbox";
+        if (!defaultValue) defaultValue = [];
+        break;
+    }
+    return {
+      component,
+      rex,
+      rexMsg,
+      name,
+      defaultValue,
+      error,
+      errorMessage,
+      attrs: {
+        label,
+        required,
+        disabled,
+        placeholder,
+        type,
+        labelAlign,
+        ...config,
+      },
+      itemChange,
+    };
+  });
+});
+
+const emits = defineEmits<{
+  (e: "update:verification", val: boolean);
+}>();
+
+const verificationResult = reactive<any>({});
+
+watch(
+  () => verificationResult,
+  (val) => {
+    let vals = Object.values(val);
+    let flag = !(vals && vals.includes(true));
+    emits("update:verification", flag);
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+function handlerChange(val, item) {
+  let {
+    name,
+    itemChange,
+    rex,
+    rexMsg,
+    attrs: { required },
+  } = item;
+
+  props.formData[name] = val;
+
+  if (itemChange && typeof itemChange === "function") {
+    itemChange(val, props.formData);
+  }
+  let valFlag = false;
+  if (val instanceof Array) {
+    valFlag = val.length > 0;
+  } else if (typeof val === "number") {
+    valFlag = !isNaN(val);
+  } else {
+    valFlag = !!val;
+  }
+  let flag = true;
+  if (rex && rex instanceof RegExp) {
+    flag = rex.test(val);
+    if (!flag) {
+      item.error = true;
+      item.errorMessage = rexMsg;
+    }
+  }
+  if (rex === undefined && typeof required === "boolean" && required && !valFlag) {
+    flag = false;
+    item.error = true;
+    item.errorMessage = `${item.attrs.label}不能为空`;
+  }
+  if (flag) {
+    verificationResult[name] = false;
+    item.error = false;
+    item.errorMessage = "";
+  } else {
+    verificationResult[name] = true;
+  }
+}
+
+onMounted(() => {
+  optionsConfig.value.forEach((option) => {
+    handlerChange(option.defaultValue || "", option);
+  });
+});
+</script>

package/form/yhmCheckbox.vue

@@ -0,0 +1,60 @@
+<template>
+  <van-field
+    class="yhm-radio-container"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :error="error"
+    :error-message="errorMessage">
+    <template #input>
+      <div class="yhm-radio-list">
+        <van-checkbox-group
+          shape="square"
+          :disabled="disabled"
+          :model-value="modelValue"
+          @update:modelValue="changeHandler">
+          <van-checkbox
+            v-for="option in optionData"
+            :name="option.value">
+            {{ option.text }}
+          </van-checkbox>
+        </van-checkbox-group>
+      </div>
+    </template>
+  </van-field>
+</template>
+<script setup lang="ts">
+import { vanOption } from "../types";
+
+const props = withDefaults(
+  defineProps<{
+    error: boolean;
+    errorMessage: string;
+    modelValue?: any[];
+    disabled?: boolean;
+    optionData: vanOption[];
+  }>(),
+  {}
+);
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any);
+  (e: "change", val: string);
+}>();
+
+function changeHandler(val) {
+  emits("update:modelValue", val);
+}
+</script>
+<style lang="scss">
+.yhm-radio-container {
+  .yhm-radio-list {
+    flex: 1;
+    .van-checkbox {
+      padding-bottom: 5px;
+      &:first-child {
+        padding-top: 5px;
+      }
+    }
+  }
+}
+</style>