webcake-ui-kit 1.0.8 → 1.0.10

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/package.json +1 -1
  2. package/src/components/sidebar-item/sidebar_item.css +10 -9
  3. package/src/icons/ClickButton.vue +16 -6
  4. package/src/icons/ImageMarquee.vue +37 -0
  5. package/src/icons/Section.vue +19 -9
  6. package/src/icons/Survey.vue +13 -3
  7. package/src/icons/Tab.vue +13 -3
  8. package/src/icons/index.js +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "webcake-ui-kit",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "UI Kit for Vue 2 && 3 - Pure Options API",
5
5
  "main": "src/index.js",
6
6
  "module": "src/index.js",
package/src/components/sidebar-item/sidebar_item.css CHANGED
@@ -5,7 +5,7 @@
5
5
  width: 100%;
6
6
  padding: var(--spacing-2xs) var(--spacing-xs);
7
7
  border-radius: var(--radius-6);
8
- color: var(--sidebar-foreground);
8
+ color: var(--color-brand-neutrals-700);
9
9
  background: transparent;
10
10
  border: none;
11
11
  cursor: pointer;
@@ -15,14 +15,17 @@
15
15
  font-weight: 400;
16
16
  text-align: left;
17
17
  transition:
18
- background-color 0.15s ease,
18
+ all 0.15s ease,
19
19
  color 0.15s ease;
20
20
  height: 32px;
21
21
  }
22
22
 
