@zfqh/uview-x 0.0.3 → 0.0.5

package/utils/scrollbar.ts

@@ -0,0 +1,181 @@
+/**
+ * H5 全局滚动条样式（仅 H5 运行时注入）。
+ *
+ * - `false`（默认）：隐藏滚动条（保持原 reset 的默认效果）；
+ * - `true`：使用默认滚动条样式；
+ * - 对象：在默认样式基础上覆盖 `::-webkit-scrollbar` 及其 thumb / track。
+ *
+ * 注入入口见 `index.ts` 的 `install`（H5 条件编译）。
+ */
+
+/** 单组滚动条 CSS 样式：camelCase / kebab-case 均可；number 默认按 px 处理（无单位属性除外） */
+export type UviewXScrollbarStyle = Record<string, string | number>;
+
+/** 滚动条自定义样式：默认合并 / 扩展 ::-webkit-scrollbar 及其 thumb / track */
+export interface UviewXScrollbarOptions {
+  /** ::-webkit-scrollbar-thumb 样式，覆盖默认 thumb 样式 */
+  thumb?: UviewXScrollbarStyle;
+  /** ::-webkit-scrollbar-track 样式，覆盖默认 track 样式 */
+  track?: UviewXScrollbarStyle;
+  /** 其余键作为 ::-webkit-scrollbar 样式，覆盖默认宽高 */
+  [property: string]: string | number | UviewXScrollbarStyle | undefined;
+}
+
+export type UviewXScrollbar = boolean | UviewXScrollbarOptions;
+
+/** 注入到 `<style>` 的元素 id；重复设置时替换同一节点 */
+const SCROLLBAR_STYLE_ID = 'uv-scrollbar-style';
+
+/** `false`：隐藏滚动条 */
+const HIDDEN_SCROLLBAR_STYLE: UviewXScrollbarStyle = {
+  display: 'none',
+  width: '0 !important',
+  height: '0 !important',
+  WebkitAppearance: 'none',
+  background: 'transparent',
+};
+
+/** `true` / 对象的默认基础样式 */
+const DEFAULT_SCROLLBAR_STYLE: UviewXScrollbarStyle = {
+  width: 6,
+  height: 6,
+};
+
+const DEFAULT_SCROLLBAR_THUMB_STYLE: UviewXScrollbarStyle = {
+  background: '#c0c4cc',
+  borderRadius: 3,
+};
+
+const DEFAULT_SCROLLBAR_TRACK_STYLE: UviewXScrollbarStyle = {
+  background: 'transparent',
+};
+
+/** 数值不补 px 的 CSS 属性（已转换为 kebab-case） */
+const UNITLESS_PROPERTIES = new Set([
+  'opacity',
+  'z-index',
+  'font-weight',
+  'line-height',
+  'flex',
+  'flex-grow',
+  'flex-shrink',
+  'order',
+  'zoom',
+  'animation-iteration-count',
+  'column-count',
+  'tab-size',
+]);
+
+/** camelCase → kebab-case；已是 kebab-case 的属性保持不变 */
+function toKebabCase(property: string): string {
+  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function formatStyleValue(property: string, value: string | number): string {
+  if (typeof value === 'number' && !UNITLESS_PROPERTIES.has(toKebabCase(property))) {
+    return `${value}px`;
+  }
+  return String(value);
+}
+
+/** 把样式对象转换为 CSS 声明串 */
+function styleToDeclarations(style: UviewXScrollbarStyle): string {
+  const declarations: string[] = [];
+  for (const property of Object.keys(style)) {
+    const value = style[property];
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      continue;
+    }
+    declarations.push(`${toKebabCase(property)}: ${formatStyleValue(property, value)};`);
+  }
+  return declarations.join(' ');
+}
+
+function toRule(selector: string, style: UviewXScrollbarStyle): string {
+  const declarations = styleToDeclarations(style);
+  return declarations ? `${selector} { ${declarations} }` : '';
+}
+
+function isScrollbarStyle(value: unknown): value is UviewXScrollbarStyle {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function mergeScrollbarStyle(base: UviewXScrollbarStyle, override?: UviewXScrollbarStyle): UviewXScrollbarStyle {
+  return override ? { ...base, ...override } : { ...base };
+}
+
+/**
+ * 生成滚动条 CSS。
+ *
+ * - `false` / `undefined`：隐藏滚动条；
+ * - `true`：默认滚动条样式；
+ * - 对象：默认样式 + 用户覆盖；空对象等价 `true`。
+ */
+export function buildScrollbarCss(scrollbar: UviewXScrollbar): string {
+  if (!scrollbar) {
+    return toRule('::-webkit-scrollbar', HIDDEN_SCROLLBAR_STYLE);
+  }
+  if (scrollbar === true) {
+    return [
+      toRule('::-webkit-scrollbar', DEFAULT_SCROLLBAR_STYLE),
+      toRule('::-webkit-scrollbar-thumb', DEFAULT_SCROLLBAR_THUMB_STYLE),
+      toRule('::-webkit-scrollbar-track', DEFAULT_SCROLLBAR_TRACK_STYLE),
+    ]
+      .filter(Boolean)
+      .join('\n');
+  }
+
+  // 自定义样式：`thumb` / `track` 之外的键作为基础样式
+  const baseOverride: UviewXScrollbarStyle = {};
+  let thumbOverride: UviewXScrollbarStyle | undefined;
+  let trackOverride: UviewXScrollbarStyle | undefined;
+  for (const property of Object.keys(scrollbar)) {
+    const value = scrollbar[property];
+    if (property === 'thumb' || property === 'track') {
+      if (isScrollbarStyle(value)) {
+        if (property === 'thumb') {
+          thumbOverride = value;
+        } else {
+          trackOverride = value;
+        }
+      }
+      continue;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      baseOverride[property] = value;
+    }
+  }
+
+  return [
+    toRule('::-webkit-scrollbar', mergeScrollbarStyle(DEFAULT_SCROLLBAR_STYLE, baseOverride)),
+    toRule('::-webkit-scrollbar-thumb', mergeScrollbarStyle(DEFAULT_SCROLLBAR_THUMB_STYLE, thumbOverride)),
+    toRule('::-webkit-scrollbar-track', mergeScrollbarStyle(DEFAULT_SCROLLBAR_TRACK_STYLE, trackOverride)),
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
+
+/**
+ * 应用 H5 滚动条样式：替换 `#uv-scrollbar-style` 节点；其它平台不会注入任何代码。
+ *
+ * `document` 不存在（SSR / Node 单测）时静默返回。
+ */
+export function applyScrollbar(scrollbar: UviewXScrollbar): void {
+  // #ifdef WEB || H5
+  if (typeof document === 'undefined' || !document.head) {
+    return;
+  }
+  const existing = document.getElementById(SCROLLBAR_STYLE_ID);
+  if (existing && existing.parentNode) {
+    existing.parentNode.removeChild(existing);
+  }
+  const css = buildScrollbarCss(scrollbar);
+  if (!css) {
+    return;
+  }
+  const styleElement = document.createElement('style');
+  styleElement.id = SCROLLBAR_STYLE_ID;
+  styleElement.textContent = css;
+  document.head.appendChild(styleElement);
+  // #endif
+}

package/styles/color.scss

@@ -1,33 +0,0 @@
-$uv-main-color: #333333 !default;
-$uv-content-color: #7a7a7a !default;
-$uv-tips-color: #9a9a9a !default;
-$uv-light-color: #c0c4cc !default;
-$uv-border-color: #eeeeee !default;
-$uv-bg-color: #f5f5f5 !default;
-$uv-bg-light-color: #fffbf4 !default;
-$uv-disabled-color: #c8c9cc !default;
-
-$uv-primary: #00b4c3 !default;
-$uv-primary-dark: #157572 !default;
-$uv-primary-disabled: #b4e3d9 !default;
-$uv-primary-light: #dff3f9 !default;
-
-$uv-warning: #ff9a05 !default;
-$uv-warning-dark: #ed6c04 !default;
-$uv-warning-disabled: #f9d39b !default;
-$uv-warning-light: #fdf6ec !default;
-
-$uv-success: #5ac725 !default;
-$uv-success-dark: #53c21d !default;
-$uv-success-disabled: #a9e08f !default;
-$uv-success-light: #f5fff0 !default;
-
-$uv-error: #ff4d4f !default;
-$uv-error-dark: #e45656 !default;
-$uv-error-disabled: #f7b2b2 !default;
-$uv-error-light: #fef0f0 !default;
-
-$uv-info: #909399 !default;
-$uv-info-dark: #767a82 !default;
-$uv-info-disabled: #c4c6c9 !default;
-$uv-info-light: #f4f4f5 !default;

package/styles/components.scss

@@ -1,19 +0,0 @@
-// uview-x 组件样式基础 mixin。
-//
-// 注意：这里只允许输出“编译期可消解”的 SCSS 或扁平 class 规则。
-// uni-app x App 蒸汽模式不支持元素选择器、后代选择器、伪类/伪元素，
-// 因此原 uv-ui 中的 view/scroll-view 全局重置必须放在 index.scss 的
-// WEB / MP 条件块中，不能出现在每个组件的 style 里。
-@mixin flex($direction: row) {
-	/* #ifndef APP-NVUE */
-	display: flex;
-	/* #endif */
-	flex-direction: $direction;
-}
-
-// 细边框（用于需要显式声明边框的场景，调用方自行控制 class）
-@mixin border-1px($color: #dadbde) {
-	border-width: 0.5px;
-	border-color: $color;
-	border-style: solid;
-}

package/styles/vue.scss

@@ -1,39 +0,0 @@
-// 全局辅助样式（x-safe）。
-//
-// App 蒸汽模式不支持元素选择器、伪元素、后代选择器；
-// Web/小程序不需要这些限制，相关规则保留在条件编译块中。
-
-// 四个方向的安全区
-@each $d in top, right, bottom, left {
-	.uv-safe-area-inset-#{$d} {
-		padding-#{$d}: 0;
-		/* #ifdef APP */
-		padding-#{$d}: var(--uni-safe-area-inset-#{$d}, 0px);
-		/* #endif */
-		/* #ifdef WEB || H5 || MP */
-		padding-#{$d}: constant(safe-area-inset-#{$d});
-		padding-#{$d}: env(safe-area-inset-#{$d});
-		/* #endif */
-	}
-}
-
-/* #ifdef WEB || H5 */
-// 提升 H5 端 uni.toast() 的层级，避免被弹层遮盖
-uni-toast {
-	z-index: 10090;
-}
-uni-toast .uni-toast {
-	z-index: 10090;
-}
-
-// 隐藏 scroll-view 滚动条
-::-webkit-scrollbar {
-	display: none;
-	width: 0 !important;
-	height: 0 !important;
-	-webkit-appearance: none;
-	background: transparent;
-}
-/* #endif */
-
-

package/theme.scss

@@ -1,2 +0,0 @@
-// 主题变量入口（兼容旧路径）：源文件位于 styles/theme.scss
-@import "./styles/theme.scss";