Update xiaoshi-pad-card.js

xiaoshi-pad-card.js

@@ -1,4 +1,4 @@
-console.info("%c 消逝卡-平板端 \n%c      v 1.0.1 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 1.0.3 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
 
 const loadCards = () => {
     import('./xiaoshi-pad-climate-card.js');

xiaoshi-pad-climate-card.js

@@ -933,32 +933,15 @@ class XiaoshiPadClimateCardEditor extends LitElement {
 
         <!-- 宽度设置 -->
         <div class="form-group">
-          <label>卡片宽度：支持像素(px)和百分比(%)，默认300px</label>
+          <label>卡片主体宽度</label>
           <input
             type="text"
             @change=${this._widthChanged}
             .value=${this.config.width !== undefined ? this.config.width : '300px'}
             name="width"
-            placeholder="默认300px"
           />
         </div>
 
-        <!-- 高度设置 -->
-        <div class="form-group">
-          <label>卡片高度：支持像素(px)，默认300px</label>
-          <input
-            type="text"
-            @change=${this._heightChanged}
-            .value=${this.config.height !== undefined ? this.config.height : '300px'}
-            name="height"
-            placeholder="默认300px"
-          />
-          <div class="help-text">
-            输入高度值，例如：300px
-          </div>
-        </div>
-
-
       </div>
     `;
   }
@@ -1315,7 +1298,6 @@ class XiaoshiPadClimateCard extends LitElement {
     return {
       hass: { type: Object },
       width: { type: String, attribute: true },
-      height: { type: String, attribute: true },
       config: { type: Object },
       buttons: { type: Array },
       theme: { type: String },
@@ -1344,7 +1326,6 @@ class XiaoshiPadClimateCard extends LitElement {
     this.buttons2 = config.buttons2 || [];
     this._externalTempSensor = config.temperature || null;
     if (config.width !== undefined) this.width = config.width;
-    if (config.height !== undefined) this.height = config.height;
     this.requestUpdate();
   }
 
@@ -1361,7 +1342,7 @@ class XiaoshiPadClimateCard extends LitElement {
         position: relative;
         background-color: var(--bg-color);
         border-radius: 15px;
-        width: 300px;
+        width: var(--card-width, 300px);
       }
 
       .side-button-wrapper {
@@ -1378,7 +1359,7 @@ class XiaoshiPadClimateCard extends LitElement {
 
       .thermostat-card {
         position: relative;
-        width: 300px;
+        width: var(--card-width, 300px);
         height: 265px;
         display: flex;
         flex-direction: column;
@@ -1386,7 +1367,7 @@ class XiaoshiPadClimateCard extends LitElement {
 
       .thermostat-container {
         flex: 1;
-        width: 300px;
+        width: var(--card-width, 300px);
         height: 265px;
         position: relative;
       }
@@ -1523,7 +1504,6 @@ class XiaoshiPadClimateCard extends LitElement {
     this.buttons2 = [];
     this.theme = 'on';
     this.width = '300px';
-    this.height = '300px';
     this._timerInterval = null;
     this.temperatureData = [];
     this.canvas = null;
@@ -1743,7 +1723,7 @@ class XiaoshiPadClimateCard extends LitElement {
           </div>
         ` : ''}
 
-        <div class="main-card" style="--bg-color: ${bgColor}; --fg-color: ${fgColor};">
+        <div class="main-card" style="--bg-color: ${bgColor}; --fg-color: ${fgColor}; --card-width: ${this.config.width || '300px'};">
           <div class="thermostat-card ${themeClass}" style="height: ${cardHeight}px; --card-height: ${cardHeight}px;">
             <div class="thermostat-container" id="thermostatContainer"></div>
 
@@ -2027,7 +2007,7 @@ _renderExtraButtons(buttonType = 1) {
                 return html`
                     <div class="side-extra-button" style="cursor: default; --bg-color: ${bgColor};">
                         <div class="side-value" style="color: ${displayValueColor}; font-size: 12px;">${displayValue}</div>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                     </div>
                 `;
 
@@ -2037,9 +2017,9 @@ _renderExtraButtons(buttonType = 1) {
                 return html`
                     <button class="side-extra-button"
                             @click=${() => this._handleExtraButtonClick(buttonEntityId, domain)}
-                            style="color: ${buttonColor}; --bg-color: ${bgColor};">
-                        <ha-icon class="side-icon" icon="${buttonIcon}" style="color: ${buttonColor}"></ha-icon>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                            style="color: ${fgColor}; --bg-color: ${bgColor};">
+                        <ha-icon class="side-icon" icon="${buttonIcon}" style="color: ${fgColor}"></ha-icon>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                     </button>
                 `;
 
@@ -2052,8 +2032,8 @@ _renderExtraButtons(buttonType = 1) {
                     <div class="side-extra-button"
                             @click=${() => this._handleExtraButtonClick(buttonEntityId, domain)}
                             style="cursor: default; --bg-color: ${bgColor};">
-                        <div class="side-value" style="color: ${buttonColor}; font-size: 12px;">${selectDisplayValue}</div>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                        <div class="side-value" style="color: ${fgColor}; font-size: 12px;">${selectDisplayValue}</div>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                     </div>
                 `;
 
@@ -2434,4 +2414,4 @@ _renderExtraButtons(buttonType = 1) {
   }
 }
 
-customElements.define('xiaoshi-pad-climate-card', XiaoshiPadClimateCard);
+customElements.define('xiaoshi-pad-climate-card', XiaoshiPadClimateCard);