fu-kit 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fu-kit",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
   "main": "src/entry.js",
   "scripts": {
@@ -15,17 +15,19 @@
   "files": [
     "src/components/*",
     "src/scss-kit/*",
+    "src/utils/*",
     "src/entry.js",
+    "src/constants.js",
     "reset.scss",
     "root.scss",
     "scss.scss"
   ],
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",
-    "vite": "^2.6.4",
     "cross-env": "^7.0.3",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.5"
+    "sass": "^1.26.5",
+    "vite": "^2.6.4"
   },
   "peerDependencies": {
     "vue": "^3.2.16"
@@ -34,8 +36,10 @@
     "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,13 +17,13 @@
   --rgb-dark: #{hex2rgb(#151515)};
   --rgb-black: #{hex2rgb(#000000)};
 
-  --rgb-brand: #{hex2rgb(#7F9CBB)};
-  --rgb-primary: #{hex2rgb(#2196F3)};
-  --rgb-secondary: #{hex2rgb(#434F5F)};
-  --rgb-positive: #{hex2rgb(#13964B)};
-  --rgb-warning: #{hex2rgb(#FF9900)};
-  --rgb-negative: #{hex2rgb(#FF331F)};
-  --rgb-link: #{hex2rgb(#0077B6)};
+  --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
 
@@ -56,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-link: rgb(var(--rgb-link));
+  --pal-overlay: rgba(var(--rgb-grey500), 0.2);
+  --pal-link: rgb(var(--rgb-primary));
   --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);
@@ -75,18 +75,24 @@
   --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-scroll-bg: inherit;
-  --ui-scroll-width: 11px;
+  --ui-scroll-width: 8px;
+
+  --ui-dropdown-max-height: 30vh;
 
-  --typo-font-text: Avenir, Helvetica, Arial, sans-serif;
+  --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;
@@ -109,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;
@@ -126,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;
@@ -135,4 +141,6 @@
   --lt-z-nav: 2000;
   --lt-z-modal-backdrop: 3000;
   --lt-z-modal: 3001;
+
+  --ui-transition: linear 120ms;
 }

package/src/components/{FuButton.vue → UiButton.vue}

@@ -3,39 +3,47 @@
       v-bind="{
         ...$attrs,
         type: $attrs.type || 'button',
-        class: 'fu-button' + (hollow ? ' _hollow' : ''),
+        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>
-export default {
-  name: 'fu-button',
+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 (props) {
+  setup () {
     const mUp = (e) => e.target.blur()
-    return { hollow: props.hollow, mUp }
+    return { mUp }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-button {
+.ui-button {
   @include typo(200);
 
-  padding: var(--ui-button-padding, #{spacing(300)} #{spacing(400)});
   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);
@@ -47,9 +55,12 @@ export default {
   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;
 
   & > * {
@@ -66,7 +77,6 @@ export default {
   }
 
   &:active {
-    transform: translateY(2px);
     transition-duration: 20ms;
     box-shadow: 0 3px 4px -2px var(--ui-pal);
   }
@@ -86,7 +96,6 @@ export default {
 
     &:hover {
       box-shadow: 0 3px 10px -4px var(--ui-pal);
-      color: var(--ui-pal);
     }
 
     &:focus {
@@ -102,5 +111,59 @@ export default {
       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/{FuButtonLink.vue → UiButtonLink.vue}

@@ -3,7 +3,7 @@
       v-bind="{
         ...$attrs,
         type: $attrs.type || 'button',
-        class: 'fu-button-link',
+        class: 'ui-button-link',
       }"
       @mouseup="mUp"
   >
@@ -12,8 +12,10 @@
 </template>
 
 <script>
-export default {
-  name: 'fu-button-link',
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ui-button-link',
   props: {
     hollow: { type: Boolean, default: false },
   },
@@ -21,23 +23,22 @@ export default {
     const mUp = (e) => e.target.blur()
     return { hollow: props.hollow, mUp }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss";
 
-.fu-button-link {
+.ui-button-link {
   @include typo(200);
-  @include spacing-padding(0, 0);
+  padding: spacing(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);
+  transition: all var(--ui-transition);
   background: transparent;
   color: var(--pal-link);
   line-height: 1;
@@ -45,24 +46,24 @@ export default {
   outline: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  text-decoration: underline;
+  text-decoration: none;
 
   & > * {
     pointer-events: none;
   }
 
   &:hover {
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   &:focus {
     color: var(--pal-link-active);
-    text-decoration: underline dashed;
+    text-decoration: underline;
   }
 
   &:active {
     color: var(--pal-link-active);
-    text-decoration: underline dashed;
+    text-decoration: underline;
   }
 
   &:disabled {