From b95246742556c66151b59b3fb9b6bcebfe5500ad Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Fri, 24 Mar 2023 07:10:59 +0100 Subject: [PATCH 01/97] feat(segment): loading segment should cover loading spinner An empty loading segment does not cover the loading spinner Original Fix by @brendon in Semantic-Org/Semantic-UI#6560 --- src/definitions/elements/segment.less | 1 + src/themes/default/elements/segment.variables | 1 + 2 files changed, 2 insertions(+) diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 6840bb8f66..0bbb4fd613 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -545,6 +545,7 @@ pointer-events: none; user-select: none; transition: all 0s linear; + min-height: @loadingMinHeight; } .ui.loading.segments::before, .ui.loading.segment::before { diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 05f280e7fb..df8be84217 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -88,6 +88,7 @@ /* Loading Spinner */ @loaderSize: 3em; @loaderLineZIndex: 101; +@loadingMinHeight: @loaderSize * 1.5; /******************************* Variations From 58863c18a3cb322fbcd11603d7b25f84e15763df Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Fri, 24 Mar 2023 07:15:58 +0100 Subject: [PATCH 02/97] feat(segment): colored inverted attached segment should not have a black border A colored attached segment still remains a black border, which look wrong, espcially when used in non dark backgrounds . This PR sets the same border color to such segments so the border vanishes (border: none would change the padding, thats why setting the same color to the border just as the background was used to solve this) Thanks for @brendon for the original suggestion --- src/definitions/elements/segment.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 0bbb4fd613..8e73b52671 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -616,13 +616,19 @@ @color: @value; @c: @colors[@@color][color]; & when not (@color=primary) and not (@color=secondary) { - .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) { + .ui.ui.ui.ui.ui.@{color}.segment:not(.inverted) { border-top: @coloredBorderSize solid @c; } & when (@variationSegmentInverted) { - .ui.inverted.@{color}.segment.segment.segment.segment.segment { + .ui.ui.ui.ui.ui.inverted.@{color}.segment { background-color: @c; color: @white; + & when not (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) { + border-color: c; + } + } + .ui.ui.inverted.@{color}.segment:not(.piled) when (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) { + border-color: @c; } } } From d9a9b44f401e10e82f4c382b4dfd3d6fd20c6fc3 Mon Sep 17 00:00:00 2001 From: Kerollos Magdy Date: Mon, 27 Mar 2023 22:11:28 +0200 Subject: [PATCH 03/97] feat(flags): add alias for czech --- src/themes/default/elements/flag.variables | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/default/elements/flag.variables b/src/themes/default/elements/flag.variables index 2e7cea0aaa..fdb563e022 100644 --- a/src/themes/default/elements/flag.variables +++ b/src/themes/default/elements/flag.variables @@ -396,7 +396,7 @@ @1f1e8-1f1ff: { countrycode: cz; class: czechia; - aliasClass: false; + aliasClass: czech; aliasClass2: false; }; @1f1e9-1f1f0: { From c7d794b9072115464422e9ba81c5fc734d2bbbe5 Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Tue, 28 Mar 2023 15:25:22 +0200 Subject: [PATCH 04/97] fix(flag): czech_republic alias Corrects #2744 as discussed in https://github.com/fomantic/Fomantic-UI/pull/2744#discussion_r1149895080 --- src/themes/default/elements/flag.variables | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/default/elements/flag.variables b/src/themes/default/elements/flag.variables index fdb563e022..84c2b58b51 100644 --- a/src/themes/default/elements/flag.variables +++ b/src/themes/default/elements/flag.variables @@ -396,7 +396,7 @@ @1f1e8-1f1ff: { countrycode: cz; class: czechia; - aliasClass: czech; + aliasClass: czech_republic; aliasClass2: false; }; @1f1e9-1f1f0: { From 88ae1e1b6b18c282c061f329a59c8a25d984191c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 29 Mar 2023 16:21:06 +0200 Subject: [PATCH 05/97] build(deps-dev): bump eslint from 8.36.0 to 8.37.0 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/yarn.lock b/yarn.lock index e650ee88de..aecdd5a8a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -62,14 +62,14 @@ resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403" integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ== -"@eslint/eslintrc@^2.0.1": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.1.tgz#7888fe7ec8f21bc26d646dbd2c11cd776e21192d" - integrity sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw== +"@eslint/eslintrc@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.2.tgz#01575e38707add677cf73ca1589abba8da899a02" + integrity sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ== dependencies: ajv "^6.12.4" debug "^4.3.2" - espree "^9.5.0" + espree "^9.5.1" globals "^13.19.0" ignore "^5.2.0" import-fresh "^3.2.1" @@ -77,10 +77,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.36.0": - version "8.36.0" - resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe" - integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg== +"@eslint/js@8.37.0": + version "8.37.0" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.37.0.tgz#cf1b5fa24217fe007f6487a26d765274925efa7d" + integrity sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A== "@humanwhocodes/config-array@^0.11.8": version "0.11.8" @@ -1629,20 +1629,20 @@ eslint-scope@^7.1.1: esrecurse "^4.3.0" estraverse "^5.2.0" -eslint-visitor-keys@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826" - integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA== +eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc" + integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ== eslint@^8.29.0: - version "8.36.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf" - integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw== + version "8.37.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.37.0.tgz#1f660ef2ce49a0bfdec0b0d698e0b8b627287412" + integrity sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@eslint-community/regexpp" "^4.4.0" - "@eslint/eslintrc" "^2.0.1" - "@eslint/js" "8.36.0" + "@eslint/eslintrc" "^2.0.2" + "@eslint/js" "8.37.0" "@humanwhocodes/config-array" "^0.11.8" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" @@ -1653,8 +1653,8 @@ eslint@^8.29.0: doctrine "^3.0.0" escape-string-regexp "^4.0.0" eslint-scope "^7.1.1" - eslint-visitor-keys "^3.3.0" - espree "^9.5.0" + eslint-visitor-keys "^3.4.0" + espree "^9.5.1" esquery "^1.4.2" esutils "^2.0.2" fast-deep-equal "^3.1.3" @@ -1680,14 +1680,14 @@ eslint@^8.29.0: strip-json-comments "^3.1.0" text-table "^0.2.0" -espree@^9.5.0: - version "9.5.0" - resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.0.tgz#3646d4e3f58907464edba852fa047e6a27bdf113" - integrity sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw== +espree@^9.5.1: + version "9.5.1" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.1.tgz#4f26a4d5f18905bf4f2e0bd99002aab807e96dd4" + integrity sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg== dependencies: acorn "^8.8.0" acorn-jsx "^5.3.2" - eslint-visitor-keys "^3.3.0" + eslint-visitor-keys "^3.4.0" esquery@^1.4.2: version "1.4.2" From 7986b3f80df8fb52bd797431e4280991fa3cdfb1 Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Fri, 31 Mar 2023 07:40:49 +0200 Subject: [PATCH 06/97] feat(dropdown): optional keeping the searchterm New option keepSearchTerm for multiple search selection dropdowns. This (almost) reflects the current SUI behavior (which we fixed already) The list stays filtered The search term is not removed on item selection (to make it clear why the list is still filtered on selection) This PR also removes the completely unused glyphWidth setting. This is all done in CSS instead of JS (not even in current SUI) and we fixed the search width glyph calculation already by #145 which in turn closes Semantic-Org/Semantic-UI#6655 --- src/definitions/modules/dropdown.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index ac9b2f1402..e463f3a20a 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -1407,11 +1407,13 @@ if (settings.allowAdditions) { module.remove.userAddition(); } - module.remove.filteredItem(); + if (!settings.keepSearchTerm) { + module.remove.filteredItem(); + module.remove.searchTerm(); + } if (!module.is.visible() && $target.length > 0) { module.show(); } - module.remove.searchTerm(); if (!module.is.focusedOnSearch() && skipRefocus !== true) { module.focusSearch(true); } @@ -1597,7 +1599,9 @@ module.verbose('Selecting item from keyboard shortcut', $selectedItem); module.event.item.click.call($selectedItem, event); if (module.is.searchSelection()) { - module.remove.searchTerm(); + if (!settings.keepSearchTerm) { + module.remove.searchTerm(); + } if (module.is.multiple()) { $search.trigger('focus'); } @@ -1814,7 +1818,7 @@ ? value : text; if (module.can.activate($(element))) { - module.set.selected(value, $(element)); + module.set.selected(value, $(element), false, settings.keepSearchTerm); if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) { module.hideAndClear(); } @@ -2464,7 +2468,7 @@ valueIsSet = searchValue !== '' ; if (isMultiple && hasSearchValue) { - module.verbose('Adjusting input width', searchWidth, settings.glyphWidth); + module.verbose('Adjusting input width', searchWidth); $search.css('width', searchWidth + 'px'); } if (hasSearchValue || (isSearchMultiple && valueIsSet)) { @@ -2763,7 +2767,7 @@ return false; } module.debug('Setting selected menu item to', $selectedItem); - if (module.is.multiple()) { + if (module.is.multiple() && !keepSearchTerm) { module.remove.searchWidth(); } if (module.is.single()) { @@ -4006,6 +4010,7 @@ forceSelection: false, // force a choice on blur with search selection allowAdditions: false, // whether multiple select should allow user added values + keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection ignoreCase: false, // whether to consider case sensitivity when creating labels ignoreSearchCase: true, // whether to consider case sensitivity when filtering items hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value @@ -4025,8 +4030,6 @@ duration: 200, // duration of transition displayType: false, // displayType of transition - glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width - headerDivider: true, // whether option headers should have an additional divider line underneath when converted from '. + * @default true + */ + headerDivider: boolean; + + /** + * Whether the dropdown should collapse upon selection of an actionable item. + * @default true + */ + collapseOnActionable: boolean; + + /** + * Allows customization of multi-select labels. + * @default true + */ + label: object; + + /** + * Time in milliseconds to debounce show or hide behavior when 'on: hover' is used, or when 'touch' is used.. + * @default true + */ + delay: object; + + // endregion + + // region Callbacks + + /** + * Is called after a dropdown value changes. + * Receives the name and value of selection and the active menu element. + */ + onChange(value: string, text: string, $choice: JQuery): void; + + /** + * Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value. + */ + onAdd(addedValue: string, addedText: string, $addedChoice: JQuery): void; + + /** + * Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value. + */ + onRemove(removedValue: string, removedText: string, $removedChoice: JQuery): void; + + /** + * Is called after an actionable item has been selected. + */ + onActionable(value: string, text: string, $choice: JQuery): void; + + /** + * Is called before a search takes place to filter the items list. + * If 'false' is returned, the search and item filtering is cancelled. + */ + onSearch(): void; + + /** + * Is called after a label is selected by a user. + */ + onLabelSelect($selectedLabels: JQuery): void; + + /** + * Allows you to modify a label before it is added. + * Expects the jQ DOM element for a label to be returned. + */ + onLabelCreate(value: string, text: string): void; + + /** + * Called when a label is remove, 'return false;' will prevent the label from being removed. + */ + onLabelRemove(value: string): void; + + /** + * Is called after a dropdown is searched with no matching values. + */ + onNoResults(searchValue: string): void; + + /** + * Is called before a dropdown is shown. + * If 'false' is returned, dropdown will not be shown. + */ + onShow(searchValue: string): void; + + /** + * Is called before a dropdown is hidden. + * If 'false' is returned, dropdown will not be hidden. + */ + onHide(): void; + + // endregion + + // region DOM Settings + + /** + * Selectors used to find parts of a module. + */ + selector: Dropdown.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Dropdown.ClassNameSettings; + + /** + * Class names used to determine element messages. + */ + message: Dropdown.MessageSettings; + + /** + * + */ + regExp: Dropdown.RegExpSettings; + + /** + * + */ + metadata: Dropdown.MetadataSettings; + + /** + * + */ + fields: Dropdown.FieldsSettings; + + /** + * + */ + keys: Dropdown.KeysSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Dropdown.ErrorSettings; + + // endregion + } + } + + namespace Dropdown { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'addition'> + | Pick<_Impl, 'divider'> + | Pick<_Impl, 'dropdown'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'input'> + | Pick<_Impl, 'item'> + | Pick<_Impl, 'label'> + | Pick<_Impl, 'remove'> + | Pick<_Impl, 'siblingLabel'> + | Pick<_Impl, 'menu'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'menuIcon'> + | Pick<_Impl, 'search'> + | Pick<_Impl, 'sizer'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'unselectable'> + | Pick<_Impl, 'clearIcon'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.addition' + */ + addition: string; + + /** + * @default '.divider, .header' + */ + divider: string; + + /** + * @default '.ui.dropdown' + */ + dropdown: string; + + /** + * @default '> .dropdown.icon' + */ + icon: string; + + /** + * @default '> input[type="hidden"], > select' + */ + input: string; + + /** + * @default '.item' + */ + item: string; + + /** + * @default '> .label' + */ + label: string; + + /** + * @default '> .label > .delete.icon' + */ + remove: string; + + /** + * @default '.label' + */ + siblingLabel: string; + + /** + * @default '.menu' + */ + menu: string; + + /** + * @default '.message' + */ + message: string; + + /** + * @default '.dropdown.icon' + */ + menuIcon: string; + + /** + * @default 'input.search, .menu > .search > input' + */ + search: string; + + /** + * @default '> span.sizer' + */ + sizer: string; + + /** + * @default '> .text:not(.icon)' + */ + text: string; + + /** + * @default '.disabled, .filtered' + */ + unselectable: string; + + /** + * @default '> .remove.icon' + */ + clearIcon: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'addition'> + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'description'> + | Pick<_Impl, 'descriptionVertical'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'empty'> + | Pick<_Impl, 'dropdown'> + | Pick<_Impl, 'filtered'> + | Pick<_Impl, 'hidden'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'image'> + | Pick<_Impl, 'item'> + | Pick<_Impl, 'label'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'menu'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'multiple'> + | Pick<_Impl, 'placeholder'> + | Pick<_Impl, 'sizer'> + | Pick<_Impl, 'search'> + | Pick<_Impl, 'selected'> + | Pick<_Impl, 'selection'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'upward'> + | Pick<_Impl, 'leftward'> + | Pick<_Impl, 'visible'> + | Pick<_Impl, 'clearable'> + | Pick<_Impl, 'noselection'> + | Pick<_Impl, 'delete'> + | Pick<_Impl, 'header'> + | Pick<_Impl, 'divider'> + | Pick<_Impl, 'groupIcon'> + | Pick<_Impl, 'unfilterable'> + | Pick<_Impl, 'actionable'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'addition' + */ + addition: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'description' + */ + description: string; + + /** + * @default 'vertical' + */ + descriptionVertical: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'empty' + */ + empty: string; + + /** + * @default 'ui dropdown' + */ + dropdown: string; + + /** + * @default 'filtered' + */ + filtered: string; + + /** + * @default 'hidden transition' + */ + hidden: string; + + /** + * @default 'icon' + */ + icon: string; + + /** + * @default 'image' + */ + image: string; + + /** + * @default 'item' + */ + item: string; + + /** + * @default 'ui label' + */ + label: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'menu' + */ + menu: string; + + /** + * @default 'message' + */ + message: string; + + /** + * @default 'multiple' + */ + multiple: string; + + /** + * @default 'default' + */ + placeholder: string; + + /** + * @default 'sizer' + */ + sizer: string; + + /** + * @default 'search' + */ + search: string; + + /** + * @default 'selected' + */ + selected: string; + + /** + * @default 'selection' + */ + selection: string; + + /** + * @default 'text' + */ + text: string; + + /** + * @default 'upward' + */ + upward: string; + + /** + * @default 'left' + */ + leftward: string; + + /** + * @default 'visible' + */ + visible: string; + + /** + * @default 'clearable' + */ + clearable: string; + + /** + * @default 'noselection' + */ + noselection: string; + + /** + * @default 'delete' + */ + delete: string; + + /** + * @default 'header' + */ + header: string; + + /** + * @default 'divider' + */ + divider: string; + + /** + * @default '' + */ + groupIcon: string; + + /** + * @default 'unfilterable' + */ + unfilterable: string; + + /** + * @default 'actionable' + */ + actionable: string; + } + } + + type MessageSettings = MessageSettings.Param; + + namespace MessageSettings { + type Param = ( + | Pick<_Impl, 'addResult'> + | Pick<_Impl, 'count'> + | Pick<_Impl, 'maxSelections'> + | Pick<_Impl, 'noResults'> + | Pick<_Impl, 'serverError'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Add {term}' + */ + addResult: string; + + /** + * @default '{count} selected' + */ + count: string; + + /** + * @default 'Max {maxCount} selections' + */ + maxSelections: string; + + /** + * @default 'No results found.' + */ + noResults: string; + + /** + * @default 'There was an error contacting the server' + */ + serverError: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = ( + | Pick<_Impl, 'escape'> + ) & + Partial>; + + interface _Impl { + /** + * @default '/[-[\]{}()*+?.,\\^$|#\s]/g' + */ + escape: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = ( + | Pick<_Impl, 'defaultText'> + | Pick<_Impl, 'defaultValue'> + | Pick<_Impl, 'placeholderText'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'value'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'defaultText' + */ + defaultText: string; + + /** + * @default 'defaultValue' + */ + defaultValue: string; + + /** + * @default 'placeholderText' + */ + placeholderText: string; + + /** + * @default 'text' + */ + text: string; + + /** + * @default 'value' + */ + value: string; + } + } + + type FieldsSettings = FieldsSettings.Param; + + namespace FieldsSettings { + type Param = ( + | Pick<_Impl, 'remoteValues'> + | Pick<_Impl, 'values'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'description'> + | Pick<_Impl, 'descriptionVertical'> + | Pick<_Impl, 'value'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'type'> + | Pick<_Impl, 'image'> + | Pick<_Impl, 'imageClass'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'iconClass'> + | Pick<_Impl, 'class'> + | Pick<_Impl, 'divider'> + | Pick<_Impl, 'actionable'> + ) & + Partial>; + + interface _Impl { + /** + * Grouping for api results + * @default 'results' + */ + remoteValues: string; + + /** + * Grouping for all dropdown values + * @default 'values' + */ + values: string; + + /** + * Whether value should be disabled + * @default 'disabled' + */ + disabled: string; + + /** + * Displayed dropdown text + * @default 'name' + */ + name: string; + + /** + * Displayed dropdown description + * @default 'description' + */ + description: string; + + /** + * Whether description should be vertical + * @default 'descriptionVertical' + */ + descriptionVertical: string; + + /** + * Actual dropdown value + * @default 'value' + */ + value: string; + + /** + * Displayed text when selected + * @default 'text' + */ + text: string; + + /** + * Type of dropdown element + * @default 'type' + */ + type: string; + + /** + * Optional image path + * @default 'image' + */ + image: string; + + /** + * Optional individual class for image + * @default 'imageClass' + */ + imageClass: string; + + /** + * Optional icon name + * @default 'icon' + */ + icon: string; + + /** + * Optional individual class for icon (for example to use flag instead) + * @default 'iconClass' + */ + iconClass: string; + + /** + * Optional individual class for item/header + * @default 'class' + */ + class: string; + + /** + * Optional divider append for group headers + * @default 'divider' + */ + divider: string; + + /** + * Optional actionable item + * @default 'actionable' + */ + actionable: string; + } + } + + type KeysSettings = KeysSettings.Param; + + namespace KeysSettings { + type Param = ( + | Pick<_Impl, 'backspace'> + | Pick<_Impl, 'deleteKey'> + | Pick<_Impl, 'enter'> + | Pick<_Impl, 'escape'> + | Pick<_Impl, 'pageUp'> + | Pick<_Impl, 'pageDown'> + | Pick<_Impl, 'leftArrow'> + | Pick<_Impl, 'upArrow'> + | Pick<_Impl, 'rightArrow'> + | Pick<_Impl, 'downArrow'> + ) & + Partial>; + + interface _Impl { + /** + * @default 8 + */ + backspace: number; + + /** + * @default 46 + */ + deleteKey: number; + + /** + * @default 13 + */ + enter: number; + + /** + * @default 27 + */ + escape: number; + + /** + * @default 33 + */ + pageUp: number; + + /** + * @default 34 + */ + pageDown: number; + + /** + * @default 37 + */ + leftArrow: number; + + /** + * @default 38 + */ + upArrow: number; + + /** + * @default 39 + */ + rightArrow: number; + + /** + * @default 40 + */ + downArrow: number; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'action'> + | Pick<_Impl, 'alreadySetup'> + | Pick<_Impl, 'labels'> + | Pick<_Impl, 'missingMultiple'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'noAPI'> + | Pick<_Impl, 'noStorage'> + | Pick<_Impl, 'noTransition'> + | Pick<_Impl, 'noNormalize'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'You called a dropdown action that was not defined' + */ + action: string; + + /** + * @default 'Once a select has been initialized behaviors must be called on the created ui dropdown' + */ + alreadySetup: string; + + /** + * @default 'Allowing user additions currently requires the use of labels.' + */ + labels: string; + + /** + * @default ''. - * @default true - */ - headerDivider: boolean; - - /** - * Whether the dropdown should collapse upon selection of an actionable item. - * @default true - */ - collapseOnActionable: boolean; - - /** - * Allows customization of multi-select labels. - * @default true - */ - label: object; - - /** - * Time in milliseconds to debounce show or hide behavior when 'on: hover' is used, or when 'touch' is used.. - * @default true - */ - delay: object; - - // endregion - - // region Callbacks - - /** - * Is called after a dropdown value changes. - * Receives the name and value of selection and the active menu element. - */ - onChange(value: string, text: string, $choice: JQuery): void; - - /** - * Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value. - */ - onAdd(addedValue: string, addedText: string, $addedChoice: JQuery): void; - - /** - * Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value. - */ - onRemove(removedValue: string, removedText: string, $removedChoice: JQuery): void; - - /** - * Is called after an actionable item has been selected. - */ - onActionable(value: string, text: string, $choice: JQuery): void; - - /** - * Is called before a search takes place to filter the items list. - * If 'false' is returned, the search and item filtering is cancelled. - */ - onSearch(): void; - - /** - * Is called after a label is selected by a user. - */ - onLabelSelect($selectedLabels: JQuery): void; - - /** - * Allows you to modify a label before it is added. - * Expects the jQ DOM element for a label to be returned. - */ - onLabelCreate(value: string, text: string): void; - - /** - * Called when a label is remove, 'return false;' will prevent the label from being removed. - */ - onLabelRemove(value: string): void; - - /** - * Is called after a dropdown is searched with no matching values. - */ - onNoResults(searchValue: string): void; - - /** - * Is called before a dropdown is shown. - * If 'false' is returned, dropdown will not be shown. - */ - onShow(searchValue: string): void; - - /** - * Is called before a dropdown is hidden. - * If 'false' is returned, dropdown will not be hidden. - */ - onHide(): void; - - // endregion - - // region DOM Settings - - /** - * Selectors used to find parts of a module. - */ - selector: Dropdown.SelectorSettings; - - /** - * Class names used to determine element state. - */ - className: Dropdown.ClassNameSettings; - - /** - * Class names used to determine element messages. - */ - message: Dropdown.MessageSettings; - - /** - * - */ - regExp: Dropdown.RegExpSettings; - - /** - * - */ - metadata: Dropdown.MetadataSettings; - - /** - * - */ - fields: Dropdown.FieldsSettings; - - /** - * - */ - keys: Dropdown.KeysSettings; - - // endregion - - // region Debug Settings - - /** - * Name used in log statements - */ - name: string; - - /** - * Event namespace. Makes sure module teardown does not effect other events attached to an element. - */ - namespace: string; - - /** - * Silences all console output including error messages, regardless of other debug settings. - */ - silent: boolean; - - /** - * Debug output to console - */ - debug: boolean; - - /** - * Show console.table output with performance metrics - */ - performance: boolean; - - /** - * Debug output includes all internal behaviors - */ - verbose: boolean; - - error: Dropdown.ErrorSettings; - - // endregion - } + interface DropdownSettings { + // region Dropdown Settings + + /** + * Event used to trigger dropdown (can be 'hover', 'click' or a custom event). + * @default 'click' + */ + on: string; + + /** + * Sets a default action to occur. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#/usage} + * @default 'auto' + */ + action: + | 'auto' + | 'activate' + | 'select' + | 'combo' + | 'nothing' + | 'hide' + | ((this: JQuery, text: string, value: string | false, element: JQuery) => void); + + /** + * When specified allows you to initialize dropdown with specific values. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#/usage} + * @default false + */ + values: any; + + /** + * Whether the dropdown value can be cleared by the user after being selected. + * @default false + */ + clearable: boolean; + + /** + * Can be set to an object to specify API settings for retrieving remote selection menu content from an API endpoint. + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * @default false + */ + apiSettings: false | APISettings; + + /** + * Whether dropdown should select new option when using keyboard shortcuts. + * Setting to 'false' will require 'enter' or left click to confirm a choice. + * @default true + */ + selectOnKeydown: boolean; + + /** + * The minimum characters for a search to begin showing results. + * @default 0 + */ + minCharacters: number; + + /** + * Whether results returned from API should be filtered by query before being displayed. + * @default false + */ + filterRemoteData: boolean; + + /** + * When enabled, will automatically store selected name/value pairs in 'sessionStorage' to preserve user selection on page refresh. + * Disabling will clear remote dropdown values on refresh. + * @default true + */ + saveRemoteData: boolean; + + /** + * How long to wait after last user input to search remotely. + * @default 200 + */ + throttle: number; + + /** + * Element context to use when checking whether can show when 'keepOnScreen: true'. + * @default 'window' + */ + context: string | JQuery; + + /** + * When set to 'auto' determines direction based on whether dropdown can fit on screen. + * Set to 'upward' or 'downward' to always force a direction. + * @default 'auto' + */ + direction: 'auto' | 'upward' | 'downward'; + + /** + * Whether dropdown should try to keep itself on screen by checking whether menus display position in its 'context' (Default context is page). + * @default true + */ + keepOnScreen: boolean; + + /** + * When using 'search selection' specifies how to match values. + * @default 'both' + */ + match: 'both' | 'value' | 'text'; + + /** + * Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string. + * @default 'exact' + */ + fullTextSearch: boolean | 'exact'; + + /** + * When activated, searches will also match results for base diacritic letters. + * For example when searching for 'a', it will also match 'á' or 'â' or 'å' and so on... + * It will also ignore diacritics for the searchterm, so if searching for 'ó', it will match 'ó', but also 'o', 'ô' or 'õ' and so on... + * @default false + */ + ignoreDiacritics: boolean; + + /** + * How to handle dividers in the dropdown while searching. + * Dividers are defined as all siblings of items that match the 'divider selector'. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#dom-settings} + * @default false + */ + hideDividers: boolean | 'empty'; + + /** + * + * @default 'auto' + */ + placeholder: 'auto' | String | false; + + /** + * Whether HTML included in dropdown values should be preserved. + * Allows icons to show up in selected value. + * @default true + */ + preserveHTML: boolean; + + /** + * Whether to sort values when creating a dropdown automatically from a select element. + * @default false + */ + sortSelect: boolean | 'natural' | Function; + + /** + * Whether search selection will force currently selected choice when element is blurred. + * If a 'select' tag with a required attribute was used, the 'forceSelection' setting will be set to 'true' automatically. + * @default false + */ + forceSelection: boolean; + + /** + * Whether search selection should allow users to add their own selections, works for single or multiselect. + * @default false + */ + allowAdditions: boolean; + + /** + * Whether values with non matching cases should be treated as identical when adding them to a dropdown. + * @default false + */ + ignoreCase: boolean; + + /** + * Whether values with non matching cases should be treated as identical when filtering the items. + * @default true + */ + ignoreSearchCase: boolean; + + /** + * If disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by 'templates.addition'. + * @default true + */ + hideAdditions: boolean; + + /** + * When set to a number, sets the maximum number of selections. + * @default false + */ + maxSelections: false | number; + + /** + * Whether multiselect should use labels. Must be set to 'true' when 'allowAdditions' is 'true'. + * @default true + */ + useLabels: boolean; + + /** + * When multiselect uses normal input tag, the values will be delimited with this character. + * Also used as the keyboard shortcut while entering multiple values. + * @default ',' + */ + delimiter: string; + + /** + * Whether to show dropdown menu automatically on element focus. + * @default false + */ + showOnFocus: boolean; + + /** + * When set to 'true' will fire 'onChange' even when the value a user select matches the currently selected value. + * @default false + */ + allowReselection: boolean; + + /** + * Whether to allow the element to be navigable by keyboard, by automatically creating a 'tabindex'. + * @default true + */ + allowTab: boolean; + + /** + * Whether menu items with sub-menus (categories) should be selectable. + * @default false + */ + allowCategorySelection: boolean; + + /** + * Whether callbacks should fire when initializing dropdown values. + * @default false + */ + fireOnInit: boolean; + + /** + * Named transition to use when animating menu in and out. + * Defaults to 'slide down' or 'slide up' depending on dropdown direction. Fade and slide down are available without including 'ui transitions'. + * + * Alternatively you can provide an 'object' to set individual values for hide/show transitions as well as hide/show duration. + * @default 'auto' + */ + transition: boolean | object; + + /** + * Duration of animation events. + * The value will be ignored when individual hide/show duration values are provided via the 'transition' setting. + * @default 200 + */ + duration: number; + + /** + * Specify the final transition display type ('block', 'inline-block' etc) so that it doesn't have to be calculated. + * @default false + */ + displayType: false | string; + + /** + * Maximum glyph width, used to calculate search size. + * This is usually size of a "W" in your font in 'em'. + * @default 1.037 + */ + glyphWidth: number; + + /** + * Whether option headers should have an additional divider line underneath when converted from ' adjusting invoked element"),p=p.closest(g.checkbox),v.refresh())}},setup:function(){v.set.initialLoad(),v.is.indeterminate()?(v.debug("Initial value is indeterminate"),v.indeterminate()):v.is.checked()?(v.debug("Initial value is checked"),v.check()):(v.debug("Initial value is unchecked"),v.uncheck()),v.remove.initialLoad()},refresh:function(){a=p.children(g.label),f=p.children(g.input),k=f[0]},hide:{input:function(){v.verbose("Modifying z-index to be unselectable"),f.addClass(n.hidden)}},show:{input:function(){v.verbose("Modifying z-index to be selectable"),f.removeClass(n.hidden)}},observeChanges:function(){"MutationObserver"in E&&((e=new MutationObserver(function(e){v.debug("DOM tree modified, updating selector cache"),v.refresh()})).observe(l,{childList:!0,subtree:!0}),v.debug("Setting up mutation observer",e))},attachEvents:function(e,n){var i=I(e);n=O(v[n])?v[n]:v.toggle,0").insertAfter(f),v.debug("Creating label",a))}},has:{label:function(){return 0 adjusting invoked element"),p=p.closest(g.checkbox),v.refresh())}},setup:function(){v.set.initialLoad(),v.is.indeterminate()?(v.debug("Initial value is indeterminate"),v.indeterminate()):v.is.checked()?(v.debug("Initial value is checked"),v.check()):(v.debug("Initial value is unchecked"),v.uncheck()),v.remove.initialLoad()},refresh:function(){a=p.children(g.label),f=p.children(g.input),k=f[0]},hide:{input:function(){v.verbose("Modifying z-index to be unselectable"),f.addClass(n.hidden)}},show:{input:function(){v.verbose("Modifying z-index to be selectable"),f.removeClass(n.hidden)}},observeChanges:function(){"MutationObserver"in I&&((e=new MutationObserver(function(e){v.debug("DOM tree modified, updating selector cache"),v.refresh()})).observe(l,{childList:!0,subtree:!0}),v.debug("Setting up mutation observer",e))},attachEvents:function(e,n){var i=D(e);n=S(v[n])?v[n]:v.toggle,0").insertAfter(f),v.debug("Creating label",a))}},has:{label:function(){return 0 .comments { box-shadow: -1px 0 0 #555; } +.ui.disabled.comments, +.ui.comments .disabled.comment { + opacity: 0.45; + pointer-events: none; +} /******************************* diff --git a/dist/components/comment.min.css b/dist/components/comment.min.css index 79b6402642..e6e0c5ce9d 100644 --- a/dist/components/comment.min.css +++ b/dist/components/comment.min.css @@ -1,9 +1,9 @@ /*! - * # Fomantic-UI 2.9.2 - Comment + * # Fomantic-UI 2.9.3 - Comment * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * - */.ui.comments{margin:1.5em 0;max-width:650px}.ui.comments:first-child{margin-top:0}.ui.comments:last-child{margin-bottom:0}.ui.comments .comment{position:relative;background:0 0;margin:.5em 0 0;padding:.5em 0 0;border:none;border-top:none;line-height:1.2}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment>.comments{margin:0 0 .5em .5em;padding:1em 0 1em 1em}.ui.comments .comment>.comments::before{position:absolute;top:0;left:0}.ui.comments .comment>.comments .comment{border:none;border-top:none;background:0 0}.ui.comments .comment .avatar{display:block;width:2.5em;height:auto;float:left;margin:.2em 0 0}.ui.comments .comment .avatar img,.ui.comments .comment img.avatar{display:block;margin:0 auto;width:100%;height:100%;border-radius:.25rem}.ui.comments .comment>.content{display:block}.ui.comments .comment>.avatar~.content{margin-left:3.5em}.ui.comments .comment .author{font-size:1em;color:rgba(0,0,0,.87);font-weight:700}.ui.comments .comment a.author{cursor:pointer}.ui.comments .comment a.author:hover{color:#1e70bf}.ui.comments .comment .metadata{display:inline-block;margin-left:.5em;color:rgba(0,0,0,.4);font-size:.875em}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .5em 0 0}.ui.comments .comment .metadata>:last-child{margin-right:0}.ui.comments .comment .text{margin:.25em 0 .5em;font-size:1em;word-wrap:break-word;color:rgba(0,0,0,.87);line-height:1.3}.ui.comments .comment .actions{font-size:.875em}.ui.comments .comment .actions a{cursor:pointer;display:inline-block;margin:0 .75em 0 0;color:rgba(0,0,0,.4)}.ui.comments .comment .actions a:last-child{margin-right:0}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.8)}.ui.comments>.reply.form{margin-top:1em}.ui.comments .comment .reply.form{width:100%;margin-top:1em}.ui.comments .reply.form textarea{font-size:1em;height:12em}.ui.collapsed.comments,.ui.comments .collapsed.comment,.ui.comments .collapsed.comments{display:none}.ui.threaded.comments .comment>.comments{margin:-1.5em 0 -1em 1.25em;padding:3em 0 2em 2.25em;box-shadow:-1px 0 0 rgba(34,36,38,.15)}.ui.minimal.comments .comment .actions{opacity:0;position:absolute;top:0;right:0;left:auto;transition:opacity .2s ease;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.comments{font-size:1rem}.ui.mini.comments{font-size:.78571429rem}.ui.tiny.comments{font-size:.85714286rem}.ui.small.comments{font-size:.92857143rem}.ui.large.comments{font-size:1.14285714rem}.ui.big.comments{font-size:1.28571429rem}.ui.huge.comments{font-size:1.42857143rem}.ui.massive.comments{font-size:1.71428571rem}.ui.inverted.comments .comment{background-color:#1b1c1d}.ui.inverted.comments .comment .author,.ui.inverted.comments .comment .text{color:rgba(255,255,255,.9)}.ui.inverted.comments .comment .actions a,.ui.inverted.comments .comment .metadata{color:rgba(255,255,255,.7)}.ui.inverted.comments .comment .actions a.active,.ui.inverted.comments .comment .actions a:hover,.ui.inverted.comments .comment a.author:hover{color:#fff}.ui.inverted.threaded.comments .comment>.comments{box-shadow:-1px 0 0 #555} \ No newline at end of file + */.ui.comments{margin:1.5em 0;max-width:650px}.ui.comments:first-child{margin-top:0}.ui.comments:last-child{margin-bottom:0}.ui.comments .comment{position:relative;background:0 0;margin:.5em 0 0;padding:.5em 0 0;border:none;border-top:none;line-height:1.2}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment>.comments{margin:0 0 .5em .5em;padding:1em 0 1em 1em}.ui.comments .comment>.comments::before{position:absolute;top:0;left:0}.ui.comments .comment>.comments .comment{border:none;border-top:none;background:0 0}.ui.comments .comment .avatar{display:block;width:2.5em;height:auto;float:left;margin:.2em 0 0}.ui.comments .comment .avatar img,.ui.comments .comment img.avatar{display:block;margin:0 auto;width:100%;height:100%;border-radius:.25rem}.ui.comments .comment>.content{display:block}.ui.comments .comment>.avatar~.content{margin-left:3.5em}.ui.comments .comment .author{font-size:1em;color:rgba(0,0,0,.87);font-weight:700}.ui.comments .comment a.author{cursor:pointer}.ui.comments .comment a.author:hover{color:#1e70bf}.ui.comments .comment .metadata{display:inline-block;margin-left:.5em;color:rgba(0,0,0,.4);font-size:.875em}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .5em 0 0}.ui.comments .comment .metadata>:last-child{margin-right:0}.ui.comments .comment .text{margin:.25em 0 .5em;font-size:1em;word-wrap:break-word;color:rgba(0,0,0,.87);line-height:1.3}.ui.comments .comment .actions{font-size:.875em}.ui.comments .comment .actions a{cursor:pointer;display:inline-block;margin:0 .75em 0 0;color:rgba(0,0,0,.4)}.ui.comments .comment .actions a:last-child{margin-right:0}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.8)}.ui.comments>.reply.form{margin-top:1em}.ui.comments .comment .reply.form{width:100%;margin-top:1em}.ui.comments .reply.form textarea{font-size:1em;height:12em}.ui.collapsed.comments,.ui.comments .collapsed.comment,.ui.comments .collapsed.comments{display:none}.ui.threaded.comments .comment>.comments{margin:-1.5em 0 -1em 1.25em;padding:3em 0 2em 2.25em;box-shadow:-1px 0 0 rgba(34,36,38,.15)}.ui.minimal.comments .comment .actions{opacity:0;position:absolute;top:0;right:0;left:auto;transition:opacity .2s ease;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.comments{font-size:1rem}.ui.mini.comments{font-size:.78571429rem}.ui.tiny.comments{font-size:.85714286rem}.ui.small.comments{font-size:.92857143rem}.ui.large.comments{font-size:1.14285714rem}.ui.big.comments{font-size:1.28571429rem}.ui.huge.comments{font-size:1.42857143rem}.ui.massive.comments{font-size:1.71428571rem}.ui.inverted.comments .comment{background-color:#1b1c1d}.ui.inverted.comments .comment .author,.ui.inverted.comments .comment .text{color:rgba(255,255,255,.9)}.ui.inverted.comments .comment .actions a,.ui.inverted.comments .comment .metadata{color:rgba(255,255,255,.7)}.ui.inverted.comments .comment .actions a.active,.ui.inverted.comments .comment .actions a:hover,.ui.inverted.comments .comment a.author:hover{color:#fff}.ui.inverted.threaded.comments .comment>.comments{box-shadow:-1px 0 0 #555}.ui.comments .disabled.comment,.ui.disabled.comments{opacity:.45;pointer-events:none} \ No newline at end of file diff --git a/dist/components/container.css b/dist/components/container.css index 5c9012b7e8..8982e240a9 100644 --- a/dist/components/container.css +++ b/dist/components/container.css @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Container + * # Fomantic-UI 2.9.3 - Container * https://github.com/fomantic/Fomantic-UI/ * * @@ -161,69 +161,130 @@ .ui.scrolling.container.short { max-height: 11.25em; } + .ui.scrolling.container.short.resizable { + height: 11.25em; + } .ui.scrolling.container[class*="very short"] { max-height: 7.5em; } + .ui.scrolling.container[class*="very short"].resizable { + height: 7.5em; + } .ui.scrolling.container { max-height: 15em; } .ui.scrolling.container.long { max-height: 30em; } + .ui.scrolling.container.long.resizable { + height: 30em; + } .ui.scrolling.container[class*="very long"] { max-height: 45em; } + .ui.scrolling.container[class*="very long"].resizable { + height: 45em; + } } @media only screen and (min-width: 768px) { .ui.scrolling.container.short { max-height: 13.5em; } + .ui.scrolling.container.short.resizable { + height: 13.5em; + } .ui.scrolling.container[class*="very short"] { max-height: 9em; } + .ui.scrolling.container[class*="very short"].resizable { + height: 9em; + } .ui.scrolling.container { max-height: 18em; } + .ui.scrolling.container.resizable { + height: 18em; + } .ui.scrolling.container.long { max-height: 36em; } + .ui.scrolling.container.long.resizable { + height: 36em; + } .ui.scrolling.container[class*="very long"] { max-height: 54em; } + .ui.scrolling.container[class*="very long"].resizable { + height: 54em; + } } @media only screen and (min-width: 992px) { .ui.scrolling.container.short { max-height: 18em; } + .ui.scrolling.container.short.resizable { + height: 18em; + } .ui.scrolling.container[class*="very short"] { max-height: 12em; } + .ui.scrolling.container[class*="very short"].resizable { + height: 12em; + } .ui.scrolling.container { max-height: 24em; } + .ui.scrolling.container.resizable { + height: 24em; + } .ui.scrolling.container.long { max-height: 48em; } + .ui.scrolling.container.long.resizable { + height: 48em; + } .ui.scrolling.container[class*="very long"] { max-height: 72em; } + .ui.scrolling.container[class*="very long"].resizable { + height: 72em; + } } @media only screen and (min-width: 1920px) { .ui.scrolling.container.short { max-height: 22.5em; } + .ui.scrolling.container.short.resizable { + height: 22.5em; + } .ui.scrolling.container[class*="very short"] { max-height: 15em; } + .ui.scrolling.container[class*="very short"].resizable { + height: 15em; + } .ui.scrolling.container { max-height: 30em; } + .ui.scrolling.container.resizable { + height: 30em; + } .ui.scrolling.container.long { max-height: 60em; } + .ui.scrolling.container.long.resizable { + height: 60em; + } .ui.scrolling.container[class*="very long"] { max-height: 90em; } + .ui.scrolling.container[class*="very long"].resizable { + height: 90em; + } +} +.ui.resizable.scrolling.container { + resize: vertical; + max-height: none; } diff --git a/dist/components/container.min.css b/dist/components/container.min.css index ea67f0be72..2a31602d8d 100644 --- a/dist/components/container.min.css +++ b/dist/components/container.min.css @@ -1,9 +1,9 @@ /*! - * # Fomantic-UI 2.9.2 - Container + * # Fomantic-UI 2.9.3 - Container * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * - */.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:723px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(723px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(723px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(723px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:933px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(933px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(933px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(933px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1127px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1127px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1127px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1127px + 5rem)}}.ui.text.container{font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";max-width:700px;line-height:1.5;font-size:1.14285714rem}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.wide.container{width:867.6px}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.wide.container{width:1119.6px}}@media only screen and (min-width:1200px){.ui.ui.ui.wide.container{width:1352.4px}}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.scrolling.container{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:none}@media only screen and (max-width:767.98px){.ui.scrolling.container.short{max-height:11.25em}.ui.scrolling.container[class*="very short"]{max-height:7.5em}.ui.scrolling.container{max-height:15em}.ui.scrolling.container.long{max-height:30em}.ui.scrolling.container[class*="very long"]{max-height:45em}}@media only screen and (min-width:768px){.ui.scrolling.container.short{max-height:13.5em}.ui.scrolling.container[class*="very short"]{max-height:9em}.ui.scrolling.container{max-height:18em}.ui.scrolling.container.long{max-height:36em}.ui.scrolling.container[class*="very long"]{max-height:54em}}@media only screen and (min-width:992px){.ui.scrolling.container.short{max-height:18em}.ui.scrolling.container[class*="very short"]{max-height:12em}.ui.scrolling.container{max-height:24em}.ui.scrolling.container.long{max-height:48em}.ui.scrolling.container[class*="very long"]{max-height:72em}}@media only screen and (min-width:1920px){.ui.scrolling.container.short{max-height:22.5em}.ui.scrolling.container[class*="very short"]{max-height:15em}.ui.scrolling.container{max-height:30em}.ui.scrolling.container.long{max-height:60em}.ui.scrolling.container[class*="very long"]{max-height:90em}} \ No newline at end of file + */.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:723px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(723px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(723px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(723px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:933px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(933px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(933px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(933px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1127px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1127px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1127px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1127px + 5rem)}}.ui.text.container{font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";max-width:700px;line-height:1.5;font-size:1.14285714rem}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.wide.container{width:867.6px}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.wide.container{width:1119.6px}}@media only screen and (min-width:1200px){.ui.ui.ui.wide.container{width:1352.4px}}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.scrolling.container{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:none}@media only screen and (max-width:767.98px){.ui.scrolling.container.short{max-height:11.25em}.ui.scrolling.container.short.resizable{height:11.25em}.ui.scrolling.container[class*="very short"]{max-height:7.5em}.ui.scrolling.container[class*="very short"].resizable{height:7.5em}.ui.scrolling.container{max-height:15em}.ui.scrolling.container.long{max-height:30em}.ui.scrolling.container.long.resizable{height:30em}.ui.scrolling.container[class*="very long"]{max-height:45em}.ui.scrolling.container[class*="very long"].resizable{height:45em}}@media only screen and (min-width:768px){.ui.scrolling.container.short{max-height:13.5em}.ui.scrolling.container.short.resizable{height:13.5em}.ui.scrolling.container[class*="very short"]{max-height:9em}.ui.scrolling.container[class*="very short"].resizable{height:9em}.ui.scrolling.container{max-height:18em}.ui.scrolling.container.resizable{height:18em}.ui.scrolling.container.long{max-height:36em}.ui.scrolling.container.long.resizable{height:36em}.ui.scrolling.container[class*="very long"]{max-height:54em}.ui.scrolling.container[class*="very long"].resizable{height:54em}}@media only screen and (min-width:992px){.ui.scrolling.container.short{max-height:18em}.ui.scrolling.container.short.resizable{height:18em}.ui.scrolling.container[class*="very short"]{max-height:12em}.ui.scrolling.container[class*="very short"].resizable{height:12em}.ui.scrolling.container{max-height:24em}.ui.scrolling.container.resizable{height:24em}.ui.scrolling.container.long{max-height:48em}.ui.scrolling.container.long.resizable{height:48em}.ui.scrolling.container[class*="very long"]{max-height:72em}.ui.scrolling.container[class*="very long"].resizable{height:72em}}@media only screen and (min-width:1920px){.ui.scrolling.container.short{max-height:22.5em}.ui.scrolling.container.short.resizable{height:22.5em}.ui.scrolling.container[class*="very short"]{max-height:15em}.ui.scrolling.container[class*="very short"].resizable{height:15em}.ui.scrolling.container{max-height:30em}.ui.scrolling.container.resizable{height:30em}.ui.scrolling.container.long{max-height:60em}.ui.scrolling.container.long.resizable{height:60em}.ui.scrolling.container[class*="very long"]{max-height:90em}.ui.scrolling.container[class*="very long"].resizable{height:90em}}.ui.resizable.scrolling.container{resize:vertical;max-height:none} \ No newline at end of file diff --git a/dist/components/dimmer.css b/dist/components/dimmer.css index df9e99fe59..b1f0bc2d3b 100644 --- a/dist/components/dimmer.css +++ b/dist/components/dimmer.css @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Dimmer + * # Fomantic-UI 2.9.3 - Dimmer * https://github.com/fomantic/Fomantic-UI/ * * @@ -195,7 +195,7 @@ body.dimmable > .dimmer { .light.light.light.light.light.dimmer { background: rgba(0, 0, 0, 0.45); } -.very.light.light.light.light.dimmer { +.very.very.very.very.light.dimmer { background: rgba(0, 0, 0, 0.25); } @@ -219,7 +219,7 @@ body.dimmable > .dimmer { .light.light.light.light.light.inverted.dimmer { background: rgba(255, 255, 255, 0.45); } -.very.light.light.light.light.inverted.dimmer { +.very.very.very.very.light.inverted.dimmer { background: rgba(255, 255, 255, 0.25); } diff --git a/dist/components/dimmer.js b/dist/components/dimmer.js index f6259f835f..95335ce6cb 100644 --- a/dist/components/dimmer.js +++ b/dist/components/dimmer.js @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Dimmer + * # Fomantic-UI 2.9.3 - Dimmer * https://github.com/fomantic/Fomantic-UI/ * * @@ -46,7 +46,6 @@ eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', clickEvent = 'ontouchstart' in document.documentElement ? 'touchstart' @@ -529,7 +528,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -542,9 +541,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if ($allModules.length > 1) { title += ' (' + $allModules.length + ')'; } diff --git a/dist/components/dimmer.min.css b/dist/components/dimmer.min.css index e7e1e36fd5..7e9bcf7a5b 100644 --- a/dist/components/dimmer.min.css +++ b/dist/components/dimmer.min.css @@ -1,9 +1,9 @@ /*! - * # Fomantic-UI 2.9.2 - Dimmer + * # Fomantic-UI 2.9.3 - Dimmer * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * - */.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background:rgba(0,0,0,.85);opacity:0;line-height:1;animation-fill-mode:both;animation-duration:.5s;transition:all .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer:not(.page){border-radius:inherit}.ui.dimmer:not(.inverted)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.dimmer:not(.inverted){scrollbar-face-color:#656565;scrollbar-shadow-color:#656565;scrollbar-track-color:#323232;scrollbar-arrow-color:#323232;scrollbar-color:rgba(255,255,255,.25) rgba(255,255,255,.1)}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:flex;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.dimmed.dimmable>.ui.animating.legacy.dimmer,.dimmed.dimmable>.ui.visible.legacy.dimmer,.ui.active.legacy.dimmer{display:block}.ui[class*="top aligned"].dimmer{justify-content:flex-start}.ui[class*="bottom aligned"].dimmer{justify-content:flex-end}.ui.page.dimmer{position:fixed;transform-style:"";perspective:2000px;transform-origin:center center}.ui.page.dimmer.modals{-moz-perspective:none}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}@supports (not (-webkit-backdrop-filter:none)) and (not ((-webkit-backdrop-filter:none) or (backdrop-filter:none))){.blurring.dimmable>:not(.dimmer){filter:initial;transition:.8s filter ease}.blurring.dimmed.dimmable>:not(.dimmer):not(.popup){filter:blur(5px) grayscale(.7)}}.blurring.dimmable>.dimmer{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(5px) grayscale(.7);backdrop-filter:blur(5px) grayscale(.7)}.blurring.dimmable>.inverted.dimmer{background:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.medium.medium.medium.medium.medium.dimmer{background:rgba(0,0,0,.65)}.light.light.light.light.light.dimmer{background:rgba(0,0,0,.45)}.very.light.light.light.light.dimmer{background:rgba(0,0,0,.25)}.ui.inverted.dimmer{background:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content,.ui.inverted.dimmer>.content>*{color:#000}.medium.medium.medium.medium.medium.inverted.dimmer{background:rgba(255,255,255,.65)}.light.light.light.light.light.inverted.dimmer{background:rgba(255,255,255,.45)}.very.light.light.light.light.inverted.dimmer{background:rgba(255,255,255,.25)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:0;width:0;height:0;z-index:-100;background:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background:rgba(255,255,255,.85)}.ui[class*="bottom dimmer"],.ui[class*="center dimmer"],.ui[class*="top dimmer"]{height:auto}.ui[class*="bottom dimmer"]{top:auto;bottom:0}.ui[class*="center dimmer"]{top:50%;transform:translateY(-50%)}.ui.segment>.ui.ui[class*="top dimmer"]{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.segment>.ui.ui[class*="center dimmer"]{border-radius:0}.ui.segment>.ui.ui[class*="bottom dimmer"]{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="center dimmer"].transition[class*="fade up"].in{animation-name:fadeInUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].in{animation-name:fadeInDownCenter}.ui[class*="center dimmer"].transition[class*="fade up"].out{animation-name:fadeOutUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].out{animation-name:fadeOutDownCenter}.ui[class*="center dimmer"].bounce.transition{animation-name:bounceCenter}@keyframes fadeInUpCenter{0%{opacity:0;transform:translateY(-40%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeInDownCenter{0%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeOutUpCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-45%)}}@keyframes fadeOutDownCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-55%)}}@keyframes bounceCenter{0%,100%,20%,50%,80%{transform:translateY(-50%)}40%{transform:translateY(calc(-50% - 30px))}60%{transform:translateY(calc(-50% - 15px))}} \ No newline at end of file + */.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background:rgba(0,0,0,.85);opacity:0;line-height:1;animation-fill-mode:both;animation-duration:.5s;transition:all .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer:not(.page){border-radius:inherit}.ui.dimmer:not(.inverted)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.dimmer:not(.inverted){scrollbar-face-color:#656565;scrollbar-shadow-color:#656565;scrollbar-track-color:#323232;scrollbar-arrow-color:#323232;scrollbar-color:rgba(255,255,255,.25) rgba(255,255,255,.1)}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:flex;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.dimmed.dimmable>.ui.animating.legacy.dimmer,.dimmed.dimmable>.ui.visible.legacy.dimmer,.ui.active.legacy.dimmer{display:block}.ui[class*="top aligned"].dimmer{justify-content:flex-start}.ui[class*="bottom aligned"].dimmer{justify-content:flex-end}.ui.page.dimmer{position:fixed;transform-style:"";perspective:2000px;transform-origin:center center}.ui.page.dimmer.modals{-moz-perspective:none}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}@supports (not (-webkit-backdrop-filter:none)) and (not ((-webkit-backdrop-filter:none) or (backdrop-filter:none))){.blurring.dimmable>:not(.dimmer){filter:initial;transition:.8s filter ease}.blurring.dimmed.dimmable>:not(.dimmer):not(.popup){filter:blur(5px) grayscale(.7)}}.blurring.dimmable>.dimmer{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(5px) grayscale(.7);backdrop-filter:blur(5px) grayscale(.7)}.blurring.dimmable>.inverted.dimmer{background:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.medium.medium.medium.medium.medium.dimmer{background:rgba(0,0,0,.65)}.light.light.light.light.light.dimmer{background:rgba(0,0,0,.45)}.very.very.very.very.light.dimmer{background:rgba(0,0,0,.25)}.ui.inverted.dimmer{background:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content,.ui.inverted.dimmer>.content>*{color:#000}.medium.medium.medium.medium.medium.inverted.dimmer{background:rgba(255,255,255,.65)}.light.light.light.light.light.inverted.dimmer{background:rgba(255,255,255,.45)}.very.very.very.very.light.inverted.dimmer{background:rgba(255,255,255,.25)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:0;width:0;height:0;z-index:-100;background:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background:rgba(255,255,255,.85)}.ui[class*="bottom dimmer"],.ui[class*="center dimmer"],.ui[class*="top dimmer"]{height:auto}.ui[class*="bottom dimmer"]{top:auto;bottom:0}.ui[class*="center dimmer"]{top:50%;transform:translateY(-50%)}.ui.segment>.ui.ui[class*="top dimmer"]{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.segment>.ui.ui[class*="center dimmer"]{border-radius:0}.ui.segment>.ui.ui[class*="bottom dimmer"]{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="center dimmer"].transition[class*="fade up"].in{animation-name:fadeInUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].in{animation-name:fadeInDownCenter}.ui[class*="center dimmer"].transition[class*="fade up"].out{animation-name:fadeOutUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].out{animation-name:fadeOutDownCenter}.ui[class*="center dimmer"].bounce.transition{animation-name:bounceCenter}@keyframes fadeInUpCenter{0%{opacity:0;transform:translateY(-40%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeInDownCenter{0%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeOutUpCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-45%)}}@keyframes fadeOutDownCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-55%)}}@keyframes bounceCenter{0%,100%,20%,50%,80%{transform:translateY(-50%)}40%{transform:translateY(calc(-50% - 30px))}60%{transform:translateY(calc(-50% - 15px))}} \ No newline at end of file diff --git a/dist/components/dimmer.min.js b/dist/components/dimmer.min.js index 65f6cd724d..5782cb106f 100644 --- a/dist/components/dimmer.min.js +++ b/dist/components/dimmer.min.js @@ -1,5 +1,5 @@ /* - * # Fomantic UI - 2.9.2 + * # Fomantic UI - 2.9.3 * https://github.com/fomantic/Fomantic-UI * https://fomantic-ui.com/ * @@ -8,4 +8,4 @@ * https://opensource.org/licenses/MIT * */ -!function(T,e,S){"use strict";function D(e){return"function"==typeof e&&"number"!=typeof e.nodeType}e=void 0!==e&&e.Math===Math?e:globalThis,T.fn.dimmer=function(v){var b,p=T(this),h=Date.now(),y=[],C=v,w="string"==typeof C,x=[].slice.call(arguments,1);return p.each(function(){var o,i,a=T.isPlainObject(v)?T.extend(!0,{},T.fn.dimmer.settings,v):T.extend({},T.fn.dimmer.settings),n=a.selector,e=a.namespace,t=a.className,d=a.error,r="."+e,s="module-"+e,m=p.selector||"",l="ontouchstart"in S.documentElement?"touchstart":"click",c=T(this),u=this,f=c.data(s),g={preinitialize:function(){o=g.is.dimmer()?(i=c.parent(),c):(i=c,g.has.dimmer()?a.dimmerName?i.find(n.dimmer).filter("."+a.dimmerName):i.find(n.dimmer):g.create())},initialize:function(){g.debug("Initializing dimmer",a),g.bind.events(),g.set.dimmable(),g.instantiate()},instantiate:function(){g.verbose("Storing instance of module",g),f=g,c.data(s,f)},destroy:function(){g.verbose("Destroying previous module",o),g.unbind.events(),g.remove.variation(),i.off(r)},bind:{events:function(){"hover"===a.on?i.on("mouseenter"+r,g.show).on("mouseleave"+r,g.hide):"click"===a.on&&i.on(l+r,g.toggle),g.is.page()&&(g.debug("Setting as a page dimmer",i),g.set.pageDimmer()),g.is.closable()&&(g.verbose("Adding dimmer close event",o),i.on(l+r,n.dimmer,g.event.click))}},unbind:{events:function(){c.removeData(s),i.off(r)}},event:{click:function(e){g.verbose("Determining if event occurred on dimmer",e),0!==o.find(e.target).length&&!T(e.target).is(n.content)||(g.hide(),e.stopImmediatePropagation())}},addContent:function(e){e=T(e);g.debug("Add content to dimmer",e),e.parent()[0]!==o[0]&&e.detach().appendTo(o)},create:function(){var e=T(a.template.dimmer(a));return a.dimmerName&&(g.debug("Creating named dimmer",a.dimmerName),e.addClass(a.dimmerName)),e.appendTo(i),e},show:function(e){e=D(e)?e:function(){},g.is.dimmed()&&!g.is.animating()||!g.is.enabled()?g.debug("Dimmer is already shown or disabled"):!1===a.onShow.call(u)?g.verbose("Show callback returned false cancelling dimmer show"):(g.debug("Showing dimmer",o,a),g.set.variation(),g.animate.show(e),a.onChange.call(u))},hide:function(e){e=D(e)?e:function(){},g.is.dimmed()||g.is.animating()?!1===a.onHide.call(u)?g.verbose("Hide callback returned false cancelling dimmer hide"):(g.debug("Hiding dimmer",o),g.animate.hide(e),a.onChange.call(u)):g.debug("Dimmer is not visible")},toggle:function(){g.verbose("Toggling dimmer visibility",o),g.is.dimmed()?g.is.closable()&&g.hide():g.show()},animate:{show:function(e){e=D(e)?e:function(){},a.useCSS&&void 0!==T.fn.transition?(a.useFlex?(g.debug("Using flex dimmer"),g.remove.legacy()):(g.debug("Using legacy non-flex dimmer"),g.set.legacy()),"auto"!==a.opacity&&g.set.opacity(),o.transition({debug:a.debug,verbose:a.verbose,silent:a.silent,displayType:a.useFlex?"flex":"block",animation:(a.transition.showMethod||a.transition)+" in",queue:!1,duration:g.get.duration(),useFailSafe:!0,onStart:function(){g.set.dimmed()},onComplete:function(){g.set.active(),a.onVisible.call(o),e()}})):(g.verbose("Showing dimmer animation with javascript"),g.set.dimmed(),"auto"===a.opacity&&(a.opacity=.8),o.stop().css({opacity:0,width:"100%",height:"100%"}).fadeTo(g.get.duration(),a.opacity,function(){o.removeAttr("style"),g.set.active(),a.onVisible.call(o),e()}))},hide:function(e){e=D(e)?e:function(){},a.useCSS&&void 0!==T.fn.transition?(g.verbose("Hiding dimmer with css"),o.transition({debug:a.debug,verbose:a.verbose,silent:a.silent,displayType:a.useFlex?"flex":"block",animation:(a.transition.hideMethod||a.transition)+" out",queue:!1,duration:g.get.duration(),useFailSafe:!0,onComplete:function(){g.remove.dimmed(),g.remove.variation(),g.remove.active(),a.onHidden.call(o),e()}})):(g.verbose("Hiding dimmer with javascript"),o.stop().fadeOut(g.get.duration(),function(){g.remove.dimmed(),g.remove.active(),o.removeAttr("style"),a.onHidden.call(o),e()}))}},get:{dimmer:function(){return o},duration:function(){return g.is.active()?a.transition.hideDuration||a.duration.hide||a.duration:a.transition.showDuration||a.duration.show||a.duration}},has:{dimmer:function(){return a.dimmerName?0 .ui.dimmer",content:".ui.dimmer > .content, .ui.dimmer > .content > .center"},template:{dimmer:function(e){var i,n=T("
").addClass("ui dimmer");return e.displayLoader&&(i=T("
").addClass(e.className.loader).addClass(e.loaderVariation),e.loaderText&&(i.text(e.loaderText),i.addClass("text")),n.append(i)),n}}}}(jQuery,window,document); \ No newline at end of file +!function(x,e,T){"use strict";function S(e){return"function"==typeof e&&"number"!=typeof e.nodeType}e=void 0!==e&&e.Math===Math?e:globalThis,x.fn.dimmer=function(g){var v,b=x(this),p=Date.now(),h=[],y=g,C="string"==typeof y,w=[].slice.call(arguments,1);return b.each(function(){var o,i,a=x.isPlainObject(g)?x.extend(!0,{},x.fn.dimmer.settings,g):x.extend({},x.fn.dimmer.settings),n=a.selector,e=a.namespace,t=a.className,d=a.error,r="."+e,s="module-"+e,m="ontouchstart"in T.documentElement?"touchstart":"click",l=x(this),c=this,u=l.data(s),f={preinitialize:function(){o=f.is.dimmer()?(i=l.parent(),l):(i=l,f.has.dimmer()?a.dimmerName?i.find(n.dimmer).filter("."+a.dimmerName):i.find(n.dimmer):f.create())},initialize:function(){f.debug("Initializing dimmer",a),f.bind.events(),f.set.dimmable(),f.instantiate()},instantiate:function(){f.verbose("Storing instance of module",f),u=f,l.data(s,u)},destroy:function(){f.verbose("Destroying previous module",o),f.unbind.events(),f.remove.variation(),i.off(r)},bind:{events:function(){"hover"===a.on?i.on("mouseenter"+r,f.show).on("mouseleave"+r,f.hide):"click"===a.on&&i.on(m+r,f.toggle),f.is.page()&&(f.debug("Setting as a page dimmer",i),f.set.pageDimmer()),f.is.closable()&&(f.verbose("Adding dimmer close event",o),i.on(m+r,n.dimmer,f.event.click))}},unbind:{events:function(){l.removeData(s),i.off(r)}},event:{click:function(e){f.verbose("Determining if event occurred on dimmer",e),0!==o.find(e.target).length&&!x(e.target).is(n.content)||(f.hide(),e.stopImmediatePropagation())}},addContent:function(e){e=x(e);f.debug("Add content to dimmer",e),e.parent()[0]!==o[0]&&e.detach().appendTo(o)},create:function(){var e=x(a.template.dimmer(a));return a.dimmerName&&(f.debug("Creating named dimmer",a.dimmerName),e.addClass(a.dimmerName)),e.appendTo(i),e},show:function(e){e=S(e)?e:function(){},f.is.dimmed()&&!f.is.animating()||!f.is.enabled()?f.debug("Dimmer is already shown or disabled"):!1===a.onShow.call(c)?f.verbose("Show callback returned false cancelling dimmer show"):(f.debug("Showing dimmer",o,a),f.set.variation(),f.animate.show(e),a.onChange.call(c))},hide:function(e){e=S(e)?e:function(){},f.is.dimmed()||f.is.animating()?!1===a.onHide.call(c)?f.verbose("Hide callback returned false cancelling dimmer hide"):(f.debug("Hiding dimmer",o),f.animate.hide(e),a.onChange.call(c)):f.debug("Dimmer is not visible")},toggle:function(){f.verbose("Toggling dimmer visibility",o),f.is.dimmed()?f.is.closable()&&f.hide():f.show()},animate:{show:function(e){e=S(e)?e:function(){},a.useCSS&&void 0!==x.fn.transition?(a.useFlex?(f.debug("Using flex dimmer"),f.remove.legacy()):(f.debug("Using legacy non-flex dimmer"),f.set.legacy()),"auto"!==a.opacity&&f.set.opacity(),o.transition({debug:a.debug,verbose:a.verbose,silent:a.silent,displayType:a.useFlex?"flex":"block",animation:(a.transition.showMethod||a.transition)+" in",queue:!1,duration:f.get.duration(),useFailSafe:!0,onStart:function(){f.set.dimmed()},onComplete:function(){f.set.active(),a.onVisible.call(o),e()}})):(f.verbose("Showing dimmer animation with javascript"),f.set.dimmed(),"auto"===a.opacity&&(a.opacity=.8),o.stop().css({opacity:0,width:"100%",height:"100%"}).fadeTo(f.get.duration(),a.opacity,function(){o.removeAttr("style"),f.set.active(),a.onVisible.call(o),e()}))},hide:function(e){e=S(e)?e:function(){},a.useCSS&&void 0!==x.fn.transition?(f.verbose("Hiding dimmer with css"),o.transition({debug:a.debug,verbose:a.verbose,silent:a.silent,displayType:a.useFlex?"flex":"block",animation:(a.transition.hideMethod||a.transition)+" out",queue:!1,duration:f.get.duration(),useFailSafe:!0,onComplete:function(){f.remove.dimmed(),f.remove.variation(),f.remove.active(),a.onHidden.call(o),e()}})):(f.verbose("Hiding dimmer with javascript"),o.stop().fadeOut(f.get.duration(),function(){f.remove.dimmed(),f.remove.active(),o.removeAttr("style"),a.onHidden.call(o),e()}))}},get:{dimmer:function(){return o},duration:function(){return f.is.active()?a.transition.hideDuration||a.duration.hide||a.duration:a.transition.showDuration||a.duration.show||a.duration}},has:{dimmer:function(){return a.dimmerName?0 .ui.dimmer",content:".ui.dimmer > .content, .ui.dimmer > .content > .center"},template:{dimmer:function(e){var i,n=x("
").addClass("ui dimmer");return e.displayLoader&&(i=x("
").addClass(e.className.loader).addClass(e.loaderVariation),e.loaderText&&(i.text(e.loaderText),i.addClass("text")),n.append(i)),n}}}}(jQuery,window,document); \ No newline at end of file diff --git a/dist/components/divider.css b/dist/components/divider.css index 4630c09c85..f535126098 100644 --- a/dist/components/divider.css +++ b/dist/components/divider.css @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Divider + * # Fomantic-UI 2.9.3 - Divider * https://github.com/fomantic/Fomantic-UI/ * * diff --git a/dist/components/divider.min.css b/dist/components/divider.min.css index 512c09fcd5..ce66c9165c 100644 --- a/dist/components/divider.min.css +++ b/dist/components/divider.min.css @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Divider + * # Fomantic-UI 2.9.3 - Divider * https://github.com/fomantic/Fomantic-UI/ * * diff --git a/dist/components/dropdown.css b/dist/components/dropdown.css index 217548147b..b969617ce6 100644 --- a/dist/components/dropdown.css +++ b/dist/components/dropdown.css @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Dropdown + * # Fomantic-UI 2.9.3 - Dropdown * https://github.com/fomantic/Fomantic-UI/ * * @@ -412,22 +412,26 @@ select.ui.dropdown { } /* Selection Menu */ -.ui.selection.dropdown .menu { +.ui.selection.dropdown:not(.unlimited) .menu { overflow-x: hidden; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; - border-top-width: 0 !important; +} +.ui.selection.dropdown .menu { outline: none; margin: 0 -1px; min-width: calc(100% + 2px); width: calc(100% + 2px); - border-radius: 0 0 0.28571429rem 0.28571429rem; box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); transition: opacity 0.1s ease; } +.ui.selection.dropdown:not(.pointing):not(.floating) .menu { + border-top-width: 0; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} .ui.selection.dropdown .menu::after, .ui.selection.dropdown .menu::before { display: none; @@ -446,7 +450,7 @@ select.ui.dropdown { .ui.selection.dropdown[class*="very short"] .menu { max-height: 4.00714286rem; } - .ui.selection.dropdown .menu { + .ui.selection.dropdown:not(.unlimited) .menu { max-height: 8.01428571rem; } .ui.selection.dropdown.long .menu { @@ -463,7 +467,7 @@ select.ui.dropdown { .ui.selection.dropdown[class*="very short"] .menu { max-height: 5.34285714rem; } - .ui.selection.dropdown .menu { + .ui.selection.dropdown:not(.unlimited) .menu { max-height: 10.68571429rem; } .ui.selection.dropdown.long .menu { @@ -480,7 +484,7 @@ select.ui.dropdown { .ui.selection.dropdown[class*="very short"] .menu { max-height: 8.01428571rem; } - .ui.selection.dropdown .menu { + .ui.selection.dropdown:not(.unlimited) .menu { max-height: 16.02857143rem; } .ui.selection.dropdown.long .menu { @@ -497,7 +501,7 @@ select.ui.dropdown { .ui.selection.dropdown[class*="very short"] .menu { max-height: 10.68571429rem; } - .ui.selection.dropdown .menu { + .ui.selection.dropdown:not(.unlimited) .menu { max-height: 21.37142857rem; } .ui.selection.dropdown.long .menu { @@ -515,6 +519,10 @@ select.ui.dropdown { white-space: normal; word-wrap: normal; } +.ui.selection.pointing.dropdown .menu > .item:first-child, +.ui.selection.floating.dropdown .menu > .item:first-child { + border-top: none; +} /* User Item */ .ui.selection.dropdown .menu > .hidden.addition.item { @@ -582,7 +590,7 @@ select.ui.dropdown { } /* Connecting Border */ -.ui.active.selection.dropdown { +.ui.active.selection.dropdown:not(.pointing):not(.floating) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } @@ -702,7 +710,7 @@ select.ui.dropdown { } /* Search Menu */ -.ui.search.dropdown .menu { +.ui.search.dropdown:not(.unlimited) .menu { overflow-x: hidden; overflow-y: auto; -ms-scroll-chaining: none; @@ -711,22 +719,22 @@ select.ui.dropdown { backface-visibility: hidden; } @media only screen and (max-width: 767.98px) { - .ui.search.dropdown .menu { + .ui.search.dropdown:not(.unlimited) .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { - .ui.search.dropdown .menu { + .ui.search.dropdown:not(.unlimited) .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { - .ui.search.dropdown .menu { + .ui.search.dropdown:not(.unlimited) .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { - .ui.search.dropdown .menu { + .ui.search.dropdown:not(.unlimited) .menu { max-height: 21.37142857rem; } } @@ -762,7 +770,7 @@ select.ui.dropdown { .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon { margin-left: 1.5em; } -.ui.dropdown:not(.selection) > .remove.icon { +.ui.dropdown:not(.selection):not(.multiple) > .remove.icon { margin-top: -1.35em; } @@ -823,6 +831,16 @@ select.ui.dropdown { margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em; height: 1.71428571em; } +.ui.multiple.dropdown:not(.selection):not(.labeled) > .dropdown.icon { + right: -1.5em; +} +.ui.multiple.dropdown:not(.selection):not(.labeled) > .remove.icon { + margin-right: -1.5em; +} +.ui.multiple.dropdown:not(.selection):not(.labeled):not(.search) > .remove.icon ~ .text.default, +.ui.multiple.dropdown:not(.selection):not(.labeled) > .text.default:first-child { + overflow: inherit; +} /* ----------------- Multiple Search @@ -860,6 +878,13 @@ select.ui.dropdown { .ui.multiple.search.dropdown.button { min-width: 14em; } +.ui.multiple.search.dropdown > span.sizer { + display: none; +} +.ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search, +.ui.multiple.search.dropdown:not(.selection) > input.search:first-child { + min-width: 5.05em; +} /* -------------- Inline @@ -907,7 +932,7 @@ select.ui.dropdown { /* Menu Item Hover */ .ui.dropdown .menu > .item:hover { - background: rgba(0, 0, 0, 0.05); + background: #f2f2f2; color: rgba(0, 0, 0, 0.95); z-index: 13; } @@ -989,7 +1014,7 @@ select.ui.dropdown { /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item { - background: rgba(0, 0, 0, 0.03); + background: #f7f7f7; color: rgba(0, 0, 0, 0.95); } @@ -1169,6 +1194,12 @@ select.ui.dropdown { cursor: default; pointer-events: none; } +.ui.disabled.dropdown > .remove.icon, +.ui.read-only.dropdown > .remove.icon, +.ui.disabled.dropdown > .label > .delete.icon, +.ui.read-only.dropdown > .label > .delete.icon { + display: none; +} /******************************* @@ -1255,9 +1286,9 @@ select.ui.dropdown { } /* Selection */ -.ui.ui.upward.selection.dropdown .menu { - border-top-width: 1px !important; - border-bottom-width: 0 !important; +.ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu { + border-top-width: 1px; + border-bottom-width: 0; box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); border-radius: 0.28571429rem 0.28571429rem 0 0; } @@ -1266,13 +1297,15 @@ select.ui.dropdown { } /* Active Upward */ -.ui.active.upward.selection.dropdown { +.ui.active.upward.selection.dropdown:not(.pointing):not(.floating) { border-radius: 0 0 0.28571429rem 0.28571429rem !important; } /* Visible Upward */ .ui.upward.selection.dropdown.visible { box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); +} +.ui.upward.selection.dropdown.visible:not(.pointing):not(.floating) { border-radius: 0 0 0.28571429rem 0.28571429rem !important; } @@ -1280,7 +1313,7 @@ select.ui.dropdown { .ui.upward.active.selection.dropdown:hover { box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05); } -.ui.upward.active.selection.dropdown:hover .menu { +.ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu { box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); } @@ -1308,8 +1341,8 @@ select.ui.dropdown { margin: 0 !important; border-top: 1px solid rgba(34, 36, 38, 0.15); } -.ui.scrolling.dropdown .menu .item.item.item, -.ui.dropdown .scrolling.menu > .item.item.item { +.ui.ui.ui.scrolling.dropdown .menu .item, +.ui.ui.ui.dropdown .scrolling.menu > .item { border-top: none; } .ui.scrolling.dropdown .menu .item:first-child, @@ -1333,24 +1366,45 @@ select.ui.dropdown { .ui.dropdown .scrolling.menu { max-height: 10.28571429rem; } + .ui.scrolling.resizable.dropdown .menu, + .ui.dropdown .scrolling.resizable.menu { + height: 10.28571429rem; + } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 15.42857143rem; } + .ui.scrolling.resizable.dropdown .menu, + .ui.dropdown .scrolling.resizable.menu { + height: 15.42857143rem; + } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } + .ui.scrolling.resizable.dropdown .menu, + .ui.dropdown .scrolling.resizable.menu { + height: 20.57142857rem; + } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } + .ui.scrolling.resizable.dropdown .menu, + .ui.dropdown .scrolling.resizable.menu { + height: 20.57142857rem; + } +} +.ui.scrolling.resizable.dropdown .menu, +.ui.dropdown .scrolling.resizable.menu { + resize: vertical; + max-height: none; } /* -------------------- @@ -1533,6 +1587,19 @@ select.ui.dropdown { background: #fff; z-index: 2; } +@supports selector(:has(.f)) { + .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after, + .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after { + background: #f2f2f2; + } + .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after, + .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after { + background: #f7f7f7; + } +} +.ui.selection.pointing.dropdown > .menu::after { + box-shadow: -1px -1px 0 0 #96c8da; +} .ui.pointing.dropdown > .menu:not(.hidden)::after { top: -0.25em; left: 50%; @@ -1677,6 +1744,9 @@ select.ui.dropdown { box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15); margin: -0.25em 0 0; } +.ui.selection.pointing.upward.dropdown .menu::after { + box-shadow: 1px 1px 0 0 #96c8da; +} /* Right Pointing Upward */ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { @@ -1703,6 +1773,16 @@ select.ui.dropdown { margin: 0 0 1em 0; box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); } +.ui.floating.dropdown .menu .item:first-child, +.ui.pointing.dropdown .menu .item:first-child { + border-top-left-radius: 0.28571429rem; + border-top-right-radius: 0.28571429rem; +} +.ui.floating.dropdown .menu .item:last-child, +.ui.pointing.dropdown .menu .item:last-child { + border-bottom-left-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} /* -------------------- Sizes @@ -1763,13 +1843,13 @@ select.ui.dropdown { } .ui.dropdown .inverted.menu > .item:hover, .ui.inverted.dropdown .menu > .item:hover { - background: rgba(255, 255, 255, 0.08); + background: #2d2e2f; color: rgba(255, 255, 255, 0.8); } .ui.inverted.dropdown.selected, .ui.dropdown .inverted.menu .selected.item, .ui.inverted.dropdown .menu .selected.item { - background: rgba(255, 255, 255, 0.15); + background: #3d3e3f; color: rgba(255, 255, 255, 0.8); } .ui.dropdown .inverted.menu > .header, @@ -1907,6 +1987,19 @@ select.ui.dropdown { background: #1b1c1d; box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.15); } +.ui.inverted.upward.pointing.dropdown > .menu::after { + box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15); +} +@supports selector(:has(.f)) { + .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after, + .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after { + background: #2d2e2f; + } + .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after, + .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after { + background: #3d3e3f; + } +} /******************************* diff --git a/dist/components/dropdown.js b/dist/components/dropdown.js index a8aa16d58d..e23ee7c0f7 100644 --- a/dist/components/dropdown.js +++ b/dist/components/dropdown.js @@ -1,5 +1,5 @@ /*! - * # Fomantic-UI 2.9.2 - Dropdown + * # Fomantic-UI 2.9.3 - Dropdown * https://github.com/fomantic/Fomantic-UI/ * * @@ -24,14 +24,25 @@ $allModules = $(this), $document = $(document), - moduleSelector = $allModules.selector || '', - time = Date.now(), performance = [], query = arguments[0], methodInvoked = typeof query === 'string', queryArguments = [].slice.call(arguments, 1), + contextCheck = function (context, win) { + var $context; + if ([window, document].indexOf(context) >= 0) { + $context = $(context); + } else { + $context = $(win.document).find(context); + if ($context.length === 0) { + $context = win.frameElement ? contextCheck(context, win.parent) : window; + } + } + + return $context; + }, returnedValue ; @@ -56,7 +67,7 @@ moduleNamespace = 'module-' + namespace, $module = $(this), - $context = [window, document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $(settings.context), + $context = contextCheck(settings.context, window), $text = $module.find(selector.text), $search = $module.find(selector.search), $sizer = $module.find(selector.sizer), @@ -91,7 +102,8 @@ selectObserver, menuObserver, classObserver, - module + module, + tempDisableApiCache = false ; module = { @@ -351,7 +363,7 @@ module.verbose('Adding clear icon'); $clear = $('') .addClass('remove icon') - .insertBefore($text) + .insertAfter($icon) ; } if (module.is.search() && !module.has.search()) { @@ -517,7 +529,7 @@ callback = isFunction(callback) ? callback : function () {}; - if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) { + if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache() && !module.has.maxSelections()) { module.clearItems(); } if (!module.can.show() && module.is.remote()) { @@ -567,7 +579,10 @@ if ($subMenu.length > 0) { module.verbose('Hiding sub-menu', $subMenu); $subMenu.each(function () { - module.animate.hide(false, $(this)); + var $sub = $(this); + if (!module.is.animating($sub)) { + module.animate.hide(false, $sub); + } }); } } @@ -762,6 +777,8 @@ } ; if (settings.useLabels && module.has.maxSelections()) { + module.show(); + return; } if (settings.apiSettings) { @@ -858,11 +875,12 @@ if (!$module.api('get request')) { module.setup.api(); } - apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks); + apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks, tempDisableApiCache ? { cache: false } : {}); $module .api('setting', apiSettings) .api('query') ; + tempDisableApiCache = false; }, filterItems: function (query) { @@ -1084,8 +1102,8 @@ notFoundTokens = [] ; tokens.forEach(function (value) { - if (module.set.selected(module.escape.htmlEntities(value.trim()), null, true, true) === false) { - notFoundTokens.push(value); + if (module.set.selected(module.escape.htmlEntities(value.trim()), null, false, true) === false) { + notFoundTokens.push(value.trim()); } }); event.preventDefault(); @@ -1218,7 +1236,7 @@ module.set.filtered(); } clearTimeout(module.timer); - module.timer = setTimeout(module.search, settings.delay.search); + module.timer = setTimeout(function () { module.search(); }, settings.delay.search); }, label: { click: function (event) { @@ -1394,11 +1412,13 @@ if (settings.allowAdditions) { module.remove.userAddition(); } - module.remove.filteredItem(); + if (!settings.keepSearchTerm) { + module.remove.filteredItem(); + module.remove.searchTerm(); + } if (!module.is.visible() && $target.length > 0) { module.show(); } - module.remove.searchTerm(); if (!module.is.focusedOnSearch() && skipRefocus !== true) { module.focusSearch(true); } @@ -1584,7 +1604,9 @@ module.verbose('Selecting item from keyboard shortcut', $selectedItem); module.event.item.click.call($selectedItem, event); if (module.is.searchSelection()) { - module.remove.searchTerm(); + if (!settings.keepSearchTerm) { + module.remove.searchTerm(); + } if (module.is.multiple()) { $search.trigger('focus'); } @@ -1801,7 +1823,7 @@ ? value : text; if (module.can.activate($(element))) { - module.set.selected(value, $(element)); + module.set.selected(value, $(element), false, settings.keepSearchTerm); if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) { module.hideAndClear(); } @@ -2065,7 +2087,7 @@ values.push({ name: name, value: value, - text: text, + text: module.escape.htmlEntities(text, true), disabled: disabled, }); } @@ -2153,7 +2175,7 @@ return; } if (isMultiple) { - if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String)) !== -1) { + if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String).map(module.escape.htmlEntities)) !== -1) { $selectedItem = $selectedItem ? $selectedItem.add($choice) : $choice; @@ -2214,7 +2236,7 @@ return false; } - return true; + return false; }, disabled: function () { $search.attr('tabindex', module.is.disabled() ? -1 : 0); @@ -2304,7 +2326,7 @@ $.each(values, function (value, name) { module.set.text(name); }); - } else { + } else if (settings.useLabels) { $.each(values, function (value, name) { module.add.label(value, name); }); @@ -2388,6 +2410,11 @@ module.set.value('', null, null, preventChangeTrigger); }, + clearCache: function () { + module.debug('Clearing API cache once'); + tempDisableApiCache = true; + }, + scrollPage: function (direction, $selectedItem) { var $currentItem = $selectedItem || module.get.selectedItem(), @@ -2446,7 +2473,7 @@ valueIsSet = searchValue !== '' ; if (isMultiple && hasSearchValue) { - module.verbose('Adjusting input width', searchWidth, settings.glyphWidth); + module.verbose('Adjusting input width', searchWidth); $search.css('width', searchWidth + 'px'); } if (hasSearchValue || (isSearchMultiple && valueIsSet)) { @@ -2745,7 +2772,7 @@ return false; } module.debug('Setting selected menu item to', $selectedItem); - if (module.is.multiple()) { + if (module.is.multiple() && !keepSearchTerm) { module.remove.searchWidth(); } if (module.is.single()) { @@ -3438,7 +3465,7 @@ return settings.apiSettings && module.can.useAPI(); }, noApiCache: function () { - return settings.apiSettings && !settings.apiSettings.cache; + return tempDisableApiCache || (settings.apiSettings && !settings.apiSettings.cache); }, single: function () { return !module.is.multiple(); @@ -3448,7 +3475,7 @@ selectChanged = false ; $.each(mutations, function (index, mutation) { - if ($(mutation.target).is('select, option, optgroup') || $(mutation.addedNodes).is('select')) { + if ($(mutation.target).is('option, optgroup') || $(mutation.addedNodes).is('select') || ($(mutation.target).is('select') && mutation.type !== 'attributes')) { selectChanged = true; return false; @@ -3720,12 +3747,12 @@ show: function () { module.verbose('Delaying show event to ensure user intent'); clearTimeout(module.timer); - module.timer = setTimeout(module.show, settings.delay.show); + module.timer = setTimeout(function () { module.show(); }, settings.delay.show); }, hide: function () { module.verbose('Delaying hide event to ensure user intent'); clearTimeout(module.timer); - module.timer = setTimeout(module.hide, settings.delay.hide); + module.timer = setTimeout(function () { module.hide(); }, settings.delay.hide); }, }, @@ -3757,7 +3784,7 @@ return text.replace(regExp.escape, '\\$&'); }, - htmlEntities: function (string) { + htmlEntities: function (string, forceAmpersand) { var badChars = /["'<>`]/g, shouldEscape = /["&'<>`]/, @@ -3773,7 +3800,7 @@ } ; if (shouldEscape.test(string)) { - string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&'); + string = string.replace(forceAmpersand ? /&/g : /&(?![\d#a-z]{1,12};)/gi, '&'); return string.replace(badChars, escapedChar); } @@ -3851,7 +3878,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -3864,9 +3891,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { @@ -3991,6 +4015,7 @@ forceSelection: false, // force a choice on blur with search selection allowAdditions: false, // whether multiple select should allow user added values + keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection ignoreCase: false, // whether to consider case sensitivity when creating labels ignoreSearchCase: true, // whether to consider case sensitivity when filtering items hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value @@ -4010,8 +4035,6 @@ duration: 200, // duration of transition displayType: false, // displayType of transition - glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width - headerDivider: true, // whether option headers should have an additional divider line underneath when converted from ").addClass(h.search).prop("autocomplete",M.is.chrome()?"fomantic-search":"off"),0").attr("class",T.attr("class")).addClass(h.selection).addClass(h.dropdown).html(F.dropdown(e,l,m.preserveHTML,m.className)).insertBefore(T),T.hasClass(h.multiple)&&!1===T.prop("multiple")&&(M.error(d.missingMultiple),T.prop("multiple",!0)),T.is("[multiple]")&&M.set.multiple(),T.prop("disabled")&&(M.debug("Disabling dropdown"),y.addClass(h.disabled)),T.is("[required]")&&(m.forceSelection=!0),m.allowTab||T.removeAttr("tabindex"),T.prop("required",!1).removeAttr("class").detach().prependTo(y)),M.refresh()},menu:function(e){k.html(F.menu(e,l,m.preserveHTML,m.className)),D=k.find(b.item),I=m.hideDividers?D.parent().children(b.divider):Z()},reference:function(){M.debug("Dropdown behavior was called on select, replacing with closest dropdown"),y=y.parent(b.dropdown),V=y.data(w),R=y[0],M.refresh(),M.setup.returnedObject()},returnedObject:function(){var e=W.slice(0,z),t=W.slice(z+1);W=e.add(y).add(t)}},refresh:function(){M.refreshSelectors(),M.refreshData()},refreshItems:function(){D=k.find(b.item),I=m.hideDividers?D.parent().children(b.divider):Z()},refreshSelectors:function(){M.verbose("Refreshing selector cache"),x=y.find(b.text),S=y.find(b.search),T=y.find(b.input),N=y.find(b.icon),L=0"),Z.each(e,function(e,t){var n=m.templates.deQuote(t[l.value]),i=m.templates.escape(t[l.name]||"",m.preserveHTML);T.append('")}),M.observe.select())}},event:{paste:function(e){var t,n,i,a,o,s=(e.originalEvent.clipboardData||ee.clipboardData).getData("text").split(m.delimiter),r=[];s.forEach(function(e){!1===M.set.selected(M.escape.htmlEntities(e.trim()),null,!0,!0)&&r.push(e)}),e.preventDefault(),0 modified, recreating menu"),M.disconnect.selectObserver(),M.refresh(),M.setup.select(),M.set.selected(),M.observe.select())}},menu:{mutation:function(e){var e=e[0],t=e.addedNodes?Z(e.addedNodes[0]):Z(!1),e=e.removedNodes?Z(e.removedNodes[0]):Z(!1),t=t.add(e),e=t.is(b.addition)||0=m.maxSelections?(M.debug("Maximum selection count reached"),m.useLabels&&(D.addClass(h.filtered),M.add.message(f.maxSelections)),!0):(M.verbose("No longer at maximum selection count"),M.remove.message(),M.remove.filteredItem(),M.is.searchSelection()&&M.filterItems(),!1))},disabled:function(){S.attr("tabindex",M.is.disabled()?-1:0)}},restore:{defaults:function(e){M.clear(e),M.restore.defaultText(),M.restore.defaultValue()},defaultText:function(){var e=M.get.defaultText();e===M.get.placeholderText?(M.debug("Restoring default placeholder text",e),M.set.placeholderText(e)):(M.debug("Restoring default text",e),M.set.text(e))},placeholderText:function(){M.set.placeholderText()},defaultValue:function(){var e=M.get.defaultValue();void 0!==e&&(M.debug("Restoring default value",e),""!==e?(M.set.value(e),M.set.selected()):(M.remove.activeItem(),M.remove.selectedItem()))},labels:function(){m.allowAdditions&&(m.useLabels||(M.error(d.labels),m.useLabels=!0),M.debug("Restoring selected values"),M.create.userLabels()),M.check.maxSelections()},selected:function(){M.restore.values(),M.is.multiple()?(M.debug("Restoring previously selected values and labels"),M.restore.labels()):M.debug("Restoring previously selected values")},values:function(){M.set.initialLoad(),m.apiSettings&&m.saveRemoteData&&M.get.remoteValues()?M.restore.remoteValues():M.set.selected();var e=M.get.value();!e||""===e||Array.isArray(e)&&0===e.length?T.addClass(h.noselection):T.removeClass(h.noselection),M.remove.initialLoad()},remoteValues:function(){var e=M.get.remoteValues();M.debug("Recreating selected from session data",e),e&&(M.is.single()?Z.each(e,function(e,t){M.set.text(t)}):Z.each(e,function(e,t){M.add.label(e,t)}))}},read:{remoteData:function(e){if(void 0!==ee.Storage)return void 0!==(e=sessionStorage.getItem(e+i))&&e;M.error(d.noStorage)}},save:{defaults:function(){M.save.defaultText(),M.save.placeholderText(),M.save.defaultValue()},defaultValue:function(){var e=M.get.value();M.verbose("Saving default value as",e),y.data(p.defaultValue,e)},defaultText:function(){var e=M.get.text();M.verbose("Saving default text as",e),y.data(p.defaultText,e)},placeholderText:function(){var e;!1!==m.placeholder&&x.hasClass(h.placeholder)&&(e=M.get.text(),M.verbose("Saving placeholder text as",e),y.data(p.placeholderText,e))},remoteData:function(e,t){void 0===ee.Storage?M.error(d.noStorage):(M.verbose("Saving remote data to session storage",t,e),sessionStorage.setItem(t+i,e))}},clear:function(e){M.is.multiple()&&m.useLabels?M.remove.labels(y.find(b.label),e):(M.remove.activeItem(),M.remove.selectedItem(),M.remove.filteredItem()),M.set.placeholderText(),M.clearValue(e)},clearValue:function(e){M.set.value("",null,null,e)},scrollPage:function(e,t){var t=t||M.get.selectedItem(),n=t.closest(b.menu),i=n.outerHeight(),a=n.scrollTop(),o=D.eq(0).outerHeight(),i=Math.floor(i/o),a="up"===e?a-o*i:a+o*i,o=D.not(b.unselectable),i="up"===e?o.index(t)-i:o.index(t)+i,i=("up"===e?0<=i:i").addClass(h.label).attr("data-"+p.value,o).html(F.label(o,t,m.preserveHTML,m.className)),i=m.onLabelCreate.call(i,o,t),M.has.label(e)?M.debug("User selection already exists, skipping",o):(m.label.variation&&i.addClass(m.label.variation),!0===n&&m.label.transition?(M.debug("Animating in label",i),i.addClass(h.hidden).insertBefore(a).transition({animation:m.label.transition,debug:m.debug,verbose:m.verbose,silent:m.silent,duration:m.label.duration})):(M.debug("Adding selection label",i),i.insertBefore(a)))},message:function(e){var t=k.children(b.message),e=m.templates.message(M.add.variables(e));0").html(e).addClass(h.message).appendTo(k)},optionValue:function(e){var t=M.escape.value(e);0").prop("value",t).addClass(h.addition).text(e).appendTo(T),M.verbose("Adding user addition as an