Merge pull request #156 from warp-ds/next

Release 1.2.7

.github/workflows/lint.pr.yaml

@@ -0,0 +1,21 @@
+name: Lint
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install pnpm and dependencies
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+        run_install: true
+    - name: Lint
+      run: pnpm lint:check

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.2.7-next.1](https://github.com/warp-ds/vue/compare/v1.2.6...v1.2.7-next.1) (2024-04-09)
+
+
+### Bug Fixes
+
+* Fix issues with validation messages for input fields ([#155](https://github.com/warp-ds/vue/issues/155)) ([9a26bfa](https://github.com/warp-ds/vue/commit/9a26bfad079d5c2d79fbffe1485798768e3f59dd))
+
 ## [1.2.6](https://github.com/warp-ds/vue/compare/v1.2.5...v1.2.6) (2024-03-21)
 
 

components/alert/index.js

@@ -1,5 +1,5 @@
-import wAlert from './w-alert.vue'
-import { installer } from '#util'
+import wAlert from './w-alert.vue';
+import { installer } from '#util';
 
-export const Alert = { install: installer([wAlert]) }
-export { wAlert }
+export const Alert = { install: installer([wAlert]) };
+export { wAlert };

components/alert/stories/Alert.stories.js

@@ -8,17 +8,19 @@ const showAlert = ref(true);
 export default { title: 'FeedbackIndicators/Alert', component: wAlert };
 
 const Template = (args) => ({
-    components: { wAlert },
-    setup() { return { args, showAlert }; },
-    template: '<w-alert v-model="showAlert" v-bind="args"><p>I am an excellent message for the user.</p></w-alert>',
+  components: { wAlert },
+  setup() {
+    return { args, showAlert };
+  },
+  template: '<w-alert v-model="showAlert" v-bind="args"><p>I am an excellent message for the user.</p></w-alert>',
 });
 
 export const MainStory = Template.bind({});
-MainStory.args = { info: true, title: "I am a title" };
+MainStory.args = { info: true, title: 'I am a title' };
 
 export const NegativeAlertTask = Template.bind({});
 NegativeAlertTask.args = { negative: true, title: 'This is "negative" variant of the alert component' };
 NegativeAlertTask.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await expect(canvas.getByRole('alert')).toBeInTheDocument();
-};
+};

components/attention/attentionUtil.js

@@ -1,49 +1,49 @@
-import { attention as ccAttention } from '@warp-ds/css/component-classes'
+import { attention as ccAttention } from '@warp-ds/css/component-classes';
 
-const TOP = 'top'
-const BOTTOM = 'bottom'
-const LEFT = 'left'
-const RIGHT = 'right'
+const TOP = 'top';
+const BOTTOM = 'bottom';
+const LEFT = 'left';
+const RIGHT = 'right';
 export const opposites = {
   [TOP]: BOTTOM,
   [BOTTOM]: TOP,
   [LEFT]: RIGHT,
-  [RIGHT]: LEFT
-}
-export const directions = [TOP, BOTTOM, LEFT, RIGHT]
-
-const TOOLTIP = "tooltip"
-const POPOVER = "popover"
-const CALLOUT = "callout"
-const HIGHLIGHT = "highlight"
+  [RIGHT]: LEFT,
+};
+export const directions = [TOP, BOTTOM, LEFT, RIGHT];
+
+const TOOLTIP = 'tooltip';
+const POPOVER = 'popover';
+const CALLOUT = 'callout';
+const HIGHLIGHT = 'highlight';
 export const variants = [CALLOUT, POPOVER, TOOLTIP, HIGHLIGHT];
 
 export const getVariantClasses = (props) => {
-  const activeVariant = variants.find(b => !!props[b]) || '';
+  const activeVariant = variants.find((b) => !!props[b]) || '';
 
   return {
     wrapper: ccAttention[activeVariant],
-    arrow: ccAttention[`arrow${activeVariant.charAt(0).toUpperCase() + activeVariant.slice(1)}`]
-  }
+    arrow: ccAttention[`arrow${activeVariant.charAt(0).toUpperCase() + activeVariant.slice(1)}`],
+  };
 };
 
