fu-kit 0.0.1-beta.2 → 0.0.1-beta.3

package/src/components/FuButtonLink.vue

@@ -0,0 +1,79 @@
+<template>
+  <button
+      v-bind="{
+        ...$attrs,
+        type: $attrs.type || 'button',
+        class: 'fu-button-link',
+      }"
+      @mouseup="mUp"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'fu-button-link',
+  props: {
+    hollow: { type: Boolean, default: false },
+  },
+  setup (props) {
+    const mUp = (e) => e.target.blur()
+    return { hollow: props.hollow, mUp }
+  },
+}
+</script>
+
+<style lang="scss">
+:root {
+  --button-link-pal: var(--pal-link);
+  --button-link-pal-active: var(--pal-link-active);
+  --button-link-disabled-pal: var(--ui-pal-disabled);
+}
+</style>
+
+<style lang="scss" scoped>
+.fu-button-link {
+  @include typo(200);
+  @include spacing-padding(0, 0);
+
+  display: inline-block;
+  font-weight: normal;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: var(--typo-font-text);
+  border: 0 none;
+  transition: var(--ui-transition);
+  background: transparent;
+  color: var(--button-link-pal);
+  line-height: 1;
+  will-change: box-shadow, transform;
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: underline;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus {
+    color: var(--button-link-pal-active);
+    text-decoration: underline dashed;
+  }
+
+  &:active {
+    color: var(--button-link-pal-active);
+    text-decoration: underline dashed;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--pal-link-active);
+  }
+}
+</style>

package/src/components/FuCodeView.vue

@@ -0,0 +1,58 @@
+<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">
+.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);
+
+    overflow: auto;
+    max-width: 100%;
+    background: pal(block-light);
+    border: 1px solid pal(block);
+    border-radius: var(--lt-border-radius-inner);
+  }
+}
+</style>

package/src/components/FuCopy.vue

@@ -0,0 +1,103 @@
+<template>
+  <fu-button
+      v-bind="$attrs"
+      hollow
+      class="fu-copy"
+      @click="handleCopyToClipboard"
+      :class="{'_hot': isCopied}"
+  >
+    <slot />
+  </fu-button>
+</template>
+
+<script>
+import { onBeforeUnmount, ref } from 'vue'
+import FuButton                 from '@/components/FuButton.vue'
+
+
+export default {
+  name: 'fu-copy',
+  components: { FuButton  },
+  props: {
+    value: { type: String, 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>
+.fu-copy {
+  @include spacing-padding(0, 200);
+
+  &._hollow {
+    font-weight: normal;
+
+    &:active {
+      box-shadow: none;
+    }
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &._hot {
+      transition: none;
+      border-color: var(--pal-positive);
+    }
+  }
+
+}
+</style>

package/src/components/FuProgressRadial.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="fu-progress-radial">
+    <div class="fu-progress-radial__svg-wrap">
+      <svg
+          class="fu-progress-radial__svg"
+          :viewBox="`0 0 ${r2} ${r2}`"
+          :width="r2"
+          :height="r2"
+      >
+        <circle
+            class="fu-progress-radial__svg-bg"
+            :cx="r"
+            :cy="r"
+            :r="r"
+        />
+        <circle
+            class="fu-progress-radial__svg-value"
+            :cx="r"
+            :cy="r"
+            :r="r"
+            :style="valueStyle"
+        />
+      </svg>
+    </div>
+    <span
+        class="fu-progress-radial__slot"
+        v-if="hasSlot('default')">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fu-progress-radial',
+  props: {
+    /**
+     * Value must be between 0 and 1 (otherwise will be normalized automatically)
+     */
+    value: { type: Number, default: 0 },
+  },
+  data () {
+    return {
+      r: 50, r2: 100,
+    }
+  },
+  computed: {
+    normalizeValue () {
+      if (this.value > 1) return 1
+      if (this.value < 0) return 0
+      return this.value
+    },
+    dasharray () {
+      return Math.PI * this.r2
+    },
+    valueStyle () {
+      return {
+        'stroke-dasharray': this.dasharray,
+        'stroke-dashoffset': this.dasharray * (1 - this.normalizeValue),
+      }
+    },
+  },
+  methods: {
+    hasSlot (slot) {
+      return !!this.$slots[slot]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.fu-progress-radial {
+  display: flex;
+  position: relative;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--progress-radial-size, 64px));
+  width: calc(var(--progress-radial-size, 64px));
+
+  &__svg-wrap {
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &__svg {
+    overflow: visible;
+    vertical-align: middle;
+    transform: rotate(90deg);
+    height: var(--progress-radial-size, 64px);
+    width: var(--progress-radial-size, 64px);
+  }
+
+  &__svg-bg {
+    stroke: var(--progress-radial-bg-stroke, #{pal(primary,0.2)});
+    fill: var(--progress-radial-bg-fill, transparent);
+    stroke-width: var(--progress-radial-stroke-width, 10);
+  }
+
+  &__svg-value {
+    fill: none;
+    stroke-dasharray: 0;
+    stroke-dashoffset: 0;
+    transition-duration: var(--progress-radial-t-duration, 500ms);
+    transition-property: var(--progress-radial-t-property, all);
+    transition-timing-function: var(--progress-radial-t-function, linear);
+    stroke: var(--progress-radial-color, #{pal(primary)});
+    stroke-linecap: var(--progress-radial-stroke-linecap, round);
+    stroke-width: var(--progress-radial-stroke-width, 10);
+  }
+}
+</style>

package/src/components/FuSelect.vue

@@ -1,55 +1,84 @@
-<template>
-  <label class="fu-select">
-    <span v-if="label" class="ui-select_label">{{ label }}</span>
-    <select
-        v-bind="$attrs"
-        :value="modelValue"
-        class="ui-select_input"
-        @input="$emit('update:modelValue', $event.target.value)"
-    >
-      <slot />
-    </select>
-  </label>
-</template>
-
-<script>
-console.log('fu-select: loaded')
-
-export default {
-  name: 'fu-select',
-  props: {
-    modelValue: {
-      type: [ String, Number ],
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(){
-    console.log('fu-select: setup!')
-  },
-  emits: [ 'update:modelValue' ],
-}
-</script>
-
-<style lang="scss" scoped>
-.fu-select {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: left;
-
-  &_label {
-    display: block;
-    width: 100%;
-  }
-
-  &_input {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <label class="fu-select" v-bind="{ class: $attrs.class }">
+    <select
+        class="fu-select_select"
+        v-bind="{  ...$attrs, class: undefined }"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    >
+      <slot />
+    </select>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'fu-select',
+  props: {
+    modelValue: {
+      type: [ String, Number ],
+      default: '',
+    },
+  },
+  emits: [ 'update:modelValue' ],
+}
+</script>
+
+<style lang="scss" scoped>
+.fu-select {
+  @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);
+
+  &_select {
+    @include typo(200);
+    @include spacing-padding(100, 200);
+
+    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;
+
+    &[disabled] {
+      cursor: not-allowed;
+      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);
+    background: transparent;
+    box-shadow: none;
+  }
+}
+</style>