sprintify-ui 0.0.57 → 0.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/sprintify-ui.es.js +1096 -1086
  2. package/dist/types/src/components/BaseBadge.vue.d.ts +7 -7
  3. package/dist/types/src/components/BaseCounter.vue.d.ts +3 -3
  4. package/package.json +1 -1
  5. package/src/components/BaseBadge.stories.js +6 -4
  6. package/src/components/BaseBadge.vue +22 -1
package/dist/types/src/components/BaseBadge.vue.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const _default: {
4
4
  $: import("vue").ComponentInternalInstance;
5
5
  $data: {};
6
6
  $props: Partial<{
7
- color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
7
+ color: string;
8
8
  icon: string | undefined;
9
9
  size: "base" | "lg";
10
10
  contrast: "high" | "low";
@@ -15,7 +15,7 @@ declare const _default: {
15
15
  };
16
16
  color: {
17
17
  default: string;
18
- type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
18
+ type: PropType<string>;
19
19
  };
20
20
  size: {
21
21
  default: string;
@@ -46,7 +46,7 @@ declare const _default: {
46
46
  };
47
47
  color: {
48
48
  default: string;
49
- type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
49
+ type: PropType<string>;
50
50
  };
51
51
  size: {
52
52
  default: string;
@@ -57,7 +57,7 @@ declare const _default: {
57
57
  type: PropType<string | undefined>;
58
58
  };
59
59
  }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
60
- color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
60
+ color: string;
61
61
  icon: string | undefined;
62
62
  size: "base" | "lg";
63
63
  contrast: "high" | "low";
@@ -88,7 +88,7 @@ declare const _default: {
88
88
  };
89
89
  color: {
90
90
  default: string;
91
- type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
91
+ type: PropType<string>;
92
92
  };
93
93
  size: {
94
94
  default: string;
@@ -109,7 +109,7 @@ declare const _default: {
109
109
  };
110
110
  color: {
111
111
  default: string;
112
- type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
112
+ type: PropType<string>;
113
113
  };
114
114
  size: {
115
115
  default: string;
@@ -120,7 +120,7 @@ declare const _default: {
120
120
  type: PropType<string | undefined>;
121
121
  };
122
122
  }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
123
- color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
123
+ color: string;
124
124
  icon: string | undefined;
125
125
  size: "base" | "lg";
126
126
  contrast: "high" | "low";
package/dist/types/src/components/BaseCounter.vue.d.ts CHANGED
@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
14
14
  };
15
15
  color: {
16
16
  default: string;
17
- type: PropType<"dark" | "light" | "danger" | "primary" | "white">;
17
+ type: PropType<"dark" | "light" | "danger" | "white" | "primary">;
18
18
  };
19
19
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  count: {
@@ -31,10 +31,10 @@ declare const _default: import("vue").DefineComponent<{
31
31
  };
32
32
  color: {
33
33
  default: string;
34
- type: PropType<"dark" | "light" | "danger" | "primary" | "white">;
34
+ type: PropType<"dark" | "light" | "danger" | "white" | "primary">;
35
35
  };
36
36
  }>>, {
37
- color: "dark" | "light" | "danger" | "primary" | "white";
37
+ color: "dark" | "light" | "danger" | "white" | "primary";
38
38
  size: string;
39
39
  maxDigit: number;
40
40
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprintify-ui",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
4
4
  "scripts": {
5
5
  "build": "rimraf dist && vue-tsc && vite build",
6
6
  "build-fast": "rimraf dist && vite build",
package/src/components/BaseBadge.stories.js CHANGED
@@ -10,6 +10,8 @@ const colors = [
10
10
  'indigo',
11
11
  'purple',
12
12
  'pink',
13
+ '#ff0000',
14
+ '#dbeafe',
13
15
  ];
14
16
 
15
17
  const sizes = ['base', 'lg'];
@@ -58,8 +60,8 @@ export const Colors = (args) => ({
58
60
  return { args, colors, sizes };
59
61
  },
60
62
  template: `
61
- <div v-for="color in colors" :key="color">
62
- <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
63
+ <div v-for="color in colors" :key="color" class="mb-1">
64
+ <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
63
65
  <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
64
66
  Administrator
65
67
  </BaseBadge>
@@ -77,8 +79,8 @@ export const Contrast = (args) => ({
77
79
  return { args, colors, sizes };
78
80
  },
79
81
  template: `
80
- <div v-for="color in colors" :key="color">
81
- <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
82
+ <div v-for="color in colors" :key="color" class="mb-1">
83
+ <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
82
84
  <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
83
85
  Administrator
84
86
  </BaseBadge>
package/src/components/BaseBadge.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <span
3
3
  class="inline-flex items-center rounded-full font-medium"
4
4
  :class="[colorClasses, sizeClasses]"
5
+ :style="colorStyle"
5
6
  >
6
7
  <BaseIcon v-if="icon" :icon="icon" :class="iconSizeClasses"> </BaseIcon>
7
8
  <slot />
@@ -29,6 +30,7 @@ const props = defineProps({
29
30
  | 'indigo'
30
31
  | 'purple'
31
32
  | 'pink'
33
+ | string
32
34
  >,
33
35
  },
34
36
  size: {
@@ -96,7 +98,26 @@ const colorClasses = computed(() => {
96
98
  }
97
99
  return 'bg-pink-100 text-pink-900';
98
100
  }
99
- return 'bg-slate-100 text-slate-900';
101
+ if (!props.color) {
102
+ return 'bg-slate-100 text-slate-900';
103
+ }
104
+ return '';
105
+ });
106
+
107
+ const colorStyle = computed((): Record<string, string> => {
108
+ if (props.color.startsWith('#') || props.color.startsWith('rgb')) {
109
+ let textColor = 'white';
110
+
111
+ if (props.contrast == 'low') {
112
+ textColor = 'rgba(0,0,0,0.8)';
113
+ }
114
+
115
+ return {
116
+ backgroundColor: props.color,
117
+ color: textColor,
118
+ };
119
+ }
120
+ return {};
100
121
  });
101
122
 
102
123
  const sizeClasses = computed(() => {