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

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@ohos-ports/flowbite-datepicker",
+  "version": "2.0.0-beta.0",
+  "description": "A Tailwind CSS powered datepicker built with vanilla JavaScript and Flowbite",
+  "main": "dist/main.cjs.js",
+  "module": "dist/main.esm.js",
+  "exports": {
+    ".": {
+      "require": "./dist/main.cjs.js",
+      "import": "./dist/main.esm.js"
+    },
+    "./Datepicker": {
+      "require": "./dist/Datepicker.cjs.js",
+      "import": "./dist/Datepicker.esm.js"
+    },
+    "./DateRangePicker": {
+      "require": "./dist/DateRangePicker.cjs.js",
+      "import": "./dist/DateRangePicker.esm.js"
+    },
+    "./locales": {
+      "require": "./dist/locales/index.cjs.js",
+      "import": "./dist/locales/index.esm.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/flowbite-datepicker/2.0.0"
+  },
+  "homepage": "https://flowbite.com/docs/plugins/datepicker/",
+  "scripts": {
+    "build:js": "rollup -c",
+    "build:locales": "node scripts/build-locales.js",
+    "build": "npm run build:js && npm run build:locales && npm run minify && npx @tailwindcss/cli -i ./style.css -o ./dist/css/datepicker.min.css",
+    "minify:js": "node scripts/minify-js.js",
+    "minify": "npm run minify:js",
+    "make:js": "npm run build:js && npm run minify:js",
+    "make": "npm run build && npm run minify",
+    "test:lib": "mocha -r esm test/unit/lib",
+    "test:unit": "mocha -r esm test/unit",
+    "test": "npm run test:lib && npm run test:unit"
+  },
+  "keywords": [
+    "datepicker",
+    "tailwind",
+    "vanilla",
+    "javascript"
+  ],
+  "author": "Flowbite & Hidenao Miyamoto",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@tailwindcss/vite": "^4.1.17",
+    "autoprefixer": "^10.4.0",
+    "bootstrap4": "npm:bootstrap@^4.5.3",
+    "bootstrap5": "npm:bootstrap@^5.0.1",
+    "bulma": "^0.9.1",
+    "bulma-tooltip": "^3.0.2",
+    "cssnano": "^4.1.10",
+    "docsify-cli": "^4.4.2",
+    "esm": "^3.2.25",
+    "flowbite": "^4.0.0",
+    "foundation-sites": "^6.6.3",
+    "jsdom": "^16.4.0",
+    "mocha": "^8.2.1",
+    "postcss": "^8.5.6",
+    "@ohos-ports/rollup": "^4.62.2-beta.2",
+    "simulant": "^0.2.2",
+    "sinon": "^9.2.2",
+    "tailwindcss": "^4.1.17",
+    "uglify-es": "^3.3.9",
+    "unexpected": "^12.0.0"
+  },
+  "dependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@ohos-ports/tailwindcss-postcss": "^4.3.1-beta.1"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}

package/rollup.config.js

@@ -0,0 +1,75 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { babel } from '@rollup/plugin-babel';
+
+export default [
+  {
+    input: 'js/main.js',
+    output: [
+      {
+        file: 'dist/main.cjs.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/main.esm.js',
+        format: 'es',
+      },
+      {
+        file: 'dist/main.umd.js',
+        format: 'umd',
+        name: 'FlowbiteDatepicker',
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] }),
+    ],
+  },
+  {
+    input: 'js/Datepicker.js',
+    output: [
+      {
+        file: 'dist/Datepicker.cjs.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/Datepicker.esm.js',
+        format: 'es',
+      },
+      {
+        file: 'dist/Datepicker.umd.js',
+        format: 'umd',
+        name: 'Datepicker',
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] }),
+    ],
+  },
+  {
+    input: 'js/DateRangePicker.js',
+    output: [
+      {
+        file: 'dist/DateRangePicker.cjs.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/DateRangePicker.esm.js',
+        format: 'es',
+      },
+      {
+        file: 'dist/DateRangePicker.umd.js',
+        format: 'umd',
+        name: 'DateRangePicker',
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] }),
+    ],
+  }
+];

package/sass/_mixins.scss

@@ -0,0 +1,12 @@
+
+@mixin dp-header-button-common {
+  border-color: transparent;
+  font-weight: bold;
+}
+
+@mixin dp-footer-button-common {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: $dp-border-radius-small;
+  width: 100%;
+  font-size: $dp-font-size-small;
+}

package/sass/datepicker-bs4.scss

