sprintify-ui 0.0.150 → 0.0.152

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

@@ -1,7 +1,7 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -10,8 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     icon: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     icon: undefined;
 }>>>, {
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
+    color: string;
     icon: string;
     size: 'sm' | 'base' | 'lg';
     contrast: 'low' | 'high';

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

@@ -1,19 +1,24 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | null | undefined;
     collection?: string | undefined;
+    maxWidth?: string | undefined;
 }>, {
     modelValue: null;
     collection: string;
+    maxWidth: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | null | undefined;
     collection?: string | undefined;
+    maxWidth?: string | undefined;
 }>, {
     modelValue: null;
     collection: string;
+    maxWidth: string;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | null;
+    maxWidth: string;
     collection: string;
 }>;
 export default _default;

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

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<string>;
     };
     icon: {
         required: true;
@@ -48,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<string>;
     };
     icon: {
         required: true;
@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"high" | "low">;
     };
 }>>, {
-    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    color: string;
     description: string;
     contrast: "high" | "low";
     linkText: string;

package/dist/types/src/index.d.ts

@@ -49,6 +49,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            search: string;
             see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
@@ -116,6 +117,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            search: string;
             see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
@@ -196,6 +198,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                search: string;
                 see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
@@ -263,6 +266,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                search: string;
                 see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;

package/dist/types/src/utils/colors.d.ts

@@ -0,0 +1,13 @@
+declare const colors: import("tailwindcss/types/generated/colors").DefaultColors;
+export { colors };
+interface ColorConfig {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+}
+interface ColorPalette {
+    low: ColorConfig;
+    high: ColorConfig;
+}
+export declare const palette: Record<string, ColorPalette>;
+export declare function getColorConfig(color: string, contrast?: boolean): ColorConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.150",
+  "version": "0.0.152",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4",
+    "color2k": "^2.0.1",
     "storybook": "^6.5.15"
   },
   "devDependencies": {

package/src/components/BaseBadge.stories.js

@@ -1,18 +1,8 @@
 import BaseBadge from './BaseBadge.vue';
 
-const colors = [
-  'gray',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-  '#ff0000',
-  '#dbeafe',
-];
+import { palette } from '@/utils/colors';
+
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
 const sizes = ['sm', 'base', 'lg'];
 

package/src/components/BaseBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="inline-flex items-center rounded-full font-medium"
-    :class="[colorClasses, sizeClasses]"
+    :class="[sizeClasses]"
     :style="colorStyle"
   >
     <BaseIcon v-if="icon" :icon="icon" :class="iconSizeClasses"> </BaseIcon>
@@ -10,23 +10,14 @@
 </template>
 
 <script lang="ts" setup>
+import { getColorConfig } from '@/utils/colors';
 import { BaseIcon } from '.';
 
 const props = withDefaults(
   defineProps<{
     contrast: 'low' | 'high';
-    color:
-      | 'gray'
-      | 'red'
-      | 'orange'
-      | 'yellow'
-      | 'green'
-      | 'blue'
-      | 'indigo'
-      | 'purple'
-      | 'pink'
-      | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: 'sm' | 'base' | 'lg';
     icon?: string;
   }>(),
   {
@@ -37,84 +28,13 @@ const props = withDefaults(
   }
 );
 
-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';
-  }
-  if (!props.color) {
-    return 'bg-slate-100 text-slate-900';
-  }
-  return '';
-});
-
 const colorStyle = computed((): Record<string, string> => {
-  if (
-    props.color &&
-    (props.color.startsWith('#') || props.color.startsWith('rgb'))
-  ) {
-    let textColor = 'white';
-
-    if (props.contrast == 'low') {
-      textColor = 'rgba(0,0,0,0.8)';
-    }
+  const config = getColorConfig(props.color, props.contrast == 'high');
 
-    return {
-      backgroundColor: props.color,
-      color: textColor,
-    };
-  }
-  return {};
+  return {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
 });
 
 const sizeClasses = computed(() => {

package/src/components/BaseColor.stories.js

@@ -1,14 +1,10 @@
-import { createFieldStory, colors } from '../../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
 import BaseColor from './BaseColor.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 
 export default {
   title: 'Form/BaseColor',
   component: BaseColor,
-  argTypes: {},
-  args: {
-    colors: colors,
-  },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 

package/src/components/BaseColor.vue

@@ -17,10 +17,17 @@
       <template #option="option">
         <div
           :style="{ backgroundColor: option.option.value + '' }"
-          class="rounded-md border-none p-3"
+          class="box-border rounded-md border p-3"
           :class="[
-            option.selected.value ? 'text-white' : 'text-transparent',
+            option.selected.value
+              ? option.option.option.hasLowContrast
+                ? 'text-slate-700'
+                : 'text-white'
+              : 'text-transparent',
             disabled ? ' cursor-not-allowed opacity-50' : '',
+            option.option.option.hasLowContrast
+              ? 'border-slate-400'
+              : 'border-transparent',
           ]"
         >
           <BaseIcon icon="heroicons-solid:check-circle" class="h-5 w-5" />
@@ -36,6 +43,8 @@ import { BaseButtonGroup } from '.';
 import { isArray } from 'lodash';
 import { useField } from '@/composables/field';
 import { Option } from '@/types';
+import { palette } from '@/utils/colors';
+import { getContrast } from 'color2k';
 
 const props = defineProps({
   modelValue: {
@@ -59,19 +68,7 @@ const props = defineProps({
   colors: {
     type: [Array] as PropType<string[]>,
     default() {
-      return [
-        '#0f172a',
-        '#dc2626',
-        '#ea580c',
-        '#eab308',
-        '#16a34a',
-        '#0d9488',
-        '#0891b2',
-        '#2563eb',
-        '#4f46e5',
-        '#9333ea',
-        '#db2777',
-      ];
+      return Object.values(palette).map((p) => p.high.backgroundColor);
     },
   },
   multiple: {
@@ -95,10 +92,15 @@ const colorOptions = computed(() => {
     return {
       label: c,
       value: c,
+      hasLowContrast: hasLowContrast(c),
     };
   });
 });
 
+function hasLowContrast(color: string): boolean {
+  return getContrast(color, '#fff') < 1.38;
+}
+
 const normalizeModelValue = computed(() => {
   return isArray(props.modelValue)
     ? props.modelValue?.map((m) => {

package/src/components/BaseIconPicker.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="w-full max-w-[268px] overflow-hidden rounded border bg-white">
-    <div class="flex w-full min-w-0 overflow-hidden px-3 pt-3">
+  <div
+    class="w-full overflow-hidden rounded border bg-white"
+    :style="{
+      maxWidth: maxWidth,
+    }"
+  >
+    <div class="flex w-full min-w-0 overflow-hidden px-2 py-2">
       <select
         v-model="suffix"
-        class="max-w-[80px] shrink-0 rounded-l border-r-0 border-slate-300 text-xs focus:border-slate-300 focus:outline-none focus:ring-0"
+        class="max-w-[150px] shrink-0 rounded-l border-r-0 border-slate-300 py-1.5 pl-2 pr-6 focus:border-slate-300 focus:outline-none focus:ring-0 sm:text-sm"
+        @change="onSuffixChange"
       >
         <option v-for="(label, key) in suffixes" :key="key" :value="key">
           {{ label }}
@@ -13,12 +19,12 @@
       <input
         v-model="keywords"
         type="text"
-        :placeholder="$t('sui.autocomplete_placeholder')"
-        class="grow rounded-r border-slate-300 text-xs"
+        :placeholder="$t('sui.search') + '...'"
+        class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
       />
     </div>
 
-    <div ref="drawer" class="h-44 overflow-y-auto py-2 px-3">
+    <div ref="drawer" class="h-44 overflow-y-auto px-2 pb-2">
       <ul class="flex flex-wrap">
         <li v-for="icon in filteredIcons" :key="icon">
           <button
@@ -27,7 +33,7 @@
             :class="[
               modelValue == icon
                 ? 'bg-primary-600 text-white'
-                : 'bg-white text-slate-900 hover:bg-slate-200',
+                : 'bg-white text-slate-800 hover:bg-slate-200',
             ]"
             class="flex items-center justify-center rounded p-1"
             @click="onClick(icon)"
@@ -47,10 +53,12 @@ const props = withDefaults(
   defineProps<{
     modelValue?: string | null;
     collection?: string;
+    maxWidth?: string;
   }>(),
   {
     modelValue: null,
     collection: 'heroicons',
+    maxWidth: '300px',
   }
 );
 
@@ -62,6 +70,11 @@ function onClick(icon: string) {
 
 const icons = ref<string[]>([]);
 const suffixes = ref<Record<string, string>>({});
+const orderedSuffixKeys = computed(() => {
+  return Object.keys(suffixes.value).sort((a, b) => {
+    return b.length - a.length;
+  });
+});
 const suffix = ref<string | null>(null);
 const otherSuffixValue = computed(() => {
   return Object.keys(suffixes.value).filter((s) => {
@@ -139,12 +152,8 @@ function selectCurrentSuffix() {
     return;
   }
 
-  const suffixesOrderedByLength = Object.keys(suffixes.value).sort((a, b) => {
-    return b.length - a.length;
-  });
-
-  for (let i = 0; i < suffixesOrderedByLength.length; i++) {
-    const s = suffixesOrderedByLength[i];
+  for (let i = 0; i < orderedSuffixKeys.value.length; i++) {
+    const s = orderedSuffixKeys.value[i];
 
     if (props.modelValue.endsWith(s)) {
       suffix.value = s;
@@ -174,6 +183,31 @@ function scrollToIcon() {
   drawer.value.scrollTop = icon.offsetTop - 10;
 }
 
+function onSuffixChange() {
+  nextTick(() => {
+    let iconWithoutSuffix = props.modelValue ?? '';
+
+    orderedSuffixKeys.value.forEach((s) => {
+      let completeSuffix = s;
+
+      if (completeSuffix != '') {
+        completeSuffix = '-' + completeSuffix;
+      }
+
+      const regex = new RegExp(completeSuffix + '$');
+
+      iconWithoutSuffix = iconWithoutSuffix.replace(regex, '');
+    });
+
+    let suffixToAdd = suffix.value;
+    if (suffixToAdd != '') {
+      suffixToAdd = '-' + suffixToAdd;
+    }
+
+    emit('update:modelValue', iconWithoutSuffix + suffixToAdd);
+  });
+}
+
 onMounted(() => {
   fetchIcons();
 });

package/src/components/BaseShortcut.stories.js

@@ -1,16 +1,7 @@
 import BaseShortcut from './BaseShortcut.vue';
+import { palette } from '@/utils/colors';
 
-const colors = [
-  'gray',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-];
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
 const sizes = ['base', 'lg'];
 

package/src/components/BaseShortcut.vue

@@ -5,7 +5,7 @@
         <!-- Icon -->
         <div
           class="mb-2.5 inline-flex items-center rounded p-2"
-          :class="[colorClasses]"
+          :style="colorStyle"
         >
           <BaseIcon
             v-if="icon"
@@ -47,6 +47,7 @@ import { PropType } from 'vue';
 import { BaseIcon } from '.';
 import BaseCard from './BaseCard.vue';
 import { RouteLocationRaw } from 'vue-router';
+import { getColorConfig } from '@/utils/colors';
 
 const props = defineProps({
   to: {
@@ -67,17 +68,7 @@ const props = defineProps({
   },
   color: {
     default: 'gray',
-    type: String as PropType<
-      | 'gray'
-      | 'red'
-      | 'orange'
-      | 'yellow'
-      | 'green'
-      | 'blue'
-      | 'indigo'
-      | 'purple'
-      | 'pink'
-    >,
+    type: String as PropType<string>,
   },
   icon: {
     required: true,
@@ -89,62 +80,14 @@ const props = defineProps({
   },
 });
 
-const colorClasses = computed(() => {
-  if (props.color == 'gray') {
-    if (props.contrast == 'high') {
-      return 'bg-slate-600 text-white';
-    }
-    return 'bg-slate-100 text-slate-800 border border-slate-300';
-  }
-  if (props.color == 'red') {
-    if (props.contrast == 'high') {
-      return 'bg-red-600 text-white';
-    }
-    return 'bg-red-100 text-red-700 border border-red-300';
-  }
-  if (props.color == 'orange') {
-    if (props.contrast == 'high') {
-      return 'bg-orange-500 text-white';
-    }
-    return 'bg-orange-100 text-yellow-700 border border-orange-300';
-  }
-  if (props.color == 'yellow') {
-    if (props.contrast == 'high') {
-      return 'bg-yellow-500 text-white';
-    }
-    return 'bg-yellow-100 text-yellow-700 border border-yellow-300';
-  }
-  if (props.color == 'green') {
-    if (props.contrast == 'high') {
-      return 'bg-green-600 text-white';
-    }
-    return 'bg-green-100 text-green-700 border border-green-300';
-  }
-  if (props.color == 'blue') {
-    if (props.contrast == 'high') {
-      return 'bg-blue-600 text-white';
-    }
-    return 'bg-blue-100 text-blue-700 border border-blue-300';
-  }
-  if (props.color == 'indigo') {
-    if (props.contrast == 'high') {
-      return 'bg-indigo-600 text-white';
-    }
-    return 'bg-indigo-100 text-indigo-700 border border-indigo-300';
-  }
-  if (props.color == 'purple') {
-    if (props.contrast == 'high') {
-      return 'bg-purple-600 text-white';
-    }
-    return 'bg-purple-100 text-purple-700 border border-purple-300';
-  }
-  if (props.color == 'pink') {
-    if (props.contrast == 'high') {
-      return 'bg-pink-600 text-white';
-    }
-    return 'bg-pink-100 text-pink-700 border border-pink-300';
-  }
-  return 'bg-slate-100 text-slate-700 border border-slate-300';
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  return {
+    backgroundColor: config.backgroundColor,
+    border: `1px solid ${config.borderColor}`,
+    color: config.textColor,
+  };
 });
 
 const iconSizeClasses = computed(() => {

package/src/lang/en.json

@@ -40,6 +40,7 @@
     "remove": "Remove",
     "remove_file": "Remove file?",
     "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",
+    "search": "Search",
     "see_all_notifications": "See all notifications",
     "select_an_item": "Select an item",
     "select_an_option": "Select an option",

package/src/lang/fr.json

@@ -40,6 +40,7 @@
     "remove": "Retirer",
     "remove_file": "Retirer le fichier?",
     "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",
+    "search": "Rechercher",
     "see_all_notifications": "Voir toutes les notifications",
     "select_an_item": "Sélectionner un élément",
     "select_an_option": "Sélectionner une option",