bugfix

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## 1.0.0 (2024-12-30)
+
+1. *Tooltip*
+  - 新增：`align` 属性新增 `left` 和 `right` 对齐方式。
+
 ## 0.8.0 (2024-12-25)
 
 > 这是一个正式版之前的前瞻版本，对很多组件的 api 进行了调整使得它们容易和前端框架搭配使用。

README.md

@@ -1,8 +1,8 @@
 # Sober
 
 [![npm version](https://badge.fury.io/js/sober.svg)](https://badge.fury.io/js/sober)
-![Static Badge](https://img.shields.io/badge/complete%20build-109kb-blue)
-![Static Badge](https://img.shields.io/badge/gzip-25kb-wheat)
+![Static Badge](https://img.shields.io/badge/complete%20build-110kb-blue)
+![Static Badge](https://img.shields.io/badge/gzip-23kb-wheat)
 
 Sober 是参考 Google Material You 设计规范的 Web Component UI 组件库。   
 

docs/zh-cn/BottomSheet.md

@@ -5,7 +5,9 @@
 ```html preview
 <s-bottom-sheet>
   <s-button slot="trigger"> Bottom Sheet </s-button>
-  问人生、头白京国，算来何事消得。不如罨画清溪上，蓑笠扁舟一只。人不识，且笑煮、鲈鱼趁著莼丝碧。无端酸鼻，向岐路消魂，征轮驿骑，断雁西风急。 英雄辈，事业东西南北。临风因甚泣。酬知有愿频挥手，零雨凄其此日。休太息，须信道、诸公衮衮皆虚掷。年来踪迹。有多少雄心，几翻恶梦，泪点霜华织。
+  <div slot="text">
+    问人生、头白京国，算来何事消得。不如罨画清溪上，蓑笠扁舟一只。人不识，且笑煮、鲈鱼趁著莼丝碧。无端酸鼻，向岐路消魂，征轮驿骑，断雁西风急。 英雄辈，事业东西南北。临风因甚泣。酬知有愿频挥手，零雨凄其此日。休太息，须信道、诸公衮衮皆虚掷。年来踪迹。有多少雄心，几翻恶梦，泪点霜华织。
+  </div>
 </s-bottom-sheet>
 ```
 

docs/zh-cn/Page.md

@@ -24,7 +24,7 @@
   document.head.appendChild(themeColor)
   //onChange
   function themeChange() {
-    themeColor.content = getComputedStyle(page).getPropertyValue(`--s-color${page.isDark?'-dark':''}-surface-container-high`)
+    themeColor.content = getComputedStyle(page).getPropertyValue(`--s-color${page.isDark?'-dark':''}-surface-container`)
   }
 </script>
 ```

docs/zh-cn/Popup.md

@@ -31,9 +31,9 @@
 
 ## 属性
 
-| 名称   | 类型                 | 默认值 | 同步 | 介绍    |
-| ------ | ------------------- | ------ | --- | ------- |
-| align  | center, left, right | center | 是  | 位置     |
+| 名称   | 类型                      | 默认值 | 同步 | 介绍    |
+| ------ | ------------------------ | ------ | --- | ------- |
+| align  | bottom, top, left, right | bottom | 否  | 位置    |
 
 ---
 
@@ -69,7 +69,7 @@ class Popup extends HTMLElement {
   //关闭弹出框
   readonly close(): void
   //位置
-  align: string = 'center'
+  align: 'top' | 'bottom' | 'left' | 'right' = 'bottom'
 } 
 ```
 

docs/zh-cn/Tooltip.md

@@ -20,9 +20,9 @@
 
 ## 属性
 
-| 名称  | 类型               | 默认值 | 同步 | 介绍 |
-| ----- | ----------------- | ------ | --- | ---- |
-| align | auto, bottom, top | auto   | 否  | 位置 |
+| 名称  | 类型                      | 默认值 | 同步 | 介绍 |
+| ----- | ------------------------ | ------ | --- | ---- |
+| align | top, bottom, left, right | top    | 否  | 位置 |
 
 ---
 
@@ -35,7 +35,7 @@ class Tooltip extends HTMLElement {
   //隐藏提示框
   readonly close(): void
   //位置
-  align: 'auto' | 'bottom' | 'top' = 'auto'
+  align: 'top' | 'bottom' | 'left' | 'right' = 'top'
 } 
 ```
 

src/appbar.ts

@@ -4,6 +4,7 @@ import { Theme } from './page.js'
 
 const name = 's-appbar'
 const props = {
+
 }
 
 const style = /*css*/`
@@ -14,11 +15,12 @@ const style = /*css*/`
   position: relative;
   padding: 0 8px;
   flex-shrink: 0;
-  background: var(--s-color-surface-container-high, ${Theme.colorSurfaceContainerHigh});
+  background: var(--s-color-surface-container, ${Theme.colorSurfaceContainer});
 }
 ::slotted([slot=navigation]){
   margin-left: 4px;
   flex-shrink: 0;
+
 }
 ::slotted([slot=logo]){
   margin-left: 12px;

src/menu.ts

@@ -14,7 +14,6 @@ const style = /*css*/`
   font-size: .875rem;
   padding: 4px 0;
   flex-shrink: 0;
-  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 :host(:nth-of-type(n+2)){
   border-top: solid 1px var(--s-color-surface-variant, ${Theme.colorSurfaceVariant});
@@ -55,6 +54,7 @@ const itemStyle = /*css*/`
   flex-direction: column;
   flex-shrink: 0;
   margin: 4px 8px 4px 0;
+  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 .container{
   display: flex;
@@ -71,8 +71,8 @@ const itemStyle = /*css*/`
 .text{
   flex-grow: 1;
   white-space: nowrap;
-  display: flex;
-  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .toggle-icon{
   width: 24px;

src/navigation.ts

@@ -17,7 +17,6 @@ const style = /*css*/`
   overflow: hidden;
   background: var(--s-color-surface, ${Theme.colorSurface});
   box-shadow: var(--s-elevation-level2, ${Theme.elevationLevel2});
-  color: var(--s-color-on-surface-variant, ${Theme.colorOnSurfaceVariant});
   position: relative;
   flex-shrink: 0;
   padding-bottom: env(safe-area-inset-bottom);
@@ -98,6 +97,7 @@ const itemStyle = /*css*/`
   max-width: 80px;
   text-transform: capitalize;
   transition: color .1s ease-out;
+  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 :host([selected=true]){
   color: var(--s-color-primary, ${Theme.colorPrimary});
@@ -142,7 +142,9 @@ const itemStyle = /*css*/`
 }
 ::slotted([slot=icon]){
   position: relative;
-  color: inherit;
+}
+:host([selected=true]) ::slotted([slot=icon]){
+  color: currentColor;
 }
 ::slotted([slot=text]){
   position: relative;

src/picker.ts

@@ -165,17 +165,17 @@ const itemStyle = /*css*/`
   border-radius: 4px;
   flex-shrink: 0;
   padding: 0 12px;
+  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 :host([selected=true]){
   background: var(--s-color-secondary-container, ${Theme.colorSecondaryContainer});
   color: var(--s-color-on-secondary-container, ${Theme.colorOnSecondaryContainer});
 }
 .text{
   flex-grow: 1;
-  display: flex;
-  align-items: center;
-  height: 100%;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 ::slotted(svg){
   fill: var(--s-color-on-surface-variant, ${Theme.colorOnSurfaceVariant});

src/popup-menu.ts

@@ -14,7 +14,6 @@ const style = /*css*/`
   display: inline-block;
   vertical-align: middle;
   font-size: .875rem;
-  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 .popup{
   display: block;
@@ -60,6 +59,7 @@ export class PopupMenu extends useElement({
     })
     this.addEventListener(`${name}:click`, (event) => {
       event.stopPropagation()
+      popup.close()
     })
     return {
       mounted: () => {
@@ -88,12 +88,13 @@ const itemStyle = /*css*/`
   cursor: pointer;
   position: relative;
   border-radius: 4px;
+  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
 }
 .text{
   flex-grow: 1;
   white-space: nowrap;
-  display: flex;
-  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 ::slotted(svg){
   fill: var(--s-color-on-surface-variant, ${Theme.colorOnSurfaceVariant});

src/popup.ts

@@ -3,13 +3,14 @@ import { Theme } from './page.js'
 
 const name = 's-popup'
 const props = {
-  align: 'center' as 'center' | 'left' | 'right'
+  align: 'bottom' as 'top' | 'bottom' | 'left' | 'right'
 }
 
 const style = /*css*/`
 :host{
   display: inline-block;
   vertical-align: middle;
+  text-align: left;
 }
 dialog{
   top: 0;
@@ -81,47 +82,55 @@ class Popup extends useElement({
         const el = option ?? this
         if (!el) return
         const rect = el.getBoundingClientRect()
-        position.origin = ['center', 'top']
-        position.top = rect.top + rect.height
-        position.left = rect.left - ((cWidth - rect.width) / 2)
-        if (this.align === 'center') {
-          if (position.left < 0) {
-            position.left = rect.left, 0
-            position.origin[0] = 'left'
-          }
-          if (position.left + cWidth > innerWidth) {
-            position.left = rect.left + rect.width - cWidth, 0
-            position.origin[0] = 'right'
-          }
-          if (position.top + rect.height + cHeight > innerHeight) {
-            position.top = rect.top - cHeight
-            position.origin[1] = 'bottom'
-          }
-        }
         const calls = {
+          middle(align: 'top' | 'bottom') {
+            position.origin[0] = 'center'
+            position.left = rect.left - ((cWidth - rect.width) / 2)
+            const bottom = () => {
+              position.top = rect.top + rect.height
+              position.origin[1] = 'top'
+              return position.top + cHeight > innerHeight
+            }
+            const top = () => {
+              position.top = rect.top - cHeight
+              position.origin[1] = 'bottom'
+              return position.top < 0
+            }
+            if (position.left < 0) {
+              position.left = rect.left
+              position.origin[0] = 'left'
+            }
+            if (position.left + cWidth > innerWidth) {
+              position.left = rect.left + rect.width - cWidth
+              position.origin[0] = 'right'
+            }
+            if (align === 'top') top() && bottom()
+            if (align === 'bottom') bottom() && top()
+          },
           left() {
-            position.top = rect.top
+            position.origin = ['right', 'top']
             position.left = rect.left - cWidth
-            position.origin[0] = 'right'
+            position.top = rect.top
+            return position.left < 0
           },
           right() {
-            position.top = rect.top
+            position.origin = ['left', 'top']
             position.left = rect.left + rect.width
-            position.origin[0] = 'left'
-          },
-          bottom() {
-            position.top = rect.top - cHeight + rect.height
-            position.origin[1] = 'bottom'
+            position.top = rect.top
+            return position.left + cWidth > innerWidth
           }
         }
-        if (this.align === 'left') {
-          calls.left()
-          if (position.top + cHeight > innerHeight) calls.bottom()
-        }
-        if (this.align === 'right') {
-          calls.right()
-          if (position.left + cWidth > innerWidth) calls.left()
-          if (position.top + cHeight > innerHeight) calls.bottom()
+        switch (this.align) {
+          case 'bottom':
+          case 'top':
+            calls.middle(this.align)
+            break
+          case 'left':
+            calls.left() && calls.right()
+            break
+          case 'right':
+            calls.right() && calls.left()
+            break
         }
       } else {
         position.top = option.y

src/segmented-button.ts

@@ -60,7 +60,6 @@ const itemStyle = /*css*/`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
   height: 100%;
   min-width: 48px;
   padding: 0 16px;
@@ -70,6 +69,7 @@ const itemStyle = /*css*/`
   position: relative;
   cursor: pointer;
   box-sizing: border-box;
+  color: var(--s-color-on-surface, ${Theme.colorOnSurface});
   border-left: solid 1px var(--s-color-outline, ${Theme.colorOutline});
 }
 :host(:first-child){