Merge branch 'master' into star-lockscreen-adjust-position

src/components/asset/apng/index.ts

@@ -0,0 +1,8 @@
+export const loading_lm_1x = new URL('./loading-lm@1x.png', import.meta.url)
+  .href
+export const loading_lm_2x = new URL('./loading-lm@2x.png', import.meta.url)
+  .href
+export const loading_dm_1x = new URL('./loading-dm@1x.png', import.meta.url)
+  .href
+export const loading_dm_2x = new URL('./loading-dm@2x.png', import.meta.url)
+  .href

src/components/asset/index.ts

@@ -1 +1,2 @@
 export * from './svg-icon.js'
+export * from './apng/index.js'

src/components/asset/tsconfig.json

@@ -4,5 +4,5 @@
     "composite": true,
     "rootDir": "../../"
   },
-  "include": ["*.ts", "../base/*.ts", "icons/*.ts"]
+  "include": ["**/*.ts", "../base/*.ts", "icons/*.ts"]
 }

src/components/base/auto-px-style.ts

@@ -39,13 +39,17 @@ export const autoPxStyle: CSSResult = css`
     --auto-48px: calc(48px / var(--hostDevicePixelRatio));
     --auto-50px: calc(50px / var(--hostDevicePixelRatio));
     --auto-53px: calc(53px / var(--hostDevicePixelRatio));
+    --auto-54px: calc(54px / var(--hostDevicePixelRatio));
     --auto-56px: calc(56px / var(--hostDevicePixelRatio));
     --auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
     --auto-58px: calc(58px / var(--hostDevicePixelRatio));
     --auto-64px: calc(64px / var(--hostDevicePixelRatio));
     --auto-66px: calc(66px / var(--hostDevicePixelRatio));
+    --auto-71px: calc(71px / var(--hostDevicePixelRatio));
+    --auto-72px: calc(72px / var(--hostDevicePixelRatio));
     --auto-74px: calc(66px / var(--hostDevicePixelRatio));
     --auto-76px: calc(76px / var(--hostDevicePixelRatio));
+    --auto-77px: calc(77px / var(--hostDevicePixelRatio));
     --auto-80px: calc(80px / var(--hostDevicePixelRatio));
     --auto-82px: calc(80px / var(--hostDevicePixelRatio));
     --auto-70px: calc(70px / var(--hostDevicePixelRatio));
@@ -56,8 +60,10 @@ export const autoPxStyle: CSSResult = css`
     --auto-88px: calc(88px / var(--hostDevicePixelRatio));
     --auto-92px: calc(92px / var(--hostDevicePixelRatio));
     --auto-96px: calc(96px / var(--hostDevicePixelRatio));
+    --auto-108px: calc(108px / var(--hostDevicePixelRatio));
     --auto-112px: calc(112px / var(--hostDevicePixelRatio));
     --auto-116px: calc(116px / var(--hostDevicePixelRatio));
+    --auto-124px: calc(124px / var(--hostDevicePixelRatio));
     --auto-128px: calc(128px / var(--hostDevicePixelRatio));
     --auto-129px: calc(129px / var(--hostDevicePixelRatio));
     --auto-140px: calc(140px / var(--hostDevicePixelRatio));
@@ -66,6 +72,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-166px: calc(166px / var(--hostDevicePixelRatio));
     --auto-176px: calc(176px / var(--hostDevicePixelRatio));
     --auto-186px: calc(186px / var(--hostDevicePixelRatio));
+    --auto-183px: calc(183px / var(--hostDevicePixelRatio));
     --auto-200px: calc(200px / var(--hostDevicePixelRatio));
     --auto-201px: calc(201px / var(--hostDevicePixelRatio));
     --auto-206px: calc(206px / var(--hostDevicePixelRatio));
