update svelte-select

2023-07-14 22:00:38 +01:00 · 2023-07-14 22:00:38 +01:00 · 4737b08ee0
commit 4737b08ee0
parent bc5e3ab844
8 changed files with 166 additions and 108 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -12,7 +12,7 @@
        "sirv-cli": "^1.0.0",
        "svelte-emoji-selector": "^1.0.1",
        "svelte-router-spa": "^6.0.2",
-        "svelte-select": "^3.17.0",
+        "svelte-select": "^5.6.1",
        "svelte-tooltip": "^1.2.0"
      },
      "devDependencies": {
@ -1577,6 +1577,19 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+      "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.3.1"
+      }
+    },
    "node_modules/@fortawesome/fontawesome-common-types": {
      "version": "0.2.35",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
@ -3113,6 +3126,15 @@
        "svelte-tabs": "^1.1.0"
      }
    },
+    "node_modules/svelte-floating-ui": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
+      "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.1.0",
+        "@floating-ui/dom": "^1.1.0"
+      }
+    },
    "node_modules/svelte-router-spa": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/svelte-router-spa/-/svelte-router-spa-6.0.2.tgz",
@ -3125,9 +3147,13 @@
      }
    },
    "node_modules/svelte-select": {
-      "version": "3.17.0",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-3.17.0.tgz",
-      "integrity": "sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA=="
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
+      "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1",
+        "svelte-floating-ui": "1.2.8"
+      }
    },
    "node_modules/svelte-tabs": {
      "version": "1.1.0",
@ -4419,6 +4445,19 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@floating-ui/core": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+      "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+      "requires": {
+        "@floating-ui/core": "^1.3.1"
+      }
+    },
    "@fortawesome/fontawesome-common-types": {
      "version": "0.2.35",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
@ -5572,6 +5611,15 @@
        "svelte-tabs": "^1.1.0"
      }
    },
+    "svelte-floating-ui": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
+      "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+      "requires": {
+        "@floating-ui/core": "^1.1.0",
+        "@floating-ui/dom": "^1.1.0"
+      }
+    },
    "svelte-router-spa": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/svelte-router-spa/-/svelte-router-spa-6.0.2.tgz",
@ -5581,9 +5629,13 @@
      }
    },
    "svelte-select": {
-      "version": "3.17.0",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-3.17.0.tgz",
-      "integrity": "sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA=="
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
+      "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
+      "requires": {
+        "@floating-ui/dom": "^1.2.1",
+        "svelte-floating-ui": "1.2.8"
+      }
    },
    "svelte-tabs": {
      "version": "1.1.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -28,7 +28,7 @@
    "sirv-cli": "^1.0.0",
    "svelte-emoji-selector": "^1.0.1",
    "svelte-router-spa": "^6.0.2",
-    "svelte-select": "^3.17.0",
+    "svelte-select": "^5.6.1",
    "svelte-tooltip": "^1.2.0"
  }
 }
--- a/frontend/src/components/PanelDropdown.svelte
+++ b/frontend/src/components/PanelDropdown.svelte
@ -1,14 +1,11 @@
 <label class="form-label">{label}</label>
-<div class="multiselect-super">
-  <Select placeholder="Select..." items={panels} optionIdentifier="panel_id" getOptionLabel={labelMapper}
-          getSelectionLabel={labelMapper} bind:selectedValue={selectedRaw}
-          on:select={update} on:clear={handleClear} {isMulti} {isSearchable}
-          placeholderAlwaysShow={true} />
-</div>
+
+<WrappedSelect placeholder="Select panel..." items={panels} optionIdentifier="panel_id" nameMapper={labelMapper}
+               bind:selectedValue={selectedRaw} on:select={update} on:clear={handleClear} {isMulti} {isSearchable} />

 <script>
-    import Select from 'svelte-select';
    import {onMount} from "svelte";
+    import WrappedSelect from "./WrappedSelect.svelte";

    export let label;
    export let panels;
