Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@graupl/graupl

Package Overview
Dependencies
Maintainers
0
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@graupl/graupl - npm Package Compare versions

Comparing version 1.0.0-alpha.15 to 1.0.0-alpha.16

build.js

17

CHANGELOG.md

@@ -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 @@

31

package.json
{
"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 @@ *

12

src/js/alert/index.js
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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc