@kizmann/nano-ui 0.8.21 → 0.8.23

package/src/durationpicker/src/durationpicker/durationpicker.js

@@ -0,0 +1,447 @@
+import { Any, Obj, Arr, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NDurationpicker',
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        clearValue: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        options: {
+            default()
+            {
+                return [
+                    60 * 5,
+                    60 * 10,
+                    60 * 15,
+                    60 * 30,
+                    60 * 45,
+                    60 * 60,
+                    60 * 90,
+                    60 * 120,
+                    60 * 150,
+                    60 * 60 * 3,
+                    60 * 60 * 4,
+                    60 * 60 * 5,
+                    60 * 60 * 6,
+                    60 * 60 * 12,
+                    60 * 60 * 24,
+                    60 * 60 * 24 * 2,
+                    60 * 60 * 24 * 3,
+                    60 * 60 * 24 * 4,
+                    60 * 60 * 24 * 5,
+                    60 * 60 * 24 * 6,
+                    60 * 60 * 24 * 7,
+                ];
+            },
+            type: [Array]
+        },
+
+        minDuration: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        maxDuration: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
+        placeholder: {
+            default()
+            {
+                return Locale.trans('Select duration');
+            },
+            type: [String]
+        },
+
+        boundary: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        position: {
+            default()
+            {
+                return 'bottom-start';
+            },
+            type: [String]
+        },
+
+        disabled: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        clearable: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        days: {
+            default()
+            {
+                return ':count Day|:count Days';
+            },
+            type: [String]
+        },
+
+        hours: {
+            default()
+            {
+                return ':count Hour|:count Hours';
+            },
+            type: [String]
+        },
+
+        minutes: {
+            default()
+            {
+                return ':count Minute|:count Minutes';
+            },
+            type: [String]
+        },
+
+        seconds: {
+            default()
+            {
+                return ':count Second|:count Seconds';
+            },
+            type: [String]
+        }
+
+    },
+
+
+    watch: {
+
+        modelValue(value)
+        {
+            if ( value !== this.tempValue ) {
+                this.tempValue = value;
+            }
+        },
+
+    },
+
+    data()
+    {
+        return {
+            focus: false, tempValue: this.modelValue, editValue: null
+        };
+    },
+
+    methods: {
+
+        humanizeValue(value)
+        {
+            if ( Any.isEmpty(value) ) {
+                return '';
+            }
+
+            let seconds = value;
+
+            // Extract minutes
+            let minutes = Math.floor(seconds/60);
+            seconds -= minutes * 60;
+
+            // Extract hours
+            let hours = Math.floor(minutes/60);
+            minutes -= hours * 60;
+
+
+            // Extract days
+            let days = Math.floor(hours/24);
+            hours -= days * 24;
+
+            let text = [];
+
+            if ( days ) {
+                text.push(Locale.choice(this.days, days));
+            }
+
+            if ( hours ) {
+                text.push(Locale.choice(this.hours, hours));
+            }
+
+            if ( minutes ) {
+                text.push(Locale.choice(this.minutes, minutes));
+            }
+
+            if ( seconds ) {
+                text.push(Locale.choice(this.seconds, seconds));
+            }
+
+            return text.join(' ');
+        },
+
+        digitizeValue(text)
+        {
+            if ( Any.isEmpty(text) ) {
+                return this.clearValue;
+            }
+
+            let value = 0;
+
+            let days = new RegExp(this.days.replaceAll(':count', '([0-9\.\,]+)'), 'i'),
+                dmatch = text.match(days);
+
+            if ( dmatch && dmatch.length === 3 ) {
+                value += Any.float(dmatch[1].replace(',', '.')) * 24 * 60 * 60;
+            }
+
+            let hours = new RegExp(this.hours.replaceAll(':count', '([0-9\.\,]+)'), 'i'),
+                hmatch = text.match(hours);
+
+            if ( hmatch && hmatch.length === 3 ) {
+                value += Any.float(hmatch[1].replace(',', '.')) * 60 * 60;
+            }
+
+            let minutes = new RegExp(this.minutes.replaceAll(':count', '([0-9\.\,]+)'), 'i'),
+                mmatch = text.match(minutes);
+
+            if ( mmatch && mmatch.length === 3 ) {
+                value += Any.float(mmatch[1].replace(',', '.')) * 60;
+            }
+
+            let seconds = new RegExp(this.seconds.replaceAll(':count', '([0-9\.\,]+)'), 'i'),
+                smatch = text.match(seconds);
+
+            if ( smatch && smatch.length === 3 ) {
+                value += Any.float(smatch[1].replace(',', '.'));
+            }
+
+            return value;
+        },
+
+        clearDurationpicker()
+        {
+            this.$emit('update:modelValue', this.tempValue = this.clearValue);
+        },
+
+        onPopoverInput(value)
+        {
+            this.focus = value;
+        },
+
+        onValueInput(e)
+        {
+            let value = this.digitizeValue(e.target.value);
+
+            if ( value === this.tempValue ) {
+                return;
+            }
+
+            this.editValue = value;
+        },
+
+        onValueChange(e)
+        {
+            let value = this.editValue;
+
+            // Clear edit value
+            this.editValue = null;
+
+            if ( ! value || value === this.tempValue ) {
+                return;
+            }
+
+            this.$emit('update:modelValue', this.tempValue = value);
+        },
+
+        onDurationpickerInput(value)
+        {
+            this.focus = false;
+
+            // Clear edit value
+            this.editValue = null;
+
+            this.$emit('update:modelValue', this.tempValue = value);
+        },
+
+    },
+
+    renderLabelClear()
+    {
+        if ( ! this.clearable || ! this.tempValue ) {
+            return null;
+        }
+
+        let props = {};
+
+        if ( ! this.disabled ) {
+            props.onMousedown = this.clearDurationpicker;
+        }
+
+        return (
+            <div class="n-durationpicker__clear" {...props}>
+                <i class={ nano.Icons.times }></i>
+            </div>
+        );
+    },
+
+    renderLabelAngle()
+    {
+        return (
+            <div class="n-durationpicker__angle">
+                <i class={ nano.Icons.angleDown }></i>
+            </div>
+        );
+    },
+
+    renderInput()
+    {
+        let props = {
+            value: this.humanizeValue(this.tempValue),
+            disabled: this.disabled,
+            placeholder: this.placeholder,
+            onInput: this.onValueInput,
+            onBlur: this.onValueChange,
+            onChange: this.onValueChange,
+        };
+
+        return (
+            <div class="n-durationpicker__input">
+                <input {...props}/>
+            </div>
+        );
+    },
+
+    renderDisplay()
+    {
+        let classList = [
+            'n-durationpicker__display'
+        ];
+
+        return (
+            <div class={classList}>
+                { this.ctor('renderLabelClear')() }
+                { this.ctor('renderInput')() }
+                { this.ctor('renderLabelAngle')() }
+            </div>
+        );
+    },
+
+    renderItems()
+    {
+        return Arr.each(this.options, (value) => {
+
+            let text = this.humanizeValue(value);
+
+            let optionProps = {
+                //
+            };
+
+            optionProps['onClick'] = () => {
+                this.onDurationpickerInput(value);
+            }
+
+            return (<NPopoverOption {...optionProps}>{text}</NPopoverOption>)
+        });
+    },
+
+    renderPopover()
+    {
+        let props = {
+            trigger: 'click',
+            width: -1,
+            size: this.size,
+            position: this.position,
+            scrollClose: true,
+            disabled: this.disabled
+        };
+
+        let slots = {};
+
+        slots.raw = () => {
+
+            let scrollProps = {
+                relative: true, size: this.size
+            }
+
+            return (
+                <NScrollbar ref="scrollbar" class="n-durationpicker__body" {...scrollProps}>
+                    {this.ctor('renderItems')()}
+                </NScrollbar>
+            )
+        }
+
+        return (
+            <NPopover ref="popover" vModel={this.focus} {...props} v-slots={slots} />
+        );
+    },
+
+    render()
+    {
+        let classList = [
+            'n-durationpicker',
+            'n-durationpicker--' + this.type,
+            'n-durationpicker--' + this.size,
+        ];
+
+        if ( ! this.tempValue ) {
+            classList.push('n-empty');
+        }
+
+        if ( this.clearable ) {
+            classList.push('n-clearable');
+        }
+
+        if ( this.focus ) {
+            classList.push('n-focus');
+        }
+
+        if ( this.disabled ) {
+            classList.push('n-disabled');
+        }
+
+        return (
+            <div class={classList}>
+                { this.ctor('renderDisplay')() }
+                { this.ctor('renderPopover')() }
+            </div>
+        );
+    }
+
+}

