vueless 0.0.621 → 0.0.623

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/package.json +1 -1
  2. package/ui.button-toggle/UToggle.vue +1 -0
  3. package/ui.button-toggle/types.ts +5 -0
  4. package/ui.button-toggle-item/UToggleItem.vue +13 -22
  5. package/ui.button-toggle-item/config.ts +1 -9
  6. package/web-types.json +10 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.621",
3
+ "version": "0.0.623",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
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(""),
@@ -110,15 +101,15 @@ const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<C
110
101
  <UButton
111
102
  :label="label"
112
103
  tabindex="0"
113
- color="brand"
104
+ :color="isSelected ? 'brand' : 'grayscale'"
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
@@ -6,16 +6,8 @@ export default /*tw*/ {
6
6
  },
7
7
  },
8
8
  toggleButtonActive: {
9
- base: "{UButton} {>toggleButton}",
10
- button: {
11
- variants: {
12
- variant: {
13
- thirdary: "!bg-{color}-800/15",
14
- },
15
- },
16
- },
9
+ base: "{UButton} {>toggleButton} !bg-{color}-800/15",
17
10
  defaults: {
18
- variant: "thirdary",
19
11
  filled: true,
20
12
  },
21
13
  },
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.621",
4
+ "version": "0.0.623",
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,