@propelinc/citrus-ui 1.3.1 → 2.0.0

package/src/styles/variables.scss

@@ -7,6 +7,7 @@
 // found in core.scss.
 // ****************************************************************************
 
+@use 'sass:map';
 @import './core';
 
 // ****************************************************************************
@@ -54,7 +55,7 @@ $material-light: (
 // ACCORDION
 // ****************************************************************************
 $expansion-panel-active-margin: 0;
-$expansion-panel-header-font-size: map-get($subheadline, 'size');
+$expansion-panel-header-font-size: map.get($subheadline, 'size');
 $expansion-panel-header-padding: 18px 16px 16px;
 $expansion-panel-content-padding: 0 16px 16px;
 $expansion-panel-header-min-height: 0;
@@ -69,9 +70,9 @@ $snackbar-top: calc(env(safe-area-inset-top) + 48px);
 //prevents users on smaller devices from dismissing a Toast
 $snackbar-wrapper-min-width: 300px;
 $snackbar-action-margin: 12px;
-$snackbar-content-font-size: map-get($body, 'size');
+$snackbar-content-font-size: map.get($body, 'size');
 $snackbar-content-padding: 12px 16px;
-$snackbar-font-size: map-get($body, 'size');
+$snackbar-font-size: map.get($body, 'size');
 
 // ****************************************************************************
 // BUTTON
@@ -95,12 +96,12 @@ $card-actions-padding: 0 $card-h-spacing 12px;
 $card-border-radius: $border-radius;
 $card-outlined-border-width: $border-width;
 $card-subtitle-padding: $card-v-spacing $card-h-spacing;
-$card-text-font-size: map-get($body, 'size');
-$card-text-line-height: map-get($body, 'line-height');
+$card-text-font-size: map.get($body, 'size');
+$card-text-line-height: map.get($body, 'line-height');
 $card-text-letter-spacing: normal;
-$card-title-font-size: map-get($subheadline, 'size');
-$card-title-font-weight: map-get($subheadline, 'weight');
-$card-title-letter-spacing: map-get($subheadline, 'letter-spacing');
+$card-title-font-size: map.get($subheadline, 'size');
+$card-title-font-weight: map.get($subheadline, 'weight');
+$card-title-letter-spacing: map.get($subheadline, 'letter-spacing');
 $card-title-line-height: 100%;
 $card-title-word-break: break-word;
 $card-btn-margin-x: 0;
@@ -108,7 +109,7 @@ $card-btn-margin-x: 0;
 // ****************************************************************************
 // CHECKBOX
 // ****************************************************************************
-$label-font-size: map-get($body, 'size');
+$label-font-size: map.get($body, 'size');
 
 // ****************************************************************************
 // LISTS
@@ -118,14 +119,14 @@ $list-item-action-margin: 16px 0;
 $list-item-child-min-width: 0;
 $list-item-content-padding: 16px 0 12px;
 $list-item-padding: 0 12px 0 16px;
-$list-item-title-subtitle-line-height: map-get($body, 'line-height');
+$list-item-title-subtitle-line-height: map.get($body, 'line-height');
 
 // ****************************************************************************
 // FORM FIELDS
 // (Text fields, text areas, and selects)
 // Source: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextField/_variables.scss
 // ****************************************************************************
-$input-font-size: map-get($body, 'size');
+$input-font-size: map.get($body, 'size');
 
 $text-field-border-radius: $border-radius;
 $text-field-enclosed-details-padding: 0 16px;
@@ -133,9 +134,9 @@ $text-field-enclosed-details-padding: 0 16px;
 // ****************************************************************************
 // MODALS
 // ****************************************************************************
-$dialog-card-title-font-size: map-get($headline, 'size');
-$dialog-card-title-font-weight: map-get($headline, 'weight');
-$dialog-card-title-letter-spacing: map-get($headline, 'letter-spacing');
+$dialog-card-title-font-size: map.get($headline, 'size');
+$dialog-card-title-font-weight: map.get($headline, 'weight');
+$dialog-card-title-letter-spacing: map.get($headline, 'letter-spacing');
 $dialog-card-text-padding: 0 $card-h-spacing $card-v-spacing;
 $dialog-card-actions-padding: 0 $card-h-spacing $card-v-spacing;
 $dialog-card-title-padding: $card-h-spacing $card-h-spacing 10px;

package/dist/components/CCol.vue.d.ts

@@ -1,30 +0,0 @@
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type Cols = 'auto' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-type __VLS_Props = {
-    /**
-     * Sets the default number of columns the component extends.
-     * Available options are: 1 -> 12 and auto.
-     */
-    cols?: Cols | null;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default?: () => VNode[];
-    }> & {
-        default?: () => VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    cols: Cols | null;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/CRow.vue.d.ts

@@ -1,41 +0,0 @@
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    /** Applies the align-items css property.
-     * Available options are: start, center, end and stretch. */
-    align?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /** Applies the align-content css property.
-     * Available options are: start, center, end, and stretch. */
-    alignContent?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /**  Reduces the gutter between c-cols. */
-    dense?: boolean;
-    /** Removes the gutter between c-cols. */
-    noGutters?: boolean;
-    /** Applies the justify-content css property.
-     * Available options are: start, center, end, space-between and space-around. */
-    justify?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | null;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default?: () => VNode[];
-    }> & {
-        default?: () => VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    align: "center" | "start" | "end" | "stretch" | null;
-    alignContent: "center" | "start" | "end" | "stretch" | null;
-    dense: boolean;
-    noGutters: boolean;
-    justify: "center" | "start" | "end" | "space-between" | "space-around" | null;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/CCol.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="c-col" :class="{ [`c-col-${cols}`]: cols }">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNode } from 'vue';
-
-type Cols = 'auto' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-
-withDefaults(
-  defineProps<{
-    /**
-     * Sets the default number of columns the component extends.
-     * Available options are: 1 -> 12 and auto.
-     */
-    cols?: Cols | null;
-  }>(),
-  {
-    cols: null,
-  }
-);
-
-defineSlots<{
-  default?: () => VNode[];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.c-col {
-  flex-basis: 0;
-  flex-grow: 1;
-  max-width: 100%;
-
-  &:not(.c-col-auto) {
-    padding: 12px;
-    width: 100%;
-  }
-}
-
-.c-col-auto {
-  flex: 0 0 auto;
-  max-width: 100%;
-  width: auto;
-}
-
-@for $i from 1 through 12 {
-  .c-col-#{$i} {
-    flex: 0 0 calc(#{$i} / 12 * 100%);
-    max-width: calc(#{$i} / 12 * 100%);
-  }
-}
-</style>

package/src/components/CRow.vue

@@ -1,64 +0,0 @@
-<template>
-  <div
-    class="c-row"
-    :class="{
-      'c-row--dense': dense,
-      'c-row--no-gutters': noGutters,
-      [`align-${align}`]: align,
-      [`align-content-${alignContent}`]: alignContent,
-      [`justify-${justify}`]: justify,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNode } from 'vue';
-
-withDefaults(
-  defineProps<{
-    /** Applies the align-items css property.
-     * Available options are: start, center, end and stretch. */
-    align?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /** Applies the align-content css property.
-     * Available options are: start, center, end, and stretch. */
-    alignContent?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /**  Reduces the gutter between c-cols. */
-    dense?: boolean;
-    /** Removes the gutter between c-cols. */
-    noGutters?: boolean;
-    /** Applies the justify-content css property.
-     * Available options are: start, center, end, space-between and space-around. */
-    justify?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | null;
-  }>(),
-  {
-    align: null,
-    alignContent: null,
-    dense: false,
-    noGutters: false,
-    justify: null,
-  }
-);
-
-defineSlots<{
-  default?: () => VNode[];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.c-row {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  margin: 0 -12px;
-}
-
-.c-row--dense {
-  margin: 0 -4px;
-}
-
-.c-row--no-gutters {
-  margin: 0;
-}
-</style>