@histoire/controls 0.9.6 → 0.10.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/package.json +2 -2
- package/.histoire/dist/__sandbox.html +0 -16
- package/.histoire/dist/assets/BaseEmpty.c5ebb434.js +0 -11
- package/.histoire/dist/assets/HomeView.2d2d0dfe.js +0 -24
- package/.histoire/dist/assets/HstCheckbox.story.ccd10161.js +0 -151
- package/.histoire/dist/assets/HstColorShades.story.d71deb80.js +0 -540
- package/.histoire/dist/assets/HstCopyIcon.ef403c78.js +0 -55
- package/.histoire/dist/assets/HstNumber.story.1e0e7b71.js +0 -165
- package/.histoire/dist/assets/HstSelect.story.8a2b4741.js +0 -290
- package/.histoire/dist/assets/HstSlider.story.4155f6ba.js +0 -153
- package/.histoire/dist/assets/HstText.story.43417ceb.js +0 -143
- package/.histoire/dist/assets/HstTextarea.story.3e39b89e.js +0 -111
- package/.histoire/dist/assets/HstTokenGrid.story.e2f237c4.js +0 -156
- package/.histoire/dist/assets/HstTokenList.story.bc7b0288.js +0 -184
- package/.histoire/dist/assets/HstWrapper.fee42109.js +0 -61
- package/.histoire/dist/assets/SearchPane.37a81ba7.js +0 -426
- package/.histoire/dist/assets/StoryView.2c1f1961.js +0 -2262
- package/.histoire/dist/assets/bundle-main.c70a2b14.js +0 -1156
- package/.histoire/dist/assets/bundle-sandbox.f56c0808.js +0 -84
- package/.histoire/dist/assets/const.36730b48.js +0 -717
- package/.histoire/dist/assets/global-components.d165b38c.js +0 -5806
- package/.histoire/dist/assets/search-docs-data.2e7ad186.js +0 -6
- package/.histoire/dist/assets/style.dc851298.css +0 -2574
- package/.histoire/dist/assets/vendor.31c91490.js +0 -28973
- package/.histoire/dist/histoire.svg +0 -51
- 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 };
|