quasar 2.3.4 → 2.4.3

package/src/components/slider/QSlider.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "components/slider/use-slider" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/slider"
@@ -13,60 +13,6 @@
       "examples": [ "v-model=\"positionModel\"" ]
     },
 
-    "min": {
-      "type": "Number",
-      "desc": "Minimum value of the model",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
-      "category": "model"
-    },
-
-    "max": {
-      "type": "Number",
-      "desc": "Maximum value of the model",
-      "default": 100,
-      "examples": [ ":max=\"100\"" ],
-      "category": "model"
-    },
-
-    "step": {
-      "type": "Number",
-      "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
-      "default": 1,
-      "examples": [ ":step=\"1\"" ],
-      "category": "model"
-    },
-
-    "reverse": {
-      "type": "Boolean",
-      "desc": "Work in reverse (changes direction)",
-      "category": "behavior"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior"
-    },
-
-    "color": {
-      "extends": "color"
-    },
-
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
-      "category": "content"
-    },
-
-    "label-color": {
-      "extends": "color"
-    },
-
-    "label-text-color": {
-      "extends": "color"
-    },
-
     "label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label value",
@@ -74,56 +20,6 @@
         ":label-value=\"model + 'px'\""
       ],
       "category": "content"
-    },
-
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the label",
-      "category": "behavior|content"
-    },
-
-    "markers": {
-      "type": [ "Boolean", "Number" ],
-      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
-      "category": "content",
-      "examples": [
-        "markers",
-        ":markers=\"5\""
-      ]
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "behavior"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumb svg path",
-      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
-      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
-      "category": "style"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
-    },
-
-    "tabindex": {
-      "extends": "tabindex"
     }
   },
 
@@ -135,22 +31,6 @@
           "type": [ "Number", "null" ]
         }
       }
-    },
-
-    "change": {
-      "extends": "update:model-value",
-      "desc": "Emitted on lazy model value change (after user slides then releases the thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      }
     }
   }
 }

package/src/components/slider/QSlider.sass

@@ -1,225 +1,290 @@
 .q-slider
   position: relative
-  color: var(--q-primary)
-  outline: 0
 
   &--h
     width: 100%
-    height: 40px
   &--v
-    width: 40px
     height: 200px
 
+  &--editable .q-slider__track-container
+    cursor: grab
+
   &__track-container
-    background: rgba(0,0,0,.26)
+    outline: 0
 
     &--h
-      top: 50%
-      margin-top: -1px
       width: 100%
-      height: 2px
+      padding: 12px 0
+      .q-slider__selection
+        will-change: width, left
     &--v
-      left: 50%
-      margin-left: -1px
       height: 100%
-      width: 2px
+      padding: 0 12px
+      .q-slider__selection
+        will-change: height, top
 
   &__track
+    color: var(--q-primary)
+    background: rgba(0,0,0,.1)
+    border-radius: $generic-border-radius
+    width: inherit
+    height: inherit
+
+  &__inner
+    background: rgba(0,0,0,.1)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+  &__selection
     background: currentColor
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+  &__markers
+    color: rgba(0,0,0,.3)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+    &:after
+      content: ''
+      position: absolute
+      background: currentColor
 
     &--h
-      will-change: width, left
-      top: 0
-      bottom: 0
+      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        height: 100%
+        width: 2px
+        top: 0
+        right: 0
+
     &--v