--- a/frontend/src/components/WrappedSelect.svelte
+++ b/frontend/src/components/WrappedSelect.svelte
@ -0,0 +1,57 @@
+<Select {items}
+        bind:value={selectedValue}
+        on:select
+        searchable={searchable}
+        clearable={isClearable}
+        itemId={optionIdentifier}
+        debounceWait={loadOptionsInterval}
+        {loadOptions}
+        {placeholder}
+        {placeholderAlwaysShow}
+        multiple={isMulti}
+        --background="#2e3136"
+        --border="#2e3136"
+        --border-focused="0"
+        --border-hover="0"
+        --borderRadius="4px"
+        --item-hover-bg="#121212"
+        --list-background="#2e3136"
+        --item-color="white"
+        --multi-item-bg="#272727"
+        --multi-item-outline="0"
+        --multi-item-border-radius="16px"
+        --multi-item-padding="0 10px 0 15px"
+        --multi-item-clear-icon-color="#52616F"
+        --multi-item-height="32px"
+        --clear-icon-color="white"
+        --clear-select-color="white"
+        --input-color="white"
+        --font-size="16px">
+  <div slot="item" let:item>{nameMapper(item)}</div>
+  <div slot="selection" let:selection>{nameMapper(selection)}</div>
+</Select>
+
+<script>
+    import Select from "svelte-select";
+
+    export let items;
+    export let selectedValue;
+
+    export let isSearchable = true;
+    export let isClearable = true;
+    export let isMulti = false;
+    export let placeholder;
+    export let placeholderAlwaysShow = false;
+    export let loadOptions;
+    export let loadOptionsInterval;
+
+    export let optionIdentifier;
+    export let nameMapper = (x) => x;
+
+    let searchable = isSearchable && selectedValue == undefined;
+    $: selectedValue, updateSearchable();
+
+    function updateSearchable() {
+        searchable = isSearchable && selectedValue == undefined;
+    }
+</script>
--- a/frontend/src/components/form/RoleSelect.svelte
+++ b/frontend/src/components/form/RoleSelect.svelte
@ -2,18 +2,13 @@
  <label class="form-label">{label}</label>
 {/if}

-<div class="multiselect-super">
-  <Select placeholder="Search..." optionIdentifier="id" items={roles}
-          bind:selectedValue={value} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}/>
-</div>
+<WrappedSelect placeholder="Search..." optionIdentifier="id" items={roles}
+               bind:selectedValue={value} nameMapper={labelMapper}/>

 <script>
-    import Select from 'svelte-select';
-    import axios from "axios";
    import {onMount} from 'svelte'
    import {setDefaultHeaders} from '../../includes/Auth.svelte'
-    import {API_URL} from "../../js/constants";
-    import {notifyError, notifyRatelimit} from "../../js/util";
+    import WrappedSelect from "../WrappedSelect.svelte";

    export let label;
    export let roles = [];
--- a/frontend/src/components/form/UserSelect.svelte
+++ b/frontend/src/components/form/UserSelect.svelte
@ -2,18 +2,16 @@
  <label class="form-label">{label}</label>
 {/if}

-<div class="multiselect-super">
-  <Select placeholder="Search..." loadOptionsInterval={500} {loadOptions} optionIdentifier="id"
-          bind:selectedValue={value} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}/>
-</div>
+<WrappedSelect placeholder="Search..." loadOptionsInterval={500} {loadOptions} optionIdentifier="id"
+               bind:selectedValue={value} nameMapper={labelMapper}/>

 <script>
-    import Select from 'svelte-select';
    import axios from "axios";
    import {onMount} from 'svelte'
    import {setDefaultHeaders} from '../../includes/Auth.svelte'
    import {API_URL} from "../../js/constants";
    import {notifyError, notifyRatelimit} from "../../js/util";
+    import WrappedSelect from "../WrappedSelect.svelte";

    export let label;
    export let guildId;
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@ -5,29 +5,28 @@
            <div class="row">
                <div class="col-2">
                    <label class="form-label">Mention On Open</label>
-                    <div class="multiselect-super">
-                        <Select items={mentionItems}
-                                bind:selectedValue={selectedMentions}
-                                on:select={updateMentions}
-                                optionIdentifier="id"
-                                getSelectionLabel={mentionNameMapper}
-                                getOptionLabel={mentionNameMapper}
-                                placeholderAlwaysShow={true}
-                                isMulti={true} />
+                    <div class="col-1">
+                        <WrappedSelect items={mentionItems}
+                                       bind:selectedValue={selectedMentions}
+                                       on:select={updateMentions}
+                                       optionIdentifier="id"
+                                       nameMapper={mentionNameMapper}
+                                       placeholder="Select roles..."
+                                       isMulti={true} />
                    </div>
                </div>
                <div class="col-2">
                    <label class="form-label">Support Teams</label>
-                    <div class="multiselect-super">
-                        <Select items={teamsWithDefault}
-                                bind:selectedValue={selectedTeams}
-                                on:select={updateTeams}
-                                isSearchable={false}
-                                optionIdentifier="id"
-                                getSelectionLabel={nameMapper}
-                                getOptionLabel={nameMapper}
-                                isMulti={true} />
-                    </div>
+                    <WrappedSelect items={teamsWithDefault}
+                            bind:selectedValue={selectedTeams}
+                            on:select={updateTeams}
+                            optionIdentifier="id"
+                            nameMapper={nameMapper}
+                            placeholder="Select teams..."
+                            isMulti={true}>
+                        <div slot="item" let:item>{item.name}</div>
+                        <div slot="selection" let:selection>{selection.name}</div>
+                    </WrappedSelect>
                </div>
            </div>
            <div class="incomplete-row">
@ -105,9 +104,9 @@

                <div class="col-2" style="z-index: 1">
                    <label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
-                    <div id="emoji-pick-wrapper" class="row">
-                        <div class="col-2">
-                            <label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
+                    <div id="emoji-pick-wrapper" class="row" style="gap: 2%">
+                        <div class="col">
+                            <label class="form-label" style="margin-bottom: 0 !important; white-space: nowrap;">Custom Emoji</label>
                            <Toggle hideLabel
                                    toggledColor="#66bb6a"
                                    untoggledColor="#ccc"
