yh-mobile-components 1.0.0

package/form/yhmDatetime.vue

@@ -0,0 +1,176 @@
+<template>
+  <van-field
+    class="yhm-datetime-container"
+    :disabled="disabled"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage">
+    <template #input>
+      <div
+        class="yhm-datetime-value"
+        :class="valueClass"
+        @click="toChoose">
+        {{ valueString }}
+      </div>
+    </template>
+  </van-field>
+  <van-popup
+    v-model:show="show"
+    class="yhm-datetime-container"
+    position="bottom">
+    <van-nav-bar
+      left-text="清除"
+      @click-left="cancelChoose"
+      :title="`请选择${typeName}`"
+      right-text="确认"
+      @click-right="commitChoose"></van-nav-bar>
+    <van-tabs v-model:active="activeTab">
+      <van-tab
+        title="日期选择"
+        v-if="['year', 'month', 'date', 'datetime'].includes(type)">
+        <choose-date
+          ref="chooseDateRef"
+          :type="type"
+          v-model="ownValue"></choose-date>
+      </van-tab>
+      <van-tab
+        title="时间选择"
+        v-if="['datetime', 'time'].includes(type)">
+        <choose-time
+          ref="chooseTimeRef"
+          :type="type"
+          v-model="ownValue"></choose-time>
+      </van-tab>
+      <van-tab :title="`${typeName}输入`">
+        <input-date-time
+          ref="inputDateTimeRef"
+          :format="format || typeFormat"
+          :type="type"
+          :type-name="typeName"
+          v-model="ownValue"></input-date-time>
+      </van-tab>
+    </van-tabs>
+  </van-popup>
+</template>
+<script setup lang="ts">
+import chooseDate from "./yhmDateTime/chooseDate.vue";
+import chooseTime from "./yhmDateTime/chooseTime.vue";
+import inputDateTime from "./yhmDateTime/inputDateTime.vue";
+import dayjs from "dayjs";
+import { ref, computed, watch, nextTick } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    error: boolean;
+    errorMessage: string;
+    type: "year" | "month" | "date" | "datetime" | "time";
+    format?: string;
+    disabled?: boolean;
+    modelValue?: any;
+    placeholder?: string;
+  }>(),
+  {
+    type: "datetime",
+    disabled: false,
+    placeholder: "请选择日期",
+  }
+);
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: string);
+  (e: "change", val: string);
+}>();
+
+const chooseDateRef = ref();
+const chooseTimeRef = ref();
+const inputDateTimeRef = ref();
+
+const ownValue = ref(dayjs());
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    let date = dayjs(val);
+    if (date.isValid() && date.valueOf() !== ownValue.value.valueOf()) {
+      ownValue.value = date;
+    }
+  }
+);
+
+const valueString = computed(() => {
+  return props.modelValue || props.placeholder;
+});
+
+const valueClass = computed(() => {
+  return {
+    placeholder: !props.modelValue,
+  };
+});
+
+const typeFormat = ref("YYYY-MM-DD HH:mm:ss");
+const typeName = computed(() => {
+  switch (props.type) {
+    case "year":
+      typeFormat.value = "YYYY-01-01 00:00:00";
+      return "年";
+    case "month":
+      typeFormat.value = "YYYY-MM-01 00:00:00";
+      return "年月";
+    case "date":
+      typeFormat.value = "YYYY-MM-DD 00:00:00";
+      return "日期";
+    case "time":
+      typeFormat.value = "HH:mm:ss";
+      return "时间";
+    case "datetime":
+      typeFormat.value = "YYYY-MM-DD HH:mm:ss";
+      return "日期时间";
+  }
+});
+
+const show = ref(false);
+
+function toChoose() {
+  if (props.disabled) {
+    return false;
+  }
+  show.value = true;
+  let date = dayjs(props.modelValue);
+  if (date.isValid() && date.valueOf() !== ownValue.value.valueOf()) {
+    ownValue.value = date;
+  }
+  nextTick(() => {
+    chooseDateRef.value?.syncModelValue();
+    chooseTimeRef.value?.syncModelValue();
+    inputDateTimeRef.value?.syncModelValue();
+  });
+}
+function cancelChoose() {
+  show.value = false;
+  emits("update:modelValue", "");
+}
+
+function commitChoose() {
+  let val = ownValue.value.format(props.format || typeFormat.value);
+  emits("update:modelValue", val);
+  show.value = false;
+}
+
+const activeTab = ref(0);
+</script>
+<style lang="scss">
+.yhm-datetime-container {
+  --van-switch-width: calc(3em + 4px);
+  .yhm-datetime-value {
+    flex: 1;
+    width: 100%;
+    text-align: right;
+    &.placeholder {
+      color: var(--van-text-color-3);
+    }
+  }
+  &.van-popup {
+    height: 560px;
+  }
+}
+</style>

