@fastkit/vui 0.16.33 → 0.16.35

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 (14) hide show
  1. package/dist/vui.css +6 -6
  2. package/dist/vui.d.ts +228 -122
  3. package/dist/vui.mjs +29 -40
  4. package/dist/vui.mjs.map +1 -1
  5. package/package.json +19 -19
  6. package/src/components/VAvatar/VAvatar.scss +2 -2
  7. package/src/components/VAvatar/VAvatar.tsx +12 -13
  8. package/src/components/VButton/VButton.scss +6 -2
  9. package/src/components/VButton/VButton.tsx +24 -15
  10. package/src/components/VCard/VCard.scss +2 -3
  11. package/src/components/VChip/VChip.scss +0 -18
  12. package/src/components/VChip/VChip.tsx +14 -16
  13. package/src/components/VListTile/VListTile.tsx +1 -1
  14. package/src/components/VOption/VOption.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastkit/vui",
3
- "version": "0.16.33",
3
+ "version": "0.16.35",
4
4
  "description": "A simple, extensible UI kit for Vue applications.",
5
5
  "keywords": [
6
6
  "fastkit",
@@ -45,30 +45,30 @@
45
45
  ],
46
46
  "dependencies": {
47
47
  "@fastkit/color-scheme": "1.0.10",
48
- "@fastkit/color-scheme-gen": "0.13.10",
49
48
  "@fastkit/dom": "0.1.3",
50
- "@fastkit/helpers": "0.13.3",
51
49
  "@fastkit/icon-font": "1.0.9",
52
- "@fastkit/media-match": "1.0.9",
50
+ "@fastkit/color-scheme-gen": "0.13.10",
53
51
  "@fastkit/media-match-gen": "0.13.10",
52
+ "@fastkit/media-match": "1.0.9",
54
53
  "@fastkit/rules": "0.13.4",
55
- "@fastkit/stylebase": "0.13.1",
54
+ "@fastkit/helpers": "0.13.3",
56
55
  "@fastkit/tiny-logger": "0.13.3",
57
- "@fastkit/vue-action": "0.2.6",
58
- "@fastkit/vue-app-layout": "0.14.5",
59
- "@fastkit/vue-body-scroll-lock": "0.1.6",
60
- "@fastkit/vue-click-outside": "0.1.6",
61
- "@fastkit/vue-color-scheme": "0.14.6",
62
- "@fastkit/vue-form-control": "0.15.22",
56
+ "@fastkit/vue-action": "0.2.7",
57
+ "@fastkit/vue-body-scroll-lock": "0.1.7",
58
+ "@fastkit/stylebase": "0.13.1",
59
+ "@fastkit/vue-app-layout": "0.14.6",
60
+ "@fastkit/vue-form-control": "0.15.24",
61
+ "@fastkit/vue-loading": "0.14.8",
62
+ "@fastkit/vue-click-outside": "0.1.7",
63
+ "@fastkit/vue-color-scheme": "0.14.7",
64
+ "@fastkit/vue-location": "0.1.7",
65
+ "@fastkit/vue-resize": "0.1.7",
66
+ "@fastkit/vue-scroller": "0.14.6",
67
+ "@fastkit/vue-stack": "0.15.18",
63
68
  "@fastkit/vue-keyboard": "0.1.3",
64
- "@fastkit/vue-loading": "0.14.7",
65
- "@fastkit/vue-location": "0.1.6",
66
- "@fastkit/vue-media-match": "0.13.10",
67
- "@fastkit/vue-resize": "0.1.6",
68
- "@fastkit/vue-scroller": "0.14.5",
69
- "@fastkit/vue-stack": "0.15.17",
70
- "@fastkit/vue-transitions": "0.1.7",
71
- "@fastkit/vue-utils": "0.14.4"
69
+ "@fastkit/vue-utils": "0.14.5",
70
+ "@fastkit/vue-transitions": "0.1.8",
71
+ "@fastkit/vue-media-match": "0.13.10"
72
72
  },
