naive-ui 2.22.0 → 2.24.0

package/es/input-number/src/utils.js

@@ -9,8 +9,9 @@ export function parse(value) {
     return Number(value);
 }
 // can be parsed to number but shouldn't be applied when inputing
+// when value includes `.`, ending with 0 and`.`, doesn't update, if 0 parse func will remove 0
 export function isWipValue(value) {
-    return /^\d+\.$/.test(value) || /^\.\d+$/.test(value);
+    return value.includes('.') && (/^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value));
 }
 // string => boolean (expected, not implemented)
 // number => boolean (legacy)

package/es/layout/src/Layout.d.ts

@@ -292,9 +292,9 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;
@@ -683,9 +683,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;

package/es/layout/src/Layout.js

@@ -68,9 +68,9 @@ export function createLayoutComponent(isContent) {
                 hasSiderStyle, mergedTheme: themeRef, cssVars: computed(() => {
                     const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                     return {
-                        '--bezier': cubicBezierEaseInOut,
-                        '--color': props.embedded ? self.colorEmbedded : self.color,
-                        '--text-color': self.textColor
+                        '--n-bezier': cubicBezierEaseInOut,
+                        '--n-color': props.embedded ? self.colorEmbedded : self.color,
+                        '--n-text-color': self.textColor
                     };
                 }) }, exposedMethods);
         },

package/es/layout/src/LayoutContent.d.ts

@@ -265,9 +265,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;

package/es/layout/src/LayoutFooter.js

@@ -15,17 +15,17 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.footerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.footerBorderColorInverted;
+                    vars['--n-color'] = self.footerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.footerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.footerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.footerBorderColor;
+                    vars['--n-color'] = self.footerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.footerBorderColor;
                 }
                 return vars;
             })

package/es/layout/src/LayoutHeader.js

@@ -22,17 +22,17 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.headerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.headerBorderColorInverted;
+                    vars['--n-color'] = self.headerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.headerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.headerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.headerBorderColor;
+                    vars['--n-color'] = self.headerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.headerBorderColor;
                 }
                 return vars;
             })

package/es/layout/src/LayoutSider.js

@@ -156,25 +156,25 @@ export default defineComponent({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { siderToggleButtonColor, siderToggleButtonBorder, siderToggleBarColor, siderToggleBarColorHover } = self;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--toggle-button-color': siderToggleButtonColor,
-                    '--toggle-button-border': siderToggleButtonBorder,
-                    '--toggle-bar-color': siderToggleBarColor,
-                    '--toggle-bar-color-hover': siderToggleBarColorHover
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-toggle-button-color': siderToggleButtonColor,
+                    '--n-toggle-button-border': siderToggleButtonBorder,
+                    '--n-toggle-bar-color': siderToggleBarColor,
+                    '--n-toggle-bar-color-hover': siderToggleBarColorHover
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.siderColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.siderBorderColorInverted;
-                    vars['--toggle-button-icon-color'] =
+                    vars['--n-color'] = self.siderColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.siderBorderColorInverted;
+                    vars['--n-toggle-button-icon-color'] =
                         self.siderToggleButtonIconColorInverted;
                     vars.__invertScrollbar = self.__invertScrollbar;
                 }
                 else {
-                    vars['--color'] = self.siderColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.siderBorderColor;
-                    vars['--toggle-button-icon-color'] = self.siderToggleButtonIconColor;
+                    vars['--n-color'] = self.siderColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.siderBorderColor;
+                    vars['--n-toggle-button-icon-color'] = self.siderToggleButtonIconColor;
                 }
                 return vars;
             }) }, exposedMethods);

package/es/layout/src/styles/layout-footer.cssr.js

