tide-design-system 2.2.15 → 2.3.0
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/preview.ts +8 -1
- package/dist/css/main.css +0 -6
- package/dist/css/reset.css +1 -1
- package/dist/css/utilities-base.css +541 -0
- package/dist/css/utilities-responsive.css +2717 -0
- package/dist/css/utilities.css +2 -442
- package/dist/css/variables.css +1 -1
- package/dist/style.css +1 -1
- package/dist/tide-design-system.cjs +2 -2
- package/dist/tide-design-system.esm.d.ts +16 -99
- package/dist/tide-design-system.esm.js +1177 -1169
- package/dist/utilities/storybook.ts +12 -3
- package/dist/utilities/validation.ts +5 -1
- package/index.ts +3 -18
- package/package.json +1 -1
- package/src/assets/css/main.css +0 -6
- package/src/assets/css/reset.css +1 -1
- package/src/assets/css/utilities-base.css +541 -0
- package/src/assets/css/utilities-responsive.css +2717 -0
- package/src/assets/css/utilities.css +2 -442
- package/src/assets/css/variables.css +1 -1
- package/src/components/TideImage.vue +7 -1
- package/src/components/TideInputCheckbox.vue +3 -5
- package/src/components/TideInputRadio.vue +18 -5
- package/src/components/TideInputText.vue +50 -50
- package/src/components/TideInputTextarea.vue +17 -22
- package/src/components/TidePopover.vue +8 -3
- package/src/contexts/sandbox/AppSandbox.vue +3 -1
- package/src/docs/integration-partial.md +0 -7
- package/src/stories/TideInputRadio.stories.ts +9 -0
- package/src/types/Styles.ts +5 -0
- package/src/utilities/storybook.ts +12 -3
- package/src/utilities/validation.ts +5 -1
- package/dist/css/dynamic-buttons.css +0 -346
- package/dist/css/dynamic-utilities.css +0 -152
- package/dist/css/utilities-lg.css +0 -444
- package/dist/css/utilities-md.css +0 -444
- package/dist/css/utilities-sm.css +0 -444
- package/dist/css/utilities-xl.css +0 -444
- package/src/assets/css/dynamic-buttons.css +0 -346
- package/src/assets/css/dynamic-utilities.css +0 -152
- package/src/assets/css/utilities-lg.css +0 -444
- package/src/assets/css/utilities-md.css +0 -444
- package/src/assets/css/utilities-sm.css +0 -444
- package/src/assets/css/utilities-xl.css +0 -444
- package/src/types/Detail.ts +0 -4
- package/src/types/FacetRange.ts +0 -84
- package/src/types/ListingMedia.ts +0 -43
- package/src/types/Raw.ts +0 -5
- package/src/types/RealmConfig.ts +0 -14
|
@@ -712,7 +712,7 @@ export declare const ALERT: {
|
|
|
712
712
|
|
|
713
713
|
export declare type Alert = (typeof ALERT)[keyof typeof ALERT];
|
|
714
714
|
|
|
715
|
-
declare const BADGE_COLOR: {
|
|
715
|
+
export declare const BADGE_COLOR: {
|
|
716
716
|
readonly BLACK: "black";
|
|
717
717
|
readonly BLUE: "blue";
|
|
718
718
|
readonly GREEN: "green";
|
|
@@ -725,6 +725,11 @@ declare const BADGE_COLOR: {
|
|
|
725
725
|
readonly YELLOW: "yellow";
|
|
726
726
|
};
|
|
727
727
|
|
|
728
|
+
export declare const BADGE_COLOR_DETAILS: Record<BadgeColor, {
|
|
729
|
+
borderColor: string;
|
|
730
|
+
iconColor: string;
|
|
731
|
+
}>;
|
|
732
|
+
|
|
728
733
|
export declare const BADGE_TRUSTED: {
|
|
729
734
|
readonly YEARS_10: "10";
|
|
730
735
|
readonly YEARS_15: "15";
|
|
@@ -778,6 +783,7 @@ declare const CSS_2: {
|
|
|
778
783
|
readonly ALIGN: {
|
|
779
784
|
readonly X: {
|
|
780
785
|
readonly CENTER: "tide-text-center";
|
|
786
|
+
readonly JUSTIFY: "tide-text-justify";
|
|
781
787
|
readonly LEFT: "tide-text-left";
|
|
782
788
|
readonly RIGHT: "tide-text-right";
|
|
783
789
|
};
|
|
@@ -1243,6 +1249,10 @@ declare const CSS_2: {
|
|
|
1243
1249
|
readonly SNAP_ALIGN: {
|
|
1244
1250
|
readonly START: "tide-scroll-snap-start";
|
|
1245
1251
|
};
|
|
1252
|
+
readonly STRIKETHROUGH: {
|
|
1253
|
+
readonly OFF: "tide-strikethrough-none";
|
|
1254
|
+
readonly ON: "tide-strikethrough";
|
|
1255
|
+
};
|
|
1246
1256
|
readonly TEXT_TRANSFORM: {
|
|
1247
1257
|
readonly LOWER: "tide-text-transform-lower";
|
|
1248
1258
|
readonly NONE: "tide-text-transform-none";
|
|
@@ -1279,11 +1289,6 @@ declare const CSS_2: {
|
|
|
1279
1289
|
};
|
|
1280
1290
|
export { CSS_2 as CSS }
|
|
1281
1291
|
|
|
1282
|
-
export declare type Detail = {
|
|
1283
|
-
label: string;
|
|
1284
|
-
value: string;
|
|
1285
|
-
};
|
|
1286
|
-
|
|
1287
1292
|
export declare const ELEMENT: {
|
|
1288
1293
|
readonly BUTTON: "button";
|
|
1289
1294
|
readonly LINK: "a";
|
|
@@ -1300,18 +1305,6 @@ export declare const ELEMENT_TEXT_AS_ICON: {
|
|
|
1300
1305
|
|
|
1301
1306
|
export declare type ElementTextAsIcon = (typeof ELEMENT_TEXT_AS_ICON)[keyof typeof ELEMENT_TEXT_AS_ICON];
|
|
1302
1307
|
|
|
1303
|
-
declare const FACET_COMPONENT_ID_RANGE: {
|
|
1304
|
-
readonly GROSS_WEIGHT: "grossWeight";
|
|
1305
|
-
readonly LENGTH: "vehicleLength";
|
|
1306
|
-
readonly MILEAGE: "mileage";
|
|
1307
|
-
readonly PRICE: "price";
|
|
1308
|
-
readonly SLEEPING_CAPACITY: "sleepingCapacity";
|
|
1309
|
-
readonly SLIDEOUTS: "slideouts";
|
|
1310
|
-
readonly YEAR: "vehicleYear";
|
|
1311
|
-
};
|
|
1312
|
-
|
|
1313
|
-
export declare type FacetComponentIdRange = (typeof FACET_COMPONENT_ID_RANGE)[keyof typeof FACET_COMPONENT_ID_RANGE];
|
|
1314
|
-
|
|
1315
1308
|
export declare type Field = SelectField | TextField | TextareaField | CheckboxField;
|
|
1316
1309
|
|
|
1317
1310
|
export declare const FORMAT: {
|
|
@@ -1526,13 +1519,6 @@ export declare const ICON_REALM: {
|
|
|
1526
1519
|
};
|
|
1527
1520
|
};
|
|
1528
1521
|
|
|
1529
|
-
declare type ImageSlide = {
|
|
1530
|
-
imageUrl: string;
|
|
1531
|
-
type: ImageSlideType;
|
|
1532
|
-
};
|
|
1533
|
-
|
|
1534
|
-
export declare type ImageSlideType = (typeof MEDIA_SLIDE_TYPES.IMAGE)[keyof typeof MEDIA_SLIDE_TYPES.IMAGE];
|
|
1535
|
-
|
|
1536
1522
|
export declare type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
|
|
1537
1523
|
|
|
1538
1524
|
export declare type Link = {
|
|
@@ -1541,8 +1527,6 @@ export declare type Link = {
|
|
|
1541
1527
|
isNewTab?: boolean;
|
|
1542
1528
|
};
|
|
1543
1529
|
|
|
1544
|
-
export declare type ListingMedia = ImageSlide | VideoSlide | VrSlide;
|
|
1545
|
-
|
|
1546
1530
|
export declare const MEDIA: {
|
|
1547
1531
|
SM: number;
|
|
1548
1532
|
MD: number;
|
|
@@ -1552,21 +1536,6 @@ export declare const MEDIA: {
|
|
|
1552
1536
|
|
|
1553
1537
|
export declare type Media = (typeof MEDIA)[keyof typeof MEDIA];
|
|
1554
1538
|
|
|
1555
|
-
/**
|
|
1556
|
-
* These slides are used in both the inline detail page photo slider
|
|
1557
|
-
* and the fullscreen media gallery.
|
|
1558
|
-
*/
|
|
1559
|
-
export declare const MEDIA_SLIDE_TYPES: {
|
|
1560
|
-
readonly IMAGE: {
|
|
1561
|
-
readonly FLOORPLAN: "floorplan";
|
|
1562
|
-
readonly IMAGE: "image";
|
|
1563
|
-
};
|
|
1564
|
-
readonly VIDEO: "video";
|
|
1565
|
-
readonly VR: "vr";
|
|
1566
|
-
};
|
|
1567
|
-
|
|
1568
|
-
export declare type MediaSlideType = (typeof MEDIA_SLIDE_TYPES.IMAGE)[keyof typeof MEDIA_SLIDE_TYPES.IMAGE] | typeof MEDIA_SLIDE_TYPES.VIDEO | typeof MEDIA_SLIDE_TYPES.VR;
|
|
1569
|
-
|
|
1570
1539
|
export declare const OBJECT_FIT: {
|
|
1571
1540
|
readonly CONTAIN: "contain";
|
|
1572
1541
|
readonly COVER: "cover";
|
|
@@ -1678,22 +1647,21 @@ declare type Props_20 = {
|
|
|
1678
1647
|
|
|
1679
1648
|
declare type Props_21 = {
|
|
1680
1649
|
checked?: boolean;
|
|
1681
|
-
dataTrack?: string;
|
|
1682
1650
|
disabled?: boolean;
|
|
1683
1651
|
indeterminate?: boolean;
|
|
1684
1652
|
inputId?: string;
|
|
1685
1653
|
label: string;
|
|
1686
1654
|
name: string;
|
|
1687
|
-
number?: number
|
|
1655
|
+
number?: number;
|
|
1688
1656
|
};
|
|
1689
1657
|
|
|
1690
1658
|
declare type Props_22 = {
|
|
1691
1659
|
checked?: boolean;
|
|
1692
|
-
dataTrack?: string;
|
|
1693
1660
|
disabled?: boolean;
|
|
1694
1661
|
inputId?: string;
|
|
1695
1662
|
label: string;
|
|
1696
1663
|
name: string;
|
|
1664
|
+
number?: number;
|
|
1697
1665
|
};
|
|
1698
1666
|
|
|
1699
1667
|
declare interface Props_23 extends SelectField {
|
|
@@ -1703,7 +1671,6 @@ declare interface Props_23 extends SelectField {
|
|
|
1703
1671
|
|
|
1704
1672
|
declare type Props_24 = {
|
|
1705
1673
|
autocomplete?: boolean;
|
|
1706
|
-
dataTrack?: string;
|
|
1707
1674
|
disabled?: boolean;
|
|
1708
1675
|
error?: ValidationError;
|
|
1709
1676
|
hasClear?: boolean;
|
|
@@ -1724,7 +1691,6 @@ declare type Props_24 = {
|
|
|
1724
1691
|
};
|
|
1725
1692
|
|
|
1726
1693
|
declare type Props_25 = {
|
|
1727
|
-
dataTrack?: string;
|
|
1728
1694
|
error?: ValidationError;
|
|
1729
1695
|
inputId?: string;
|
|
1730
1696
|
label?: string;
|
|
@@ -1828,17 +1794,6 @@ declare type Props_9 = {
|
|
|
1828
1794
|
tabs: Tab[];
|
|
1829
1795
|
};
|
|
1830
1796
|
|
|
1831
|
-
export declare type RangeData = {
|
|
1832
|
-
min: number | null;
|
|
1833
|
-
max: number | null;
|
|
1834
|
-
};
|
|
1835
|
-
|
|
1836
|
-
export declare type Raw = {
|
|
1837
|
-
[key: string]: {
|
|
1838
|
-
raw: number | string | string[];
|
|
1839
|
-
};
|
|
1840
|
-
};
|
|
1841
|
-
|
|
1842
1797
|
export declare const REALM: {
|
|
1843
1798
|
readonly AERO: "aero";
|
|
1844
1799
|
readonly ATV: "atv";
|
|
@@ -1853,19 +1808,6 @@ export declare const REALM: {
|
|
|
1853
1808
|
|
|
1854
1809
|
export declare type Realm = (typeof REALM)[RealmKey];
|
|
1855
1810
|
|
|
1856
|
-
export declare type RealmConfig = {
|
|
1857
|
-
cdn: {
|
|
1858
|
-
domain: string;
|
|
1859
|
-
version: string;
|
|
1860
|
-
};
|
|
1861
|
-
id: Realm;
|
|
1862
|
-
label: {
|
|
1863
|
-
plural: string;
|
|
1864
|
-
singular: string;
|
|
1865
|
-
singularWithArticle: string;
|
|
1866
|
-
};
|
|
1867
|
-
};
|
|
1868
|
-
|
|
1869
1811
|
declare type RealmIcon = {
|
|
1870
1812
|
[RealmKey in RealmKeysWithIcons]: (typeof ICON_REALM)[RealmKey][keyof (typeof ICON_REALM)[RealmKey]];
|
|
1871
1813
|
}[RealmKeysWithIcons];
|
|
@@ -2311,7 +2253,6 @@ label: string | number;
|
|
|
2311
2253
|
|
|
2312
2254
|
export declare const TideInputCheckbox: DefineComponent<__VLS_WithDefaults_19<__VLS_TypePropsToOption_21<Props_21>, {
|
|
2313
2255
|
checked: boolean;
|
|
2314
|
-
dataTrack: string;
|
|
2315
2256
|
disabled: boolean;
|
|
2316
2257
|
indeterminate: boolean;
|
|
2317
2258
|
inputId: undefined;
|
|
@@ -2320,7 +2261,6 @@ name: undefined;
|
|
|
2320
2261
|
number: undefined;
|
|
2321
2262
|
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_19<__VLS_TypePropsToOption_21<Props_21>, {
|
|
2322
2263
|
checked: boolean;
|
|
2323
|
-
dataTrack: string;
|
|
2324
2264
|
disabled: boolean;
|
|
2325
2265
|
indeterminate: boolean;
|
|
2326
2266
|
inputId: undefined;
|
|
@@ -2332,7 +2272,6 @@ number: number;
|
|
|
2332
2272
|
label: string;
|
|
2333
2273
|
disabled: boolean;
|
|
2334
2274
|
checked: boolean;
|
|
2335
|
-
dataTrack: string;
|
|
2336
2275
|
indeterminate: boolean;
|
|
2337
2276
|
inputId: string;
|
|
2338
2277
|
name: string;
|
|
@@ -2340,21 +2279,21 @@ name: string;
|
|
|
2340
2279
|
|
|
2341
2280
|
export declare const TideInputRadio: DefineComponent<__VLS_WithDefaults_20<__VLS_TypePropsToOption_22<Props_22>, {
|
|
2342
2281
|
checked: boolean;
|
|
2343
|
-
dataTrack: string;
|
|
2344
2282
|
disabled: boolean;
|
|
2345
2283
|
inputId: undefined;
|
|
2346
2284
|
label: undefined;
|
|
2285
|
+
number: undefined;
|
|
2347
2286
|
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_20<__VLS_TypePropsToOption_22<Props_22>, {
|
|
2348
2287
|
checked: boolean;
|
|
2349
|
-
dataTrack: string;
|
|
2350
2288
|
disabled: boolean;
|
|
2351
2289
|
inputId: undefined;
|
|
2352
2290
|
label: undefined;
|
|
2291
|
+
number: undefined;
|
|
2353
2292
|
}>>>, {
|
|
2293
|
+
number: number;
|
|
2354
2294
|
label: string;
|
|
2355
2295
|
disabled: boolean;
|
|
2356
2296
|
checked: boolean;
|
|
2357
|
-
dataTrack: string;
|
|
2358
2297
|
inputId: string;
|
|
2359
2298
|
}, {}>;
|
|
2360
2299
|
|
|
@@ -2389,7 +2328,6 @@ supportingText: string;
|
|
|
2389
2328
|
|
|
2390
2329
|
export declare const TideInputText: DefineComponent<__VLS_WithDefaults_22<__VLS_TypePropsToOption_24<Props_24>, {
|
|
2391
2330
|
autocomplete: boolean;
|
|
2392
|
-
dataTrack: string;
|
|
2393
2331
|
disabled: boolean;
|
|
2394
2332
|
error: boolean;
|
|
2395
2333
|
hasClear: boolean;
|
|
@@ -2413,7 +2351,6 @@ updateValue: (newValue: string) => void;
|
|
|
2413
2351
|
value: Ref<string | undefined>;
|
|
2414
2352
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_22<__VLS_TypePropsToOption_24<Props_24>, {
|
|
2415
2353
|
autocomplete: boolean;
|
|
2416
|
-
dataTrack: string;
|
|
2417
2354
|
disabled: boolean;
|
|
2418
2355
|
error: boolean;
|
|
2419
2356
|
hasClear: boolean;
|
|
@@ -2438,7 +2375,6 @@ required: boolean;
|
|
|
2438
2375
|
prefix: string;
|
|
2439
2376
|
disabled: boolean;
|
|
2440
2377
|
iconLeading: Icon;
|
|
2441
|
-
dataTrack: string;
|
|
2442
2378
|
inputId: string;
|
|
2443
2379
|
value: string;
|
|
2444
2380
|
maxlength: number;
|
|
@@ -2452,7 +2388,6 @@ transformValue: FormValueTransformer;
|
|
|
2452
2388
|
}, {}>;
|
|
2453
2389
|
|
|
2454
2390
|
export declare const TideInputTextarea: DefineComponent<__VLS_WithDefaults_23<__VLS_TypePropsToOption_25<Props_25>, {
|
|
2455
|
-
dataTrack: string;
|
|
2456
2391
|
error: boolean;
|
|
2457
2392
|
inputId: undefined;
|
|
2458
2393
|
label: undefined;
|
|
@@ -2468,7 +2403,6 @@ error: Ref<ValidationError>;
|
|
|
2468
2403
|
required: boolean;
|
|
2469
2404
|
value: Ref<string | undefined>;
|
|
2470
2405
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_23<__VLS_TypePropsToOption_25<Props_25>, {
|
|
2471
|
-
dataTrack: string;
|
|
2472
2406
|
error: boolean;
|
|
2473
2407
|
inputId: undefined;
|
|
2474
2408
|
label: undefined;
|
|
@@ -2483,7 +2417,6 @@ value: undefined;
|
|
|
2483
2417
|
label: string;
|
|
2484
2418
|
error: ValidationError;
|
|
2485
2419
|
required: boolean;
|
|
2486
|
-
dataTrack: string;
|
|
2487
2420
|
inputId: string;
|
|
2488
2421
|
name: string;
|
|
2489
2422
|
value: string;
|
|
@@ -2635,20 +2568,4 @@ export declare const VALIDATOR: {
|
|
|
2635
2568
|
|
|
2636
2569
|
export declare type Validator = (value: string) => ValidationResult;
|
|
2637
2570
|
|
|
2638
|
-
declare type VideoSlide = {
|
|
2639
|
-
imageUrl: string;
|
|
2640
|
-
type: VideoSlideType;
|
|
2641
|
-
videoUrl: string;
|
|
2642
|
-
};
|
|
2643
|
-
|
|
2644
|
-
export declare type VideoSlideType = typeof MEDIA_SLIDE_TYPES.VIDEO;
|
|
2645
|
-
|
|
2646
|
-
declare type VrSlide = {
|
|
2647
|
-
imageUrl: string;
|
|
2648
|
-
type: VrSlideType;
|
|
2649
|
-
vrUrl: string;
|
|
2650
|
-
};
|
|
2651
|
-
|
|
2652
|
-
export declare type VrSlideType = typeof MEDIA_SLIDE_TYPES.VR;
|
|
2653
|
-
|
|
2654
2571
|
export { }
|