@v1nt1248/3nclient-lib 0.0.42 → 0.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.42",
+  "version": "0.1.1",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -29,69 +29,68 @@
     "linter:fix": "eslint -c .eslintrc.cjs --fix --ext .js,.vue,.ts, src",
     "lint": "yarn linter && yarn stylelint",
     "lint:fix": "yarn linter:fix && yarn stylelint:fix",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@iconify-icons/ic": "^1.2.13",
-    "@iconify/vue": "^4.1.1",
-    "dayjs": "^1.11.10",
-    "lodash": "^4.17.21",
-    "mitt": "^3.0.1",
-    "sanitize-html": "^2.12.1",
-    "tslib": "^2.6.2"
+    "@iconify-icons/ic": "1.2.13",
+    "@iconify/vue": "4.1.2",
+    "dayjs": "1.11.11",
+    "lodash": "4.17.21",
+    "mitt": "3.0.1",
+    "sanitize-html": "2.13.0",
+    "tslib": "2.6.3",
+    "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
-    "pinia": "^2.1.7",
-    "vue": "^3.4.21"
+    "pinia": "2.1.7",
+    "vue": "3.4.27"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^8.0.2",
-    "@storybook/addon-docs": "^8.0.2",
-    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-interactions": "^8.0.2",
-    "@storybook/addon-links": "^8.0.2",
-    "@storybook/blocks": "^8.0.2",
-    "@storybook/builder-vite": "^8.0.2",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^8.0.2",
-    "@storybook/vue3-vite": "^8.0.2",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.11.30",
-    "@types/sanitize-html": "^2.11.0",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-core": "^3.4.21",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/runtime-core": "^3.4.21",
-    "@vuedx/typescript-plugin-vue": "^0.7.6",
-    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "jackspeak": "^2.3.6",
-    "path": "^0.12.7",
-    "pinia": "^2.1.7",
-    "postcss-html": "^1.6.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.72.0",
-    "storybook": "^8.0.2",
-    "stylelint": "^16.2.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-rscss": "^0.4.0",
-    "stylelint-scss": "^6.2.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.2",
-    "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^3.7.3",
-    "vue": "^3.4.21",
-    "vue-tsc": "^2.0.7"
+    "@types/lodash": "4.17.5",
+    "@types/node": "20.14.2",
+    "@types/sanitize-html": "2.11.0",
+    "@typescript-eslint/eslint-plugin": "7.13.0",
+    "@typescript-eslint/parser": "7.13.0",
+    "@vitejs/plugin-vue": "5.0.5",
+    "@vue/compiler-core": "3.4.27",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/runtime-core": "3.4.27",
+    "@vuedx/typescript-plugin-vue": "0.7.6",
+    "eslint": "9.4.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "6.2.0",
+    "eslint-plugin-vue": "9.26.0",
+    "jackspeak": "3.4.0",
+    "path": "0.12.7",
+    "pinia": "2.1.7",
+    "postcss-html": "1.7.0",
+    "prettier": "^3.3.3",
+    "sass": "1.77.5",
+    "stylelint": "16.6.1",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-config-recommended-vue": "1.5.0",
+    "stylelint-config-standard": "36.0.0",
+    "stylelint-scss": "6.3.1",
+    "typescript": "5.4.5",
+    "vite": "5.2.13",
+    "vite-plugin-css-injected-by-js": "3.5.1",
+    "vite-plugin-dts": "3.9.1",
+    "vitepress": "1.2.3",
+    "vue": "3.4.27",
+    "vue-tsc": "2.0.21"
   },
-  "packageManager": "pnpm@8.15.5"
+  "packageManager": "pnpm@9.5.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "search-insights"
+      ]
+    }
+  }
 }

package/src/components/index.ts

