@ecolovo/uniapp-components 1.0.0

package/resources/iconfont/uniapp_ui_icon/iconfont.json

@@ -0,0 +1,121 @@
+{
+  "id": "5081622",
+  "name": "小程序组件库图标",
+  "font_family": "uniapp_ui_icon",
+  "css_prefix_text": "ui_icon__",
+  "description": "仅包含在小程序组件库中用到的图标",
+  "glyphs": [
+    {
+      "icon_id": "36858635",
+      "name": "勾选",
+      "font_class": "checked",
+      "unicode": "e69b",
+      "unicode_decimal": 59035
+    },
+    {
+      "icon_id": "36340731",
+      "name": "编辑",
+      "font_class": "textarea-edit",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "38860112",
+      "name": "加",
+      "font_class": "step-plus",
+      "unicode": "e6e1",
+      "unicode_decimal": 59105
+    },
+    {
+      "icon_id": "38860221",
+      "name": "减",
+      "font_class": "step-minus",
+      "unicode": "e6e4",
+      "unicode_decimal": 59108
+    },
+    {
+      "icon_id": "43179150",
+      "name": "选择器-箭头",
+      "font_class": "picker-arrow",
+      "unicode": "e70e",
+      "unicode_decimal": 59150
+    },
+    {
+      "icon_id": "15908697",
+      "name": "密码-明文",
+      "font_class": "password-show",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "15908700",
+      "name": "密码-密文",
+      "font_class": "password-hide",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "36340727",
+      "name": "关闭",
+      "font_class": "close",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "41647659",
+      "name": "关闭",
+      "font_class": "close-filled",
+      "unicode": "e70c",
+      "unicode_decimal": 59148
+    },
+    {
+      "icon_id": "33519",
+      "name": "导航-首页",
+      "font_class": "nav-home",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+    {
+      "icon_id": "43179149",
+      "name": "导航-回退",
+      "font_class": "nav-back",
+      "unicode": "e70d",
+      "unicode_decimal": 59149
+    },
+    {
+      "icon_id": "46322002",
+      "name": "多选-勾选",
+      "font_class": "checkbox-checked",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "46322001",
+      "name": "多选-未勾选",
+      "font_class": "checkbox-unchecked",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "46319790",
+      "name": "单选-勾选",
+      "font_class": "radio-checked",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "36340729",
+      "name": "单选-未勾选",
+      "font_class": "radio-unchecked",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "46276469",
+      "name": "加载动画-spinner",
+      "font_class": "loading-dot-spinner",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    }
+  ]
+}

package/resources/image/empty.svg

@@ -0,0 +1,13 @@
+<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#dee0e4" d="M 515.4 453 l -327.7 -41 l 273.1 -58 l 351.6 30.7 l -297 68.3 z" />
+    <path fill="#bbc0c9" d="M 515.4 846.5 v -393 l 286.7 -64.4 v 372.7 l -286.7 84.7 z" />
+    <path fill="#dcdfe3" d="M 515.4 846.5 v -393 L 187.7 413 v 369.3 l 327.7 64.2 z" />
+    <path fill="#e9eaee" d="M 610.2 600.8 L 515.4 454 l 297 -68.3 l 99 133.1 l -301.2 81.9 z" />
+    <path fill="#eaecf0" d="M 443.7 614.4 L 515.4 454 l -327.7 -41 l -78.5 143.4 l 334.5 58 z" />
+    <path fill="#ccd2db"
+        d="M 290.1 276.5 c -54.6 -5.5 -79.6 -61.4 -85.3 -88.8 c 44.4 44.4 64.8 30.7 85.3 34.1 c 35.5 35.5 96.7 35.3 122.9 30.7 c -13.7 6.8 -54.6 30.7 -122.9 23.9 z" />
+    <path fill="#e8eaee"
+        d="M 208.2 198 c -8.2 -13.7 -14.8 -51.2 -17.1 -68.3 c 49.1 41 95.6 33 112.6 23.9 c 34.1 71.7 133.1 95.6 122.9 95.6 c -78.5 30.7 -133.1 -6.8 -139.9 -20.5 c -47.8 3.4 -68.3 -13.7 -78.5 -30.7 z M 696.3 331.1 c 20.5 -37.5 30.7 -81.9 34.1 -116 c 17.1 -3.4 37.5 -17.1 47.8 -30.7 c 6.8 71.7 -20.5 119.5 -30.7 126.3 c -8.2 5.5 -37.5 17.1 -51.2 20.5 z" />
+    <path fill="#bdc1c9"
+        d="M 88.8 570 c -19.1 0 -37.5 -10.2 -47.8 -20.5 c 34.1 -10.2 61.4 -23.9 71.7 -30.7 c 13.7 10.2 34.1 17.1 44.4 20.5 C 140 556.4 108 570 88.8 570 z" />
+</svg>

package/styles/global.scss

@@ -0,0 +1,24 @@
+@use 'sass:color';
+@use './var' as *;
+@use './utils' as *;
+
+page {
+	@each $name, $value in $component-themes {
+		@for $i from 9 through 1 {
+			#{DO_NOT_USE__global-var-name(theme, $name + '-dark' + $i)}: #{color.scale($value, $blackness: $i * 10%)};
+		}
+		#{DO_NOT_USE__global-var-name(theme, $name)}: #{$value};
+		@for $i from 1 through 9 {
+			#{DO_NOT_USE__global-var-name(theme, $name + '-light' + $i)}: #{color.scale($value, $whiteness: $i * 10%)};
+		}
+	}
+	@each $name, $value in $component-colors {
+		#{DO_NOT_USE__global-var-name(color, $name)}: #{$value};
+	}
+	@each $name, $value in $component-font-sizes {
+		#{DO_NOT_USE__global-var-name(font-size, $name)}: #{$value};
+	}
+	@each $name, $value in $component-vars {
+		#{DO_NOT_USE__global-var-name(other, $name)}: #{$value};
+	}
+}

package/styles/index.scss

@@ -0,0 +1,2 @@
+@forward './utils';
+@forward './var';

package/styles/utils/css-var.scss

@@ -0,0 +1,87 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../var/theme' as *;
+
+$component-name: null !default;
+$component-vars: null !default;
+
+// 返回组件外部变量名
+@function UTILS__VAR_NAME($name, $component: $component-name) {
+	@return string.unquote('--#{$component-prefix}-#{$component}--#{$name}');
+}
+
+// 设置组件外部变量值
+@mixin UTILS__SET_VAR($component, $values) {
+	@each $name, $value in $values {
+		#{UTILS__VAR_NAME($name, $component)}: $value;
+	}
+}
+
+// 返回组件外部变量值
+@function UTILS__VAR($name, $component: $component-name, $default: null) {
+	@if $default != null {
+		@return var(UTILS__VAR_NAME($name, $component), $default);
+	}
+
+	@return var(UTILS__VAR_NAME($name, $component));
+}
+
+// 返回组件内部变量值
+@function UTILS__LOCAL_VAR($name, $default: null) {
+	@if $default != null {
+		@return var(__DO_NOT_USE__local-var-name($name), $default);
+	}
+
+	@return var(__DO_NOT_USE__local-var-name($name));
+}
+
+// 定义组件变量
+@mixin UTILS__DEFINE_COMPONENT_VARS() {
+	@if not $component-name {
+		@error "请在调用 UTILS__DEFINE_COMPONENT_VARS 之前设置 $component-name";
+	}
+
+	@if (not $component-vars) or (meta.type-of($component-vars) != 'map') {
+		@error "请在调用 UTILS__DEFINE_COMPONENT_VARS 之前设置 $component-vars";
+	}
+
+	@each $key, $value in $component-vars {
+		@include __DO_NOT_USE__define-component-var($key, $value);
+	}
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+// 返回组件内部变量名
+@function __DO_NOT_USE__local-var-name($name) {
+	@return string.unquote('--#{$name}');
+}
+
+// 定义单个组件变量，不要直接调用
+@mixin __DO_NOT_USE__define-component-var($name, $value) {
+	@if not $component-prefix {
+		@error "请在调用 __DO_NOT_USE__define-component-var 之前设置 component-prefix";
+	}
+
+	$var-prefix: '#{$component-prefix}-#{$component-name}';
+
+	$default: false;
+
+	@if string.slice('' + $value, -3) == 'rpx' {
+		$default: true;
+	}
+
+	$var-name: UTILS__VAR_NAME($name);
+	$local-name: __DO_NOT_USE__local-var-name($name);
+
+	@if $default {
+		#{$var-name}--default: #{$value};
+		#{$local-name}: var(#{$var-name}, var(#{$var-name}--default));
+	} @else if $value == null {
+		#{$local-name}: var(#{$var-name});
+	} @else {
+		#{$local-name}: var(#{$var-name}, #{$value});
+	}
+}

package/styles/utils/ellipsis.scss

@@ -0,0 +1,26 @@
+// 单行
+.ellipsis {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@mixin UTILS__ELLIPSIS($line: 1) {
+	@if $line < 1 {
+		@error "$line 必须为非 0 正整数";
+	}
+
+	@if $line == 1 {
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	} @else {
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-break: break-all;
+		-webkit-box-orient: vertical; /*设置对齐模式*/
+		-webkit-line-clamp: $line; /*设置多行的行数*/
+		line-clamp: $line; /*设置多行的行数*/
+	}
+}

package/styles/utils/global-var.scss

@@ -0,0 +1,11 @@
+@use 'sass:string';
+@use '../var/theme' as *;
+
+@function DO_NOT_USE__global-var-name($type-name, $name) {
+	@return string.unquote('--#{$component-prefix}--#{$type-name}--#{$name}');
+}
+
+// 返回主题变量
+@function UTILS__GLOBAL_VAR($type-name, $name) {
+	@return var(#{DO_NOT_USE__global-var-name($type-name, $name)});
+}

package/styles/utils/index.scss

@@ -0,0 +1,5 @@
+@forward './css-var';
+@forward './ellipsis';
+@forward './global-var';
+@forward './selector';
+@forward './z-index';

package/styles/utils/selector.scss

@@ -0,0 +1,5 @@
+@use 'sass:list';
+
+@function UTILS__LAST_SELECTOR($selector) {
+	@return list.nth(list.nth($selector, -1), -1);
+}

package/styles/utils/z-index.scss

@@ -0,0 +1,10 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../var/theme' as *;
+@use './css-var' as *;
+
+@function UTILS__z-index($key: $component-name) {
+	@return map.get($component-z-index-maps, $key);
+}

package/styles/var/component.scss

@@ -0,0 +1,242 @@
+@use 'sass:map';
+@use '../utils' as *;
+
+$badge: () !default;
+$badge-default: (
+	// 相对于右上角偏移量
+	translate: 40% -40%,
+	// 字号
+	font-size: UTILS__GLOBAL_VAR(font-size, small),
+	// 文字颜色
+	color: #fff,
+	// 背景色
+	background: #ff0000,
+	// 边框
+	border: none,
+	// 高度
+	height: calc(#{UTILS__LOCAL_VAR(font-size)} + 12rpx),
+	// 圆角
+	border-radius: 40rpx
+);
+$badge: map.merge($badge-default, $badge);
+
+$page-header: () !default;
+$page-header-default: (
+	// 背景色
+	background: #fff,
+	// 字体大小
+	font-size: 28rpx,
+	// 标题栏下的额外内容高度，有内容时需设置次值
+	extra-height: 0px,
+	// 亮色主题下的文本颜色
+	color-light: #000,
+	// 暗色主题下的文本颜色
+	color-dark: #fff
+);
+$page-header: map.merge($page-header-default, $page-header);
+
+$page-body: () !default;
+$page-body-default: (
+	// 可视区域背景
+	background: transparent,
+	padding-x: 20rpx,
+	padding-y: 20rpx
+);
+$page-body: map.merge($page-body-default, $page-body);
+
+$page-footer: () !default;
+$page-footer-default: (
+	// 背景色
+	background: #fff,
+	// 高度
+	height: 100rpx,
+	// 横向两端间距
+	spacing-horizontal: 30rpx
+);
+$page-footer: map.merge($page-footer-default, $page-footer);
+
+$page: () !default;
+$page-default: (
+	// 页面背景
+	background: transparent
+);
+$page: map.merge($page-default, $page);
+
+$button: () !default;
+$button-default: (
+	// 按钮主题颜色，默认取值组件 props 中的 type
+	theme: var(--theme-from-prop),
+	// 按钮文本颜色
+	text-color: #fff,
+	// 按钮激活态遮罩颜色
+	active-mask: #ffffff,
+	// plain 按钮的边框宽度
+	border-width: 3rpx
+);
+$button: map.merge($button-default, $button);
+
+$data-list: () !default;
+$data-list-default: (
+	// 触发加载更多的区域高度
+	observer-height: 100vh
+);
+$data-list: map.merge($data-list-default, $data-list);
+
+$empty: () !default;
+$empty-default: (
+	image-size: 300rpx,
+	image-width: UTILS__LOCAL_VAR(image-size),
+	image-height: UTILS__LOCAL_VAR(image-size),
+	space: 20rpx,
+	color: #ccc,
+	font-size: UTILS__GLOBAL_VAR(font-size, normal),
+);
+$empty: map.merge($empty-default, $empty);
+
+$load-more: () !default;
+$load-more-default: (
+	height: 60rpx,
+	space: 40rpx,
+	color: #ccc,
+	font-size: UTILS__GLOBAL_VAR(font-size, normal),
+);
+$load-more: map.merge($load-more-default, $load-more);
+
+$checkbox: () !default;
+$checkbox-default: (
+	checked-color: UTILS__GLOBAL_VAR(theme, primary),
+	unchecked-color: UTILS__GLOBAL_VAR(color, foreground),
+);
+$checkbox: map.merge($checkbox-default, $checkbox);
+
+$popover: () !default;
+$popover-default: (
+	// 遮罩层颜色
+	mask-color: #00000080,
+	// 背景色
+	background: #fff,
+	// 位置，position 为 center 时有效
+	position: 50% auto auto 50%,
+	// 宽度，position 为 left 、 right 或 center 时有效
+	width: 80vw,
+	// 最小高度，position 为 top 、 bottom 或 center 时有效
+	min-height: 0px,
+	// 最大高度，position 为 top 、 bottom 或 center 时有效
+	max-height: 75vh,
+	// 内边距
+	padding: 20rpx,
+	// 边框圆角
+	radius: 20rpx,
+	// 头高度
+	header-height: 0px,
+	// 尾高度
+	footer-height: 0px
+);
+$popover: map.merge($popover-default, $popover);
+
+$dialog: () !default;
+$dialog-default: (
+	// 标题栏高度
+	header-height: 100rpx,
+	// 操作栏高度
+	footer-height: 134rpx
+);
+$dialog: map.merge($dialog-default, $dialog);
+
+$popup: () !default;
+$popup-default: (
+	// 标题栏高度
+	header-height: 100rpx,
+	// 操作栏高度
+	footer-height: 102rpx
+);
+$popup: map.merge($popup-default, $popup);
+
+$form-item: () !default;
+$form-item-default: (
+	// label 宽度
+	label-width: 6em,
+	// 高度
+	height: 80rpx
+);
+$form-item: map.merge($form-item-default, $form-item);
+
+$switch: () !default;
+$switch-default: (
+	width: 92rpx,
+	height: 48rpx,
+	active-color: UTILS__GLOBAL_VAR(theme, primary),
+	indicator-size: 42rpx,
+);
+$switch: map.merge($switch-default, $switch);
+
+$number-input: () !default;
+$number-input-default: (
+	font-size: inherit,
+	text-align: center,
+);
+$number-input: map.merge($number-input-default, $number-input);
+
+$numpad: () !default;
+$numpad-default: (
+	row-gap: 20rpx,
+	col-gap: 20rpx,
+);
+$numpad: map.merge($numpad-default, $numpad);
+
+$number-dialog: () !default;
+$number-dialog-default: (
+	// 按钮尺寸
+	button-size: 48rpx
+);
+$number-dialog: map.merge($number-dialog-default, $number-dialog);
+
+$tab: () !default;
+$tab-default: (
+	height: 88rpx,
+	tab-padding: 0 10rpx,
+	tab-gaps: 0,
+	color: UTILS__GLOBAL_VAR(color, foreground),
+	font-size: UTILS__GLOBAL_VAR(font-size, large),
+	font-weight: 600,
+	background: #ffffff,
+	border-radius: 0,
+	active-color: UTILS__LOCAL_VAR(color),
+	indicator-color: UTILS__GLOBAL_VAR(theme, primary),
+	indicator-width: null,
+);
+$tab: map.merge($tab-default, $tab);
+
+$search: () !default;
+$search-default: (
+	background: UTILS__GLOBAL_VAR(color, background),
+	border-radius: 8rpx,
+	height: 64rpx,
+	padding: 0 20rpx,
+);
+$search: map.merge($search-default, $search);
+
+$price: () !default;
+$price-default: (
+	color: inherit,
+	font-size: inherit,
+	font-weight: inherit,
+	integer-color: UTILS__LOCAL_VAR(color),
+	integer-font-size: UTILS__LOCAL_VAR(font-size),
+	integer-font-weight: UTILS__LOCAL_VAR(font-weight),
+	decimal-color: UTILS__LOCAL_VAR(color),
+	decimal-font-size: UTILS__LOCAL_VAR(font-size),
+	decimal-font-weight: UTILS__LOCAL_VAR(font-weight),
+	unit-color: UTILS__LOCAL_VAR(color),
+	unit-font-size: UTILS__LOCAL_VAR(font-size),
+	unit-font-weight: UTILS__LOCAL_VAR(font-weight),
+);
+$price: map.merge($price-default, $price);
+
+// $page: () !default;
+// $page-default: ();
+// $page: map.merge($page-default, $page);
+
+// $page: () !default;
+// $page-default: ();
+// $page: map.merge($page-default, $page);

package/styles/var/index.scss

@@ -0,0 +1,2 @@
+@forward './component';
+@forward './theme';

package/styles/var/theme.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+
+$component-prefix: 'app' !default;
+
+$component-z-index-maps: (
+	loading: 9999,
+	dialog: 4000,
+	dropdown: 3000,
+	popover: 3000,
+	page-header: 2000,
+	page-footer: 2000,
+) !default;
+
+$component-themes: (
+	primary: #f26f24,
+	secondary: #1e87e9,
+	success: #6fe633,
+	warning: #f3bb2d,
+	danger: #ff0000,
+	info: #9a9a99,
+) !default;
+
+$component-colors: (
+	foreground: #333,
+	background: #f4f5f6,
+	placeholder: #9a9a99,
+	disabled: c3c4c5,
+) !default;
+
+$component-font-sizes: (
+	small: 24rpx,
+	normal: 28rpx,
+	large: 32rpx,
+) !default;
+
+$component-vars: (
+	font-size-small: 24rpx,
+	font-size-normal: 28rpx,
+	font-size-large: 32rpx,
+) !default;