73
73
  "peerDependencies": {
74
74
  "vue": "^3.3.0",
package/src/components/VAvatar/VAvatar.scss CHANGED
@@ -56,14 +56,14 @@
56
56
  --avatar-radius: 0;
57
57
  }
58
58
 
59
- // &[disabled] {
59
+ // &[disabled],
60
+ // [aria-disabled="true"] {
60
61
  // pointer-events: none;
61
62
 
62
63
  // &::before {
63
64
  // content: none;
64
65
  // }
65
66
  // }
66
- // // noop
67
67
 
68
68
  img,
69
69
  &__image {
package/src/components/VAvatar/VAvatar.tsx CHANGED
@@ -40,10 +40,6 @@ export const VAvatar = defineComponent({
40
40
  color: () => props.color || defaults.color,
41
41
  variant: () => props.variant || defaults.variant,
42
42
  });
43
- const actionable = useActionable(ctx, {
44
- clickableClassName: () => 'v-avatar--clickable',
45
- linkFallbackTag: 'div',
46
- });
47
43
 
48
44
  const classes = computed(() => {
49
45
  const { size } = props;
@@ -65,17 +61,20 @@ export const VAvatar = defineComponent({
65
61
  };
66
62
  });
67
63
 
64
+ const actionable = useActionable(ctx, {
65
+ attrs: () => ({
66
+ class: ['v-avatar', classes.value, color.colorClasses.value],
67
+ style: styles.value,
68
+ }),
69
+ actionableClass: () => 'v-avatar--clickable',
70
+ linkFallbackTag: 'div',
71
+ });
72
+
68
73
  return () => {
69
74
  const { src } = props;
70
- const { Tag, attrs } = actionable.value;
71
- return (
72
- <Tag
73
- {...attrs}
74
- class={['v-avatar', classes.value, color.colorClasses.value]}
75
- style={styles.value}>
76
- {(!!src && <VBusyImage class="v-avatar__image" src={src} cover />) ||
77
- ctx.slots.default?.()}
78
- </Tag>
75
+ return actionable.render(
76
+ (!!src && <VBusyImage class="v-avatar__image" src={src} cover />) ||
77
+ ctx.slots.default?.(),
79
78
  );
80
79
  };
81
80
  },
package/src/components/VButton/VButton.scss CHANGED
@@ -58,7 +58,9 @@
58
58
 
59
59
  // color: inherit !important;
60
60
 
61
- &[disabled] {
61
+ &[disabled],
62
+ &[aria-disabled='true'],
63
+ &.v-button--guard-in-progress {
62
64
  opacity: 0.5;
63
65
  }
64
66
  }
@@ -107,7 +109,9 @@
107
109
  border: 0;
108
110
  }
109
111
 
110
- &[disabled] {
112
+ &[disabled],
113
+ &[aria-disabled='true'],
114
+ &.v-button--guard-in-progress {
111
115
  cursor: default;
112
116
  }
113
117
 
package/src/components/VButton/VButton.tsx CHANGED
@@ -131,21 +131,30 @@ export const VButton = defineComponent({
131
131
 
132
132
  return () => {
133
133
  return (
134
- <VAction {...ctx.attrs} class={['v-button', classes.value]}>
135
- <span class="v-button__content">
136
- {startIcon.value}
137
- {ctx.slots.default?.()}
138
- {icon.value}
139
- {endIcon.value}
140
- </span>
141
- {isLoading.value && (
142
- <VProgressCircular
143
- class="v-button__loading"
144
- indeterminate
145
- size={LOADING_SIZE_MAP[control.size.value]}
146
- />
147
- )}
148
- </VAction>
134
+ <VAction
135
+ {...ctx.attrs}
136
+ class={['v-button', classes.value]}
137
+ guardInProgressClass="v-button--guard-in-progress"
138
+ v-slots={{
139
+ default: () => (
140
+ <>
141
+ <span class="v-button__content">
142
+ {startIcon.value}
143
+ {ctx.slots.default?.()}
144
+ {icon.value}
145
+ {endIcon.value}
146
+ </span>
147
+ {isLoading.value && (
148
+ <VProgressCircular
149
+ class="v-button__loading"
150
+ indeterminate
151
+ size={LOADING_SIZE_MAP[control.size.value]}
152
+ />
153
+ )}
154
+ </>
155
+ ),
156
+ }}
157
+ />
149
158
  );
150
159
  };
151
160
  },
package/src/components/VCard/VCard.scss CHANGED
@@ -41,14 +41,13 @@
41
41
  }
42
42
  }
43
43
 
44
- &[disabled] {
44
+ &[disabled],
45
+ &[aria-disabled='true'] {
45
46
  pointer-events: none;
46
47
 
47
48
  &::before {
48
49
  content: none;
49
50
  }
50
51
  }
51
-
52
- // noop
53
52
  }
54
53
  }