@ -115,13 +114,12 @@
                                    on:toggle={handleEmojiTypeChange} />
                        </div>
                        {#if data.use_custom_emoji}
-                            <div class="multiselect-super">
-                                <Select items={emojis}
-                                        Item={EmojiItem}
+                            <div class="col-fill">
+                                <!--Item=EmojiItem-->
+                                <WrappedSelect items={emojis}
                                        selectedValue={data.emote}
                                        optionIdentifier="id"
-                                        getSelectionLabel={emojiNameMapper}
-                                        getOptionLabel={emojiNameMapper}
+                                        nameMapper={emojiNameMapper}
                                        placeholderAlwaysShow={true}
                                        on:select={handleCustomEmojiChange} />
                            </div>
@ -169,6 +167,7 @@
    import Checkbox from "../form/Checkbox.svelte";
    import Collapsible from "../Collapsible.svelte";
    import EmbedForm from "../EmbedForm.svelte";
+    import WrappedSelect from "../WrappedSelect.svelte";

    export let guildId;
    export let seedDefault = true;
@ -351,6 +350,11 @@
        height: 100%;
    }

+    .col {
+        display: flex;
+        flex-direction: column;
+    }
+
    .col-fill {
        display: flex;
        flex-direction: column;
@ -397,57 +401,11 @@
        min-height: 0 !important;
    }

-    .advanced-settings-show {
-        visibility: visible;
-        min-height: 297px;
-        margin-bottom: 10px;
-    }
-
    :global(.show-overflow) {
        overflow: visible;
    }

-    .inner {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        /*position: absolute;*/
-        height: 100%;
-        width: 100%;
-    }
-
-    .absolute {
-        position: absolute;
-    }
-
    #naming-scheme-wrapper {
        gap: 10px;
    }
-
-    :global(.multiselect-super) {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        --background: #2e3136;
-        --border: #2e3136;
-        --borderRadius: 4px;
-        --itemHoverBG: #121212;
-        --listBackground: #2e3136;
-        --itemColor: white;
-        --multiItemBG: #272727;
-        --multiItemActiveBG: #272727;
-        --multiClearFill: #272727;
-        --multiClearHoverFill: #272727;
-        --inputColor: white;
-        --inputFontSize: 16px;
-    }
-
-    :global(.multiselect-super > .selectContainer) {
-        width: 100%;
-    }
-
-    :global(.selectContainer > .multiSelect, .selectContainer > .multiSelect > input) {
-        cursor: pointer;
-    }
 </style>
--- a/frontend/src/views/Teams.svelte
+++ b/frontend/src/views/Teams.svelte
@ -20,9 +20,9 @@

          <div class="col-1" style="flex-direction: row">
            <div class="col-4" style="margin-right: 12px">
-              <div class="multiselect-super">
-                <Select isSearchable={false} isClearable={false} optionIdentifier="id" items={teams}
-                        bind:selectedValue={activeTeam} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}
+              <div class="col-1">
+                <WrappedSelect isSearchable={false} isClearable={false} optionIdentifier="id" items={teams} placeholder="Select a team..."
+                        bind:selectedValue={activeTeam} nameMapper={labelMapper}
                        on:select={updateActiveTeam}/>
              </div>
            </div>
@ -67,7 +67,7 @@
                </div>

                <div style="margin-left: 10px">
-                  <Button type="button" icon="fas fa-plus" disabled={selectedUser === undefined}
+                  <Button type="button" icon="fas fa-plus" disabled={selectedUser === null || selectedUser === undefined}
                          on:click={addUser}>Add To Team
                  </Button>
                </div>
@ -75,12 +75,12 @@

              <h3>Add Role</h3>
              <div class="user-select">
-                <div style="display: flex; flex: 1">
+                <div class="col-1" style="display: flex; flex: 1">
                  <RoleSelect {guildId} {roles} bind:value={selectedRole}/>
                </div>

                <div style="margin-left: 10px">
-                  <Button type="button" icon="fas fa-plus" disabled={selectedRole === undefined}
+                  <Button type="button" icon="fas fa-plus" disabled={selectedRole === null || selectedRole == undefined}
                          on:click={addRole}>Add To Team
                  </Button>
                </div>
@ -104,6 +104,7 @@
    import Select from 'svelte-select';
    import UserSelect from "../components/form/UserSelect.svelte";
    import RoleSelect from "../components/form/RoleSelect.svelte";
+    import WrappedSelect from "../components/WrappedSelect.svelte";

    export let currentRoute;
    let guildId = currentRoute.namedParams.id;
@ -152,7 +153,7 @@
        let entity = {
            id: selectedUser.id,
            type: 0,
-            name: `${selectedUser.username}#${selectedUser.discriminator}`
+            name: `${selectedUser.username}`
        }
        members = [...members, entity];
        selectedUser = undefined;