@citizenplane/pimp 14.0.0 → 14.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/pimp.es.js +3 -1
  2. package/dist/pimp.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/CpTelInput.vue +4 -1
  6. package/src/components/CpTransitionCounter.vue +10 -10
  7. package/src/stories/CpTelInput.stories.ts +13 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citizenplane/pimp",
3
- "version": "14.0.0",
3
+ "version": "14.0.2",
4
4
  "scripts": {
5
5
  "dev": "storybook dev -p 8080",
6
6
  "build-storybook": "storybook build --output-dir ./docs",
package/src/components/CpTelInput.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  v-model="inputModel"
10
10
  class="cpTelInput__wrapper"
11
11
  :class="wrapperDynamicClasses"
12
+ :default-country
12
13
  :disabled
13
14
  :dropdown-options
14
15
  :input-options
@@ -49,6 +50,7 @@ import { capitalizeFirstLetter } from '@/helpers'
49
50
 
50
51
  interface Props {
51
52
  autofocus?: boolean
53
+ defaultCountry?: string
52
54
  disabled?: boolean
53
55
  errorMessage?: string
54
56
  help?: string
@@ -75,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
75
77
  name: '',
76
78
  hideSearch: false,
77
79
  size: 'md',
80
+ defaultCountry: undefined,
78
81
  })
79
82
 
80
83
  const emit = defineEmits<Emits>()
@@ -383,7 +386,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
383
386
  }
384
387
 
385
388
  &.below {
386
- top: var(--cp-dimensions-10) + var(--cp-spacing-md);
389
+ top: calc(var(--cp-dimensions-10) + var(--cp-spacing-md));
387
390
  }
388
391
 
389
392
  &.above {
package/src/components/CpTransitionCounter.vue CHANGED
@@ -43,32 +43,32 @@ watch(
43
43
  display: inline-flex;
44
44
  overflow: hidden;
45
45
 
46
- &-up-enter-from {
46
+ .counter-up-enter-from {
47
47
  transform: translate3d(0, 100%, 0);
48
48
  }
49
49
 
50
- &-down-enter-from {
50
+ .counter-down-enter-from {
51
51
  transform: translate3d(0, -100%, 0);
52
52
  }
53
53
 
54
- &-up-leave-to,
55
- &-down-leave-to {
54
+ .counter-up-leave-to,
55
+ .counter-down-leave-to {
56
56
  filter: blur(1px);
57
57
  opacity: 0;
58
58
  }
59
59
 
60
- &-up-leave-to {
60
+ .counter-up-leave-to {
61
61
  transform: translate3d(0, -100%, 0) skewY(-30deg);
62
62
  }
63
63
 
64
- &-down-leave-to {
64
+ .counter-down-leave-to {
65
65
  transform: translate3d(0, 100%, 0) skewY(30deg);
66
66
  }
67
67
 
68
- &-up-enter-active,
69
- &-down-enter-active,
70
- &-up-leave-active,
71
- &-down-leave-active {
68
+ .counter-up-enter-active,
69
+ .counter-down-enter-active,
70
+ .counter-up-leave-active,
71
+ .counter-down-leave-active {
72
72
  transition:
73
73
  transform 200ms ease,
74
74
  opacity 200ms ease;
package/src/stories/CpTelInput.stories.ts CHANGED
@@ -33,3 +33,16 @@ export const Default: Story = {
33
33
  template: `<CpTelInput v-bind="args" />`,
34
34
  }),
35
35
  }
36
+
37
+ export const WithDefaultCountry: Story = {
38
+ args: {
39
+ defaultCountry: 'us',
40
+ },
41
+ render: (args) => ({
42
+ components: { CpTelInput },
43
+ setup() {
44
+ return { args }
45
+ },
46
+ template: `<CpTelInput v-bind="args" />`,
47
+ }),
48
+ }