diginet-core-ui 1.3.90-beta.1 → 1.3.90-beta.3

package/components/form-control/calendar/function.js

@@ -1,36 +1,18 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/core';
-import { render } from 'react-dom';
 import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
-import theme from "../../../theme/settings";
+import { render } from 'react-dom';
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
-import { useColor as colors } from "../../../theme";
-import { typography } from "../../../styles/typography";
-import { itemsCenter, border, boxBorder, borderRadius4px, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
-const {
-  heading6
-} = typography;
 const {
-  system: {
-    active,
-    white
-  },
-  fill: {
-    hover: fillHover,
-    focus: fillFocus,
-    pressed: fillPressed
-  },
-  text: {
-    main,
-    normal_label
-  },
-  danger8,
-  info8
-} = colors;
+  boxShadows: {
+    large: boxShadowsLarge
+  }
+} = useTheme();
 
 /**
  * START STYLE
@@ -43,160 +25,127 @@ const {
  * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
-    ${borderRadius4px}
-    ${boxBorder}
-	${flexCol}
-	background-color: ${white};
-    box-shadow: ${boxShadow ? theme.boxShadows.large : 'none'};
-    max-width: 400px;
-    min-width: 260px;
-    width: 100%;
+    ${displayFlex};
+    ${flexCol};
+    ${boxBorder};
+    ${borderRadius('0px 0px 4px 4px')};
+    ${bgColor('system.white')};
+    ${parseWidth('100%')};
+    ${parseMinWidth(260)};
+    ${parseMaxWidth(400)};
+    box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
     .${unique.navigator.navigator} {
-        ${flexRow}
-        ${justifyBetween}
-		height         : 28px;
-        margin: 0px 14px;
-        margin-top: 14px;
-        max-width: 400px;
-        width: calc(100% - 28px);
+        ${displayFlex};
+        ${flexRow};
+        ${justifyBetween};
+        ${itemsCenter};
+        ${parseMaxWidth(400)};
+        ${mg([4, 4, 0])};
         .${unique.navigator.around} {
-            ${flexRow}
-            ${userSelectNone}
-			height        : 28px;
-            width: 64px;
+            ${displayFlex};
+            ${flexRow};
         }
         .${unique.navigator.center} {
-            ${displayInlineFlex}
-            ${itemsCenter}
-			${textCenter}
-			${userSelectNone}
-			height     : 28px;
-            margin: 0 4px;
-            min-width: 150px;
-            width: 100%;
-            button {
-                height: 28px;
-            }
-            .DGN-UI-Typography {
-                min-width: 150px;
-            }
-        }
-    }
-    .${unique.icon} {
-        height: 28px;
-        margin: 0 2px;
-        width: 28px;
-        svg,
-        path,
-        g {
-            ${pointerEventsNone}
+            ${parseWidth('100%')};
         }
     }
     .${unique.table.container} {
-        ${flexRow}
-        margin : 10px 0;
-        margin-top: 6px;
-        width: 100%;
+        ${displayFlex};
+        ${flexRow};
+        ${mg([2, 0])};
     }
     .${unique.table.table} {
+        ${mg([0, 4])};
+        ${parseWidth('calc(100% - 32px)')};
         border-collapse: separate;
-        margin: 0 16px;
         padding: 0;
         table-layout: fixed;
-        width: calc(100% - 32px);
         .${unique.table.data} {
-            ${cursorPointer}
-            ${positionRelative}
-			${textCenter}
-			${userSelectNone}
-			color      : ${main};
-            height: 24px;
-            min-width: 24px;
-            padding: 1px;
-            &:nth-of-type(7n - 1) {
-                color: ${info8} !important;
-            }
-            &:nth-of-type(7n) {
-                color: ${danger8} !important;
-            }
-            &.next_month,
-            &.previous_month,
-            &.${unique.day.limit} {
-                opacity: 0.25;
-            }
-            &.${unique.day.limit} {
-                ${pointerEventsNone}
-                cursor: default;
-            }
-            &:hover {
-                span.${unique.day.day} {
-                    background-color: ${fillHover};
+            &:not(.empty) {
+                ${cursorPointer};
+                ${positionRelative};
+                ${textCenter};
+                ${userSelectNone};
+                ${textColor('text.main')};
+                &:nth-of-type(7n - 1) {
+                    ${textColor('info8')};
                 }
-            }
-            ${onClickActive ? `&:active {
-				span.${unique.day.day} {
-					background-color: ${fillPressed};
-				}
-			}` : ''}
-            &.${unique.day.active} {
-                span.${unique.day.day} {
-                    ${heading6};
-                    background-color: ${fillFocus};
+                &:nth-of-type(7n) {
+                    ${textColor('danger8')};
                 }
-            }
-            &.${unique.day.today} {
-                span {
-                    ${heading6}
-                    ${boxBorder}
-					${border(1, active)}
-					/* text-decoration-line     : underline;
-					text-decoration-thickness: 2px;
-					text-underline-offset    : 1px */
+                &.next_month,
+                &.previous_month,
+                &.${unique.day.limit} {
+                    opacity: 0.25;
                 }