package/src/durationpicker/src/durationpicker/durationpicker.scss

@@ -0,0 +1,162 @@
+@import "../../../root/vars";
+
+.n-durationpicker {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 100%;
+    border: 1px solid transparent;
+}
+
+.n-durationpicker.n-disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.n-durationpicker__display {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 100%;
+}
+
+.n-durationpicker__input {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 50%;
+}
+
+.n-durationpicker__input input {
+    cursor: default;
+    appearance: none;
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    text-decoration: none;
+    line-height: 1.2;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+}
+
+.n-disabled .n-durationpicker__input input {
+    cursor: not-allowed;
+}
+
+.n-durationpicker__clear,
+.n-durationpicker__angle {
+    order: 100;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.n-durationpicker__clear {
+    display: none;
+}
+
+.n-durationpicker:hover.n-clearable:not(.n-empty) .n-durationpicker__clear,
+.n-durationpicker.n-focus.n-clearable:not(.n-empty) .n-durationpicker__clear {
+    display: flex;
+}
+
+.n-durationpicker:hover.n-clearable:not(.n-empty) .n-durationpicker__angle,
+.n-durationpicker.n-focus.n-clearable:not(.n-empty) .n-durationpicker__angle {
+    display: none;
+}
+
+.n-durationpicker__angle {
+    transition: transform 0.25s;
+}
+
+.n-durationpicker.n-focus .n-durationpicker__angle {
+    transform: scaleY(-1);
+}
+
+.n-durationpicker__clear i,
+.n-durationpicker__angle i {
+    text-align: center;
+}
+
+.n-durationpicker__clear i {
+    border-radius: 500px;
+}
+
+.n-durationpicker__placeholder {
+    flex: 1 1 auto;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.n-durationpicker__body,
+.n-durationpicker__empty {
+    overflow: hidden;
+    margin: 1px 0;
+    max-height: 210px;
+}
+
+.n-durationpicker__empty {
+     text-align: center;
+}
+
+@each $suffix, $values in $form {
+
+    $-duration-font: map-get($values, 'font');
+    $-duration-size: map-get($values, 'size');
+    $-duration-radius: map-get($values, 'radius');
+    $-duration-ratio: map-get($values, 'ratio');
+
+    .n-durationpicker--#{$suffix} {
+        min-height: $-duration-size;
+        font-size: $-duration-font;
+        border-radius: $-duration-radius;
+    }
+
+    $-duration-padding: $-duration-size * $-duration-ratio * 0.5;
+
+    .n-durationpicker--#{$suffix} .n-durationpicker__display,
+    .n-durationpicker--#{$suffix} .n-durationpicker__input input {
+        padding: 0 $-duration-padding;
+    }
+
+    .n-durationpicker--#{$suffix} .n-durationpicker__clear,
+    .n-durationpicker--#{$suffix} .n-durationpicker__angle {
+        width: $-duration-size;
+        margin: 0 -#{$-duration-padding} 0 -#{$-duration-padding};
+    }
+    .n-durationpicker--#{$suffix} .n-durationpicker__clear i,
+    .n-durationpicker--#{$suffix} .n-durationpicker__angle i {
+        width: $-duration-size - 14;
+        height: $-duration-size - 14;
+        line-height: $-duration-size - 14;
+    }
+
+    .n-durationpicker--#{$suffix} .n-durationpicker__angle i {
+        font-size: $-duration-font - 2;
+    }
+
+    .n-durationpicker--#{$suffix} .n-durationpicker__clear i {
+        font-size: $-duration-font - 4;
+    }
+
+    .n-popover--#{$suffix} .n-durationpicker__body,
+    .n-popover--#{$suffix} .n-durationpicker__empty {
+        border-radius: $-duration-radius;
+    }
+
+    .n-popover--#{$suffix} .n-durationpicker__empty {
+        padding: $-duration-padding;
+    }
+
+}

