fu-kit 0.5.1 → 0.6.2

package/src/components/{FuSelectX.vue → UiSelectX.vue}

@@ -1,24 +1,23 @@
 <template>
-  <label class="fu-select-x" v-bind="$attrs">
+  <label v-click-away="onClickAway" class="ui-select-x" v-bind="$attrs">
     <input
-        tabindex="0"
-        class="fu-select-x_input"
         ref="refSearch"
         v-model="search"
-        :placeholder="model"
-        @keydown="onTextKeydown"
-        @focus="onTextFocus"
-        @blur="onSomeBlur"
+        :placeholder="placeholder"
+        class="ui-select-x_input"
         spellcheck="false"
+        tabindex="0"
+        @focus="onTextFocus"
+        @keydown="onTextKeydown"
     />
-    <span class="fu-select-x_list" v-show="filteredItems.length" ref="refList" @keydown="onArrows">
+    <span v-show="filteredItems.length" ref="refList" class="ui-select-x_list" @keydown="onArrows">
       <button
-          class="fu-select-x_list-item"
+          v-for="(e) in filteredItems"
           :class="{'_selected': e.value === model}"
+          class="ui-select-x_list-item"
           tabindex="-1"
-          v-for="(e) in filteredItems"
+          type="button"
           @click="onSelect($event,e)"
-          @blur="onSomeBlur"
       >
         {{ e.label }}
       </button>
@@ -27,24 +26,27 @@
 </template>
 
 <script>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
+import { directive as clickAway }                          from 'vue3-click-away'
 
-import FuText   from './FuText.vue'
-import FuButton from './FuButton.vue'
+import UiText   from './UiText.vue'
+import UiButton from './UiButton.vue'
 
