@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/visuals/js/progress/NProgress.ts

@@ -0,0 +1,63 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NProgressController } from "./NProgressController.ts";
+
+export const NProgressProps = {
+
+    ...Props.Size,
+    ...Props.Type,
+
+    /**
+     * @type {PropType<number>}
+     */
+    modelValue: {
+        type: [Number], default: 0
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    state: {
+        type: [Number], default: 0
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    changeState: {
+        type: [Boolean], default: false
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NProgress',
+
+    /**
+     * @type {typeof NProgressProps}
+     */
+    props: NProgressProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        //
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NProgressController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/visuals/js/progress/NProgressController.ts

@@ -0,0 +1,48 @@
+import { SetupContext } from "vue";
+import { ProtoController } from "../../../root/index.ts";
+import { NProgressView } from "./NProgressView.ts";
+import { NProgressData } from "./NProgressData.ts";
+
+
+export class NProgressController extends ProtoController
+{
+    /**
+     * @type {NProgressController}
+     */
+    declare scope : NProgressController;
+
+    /**
+     * @type {NProgressData}
+     */
+    declare data: NProgressData;
+
+    /**
+     * @type {NProgressView}
+     */
+    declare view: NProgressView;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NProgressView(this),
+            new NProgressData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeRef('el');
+        this.cloneProp('modelValue');
+
+        return this;
+    }
+
+}
+
+export default NProgressController;

package/src/visuals/js/progress/NProgressData.ts

@@ -0,0 +1,75 @@
+import { ProtoData } from "../../../root/index.ts";
+import NProgressController from "./NProgressController.ts";
+
+export class NProgressData extends ProtoData
+{
+    /**
+     * @type {NProgressController}
+     */
+    declare scope : NProgressController;
+
+    get classList() : string[]
+    {
+        const { view } = this.scope;
+
+        const classList = [
+            view.bem,
+        ];
+
+        if ( this.size != null ) {
+            classList.push(`n-size-${this.size}`);
+        }
+
+        let type = this.type || 'primary';
+
+        if ( this.state === 0 ) {
+            type = 'neutral';
+        }
+
+        if ( this.state === 2 ) {
+            type = 'success';
+        }
+
+        if ( this.state === 3 ) {
+            type = 'danger';
+        }
+
+        classList.push(`n-type-${type}`);
+
+        if ( this.state === 0 ) {
+            classList.push('n-await');
+        }
+
+        if ( this.state === 1 ) {
+            classList.push('n-active');
+        }
+
+        if ( this.state === 2 ) {
+            classList.push('n-done');
+        }
+
+        if ( this.state === 3 ) {
+            classList.push('n-abort');
+        }
+
+        return classList;
+    }
+
+    get model() : number
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get value() : number
+    {
+        return Math.min(100, Math.max(0, this.model));
+    }
+
+    get state() : number
+    {
+        return this.scope.get('state');
+    }
+
+}
+
+export default NProgressData;

package/src/visuals/js/progress/NProgressView.ts

@@ -0,0 +1,48 @@
+import { h } from "vue";
+import { ProtoView } from "../../../root/index.ts";
+import { NProgressController } from "./NProgressController.ts";
+
+export class NProgressView extends ProtoView
+{
+    /**
+     * @type {NProgressController}
+     */
+    declare scope : NProgressController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-progress';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        let props : any = {
+            ref: scope.ref('el'),
+            class: data.classList,
+        };
+
+        return h('div', props, [
+            this.bar()
+        ]);
+    }
+
+    bar() : any
+    {
+        const { data } = this.scope;
+
+        let props : any = {
+            class: data.classPart('bar')
+        };
+
+        props.style = {
+            '--n-progress-width': data.value + '%'
+        };
+
+        return h('div', props);
+    }
+
+}
+
+export default NProgressView;

package/themes/default/checkbox/src/checkbox/checkbox.scss

@@ -23,4 +23,17 @@
 
 .n-checkbox.n-checked:not(.n-disabled) .n-checkbox__label {
     color: color('base-color');
+}
+
+.n-checkbox.n-checkbox--button {
+    border-color: color('gray-15');
+}
+
+.n-checkbox.n-checkbox--button:hover {
+    background: color('gray-50', 0.05);
+}
+
+.n-checkbox.n-checkbox--button.n-checked {
+    border-color: color('primary-color');
+    background: color('primary-color', 0.1);
 }

package/themes/default/input-number/src/input-number/input-number.scss

@@ -5,22 +5,10 @@
     border: 1px solid color('gray-15');
 }
 
