@polyv/vue-components 1.0.1

package/src/vue-utils/props-utils.d.ts

@@ -0,0 +1,61 @@
+import { UniversalParams } from '../interface';
+import { IconComponentOption } from '@polyv/icons-vue/icon-builder';
+import { ComputedRef, CSSProperties, ExtractPropTypes } from 'vue';
+import { oneOf as _oneOf, oneOfType as _oneOfType, VueTypeValidableDef } from 'vue-types';
+/** prop 配置工具 */
+export declare const PropUtils: {
+    /** String 类型，默认：'' */
+    readonly string: VueTypeValidableDef<string, import('vue-types/dist/types').ValidatorFunction<string>> & {
+        default: string;
+    };
+    /** String 类型，默认：undefined */
+    readonly looseString: VueTypeValidableDef<string, import('vue-types/dist/types').ValidatorFunction<string>>;
+    /** Number 类型，默认：0 */
+    readonly number: VueTypeValidableDef<number, import('vue-types/dist/types').ValidatorFunction<number>> & {
+        default: number;
+    };
+    /** Number 类型，默认：undefined */
+    readonly looseNumber: VueTypeValidableDef<number, import('vue-types/dist/types').ValidatorFunction<number>>;
+    /** Boolean 类型，默认：true */
+    readonly bool: VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
+        default: boolean;
+    };
+    readonly looseBool: import('vue-types').VueTypeDef<boolean | undefined> & {
+        default: boolean | undefined;
+    };
+    readonly looseElement: import('vue-types').VueTypeDef<HTMLElement | undefined> & {
+        default: (() => HTMLElement) | undefined;
+    };
+    /** Array 类型，默认：[] */
+    array: <T = unknown>() => VueTypeValidableDef<T[], import('vue-types/dist/types').ValidatorFunction<T[]>> & {
+        default: () => T[];
+    };
+    /** Object 类型 */
+    object: <T extends {
+        [key: string]: any;
+    }>() => import('vue-types/dist/types').VueTypeValidableDef<T, import('vue-types/dist/types').ValidatorFunction<T>>;
+    /** Function 类型 */
+    func: <T extends (...args: any[]) => any>() => import('vue-types/dist/types').VueTypeValidableDef<T, import('vue-types/dist/types').ValidatorFunction<T>>;
+    /** 指定为数组中的值 */
+    oneOf: typeof _oneOf;
+    /** 自定义类型 */
+    oneOfType: typeof _oneOfType;
+    /** 枚举类型 */
+    enum: <T extends string = string>() => import('vue-types/dist/types').VueTypeValidableDef<T, import('vue-types/dist/types').ValidatorFunction<T>>;
+    /** 样式 */
+    style: () => VueTypeValidableDef<CSSProperties, import('vue-types/dist/types').ValidatorFunction<CSSProperties>> & {
+        default: () => CSSProperties;
+    };
+    /** 图标组件类型 */
+    icon: () => VueTypeValidableDef<IconComponentOption>;
+    modelValueKey: "value";
+};
+/** 将 props 定义函数转成类型 */
+export type VueProps<FN extends () => UniversalParams> = Readonly<ExtractPropTypes<ReturnType<FN>>>;
+/** 将 props 定义函数转成类型 */
+export type FormatProps<FN extends () => UniversalParams> = Partial<ExtractPropTypes<ReturnType<FN>>>;
+export type PropComputedRefs<P extends object> = {
+    [K in keyof P]: ComputedRef<P[K]>;
+};
+/** 结构 props，将 props 转成 computed */
+export declare const useProps: <P extends object>(props: P) => PropComputedRefs<P>;

package/styles/animation.scss

@@ -0,0 +1,24 @@
+// 渐变动画
+.pwc-fade-enter-active {
+  animation: pwc-fade-in .3s;
+}
+.pwc-fade-leave-active {
+  animation: pwc-fade-in .35s reverse;
+}
+@keyframes pwc-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pwc-loading-animation {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

package/styles/mixins.scss

@@ -0,0 +1,123 @@
+/**
+ * 清除输入框样式
+ */
+@mixin clear-input-style {
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  &::-webkit-input-placeholder {
+    color: #9E9E9E;
+  }
+  &::placeholder {
+    color: #9E9E9E;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+  }
+  &[type=number] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+  &[disabled] {
+    opacity: 1;
+  }
+  &[type=button],
+  &[type=submit],
+  &[type=reset] {
+    appearance: none;
+    -webkit-appearance: none;
+    background: #fff;
+  }
+}
+
+/**
+ * 滚动条样式
+ * @param {string} $trackColor - 轨道颜色
+ * @param {string} $trackBorder - 轨道边框颜色
+ * @param {string} $thumbColor - 滑块颜色
+ * @param {string} $thumbColor-hover - 滑块悬停颜色
+ * @param {string} $thumbColor-active - 滑块激活颜色
+ */
+@mixin scrollbar($trackColor: #f5f5f5, $trackBorder: transparent, $thumbColor: rgba(189, 189, 189, 0.5), $thumbColor-hover: rgba(158, 158, 158, 0.8), $thumbColor-active: rgba(158, 158, 158, 0.9)) {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumbColor;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+    &:hover {
+      background-color: $thumbColor-hover;
+    }
+    &:active {
+      background-color: $thumbColor-active;
+    }
+  }
+  &::-webkit-scrollbar-track {
+    background-color: $trackColor;
+    border-left: 1px solid $trackBorder;
+  }
+}
+
+/**
+ * 通用滚动条样式
+ */
+@mixin common-scrollbar {
+  @include scrollbar(transparent, transparent, rgba(#000000, 0.16));
+}
+
+/**
+ * 对于 iphone x 系列采用安全距离作为底部 padding
+ * @param {number} $normalBottom - 若非 iphone x 系列,底部距离
+ */
+ @mixin iphone-x-pb($normalBottom, $isReplace: true) {
+  @if $normalBottom == 0 {
+    $normalBottom: unquote('0px');
+  }
+
+  // 用安全距离替换原底部padding值。若原底部padding值大于底部安全距离，则不会被替换。
+  @if $isReplace {
+    padding-bottom: $normalBottom;
+    .g-page--ios & {
+      @supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom, $normalBottom)) {
+        padding-bottom: unquote('max(constant(safe-area-inset-bottom, #{$normalBottom}), #{$normalBottom})');
+        padding-bottom: unquote('max(env(safe-area-inset-bottom, #{$normalBottom}), #{$normalBottom})');
+      }
+    }
+  } @else {
+    // 安全距离与原底部padding值叠加
+    // ios < 11.2
+    padding-bottom: calc(constant(safe-area-inset-bottom) + #{$normalBottom});
+    // ios >= 11.2
+    padding-bottom: calc(env(safe-area-inset-bottom) + #{$normalBottom});
+    // 兼容不支持calc(env(safe-area-inset-bottom)和calc(constant(safe-area-inset-bottom)这两种写法的浏览器，假设安全距离为0，设置padding-bottom为传出的值
+    @supports not(padding-bottom: calc(env(safe-area-inset-bottom) + #{$normalBottom}) or (padding-bottom: calc(constant(safe-area-inset-bottom, $normalBottom) + #{$normalBottom}))) {
+      padding-bottom: $normalBottom;
+    }
+  }
+}
+
+/**
+ * 单行文本截断省略
+ */
+@mixin singleline-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * 多行文本截断省略
+ * @param {number} $number - 行数
+ */
+@mixin multiline-text($number: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $number;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}