@@ -1,40 +1,48 @@
-import Ui3nIcon from './ui3n-icon.vue'
-import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon.vue'
-import Ui3nButton from './ui3n-button.vue'
-import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button.vue'
-import Ui3nChip from './ui3n-chip.vue'
-import type { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip.vue'
-import Ui3nDropFiles from './ui3n-drop-files.vue'
-import type { Ui3nDropFilesProps, Ui3nDropFilesEmits } from './ui3n-drop-files.vue'
-import Ui3nEmoji from './ui3n-emoji.vue'
-import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji.vue'
-import Ui3nInput from './ui3n-input.vue'
-import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input.vue'
-import Ui3nText from './ui3n-text.vue'
-import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text.vue'
-import Ui3nCheckbox from './ui3n-checkbox.vue'
-import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue'
-import Ui3nNotification from './ui3n-notification.vue'
-import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
-import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue'
-import Ui3nTable from './ui3n-table.vue'
-import type { Ui3nTableProps, Ui3nTableEmits } from './ui3n-table.vue'
-import Ui3nDialog from './ui3n-dialog.vue'
-import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent } from './ui3n-dialog.vue'
-import Ui3nMenu from './ui3n-menu.vue'
-import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue'
-import Ui3nList from './ui3n-list.vue'
-import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list.vue'
-import Ui3nVirtualScroll from './ui3n-virtual-scroll.vue'
-import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './ui3n-virtual-scroll.vue'
-import Ui3nTabs from './ui3n-tabs.vue'
-import type { Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots } from './ui3n-tabs.vue'
-import Ui3nBadge from './ui3n-badge.vue'
-import type { Ui3nBadgeProps } from './ui3n-badge.vue'
-import Ui3nBreadcrumb from './ui3n-breadcrumb.vue'
-import type { Ui3nBreadcrumdProps, Ui3nBreadcrumdEmits, Ui3nBreadcrumdSlots } from './ui3n-breadcrumb.vue'
-import Ui3nBreadcrumbs from './ui3n-breadcrumbs.vue'
-import type { Ui3nBreadcrumdsProps } from './ui3n-breadcrumbs.vue'
+import Ui3nIcon from './ui3n-icon.vue';
+import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon.vue';
+import Ui3nButton from './ui3n-button.vue';
+import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button.vue';
+import Ui3nChip from './ui3n-chip.vue';
+import type { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip.vue';
+import Ui3nDropFiles from './ui3n-drop-files.vue';
+import type { Ui3nDropFilesProps, Ui3nDropFilesEmits } from './ui3n-drop-files.vue';
+import Ui3nEmoji from './ui3n-emoji.vue';
+import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji.vue';
+import Ui3nInput from './ui3n-input.vue';
+import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input.vue';
+import Ui3nText from './ui3n-text.vue';
+import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text.vue';
+import Ui3nCheckbox from './ui3n-checkbox.vue';
+import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue';
+import Ui3nNotification from './ui3n-notification.vue';
+import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
+import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue';
+import Ui3nTable from './ui3n-table.vue';
+import type { Ui3nTableProps, Ui3nTableEmits } from './ui3n-table.vue';
+import Ui3nDialog from './ui3n-dialog.vue';
+import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent } from './ui3n-dialog.vue';
+import Ui3nMenu from './ui3n-menu.vue';
+import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue';
+import Ui3nList from './ui3n-list.vue';
+import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list.vue';
+import Ui3nVirtualScroll from './ui3n-virtual-scroll.vue';
+import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './ui3n-virtual-scroll.vue';
+import Ui3nTabs from './ui3n-tabs.vue';
+import type { Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots } from './ui3n-tabs.vue';
+import Ui3nBadge from './ui3n-badge.vue';
+import type { Ui3nBadgeProps } from './ui3n-badge.vue';
+import Ui3nBreadcrumb from './ui3n-breadcrumb.vue';
+import type { Ui3nBreadcrumbProps, Ui3nBreadcrumbEmits, Ui3nBreadcrumbSlots } from './ui3n-breadcrumb.vue';
+import Ui3nBreadcrumbs from './ui3n-breadcrumbs.vue';
+import type { Ui3nBreadcrumbsProps } from './ui3n-breadcrumbs.vue';
+import Ui3nSwitch from './ui3n-switch.vue';
+import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch.vue';
+import Ui3nStepLineBar from './ui3n-step-line-bar.vue';
+import type { Ui3nStepLineBarProps } from './ui3n-step-line-bar.vue';
+import Ui3nProgressLinear from './ui3n-progress-linear.vue';
+import type { Ui3nProgressLinearProps } from './ui3n-progress-linear.vue';
+import Ui3nProgressCircular from './ui3n-progress-circular.vue';
+import type { Ui3nProgressCircularProps } from './ui3n-progress-circular.vue';
 
 export {
   Ui3nIcon,
@@ -92,9 +100,19 @@ export {
   Ui3nBadge,
   Ui3nBadgeProps,
   Ui3nBreadcrumb,
-  Ui3nBreadcrumdProps,
-  Ui3nBreadcrumdEmits,
-  Ui3nBreadcrumdSlots,
+  Ui3nBreadcrumbProps,
+  Ui3nBreadcrumbEmits,
+  Ui3nBreadcrumbSlots,
   Ui3nBreadcrumbs,
-  Ui3nBreadcrumdsProps,
+  Ui3nBreadcrumbsProps,
+  Ui3nSwitch,
+  Ui3nSwitchProps,
+  Ui3nSwitchEmits,
+  Ui3nSwitchSlots,
+  Ui3nStepLineBar,
+  Ui3nStepLineBarProps,
+  Ui3nProgressLinear,
+  Ui3nProgressLinearProps,
+  Ui3nProgressCircular,
+  Ui3nProgressCircularProps,
 }

package/src/components/ui3n-badge-simple.vue

@@ -13,8 +13,8 @@
     {
       dot: false,
       value: '',
-      color: '#0090ec',
-      textColor: '#fff',
+      color: 'var(--color-bg-button-primary-default)',
+      textColor: 'var(--color-text-button-primary-default)',
     },
   )
 
