tide-design-system 2.0.52 → 2.0.53

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/dist/tide-design-system.cjs +2 -2
  2. package/dist/tide-design-system.esm.d.ts +2 -1
  3. package/dist/tide-design-system.esm.js +67 -62
  4. package/package.json +1 -1
  5. package/src/components/TideImage.vue +12 -4
  6. package/src/stories/TideImage.stories.ts +5 -5
  7. package/src/types/Styles.ts +2 -1
package/package.json CHANGED
@@ -61,5 +61,5 @@
61
61
  "main": "dist/tide-design-system.cjs",
62
62
  "module": "dist/tide-design-system.esm.js",
63
63
  "types": "dist/tide-design-system.esm.d.ts",
64
- "version": "2.0.52"
64
+ "version": "2.0.53"
65
65
  }
package/src/components/TideImage.vue CHANGED
@@ -41,7 +41,17 @@
41
41
  </script>
42
42
 
43
43
  <template>
44
- <picture :class="['tide-image', CSS.DISPLAY.BLOCK]">
44
+ <picture
45
+ :class="['tide-image', CSS.DISPLAY.BLOCK]"
46
+ :style="
47
+ width || height
48
+ ? {
49
+ width: width || undefined,
50
+ height: height || undefined,
51
+ }
52
+ : undefined
53
+ "
54
+ >
45
55
  <source
46
56
  :key="source.srcset"
47
57
  :media="`(min-width:${source.media}px)`"
@@ -51,13 +61,11 @@
51
61
 
52
62
  <img
53
63
  :alt="alt"
54
- :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
64
+ :class="[CSS.WIDTH.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
55
65
  :fetchpriority="isLazy ? undefined : 'high'"
56
- :height="height"
57
66
  :loading="props.isLazy ? 'lazy' : 'eager'"
58
67
  ref="tideImage"
59
68
  :src="src ?? imageDefault"
60
- :width="width"
61
69
  @error="setImageFromDefault"
62
70
  />
63
71
  </picture>
package/src/stories/TideImage.stories.ts CHANGED
@@ -33,7 +33,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
33
33
  if (args.height !== '') argsWithValues.push(`height="${args.height}"`);
34
34
  if (args.isLazy !== undefined) argsWithValues.push(`:is-lazy="${args.isLazy}"`);
35
35
  if (hasSources && hasSourcesLength) argsWithValues.push(`:sources="sources"`);
36
- if (args.src) argsWithValues.push(`:src="${args.src}"`);
36
+ if (args.src) argsWithValues.push(`src="${args.src}"`);
37
37
  if (args.width !== '') argsWithValues.push(`width="${args.width}"`);
38
38
 
39
39
  return `<TideImage ${argsWithValues.join(' ')} />`;
@@ -61,10 +61,10 @@ export default {
61
61
  },
62
62
  height: {
63
63
  control: 'text',
64
- description: 'Apply a "height" attribute to the internal image tag.',
64
+ description: 'Apply a "height" attribute to the internal image tag (including unit).',
65
65
  table: {
66
66
  defaultValue: { summary: 'None' },
67
- type: { summary: 'number' },
67
+ type: { summary: 'string' },
68
68
  },
69
69
  },
70
70
  isLazy: {
@@ -90,10 +90,10 @@ export default {
90
90
  },
91
91
  width: {
92
92
  control: 'text',
93
- description: 'Apply a "width" attribute to the internal image tag.',
93
+ description: 'Apply a "width" attribute to the internal image tag (including unit).',
94
94
  table: {
95
95
  defaultValue: { summary: 'None' },
96
- type: { summary: 'number' },
96
+ type: { summary: 'string' },
97
97
  },
98
98
  },
99
99
  },
package/src/types/Styles.ts CHANGED
@@ -248,6 +248,7 @@ export const CSS = {
248
248
  AUTO: 'tide-height-auto',
249
249
  ZERO: 'tide-height-0',
250
250
  FULL: 'tide-height-full',
251
+ MAX_FULL: 'tide-max-height-full',
251
252
  },
252
253
  ISOLATION: {
253
254
  ISOLATE: 'tide-isolate',
@@ -428,7 +429,7 @@ export const CSS = {
428
429
  ON: 'tide-scroll-snap',
429
430
  },
430
431
  SNAP_ALIGN: {
431
- START: 'tide-snap-start',
432
+ START: 'tide-scroll-snap-start',
432
433
  },
433
434
  TEXT_TRANSFORM: {
434
435
  LOWER: 'tide-text-transform-lower',