ep-craft 0.1.30 → 0.1.31

package/dist/vendored-components.d.ts

@@ -11,6 +11,6 @@
  * 2. 横切组件（icon/tooltip/collapse-transition/popper）由 vendor-cross-cutting
  *    vendor 到本地，同样需跳过 gen 包装以免被覆盖为 wrapper。
  */
-export declare const vendoredComponents: readonly ["Affix", "Alert", "Anchor", "AnchorLink", "Button", "CheckTag", "Tag", "Menu", "MenuItem", "MenuItemGroup", "SubMenu", "Tabs", "TabPane", "Radio", "RadioButton", "RadioGroup", "Input", "InputNumber", "Option", "OptionGroup", "Select", "SelectV2", "DatePicker", "DatePickerPanel", "TimePicker", "CollapseTransition", "ConfigProvider", "Form", "Icon", "Popper", "Tooltip", "Scrollbar"];
+export declare const vendoredComponents: readonly ["Affix", "Alert", "Anchor", "AnchorLink", "Button", "CheckTag", "Tag", "Menu", "MenuItem", "MenuItemGroup", "SubMenu", "Tabs", "TabPane", "Radio", "RadioButton", "RadioGroup", "Input", "InputNumber", "Option", "OptionGroup", "Pagination", "Select", "SelectV2", "DatePicker", "DatePickerPanel", "TimePicker", "CollapseTransition", "ConfigProvider", "Form", "Icon", "Popper", "Tooltip", "Scrollbar"];
 export type VendoredComponentName = (typeof vendoredComponents)[number];
 export declare const isVendored: (name: string) => boolean;

package/dist/vendored-components.js

@@ -19,6 +19,7 @@ const o = [
   "InputNumber",
   "Option",
   "OptionGroup",
+  "Pagination",
   "Select",
   "SelectV2",
   "DatePicker",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep-craft",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "A Vue 3 component library based on element-plus with ep- prefix",
   "type": "module",
   "main": "./dist/ep-craft.js",

package/theme-chalk/src/float-label.scss

@@ -8,12 +8,18 @@
  * 浮动标签(float-label)视觉
  * 说明:Material「浮动标签」惯例——input(含 textarea)/ select 在「聚焦或有值」时,
  * 占位文本上浮到控件上边框、缩小字号并着色;失焦且无值时回退原位。
- * Figma 节点 4760-8608 的精确色值 / 字号 / 位移 / 过渡取得成功后,在此精修下列参数。
+ * Figma 节点 4760-8608 的精确色值 / 位移 / 过渡取得成功后,在此精修下列参数(字号已定,见下)。
+ *
+ * 上浮态字号:恒为 $float-label-floating-font-size(12px),**不随尺寸档位变化**。
+ * 实现上用显式 font-size 而非 transform: scale()——scale 会把 14px 缩成 10.5px、
+ * 12px 缩成 9px,给不出「固定 12px」;且缩放后的文本由合成层光栅化,小字号下不如
+ * 原生 font-size 清晰。代价是上浮态字号不再等于「控件字号 × 固定比例」,small 档
+ * (控件字号本就是 12px)上浮前后字号相同、只剩位移与着色过渡。
  * -------------------------------------------------------------------------- */
 
 $float-label-transition-duration: 0.2s !default;
 $float-label-transition-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$float-label-scale: 0.75 !default;
+$float-label-floating-font-size: 12px !default;
 
 .#{$namespace}-float-label {
   position: absolute;
@@ -32,18 +38,18 @@ $float-label-scale: 0.75 !default;
   color: getCssVar('text-color', 'placeholder');
   pointer-events: none;
   user-select: none;
-  transform-origin: left center;
   transform: translateY(-50%);
   transition:
     top $float-label-transition-duration $float-label-transition-easing,
-    transform $float-label-transition-duration $float-label-transition-easing,
+    font-size $float-label-transition-duration $float-label-transition-easing,
     color $float-label-transition-duration $float-label-transition-easing,
     opacity $float-label-transition-duration $float-label-transition-easing;
 
   &.is-floating {
     top: 0;
     z-index: 2;
-    transform: translateY(-50%) scale($float-label-scale);
+    // 上浮态字号固定,与尺寸档位无关(见文件头说明)
+    font-size: $float-label-floating-font-size;
     color: #868a9c;
     // 以与控件一致的底色遮罩边框线,形成标准「缺口(notch)」浮标
     padding: 0 4px;
@@ -100,6 +106,11 @@ $float-label-scale: 0.75 !default;
     max-width: calc(
       100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)}
     );