@@ -1,17 +1,17 @@
 import { cB, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --color
-// --border-color
-// --text-color
+// --n-bezier
+// --n-color
+// --n-border-color
+// --n-text-color
 
 export default cB('layout-footer', `
  transition:
- box-shadow .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
- color: var(--text-color);
- background-color: var(--color);
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  box-sizing: border-box;
 `, [cM('absolute-positioned', `
  position: absolute;
@@ -19,5 +19,5 @@ export default cB('layout-footer', `
  right: 0;
  bottom: 0;
  `), cM('bordered', `
- border-top: solid 1px var(--border-color);
+ border-top: solid 1px var(--n-border-color);
  `)]);

package/es/layout/src/styles/layout-header.cssr.js

@@ -1,24 +1,24 @@
 import { cB, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --text-color
-// --color
-// --border-color
+// --n-bezier
+// --n-text-color
+// --n-color
+// --n-border-color
 
 export default cB('layout-header', `
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  box-sizing: border-box;
  width: 100%;
- background-color: var(--color);
- color: var(--text-color);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
 `, [cM('absolute-positioned', `
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  `), cM('bordered', `
- border-bottom: solid 1px var(--border-color);
+ border-bottom: solid 1px var(--n-border-color);
  `)]);

package/es/layout/src/styles/layout-sider.cssr.js

@@ -1,33 +1,33 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --color
-// --text-color
-// --border-color
-// --toggle-button-color
-// --toggle-bar-color
-// --toggle-bar-color-hover
+// --n-bezier
+// --n-color
+// --n-text-color
+// --n-border-color
+// --n-toggle-button-color
+// --n-toggle-bar-color
+// --n-toggle-bar-color-hover
 
 export default cB('layout-sider', `
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
- color: var(--text-color);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- min-width .3s var(--bezier),
- max-width .3s var(--bezier),
- transform .3s var(--bezier),
- background-color .3s var(--bezier);
- background-color: var(--color);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ min-width .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ transform .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
  display: flex;
  justify-content: flex-end;
 `, [cM('right-placement', `
  justify-content: flex-start;
  `, [cM('bordered', `
  border-right: none;
- border-left: 1px solid var(--border-color);
+ border-left: 1px solid var(--n-border-color);
  `), cM('collapsed', [cB('layout-toggle-button', [cB('base-icon', `
  transform: rotate(180deg);
  `)]), cB('layout-toggle-bar', [c('&:hover', [cE('top', {
@@ -54,11 +54,11 @@ export default cB('layout-sider', `
  transform: rotate(0);
  `)])]), cB('layout-toggle-button', `
  transition:
- color .3s var(--bezier),
- right .3s var(--bezier),
- left .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ right .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  cursor: pointer;
  width: 24px;
  height: 24px;
@@ -70,13 +70,13 @@ export default cB('layout-sider', `
  align-items: center;
  justify-content: center;
  font-size: 18px;
- color: var(--toggle-button-icon-color);
- border: var(--toggle-button-border);
- background-color: var(--toggle-button-color);
+ color: var(--n-toggle-button-icon-color);
+ border: var(--n-toggle-button-border);
+ background-color: var(--n-toggle-button-color);
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
  transform: translateX(50%) translateY(-50%);
  `, [cB('base-icon', `
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  transform: rotate(180deg);
  `)]), cB('layout-toggle-bar', `
  cursor: pointer;
@@ -92,8 +92,8 @@ export default cB('layout-sider', `
  height: 38px;
  left: 14px;
  transition: 
- background-color .3s var(--bezier),
- transform .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ transform .3s var(--n-bezier);
  `), cE('bottom', `
  position: absolute;
  top: 34px;
@@ -102,23 +102,23 @@ export default cB('layout-sider', `
 }), cE('bottom', {
   transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
 })]), cE('top, bottom', {
-  backgroundColor: 'var(--toggle-bar-color)'
+  backgroundColor: 'var(--n-toggle-bar-color)'
 }), c('&:hover', [cE('top, bottom', {
-  backgroundColor: 'var(--toggle-bar-color-hover)'
+  backgroundColor: 'var(--n-toggle-bar-color-hover)'
 })])]), cE('border', `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  `), cB('layout-sider-scroll-container', `
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  opacity: 0;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  max-width: 100%;
  `), cM('show-content', [cB('layout-sider-scroll-container', {
   opacity: 1
@@ -128,5 +128,5 @@ export default cB('layout-sider', `
  top: 0;
  bottom: 0;
  `), cM('bordered', `
- border-right: 1px solid var(--border-color);
+ border-right: 1px solid var(--n-border-color);
  `)]);

package/es/layout/src/styles/layout.cssr.js

@@ -1,20 +1,20 @@
 import { cB, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --color
-// --text-color
+// --n-bezier
+// --n-color
+// --n-text-color
 
 export default cB('layout', `
- color: var(--text-color);
- background-color: var(--color);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  box-sizing: border-box;
  position: relative;
  z-index: auto;
  flex: auto;
  overflow: hidden;
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
 `, [cB('layout-scroll-container', `
  overflow-x: hidden;
  box-sizing: border-box;

package/es/list/src/List.d.ts

@@ -93,16 +93,16 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--color': string;
-        '--border-radius': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--color-modal': string;
-        '--color-popover': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-color': string;
+        '--n-border-radius': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-color-modal': string;
+        '--n-color-popover': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/es/list/src/List.js

@@ -24,16 +24,16 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--color': color,
-                    '--border-radius': borderRadius,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--color-modal': colorModal,
-                    '--color-popover': colorPopover
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-color': color,
+                    '--n-border-radius': borderRadius,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-color-modal': colorModal,
+                    '--n-color-popover': colorPopover
                 };
             })
         };

package/es/list/src/styles/index.cssr.js

@@ -1,51 +1,51 @@
 import { cB, c, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --bezier
-// --text-color
-// --color
-// --border-radius
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --color-modal
-// --color-popover
+// --n-font-size
+// --n-bezier
+// --n-text-color
+// --n-color
+// --n-border-radius
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-color-modal
+// --n-color-popover
 
 export default c([cB('list', `
- --merged-border-color: var(--border-color);
- --merged-color: var(--color)
- font-size: var(--font-size);
+ --n-merged-border-color: var(--n-border-color);
+ --n-merged-color: var(--n-color)
+ font-size: var(--n-font-size);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  padding: 0;
  list-style-type: none;
- color: var(--text-color);
- background-color: var(--merged-color);
+ color: var(--n-text-color);
+ background-color: var(--n-merged-color);
  `, [cM('bordered', `
- border-radius: var(--border-radius);
- border: 1px solid var(--merged-border-color);
+ border-radius: var(--n-border-radius);
+ border: 1px solid var(--n-merged-border-color);
  `, [cB('list-item', `
  padding: 12px 20px;
  `, [c('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)]), cE('header, footer', `
  padding: 12px 20px;
  `, [c('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)])]), cE('header, footer', `
  padding: 12px 0;
  box-sizing: border-box;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  `, [c('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)]), cB('list-item', `
  padding: 12px 0; 
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  `, [cE('prefix', `
  margin-right: 20px;
  flex: 0;
@@ -55,11 +55,11 @@ export default c([cB('list', `
  `), cE('main', `
  flex: 1;
  `), c('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)])]), insideModal(cB('list', `
- --merged-color: var(--color-modal);
- --merged-border-color: var(--border-color-modal);
+ --merged-color: var(--n-color-modal);
+ --merged-border-color: var(--n-border-color-modal);
  `)), insidePopover(cB('list', `
- --merged-color: var(--color-popover);
- --merged-border-color: var(--border-color-popover);
+ --merged-color: var(--n-color-popover);
+ --merged-border-color: var(--n-border-color-popover);
  `))]);

package/es/loading-bar/src/LoadingBar.d.ts

@@ -13,9 +13,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleAfterLeave: () => Promise<void>;
     mergedLoadingBarStyle: import("vue").ComputedRef<string | import("vue").CSSProperties | undefined>;
     cssVars: import("vue").ComputedRef<{
-        '--height': string;
-        '--color-loading': string;
-        '--color-error': string;
+        '--n-height': string;
+        '--n-color-loading': string;
+        '--n-color-error': string;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 export default _default;

package/es/loading-bar/src/LoadingBar.js

@@ -128,9 +128,9 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { height, colorError, colorLoading } } = themeRef.value;
                 return {
-                    '--height': height,
-                    '--color-loading': colorLoading,
-                    '--color-error': colorError
+                    '--n-height': height,
+                    '--n-color-loading': colorLoading,
+                    '--n-color-error': colorError
                 };
             })
         };

package/es/loading-bar/src/styles/index.cssr.js

@@ -1,8 +1,8 @@
 import { cB, cM } from '../../../_utils/cssr';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'; // vars:
-// --height
-// --color-loading
-// --color-error
+// --n-height
+// --n-color-loading
+// --n-color-error
 
 export default cB('loading-bar-container', `
  z-index: 5999;
@@ -19,16 +19,16 @@ export default cB('loading-bar-container', `
  transition:
  max-width 4s linear,
  background .2s linear;
- height: var(--height);
+ height: var(--n-height);
  `, [cM('starting', `
- background: var(--color-loading);
+ background: var(--n-color-loading);
  `), cM('finishing', `
- background: var(--color-loading);
+ background: var(--n-color-loading);
  transition:
  max-width .2s linear,
  background .2s linear;
  `), cM('error', `
- background: var(--color-error);
+ background: var(--n-color-error);
  transition:
  max-width .2s linear,
  background .2s linear;

package/es/locales/common/deDE.js

@@ -96,6 +96,16 @@ const deDE = {
         import: 'Importieren',
         export: 'Exportieren',
         restore: 'Auf Standard zurücksetzen'
+    },
+    // TODO: translation
+    Image: {
+        tipPrevious: 'Previous picture (←)',
+        tipNext: 'Next picture (→)',
+        tipCounterclockwise: 'Counterclockwise',
+        tipClockwise: 'Clockwise',
+        tipZoomOut: 'Zoom out',
+        tipZoomIn: 'Zoom in',
+        tipClose: 'Close (Esc)'
     }
 };
 export default deDE;

package/es/locales/common/enUS.d.ts

@@ -96,6 +96,15 @@ declare const enUS: {
         export: string;
         restore: string;
     };
+    Image: {
+        tipPrevious: string;
+        tipNext: string;
+        tipCounterclockwise: string;
+        tipClockwise: string;
+        tipZoomOut: string;
+        tipZoomIn: string;
+        tipClose: string;
+    };
 };
 export declare type NLocale = typeof enUS;
 export default enUS;

package/es/locales/common/enUS.js

@@ -95,6 +95,16 @@ const enUS = {
         import: 'Import',
         export: 'Export',
         restore: 'Reset to Default'
+    },
+    // TODO: translation
+    Image: {
+        tipPrevious: 'Previous picture (←)',
+        tipNext: 'Next picture (→)',
+        tipCounterclockwise: 'Counterclockwise',
+        tipClockwise: 'Clockwise',
+        tipZoomOut: 'Zoom out',
+        tipZoomIn: 'Zoom in',
+        tipClose: 'Close (Esc)'
     }
 };
 export default enUS;