sprintify-ui 0.0.57 → 0.0.59

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.57",
+  "version": "0.0.59",
   "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

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { PropType, Ref } from 'vue';
 import { get, isEqual } from 'lodash';
-import { useMounted } from '@vueuse/core';
+import { useMutationObserver } from '@vueuse/core';
 import { useField } from '@/composables/field';
 
 type Option = string | number | null;
@@ -76,6 +76,8 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
+const options = ref([] as HTMLOptionElement[]);
+
 function isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {
     return true;
@@ -101,7 +103,7 @@ const modelValueInternal = computed(() => {
     return EMPTY_VALUE_INTERNAL;
   }
 
-  if (!validModelValue()) {
+  if (!checkIfModelValueIsValid()) {
     return EMPTY_VALUE_INTERNAL;
   }
 
@@ -111,13 +113,26 @@ const modelValueInternal = computed(() => {
 /**
  * Checks if the current modelValue is valid
  */
-function validModelValue(): boolean {
+useMutationObserver(select.value, () => {
+  options.value = getOptions();
+});
+
+onMounted(() => {
+  options.value = getOptions();
+});
+
+function getOptions(): HTMLOptionElement[] {
+  return [...(select.value?.options ?? [])];
+}
+
+function checkIfModelValueIsValid(): boolean {
   if (props.modelValue === EMPTY_VALUE_EXTERNAL) {
     return true;
   }
 
-  const options = [...(select.value?.options ?? [])];
-  return options.findIndex((o) => isEqual(o.value, props.modelValue)) != -1;
+  return (
+    options.value.findIndex((o) => isEqual(o.value, props.modelValue)) != -1
+  );
 }
 
 /**