-export const rotation = { [LEFT]: -45, [TOP]: 45, [RIGHT]: 135, [BOTTOM]: -135 }
+export const rotation = { [LEFT]: -45, [TOP]: 45, [RIGHT]: 135, [BOTTOM]: -135 };
 
-export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const props = {
   noArrow: Boolean,
   canClose: Boolean,
-  ...variants.reduce((acc, e) => (acc[e] = Boolean, acc), {}),
-  ...directions.reduce((acc, e) => (acc[e] = Boolean, acc), {})
-}
+  ...variants.reduce((acc, e) => ((acc[e] = Boolean), acc), {}),
+  ...directions.reduce((acc, e) => ((acc[e] = Boolean), acc), {}),
+};
 
-const middlePosition = 'calc(50% - 7px)'
-const isDirectionVertical = (name) => [TOP, BOTTOM].includes(name)
+const middlePosition = 'calc(50% - 7px)';
+const isDirectionVertical = (name) => [TOP, BOTTOM].includes(name);
 
 export const computeCalloutArrow = ({ actualDirection, directionName, arrowEl }) => {
-  actualDirection.value = directionName.value
-  const directionIsVertical = isDirectionVertical(directionName.value)
-  arrowEl.value.$el.style.left = directionIsVertical ? middlePosition : null
-  arrowEl.value.$el.style.top = !directionIsVertical ? middlePosition : null
-}
+  actualDirection.value = directionName.value;
+  const directionIsVertical = isDirectionVertical(directionName.value);
+  arrowEl.value.$el.style.left = directionIsVertical ? middlePosition : null;
+  arrowEl.value.$el.style.top = !directionIsVertical ? middlePosition : null;
+};

components/attention/index.js

@@ -1,4 +1,4 @@
-import wAttention from './w-attention.vue'
+import wAttention from './w-attention.vue';
 
-export const Attention = { install: (app) => app.component(wAttention.name, wAttention) }
-export { wAttention }
+export const Attention = { install: (app) => app.component(wAttention.name, wAttention) };
+export { wAttention };

components/badge/index.js

@@ -1,5 +1,5 @@
-import wBadge from './w-badge.vue'
-import { installer } from '#util'
+import wBadge from './w-badge.vue';
+import { installer } from '#util';
 
-export const Badge = { install: installer([wBadge]) }
-export { wBadge }
+export const Badge = { install: installer([wBadge]) };
+export { wBadge };

components/box/index.js

@@ -1,6 +1,6 @@
-import wBox from './w-box.vue'
-import { wClickable } from '#generics'
-import { installer } from '#util'
+import wBox from './w-box.vue';
+import { wClickable } from '#generics';
+import { installer } from '#util';
 
-export const Box = { install: installer([wBox, wClickable]) }
-export { wBox }
+export const Box = { install: installer([wBox, wClickable]) };
+export { wBox };

components/breadcrumbs/index.js

@@ -1,5 +1,5 @@
-import wBreadcrumbs, { wBreadcrumbSeparator } from './w-breadcrumbs.vue'
-import { installer } from '#util'
+import wBreadcrumbs, { wBreadcrumbSeparator } from './w-breadcrumbs.vue';
+import { installer } from '#util';
 
-export const Breadcrumbs = { install: installer([wBreadcrumbs]) }
-export { wBreadcrumbs, wBreadcrumbSeparator }
+export const Breadcrumbs = { install: installer([wBreadcrumbs]) };
+export { wBreadcrumbs, wBreadcrumbSeparator };

components/button-group/index.js