package/form/yhmInput.vue

@@ -0,0 +1,36 @@
+<template>
+  <van-field
+    class="yhm-input-container"
+    v-bind="$attrs"
+    :model-value="modelValue"
+    @update:modelValue="changeHandler"
+    :error="error"
+    :error-message="errorMessage"></van-field>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    error: boolean;
+    errorMessage: string;
+    modelValue?: any;
+  }>(),
+  {}
+);
+
+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

@@ -0,0 +1,59 @@
+<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-radio-group
+          :disabled="disabled"
+          :model-value="modelValue"
+          @update:modelValue="changeHandler">
+          <van-radio
+            v-for="option in optionData"
+            :name="option.value">
+            {{ option.text }}
+          </van-radio>
+        </van-radio-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-radio {
+      padding-bottom: 5px;
+      &:first-child {
+        padding-top: 5px;
+      }
+    }
+  }
+}
+</style>

package/form/yhmSelect.vue

@@ -0,0 +1,88 @@
+<template>
+  <van-field
+    class="yhm-datetime-container"
+    :disabled="disabled"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage">
+    <template #input>
+      <div
+        class="yhm-datetime-value"
+        :class="valueClass"
+        @click="toChoose">
+        {{ valueString }}
+      </div>
+    </template>
+  </van-field>
+  <van-popup
+    v-model:show="show"
+    class="yhm-datetime-container"
+    position="bottom">
+    <van-picker
+      :title="palceholder"
+      :columns="optionData"
+      @confirm="onCancel"
+      @cancel="onCancel"
+      @change="onChange" />
+  </van-popup>
+</template>
+<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",
+  disabled: false,
+  palceholder: "请选择",
+});
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: string);
+  (e: "change", val: string);
+}>();
+
+const valueString = computed(() => {
+  if (props.modelValue) {
+    return props.optionData.filter((item) => item.value === props.modelValue)[0].text;
+  } else {
+    return props.palceholder || "请选择";
+  }
+});
+
+const valueClass = computed(() => {
+  return {
+    placeholder: !props.modelValue,
+  };
+});
+
+const show = ref(false);
+
+function toChoose() {
+  if (props.disabled) {
+    return false;
+  }
+  show.value = true;
+}
+
+function onChange({ selectedValues }) {
+  emits("update:modelValue", selectedValues[0]);
+}
+function onCancel() {
+  show.value = false;
+}
+</script>
+<style lang="scss">
+.yhm-datetime-container {
+  --van-switch-width: calc(3em + 4px);
+  .yhm-datetime-value {
+    flex: 1;
+    width: 100%;
+    text-align: right;
+    &.placeholder {
+      color: var(--van-text-color-3);
+    }
+  }
+  &.van-popup {
+    height: 560px;
+  }
+}
+</style>

package/form/yhmSwitch.vue

@@ -0,0 +1,91 @@
+<template>
+  <van-field
+    class="yhm-switch-container"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :error="error"
+    :error-message="errorMessage">
+    <template #input>
+      <div class="yhm-switch-value">
+        <van-switch
+          :disabled="disabled"
+          :model-value="modelValue"
+          :active-value="activeValue"
+          :inactive-value="inactiveValue"
+          :size="size"
+          @update:modelValue="changeHandler">
+          <template #background>
+            <div class="yhm-switch-value-text">
+              {{ modelValue === activeValue ? activeText : inactiveText }}
+            </div>
+          </template>
+        </van-switch>
+      </div>
+    </template>
+  </van-field>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    error: boolean;
+    errorMessage: string;
+    modelValue?: any;
+    disabled?: boolean;
+    size?: number;
+    activeValue?: boolean;
+    inactiveValue?: boolean;
+    activeText?: string;
+    inactiveText?: string;
+  }>(),
+  {
+    disabled: false,
+    size: 18,
+    activeValue: true,
+    inactiveValue: false,
+    activeText: "",
+    inactiveText: "",
+  }
+);
+
+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-switch-container {
+  .yhm-switch-value {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    .van-switch {
+      width: auto;
+      .yhm-switch-value-text {
+        transition: padding 0.3s ease 0s;
+        padding: 0 0.5em 0 2em;
+        font-size: 0.8em;
+        color: var(--van-white);
+        height: 22px;
+        line-height: 22px;
+      }
+      &.van-switch--on {
+        .van-switch__node {
+          transform: none;
+          left: auto;
+          right: 2px;
+        }
+        .yhm-switch-value-text {
+          padding: 0 2em 0 0.5em;
+        }
+      }
+    }
+  }
+}
+</style>

package/index.ts

