@histoire/controls 0.13.1 → 0.13.2
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/.histoire/dist/__sandbox.html +16 -0
- package/.histoire/dist/assets/BaseEmpty.d30f3079.js +11 -0
- package/.histoire/dist/assets/HomeView.8e044be6.js +24 -0
- package/.histoire/dist/assets/HstCheckbox.story.3d04d85b.js +144 -0
- package/.histoire/dist/assets/HstColorShades.story.68cf74d1.js +532 -0
- package/.histoire/dist/assets/HstCopyIcon.e40e725e.js +51 -0
- package/.histoire/dist/assets/HstNumber.story.1e1964ff.js +160 -0
- package/.histoire/dist/assets/HstSelect.story.04860383.js +277 -0
- package/.histoire/dist/assets/HstText.story.c915d831.js +137 -0
- package/.histoire/dist/assets/HstTextarea.story.802b9c26.js +105 -0
- package/.histoire/dist/assets/HstTokenGrid.story.025819d6.js +148 -0
- package/.histoire/dist/assets/HstTokenList.story.d3aa6575.js +176 -0
- package/.histoire/dist/assets/HstWrapper.246b6982.js +56 -0
- package/.histoire/dist/assets/SearchPane.daa2675c.js +426 -0
- package/.histoire/dist/assets/StoryView.2f64dad1.js +2260 -0
- package/.histoire/dist/assets/bundle-main.784e5bf7.js +1156 -0
- package/.histoire/dist/assets/bundle-sandbox.5e153933.js +84 -0
- package/.histoire/dist/assets/const.268165fd.js +658 -0
- package/.histoire/dist/assets/global-components.6736b2a9.js +5722 -0
- package/.histoire/dist/assets/search-docs-data.b9a75539.js +6 -0
- package/.histoire/dist/assets/style.04507241.css +2504 -0
- package/.histoire/dist/assets/vendor.2833ae3d.js +28970 -0
- package/{histoire-dist/assets/histoire.8af7bd1f.svg → .histoire/dist/histoire.svg} +0 -0
- package/.histoire/dist/index.html +16 -0
- package/package.json +3 -3
- package/histoire-dist/__sandbox.html +0 -15
- package/histoire-dist/assets/BaseEmpty.a84c14c8.js +0 -1
- package/histoire-dist/assets/HomeView.f524bd4b.js +0 -1
- package/histoire-dist/assets/HstCheckbox.story.9f622545.js +0 -1
- package/histoire-dist/assets/HstInput.story.945401ce.js +0 -1
- package/histoire-dist/assets/SearchModal.76c035f2.js +0 -1
- package/histoire-dist/assets/StoryView.e4c41518.js +0 -15
- package/histoire-dist/assets/global-components.84d0ab22.js +0 -1
- package/histoire-dist/assets/histoire-text-dark.a529813a.svg +0 -89
- package/histoire-dist/assets/histoire-text.1d4474b5.svg +0 -89
- package/histoire-dist/assets/index.58f51dd0.js +0 -1
- package/histoire-dist/assets/preview-settings.a634d101.js +0 -1
- package/histoire-dist/assets/sandbox.2c60450a.js +0 -1
- package/histoire-dist/assets/style.7657d2ac.css +0 -1
- package/histoire-dist/assets/vendor.70a554f6.js +0 -9
- package/histoire-dist/index.html +0 -15
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Histoire controls</title>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
7
|
+
<meta name="description" content="">
|
|
8
|
+
<link rel="stylesheet" href="/assets/style.04507241.css">
|
|
9
|
+
<link rel="icon" type="image/svg+xml" href="/histoire.svg"/>
|
|
10
|
+
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="app"></div>
|
|
14
|
+
<script type="module" src="/assets/bundle-sandbox.5e153933.js"></script>
|
|
15
|
+
</body>
|
|
16
|
+
</html>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { a as openBlock, b as createElementBlock, f as renderSlot } from "./vendor.2833ae3d.js";
|
|
2
|
+
import { _ as _export_sfc } from "./bundle-main.784e5bf7.js";
|
|
3
|
+
const _sfc_main = {};
|
|
4
|
+
const _hoisted_1 = { class: "htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
|
|
5
|
+
function _sfc_render(_ctx, _cache) {
|
|
6
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
7
|
+
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
8
|
+
]);
|
|
9
|
+
}
|
|
10
|
+
var BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-552cc113"]]);
|
|
11
|
+
export { BaseEmpty as B };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { d as defineComponent, c as computed, a as openBlock, b as createElementBlock, e as createBaseVNode, i as unref } from "./vendor.2833ae3d.js";
|
|
2
|
+
import { h as histoireConfig, c as customLogos } from "./global-components.6736b2a9.js";
|
|
3
|
+
var HistoireLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjU7ZmlsbDojMzRkMzk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxLjAwMzc1IgogICAgICAgaWQ9InJlY3QxMzcyIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iLTI2LjU2NTA2MyIKICAgICAgIHk9IjEzNC43NTA3OSIKICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0yMy44MjEyNjIpIgogICAgICAgcnk9IjgiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzM0ZDM5OTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS4wMDM3NSIKICAgICAgIGlkPSJyZWN0ODUwIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iNzcuNTcxODM4IgogICAgICAgeT0iNzIuODA4NzA4IgogICAgICAgcnk9IjgiCiAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNC41NzQ0NTM0KSIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5ZXIzIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTctMyIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNiNGZhZTI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiNGZhZTI7c3Ryb2tlLXdpZHRoOjguMzQ5MjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMzU5LjM4OTQ3LDM1NS45NTEzNCAzMjAuNzI5MzUsMTc2LjUyOTQyIDIzOC4zNDYxMywyMzguOTQxMTggWiBNIDI3My42NDEyNCwyNzMuMDY2MDggMTUyLjU5Nzg4LDE1Ni4wNTU5MSAxOTEuMjU4MDQsMzM1LjQ3Nzg2IFoiIC8+CiAgPC9nPgogIDxnCiAgICAgaWQ9ImxheWVyMiIKICAgICBzdHlsZT0iZGlzcGxheTpub25lIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTciCiAgICAgICBzdHlsZT0iZmlsbDojYjRmYWUyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYjRmYWUyO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDI5NiwxMDMuOTgyNDIgLTEzNS41MzEyNSwxNzcuOTY2OCBoIDg4LjcwMTE3IHogTSAyNjIuODMwMDgsMjMwLjA1MDc4IDIxNiw0MDguMDE3NTggMzUxLjUzMTI1LDIzMC4wNTA3OCBaIgogICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTQuMTU2NTUzLDI1NiwyNTYuMDA2OTEpIiAvPgogIDwvZz4KPC9zdmc+Cg==";
|
|
4
|
+
const _hoisted_1 = { class: "htw-flex htw-items-center htw-justify-center htw-h-full" };
|
|
5
|
+
const _hoisted_2 = ["src"];
|
|
6
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
+
name: "HomeView",
|
|
8
|
+
setup(__props) {
|
|
9
|
+
const logoUrl = computed(() => {
|
|
10
|
+
var _a, _b;
|
|
11
|
+
return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo;
|
|
12
|
+
});
|
|
13
|
+
return (_ctx, _cache) => {
|
|
14
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
15
|
+
createBaseVNode("img", {
|
|
16
|
+
src: unref(logoUrl),
|
|
17
|
+
alt: "Logo",
|
|
18
|
+
class: "htw-w-64 htw-h-64 htw-opacity-25"
|
|
19
|
+
}, null, 8, _hoisted_2)
|
|
20
|
+
]);
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
export { _sfc_main as default };
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { ax as _export_sfc, d as defineComponent, r as ref, c as computed, w as watch, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, e as createBaseVNode, n as normalizeClass, b as createElementBlock, i as unref, v as withKeys, g as withModifiers, q as resolveComponent, l as createVNode } from "./vendor.2833ae3d.js";
|
|
21
|
+
import { H as HstWrapper } from "./HstWrapper.246b6982.js";
|
|
22
|
+
const _hoisted_1 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
|
|
23
|
+
const _hoisted_2 = {
|
|
24
|
+
width: "16",
|
|
25
|
+
height: "16",
|
|
26
|
+
viewBox: "0 0 24 24",
|
|
27
|
+
class: "htw-relative htw-z-10"
|
|
28
|
+
};
|
|
29
|
+
const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset"];
|
|
30
|
+
const __default__ = {
|
|
31
|
+
name: "HstCheckbox"
|
|
32
|
+
};
|
|
33
|
+
const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
|
|
34
|
+
props: {
|
|
35
|
+
modelValue: { type: Boolean, required: true },
|
|
36
|
+
title: { type: String, required: false }
|
|
37
|
+
},
|
|
38
|
+
emits: {
|
|
39
|
+
"update:modelValue": (newValue) => true
|
|
40
|
+
},
|
|
41
|
+
setup(__props, { emit }) {
|
|
42
|
+
const props = __props;
|
|
43
|
+
function toggle() {
|
|
44
|
+
emit("update:modelValue", !props.modelValue);
|
|
45
|
+
animationEnabled.value = true;
|
|
46
|
+
}
|
|
47
|
+
const path = ref();
|
|
48
|
+
const dasharray = ref(0);
|
|
49
|
+
const progress = computed(() => props.modelValue ? 1 : 0);
|
|
50
|
+
const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
|
|
51
|
+
const animationEnabled = ref(false);
|
|
52
|
+
watch(path, (value) => {
|
|
53
|
+
var _a, _b, _c;
|
|
54
|
+
dasharray.value = (_c = (_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) != null ? _c : 21.21;
|
|
55
|
+
});
|
|
56
|
+
return (_ctx, _cache) => {
|
|
57
|
+
return openBlock(), createBlock(HstWrapper, {
|
|
58
|
+
role: "checkbox",
|
|
59
|
+
tabindex: "0",
|
|
60
|
+
class: "htw-cursor-pointer htw-items-center",
|
|
61
|
+
title: __props.title,
|
|
62
|
+
onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
|
|
63
|
+
onKeydown: [
|
|
64
|
+
_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])),
|
|
65
|
+
_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
|
|
66
|
+
]
|
|
67
|
+
}, {
|
|
68
|
+
actions: withCtx(() => [
|
|
69
|
+
renderSlot(_ctx.$slots, "actions")
|
|
70
|
+
]),
|
|
71
|
+
default: withCtx(() => [
|
|
72
|
+
createBaseVNode("div", _hoisted_1, [
|
|
73
|
+
createBaseVNode("div", {
|
|
74
|
+
class: normalizeClass(["htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
|
|
75
|
+
__props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
|
|
76
|
+
]])
|
|
77
|
+
}, null, 2),
|
|
78
|
+
(openBlock(), createElementBlock("svg", _hoisted_2, [
|
|
79
|
+
createBaseVNode("path", {
|
|
80
|
+
ref_key: "path",
|
|
81
|
+
ref: path,
|
|
82
|
+
d: "m 4 12 l 5 5 l 10 -10",
|
|
83
|
+
fill: "none",
|
|
84
|
+
class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
|
|
85
|
+
animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
|
|
86
|
+
{
|
|
87
|
+
"htw-delay-150": __props.modelValue
|
|
88
|
+
}
|
|
89
|
+
]]),
|
|
90
|
+
"stroke-dasharray": dasharray.value,
|
|
91
|
+
"stroke-dashoffset": unref(dashoffset)
|
|
92
|
+
}, null, 10, _hoisted_3)
|
|
93
|
+
]))
|
|
94
|
+
])
|
|
95
|
+
]),
|
|
96
|
+
_: 3
|
|
97
|
+
}, 8, ["title"]);
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
}));
|
|
101
|
+
_sfc_main$1.__file = "src/components/checkbox/HstCheckbox.vue";
|
|
102
|
+
var HstCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue"]]);
|
|
103
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
104
|
+
name: "HstCheckbox.story",
|
|
105
|
+
setup(__props) {
|
|
106
|
+
function initState() {
|
|
107
|
+
return {
|
|
108
|
+
checked: false
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
return (_ctx, _cache) => {
|
|
112
|
+
const _component_Variant = resolveComponent("Variant");
|
|
113
|
+
const _component_Story = resolveComponent("Story");
|
|
114
|
+
return openBlock(), createBlock(_component_Story, { title: "HstCheckbox" }, {
|
|
115
|
+
default: withCtx(() => [
|
|
116
|
+
createVNode(_component_Variant, {
|
|
117
|
+
title: "playground",
|
|
118
|
+
"init-state": initState
|
|
119
|
+
}, {
|
|
120
|
+
default: withCtx(({ state }) => [
|
|
121
|
+
createVNode(HstCheckbox, {
|
|
122
|
+
modelValue: state.checked,
|
|
123
|
+
"onUpdate:modelValue": ($event) => state.checked = $event,
|
|
124
|
+
title: "Label"
|
|
125
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue"])
|
|
126
|
+
]),
|
|
127
|
+
controls: withCtx(({ state }) => [
|
|
128
|
+
createVNode(HstCheckbox, {
|
|
129
|
+
modelValue: state.checked,
|
|
130
|
+
"onUpdate:modelValue": ($event) => state.checked = $event,
|
|
131
|
+
title: "Label"
|
|
132
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue"])
|
|
133
|
+
]),
|
|
134
|
+
_: 1
|
|
135
|
+
})
|
|
136
|
+
]),
|
|
137
|
+
_: 1
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
_sfc_main.__file = "src/components/checkbox/HstCheckbox.story.vue";
|
|
143
|
+
var HstCheckbox_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue"]]);
|
|
144
|
+
export { HstCheckbox_story as default };
|