@synergy-design-system/vue 1.21.0 → 1.22.0

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

@@ -0,0 +1,9 @@
+import '@synergy-design-system/components/components/spinner/spinner.js';
+declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
+    [x: string]: unknown;
+}>>>>, {
+    readonly [x: number]: string;
+} | {}, {}>;
+export default _default;

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as SynVueRadioButton } from "./components/SynVueRadioButton.vue
 export { default as SynVueRadioGroup } from "./components/SynVueRadioGroup.vue";
 export { default as SynVueSelect } from "./components/SynVueSelect.vue";
 export { default as SynVueSideNav } from "./components/SynVueSideNav.vue";
+export { default as SynVueSpinner } from "./components/SynVueSpinner.vue";
 export { default as SynVueSwitch } from "./components/SynVueSwitch.vue";
 export { default as SynVueTag } from "./components/SynVueTag.vue";
 export { default as SynVueTextarea } from "./components/SynVueTextarea.vue";

package/package.json

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

package/src/components/SynVueSpinner.vue

@@ -0,0 +1,61 @@
+<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 Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy.style/components/spinner
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+import type { SynSpinner } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynSpinner>();
+
+// Map methods
+
+defineExpose({
+
+});
+
+// Map attributes
+const props = defineProps<{
+
+}>();
+
+// 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-spinner
+
+    v-bind="visibleProps"
+    ref="element"
+  />
+</template>

package/src/index.js

@@ -30,6 +30,7 @@ export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue
 export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';
 export { default as SynVueSelect } from './components/SynVueSelect.vue';
 export { default as SynVueSideNav } from './components/SynVueSideNav.vue';
+export { default as SynVueSpinner } from './components/SynVueSpinner.vue';
 export { default as SynVueSwitch } from './components/SynVueSwitch.vue';
 export { default as SynVueTag } from './components/SynVueTag.vue';
 export { default as SynVueTextarea } from './components/SynVueTextarea.vue';