@zuzjs/ui 0.4.3 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comps/cover.js +1 -1
- package/dist/comps/select.js +2 -2
- package/dist/comps/sheet.js +9 -0
- package/dist/funs/index.d.ts +5 -0
- package/dist/funs/index.js +15 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles.css +1 -1
- package/package.json +3 -3
package/dist/comps/cover.js
CHANGED
|
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import With from "./base";
|
|
4
4
|
import Spinner from "./spinner";
|
|
5
5
|
const Cover = forwardRef((props, ref) => {
|
|
6
|
-
const { spinner, message, color, as, ...rest } = props;
|
|
6
|
+
const { spinner, message, color, as, when, ...rest } = props;
|
|
7
7
|
if (`when` in props && props.when == false) {
|
|
8
8
|
return null;
|
|
9
9
|
}
|
package/dist/comps/select.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
|
4
4
|
import With from "./base";
|
|
5
5
|
import { uuid } from "../funs";
|
|
@@ -19,7 +19,7 @@ const Select = forwardRef((props, ref) => {
|
|
|
19
19
|
setChoosing(false);
|
|
20
20
|
});
|
|
21
21
|
}, []);
|
|
22
|
-
return _jsxs(
|
|
22
|
+
return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: true, id: _id, className: `zuz-select-options abs flex cols`, style: {
|
|
23
23
|
pointerEvents: choosing ? `auto` : `none`,
|
|
24
24
|
}, animate: {
|
|
25
25
|
from: { height: 0, opacity: 0 },
|
package/dist/comps/sheet.js
CHANGED
|
@@ -41,6 +41,15 @@ const Sheet = forwardRef((props, ref) => {
|
|
|
41
41
|
setVisible(true);
|
|
42
42
|
setTimeout(() => onShow ? onShow() : () => { }, 1000);
|
|
43
43
|
},
|
|
44
|
+
error(message, duration) {
|
|
45
|
+
this.show(message, duration, SHEET.Error);
|
|
46
|
+
},
|
|
47
|
+
warn(message, duration) {
|
|
48
|
+
this.show(message, duration, SHEET.Warn);
|
|
49
|
+
},
|
|
50
|
+
success(message, duration) {
|
|
51
|
+
this.show(message, duration, SHEET.Success);
|
|
52
|
+
},
|
|
44
53
|
show(message, duration, type) {
|
|
45
54
|
if (_sheetTimeout) {
|
|
46
55
|
clearTimeout(_sheetTimeout);
|
package/dist/funs/index.d.ts
CHANGED
|
@@ -32,3 +32,8 @@ export declare const useDevice: () => {
|
|
|
32
32
|
isTablet: boolean;
|
|
33
33
|
isDesktop: boolean;
|
|
34
34
|
};
|
|
35
|
+
export declare const withTime: (fun: (...args: any[]) => any) => {
|
|
36
|
+
result: any;
|
|
37
|
+
executionTime: number;
|
|
38
|
+
};
|
|
39
|
+
export declare const time: (stamp?: number, format?: string) => string;
|
package/dist/funs/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import { colorNames } from "./colors.js";
|
|
|
5
5
|
import Hashids from "hashids";
|
|
6
6
|
import { nanoid } from "nanoid";
|
|
7
7
|
import Cookies from "js-cookie";
|
|
8
|
+
import moment from "moment";
|
|
8
9
|
let __css;
|
|
9
10
|
export const __SALT = `zuzjs-ui`;
|
|
10
11
|
export const FIELNAME_KEY = `__FILENAME__`;
|
|
@@ -163,3 +164,17 @@ export const useDevice = () => {
|
|
|
163
164
|
isDesktop: !mobile && !tablet
|
|
164
165
|
};
|
|
165
166
|
};
|
|
167
|
+
export const withTime = (fun) => {
|
|
168
|
+
const start = new Date().getTime();
|
|
169
|
+
const result = fun();
|
|
170
|
+
const end = new Date().getTime();
|
|
171
|
+
return {
|
|
172
|
+
result,
|
|
173
|
+
executionTime: end - start
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
export const time = (stamp, format) => {
|
|
177
|
+
return stamp ?
|
|
178
|
+
moment.unix(+stamp / 1000).format(format || `YYYY-MM-DD HH:mm:ss`)
|
|
179
|
+
: moment().format(format || `YYYY-MM-DD HH:mm:ss`);
|
|
180
|
+
};
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,*::before,*::after{box-sizing:border-box}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[popover]{margin:0;padding:0;border:0}:root{--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--dialog-bg: #fff;--dialog-radius: 10px;--dialog-padding: 10px;--dialog-title-font-size: 16px;--dialog-closer-font-size: 36px;--dialog-closer-hover: rgba(255,255,255,0.2)}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background
|
|
1
|
+
*,*::before,*::after{box-sizing:border-box}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[popover]{margin:0;padding:0;border:0}:root{--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--dialog-bg: #fff;--dialog-radius: 10px;--dialog-padding: 10px;--dialog-title-font-size: 16px;--dialog-closer-font-size: 36px;--dialog-closer-hover: rgba(255,255,255,0.2);--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-dialog{background:var(--dialog-bg);border-radius:var(--dialog-radius);padding:var(--dialog-padding);overflow:hidden}.zuz-sheet .zuz-sheet-head{margin-bottom:20px}.zuz-sheet .zuz-sheet-head .zuz-sheet-title{flex:1;font-size:var(--dialog-title-font-size);opacity:.5;text-align:center;padding:0px 45px}.zuz-sheet .zuz-sheet-head .zuz-sheet-dot{flex:1}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--dialog-closer-font-size);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:.35;top:50%;right:0px;transform:translateY(-50%)}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer:hover{background:var(--dialog-closer-hover);opacity:1}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}@position-try --zuz-select-bottom{top:anchor(bottom);bottom:unset;margin-block:calc(var(--zuz-select-height) + var(--zuz-select-gap)) 0}.zuz-selectk-wrap{width:100%}.zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;anchor-name:--zuz-select-anchor}.zuz-select:hover{background:var(--select-hover)}.zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-options{--zuz-select-height: 30px;--zuz-select-gap: 0px;position-anchor:--zuz-select-anchor;position-try:most-height --zuz-select-bottom;width:100%;max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zuzjs/ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.4",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"react",
|
|
6
6
|
"zuz",
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"exports": {
|
|
20
20
|
".": "./dist/index.js",
|
|
21
|
-
"./styles": "./dist/styles.css"
|
|
22
|
-
"./funs": "./dist/funs/index.js"
|
|
21
|
+
"./styles": "./dist/styles.css"
|
|
23
22
|
},
|
|
24
23
|
"files": [
|
|
25
24
|
"dist"
|
|
@@ -39,6 +38,7 @@
|
|
|
39
38
|
"hashids": "^2.3.0",
|
|
40
39
|
"js-cookie": "^3.0.5",
|
|
41
40
|
"md5": "^2.3.0",
|
|
41
|
+
"moment": "^2.30.1",
|
|
42
42
|
"nanoid": "^5.0.7",
|
|
43
43
|
"picocolors": "^1.0.1",
|
|
44
44
|
"react": "19.0.0-beta-26f2496093-20240514",
|