@histoire/controls 0.9.6 → 0.10.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.
Files changed (26) hide show
  1. package/package.json +2 -2
  2. package/.histoire/dist/__sandbox.html +0 -16
  3. package/.histoire/dist/assets/BaseEmpty.c5ebb434.js +0 -11
  4. package/.histoire/dist/assets/HomeView.2d2d0dfe.js +0 -24
  5. package/.histoire/dist/assets/HstCheckbox.story.ccd10161.js +0 -151
  6. package/.histoire/dist/assets/HstColorShades.story.d71deb80.js +0 -540
  7. package/.histoire/dist/assets/HstCopyIcon.ef403c78.js +0 -55
  8. package/.histoire/dist/assets/HstNumber.story.1e0e7b71.js +0 -165
  9. package/.histoire/dist/assets/HstSelect.story.8a2b4741.js +0 -290
  10. package/.histoire/dist/assets/HstSlider.story.4155f6ba.js +0 -153
  11. package/.histoire/dist/assets/HstText.story.43417ceb.js +0 -143
  12. package/.histoire/dist/assets/HstTextarea.story.3e39b89e.js +0 -111
  13. package/.histoire/dist/assets/HstTokenGrid.story.e2f237c4.js +0 -156
  14. package/.histoire/dist/assets/HstTokenList.story.bc7b0288.js +0 -184
  15. package/.histoire/dist/assets/HstWrapper.fee42109.js +0 -61
  16. package/.histoire/dist/assets/SearchPane.37a81ba7.js +0 -426
  17. package/.histoire/dist/assets/StoryView.2c1f1961.js +0 -2262
  18. package/.histoire/dist/assets/bundle-main.c70a2b14.js +0 -1156
  19. package/.histoire/dist/assets/bundle-sandbox.f56c0808.js +0 -84
  20. package/.histoire/dist/assets/const.36730b48.js +0 -717
  21. package/.histoire/dist/assets/global-components.d165b38c.js +0 -5806
  22. package/.histoire/dist/assets/search-docs-data.2e7ad186.js +0 -6
  23. package/.histoire/dist/assets/style.dc851298.css +0 -2574
  24. package/.histoire/dist/assets/vendor.31c91490.js +0 -28973
  25. package/.histoire/dist/histoire.svg +0 -51
  26. package/.histoire/dist/index.html +0 -16
