@nightshadeui/core 2.0.0-dev.3

package/src/InputBase.vue

@@ -0,0 +1,278 @@
+<template>
+    <component
+        :is="tagName"
+        class="InputBase"
+        :class="[
+            `InputBase-${effectiveStyle.kind}`,
+            `input-kind-${effectiveStyle.kind}`,
+            `InputBase-${effectiveStyle.size}`,
+            {
+                'InputBase-fixed-height': fixedHeight,
+                'InputBase-shadow': effectiveStyle.shadow,
+                'InputBase-round': effectiveStyle.round,
+                'InputBase-disabled': disabled,
+                'InputBase-force-focus': forceFocus,
+                'InputBase-force-hover': forceHover,
+            }
+        ]"
+        @mouseenter="hover = true"
+        @mouseleave="hover = false"
+        @focusin="focus = true"
+        @focusout="focus = false">
+        <template v-if="label">
+            <Tab
+                v-if="labelStyle === 'tab'"
+                class="Label TabLabel"
+                :label="label" />
+            <div
+                v-if="labelStyle === 'text'"
+                class="Label TextLabel">
+                {{ label }}
+            </div>
+            <div
+                v-if="labelStyle === 'inline'"
+                class="Label InlineLabel">
+                {{ label }}
+            </div>
+        </template>
+        <div class="InputElement Container">
+            <slot />
+        </div>
+    </component>
+</template>
+
+<script>
+import Tab from './Tab.vue';
+
+export default {
+
+    components: {
+        Tab,
+    },
+
+    props: {
+        tagName: { default: 'label' },
+        kind: { type: String, default: 'base' },
+        label: { type: String },
+        labelStyle: { type: String, default: 'inline' },
+
+        size: { type: String, default: 'normal' },
+        fixedHeight: { type: Boolean, default: true },
+        shadow: { type: Boolean, default: false },
+        round: { type: Boolean, default: false },
+
+        disabled: { type: Boolean, default: false },
+        forceFocus: { type: Boolean, default: false },
+        forceHover: { type: Boolean, default: false },
+
+        hoverOverrides: { type: Object },
+        focusOverrides: { type: Object },
+    },
+
+    data() {
+        return {
+            hover: false,
+            focus: false,
+        };
+    },
+
+    computed: {
+
+        baseStyle() {
+            return {
+                kind: this.kind,
+                size: this.size,
+                shadow: this.shadow,
+                round: this.round,
+                labelStyle: this.labelStyle,
+            };
+        },
+
+        effectiveStyle() {
+            const {
+                baseStyle,
+                hoverOverrides = {},
+                focusOverrides = {},
+                hover,
+                focus,
+                forceHover,
+                forceFocus
+            } = this;
+            const style = Object.assign({}, baseStyle);
+            if (hover || forceHover) {
+                Object.assign(style, hoverOverrides);
+            }
+            if (focus || forceFocus) {
+                Object.assign(style, focusOverrides);
+            }
+            return style;
+        },
+    }
+
+};
+</script>
+
+<style scoped>
+.InputBase {
+    --InputBase-size: var(--input-size);
+    --InputBase-padding: var(--sp1-5);
+    --InputBase-gap: var(--sp);
+    --InputBase-font-size: var(--font-size);
+
+    --InputBase-text-color: var(--text-color);
+    --InputBase-surface: var(--base-color);
+
+    --InputBase-outline-color: transparent;
+    --InputBase-outline-size: var(--input-outline-size);
+    --InputBase-outline-offset: var(--input-outline-offset);
+
+    --InputBase-border-size: var(--input-border-size);
+    --InputBase-border-color: var(--input-border-color);
+    --InputBase-border-radius: var(--border-radius);
+
+    --InputBase-label-color: var(--input-label-color);
+    --InputBase-label-font-size: var(--font-size-s);
+    --InputBase-tab-surface-color: var(--input-surface-color-top);
+    --InputBase-tab-text-color: var(--input-surface-color-text);
+
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    outline: 0;
+    z-index: var(--input-z);
+}
+
+.Container {
+    position: relative;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--InputBase-padding);
+    gap: var(--InputBase-gap);
+    width: 100%;
+    min-height: var(--InputBase-size);
+
+    color: var(--InputBase-text-color);
+    background: var(--InputBase-surface);
+
+    outline: var(--InputBase-outline-size) solid var(--InputBase-outline-color);
+    outline-offset: var(--InputBase-outline-offset);
+
+    border: var(--InputBase-border-size) solid var(--InputBase-border-color);
+    border-radius: var(--InputBase-border-radius);
+
+    font-size: var(--InputBase-font-size);
+
+    transition: color .3s, outline .3s, border-radius .3s, filter .3s;
+}
+
+/* States */
+
+.InputBase:not(.InputBase-disabled):focus-within, .InputBase.InputBase-force-focus {
+    z-index: 10;
+    --InputBase-outline-color: var(--input-focus-light-color);
+    --InputBase-border-color: var(--input-focus-medium-color);
+    --InputBase-label-color: var(--input-focus-medium-color);
+    /* --InputBase-tab-surface-color: var(--input-focus-light-color); */
+    /* --InputBase-tab-text-color: var(--input-surface-text-color); */
+}
+
+.InputBase-disabled .Container {
+    --InputBase-surface: var(--color-base-100);
+    opacity: .6;
+    filter: saturate(40%);
+    cursor: not-allowed;
+}
+
+/* Styles */
+
+.InputBase-fixed-height .Container {
+    height: var(--InputBase-size);
+}
+
+.InputBase-round {
+    --InputBase-border-radius: var(--border-radius-m);
+}
+
+.InputBase-shadow .Container {
+    box-shadow:
+        0 0 5px -1px var(--shadow-color-light) inset;
+}
+
+/* Sizes */
+
+.InputBase-small {
+    --InputBase-size: var(--input-size-s);
+    --InputBase-font-size: var(--font-size-s);
+    --InputBase-label-font-size: var(--font-size-xs);
+    --InputBase-padding: var(--sp);
+}
+
+.InputBase-large {
+    --InputBase-size: var(--input-size-l);
+    --InputBase-font-size: var(--font-size-l);
+    --InputBase-padding: var(--sp2);
+}
+
+/* Labels */
+
+.Label {
+    font-size: var(--InputBase-label-font-size);
+    max-width: calc(100% - 2 * var(--sp2));
+}
+
+.Label.TabLabel {
+    align-self: flex-start;
+    position: relative;
+    z-index: 0;
+    margin: 0 var(--sp2);
+
+    --Tab-surface: var(--InputBase-tab-surface-color);
+    --Tab-color: var(--InputBase-tab-text-color);
+    --Tab-size: calc(.75 * var(--InputBase-size));
+    --Tab-cap-size: calc(.75 * var(--InputBase-size));
+}
+
+.Label.TextLabel {
+    margin: 0 var(--InputBase-padding);
+    line-height: 1.5;
+    height: var(--sp3);
+
+    color: var(--InputBase-text-color);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.Label.InlineLabel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 2;
+    margin: 0 var(--InputBase-padding);
+    padding: 0 2px;
+
+    color: var(--InputBase-label-color);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.Label.InlineLabel::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: var(--sp);
+    transform: translateY(-50%);
+    z-index: -1;
+
+    background: var(--InputBase-surface);
+}
+</style>

