fu-kit 0.4.2 → 0.6.0

package/src/components/UiSidebar.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="ui-sidebar" :class="{'_shown':isOpen}" @mousedown.self="$emit('close')">
+    <transition name="bounce">
+      <div class="ui-sidebar_content" v-if="isOpen">
+        <button v-if="showClose" class="ui-sidebar_close" @click="$emit('close')">
+          <ui-icon name="cross" />
+        </button>
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+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";
+
+html {
+  --ui-sidebar-max-w: 45vw;
+  --ui-sidebar-min-w: 25vw;
+}
+</style>
+
+<style scoped lang="scss">
+@import "../../scss";
+
+.ui-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--lt-z-nav);
+  background-color: transparent;
+  transition-timing-function: linear;
+  transition-duration: 200ms;
+  transition-property: background-color, visibility;
+  pointer-events: none;
+  visibility: hidden;
+
+  &._shown {
+    background: var(--pal-overlay);
+    visibility: visible;
+    pointer-events: unset;
+  }
+
+  &_content {
+    @include scrollbar-awesome();
+
+    overflow: auto;
+    position: absolute;
+    left: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    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;
+  }
+}
+
+.bounce-enter-active {
+  animation: slide-right 200ms;
+}
+
+.bounce-leave-active {
+  animation: slide-right 200ms reverse;
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

package/src/components/UiText.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+      :class="{'_disabled': disabled || $attrs.readOnly !== undefined, 'ui-text': !naked }"
+      v-bind="{ class: $attrs.class }"
+  >
+    <slot />
+    <slot name="left" />
+    <input
+        v-bind="{...$attrs, disabled, class: undefined}"
+        :value="modelValue"
+        class="ui-text_input"
+        :class="{ _naked: naked }"
+        @input="$emit('update:modelValue', $event.target.value)"
+        @focus="handleFocus"
+        ref="inputRef"
+    >
+    <slot name="right" />
+  </div>
+</template>
+
+<script>
+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";
+
+.ui-text {
+  @include typo(200);
+
+  padding: 0;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: stretch;
+  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);
+  transition-duration: 240ms;
+  transition-timing-function: ease-in-out;
+  transition-property: border-color, box-shadow;
+  height: var(--ui-lt-h);
+  background: var(--pal-white);
+
+  &_input {
+    @include typo(200);
+    padding: var(--ui-input-padding, #{spacing(100)} #{spacing(300)});
+
+    font-family: var(--typo-font-ui);
+    color: var(--ui-pal-text);
+    caret-color: var(--ui-pal);
+    min-height: min(100%);
+    border: none;
+    outline: none;
+    background: transparent;
+    box-sizing: border-box;
+    flex: 1;
+    display: block;
+    min-width: 0;
+    margin: 0;
+
+    &::selection {
+      background-color: var(--ui-pal);
+      color: var(--ui-pal-text-select);
+    }
+
+    &::placeholder {
+      color: var(--ui-pal-placeholder);
+    }
+
+    &[disabled], &[read-only] {
+      cursor: not-allowed;
+      color: var(--ui-pal-disabled-border);
+    }
+
+    &._naked {
+      padding: var(--ui-input-padding, 0);
+    }
+  }
+
+  &:hover {
+    outline: none;
+    box-shadow: 0 5px 12px -4px rgb(var(--rgb-dark), 0.2);
+  }
+
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 0 var(--ui-pal);
+    border-color: var(--ui-pal);
+  }
+
+  &._disabled {
+    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
+    background: var(--ui-pal-bg);
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/UiTextarea.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+      class="ui-text"
+      v-bind="{ class: $attrs.class }"
+      :class="{'_disabled': $attrs.disabled !== undefined || $attrs.readOnly  !== undefined }"
+  >
+    <textarea
+        ref="textarea"
+        v-bind="{...$attrs, class: undefined}"
+        :value="modelValue"
+        class="ui-text_textarea"
+        @input="handleInput"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ui-textarea',
+  props: {
+    modelValue: {
+      type: [ String, Number ],
+      default: '',
+    },
+    autoResize: { type: Boolean, default: false },
+  },
+  emits: [ 'update:modelValue' ],
+  setup (props, { emit }) {
+    const textarea = ref(null)
+    const handleInput = async (e) => {
+      emit('update:modelValue', e.target.value)
+      resize(e.target)
+    }
+    const resize = (elm) => {
+      if (!props.autoResize) return
+      elm.style.height = 'auto'
+      elm.style.height = `${ elm.scrollHeight }px`
+    }
+    onMounted(() => resize(textarea.value))
+
+    return { handleInput, textarea }
+  },
+})
+</script>
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-text {
+  @include typo(200);
+
+  padding: 0;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: stretch;
+  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);
+  transition-duration: 240ms;
+  transition-timing-function: ease-in-out;
+  transition-property: border-color, box-shadow;
+  min-height: var(--ui-lt-h);
+  background: var(--ui-pal-bg);
+
+  &_textarea {
+    @include scrollbar-awesome();
+    @include typo(200);
+    padding: spacing(200, 300);
+    margin: spacing(100, 100, 100, 0);
+
+    color: var(--ui-pal-text);
+    caret-color: var(--ui-pal);
+    border: 0 none;
+    outline: none;
+    background: transparent;
+    box-sizing: border-box;
+    flex: 1;
+    display: block;
+    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-textarea-min-h, 4em);
+    max-height: var(--ui-textarea-max-h, 400px);
+    height: var(--ui-lt-h);
+    font-family: var(--typo-font-ui);
+
+    &::selection {
+      background-color: var(--ui-pal);
+      color: var(--ui-pal-text-select);
+    }
+
+    &[disabled], &[read-only] {
+      cursor: text;
+      color: var(--ui-pal-disabled-border);
+    }
+  }
+
+  &:hover {
+    outline: none;
+    box-shadow: 0 5px 12px -4px rgb(var(--rgb-dark), 0.2);
+  }
+
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 0 var(--ui-pal);
+    border-color: var(--ui-pal);
+  }
+
+  &._disabled {
+    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
+    box-shadow: none;
+  }
+}
+</style>

