sprintify-ui 0.1.8 → 0.1.10

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

@@ -87,10 +87,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     iconClass: string;
+    modelValue: boolean;
     duration: string;
-    size: "sm" | "lg";
     delay: number;
-    modelValue: boolean;
+    size: "sm" | "lg";
     backdropClass: string;
 }>;
 export default _default;

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

@@ -139,13 +139,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpload:end"?: ((...args: any[]) => any) | undefined;
 }, {
     name: string;
-    cropper: boolean | BaseCropperConfig | null;
-    accept: string;
+    modelValue: MediaLibraryPayload;
     disabled: boolean;
-    max: number;
     min: number;
-    modelValue: MediaLibraryPayload;
+    max: number;
     hasError: boolean;
+    cropper: boolean | BaseCropperConfig | null;
+    accept: string;
     layout: "list" | "gallery" | "images";
     maxSize: number;
     acceptedExtensions: string[];

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove" | "update" | "save:name")[], "remove" | "update" | "save:name", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update" | "remove" | "save:name")[], "update" | "remove" | "save:name", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     media: {
         required: true;
         type: PropType<UploadedFile | Media>;

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "danger" | "warning" | "dark" | "light">;
+        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary">;
     };
     size: {
         default: string;
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "danger" | "warning" | "dark" | "light">;
+        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary">;
     };
     size: {
         default: string;
@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     active: boolean;
-    color: "success" | "danger" | "warning" | "dark" | "light";
+    color: "dark" | "light" | "danger" | "success" | "warning" | "primary";
     icon: string;
     count: number;
     size: "xs" | "sm" | "md";

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

@@ -59,8 +59,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    closeOnOutsideClick: boolean;
     modelValue: boolean;
+    closeOnOutsideClick: boolean;
     clipped: boolean;
     maxWidth: string;
     backdropClass: string;

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

@@ -43,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    closeOnOutsideClick: boolean;
     modelValue: boolean;
+    closeOnOutsideClick: boolean;
     clipped: boolean;
     maxWidth: string;
     backdropClass: string;

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

@@ -52,8 +52,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     active: boolean;
-    icon: string;
     dark: boolean;
+    icon: string;
     count: number;
     size: "sm" | "md";
 }>;

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

@@ -52,8 +52,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     active: boolean;
-    icon: string;
     dark: boolean;
+    icon: string;
     count: number;
     size: "xs" | "sm" | "md";
 }>;

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

@@ -45,13 +45,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     rounded: {
         default: string;
-        type: PropType<"left" | "right" | "none" | "full">;
+        type: PropType<"left" | "right" | "full" | "none">;
     };
     autoFix: {
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "keydown")[], "update:modelValue" | "blur" | "focus" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "keydown")[], "update:modelValue" | "focus" | "blur" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<number | null>;
@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     rounded: {
         default: string;
-        type: PropType<"left" | "right" | "none" | "full">;
+        type: PropType<"left" | "right" | "full" | "none">;
     };
     autoFix: {
         default: boolean;
@@ -112,14 +112,14 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     step: number;
     required: boolean;
+    modelValue: number | null;
+    placeholder: string;
     disabled: boolean;
-    max: number;
     min: number;
-    placeholder: string;
-    modelValue: number | null;
+    max: number;
     hasError: boolean;
-    rounded: "left" | "right" | "none" | "full";
     borderless: boolean;
+    rounded: "left" | "right" | "full" | "none";
     autoFix: boolean;
 }>;
 export default _default;

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

@@ -54,9 +54,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    disabled: boolean;
-    placeholder: string;
     modelValue: string | null;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
 }>;
 export default _default;

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

@@ -88,8 +88,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     name: string;
     required: boolean;
     labelClass: string;
-    disabled: boolean;
     modelValue: OptionValue | undefined;