+  }
+
+  // 字号只约束休息态:上浮态字号由 .is-floating 统一固定。若不加 :not(.is-floating),
+  // 本规则(0,2,0)会因源码顺序压过 .is-floating(0,2,0),使上浮态字号被档位绑架。
+  .#{$namespace}-float-label:not(.is-floating) {
     font-size: map.get($input-font-size, 'small');
   }
 }
@@ -107,10 +118,13 @@ $float-label-scale: 0.75 !default;
 // input 有 prefix(图标或自定义前缀)时,输入文本起点被右移,label 必须同步右移,否则会压在图标上。
 // 文本起点 = wrapper 水平内边距 + 图标宽 + 图标右间距:
 //   - wrapper 水平内边距:$input-padding-horizontal - $border-width(12-1 / 16-1 / 8-1)
-//   - 图标宽:1em(.el-icon { width: 1em; font-size: inherit }),随尺寸档位为 14px / 12px
+//   - 图标宽:1em(.el-icon { width: 1em; font-size: inherit })——继承控件根字号,故随尺寸
+//     档位为 14px / 14px / 12px,即 $input-font-size 的 default / large / small
 //   - 图标右间距:8px(.el-input__prefix-inner > :last-child { margin-right: 8px })
-// label 自身 font-size 与 .el-input 根一致(default/large 14px、small 12px),故 1em 自动跟随
-// 图标宽度与尺寸档位;三档尺寸仅需替换内边距基数。
+// 图标宽在此按档位取 $input-font-size 显式书写,**不可写作 label 自身的 1em**:浮标上浮后
+// 字号被固定为 $float-label-floating-font-size(12px),1em 随之变小,会让上浮态锚点左移
+// (default/large 档左移 2px,且与休息态不一致产生跳变)。休息态 label 字号与控件根本就一致,
+// 故显式值与原先的 1em 逐像素等价,三档尺寸仅需替换内边距基数。
 //
 // 作用域限定为「.el-input__wrapper 内的 label」,即 EpInput 自绘的浮标。date-picker 单值形态的
 // 浮标是经 EpInput 默认插槽注入到 .el-input 根的直接子节点(不在 wrapper 内),由下文
@@ -125,11 +139,12 @@ $float-label-scale: 0.75 !default;
   > .#{$namespace}-input__wrapper
   > .#{$namespace}-float-label {
   left: calc(
-    #{map.get($input-padding-horizontal, 'default') - $border-width} + 1em + 8px
+    #{map.get($input-padding-horizontal, 'default') - $border-width} +
+      #{map.get($input-font-size, 'default')} + 8px
   );
   max-width: calc(
-    100% - #{2 * (map.get($input-padding-horizontal, 'default') - $border-width)} - 1em -
-      8px
+    100% - #{2 * (map.get($input-padding-horizontal, 'default') - $border-width)} -
+      #{map.get($input-font-size, 'default')} - 8px
   );
 }
 
@@ -137,10 +152,12 @@ $float-label-scale: 0.75 !default;
   > .#{$namespace}-input__wrapper
   > .#{$namespace}-float-label {
   left: calc(
-    #{map.get($input-padding-horizontal, 'large') - $border-width} + 1em + 8px
+    #{map.get($input-padding-horizontal, 'large') - $border-width} +
+      #{map.get($input-font-size, 'large')} + 8px
   );
   max-width: calc(
-    100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)} - 1em - 8px
+    100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)} -
+      #{map.get($input-font-size, 'large')} - 8px
   );
 }
 
@@ -148,10 +165,12 @@ $float-label-scale: 0.75 !default;
   > .#{$namespace}-input__wrapper
   > .#{$namespace}-float-label {
   left: calc(
-    #{map.get($input-padding-horizontal, 'small') - $border-width} + 1em + 8px
+    #{map.get($input-padding-horizontal, 'small') - $border-width} +
+      #{map.get($input-font-size, 'small')} + 8px
   );
   max-width: calc(
-    100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)} - 1em - 8px
+    100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)} -
+      #{map.get($input-font-size, 'small')} - 8px
   );
 }
 
