hy-app 0.1.1

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

@@ -0,0 +1,147 @@
+import { CSSProperties } from "vue";
+
+export interface FileVo {
+  /**
+   * @description 上传文件本地地址链接
+   * */
+  url: string;
+  /**
+   * @description 上传文件类型
+   * */
+  type: "image" | "video" | "file";
+  /**
+   * @description 上传文件本地地址链接
+   * */
+  thumb: string;
+  /**
+   * @description 文件大小
+   * */
+  size: number;
+  /**
+   * @description 是否视频
+   * */
+  isVideo: boolean;
+  /**
+   * @description 是否图片
+   * */
+  isImage: boolean;
+  /**
+   * @description 是否显示删除按钮
+   * */
+  deletable: boolean;
+  /**
+   * @description 上传时候状态
+   * */
+  status: "loading" | "failed" | "success";
+  /**
+   * @description 提示信息
+   * */
+  message: string;
+  /**
+   * @description 进度条
+   * */
+  schedule: string | number;
+}
+
+export default interface IProps {
+  /**
+   * @description 接受的文件类型, 可选值为all media image file video （默认 'image' ）
+   * */
+  accept?: HyApp.FileType;
+  /**
+   * @description 根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
+   * */
+  extension?: string[];
+  /**
+   * @description 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
+   * */
+  capture?: ("album" | "camera")[];
+  /**
+   * @description 当accept为video时生效，是否压缩视频，默认为true（默认 true ）
+   * */
+  compressed?: boolean;
+  /**
+   * @description 当accept为video时生效，可选值为back或front（默认 'back' ）
+   * */
+  camera?: "back" | "front";
+  /**
+   * @description 当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
+   * */
+  maxDuration?: number;
+  /**
+   * @description 上传区域的图标，只能内置图标（默认 'camera-fill' ）
+   * */
+  uploadIcon?: string;
+  /**
+   * @description 上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）
+   * */
+  uploadIconColor?: string;
+  /**
+   * @description 是否开启文件读取前事件（默认 false ）
+   * */
+  useBeforeRead?: boolean;
+  /**
+   * @description 是否显示组件自带的图片预览功能（默认 true ）
+   * */
+  previewFullImage?: boolean;
+  /**
+   * @description 最大上传数量（默认 52 ）
+   * */
+  maxCount?: number;
+  /**
+   * @description 是否启用（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）
+   * */
+  imageMode?: "aspectFill" | "aspectFit" | "widthFix";
+  /**
+   * @description 标识符，可以在回调函数的第二项参数中获取
+   * */
+  name?: string;
+  /**
+   * @description 所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）
+   * */
+  sizeType?: ("original" | "compressed")[];
+  /**
+   * @description 是否开启图片多选，部分安卓机型不支持 （默认 false ）
+   * */
+  multiple?: boolean;
+  /**
+   * @description 是否展示删除按钮（默认 true ）
+   * */
+  deletable?: boolean;
+  /**
+   * @description 文件大小限制，单位为byte （默认 Number.MAX_VALUE ）
+   * */
+  maxSize?: number;
+  /**
+   * @description 显示已上传的文件列表
+   * */
+  fileList?: FileVo[];
+  /**
+   * @description 上传区域的提示文字
+   * */
+  uploadText?: string;
+  /**
+   * @description 内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）
+   * */
+  width?: string | number;
+  /**
+   * @description 内部预览图片区域和选择图片按钮的区域高度（默认 80 ）
+   * */
+  height?: string | number;
+  /**
+   * @description 读取前的处理函数
+   * */
+  beforeRead?: (file: FileVo, detail: { name: string; index: number }) => void;
+  /**
+   * @description 读取后的处理函数
+   * */
+  afterRead?: (file: FileVo, detail: { name: string; index: number }) => void;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-warn/hy-warn.vue

@@ -0,0 +1,228 @@
+<template>
+  <HyTransition mode="fade" :show="show">
+    <view
+      class="hy-alert"
+      :class="[`hy-alert--${type}--${effect}`]"
+      @tap.stop="clickHandler"
+      :style="[customStyle]"
+    >
+      <view class="hy-alert__icon" v-if="showIcon">
+        <HyIcon :name="iconName" size="21" :color="iconColor"></HyIcon>
+      </view>
+      <view
+        class="hy-alert__content"
+        :style="[
+          {
+            paddingRight: closable ? '20px' : 0
+          }
+        ]"
+      >
+        <text
+          class="hy-alert__content__title"
+          v-if="title"
+          :style="[
+            {
+              fontSize: addUnit(fontSize),
+              textAlign: center ? 'center' : 'left'
+            }
+          ]"
+          :class="[
+            effect === 'dark'
+              ? 'hy-alert__text--dark'
+              : `hy-alert__text--${type}--light`
+          ]"
+          >{{ title }}</text
+        >
+        <text
+          class="hy-alert__content__desc"
+          v-if="description"
+          :style="[
+            {
+              fontSize: addUnit(fontSize),
+              textAlign: center ? 'center' : 'left'
+            }
+          ]"
+          :class="[
+            effect === 'dark'
+              ? 'hy-alert__text--dark'
+              : `hy-alert__text--${type}--light`
+          ]"
+          >{{ description }}</text
+        >
+      </view>
+      <view class="hy-alert__close" v-if="closable" @tap.stop="closeHandler">
+        <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
+      </view>
+    </view>
+  </HyTransition>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+
+// 组件
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { type, effect } = toRefs(props);
+const emit = defineEmits(["click", "close"]);
+
+const show = ref<boolean>(true);
+
+/**
+ * @description icon颜色
+ * */
+const iconColor = computed(() => {
+  return effect.value === "light" ? type.value : "#fff";
+});
+/**
+ * @description 不同主题对应不同的图标
+ * */
+const iconName = computed(() => {
+  switch (type.value) {
+    case "success":
+      return IconConfig.SUCCESS_FILL;
+    case "error":
+      return IconConfig.CLOSE_CIRCLE_FILL;
+    case "warning":
+      return IconConfig.NOTICE_FILL;
+    case "info":
+      return IconConfig.HELP_FILL;
+    case "primary":
+      return IconConfig.MESSAGE_FILL;
+    default:
+      return IconConfig.CLOSE_CIRCLE_FILL;
+  }
+});
+
+/**
+ * @description 点击内容
+ * */
+const clickHandler = () => {
+  emit("click");
+};
+/**
+ * @description 点击关闭按钮
+ * */
+const closeHandler = () => {
+  show.value = false;
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-alert {
+  position: relative;
+  background-color: $hy-primary;
+  padding: 8px 10px;
+  @include flex(row);
+  align-items: center;
+  border-radius: 4px;
+
+  &--primary--dark {
+    background-color: $hy-primary;
+  }
+
+  &--primary--light {
+    background-color: #ecf5ff;
+  }
+
+  &--error--dark {
+    background-color: $hy-error;
+  }
+
+  &--error--light {
+    background-color: #fef0f0;
+  }
+
+  &--success--dark {
+    background-color: $hy-success;
+  }
+
+  &--success--light {
+    background-color: #f5fff0;
+  }
+
+  &--warning--dark {
+    background-color: $hy-warning;
+  }
+
+  &--warning--light {
+    background-color: #fdf6ec;
+  }
+
+  &--info--dark {
+    background-color: $hy-info;
+  }
+
+  &--info--light {
+    background-color: #f4f4f5;
+  }
+
+  &__icon {
+    margin-right: 5px;
+  }
+
+  &__content {
+    @include flex(column);
+    flex: 1;
+
+    &__title {
+      font-size: 14px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 2px;
+    }
+
+    &__desc {
+      font-size: 14px;
+      flex-wrap: wrap;
+      color: #fff;
+    }
+  }
+
+  &__title--dark,
+  &__desc--dark {
+    color: #ffffff;
+  }
+
+  &__text--primary--light,
+  &__text--primary--light {
+    color: $hy-primary;
+  }
+
+  &__text--success--light,
+  &__text--success--light {
+    color: $hy-success;
+  }
+
+  &__text--warning--light,
+  &__text--warning--light {
+    color: $hy-warning;
+  }
+
+  &__text--error--light,
+  &__text--error--light {
+    color: $hy-error;
+  }
+
+  &__text--info--light,
+  &__text--info--light {
+    color: $hy-info;
+  }
+
+  &__close {
+    position: absolute;
+    top: 11px;
+    right: 10px;
+  }
+}
+</style>

package/components/hy-warn/props.ts

@@ -0,0 +1,14 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  title: "",
+  type: "warning",
+  description: "",
+  closable: false,
+  showIcon: false,
+  effect: "light",
+  center: false,
+  fontSize: 14
+};
+
+export default defaultProps;

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

