sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

OrderBy Toolbar mobile, ScrollPos Update, Schema Update

Browse Source
This commit is contained in:
Nino
2025-03-13 18:15:36 +01:00
parent 1a4d0a38da
commit 91668e53fa
8 changed files with 104 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/isa-app/stories/ui/search-bar/search-bar.stories.ts
View File

@@ -1,11 +1,22 @@
import { argsToTemplate, type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
import { UiSearchBarClearComponent, UiSearchBarComponent } from '@isa/ui/search-bar';
import {
argsToTemplate,
type Meta,
type StoryObj,
moduleMetadata,
} from '@storybook/angular';
import {
UiSearchBarClearComponent,
UiSearchBarComponent,
} from '@isa/ui/search-bar';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { isaActionSearch } from '@isa/icons';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IconButtonComponent } from '@isa/ui/buttons';
type Appearance = 'main' | 'results';
export interface UiSearchBarComponentInputs {
appearance: Appearance;
placeholder: string;
value: string;
resetValue: string;
@@ -36,20 +47,37 @@ const meta: Meta<UiSearchBarComponentInputs> = {
resetValue: {
control: 'text',
},
appearance: {
control: {
type: 'select',
options: ['main', 'results'] as Appearance[],
},
},
},
args: {
placeholder: 'Rechnungsnummer, E-Mail, Kundenkarte, Name...',
appearance: 'main',
},
render: (args) => {
let button = '';
if (args.appearance === 'main') {
button =
'<button type="submit" uiIconButton color="brand"><ng-icon name="isaActionSearch"></ng-icon></button>';
} else if (args.appearance === 'results') {
button =
'<button type="submit" uiIconButton prefix color="neutral"><ng-icon name="isaActionSearch"></ng-icon></button>';
}
return {
props: { ...args, control: new FormControl(args.value) },
template: `<ui-search-bar class="flex items-center shrink-0 h-[3.75rem] pr-2 pl-6" ${argsToTemplate(args, { exclude: ['placeholder', 'value', 'resetValue', 'appearance'] })}>
<input [formControl]="control" type="text" placeholder="${args.placeholder}" />
<ui-search-bar-clear [class.pr-4]="${args.appearance === 'results'}" value="${args.resetValue}"></ui-search-bar-clear>
${button}
</ui-search-bar>`,
};
},
render: (args) => ({
props: { ...args, control: new FormControl(args.value) },
template: `<ui-search-bar ${argsToTemplate(args, { exclude: ['placeholder', 'value', 'resetValue'] })}>
<input [formControl]="control" type="text" placeholder="${args.placeholder}" />
<ui-search-bar-clear value="${args.resetValue}"></ui-search-bar-clear>
<button type="submit" uiIconButton color="brand">
<ng-icon name="isaActionSearch"></ng-icon>
</button>
</ui-search-bar>`,
}),
};
export default meta;