command_deck 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 990b9baead655bf1d768061f4df0d19491dd85b4834e9f6989b7a6a81a866ca1
-  data.tar.gz: 5864197d0b142338c5183f0a2fbd8ba4a0952fe20d011fbd88c9922305a561ce
+  metadata.gz: ebceefafcd11660d8efdd358ad30b1d779b236d1cd135286b9fdb79871dd11bf
+  data.tar.gz: 9d4bffc3981b9959dfd491d4d17a5f1e8e89465f54c461d20ffa63eb9b62328a
 SHA512:
-  metadata.gz: 1c7c1d4813248bb98accc8a5068c981e03ea5230ba7bb34de805edff11e860978c93d7e8d8885f0bce954b4b03db0409e92e1fe90b79e73c9e5ec98e770056c4
-  data.tar.gz: 0bb4c80779c05f94eefbc66e6f9182e64004f2c991b137b270c7d0a97f55d2a6ea80faf29ce0029f857881965187ec92ef1ad7be1818d6b2b5746533b07c07ce
+  metadata.gz: 9ea6c387e844f38d2cbdf0772b53979df7c93be42b8626f7be1120e61e9a052ae42fa0bb53bab411af1572723ce6824743137f16e1bf20ce040951c06ec7eda2
+  data.tar.gz: 11969e5bff8030f91e81cd4a6ddf466fea747d35843da09661377e17f835d847b3dc9c185be941da7ca63597f88877965e6748c4b38214ec71dadfa8588dccf8

data/CHANGELOG.md

@@ -1,5 +1,24 @@
 # CHANGELOG
 
+## [0.3.2] - 2025-10-15
+
+### Added
+
+- **Auto-populate feature**: New `auto_populate: true` option for params that automatically fills text/number inputs with values from selector meta data
+- **Dark mode support**: Panel selector now properly respects dark theme settings
+- **Form accessibility improvements**: All form inputs now have proper `id`, `name`, `for`, and `autocomplete` attributes for better accessibility and browser compatibility
+
+### Fixed
+
+- **Dropdown text overflow**: Long labels in selectors are now properly truncated (50 chars for action params, 35 chars for panel selector) with full text shown on hover
+- **Select2 conflict prevention**: Added `data-select-type="default"` to prevent third-party select enhancement libraries from interfering with Command Deck selectors
+- **CSS cascade issues**: Fixed dark mode styles not applying due to CSS specificity problems
+
+### Changed
+
+- **DRY code improvements**: Extracted label truncation logic into shared `truncateLabel()` utility function in `core/dom.js`
+- Better hint display: "Current:" hints now only show for boolean values (ON/OFF badges), while string values are populated directly in inputs
+
 ## [0.3.1] - 2025-10-10
 
 ### Fixed

data/README.md

@@ -70,6 +70,26 @@ module CommandDeck::Panels
             { chosen: p[:color] }
           end
         end
+
+        action 'Update Setting', key: 'utils.update_setting' do
+          # Selector with current values in meta
+          param :setting_name, :selector,
+            collection: -> {
+              # Example: fetch settings with current values
+              [
+                { label: 'Max Users (100)', value: 'max_users', meta: { value: 100 } },
+                { label: 'Timeout (30)', value: 'timeout', meta: { value: 30 } }
+              ]
+            }
+
+          # Auto-populate this input with the value from meta
+          param :new_value, :string, required: true, auto_populate: true
+
+          perform do |p, _ctx|
+            # Update the setting with new value
+            { ok: true, setting: p[:setting_name], new_value: p[:new_value] }
+          end
+        end
       end
     end
   end
@@ -134,6 +154,7 @@ Common param options:
 
 - `label:` String – UI label. Defaults to a humanized `name`.
 - `required:` true/false – disables Run button until filled. Default: false.
+- `auto_populate:` true/false – for text/number inputs, automatically populate with value from previous selector's `meta: { value: ... }`. Default: false.
 
 Selector-specific options:
 

