filepond 5.0.0-alpha.3 → 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 --default-color:
|
|
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
|
};
|
|
@@ -6,8 +6,8 @@ import { FileInputSource } from "../../extensions/file-input-source.js";
|
|
|
6
6
|
import { DataTransferLoader } from "../../extensions/data-transfer-loader.js";
|
|
7
7
|
import { ValueCallbackStore } from "../../extensions/value-callback-store.js";
|
|
8
8
|
import { EntryListView } from "../../extensions/entry-list-view.js";
|
|
9
|
-
import { hasDefinedTag, defineCustomElements, defineCustomElement, h, addListener
|
|
10
|
-
import { isString,
|
|
9
|
+
import { hasDefinedTag, defineCustomElements, defineCustomElement, h, addListener } from "../../utils/dom.js";
|
|
10
|
+
import { isString, isBrowser } from "../../utils/test.js";
|
|
11
11
|
import { assets } from "../../assets/index.js";
|
|
12
12
|
import defaultStyles from "./index.css.js";
|
|
13
13
|
import { createFilePondEntryList } from "../../templates/entry.js";
|
|
@@ -206,34 +206,6 @@ class FilePondElement extends FilePondBaseElement {
|
|
|
206
206
|
addListener(filePondEntryList, "updateplaceholder", (e) => {
|
|
207
207
|
filePondDropIndicator.indicatorRect = e.detail;
|
|
208
208
|
});
|
|
209
|
-
const pipet = h("div", { class: "pipet" });
|
|
210
|
-
this._root.append(pipet);
|
|
211
|
-
const computedStyle = getComputedStyle(pipet);
|
|
212
|
-
if (computedStyle.getPropertyValue("--default-contrast-factor").length) {
|
|
213
|
-
pipet.remove();
|
|
214
|
-
}
|
|
215
|
-
pipet.addEventListener("transitionend", (e) => {
|
|
216
|
-
updateContrastFactor();
|
|
217
|
-
});
|
|
218
|
-
function averageColorValue(color) {
|
|
219
|
-
const res = color?.match(/\d+/g)?.map(Number);
|
|
220
|
-
return res ? res.slice(0, 3).reduce((a, c) => a + c) / 3 / 255 : void 0;
|
|
221
|
-
}
|
|
222
|
-
function updateContrastFactor() {
|
|
223
|
-
const color = averageColorValue(getStyleProperty(computedStyle, "color"));
|
|
224
|
-
const backgroundColor = averageColorValue(
|
|
225
|
-
getStyleProperty(computedStyle, "background-color")
|
|
226
|
-
);
|
|
227
|
-
if (!isNumber(color) || !isNumber(backgroundColor)) {
|
|
228
|
-
return;
|
|
229
|
-
}
|
|
230
|
-
localStyles.replaceSync(
|
|
231
|
-
`:host { --default-contrast-factor: ${color > backgroundColor ? 1 : 0}}`
|
|
232
|
-
);
|
|
233
|
-
}
|
|
234
|
-
const localStyles = new CSSStyleSheet();
|
|
235
|
-
this._root.adoptedStyleSheets.push(localStyles);
|
|
236
|
-
updateContrastFactor();
|
|
237
209
|
}
|
|
238
210
|
}
|
|
239
211
|
function createAttributionLink(options) {
|
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"
|