@3squared/forge-ui-3 0.7.1 → 0.8.0

package/dist/src/components/ForgeDatepicker.vue.d.ts

@@ -145,6 +145,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
     };
     showOnFocus: {
         type: import('vue').PropType<boolean>;
+        default: boolean;
     };
     autoZIndex: {
         type: import('vue').PropType<boolean>;
@@ -348,6 +349,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
     };
     showOnFocus: {
         type: import('vue').PropType<boolean>;
+        default: boolean;
     };
     autoZIndex: {
         type: import('vue').PropType<boolean>;
@@ -422,6 +424,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
     showOtherMonths: boolean;
     showIcon: boolean;
     numberOfMonths: number;
+    showOnFocus: boolean;
     autoZIndex: boolean;
     baseZIndex: number;
     showButtonBar: boolean;

package/dist/src/components/ForgeTile.vue.d.ts

@@ -4,6 +4,7 @@ export interface ForgeTileProps {
     severity: Severity;
     barPosition: BarPosition;
     clickable: boolean;
+    selected?: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -12,12 +13,15 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     severity: string;
     barPosition: string;
     clickable: boolean;
+    selected: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ForgeTileProps>, {
     severity: string;
     barPosition: string;
     clickable: boolean;
+    selected: boolean;
 }>>>, {
     severity: Severity;
+    selected: boolean;
     barPosition: BarPosition;
     clickable: boolean;
 }, {}>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@3squared/forge-ui-3",
   "repository": "https://github.com/3Squared/ForgeUI-3",
   "description": "ForgeUI 3 is Vue 3 UI Library which combines a variety of popular packages to create a consistent UI for your application.",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "license": "MIT",
   "contributors": [
@@ -41,14 +41,14 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "3.12.42",
+    "@cypress/code-coverage": "3.12.44",
     "@vitejs/plugin-vue": "5.0.5",
     "@vitest/coverage-v8": "1.6.0",
     "@vitest/ui": "1.6.0",
     "cypress": "13.13.1",
     "cypress-real-events": "1.13.0",
     "sass": "1.77.8",
-    "typescript": "5.5.3",
+    "typescript": "5.5.4",
     "unplugin-vue-components": "0.27.3",
     "rollup-plugin-visualizer": "5.12.0",
     "vite": "5.3.4",

package/src/styles/components/_tile.scss

@@ -8,55 +8,54 @@
   } @else if $color == secondary {
     @return #E5E5E5;
   } @else if $color == brand {
-    @return map-get($subtle-colors, "brand-shade-2") 
+    @return map-get($subtle-colors, "brand-shade-2")
   } @else {
     @return #B9D5E7;
   }
 }
 
 @each $color, $value in $base-colors {
- .tile-#{$color} {
-   @if $color == brand {
-     background-color: map-get($subtle-colors, $color + "-shade-1") !important;
-     border-color: map-get($base-colors, $color) !important;
-   }
-   @else{
-     background-color: map-get($subtle-colors, $color + "-subtle") !important;
-     border-color: map-get($base-colors, $color) !important;
-   }
-   
-   color: $black !important;
-   text-align: start !important;
-   border: none;
- }
+  .tile-#{$color} {
+    @if $color == brand {
+      background-color: map-get($subtle-colors, $color + "-shade-1") !important;
+    } @else {
+      background-color: map-get($subtle-colors, $color + "-subtle") !important;
+    }
+
+    color: $black !important;
+    text-align: start !important;
+    border: none;
+
+    &.tile-bar-top {
+      @extend .rounded-top;
+      border: none;
+      border-top: 8px solid map-get($base-colors, $color) !important;
+    }
+
+    &.tile-bar-left {
+      @extend .rounded-start;
+      border: none;
+      border-left: 8px solid map-get($base-colors, $color) !important;
+    }
+
+    &.selected {
+      border: 2px solid;
+      border-color: map-get($base-colors, $color) !important;
+    }
+  }
 
   .btn.btn-#{$color}.tile-#{$color} {
+    border-color: map-get($subtle-colors, $color + "-subtle");
     &:hover {
       background-color: getHoverColour($color) !important;
     }
-  
+
     &:active {
       background-color: map-get($subtle-colors, $color + "-subtle") !important;
     }
-  
-    &.tile-bar-left, &.tile-bar-top {
-      border-color: map-get($base-colors, $color) !important
-    }
-  
+
     &:focus {
       background-color: map-get($subtle-colors, $color + "-subtle") !important;
     }
   }
-}
-
-.tile-bar-top {
-  @extend .rounded-top;
-  border: none !important;
-  border-top: 8px solid !important;
-}
-
-.tile-bar-left {
-  @extend .rounded-start;
-  border: none !important;
-  border-left: 8px solid !important;
 }