data/app/controllers/command_deck/panels_controller.rb

@@ -65,7 +65,8 @@ module CommandDeck
         name: param[:name],
         type: param[:type].to_s,
         label: param[:label] || param[:name].to_s.tr("_", " ").capitalize,
-        required: param.key?(:required) ? param[:required] : false
+        required: param.key?(:required) ? param[:required] : false,
+        auto_populate: param.key?(:auto_populate) ? param[:auto_populate] : false
       }
     end
 

data/lib/command_deck/assets/css/main.css

@@ -56,8 +56,7 @@
 #command-deck-panel.cd-theme-dark .cd-menu-item,
 #command-deck-panel.cd-theme-dark .cd-form input[type="text"],
 #command-deck-panel.cd-theme-dark .cd-form input[type="number"],
-#command-deck-panel.cd-theme-dark .cd-form select,
-#command-deck-panel.cd-theme-dark #cd-panel-selector select {
+#command-deck-panel.cd-theme-dark .cd-form select {
   background: #111; /* near-black */
   color: #eee;
   border-color: #333;
@@ -144,6 +143,22 @@
   border: 1px solid #ddd;
   border-radius: 6px;
   background: #fff;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#cd-panel-selector select option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#command-deck-panel.cd-theme-dark #cd-panel-selector select {
+  background: #111;
+  color: #eee;
+  border-color: #333;
 }
 
 #cd-settings-panel {
@@ -247,6 +262,20 @@
   border-radius: 6px;
 }
 