package/src/components/VChip/VChip.scss CHANGED
@@ -43,24 +43,6 @@
43
43
  --chip-radius: 4px;
44
44
  }
45
45
 
46
- // &[disabled] {
47
- // pointer-events: none;
48
-
49
- // &::before {
50
- // content: none;
51
- // }
52
- // }
53
- // // noop
54
-
55
- // img,
56
- // &__image {
57
- // display: inline-flex;
58
- // width: inherit !important;
59
- // height: inherit !important;
60
- // border-radius: inherit;
61
- // object-fit: cover;
62
- // }
63
-
64
46
  &__icon {
65
47
  &--start {
66
48
  margin-right: calc(var(--chip-padding) * 0.5);
package/src/components/VChip/VChip.tsx CHANGED
@@ -72,10 +72,6 @@ export const VChip = defineComponent({
72
72
  const _icon = resolveRawVChipIcon(props.endIcon, 'end');
73
73
  return _icon && _icon();
74
74
  });
75
- const actionable = useActionable(ctx, {
76
- clickableClassName: () => 'v-chip--clickable',
77
- linkFallbackTag: 'div',
78
- });
79
75
 
80
76
  const classes = computed(() => {
81
77
  const { size } = props;
@@ -87,17 +83,19 @@ export const VChip = defineComponent({
87
83
  ];
88
84
  });
89
85
 
90
- return () => {
91
- const { Tag, attrs } = actionable.value;
92
- return (
93
- <Tag
94
- {...attrs}
95
- class={['v-chip', classes.value, color.colorClasses.value]}>
96
- {startIcon.value}
97
- <span class="v-chip__content">{ctx.slots.default?.()}</span>
98
- {endIcon.value}
99
- </Tag>
100
- );
101
- };
86
+ const actionable = useActionable(ctx, {
87
+ attrs: () => ({
88
+ class: ['v-chip', classes.value, color.colorClasses.value],
89
+ }),
90
+ actionableClass: () => 'v-chip--clickable',
91
+ linkFallbackTag: 'div',
92
+ });
93
+
94
+ return () =>
95
+ actionable.render([
96
+ startIcon.value,
97
+ <span class="v-chip__content">{ctx.slots.default?.()}</span>,
98
+ endIcon.value,
99
+ ]);
102
100
  },
103
101
  });
package/src/components/VListTile/VListTile.tsx CHANGED
@@ -102,7 +102,7 @@ export const VListTile = defineComponent({
102
102
  <VAction
103
103
  {...ctx.attrs}
104
104
  class={['v-list-tile', classes.value]}
105
- clickableClassName="v-list-tile--clickable">
105
+ actionableClass="v-list-tile--clickable">
106
106
  {_startIcon && (
107
107
  <span class="v-list-tile__icon v-list-tile__icon--start">
108
108
  {_startIcon}
package/src/components/VOption/VOption.scss CHANGED
@@ -61,6 +61,7 @@
61
61
  }
62
62
 
63
63
  &[disabled],
64
+ &[aria-disabled='true'],
64
65
  &[tabindex='-1'] {
65
66
  color: var(--palette-muted);
66
67
  pointer-events: none;