@nightshadeui/core 2.0.0-dev.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nightshadeui/core",
-    "version": "2.0.0-dev.3",
+    "version": "2.0.0",
     "description": "Core Nightshade UI components",
     "author": "Boris Okunskiy",
     "license": "ISC",
@@ -12,7 +12,6 @@
     },
     "types": "./dist/index.d.ts",
     "files": [
-        "src",
         "dist"
     ],
     "scripts": {

package/src/Btn.vue

@@ -1,342 +0,0 @@
-<template>
-    <component
-        :is="tagName"
-        ref="button"
-        class="Btn InputElement"
-        :class="[
-            `Btn-${effectiveStyle.size}`,
-            `Btn-${effectiveStyle.kind}`,
-            `input-kind-${effectiveStyle.kind}`,
-            `Btn-iconPos-${iconPos}`,
-            {
-                'Btn-ghost': effectiveStyle.ghost,
-                'Btn-round': effectiveStyle.round,
-                'Btn-outline': effectiveStyle.outline,
-                'Btn-flat': effectiveStyle.flat,
-                'Btn-shadow': effectiveStyle.shadow,
-                'Btn-square': square,
-                'Btn-block': block,
-                'Btn-disabled': disabled || blocked,
-                'Btn-force-focus': forceFocus,
-                'Btn-force-hover': forceHover,
-                'Btn-force-active': forceActive,
-            },
-        ]"
-        :disabled="disabled || blocked"
-        :title="title ?? label"
-        :href="href"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @mousedown="active = true"
-        @mouseup="active = false"
-        @mouseout="active = false"
-        @focusin="focus = true"
-        @focusout="focus = false">
-
-        <slot
-            name="icon"
-            :hover="hover"
-            :blocked="blocked">
-            <i
-                v-if="icon"
-                :class="icon"
-                class="Icon" />
-        </slot>
-
-        <span
-            v-if="label"
-            class="Label">
-            {{ label }}
-        </span>
-
-        <slot
-            :hover="hover"
-            :active="active"
-            :blocked="blocked" />
-
-    </component>
-</template>
-
-<script>
-export default {
-
-    props: {
-        tagName: { type: String, default: 'button' },
-        href: { type: String },
-        label: { type: String },
-        title: { type: String },
-
-        kind: { type: String, default: 'base' },
-        size: { type: String, default: 'm' },
-        flat: { type: Boolean, default: false },
-        shadow: { type: Boolean, default: false },
-        outline: { type: Boolean, default: false },
-        round: { type: Boolean, default: false },
-        ghost: { type: Boolean, default: false },
-
-        block: { type: Boolean, default: false },
-        square: { type: Boolean, default: false },
-
-        disabled: { type: Boolean, default: false },
-        forceFocus: { type: Boolean, default: false },
-        forceHover: { type: Boolean, default: false },
-        forceActive: { type: Boolean, default: false },
-
-        icon: { type: String },
-        iconPos: { type: String, default: 'left' },
-
-        hoverOverrides: { type: Object },
-        activeOverrides: { type: Object },
-        focusOverrides: { type: Object },
-    },
-
-    data() {
-        return {
-            hover: false,
-            active: false,
-            focus: false,
-            blocked: false,
-        };
-    },
-
-    computed: {
-
-        baseStyle() {
-            return {
-                kind: this.kind,
-                size: this.size,
-                flat: this.flat,
-                shadow: this.shadow,
-                outline: this.outline,
-                round: this.round,
-                ghost: this.ghost,
-            };
-        },
-
-        effectiveStyle() {
-            const {
-                baseStyle,
-                hoverOverrides = {},
-                activeOverrides = {},
-                focusOverrides = {},
-                active,
-                hover,
-                focus,
-                forceActive,
-                forceHover,
-                forceFocus
-            } = this;
-            const style = Object.assign({}, baseStyle);
-            if (active || forceActive) {
-                Object.assign(style, activeOverrides);
-            }
-            if (hover || forceHover) {
-                Object.assign(style, hoverOverrides);
-            }
-            if (focus || forceFocus) {
-                Object.assign(style, focusOverrides);
-            }
-            return style;
-        },
-
-    },
-
-    methods: {
-
-        // TODO add debounce
-
-    }
-
-};
-</script>
-
-<style scoped>
-.Btn {
-    --Btn-size: var(--input-size);
-    --Btn-padding: var(--sp1-5);
-    --Btn-gap: var(--sp);
-    --Btn-font-size: var(--font-size);
-
-    --Btn-text-color: var(--input-surface-color-text);
-    --Btn-text-shadow: var(--Btn-surface-bottom);
-
-    --Btn-outline-color: transparent;
-
-    --Btn-surface: var(--input-surface-color);
-    --Btn-surface-top: var(--input-surface-color-top);
-    --Btn-surface-bottom: var(--input-surface-color-bottom);
-
-    --Btn-border-size: 0;
-    --Btn-border-color: transparent;
-    --Btn-border-radius: var(--border-radius);
-
-    --Btn-shadow-color: var(--input-shadow-color);
-
-    --Btn-gradient-x: 50%;
-    --Btn-gradient-y: 0%;
-    --Btn-gradient-width: 150%;
-    --Btn-gradient-height: 150%;
-
-    -webkit-appearance: none;
-    appearance: none;
-
-    position: relative;
-    z-index: var(--input-z);
-    margin: 0;
-    padding: 0 var(--Btn-padding);
-    height: var(--Btn-size);
-    line-height: var(--Btn-size);
-    box-sizing: border-box;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    flex-shrink: 0;
-    gap: var(--Btn-gap);
-
-    border: var(--Btn-border-size) solid var(--Btn-border-color);
-    border-radius: var(--Btn-border-radius);
-
-    color: var(--Btn-text-color);
-    text-shadow: 0 1px 1px var(--Btn-text-shadow);
-    outline: var(--input-outline-size) solid var(--Btn-outline-color);
-    outline-offset: var(--input-outline-offset);
-    background: radial-gradient(
-        var(--Btn-gradient-width) var(--Btn-gradient-height) at var(--Btn-gradient-x) var(--Btn-gradient-y),
-        var(--Btn-surface-top),
-        var(--Btn-surface-bottom)
-    );
-
-    cursor: pointer;
-    user-select: none;
-
-    font-family: inherit;
-    font-size: var(--Btn-font-size);
-
-    transition: color .3s, outline .3s, filter .3s, border-radius .3s;
-}
-
-.Btn::after {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--Btn-border-radius);
-
-    background: rgba(127,127,127,.05);
-    mix-blend-mode: color-dodge;
-    pointer-events: none;
-    opacity: 0;
-}
-
-.Label {
-    line-height: var(--Btn-size);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.Icon {
-    width: var(--sp2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--Btn-font-size);
-}
-
-.Btn-iconPos-right .Icon {
-    order: 100;
-}
-
-/* States */
-
-.Btn:focus, .Btn:active, .Btn:hover {
-    transition: none;
-}
-
-.Btn:not(:disabled):hover::after, .Btn.Btn-force-hover::after {
-    opacity: 1;
-}
-
-.Btn:not(:disabled):focus, .Btn.Btn-force-focus {
-    z-index: 10;
-    --Btn-outline-color: var(--input-focus-light-color);
-    --Btn-border-color: var(--input-focus-medium-color);
-}
-
-.Btn:not(:disabled):active, .Btn.Btn-force-active {
-    padding-top: 1px;
-    box-shadow:
-        0 6px 12px var(--shadow-color-light) inset,
-        0 1px 2px var(--shadow-color-medium) inset;
-}
-
-.Btn-disabled {
-    opacity: .64;
-    filter: saturate(40%);
-    cursor: not-allowed;
-}
-
-/* Styles */
-
-.Btn-round {
-    --Btn-border-radius: var(--border-radius-m);
-}
-
-.Btn-ghost {
-    --Btn-surface: transparent;
-    --Btn-surface-top: transparent;
-    --Btn-surface-bottom: transparent;
-    --Btn-text-color: var(--input-text-color);
-    --Btn-text-shadow: none;
-    --Btn-shadow-color: var(--shadow-color-light);
-}
-
-.Btn-outline {
-    --Btn-border-color: var(--input-border-color);
-    --Btn-border-size: var(--input-border-size);
-}
-
-.Btn-flat {
-    --Btn-surface-top: var(--Btn-surface);
-    --Btn-surface-bottom: var(--Btn-surface);
-    --Btn-text-shadow: none;
-}
-
-.Btn-shadow {
-    box-shadow:
-        0 1px 1px var(--Btn-shadow-color),
-        0 0 5px -1px var(--shadow-color-light);
-}
-
-.Btn-square {
-    padding-left: 0;
-    padding-right: 0;
-    width: var(--Btn-size);
-    justify-content: center;
-}
-
-.Btn-block {
-    flex: 1 1 auto;
-    display: flex;
-    justify-content: center;
-}
-
-/* Sizes */
-
-.Btn-large {
-    --Btn-size: var(--input-size-l);
-    --Btn-font-size: var(--font-size-l);
-    --Btn-padding: var(--sp2);
-}
-
-.Btn-small {
-    --Btn-size: var(--input-size-s);
-    --Btn-font-size: var(--font-size-s);
-    --Btn-padding: var(--sp);
-    --Btn-gap: var(--sp0-5);
-}
-</style>

package/src/HGroup.vue

@@ -1,78 +0,0 @@
-<template>
-    <component
-        :is="tagName"
-        class="HGroup"
-        :class="[
-            `HGroup-align-${align}`,
-            `HGroup-justify-${justify}`,
-            `HGroup-gap-${gap}`,
-            {
-                'HGroup-wrap': wrap,
-            }
-        ]">
-        <slot />
-    </component>
-</template>
-
-<script>
-export default {
-
-    props: {
-        tagName: { type: String, default: 'div' },
-        align: { type: String, default: 'center' },
-        justify: { type: String },
-        gap: { type: String, default: 's' },
-        wrap: { type: Boolean, default: false },
-    }
-
-};
-</script>
-
-<style scoped>
-.HGroup {
-    display: flex;
-    flex-flow: row nowrap;
-}
-
-.HGroup-align-stretch { align-items: stretch; }
-.HGroup-align-baseline { align-items: baseline; }
-.HGroup-align-center { align-items: center; }
-.HGroup-align-start { align-items: flex-start; }
-.HGroup-align-end { align-items: flex-end; }
-
-.HGroup-justify-center { justify-content: center; }
-.HGroup-justify-start { justify-content: flex-start; }
-.HGroup-justify-end { justify-content: flex-end; }
-.HGroup-justify-space-around { justify-content: space-around; }
-.HGroup-justify-space-between { justify-content: space-between; }
-
-.HGroup-gap-xxs { gap: var(--sp-xxs) }
-.HGroup-gap-xs { gap: var(--sp-xs) }
-.HGroup-gap-s { gap: var(--sp-s) }
-.HGroup-gap-m { gap: var(--sp-m) }
-.HGroup-gap-l { gap: var(--sp-l) }
-.HGroup-gap-xl { gap: var(--sp-xl) }
-.HGroup-gap-xxl { gap: var(--sp-xxl) }
-
-.HGroup-gap-0 { gap: 0 }
-.HGroup-gap-0-25 { gap: var(--sp0-25) }
-.HGroup-gap-0-5 { gap: var(--sp0-5) }
-.HGroup-gap-1 { gap: var(--sp1) }
-.HGroup-gap-1-5 { gap: var(--sp1-5) }
-.HGroup-gap-2 { gap: var(--sp2) }
-.HGroup-gap-2-5 { gap: var(--sp2-5) }
-.HGroup-gap-3 { gap: var(--sp3) }
-.HGroup-gap-4 { gap: var(--sp4) }
-.HGroup-gap-5 { gap: var(--sp5) }
-.HGroup-gap-6 { gap: var(--sp6) }
-.HGroup-gap-7 { gap: var(--sp7) }
-.HGroup-gap-8 { gap: var(--sp8) }
-.HGroup-gap-9 { gap: var(--sp9) }
-.HGroup-gap-10 { gap: var(--sp10) }
-.HGroup-gap-12 { gap: var(--sp12) }
-.HGroup-gap-16 { gap: var(--sp16) }
-.HGroup-gap-24 { gap: var(--sp24) }
-.HGroup-gap-32 { gap: var(--sp32) }
-
-.HGroup-wrap { flex-wrap: wrap; }
-</style>

package/src/InputBase.vue

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