@zap-wunschlachen/wl-shared-components 1.0.30 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/App.vue +6 -2
  2. package/package.json +1 -1
  3. package/src/components/Background/Background.css +4 -3
  4. package/src/components/Background/WhiteCocoonBackground.vue +3 -1
  5. package/src/components/Background/WunschlachenBackground.vue +2 -1
  6. package/src/components/Icons/Logo.vue +12 -3
  7. package/src/components/Icons/MiniLogo.vue +36 -0
  8. package/src/components/index.ts +2 -0
package/App.vue CHANGED
@@ -1,13 +1,17 @@
1
1
  <template>
2
2
  <div class="app">
3
3
  <div class="element-container">
4
- <OtpInput phoneNumber="+49 123 4567890" :submitFn="() => alert('Submitted!')" :resendFn="() => alert('Resent!')" />
4
+ <MiniLogo height="150" width="150" :domain="domain" />
5
+ <Logo height="150" width="300" :domain="domain" />
5
6
  </div>
6
7
  </div>
7
8
  </template>
8
9
 
9
10
  <script setup lang="ts">
10
- import OtpInput from '@/components/OtpInput/OtpInput.vue';
11
+ import Logo from '@/components/Icons/Logo.vue';
12
+ import MiniLogo from '@/components/Icons/MiniLogo.vue';
13
+ import { ref } from 'vue';
14
+ const domain = ref('domain-dental');
11
15
  </script>
12
16
 
13
17
  <style scoped>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zap-wunschlachen/wl-shared-components",
3
- "version": "1.0.30",
3
+ "version": "1.0.31",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/Background/Background.css CHANGED
@@ -21,9 +21,10 @@
21
21
 
22
22
  .background__svg {
23
23
  position: absolute;
24
- top: 50%;
25
- left: 50%;
26
- transform: translate(-50%, -50%);
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
27
28
  pointer-events: none;
28
29
  z-index: 0;
29
30
  }
package/src/components/Background/WhiteCocoonBackground.vue CHANGED
@@ -1,5 +1,7 @@
1
1
  <template>
2
- <svg v-if="siteColors['domain'] === 'domain-cocoon'" role="presentation" aria-hidden="true" width="1269" height="1024" viewBox="0 0 1269 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <svg v-if="siteColors['domain'] === 'domain-cocoon'" role="presentation" aria-hidden="true" width="1269" height="1024" viewBox="0 0 1269 1024" fill="none" xmlns="http://www.w3.org/2000/svg"
3
+ preserveAspectRatio="xMidYMid slice"
4
+ >
3
5
  <path d="M574.5 -183C191.55 -183 -120 128.55 -120 511.5C-120 894.45 191.55 1206 574.5 1206C957.45 1206 1269 894.45 1269 511.5C1269 128.55 957.45 -183 574.5 -183ZM574.5 1124.78C465.861 1124.78 363.819 1096.33 275.265 1046.49C494.89 949.869 672.877 763.232 674.782 511.353C674.929 263.579 492.984 72.1045 275.998 -24.0728C364.405 -73.6276 466.154 -101.924 574.5 -101.924C682.846 -101.924 600.597 -101.337 613.499 -100.604C769.64 57.2967 866.257 272.083 865.964 511.207C867.577 745.786 770.52 963.211 612.912 1123.31C600.157 1124.04 587.402 1124.63 574.5 1124.63V1124.78ZM20.7473 247.892C23.6795 249.211 26.7584 250.384 29.6906 251.557C139.943 300.965 285.235 383.948 289.633 511.353C285.235 638.759 139.796 721.888 29.6906 771.149C26.7584 772.469 23.6795 773.642 20.7473 774.815C-17.3718 694.911 -38.7771 605.625 -38.7771 511.5C-38.7771 417.375 -17.3718 327.795 20.8939 247.892H20.7473ZM58.1333 841.963C94.3464 830.087 129.973 816.013 164.427 799.152C236.413 763.232 306.64 711.185 349.304 640.958C412.787 539.063 391.528 415.762 310.452 330.581C244.623 260.794 155.923 211.972 58.4265 180.451C99.038 117.408 150.645 62.2815 210.756 17.8581C444.016 135.734 640.182 362.542 558.666 634.507C504.126 804.87 368.804 925.971 210.023 1004.56C150.059 960.132 98.4516 904.859 57.9867 841.963H58.1333ZM740.025 1101.91C842.067 986.815 915.226 845.628 944.988 692.566C1005.25 406.233 917.425 123.272 740.025 -79.0523C998.061 -6.62604 1187.78 230.592 1187.78 511.353C1187.78 792.115 997.915 1029.33 739.878 1101.76L740.025 1101.91Z" :fill="siteColors['bg_logo_fill_color']"/>
