ds-one 0.2.5-alpha.9 → 0.3.0-alpha.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/DS1/0-face/device.ts +313 -29
- package/DS1/1-root/fonts/Iosevka-Regular.woff2 +0 -0
- package/DS1/1-root/one.css +124 -77
- package/DS1/2-core/ds-banner.ts +120 -1
- package/DS1/2-core/ds-button.ts +16 -93
- package/DS1/2-core/ds-card.ts +137 -0
- package/DS1/2-core/ds-cycle.ts +77 -179
- package/DS1/2-core/ds-date.ts +3 -10
- package/DS1/2-core/ds-gap.ts +38 -0
- package/DS1/2-core/ds-icon.ts +6 -35
- package/DS1/2-core/ds-input.ts +306 -1
- package/DS1/2-core/ds-pagedots.ts +52 -0
- package/DS1/2-core/ds-text.ts +55 -28
- package/DS1/2-core/ds-tooltip.ts +12 -58
- package/DS1/2-core/styles/ds-banner.css +77 -0
- package/DS1/2-core/styles/ds-button.css +67 -0
- package/DS1/2-core/styles/ds-cycle.css +21 -0
- package/DS1/2-core/styles/ds-date.css +9 -0
- package/DS1/2-core/styles/ds-gap.css +93 -0
- package/DS1/2-core/styles/ds-icon.css +30 -0
- package/DS1/2-core/styles/ds-input.css +46 -0
- package/DS1/2-core/styles/ds-pagedots.css +31 -0
- package/DS1/2-core/styles/ds-text.css +29 -0
- package/DS1/2-core/styles/ds-tooltip.css +49 -0
- package/DS1/3-unit/ds-accordion.ts +95 -0
- package/DS1/3-unit/ds-form.ts +304 -0
- package/DS1/3-unit/ds-list.ts +5 -14
- package/DS1/3-unit/ds-row.ts +3 -19
- package/DS1/3-unit/ds-table.ts +3 -86
- package/DS1/3-unit/styles/ds-accordion.css +46 -0
- package/DS1/3-unit/styles/ds-list.css +9 -0
- package/DS1/3-unit/styles/ds-row.css +19 -0
- package/DS1/3-unit/styles/ds-table.css +80 -0
- package/DS1/4-page/ds-container.ts +28 -0
- package/DS1/4-page/ds-grid.ts +37 -50
- package/DS1/4-page/ds-layout.ts +652 -163
- package/DS1/4-page/styles/ds-container.css +35 -0
- package/DS1/4-page/styles/ds-grid.css +56 -0
- package/DS1/4-page/styles/ds-layout.css +246 -0
- package/DS1/index.ts +8 -1
- package/DS1/vite-env.d.ts +13 -0
- package/DS1/x-icon/2x.svg +4 -0
- package/DS1/x-icon/2xdots.svg +18 -0
- package/DS1/x-icon/2xgrid.svg +6 -0
- package/DS1/x-icon/2xlines.svg +6 -0
- package/DS1/x-icon/4x4.svg +18 -0
- package/DS1/x-icon/apple.svg +4 -0
- package/DS1/x-icon/avatar.svg +4 -0
- package/DS1/x-icon/big.svg +4 -0
- package/DS1/x-icon/blank.svg +3 -0
- package/DS1/x-icon/check.svg +3 -0
- package/DS1/x-icon/close.svg +3 -0
- package/DS1/x-icon/collapse.svg +3 -0
- package/DS1/x-icon/color.svg +4 -0
- package/DS1/x-icon/column.svg +5 -0
- package/DS1/x-icon/default.svg +3 -0
- package/DS1/x-icon/delete.svg +5 -0
- package/DS1/x-icon/dictate.svg +6 -0
- package/DS1/x-icon/do.svg +3 -0
- package/DS1/x-icon/down.svg +3 -0
- package/DS1/x-icon/duplicate.svg +4 -0
- package/DS1/x-icon/gallery.svg +5 -0
- package/DS1/x-icon/google.svg +6 -0
- package/DS1/x-icon/head.svg +5 -0
- package/DS1/x-icon/home.svg +3 -0
- package/DS1/x-icon/icon.svg +4 -0
- package/DS1/x-icon/in.svg +4 -0
- package/DS1/x-icon/lock.svg +5 -0
- package/DS1/x-icon/loop.svg +5 -0
- package/DS1/x-icon/mic.svg +5 -0
- package/DS1/x-icon/minimize.svg +3 -0
- package/DS1/x-icon/more.svg +5 -0
- package/DS1/x-icon/neutral.svg +6 -0
- package/DS1/x-icon/note.svg +6 -0
- package/DS1/x-icon/page.svg +4 -0
- package/DS1/x-icon/plus.svg +3 -0
- package/DS1/x-icon/rewind.svg +4 -0
- package/DS1/x-icon/row.svg +5 -0
- package/DS1/x-icon/sdown.svg +3 -0
- package/DS1/x-icon/search.svg +4 -0
- package/DS1/x-icon/see.svg +4 -0
- package/DS1/x-icon/ship.svg +5 -0
- package/DS1/x-icon/star.svg +3 -0
- package/DS1/x-icon/status.svg +4 -0
- package/DS1/x-icon/sup.svg +3 -0
- package/DS1/x-icon/title.svg +3 -0
- package/DS1/x-icon/undo.svg +3 -0
- package/DS1/x-icon/ungroup.svg +4 -0
- package/DS1/x-icon/unhead.svg +3 -0
- package/DS1/x-icon/unicon.svg +3 -0
- package/DS1/x-icon/unlock.svg +5 -0
- package/DS1/x-icon/unmic.svg +6 -0
- package/DS1/x-icon/unsee.svg +5 -0
- package/DS1/x-icon/unstar.svg +3 -0
- package/DS1/x-icon/untitle.svg +3 -0
- package/DS1/x-icon/up.svg +3 -0
- package/LICENSE +1 -1
- package/README.md +4 -4
- package/dist/0-face/device.d.ts +52 -1
- package/dist/0-face/device.d.ts.map +1 -1
- package/dist/0-face/device.js +239 -21
- package/dist/2-core/ds-banner.d.ts +67 -0
- package/dist/2-core/ds-banner.d.ts.map +1 -1
- package/dist/2-core/ds-banner.js +97 -1
- package/dist/2-core/ds-button.d.ts +4 -15
- package/dist/2-core/ds-button.d.ts.map +1 -1
- package/dist/2-core/ds-button.js +14 -86
- package/dist/2-core/ds-card.d.ts +39 -0
- package/dist/2-core/ds-card.d.ts.map +1 -0
- package/dist/2-core/ds-card.js +119 -0
- package/dist/2-core/ds-cycle.d.ts +1 -5
- package/dist/2-core/ds-cycle.d.ts.map +1 -1
- package/dist/2-core/ds-cycle.js +74 -163
- package/dist/2-core/ds-date.d.ts.map +1 -1
- package/dist/2-core/ds-date.js +3 -9
- package/dist/2-core/ds-gap.d.ts +28 -0
- package/dist/2-core/ds-gap.d.ts.map +1 -0
- package/dist/2-core/ds-gap.js +25 -0
- package/dist/2-core/ds-icon.d.ts.map +1 -1
- package/dist/2-core/ds-icon.js +6 -35
- package/dist/2-core/ds-input.d.ts +127 -0
- package/dist/2-core/ds-input.d.ts.map +1 -1
- package/dist/2-core/ds-input.js +252 -1
- package/dist/2-core/ds-pagedots.d.ts +32 -0
- package/dist/2-core/ds-pagedots.d.ts.map +1 -0
- package/dist/2-core/ds-pagedots.js +36 -0
- package/dist/2-core/ds-text.d.ts +5 -3
- package/dist/2-core/ds-text.d.ts.map +1 -1
- package/dist/2-core/ds-text.js +49 -27
- package/dist/2-core/ds-tooltip.d.ts +2 -2
- package/dist/2-core/ds-tooltip.d.ts.map +1 -1
- package/dist/2-core/ds-tooltip.js +11 -57
- package/dist/3-unit/ds-accordion.d.ts +47 -0
- package/dist/3-unit/ds-accordion.d.ts.map +1 -0
- package/dist/3-unit/ds-accordion.js +75 -0
- package/dist/3-unit/ds-form.d.ts +70 -0
- package/dist/3-unit/ds-form.d.ts.map +1 -0
- package/dist/3-unit/ds-form.js +232 -0
- package/dist/3-unit/ds-list.d.ts.map +1 -1
- package/dist/3-unit/ds-list.js +5 -11
- package/dist/3-unit/ds-row.d.ts.map +1 -1
- package/dist/3-unit/ds-row.js +3 -19
- package/dist/3-unit/ds-table.d.ts.map +1 -1
- package/dist/3-unit/ds-table.js +3 -86
- package/dist/{3-unit/row-v1.d.ts → 4-page/ds-container.d.ts} +3 -11
- package/dist/4-page/ds-container.d.ts.map +1 -0
- package/dist/4-page/ds-container.js +11 -0
- package/dist/4-page/ds-grid.d.ts +5 -0
- package/dist/4-page/ds-grid.d.ts.map +1 -1
- package/dist/4-page/ds-grid.js +38 -56
- package/dist/4-page/ds-layout.d.ts +3 -3
- package/dist/4-page/ds-layout.d.ts.map +1 -1
- package/dist/4-page/ds-layout.js +651 -162
- package/dist/ds-one.bundle.js +3247 -2089
- package/dist/ds-one.bundle.js.map +1 -7
- package/dist/ds-one.bundle.min.js +3839 -550
- package/dist/ds-one.bundle.min.js.map +1 -7
- package/dist/index.d.ts +8 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -1
- package/package.json +4 -2
- package/dist/3-unit/doublenav-v1.d.ts +0 -51
- package/dist/3-unit/doublenav-v1.d.ts.map +0 -1
- package/dist/3-unit/doublenav-v1.js +0 -88
- package/dist/3-unit/ds-portfolio-doublenav.d.ts +0 -51
- package/dist/3-unit/ds-portfolio-doublenav.d.ts.map +0 -1
- package/dist/3-unit/ds-portfolio-doublenav.js +0 -88
- package/dist/3-unit/ds-portfolio-panel.d.ts +0 -11
- package/dist/3-unit/ds-portfolio-panel.d.ts.map +0 -1
- package/dist/3-unit/ds-portfolio-panel.js +0 -16
- package/dist/3-unit/ds-portfolio-singlenav.d.ts +0 -32
- package/dist/3-unit/ds-portfolio-singlenav.d.ts.map +0 -1
- package/dist/3-unit/ds-portfolio-singlenav.js +0 -62
- package/dist/3-unit/list-v1.d.ts +0 -11
- package/dist/3-unit/list-v1.d.ts.map +0 -1
- package/dist/3-unit/list-v1.js +0 -15
- package/dist/3-unit/panel-v1.d.ts +0 -11
- package/dist/3-unit/panel-v1.d.ts.map +0 -1
- package/dist/3-unit/panel-v1.js +0 -16
- package/dist/3-unit/row-v1.d.ts.map +0 -1
- package/dist/3-unit/row-v1.js +0 -32
- package/dist/3-unit/singlenav-v1.d.ts +0 -32
- package/dist/3-unit/singlenav-v1.d.ts.map +0 -1
- package/dist/3-unit/singlenav-v1.js +0 -62
package/DS1/x-icon/plus.svg
CHANGED
package/DS1/x-icon/rewind.svg
CHANGED
package/DS1/x-icon/row.svg
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
3
|
+
<rect x="0.5" y="4.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
4
|
+
<rect x="0.5" y="8.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
5
|
+
</svg>
|
package/DS1/x-icon/search.svg
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="5" cy="5" r="4" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
3
|
+
<line x1="8" y1="8" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
4
|
+
</svg>
|
package/DS1/x-icon/see.svg
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7 1C3.5 1 1 5 1 5C1 5 3.5 9 7 9C10.5 9 13 5 13 5C13 5 10.5 1 7 1Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
3
|
+
<circle cx="7" cy="5" r="2" fill="currentColor"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M2 8L1 11H13L12 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
3
|
+
<path d="M3 8V4H6V1H8V4H11V8H3Z" fill="currentColor"/>
|
|
4
|
+
<rect x="5" y="5" width="4" height="2" fill="var(--surface-color, #fff)"/>
|
|
5
|
+
</svg>
|
package/DS1/x-icon/star.svg
CHANGED
package/DS1/x-icon/title.svg
CHANGED
package/DS1/x-icon/undo.svg
CHANGED
package/DS1/x-icon/ungroup.svg
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
|
|
3
|
+
<rect x="6.5" y="6.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
|
|
4
|
+
</svg>
|
package/DS1/x-icon/unhead.svg
CHANGED
package/DS1/x-icon/unicon.svg
CHANGED
package/DS1/x-icon/unlock.svg
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="1" y="5" width="8" height="6" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
3
|
+
<path d="M3 5V3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none"/>
|
|
4
|
+
<circle cx="5" cy="8" r="1" fill="currentColor"/>
|
|
5
|
+
</svg>
|
package/DS1/x-icon/unmic.svg
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
3
|
+
<path d="M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
4
|
+
<line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
5
|
+
<line x1="1" y1="1" x2="9" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
6
|
+
</svg>
|
package/DS1/x-icon/unsee.svg
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7 2C3.5 2 1 6 1 6C1 6 3.5 10 7 10C10.5 10 13 6 13 6C13 6 10.5 2 7 2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
3
|
+
<circle cx="7" cy="6" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
4
|
+
<line x1="2" y1="1" x2="12" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
5
|
+
</svg>
|
package/DS1/x-icon/unstar.svg
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-dasharray="2 1" fill="none"/>
|
|
3
|
+
</svg>
|
package/DS1/x-icon/untitle.svg
CHANGED
package/DS1/x-icon/up.svg
CHANGED
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# DS one (0.
|
|
1
|
+
# DS one (0.3.0-alpha.2)
|
|
2
2
|
|
|
3
3
|
A plug and play design system
|
|
4
4
|
|
|
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
|
|
|
20
20
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
**Note**: Currently published as alpha version `0.
|
|
23
|
+
**Note**: Currently published as alpha version `0.3.0-alpha.2`
|
|
24
24
|
|
|
25
25
|
## Quick Start
|
|
26
26
|
|
|
@@ -41,8 +41,8 @@ yarn add ds-one@alpha
|
|
|
41
41
|
</script>
|
|
42
42
|
</head>
|
|
43
43
|
<body>
|
|
44
|
-
<ds-button variant="primary"
|
|
45
|
-
<ds-text
|
|
44
|
+
<ds-button variant="primary" text="Get Started"></ds-button>
|
|
45
|
+
<ds-text text="Welcome"></ds-text>
|
|
46
46
|
</body>
|
|
47
47
|
</html>
|
|
48
48
|
```
|
package/dist/0-face/device.d.ts
CHANGED
|
@@ -9,6 +9,17 @@ export interface DeviceInfo {
|
|
|
9
9
|
screenWidth: number;
|
|
10
10
|
screenHeight: number;
|
|
11
11
|
}
|
|
12
|
+
export type ScalingMode = "auto" | "fixed" | "fluid";
|
|
13
|
+
export interface ScalingConfig {
|
|
14
|
+
mode: ScalingMode;
|
|
15
|
+
baseWidth: number;
|
|
16
|
+
minScale: number;
|
|
17
|
+
maxScale: number;
|
|
18
|
+
}
|
|
19
|
+
/** Reactive scaling factor signal */
|
|
20
|
+
export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
|
|
21
|
+
/** Current scaling configuration */
|
|
22
|
+
export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
|
|
12
23
|
/**
|
|
13
24
|
* Comprehensive mobile device detection
|
|
14
25
|
* Combines user agent detection, touch capability, and viewport size
|
|
@@ -19,7 +30,47 @@ export declare function detectMobileDevice(): boolean;
|
|
|
19
30
|
*/
|
|
20
31
|
export declare function getDeviceInfo(): DeviceInfo;
|
|
21
32
|
/**
|
|
22
|
-
*
|
|
33
|
+
* Calculate the scaling factor based on viewport width
|
|
34
|
+
* @param viewportWidth - Current viewport width in pixels
|
|
35
|
+
* @param config - Scaling configuration
|
|
36
|
+
* @returns The calculated scaling factor
|
|
37
|
+
*/
|
|
38
|
+
export declare function calculateScalingFactor(viewportWidth: number, config?: ScalingConfig): number;
|
|
39
|
+
/**
|
|
40
|
+
* Set the scaling configuration
|
|
41
|
+
* @param config - Partial scaling configuration to apply
|
|
42
|
+
*/
|
|
43
|
+
export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
|
|
44
|
+
/**
|
|
45
|
+
* Update the scaling factor based on current viewport
|
|
46
|
+
* Desktop always uses factor 1; mobile uses computed factor
|
|
47
|
+
*/
|
|
48
|
+
export declare function updateScalingFactor(): void;
|
|
49
|
+
/**
|
|
50
|
+
* Get the current scaling factor
|
|
51
|
+
* @returns The current scaling factor
|
|
52
|
+
*/
|
|
53
|
+
export declare function getScalingFactor(): number;
|
|
54
|
+
/**
|
|
55
|
+
* Convert a design pixel value to scaled pixels
|
|
56
|
+
* @param designPx - The design pixel value (based on 280px width)
|
|
57
|
+
* @returns The scaled pixel value
|
|
58
|
+
*/
|
|
59
|
+
export declare function scale(designPx: number): number;
|
|
60
|
+
/**
|
|
61
|
+
* Convert a scaled pixel value back to design pixels
|
|
62
|
+
* @param scaledPx - The scaled pixel value
|
|
63
|
+
* @returns The design pixel value
|
|
64
|
+
*/
|
|
65
|
+
export declare function unscale(scaledPx: number): number;
|
|
66
|
+
/**
|
|
67
|
+
* Initialize device detection and scaling
|
|
68
|
+
* Sets CSS classes (.mobile/.desktop) and --sf custom property
|
|
23
69
|
*/
|
|
24
70
|
export declare function initDeviceDetection(): DeviceInfo;
|
|
71
|
+
/**
|
|
72
|
+
* Disable double-tap to zoom in the browser (app-like behavior)
|
|
73
|
+
* Prevents all zoom gestures including double-tap and pinch-to-zoom
|
|
74
|
+
*/
|
|
75
|
+
export declare function applike(): void;
|
|
25
76
|
//# sourceMappingURL=device.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAaD,qCAAqC;AACrC,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAE/C,oCAAoC;AACpC,eAAO,MAAM,aAAa,yDAA8C,CAAC;AAMzE;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAMD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAYR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAiC1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD;AAiCD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}
|
package/dist/0-face/device.js
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Device detection and
|
|
1
|
+
// device.ts
|
|
2
|
+
// Device detection, context utilities, and responsive scaling
|
|
3
|
+
import { signal } from "@lit-labs/signals";
|
|
4
|
+
// ============================================================================
|
|
5
|
+
// Configuration & Signals
|
|
6
|
+
// ============================================================================
|
|
7
|
+
const defaultScalingConfig = {
|
|
8
|
+
mode: "auto",
|
|
9
|
+
baseWidth: 280,
|
|
10
|
+
minScale: 0.75,
|
|
11
|
+
maxScale: 2.0,
|
|
12
|
+
};
|
|
13
|
+
/** Reactive scaling factor signal */
|
|
14
|
+
export const scalingFactor = signal(1);
|
|
15
|
+
/** Current scaling configuration */
|
|
16
|
+
export const scalingConfig = signal(defaultScalingConfig);
|
|
17
|
+
// ============================================================================
|
|
18
|
+
// Device Detection
|
|
19
|
+
// ============================================================================
|
|
3
20
|
/**
|
|
4
21
|
* Comprehensive mobile device detection
|
|
5
22
|
* Combines user agent detection, touch capability, and viewport size
|
|
@@ -50,30 +67,118 @@ export function getDeviceInfo() {
|
|
|
50
67
|
screenHeight,
|
|
51
68
|
};
|
|
52
69
|
}
|
|
70
|
+
// ============================================================================
|
|
71
|
+
// Scaling
|
|
72
|
+
// ============================================================================
|
|
53
73
|
/**
|
|
54
|
-
*
|
|
74
|
+
* Calculate the scaling factor based on viewport width
|
|
75
|
+
* @param viewportWidth - Current viewport width in pixels
|
|
76
|
+
* @param config - Scaling configuration
|
|
77
|
+
* @returns The calculated scaling factor
|
|
78
|
+
*/
|
|
79
|
+
export function calculateScalingFactor(viewportWidth, config = scalingConfig.get()) {
|
|
80
|
+
if (config.mode === "fixed") {
|
|
81
|
+
return 1;
|
|
82
|
+
}
|
|
83
|
+
const rawScale = viewportWidth / config.baseWidth;
|
|
84
|
+
const clampedScale = Math.max(config.minScale, Math.min(config.maxScale, rawScale));
|
|
85
|
+
return Number(clampedScale.toFixed(3));
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Set the scaling configuration
|
|
89
|
+
* @param config - Partial scaling configuration to apply
|
|
90
|
+
*/
|
|
91
|
+
export function setScalingConfig(config) {
|
|
92
|
+
const currentConfig = scalingConfig.get();
|
|
93
|
+
const newConfig = { ...currentConfig, ...config };
|
|
94
|
+
scalingConfig.set(newConfig);
|
|
95
|
+
// Recalculate scaling factor if in browser
|
|
96
|
+
if (typeof window !== "undefined") {
|
|
97
|
+
updateScalingFactor();
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Update the scaling factor based on current viewport
|
|
102
|
+
* Desktop always uses factor 1; mobile uses computed factor
|
|
103
|
+
*/
|
|
104
|
+
export function updateScalingFactor() {
|
|
105
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const isMobile = detectMobileDevice();
|
|
109
|
+
// Desktop: always use factor 1
|
|
110
|
+
if (!isMobile) {
|
|
111
|
+
const factor = 1;
|
|
112
|
+
scalingFactor.set(factor);
|
|
113
|
+
document.documentElement.style.setProperty("--sf", factor.toString());
|
|
114
|
+
window.dispatchEvent(new CustomEvent("scaling-changed", {
|
|
115
|
+
detail: { scalingFactor: factor, config: scalingConfig.get() },
|
|
116
|
+
}));
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
// Mobile: compute scaling based on viewport
|
|
120
|
+
const viewportWidth = document.documentElement.clientWidth;
|
|
121
|
+
const config = scalingConfig.get();
|
|
122
|
+
const newFactor = calculateScalingFactor(viewportWidth, config);
|
|
123
|
+
scalingFactor.set(newFactor);
|
|
124
|
+
document.documentElement.style.setProperty("--sf", newFactor.toString());
|
|
125
|
+
window.dispatchEvent(new CustomEvent("scaling-changed", {
|
|
126
|
+
detail: { scalingFactor: newFactor, config },
|
|
127
|
+
}));
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Get the current scaling factor
|
|
131
|
+
* @returns The current scaling factor
|
|
132
|
+
*/
|
|
133
|
+
export function getScalingFactor() {
|
|
134
|
+
return scalingFactor.get();
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Convert a design pixel value to scaled pixels
|
|
138
|
+
* @param designPx - The design pixel value (based on 280px width)
|
|
139
|
+
* @returns The scaled pixel value
|
|
140
|
+
*/
|
|
141
|
+
export function scale(designPx) {
|
|
142
|
+
return designPx * scalingFactor.get();
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Convert a scaled pixel value back to design pixels
|
|
146
|
+
* @param scaledPx - The scaled pixel value
|
|
147
|
+
* @returns The design pixel value
|
|
148
|
+
*/
|
|
149
|
+
export function unscale(scaledPx) {
|
|
150
|
+
const factor = scalingFactor.get();
|
|
151
|
+
return factor === 0 ? scaledPx : scaledPx / factor;
|
|
152
|
+
}
|
|
153
|
+
// ============================================================================
|
|
154
|
+
// Unified Initialization
|
|
155
|
+
// ============================================================================
|
|
156
|
+
/**
|
|
157
|
+
* Initialize device detection and scaling
|
|
158
|
+
* Sets CSS classes (.mobile/.desktop) and --sf custom property
|
|
55
159
|
*/
|
|
56
160
|
export function initDeviceDetection() {
|
|
57
161
|
const deviceInfo = getDeviceInfo();
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
document.documentElement.
|
|
68
|
-
|
|
162
|
+
if (typeof document === "undefined") {
|
|
163
|
+
return deviceInfo;
|
|
164
|
+
}
|
|
165
|
+
// Set device class on html element
|
|
166
|
+
if (deviceInfo.isMobile) {
|
|
167
|
+
document.documentElement.classList.add("mobile");
|
|
168
|
+
document.documentElement.classList.remove("desktop");
|
|
169
|
+
}
|
|
170
|
+
else {
|
|
171
|
+
document.documentElement.classList.add("desktop");
|
|
172
|
+
document.documentElement.classList.remove("mobile");
|
|
173
|
+
}
|
|
174
|
+
// Update scaling factor (handles --sf CSS property)
|
|
175
|
+
updateScalingFactor();
|
|
176
|
+
// Log device info
|
|
177
|
+
const factor = scalingFactor.get();
|
|
178
|
+
if (deviceInfo.isMobile) {
|
|
179
|
+
console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${factor.toFixed(2)}`);
|
|
69
180
|
}
|
|
70
181
|
else {
|
|
71
|
-
// Desktop - no scaling
|
|
72
|
-
if (typeof document !== "undefined") {
|
|
73
|
-
document.documentElement.style.setProperty("--sf", "1");
|
|
74
|
-
// Also set --sf for backwards compatibility
|
|
75
|
-
document.documentElement.style.setProperty("--sf", "1");
|
|
76
|
-
}
|
|
77
182
|
console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
|
|
78
183
|
}
|
|
79
184
|
// Log additional details in development mode
|
|
@@ -85,6 +190,7 @@ export function initDeviceDetection() {
|
|
|
85
190
|
isDesktop: deviceInfo.isDesktop,
|
|
86
191
|
isTouchCapable: deviceInfo.isTouchCapable,
|
|
87
192
|
viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
|
|
193
|
+
scalingFactor: factor,
|
|
88
194
|
userAgent: deviceInfo.userAgent,
|
|
89
195
|
});
|
|
90
196
|
}
|
|
@@ -102,7 +208,7 @@ if (typeof window !== "undefined") {
|
|
|
102
208
|
// DOM is already ready
|
|
103
209
|
initDeviceDetection();
|
|
104
210
|
}
|
|
105
|
-
//
|
|
211
|
+
// Single debounced resize handler for both device detection + scaling
|
|
106
212
|
let resizeTimeout;
|
|
107
213
|
window.addEventListener("resize", () => {
|
|
108
214
|
clearTimeout(resizeTimeout);
|
|
@@ -110,4 +216,116 @@ if (typeof window !== "undefined") {
|
|
|
110
216
|
initDeviceDetection();
|
|
111
217
|
}, 100);
|
|
112
218
|
});
|
|
219
|
+
// Also handle orientation change
|
|
220
|
+
window.addEventListener("orientationchange", () => {
|
|
221
|
+
setTimeout(initDeviceDetection, 100);
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
// ============================================================================
|
|
225
|
+
// App-like Behavior
|
|
226
|
+
// ============================================================================
|
|
227
|
+
/**
|
|
228
|
+
* Disable double-tap to zoom in the browser (app-like behavior)
|
|
229
|
+
* Prevents all zoom gestures including double-tap and pinch-to-zoom
|
|
230
|
+
*/
|
|
231
|
+
export function applike() {
|
|
232
|
+
if (typeof document === "undefined" || typeof window === "undefined") {
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
// Set viewport meta tag to prevent zoom - this is the most important step
|
|
236
|
+
let viewport = document.querySelector('meta[name="viewport"]');
|
|
237
|
+
if (!viewport) {
|
|
238
|
+
viewport = document.createElement("meta");
|
|
239
|
+
viewport.setAttribute("name", "viewport");
|
|
240
|
+
document.head.appendChild(viewport);
|
|
241
|
+
}
|
|
242
|
+
viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
|
|
243
|
+
// Apply touch-action: pan-x pan-y globally to prevent zoom but allow panning
|
|
244
|
+
const style = document.createElement("style");
|
|
245
|
+
style.id = "ds-one-applike-style";
|
|
246
|
+
style.textContent = `
|
|
247
|
+
* {
|
|
248
|
+
touch-action: pan-x pan-y !important;
|
|
249
|
+
-ms-touch-action: pan-x pan-y !important;
|
|
250
|
+
}
|
|
251
|
+
html, body {
|
|
252
|
+
touch-action: pan-x pan-y !important;
|
|
253
|
+
-ms-touch-action: pan-x pan-y !important;
|
|
254
|
+
}
|
|
255
|
+
`;
|
|
256
|
+
// Remove existing style if present
|
|
257
|
+
const existingStyle = document.getElementById("ds-one-applike-style");
|
|
258
|
+
if (existingStyle) {
|
|
259
|
+
existingStyle.remove();
|
|
260
|
+
}
|
|
261
|
+
document.head.appendChild(style);
|
|
262
|
+
// Track touch events to prevent double-tap zoom
|
|
263
|
+
let lastTouchEnd = 0;
|
|
264
|
+
let touchStartTime = 0;
|
|
265
|
+
const preventZoom = (event) => {
|
|
266
|
+
// Prevent pinch zoom (two fingers)
|
|
267
|
+
if (event instanceof TouchEvent) {
|
|
268
|
+
if (event.touches.length > 1) {
|
|
269
|
+
event.preventDefault();
|
|
270
|
+
event.stopPropagation();
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
const now = Date.now();
|
|
274
|
+
if (event.type === "touchstart") {
|
|
275
|
+
// If touchstart happens within 300ms of last touchend, it's likely a double-tap
|
|
276
|
+
if (now - lastTouchEnd < 300) {
|
|
277
|
+
event.preventDefault();
|
|
278
|
+
event.stopPropagation();
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
touchStartTime = now;
|
|
282
|
+
}
|
|
283
|
+
else if (event.type === "touchend") {
|
|
284
|
+
const touchDuration = now - touchStartTime;
|
|
285
|
+
// If this is a quick tap (< 300ms) and happened soon after previous touchend, prevent it
|
|
286
|
+
if (touchDuration < 300 && now - lastTouchEnd < 300) {
|
|
287
|
+
event.preventDefault();
|
|
288
|
+
event.stopPropagation();
|
|
289
|
+
return;
|
|
290
|
+
}
|
|
291
|
+
lastTouchEnd = now;
|
|
292
|
+
}
|
|
293
|
+
else if (event.type === "touchmove") {
|
|
294
|
+
// Prevent any touchmove that might trigger zoom
|
|
295
|
+
if (event.touches.length > 1) {
|
|
296
|
+
event.preventDefault();
|
|
297
|
+
event.stopPropagation();
|
|
298
|
+
return;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
// Prevent wheel zoom with ctrl/cmd key (common on trackpads)
|
|
303
|
+
if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
|
|
304
|
+
event.preventDefault();
|
|
305
|
+
event.stopPropagation();
|
|
306
|
+
return;
|
|
307
|
+
}
|
|
308
|
+
};
|
|
309
|
+
// Use capture phase to catch events earlier
|
|
310
|
+
const options = { passive: false, capture: true };
|
|
311
|
+
// Prevent all zoom gestures - use capture phase
|
|
312
|
+
document.addEventListener("touchstart", preventZoom, options);
|
|
313
|
+
document.addEventListener("touchmove", preventZoom, options);
|
|
314
|
+
document.addEventListener("touchend", preventZoom, options);
|
|
315
|
+
document.addEventListener("touchcancel", preventZoom, options);
|
|
316
|
+
// Prevent wheel zoom
|
|
317
|
+
document.addEventListener("wheel", preventZoom, options);
|
|
318
|
+
// Prevent gesture events (iOS Safari) - use capture phase
|
|
319
|
+
document.addEventListener("gesturestart", (e) => {
|
|
320
|
+
e.preventDefault();
|
|
321
|
+
e.stopPropagation();
|
|
322
|
+
}, options);
|
|
323
|
+
document.addEventListener("gesturechange", (e) => {
|
|
324
|
+
e.preventDefault();
|
|
325
|
+
e.stopPropagation();
|
|
326
|
+
}, options);
|
|
327
|
+
document.addEventListener("gestureend", (e) => {
|
|
328
|
+
e.preventDefault();
|
|
329
|
+
e.stopPropagation();
|
|
330
|
+
}, options);
|
|
113
331
|
}
|
|
@@ -1 +1,68 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./ds-text.js";
|
|
3
|
+
import "./ds-button.js";
|
|
4
|
+
declare global {
|
|
5
|
+
interface CustomElementRegistry {
|
|
6
|
+
define(name: string, constructor: typeof LitElement): void;
|
|
7
|
+
}
|
|
8
|
+
var customElements: CustomElementRegistry;
|
|
9
|
+
}
|
|
10
|
+
export declare class Banner extends LitElement {
|
|
11
|
+
static properties: {
|
|
12
|
+
text: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
};
|
|
15
|
+
action: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
};
|
|
18
|
+
href: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
};
|
|
21
|
+
mailto: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
};
|
|
24
|
+
subject: {
|
|
25
|
+
type: StringConstructor;
|
|
26
|
+
};
|
|
27
|
+
describe: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
};
|
|
30
|
+
appVersion: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
attribute: string;
|
|
33
|
+
};
|
|
34
|
+
variant: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
};
|
|
37
|
+
version: {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
};
|
|
40
|
+
_showVersion: {
|
|
41
|
+
type: BooleanConstructor;
|
|
42
|
+
state: boolean;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
text: string;
|
|
46
|
+
action: string;
|
|
47
|
+
href: string;
|
|
48
|
+
mailto: string;
|
|
49
|
+
subject: string;
|
|
50
|
+
describe: string;
|
|
51
|
+
appVersion: string;
|
|
52
|
+
variant: string;
|
|
53
|
+
version: string;
|
|
54
|
+
_showVersion: boolean;
|
|
55
|
+
private _boundUpdate;
|
|
56
|
+
connectedCallback(): void;
|
|
57
|
+
disconnectedCallback(): void;
|
|
58
|
+
static styles: import("lit").CSSResult;
|
|
59
|
+
private _toggleVersion;
|
|
60
|
+
private _getMailtoHref;
|
|
61
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
62
|
+
}
|
|
63
|
+
declare global {
|
|
64
|
+
interface HTMLElementTagNameMap {
|
|
65
|
+
"ds-banner": Banner;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
1
68
|
//# sourceMappingURL=ds-banner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAGxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,OAAO,EAAE,MAAM,CAAM;IACrB,QAAQ,EAAE,MAAM,CAAM;IACtB,UAAU,EAAE,MAAM,CAAM;IACxB,OAAO,EAAE,MAAM,CAAa;IAC5B,OAAO,EAAE,MAAM,CAAM;IACrB,YAAY,EAAE,OAAO,CAAS;IAE9B,OAAO,CAAC,YAAY,CAA8B;IAElD,iBAAiB;IAOjB,oBAAoB;IAMpB,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IA6BtB,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
|