sprintify-ui 0.0.27 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.27",
+  "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/BaseModalCenter.stories.js

@@ -32,9 +32,11 @@ const Template = (args) => ({
       <BaseModalCenter v-model="show" v-bind="args">
         <template #default="{close}">
           <div class="p-8">
-            <p class="mb-6">Hello!</p>
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
 
-            <button @click="close" class="btn btn-sm">Close</button>
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
           </div>
         </template>
       </BaseModalCenter>

package/src/components/BaseModalCenter.vue

@@ -61,7 +61,7 @@
           </div>
 
           <button
-            class="right absolute top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
             type="button"
             @click="modal.close()"
           >

package/src/components/BaseModalSide.stories.js

@@ -26,9 +26,11 @@ const Template = (args) => ({
       <BaseModalSide v-model="show" v-bind="args">
         <template #default="{close}">
           <div class="p-8">
-            <p class="mb-6">Hello!</p>
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
 
-            <button @click="close" class="btn btn-sm">Close</button>
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
           </div>
         </template>
       </BaseModalSide>