filepond 5.0.0-alpha.4 → 5.0.0-alpha.5
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const defaultStyles = "/* Default FilePond Styles */\n:host {\n /*
|
|
1
|
+
const defaultStyles = "/* Default FilePond Styles */\n:host {\n /* Default colors */\n --default-color: FieldText;\n --default-background-color: color-mix(in srgb, FieldText 10%, Canvas 100%);\n --default-padding: 1em;\n --default-border-radius: 1.25em;\n --default-backdrop-filter: blur(20px) saturate(1.25);\n --default-primary-color: AccentColor;\n --default-border: 1px solid rgb(from FieldText r g b / 0.1);\n\n /* Layout */\n display: flex;\n flex-direction: column;\n gap: var(--default-padding);\n\n /* Slot layout */\n & slot {\n position: relative;\n isolation: isolate;\n }\n}\n\n/* slot and slotted element styles */\n::slotted(input[type='file']) {\n position: absolute;\n width: 100%;\n padding: 0;\n margin: 0;\n z-index: -1;\n pointer-events: none;\n user-select: none;\n\n /* hide from view */\n mask: linear-gradient(transparent, transparent);\n\n /* we align it to the top so Safari tooltip points to the field */\n top: 0;\n left: 0;\n}\n\n::slotted(label) {\n --width-px: calc(var(--width) * 1px);\n --center-px: calc((var(--width-px) - (2 * var(--default-padding))) * 0.5);\n\n display: inline-block;\n transform: translateX(calc(var(--center-px) - 50%));\n align-self: flex-start;\n text-align: center;\n\n padding-top: var(--default-padding);\n padding-bottom: var(--default-padding);\n}\n\n/* sub elements */\nfile-pond-drop-area {\n --border-radius: var(--default-border-radius);\n --border: var(--default-border);\n}\n\nfile-pond-drop-indicator {\n --border-radius: var(--default-border-radius);\n --background-color: rgb(from var(--default-color) r g b / 0.1);\n}\n\nfile-pond-entry-list {\n --entry-color: var(--default-color);\n --entry-background-color: var(--default-background-color);\n\n --entry-shadow: 0 1px 4px rgb(0 0 0 / 0.2);\n --entry-lifted-shadow: 0 4px 8px rgb(0 0 0 / 0.5);\n\n --entry-button-outline: 0 0 0 1.5px currentColor;\n\n &[empty] {\n margin-top: calc(-1 * var(--default-padding));\n }\n\n &::part(entry-button) {\n --btn-size: 1.5em;\n --btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * 0.625);\n --btn-background-color: rgb(from var(--entry-color) r g b / 0.15);\n --btn-icon-stroke: 2.5;\n\n box-shadow: 0 0 0 0 transparent;\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(entry-button):hover {\n background-color: rgb(from var(--entry-color) r g b / 0.25);\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(entry-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button) {\n --btn-border-radius: var(--panel-border-radius);\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(media-button):hover {\n background-color: rgb(from currentColor r g b / 0.15);\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(list) {\n display: flex;\n flex-direction: column;\n gap: calc(var(--default-padding) * 0.5);\n }\n\n &::part(entry) {\n display: grid;\n grid: min-content 1fr min-content / min-content 1fr min-content;\n }\n\n &::part(entry-load-state) {\n grid-row: 1;\n grid-column: 1;\n padding: var(--entry-padding);\n }\n\n &::part(entry-info) {\n grid-row: 1;\n grid-column: 2;\n padding-top: var(--entry-padding);\n padding-bottom: var(--entry-padding);\n }\n\n &::part(entry-store-state) {\n grid-row: 1;\n grid-column: 3;\n padding: var(--entry-padding);\n }\n\n &::part(entry-status) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(entry-media) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(media-controls) {\n grid-row: 2;\n grid-column: 1 / 4;\n align-self: end;\n color: #fff;\n margin: 0.6125em;\n\n /* style for buttons in this component */\n --btn-size: 1.25em;\n --btn-icon-stroke: 2.5;\n --btn-icon-size: 0.75em;\n\n /* panel style in this component */\n --panel-border-radius: 0.25em;\n --panel-border-radius: calc(var(--entry-border-radius) - 0.3125em);\n --panel-background-color: rgb(0 0 0 / 0.35);\n --panel-backdrop-filter: var(--default-backdrop-filter);\n }\n}\n\n/* Powered by FilePond */\n:host a {\n --font-size: 0.625;\n --inset: calc(var(--default-padding) / var(--font-size));\n --text-opacity: 0.5;\n --line-opacity: 0.2;\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n line-height: 2;\n transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px))\n translateX(calc(-100% - var(--inset)));\n font-size: calc(var(--font-size) * 1em);\n color: rgb(from var(--default-color) r g b / var(--text-opacity));\n text-underline-offset: 1px;\n text-decoration-color: rgb(from var(--default-color) r g b / var(--line-opacity));\n text-transform: lowercase;\n transition: color var(--_150ms) ease-in-out;\n user-select: none;\n &:hover {\n --text-opacity: 0.75;\n --line-opacity: 0.25;\n }\n}\n";
|
|
2
2
|
export {
|
|
3
3
|
defaultStyles as default
|
|
4
4
|
};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"tag": "alpha"
|
|
4
4
|
},
|
|
5
5
|
"name": "filepond",
|
|
6
|
-
"version": "5.0.0-alpha.
|
|
6
|
+
"version": "5.0.0-alpha.5",
|
|
7
7
|
"description": "FilePond, where files go to stretch their bits.",
|
|
8
8
|
"author": "Rik Schennink",
|
|
9
9
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"test": "vite --port 5175 --open /test/",
|
|
15
15
|
"build": "vite build && npm run ts",
|
|
16
16
|
"ts": "tsc -p ./tsconfig.build.json && cp src/types/*.d.ts dist/types && echo 'import \"./custom-element.js\";\nimport \"./default-extensions.js\";' >> dist/types/index.d.ts",
|
|
17
|
-
"prepublishOnly": "node
|
|
17
|
+
"prepublishOnly": "npm run build && node prepublish.js"
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
20
20
|
"./dist"
|