fu-kit 0.5.1 → 0.6.0

package/src/components/UiCheck.vue

@@ -0,0 +1,206 @@
+<template>
+  <label
+      class="ui-check"
+      :class="{'_disabled': isDisabled,  '_checked': modelValue }"
+      v-bind="{ class: $attrs.class, style: $attrs.style }"
+      @mouseup="mouseUp"
+  >
+    <input
+        v-bind="{...$attrs, disabled: isDisabled, type: 'checkbox', class: undefined, style: undefined}"
+        class="ui-check_input"
+        @input="$emit('update:modelValue', $event.target.checked)"
+        :checked="modelValue"
+        ref="inputRef"
+    >
+    <span
+        class="ui-check_box"
+        :class="{
+          'ui-check_switch': switchLike,
+          'ui-check_check': !switchLike,
+          _loading: isLoading
+        }"
+    >
+        <svg v-if="!switchLike" class="ui-check_check-icon" viewBox="0 0 24 24">
+          <path stroke="var(--ui-pal, currentColor)" stroke-linecap="round" stroke-width="2" d="m7.5 12.5 4 3 5.5-8" />
+        </svg>
+    </span>
+    <slot />
+  </label>
+</template>
+
+<script>
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ui-check',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    switchLike: { type: Boolean, default: false },
+    thin: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: [ 'update:modelValue' ],
+  setup (props) {
+    const inputRef = ref(null)
+    const isDisabled = computed(() => props.disabled || props.disabled === '')
+
+
+    const mouseUp = () => {
+      // oof
+      setTimeout(() => {
+        inputRef.value.blur()
+      }, 0)
+    }
+
+    return { isDisabled, inputRef, mouseUp }
+  },
+})
+</script>
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-check {
+  @include typo(200);
+
+  user-select: none;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: var(--ui-check-justify-content, stretch);
+  height: var(--ui-lt-h);
+  position: relative;
+  outline: none;
+  color: var(--pal-text-dimm);
+  font-family: var(--typo-font-text);
+  cursor: pointer;
+  line-height: 1;
+
+  &_input {
+    opacity: 0; // weird, but it's working inside the label
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+
+  &_check {
+    border-style: var(--ui-lt-border-style);
+    border-width: var(--ui-check-border-w);
+    border-color: var(--pal-grey700);
+    height: var(--ui-check-size);
+    width: var(--ui-check-size);
+    border-radius: var(--ui-lt-border-radius);
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+    margin-right: spacing(200);
+    transition: all var(--ui-transition);
+
+    &-icon {
+      transition: all var(--ui-transition);
+      transform: scale(0);
+      width: 100%;
+    }
+  }
+
+  &._checked &_check {
+    border-color: var(--ui-pal);
+  }
+
+  &._checked &_check-icon {
+    transform: scale(1.4);
+  }
+
+  &_switch {
+    width: var(--ui-switch-w);
+    border-radius: var(--ui-switch-h);
+    background-color: var(--pal-grey700);
+    border: var(--ui-lt-border-width) solid var(--pal-grey700);
+    margin-right: spacing(200);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: var(--ui-switch-h);
+
+    --switch-left: 0;
+
+    &:before {
+      transform: translateX(var(--switch-left));
+      content: "";
+      display: block;
+      background-color: white;
+      border: var(--ui-lt-border-width) solid transparent;
+      border-radius: var(--ui-switch-h);
+      height: calc(100% - var(--ui-lt-border-width) * 2);
+      aspect-ratio: 1;
+      transition: all var(--ui-transition);
+    }
+  }
+
+  &._checked &_switch {
+    background-color: var(--ui-pal);
+    border-color: var(--ui-pal);
+  }
+
+  &._checked &_switch:before {
+    --switch-left: calc(var(--ui-switch-w) - var(--ui-switch-h));
+    transform: translateX(var(--switch-left));
+  }
+
+  &._checked {
+    color: var(--pal-text);
+  }
+
+  &:hover:not(&._disabled) &_box {
+    box-shadow: 0 5px 12px -4px rgb(var(--rgb-dark), 0.2);
+  }
+
+  &:hover {
+    color: var(--pal-text);
+  }
+
+  &:focus-within &_box {
+    box-shadow: 0 0 2px 4px rgba(var(--ui-rgb), 0.3);
+  }
+
+  &._disabled {
+    color: var(--ui-pal-disabled-border);
+    cursor: not-allowed;
+  }
+
+  &._disabled &_check {
+    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
+    box-shadow: none;
+  }
+
+  &._disabled &_switch {
+    background-color: rgba(var(--rgb-grey700), 0.25);
+    border-color: transparent;
+  }
+
+  &._disabled._checked &_switch {
+    background-color: rgba(var(--ui-rgb), 0.3);
+  }
+}
+
+._loading {
+  animation: pulse 1000ms infinite;
+}
+
+@keyframes pulse {
+  40% {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 5px rgba(var(--ui-rgb), 0.3);
+  }
+
+  80% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(var(--ui-rgb), 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--ui-rgb), 0)
+  }
+}
+</style>

