@type-dom/ui 0.0.10 → 0.1.1

package/src/locale/lang/zh-tw.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    name: 'zh-tw',
+    el: {
+        breadcrumb: {
+            label: '面包屑',
+        },
+        colorpicker: {
+            confirm: '確認',
+            clear: '清空',
+            defaultLabel: '色彩選擇器',
+            description: '目前色彩為 {color}。按一下 Enter 以選擇新色彩。',
+            alphaLabel: '選擇透明度的值',
+        },
+        datepicker: {
+            now: '現在',
+            today: '今天',
+            cancel: '取消',
+            clear: '清空',
+            confirm: '確認',
+            dateTablePrompt: '使用方向鍵與 Enter 鍵以選擇日期',
+            monthTablePrompt: '使用方向鍵與 Enter 鍵以選擇月份',
+            yearTablePrompt: '使用方向鍵與 Enter 鍵以選擇年份',
+            selectedDate: '已選日期',
+            selectDate: '選擇日期',
+            selectTime: '選擇時間',
+            startDate: '開始日期',
+            startTime: '開始時間',
+            endDate: '結束日期',
+            endTime: '結束時間',
+            prevYear: '前一年',
+            nextYear: '後一年',
+            prevMonth: '上個月',
+            nextMonth: '下個月',
+            year: '年',
+            month1: '1 月',
+            month2: '2 月',
+            month3: '3 月',
+            month4: '4 月',
+            month5: '5 月',
+            month6: '6 月',
+            month7: '7 月',
+            month8: '8 月',
+            month9: '9 月',
+            month10: '10 月',
+            month11: '11 月',
+            month12: '12 月',
+            // week: '周次',
+            weeks: {
+                sun: '日',
+                mon: '一',
+                tue: '二',
+                wed: '三',
+                thu: '四',
+                fri: '五',
+                sat: '六',
+            },
+            weeksFull: {
+                sun: '星期日',
+                mon: '星期一',
+                tue: '星期二',
+                wed: '星期三',
+                thu: '星期四',
+                fri: '星期五',
+                sat: '星期六',
+            },
+            months: {
+                jan: '一月',
+                feb: '二月',
+                mar: '三月',
+                apr: '四月',
+                may: '五月',
+                jun: '六月',
+                jul: '七月',
+                aug: '八月',
+                sep: '九月',
+                oct: '十月',
+                nov: '十一月',
+                dec: '十二月',
+            },
+        },
+        inputNumber: {
+            decrease: '減少數值',
+            increase: '增加數值',
+        },
+        select: {
+            loading: '載入中',
+            noMatch: '無相符資料',
+            noData: '無資料',
+            placeholder: '請選擇',
+        },
+        mention: {
+            loading: '載入中',
+        },
+        dropdown: {
+            toggleDropdown: '切換下拉選單',
+        },
+        cascader: {
+            noMatch: '無相符資料',
+            loading: '載入中',
+            placeholder: '請選擇',
+            noData: '無資料',
+        },
+        pagination: {
+            goto: '前往',
+            pagesize: '項/頁',
+            total: '共 {total} 項',
+            pageClassifier: '頁',
+            page: '頁',
+            prev: '上一頁',
+            next: '下一頁',
+            currentPage: '第 {pager} 頁',
+            prevPages: '向前 {pager} 頁',
+            nextPages: '向後 {pager} 頁',
+            deprecationWarning: '偵測到已過時的使用方式，請參閱 el-pagination 說明文件以了解更多資訊',
+        },
+        dialog: {
+            close: '關閉此對話框',
+        },
+        drawer: {
+            close: '關閉此對話框',
+        },
+        messagebox: {
+            title: '提示',
+            confirm: '確定',
+            cancel: '取消',
+            error: '輸入的資料不符規定!',
+            close: '關閉此對話框',
+        },
+        upload: {
+            deleteTip: '按一下 Delete 鍵以刪除',
+            delete: '刪除',
+            preview: '查看圖片',
+            continue: '繼續上傳',
+        },
+        slider: {
+            defaultLabel: '滑桿介於 {min} 至 {max}',
+            defaultRangeStartLabel: '選擇起始值',
+            defaultRangeEndLabel: '選擇結束值',
+        },
+        table: {
+            emptyText: '暫無資料',
+            confirmFilter: '篩選',
+            resetFilter: '重置',
+            clearFilter: '全部',
+            sumText: '合計',
+        },
+        tour: {
+            next: '下一步',
+            previous: '上一步',
+            finish: '結束導覽',
+        },
+        tree: {
+            emptyText: '暫無資料',
+        },
+        transfer: {
+            noMatch: '無相符資料',
+            noData: '無資料',
+            titles: ['列表 1', '列表 2'],
+            filterPlaceholder: '請輸入搜尋內容',
+            noCheckedFormat: '共 {total} 項',
+            hasCheckedFormat: '已選 {checked}/{total} 項',
+        },
+        image: {
+            error: '載入失敗',
+        },
+        pageHeader: {
+            title: '返回',
+        },
+        popconfirm: {
+            confirmButtonText: '確認',
+            cancelButtonText: '取消',
+        },
+        carousel: {
+            leftArrow: '上一張投影片',
+            rightArrow: '下一張投影片',
+            indicator: '投影片切換至索引 {index}',
+        },
+    },
+};

