@saasmakers/ui 0.1.77 → 0.1.80

package/app/components/bases/BaseTag.stories.ts

@@ -0,0 +1,44 @@
+import BaseTag from './BaseTag.vue'
+
+export default {
+  component: BaseTag,
+  title: 'Bases/BaseTag',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    avatar: { control: 'text' },
+    circle: { control: 'text' },
+    clickable: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'black',
+        'gray',
+        'green',
+        'indigo',
+        'orange',
+        'red',
+        'white',
+      ] satisfies BaseColor[],
+    },
+    draggable: { control: 'boolean' },
+    editable: { control: 'boolean' },
+    icon: { control: 'text' },
+    iconSize: { control: 'number' },
+    id: { control: 'number' },
+    isCreation: { control: 'boolean' },
+    light: { control: 'boolean' },
+    order: { control: 'number' },
+    removable: { control: 'boolean' },
+    rounded: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseTagSize[],
+    },
+    text: { control: 'text' },
+    truncate: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseTag>
+
+export const Default: StoryObj<typeof BaseTag> = { args: { text: 'Tag' } satisfies Partial<BaseTag> }

package/app/components/bases/BaseTags.stories.ts

@@ -0,0 +1,42 @@
+import BaseTags from './BaseTags.vue'
+
+export default {
+  component: BaseTags,
+  title: 'Bases/BaseTags',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    draggable: { control: 'boolean' },
+    editable: { control: 'boolean' },
+    hasBack: { control: 'boolean' },
+    hasCreation: { control: 'boolean' },
+    maxTags: { control: 'number' },
+    modelValue: { control: 'object' },
+    removable: { control: 'boolean' },
+    selectable: { control: 'boolean' },
+    selectableUnique: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'base'] satisfies BaseTagSize[],
+    },
+    tags: { control: 'object' },
+    wrap: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseTags>
+
+export const Default: StoryObj<typeof BaseTags> = {
+  args: {
+    modelValue: [],
+    tags: [
+      {
+        id: 1,
+        text: 'Tag 1',
+      },
+      {
+        id: 2,
+        text: 'Tag 2',
+      },
+    ],
+  } satisfies Partial<BaseTags>,
+}

package/app/components/bases/BaseText.stories.ts

@@ -0,0 +1,48 @@
+import BaseText from './BaseText.vue'
+
+export default {
+  component: BaseText,
+  title: 'Bases/BaseText',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseAlignment[],
+    },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies BaseBackground[],
+    },
+    block: { control: 'boolean' },
+    bold: { control: 'boolean' },
+    hasMargin: { control: 'boolean' },
+    maxCharacters: { control: 'number' },
+    noWrap: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        '2xs',
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+      ] satisfies BaseSize[],
+    },
+    skeleton: { control: 'boolean' },
+    text: { control: 'text' },
+    truncate: { control: 'boolean' },
+    underline: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BaseText>
+
+export const Default: StoryObj<typeof BaseText> = { args: { text: 'Text content' } satisfies Partial<BaseText> }

package/app/components/bases/BaseText.vue

