-
-
-
+
+
-
-
-
+
+
+
+
+ {{ getOptionLabel(option) }}
+
+
+
+
{{ __('No options available.') }}
-
+
- {{ __(getOptionLabel(option)) }}
+ {{ __(getOptionLabel(option)) }}
-
-
-
-
-
-
@@ -547,18 +545,18 @@ defineExpose({
v-if="!disabled && !readOnly"
type="button"
class="opacity-75 hover:opacity-100 cursor-pointer"
- :aria-label="__('Deselect option')"
- @click="deselect(option.value)"
+ :aria-label="__('Remove :label', { label: getOptionLabel(option) })"
+ @click="deselect(getOptionValue(option))"
>
×
-
+
×
-
+
diff --git a/resources/js/components/ui/Combobox/Scrollbar.vue b/resources/js/components/ui/Combobox/Scrollbar.vue
deleted file mode 100644
index a568c91f69e..00000000000
--- a/resources/js/components/ui/Combobox/Scrollbar.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index e5c5b2c5875..78a1f0aeebe 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -5,6 +5,11 @@ import Combobox from '../Combobox/Combobox.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
+ /** When `true`, the dropdown will expand to fit longer option labels. */
+ adaptiveWidth: { type: Boolean, default: false },
+ /** The preferred alignment against the trigger. May change when collisions occur.
Options: `start`, `center`, `end` */
+ align: { type: String, default: 'start' },
+ /** When `true`, the selected value will be clearable. */
clearable: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
@@ -52,6 +57,8 @@ const usingOptionSlot = !!slots['option'];
:searchable="false"
:size
:variant
+ :align
+ :adaptive-width
@update:modelValue="emit('update:modelValue', $event)"
>
diff --git a/resources/js/stories/Combobox.stories.ts b/resources/js/stories/Combobox.stories.ts
new file mode 100644
index 00000000000..ea53ab5a6cd
--- /dev/null
+++ b/resources/js/stories/Combobox.stories.ts
@@ -0,0 +1,1012 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {expect, fn, userEvent, waitFor, within} from 'storybook/test';
+import {Combobox} from '@ui';
+import {ref} from 'vue';
+import {icons} from "@/stories/icons";
+
+const meta = {
+ title: 'Forms/Combobox',
+ component: Combobox,
+ argTypes: {
+ icon: {
+ control: 'select',
+ options: icons,
+ },
+ size: {
+ control: 'select',
+ options: ['xs', 'sm', 'base', 'lg', 'xl'],
+ },
+ variant: {
+ control: 'select',
+ options: ['default', 'filled', 'ghost', 'subtle'],
+ },
+ align: {
+ control: 'select',
+ options: ['start', 'center', 'end'],
+ },
+ 'update:modelValue': {
+ description: 'Event handler called when the selected option changes.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string | string[]) => void' },
+ },
+ },
+ search: {
+ description: 'Event handler called when the search query changes.',
+ table: {
+ category: 'events',
+ type: { summary: '(query: string) => void' },
+ },
+ },
+ selected: {
+ description: 'Event handler called when an option is selected.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string) => void' },
+ },
+ },
+ added: {
+ description: 'Event handler called when a taggable option is added.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string) => void' },
+ },
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => ({
+ components: { Combobox },
+ setup() {
+ const value = ref(null);
+ const options = [
+ { label: 'The Midnight', value: 'the_midnight' },
+ { label: 'The 1975', value: 'the_1975' },
+ { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+ { label: 'FM-84', value: 'fm_84' },
+ { label: 'Timecop1983', value: 'timecop1983' },
+ ];
+ return { value, options };
+ },
+ template: `
+ ${sizesCode}
`,
+ }),
+};
+
+const variantsCode = `
+${variantsCode}
`,
+ }),
+};
+
+const clearableCode = `
+
+
+
+
+
+
+`;
+
+export const _OptionSlots: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: optionSlotsCode },
+ },
+ },
+ render: () => ({
+ components: { Combobox },
+ setup() {
+ const value = ref('tyler');
+ const options = [
+ { label: 'Tyler Lyle', image: 'https://i.pravatar.cc/100?u=tyler', value: 'tyler' },
+ { label: 'Tim McEwan', image: 'https://i.pravatar.cc/100?u=tim', value: 'tim' },
+ { label: 'Nikki Flores', image: 'https://i.pravatar.cc/100?u=nikki', value: 'nikki' },
+ ];
+ return { value, options };
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+};
+
+const adaptiveWidthCode = `
+
+
+ `,
+ }),
+};
+
+export const TestTriggerWidth: Story = {
+ tags: ['!dev', 'test'],
+ render: () => ({
+ components: { Combobox },
+ setup() {
+ const value = ref(null);
+ return { value, options: defaultOptions };
+ },
+ template: `
`,
+ }),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const trigger = canvas.getByRole('combobox');
+
+ await userEvent.click(trigger);
+
+ const content = document.querySelector('[data-ui-combobox-content]');
+ await expect(content).toBeTruthy();
+ expect(content?.classList.contains('w-max')).toBe(true);
+ },
+};
+
+export const TestCanSelectOption: Story = {
+ tags: ['!dev', 'test'],
+ args: {
+ 'onUpdate:modelValue': fn(),
+ },
+ render: (args) => ({
+ components: { Combobox },
+ setup() {
+ const value = ref(null);
+ return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+ },
+ template: `([]);
+ return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'], onAdded: args.onAdded };
+ },
+ template: `([]);
+ return { value, options: defaultOptions };
+ },
+ template: `;
+const defaultOptions = [
+ { label: 'The Midnight', value: 'the_midnight' },
+ { label: 'The 1975', value: 'the_1975' },
+ { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+ { label: 'FM-84', value: 'fm_84' },
+ { label: 'Timecop1983', value: 'timecop1983' },
+];
+
const defaultCode = `
${sizesCode}
`,
}),
};
const variantsCode = `
-${variantsCode}
`,
}),
};
const clearableCode = `
-
+const optionSlotsCode = `
+
+
+
`;
-export const _CustomListItems: Story = {
+export const _OptionSlots: Story = {
tags: ['!dev'],
parameters: {
docs: {
- source: { code: customListItemsCode }
- }
+ source: { code: optionSlotsCode },
+ },
+ },
+ render: () => ({
+ components: { Select },
+ setup() {
+ const value = ref('tyler');
+ const options = [
+ { label: 'Tyler Lyle', image: 'https://i.pravatar.cc/100?u=tyler', value: 'tyler' },
+ { label: 'Tim McEwan', image: 'https://i.pravatar.cc/100?u=tim', value: 'tim' },
+ { label: 'Nikki Flores', image: 'https://i.pravatar.cc/100?u=nikki', value: 'nikki' },
+ ];
+ return { value, options };
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+};
+
+const adaptiveWidthCode = `
+
+
+ `,
}),
};
diff --git a/resources/js/stories/docs/Combobox.mdx b/resources/js/stories/docs/Combobox.mdx
new file mode 100644
index 00000000000..fba290cc178
--- /dev/null
+++ b/resources/js/stories/docs/Combobox.mdx
@@ -0,0 +1,58 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ComboboxStories from '../Combobox.stories';
+
+