@nightshadeui/core 2.0.0-dev.3

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { default as Btn } from './Btn.vue';
+import { default as HGroup } from './HGroup.vue';
+import { default as InputBase } from './InputBase.vue';
+import { default as InputGroup } from './InputGroup.vue';
+import { default as InputSelect } from './InputSelect.vue';
+import { default as InputText } from './InputText.vue';
+import { default as InputTextarea } from './InputTextarea.vue';
+import { default as Sizer } from './Sizer.vue';
+import { default as Tab } from './Tab.vue';
+import { default as TabCap } from './TabCap.vue';
+import { default as Toggle } from './Toggle.vue';
+import { default as VGroup } from './VGroup.vue';
+export { Btn, HGroup, InputBase, InputGroup, InputSelect, InputText, InputTextarea, Sizer, Tab, TabCap, Toggle, VGroup, };

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@nightshadeui/core",
+    "version": "2.0.0-dev.3",
+    "description": "Core Nightshade UI components",
+    "author": "Boris Okunskiy",
+    "license": "ISC",
+    "sideEffects": false,
+    "exports": {
+        ".": "./dist/core.mjs",
+        "./css": "./dist/core.css",
+        "./src": "./src/index.ts"
+    },
+    "types": "./dist/index.d.ts",
+    "files": [
+        "src",
+        "dist"
+    ],
+    "scripts": {
+        "build:watch": "vite build --watch",
+        "build": "NODE_ENV=production vite build"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.22"
+    }
+}

package/src/Btn.vue

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

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