amotify 0.0.0

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

@@ -0,0 +1,232 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListInput = void 0;
+var _global_1 = require("@global");
+var useState = _global_1.React.useState;
+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"));
+function DefaultValidation(props) {
+    var value = props.value, params = props.params;
+    var _a = params, type = _a.type, required = _a.required, _b = _a.minSelect, minSelect = _b === void 0 ? 0 : _b;
+    var notice = [];
+    if (required) {
+        if (!value.length) {
+            if (type == 'radio') {
+                notice.push({ type: 'invalid', label: '選択されていません' });
+            }
+        }
+    }
+    if (minSelect) {
+        if (value.length < minSelect) {
+            notice.push({ type: 'invalid', label: "".concat(minSelect, "\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044") });
+        }
+    }
+    return {
+        ok: !notice.filter(function (_a) {
+            var type = _a.type;
+            return type == 'invalid';
+        }).length,
+        notice: notice
+    };
+}
+var ListInput = function (props) {
+    var value = props.value, _a = props.options, options = _a === void 0 ? [] : _a;
+    var Values = $.is.exist(value) ? $.flatArray(value) : [];
+    var DefaultOptions = options.map(function (option) {
+        var value = option.value, label = option.label;
+        return __assign(__assign({}, option), { value: JSON.stringify(value), label: label });
+    });
+    var DefaultValues = [];
+    Values.forEach(function (value) {
+        var Val = JSON.stringify(value);
+        var Index = DefaultOptions.findIndex(function (option) { return option.value == Val; });
+        if (Index == -1)
+            return;
+        DefaultValues.push(Val);
+    });
+    return _global_1.React.createElement(Core, __assign({}, props, { value: DefaultValues, options: DefaultOptions }));
+};
+exports.ListInput = ListInput;
+var Core = function (params) {
+    var type = params.type, tone = params.tone, required = params.required, _a = params.componentID, componentID = _a === void 0 ? '' : _a, form = params.form, override = params.override, statusID = params.statusID, freeCSS = params.freeCSS, enableFormSubmit = params.enableFormSubmit, checkValidationAtFirst = params.checkValidationAtFirst, onValidate = params.onValidate, onUpdateValue = params.onUpdateValue, onUpdateValidValue = params.onUpdateValidValue, value = params.value, options = params.options, leftIndicator = params.leftIndicator, rightIndicator = params.rightIndicator, className = params.className, cellStyles = params.cellStyles, cellClassName = params.cellClassName, cellCheckedStyles = params.cellCheckedStyles, cellCheckedClassName = params.cellCheckedClassName, others = __rest(params, ["type", "tone", "required", "componentID", "form", "override", "statusID", "freeCSS", "enableFormSubmit", "checkValidationAtFirst", "onValidate", "onUpdateValue", "onUpdateValidValue", "value", "options", "leftIndicator", "rightIndicator", "className", "cellStyles", "cellClassName", "cellCheckedStyles", "cellCheckedClassName"]);
+    var Default_Status = {
+        componentID: componentID,
+        dataValue: value,
+        eventType: 'init',
+        eventID: $.uuidGen()
+    };
+    var _b = __read(useState(Default_Status), 2), val_status = _b[0], set_status = _b[1];
+    var _c = __read(useState({
+        ok: false,
+        notice: []
+    }), 2), val_validate = _c[0], set_validate = _c[1];
+    (0, core_1.CommonEffects)({
+        type: 'list',
+        params: params,
+        val_status: val_status,
+        set_status: set_status,
+        val_validate: val_validate,
+        set_validate: set_validate,
+        onUpdateValue: onUpdateValue,
+        onUpdateValidValue: onUpdateValidValue,
+        DefaultValidation: DefaultValidation
+    });
+    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(_functions_1.Input.Hidden, __assign({ "data-value": JSON.stringify(val_status.dataValue), form: form, "data-input-type": type, "data-validation": val_validate.ok }, others, { componentID: val_status.componentID })),
+        _global_1.React.createElement(CellList, { params: params, val_status: val_status, set_status: set_status })));
+};
+var CellList = function (props) {
+    var params = props.params, val_status = props.val_status, set_status = props.set_status;
+    var componentID = params.componentID, type = params.type, tone = params.tone, _a = params.icon, icon = _a === void 0 ? true : _a, options = params.options, name = params.name, form = params.form, tabIndex = params.tabIndex, hideInput = params.hideInput, DefaultDisabled = params.disabled, ListClassName = params.className, DefaultCellStyles = params.cellStyles, _b = params.cellClassName, DefaultCellClassName = _b === void 0 ? '' : _b, DefaultCellCheckedStyles = params.cellCheckedStyles, _c = params.cellCheckedClassName, DefaultCellCheckedClassName = _c === void 0 ? '' : _c, enableFormSubmit = params.enableFormSubmit, _d = params.defaultActiveStyling, defaultActiveStyling = _d === void 0 ? true : _d;
+    var dataValue = val_status.dataValue;
+    var IconBox = icon ? _global_1.React.createElement(_atoms_1.Box, { flexSizing: 'none', children: params.iconType == 'radio' ? _global_1.React.createElement(Comps.RadioIcon, null) :
+            params.iconType == 'checkbox' ? _global_1.React.createElement(Comps.CheckboxIcon, null) : null }) : null;
+    var Cells = options.map(function (option, index) {
+        var value = option.value, label = option.label, _a = option.disabled, disabled = _a === void 0 ? DefaultDisabled : _a, _b = option.className, className = _b === void 0 ? '' : _b, checkedStyles = option.checkedStyles, _c = option.checkedClassName, checkedClassName = _c === void 0 ? '' : _c, styles = __rest(option, ["value", "label", "disabled", "className", "checkedStyles", "checkedClassName"]);
+        var CellID = $.uuidGen();
+        var Checked = dataValue.findIndex(function (v) { return v === value; }) != -1;
+        var Styles = __assign(__assign({}, DefaultCellStyles), styles);
+        var ClassName = [
+            style_module_scss_1.default.Label,
+            style_module_scss_1.default['defaultActiveStyling_' + !!defaultActiveStyling],
+            DefaultCellClassName,
+            className
+        ];
+        if (Checked) {
+            Styles = __assign(__assign(__assign(__assign({}, Styles), DefaultCellCheckedStyles), checkedStyles), { activeStyles: checkedStyles, freeCSS: __assign(__assign(__assign({}, Styles.freeCSS), DefaultCellCheckedStyles === null || DefaultCellCheckedStyles === void 0 ? void 0 : DefaultCellCheckedStyles.freeCSS), checkedStyles === null || checkedStyles === void 0 ? void 0 : checkedStyles.freeCSS) });
+            ClassName = __spreadArray(__spreadArray([], __read(ClassName), false), [
+                DefaultCellCheckedClassName,
+                checkedClassName
+            ], false);
+        }
+        return [
+            _global_1.React.createElement("input", { type: type == 'radio' ? 'radio' : 'checkbox', className: [
+                    style_module_scss_1.default.Input,
+                    style_module_scss_1.default['defaultActiveStyling_' + !!defaultActiveStyling]
+                ].join(' '), name: 'RadioCheckbox-' + name, "data-list-index": componentID + '-' + index, id: CellID, value: String(value), "data-form-name": form, disabled: disabled, checked: Checked, onFocus: function (event) {
+                    if (disabled)
+                        return;
+                    if (type != 'radio')
+                        return;
+                    if (val_status.dataValue.length)
+                        return;
+                    var _a = event.target, value = _a.value, checked = _a.checked;
+                    var nextValue = [value];
+                    set_status(__assign(__assign({}, val_status), { dataValue: nextValue, eventType: 'update', eventID: $.uuidGen() }));
+                }, onChange: function (event) {
+                    if (disabled)
+                        return;
+                    var _a = event.target, value = _a.value, checked = _a.checked;
+                    var nextValue = [];
+                    if (type == 'radio') {
+                        nextValue = [value];
+                    }
+                    else if (type == 'checkbox' || type == 'checker') {
+                        if (checked) {
+                            nextValue = __spreadArray(__spreadArray([], __read(val_status.dataValue), false), [value], false);
+                        }
+                        else {
+                            var prevValue = __spreadArray([], __read(val_status.dataValue), false);
+                            prevValue.splice(val_status.dataValue.findIndex(function (v) { return v == value; }), 1);
+                            nextValue = prevValue;
+                        }
+                    }
+                    set_status(__assign(__assign({}, val_status), { dataValue: nextValue, eventType: 'update', eventID: $.uuidGen() }));
+                }, onKeyDown: function (event) {
+                    var key = event.key, shiftKey = event.shiftKey;
+                    if (type == 'checkbox' || type == 'checker') {
+                        if (key == 'Tab') {
+                            if (shiftKey) { }
+                            else { }
+                        }
+                        else if (key.match(/Arrow/)) {
+                            event.preventDefault();
+                            var dir = ['ArrowLeft', 'ArrowUp'].includes(key) ? -1 : 1;
+                            var nextIndex = index + dir;
+                            if (nextIndex < 0) {
+                                nextIndex = options.length - 1;
+                            }
+                            else if (nextIndex >= options.length) {
+                                nextIndex = 0;
+                            }
+                            $("input[data-list-index=\"".concat(componentID, "-").concat(nextIndex, "\"]")).focus();
+                        }
+                    }
+                    if (enableFormSubmit)
+                        (0, core_1.SubmitForm)(event);
+                }, tabIndex: tabIndex }),
+            _global_1.React.createElement(_functions_1.Buttons.Label.Plain, __assign({ htmlFor: CellID, className: ClassName.join(' '), tabIndex: -1, display: 'flex', ssEffectsOnActive: false, verticalAlign: 'center', gap: '1/3', flexWrap: false }, Styles),
+                IconBox,
+                $.is.string(label) ? _global_1.React.createElement(_atoms_1.Box, { children: label }) : label)
+        ];
+    });
+    return (_global_1.React.createElement(_atoms_1.Flex, { flexSizing: 'auto', freeCSS: __assign({}, params.freeCSS), className: [
+            ListClassName,
+            style_module_scss_1.default.CellBase,
+            style_module_scss_1.default['HideInput_' + hideInput],
+            style_module_scss_1.default['IconIndicator_' + !!icon],
+            style_module_scss_1.default['Tone_' + tone]
+        ].join(' '), children: Cells }));
+};
+var Comps = {
+    RadioIcon: function () { return (_global_1.React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.Icon, backgroundColor: '1.layer.base', border: true, transition: 'middle', position: 'relative', borderRadius: 'sphere', flexCenter: true })); },
+    CheckboxIcon: function () { return (_global_1.React.createElement(_atoms_1.Box, { className: [
+            style_module_scss_1.default.Icon,
+            style_module_scss_1.default.CheckboxIcon
+        ].join(' '), borderRadius: '3.tone.tertiary', backgroundColor: '1.layer.base', border: true, transition: 'middle', fontColor: 'white', position: 'relative', flexCenter: true },
+        _global_1.React.createElement(_atoms_1.FAIcon.Check, { className: style_module_scss_1.default.I, transition: 'middle', opacity: 'trans', freeCSS: {
+                zIndex: 8
+            } }))); }
+};

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

