@veritree/ui 0.27.0-0 → 0.27.0-2

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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/components/Button/VTButton.vue +30 -25
  3. package/src/components/Image/VTImage.vue +34 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritree/ui",
3
- "version": "0.27.0-0",
3
+ "version": "0.27.0-2",
4
4
  "description": "veritree ui library",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -18,7 +18,7 @@
18
18
  "@veritree/icons": "^0.45.1"
19
19
  },
20
20
  "devDependencies": {
21
- "@nuxt/kit": "^3.0.0",
21
+ "@nuxt/kit": "^3.11.2",
22
22
  "np": "^8.0.4",
23
23
  "prettier": "^2.7.1",
24
24
  "prettier-plugin-tailwindcss": "^0.1.13",
package/src/components/Button/VTButton.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <component
4
4
  :is="tag"
5
5
  :to="to"
6
+ :href="href || to"
6
7
  :type="type"
7
8
  :disabled="isDisabled"
8
9
  :class="[
@@ -10,36 +11,36 @@
10
11
  headless
11
12
  ? 'button'
12
13
  : isIcon
13
- ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
14
- : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
14
+ ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
15
+ : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
15
16
  // variant styles
16
17
  headless
17
18
  ? `button--${variant}`
18
19
  : isPrimary
19
- ? 'bg-secondary-400 hover:bg-secondary-500 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
20
- : isSecondary
21
- ? isGhost
22
- ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
23
- : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
24
- : isTertiary
25
- ? 'text-secondary-400 hover:text-secondary-500 active:text-secondary-500 border-transparent disabled:text-gray-400'
26
- : isDark
27
- ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
28
- : isIcon
29
- ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
30
- : null,
20
+ ? 'bg-secondary-400 hover:bg-secondary-500 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
21
+ : isSecondary
22
+ ? isGhost
23
+ ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
24
+ : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
25
+ : isTertiary
26
+ ? 'text-secondary-400 hover:text-secondary-500 active:text-secondary-500 border-transparent disabled:text-gray-400'
27
+ : isDark
28
+ ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
29
+ : isIcon
30
+ ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
31
+ : null,
31
32
  // sizes styles
32
33
  headless
33
34
  ? `button--${size}`
34
35
  : isLarge
35
- ? isIcon
36
- ? 'h-8 w-8'
37
- : 'h-12 sm:h-10'
38
- : isSmall
39
- ? isIcon
40
- ? 'h-6 w-6 p-1'
41
- : 'h-8'
42
- : null,
36
+ ? isIcon
37
+ ? 'h-8 w-8'
38
+ : 'h-12 sm:h-10'
39
+ : isSmall
40
+ ? isIcon
41
+ ? 'h-6 w-6 p-1'
42
+ : 'h-8'
43
+ : null,
43
44
  ]"
44
45
  >
45
46
  <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
@@ -71,6 +72,10 @@ export default {
71
72
  type: String,
72
73
  default: 'large',
73
74
  },
75
+ href: {
76
+ type: [String, Object],
77
+ default: null,
78
+ },
74
79
  to: {
75
80
  type: [String, Object],
76
81
  default: null,
@@ -131,11 +136,11 @@ export default {
131
136
  },
132
137
 
133
138
  tag() {
134
- return this.$attrs.href
139
+ return this.href
135
140
  ? 'a'
136
141
  : this.to
137
- ? resolveComponent('NuxtLink')
138
- : 'button';
142
+ ? resolveComponent('NuxtLink')
143
+ : 'button';
139
144
  },
140
145
 
141
146
  type() {
package/src/components/Image/VTImage.vue CHANGED
@@ -1,7 +1,14 @@
1
1
  <template>
2
2
  <img
3
- :src="srcLoaded"
4
- :class="classComputed"
3
+ :src="srcComputed"
4
+ :class="[
5
+ headless ? null : isLoaded ? null : 'animate-pulse',
6
+ headless
7
+ ? null
8
+ : hasObjectFit
9
+ ? `h-full w-full ${objectFitComputed}`
10
+ : null,
11
+ ]"
5
12
  v-bind="$attrs"
6
13
  @load="onLoad"
7
14
  @error="onError"
@@ -11,7 +18,6 @@
11
18
  <script>
12
19
  import { handleImageResizing } from '../../utils/images';
13
20
 
14
- // @ts-ignore
15
21
  export default {
16
22
  name: 'VTImage',
17
23
 
@@ -42,74 +48,54 @@ export default {
42
48
  return {
43
49
  canLoad: true,
44
50
  isLoaded: false,
45
- srcLoaded: this.placeholder,
46
51
  };
47
52
  },
48
53
 
49
54
  computed: {
55
+ srcComputed() {
56
+ if (!this.isLoaded) {
57
+ return this.placeholder;
58
+ } else {
59
+ if (!this.canLoad) {
60
+ return this.placeholder;
61
+ }
62
+
63
+ if (this.src) {
64
+ return this.src.includes('cloudfront.net/')
65
+ ? handleImageResizing(this.src, this.$attrs.width)
66
+ : this.src;
67
+ }
68
+
69
+ if (this.cdnSrc) {
70
+ return handleImageResizing(this.cdnSrc, this.$attrs.width);
71
+ }
72
+ }
73
+
74
+ return null;
75
+ },
76
+
50
77
  hasObjectFit() {
51
78
  return this.objectFit;
52
79
  },
53
80
 
54
81
  objectFitComputed() {
55
- // @ts-ignore
56
82
  return this.hasObjectFit
57
83
  ? this.objectFit === 'cover'
58
84
  ? 'object-cover'
59
85
  : this.objectFit === 'contain'
60
- ? 'object-contain'
61
- : null
86
+ ? 'object-contain'
87
+ : null
62
88
  : null;
63
89
  },
64
-
65
- classComputed() {
66
- let classList = [];
67
-
68
- if (!this.headless) {
69
- if (!this.isLoaded) {
70
- classList.push('animate-pulse');
71
- }
72
-
73
- // @ts-ignore
74
- if (this.hasObjectFit) {
75
- classList.push('h-full', 'w-full', this.objectFitComputed);
76
- }
77
- }
78
-
79
- // Remove 'animate-pulse' if isLoaded is true
80
- if (this.isLoaded && classList.includes('animate-pulse')) {
81
- classList.splice(classList.indexOf('animate-pulse'), 1);
82
- }
83
-
84
- return classList.length > 0 ? classList.join(' ') : null;
85
- },
86
- },
87
-
88
- mounted() {
89
- this.handleImage();
90
90
  },
91
91
 
92
92
  methods: {
93
- handleImage() {
94
- if (this.src) {
95
- this.srcLoaded = this.src.includes('cloudfront.net/')
96
- ? handleImageResizing(this.src, this.$attrs.width)
97
- : this.src;
98
- }
99
-
100
- if (this.cdnSrc) {
101
- this.srcLoaded = handleImageResizing(this.cdnSrc, this.$attrs.width);
102
- }
103
- },
104
-
105
- handleImageResizing,
106
-
107
93
  onLoad() {
108
94
  this.isLoaded = true;
109
- this.$emit('loaded');
110
95
  },
111
96
 
112
97
  onError() {
98
+ this.canLoad = false;
113
99
  this.$emit('error');
114
100
  },
115
101
  },