package/src/components/UiCodeInput.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="code-input">
+    <div class="code-input_wrapper">
+      <input
+          :maxlength="$props.length"
+          type="text"
+          class="code-input_inp"
+          :value="$props.modelValue"
+          @input="handleInput"
+          ref="inp"
+          @focus.passive="selectionUpdate"
+          @dragend.passive="selectionUpdate"
+          @mouseup.passive="selectionUpdate"
+          @keydown.passive="selectionUpdate"
+          @keyup.passive="selectionUpdate"
+          v-bind="{ ...$attrs }"
+      />
+      <div
+          v-for="i in $props.length"
+          :key="'char' + i"
+          class="code-input_char"
+          :class="{
+            '_select': i - 1 >= selection.from && i - 1 < selection.to && selection.from !== selection.to,
+            '_cursor': i - 1 === selection.to,
+          }"
+      >
+        <span class="code-input_char-item">{{ chars[i - 1] || '' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+
+export default {
+  name: 'ui-code-input',
+  props: {
+    modelValue: {
+      type: String,
+    },
+    length: {
+      type: Number,
+      default: 6,
+    },
+  },
+  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
+    }
+
+    const handleInput = (e) => {
+      emit('update:modelValue', e.target.value)
+    }
+
+    const chars = computed(() => (props.modelValue).split(''))
+
+    onMounted(() => { })
+    onBeforeUnmount(() => { })
+
+    return { chars, selection, selectionUpdate, inp, handleInput }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.code-input {
+  --charbox-width: 34px;
+  --chabox-height: 48px;
+
+  display: flex;
+
+  &_wrapper {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: spacing(400);
+  }
+
+  &_inp {
+    padding: 14px;
+    position: absolute;
+    width: 100%;
+    border: none;
+    background: transparent;
+    font-family: var(--typo-font-mono);
+    font-size: var(--typo-h200);
+    letter-spacing: 41px;
+    outline: none;
+    opacity: 0;
+  }
+
+  &_char {
+    width: var(--charbox-width);
+    height: var(--ui-lt-h);
+    border: 1px solid var(--charbox-border-color, var(--pal-grey300));
+    border-radius: var(--ui-lt-border-radius);
+    color: var(--charbox-text-color, var(--pal-grey900));
+    align-items: center;
+    justify-content: center;
+    display: flex;
+
+    &-item {
+      border-width: 2px 0;
+      border-style: solid;
+      border-color: transparent;
+      background: transparent;
+      min-width: 0.75em;
+      min-height: 1.5em;
+      text-align: center;
+    }
+
+    &._select &-item {
+      color: var(--pal-white);
+      background: var(--pal-primary);
+    }
+
+    input:focus ~ &._cursor {
+      border-color: var(--ui-pal);
+    }
+
+    input:focus ~ &._cursor &-item {
+      border-bottom-color: var(--pal-black);
+    }
+  }
+}
+</style>

package/src/components/{FuCodeView.vue → UiCodeView.vue}

@@ -1,63 +1,63 @@
-<template>
-  <div class="fu-code-view">
-    <fu-button-link
-        v-if="collapse"
-        class="fu-code-view_toggle"
-        @click="isShown = !isShown"
-    >
-      {{ isShown ? 'Hide' : 'Show' }} {{ label }}
-    </fu-button-link>
-    <p class="fu-code-view_title" v-else-if="label">{{ label }}</p>
-    <pre v-if="collapse ? isShown : true" class="fu-code-view_pre"><slot /></pre>
-  </div>
-</template>
-
-<script>
-import { ref, toRaw } from 'vue'
-
-import FuButtonLink from './FuButtonLink.vue'
-
-export default {
-  name: 'fu-code-view',
-  components: { FuButtonLink },
-  props: {
-    label: { type: String, default: '' },
-    collapse: { type: Boolean, default: null },
-  },
-  setup (props) {
-    const collapse = ref(toRaw(props.collapse))
-    const isShown = ref(false)
-    const label = props.label
-    return { isShown, label, collapse }
-  },
-}
-</script>
-
-<style scoped lang="scss">
-@import "../../scss";
-
-.fu-code-view {
-  @include spacing-margin(200, 0);
-
-  &_title {
-    @include typo(100);
-
-    font-weight: bold;
-    margin-bottom: spacing(200);
-  }
-
-  &_pre {
-    @include scrollbar-awesome();
-    @include spacing-padding(300, 200);
-
-    font-family: var(--typo-font-mono);
-    overflow: auto;
-    max-width: 100%;
-    background: var(--pal-block);
-    border: 1px solid var(--pal-block-border);
-    border-radius: var(--ui-lt-border-radius);
-
-    --ui-scroll-bg: var(--pal-block);
-  }
-}
+<template>
+  <div class="ui-code-view">
+    <ui-button-link
+        v-if="collapse"
+        class="ui-code-view_toggle"
+        @click="isShown = !isShown"
+    >
+      {{ isShown ? 'Hide' : 'Show' }} {{ label }}
+    </ui-button-link>
+    <p class="ui-code-view_title" v-else-if="label">{{ label }}</p>
+    <pre v-if="collapse ? isShown : true" class="ui-code-view_pre"><slot /></pre>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, toRaw } from 'vue'
+
+import UiButtonLink from './UiButtonLink.vue'
+
+export default defineComponent({
+  name: 'ui-code-view',
+  components: { UiButtonLink },
+  props: {
+    label: { type: String, default: '' },
+    collapse: { type: Boolean, default: null },
+  },
+  setup (props) {
+    const collapse = ref(toRaw(props.collapse))
+    const isShown = ref(false)
+    const label = props.label
+    return { isShown, label, collapse }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@import "../../scss";
+
+.ui-code-view {
+  margin: spacing(200, 0);
+
+  &_title {
+    @include typo(100);
+
+    font-weight: bold;
+    margin-bottom: spacing(200);
+  }
+
+  &_pre {
+    @include scrollbar-awesome();
+    padding: spacing(300, 200);
+
+    font-family: var(--typo-font-mono);
+    overflow: auto;
+    max-width: 100%;
+    background: var(--pal-block);
+    border: 1px solid var(--pal-block-border);
+    border-radius: var(--ui-lt-border-radius);
+
+    --ui-scroll-bg: var(--pal-block);
+  }
+}
 </style>

package/src/components/{FuCopy.vue → UiCopy.vue}

@@ -1,24 +1,24 @@
 <template>
-  <fu-button
-      hollow
+  <ui-button
+      :hollow="!isCopied"
       v-bind="$attrs"
-      class="fu-copy"
+      class="ui-copy"
       @click="handleCopyToClipboard"
       :class="{'_hot': isCopied}"
   >
     <slot />
-  </fu-button>
+  </ui-button>
 </template>
 
 <script>
-import { onBeforeUnmount, ref } from 'vue'
-import FuButton                 from './FuButton.vue'
+import { defineComponent, onBeforeUnmount, ref } from 'vue'
+import UiButton                                  from './UiButton.vue'
 
-export default {
-  name: 'fu-copy',
-  components: { FuButton },
+export default defineComponent({
+  name: 'ui-copy',
+  components: { UiButton },
   props: {
-    value: { type: String, required: true },
+    value: { type: [ String, null ], required: true },
   },
   setup (props) {
     const isCopied = ref(false)
@@ -68,42 +68,21 @@ export default {
       isCopied,
     }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-copy {
-  @include spacing-padding(0, 200);
+.ui-copy {
+  padding: spacing(0, 200);
   @include ellipsis();
 
-  // todo: replace on vanilla button to get rid of !important maybe?
   --ui-lt-h: 2em;
-  --ui-pal: var(--pal-block-border);
-  color: var(--pal-text) !important;
-  overflow: hidden;
-
-  &._hollow {
-    font-weight: normal;
-
-    &:active {
-      box-shadow: none;
-    }
-
-    &:hover {
-      box-shadow: none;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
+  --ui-pal: var(--pal-light);
 
-    &._hot {
-      transition: none;
-      border-color: var(--pal-positive);
-    }
+  &._hot {
+    color: var(--pal-positive);
   }
-
 }
 </style>

package/src/components/{FuDropdown.vue → UiDropdown.vue}

@@ -1,14 +1,14 @@
 <template>
   <div
-      class="fu-dropdown"
+      class="ui-dropdown"
       :class="{ '_is-open': !disabled && isOpen }"
       v-click-away="isOpen && handleClickaway"
   >
-    <div class="fu-dropdown_trigger" @click="toggle">
-      <slot />
+    <div class="ui-dropdown_trigger" @click="toggle">
+      <slot :isOpen="!disabled && isOpen" />
     </div>
 
-    <div v-if="!disabled && isOpen" class="fu-dropdown_content" ref="slotWrap">
+    <div v-if="!disabled && isOpen" class="ui-dropdown_content" :class="{ _right: snapToRight }" ref="slotWrap">
       <slot name="content" :dropdownClose="close" />
     </div>
   </div>
@@ -19,11 +19,14 @@
 
 import { directive as clickAway } from 'vue3-click-away'
 
-export default {
-  name: 'fu-dropdown',
+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' ],
@@ -57,13 +60,13 @@ export default {
       this.isOpen = false
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-dropdown {
+.ui-dropdown {
   @include typo(200);
 
   padding: 0;
@@ -78,24 +81,29 @@ export default {
 
   &_content {
     @include scrollbar-awesome();
-    @include spacing-padding(300, 0);
 
     overflow: auto;
-    max-height: 30vh;
+    min-width: 100%;
     max-width: 100vw;
+    max-height: var(--ui-dropdown-max-height);
     flex-direction: column;
     justify-content: stretch;
-    border-width: var(--ui-lt-border-width);
     border-radius: var(--ui-lt-border-radius);
-    border-color: var(--ui-pal);
-    border-style: solid;
     position: absolute;
-    left: 0;
     top: 100%;
-    min-width: 100%;
     background: var(--ui-pal-bg);
     margin-top: spacing(200);
     z-index: var(--lt-z-pop);
+    background: var(--pal-white);
+    box-shadow: 0 3px 11px rgba(var(--rgb-black), 0.2);
+
+    &:not(._right) {
+      left: 0;
+    }
+
+    &._right {
+      right: 0;
+    }
   }
 }
 </style>

package/src/components/{FuDropdownItem.vue → UiDropdownItem.vue}

@@ -1,6 +1,6 @@
 <template>
   <div
-      class="fu-dropdown-item"
+      class="ui-dropdown-item"
       :class="{
       '_interactive': interactive || autoClose,
       '_active': active,
@@ -12,8 +12,10 @@
 </template>
 
 <script>
-export default {
-  name: 'fu-dropdown-item',
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-dropdown-item',
   props: {
     autoClose: { type: Boolean, default: false },
     interactive: { type: Boolean, default: false },
@@ -27,32 +29,24 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-dropdown-item {
-  &:first-child {
-    margin-top: spacing(200);
-  }
-
-  &:last-child {
-    margin-bottom: spacing(200);
-  }
-
-  padding: spacing(200) calc(#{spacing(200)} + 1px);
+.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-acc);
-      background-color: var(--ui-pal);
+      color: var(--ui-pal);
     }
 
     &:focus,
@@ -68,10 +62,5 @@ export default {
     &:hover {
     }
   }
-
-  &._selected {
-    color: black;
-    background-color: orange;
-  }
 }
 </style>