Releases · atinc/ngx-tethys

Layout 侧边栏新增 thy-sidebar-header thy-sidebar-content和thy-sidebar-footer布局组件，并调整样式
Layoutthy-header组件大小和样式调整，'sm' | 'md' | 'lg' | 'xlg' 高度分别为 48px, 52px, 56px, 60px(目前100px)
Layoutthy-sidebar新增thyCollapsible和thyCollapsed展开收起功能以及宽度拖拽的样式调整
Layoutthy-sidebar新增thyTrigger设置展示收起的触发器自定义模板，默认显示展开收起的圆形图标，设置为 null 表示不展示触发元素，手动控制展开收起状态
Layoutthy-sidebar新增thyTheme: 'white' | 'light' | 'dark' 主题，dark 为后续扩展保留
Tablethy-table新增thyLayoutFixed属性设置表格布局固定模式
Tablethy-table新增thyMinWidth属性设置表格最小宽度
Tablethy-table-column新增thyMinWidth属性设置列最小宽度（需要注意只有存在宽度auto列的情况才会有效）
Tablethy-table-column新增thyOperational属性设置操作列
Tablethy-table-column新增thySecondary属性设置次要列，次要列颜色变淡
Tablethy-table-column新增thySortable、thySortDirection和(thySortChange)设置列排序功能
Tablethy-tablethyTheme 新增boxed模式
Tablethy-table大小和样式调整，'xs' | 'sm' | 'md' | 'lg' | 'xlg' 高度分别为: 44px, 48px, 52px, 56px, 60px(目前64px)
Navthy-nav新增pulled模式，替换之前的primary，将来会逐步把 primary | secondary | secondary-divider | thirdly 类型去掉，将来会支持 pulled | tabs | lite | pill | slider | wrapped模式
Navthy-nav组件调整样式和大小，'sm' | 'md' | 'lg' 高度分别为: 48px, 52px, 56px，大小和类型无关
NavthyNavLink改名为thyNavItem，暂时保留了thyNavLink，将来会去除
NavthyNavItem 新增thyNavItemDisabled属性设置禁用导航项
Space 组件间距调整，大小支持 'zero' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xlg' 和自定义数字，分别为: 0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px
Menuthy-menu新增thyTheme属性设置主题, 值为: 'compact' | 'loose' | 'dark', 默认为compact
Menuthy-menu-group新增thyCollapsible和thyCollapsed设置展开收起，默认不支持展开收起，同时支持headerContent设置分组头内容
Menuthy-menu-item新增thyIcon设置图标
Dividerthy-divider组件新增thyColor设置分割线的颜色，默认 #eee，light 为 #ddd，primary 主色，success 成功色，warning 警告色，danger 危险色
Cardthy-card组件大小调整，可选值为：sm、md、lg
Cardthy-card组件新增thyBordered设置卡片边框
Emptythy-empty组件修改默认空图标以及样式，并提供preset-light内置图标，适用有背景色的场景
Spacethy-space组件调整大小，thySize 支持 'zero' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xlg' 和自定义数字大小
修改thy-dropdown-menu菜单和 Popover 弹出框的阴影和边框
Breadcrumb 样式调整，Item 支持图标+文字的场景
Dialog 修改间距，默认去除头部边框，thy-dialog-header新增thyDivided设置边框
Slide 修改阴影和边框
Calendar 修改阴影和边框
Dropdown 默认设置hasBackdrop为false，修改placement默认为bottomLeft
DropdownthyDropdown 支持模板和组件菜单且新增基类ThyDropdownAbstractMenu实现菜单组件
Dropdown 使用thy-divider替换thy-dropdown-menu-divider
Dropdown 添加thyActiveClass实现弹出菜单的 Origin 元素激活样式
Input 修改图标颜色为 $gray-400(#cacaca)，图标大小为 14px
Inputthy-input-group新增prefix和suffix模板代替之前thy-input组件的append和prepend，实现输入框的完全自定义
Inputthy-input-search组件thyTheme属性新增transparent实现透明无边框的效果
Progress 设置一个最小宽度，当百分比很低的时候可以展示进度
Alert 新增thyTheme属性支持'fill' | 'bordered' | 'naked'，以及样式调整
Select 新增thyAutoActiveFirstItem属性设置是否自动 Active 第一个元素
Badge 新增thyContent替换thyContext
Styles 修改 spacer to 0-10(4px、8px、12px、16px、20px、24px、28px、32px、36px、40px)，和 thy-space 组件保持大小一致
Tree 展开收起箭头颜色默认为#999999 移入以后改为#666666
Tree ThyTreeNodeData 新增itemClass参数设置节点的样式类，实现自定义样式
Image 新增thyResolveSize属性支持自动计算预览图片大小
Avatar 名字的间距改为 8px
废弃thy-label组件，使用thy-tag替换

缺陷修复

Notify 修复在模态框下弹出提示被遮盖的问题
Transfer 修复固定列不能拖拽到非固定列的问题
DialogsupperLg改为superLg修复单词拼写错误
Form 修复按 Tab 键不能聚焦到下一个输入框的问题
Progressthy-progress组件修改primary类型为主色
Button 在thy-button-group组件中，only-icon 模式下的大小调整，宽高相同
修复 Dropdown 子菜单上下弹出被遮罩隐藏的问题
修复 Tree 在 safari 等有些版本的浏览器下，出现横向滚动条的问题

Assets 2

24 May 01:12

why520crazy

13.0.0

abf515d

Release 13.0.0

Upgrade Angular to 13.

BREAKING CHANGES

remove ngx-tethys/store, use@tethys/store instead of it
rename uploader to upload
remove primary entry imports, use secondary entry instead of it
remove root module NgxTethysModule，should import specific module，the code snippet in 'Appendix 1' can be used directly
remove Markdown，you can copy the directives and styles of 'Appendix 2' separately to the project for use if necessary
rename raster to grid，It provides some directives for grid system
remove deprecated attribute thySquare of thyButton
only retain ngx-tethys/styles/* import entries

Sass

In previous versions, you can import style files from any subfolder:

@use "ngx-tethys/button/styles/button.scss";
@use "ngx-tethys/button/styles/mixin.scss";

The packaging of angular 13 adopts node by default package entry-points of JS only exports public style files (ngx-tethys/styles/*). The above use will throw error like SassError: Can't find stylesheet to import.

All 'mixins' have passed styles/basic.scss forward re export can be used in the following:

@use "ngx-tethys/styles/basic.scss" as basic;

.example {
    @include basic.button-variant(...);
    color: basic.$gray-400;
}

If you need to import the style of a component separately, it is not supported by default. Of course, you can set ...build.options. stylePreprocessorOptions of angular.json implements the import of all style files, which is a risky behavior, because the internal SCSS file name and path may change.

    "stylePreprocessorOptions": {
        "includePaths": ["node_modules/"]
    }

The official entrances are as follows:

// 包含所有的样式
@use "ngx-tethys/styles/index.scss"; 
@use "ngx-tethys/styles/index"; 
@use "ngx-tethys"; 

// 包含所有的变量和mixins
@use "ngx-tethys/styles/basic.scss";
@use "ngx-tethys/styles/basic";

// 包含所有的变量
@use "ngx-tethys/styles/variables.scss";
@use "ngx-tethys/styles/variables";

废弃

ActionMenu组件标记为废弃，请使用Dropdown组件替换，即将在之后的大版本中彻底移除

Appendix 1 All module definitions

import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
import { ThyAffixModule } from 'ngx-tethys/affix';
import { ThyAlertModule } from 'ngx-tethys/alert';
import { ThyAnchorModule } from 'ngx-tethys/anchor';
import { ThyArrowSwitcherModule } from 'ngx-tethys/arrow-switcher';
import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
import { ThyAvatarModule } from 'ngx-tethys/avatar';
import { ThyBackTopModule } from 'ngx-tethys/back-top';
import { ThyBadgeModule } from 'ngx-tethys/badge';
import { ThyBreadcrumbModule } from 'ngx-tethys/breadcrumb';
import { ThyButtonModule } from 'ngx-tethys/button';
import { ThyCalendarModule } from 'ngx-tethys/calendar';
import { ThyCardModule } from 'ngx-tethys/card';
import { ThyCascaderModule } from 'ngx-tethys/cascader';
import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
import { ThyCollapseModule } from 'ngx-tethys/collapse';
import { ThyCopyModule } from 'ngx-tethys/copy';
import { ThyDatePickerModule } from 'ngx-tethys/date-picker';
import { ThyDateRangeModule } from 'ngx-tethys/date-range';
import { ThyDialogModule } from 'ngx-tethys/dialog';
import { ThyDividerModule } from 'ngx-tethys/divider';
import { ThyDragDropModule } from 'ngx-tethys/drag-drop';
import { ThyDropdownModule } from 'ngx-tethys/dropdown';
import { ThyEmptyModule } from 'ngx-tethys/empty';
import { ThyFlexibleTextModule } from 'ngx-tethys/flexible-text';
import { ThyFormModule } from 'ngx-tethys/form';
import { ThyFullscreenModule } from 'ngx-tethys/fullscreen';
import { ThyGuiderModule } from 'ngx-tethys/guider';
import { ThyIconModule } from 'ngx-tethys/icon';
import { ThyImageModule } from 'ngx-tethys/image';
import { ThyInputModule } from 'ngx-tethys/input';
import { ThyLabelModule } from 'ngx-tethys/label';
import { ThyLayoutModule } from 'ngx-tethys/layout';
import { ThyListModule } from 'ngx-tethys/list';
import { ThyLoadingModule } from 'ngx-tethys/loading';
import { ThyMentionModule } from 'ngx-tethys/mention';
import { ThyMenuModule } from 'ngx-tethys/menu';
import { ThyNavModule } from 'ngx-tethys/nav';
import { ThyNotifyModule } from 'ngx-tethys/notify';
import { ThyPaginationModule } from 'ngx-tethys/pagination';
import { ThyPopoverModule } from 'ngx-tethys/popover';
import { ThyProgressModule } from 'ngx-tethys/progress';
import { ThyPropertyOperationModule } from 'ngx-tethys/property-operation';
import { ThyRadioModule } from 'ngx-tethys/radio';
import { ThyGridModule } from 'ngx-tethys/grid';
import { ThyRateModule } from 'ngx-tethys/rate';
import { ThyResizableModule } from 'ngx-tethys/resizable';
import { ThyResultModule } from 'ngx-tethys/result';
import { ThySelectModule } from 'ngx-tethys/select';
import { ThySelectCommonModule, ThySharedModule } from 'ngx-tethys/shared';
import { ThySkeletonModule } from 'ngx-tethys/skeleton';
import { ThySlideModule } from 'ngx-tethys/slide';
import { ThySliderModule } from 'ngx-tethys/slider';
import { ThyStatisticModule } from 'ngx-tethys/statistic';
import { ThyStepperModule } from 'ngx-tethys/stepper';
import { ThyStrengthModule } from 'ngx-tethys/strength';
import { ThySwitchModule } from 'ngx-tethys/switch';
import { ThyTableModule } from 'ngx-tethys/table';
import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
import { ThyTimelineModule } from 'ngx-tethys/timeline';
import { ThyTooltipModule } from 'ngx-tethys/tooltip';
import { ThyTransferModule } from 'ngx-tethys/transfer';
import { ThyTreeModule } from 'ngx-tethys/tree';
import { ThyTreeSelectModule } from 'ngx-tethys/tree-select';
import { ThyUploadModule } from 'ngx-tethys/upload';
import { warnDeprecation } from 'ngx-tethys/util';
import { ThyVoteModule } from 'ngx-tethys/vote';
import { ThyInputNumberModule } from 'ngx-tethys/input-number';

const TETHYS_MODULES = [
    ThyLayoutModule,
    ThyButtonModule,
    ThyBackTopModule,
    ThyIconModule,
    ThyImageModule,
    ThyPopoverModule,
    ThyBadgeModule,
    ThyTableModule,
    ThyGridModule,
    ThyAvatarModule,
    ThyLabelModule,
    ThyNavModule,
    ThyMenuModule,
    ThyPaginationModule,
    ThyNotifyModule,
    ThyCardModule,
    ThyLoadingModule,
    ThyAlertModule,
    ThyActionMenuModule,
    ThyTreeModule,
    ThyEmptyModule,
    ThySwitchModule,
    ThyTransferModule,
    ThyStrengthModule,
    ThyFormModule,
    ThyInputModule,
    ThyInputNumberModule,
    ThyDropdownModule,
    ThyCopyModule,
    ThyCheckboxModule,
    ThySelectModule,
    ThySlideModule,
    ThyRadioModule,
    ThySelectModule,
    ThyPropertyOperationModule,
    ThyUploadModule,
    ThyDateRangeModule,
    ThySharedModule,
    ThyListModule,
    ThyTreeSelectModule,
    ThyStepperModule,
    ThyCascaderModule,
    ThyDialogModule,
    ThyTooltipModule,
    ThyProgressModule,
    ThyBreadcrumbModule,
    ThyArrowSwitcherModule,
    ThyFlexibleTextModule,
    ThyDragDropModule,
    ThySelectCommonModule,
    ThySkeletonModule,
    ThyVoteModule,
    ThyResultModule,
    ThyMentionModule,
    ThyDatePickerModule,
    ThyTimelineModule,
    ThyDividerModule,
    ThyTimePickerModule,
    ThyStatisticModule,
    ThyAutocompleteModule,
    ThyAnchorModule,
    ThyAffixModule,
    ThySliderModule,
    ThyCalendarModule,
    ThyFullscreenModule,
    ThyGuiderModule,
    ThyResizableModule,
    ThyCollapseModule,
    ThyRateModule
];

Appendix 2 Markdown's styles and directives list

Assets 2

12 Jul 09:03

why520crazy

12.0.0-next.1

ec96de5

12.0.0-next.1

Bug Fixes

import cycles would need to be created to compile this component #INFR-2077 (f3eba0b), closes #INFR-2077

Features

upgrade ng to 12 (eb35223)
cdk: update afterId type to Id from string #INFR-2082 (8679d47), closes #INFR-2082
nav: nav support responsive (#1273) (4af8f26)
store: support afterId for EntityStore add and addWithReferences #INFR-2083 (8bfa5fb), closes #INFR-2083

Assets 2

06 Jul 11:07

why520crazy

11.0.3

3e87f4e

11.0.3

chore: create release 11.0.3

Assets 2

18 Dec 10:08

walkerkay

9.0.10

8b5c909

9.0.10

chore(release): 9.0.10

Assets 2

27 Nov 10:21

why520crazy

9.0.0-beta.2

846dd7f

9.0.0-beta.2

chore: remove basic.component.scss

Assets 2

27 Feb 07:56

why520crazy

7.6.30

35b27b1

7.6.30

chore: create release 7.6.30

Assets 2

12 Feb 08:17

why520crazy

7.6.29

7564b2e

7.6.29

chore(release): upgrade to 7.6.29 (#518)

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

新组件

新特性

缺陷修复

BREAKING CHANGES

Sass

废弃

Bug Fixes

Features

Releases: atinc/ngx-tethys

Release 18.0.0

Release 16.1.5

Release 13.1.0

新组件

新特性

缺陷修复

Release 13.0.0

BREAKING CHANGES

Sass

废弃

12.0.0-next.1

Bug Fixes

Features

11.0.3

9.0.10

9.0.0-beta.2

7.6.30

7.6.29