package/src/index.js

@@ -80,6 +80,7 @@ export function Install(App, Icons = {}, Styles = {})
     require('./datepicker/index').default(App);
     require('./timepicker/index').default(App);
     require('./datetimepicker/index').default(App);
+    require('./durationpicker/index').default(App);
     require('./transfer/index').default(App);
     require('./form/index').default(App); // check
     require('./tabs/index').default(App);

package/src/index.scss

@@ -20,6 +20,7 @@
 @import "./datepicker/index";
 @import "./timepicker/index";
 @import "./datetimepicker/index";
+@import "./durationpicker/index";
 @import "./transfer/index";
 @import "./file/index";
 @import "./popover/index";

package/src/timepicker/src/timepicker/timepicker.js

@@ -1,4 +1,4 @@
-import { Arr, Obj, Now, Any } from "@kizmann/pico-js";
+import { Arr, Obj, Now, Any, Locale } from "@kizmann/pico-js";
 
 export default {
 
@@ -79,7 +79,7 @@ export default {
         displayFormat: {
             default()
             {
-                return 'HH:mm:ss';
+                return Locale.trans('HH:mm:ss');
             },
             type: [String]
         },

package/themes/light/durationpicker/index.scss

@@ -0,0 +1 @@
+@import "./src/durationpicker/durationpicker";

package/themes/light/durationpicker/src/durationpicker/durationpicker.scss

@@ -0,0 +1,49 @@
+@import "../../../root/vars";
+
+.n-durationpicker {
+    border: 1px solid $color-gray-15;
+}
+
+.n-durationpicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-durationpicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-durationpicker__clear,
+.n-durationpicker__angle {
+    color: $color-gray-60;
+}
+
+.n-durationpicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-durationpicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-durationpicker__body,
+.n-durationpicker__empty {
+     background: $color-white;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-durationpicker__empty {
+     color: $color-gray-60;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+     .n-durationpicker--#{$color}:not(.n-disabled):hover,
+     .n-durationpicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/light/index.scss

@@ -20,6 +20,7 @@
 @import "./datepicker/index";
 @import "./timepicker/index";
 @import "./datetimepicker/index";
+@import "./durationpicker/index";
 @import "./transfer/index";
 @import "./popover/index";
 @import "./modal/index";