sprintify-ui 0.0.26 → 0.0.28

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

@@ -4,18 +4,28 @@ declare const _default: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            color: "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            icon: string | undefined;
             size: "base" | "lg";
+            contrast: "low" | "high";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            contrast: {
+                default: string;
+                type: PropType<"low" | "high">;
+            };
             color: {
                 default: string;
-                type: PropType<"gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+                type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
             };
             size: {
                 default: string;
                 type: PropType<"base" | "lg">;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "color" | "size">;
+            icon: {
+                default: undefined;
+                type: PropType<string | undefined>;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "color" | "icon" | "size" | "contrast">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -30,17 +40,27 @@ declare const _default: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            contrast: {
+                default: string;
+                type: PropType<"low" | "high">;
+            };
             color: {
                 default: string;
-                type: PropType<"gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+                type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
             };
             size: {
                 default: string;
                 type: PropType<"base" | "lg">;
             };
+            icon: {
+                default: undefined;
+                type: PropType<string | undefined>;
+            };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            color: "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            icon: string | undefined;
             size: "base" | "lg";
+            contrast: "low" | "high";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -62,30 +82,48 @@ declare const _default: {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
+        contrast: {
+            default: string;
+            type: PropType<"low" | "high">;
+        };
         color: {
             default: string;
-            type: PropType<"gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+            type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
         };
         size: {
             default: string;
             type: PropType<"base" | "lg">;
         };
+        icon: {
+            default: undefined;
+            type: PropType<string | undefined>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    contrast: {
+        default: string;
+        type: PropType<"low" | "high">;
+    };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
     };
     size: {
         default: string;
         type: PropType<"base" | "lg">;
     };
+    icon: {
+        default: undefined;
+        type: PropType<string | undefined>;
+    };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    color: "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    icon: string | undefined;
     size: "base" | "lg";
+    contrast: "low" | "high";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

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

@@ -39,7 +39,35 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    iconLeft: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    iconRight: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    prefix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    suffix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | number | null>;
@@ -79,7 +107,37 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    iconLeft: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    iconRight: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    prefix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    suffix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
 }>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
@@ -89,7 +147,14 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: string | number | null;
     placeholder: string;
     disabled: boolean;
+    min: number;
+    max: number;
     autocomplete: boolean;
     preventSubmit: boolean;
+    iconLeft: string;
+    iconRight: string;
+    prefix: string;
+    suffix: string;
+    hasError: boolean;
 }>;
 export default _default;

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

@@ -0,0 +1,133 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The value of the input. Can be a number or null.
+     * 0.1 = 10%
+     * 0.5 = 50%
+     * 1 = 100%
+     */
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    /**
+     * Prevents submit when pressing 'Enter' while the input is focused.
+     */
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    icon: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The value of the input. Can be a number or null.
+     * 0.1 = 10%
+     * 0.5 = 50%
+     * 1 = 100%
+     */
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    /**
+     * Prevents submit when pressing 'Enter' while the input is focused.
+     */
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    icon: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    name: string;
+    step: number;
+    icon: string;
+    modelValue: string | number | null;
+    placeholder: string;
+    disabled: boolean;
+    min: number;
+    max: number;
+    preventSubmit: boolean;
+    hasError: boolean;
+}>;
+export default _default;

package/package.json

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

package/src/components/BaseBadge.stories.js

@@ -3,6 +3,7 @@ import BaseBadge from './BaseBadge.vue';
 const colors = [
   'gray',
   'red',
+  'orange',
   'yellow',
   'green',
   'blue',
@@ -25,6 +26,10 @@ export default {
       control: { type: 'select' },
       options: sizes,
     },
+    contrast: {
+      control: { type: 'select' },
+      options: ['low', 'high'],
+    },
   },
 };
 