@@ -0,0 +1,91 @@
+$dp-background-color: $white !default;
+$dp-border-color: $border-color !default;
+$dp-border-radius: $border-radius !default;
+$dp-border-radius-small: $border-radius-sm !default;
+$dp-line-height-base: 1.5 !default;
+$dp-font-size-normal: $font-size-base !default;
+$dp-font-size-small: $font-size-sm !default;
+$dp-font-weight-semibold: 600 !default;
+$dp-font-weight-bold: $font-weight-bold !default;
+$dp-dropdown-offset: 4px !default;
+$dp-dropdown-shadow: $dropdown-box-shadow !default;
+$dp-dropdown-z: $zindex-dropdown !default;
+
+$dp-title-background-color: $light !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken($dropdown-link-hover-bg, 2.5) !default;
+$dp-cell-prevnext-color: color('gray') !default;
+$dp-cell-disabled-color: $dropdown-link-disabled-color !default;
+$dp-cell-selected-background-color: $dropdown-link-active-bg !default;
+$dp-cell-selected-color: $dropdown-link-active-color !default;
+$dp-cell-selected-font-weight: 600 !default;
+$dp-cell-today-background-color: $teal !default;
+$dp-cell-today-color: $white !default;
+$dp-cell-highlighted-background-color: $gray-100 !default;
+$dp-range-start-end-background-color: $secondary !default;
+$dp-range-start-end-color: $dp-cell-selected-color !default;
+$dp-range-background-color: $gray-200 !default;
+$dp-range-today-background-color: $dp-cell-today-background-color !default;
+$dp-week-color: $gray-300 !default;
+
+$dp-footer-background-color: $light !default;
+
+$dp-input-in-edit-border-color: darken($input-focus-border-color, 5%) !default;
+$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
+
+@import 'mixins';
+
+@mixin dp-button {
+  .btn {
+    // use custom version of .btn-light
+    $background: $light;
+    $border: $light;
+    $hover-background: darken($background, 7.5%);
+    $hover-border: darken($border, 10%);
+    $active-background: darken($background, 10%);
+    $active-border: darken($border, 12.5%);
+
+    border-color: $border;
+    background-color: $dp-background-color;
+
+    &:hover {
+      border-color: $hover-border;
+      background-color: $hover-background;
+      color: color-yiq($hover-background);
+    }
+
+    &:focus {
+      border-color: $hover-border;
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
+      background-color: $hover-background;
+      color: color-yiq($hover-background);
+    }
+
+    &:disabled {
+      border-color: $border;
+      background-color: $background;
+      color: color-yiq($background);
+    }
+
+    &:not(:disabled):active {
+      border-color: $active-border;
+      background-color: $active-background;
+      color: color-yiq($active-background);
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
+      }
+    }
+
+    .datepicker-header & {
+      @include dp-header-button-common;
+    }
+
+    .datepicker-footer & {
+      @include dp-footer-button-common;
+    }
+  }
+}
+
+@import 'datepicker';

package/sass/datepicker-bs5.scss

@@ -0,0 +1,91 @@
+$dp-background-color: $white !default;
+$dp-border-color: $border-color !default;
+$dp-border-radius: $border-radius !default;
+$dp-border-radius-small: $border-radius-sm !default;
+$dp-line-height-base: 1.5 !default;
+$dp-font-size-normal: $font-size-base !default;
+$dp-font-size-small: $font-size-sm !default;
+$dp-font-weight-semibold: 600 !default;
+$dp-font-weight-bold: $font-weight-bold !default;
+$dp-dropdown-offset: 4px !default;
+$dp-dropdown-shadow: $dropdown-box-shadow !default;
+$dp-dropdown-z: $zindex-dropdown !default;
+
+$dp-title-background-color: $light !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken($dropdown-link-hover-bg, 2.5) !default;
+$dp-cell-prevnext-color: color('gray') !default;
+$dp-cell-disabled-color: $dropdown-link-disabled-color !default;
+$dp-cell-selected-background-color: $dropdown-link-active-bg !default;
+$dp-cell-selected-color: $dropdown-link-active-color !default;
+$dp-cell-selected-font-weight: 600 !default;
+$dp-cell-today-background-color: $teal !default;
+$dp-cell-today-color: $white !default;
+$dp-cell-highlighted-background-color: $gray-100 !default;
+$dp-range-start-end-background-color: $secondary !default;
+$dp-range-start-end-color: $dp-cell-selected-color !default;
+$dp-range-background-color: $gray-200 !default;
+$dp-range-today-background-color: $dp-cell-today-background-color !default;
+$dp-week-color: $gray-300 !default;
+
+$dp-footer-background-color: $light !default;
+
+$dp-input-in-edit-border-color: darken($input-focus-border-color, 5%) !default;
+$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
+
+@import 'mixins';
+
+@mixin dp-button {
+  .btn {
+    // use custom version of .btn-light
+    $background: $light;
+    $border: $light;
+    $hover-background: darken($background, 7.5%);
+    $hover-border: darken($border, 10%);
+    $active-background: darken($background, 10%);
+    $active-border: darken($border, 12.5%);
+
+    border-color: $border;
+    background-color: $dp-background-color;
+
+    &:hover {
+      border-color: $hover-border;
+      background-color: $hover-background;
+      color: color-contrast($hover-background);
+    }
+
+    &:focus {
+      border-color: $hover-border;
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), 0.5);
+      background-color: $hover-background;
+      color: color-contrast($hover-background);
+    }
+
+    &:disabled {
+      border-color: $border;
+      background-color: $background;
+      color: color-contrast($background);
+    }
+
+    &:not(:disabled):active {
+      border-color: $active-border;
+      background-color: $active-background;
+      color: color-contrast($active-background);
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), 0.5);
+      }
+    }
+
+    .datepicker-header & {
+      @include dp-header-button-common;
+    }
+
+    .datepicker-footer & {
+      @include dp-footer-button-common;
+    }
+  }
+}
+
+@import 'datepicker';