@@ -45,53 +45,50 @@
 <template>
   <div
     ref="element"
-    :class="[
-      'ui3n-badge-simple',
-      { 'ui3n-badge-simple__dot': dot },
-    ]"
+    :class="[$style.badgeSimple, dot && $style.dot]"
   >
     <span
       v-if="!dot"
-      class="ui3n-badge-simple__text"
+      :class="$style.text"
     >
       {{ value }}
     </span>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-badge-simple{
-    --ui3n-badge-size: 20px;
+<style lang="scss" module>
+.badgeSimple {
+  --ui3n-badge-size: 20px;
 
-    position: relative;
-    box-sizing: border-box;
-    background-color: v-bind(color);
-    outline: 1px var(--system-white, #fff) solid;
+  position: relative;
+  box-sizing: border-box;
+  background-color: v-bind(color);
+  outline: 1px var(--white-0) solid;
 
-    &__dot {
-      min-width: 8px;
-      width: 8px;
-      max-width: 8px;
-      min-height: 8px;
-      height: 8px;
-      max-height: 8px;
-      border-radius: 50%;
-    }
+  &:not(.dot) {
+    min-height: var(--ui3n-badge-size);
+    height: var(--ui3n-badge-size);
+    width: max-content;
+    padding: 0 6px;
+    border-radius: 10px;
+  }
+}
 
-    &__text {
-      display: block;
-      color: v-bind(textColor);
-      font-size: 12px;
-      line-height: var(--ui3n-badge-size);
-      text-align: center;
-    }
+.dot {
+  min-width: var(--spacing-s);
+  width: var(--spacing-s);
+  max-width: var(--spacing-s);
+  min-height: var(--spacing-s);
+  height: var(--spacing-s);
+  max-height: var(--spacing-s);
+  border-radius: 50%;
+}
 
-    &:not(.ui3n-badge-simple__dot) {
-      min-height: var(--ui3n-badge-size);
-      height: var(--ui3n-badge-size);
-      width: max-content;
-      padding: 0 6px;
-      border-radius: 10px;
-    } 
-  }
+.text {
+  display: block;
+  color: v-bind(textColor);
+  font-size: var(--font-12);
+  line-height: var(--ui3n-badge-size);
+  text-align: center;
+}
 </style>

package/src/components/ui3n-badge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-  import { computed, ref, useSlots } from 'vue'
-  import get from 'lodash/get'
-  import Ui3nBadgeSimple from './ui3n-badge-simple.vue'
+  import { computed, ref, useSlots } from 'vue';
+  import get from 'lodash/get';
+  import Ui3nBadgeSimple from './ui3n-badge-simple.vue';
 
   export interface Ui3nBadgeProps {
     dot?: boolean;
@@ -16,19 +16,19 @@
     {
       dot: false,
       value: '',
-      color: '#0090ec',
-      textColor: '#fff',
+      color: 'var(--color-bg-button-primary-default)',
+      textColor: 'var(--color-text-button-primary-default)',
       position: 'right-top',
     },
-  )
+  );
 
   const slots = useSlots()
   const badgeElementSize = ref<{
     width: number;
     height: number;
-  } | never>()
+  } | never>();
 
