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

package/src/docs/DocButton.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="doc-button">
+    <div class="doc-button_row">
+      <fu-button>default</fu-button>
+      <fu-button class="primary">primary</fu-button>
+      <fu-button class="secondary">secondary</fu-button>
+      <fu-button class="positive">positive</fu-button>
+      <fu-button class="warning">warning</fu-button>
+      <fu-button class="negative">negative</fu-button>
+      <fu-button disabled>disabled</fu-button>
+    </div>
+    <div class="doc-button_row">
+      <fu-button hollow>default</fu-button>
+      <fu-button hollow class="primary">primary</fu-button>
+      <fu-button hollow class="secondary">secondary</fu-button>
+      <fu-button hollow class="positive">positive</fu-button>
+      <fu-button hollow class="warning">warning</fu-button>
+      <fu-button hollow class="negative">negative</fu-button>
+      <fu-button hollow disabled>disabled</fu-button>
+    </div>
+    <div class="doc-button_row">
+      <fu-button class="primary">
+        primary buttons<br />with a long text inside
+      </fu-button>
+
+      <fu-button class="secondary">
+        <h4>HUGE TEXT</h4>
+      </fu-button>
+    </div>
+
+    <fu-code-view label="Example">{{ example }}</fu-code-view>
+  </div>
+</template>
+
+<script>
+import FuButton   from '@/components/FuButton.vue'
+import FuCodeView from '@/components/FuCodeView.vue'
+
+const example = `
+/// vue
+<fu-button hollow>default</fu-button>
+<fu-button hollow class="primary">primary</fu-button>
+
+/// css
+.primary {
+  --button-pal: var(--pal-primary);
+}
+`
+
+export default {
+  name: 'doc-button',
+  components: { FuCodeView, FuButton },
+  setup () {
+    return { example }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-button {
+  &_row {
+    @include spacing-padding(300);
+    gap: 1em;
+    display: flex;
+  }
+}
+</style>

package/src/docs/DocSandbox.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="doc-sandbox">
+    <div class="doc-sandbox_row" v-for="c in classes" :class="c">
+      <fu-button class="doc-sandbox_row-btn">{{ c }}</fu-button>
+      <fu-select v-model="selectVal">
+        <option v-for="i in list" :value="i.value">{{ i.label }}</option>
+      </fu-select>
+      <fu-select-x v-model="selectVal" :options="list" />
+      <fu-text class="doc-sandbox_row-text" v-model="textVal" :placeholder="c + ' placeholder'" />
+    </div>
+
+    <div class="doc-sandbox_row">
+      <fu-button disabled class="doc-sandbox_row-btn">disabled</fu-button>
+      <fu-text disabled v-model="textVal" placeholder="disabled placeholder" class="doc-sandbox_row-text" />
+    </div>
+
+    <fu-code-view label="Example">{{ example }}</fu-code-view>
+  </div>
+</template>
+
+<script>
+import FuCodeView from '@/components/FuCodeView.vue'
+import FuText     from '@/components/FuText.vue'
+import { ref }    from 'vue'
+import FuButton   from '@/components/FuButton.vue'
+import FuSelect   from '@/components/FuSelect.vue'
+import FuSelectX  from '@/components/FuSelectX.vue'
+
+const example = `
+TBD
+`
+
+export default {
+  name: 'doc-sandbox',
+  components: { FuSelectX, FuSelect, FuButton, FuText, FuCodeView },
+  setup () {
+    const classes = [ 'default', 'primary', 'brand', 'secondary', 'positive', 'warning', 'negative' ]
+    const textVal = ref('')
+
+    const selectVal = ref('val1')
+    const list = [
+      { value: 'val1', label: 'label 1' },
+      { value: 'val2', label: 'label 2' },
+      { value: 'val3', label: 'label 3' },
+    ]
+    return { example, textVal, classes, selectVal, list }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-sandbox {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  &_row {
+    @include spacing-padding(300);
+    gap: 1em;
+    display: flex;
+
+    &-text {
+      max-width: 15em;
+    }
+
+    &-btn {
+      width: 8em;
+    }
+  }
+}
+</style>

package/src/docs/DocSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="doc-select">
+    <div class="doc-select_row">
+      <label>Boring Select</label>
+      <fu-select v-model="val">
+        <option v-for="i in list" :value="i.value">{{ i.label }}</option>
+      </fu-select>
+    </div>
+
+    <div class="doc-select_row brand">
+      <label>Fancy select with search</label>
+      <fu-select-x v-model="val" :options="list" />
+    </div>
+
+    <div class="doc-select_row positive">
+      <label>Fancy select with search</label>
+      <fu-select-x v-model="val" :options="list" />
+    </div>
+
+    <div class="doc-select_row negative">
+      <label>Fancy select with search</label>
+      <fu-select-x v-model="val" :options="list" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+import FuButton  from '@/components/FuButton.vue'
+import FuSelect  from '@/components/FuSelect.vue'
+import FuSelectX from '@/components/FuSelectX.vue'
+
+export default {
+  name: 'doc-buttons',
+  components: { FuSelectX, FuSelect, FuButton },
+  setup () {
+    const val = ref('val1')
+    const list = [
+      { value: 'val1', label: 'label 1' },
+      { value: 'val2', label: 'label 2' },
+      { value: 'val3', label: 'label 3' },
+    ]
+    return { val, list }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-select {
+  display: flex;
+  flex-direction: column;
+  gap: spacing(300);
+}
+</style>

package/src/docs/DocSidebar.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="doc-sidebar">
+    <fu-sidebar side="right" :is-open="rightIsOpen" @close="rightIsOpen = false">
+      <div class="doc-sidebar_content">
+        <h4>What is Lorem Ipsum?</h4>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+          type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+          essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
+          passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
+          Ipsum.</p>
+        <fu-button @click="rightIsOpen = false">Open Right One</fu-button>
+      </div>
+    </fu-sidebar>
+    <fu-button @click="rightIsOpen = true">Open Right One</fu-button>
+  </div>
+</template>
+
+<script>
+import FuCodeView from '@/components/FuCodeView.vue'
+import FuSidebar  from '@/components/FuSidebar.vue'
+import { ref }    from 'vue'
+import FuButton   from '@/components/FuButton.vue'
+
+const example = `
+TBD
+
+`
+
+export default {
+  name: 'doc-sidebar',
+  components: { FuButton, FuSidebar, FuCodeView },
+  setup () {
+    const rightIsOpen = ref(false)
+    return { example, rightIsOpen }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-sidebar {
+  &_content {
+    @include spacing-padding(400);
+
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+
+  .h100 {
+    @include typo(100);
+  }
+
+  .h200 {
+    @include typo(200);
+  }
+
+  .h300 {
+    @include typo(300);
+  }
+
+  .h400 {
+    @include typo(400);
+  }
+
+  .h500 {
+    @include typo(500);
+  }
+
+  .h600 {
+    @include typo(600);
+  }
+
+  .h700 {
+    @include typo(700);
+  }
+
+  .h800 {
+    @include typo(800);
+  }
+
+  .h900 {
+    @include typo(900);
+  }
+
+  &_title {
+    margin-bottom: spacing(400);
+    color: pal(text-dimm);
+    font-weight: normal;
+    border-bottom: 1px solid color(grey200);
+  }
+}
+</style>

package/src/docs/DocText.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="doc-text">
+    <div class="doc-text_row">
+      <fu-text v-model="val" placeholder="placeholder" />
+      <fu-text class="secondary" v-model="val" placeholder="placeholder" />
+      <fu-text class="brand" v-model="val" placeholder="placeholder" />
+      <fu-text disabled v-model="val" placeholder="placeholder" />
+    </div>
+    <div class="doc-text_row">
+      <fu-text v-model="val" placeholder="disabled placeholder" class="doc-sandbox_row-text">
+        <template #left>
+          <p class="icon"> ❤️</p>
+        </template>
+        <template #right>
+          <p class="icon"> ❤️</p>
+        </template>
+      </fu-text>
+    </div>
+    <fu-code-view label="Example">{{ example }}</fu-code-view>
+  </div>
+</template>
+
+<script>
+import FuCodeView from '@/components/FuCodeView.vue'
+import FuText     from '@/components/FuText.vue'
+import { ref }    from 'vue'
+import FuButton   from '@/components/FuButton.vue'
+
+const example = `
+TBD
+`
+
+export default {
+  name: 'doc-text',
+  components: { FuButton, FuText, FuCodeView },
+  setup () {
+    const val = ref('')
+    return { example, val }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-text {
+  &_row {
+    @include spacing-padding(300);
+    gap: 1em;
+    display: flex;
+  }
+
+  .icon {
+    height: 2em;
+    width: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

package/src/docs/DocTextarea.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="doc-textarea">
+    <fu-textarea v-model="val" placeholder="this is a text area" auto-resize />
+    <fu-textarea class="brand" v-model="val" placeholder="this is a text area" />
+    <fu-button>Like submit</fu-button>
+    <fu-code-view label="Example">{{ example }}</fu-code-view>
+  </div>
+</template>
+
+<script>
+import FuCodeView from '@/components/FuCodeView.vue'
+import FuTextarea from '@/components/FuTextarea.vue'
+import { ref }    from 'vue'
+import FuButton   from '@/components/FuButton.vue'
+
+const example = `
+TBD
+`
+
+export default {
+  name: 'doc-textarea',
+  components: { FuButton, FuTextarea, FuCodeView },
+  setup () {
+    const val = ref(`Where does it come from?
+
+Contrary to popular belief, Lorem Ipsum is not simply random text.
+It has roots in a piece of classical Latin literature from 45 BC,
+making it over 2000 years old. Richard McClintock, a Latin professor
+at Hampden-Sydney College in Virginia, looked up one of the more
+obscure Latin words, consectetur, from a Lorem Ipsum passage,
+and going through the cites of the word in classical literature,
+discovered the undoubtable source. Lorem Ipsum comes from sections
+1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
+(The Extremes of Good and Evil) by Cicero, written in 45 BC.
+This book is a treatise on the theory of ethics, very popular
+during the Renaissance. The first line of Lorem Ipsum, "Lorem
+ipsum dolor sit amet..", comes from a line in section 1.10.32.
+
+The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+below for those interested. Sections 1.10.32 and 1.10.33 from
+"de Finibus Bonorum et Malorum" by Cicero are also reproduced
+in their exact original form, accompanied by English versions
+from the 1914 translation by H. Rackham.
+    `)
+    return { example, val }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.doc-textarea {
+  @include spacing-padding(300);
+
+  gap: 1em;
+  display: flex;
+  flex-direction: column;
+
+  --text-focus-pal: var(--pal-brand);
+
+  .brand {
+    --ui-pal: var(--pal-brand);
+  }
+}
+</style>

package/src/docs/DocTypo.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="doc-typo">
+    <div class="doc-typo_col">
+      <h3 class="doc-typo_title">Default tags style</h3>
+
+      <div>Default block</div>
+      <small>Default small text</small>
+      <p>Default paragraph</p>
+      <h5>Default Heading 5 300/400</h5>
+      <h4>Default Heading 4 400/500</h4>
+      <h3>Default Heading 3 500/600</h3>
+      <h2>Default Heading 2 600/700</h2>
+      <h1>Default Heading 1 700/800</h1>
+    </div>
+    <div class="doc-typo_col">
+      <h3 class="doc-typo_title">@include typo(*)</h3>
+
+      <div class="h100">100 Test sample</div>
+      <div class="h200">200 Test sample</div>
+      <div class="h300">300 Test sample</div>
+      <div class="h400">400 Test sample</div>
+      <div class="h500">500 Test sample</div>
+      <div class="h600">600 Test sample</div>
+      <div class="h700">700 Test sample</div>
+      <div class="h800">800 Test sample</div>
+      <div class="h900">900 Test sample</div>
+    </div>
+
+    <fu-code-view collapse label="Example">{{ example }}</fu-code-view>
+  </div>
+</template>
+
+<script>
+import FuCodeView from '@/components/FuCodeView.vue'
+import { ref }    from 'vue'
+const example =
+`
+.h200 {
+  @include typo(200);
+}
+
+h4 {
+  @include typo(400, 500);
+}
+
+`
+export default {
+  name: 'doc-typo',
+  components: { FuCodeView },
+  setup(){
+    return { example }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc-typo {
+  &_col {
+    @include spacing-padding(400, 0);
+    flex: 1;
+  }
+
+  .h100 {
+    @include typo(100);
+  }
+  .h200 {
+    @include typo(200);
+  }
+  .h300 {
+    @include typo(300);
+  }
+  .h400 {
+    @include typo(400);
+  }
+  .h500 {
+    @include typo(500);
+  }
+  .h600 {
+    @include typo(600);
+  }
+  .h700 {
+    @include typo(700);
+  }
+  .h800 {
+    @include typo(800);
+  }
+  .h900 {
+    @include typo(900);
+  }
+
+  &_title {
+    margin-bottom: spacing(400);
+    color: pal(text-dimm);
+    font-weight: normal;
+    border-bottom: 1px solid color(grey200);
+  }
+}
+</style>

package/src/main.js

@@ -1,5 +1,9 @@
-import { createApp } from 'vue'
-import App           from './App.vue'
-import router        from './router.js'
-
-createApp(App).use(router).mount('#app')
+import { createApp } from 'vue'
+import App           from './App.vue'
+import router        from './router.js'
+
+import '/reset.scss'
+import '/root.scss'
+import './styles.scss'
+
+createApp(App).use(router).mount('#app')

package/src/router.js

@@ -1,17 +1,29 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home                               from './views/Home.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-})
-
-export default router
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from '@/Home.vue'
+
+import DocButton   from '@/docs/DocButton.vue'
+import DocTypo     from '@/docs/DocTypo.vue'
+import DocSelect   from '@/docs/DocSelect.vue'
+import DocText     from '@/docs/DocText.vue'
+import DocTextarea from '@/docs/DocTextarea.vue'
+import DocSandbox  from '@/docs/DocSandbox.vue'
+import DocSidebar  from '@/docs/DocSidebar.vue'
+
+const routes = [
+  { path: '/', name: 'Home', component: Home },
+  { path: '/sandbox', name: 'DocSandbox', component: DocSandbox },
+  { path: '/typo', name: 'DocTypo', component: DocTypo },
+  { path: '/button', name: 'DocButton', component: DocButton },
+  { path: '/select', name: 'DocSelect', component: DocSelect },
+  { path: '/text', name: 'DocText', component: DocText },
+  { path: '/textarea', name: 'DocTextarea', component: DocTextarea },
+  { path: '/sidebar', name: 'DocSidebar', component: DocSidebar },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router

package/src/scss/colors.scss

@@ -1,13 +1,23 @@
-@use 'sass:color';
+@function pal($color-code, $opacity:1) {
+  @if ($opacity < 1) {
+    @return rgba(var(--pal-#{$color-code}), #{$opacity})
+  } @else {
+    @return rgb(var(--pal-#{$color-code}))
+  }
+}
 
-@function color-channels($hex) {
-  @return color.red($hex), color.green($hex), color.blue($hex)
+@function pal-acc($color-code, $opacity:1) {
+  @if ($opacity < 1) {
+    @return rgba(var(--pal-acc-#{$color-code}), #{$opacity})
+  } @else {
+    @return rgb(var(--pal-acc-#{$color-code}))
+  }
 }
 
-@function pal($color-code, $opacity:1) {
+@function color($color-code, $opacity:1) {
   @if ($opacity < 1) {
-    @return rgba(var(--#{$color-code}), #{$opacity})
+    @return rgba(var(--rgb-#{$color-code}), #{$opacity})
   } @else {
-    @return rgb(var(--#{$color-code}))
+    @return rgb(var(--rgb-#{$color-code}))
   }
 }

package/src/scss/typo.scss

@@ -1,23 +1,14 @@
-//
-// TYPOGRAPHY
-//
+@mixin typo($h, $l:null) {
+  font-size: var(--typo-h#{$h});
 
-@mixin typo($h, $weight:null) {
-  font-size: var(--typo-#{$h});
-  line-height: var(--typo-l#{$h});
-  @if ($weight) {
-    font-weight: $weight;
+  @if ($l) {
+    line-height: var(--typo-lh#{$l});
   }
 }
 
-//
-// LAYOUT SPACING
-//
-
 @function spacing($spacing-code: null) {
   @if (
       $spacing-code == 0 or
-      $spacing-code == 0px or // redundant
       $spacing-code == auto or
       $spacing-code == unset or
       $spacing-code == null
@@ -25,7 +16,7 @@
     @return $spacing-code;
   }
 
-  @return var(--lt-#{$spacing-code});
+  @return var(--lt-sp#{$spacing-code});
 }
 
 @mixin spacing-prop($prop, $t, $r: null, $b: null, $l: null) {