@@ -78,18 +85,23 @@ export const autoPxStyle: CSSResult = css`
     --auto-306px: calc(306px / var(--hostDevicePixelRatio));
     --auto-312px: calc(312px / var(--hostDevicePixelRatio));
     --auto-320px: calc(320px / var(--hostDevicePixelRatio));
+    --auto-328px: calc(328px / var(--hostDevicePixelRatio));
     --auto-334px: calc(334px / var(--hostDevicePixelRatio));
     --auto-340px: calc(340px / var(--hostDevicePixelRatio));
     --auto-368px: calc(368px / var(--hostDevicePixelRatio));
     --auto-370px: calc(370px / var(--hostDevicePixelRatio));
+    --auto-382px: calc(382px / var(--hostDevicePixelRatio));
     --auto-388px: calc(388px / var(--hostDevicePixelRatio));
     --auto-396px: calc(396px / var(--hostDevicePixelRatio));
     --auto-411px: calc(411px / var(--hostDevicePixelRatio));
     --auto-418px: calc(418px / var(--hostDevicePixelRatio));
+    --auto-424px: calc(424px / var(--hostDevicePixelRatio));
     --auto-436px: calc(436px / var(--hostDevicePixelRatio));
     --auto-440px: calc(440px / var(--hostDevicePixelRatio));
     --auto-448px: calc(448px / var(--hostDevicePixelRatio));
-    --auto-472px: calc(440px / var(--hostDevicePixelRatio));
+    --auto-464px: calc(464px / var(--hostDevicePixelRatio));
+    --auto-472px: calc(472px / var(--hostDevicePixelRatio));
+    --auto-484px: calc(484px / var(--hostDevicePixelRatio));
     --auto-500px: calc(500px / var(--hostDevicePixelRatio));
     --auto-514px: calc(514px / var(--hostDevicePixelRatio));
     --auto-520px: calc(520px / var(--hostDevicePixelRatio));
@@ -98,7 +110,13 @@ export const autoPxStyle: CSSResult = css`
     --auto-543px: calc(543px / var(--hostDevicePixelRatio));
     --auto-607px: calc(607px / var(--hostDevicePixelRatio));
     --auto-620px: calc(620px / var(--hostDevicePixelRatio));
+    --auto-640px: calc(640px / var(--hostDevicePixelRatio));
+    --auto-736px: calc(736px / var(--hostDevicePixelRatio));
     --auto-781px: calc(781px / var(--hostDevicePixelRatio));
     --auto-815px: calc(815px / var(--hostDevicePixelRatio));
+    --auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
+    --auto-1592px: calc(1592px / var(--hostDevicePixelRatio));
+    --auto-1760px: calc(1760px / var(--hostDevicePixelRatio));
+    --auto-1920px: calc(1920px / var(--hostDevicePixelRatio));
   }
 `

src/components/button/button.css.ts

@@ -307,7 +307,7 @@ export default [
     }
     :host([type='text']) button {
       /* min-width 保障内容最少情况下的显示 */
-      min-width: min-content;
+      min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
       padding-inline-start: var(--auto-56px);
       padding-inline-end: var(--auto-56px);
       overflow: hidden;

src/components/dialog/confirm-dialog.css.ts

@@ -11,6 +11,7 @@ export default css`
     line-height: var(--auto-36px);
     font-style: normal;
     font-weight: bold;
+    text-align: center;
     padding: var(--auto-10px) 0;
     max-height: var(--auto-200px);
     overflow: auto;

src/components/dialog/prompt-dialog.css.ts

@@ -16,7 +16,6 @@ export default css`
     background: #ffffff;
     border-radius: var(--auto-14px);
     border: var(--auto-2px) solid var(--theme-blue);
-    padding-inline-start: var(--auto-28px);
   }
 
   input {
@@ -33,6 +32,7 @@ export default css`
     caret-color: var(--theme-blue);
     font-weight: bold;
     font-size: var(--auto-26px);
+    margin-left: var(--auto-28px);
   }
 
   star-button#delete {