package/sass/datepicker-bulma.scss

@@ -0,0 +1,69 @@
+$dp-background-color: $white !default;
+$dp-border-color: $border !default;
+$dp-border-radius: $radius !default;
+$dp-border-radius-small: $radius-small !default;
+$dp-line-height-base: 1.5 !default;
+$dp-font-size-normal: $size-normal !default;
+$dp-font-size-small: $size-small !default;
+$dp-font-weight-semibold: $weight-semibold !default;
+$dp-font-weight-bold: $weight-bold !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: $background !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken($white-ter, 5%) !default;
+$dp-cell-prevnext-color: $grey !default;
+$dp-cell-disabled-color: $grey-lighter !default;
+$dp-cell-selected-background-color: $link !default;
+$dp-cell-selected-color: $link-invert !default;
+$dp-cell-selected-font-weight: $weight-semibold !default;
+$dp-cell-today-background-color: $primary !default;
+$dp-cell-today-color: $primary-invert !default;
+$dp-cell-highlighted-background-color: $white-ter !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: $background !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;
+
+@import 'mixins';
+
+@mixin dp-button {
+  .button {
+    .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;
+    }
+  }
+}
+
+@import 'datepicker';

package/sass/datepicker-foundation.scss

@@ -0,0 +1,66 @@
+$dp-background-color: $body-background !default;
+$dp-border-color: $light-gray !default;
+$dp-border-radius: $global-radius !default;
+$dp-border-radius-small: $global-radius !default;
+$dp-line-height-base: $global-lineheight !default;
+$dp-font-size-normal: 1rem !default;
+$dp-font-size-small: 0.75rem !default;
+$dp-font-weight-semibold: semibold !default;
+$dp-font-weight-bold: bold !default;
+$dp-dropdown-offset: 4px !default;
+$dp-dropdown-shadow: 0 0 0 1px $medium-gray !default;
+$dp-dropdown-z: 10 !default;
+
+$dp-title-background-color: $light-gray !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken($white, 5%) !default;
+$dp-cell-prevnext-color: $medium-gray !default;
+$dp-cell-disabled-color: $light-gray !default;
+$dp-cell-selected-background-color: get-color('primary') !default;
+$dp-cell-selected-color: $white !default;
+$dp-cell-selected-font-weight: $dp-font-weight-semibold !default;
+$dp-cell-today-background-color: scale-color(get-color('primary'), $lightness: 85%) !default;
+$dp-cell-today-color: $dark-gray !default;
+$dp-cell-highlighted-background-color: scale-color($medium-gray, $lightness: 85%) !default;
+$dp-range-start-end-background-color: get-color('secondary') !default;
+$dp-range-start-end-color: $dp-cell-selected-color !default;
+$dp-range-background-color: $light-gray !default;
+$dp-range-today-background-color: darken($dp-cell-today-background-color, 8%) !default;
+$dp-week-color: $dark-gray !default;
+
+$dp-footer-background-color: $light-gray !default;
+
+$dp-input-in-edit-border-color: darken($medium-gray, 15%) !default;
+$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
+
+@import 'mixins';
+
+@mixin dp-button {
+  .button {
+    margin: 0;
+    background-color: $dp-background-color;
+    color: $body-font-color;
+
+    &:hover,
+    &:focus {
+      background-color: scale-color($dp-background-color, $lightness: -15%);
+
+      &[disabled] {
+        opacity: 0.25;  // $button-opacity-disabled
+        background-color: $dp-background-color;
+        color: $body-font-color;
+      }
+    }
+
+    .datepicker-header & {
+      @include dp-header-button-common;
+    }
+
+    .datepicker-footer & {
+      @include dp-footer-button-common;
+    }
+  }
+}
+
+@import 'datepicker';