sprintify-ui 0.0.56 → 0.0.58

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

@@ -4,7 +4,7 @@ declare const _default: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            color: string;
             icon: string | undefined;
             size: "base" | "lg";
             contrast: "high" | "low";
@@ -15,7 +15,7 @@ declare const _default: {
             };
             color: {
                 default: string;
-                type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+                type: PropType<string>;
             };
             size: {
                 default: string;
@@ -46,7 +46,7 @@ declare const _default: {
             };
             color: {
                 default: string;
-                type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+                type: PropType<string>;
             };
             size: {
                 default: string;
@@ -57,7 +57,7 @@ declare const _default: {
                 type: PropType<string | undefined>;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+            color: string;
             icon: string | undefined;
             size: "base" | "lg";
             contrast: "high" | "low";
@@ -88,7 +88,7 @@ declare const _default: {
         };
         color: {
             default: string;
-            type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+            type: PropType<string>;
         };
         size: {
             default: string;
@@ -109,7 +109,7 @@ declare const _default: {
     };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<string>;
     };
     size: {
         default: string;
@@ -120,7 +120,7 @@ declare const _default: {
         type: PropType<string | undefined>;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    color: string;
     icon: string | undefined;
     size: "base" | "lg";
     contrast: "high" | "low";

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

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "primary" | "white">;
+        type: PropType<"dark" | "light" | "danger" | "white" | "primary">;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     count: {
@@ -31,10 +31,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "primary" | "white">;
+        type: PropType<"dark" | "light" | "danger" | "white" | "primary">;
     };
 }>>, {
-    color: "dark" | "light" | "danger" | "primary" | "white";
+    color: "dark" | "light" | "danger" | "white" | "primary";
     size: string;
     maxDigit: number;
 }>;

package/package.json

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

package/src/components/BaseBadge.stories.js

@@ -10,6 +10,8 @@ const colors = [
   'indigo',
   'purple',
   'pink',
+  '#ff0000',
+  '#dbeafe',
 ];
 
 const sizes = ['base', 'lg'];
@@ -58,8 +60,8 @@ export const Colors = (args) => ({
     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>
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
     <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
       Administrator
     </BaseBadge>
@@ -77,8 +79,8 @@ export const Contrast = (args) => ({
     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>
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
     <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
       Administrator
     </BaseBadge>

package/src/components/BaseBadge.vue

@@ -2,6 +2,7 @@
   <span
     class="inline-flex items-center rounded-full font-medium"
     :class="[colorClasses, sizeClasses]"
+    :style="colorStyle"
   >
     <BaseIcon v-if="icon" :icon="icon" :class="iconSizeClasses"> </BaseIcon>
     <slot />
@@ -29,6 +30,7 @@ const props = defineProps({
       | 'indigo'
       | 'purple'
       | 'pink'
+      | string
     >,
   },
   size: {
@@ -96,7 +98,26 @@ const colorClasses = computed(() => {
     }
     return 'bg-pink-100 text-pink-900';
   }
-  return 'bg-slate-100 text-slate-900';
+  if (!props.color) {
+    return 'bg-slate-100 text-slate-900';
+  }
+  return '';
+});
+
+const colorStyle = computed((): Record<string, string> => {
+  if (props.color.startsWith('#') || props.color.startsWith('rgb')) {
+    let textColor = 'white';
+
+    if (props.contrast == 'low') {
+      textColor = 'rgba(0,0,0,0.8)';
+    }
+
+    return {
+      backgroundColor: props.color,
+      color: textColor,
+    };
+  }
+  return {};
 });
 
 const sizeClasses = computed(() => {

package/src/components/BaseSelect.vue

@@ -64,7 +64,6 @@ const props = defineProps({
   },
 });
 
-const mounted = useMounted();
 const select = ref(null) as Ref<HTMLSelectElement | null>;
 
 const emit = defineEmits(['update:modelValue']);
@@ -121,45 +120,6 @@ function validModelValue(): boolean {
   return options.findIndex((o) => isEqual(o.value, props.modelValue)) != -1;
 }
 
-/**
- * This watcher is used to update the parent value
- * if the given modelValue should be empty.
- */
-watch(
-  () => props.modelValue,
-  () => {
-    // Let the select re-render before validating
-    // The validation depends on the select options,
-    // which needs to be rendered first
-    nextTick(() => {
-      validateAndFixModelVale();
-    });
-  }
-);
-
-/**
- * Re-trigger the same validation on mounted
- */
-onMounted(() => {
-  validateAndFixModelVale();
-});
-
-/**
- * Validate the current Model Value. Transform to external empty if :
- * 1. is internal empty
- * 2. is in the current options
- */
-function validateAndFixModelVale() {
-  if (!mounted.value) {
-    return;
-  }
-  if (isEmptyInternal(props.modelValue)) {
-    emitUpdate(EMPTY_VALUE_EXTERNAL);
-  } else if (!validModelValue()) {
-    emitUpdate(EMPTY_VALUE_EXTERNAL);
-  }
-}
-
 /**
  *
  * Emit change while mutating internal empty value ''