package/src/InputGroup.vue

@@ -0,0 +1,36 @@
+<template>
+    <component
+        :is="tagName"
+        class="InputGroup">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+
+    props: {
+        tagName: { type: String, default: 'div' },
+    }
+
+};
+</script>
+
+<style scoped>
+.InputGroup {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: end;
+}
+
+.InputGroup:deep(> .InputElement:not(:first-child)) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    margin-left: calc(-1 * var(--input-border-size));
+}
+
+.InputGroup:deep(> .InputElement:not(:last-child)) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+</style>

package/src/InputSelect.vue

@@ -0,0 +1,154 @@
+<template>
+    <InputBase
+        class="InputSelect"
+        v-bind="{
+            ...$props
+        }"
+        tabindex="0"
+        @click="show()">
+        <slot name="before" />
+        <i
+            v-if="itemIcon"
+            class="Icon"
+            :class="itemIcon" />
+        <span
+            v-if="selectedItem"
+            class="Value">
+            {{ itemTitle }}
+        </span>
+        <span
+            v-if="!selectedItem"
+            class="Placeholder">
+            {{ placeholder }}
+        </span>
+        <div
+            ref="icon"
+            class="DropdownIcon">
+            <slot name="iconDropdown">
+                <i :class="iconDropdown" />
+            </slot>
+        </div>
+        <ContextMenu
+            v-if="!disabled && menuShown"
+            anchorRef="icon"
+            :items="getMenuItems()"
+            :search="search"
+            :overlayShown="false"
+            @hide="menuShown = false" />
+        <slot name="after" />
+    </InputBase>
+</template>
+
+<script>
+import InputBase from './InputBase.vue';
+
+export default {
+
+    props: {
+        ...InputBase.props,
+        modelValue: {},
+        items: { type: Array, default: () => [] },
+        placeholder: { type: String },
+        readonly: { type: Boolean },
+        search: { type: Boolean, default: false },
+    },
+
+    emits: [
+        'focus',
+        'blur',
+        'update:modelValue'
+    ],
+
+    data() {
+        return {
+            menuShown: false,
+        };
+    },
+
+    computed: {
+
+        selectedItem() {
+            return this.items.find(item => (item.value ?? item) === this.modelValue);
+        },
+
+        itemTitle() {
+            const { selectedItem } = this;
+            return selectedItem?.title ?? selectedItem;
+        },
+
+        itemIcon() {
+            const { selectedItem } = this;
+            return selectedItem?.icon;
+        },
+
+        iconDropdown() {
+            return this.$nightshadeIcons?.dropdown ?? 'fas fa-angle-down';
+        },
+
+    },
+
+    methods: {
+
+        onInput(ev) {
+            this.$emit('update:modelValue', ev.target.value);
+        },
+
+        selectValue(value) {
+            this.$emit('update:modelValue', value);
+            this.menuShown = false;
+        },
+
+        getMenuItems() {
+            return this.items.map(item => {
+                const title = typeof item === 'string' ? item : item.title;
+                const value = typeof item === 'string' ? item : item.value;
+                return {
+                    title,
+                    checked: value === this.modelValue,
+                    disabled: item.disabled,
+                    description: item.description,
+                    icon: item.icon ?? undefined,
+                    activate: () => {
+                        if (this.disabled) {
+                            return;
+                        }
+                        this.selectValue(value);
+                    }
+                };
+            });
+        },
+
+        show() {
+            if (!this.disabled) {
+                this.menuShown = true;
+            }
+        }
+
+    }
+
+};
+</script>
+
+<style scoped>
+.Icon {
+    opacity: 0.5;
+    width: var(--sp2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: var(--sphalf);
+}
+
+.Value, .Placeholder {
+    line-height: var(--input-size);
+    flex: 1 1 auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.DropdownIcon {
+    color: var(--color-text-2);
+    font-size: var(--font-size-small);
+}
+</style>

package/src/InputText.vue

@@ -0,0 +1,87 @@
+<template>
+    <InputBase
+        class="InputText"
+        v-bind="{
+            ...$props
+        }">
+        <slot name="before" />
+        <input
+            ref="input"
+            :value="modelValue"
+            :type="type"
+            :placeholder="placeholder"
+            :readonly="readonly"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :step="step"
+            autocomplete="off"
+            @input="onInput($event)"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)" />
+        <slot name="after" />
+    </InputBase>
+</template>
+
+<script>
+import InputBase from './InputBase.vue';
+
+export default {
+
+    props: {
+        ...InputBase.props,
+        modelValue: { type: [String, Number] },
+        type: { type: String },
+        placeholder: { type: String },
+        min: { type: Number },
+        max: { type: Number },
+        step: { type: Number },
+        autoFocus: { type: Boolean },
+        readonly: { type: Boolean },
+    },
+
+    emits: [
+        'focus',
+        'blur',
+        'input',
+        'update:modelValue'
+    ],
+
+    mounted() {
+        if (this.autoFocus) {
+            this.$refs.input?.focus();
+        }
+    },
+
+    methods: {
+
+        onInput(ev) {
+            this.$emit('update:modelValue', ev.target.value);
+        }
+
+    }
+
+};
+</script>
+
+<style scoped>
+.InputText {
+    --InputBase-padding: var(--sp1-5);
+}
+
+input, textarea {
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    flex: 1;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    min-width: 0;
+    outline: 0;
+    user-select: text;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+}
+</style>

