ep-craft 0.1.24 → 0.1.26

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

@@ -0,0 +1,207 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+/* ----------------------------------------------------------------------------
+ * 浮动标签(float-label)视觉
+ * 说明:Material「浮动标签」惯例——input(含 textarea)/ select 在「聚焦或有值」时,
+ * 占位文本上浮到控件上边框、缩小字号并着色;失焦且无值时回退原位。
+ * Figma 节点 4760-8608 的精确色值 / 字号 / 位移 / 过渡取得成功后,在此精修下列参数。
+ * -------------------------------------------------------------------------- */
+
+$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;
+
+.#{$namespace}-float-label {
+  position: absolute;
+  left: map.get($input-padding-horizontal, 'default') - $border-width;
+  top: 50%;
+  z-index: 1;
+  max-width: calc(
+    100% - #{2 *
+      (map.get($input-padding-horizontal, 'default') - $border-width)}
+  );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  font-size: map.get($input-font-size, '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,
+    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);
+    color: #868a9c;
+    // 以与控件一致的底色遮罩边框线,形成标准「缺口(notch)」浮标
+    padding: 0 4px;
+    margin-left: -4px;
+    background-color: getCssVar('fill-color', 'blank');
+  }
+}
+
+// input(非 textarea):label 位于 wrapper 内,需将 wrapper 设为定位上下文
+.#{$namespace}-input.is-float-label {
+  .#{$namespace}-input__wrapper {
+    position: relative;
+  }
+}
+
+// textarea:label 是容器直接子节点,休息态对齐首行(而非垂直居中)
+.#{$namespace}-textarea.is-float-label {
+  > .#{$namespace}-float-label {
+    top: 9px; // 顶部 padding 5px + 首行半高,随 Figma 精修
+
+    &.is-floating {
+      top: 0;
+    }
+  }
+}
+
+// select:label 沿用 .el-float-label,定位上下文为 .el-select__wrapper
+.#{$namespace}-select__wrapper.is-float-label {
+  > .#{$namespace}-float-label {
+    left: 12px; // $select-wrapper-padding(default) 水平值
+    max-width: calc(100% - 24px);
+  }
+}
+
+// 尺寸适配:input / textarea 的水平对齐与字号
+.#{$namespace}-input--large {
+  .#{$namespace}-float-label {
+    left: map.get($input-padding-horizontal, 'large') - $border-width;
+    max-width: calc(
+      100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)}
+    );
+  }
+}
+
+.#{$namespace}-input--small {
+  .#{$namespace}-float-label {
+    left: map.get($input-padding-horizontal, 'small') - $border-width;
+    max-width: calc(
+      100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)}
+    );
+    font-size: map.get($input-font-size, 'small');
+  }
+}
+
+// 尺寸适配:select 的水平对齐
+.#{$namespace}-select--large {
+  .#{$namespace}-float-label {
+    left: 16px; // $select-wrapper-padding(large) 水平值
+    max-width: calc(100% - 32px);
+  }
+}
+
+.#{$namespace}-select--small {
+  .#{$namespace}-float-label {
+    left: 8px; // $select-wrapper-padding(small) 水平值
+    max-width: calc(100% - 16px);
+  }
+}
+
+// date-picker 单值形态:label 是 .el-input 根(.el-date-editor)的直接子节点(经 EpInput 根末尾
+// <slot/> 注入),与 .el-input__wrapper 并列;.el-input 与 .el-date-editor 本就 position:relative,
+// 此处显式声明作文档化与防回归。
+//
+// 水平对齐: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
+//   - 图标右间距:8px(.el-input__prefix-inner > :last-child { margin-right: 8px })
+// label 自身 font-size 与 .el-input 根一致(default/large 14px、small 12px),故 1em 自动跟随
+// 图标宽度与尺寸档位,一条 calc 覆盖三档尺寸;大/小尺寸仅需替换内边距基数。
+//
+// 注意:范围形态根节点同时带 .el-date-editor 与 .el-range-editor,也会命中本规则,
+// 依赖下方 .el-range-editor 规则(同为 0,3,0)按源码顺序覆盖——请勿把范围规则移到本规则之前。
+.#{$namespace}-date-editor.is-float-label {
+  position: relative;
+
+  > .#{$namespace}-float-label {
+    left: calc(
+      #{map.get($input-padding-horizontal, 'default') - $border-width} + 1em + 8px
+    );
+    max-width: calc(
+      100% - #{2 * (map.get($input-padding-horizontal, 'default') - $border-width)} - 1em -
+        8px
+    );
+  }
+}
+
+.#{$namespace}-input--large.#{$namespace}-date-editor.is-float-label {
+  > .#{$namespace}-float-label {
+    left: calc(
+      #{map.get($input-padding-horizontal, 'large') - $border-width} + 1em + 8px
+    );
+    max-width: calc(
+      100% - #{2 * (map.get($input-padding-horizontal, 'large') - $border-width)} - 1em - 8px
+    );
+  }
+}
+
+.#{$namespace}-input--small.#{$namespace}-date-editor.is-float-label {
+  > .#{$namespace}-float-label {
+    left: calc(
+      #{map.get($input-padding-horizontal, 'small') - $border-width} + 1em + 8px
+    );
+    max-width: calc(
+      100% - #{2 * (map.get($input-padding-horizontal, 'small') - $border-width)} - 1em - 8px
+    );
+  }
+}
+
+// date-picker 范围形态:单一整体 label 是 .el-range-editor(.el-date-editor.el-input__wrapper)
+// 的直接子节点,位于 prefix icon 之后、两个原生 input 之前;.el-input__wrapper 自身无定位,
+// 在此显式建立定位上下文。
+//
+// 水平对齐:同单值形态,label 须避开 prefix 日历图标,否则会压在图标上。文本起点 = 内边距 +
+// 图标宽 + 图标右间距:
+//   - .el-range-editor.el-input__wrapper 水平内边距 0 10px(见 date-picker/picker.scss)
+//   - .el-range__icon 固定 font-size:14px(不随尺寸档位变化),width:1em => 14px;
+//     根节点无 .el-input 祖先,故 .el-input .el-input__icon { margin-left: 8px } 不生效,
+//     图标无左右间距
+//   - 右间距 8px:与单值形态的 .el-input__prefix-inner > :last-child { margin-right: 8px }
+//     取齐,保证两种形态的图标-文案间距一致(范围图标自身无 margin,需在此显式补足)
+// 内边距、图标宽与间距均不随尺寸档位变化,故 left/max-width 尺寸无关(仅 small 字号需适配,见下)。
+// 另注:范围形态根节点带 .el-date-editor 但不带 .el-input/.el-input--*,故不会被上文
+// .el-input--large/.el-input--small 规则命中;本规则(0,3,0)按源码顺序覆盖上文
+// .el-date-editor.is-float-label 规则(同为 0,3,0)。
+//
+// 休息态隐藏:范围形态的占位由两个原生 input 各自的 start/end placeholder 承担(见
+// picker-range-trigger.vue),整体浮标只负责「上浮后的统称」。若休息态仍显示,会与开始
+// 占位符重叠。故用 opacity 而非 display 隐藏——保留元素参与布局,使上浮过渡(位置/透明度)
+// 能连续播放,不产生跳变;`visibility` 会因继承与延迟问题更易出错,不采用。
+.#{$namespace}-range-editor.is-float-label {
+  position: relative;
+
+  > .#{$namespace}-float-label {
+    left: 10px + 14px + 8px; // 内边距 10px + 日历图标 14px + 间距 8px
+    max-width: calc(100% - 10px - 14px - 8px - 10px); // 右侧仍留 10px 内边距
+    opacity: 0;
+
+    &.is-floating {
+      opacity: 1;
+    }
+  }
+}
+
+// 范围形态 small 仅字号/行高/高度变化(水平内边距恒 10px、图标恒 14px),label 字号对齐
+// .el-range-input
+.#{$namespace}-range-editor--small {
+  > .#{$namespace}-float-label {
+    font-size: map.get($input-font-size, 'small');
+  }
+}

package/theme-chalk/src/index.scss

@@ -40,6 +40,7 @@
 @use './dropdown-menu.scss';
 @use './dropdown.scss';
 @use './empty.scss';
+@use './float-label.scss';
 @use './footer.scss';
 @use './form-item.scss';
 @use './form.scss';