sprintify-ui 0.6.44 → 0.6.45

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

@@ -1,51 +1,70 @@
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     title: {
-        required: false;
-        default: string;
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        default: undefined;
     };
     color: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    icon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
-        type: PropType<"danger" | "success" | "warning" | "info">;
     };
     showIcon: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
-        type: BooleanConstructor;
     };
     bordered: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
-        type: BooleanConstructor;
-    };
-}, unknown, unknown, {
-    backgroundClass(): string;
-    borderClass(): string;
-    titleClass(): string;
-    textClass(): string;
-    iconClass(): string;
-    icon(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    };
+}, {}, 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;
+    };
     title: {
-        required: false;
-        default: string;
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        default: undefined;
     };
     color: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    icon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
-        type: PropType<"danger" | "success" | "warning" | "info">;
     };
     showIcon: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
-        type: BooleanConstructor;
     };
     bordered: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
-        type: BooleanConstructor;
     };
 }>>, {
+    class: string | string[];
     title: string;
-    color: "danger" | "success" | "warning" | "info";
+    color: string;
+    icon: string;
     showIcon: boolean;
     bordered: boolean;
-}, {}>;
+}, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -7,13 +7,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-    };
     icon: {
         type: import("vue").PropType<string>;
         default: undefined;
     };
+    bordered: {
+        type: import("vue").PropType<boolean>;
+    };
     size: {
         type: import("vue").PropType<string>;
         default: string;
@@ -34,13 +34,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-    };
     icon: {
         type: import("vue").PropType<string>;
         default: undefined;
     };
