sprintify-ui 0.0.34 → 0.0.36

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

@@ -7,7 +7,6 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             actions: MenuItemInterface[];
-            routeKeyName: string;
             urlQuery: Record<string, any>;
             defaultQuery: DataTableQuery;
             searchable: boolean;
@@ -20,13 +19,6 @@ declare const _default: {
                 required: true;
                 type: StringConstructor;
             };
-            /**
-             * Route key name for Laravel route model binding
-             */
-            routeKeyName: {
-                default: string;
-                type: StringConstructor;
-            };
             /**
              * Query params that always get applied.
              * To add overwrite-able query params, use defaultQuery.
@@ -72,7 +64,7 @@ declare const _default: {
             "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
             onCheck?: ((...args: any[]) => any) | undefined;
             "onUpdate:query"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "actions" | "routeKeyName" | "urlQuery" | "defaultQuery" | "searchable" | "historyMode">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "actions" | "urlQuery" | "defaultQuery" | "searchable" | "historyMode">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -94,13 +86,6 @@ declare const _default: {
                 required: true;
                 type: StringConstructor;
             };
-            /**
-             * Route key name for Laravel route model binding
-             */
-            routeKeyName: {
-                default: string;
-                type: StringConstructor;
-            };
             /**
              * Query params that always get applied.
              * To add overwrite-able query params, use defaultQuery.
@@ -152,7 +137,6 @@ declare const _default: {
             query: Ref<DataTableQuery>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "checkAll" | "update:checked-rows" | "check" | "update:query")[], string, {
             actions: MenuItemInterface[];
-            routeKeyName: string;
             urlQuery: Record<string, any>;
             defaultQuery: DataTableQuery;
             searchable: boolean;
@@ -185,13 +169,6 @@ declare const _default: {
             required: true;
             type: StringConstructor;
         };
-        /**
-         * Route key name for Laravel route model binding
-         */
-        routeKeyName: {
-            default: string;
-            type: StringConstructor;
-        };
         /**
          * Query params that always get applied.
          * To add overwrite-able query params, use defaultQuery.
@@ -253,13 +230,6 @@ declare const _default: {
         required: true;
         type: StringConstructor;
     };
-    /**
-     * Route key name for Laravel route model binding
-     */
-    routeKeyName: {
-        default: string;
-        type: StringConstructor;
-    };
     /**
      * Query params that always get applied.
      * To add overwrite-able query params, use defaultQuery.
@@ -311,7 +281,6 @@ declare const _default: {
     query: Ref<DataTableQuery>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "checkAll" | "update:checked-rows" | "check" | "update:query")[], "click" | "delete" | "checkAll" | "update:checked-rows" | "check" | "update:query", {
     actions: MenuItemInterface[];
-    routeKeyName: string;
     urlQuery: Record<string, any>;
     defaultQuery: DataTableQuery;
     searchable: boolean;

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

@@ -6,7 +6,6 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             actions: MenuItemInterface[];
-            routeKeyName: string;
             urlQuery: Record<string, any>;
             defaultQuery: DataTableQuery;
             searchable: boolean;
@@ -31,13 +30,6 @@ declare const _default: {
                 required: true;
                 type: StringConstructor;
             };
-            /**
-             * Route key name for Laravel route model binding
-             */
-            routeKeyName: {
-                default: string;
-                type: StringConstructor;
-            };
             /**
              * Query params that always get applied
              */
