@synergy-design-system/vue - npm Package Compare versions

Comparing version 3.6.2 to 3.7.0

dist/components/SynVueTagGroup.vue.d.ts

+import { SynTagGroup } from '@synergy-design-system/components';
+type __VLS_Props = {
+    /**
+     * The tag group's label.
+     * If you need to display HTML, use the `label` slot instead.
+     */
+    label?: SynTagGroup['label'];
+    /**
+     * Controls the label position.
+     * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
+     */
+    labelPosition?: SynTagGroup['labelPosition'];
+    /**
+     * The size that should be applied to all slotted `<syn-tag>` elements
+     */
+    size?: SynTagGroup['size'];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        nativeElement: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    nativeElement: import('vue').Ref<SynTagGroup | undefined, SynTagGroup | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    nativeElement: unknown;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

dist/components/SynVueTagGroup.vue.js

+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/tag-group/tag-group.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueTagGroup",
+  props: {
+    label: {},
+    labelPosition: {},
+    size: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const nativeElement = ref();
+    __expose({
+      nativeElement
+    });
+    const props = __props;
+    const visibleProps = computed(
+      () => Object.fromEntries(
+        Object.entries(props).filter(([, value]) => typeof value !== "undefined")
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("syn-tag-group", mergeProps(visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

dist/components/SynVueTagGroup.vue2.js

+import _sfc_main from "./SynVueTagGroup.vue.js";
+export {
+  _sfc_main as default
+};

src/components/SynVueTagGroup.vue

+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tag-group/tag-group.js';
+
+import type { SynTagGroup } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTagGroup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The tag group's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynTagGroup['label'];
+
+  /**
+   * Controls the label position.
+   * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
+   */
+  labelPosition?: SynTagGroup['labelPosition'];
+
+  /**
+   * The size that should be applied to all slotted `<syn-tag>` elements
+   */
+  size?: SynTagGroup['size'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+</script>
+
+<template>
+  <syn-tag-group v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-tag-group>
+</template>

CHANGELOG.md

 # @synergy-design-system/vue
 
+## 3.7.0
+
+### Minor Changes
+
+- [#1193](https://github.com/synergy-design-system/synergy-design-system/pull/1193) [`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ Add new component `<syn-tag-group>` (#1152)
+
+  Adds a new component `<syn-tag-group>`, including templates how to use this component.
+
+### Patch Changes
+
+- Updated dependencies [[`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302)]:
+  - @synergy-design-system/components@3.7.0
+  - @synergy-design-system/tokens@3.7.0
+
 ## 3.6.2
@@ -4,0 +20,0 @@

dist/index.d.ts

@@ -44,4 +44,5 @@ export { default as SynVueAccordion } from './components/SynVueAccordion.vue';
 export { default as SynVueTag } from './components/SynVueTag.vue';
+export { default as SynVueTagGroup } from './components/SynVueTagGroup.vue';
 export { default as SynVueTextarea } from './components/SynVueTextarea.vue';
 export { default as SynVueTooltip } from './components/SynVueTooltip.vue';
 export { default as SynVueValidate } from './components/SynVueValidate.vue';

dist/index.js

@@ -44,5 +44,6 @@ import { default as default2 } from "./components/SynVueAccordion.vue.js";
 import { default as default44 } from "./components/SynVueTag.vue.js";
-import { default as default45 } from "./components/SynVueTextarea.vue.js";
-import { default as default46 } from "./components/SynVueTooltip.vue.js";
-import { default as default47 } from "./components/SynVueValidate.vue.js";
+import { default as default45 } from "./components/SynVueTagGroup.vue.js";
+import { default as default46 } from "./components/SynVueTextarea.vue.js";
+import { default as default47 } from "./components/SynVueTooltip.vue.js";
+import { default as default48 } from "./components/SynVueValidate.vue.js";
 export {
@@ -92,5 +93,6 @@ default2 as SynVueAccordion,
   default44 as SynVueTag,
-  default45 as SynVueTextarea,
-  default46 as SynVueTooltip,
-  default47 as SynVueValidate
+  default45 as SynVueTagGroup,
+  default46 as SynVueTextarea,
+  default47 as SynVueTooltip,
+  default48 as SynVueValidate
 };

package.json

@@ -7,3 +7,3 @@ {
   "dependencies": {
-    "@synergy-design-system/components": "3.6.2"
+    "@synergy-design-system/components": "3.7.0"
   },
@@ -44,3 +44,3 @@ "description": "Vue3 wrappers for the Synergy Design System",
   "type": "module",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "devDependencies": {
@@ -55,3 +55,3 @@ "@vitejs/plugin-vue": "^6.0.4",
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.6.2"
+    "@synergy-design-system/tokens": "3.7.0"
   },
@@ -58,0 +58,0 @@ "scripts": {

src/index.ts

@@ -49,4 +49,5 @@ // ---------------------------------------------------------------------
 export { default as SynVueTag } from './components/SynVueTag.vue';
+export { default as SynVueTagGroup } from './components/SynVueTagGroup.vue';
 export { default as SynVueTextarea } from './components/SynVueTextarea.vue';
 export { default as SynVueTooltip } from './components/SynVueTooltip.vue';
 export { default as SynVueValidate } from './components/SynVueValidate.vue';

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

488764

1.22%

Number of package files

195

2.09%

Lines of code

6649

1.23%

Dependency changes

• + Added

  @synergy-design-system/components@3.7.0
  (transitive)

• + Added

  @synergy-design-system/tokens@3.7.0
  (transitive)

• - Removed

  @synergy-design-system/components@3.6.2
  (transitive)

• - Removed

  @synergy-design-system/tokens@3.6.2
  (transitive)

• Updated

  @synergy-design-system/components@3.7.0