-  const hasDefaultSlot = computed(() => !!slots.default)
+  const hasDefaultSlot = computed(() => !!slots.default);
   const style = computed(() => {
     const [xPosition, yPosition] = props.position.split('-')
     return {
@@ -37,16 +37,16 @@
       ...(yPosition === 'top' && { top: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
       ...(yPosition === 'bottom' && { bottom: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
     }
-  })
+  });
 </script>
 
 <template>
   <!-- eslint-disable vue/no-multiple-template-root -->
   <div
     v-if="hasDefaultSlot"
-    class="ui3n-badge"
+    :class="$style.badge"
   >
-    <div class="ui3n-badge__wrapper">
+    <div :class="$style.wrapper">
       <slot />
 
       <ui3n-badge-simple
@@ -55,7 +55,7 @@
         :color="color"
         :text-color="textColor"
         :style="style"
-        class="ui3n-badge__content"
+        :class="$style.content"
         @change:size="badgeElementSize = $event"
       />
     </div>
@@ -70,20 +70,20 @@
   />
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-badge {
-    --ui3n-badge-size: 20px;
+<style lang="scss" module>
+.badge {
+  --ui3n-badge-size: 20px;
 
-    position: relative;
+  position: relative;
+}
 
-    &__wrapper {
-      position: relative;
-      width: max-content;
-    }
+.wrapper {
+  position: relative;
+  width: max-content;
+}
 
-    &__content {
-      position: absolute;
-      z-index: 5;
-    }
-  }
+.content {
+  position: absolute;
+  z-index: 5;
+}
 </style>

package/src/components/ui3n-breadcrumb.vue

@@ -1,30 +1,30 @@
 <script lang="ts" setup>
   import { computed, getCurrentInstance } from 'vue';
 
-  export interface Ui3nBreadcrumdProps {
+  export interface Ui3nBreadcrumbProps {
     separator?: string | undefined;
     isActive?: boolean;
     disabled?: boolean;
   }
-  export interface Ui3nBreadcrumdEmits {
+  export interface Ui3nBreadcrumbEmits {
     (ev: 'click', value: Event): void;
   }
-  export interface Ui3nBreadcrumdSlots {
+  export interface Ui3nBreadcrumbSlots {
     separator: () => unknown;
     default: () => unknown;
   }
 
   const props = withDefaults(
-    defineProps<Ui3nBreadcrumdProps>(),
+    defineProps<Ui3nBreadcrumbProps>(),
     {
       separator: undefined,
       isActive: false,
       disabled: false,
     },
-  )
+  );
 
-  const emits = defineEmits<Ui3nBreadcrumdEmits>()
-  defineSlots<Ui3nBreadcrumdSlots>()
+  const emits = defineEmits<Ui3nBreadcrumbEmits>();
+  defineSlots<Ui3nBreadcrumbSlots>();
 
   const separatorValue = computed(() => {
     if (props.separator) {
@@ -33,33 +33,29 @@
 
     const instance = getCurrentInstance()
     return instance?.parent?.props.separator || '/'
-  })
+  });
 
   const parentDisabled = computed(() => {
     const instance = getCurrentInstance()
-    return instance?.parent?.props.disabled || false;
-  })
+    return instance?.parent?.props.disabled || false
+  });
 
   const onClick = (ev: Event) => {
-    emits('click', ev);
+    emits('click', ev)
   }
 </script>
 
 <template>
   <div
     :class="[
-      'ui3n-breadcrumb',
-      {
-        'ui3n-breadcrumb--active': isActive,
-        'ui3n-breadcrumb--disabled': disabled || parentDisabled,
-      },
+      $style.breadcrumb,
+      isActive && $style.active,
+      (disabled || parentDisabled) && $style.disabled,
     ]"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
     <slot />
