@synergy-design-system/vue 1.24.1 → 1.26.0

package/dist/components/SynVueBreadcrumb.vue.d.ts

@@ -0,0 +1,36 @@
+import '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';
+import type { SynBreadcrumb } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The label to use for the breadcrumb control.
+  * This will not be shown on the screen, but it will be announced by
+  screen readers and other assistive devices to provide more context for users.
+   */
+    label?: string | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynBreadcrumb | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The label to use for the breadcrumb control.
+  * This will not be shown on the screen, but it will be announced by
+  screen readers and other assistive devices to provide more context for users.
+   */
+    label?: string | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/SynVueBreadcrumbItem.vue.d.ts

@@ -0,0 +1,60 @@
+import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';
+import type { SynBreadcrumbItem } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * Optional URL to direct the user to when the breadcrumb item is activated.
+  * When set, a link will be rendered
+  internally.
+  * When unset, a button will be rendered instead.
+   */
+    href?: string | undefined;
+    /**
+  * Tells the browser where to open the link.
+  * Only used when `href` is set.
+   */
+    target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+    /**
+  * The `rel` attribute to use on the link.
+  * Only used when `href` is set.
+   */
+    rel?: string | undefined;
+}>, {
+    callHrefChanged: () => void | undefined;
+    callHandleSlotChange: () => void | undefined;
+    nativeElement: import("vue").Ref<SynBreadcrumbItem | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Optional URL to direct the user to when the breadcrumb item is activated.
+  * When set, a link will be rendered
+  internally.
+  * When unset, a button will be rendered instead.
+   */
+    href?: string | undefined;
+    /**
+  * Tells the browser where to open the link.
+  * Only used when `href` is set.
+   */
+    target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+    /**
+  * The `rel` attribute to use on the link.
+  * Only used when `href` is set.
+   */
+    rel?: string | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/SynVueCard.vue.d.ts

@@ -0,0 +1,34 @@
+import '@synergy-design-system/components/components/card/card.js';
+import type { SynCard } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * Draws the card as a nested item.
+  * Can be used when nesting multiple syn-cards to create hierarchy
+   */
+    nested?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynCard | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Draws the card as a nested item.
+  * Can be used when nesting multiple syn-cards to create hierarchy
+   */
+    nested?: boolean | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 export { default as SynVueAlert } from "./components/SynVueAlert.vue";
 export { default as SynVueBadge } from "./components/SynVueBadge.vue";
+export { default as SynVueBreadcrumb } from "./components/SynVueBreadcrumb.vue";
+export { default as SynVueBreadcrumbItem } from "./components/SynVueBreadcrumbItem.vue";
 export { default as SynVueButton } from "./components/SynVueButton.vue";
 export { default as SynVueButtonGroup } from "./components/SynVueButtonGroup.vue";
+export { default as SynVueCard } from "./components/SynVueCard.vue";
 export { default as SynVueCheckbox } from "./components/SynVueCheckbox.vue";
 export { default as SynVueDialog } from "./components/SynVueDialog.vue";
 export { default as SynVueDivider } from "./components/SynVueDivider.vue";

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^1.24.1"
+    "@synergy-design-system/components": "^1.26.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "1.24.1",
+  "version": "1.26.0",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.24"

package/src/components/SynVueBreadcrumb.vue

@@ -0,0 +1,70 @@
+<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 Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+ * @documentation https://synergy.style/components/breadcrumb
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
+ *
+ * @dependency syn-icon
+ *
+ * @csspart base - The component's base wrapper.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';
+
+import type { SynBreadcrumb } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynBreadcrumb>();
+
+// Map methods
+
+defineExpose({
+
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The label to use for the breadcrumb control.
+* This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users.
+ */
+  'label'?: SynBreadcrumb['label'];
+}>();
+
+// 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'),
+));
+
+// Map events
+defineEmits<{
+
+}>();
+</script>
+
+<template>
+  <syn-breadcrumb
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-breadcrumb>
+</template>

package/src/components/SynVueBreadcrumbItem.vue

@@ -0,0 +1,91 @@
+<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 Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+ * @documentation https://synergy.style/components/breadcrumb-item
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart separator - The container that wraps the separator.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';
+
+import type { SynBreadcrumbItem } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynBreadcrumbItem>();
+
+// Map methods
+const callHrefChanged = (...args: Parameters<SynBreadcrumbItem['hrefChanged']>) => nativeElement.value?.hrefChanged(...args);
+const callHandleSlotChange = (...args: Parameters<SynBreadcrumbItem['handleSlotChange']>) => nativeElement.value?.handleSlotChange(...args);
+
+defineExpose({
+  callHrefChanged,
+  callHandleSlotChange,
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Optional URL to direct the user to when the breadcrumb item is activated.
+* When set, a link will be rendered
+internally.
+* When unset, a button will be rendered instead.
+ */
+  'href'?: SynBreadcrumbItem['href'];
+
+  /**
+* Tells the browser where to open the link.
+* Only used when `href` is set.
+ */
+  'target'?: SynBreadcrumbItem['target'];
+
+  /**
+* The `rel` attribute to use on the link.
+* Only used when `href` is set.
+ */
+  'rel'?: SynBreadcrumbItem['rel'];
+}>();
+
+// 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'),
+));
+
+// Map events
+defineEmits<{
+
+}>();
+</script>
+
+<template>
+  <syn-breadcrumb-item
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-breadcrumb-item>
+</template>

package/src/components/SynVueCard.vue

@@ -0,0 +1,78 @@
+<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 Cards can be used to group related subjects in a container.
+ * @documentation https://synergy.style/components/card
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The card's main content.
+ * @slot header - An optional header for the card.
+ * @slot footer - An optional footer for the card.
+ * @slot image - An optional image to render at the start of the card.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart image - The container that wraps the card's image.
+ * @csspart header - The container that wraps the card's header.
+ * @csspart body - The container that wraps the card's main content.
+ * @csspart footer - The container that wraps the card's footer.
+ *
+ * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
+ * @cssproperty --border-radius - The border radius for the card's edges.
+ * @cssproperty --border-width - The width of the card's borders.
+ * @cssproperty --padding - The padding to use for the card's sections.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/card/card.js';
+
+import type { SynCard } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynCard>();
+
+// Map methods
+
+defineExpose({
+
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Draws the card as a nested item.
+* Can be used when nesting multiple syn-cards to create hierarchy
+ */
+  'nested'?: SynCard['nested'];
+}>();
+
+// 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'),
+));
+
+// Map events
+defineEmits<{
+
+}>();
+</script>
+
+<template>
+  <syn-card
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-card>
+</template>

package/src/index.js

@@ -5,8 +5,11 @@
 // ---------------------------------------------------------------------
 export { default as SynVueAlert } from './components/SynVueAlert.vue';
 export { default as SynVueBadge } from './components/SynVueBadge.vue';
+export { default as SynVueBreadcrumb } from './components/SynVueBreadcrumb.vue';
+export { default as SynVueBreadcrumbItem } from './components/SynVueBreadcrumbItem.vue';
 export { default as SynVueButton } from './components/SynVueButton.vue';
 export { default as SynVueButtonGroup } from './components/SynVueButtonGroup.vue';
+export { default as SynVueCard } from './components/SynVueCard.vue';
 export { default as SynVueCheckbox } from './components/SynVueCheckbox.vue';
 export { default as SynVueDialog } from './components/SynVueDialog.vue';
 export { default as SynVueDivider } from './components/SynVueDivider.vue';