hy-app 0.1.4 → 0.2.0

package/components/hy-config-provider/hy-config-provider.vue

@@ -0,0 +1,52 @@
+<template>
+  <view :class="themeClass" :style="themeStyle">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-config-provider",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { addUnit } from "@/package";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  theme,
+  themeColor,
+  themeLightColor,
+  customClass,
+  customStyle,
+  padding,
+} = toRefs(props);
+
+const themeClass = computed(() => {
+  return [customClass.value, "hy-config-provider", `hy-theme--${theme.value}`];
+});
+
+const themeStyle = computed(() => {
+  return [
+    {
+      "--hy-theme-color": themeColor.value,
+      "--hy-theme-color--light": themeLightColor.value,
+      padding: addUnit(padding.value),
+    },
+    customStyle.value,
+  ];
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/components/hy-config-provider/index.scss

@@ -0,0 +1,21 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+@include b(theme) {
+  @include m(dark) {
+    background-color: $hy-dark-background;
+    color: $hy-dark-color;
+  }
+}
+
+@include b(config-provider) {
+  box-sizing: border-box;
+  width: 100%;
+  /* #ifdef H5 */
+  height: calc(100vh - 44px);
+  /* #endif */
+  /* #ifndef H5 */
+  height: 100vh;
+  /* #endif */
+  overflow: auto;
+}

package/components/hy-config-provider/props.ts

@@ -0,0 +1,13 @@
+import type IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  theme: "light",
+  themeColor: ColorConfig.primary,
+  themeLightColor: "#ecf5ff",
+  padding: "10px",
+  customClass: "",
+  customStyle: {},
+};
+
+export default defaultProps;

package/components/hy-config-provider/typing.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyConfigProviderProps {
+  /**
+   * @description dark-暗色、light-亮色
+   * */
+  theme?: HyApp.DarkModeType;
+  /**
+   * @description 主题色（默认 #3c9cff ）
+   * */
+  themeColor?: string;
+  /**
+   * @description 主题色（默认 #ecf5ff ）
+   * */
+  themeLightColor?: string;
+  /**
+   * @description 内边距（默认 10px ）
+   * */
+  padding?: string;
+  /**
+   * @description 定义需要用到的主题类名
+   * */
+  customClass?: string | string[];
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-count-down/hy-count-down.vue

@@ -6,6 +6,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-count-down',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import defaultProps from "./props";

package/components/hy-count-down/index.scss

@@ -1,4 +1,16 @@
-.hy-count-down {
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(count-down) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(count-down) {
   &__text {
     font-size: 15px;
     line-height: 22px;

package/components/hy-count-down/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyCountDownProps {
   /**
    * @description 倒计时时长，单位ms （默认 0 ）
    * */

package/components/hy-count-to/hy-count-to.vue

@@ -1,6 +1,6 @@
 <template>
   <text
-    class="hy-count-num"
+    class="hy-count-to"
     :style="{
       fontSize: addUnit(fontSize),
       fontWeight: bold ? 'bold' : 'normal',
@@ -10,6 +10,17 @@
   >
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-count-to',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import defaultProps from "./props";

package/components/hy-count-to/index.scss

@@ -1,6 +1,19 @@
-.hy-count-num {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(count-to) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(count-to) {
   /* #ifndef APP-NVUE */
   display: inline-flex;
   /* #endif */
   text-align: center;
+  color: $hy-tips-color;
 }

package/components/hy-count-to/props.ts

@@ -8,7 +8,7 @@ const defaultProps: IProps = {
   decimals: 0,
   useEasing: true,
   decimal: ".",
-  color: "#606266",
+  color: "",
   fontSize: 22,
   bold: false,
   separator: "",

package/components/hy-count-to/typing.d.ts

@@ -1,6 +1,4 @@
-import type { CSSProperties } from "vue";
-
-export default interface IProps {
+export default interface HyCountToProps {
   /**
    * @description 开始的数值，默认从0增长到某一个数（默认 0 ）
    * */

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -7,14 +7,23 @@
     >
       <slot name="trigger" :value="inputValue">
         <HyInput
-          :placeholder="placeholder"
-          :readonly="true"
           v-model="inputValue"
-          :disabled="disabled"
-          :disabledColor="disabledColor"
-          :shape="shape"
-          :border="border"
-          :customStyle="customStyle"
+          :readonly="true"
+          :disabled="input?.disabled"
+          :disabledColor="input?.disabledColor"
+          :shape="input?.shape"
+          :border="input?.border"
+          :prefixIcon="input?.prefixIcon"
+          :suffixIcon="input?.suffixIcon"
+          :color="input?.color"
+          :fontSize="input?.fontSize"
+          :inputAlign="input?.inputAlign"
+          :placeholder="input?.placeholder || '请选择时间'"
+          :placeholderStyle="input?.placeholderStyle"
+          :placeholderClass="input?.placeholderClass"
+          :customStyle="
+            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
+          "
         ></HyInput>
         <view class="input-cover"></view>
       </slot>
@@ -52,6 +61,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-datetime-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, onMounted, ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
@@ -68,7 +88,7 @@ const {
   show,
   modelValue,
   hasInput,
-  disabled,
+  input,
   formatter,
   filter,
   format,
@@ -416,11 +436,6 @@ const getOriginColumns = () => {
     if (filter.value) {
       values = filter.value(type, values);
       if (!values || (values && values.length == 0)) {
-        // uni.showToast({
-        // 	title: '日期filter结果不能为空',
-        // 	icon: 'error',
-        // 	mask: true
-        // })
         error("日期filter结果不能为空");
       }
     }
@@ -547,7 +562,7 @@ const getBoundary = (type: string, innerVal: string | number) => {
   };
 };
 const onShowByClickInput = () => {
-  if (!disabled.value) {
+  if (!input.value.disabled) {
     showByClickInput.value = !showByClickInput.value;
   }
 };

package/components/hy-datetime-picker/index.scss

@@ -1,6 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-datetime-picker {
+@include b(datetime-picker) {
   flex: 1;
   &__has-input {
     position: relative;

package/components/hy-datetime-picker/props.ts

@@ -25,11 +25,9 @@ const defaultProps: IProps = {
   visibleItemCount: 5,
   closeOnClickOverlay: false,
   defaultIndex: [],
-  disabled: false,
   hasInput: false,
+  input: {},
   format: "",
-  placeholder: "请选择日期",
-  disabledColor: "#F5F5F5",
   toolbarRightSlot: false,
 };
 

package/components/hy-datetime-picker/typing.d.ts

@@ -1,7 +1,8 @@
 import { DateModeEnum } from "../../typing";
 import type { CSSProperties } from "vue";
+import type HyInputProps from "../hy-input/typing";
 
-export default interface IProps {
+export default interface HyDatetimeProps {
   /**
    * @description 用于控制选择器的弹出和收起 ( 默认 false )
    * */
@@ -96,26 +97,18 @@ export default interface IProps {
    * @note 类型有问题,需要调整
    * */
   defaultIndex?: Array<any>;
-  /**
-   * @description 是否禁用输入框 ( 默认 false )
-   * */
-  disabled?: boolean;
   /**
    * @description 输入框是否显示边框 ( 默认 false )
    * */
   hasInput?: boolean;
   /**
-   * @description 自定义时间格式
-   * */
-  format?: string;
-  /**
-   * @description 输入框提示信息
+   * @description 输入框集合属性
    * */
-  placeholder?: string;
+  input?: Partial<HyInputProps>;
   /**
-   * @description 禁用时候输入框颜色
+   * @description 自定义时间格式
    * */
-  disabledColor?: string;
+  format?: string;
   /**
    * @description 右边插槽
    * */

package/components/hy-divider/hy-divider.vue

@@ -22,6 +22,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-divider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-divider/index.scss

@@ -1,7 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-divider {
+@include b(divider) {
   @include flex;
   flex-direction: row;
   justify-content: center;

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyDividerProps {
   /**
    * @description 是否虚线 （默认 false ）
    * */

package/components/hy-dropdown/hy-dropdown.vue

@@ -4,6 +4,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-dropdown',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { provide, ref, computed, type CSSProperties, toRefs } from "vue";
 import type IProps from "./typing";
@@ -17,7 +28,8 @@ const { height, borderBottom } = toRefs(props);
 const dropdownStyle = computed(() => {
   const style: CSSProperties = props.sticky
     ? {
-        position: "sticky",
+        position: "fixed",
+        left: 0,
         // #ifdef H5
         top: "44px",
         // #endif

package/components/hy-dropdown/index.scss

@@ -1,4 +1,7 @@
-.hy-dropdown {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(dropdown) {
   width: 100%;
   display: flex;
   align-items: center;

package/components/hy-dropdown/props.ts

@@ -1,8 +1,8 @@
 import type IProps from "./typing";
-import { ColorConfig, IconConfig } from "@/package";
+import { IconConfig } from "@/package";
 
 const defaultProps: IProps = {
-  activeColor: ColorConfig.primary,
+  activeColor: "",
   inactiveColor: "#606266",
   closeOnClickMask: true,
   sticky: true,

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyDropdownProps {
   /**
    * @description 标题和选项卡选中的颜色（默认#2979ff）
    * */

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -1,6 +1,12 @@
 <template>
   <!-- 标题栏 -->
-  <view class="hy-dropdown-item__header" @click="handleClick">
+  <view
+    :class="[
+      'hy-dropdown-item__header',
+      isOpen && 'hy-dropdown-item__header--active',
+    ]"
+    @click="handleClick"
+  >
     <text
       class="hy-dropdown-item__header--title"
       :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
@@ -31,7 +37,10 @@
         <!-- 选项 -->
         <view class="hy-dropdown-item__main--container__list" v-else>
           <view
-            class="hy-dropdown-item__main--container__list-item"
+            :class="[
+              'hy-dropdown-item__main--container__list-item',
+              isOpen && 'hy-dropdown-item__main--container__list--active',
+            ]"
             v-for="(item, index) in menus"
             :key="item.value || index"
             @click="onSelect(item, index)"
@@ -57,7 +66,16 @@
 </template>
 
 <script setup lang="ts">
-import {computed, inject, ref, onMounted, watch, useSlots, toRefs, getCurrentInstance} from "vue";
+import {
+  computed,
+  inject,
+  ref,
+  onMounted,
+  watch,
+  useSlots,
+  toRefs,
+  getCurrentInstance,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type FatherIProps from "../hy-dropdown/typing";

package/components/hy-dropdown-item/index.scss

@@ -1,6 +1,22 @@
 @use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
 
-.hy-dropdown-item {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(dropdown-item) {
+      color: $hy-dark-color;
+      &__header {
+        background-color: $hy-dark-background--container;
+      }
+      &__main--container {
+        background-color: $hy-dark-background--container;
+      }
+    }
+  }
+}
+
+@include b(dropdown-item) {
   &__header {
     width: 100%;
     height: 100%;
@@ -15,6 +31,15 @@
     position: relative;
     z-index: 999;
     background-color: #ffffff;
+
+    &--active {
+      color: $hy-primary;
+      :deep() {
+        @include b(icon) {
+          color: $hy-primary;
+        }
+      }
+    }
   }
 
   &__main {
@@ -47,6 +72,14 @@
         width: 100%;
         padding: 0 35rpx;
         box-sizing: border-box;
+        &--active {
+          color: $hy-primary;
+          :deep() {
+            @include b(icon) {
+              color: $hy-primary;
+            }
+          }
+        }
         &-item {
           width: 100%;
           padding: 30rpx 0;
@@ -55,7 +88,7 @@
           align-items: center;
 
           &:not(:last-of-type) {
-            border-bottom: 1px solid #f2f2f2;
+            border-bottom: $hy-border-line;
           }
 
           &--label {

package/components/hy-dropdown-item/typing.d.ts

@@ -1,5 +1,3 @@
-import type { CSSProperties } from "vue";
-
 export interface DropdownMenuItem {
   /**
    * @description 展示标题
@@ -11,7 +9,7 @@ export interface DropdownMenuItem {
   value: string | number;
 }
 
-export default interface IProps {
+export default interface HyDropdownItemProps {
   /**
    * @description 获取值
    * */

package/components/hy-empty/hy-empty.vue

@@ -14,20 +14,32 @@
     <view class="hy-empty__description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
       <text v-else :style="descriptionStyle">{{ emptyDescription }}</text>
-      <HyButton
-        class="hy-empty__button"
-        v-if="btnText"
-        :text="btnText"
-        :size="btnSize"
-        :type="btnType"
-        :shape="btnShape"
-        :plain="btnPlain"
-        @click="handleClick"
-      ></HyButton>
+      <view class="hy-empty__button" v-if="button?.text">
+        <HyButton
+          :text="button?.text"
+          :size="button?.size"
+          :type="button?.type"
+          :shape="button?.shape"
+          :plain="button?.plain"
+          :custom-style="button?.customStyle"
+          @click="handleClick"
+        ></HyButton>
+      </view>
     </view>
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-empty",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-empty/index.scss

@@ -1,4 +1,17 @@
-.hy-empty {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(empty) {
+      background-color: $hy-dark-background;
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(empty) {
   top: 0;
   left: 0;
   width: 100%;
@@ -7,13 +20,14 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background: rgb(255, 255, 255);
+  background: $hy-light-background;
   &__description {
     width: 70%;
     text-align: center;
+    margin-top: $hy-border-margin-padding-base;
   }
 
   &__button {
-    margin-top: 80rpx;
+    margin-top: 100rpx;
   }
 }