@@ -0,0 +1 @@
+export declare const Segmented: amotify.fn.Input.Segmented.Types;

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

@@ -0,0 +1,111 @@
+"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.Segmented = void 0;
+var _global_1 = require("@global");
+var _1 = require("../_");
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+exports.Segmented = {
+    Auto: function (params) {
+        params = __assign(__assign({ padding: '1/3', gap: '1/3', ssCardBox: true }, params), { cellStyles: __assign({ borderRadius: 'inherit', position: 'relative' }, params.cellStyles), cellCheckedStyles: __assign({ backgroundColor: 'theme', fontColor: 'white' }, params.cellCheckedStyles) });
+        return (_global_1.React.createElement(Core, __assign({ appearance: params.tone || 'Auto' }, params)));
+    },
+    Normal: function (params) {
+        params = __assign(__assign({ border: true, borderColor: 'theme', overflow: 'hidden', gap: 0, ssLastChildLossBorder: 'right', fontColor: '3.blur' }, params), { cellStyles: __assign({ borderRadius: 0, borderRight: true, borderColor: 'theme' }, params.cellStyles), cellCheckedStyles: __assign({ backgroundColor: 'theme', fontColor: 'white' }, params.cellCheckedStyles) });
+        params.tone = 'ThemeBorder';
+        return (_global_1.React.createElement(Core, __assign({ appearance: 'Border' }, params)));
+    },
+    Cloud: function (params) {
+        params = __assign(__assign({ padding: '1/3', gap: '1/3', backgroundColor: 'cloud' }, params), { cellStyles: __assign({ borderRadius: 'inherit', position: 'relative' }, params.cellStyles), cellCheckedStyles: __assign({ backgroundColor: 'theme', fontColor: 'white' }, params.cellCheckedStyles) });
+        return (_global_1.React.createElement(Core, __assign({ appearance: params.tone || 'Cloud' }, params)));
+    },
+    Cloud2: function (params) {
+        params.tone = 'WhiteCloud';
+        return (_global_1.React.createElement(exports.Segmented.Cloud, __assign({ fontColor: '3.blur' }, params, { cellCheckedStyles: __assign({ fontColor: '1.clear' }, params.cellCheckedStyles) })));
+    },
+    Cloud3: function (params) {
+        params.tone = 'ThemeCloud';
+        return (_global_1.React.createElement(exports.Segmented.Cloud, __assign({ backgroundColor: 'tcOpFew', fontColor: 'theme' }, params, { cellStyles: __assign({}, params.cellStyles) })));
+    },
+    Border: function (params) {
+        params = __assign(__assign({ backgroundColor: '1.layer.base', border: '2.normal', overflow: 'hidden', gap: 0, ssLastChildLossBorder: 'right', boxShadow: 0 }, params), { cellStyles: __assign({ borderRadius: 0, borderRight: '2.normal' }, params.cellStyles), cellCheckedStyles: __assign({ backgroundColor: 'tcOpFew', fontColor: 'theme' }, params.cellCheckedStyles) });
+        return (_global_1.React.createElement(Core, __assign({ appearance: params.tone || 'Border' }, params)));
+    },
+    Border2: function (params) {
+        params = __assign(__assign({ border: true, borderColor: 'theme', overflow: 'hidden', gap: 0, ssLastChildLossBorder: 'right', boxShadow: 0, fontColor: '3.blur' }, params), { cellStyles: __assign({ borderRadius: 0, borderRight: true, borderColor: 'theme' }, params.cellStyles), cellCheckedStyles: __assign({ backgroundColor: 'theme', fontColor: 'white' }, params.cellCheckedStyles) });
+        params.tone = 'ThemeBorder';
+        return (_global_1.React.createElement(Core, __assign({ appearance: 'Border' }, params)));
+    },
+    BottomLine: function (params) {
+        params = __assign(__assign({ gap: 0, fontColor: '3.blur' }, params), { cellStyles: __assign({ ssEffectsOnActive: 'ripple.theme', borderRadius: 0, padding: 1 }, params.cellStyles), cellCheckedStyles: __assign({ fontColor: 'theme' }, params.cellCheckedStyles) });
+        return (_global_1.React.createElement(Core, __assign({ appearance: 'BottomLine' }, params)));
+    },
+};
+var Core = function (params) {
+    var tone = params.tone, appearance = params.appearance, value = params.value, options = params.options, onUpdateValue = params.onUpdateValue, onUpdateValidValue = params.onUpdateValidValue, freeCSS = params.freeCSS, cellStyles = params.cellStyles, cellClassName = params.cellClassName, cellCheckedClassName = params.cellCheckedClassName, cellCheckedStyles = params.cellCheckedStyles, others = __rest(params, ["tone", "appearance", "value", "options", "onUpdateValue", "onUpdateValidValue", "freeCSS", "cellStyles", "cellClassName", "cellCheckedClassName", "cellCheckedStyles"]);
+    var _a = __read(_global_1.React.useState($.uuidGen()), 1), val_componentID = _a[0];
+    var _b = __read(_global_1.React.useState(value), 2), val_defValue = _b[0], set_defValue = _b[1];
+    var _c = __read(_global_1.React.useState(val_defValue), 2), val_value = _c[0], set_value = _c[1];
+    if (val_defValue != value) {
+        set_defValue(value);
+        set_value(value);
+    }
+    return (_global_1.React.createElement(_1.ListInputs.Radio
+    // hideInput
+    , __assign({ 
+        // hideInput
+        defaultActiveStyling: false, flexWrap: false, borderRadius: '2.tone.secondary', position: 'relative', options: options, value: val_value, componentID: val_componentID, icon: false }, others, { freeCSS: __assign({ whiteSpace: 'nowrap' }, freeCSS), cellStyles: __assign({ flexCenter: true, ssPushable: true, boxShadow: 'none' }, cellStyles), cellClassName: [
+            cellClassName,
+            style_module_scss_1.default.Label,
+            style_module_scss_1.default['Tone_' + appearance]
+        ].join(' '), cellCheckedStyles: __assign({ isBoldFont: true }, cellCheckedStyles), cellCheckedClassName: [
+            cellCheckedClassName,
+            style_module_scss_1.default.Checked
+        ].join(' '), tone: 'custom', onUpdateValue: onUpdateValue, onUpdateValidValue: function (args) {
+            if (onUpdateValidValue)
+                onUpdateValidValue(args);
+            if (appearance == 'BottomLine') {
+                set_value(args.value[0]);
+            }
+        } })));
+};

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

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

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

