hy-app 0.1.2 → 0.1.3

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

@@ -2,7 +2,7 @@
   <HyTransition mode="fade" :show="show">
     <view
       class="hy-alert"
-      :class="[`hy-alert--${type}--${effect}`]"
+      :class="[`hy-alert--${type}--${theme}`]"
       @tap.stop="clickHandler"
       :style="[customStyle]"
     >
@@ -13,8 +13,8 @@
         class="hy-alert__content"
         :style="[
           {
-            paddingRight: closable ? '20px' : 0
-          }
+            paddingRight: closable ? '20px' : 0,
+          },
         ]"
       >
         <text
@@ -23,13 +23,13 @@
           :style="[
             {
               fontSize: addUnit(fontSize),
-              textAlign: center ? 'center' : 'left'
-            }
+              textAlign: center ? 'center' : 'left',
+            },
           ]"
           :class="[
-            effect === 'dark'
+            theme === 'dark'
               ? 'hy-alert__text--dark'
-              : `hy-alert__text--${type}--light`
+              : `hy-alert__text--${type}--light`,
           ]"
           >{{ title }}</text
         >
@@ -39,13 +39,13 @@
           :style="[
             {
               fontSize: addUnit(fontSize),
-              textAlign: center ? 'center' : 'left'
-            }
+              textAlign: center ? 'center' : 'left',
+            },
           ]"
           :class="[
-            effect === 'dark'
+            theme === 'dark'
               ? 'hy-alert__text--dark'
-              : `hy-alert__text--${type}--light`
+              : `hy-alert__text--${type}--light`,
           ]"
           >{{ description }}</text
         >
@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { computed, ref, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit } from "../../utils";
 import { IconConfig } from "../../config";
 
@@ -69,7 +69,7 @@ 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 { type, theme } = toRefs(props);
 const emit = defineEmits(["click", "close"]);
 
 const show = ref<boolean>(true);
@@ -78,7 +78,7 @@ const show = ref<boolean>(true);
  * @description icon颜色
  * */
 const iconColor = computed(() => {
-  return effect.value === "light" ? type.value : "#fff";
+  return theme.value === "light" ? type.value : "#fff";
 });
 /**
  * @description 不同主题对应不同的图标
@@ -116,113 +116,5 @@ const closeHandler = () => {
 </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;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-warn/index.scss

@@ -0,0 +1,109 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-alert {
+  position: relative;
+  background-color: $hy-primary;
+  padding: $hy-border-margin-padding-base;
+  @include flex(row);
+  align-items: center;
+  border-radius: $hy-border-radius-sm;
+
+  &--primary--dark {
+    background-color: $hy-primary;
+  }
+
+  &--primary--light {
+    background-color: $hy-primary-light;
+  }
+
+  &--error--dark {
+    background-color: $hy-error;
+  }
+
+  &--error--light {
+    background-color: $hy-error-light;
+  }
+
+  &--success--dark {
+    background-color: $hy-success;
+  }
+
+  &--success--light {
+    background-color: $hy-success-light;
+  }
+
+  &--warning--dark {
+    background-color: $hy-warning;
+  }
+
+  &--warning--light {
+    background-color: $hy-warning-light;
+  }
+
+  &--info--dark {
+    background-color: $hy-info;
+  }
+
+  &--info--light {
+    background-color: $hy-info-light;
+  }
+
+  &__icon {
+    margin-right: $hy-border-margin-padding-sm;
+  }
+
+  &__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;
+  }
+}

package/components/hy-warn/props.ts

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

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

@@ -1,4 +1,5 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
+import { HyApp, type ThemeVo } from "@/package/typing/modules/common";
 
 export default interface IProps {
   /**
@@ -22,9 +23,9 @@ export default interface IProps {
    * */
   showIcon?: boolean;
   /**
-   * @description 多图时，图片缩放裁剪的模式  （默认 'light' ）
+   * @description 显示的暗色或者亮色  （默认 'light' ）
    * */
-  effect?: "light" | "dark";
+  theme?: HyApp.ThemeVo;
   /**
    * @description 文字是否居中  （默认 false ）
    * */

package/components/hy-waterfall/index.scss

