fu-kit 0.7.2 → 1.0.0

package/src/components/UiCodeInput.vue

@@ -20,7 +20,8 @@
           :key="'char' + i"
           :class="{
             '_select': i - 1 >= selection.from && i - 1 < selection.to && selection.from !== selection.to,
-            '_cursor': i - 1 === selection.to,
+            '_cursor': i  === selection.to,
+            '_cursor_0': selection.from === 0 && selection.to === 0 && i === 1,
           }"
           class="code-input_char"
       >
@@ -31,37 +32,30 @@
 </template>
 
 <script>
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 
 export default {
   name: 'ui-code-input',
   props: {
-    modelValue: {
-      type: String,
-    },
-    length: {
-      type: Number,
-      default: 6,
-    },
+    type: { type: String, default: 'text' },
+    modelValue: { type: String },
+    length: { type: Number, default: 4 },
   },
   setup (props, { emit }) {
     const selection = reactive({ from: 0, to: 0 })
     const inp = ref(null)
 
     const selectionUpdate = (e) => {
-      selection.from = e.target.selectionStart
-      selection.to = e.target.selectionEnd
+      requestAnimationFrame(() => {
+        selection.from = e.target.selectionStart
+        selection.to = e.target.selectionEnd
+      })
     }
 
-    const handleInput = (e) => {
-      emit('update:modelValue', e.target.value)
-    }
+    const handleInput = (e) => emit('update:modelValue', e.target.value)
 
     const chars = computed(() => (props.modelValue).split(''))
 
-    onMounted(() => { })
-    onBeforeUnmount(() => { })
-
     return { chars, selection, selectionUpdate, inp, handleInput }
   },
 }
