@graupl/graupl
Advanced tools
Comparing version 1.0.0-alpha.15 to 1.0.0-alpha.16
@@ -5,2 +5,19 @@ # Changelog | ||
## [1.0.0-alpha.16](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2024-10-22) | ||
### Features | ||
* add force-single-column screen trigger ([dad9253](https://github.com/Graupl/graupl/commit/dad92531fa9a273b223f062dca6bba0d60321942)) | ||
* **build:** add compiled versions of js ([1e2939b](https://github.com/Graupl/graupl/commit/1e2939bc0c17ed7ad62dd47460cf42c3d9ae13e6)) | ||
* **component:** implement accordion ([fdbc7c1](https://github.com/Graupl/graupl/commit/fdbc7c1aee4e8b87384c42cff11f7408f3743d47)), closes [#67](https://github.com/Graupl/graupl/issues/67) | ||
* fix accordion sizing and add new open close methods ([8a5420c](https://github.com/Graupl/graupl/commit/8a5420c22700162f359eab951e8ee09766d3d408)) | ||
* **js:** implement new storage into all js components ([#114](https://github.com/Graupl/graupl/issues/114)) ([7747617](https://github.com/Graupl/graupl/commit/7747617102b10e9a23e2406162c26ca22c84f3b9)) | ||
### Bug Fixes | ||
* **carousel:** remove pointer events from containers ([922167a](https://github.com/Graupl/graupl/commit/922167a69434dbdf657b46e729b483a62c7a71d9)) | ||
* correct accordion typo ([#115](https://github.com/Graupl/graupl/issues/115)) ([35ad3d7](https://github.com/Graupl/graupl/commit/35ad3d73bf92cb9bf961fb12b24be050d4a648e8)) | ||
## [1.0.0-alpha.15](https://github.com/Graupl/graupl/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2024-09-24) | ||
@@ -7,0 +24,0 @@ |
{ | ||
"name": "@graupl/graupl", | ||
"version": "1.0.0-alpha.15", | ||
"version": "1.0.0-alpha.16", | ||
"description": "A modular and modern CSS framework.", | ||
@@ -8,3 +8,5 @@ "type": "module", | ||
".": { | ||
"sass": "./scss/graupl.scss" | ||
"sass": "./scss/graupl.scss", | ||
"import": "./dist/js/graupl.es.js", | ||
"require": "./dist/js/graupl.cjs.js" | ||
}, | ||
@@ -16,2 +18,14 @@ "./*.scss": { | ||
"sass": "./src/scss/*.scss" | ||
}, | ||
"./accordion": { | ||
"import": "./dist/js/component/accordion.es.js", | ||
"require": "./dist/js/component/accordion.cjs.js" | ||
}, | ||
"./alert": { | ||
"import": "./dist/js/component/alert.es.js", | ||
"require": "./dist/js/component/alert.cjs.js" | ||
}, | ||
"./carousel": { | ||
"import": "./dist/js/component/carousel.es.js", | ||
"require": "./dist/carousel.cjs.js" | ||
} | ||
@@ -26,5 +40,10 @@ }, | ||
"lint": "npm run eslint -- --fix && npm run stylelint -- --fix && npm run prettier -- --write", | ||
"sass": "rm -rf dist && sass scss:dist", | ||
"postcss": "postcss 'dist/**/*.css' --replace", | ||
"build": "npm run sass && npm run postcss", | ||
"sass": "rm -rf dist/css/* && sass scss:dist/css", | ||
"postcss": "postcss 'dist/css/**/*.css' --replace", | ||
"build": "npm-run-all build:*", | ||
"build:css": "npm run sass && npm run postcss", | ||
"build:js": "BUILD_TYPE=default vite build", | ||
"build:accordion": "BUILD_TYPE=Accordion vite build", | ||
"build:alert": "BUILD_TYPE=Alert vite build", | ||
"build:carousel": "BUILD_TYPE=Carousel vite build", | ||
"postbuild": "npm run docs:build", | ||
@@ -52,2 +71,3 @@ "release": "git add dist/. && standard-version -a", | ||
"autoprefixer": "^10.4.19", | ||
"chokidar-cli": "^3.0.0", | ||
"commitizen": "^4.3.0", | ||
@@ -63,2 +83,3 @@ "cssnano": "^7.0.1", | ||
"normalize.css": "^8.0.1", | ||
"npm-run-all": "^4.1.5", | ||
"postcss": "^8.4.38", | ||
@@ -65,0 +86,0 @@ "postcss-cli": "^11.0.0", |
@@ -9,2 +9,3 @@ /** | ||
import { keyPress, preventEvent } from "../eventHandlers.js"; | ||
import storage from "../storage.js"; | ||
@@ -70,2 +71,11 @@ class Alert { | ||
/** | ||
* The key used to generate IDs throughout the carousel. | ||
* | ||
* @protected | ||
* | ||
* @type {string} | ||
*/ | ||
_key = ""; | ||
/** | ||
* An array of error messages generated by the alert. | ||
@@ -88,3 +98,3 @@ * | ||
* | ||
* @property {boolean} bubbles - A flag to buggle the event. | ||
* @property {boolean} bubbles - A flag to bubble the event. | ||
* @property {Object<Alert>} detail - The details object container the Alert itself. | ||
@@ -125,2 +135,3 @@ */ | ||
* @param {boolean} [options.isHidden = false] - A flag to determine the initial state of the alert. | ||
* @param {?string} [options.key = null] - The key used to generate IDs throughout the alert. | ||
* @param {boolean} [options.initialize = false] - AA flag to initialize the alert immediately upon creation. | ||
@@ -136,2 +147,3 @@ */ | ||
isHidden = false, | ||
key = null, | ||
initialize = false, | ||
@@ -147,2 +159,5 @@ }) { | ||
// Set the key. | ||
this._key = key || ""; | ||
if (initialize) { | ||
@@ -166,5 +181,14 @@ this.initialize(); | ||
// Set up the DOM. | ||
this._generateKey(); | ||
this._setIds(); | ||
// Handle events. | ||
this._handleClick(); | ||
this._handleKeydown(); | ||
this._handleKeyup(); | ||
// Set up the storage. | ||
storage.initializeStorage("alerts"); | ||
storage.pushToStorage("alerts", this.dom.alert.id, this); | ||
} catch (error) { | ||
@@ -232,2 +256,13 @@ console.error(error); | ||
/** | ||
* The key used to generate IDs throughout the accordion. | ||
* | ||
* @type {string} | ||
* | ||
* @see _key | ||
*/ | ||
get key() { | ||
return this._key; | ||
} | ||
set showClass(value) { | ||
@@ -265,2 +300,10 @@ isValidClassList({ showClass: value }); | ||
set key(value) { | ||
isValidType("string", { value }); | ||
if (this._key !== value) { | ||
this._key = value; | ||
} | ||
} | ||
/** | ||
@@ -347,2 +390,29 @@ * Validates all aspects of the alert to ensure proper functionality. | ||
/** | ||
* Generates a key for the alert. | ||
* | ||
* @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated. | ||
*/ | ||
_generateKey(regenerate = false) { | ||
if (this.key === "" || regenerate) { | ||
this.key = Math.random() | ||
.toString(36) | ||
.replace(/[^a-z]+/g, "") | ||
.substring(0, 10); | ||
} | ||
} | ||
/** | ||
* Sets the IDs of the alert and it's children if they do not already exist. | ||
* | ||
* The generated IDs use the key and follow the format: | ||
* - alert: `alert-${key}` | ||
* - controller: `alert-controller-${key}` | ||
*/ | ||
_setIds() { | ||
this.dom.alert.id = this.dom.alert.id || `alert-${this.key}`; | ||
this.dom.controller.id = | ||
this.dom.controller.id || `alert-controller-${this.key}`; | ||
} | ||
/** | ||
* Shows the alert. | ||
@@ -349,0 +419,0 @@ * |
import Alert from "./Alert.js"; | ||
document.addEventListener("DOMContentLoaded", () => { | ||
const alerts = []; | ||
document.querySelectorAll(".alert").forEach((alertElement) => { | ||
const alert = new Alert({ | ||
new Alert({ | ||
alertElement, | ||
@@ -12,11 +10,3 @@ controllerElement: alertElement.querySelector(".alert-dismisser") || null, | ||
}); | ||
alerts.push(alert); | ||
}); | ||
const graupl = window.Graupl || {}; | ||
graupl.alerts = alerts; | ||
window.Graupl = graupl; | ||
}); |
@@ -8,2 +8,3 @@ /** | ||
import { preventEvent, keyPress } from "../eventHandlers.js"; | ||
import storage from "../storage.js"; | ||
import { | ||
@@ -205,2 +206,11 @@ isQuerySelector, | ||
/** | ||
* The key used to generate IDs throughout the carousel. | ||
* | ||
* @protected | ||
* | ||
* @type {string} | ||
*/ | ||
_key = ""; | ||
/** | ||
* An array of error messages generated by the carousel. | ||
@@ -238,3 +248,4 @@ * | ||
* @param {?string} [options.pauseText = Pause] - The text to use for the pause button. | ||
* @param {?string} [options.prefix = graupl-] - The prefix to use for CSS custom properties. | ||
* @param {?string} [options.prefix = graupl-] - The prefix to use for CSS custom properties. | ||
* @param {?string} [options.key = null] - The key used to generate IDs throughout the carousel. | ||
* @param {boolean} [options.initialize = false] - A flag to initialize the carousel immediately upon creation. | ||
@@ -264,2 +275,3 @@ */ | ||
prefix = "graupl-", | ||
key = null, | ||
initialize = false, | ||
@@ -302,2 +314,5 @@ }) { | ||
// Set the key. | ||
this._key = key || ""; | ||
if (initialize) { | ||
@@ -321,9 +336,6 @@ this.initialize(); | ||
// Set DOM elements. | ||
// Set up the DOM. | ||
this._generateKey(); | ||
this._setDOMElements(); | ||
// Set ids. | ||
this._setIds(); | ||
// Set aria attributes. | ||
this._setAriaAttributes(); | ||
@@ -334,5 +346,2 @@ | ||
// Set the custom props. | ||
this._setTransitionDuration(); | ||
// Handle events. | ||
@@ -345,2 +354,9 @@ this._handleAutoplay(); | ||
this._handleKeyup(); | ||
// Set the custom props. | ||
this._setTransitionDuration(); | ||
// Set up the storage. | ||
storage.initializeStorage("carousels"); | ||
storage.pushToStorage("carousels", this.dom.carousel.id, this); | ||
} catch (error) { | ||
@@ -532,2 +548,13 @@ console.error(error); | ||
/** | ||
* The key used to generate IDs throughout the accordion. | ||
* | ||
* @type {string} | ||
* | ||
* @see _key | ||
*/ | ||
get key() { | ||
return this._key; | ||
} | ||
/** | ||
* The current action being performed by the carousel. | ||
@@ -671,2 +698,10 @@ * | ||
set key(value) { | ||
isValidType("string", { value }); | ||
if (this._key !== value) { | ||
this._key = value; | ||
} | ||
} | ||
/** | ||
@@ -954,16 +989,32 @@ * Validates all aspects of the carousel to ensure proper functionality. | ||
/** | ||
* Sets the ids for the carousel items and tabs. | ||
* Generates a key for the carousel. | ||
* | ||
* @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated. | ||
*/ | ||
_generateKey(regenerate = false) { | ||
if (this.key === "" || regenerate) { | ||
this.key = Math.random() | ||
.toString(36) | ||
.replace(/[^a-z]+/g, "") | ||
.substring(0, 10); | ||
} | ||
} | ||
/** | ||
* Sets the IDs of the carousel and it's children if they do not already exist. | ||
* | ||
* The generated IDs use the key and follow the format: | ||
* - carousel: `carousel-${key}` | ||
* - carousel items: `carousel-item-${key}-${index}` | ||
* - carousel tabs: `carousel-tab-${key}-${index}` | ||
*/ | ||
_setIds() { | ||
const randomString = Math.random() | ||
.toString(36) | ||
.replace(/[^a-z]+/g, "") | ||
.substring(0, 10); | ||
this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`; | ||
this.dom.carouselItems.forEach((item, index) => { | ||
item.id = item.id || `carousel-item-${randomString}-${index}`; | ||
item.id = item.id || `carousel-item-${this.key}-${index}`; | ||
}); | ||
this.dom.carouselTabs.forEach((tab, index) => { | ||
tab.id = tab.id || `carousel-tab-${randomString}-${index}`; | ||
tab.id = tab.id || `carousel-tab-${this.key}-${index}`; | ||
}); | ||
@@ -970,0 +1021,0 @@ } |
import Carousel from "./Carousel.js"; | ||
document.addEventListener("DOMContentLoaded", () => { | ||
const carousels = []; | ||
document.querySelectorAll(".carousel").forEach((carouselElement) => { | ||
const carousel = new Carousel({ | ||
new Carousel({ | ||
carouselElement, | ||
initialize: true, | ||
}); | ||
carousels.push(carousel); | ||
}); | ||
const graupl = window.Graupl || {}; | ||
graupl.carousels = carousels; | ||
window.Graupl = graupl; | ||
}); |
@@ -15,2 +15,9 @@ /** | ||
Escape: key === "Escape" || key === "Esc" || key === 27, | ||
ArrowUp: key === "ArrowUp" || key === "Up" || key === 38, | ||
ArrowRight: key === "ArrowRight" || key === "Right" || key === 39, | ||
ArrowDown: key === "ArrowDown" || key === "Down" || key === 40, | ||
ArrowLeft: key === "ArrowLeft" || key === "Left" || key === 37, | ||
Home: key === "Home" || key === 36, | ||
End: key === "End" || key === 35, | ||
Tab: key === "Tab" || key === 9, | ||
}; | ||
@@ -17,0 +24,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2294461
314
14004
29
1
1