@saasmakers/ui 1.4.36 → 1.4.38

package/app/components/bases/BaseButton.vue

@@ -58,7 +58,6 @@ function onClick(event: MouseEvent) {
     :is="to ? NuxtLinkLocale : 'button'"
     class="relative inline-block select-none appearance-none border focus-visible:outline-none"
     :class="{
-      'inline-block': !circular,
       'flex items-center justify-center': circular,
       'cursor-not-allowed opacity-50': disabled,
       'cursor-wait': loading,
@@ -131,7 +130,7 @@ function onClick(event: MouseEvent) {
 
     <BaseSpinner
       v-if="loading"
-      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
       :color="!background ? 'black' : light ? color : color === 'white' ? 'indigo' : 'white'"
       :size="size"
     />

package/app/components/bases/BaseMessage.vue

@@ -45,7 +45,7 @@ defineSlots<{
 
       <div
         v-if="$slots.default"
-        class="mt-6 flex flex-col items-center justify-center sm:flex-row sm:items-center"
+        class="mt-6 flex flex-col items-center justify-center sm:flex-row"
       >
         <slot />
       </div>

package/app/components/bases/BaseMetric.vue

@@ -36,7 +36,7 @@ const performanceIcon = computed<string | undefined>(() => {
     :class="{
       'items-start': alignment === 'left',
       'items-center': alignment === 'center',
-      'items-right': alignment === 'right',
+      'items-end': alignment === 'right',
     }"
   >
     <BaseText
@@ -62,7 +62,7 @@ const performanceIcon = computed<string | undefined>(() => {
 
       <BaseIcon
         v-if="performanceIcon"
-        class="absolute right-0 translate-x-4 transform"
+        class="absolute right-0 translate-x-4"
         :class="{
           '-mt-0.5': performance === 'down',
           'mt-0.25': performance === 'up',

package/app/components/fields/FieldSelect.vue

@@ -267,7 +267,7 @@ function selectOption(event: MouseEvent, value: string) {
           <BaseIcon
             v-if="caret"
             class="ml-2 flex-initial"
-            :class="{ 'rotate-180 transform': opened }"
+            :class="{ 'rotate-180': opened }"
             color="gray"
             :icon="getIcon('arrowDown')"
           />
@@ -344,7 +344,7 @@ function selectOption(event: MouseEvent, value: string) {
               <div
                 v-for="option in column.options"
                 :key="option.value"
-                class="group flex cursor-pointer items-center outline-none"
+                class="flex cursor-pointer items-center outline-none"
                 :class="{
                   'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,

package/app/types/global.d.ts

@@ -93,7 +93,6 @@ declare global {
   // Project
   type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
   type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue
-  type Meta<T> = import('@nuxtjs/storybook').Meta<T>
 
   // Navigator
   interface Navigator {
@@ -108,7 +107,6 @@ declare global {
   }
 
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
-  type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
   type VuelidateValidation = import('@vuelidate/core').BaseValidation
 }
 

package/nuxt.config.ts

@@ -14,7 +14,6 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
-    '@nuxtjs/storybook',
     '@pinia/nuxt',
     '@unocss/nuxt',
     '@vueuse/nuxt',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.36",
+  "version": "1.4.38",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -18,32 +18,30 @@
     "uno.config.ts"
   ],
   "dependencies": {
-    "@capacitor/preferences": "8.0.0",
-    "@nuxt/icon": "2.1.1",
+    "@capacitor/preferences": "8.0.1",
+    "@nuxt/icon": "2.2.3",
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "3.5.2",
-    "@nuxtjs/i18n": "10.2.1",
+    "@nuxtjs/i18n": "10.4.0",
     "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "5.6.7",
     "@nuxtjs/sitemap": "7.5.0",
-    "@nuxtjs/storybook": "9.0.1",
     "@pinia/nuxt": "0.11.3",
     "@unhead/vue": "2.0.19",
-    "@unocss/nuxt": "66.5.10",
-    "@unocss/reset": "66.5.10",
+    "@unocss/nuxt": "66.7.0",
+    "@unocss/reset": "66.7.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/components": "14.1.0",
-    "@vueuse/core": "14.1.0",
-    "@vueuse/nuxt": "14.1.0",
+    "@vueuse/components": "14.3.0",
+    "@vueuse/core": "14.3.0",
+    "@vueuse/nuxt": "14.3.0",
     "chartist": "1.5.0",
     "floating-vue": "5.2.2",
     "motion-v": "1.7.4",
     "numbro": "2.5.0",
     "snarkdown": "2.0.0",
-    "storybook": "9.0.5",
-    "unocss": "66.5.10",
-    "vue": "3.5.26",
+    "unocss": "66.7.0",
+    "vue": "3.5.35",
     "vue-router": "4.6.4"
   },
   "devDependencies": {
@@ -59,7 +57,6 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "storybook dev -p 3104 --no-open",
     "lint": "eslint . --max-warnings=0",
     "typecheck": "nuxi typecheck"
   }

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

@@ -1,42 +0,0 @@
-import BaseAlert from './BaseAlert.vue'
-
-export default {
-  component: BaseAlert,
-  title: 'Bases/BaseAlert',
-
-  argTypes: {
-    closingId: { control: 'text' },
-    isClosable: { control: 'boolean' },
-    size: {
-      control: 'select',
-      options: [
-        '2xs',
-        'xs',
-        'sm',
-        'base',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        '4xl',
-      ] satisfies BaseSize[],
-    },
-    status: {
-      control: 'select',
-      options: [
-        'error',
-        'info',
-        'success',
-        'warning',
-      ] satisfies BaseStatus[],
-    },
-    text: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseAlert>
-
-export const Default: StoryObj<typeof BaseAlert> = {
-  args: {
-    status: 'info',
-    text: 'This is an alert message',
-  } satisfies Partial<BaseAlert>,
-}

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

@@ -1,18 +0,0 @@
-import BaseAvatar from './BaseAvatar.vue'
-
-export default {
-  component: BaseAvatar,
-  title: 'Bases/BaseAvatar',
-
-  argTypes: {
-    bordered: { control: 'boolean' },
-    borderWidth: { control: 'number' },
-    circular: { control: 'boolean' },
-    editable: { control: 'boolean' },
-    maxSizeMb: { control: 'number' },
-    shadow: { control: 'boolean' },
-    src: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseAvatar>
-
-export const Default: StoryObj<typeof BaseAvatar> = { args: { src: 'https://via.placeholder.com/100' } satisfies Partial<BaseAvatar> }

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

@@ -1,22 +0,0 @@
-import BaseBordered from './BaseBordered.vue'
-
-export default {
-  component: BaseBordered,
-  title: 'Bases/BaseBordered',
-
-  argTypes: {
-    background: {
-      control: 'select',
-      options: ['gray', 'white'] satisfies BaseBackground[],
-    },
-    borderColor: {
-      control: 'select',
-      options: ['black', 'gray'] satisfies BaseBorderedColor[],
-    },
-    hasBorder: { control: 'boolean' },
-    shadow: { control: 'boolean' },
-    title: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseBordered>
-
-export const Default: StoryObj<typeof BaseBordered> = { args: { title: 'Bordered Container' } satisfies Partial<BaseBordered> }

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

@@ -1,81 +0,0 @@
-import BaseButton from './BaseButton.vue'
-
-export default {
-  component: BaseButton,
-  title: 'Bases/BaseButton',
-
-  argTypes: {
-    background: { control: 'boolean' },
-    circular: { control: 'boolean' },
-    color: {
-      control: 'select',
-      options: [
-        'black',
-        'gray',
-        'green',
-        'indigo',
-        'orange',
-        'red',
-        'white',
-      ] satisfies BaseColor[],
-    },
-    confirmation: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    fullWidth: { control: 'boolean' },
-    icon: { control: 'text' },
-    iconColor: {
-      control: 'select',
-      options: [
-        'black',
-        'gray',
-        'green',
-        'indigo',
-        'orange',
-        'red',
-        'white',
-      ] satisfies BaseColor[],
-    },
-    light: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    reverse: { control: 'boolean' },
-    rounded: {
-      control: 'select',
-      options: [
-        'none',
-        'sm',
-        'base',
-        'md',
-        'lg',
-        'xl',
-        'full',
-      ] satisfies BaseButtonRounded[],
-    },
-    size: {
-      control: 'select',
-      options: [
-        '2xs',
-        'xs',
-        'sm',
-        'base',
-        'lg',
-        'xl',
-      ] satisfies BaseButtonSize[],
-    },
-    text: { control: 'text' },
-    type: {
-      control: 'select',
-      options: [
-        'button',
-        'reset',
-        'submit',
-      ],
-    },
-  },
-} satisfies Meta<typeof BaseButton>
-
-export const Default: StoryObj<typeof BaseButton> = {
-  args: {
-    color: 'black',
-    text: 'Update profile',
-  } satisfies Partial<BaseButton>,
-}

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

@@ -1,31 +0,0 @@
-import BaseCharacter from './BaseCharacter.vue'
-
-export default {
-  component: BaseCharacter,
-  title: 'Bases/BaseCharacter',
-
-  argTypes: {
-    character: {
-      control: 'select',
-      options: [
-        'anthony',
-        'julien',
-        'mathieu',
-        'nada',
-        'power',
-        'yoda',
-      ] satisfies BaseCharacterCharacter[],
-    },
-    size: {
-      control: 'select',
-      options: [
-        'xs',
-        'sm',
-        'base',
-        'lg',
-      ] satisfies BaseCharacterSize[],
-    },
-  },
-} satisfies Meta<typeof BaseCharacter>
-
-export const Default: StoryObj<typeof BaseCharacter> = { args: { character: 'power' } satisfies Partial<BaseCharacter> }

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

@@ -1,20 +0,0 @@
-import BaseChart from './BaseChart.vue'
-
-export default {
-  component: BaseChart,
-  title: 'Bases/BaseChart',
-
-  argTypes: {
-    fullWidth: { control: 'boolean' },
-    type: {
-      control: 'select',
-      options: [
-        'bar',
-        'line',
-        'pie',
-      ] satisfies BaseChartType[],
-    },
-  },
-} satisfies Meta<typeof BaseChart>
-
-export const Default: StoryObj<typeof BaseChart> = { args: { type: 'bar' } satisfies Partial<BaseChart> }

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

@@ -1,36 +0,0 @@
-import BaseDivider from './BaseDivider.vue'
-
-export default {
-  component: BaseDivider,
-  title: 'Bases/BaseDivider',
-
-  argTypes: {
-    borderStyle: {
-      control: 'select',
-      options: [
-        'dashed',
-        'dotted',
-        'solid',
-      ] satisfies BaseDividerBorderStyle[],
-    },
-    hideNext: { control: 'boolean' },
-    hidePrevious: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    margin: { control: 'number' },
-    navigable: { control: 'boolean' },
-    size: {
-      control: 'select',
-      options: ['sm', 'base'] satisfies BaseDividerSize[],
-    },
-    title: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseDivider>
-
-export const Default: StoryObj<typeof BaseDivider> = { args: { title: 'Divider Title' } satisfies Partial<BaseDivider> }
-
-export const Navigable: StoryObj<typeof BaseDivider> = {
-  args: {
-    navigable: true,
-    title: 'This week',
-  } satisfies Partial<BaseDivider>,
-}

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

@@ -1,28 +0,0 @@
-import BaseEmoji from './BaseEmoji.vue'
-
-export default {
-  component: BaseEmoji,
-  title: 'Bases/BaseEmoji',
-
-  argTypes: {
-    clickable: { control: 'boolean' },
-    emoji: { control: 'text' },
-    hasBox: { control: 'boolean' },
-    size: {
-      control: 'select',
-      options: [
-        '2xs',
-        'xs',
-        'sm',
-        'base',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        '4xl',
-      ] satisfies BaseSize[],
-    },
-  },
-} satisfies Meta<typeof BaseEmoji>
-
-export const Default: StoryObj<typeof BaseEmoji> = { args: { emoji: '😀' } satisfies Partial<BaseEmoji> }

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

@@ -1,49 +0,0 @@
-import BaseHeading from './BaseHeading.vue'
-
-export default {
-  component: BaseHeading,
-  title: 'Bases/BaseHeading',
-
-  argTypes: {
-    alignment: {
-      control: 'select',
-      options: [
-        'center',
-        'left',
-        'right',
-      ] satisfies BaseAlignment[],
-    },
-    size: {
-      control: 'select',
-      options: [
-        'xs',
-        'sm',
-        'base',
-        'lg',
-        'xl',
-      ] satisfies BaseHeadingSize[],
-    },
-    tag: {
-      control: 'select',
-      options: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-      ] satisfies BaseHeadingTag[],
-    },
-  },
-} satisfies Meta<typeof BaseHeading>
-
-export const Default: StoryObj<typeof BaseHeading> = {
-  args: { tag: 'h1' } satisfies Partial<BaseHeading>,
-  render: args => ({
-    components: { BaseHeading },
-    setup() {
-      return { args }
-    },
-    template: '<BaseHeading v-bind="args">Heading Text</BaseHeading>',
-  }),
-}

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

@@ -1,56 +0,0 @@
-import BaseIcon from './BaseIcon.vue'
-
-export default {
-  component: BaseIcon,
-  title: 'Bases/BaseIcon',
-
-  argTypes: {
-    bold: { control: 'boolean' },
-    clickable: { control: 'boolean' },
-    color: {
-      control: 'select',
-      options: [
-        'black',
-        'gray',
-        'green',
-        'indigo',
-        'orange',
-        'red',
-        'white',
-      ] satisfies BaseColor[],
-    },
-    confirmation: { control: 'boolean' },
-    icon: { control: 'text' },
-    loading: { control: 'boolean' },
-    reverse: { control: 'boolean' },
-    size: {
-      control: 'select',
-      options: [
-        '2xs',
-        'xs',
-        'sm',
-        'base',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        '4xl',
-      ] satisfies BaseSize[],
-    },
-    status: {
-      control: 'select',
-      options: [
-        'error',
-        'info',
-        'success',
-        'warning',
-      ] satisfies BaseStatus[],
-    },
-    text: { control: 'text' },
-    truncate: { control: 'boolean' },
-    underline: { control: 'boolean' },
-    uppercase: { control: 'boolean' },
-  },
-} satisfies Meta<typeof BaseIcon>
-
-export const Default: StoryObj<typeof BaseIcon> = { args: { text: 'Icon Text' } satisfies Partial<BaseIcon> }

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

@@ -1,35 +0,0 @@
-import BaseMessage from './BaseMessage.vue'
-
-export default {
-  component: BaseMessage,
-  title: 'Bases/BaseMessage',
-
-  argTypes: {
-    bordered: { control: 'boolean' },
-    description: { control: 'text' },
-    legend: { control: 'text' },
-    title: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseMessage>
-
-export const Default: StoryObj<typeof BaseMessage> = {
-  args: {
-    description: 'This is a message description',
-    title: 'Message Title',
-  } satisfies Partial<BaseMessage>,
-}
-
-export const BorderedWithLegend: StoryObj<typeof BaseMessage> = {
-  args: {
-    bordered: true,
-    description: 'When you archive a habit, it will no longer appear in your main habits list. You can always unarchive it later if you change your mind.',
-    legend: 'Optional caption below the action',
-    title: 'Something went wrong',
-  } satisfies Partial<BaseMessage>,
-  decorators: [
-    story => ({
-      components: { story },
-      template: '<div class="mx-auto max-w-xs"><story /></div>',
-    }),
-  ],
-}

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

@@ -1,39 +0,0 @@
-import BaseMetric from './BaseMetric.vue'
-
-export default {
-  component: BaseMetric,
-  title: 'Bases/BaseMetric',
-
-  argTypes: {
-    alignment: {
-      control: 'select',
-      options: [
-        'center',
-        'left',
-        'right',
-      ] satisfies BaseMetricAlignment[],
-    },
-    performance: {
-      control: 'select',
-      options: [
-        'down',
-        'equal',
-        'up',
-      ] satisfies BaseMetricPerformance[],
-    },
-    performanceTooltip: { control: 'text' },
-    size: {
-      control: 'select',
-      options: ['sm', 'base'] satisfies BaseMetricSize[],
-    },
-    title: { control: 'text' },
-    value: { control: 'text' },
-  },
-} satisfies Meta<typeof BaseMetric>
-
-export const Default: StoryObj<typeof BaseMetric> = {
-  args: {
-    title: 'Metric Title',
-    value: '100',
-  } satisfies Partial<BaseMetric>,
-}

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

@@ -1,30 +0,0 @@
-import BaseOverlay from './BaseOverlay.vue'
-
-export default {
-  component: BaseOverlay,
-  title: 'Bases/BaseOverlay',
-
-  argTypes: {
-    active: { control: 'boolean' },
-    clickable: { control: 'boolean' },
-    fixed: { control: 'boolean' },
-    hasClose: { control: 'boolean' },
-    opacity: {
-      control: 'select',
-      options: [
-        0,
-        25,
-        50,
-        75,
-        95,
-        100,
-      ] satisfies BaseOverlayOpacity[],
-    },
-    position: {
-      control: 'select',
-      options: ['absolute', 'fixed'] satisfies BaseOverlayPosition[],
-    },
-  },
-} satisfies Meta<typeof BaseOverlay>
-
-export const Default: StoryObj<typeof BaseOverlay> = { args: { active: true } satisfies Partial<BaseOverlay> }