diff --git a/.cursor/rules/Storybook-development-guidelines.mdc b/.cursor/rules/Storybook-development-guidelines.mdc
index 31a8593..7792e76 100644
--- a/.cursor/rules/Storybook-development-guidelines.mdc
+++ b/.cursor/rules/Storybook-development-guidelines.mdc
@@ -132,6 +132,42 @@ alwaysApply: false
};
```
+- **Args-to-Props Consistency**: All story args must be passed to the rendered component via props. Never hardcode props in templates when they should come from args:
+ - ✅ **Correct**: Use `v-bind="args"` to pass all args as props
+ ```typescript
+ template: `
+
+ `
+ ```
+ - ❌ **Incorrect**: Hardcoding props that should come from args
+ ```typescript
+ template: `
+
+ `
+ ```
+ - ✅ **Correct**: When overriding specific props, still use `v-bind="args"` first, then override:
+ ```typescript
+ template: `
+
+ `
+ ```
+ - **Story Args**: All component props should be controllable through story args. Define props in the story's `args` object rather than hardcoding them in templates:
+ ```typescript
+ args: {
+ label: "Custom Label",
+ placeholder: "Custom Placeholder",
+ options: ["Option 1", "Option 2"]
+ }
+ ```
+ - **Verification**: Ensure that when users modify controls in Storybook, those changes are reflected in the rendered component through the args binding.
+
### 4. ArgTypes & Controls Configuration
- **ArgTypes Definition**: Define comprehensive argTypes for all props:
@@ -413,6 +449,7 @@ Note: Avoid embedding code in this section; Storybook auto-generates usage code.
- **Story Creation**: Automatically create comprehensive stories for new components with proper structure, argTypes, and documentation.
- **Pattern Consistency**: Follow established patterns from existing stories in the project.
+- **Args-to-Props Matching**: Always ensure story args are passed to rendered components via `v-bind="args"`. Never hardcode props in templates that should come from story args. All component props must be controllable through Storybook controls.
- **TypeScript Integration**: Ensure proper TypeScript typing for all stories and meta configurations.
- **Theme Integration**: Leverage global theme controls and main decorator for consistent theming.
- **Documentation Quality**: Include comprehensive component documentation with usage examples.
diff --git a/src/elements/Button.vue b/src/elements/Button.vue
index 69a13d1..23fb176 100644
--- a/src/elements/Button.vue
+++ b/src/elements/Button.vue
@@ -24,7 +24,9 @@
computedFocusColor,
computedHoverNeutralizeClasses,
// Handle disabled styling when in InputGroup
- (isInInputGroup && context && context.disabled) ||
+ (isInInputGroup &&
+ context &&
+ (disabled !== undefined ? disabled : context.disabled)) ||
disabled ||
cardDisabled
? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -51,7 +53,11 @@
props.chip ? 'is-chip' : undefined,
],
]"
- :disabled="disabled || cardDisabled || isLoading ? true : undefined"
+ :disabled="
+ isInInputGroup && context
+ ? (disabled !== undefined ? disabled : context.disabled) || isLoading
+ : disabled || cardDisabled || isLoading
+ "
@focus="handleFocusEvent"
@blur="handleBlurEvent"
>
diff --git a/src/form/Input.vue b/src/form/Input.vue
index 524cc82..9550058 100644
--- a/src/form/Input.vue
+++ b/src/form/Input.vue
@@ -1,5 +1,5 @@
-
+
(), {
modelValue: "",
type: "text",
placeholder: "",
- disabled: false,
+ disabled: undefined,
required: false,
error: false,
errorMessage: "",
diff --git a/src/form/InputGroup.vue b/src/form/InputGroup.vue
index 4fc504f..693a1df 100644
--- a/src/form/InputGroup.vue
+++ b/src/form/InputGroup.vue
@@ -18,9 +18,9 @@
'data-input-group-total': children.length,
'data-input-group-remove-right-border': index < children.length - 1,
'data-input-group-index': index,
- // Pass error and disabled state to children for styling
+ // Pass error state to children for styling
error: props.error,
- disabled: props.disabled,
+ // Don't pass disabled directly - let children handle priority
}"
:class="getChildBorderClasses(index)"
@focus="handleChildFocus(index)"
diff --git a/src/form/Select.stories.ts b/src/form/Select.stories.ts
index 656d294..796a8ad 100644
--- a/src/form/Select.stories.ts
+++ b/src/form/Select.stories.ts
@@ -53,6 +53,18 @@ When \`custom={true}\`, the component provides three specialized slots:
- **Scoped Variables**:
- \`close\`: Function to close dropdown with acceptance parameter
+## Selected Slot
+
+The \`selected\` slot allows you to customize how selected options are displayed in the trigger button. This slot is available in both default and custom modes.
+
+- **Purpose**: Custom display of selected option(s) in the trigger button
+- **Scoped Variables**:
+ - \`selectedOption\`: The selected value (single mode only, undefined in multiple mode)
+ - \`selectedOptions\`: Array of selected values (always an array - contains single item in single mode, multiple items in multiple mode)
+ - \`multiple\`: Boolean indicating if multiple selection mode is enabled
+ - \`getOptionLabel\`: Helper function to get the display label for an option
+ - \`selectedCount\`: Number of selected items
+
## Accessibility
- Full keyboard navigation support (Enter, Space, Arrow keys, Escape)
@@ -800,9 +812,29 @@ export const SearchableObjects: Story = {
// Complex Grouped Example
export const ComplexGrouped: Story = {
- render: () => {
- const selectedValue = ref({ name: "Option 1" });
- const options = [
+ render: (args) => ({
+ components: { Select },
+ setup() {
+ const selectedValue = ref(args.modelValue || { name: "Option 1" });
+ return { args, selectedValue };
+ },
+ template: `
+