tide-design-system 2.5.0 → 2.5.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.
- package/.storybook/main.ts +2 -0
- package/README.md +3 -1
- package/dist/css/reset.css +5 -1
- package/dist/css/utilities-base.css +6 -6
- package/dist/css/utilities-responsive.css +24 -24
- package/dist/css/variables.css +3 -0
- package/dist/style.css +1 -1
- package/dist/tide-design-system.cjs +2 -2
- package/dist/tide-design-system.esm.d.ts +49 -9
- package/dist/tide-design-system.esm.js +887 -785
- package/docs/assets/full-bleed.gif +0 -0
- package/docs/assets/layout-grid-default.webp +0 -0
- package/docs/assets/layout-grid-fluid.webp +0 -0
- package/docs/assets/layout-grid.webp +0 -0
- package/docs/configuation.md +47 -0
- package/docs/grid-layout.md +83 -0
- package/index.ts +4 -0
- package/package.json +1 -1
- package/src/assets/css/reset.css +5 -1
- package/src/assets/css/utilities-base.css +6 -6
- package/src/assets/css/utilities-responsive.css +24 -24
- package/src/assets/css/variables.css +3 -0
- package/src/components/TideAlert.vue +1 -1
- package/src/components/TideInputSelect.vue +1 -1
- package/src/components/TideInputSelectDeprecated.vue +1 -1
- package/src/components/TideInputText.vue +2 -2
- package/src/components/TideInputTextDeprecated.vue +2 -2
- package/src/components/TideInputTextarea.vue +2 -2
- package/src/components/TideInputTextareaDeprecated.vue +2 -2
- package/src/components/TideModal.vue +1 -1
- package/src/components/TideRating.vue +93 -0
- package/src/components/TideSheet.vue +1 -1
- package/src/components/TideTabs.vue +58 -0
- package/src/stories/TideRating.stories.ts +120 -0
- package/src/stories/TideTabs.stories.ts +115 -0
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# TIDE Configuration
|
|
2
|
+
|
|
3
|
+
You can configure global TIDE behavior using `provideTideConfig()`. Place it in a top-level file such as `app.vue` (anywhere Vue’s `provide()` works). See Vue’s docs on [provide/inject](https://vuejs.org/guide/components/provide-inject) for more details.
|
|
4
|
+
|
|
5
|
+
## `provideTideConfig()`
|
|
6
|
+
|
|
7
|
+
``` ts
|
|
8
|
+
import { provideTideConfig } from 'tide-design-system';
|
|
9
|
+
|
|
10
|
+
provideTideConfig({
|
|
11
|
+
linkComponent: 'a', // default
|
|
12
|
+
});
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Config values
|
|
16
|
+
|
|
17
|
+
| Key | Type | Default | Description |
|
|
18
|
+
| --- | --- | --- | --- |
|
|
19
|
+
| `linkComponent` | `'a' \| Component` | `'a'` | Replaces the root element used by link-based TIDE components. |
|
|
20
|
+
|
|
21
|
+
## `linkComponent` (TIDE 2.5+)
|
|
22
|
+
|
|
23
|
+
Use this to replace all `<a>` elements in TIDE components with a custom component. Useful for frameworks like Nuxt.
|
|
24
|
+
|
|
25
|
+
### Nuxt Example (using `NuxtLink`)
|
|
26
|
+
|
|
27
|
+
``` vue
|
|
28
|
+
<!-- app.vue -->
|
|
29
|
+
<script setup lang="ts">
|
|
30
|
+
import { provideTideConfig } from 'tide-design-system';
|
|
31
|
+
import { NuxtLink } from '#components';
|
|
32
|
+
|
|
33
|
+
provideTideConfig({
|
|
34
|
+
linkComponent: NuxtLink,
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
This updates all TIDE components that render links, including:
|
|
40
|
+
|
|
41
|
+
- TideLink
|
|
42
|
+
- TideButton (`:element="ELEMENT.LINK"`)
|
|
43
|
+
- TideCard (`:type="TYPE_CARD.ACTION"` with `href`)
|
|
44
|
+
- TideBreadCrumbs
|
|
45
|
+
- And others
|
|
46
|
+
|
|
47
|
+
All these will now render using `<NuxtLink />` automatically.
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# TIDE Layout Grid Utility
|
|
2
|
+
|
|
3
|
+
TIDE provides a lightweight CSS Grid for consistent page alignment, gutters, and max-width, with minimal markup. It separates **layout** (page width, gutters) from **component** concerns (spacing, internal layout).
|
|
4
|
+
|
|
5
|
+
<img src="./assets/layout-grid.webp" width="937" height="420" /><br>
|
|
6
|
+
|
|
7
|
+
## Core Concepts
|
|
8
|
+
|
|
9
|
+
### Three-Column Grid
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
| gutter | content | gutter |
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Direct children are stacked in the **center content column** by default.
|
|
16
|
+
|
|
17
|
+
### Responsive Max Width
|
|
18
|
+
|
|
19
|
+
| Variant | Max content width | Class |
|
|
20
|
+
| ------- | ----------------- | ------------- |
|
|
21
|
+
| Default | 1232px | – |
|
|
22
|
+
| XL | 1920px | `CSS.GRID.XL` |
|
|
23
|
+
|
|
24
|
+
``` vue
|
|
25
|
+
<div :class="[CSS.GRID.LAYOUT, CSS.GRID.XL]">...</div>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Responsive Gutters
|
|
29
|
+
|
|
30
|
+
| Breakpoint | Min gutter |
|
|
31
|
+
| ---------- | ------------------ |
|
|
32
|
+
| XS | `--tide-spacing-1` |
|
|
33
|
+
| XS - SM | `--tide-spacing-2` |
|
|
34
|
+
| SM - MD | `--tide-spacing-4` |
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
### Page Layout Context
|
|
41
|
+
|
|
42
|
+
``` vue
|
|
43
|
+
<div :class="[CSS.GRID.LAYOUT]">
|
|
44
|
+
<section><ArticleIntro /></section>
|
|
45
|
+
<section><ArticleBody /></section>
|
|
46
|
+
</div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Direct children are **centered automatically**, like so:
|
|
50
|
+
|
|
51
|
+
<img src="./assets/layout-grid-default.webp" width="937" height="420" /><br>
|
|
52
|
+
|
|
53
|
+
### Full-Width / Edge-to-Edge Sections
|
|
54
|
+
|
|
55
|
+
Use `CSS.GRID.FLUID` to break out of the content column:
|
|
56
|
+
|
|
57
|
+
``` vue
|
|
58
|
+
<div :class="[CSS.GRID.LAYOUT]">
|
|
59
|
+
<section><ArticleIntro /></section>
|
|
60
|
+
|
|
61
|
+
<section :class="[CSS.GRID.FLUID]">
|
|
62
|
+
<HeroBanner />
|
|
63
|
+
</section>
|
|
64
|
+
|
|
65
|
+
<section><ArticleBody /></section>
|
|
66
|
+
</div>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
The code in this example would result in a layout like this:
|
|
70
|
+
|
|
71
|
+
<img src="./assets/layout-grid-fluid.webp" width="937" height="420" /><br>
|
|
72
|
+
|
|
73
|
+
Notice the `<HeroBanner />` is no longer confined to the center column, and instead breaks out and stretches **edge-to-edge**. This section is now considered **fluid**.
|
|
74
|
+
|
|
75
|
+
Common use cases for fluid sections:
|
|
76
|
+
|
|
77
|
+
- Header/footer
|
|
78
|
+
- Full-bleed carousels
|
|
79
|
+
- Edge-to-edge hero sections
|
|
80
|
+
- Sticky bars
|
|
81
|
+
- Page sections with toned backgrounds
|
|
82
|
+
|
|
83
|
+
<img src="./assets/full-bleed.gif" width="127" height="277" /><br>
|
package/index.ts
CHANGED
|
@@ -35,9 +35,11 @@ import TideMenuItem from '@/components/TideMenuItem.vue';
|
|
|
35
35
|
import TideModal from '@/components/TideModal.vue';
|
|
36
36
|
import TidePagination from '@/components/TidePagination.vue';
|
|
37
37
|
import TidePopover from '@/components/TidePopover.vue';
|
|
38
|
+
import TideRating from '@/components/TideRating.vue';
|
|
38
39
|
import TideSeoLinks from '@/components/TideSeoLinks.vue';
|
|
39
40
|
import TideSheet from '@/components/TideSheet.vue';
|
|
40
41
|
import TideSwitch from '@/components/TideSwitch.vue';
|
|
42
|
+
import TideTabs from '@/components/TideTabs.vue';
|
|
41
43
|
import { provideTideConfig } from '@/composables/useTideConfig';
|
|
42
44
|
import { useTideForm } from '@/composables/useTideForm';
|
|
43
45
|
import { ALERT } from '@/types/Alert';
|
|
@@ -182,7 +184,9 @@ export {
|
|
|
182
184
|
TideModal,
|
|
183
185
|
TidePagination,
|
|
184
186
|
TidePopover,
|
|
187
|
+
TideRating,
|
|
185
188
|
TideSeoLinks,
|
|
186
189
|
TideSheet,
|
|
187
190
|
TideSwitch,
|
|
191
|
+
TideTabs,
|
|
188
192
|
};
|
package/package.json
CHANGED
package/src/assets/css/reset.css
CHANGED
|
@@ -7,6 +7,7 @@ body {
|
|
|
7
7
|
font-size: var(--tide-font-16);
|
|
8
8
|
font-weight: 400;
|
|
9
9
|
line-height: 1.4;
|
|
10
|
+
text-wrap: pretty;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
/* Cannot be applied to body tag in marketplace repo due to data-css-scope */
|
|
@@ -39,13 +40,16 @@ h2 {font-size: var(--tide-font-24);} /* 24px */
|
|
|
39
40
|
h3 {font-size: var(--tide-font-20);} /* 20px */
|
|
40
41
|
h4 {font-size: var(--tide-font-16);} /* 16px */
|
|
41
42
|
h5 {font-size: var(--tide-font-16);} /* 16px */
|
|
43
|
+
h6 {font-size: var(--tide-font-16);} /* 16px */
|
|
42
44
|
|
|
43
45
|
h1,
|
|
44
46
|
h2,
|
|
45
47
|
h3,
|
|
46
48
|
h4,
|
|
47
|
-
h5
|
|
49
|
+
h5,
|
|
50
|
+
h6 {
|
|
48
51
|
font-weight: 700;
|
|
52
|
+
text-wrap: balance;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
img,
|
|
@@ -294,12 +294,12 @@
|
|
|
294
294
|
.tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
295
295
|
|
|
296
296
|
/* Typographic roles */
|
|
297
|
-
.tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
298
|
-
.tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
299
|
-
.tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
300
|
-
.tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
301
|
-
.tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
302
|
-
.tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
297
|
+
.tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
298
|
+
.tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
299
|
+
.tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
300
|
+
.tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
301
|
+
.tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
302
|
+
.tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
303
303
|
.tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
304
304
|
.tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
305
305
|
.tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -295,12 +295,12 @@
|
|
|
295
295
|
.sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
296
296
|
|
|
297
297
|
/* Typographic roles */
|
|
298
|
-
.sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
299
|
-
.sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
300
|
-
.sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
301
|
-
.sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
302
|
-
.sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
303
|
-
.sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
298
|
+
.sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
299
|
+
.sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
300
|
+
.sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
301
|
+
.sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
302
|
+
.sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
303
|
+
.sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
304
304
|
.sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
305
305
|
.sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
306
306
|
.sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -843,12 +843,12 @@
|
|
|
843
843
|
.md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
844
844
|
|
|
845
845
|
/* Typographic roles */
|
|
846
|
-
.md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
847
|
-
.md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
848
|
-
.md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
849
|
-
.md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
850
|
-
.md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
851
|
-
.md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
846
|
+
.md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
847
|
+
.md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
848
|
+
.md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
849
|
+
.md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
850
|
+
.md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
851
|
+
.md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
852
852
|
.md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
853
853
|
.md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
854
854
|
.md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -1391,12 +1391,12 @@
|
|
|
1391
1391
|
.lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1392
1392
|
|
|
1393
1393
|
/* Typographic roles */
|
|
1394
|
-
.lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1395
|
-
.lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1396
|
-
.lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1397
|
-
.lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1398
|
-
.lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1399
|
-
.lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1394
|
+
.lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
1395
|
+
.lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
1396
|
+
.lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
1397
|
+
.lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
1398
|
+
.lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
1399
|
+
.lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
1400
1400
|
.lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1401
1401
|
.lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1402
1402
|
.lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -1939,12 +1939,12 @@
|
|
|
1939
1939
|
.xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
|
|
1940
1940
|
|
|
1941
1941
|
/* Typographic roles */
|
|
1942
|
-
.xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
|
|
1943
|
-
.xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
|
|
1944
|
-
.xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
|
|
1945
|
-
.xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
|
|
1946
|
-
.xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
|
|
1947
|
-
.xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
|
|
1942
|
+
.xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
|
|
1943
|
+
.xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
|
|
1944
|
+
.xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
|
|
1945
|
+
.xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
|
|
1946
|
+
.xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
|
|
1947
|
+
.xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
|
|
1948
1948
|
.xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
|
|
1949
1949
|
.xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
|
|
1950
1950
|
.xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
|
|
@@ -320,7 +320,7 @@
|
|
|
320
320
|
|
|
321
321
|
.tide-input-text:focus-within .tide-input-text-field {
|
|
322
322
|
--tide-input-outline-width: var(--tide-border-width-2);
|
|
323
|
-
outline-color: var(--tide-
|
|
323
|
+
outline-color: var(--tide-border-high);
|
|
324
324
|
}
|
|
325
325
|
|
|
326
326
|
.tide-input-text input {
|
|
@@ -331,6 +331,6 @@
|
|
|
331
331
|
--tide-input-outline-width: var(--tide-border-width-1);
|
|
332
332
|
outline: var(--tide-input-outline-width) solid var(--tide-border);
|
|
333
333
|
outline-offset: calc(var(--tide-input-outline-width) * -1);
|
|
334
|
-
color: var(--tide-surface
|
|
334
|
+
color: var(--tide-on-surface);
|
|
335
335
|
}
|
|
336
336
|
</style>
|
|
@@ -311,7 +311,7 @@
|
|
|
311
311
|
|
|
312
312
|
.tide-input-text:focus-within .tide-input-text-field {
|
|
313
313
|
--tide-input-outline-width: var(--tide-border-width-2);
|
|
314
|
-
outline-color: var(--tide-
|
|
314
|
+
outline-color: var(--tide-border-high);
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
.tide-input-text input {
|
|
@@ -322,6 +322,6 @@
|
|
|
322
322
|
--tide-input-outline-width: var(--tide-border-width-1);
|
|
323
323
|
outline: var(--tide-input-outline-width) solid var(--tide-border);
|
|
324
324
|
outline-offset: calc(var(--tide-input-outline-width) * -1);
|
|
325
|
-
color: var(--tide-surface
|
|
325
|
+
color: var(--tide-on-surface);
|
|
326
326
|
}
|
|
327
327
|
</style>
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
|
|
190
190
|
.tide-input-textarea:focus-within .tide-input-textarea-field {
|
|
191
191
|
--tide-input-outline-width: var(--tide-border-width-2);
|
|
192
|
-
outline-color: var(--tide-
|
|
192
|
+
outline-color: var(--tide-border-high);
|
|
193
193
|
}
|
|
194
194
|
|
|
195
195
|
.tide-input-textarea textarea {
|
|
@@ -200,6 +200,6 @@
|
|
|
200
200
|
--tide-input-outline-width: var(--tide-border-width-1);
|
|
201
201
|
outline: var(--tide-input-outline-width) solid var(--tide-border);
|
|
202
202
|
outline-offset: calc(var(--tide-input-outline-width) * -1);
|
|
203
|
-
color: var(--tide-surface
|
|
203
|
+
color: var(--tide-on-surface);
|
|
204
204
|
}
|
|
205
205
|
</style>
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
|
|
183
183
|
.tide-input-textarea:focus-within .tide-input-textarea-field {
|
|
184
184
|
--tide-input-outline-width: var(--tide-border-width-2);
|
|
185
|
-
outline-color: var(--tide-
|
|
185
|
+
outline-color: var(--tide-border-high);
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
.tide-input-textarea textarea {
|
|
@@ -193,6 +193,6 @@
|
|
|
193
193
|
--tide-input-outline-width: var(--tide-border-width-1);
|
|
194
194
|
outline: var(--tide-input-outline-width) solid var(--tide-border);
|
|
195
195
|
outline-offset: calc(var(--tide-input-outline-width) * -1);
|
|
196
|
-
color: var(--tide-surface
|
|
196
|
+
color: var(--tide-on-surface);
|
|
197
197
|
}
|
|
198
198
|
</style>
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
padding-inline: var(--modal-padding-x);
|
|
237
237
|
}
|
|
238
238
|
.tide-modal-content {
|
|
239
|
-
grid-template-columns: var(--modal-padding-x)
|
|
239
|
+
grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);
|
|
240
240
|
}
|
|
241
241
|
:where(.tide-modal-content):deep(> :where(*)) {
|
|
242
242
|
grid-column: 2;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
|
|
4
|
+
import { CSS } from '@/types/Styles';
|
|
5
|
+
|
|
6
|
+
type Props = {
|
|
7
|
+
description?: string;
|
|
8
|
+
maxRating?: number;
|
|
9
|
+
showRating?: boolean;
|
|
10
|
+
title?: string;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
14
|
+
description: undefined,
|
|
15
|
+
maxRating: 10,
|
|
16
|
+
showRating: false,
|
|
17
|
+
title: undefined,
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
const ratingValue = defineModel<number>({ required: true });
|
|
21
|
+
|
|
22
|
+
const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));
|
|
23
|
+
|
|
24
|
+
const handleClick = (segment: number) => {
|
|
25
|
+
ratingValue.value = segment;
|
|
26
|
+
};
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<div :class="['tide-rating', CSS.WIDTH.FULL]">
|
|
31
|
+
<section :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.AXIS1.BETWEEN, CSS.PADDING.BOTTOM.HALF]">
|
|
32
|
+
<div :class="[CSS.FONT.ROLE.LABEL_2]">
|
|
33
|
+
{{ props.title }}
|
|
34
|
+
</div>
|
|
35
|
+
<div
|
|
36
|
+
:class="[CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.VARIANT]"
|
|
37
|
+
v-if="props.showRating"
|
|
38
|
+
>
|
|
39
|
+
{{ ratingValue }}/{{ props.maxRating }}
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
<section
|
|
43
|
+
:class="[CSS.FONT.ROLE.BODY_2, CSS.PADDING.BOTTOM.ONE, CSS.OVERFLOW.XY.HIDDEN, CSS.ELLIPSIS]"
|
|
44
|
+
v-if="props.description"
|
|
45
|
+
>
|
|
46
|
+
{{ props.description }}
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<section :class="['tide-rating-bar', CSS.DISPLAY.FLEX, CSS.GAP.QUARTER, CSS.FLEX.GROW.ON, CSS.FLEX.SHRINK.ON]">
|
|
50
|
+
<button
|
|
51
|
+
:class="[
|
|
52
|
+
'tide-rating-segment',
|
|
53
|
+
CSS.BG.SURFACE.VARIANT,
|
|
54
|
+
CSS.POSITION.RELATIVE,
|
|
55
|
+
CSS.OVERFLOW.XY.HIDDEN,
|
|
56
|
+
CSS.FLEX.GROW.ON,
|
|
57
|
+
CSS.FLEX.SHRINK.ON,
|
|
58
|
+
CSS.FLEX.BASIS.ZERO,
|
|
59
|
+
CSS.BORDER.FULL.ZERO,
|
|
60
|
+
segment === 1 && ['tide-rating-segment-first'],
|
|
61
|
+
segment === segments.length && ['tide-rating-segment-last'],
|
|
62
|
+
segment <= ratingValue && [CSS.BG.SURFACE.GRADIENT],
|
|
63
|
+
]"
|
|
64
|
+
:key="segment"
|
|
65
|
+
@click="handleClick(segment)"
|
|
66
|
+
type="button"
|
|
67
|
+
v-for="segment in segments"
|
|
68
|
+
/>
|
|
69
|
+
</section>
|
|
70
|
+
</div>
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<style scoped>
|
|
74
|
+
.tide-rating-bar {
|
|
75
|
+
height: 28px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.tide-rating-segment {
|
|
79
|
+
clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.tide-rating-segment-first {
|
|
83
|
+
border-top-left-radius: 9999px;
|
|
84
|
+
border-bottom-left-radius: 9999px;
|
|
85
|
+
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.tide-rating-segment-last {
|
|
89
|
+
border-top-right-radius: 9999px;
|
|
90
|
+
border-bottom-right-radius: 9999px;
|
|
91
|
+
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
|
|
92
|
+
}
|
|
93
|
+
</style>
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
.tide-sheet-content {
|
|
173
|
-
grid-template-columns: var(--sheet-padding-x)
|
|
173
|
+
grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
:where(.tide-sheet-content):deep(> :where(*)) {
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import TideCarousel from '@/components/TideCarousel.vue';
|
|
3
|
+
import TideLink from '@/components/TideLink.vue';
|
|
4
|
+
import { ELEMENT } from '@/types/Element';
|
|
5
|
+
import { CSS } from '@/types/Styles';
|
|
6
|
+
|
|
7
|
+
import type { Tab } from '@/types/Tab';
|
|
8
|
+
|
|
9
|
+
type Props = {
|
|
10
|
+
tabs: Tab[];
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
defineProps<Props>();
|
|
14
|
+
|
|
15
|
+
const currentTab = defineModel<number>({ required: true });
|
|
16
|
+
|
|
17
|
+
const handleClick = (index: number) => {
|
|
18
|
+
currentTab.value = index;
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<div :class="['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]">
|
|
24
|
+
<TideCarousel :is-floating="true">
|
|
25
|
+
<li
|
|
26
|
+
:key="tab.label"
|
|
27
|
+
v-for="(tab, index) in tabs"
|
|
28
|
+
>
|
|
29
|
+
<TideLink
|
|
30
|
+
:class="[
|
|
31
|
+
index === currentTab ? CSS.FONT.COLOR.SURFACE.BRAND : CSS.FONT.COLOR.SURFACE.VARIANT,
|
|
32
|
+
CSS.PADDING.BOTTOM.ONE,
|
|
33
|
+
CSS.FONT.ROLE.LABEL_1,
|
|
34
|
+
CSS.WHITESPACE_WRAP.OFF,
|
|
35
|
+
]"
|
|
36
|
+
:element="ELEMENT.BUTTON"
|
|
37
|
+
:label="tab.label"
|
|
38
|
+
:subtle="true"
|
|
39
|
+
@click="handleClick(index)"
|
|
40
|
+
/>
|
|
41
|
+
<div :class="['rounded-border', index === currentTab && 'active']" />
|
|
42
|
+
</li>
|
|
43
|
+
</TideCarousel>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style scoped>
|
|
48
|
+
.rounded-border {
|
|
49
|
+
border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
|
|
50
|
+
border-top-width: 4px;
|
|
51
|
+
border-top-style: solid;
|
|
52
|
+
border-color: transparent;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.active {
|
|
56
|
+
border-color: var(--tide-on-surface-brand);
|
|
57
|
+
}
|
|
58
|
+
</style>
|