-    <div
-      v-if="isActive"
-      class="ui3n-breadcrumb__separator"
+    <div v-if="isActive" :class="$style.separator"
     >
       <slot name="separator">
         <span>{{ separatorValue }}</span>
@@ -68,36 +64,40 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-breadcrumb {
-    --ui3n-breadcrumb-font-size: 16px;
-    --ui3n-breadcrumb-color-default: var(--black-90, #212121);
-    --ui3n-breadcrumb-color-selected: var(--blue-main, #0090ec);
+<style lang="scss" module>
+.breadcrumb {
+  --ui3n-breadcrumb-font-size: var(--spacing-m);
+  --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
+  --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
 
-    position: relative;
-    display: flex;
-    align-items: center;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
 
-    &__separator {
-      display: flex;
-      align-items: center;
-      margin: 0 var(--base-size, 8px);
-    }
+.separator {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--spacing-s);
+}
 
-    &--active {
-      font-size: var(--ui3n-breadcrumb-font-size);
-      line-height: 1.25;
-      color: var(--ui3n-breadcrumb-color-default);
+.active {
+  font-size: var(--ui3n-breadcrumb-font-size);
+  line-height: 1.25;
+  color: var(--ui3n-breadcrumb-color-default);
 
-      &:hover {
-        cursor: pointer;
-        color: var(--ui3n-breadcrumb-color-selected);
-      }
-    }
+  &:hover {
+    cursor: pointer;
+    color: var(--ui3n-breadcrumb-color-selected);
 
-    &--disabled {
-      cursor: default;
-      pointer-events: none;
+    .separator {
+      color: var(--ui3n-breadcrumb-color-default);
     }
   }
+}
+
+.disabled {
+  cursor: default;
+  pointer-events: none;
+}
 </style>

package/src/components/ui3n-breadcrumbs.vue

@@ -1,28 +1,28 @@
 <script lang="ts" setup>
-  export interface Ui3nBreadcrumdsProps {
-    separator?: string;
-    disabled?: boolean;
-  }
+export interface Ui3nBreadcrumbsProps {
+  separator?: string;
+  disabled?: boolean;
+}
 
-  withDefaults(
-    defineProps<Ui3nBreadcrumdsProps>(),
-    {
-      separator: '/',
-      disabled: false,
-    },
-  )
+withDefaults(
+  defineProps<Ui3nBreadcrumbsProps>(),
+  {
+    separator: '/',
+    disabled: false,
+  },
+);
 </script>
 
 <template>
-  <div :class="['ui3n-breadcrumbs']">
-    <slot />
+  <div :class="$style.breadcrumbs">
+    <slot/>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-breadcrumbs {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-  }
+<style lang="scss" module>
+.breadcrumbs {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>