4
6
  </svg>
5
7
  </template>
package/src/components/Background/WunschlachenBackground.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template>
2
- <svg v-if="siteColors['domain'] === 'domain-dental'" role="presentation" aria-hidden="true" width="1243" height="1024" viewBox="0 0 1243 1024" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.6">
2
+ <svg v-if="siteColors['domain'] === 'domain-dental'" role="presentation" aria-hidden="true" width="1243" height="1024" viewBox="0 0 1243 1024" fill="none" xmlns="http://www.w3.org/2000/svg"
3
+ preserveAspectRatio="xMidYMid slice"> <g opacity="0.6">
3
4
  <path d="M209.5 -526C779.369 -526 1243 -62.3689 1243 507.5C1243 1077.37 779.369 1541 209.5 1541C-360.369 1541 -824 1077.37 -824 507.5C-824 -62.3689 -360.369 -526 209.5 -526ZM209.5 -372.856C-275.921 -372.856 -670.769 21.9911 -670.77 507.412C-670.77 992.833 -275.921 1387.68 209.5 1387.68C694.921 1387.68 1089.77 992.833 1089.77 507.412C1089.77 21.9911 694.921 -372.856 209.5 -372.856ZM749.803 745.638C637.533 936.323 430.494 1054.81 209.542 1054.81C-11.4101 1054.81 -218.361 936.323 -330.719 745.638L-198.673 667.841C-113.792 811.971 42.6685 901.494 209.542 901.494C376.416 901.494 532.876 811.971 617.757 667.841L749.803 745.638ZM206.036 120.541C238.326 120.541 264.053 129.642 285.142 147.669C306.23 165.784 321.719 193.35 331.607 230.279L400.212 497.975L481.854 135.33H625.189L532.258 531.841C526.307 556.869 516.42 577.434 502.594 593.623C488.768 609.813 472.404 621.802 453.678 629.678C434.864 637.554 416.226 641.579 397.85 641.579C368.885 641.579 343.333 632.478 321.281 614.363C299.23 596.249 283.567 569.033 274.291 532.804L206.911 261.434L138.832 532.804C129.644 569.033 114.155 596.249 92.3662 614.363C70.6649 632.478 44.9386 641.579 15.2744 641.579C-3.18929 641.579 -21.6535 637.554 -40.1172 629.678C-58.5809 621.802 -74.6819 609.813 -88.5078 593.623C-102.334 577.434 -112.221 556.869 -118.172 531.841L-206.203 135.33H-64.7939L13.9209 497.614L82.4785 228.267C91.7541 192.037 106.543 164.996 126.932 147.231C147.408 129.38 173.747 120.541 206.036 120.541Z" :fill="siteColors['bg_logo_fill_color']"/>
4
5
  </g>
5
6
  </svg>
package/src/components/Icons/Logo.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <svg v-if="siteColors['domain'] === 'domain-cocoon'" :width="width" :height="height" viewBox="0 0 124 41" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <svg v-if="currentDomain === 'domain-cocoon'" :width="width" :height="height" viewBox="0 0 124 41" fill="none" xmlns="http://www.w3.org/2000/svg">
3
3
  <g clip-path="url(#clip0_5_1296)">
4
4
  <path