package/src/entry.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+export { default as UiButton }       from './components/UiButton.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 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'

package/src/scss-kit/typo.scss

@@ -1,39 +1,39 @@
-@mixin typo($h, $l:null) {
-  font-size: var(--typo-h#{$h});
-
-  @if ($l) {
-    line-height: var(--typo-lh#{$l});
-  }
-}
-
-@function spacing($spacing-code: null) {
-  @if (
-      $spacing-code == 0 or
-      $spacing-code == auto or
-      $spacing-code == unset or
-      $spacing-code == null
-  ) {
-    @return $spacing-code;
-  }
-
-  @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);
-}
-
-@mixin ellipsis($display: block) {
-  display: $display;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@function typo-h($h) {
+  @return var(--typo-h#{$h});
+}
+
+@function typo-lh($l) {
+  @return var(--typo-lh#{$l});
+}
+
+@mixin typo($h, $l:null) {
+  font-size: typo-h($h);
+
+  @if ($l) {
+    line-height: typo-lh($l);
+  }
+}
+
+@function _spacing($spacing-code) {
+  @if (
+      $spacing-code == 0 or
+      $spacing-code == auto or
+      $spacing-code == unset or
+      $spacing-code == null
+  ) {
+    @return $spacing-code;
+  }
+
+  @return var(--lt-sp#{$spacing-code});
+}
+
+@function spacing($t, $r: null, $b: null, $l: null) {
+  @return _spacing($t) _spacing($r) _spacing($b) _spacing($l)
+}
+
+@mixin ellipsis($display: block) {
+  display: $display;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/src/scss-kit/ui.scss

@@ -1,46 +1,49 @@
-@mixin scrollbar-awesome($transparent: false) {
-  &::-webkit-scrollbar-track {
-    background-color: var(--ui-pal-bg);
-  }
-
-  &::-webkit-scrollbar {
-    width: var(--ui-lt-scroll-width);
-    height: var(--ui-lt-scroll-width);
-    border-radius: var(--ui-lt-scroll-width);
-    background-color: var(--ui-pal-bg);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 1px solid var(--ui-pal-bg);
-    border-radius: var(--ui-lt-scroll-width);
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background-color: transparent !important;
-    border: 0 none !important;
-    box-shadow: none !important;
-  }
-
-  &:focus::-webkit-scrollbar-thumb,
-  &:hover::-webkit-scrollbar-thumb, {
-    background-color: var(--ui-pal);
-  }
-}
-
-@mixin scrollbar-invisible() {
-  &::-webkit-scrollbar {
-    width: 0;
-    background-color: transparent;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-
+@mixin scrollbar-awesome($hide: false) {
+  &::-webkit-scrollbar-track {
+    background-color: var(--ui-scroll-bg, inherit);
+  }
+
+  &::-webkit-scrollbar {
+    width: var(--ui-scroll-width);
+    height: var(--ui-scroll-width);
+    border-radius: var(--ui-scroll-width);
+    background-color: var(--ui-scroll-bg, inherit);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 1px solid var(--ui-scroll-bg, inherit);
+    border-radius: var(--ui-scroll-width);
+    @if ($hide) {
+      background-color: inherit;
+    } @else {
+      background-color: var(--ui-pal);
+    }
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent !important;
+    border: 0 none !important;
+    box-shadow: none !important;
+  }
+  @if ($hide) {
+    &:focus::-webkit-scrollbar-thumb,
+    &:hover::-webkit-scrollbar-thumb, {
+      background-color: var(--ui-pal);
+    }
+  }
+}
+
+@mixin scrollbar-invisible() {
+  &::-webkit-scrollbar {
+    width: 0;
+    background-color: transparent;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}