@@ -0,0 +1,40 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 显示的文字
+   * */
+  title: string;
+  /**
+   * @description 使用预设的颜色  （默认 'warning' ）
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 辅助性文字，颜色比title浅一点，字号也小一点，可选
+   * */
+  description?: string;
+  /**
+   * @description 关闭按钮(默认为叉号icon图标)  （默认 false ）
+   * */
+  closable?: boolean;
+  /**
+   * @description 是否显示左边的辅助图标   （ 默认 false ）
+   * */
+  showIcon?: boolean;
+  /**
+   * @description 多图时，图片缩放裁剪的模式  （默认 'light' ）
+   * */
+  effect?: "light" | "dark";
+  /**
+   * @description 文字是否居中  （默认 false ）
+   * */
+  center?: boolean;
+  /**
+   * @description 字体大小  （默认 14 ）
+   * */
+  fontSize?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-waterfall/hy-waterfall.vue

@@ -0,0 +1,51 @@
+<template>
+  <HyList
+    :container-height="containerHeight"
+    :list="list"
+    :itemHeight="itemHeight"
+  >
+  </HyList>
+</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";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { customStyle, opacity, zIndex } = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const overlayStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: zIndex?.value,
+    bottom: 0,
+    "background-color": `rgba(0, 0, 0, ${opacity.value})`
+  };
+  return Object.assign(style, customStyle.value || {});
+});
+const clickHandler = () => {
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+$u-overlay-top: 0 !default;
+$u-overlay-left: 0 !default;
+$u-overlay-width: 100% !default;
+$u-overlay-height: 100% !default;
+$u-overlay-background-color: rgba(0, 0, 0, 0.7) !default;
+.u-overlay {
+  position: fixed;
+  top: $u-overlay-top;
+  left: $u-overlay-left;
+  width: $u-overlay-width;
+  height: $u-overlay-height;
+  background-color: $u-overlay-background-color;
+}
+</style>

package/components/hy-waterfall/props.ts

@@ -0,0 +1,10 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  containerHeight: "100vh",
+  itemHeight: 300,
+  opacity: 0.5
+};
+
+export default defaultProps;

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