5
5
  d="M20.6167 0.147949C9.29819 0.147949 0.103317 9.28184 0.103317 20.4999C0.103317 31.7179 9.30966 40.8518 20.6167 40.8518C31.9238 40.8518 41.1301 31.7179 41.1301 20.4999C41.1301 9.28184 31.9238 0.147949 20.6167 0.147949ZM20.6167 38.4716C17.414 38.4716 14.395 37.6402 11.7777 36.1824C18.2635 33.3466 23.521 27.8799 23.5784 20.4999C23.5784 13.2452 18.2061 7.63045 11.8007 4.81739C14.4064 3.371 17.414 2.53962 20.6167 2.53962C23.8194 2.53962 21.3858 2.551 21.7646 2.58517C26.3793 7.20906 29.2261 13.5071 29.2147 20.5113C29.2606 27.3902 26.3908 33.7566 21.7417 38.4488C21.3629 38.4716 20.984 38.4829 20.6052 38.4829L20.6167 38.4716ZM4.2588 12.7782C4.35063 12.8124 4.43099 12.8466 4.52282 12.8921C7.77145 14.3385 12.0647 16.7757 12.2024 20.4999C12.0762 24.2354 7.77145 26.6613 4.52282 28.1077C4.43099 28.1418 4.35063 28.176 4.2588 28.2216C3.13383 25.8868 2.50248 23.2674 2.50248 20.4999C2.50248 17.7324 3.13383 15.1129 4.2588 12.7782ZM5.36081 30.1805C6.42838 29.8274 7.48447 29.4174 8.49464 28.9277C10.6183 27.8799 12.696 26.3538 13.9588 24.2924C15.8299 21.3085 15.21 17.6982 12.8108 15.1927C10.8708 13.1541 8.24209 11.7191 5.37229 10.7966C6.56613 8.95156 8.09286 7.33434 9.87215 6.03601C16.7597 9.48684 22.5567 16.1379 20.1461 24.0988C18.539 29.0871 14.5442 32.6404 9.84919 34.941C8.08139 33.6427 6.55465 32.0255 5.36081 30.1805ZM25.4954 37.7996C28.5144 34.4285 30.6725 30.2943 31.5449 25.8071C33.3242 17.4135 30.7299 9.12239 25.4954 3.20017C33.1176 5.3185 38.7195 12.2771 38.7195 20.4999C38.7195 28.7227 33.1176 35.6813 25.4954 37.7996Z"
@@ -93,9 +93,14 @@
93
93
 
94
94
  <script setup lang="ts">
95
95
  import { siteColors } from "../../utils/index";
96
+ import { computed } from "vue";
97
+
98
+ const currentDomain = computed(() => {
99
+ return props.domain ?? siteColors['domain'] ?? "domain-dental";
100
+ });
96
101
 
97
102
  // You can pass props if you need to customize it
