@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
340 lines (291 loc) • 6.93 kB
text/typescript
import { defineComponent, Prop } from 'vue';
import { breakpointKeys } from '@inkline/inkline/constants';
import { breakpointClass, capitalizeFirst } from '@inkline/inkline/helpers';
/**
* Slot for default column content
* @name default
* @kind slot
*/
/**
* The number of columns to span for extra-small screen sizes. Setting the prop to true will set the width automatically
* @name xs
* @type Boolean | String | Number
* @default
*/
/**
* The number of columns to span for small screen sizes. Setting the prop to true will set the width automatically
* @name sm
* @type Boolean | String | Number
* @default
*/
/**
* The number of columns to span for medium screen sizes. Setting the prop to true will set the width automatically
* @name md
* @type Boolean | String | Number
* @default
*/
/**
* The number of columns to span for large screen sizes. Setting the prop to true will set the width automatically
* @name lg
* @type Boolean | String | Number
* @default
*/
/**
* The number of columns to span for extra-large screen sizes. Setting the prop to true will set the width automatically
* @name xl
* @type Boolean | String | Number
* @default
*/
/**
* The number of columns to span for extra-extra-large screen sizes. Setting the prop to true will set the width automatically
* @name xxl
* @type Boolean | String | Number
* @default
*/
/**
* Display the column as the first column
* @name first
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on extra-small screens
* @name first-xs
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on small screens
* @name first-sm
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on medium screens
* @name first-md
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on large screens
* @name first-lg
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on extra-large screens
* @name first-xl
* @type Boolean
* @default false
*/
/**
* Display the column as the first column on extra-extra-large screens
* @name first-xxl
* @type Boolean
* @default false
*/
/**
* Display the column as the last column
* @name last
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on extra-small screens
* @name last-xs
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on small screens
* @name last-sm
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on medium screens
* @name last-md
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on large screens
* @name last-lg
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on extra-large screens
* @name last-xl
* @type Boolean
* @default false
*/
/**
* Display the column as the last column on extra-extra-large screens
* @name last-xxl
* @type Boolean
* @default false
*/
/**
* The number of columns to offset the column by
* @name offset
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on extra-small screens
* @name offset-xs
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on small screens
* @name offset-sm
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on medium screens
* @name offset-md
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on large screens
* @name offset-lg
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on extra-large screens
* @name offset-xl
* @type String | Number
* @default
*/
/**
* The number of columns to offset the column by on extra-extra-large screens
* @name offset-xxl
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by
* @name push
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on extra-small screens
* @name push-xs
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on small screens
* @name push-sm
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on medium screens
* @name push-md
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on large screens
* @name push-lg
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on extra-large screens
* @name push-xl
* @type String | Number
* @default
*/
/**
* The number of columns to push the column by on extra-extra-large screens
* @name push-xxl
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by
* @name pull
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on extra-small screens
* @name pull-xs
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on small screens
* @name pull-sm
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on medium screens
* @name pull-md
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on large screens
* @name pull-lg
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on extra-large screens
* @name pull-xl
* @type String | Number
* @default
*/
/**
* The number of columns to pull the column by on extra-extra-large screens
* @name pull-xxl
* @type String | Number
* @default
*/
export const properties: { [key: string]: Prop<any> } = {};
for (const breakpoint of breakpointKeys) {
if (breakpoint !== '') {
properties[breakpoint] = {
type: [String, Boolean, Number],
default: false
};
}
for (const property of ['first', 'last']) {
properties[`${property}${capitalizeFirst(breakpoint)}`] = {
type: Boolean,
default: false
};
}
for (const property of ['offset', 'push', 'pull']) {
properties[`${property}${capitalizeFirst(breakpoint)}`] = {
type: [String, Number],
default: ''
};
}
}
const componentName = 'IColumn';
export default defineComponent({
name: componentName,
props: properties,
computed: {
classes () {
return Object.keys(properties)
.reduce((acc: { [key: string]: boolean }, property) => {
if (this[property]) {
acc[breakpointClass(`-${property}`, this[property])] = true;
}
return acc;
}, {});
}
}
});