@@ -177,10 +196,11 @@ $float-label-scale: 0.75 !default;
 // 水平对齐:date-picker 单值形态恒有 prefix 日历/时钟图标,输入文本起点被右移,label 必须
 // 同步右移,否则会压在图标上。文本起点 = wrapper 水平内边距 + 图标宽 + 图标右间距:
 //   - wrapper 水平内边距:$input-padding-horizontal - $border-width(12-1 / 16-1 / 8-1)
-//   - 图标宽:1em(.el-icon { width: 1em; font-size: inherit }),随尺寸档位为 14px / 12px
+//   - 图标宽:1em(.el-icon { width: 1em; font-size: inherit })——继承控件根字号,故随尺寸
+//     档位为 14px / 14px / 12px,即 $input-font-size 的 default / large / small
 //   - 图标右间距:8px(.el-input__prefix-inner > :last-child { margin-right: 8px })
-// label 自身 font-size 与 .el-input 根一致(default/large 14px、small 12px),故 1em 自动跟随
-// 图标宽度与尺寸档位,一条 calc 覆盖三档尺寸;大/小尺寸仅需替换内边距基数。
+// 图标宽按档位取 $input-font-size 显式书写(理由同上文 input--prefix 段:上浮态 label 字号
+// 固定为 12px,用自身的 1em 会让锚点上浮时左移);三档尺寸仅需替换内边距基数。
 //
 // 注意:范围形态根节点同时带 .el-date-editor 与 .el-range-editor,也会命中本规则,
 // 依赖下方 .el-range-editor 规则(同为 0,3,0)按源码顺序覆盖——请勿把范围规则移到本规则之前。
@@ -189,11 +209,12 @@ $float-label-scale: 0.75 !default;
 
   > .#{$namespace}-float-label {
     left: calc(
-      #{map.get($input-padding-horizontal, 'default') - $border-width} + 1em + 8px
+      #{map.get($input-padding-horizontal, 'default') - $border-width} +
+        #{map.get($input-font-size, 'default')} + 8px
     );
     max-width: calc(
-      100% - #{2 * (map.get($input-padding-horizontal, 'default') - $border-width)} - 1em -
-        8px
+      100% - #{2 * (map.get($input-padding-horizontal, 'default') - $border-width)} -
+        #{map.get($input-font-size, 'default')} - 8px
     );
   }
 }
@@ -201,10 +222,12 @@ $float-label-scale: 0.75 !default;
 .#{$namespace}-input--large.#{$namespace}-date-editor.is-float-label {
   > .#{$namespace}-float-label {
     left: calc(
-      #{map.get($input-padding-horizontal, 'large') - $border-width} + 1em + 8px
+      #{map.get($input-padding-horizontal, 'large') - $border-width} +
+        #{map.get($input-font-size, 'large')} + 8px
     );
     max-width: calc(
-      100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)} - 1em - 8px
+      100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)} -
+        #{map.get($input-font-size, 'large')} - 8px
     );
   }
 }
@@ -212,10 +235,12 @@ $float-label-scale: 0.75 !default;
 .#{$namespace}-input--small.#{$namespace}-date-editor.is-float-label {
   > .#{$namespace}-float-label {
     left: calc(
-      #{map.get($input-padding-horizontal, 'small') - $border-width} + 1em + 8px
+      #{map.get($input-padding-horizontal, 'small') - $border-width} +
+        #{map.get($input-font-size, 'small')} + 8px
     );
     max-width: calc(
-      100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)} - 1em - 8px
+      100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)} -
+        #{map.get($input-font-size, 'small')} - 8px
     );
   }
 }
@@ -258,7 +283,7 @@ $float-label-scale: 0.75 !default;
 // 范围形态 small 仅字号/行高/高度变化(水平内边距恒 10px、图标恒 14px),label 字号对齐
 // .el-range-input
 .#{$namespace}-range-editor--small {
-  > .#{$namespace}-float-label {
+  > .#{$namespace}-float-label:not(.is-floating) {
     font-size: map.get($input-font-size, 'small');
   }
 }