98
- defineProps({
103
+ const props = defineProps({
99
104
  width: {
100
105
  type: String,
101
106
  default: "120",
@@ -103,6 +108,10 @@ defineProps({
103
108
  height: {
104
109
  type: String,
105
110
  default: "30",
106
- }
111
+ },
112
+ domain: {
113
+ type: String,
114
+ default: "domain-dental",
115
+ },
107
116
  });
108
117
  </script>
package/src/components/Icons/MiniLogo.vue ADDED
@@ -0,0 +1,36 @@
1
+ <template>
2
+ <svg v-if="currentDomain === 'domain-cocoon'" :width="width" :height="height" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path
4
+ d="M20.6167 0.147949C9.29819 0.147949 0.103317 9.28184 0.103317 20.4999C0.103317 31.7179 9.30966 40.8518 20.6167 40.8518C31.9238 40.8518 41.1301 31.7179 41.1301 20.4999C41.1301 9.28184 31.9238 0.147949 20.6167 0.147949ZM20.6167 38.4716C17.414 38.4716 14.395 37.6402 11.7777 36.1824C18.2635 33.3466 23.521 27.8799 23.5784 20.4999C23.5784 13.2452 18.2061 7.63045 11.8007 4.81739C14.4064 3.371 17.414 2.53962 20.6167 2.53962C23.8194 2.53962 21.3858 2.551 21.7646 2.58517C26.3793 7.20906 29.2261 13.5071 29.2147 20.5113C29.2606 27.3902 26.3908 33.7566 21.7417 38.4488C21.3629 38.4716 20.984 38.4829 20.6052 38.4829L20.6167 38.4716ZM4.2588 12.7782C4.35063 12.8124 4.43099 12.8466 4.52282 12.8921C7.77145 14.3385 12.0647 16.7757 12.2024 20.4999C12.0762 24.2354 7.77145 26.6613 4.52282 28.1077C4.43099 28.1418 4.35063 28.176 4.2588 28.2216C3.13383 25.8868 2.50248 23.2674 2.50248 20.4999C2.50248 17.7324 3.13383 15.1129 4.2588 12.7782ZM5.36081 30.1805C6.42838 29.8274 7.48447 29.4174 8.49464 28.9277C10.6183 27.8799 12.696 26.3538 13.9588 24.2924C15.8299 21.3085 15.21 17.6982 12.8108 15.1927C10.8708 13.1541 8.24209 11.7191 5.37229 10.7966C6.56613 8.95156 8.09286 7.33434 9.87215 6.03601C16.7597 9.48684 22.5567 16.1379 20.1461 24.0988C18.539 29.0871 14.5442 32.6404 9.84919 34.941C8.08139 33.6427 6.55465 32.0255 5.36081 30.1805ZM25.4954 37.7996C28.5144 34.4285 30.6725 30.2943 31.5449 25.8071C33.3242 17.4135 30.7299 9.12239 25.4954 3.20017C33.1176 5.3185 38.7195 12.2771 38.7195 20.4999C38.7195 28.7227 33.1176 35.6813 25.4954 37.7996Z"
5
+ fill="var(--Night-Nude-0)" />
6
+ </svg>
7
+ <svg v-else xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 42 41" fill="none">
8
+ <path
9
+ d="M16 0C24.8224 7.7939e-07 32 7.17765 32 16C32 24.8224 24.8224 32 16 32C7.17764 32 1.75165e-07 24.8224 0 16C0 7.17765 7.17764 0 16 0ZM16 2.37109C8.48501 2.37109 2.37207 8.48404 2.37207 15.999C2.37228 23.5138 8.48514 29.626 16 29.626C23.5149 29.626 29.6277 23.5138 29.6279 15.999C29.6279 8.48404 23.515 2.37109 16 2.37109ZM24.3643 19.6865C22.6262 22.6385 19.4215 24.4735 16.001 24.4736C12.5803 24.4736 9.37617 22.6386 7.63672 19.6865L9.68066 18.4824C10.9947 20.7138 13.4175 22.0996 16.001 22.0996C18.5842 22.0995 21.0063 20.7136 22.3203 18.4824L24.3643 19.6865ZM15.9463 10.0098C16.4462 10.0098 16.8444 10.1506 17.1709 10.4297C17.4973 10.7101 17.7376 11.1364 17.8906 11.708L18.9521 15.8525L20.2168 10.2383H22.4355L20.9971 16.377C20.9049 16.7644 20.7511 17.0824 20.5371 17.333C20.3231 17.5836 20.0702 17.7697 19.7803 17.8916C19.489 18.0135 19.2005 18.0762 18.916 18.0762C18.4676 18.0762 18.0719 17.9347 17.7305 17.6543C17.3891 17.3739 17.1465 16.9524 17.0029 16.3916L15.96 12.1904L14.9062 16.3916C14.764 16.9525 14.5238 17.3739 14.1865 17.6543C13.8506 17.9347 13.4524 18.0762 12.9932 18.0762C12.7074 18.0762 12.4215 18.0135 12.1357 17.8916C11.8499 17.7697 11.6008 17.5836 11.3867 17.333C11.1727 17.0824 11.0189 16.7644 10.9268 16.377L9.56445 10.2383H11.7539L12.9717 15.8467L14.0332 11.6768C14.1768 11.1161 14.4062 10.6978 14.7217 10.4229C15.0387 10.1465 15.4464 10.0098 15.9463 10.0098Z"
10
+ fill="var(--Dental-Blue-0)"/>
11
+ </svg>
12
+ </template>
13
+
14
+ <script setup lang="ts">
15
+ import { siteColors } from "../../utils/index";
16
+ import { computed } from "vue";
17
+
18
+ const currentDomain = computed(() => {
19
+ return props.domain ?? siteColors['domain'] ?? "domain-dental";
20
+ });
21
+
22
+ const props = defineProps({
23
+ width: {
24
+ type: String,
25
+ default: "68",
26
+ },
27
+ height: {
28
+ type: String,
29
+ default: "69",
30
+ },
31
+ domain: {
32
+ type: String,
33
+ default: "domain-dental",
34
+ },
35
+ });
36
+ </script>
package/src/components/index.ts CHANGED
@@ -24,3 +24,5 @@ export { default as Loader } from './Loader/Loader.vue';
24
24
  export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
25
25
  export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
26
26
  export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
27
+ export { default as Logo } from './Icons/Logo.vue';
28
+ export { default as MiniLogo } from './Icons/MiniLogo.vue';