@@ -0,0 +1,20 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 数据列表
+   * */
+  list: (AnyObject | string)[];
+  /**
+   * @description 容器高度，必须给个高度，否则加载全部数据
+   * */
+  containerHeight: string;
+  /**
+   * @description 子容器的高度，必须和内容一致，否则计算有问题
+   * */
+  itemHeight?: number | string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/index.ts

@@ -0,0 +1,162 @@
+import YkTabbar from "./yk-tabbar/yk-tabbar.vue";
+import Dialog from "./dialog";
+/* #ifdef H5 */
+import DialogService from "./message";
+/* #endif */
+
+// 组件库
+import HyAddressPicker from "./hy-address-picker/hy-address-picker.vue";
+import HyAvatar from "./hy-avatar/hy-avatar.vue";
+import HyBackTop from "./hy-back-top/hy-back-top.vue";
+import HyBadge from "./hy-badge/hy-badge.vue";
+import HyButton from "./hy-button/hy-button.vue";
+import HyCard from "./hy-card/hy-card.vue";
+import HyCell from "./hy-cell/hy-cell.vue";
+import HyCheckButton from "./hy-check-button/hy-check-button.vue";
+import HyCheckbox from "./hy-checkbox/hy-checkbox.vue";
+import HyDatetimePicker from "./hy-datetime-picker/hy-datetime-picker.vue";
+import HyDivider from "./hy-divider/hy-divider.vue";
+import YkEmpty from "./hy-empty/hy-empty.vue";
+import HyFoldingPanel from "./hy-folding-panel/hy-folding-panel.vue";
+import HyForm from "./hy-form/hy-form.vue";
+import HyGrid from "./hy-grid/hy-grid.vue";
+import HyIcon from "./hy-icon/hy-icon.vue";
+import HyInput from "./hy-input/hy-input.vue";
+import HyLine from "./hy-line/hy-line.vue";
+import HyLineProgress from "./hy-line-progress/hy-line-progress.vue";
+import HyList from "./hy-list/hy-list.vue";
+import YkLogin from "./hy-login/hy-login.vue";
+import HyModal from "./hy-modal/hy-modal.vue";
+import HyNavbar from "./hy-navbar/hy-navbar.vue";
+import HyNoticeBar from "./hy-notice-bar/hy-notice-bar.vue";
+import HyNumberStep from "./hy-number-step/hy-number-step.vue";
+import HyOverlay from "./hy-overlay/hy-overlay.vue";
+import YkPrice from "./hy-price/hy-price.vue";
+import HyPicker from "./hy-picker/hy-picker.vue";
+import HyPopup from "./hy-popup/hy-popup.vue";
+import HyQrcode from "./hy-qrcode/hy-qrcode.vue";
+import HyRadio from "./hy-radio/hy-radio.vue";
+import HyRate from "./hy-rate/hy-rate.vue";
+import HyReadMore from "./hy-read-more/hy-read-more.vue";
+// import HySafeBottom from "./hy-safe-bottom/hy-safe-bottom.vue";
+import HyScrollList from "./hy-scroll-list/hy-scroll-list.vue";
+import HySearch from "./hy-search/hy-search.vue";
+import HySlider from "./hy-slider/hy-slider.vue";
+import HySteps from "./hy-steps/hy-steps.vue";
+import HySubsection from "./hy-subsection/hy-subsection.vue";
+import HySwiper from "./hy-swiper/hy-swiper.vue";
+import HySwitch from "./hy-switch/hy-switch.vue";
+import HyTabs from "./hy-tabs/hy-tabs.vue";
+import HyTag from "./hy-tag/hy-tag.vue";
+import HyTextarea from "./hy-textarea/hy-textarea.vue";
+import HyTooltip from "./hy-tooltip/hy-tooltip.vue";
+import HyTransition from "./hy-transition/hy-transition.vue";
+import HyUpload from "./hy-upload/hy-upload.vue";
+import HyWarn from "./hy-warn/hy-warn.vue";
+
+const install = (Vue: any) => {
+  Vue.component("yk-tabbar", YkTabbar);
+
+  Vue.component("HyAddressPicker", HyAddressPicker);
+  Vue.component("HyAvatar", HyAvatar);
+  Vue.component("HyBackTop", HyBackTop);
+  Vue.component("HyBadge", HyBadge);
+  Vue.component("HyButton", HyButton);
+  Vue.component("HyCard", HyCard);
+  Vue.component("HyCell", HyCell);
+  Vue.component("HyCheckButton", HyCheckButton);
+  Vue.component("HyCheckbox", HyCheckbox);
+  Vue.component("HyDatetimePicker", HyDatetimePicker);
+  Vue.component("HyDivider", HyDivider);
+  Vue.component("YkEmpty", YkEmpty);
+  Vue.component("HyFoldingPanel", HyFoldingPanel);
+  Vue.component("HyForm", HyForm);
+  Vue.component("HyGrid", HyGrid);
+  Vue.component("HyIcon", HyIcon);
+  Vue.component("HyInput", HyInput);
+  Vue.component("HyLine", HyLine);
+  Vue.component("HyLineProgress", HyLineProgress);
+  Vue.component("HyList", HyList);
+  Vue.component("YkLogin", YkLogin);
+  Vue.component("HyModal", HyModal);
+  Vue.component("HyNavbar", HyNavbar);
+  Vue.component("HyNoticeBar", HyNoticeBar);
+  Vue.component("HyNumberStep", HyNumberStep);
+  Vue.component("HyOverlay", HyOverlay);
+  Vue.component("YkPrice", YkPrice);
+  Vue.component("HyPicker", HyPicker);
+  Vue.component("HyPopup", HyPopup);
+  Vue.component("HyQrcode", HyQrcode);
+  Vue.component("HyRadio", HyRadio);
+  Vue.component("HyRate", HyRate);
+  Vue.component("HyReadMore", HyReadMore);
+  Vue.component("HyScrollList", HyScrollList);
+  Vue.component("HySearch", HySearch);
+  Vue.component("HySlider", HySlider);
+  Vue.component("HySteps", HySteps);
+  Vue.component("HySubsection", HySubsection);
+  Vue.component("HySwiper", HySwiper);
+  Vue.component("HySwitch", HySwitch);
+  Vue.component("HyTabs", HyTabs);
+  Vue.component("HyTag", HyTag);
+  Vue.component("HyTextarea", HyTextarea);
+  Vue.component("HyTooltip", HyTooltip);
+  Vue.component("HyTransition", HyTransition);
+  Vue.component("HyUpload", HyUpload);
+  Vue.component("HyWarn", HyWarn);
+  // Vue.config.globalProperties.$dialog = myDialog;
+};
+export {
+  install,
+  // Dialog,
+  /* #ifdef H5 */
+  DialogService,
+  /* #endif */
+  HyAddressPicker,
+  HyAvatar,
+  HyBackTop,
+  HyBadge,
+  HyButton,
+  HyCard,
+  HyCell,
+  HyCheckButton,
+  HyCheckbox,
+  HyDatetimePicker,
+  HyDivider,
+  YkEmpty,
+  HyFoldingPanel,
+  HyForm,
+  HyGrid,
+  HyIcon,
+  HyInput,
+  HyLine,
+  HyLineProgress,
+  HyList,
+  YkLogin,
+  HyModal,
+  HyNavbar,
+  HyNoticeBar,
+  HyNumberStep,
+  HyOverlay,
+  YkPrice,
+  HyPicker,
+  HyPopup,
+  HyQrcode,
+  HyRadio,
+  HyRate,
+  HyReadMore,
+  HyScrollList,
+  HySearch,
+  HySlider,
+  HySteps,
+  HySubsection,
+  HySwiper,
+  HySwitch,
+  HyTabs,
+  HyTag,
+  HyTextarea,
+  HyTooltip,
+  HyTransition,
+  HyUpload,
+  HyWarn
+};