Release 1.2.1

.github/workflows/crowdin-sync.yml

@@ -2,7 +2,11 @@ name: Crowdin Synchronisation
 
 on:
  push:
- branches: [next, main]
+ branches:
+ - next
+ paths:
+ - "**.po"
+ - "crowdin.yml"
 
 jobs:
  synchronize-with-crowdin:

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.2.1-next.4](https://github.com/warp-ds/vue/compare/v1.2.1-next.3...v1.2.1-next.4) (2023-11-28)
+
+
+### Bug Fixes
+
+* Update warp-ds/css dependency to v1.4.2 ([#116](https://github.com/warp-ds/vue/issues/116)) ([cea8639](https://github.com/warp-ds/vue/commit/cea8639c06b75099212e7d0b6e7f9355ed255aed))
+
+## [1.2.1-next.3](https://github.com/warp-ds/vue/compare/v1.2.1-next.2...v1.2.1-next.3) (2023-11-28)
+
+
+### Bug Fixes
+
+* **textfield:** allow styling input's left padding if prefix is wider than 40px ([#115](https://github.com/warp-ds/vue/issues/115)) ([0799864](https://github.com/warp-ds/vue/commit/0799864895a8909c9aa80b21519a47a429a473db))
+
+## [1.2.1-next.2](https://github.com/warp-ds/vue/compare/v1.2.1-next.1...v1.2.1-next.2) (2023-11-16)
+
+
+### Bug Fixes
+
+* Misc a11y fixes for Slider ([#108](https://github.com/warp-ds/vue/issues/108)) ([3716178](https://github.com/warp-ds/vue/commit/371617868f24def93d49ffc4a7eb01b48276c134))
+
+## [1.2.1-next.1](https://github.com/warp-ds/vue/compare/v1.2.0...v1.2.1-next.1) (2023-11-13)
+
+
+### Bug Fixes
+
+* use new icons export to drop bundle size ([#110](https://github.com/warp-ds/vue/issues/110)) ([9d95858](https://github.com/warp-ds/vue/commit/9d95858ee60fc691b4493c67f6f6cddd3bd035a5))
+
 # [1.2.0](https://github.com/warp-ds/vue/compare/v1.1.1...v1.2.0) (2023-11-06)
 
 

components/alert/w-alert.vue

@@ -3,12 +3,10 @@ import { computed } from "vue";
 import { wExpandTransition } from "#generics";
 import { createModel, modelProps } from "create-v-model";
 import { alert as ccAlert } from "@warp-ds/css/component-classes";
-import {
- IconAlertError16,
- IconAlertSuccess16,
- IconAlertWarning16,
- IconAlertInfo16,
-} from "@warp-ds/icons/vue";
+import IconAlertError16 from "@warp-ds/icons/vue/alert-error-16";
+import IconAlertSuccess16 from "@warp-ds/icons/vue/alert-success-16";
+import IconAlertWarning16 from "@warp-ds/icons/vue/alert-warning-16";
+import IconAlertInfo16 from "@warp-ds/icons/vue/alert-info-16";
 
 const props = defineProps({
  title: String,

components/attention/w-attention.vue

@@ -2,7 +2,7 @@
 import { watch, computed, ref, onMounted, nextTick } from 'vue'
 import { attention as ccAttention } from '@warp-ds/css/component-classes'
 import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
-import { IconClose16 } from "@warp-ds/icons/vue";
+import IconClose16 from "@warp-ds/icons/vue/close-16";
 
 import { absentProp } from '#util'
 import {

components/expandable/w-expandable.vue

@@ -7,7 +7,8 @@ import {
  expandable as ccExpandable,
  box as ccBox,
 } from '@warp-ds/css/component-classes'
-import { IconChevronDown16, IconChevronUp16 } from '@warp-ds/icons/vue'
+import IconChevronDown16 from '@warp-ds/icons/vue/chevron-down-16'
+import IconChevronUp16 from '@warp-ds/icons/vue/chevron-up-16'
 
 const props = defineProps({
  title: String,

components/forms/w-affix.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { suffix, prefix } from "@warp-ds/css/component-classes";
 import { computed } from "vue";
-import { IconClose16, IconSearch16 } from "@warp-ds/icons/vue";
+import IconClose16 from '@warp-ds/icons/vue/close-16'
+import IconSearch16 from "@warp-ds/icons/vue/search-16";
 
 const props = defineProps({
  prefix: Boolean,

components/forms/w-select.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue';
 import { select as ccSelect } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model'
 import { default as wField, fieldProps } from './w-field.vue'
-import { IconChevronDown16 } from "@warp-ds/icons/vue";
-
+import IconChevronDown16 from "@warp-ds/icons/vue/chevron-down-16";
 
 const p = defineProps(fieldProps);
 const emit = defineEmits(['update:modelValue']);

components/forms/w-suffix.vue

@@ -9,8 +9,8 @@
 <script>
 import { onMounted } from 'vue'
 import { suffix as c } from '@warp-ds/css/component-classes'
-import { IconClose16, IconSearch16 } from "@warp-ds/icons/vue";
-
+import IconClose16 from '@warp-ds/icons/vue/close-16'
+import IconSearch16 from "@warp-ds/icons/vue/search-16"
 
 export default {
  name: 'wSuffix',

components/forms/w-textfield.vue

@@ -77,6 +77,13 @@ const inputClasses = computed(() => ({
  </w-field>
 </template>
 
+<!-- we style input with prefix here because we cannot use arbitrary values with commas in UnoCSS like pl-[var(--w-prefix-width, 40px)] -->
+<style scoped>
+ div+input, button+input {
+ padding-left:var(--w-prefix-width, 40px);
+ }
+</style>
+
 <script>
 const inputTypeValidator = (value) => ['text', 'search', 'email', 'password', 'url', 'tel', 'number'].includes(value);
 export default { name: 'wTextfield', inheritAttrs: false };

components/modal/w-modal.vue

@@ -9,7 +9,8 @@ import { i18n } from '@lingui/core';
 import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
 import { messages as fiMessages} from './locales/fi/messages.mjs';
-import { IconClose16, IconTableSortDown16 } from "@warp-ds/icons/vue";
+import IconClose16 from '@warp-ds/icons/vue/close-16';
+import IconTableSortDown16 from '@warp-ds/icons/vue/table-sort-down-16';
 
 activateI18n(enMessages, nbMessages, fiMessages);
 
@@ -103,15 +104,15 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
 </script>
 
 <template>
- <transition 
+ <transition
  name="fade"
  leave-active-class="transition-opacity-200 ease-in-out"
  enter-active-class="transition-opacity-200 ease-in-out"
  enter-from-class="opacity-0"
  leave-to-class="opacity-0"
  >
  <div :class="[ccModal.backdrop, ccModal.transparentBg]" v-if="showModal" @click.self="emitDismiss" ref="backdropEl" data-test="backdrop">
- <transition 
+ <transition
  name="slide"
  enter-from-class="translate-y-full"
  leave-to-class="translate-y-full sm:translate-y-2/4"
@@ -120,7 +121,7 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
  >
  <div v-if="showContent" :class="ccModal.modal" tabindex="-1" aria-modal="true" aria-labelledby="w-modal-title" role="dialog" ref="modalEl">
  <div :class="[ccModal.title, headerClasses]">
- <transition-group 
+ <transition-group
  enter-from-class="opacity-0 backface-hidden"
  leave-to-class="opacity-0 backface-hidden"
  leave-active-class="absolute"
@@ -158,4 +159,4 @@ export default {
  name: 'wModal'
 };
 
-</script>
+</script>

components/slider/w-slider.vue

@@ -1,4 +1,8 @@
 <script setup>
+defineOptions({
+ name: 'wSlider'
+});
+
 import {
  computed,
  ref,
@@ -25,6 +29,7 @@ const props = defineProps({
  label: String,
  labelledBy: String,
  disabled: Boolean,
+ preventAcceleration: Boolean,
  ...modelProps(),
 });
 
@@ -42,8 +47,7 @@ const sliderPressed = ref(false);
 const v = createModel({ props, emit });
 const position = ref(v.value);
 
-// step is a computed so we can check if props.step is set or not
-// and only do getShiftedChange when set
+// step is a computed, so we can check if props.step is set or not and only do getShiftedChange when set
 const step = computed(() => props.step || 1);
 
 const sliderState = {
@@ -109,6 +113,7 @@ const aria = computed(() => ({
  'aria-valuemax': props.max,
  'aria-valuenow': v.value,
  'aria-valuetext': attrs['aria-valuetext'],
+ 'aria-disabled': props.disabled,
 }));
 const trackClasses = computed(() => [
  ccSlider.track,
@@ -124,30 +129,28 @@ const activeTrackClasses = computed(() => [
 ]);
 const thumbClasses = computed(() => [
  ccSlider.thumb,
- {
- [ccSlider.thumbDisabled]: props.disabled,
- [ccSlider.thumbEnabled]: !props.disabled,
- },
+ props.disabled ? ccSlider.thumbDisabled : ccSlider.thumbEnabled,
 ]);
 
 watch(position, () => {
  // prevents shiftedChange when modelValue was set externally
- if (position.value === props.modelValue) return;
- const n = props.step ? getShiftedChange(position.value) : position.value;
- if (v.value === n) return;
- v.value = n;
+ if (position.value !== props.modelValue) {
+  const n = props.step ? getShiftedChange(position.value) : position.value;
+  if (v.value !== n) v.value = n;
+ }
 });
 
-const clamp = (v, { min, max }) =>
- Number.isFinite(parseFloat(v)) ? Math.min(Math.max(v, min), max) : min;
+const clamp = (v, { min, max }) => Number.isFinite(parseFloat(v)) ? Math.min(Math.max(v, min), max) : min;
+
 watch(
  () => props.modelValue,
  () => {
  // if the slider gets bad values, it shouldn't break the page by placing the thumb at an insane left/right value
- if (props.modelValue > props.max || props.modelValue < props.min)
+ if (props.modelValue > props.max || props.modelValue < props.min) {
  position.value = clamp(props.modelValue, props);
- else if (sliderPressed.value || position.value === props.modelValue) return;
- else position.value = props.modelValue;
+ } else if (!sliderPressed.value && position.value !== props.modelValue) {
+ position.value = props.modelValue;
+ }
  },
  { immediate: true }
 );
@@ -177,7 +180,3 @@ watch(
  ></div>
  </div>
 </template>
-
-<script>
-export default { name: 'wSlider' };
-</script>

components/steps/w-step.vue

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue';
 import { i18n } from '@lingui/core';
 import { activateI18n } from '../util/i18n';
 import { step as ccStep } from '@warp-ds/css/component-classes';
-import { IconCheck16 } from "@warp-ds/icons/vue";
+import IconCheck16 from "@warp-ds/icons/vue/check-16";
 import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
 import { messages as fiMessages} from './locales/fi/messages.mjs';

dev/pages/Slider.vue

@@ -2,19 +2,55 @@
 import { ref } from 'vue'
 import { wSlider, wTextfield } from '#components'
 
-const largeNumber = ref(30_000_000)
+const smallNumber = ref(3);
+const largeNumber = ref(300);
+const extremeNumber = ref(300000);
+const slowNumber = ref(30);
+const disabledNumber = ref(30);
 </script>
 
 <template>
  <div>
  <component-title title="Slider" />
 
+ <h3>Small numbers slider</h3>
+ <token :state="smallNumber">
+ <div class="flex gap-16">
+ <w-textfield type="number" min="1" max="10" step="1" inputmode="numeric" v-model.number="smallNumber" />
+ <w-slider v-model="smallNumber" :aria-valuetext="smallNumber" :min="1" :max="10" :step="1" label="Small numbers slider" />
+ </div>
+ </token>
+
+ <h3>Large numbers slider (with step of 10)</h3>
  <token :state="largeNumber">
- <w-slider v-model="largeNumber" :min="1000" :max="10_000_000" :step="1000" label="a large number slider" />
+ <div class="flex gap-16">
+ <w-textfield type="number" min="0" max="100000" step="10" inputmode="numeric" v-model.number="largeNumber" />
+ <w-slider v-model="largeNumber" :aria-valuetext="largeNumber" :min="0" :max="10000" :step="10" label="Large numbers slider (with step of 10)" />
+ </div>
+ </token>
+
+ <h3>Extreme numbers slider (with step of 100)</h3>
+ <token :state="extremeNumber">
+ <div class="flex gap-16">
+ <w-textfield type="number" min="0" max="100000000" step="100" inputmode="numeric" v-model.number="extremeNumber" />
+ <w-slider v-model="extremeNumber" :aria-valuetext="extremeNumber" :min="0" :max="100000000" :step="100" label="Extreme numbers slider (with step of 100)" />
+ </div>
  </token>
 
- <!-- used for testing that outside-model-updates also update the slider value -->
- <!-- <w-slider v-model="largeNumber" :min="1000" :max="10_000_000" :step="1000" label="a large number slider" /> -->
- <!-- <w-textfield label="Slider value" v-model="largeNumber" /> -->
+ <h3>Slider without keydown acceleration</h3>
+ <token :state="slowNumber">
+ <div class="flex gap-16">
+ <w-textfield type="number" min="0" max="1000" step="1" inputmode="numeric" v-model.number="slowNumber" />
+ <w-slider v-model="slowNumber" :aria-valuetext="slowNumber" :min="0" :max="1000" :step="1" prevent-acceleration label="Slider without keydown acceleration" />
+ </div>
+ </token>
+
+ <h3>Disabled slider</h3>
+ <token :state="disabledNumber">
+ <div class="flex gap-16">
+ <w-textfield disabled type="number" min="0" max="1000" step="1" inputmode="numeric" v-model.number="disabledNumber" />
+ <w-slider disabled v-model="disabledNumber" :aria-valuetext="disabledNumber" :min="0" :max="1000" :step="1" prevent-acceleration label="Disabled slider" />
+ </div>
+ </token>
  </div>
 </template>

dev/pages/Tabs.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { wTabs, wTab, wTabPanel } from '#components';
 import { ref, h } from 'vue';
-import { IconProductStarred24 } from "@warp-ds/icons/vue";
-
+import IconProductStarred24 from "@warp-ds/icons/vue/product-starred-24";
 
 const Stars = {
  name: 'stars-svg',