@acrodata/gui 0.1.0 → 0.2.1

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.d.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { GuiFileUploaderConfig } from './file-uploader-config';
+import { GuiControl } from '../interface';
 import * as i0 from "@angular/core";
 export type FileUploadType = 'image' | 'video' | 'audio' | '*';
 export interface FileUploadContent {
@@ -12,10 +13,11 @@ export declare class GuiFileUploader implements ControlValueAccessor, OnChanges
     private fileUploaderCfg;
     private cdr;
     fileInput: ElementRef<HTMLInputElement>;
+    config: Partial<GuiControl>;
+    disabled: boolean;
     type: FileUploadType;
     name: string;
     accept: string;
-    disabled: boolean;
     fileChange: EventEmitter<string>;
     url: string;
     file: FileUploadContent;
@@ -33,5 +35,5 @@ export declare class GuiFileUploader implements ControlValueAccessor, OnChanges
     onBlur(): void;
     onClear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiFileUploader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GuiFileUploader, "gui-file-uploader", never, { "type": { "alias": "type"; "required": false; }; "name": { "alias": "name"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "fileChange": "fileChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GuiFileUploader, "gui-file-uploader", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "name": { "alias": "name"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; }, { "fileChange": "fileChange"; }, never, never, false, never>;
 }

package/file-uploader/file-uploader.scss

@@ -36,8 +36,13 @@
       left: 0;
       width: 100%;
       height: 100%;
-      text-indent: 9999px;
+      opacity: 0;
       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: 4px;
+    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: 4px;
+  }
+
+  .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/image-select/image-select.scss

@@ -1,6 +1,6 @@
 %img {
   height: 100%;
-  width: 120px;
+  max-width: 120px;
   object-fit: contain;
   border-radius: 4px;
   background-color: var(--mat-option-hover-state-layer-color);

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/interface.d.ts

@@ -1,4 +1,4 @@
-export type GuiFieldType = 'group' | 'inline' | 'tabs' | 'tab' | 'menu' | 'menuItem' | 'text' | 'number' | 'switch' | 'select' | 'imageSelect' | 'buttonToggle' | 'slider' | 'fill' | 'image' | 'video' | 'audio' | 'file' | 'textarea' | 'hidden';
+export type GuiFieldType = 'group' | 'inline' | 'tabs' | 'tab' | 'menu' | 'menuItem' | 'text' | 'number' | 'switch' | 'slider' | 'fill' | 'select' | 'buttonToggle' | 'imageSelect' | 'textarea' | 'hidden' | 'image' | 'video' | 'audio' | 'file';
 export type GuiFillMode = 'flat' | 'gradient' | 'image';
 export type GuiSliderMode = 'normal' | 'range';
 export type GuiTabsMode = 'nav' | 'list';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "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;
+  }
 }