-      will-change: height, top
-      left: 0
-      right: 0
+      background-image: repeating-linear-gradient(to bottom, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        width: 100%
+        height: 2px
+        left: 0
+        bottom: 0
+
+  &__marker-labels-container
+    position: relative
+    width: 100%
+    height: 100%
+    min-height: 24px
+    min-width: 24px
 
-  &__track-markers
-    color: #000
+  &__marker-labels
+    position: absolute
 
     &--h
-      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &-standard
+        top: 0
+      &-switched
+        bottom: 0
+
+      &-ltr
+        transform: translateX(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateX(50%) #{"/* rtl:ignore */"}
+
     &--v
-      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &-standard
+        left: 4px
+      &-switched
+        right: 4px
 
-    &:after
-      content: ''
-      position: absolute
-      right: 0
-      top: 0
-      bottom: 0
-      height: 2px
-      width: 2px
-      background: currentColor
+      &-ltr
+        transform: translateY(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateY(50%) #{"/* rtl:ignore */"}
 
-  &__thumb-container
-    width: 20px
-    height: 20px
+  &__thumb
+    z-index: 1
     outline: 0
+    color: var(--q-primary)
+    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
+
+    &.q-slider--focus
+      opacity: 1 !important
 
     &--h
       top: 50%
-      margin-top: -10px
-      transform: translateX(-10px) #{"/* rtl:ignore */"}
       will-change: left
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(50%,-50%) #{"/* rtl:ignore */"}
+
     &--v
-      left: 50%
-      margin-left: -10px
-      transform: translateY(-10px)
+      left: 50% #{"/* rtl:ignore */"}
       will-change: top
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(-50%,50%) #{"/* rtl:ignore */"}
 
-  &__thumb
+  &__thumb-shape
     top: 0
     left: 0
-    transform: scale(1)
-    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
     stroke-width: 3.5
     stroke: currentColor
+    transition: transform .28s
 
     path
       stroke: currentColor
       fill: currentColor
 
   &__focus-ring
-    width: 20px
-    height: 20px
-    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     border-radius: 50%
     opacity: 0
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     transition-delay: .14s
 
-  &__arrow
-    position: absolute
-    width: 0
-    height: 0
-    transform-origin: 50% 50%
-    transition: transform 100ms ease-out
+  &__pin
+    opacity: 0
+    white-space: nowrap
+    transition: opacity .28s ease-out
+    transition-delay: .14s
+
+    &:before
+      content: ''
+      width: 0
+      height: 0
+      position: absolute
 
     &--h
-      top: 19px
-      left: 4px
-      border-top: 6px solid currentColor
-      border-left: 6px solid transparent
-      border-right: 6px solid transparent
-      transform: scale(0) translateY(0)
-    &--v
-      top: 4px
-      left: 15px
-      border-top: 6px solid transparent
-      border-bottom: 6px solid transparent
-      border-right: 6px solid currentColor
-      transform: scale(0) translateX(-20px)
+      &:before
+        border-left: 6px solid transparent
+        border-right: 6px solid transparent
+        left: 50%
+        transform: translateX(-50%)
+      &-standard
+        bottom: 100%
+        &:before
+          bottom: 2px
+          border-top: 6px solid currentColor
+      &-switched
+        top: 100%
+        &:before
+          top: 2px
+          border-bottom: 6px solid currentColor
 
-  &__pin
-    transition: transform 100ms ease-out
+    &--v
+      top: 0
+      &:before
+        top: 50%
+        transform: translateY(-50%)
+        border-top: 6px solid transparent
+        border-bottom: 6px solid transparent
+      &-standard
+        left: 100%
+        &:before
+          left: 2px
+          border-right: 6px solid currentColor
+      &-switched
+        right: 100%
+        &:before
+          right: 2px
+          border-left: 6px solid currentColor
+
+  &__label
     z-index: 1
     white-space: nowrap
+    position: absolute
 
     &--h
-      bottom: 0
-      right: 0
-      transform: scale(0) translateY(0)
-      will-change: left
+      left: 50%
+      transform: translateX(-50%)
+      &-standard
+        bottom: 7px
+      &-switched
+        top: 7px
+
     &--v
       top: 50%
-      left: 20px
-      height: 0
-      transform: scale(0) translateX(-20px)
-      will-change: top
-      transform-origin: left center
-
-    &-text-container
-      min-height: 25px
-      padding: 2px 8px
-      border-radius: $generic-border-radius
-      background: currentColor
-      position: relative
-      text-align: center
-
-      &--h
-        right: -50%
-      &--v
-        transform: translateY(-50%)
-
-    &-text
-      color: #fff
-      font-size: 12px
+      transform: translateY(-50%)
+      &-standard
+        left: 7px
+      &-switched
+        right: 7px
+
+  &__text-container
+    min-height: 25px
+    padding: 2px 8px
+    border-radius: $generic-border-radius
+    background: currentColor
+    position: relative
+    text-align: center
 
-  &--editable
-    cursor: grab
+  &__text
+    color: #fff
+    font-size: 12px
 
   &--no-value
-    .q-slider__thumb, .q-slider__track
-      visibility: hidden
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
+      opacity: 0
 
-  &--focus
-    .q-slider__thumb
-      transform: scale(1)
-
-  &--focus, body.desktop &.q-slider--editable:hover
+  &--focus,
+  body.desktop &.q-slider--editable .q-slider__track-container:hover
     .q-slider__focus-ring
       background: currentColor
       transform: scale3d(1.55, 1.55, 1)
       opacity: .25
-    .q-slider__thumb, .q-slider__track
-      visibility: visible
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
+      opacity: 1
 
   &--inactive
-    .q-slider__thumb-container
+    .q-slider__thumb
       &--h
         transition: left .28s, right .28s
       &--v
         transition: top .28s, bottom .28s
 
-    .q-slider__track
-      &--h
-        transition: width .28s, left .28s, right .28s
-      &--v
-        transition: height .28s, top .28s, bottom .28s
+    .q-slider__selection
+      transition: width .28s, left .28s, right .28s, height .28s, top .28s, bottom .28s
+
+    .q-slider__text-container
+      transition: transform .28s
 
   &--active
     cursor: grabbing
 
-    .q-slider__thumb
+    .q-slider__thumb-shape
       transform: scale(1.5)
 
-    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
+    .q-slider__focus-ring,
+    &.q-slider--label .q-slider__thumb-shape
       transform: scale(0) !important
 
-  body.desktop &.q-slider--enabled:hover
-    .q-slider__pin,
-    .q-slider__arrow
-      &--h
-        transform: scale(1) translateY(-25px)
-      &--v
-        transform: scale(1) translateX(5px)
+  body.desktop &.q-slider--enabled .q-slider__track-container:hover
+    .q-slider__pin
+      opacity: 1
 
   &--label
-    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
-      .q-slider__pin,
-      .q-slider__arrow
-        &--h
-          transform: scale(1) translateY(-25px)
-        &--v
-          transform: scale(1) translateX(5px)
+    &.q-slider--active,
+    .q-slider--focus,
+    &.q-slider--label-always
+      .q-slider__pin
+        opacity: 1
 
   &--dark
-    .q-slider__track-container
-      background: rgba(#fff, .3)
-    .q-slider__track-markers
-      color: #fff
+    .q-slider__track
+      background: rgba(#fff,.1)
+    .q-slider__inner
+      background: rgba(#fff,.1)
+    .q-slider__markers
+      color: rgba(#fff,.3)
 
-  &--reversed
-    .q-slider__thumb-container
+  &--dense
+    .q-slider__track-container
       &--h
-        transform: translateX(10px) #{"/* rtl:ignore */"}
+        padding: 6px 0
       &--v
-        transform: translateY(10px)
-
-  &--dense
-    &--h
-      height: 20px
-    &--v
-      width: 20px
+        padding: 0 6px