@@ -50,6 +50,7 @@ export default css`
     overflow: auto;
     font-weight: bold;
     font-size: var(--auto-28px);
+    text-align: center;
   }
   .star-prompt-subtitle {
     display: flex;

src/components/drop-down-menu/drop-down-menu.ts

@@ -27,6 +27,7 @@ export class DropDownMenu extends LitElement {
             id="edit"
             type=${IconControlBarType.BASE_WITHOUT_BORDER}
             icon="compose"
+            disabled="true"
           ></icon-control-bar>
           <icon-control-bar
             id="settings"

src/test/panels/apng/apng.ts

@@ -0,0 +1,36 @@
+import {html, customElement, LitElement} from '@star-web-components/base'
+import {
+  loading_lm_1x,
+  loading_lm_2x,
+  loading_dm_1x,
+  loading_dm_2x,
+} from '@star-web-components/asset'
+
+@customElement('panel-apng')
+export class PanelApng extends LitElement {
+  render() {
+    return html`
+      <h1>1X - 50KB</h1>
+      <div style="background: #fff">
+        <img src=${loading_lm_1x} />
+      </div>
+      <div style="background: #000">
+        <img src=${loading_dm_1x} />
+      </div>
+
+      <h1>2X - 125KB</h1>
+      <div style="background: #fff">
+        <img src=${loading_lm_2x} />
+      </div>
+      <div style="background: #000">
+        <img src=${loading_dm_2x} />
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-apng': PanelApng
+  }
+}

src/test/panels/fonts/star-icons.ts

@@ -8,7 +8,7 @@ export class PanelFontsStarIcons extends LitElement {
     '2g',
     '3g',
     '4g',
-    'IP_lm',
+    'ip',
     'accessibility',
     'achievement',
     'add-contact',
@@ -437,6 +437,7 @@ export class PanelFontsStarIcons extends LitElement {
 
   render() {
     return html`
+      <h1><center>基础</center></h1>
       <star-li type="base">
         ${map(
           this.icons,
@@ -449,37 +450,22 @@ export class PanelFontsStarIcons extends LitElement {
           `
         )}
       </star-li>
+      <h1><center>变色</center></h1>
+      <star-li type="base">
+        ${map(
+          this.icons,
+          (iconname, _) => html`
+            <star-button
+              type="icon"
+              icon=${iconname}
+              size="small"
+              style="color: red;"
+            ></star-button>
+          `
+        )}
+      </star-li>
     `
   }
-
-  styles = css`
-    a {
-      box-sizing: content-box;
-      display: inline-block;
-      color: #222;
-      width: 2rem;
-      height: 2rem;
-      text-decoration: none;
-      border: solid 1px #eee;
-      text-align: center;
-      margin: -1px;
-      background: #fff;
-      line-height: 1;
-    }
-
-    [data-icon]:before {
-      font-family: 'star-icons';
-      content: attr(data-icon);
-      display: inline-block;
-      font-weight: 400;
-      font-style: normal;
-      text-decoration: inherit;
-      text-transform: none;
-      text-rendering: optimizeLegibility;
-      font-size: 30px;
-      -webkit-font-smoothing: antialiased;
-    }
-  `
 }
 
 declare global {

src/test/panels/root.ts

@@ -7,6 +7,7 @@ import '../../components/ul/ul'
 import '../../components/li/li'
 
 import './about/about'
+import './apng/apng'
 import './activeoverlay/activeoverlay'
 import './battery/battery'
 import './battery-square/battery-square'
@@ -27,6 +28,7 @@ import './gauss_canvas/gauss-blur'
 import './general/general'
 import './gesture/gesture'
 import './icon/icon'
+import './iconfont/iconfont'
 import './indicators/deformation-indicator'
 import './indicators/home-indicator'
 import './indicators/point-indicator'
@@ -41,7 +43,6 @@ import './slider/slider'
 import './switch/switch'
 import './toast/toast'
 import './weather/weather'
-import './iconfont/iconfont'
 import './swiper/swiper'
 
 import './animation/animation'
@@ -432,6 +433,14 @@ export class PanelRoot extends LitElement {
         iconcolor="red"
         href="#fonts-star-icons"
       ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="apng动效图"
+        icon="play-circle"
+        iconcolor="red"
+        href="#apng"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.BASE}>