@ohos-ports/flowbite-datepicker 2.0.0-beta.0

package/sass/datepicker.scss

@@ -0,0 +1,436 @@
+//== foundational variables ==//
+$black: hsl(0, 0%, 4%) !default;
+$white: hsl(0, 0%, 100%) !default;
+$light: hsl(0, 0%, 96%) !default; // white-ter
+$dark: hsl(0, 0%, 21%) !default;  // grey-darker
+$link: hsl(217, 71%, 53%) !default; // blue
+
+$grey-dark: lighten($black, 25%) !default;
+$grey-light: darken($light, 25%) !default;
+$grey-lighter: darken($light, 10%) !default;
+
+//== datepicker variables ==//
+$dp-background-color: $white !default;
+$dp-border-color: $grey-lighter !default;
+$dp-border-radius: 4px !default;
+$dp-border-radius-small: 2px !default;
+$dp-line-height-base: 1.5 !default;
+$dp-font-size-normal: 1rem !default;
+$dp-font-size-small: 0.75rem !default;
+$dp-font-weight-semibold: 600 !default;
+$dp-font-weight-bold: 700 !default;
+$dp-dropdown-offset: 4px !default;
+$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$dp-dropdown-z: 20 !default;
+
+$dp-title-background-color: $light !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken($light, 5%) !default;
+$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey
+$dp-cell-disabled-color: $grey-lighter !default;
+$dp-cell-selected-background-color: $link !default;
+$dp-cell-selected-color: #fff !default; // link(blue)-invert
+$dp-cell-selected-font-weight: 600 !default;
+$dp-cell-today-background-color: hsl(171, 100%, 41%) !default;  // turquoise (primary)
+$dp-cell-today-color: #fff !default;  // turquoise-invert
+$dp-cell-highlighted-background-color: $light !default;
+$dp-range-start-end-background-color: $grey-light !default;
+$dp-range-start-end-color: $dp-cell-selected-color !default;
+$dp-range-background-color: $grey-lighter !default;
+$dp-range-today-background-color: $dp-cell-today-background-color !default;
+$dp-week-color: $grey-light !default;
+
+$dp-footer-background-color: $light !default;
+
+$dp-input-in-edit-border-color: darken($link, 5%) !default;
+$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
+
+//== non-configurable variables ==//
+$dp-cell-shrink-threshold: $dp-cell-size-base * 10;  // = 8 * 1.25
+$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8;
+
+//== mixins ==//
+@import 'mixins';
+
+//== styles ==//
+.datepicker {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $dp-dropdown-z;
+  padding-top: $dp-dropdown-offset;
+
+  &.datepicker-orient-top {
+    padding-top: 0;
+    padding-bottom: $dp-dropdown-offset;
+  }
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: $dp-border-radius;
+  background-color: $dp-background-color;
+
+  .datepicker-dropdown & {
+    box-shadow: $dp-dropdown-shadow;
+  }
+
+  span {
+    display: block;
+    flex: 1;
+    border: 0;
+    border-radius: $dp-border-radius;
+    cursor: default;
+    text-align: center;
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba($black, 0.1);
+  background-color: $dp-footer-background-color;
+}
+
+%flex-container {
+  display: flex;
+}
+
+%flex-wrap {
+  flex-wrap: wrap;
+}
+
+%flex-basis-day {
+  flex-basis: percentage(1 / 7);
+}
+
+%flex-basis-month-year {
+  flex-basis: 25%;
+}
+
+%datepicker-cell-height {
+  height: $dp-cell-size-base;
+  line-height: $dp-cell-size-base;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba($black, 0.1);
+  background-color: $dp-title-background-color;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: $dp-font-weight-bold;
+}
+
+.datepicker-controls {
+  @extend %flex-container;
+
+  .datepicker-header & {
+    padding: 2px 2px 0;
+  }
+
+  @if mixin-exists(dp-button) {
+    @include dp-button;
+  } @else {
+    .button {
+      $button-color: $dark;
+      $button-background-color: $white;
+
+      $button-border-color: $grey-lighter;
+      $button-border-width: 1px;
+
+      $button-padding-vertical: calc(0.375em - #{$button-border-width});
+      $button-padding-horizontal: 0.75em;
+
+      $button-hover-color: $dark; // link-hover
+      $button-hover-border-color: $grey-light;  // link-hover-border
+
+      $button-focus-color: $dark; // link-focus
+      $button-focus-border-color: $link;  // link-focus-border
+      $button-focus-box-shadow-size: 0 0 0 0.125em;
+      $button-focus-box-shadow-color: rgba($link, 0.25);
+
+      $button-active-color: $dark;  // link-active
+      $button-active-border-color: $grey-dark;  // link-active-border
+
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      border: $button-border-width solid $button-border-color;
+      border-radius: $dp-border-radius; // control-radius
+      box-shadow: none;
+      background-color: $button-background-color;
+      cursor: pointer;
+      padding: $button-padding-vertical $button-padding-horizontal;
+      height: 2.25em; // control-height
+      vertical-align: top;
+      text-align: center;
+      line-height: $dp-line-height-base;  // control-line-height
+      white-space: nowrap;
+      color: $button-color;
+      font-size: $dp-font-size-normal;  // size-normal
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+
+      &:hover {
+        border-color: $button-hover-border-color;
+        color: $button-hover-color;
+      }
+
+      &:focus {
+        border-color: $button-focus-border-color;
+        color: $button-focus-color;
+
+        &:not(:active) {
+          box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+        }
+      }
+
+      &:active {
+        border-color: $button-active-border-color;
+        color: $button-active-color;
+      }
+
+      &[disabled] {
+        cursor: not-allowed;
+      }
+
+      .datepicker-header & {
+        @include dp-header-button-common;
+
+        &:hover {
+          background-color: darken($white, 2.5%);
+        }
+
+        &:focus {
+          &:not(:active) {
+            box-shadow: 0 0 0 0.125em rgba($white, 0.25);
+          }
+        }
+
+        &:active {
+          background-color: darken($white, 5%);
+        }
+
+        &[disabled] {
+          box-shadow: none;
+        }
+      }
+
+      .datepicker-footer & {
+        @include dp-footer-button-common;
+      }
+    }
+  }
+
+  .view-switch {
+    flex: auto;
+  }
+
+  .prev-btn,
+  .next-btn {
+    padding-right: 0.375rem;
+    padding-left: 0.375rem;
+    width: $dp-cell-size-base;
+
+    &.disabled {
+      visibility: hidden;
+    }
+  }
+}
+
+.datepicker-view {
+  @extend %flex-container;
+
+  .days-of-week {
+    @extend %flex-container;
+  }
+
+  .dow {
+    @extend %flex-basis-day;
+    height: $dp-font-size-normal * $dp-line-height-base;
+    line-height: $dp-font-size-normal * $dp-line-height-base;
+    font-size: ($dp-font-size-small + $dp-font-size-normal) / 2;
+    font-weight: $dp-font-weight-bold;
+  }
+
+  .week {
+    @extend %datepicker-cell-height;
+    width: $dp-cell-size-base;
+    color: $dp-week-color;
+    font-size: $dp-font-size-small;
+
+    @media (max-width: $dp-cell-shrink-threshold) {
+      width: $dp-cell-shrinked-width;
+    }
+  }
+}
+
+.datepicker-grid {
+  @extend %flex-container;
+  @extend %flex-wrap;
+
+  width: $dp-cell-size-base * 7;
+
+  @media (max-width: $dp-cell-shrink-threshold) {
+    .calendar-weeks + .days & {
+      width: $dp-cell-shrinked-width * 7;
+    }
+  }
+}
+
+.datepicker-cell {
+  @extend %datepicker-cell-height;
+
+  &:not(.disabled):hover {
+    background-color: darken($dp-background-color, 2.5%);
+    cursor: pointer;
+  }
+
+  &.focused:not(.selected) {
+    background-color: $dp-cell-focus-background-color;
+  }
+
+  &.selected {
+    &,
+    &:hover {
+      background-color: $dp-cell-selected-background-color;
+      color: $dp-cell-selected-color;
+      font-weight: $dp-cell-selected-font-weight;
+    }
+  }
+
+  &.disabled {
+    color: $dp-cell-disabled-color;
+  }
+
+  &.prev,
+  &.next {
+    &:not(.disabled) {
+      color: $dp-cell-prevnext-color;
+    }
+
+    &.selected {
+      color: darken($dp-cell-selected-color, 10%);
+    }
+  }
+
+  &.highlighted:not(.selected):not(.range):not(.today) {
+    border-radius: 0;
+    background-color: $dp-cell-highlighted-background-color;
+
+    &:not(.disabled):hover {
+      background-color: darken($dp-cell-highlighted-background-color, 2.5%);
+    }
+
+    &.focused {
+      background-color: $dp-cell-focus-background-color;
+    }
+  }
+
+  &.today {
+    &:not(.selected) {
+      background-color: $dp-cell-today-background-color;
+
+      &:not(.disabled) {
+        color: $dp-cell-today-color;
+      }
+    }
+
+    &.focused:not(.selected) {
+      background-color: darken($dp-cell-today-background-color, 2.5%);
+    }
+  }
+
+  &%range-start-end-common {
+    background-color: $dp-range-start-end-background-color;
+    color: $dp-range-start-end-color;
+  }
+
+  &%range-start-end-focused-common {
+    background-color: darken($dp-range-start-end-background-color, 2.5%);
+  }
+
+  &.range-start {
+    border-radius: $dp-border-radius 0 0 $dp-border-radius;
+
+    &:not(.selected) {
+      @extend %range-start-end-common;
+    }
+
+    &.focused:not(.selected) {
+      @extend %range-start-end-focused-common;
+    }
+  }
+
+  &.range-end {
+    border-radius: 0 $dp-border-radius $dp-border-radius 0;
+
+    &:not(.selected) {
+      @extend %range-start-end-common;
+    }
+
+    &.focused:not(.selected) {
+      @extend %range-start-end-focused-common;
+    }
+  }
+
+  &.range {
+    border-radius: 0;
+    background-color: $dp-range-background-color;
+
+    &:not(.disabled):not(.focused):not(.today):hover {
+      background-color: darken($dp-range-background-color, 2.5%);
+    }
+
+    &.disabled {
+      color: darken($dp-range-background-color, 10%);
+    }
+
+    &.focused {
+      background-color: darken($dp-range-background-color, 5%);
+    }
+
+    @if $dp-range-today-background-color != $dp-cell-today-background-color {
+      &.today {
+        background-color: $dp-range-today-background-color;
+      }
+    }
+  }
+
+  .datepicker-view .days & {
+    @extend %flex-basis-day;
+  }
+
+  .datepicker-view.datepicker-grid & {
+    @extend %flex-basis-month-year;
+    height: $dp-cell-size-base * 2;
+    line-height: $dp-cell-size-base * 2;
+  }
+}
+
+.datepicker-input.in-edit {
+  border-color: $dp-input-in-edit-border-color;
+
+  &:focus,
+  &:active {
+    box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2);
+  }
+}

package/sass/index-bs4.scss

@@ -0,0 +1,5 @@
+@import '../node_modules/bootstrap4/scss/functions';
+@import '../node_modules/bootstrap4/scss/variables';
+@import '../node_modules/bootstrap4/scss/mixins';
+
+@import 'datepicker-bs4';

package/sass/index-bs5.scss

@@ -0,0 +1,5 @@
+@import '../node_modules/bootstrap5/scss/functions';
+@import '../node_modules/bootstrap5/scss/variables';
+@import '../node_modules/bootstrap5/scss/mixins';
+
+@import 'datepicker-bs5';

package/sass/index-bulma.scss

@@ -0,0 +1,6 @@
+@import '../node_modules/bulma/sass/utilities/initial-variables';
+@import '../node_modules/bulma/sass/utilities/functions';
+@import '../node_modules/bulma/sass/utilities/derived-variables';
+@import '../node_modules/bulma/sass/utilities/mixins';
+
+@import 'datepicker-bulma';

package/sass/index-foundation.scss

@@ -0,0 +1,3 @@
+@import '../node_modules/foundation-sites/scss/global';
+
+@import 'datepicker-foundation';

package/scripts/build-css.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const nodeSass = require('postcss-node-sass')({
+  outputStyle: 'expanded',
+});
+const autoprefixer = require('autoprefixer');
+const syntax = require('postcss-scss');
+
+const rootDir = path.dirname(__dirname);
+const srcDir = `${rootDir}/sass`;
+const distDir = `${rootDir}/dist/css`;
+const files = [
+  {in: 'datepicker.scss', out: 'datepicker.css'},
+  {in: 'index-bulma.scss', out: 'datepicker-bulma.css'},
+  {in: 'index-bs4.scss', out: 'datepicker-bs4.css'},
+  {in: 'index-bs5.scss', out: 'datepicker-bs5.css'},
+  {in: 'index-foundation.scss', out: 'datepicker-foundation.css'},
+];
+
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, {recursive: true});
+}
+
+Promise.all(files.map((entry) => {
+  return new Promise((resolve) => {
+    const from = `${srcDir}/${entry.in}`;
+    const file = fs.readFileSync(from, 'utf8');
+    postcss([nodeSass, autoprefixer])
+      .process(file, {syntax, from, map: false})
+      .then((result) => {
+        fs.writeFileSync(`${distDir}/${entry.out}`, result.css);
+        resolve();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  });
+}));

package/scripts/build-locales.js

@@ -0,0 +1,57 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootDir = path.dirname(__dirname);
+const srcDir = `${rootDir}/js/i18n/locales`;
+const distDir = `${rootDir}/dist/js/locales`;
+const indexDir = `${rootDir}/dist/locales`;
+
+const reConvert = /export default (\{\s+)([\w'-]+):([\s\S]+\})\n\};/m;
+const rePropNameFix = /\.('\w+-\w+')/;
+
+if (fs.existsSync(distDir)) {
+  // empty dist dir
+  fs.readdirSync(distDir).forEach((file) => {
+    fs.unlinkSync(`${distDir}/${file}`);
+  });
+} else {
+  fs.mkdirSync(distDir, {recursive: true});
+}
+// copy locales to dist
+fs.readdirSync(srcDir).forEach((file) => {
+  const src = fs.readFileSync(`${srcDir}/${file}`, 'utf8');
+  const output = src
+    .replace(reConvert, '(function () $1Datepicker.locales.$2 =$3;\n}());')
+    .replace(rePropNameFix, '[$1]');
+  fs.writeFileSync(`${distDir}/${file}`, output);
+});
+
+// Generate dist/locales/index.{esm,cjs}.js so that the "./locales" export
+// entry (exports["./locales"] -> dist/locales/index.{cjs,esm}.js) resolves.
+// Each source locale file exports a default object keyed by locale code; the
+// index aggregates all of them into a single data-only module. Per docs
+// (docs/i18n.md), consumers merge entries themselves via
+// `Object.assign(Datepicker.locales, locales)`, so the index must NOT
+// import Datepicker (main bundle and Datepicker.esm.js are separate
+// module instances and side-effect registration would diverge).
+const reDefault = /export default ([\s\S]*)$/;
+if (!fs.existsSync(indexDir)) {
+  fs.mkdirSync(indexDir, {recursive: true});
+}
+const bodies = [];
+fs.readdirSync(srcDir).sort().forEach((file) => {
+  const src = fs.readFileSync(`${srcDir}/${file}`, 'utf8');
+  const m = src.match(reDefault);
+  if (!m) {
+    return;
+  }
+  let body = m[1].trim();
+  if (body.endsWith(';')) {
+    body = body.slice(0, -1);
+  }
+  bodies.push(body);
+});
+const esmIndex = `const locales = Object.assign(\n  {},\n${bodies.map((b) => `  ${b}`).join(',\n')}\n);\n\nexport default locales;\n`;
+const cjsIndex = `'use strict';\n\nmodule.exports = Object.assign(\n  {},\n${bodies.map((b) => `  ${b}`).join(',\n')}\n);\n`;
+fs.writeFileSync(`${indexDir}/index.esm.js`, esmIndex);
+fs.writeFileSync(`${indexDir}/index.cjs.js`, cjsIndex);

package/scripts/convert-bsdp-locales.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+
+const usage = `USAGE:
+
+node ${path.basename(process.argv[1])} [options] source_dir
+
+  source_dir:   path to the locale directory of bootstrap-datepicker's source
+
+Options:
+  -h|--help   print this help
+`;
+
+const src = process.argv[2];
+if (!src || src === '-h' || src === '--help') {
+  console.log(usage);
+  process.exit();
+}
+if (!fs.existsSync(src) || !fs.statSync(src).isDirectory()) {
+  console.error(`${src} is not a directory.`);
+  process.exit(1);
+}
+
+const reFilename = /^bootstrap-datepicker\.([a-z]+(-[A-Za-z]+)?)\.js$/;
+const files = fs.readdirSync(src);
+
+if (files.length < 2 || !reFilename.test(files[1])) {
+  console.error(`${src} is not a bootstrap-datepicker's locale directory.`);
+  process.exit(1);
+}
+
+const destDir = path.resolve(__dirname, '../js/i18n/locales');
+if (!fs.existsSync(destDir)) {
+  fs.mkdirSync(destDir, {recursive: true});
+}
+
+files.forEach(file => {
+  const matched = file.match(reFilename);
+  if (!matched) {
+    return;
+  }
+  const lang = matched[1].replace('latin', 'latn');
+  if (lang === 'en-US') {
+    return;
+  }
+  const langKey = lang.indexOf('-') > -1 ? `'${lang}'` : lang;
+
+  let contents = fs.readFileSync(path.resolve(src, file), 'utf8');
+  if (contents.indexOf('DEPRECATED') > -1) {
+    return;
+  }
+
+  contents = contents
+    .replace(/\t/g, '  ')
+    .replace(/; *\( *function *\( *\$ *\) *\{/, 'export default {')
+    .replace(/ *\$\.fn\.datepicker\.dates\[.+?\] =/, `  ${langKey}:`)
+    .replace(/ *};/, '  }')
+    .replace(/ *\} *\( *jQuery *\) *\);\s*/, '};\n')
+    .replace(/ {5,}/g, '    ')
+    .replace(/: *(\S)/g, ': $1')
+    .replace(/ +\n/g, '\n')
+    .replace(/(titleFormat:.+)yyyy/, '$1y');
+
+  fs.writeFileSync(path.resolve(destDir, `${lang}.js`), contents);
+});

package/scripts/minify-css.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const cssnano = require('cssnano');
+
+const distDir = `${path.dirname(__dirname)}/dist/css`;
+const files = [
+  'datepicker',
+  'datepicker-bulma',
+  'datepicker-bs4',
+  'datepicker-bs5',
+  'datepicker-foundation',
+];
+
+Promise.all(files.map((basename) => {
+  return new Promise((resolve) => {
+    const fileNameBase = `${distDir}/${basename}`;
+    const from = `${fileNameBase}.css`;
+    const file = fs.readFileSync(from, 'utf8');
+
+    postcss([cssnano])
+      .process(file, {from, map: false})
+      .then((result) => {
+        fs.writeFileSync(`${fileNameBase}.min.css`, result.css);
+        resolve();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  });
+}));

package/scripts/minify-js.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+const {minify} = require('uglify-es');
+
+const distDir = `${path.dirname(__dirname)}/dist/js`;
+const files = ['datepicker', 'datepicker-full'];
+
+files.forEach((basename) => {
+  const fileNameBase = `${distDir}/${basename}`;
+  const file = fs.readFileSync(`${fileNameBase}.js`, 'utf8');
+  const {code, error} = minify(file);
+
+  if (error) {
+    throw error;
+  }
+  fs.writeFileSync(`${fileNameBase}.min.js`, code);
+});

package/style.css

@@ -0,0 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+@import "tailwindcss";
+
+@import "flowbite/src/themes/default";
+@plugin "flowbite/plugin";
+@source "../node_modules/flowbite";
+
+/* input.css */
+@custom-variant dark (&:where(.dark, .dark *));

package/tailwind.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  content: ["./js/**/*.js"],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    // require('flowbite/plugin')
+  ],
+  corePlugins: {
+    preflight: false,
+  }
+}