sprintify-ui 0.6.38 → 0.6.40

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

@@ -1,4 +1,8 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -11,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -22,6 +26,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -34,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -45,9 +53,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }>>, {
+    class: string | string[];
     color: string;
     icon: string;
-    size: "base" | "sm" | "lg";
+    size: string;
     contrast: "high" | "low";
 }, {}>, {
     default?(_: {}): any;

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

@@ -202,6 +202,9 @@ import { Locales } from './types';
 import { Country } from './types/Country';
 import { Region } from './types/Region';
 import { Size } from './utils/sizes';
+export interface OptionProps {
+    size?: Size;
+}
 export interface Options {
     http?: AxiosInstance;
     upload_url?: string;
@@ -210,9 +213,7 @@ export interface Options {
     parseQueryString?: (params: string) => Record<string, any>;
     countries?: Country[];
     regions?: Region[];
-    props?: {
-        size?: Size;
-    };
+    props?: OptionProps;
 }
 declare const config: {
     http: AxiosInstance;
@@ -222,9 +223,7 @@ declare const config: {
     parseQueryString(params: string): Record<string, any>;
     countries: Country[];
     regions: Region[];
-    props: {
-        size: string;
-    };
+    props: OptionProps | undefined;
 };
 declare function install(app: App, options?: Options): void;
 declare const _default: {

package/package.json

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

package/src/components/BaseBadge.stories.js

@@ -4,7 +4,7 @@ import { palette } from '@/utils/colors';
 
 const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
-const sizes = ['sm', 'base', 'lg'];
+const sizes = ['sm', 'md', 'lg'];
 
 export default {
   title: 'Components/BaseBadge',
@@ -88,9 +88,9 @@ export const Sizes = (args) => ({
     return { args, colors, sizes };
   },
   template: `
-  <div v-for="size in sizes" :key="size">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseBadge v-bind="args" :size="size" icon="heroicons:beaker-20-solid">
+  <div v-for="size in sizes" :key="size" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBadge v-bind="args" :size="size">
       Administrator
     </BaseBadge>
   </div>

package/src/components/BaseBadge.vue

@@ -1,7 +1,6 @@
 <template>
   <span
-    class="inline-flex items-center rounded-full font-medium leading-tight"
-    :class="[sizeClasses, wrapClasses]"
+    :class="classes"
     :style="colorStyle"
   >
     <BaseIcon
@@ -17,20 +16,29 @@
 <script lang="ts" setup>
 import { getColorConfig } from '@/utils/colors';
 import { Icon as BaseIcon } from '@iconify/vue';
+import { twMerge } from 'tailwind-merge';
+
+const sizes = ['sm', 'md', 'lg'];
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
+    class?: string | string[];
     contrast?: 'low' | 'high';
     color?: string;
-    size?: 'sm' | 'base' | 'lg';
+    size?: typeof sizes[number];
     icon?: string;
     wrap?: boolean;
     bordered?: boolean;
   }>(),
   {
-    contrast: 'high',
+    class: undefined,
+    contrast: 'low',
     color: 'gray',
-    size: 'base',
+    size: 'md',
     icon: undefined,
   }
 );
@@ -52,36 +60,34 @@ const colorStyle = computed((): Record<string, string> => {
   return styles;
 });
 
-const wrapClasses = computed(() => {
-  if (!props.wrap) {
-    return 'whitespace-nowrap';
+const sizeInternal = computed(() => {
+  if (!sizes.includes(props.size)) {
+    return 'md';
   }
-  return '';
-});
 
-const sizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'px-2 py-px text-[11px]';
-  }
-  if (props.size == 'base') {
-    return 'px-2.5 py-0.5 text-xs';
-  }
-  if (props.size == 'lg') {
-    return 'px-3 py-0.5 text-sm';
-  }
-  return 'px-2.5 py-0.5 text-xs';
+  return props.size;
 });
 
+const classes = computed(() => {
+  const base = 'inline-flex items-center rounded leading-tight';
+  const size = {
+    sm: 'px-1.5 py-px text-[10px]',
+    md: 'px-1.5 py-0.5 text-xs',
+    lg: 'px-1.5 py-0.5 text-sm',
+  }[sizeInternal.value];
+  const wrap = props.wrap ? 'whitespace-nowrap' : '';
+
+  return twMerge(base, wrap, size, props.class);
+})
+
 const iconSizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'h-2.5 w-2.5 mr-1 -ml-px';
-  }
-  if (props.size == 'base') {
-    return 'h-3 w-3 mr-1 -ml-0.5';
-  }
-  if (props.size == 'lg') {
-    return 'h-4 w-4 mr-1 -ml-0.5';
-  }
-  return 'h-3 w-3 mr-1 -ml-0.5';
+
+  const size = {
+    sm: 'h-2.5 w-2.5 mr-1',
+    md: 'h-3 w-3 mr-1',
+    lg: 'h-4 w-4 mr-1',
+  }[sizeInternal.value];
+
+  return size;
 });
 </script>

package/src/composables/inputSize.ts

@@ -7,7 +7,7 @@ function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
 
     const bp = useBreakpoints();
 
-    const defaultSize = (config.props.size ?? 'md') as Size;
+    const defaultSize = (config.props?.size ?? 'md') as Size;
 
     const sizeInternal = computed(() => {
 

package/src/index.ts

@@ -19,6 +19,10 @@ import { Region } from './types/Region';
 import { useI18nStore } from './stores/i18n';
 import { Size } from './utils/sizes';
 
+export interface OptionProps {
+  size?: Size;
+}
+
 export interface Options {
   http?: AxiosInstance;
   upload_url?: string;
@@ -29,9 +33,7 @@ export interface Options {
   parseQueryString?: (params: string) => Record<string, any>;
   countries?: Country[];
   regions?: Region[];
-  props?: {
-    size?: Size
-  }
+  props?: OptionProps
 }
 
 const config = {
@@ -57,8 +59,8 @@ const config = {
   countries: [] as Country[],
   regions: [] as Region[],
   props: {
-    size: 'md'
-  }
+    size: 'md',
+  } as OptionProps | undefined
 };
 
 function install(app: App, options?: Options) {
@@ -95,6 +97,10 @@ function install(app: App, options?: Options) {
     config.regions = options.regions;
   }
 
+  if (options?.props) {
+    config.props = options.props;
+  }
+
   if (app.config.globalProperties.$i18n) {
     watch(
       () => app.config.globalProperties.$i18n.locale,

package/src/utils/colors.ts

@@ -44,7 +44,7 @@ export const palette: Record<string, ColorPalette> = {
   red: {
     low: {
       backgroundColor: colors.red[100],
-      textColor: colors.red[700],
+      textColor: colors.red[800],
       borderColor: colors.red[300],
     },
     high: {
@@ -56,7 +56,7 @@ export const palette: Record<string, ColorPalette> = {
   orange: {
     low: {
       backgroundColor: colors.orange[100],
-      textColor: colors.orange[700],
+      textColor: colors.orange[800],
       borderColor: colors.orange[300],
     },
     high: {
@@ -68,7 +68,7 @@ export const palette: Record<string, ColorPalette> = {
   yellow: {
     low: {
       backgroundColor: colors.yellow[100],
-      textColor: colors.yellow[700],
+      textColor: colors.yellow[800],
       borderColor: colors.yellow[300],
     },
     high: {
@@ -80,7 +80,7 @@ export const palette: Record<string, ColorPalette> = {
   green: {
     low: {
       backgroundColor: colors.green[100],
-      textColor: colors.green[700],
+      textColor: colors.green[800],
       borderColor: colors.green[300],
     },
     high: {
@@ -92,7 +92,7 @@ export const palette: Record<string, ColorPalette> = {
   teal: {
     low: {
       backgroundColor: colors.teal[100],
-      textColor: colors.teal[700],
+      textColor: colors.teal[800],
       borderColor: colors.teal[300],
     },
     high: {
@@ -104,7 +104,7 @@ export const palette: Record<string, ColorPalette> = {
   cyan: {
     low: {
       backgroundColor: colors.cyan[100],
-      textColor: colors.cyan[700],
+      textColor: colors.cyan[800],
       borderColor: colors.cyan[300],
     },
     high: {
@@ -116,7 +116,7 @@ export const palette: Record<string, ColorPalette> = {
   blue: {
     low: {
       backgroundColor: colors.blue[100],
-      textColor: colors.blue[700],
+      textColor: colors.blue[800],
       borderColor: colors.blue[300],
     },
     high: {
@@ -128,7 +128,7 @@ export const palette: Record<string, ColorPalette> = {
   indigo: {
     low: {
       backgroundColor: colors.indigo[100],
-      textColor: colors.indigo[700],
+      textColor: colors.indigo[800],
       borderColor: colors.indigo[300],
     },
     high: {
@@ -140,7 +140,7 @@ export const palette: Record<string, ColorPalette> = {
   purple: {
     low: {
       backgroundColor: colors.purple[100],
-      textColor: colors.purple[700],
+      textColor: colors.purple[800],
       borderColor: colors.purple[300],
     },
     high: {
@@ -152,7 +152,7 @@ export const palette: Record<string, ColorPalette> = {
   pink: {
     low: {
       backgroundColor: colors.pink[100],
-      textColor: colors.pink[700],
+      textColor: colors.pink[800],
       borderColor: colors.pink[300],
     },
     high: {