fu-kit 0.4.2 → 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/UiCodeView.vue

@@ -0,0 +1,63 @@
+<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/UiCopy.vue

@@ -0,0 +1,88 @@
+<template>
+  <ui-button
+      :hollow="!isCopied"
+      v-bind="$attrs"
+      class="ui-copy"
+      @click="handleCopyToClipboard"
+      :class="{'_hot': isCopied}"
+  >
+    <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-light);
+
+  &._hot {
+    color: var(--pal-positive);
+  }
+}
+</style>

package/src/components/UiDropdown.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+      class="ui-dropdown"
+      :class="{ '_is-open': !disabled && isOpen }"
+      v-click-away="isOpen && handleClickaway"
+  >
+    <div class="ui-dropdown_trigger" @click="toggle">
+      <slot :isOpen="!disabled && isOpen" />
+    </div>
+
+    <div v-if="!disabled && isOpen" class="ui-dropdown_content" :class="{ _right: snapToRight }" ref="slotWrap">
+      <slot name="content" :dropdownClose="close" />
+    </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-white);
+    box-shadow: 0 3px 11px rgba(var(--rgb-black), 0.2);
+
+    &:not(._right) {
+      left: 0;
+    }
+
+    &._right {
+      right: 0;
+    }
+  }
+}
+</style>

package/src/components/UiDropdownItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+      class="ui-dropdown-item"
+      :class="{
+      '_interactive': interactive || autoClose,
+      '_active': active,
+    }"
+      @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>

package/src/components/UiIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg v-bind="{ ...$attrs }">
+    <use :href="`#${name}`"></use>
+  </svg>
+</template>
+
+<script>
+/**
+ * CSS vars:
+ *  - --ui-color: color of the icon
+ *  - --ui-size: size of the icon
+ */
+export default {
+  name: 'ui-icon',
+  props: {
+    name: { type: [ String ], required: true },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+svg {
+  display: block;
+  height: var(--icon-size, 24px);
+  width: var(--icon-size, 24px);
+  min-width: var(--icon-size, 24px);
+  stroke-width: 2px;
+}
+</style>