hy-app 0.2.4 → 0.2.5

package/components/hy-code-input/index.scss

@@ -24,6 +24,22 @@
       background-color: $hy-icon-color;
     }
 
+    /* 无边框 */
+    &__not {
+      background-color: $hy-background--track;
+      border-radius: $hy-border-radius-sm;
+      &__active {
+        &:before {
+          content: "";
+          background-color: $hy-text-color;
+          width: 1.5px;
+          border-radius: 2px;
+          height: 50%;
+          animation: 1s hy-cursor-flicker--2 infinite;
+        }
+      }
+    }
+
     /* 方块模式 */
     &__box {
       border-color: $hy-border-color--2;
@@ -93,6 +109,20 @@
   }
 }
 
+/* #ifndef APP-NVUE */
+@keyframes hy-cursor-flicker--2 {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/* #endif */
+
 /* #ifndef APP-NVUE */
 @keyframes hy-cursor-flicker {
   0% {
@@ -105,4 +135,4 @@
     opacity: 0.2;
   }
 }
-/* #endif */
+/* #endif */

package/components/hy-code-input/props.ts

@@ -1,21 +1,22 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
-  modelValue: "",
+  modelValue: '',
   adjustPosition: true,
   maxlength: 6,
+  border: true,
   dot: false,
-  mode: "box",
+  mode: 'box',
   hairline: false,
   space: 10,
   focus: false,
   bold: false,
-  color: "",
+  color: '',
   fontSize: 18,
   size: 35,
   disabledKeyboard: false,
-  borderColor: "",
+  borderColor: '',
   disabledDot: true,
-};
+}
 
-export default defaultProps;
+export default defaultProps

package/components/hy-code-input/typing.d.ts

@@ -1,65 +1,69 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyCodeInputProps {
-  modelValue: string | number;
+  modelValue: string | number
   /**
    * @description 键盘弹起时，是否自动上推页面（默认 true ）
    * */
-  adjustPosition?: boolean;
+  adjustPosition?: boolean
   /**
    * @description 最大输入长度（默认 6 ）
    * */
-  maxlength?: number;
+  maxlength?: number
+  /**
+   * @description 显示border
+   * */
+  border?: boolean
   /**
    * @description 是否用圆点填充（默认 false ）
    * */
-  dot?: boolean;
+  dot?: boolean
   /**
    * @description 显示模式，box-盒子模式，line-底部横线模式 （默认 'box' ）
    * */
-  mode?: "box" | string;
+  mode?: 'box' | string
   /**
    * @description 是否细边框 （默认 false ）
    * */
-  hairline?: boolean;
+  hairline?: boolean
   /**
    * @description 字符间的距离 （默认 10 ）
    * */
-  space?: number;
+  space?: number
   /**
    * @description 是否自动获取焦点 （默认 false ）
    * */
-  focus?: boolean;
+  focus?: boolean
   /**
    * @description 字体是否加粗 （默认 false ）
    * */
-  bold?: boolean;
+  bold?: boolean
   /**
    * @description 字体颜色 （默认 '#606266' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 字体大小，单位px （默认 18 ）
    * */
-  fontSize?: number;
+  fontSize?: number
   /**
    * @description 输入框的大小，宽等于高 （默认 35 ）
    * */
-  size?: number | string;
+  size?: number | string
   /**
    * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
    * */
-  disabledKeyboard?: boolean;
+  disabledKeyboard?: boolean
   /**
    * @description 边框和线条颜色 （默认 '#c9cacc' ）
    * */
-  borderColor?: string;
+  borderColor?: string
   /**
    * @description 是否禁止输入"."符号 （默认 true ）
    * */
-  disabledDot?: boolean;
+  disabledDot?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

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

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

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

@@ -1,14 +1,12 @@
 <template>
   <!-- 标题栏 -->
-  <view
-    :class="['hy-dropdown-item__header', isOpen && 'is-active']"
-    @click="handleClick"
-  >
+  <view :class="['hy-dropdown-item__header', isOpen && 'is-active']" @click="handleClick">
     <text
       class="hy-dropdown-item__header--title"
       :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
-      >{{ title }}</text
     >
+      {{ title }}
+    </text>
     <HyIcon
       :custom-style="{
         transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',
@@ -19,11 +17,7 @@
     ></HyIcon>
   </view>
   <!-- 下拉弹窗 -->
-  <HyOverlay
-    :show="isOpen"
-    :custom-style="{ top: addUnit(dropPopupTop) }"
-    @click="closePopupFn"
-  >
+  <HyOverlay :show="isOpen" :custom-style="{ top: addUnit(dropPopupTop) }" @click="closePopupFn">
     <view
       class="hy-dropdown-item__main"
       :style="{ top: addUnit(dropPopupTop), height: addUnit(dropHeight) }"
@@ -47,8 +41,9 @@
               :style="{
                 color: currentIndex === index ? currentColor : inactiveColor,
               }"
-              >{{ item.label }}</view
             >
+              {{ item.label }}
+            </view>
             <!-- 勾选图标 -->
             <HyIcon
               v-if="currentIndex === index"
@@ -62,91 +57,90 @@
   </HyOverlay>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-dropdown-item',