@@ -3,7 +3,9 @@ import type { BaseText } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
 
 const props = withDefaults(defineProps<BaseText>(), {
+  alignment: undefined,
   background: undefined,
+  block: false,
   bold: false,
   hasMargin: false,
   maxCharacters: 0,
@@ -77,35 +79,39 @@ function onShowMore() {
   <component
     :is="to ? NuxtLinkLocale : 'div'"
     :class="{
-      'font-bold': bold,
-      'font-medium': uppercase || !bold,
-      'truncate': truncate,
-      'underline text-indigo-700 dark:text-indigo-300': !!to,
-      'uppercase': uppercase,
-      'whitespace-nowrap': noWrap,
-      'underline': underline,
       'bg-gray-100 dark:bg-gray-900': background === 'gray',
       'bg-white dark:bg-gray-900': background === 'white',
+      'block': block,
+      'font-bold': bold,
+      'font-medium': uppercase || !bold,
       'ml-0.5': ['3xs'].includes(size) && !reverse && hasMargin,
       'ml-1.5': ['2xs', 'xs', 'sm'].includes(size) && !reverse && hasMargin,
-      'ml-2': ['base', 'lg'].includes(size) && !reverse && hasMargin,
       'ml-2.5': ['xl', '2xl'].includes(size) && !reverse && hasMargin,
+      'ml-2': ['base', 'lg'].includes(size) && !reverse && hasMargin,
       'ml-3': ['3xl', '4xl'].includes(size) && !reverse && hasMargin,
       'mr-0.5': ['3xs'].includes(size) && reverse && hasMargin,
       'mr-1.5': ['2xs', 'xs', 'sm'].includes(size) && reverse && hasMargin,
-      'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-2.5': ['xl', '2xl'].includes(size) && reverse && hasMargin,
+      'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-3': ['3xl', '4xl'].includes(size) && reverse && hasMargin,
-      'text-3xs': (size === '3xs') && !uppercase,
+      'text-2xl': (size === '2xl' && !uppercase) || (size === '3xl' && uppercase),
       'text-2xs': (size === '2xs') || (size === 'xs' && uppercase),
-      'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),
-      'text-sm': (size === 'sm' && !uppercase) || (size === 'base' && uppercase),
+      'text-3xl': (size === '3xl' && !uppercase) || (size === '4xl' && uppercase),
+      'text-3xs': (size === '3xs') && !uppercase,
+      'text-4xl': size === '4xl' && !uppercase,
       'text-base': (size === 'base' && !uppercase) || (size === 'lg' && uppercase),
+      'text-center': alignment === 'center',
+      'text-left': alignment === 'left',
       'text-lg': (size === 'lg' && !uppercase) || (size === 'xl' && uppercase),
+      'text-right': alignment === 'right',
+      'text-sm': (size === 'sm' && !uppercase) || (size === 'base' && uppercase),
       'text-xl': (size === 'xl' && !uppercase) || (size === '2xl' && uppercase),
-      'text-2xl': (size === '2xl' && !uppercase) || (size === '3xl' && uppercase),
-      'text-3xl': (size === '3xl' && !uppercase) || (size === '4xl' && uppercase),
-      'text-4xl': size === '4xl' && !uppercase,
+      'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),
+      'truncate': truncate,
+      'underline text-indigo-700 dark:text-indigo-300': !!to,
+      'underline': underline,
+      'uppercase': uppercase,
+      'whitespace-nowrap': noWrap,
     }"
     :to="to"
     @click="onClick"

package/app/components/bases/BaseToast.stories.ts

@@ -0,0 +1,29 @@
+import BaseToast from './BaseToast.vue'
+
+export default {
+  component: BaseToast,
+  title: 'Bases/BaseToast',
+
+  argTypes: {
+    hasClose: { control: 'boolean' },
+    id: { control: 'text' },
+    status: {
+      control: 'select',
+      options: [
+        'error',
+        'info',
+        'success',
+        'warning',
+      ] satisfies BaseStatus[],
+    },
+    text: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseToast>
+
+export const Default: StoryObj<typeof BaseToast> = {
+  args: {
+    id: 'toast-1',
+    status: 'info',
+    text: 'Toast message',
+  } satisfies Partial<BaseToast>,
+}

package/app/components/fields/FieldCheckbox.stories.ts

@@ -0,0 +1,36 @@
+import FieldCheckbox from './FieldCheckbox.vue'
+
+export default {
+  component: FieldCheckbox,
+  title: 'Fields/FieldCheckbox',
+
+  argTypes: {
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    truncate: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldCheckbox>
+
+export const Default: StoryObj<typeof FieldCheckbox> = {
+  args: {
+    label: 'Checkbox Label',
+    modelValue: false,
+  } satisfies Partial<FieldCheckbox>,
+}

package/app/components/fields/FieldDays.stories.ts

@@ -0,0 +1,10 @@
+import FieldDays from './FieldDays.vue'
+
+export default {
+  component: FieldDays,
+  title: 'Fields/FieldDays',
+
+  argTypes: {},
+} satisfies Meta<typeof FieldDays>
+
+export const Default: StoryObj<typeof FieldDays> = { args: { modelValue: [] } satisfies Partial<FieldDays> }

package/app/components/fields/FieldEmojis.stories.ts

@@ -0,0 +1,10 @@
+import FieldEmojis from './FieldEmojis.vue'
+
+export default {
+  component: FieldEmojis,
+  title: 'Fields/FieldEmojis',
+
+  argTypes: {},
+} satisfies Meta<typeof FieldEmojis>
+
+export const Default: StoryObj<typeof FieldEmojis> = { args: { modelValue: '' } satisfies Partial<FieldEmojis> }

package/app/components/fields/FieldInput.stories.ts

@@ -0,0 +1,80 @@
+import FieldInput from './FieldInput.vue'
+
+export default {
+  component: FieldInput,
+  title: 'Fields/FieldInput',
+
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: [
+        'center',
+        'left',
+        'right',
+      ] satisfies BaseAlignment[],
+    },
+    autocomplete: { control: 'boolean' },
+    autofocus: { control: 'boolean' },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    border: {
+      control: 'select',
+      options: [
+        'bottom',
+        'full',
+        'none',
+      ] satisfies FieldInputBorder[],
+    },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    lowercaseOnly: { control: 'boolean' },
+    max: { control: 'number' },
+    min: { control: 'number' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    type: {
+      control: 'select',
+      options: [
+        'currency',
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+      ] satisfies FieldInputType[],
+    },
+    uppercase: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldInput>
+
+export const Default: StoryObj<typeof FieldInput> = {
+  args: {
+    label: 'Input Label',
+    modelValue: '',
+    placeholder: 'Enter text...',
+  } satisfies Partial<FieldInput>,
+}

package/app/components/fields/FieldLabel.stories.ts

@@ -0,0 +1,30 @@
+import FieldLabel from './FieldLabel.vue'
+
+export default {
+  component: FieldLabel,
+  title: 'Fields/FieldLabel',
+
+  argTypes: {
+    disabled: { control: 'boolean' },
+    forField: { control: 'text' },
+    hasMarginBottom: { control: 'boolean' },
+    hasMarginLeft: { control: 'boolean' },
+    icon: { control: 'text' },
+    label: { control: 'text' },
+    lineThrough: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    truncate: { control: 'boolean' },
+  },
+} satisfies Meta<typeof FieldLabel>
+
+export const Default: StoryObj<typeof FieldLabel> = { args: { label: 'Label Text' } satisfies Partial<FieldLabel> }

package/app/components/fields/FieldMessage.stories.ts

@@ -0,0 +1,22 @@
+import FieldMessage from './FieldMessage.vue'
+
+export default {
+  component: FieldMessage,
+  title: 'Fields/FieldMessage',
+
+  argTypes: {
+    description: { control: 'text' },
+    hideError: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldMessage>
+
+export const Default: StoryObj<typeof FieldMessage> = { args: { description: 'This is a message' } satisfies Partial<FieldMessage> }

package/app/components/fields/FieldSelect.stories.ts

@@ -0,0 +1,73 @@
+import FieldSelect from './FieldSelect.vue'
+
+export default {
+  component: FieldSelect,
+  title: 'Fields/FieldSelect',
+
+  argTypes: {
+    border: {
+      control: 'select',
+      options: [
+        'bottom',
+        'full',
+        'none',
+      ] satisfies FieldSelectBorder[],
+    },
+    caret: { control: 'boolean' },
+    columns: { control: 'object' },
+    description: { control: 'text' },
+    direction: {
+      control: 'select',
+      options: ['bottom', 'top'] satisfies FieldSelectDirection[],
+    },
+    disabled: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    maxHeight: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+      ] satisfies FieldSelectMaxHeight[],
+    },
+    openOnHover: { control: 'boolean' },
+    options: { control: 'object' },
+    padding: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldSelect>
+
+export const Default: StoryObj<typeof FieldSelect> = {
+  args: {
+    label: 'Select Label',
+    modelValue: '',
+    options: [
+      {
+        text: 'Option 1',
+        value: '1',
+      },
+      {
+        text: 'Option 2',
+        value: '2',
+      },
+      {
+        text: 'Option 3',
+        value: '3',
+      },
+    ],
+    placeholder: 'Choose an option...',
+  } satisfies Partial<FieldSelect>,
+}

package/app/components/fields/FieldTabs.stories.ts

@@ -0,0 +1,44 @@
+import FieldTabs from './FieldTabs.vue'
+
+export default {
+  component: FieldTabs,
+  title: 'Fields/FieldTabs',
+
+  argTypes: {
+    minimizeOnMobile: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+    tabs: { control: 'object' },
+    theme: {
+      control: 'select',
+      options: ['border', 'rounded'] satisfies FieldTabsTheme[],
+    },
+  },
+} satisfies Meta<typeof FieldTabs>
+
+export const Default: StoryObj<typeof FieldTabs> = {
+  args: {
+    modelValue: 'tab1',
+    tabs: [
+      {
+        label: 'Tab 1',
+        value: 'tab1',
+      },
+      {
+        label: 'Tab 2',
+        value: 'tab2',
+      },
+      {
+        label: 'Tab 3',
+        value: 'tab3',
+      },
+    ],
+  } satisfies Partial<FieldTabs>,
+}

package/app/components/fields/FieldTextarea.stories.ts

@@ -0,0 +1,44 @@
+import FieldTextarea from './FieldTextarea.vue'
+
+export default {
+  component: FieldTextarea,
+  title: 'Fields/FieldTextarea',
+
+  argTypes: {
+    autofocus: { control: 'boolean' },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    border: { control: 'boolean' },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    loading: { control: 'boolean' },
+    padding: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    resize: { control: 'boolean' },
+    rows: { control: 'number' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldTextarea>
+
+export const Default: StoryObj<typeof FieldTextarea> = {
+  args: {
+    label: 'Textarea Label',
+    modelValue: '',
+    placeholder: 'Enter text...',
+  } satisfies Partial<FieldTextarea>,
+}

package/app/components/fields/FieldTime.stories.ts

@@ -0,0 +1,39 @@
+import FieldTime from './FieldTime.vue'
+
+export default {
+  component: FieldTime,
+  title: 'Fields/FieldTime',
+
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    hideError: { control: 'boolean' },
+    icon: { control: 'text' },
+    id: { control: 'text' },
+    label: { control: 'text' },
+    labelIcon: { control: 'text' },
+    name: { control: 'text' },
+    required: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+      ] satisfies FieldSize[],
+    },
+  },
+} satisfies Meta<typeof FieldTime>
+
+export const Default: StoryObj<typeof FieldTime> = {
+  args: {
+    id: 'time-1',
+    label: 'Time Label',
+    modelValue: '',
+  } satisfies Partial<FieldTime>,
+}

package/app/components/layout/LayoutToasts.stories.ts

@@ -0,0 +1,8 @@
+import LayoutToasts from './LayoutToasts.vue'
+
+export default {
+  component: LayoutToasts,
+  title: 'Layout/LayoutToasts',
+} satisfies Meta<typeof LayoutToasts>
+
+export const Default: StoryObj<typeof LayoutToasts> = { args: {} }