@volverjs/style 0.1.9-beta.7 → 0.1.9-beta.9

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.9-beta.7",
+  "version": "0.1.9-beta.9",
   "engines": {
     "node": ">= 12.x"
   },
@@ -38,34 +38,34 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vueuse/core": "^9.13.0",
-    "@vueuse/head": "^1.1.23",
-    "eslint": "^8.38.0",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/head": "^1.1.26",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.10.0",
-    "glob": "^10.0.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "glob": "^10.2.2",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.3.1",
+    "postcss-preset-env": "^8.3.2",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.1",
-    "sass": "^1.62.0",
-    "stylelint": "^15.4.0",
+    "sass": "^1.62.1",
+    "stylelint": "^15.6.1",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^10.0.0",
+    "stylelint-config-recommended-scss": "^11.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^8.0.0",
-    "unplugin-auto-import": "^0.15.2",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.1",
+    "vite": "^4.3.5",
     "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
@@ -74,9 +74,9 @@
     "vite-plugin-stylelint": "^4.3.0",
     "vite-plugin-vue-layouts": "^0.8.0",
     "vite-ssg": "^0.22.2",
-    "vite-ssg-sitemap": "^0.4.3",
+    "vite-ssg-sitemap": "^0.5.0",
     "vue": "^3.2.47",
