amotify 0.0.0

package/dist/@comps/Functions/Input/Slider/_.js

@@ -0,0 +1,308 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderInput = void 0;
+var _global_1 = require("@global");
+var _atoms_1 = require("@atoms");
+var _functions_1 = require("@functions");
+var core_1 = require("../core");
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+var useState = React.useState, useEffect = React.useEffect;
+function DefaultValidation(props) {
+    var value = props.value, params = props.params;
+    var required = params.required;
+    var notice = [];
+    if (required && !value) {
+        notice.push({ type: 'invalid', label: '必須項目です' });
+    }
+    return {
+        ok: !notice.filter(function (_a) {
+            var type = _a.type;
+            return type == 'invalid';
+        }).length,
+        notice: notice
+    };
+}
+var DataLeveling = function (props) {
+    var value = props.value, val_status = props.val_status;
+    var min = val_status.min, max = val_status.max, step = val_status.step;
+    value = Math.max(value, min);
+    value = Math.min(value, max);
+    var rawValue = value / max;
+    var stepValue = rawValue * max;
+    stepValue = Math.round(stepValue / step);
+    return {
+        stepValue: stepValue * step,
+        stepIndex: stepValue,
+        positionLeft: stepValue * step / max * 100 + '%'
+    };
+};
+var SliderInput = function (params) {
+    var _a = params.color, color = _a === void 0 ? 'theme' : _a, required = params.required, _b = params.form, form = _b === void 0 ? '' : _b, _c = params.legends, _d = _c === void 0 ? {} : _c, _e = _d.enable, showLegends = _e === void 0 ? true : _e, customLegends = _d.custom, _f = _d.showAlways, showLegendsAlways = _f === void 0 ? false : _f, min = params.min, max = params.max, step = params.step, enableFormSubmit = params.enableFormSubmit, checkValidationAtFirst = params.checkValidationAtFirst, onChange = params.onChange, onKeyDown = params.onKeyDown, onValidate = params.onValidate, onUpdateValue = params.onUpdateValue, onUpdateValidValue = params.onUpdateValidValue, _g = params.value, value = _g === void 0 ? '' : _g, className = params.className, others = __rest(params, ["color", "required", "form", "legends", "min", "max", "step", "enableFormSubmit", "checkValidationAtFirst", "onChange", "onKeyDown", "onValidate", "onUpdateValue", "onUpdateValidValue", "value", "className"]);
+    var Default_Status = {
+        componentID: params.componentID || '',
+        dataValue: value,
+        min: min,
+        max: max,
+        step: step,
+        eventType: 'init',
+        eventID: $.uuidGen(),
+    };
+    var _h = __read(useState(Default_Status), 2), val_status = _h[0], set_status = _h[1];
+    var _j = __read(useState({
+        ok: false,
+        notice: []
+    }), 2), val_validate = _j[0], set_validate = _j[1];
+    (0, core_1.CommonEffects)({
+        params: params,
+        val_status: val_status,
+        set_status: set_status,
+        val_validate: val_validate,
+        set_validate: set_validate,
+        onUpdateValue: onUpdateValue,
+        onUpdateValidValue: onUpdateValidValue,
+        DefaultValidation: DefaultValidation,
+        ExtraOverrideParams: {
+            dataValue: value
+        },
+        ExtraStoreParams: {
+            prevValue: val_status.dataValue,
+            setValueByForeign: function (value) {
+                set_status(__assign(__assign({}, val_status), { dataValue: value, eventType: 'update', eventID: $.uuidGen() }));
+            }
+        }
+    });
+    var DotData = DataLeveling({
+        value: val_status.dataValue,
+        val_status: val_status
+    });
+    return React.createElement(core_1.BoxWrapper, { val_status: val_status, set_status: set_status, val_validate: val_validate, params: params },
+        React.createElement(_functions_1.Input.Hidden, __assign({ value: DotData.stepValue, form: form, "data-value": DotData.stepValue, "data-validation": val_validate.ok, "data-input-type": 'slider' }, others)),
+        React.createElement(_atoms_1.Box, { flexSizing: 'auto', className: [
+                style_module_scss_1.default.Wrap,
+                className,
+                style_module_scss_1.default['ShowLegendsAlways_' + showLegendsAlways]
+            ].join(' ') },
+            React.createElement(Comps.Rail, { color: color, val_status: val_status, set_status: set_status, DotData: DotData, form: form, enableFormSubmit: enableFormSubmit }),
+            showLegends ? React.createElement(Comps.IndicatorLabels, { componentID: val_status.componentID, min: min, max: max, step: step, customLegends: customLegends }) : null));
+};
+exports.SliderInput = SliderInput;
+var Comps = {
+    IndicatorLabels: function (props) {
+        var componentID = props.componentID, min = props.min, max = props.max, step = props.step, customLegends = props.customLegends;
+        var Labels = [];
+        var minStep = Math.round(min / step);
+        var maxStep = Math.round(max / step);
+        var steps = maxStep - minStep + 1;
+        for (var index = minStep; index <= maxStep; index++) {
+            var value = index * step;
+            value = Math.max(value, min);
+            value = Math.min(value, max);
+            var left = (value / max * 100) + '%';
+            Labels.push(React.createElement(_atoms_1.Box, { key: value, className: style_module_scss_1.default.Label, id: 'Legend-' + componentID + '-' + index, display: index == minStep || index == maxStep ? 'flex' : 'none', position: 'absolute', top: 0, height: 1, unitWidth: 2, transition: 'middle', fontColor: '1.clear', freeCSS: {
+                    left: left,
+                    whiteSpace: 'nowrap',
+                    textAlign: 'center'
+                }, verticalAlign: 'center', horizontalAlign: 'center', children: customLegends ? customLegends(value) : value.rank() }));
+        }
+        useEffect(function () {
+            var LabelLeveling = function () {
+                var Labels = $('#Labels-' + componentID);
+                var width = Labels.position().width;
+                var maxLabelCount = Math.round(width / 50) - 1;
+                var labelStep = Math.round(steps / maxLabelCount);
+                for (var index_1 = minStep + 1; index_1 < maxStep; index_1++) {
+                    $('#Legend-' + componentID + '-' + index_1).css({
+                        display: index_1 % labelStep == 0 ? 'flex' : 'none'
+                    });
+                }
+            };
+            $(window).addEvent({
+                eventID: 'SliderResizeCallback-' + componentID,
+                eventType: 'resize',
+                callback: function () {
+                    LabelLeveling();
+                }
+            });
+            LabelLeveling();
+            return function () {
+                $(window).removeEvent('SliderResizeCallback-' + componentID);
+            };
+        }, []);
+        return (React.createElement(_atoms_1.Flex, { className: style_module_scss_1.default.Labels, verticalAlign: 'center', horizontalAlign: 'between', unitHeight: 2, fontSize: '0.xs', position: 'relative', id: 'Labels-' + componentID },
+            React.createElement(_atoms_1.Box, { position: 'absolute', top: 0, left: 0, right: 2, bottom: 0, children: Labels })));
+    },
+    Rail: function (props) {
+        var val_status = props.val_status, set_status = props.set_status, DotData = props.DotData, form = props.form, enableFormSubmit = props.enableFormSubmit;
+        var componentID = val_status.componentID;
+        return (React.createElement(_atoms_1.Flex, { className: style_module_scss_1.default.Rail, position: 'relative', paddingLeft: '1/2', unitHeight: 2, verticalAlign: 'center', freeCSS: {
+                minWidth: '10rem',
+                zIndex: 1,
+                cursor: 'pointer'
+            }, onMouseDown: function (event) {
+                event.stopPropagation();
+                EffectStart(event, {
+                    val_status: val_status,
+                    set_status: set_status,
+                    DotData: DotData
+                });
+            }, onTouchStart: function (event) {
+                event.stopPropagation();
+                EffectStart(event, {
+                    val_status: val_status,
+                    set_status: set_status,
+                    DotData: DotData
+                });
+            } },
+            React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.Bar, backgroundColor: '4.layer.darken', position: 'relative', borderRadius: 'sphere', transition: 'middle', flexSizing: 'none', unitHeight: '2/3', width: 1, id: componentID + '_Bar' },
+                React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.BarColor, position: 'relative', height: 1, width: 0, left: 0, transition: 'long', borderRadius: 'inherit', backgroundColor: props.color, opacity: 'middle', overflow: 'hidden', freeCSS: {
+                        width: DotData.positionLeft
+                    }, id: componentID + '_BarColor' })),
+            React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.BallWrap, position: 'absolute', top: 0, left: 0, right: 2, bottom: 0 },
+                React.createElement(_functions_1.Buttons.Button.Plain, { className: style_module_scss_1.default.Ball, position: 'absolute', backgroundColor: props.color, top: 0, left: 0, ssSphere: 2, freeCSS: {
+                        zIndex: 2,
+                        left: DotData.positionLeft
+                    }, "data-form-name": form, id: componentID + '_Ball', onKeyDown: function (event) {
+                        KeyDownEvent({
+                            event: event,
+                            val_status: val_status,
+                            set_status: set_status,
+                            DotData: DotData
+                        });
+                        if (enableFormSubmit)
+                            (0, core_1.SubmitForm)(event);
+                    } }))));
+    }
+};
+var EffectStart = function (event, info) {
+    $(document)
+        .addEvent({
+        eventID: 'SliderMouseMove',
+        eventType: 'mousemove',
+        callback: function (event) { EffectMove(event, info); },
+        option: { passive: false }
+    })
+        .addEvent({
+        eventID: 'SliderTouchMove',
+        eventType: 'touchmove',
+        callback: function (event) { EffectMove(event, info); },
+        option: { passive: false }
+    })
+        .addEvent({
+        eventID: 'SliderMouseUp',
+        eventType: 'mouseup',
+        callback: function () { EffectEnd(); }
+    })
+        .addEvent({
+        eventID: 'SliderTouchEnd',
+        eventType: 'touchend',
+        callback: function () { EffectEnd(); }
+    });
+};
+var EffectMove = function (event, info) {
+    var mouseX = $.getCursor(event).x;
+    var val_status = info.val_status, set_status = info.set_status;
+    var componentID = val_status.componentID, min = val_status.min, max = val_status.max;
+    var Ball = $('#' + componentID + '_Ball');
+    var Bar = $('#' + componentID + '_Bar');
+    var BarColor = $('#' + componentID + '_BarColor');
+    var _a = Bar.position(), barWidth = _a.width, barLeft = _a.left;
+    var Left = (mouseX - barLeft) / barWidth;
+    Left = Math.max(Left, 0);
+    Left = Math.min(Left, 1);
+    var LeftRawValue = Left * max;
+    var resultValues = DataLeveling({
+        value: LeftRawValue,
+        val_status: val_status
+    });
+    var left = resultValues.positionLeft;
+    var stepValue = resultValues.stepValue;
+    Ball.css({ left: left });
+    BarColor.css({ width: left });
+    var prevValue = _global_1.useStore.get(componentID).prevValue;
+    if (stepValue != prevValue) {
+        _global_1.useStore.update({
+            key: componentID,
+            value: {
+                prevValue: stepValue
+            }
+        });
+        set_status(__assign(__assign({}, val_status), { dataValue: stepValue, eventType: 'update', eventID: $.uuidGen() }));
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+};
+var EffectEnd = function () {
+    $(document).removeEvent(['SliderMouseMove', 'SliderTouchMove', 'SliderMouseUp', 'SliderTouchEnd']);
+};
+var KeyDownEvent = function (props) {
+    var event = props.event, val_status = props.val_status, set_status = props.set_status;
+    var min = val_status.min, max = val_status.max, step = val_status.step;
+    var key = event.key, metaKey = event.metaKey, ctrlKey = event.ctrlKey;
+    var auxKey = ctrlKey || metaKey;
+    var nextValue = val_status.dataValue;
+    if (!key.match(/Arrow/))
+        return;
+    event.preventDefault();
+    if (key.match(/Left|Up/)) {
+        if (auxKey)
+            nextValue = min;
+        else
+            nextValue -= step;
+    }
+    else if (key.match(/Right|Down/)) {
+        if (auxKey)
+            nextValue = max;
+        else
+            nextValue += step;
+    }
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    _global_1.useStore.update({
+        key: val_status.componentID,
+        value: {
+            prevValue: nextValue
+        }
+    });
+    set_status(__assign(__assign({}, val_status), { dataValue: nextValue, eventType: 'update', eventID: $.uuidGen() }));
+};

package/dist/@comps/Functions/Input/Switch/_.d.ts

@@ -0,0 +1 @@
+export declare const SwitchInput: FNC<amotify.fn.Input.Switch.PlainParams>;

package/dist/@comps/Functions/Input/Switch/_.js

@@ -0,0 +1,120 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchInput = void 0;
+var _global_1 = require("@global");
+var _atoms_1 = require("@atoms");
+var _mols_1 = require("@mols");
+var _functions_1 = require("@functions");
+var core_1 = require("../core");
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+var useState = _global_1.React.useState;
+function DefaultValidation(props) {
+    var value = props.value, params = props.params;
+    var required = params.required;
+    var notice = [];
+    if (required && !value) {
+        notice.push({ type: 'invalid', label: 'ONになっていません' });
+    }
+    return {
+        ok: !notice.filter(function (_a) {
+            var type = _a.type;
+            return type == 'invalid';
+        }).length,
+        notice: notice
+    };
+}
+var SwitchInput = function (params) {
+    var componentID = params.componentID, _a = params.color, color = _a === void 0 ? 'posi' : _a, required = params.required, form = params.form, id = params.id, enableFormSubmit = params.enableFormSubmit, checkValidationAtFirst = params.checkValidationAtFirst, onChange = params.onChange, onKeyDown = params.onKeyDown, onValidate = params.onValidate, onUpdateValue = params.onUpdateValue, onUpdateValidValue = params.onUpdateValidValue, _b = params.value, value = _b === void 0 ? '' : _b, _c = params.icon, icon = _c === void 0 ? '' : _c, _d = params.appearance, appearance = _d === void 0 ? 'material' : _d, others = __rest(params, ["componentID", "color", "required", "form", "id", "enableFormSubmit", "checkValidationAtFirst", "onChange", "onKeyDown", "onValidate", "onUpdateValue", "onUpdateValidValue", "value", "icon", "appearance"]);
+    var Default_Status = {
+        componentID: params.componentID || '',
+        dataValue: value,
+        eventType: 'init',
+        eventID: $.uuidGen()
+    };
+    var _e = __read(useState(Default_Status), 2), val_status = _e[0], set_status = _e[1];
+    var _f = __read(useState({
+        ok: false,
+        notice: []
+    }), 2), val_validate = _f[0], set_validate = _f[1];
+    var isChecked = !!val_status.dataValue;
+    (0, core_1.CommonEffects)({
+        params: params,
+        val_status: val_status,
+        set_status: set_status,
+        val_validate: val_validate,
+        set_validate: set_validate,
+        DefaultValidation: DefaultValidation,
+        onUpdateValue: onUpdateValue,
+        onUpdateValidValue: onUpdateValidValue,
+        ExtraOverrideParams: {
+            dataValue: value,
+            formatValue: value
+        },
+    });
+    return (_global_1.React.createElement(core_1.BoxWrapper, { val_status: val_status, set_status: set_status, val_validate: val_validate, params: params },
+        _global_1.React.createElement("input", __assign({ type: 'checkbox', "data-form": form, "data-input-type": 'switch', "data-validation": val_validate.ok, "data-component-id": val_status.componentID, "data-value": val_status.dataValue, checked: val_status.dataValue, className: style_module_scss_1.default.Input, id: id, onKeyDown: function (event) {
+                if (onKeyDown)
+                    onKeyDown(event);
+                if (enableFormSubmit)
+                    (0, core_1.SubmitForm)(event);
+            }, onChange: function (event) {
+                if (val_validate.ok)
+                    set_validate({ ok: false, notice: [] });
+                set_status(__assign(__assign({}, val_status), { dataValue: event.target.checked, eventType: 'update', eventID: $.uuidGen() }));
+                if (onChange)
+                    onChange(event);
+            } }, others)),
+        _global_1.React.createElement(_functions_1.Buttons.Label.Plain, { tabIndex: -1, htmlFor: id, padding: '1/3', transition: 'middle', borderRadius: '1.tone.primary', className: style_module_scss_1.default.Label },
+            _global_1.React.createElement(_atoms_1.Box, __assign({}, appearance == 'applely' ? {
+                padding: '1/4',
+                isRounded: true,
+                backgroundColor: isChecked ? color : '5.layer.darker'
+            } : {}),
+                _global_1.React.createElement(_mols_1.Row.Center, { unitHeight: 2.5, position: 'relative', freeCSS: {
+                        width: 12 * 4.5
+                    } },
+                    appearance == 'material' ? _global_1.React.createElement(_atoms_1.Box, { position: 'absolute', backgroundColor: isChecked ? color : '5.layer.darker', borderRadius: 'sphere', unitHeight: 1, transition: 'middle', width: 1, className: style_module_scss_1.default.Bar, opacity: 'middle' }) : null,
+                    _global_1.React.createElement(_atoms_1.Box, { position: 'absolute', top: 0, left: 0, backgroundColor: appearance == 'material' && isChecked ? color : 'white', transition: 'middle', ssSphere: 2.5, boxShadow: 2, className: style_module_scss_1.default.Dot }, icon ? _global_1.React.createElement(_atoms_1.FAIcon, { transition: 'middle', fontColor: appearance == 'applely' && isChecked ? color : 'white', d: icon }) : null))))));
+};
+exports.SwitchInput = SwitchInput;

package/dist/@comps/Functions/Input/Text.d.ts

@@ -0,0 +1,5 @@
+export declare const TextValidate: (value: any, restrict: amotify.fn.Input.Text.RestrictTypes) => {
+    ok: boolean;
+    body: any;
+};
+export declare const TextInput: FNC<amotify.fn.Input.Text.OriginParams>;