webcake-ui-kit 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/button/Button.vue

@@ -6,7 +6,8 @@
       `ui-btn--${size}`,
       `ui-btn--round-${roundness}`,
       isIconOnly && 'ui-btn--icon-only',
-      loading && 'ui-btn--loading'
+      loading && 'ui-btn--loading',
+      active && 'ui-btn--active'
     ]"
     :type="htmlType"
     :disabled="disabled || loading"
@@ -64,6 +65,7 @@ export default {
     label: { type: String, default: '' },
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
+    active: { type: Boolean, default: false },
     htmlType: {
       type: String,
       default: 'button',

package/src/components/button/button.css

@@ -156,7 +156,8 @@
 }
 
 .ui-btn--primary:hover,
-.ui-btn--primary:active {
+.ui-btn--primary:active,
+.ui-btn--primary.ui-btn--active {
   background: var(--primary-brand-hover);
 }
 
@@ -167,7 +168,8 @@
 }
 
 .ui-btn--neutral:hover,
-.ui-btn--neutral:active {
+.ui-btn--neutral:active,
+.ui-btn--neutral.ui-btn--active {
   background: var(--button-black-hover);
 }
 
@@ -178,7 +180,8 @@
 }
 
 .ui-btn--secondary:hover,
-.ui-btn--secondary:active {
+.ui-btn--secondary:active,
+.ui-btn--secondary.ui-btn--active {
   background: var(--secondary-hover);
 }
 
@@ -191,7 +194,8 @@
 }
 
 .ui-btn--outline:hover,
-.ui-btn--outline:active {
+.ui-btn--outline:active,
+.ui-btn--outline.ui-btn--active {
   background: var(--outline-hover);
   box-shadow: none;
 }
@@ -203,7 +207,8 @@
 }
 
 .ui-btn--ghost:hover,
-.ui-btn--ghost:active {
+.ui-btn--ghost:active,
+.ui-btn--ghost.ui-btn--active {
   background: var(--ghost-hover);
 }
 
@@ -214,7 +219,8 @@
 }
 
 .ui-btn--destructive:hover,
-.ui-btn--destructive:active {
+.ui-btn--destructive:active,
+.ui-btn--destructive.ui-btn--active {
   background: var(--destructive-hover);
 }
 
@@ -225,7 +231,8 @@
 }
 
 .ui-btn--ghost-destructive:hover,
-.ui-btn--ghost-destructive:active {
+.ui-btn--ghost-destructive:active,
+.ui-btn--ghost-destructive.ui-btn--active {
   background: var(--destructive-subtle);
 }
 
@@ -239,7 +246,8 @@
 }
 
 .ui-btn--link:hover,
-.ui-btn--link:active {
+.ui-btn--link:active,
+.ui-btn--link.ui-btn--active {
   color: var(--primary-brand-hover);
 }
 

package/src/components/sidebar-item/sidebar_item.css

@@ -4,7 +4,7 @@
   gap: var(--spacing-xs);
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
-  border-radius: var(--radius-6);
+  border-radius: var(--radius);
   color: var(--color-brand-neutrals-700);
   background: transparent;
   border: none;

package/src/components/table/style/table-wrapper.css

@@ -72,12 +72,15 @@
 }
 
 .ui-table__wrapper--ping-left ::v-deep .ui-table__cell--fixed-left__last {
-  box-shadow: var(--shadow-fixed-column-left);
   border-inline-end: none !important;
 }
 
-.ui-table__wrapper--ping-right ::v-deep .ui-table__cell--fixed-right__first {
-  box-shadow: var(--shadow-fixed-column-right);
+.ui-table__wrapper--ping-left ::v-deep .ui-table__cell--fixed-left__last::after {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.12);
+}
+
+.ui-table__wrapper--ping-right ::v-deep .ui-table__cell--fixed-right__first::before {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.12);
 }
 
 .ui-table__wrapper ::v-deep .ui-table__cell--fixed-left,

package/src/components/tag/Tag.vue

@@ -1,6 +1,11 @@
 <template>
   <span
-    :class="['ui-tag', `ui-tag--type-${type}`, `ui-tag--${size}`, { 'ui-tag--with-icon': hasIcon }]"
+    :class="[
+      'ui-tag',
+      `ui-tag--type-${type}`,
+      `ui-tag--${size}`,
+      { 'ui-tag--with-icon': hasIcon, 'ui-tag--active': active }
+    ]"
     @click="handleClick"
   >
     <span v-if="hasIcon" class="ui-tag__icon"><slot name="icon" /></span>
@@ -36,7 +41,8 @@ export default {
     },
     counter: { type: Number, default: 0 },
     closable: { type: Boolean, default: false },
-    label: { type: String, default: '' }
+    label: { type: String, default: '' },
+    active: { type: Boolean, default: false }
   },
   emits: ['close', 'click'],
   computed: {

package/src/components/tag/tag.css

@@ -18,7 +18,8 @@
   background: var(--secondary-bg);
   color: var(--primary-fg);
 }
-.ui-tag--type-default:hover {
+.ui-tag--type-default:hover,
+.ui-tag--type-default.ui-tag--active {
   background: #f0f0f0;
 }
 
@@ -27,7 +28,8 @@
   border: 1px solid var(--border-primary);
   color: var(--secondary-fg);
 }
-.ui-tag--type-outline:hover {
+.ui-tag--type-outline:hover,
+.ui-tag--type-outline.ui-tag--active {
   background: rgba(0, 0, 0, 0.05);
   color: var(--primary-fg);
 }

package/src/styles/shadow.css

@@ -10,7 +10,7 @@
   --shadow-2xl: 0px 25px 50px -12px var(--color-black-alpha-10);
   --shadow-sonner: 0px 4px 12px 0px var(--color-black-alpha-10);
   --shadow-fixed-column-left: 6px 0 6px -4px var(--color-black-alpha-10);
-  --shadow-fixed-column-right: -6px 0 6px -4px var(--color-black-alpha-10);
+  --shadow-fixed-column-right: -10px 0 8px -8px rgba(5, 5, 5, 0.06);
 
   --shadow-focus-ring: 0 0 0 3px var(--focus-ring);
   --shadow-focus-ring-error: 0 0 0 3px var(--focus-ring-error);