hy-app 0.1.1

package/components/hy-tag/hy-tag.vue

@@ -0,0 +1,374 @@
+<template>
+  <HyTransition mode="fade" :show="show" style="display: inline-flex">
+    <view class="hy-tag__wrapper cursor-pointer">
+      <view :class="tagClass" @tap.stop="clickHandler" :style="tagStyle">
+        <slot name="icon">
+          <HyIcon
+            v-if="icon"
+            :color="hyIconColor"
+            :name="icon"
+            :size="hyIconSize"
+            :customStyle="{ marginRight: '3px' }"
+          ></HyIcon>
+        </slot>
+        <text :class="textClass">
+          <slot>
+            {{ text }}
+          </slot>
+        </text>
+      </view>
+      <view
+        :class="['hy-tag__close', `hy-tag__close--${size}`]"
+        v-if="closable"
+        @tap.stop="closeHandler"
+        :style="{ backgroundColor: closeColor }"
+      >
+        <HyIcon
+          :name="IconConfig.CLOSE"
+          :size="closeSize"
+          color="#ffffff"
+        ></HyIcon>
+      </view>
+    </view>
+  </HyTransition>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { IconConfig } from "../../config";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  text,
+  name,
+  shape,
+  plain,
+  type,
+  size,
+  plainFill,
+  closable,
+  bgColor,
+  color,
+  borderColor,
+  iconColor,
+  disabled
+} = toRefs(props);
+const emit = defineEmits(["click", "close"]);
+
+/**
+ * @description tag类名
+ * */
+const tagClass = computed((): string[] => {
+  let classes = ["hy-tag", `hy-tag--${shape.value}`, `hy-tag--${size.value}`];
+  if (disabled.value) {
+    classes.push("hy-tag--disabled");
+  } else {
+    const arr = [
+      !plain.value && `hy-tag--${type.value}`,
+      plain.value && `hy-tag--${type.value}--plain`,
+      plain.value && plainFill.value && `hy-tag--${type.value}--plain--fill`
+    ].filter(Boolean);
+    classes = classes.concat(arr as string[]);
+  }
+  return classes;
+});
+/**
+ * @description tag样式
+ * */
+const tagStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    marginRight: closable ? "10px" : 0,
+    marginTop: closable ? "10px" : 0
+  };
+  if (bgColor.value) {
+    style.backgroundColor = bgColor.value;
+  }
+  if (color.value) {
+    style.color = color.value;
+  }
+  if (borderColor.value) {
+    style.borderColor = borderColor.value;
+  }
+  return style;
+});
+
+/**
+ * @description 文本类名
+ * */
+const textClass = computed((): string[] => {
+  return [
+    `hy-tag__text`,
+    `hy-tag__text--${type.value}`,
+    plain.value && `hy-tag__text--${type.value}--plain`,
+    `hy-tag__text--${size.value}`
+  ].filter(Boolean) as string[];
+});
+
+/**
+ * @description 关闭图标icon大小
+ */
+const closeSize = computed(() => {
+  return size.value === "large" ? 15 : size.value === "medium" ? 13 : 11;
+});
+/**
+ * @description 图标大小
+ * */
+const hyIconSize = computed(() => {
+  if (props.iconSize) {
+    return props.iconSize;
+  } else {
+    return size.value === "large" ? 18 : size.value === "medium" ? 14 : 10;
+  }
+});
+/**
+ * @description 图标颜色
+ * */
+const hyIconColor = computed(() => {
+  return iconColor.value
+    ? iconColor.value
+    : plain.value
+    ? type.value
+    : "#ffffff";
+});
+
+/**
+ * @description 点击关闭按钮
+ * */
+const closeHandler = () => {
+  if (!disabled.value) {
+    emit("close", text.value);
+  }
+};
+/**
+ * @description 点击标签
+ * */
+const clickHandler = () => {
+  if (!disabled.value) {
+    emit("click", {
+      value: text.value,
+      name: name.value
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-tag {
+  @include flex;
+  align-items: center;
+  border-style: solid;
+
+  &__wrapper {
+    position: relative;
+  }
+
+  /*禁用*/
+  &--disabled {
+    background-color: $hy-color-disable-bg;
+    color: $hy-text-color-disable;
+    border: 1px solid $hy-color-disable-icon;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &--square {
+    border-radius: 3px;
+  }
+
+  &__icon {
+    margin-right: 4px;
+  }
+
+  &__text {
+    &--small {
+      font-size: $hy-font-size-sm;
+      line-height: $hy-font-size-sm;
+    }
+
+    &--medium {
+      font-size: $hy-font-size-base;
+      line-height: $hy-font-size-base;
+    }
+
+    &--large {
+      font-size: $hy-font-size-lg;
+      line-height: $hy-font-size-lg;
+    }
+  }
+
+  &--small {
+    height: 22px;
+    line-height: 22px;
+    padding: 0 5px;
+  }
+
+  &--medium {
+    height: 26px;
+    line-height: 22px;
+    padding: 0 10px;
+  }
+
+  &--large {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 15px;
+  }
+
+  &--primary {
+    background-color: $hy-primary;
+    border-width: 1px;
+    border-color: $hy-primary;
+  }
+
+  &--primary--plain {
+    border-width: 1px;
+    border-color: $hy-primary;
+  }
+
+  &--primary--plain--fill {
+    background-color: #ecf5ff;
+  }
+
+  &__text--primary {
+    color: #ffffff;
+  }
+
+  &__text--primary--plain {
+    color: $hy-primary;
+  }
+
+  &--error {
+    background-color: $hy-error;
+    border-width: 1px;
+    border-color: $hy-error;
+  }
+
+  &--error--plain {
+    border-width: 1px;
+    border-color: $hy-error;
+  }
+
+  &--error--plain--fill {
+    background-color: #fef0f0;
+  }
+
+  &__text--error {
+    color: #ffffff;
+  }
+
+  &__text--error--plain {
+    color: $hy-error;
+  }
+
+  &--warning {
+    background-color: $hy-warning;
+    border-width: 1px;
+    border-color: $hy-warning;
+  }
+
+  &--warning--plain {
+    border-width: 1px;
+    border-color: $hy-warning;
+  }
+
+  &--warning--plain--fill {
+    background-color: #fdf6ec;
+  }
+
+  &__text--warning {
+    color: #ffffff;
+  }
+
+  &__text--warning--plain {
+    color: $hy-warning;
+  }
+
+  &--success {
+    background-color: $hy-success;
+    border-width: 1px;
+    border-color: $hy-success;
+  }
+
+  &--success--plain {
+    border-width: 1px;
+    border-color: $hy-success;
+  }
+
+  &--success--plain--fill {
+    background-color: #f5fff0;
+  }
+
+  &__text--success {
+    color: #ffffff;
+  }
+
+  &__text--success--plain {
+    color: $hy-success;
+  }
+
+  &--info {
+    background-color: $hy-info;
+    border-width: 1px;
+    border-color: $hy-info;
+  }
+
+  &--info--plain {
+    border-width: 1px;
+    border-color: $hy-info;
+  }
+
+  &--info--plain--fill {
+    background-color: #f4f4f5;
+  }
+
+  &__text--info {
+    color: #ffffff;
+  }
+
+  &__text--info--plain {
+    color: $hy-info;
+  }
+
+  &__close {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    right: 10px;
+    border-radius: 100px;
+    background-color: #c6c7cb;
+    @include flex(row);
+    align-items: center;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    transform: scale(0.6) translate(80%, -80%);
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    transform: scale(0.6) translate(50%, -50%);
+    /* #endif */
+
+    &--small {
+      width: 18px;
+      height: 18px;
+    }
+
+    &--medium {
+      width: 22px;
+      height: 22px;
+    }
+
+    &--large {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}
+</style>

package/components/hy-tag/props.ts

@@ -0,0 +1,22 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  text: "",
+  name: "",
+  type: "primary",
+  disabled: false,
+  size: "medium",
+  shape: "square",
+  bgColor: "",
+  color: "",
+  borderColor: "",
+  closeColor: "#C6C7CB",
+  plainFill: false,
+  plain: false,
+  closable: false,
+  show: true,
+  icon: "",
+  iconColor: ""
+};
+
+export default defaultProps;

package/components/hy-tag/typing.d.ts

@@ -0,0 +1,76 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 标签的文字内容
+   * */
+  text: string | number;
+  /**
+   * @description 点击需要传得值
+   * */
+  name: string | number;
+  /**
+   * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 禁用（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 标签的大小，large，medium，small （默认 'medium' ）
+   * */
+  size?: HyApp.SizeType;
+  /**
+   * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 背景颜色，默认为空字符串，即不处理
+   * */
+  bgColor?: string;
+  /**
+   * @description 标签字体颜色，默认为空字符串，即不处理
+   * */
+  color?: string;
+  /**
+   * @description 镂空形式标签的边框颜色
+   * */
+  borderColor?: string;
+  /**
+   * @description 关闭按钮图标的颜色（默认 #C6C7CB）
+   * */
+  closeColor?: string;
+  /**
+   * @description 镂空时是否填充背景色（默认 false ）
+   * */
+  plainFill?: boolean;
+  /**
+   * @description 是否镂空（默认 false ）
+   * */
+  plain?: boolean;
+  /**
+   * @description 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
+   * */
+  closable?: boolean;
+  /**
+   * @description 标签显示与否（默认 true ）
+   * */
+  show?: boolean;
+  /**
+   * @description 组件内置图标，或绝对路径的图片
+   * */
+  icon?: string;
+  /**
+   * @description icon颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description icon大小
+   * */
+  iconSize?: string | number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-textarea/hy-textarea.vue

@@ -0,0 +1,229 @@
+<template>
+  <view
+    class="hy-textarea"
+    :class="textareaClass"
+    :style="[textareaStyle, borderStyle(isFocus)]"
+  >
+    <textarea
+      class="hy-textarea__field"
+      :value="innerValue"
+      :style="{ height: addUnit(height) }"
+      :placeholder="placeholder"
+      :placeholder-style="placeholderStyle"
+      :placeholder-class="placeholderClass"
+      :disabled="disabled"
+      :focus="focus"
+      :autoHeight="autoHeight"
+      :fixed="fixed"
+      :cursorSpacing="cursorSpacing"
+      :cursor="cursor"
+      :showConfirmBar="showConfirmBar"
+      :selectionStart="selectionStart"
+      :selectionEnd="selectionEnd"
+      :adjustPosition="adjustPosition"
+      :disableDefaultPadding="disableDefaultPadding"
+      :holdKeyboard="holdKeyboard"
+      :maxlength="maxlength"
+      :confirm-type="confirmType"
+      @focus="onFocus"
+      @blur="onBlur"
+      @linechange="onLinechange"
+      @input="onInput"
+      @confirm="onConfirm"
+      @keyboardheightchange="onKeyboardheightchange"
+    ></textarea>
+    <!-- #ifndef MP-ALIPAY -->
+    <text
+      class="hy-textarea__count"
+      :style="{
+        'background-color': disabled ? 'transparent' : '#fff'
+      }"
+      v-if="count"
+      >{{ innerValue.length }}/{{ maxlength }}</text
+    >
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, ref, toRefs, watch, nextTick } from "vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+import { ColorConfig } from "../../config";
+import { addUnit } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, customStyle, border, disabled, formatter } = toRefs(props);
+const emit = defineEmits([
+  "update:modelValue",
+  "linechange",
+  "focus",
+  "blur",
+  "change",
+  "confirm",
+  "keyboardheightchange"
+]);
+
+// 输入框的值
+const innerValue = ref<string>("");
+// 是否处于获得焦点状态
+const focused = ref<boolean>(false);
+// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
+const firstChange = ref<boolean>(true);
+// value绑定值的变化是由内部还是外部引起的
+const changeFromInner = ref<boolean>(false);
+// 是否获取焦点
+const isFocus = ref<boolean>(false);
+// 过滤处理方法
+let innerFormatter = (value: string) => value;
+
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    innerValue.value = newVal;
+    /* #ifdef H5 */
+    // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+    if (firstChange.value === false && changeFromInner.value === false) {
+      valueChange();
+    }
+    /* #endif */
+    firstChange.value = false;
+    // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+    changeFromInner.value = false;
+  },
+  { immediate: true }
+);
+
+// 组件的类名
+const textareaClass = computed(() => {
+  let classes: string[] = [];
+  border.value === "surround" &&
+    (classes = classes.concat(["hy-border", "hy-textarea--radius"]));
+  border.value === "bottom" &&
+    (classes = classes.concat(["hy-border__bottom", "hy-textarea--no-radius"]));
+  disabled.value && classes.push("hy-textarea--disabled");
+  return classes.join(" ");
+});
+// 组件的样式
+const textareaStyle = computed(() => {
+  const style: CSSProperties = {};
+
+  return Object.assign(style, customStyle.value);
+});
+/**
+ * @description 边框颜色
+ * */
+const borderStyle = computed(() => {
+  return (isFocus: boolean) => {
+    let style: CSSProperties = {};
+    if (isFocus) {
+      switch (border.value) {
+        case "surround":
+          style = { border: `1px solid ${ColorConfig.primary}` };
+          break;
+        case "bottom":
+          style = { borderBottom: `1px solid ${ColorConfig.primary}` };
+          break;
+        default:
+          break;
+      }
+    }
+    return style;
+  };
+});
+
+const onFocus = (e: FocusEvent) => {
+  isFocus.value = true;
+  emit("focus", e);
+};
+const onBlur = (e: FocusEvent) => {
+  isFocus.value = false;
+  emit("blur", e);
+  // 尝试调用u-form的验证方法
+  // formValidate(this, "blur");
+};
+const onLinechange = (e: Event) => {
+  emit("linechange", e);
+};
+const onInput = (e: Event) => {
+  let { value } = e?.detail;
+  // 格式化过滤方法
+  const format = formatter.value || innerFormatter;
+  const formatValue = format(value);
+  // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+  innerValue.value = value;
+  nextTick(() => {
+    innerValue.value = formatValue;
+    valueChange();
+  });
+};
+/**
+ * @description 内容发生变化，进行处理
+ * */
+const valueChange = () => {
+  const value = innerValue.value;
+  nextTick(() => {
+    emit("update:modelValue", value);
+    // 标识value值的变化是由内部引起的
+    changeFromInner.value = true;
+    emit("change", value);
+    // 尝试调用u-form的验证方法
+    // formValidate(this, "change");
+  });
+};
+const onConfirm = (e: Event) => {
+  emit("confirm", e);
+};
+const onKeyboardheightchange = (e: Event) => {
+  emit("keyboardheightchange", e);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-textarea {
+  border-radius: 4px;
+  background-color: #fff;
+  position: relative;
+  @include flex;
+  flex: 1;
+  padding: 9px;
+
+  &--radius {
+    border-radius: 4px;
+  }
+
+  &--no-radius {
+    border-radius: 0;
+  }
+
+  &--disabled {
+    background-color: $hy-color-disable-bg;
+  }
+
+  &__field {
+    flex: 1;
+    font-size: 15px;
+    color: #606266ff;
+    width: 100%;
+  }
+
+  &__count {
+    position: absolute;
+    right: 5px;
+    bottom: 2px;
+    font-size: 12px;
+    color: $hy-tips-color;
+    background-color: #ffffff;
+    padding: 1px 4px;
+  }
+}
+.hy-border {
+  border: $hy-border-line;
+  &__bottom {
+    border-bottom: $hy-border-line;
+  }
+}
+</style>

package/components/hy-textarea/props.ts

@@ -0,0 +1,26 @@
+import IProps from "./typing";
+const defaultProps: IProps = {
+  modelValue: "",
+  placeholder: "",
+  placeholderClass: "textarea-placeholder",
+  height: 70,
+  confirmType: "done",
+  disabled: false,
+  count: false,
+  focus: false,
+  autoHeight: false,
+  fixed: false,
+  cursorSpacing: 0,
+  cursor: "",
+  showConfirmBar: true,
+  selectionStart: -1,
+  selectionEnd: -1,
+  adjustPosition: true,
+  disableDefaultPadding: false,
+  holdKeyboard: false,
+  maxlength: 140,
+  border: "surround",
+  formatter: null
+};
+
+export default defaultProps;