cmat 0.0.78 → 0.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmat",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "author": {
     "name": "Yu Tao",
     "email": "916426364@qq.com"

package/tailwind/plugins/helpers.js

@@ -1,13 +1,4 @@
-/**
- * Gets the underlying default import of a module.
- *
- * This is used to handle internal imoprts from Tailwind, since Tailwind Play
- * handles these imports differently.
- *
- * @template T
- * @param {T | { __esModule: unknown, default: T }} mod The module
- * @returns {T} The bare export
- */
+
 // eslint-disable-next-line no-underscore-dangle
 const importDefault = mod => (mod && mod.__esModule ? mod.default : mod);
 

package/tailwind/plugins/scrollbar/index.js

@@ -1,4 +1,3 @@
-// TODO: Figure out why the linter is unhappy with this import
 // eslint-disable-next-line import/no-unresolved
 const plugin = require('tailwindcss/plugin');
 const {

package/tailwind/plugins/scrollbar/typedefs.js

@@ -1,9 +1,3 @@
-/**
- * @typedef {object} TailwindPlugin
- * @property {Function} matchUtilities - Adds utilities to tailwind
- * @property {Function} theme - Accesses tailwind's theme
- * @property {Function} addVariant - Adds a variant to tailwind
- * @property {Function} config - Accesses tailwind's configuration
- */
+
 
 exports.unused = {};

package/tailwind/plugins/scrollbar/utilities.js

@@ -2,19 +2,11 @@ const path = require('path');
 const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
 const typedefs = require(path.resolve(__dirname, ('./typedefs')));
 const { importDefault } = require(path.resolve(__dirname, ('../helpers')));
-
-// Tailwind Play will import these internal imports as ES6 imports, while most
-// other workflows will import them as CommonJS imports.
 const flattenColorPalette = importDefault(flattenColorPaletteImport);
 
 const COMPONENTS = ['track', 'thumb', 'corner'];
 
-/**
- * @param {Record<never, unknown>} properties - The properties to assign
- * @param {boolean} preferPseudoElements - If true, only browsers that cannot
- *    use pseudoelements will specify scrollbar properties
- * @returns {Record<string, unknown>} - The generated CSS rules
- */
+
 const scrollbarProperties = (properties, preferPseudoElements) => {
   if (preferPseudoElements) {
     return {
@@ -25,13 +17,7 @@ const scrollbarProperties = (properties, preferPseudoElements) => {
   return properties;
 };
 
-/**
- * Base resets to make the plugin's utilities work
- *
- * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
- * @param {'standard' | 'peseudoelements'} preferredStrategy - The preferred
- *    scrollbar styling strategy: standards track or pseudoelements
- */
+
 const addBaseStyles = ({ addBase }, preferredStrategy) => {
   addBase({
     '*': scrollbarProperties({
@@ -41,12 +27,7 @@ const addBaseStyles = ({ addBase }, preferredStrategy) => {
   });
 };
 
-/**
- * Generates utilties that tell an element what to do with
- * --scrollbar-track and --scrollbar-thumb custom properties
- *
- * @returns {Record<string, unknown>} - The generated CSS
- */
+
 const generateBaseUtilities = () => ({
   ...Object.fromEntries(COMPONENTS.map(component => {
     const base = `&::-webkit-scrollbar-${component}`;
@@ -60,15 +41,7 @@ const generateBaseUtilities = () => ({
   }).flat())
 });
 
-/**
- * Utilities for initializing a custom styled scrollbar, which implicitly set
- * the scrollbar's size
- *
- * @param {object} options - Options
- * @param {boolean} options.preferPseudoElements - If true, only browsers that
- *    cannot use pseudoelements will specify scrollbar-width
- * @returns {Record<string, unknown>} - Base size utilities for scrollbars
- */
+
 const generateScrollbarSizeUtilities = ({ preferPseudoElements }) => ({
   '.scrollbar': {
     ...generateBaseUtilities(),
@@ -109,19 +82,10 @@ const generateScrollbarSizeUtilities = ({ preferPseudoElements }) => ({
   }
 });
 
-/**
- * Converts a color value or function to a color value
- *
- * @param {string | Function} maybeFunction - The color value or function
- * @returns {string} - The color value
- */
+
 const toColorValue = maybeFunction => (typeof maybeFunction === 'function' ? maybeFunction({}) : maybeFunction);
 
-/**
- * Adds scrollbar-COMPONENT-COLOR utilities for every scrollbar component.
- *
- * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
- */
+
 const addColorUtilities = ({ matchUtilities, theme }) => {
   const themeColors = flattenColorPalette(theme('colors'));
   const colors = Object.fromEntries(
@@ -143,12 +107,7 @@ const addColorUtilities = ({ matchUtilities, theme }) => {
   });
 };
 
-/**
- * Adds scrollbar-COMPONENT-rounded-VALUE utilities for every scrollbar
- * component.
- *
- * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
- */
+
 const addRoundedUtilities = ({ theme, matchUtilities }) => {
   COMPONENTS.forEach(component => {
     matchUtilities(
@@ -164,22 +123,14 @@ const addRoundedUtilities = ({ theme, matchUtilities }) => {
   });
 };
 
-/**
- * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
- * @param {'standard' | 'peseudoelements'} preferredStrategy - The preferred
- *    scrollbar styling strategy: standards track or pseudoelements
- */
+
 const addBaseSizeUtilities = ({ addUtilities }, preferredStrategy) => {
   addUtilities(generateScrollbarSizeUtilities({
     preferPseudoElements: preferredStrategy === 'pseudoelements'
   }));
 };
 
-/**
- * Adds scrollbar-w-* and scrollbar-h-* utilities
- *
- * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
- */
+
 const addSizeUtilities = ({ matchUtilities, theme }) => {
   ['width', 'height'].forEach(dimension => {
     matchUtilities({

package/tailwind/plugins/scrollbar/variants.js

@@ -1,20 +1,6 @@
-/** @typedef {import('./typedefs').TailwindPlugin} TailwindPlugin */
 
-/**
- * Adds scrollbar variants for styling webkit scrollbars' hover and active
- * states.
- *
- * Earlier iterations of this plugin hijacked the hover: and active: variants
- * directly to create a cleaner syntax, but there are several issues with that
- * approach:
- *     - It made the plugin prone to breaking other unrelated styles
- *     - It made logic like "make an element's scrollbar green when the
- *       _element_ is hovered impossible. (This is unusual, but should still
- *       be possible.)
- *     - It straight up does not work in Tailwind v4.
- *
- * @param {TailwindPlugin} tailwind - Tailwind's plugin object
- */
+
+
 const addVariants = ({ addVariant }) => {
     addVariant('scrollbar-hover', '&::-webkit-scrollbar-thumb:hover');
     addVariant('scrollbar-track-hover', '&::-webkit-scrollbar-track:hover');
@@ -22,7 +8,6 @@ const addVariants = ({ addVariant }) => {
   
     addVariant('scrollbar-active', '&::-webkit-scrollbar-thumb:active');
     addVariant('scrollbar-track-active', '&::-webkit-scrollbar-track:active');
-    // Corners can't be active, so they don't get their own active variant.
   };
   
   module.exports = {

package/tailwind/plugins/theming.js

@@ -22,36 +22,20 @@ const normalizeTheme = (theme) => {
     ));
 };
 
-// -----------------------------------------------------------------------------------------------------
-// @ cmat TailwindCSS Main Plugin
-// -----------------------------------------------------------------------------------------------------
 const theming = plugin.withOptions((options) => ({
     addComponents,
     theme
 }) => {
-    /**
-     * Create user themes object by going through the provided themes and
-     * merging them with the provided "default" so, we can have a complete
-     * set of color palettes for each user theme.
-     */
     const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
         themeName,
         _.defaults({}, theme, options.themes['default'])
     ]));
 
-    /**
-     * Normalize the themes and assign it to the themes object. This will
-     * be the final object that we create a SASS map from
-     */
     let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
         themeName,
         normalizeTheme(theme)
     ]));
 
-    /**
-     * Go through the themes to generate the contrasts and filter the
-     * palettes to only have "primary", "accent" and "warn" objects.
-     */
     themes = _.fromPairs(_.map(themes, (theme, themeName) => [
         themeName,
         _.pick(
@@ -69,10 +53,6 @@ const theming = plugin.withOptions((options) => ({
         )
     ]));
 
-    /**
-     * Go through the themes and attach appropriate class selectors so,
-     * we can use them to encapsulate each theme.
-     */
     themes = _.fromPairs(_.map(themes, (theme, themeName) => [
         themeName,
         {
@@ -81,13 +61,10 @@ const theming = plugin.withOptions((options) => ({
         }
     ]));
 
-    /* Generate the SASS map using the themes object */
     const sassMap = jsonToSassMap(JSON.stringify({ 'user-themes': themes }));
 
-    /* Get the file path */
     const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
 
-    /* Read the file and get its data */
     let data;
     try {
         data = fs.readFileSync(filename, { encoding: 'utf8' });
@@ -96,7 +73,6 @@ const theming = plugin.withOptions((options) => ({
         console.error(err);
     }
 
-    /* Write the file if the map has been changed */
     if (data !== sassMap) {
         try {
             fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
@@ -123,9 +99,6 @@ const theming = plugin.withOptions((options) => ({
         ]))
     );
 
-    /**
-     * Generate scheme based css custom properties and utility classes
-     */
     const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => {
         const isDark = colorScheme === 'dark';
         const background = theme(`cmat.customProps.background.${colorScheme}`);
@@ -136,31 +109,8 @@ const theming = plugin.withOptions((options) => ({
         return {
             [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
 
-                /**
-                 * If a custom property is not available, browsers will use
-                 * the fallback value. In this case, we want to use '--is-dark'
-                 * as the indicator of a dark theme so, we can use it like this:
-                 * background-color: var(--is-dark, red);
-                 *
-                 * If we set '--is-dark' as "true" on dark themes, the above rule
-                 * won't work because of the said "fallback value" logic. Therefore,
-                 * we set the '--is-dark' to "false" on light themes and not set it
-                 * at all on dark themes so that the fallback value can be used on
-                 * dark themes.
-                 *
-                 * On light themes, since '--is-dark' exists, the above rule will be
-                 * interpolated as:
-                 * "background-color: false"
-                 *
-                 * On dark themes, since '--is-dark' doesn't exist, the fallback value
-                 * will be used ('red' in this case) and the rule will be interpolated as:
-                 * "background-color: red"
-                 *
-                 * It's easier to understand and remember like this.
-                 */
                 ...(!isDark ? { '--is-dark': 'false' } : {}),
 
-                /* Generate custom properties from customProps */
                 ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]]))),
                 ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
             }
@@ -168,7 +118,6 @@ const theming = plugin.withOptions((options) => ({
     });
 
     const schemeUtilities = (() => {
-        /* Generate general styles & utilities */
         return {};
     })();
 
@@ -179,11 +128,6 @@ const theming = plugin.withOptions((options) => ({
         return {
             theme: {
                 extend: {
-                    /**
-                     * Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
-                     * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
-                     * This will also allow using arbitrary values with them such as opacity and such.
-                     */
                     colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
                         [name, `rgba(var(--cmat-${name}-rgb), <alpha-value>)`],
                         [`on-${name}`, `rgba(var(--cmat-on-${name}-rgb), <alpha-value>)`]
@@ -236,4 +180,4 @@ const theming = plugin.withOptions((options) => ({
     }
 );
 
-module.exports = theming;
+module.exports = theming;

package/tailwind/utils/generate-contrasts.js

@@ -1,24 +1,13 @@
 const chroma = require('chroma-js');
 const _ = require('lodash');
 
-/**
- * Generates contrasting counterparts of the given palette.
- * The provided palette must be in the same format with
- * default Tailwind color palettes.
- *
- * @param palette
- * @private
- */
+
 const generateContrasts = (palette) => {
     const lightColor = '#FFFFFF';
     let darkColor = '#FFFFFF';
-
-    // Iterate through the palette to find the darkest color
     _.forEach(palette, ((color) => {
         darkColor = chroma.contrast(color, '#FFFFFF') > chroma.contrast(darkColor, '#FFFFFF') ? color : darkColor;
     }));
-
-    // Generate the contrasting colors
     return _.fromPairs(_.map(palette, ((color, hue) => [
         hue,
         chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor

package/tailwind/utils/generate-palette.js

@@ -1,17 +1,9 @@
 const chroma = require('chroma-js');
 const _ = require('lodash');
 
-/**
- * Generates palettes from the provided configuration.
- * Accepts a single color string or a Tailwind-like
- * color object. If provided Tailwind-like color object,
- * it must have a 500 hue level.
- *
- * @param config
- */
+
 const generatePalette = (config) =>
 {
-    // Prepare an empty palette
     const palette = {
         50 : null,
         100: null,
@@ -24,37 +16,20 @@ const generatePalette = (config) =>
         800: null,
         900: null
     };
-
-    // If a single color is provided,
-    // assign it to the 500
     if ( _.isString(config) )
     {
         palette[500] = chroma.valid(config) ? config : null;
     }
-
-    // If a partial palette is provided,
-    // assign the values
     if ( _.isPlainObject(config) )
     {
         if ( !chroma.valid(config[500]) )
         {
             throw new Error('You must have a 500 hue in your palette configuration! Make sure the main color of your palette is marked as 500.');
         }
-
-        // Remove everything that is not a hue/color entry
         config = _.pick(config, Object.keys(palette));
-
-        // Merge the values
         _.mergeWith(palette, config, (objValue, srcValue) => chroma.valid(srcValue) ? srcValue : null);
     }
-
-    // Prepare the colors array
     const colors = Object.values(palette).filter((color) => color);
-
-    // Generate a very dark and a very light versions of the
-    // default color to use them as the boundary colors rather
-    // than using pure white and pure black. This will stop
-    // in between colors' hue values to slipping into the grays.
     colors.unshift(
         chroma.scale(['white', palette[500]])
             .domain([0, 1])
@@ -67,8 +42,6 @@ const generatePalette = (config) =>
             .mode("lrgb")
             .colors(10)[1]
     );
-
-    // Prepare the domains array
     const domain = [
         0,
         ...Object.entries(palette)
@@ -76,13 +49,9 @@ const generatePalette = (config) =>
             .map(([key]) => parseInt(key) / 1000),
         1
     ];
-
-    // Generate the color scale
     const scale = chroma.scale(colors)
         .domain(domain)
         .mode('lrgb');
-
-    // Build and return the final palette
     return {
         50 : scale(0.05).hex(),
         100: scale(0.1).hex(),

package/types/cmat-components-adapter.d.ts

@@ -87,12 +87,6 @@ declare class CNativeDatetimeAdapter extends DatetimeAdapter<Date> {
     addCalendarMinutes(date: Date, minutes: number): Date;
     toIso8601(date: Date): string;
     private _getDateInNextMonth;
-    /**
-     * Pads a number to make it two digits.
-     *
-     * @param n The number to pad.
-     * @returns The padded number.
-     */
     private _2digit;
     private _createDateWithOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<CNativeDatetimeAdapter, never>;
@@ -123,14 +117,8 @@ declare class DayjsDatetimeAdapter extends DatetimeAdapter<Dayjs> {
 declare const CMAT_DAYJS_DATETIME_FORMATS: CmatDatetimeFormats;
 
 interface DayJsDateAdapterOptions {
-    /**
-     * Turns the use of utc dates on or off.
-     * Changing this will change how Angular Material components like DatePicker output dates.
-     * {@default false}
-     */
     useUtc?: boolean;
 }
-/** InjectionToken for Dayjs date adapter to configure options. */
 declare const CMAT_DAYJS_DATE_ADAPTER_OPTIONS: InjectionToken<DayJsDateAdapterOptions>;
 declare function CMAT_DAYJS_DATE_ADAPTER_OPTIONS_FACTORY(): DayJsDateAdapterOptions;
 declare class DayjsDateAdapter extends DateAdapter<Dayjs> {
@@ -158,19 +146,6 @@ declare class DayjsDateAdapter extends DateAdapter<Dayjs> {
     addCalendarMonths(date: Dayjs, months: number): Dayjs;
     addCalendarDays(date: Dayjs, days: number): Dayjs;
     toIso8601(date: Dayjs): string;
-    /**
-     * Attempts to deserialize a value to a valid date object. This is different from parsing in that
-     * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
-     * string). The default implementation does not allow any deserialization, it simply checks that
-     * the given value is already a valid date object or null. The `<mat-datepicker>` will call this
-     * method on all of it's `@Input()` properties that accept dates. It is therefore possible to
-     * support passing values from your backend directly to these properties by overriding this method
-     * to also deserialize the format used by your backend.
-     *
-     * @param value The value to be deserialized into a date object.
-     * @returns The deserialized date object, either a valid date, null if the value can be
-     *     deserialized into a null date (e.g. the empty string), or an invalid date.
-     */
     deserialize(value: any): Dayjs | null;
     isDateInstance(obj: any): boolean;
     isValid(date: Dayjs): boolean;