selectic 3.0.21 → 3.1.0

package/src/Icon.tsx

@@ -0,0 +1,199 @@
+/* File Purpose:
+ * Display the wanted icon.
+ */
+
+import { Component, h, Prop, Vue, Watch } from 'vtyx';
+
+import Store, { IconFamily, IconKey, IconValue } from './Store';
+import IconCaretDown from './icons/caret-down';
+import IconCaretUp from './icons/caret-up';
+import IconCheck from './icons/check';
+import IconQuestion from './icons/question';
+import IconSearch from './icons/search';
+import IconSpinner from './icons/spinner';
+import IconStrikeThrough from './icons/strikeThrough';
+import IconTimes from './icons/times';
+
+export interface Props {
+    store: Store;
+    icon: string;
+    spin?: boolean;
+    title?: string;
+}
+
+@Component
+export default class Icon extends Vue<Props> {
+
+    /* {{{ props */
+
+    @Prop()
+    private store: Store;
+
+    @Prop()
+    private icon: IconKey;
+
+    @Prop()
+    private spin?: boolean;
+
+    @Prop()
+    private title?: string;
+
+    /* }}} */
+    /* {{{ computed */
+
+    private get rawIconValue(): IconValue {
+        const key = this.icon;
+        const icon = this.store.data.icons[key];
+
+        if (icon === undefined) {
+            return key;
+        }
+
+        return icon;
+    }
+
+    private get family(): IconFamily {
+        const iconValue = this.rawIconValue;
+
+        if (iconValue.startsWith('selectic:')) {
+            return 'selectic';
+        }
+        if (iconValue.startsWith('raw:')) {
+            return 'raw';
+        }
+
+        return this.store.data.iconFamily;
+    }
+
+    private get iconValue(): string {
+        const key = this.rawIconValue;
+
+        if (key.includes(':')) {
+            /* This is to retrieve value from string such as
+             * 'selectic:spinner:spin' (and get only 'spinner') */
+            const value = key.split(':');
+
+            return value[1];
+        }
+
+        return key;
+    }
+
+    private get vueIcon() {
+        switch(this.icon) {
+            case 'caret-down':
+                return IconCaretDown;
+            case 'caret-up':
+                return IconCaretUp;
+            case 'check':
+                return IconCheck;
+            case 'search':
+                return IconSearch;
+            case 'spinner':
+                return IconSpinner;
+            case 'strikethrough':
+                return IconStrikeThrough;
+            case 'times':
+                return IconTimes;
+            case 'question':
+            default:
+                return IconQuestion;
+        }
+    }
+
+    private get spinClass(): string {
+        let value = this.store.data.icons.spin;
+
+        if (typeof value === 'string') {
+            if (value.startsWith('selectic:')) {
+                return 'selectic-spin';
+            }
+            if (value.includes(':')) {
+                value = value.split(':')[1] ?? 'spin';
+            }
+        } else {
+            value = 'spin';
+        }
+        const family = this.family;
+
+        let prefix = '';
+
+        switch (family) {
+            case 'font-awesome-4':
+                prefix = 'fa-';
+                break;
+            case 'font-awesome-5':
+                prefix = 'fa-';
+                break;
+            case 'font-awesome-6':
+                prefix = 'fa-';
+                break;
+            case '':
+            case 'selectic':
+                prefix = 'selectic-';
+                break;
+            case 'raw':
+                prefix = '';
+                break;
+            default:
+                prefix = 'selectic-';
+        }
+
+        return `${prefix}${value}`;
+    }
+
+    private get spinActive(): boolean {
+        return this.spin || this.rawIconValue.endsWith(':spin');
+    }
+
+    /* }}} */
+
+    private renderInnerIcon() {
+        const component = this.vueIcon;
+
+        return h(
+            component,
+            {
+                class: {
+                    'selectic__icon': true,
+                    [this.spinClass]: this.spinActive,
+                },
+                title: this.title,
+            }
+        );
+    }
+
+    private renderSpanIcon(prefix: string) {
+        const classSpin = this.spinActive && this.spinClass || '';
+
+        return (
+            <span
+                class={`${prefix}${this.iconValue} ${classSpin}`}
+                title={this.title}
+            />
+        );
+    }
+
+    public render() {
+        const family = this.family;
+
+        switch (family) {
+            case '':
+            case 'selectic':
+                return this.renderInnerIcon();
+            case 'font-awesome-4':
+                return this.renderSpanIcon('fa fa-fw fa-');
+            case 'font-awesome-5':
+                return this.renderSpanIcon('fas fa-fw fa-');
+            case 'font-awesome-4':
+                return this.renderSpanIcon('fa-solid fa-fw fa-');
+            case 'raw':
+                return this.renderSpanIcon('');
+            default:
+                if (family.startsWith('prefix:')) {
+                    return this.renderSpanIcon(family.slice(7));
+                }
+                return this.renderInnerIcon();
+        }
+    }
+}

