Merge pull request #120 from warp-ds/next

Release 1.2.2

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.2.2-next.2](https://github.com/warp-ds/vue/compare/v1.2.2-next.1...v1.2.2-next.2) (2023-11-30)
+
+
+### Bug Fixes
+
+* **textfield:** use inline style when updating input's left padding ([#118](https://github.com/warp-ds/vue/issues/118)) ([db4ba9b](https://github.com/warp-ds/vue/commit/db4ba9b5889e4d669938b382c73d08fca1b824b6))
+
+## [1.2.2-next.1](https://github.com/warp-ds/vue/compare/v1.2.1...v1.2.2-next.1) (2023-11-29)
+
+
+### Bug Fixes
+
+* Reintroduce placeholder for TextField ([#119](https://github.com/warp-ds/vue/issues/119)) ([9783d3a](https://github.com/warp-ds/vue/commit/9783d3ab232eab5ab341132903e81364623a69f1))
+
 ## [1.2.1](https://github.com/warp-ds/vue/compare/v1.2.0...v1.2.1) (2023-11-29)
 
 

components/forms/w-textfield.vue

@@ -32,6 +32,10 @@ const inputClasses = computed(() => ({
  [ccInput.suffix]: slots.suffix,
  [ccInput.prefix]: slots.prefix,
 }));
+
+const inputWithPrefixStyle = computed(() => (
+ slots.prefix ? 'padding-left: var(--w-prefix-width, 40px);' : undefined
+))
 </script>
 
 <template>
@@ -51,6 +55,7 @@ const inputClasses = computed(() => ({
  ]"
  :autocomplete="autocomplete"
  :disabled="disabled"
+ :placeholder="placeholder"
  :readOnly="readOnly"
  v-bind="{ ...aria, ...$attrs, class: '' }"
  @blur="triggerValidation">
@@ -68,21 +73,17 @@ const inputClasses = computed(() => ({
  ]"
  :autocomplete="autocomplete"
  :disabled="disabled"
+ :placeholder="placeholder"
  :readOnly="readOnly"
  v-bind="{ ...aria, ...$attrs, class: '' }"
  @blur="triggerValidation"
+ :style="inputWithPrefixStyle"
  >
  <slot name="suffix" :inputElement="inputEl" />
  </div>
  </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);

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@warp-ds/vue",
  "repository": "git@github.com:warp-ds/vue.git",
- "version": "1.2.1",
+ "version": "1.2.2-next.2",
  "description": "Warp components for Vue 3",
  "type": "module",
  "exports": {
@@ -32,7 +32,7 @@
  "@lingui/core": "^4.3.0",
  "@warp-ds/core": "^1.0.2",
  "@warp-ds/css": "^1.4.2",
- "@warp-ds/icons": "1.2.0",
+ "@warp-ds/icons": "1.3.0",
  "@warp-ds/uno": "^1.1.0",
  "create-v-model": "^2.2.0",
  "dom-focus-lock": "^1.1.0",