+    bordered: {
+        type: import("vue").PropType<boolean>;
+    };
     size: {
         type: import("vue").PropType<string>;
         default: string;

package/package.json

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

package/src/components/BaseAlert.stories.js

@@ -1,12 +1,16 @@
 import BaseAlert from './BaseAlert.vue';
 
+import { palette } from '@/utils/colors';
+
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+
 export default {
   title: 'Components/BaseAlert',
   component: BaseAlert,
   argTypes: {
     color: {
       control: { type: 'select' },
-      options: ['success', 'info', 'warning', 'danger'],
+      options: colors,
     },
   },
 };
@@ -50,3 +54,22 @@ Info.args = {
   color: 'info',
   bordered: true,
 };
+
+export const Colors = (args) => ({
+  components: { BaseAlert },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseAlert v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+    <p>Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis. Excepteur officia mollit aute sint quis nisi sint.</p>
+    </BaseAlert>
+  </div>
+  `,
+});
+
+Colors.args = {
+  bordered: true,
+};

package/src/components/BaseAlert.vue

@@ -1,30 +1,14 @@
 <template>
   <div
-    class="flex w-full items-start rounded-md p-4"
-    :class="[backgroundClass, borderClass]"
+    :class="classes"
+    :style="colorStyle"
   >
     <div
       v-if="showIcon"
-      class="mr-3"
+      class="shrink-0"
     >
       <BaseIcon
-        v-if="color == 'warning'"
-        icon="heroicons:exclamation-triangle"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'danger'"
-        icon="heroicons:exclamation-circle"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'success'"
-        icon="heroicons:check-circle"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'info'"
-        icon="heroicons:information-circle"
+        :icon="icon"
         :class="iconClass"
       />
     </div>
@@ -33,14 +17,13 @@
       <h3
         v-if="title"
         class="mb-1 text-sm font-semibold leading-tight"
-        :class="[titleClass]"
       >
         {{ title }}
       </h3>
 
       <div
         v-if="$slots.default"
-        :class="[textClass, 'text-sm font-light leading-snug']"
+        class="text-sm font-light leading-snug"
       >
         <slot />
       </div>
@@ -48,111 +31,70 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { getColorConfig } from '@/utils/colors';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  title?: string;
+  color: 'info' | 'success' | 'danger' | 'warning' | string;
+  icon: string;
+  showIcon?: boolean;
+  bordered?: boolean;
+  class?: string | string[];
+}>(), {
+  title: undefined,
+  color: 'info',
+  icon: '',
+  showIcon: true,
+  bordered: false,
+  class: undefined,
+});
+
+const classes = computed(() => {
+  const base = 'flex w-full items-start rounded-md p-4 gap-2.5';
+  const iconPadding = props.showIcon ? 'pl-3.5' : '';
+
+  return twMerge(
+    base,
+    iconPadding,
+    props.class
+  );
+});
+
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, false);
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
+
+  if (props.bordered) {
+    styles.borderColor = config.borderColor;
+    styles.borderWidth = '1px';
+    styles.borderStyle = 'solid';
+  }
+
+  return styles;
+});
+
+const iconClass = computed(() => {
+  return props.icon + ' w-4 h-4 mt-px';
+});
+
+const icon = computed(() => {
+  const iconName = {
+    info: 'heroicons:information-circle-16-solid',
+    success: 'heroicons:check-circle-16-solid',
+    danger: 'heroicons:exclamation-circle-16-solid',
+    warning: 'heroicons:exclamation-triangle-16-solid',
+  }[props.color as never] ?? null;
 
-export default defineComponent({
-  props: {
-    title: {
-      required: false,
-      default: '',
-      type: String,
-    },
-    color: {
-      default: 'success',
-      type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
-    },
-    showIcon: {
-      default: true,
-      type: Boolean,
-    },
-    bordered: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  computed: {
-    backgroundClass(): string {
-      if (this.color == 'info') {
-        return 'bg-blue-50';
-      }
-      if (this.color == 'success') {
-        return 'bg-green-50';
-      }
-      if (this.color == 'danger') {
-        return 'bg-red-50';
-      }
-      if (this.color == 'warning') {
-        return 'bg-orange-50';
-      }
-      return 'bg-slate-900';
-    },
-    borderClass(): string {
-      if (!this.bordered) {
-        return '';
-      }
-      if (this.color == 'info') {
-        return 'border border-blue-400';
-      }
-      if (this.color == 'success') {
-        return 'border border-green-400';
-      }
-      if (this.color == 'danger') {
-        return 'border border-red-400';
-      }
-      if (this.color == 'warning') {
-        return 'border border-orange-400';
-      }
-      return 'borer border-slate-900';
-    },
-    titleClass(): string {
-      if (this.color == 'info') {
-        return 'text-blue-900';
-      }
-      if (this.color == 'success') {
-        return 'text-green-900';
-      }
-      if (this.color == 'warning') {
-        return 'text-orange-900';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-900';
-      }
-      return 'text-white';
-    },
-    textClass(): string {
-      if (this.color == 'info') {
-        return 'text-blue-900';
-      }
-      if (this.color == 'success') {
-        return 'text-green-900';
-      }
-      if (this.color == 'warning') {
-        return 'text-orange-900';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-900';
-      }
-      return 'text-white';
-    },
-    iconClass(): string {
-      return this.icon + ' w-5 h-5';
-    },
-    icon(): string {
-      if (this.color == 'info') {
-        return 'text-blue-600';
-      }
-      if (this.color == 'success') {
-        return 'text-green-600';
-      }
-      if (this.color == 'warning') {
-        return 'text-orange-600';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-600';
-      }
-      return 'text-white';
-    },
-  },
+  return iconName ?? props.icon;
 });
 </script>

package/src/components/BaseBadge.vue

@@ -22,7 +22,7 @@ const sizes = ['sm', 'md', 'lg'];
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<{

package/src/utils/colors.ts

@@ -20,8 +20,8 @@ export const palette: Record<string, ColorPalette> = {
   black: {
     low: {
       backgroundColor: colors.slate[200],
-      textColor: colors.slate[900],
-      borderColor: 'transparent',
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
     },
     high: {
       backgroundColor: colors.black,