vueless 0.0.622 → 0.0.624

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 (7) hide show
  1. package/package.json +1 -1
  2. package/ui.button/config.ts +7 -7
  3. package/ui.button-toggle/UToggle.vue +1 -0
  4. package/ui.button-toggle/types.ts +5 -0
  5. package/ui.button-toggle-item/UToggleItem.vue +12 -21
  6. package/ui.button-toggle-item/config.ts +3 -2
  7. package/web-types.json +10 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.622",
3
+ "version": "0.0.624",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
package/ui.button/config.ts CHANGED
@@ -64,8 +64,8 @@ export default /*tw*/ {
64
64
  {
65
65
  color: ["grayscale", "white"],
66
66
  class: `
67
- focus:ring-gray-500/10 dark:focus:ring-gray-400/10
68
- focus-within:ring-gray-500/10 dark:focus-within:ring-gray-400/10
67
+ focus:ring-gray-700/15 dark:focus:ring-gray-500/15
68
+ focus-within:ring-gray-700/15 dark:focus-within:ring-gray-500/15
69
69
  `,
70
70
  },
71
71
  {
@@ -93,9 +93,9 @@ export default /*tw*/ {
93
93
  variant: "thirdary",
94
94
  class: `
95
95
  text-gray-900 dark:text-gray-100
96
- hover:text-gray-800 hover:bg-gray-800/10 dark:hover:text-gray-200 dark:hover:bg-gray-200/10
97
- focus:text-gray-800 focus:bg-gray-800/10 dark:focus:text-gray-200 dark:focus:bg-gray-200/10
98
- active:text-gray-700 active:bg-gray-700/15 dark:active:text-gray-300 dark:active:bg-gray-300/15
96
+ hover:text-gray-800 hover:bg-gray-800/5 dark:hover:text-gray-200 dark:hover:bg-gray-200/5
97
+ focus:text-gray-800 focus:bg-gray-800/5 dark:focus:text-gray-200 dark:focus:bg-gray-200/5
98
+ active:text-gray-700 active:bg-gray-700/10 dark:active:text-gray-300 dark:active:bg-gray-300/10
99
99
  `,
100
100
  },
101
101
  {
@@ -127,8 +127,8 @@ export default /*tw*/ {
127
127
  variant: "thirdary",
128
128
  class: "hover:bg-white/10 focus:bg-white/10 active:bg-white/15",
129
129
  },
130
- { filled: true, variant: "thirdary", class: "bg-{color}-600/10 dark:bg-{color}-400/10" },
131
- { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-900/5 dark:bg-gray-200/5" },
130
+ { filled: true, variant: "thirdary", class: "bg-{color}-700/10 dark:bg-{color}-500/10" },
131
+ { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-800/5 dark:bg-gray-200/5" },
132
132
  { rightIcon: true, size: "2xs", class: "pr-1" },
133
133
  { rightIcon: true, size: "xs", class: "pr-2" },
134
134
  { rightIcon: true, size: "sm", class: "pr-3" },
package/ui.button-toggle/UToggle.vue CHANGED
@@ -61,6 +61,7 @@ provide("getToggleRound", () => props.round);
61
61
  provide("getToggleBlock", () => props.block);
62
62
  provide("getToggleSquare", () => props.square);
63
63
  provide("getToggleDisabled", () => props.disabled);
64
+ provide("getToggleNoRing", () => props.noRing);
64
65
  provide("getToggleSplit", () => props.split);
65
66
 
66
67
  provide("toggleSelectedValue", {
package/ui.button-toggle/types.ts CHANGED
@@ -76,6 +76,11 @@ export interface Props {
76
76
  */
77
77
  square?: boolean;
78
78
 
79
+ /**
80
+ * Remove button ring on focus.
81
+ */
82
+ noRing?: boolean;
83
+
79
84
  /**
80
85
  * Component config object.
81
86
  */
package/ui.button-toggle-item/UToggleItem.vue CHANGED
@@ -31,28 +31,19 @@ const emit = defineEmits([
31
31
  "update:modelValue",
32
32
  ]);
33
33
 
34
- /* eslint-disable prettier/prettier */
35
34
  const getToggleName = inject<() => string>("getToggleName", () => "toggle");
36
- const getToggleType = inject<() => string>("getToggleType", () =>
37
- getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).type || TYPE_RADIO
38
- );
39
- const getToggleSize = inject<() => ButtonSize>("getToggleSize", () =>
40
- (getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).size || "md") as ButtonSize
41
- );
42
- const getToggleRound = inject<() => boolean>("getToggleRound", () =>
43
- getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).round || false
44
- );
45
- const getToggleBlock = inject<() => boolean>("getToggleBlock", () =>
46
- getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).block || false
47
- );
48
- const getToggleSquare = inject<() => boolean>("getToggleSquare", () =>
49
- getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).square || false
50
- );
35
+ const getToggleType = inject<() => string>("getToggleType", () => TYPE_RADIO);
36
+ const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as ButtonSize);
37
+ const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
38
+ const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
39
+ const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
40
+ const getToggleNoRing = inject<() => boolean>("getToggleNoRing", () => true);
51
41
  const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
52
- const getToggleDisabled = inject<() => boolean>("getToggleDisabled", () =>
53
- props.disabled || getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).disabled || false
42
+
43
+ const getToggleDisabled = inject<() => boolean>(
44
+ "getToggleDisabled",
45
+ () => getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).disabled || false,
54
46
  );
55
- /* eslint-enable prettier/prettier */
56
47
 
57
48
  const { selectedValue, updateSelectedValue } = inject<ToggleContextType>("toggleSelectedValue", {
58
49
  selectedValue: ref(""),
@@ -113,12 +104,12 @@ const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<C
113
104
  color="brand"
114
105
  :for="elementId"
115
106
  :filled="getToggleSplit()"
116
- :no-ring="!getToggleSplit()"
117
107
  :size="getToggleSize()"
118
108
  :round="getToggleRound()"
119
109
  :block="getToggleBlock()"
120
110
  :square="getToggleSquare()"
121
111
  :disabled="getToggleDisabled() || disabled"
112
+ :no-ring="getToggleNoRing() || !getToggleSplit()"
122
113
  v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonAttrs"
123
114
  @click="onClickSetValue"
124
115
  >
@@ -135,7 +126,7 @@ const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<C
135
126
  :name="getToggleName()"
136
127
  :type="getToggleType()"
137
128
  :value="value"
138
- :disabled="getToggleDisabled()"
129
+ :disabled="getToggleDisabled() || disabled"
139
130
  v-bind="toggleInputAttrs"
140
131
  />
141
132
 
package/ui.button-toggle-item/config.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  export default /*tw*/ {
2
2
  toggleButton: {
3
- base: "{UButton} font-normal",
3
+ base: "{UButton} font-normal text-gray-900",
4
4
  defaults: {
5
5
  variant: "thirdary",
6
6
  },
7
7
  },
8
8
  toggleButtonActive: {
9
- base: "{UButton} {>toggleButton} !bg-{color}-800/15",
9
+ base: "{UButton} font-normal !bg-{color}-600/15",
10
10
  defaults: {
11
+ variant: "thirdary",
11
12
  filled: true,
12
13
  },
13
14
  },
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.622",
4
+ "version": "0.0.624",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -11648,6 +11648,15 @@
11648
11648
  },
11649
11649
  "default": "false"
11650
11650
  },
11651
+ {
11652
+ "name": "noRing",
11653
+ "required": false,
11654
+ "description": "Remove button ring on focus.",
11655
+ "value": {
11656
+ "kind": "expression",
11657
+ "type": "boolean"
11658
+ }
11659
+ },
11651
11660
  {
11652
11661
  "name": "config",
11653
11662
  "required": false,