@dpa-id-components/dpa-shared-components 22.0.0-next.1 → 22.0.0-next.3

package/src/assets/icons/play.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
+      d="M8 5.83723V18.1L17.197 11.7828L8 5.83723ZM6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
       fill="currentColor"
     />
   </svg>

package/src/components/UiIcon/icons.ts

@@ -100,6 +100,7 @@ export const icons = {
   "list": () => import("../../assets/icons/list.vue"),
   "list-search": () => import("../../assets/icons/list-search.vue"),
   "lock": () => import("../../assets/icons/lock.vue"),
+  "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
   "mail": () => import("../../assets/icons/mail.vue"),
   "map": () => import("../../assets/icons/map.vue"),
   "map-filled": () => import("../../assets/icons/map-filled.vue"),
@@ -124,6 +125,7 @@ export const icons = {
   "pin": () => import("../../assets/icons/pin.vue"),
   "planning": () => import("../../assets/icons/planning.vue"),
   "play": () => import("../../assets/icons/play.vue"),
+  "play-filled": () => import("../../assets/icons/play-filled.vue"),
   "plus": () => import("../../assets/icons/plus.vue"),
   "print": () => import("../../assets/icons/print.vue"),
   "refresh": () => import("../../assets/icons/refresh.vue"),

package/src/components/UiRadioButton/UiRadioButton.vue

@@ -13,7 +13,7 @@
       <input
         :id="uniqueId"
         v-model="model"
-        class="inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] not-read-only:enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted"
+        class="inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted"
         :class="{
           'size-4': size === 'sm',
           'size-5': size === 'md',

package/src/components/UiToggleButton/UiToggleButton.vue

@@ -9,35 +9,23 @@
     "
   >
     <slot v-if="labelPosition === 'left'" />
-    <div class="relative">
-      <input
-        :id="toggleId"
-        v-model="modelValue"
-        type="checkbox"
-        data-testid="toggleButton"
-        role="switch"
-        class="sr-only"
-        v-bind="{ ...$attrs, class: null }"
-      />
-      <div
-        class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
-        :class="{
-          'bg-secondary opacity-50': modelValue,
-          'bg-neutral-faint': !modelValue,
-          'h-3 w-6': size === 'sm',
-          'h-4 w-10': size === 'lg',
-        }"
-      />
-      <div
-        :class="{
-          'translate-x-full bg-secondary': modelValue,
-          'bg-neutral-muted': !modelValue,
-          '-top-0.5 size-4': size === 'sm',
-          '-top-1 size-6': size === 'lg',
-        }"
-        class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
-      />
-    </div>
+
+    <input
+      :id="toggleId"
+      v-model="model"
+      class="relative appearance-none rounded-full shadow-inner transition-opacity duration-200 ease-in-out after:absolute after:-left-1 after:block after:rounded-full after:shadow-sm after:transition-transform after:duration-200 after:ease-in-out after:content-[''] enabled:cursor-pointer"
+      :class="{
+        'bg-secondary-emphasis after:translate-x-full after:bg-secondary':
+          model,
+        'bg-neutral-faint after:bg-neutral-muted': !model,
+        'h-3 w-6 after:-top-0.5 after:size-4': size === 'sm',
+        'h-4 w-10 after:-top-1 after:size-6': size === 'lg',
+      }"
+      type="checkbox"
+      role="switch"
+      data-testid="toggleButton"
+      v-bind="{ ...$attrs, class: null }"
+    />
 
     <slot v-if="labelPosition === 'right'" />
   </UiLabel>
@@ -51,13 +39,13 @@ import UiLabel from "../UiLabel/UiLabel.vue";
 
 defineOptions({ inheritAttrs: false });
 
-const modelValue = defineModel<boolean>({ default: false });
+const model = defineModel<boolean>({ default: false });
 
 defineSlots<{
   /**
    * Label content.
    */
-  default?: () => any;
+  default: () => any;
 }>();
 
 const {

package/dist/play-CArB2O7k.js

@@ -1,18 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
-import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
-//#region src/assets/icons/play.vue
-var i = {}, a = {
-	width: "24",
-	height: "24",
-	viewBox: "0 0 24 24",
-	xmlns: "http://www.w3.org/2000/svg"
-};
-function o(e, i) {
-	return r(), t("svg", a, [...i[0] ||= [n("path", {
-		d: "M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z",
-		fill: "currentColor"
-	}, null, -1)]]);
-}
-var s = /* @__PURE__ */ e(i, [["render", o]]);
-//#endregion
-export { s as default };