package/src/styles/index.d.ts

@@ -1,2 +1 @@
 export * from './var';
-export type { ISize } from './size';

package/src/styles/utils.d.ts

@@ -0,0 +1,3 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const utilsEllipsis: IStyle;
+export declare const utilsInlineFlexCenter: IStyle;

package/src/styles/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.utilsInlineFlexCenter = exports.utilsEllipsis = void 0;
+exports.utilsEllipsis = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.utilsInlineFlexCenter = {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};

package/src/styles/var.d.ts

@@ -62,6 +62,7 @@ export declare const fontFamily: {
     default: string;
 };
 export declare const $fontSizes: {
+    '': string;
     extraLarge: string;
     large: string;
     medium: string;
@@ -80,13 +81,6 @@ export declare const $disabled: {
     textColor: string;
     borderColor: string;
 };
-export declare const componentSizes: readonly ["", "default", "small", "large"];
-export type ComponentSize = (typeof componentSizes)[number];
-export declare const componentSizeMap: {
-    readonly large: 40;
-    readonly default: 32;
-    readonly small: 24;
-};
 export declare const $commonComponentSize: {
     large: string;
     default: string;
@@ -181,21 +175,6 @@ export declare const $fontSizeMap: {
     default: string;
     small: string;
 };
-export declare const $borderRadiusMap: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $paddingVerticalMap: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $paddingHorizontalMap: {
-    large: string;
-    default: string;
-    small: string;
-};
 export declare const $transitionDurationDefault = "0.3s";
 export declare const $transitionDurationFast = "0.2s";
 export declare const $colorPrimaryRgb = "64, 158, 255";
@@ -209,3 +188,4 @@ export declare const $scrollbar: {
 export declare const $ellipsisStyle: IStyle;
 export declare const $border: string;
 export declare const $svgMonochromeGrey: string;
+export declare const $row: IStyle;

package/src/styles/var.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDurationDefault = exports.$paddingHorizontalMap = exports.$paddingVerticalMap = exports.$borderRadiusMap = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.componentSizeMap = exports.componentSizes = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
+exports.$row = exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDurationDefault = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
 exports.setColorMixLevel = setColorMixLevel;
 /**
  * scss/var
@@ -72,6 +72,7 @@ exports.fontFamily = {
     default: "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
 };
 exports.$fontSizes = {
+    '': '16px',
     extraLarge: '20px',
     large: '18px',
     medium: '16px',
@@ -92,12 +93,6 @@ exports.$disabled = {
     textColor: exports.$textColor.placeholder,
     borderColor: exports.$borderColor.light,
 };
-exports.componentSizes = ['', 'default', 'small', 'large'];
-exports.componentSizeMap = {
-    large: 40,
-    default: 32,
-    small: 24,
-};
 exports.$commonComponentSize = {
     large: '40px',
     default: '32px',
@@ -206,9 +201,9 @@ for (const $type of exports.$types) {
     // --el-color-primary-dark-2
     setColorMixLevel($type, 2, 'dark', exports.$colorBlack);
 }
-console.log('$colors is ', exports.$colors);
+// console.log('$colors is ', $colors);
 // Button
-// css3 var in packages/theme-chalk/src/button.scss
+// css3 var in packages/theme-chalk/button.scss
 exports.$button = {
     fontWeight: exports.$fontWeightPrimary, // getCssVar('font-weight-primary'),
     borderColor: exports.$borderColor.base,
@@ -256,21 +251,6 @@ exports.$fontSizeMap = {
     default: exports.$fontSizes.base,
     small: '12px',
 };
-exports.$borderRadiusMap = {
-    large: exports.$borderRadius.base,
-    default: exports.$borderRadius.base,
-    small: parseInt(exports.$borderRadius.base, 10) - 1 + 'px',
-};
-exports.$paddingVerticalMap = {
-    large: '13px',
-    default: '9px',
-    small: '6px',
-};
-exports.$paddingHorizontalMap = {
-    large: '20px',
-    default: '16px',
-    small: '12px',
-};
 exports.$transitionDurationDefault = '0.3s';
 exports.$transitionDurationFast = '0.2s';
 exports.$colorPrimaryRgb = '64, 158, 255';
@@ -293,3 +273,8 @@ exports.$ellipsisStyle = {
 exports.$border = exports.$borderWidth + ' ' + exports.$borderStyle + ' ' + exports.$borderColor.base;
 // Svg
 exports.$svgMonochromeGrey = exports.$borderColor.base;
+exports.$row = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};

package/src/utils/refs.d.ts

@@ -0,0 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export type RefSetter = (el: Element | TypeNode | undefined) => void;
+export declare const composeRefs: (...refs: (Ref<HTMLElement | undefined> | RefSetter)[]) => (el: Element | TypeNode | null) => void;

package/src/utils/refs.js

@@ -0,0 +1,20 @@
+"use strict";
+// import { isFunction } from '../types'
+//
+// import type { ComponentPublicInstance, Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeRefs = void 0;
+const utils_1 = require("@type-dom/utils");
+const composeRefs = (...refs) => {
+    return (el) => {
+        refs.forEach((ref) => {
+            if ((0, utils_1.isFunction)(ref)) {
+                ref(el);
+            }
+            else {
+                ref.set(el);
+            }
+        });
+    };
+};
+exports.composeRefs = composeRefs;

package/src/aria.d.ts

@@ -1,15 +0,0 @@
-import { IUIConfig } from './ui/ui.interface';
-export interface IAriaConfig extends IUIConfig {
-    /**
-     * @description native `aria-label` attribute
-     */
-    ariaLabel?: string;
-    /**
-     * @description native `aria-orientation` attribute
-     */
-    ariaOrientation?: 'horizontal' | 'vertical' | 'undefined';
-    /**
-     * @description native `aria-controls` attribute
-     */
-    ariaControls?: string;
-}

package/src/components/data/td-collapse-transition/td-collapse-transition.util.d.ts

@@ -1,2 +0,0 @@
-import { ITransitionConfig } from '@type-dom/framework';
-export declare const collapseTransitionConfig: ITransitionConfig;

package/src/components/data/td-collapse-transition/td-collapse-transition.util.js

@@ -1,147 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseTransitionConfig = void 0;
-const reset = (element) => {
-    const el = element === null || element === void 0 ? void 0 : element.dom;
-    if (!el) {
-        throw Error('element is not exist . ');
-    }
-    // el.style.maxHeight = '';
-    // el.style.overflow = el.dataset.oldOverflow
-    // el.style.paddingTop = el.dataset.oldPaddingTop
-    // el.style.paddingBottom = el.dataset.oldPaddingBottom
-    element === null || element === void 0 ? void 0 : element.style.setObj({
-        maxHeight: '',
-        overflow: el.dataset.oldOverflow,
-        paddingTop: el.dataset.oldPaddingTop,
-        paddingBottom: el.dataset.oldPaddingBottom
-    });
-};
-exports.collapseTransitionConfig = {
-    onBeforeEnter(element) {
-        console.log('beforeEnter . ');
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        if (!el.dataset) {
-            // el.dataset = {};
-            element.attr.set('dataset', false);
-        }
-        element.attr.setObj({
-            dataOldPaddingTop: el.style.paddingTop,
-            dataOldPaddingBottom: el.style.paddingBottom
-        });
-        // el.dataset.oldPaddingTop = el.style.paddingTop
-        // el.dataset.oldPaddingBottom = el.style.paddingBottom
-        if (el.style.height) {
-            // el.dataset.existsHeight = el.style.height
-            element.attr.setObj({
-                dataExistsHeight: el.style.height
-            });
-        }
-        // el.style.maxHeight = 0
-        // el.style.paddingTop = 0
-        // el.style.paddingBottom = 0
-        element.style.setObj({
-            maxHeight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            transition: 'max-height .3s ease-in-out'
-        });
-    },
-    onEnter(element) {
-        console.log('enter . ');
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        requestAnimationFrame(() => {
-            element.attr.setObj({
-                dataOldOverflow: el.style.overflow
-            });
-            // el.dataset.oldOverflow = el.style.overflow
-            if (el.dataset.existsHeight) {
-                // el.style.maxHeight = el.dataset.existsHeight
-                element.style.setObj({
-                    maxHeight: el.dataset.existsHeight
-                });
-            }
-            else if (el.scrollHeight !== 0) {
-                // el.style.maxHeight = `${el.scrollHeight}px`
-                element.style.setObj({
-                    maxHeight: `${el.scrollHeight}px`
-                });
-            }
-            else {
-                // el.style.maxHeight = 0
-                element.style.setObj({
-                    maxHeight: 0
-                });
-            }
-            // el.style.paddingTop = el.dataset.oldPaddingTop
-            // el.style.paddingBottom = el.dataset.oldPaddingBottom
-            // el.style.overflow = 'hidden'
-            element.style.setObj({
-                paddingTop: el.dataset.oldPaddingTop,
-                paddingBottom: el.dataset.oldPaddingBottom,
-                overflow: 'hidden'
-            });
-        });
-    },
-    onAfterEnter(element) {
-        var _a;
-        // el.style.maxHeight = ''
-        // el.style.overflow = el.dataset.oldOverflow
-        element === null || element === void 0 ? void 0 : element.style.setObj({
-            maxHeight: '',
-            overflow: (_a = element === null || element === void 0 ? void 0 : element.dom) === null || _a === void 0 ? void 0 : _a.dataset.oldOverflow
-        });
-    },
-    onEnterCancelled(element) {
-        reset(element);
-    },
-    onBeforeLeave(element) {
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        // if (!el.dataset) el.dataset = {}
-        // el.dataset.oldPaddingTop = el.style.paddingTop
-        // el.dataset.oldPaddingBottom = el.style.paddingBottom
-        // el.dataset.oldOverflow = el.style.overflow
-        element.attr.setObj({
-            dataOldPaddingTop: el.style.paddingTop,
-            dataOldPaddingBottom: el.style.paddingBottom,
-            dataOldOverflow: el.style.overflow
-        });
-        // el.style.maxHeight = `${el.scrollHeight}px`
-        // el.style.overflow = 'hidden'
-        element.style.setObj({
-            maxHeight: `${el.scrollHeight}px`,
-            overflow: 'hidden'
-        });
-    },
-    onLeave(element) {
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        if (el.scrollHeight !== 0) {
-            // el.style.maxHeight = 0
-            // el.style.paddingTop = 0
-            // el.style.paddingBottom = 0
-            element.style.setObj({
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0
-            });
-        }
-    },
-    onAfterLeave(element) {
-        reset(element);
-    },
-    onLeaveCancelled(element) {
-        reset(element);
-    }
-};

package/src/components/data/td-result/td-result.constant.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconComponentMap = exports.IconMap = void 0;
-const svgs_1 = require("@type-dom/svgs");
-const td_result_style_1 = require("./td-result.style");
-exports.IconMap = {
-    success: 'icon-success',
-    warning: 'icon-warning',
-    error: 'icon-error',
-    info: 'icon-info'
-};
-exports.IconComponentMap = {
-    [exports.IconMap.success]: new svgs_1.ElCircleCheckFilledSvg({
-        styleObj: td_result_style_1.$icon['success'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.warning]: new svgs_1.ElWarningFilledSvg({
-        styleObj: td_result_style_1.$icon['warning'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.error]: new svgs_1.ElCircleCloseFilledSvg({
-        styleObj: td_result_style_1.$icon['error'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.info]: new svgs_1.ElInfoFilledSvg({
-        styleObj: td_result_style_1.$icon['info'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    })
-};

package/src/components/data/td-statistic/td-statistic.abstract.d.ts

@@ -1,15 +0,0 @@
-import { Div, Span, TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { ITdStatisticConfig, ITdStatisticAbstract } from './td-statistic.interface';
-import { Dayjs } from 'dayjs';
-export declare abstract class TdStatisticAbstract extends UI implements ITdStatisticAbstract {
-    abstract className: 'TdStatistic' | 'TdCountDown';
-    head?: Div;
-    content: Div;
-    prefix?: TypeElement;
-    number: Span;
-    suffix?: TypeElement;
-    props: ITdStatisticConfig;
-    protected constructor(params?: ITdStatisticConfig);
-    formatValue(value: number | string | Dayjs): string;
-}