vueless 0.0.505 → 0.0.506

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 (10) hide show
  1. package/package.json +1 -1
  2. package/ui.button/UButton.vue +7 -2
  3. package/ui.button/config.ts +66 -63
  4. package/ui.button/storybook/stories.ts +11 -4
  5. package/ui.image-icon/UIcon.vue +1 -1
  6. package/ui.image-icon/config.ts +5 -4
  7. package/ui.loader/ULoader.vue +1 -1
  8. package/ui.loader/config.js +2 -1
  9. package/ui.loader-overlay/ULoaderOverlay.vue +1 -1
  10. package/web-types.json +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.505",
3
+ "version": "0.0.506",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
package/ui.button/UButton.vue CHANGED
@@ -1,6 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import { computed, ref, watchEffect, useId, watch } from "vue";
3
3
 
4
+ import { useDarkMode } from "../composables/useDarkMode.ts";
4
5
  import { getDefault } from "../utils/ui.ts";
5
6
  import ULoader from "../ui.loader/ULoader.vue";
6
7
  import UIcon from "../ui.image-icon/UIcon.vue";
@@ -31,11 +32,13 @@ const props = withDefaults(defineProps<UButtonProps>(), {
31
32
 
32
33
  const elementId = props.id || useId();
33
34
 
35
+ const { isDarkMode } = useDarkMode();
36
+
34
37
  const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
35
38
  useAttrs(props);
36
39
 
37
40
  const buttonRef = ref(null);
38
- const buttonStyle = ref(null);
41
+ const buttonStyle = ref({});
39
42
  const buttonWidth = ref(0);
40
43
 
41
44
  const loaderSize = computed(() => {
@@ -65,7 +68,9 @@ const iconSize = computed(() => {
65
68
  });
66
69
 
67
70
  const iconColor = computed(() => {
68
- return props.variant === "primary" ? "white" : props.color;
71
+ const primaryColor = isDarkMode.value ? "black" : "white";
72
+
73
+ return props.variant === "primary" ? primaryColor : props.color;
69
74
  });
70
75
 
71
76
  watch(
package/ui.button/config.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  export default /*tw*/ {
2
2
  button: {
3
3
  base: `
4
- flex items-center justify-center transition
5
- border font-medium outline-none whitespace-nowrap
6
- focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
7
- focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
8
- disabled:ring-0 disabled:ring-offset-0 disabled:cursor-not-allowed cursor-pointer
4
+ flex items-center justify-center font-medium whitespace-nowrap
5
+ border border-transparent outline-none transition
6
+ disabled:cursor-not-allowed cursor-pointer
7
+ disabled:ring-0 disabled:ring-offset-0
8
+ focus:ring-dynamic focus-within:ring-dynamic
9
+ focus:ring-offset-dynamic focus-within:ring-offset-dynamic
10
+ focus:ring-{color}-700/15 focus-within:ring-{color}-700/15
11
+ dark:focus:ring-{color}-500/15 dark:focus-within:ring-{color}-500/15
9
12
  `,
10
13
  variants: {
11
14
  size: {
@@ -18,27 +21,26 @@ export default /*tw*/ {
18
21
  },
19
22
  variant: {
20
23
  primary: `
21
- text-white
22
- bg-{color}-600 border-{color}-600
23
- hover:bg-{color}-700 hover:border-{color}-700
24
- focus:bg-{color}-700 focus:border-{color}-700
25
- active:bg-{color}-800 active:border-{color}-800
26
- disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
24
+ text-white dark:text-gray-900
25
+ bg-{color}-600 dark:bg-{color}-400
26
+ hover:bg-{color}-700 dark:hover:bg-{color}-500
27
+ focus:bg-{color}-700 dark:focus:bg-{color}-500
28
+ active:bg-{color}-800 dark:active:bg-{color}-600
29
+ disabled:bg-gray-400 dark:disabled:bg-gray-600
27
30
  `,
28
31
  secondary: `
29
- text-{color}-600 border-{color}-600
30
- hover:text-{color}-700 hover:border-{color}-700
31
- focus:text-{color}-700 focus:border-{color}-700
32
- active:text-{color}-800 active:border-{color}-800
33
- disabled:text-gray-400 disabled:border-gray-400
32
+ text-{color}-600 border-{color}-600 dark:text-{color}-400 dark:border-{color}-400
33
+ hover:text-{color}-700 hover:border-{color}-700 dark:hover:text-{color}-500 dark:hover:border-{color}-500
34
+ focus:text-{color}-700 focus:border-{color}-700 dark:focus:text-{color}-500 dark:focus:border-{color}-500
35
+ active:text-{color}-800 active:border-{color}-800 dark:active:text-{color}-600 dark:active:border-{color}-600
36
+ disabled:text-gray-400 disabled:border-gray-400 dark:disabled:text-gray-600 dark:disabled:border-gray-600
34
37
  `,
35
38
  thirdary: `
36
- border-transparent
37
- text-{color}-600
38
- hover:text-{color}-700 hover:bg-{color}-700/10
39
- focus:text-{color}-700 focus:bg-{color}-700/10
40
- active:text-{color}-800 active:bg-{color}-800/15
41
- disabled:text-gray-400 disabled:bg-transparent
39
+ text-{color}-600 dark:text-{color}-400
40
+ hover:text-{color}-700 hover:bg-{color}-700/10 dark:hover:text-{color}-500 dark:hover:bg-{color}-500/10
41
+ focus:text-{color}-700 focus:bg-{color}-700/10 dark:focus:text-{color}-500 dark:focus:bg-{color}-500/10
42
+ active:text-{color}-800 active:bg-{color}-800/15 dark:active:text-{color}-600 dark:active:bg-{color}-600/15
43
+ disabled:text-gray-400 disabled:bg-transparent dark:disabled:text-gray-600 dark:disabled:bg-transparent
42
44
  `,
43
45
  },
44
46
  round: {
@@ -54,87 +56,88 @@ export default /*tw*/ {
54
56
  block: {
55
57
  true: "w-full",
56
58
  },
57
- color: {
58
- grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
59
- white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
60
- },
61
59
  },
62
60
  compoundVariants: [
61
+ {
62
+ color: ["grayscale", "white"],
63
+ class: `
64
+ focus:ring-gray-700/15 dark:focus:ring-gray-500/15
65
+ focus-within:ring-gray-700/15 dark:focus-within:ring-gray-500/15
66
+ `,
67
+ },
63
68
  {
64
69
  color: "grayscale",
65
70
  variant: "primary",
66
71
  class: `
67
- bg-gray-900 border-gray-900
68
- hover:bg-gray-800 hover:border-gray-800
69
- focus:bg-gray-800 focus:border-gray-800
70
- active:bg-gray-700 active:border-gray-700
72
+ bg-gray-900 dark:bg-gray-100
73
+ hover:bg-gray-800 dark:hover:bg-gray-200
74
+ focus:bg-gray-800 dark:focus:bg-gray-200
75
+ active:bg-gray-700 dark:active:bg-gray-300
71
76
  `,
72
77
  },
73
78
  {
74
79
  color: "grayscale",
75
80
  variant: "secondary",
76
81
  class: `
77
- text-gray-900 border-gray-900
78
- hover:text-gray-800 hover:border-gray-800
79
- focus:text-gray-800 focus:border-gray-800
80
- active:text-gray-700 active:border-gray-700
82
+ text-gray-900 border-gray-900 dark:text-gray-100 dark:border-gray-100
83
+ hover:text-gray-800 hover:border-gray-800 dark:hover:text-gray-200 dark:hover:border-gray-200
84
+ focus:text-gray-800 focus:border-gray-800 dark:focus:text-gray-200 dark:focus:border-gray-200
85
+ active:text-gray-700 active:border-gray-700 dark:active:focus-gray-300 dark:active:border-gray-300
81
86
  `,
82
87
  },
83
88
  {
84
89
  color: "grayscale",
85
90
  variant: "thirdary",
86
91
  class: `
87
- text-gray-900
88
- hover:text-gray-800 hover:bg-gray-800/15
89
- focus:text-gray-800 focus:bg-gray-800/15
90
- active:text-gray-700 active:bg-gray-700/20
92
+ text-gray-900 dark:text-gray-100
93
+ hover:text-gray-800 hover:bg-gray-800/15 dark:hover:text-gray-200 dark:hover:bg-gray-200/15
94
+ focus:text-gray-800 focus:bg-gray-800/15 dark:focus:text-gray-200 dark:focus:bg-gray-200/15
95
+ active:text-gray-700 active:bg-gray-700/20 dark:active:text-gray-300 dark:active:bg-gray-300/20
91
96
  `,
92
97
  },
93
98
  {
94
99
  color: "white",
95
- variant: "primary",
96
100
  class: `
97
- text-gray-900 border-white bg-white
98
- hover:text-gray-800 hover:border-gray-50 hover:bg-gray-50
99
- focus:text-gray-800 focus:border-gray-50 focus:bg-gray-50
100
- active:text-gray-700 active:border-gray-100 active:bg-gray-100
101
+ text-gray-900 dark:text-white
102
+ hover:text-gray-800 dark:hover:text-gray-100
103
+ focus:text-gray-800 dark:focus:text-gray-100
104
+ active:text-gray-700 dark:active:text-gray-200
101
105
  `,
102
106
  },
103
107
  {
104
108
  color: "white",
105
- variant: "secondary",
109
+ variant: "primary",
106
110
  class: `
107
- text-gray-900 border-gray-200
108
- hover:text-gray-800 hover:border-gray-300
109
- focus:text-gray-800 focus:border-gray-300
110
- active:text-gray-700 active:border-gray-400
111
+ bg-white dark:text-gray-900
112
+ hover:bg-gray-50 dark:hover:text-gray-800
113
+ focus:bg-gray-50 dark:focus:text-gray-800
114
+ active:bg-gray-100 dark:active:text-gray-700
111
115
  `,
112
116
  },
117
+ {
118
+ color: "white",
119
+ variant: "secondary",
120
+ class: "border-gray-100 hover:border-gray-200 focus:border-gray-200 active:border-gray-300",
121
+ },
113
122
  {
114
123
  color: "white",
115
124
  variant: "thirdary",
116
- class: `
117
- text-gray-900
118
- hover:text-gray-800 hover:bg-white/15
119
- focus:text-gray-800 focus:bg-white/15
120
- active:text-gray-700 active:bg-white/20
121
- `,
125
+ class: "hover:bg-white/10 focus:bg-white/10 active:bg-white/15",
122
126
  },
123
- { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },
124
- { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900/10" },
125
- { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
126
- { leftIcon: true, size: "2xs", class: "pl-1" },
127
- { leftIcon: true, size: "xs", class: "pl-2" },
128
- { leftIcon: true, size: "sm", class: "pl-3" },
129
- { leftIcon: true, size: "md", class: "pl-4" },
130
- { leftIcon: true, size: "lg", class: "pl-5" },
131
- { leftIcon: true, size: "xl", class: "pl-6" },
127
+ { filled: true, variant: "thirdary", class: "bg-{color}-600/10 dark:bg-{color}-400/10" },
128
+ { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-900/5 dark:bg-gray-200/5" },
132
129
  { rightIcon: true, size: "2xs", class: "pr-1" },
133
130
  { rightIcon: true, size: "xs", class: "pr-2" },
134
131
  { rightIcon: true, size: "sm", class: "pr-3" },
135
132
  { rightIcon: true, size: "md", class: "pr-4" },
136
133
  { rightIcon: true, size: "lg", class: "pr-5" },
137
134
  { rightIcon: true, size: "xl", class: "pr-6" },
135
+ { leftIcon: true, size: "2xs", class: "pl-1" },
136
+ { leftIcon: true, size: "xs", class: "pl-2" },
137
+ { leftIcon: true, size: "sm", class: "pl-3" },
138
+ { leftIcon: true, size: "md", class: "pl-4" },
139
+ { leftIcon: true, size: "lg", class: "pl-5" },
140
+ { leftIcon: true, size: "xl", class: "pl-6" },
138
141
  { square: true, size: "2xs", class: "p-1" },
139
142
  { square: true, size: "xs", class: "p-1.5" },
140
143
  { square: true, size: "sm", class: "p-2" },
package/ui.button/storybook/stories.ts CHANGED
@@ -12,6 +12,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
12
12
  import URow from "../../ui.container-row/URow.vue";
13
13
  import UCol from "../../ui.container-col/UCol.vue";
14
14
 
15
+ import { useDarkMode } from "../../composables/useDarkMode.ts";
16
+
15
17
  import type { Meta, StoryFn } from "@storybook/vue3";
16
18
  import type { UButtonProps } from "../types.ts";
17
19
 
@@ -182,7 +184,9 @@ export const IconProps: StoryFn<UButtonArgs> = (args) => ({
182
184
  export const Slots: StoryFn<UButtonArgs> = (args) => ({
183
185
  components: { UButton, UIcon, URow },
184
186
  setup() {
185
- return { args };
187
+ const { isDarkMode } = useDarkMode();
188
+
189
+ return { args, isDarkMode };
186
190
  },
187
191
  template: `
188
192
  <URow no-mobile>
@@ -190,8 +194,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
190
194
  <template #left>
191
195
  <UIcon
192
196
  name="heart_plus"
193
- color="green"
194
197
  size="sm"
198
+ color="green"
199
+ :variant="isDarkMode ? 'dark' : 'default'"
195
200
  />
196
201
  </template>
197
202
  </UButton>
@@ -200,8 +205,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
200
205
  <template #default>
201
206
  <UIcon
202
207
  name="settings"
203
- color="green"
204
208
  size="sm"
209
+ color="green"
210
+ :variant="isDarkMode ? 'dark' : 'default'"
205
211
  />
206
212
  </template>
207
213
  </UButton>
@@ -210,8 +216,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
210
216
  <template #right>
211
217
  <UIcon
212
218
  name="delete"
213
- color="green"
214
219
  size="sm"
220
+ color="green"
221
+ :variant="isDarkMode ? 'dark' : 'default'"
215
222
  />
216
223
  </template>
217
224
  </UButton>
package/ui.image-icon/UIcon.vue CHANGED
@@ -41,7 +41,7 @@ const props = defineProps({
41
41
 
42
42
  /**
43
43
  * Icon color.
44
- * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
44
+ * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
45
45
  */
46
46
  color: {
47
47
  type: String,
package/ui.image-icon/config.ts CHANGED
@@ -3,13 +3,14 @@ export default /*tw*/ {
3
3
  base: "fill-current outline-0 shrink-0 grow-0",
4
4
  variants: {
5
5
  variant: {
6
- light: "text-{color}-400",
7
- default: "text-{color}-600",
8
- dark: "text-{color}-800",
6
+ light: "text-{color}-400 dark:text-{color}-200",
7
+ default: "text-{color}-600 dark:text-{color}-400",
8
+ dark: "text-{color}-800 dark:text-{color}-600",
9
9
  },
10
10
  color: {
11
11
  white: "text-white",
12
- grayscale: "text-gray-900",
12
+ black: "text-gray-900",
13
+ grayscale: "text-gray-900 dark:text-white",
13
14
  },
14
15
  interactive: {
15
16
  true: "cursor-pointer",
package/ui.loader/ULoader.vue CHANGED
@@ -29,7 +29,7 @@ const props = defineProps({
29
29
 
30
30
  /**
31
31
  * Loader color.
32
- * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
32
+ * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
33
33
  */
34
34
  color: {
35
35
  type: String,
package/ui.loader/config.js CHANGED
@@ -20,7 +20,8 @@ export default /*tw*/ {
20
20
  variants: {
21
21
  color: {
22
22
  white: "bg-white",
23
- grayscale: "bg-gray-900",
23
+ black: "bg-gray-900",
24
+ grayscale: "bg-gray-900 dark:bg-white",
24
25
  },
25
26
  size: {
26
27
  sm: `
package/ui.loader-overlay/ULoaderOverlay.vue CHANGED
@@ -38,7 +38,7 @@ const props = defineProps({
38
38
 
39
39
  /**
40
40
  * Loader color.
41
- * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
41
+ * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
42
42
  */
43
43
  color: {
44
44
  type: String,
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.505",
4
+ "version": "0.0.506",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -5411,6 +5411,7 @@
5411
5411
  "fuchsia",
5412
5412
  "pink",
5413
5413
  "rose",
5414
+ "black",
5414
5415
  "white"
5415
5416
  ],
5416
5417
  "value": {
@@ -7355,6 +7356,7 @@
7355
7356
  "fuchsia",
7356
7357
  "pink",
7357
7358
  "rose",
7359
+ "black",
7358
7360
  "white"
7359
7361
  ],
7360
7362
  "value": {
@@ -7425,6 +7427,7 @@
7425
7427
  "fuchsia",
7426
7428
  "pink",
7427
7429
  "rose",
7430
+ "black",
7428
7431
  "white"
7429
7432
  ],
7430
7433
  "value": {