@acrodata/gui 0.1.0 → 0.2.0

package/field-group/field-group.scss

@@ -7,6 +7,7 @@
   display: inline-flex;
   flex: 1;
   flex-wrap: wrap;
+  align-items: center;
 
   >.mat-mdc-form-field {
     flex: 1;

package/file-uploader/file-uploader.scss

@@ -39,5 +39,10 @@
       text-indent: 9999px;
       cursor: pointer;
     }
+
+    .mat-icon svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 }

package/fill/fill.scss

@@ -1,14 +1,11 @@
-// 预览颜色块
 .gui-color-block,
 .gui-color-block-empty {
   position: relative;
   display: block;
-  width: 18px;
-  height: 18px;
-  border: 1px solid #000;
+  width: 24px;
+  height: 24px;
 }
 
-// 透明颜色棋盘格效果
 .gui-color-block-empty {
   position: absolute;
   background-color: #fff;
@@ -21,10 +18,11 @@
   background-size: 8px 8px;
 }
 
-// 解决垂直居中问题
+// fix icon vertical align
 .gui-fill {
-  .gui-colorpicker-toggle {
-    display: flex;
-    color: #fff;
+  .mat-mdc-icon-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 }

package/gui-form.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { GuiControl, GuiFieldType, GuiFields, GuiTabsMode } from './interface';
@@ -17,6 +17,10 @@ export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
      * The model to be represented by the form.
      */
     model: any;
+    /**
+     * Fired on model value change
+     */
+    modelChange: EventEmitter<any>;
     formFields: GuiControl[];
     formSubscription: Subscription;
     constructor(cdr: ChangeDetectorRef);
@@ -65,5 +69,5 @@ export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
      */
     changeTabsMode(e: MouseEvent, tabs: GuiControl, mode?: GuiTabsMode): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiForm, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GuiForm, "gui-form", never, { "form": { "alias": "form"; "required": false; }; "config": { "alias": "config"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GuiForm, "gui-form", never, { "form": { "alias": "form"; "required": false; }; "config": { "alias": "config"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "modelChange": "modelChange"; }, never, never, false, never>;
 }

package/gui-form.scss

@@ -2,8 +2,8 @@
   --mat-form-field-container-text-size: 12px;
   --mat-expansion-header-text-size: 12px;
   --mat-expansion-container-text-size: 12px;
-  --mat-expansion-header-collapsed-state-height: 40px;
-  --mat-expansion-header-expanded-state-height: 40px;
+  --mat-expansion-header-collapsed-state-height: 32px;
+  --mat-expansion-header-expanded-state-height: 32px;
 
   position: relative;
   font-size: 12px;
@@ -74,6 +74,10 @@
     position: relative;
     padding: 0 8px;
     border-radius: var(--mdc-filled-text-field-container-shape);
+
+    [dir="rtl"] & {
+      padding: 0 8px;
+    }
   }
 
   .mat-mdc-form-field-infix {
@@ -108,3 +112,31 @@
     content: '';
   }
 }
+
+.gui-menu {
+  .mat-mdc-tab-header {
+    --mdc-tab-indicator-active-indicator-shape: 4px;
+
+    padding: 2px;
+    background-color: var(--mdc-filled-text-field-container-color);
+
+    .mdc-tab__ripple::before {
+      border-radius: var(--mdc-tab-indicator-active-indicator-shape);
+    }
+  }
+
+  .mat-mdc-tab-labels {
+    gap: 2px;
+  }
+
+  .mdc-tab-indicator .mdc-tab-indicator__content {
+    height: 100%;
+    border-width: 0;
+    border-radius: var(--mdc-tab-indicator-active-indicator-shape);
+    background-color: var(--mdc-tab-indicator-active-indicator-color);
+  }
+
+  .mdc-tab-indicator--active .mdc-tab-indicator__content {
+    opacity: .24;
+  }
+}

package/input-number/input-number.scss

@@ -1,5 +1,9 @@
 .gui-input-number {
   .mat-mdc-text-field-wrapper {
     padding-right: 0;
+
+    [dir="rtl"] & {
+      padding-left: 0;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A lightweight GUI library for Angular",
   "publishConfig": {
     "access": "public"

package/select/select.scss

@@ -14,5 +14,6 @@
   .mat-pseudo-checkbox {
     width: 16px;
     height: 16px;
+    border-width: 1px;
   }
 }

package/slider/slider.scss

@@ -5,22 +5,19 @@
     --mdc-slider-inactive-track-height: 2px;
     --mdc-slider-active-track-height: 2px;
 
-    flex: 1;
+    flex: 3;
+    min-width: auto;
     height: calc(var(--mdc-slider-handle-width) * 2);
     margin: 0 calc(var(--mdc-slider-handle-width) / 2);
 
     +.mat-mdc-form-field {
-      width: 80px;
-      max-width: 80px;
+      flex: 2;
     }
 
     &.mdc-slider--range {
-      flex: 2;
-
       +.mat-mdc-form-field,
       +.mat-mdc-form-field+.mat-mdc-form-field {
-        width: 60px;
-        max-width: 60px;
+        flex: 1.5;
       }
     }
 
@@ -46,4 +43,10 @@
       appearance: none;
     }
   }
+
+  .mat-mdc-form-field-hint {
+    width: 100%;
+    padding: 0 8px;
+    line-height: var(--mat-form-field-subscript-text-line-height);
+  }
 }

package/switch/switch.scss

@@ -5,4 +5,8 @@
     --mdc-switch-handle-height: 14px;
     --mdc-switch-state-layer-size: 24px;
   }
+
+  .mat-mdc-slide-toggle {
+    line-height: 1;
+  }
 }