@nightshadeui/core 2.0.0-dev.3 → 2.0.0

package/src/InputGroup.vue

@@ -1,36 +0,0 @@
-<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

@@ -1,154 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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

@@ -1,114 +0,0 @@
-<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

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

package/src/Tab.vue

@@ -1,113 +0,0 @@
-<template>
-    <div
-        class="Tab"
-        :class="[
-            `Tab-${dir}`,
-            `Tab-${orientation}`,
-        ]">
-        <TabCap
-            class="TabCap"
-            :dir="dir"
-            type="start" />
-        <div class="Content">
-            <slot>
-                <div
-                    v-if="label"
-                    class="TabLabel"
-                    :title="label">
-                    {{ label }}
-                </div>
-            </slot>
-        </div>
-        <TabCap
-            class="TabCap"
-            :dir="dir"
-            type="end" />
-    </div>
-</template>
-
-<script>
-export default {
-
-    props: {
-        dir: { type: String, default: 'top' },
-        label: { type: String },
-    },
-
-    computed: {
-
-        orientation() {
-            return this.dir === 'top' || this.dir === 'bottom' ? 'h' : 'v';
-        },
-
-    },
-
-};
-</script>
-
-<style scoped>
-.Tab {
-    --Tab-size: var(--sp3);
-    --Tab-cap-size: var(--sp4);
-    --Tab-surface: var(--color-base-1);
-    --Tab-color: var(--color-text-0);
-    --Tab-shadow-size: 0.5px;
-    --Tab-shadow-color: var(--shadow-color-medium);
-    --Tab-shadow-offset-x: 0;
-    --Tab-shadow-offset-y: 0;
-
-    display: flex;
-    cursor: pointer;
-    position: relative;
-    filter: drop-shadow(var(--Tab-shadow-offset-x) var(--Tab-shadow-offset-y) var(--Tab-shadow-size) var(--Tab-shadow-color));
-}
-
-.TabCap, .Content {
-    position: relative;
-    z-index: 2;
-}
-
-.Content {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    background: var(--Tab-surface);
-    color: var(--Tab-color);
-}
-
-.TabLabel {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.Tab-h {
-    flex-flow: row;
-    height: var(--Tab-size);
-}
-
-.Tab-v {
-    flex-flow: column;
-    width: var(--Tab-size);
-}
-
-.Tab-v .Content {
-    writing-mode: vertical-lr;
-    text-orientation: sideways-right;
-    transform: rotate(180deg);
-    transform-origin: 50% 50%;
-}
-
-.TabCap {
-    flex: 0 0 var(--Tab-cap-size);
-    fill: var(--Tab-surface);
-}
-
-.Tab-h .TabCap {
-    width: var(--Tab-cap-size);
-}
-
-.Tab-v .TabCap {
-    height: var(--Tab-cap-size);
-}
-</style>

package/src/TabCap.vue

@@ -1,42 +0,0 @@
-<template>
-    <svg
-        class="TabCap"
-        :class="[
-            `TabCap-${dir}`,
-            `TabCap-${type}`,
-        ]"
-        viewBox="0 0 32 32"
-        preserveAspectRatio="none">
-        <path d="M0 32 C 16 32 16 0 32 0 L 32 32 z" />
-    </svg>
-</template>
-
-<script>
-export default {
-
-    props: {
-        dir: { type: String, default: 'top' },
-        type: { type: String, default: 'start' },
-    },
-
-};
-</script>
-
-<style scoped>
-.TabCap {}
-
-path {
-    transform-origin: 50% 50%;
-    stroke: none;
-}
-
-.TabCap-top.TabCap-start path { transform: scale(1, 1) }
-.TabCap-top.TabCap-end path { transform: scale(-1, 1) }
-.TabCap-bottom.TabCap-start path { transform: scale(1, -1) }
-.TabCap-bottom.TabCap-end path { transform: scale(-1, -1) }
-
-.TabCap-right.TabCap-start path { transform: scale(1, 1) rotate(90deg) }
-.TabCap-right.TabCap-end path { transform: scale(-1, 1) rotate(-90deg) }
-.TabCap-left.TabCap-start path { transform: scale(1, -1) rotate(-90deg) }
-.TabCap-left.TabCap-end path { transform: scale(-1, -1) rotate(90deg) }
-</style>