package/src/InputTextarea.vue

@@ -0,0 +1,114 @@
+<template>
+    <InputBase
+        class="InputTextarea"
+        v-bind="{
+            ...$props
+        }"
+        :fixedHeight="false">
+        <slot name="before" />
+        <textarea
+            ref="input"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :readonly="readonly"
+            :disabled="disabled"
+            :rows="rows"
+            resize="none"
+            autocomplete="off"
+            @input="onInput($event)"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)" />
+        <slot name="after" />
+    </InputBase>
+</template>
+
+<script>
+import InputBase from './InputBase.vue';
+
+export default {
+
+    props: {
+        ...InputBase.props,
+        modelValue: { type: String },
+        placeholder: { type: String },
+        rows: { type: Number },
+        autoSize: { type: Boolean, default: true },
+        autoFocus: { type: Boolean },
+        readonly: { type: Boolean },
+    },
+
+    emits: [
+        'focus',
+        'blur',
+        'input',
+        'update:modelValue'
+    ],
+
+    watch: {
+
+        modelValue: {
+            handler() {
+                const textarea = this.$refs.input;
+                if (this.autoSize && textarea) {
+                    textarea.style.height = 'auto';
+                    textarea.style.height = textarea.scrollHeight + 'px';
+                }
+            },
+        },
+
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            const textarea = this.$refs.input;
+            if (this.autoFocus) {
+                textarea.focus();
+            }
+            if (this.autoSize) {
+                textarea.style.height = textarea.scrollHeight + 'px';
+                textarea.style.overflowY = 'hidden';
+            }
+        });
+    },
+
+    methods: {
+
+        onInput(ev) {
+            this.$emit('update:modelValue', ev.target.value);
+        },
+
+    }
+
+};
+</script>
+
+<style scoped>
+.InputTextarea {
+    --InputBase-padding: var(--sp1) var(--sp1-5);
+}
+
+input, textarea {
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    flex: 1;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    min-width: 0;
+    outline: 0;
+    user-select: text;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+    resize: none;
+}
+
+.InputBase:deep(.Container) {
+    overflow-y: auto;
+}
+
+textarea {
+    align-self: flex-start;
+}
+</style>

package/src/Sizer.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="Sizer" />
+</template>
+
+<script>
+export default {
+};
+</script>
+
+<style scoped>
+.Sizer {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+}
+</style>