amotify 0.2.198 → 0.2.199
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/demo/esbuild/designBook.tsx +6 -0
- package/demo/next/src/app/(router)/designbook/page.tsx +2853 -66
- package/demo/next/src/app/(router)/page.tsx +38 -2830
- package/dist/@styles/style.css +1 -1
- package/dist/@styles/var.css +1 -1
- package/dist/fn/Input/Autocomplete.d.ts +8 -6
- package/dist/fn/Input/Autocomplete.js +1 -1
- package/dist/fn/Input/Parts.js +1 -1
- package/dist/fn/Input/TextField.js +1 -1
- package/dist/fn/Input/core.js +1 -1
- package/package.json +1 -1
package/dist/@styles/var.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--cH_comun: 237;--cS_comun: 76%;--cL_comun: 58%;--color_comun-hsl: 237, 76%, 58%;--cH_leaf: 159;--cS_leaf: 78%;--cL_leaf: 38%;--color_leaf-hsl: 159, 78%, 38%;--cH_heart: 2;--cS_heart: 81%;--cL_heart: 63%;--color_heart-hsl: 2, 81%, 63%;--cH_droplet: 215;--cS_droplet: 82%;--cL_droplet: 51%;--color_droplet-hsl: 215, 82%, 51%;--cH_brick: 351;--cS_brick: 80%;--cL_brick: 39%;--color_brick-hsl: 351, 80%, 39%;--cH_flower: 350;--cS_flower: 78%;--cL_flower: 75%;--color_flower-hsl: 350, 78%, 75%;--cH_lip: 340;--cS_lip: 69%;--cL_lip: 49%;--color_lip-hsl: 340, 69%, 49%;--cH_wine: 317;--cS_wine: 41%;--cL_wine: 30%;--color_wine-hsl: 317, 41%, 30%;--cH_theater: 301;--cS_theater: 88%;--cL_theater: 49%;--color_theater-hsl: 301, 88%, 49%;--cH_bat: 272;--cS_bat: 81%;--cL_bat: 21%;--color_bat-hsl: 272, 81%, 21%;--cH_poizon: 268;--cS_poizon: 58%;--cL_poizon: 50%;--color_poizon-hsl: 268, 58%, 50%;--cH_eggplant: 264;--cS_eggplant: 100%;--cL_eggplant: 62%;--color_eggplant-hsl: 264, 100%, 62%;--cH_ufo: 253;--cS_ufo: 81%;--cL_ufo: 58%;--color_ufo-hsl: 253, 81%, 58%;--cH_alien: 252;--cS_alien: 92%;--cL_alien: 57%;--color_alien-hsl: 252, 92%, 57%;--cH_tombstone: 251;--cS_tombstone: 14%;--cL_tombstone: 70%;--color_tombstone-hsl: 251, 14%, 70%;--cH_ninja: 242;--cS_ninja: 100%;--cL_ninja: 68%;--color_ninja-hsl: 242, 100%, 68%;--cH_moon: 240;--cS_moon: 16%;--cL_moon: 24%;--color_moon-hsl: 240, 16%, 24%;--cH_rain: 240;--cS_rain: 32%;--cL_rain: 54%;--color_rain-hsl: 240, 32%, 54%;--cH_unicorn: 238;--cS_unicorn: 70%;--cL_unicorn: 74%;--color_unicorn-hsl: 238, 70%, 74%;--cH_axe: 226;--cS_axe: 22%;--cL_axe: 35%;--color_axe-hsl: 226, 22%, 35%;--cH_gem: 221;--cS_gem: 85%;--cL_gem: 43%;--color_gem-hsl: 221, 85%, 43%;--cH_soap: 217;--cS_soap: 85%;--cL_soap: 32%;--color_soap-hsl: 217, 85%, 32%;--cH_drizzle: 213;--cS_drizzle: 33%;--cL_drizzle: 68%;--color_drizzle-hsl: 213, 33%, 68%;--cH_building: 204;--cS_building: 3%;--cL_building: 72%;--color_building-hsl: 204, 3%, 72%;--cH_fish: 194;--cS_fish: 97%;--cL_fish: 34%;--color_fish-hsl: 194, 97%, 34%;--cH_icicles: 191;--cS_icicles: 61%;--cL_icicles: 58%;--color_icicles-hsl: 191, 61%, 58%;--cH_water: 187;--cS_water: 30%;--cL_water: 54%;--color_water-hsl: 187, 30%, 54%;--cH_tree1: 186;--cS_tree1: 85%;--cL_tree1: 23%;--color_tree1-hsl: 186, 85%, 23%;--cH_tree2: 185;--cS_tree2: 97%;--cL_tree2: 34%;--color_tree2-hsl: 185, 97%, 34%;--cH_tree3: 183;--cS_tree3: 86%;--cL_tree3: 19%;--color_tree3-hsl: 183, 86%, 19%;--cH_battery: 170;--cS_battery: 90%;--cL_battery: 39%;--color_battery-hsl: 170, 90%, 39%;--cH_seedle: 145;--cS_seedle: 94%;--cL_seedle: 40%;--color_seedle-hsl: 145, 94%, 40%;--cH_greenTea: 144;--cS_greenTea: 43%;--cL_greenTea: 41%;--color_greenTea-hsl: 144, 43%, 41%;--cH_oak: 101;--cS_oak: 24%;--cL_oak: 66%;--color_oak-hsl: 101, 24%, 66%;--cH_salad: 68;--cS_salad: 90%;--cL_salad: 43%;--color_salad-hsl: 68, 90%, 43%;--cH_cloudy: 60;--cS_cloudy: 5%;--cL_cloudy: 79%;--color_cloudy-hsl: 60, 5%, 79%;--cH_lemon: 53;--cS_lemon: 78%;--cL_lemon: 70%;--color_lemon-hsl: 53, 78%, 70%;--cH_angel: 47;--cS_angel: 100%;--cL_angel: 50%;--color_angel-hsl: 47, 100%, 50%;--cH_parasol: 42;--cS_parasol: 86%;--cL_parasol: 70%;--color_parasol-hsl: 42, 86%, 70%;--cH_pizza: 40;--cS_pizza: 92%;--cL_pizza: 52%;--color_pizza-hsl: 40, 92%, 52%;--cH_thunder: 40;--cS_thunder: 70%;--cL_thunder: 57%;--color_thunder-hsl: 40, 70%, 57%;--cH_latte: 33;--cS_latte: 51%;--cL_latte: 73%;--color_latte-hsl: 33, 51%, 73%;--cH_island: 27;--cS_island: 91%;--cL_island: 55%;--color_island-hsl: 27, 91%, 55%;--cH_shovel: 19;--cS_shovel: 29%;--cL_shovel: 37%;--color_shovel-hsl: 19, 29%, 37%;--cH_coffee: 18;--cS_coffee: 33%;--cL_coffee: 24%;--color_coffee-hsl: 18, 33%, 24%;--cH_carrot: 14;--cS_carrot: 84%;--cL_carrot: 59%;--color_carrot-hsl: 14, 84%, 59%;--cH_cactus: 8;--cS_cactus: 17%;--cL_cactus: 62%;--color_cactus-hsl: 8, 17%, 62%;--cH_volcano: 6;--cS_volcano: 84%;--cL_volcano: 48%;--color_volcano-hsl: 6, 84%, 48%;--cH_choco: 2;--cS_choco: 55%;--cL_choco: 57%;--color_choco-hsl: 2, 55%, 57%;--cH_industry: 0;--cS_industry: 0%;--cL_industry: 50%;--color_industry-hsl: 0, 0%, 50%;--cH_gun: 0;--cS_gun: 0%;--cL_gun: 37%;--color_gun-hsl: 0, 0%, 37%;--cH_galaxy: 0;--cS_galaxy: 0%;--cL_galaxy: 5%;--color_galaxy-hsl: 0, 0%, 5%;--cH_line: 120;--cS_line: 100%;--cL_line: 37%;--color_line-hsl: 120, 100%, 37%;--cH_twitter: 203;--cS_twitter: 89%;--cL_twitter: 52%;--color_twitter-hsl: 203, 89%, 52%;--cH_amazon: 36;--cS_amazon: 100%;--cL_amazon: 50%;--color_amazon-hsl: 36, 100%, 50%;--cH_facebook: 220;--cS_facebook: 46%;--cL_facebook: 48%;--color_facebook-hsl: 220, 46%, 48%;--cH_android: 101;--cS_android: 47%;--cL_android: 55%;--color_android-hsl: 101, 47%, 55%;--cH_slackBlue: 194;--cS_slackBlue: 86%;--cL_slackBlue: 58%;--color_slackBlue-hsl: 194, 86%, 58%;--cH_slackGreen: 155;--cS_slackGreen: 60%;--cL_slackGreen: 45%;--color_slackGreen-hsl: 155, 60%, 45%;--cH_slackRed: 341;--cS_slackRed: 76%;--cL_slackRed: 50%;--color_slackRed-hsl: 341, 76%, 50%;--cH_slackYellow: 42;--cS_slackYellow: 83%;--cL_slackYellow: 55%;--color_slackYellow-hsl: 42, 83%, 55%;--cH_slackBase: 299;--cS_slackBase: 56%;--cL_slackBase: 19%;--color_slackBase-hsl: 299, 56%, 19%;--cH_googleBlue: 217;--cS_googleBlue: 89%;--cL_googleBlue: 61%;--color_googleBlue-hsl: 217, 89%, 61%;--cH_googleGreen: 151;--cS_googleGreen: 83%;--cL_googleGreen: 34%;--color_googleGreen-hsl: 151, 83%, 34%;--cH_googleYellow: 44;--cS_googleYellow: 100%;--cL_googleYellow: 48%;--color_googleYellow-hsl: 44, 100%, 48%;--cH_googleRed: 5;--cS_googleRed: 69%;--cL_googleRed: 54%;--color_googleRed-hsl: 5, 69%, 54%;--cH: 0;--cS: 0%;--cL: 0%;--color-theme-hsl: 0, 0%, 0%;--color-theme-opacity-high: .5;--color-theme-opacity-middle: .25;--color-theme-opacity-low: .15;--color-theme-opacity-few: .085;--color-positive-rgb: 68, 204, 170;--color-negative-rgb: 255, 68, 119;--color-warning-rgb: 248, 150, 0;--color-dark-rgb: 69, 81, 92;--color-positive: rgba(var(--color-positive-rgb), 1);--color-negative: rgba(var(--color-negative-rgb), 1);--color-warning: rgba(var(--color-warning-rgb), 1);--color-dark: rgba(var(--color-dark-rgb), 1);--color-layer0-hsl: var(--cH), 10%, 99%;--color-layer1-hsl: var(--cH), 6%, 99%;--color-layer2-hsl: var(--cH), 6%, 96%;--color-layer3-hsl: var(--cH), 6%, 92%;--color-layer4-hsl: var(--cH), 5%, 89%;--color-layer5-hsl: var(--cH), 4%, 85%;--color-layer6-hsl: var(--cH), 3%, 75%;--color-base-rgb: 252, 252, 252;--color-gray-rgb: 211, 216, 222;--color-cloud-rgb: 241, 243, 248;--color-mono-positive-rgb: 0, 0, 0;--color-mono-negative-rgb: 255, 255, 255;--font-color-logoTitle: hsl(218, 45%, 22%);--sc: 60, 64, 67;--shadow_style_0: 0px 1px 2px 0px;--shadow_style_1: 0px 2px 4px 0px;--shadow_style_2: 1px 3px 8px 0px;--shadow_style_3: 2px 6px 12px;--shadow_style_4: .4rem 1rem 2rem;--shadow_style_5: 1rem 1.5rem 3rem;--shadow_color_min: rgba(var(--sc), .05);--shadow_color_normal: rgba(var(--sc), .15);--shadow_color_remark: rgba(var(--sc), .28);--shadow_color_max: rgba(var(--sc), .41);--font-color1-rgb: 0, 0, 0;--font-color2-rgb: 51, 51, 51;--font-color3-rgb: 118, 125, 137;--font-color4-rgb: 152, 158, 167;--font-color5-rgb: 189, 194, 200;--font-color6-rgb: 210, 210, 220;--font-size0: 10px;--font-size1: 12px;--font-size2: 14px;--font-size3: 16px;--font-size4: 20px;--font-size5: 24px;--font-size6: 32px;--font-size7: 44px;--font-size8: 60px;--border-color-thin: hsl(220, 9%, 92%);--border-color-normal: hsl(220, 9%, 87%);--border-color-thick: hsl(0, 0%, 40%);--border-radius1: 4px;--border-radius2: 6px;--border-radius3: 8px;--border-radius4: 12px;--border-radius5: 18px;--border-radius6: 24px;--border-radius7: 30px;--animation-time1: .1s;--animation-time2: .15s;--animation-time3: .25s;--animation-time4: .4s;--animation-style1: cubic-bezier(.35, .46, 0, .99);--animation-style2: cubic-bezier(.1, .85, .1, .85);--safe-area-top: env(safe-area-inset-top);--safe-area-bottom: env(safe-area-inset-bottom);--safe-area-left: env(safe-area-inset-left);--safe-area-right: env(safe-area-inset-right);--grid-unit: 12px;--viewHeight: 100vh;--viewWidth: 100vw;--sideNavHeight: 0px;--topNavHeight: 0px;--sideNavWidth: 0px;--contentHeight: 0px;--contnetWidth: 0px;--topBase: 0px}@supports (-webkit-touch-callout: none){:root{--viewHeight: -webkit-fill-available}}.bdsTC_comun{--cH: var(--cH_comun);--cS: var(--cS_comun);--cL: var(--cL_comun);--color-theme-hsl: var(--color_comun-hsl)}.bdsTC_leaf{--cH: var(--cH_leaf);--cS: var(--cS_leaf);--cL: var(--cL_leaf);--color-theme-hsl: var(--color_leaf-hsl)}.bdsTC_heart{--cH: var(--cH_heart);--cS: var(--cS_heart);--cL: var(--cL_heart);--color-theme-hsl: var(--color_heart-hsl)}.bdsTC_droplet{--cH: var(--cH_droplet);--cS: var(--cS_droplet);--cL: var(--cL_droplet);--color-theme-hsl: var(--color_droplet-hsl)}.bdsTC_brick{--cH: var(--cH_brick);--cS: var(--cS_brick);--cL: var(--cL_brick);--color-theme-hsl: var(--color_brick-hsl)}.bdsTC_flower{--cH: var(--cH_flower);--cS: var(--cS_flower);--cL: var(--cL_flower);--color-theme-hsl: var(--color_flower-hsl)}.bdsTC_lip{--cH: var(--cH_lip);--cS: var(--cS_lip);--cL: var(--cL_lip);--color-theme-hsl: var(--color_lip-hsl)}.bdsTC_wine{--cH: var(--cH_wine);--cS: var(--cS_wine);--cL: var(--cL_wine);--color-theme-hsl: var(--color_wine-hsl)}.bdsTC_theater{--cH: var(--cH_theater);--cS: var(--cS_theater);--cL: var(--cL_theater);--color-theme-hsl: var(--color_theater-hsl)}.bdsTC_bat{--cH: var(--cH_bat);--cS: var(--cS_bat);--cL: var(--cL_bat);--color-theme-hsl: var(--color_bat-hsl)}.bdsTC_poizon{--cH: var(--cH_poizon);--cS: var(--cS_poizon);--cL: var(--cL_poizon);--color-theme-hsl: var(--color_poizon-hsl)}.bdsTC_eggplant{--cH: var(--cH_eggplant);--cS: var(--cS_eggplant);--cL: var(--cL_eggplant);--color-theme-hsl: var(--color_eggplant-hsl)}.bdsTC_ufo{--cH: var(--cH_ufo);--cS: var(--cS_ufo);--cL: var(--cL_ufo);--color-theme-hsl: var(--color_ufo-hsl)}.bdsTC_alien{--cH: var(--cH_alien);--cS: var(--cS_alien);--cL: var(--cL_alien);--color-theme-hsl: var(--color_alien-hsl)}.bdsTC_tombstone{--cH: var(--cH_tombstone);--cS: var(--cS_tombstone);--cL: var(--cL_tombstone);--color-theme-hsl: var(--color_tombstone-hsl)}.bdsTC_ninja{--cH: var(--cH_ninja);--cS: var(--cS_ninja);--cL: var(--cL_ninja);--color-theme-hsl: var(--color_ninja-hsl)}.bdsTC_moon{--cH: var(--cH_moon);--cS: var(--cS_moon);--cL: var(--cL_moon);--color-theme-hsl: var(--color_moon-hsl)}.bdsTC_rain{--cH: var(--cH_rain);--cS: var(--cS_rain);--cL: var(--cL_rain);--color-theme-hsl: var(--color_rain-hsl)}.bdsTC_unicorn{--cH: var(--cH_unicorn);--cS: var(--cS_unicorn);--cL: var(--cL_unicorn);--color-theme-hsl: var(--color_unicorn-hsl)}.bdsTC_axe{--cH: var(--cH_axe);--cS: var(--cS_axe);--cL: var(--cL_axe);--color-theme-hsl: var(--color_axe-hsl)}.bdsTC_gem{--cH: var(--cH_gem);--cS: var(--cS_gem);--cL: var(--cL_gem);--color-theme-hsl: var(--color_gem-hsl)}.bdsTC_soap{--cH: var(--cH_soap);--cS: var(--cS_soap);--cL: var(--cL_soap);--color-theme-hsl: var(--color_soap-hsl)}.bdsTC_drizzle{--cH: var(--cH_drizzle);--cS: var(--cS_drizzle);--cL: var(--cL_drizzle);--color-theme-hsl: var(--color_drizzle-hsl)}.bdsTC_building{--cH: var(--cH_building);--cS: var(--cS_building);--cL: var(--cL_building);--color-theme-hsl: var(--color_building-hsl)}.bdsTC_fish{--cH: var(--cH_fish);--cS: var(--cS_fish);--cL: var(--cL_fish);--color-theme-hsl: var(--color_fish-hsl)}.bdsTC_icicles{--cH: var(--cH_icicles);--cS: var(--cS_icicles);--cL: var(--cL_icicles);--color-theme-hsl: var(--color_icicles-hsl)}.bdsTC_water{--cH: var(--cH_water);--cS: var(--cS_water);--cL: var(--cL_water);--color-theme-hsl: var(--color_water-hsl)}.bdsTC_tree1{--cH: var(--cH_tree1);--cS: var(--cS_tree1);--cL: var(--cL_tree1);--color-theme-hsl: var(--color_tree1-hsl)}.bdsTC_tree2{--cH: var(--cH_tree2);--cS: var(--cS_tree2);--cL: var(--cL_tree2);--color-theme-hsl: var(--color_tree2-hsl)}.bdsTC_tree3{--cH: var(--cH_tree3);--cS: var(--cS_tree3);--cL: var(--cL_tree3);--color-theme-hsl: var(--color_tree3-hsl)}.bdsTC_battery{--cH: var(--cH_battery);--cS: var(--cS_battery);--cL: var(--cL_battery);--color-theme-hsl: var(--color_battery-hsl)}.bdsTC_seedle{--cH: var(--cH_seedle);--cS: var(--cS_seedle);--cL: var(--cL_seedle);--color-theme-hsl: var(--color_seedle-hsl)}.bdsTC_greenTea{--cH: var(--cH_greenTea);--cS: var(--cS_greenTea);--cL: var(--cL_greenTea);--color-theme-hsl: var(--color_greenTea-hsl)}.bdsTC_oak{--cH: var(--cH_oak);--cS: var(--cS_oak);--cL: var(--cL_oak);--color-theme-hsl: var(--color_oak-hsl)}.bdsTC_salad{--cH: var(--cH_salad);--cS: var(--cS_salad);--cL: var(--cL_salad);--color-theme-hsl: var(--color_salad-hsl)}.bdsTC_cloudy{--cH: var(--cH_cloudy);--cS: var(--cS_cloudy);--cL: var(--cL_cloudy);--color-theme-hsl: var(--color_cloudy-hsl)}.bdsTC_lemon{--cH: var(--cH_lemon);--cS: var(--cS_lemon);--cL: var(--cL_lemon);--color-theme-hsl: var(--color_lemon-hsl)}.bdsTC_angel{--cH: var(--cH_angel);--cS: var(--cS_angel);--cL: var(--cL_angel);--color-theme-hsl: var(--color_angel-hsl)}.bdsTC_parasol{--cH: var(--cH_parasol);--cS: var(--cS_parasol);--cL: var(--cL_parasol);--color-theme-hsl: var(--color_parasol-hsl)}.bdsTC_pizza{--cH: var(--cH_pizza);--cS: var(--cS_pizza);--cL: var(--cL_pizza);--color-theme-hsl: var(--color_pizza-hsl)}.bdsTC_thunder{--cH: var(--cH_thunder);--cS: var(--cS_thunder);--cL: var(--cL_thunder);--color-theme-hsl: var(--color_thunder-hsl)}.bdsTC_latte{--cH: var(--cH_latte);--cS: var(--cS_latte);--cL: var(--cL_latte);--color-theme-hsl: var(--color_latte-hsl)}.bdsTC_island{--cH: var(--cH_island);--cS: var(--cS_island);--cL: var(--cL_island);--color-theme-hsl: var(--color_island-hsl)}.bdsTC_shovel{--cH: var(--cH_shovel);--cS: var(--cS_shovel);--cL: var(--cL_shovel);--color-theme-hsl: var(--color_shovel-hsl)}.bdsTC_coffee{--cH: var(--cH_coffee);--cS: var(--cS_coffee);--cL: var(--cL_coffee);--color-theme-hsl: var(--color_coffee-hsl)}.bdsTC_carrot{--cH: var(--cH_carrot);--cS: var(--cS_carrot);--cL: var(--cL_carrot);--color-theme-hsl: var(--color_carrot-hsl)}.bdsTC_cactus{--cH: var(--cH_cactus);--cS: var(--cS_cactus);--cL: var(--cL_cactus);--color-theme-hsl: var(--color_cactus-hsl)}.bdsTC_volcano{--cH: var(--cH_volcano);--cS: var(--cS_volcano);--cL: var(--cL_volcano);--color-theme-hsl: var(--color_volcano-hsl)}.bdsTC_choco{--cH: var(--cH_choco);--cS: var(--cS_choco);--cL: var(--cL_choco);--color-theme-hsl: var(--color_choco-hsl)}.bdsTC_industry{--cH: var(--cH_industry);--cS: var(--cS_industry);--cL: var(--cL_industry);--color-theme-hsl: var(--color_industry-hsl)}.bdsTC_gun{--cH: var(--cH_gun);--cS: var(--cS_gun);--cL: var(--cL_gun);--color-theme-hsl: var(--color_gun-hsl)}.bdsTC_galaxy{--cH: var(--cH_galaxy);--cS: var(--cS_galaxy);--cL: var(--cL_galaxy);--color-theme-hsl: var(--color_galaxy-hsl)}.bdsTC_line{--cH: var(--cH_line);--cS: var(--cS_line);--cL: var(--cL_line);--color-theme-hsl: var(--color_line-hsl)}.bdsTC_twitter{--cH: var(--cH_twitter);--cS: var(--cS_twitter);--cL: var(--cL_twitter);--color-theme-hsl: var(--color_twitter-hsl)}.bdsTC_amazon{--cH: var(--cH_amazon);--cS: var(--cS_amazon);--cL: var(--cL_amazon);--color-theme-hsl: var(--color_amazon-hsl)}.bdsTC_facebook{--cH: var(--cH_facebook);--cS: var(--cS_facebook);--cL: var(--cL_facebook);--color-theme-hsl: var(--color_facebook-hsl)}.bdsTC_android{--cH: var(--cH_android);--cS: var(--cS_android);--cL: var(--cL_android);--color-theme-hsl: var(--color_android-hsl)}.bdsTC_slackBlue{--cH: var(--cH_slackBlue);--cS: var(--cS_slackBlue);--cL: var(--cL_slackBlue);--color-theme-hsl: var(--color_slackBlue-hsl)}.bdsTC_slackGreen{--cH: var(--cH_slackGreen);--cS: var(--cS_slackGreen);--cL: var(--cL_slackGreen);--color-theme-hsl: var(--color_slackGreen-hsl)}.bdsTC_slackRed{--cH: var(--cH_slackRed);--cS: var(--cS_slackRed);--cL: var(--cL_slackRed);--color-theme-hsl: var(--color_slackRed-hsl)}.bdsTC_slackYellow{--cH: var(--cH_slackYellow);--cS: var(--cS_slackYellow);--cL: var(--cL_slackYellow);--color-theme-hsl: var(--color_slackYellow-hsl)}.bdsTC_slackBase{--cH: var(--cH_slackBase);--cS: var(--cS_slackBase);--cL: var(--cL_slackBase);--color-theme-hsl: var(--color_slackBase-hsl)}.bdsTC_googleBlue{--cH: var(--cH_googleBlue);--cS: var(--cS_googleBlue);--cL: var(--cL_googleBlue);--color-theme-hsl: var(--color_googleBlue-hsl)}.bdsTC_googleGreen{--cH: var(--cH_googleGreen);--cS: var(--cS_googleGreen);--cL: var(--cL_googleGreen);--color-theme-hsl: var(--color_googleGreen-hsl)}.bdsTC_googleYellow{--cH: var(--cH_googleYellow);--cS: var(--cS_googleYellow);--cL: var(--cL_googleYellow);--color-theme-hsl: var(--color_googleYellow-hsl)}.bdsTC_googleRed{--cH: var(--cH_googleRed);--cS: var(--cS_googleRed);--cL: var(--cL_googleRed);--color-theme-hsl: var(--color_googleRed-hsl)}.bdsTNflat{--border-color-thin: hsl(220, 9%, 94%);--border-color-normal: hsl(220, 9%, 90%)}.bdsDM_dark{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 5%, 8%;--color-layer1-hsl: var(--cH), 5%, 13%;--color-layer2-hsl: var(--cH), 5%, 16.3%;--color-layer3-hsl: var(--cH), 5%, 19.6%;--color-layer4-hsl: var(--cH), 5%, 23%;--color-layer5-hsl: var(--cH), 5%, 28%;--color-layer6-hsl: var(--cH), 5%, 33%}.bdsDM_dim{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 8%, 13%;--color-layer1-hsl: var(--cH), 8%, 20%;--color-layer2-hsl: var(--cH), 8%, 23.3%;--color-layer3-hsl: var(--cH), 8%, 26.6%;--color-layer4-hsl: var(--cH), 8%, 30%;--color-layer5-hsl: var(--cH), 8%, 35%;--color-layer6-hsl: var(--cH), 8%, 40%}@media (prefers-color-scheme: dark){.bdsDM_auto{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 5%, 8%;--color-layer1-hsl: var(--cH), 5%, 13%;--color-layer2-hsl: var(--cH), 5%, 16.3%;--color-layer3-hsl: var(--cH), 5%, 19.6%;--color-layer4-hsl: var(--cH), 5%, 23%;--color-layer5-hsl: var(--cH), 5%, 28%;--color-layer6-hsl: var(--cH), 5%, 33%}}
|
|
1
|
+
:root{--cH_comun: 237;--cS_comun: 76%;--cL_comun: 58%;--color_comun-hsl: 237, 76%, 58%;--cH_leaf: 159;--cS_leaf: 78%;--cL_leaf: 38%;--color_leaf-hsl: 159, 78%, 38%;--cH_heart: 2;--cS_heart: 81%;--cL_heart: 63%;--color_heart-hsl: 2, 81%, 63%;--cH_droplet: 215;--cS_droplet: 82%;--cL_droplet: 51%;--color_droplet-hsl: 215, 82%, 51%;--cH_brick: 351;--cS_brick: 80%;--cL_brick: 39%;--color_brick-hsl: 351, 80%, 39%;--cH_flower: 350;--cS_flower: 78%;--cL_flower: 75%;--color_flower-hsl: 350, 78%, 75%;--cH_lip: 340;--cS_lip: 69%;--cL_lip: 49%;--color_lip-hsl: 340, 69%, 49%;--cH_wine: 317;--cS_wine: 41%;--cL_wine: 30%;--color_wine-hsl: 317, 41%, 30%;--cH_theater: 301;--cS_theater: 88%;--cL_theater: 49%;--color_theater-hsl: 301, 88%, 49%;--cH_bat: 272;--cS_bat: 81%;--cL_bat: 21%;--color_bat-hsl: 272, 81%, 21%;--cH_poizon: 268;--cS_poizon: 58%;--cL_poizon: 50%;--color_poizon-hsl: 268, 58%, 50%;--cH_eggplant: 264;--cS_eggplant: 100%;--cL_eggplant: 62%;--color_eggplant-hsl: 264, 100%, 62%;--cH_ufo: 253;--cS_ufo: 81%;--cL_ufo: 58%;--color_ufo-hsl: 253, 81%, 58%;--cH_alien: 252;--cS_alien: 92%;--cL_alien: 57%;--color_alien-hsl: 252, 92%, 57%;--cH_tombstone: 251;--cS_tombstone: 14%;--cL_tombstone: 70%;--color_tombstone-hsl: 251, 14%, 70%;--cH_ninja: 242;--cS_ninja: 100%;--cL_ninja: 68%;--color_ninja-hsl: 242, 100%, 68%;--cH_moon: 240;--cS_moon: 16%;--cL_moon: 24%;--color_moon-hsl: 240, 16%, 24%;--cH_rain: 240;--cS_rain: 32%;--cL_rain: 54%;--color_rain-hsl: 240, 32%, 54%;--cH_unicorn: 238;--cS_unicorn: 70%;--cL_unicorn: 74%;--color_unicorn-hsl: 238, 70%, 74%;--cH_axe: 226;--cS_axe: 22%;--cL_axe: 35%;--color_axe-hsl: 226, 22%, 35%;--cH_gem: 221;--cS_gem: 85%;--cL_gem: 43%;--color_gem-hsl: 221, 85%, 43%;--cH_soap: 217;--cS_soap: 85%;--cL_soap: 32%;--color_soap-hsl: 217, 85%, 32%;--cH_drizzle: 213;--cS_drizzle: 33%;--cL_drizzle: 68%;--color_drizzle-hsl: 213, 33%, 68%;--cH_building: 204;--cS_building: 3%;--cL_building: 72%;--color_building-hsl: 204, 3%, 72%;--cH_fish: 194;--cS_fish: 97%;--cL_fish: 34%;--color_fish-hsl: 194, 97%, 34%;--cH_icicles: 191;--cS_icicles: 61%;--cL_icicles: 58%;--color_icicles-hsl: 191, 61%, 58%;--cH_water: 187;--cS_water: 30%;--cL_water: 54%;--color_water-hsl: 187, 30%, 54%;--cH_tree1: 186;--cS_tree1: 85%;--cL_tree1: 23%;--color_tree1-hsl: 186, 85%, 23%;--cH_tree2: 185;--cS_tree2: 97%;--cL_tree2: 34%;--color_tree2-hsl: 185, 97%, 34%;--cH_tree3: 183;--cS_tree3: 86%;--cL_tree3: 19%;--color_tree3-hsl: 183, 86%, 19%;--cH_battery: 170;--cS_battery: 90%;--cL_battery: 39%;--color_battery-hsl: 170, 90%, 39%;--cH_seedle: 145;--cS_seedle: 94%;--cL_seedle: 40%;--color_seedle-hsl: 145, 94%, 40%;--cH_greenTea: 144;--cS_greenTea: 43%;--cL_greenTea: 41%;--color_greenTea-hsl: 144, 43%, 41%;--cH_oak: 101;--cS_oak: 24%;--cL_oak: 66%;--color_oak-hsl: 101, 24%, 66%;--cH_salad: 68;--cS_salad: 90%;--cL_salad: 43%;--color_salad-hsl: 68, 90%, 43%;--cH_cloudy: 60;--cS_cloudy: 5%;--cL_cloudy: 79%;--color_cloudy-hsl: 60, 5%, 79%;--cH_lemon: 53;--cS_lemon: 78%;--cL_lemon: 70%;--color_lemon-hsl: 53, 78%, 70%;--cH_angel: 47;--cS_angel: 100%;--cL_angel: 50%;--color_angel-hsl: 47, 100%, 50%;--cH_parasol: 42;--cS_parasol: 86%;--cL_parasol: 70%;--color_parasol-hsl: 42, 86%, 70%;--cH_pizza: 40;--cS_pizza: 92%;--cL_pizza: 52%;--color_pizza-hsl: 40, 92%, 52%;--cH_thunder: 40;--cS_thunder: 70%;--cL_thunder: 57%;--color_thunder-hsl: 40, 70%, 57%;--cH_latte: 33;--cS_latte: 51%;--cL_latte: 73%;--color_latte-hsl: 33, 51%, 73%;--cH_island: 27;--cS_island: 91%;--cL_island: 55%;--color_island-hsl: 27, 91%, 55%;--cH_shovel: 19;--cS_shovel: 29%;--cL_shovel: 37%;--color_shovel-hsl: 19, 29%, 37%;--cH_coffee: 18;--cS_coffee: 33%;--cL_coffee: 24%;--color_coffee-hsl: 18, 33%, 24%;--cH_carrot: 14;--cS_carrot: 84%;--cL_carrot: 59%;--color_carrot-hsl: 14, 84%, 59%;--cH_cactus: 8;--cS_cactus: 17%;--cL_cactus: 62%;--color_cactus-hsl: 8, 17%, 62%;--cH_volcano: 6;--cS_volcano: 84%;--cL_volcano: 48%;--color_volcano-hsl: 6, 84%, 48%;--cH_choco: 2;--cS_choco: 55%;--cL_choco: 57%;--color_choco-hsl: 2, 55%, 57%;--cH_industry: 0;--cS_industry: 0%;--cL_industry: 50%;--color_industry-hsl: 0, 0%, 50%;--cH_gun: 0;--cS_gun: 0%;--cL_gun: 37%;--color_gun-hsl: 0, 0%, 37%;--cH_galaxy: 0;--cS_galaxy: 0%;--cL_galaxy: 5%;--color_galaxy-hsl: 0, 0%, 5%;--cH_line: 120;--cS_line: 100%;--cL_line: 37%;--color_line-hsl: 120, 100%, 37%;--cH_twitter: 203;--cS_twitter: 89%;--cL_twitter: 52%;--color_twitter-hsl: 203, 89%, 52%;--cH_amazon: 36;--cS_amazon: 100%;--cL_amazon: 50%;--color_amazon-hsl: 36, 100%, 50%;--cH_facebook: 220;--cS_facebook: 46%;--cL_facebook: 48%;--color_facebook-hsl: 220, 46%, 48%;--cH_android: 101;--cS_android: 47%;--cL_android: 55%;--color_android-hsl: 101, 47%, 55%;--cH_slackBlue: 194;--cS_slackBlue: 86%;--cL_slackBlue: 58%;--color_slackBlue-hsl: 194, 86%, 58%;--cH_slackGreen: 155;--cS_slackGreen: 60%;--cL_slackGreen: 45%;--color_slackGreen-hsl: 155, 60%, 45%;--cH_slackRed: 341;--cS_slackRed: 76%;--cL_slackRed: 50%;--color_slackRed-hsl: 341, 76%, 50%;--cH_slackYellow: 42;--cS_slackYellow: 83%;--cL_slackYellow: 55%;--color_slackYellow-hsl: 42, 83%, 55%;--cH_slackBase: 299;--cS_slackBase: 56%;--cL_slackBase: 19%;--color_slackBase-hsl: 299, 56%, 19%;--cH_googleBlue: 217;--cS_googleBlue: 89%;--cL_googleBlue: 61%;--color_googleBlue-hsl: 217, 89%, 61%;--cH_googleGreen: 151;--cS_googleGreen: 83%;--cL_googleGreen: 34%;--color_googleGreen-hsl: 151, 83%, 34%;--cH_googleYellow: 44;--cS_googleYellow: 100%;--cL_googleYellow: 48%;--color_googleYellow-hsl: 44, 100%, 48%;--cH_googleRed: 5;--cS_googleRed: 69%;--cL_googleRed: 54%;--color_googleRed-hsl: 5, 69%, 54%;--cH: 0;--cS: 0%;--cL: 0%;--color-theme-hsl: 0, 0%, 0%;--color-theme-opacity-high: .5;--color-theme-opacity-middle: .25;--color-theme-opacity-low: .15;--color-theme-opacity-few: .085;--color-positive-rgb: 68, 204, 170;--color-negative-rgb: 255, 68, 119;--color-warning-rgb: 248, 150, 0;--color-dark-rgb: 69, 81, 92;--color-positive: rgba(var(--color-positive-rgb), 1);--color-negative: rgba(var(--color-negative-rgb), 1);--color-warning: rgba(var(--color-warning-rgb), 1);--color-dark: rgba(var(--color-dark-rgb), 1);--color-layer0-hsl: var(--cH), 10%, 99%;--color-layer1-hsl: var(--cH), 6%, 99%;--color-layer2-hsl: var(--cH), 6%, 96%;--color-layer3-hsl: var(--cH), 6%, 92%;--color-layer4-hsl: var(--cH), 5%, 89%;--color-layer5-hsl: var(--cH), 4%, 85%;--color-layer6-hsl: var(--cH), 3%, 75%;--color-base-rgb: 252, 252, 252;--color-gray-rgb: 211, 216, 222;--color-cloud-rgb: 241, 243, 248;--color-mono-positive-rgb: 0, 0, 0;--color-mono-negative-rgb: 255, 255, 255;--font-color-logoTitle: hsl(218, 45%, 22%);--sc: 60, 64, 67;--shadow_style_0: 0px 1px 2px 0px;--shadow_style_1: 0px 2px 4px 0px;--shadow_style_2: 1px 3px 8px 0px;--shadow_style_3: 2px 6px 12px;--shadow_style_4: .4rem 1rem 2rem;--shadow_style_5: 1rem 1.5rem 3rem;--shadow_color_min: rgba(var(--sc), .05);--shadow_color_normal: rgba(var(--sc), .15);--shadow_color_remark: rgba(var(--sc), .28);--shadow_color_max: rgba(var(--sc), .41);--font-color1-rgb: 0, 0, 0;--font-color2-rgb: 51, 51, 51;--font-color3-rgb: 118, 125, 137;--font-color4-rgb: 152, 158, 167;--font-color5-rgb: 189, 194, 200;--font-color6-rgb: 210, 210, 220;--font-size0: 12px;--font-size1: 14px;--font-size2: 16px;--font-size3: 18px;--font-size4: 20px;--font-size5: 24px;--font-size6: 32px;--font-size7: 44px;--font-size8: 60px;--border-color-thin: hsl(220, 9%, 92%);--border-color-normal: hsl(220, 9%, 87%);--border-color-thick: hsl(0, 0%, 40%);--border-radius1: 4px;--border-radius2: 6px;--border-radius3: 8px;--border-radius4: 12px;--border-radius5: 18px;--border-radius6: 24px;--border-radius7: 30px;--animation-time1: .1s;--animation-time2: .15s;--animation-time3: .25s;--animation-time4: .4s;--animation-style1: cubic-bezier(.35, .46, 0, .99);--animation-style2: cubic-bezier(.1, .85, .1, .85);--safe-area-top: env(safe-area-inset-top);--safe-area-bottom: env(safe-area-inset-bottom);--safe-area-left: env(safe-area-inset-left);--safe-area-right: env(safe-area-inset-right);--grid-unit: 12px;--viewHeight: 100vh;--viewWidth: 100vw;--sideNavHeight: 0px;--topNavHeight: 0px;--sideNavWidth: 0px;--contentHeight: 0px;--contnetWidth: 0px;--topBase: 0px}@supports (-webkit-touch-callout: none){:root{--viewHeight: -webkit-fill-available}}.bdsTC_comun{--cH: var(--cH_comun);--cS: var(--cS_comun);--cL: var(--cL_comun);--color-theme-hsl: var(--color_comun-hsl)}.bdsTC_leaf{--cH: var(--cH_leaf);--cS: var(--cS_leaf);--cL: var(--cL_leaf);--color-theme-hsl: var(--color_leaf-hsl)}.bdsTC_heart{--cH: var(--cH_heart);--cS: var(--cS_heart);--cL: var(--cL_heart);--color-theme-hsl: var(--color_heart-hsl)}.bdsTC_droplet{--cH: var(--cH_droplet);--cS: var(--cS_droplet);--cL: var(--cL_droplet);--color-theme-hsl: var(--color_droplet-hsl)}.bdsTC_brick{--cH: var(--cH_brick);--cS: var(--cS_brick);--cL: var(--cL_brick);--color-theme-hsl: var(--color_brick-hsl)}.bdsTC_flower{--cH: var(--cH_flower);--cS: var(--cS_flower);--cL: var(--cL_flower);--color-theme-hsl: var(--color_flower-hsl)}.bdsTC_lip{--cH: var(--cH_lip);--cS: var(--cS_lip);--cL: var(--cL_lip);--color-theme-hsl: var(--color_lip-hsl)}.bdsTC_wine{--cH: var(--cH_wine);--cS: var(--cS_wine);--cL: var(--cL_wine);--color-theme-hsl: var(--color_wine-hsl)}.bdsTC_theater{--cH: var(--cH_theater);--cS: var(--cS_theater);--cL: var(--cL_theater);--color-theme-hsl: var(--color_theater-hsl)}.bdsTC_bat{--cH: var(--cH_bat);--cS: var(--cS_bat);--cL: var(--cL_bat);--color-theme-hsl: var(--color_bat-hsl)}.bdsTC_poizon{--cH: var(--cH_poizon);--cS: var(--cS_poizon);--cL: var(--cL_poizon);--color-theme-hsl: var(--color_poizon-hsl)}.bdsTC_eggplant{--cH: var(--cH_eggplant);--cS: var(--cS_eggplant);--cL: var(--cL_eggplant);--color-theme-hsl: var(--color_eggplant-hsl)}.bdsTC_ufo{--cH: var(--cH_ufo);--cS: var(--cS_ufo);--cL: var(--cL_ufo);--color-theme-hsl: var(--color_ufo-hsl)}.bdsTC_alien{--cH: var(--cH_alien);--cS: var(--cS_alien);--cL: var(--cL_alien);--color-theme-hsl: var(--color_alien-hsl)}.bdsTC_tombstone{--cH: var(--cH_tombstone);--cS: var(--cS_tombstone);--cL: var(--cL_tombstone);--color-theme-hsl: var(--color_tombstone-hsl)}.bdsTC_ninja{--cH: var(--cH_ninja);--cS: var(--cS_ninja);--cL: var(--cL_ninja);--color-theme-hsl: var(--color_ninja-hsl)}.bdsTC_moon{--cH: var(--cH_moon);--cS: var(--cS_moon);--cL: var(--cL_moon);--color-theme-hsl: var(--color_moon-hsl)}.bdsTC_rain{--cH: var(--cH_rain);--cS: var(--cS_rain);--cL: var(--cL_rain);--color-theme-hsl: var(--color_rain-hsl)}.bdsTC_unicorn{--cH: var(--cH_unicorn);--cS: var(--cS_unicorn);--cL: var(--cL_unicorn);--color-theme-hsl: var(--color_unicorn-hsl)}.bdsTC_axe{--cH: var(--cH_axe);--cS: var(--cS_axe);--cL: var(--cL_axe);--color-theme-hsl: var(--color_axe-hsl)}.bdsTC_gem{--cH: var(--cH_gem);--cS: var(--cS_gem);--cL: var(--cL_gem);--color-theme-hsl: var(--color_gem-hsl)}.bdsTC_soap{--cH: var(--cH_soap);--cS: var(--cS_soap);--cL: var(--cL_soap);--color-theme-hsl: var(--color_soap-hsl)}.bdsTC_drizzle{--cH: var(--cH_drizzle);--cS: var(--cS_drizzle);--cL: var(--cL_drizzle);--color-theme-hsl: var(--color_drizzle-hsl)}.bdsTC_building{--cH: var(--cH_building);--cS: var(--cS_building);--cL: var(--cL_building);--color-theme-hsl: var(--color_building-hsl)}.bdsTC_fish{--cH: var(--cH_fish);--cS: var(--cS_fish);--cL: var(--cL_fish);--color-theme-hsl: var(--color_fish-hsl)}.bdsTC_icicles{--cH: var(--cH_icicles);--cS: var(--cS_icicles);--cL: var(--cL_icicles);--color-theme-hsl: var(--color_icicles-hsl)}.bdsTC_water{--cH: var(--cH_water);--cS: var(--cS_water);--cL: var(--cL_water);--color-theme-hsl: var(--color_water-hsl)}.bdsTC_tree1{--cH: var(--cH_tree1);--cS: var(--cS_tree1);--cL: var(--cL_tree1);--color-theme-hsl: var(--color_tree1-hsl)}.bdsTC_tree2{--cH: var(--cH_tree2);--cS: var(--cS_tree2);--cL: var(--cL_tree2);--color-theme-hsl: var(--color_tree2-hsl)}.bdsTC_tree3{--cH: var(--cH_tree3);--cS: var(--cS_tree3);--cL: var(--cL_tree3);--color-theme-hsl: var(--color_tree3-hsl)}.bdsTC_battery{--cH: var(--cH_battery);--cS: var(--cS_battery);--cL: var(--cL_battery);--color-theme-hsl: var(--color_battery-hsl)}.bdsTC_seedle{--cH: var(--cH_seedle);--cS: var(--cS_seedle);--cL: var(--cL_seedle);--color-theme-hsl: var(--color_seedle-hsl)}.bdsTC_greenTea{--cH: var(--cH_greenTea);--cS: var(--cS_greenTea);--cL: var(--cL_greenTea);--color-theme-hsl: var(--color_greenTea-hsl)}.bdsTC_oak{--cH: var(--cH_oak);--cS: var(--cS_oak);--cL: var(--cL_oak);--color-theme-hsl: var(--color_oak-hsl)}.bdsTC_salad{--cH: var(--cH_salad);--cS: var(--cS_salad);--cL: var(--cL_salad);--color-theme-hsl: var(--color_salad-hsl)}.bdsTC_cloudy{--cH: var(--cH_cloudy);--cS: var(--cS_cloudy);--cL: var(--cL_cloudy);--color-theme-hsl: var(--color_cloudy-hsl)}.bdsTC_lemon{--cH: var(--cH_lemon);--cS: var(--cS_lemon);--cL: var(--cL_lemon);--color-theme-hsl: var(--color_lemon-hsl)}.bdsTC_angel{--cH: var(--cH_angel);--cS: var(--cS_angel);--cL: var(--cL_angel);--color-theme-hsl: var(--color_angel-hsl)}.bdsTC_parasol{--cH: var(--cH_parasol);--cS: var(--cS_parasol);--cL: var(--cL_parasol);--color-theme-hsl: var(--color_parasol-hsl)}.bdsTC_pizza{--cH: var(--cH_pizza);--cS: var(--cS_pizza);--cL: var(--cL_pizza);--color-theme-hsl: var(--color_pizza-hsl)}.bdsTC_thunder{--cH: var(--cH_thunder);--cS: var(--cS_thunder);--cL: var(--cL_thunder);--color-theme-hsl: var(--color_thunder-hsl)}.bdsTC_latte{--cH: var(--cH_latte);--cS: var(--cS_latte);--cL: var(--cL_latte);--color-theme-hsl: var(--color_latte-hsl)}.bdsTC_island{--cH: var(--cH_island);--cS: var(--cS_island);--cL: var(--cL_island);--color-theme-hsl: var(--color_island-hsl)}.bdsTC_shovel{--cH: var(--cH_shovel);--cS: var(--cS_shovel);--cL: var(--cL_shovel);--color-theme-hsl: var(--color_shovel-hsl)}.bdsTC_coffee{--cH: var(--cH_coffee);--cS: var(--cS_coffee);--cL: var(--cL_coffee);--color-theme-hsl: var(--color_coffee-hsl)}.bdsTC_carrot{--cH: var(--cH_carrot);--cS: var(--cS_carrot);--cL: var(--cL_carrot);--color-theme-hsl: var(--color_carrot-hsl)}.bdsTC_cactus{--cH: var(--cH_cactus);--cS: var(--cS_cactus);--cL: var(--cL_cactus);--color-theme-hsl: var(--color_cactus-hsl)}.bdsTC_volcano{--cH: var(--cH_volcano);--cS: var(--cS_volcano);--cL: var(--cL_volcano);--color-theme-hsl: var(--color_volcano-hsl)}.bdsTC_choco{--cH: var(--cH_choco);--cS: var(--cS_choco);--cL: var(--cL_choco);--color-theme-hsl: var(--color_choco-hsl)}.bdsTC_industry{--cH: var(--cH_industry);--cS: var(--cS_industry);--cL: var(--cL_industry);--color-theme-hsl: var(--color_industry-hsl)}.bdsTC_gun{--cH: var(--cH_gun);--cS: var(--cS_gun);--cL: var(--cL_gun);--color-theme-hsl: var(--color_gun-hsl)}.bdsTC_galaxy{--cH: var(--cH_galaxy);--cS: var(--cS_galaxy);--cL: var(--cL_galaxy);--color-theme-hsl: var(--color_galaxy-hsl)}.bdsTC_line{--cH: var(--cH_line);--cS: var(--cS_line);--cL: var(--cL_line);--color-theme-hsl: var(--color_line-hsl)}.bdsTC_twitter{--cH: var(--cH_twitter);--cS: var(--cS_twitter);--cL: var(--cL_twitter);--color-theme-hsl: var(--color_twitter-hsl)}.bdsTC_amazon{--cH: var(--cH_amazon);--cS: var(--cS_amazon);--cL: var(--cL_amazon);--color-theme-hsl: var(--color_amazon-hsl)}.bdsTC_facebook{--cH: var(--cH_facebook);--cS: var(--cS_facebook);--cL: var(--cL_facebook);--color-theme-hsl: var(--color_facebook-hsl)}.bdsTC_android{--cH: var(--cH_android);--cS: var(--cS_android);--cL: var(--cL_android);--color-theme-hsl: var(--color_android-hsl)}.bdsTC_slackBlue{--cH: var(--cH_slackBlue);--cS: var(--cS_slackBlue);--cL: var(--cL_slackBlue);--color-theme-hsl: var(--color_slackBlue-hsl)}.bdsTC_slackGreen{--cH: var(--cH_slackGreen);--cS: var(--cS_slackGreen);--cL: var(--cL_slackGreen);--color-theme-hsl: var(--color_slackGreen-hsl)}.bdsTC_slackRed{--cH: var(--cH_slackRed);--cS: var(--cS_slackRed);--cL: var(--cL_slackRed);--color-theme-hsl: var(--color_slackRed-hsl)}.bdsTC_slackYellow{--cH: var(--cH_slackYellow);--cS: var(--cS_slackYellow);--cL: var(--cL_slackYellow);--color-theme-hsl: var(--color_slackYellow-hsl)}.bdsTC_slackBase{--cH: var(--cH_slackBase);--cS: var(--cS_slackBase);--cL: var(--cL_slackBase);--color-theme-hsl: var(--color_slackBase-hsl)}.bdsTC_googleBlue{--cH: var(--cH_googleBlue);--cS: var(--cS_googleBlue);--cL: var(--cL_googleBlue);--color-theme-hsl: var(--color_googleBlue-hsl)}.bdsTC_googleGreen{--cH: var(--cH_googleGreen);--cS: var(--cS_googleGreen);--cL: var(--cL_googleGreen);--color-theme-hsl: var(--color_googleGreen-hsl)}.bdsTC_googleYellow{--cH: var(--cH_googleYellow);--cS: var(--cS_googleYellow);--cL: var(--cL_googleYellow);--color-theme-hsl: var(--color_googleYellow-hsl)}.bdsTC_googleRed{--cH: var(--cH_googleRed);--cS: var(--cS_googleRed);--cL: var(--cL_googleRed);--color-theme-hsl: var(--color_googleRed-hsl)}.bdsTNflat{--border-color-thin: hsl(220, 9%, 94%);--border-color-normal: hsl(220, 9%, 90%)}.bdsDM_dark{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 5%, 8%;--color-layer1-hsl: var(--cH), 5%, 13%;--color-layer2-hsl: var(--cH), 5%, 16.3%;--color-layer3-hsl: var(--cH), 5%, 19.6%;--color-layer4-hsl: var(--cH), 5%, 23%;--color-layer5-hsl: var(--cH), 5%, 28%;--color-layer6-hsl: var(--cH), 5%, 33%}.bdsDM_dim{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 8%, 13%;--color-layer1-hsl: var(--cH), 8%, 20%;--color-layer2-hsl: var(--cH), 8%, 23.3%;--color-layer3-hsl: var(--cH), 8%, 26.6%;--color-layer4-hsl: var(--cH), 8%, 30%;--color-layer5-hsl: var(--cH), 8%, 35%;--color-layer6-hsl: var(--cH), 8%, 40%}@media (prefers-color-scheme: dark){.bdsDM_auto{--color-theme-opacity-high: .45;--color-theme-opacity-middle: .3;--color-theme-opacity-low: .2;--color-theme-opacity-few: .1;--color-dark-rgb: 46, 51, 54;--color-cloud-rgb: 43, 44, 45;--color-base-rgb: 27, 28, 28;--color-gray-rgb: 34, 39, 45;--color-mono-positive-rgb: 255, 255, 255;--color-mono-negative-rgb: 0, 0, 0;--font-color1-rgb: 250, 251, 252;--font-color2-rgb: 205, 210, 220;--font-color3-rgb: 165, 170, 180;--font-color4-rgb: 135, 140, 150;--font-color5-rgb: 95, 100, 110;--font-color6-rgb: 65, 70, 80;--font-color-logoTitle: rgb(210, 220, 240);--sc: 0, 0, 0;--shadow_color_min: rgba(var(--sc), .2);--shadow_color_normal: rgba(var(--sc), .3);--shadow_color_remark: rgba(var(--sc), .4);--shadow_color_max: rgba(var(--sc), .5);--border-color-thin: hsl(180, 5%, 25%);--border-color-normal: hsl(180, 5%, 38%);--color-layer0-hsl: var(--cH), 5%, 8%;--color-layer1-hsl: var(--cH), 5%, 13%;--color-layer2-hsl: var(--cH), 5%, 16.3%;--color-layer3-hsl: var(--cH), 5%, 19.6%;--color-layer4-hsl: var(--cH), 5%, 23%;--color-layer5-hsl: var(--cH), 5%, 28%;--color-layer6-hsl: var(--cH), 5%, 33%}}
|
|
@@ -74,12 +74,14 @@ declare namespace Autocomplete {
|
|
|
74
74
|
set_optionFocused: React.Dispatch<React.SetStateAction<string>>;
|
|
75
75
|
val_optionsDict: OptionsDict;
|
|
76
76
|
set_optionsDict: React.Dispatch<React.SetStateAction<OptionsDict>>;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
val_optionsModified: boolean;
|
|
78
|
+
set_optionsModified: React.Dispatch<React.SetStateAction<boolean>>;
|
|
79
|
+
val_preventOpenSelector: boolean;
|
|
80
|
+
set_preventOpenSelector: React.Dispatch<React.SetStateAction<boolean>>;
|
|
81
|
+
val_openSelector: boolean;
|
|
82
|
+
set_openSelector: React.Dispatch<React.SetStateAction<boolean>>;
|
|
83
|
+
val_activeInput: boolean;
|
|
84
|
+
set_activeInput: React.Dispatch<React.SetStateAction<boolean>>;
|
|
83
85
|
val_keyword: string;
|
|
84
86
|
set_keyword: React.Dispatch<React.SetStateAction<string>>;
|
|
85
87
|
val_status: InputTypes.Status.Plain<Value[]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as d,c as _,d as Y,e as Z}from"../../chunk-C5N2D3ZX.js";import{Fragment as J,jsx as a,jsxs as F}from"react/jsx-runtime";import{useState as D,useEffect as x,useRef as ie}from"react";import p,{UUID as w}from"jmini";import{ExtractStyles as re}from"../../@utils";import{Box as A,Span as se,FAI as q,Column as ee}from"../../atoms";import{Literal as K,Row as W}from"../../mols";import{Button as te}from"../Button";import{Loader as ce}from"../Loader";import{Sheet as ue}from"../Sheet";import{OptionalInputWrapper as pe,BoxWrapper as de,CoreEffects as z,DefaultBoxishStyles as Se}from"./core";import{InputAutocompleteClasses as N}from"../../@styles/componentClasses";import{InputLabel as me}from"./Label";import{RightIcon as oe}from".";function fe(e){let{value:t,states:u}=e,{required:S,options:l,min:i,max:f}=u;i=i||0,f=f||65535;let o=[],b=t.filter(r=>r!==null).length;return S&&(b||o.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),b<i&&o.push({type:"invalid",label:i+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),b>f&&o.push({type:"invalid",label:f+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!o.filter(({type:r})=>r=="invalid").length,notice:o}}const U={InitOptions:e=>{let t=[];return e.forEach(u=>{if(!u)return;let{type:S,label:l,value:i,searchValue:f}=u,o=f||p.is.string(l)&&l||""||p.is.string(i)&&i||p.Stringify(i||"")||"";p.is.nullish(l)&&(l=String(i)),t.push(_(d({id:w()},u),{searchValue:o,type:S||"selector",label:l,value:i}))}),t},FilterSelectableOptions:(e,t,u)=>{let S=e;return u||(S=e.filter(l=>(l==null?void 0:l.type)!="label")),p.scope(()=>{if(!t)return;let l=t.toLower().replace(/ /g,"");S=S.filter(i=>(i.searchValue||"").toLower().replace(/ /g,"").includes(l))}),S}},L={Shallow:e=>{let{rootStates:t,val_status:u}=e,S=re(t);return a(A,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(K.Description,_(d({className:t.className},S),{position:"absolute",width:1,freeCSS:_(d({},S.freeCSS),{color:"orange"}),"data-id":"shallow_"+u.componentId,children:a(A,{"data-input-value-shallow":u.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:u,set_keyword:S,val_optionFocused:l,set_optionFocused:i,val_options:f,set_options:o,val_optionsDict:b,set_optionsDict:r,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:m,val_selectorOpen:n,set_selectorOpen:v,val_status:g,set_status:C,val_validate:O,set_validate:I}=e,G=t,{tone:T,required:V,form:k,className:H,multiSelect:j,enableFormSubmit:P,checkValidationAtFirst:M,onValidate:X,onValidateDelay:E,onUpdateValue:B,onUpdateValidValue:R,onUserAction:ve,value:ye="",options:ge,leftIndicator:he,rightIndicator:_e,leftIcon:be,rightIcon:Oe,componentId:Ie,status_id:Ce,wrapStyles:De,emptySelect:we,SearchInput:Te,SearchInputPlaceholder:Ve,SelectedComponent:ke,SelectorComponent:Re,SelectorStyles:xe,SelectorPosition:Ae,DynamicOptionsOnSearch:Fe,DynamicOptionsOnSearchDelay:Ee}=G,c=Y(G,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return x(()=>{var h;if(t.disabled||!n)return;let y=U.FilterSelectableOptions(e.val_options,u,!1);i(((h=y[0])==null?void 0:h.id)||"")},[u]),x(()=>{g.eventType!="init"&&(t.max==g.dataValue.length?(v(!1),m(!0),setTimeout(()=>{let y=p('[data-input-origin="'+t.componentId+'"]');y&&y.focus()},10)):p("#SearchInput_"+t.componentId).focus())},[g.dataValue]),x(()=>{let y="autocomplete-click-"+t.componentId;if(n){if(!p('[data-input-origin="'+t.componentId+'"]'))return;p("#SearchInput_"+t.componentId).focus(),p(document).addEvent({eventID:y,eventType:"mousedown",callback:$=>{let Q=p($.target),ae=!!p(Q).parent("."+N("Core")).length,le=!!p(Q).parent("."+N("Selector")).length;ae||le||(v(!1),$.preventDefault(),$.stopPropagation())},options:{passive:!1}})}else p(document).removeEvent([y]),S("")},[n]),F(J,{children:[a(A,_(d({tabIndex:0},c),{"data-disabled":t.disabled,"data-show-validation":z.isShowValidation(O,g,!!M),"data-component-id":g.componentId,"data-input-origin":g.componentId,"data-focus":!!n,className:[H,N("Core")].join(" "),onFocus:y=>{if(c!=null&&c.onFocus&&(c==null||c.onFocus(y)),C(h=>_(d({},h),{eventID:w(),eventType:"focus.start",isFocusing:!0})),!t.disabled){if(s)return m(!1);v(!0),y.preventDefault()}},onBlur:y=>{c!=null&&c.onBlur&&(c==null||c.onBlur(y)),C(h=>_(d({},h),{eventID:w(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:y=>{c!=null&&c.onCompositionStart&&(c==null||c.onCompositionStart(y)),C(h=>_(d({},h),{eventID:w(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:y=>{c!=null&&c.onCompositionEnd&&(c==null||c.onCompositionEnd(y)),C(h=>_(d({},h),{eventID:w(),eventType:"composing.end",isComposing:!1}))},onClick:y=>{c!=null&&c.onClick&&(c==null||c.onClick(y)),!t.disabled&&v(!0)},onKeyDown:y=>{let{key:h}=y;P&&z.SubmitForm(y,k),!n&&(h==" "||h=="ArrowDown"||h=="ArrowUp"||h=="Enter")&&v(!0)},children:F(W.Left,{gap:0,children:[a(se,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),F(W.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(L.Selected,d({},e)),a(L.SearchInput,d({},e))]})]})})),n&&a(L.Selector,d({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[u,S]=D(!1);return t.disabled||!e.val_selectorOpen?null:a(A,{id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onCompositionStart:l=>{t.onCompositionStart&&t.onCompositionStart(l),S(!0)},onCompositionEnd:l=>{t.onCompositionEnd&&t.onCompositionEnd(l),S(!1)},onKeyDown:l=>{let{key:i,metaKey:f,ctrlKey:o}=l,b=f||o;i=="Escape"?(e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let r=p('[data-input-origin="'+t.componentId+'"]');r&&r.focus()},10)):i=="Tab"?e.set_selectorOpen(!1):i==" "?p.scope(()=>{e.val_selectorOpen||e.val_keyword||(l.preventDefault(),e.set_selectorOpen(!0))}):i=="Backspace"?p.scope(()=>{if(e.val_keyword)return;let r=[...e.val_status.dataValue];r.pop(),e.set_status(s=>_(d({},s),{dataValue:r,eventType:"update",eventID:w()}))}):i=="Enter"&&p.scope(()=>{if(u)return;if(!e.val_selectorOpen)return e.set_selectorOpen(!0);let r=e.val_options.find(m=>(m==null?void 0:m.id)==e.val_optionFocused);if(!r)return;let{value:s}=r;e.set_status(m=>{let n=[...m.dataValue];return p.scope(()=>{if(s===null)return n=[];m.dataValue.includes(s)?n=n.filter(g=>g!==s):t.multiSelect?n.push(s):n=[s]}),_(d({},m),{dataValue:n,eventType:"update",eventID:w()})}),e.set_keyword(""),e.set_preventDynamicSearchOnKeywordChange(!0)}),p.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(i))return;if(l.preventDefault(),!e.val_selectorOpen)return e.set_selectorOpen(!0);let r=i=="ArrowDown"?1:-1,s=U.FilterSelectableOptions(e.val_options),m=s.length-1,n=null;p.scope(()=>{var g,C,O,I,T,V;let v=s.findIndex(k=>(k==null?void 0:k.id)==e.val_optionFocused);if(v==-1&&(v=0),r==1){if(n=(g=s[0])==null?void 0:g.id,b){n=(C=s[m])==null?void 0:C.id;return}if(v==-1||v==m)return;n=(O=s[v+1])==null?void 0:O.id}else{if(n=(I=s[m])==null?void 0:I.id,b){n=(T=s[0])==null?void 0:T.id;return}if(v==-1||v==0)return;n=(V=s[v-1])==null?void 0:V.id}}),e.set_optionFocused(n)}),t.enableFormSubmit&&z.SubmitForm(l,e.rootStates.form)},onChange:l=>{let f=l.target.value;e.set_keyword(f)}},"searchInput")},Selector:e=>{var b;let[t,u]=D("idle"),[S,l]=D("idle");x(()=>{if(!e.val_selectorOpen||!e.rootStates.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(t=="idle")return u("ok");l("fetch");let r="autocomplete-search-"+e.rootStates.componentId;p.interval.once(()=>Z(void 0,null,function*(){var n;let s=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);l("idle");let m=U.InitOptions(s||[]);e.set_options(m),e.set_optionFocused(((n=m[0])==null?void 0:n.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||300,r)},[e.val_keyword]),x(()=>{let r=p(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!r)return;let s=p(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];s&&(r.scrollTop=s.offsetTop-24)},[e.val_optionFocused]);let i=[],f=U.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0);f.forEach((r,s)=>{if(!r)return;let{type:m,value:n}=r,v=e.val_optionFocused==r.id,g=e.val_status.dataValue.includes(n),C=e.rootStates.SelectorComponent;i.push(a(ee,{"data-autocomplete-input-value":r.id,children:a(C,{option:r,isFocused:v,isSelected:g,addCallback:()=>{e.set_status(O=>{let I=[...O.dataValue];return p.scope(()=>{if(n===null)return I=[];O.dataValue.includes(n)?I=I.filter(V=>V!==n):e.rootStates.multiSelect?I.push(n):I=[n]}),_(d({},O),{dataValue:I,eventType:"update",eventID:w()})})}})},r.id))}),f.length||(i=[a(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),S=="fetch"&&(i=[F(W.Left,{padding:1,fontColor:"3.blur",children:[a(ce.Theme.R,{showInitial:!0}),a(K.Supplement,{children:"Loading..."})]},"loader")]);let o={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:o.bottom="100%",o.left=0,o.paddingBottom="1/3";break;case 2:o.bottom="100%",o.right=0,o.paddingBottom="1/3";break;case 3:o.top="100%",o.left=0,o.paddingTop="1/3";break;case 4:o.top="100%",o.right=0,o.paddingTop="1/3";break;default:break}return a(A,_(d({},o),{children:a(ue.Body,_(d({className:N("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:d({maxHeight:12*24},(b=e.rootStates.SelectorStyles)==null?void 0:b.freeCSS),children:a(ee,{gap:"1/12",padding:[1,0],children:i})}))}))},Selected:e=>{let{rootStates:t,val_status:u,set_status:S,val_optionsDict:l}=e,i=[];return u.dataValue.forEach(f=>{let o=l[p.Stringify(f)];if(!o)return;let b=t.SelectedComponent,r=o.label;(o==null?void 0:o.value)===null&&(r=""),i.push(a(A,{className:N("SelectedCell"),children:a(b,{value:o==null?void 0:o.value,label:r,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),t.disabled)return;let m=[...u.dataValue];m=m.filter(n=>n!==f),S(n=>_(d({},n),{dataValue:m,eventType:"update",eventID:w()}))}})},p.Stringify(o==null?void 0:o.value)||w()))}),a(J,{children:i})},Core:e=>{var M,X;let{value:t}=e,[u,S]=D(!1),[l,i]=D(!1),[f,o]=D(!1),[b,r]=D(""),[s,m]=D(e.options),[n,v]=D(((M=e.options.find(E=>{var B;return(E==null?void 0:E.value)===((B=e.value)==null?void 0:B[0])}))==null?void 0:M.id)||((X=e.options[0])==null?void 0:X.id)||""),[g,C]=D({}),[O,I]=D(z.DefaultStatus(e.componentId,t)),[T,V]=D({ok:!1,notice:[]}),k=ie(!1);x(()=>{k.current?m(e.options):k.current=!0},[e.options]),x(()=>{if(!s.length)return;let E=[...s],B=d({},g);E.forEach(R=>{(R==null?void 0:R.type)!="label"&&(B[p.Stringify(R==null?void 0:R.value)]=R)}),C(B)},[s]);let H={rootStates:e,val_options:s,set_options:m,val_optionFocused:n,set_optionFocused:v,val_optionsDict:g,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:l,set_preventDynamicSearchOnKeywordChange:i,val_preventOpenSelectorOnFocus:u,set_preventOpenSelectorOnFocus:S,val_selectorOpen:f,set_selectorOpen:o,val_keyword:b,set_keyword:r,val_status:O,set_status:I,val_validate:T,set_validate:V},j=!!e.multiSelect;z.CommonEffects({type:j?"autocomplete.multi":"autocomplete.single",states:e,val_status:O,set_status:I,val_validate:T,set_validate:V,SystemValidation:fe});let P=O.dataValue.length&&O.dataValue[0]!==null;return P=P||f,F(de,{val_status:O,set_status:I,val_validate:T,states:e,children:[a(me,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:P}),a(L.Shallow,d({},H)),a(L.Button,d({},H))]})}},ne=e=>{let t=d({},e);return t=_(d({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:u,isSelected:S,isFocused:l,addCallback:i})=>u?(u==null?void 0:u.type)=="label"?a(J,{children:u.label}):a(te.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:l,isActiveStyles:{backgroundColor:"cloud"},onClick:f=>{i()},children:F(W.Left,{gap:"1/2",children:[S&&a(q.Check,{fontColor:"theme"}),a(K.Supplement,{transition:"short",children:u.label})]})}):null,SelectedComponent:({value:u,label:S,removeCallback:l})=>F(W.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[a(A,{padding:[0,"1/4"],children:S}),a(te.Sub,{flexSizing:"none",color:"cloud",fontColor:"white",backgroundColor:"layer.5",isRounded:!0,padding:"1/4",onClick:l,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:a(q.X,{ssSphere:1})})]}),SelectorPosition:3},t),{freeCSS:d({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:a(K.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=p.flatArray(t.value),t.options=U.InitOptions(t.options),p.is.nullish(t.rightIcon)&&(t.rightIcon=a(oe,{ssSphere:2,children:a(q.Search,{})}),t.disabled&&(t.rightIcon=a(oe,{ssSphere:2,fontColor:"5.translucent",children:a(q.Ban,{})}))),t.rightIcon&&(t=d({paddingRight:3},t)),t.leftIcon&&(t=d({paddingLeft:3},t)),a(pe,{componentId:t.componentId,children:L.Core,states:Se(t)})};export{ne as Autocomplete,ne as default};
|
|
1
|
+
import{b as f,c as h,d as ee,e as te}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as a,jsxs as k}from"react/jsx-runtime";import{useState as b,useEffect as E,useRef as ue}from"react";import d,{UUID as O}from"jmini";import{ExtractStyles as ce}from"../../@utils";import{Box as F,Span as pe,FAI as H,Column as oe}from"../../atoms";import{Literal as q,Row as P}from"../../mols";import{Button as ae}from"../Button";import{Loader as de}from"../Loader";import{Sheet as Se}from"../Sheet";import{OptionalInputWrapper as fe,BoxWrapper as me,CoreEffects as M,DefaultBoxishStyles as ve}from"./core";import{InputAutocompleteClasses as W}from"../../@styles/componentClasses";import{InputLabel as ye}from"./Label";import{RightIcon as le}from".";function _e(e){let{value:t,states:u}=e,{required:m,options:o,min:i,max:l}=u;i=i||0,l=l||65535;let S=[],c=t.filter(p=>p!==null).length;return m&&(c||S.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),c<i&&S.push({type:"invalid",label:i+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),c>l&&S.push({type:"invalid",label:l+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!S.filter(({type:p})=>p=="invalid").length,notice:S}}const z={InitOptions:e=>{let t=[];return e.forEach(u=>{if(!u)return;let{type:m,label:o,value:i,searchValue:l}=u,S=l||d.is.string(o)&&o||""||d.is.string(i)&&i||d.Stringify(i||"")||"";d.is.nullish(o)&&(o=String(i)),t.push(h(f({id:O()},u),{searchValue:S,type:m||"selector",label:o,value:i}))}),t},FilterSelectableOptions:(e,t,u)=>{let m=e;return u||(m=e.filter(o=>(o==null?void 0:o.type)!="label")),d.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");m=m.filter(i=>(i.searchValue||"").toLower().replace(/ /g,"").includes(o))}),m}},L={Shallow:e=>{let{rootStates:t,val_status:u}=e,m=ce(t);return a(F,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(q.Description,h(f({className:t.className},m),{position:"absolute",width:1,freeCSS:h(f({},m.freeCSS),{color:"orange"}),"data-id":"shallow_"+u.componentId,children:a(F,{"data-input-value-shallow":u.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:u,set_keyword:m,val_optionFocused:o,set_optionFocused:i,val_preventOpenSelector:l,set_preventOpenSelector:S,val_openSelector:c,set_openSelector:p,val_status:n,set_status:r,val_activeInput:v,set_activeInput:y,val_validate:D,set_validate:T}=e,Y=t,{tone:I,required:A,form:C,className:w,multiSelect:R,enableFormSubmit:K,checkValidationAtFirst:N,onValidate:$,onValidateDelay:Q,onUpdateValue:U,onUpdateValidValue:J,onUserAction:j,value:G="",options:x,leftIndicator:B,rightIndicator:V,leftIcon:ge,rightIcon:he,componentId:Ie,status_id:be,wrapStyles:Ce,emptySelect:De,SearchInput:Oe,SearchInputPlaceholder:Te,SelectedComponent:we,SelectorComponent:Re,SelectorStyles:xe,SelectorPosition:Ve,DynamicOptionsOnSearch:ke,DynamicOptionsOnSearchDelay:Ae}=Y,s=ee(Y,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return E(()=>{var g;if(t.disabled||!c||d.is.exist(o))return;let _=z.FilterSelectableOptions(e.val_options,u,!1);i(((g=_[0])==null?void 0:g.id)||"")},[u]),E(()=>{if(n.eventType!="init"&&n.eventType!="override"){if(t.max==n.dataValue.length){p(!1),S(!0),m("");return}d("#SearchInput_"+t.componentId).focus()}},[n.dataValue]),E(()=>{if(n.eventType=="override")return;let _="autocomplete-click-"+t.componentId;if(!c){d(document).removeEvent([_]);return}d('[data-input-origin="'+t.componentId+'"]')&&(d("#SearchInput_"+t.componentId).focus(),d(document).addEvent({eventID:_,eventType:"mousedown",callback:ie=>{let Z=d(ie.target),re=!!d(Z).parent("."+W("Core")).length,se=!!d(Z).parent("."+W("Selector")).length;re||se||(p(!1),y(!1))},options:{passive:!1}}))},[c]),k(X,{children:[a(F,h(f({tabIndex:0},s),{"data-disabled":t.disabled,"data-show-validation":M.isShowValidation(D,n,!!N),"data-component-id":n.componentId,"data-input-origin":n.componentId,"data-focus":!!c||!!v,className:[w,W("Core")].join(" "),onFocus:_=>{if(s!=null&&s.onFocus&&(s==null||s.onFocus(_)),r(g=>h(f({},g),{eventID:O(),eventType:"focus.start",isFocusing:!0})),!t.disabled){if(l)return S(!1);p(!0),y(!0),_.preventDefault()}},onBlur:_=>{s!=null&&s.onBlur&&(s==null||s.onBlur(_)),r(g=>h(f({},g),{eventID:O(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:_=>{s!=null&&s.onCompositionStart&&(s==null||s.onCompositionStart(_)),r(g=>h(f({},g),{eventID:O(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:_=>{s!=null&&s.onCompositionEnd&&(s==null||s.onCompositionEnd(_)),r(g=>h(f({},g),{eventID:O(),eventType:"composing.end",isComposing:!1}))},onClick:_=>{s!=null&&s.onClick&&(s==null||s.onClick(_)),!t.disabled&&(p(!0),y(!0))},onKeyDown:_=>{let{key:g}=_;K&&M.SubmitForm(_,C),!c&&(g==" "||g=="ArrowDown"||g=="ArrowUp"||g=="Enter")&&(p(!0),y(!0))},children:k(P.Left,{gap:0,children:[a(pe,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),k(P.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(L.Selected,f({},e)),a(L.SearchInput,f({},e))]})]})})),c&&a(L.Selector,f({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[u,m]=b(!1);return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:a(F,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onBlur:o=>{e.set_activeInput(!1)},onCompositionStart:o=>{m(!0)},onCompositionEnd:o=>{m(!1)},onKeyDown:o=>{let{key:i,metaKey:l,ctrlKey:S}=o,c=l||S;i=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):i==" "?d.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):i=="Backspace"?d.scope(()=>{if(e.val_keyword)return;let p=[...e.val_status.dataValue];p.pop(),e.set_status(n=>h(f({},n),{dataValue:p,eventType:"update",eventID:O()}))}):i=="Enter"&&d.scope(()=>{if(u)return;if(!e.val_openSelector)return e.set_openSelector(!0);let p=e.val_options.find(r=>(r==null?void 0:r.id)==e.val_optionFocused);if(!p)return;let{value:n}=p;e.set_status(r=>{let v=[...r.dataValue];return d.scope(()=>{if(n===null)return v=[];r.dataValue.includes(n)?v=v.filter(D=>D!==n):t.multiSelect?v.push(n):v=[n]}),h(f({},r),{dataValue:v,eventType:"update",eventID:O()})}),e.set_optionsModified(!0),e.set_keyword("")}),d.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(i))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let p=i=="ArrowDown"?1:-1,n=z.FilterSelectableOptions(e.val_options),r=n.length-1,v=null;d.scope(()=>{var D,T,I,A,C,w;let y=n.findIndex(R=>(R==null?void 0:R.id)==e.val_optionFocused);if(y==-1&&(y=0),p==1){if(v=(D=n[0])==null?void 0:D.id,c){v=(T=n[r])==null?void 0:T.id;return}if(y==-1||y==r)return;v=(I=n[y+1])==null?void 0:I.id}else{if(v=(A=n[r])==null?void 0:A.id,c){v=(C=n[0])==null?void 0:C.id;return}if(y==-1||y==0)return;v=(w=n[y-1])==null?void 0:w.id}}),e.set_optionFocused(v)}),t.enableFormSubmit&&M.SubmitForm(o,e.rootStates.form)},onChange:o=>{let l=o.target.value;e.set_keyword(l),e.set_openSelector(!0)}},"searchInput")},Selector:e=>{var S;let[t,u]=b("idle"),[m,o]=b("idle");E(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(t=="idle")return u("ok");o("fetch");let c="autocomplete-search-"+e.rootStates.componentId;d.interval.once(()=>te(void 0,null,function*(){var r;let p=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let n=z.InitOptions(p||[]);e.set_options(n),e.set_optionFocused(((r=n[0])==null?void 0:r.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,c)},[e.val_keyword]),E(()=>{let c=d(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!c)return;let p=d(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];p&&(c.scrollTop=p.offsetTop-24)},[e.val_optionFocused]);let i=z.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),l={};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return a(F,h(f({position:"absolute"},l),{freeCSS:f({minWidth:"75%",zIndex:1e3},l.freeCSS),children:a(Se.Body,h(f({className:W("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:f({maxHeight:12*24},(S=e.rootStates.SelectorStyles)==null?void 0:S.freeCSS),children:k(oe,{gap:"1/12",padding:[1,0],children:[m=="fetch"&&a(P.Center,{padding:"1/2",children:a(de.Theme.R,{showInitial:!0})}),m!="fetch"&&k(X,{children:[!i.length&&a(q.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),i.map((c,p)=>{if(!c)return null;let{type:n,value:r}=c,v=e.val_optionFocused==c.id,y=e.val_status.dataValue.includes(r),D=e.rootStates.SelectorComponent;return a(oe,{"data-autocomplete-input-value":c.id,children:a(D,{option:c,isFocused:v,isSelected:y,addCallback:()=>{e.set_status(T=>{let I=[...T.dataValue];return d.scope(()=>{if(r===null)return I=[];T.dataValue.includes(r)?I=I.filter(C=>C!==r):e.rootStates.multiSelect?I.push(r):I=[r]}),h(f({},T),{dataValue:I,eventType:"update",eventID:O()})})}})},c.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:u,set_status:m,val_optionsDict:o}=e,i=[];return u.dataValue.forEach(l=>{let S=o[d.Stringify(l)];if(!S)return;let c=t.SelectedComponent,p=S.label;(S==null?void 0:S.value)===null&&(p=""),i.push(a(F,{className:W("SelectedCell"),children:a(c,{value:S==null?void 0:S.value,label:p,removeCallback:n=>{if(n.stopPropagation(),n.preventDefault(),t.disabled)return;let r=[...u.dataValue];r=r.filter(v=>v!==l),m(v=>h(f({},v),{dataValue:r,eventType:"update",eventID:O()}))}})},d.Stringify(S==null?void 0:S.value)||O()))}),a(X,{children:i})},Core:e=>{var J,j,G;let{value:t}=e,[u,m]=b(!1),[o,i]=b(!1),[l,S]=b(!1),[c,p]=b(!1),[n,r]=b(""),[v,y]=b(e.options),[D,T]=b(((J=e.options.find(x=>{var B;return(x==null?void 0:x.value)===((B=e.value)==null?void 0:B[0])}))==null?void 0:J.id)||((j=e.options[0])==null?void 0:j.id)||""),[I,A]=b({}),[C,w]=b(M.DefaultStatus(e.componentId,t)),[R,K]=b({ok:!1,notice:[]}),N=ue(!1);E(()=>{o||(N.current?y(e.options):N.current=!0)},[d.Stringify((G=e.options)==null?void 0:G.map(x=>x.value))]),E(()=>{if(!v.length)return;let x=[...v],B=f({},I);x.forEach(V=>{(V==null?void 0:V.type)!="label"&&(B[d.Stringify(V==null?void 0:V.value)]=V)}),A(B)},[v]);let $={rootStates:e,val_options:v,set_options:y,val_optionFocused:D,set_optionFocused:T,val_optionsDict:I,set_optionsDict:A,val_optionsModified:o,set_optionsModified:i,val_preventOpenSelector:u,set_preventOpenSelector:m,val_openSelector:l,set_openSelector:S,val_activeInput:c,set_activeInput:p,val_keyword:n,set_keyword:r,val_status:C,set_status:w,val_validate:R,set_validate:K},Q=!!e.multiSelect;M.CommonEffects({type:Q?"autocomplete.multi":"autocomplete.single",states:e,val_status:C,set_status:w,val_validate:R,set_validate:K,SystemValidation:_e});let U=C.dataValue.length&&C.dataValue[0]!==null;return U=U||l||c,k(me,{val_status:C,set_status:w,val_validate:R,states:e,children:[a(ye,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:U}),a(L.Shallow,f({},$)),a(L.Button,f({},$))]})}},ne=e=>{let t=f({},e);return t=h(f({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:u,isSelected:m,isFocused:o,addCallback:i})=>u?(u==null?void 0:u.type)=="label"?a(X,{children:u.label}):a(ae.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:i,children:k(P.Left,{gap:"1/2",children:[m&&a(H.Check,{fontColor:"theme"}),a(q.Supplement,{transition:"short",children:u.label})]})}):null,SelectedComponent:({value:u,label:m,removeCallback:o})=>k(P.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[a(F,{padding:[0,"1/4"],children:m}),a(ae.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:a(H.X,{})})]}),SelectorPosition:3},t),{freeCSS:f({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:a(q.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=d.flatArray(t.value),t.options=z.InitOptions(t.options),d.is.nullish(t.rightIcon)&&(t.rightIcon=a(le,{ssSphere:2,children:a(H.Search,{})}),t.disabled&&(t.rightIcon=a(le,{ssSphere:2,fontColor:"5.translucent",children:a(H.Ban,{})}))),t.rightIcon&&(t=f({paddingRight:3},t)),t.leftIcon&&(t=f({paddingLeft:3},t)),a(fe,{componentId:t.componentId,children:L.Core,states:ve(t)})};export{ne as Autocomplete,ne as default};
|
package/dist/fn/Input/Parts.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as e,c as n,d as p}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import{Box as s,Span as u}from"../../atoms";const c=t=>{if(t||(t="border"),t=="plain")return{};let r={flexSizing:"none",padding:
|
|
1
|
+
import{b as e,c as n,d as p}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import{Box as s,Span as u}from"../../atoms";const c=t=>{if(t||(t="border"),t=="plain")return{};let r={flexSizing:"none",padding:1,borderRadius:"2.tone.secondary",backgroundColor:"cloud"};return t=="border"?r=n(e({},r),{border:!0}):t=="cloud"?r=n(e({},r),{border:"1.thin"}):t=="bottomBorder"&&(r=n(e({},r),{borderRadius:0,borderBottom:!0})),r},d={position:"absolute",flexCenter:!0,fontColor:"theme",fontSize:"1.mini",backgroundColor:"inherit",top:"50%",freeCSS:{pointerEvents:"none",transform:"translateY(-50%)"}},I=t=>i(u,e({children:"\u5FC5\u9808",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],backgroundColor:"nega",borderRadius:"3.tone.tertiary"},t)),b=t=>i(u,e({children:"*",fontColor:"nega",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary"},t)),h=t=>i(u,e({children:"\u7701\u7565\u53EF",fontColor:"white",fontSize:"0.xs",padding:["1/4","1/3"],borderRadius:"3.tone.tertiary",backgroundColor:"layer.6"},t)),x=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3"}),a))},m=t=>{let o=t,{tone:r}=o,a=p(o,["tone"]);return i(s,e(n(e({},c(r)),{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3"}),a))},y=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{right:"3/4"}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))},F=t=>{let o=t,{tone:r="border"}=o,a=p(o,["tone"]);return i(s,n(e(n(e({},d),{left:"3/4"}),a),{freeCSS:e(e({},d.freeCSS),a.freeCSS)}))};export{F as LeftIcon,x as LeftIndicator,h as OmitSign,b as RequiredShortSign,I as RequiredSign,y as RightIcon,m as RightIndicator};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import{b as i,c as r,d as ae,e as ue}from"../../chunk-C5N2D3ZX.js";import{Fragment as de,jsx as s,jsxs as Y}from"react/jsx-runtime";import h,{UUID as T,useStore as pe}from"jmini";import{useState as ie,useEffect as ne}from"react";import{$$fromRoot as ke,ExtractStyles as De}from"../../@utils";import{Box as k,FAI as Ne}from"../../atoms";import{Literal as le}from"../../mols";import{Tips as ce,Button as Ee}from"..";import{faEye as Le}from"@fortawesome/free-solid-svg-icons/faEye";import{OptionalInputWrapper as _e,BoxWrapper as He,CoreEffects as K,DefaultBoxishStyles as Ae}from"./core";import{InputLabel as Be}from"./Label";import{LeftIcon as Me,RightIcon as me}from".";const $e={katakana:{reg:/^[ァ-ヶー ｦ-ﾟ ]*$/g,exist:!0,reason:"\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},"hankaku.katakana":{reg:/^[ｦ-ﾟ ]*$/g,exist:!0,reason:"\u534A\u89D2\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},number:{reg:/^-?[0-9\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},digitNumber:{reg:/^-?[0-9\,\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},fileName:{reg:/[¥\/:*\?\"\'\|\.\s\n\r\<\>]/g,exist:!1,reason:"\u7A7A\u767D\u307E\u305F\u306F\u4E00\u90E8\u306E\u7279\u6B8A\u6587\u5B57\u306F\u4F7F\u7528\u3067\u304D\u307E\u305B\u3093"},creditCard:{reg:/^\d{14,16}$/g,exist:!0,reason:"14~16\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},email:{reg:/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+\.[A-Za-z0-9]+$/,exist:!0,reason:Y(de,{children:[s(k,{children:"\u25CB\u25CB\u25CB\u25CB@\u25CB\u25CB\u25CB\u25CB.\u25CB\u25CB\u25CB\u306E\u5F62\u5F0F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),s(k,{children:"\u6700\u5F8C\u306E\u6587\u5B57\u306B.(\u30C9\u30C3\u30C8)\u3092\u5165\u308C\u308B\u3053\u3068\u306F\u3067\u304D\u307E\u305B\u3093"})]})},password:{reg:/^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$/,exist:!0,reason:"8\u6587\u5B57\u4EE5\u4E0A\u3001\u534A\u89D2\u82F1\u6570\u5927\u5C0F\u6587\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},tel:{reg:/.*$/g,exist:!0,reason:Y(de,{children:[s(k,{children:"0\u304B\u3089\u59CB\u307E\u308B\u756A\u53F7\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"}),s(k,{children:"9~12\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),s(k,{children:"\u6570\u5B57\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"})]})},url:{reg:/^https?:\/\/[^\n\s]+(\.|\:)[^\n\s\.\:]+$/,exist:!0,reason:"URL\u5F62\u5F0F : http(s)://\u25EF\u25EF\u25EF\u25EF"},postal:{reg:/^\d{7}$/g,exist:!0,reason:"7\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}},y={setSelection:t=>{let{id:n,restrict:o,val_status:p}=t,a=ke("#"+n)[0];if(a&&p.prevValue&&p.formatValue){let{formatValue:e,prevValue:f,caretFrom:b,caretTo:l}=p;if(o=="creditCard")e.length>=f.length&&b%5==0&&(b++,l++),a.setSelectionRange(b,l);else if(o=="postal")e.length==5&&f.length==3&&(b++,l++),a.setSelectionRange(b,l);else if(o=="digitNumber"){let c=e.length-f.length;c==2&&(b++,l++),c==-2&&(b--,l--),a.setSelectionRange(b,l)}}},Validation:{System:t=>{let{value:n,states:o}=t,{restrict:p="text",defaultValidation:a,maxLength:e,multiline:f,required:b}=o,l=[];if(f||(e=e||255),h.is.exist(e)&&n.length>=Number(e)&&l.push({type:"invalid",label:e+"\u5B57\u4EE5\u5185\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n){let c=y.Validation.Text(n,p,a);c.ok||l.push({type:"invalid",label:c.body})}else b&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"});return{ok:!l.filter(({type:c})=>c=="invalid").length,notice:l}},Text:(t,n,o)=>{let p={ok:!0,body:""};return(()=>{let a=o||$e[n];if(!a)return;let e=a.reason;if(a){let f=!!(+!!t.match(a.reg)^+!a.exist);p={ok:f,body:f?"":e}}})(),p},DataLeveling:t=>{let{restrict:n,allowDecimals:o,allowZeroStart:p,value:a=""}=t,e=String(a);["tel","number","digitNumber","postal","creditCard"].includes(n)&&(e=e.zen2hanNumber()),n=="katakana",n=="hankaku.katakana",["postal","creditCard"].includes(n)&&(e=e.removeLetters()),h.scope(()=>{if(!["number","digitNumber"].includes(n))return;e=e.replace(/(\.\d+)\..*/g,"$1").replace(/\.+/g,".").replace(/[^0-9.-]/g,"");let b=Number(e)<0||e[0]=="-";e=e.replace(/[^0-9.]/g,""),b&&(e="-"+e);let l=Number(o);o?e=e.replace(/(\.\d{0,})\..*/g,"$1").replace(/\.(\d{0,})/g,(c,g)=>g.length>l?"."+g.slice(0,l):c):e=e.replace(/\.\d?/g,""),h.scope(()=>{n=="number"&&(p||(e=e.replace(/^0(\d+)/g,"$1").replace(/^-0(\d+)/g,"-$1")))}),h.scope(()=>{let c=e.slice(-1);if(!e||c=="."||c=="-")return;let{min:g,max:u}=t;h.is.exist(g)&&h.is.number(g)&&Number(e)<Number(g)&&(e=String(g.toFixed(l))),h.is.exist(u)&&h.is.number(u)&&Number(e)>Number(u)&&(e=String(u.toFixed(l)))}),h.scope(()=>{if(!e||e=="-"||n!="digitNumber")return;let c=e.slice(-1),[g,u]=e.split(".");e=g.replace(/\B(?=(\d{3})+(?!\d))/g,","),u&&(e+="."+u),c=="."&&(e+=".")})});let f=e;return n=="digitNumber"||(n=="postal"?e.length>=4&&(f=e.clip(0,3)+"-"+e.clip(3)):n=="creditCard"&&(f=e.replace(/.{4}(?=.)/g,"$& "))),e=e.replace(/,/g,""),{formatValue:f,dataValue:e}}},Shallow:t=>{let{rootStates:n,val_status:o}=t,p=o.dataValue||"";ne(()=>{h.scope(()=>ue(void 0,null,function*(){if(!n.multiline)return;let c=h('[data-input-origin="'+o.componentId+'"]'),g=h('[data-input-shallow="'+o.componentId+'"]'),u=h('[data-input-min-height-value-shallow="'+o.componentId+'"]'),E=h('[data-input-max-height-value-shallow="'+o.componentId+'"]');if(!c[0]||!g[0]||!u[0]||!E[0])return;let L=g.position(),F=u.position(),$=E.position(),D=0;n.autoHeight&&(D=L.height),D=Math.max(D,F.height),D=Math.min(D,$.height),c[0].style.height=D+"px"}))},[p]);let a=p||"";(!!p.match(/\n$/)||!p)&&(a+="T");let f="",b="";if(n.multiline){let c=n.minRows||1,g=n.maxRows||100;f=`
|
|
2
2
|
T`.repeat(c-1),b=`
|
|
3
|
-
T`.repeat(g-1)}let l=De(n);return Y(k,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:[s(le.Description,r(i({className:n.className},l),{position:"absolute",width:1,freeCSS:r(i({},l.freeCSS),{color:"orange"}),"data-input-shallow":o.componentId,children:s(k,{"data-input-value-shallow":o.componentId,children:a})})),s(le.Description,r(i({className:n.className},l),{position:"absolute",left:0,freeCSS:r(i({},l.freeCSS),{backgroundColor:"transparent",color:"blue"}),"data-input-min-height-value-shallow":o.componentId,children:f})),s(le.Description,r(i({className:n.className},l),{position:"absolute",right:0,freeCSS:r(i({},l.freeCSS),{backgroundColor:"transparent",color:"red"}),"data-input-max-height-value-shallow":o.componentId,children:b}))]})},InputBox:t=>{let{rootStates:n,val_validate:o,set_validate:p,val_status:a,set_status:e,val_inputType:f,set_inputType:b}=t;if(n.multiline)return null;let re=n,{componentId:l,tone:c,required:g,restrict:u="text",form:E,autoComplete:L="off",autoCapitalize:F="off",minRows:$,maxRows:D,multiline:fe,autoHeight:ge,enableFormSubmit:G,clearButton:be=!1,allowDecimals:z,allowZeroStart:A,checkValidationAtFirst:W,onChange:X,onKeyDown:Q,onValidate:xe,onValidateDelay:he,onUpdateValue:Ie,onUpdateValidValue:ve,onUserAction:Se,value:Te="",leftIndicator:ye,rightIndicator:Ce,leftIcon:Re,rightIcon:we,maxLength:m,min:O,max:B,label:S,isLabelActive:R,defaultValidation:oe,wrapStyles:Pe}=re,d=ae(re,["componentId","tone","required","restrict","form","autoComplete","autoCapitalize","minRows","maxRows","multiline","autoHeight","enableFormSubmit","clearButton","allowDecimals","allowZeroStart","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","maxLength","min","max","label","isLabelActive","defaultValidation","wrapStyles"]);return s(k,r(i({htmlTag:"input",type:f,inputMode:["number","digitNumber","creditCard"].includes(u)?"numeric":u=="email"?"email":"text","data-disabled":n.disabled,"data-show-validation":K.isShowValidation(o,a,!!W),"data-component-id":a.componentId,"data-input-origin":a.componentId,value:a.formatValue,autoComplete:L,autoCapitalize:F,onKeyDown:I=>{let{key:x,target:w}=I,M=w,{selectionStart:P,selectionEnd:j}=M,q=Number(P),U=Number(j);{let _=a.formatValue[Number(q)],H=a.formatValue[Number(q)-1];x=="Delete"&&(u=="creditCard"&&_==" "||u=="postal"&&_=="-"||u=="digitNumber"&&_==",")&&(M.setSelectionRange(q+1,U+1),I.preventDefault()),x=="Backspace"&&(u=="creditCard"&&H==" "||u=="postal"&&H=="-"||u=="digitNumber"&&H==",")&&(M.setSelectionRange(q-1,U-1),I.preventDefault()),x=="Enter"||x=="Tab"}h.scope(()=>{["number","digitNumber","creditCard"].includes(u)&&x=="Clear"&&e(_=>r(i({},_),{dataValue:"",formatValue:"",eventType:"update",eventID:T(),isFocusing:!0}))}),h.scope(()=>{if(!["number","digitNumber"].includes(u)||!["ArrowUp","ArrowDown"].includes(x))return;let _=+(x=="ArrowUp")*2-1,H=a.dataValue.slice(-1),se=a.formatValue[U-1],N=U-1,V=String(a.formatValue),ee=a.dataValue.split(".")[1],Ve=(ee==null?void 0:ee.length)||0;h.scope(()=>{if(!H){V="0";return}if(H=="-"){V+="0";return}if(H=="."){V+="0";return}if(U==0)return;let te=String(V).slice(0,N).match(/\./),Fe=String(V).slice(N),J=String(Fe.toNumber().toFixed(0)).length;se=="."&&(J=1,N=V.split(".")[0].length-1),se==","&&(J+=1,N--),te&&(J=-1*(Ve-J));let Z=V[N].toNumber()+_;Z<0?Z=9:Z>=10&&(Z=0),V=V.partReplace(N,String(Z)),setTimeout(()=>{M.setSelectionRange(N+1,N+1)},1)}),o.ok&&p({ok:!1,notice:[]}),e(te=>r(i(i({},te),y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:V})),{eventType:"update",eventID:T(),isFocusing:!0})),I.preventDefault()}),Q&&Q(I),G&&K.SubmitForm(I,E)},onChange:I=>{let{value:x,selectionStart:w,selectionEnd:M}=I.target,P=y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:x});a.isComposing&&(P.formatValue=x),P.formatValue!=a.formatValue&&(o.ok&&p({ok:!1,notice:[]}),e(j=>r(i(i({},j),P),{prevValue:a.formatValue,eventType:"update",eventID:T(),caretFrom:Number(w),caretTo:Number(M),isFocusing:!0})),X&&X(I))},width:1},d),{onFocus:I=>{d!=null&&d.onFocus&&(d==null||d.onFocus(I)),e(x=>r(i({},x),{eventID:T(),eventType:"focus.start",isFocusing:!0}))},onBlur:I=>{d!=null&&d.onBlur&&(d==null||d.onBlur(I)),e(x=>r(i({},x),{eventID:T(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:I=>{d!=null&&d.onCompositionStart&&(d==null||d.onCompositionStart(I)),e(x=>r(i({},x),{eventID:T(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:I=>{if(d!=null&&d.onCompositionEnd&&(d==null||d.onCompositionEnd(I)),u=="text"){e(w=>r(i({},w),{eventID:T(),eventType:"composing.end",isComposing:!1}));return}let x=y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:a.formatValue});e(w=>r(i(i({},w),x),{prevValue:w.formatValue,eventType:"update",eventID:T(),caretFrom:Number(w.formatValue.length+1),caretTo:Number(w.formatValue.length+1),isComposing:!1}))}}))},TextAreaBox:t=>{let{rootStates:n,val_validate:o,set_validate:p,val_status:a,set_status:e,isShallow:f}=t,B=n,{componentId:b,tone:l,required:c,form:g,label:u,isLabelActive:E,minRows:L,maxRows:F,multiline:$,autoHeight:D,allowDecimals:fe,allowZeroStart:ge,enableFormSubmit:G,maxLength:be,checkValidationAtFirst:z,onChange:A,onKeyDown:W,onValidate:X,onValidateDelay:Q,onUpdateValue:xe,onUpdateValidValue:he,onUserAction:Ie,value:ve="",leftIndicator:Se,rightIndicator:Te,leftIcon:ye,rightIcon:Ce,defaultValidation:Re,wrapStyles:we}=B,m=ae(B,["componentId","tone","required","form","label","isLabelActive","minRows","maxRows","multiline","autoHeight","allowDecimals","allowZeroStart","enableFormSubmit","maxLength","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","defaultValidation","wrapStyles"]);return!n.multiline?null:s(k,r(i({htmlTag:"textarea","data-show-validation":K.isShowValidation(o,a,!!z),"data-input-origin":a.componentId,"data-component-id":a.componentId,value:a.dataValue,width:1},m),{onFocus:S=>{m!=null&&m.onFocus&&(m==null||m.onFocus(S)),e(R=>r(i({},R),{eventID:T(),eventType:"focus.start",isFocusing:!0}))},onBlur:S=>{m!=null&&m.onBlur&&(m==null||m.onBlur(S)),e(R=>r(i({},R),{eventID:T(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:S=>{m!=null&&m.onCompositionStart&&(m==null||m.onCompositionStart(S)),e(R=>r(i({},R),{eventID:T(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:S=>{m!=null&&m.onCompositionEnd&&(m==null||m.onCompositionEnd(S)),e(R=>r(i({},R),{eventID:T(),eventType:"composing.end",isComposing:!1}))},onKeyDown:S=>{W&&W(S),G&&K.SubmitForm(S,g)},onChange:S=>{let{value:R}=S.target;o.ok&&p({ok:!1,notice:[]}),e(oe=>r(i({},oe),{dataValue:R,eventType:"update",eventID:T(),isFocusing:!0})),A&&A(S)}}))}},ze=t=>{let{componentId:n,restrict:o="text",value:p="",min:a,max:e,allowDecimals:f,allowZeroStart:b}=t,[l,c]=ie({componentId:n,formatValue:"",dataValue:"",prevValue:"",eventType:"init",eventID:T(),caretFrom:null,caretTo:null}),[g,u]=ie({ok:!1,notice:[]}),[E,L]=ie(["password","concealed"].includes(o)&&"password"||"text");ne(()=>{c($=>i(i({},$),y.Validation.DataLeveling({allowDecimals:f,allowZeroStart:b,min:a,max:e,restrict:o,value:p}))),pe.set({[n+":set_inputType"]:L})},[]);let F={rootStates:t,val_inputType:E,set_inputType:L,val_status:l,set_status:c,val_validate:g,set_validate:u};return K.CommonEffects({type:"textfield",states:t,val_status:l,set_status:c,val_validate:g,set_validate:u,SystemValidation:y.Validation.System,ExtraOverrideStates:()=>y.Validation.DataLeveling({allowDecimals:f,allowZeroStart:b,min:a,max:e,restrict:o,value:p})}),ne(()=>{y.setSelection({id:t.id,restrict:o,val_status:l})},[l]),Y(He,{val_status:l,set_status:c,val_validate:g,states:F.rootStates,children:[s(Be,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:t.isLabelActive||!!l.isFocusing||!!l.dataValue}),s(y.Shallow,i({},F)),s(y.InputBox,i({},F)),s(y.TextAreaBox,i({},F))]})},C=t=>(t=i({autoHeight:!0,restrict:"text",fontSize:"inherit"},t),t.multiline?(t.minRows=t.minRows||5,t.maxRows=t.maxRows||20):(t.minRows=1,t.maxRows=1),s(_e,{componentId:t.componentId,children:ze,states:Ae(t)})),v=C;v.Validate=y.Validation.Text,v.Katakana=t=>s(C,r(i({},t),{restrict:"katakana",multiline:!1,autoHeight:!1})),v.HankakuKatakana=t=>s(C,r(i({},t),{restrict:"hankaku.katakana",multiline:!1,autoHeight:!1})),v.CreditCard=t=>s(C,r(i({},t),{restrict:"creditCard",multiline:!1,autoHeight:!1})),v.Tel=t=>s(C,r(i({},t),{restrict:"tel",multiline:!1,autoHeight:!1})),v.Number=t=>s(C,r(i({},t),{restrict:"number",multiline:!1,autoHeight:!1})),v.DigitNumber=t=>s(C,r(i({},t),{restrict:"digitNumber",multiline:!1,autoHeight:!1})),v.Email=t=>s(C,r(i({},t),{restrict:"email",multiline:!1,autoHeight:!1})),v.Url=t=>s(C,r(i({},t),{restrict:"url",multiline:!1,autoHeight:!1})),v.Postal=t=>s(C,r(i({label:"\u90F5\u4FBF\u756A\u53F7"},t),{restrict:"postal",multiline:!1,autoHeight:!1,leftIcon:s(Me,{ssSphere:2,fontColor:"4.thin",children:"\u3012"})})),v.Password=t=>s(C,r(i({label:"\u30D1\u30B9\u30EF\u30FC\u30C9",rightIcon:s(me,{ssSphere:2,padding:0,freeCSS:{pointerEvents:"all"},children:s(Ee.Sub,{ssSphere:2,borderRadius:"3.tone.tertiary",fontColor:"theme",flexCenter:!0,height:1,ssEffectsOnActive:["expand"],onMouseOver:n=>{ce.open(n.currentTarget,"\u30C6\u30AD\u30B9\u30C8\u3092\u8868\u793A",24)},onMouseLeave:ce.abort,tabIndex:-1,onClick:n=>{h(n.target).parent().parent().find("input").callback(o=>{let p=o[0];if(!p)return;let a=p.dataset.componentId;if(!a)return;let e=pe.get(a+":set_inputType");e&&e(f=>f==="password"&&"text"||"password")})},children:s(Ne,{icon:Le})})}),restrict:"password"},t),{multiline:!1,autoHeight:!1})),v.Concealed=t=>s(v.Password,r(i({label:"\u79D8\u5BC6\u9375"},t),{restrict:"concealed"})),v.Money={JPY:t=>s(v.DigitNumber,r(i({rightIcon:s(me,{ssSphere:2,fontColor:"4.thin",children:"\u5186"})},t),{multiline:!1,autoHeight:!1}))};export{v as TextField,ze as TextInput,v as default};
|
|
3
|
+
T`.repeat(g-1)}let l=De(n);return Y(k,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:[s(le.Description,r(i({className:n.className},l),{position:"absolute",width:1,freeCSS:r(i({},l.freeCSS),{color:"orange"}),"data-input-shallow":o.componentId,children:s(k,{"data-input-value-shallow":o.componentId,children:a})})),s(le.Description,r(i({className:n.className},l),{position:"absolute",left:0,freeCSS:r(i({},l.freeCSS),{backgroundColor:"transparent",color:"blue"}),"data-input-min-height-value-shallow":o.componentId,children:f})),s(le.Description,r(i({className:n.className},l),{position:"absolute",right:0,freeCSS:r(i({},l.freeCSS),{backgroundColor:"transparent",color:"red"}),"data-input-max-height-value-shallow":o.componentId,children:b}))]})},InputBox:t=>{let{rootStates:n,val_validate:o,set_validate:p,val_status:a,set_status:e,val_inputType:f,set_inputType:b}=t;if(n.multiline)return null;let re=n,{componentId:l,tone:c,required:g,restrict:u="text",form:E,autoComplete:L="off",autoCapitalize:F="off",minRows:$,maxRows:D,multiline:fe,autoHeight:ge,enableFormSubmit:G,clearButton:be=!1,allowDecimals:z,allowZeroStart:A,checkValidationAtFirst:W,onChange:X,onKeyDown:Q,onValidate:xe,onValidateDelay:he,onUpdateValue:Ie,onUpdateValidValue:ve,onUserAction:Se,value:Te="",leftIndicator:ye,rightIndicator:Ce,leftIcon:Re,rightIcon:we,maxLength:m,min:O,max:B,label:S,isLabelActive:R,defaultValidation:oe,wrapStyles:Pe}=re,d=ae(re,["componentId","tone","required","restrict","form","autoComplete","autoCapitalize","minRows","maxRows","multiline","autoHeight","enableFormSubmit","clearButton","allowDecimals","allowZeroStart","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","maxLength","min","max","label","isLabelActive","defaultValidation","wrapStyles"]);return s(k,r(i({htmlTag:"input",type:f,inputMode:["number","digitNumber","creditCard"].includes(u)?"numeric":u=="email"?"email":"text","data-disabled":n.disabled,"data-show-validation":K.isShowValidation(o,a,!!W),"data-component-id":a.componentId,"data-input-origin":a.componentId,value:a.formatValue,autoComplete:L,autoCapitalize:F,onKeyDown:I=>{let{key:x,target:w}=I,M=w,{selectionStart:P,selectionEnd:j}=M,q=Number(P),U=Number(j);{let _=a.formatValue[Number(q)],H=a.formatValue[Number(q)-1];x=="Delete"&&(u=="creditCard"&&_==" "||u=="postal"&&_=="-"||u=="digitNumber"&&_==",")&&(M.setSelectionRange(q+1,U+1),I.preventDefault()),x=="Backspace"&&(u=="creditCard"&&H==" "||u=="postal"&&H=="-"||u=="digitNumber"&&H==",")&&(M.setSelectionRange(q-1,U-1),I.preventDefault()),x=="Enter"||x=="Tab"}h.scope(()=>{["number","digitNumber","creditCard"].includes(u)&&x=="Clear"&&e(_=>r(i({},_),{dataValue:"",formatValue:"",eventType:"update",eventID:T(),isFocusing:!0}))}),h.scope(()=>{if(!["number","digitNumber"].includes(u)||!["ArrowUp","ArrowDown"].includes(x))return;let _=+(x=="ArrowUp")*2-1,H=a.dataValue.slice(-1),se=a.formatValue[U-1],N=U-1,V=String(a.formatValue),ee=a.dataValue.split(".")[1],Ve=(ee==null?void 0:ee.length)||0;h.scope(()=>{if(!H){V="0";return}if(H=="-"){V+="0";return}if(H=="."){V+="0";return}if(U==0)return;let te=String(V).slice(0,N).match(/\./),Fe=String(V).slice(N),J=String(Fe.toNumber().toFixed(0)).length;se=="."&&(J=1,N=V.split(".")[0].length-1),se==","&&(J+=1,N--),te&&(J=-1*(Ve-J));let Z=V[N].toNumber()+_;Z<0?Z=9:Z>=10&&(Z=0),V=V.partReplace(N,String(Z)),setTimeout(()=>{M.setSelectionRange(N+1,N+1)},1)}),o.ok&&p({ok:!1,notice:[]}),e(te=>r(i(i({},te),y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:V})),{eventType:"update",eventID:T(),isFocusing:!0})),I.preventDefault()}),Q&&Q(I),G&&K.SubmitForm(I,E)},onChange:I=>{let{value:x,selectionStart:w,selectionEnd:M}=I.target,P=y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:x});a.isComposing&&(P.formatValue=x),P.formatValue!=a.formatValue&&(o.ok&&p({ok:!1,notice:[]}),e(j=>r(i(i({},j),P),{prevValue:a.formatValue,eventType:"update",eventID:T(),caretFrom:Number(w),caretTo:Number(M),isFocusing:!0})),X&&X(I))},width:1},d),{onFocus:I=>{d!=null&&d.onFocus&&(d==null||d.onFocus(I)),e(x=>r(i({},x),{eventID:T(),eventType:"focus.start",isFocusing:!0}))},onBlur:I=>{d!=null&&d.onBlur&&(d==null||d.onBlur(I)),e(x=>r(i({},x),{eventID:T(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:I=>{d!=null&&d.onCompositionStart&&(d==null||d.onCompositionStart(I)),e(x=>r(i({},x),{eventID:T(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:I=>{if(d!=null&&d.onCompositionEnd&&(d==null||d.onCompositionEnd(I)),u=="text"){e(w=>r(i({},w),{eventID:T(),eventType:"composing.end",isComposing:!1}));return}let x=y.Validation.DataLeveling({allowDecimals:z,allowZeroStart:A,min:O,max:B,restrict:u,value:a.formatValue});e(w=>r(i(i({},w),x),{prevValue:w.formatValue,eventType:"update",eventID:T(),caretFrom:Number(w.formatValue.length+1),caretTo:Number(w.formatValue.length+1),isComposing:!1}))}}))},TextAreaBox:t=>{let{rootStates:n,val_validate:o,set_validate:p,val_status:a,set_status:e,isShallow:f}=t,B=n,{componentId:b,tone:l,required:c,form:g,label:u,isLabelActive:E,minRows:L,maxRows:F,multiline:$,autoHeight:D,allowDecimals:fe,allowZeroStart:ge,enableFormSubmit:G,maxLength:be,checkValidationAtFirst:z,onChange:A,onKeyDown:W,onValidate:X,onValidateDelay:Q,onUpdateValue:xe,onUpdateValidValue:he,onUserAction:Ie,value:ve="",leftIndicator:Se,rightIndicator:Te,leftIcon:ye,rightIcon:Ce,defaultValidation:Re,wrapStyles:we}=B,m=ae(B,["componentId","tone","required","form","label","isLabelActive","minRows","maxRows","multiline","autoHeight","allowDecimals","allowZeroStart","enableFormSubmit","maxLength","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","defaultValidation","wrapStyles"]);return!n.multiline?null:s(k,r(i({htmlTag:"textarea","data-show-validation":K.isShowValidation(o,a,!!z),"data-input-origin":a.componentId,"data-component-id":a.componentId,value:a.dataValue,width:1},m),{onFocus:S=>{m!=null&&m.onFocus&&(m==null||m.onFocus(S)),e(R=>r(i({},R),{eventID:T(),eventType:"focus.start",isFocusing:!0}))},onBlur:S=>{m!=null&&m.onBlur&&(m==null||m.onBlur(S)),e(R=>r(i({},R),{eventID:T(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:S=>{m!=null&&m.onCompositionStart&&(m==null||m.onCompositionStart(S)),e(R=>r(i({},R),{eventID:T(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:S=>{m!=null&&m.onCompositionEnd&&(m==null||m.onCompositionEnd(S)),e(R=>r(i({},R),{eventID:T(),eventType:"composing.end",isComposing:!1}))},onKeyDown:S=>{W&&W(S),G&&K.SubmitForm(S,g)},onChange:S=>{let{value:R}=S.target;o.ok&&p({ok:!1,notice:[]}),e(oe=>r(i({},oe),{dataValue:R,eventType:"update",eventID:T(),isFocusing:!0})),A&&A(S)}}))}},ze=t=>{let{componentId:n,restrict:o="text",value:p="",min:a,max:e,allowDecimals:f,allowZeroStart:b}=t,[l,c]=ie({componentId:n,formatValue:"",dataValue:"",prevValue:"",eventType:"init",eventID:T(),caretFrom:null,caretTo:null}),[g,u]=ie({ok:!1,notice:[]}),[E,L]=ie(["password","concealed"].includes(o)&&"password"||"text");ne(()=>{c($=>i(i({},$),y.Validation.DataLeveling({allowDecimals:f,allowZeroStart:b,min:a,max:e,restrict:o,value:p}))),pe.set({[n+":set_inputType"]:L})},[]);let F={rootStates:t,val_inputType:E,set_inputType:L,val_status:l,set_status:c,val_validate:g,set_validate:u};return K.CommonEffects({type:"textfield",states:t,val_status:l,set_status:c,val_validate:g,set_validate:u,SystemValidation:y.Validation.System,ExtraOverrideStates:()=>y.Validation.DataLeveling({allowDecimals:f,allowZeroStart:b,min:a,max:e,restrict:o,value:p})}),ne(()=>{y.setSelection({id:t.id,restrict:o,val_status:l})},[l]),Y(He,{val_status:l,set_status:c,val_validate:g,states:F.rootStates,children:[s(Be,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:t.isLabelActive||!!l.isFocusing||!!l.dataValue}),s(y.Shallow,i({},F)),s(y.InputBox,i({},F)),s(y.TextAreaBox,i({},F))]})},C=t=>(t=i({autoHeight:!0,restrict:"text",fontSize:"inherit"},t),t.multiline?(t.minRows=t.minRows||5,t.maxRows=t.maxRows||20):(t.minRows=1,t.maxRows=1),s(_e,{componentId:t.componentId,children:ze,states:Ae(t)})),v=C;v.Validate=y.Validation.Text,v.Katakana=t=>s(C,r(i({},t),{restrict:"katakana",multiline:!1,autoHeight:!1})),v.HankakuKatakana=t=>s(C,r(i({},t),{restrict:"hankaku.katakana",multiline:!1,autoHeight:!1})),v.CreditCard=t=>s(C,r(i({},t),{restrict:"creditCard",multiline:!1,autoHeight:!1})),v.Tel=t=>s(C,r(i({},t),{restrict:"tel",multiline:!1,autoHeight:!1})),v.Number=t=>s(C,r(i({},t),{restrict:"number",multiline:!1,autoHeight:!1})),v.DigitNumber=t=>s(C,r(i({},t),{restrict:"digitNumber",multiline:!1,autoHeight:!1})),v.Email=t=>s(C,r(i({},t),{restrict:"email",multiline:!1,autoHeight:!1})),v.Url=t=>s(C,r(i({},t),{restrict:"url",multiline:!1,autoHeight:!1})),v.Postal=t=>s(C,r(i({label:"\u90F5\u4FBF\u756A\u53F7"},t),{restrict:"postal",multiline:!1,autoHeight:!1,leftIcon:s(Me,{ssSphere:2,fontColor:"4.thin",children:"\u3012"})})),v.Password=t=>s(C,r(i({label:"\u30D1\u30B9\u30EF\u30FC\u30C9",rightIcon:s(me,{ssSphere:2.5,freeCSS:{pointerEvents:"all"},children:s(Ee.Sub,{ssSphere:2.5,borderRadius:"3.tone.tertiary",fontColor:"theme",flexCenter:!0,height:1,ssEffectsOnActive:["expand"],onMouseOver:n=>{ce.open(n.currentTarget,"\u30C6\u30AD\u30B9\u30C8\u3092\u8868\u793A",24)},onMouseLeave:ce.abort,tabIndex:-1,onClick:n=>{h(n.target).parent().parent().find("input").callback(o=>{let p=o[0];if(!p)return;let a=p.dataset.componentId;if(!a)return;let e=pe.get(a+":set_inputType");e&&e(f=>f==="password"&&"text"||"password")})},children:s(Ne,{icon:Le})})}),restrict:"password"},t),{multiline:!1,autoHeight:!1})),v.Concealed=t=>s(v.Password,r(i({label:"\u79D8\u5BC6\u9375"},t),{restrict:"concealed"})),v.Money={JPY:t=>s(v.DigitNumber,r(i({rightIcon:s(me,{ssSphere:2,fontColor:"4.thin",children:"\u5186"})},t),{multiline:!1,autoHeight:!1}))};export{v as TextField,ze as TextInput,v as default};
|
package/dist/fn/Input/core.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as d,e as b}from"../../chunk-C5N2D3ZX.js";import{jsx as f,jsxs as V}from"react/jsx-runtime";import{useState as k,useEffect as g}from"react";import p,{UUID as y,useStore as v}from"jmini";import{$$fromRoot as D,Config as B}from"../../@utils";import{InputClasses as _}from"../../@styles/componentClasses";import{Box as E,Flex as w,FAI as
|
|
1
|
+
import{b as o,c as d,e as b}from"../../chunk-C5N2D3ZX.js";import{jsx as f,jsxs as V}from"react/jsx-runtime";import{useState as k,useEffect as g}from"react";import p,{UUID as y,useStore as v}from"jmini";import{$$fromRoot as D,Config as B}from"../../@utils";import{InputClasses as _}from"../../@styles/componentClasses";import{Box as E,Flex as w,FAI as h,Column as N}from"../../atoms";import{Row as x,Literal as F}from"../../mols";import{Button as A}from"../Button";import R from"../Tooltips";const et=t=>{let[n]=k(t.componentId||y());t=o({},t),t.states=d(o({enableFormSubmit:!0,status_id:y(),override:"never",form:"",id:y(),"aria-label":"Input-"+n},t.states),{componentId:n});let{children:e}=t;return f(e,o({},t.states))},at=t=>{let{children:n,val_status:e,val_validate:a,states:i}=t,{leftIcon:s,wrapStyles:u}=i;return i.checkValidationAtFirst||(e.eventType=="init"&&(a.notice=[]),e.eventType=="focus.start"&&(a.notice=[])),V(x.Center,d(o({position:"relative",verticalAlign:"unset",gap:0},u),{className:_("Wrapper"),"data-notice-uid":e.componentId,children:[f(T.Notice,{notice:a.notice,val_status:e}),i.leftIndicator,V(w,{position:"relative",flexSizing:"auto",children:[n,s,f(T.RightIcon,o({},t)),f(T.ClearButton,o({},t))]}),i.rightIndicator]}))},T={ClearButton:t=>!t.states.clearButton||!t.val_status.dataValue?null:f(A.Normal,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3,transform:"translateY(-50%)"},onClick:()=>{t.set_status(n=>d(o({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:y()}))},children:f(h.X,{})}),RightIcon:t=>t.states.clearButton&&t.val_status.dataValue?null:t.states.rightIcon,Notice:t=>{let{notice:n,val_status:e}=t,{componentId:a}=e,i="NoticeTimer-"+a,s="NoticeTimerClose-"+a,u="notice-tips-"+a;return g(()=>{p.interval.once(()=>{if(!n.length){R.close(u);return}R.open({tipsID:u,parent:`[data-notice-uid="${a}"]`,gravityPoint:24,padding:[1,0],closeAtParentBlur:!1,content:V(R.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[f(E,{position:"absolute",unitHeight:1,unitWidth:1,right:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),f(N,{backgroundColor:"inherit",gap:"1/3",position:"relative",freeCSS:{zIndex:2},children:n.map((I,S)=>{let{type:r,label:l}=I,m=r=="invalid"?h.Exclamation:r=="warn"?h.Exclamation:h.Check;return V(x.Left,{gap:0,borderRadius:"2.tone.secondary",children:[f(m,{flexCenter:!0,fontSize:"2.normal",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[r]}),f(F.Supplement,{fontSize:"0.xs",fontColor:"white",children:l})]},S+"-"+p.Stringify(I))})})]})})},350,i),p.interval.once(()=>{R.close(u)},6e3,s)},[n]),null}},L={DefaultStatus:(t,n)=>({componentId:t,dataValue:n,eventType:"init",eventID:y()}),CommonEffects:function(t){let{type:n,states:e,val_status:a,set_status:i,val_validate:s,set_validate:u,SystemValidation:I}=t;e=o({},e);let{componentId:S}=a;g(()=>(v.update({[S]:{ResolveRefresh:null,Refresh:()=>new Promise((r,l)=>{v.get(S).ResolveRefresh=r,i(m=>d(o({},m),{eventType:"refresh",eventID:y()}))}),GenNotice:r=>{let{ok:l,notice:m}=r;u({ok:l,notice:m})}}}),()=>{v.delete(S)}),[]),p.scope(()=>{let{override:r}=e;if(r=="never"||r=="beforeModified"&&!["init","override"].includes(a.eventType)||a.isComposing)return;let l=v.get(a.componentId);l&&(e.value!=a.dataValue&&e.status_id!=l.status_id&&i(m=>d(o(d(o({},m),{dataValue:e.value}),t.ExtraOverrideStates&&t.ExtraOverrideStates()),{eventType:"override",eventID:y()})),l.status_id=e.status_id)}),g(()=>{L.ValidationCheck({val_status:a,set_validate:u,SystemValidation:I,states:e})},[a.eventID,a.dataValue]),g(()=>(p.scope(()=>{let{componentId:r,eventType:l,dataValue:m}=a,c=m;if(n=="autocomplete.single"||n=="list.radio"?c=c[0]:e.isChecker&&(c=!!c[0]),e.form=e.form||"testForm",e.name&&e.form&&v.update({[["form-data",e.form].join("-")]:{[e.name]:{componentId:r,type:n,value:c,validation:s.ok}}}),e.onUserAction&&e.onUserAction(c,{eventType:l,componentId:r,isValidated:!!s.ok,isComposing:!!a.isComposing,isFocusing:!!a.isFocusing}),l=="refresh"){let C=v.get(r);C&&C.ResolveRefresh&&C.ResolveRefresh(null)}else l=="update"&&(e.onUpdateValue&&e.onUpdateValue(c,l,r),p.scope(()=>{s.ok&&e.onUpdateValidValue&&e.onUpdateValidValue(c,l,r)}))}),()=>{v.update({[["form-data",e.form].join("-")]:{[e.name]:null}})}),[s])},ValidationCheck:t=>{let{states:n}=t,e="ValidationTimer-"+t.val_status.componentId;p.interval.abort(e);let a=t.SystemValidation({value:t.val_status.dataValue,states:n});if(!a.ok){t.set_validate(a);return}let i=a.notice;const s=()=>b(void 0,null,function*(){if(!n.onValidate)return;let u=yield n.onValidate(t.val_status.dataValue,t.val_status.eventType,t);t.set_validate({ok:u.ok,notice:[...i,...u.notice]})});if(n.onValidate){if(t.val_status.eventType=="refresh"){s();return}p.interval.once(s,n.onValidateDelay||500,e);return}t.set_validate({ok:!0,notice:i})},SubmitForm:(t,n)=>{let e=!1;if(!n)return e;let a=D(`[data-form-submit-button="${n}"]`)[0];if(!a)return e;let i=a.dataset.sdfike||"",s=t.key,u=t.ctrlKey||t.metaKey;return p.scope(()=>{i.includes("enter")&&(s!="Enter"||t.nativeEvent.isComposing||B.get().browserIs=="safari"&&t.keyCode==229)||((s=="Enter"&&(i.includes("enter")||i.includes("auxEnter")&&u)||s==" "&&i.includes("space"))&&(a.click(),t.preventDefault()),e=!0)}),e},isShowValidation:(t,n,e)=>{let a=t.ok;return!e&&(n.eventType=="init"||n.eventType=="focus.start")?!0:a}},nt=function(t){t=o({tone:"border"},t);let n=p.scope(()=>{if(t.tone=="plain")return{};let a={padding:1,transition:"middle",flexSizing:"auto",boxShadow:"0.min"};return t.tone=="border"?a=d(o({},a),{border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"}):t.tone=="cloud"?a=d(o({},a),{border:"1.thin",borderRadius:"2.tone.secondary",backgroundColor:"cloud"}):t.tone=="bottomBorder"&&(a=d(o({},a),{borderRadius:0,border:"unset",borderBottom:!0,backgroundColor:"cloud"})),a});return d(o(o(o(o(o(o({fontColor:"2.normal"},n),!!t.rightIcon&&{paddingRight:3}),!!t.leftIcon&&{paddingLeft:3}),!!t.leftIndicator&&{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3",marginLeft:"1/4"}),!!t.rightIndicator&&{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3",marginRight:"1/4"}),t),{freeCSS:o({letterSpacing:"1px",resize:"none"},t.freeCSS),className:[_("Input"),t.className].join(" ")})};export{at as BoxWrapper,L as CoreEffects,nt as DefaultBoxishStyles,et as OptionalInputWrapper};
|