@@ -1,7 +1,7 @@
-import wButtonGroup from './w-button-group.vue'
-import wButtonGroupItem from './w-button-group-item.vue'
-import { wClickable } from '#generics'
-import { installer } from '#util'
+import wButtonGroup from './w-button-group.vue';
+import wButtonGroupItem from './w-button-group-item.vue';
+import { wClickable } from '#generics';
+import { installer } from '#util';
 
-export const ButtonGroup = { install: installer([wClickable, wButtonGroup, wButtonGroupItem]) }
-export { wButtonGroup, wButtonGroupItem }
+export const ButtonGroup = { install: installer([wClickable, wButtonGroup, wButtonGroupItem]) };
+export { wButtonGroup, wButtonGroupItem };

components/button/index.js

@@ -1,5 +1,5 @@
-import wButton from './w-button.vue'
-import { installer } from '#util'
+import wButton from './w-button.vue';
+import { installer } from '#util';
 
-export const Button = { install: installer([wButton]) }
-export { wButton }
+export const Button = { install: installer([wButton]) };
+export { wButton };

components/button/stories/Button.stories.js

@@ -3,9 +3,11 @@ import wButton from '../w-button.vue';
 export default { title: 'Buttons/Button', component: wButton };
 
 const Template = (args) => ({
-    components: { wButton },
-    setup() { return { args }; },
-    template: '<w-button v-bind="args">Click me</w-button>',
+  components: { wButton },
+  setup() {
+    return { args };
+  },
+  template: '<w-button v-bind="args">Click me</w-button>',
 });
 
 export const MainStory = Template.bind({});

components/card/index.js

@@ -1,6 +1,6 @@
-import wCard from './w-card.vue'
-import { wClickable } from '#generics'
-import { installer } from '#util'
+import wCard from './w-card.vue';
+import { wClickable } from '#generics';
+import { installer } from '#util';
 
-export const Card = { install: installer([wClickable, wCard]) }
-export { wCard }
+export const Card = { install: installer([wClickable, wCard]) };
+export { wCard };

components/expandable/index.js

@@ -1,7 +1,7 @@
-import wExpandable from './w-expandable.vue'
-import wWillExpand from './w-will-expand.vue'
-import { wExpandTransition } from '#generics'
-import { installer } from '#util'
+import wExpandable from './w-expandable.vue';
+import wWillExpand from './w-will-expand.vue';
+import { wExpandTransition } from '#generics';
+import { installer } from '#util';
 
-export const Expandable = { install: installer([wExpandable, wExpandTransition, wWillExpand]) }
-export { wExpandable, wWillExpand }
+export const Expandable = { install: installer([wExpandable, wExpandTransition, wWillExpand]) };
+export { wExpandable, wWillExpand };

components/forms/index.js

@@ -1,13 +1,13 @@
-import wField from './w-field.vue'
-import wSelect from './w-select.vue'
-import wTextarea from './w-textarea.vue'
-import wTextfield from './w-textfield.vue'
-import wToggle from './w-toggle.vue'
-import wForm from './w-form.vue'
-import wSuffix from './w-suffix.vue'
-import wAffix from './w-affix.vue'
-import { installer } from '#util'
+import wField from './w-field.vue';
+import wSelect from './w-select.vue';
+import wTextarea from './w-textarea.vue';
+import wTextfield from './w-textfield.vue';
+import wToggle from './w-toggle.vue';
+import wForm from './w-form.vue';
+import wSuffix from './w-suffix.vue';
+import wAffix from './w-affix.vue';
+import { installer } from '#util';
 
-export const Forms = { install: installer([wField, wTextfield, wSelect, wTextarea, wToggle, wForm, wSuffix, wAffix]) }
-export * from './validation'
-export { wTextfield, wSelect, wTextarea, wToggle, wField, wForm, wSuffix, wAffix }
+export const Forms = { install: installer([wField, wTextfield, wSelect, wTextarea, wToggle, wForm, wSuffix, wAffix]) };
+export * from './validation';
+export { wTextfield, wSelect, wTextarea, wToggle, wField, wForm, wSuffix, wAffix };