@@ -0,0 +1,82 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-subsection {
+  @include flex;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+
+  &--button {
+    height: 35px;
+    background-color: rgb(238, 238, 239);
+    padding: 3px;
+    border-radius: $hy-border-radius-sm;
+    align-items: stretch;
+
+    &__bar {
+      background-color: #ffffff;
+      border-radius: $hy-border-radius-base;
+    }
+  }
+
+  &--subsection {
+    height: 32px;
+  }
+
+  &__bar {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    transition-property: transform, color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    /* #endif */
+
+    &--first {
+      border-radius: $hy-border-radius-sm 0 0 $hy-border-radius-sm;
+    }
+
+    &--center {
+      border-radius: 0;
+    }
+
+    &--last {
+      border-radius: 0 $hy-border-radius-sm $hy-border-radius-sm 0;
+    }
+  }
+
+  &__item {
+    @include flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+    position: relative;
+
+    &--no-border-right {
+      border-right-width: 0 !important;
+    }
+
+    &--first {
+      border-top-left-radius: $hy-border-radius-sm;
+      border-bottom-left-radius: $hy-border-radius-sm;
+    }
+
+    &--last {
+      border-top-right-radius: $hy-border-radius-sm;
+      border-bottom-right-radius: $hy-border-radius-sm;
+    }
+
+    &__text {
+      font-size: 12px;
+      line-height: 14px;
+      @include flex;
+      align-items: center;
+      transition-property: color;
+      transition-duration: 0.3s;
+    }
+  }
+}

package/components/index.ts

@@ -14,17 +14,24 @@ 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 HyCountDown from "./hy-count-down/hy-count-down.vue";
+import HyCountTo from "./hy-count-to/hy-count-to.vue";
 import HyDatetimePicker from "./hy-datetime-picker/hy-datetime-picker.vue";
 import HyDivider from "./hy-divider/hy-divider.vue";
+import HyDropdown from "./hy-dropdown/hy-dropdown.vue";
+import HyDropdownItem from "./hy-dropdown-item/hy-dropdown-item.vue";
 import YkEmpty from "./hy-empty/hy-empty.vue";