@@ -69,10 +63,8 @@ export default {
 
 <style lang="scss" scoped>
 .code-input {
-  --charbox-width: 34px;
-  --chabox-height: 48px;
-
   display: flex;
+  height: var(--ui-lt-h);
 
   &_wrapper {
     position: relative;
@@ -84,36 +76,50 @@ export default {
   }
 
   &_inp {
-    padding: 14px;
+    --extra-indent: calc((var(--ui-lt-h) + #{spacing(200)}));
+
     position: absolute;
-    width: 100%;
-    border: none;
-    background: transparent;
+    width: calc(100% + var(--extra-indent));
+    height: 100%;
+    border: 0 none;
     font-family: var(--typo-font-mono);
-    font-size: var(--typo-h200);
-    letter-spacing: 41px;
+    font-size: var(--typo-font-ui);
+    letter-spacing: calc(var(--ui-lt-h) + #{spacing(200)});
+    margin-left: calc(var(--extra-indent) / -2);
     outline: none;
+    background: transparent;
     opacity: 0;
+    padding: 0;
   }
 
   &_char {
-    width: var(--charbox-width);
-    height: var(--ui-lt-h);
-    border: 1px solid var(--charbox-border-color, var(--pal-grey300));
+    width: var(--ui-lt-h);
+    height: 100%;
+    border-style: var(--ui-lt-border-style);
+    border-width: var(--ui-lt-border-width);
+    border-color: var(--ui-pal-lateral);
     border-radius: var(--ui-lt-border-radius);
-    color: var(--charbox-text-color, var(--pal-grey900));
+    background: var(--ui-pal-bg);
+    color: var(--ui-pal-text);
     align-items: center;
     justify-content: center;
     display: flex;
+    gap: spacing(100);
 
     &-item {
-      border-width: 2px 0;
+      font-family: var(--typo-font-mono);
+      font-size: var(--typo-h300);
+      border-width: 0 2px 0 2px;
       border-style: solid;
       border-color: transparent;
       background: transparent;
-      min-width: 0.75em;
-      min-height: 1.5em;
       text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: spacing(200);
+      min-width: calc(var(--ui-lt-h) / 2);
+      min-height: calc(var(--ui-lt-h) / 2);
     }
 
     &._select &-item {
@@ -121,12 +127,17 @@ export default {
       background: var(--pal-primary);
     }
 
-    input:focus ~ &._cursor {
+    input:focus ~ &._cursor,
+    input:focus ~ &._cursor_0 {
       border-color: var(--ui-pal);
     }
 
-    input:focus ~ &._cursor &-item {
-      border-bottom-color: var(--pal-front);
+    input:focus ~ &._cursor &-item, {
+      border-right-color: var(--pal-front);
+    }
+
+    input:focus ~ &._cursor_0 &-item {
+      border-left-color: var(--pal-front);
     }
   }
 }

package/src/components/UiCopy.vue

@@ -1,88 +1,88 @@
-<template>
-  <ui-button
-      :class="{'_hot': isCopied}"
-      :hollow="!isCopied"
-      class="ui-copy"
-      v-bind="$attrs"
-      @click="handleCopyToClipboard"
-  >
-    <slot />
-  </ui-button>
-</template>
-
-<script>
-import { defineComponent, onBeforeUnmount, ref } from 'vue'
-import UiButton                                  from './UiButton.vue'
-
-export default defineComponent({
-  name: 'ui-copy',
-  components: { UiButton },
-  props: {
-    value: { type: [ String, null ], required: true },
-  },
-  setup (props) {
-    const isCopied = ref(false)
-    let timeout
-
-    onBeforeUnmount(() => {
-      if (timeout) clearTimeout(timeout)
-    })
-
-    const handleCopyToClipboard = (event) => {
-      if (navigator.clipboard) {
-        navigator.clipboard.writeText(props.value)
-      } else {
-        execCopy()
-      }
-
-      isCopied.value = false
-      requestAnimationFrame(() => (isCopied.value = true))
-
-      if (timeout) clearTimeout(timeout)
-      timeout = setTimeout(() => isCopied.value = false, 1000)
-
-      event.target.blur()
-    }
-
-    // fallback
-    const execCopy = () => {
-      const textArea = document.createElement('textarea')
-      textArea.value = props.value
-      textArea.setAttribute('readonly', '')
-      textArea.style.position = 'absolute'
-      textArea.style.left = '-9999px'
-      document.body.appendChild(textArea)
-      textArea.select()
-
-      try {
-        document.execCommand('copy')
-      } catch (err) {
-        console.error(err)
-      } finally {
-        document.body.removeChild(textArea)
-      }
-    }
-
-    return {
-      handleCopyToClipboard,
-      isCopied,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-@import "../../scss";
-
-.ui-copy {
-  padding: spacing(0, 200);
-  @include ellipsis();
-
-  --ui-lt-h: 2em;
-  --ui-pal: var(--pal-grey900);
-
-  &._hot {
-    color: var(--pal-positive);
-  }
-}
-</style>
+<template>
+  <ui-button
+      :class="{'_hot': isCopied}"
+      :hollow="!isCopied"
+      class="ui-copy"
+      v-bind="$attrs"
+      @click="handleCopyToClipboard"
+  >
+    <slot />
+  </ui-button>
+</template>
+
+<script>
+import { defineComponent, onBeforeUnmount, ref } from 'vue'
+import UiButton                                  from './UiButton.vue'
+
+export default defineComponent({
+  name: 'ui-copy',
+  components: { UiButton },
+  props: {
+    value: { type: [ String, null ], required: true },
+  },
+  setup (props) {
+    const isCopied = ref(false)
+    let timeout
+
+    onBeforeUnmount(() => {
+      if (timeout) clearTimeout(timeout)
+    })
+
+    const handleCopyToClipboard = (event) => {
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(props.value)
+      } else {
+        execCopy()
+      }
+
+      isCopied.value = false
+      requestAnimationFrame(() => (isCopied.value = true))
+
+      if (timeout) clearTimeout(timeout)
+      timeout = setTimeout(() => isCopied.value = false, 1000)
+
+      event.target.blur()
+    }
+
+    // fallback
+    const execCopy = () => {
+      const textArea = document.createElement('textarea')
+      textArea.value = props.value
+      textArea.setAttribute('readonly', '')
+      textArea.style.position = 'absolute'
+      textArea.style.left = '-9999px'
+      document.body.appendChild(textArea)
+      textArea.select()
+
+      try {
+        document.execCommand('copy')
+      } catch (err) {
+        console.error(err)
+      } finally {
+        document.body.removeChild(textArea)
+      }
+    }
+
+    return {
+      handleCopyToClipboard,
+      isCopied,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-copy {
+  padding: spacing(0, 200);
+  @include ellipsis();
+
+  --ui-lt-h: 2em;
+  --ui-pal: var(--pal-grey900);
+
+  &._hot {
+    color: var(--pal-positive);
+  }
+}
+</style>

package/src/components/UiDropdown.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-      v-click-away="isOpen && handleClickaway"
-      :class="{ '_is-open': !disabled && isOpen }"
-      class="ui-dropdown"
-  >
-    <div class="ui-dropdown_trigger" @click="toggle">
-      <slot :isOpen="!disabled && isOpen" />
-    </div>
-
-    <div v-if="!disabled && isOpen" ref="slotWrap" :class="{ _right: snapToRight }" class="ui-dropdown_content">
-      <slot :dropdownClose="close" name="content" />
-    </div>
-  </div>
-</template>
-
-<script>
-// todo: rewrite to composition
-
-import { directive as clickAway } from 'vue3-click-away'
-
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ui-dropdown',
-  directives: { clickAway },
-  props: {
-    clickaway: { type: Boolean, default: true },
-    snapToRight: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-  },
-  emits: [ 'open', 'close' ],
-  data () {
-    return {
-      isOpen: false,
-    }
-  },
-
-  watch: {
-    isOpen (value) {
-      this.$emit(value ? 'open' : 'close')
-    },
-  },
-
-  methods: {
-    handleClickaway (e) {
-      /* v-on-click-outside don't recognize slots */
-      const path = e.path || (e.composedPath && e.composedPath())
-      if (path.includes(this.$refs.slotWrap)) return
-
-      if (this.clickaway && this.isOpen) {
-        this.toggle()
-      }
-    },
-    toggle () {
-      if (this.disabled) return
-      this.isOpen = !this.isOpen
-    },
-    close () {
-      this.isOpen = false
-    },
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-@import "../../scss";
-
-.ui-dropdown {
-  @include typo(200);
-
-  padding: 0;
-  box-sizing: border-box;
-  position: relative;
-
-  &_trigger {
-    display: flex;
-    align-items: center;
-    justify-content: stretch;
-  }
-
-  &_content {
-    @include scrollbar-awesome();
-
-    overflow: auto;
-    min-width: 100%;
-    max-width: 100vw;
-    max-height: var(--ui-dropdown-max-height);
-    flex-direction: column;
-    justify-content: stretch;
-    border-radius: var(--ui-lt-border-radius);
-    position: absolute;
-    top: 100%;
-    background: var(--ui-pal-bg);
-    margin-top: spacing(200);
-    z-index: var(--lt-z-pop);
-    background: var(--pal-bg);
-    box-shadow: 0 3px 11px rgba(var(--rgb-front), 0.2);
-
-    &:not(._right) {
-      left: 0;
-    }
-
-    &._right {
-      right: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div
+      v-click-away="isOpen && handleClickaway"
+      :class="{ '_is-open': !disabled && isOpen }"
+      class="ui-dropdown"
+  >
+    <div class="ui-dropdown_trigger" @click="toggle">
+      <slot :isOpen="!disabled && isOpen" />
+    </div>
+
+    <div v-if="!disabled && isOpen" ref="slotWrap" :class="{ _right: snapToRight }" class="ui-dropdown_content">
+      <slot :dropdownClose="close" name="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+// todo: rewrite to composition
+
+import { directive as clickAway } from 'vue3-click-away'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-dropdown',
+  directives: { clickAway },
+  props: {
+    clickaway: { type: Boolean, default: true },
+    snapToRight: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: [ 'open', 'close' ],
+  data () {
+    return {
+      isOpen: false,
+    }
+  },
+
+  watch: {
+    isOpen (value) {
+      this.$emit(value ? 'open' : 'close')
+    },
+  },
+
+  methods: {
+    handleClickaway (e) {
+      /* v-on-click-outside don't recognize slots */
+      const path = e.path || (e.composedPath && e.composedPath())
+      if (path.includes(this.$refs.slotWrap)) return
+
+      if (this.clickaway && this.isOpen) {
+        this.toggle()
+      }
+    },
+    toggle () {
+      if (this.disabled) return
+      this.isOpen = !this.isOpen
+    },
+    close () {
+      this.isOpen = false
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-dropdown {
+  @include typo(200);
+
+  padding: 0;
+  box-sizing: border-box;
+  position: relative;
+
+  &_trigger {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+  }
+
+  &_content {
+    @include scrollbar-awesome();
+
+    overflow: auto;
+    min-width: 100%;
+    max-width: 100vw;
+    max-height: var(--ui-dropdown-max-height);
+    flex-direction: column;
+    justify-content: stretch;
+    border-radius: var(--ui-lt-border-radius);
+    position: absolute;
+    top: 100%;
+    background: var(--ui-pal-bg);
+    margin-top: spacing(200);
+    z-index: var(--lt-z-pop);
+    background: var(--pal-bg);
+    box-shadow: 0 3px 11px rgba(var(--rgb-front), 0.2);
+
+    &:not(._right) {
+      left: 0;
+    }
+
+    &._right {
+      right: 0;
+    }
+  }
+}
+</style>

package/src/components/UiDropdownItem.vue

@@ -1,66 +1,66 @@
-<template>
-  <div
-      :class="{
-      '_interactive': interactive || autoClose,
-      '_active': active,
-    }"
-      class="ui-dropdown-item"
-      @click="handleClick"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ui-dropdown-item',
-  props: {
-    autoClose: { type: Boolean, default: false },
-    interactive: { type: Boolean, default: false },
-    active: { type: Boolean, default: false },
-    look: { type: [ String ], default: 'default' },
-  },
-  methods: {
-    handleClick () {
-      if (this.autoClose) {
-        this.$parent.close()
-      }
-    },
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-@import "../../scss";
-
-.ui-dropdown-item {
-  padding: spacing(200) spacing(400);
-  display: flex;
-  align-items: center;
-  min-height: var(--ui-lt-h);
-
-  &._interactive {
-    color: var(--ui-pal-text);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--ui-pal);
-    }
-
-    &:focus,
-    &:active {
-      outline: none;
-    }
-  }
-
-  &._active {
-    outline: none;
-    color: var(--ui-pal);
-
-    &:hover {
-    }
-  }
-}
-</style>
+<template>
+  <div
+      :class="{
+      '_interactive': interactive || autoClose,
+      '_active': active,
+    }"
+      class="ui-dropdown-item"
+      @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-dropdown-item',
+  props: {
+    autoClose: { type: Boolean, default: false },
+    interactive: { type: Boolean, default: false },
+    active: { type: Boolean, default: false },
+    look: { type: [ String ], default: 'default' },
+  },
+  methods: {
+    handleClick () {
+      if (this.autoClose) {
+        this.$parent.close()
+      }
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-dropdown-item {
+  padding: spacing(200) spacing(400);
+  display: flex;
+  align-items: center;
+  min-height: var(--ui-lt-h);
+
+  &._interactive {
+    color: var(--ui-pal-text);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--ui-pal);
+    }
+
+    &:focus,
+    &:active {
+      outline: none;
+    }
+  }
+
+  &._active {
+    outline: none;
+    color: var(--ui-pal);
+
+    &:hover {
+    }
+  }
+}
+</style>