@3squared/forge-ui-3 0.7.2 → 0.9.0

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/dist/src/components/table/ForgeFilterHeader.vue.d.ts

@@ -1,15 +1,44 @@
 export interface ForgeFilterHeaderProps {
     dataType: 'numeric' | 'date' | 'multiselect' | 'select' | undefined;
     dropdownOptions?: any[];
+    showClearButton?: boolean;
+    clearFilter?: Function;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<ForgeFilterHeaderProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ForgeFilterHeaderProps>>>, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
+declare const _default: import('vue').DefineComponent<{
+    modelValue: {
+        required: true;
+        type: import('vue').PropType<any>;
+    };
+    dataType: {
+        type: import('vue').PropType<"numeric" | "date" | "select" | "multiselect" | undefined>;
+        required: true;
+    };
+    dropdownOptions: {
+        type: import('vue').PropType<any[]>;
+    };
+    showClearButton: {
+        type: import('vue').PropType<boolean>;
+    };
+    clearFilter: {
+        type: import('vue').PropType<Function>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        required: true;
+        type: import('vue').PropType<any>;
+    };
+    dataType: {
+        type: import('vue').PropType<"numeric" | "date" | "select" | "multiselect" | undefined>;
         required: true;
     };
-};
+    dropdownOptions: {
+        type: import('vue').PropType<any[]>;
+    };
+    showClearButton: {
+        type: import('vue').PropType<boolean>;
+    };
+    clearFilter: {
+        type: import('vue').PropType<Function>;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/src/components/table/ForgeTable.vue.d.ts

@@ -38,8 +38,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     "onUpdate:filters"?: ((...args: any[]) => any) | undefined;
     "onUpdate:tableContext"?: ((...args: any[]) => any) | undefined;
 }, {
-    legacyPaginationFooter: boolean;
     showClearButton: boolean;
+    legacyPaginationFooter: boolean;
     showExporterButton: boolean;
     stickyHeader: boolean;
     paginator: boolean;

package/dist/src/passthroughs/Dropdown.pt.d.ts

@@ -44,6 +44,7 @@ declare const _default: {
         clearicon: string;
         loadingIcon: string;
         itemGroupLabel: string;
+        input: string;
     };
 };
 export default _default;

package/dist/src/passthroughs/Multiselect.pt.d.ts

@@ -11,13 +11,19 @@ declare const _default: {
         list: string;
         item: string;
         header: string;
+        labelContainer: string;
+        label: string;
         filterContainer: string;
         filterIcon: string;
         filterInput: string;
         closeButton: string;
         hiddenInput: string;
         emptymessage: string;
-        trigger: string;
+        trigger: ({ state }: MultiSelectPassThroughMethodOptions) => {
+            class: (string | {
+                'rotate-180': boolean;
+            })[];
+        };
     };
 };
 export default _default;

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.2",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "contributors": [
@@ -48,17 +48,17 @@
     "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",
+    "vite": "5.3.5",
     "vite-bundle-visualizer": "1.2.1",
     "vite-plugin-istanbul": "6.0.2",
     "vitest": "1.6.0",
     "vite-plugin-dts": "3.9.1"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.18.1"
+    "@rollup/rollup-linux-x64-gnu": "4.19.1"
   },
   "nyc": {
     "all": true,

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;
 }

package/src/styles/utilities/_utilities.scss

@@ -20,4 +20,12 @@
 
 .w-fit-content {
   width: fit-content;
+}
+
+.filter-placeholder {
+  color: $input-placeholder-color
+}
+
+.rotate-180 {
+  transform: rotate(180deg)
 }