@cas-smartdesign/header-layout 3.0.1
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/LICENSE +8 -0
- package/dist/docs/doc.css +1 -0
- package/dist/docs/doc.mjs +288 -0
- package/dist/docs/index.html +26 -0
- package/dist/docs/manual-switch-content.js +1 -0
- package/dist/docs/manual-switch-style.js +1 -0
- package/dist/docs/monkey.svg +55 -0
- package/dist/header-layout-with-externals.js +61 -0
- package/dist/header-layout-with-externals.js.map +7 -0
- package/dist/header-layout.d.ts +56 -0
- package/dist/header-layout.mjs +147 -0
- package/dist/header-layout.mjs.map +1 -0
- package/npm-third-party-licenses.json +187 -0
- package/package.json +33 -0
- package/readme.md +16 -0
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
{
|
|
2
|
+
"@cypress/vite-dev-server@5.0.7": {
|
|
3
|
+
"licenses": "MIT",
|
|
4
|
+
"repository": "https://github.com/cypress-io/cypress",
|
|
5
|
+
"licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
|
|
6
|
+
},
|
|
7
|
+
"@rollup/plugin-node-resolve@15.2.3": {
|
|
8
|
+
"licenses": "MIT",
|
|
9
|
+
"repository": "https://github.com/rollup/plugins",
|
|
10
|
+
"licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
|
|
11
|
+
},
|
|
12
|
+
"@types/node@20.10.6": {
|
|
13
|
+
"licenses": "MIT",
|
|
14
|
+
"repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
|
|
15
|
+
"licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
|
|
16
|
+
},
|
|
17
|
+
"@types/postcss-prefix-selector@1.16.3": {
|
|
18
|
+
"licenses": "MIT",
|
|
19
|
+
"repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
|
|
20
|
+
"licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
|
|
21
|
+
},
|
|
22
|
+
"@typescript-eslint/eslint-plugin@6.17.0": {
|
|
23
|
+
"licenses": "MIT",
|
|
24
|
+
"repository": "https://github.com/typescript-eslint/typescript-eslint",
|
|
25
|
+
"licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
|
|
26
|
+
},
|
|
27
|
+
"@typescript-eslint/parser@6.17.0": {
|
|
28
|
+
"licenses": "BSD-2-Clause",
|
|
29
|
+
"repository": "https://github.com/typescript-eslint/typescript-eslint",
|
|
30
|
+
"licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
|
|
31
|
+
},
|
|
32
|
+
"@vitest/coverage-v8@1.1.1": {
|
|
33
|
+
"licenses": "MIT",
|
|
34
|
+
"repository": "https://github.com/vitest-dev/vitest",
|
|
35
|
+
"licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
|
|
36
|
+
},
|
|
37
|
+
"@vitest/ui@1.1.1": {
|
|
38
|
+
"licenses": "MIT",
|
|
39
|
+
"repository": "https://github.com/vitest-dev/vitest",
|
|
40
|
+
"licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
|
|
41
|
+
},
|
|
42
|
+
"axe-core@4.8.3": {
|
|
43
|
+
"licenses": "MPL-2.0",
|
|
44
|
+
"repository": "https://github.com/dequelabs/axe-core",
|
|
45
|
+
"licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
|
|
46
|
+
},
|
|
47
|
+
"cypress-axe@1.5.0": {
|
|
48
|
+
"licenses": "MIT",
|
|
49
|
+
"repository": "https://github.com/component-driven/cypress-axe",
|
|
50
|
+
"licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
|
|
51
|
+
},
|
|
52
|
+
"cypress-real-events@1.13.0": {
|
|
53
|
+
"licenses": "MIT",
|
|
54
|
+
"repository": "https://github.com/dmtrKovalenko/cypress-real-events",
|
|
55
|
+
"licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
|
|
56
|
+
},
|
|
57
|
+
"cypress@13.6.2": {
|
|
58
|
+
"licenses": "MIT",
|
|
59
|
+
"repository": "https://github.com/cypress-io/cypress",
|
|
60
|
+
"licenseUrl": "https://cypress.io"
|
|
61
|
+
},
|
|
62
|
+
"esbuild@0.19.11": {
|
|
63
|
+
"licenses": "MIT",
|
|
64
|
+
"repository": "https://github.com/evanw/esbuild",
|
|
65
|
+
"licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
|
|
66
|
+
},
|
|
67
|
+
"eslint-config-google@0.14.0": {
|
|
68
|
+
"licenses": "Apache-2.0",
|
|
69
|
+
"repository": "https://github.com/google/eslint-config-google",
|
|
70
|
+
"licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
|
|
71
|
+
},
|
|
72
|
+
"eslint-config-prettier@9.1.0": {
|
|
73
|
+
"licenses": "MIT",
|
|
74
|
+
"repository": "https://github.com/prettier/eslint-config-prettier",
|
|
75
|
+
"licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
|
|
76
|
+
},
|
|
77
|
+
"eslint@8.56.0": {
|
|
78
|
+
"licenses": "MIT",
|
|
79
|
+
"repository": "https://github.com/eslint/eslint",
|
|
80
|
+
"licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
|
|
81
|
+
},
|
|
82
|
+
"github-markdown-css@5.5.0": {
|
|
83
|
+
"licenses": "MIT",
|
|
84
|
+
"repository": "https://github.com/sindresorhus/github-markdown-css",
|
|
85
|
+
"licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
|
|
86
|
+
},
|
|
87
|
+
"highlight.js@11.9.0": {
|
|
88
|
+
"licenses": "BSD-3-Clause",
|
|
89
|
+
"repository": "https://github.com/highlightjs/highlight.js",
|
|
90
|
+
"licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
|
|
91
|
+
},
|
|
92
|
+
"junit-report-builder@3.1.0": {
|
|
93
|
+
"licenses": "MIT",
|
|
94
|
+
"repository": "https://github.com/davidparsson/junit-report-builder",
|
|
95
|
+
"licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
|
|
96
|
+
},
|
|
97
|
+
"lint-staged@15.2.0": {
|
|
98
|
+
"licenses": "MIT",
|
|
99
|
+
"repository": "https://github.com/okonet/lint-staged",
|
|
100
|
+
"licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
|
|
101
|
+
},
|
|
102
|
+
"marked@11.1.1": {
|
|
103
|
+
"licenses": "MIT",
|
|
104
|
+
"repository": "https://github.com/markedjs/marked",
|
|
105
|
+
"licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
|
|
106
|
+
},
|
|
107
|
+
"postcss-prefix-selector@1.16.0": {
|
|
108
|
+
"licenses": "MIT",
|
|
109
|
+
"repository": "https://github.com/RadValentin/postcss-prefix-selector",
|
|
110
|
+
"licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
|
|
111
|
+
},
|
|
112
|
+
"postcss@8.4.32": {
|
|
113
|
+
"licenses": "MIT",
|
|
114
|
+
"repository": "https://github.com/postcss/postcss",
|
|
115
|
+
"licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
|
|
116
|
+
},
|
|
117
|
+
"prettier@3.1.1": {
|
|
118
|
+
"licenses": "MIT",
|
|
119
|
+
"repository": "https://github.com/prettier/prettier",
|
|
120
|
+
"licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
|
|
121
|
+
},
|
|
122
|
+
"resolve-pkg@2.0.0": {
|
|
123
|
+
"licenses": "MIT",
|
|
124
|
+
"repository": "https://github.com/sindresorhus/resolve-pkg",
|
|
125
|
+
"licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
|
|
126
|
+
},
|
|
127
|
+
"sass@1.69.6": {
|
|
128
|
+
"licenses": "MIT",
|
|
129
|
+
"repository": "https://github.com/sass/dart-sass",
|
|
130
|
+
"licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
|
|
131
|
+
},
|
|
132
|
+
"stylelint-config-recommended-scss@14.0.0": {
|
|
133
|
+
"licenses": "MIT",
|
|
134
|
+
"repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
|
|
135
|
+
"licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
|
|
136
|
+
},
|
|
137
|
+
"stylelint-config-standard@36.0.0": {
|
|
138
|
+
"licenses": "MIT",
|
|
139
|
+
"repository": "https://github.com/stylelint/stylelint-config-standard",
|
|
140
|
+
"licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
|
|
141
|
+
},
|
|
142
|
+
"stylelint-scss@6.0.0": {
|
|
143
|
+
"licenses": "MIT",
|
|
144
|
+
"repository": "https://github.com/stylelint-scss/stylelint-scss",
|
|
145
|
+
"licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
|
|
146
|
+
},
|
|
147
|
+
"stylelint@16.1.0": {
|
|
148
|
+
"licenses": "MIT",
|
|
149
|
+
"repository": "https://github.com/stylelint/stylelint",
|
|
150
|
+
"licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
|
|
151
|
+
},
|
|
152
|
+
"tsup@8.0.1": {
|
|
153
|
+
"licenses": "MIT",
|
|
154
|
+
"repository": "https://github.com/egoist/tsup",
|
|
155
|
+
"licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
|
|
156
|
+
},
|
|
157
|
+
"turbo@1.11.2": {
|
|
158
|
+
"licenses": "MPL-2.0",
|
|
159
|
+
"repository": "https://github.com/vercel/turbo",
|
|
160
|
+
"licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
|
|
161
|
+
},
|
|
162
|
+
"typescript@5.3.3": {
|
|
163
|
+
"licenses": "Apache-2.0",
|
|
164
|
+
"repository": "https://github.com/Microsoft/TypeScript",
|
|
165
|
+
"licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
|
|
166
|
+
},
|
|
167
|
+
"vite-tsconfig-paths@4.2.3": {
|
|
168
|
+
"licenses": "MIT",
|
|
169
|
+
"repository": "https://github.com/aleclarson/vite-tsconfig-paths",
|
|
170
|
+
"licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
|
|
171
|
+
},
|
|
172
|
+
"vite@5.0.10": {
|
|
173
|
+
"licenses": "MIT",
|
|
174
|
+
"repository": "https://github.com/vitejs/vite",
|
|
175
|
+
"licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
|
|
176
|
+
},
|
|
177
|
+
"vitest@1.1.1": {
|
|
178
|
+
"licenses": "MIT",
|
|
179
|
+
"repository": "https://github.com/vitest-dev/vitest",
|
|
180
|
+
"licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
|
|
181
|
+
},
|
|
182
|
+
"yargs@17.7.2": {
|
|
183
|
+
"licenses": "MIT",
|
|
184
|
+
"repository": "https://github.com/yargs/yargs",
|
|
185
|
+
"licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
|
|
186
|
+
}
|
|
187
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cas-smartdesign/header-layout",
|
|
3
|
+
"version": "3.0.1",
|
|
4
|
+
"description": "A scrollable layout element with sticky header.",
|
|
5
|
+
"main": "dist/header-layout-with-externals.js",
|
|
6
|
+
"module": "dist/header-layout.mjs",
|
|
7
|
+
"types": "dist/header-layout.d.ts",
|
|
8
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"@cas-smartdesign/element-base": "^5.0.1"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"dist",
|
|
14
|
+
"npm-third-party-licenses.json"
|
|
15
|
+
],
|
|
16
|
+
"publishConfig": {
|
|
17
|
+
"registry": "https://registry.npmjs.org/",
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@cas-smartdesign/license-generator": "^1.6.1",
|
|
22
|
+
"@cas-smartdesign/element-preview": "^0.2.1"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"version": "pnpm version",
|
|
26
|
+
"generate-declaration": "tsc -p tsconfig.types.json",
|
|
27
|
+
"build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
|
|
28
|
+
"build": "pnpm generate-license && pnpm build:no-license",
|
|
29
|
+
"watch": "vite build --watch",
|
|
30
|
+
"dev": "vite",
|
|
31
|
+
"generate-license": "sd-license-generator --r ../../../"
|
|
32
|
+
}
|
|
33
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# @cas-smartdesign/header-layout
|
|
2
|
+
|
|
3
|
+
A layout element with sticky header.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
The layout provides two extension points via slot-elements. It can be used to add `header` and `content` with similar slot names.
|
|
8
|
+
|
|
9
|
+
It is also possible to configure the header in a way to add both normal and small header elements. In this scenario the normal header is shown until the height difference between the two headers is smaller than the `scrollTop`. The small header is shown otherwise. In order to get this behavior one of the following approaches has to be used:
|
|
10
|
+
|
|
11
|
+
- Add normal and small header elements in this order to `header` slot.
|
|
12
|
+
- Add event listener to `header-switch` event and set a `minimumHeaderHeight` value. The event is fired when `shouldShowNormalHeader` flag changes therefore it is possible to change the only header element accordingly.
|
|
13
|
+
|
|
14
|
+
In addition to the above mentioned approaches the element also dispatches `header-layout-scroll` CustomEvents with the `scrollTop` detail, allowing the consumer elements to do optimized layout changes.
|
|
15
|
+
|
|
16
|
+
## Examples
|