-.n-input-number.n-disabled  {
+.n-input-number.n-disabled {
     background: color('form-disabled');
 }
 
-.n-input-number .n-button {
-    color: color('gray-60');
-}
-
-.n-input-number:not(.n-disabled) .n-button {
-    background: color('gray-15', 0.5);
-}
-
-.n-input-number:not(.n-disabled) .n-button:not(.n-disabled):hover {
-    color: color('base-color');
-}
-
 .n-input-number:not(.n-disabled):hover {
     border-color: color('base-color-bg-30');
 }
@@ -28,3 +16,8 @@
 .n-input-number:not(.n-disabled).n-focus {
     border-color: color('base-color');
 }
+
+.n-input-number .n-input-number__increase i,
+.n-input-number .n-input-number__decrease i {
+    color: color('gray-40');
+}

package/themes/default/preview/src/preview/preview.scss

@@ -26,10 +26,19 @@
     transform: scale(1);
 }
 
+.n-preview:hover .n-preview__hover span {
+    color: color('foreground', 0.7);
+}
+
+.n-preview.n-preview-image .n-preview__title span {
+    color: color('white');
+    text-shadow: 0 0 6px color('shadow', 0.7);
+}
+
 .n-preview__mime {
-    color: color('white', 0.5);
+    color: color('foreground', 0.5);
 }
 
 .n-preview__path {
-    color: color('white', 0.75);
+    color: color('foreground', 0.75);
 }

package/themes/default/radio/src/radio/radio.scss

@@ -29,4 +29,17 @@
 
 .n-radio.n-checked:not(.n-disabled) .n-radio__label {
     color: color('base-color');
+}
+
+.n-radio.n-radio--button {
+    border-color: color('gray-15');
+}
+
+.n-radio.n-radio--button:hover {
+    background: color('gray-50', 0.05);
+}
+
+.n-radio.n-radio--button.n-checked {
+    border-color: color('primary-color');
+    background: color('primary-color', 0.1);
 }

package/themes/default/root/vars/colors-dark-bluish.scss

@@ -453,6 +453,7 @@ $color-list: (
         }
     }
 
+    @include css-remaps($color-base-primary, '-color-dark-primary', '-color-base');
     @include css-remaps($colors, '-color-dark', '-color');
 }
 

package/themes/default/root/vars/colors-dark.scss

@@ -453,6 +453,7 @@ $color-list: (
         }
     }
 
+    @include css-remaps($color-base-primary, '-color-dark-primary', '-color-base');
     @include css-remaps($colors, '-color-dark', '-color');
 }
 

package/themes/default/root/vars/colors-light-bluish.scss

@@ -452,11 +452,12 @@ $color-list: (
         }
     }
 
+    @include css-remaps($color-base-primary, '-color-light-primary', '-color-base');
     @include css-remaps($colors, '-color-light', '-color');
 }
 
 @mixin default() {
     @each $name, $values in $color-list {
-        @include css-remaps($values, '-color-dark-#{$name}', '-color-#{$name}');
+        @include css-remaps($values, '-color-light-#{$name}', '-color-#{$name}');
     }
 }

package/themes/default/root/vars/colors-light.scss

@@ -452,11 +452,12 @@ $color-list: (
         }
     }
 
+    @include css-remaps($color-base-primary, '-color-light-primary', '-color-base');
     @include css-remaps($colors, '-color-light', '-color');
 }
 
 @mixin default() {
     @each $name, $values in $color-list {
-        @include css-remaps($values, '-color-dark-#{$name}', '-color-#{$name}');
+        @include css-remaps($values, '-color-light-#{$name}', '-color-#{$name}');
     }
 }

package/themes/default/scrollbar/src/scrollbar/scrollbar.scss

@@ -2,6 +2,6 @@
 
 .n-scrollbar-v:before,
 .n-scrollbar-h:before {
-    background: color('foreground', 0.4);
+    background: color('gray-50', 0.6);
 }