23
- .ui-sidebar-item:hover {
24
- background-color: var(--sidebar-accent);
25
- color: var(--sidebar-accent-foreground);
23
+ .ui-sidebar-item.ui-sidebar-item--collapsed:hover {
24
+ background-color: var(--color-brand-neutrals-100);
25
+ }
26
+
27
+ .ui-sidebar-item:not(.ui-sidebar-item--collapsed):hover {
28
+ box-shadow: 0 0 0 3px var(--color-brand-neutrals-300);
26
29
  }
27
30
 
28
31
  .ui-sidebar-item:focus-visible {
@@ -36,9 +39,7 @@
36
39
 
37
40
  /* Active (selected page) */
38
41
  .ui-sidebar-item--active {
39
- background-color: var(--sidebar-accent);
40
- color: var(--sidebar-primary);
41
- font-weight: 500;
42
+ background-color: var(--color-brand-neutrals-200);
42
43
  }
43
44
 
44
45
  /* Disabled */
@@ -68,7 +69,7 @@
68
69
  display: flex;
69
70
  align-items: center;
70
71
  justify-content: center;
71
- color: var(--sidebar-muted);
72
+ color: var(--sidebar-foreground);
72
73
  }
73
74
 
74
75
  .ui-sidebar-item--active .ui-sidebar-item__icon,
package/src/icons/ClickButton.vue CHANGED
@@ -1,27 +1,37 @@
1
1
  <template>
2
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
+ <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
3
3
  <path
4
4
  fill-rule="evenodd"
5
5
  clip-rule="evenodd"
6
6
  d="M17.5327 7.00635C20.2896 7.00655 22.5315 9.25571 22.5315 12.0198C22.5315 14.3142 20.9759 16.2454 18.8657 16.8311C19.0103 17.0518 19.0545 17.3302 18.9683 17.5942C18.8479 17.9625 18.5076 18.2086 18.1208 18.2087H18.1128L14.8748 18.1882L16.5593 21.0996C16.7657 21.4551 16.6444 21.9129 16.2876 22.1184L16.2869 22.1177C16.1694 22.1861 16.0411 22.2187 15.9148 22.2188C15.6573 22.2188 15.4064 22.0849 15.2681 21.8459L13.5483 18.8745L12.0483 21.6475C11.8896 21.9405 11.5883 22.114 11.2654 22.114C11.2097 22.114 11.1516 22.1102 11.0925 22.0986C10.7082 22.0231 10.4208 21.7112 10.377 21.3215L9.89795 17.0193H6.46729C5.11093 17.0192 3.85463 16.4927 2.93115 15.5391C1.99336 14.6316 1.46853 13.3758 1.46851 12.0198C1.46851 9.25558 3.71115 7.00635 6.46802 7.00635H17.5327ZM11.6477 19.2517L12.783 17.1555L12.7837 17.1541C12.9197 16.9154 13.0694 16.7936 13.218 16.7358C13.3626 16.6798 13.4981 16.6891 13.5791 16.689C13.9504 16.6885 14.6926 16.6932 15.3413 16.6978C15.6657 16.7 15.9671 16.7019 16.1873 16.7036C16.2098 16.7038 16.2317 16.7034 16.2524 16.7036L10.9358 12.854L11.6477 19.2517ZM6.46802 8.49829C4.53457 8.49829 2.96045 10.0785 2.96045 12.0198C2.96047 12.9119 3.28129 13.7351 3.86572 14.3613L3.98584 14.4844L3.98804 14.4866C4.64276 15.1622 5.5177 15.5266 6.46802 15.5266H9.73169L9.30322 11.6733C9.26454 11.3231 9.43586 10.9812 9.73975 10.8032L9.85693 10.7461C10.0974 10.6499 10.3697 10.662 10.6003 10.7805L10.7117 10.8486L17.1702 15.5266H17.5327C19.4663 15.5264 21.0393 13.9529 21.0396 12.0198C21.0396 10.0783 19.4661 8.49837 17.5327 8.49829H6.46802Z"
7
- fill="black"
7
+ :fill="color"
8
8
  />
9
9
  <path
10
10
  d="M15.5237 3.46802C15.7888 3.15081 16.2593 3.11014 16.5747 3.37646C16.8899 3.64162 16.9318 4.11254 16.667 4.42749L15.7258 5.54883C15.5782 5.72516 15.3664 5.81539 15.1538 5.81543C14.9847 5.81543 14.8141 5.75839 14.6741 5.64038C14.3588 5.37517 14.3175 4.90429 14.5825 4.58936L15.5237 3.46802Z"
11
- fill="black"
11
+ :fill="color"
12
12
  />
13
13
  <path
14
14
  d="M7.51831 3.35962C7.8343 3.09306 8.30471 3.13579 8.56934 3.4519L9.50977 4.57251C9.77486 4.88761 9.73445 5.35828 9.41895 5.62354C9.27912 5.74184 9.10883 5.7985 8.93994 5.79858C8.75416 5.79858 8.56881 5.72955 8.42651 5.59424L8.36792 5.53198L7.42676 4.41064C7.16167 4.09549 7.20267 3.62483 7.51831 3.35962Z"
15
- fill="black"
15
+ :fill="color"
16
16
  />
17
17
  <path
18
18
  d="M12.0747 1.78125C12.4867 1.78132 12.821 2.11525 12.821 2.52759V4.02173C12.821 4.43406 12.4867 4.76799 12.0747 4.76807C11.6627 4.76797 11.3291 4.43405 11.3291 4.02173V2.52759C11.3291 2.11526 11.6627 1.78134 12.0747 1.78125Z"
19
- fill="black"
19
+ :fill="color"
20
20
  />
21
21
  </svg>
22
22
  </template>
23
23
  <script>
24
24
  export default {
25
- name: 'ClickButton'
25
+ name: 'ClickButton',
26
+ props: {
27
+ size: {
28
+ type: Number,
29
+ default: 16
30
+ },
31
+ color: {
32
+ type: String,
33
+ default: 'currentColor'
34
+ }
35
+ }
26
36
  }
27
37
  </script>
package/src/icons/ImageMarquee.vue ADDED
@@ -0,0 +1,37 @@
1
+ <template>
2
+ <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
3
+ <path
4
+ fill-rule="evenodd"
5
+ clip-rule="evenodd"
6
+ d="M11.9464 2.25H12.0538C13.1867 2.24998 14.1124 2.24996 14.8433 2.34822C15.6072 2.45093 16.2695 2.67321 16.7982 3.2019C17.3269 3.7306 17.5492 4.39293 17.6519 5.15689C17.7502 5.88775 17.7502 6.81348 17.7501 7.94631V16.0537C17.7502 17.1865 17.7502 18.1123 17.6519 18.8431C17.5492 19.6071 17.3269 20.2694 16.7982 20.7981C16.2695 21.3268 15.6072 21.5491 14.8433 21.6518C14.1124 21.75 13.1867 21.75 12.0538 21.75H11.9465C10.8136 21.75 9.88789 21.75 9.15702 21.6518C8.39307 21.5491 7.73073 21.3268 7.20204 20.7981C6.67335 20.2694 6.45107 19.6071 6.34835 18.8431C6.25009 18.1123 6.25011 17.1865 6.25014 16.0537V7.94631C6.25011 6.81348 6.25009 5.88775 6.34835 5.15689C6.45107 4.39293 6.67335 3.7306 7.20204 3.2019C7.73073 2.67321 8.39307 2.45093 9.15702 2.34822C9.88789 2.24996 10.8136 2.24998 11.9464 2.25ZM9.35689 3.83484C8.75927 3.91519 8.46624 4.05902 8.2627 4.26256C8.05916 4.4661 7.91533 4.75914 7.83498 5.35676C7.75173 5.97595 7.75014 6.80029 7.75014 8V16C7.75014 17.1997 7.75173 18.0241 7.83498 18.6432C7.91533 19.2409 8.05916 19.5339 8.2627 19.7374C8.46624 19.941 8.75927 20.0848 9.35689 20.1652C9.97609 20.2484 10.8004 20.25 12.0001 20.25C13.1999 20.25 14.0242 20.2484 14.6434 20.1652C15.241 20.0848 15.534 19.941 15.7376 19.7374C15.9411 19.5339 16.0849 19.2409 16.1653 18.6432C16.2485 18.0241 16.2501 17.1997 16.2501 16V8C16.2501 6.80029 16.2485 5.97595 16.1653 5.35676C16.0849 4.75914 15.9411 4.4661 15.7376 4.26256C15.534 4.05902 15.241 3.91519 14.6434 3.83484C14.0242 3.75159 13.1999 3.75 12.0001 3.75C10.8004 3.75 9.97609 3.75159 9.35689 3.83484Z"
7
+ :fill="color"
8
+ />
9
+ <path
10
+ fill-rule="evenodd"
11
+ clip-rule="evenodd"
12
+ d="M1.26346 6.85927C1.34119 6.45241 1.73402 6.1856 2.14087 6.26332C2.78728 6.38681 3.34828 6.6236 3.8053 7.09304C4.33038 7.6324 4.55032 8.30606 4.65227 9.08491C4.75018 9.83297 4.75016 10.7816 4.75014 11.9473V12.0527C4.75016 13.2184 4.75018 14.167 4.65227 14.9151C4.55032 15.6939 4.33038 16.3676 3.8053 16.907C3.34828 17.3764 2.78728 17.6132 2.14087 17.7367C1.73402 17.8144 1.34119 17.5476 1.26346 17.1407C1.18573 16.7339 1.45255 16.341 1.8594 16.2633C2.30694 16.1778 2.55104 16.045 2.73051 15.8606C2.93766 15.6478 3.08384 15.3401 3.16495 14.7204C3.24863 14.0811 3.25014 13.2312 3.25014 12C3.25014 10.7688 3.24863 9.91887 3.16495 9.27958C3.08384 8.65985 2.93766 8.35217 2.73051 8.13938C2.55104 7.95503 2.30694 7.82218 1.8594 7.73668C1.45255 7.65895 1.18573 7.26612 1.26346 6.85927Z"
13
+ :fill="color"
14
+ />
15
+ <path
16
+ fill-rule="evenodd"
17
+ clip-rule="evenodd"
18
+ d="M22.7368 6.85927C22.6591 6.45241 22.2663 6.1856 21.8594 6.26332C21.213 6.38681 20.652 6.6236 20.195 7.09304C19.6699 7.6324 19.45 8.30606 19.348 9.08491C19.2501 9.83297 19.2501 10.7816 19.2501 11.9473V12.0527C19.2501 13.2184 19.2501 14.167 19.348 14.9151C19.45 15.6939 19.6699 16.3676 20.195 16.907C20.652 17.3764 21.213 17.6132 21.8594 17.7367C22.2663 17.8144 22.6591 17.5476 22.7368 17.1407C22.8145 16.7339 22.5477 16.341 22.1409 16.2633C21.6933 16.1778 21.4492 16.045 21.2698 15.8606C21.0626 15.6478 20.9164 15.3401 20.8353 14.7204C20.7516 14.0811 20.7501 13.2312 20.7501 12C20.7501 10.7688 20.7516 9.91887 20.8353 9.27958C20.9164 8.65985 21.0626 8.35217 21.2698 8.13938C21.4492 7.95503 21.6933 7.82218 22.1409 7.73668C22.5477 7.65895 22.8145 7.26612 22.7368 6.85927Z"
19
+ :fill="color"
20
+ />
21
+ </svg>
22
+ </template>
23
+ <script>
24
+ export default {
25
+ name: 'ImageMarquee',
26
+ props: {
27
+ size: {
28
+ type: Number,
29
+ default: 16
30
+ },
31
+ color: {
32
+ type: String,
33
+ default: 'currentColor'
34
+ }
35
+ }
36
+ }
37
+ </script>
package/src/icons/Section.vue CHANGED
@@ -1,37 +1,47 @@
1
1
  <template>
2
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
+ <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
3
3
  <path
4
4
  d="M3 6.53571C3 4.58271 4.58271 3 6.53571 3C7.068 3 7.5 3.432 7.5 3.96429C7.5 4.49657 7.068 4.92857 6.53571 4.92857C5.64857 4.92857 4.92857 5.64857 4.92857 6.53571C4.92857 7.068 4.49657 7.5 3.96429 7.5C3.432 7.5 3 7.068 3 6.53571Z"
5
- fill="#171717"
5
+ :fill="color"
6
6
  />
7
7
  <path
8
8
  d="M3 17.4643C3 19.4173 4.58271 21 6.53571 21C7.068 21 7.5 20.568 7.5 20.0357C7.5 19.5034 7.068 19.0714 6.53571 19.0714C5.64857 19.0714 4.92857 18.3514 4.92857 17.4643C4.92857 16.932 4.49657 16.5 3.96429 16.5C3.432 16.5 3 16.932 3 17.4643Z"
9
- fill="#171717"
9
+ :fill="color"
10
10
  />
11
11
  <path
12
12
  d="M17.4643 3C19.4173 3 21 4.58271 21 6.53571C21 7.068 20.568 7.5 20.0357 7.5C19.5034 7.5 19.0714 7.068 19.0714 6.53571C19.0714 5.64857 18.3514 4.92857 17.4643 4.92857C16.932 4.92857 16.5 4.49657 16.5 3.96429C16.5 3.432 16.932 3 17.4643 3Z"
13
- fill="#171717"
13
+ :fill="color"
14
14
  />
15
15
  <path
16
16
  d="M17.4643 21C19.4173 21 21 19.4173 21 17.4643C21 16.932 20.568 16.5 20.0357 16.5C19.5034 16.5 19.0714 16.932 19.0714 17.4643C19.0714 18.3514 18.3514 19.0714 17.4643 19.0714C16.932 19.0714 16.5 19.5034 16.5 20.0357C16.5 20.568 16.932 21 17.4643 21Z"
17
- fill="#171717"
17
+ :fill="color"
18
18
  />
19
19
  <path
20
20
  d="M14.7 3.9C14.7 4.3968 14.1816 4.8 13.5429 4.8H10.4571C9.8184 4.8 9.3 4.3968 9.3 3.9C9.3 3.4032 9.8184 3 10.4571 3H13.5429C14.1816 3 14.7 3.4032 14.7 3.9Z"
21
- fill="#171717"
21
+ :fill="color"
22
22
  />
23
23
  <path
24
24
  d="M13.5429 21C14.1816 21 14.7 20.5968 14.7 20.1C14.7 19.6032 14.1816 19.2 13.5429 19.2H10.4571C9.8184 19.2 9.3 19.6032 9.3 20.1C9.3 20.5968 9.8184 21 10.4571 21H13.5429Z"
25
- fill="#171717"
25
+ :fill="color"
26
26
  />
27
27
  <path
28
28
  d="M19.2904 11.0779C19.2904 10.5187 18.8371 10.0654 18.2779 10.0654H5.67786C5.11867 10.0654 4.66536 10.5187 4.66536 11.0779V12.9645C4.66536 13.5237 5.11867 13.977 5.67786 13.977H18.2779C18.8371 13.977 19.2904 13.5237 19.2904 12.9645V11.0779ZM20.8654 12.9645C20.8654 14.3935 19.7069 15.552 18.2779 15.552H5.67786C4.24883 15.552 3.09036 14.3935 3.09036 12.9645V11.0779C3.09036 9.64884 4.24883 8.49038 5.67786 8.49038H18.2779C19.7069 8.49038 20.8654 9.64884 20.8654 11.0779V12.9645Z"
29
- fill="#171717"
29
+ :fill="color"
30
30
  />
31
31
  </svg>
32
32
  </template>
33
33
  <script>
34
34
  export default {
35
- name: 'Section'
35
+ name: 'Section',
36
+ props: {
37
+ size: {
38
+ type: Number,
39
+ default: 16
40
+ },
41
+ color: {
42
+ type: String,
43
+ default: 'currentColor'
44
+ }
45
+ }
36
46
  }
37
47
  </script>
package/src/icons/Survey.vue CHANGED
@@ -1,13 +1,23 @@
1
1
  <template>
2
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
+ <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
3
3
  <path
4
4
  d="M19 22.75H5C4.27065 22.75 3.57118 22.4603 3.05546 21.9445C2.53973 21.4288 2.25 20.7293 2.25 20V4C2.25 3.27065 2.53973 2.57118 3.05546 2.05546C3.57118 1.53973 4.27065 1.25 5 1.25H19C19.7293 1.25 20.4288 1.53973 20.9445 2.05546C21.4603 2.57118 21.75 3.27065 21.75 4V20C21.75 20.7293 21.4603 21.4288 20.9445 21.9445C20.4288 22.4603 19.7293 22.75 19 22.75ZM5 2.75C4.66848 2.75 4.35054 2.8817 4.11612 3.11612C3.8817 3.35054 3.75 3.66848 3.75 4V20C3.75 20.3315 3.8817 20.6495 4.11612 20.8839C4.35054 21.1183 4.66848 21.25 5 21.25H19C19.3315 21.25 19.6495 21.1183 19.8839 20.8839C20.1183 20.6495 20.25 20.3315 20.25 20V4C20.25 3.66848 20.1183 3.35054 19.8839 3.11612C19.6495 2.8817 19.3315 2.75 19 2.75H5ZM8 8.28L10.5 5.78C10.6039 5.63703 10.6539 5.46196 10.6413 5.28569C10.6287 5.10942 10.5543 4.94326 10.4311 4.81651C10.308 4.68977 10.144 4.61059 9.96816 4.59293C9.79232 4.57527 9.6159 4.62027 9.47 4.72L7.47 6.72L6.47 5.72C6.32396 5.63697 6.15428 5.60537 5.98814 5.63027C5.82201 5.65517 5.66904 5.73512 5.55376 5.85732C5.43848 5.97952 5.36756 6.13688 5.35238 6.30418C5.33719 6.47148 5.37861 6.63904 5.47 6.78L7 8.28C7.13751 8.40299 7.31552 8.47098 7.5 8.47098C7.68448 8.47098 7.86249 8.40299 8 8.28ZM18.75 6.75C18.7474 6.55189 18.6676 6.36263 18.5275 6.22253C18.3874 6.08244 18.1981 6.00259 18 6H13C12.8011 6 12.6103 6.07902 12.4697 6.21967C12.329 6.36032 12.25 6.55109 12.25 6.75C12.25 6.94891 12.329 7.13968 12.4697 7.28033C12.6103 7.42098 12.8011 7.5 13 7.5H18C18.1981 7.49741 18.3874 7.41756 18.5275 7.27747C18.6676 7.13737 18.7474 6.94811 18.75 6.75ZM8 13.78L10.5 11.28C10.6325 11.1378 10.7046 10.9498 10.7012 10.7555C10.6977 10.5612 10.619 10.3758 10.4816 10.2384C10.3442 10.101 10.1588 10.0223 9.96452 10.0188C9.77022 10.0154 9.58217 10.0875 9.44 10.22L7.44 12.22L6.44 11.22C6.29782 11.0875 6.10978 11.0154 5.91548 11.0188C5.72118 11.0223 5.53579 11.101 5.39838 11.2384C5.26097 11.3758 5.18225 11.5612 5.17882 11.7555C5.1754 11.9498 5.24752 12.1378 5.38 12.28L7 13.78C7.14063 13.9205 7.33125 13.9993 7.53 13.9993C7.72875 13.9993 7.91937 13.9205 8.06 13.78H8ZM18.72 12.25C18.7177 12.0569 18.642 11.8719 18.5083 11.7326C18.3746 11.5933 18.1928 11.5101 18 11.5H13C12.8011 11.5 12.6103 11.579 12.4697 11.7197C12.329 11.8603 12.25 12.0511 12.25 12.25C12.25 12.4489 12.329 12.6397 12.4697 12.7803C12.6103 12.921 12.8011 13 13 13H18C18.1981 12.9974 18.3874 12.9176 18.5275 12.7775C18.6676 12.6374 18.7474 12.4481 18.75 12.25H18.72ZM8 19.28L10.5 16.78C10.5737 16.7113 10.6328 16.6285 10.6738 16.5365C10.7148 16.4445 10.7368 16.3452 10.7386 16.2445C10.7404 16.1438 10.7218 16.0438 10.6841 15.9504C10.6464 15.857 10.5903 15.7722 10.519 15.701C10.4478 15.6297 10.363 15.5736 10.2696 15.5359C10.1762 15.4982 10.0762 15.4796 9.97548 15.4814C9.87477 15.4832 9.77546 15.5052 9.68346 15.5462C9.59146 15.5872 9.50866 15.6463 9.44 15.72L7.44 17.72L6.44 16.72C6.29782 16.5875 6.10978 16.5154 5.91548 16.5188C5.72118 16.5223 5.53579 16.601 5.39838 16.7384C5.26097 16.8758 5.18225 17.0612 5.17882 17.2555C5.1754 17.4498 5.24752 17.6378 5.38 17.78L7 19.28C7.14063 19.4205 7.33125 19.4993 7.53 19.4993C7.72875 19.4993 7.91937 19.4205 8.06 19.28H8ZM18.72 17.75C18.7177 17.5569 18.642 17.3719 18.5083 17.2326C18.3746 17.0933 18.1928 17.0101 18 17H13C12.8011 17 12.6103 17.079 12.4697 17.2197C12.329 17.3603 12.25 17.5511 12.25 17.75C12.25 17.9489 12.329 18.1397 12.4697 18.2803C12.6103 18.421 12.8011 18.5 13 18.5H18C18.1981 18.4974 18.3874 18.4176 18.5275 18.2775C18.6676 18.1374 18.7474 17.9481 18.75 17.75H18.72Z"
5
- fill="#171717"
5
+ :fill="color"
6
6
  />
7
7
  </svg>
8
8
  </template>
9
9
  <script>
10
10
  export default {
11
- name: 'Survey'
11
+ name: 'Survey',
12
+ props: {
13
+ size: {
14
+ type: Number,
15
+ default: 16
16
+ },
17
+ color: {
18
+ type: String,
19
+ default: 'currentColor'
20
+ }
21
+ }
12
22
  }
13
23
  </script>
package/src/icons/Tab.vue CHANGED
@@ -1,15 +1,25 @@
1
1
  <template>
2
- <svg xmlns="http://www.w3.org/2000/svg" width="21" height="19" viewBox="0 0 21 19" fill="none">
2
+ <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="-1.5 -1 24 21" fill="none">
3
3
  <path
4
4
  fill-rule="evenodd"
5
5
  clip-rule="evenodd"
6
6
  d="M16.0569 0C17.361 6.55947e-06 18.4182 1.05722 18.4182 2.36133V3.23804C19.5971 3.37017 20.5137 4.3698 20.5137 5.58398V16.541C20.5137 17.8452 19.4564 18.9023 18.1523 18.9023H2.36133C1.05723 18.9023 0 17.8452 0 16.541V2.36133C2.01013e-05 1.05724 1.05723 0 2.36133 0H16.0569ZM2.36133 1.5C1.88566 1.5 1.50002 1.88566 1.5 2.36133V16.541C1.5 17.0167 1.88563 17.4023 2.36133 17.4023H18.1523C18.628 17.4023 19.0137 17.0167 19.0137 16.541V5.58398C19.0137 5.10832 18.628 4.72266 18.1523 4.72266H6.41309V2.36133C6.41307 1.88566 6.02743 1.5 5.55176 1.5H2.36133ZM7.75049 1.5C7.85513 1.76691 7.91308 2.05732 7.91309 2.36133V3.22266H11.6814V2.36133C11.6814 1.88565 11.2958 1.5 10.8201 1.5H7.75049ZM13.0188 1.5C13.1234 1.76691 13.1814 2.05731 13.1814 2.36133V3.22266H16.9182V2.36133C16.9182 1.88565 16.5326 1.50001 16.0569 1.5H13.0188Z"
7
- fill="#171717"
7
+ :fill="color"
8
8
  />
9
9
  </svg>
10
10
  </template>
11
11
  <script>
12
12
  export default {
13
- name: 'Tab'
13
+ name: 'Tab',
14
+ props: {
15
+ size: {
16
+ type: Number,
17
+ default: 16
18
+ },
19
+ color: {
20
+ type: String,
21
+ default: 'currentColor'
22
+ }
23
+ }
14
24
  }
15
25
  </script>
package/src/icons/index.js CHANGED
@@ -2,3 +2,4 @@ export { default as WkiSection } from './Section.vue'
2
2
  export { default as WkiSurvey } from './Survey.vue'
3
3
  export { default as WkiButton } from './ClickButton.vue'
4
4
  export { default as WkiTab } from './Tab.vue'
5
+ export { default as WkiImageMarquee } from './ImageMarquee.vue'