On gists

Component props stealing

Vue.js

demo.js Raw #

// my version - inspired by https://michaelnthiessen.com/stealing-prop-types/

// iconDefault.js
export const iconDefaults = {
  size: 'medium',
  shape: 'circle',
  icon: 'default',
  animation: 'none'
};


<!-- Icon.vue -->
<script setup>
import { iconDefaults } from './iconDefaults.js';

const props = defineProps({
  size: { type: String, default: iconDefaults.size },
  shape: { type: String, default: iconDefaults.shape },
  icon: { type: String, default: iconDefaults.icon },
  animation: { type: String, default: iconDefaults.animation }
});
</script>

<!-- Panel.vue -->
<script setup>
import Icon from './Icon.vue';
import { iconDefaults } from './iconDefaults.js';
import { computed } from 'vue';

const props = defineProps({
  heading: String,
  withIcons: Boolean,
  iconConfig: {
    type: Object,
    default: () => ({ ...iconDefaults })
  }
});

const finalIconConfig = computed(() => {
  return { ...iconDefaults, ...props.iconConfig };
});
</script>