@uzum-tech/ui 1.4.2 → 1.5.0

package/es/typography/src/text.js

@@ -1,76 +1,75 @@
-import { h, defineComponent, computed } from 'vue';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { h, defineComponent, warn, computed } from 'vue';
 import { useCompitable } from 'vooks';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { warn, createKey } from '../../_utils';
-import { typographyLight } from '../styles';
-import style from './styles/text.cssr';
-export const textProps = Object.assign(Object.assign({}, useTheme.props), { code: Boolean, type: {
-        type: String,
-        default: 'default'
-    }, delete: Boolean, strong: Boolean, italic: Boolean, underline: Boolean, depth: [String, Number], tag: String, 
-    // deprecated
-    as: {
-        type: String,
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('text', '`as` is deprecated, please use `tag` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+import { InternalUText, internalTextProps } from '../../_internal';
+export const textProps = internalTextProps;
 export default defineComponent({
     name: 'Text',
-    props: textProps,
-    setup(props) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme('Typography', '-text', style, typographyLight, props, mergedClsPrefixRef);
-        const cssVarsRef = computed(() => {
-            const { depth, type } = props;
-            const textColorKey = type === 'default'
-                ? depth === undefined
-                    ? 'textColor'
-                    : `textColor${depth}Depth`
-                : createKey('textColor', type);
-            const { common: { fontWeightStrong, fontFamilyMono, cubicBezierEaseInOut }, self: { codeTextColor, codeBorderRadius, codeColor, codeBorder, [textColorKey]: textColor } } = themeRef.value;
-            return {
-                '--u-bezier': cubicBezierEaseInOut,
-                '--u-text-color': textColor,
-                '--u-font-weight-strong': fontWeightStrong,
-                '--u-font-famliy-mono': fontFamilyMono,
-                '--u-code-border-radius': codeBorderRadius,
-                '--u-code-text-color': codeTextColor,
-                '--u-code-color': codeColor,
-                '--u-code-border': codeBorder
-            };
+    props: Object.assign(Object.assign({}, textProps), { 
+        // deprecated
+        code: {
+            type: Boolean,
+            validator: (value) => {
+                if (process.env.NODE_ENV !== 'production' && value) {
+                    warn('text', '`code` is deprecated, please use tag="code" instead');
+                }
+                return true;
+            }
+        }, as: {
+            type: String,
+            validator: (value) => {
+                if (process.env.NODE_ENV !== 'production' && value) {
+                    warn('text', '`as` is deprecated, please use `tag` instead.');
+                }
+                return true;
+            },
+            default: undefined
+        }, delete: {
+            type: Boolean,
+            validator: (value) => {
+                if (process.env.NODE_ENV !== 'production' && value) {
+                    warn('text', '`delete` is deprecated, please use tag="del" instead');
+                }
+                return true;
+            }
+        }, depth: {
+            type: [String, Number],
+            validator: (value) => {
+                if (process.env.NODE_ENV !== 'production' && value) {
+                    warn('text', '`depth` is deprecated, please use custom classes to define styles');
+                }
+                return true;
+            }
+        } }),
+    setup(props, { slots, attrs }) {
+        const compitableTagRef = useCompitable(props, ['as', 'tag']);
+        // deprecated props
+        const finalTagRef = computed(() => {
+            // Priority: explicit tag > as > code > delete > default
+            if (compitableTagRef.value) {
+                return compitableTagRef.value;
+            }
+            if (props.code) {
+                return 'code';
+            }
+            if (props.delete) {
+                return 'del';
+            }
+            return undefined;
         });
-        const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('text', computed(() => `${props.type[0]}${props.depth || ''}`), cssVarsRef, props)
-            : undefined;
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            compitableTag: useCompitable(props, ['as', 'tag']),
-            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        return () => {
+            const { code, as, delete: deleteProp, depth } = props, validProps = __rest(props, ["code", "as", "delete", "depth"]);
+            return h(InternalUText, Object.assign(Object.assign(Object.assign({}, validProps), attrs), { tag: finalTagRef.value }), slots);
         };
-    },
-    render() {
-        var _a, _b, _c;
-        const { mergedClsPrefix } = this;
-        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const textClass = [
-            `${mergedClsPrefix}-text`,
-            this.themeClass,
-            {
-                [`${mergedClsPrefix}-text--code`]: this.code,
-                [`${mergedClsPrefix}-text--delete`]: this.delete,
-                [`${mergedClsPrefix}-text--strong`]: this.strong,
-                [`${mergedClsPrefix}-text--italic`]: this.italic,
-                [`${mergedClsPrefix}-text--underline`]: this.underline
-            }
-        ];
-        const children = (_c = (_b = this.$slots).default) === null || _c === void 0 ? void 0 : _c.call(_b);
-        return this.code ? (h("code", { class: textClass, style: this.cssVars }, this.delete ? h("del", null, children) : children)) : this.delete ? (h("del", { class: textClass, style: this.cssVars }, children)) : (h(this.compitableTag || 'span', { class: textClass, style: this.cssVars }, children));
     }
 });

package/es/typography/src/ul.d.ts

@@ -27,6 +27,7 @@ export declare const ulProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -48,6 +49,8 @@ export declare const ulProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -93,6 +96,7 @@ export declare const ulProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -114,6 +118,8 @@ export declare const ulProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -159,6 +165,7 @@ export declare const ulProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -180,6 +187,8 @@ export declare const ulProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -229,6 +238,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -250,6 +260,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -295,6 +307,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -316,6 +329,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -361,6 +376,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -382,6 +398,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -442,6 +460,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -463,6 +482,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -508,6 +529,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -529,6 +551,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -574,6 +598,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -595,6 +620,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;

package/es/typography/src/ul.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed } from 'vue';
+import { h, defineComponent, computed, warn } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/list.cssr';
@@ -7,6 +7,9 @@ export default defineComponent({
     name: 'Ul',
     props: ulProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            warn('ul', 'Ul component is deprecated, you should implement Ul locally in your component instead.');
+        }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Typography', '-xl', style, typographyLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {

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

@@ -26,6 +26,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     headerBarWidth5: string;
     headerBarWidth6: string;
     pMargin: string;
+    margin: string;
     liMargin: string;
     olPadding: string;
     ulPadding: string;
@@ -47,6 +48,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     pTextColor3Depth: string;
     pLineHeight: string;
     pFontSize: string;
+    fontSize: string;
+    lineHeight: string;
     headerBarColor: string;
     headerBarColorPrimary: string;
     headerBarColorInfo: string;

package/es/typography/styles/light.js

@@ -27,6 +27,7 @@ export const self = (vars) => {
         headerBarWidth5: '3px',
         headerBarWidth6: '3px',
         pMargin: '16px 0 16px 0',
+        margin: '16px 0 16px 0',
         liMargin: '.25em 0 0 0',
         olPadding: '0 0 0 2em',
         ulPadding: '0 0 0 2em',
@@ -48,6 +49,8 @@ export const self = (vars) => {
         pTextColor3Depth: textTertiary,
         pLineHeight: lineHeightBodyMedium,
         pFontSize: fontBodyMedium,
+        fontSize: fontBodyMedium,
+        lineHeight: lineHeightBodyMedium,
         headerBarColor: brandPrimary500,
         headerBarColorPrimary: brandPrimary500,
         headerBarColorInfo: brandQuaternary500,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.2";
+declare const _default: "1.5.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.4.2';
+export default '1.5.0';

package/lib/_internal/index.d.ts

@@ -23,3 +23,5 @@ export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedIm
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
 export type { OnUpdateValue, OnUpdateValueImpl, RadioGroupInjection, UseRadio, RadioBaseProps } from './radio';
 export { default as UBaseAccountOption } from './account-option';
+export { default as InternalUText, internalTextProps } from './typography/src/text';
+export type { InternalTextProps } from './typography/src/text';

package/lib/_internal/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UBaseAccountOption = exports.useRadio = exports.radioGroupInjectionKey = exports.radioBaseProps = exports.useCheckbox = exports.checkboxBaseProps = exports.checkboxGroupInjectionKey = exports.UxScrollbar = exports.UScrollbar = exports.UBaseSuffix = exports.UBaseClear = exports.UBaseSlotMachine = exports.UInternalSelection = exports.UBaseMenuMask = exports.UBaseWave = exports.UInternalSelectMenu = exports.UBaseSkeleton = exports.UBaseLoading = exports.UBaseFocusDetector = exports.UBaseIcon = exports.UBaseClose = exports.UFadeInExpandTransition = exports.UIconSwitchTransition = void 0;
+exports.internalTextProps = exports.InternalUText = exports.UBaseAccountOption = exports.useRadio = exports.radioGroupInjectionKey = exports.radioBaseProps = exports.useCheckbox = exports.checkboxBaseProps = exports.checkboxGroupInjectionKey = exports.UxScrollbar = exports.UScrollbar = exports.UBaseSuffix = exports.UBaseClear = exports.UBaseSlotMachine = exports.UInternalSelection = exports.UBaseMenuMask = exports.UBaseWave = exports.UInternalSelectMenu = exports.UBaseSkeleton = exports.UBaseLoading = exports.UBaseFocusDetector = exports.UBaseIcon = exports.UBaseClose = exports.UFadeInExpandTransition = exports.UIconSwitchTransition = void 0;
 var icon_switch_transition_1 = require("./icon-switch-transition");
 Object.defineProperty(exports, "UIconSwitchTransition", { enumerable: true, get: function () { return __importDefault(icon_switch_transition_1).default; } });
 var fade_in_expand_transition_1 = require("./fade-in-expand-transition");
@@ -45,3 +45,6 @@ Object.defineProperty(exports, "radioGroupInjectionKey", { enumerable: true, get
 Object.defineProperty(exports, "useRadio", { enumerable: true, get: function () { return radio_1.useRadio; } });
 var account_option_1 = require("./account-option");
 Object.defineProperty(exports, "UBaseAccountOption", { enumerable: true, get: function () { return __importDefault(account_option_1).default; } });
+var text_1 = require("./typography/src/text");
+Object.defineProperty(exports, "InternalUText", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
+Object.defineProperty(exports, "internalTextProps", { enumerable: true, get: function () { return text_1.internalTextProps; } });

package/lib/_internal/typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InternalUText, internalTextProps } from './src/text';
+export type { InternalTextProps } from './src/text';

package/lib/_internal/typography/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.internalTextProps = exports.InternalUText = void 0;
+var text_1 = require("./src/text");
+Object.defineProperty(exports, "InternalUText", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
+Object.defineProperty(exports, "internalTextProps", { enumerable: true, get: function () { return text_1.internalTextProps; } });

package/lib/_internal/typography/src/styles/text.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/typography/src/styles/text.cssr.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+// vars:
+// --u-text-color
+// --u-font-weight-strong
+// --u-font-famliy-mono
+// --u-code-border-radius
+// --u-code-text-color
+// --u-code-color
+// --u-code-border
+exports.default = (0, cssr_1.cB)('text', `
+ transition: color .3s var(--u-bezier);
+ color: var(--u-text-color);
+ margin: 0;
+ padding: 0;
+`, [(0, cssr_1.cM)('strong', `
+ font-weight: var(--u-font-weight-strong);
+ `), (0, cssr_1.cM)('italic', {
+  fontStyle: 'italic'
+}), (0, cssr_1.cM)('underline', {
+  textDecoration: 'underline'
+}), (0, cssr_1.cM)('strikethrough', {
+  textDecoration: 'line-through'
+}), (0, cssr_1.cM)('variant', `
+ font-family: var(--u-variant-font-family);
+ font-size: var(--u-variant-font-size);
+ font-weight: var(--u-variant-font-weight);
+ line-height: var(--u-variant-line-height);
+ letter-spacing: var(--u-variant-letter-spacing);
+ font-style: var(--u-variant-font-style);
+ `), (0, cssr_1.c)('code&', `
+ line-height: 1.4;
+ display: inline-block;
+ font-family: var(--u-font-famliy-mono);
+ transition: 
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ box-sizing: border-box;
+ padding: .05em .35em 0 .35em;
+ border-radius: var(--u-code-border-radius);
+ font-size: .9em;
+ color: var(--u-code-text-color);
+ background-color: var(--u-code-color);
+ border: var(--u-code-border);
+ `), (0, cssr_1.c)('blockquote&', `
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ margin: 0;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ box-sizing: border-box;
+ padding-left: 12px;
+ border-left: 4px solid var(--u-prefix-color);
+ color: var(--u-text-color);
+ transition:
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ `, [(0, cssr_1.c)('&:first-child', {
+  marginTop: 0
+}), (0, cssr_1.c)('&:last-child', {
+  marginBottom: 0
+}), (0, cssr_1.cM)('align-text', {
+  marginLeft: '-16px'
+})]), (0, cssr_1.c)('a&', `
+ cursor: pointer;
+ transition:
+ color .3s var(--u-bezier),
+ text-decoration-color .3s var(--u-bezier);
+ text-decoration-color: var(--u-text-color);
+ color: var(--u-a-text-color);
+ `), (0, cssr_1.c)('p&', `
+ box-sizing: border-box;
+ transition: color .3s var(--u-bezier);
+ margin: var(--u-margin);
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ color: var(--u-text-color);
+ `, [(0, cssr_1.c)('&:first-child', 'margin-top: 0;'), (0, cssr_1.c)('&:last-child', 'margin-bottom: 0;')])]);