@synergy-design-system/vue 2.11.7 → 2.12.0

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

@@ -0,0 +1,99 @@
+import { SynValidate } from '@synergy-design-system/components';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        nativeElement: unknown;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    /**
+  * The variant that should be used to show validation alerts.
+  
+  The following variants are supported:
+  - **native** (default): Uses the native browser validation, usually a browser tooltip.
+  - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
+   */
+    variant?: SynValidate["variant"];
+    /**
+     * Do not show the error icon when using the inline variant validation
+     */
+    hideIcon?: SynValidate["hideIcon"];
+    /**
+  * Defines the events that trigger the validation.
+  `invalid` will always automatically be included.
+  You may also use the `live` keyword to validate on every input change.
+  `live` will make sure to listen to the `invalid`, `input` and `blur` events.
+  
+  Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+  and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
+   */
+    on?: SynValidate["on"];
+    /**
+  * Custom validation message to be displayed when the input is invalid.
+  Will override the default browser validation message.
+  Set to an empty string to reset the validation message.
+   */
+    customValidationMessage?: SynValidate["customValidationMessage"];
+    /**
+  * Set this to true to validate the input immediately when it is rendered.
+  Best used with a `variant` of `inline`.
+  When setting eager, the input will not be focused automatically.
+  
+  When using a `variant` of `native` the browser will focus
+  the last eager field as it is using a tooltip.
+  In this case it is better to just provide one eager field.
+   */
+    eager?: SynValidate["eager"];
+}, {
+    nativeElement: import('vue').Ref<SynValidate | undefined, SynValidate | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+  * The variant that should be used to show validation alerts.
+  
+  The following variants are supported:
+  - **native** (default): Uses the native browser validation, usually a browser tooltip.
+  - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
+   */
+    variant?: SynValidate["variant"];
+    /**
+     * Do not show the error icon when using the inline variant validation
+     */
+    hideIcon?: SynValidate["hideIcon"];
+    /**
+  * Defines the events that trigger the validation.
+  `invalid` will always automatically be included.
+  You may also use the `live` keyword to validate on every input change.
+  `live` will make sure to listen to the `invalid`, `input` and `blur` events.
+  
+  Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+  and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
+   */
+    on?: SynValidate["on"];
+    /**
+  * Custom validation message to be displayed when the input is invalid.
+  Will override the default browser validation message.
+  Set to an empty string to reset the validation message.
+   */
+    customValidationMessage?: SynValidate["customValidationMessage"];
+    /**
+  * Set this to true to validate the input immediately when it is rendered.
+  Best used with a `variant` of `inline`.
+  When setting eager, the input will not be focused automatically.
+  
+  When using a `variant` of `native` the browser will focus
+  the last eager field as it is using a tooltip.
+  In this case it is better to just provide one eager field.
+   */
+    eager?: SynValidate["eager"];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/SynVueValidate.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
+import "@synergy-design-system/components/components/validate/validate.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SynVueValidate",
+  props: {
+    variant: {},
+    hideIcon: {},
+    on: {},
+    customValidationMessage: {},
+    eager: {}
+  },
+  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-validate", mergeProps(visibleProps.value, {
+        ref_key: "nativeElement",
+        ref: nativeElement
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/SynVueValidate.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./SynVueValidate.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/index.d.ts

@@ -43,3 +43,4 @@ export { default as SynVueTabPanel } from './components/SynVueTabPanel.vue';
 export { default as SynVueTag } from './components/SynVueTag.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';

package/dist/index.js

@@ -43,6 +43,7 @@ import { default as default43 } from "./components/SynVueTabPanel.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";
 export {
   default2 as SynVueAccordion,
   default3 as SynVueAlert,
@@ -88,5 +89,6 @@ export {
   default43 as SynVueTabPanel,
   default44 as SynVueTag,
   default45 as SynVueTextarea,
-  default46 as SynVueTooltip
+  default46 as SynVueTooltip,
+  default47 as SynVueValidate
 };

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.11.7"
+    "@synergy-design-system/components": "^2.12.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.11.7",
+  "version": "2.12.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
@@ -50,7 +50,7 @@
     "vue": "^3.5.12"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.13.0"
+    "@synergy-design-system/tokens": "^2.14.0"
   },
   "scripts": {
     "_build": "vite build"

package/src/components/SynVueValidate.vue

@@ -0,0 +1,98 @@
+<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 Validate provides form field validation messages in a unified way.
+ * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+ * and showing the validation message in a consistent, user defined way.
+ *
+ * @dependency syn-alert
+ *
+ * @slot - The form field that should be validated.
+ * Avoid slotting in more than one element, as subsequent ones will be ignored.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the form field.
+ * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+ * @csspart alert__base - The container that wraps the alert.
+ * @csspart alert__message - The container that wraps the alert message.
+ * @csspart alert__icon - The container that wraps the alert icon.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/validate/validate.js';
+
+import type { SynValidate } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynValidate>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The variant that should be used to show validation alerts.
+
+The following variants are supported:
+- **native** (default): Uses the native browser validation, usually a browser tooltip.
+- **inline**: Show the validation message underneath the element, using a `<syn-alert>`
+ */
+  variant?: SynValidate['variant'];
+
+  /**
+   * Do not show the error icon when using the inline variant validation
+   */
+  hideIcon?: SynValidate['hideIcon'];
+
+  /**
+* Defines the events that trigger the validation.
+`invalid` will always automatically be included.
+You may also use the `live` keyword to validate on every input change.
+`live` will make sure to listen to the `invalid`, `input` and `blur` events.
+
+Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
+ */
+  on?: SynValidate['on'];
+
+  /**
+* Custom validation message to be displayed when the input is invalid.
+Will override the default browser validation message.
+Set to an empty string to reset the validation message.
+ */
+  customValidationMessage?: SynValidate['customValidationMessage'];
+
+  /**
+* Set this to true to validate the input immediately when it is rendered.
+Best used with a `variant` of `inline`.
+When setting eager, the input will not be focused automatically.
+
+When using a `variant` of `native` the browser will focus
+the last eager field as it is using a tooltip.
+In this case it is better to just provide one eager field.
+ */
+  eager?: SynValidate['eager'];
+}>();
+
+// 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-validate v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-validate>
+</template>

package/src/index.ts

@@ -48,3 +48,4 @@ export { default as SynVueTabPanel } from './components/SynVueTabPanel.vue';
 export { default as SynVueTag } from './components/SynVueTag.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';