+import YkFloatButton from "./hy-float-button/hy-float-button.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 HyImage from "./hy-image/hy-image.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 HyLoading from "./hy-loading/hy-loading.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";
@@ -42,6 +49,7 @@ import HyReadMore from "./hy-read-more/hy-read-more.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 HyStatusBar from "./hy-status-bar/hy-status-bar.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";
@@ -66,17 +74,24 @@ const install = (Vue: any) => {
   Vue.component("HyCell", HyCell);
   Vue.component("HyCheckButton", HyCheckButton);
   Vue.component("HyCheckbox", HyCheckbox);
+  Vue.component("HyCountDown", HyCountDown);
+  Vue.component("HyCountTo", HyCountTo);
   Vue.component("HyDatetimePicker", HyDatetimePicker);
   Vue.component("HyDivider", HyDivider);
+  Vue.component("HyDropdown", HyDropdown);
+  Vue.component("HyDropdownItem", HyDropdownItem);
   Vue.component("YkEmpty", YkEmpty);
+  Vue.component("YkFloatButton", YkFloatButton);
   Vue.component("HyFoldingPanel", HyFoldingPanel);
   Vue.component("HyForm", HyForm);
   Vue.component("HyGrid", HyGrid);
   Vue.component("HyIcon", HyIcon);
+  Vue.component("HyImage", HyImage);
   Vue.component("HyInput", HyInput);
   Vue.component("HyLine", HyLine);
   Vue.component("HyLineProgress", HyLineProgress);
   Vue.component("HyList", HyList);
+  Vue.component("HyLoading", HyLoading);
   Vue.component("YkLogin", YkLogin);
   Vue.component("HyModal", HyModal);
   Vue.component("HyNavbar", HyNavbar);
@@ -93,6 +108,7 @@ const install = (Vue: any) => {
   Vue.component("HyScrollList", HyScrollList);
   Vue.component("HySearch", HySearch);
   Vue.component("HySlider", HySlider);
+  Vue.component("HyStatusBar", HyStatusBar);
   Vue.component("HySteps", HySteps);
   Vue.component("HySubsection", HySubsection);
   Vue.component("HySwiper", HySwiper);
@@ -121,17 +137,24 @@ export {
   HyCell,
   HyCheckButton,
   HyCheckbox,
+  HyCountDown,
+  HyCountTo,
   HyDatetimePicker,
   HyDivider,
+  HyDropdown,
+  HyDropdownItem,
   YkEmpty,
+  YkFloatButton,
   HyFoldingPanel,
   HyForm,
   HyGrid,
   HyIcon,
+  HyImage,
   HyInput,
   HyLine,
   HyLineProgress,
   HyList,
+  HyLoading,
   YkLogin,
   HyModal,
   HyNavbar,
@@ -148,6 +171,7 @@ export {
   HyScrollList,
   HySearch,
   HySlider,
+  HyStatusBar,
   HySteps,
   HySubsection,
   HySwiper,
@@ -158,5 +182,5 @@ export {
   HyTooltip,
   HyTransition,
   HyUpload,
-  HyWarn
+  HyWarn,
 };

package/components/message/index.ts

@@ -1,54 +1,54 @@
-import { createVNode, render } from "vue";
-import Dialog, { DialogParam } from "./TheMessage.vue";
-
-let instance: any = null;
-
-const successIcon = "https://pic1.imgdb.cn/item/67a74cbdd0e0a243d4fd160b.png";
-const errorIcon = "https://pic1.imgdb.cn/item/67b03ba3d0e0a243d4ff9078.png";
-const warningIcon = "https://pic1.imgdb.cn/item/67b03ba3d0e0a243d4ff9079.png";
-/**
- * @description 创建div添加dialog组件
- * */
-const mountDialog = () => {
-  if (!instance) {
-    const container = document.createElement("div");
-    document.body.appendChild(container); // 先添加到 body
-    instance = createVNode(Dialog);
-    render(instance, container);
-  }
-};
-/**
- * @description 打开传参
- * */
-const openParams = (options: DialogParam, icon: string) => {
-  instance.component.exposed.open(
-    Object.assign(
-      {
-        icon
-      },
-      options
-    )
-  );
-};
-
-const DialogService = {
-  success(options: DialogParam) {
-    mountDialog();
-    openParams(options, successIcon);
-  },
-  error(options: DialogParam) {
-    mountDialog();
-    openParams(options, errorIcon);
-  },
-  warning(options: DialogParam) {
-    mountDialog();
-    openParams(options, warningIcon);
-  },
-  close() {
-    if (instance) {
-      instance.component.exposed.close();
-    }
-  }
-};
-
-export default DialogService;
+import { createVNode, render } from "vue";
+import Dialog, { type DialogParam } from "./TheMessage.vue";
+
+let instance: any = null;
+
+const successIcon = "https://pic1.imgdb.cn/item/67a74cbdd0e0a243d4fd160b.png";
+const errorIcon = "https://pic1.imgdb.cn/item/67b03ba3d0e0a243d4ff9078.png";
+const warningIcon = "https://pic1.imgdb.cn/item/67b03ba3d0e0a243d4ff9079.png";
+/**
+ * @description 创建div添加dialog组件
+ * */
+const mountDialog = () => {
+  if (!instance) {
+    const container = document.createElement("div");
+    document.body.appendChild(container); // 先添加到 body
+    instance = createVNode(Dialog);
+    render(instance, container);
+  }
+};
+/**
+ * @description 打开传参
+ * */
+const openParams = (options: DialogParam, icon: string) => {
+  instance.component.exposed.open(
+    Object.assign(
+      {
+        icon,
+      },
+      options,
+    ),
+  );
+};
+
+const DialogService = {
+  success(options: DialogParam) {
+    mountDialog();
+    openParams(options, successIcon);
+  },
+  error(options: DialogParam) {
+    mountDialog();
+    openParams(options, errorIcon);
+  },
+  warning(options: DialogParam) {
+    mountDialog();
+    openParams(options, warningIcon);
+  },
+  close() {
+    if (instance) {
+      instance.component.exposed.close();
+    }
+  },
+};
+
+export default DialogService;

package/config/color.ts

@@ -2,5 +2,6 @@ export const ColorConfig = {
   success: "#5ac725",
   primary: "#3c9cff",
   warning: "#f9ae3d",
-  error: "#f56c6c"
+  error: "#f56c6c",
+  info: "#909399",
 };

package/global/index.ts

@@ -1,6 +1,6 @@
-import { App } from "vue";
-import registerProperties from "./register-properties";
-
-export const globalRegister = (app: App): void => {
-    app.use(registerProperties)
-}
+import type { App } from "vue";
+import registerProperties from "./register-properties";
+
+export const globalRegister = (app: App): void => {
+  app.use(registerProperties);
+};

package/global/register-properties.ts

@@ -1,4 +1,4 @@
-import { App } from "vue";
+import type { App } from "vue";
 import { addUnit, bytesToSize, formatTime, random } from "../utils";
 export default function registerProperties(app: App) {
   app.config.globalProperties.$hy = {
@@ -32,6 +32,6 @@ export default function registerProperties(app: App) {
      * @param {Number} bytes 字节
      * @returns {String} 返回单位大小
      * */
-    bytesToSize: (bytes: number): string => bytesToSize(bytes)
+    bytesToSize: (bytes: number): string => bytesToSize(bytes),
   };
 }

package/index.scss

@@ -1 +1,2 @@
-@import "./libs/css/common.scss";
+@use "./libs/css/common.scss";
+//@use "./libs/css/mixin.scss" as HyMixin;

package/libs/css/common.scss

@@ -1,4 +1,16 @@
-@import "../../theme.scss";
-.hy-border-bottom {
+@use "../../theme.scss" as *;
+.hy-border__bottom {
   border-bottom: $hy-border-line;
+}
+
+.hy-border {
+  border: $hy-border-line;
+}
+
+.hy-border__top {
+  border-top: $hy-border-line;
+}
+
+.hy-page {
+  padding: $hy-border-margin-padding-base;
 }