-            }
-            &.${unique.day.between} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
+                &.${unique.day.limit} {
+                    ${pointerEventsNone};
+                    ${cursorDefault};
                 }
-            }
-            &.${unique.day.from} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
-                    border-bottom-left-radius: 12px;
-                    border-top-left-radius: 12px;
-                    left: calc((100% - 24px) / 2);
+                &:hover {
+                    span.${unique.day.day} {
+                        ${bgColor('fill.hover')};
+                    }
                 }
-            }
-            &.${unique.day.to} {
-                opacity: 1;
-                &::before {
-                    background-color: ${fillHover};
-                    border-bottom-right-radius: 12px;
-                    border-top-right-radius: 12px;
-                    right: calc((100% - 24px) / 2);
+                ${onClickActive && css`
+                    &:active {
+                        span.${unique.day.day} {
+                            ${bgColor('fill.pressed')};
+                        }
+                    }
+                `}
+                &.${unique.day.active} {
+                    span.${unique.day.day} {
+                        ${bgColor('fill.focus')};
+                    }
+                }
+                &.${unique.day.today} {
+                    span {
+                        ${boxBorder};
+                        ${border(1, 'system.active')};
+                    }
+                }
+                &.${unique.day.between} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                    }
+                }
+                &.${unique.day.from} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                        border-bottom-left-radius: 12px;
+                        border-top-left-radius: 12px;
+                        left: calc((100% - 24px) / 2);
+                    }
+                }
+                &.${unique.day.to} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                        border-bottom-right-radius: 12px;
+                        border-top-right-radius: 12px;
+                        right: calc((100% - 24px) / 2);
+                    }
+                }
+                ::before {
+                    ${positionAbsolute};
+                    ${inset('1px -2px')};
+                    content: '';
                 }
-            }
-            ::before {
-                ${positionAbsolute}
-                inset: 1px -2px;
-                content: '';
             }
         }
         .${unique.table.header} {
-            ${userSelectNone}
-            ${textCenter}
-			color         : ${normal_label};
-            height: 24px;
-            min-width: 24px;
-            padding: 0;
-            padding-bottom: 6px;
+            ${userSelectNone};
+            ${textCenter};
+            ${parseHeight(24)};
+            ${textColor('text.normal_label')};
             &:nth-of-type(6) {
-                color: ${info8} !important;
+                ${textColor('info8')};
             }
             &:nth-of-type(7) {
-                color: ${danger8} !important;
+                ${textColor('danger8')};
             }
         }
     }
@@ -280,10 +229,8 @@ const buttonIconProps = className => {
   return {
     className,
     circular: true,
-    height: 28,
-    viewBox: true,
     viewType: 'text',
-    width: 28
+    size: 'small'
   };
 };
 /**
@@ -296,10 +243,9 @@ const buttonTextProps = fn => {
   return {
     onClick: fn,
     color: 'primary',
+    size: 'small',
     style: {
       borderRadius: 20,
-      margin: 0,
-      padding: '2px 4px',
       textTransform: 'initial',
       width: '100%'
     }

package/components/form-control/date-range-picker/index.js

@@ -260,7 +260,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": day - 1,
-        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1))
+        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1), 'empty')
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -300,7 +300,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": i < 6 - weekDateLast && day + 1,
-        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1))
+        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1), 'empty')
       }, jsx("span", {
         className: unique.day.day
       })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.90-beta.1",
+  "version": "1.3.90-beta.3",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/styles/general.js

@@ -4,10 +4,10 @@ export const rootSpacing = 4;
 export let rootZIndex = 1500;
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 export const zIndex = number => {
   number = Number(number || 0);
@@ -15,10 +15,10 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -28,9 +28,9 @@ export const getSpacing = (vl = 1) => {
   } else return vl;
 };
 
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 export const setZIndex = number => {
   number = Number(number || 0);