-export default {
-  name: 'fu-select-x',
-  components: { FuButton, FuText },
+export default defineComponent({
+  name: 'ui-select-x',
+  components: { UiButton, UiText },
+  directives: { clickAway },
   props: {
     modelValue: { type: [ String, Number ], default: '' },
     options: { type: Array, default: [] },
     allowCustom: { type: Boolean, default: false },
+    placeholder: { type: String },
   },
   emits: [ 'update:modelValue', 'select' ],
   setup (props, { emit }) {
     const refSearch = ref(null)
     const refList = ref(null)
-    const search = ref('')
+    const search = ref(props.modelValue || '')
     const model = ref(props.modelValue)
 
     watch(() => props.modelValue, (value) => {
@@ -96,6 +98,8 @@ export default {
           nodes[0].click()
         } else if (props.allowCustom) {
           onSelect(e, { label: search.value, value: search.value })
+        } else {
+          search.value = model.value
         }
 
         e.preventDefault()
@@ -157,14 +161,8 @@ export default {
       }
     }
 
-    const onSomeBlur = async (e) => {
-      await nextTick() // todo: investigate why it's required
-      if (
-          refSearch.value !== document.activeElement &&
-          refList.value !== document.activeElement.parentElement
-      ) {
-        search.value = model.value
-      }
+    const onClickAway = () => {
+      search.value = model.value
     }
 
     return {
@@ -178,16 +176,16 @@ export default {
       onArrows,
       onSelect,
       onTextFocus,
-      onSomeBlur,
+      onClickAway,
     }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-select-x {
+.ui-select-x {
   @include typo(200);
 
   padding: 0;
@@ -208,7 +206,7 @@ export default {
 
   &_input {
     @include typo(200);
-    @include spacing-padding(100, 300);
+    padding: spacing(100, 300);
 
     font-family: var(--typo-font-ui);
     color: var(--ui-pal-text);
@@ -227,14 +225,14 @@ export default {
       outline: none;
     }
 
-    &:not(:focus)::placeholder {
-      color: pal(prime);
-    }
-
     &::selection {
       background-color: var(--ui-pal);
       color: var(--ui-pal-text-select);
     }
+
+    &::placeholder {
+      color: var(--ui-pal-placeholder);
+    }
   }
 
   &_list {
@@ -259,7 +257,7 @@ export default {
     z-index: var(--lt-z-pop);
 
     &-item {
-      @include spacing-padding(200, 300);
+      padding: spacing(200, 300);
       @include typo(200, 300);
 
       border: 0 none;

package/src/components/{FuSidebar.vue → UiSidebar.vue}

@@ -1,7 +1,10 @@
 <template>
-  <div class="fu-sidebar" :class="{'_shown':isOpen}" @click.self="$emit('close')">
+  <div :class="{'_shown':isOpen}" class="ui-sidebar" @mousedown.self="$emit('close')">
     <transition name="bounce">
-      <div class="fu-sidebar_content" v-if="isOpen">
+      <div v-if="isOpen" class="ui-sidebar_content">
+        <button v-if="showClose" class="ui-sidebar_close" @click="$emit('close')">
+          <ui-icon name="cross" />
+        </button>
         <slot />
       </div>
     </transition>
@@ -9,30 +12,42 @@
 </template>
 
 <script>
-export default {
-  name: 'fu-sidebar',
+import { defineComponent } from 'vue'
+
+import UiIcon from './UiIcon.vue'
+
+export default defineComponent({
+  name: 'ui-sidebar',
+  components: { UiIcon },
   emits: [ 'close' ],
   props: {
     isOpen: { type: Boolean, default: false },
     // todo: right side as well
     side: { type: String, default: 'right' },
+    showClose: { type: Boolean, default: false },
   },
-}
+  watch: {
+    isOpen (val) {
+      if (val) document.body.style.overflow = 'hidden'
+      else document.body.style.overflow = 'visible'
+    },
+  },
+})
 </script>
 
 <style lang="scss">
 @import "../../scss";
 
-:root {
+html {
   --ui-sidebar-max-w: 45vw;
   --ui-sidebar-min-w: 25vw;
 }
 </style>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../../scss";
 
-.fu-sidebar {
+.ui-sidebar {
   position: fixed;
   left: 0;
   top: 0;
@@ -41,7 +56,7 @@ export default {
   z-index: var(--lt-z-nav);
   background-color: transparent;
   transition-timing-function: linear;
-  transition-duration: 600ms;
+  transition-duration: 200ms;
   transition-property: background-color, visibility;
   pointer-events: none;
   visibility: hidden;
@@ -61,10 +76,26 @@ export default {
     top: 0;
     right: 0;
     bottom: 0;
-    background: var(--pal-bg);
+    border-top-left-radius: var(--lt-border-radius);
+    border-bottom-left-radius: var(--lt-border-radius);
+    background: var(--pal-white);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
     max-width: var(--ui-sidebar-max-w);
     min-width: var(--ui-sidebar-min-w);
     transform-origin: 100% 50%;
+    width: var(--ui-sidebar-width, auto);
+  }
+
+  &_close {
+    --icon-color: var(--pal-grey800);
+
+    position: absolute;
+    top: spacing(500);
+    left: spacing(500);
+    border: none;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
   }
 }
 
@@ -84,4 +115,4 @@ export default {
     transform: translateX(0);
   }
 }
-</style>
+</style>

package/src/components/{FuText.vue → UiText.vue}

@@ -1,15 +1,17 @@
 <template>
   <div
-      class="fu-text"
-      :class="{'_disabled': $attrs.disabled !== undefined || $attrs.readOnly  !== undefined }"
+      :class="{'_disabled': disabled || $attrs.readOnly !== undefined, 'ui-text': !naked }"
       v-bind="{ class: $attrs.class }"
   >
     <slot />
     <slot name="left" />
     <input
-        v-bind="{...$attrs, class: undefined}"
+        ref="inputRef"
+        :class="{ _naked: naked }"
         :value="modelValue"
-        class="fu-text_input"
+        class="ui-text_input"
+        v-bind="{...$attrs, disabled, class: undefined}"
+        @focus="handleFocus"
         @input="$emit('update:modelValue', $event.target.value)"
     >
     <slot name="right" />
@@ -17,21 +19,35 @@
 </template>
 
 <script>
-export default {
-  name: 'fu-text',
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-text',
   props: {
+    disabled: { type: Boolean, default: false },
+    autoSelect: { type: Boolean, default: false },
+    naked: { type: Boolean, default: false },
     modelValue: {
       type: [ String, Number ],
       default: '',
     },
   },
   emits: [ 'update:modelValue' ],
-}
+  expose: [ 'focus' ],
+  methods: {
+    focus () {
+      this.$refs.inputRef.focus()
+    },
+    handleFocus () {
+      if (this.autoSelect) this.$refs.inputRef.select()
+    },
+  },
+})
 </script>
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-text {
+.ui-text {
   @include typo(200);
 
   padding: 0;
@@ -47,11 +63,11 @@ export default {
   transition-timing-function: ease-in-out;
   transition-property: border-color, box-shadow;
   height: var(--ui-lt-h);
-  background: var(--ui-pal-bg);
+  background: var(--pal-white);
 
   &_input {
     @include typo(200);
-    @include spacing-padding(100, 300);
+    padding: var(--ui-input-padding, #{spacing(100)} #{spacing(300)});
 
     font-family: var(--typo-font-ui);
     color: var(--ui-pal-text);
@@ -76,9 +92,13 @@ export default {
     }
 
     &[disabled], &[read-only] {
-      cursor: text;
+      cursor: not-allowed;
       color: var(--ui-pal-disabled-border);
     }
+
+    &._naked {
+      padding: var(--ui-input-padding, 0);
+    }
   }
 
   &:hover {

package/src/components/{FuTextarea.vue → UiTextarea.vue}

@@ -1,24 +1,24 @@
 <template>
   <div
-      class="fu-text"
-      v-bind="{ class: $attrs.class }"
       :class="{'_disabled': $attrs.disabled !== undefined || $attrs.readOnly  !== undefined }"
+      class="ui-text"
+      v-bind="{ class: $attrs.class }"
   >
     <textarea
         ref="textarea"
-        v-bind="{...$attrs, class: undefined}"
         :value="modelValue"
-        class="fu-text_textarea"
+        class="ui-text_textarea"
+        v-bind="{...$attrs, class: undefined}"
         @input="handleInput"
     />
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 
-export default {
-  name: 'fu-textarea',
+export default defineComponent({
+  name: 'ui-textarea',
   props: {
     modelValue: {
       type: [ String, Number ],
@@ -42,13 +42,12 @@ export default {
 
     return { handleInput, textarea }
   },
-}
+})
 </script>
-
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-text {
+.ui-text {
   @include typo(200);
 
   padding: 0;
@@ -69,20 +68,22 @@ export default {
   &_textarea {
     @include scrollbar-awesome();
     @include typo(200);
-    @include spacing-padding(200);
-    @include spacing-margin(100);
+    padding: spacing(200, 300);
+    margin: spacing(100, 100, 100, 0);
 
     color: var(--ui-pal-text);
     caret-color: var(--ui-pal);
-    border: none;
+    border: 0 none;
     outline: none;
     background: transparent;
     box-sizing: border-box;
     flex: 1;
     display: block;
-    min-width: 0;
+    min-width: var(--ui-textarea-min-w, 0);
+    max-width: var(--ui-textarea-max-w, unset);
     resize: var(--ui-textarea-resize, vertical);
-    min-height: var(--ui-lt-h);
+    min-height: var(--ui-textarea-min-h, 4em);
+    max-height: var(--ui-textarea-max-h, 400px);
     height: var(--ui-lt-h);
     font-family: var(--typo-font-ui);
 

package/src/entry.js

@@ -1,15 +1,17 @@
 /* eslint-disable import/prefer-default-export */
-export { default as FuButton }         from './components/FuButton.vue'
-export { default as FuButtonLink }     from './components/FuButtonLink.vue'
-export { default as FuCodeView }       from './components/FuCodeView.vue'
-export { default as FuCopy }           from './components/FuCopy.vue'
-export { default as FuProgressRadial } from './components/FuProgressRadial.vue'
-export { default as FuSelect }         from './components/FuSelect.vue'
-export { default as FuSelectX }        from './components/FuSelectX.vue'
-export { default as FuSidebar }        from './components/FuSidebar.vue'
-export { default as FuModal }          from './components/FuModal.vue'
-export { default as FuText }           from './components/FuText.vue'
-export { default as FuTextarea }       from './components/FuTextarea.vue'
-export { default as FuCheck }          from './components/FuCheck.vue'
-export { default as FuDropdown }       from './components/FuDropdown.vue'
-export { default as FuDropdownItem }   from './components/FuDropdownItem.vue'
+export { default as UiButton }         from './components/UiButton.vue'
+export { default as UiButtonLink }     from './components/UiButtonLink.vue'
+export { default as UiCodeView }       from './components/UiCodeView.vue'
+export { default as UiCopy }           from './components/UiCopy.vue'
+export { default as UiSelect }         from './components/UiSelect.vue'
+export { default as UiSelectX }        from './components/UiSelectX.vue'
+export { default as UiModal }          from './components/UiModal.vue'
+export { default as UiSidebar }        from './components/UiSidebar.vue'
+export { default as UiText }           from './components/UiText.vue'
+export { default as UiTextarea }       from './components/UiTextarea.vue'
+export { default as UiCheck }          from './components/UiCheck.vue'
+export { default as UiDropdown }       from './components/UiDropdown.vue'
+export { default as UiDropdownItem }   from './components/UiDropdownItem.vue'
+export { default as UiIconProvider }   from './components/UiIconProvider.vue'
+export { default as UiIcon }           from './components/UiIcon.vue'
+export { default as UiProgressRadial } from './components/UiProgressRadial.vue'

package/src/scss-kit/typo.scss

@@ -14,7 +14,7 @@
   }
 }
 
-@function spacing($spacing-code: null) {
+@function _spacing($spacing-code) {
   @if (
       $spacing-code == 0 or
       $spacing-code == auto or
@@ -27,16 +27,8 @@
   @return var(--lt-sp#{$spacing-code});
 }
 
-@mixin spacing-prop($prop, $t, $r: null, $b: null, $l: null) {
-  #{$prop}: spacing($t) spacing($r) spacing($b) spacing($l);
-}
-
-@mixin spacing-margin($t, $r: null, $b: null, $l: null) {
-  @include spacing-prop('margin', $t, $r, $b, $l);
-}
-
-@mixin spacing-padding($t, $r: null, $b: null, $l: null) {
-  @include spacing-prop('padding', $t, $r, $b, $l);
+@function spacing($t, $r: null, $b: null, $l: null) {
+  @return _spacing($t) _spacing($r) _spacing($b) _spacing($l)
 }
 
 @mixin ellipsis($display: block) {

package/src/scss-kit/ui.scss

@@ -11,7 +11,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    border: 2px solid var(--ui-scroll-bg);
+    border: 1px solid var(--ui-scroll-bg, inherit);
     border-radius: var(--ui-scroll-width);
     @if ($hide) {
       background-color: inherit;
@@ -47,5 +47,3 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-
-

package/src/components/FuCheck.vue

@@ -1,136 +0,0 @@
-<template>
-  <label
-      class="fu-check"
-      :class="{'_disabled': $attrs.disabled !== undefined,  '_checked': modelValue }"
-      v-bind="{ class: $attrs.class, style: $attrs.style }"
-  >
-    <input
-        v-bind="{...$attrs, class: undefined, style: undefined, type: 'checkbox'}"
-        class="fu-check_input"
-        @input="$emit('update:modelValue', $event.target.checked)"
-        :checked="modelValue"
-    >
-    <span class="fu-check_box" :class="switchLike ? 'fu-check_switch' : 'fu-check_check'" />
-    <slot />
-  </label>
-</template>
-
-<script>
-export default {
-  name: 'fu-check',
-  props: {
-    modelValue: { type: [ Boolean ], default: false },
-    switchLike: { type: Boolean, default: false },
-  },
-  emits: [ 'update:modelValue' ],
-}
-</script>
-<style lang="scss" scoped>
-@import "../../scss";
-
-.fu-check {
-  @include typo(200);
-
-  user-select: none;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: stretch;
-  height: var(--ui-lt-h);
-  position: relative;
-  outline: none;
-  color: var(--pal-text-dimm);
-  font-family: var(--typo-font-text);
-
-  &_input {
-    opacity: 0; // weird, but it's working inside the label
-    visibility: hidden;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  &_check {
-    border-style: var(--ui-lt-border-style);
-    border-width: var(--ui-lt-border-width);
-    border-color: var(--ui-pal-lateral);
-    height: var(--ui-lt-h-sub);
-    width: var(--ui-lt-h-sub);
-    border-radius: var(--ui-lt-border-radius);
-    display: flex;
-    justify-content: stretch;
-    align-items: stretch;
-    margin-right: spacing(200);
-
-    &:before {
-      content: "";
-      display: block;
-      background-color: var(--ui-pal);
-      border-radius: calc(var(--ui-lt-border-radius) - #{spacing(100)});
-      margin: spacing(100);
-      flex: 1;
-      transform: scale(0);
-      transition: all var(--ui-transition);
-    }
-  }
-
-  &_switch {
-    border-style: var(--ui-lt-border-style);
-    border-width: var(--ui-lt-border-width);
-    border-color: var(--ui-pal-lateral);
-    height: var(--ui-lt-h-sub);
-    width: calc(var(--ui-lt-h-sub) * 2);
-    border-radius: var(--ui-lt-h-sub);
-    margin-right: spacing(200);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: spacing(100);
-
-    &:before {
-      content: "";
-      display: block;
-      background-color: var(--ui-pal-lateral);
-      border-radius: calc(var(--ui-lt-h-sub) - #{spacing(100)});
-      height: 100%;
-      aspect-ratio: 1;
-      transition: all var(--ui-transition);
-    }
-  }
-
-  &._checked &_switch:before {
-    transform: translateX(var(--ui-lt-h-sub));
-    background-color: var(--ui-pal);
-  }
-
-  &._checked {
-    color: var(--pal-text);
-  }
-
-  &._checked &_check:before {
-    transform: scale(1);
-  }
-
-  &:hover &_box {
-    box-shadow: 0 5px 12px -4px rgb(var(--rgb-dark), 0.2);
-  }
-
-  &:hover {
-    color: var(--pal-text);
-  }
-
-  &:focus-within &_box {
-    border-color: var(--ui-pal);
-  }
-
-  &._disabled {
-    color: var(--ui-pal-disabled-border);
-    cursor: not-allowed;
-  }
-
-  &._disabled &_box {
-    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
-    box-shadow: none;
-  }
-}
-</style>