-    "vue-live": "2.4.10",
+    "vue-live": "2.5.1",
     "vue-router": "^4.1.6"
   },
   "exports": {
@@ -156,8 +156,6 @@
     "./scss/props/background": "./src/props/background.scss",
     "./components/vv-tooltip": "./dist/components/vv-tooltip.css",
     "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
-    "./components/vv-toast": "./dist/components/vv-toast.css",
-    "./scss/components/vv-toast": "./src/components/vv-toast.scss",
     "./components/vv-textarea": "./dist/components/vv-textarea.css",
     "./scss/components/vv-textarea": "./src/components/vv-textarea.scss",
     "./components/vv-text": "./dist/components/vv-text.css",
@@ -210,6 +208,8 @@
     "./scss/components/vv-avatar-group": "./src/components/vv-avatar-group.scss",
     "./components/vv-alert": "./dist/components/vv-alert.css",
     "./scss/components/vv-alert": "./src/components/vv-alert.scss",
+    "./components/vv-alert-group": "./dist/components/vv-alert-group.css",
+    "./scss/components/vv-alert-group": "./src/components/vv-alert-group.scss",
     "./components/vv-accordion": "./dist/components/vv-accordion.css",
     "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
     "./components/vv-accordion-group": "./dist/components/vv-accordion-group.css",

package/src/_config.scss

@@ -15,6 +15,7 @@ $components-names: (
 	vv-accordion-group: $components-prefix + -accordion-group,
 	vv-accordion: $components-prefix + -accordion,
 	vv-alert: $components-prefix + -alert,
+	vv-alert-group: $components-prefix + -alert-group,
 	vv-badge: $components-prefix + -badge,
 	vv-breadcrumb: $components-prefix + -breadcrumb,
 	vv-button-group: $components-prefix + -button-group,
@@ -40,6 +41,5 @@ $components-names: (
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,
 	vv-textarea: $components-prefix + -textarea,
-	vv-toast: $components-prefix + -toast,
 	vv-tooltip: $components-prefix + -tooltip,
 ) !default;

package/src/components/index.scss

@@ -1,6 +1,7 @@
 @use 'vv-accordion';
 @use 'vv-accordion-group';
 @use 'vv-alert';
+@use 'vv-alert-group';
 @use 'vv-badge';
 @use 'vv-breadcrumb';
 @use 'vv-button';
@@ -27,4 +28,3 @@
 @use 'vv-text';
 @use 'vv-textarea';
 @use 'vv-tooltip';
-@use 'vv-toast';

package/src/components/{vv-toast.scss → vv-alert-group.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../context' as *;
 
-$component-name: map.get($components-names, vv-toast);
-$component-map: $vv-toast;
+$component-name: map.get($components-names, vv-alert-group);
+$component-map: $vv-alert-group;
 
 @include spread-map-into-bem(
 	$map: $component-map,

package/src/props/transitions.scss

@@ -130,6 +130,16 @@
 	}
 }
 
+@keyframes fade-out {
+	95% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
 @keyframes shine {
 	to {
 		background-position-x: -200%;

package/src/settings/_colors.scss

@@ -12,7 +12,7 @@ $color-accent: #9c27b0 !default;
 $color-success: #178230 !default;
 $color-danger: #af2323 !default;
 $color-info: #31ccec !default;
-$color-warning: #f2c037 !default;
+$color-warning: #e7b735 !default;
 $color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
 $color-word: hsl(color.hue($color-brand) 15% 10%) !default;
 $color-surface: hsl(color.hue($color-brand) 10% 98%) !default;

package/src/settings/_index.scss

@@ -21,6 +21,7 @@
 @forward 'components/vv-accordion';
 @forward 'components/vv-accordion-group';
 @forward 'components/vv-alert';
+@forward 'components/vv-alert-group';
 @forward 'components/vv-badge';
 @forward 'components/vv-breadcrumb';
 @forward 'components/vv-button';
@@ -46,5 +47,4 @@
 @forward 'components/vv-table';
 @forward 'components/vv-text';
 @forward 'components/vv-textarea';
-@forward 'components/vv-toast';
 @forward 'components/vv-tooltip';

package/src/settings/_input.scss

@@ -1,45 +1,45 @@
 $input: (
+	background-color-focus: var(--color-surface-2),
+	background-color-hover: var(--color-surface-3),
+	background-color: var(--color-surface-1),
+	color: var(--color-word),
 	display: flex,
-	flex: 1,
 	flex-direction: column,
-	spacing-top: var(--spacing-sm),
-	spacing-right: var(--spacing-sm),
-	spacing-bottom: var(--spacing-sm),
-	spacing-left: var(--spacing-sm),
-	color: var(--color-word),
-	background-color: var(--color-surface-1),
-	background-color-hover: var(--color-surface-3),
-	background-color-focus: var(--color-surface-2),
+	flex: 1,
+	font-size: var(--text-16),
 	gap: var(--spacing-md),
 	line-height: var(--leading-normal),
-	font-size: var(--text-16),
 	min-height: var(--spacing-52),
 	min-width: 0,
+	spacing-bottom: var(--spacing-sm),
+	spacing-left: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
+	spacing-top: var(--spacing-sm),
+	text-overflow: ellipsis,
 	label: (
 		color: var(--color-word-2),
 		display: inline,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
-		white-space: nowrap,
-		text-overflow: ellipsis,
-		overflow: hidden,
 		max-width: 100%,
+		overflow: hidden,
+		text-overflow: ellipsis,
+		white-space: nowrap,
 	),
 	icon: (
+		margin: 0 var(--spacing-sm),
+		pointer-events: none,
 		position: absolute,
 		width: 1em,
-		pointer-events: none,
-		margin: 0 var(--spacing-sm),
 	),
 	hint: (
+		color: var(--color-word-2),
 		display: block,
 		font-size: var(--text-12),
-		color: var(--color-word-2),
 		gap: var(--spacing-8),
-		white-space: nowrap,
-		text-overflow: ellipsis,
 		overflow: hidden,
-		max-width: 100%,
+		text-overflow: ellipsis,
+		white-space: nowrap,
 	),
 	placeholder: (
 		color: var(--color-word-4),

package/src/settings/_sizing.scss

@@ -28,7 +28,7 @@ $width: (
 	10\/12: 83.3333%,
 	11\/12: 91.6667%,
 	full: 100%,
-	screen: 100vw,
+	screen: 100dvw,
 	min: min-content,
 	max: max-content,
 	fit: fit-content,
@@ -53,7 +53,7 @@ $height: (
 	4\/6: 66.6667%,
 	5\/6: 83.3333%,
 	full: 100%,
-	screen: 100vh,
+	screen: 100dvh,
 	min: min-content,
 	max: max-content,
 	fit: fit-content,
@@ -73,7 +73,7 @@ $max-width: (
 // max-height
 $max-height: (
 	full: 100%,
-	screen: 100vh,
+	screen: 100dvh,
 	min: min-content,
 	max: max-content,
 	fit: fit-content,
@@ -92,7 +92,7 @@ $min-width: (
 $min-height: (
 	0: 0px,
 	full: 100%,
-	screen: 100vh,
+	screen: 100dvh,
 	min: min-content,
 	max: max-content,
 	fit: fit-content,

package/src/settings/components/_vv-alert-group.scss

@@ -0,0 +1,174 @@
+$vv-alert-group: (
+	position: relative,
+	z-index: var(--z-notification-alert),
+	display: flex,
+	flex-direction: column,
+	gap: var(--spacing-sm),
+	overflow: hidden,
+	element: (
+		list: (
+			_alias: '> [role="group"]',
+			display: flex,
+			flex-direction: column,
+			gap: var(--spacing-xs),
+		),
+		item: (
+			_alias: '> [role="group"] > *',
+			transition: var(--transition-all),
+			flex-shrink: 0,
+		),
+		not-first: (
+			_alias: '> [role="group"] > *:not(:first-child)',
+		),
+		nth-1: (
+			--alert-counter: 1,
+			_alias: '> [role="group"] > *:nth-child(1)',
+		),
+		nth-2: (
+			--alert-counter: 2,
+			_alias: '> [role="group"] > *:nth-child(2)',
+		),
+		nth-3: (
+			--alert-counter: 3,
+			_alias: '> [role="group"] > *:nth-child(3)',
+		),
+		nth-4: (
+			--alert-counter: 4,
+			_alias: '> [role="group"] > *:nth-child(4)',
+		),
+		nth-5: (
+			--alert-counter: 5,
+			_alias: '> [role="group"] > *:nth-child(5)',
+		),
+		nth-other: (
+			_alias: '> [role="group"] > *:nth-child(n+6)',
+		),
+	),
+	modifier: (
+		fixed: (
+			position: fixed,
+			padding: var(--spacing-lg),
+			max-width: var(--w-full),
+			max-height: var(--h-full),
+		),
+		absolute: (
+			position: absolute,
+			padding: var(--spacing-lg),
+			max-width: var(--w-full),
+			max-height: var(--h-full),
+		),
+		reverse: (
+			flex-flow: column-reverse,
+			element: (
+				list: (
+					flex-flow: column-reverse,
+				),
+			),
+		),
+		top-start: (
+			inset-block: 0 auto,
+			inset-inline: 0 auto,
+		),
+		top-middle: (
+			inset-block: 0 auto,
+			inset-inline: 50% auto,
+			transform: translateX(-50%),
+		),
+		top-end: (
+			inset-block: 0 auto,
+			inset-inline: auto 0,
+		),
+		center-start: (
+			inset-block: 50% auto,
+			transform: translateY(-50%),
+			inset-inline: 0 auto,
+		),
+		center-middle: (
+			inset-block: 50% auto,
+			inset-inline: 50% auto,
+			transform: translate(-50%, -50%),
+		),
+		center-end: (
+			inset-block: 50% auto,
+			inset-inline: auto 0,
+			transform: translateY(-50%),
+		),
+		bottom-start: (
+			inset-block: auto 0,
+			inset-inline: 0 auto,
+		),
+		bottom-middle: (
+			inset-block: auto 0,
+			inset-inline: 50% auto,
+			transform: translateX(-50%),
+		),
+		bottom-end: (
+			inset-block: auto 0,
+			inset-inline: auto 0,
+		),
+		full-bleed: (
+			width: clamp(15dvw, 20rem, 80dvw),
+		),
+		stack: (
+			element: (
+				item: (
+					flex-wrap: nowrap,
+					white-space: nowrap,
+				),
+				nth-1: (
+					z-index: var(--z-notification-alert),
+				),
+				not-first: (
+					[transform]:
+						translateY(calc(-100% * (var(--alert-counter, 1) - 1)))
+						scale(calc(1 - 0.05 * (var(--alert-counter, 1) - 1))),
+					[z-index]:
+						calc(
+							var(--z-notification-alert) -
+								var(--alert-counter, 1)
+						),
+					filter: grayscale(100%),
+				),
+				nth-other: (
+					opacity: 0,
+				),
+			),
+			state: (
+				hover: (
+					element: (
+						not-first: (
+							transform: none,
+							filter: none,
+						),
+					),
+				),
+			),
+			modifier: (
+				reverse: (
+					element: (
+						not-first: (
+							[transform]:
+								translateY(
+									calc(100% * (var(--alert-counter, 1) - 1))
+								)
+								scale(
+									calc(
+										1 - 0.05 * (var(--alert-counter, 1) - 1)
+									)
+								),
+						),
+					),
+					state: (
+						hover: (
+							element: (
+								not-first: (
+									transform: none,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+);