vueless 0.0.136 → 0.0.138

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 (5) hide show
  1. package/package.json +1 -1
  2. package/preset.tailwind/index.js +1 -1
  3. package/ui.button/configs/default.config.js +89 -91
  4. package/ui.button/index.vue +1 -1
  5. package/web-types.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.136",
3
+ "version": "0.0.138",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless Component Framework.",
6
6
  "homepage": "https://vueless.com",
package/preset.tailwind/index.js CHANGED
@@ -26,7 +26,7 @@ export function vuelessPreset() {
26
26
  const devSafelist = [
27
27
  {
28
28
  pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
29
- variants: ["hover", "focus", "focus-within", "active"],
29
+ variants: ["hover", "focus", "focus-within", "active", "disabled"],
30
30
  },
31
31
  ];
32
32
 
package/ui.button/configs/default.config.js CHANGED
@@ -2,43 +2,45 @@ export default /*tw*/ {
2
2
  button: {
3
3
  base: `
4
4
  flex items-center justify-center
5
- text-base font-medium rounded-lg outline-none
5
+ text-base font-medium outline-none
6
+ border border-solid rounded-lg
6
7
  transition duration-100 ease-in-out
7
- focus:ring-4 focus:ring-opacity-10 focus:outline-none
8
+ focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700 focus:outline-none
9
+ disabled:ring-0 disabled:cursor-no-drop
8
10
  `,
9
11
  variants: {
10
12
  size: {
11
- xs: "px-2 py-1.5 text-xs leading-tight",
12
- sm: "px-3 py-2.5 text-sm leading-tight",
13
- md: "px-4 py-3.5 text-base leading-tight",
14
- lg: "px-5 py-[1.125rem] text-lg leading-tight",
13
+ "2xs": "px-3 py-1 text-2xs leading-tight gap-1",
14
+ xs: "px-4 py-1.5 text-xs leading-tight gap-1.5",
15
+ sm: "px-5 py-2.5 text-sm leading-tight gap-1.5",
16
+ md: "px-6 py-3.5 text-base leading-tight gap-2",
17
+ lg: "px-7 py-4 text-lg leading-tight gap-2.5",
18
+ xl: "px-8 py-5 text-xl leading-tight gap-2.5",
15
19
  },
16
20
  variant: {
17
21
  primary: `
18
- border border-solid border-{color}-500 bg-{color}-500 text-white
19
- focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
20
- focus:ring-{color}-500
21
- hover:border-{color}-500 hover:bg-{color}-500
22
- hover:border-opacity-0 hover:bg-opacity-80
23
- active:border-{color}-500 active:bg-{color}-500
24
- active:border-opacity-0 active:bg-opacity-70`,
22
+ text-white
23
+ bg-{color}-600 border-{color}-600
24
+ hover:bg-{color}-700 hover:border-{color}-700
25
+ focus:bg-{color}-700 focus:border-{color}-700
26
+ active:bg-{color}-800 active:border-{color}-800
27
+ disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
28
+ `,
25
29
  secondary: `
26
- border border-solid bg-transparent
27
- border-{color}-500 text-{color}-500
28
- focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
29
- focus:text-opacity-80 focus:border-opacity-80
30
- hover:border-{color}-500 hover:text-{color}-500
31
- hover:text-opacity-80 hover:border-opacity-80
32
- active:border-{color}-500 active:text-{color}-500
33
- active:border-opacity-70 active:text-opacity-70`,
30
+ text-{color}-600 border-{color}-600
31
+ hover:text-{color}-700 hover:border-{color}-700
32
+ focus:text-{color}-700 focus:border-{color}-700
33
+ active:text-{color}-800 active:border-{color}-800
34
+ disabled:text-{color}-300 disabled:border-{color}-300
35
+ `,
34
36
  thirdary: `
35
- border border-transparent bg-transparent text-{color}-500
36
- focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
37
- focus:text-opacity-70 focus:bg-opacity-5
38
- hover:text-{color}-500 hover:bg-{color}-500
39
- hover:text-opacity-70 hover:bg-opacity-10
40
- active:text-{color}-500 active:bg-{color}-500
41
- active:text-opacity-60 active:bg-opacity-15`,
37
+ border-transparent
38
+ text-{color}-600
39
+ hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
40
+ focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10
41
+ active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15
42
+ disabled:text-{color}-300
43
+ `,
42
44
  },
43
45
  loading: {
44
46
  true: "pointer-events-none",
@@ -49,107 +51,93 @@ export default /*tw*/ {
49
51
  block: {
50
52
  true: "w-full",
51
53
  },
54
+ color: {
55
+ grayscale: "focus:ring-gray-800 disabled:text-gray-400",
56
+ white: "focus:ring-gray-800 disabled:text-gray-400",
57
+ },
52
58
  },
53
59
  compoundVariants: [
54
- {
55
- disabled: true,
56
- variant: "primary",
57
- class: `
58
- border-opacity-0 bg-opacity-40 cursor-no-drop text-white
59
- hover:bg-opacity-40
60
- focus:bg-opacity-40 focus:ring-0
61
- active:bg-opacity-40 active:ring-0
62
- `,
63
- },
64
- {
65
- disabled: true,
66
- variant: "secondary",
67
- class: `
68
- text-opacity-40 border-opacity-40 cursor-no-drop
69
- hover:text-opacity-40 hover:border-opacity-40
70
- focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
71
- active:text-opacity-40 active:border-opacity-40 active:ring-0
72
- `,
73
- },
74
- {
75
- disabled: true,
76
- variant: "thirdary",
77
- class: `
78
- bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
79
- hover:bg-opacity-5 hover:text-opacity-40
80
- focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
81
- active:bg-opacity-5 active:ring-0 active:text-opacity-40
82
- `,
83
- },
84
60
  {
85
61
  color: "grayscale",
86
62
  variant: "primary",
87
63
  class: `
88
- border-gray-900 bg-gray-900
89
- hover:border-gray-900 hover:bg-gray-900
90
- focus:border-gray-900 focus:ring-gray-900/20
91
- active:border-gray-900 active:bg-gray-900`,
64
+ bg-gray-900 border-gray-900
65
+ hover:bg-gray-800 hover:border-gray-800
66
+ focus:bg-gray-800 focus:border-gray-800
67
+ active:bg-gray-700 active:border-gray-700
68
+ disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
69
+ `,
92
70
  },
93
71
  {
94
72
  color: "grayscale",
95
73
  variant: "secondary",
96
74
  class: `
97
75
  text-gray-900 border-gray-900
98
- hover:border-gray-900 hover:text-gray-900
99
- focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
100
- active:border-gray-900 active:text-gray-900`,
76
+ hover:text-gray-800 hover:border-gray-800
77
+ focus:text-gray-800 focus:border-gray-800
78
+ active:text-gray-700 active:border-gray-700
79
+ disabled:border-gray-400
80
+ `,
101
81
  },
102
82
  {
103
83
  color: "grayscale",
104
84
  variant: "thirdary",
105
85
  class: `
106
86
  text-gray-900
107
- focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
108
87
  hover:text-gray-800 hover:bg-gray-800
109
- active:text-gray-800 active:bg-gray-800`,
88
+ focus:text-gray-800 focus:bg-gray-800
89
+ active:text-gray-700 active:bg-gray-700
90
+ disabled:bg-transparent
91
+ `,
110
92
  },
111
93
  {
112
94
  color: "white",
113
95
  variant: "primary",
114
96
  class: `
115
- border-white bg-white text-gray-500
116
- focus:ring-white focus:border-white focus:bg-white
117
- hover:border-white hover:bg-white
118
- active:border-white active:bg-white`,
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
+ `,
119
102
  },
120
103
  {
121
104
  color: "white",
122
105
  variant: "secondary",
123
106
  class: `
124
- border-white bg-transparent text-white
125
- focus:border-white focus:ring-white
126
- hover:border-white
127
- active:border-white`,
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
+ `,
128
112
  },
129
113
  {
130
114
  color: "white",
131
115
  variant: "thirdary",
132
116
  class: `
133
- border-transparent bg-transparent text-white
134
- focus:bg-white focus:ring-white
135
- hover:bg-white
136
- active:bg-white`,
117
+ text-gray-900
118
+ hover:text-gray-800 hover:bg-white
119
+ focus:text-gray-800 focus:bg-white
120
+ active:text-gray-700 active:bg-white
121
+ disabled:bg-transparent
122
+ `,
137
123
  },
138
- { filled: true, variant: "thirdary", class: "bg-{color}-500 bg-opacity-5" },
139
- { filled: true, variant: "thirdary", color: "white", class: "bg-white" },
140
- { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900" },
124
+ { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
125
+ { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
126
+ { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
141
127
  { square: true, size: "xs", class: "p-1" },
142
- { square: true, size: "sm", class: "p-2" },
143
- { square: true, size: "md", class: "p-3" },
144
- { square: true, size: "lg", class: "py-4" },
128
+ { square: true, size: "xs", class: "p-1.5" },
129
+ { square: true, size: "sm", class: "p-2.5" },
130
+ { square: true, size: "md", class: "p-3.5" },
131
+ { square: true, size: "lg", class: "p-4" },
132
+ { square: true, size: "lg", class: "p-5" },
145
133
  ],
146
134
  },
147
- text: "whitespace-nowrap px-1.5",
135
+ text: "whitespace-nowrap",
148
136
  defaultVariants: {
149
137
  color: "brand",
150
138
  variant: "primary",
151
- size: "md",
152
139
  tag: "button",
140
+ size: "md",
153
141
  pill: false,
154
142
  block: false,
155
143
  square: false,
@@ -158,9 +146,19 @@ export default /*tw*/ {
158
146
  disabled: false,
159
147
  },
160
148
  safelist: (colors) => [
161
- { pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
162
- { pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
163
- { pattern: `ring-(${colors})-500`, variants: ["focus"] },
164
- { pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
149
+ { pattern: `border-(${colors})-600` },
150
+ { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
151
+ { pattern: `border-(${colors})-800`, variants: ["active"] },
152
+ { pattern: `border-(${colors})-300`, variants: ["disabled"] },
153
+ { pattern: `bg-(${colors})-600` },
154
+ { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
155
+ { pattern: `bg-(${colors})-800`, variants: ["active"] },
156
+ { pattern: `bg-(${colors})-300`, variants: ["disabled"] },
157
+ { pattern: `text-(${colors})-600` },
158
+ { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
159
+ { pattern: `text-(${colors})-800`, variants: ["active"] },
160
+ { pattern: `text-(${colors})-300`, variants: ["disabled"] },
161
+ { pattern: `ring-(${colors})-700`, variants: ["focus"] },
162
+ { pattern: `ring-(${colors})-800`, variants: ["active"] },
165
163
  ],
166
164
  };
package/ui.button/index.vue CHANGED
@@ -65,7 +65,7 @@ const props = defineProps({
65
65
 
66
66
  /**
67
67
  * Button size.
68
- * @values xs, sm, md, lg
68
+ * @values 2xs, xs, sm, md, lg, xl
69
69
  */
70
70
  size: {
71
71
  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.136",
4
+ "version": "0.0.138",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -576,7 +576,7 @@
576
576
  "description": "Button size.",
577
577
  "value": {
578
578
  "kind": "expression",
579
- "type": "'xs' | 'sm' | 'md' | 'lg'"
579
+ "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
580
580
  },
581
581
  "default": "md"
582
582
  },