@@ -0,0 +1,154 @@
+"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.SelectInput = void 0;
+var _global_1 = require("@global");
+var useState = _global_1.React.useState;
+var _atoms_1 = require("@atoms");
+var core_1 = require("../core");
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+var style_module_scss_2 = __importDefault(require("../style.module.scss"));
+function DefaultValidation(props) {
+    var value = props.value, params = props.params;
+    var _a = params, required = _a.required, options = _a.options;
+    var notice = [];
+    if (required) {
+        if (!options.length || (options.length && $.is.nullish(JSON.parse(value)))) {
+            notice.push({ type: 'invalid', label: '必須項目です' });
+        }
+    }
+    return {
+        ok: !notice.filter(function (_a) {
+            var type = _a.type;
+            return type == 'invalid';
+        }).length,
+        notice: notice
+    };
+}
+var SelectInput = function (params) {
+    var _a = params.value, value = _a === void 0 ? null : _a, placeholder = params.placeholder, _b = params.options, options = _b === void 0 ? [] : _b;
+    var SelectedExist = 0;
+    var SelectedValue = JSON.stringify(value);
+    var DefaultOptions = options.map(function (option) {
+        var value = option.value, label = option.label;
+        var Value = JSON.stringify(value);
+        var Selected = Value == SelectedValue;
+        SelectedExist |= Number(Selected);
+        return __assign(__assign({}, option), { value: Value, label: label });
+    });
+    if (!SelectedExist)
+        value = null;
+    var DefaultValue = JSON.stringify(value);
+    return (_global_1.React.createElement(Core, __assign({}, params, { value: DefaultValue, options: DefaultOptions })));
+};
+exports.SelectInput = SelectInput;
+var Core = function (params) {
+    var _a;
+    var tone = params.tone, required = params.required, form = params.form, className = params.className, enableFormSubmit = params.enableFormSubmit, enableUnSelected = params.enableUnSelected, 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, options = params.options, placeholder = params.placeholder, leftIndicator = params.leftIndicator, rightIndicator = params.rightIndicator, rightIcon = params.rightIcon, others = __rest(params, ["tone", "required", "form", "className", "enableFormSubmit", "enableUnSelected", "checkValidationAtFirst", "onChange", "onKeyDown", "onValidate", "onUpdateValue", "onUpdateValidValue", "value", "options", "placeholder", "leftIndicator", "rightIndicator", "rightIcon"]);
+    var Default_Status = {
+        componentID: params.componentID || '',
+        dataValue: value,
+        eventType: 'init',
+        eventID: $.uuidGen()
+    };
+    var _c = __read(useState(Default_Status), 2), val_status = _c[0], set_status = _c[1];
+    var _d = __read(useState({
+        ok: false,
+        notice: []
+    }), 2), val_validate = _d[0], set_validate = _d[1];
+    (0, core_1.CommonEffects)({
+        type: 'select',
+        params: params,
+        val_status: val_status,
+        set_status: set_status,
+        ExtraOverrideParams: {
+            dataValue: value,
+            formatValue: value,
+        },
+        val_validate: val_validate,
+        set_validate: set_validate,
+        DefaultValidation: DefaultValidation,
+        onUpdateValue: onUpdateValue,
+        onUpdateValidValue: onUpdateValidValue
+    });
+    var SelectedElement = _global_1.React.createElement(_atoms_1.Box, { fontColor: '4.thin' }, placeholder || '選択');
+    if (val_status.dataValue) {
+        var Selected = options.find(function (option) { return option.value == val_status.dataValue; });
+        if (Selected)
+            SelectedElement = (_a = Selected.displayLabel) !== null && _a !== void 0 ? _a : Selected.label;
+    }
+    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(_atoms_1.Box, { className: [
+                className,
+                style_module_scss_1.default.SelectLegend,
+                style_module_scss_2.default.InputCover
+            ].join(' ') },
+            SelectedElement,
+            _global_1.React.createElement("select", __assign({ "data-form": form, "data-input-type": 'select', "data-validation": val_validate.ok, "data-component-id": val_status.componentID, "data-value": val_status.dataValue, value: val_status.dataValue, onKeyDown: function (event) {
+                    if (onKeyDown)
+                        onKeyDown(event);
+                    if (enableFormSubmit)
+                        (0, core_1.SubmitForm)(event);
+                }, onChange: function (event) {
+                    var rawValue = event.target.value;
+                    if (val_validate.ok)
+                        set_validate({ ok: false, notice: [] });
+                    set_status(__assign(__assign({}, val_status), { dataValue: rawValue, eventType: 'update', eventID: $.uuidGen() }));
+                    if (onChange)
+                        onChange(event);
+                } }, others, { className: style_module_scss_1.default.Select }),
+                _global_1.React.createElement(Options, { params: params })))));
+};
+var Options = function (props) {
+    var _a = props.params, value = _a.value, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '選択してください' : _c, _d = _a.enableUnSelected, enableUnSelected = _d === void 0 ? true : _d;
+    var SelectedValue = String(value);
+    var Options = options.map(function (option) {
+        var value = option.value, label = option.label;
+        var Value = String(value);
+        return (_global_1.React.createElement("option", { value: Value, key: Value, selected: Value == SelectedValue, children: label }));
+    });
+    if (enableUnSelected) {
+        Options.unshift(_global_1.React.createElement("option", { key: 0, value: JSON.stringify(null), selected: SelectedValue == 'null', children: placeholder }));
+    }
+    return (_global_1.React.createElement(_global_1.React.Fragment, null, Options));
+};

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

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