+  options: {
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
 <script setup lang="ts">
-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";
-import type { DropdownMenuItem } from "./typing";
-import { addUnit, getRect, throttle } from "../../utils";
-import { IconConfig } from "../../config";
+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'
+import type { DropdownMenuItem } from './typing'
+import { addUnit, getRect, throttle } from '../../utils'
+import { IconConfig } from '../../config'
 
-import HyOverlay from "../hy-overlay/hy-overlay.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyOverlay from '../hy-overlay/hy-overlay.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, menus } = toRefs(props);
-const emits = defineEmits(["update:modelValue", "change"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { modelValue, menus } = toRefs(props)
+const emits = defineEmits(['update:modelValue', 'change'])
 
-const slots = useSlots();
+const slots = useSlots()
 //是否有插槽
 const hasSlot = computed(() => {
-  return Object.keys(slots).length > 0;
-});
-const instance = getCurrentInstance();
+  return Object.keys(slots).length > 0
+})
+const instance = getCurrentInstance()
 //父的props值
-const dropdownProps: FatherIProps | undefined = inject("dropdownProps");
-const { titleSize, menuIcon, menuIconSize, inactiveColor } =
-  dropdownProps as FatherIProps;
+const dropdownProps: FatherIProps | undefined = inject('dropdownProps')
+const { titleSize, menuIcon, menuIconSize, inactiveColor } = dropdownProps as FatherIProps
 //当前打开的dropItem项（标签名）
-const currentDropItem: any = inject("currentDropItem");
+const currentDropItem: any = inject('currentDropItem')
 //当前文字/箭头颜色
 const currentColor = computed(() => {
-  return isOpen.value ? dropdownProps?.activeColor : inactiveColor;
-});
+  return isOpen.value ? dropdownProps?.activeColor : inactiveColor
+})
 //是否打开
-const isOpen = ref<boolean>(false);
+const isOpen = ref<boolean>(false)
 //下拉弹窗距离页面顶部距离
-const dropPopupTop = ref(0);
+const dropPopupTop = ref(0)
 //下拉弹窗高度
-const dropHeight = ref<string | number>(0);
+const dropHeight = ref<string | number>(0)
 //下拉选项当前选中的索引
-const currentIndex = ref(-1);
+const currentIndex = ref(-1)
 
 //动态class
-const customClass = computed(() => (isOpen.value ? "visible" : "hidden"));
+const customClass = computed(() => (isOpen.value ? 'visible' : 'hidden'))
 
 onMounted(() => {
-  getDropPopupTop();
-});
+  getDropPopupTop()
+})
 
 /**
  * @description 计算下拉弹窗区域距离页面顶部距离
  * */
 const getDropPopupTop = () => {
-  getRect(".hy-dropdown-item__header", false, instance).then((rect) => {
-    const { bottom } = rect as UniApp.NodeInfo;
+  getRect('.hy-dropdown-item__header', false, instance).then((rect) => {
+    const { bottom } = rect as UniApp.NodeInfo
     // #ifdef H5
     //H5需要加上导航栏高度，固定44px
-    dropPopupTop.value = (bottom || 0) + 44;
+    dropPopupTop.value = (bottom || 0) + 44
     // #endif
     //  #ifndef H5
-    dropPopupTop.value = bottom || 0;
+    dropPopupTop.value = bottom || 0
     // #endif
-  });
-};
+  })
+}
 
 watch(isOpen, (v) => {
   //打开状态显示父容器
   if (v) {
-    dropHeight.value = "auto";
+    dropHeight.value = 'auto'
   } else {
     //关闭状态隐藏父容器
     //延迟改变使得关闭动画能完整呈现
     setTimeout(() => {
-      dropHeight.value = 0;
-    }, 200);
+      dropHeight.value = 0
+    }, 200)
   }
-});
+})
 /**
  * @description 动态控制开关,
  * @desc 防止点击展开后在点击下一个，导致上一个没有关闭bug
@@ -156,29 +150,29 @@ watch(
   (newVal) => {
     //关闭其他条件的下拉弹窗
     if (newVal !== props.title) {
-      isOpen.value = false;
+      isOpen.value = false
     }
   },
-);
+)
 
 //根据双向绑定值动态设置下拉选中项索引
 watch(
   () => modelValue.value,
   (newVal) => {
-    currentIndex.value = menus.value.findIndex((item) => item.value === newVal);
+    currentIndex.value = menus.value.findIndex((item) => item.value === newVal)
   },
   { immediate: true },
-);
+)
 
 //选中监听
 const onSelect = (item: DropdownMenuItem, index: number) => {
-  isOpen.value = false;
+  isOpen.value = false
   if (index !== currentIndex.value) {
-    currentIndex.value = index;
-    emits("update:modelValue", item.value);
-    emits("change", item.value);
+    currentIndex.value = index
+    emits('update:modelValue', item.value)
+    emits('change', item.value)
   }
-};
+}
 
 /**
  * @description 打开或关闭
@@ -186,24 +180,24 @@ const onSelect = (item: DropdownMenuItem, index: number) => {
 const handleClick = () =>
   throttle(() => {
     //节流处理，防止点击过快动画未结束又切换导致显示bug
-    isOpen.value = !isOpen.value;
+    isOpen.value = !isOpen.value
     if (isOpen.value) {
       // 防止点击展开后在点击下一个，导致上一个没有关闭bug
-      currentDropItem.value = props.title;
-      getDropPopupTop();
+      currentDropItem.value = props.title
+      getDropPopupTop()
     }
-  });
+  })
 
 /**
  * @description 点击遮罩框关闭弹窗
  * */
 const closePopupFn = () => {
   if (dropdownProps?.closeOnClickMask) {
-    isOpen.value = false;
+    isOpen.value = false
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -109,4 +109,4 @@
   100% {
     top: -100%;
   }
-}
+}