@nightshadeui/core 2.0.0-dev.3 → 2.0.0

package/src/Toggle.vue

@@ -1,228 +0,0 @@
-<template>
-    <label
-        class="Toggle InputElement"
-        :class="[
-            `Toggle-${effectiveStyle.kind}`,
-            `input-kind-${effectiveStyle.kind}`,
-            `Toggle-${effectiveStyle.size}`,
-            {
-                'Toggle-active': !!modelValue,
-                'Toggle-outline': effectiveStyle.outline,
-                'Toggle-round': effectiveStyle.round,
-                'Toggle-flat': effectiveStyle.flat,
-                'Toggle-disabled': disabled,
-                'Toggle-force-focus': forceFocus,
-                'Toggle-force-hover': forceHover,
-            }
-        ]"
-        tabindex="0"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @focusin="focus = true"
-        @focusout="focus = false">
-        <input
-            type="checkbox"
-            :checked="modelValue"
-            :disabled="disabled"
-            @change="onChange" />
-    </label>
-</template>
-
-<script>
-export default {
-
-    props: {
-        modelValue: { type: Boolean },
-        disabled: { type: Boolean },
-        kind: { type: String, default: 'base' },
-        activeKind: { type: String },
-        size: { type: String, default: 'normal' },
-        round: { type: Boolean, default: false },
-        flat: { type: Boolean, default: false },
-        outline: { type: Boolean, default: false },
-        forceFocus: { type: Boolean, default: false },
-        forceHover: { type: Boolean, default: false },
-        focusOverrides: { type: Object },
-        hoverOverrides: { type: Object },
-    },
-
-    emits: [
-        'update:modelValue',
-    ],
-
-    data() {
-        return {
-            hover: false,
-            focus: false,
-        };
-    },
-
-    computed: {
-
-        isActive() {
-            return !!this.modelValue;
-        },
-
-        baseStyle() {
-            return {
-                kind: (this.isActive ? this.activeKind : this.kind) ?? this.kind,
-                size: this.size,
-                round: this.round,
-                outline: this.outline,
-                flat: this.flat,
-            };
-        },
-
-        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;
-        },
-
-    },
-
-    methods: {
-
-        onChange(ev) {
-            this.$emit('update:modelValue', ev.target.checked);
-        }
-
-    }
-
-};
-</script>
-
-<style scoped>
-.Toggle {
-    --Toggle-size: var(--input-size);
-    --Toggle-width: calc(1.618 * var(--Toggle-size));
-    --Toggle-knob-offset: 4px;
-    --Toggle-knob-size: calc(var(--Toggle-size) - 2 * var(--Toggle-knob-offset));
-    --Toggle-knob-outline-offset: -2px;
-    --Toggle-knob-radius: calc(var(--Toggle-border-radius) - 0.5 * var(--Toggle-knob-offset));
-
-    --Toggle-outline-color: transparent;
-
-    --Toggle-surface: var(--color-base-200);
-    --Toggle-knob-surface: var(--input-text-color);
-    --Toggle-knob-surface: light-dark(var(--color-base-0), var(--color-base-800));
-
-    --Toggle-border-size: 0px;
-    --Toggle-border-color: transparent;
-    --Toggle-border-radius: var(--border-radius);
-
-    --Toggle-shadow-color: var(--shadow-color-light);
-
-    display: block;
-    position: relative;
-    width: var(--Toggle-width);
-    height: var(--Toggle-size);
-
-    border: var(--Toggle-border-size) solid var(--Toggle-border-color);
-    border-radius: var(--Toggle-border-radius);
-
-    background: var(--Toggle-surface);
-    outline: var(--input-outline-size) solid var(--Toggle-outline-color);
-    outline-offset: var(--input-outline-offset);
-    background-clip: border-box;
-
-    cursor: pointer;
-    user-select: none;
-
-    box-shadow:
-        0 1px 3px var(--Toggle-shadow-color) inset,
-        0 0 5px -1px var(--Toggle-shadow-color) inset;
-
-    transition: background-color .3s, border-radius .3s;
-}
-
-.Toggle input {
-    display: none;
-}
-
-.Toggle::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: var(--Toggle-knob-size);
-    height: var(--Toggle-knob-size);
-    border-radius: var(--Toggle-knob-radius);
-    background: var(--Toggle-knob-surface);
-    box-shadow: 0 1px 3px var(--Toggle-shadow-color);
-
-    transform: translate(calc(var(--Toggle-knob-offset) - var(--Toggle-border-size)), -50%);
-    transition: transform .3s, border-radius .3s;
-}
-
-.Toggle-knob-outline::before {
-    outline: var(--input-outline-size) solid var(--Toggle-outline-color);
-    outline-offset: var(--input-outline-offset);
-}
-
-/* States */
-
-.Toggle-disabled {
-    cursor: not-allowed;
-    opacity: .5;
-}
-
-.Toggle:not(:disabled):hover, .Toggle.Toggle-force-hover {
-    filter: brightness(.96);
-}
-
-.Toggle:not(:disabled):focus, .Toggle.Toggle-force-focus {
-    z-index: 10;
-    --Toggle-outline-color: var(--input-focus-light-color);
-    --Toggle-border-color: var(--input-focus-medium-color);
-}
-
-.Toggle-active {
-    --Toggle-surface: var(--input-surface-color);
-    --Toggle-knob-surface: var(--input-surface-color-text);
-}
-
-.Toggle-active::before {
-    transform: translate(calc(var(--Toggle-width) - var(--Toggle-knob-size) - var(--Toggle-knob-offset) - var(--Toggle-border-size)), -50%);
-}
-
-/* Styles */
-
-.Toggle-round {
-    --Toggle-border-radius: var(--border-radius-m);
-}
-
-.Toggle-outline {
-    --Toggle-border-color: var(--input-border-color);
-    --Toggle-border-size: var(--input-border-size);
-}
-
-.Toggle-flat {
-    --Toggle-shadow-color: none;
-    box-shadow: none;
-}
-
-/* Sizes */
-
-.Toggle-small {
-    --Toggle-size: var(--input-size-s);
-}
-
-.Toggle-large {
-    --Toggle-size: var(--input-size-l);
-}
-</style>

package/src/VGroup.vue

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

package/src/index.ts

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

package/src/types.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue';
-
-    const component: DefineComponent<{}, {}, any>;
-    export default component;
-}