+    disabled: boolean;
     hasError: boolean;
     inputClass: string;
 }>, {

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

@@ -81,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    disabled: boolean;
-    placeholder: string;
     modelValue: string | Delta | null | undefined;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
     enable: boolean;
     toolbar: string | unknown[] | Record<string, any> | undefined;

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

@@ -79,13 +79,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    disabled: boolean;
+    modelValue: (string | number | null) | undefined;
     placeholder: string;
+    disabled: boolean;
+    hasError: boolean;
     options: Option[];
-    modelValue: (string | number | null) | undefined;
     labelKey: string;
     valueKey: string;
-    hasError: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

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

@@ -10,7 +10,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "info" | "danger" | "warning" | "dark" | "light" | "primary">;
+        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary" | "info">;
     };
     size: {
         default: string;
@@ -35,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "info" | "danger" | "warning" | "dark" | "light" | "primary">;
+        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary" | "info">;
     };
     size: {
         default: string;
@@ -53,11 +53,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     name: string;
-    color: "success" | "info" | "danger" | "warning" | "dark" | "light" | "primary";
+    color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
     required: boolean;
-    size: "base" | "xs" | "sm" | "lg" | "xl";
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
+    size: "base" | "xs" | "sm" | "lg" | "xl";
 }>, {
     default: (_: {}) => any;
 }>;

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

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "info" | "danger" | "warning">;
+        type: PropType<"danger" | "success" | "warning" | "info">;
     };
     closable: {
         default: boolean;
@@ -28,7 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"success" | "info" | "danger" | "warning">;
+        type: PropType<"danger" | "success" | "warning" | "info">;
     };
     closable: {
         default: boolean;
@@ -39,7 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     to: RouteLocationRaw | undefined;
     action: () => Promise<void> | void;
-    color: "success" | "info" | "danger" | "warning";
+    color: "danger" | "success" | "warning" | "info";
     closable: boolean;
 }>, {
     default: (_: {}) => any;

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

@@ -137,8 +137,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"focus" | "always">;
     };
 }>> & {
-    onScrollBottom?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onScrollBottom?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
@@ -146,13 +146,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     filter: (option: NormalizedOption) => boolean;
     name: string;
     required: boolean;
+    placeholder: string;
     disabled: boolean;
     max: number;
-    placeholder: string;
-    size: "base" | "xs" | "sm";
+    hasError: boolean;
     loading: boolean;
     loadingBottom: boolean;
-    hasError: boolean;
+    size: "base" | "xs" | "sm";
     inline: boolean;
     dropdownShow: "focus" | "always";
 }>, {

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

@@ -90,14 +90,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
-    onScrollBottom?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    placeholder: string;
     disabled: boolean;
     max: number;
-    placeholder: string;
     hasError: boolean;
     queryKey: string;
 }>, {

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

@@ -87,11 +87,11 @@ declare const _default: import("vue").DefineComponent<{
     type: string;
     name: string;
     required: boolean;
-    autocomplete: boolean;
-    disabled: boolean;
-    placeholder: string;
     modelValue: string | null | undefined;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
+    autocomplete: boolean;
     preventSubmit: boolean;
     rows: number;
 }>;

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

@@ -87,9 +87,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    disabled: boolean;
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
+    disabled: boolean;
     hasError: boolean;
     maxHeight: number;
     rows: number;

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

@@ -42,6 +42,7 @@ import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
+import BaseHeader from './BaseHeader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseIconPicker from './BaseIconPicker.vue';
 import BaseInput from './BaseInput.vue';
@@ -89,4 +90,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BaseNumber, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BaseNumber, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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

@@ -48,6 +48,7 @@ declare const messages: {
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
+            more: string;
             next: string;
             next_month: string;
             none: string;
@@ -134,6 +135,7 @@ declare const messages: {
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
+            more: string;
             next: string;
             next_month: string;
             none: string;
@@ -237,6 +239,7 @@ declare const config: {
                 maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
+                more: string;
                 next: string;
                 next_month: string;
                 none: string;
@@ -323,6 +326,7 @@ declare const config: {
                 maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
+                more: string;
                 next: string;
                 next_month: string;
                 none: string;

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

@@ -52,13 +52,13 @@ export interface PaginatedCollection extends PaginationMetadata {
 }
 export interface MenuItemInterface {
     label?: string;
-    icon?: string;
-    action?: () => Promise<void> | void;
-    to?: RouteLocationRaw;
     href?: string;
-    line?: boolean;
+    to?: RouteLocationRaw;
+    action?: () => Promise<void> | void;
+    icon?: string;
     count?: number;
-    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning';
+    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+    line?: boolean;
 }
 export interface ActionItem {
     label: string;
@@ -67,6 +67,7 @@ export interface ActionItem {
     action?: () => Promise<void> | void;
     icon?: string;
     count?: number;
+    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
     disabled?: boolean;
     meta?: Record<string, any>;
     actions?: ActionItem[];

package/package.json

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

package/src/components/BaseActionItemButton.vue

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

package/src/components/BaseBreadcrumbs.vue

@@ -8,12 +8,19 @@
       <ol role="list" class="flex items-center space-x-3">
         <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
           <div class="flex items-center">
-            <BaseIcon
+            <svg
               v-if="index > 0"
-              icon="heroicons-solid:chevron-right"
-              class="h-5 w-5 flex-shrink-0 text-slate-400"
+              class="h-5 w-5 flex-shrink-0 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
               aria-hidden="true"
-            />
+            >
+              <path
+                fill-rule="evenodd"
+                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                clip-rule="evenodd"
+              />
+            </svg>
             <RouterLink
               v-slot="{ href, navigate, isExactActive }"
               :to="breadcrumb.to"
@@ -48,8 +55,19 @@
       :to="mobileBreadcrumb.to"
       class="block text-slate-500 sm:hidden"
     >
-      <div class="flex items-center">
-        <BaseIcon icon="heroicons-solid:arrow-left" class="mr-2" />
+      <div class="flex items-center text-sm">
+        <svg
+          class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+            clip-rule="evenodd"
+          />
+        </svg>
         <span>
           {{ mobileBreadcrumb.label }}
         </span>
@@ -62,6 +80,7 @@
 import { PropType } from 'vue';
 import { Breadcrumb } from '@/types';
 import { truncate } from 'lodash';
+import { BaseIcon } from '..';
 
 const props = defineProps({
   breadcrumbs: {