vueless 1.3.3 → 1.3.4-beta.1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "1.3.3",
3
+ "version": "1.3.4-beta.1",
4
4
  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
5
5
  "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
6
6
  "homepage": "https://vueless.com",
@@ -125,8 +125,9 @@ const {
125
125
  <!--
126
126
  @slot Use it to add custom title content.
127
127
  @binding {string} title
128
+ @binding {boolean} opened
128
129
  -->
129
- <slot name="title" :title="title">
130
+ <slot name="title" :title="title" :opened="isOpened">
130
131
  {{ title }}
131
132
  </slot>
132
133
  <!--
@@ -149,8 +150,9 @@ const {
149
150
  <!--
150
151
  @slot Use it to add custom description content.
151
152
  @binding {string} description
153
+ @binding {boolean} opened
152
154
  -->
153
- <slot name="description" :description="description">
155
+ <slot name="description" :description="description" :opened="isOpened">
154
156
  {{ description }}
155
157
  </slot>
156
158
  </div>
@@ -1,6 +1,6 @@
1
1
  export default /*tw*/ {
2
2
  wrapper: {
3
- base: "group cursor-pointer py-5 first:pt-0 last:pb-0",
3
+ base: "group/item cursor-pointer py-5 first:pt-0 last:pb-0",
4
4
  variants: {
5
5
  disabled: {
6
6
  true: "cursor-not-allowed text-default/(--vl-disabled-opacity)",
@@ -39,7 +39,7 @@ export default /*tw*/ {
39
39
  base: "{UIcon} transition duration-300",
40
40
  variants: {
41
41
  opened: {
42
- true: "group-[*]:rotate-180",
42
+ true: "group-[*]/group:rotate-180",
43
43
  },
44
44
  },
45
45
  },
@@ -154,6 +154,24 @@ function onInput() {
154
154
  setInputSize();
155
155
  }
156
156
 
157
+ function onKeyDown(event: KeyboardEvent) {
158
+ if (event.key === "ArrowUp") {
159
+ event.preventDefault();
160
+
161
+ if (!isAddButtonDisabled.value && !props.disabled) {
162
+ onClickAdd();
163
+ }
164
+ }
165
+
166
+ if (event.key === "ArrowDown") {
167
+ event.preventDefault();
168
+
169
+ if (!isSubtractButtonDisabled.value && !props.disabled) {
170
+ onClickSubtract();
171
+ }
172
+ }
173
+ }
174
+
157
175
  function setInputSize() {
158
176
  if (inputComponentRef.value && !props.readonly) {
159
177
  inputComponentRef.value.inputRef?.setAttribute(
@@ -222,6 +240,7 @@ const {
222
240
  @focus="onFocus"
223
241
  @blur="onBlur"
224
242
  @input="onInput"
243
+ @keydown="onKeyDown"
225
244
  />
226
245
 
227
246
  <UButton
@@ -1,6 +1,6 @@
1
1
  export default /*tw*/ {
2
2
  wrapper: {
3
- base: "flex w-full group",
3
+ base: "flex w-full group/label",
4
4
  variants: {
5
5
  align: {
6
6
  topInside: "flex-col gap-0 relative",
@@ -40,7 +40,7 @@ export default /*tw*/ {
40
40
  right: "font-normal",
41
41
  },
42
42
  error: {
43
- true: "text-error group-focus-within:!text-error",
43
+ true: "text-error group-focus-within/label:!text-error",
44
44
  },
45
45
  disabled: {
46
46
  true: "text-lifted cursor-not-allowed",
@@ -58,7 +58,7 @@ export default /*tw*/ {
58
58
  { align: ["left", "right"], size: "md", class: "text-medium" },
59
59
  { align: ["left", "right"], size: "lg", class: "mt-px text-large" },
60
60
  { align: ["left", "right"], centred: false, class: "pt-1" },
61
- { align: "topInside", disabled: false, class: "group-focus-within:text-primary" },
61
+ { align: "topInside", disabled: false, class: "group-focus-within/label:text-primary" },
62
62
  ],
63
63
  },
64
64
  description: {