@synergy-design-system/vue 1.17.2 → 1.19.0

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

@@ -0,0 +1,45 @@
+import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The current progress as a percentage, 0 to 100.
+   */
+    value?: number | undefined;
+    /**
+  * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+   */
+    indeterminate?: boolean | undefined;
+    /**
+  * A custom label for assistive devices.
+   */
+    label?: string | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The current progress as a percentage, 0 to 100.
+   */
+    value?: number | undefined;
+    /**
+  * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+   */
+    indeterminate?: boolean | undefined;
+    /**
+  * A custom label for assistive devices.
+   */
+    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/SynVueProgressRing.vue.d.ts

@@ -0,0 +1,37 @@
+import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The current progress as a percentage, 0 to 100.
+   */
+    value?: number | undefined;
+    /**
+  * A custom label for assistive devices.
+   */
+    label?: string | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The current progress as a percentage, 0 to 100.
+   */
+    value?: number | undefined;
+    /**
+  * A custom label for assistive devices.
+   */
+    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/index.d.ts

@@ -17,6 +17,8 @@ export { default as SynVueOptgroup } from "./components/SynVueOptgroup.vue";
 export { default as SynVueOption } from "./components/SynVueOption.vue";
 export { default as SynVuePopup } from "./components/SynVuePopup.vue";
 export { default as SynVuePrioNav } from "./components/SynVuePrioNav.vue";
+export { default as SynVueProgressBar } from "./components/SynVueProgressBar.vue";
+export { default as SynVueProgressRing } from "./components/SynVueProgressRing.vue";
 export { default as SynVueRadio } from "./components/SynVueRadio.vue";
 export { default as SynVueRadioButton } from "./components/SynVueRadioButton.vue";
 export { default as SynVueRadioGroup } from "./components/SynVueRadioGroup.vue";

package/package.json

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

package/src/components/SynVueProgressBar.vue

@@ -0,0 +1,82 @@
+<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 Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy.style/components/progress-bar
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
+
+import type { SynProgressBar } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynProgressBar>();
+
+// Map methods
+
+defineExpose({
+
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The current progress as a percentage, 0 to 100.
+ */
+  'value'?: SynProgressBar['value'];
+
+  /**
+* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+ */
+  'indeterminate'?: SynProgressBar['indeterminate'];
+
+  /**
+* A custom label for assistive devices.
+ */
+  'label'?: SynProgressBar['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-progress-bar
+
+    v-bind="visibleProps"
+    ref="element"
+  >
+    <slot />
+  </syn-progress-bar>
+</template>

package/src/components/SynVueProgressRing.vue

@@ -0,0 +1,77 @@
+<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 Progress rings are used to show the progress of a determinate operation in a circular fashion.
+ * @documentation https://synergy.style/components/progress-ring
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The progress ring label.
+ *
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
+
+import type { SynProgressRing } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynProgressRing>();
+
+// Map methods
+
+defineExpose({
+
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The current progress as a percentage, 0 to 100.
+ */
+  'value'?: SynProgressRing['value'];
+
+  /**
+* A custom label for assistive devices.
+ */
+  'label'?: SynProgressRing['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-progress-ring
+
+    v-bind="visibleProps"
+    ref="element"
+  >
+    <slot />
+  </syn-progress-ring>
+</template>

package/src/index.js

@@ -22,6 +22,8 @@ export { default as SynVueOptgroup } from './components/SynVueOptgroup.vue';
 export { default as SynVueOption } from './components/SynVueOption.vue';
 export { default as SynVuePopup } from './components/SynVuePopup.vue';
 export { default as SynVuePrioNav } from './components/SynVuePrioNav.vue';
+export { default as SynVueProgressBar } from './components/SynVueProgressBar.vue';
+export { default as SynVueProgressRing } from './components/SynVueProgressRing.vue';
 export { default as SynVueRadio } from './components/SynVueRadio.vue';
 export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue';
 export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';