sprintify-ui 0.4.10 → 0.5.2

package/dist/types/src/components/BaseStepper.vue.d.ts

@@ -5,7 +5,9 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: PropType<StepperItem[]>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         required: true;
         type: PropType<StepperItem[]>;

package/dist/types/src/components/BaseStepperItem.vue.d.ts

@@ -21,7 +21,9 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: NumberConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     stepNumber: {
         required: true;
         type: NumberConstructor;

package/dist/types/src/components/BaseSwitch.vue.d.ts

@@ -32,7 +32,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: boolean;
         type: PropType<string | number | boolean | null | undefined>;
@@ -68,9 +70,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
-    name: string;
     required: boolean;
+    name: string;
+    color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";

package/dist/types/src/components/BaseSystemAlert.vue.d.ts

@@ -17,7 +17,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     to: {
         default: undefined;
         type: PropType<RouteLocationRaw | undefined>;
@@ -38,8 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     to: RouteLocationRaw | undefined;
-    action: () => void | Promise<void>;
     color: "danger" | "success" | "warning" | "info";
+    action: () => void | Promise<void>;
     closable: boolean;
 }, {}>, {
     default?(_: {}): any;

package/dist/types/src/components/BaseTable.vue.d.ts

@@ -101,7 +101,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     }[]>;
     uncheckAll: () => void;
     scrollTop: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort" | "check" | "check-all" | "update:checkedRows" | "details-open" | "details-close" | "update:openedDetailed" | "cell-click")[], "sort" | "check" | "check-all" | "update:checkedRows" | "details-open" | "details-close" | "update:openedDetailed" | "cell-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (...args: any[]) => void;
+    check: (...args: any[]) => void;
+    "check-all": (...args: any[]) => void;
+    "update:checkedRows": (...args: any[]) => void;
+    "details-open": (...args: any[]) => void;
+    "details-close": (...args: any[]) => void;
+    "update:openedDetailed": (...args: any[]) => void;
+    "cell-click": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** Table data */
     data: {
         type: PropType<Row[]>;
@@ -190,8 +199,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onCell-click"?: ((...args: any[]) => any) | undefined;
 }, {
     data: Row[];
-    size: "sm" | "md";
     loading: boolean;
+    size: "sm" | "md";
     sortField: string;
     sortDirection: string;
     visibleColumns: number[];

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -80,7 +80,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     close: typeof close;
     open: typeof open;
     setKeywords: typeof setKeywords;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close" | "scrollBottom" | "typing" | "open")[], "update:modelValue" | "close" | "scrollBottom" | "typing" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    close: (...args: any[]) => void;
+    scrollBottom: (...args: any[]) => void;
+    typing: (...args: any[]) => void;
+    open: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[] | null>;
@@ -157,16 +163,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {
     filter: (option: NormalizedOption) => boolean;
-    placeholder: string;
-    name: string;
-    disabled: boolean;
     required: boolean;
+    name: string;
     inline: boolean;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
     max: number;
-    size: "base" | "xs" | "sm";
     loading: boolean;
     loadingBottom: boolean;
+    size: "base" | "xs" | "sm";
     dropdownShow: "focus" | "always";
     twContainer: string | string[];
 }, {}>, {

package/dist/types/src/components/BaseTagAutocompleteFetch.vue.d.ts

@@ -47,7 +47,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     open: () => void | undefined;
     close: () => void | undefined;
     setKeywords: (input: string) => void | undefined;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "scrollBottom" | "typing")[], "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+    scrollBottom: (...args: any[]) => void;
+    typing: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[]>;
@@ -94,9 +99,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }, {
+    required: boolean;
     placeholder: string;
     disabled: boolean;
-    required: boolean;
     hasError: boolean;
     max: number;
     queryKey: string;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -45,7 +45,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     focus: typeof focus;
     blur: typeof blur;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<string | null | undefined>;
@@ -90,13 +92,13 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
-    placeholder: string;
-    name: string;
-    disabled: boolean;
     required: boolean;
+    name: string;
     modelValue: string | null | undefined;
     autocomplete: boolean;
     preventSubmit: boolean;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
     rows: number;
 }, {}>;

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -49,7 +49,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     focus: typeof focus;
     blur: typeof blur;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | null>;
@@ -100,10 +105,10 @@ declare const _default: import("vue").DefineComponent<{
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    placeholder: string;
-    disabled: boolean;
     required: boolean;
     modelValue: string | null;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
     maxHeight: number;
     rows: number;

package/dist/types/src/components/BaseUniqueCode.vue.d.ts

@@ -12,7 +12,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"numeric" | "alphanumeric">;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<string | number | null>;

package/dist/types/src/types/ActionItem.d.ts

@@ -0,0 +1,14 @@
+import { RouteLocationRaw } from "vue-router";
+import { ActionColors } from ".";
+export interface ActionItem {
+    label?: string;
+    href?: string;
+    to?: RouteLocationRaw;
+    action?: () => Promise<void> | void;
+    icon?: string;
+    count?: number;
+    color?: ActionColors;
+    disabled?: boolean;
+    meta?: Record<string, any>;
+    actions?: ActionItem[];
+}

package/dist/types/src/types/index.d.ts

@@ -52,32 +52,6 @@ export interface PaginatedCollection extends PaginationMetadata {
     data: Collection;
 }
 export type ActionColors = 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary' | 'secondary';
-export interface MenuItemInterface {
-    label?: string;
-    href?: string;
-    to?: RouteLocationRaw;
-    action?: () => Promise<void> | void;
-    icon?: string;
-    count?: number;
-    color?: ActionColors;
-    line?: boolean;
-}
-export interface ActionItem {
-    label: string;
-    href?: string;
-    to?: RouteLocationRaw;
-    action?: () => Promise<void> | void;
-    icon?: string;
-    count?: number;
-    color?: ActionColors;
-    disabled?: boolean;
-    meta?: Record<string, any>;
-    actions?: ActionItem[];
-}
-export interface ActionSection {
-    title: string;
-    actions: ActionItem[];
-}
 export type Row = Record<string, any>;
 export interface BaseTableColumn {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.4.10",
+  "version": "0.5.2",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseActionItem.vue

@@ -1,14 +1,14 @@
 <template>
   <RouterLink
-    v-if="to"
+    v-if="item.to"
     v-slot="{ isActive, href: slotHref, navigate }"
     custom
-    :to="to"
+    :to="item.to"
   >
     <a
       :active="isActive"
       :href="slotHref"
-      :class="props.class"
+      :class="classInternal"
       :aria-current="isActive ? 'page' : undefined"
       @click.prevent="onClick(navigate)"
     >
@@ -16,22 +16,27 @@
     </a>
   </RouterLink>
   <button
-    v-else-if="action"
+    v-else-if="item.action"
     type="button"
-    class="text-left"
-    :class="props.class"
-    @click="onClick(action)"
+    :class="classInternal"
+    @click="onClick(item.action)"
   >
     <slot :active="false" />
   </button>
   <a
-    v-else-if="href"
-    :href="href"
-    :class="props.class"
+    v-else-if="item.href"
+    :href="item.href"
+    :class="classInternal"
     @click="onClick()"
   >
     <slot :active="false" />
   </a>
+  <div
+    v-else
+    :class="classInternal"
+  >
+    <slot :active="false" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -41,15 +46,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { RouteLocationRaw } from 'vue-router';
+import { ActionItem } from '@/types/ActionItem';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps<{
-  to?: RouteLocationRaw;
-  href?: string;
-  action?: (() => Promise<void>) | (() => void);
+  item: ActionItem,
   class?: string | string[] | null;
 }>();
 
+const classInternal = computed(() => {
+  return twMerge(
+    'block text-left',
+    props.class,
+  );
+});
+
 const closeMenu = inject('closeMenu', () => {
   return;
 }) as () => void;

package/src/components/BaseActionItemButton.vue

@@ -1,31 +1,29 @@
 <template>
   <BaseActionItem
-    :to="action.to"
-    :href="action.href"
-    :action="action.action"
+    :item="item"
     :class="classes"
     class="flex items-center justify-center"
   >
     <BaseIcon
-      v-if="action.icon"
-      :icon="action.icon"
+      v-if="item.icon"
+      :icon="item.icon"
       :class="iconClasses"
       class="mr-2"
     />
     <span
-      :class="[action.icon ? 'pr-1' : '']"
-    >{{ action.label }}</span>
+      :class="[item.icon ? 'pr-1' : '']"
+    >{{ item.label }}</span>
   </BaseActionItem>
 </template>
 
 <script lang="ts" setup>
-import { ActionItem } from '@/types';
 import { BaseIcon } from '..';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 
 const props = withDefaults(
   defineProps<{
-    action: ActionItem;
+    item: ActionItem;
     size: 'sm' | 'md' | 'lg';
   }>(),
   {
@@ -36,19 +34,19 @@ const props = withDefaults(
 const classes = computed(() => {
   const classList = ['btn'];
 
-  if (props.action.color == 'primary') {
+  if (props.item.color == 'primary') {
     classList.push('btn-primary');
-  } else if (props.action.color == 'secondary') {
+  } else if (props.item.color == 'secondary') {
     classList.push('btn-secondary-outline');
-  } else if (props.action.color == 'danger') {
+  } else if (props.item.color == 'danger') {
     classList.push('btn-danger');
-  } else if (props.action.color == 'warning') {
+  } else if (props.item.color == 'warning') {
     classList.push('btn-warning');
-  } else if (props.action.color == 'success') {
+  } else if (props.item.color == 'success') {
     classList.push('btn-success');
-  } else if (props.action.color == 'light') {
+  } else if (props.item.color == 'light') {
     classList.push('');
-  } else if (props.action.color == 'dark') {
+  } else if (props.item.color == 'dark') {
     classList.push('btn-black');
   }
 

package/src/components/BaseDataIterator.stories.js

@@ -133,7 +133,7 @@ Demo.args = {
       icon: 'heroicons:table-cells',
       action: () => alert('export!'),
     },
-    { line: true },
+    { meta: { line: true } },
     {
       label: 'Delete all',
       icon: 'heroicons:trash',

package/src/components/BaseDataIterator.vue

@@ -228,10 +228,10 @@ import {
   Collection,
   DataIteratorSection,
   DataTableQuery,
-  MenuItemInterface,
   PaginatedCollection,
   ResourceCollection,
 } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 
 import BaseMenu from './BaseMenu.vue';
 import BasePagination from './BasePagination.vue';
@@ -285,7 +285,7 @@ const props = defineProps({
    */
   actions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**

package/src/components/BaseDataTable.stories.js

@@ -98,7 +98,7 @@ Demo.args = {
       icon: 'heroicons:arrow-down-tray',
       action: () => alert('export!'),
     },
-    { line: true },
+    { meta: { line: true } },
     {
       label: 'Delete all',
       icon: 'heroicons:trash',

package/src/components/BaseDataTable.vue

@@ -242,7 +242,6 @@ import {
   CollectionItem,
   DataIteratorSection,
   DataTableQuery,
-  MenuItemInterface,
   PaginatedCollection,
   ResourceCollection,
   RowAction,
@@ -261,6 +260,7 @@ import BaseEmptyState from '../svg/BaseEmptyState.vue';
 import { RouteLocationRaw } from 'vue-router';
 import BaseMenu from './BaseMenu.vue';
 import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
+import { ActionItem } from '@/types/ActionItem';
 
 const router = useRouter();
 
@@ -372,7 +372,7 @@ const props = defineProps({
    */
   checkableActions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**
@@ -416,7 +416,7 @@ const props = defineProps({
    */
   actions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**
@@ -654,7 +654,7 @@ const showRowActionMenu = computed<boolean>(() => {
   return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
 });
 
-function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
+function rowActionMenuItems(row: CollectionItem): ActionItem[] {
   return rowActionsInternal.value.map((action) => {
     return {
       label: action.label,

package/src/components/BaseField.vue

@@ -5,7 +5,16 @@
       :label="labelNormalized"
       :required="required"
       :class="labelClassInternal"
+      :help="help"
     />
+
+    <small
+      v-if="labelNormalized && description"
+      class="mb-3 -mt-1 block text-xs text-slate-500"
+    >
+      {{ description }}
+    </small>
+
     <slot />
     <template v-if="errorMessage">
       <BaseInputError
@@ -45,6 +54,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  help: {
+    type: String,
+    default: null,
+  },
+  description: {
+    type: String,
+    default: null,
+  },
   errorType: {
     type: String as PropType<'default' | 'alert'>,
     default: 'default',

package/src/components/BaseHeader.vue

@@ -71,7 +71,7 @@
           <BaseActionItemButton
             v-for="(primaryAction, i) in primaryActions"
             :key="i"
-            :action="primaryAction"
+            :item="primaryAction"
             size="sm"
           />
           <BaseMenu
@@ -99,7 +99,8 @@
 </template>
 
 <script setup lang="ts">
-import { ActionItem, Breadcrumb } from '@/types';
+import { Breadcrumb } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 import { useResizeObserver } from '@vueuse/core';
 import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseActionItemButton from './BaseActionItemButton.vue';

package/src/components/BaseInputLabel.vue

@@ -2,21 +2,21 @@
   <label :class="classes">
     <div
       :ref="help ? 'info' : ''"
-      class="relative inline-flex items-center"
+      class="relative inline-flex"
       :class="[help ? 'cursor-help' : 'cursor-default']"
     >
-      <span> {{ label }}</span>
+      <div> {{ label }}</div>
 
       <BaseIcon
         v-if="help"
-        class="relative bottom-px ml-1 inline h-4 w-4"
+        class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
         icon="mdi:information-outline"
       />
 
-      <span
+      <div
         v-if="required"
         class="ml-0.5 text-red-600"
-      > *</span>
+      > *</div>
     </div>
   </label>
 </template>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -19,13 +19,32 @@ export default {
     },
     menu: [
       {
-        title: 'General',
+        label: 'Dashboard',
+        to: '/dashboard',
+        icon: 'heroicons:home-20-solid',
+        count: 1,
+        meta: {
+          showSubItems: 'always',
+        },
         actions: [
           {
-            label: 'Dashboard',
-            to: '/',
-            icon: 'heroicons:home-20-solid',
+            label: 'Sales',
+            to: '/dashboard/1',
+            count: 10,
+          },
+          {
+            label: 'Performance',
+            to: '/dashboard/2',
           },
+          {
+            label: 'Workload',
+            to: '/dashboard/3',
+          },
+        ],
+      },
+      {
+        label: 'General',
+        actions: [
           {
             label: 'Articles',
             to: '/articles',
@@ -35,6 +54,7 @@ export default {
               {
                 label: 'Articles',
                 to: '/articles/1',
+                count: 10,
               },
               {
                 label: 'Videos',
@@ -59,7 +79,7 @@ export default {
         ],
       },
       {
-        title: 'Settings',
+        label: 'Settings',
         actions: [
           {
             label: 'Account',