@@ -161,7 +153,7 @@ declare const _default: {
             onCheckAll?: ((...args: any[]) => any) | undefined;
             "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
             onCheck?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "actions" | "routeKeyName" | "urlQuery" | "defaultQuery" | "searchable" | "historyMode" | "detailed" | "checkable" | "checkableActions" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "maxHeight" | "editButton" | "editUrl" | "deleteButton" | "deleteUrl" | "toggleable">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "actions" | "urlQuery" | "defaultQuery" | "searchable" | "historyMode" | "detailed" | "checkable" | "checkableActions" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "maxHeight" | "editButton" | "editUrl" | "deleteButton" | "deleteUrl" | "toggleable">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -183,13 +175,6 @@ declare const _default: {
                 required: true;
                 type: StringConstructor;
             };
-            /**
-             * Route key name for Laravel route model binding
-             */
-            routeKeyName: {
-                default: string;
-                type: StringConstructor;
-            };
             /**
              * Query params that always get applied
              */
@@ -318,7 +303,6 @@ declare const _default: {
             query: import("vue").ComputedRef<DataTableQuery | null>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "checkAll" | "update:checked-rows" | "check")[], string, {
             actions: MenuItemInterface[];
-            routeKeyName: string;
             urlQuery: Record<string, any>;
             defaultQuery: DataTableQuery;
             searchable: boolean;
@@ -363,13 +347,6 @@ declare const _default: {
             required: true;
             type: StringConstructor;
         };
-        /**
-         * Route key name for Laravel route model binding
-         */
-        routeKeyName: {
-            default: string;
-            type: StringConstructor;
-        };
         /**
          * Query params that always get applied
          */
@@ -508,13 +485,6 @@ declare const _default: {
         required: true;
         type: StringConstructor;
     };
-    /**
-     * Route key name for Laravel route model binding
-     */
-    routeKeyName: {
-        default: string;
-        type: StringConstructor;
-    };
     /**
      * Query params that always get applied
      */
@@ -643,7 +613,6 @@ declare const _default: {
     query: import("vue").ComputedRef<DataTableQuery | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "checkAll" | "update:checked-rows" | "check")[], "click" | "delete" | "checkAll" | "update:checked-rows" | "check", {
     actions: MenuItemInterface[];
-    routeKeyName: string;
     urlQuery: Record<string, any>;
     defaultQuery: DataTableQuery;
     searchable: boolean;

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

@@ -0,0 +1,67 @@
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+declare const _default: import("vue").DefineComponent<{
+    to: {
+        required: true;
+        type: PropType<RouteLocationRaw>;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        default: null;
+        type: StringConstructor;
+    };
+    linkText: {
+        default: null;
+        type: StringConstructor;
+    };
+    color: {
+        default: string;
+        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+    };
+    icon: {
+        required: true;
+        type: StringConstructor;
+    };
+    contrast: {
+        default: string;
+        type: PropType<"high" | "low">;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        required: true;
+        type: PropType<RouteLocationRaw>;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        default: null;
+        type: StringConstructor;
+    };
+    linkText: {
+        default: null;
+        type: StringConstructor;
+    };
+    color: {
+        default: string;
+        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+    };
+    icon: {
+        required: true;
+        type: StringConstructor;
+    };
+    contrast: {
+        default: string;
+        type: PropType<"high" | "low">;
+    };
+}>>, {
+    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    description: string;
+    contrast: "high" | "low";
+    linkText: string;
+}>;
+export default _default;

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

@@ -0,0 +1,56 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    primaryValue: {
+        required: true;
+        type: StringConstructor;
+    };
+    secondaryValue: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    trend: {
+        default: null;
+        type: PropType<"up" | "down" | null>;
+    };
+    caption: {
+        default: null;
+        type: PropType<string | null>;
+    };
+}, unknown, unknown, {
+    backgroundClass(): string;
+    textClass(): string;
+    iconClass(): string;
+    icon(): string;
+    centerClass(): string;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    primaryValue: {
+        required: true;
+        type: StringConstructor;
+    };
+    secondaryValue: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    trend: {
+        default: null;
+        type: PropType<"up" | "down" | null>;
+    };
+    caption: {
+        default: null;
+        type: PropType<string | null>;
+    };
+}>>, {
+    caption: string | null;
+    label: string | null;
+    secondaryValue: string | null;
+    trend: "up" | "down" | null;
+}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        required: true;
+        type: PropType<TimelineItem[]>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        required: true;
+        type: PropType<TimelineItem[]>;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    item: {
+        required: true;
+        type: PropType<TimelineItem>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        required: true;
+        type: PropType<TimelineItem>;
+    };
+}>>, {}>;
+export default _default;

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

@@ -49,9 +49,11 @@ import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
+import BaseShortcut from './BaseShortcut.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
 import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
 import BaseSkeleton from './BaseSkeleton.vue';
+import BaseStatistic from './BaseStatistic.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
 import BaseTabs from './BaseTabs.vue';
@@ -62,8 +64,10 @@ import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseTimeline from './BaseTimeline.vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, 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

@@ -4,7 +4,6 @@ import { I18n } from 'vue-i18n';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
-import { ActionItem } from './types/types';
 declare const messages: {
     en: {
         sui: {
@@ -292,4 +291,3 @@ export { config };
 export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
-export { type ActionItem };

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

@@ -0,0 +1,9 @@
+export declare enum Colors {
+    primary = "primary",
+    danger = "danger",
+    warning = "warning",
+    info = "info",
+    grey = "grey",
+    black = "black",
+    success = "success"
+}

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

@@ -0,0 +1,8 @@
+import { Colors } from './Colors';
+export interface TimelineItem {
+    title: string;
+    icon: string;
+    description?: null | string;
+    date?: string | null;
+    color?: Colors | null;
+}

package/package.json

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

package/src/components/BaseDataIterator.vue

@@ -224,14 +224,6 @@ const props = defineProps({
     type: String,
   },
 
-  /**
-   * Route key name for Laravel route model binding
-   */
-  routeKeyName: {
-    default: 'id',
-    type: String,
-  },
-
   /**
    * Query params that always get applied.
    * To add overwrite-able query params, use defaultQuery.

package/src/components/BaseDataTable.vue

@@ -2,7 +2,6 @@
   <BaseDataIterator
     ref="dataIterator"
     :url="url"
-    :route-key-name="routeKeyName"
     :url-query="urlQuery"
     :default-query="defaultQuery"
     :searchable="searchable"
@@ -194,14 +193,6 @@ const props = defineProps({
     type: String,
   },
 
-  /**
-   * Route key name for Laravel route model binding
-   */
-  routeKeyName: {
-    default: 'id',
-    type: String,
-  },
-
   /**
    * Query params that always get applied
    */

package/src/components/BaseShortcut.stories.js

@@ -0,0 +1,92 @@
+import BaseShortcut from './BaseShortcut.vue';
+
+const colors = [
+  'gray',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'indigo',
+  'purple',
+  'pink',
+];
+
+const sizes = ['base', 'lg'];
+
+export default {
+  title: 'Components/BaseShortcut',
+  component: BaseShortcut,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    contrast: {
+      control: { type: 'select' },
+      options: ['low', 'high'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseShortcut v-bind="args">
+    </BaseShortcut>
+  `,
+});
+
+export const Basic = Template.bind({});
+Basic.args = {
+  to: '/restaurants',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user',
+};
+
+export const Colors = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: 'high',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};
+
+export const Contrast = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: 'low',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};

package/src/components/BaseShortcut.vue

@@ -0,0 +1,153 @@
+<template>
+  <BaseCard class="inline-flex max-w-sm duration-200 hover:bg-slate-50">
+    <router-link :to="to">
+      <section class="whitespace-pre-line p-4">
+        <!-- Icon -->
+        <div
+          class="mb-2.5 inline-flex items-center rounded p-2"
+          :class="[colorClasses]"
+        >
+          <BaseIcon
+            v-if="icon"
+            :icon="icon"
+            :class="iconSizeClasses"
+          ></BaseIcon>
+        </div>
+        <!-- Title -->
+        <div class="text-md font-semibold">
+          {{ title }}
+        </div>
+        <!-- Description -->
+        <div
+          v-if="description"
+          class="mt-1 mb-3 whitespace-pre-line text-sm text-slate-500 line-clamp-2"
+        >
+          {{ description }}
+        </div>
+        <!-- Text link -->
+        <div
+          v-if="linkText"
+          class="flex items-center justify-start text-sm font-medium"
+        >
+          <div class="mr-1 leading-none">{{ linkText }}</div>
+          <div>
+            <BaseIcon
+              icon="heroicons:arrow-right-20-solid"
+              class="mt-px h-4 w-4"
+            ></BaseIcon>
+          </div>
+        </div>
+      </section>
+    </router-link>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+import BaseCard from './BaseCard.vue';
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps({
+  to: {
+    required: true,
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+  title: {
+    required: true,
+    type: String,
+  },
+  description: {
+    default: null,
+    type: String,
+  },
+  linkText: {
+    default: null,
+    type: String,
+  },
+  color: {
+    default: 'gray',
+    type: String as PropType<
+      | 'gray'
+      | 'red'
+      | 'orange'
+      | 'yellow'
+      | 'green'
+      | 'blue'
+      | 'indigo'
+      | 'purple'
+      | 'pink'
+    >,
+  },
+  icon: {
+    required: true,
+    type: String,
+  },
+  contrast: {
+    default: 'low',
+    type: String as PropType<'low' | 'high'>,
+  },
+});
+
+const colorClasses = computed(() => {
+  if (props.color == 'gray') {
+    if (props.contrast == 'high') {
+      return 'bg-slate-600 text-white';
+    }
+    return 'bg-slate-100 text-slate-800 border border-slate-300';
+  }
+  if (props.color == 'red') {
+    if (props.contrast == 'high') {
+      return 'bg-red-600 text-white';
+    }
+    return 'bg-red-100 text-red-700 border border-red-300';
+  }
+  if (props.color == 'orange') {
+    if (props.contrast == 'high') {
+      return 'bg-orange-500 text-white';
+    }
+    return 'bg-orange-100 text-yellow-700 border border-orange-300';
+  }
+  if (props.color == 'yellow') {
+    if (props.contrast == 'high') {
+      return 'bg-yellow-500 text-white';
+    }
+    return 'bg-yellow-100 text-yellow-700 border border-yellow-300';
+  }
+  if (props.color == 'green') {
+    if (props.contrast == 'high') {
+      return 'bg-green-600 text-white';
+    }
+    return 'bg-green-100 text-green-700 border border-green-300';
+  }
+  if (props.color == 'blue') {
+    if (props.contrast == 'high') {
+      return 'bg-blue-600 text-white';
+    }
+    return 'bg-blue-100 text-blue-700 border border-blue-300';
+  }
+  if (props.color == 'indigo') {
+    if (props.contrast == 'high') {
+      return 'bg-indigo-600 text-white';
+    }
+    return 'bg-indigo-100 text-indigo-700 border border-indigo-300';
+  }
+  if (props.color == 'purple') {
+    if (props.contrast == 'high') {
+      return 'bg-purple-600 text-white';
+    }
+    return 'bg-purple-100 text-purple-700 border border-purple-300';
+  }
+  if (props.color == 'pink') {
+    if (props.contrast == 'high') {
+      return 'bg-pink-600 text-white';
+    }
+    return 'bg-pink-100 text-pink-700 border border-pink-300';
+  }
+  return 'bg-slate-100 text-slate-700 border border-slate-300';
+});
+
+const iconSizeClasses = computed(() => {
+  return 'h-4 w-4';
+});
+</script>