fu-kit 0.4.2 → 0.6.0

package/LICENCE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Volodymyr Ishchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,58 +1,23 @@
 # fu-kit
 
-## Standard Vue run sequence
-
-Lightweight cozy components library for Vue3.
-
-Demo [fu-kit.vovchisko.dev](https://fu-kit.vovchisko.dev)
-
 ![Unreasonable](https://img.shields.io/badge/unreasonable-absolutely-green)
-
 ![NPM Version](https://img.shields.io/npm/v/fu-kit.svg)
-![npm bundle size](https://img.shields.io/bundlephobia/min/fu-kit)
 ![NPM Downloads per month](https://img.shields.io/npm/dm/fu-kit.svg)
 ![GitHub last commit](https://img.shields.io/github/last-commit/vovchisko/fu-kit.svg)
 ![GitHub license](https://img.shields.io/github/license/vovchisko/fu-kit.svg)
 
-```
-npm i          # install
-npm run serve  # serve locally
-npm run build  # build demo
-```
-
-> ### 🚧 Use with caution! 🚧
-> This components library is under development.
+Lightweight cozy components library for Vue3.
 
-## Components
+Non-buildable Vue3 SFC components built, mostly, to work with vite, but with some additional pain can works with vue-cli+webpack.
 
-- [x] button
-- [x] button-link
-- [x] code-view
-- [x] copy
-- [ ] progress-radial
-- [x] select
-- [x] select fancy (select-x)
-- [ ] select transparent (slot)
-- [x] text
-- [x] sidebar
-- [ ] modal
-- [ ] drawer
-- [x] text
-- [x] textarea
-- [ ] checkbox
-- [ ] radio
-- [ ] checklist
-- [ ] checklist fancy
-- [ ] slider
-- [ ] layout w/ sidebar
-- [ ] layout w/ nav-bar
- 
-## Utils
+Use it with caution. This is my play yard. 
 
-- [ ] media-listener
-- [ ] scroll-blocker
-- [ ] ?
+## Standard Vue run sequence
 
-## Icons
+Demo [fu-kit.vovchisko.dev](https://fu-kit.vovchisko.dev)
 
-Icons can be in-lined SVG or font-based. TBD.
+```
+npm i          # install
+npm run serve  # serve locally
+npm run build  # build demo
+```

package/package.json

@@ -1,52 +1,45 @@
 {
   "name": "fu-kit",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "",
-  "main": "dist/fu-kit.ssr.js",
-  "browser": "dist/fu-kit.esm.js",
-  "module": "dist/fu-kit.esm.js",
-  "unpkg": "dist/fu-kit.min.js",
+  "main": "src/entry.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "sideEffects": [
+    "*.scss",
+    "*.vue"
+  ],
   "files": [
-    "dist/*",
+    "src/components/*",
     "src/scss-kit/*",
+    "src/utils/*",
+    "src/entry.js",
+    "src/constants.js",
     "reset.scss",
     "root.scss",
     "scss.scss"
   ],
-  "sideEffects": false,
-  "dependencies": {},
-  "scripts": {
-    "serve": "vue-cli-service serve src/serve/main.js",
-    "prebuild": "rimraf ./dist && rimraf ./docs",
-    "postbuild": "npm run build:docs",
-    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
-    "build:docs": "node ./scripts/re-link-docs.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config rollup.config.js --format iife"
-  },
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.0.11",
+    "@vitejs/plugin-vue": "^1.9.3",
     "cross-env": "^7.0.3",
-    "minimist": "^1.2.5",
-    "postcss": "^8.2.10",
     "rimraf": "^3.0.2",
-    "rollup": "^2.52.8",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
+    "vite": "^2.6.4"
   },
   "peerDependencies": {
-    "vue": "^3.0.5"
+    "vue": "^3.2.16"
   },
   "engines": {
     "node": ">=12"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "vue": "^3.2.16",
+    "vue-router": "^4.0.0-0",
+    "vue-the-mask": "^0.11.1",
+    "vue3-click-away": "^1.2.1"
   }
 }

package/reset.scss

@@ -1,71 +1,81 @@
-@import "src/scss-kit/typo";
-
-body {
-  margin: 0;
-  padding: 0;
-  color: var(--pal-text);
-}
-
-address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption,
-figure, footer, form, hgroup, hr, li, main, nav,
-ol, p, pre, section, table, ul {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: var(--typo-font-text);
-  line-height: 1.2;
-}
-
-h1, h2, h3, h4, h5, h6, header {
-  font-family: var(--typo-font-heading);
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  line-height: 1.2;
-}
-
-input, button, textarea, select, span, b, small {
-  box-sizing: border-box;
-  line-height: 1.2;
-}
-
-h1 {
-  @include typo(700);
-}
-
-h2 {
-  @include typo(600);
-}
-
-h3 {
-  @include typo(500);
-}
-
-h4 {
-  @include typo(400);
-}
-
-h5 {
-  @include typo(300);
-}
-
-p {
-  @include typo(200);
-}
-
-small {
-  @include typo(100);
-}
-
-label {
-  @include typo(100);
-  display: block;
-}
-
-a {
-  color: var(--pal-link);
-
-  &:active, &:focus {
-    color: var(--pal-link-active);
-  }
-}
+@import "src/scss-kit/typo";
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--pal-text);
+}
+
+address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption,
+figure, footer, form, hgroup, hr, li, main, nav,
+ol, p, pre, section, table, ul {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: var(--typo-font-text);
+  line-height: 1.2;
+}
+
+h1, h2, h3, h4, h5, h6, header {
+  font-family: var(--typo-font-heading);
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  line-height: 1.2;
+}
+
+input, button, textarea, select, span, b, small {
+  box-sizing: border-box;
+  line-height: 1;
+  font-family: var(--typo-font-text);
+  font-size: inherit;
+}
+
+pre {
+  font-family: var(--typo-font-mono);
+}
+
+h1 {
+  @include typo(700);
+}
+
+h2 {
+  @include typo(600);
+}
+
+h3 {
+  @include typo(500);
+}
+
+h4 {
+  @include typo(400);
+}
+
+h5 {
+  @include typo(300);
+}
+
+p {
+  @include typo(200);
+}
+
+small {
+  @include typo(100);
+}
+
+label {
+  @include typo(100);
+  display: block;
+}
+
+a {
+  color: var(--pal-link);
+
+  &:active, &:focus {
+    color: var(--pal-link-active);
+  }
+}
+
+svg {
+  fill: none;
+}

package/root.scss

@@ -1,11 +1,10 @@
 @import "src/scss-kit/typo";
 @import "src/scss-kit/colors";
 
-:root {
-
+html {
   // RAW RGB VALUES
   --rgb-white: #{hex2rgb(#FFFFFF)};
-  --rgb-light: #{hex2rgb(#FEFEFE)};
+  --rgb-light: #{hex2rgb(#FAFAFA)};
   --rgb-grey100: #{hex2rgb(#F4F4F4)};
   --rgb-grey200: #{hex2rgb(#DCDCDC)};
   --rgb-grey300: #{hex2rgb(#BFBFBF)};
@@ -18,12 +17,13 @@
   --rgb-dark: #{hex2rgb(#151515)};
   --rgb-black: #{hex2rgb(#000000)};
 
-  --rgb-brand: #{hex2rgb(#8347A8)};
-  --rgb-primary: #{hex2rgb(#2E88F1)};
-  --rgb-secondary: #{hex2rgb(#434F5F)};
-  --rgb-positive: #{hex2rgb(#6DBE2C)};
-  --rgb-warning: #{hex2rgb(#FFA927)};
-  --rgb-negative: #{hex2rgb(#FF4B4B)};
+  --rgb-brand: #{hex2rgb(#0095ff)};
+  --rgb-primary: #{hex2rgb(#0095ff)};
+  --rgb-secondary: #{hex2rgb(#131315)};
+  --rgb-positive: #{hex2rgb(#3e9400)};
+  --rgb-warning: #{hex2rgb(#ff7300)};
+  --rgb-negative: #{hex2rgb(#ff3535)};
+  --rgb-link: #{hex2rgb(#0095ff)};
 
   // Format palette colors: "--pal-{code}": #RGB
 
@@ -55,15 +55,16 @@
   --pal-acc-warning: rgb(var(--rgb-white));
   --pal-acc-negative: rgb(var(--rgb-white));
 
-  --pal-text: rgb(var(--rgb-dark));
+  --pal-text: rgb(var(--rgb-grey700));
   --pal-text-dimm: rgb(var(--rgb-grey600));
   --pal-block: rgb(var(--rgb-grey100));
   --pal-block-border: rgb(var(--rgb-grey200));
   --pal-bg: rgb(var(--rgb-white));
-  --pal-overlay: rgba(var(--rgb-dark), 0.2);
+  --pal-overlay: rgba(var(--rgb-grey500), 0.2);
   --pal-link: rgb(var(--rgb-primary));
-  --pal-link-active: rgb(var(--rgb-dark));
+  --pal-link-active: rgb(var(--rgb-brand));
 
+  --ui-rgb: var(--rgb-primary);
   --ui-pal: var(--pal-primary);
   --ui-pal-bg: var(--pal-bg);
   --ui-pal-acc: var(--pal-acc-primary);
@@ -74,17 +75,26 @@
   --ui-pal-disabled: rgb(var(--rgb-grey100));
   --ui-pal-disabled-border: rgb(var(--rgb-grey300));
 
-  --ui-transition: linear 120ms;
   --ui-lt-h: 36px;
   --ui-lt-h-sub: 22px;
+  --ui-lt-check-border-width: 2px;
+  --ui-switch-h: 24px;
+  --ui-switch-w: 38px;
+  --ui-check-size: 20px;
+  --ui-check-border-w: 2px;
   --ui-lt-border-style: solid;
-  --ui-lt-border-width: 1px;
+  --ui-lt-border-width: 2px;
   --ui-lt-border-radius: var(--lt-border-radius-inner);
   --ui-lt-disabled-border-style: dashed;
-  --ui-lt-scroll-width: 12px;
 
-  --typo-font-heading: 'Segoe UI', San Francisco, Roboto, Lucida Sans;
-  --typo-font-text: 'Segoe UI', San Francisco, Roboto, Lucida Sans;
+  --ui-scroll-bg: inherit;
+  --ui-scroll-width: 8px;
+
+  --ui-dropdown-max-height: 30vh;
+
+  --typo-font-text: Helvetica, 'Segoe UI', San Francisco, Roboto, Lucida Sans;
+  --typo-font-heading: var(--typo-font-text);
+  --typo-font-ui: var(--typo-font-text);
   --typo-font-mono: monospace;
 
   // font-size
@@ -105,8 +115,8 @@
   --typo-lh200: 16px;
   --typo-lh300: 18px;
   --typo-lh400: 22px;
-  --typo-lh500: 26px;
-  --typo-lh600: 32px;
+  --typo-lh500: 24px;
+  --typo-lh600: 36px;
   --typo-lh700: 42px;
   --typo-lh800: 48px;
   --typo-lh900: 64px;
@@ -122,8 +132,8 @@
   --lt-sp800: 256px;
   --lt-sp900: 512px;
 
-  --lt-border-radius: 9px;
-  --lt-border-radius-inner: 5px;
+  --lt-border-radius: 0px;
+  --lt-border-radius-inner: 0px;
 
   --lt-z-1: 1;
   --lt-z-back: -1;
@@ -131,4 +141,6 @@
   --lt-z-nav: 2000;
   --lt-z-modal-backdrop: 3000;
   --lt-z-modal: 3001;
+
+  --ui-transition: linear 120ms;
 }

package/src/components/UiButton.vue

@@ -0,0 +1,169 @@
+<template>
+  <button
+      v-bind="{
+        ...$attrs,
+        type: $attrs.type || 'button',
+        class: ['ui-button', (hollow ? ' _hollow' : ''), (naked ? ' _naked' : ''), (isLoading ? ' _loading' : '')].join(''),
+      }"
+      @mouseup="mUp"
+  >
+    <slot />
+    <ui-icon v-if="isLoading" name="loader" class="ui-button_loader" />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import UiIcon from './UiIcon.vue'
+
+export default defineComponent({
+  name: 'ui-button',
+  components: { UiIcon },
+  props: {
+    hollow: { type: Boolean, default: false },
+    naked: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false },
+  },
+  setup () {
+    const mUp = (e) => e.target.blur()
+    return { mUp }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-button {
+  @include typo(200);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: var(--ui-button-padding, #{spacing(300)} #{spacing(400)});
+  font-family: var(--typo-font-ui);
+  min-height: var(--ui-lt-h);
+  border-width: var(--ui-lt-border-width);
+  border-style: var(--ui-lt-border-style);
+  border-color: var(--ui-pal);
+  border-radius: var(--ui-lt-border-radius);
+  transition: all var(--ui-transition);
+  background: var(--ui-pal);
+  color: var(--ui-pal-acc);
+  line-height: 1;
+  will-change: box-shadow, transform;
+  gap: var(--ui-button-gap, #{spacing(300)});
+  outline: none;
+  user-select: none;
+
+  --icon-size: 1em;
+
+  -webkit-tap-highlight-color: transparent;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 12px -4px var(--ui-pal);
+  }
+
+  &:focus {
+    box-shadow: 0 4px 12px -4px var(--ui-pal);
+  }
+
+  &:active {
+    transition-duration: 20ms;
+    box-shadow: 0 3px 4px -2px var(--ui-pal);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--ui-pal-disabled);
+    border-color: var(--ui-pal-disabled-border);
+    border-style: var(--ui-lt-disabled-border-style);
+    color: var(--ui-pal-disabled-border);
+    box-shadow: none;
+  }
+
+  &._hollow {
+    background: transparent;
+    color: var(--ui-pal);
+
+    &:hover {
+      box-shadow: 0 3px 10px -4px var(--ui-pal);
+    }
+
+    &:focus {
+      box-shadow: 0 3px 10px -4px var(--ui-pal);
+    }
+
+    &:active {
+      box-shadow: 0 1px 4px -2px var(--ui-pal);
+    }
+
+    &:disabled {
+      color: var(--ui-pal-disabled-border);
+      box-shadow: none;
+    }
+  }
+
+  &._naked {
+    background: transparent;
+    color: var(--ui-pal);
+    border: 0 none;
+    padding: var(--ui-button-padding, var(--lt-sp300));
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:active {
+      box-shadow: none;
+    }
+
+    &:disabled {
+      color: var(--ui-pal-disabled-border);
+      box-shadow: none;
+    }
+  }
+
+  &._loading {
+    color: transparent;
+  }
+
+  &_loader {
+    --icon-size: 1em;
+    --icon-color: var(--ui-pal-acc);
+    position: absolute;
+    animation: spin 2s infinite;
+  }
+
+  &._hollow > &_loader, &._naked > &_loader {
+    --icon-size: 1em;
+    --icon-color: var(--ui-pal);
+    position: absolute;
+    animation: spin 2s infinite;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: scale(1) rotate(0);
+  }
+  50% {
+    transform: scale(1.5) rotate(180deg);
+  }
+  100% {
+    transform: scale(1) rotate(360deg);
+  }
+}
+</style>

package/src/components/UiButtonLink.vue

@@ -0,0 +1,74 @@
+<template>
+  <button
+      v-bind="{
+        ...$attrs,
+        type: $attrs.type || 'button',
+        class: 'ui-button-link',
+      }"
+      @mouseup="mUp"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-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" scoped>
+@import "../../scss";
+
+.ui-button-link {
+  @include typo(200);
+  padding: spacing(0, 0);
+
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: var(--typo-font-text);
+  border: 0 none;
+  transition: all var(--ui-transition);
+  background: transparent;
+  color: var(--pal-link);
+  line-height: 1;
+  will-change: box-shadow, transform;
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    color: var(--pal-link-active);
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--pal-link-active);
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--ui-pal-disabled);
+  }
+}
+</style>