@@ -35,27 +40,67 @@ const Template = (args) => ({
   },
   template: `
     <BaseBadge v-bind="args">
-      Administrator
+      Urgent
     </BaseBadge>
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {};
+Demo.args = {
+  color: 'red',
+  icon: 'heroicons:exclamation-triangle-20-solid',
+  contrast: 'high',
+};
+
+export const Colors = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: 'high',
+};
 
-export const AllBadges = (args) => ({
+export const Contrast = (args) => ({
   components: { BaseBadge },
   setup() {
     return { args, colors, sizes };
   },
   template: `
-    <BaseBadge v-for="color in colors" :key="color" :color="color">
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
       Administrator
     </BaseBadge>
-    <br>
-    <br>
-    <BaseBadge v-for="size in sizes" :key="size" :size="size">
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: 'low',
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    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">
       Administrator
     </BaseBadge>
+  </div>
   `,
 });

package/src/components/BaseBadge.vue

@@ -3,19 +3,26 @@
     class="inline-flex items-center rounded-full font-medium"
     :class="[colorClasses, sizeClasses]"
   >
+    <BaseIcon v-if="icon" :icon="icon" :class="iconSizeClasses"> </BaseIcon>
     <slot />
   </span>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
+import { BaseIcon } from '.';
 
 const props = defineProps({
+  contrast: {
+    default: 'low',
+    type: String as PropType<'low' | 'high'>,
+  },
   color: {
     default: 'gray',
     type: String as PropType<
       | 'gray'
       | 'red'
+      | 'orange'
       | 'yellow'
       | 'green'
       | 'blue'
@@ -28,31 +35,65 @@ const props = defineProps({
     default: 'base',
     type: String as PropType<'base' | 'lg'>,
   },
+  icon: {
+    default: undefined,
+    type: String as PropType<string | undefined>,
+  },
 });
 
 const colorClasses = computed(() => {
   if (props.color == 'gray') {
+    if (props.contrast == 'high') {
+      return 'bg-slate-600 text-white';
+    }
     return 'bg-slate-100 text-slate-800';
   }
   if (props.color == 'red') {
+    if (props.contrast == 'high') {
+      return 'bg-red-600 text-white';
+    }
     return 'bg-red-100 text-red-900';
   }
+  if (props.color == 'orange') {
+    if (props.contrast == 'high') {
+      return 'bg-orange-500 text-white';
+    }
+    return 'bg-orange-100 text-yellow-900';
+  }
   if (props.color == 'yellow') {
+    if (props.contrast == 'high') {
+      return 'bg-yellow-500 text-white';
+    }
     return 'bg-yellow-100 text-yellow-900';
   }
   if (props.color == 'green') {
+    if (props.contrast == 'high') {
+      return 'bg-green-600 text-white';
+    }
     return 'bg-green-100 text-green-900';
   }
   if (props.color == 'blue') {
+    if (props.contrast == 'high') {
+      return 'bg-blue-600 text-white';
+    }
     return 'bg-blue-100 text-blue-900';
   }
   if (props.color == 'indigo') {
+    if (props.contrast == 'high') {
+      return 'bg-indigo-600 text-white';
+    }
     return 'bg-indigo-100 text-indigo-900';
   }
   if (props.color == 'purple') {
+    if (props.contrast == 'high') {
+      return 'bg-purple-600 text-white';
+    }
     return 'bg-purple-100 text-purple-900';
   }
   if (props.color == 'pink') {
+    if (props.contrast == 'high') {
+      return 'bg-pink-600 text-white';
+    }
     return 'bg-pink-100 text-pink-900';
   }
   return 'bg-slate-100 text-slate-900';
@@ -67,4 +108,14 @@ const sizeClasses = computed(() => {
   }
   return 'px-2.5 py-0.5 text-xs';
 });
+
+const iconSizeClasses = computed(() => {
+  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';
+});
 </script>

package/src/components/BaseInput.stories.js

@@ -7,7 +7,6 @@ export default {
     required: true,
     type: 'text',
     name: 'name',
-    class: 'w-full',
   },
 };
 
@@ -31,6 +30,39 @@ Demo.args = {
   placeholder: 'Enter your name',
 };
 
+export const IconLeft = Template.bind({});
+IconLeft.args = {
+  iconLeft: 'heroicons:phone-20-solid',
+  placeholder: 'Enter your phone',
+};
+
+export const IconRight = Template.bind({});
+IconRight.args = {
+  iconRight: 'mdi:email-outline',
+  placeholder: 'Enter your email',
+};
+
+export const Prefix = Template.bind({});
+Prefix.args = {
+  prefix: 'https://',
+  placeholder: 'website URL',
+};
+
+export const Suffix = Template.bind({});
+Suffix.args = {
+  suffix: '%',
+  placeholder: 'Percentage',
+};
+
+export const All = Template.bind({});
+All.args = {
+  iconLeft: 'heroicons:currency-dollar-20-solid',
+  prefix: 'Price',
+  iconRight: 'heroicons:document-magnifying-glass',
+  suffix: '$',
+  placeholder: 'Item price',
+};
+
 export const Number = Template.bind({});
 Number.args = {
   type: 'number',
@@ -44,3 +76,11 @@ Disabled.args = {
   disabled: true,
   placeholder: 'Enter your name',
 };
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+  prefix: 'Price',
+  iconRight: 'heroicons:currency-dollar',
+  placeholder: 'Enter your name',
+};