@@ -0,0 +1,26 @@
+import yhmList from "./info/yhmList.vue";
+import yhmDropdownItem from "./info/yhmDropdownItem.vue";
+import yhmInfo from "./info/yhmInfo.vue";
+import yhmInfoItem from "./info/yhmInfoItem.vue";
+import yhmForm from "./form/yhm-form.vue";
+import yhmDatetime from "./form/yhmDatetime.vue";
+import yhmRadio from "./form/yhmRadio.vue";
+import yhmCheckbox from "./form/yhmCheckbox.vue";
+import yhmSelect from "./form/yhmSelect.vue";
+import yhmInput from "./form/yhmInput.vue";
+import yhmSwitch from "./form/yhmSwitch.vue";
+export default {
+  install(app) {
+    app.component("yhm-list", yhmList);
+    app.component("yhm-dropdown-item", yhmDropdownItem);
+    app.component("yhm-info", yhmInfo);
+    app.component("yhm-info-item", yhmInfoItem);
+    app.component("yhm-form", yhmForm);
+    app.component("yhm-datetime", yhmDatetime);
+    app.component("yhm-radio", yhmRadio);
+    app.component("yhm-checkbox", yhmCheckbox);
+    app.component("yhm-input", yhmInput);
+    app.component("yhm-select", yhmSelect);
+    app.component("yhm-switch", yhmSwitch);
+  },
+};

package/info/yhmDropdownItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <van-dropdown-item
+    :model-value="modelValue"
+    @update:model-value="updateHandler"
+    :options="optionData"></van-dropdown-item>
+</template>
+<script setup lang="ts">
+import type { vanOption } from "../types";
+import { computed } 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;
+  },
+});
+function updateHandler(val: string | number) {
+  modelValue.value = val;
+  emits("change");
+}
+</script>
+<style lang="scss"></style>
+../types

package/info/yhmInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <section
+    class="yhm-info"
+    :class="{
+      'has-top': hasTop,
+    }">
+    <slot></slot>
+  </section>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    hasTop?: boolean;
+  }>(),
+  {
+    hasTop: false,
+  }
+);
+</script>
+<style lang="scss">
+.yhm-info {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px 8px 4px 16px;
+  background-color: var(--van-white);
+  box-sizing: border-box;
+  &.has-top {
+    margin-top: var(--van-padding-xs);
+  }
+}
+.yhm-info + .yhm-info {
+  border-top: 1px solid var(--van-gray-1);
+  &.has-top {
+    border-top: 0;
+  }
+}
+</style>

package/info/yhmInfoItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <section :class="`yhm-info-item-container${status ? ' ' + status : ''}`">
+    <div :class="`yhm-info-item${regularValue ? ' regular-value' : ''}`">
+      <div class="yhm-info-item-label">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div class="yhm-info-item-value">
+        <slot name="value">{{ value }}</slot>
+      </div>
+    </div>
+    <div
+      class="yhm-info-description"
+      v-if="description">
+      <slot name="description">{{ description }}</slot>
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    span: number;
+    label?: string;
+    value?: string;
+    description?: string;
+    regularValue?: boolean;
+    status?: "primary" | "success" | "danger" | "warning" | "cyan" | "purple" | "yellow" | "pink";
+  }>(),
+  {
+    span: 24,
+  }
+);
+
+const widthCount = computed(() => {
+  return 24 / props.span;
+});
+</script>
+<style lang="scss">
+.yhm-info-item-container {
+  width: calc((100% - (8px * v-bind(widthCount))) / v-bind(widthCount));
+  font-size: var(--van-font-size-md);
+  padding: 4px 0;
+  margin-right: 8px;
+  .yhm-info-item {
+    display: flex;
+    line-height: 24px;
+    .yhm-info-item-value {
+      flex: 1;
+      text-align: right;
+      color: var(--van-text-color-2);
+    }
+    &.regular-value {
+      .yhm-info-item-value {
+        flex: 1;
+        text-align: right;
+        color: var(--van-text-color);
+      }
+    }
+  }
+  .yhm-info-description {
+    color: var(--van-text-color-2);
+    line-height: 20px;
+  }
+  &.primary {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-primary-color) !important;
+      }
+    }
+  }
+  &.success {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-success-color) !important;
+      }
+    }
+  }
+  &.danger {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-danger-color) !important;
+      }
+    }
+  }
+  &.warning {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-warning-color) !important;
+      }
+    }
+  }
+  &.cyan {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-cyan) !important;
+      }
+    }
+  }
+  &.purple {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-purple) !important;
+      }
+    }
+  }
+  &.yellow {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-yellow) !important;
+      }
+    }
+  }
+  &.pink {
+    .yhm-info-item {
+      .yhm-info-item-value {
+        color: var(--van-pink) !important;
+      }
+    }
+  }
+}
+</style>