@uzum-tech/ui 1.9.0 → 1.10.0

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

@@ -0,0 +1,333 @@
+import { c, cB, cM } from '../../../_utils/cssr';
+// vars:
+// --u-wrapper-border-radius
+// --u-wrapper-bg-color
+// --u-wrapper-width
+// --u-wrapper-height
+// --u-cropper-theme-color
+// --u-wrapper-margin
+export default c([c([c('.cropper-container', {
+  direction: 'ltr',
+  fontSize: '0',
+  lineHeight: '0',
+  position: 'relative',
+  msTouchAction: 'none',
+  touchAction: 'none',
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none'
+}, [c('img', {
+  backfaceVisibility: 'hidden',
+  display: 'block',
+  height: '100%',
+  imageOrientation: '0deg',
+  maxHeight: 'none !important',
+  maxWidth: 'none !important',
+  minHeight: '0 !important',
+  minWidth: '0 !important',
+  width: '100%'
+})]), c('.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal', {
+  bottom: '0',
+  left: '0',
+  position: 'absolute',
+  right: '0',
+  top: '0'
+}), c('.cropper-wrap-box, .cropper-canvas', {
+  overflow: 'hidden'
+}), c('.cropper-drag-box', {
+  backgroundColor: '#fff',
+  opacity: '0'
+}), c('.cropper-modal', {
+  backgroundColor: '#000',
+  opacity: '0.5'
+}), c('.cropper-view-box', {
+  display: 'block',
+  height: '100%',
+  outline: '1px solid #39f',
+  outlineColor: 'rgba(51, 153, 255, 0.75)',
+  overflow: 'hidden',
+  width: '100%'
+}), c('.cropper-dashed', {
+  border: '0 dashed #eee',
+  display: 'block',
+  opacity: '0.5',
+  position: 'absolute'
+}, [c('&.dashed-h', {
+  borderBottomWidth: '1px',
+  borderTopWidth: '1px',
+  height: 'calc(100% / 3)',
+  left: '0',
+  top: 'calc(100% / 3)',
+  width: '100%'
+}), c('&.dashed-v', {
+  borderLeftWidth: '1px',
+  borderRightWidth: '1px',
+  height: '100%',
+  left: 'calc(100% / 3)',
+  top: '0',
+  width: 'calc(100% / 3)'
+})]), c('.cropper-center', {
+  display: 'block',
+  height: '0',
+  left: '50%',
+  opacity: '0.75',
+  position: 'absolute',
+  top: '50%',
+  width: '0'
+}, [c('&::before, &::after', {
+  backgroundColor: '#eee',
+  content: '" "',
+  display: 'block',
+  position: 'absolute'
+}), c('&::before', {
+  height: '1px',
+  left: '-3px',
+  top: '0',
+  width: '7px'
+}), c('&::after', {
+  height: '7px',
+  left: '0',
+  top: '-3px',
+  width: '1px'
+})]), c('.cropper-face, .cropper-line, .cropper-point', {
+  display: 'block',
+  height: '100%',
+  opacity: '0.1',
+  position: 'absolute',
+  width: '100%'
+}), c('.cropper-face', {
+  backgroundColor: '#fff',
+  left: '0',
+  top: '0'
+}), c('.cropper-line', {
+  backgroundColor: '#39f'
+}, [c('&.line-e', {
+  cursor: 'ew-resize',
+  right: '-3px',
+  top: '0',
+  width: '5px'
+}), c('&.line-n', {
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0',
+  top: '-3px'
+}), c('&.line-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  top: '0',
+  width: '5px'
+}), c('&.line-s', {
+  bottom: '-3px',
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0'
+})]), c('.cropper-point', {
+  backgroundColor: '#39f',
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+}, [c('&.point-e', {
+  cursor: 'ew-resize',
+  marginTop: '-3px',
+  right: '-3px',
+  top: '50%'
+}), c('&.point-n', {
+  cursor: 'ns-resize',
+  left: '50%',
+  marginLeft: '-3px',
+  top: '-3px'
+}), c('&.point-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  marginTop: '-3px',
+  top: '50%'
+}), c('&.point-s', {
+  bottom: '-3px',
+  cursor: 's-resize',
+  left: '50%',
+  marginLeft: '-3px'
+}), c('&.point-ne', {
+  cursor: 'nesw-resize',
+  right: '-3px',
+  top: '-3px'
+}), c('&.point-nw', {
+  cursor: 'nwse-resize',
+  left: '-3px',
+  top: '-3px'
+}), c('&.point-sw', {
+  bottom: '-3px',
+  cursor: 'nesw-resize',
+  left: '-3px'
+}), c('&.point-se', {
+  bottom: '-3px',
+  cursor: 'nwse-resize',
+  height: '20px',
+  opacity: '1',
+  right: '-3px',
+  width: '20px'
+}, [c('&::before', {
+  backgroundColor: '#39f',
+  bottom: '-50%',
+  content: '" "',
+  display: 'block',
+  height: '200%',
+  opacity: '0',
+  position: 'absolute',
+  right: '-50%',
+  width: '200%'
+})])]), c('@media (min-width: 768px)', [c('.cropper-point.point-se', {
+  height: '15px',
+  width: '15px'
+})]), c('@media (min-width: 992px)', [c('.cropper-point.point-se', {
+  height: '10px',
+  width: '10px'
+})]), c('@media (min-width: 1200px)', [c('.cropper-point.point-se', {
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+})]), c('.cropper-invisible', {
+  opacity: '0'
+}), c('.cropper-bg', {
+  backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")'
+}), c('.cropper-hide', {
+  display: 'block',
+  height: '0',
+  position: 'absolute',
+  width: '0'
+}), c('.cropper-hidden', {
+  display: 'none !important'
+}), c('.cropper-move', {
+  cursor: 'move'
+}), c('.cropper-crop', {
+  cursor: 'crosshair'
+}), c('.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point', {
+  cursor: 'not-allowed'
+})]), cB('crop-wrapper', `
+ overflow: hidden;
+ background-color: var(--u-wrapper-bg-color);
+ border-radius: var(--u-wrapper-border-radius);
+ width: var(--u-wrapper-width);
+ height: var(--u-wrapper-height);
+ margin: var(--u-wrapper-margin);
+ `, [cM('circle', '', [c(`.cropper-view-box, 
+ .cropper-face`, `
+ border-radius: 50%;
+ `)]), c('.cropper-view-box', `
+ outline: 0;
+ box-shadow: 0 0 0 1px var(--u-cropper-theme-color);
+ `), c(`.cropper-line,
+ .cropper-point`, `
+ background-color: var(--u-cropper-theme-color);
+ `), c(`
+ .point-e,
+ .point-n,
+ .point-w,
+ .point-s
+ `, `
+ display: none;
+ `), c('.point-se', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-sw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-nw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-ne', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)])]), cB('crop-img', `
+ display: block;
+ max-width: 100%;
+ `)]);

package/es/crop/styles/_common.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    wrapperMargin: string;
+};
+export default _default;

package/es/crop/styles/_common.js

@@ -0,0 +1,3 @@
+export default {
+    wrapperMargin: '0 0 20px'
+};

package/es/crop/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import { type CropTheme } from './light';
+declare const cropDark: CropTheme;
+export default cropDark;

package/es/crop/styles/dark.js

@@ -0,0 +1,9 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const cropDark = {
+    name: 'Crop',
+    common: commonDark,
+    peers: {},
+    self
+};
+export default cropDark;

package/es/crop/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as cropDark } from './dark';
+export { default as cropLight } from './light';
+export type { CropTheme, CropThemeVars } from './light';

package/es/crop/styles/index.js

@@ -0,0 +1,2 @@
+export { default as cropDark } from './dark';
+export { default as cropLight } from './light';

package/es/crop/styles/light.d.ts

@@ -0,0 +1,14 @@
+import { ThemeCommonVars } from '../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+};
+export type CropThemeVars = ReturnType<typeof self>;
+declare const cropLight: import("../../_mixins").Theme<"Crop", {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+}, {}>;
+export default cropLight;
+export type CropTheme = typeof cropLight;

package/es/crop/styles/light.js

@@ -0,0 +1,14 @@
+import { createTheme } from '../../_mixins';
+import { commonLight } from '../../_styles/common';
+import commonVars from './_common';
+export const self = (vars) => {
+    const { elementsSenary, borderRadiusLarge } = vars;
+    return Object.assign(Object.assign({}, commonVars), { wrapperBg: elementsSenary, wrapperBorderRadius: borderRadiusLarge });
+};
+const cropLight = createTheme({
+    name: 'Crop',
+    common: commonLight,
+    peers: {},
+    self
+});
+export default cropLight;