package/src/List.tsx

@@ -10,6 +10,7 @@ import Store, {
     OptionItem,
     OptionId,
 } from './Store';
+import Icon from './Icon';
 
 export interface Props {
     store: Store;
@@ -71,7 +72,7 @@ export default class List extends Vue<Props> {
                 text: '',
                 disabled: true,
                 selected: false,
-                icon: 'fa fa-spinner fa-spin',
+                icon: 'current:spinner:spin',
                 isGroup: false,
             });
         }
@@ -141,7 +142,11 @@ export default class List extends Vue<Props> {
     /* {{{ methods */
 
     private click(option: OptionItem) {
-        if (option.disabled || option.isGroup) {
+        if (option.disabled) {
+            return;
+        }
+        if (option.isGroup) {
+            this.store.selectGroup(option.id, !option.selected);
             return;
         }
 
@@ -265,6 +270,7 @@ export default class List extends Vue<Props> {
                         }}
                         class={['selectic-item', option.className || '', {
                             'selected': option.selected,
+                            'selectable': unref(this.store.allowGroupSelection) && option.isGroup && !option.disabled,
                             'selectic-item__active': idx + this.startIndex === this.store.state.activeItemIdx,
                             'selectic-item__disabled': !!option.disabled,
                             'selectic-item__exclusive': !!option.exclusive,
@@ -276,12 +282,12 @@ export default class List extends Vue<Props> {
                         key={'selectic-item-' + (idx + this.startIndex)}
                     >
                     {this.isMultiple && (
-                        <span
-                            class="fa fa-fw fa-check selectic-item_icon"
-                        ></span>
+                        <Icon icon="check" store={this.store} class="selectic-item_icon" />
                     )}
                     {option.icon && (
-                        <span class={option.icon}></span>
+                        option.icon.includes(':')
+                            ? <Icon icon={option.icon} store={this.store} />
+                            : <Icon icon={`raw:${option.icon}`} store={this.store} />
                     )}
                         {option.text}
                     </li>

package/src/MainInput.tsx

@@ -5,6 +5,7 @@
 
 import {Vue, Component, Prop, Watch, h} from 'vtyx';
 import Store, {OptionId, OptionItem} from './Store';
+import Icon from './Icon';
 
 export interface Props {
     store: Store;
@@ -379,8 +380,9 @@ export default class MainInput extends Vue<Props> {
                     ref="selectedItems"
                 >
                     {this.isSelectionReversed && (
-                        <span
-                            class="fa fa-strikethrough selectic-input__reverse-icon"
+                        <Icon
+                            icon="strikethrough"
+                            store={this.store} class="selectic-input__reverse-icon"
                             title={this.reverseSelectionLabel}
                         />
                     )}
@@ -400,12 +402,14 @@ export default class MainInput extends Vue<Props> {
                                     { item.text }
                                 </span>
                                 {!this.isDisabled && (
-                                    <span
-                                        class="fa fa-times selectic-input__selected-items__icon"
+                                    <Icon
+                                        icon="times"
+                                        class="selectic-input__selected-items__icon"
+                                        store={this.store}
                                         on={{
                                             'click.prevent.stop': () => this.selectItem(item.id),
                                         }}
-                                    ></span>
+                                    />
                                 )}
                             </div>
                         )
@@ -421,11 +425,13 @@ export default class MainInput extends Vue<Props> {
                 </div>
             )}
             {this.showClearAll && (
-                <span
-                    class="fa fa-times selectic-input__clear-icon"
+                <Icon
+                    icon="times"
+                    class="selectic-input__clear-icon"
                     title={this.clearedLabel}
+                    store={this.store}
                     on={{ 'click.prevent.stop': this.clearSelection }}
-                ></span>
+                />
             )}
             </div>
             <div
@@ -438,9 +444,7 @@ export default class MainInput extends Vue<Props> {
                     'click.prevent.stop': () => this.toggleFocus(),
                 }}
             >
-                <span
-                    class="fa fa-caret-down selectic-icon"
-                ></span>
+                <Icon icon="caret-down" class="selectic-icon" store={this.store} />
             </div>
         </div>
         );