Slider v0.5

UmbraJS · Sep 21, 2024 · d3f12b4 · d3f12b4
1 parent 03273e2
commit d3f12b4
Show file tree

Hide file tree

Showing 14 changed files with 328 additions and 70 deletions.
diff --git a/apps/nobel/src/pages/UI.vue b/apps/nobel/src/pages/UI.vue
@@ -32,14 +32,14 @@ import { Button, ButtonGroup, Toggle, Chip, Radio, Slider, IconHome, IconPaint }
     </Button>
 
     <section class="buttons">
-      <Button variant="primary" size="small">
-        <IconHome />
+      <Button variant="primary" size="mini">
+        <IconHome size="mini" />
       </Button>
-      <Button variant="secondary">
-        <IconHome />
+      <Button variant="secondary" size="small">
+        <IconHome size="small" />
       </Button>
       <Button>
-        <IconHome />
+        <IconHome size="medium" />
       </Button>
     </section>
 
@@ -55,6 +55,18 @@ import { Button, ButtonGroup, Toggle, Chip, Radio, Slider, IconHome, IconPaint }
       </Button>
     </ButtonGroup>
 
+    <ButtonGroup>
+      <Button size="mini">
+        <IconHome size="mini"></IconHome>
+      </Button>
+      <Button size="mini">
+        <IconHome size="mini"></IconHome>
+      </Button>
+      <Button size="mini">
+        <IconHome size="mini"></IconHome>
+      </Button>
+    </ButtonGroup>
+
     <section>
       <Toggle>
         <template #active>

diff --git a/packages/nobel/components/Icons/IconAdd.vue b/packages/nobel/components/Icons/IconAdd.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path fill="currentColor" d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z" />
   </SVG>
 </template>
diff --git a/packages/nobel/components/Icons/IconClose.vue b/packages/nobel/components/Icons/IconClose.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path
       fill="currentColor"
       d="M5 5h2v2H5zm4 4H7V7h2zm2 2H9V9h2zm2 0h-2v2H9v2H7v2H5v2h2v-2h2v-2h2v-2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm2-2v2h-2V9zm2-2v2h-2V7zm0 0V5h2v2z"

diff --git a/packages/nobel/components/Icons/IconHome.vue b/packages/nobel/components/Icons/IconHome.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path
       fill="currentColor"
       d="M14 2h-4v2H8v2H6v2H4v2H2v2h2v10h7v-6h2v6h7V12h2v-2h-2V8h-2V6h-2V4h-2zm0 2v2h2v2h2v2h2v2h-2v8h-3v-6H9v6H6v-8H4v-2h2V8h2V6h2V4z"

diff --git a/packages/nobel/components/Icons/IconPaint.vue b/packages/nobel/components/Icons/IconPaint.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path
       fill="currentColor"
       d="M13 2h-2v2H9v4H7v4H5v6h2v2h2v2h6v-2h2v-2h2v-6h-2V8h-2V4h-2zm0 2v4h2v4h2v3H7v-3h2V8h2V4z"

diff --git a/packages/nobel/components/Icons/IconText.vue b/packages/nobel/components/Icons/IconText.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path
       fill="currentColor"
       d="M11 5H3v2h8zm10 0h-8v2h8zM3 9h8v2H3zm18 0h-8v2h8zM3 13h8v2H3zm18 0h-8v2h8zM3 17h8v2H3zm18 0h-8v2h8z"

diff --git a/packages/nobel/components/Icons/IconUI.vue b/packages/nobel/components/Icons/IconUI.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path fill="currentColor" d="M2 4h20v16H2zm2 2v12h16V6zm6 4h8v6h-8zm2 2v2h4v-2z" />
   </SVG>
 </template>
diff --git a/packages/nobel/components/Icons/IconWidth.vue b/packages/nobel/components/Icons/IconWidth.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import SVG from './SVG.vue'
+const { size } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
 </script>
 
 <template>
-  <SVG>
+  <SVG :size="size">
     <path
       fill="currentColor"
       d="M22 2v2H2V2zm0 18v2H2v-2zm-6-5v-2H8v2H6v-2H4v-2h2V9h2v2h8V9h2v2h2v2h-2v2zm0 0v2h-2v-2zm0-6h-2V7h2zM8 9V7h2v2zm0 6h2v2H8z"

