@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/setup/setup:vue-package/vue/README.md

@@ -0,0 +1,252 @@
+# @synergy-design-system/vue
+
+This package provides [vue.js](https://vuejs.org/) wrappers for [Synergy Web Components](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/components).
+
+It aims to provide an improved developer experience in Vue applications:
+
+- Provides two way data binding and `v-model`
+- Autocompletion and Types
+- Better custom event handling of `synergy` events
+
+## Known issues and limitations
+
+Got any problems using our Vue wrappers? Please take a look at [our list of known issues and limitations](https://synergy-design-system.github.io/?path=/docs/limitations-vue--docs) before [creating a ticket](https://github.com/synergy-design-system/synergy-design-system/issues/new?assignees=&labels=&projects=&template=generic-bug.md&title=fix%3A+%F0%9F%90%9B+).
+
+## Getting started
+
+### 1. Usage example
+
+If you want to see a usage example, please check out our [test Vue repository](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/_private/vue-demo).
+
+### 2. Package installation
+
+Run the following steps to install the required packages.
+
+```bash
+# Install the base library and required css files
+npm install --save @synergy-design-system/vue @synergy-design-system/tokens
+
+# Optional: Install the styles utility package
+npm install --save @synergy-design-system/styles
+
+# Optional: if icons shall be used, install the assets package
+npm install --save @synergy-design-system/assets
+```
+
+> ⚠️ Note we do **not** ship Vue in this package.
+> You will have to install it by yourself first!
+
+### 3. Load the desired theme (required) and utility classes (recommended)
+
+The components will not display correctly without the needed theme and utility classes. Please include either light or dark theme in your application, for example in a newly installed Vue application:
+
+```ts
+// src/main.ts
+// Add this line to enable the light theme for your application
+import "@synergy-design-system/tokens/themes/light.css";
+import "@synergy-design-system/components/index.css";
+
+// Optional: Import the styles package
+import "@synergy-design-system/styles/index.css";
+
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
+```
+
+### 4. Importing and rendering components
+
+You may now use the components by importing them from the `@synergy-design-system/vue` package and rendering them in your own Vue components.
+
+```html
+<script setup lang="ts">
+  // Note the name includes Vue here.
+  // This is done because it would
+  // clash with our native components otherwise
+  import { SynVueButton } from "@synergy-design-system/vue";
+</script>
+
+<template>
+  <SynVueButton type="submit"> Submit me </SynVueButton>
+</template>
+```
+
+### 5. Usage of the components
+
+All information about which components exist as well as the available properties, events and usage of a component, can be found at `components` in our [documentation](https://synergy-design-system.github.io/?path=/docs/components).
+The documentation is written for no specific web framework but only vanilla html and javascript.
+
+An example demo repository with the usage of the Vue wrapper components can be found [here](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/_private/vue-demo).
+
+The naming of the components for Vue changes from kebab-case to PascalCase with an appended `Vue` after the `syn`.
+`syn-button` becomes `SynVueButton`:
+
+```html
+<!-- Webcomponents example -->
+<syn-button> My Button </syn-button>
+```
+
+```html
+<!-- Vue wrapper example -->
+<SynVueButton> My Button </SynVueButton>
+```
+
+### 6. Usage of attributes
+
+The attribute naming of the components are the same as in the documentation.
+
+```html
+<!-- Webcomponents example -->
+<syn-input
+  label="Nickname"
+  help-text="What would you like people to call you?"
+  required
+></syn-input>
+```
+
+```html
+<!-- Vue wrapper example -->
+<SynVueInput
+  label="Nickname"
+  help-text="What would you like people to call you?"
+  required
+/>
+```
+
+### 7. Usage of events
+
+Custom events are named in the documentation as following: `syn-change`, `syn-clear`, ...
+They stay the same for the Vue components:
+
+```html
+<SynVueButton
+  @syn-blur="handleBlur"
+  @syn-focus="handleFocus"
+  @syn-invalid="handleInvalid"
+>
+  My Button
+</SynVueButton>
+```
+
+If typescript is used, you can get the correct types for components and events from the `@synergy-design-system/components` package.
+
+An example for how these types can be used in case of event handling, is shown below:
+
+```html
+<script setup lang="ts">
+  import { SynVueInput } from "@synergy-design-system/vue";
+  import type {
+    SynChangeEvent,
+    SynInput,
+  } from "@synergy-design-system/components";
+
+  const synChange = (e: SynChangeEvent) => {
+    const input = e.target as SynInput;
+    // Now we get access to all properties, methods etc. of the syn-input
+    const surname = input.value;
+    doSomething(surname);
+  };
+</script>
+
+<template>
+  <SynVueInput label="Surname" @syn-change="synChange" />
+</template>
+```
+
+### 8. Obtaining a reference to the underlying native element (e.g. for usage of methods)
+
+Sometimes, there is a need to interact directly with the underlying native web-component. For this reason, the library exposes a `nativeElement` property for all vue components.
+
+```html
+<script setup lang="ts">
+  import { SynVueInput, SynVueButton } from "@synergy-design-system/vue";
+  import { ref } from "vue";
+
+  const count = ref<InstanceType<typeof SynVueInput> | null>(null);
+
+  const handleClick = () => {
+    // Increment the count via calling the method
+    count.value?.nativeElement?.stepUp();
+  };
+</script>
+
+<template>
+  <SynVueInput ref="count" label="My count" type="number" value="5" />
+  <SynVueButton @click="handleClick"> Increment </SynVueButton>
+</template>
+```
+
+### 9. Using two way databinding
+
+We support [Vue two way data binding](https://vuejs.org/guide/components/v-model.html) for form components out of the box.
+You may use it in one of the following ways:
+
+```html
+<script setup lang="ts">
+  import { ref } from "vue";
+  import {
+    SynVueButton,
+    SynVueCheckbox,
+    SynVueTextarea,
+    SynVueInput,
+  } from "@synergy-design-system/vue";
+
+  const formValues = ref({
+    checkboxValue: false,
+    inputValue: "",
+    textAreaValue: "",
+  });
+
+  const submit = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const target = e.target as HTMLFormElement;
+
+    const isValid = target.reportValidity();
+    if (isValid) {
+      const data = [...new FormData(target)]
+        .map(v => {
+          return `${v[0]}: ${v[1]}`;
+        })
+        .join(",\n")
+        .trim();
+      // Do something with the data
+      console.log(data);
+    }
+  };
+</script>
+
+<template>
+  <form @submit="submit">
+    <SynVueInput
+      label="Input Example"
+      name="inputValue"
+      required
+      v-model="formValues.inputValue"
+    />
+    <SynVueTextarea v-model="formValues.textAreaValue" name="textAreaValue" />
+    <SynVueCheckbox
+      v-model="formValues.checkboxValue"
+      required
+      name="checkboxValue"
+      >Agree</SynVueCheckbox
+    >
+    >
+  </form>
+</template>
+```
+
+---
+
+## Development
+
+To create a new version of this package, proceed in the following way:
+
+1. Check out the [Synergy Design System Repository](https://github.com/synergy-design-system/synergy).
+2. Run `pnpm i -r` to install all dependencies.
+3. Build the `@synergy-design-system/components` package (or run `pnpm build` in the project root to build everything).
+4. Move to to `packages/_private/vue-demo` and use `pnpm start` to spin up a local vite project using Vue and typescript to validate the build.
+
+> ⚠️ The build process will always try to sync this packages `package.json.version` field with the latest version from `@synergy-design-system/components`!
+> Therefore, it is best to not alter the version string

package/data/layers/full/setup/setup:vue-package/vue/index.ts

@@ -0,0 +1,53 @@
+// ---------------------------------------------------------------------
+// 🔒 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.
+// ---------------------------------------------------------------------
+export { default as SynVueAccordion } from './components/SynVueAccordion.vue';
+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 SynVueCombobox } from './components/SynVueCombobox.vue';
+export { default as SynVueDetails } from './components/SynVueDetails.vue';
+export { default as SynVueDialog } from './components/SynVueDialog.vue';
+export { default as SynVueDivider } from './components/SynVueDivider.vue';
+export { default as SynVueDrawer } from './components/SynVueDrawer.vue';
+export { default as SynVueDropdown } from './components/SynVueDropdown.vue';
+export { default as SynVueFile } from './components/SynVueFile.vue';
+export { default as SynVueHeader } from './components/SynVueHeader.vue';
+export { default as SynVueIcon } from './components/SynVueIcon.vue';
+export { default as SynVueIconButton } from './components/SynVueIconButton.vue';
+export { default as SynVueInput } from './components/SynVueInput.vue';
+export { default as SynVueMenu } from './components/SynVueMenu.vue';
+export { default as SynVueMenuItem } from './components/SynVueMenuItem.vue';
+export { default as SynVueMenuLabel } from './components/SynVueMenuLabel.vue';
+export { default as SynVueNavItem } from './components/SynVueNavItem.vue';
+export { default as SynVueOptgroup } from './components/SynVueOptgroup.vue';
+export { default as SynVueOption } from './components/SynVueOption.vue';
+export { default as SynVuePagination } from './components/SynVuePagination.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';
+export { default as SynVueRange } from './components/SynVueRange.vue';
+export { default as SynVueRangeTick } from './components/SynVueRangeTick.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 SynVueTab } from './components/SynVueTab.vue';
+export { default as SynVueTabGroup } from './components/SynVueTabGroup.vue';
+export { default as SynVueTabPanel } from './components/SynVueTabPanel.vue';
+export { default as SynVueTag } from './components/SynVueTag.vue';
+export { default as SynVueTagGroup } from './components/SynVueTagGroup.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/data/layers/full/setup/setup:vue-package/vue/package.json

@@ -0,0 +1,58 @@
+{
+  "author": {
+    "name": "SICK Global UX Foundation",
+    "url": "https://www.sick.com"
+  },
+  "dependencies": {
+    "@synergy-design-system/components": "workspace:*"
+  },
+  "description": "Vue3 wrappers for the Synergy Design System",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*"
+  },
+  "scripts": {
+    "_build": "vite build"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "homepage": "https://synergy-design-system.github.io",
+  "keywords": [
+    "Vue Web Component Wrapper",
+    "Vue Components",
+    "Vue Design System",
+    "Design System",
+    "SDS",
+    "Synergy Design System",
+    "SICK",
+    "SICK Design System"
+  ],
+  "license": "MIT",
+  "name": "@synergy-design-system/vue",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/synergy-design-system/synergy.git",
+    "directory": "packages/vue"
+  },
+  "type": "module",
+  "version": "3.12.1",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "rollup-plugin-node-externals": "^9.0.1",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.33"
+  },
+  "peerDependencies": {
+    "@synergy-design-system/tokens": "workspace:*"
+  }
+}

package/data/layers/full/styles/link/index.css

@@ -0,0 +1,89 @@
+/**
+ * Link styles
+ * @variant {small | medium | large} syn-link The size of the link
+ * @boolean { false } syn-link--quiet Applies the quiet link styling
+ * @boolean { false } syn-link--disabled Applies the disabled link styling
+ */
+.syn-link {
+  /* The size of the icon */
+  --syn-link-icon-size: 1em;
+
+  /* The gap that is used when there are pre or suffix icons */
+  --syn-link-icon-gap: 0.25em;
+
+  /* The font size used for the link */
+  --syn-link-font-size: 1em;
+
+  color: var(--syn-link-color);
+  display: inline;
+  font-family: var(--syn-font-sans);
+  font-size: var(--syn-link-font-size);
+  text-decoration: underline;
+  text-underline-offset: var(--syn-link-underline-outline);
+}
+
+.syn-link:has(syn-icon) {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--syn-link-icon-gap);
+}
+
+.syn-link syn-icon {
+  font-size: var(--syn-link-icon-size);
+}
+
+.syn-link:not(.syn-link--disabled):hover {
+  color: var(--syn-link-color-hover);
+}
+
+.syn-link:not(.syn-link--disabled):active {
+  color: var(--syn-link-color-active);
+}
+
+.syn-link:not(.syn-link--disabled):focus-visible {
+  border-radius: var(--syn-focus-ring-border-radius);
+  outline: var(--syn-focus-ring);
+  outline-offset: var(--syn-focus-ring-offset);
+}
+
+/* Overrides for smaller links */
+.syn-link--small {
+  --syn-link-icon-size: var(--syn-spacing-medium);
+  --syn-link-icon-gap: var(--syn-spacing-2x-small);
+  --syn-link-font-size: var(--syn-font-size-small);
+}
+
+/*
+ * Overrides for medium links.
+ */
+.syn-link--medium {
+  --syn-link-icon-size: var(--syn-spacing-large);
+  --syn-link-icon-gap: var(--syn-spacing-x-small);
+  --syn-link-font-size: var(--syn-font-size-medium);
+}
+
+.syn-link--large {
+  --syn-link-icon-size: var(--syn-spacing-x-large);
+  --syn-link-icon-gap: var(--syn-spacing-small);
+  --syn-link-font-size: var(--syn-font-size-large);
+}
+
+/* Quite Variant of links use other colors */
+.syn-link--quiet:not(.syn-link--disabled) {
+  color: var(--syn-link-quiet-color);
+}
+
+.syn-link--quiet:not(.syn-link--disabled):hover {
+  color: var(--syn-link-quiet-color-hover);
+}
+
+.syn-link--quiet:not(.syn-link--disabled):active {
+  color: var(--syn-link-quiet-color-active);
+}
+
+/* Styling for disabled links */
+.syn-link--disabled:not([href]),
+a.syn-link:not([href]) {
+  cursor: not-allowed;
+  opacity: var(--syn-input-disabled-opacity);
+}

package/data/layers/full/styles/link-list/index.css

@@ -0,0 +1,51 @@
+/**
+ * Link list
+ * @variant {medium | small | large} syn-link-list The size of the link list
+ * @boolean { false } syn-link-list--horizontal Applies horizontal styling to the link list
+ */
+.syn-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--syn-spacing-small);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.syn-link-list--horizontal {
+  flex-flow: row wrap;
+  gap: var(--syn-spacing-small) var(--syn-spacing-large);
+}
+
+/* Reset list item styles, but only for the first level */
+.syn-link-list > li {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+/* Size modifiers */
+.syn-link-list--small {
+  gap: var(--syn-spacing-x-small);
+}
+
+.syn-link-list--medium {
+  gap: var(--syn-spacing-small);
+}
+
+.syn-link-list--large {
+  gap: var(--syn-spacing-medium);
+}
+
+/* Size modifiers for horizontal version */
+.syn-link-list--horizontal.syn-link-list--small {
+  gap: var(--syn-spacing-x-small) var(--syn-spacing-medium);
+}
+
+.syn-link-list--horizontal.syn-link-list--medium {
+  gap: var(--syn-spacing-small) var(--syn-spacing-large);
+}
+
+.syn-link-list--horizontal.syn-link-list--large {
+  gap: var(--syn-spacing-medium) var(--syn-spacing-x-large);
+}

package/data/layers/full/styles/tables/table-cell.css

@@ -0,0 +1,125 @@
+/**
+ * Table cell classes
+ *
+ * @boolean { true } syn-table-cell Applies the table cell styling
+ * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
+ * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
+ * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
+ * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
+ * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
+ * @boolean syn-table-cell--header Applies the table cell header styling
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
+ * @boolean syn-table-cell--shadow-active Displays the table shadow
+ */
+
+.syn-table-cell,
+.syn-table--default td,
+.syn-table--alternating td,
+.syn-table--border td {
+	background-color: var(--syn-table-background-color);
+	color: var(--syn-typography-color-text);
+	font: var(--syn-body-small-regular);
+	height: var(--syn-spacing-large);
+	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+	text-align: start;
+	vertical-align: top;
+}
+
+.syn-table-cell--alternating,
+.syn-table--alternating tr:nth-child(even) > td {
+	background-color: var(--syn-table-background-color-alternating);
+}
+
+/* Border */
+.syn-table-cell--border-start {
+	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
+}
+
+.syn-table-cell--border-end,
+.syn-table--border tr > td:not(:last-child) {
+	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
+}
+
+.syn-table-cell--border-top {
+	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
+}
+
+.syn-table-cell--border-bottom,
+.syn-table--border tr:not(:last-child) > td {
+	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
+}
+
+
+/* Header */
+.syn-table-cell--header,
+.syn-table--default th,
+.syn-table--alternating th,
+.syn-table--border th {
+	background-color: var(--syn-table-background-color-header);
+	color: var(--syn-typography-color-text);
+	font: var(--syn-body-small-semibold);
+	height: var(--syn-spacing-large);
+	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+	text-align: start;
+	vertical-align: top;
+}
+
+/* Shadow */
+.syn-table-cell--shadow-bottom::after,
+.syn-table-cell--shadow-top::after,
+.syn-table-cell--shadow-start::after,
+.syn-table-cell--shadow-end::after {
+  --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
+  --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
+
+	content: '';
+	opacity: 0;
+	pointer-events: none;
+	position: absolute;
+	transition-duration: 0.25s;
+	transition-property: opacity;
+	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.syn-table-cell--shadow-bottom::after,
+.syn-table-cell--shadow-top::after {
+	height: var(--syn-spacing-x-small);
+	left: 0;
+	right: 0;
+}
+
+.syn-table-cell--shadow-start::after,
+.syn-table-cell--shadow-end::after {
+	bottom: 0;
+	top: 0;
+	width: var(--syn-spacing-x-small);
+}
+
+.syn-table-cell--shadow-bottom::after {
+	background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
+	bottom: calc(var(--syn-spacing-x-small) * -1);
+}
+
+.syn-table-cell--shadow-top::after {
+	background: linear-gradient(0deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
+	top: calc(var(--syn-spacing-x-small) * -1);
+}
+
+.syn-table-cell--shadow-start::after,
+:dir(rtl) .syn-table-cell--shadow-end::after {
+	background: linear-gradient(270deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
+	left: calc(var(--syn-spacing-x-small) * -1);
+	right: unset;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.syn-table-cell--shadow-end::after,
+:dir(rtl) .syn-table-cell--shadow-start::after {
+	background: linear-gradient(90deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
+	left: unset;
+	right: calc(var(--syn-spacing-x-small) * -1);
+}
+
+.syn-table-cell--shadow-active::after {
+	opacity: 1;
+}

package/data/layers/full/styles/tables/table.css

@@ -0,0 +1,16 @@
+/**
+ * Table classes
+ * @boolean { false } syn-table Applies the styling to a table element
+ * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
+ * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
+ * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
+ */
+.syn-table,
+.syn-table--default,
+.syn-table--alternating,
+.syn-table--border {
+  all: unset;
+  border-collapse: collapse;
+  border-spacing: var(--syn-border-width-none);
+  display: table;
+}

package/data/layers/full/styles/typography/body.css

@@ -0,0 +1,19 @@
+/**
+ * Typographic text classes
+ * @variant {x-small | small | medium | large} syn-body The font size of the body text
+ */
+.syn-body--x-small {
+  font: var(--syn-body-x-small-regular);
+}
+
+.syn-body--small {
+  font: var(--syn-body-small-regular);
+}
+
+.syn-body--medium {
+  font: var(--syn-body-medium-regular);
+}
+
+.syn-body--large {
+  font: var(--syn-body-large-regular);
+}

package/data/layers/full/styles/typography/heading.css

@@ -0,0 +1,19 @@
+/**
+ * Typographic headline classes
+ * @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
+ */
+.syn-heading--large {
+  font: var(--syn-heading-large);
+}
+
+.syn-heading--x-large {
+  font: var(--syn-heading-x-large);
+}
+
+.syn-heading--2x-large {
+  font: var(--syn-heading-2x-large);
+}
+
+.syn-heading--3x-large {
+  font: var(--syn-heading-3x-large);
+}