lism-css 0.8.3 → 0.9.0
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/bin/script-build-css.js +1 -1
- package/config/__prop_list.js +1 -1
- package/config/default-config.ts +9 -0
- package/config/defaults/__props-memo.js +4 -4
- package/config/defaults/{props.js → props.ts} +8 -8
- package/config/defaults/{states.js → states.ts} +14 -13
- package/config/defaults/{tokens.js → tokens.ts} +1 -1
- package/config/helper/{getSvgUrl.js → getSvgUrl.ts} +1 -3
- package/config/helper/{minifyHtml.js → minifyHtml.ts} +1 -1
- package/config/helper.test.ts +238 -0
- package/config/helper.ts +79 -0
- package/config/{index.js → index.ts} +17 -4
- package/config/tsconfig.json +18 -0
- package/config.d.ts +2 -0
- package/config.js +1 -1
- package/dist/components/Box/Box.d.ts +4 -1
- package/dist/components/Box/index.d.ts +1 -1
- package/dist/components/Center/Center.d.ts +4 -1
- package/dist/components/Center/index.d.ts +1 -1
- package/dist/components/Cluster/Cluster.d.ts +4 -1
- package/dist/components/Cluster/index.js +2 -2
- package/dist/components/Columns/Columns.d.ts +4 -1
- package/dist/components/Container/Container.d.ts +6 -4
- package/dist/components/Dummy/Dummy.d.ts +10 -8
- package/dist/components/Dummy/getContent.d.ts +13 -7
- package/dist/components/Dummy/getContent.js +7 -6
- package/dist/components/Dummy/index.js +8 -7
- package/dist/components/Flex/Flex.d.ts +4 -1
- package/dist/components/Flow/Flow.d.ts +4 -1
- package/dist/components/Flow/index.d.ts +1 -1
- package/dist/components/FluidCols/FluidCols.d.ts +4 -1
- package/dist/components/Frame/Frame.d.ts +4 -1
- package/dist/components/Grid/Grid.d.ts +4 -1
- package/dist/components/HTML/HTML.d.ts +16 -13
- package/dist/components/HTML/index.d.ts +13 -13
- package/dist/components/HTML/index.js +3 -3
- package/dist/components/HTML/index2.js +30 -29
- package/dist/components/Layer/Layer.d.ts +6 -1
- package/dist/components/Layer/Layer.test.d.ts +1 -0
- package/dist/components/Layer/getProps.d.ts +5 -1
- package/dist/components/LinkBox/LinkBox.d.ts +4 -4
- package/dist/components/LinkBox/script.d.ts +3 -0
- package/dist/components/Lism/Lism.d.ts +28 -7
- package/dist/components/Lism/Lism.stories.d.ts +667 -0
- package/dist/components/Lism/Lism.test.d.ts +1 -0
- package/dist/components/Lism/index.d.ts +1 -3
- package/dist/components/Lism/index.js +3 -3
- package/dist/components/SideMain/SideMain.d.ts +4 -1
- package/dist/components/Stack/Stack.d.ts +4 -1
- package/dist/components/SwitchCols/SwitchCols.d.ts +4 -1
- package/dist/components/Wrapper/Wrapper.d.ts +6 -4
- package/dist/components/atomic/Decorator/Decorator.d.ts +2 -1
- package/dist/components/atomic/Decorator/getProps.d.ts +10 -12
- package/dist/components/atomic/Decorator/getProps.js +10 -9
- package/dist/components/atomic/Divider/Divider.d.ts +2 -1
- package/dist/components/atomic/Divider/getProps.d.ts +2 -7
- package/dist/components/atomic/Divider/getProps.js +8 -7
- package/dist/components/atomic/Icon/Icon.d.ts +4 -3
- package/dist/components/atomic/Icon/SVG.d.ts +8 -9
- package/dist/components/atomic/Icon/getProps.d.ts +21 -12
- package/dist/components/atomic/Icon/getProps.js +31 -25
- package/dist/components/atomic/Icon/index.js +9 -8
- package/dist/components/atomic/Icon/presets.d.ts +2 -2
- package/dist/components/atomic/Media/Media.d.ts +2 -1
- package/dist/components/atomic/Media/getProps.d.ts +9 -1
- package/dist/components/atomic/Media/getProps.js +5 -6
- package/dist/components/atomic/Media/index.js +3 -3
- package/dist/components/atomic/Spacer/Spacer.d.ts +2 -1
- package/dist/components/atomic/Spacer/getProps.d.ts +2 -7
- package/dist/components/atomic/Spacer/getProps.js +8 -2
- package/dist/components/getFilterProps.d.ts +10 -1
- package/dist/components/getFilterProps.js +15 -5
- package/dist/components/getFilterProps.test.d.ts +1 -0
- package/dist/components/index.js +46 -50
- package/dist/components/setMaybeTransformStyles.d.ts +12 -1
- package/dist/components/setMaybeTransformStyles.js +4 -4
- package/dist/components/setMaybeTransformStyles.test.d.ts +1 -0
- package/dist/config/default-config.d.ts +854 -0
- package/dist/config/defaults/props.d.ts +812 -0
- package/dist/config/defaults/props.js +4 -4
- package/dist/config/defaults/states.d.ts +30 -0
- package/dist/config/defaults/states.js +12 -11
- package/dist/config/defaults/tokens.d.ts +28 -0
- package/dist/config/helper/getSvgUrl.d.ts +5 -0
- package/dist/config/helper/minifyHtml.d.ts +5 -0
- package/dist/config/helper.d.ts +21 -0
- package/dist/config/helper.js +14 -18
- package/dist/config/index.d.ts +1707 -0
- package/dist/config/index.js +15 -11
- package/dist/css/base/set.css +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/main.css +1 -1
- package/dist/css/main_no_layer.css +1 -1
- package/dist/css/modules/layout.css +1 -1
- package/dist/css/modules/state.css +1 -1
- package/dist/css/props.css +1 -1
- package/dist/css/reset.css +1 -1
- package/dist/css/utility.css +1 -1
- package/dist/lib/LismPropsData.test.d.ts +1 -0
- package/dist/lib/getBpData.d.ts +9 -1
- package/dist/lib/getBpData.js +16 -10
- package/dist/lib/getBpData.test.d.ts +1 -0
- package/dist/lib/getLayoutProps.d.ts +22 -1
- package/dist/lib/getLayoutProps.js +20 -20
- package/dist/lib/getLayoutProps.test.d.ts +1 -0
- package/dist/lib/getLismProps.d.ts +77 -2
- package/dist/lib/getLismProps.js +127 -111
- package/dist/lib/getLismProps.test.d.ts +1 -0
- package/dist/lib/getMaybeCssVar.d.ts +5 -3
- package/dist/lib/getMaybeCssVar.js +15 -15
- package/dist/lib/getMaybeCssVar.test.d.ts +1 -0
- package/dist/lib/getMaybeTokenValue.d.ts +10 -1
- package/dist/lib/getMaybeTokenValue.js +21 -21
- package/dist/lib/getMaybeTokenValue.test.d.ts +1 -0
- package/dist/lib/getUtilKey.d.ts +7 -1
- package/dist/lib/getUtilKey.js +6 -6
- package/dist/lib/getUtilKey.test.d.ts +1 -0
- package/dist/lib/helper/atts.d.ts +6 -3
- package/dist/lib/helper/atts.test.d.ts +1 -0
- package/dist/lib/helper/filterEmptyObj.d.ts +20 -1
- package/dist/lib/helper/filterEmptyObj.js +6 -5
- package/dist/lib/helper/filterEmptyObj.test.d.ts +1 -0
- package/dist/lib/helper/hasSomeKeys.d.ts +1 -1
- package/dist/lib/helper/isNumStr.d.ts +4 -1
- package/dist/lib/helper/isNumStr.test.d.ts +1 -0
- package/dist/lib/helper/objMap.d.ts +8 -1
- package/dist/lib/helper/objMap.test.d.ts +1 -0
- package/dist/lib/helper/splitWithComma.d.ts +1 -1
- package/dist/lib/helper/splitWithComma.test.d.ts +1 -0
- package/dist/lib/isPresetValue.d.ts +3 -1
- package/dist/lib/isPresetValue.js +10 -3
- package/dist/lib/isPresetValue.test.d.ts +1 -0
- package/dist/lib/isTokenValue.d.ts +1 -1
- package/dist/lib/isTokenValue.js +24 -7
- package/dist/lib/isTokenValue.test.d.ts +1 -0
- package/dist/lib/types/LayoutProps.d.ts +50 -0
- package/dist/lib/types/PropValueTypes.d.ts +83 -0
- package/dist/lib/types/PropValueTypes.spec-d.d.ts +1 -0
- package/dist/lib/types/ResponsiveProps.d.ts +50 -0
- package/dist/lib/types/ResponsiveProps.spec-d.d.ts +1 -0
- package/dist/lib/types/StateProps.d.ts +27 -0
- package/dist/lib/types/StateProps.spec-d.d.ts +1 -0
- package/dist/lib/types/utils.d.ts +79 -0
- package/dist/lib/types/utils.spec-d.d.ts +1 -0
- package/dist/lib/types.d.ts +2 -0
- package/package.json +39 -20
- package/packages/astro/Lism/index.js +0 -2
- package/packages/astro/index.js +0 -2
- package/src/scss/_auto_output.scss +2 -1
- package/src/scss/_prop-config.scss +19 -0
- package/src/scss/_with_layer.scss +7 -11
- package/src/scss/base/{_base.scss → _html.scss} +2 -3
- package/src/scss/base/index.scss +6 -6
- package/src/scss/base/set/_bp.scss +2 -2
- package/src/scss/base/set/_cqUnit.scss +31 -0
- package/src/scss/{modules/state → base/set}/_gutter.scss +1 -1
- package/src/scss/base/set/_hov.scss +4 -4
- package/src/scss/base/set/_innerRs.scss +1 -1
- package/src/scss/base/set/_mask.scss +1 -1
- package/src/scss/base/set/_plain.scss +3 -1
- package/src/scss/base/set/_transition.scss +1 -1
- package/src/scss/base/set/index.scss +2 -2
- package/src/scss/base/{set → tokens}/_shadow.scss +2 -2
- package/src/scss/base/{_typography.scss → tokens/_typography.scss} +2 -8
- package/src/scss/modules/layout/_flex.scss +4 -0
- package/src/scss/modules/layout/_flow.scss +1 -1
- package/src/scss/modules/layout/_grid.scss +4 -0
- package/src/scss/modules/state/_container.scss +2 -2
- package/src/scss/modules/state/_wrapper.scss +2 -2
- package/src/scss/modules/state/index.scss +0 -1
- package/src/scss/props/_size.scss +1 -1
- package/src/scss/reset.scss +10 -3
- package/src/scss/utility/_cbox.scss +1 -1
- package/src/scss/utility/_clipText.scss +4 -0
- package/src/scss/utility/_hidden.scss +3 -3
- package/src/scss/utility/_itemDivider.scss +1 -1
- package/src/scss/utility/_linkExpand.scss +1 -1
- package/src/scss/{base/set → utility}/_snap.scss +1 -1
- package/src/scss/utility/_trimHL.scss +5 -4
- package/src/scss/utility/index.scss +2 -0
- package/config/default-config.js +0 -9
- package/config/helper.js +0 -67
- package/dist/components/Lism/Link.d.ts +0 -1
- package/dist/components/Lism/Link.js +0 -8
- package/dist/components/Lism/Text.d.ts +0 -1
- package/dist/components/Lism/Text.js +0 -8
- package/dist/components/Lism/__Lism_with_forwardRef.d.ts +0 -5
- package/dist/components/Test/Test.d.ts +0 -9
- package/dist/components/Test/TestItem.d.ts +0 -2
- package/dist/components/Test/TestRoot.d.ts +0 -4
- package/dist/components/Test/index.d.ts +0 -7
- package/dist/components/__Core/Core.d.ts +0 -11
- package/dist/components/__Core/index.d.ts +0 -1
- package/packages/astro/Lism/Link.astro +0 -10
- package/packages/astro/Lism/Text.astro +0 -10
- package/packages/astro/Test/Test.astro +0 -14
- package/packages/astro/Test/TestItem.astro +0 -14
- package/packages/astro/Test/index.js +0 -4
- /package/src/scss/base/{_property.scss → tokens/_property.scss} +0 -0
- /package/src/scss/base/{_tokens.scss → tokens/_tokens.scss} +0 -0
|
@@ -1,7 +1,82 @@
|
|
|
1
|
+
import { StyleWithCustomProps } from './types';
|
|
2
|
+
import { StateProps } from './types/StateProps';
|
|
3
|
+
import { PropValueTypes } from './types/PropValueTypes';
|
|
4
|
+
import { LayoutType, LayoutProps } from './types/LayoutProps';
|
|
5
|
+
export { type LayoutType };
|
|
6
|
+
interface PropConfig {
|
|
7
|
+
prop?: string;
|
|
8
|
+
token?: string | null | undefined | false;
|
|
9
|
+
tokenClass?: 0 | 1 | 2;
|
|
10
|
+
presets?: Set<string> | string[] | readonly string[];
|
|
11
|
+
presetClass?: string;
|
|
12
|
+
utils?: Record<string, string>;
|
|
13
|
+
shorthands?: Record<string, string>;
|
|
14
|
+
isVar?: number;
|
|
15
|
+
bp?: 0 | 1;
|
|
16
|
+
alwaysVar?: number;
|
|
17
|
+
overwriteBaseVar?: number;
|
|
18
|
+
important?: number;
|
|
19
|
+
exUtility?: Record<string, unknown>;
|
|
20
|
+
customVar?: string;
|
|
21
|
+
setStyles?: (val: unknown) => Record<string, unknown>;
|
|
22
|
+
className?: string;
|
|
23
|
+
utilKey?: string;
|
|
24
|
+
[key: string]: unknown;
|
|
25
|
+
}
|
|
26
|
+
type StatePropDataObject = {
|
|
27
|
+
className: string;
|
|
28
|
+
preset?: string[] | readonly string[];
|
|
29
|
+
presetClass?: string;
|
|
30
|
+
customVar?: string;
|
|
31
|
+
tokenKey?: string;
|
|
32
|
+
setStyles?: (propVal: string) => Record<string, unknown>;
|
|
33
|
+
};
|
|
34
|
+
export interface LismPropsBase extends StateProps, PropValueTypes, React.HTMLAttributes<HTMLElement> {
|
|
35
|
+
forwardedRef?: React.Ref<any>;
|
|
36
|
+
class?: string;
|
|
37
|
+
className?: string;
|
|
38
|
+
lismClass?: string;
|
|
39
|
+
variant?: string;
|
|
40
|
+
style?: StyleWithCustomProps;
|
|
41
|
+
_propConfig?: Record<string, PropConfig>;
|
|
42
|
+
hov?: boolean | string | Record<string, unknown>;
|
|
43
|
+
css?: Record<string, unknown>;
|
|
44
|
+
[key: `data-${string}`]: unknown;
|
|
45
|
+
}
|
|
46
|
+
export declare class LismPropsData {
|
|
47
|
+
className: string;
|
|
48
|
+
uClasses: string[];
|
|
49
|
+
lismState: string[];
|
|
50
|
+
styles: StyleWithCustomProps;
|
|
51
|
+
attrs: Record<string, unknown>;
|
|
52
|
+
_propConfig?: Record<string, PropConfig>;
|
|
53
|
+
constructor(allProps: LismPropsBase);
|
|
54
|
+
analyzeState(statePropData: StatePropDataObject, propVal: unknown): void;
|
|
55
|
+
analyzeProps(): void;
|
|
56
|
+
analyzeLismProp(propName: string, propVal: unknown): void;
|
|
57
|
+
addUtil(util: string): void;
|
|
58
|
+
addUtils(utils: string[]): void;
|
|
59
|
+
addStyle(name: string, val: string | number): void;
|
|
60
|
+
addStyles(styles: Record<string, unknown>): void;
|
|
61
|
+
addAttrs(data: {
|
|
62
|
+
styles?: Record<string, unknown>;
|
|
63
|
+
utils?: string[];
|
|
64
|
+
}): void;
|
|
65
|
+
extractProp(propName: string): unknown;
|
|
66
|
+
extractProps(propNames: string[]): Record<string, unknown>;
|
|
67
|
+
setAttrs(propKey: string, val: unknown, propConfig?: PropConfig, bpKey?: string): void;
|
|
68
|
+
setHovProps(hoverData: boolean | string | Record<string, unknown> | null): void;
|
|
69
|
+
}
|
|
70
|
+
export interface LismProps extends LismPropsBase, LayoutProps {
|
|
71
|
+
}
|
|
72
|
+
export interface LismOutputProps extends React.HTMLAttributes<HTMLElement> {
|
|
73
|
+
style?: StyleWithCustomProps;
|
|
74
|
+
ref?: React.Ref<any>;
|
|
75
|
+
[key: `data-${string}`]: unknown;
|
|
76
|
+
}
|
|
1
77
|
/**
|
|
2
78
|
* props から styleに変換する要素 と その他 に分離する
|
|
3
79
|
*
|
|
4
80
|
* @param {Object} props
|
|
5
|
-
* @return {Object} styles & attrs
|
|
6
81
|
*/
|
|
7
|
-
export default function getLismProps(props:
|
|
82
|
+
export default function getLismProps(props: LismProps): LismOutputProps;
|
package/dist/lib/getLismProps.js
CHANGED
|
@@ -1,139 +1,144 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { STATES as
|
|
1
|
+
var V = Object.defineProperty;
|
|
2
|
+
var _ = (l, s, t) => s in l ? V(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
|
|
3
|
+
var a = (l, s, t) => _(l, typeof s != "symbol" ? s + "" : s, t);
|
|
4
|
+
import { STATES as C, PROPS as $ } from "../config/index.js";
|
|
5
5
|
import A from "./getLayoutProps.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import U from "./isPresetValue.js";
|
|
7
|
+
import x from "./isTokenValue.js";
|
|
8
8
|
import O from "./getUtilKey.js";
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
return
|
|
9
|
+
import g from "./getMaybeCssVar.js";
|
|
10
|
+
import z from "./getBpData.js";
|
|
11
|
+
import w from "./helper/atts.js";
|
|
12
|
+
import L from "./helper/isEmptyObj.js";
|
|
13
|
+
import j from "./helper/filterEmptyObj.js";
|
|
14
|
+
import k from "./helper/splitWithComma.js";
|
|
15
|
+
const T = (l) => {
|
|
16
|
+
const s = $[l];
|
|
17
|
+
return s && (s == null ? void 0 : s.token) || "";
|
|
18
18
|
};
|
|
19
|
-
class
|
|
20
|
-
constructor(
|
|
19
|
+
class H {
|
|
20
|
+
constructor(s) {
|
|
21
21
|
// propList = {};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
a(this, "className", "");
|
|
23
|
+
a(this, "uClasses", []);
|
|
24
|
+
a(this, "lismState", []);
|
|
25
|
+
a(this, "styles", {});
|
|
26
|
+
a(this, "attrs", {});
|
|
27
|
+
a(this, "_propConfig");
|
|
28
|
+
const { forwardedRef: t, class: i, className: e, lismClass: n, variant: r, style: f = {}, _propConfig: h = {}, ...y } = s;
|
|
29
|
+
this.styles = { ...f }, this._propConfig = { ...h };
|
|
30
|
+
let c = n || "";
|
|
31
|
+
if (r && n) {
|
|
32
|
+
const m = n.split(" "), o = m[0], S = `${o}--${r}`;
|
|
33
|
+
c = [o, S, ...m.slice(1)].join(" ");
|
|
33
34
|
}
|
|
34
|
-
|
|
35
|
+
L(y) || (this.attrs = { ...y }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = w(e || i, c, this.lismState, this.uClasses);
|
|
35
36
|
}
|
|
36
|
-
analyzeState(
|
|
37
|
-
const { className: i, preset:
|
|
38
|
-
|
|
37
|
+
analyzeState(s, t) {
|
|
38
|
+
const { className: i, preset: e, presetClass: n, customVar: r, tokenKey: f, setStyles: h } = s;
|
|
39
|
+
t === !0 ? this.lismState.push(i) : e && U(e, t) ? this.lismState.push(`${i} ${n}:${String(t)}`) : t && (this.lismState.push(i), f && r ? this.addStyle(r, g(t, f)) : h && typeof t == "string" && this.addStyles(h(t)));
|
|
39
40
|
}
|
|
40
41
|
// prop解析
|
|
41
42
|
analyzeProps() {
|
|
42
|
-
Object.keys(this.attrs).forEach((
|
|
43
|
-
if (Object.hasOwn(
|
|
44
|
-
const
|
|
45
|
-
typeof i == "string" ?
|
|
46
|
-
} else if (Object.hasOwn(
|
|
47
|
-
const
|
|
48
|
-
delete this.attrs[
|
|
49
|
-
} else if (
|
|
50
|
-
const
|
|
51
|
-
this.setHovProps(
|
|
52
|
-
} else if (
|
|
53
|
-
const
|
|
54
|
-
this.addStyles(
|
|
43
|
+
Object.keys(this.attrs).forEach((s) => {
|
|
44
|
+
if (Object.hasOwn(C, s)) {
|
|
45
|
+
const t = this.extractProp(s), i = C[s];
|
|
46
|
+
typeof i == "string" ? t && this.lismState.push(i) : this.analyzeState(i, t);
|
|
47
|
+
} else if (Object.hasOwn($, s)) {
|
|
48
|
+
const t = this.attrs[s];
|
|
49
|
+
delete this.attrs[s], this.analyzeLismProp(s, t);
|
|
50
|
+
} else if (s === "hov") {
|
|
51
|
+
const t = this.extractProp(s);
|
|
52
|
+
this.setHovProps(t);
|
|
53
|
+
} else if (s === "css") {
|
|
54
|
+
const t = this.extractProp("css");
|
|
55
|
+
this.addStyles(t);
|
|
55
56
|
}
|
|
56
57
|
});
|
|
57
58
|
}
|
|
58
59
|
// Lism Prop 解析
|
|
59
|
-
analyzeLismProp(
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
analyzeLismProp(s, t) {
|
|
61
|
+
var r;
|
|
62
|
+
if (t == null) return;
|
|
63
|
+
let i = $[s] || null;
|
|
62
64
|
if (i === null) return;
|
|
63
|
-
this._propConfig[
|
|
64
|
-
const { base:
|
|
65
|
-
this.setAttrs(
|
|
66
|
-
this.setAttrs(
|
|
65
|
+
(r = this._propConfig) != null && r[s] && (i = Object.assign({}, i, this._propConfig[s]));
|
|
66
|
+
const { base: e, ...n } = z(t);
|
|
67
|
+
this.setAttrs(s, e, i), Object.keys(n).forEach((f) => {
|
|
68
|
+
i && this.setAttrs(s, n[f], i, f);
|
|
67
69
|
});
|
|
68
70
|
}
|
|
69
|
-
addUtil(
|
|
70
|
-
this.uClasses.push(
|
|
71
|
+
addUtil(s) {
|
|
72
|
+
this.uClasses.push(s);
|
|
71
73
|
}
|
|
72
|
-
addUtils(
|
|
73
|
-
this.uClasses.push(...
|
|
74
|
+
addUtils(s) {
|
|
75
|
+
this.uClasses.push(...s);
|
|
74
76
|
}
|
|
75
77
|
// addState(state) {
|
|
76
78
|
// this.stateClasses.push(state);
|
|
77
79
|
// }
|
|
78
|
-
addStyle(
|
|
79
|
-
this.styles[
|
|
80
|
+
addStyle(s, t) {
|
|
81
|
+
this.styles[s] = t;
|
|
80
82
|
}
|
|
81
|
-
addStyles(
|
|
82
|
-
this.styles = { ...this.styles, ...
|
|
83
|
+
addStyles(s) {
|
|
84
|
+
this.styles = { ...this.styles, ...s };
|
|
83
85
|
}
|
|
84
|
-
addAttrs(
|
|
85
|
-
this.addStyles(
|
|
86
|
+
addAttrs(s) {
|
|
87
|
+
this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
|
|
86
88
|
}
|
|
87
|
-
extractProp(
|
|
88
|
-
|
|
89
|
-
return this.attrs[
|
|
89
|
+
extractProp(s) {
|
|
90
|
+
const t = this.attrs[s];
|
|
91
|
+
return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
|
|
90
92
|
}
|
|
91
|
-
extractProps(
|
|
92
|
-
const
|
|
93
|
-
return
|
|
94
|
-
this.attrs[i] !== void 0 && (
|
|
95
|
-
}),
|
|
93
|
+
extractProps(s) {
|
|
94
|
+
const t = {};
|
|
95
|
+
return s.forEach((i) => {
|
|
96
|
+
this.attrs[i] !== void 0 && (t[i] = this.attrs[i], delete this.attrs[i]);
|
|
97
|
+
}), t;
|
|
96
98
|
}
|
|
97
99
|
// utilクラスを追加するか、styleにセットするかの分岐処理 @base
|
|
98
100
|
// 値が null, undefined, '', false の時はスキップ
|
|
99
|
-
setAttrs(
|
|
100
|
-
if (
|
|
101
|
-
let
|
|
102
|
-
if (
|
|
103
|
-
this.addUtil(`${
|
|
101
|
+
setAttrs(s, t, i = {}, e = "") {
|
|
102
|
+
if (t == null || t === "" || t === !1) return;
|
|
103
|
+
let n = `--${s}`, r = `-${String(i.utilKey || s)}`;
|
|
104
|
+
if (e && (n = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
|
|
105
|
+
this.addUtil(`${r}:${t.replace(":", "")}`);
|
|
104
106
|
return;
|
|
105
107
|
}
|
|
106
|
-
if (!
|
|
107
|
-
const { presets:
|
|
108
|
-
if (
|
|
109
|
-
|
|
108
|
+
if (!e) {
|
|
109
|
+
const { presets: S, tokenClass: E, utils: P, shorthands: b } = i;
|
|
110
|
+
if (S && U(S, t)) {
|
|
111
|
+
const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
|
|
112
|
+
u && this.addUtil(`${r}:${u}`);
|
|
110
113
|
return;
|
|
111
114
|
}
|
|
112
|
-
if (
|
|
113
|
-
|
|
115
|
+
if (E && i.token && x(i.token, t)) {
|
|
116
|
+
const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
|
|
117
|
+
u && this.addUtil(`${r}:${u}`);
|
|
114
118
|
return;
|
|
115
119
|
}
|
|
116
|
-
let
|
|
117
|
-
if (P && (
|
|
118
|
-
this.addUtil(`${
|
|
120
|
+
let d = "";
|
|
121
|
+
if (P && typeof t == "string" && (d = O(P, t)), !d && b && typeof t == "string" && (d = O(b, t, !0)), d) {
|
|
122
|
+
this.addUtil(`${r}:${d}`);
|
|
119
123
|
return;
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
|
-
if (
|
|
123
|
-
this.addUtil(
|
|
126
|
+
if (t === !0 || t === "-") {
|
|
127
|
+
this.addUtil(r);
|
|
124
128
|
return;
|
|
125
129
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
+
const { prop: f, isVar: h, alwaysVar: y, token: c, bp: m } = i;
|
|
131
|
+
let o;
|
|
132
|
+
if (c && (typeof t == "string" || typeof t == "number") ? o = g(t, c) : typeof t == "string" || typeof t == "number" ? o = t : o = JSON.stringify(t), !e) {
|
|
133
|
+
if (h) {
|
|
134
|
+
this.addStyle(`--${s}`, o);
|
|
130
135
|
return;
|
|
131
|
-
} else if (!
|
|
132
|
-
this.addStyle(
|
|
136
|
+
} else if (!m && !y) {
|
|
137
|
+
this.addStyle(f, o);
|
|
133
138
|
return;
|
|
134
139
|
}
|
|
135
140
|
}
|
|
136
|
-
this.addUtil(
|
|
141
|
+
this.addUtil(r), this.addStyle(n, o);
|
|
137
142
|
}
|
|
138
143
|
// setPassProps(passVars) {
|
|
139
144
|
// let dataList = [];
|
|
@@ -148,29 +153,40 @@ class L {
|
|
|
148
153
|
// this.addStyle(`--pass_${propName}`, value);
|
|
149
154
|
// });
|
|
150
155
|
// }
|
|
151
|
-
setHovProps(
|
|
152
|
-
|
|
153
|
-
this.addUtil(`-hov:${
|
|
154
|
-
}) : typeof
|
|
155
|
-
|
|
156
|
-
i == null || i === "" || i === !1
|
|
157
|
-
|
|
158
|
-
|
|
156
|
+
setHovProps(s) {
|
|
157
|
+
s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
|
|
158
|
+
this.addUtil(`-hov:${t}`);
|
|
159
|
+
}) : typeof s == "object" && Object.keys(s).forEach((t) => {
|
|
160
|
+
const i = s[t];
|
|
161
|
+
if (!(i == null || i === "" || i === !1)) {
|
|
162
|
+
if (i === "-" || i === !0)
|
|
163
|
+
this.addUtil(`-hov:${t}`);
|
|
164
|
+
else if (t === "class")
|
|
165
|
+
k(i).forEach((e) => {
|
|
166
|
+
this.addUtil(`-hov:${e}`);
|
|
167
|
+
});
|
|
168
|
+
else if (typeof i == "string" || typeof i == "number") {
|
|
169
|
+
const e = g(i, T(t));
|
|
170
|
+
this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
159
173
|
}));
|
|
160
174
|
}
|
|
161
175
|
}
|
|
162
|
-
function
|
|
163
|
-
if (
|
|
176
|
+
function Y(l) {
|
|
177
|
+
if (Object.keys(l).length === 0)
|
|
164
178
|
return {};
|
|
165
|
-
const { layout:
|
|
166
|
-
return
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
179
|
+
const { layout: s, ...t } = l, i = new H(A(s, t));
|
|
180
|
+
return {
|
|
181
|
+
...j({
|
|
182
|
+
className: i.className,
|
|
183
|
+
style: j(i.styles)
|
|
184
|
+
}),
|
|
170
185
|
...i.attrs
|
|
171
|
-
//
|
|
172
|
-
}
|
|
186
|
+
// data-* などHTMLの標準属性はそのまま渡す
|
|
187
|
+
};
|
|
173
188
|
}
|
|
174
189
|
export {
|
|
175
|
-
|
|
190
|
+
H as LismPropsData,
|
|
191
|
+
Y as default
|
|
176
192
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export function
|
|
3
|
-
export function
|
|
1
|
+
type CssValue = string | number;
|
|
2
|
+
export default function getMaybeCssVar(value: CssValue, tokenKey: string | null | undefined | false): string;
|
|
3
|
+
export declare function getMaybeSpaceVar(value: CssValue): string;
|
|
4
|
+
export declare function getMaybeColorVar(value: CssValue): string;
|
|
5
|
+
export {};
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { TOKENS as
|
|
1
|
+
import { TOKENS as o } from "../config/index.js";
|
|
2
2
|
import f from "./helper/isNumStr.js";
|
|
3
3
|
import n from "./getMaybeTokenValue.js";
|
|
4
|
-
function b(r,
|
|
5
|
-
if (!
|
|
6
|
-
switch (
|
|
4
|
+
function b(r, t) {
|
|
5
|
+
if (!t) return String(r);
|
|
6
|
+
switch (t) {
|
|
7
7
|
case "space":
|
|
8
8
|
return s(r);
|
|
9
9
|
case "color":
|
|
10
10
|
return p(r);
|
|
11
11
|
case "bxsh":
|
|
12
|
-
return r === "0" || r === 0 ? "none" : n(
|
|
12
|
+
return r === "0" || r === 0 ? "none" : n(t, r, o);
|
|
13
13
|
default:
|
|
14
|
-
return n(
|
|
14
|
+
return n(t, r, o);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
function s(r) {
|
|
18
|
-
return r === 0 || r === "0" ? "0" : typeof r == "number" || f(r) ? `var(--s${r})` : typeof r == "string" && r.includes(" ") && !r.includes("calc(") && !r.includes("var(") && !r.includes(",") ? r.split(" ").map((i) => s(i)).join(" ") : r;
|
|
18
|
+
return r === 0 || r === "0" ? "0" : typeof r == "number" || f(r) ? `var(--s${r})` : typeof r == "string" && r.includes(" ") && !r.includes("calc(") && !r.includes("var(") && !r.includes(",") ? r.split(" ").map((i) => s(i)).join(" ") : String(r);
|
|
19
19
|
}
|
|
20
20
|
function p(r) {
|
|
21
21
|
if (typeof r == "string" && r.endsWith("%")) {
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
24
|
-
const [i, c, e] =
|
|
25
|
-
return `color-mix(in srgb, ${n("color", i,
|
|
26
|
-
} else if (
|
|
27
|
-
const [i, c] =
|
|
28
|
-
return `color-mix(in srgb, ${n("color", i,
|
|
22
|
+
const t = r.split(":");
|
|
23
|
+
if (t.length === 3) {
|
|
24
|
+
const [i, c, e] = t;
|
|
25
|
+
return `color-mix(in srgb, ${n("color", i, o)} ${e}, ${n("color", c, o)})`;
|
|
26
|
+
} else if (t.length === 2) {
|
|
27
|
+
const [i, c] = t;
|
|
28
|
+
return `color-mix(in srgb, ${n("color", i, o)} ${c}, transparent)`;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
return n("color", r,
|
|
31
|
+
return n("color", r, o);
|
|
32
32
|
}
|
|
33
33
|
export {
|
|
34
34
|
b as default,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
type TokenValue = string | number;
|
|
2
|
+
type TokenConfigValues = Set<string> | string[] | readonly string[];
|
|
3
|
+
type TokenConfigValuesObj = {
|
|
4
|
+
pre?: string;
|
|
5
|
+
values?: TokenConfigValues;
|
|
6
|
+
};
|
|
7
|
+
type TokenConfigProp = TokenConfigValues | TokenConfigValuesObj;
|
|
8
|
+
type TokensConfig = Record<string, TokenConfigProp>;
|
|
1
9
|
/**
|
|
2
10
|
* Note: コンポーネント使用時だけでなく、CSSビルド時にも呼び出される。そのため、TOKENSを引数で受け取る必要がある。
|
|
3
11
|
*/
|
|
4
|
-
export default function getMaybeTokenValue(tokenKey:
|
|
12
|
+
export default function getMaybeTokenValue(tokenKey: string, value: TokenValue, TOKENS: TokensConfig): string;
|
|
13
|
+
export {};
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
function
|
|
2
|
-
if (
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return i === r && (i = c("palette", r, n)), i;
|
|
1
|
+
function a(n, t, f) {
|
|
2
|
+
if (n === "color") {
|
|
3
|
+
let e = a("c", t, f);
|
|
4
|
+
return e === String(t) && (e = a("palette", t, f)), e;
|
|
6
5
|
}
|
|
7
|
-
const
|
|
8
|
-
if (!
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
const i = f[n];
|
|
7
|
+
if (!i) return String(t);
|
|
8
|
+
let r = typeof t == "number" ? `${t}` : t;
|
|
9
|
+
if (i instanceof Set) {
|
|
10
|
+
if (i.has(r))
|
|
11
|
+
return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
|
|
12
|
+
} else if (Array.isArray(i)) {
|
|
13
|
+
if (i.includes(r))
|
|
14
|
+
return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${n}--${r})`;
|
|
15
|
+
} else if ("pre" in i || "values" in i) {
|
|
16
|
+
const { pre: e = "", values: s = [] } = i;
|
|
17
|
+
if (s instanceof Set && s.has(r))
|
|
18
|
+
return `var(${e}${r})`;
|
|
19
|
+
if (Array.isArray(s) && s.includes(r))
|
|
20
|
+
return `var(${e}${r})`;
|
|
21
21
|
}
|
|
22
|
-
return
|
|
22
|
+
return String(t);
|
|
23
23
|
}
|
|
24
24
|
export {
|
|
25
|
-
|
|
25
|
+
a as default
|
|
26
26
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/lib/getUtilKey.d.ts
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* ユーティリティ化できるキーワードのチェック。
|
|
3
|
+
*
|
|
4
|
+
* utils: クラス自体が省略名を使って用意される { val: value } → -prop:val{property: value}
|
|
5
|
+
* shorthand: クラスはpresetsで出力されてて、コンポーネント側でただ呼び出すための省略名リスト {val: value} → -prop:value{property: value}
|
|
6
|
+
*/
|
|
7
|
+
export default function getUtilKey(utils: Record<string, unknown> | undefined, value: string, isShorthand?: boolean): string;
|
package/dist/lib/getUtilKey.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
function o(e, r,
|
|
1
|
+
function o(e, r, n = !1) {
|
|
2
2
|
if (e == null || typeof e != "object") return "";
|
|
3
3
|
if (r in e)
|
|
4
|
-
return
|
|
5
|
-
if (
|
|
6
|
-
for (const [
|
|
7
|
-
if (
|
|
8
|
-
return
|
|
4
|
+
return n ? String(e[r]) : r;
|
|
5
|
+
if (n) return "";
|
|
6
|
+
for (const [t, f] of Object.entries(e))
|
|
7
|
+
if (f === r)
|
|
8
|
+
return t;
|
|
9
9
|
return "";
|
|
10
10
|
}
|
|
11
11
|
export {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
+
type Primitive = string | number | boolean | null | undefined;
|
|
2
|
+
type AttsValue = Primitive | AttsValue[] | Set<string | number> | Record<string, Primitive>;
|
|
1
3
|
/**
|
|
2
4
|
* 配列と文字列だけを受け取るようにしたclassnamesやclsxの代替関数。
|
|
3
5
|
* 従来の使い方でObjectを渡したいようなケースが出てきた時は、以下のように書き換えて使える。
|
|
4
|
-
*
|
|
6
|
+
* atts({'foo': isFoo, 'bar': isBar });
|
|
5
7
|
* ↓
|
|
6
|
-
*
|
|
8
|
+
* atts(isFoo && 'foo', isBar && 'bar');
|
|
7
9
|
*
|
|
8
10
|
* arguments&whileループとの差はなかった(結果が誤差の範囲 or その時によって反転する)
|
|
9
11
|
* flat()やfilter()を使うとシンプルになるが、処理速度が数倍になる。
|
|
10
12
|
*/
|
|
11
|
-
export default function atts(...args:
|
|
13
|
+
export default function atts(...args: AttsValue[]): string;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* オブジェクトから空の値を持つプロパティを除外した新しいオブジェクトを返す(非破壊的)
|
|
3
|
+
*
|
|
4
|
+
* 以下の値を持つプロパティが除外されます:
|
|
5
|
+
* - 空文字列 ('')
|
|
6
|
+
* - null
|
|
7
|
+
* - undefined
|
|
8
|
+
* - 空のオブジェクト ({})
|
|
9
|
+
* - 空の配列 ([])
|
|
10
|
+
*
|
|
11
|
+
* 注意:0、false などの falsy な値は保持されます
|
|
12
|
+
*
|
|
13
|
+
* @param {Object} obj - フィルタリング対象のオブジェクト
|
|
14
|
+
* @returns {Object} 空の値を除外した新しいオブジェクト
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* filterEmptyObj({ a: 'foo', b: '', c: null, d: 0 })
|
|
18
|
+
* // => { a: 'foo', d: 0 }
|
|
19
|
+
*/
|
|
20
|
+
export default function filterEmptyObj(obj: Record<string, unknown>): Record<string, unknown>;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import i from "./isEmptyObj.js";
|
|
2
|
+
function r(t) {
|
|
3
|
+
const e = {};
|
|
4
|
+
for (const n in t)
|
|
5
|
+
t[n] === "" || t[n] === null || t[n] === void 0 || typeof t[n] == "object" && i(t[n]) || (e[n] = t[n]);
|
|
5
6
|
return e;
|
|
6
7
|
}
|
|
7
8
|
export {
|
|
8
|
-
|
|
9
|
+
r as default
|
|
9
10
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|