@@ -1,165 +0,0 @@
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 { d as defineComponent, c as computed, r as ref, o as onUnmounted, ax as _export_sfc, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, M as withDirectives, Z as vModelText, e as createBaseVNode, x as mergeProps, n as normalizeClass, h as normalizeStyle, q as resolveComponent, l as createVNode } from "./vendor.31c91490.js";
21
- import { H as HstWrapper } from "./HstWrapper.fee42109.js";
22
- const __default__ = {
23
- name: "HstNumber",
24
- inheritAttrs: false
25
- };
26
- const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
27
- props: {
28
- title: { type: String, required: false },
29
- modelValue: { type: Number, required: true }
30
- },
31
- emits: {
32
- "update:modelValue": (newValue) => true
33
- },
34
- setup(__props, { expose, emit }) {
35
- expose();
36
- const props = __props;
37
- const numberModel = computed({
38
- get: () => props.modelValue,
39
- set: (value) => {
40
- emit("update:modelValue", value);
41
- }
42
- });
43
- const input = ref();
44
- function focusAndSelect() {
45
- input.value.focus();
46
- input.value.select();
47
- }
48
- const isDragging = ref(false);
49
- let startX;
50
- let startValue;
51
- function onMouseDown(event) {
52
- isDragging.value = true;
53
- startX = event.clientX;
54
- startValue = numberModel.value;
55
- window.addEventListener("mousemove", onMouseMove);
56
- window.addEventListener("mouseup", stopDragging);
57
- }
58
- function onMouseMove(event) {
59
- let step = parseFloat(input.value.step);
60
- if (isNaN(step)) {
61
- step = 1;
62
- }
63
- numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step;
64
- }
65
- function stopDragging() {
66
- isDragging.value = false;
67
- window.removeEventListener("mousemove", onMouseMove);
68
- window.removeEventListener("mouseup", stopDragging);
69
- }
70
- onUnmounted(() => {
71
- stopDragging();
72
- });
73
- const __returned__ = { props, emit, numberModel, input, focusAndSelect, isDragging, startX, startValue, onMouseDown, onMouseMove, stopDragging, HstWrapper };
74
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
75
- return __returned__;
76
- }
77
- }));
78
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
79
- return openBlock(), createBlock($setup["HstWrapper"], {
80
- class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
81
- _ctx.$attrs.class,
82
- { "htw-select-none": $setup.isDragging }
83
- ]]),
84
- title: $props.title,
85
- style: normalizeStyle(_ctx.$attrs.style),
86
- onClick: $setup.focusAndSelect,
87
- onMousedown: $setup.onMouseDown
88
- }, {
89
- actions: withCtx(() => [
90
- renderSlot(_ctx.$slots, "actions")
91
- ]),
92
- default: withCtx(() => [
93
- withDirectives(createBaseVNode("input", mergeProps({ ref: "input" }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
94
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.numberModel = $event),
95
- type: "number",
96
- class: [{
97
- "htw-select-none": $setup.isDragging
98
- }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"]
99
- }), null, 16), [
100
- [
101
- vModelText,
102
- $setup.numberModel,
103
- void 0,
104
- { number: true }
105
- ]
106
- ])
107
- ]),
108
- _: 3
109
- }, 8, ["title", "class", "style"]);
110
- }
111
- _sfc_main$1.__file = "src/components/number/HstNumber.vue";
112
- var HstNumber = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.vue"]]);
113
- const _sfc_main = /* @__PURE__ */ defineComponent({
114
- name: "HstNumber.story",
115
- setup(__props, { expose }) {
116
- expose();
117
- function initState() {
118
- return {
119
- count: 20,
120
- step: 1
121
- };
122
- }
123
- const __returned__ = { initState, HstNumber };
124
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
125
- return __returned__;
126
- }
127
- });
128
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
129
- const _component_Variant = resolveComponent("Variant");
130
- const _component_Story = resolveComponent("Story");
131
- return openBlock(), createBlock(_component_Story, { title: "HstNumber" }, {
132
- default: withCtx(() => [
133
- createVNode(_component_Variant, {
134
- title: "default",
135
- "init-state": $setup.initState
136
- }, {
137
- default: withCtx(({ state }) => [
138
- createVNode($setup["HstNumber"], {
139
- modelValue: state.count,
140
- "onUpdate:modelValue": ($event) => state.count = $event,
141
- step: state.step,
142
- title: "Count"
143
- }, null, 8, ["modelValue", "onUpdate:modelValue", "step"])
144
- ]),
145
- controls: withCtx(({ state }) => [
146
- createVNode($setup["HstNumber"], {
147
- modelValue: state.count,
148
- "onUpdate:modelValue": ($event) => state.count = $event,
149
- title: "Count"
150
- }, null, 8, ["modelValue", "onUpdate:modelValue"]),
151
- createVNode($setup["HstNumber"], {
152
- modelValue: state.step,
153
- "onUpdate:modelValue": ($event) => state.step = $event,
154
- title: "Step"
155
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
156
- ]),
157
- _: 1
158
- })
159
- ]),
160
- _: 1
161
- });
162
- }
163
- _sfc_main.__file = "src/components/number/HstNumber.story.vue";
164
- var HstNumber_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.story.vue"]]);
165
- export { HstNumber_story as default };
@@ -1,290 +0,0 @@
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 { d as defineComponent, c as computed, as as Dropdown, I as Icon, ax as _export_sfc, a as openBlock, j as createBlock, k as withCtx, e as createBaseVNode, b as createElementBlock, J as renderList, x as mergeProps, t as toDisplayString, F as Fragment, f as renderSlot, R as createTextVNode, l as createVNode, r as ref, n as normalizeClass, h as normalizeStyle, q as resolveComponent } from "./vendor.31c91490.js";
21
- import { H as HstWrapper } from "./HstWrapper.fee42109.js";
22
- var CustomSelect_vue_vue_type_style_index_0_lang = "";
23
- const __default__$1 = {
24
- name: "CustomSelect"
25
- };
26
- const _sfc_main$2 = defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
27
- props: {
28
- modelValue: { type: String, required: true },
29
- options: { type: [Object, Array], required: true }
30
- },
31
- emits: ["update:modelValue"],
32
- setup(__props, { expose, emit: emits }) {
33
- expose();
34
- const props = __props;
35
- const formattedOptions = computed(() => {
36
- if (Array.isArray(props.options)) {
37
- return Object.fromEntries(props.options.map((value) => {
38
- if (typeof value === "string") {
39
- return [value, value];
40
- } else {
41
- return [value.value, value.label];
42
- }
43
- }));
44
- }
45
- return props.options;
46
- });
47
- const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
48
- function selectValue(value, hide) {
49
- emits("update:modelValue", value);
50
- hide();
51
- }
52
- const __returned__ = { props, emits, formattedOptions, selectedLabel, selectValue, VDropdown: Dropdown, Icon };
53
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
54
- return __returned__;
55
- }
56
- }));
57
- const _hoisted_1$1 = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" };
58
- const _hoisted_2$1 = { class: "htw-flex-1 htw-truncate" };
59
- const _hoisted_3 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
60
- const _hoisted_4 = ["onClick"];
61
- function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
62
- return openBlock(), createBlock($setup["VDropdown"], { "auto-size": "" }, {
63
- popper: withCtx(({ hide }) => [
64
- createBaseVNode("div", _hoisted_3, [
65
- (openBlock(true), createElementBlock(Fragment, null, renderList($setup.formattedOptions, (label, value) => {
66
- return openBlock(), createElementBlock("div", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
67
- key: label,
68
- class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
69
- "htw-bg-primary-200 dark:htw-bg-primary-800": $setup.props.modelValue === value
70
- }],
71
- onClick: ($event) => $setup.selectValue(value, hide)
72
- }), toDisplayString(label), 17, _hoisted_4);
73
- }), 128))
74
- ])
75
- ]),
76
- default: withCtx(() => [
77
- createBaseVNode("div", _hoisted_1$1, [
78
- createBaseVNode("div", _hoisted_2$1, [
79
- renderSlot(_ctx.$slots, "default", { label: $setup.selectedLabel }, () => [
80
- createTextVNode(toDisplayString($setup.selectedLabel), 1)
81
- ])
82
- ]),
83
- createVNode($setup["Icon"], {
84
- icon: "carbon:chevron-sort",
85
- class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
86
- })
87
- ])
88
- ]),
89
- _: 3
90
- });
91
- }
92
- _sfc_main$2.__file = "src/components/select/CustomSelect.vue";
93
- var CustomSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/CustomSelect.vue"]]);
94
- const __default__ = {
95
- name: "HstSelect"
96
- };
97
- const _sfc_main$1 = defineComponent(__spreadProps(__spreadValues({}, __default__), {
98
- props: {
99
- title: { type: String, required: false },
100
- modelValue: { type: String, required: true },
101
- options: { type: [Object, Array], required: true }
102
- },
103
- emits: ["update:modelValue"],
104
- setup(__props, { expose, emit: emits }) {
105
- expose();
106
- const props = __props;
107
- const select = ref();
108
- const __returned__ = { props, emits, select, HstWrapper, CustomSelect };
109
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
110
- return __returned__;
111
- }
112
- }));
113
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
114
- return openBlock(), createBlock($setup["HstWrapper"], {
115
- title: $props.title,
116
- class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
117
- style: normalizeStyle(_ctx.$attrs.style)
118
- }, {
119
- actions: withCtx(() => [
120
- renderSlot(_ctx.$slots, "actions")
121
- ]),
122
- default: withCtx(() => [
123
- createVNode($setup["CustomSelect"], {
124
- options: $props.options,
125
- "model-value": $props.modelValue,
126
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.emits("update:modelValue", $event))
127
- }, null, 8, ["options", "model-value"])
128
- ]),
129
- _: 3
130
- }, 8, ["title", "class", "style"]);
131
- }
132
- _sfc_main$1.__file = "src/components/select/HstSelect.vue";
133
- var HstSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.vue"]]);
134
- const _sfc_main = /* @__PURE__ */ defineComponent({
135
- name: "HstSelect.story",
136
- setup(__props, { expose }) {
137
- expose();
138
- const options = {
139
- "crash-bandicoot": "Crash Bandicoot",
140
- "the-last-of-us": "The Last of Us",
141
- "ghost-of-tsushima": "Ghost of Tsushima"
142
- };
143
- const flatOptions = Object.keys(options);
144
- const objectOptions = Object.keys(options).map((key) => ({
145
- label: options[key],
146
- value: key
147
- }));
148
- function initState() {
149
- return {
150
- label: "My really long label",
151
- select: "crash-bandicoot"
152
- };
153
- }
154
- const __returned__ = { options, flatOptions, objectOptions, initState, HstSelect };
155
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
156
- return __returned__;
157
- }
158
- });
159
- const _hoisted_1 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
160
- const _hoisted_2 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
161
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
162
- const _component_Variant = resolveComponent("Variant");
163
- const _component_Story = resolveComponent("Story");
164
- return openBlock(), createBlock(_component_Story, {
165
- title: "HstSelect",
166
- layout: {
167
- type: "grid",
168
- width: "100%"
169
- }
170
- }, {
171
- default: withCtx(() => [
172
- createVNode(_component_Variant, {
173
- title: "default",
174
- "init-state": $setup.initState
175
- }, {
176
- default: withCtx(({ state }) => [
177
- createVNode($setup["HstSelect"], {
178
- modelValue: state.select,
179
- "onUpdate:modelValue": ($event) => state.select = $event,
180
- title: state.label,
181
- options: $setup.options
182
- }, null, 8, ["modelValue", "onUpdate:modelValue", "title"])
183
- ]),
184
- controls: withCtx(({ state }) => [
185
- createVNode($setup["HstSelect"], {
186
- modelValue: state.select,
187
- "onUpdate:modelValue": ($event) => state.select = $event,
188
- title: "Select",
189
- options: $setup.options
190
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
191
- ]),
192
- _: 1
193
- }),
194
- createVNode(_component_Variant, {
195
- title: "no-label",
196
- "init-state": $setup.initState
197
- }, {
198
- default: withCtx(({ state }) => [
199
- createVNode($setup["HstSelect"], {
200
- modelValue: state.select,
201
- "onUpdate:modelValue": ($event) => state.select = $event,
202
- options: $setup.options
203
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
204
- ]),
205
- controls: withCtx(({ state }) => [
206
- createVNode($setup["HstSelect"], {
207
- modelValue: state.select,
208
- "onUpdate:modelValue": ($event) => state.select = $event,
209
- title: "Select",
210
- options: $setup.options
211
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
212
- ]),
213
- _: 1
214
- }),
215
- createVNode(_component_Variant, {
216
- title: "options-as-object",
217
- "init-state": $setup.initState
218
- }, {
219
- default: withCtx(({ state }) => [
220
- createBaseVNode("pre", { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" }, toDisplayString($setup.options)),
221
- createVNode($setup["HstSelect"], {
222
- modelValue: state.select,
223
- "onUpdate:modelValue": ($event) => state.select = $event,
224
- title: "Games",
225
- options: $setup.options
226
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
227
- ]),
228
- controls: withCtx(({ state }) => [
229
- createVNode($setup["HstSelect"], {
230
- modelValue: state.select,
231
- "onUpdate:modelValue": ($event) => state.select = $event,
232
- title: "Games",
233
- options: $setup.options
234
- }, null, 8, ["modelValue", "onUpdate:modelValue"])
235
- ]),
236
- _: 1
237
- }),
238
- createVNode(_component_Variant, {
239
- title: "options-as-array-of-objects",
240
- "init-state": $setup.initState
241
- }, {
242
- default: withCtx(({ state }) => [
243
- createBaseVNode("pre", _hoisted_1, toDisplayString($setup.objectOptions), 1),
244
- createVNode($setup["HstSelect"], {
245
- modelValue: state.select,
246
- "onUpdate:modelValue": ($event) => state.select = $event,
247
- title: "Games",
248
- options: $setup.objectOptions
249
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
250
- ]),
251
- controls: withCtx(({ state }) => [
252
- createVNode($setup["HstSelect"], {
253
- modelValue: state.select,
254
- "onUpdate:modelValue": ($event) => state.select = $event,
255
- title: "Games",
256
- options: $setup.objectOptions
257
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
258
- ]),
259
- _: 1
260
- }),
261
- createVNode(_component_Variant, {
262
- title: "options-as-array-of-strings",
263
- "init-state": $setup.initState
264
- }, {
265
- default: withCtx(({ state }) => [
266
- createBaseVNode("pre", _hoisted_2, toDisplayString($setup.flatOptions), 1),
267
- createVNode($setup["HstSelect"], {
268
- modelValue: state.select,
269
- "onUpdate:modelValue": ($event) => state.select = $event,
270
- title: "Select",
271
- options: $setup.flatOptions
272
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
273
- ]),
274
- controls: withCtx(({ state }) => [
275
- createVNode($setup["HstSelect"], {
276
- modelValue: state.select,
277
- "onUpdate:modelValue": ($event) => state.select = $event,
278
- title: "Select",
279
- options: $setup.flatOptions
280
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
281
- ]),
282
- _: 1
283
- })
284
- ]),
285
- _: 1
286
- });
287
- }
288
- _sfc_main.__file = "src/components/select/HstSelect.story.vue";
289
- var HstSelect_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.story.vue"]]);
290
- export { HstSelect_story as default };
@@ -1,153 +0,0 @@
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 { d as defineComponent, r as ref, c as computed, ax as _export_sfc, ay as VTooltip, a as openBlock, j as createBlock, k as withCtx, e as createBaseVNode, M as withDirectives, Z as vModelText, x as mergeProps, b as createElementBlock, h as normalizeStyle, m as createCommentVNode, n as normalizeClass, S as reactive, q as resolveComponent, l as createVNode, t as toDisplayString } from "./vendor.31c91490.js";
21
- import { H as HstWrapper } from "./HstWrapper.fee42109.js";
22
- var HstSlider_vue_vue_type_style_index_0_lang = "";
23
- const __default__ = {
24
- name: "HstSlider",
25
- inheritAttrs: false
26
- };
27
- const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
28
- props: {
29
- title: { type: String, required: false },
30
- modelValue: { type: Number, required: true },
31
- min: { type: Number, required: true },
32
- max: { type: Number, required: true }
33
- },
34
- emits: {
35
- "update:modelValue": (newValue) => true
36
- },
37
- setup(__props, { expose, emit }) {
38
- expose();
39
- const props = __props;
40
- const showTooltip = ref(false);
41
- const input = ref(null);
42
- const numberModel = computed({
43
- get: () => props.modelValue,
44
- set: (value) => {
45
- emit("update:modelValue", value);
46
- }
47
- });
48
- const percentage = computed(() => {
49
- return (props.modelValue - props.min) / (props.max - props.min);
50
- });
51
- const tooltipStyle = computed(() => {
52
- const gap = 8;
53
- if (input.value) {
54
- const position = gap + (input.value.clientWidth - 2 * gap) * percentage.value;
55
- return {
56
- left: position + "px"
57
- };
58
- }
59
- return {};
60
- });
61
- const __returned__ = { props, emit, showTooltip, input, numberModel, percentage, tooltipStyle, HstWrapper, vTooltip: VTooltip };
62
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
63
- return __returned__;
64
- }
65
- }));
66
- const _hoisted_1 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
67
- const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
68
- /* @__PURE__ */ createBaseVNode("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
69
- ], -1);
70
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
71
- return openBlock(), createBlock($setup["HstWrapper"], {
72
- class: normalizeClass(["htw-items-center", _ctx.$attrs.class]),
73
- title: $props.title,
74
- style: normalizeStyle(_ctx.$attrs.style)
75
- }, {
76
- default: withCtx(() => [
77
- createBaseVNode("div", _hoisted_1, [
78
- _hoisted_2,
79
- withDirectives(createBaseVNode("input", mergeProps({
80
- ref: "input",
81
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.numberModel = $event),
82
- class: "htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700",
83
- type: "range"
84
- }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
85
- onMouseover: _cache[1] || (_cache[1] = ($event) => $setup.showTooltip = true),
86
- onMouseleave: _cache[2] || (_cache[2] = ($event) => $setup.showTooltip = false)
87
- }), null, 16), [
88
- [
89
- vModelText,
90
- $setup.numberModel,
91
- void 0,
92
- { number: true }
93
- ]
94
- ]),
95
- $setup.showTooltip ? withDirectives((openBlock(), createElementBlock("div", {
96
- key: 0,
97
- class: "htw-absolute",
98
- style: normalizeStyle($setup.tooltipStyle)
99
- }, null, 4)), [
100
- [$setup["vTooltip"], { content: $props.modelValue.toString(), shown: true, distance: 16, delay: 0 }]
101
- ]) : createCommentVNode("v-if", true)
102
- ])
103
- ]),
104
- _: 1
105
- }, 8, ["title", "class", "style"]);
106
- }
107
- _sfc_main$1.__file = "src/components/slider/HstSlider.vue";
108
- var HstSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/slider/HstSlider.vue"]]);
109
- const _sfc_main = /* @__PURE__ */ defineComponent({
110
- name: "HstSlider.story",
111
- setup(__props, { expose }) {
112
- expose();
113
- const state = reactive({
114
- value: 20,
115
- min: 0,
116
- max: 100,
117
- step: 5
118
- });
119
- const __returned__ = { state, HstSlider };
120
- Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
121
- return __returned__;
122
- }
123
- });
124
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
125
- const _component_Story = resolveComponent("Story");
126
- return openBlock(), createBlock(_component_Story, { title: "HstSlider" }, {
127
- controls: withCtx(() => [
128
- createVNode($setup["HstSlider"], {
129
- modelValue: $setup.state.value,
130
- "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.state.value = $event),
131
- step: $setup.state.step,
132
- min: $setup.state.min,
133
- max: $setup.state.max,
134
- title: "Value"
135
- }, null, 8, ["modelValue", "step", "min", "max"])
136
- ]),
137
- default: withCtx(() => [
138
- createVNode($setup["HstSlider"], {
139
- modelValue: $setup.state.value,
140
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.state.value = $event),
141
- step: $setup.state.step,
142
- min: $setup.state.min,
143
- max: $setup.state.max,
144
- title: "Slide"
145
- }, null, 8, ["modelValue", "step", "min", "max"]),
146
- createBaseVNode("pre", null, toDisplayString($setup.state), 1)
147
- ]),
148
- _: 1
149
- });
150
- }
151
- _sfc_main.__file = "src/components/slider/HstSlider.story.vue";
152
- var HstSlider_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/slider/HstSlider.story.vue"]]);
153
- export { HstSlider_story as default };