@3squared/forge-ui-3 0.4.2 → 0.5.1

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

@@ -8,31 +8,407 @@ declare function __VLS_template(): {
     before?(_: {}): any;
     after?(_: {}): any;
 };
-declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ForgeDatePickerProps>, {
-    severity: string;
-    selectionMode: string;
-    dateFormat: string;
-    showOtherMonths: boolean;
-    showIcon: boolean;
-    numberOfMonths: number;
-    showButtonBar: boolean;
-    view: string;
-    autoZIndex: boolean;
-    baseZIndex: number;
-    appendTo: string;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ForgeDatePickerProps>, {
-    severity: string;
-    selectionMode: string;
-    dateFormat: string;
-    showOtherMonths: boolean;
-    showIcon: boolean;
-    numberOfMonths: number;
-    showButtonBar: boolean;
-    view: string;
-    autoZIndex: boolean;
-    baseZIndex: number;
-    appendTo: string;
-}>>>, {
+declare const __VLS_component: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<Date | Date[] | (Date | null)[] | null | undefined>;
+    icon: {
+        type: import('vue').PropType<string>;
+    };
+    severity: {
+        type: import('vue').PropType<"secondary" | "info" | "success" | "warning" | "danger" | "primary" | "brand">;
+        default: string;
+    };
+    pt: {
+        type: import('vue').PropType<object | import('primevue/calendar').CalendarPassThroughOptions>;
+    };
+    ptOptions: {
+        type: import('vue').PropType<import('primevue/passthrough').PassThroughOptions>;
+    };
+    unstyled: {
+        type: import('vue').PropType<boolean>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    id: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    inline: {
+        type: import('vue').PropType<boolean>;
+    };
+    view: {
+        type: import('vue').PropType<"date" | "month" | "year">;
+        default: string;
+    };
+    invalid: {
+        type: import('vue').PropType<boolean>;
+    };
+    variant: {
+        type: import('vue').PropType<"outlined" | "filled">;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+    inputId: {
+        type: import('vue').PropType<string>;
+    };
+    inputClass: {
+        type: import('vue').PropType<string | object>;
+    };
+    inputStyle: {
+        type: import('vue').PropType<object>;
+    };
+    ariaLabelledby: {
+        type: import('vue').PropType<string>;
+    };
+    ariaLabel: {
+        type: import('vue').PropType<string>;
+    };
+    inputProps: {
+        type: import('vue').PropType<import('vue').InputHTMLAttributes>;
+    };
+    selectionMode: {
+        type: import('vue').PropType<"single" | "multiple" | "range">;
+        default: string;
+    };
+    dateFormat: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    showOtherMonths: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    selectOtherMonths: {
+        type: import('vue').PropType<boolean>;
+    };
+    showIcon: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    iconDisplay: {
+        type: import('vue').PropType<"button" | "input">;
+    };
+    previousIcon: {
+        type: import('vue').PropType<string>;
+    };
+    nextIcon: {
+        type: import('vue').PropType<string>;
+    };
+    incrementIcon: {
+        type: import('vue').PropType<string>;
+    };
+    decrementIcon: {
+        type: import('vue').PropType<string>;
+    };
+    numberOfMonths: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    responsiveOptions: {
+        type: import('vue').PropType<import('primevue/calendar').CalendarResponsiveOptions[]>;
+    };
+    breakpoint: {
+        type: import('vue').PropType<string>;
+    };
+    touchUI: {
+        type: import('vue').PropType<boolean>;
+    };
+    monthNavigator: {
+        type: import('vue').PropType<boolean>;
+    };
+    yearNavigator: {
+        type: import('vue').PropType<boolean>;
+    };
+    yearRange: {
+        type: import('vue').PropType<string>;
+    };
+    minDate: {
+        type: import('vue').PropType<Date>;
+    };
+    maxDate: {
+        type: import('vue').PropType<Date>;
+    };
+    disabledDates: {
+        type: import('vue').PropType<Date[]>;
+    };
+    disabledDays: {
+        type: import('vue').PropType<number[]>;
+    };
+    maxDateCount: {
+        type: import('vue').PropType<number>;
+    };
+    showOnFocus: {
+        type: import('vue').PropType<boolean>;
+    };
+    autoZIndex: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    baseZIndex: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    showButtonBar: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    shortYearCutoff: {
+        type: import('vue').PropType<string>;
+    };
+    showTime: {
+        type: import('vue').PropType<boolean>;
+    };
+    timeOnly: {
+        type: import('vue').PropType<boolean>;
+    };
+    hourFormat: {
+        type: import('vue').PropType<"12" | "24">;
+    };
+    stepHour: {
+        type: import('vue').PropType<number>;
+    };
+    stepMinute: {
+        type: import('vue').PropType<number>;
+    };
+    stepSecond: {
+        type: import('vue').PropType<number>;
+    };
+    showSeconds: {
+        type: import('vue').PropType<boolean>;
+    };
+    hideOnDateTimeSelect: {
+        type: import('vue').PropType<boolean>;
+    };
+    hideOnRangeSelection: {
+        type: import('vue').PropType<boolean>;
+    };
+    timeSeparator: {
+        type: import('vue').PropType<string>;
+    };
+    showWeek: {
+        type: import('vue').PropType<boolean>;
+    };
+    manualInput: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    appendTo: {
+        type: import('vue').PropType<import('primevue/ts-helpers').HintedString<"body" | "self"> | HTMLElement>;
+        default: string;
+    };
+    panelStyle: {
+        type: import('vue').PropType<object>;
+    };
+    panelClass: {
+        type: import('vue').PropType<string | object>;
+    };
+    panelProps: {
+        type: import('vue').PropType<import('vue').HTMLAttributes>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<Date | Date[] | (Date | null)[] | null | undefined>;
+    icon: {
+        type: import('vue').PropType<string>;
+    };
+    severity: {
+        type: import('vue').PropType<"secondary" | "info" | "success" | "warning" | "danger" | "primary" | "brand">;
+        default: string;
+    };
+    pt: {
+        type: import('vue').PropType<object | import('primevue/calendar').CalendarPassThroughOptions>;
+    };
+    ptOptions: {
+        type: import('vue').PropType<import('primevue/passthrough').PassThroughOptions>;
+    };
+    unstyled: {
+        type: import('vue').PropType<boolean>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    id: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    inline: {
+        type: import('vue').PropType<boolean>;
+    };
+    view: {
+        type: import('vue').PropType<"date" | "month" | "year">;
+        default: string;
+    };
+    invalid: {
+        type: import('vue').PropType<boolean>;
+    };
+    variant: {
+        type: import('vue').PropType<"outlined" | "filled">;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+    inputId: {
+        type: import('vue').PropType<string>;
+    };
+    inputClass: {
+        type: import('vue').PropType<string | object>;
+    };
+    inputStyle: {
+        type: import('vue').PropType<object>;
+    };
+    ariaLabelledby: {
+        type: import('vue').PropType<string>;
+    };
+    ariaLabel: {
+        type: import('vue').PropType<string>;
+    };
+    inputProps: {
+        type: import('vue').PropType<import('vue').InputHTMLAttributes>;
+    };
+    selectionMode: {
+        type: import('vue').PropType<"single" | "multiple" | "range">;
+        default: string;
+    };
+    dateFormat: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    showOtherMonths: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    selectOtherMonths: {
+        type: import('vue').PropType<boolean>;
+    };
+    showIcon: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    iconDisplay: {
+        type: import('vue').PropType<"button" | "input">;
+    };
+    previousIcon: {
+        type: import('vue').PropType<string>;
+    };
+    nextIcon: {
+        type: import('vue').PropType<string>;
+    };
+    incrementIcon: {
+        type: import('vue').PropType<string>;
+    };
+    decrementIcon: {
+        type: import('vue').PropType<string>;
+    };
+    numberOfMonths: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    responsiveOptions: {
+        type: import('vue').PropType<import('primevue/calendar').CalendarResponsiveOptions[]>;
+    };
+    breakpoint: {
+        type: import('vue').PropType<string>;
+    };
+    touchUI: {
+        type: import('vue').PropType<boolean>;
+    };
+    monthNavigator: {
+        type: import('vue').PropType<boolean>;
+    };
+    yearNavigator: {
+        type: import('vue').PropType<boolean>;
+    };
+    yearRange: {
+        type: import('vue').PropType<string>;
+    };
+    minDate: {
+        type: import('vue').PropType<Date>;
+    };
+    maxDate: {
+        type: import('vue').PropType<Date>;
+    };
+    disabledDates: {
+        type: import('vue').PropType<Date[]>;
+    };
+    disabledDays: {
+        type: import('vue').PropType<number[]>;
+    };
+    maxDateCount: {
+        type: import('vue').PropType<number>;
+    };
+    showOnFocus: {
+        type: import('vue').PropType<boolean>;
+    };
+    autoZIndex: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    baseZIndex: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    showButtonBar: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    shortYearCutoff: {
+        type: import('vue').PropType<string>;
+    };
+    showTime: {
+        type: import('vue').PropType<boolean>;
+    };
+    timeOnly: {
+        type: import('vue').PropType<boolean>;
+    };
+    hourFormat: {
+        type: import('vue').PropType<"12" | "24">;
+    };
+    stepHour: {
+        type: import('vue').PropType<number>;
+    };
+    stepMinute: {
+        type: import('vue').PropType<number>;
+    };
+    stepSecond: {
+        type: import('vue').PropType<number>;
+    };
+    showSeconds: {
+        type: import('vue').PropType<boolean>;
+    };
+    hideOnDateTimeSelect: {
+        type: import('vue').PropType<boolean>;
+    };
+    hideOnRangeSelection: {
+        type: import('vue').PropType<boolean>;
+    };
+    timeSeparator: {
+        type: import('vue').PropType<string>;
+    };
+    showWeek: {
+        type: import('vue').PropType<boolean>;
+    };
+    manualInput: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    appendTo: {
+        type: import('vue').PropType<import('primevue/ts-helpers').HintedString<"body" | "self"> | HTMLElement>;
+        default: string;
+    };
+    panelStyle: {
+        type: import('vue').PropType<object>;
+    };
+    panelClass: {
+        type: import('vue').PropType<string | object>;
+    };
+    panelProps: {
+        type: import('vue').PropType<import('vue').HTMLAttributes>;
+    };
+}>>, {
     severity: "secondary" | "info" | "success" | "warning" | "danger" | "primary" | "brand";
     view: "date" | "month" | "year";
     selectionMode: "single" | "multiple" | "range";
@@ -43,27 +419,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     autoZIndex: boolean;
     baseZIndex: number;
     showButtonBar: boolean;
+    manualInput: boolean;
     appendTo: import('primevue/ts-helpers').HintedString<"body" | "self"> | HTMLElement;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 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]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,40 +1,6 @@
-import { CalendarPassThroughMethodOptions } from 'primevue/calendar';
+import { CalendarPassThroughOptions } from 'primevue/calendar';
 
 declare const _default: {
-    calendar: {
-        root: string;
-        input: string;
-        panel: ({ props }: CalendarPassThroughMethodOptions) => {
-            class: (string | {
-                'shadow border-0 position-absolute': boolean;
-            })[];
-        };
-        header: string;
-        previousButton: string;
-        nextButton: string;
-        yearTitle: string;
-        monthTitle: string;
-        table: string;
-        tableHeaderRow: string;
-        weekday: string;
-        monthPicker: string;
-        month: string;
-        yearPicker: string;
-        year: string;
-        timePicker: string;
-        separatorContainer: string;
-        separator: string;
-        hourPicker: string;
-        hour: string;
-        minutePicker: string;
-        minute: string;
-        secondPicker: string;
-        second: string;
-        buttonbar: ({ props }: CalendarPassThroughMethodOptions) => {
-            class: (string | {
-                'border-top': boolean;
-            })[];
-        };
-    };
+    calendar: CalendarPassThroughOptions;
 };
 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.4.2",
+  "version": "0.5.1",
   "type": "module",
   "license": "MIT",
   "contributors": [
@@ -42,17 +42,17 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "3.12.39",
+    "@cypress/code-coverage": "3.12.41",
     "@vitejs/plugin-vue": "5.0.5",
     "@vitest/coverage-v8": "1.6.0",
     "@vitest/ui": "1.6.0",
-    "cypress": "13.12.0",
+    "cypress": "13.13.0",
     "cypress-real-events": "1.13.0",
     "sass": "1.77.6",
-    "typescript": "5.5.2",
+    "typescript": "5.5.3",
     "unplugin-vue-components": "0.27.2",
     "rollup-plugin-visualizer": "5.12.0",
-    "vite": "5.3.2",
+    "vite": "5.3.3",
     "vite-bundle-visualizer": "1.2.1",
     "vite-plugin-istanbul": "6.0.2",
     "vitest": "1.6.0",

package/src/styles/components/_button.scss

@@ -1,7 +1,11 @@
 @each $color, $value in $base-colors {
   .btn.btn-text-#{$color}{
     &:hover, &:active:focus {
-      background-color: map-get($subtle-colors, '#{$color}-subtle');
+      @if ($color == 'brand') {
+        background-color: map-get($subtle-colors, '#{$color}-shade-1');
+      } @else {
+        background-color: map-get($subtle-colors, '#{$color}-subtle');
+      }
     }
   }
   

package/src/styles/components/_datepicker.scss

@@ -1,8 +1,55 @@
 .datepicker-panel {
-    min-width: 350px;
-    width: 350px
-  }
+    min-width: 317px !important;
+}
+
+.p-datepicker-multiple-month {
+  max-width: 948px;
+}
 
 .p-datepicker-trigger {
   display: none !important;
+}
+
+.datepicker-close-icon {
+  margin: 1.75rem;
+  
+  &:hover {
+    color: map-get($theme-colors, 'danger') !important;
+  }
+}
+
+.datepicker-table {
+  border-collapse: separate;
+  border-spacing: 10px 12px;
+  margin: 6px;
+}
+
+@each $color, $value in $base-colors {
+  .date-#{$color} {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    
+    &.selected, &.selected:hover {
+      border-radius: 50%;
+      background-color: map-get($theme-colors, $color);
+    }
+    
+    &:hover {
+      @if($color == 'brand') {
+        background-color: map-get($subtle-colors, '#{$color}-shade-1');
+        color: map-get($theme-colors, $color)
+      } @else {
+        background-color: map-get($subtle-colors, '#{$color}-subtle');
+        color: map-get($theme-colors, $color)
+      }
+      
+    }
+  }
+}
+
+.date {
+
+
+
 }

package/src/styles/components/_multiselect.scss

@@ -135,7 +135,7 @@
     .multiselect__tags {
       min-height: 31px;
       display: block;
-      padding: 3px 26px 0 3px;
+      padding: 3px 26px 3px 3px;
       border-radius: 5px;
       border: 1px solid $input-border-color;
       background: #fff;
@@ -242,7 +242,39 @@
 
     .multiselect__tag-icon:focus:after,
     .multiselect__tag-icon:hover:after {
-      color: #ff0000;
+      color: map-get($theme-colors, 'danger') !important;
+    }
+
+    .multiselect__clear-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 20px;
+      top: 1px;
+      bottom: 0;
+      font-weight: 400;
+      font-style: initial;
+      width: 22px;
+      text-align: center;
+      line-height: 21px;
+      transition: all 0.2s ease;
+      border-radius: 0;
+      z-index: 1;
+    }
+
+    .multiselect__clear-icon:after {
+      content: "×";
+      color: $gray-800;
+      font-size: 14px;
+    }
+
+    .multiselect__clear-icon:focus,
+    .multiselect__clear-icon:hover {
+      background: none;
+    }
+
+    .multiselect__clear-icon:focus:after,
+    .multiselect__clear-icon:hover:after {
+      color: map-get($theme-colors, 'danger') !important;
     }
   }
 }

package/src/styles/forge-components.scss

@@ -0,0 +1,18 @@
+@import 'components/_alert';
+@import 'components/_badge';
+@import 'components/_button';
+@import 'components/_chips';
+@import 'components/_datepicker';
+@import 'components/_dialog';
+@import 'components/_dropdown';
+@import 'components/_file-uploader.scss';
+@import 'components/_link.scss';
+@import 'components/_loader';
+@import 'components/_multiselect';
+@import 'components/_multiselect-preview';
+@import 'components/_stat-widget';
+@import 'components/_stepper';
+@import 'components/_table';
+@import 'components/_tooltip';
+@import 'components/_toast';
+@import 'components/_tile';