+.cd-form select {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cd-form select option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
 .cd-actions-row {
   display: flex;
   justify-content: flex-end;

data/lib/command_deck/assets/js/core/dom.js

@@ -33,3 +33,8 @@ export function el(tag, attrs, children) {
 export function jsonPretty(obj) {
   try { return JSON.stringify(obj, null, 2); } catch(_) { return String(obj); }
 }
+
+export function truncateLabel(text, maxLength = 50) {
+  const str = String(text);
+  return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+}

data/lib/command_deck/assets/js/ui/overlay/action_form.js

@@ -1,4 +1,4 @@
-import { el } from '../../core/dom.js';
+import { el, truncateLabel } from '../../core/dom.js';
 import { store } from '../../core/store.js';
 
 export class ActionForm {
@@ -22,26 +22,30 @@ export class ActionForm {
     const inputs = {};
     const paramsMeta = {};
 
-    (this.action.params || []).forEach(p => {
+    (this.action.params || []).forEach((p, paramIndex) => {
+      const inputId = `cd-input-${this.action.key}-${p.name}-${paramIndex}`;
       const labelChildren = [p.label || p.name];
       if (p.required === true) {
         labelChildren.push(el('span', { class: 'cd-required', title: 'Required' }, ['*']));
       }
-      const label = el('label', null, labelChildren);
+      const label = el('label', { for: inputId }, labelChildren);
       let input;
       if (p.type === 'boolean') {
-        input = el('input', { type: 'checkbox' });
+        input = el('input', { type: 'checkbox', id: inputId, name: p.name, autocomplete: 'off' });
       } else if (p.type === 'integer') {
-        input = el('input', { type: 'number', step: '1' });
+        input = el('input', { type: 'number', step: '1', id: inputId, name: p.name, autocomplete: 'off' });
       } else if (p.type === 'selector' || (p.choices && p.choices.length)) {
-        input = el('select');
+        input = el('select', { 'data-select-type': 'default', id: inputId, name: p.name, autocomplete: 'off' });
         if (p.include_blank) {
           input.appendChild(el('option', { value: '' }, ['']));
         }
         (p.choices || []).forEach(ch => {
           const attrs = { 'data-val': JSON.stringify(ch.value) };
           if (ch.meta != null) attrs['data-meta'] = JSON.stringify(ch.meta);
-          const opt = el('option', attrs, [ch.label != null ? String(ch.label) : String(ch.value)]);
+          const fullLabel = ch.label != null ? String(ch.label) : String(ch.value);
+          const displayLabel = truncateLabel(fullLabel, 50);
+          attrs['title'] = fullLabel;
+          const opt = el('option', attrs, [displayLabel]);
           input.appendChild(opt);
         });
 
@@ -65,7 +69,7 @@ export class ActionForm {
           }
         }
       } else {
-        input = el('input', { type: 'text' });
+        input = el('input', { type: 'text', id: inputId, name: p.name, autocomplete: 'off' });
       }
       if (p.required === true && input) {
         input.setAttribute('aria-required', 'true');
@@ -94,15 +98,43 @@ export class ActionForm {
             }
           } catch(_) { hint.textContent = ''; }
         };
+        
+        const populateRelatedInput = () => {
+          const sel = input.options[input.selectedIndex];
+          if (!sel) return;
+          const metaRaw = sel.getAttribute('data-meta');
+          if (!metaRaw) return;
+          try {
+            const meta = JSON.parse(metaRaw);
+            if (meta.value != null && typeof meta.enabled !== 'boolean') {
+              // Find the next string/number input after this selector
+              const currentParamIndex = (this.action.params || []).findIndex(param => param.name === p.name);
+              if (currentParamIndex >= 0 && currentParamIndex < (this.action.params || []).length - 1) {
+                const nextParam = this.action.params[currentParamIndex + 1];
+                // Only auto-populate if the next param has auto_populate explicitly enabled (defaults to false)
+                const shouldAutoPopulate = nextParam.auto_populate === true;
+                const nextInput = inputs[nextParam.name];
+                if (shouldAutoPopulate && nextInput && (nextInput.type === 'text' || nextInput.type === 'number')) {
+                  nextInput.value = String(meta.value);
+                }
+              }
+            }
+          } catch(_) { }
+        };
+        
         input.addEventListener('change', () => {
           const sel = input.options[input.selectedIndex];
           const raw = sel ? sel.getAttribute('data-val') : '';
           const selKey = `sel:${this.getCurrentPanelKey() || ''}:${this.action.key}:${p.name}`;
           store.set(selKey, raw || '');
           updateHint();
+          populateRelatedInput();
           validate();
         });
-        setTimeout(updateHint, 0);
+        setTimeout(() => {
+          updateHint();
+          populateRelatedInput();
+        }, 0);
         form.appendChild(hint);
       }
 

data/lib/command_deck/assets/js/ui/panel_selector.js

@@ -1,10 +1,15 @@
-import { el } from '../core/dom.js';
+import { el, truncateLabel } from '../core/dom.js';
 
 export class PanelSelector {
   constructor(onSelect) {
     this.onSelect = onSelect;
     this.root = el('div', { id: 'cd-panel-selector' });
-    this.select = el('select');
+    this.select = el('select', { 
+      'data-select-type': 'default',
+      id: 'cd-panel-select',
+      name: 'panel',
+      autocomplete: 'off'
+    });
     this.root.appendChild(this.select);
 
     this.select.addEventListener('change', () => {
@@ -19,8 +24,10 @@ export class PanelSelector {
     // panels: [{ key, title, owner, group }]
     this.select.textContent = '';
     (panels || []).forEach(p => {
-      const label = [p.group, p.title].filter(Boolean).join(' • ');
-      const opt = el('option', { value: p.key }, [label || p.title || p.key]);
+      const fullLabel = [p.group, p.title].filter(Boolean).join(' • ');
+      const label = fullLabel || p.title || p.key;
+      const displayLabel = truncateLabel(label, 35);
+      const opt = el('option', { value: p.key, title: label }, [displayLabel]);
       this.select.appendChild(opt);
     });
   }

data/lib/command_deck/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CommandDeck
-  VERSION = "0.3.1"
+  VERSION = "0.3.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: command_deck
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - crowrojas
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-10-10 00:00:00.000000000 Z
+date: 2025-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack