@synergy-design-system/vue 1.24.1 → 1.25.0

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

@@ -2,6 +2,7 @@ export { default as SynVueAlert } from "./components/SynVueAlert.vue";
 export { default as SynVueBadge } from "./components/SynVueBadge.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.25.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.25.0",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.24"

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

@@ -7,6 +7,7 @@ export { default as SynVueAlert } from './components/SynVueAlert.vue';
 export { default as SynVueBadge } from './components/SynVueBadge.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';