diff --git a/packages/nobel/components/Icons/SVG.vue b/packages/nobel/components/Icons/SVG.vue
@@ -1,13 +1,30 @@
+<script setup lang="ts">
+const { size = 'small' } = defineProps<{
+  size?: 'medium' | 'small' | 'mini'
+}>()
+</script>
+
 <template>
-  <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <svg id="icon" :class="size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <slot />
   </svg>
 </template>
 
 <style>
 svg#icon {
-  width: var(--paragraph);
   aspect-ratio: 1 / 1;
   fill: currentColor;
 }
+
+svg#icon.medium {
+  width: var(--space-3);
+}
+
+svg#icon.small {
+  width: var(--paragraph);
+}
+
+svg#icon.mini {
+  width: var(--space-atom);
+}
 </style>
diff --git a/packages/nobel/components/ui/Button/Button.vue b/packages/nobel/components/ui/Button/Button.vue
@@ -19,12 +19,11 @@ const {
 } = defineProps<{
   variant?: keyof typeof components
   disabled?: boolean
-  size?: 'small' | 'medium'
+  size?: 'medium' | 'small' | 'mini'
   type?: 'warning' | 'success' | 'default'
 }>()
 
 const ButtonVariant = computed(() => (disabled ? components.base : components[variant]))
-const buttonSize = computed(() => size)
 
 const buttonTypes = {
   default: '--accent',
@@ -57,7 +56,7 @@ const genericColors = computed(() => {
   <component
     tabindex="1"
     class="button focus"
-    :class="buttonSize"
+    :class="size"
     :is="ButtonVariant"
     :disabled="disabled"
     :style="genericColors"
@@ -79,6 +78,12 @@ const genericColors = computed(() => {
   padding: 0px var(--space-quark);
 }
 
+@mixin button-mini {
+  height: var(--block-small);
+  min-width: var(--block-small);
+  padding: 0px;
+}
+
 @mixin button-base-theme {
   color: var(--base-120);
   background-color: var(--base);
@@ -123,12 +128,16 @@ const genericColors = computed(() => {
   @include button-base-structure;
 }
 
+.button.medium {
+  @include button-medium;
+}
+
 .button.small {
   @include button-small;
 }
 
-.button.medium {
-  @include button-medium;
+.button.mini {
+  @include button-mini;
 }
 
 .button:hover {

diff --git a/packages/nobel/components/ui/Slider/Slider copy.vue b/packages/nobel/components/ui/Slider/Slider copy.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref(50)
+</script>
+
+<template>
+  <div class="slider-wrapper">
+    <input type="range" min="0" max="100" v-model="value" tabindex="1" />
+    <div class="slider">
+      <div class="fill">
+        <div class="handle"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.slider-wrapper {
+  --handle-size: var(--block-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--block-big);
+  background: var(--base-10);
+  border-radius: var(--radius);
+  padding: 0px calc(var(--handle-size) / 2);
+}
+
+.slider-wrapper input {
+  opacity: 0;
+  cursor: pointer;
+  position: absolute;
+  z-index: 3;
+  width: calc(100% - var(--handle-size));
+  height: var(--block-big);
+}
+
+input[type='range'] {
+  -webkit-appearance: none; /* Chrome and Safari */
+  -moz-appearance: none; /* Firefox */
+  appearance: none; /* Standard */
+}
+
+input[type='range']::-webkit-slider-thumb {
+  height: 5px;
+  width: 0px;
+  border: none;
+  background: blue;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 5px;
+  width: 0px;
+  border: none;
+  background: blue;
+}
+
+.slider-wrapper .slider {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: calc(var(--block-small) / 2);
+  width: 100%;
+  background: var(--accent-60);
+  border-radius: var(--radius);
+}
+
+.slider-wrapper .slider .fill {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  height: 100%;
+  width: calc(v-bind(value) * 1%);
+  background: var(--accent-100);
+  border-radius: var(--radius);
+}
+
+.slider-wrapper .slider .fill .handle {
+  position: absolute;
+  right: calc(0px - var(--handle-size) / 2);
+  height: var(--handle-size);
+  aspect-ratio: 1 / 1;
+  background: var(--base-100);
+  border-radius: var(--radius);
+}
+</style>