@milaboratories/uikit 2.2.82 → 2.2.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.82",
+  "version": "2.2.84",
   "type": "module",
   "main": "dist/pl-uikit.js",
   "module": "dist/pl-uikit.js",
@@ -12,7 +12,9 @@
       "default": "./dist/pl-uikit.js"
     },
     "./styles": "./dist/pl-uikit.css",
-    "./styles/mixins": "./src/assets/mixins.scss"
+    "./styles/mixins": "./src/assets/mixins.scss",
+    "./svg/icons/*": "./src/assets/icons/icon-assets-min/*",
+    "./svg/images/*": "./src/assets/images/*"
   },
   "dependencies": {
     "vue": "^3.5.13",
@@ -31,9 +33,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
-    "@platforma-sdk/model": "^1.33.10",
-    "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.12"
+    "@milaboratories/helpers": "^1.6.12",
+    "@platforma-sdk/model": "^1.34.8",
+    "@milaboratories/eslint-config": "^1.0.4"
   },
   "scripts": {
     "dev": "vite",
@@ -45,6 +47,7 @@
     "watch": "vite build --watch",
     "type-check": "vue-tsc --project ./tsconfig.lib.json",
     "preview": "vite preview",
+    "create-svg-components": "node scripts/create-svg-components.js",
     "parse-icons-folder": "node scripts/parse-icons.js",
     "minify-icons": "svgo -f src/assets/icons/icon-assets -o src/assets/icons/icon-assets-min",
     "generate-icons": "pnpm run parse-icons-folder && pnpm run minify-icons",

package/scripts/create-svg-components.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+async function getSvgFiles(dir) {
+  const dirents = await fs.readdir(dir, { withFileTypes: true });
+  const nested = await Promise.all(
+    dirents.map(async (d) => {
+      const full = path.resolve(dir, d.name);
+      if (d.isDirectory()) return await getSvgFiles(full);
+      if (d.isFile() && path.extname(d.name).toLowerCase() === ".svg") return full;
+      return [];
+    })
+  );
+  return nested.flat();
+}
+
+function toPascalCase(fileName) {
+  return fileName
+    .replace(/[-_]+/g, " ")
+    .replace(/[^\w\s]/g, "")
+    .replace(/\s+(.)/g, (_, ch) => ch.toUpperCase())
+    .replace(/^./, (ch) => ch.toUpperCase());
+}
+
+function svgToDataUri(svg) {
+  const cleaned = svg
+    .replace(/[\n\r\t]+/g, " ")
+    .replace(/>\s+</g, "><")
+    .trim();
+  const encoded = encodeURIComponent(cleaned)
+    .replace(/'/g, "%27")
+    .replace(/"/g, "%22")
+    .replace(/#/g, "%23");
+  return `data:image/svg+xml;utf8,${encoded}`;
+}
+
+function extractSize(svg) {
+  const w = svg.match(/\bwidth=['\"]?([\d.]+)(?:px)?['\"]?/i);
+  const h = svg.match(/\bheight=['\"]?([\d.]+)(?:px)?['\"]?/i);
+  return {
+    width: w ? `${w[1]}px` : 'unset',
+    height: h ? `${h[1]}px` : 'unset',
+  };
+}
+
+function buildStyles() {
+  return `/* ⚠️ AUTOGENERATED. DO NOT EDIT. */
+.svg-icon {
+  
+}
+  `;
+}
+
+function buildVueSFC(name, dataUri, cssPath, width, height) {
+  return `<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
+<script lang="ts">
+import '${cssPath}';
+export default { name: '${name}' };
+</script>
+
+<template>
+  <div class="svg-icon ${name}" style="width: ${width}; height: ${height}" />
+</template>
+
+<style>
+  .${name} { background-image: url("${dataUri}"); }
+</style>
+`;
+}
+
+async function createStyles(outDir) {
+  await fs.mkdir(outDir, { recursive: true });
+  const styles = buildStyles();
+  const destPath = path.join(outDir, "svg-styles.css");
+  await fs.writeFile(destPath, styles, "utf8");
+
+  return destPath;
+}
+
+async function createComponents(srcDir, outDir, absCssPath) {
+  if (!srcDir || !outDir) {
+    console.error("\nUSAGE: node generate-inline-svg-vue.js <svgDir> <outputDir>\n");
+    process.exit(1);
+  }
+
+  const cssPath = path.relative(outDir, absCssPath);
+
+  await fs.mkdir(outDir, { recursive: true });
+
+  const svgFiles = await getSvgFiles(srcDir);
+  if (!svgFiles.length) {
+    console.error("SVG files not found in", srcDir);
+    process.exit(1);
+  }
+
+  for (const file of svgFiles) {
+    const rawSvg = await fs.readFile(file, "utf8");
+    const componentName = 'Svg'+toPascalCase(path.basename(file, ".svg"));
+    const dataUri = svgToDataUri(rawSvg);
+    const { width, height } = extractSize(rawSvg);
+    const vueSFC = buildVueSFC(componentName, dataUri, cssPath, width, height);
+    const destPath = path.join(outDir, `${componentName}.vue`);
+    await fs.writeFile(destPath, vueSFC, "utf8");
+  }
+
+  return svgFiles.length;
+}
+
+const dir = path.dirname(fileURLToPath(import.meta.url));
+
+createStyles(path.resolve(dir,'../src/generated/components/svg'))
+  .then((cssPath) => Promise.all([
+    createComponents(path.resolve(dir,'../src/assets/images'), path.resolve(dir,'../src/generated/components/svg/images'), cssPath),
+  ]))
+  .then(([count]) => {
+    console.log(`Created ${count} SVG components`);
+    process.exit(0);
+  })
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

package/scripts/parse-icons.js

@@ -3,6 +3,18 @@ import * as path from 'path';
 
 const iconsFolder = './src/assets/icons/icon-assets';
 
+function svgToDataUri(svg) {
+  const cleaned = svg
+    .replace(/[\n\r\t]+/g, " ")
+    .replace(/>\s+</g, "><")
+    .trim();
+  const encoded = encodeURIComponent(cleaned)
+    .replace(/'/g, "%27")
+    .replace(/"/g, "%22")
+    .replace(/#/g, "%23");
+  return `data:image/svg+xml;utf8,${encoded}`;
+}
+
 async function normalizeIconNames() {
   for await (const dirent of await fp.readdir(iconsFolder, { withFileTypes: true })) {
     const parts = dirent.name.split('_');
@@ -13,7 +25,7 @@ async function normalizeIconNames() {
   }
 }
 
-async function generateSCSS() {
+async function generateIconsArtifacts() {
   const dict = {};
 
   for await (const dirent of await fp.readdir(iconsFolder, { withFileTypes: true })) {
@@ -28,32 +40,24 @@ async function generateSCSS() {
     }
 
     const [size, icon] = parts;
+    const svg = svgToDataUri(String(await fp.readFile(path.resolve(dirent.parentPath, dirent.name), 'utf8')));
 
     dict[size] = dict[size] ?? [];
-
-    dict[size].push(icon);
+    dict[size].push({ name: icon, svg });
   }
 
-  for (const [size, lst] of Object.entries(dict)) {
+  for (const [size] of Object.entries(dict)) {
     const json = {};
 
-    const lines = lst.map((name) => {
-      const icon = name.split('.')[0];
-      json[icon] = name;
-      return `  ${icon}: '${name}'`; // keep extension
-    });
-
     const names = Object.keys(json)
       .map((k) => `  '${k}'`)
       .join(',\n');
 
-    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.scss`, `$icons${size}: (\n${lines.join(',\n')}\n)`);
-    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const maskIcons${size} = [\n${names},\n] as const;\n`);
-    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.json`, JSON.stringify(json, null, 2));
+    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const icons${size} = [\n${names},\n] as const;\n`);
   }
 }
 
 (async () => {
   await normalizeIconNames();
-  await generateSCSS();
+  await generateIconsArtifacts();
 })().catch(console.error);

package/src/__tests__/compositions/useValidation.spec.ts

@@ -1,4 +1,4 @@
-import { useValidation } from '@/utils/useValidation';
+import { useValidation } from '../../utils/useValidation';
 import { describe } from 'node:test';
 import { expect, test } from 'vitest';
 import { ref } from 'vue';

package/src/assets/base-btn.scss

@@ -38,7 +38,7 @@
   transition: box-shadow 0.05s ease-in-out;
 
   box-shadow: var(--focus-shadow), var(--append-shadow), var(--shape-shadow),
-    var(--active-shadow), var(--drop-shadow);
+  var(--active-shadow), var(--drop-shadow);
 
   // @todo
   &.justifyCenter {
@@ -97,14 +97,6 @@
     --focus-shadow: inset 0 0 0 2px var(--border-color-focus);
   }
 
-  .mask {
-    background-color: var(--color-text);
-  }
-
-  .mask-16 {
-    background-color: var(--color-text);
-  }
-
   .icon {
     display: block;
     width: 16px;
@@ -124,7 +116,7 @@
     flex-direction: row-reverse;
   }
 
-  >span {
+  > span {
     display: inline-flex;
   }
 }

package/src/assets/base.scss

@@ -70,8 +70,6 @@
   --divider-color: var(--txt-01); // @TODO
 
   --pl-dropdown-options-bg: #fff;
-
-  --mask-icon-bg-color: #000;
 }
 
 [data-theme='dark'] {

package/src/assets/mixins.scss

@@ -160,13 +160,6 @@
     white-space: pre;
     text-overflow: ellipsis;
   }
-
-  .required-icon {
-    background: url(@/assets/images/required.svg);
-    width: 5px;
-    height: 12px;
-    margin-top: 2px;
-  }
 }
 
 @mixin field-helper {

package/src/assets/ui.scss

@@ -15,6 +15,5 @@
 @use './input-range';
 @use './sortable';
 @use './layout';
-@use './icons/icons-set';
 @use './css-utils';
 @use './file-base-input';

package/src/base/BtnBase.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { MaskIconName16, Size } from '@/types';
+import type { MaskIconName16, Size } from '../types';
 import { computed, ref } from 'vue';
-import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
-import { useRipple } from '@/composition/useRipple';
+import { PlMaskIcon16 } from '../components/PlMaskIcon16';
+import { useRipple } from '../composition/useRipple';
 
 const props = defineProps<{
   loading?: boolean;

package/src/components/DataTable/TScroll.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { useMouseCapture } from '@/composition/useMouseCapture';
+import { useMouseCapture } from '../../composition/useMouseCapture';
 
 const emit = defineEmits<{
   (e: 'change:offset', value: number): void;

package/src/components/DataTable/TableComponent.vue

@@ -8,7 +8,7 @@ import TrHead from './TrHead.vue';
 import ThCell from './ThCell.vue';
 import TrBody from './TrBody.vue';
 import ColumnCaret from './ColumnCaret.vue';
-import { useEventListener } from '@/index';
+import { useEventListener } from '../../index';
 import { tapIf } from '@milaboratories/helpers';
 import { useResize } from './composition/useResize';
 import RowsCommandMenu from './RowsCommandMenu.vue';

package/src/components/DataTable/assets/data-table-style.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../../assets/mixins.scss" as *;
 
 .data-table {
   --cell-font-family: var(--font-family-base);

package/src/components/DataTable/composition/useColumn.ts

@@ -1,6 +1,6 @@
-import { useEventListener } from '@/composition/useEventListener.ts';
+import { useEventListener } from '../../../composition/useEventListener.ts';
 import { useMouseUp } from './useMouseUp';
-import { requestTick } from '@/helpers';
+import { requestTick } from '../../../helpers';
 
 export function useColumn(cb: (state: { x: number; width: number; diff: number }) => void, clear: () => void) {
   let state = undefined as { x: number; width: number } | undefined;

package/src/components/DataTable/composition/useResize.ts

@@ -3,8 +3,8 @@ import { watchEffect, unref } from 'vue';
 import type { ResizeTh } from '../types';
 import { useColumn } from './useColumn';
 import { MIN_COLUMN_WIDTH, RESIZE_GAP } from '../constants';
-import { useMouse } from '@/composition/useMouse';
-import { useHover } from '@/composition/useHover';
+import { useMouse } from '../../../composition/useMouse';
+import { useHover } from '../../../composition/useHover';
 import { tapIf, clamp } from '@milaboratories/helpers';
 import { identity } from '@milaboratories/helpers';
 import type { State } from '../state';

package/src/components/DataTable/index.ts

@@ -5,7 +5,7 @@ import type { RawTableSettings } from './types';
 import type { ComputedRef } from 'vue';
 import { computed, h, reactive, unref } from 'vue';
 import { RawData } from './adapters/RawData';
-import type { MaybeRef } from '@/types';
+import type { MaybeRef } from '../../types';
 export { AsyncData } from './adapters/AsyncData';
 
 type AnyRef<T> = MaybeRef<T> | ComputedRef<T>;

package/src/components/DropdownListItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import CheckboxUncheckedSvg from '@/assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
-import CheckboxCheckedSvg from '@/assets/images/24_checkbox-light-enabled-checked.svg?raw';
-import type { ListOptionNormalized } from '@/types';
+import CheckboxUncheckedSvg from '../assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
+import CheckboxCheckedSvg from '../assets/images/24_checkbox-light-enabled-checked.svg?raw';
+import type { ListOptionNormalized } from '../types';
 
 const props = withDefaults(
   defineProps<{

package/src/components/GridTable/assets/style.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .grid-table {
   --cell-font-family: var(--font-family-base);

package/src/components/GridTable/constants.ts

@@ -1,4 +1,4 @@
-import type { ListOption } from '@/types';
+import type { ListOption } from '../../types';
 import type { CellEvent, ColumnEvent } from './types';
 
 export const RESIZE_GAP = 10;

package/src/components/GridTable/index.vue

@@ -10,8 +10,8 @@ import TableIcon from './assets/TableIcon.vue';
 import ThCell from './ThCell.vue';
 import TRow from './TRow.vue';
 import { compareRecords } from './domain';
-import { throttle } from '@/helpers/utils';
-import { useEventListener } from '@/index';
+import { throttle } from '../../helpers/utils';
+import { useEventListener } from '../../index';
 
 const minRowHeight = 40;
 

package/src/components/GridTable/types.ts

@@ -1,4 +1,4 @@
-import type { ListOption } from '@/types';
+import type { ListOption } from '../../types';
 
 type TypeMap = {
   integer: number;

package/src/components/GridTable/useColumn.ts

@@ -1,6 +1,6 @@
-import { useEventListener } from '@/composition/useEventListener.ts';
+import { useEventListener } from '../../composition/useEventListener.ts';
 import { useMouseUp } from './useMouseUp';
-import { requestTick } from '@/helpers';
+import { requestTick } from '../../helpers';
 
 export function useColumn(cb: (state: { x: number; width: number; diff: number }) => void, clear: () => void) {
   let state = undefined as { x: number; width: number } | undefined;

package/src/components/GridTable/useResize.ts

@@ -4,8 +4,8 @@ import type { Data } from './types';
 import { useColumn } from './useColumn';
 import { getColumnPositions } from './getColumnPositions';
 import { MIN_COLUMN_WIDTH, RESIZE_GAP } from './constants';
-import { useMouse } from '@/composition/useMouse';
-import { useHover } from '@/composition/useHover';
+import { useMouse } from '../../composition/useMouse';
+import { useHover } from '../../composition/useHover';
 import { utils } from '@milaboratories/helpers';
 
 const { tapIf, clamp } = utils;

package/src/components/HScroll.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, unref } from 'vue';
-import { useEventListener } from '@/composition/useEventListener';
-import { eventListener } from '@/helpers/dom';
+import { useEventListener } from '../composition/useEventListener';
+import { eventListener } from '../helpers/dom';
 
 const emit = defineEmits(['update:scrollLeft']);
 

package/src/components/PlAlert/pl-alert.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-alert {
   --text-font-family: var(--font-family-base);
@@ -74,7 +74,7 @@
     right: 12px;
     cursor: pointer;
     background-color: #d3d7e0;
-    @include mask(url(@/assets/images/24_close.svg), 24px);
+    @include mask(url(../../assets/images/24_close.svg), 24px);
     transition: all 0.1s ease-in-out;
     &:hover {
       background-color: var(--main-dark-color);

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -10,21 +10,22 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-autocomplete.scss';
 import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
-import { tap } from '@/helpers/functions';
-import { PlTooltip } from '@/components/PlTooltip';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import type { ListOption, ListOptionNormalized } from '@/types';
-import { deepEqual } from '@/helpers/objects';
-import DropdownListItem from '@/components/DropdownListItem.vue';
-import LongText from '@/components/LongText.vue';
-import { normalizeListOptions } from '@/helpers/utils';
+import { tap } from '../../helpers/functions';
+import { PlTooltip } from '../PlTooltip';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import type { ListOption, ListOptionNormalized } from '../../types';
+import { deepEqual } from '../../helpers/objects';
+import DropdownListItem from '../DropdownListItem.vue';
+import LongText from '../LongText.vue';
+import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { DropdownOverlay } from '@/utils/DropdownOverlay';
+import { DropdownOverlay } from '../../utils/DropdownOverlay';
 import { refDebounced } from '@vueuse/core';
-import { useWatchFetch } from '@/composition/useWatchFetch.ts';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { useWatchFetch } from '../../composition/useWatchFetch.ts';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 /**
  * The current selected value.
@@ -372,7 +373,7 @@ watch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {
           </div>
         </div>
         <label v-if="label">
-          <i v-if="required" class="required-icon" />
+          <SvgRequired v-if="required" />
           <span>{{ label }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlAutocomplete/pl-autocomplete.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-autocomplete__options {
   --option-hover-bg: var(--btn-sec-hover-grey);
@@ -191,13 +191,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 
@@ -214,7 +214,7 @@
     &.arrow-icon-default {
       transition: transform .2s;
       background-color: var(--control-mask-fill);
-      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
     }
   }
 

package/src/components/PlBtnAccent/PlBtnAccent.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-accent.scss';
-import type { MaskIconName16, Size } from '@/types';
-import BtnBase from '@/base/BtnBase.vue';
+import type { MaskIconName16, Size } from '../../types';
+import BtnBase from '../../base/BtnBase.vue';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnAccent/pl-btn-accent.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-accent {
   @include base-btn;

package/src/components/PlBtnDanger/PlBtnDanger.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-danger.scss';
-import type { MaskIconName16, Size } from '@/types';
-import BtnBase from '@/base/BtnBase.vue';
+import type { MaskIconName16, Size } from '../../types';
+import BtnBase from '../../base/BtnBase.vue';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnDanger/pl-btn-danger.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-danger {
   @include base-btn;

package/src/components/PlBtnGhost/PlBtnGhost.vue

@@ -9,10 +9,10 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-ghost.scss';
-import type { MaskIconName24, Size } from '@/types';
-import { PlMaskIcon24 } from '@/components/PlMaskIcon24';
+import type { MaskIconName24, Size } from '../../types';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { computed, ref, useSlots } from 'vue';
-import { useRipple } from '@/composition/useRipple';
+import { useRipple } from '../../composition/useRipple';
 
 const props = withDefaults(
   defineProps<{

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-ghost {
   @include base-btn;
@@ -18,6 +18,7 @@
     &:hover {
       --color-text: #87E087;
     }
+    --mask-icon-bg-color: #fff;
   }
 
   &:disabled {

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -10,10 +10,10 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-btn-group.scss';
 import { computed, useSlots } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
-import InnerBorder from '@/utils/InnerBorder.vue';
-import type { SimpleOption } from '@/types';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { PlTooltip } from '../PlTooltip';
+import InnerBorder from '../../utils/InnerBorder.vue';
+import type { SimpleOption } from '../../types';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const slots = useSlots();
 

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-group {
   --pl-btn-group-height: 40px;